/* ————— THE KITSONG METHOD · interactive framework · private preview ————— */
:root{
  --soil-deep:#241b12;
  --soil:#33261a;
  --loam:#4a3826;
  --clay:#b0603f;
  --seed:#d9a441;
  --seed-light:#e8c067;
  --wheat:#f4e9d4;
  --cream:#faf3e3;
  --green-deep:#3e5a33;
  --green:#5c7c4a;
  --green-light:#7fa05b;
  --ink:#2c2115;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,'Helvetica Neue',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;max-width:100%}
body{
  font-family:var(--sans);font-weight:340;color:var(--wheat);
  background:var(--soil-deep);line-height:1.6;
  overflow-x:hidden;overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
::selection{background:var(--seed);color:var(--soil-deep)}
button{font-family:inherit;cursor:pointer}
#panel[hidden],#closed[hidden],#lab[hidden]{display:none}

#ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.vignette{position:fixed;inset:0;z-index:24;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 60%,rgba(18,12,7,.32) 100%)}
.grain{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite}
@keyframes grain{0%{background-position:0 0}12.5%{background-position:-18px 12px}25%{background-position:14px -20px}
  37.5%{background-position:-12px -14px}50%{background-position:20px 8px}62.5%{background-position:-7px 19px}
  75%{background-position:13px 13px}87.5%{background-position:-19px -8px}100%{background-position:0 0}}

/* ——— header ——— */
#bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:1rem clamp(1rem,4vw,2.4rem);color:var(--cream);pointer-events:none}
#bar .mark{display:flex;align-items:baseline;gap:.55rem}
#bar .bird{width:20px;height:20px;fill:currentColor;opacity:.9;align-self:center}
#bar .word{font-family:var(--serif);font-weight:500;letter-spacing:.3em;font-size:.88rem}
#bar .sub{font-size:.6rem;letter-spacing:.34em;color:var(--seed-light);opacity:.85}
#bar .badge{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:99px;padding:.3em .85em;opacity:.6}

.eyebrow{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  color:var(--seed-light);margin-bottom:1.1rem}
.ph{display:inline-block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;color:#e8c887;background:rgba(217,164,65,.13);
  border:1px dashed rgba(217,164,65,.55);border-radius:6px;padding:.12em .5em;
  vertical-align:middle;margin-left:.25em}

/* ——— entry ——— */
#entry{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:14vh 1.4rem 8vh}
.entry-inner{max-width:44rem}
#entry h1{font-family:var(--serif);font-weight:370;color:var(--cream);
  font-size:clamp(3rem,10vw,6.2rem);line-height:1.02;margin:.1em 0 .35em}
.entry-quote{font-family:var(--serif);font-style:italic;font-weight:330;
  font-size:clamp(1.02rem,2.4vw,1.35rem);line-height:1.6;color:var(--seed-light);max-width:36rem;margin:0 auto}
.entry-quote cite{display:block;margin-top:.7rem;font-family:var(--sans);font-style:normal;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;opacity:.6}
.entry-sub{margin:1.6rem auto 2.4rem;max-width:34rem;opacity:.85;font-size:clamp(.9rem,1.7vw,1.02rem)}
#enter-btn{background:var(--seed);color:var(--soil-deep);border:none;border-radius:999px;
  font-size:.95rem;font-weight:600;letter-spacing:.06em;padding:1em 2.4em;
  box-shadow:0 10px 40px -10px rgba(217,164,65,.65);transition:transform .25s,box-shadow .25s}
#enter-btn:hover{transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(217,164,65,.8)}
.entry-hint{margin-top:1.4rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5}

/* ——— lab / ring ——— */
#lab{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;padding:10vh 1rem 2rem}
.lab-head{text-align:center;margin-bottom:.6rem}
#lab-title{font-family:var(--serif);font-weight:380;color:var(--cream);
  font-size:clamp(1.5rem,3.6vw,2.4rem)}
#lab-sub{font-size:.8rem;opacity:.7;margin-top:.3rem}
#ring-wrap{width:min(88vw,60vh,560px);max-width:100%;margin:0 auto;position:relative}
#ring{width:100%;height:auto;display:block;overflow:visible}

/* ring pieces */
.arc{fill:none;stroke:rgba(244,233,212,.22);stroke-width:2.5;stroke-dasharray:2 7;stroke-linecap:round}
.arc.visited{stroke:var(--seed);stroke-dasharray:none;stroke-width:3;
  filter:drop-shadow(0 0 6px rgba(217,164,65,.7))}
.node,.hub{outline:none}
.node:focus-visible circle.pad,.hub:focus-visible .hub-halo{stroke:var(--seed-light);stroke-width:2.5}
.node{cursor:pointer}
.node circle.pad{fill:rgba(250,243,227,.06);stroke:rgba(244,233,212,.35);stroke-width:1.4;
  transition:fill .3s,stroke .3s}
.node:hover circle.pad,.node:focus-visible circle.pad{fill:rgba(217,164,65,.2);stroke:var(--seed-light)}
.node.active circle.pad{fill:rgba(217,164,65,.3);stroke:var(--seed);stroke-width:2}
.node.visited circle.pad{stroke:var(--seed)}
.node .glyph{fill:none;stroke:var(--wheat);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.node.active .glyph,.node:hover .glyph{stroke:var(--seed-light)}
.node text{font-family:var(--serif);font-size:14.5px;fill:var(--wheat);letter-spacing:.04em}
.node .step-num{font-family:var(--sans);font-size:9px;fill:var(--seed-light);letter-spacing:.18em}
.node .lens-dot{opacity:0;transition:opacity .3s}
.node.lens-hit .lens-dot{opacity:1}
.node.lens-dim{opacity:.38}

/* hub */
.hub{cursor:pointer}
.hub-halo{fill:rgba(217,164,65,.07);stroke:rgba(217,164,65,.3);stroke-width:1.2;
  transition:fill .3s}
.hub:hover .hub-halo,.hub:focus-visible .hub-halo{fill:rgba(217,164,65,.16)}
.hub-ring{fill-opacity:.32;stroke-width:1.4;mix-blend-mode:screen}
.hub-ring.h1{fill:#d9a441;stroke:#e8c067}
.hub-ring.h2{fill:#b0603f;stroke:#c98868}
.hub-ring.h3{fill:#5c7c4a;stroke:#89a86f}
.hub-word{font-family:var(--serif);font-size:12.5px;fill:var(--cream);opacity:.92}
.hub-label{font-family:var(--sans);font-size:8.5px;fill:var(--seed-light);letter-spacing:.3em;text-transform:uppercase}
.flow-seed{fill:var(--seed-light)}

/* controls */
#controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:center;margin-top:1rem;position:relative;z-index:6}
#walk-btn{background:transparent;color:var(--seed-light);border:1.5px solid var(--seed);
  border-radius:999px;font-size:.8rem;font-weight:550;letter-spacing:.05em;padding:.7em 1.6em;
  transition:background .25s,color .25s}
#walk-btn:hover{background:var(--seed);color:var(--soil-deep)}
#walk-btn.walking{background:var(--seed);color:var(--soil-deep)}
#lens{display:flex;align-items:center;gap:.45rem;background:rgba(250,243,227,.06);
  border:1px solid rgba(244,233,212,.18);border-radius:999px;padding:.35em .5em .35em 1em}
.lens-label{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.lens-btn{background:transparent;border:1px solid transparent;color:var(--wheat);
  font-size:.72rem;letter-spacing:.04em;border-radius:999px;padding:.45em 1em;opacity:.75;
  transition:all .25s}
.lens-btn:hover{opacity:1}
.lens-btn.on{opacity:1;font-weight:600;color:var(--soil-deep)}
.lens-btn[data-lens="head"].on{background:var(--seed-light)}
.lens-btn[data-lens="heart"].on{background:#d29070}
.lens-btn[data-lens="hands"].on{background:var(--green-light)}
#ethos-strip{margin-top:1.1rem;font-family:var(--serif);font-style:italic;font-size:.86rem;
  color:var(--seed-light);opacity:.75;text-align:center;padding:0 1rem}

/* ——— panel ——— */
#panel{position:fixed;inset:0;z-index:26;display:flex;align-items:stretch;justify-content:flex-end;
  background:rgba(20,13,7,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.panel-card{position:relative;width:min(94vw,460px);max-width:100%;height:100%;overflow-y:auto;
  background:linear-gradient(165deg,rgba(45,34,22,.97),rgba(31,22,14,.97));
  border-left:1px solid rgba(217,164,65,.35);
  padding:4.6rem 1.9rem 2.2rem;box-shadow:-30px 0 80px -30px rgba(0,0,0,.7)}
#panel-close{position:absolute;top:1rem;right:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(250,243,227,.08);border:1px solid rgba(244,233,212,.25);color:var(--wheat);
  font-size:1.3rem;line-height:1;transition:background .2s}
#panel-close:hover{background:rgba(250,243,227,.18)}
.panel-step{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--seed-light);margin-bottom:.7rem}
#panel-title{font-family:var(--serif);font-weight:390;color:var(--cream);
  font-size:clamp(1.6rem,4.5vw,2.2rem);line-height:1.1;margin-bottom:1rem}
.panel-meaning{font-size:.92rem;opacity:.92}
.panel-quote{font-family:var(--serif);font-style:italic;font-weight:330;color:var(--seed-light);
  font-size:1.02rem;line-height:1.55;margin:1.2rem 0;padding-left:1rem;border-left:2px solid var(--seed)}
.panel-quote cite{display:block;margin-top:.5rem;font-family:var(--sans);font-style:normal;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}

.panel-lens{display:flex;align-items:center;gap:.4rem;margin-top:1.3rem}
.panel-lens .lens-label{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.practices{margin-top:.7rem;display:flex;flex-direction:column;gap:.6rem}
.practice{display:flex;gap:.8rem;align-items:flex-start;background:rgba(250,243,227,.05);
  border:1px solid rgba(244,233,212,.14);border-radius:14px;padding:.85rem 1rem;
  transition:opacity .3s,border-color .3s;font-size:.85rem}
.practice .tag{flex:0 0 auto;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;border-radius:6px;padding:.3em .55em;margin-top:.15em}
.practice[data-lens="head"] .tag{background:rgba(217,164,65,.22);color:var(--seed-light)}
.practice[data-lens="heart"] .tag{background:rgba(176,96,63,.28);color:#e0a184}
.practice[data-lens="hands"] .tag{background:rgba(92,124,74,.3);color:#a4c286}
.practice.dim{opacity:.28}
.practice.hit{border-color:rgba(217,164,65,.55)}

.panel-kitsong{margin-top:1.3rem;font-size:.8rem;background:rgba(217,164,65,.07);
  border:1px dashed rgba(217,164,65,.4);border-radius:12px;padding:.9rem 1rem}
.panel-kitsong strong{color:var(--seed-light)}
.panel-adopt{margin-top:1rem;font-size:.83rem;opacity:.88}
.panel-adopt strong{color:var(--green-light)}

#seedfield-wrap{margin-top:1.4rem}
.seed-cue{font-size:.78rem;color:var(--seed-light);margin-bottom:.5rem}
#seedfield{width:100%;height:170px;display:block;border-radius:14px;cursor:crosshair;
  background:linear-gradient(180deg,#57411f22,#2e21133f);border:1px solid rgba(217,164,65,.3)}
.seed-count{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-top:.45rem;text-align:center}

.panel-nav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.8rem}
.panel-nav button{background:transparent;border:1.2px solid rgba(244,233,212,.35);color:var(--wheat);
  border-radius:999px;font-size:.78rem;padding:.65em 1.3em;transition:all .25s}
.panel-nav button:hover{border-color:var(--seed);color:var(--seed-light)}
#next-btn{border-color:var(--seed);color:var(--seed-light);font-weight:550}

/* ——— loop closed ——— */
#closed{position:fixed;inset:0;z-index:27;display:flex;align-items:center;justify-content:center;
  background:rgba(18,12,6,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:1.4rem;text-align:center}
.closed-inner{max-width:34rem;background:linear-gradient(165deg,rgba(48,36,22,.97),rgba(30,22,13,.97));
  border:1px solid rgba(217,164,65,.4);border-radius:24px;padding:2.6rem 2rem;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
#closed h3{font-family:var(--serif);font-weight:380;color:var(--cream);
  font-size:clamp(1.4rem,4.4vw,2rem);line-height:1.25;margin-bottom:1rem}
#closed p{font-size:.9rem;opacity:.9}
.closed-take{margin-top:1rem}
#again-btn{margin-top:1.6rem;background:var(--seed);color:var(--soil-deep);border:none;
  border-radius:999px;font-size:.85rem;font-weight:600;padding:.85em 2em}

footer{position:relative;z-index:5;text-align:center;padding:2.5rem 1.2rem 3rem;color:var(--wheat)}
footer p{font-size:.8rem;opacity:.85}
footer .foot-small{font-size:.64rem;opacity:.55;margin-top:.5rem;max-width:34rem;margin-left:auto;margin-right:auto}

@media(max-width:720px){
  #panel{align-items:flex-end;justify-content:center}
  .panel-card{width:100%;height:auto;max-height:82vh;border-left:none;
    border-top:1px solid rgba(217,164,65,.4);border-radius:22px 22px 0 0;
    padding:3.4rem 1.3rem 1.6rem}
  #ring-wrap{width:min(92vw,64vh)}
  #controls{gap:.55rem}
  #lens{padding-left:.8em}
}
@media(prefers-reduced-motion:reduce){
  .grain{animation:none}
}