/* ============================================================================
   ALAMBIQUE AGAVE — earthy heritage meets clean readability.
   Playfair Display (serif headings) + Work Sans (sans body).
   Limestone ground · Volcanic Ash ink · Agave Teal brand · Copper + Piña
   highlights · Verdigris functional · Tarnished secondary. Soft, organic.
   ============================================================================ */

@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-var.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair-var-italic.woff2") format("woff2");
  font-weight:400 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-var-italic.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}

:root{
  /* palette — Alambique Agave */
  --limestone:#F4F1EA;     --limestone-2:#ECE7DA;    --limestone-3:#E2DBCB;
  --ash:#2C2C2C;           --ash-soft:#3E3B37;
  --teal:#5C7D73;          --teal-btn:#4E6E64;       --teal-deep:#2E4438;      --teal-deeper:#243A30;
  --copper:#B87333;        --copper-ink:#8C5220;     --copper-hover:#9C6029;  --copper-deep:#7F4B1D;
  --pina:#C67B5C;          --pina-ink:#A24A27;       --verdigris:#49A078;      --verdigris-lt:#8FD3B0;
  --tarnished:#7A4B3A;     --muted:#6E5B49;
  --on-teal:#F4F1EA;       --on-teal-muted:#C9D2CC;  --accent-teal:#E3A86A;
  --atlas-blue:#4F8AD6;    --atlas-blue-lt:#A8C9F2;  /* the matched cluster glows blue */

  --line:rgba(44,44,44,.13);
  --line-2:rgba(44,44,44,.24);
  --line-warm:rgba(122,75,58,.34);
  --line-dark:rgba(244,241,234,.16);

  /* soft, diffused — resting gently on paper */
  --shadow:0 1px 2px rgba(44,44,44,.04), 0 10px 26px -10px rgba(58,40,28,.20);
  --shadow-lg:0 2px 5px rgba(44,44,44,.05), 0 22px 48px -16px rgba(58,40,28,.26);

  --r:6px; --r-lg:10px;

  /* feathers a watercolor still's paper edge into the page (kills the hard rectangle) */
  --still-feather:radial-gradient(98% 92% at 50% 58%, #000 42%, rgba(0,0,0,0) 88%);

  /* type */
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,system-ui,Segoe UI,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --pad:clamp(20px,5vw,72px);
  --maxw:1280px;
}

*{box-sizing:border-box}
html,body{margin:0}
main{overflow-x:clip}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--limestone); color:var(--ash);
  font-family:var(--body); font-size:clamp(16px,.5vw+15px,18px);
  line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle grain — the tactile hint of clay copitas + distillation smoke */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative; z-index:1}

h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.04; margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--copper-ink); text-decoration-thickness:.08em; text-underline-offset:.16em}
a:hover{color:var(--copper-deep)}

::selection{background:var(--teal); color:var(--limestone)}

/* shared label / eyebrow */
.kicker{font-family:var(--mono); font-weight:500; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted);
  display:inline-flex; align-items:center; gap:.7em; margin:0 0 1.1rem}
.kicker::before{content:""; width:clamp(22px,4vw,42px); height:1.5px; background:var(--copper); flex:none}
.kicker .n{color:var(--copper-ink); font-weight:600; font-feature-settings:"tnum"}
.kicker.hero-tag{font-size:clamp(.95rem,.55vw+.82rem,1.16rem); font-weight:700; color:var(--copper-ink); letter-spacing:.05em; margin-bottom:1.4rem}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
section{padding-block:clamp(64px,9vw,140px)}

/* focus */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--copper); outline-offset:4px; border-radius:2px}

.skip{position:absolute; left:-9999px; top:0; background:var(--ash); color:var(--limestone);
  padding:10px 16px; font-weight:600; z-index:200; border-radius:0 0 var(--r) 0}
.skip:focus{left:0; top:0}

/* ============================ buttons ============================ */
.btn{display:inline-flex; align-items:center; gap:.6em; font-family:var(--body);
  font-weight:600; font-size:1rem; line-height:1; text-decoration:none; cursor:pointer;
  white-space:nowrap; padding:.95em 1.5em; border:1.5px solid transparent; border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:background .18s ease,color .18s ease,transform .12s ease,border-color .18s ease,box-shadow .18s ease}
.btn .arrow{transition:transform .18s ease}
.btn-primary{background:var(--teal-btn); color:#fff; border-color:var(--teal-btn)}
.btn-primary:hover{background:var(--copper-hover); border-color:var(--copper-hover); color:#fff; box-shadow:var(--shadow-lg)}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-primary:active{transform:translateY(1px); filter:brightness(.97)}
.btn-ghost{background:transparent; color:var(--ash); border-color:var(--line-2); box-shadow:none}
.btn-ghost:hover{border-color:var(--ash); color:var(--ash)}
.btn-ghost:active{transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed}

.textlink{font-weight:600; color:var(--ash); text-decoration:none;
  border-bottom:2.5px solid var(--copper); padding-bottom:2px; transition:color .15s ease,border-color .15s ease}
.textlink:hover{color:var(--copper-ink); border-color:var(--copper-ink)}
.textlink .arrow{display:inline-block; transition:transform .18s ease}
.textlink:hover .arrow{transform:translateX(3px)}

/* ============================ header ============================ */
header.site{position:sticky; top:0; z-index:60; background:rgba(244,241,234,.84);
  backdrop-filter:saturate(135%) blur(9px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px}
.brand{display:inline-flex; flex-direction:row; align-items:center; gap:.6rem; text-decoration:none; color:var(--ash)}
.brand-mark{width:40px; height:40px; flex:none; display:block; border-radius:50%}
.brand-text{display:inline-flex; flex-direction:column; gap:3px}
.brand .name{font-family:var(--display); font-weight:700; font-size:1.34rem; letter-spacing:-.01em; line-height:1}
.brand .name .dot{color:var(--copper)}
.brand .sub{font-family:var(--mono); font-weight:500; font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); line-height:1}
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{font-family:var(--body); font-weight:500; font-size:.95rem; color:var(--ash-soft); text-decoration:none}
.nav-links a:hover{color:var(--copper-ink)}
.nav .cta{display:flex; align-items:center; gap:18px}
.status{display:inline-flex; align-items:center; gap:.55em; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.sdot{width:8px; height:8px; border-radius:50%; background:var(--verdigris); box-shadow:0 0 0 3px rgba(73,160,120,.16)}
@media (prefers-reduced-motion:no-preference){ .sdot{animation:pulse 2.8s ease-in-out infinite} }
@keyframes pulse{ 0%,100%{box-shadow:0 0 0 3px rgba(73,160,120,.16)} 50%{box-shadow:0 0 0 5px rgba(73,160,120,.08)} }
@media (max-width:1040px){ .status{display:none} }
@media (max-width:860px){ .nav-links{display:none} }
@media (max-width:520px){ .nav .btn-primary{padding:.7em 1.05em; font-size:.88rem} .brand .name{font-size:1.18rem} .brand .sub{display:none} .brand-mark{width:34px; height:34px} }

/* ============================ hero ============================ */
.hero{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(520px,80vh,800px); padding-block:clamp(56px,9vw,116px)}
/* full-bleed watercolor wash */
.hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background-image:url("img/hero2.webp");
  background-image:image-set(url("img/hero2.avif") type("image/avif"), url("img/hero2.webp") type("image/webp"));
  background-size:cover; background-position:center right}
/* limestone scrim so left-aligned text keeps contrast */
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, rgba(244,241,234,.95) 0%, rgba(244,241,234,.88) 34%, rgba(244,241,234,.55) 62%, rgba(244,241,234,.12) 100%)}
.hero .wrap{width:100%}
.hero-copy{max-width:47ch}

.hero h1{font-size:clamp(2.9rem,8.8vw,6.6rem); letter-spacing:-.012em; line-height:1.0; margin:.3em 0 0;
  font-weight:600}
.hero h1 em{font-style:italic; color:var(--copper); font-weight:600}
.hero .lede{font-size:clamp(1.12rem,1.4vw+.7rem,1.4rem); color:var(--ash-soft);
  max-width:42ch; margin:1.6rem 0 0; line-height:1.5}
.hero .actions{display:flex; flex-wrap:wrap; gap:18px 24px; align-items:center; margin-top:2.2rem}
.hero .facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:2.6rem; list-style:none; padding:0}
.hero .facts li{font-family:var(--mono); font-size:.76rem; font-weight:500; letter-spacing:.01em; color:var(--ash-soft);
  background:rgba(244,241,234,.7); border:1px solid var(--line-warm); border-radius:999px; padding:.5em 1em; backdrop-filter:blur(2px)}
.hero .facts b{color:var(--copper-ink); font-weight:700}
@media (max-width:920px){
  .hero{min-height:auto; padding-block:clamp(48px,13vw,92px)}
  .hero::before{background-position:center}
  .hero::after{background:linear-gradient(180deg, rgba(244,241,234,.86) 0%, rgba(244,241,234,.74) 60%, rgba(244,241,234,.66) 100%)}
}

/* ============================ marquee strip ============================ */
.strip{border-block:1px solid var(--line); background:var(--limestone-2)}
.strip .wrap{display:flex; flex-wrap:wrap; gap:14px 40px; padding-block:20px; align-items:center; justify-content:space-between}
.strip span{font-family:var(--mono); font-weight:500; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.strip span b{color:var(--ash); font-weight:700}
@media (max-width:680px){ .strip .wrap{flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center} }

/* ============================ section heads ============================ */
.head{max-width:24ch}
.head h2{font-size:clamp(2rem,3.6vw+1rem,3.4rem); letter-spacing:-.008em}
.lead-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:end}
@media (max-width:820px){ .lead-row{grid-template-columns:1fr; gap:20px} }
.prose{max-width:60ch; font-size:1.06rem; color:var(--ash-soft)}
.prose p+p{margin-top:1em}
.prose strong{color:var(--ash); font-weight:700}

/* problem */
.problem{background:var(--limestone-2); border-block:1px solid var(--line)}
.problem h2{font-size:clamp(2.1rem,4vw+1rem,3.9rem); max-width:18ch; letter-spacing:-.01em}
.problem .prose{margin-top:1.6rem; font-size:clamp(1.05rem,.6vw+.95rem,1.22rem)}
.prob-row{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(28px,5vw,72px); align-items:center}
.prob-copy .prose{max-width:54ch}
.prob-still{margin:0; justify-self:center; max-width:370px; width:100%}
.prob-still img{display:block; width:100%; height:auto;
  -webkit-mask-image:var(--still-feather); mask-image:var(--still-feather)}
@media (max-width:820px){ .prob-row{grid-template-columns:1fr; gap:14px} .prob-still{max-width:260px} }

/* what-it-is: definition aside */
.aside-def{margin-top:2.6rem; background:var(--teal-deep); color:var(--on-teal);
  border:1px solid var(--teal-deeper); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.5rem,3.2vw,2.6rem); position:relative; overflow:hidden}
.aside-def::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 92% -12%, rgba(227,168,106,.17), transparent 60%)}
.aside-def .kicker{color:var(--accent-teal); margin-bottom:.7rem; position:relative}
.aside-def .kicker .n{color:var(--accent-teal)}
.aside-def p{font-family:var(--display); font-style:italic; font-size:clamp(1.35rem,1.1vw+1.05rem,1.9rem);
  line-height:1.42; color:var(--on-teal); max-width:64ch; margin:0; position:relative}
.aside-def em{color:var(--accent-teal); font-weight:600}
/* hero privacy hook */
.claim{display:inline-flex; align-items:center; gap:.5em; margin:1.15rem 0 0; padding:.5em .9em .5em .8em;
  border-radius:999px; background:var(--teal-deep); color:var(--on-teal); box-shadow:var(--shadow);
  font-size:1.04rem; font-weight:700}
.claim strong{color:#fff; font-weight:800}
.claim-ico{width:1.18em; height:1.18em; fill:var(--verdigris-lt); flex:none}
/* FAQ */
.faq-list{max-width:860px; margin-top:12px; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem;
  padding:1.05rem 0; font-size:1.14rem; font-weight:600; color:var(--ash); transition:color .2s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; margin-left:auto; font-family:var(--mono); font-size:1.45em; line-height:1; color:var(--copper); flex:none}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{color:var(--copper-ink)}
.faq-item[open] summary{color:var(--copper-ink)}
.faq-item summary:focus-visible{outline:2.5px solid var(--copper); outline-offset:3px; border-radius:4px}
.faq-a{padding:0 0 1.2rem; max-width:74ch; color:var(--ash-soft); font-size:1rem; line-height:1.6}
.faq-a p{margin:0}
/* fold the more technical questions behind a toggle to shorten the default list */
.faq-more{border-bottom:1px solid var(--line)}
.faq-more[open]{border-bottom:0}
.faq-more > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem; padding:1.15rem 0;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.faq-more > summary::-webkit-details-marker{display:none}
.faq-more > summary::after{content:"+"; margin-left:auto; font-size:1.45em; line-height:1; color:var(--copper); flex:none}
.faq-more[open] > summary::after{content:"\2212"}
.faq-more > summary:hover, .faq-more[open] > summary{color:var(--copper-ink)}
.faq-more > summary:focus-visible{outline:2.5px solid var(--copper); outline-offset:3px; border-radius:4px}

/* ============================ features index ============================ */
.feat-list{margin-top:clamp(28px,5vw,56px); border-top:1px solid var(--line-2)}
.feat{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,4vw,56px);
  padding-block:clamp(26px,3.4vw,40px); border-bottom:1px solid var(--line); align-items:baseline}
.feat .idx{font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,4vw,3.4rem);
  color:var(--copper); font-feature-settings:"tnum"; line-height:.9; min-width:1.6em}
.feat .body{display:grid; grid-template-columns:minmax(0,15ch) minmax(0,1fr); gap:clamp(8px,3vw,48px); align-items:baseline}
@media (max-width:760px){ .feat .body{grid-template-columns:1fr; gap:6px} .feat{gap:18px} }
.feat h3{font-size:clamp(1.45rem,1.6vw+1rem,2rem); font-weight:600; letter-spacing:-.005em}
.feat p{color:var(--ash-soft); font-size:1.02rem; max-width:52ch}

/* ============================ how it works ============================ */
.how{background:var(--teal-deep); color:var(--on-teal); border-block:1px solid var(--teal-deeper)}
.how .kicker{color:var(--on-teal-muted)}
.how .kicker .n{color:var(--accent-teal)}
.how .kicker::before{background:var(--accent-teal)}
.how h2{color:var(--on-teal); font-size:clamp(2rem,3.6vw+1rem,3.4rem)}
.how .intro{max-width:56ch; color:var(--on-teal-muted); margin-top:1.4rem; font-size:1.08rem}

.flow{margin-top:clamp(36px,5vw,64px); display:grid; gap:14px}
.flow-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:900px){ .flow-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .flow-row{grid-template-columns:1fr} }
.stage{border:1px solid var(--line-dark); border-radius:var(--r-lg); padding:18px 18px 20px;
  background:rgba(244,241,234,.05); position:relative; min-height:118px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.stage .s-n{font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.1em; color:var(--accent-teal)}
.stage h4{font-family:var(--display); font-weight:600; font-size:1.16rem; margin:.5rem 0 .35rem; color:var(--on-teal)}
.stage p{font-size:.86rem; color:var(--on-teal-muted); line-height:1.45}
.stage b{color:var(--accent-teal); font-weight:600}
.stage.boundary{background:rgba(73,160,120,.14); border-color:var(--verdigris)}
.stage.boundary .s-n{color:var(--verdigris-lt)}
.flow-note{margin-top:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.84rem; color:var(--on-teal-muted)}
/* the full pipeline stays open on desktop; on phones it folds behind a toggle to cut scrolling */
.how-more > summary{list-style:none; cursor:pointer; display:none; align-items:center; gap:.7rem; margin-top:20px;
  font-family:var(--mono); font-size:.86rem; letter-spacing:.04em; color:var(--on-teal);
  padding:13px 16px; border:1px solid rgba(244,241,234,.24); border-radius:var(--r-lg); background:rgba(244,241,234,.05)}
.how-more > summary::-webkit-details-marker{display:none}
.how-more > summary::after{content:"+"; margin-left:auto; font-family:var(--mono); font-size:1.35em; line-height:1; color:var(--accent-teal)}
.how-more[open] > summary::after{content:"\2212"}
.how-more > summary:hover{border-color:var(--accent-teal)}
.how-more > summary:focus-visible{outline:2.5px solid var(--accent-teal); outline-offset:2px}
@media (max-width:720px){ .how-more > summary{display:flex} }
.flow-note .badge{font-family:var(--mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.7rem;
  color:var(--verdigris-lt); background:transparent; border:1px solid var(--verdigris); padding:.4em .85em; border-radius:999px}

/* ============================ stack spec sheet ============================ */
.spec{margin-top:clamp(28px,4vw,48px); border-top:1px solid var(--line-2)}
/* each part collapses to CATEGORY · name; click a row to read what it does */
.srow{border-bottom:1px solid var(--line)}
.srow > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem; padding:15px 0}
.srow > summary::-webkit-details-marker{display:none}
.srow > summary::after{content:"+"; margin-left:auto; font-family:var(--mono); font-size:1.4em; line-height:1; color:var(--copper); flex:none}
.srow[open] > summary::after{content:"\2212"}
.srow > summary:hover .sval{color:var(--copper-ink)}
.srow[open] > summary .sval{color:var(--copper-ink)}
.srow > summary:focus-visible{outline:2.5px solid var(--copper); outline-offset:3px; border-radius:4px}
.smeta{flex:1 1 auto; min-width:0; display:grid; grid-template-columns:minmax(0,15ch) minmax(0,1fr); gap:clamp(10px,3vw,28px); align-items:baseline}
.scat{font-family:var(--mono); font-weight:500; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.sval{font-size:1.04rem; color:var(--ash)}
.sval b{color:var(--copper-ink)}
.sbody{padding:2px 0 16px}
.sbody .sx{color:var(--ash-soft); font-size:.98rem; line-height:1.55; margin:0; max-width:66ch}
.sbody .ssub{color:var(--tarnished); font-size:.9rem; margin:.55rem 0 0}
@media (max-width:620px){ .smeta{grid-template-columns:1fr; gap:2px} }

/* ============================ field notes ============================ */
.notes{background:var(--limestone-2); border-block:1px solid var(--line)}
.notes-grid{margin-top:clamp(28px,4vw,52px); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px)}
@media (max-width:760px){ .notes-grid{grid-template-columns:1fr} }
.feature-img{max-width:760px; margin:clamp(26px,4vw,46px) auto 0; border:1px solid var(--line-warm);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:var(--limestone)}
.feature-img img{display:block; width:100%; height:auto}
/* "What it is" — alembic still illustration anchors the left column */
#what .head{max-width:30ch; margin-bottom:clamp(22px,3.4vw,40px)}
#what .lead-row{grid-template-columns:clamp(240px,32%,340px) minmax(0,1fr); align-items:center; gap:clamp(28px,5vw,64px)}
.what-still{margin:0; width:100%; max-width:340px}
.what-still img{display:block; width:100%; height:auto;
  -webkit-mask-image:var(--still-feather); mask-image:var(--still-feather)}
@media (max-width:820px){ #what .lead-row{grid-template-columns:1fr} .what-still{max-width:280px; margin:.2rem auto .4rem} }
.note{background:var(--limestone); border:1px solid var(--line-warm); border-radius:var(--r-lg);
  padding:clamp(22px,2.5vw,30px); box-shadow:var(--shadow)}
.note h3{font-size:clamp(1.3rem,1.4vw+1rem,1.7rem); font-weight:600; letter-spacing:-.004em; margin-bottom:.6rem}
.note p{color:var(--ash-soft); font-size:1rem}
.note .lbl{display:block; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--copper-ink); margin-bottom:.9rem}

/* ============================ closing / footer ============================ */
.close{background:var(--teal-deep); color:var(--on-teal)}
.close .wrap{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:820px){ .close .wrap{grid-template-columns:1fr; gap:28px} }
.close h2{color:var(--on-teal); font-size:clamp(2.4rem,5vw+1rem,4.4rem); letter-spacing:-.01em; line-height:1.02}
.close h2 em{font-style:italic; color:var(--accent-teal); font-weight:600}
.close p{color:var(--on-teal-muted); margin-top:1.3rem; max-width:40ch; font-size:1.06rem}
.close .actions{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.close .btn-primary{background:var(--copper-hover); border-color:var(--copper-hover); color:#fff}
.close .btn-primary:hover{background:var(--copper-deep); border-color:var(--copper-deep)}
.close .meta{font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--on-teal-muted)}

footer.site{background:var(--teal-deeper); color:var(--on-teal-muted); border-top:1px solid var(--line-dark)}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:center; padding-block:30px}
footer.site .brand .name{color:var(--on-teal); font-size:1.12rem}
footer.site .brand .name .dot{color:var(--accent-teal)}
footer.site .brand .sub{color:var(--on-teal-muted)}
footer.site .brand-mark{width:34px; height:34px}
footer.site a{color:var(--on-teal)}
footer.site .fnote{font-size:.82rem; max-width:48ch}

/* ============================ glossary tooltips ============================ */
.term{position:relative; display:inline-block}
.term-btn{font:inherit; color:inherit; background:none; border:0; margin:0; padding:0; cursor:help;
  text-decoration:underline; text-decoration-style:dotted; text-decoration-thickness:1.5px;
  text-underline-offset:3px; text-decoration-color:var(--copper)}
.term-btn:hover{color:var(--copper-ink); text-decoration-color:var(--copper-ink)}
.term-btn:focus-visible{outline:2.5px solid var(--copper); outline-offset:3px; border-radius:2px}
.term-tip{position:absolute; left:50%; top:calc(100% + 11px); transform:translateX(-50%);
  width:max-content; max-width:min(300px,78vw); z-index:90;
  background:var(--limestone); color:var(--ash-soft); border:1px solid var(--line-warm);
  border-radius:8px; box-shadow:var(--shadow-lg); padding:.72em .85em;
  font-family:var(--body); font-weight:400; font-size:.87rem; line-height:1.45;
  text-transform:none; letter-spacing:normal; text-align:left; white-space:normal;
  opacity:0; visibility:hidden; translate:0 4px;
  transition:opacity .14s ease, translate .14s ease, visibility .14s; pointer-events:none}
.term-tip b{color:var(--ash); font-weight:700}
.term-tip::after{content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-bottom-color:var(--limestone);
  filter:drop-shadow(0 -1px 0 var(--line-warm))}
.term:hover .term-tip, .term:focus-within .term-tip, .term.open .term-tip{
  opacity:1; visibility:visible; translate:0 0; pointer-events:auto}
.term-tip.up{top:auto; bottom:calc(100% + 11px)}
.term-tip.up::after{bottom:auto; top:100%; border-bottom-color:transparent;
  border-top-color:var(--limestone); filter:drop-shadow(0 1px 0 var(--line-warm))}
/* left-anchored variant (for labels at the left edge, e.g. the spec sheet) */
.term-tip.tl{left:0; transform:none}
.term-tip.tl::after{left:24px}
.term-tip.wide{width:340px; max-width:86vw}
.term-tip .tfig{display:block; margin:0 0 .6em}
.term-tip svg{display:block; width:100%; height:auto; border:1px solid var(--line);
  border-radius:6px; background:var(--limestone-2); padding:7px}
.term-tip .tcap{display:block; font-size:.74rem; color:var(--muted); margin-top:.35em}
.how .term-btn{color:var(--accent-teal); text-decoration-color:var(--accent-teal); font-weight:600}
.how .term-btn:hover{color:#f0b886; text-decoration-color:#f0b886}
/* small round info button (per-stage "how this works") */
.term-btn.info{display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px;
  border-radius:50%; border:1.5px solid var(--accent-teal); color:var(--accent-teal); background:transparent;
  text-decoration:none; font-family:var(--mono); font-size:11px; font-weight:700; font-style:normal; line-height:1;
  vertical-align:middle; margin-left:.45em; cursor:pointer; transition:background .15s ease, color .15s ease}
.how .term-btn.info:hover{background:var(--accent-teal); color:var(--teal-deep); text-decoration:none}
.term-btn.info:focus-visible{outline:2.5px solid var(--accent-teal); outline-offset:2px; border-radius:50%}
.stage.boundary .term-btn.info{border-color:var(--verdigris-lt); color:var(--verdigris-lt)}
.how .stage.boundary .term-btn.info:hover{background:var(--verdigris-lt); color:var(--teal-deep)}
.hint{font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--muted); margin-top:1.6rem}
.hint b{color:var(--tarnished); font-weight:600}
@media (prefers-reduced-motion:reduce){ .term-tip{transition:none} }

/* ============================ atlas ============================ */
.atlas{background:var(--limestone); border-block:1px solid var(--line)}

/* ===== Interactive retrieval sandbox (Prompt Lab) ===== */
.sandbox{background:var(--limestone-2); border-block:1px solid var(--line)}
.sb-head{max-width:70ch}
.sb-lede{font-size:clamp(1rem,.5vw+.9rem,1.18rem); line-height:1.55; color:var(--ash-soft); margin:.6rem 0 0}
.sb-ask{display:flex; gap:10px; margin:clamp(20px,3vw,32px) 0 12px; max-width:640px}
.sb-input{flex:1 1 auto; min-width:0; font:inherit; font-size:1rem; color:var(--ash); background:var(--limestone);
  border:1.5px solid var(--line-2); border-radius:var(--r); padding:.7em .9em; transition:border-color .2s ease, box-shadow .2s ease}
.sb-input::placeholder{color:var(--muted)}
.sb-input:focus{outline:none; border-color:var(--copper); box-shadow:0 0 0 3px rgba(184,115,51,.16)}
.sb-go{flex:none; font:inherit; font-weight:600; color:#fff; background:var(--teal-btn); border:1px solid var(--teal-btn);
  border-radius:var(--r); padding:.7em 1.15em; cursor:pointer; transition:background .2s ease}
.sb-go:hover{background:var(--teal-deep)}
.sb-go:focus-visible{outline:2.5px solid var(--copper); outline-offset:2px}
.sb-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.sb-tokens{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 20px; font-family:var(--mono)}
.sb-tok-lead{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:2px}
.sb-tok{display:inline-flex; align-items:baseline; gap:.3em; font-size:.82rem; padding:.26em .5em; border-radius:5px; border:1px solid var(--line-2)}
.sb-tok i{font-style:normal; font-size:.82em; opacity:.72}
.sb-tok i::before{content:"→\00a0"}
.sb-tok.stop{color:var(--muted); text-decoration:line-through; opacity:.6; border-style:dashed}
.sb-tok.known{color:var(--teal-deep); border-color:var(--verdigris); background:rgba(73,160,120,.09)}
.sb-tok.unknown{color:var(--copper-ink); border-color:var(--line-warm); background:rgba(184,115,51,.06)}
.sb-tok-note{font-size:.74rem; color:var(--muted); margin-left:4px}
.sb-tok-note b{color:var(--copper-ink)}
.sb-panel{margin:0 0 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--limestone); overflow:hidden}
.sb-panel>summary{cursor:pointer; list-style:none; padding:12px 16px; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); user-select:none}
.sb-panel>summary::-webkit-details-marker{display:none}
.sb-panel>summary::after{content:"▸"; float:right; transition:transform .2s ease}
.sb-panel[open]>summary::after{transform:rotate(90deg)}
.sb-controls{display:grid; grid-template-columns:repeat(3,1fr); gap:15px 22px; padding:4px 16px 18px}
.sb-ctl label{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color:var(--ash)}
.sb-val{font-family:var(--mono); font-size:.82rem; color:var(--copper-ink); font-weight:400}
.sb-ctl input[type=range]{width:100%; accent-color:var(--copper); margin:.5em 0 .2em}
.sb-hint{font-size:.76rem; line-height:1.35; color:var(--muted); margin:.1em 0 0}
.sb-switch{cursor:pointer}
.sb-switch input{accent-color:var(--teal-btn); width:1.1em; height:1.1em; vertical-align:-2px; margin-right:.2em}
.sb-seg{display:none; gap:6px; margin-bottom:14px; background:var(--limestone-3); border-radius:8px; padding:4px}
.sb-seg button{flex:1; font:inherit; font-size:.84rem; font-weight:600; color:var(--muted); background:none; border:0; border-radius:6px; padding:.5em .2em; cursor:pointer}
.sb-seg button[aria-selected=true]{background:var(--limestone); color:var(--copper-ink); box-shadow:var(--shadow)}
.sb-seg button:focus-visible{outline:2.5px solid var(--copper); outline-offset:2px}
.sb-lanes{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.sb-lane{min-width:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--limestone); padding:12px 12px 14px}
.sb-lane-h{display:flex; flex-direction:column; gap:1px; margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--line)}
.sb-lane-h b{font-size:.92rem; color:var(--ash)}
.sb-lane-h span{font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.sb-lane-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.sb-card{position:relative; display:grid; grid-template-columns:auto auto 1fr; align-items:start; gap:7px;
  padding:8px 9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--limestone-2); overflow:hidden}
.sb-rank{font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--copper-ink); min-width:1.1em}
.sb-emoji{font-size:.95rem; line-height:1.2}
.sb-cardb{min-width:0; display:flex; flex-direction:column; gap:1px}
.sb-src{font-size:.8rem; font-weight:600; color:var(--ash); line-height:1.25}
.sb-snip{font-size:.72rem; color:var(--muted); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.sb-bar{position:absolute; left:0; bottom:0; height:3px; background:var(--copper); opacity:.7; border-radius:0 2px 2px 0; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sb-empty{font-size:.8rem; color:var(--muted); padding:8px 4px; font-style:italic}
.sb-note{font-size:.78rem; line-height:1.5; color:var(--muted); margin:16px 0 0; max-width:76ch}
.sb-caption{margin-top:10px; font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.sb-caption a{color:var(--copper-ink); text-decoration:underline; text-underline-offset:2px}
@media (max-width:900px){ .sb-controls{grid-template-columns:1fr 1fr} }
@media (max-width:720px){
  .sb-seg{display:flex}
  .sb-lanes{grid-template-columns:1fr; gap:10px}
  .sb-lane[data-off]{display:none}
  .sb-controls{grid-template-columns:1fr; gap:14px}
}
.atlas-head{max-width:66ch}
.atlas-head h2{font-size:clamp(2rem,3.6vw+1rem,3.5rem); letter-spacing:-.01em}
.atlas-lede{margin-top:1.1rem; max-width:62ch; font-size:1.08rem; color:var(--ash-soft)}
.atlas-lede em{font-style:italic; color:var(--copper-ink)}
.atlas-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:clamp(22px,3.4vw,38px) 0 16px}
.atlas-ask{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.atlas-chips{display:flex; flex-wrap:wrap; gap:8px}
.atlas-chip{font-family:var(--body); font-size:.92rem; color:var(--ash); background:var(--limestone-2);
  border:1px solid var(--line-warm); border-radius:999px; padding:.5em 1em; cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
.atlas-chip:hover{border-color:var(--copper); color:var(--copper-ink)}
.atlas-chip:active{transform:translateY(1px)}
.atlas-chip[aria-pressed=true]{background:var(--teal-btn); border-color:var(--teal-btn); color:#fff}
.atlas-chip:focus-visible{outline:2.5px solid var(--copper); outline-offset:3px}

.atlas-stage{position:relative; aspect-ratio:920/520; background:var(--teal-deep);
  border:1px solid var(--teal-deeper); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.atlas-stage::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 92% at 50% 44%, transparent 52%, rgba(18,26,18,.5) 100%)}
.atlas-map{position:absolute; inset:0; width:100%; height:100%; display:block}
.atlas-link{stroke:var(--on-teal); stroke-width:1; opacity:.1}
.atlas-node{fill:var(--c,var(--on-teal-muted)); opacity:.5; r:5; transition:opacity .3s ease, fill .3s ease, r .3s ease}
.atlas-node.on{fill:var(--accent-teal); opacity:1; r:6.5}
.atlas-node.src{fill:var(--copper); opacity:1; r:8; stroke:var(--accent-teal); stroke-width:1.5}
.atlas-clabel{fill:var(--on-teal); font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; text-anchor:middle; dominant-baseline:central; transition:fill .35s ease}
.atlas-clabel-bg{fill:rgba(14,22,17,.64); stroke:rgba(244,241,234,.14); stroke-width:1; transition:fill .35s ease, stroke .35s ease}
.atlas-clabel-g{transition:opacity .35s ease}
.atlas-clabel-g.glow .atlas-clabel{fill:var(--accent-teal)}
.atlas-clabel-g.glow .atlas-clabel-bg{fill:rgba(46,68,56,.76); stroke:var(--accent-teal); stroke-width:1.4}
@media (prefers-reduced-motion:no-preference){ .atlas-clabel-g.glow{animation:clabelGlow 2.4s ease-in-out infinite} }
@keyframes clabelGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(227,168,106,.4))} 50%{filter:drop-shadow(0 0 9px rgba(227,168,106,.95))}}
/* matched cluster's label glows blue instead of amber */
.atlas-clabel-g.matched.glow .atlas-clabel{fill:var(--atlas-blue-lt)}
.atlas-clabel-g.matched.glow .atlas-clabel-bg{fill:rgba(30,52,86,.80); stroke:var(--atlas-blue)}
@media (prefers-reduced-motion:no-preference){ .atlas-clabel-g.matched.glow{animation:clabelGlowBlue 2.4s ease-in-out infinite} }
@keyframes clabelGlowBlue{0%,100%{filter:drop-shadow(0 0 2px rgba(79,138,214,.4))} 50%{filter:drop-shadow(0 0 9px rgba(79,138,214,.95))}}
.atlas-beam{stroke:var(--accent-teal); stroke-width:1.4; opacity:0; transition:opacity .3s ease}
.atlas-beam.show{opacity:.55}
.atlas-query{fill:var(--copper); stroke:var(--limestone); stroke-width:1.5}
.atlas-pulse{fill:none; stroke:var(--accent-teal); stroke-width:2; opacity:0}
@media (prefers-reduced-motion:no-preference){ .atlas-pulse{animation:atlasPulse 1.5s ease-out forwards} }
@keyframes atlasPulse{ 0%{r:6; opacity:.6} 100%{r:130; opacity:0} }
.atlas-readout{margin-top:16px; max-width:680px; background:var(--limestone); border:1px solid var(--line-warm);
  border-radius:8px; box-shadow:var(--shadow); padding:1.05em 1.25em}
.atlas-readout:not(.show){display:none}
.atlas-readout .atlas-q{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; color:var(--copper-ink); margin:0 0 .35em}
.atlas-readout .atlas-a{color:var(--ash); font-size:.94rem; line-height:1.45; margin:0}
.atlas-readout .cite{font-family:var(--mono); font-size:.7em; color:var(--copper); border-bottom:2px solid var(--copper); margin-left:2px; vertical-align:.08em}
.atlas-hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-teal-muted);
  pointer-events:none; padding:0 20px; transition:opacity .4s ease}
.atlas-stage.ran .atlas-hint{opacity:0}
.atlas-pipeline{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.atlas-pipeline li{position:relative; border:1px solid var(--line); border-radius:8px; padding:13px 15px;
  background:var(--limestone-2); transition:border-color .25s ease, background .25s ease}
.atlas-pipeline li b{display:block; font-size:.88rem; color:var(--ash)}
.atlas-pipeline li span{font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.atlas-pipeline li.on{border-color:var(--copper); background:var(--limestone)}
.atlas-pipeline li.on b{color:var(--copper-ink)}
.atlas-pipeline li.current{border-color:var(--copper); background:var(--limestone)}
.atlas-pipeline li.current b{color:var(--copper-ink)}
@media (prefers-reduced-motion:no-preference){ .atlas-pipeline li.current{animation:pipeGlow 2s ease-in-out infinite} }
@keyframes pipeGlow{0%,100%{box-shadow:0 2px 8px -6px rgba(184,115,51,.4)} 50%{box-shadow:0 0 0 1px var(--copper), 0 8px 22px -6px rgba(184,115,51,.72)}}
.atlas-pipeline li::after{content:"→"; position:absolute; right:-8px; top:50%; transform:translateY(-50%); color:var(--tarnished); z-index:1}
.atlas-pipeline li:last-child::after{display:none}
@media (max-width:760px){ .atlas-pipeline{grid-template-columns:1fr 1fr} .atlas-pipeline li::after{display:none} .atlas-pipeline li:last-child{grid-column:1 / -1} }
@media (max-width:460px){ .atlas-pipeline{grid-template-columns:1fr} }
.atlas-caption{margin-top:24px; font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:var(--muted); max-width:70ch}
.atlas-caption b{color:var(--tarnished)}
.atlas-pipe-desc{max-width:72ch; font-size:1.12rem; line-height:1.5; color:var(--ash);
  max-height:0; opacity:0; overflow:hidden; margin:0;
  transition:max-height .4s ease, opacity .35s ease, margin .4s ease}
.atlas-pipe-desc.show{max-height:7em; opacity:1; margin:22px 0 18px}
.atlas-pipe-desc b{color:var(--copper-ink); font-weight:700}
/* atlas animations — bloom rings, comet streams, MODEL node, twinkle, orb */
.atlas-bloom{fill:none; stroke:var(--accent-teal); stroke-width:2; opacity:0}
.atlas-stream{fill:none; stroke:var(--on-teal); stroke-width:1; opacity:0; transition:opacity .5s ease}
.atlas-stream.show{opacity:.16}
.atlas-comet{fill:none; stroke:var(--accent-teal); stroke-width:2.5; stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(227,168,106,.55))}
/* MODEL rendered as a vintage terminal the user speaks to */
.atlas-term-glow{fill:var(--accent-teal); opacity:0; filter:blur(9px); transition:opacity .55s ease}
.atlas-term.active .atlas-term-glow{opacity:.30}
.term-foot{fill:#8B7B5F; stroke:#57492f; stroke-width:1.5}
.term-neck{fill:#9C8B6B; stroke:#57492f; stroke-width:1.5}
.term-body{fill:#BCAB86; stroke:#57492f; stroke-width:2}
.term-inner{fill:#A6956F}
.term-screen{fill:#0C1712; stroke:#33493C; stroke-width:2; transition:stroke .4s ease, filter .4s ease}
.atlas-term.active .term-screen{stroke:var(--accent-teal); filter:drop-shadow(0 0 6px rgba(227,168,106,.5))}
.term-vent{stroke:#57492f; stroke-width:1.6; opacity:.4; stroke-linecap:round}
.term-led{fill:#5C7D73; transition:fill .35s ease}
.atlas-term.active .term-led{fill:var(--verdigris-lt)}
.term-brand{fill:#57492f; font-family:var(--mono); font-size:6px; letter-spacing:.22em; text-anchor:middle; opacity:.85}
.term-scr{font-family:var(--mono); color:var(--accent-teal); font-size:9px; line-height:1.34;
  height:100%; box-sizing:border-box; padding:5px 8px; display:flex; flex-direction:column; gap:2px;
  text-shadow:0 0 4px rgba(227,168,106,.5); position:relative; overflow:hidden}
.term-scr::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px)}
.term-scr .scr-head{opacity:.5; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.term-scr .scr-body{flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:1px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.term-scr .scr-body .r{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.term-scr .scr-body .dim{opacity:.6}
.term-scr .scr-body .ans{white-space:normal; opacity:.96}
.term-scr .cur{opacity:0}
@media (prefers-reduced-motion:no-preference){ .atlas-term.active .term-scr .cur{animation:termBlink 1.05s step-end infinite} }

/* the person (YOU), top-centre and larger, speaking to the terminal */
.atlas-you-glow{fill:var(--accent-teal); opacity:0}
.atlas-you-ring{fill:var(--teal-btn); stroke:var(--accent-teal); stroke-width:2.5; opacity:.9;
  transition:opacity .35s ease, stroke .35s ease}
.atlas-you-person{fill:var(--on-teal); opacity:.94}
.atlas-you-label{fill:var(--on-teal-muted); font-family:var(--mono); font-size:9px; letter-spacing:.15em;
  text-anchor:middle; transition:fill .35s ease}
.atlas-you.active .atlas-you-ring{opacity:1}
.atlas-you.active .atlas-you-label{fill:var(--on-teal)}
.atlas-you.recv .atlas-you-ring{stroke:#f0b886}
@media (prefers-reduced-motion:no-preference){ .atlas-you.recv .atlas-you-glow{animation:atlasModelGlow 1.4s ease-out} }
.atlas-you{cursor:pointer}
.atlas-you-nudge{position:absolute; left:50%; top:11.2%; transform:translate(34px,-50%);
  opacity:0; pointer-events:none; white-space:nowrap; z-index:3; text-decoration:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.02em;
  background:var(--limestone); color:var(--copper-ink); border:1px solid var(--copper);
  border-radius:999px; padding:.34em .72em; box-shadow:var(--shadow);
  transition:opacity .3s ease, transform .3s ease}
.atlas-you-nudge.show{opacity:1; transform:translate(38px,-50%); pointer-events:auto}
.atlas-you-nudge:hover{background:var(--copper-hover); color:#fff}
.atlas-you-nudge:focus-visible{outline:2.5px solid var(--copper); outline-offset:2px; opacity:1}
@media (max-width:760px){ .atlas-you-nudge{display:none} }
/* Mobile: a legible copy of the terminal screen — the in-SVG one is too small to read once the map is scaled to phone width */
.atlas-mscreen{display:none; margin-top:16px; border-radius:12px; padding:12px 14px 14px;
  background:#0C1712; border:1.5px solid var(--accent-teal); position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 0 15px -3px rgba(227,168,106,.30), 0 12px 28px -16px rgba(0,0,0,.6)}
.atlas-mscreen::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:12px;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.14) 2px 3px)}
.atlas-mscreen .ms-head{font-family:var(--mono); color:var(--accent-teal); opacity:.5; font-size:11.5px; letter-spacing:.06em; margin-bottom:7px}
.atlas-mscreen .ms-body{font-family:var(--mono); color:var(--accent-teal); font-size:13.5px; line-height:1.5;
  display:flex; flex-direction:column; gap:3px; min-height:3em}
.atlas-mscreen .ms-body .r{white-space:normal; word-break:break-word}
.atlas-mscreen .ms-body .dim{opacity:.62}
.atlas-mscreen .ms-body .ans{opacity:.98}
.atlas-mscreen .cur{opacity:.9}
@media (prefers-reduced-motion:no-preference){ .atlas-mscreen .cur{animation:termBlink 1.05s step-end infinite} }

/* Terminal + mobile screen as a chat: You (cool mint) vs AI (warm amber), each with an avatar */
.term-scr .r.chat, .atlas-mscreen .r.chat{display:flex; gap:.5em; align-items:flex-start;
  white-space:normal; overflow:visible; text-overflow:clip; margin:.16em 0}
.chat-av{flex:0 0 auto; width:1.75em; height:1.75em; border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; margin-top:.02em}
.chat-av img{width:100%; height:100%; object-fit:cover; display:block}
.chat-av.you{box-shadow:0 0 0 1.5px rgba(143,211,176,.8)}
.chat-av.ai{background:radial-gradient(circle at 50% 38%, #6d4c2b, #241708);
  box-shadow:0 0 0 1.5px rgba(227,168,106,.85); font-size:.92em}
.chat-b{flex:1 1 auto; min-width:0; white-space:normal; word-break:break-word}
.chat-name{font-weight:700; letter-spacing:.02em}
.r.chat.you{color:#9FD9BE}
.r.chat.you .chat-name{color:#C9EEDC}
.r.chat.ai{color:var(--accent-teal)}
.r.chat.ai .chat-name{color:#F3C68F}
.term-scr .r.sys, .atlas-mscreen .r.sys{opacity:.5}

/* Atlas legibility on small screens — the SVG scales to fit width, so scale key elements up */
@media (max-width:640px){
  .atlas-clabel{font-size:19px; letter-spacing:.05em}
  .atlas-node{r:6.5}
  .atlas-node.on{r:8}
  .atlas-node.src{r:10.5}
  .atlas-link{opacity:.2; stroke-width:1.3}
  .bub-txt{font-size:14px; line-height:1.28}
  .term-scr{font-size:11.5px; line-height:1.32; padding:6px 9px}
  .atlas-you-label{font-size:11px}
  .term-brand{font-size:8px}
  .atlas-mscreen{display:block; margin-top:10px}     /* show the legible terminal transcript */
  .atlas-readout{display:none}      /* the mscreen carries the prompt + answer instead */
  .atlas-pipe-desc.show{margin:12px 0 10px}          /* step summary sits just above the terminal */
}
/* Atlas playback controls */
.atlas-player{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:10px}
.ap-btn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
  border:1px solid var(--line-warm); border-radius:50%; background:var(--limestone); color:var(--copper-ink);
  cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .08s ease}
.ap-btn svg{width:18px; height:18px; fill:currentColor}
.ap-btn:hover{border-color:var(--copper); color:var(--copper)}
.ap-btn:active{transform:translateY(1px)}
.ap-btn:disabled{opacity:.4; cursor:default; border-color:var(--line); color:var(--muted)}
.ap-btn:focus-visible{outline:2.5px solid var(--copper); outline-offset:2px}
.ap-primary{width:40px; height:40px; background:var(--teal-btn); border-color:var(--teal-btn); color:#fff}
.ap-primary:hover{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff}
.ap-primary svg{width:20px; height:20px}
.ap-ic-pause{display:none}
.atlas-player.is-playing .ap-ic-play{display:none}
.atlas-player.is-playing .ap-ic-pause{display:inline}
.ap-phase{margin-left:8px; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); min-width:10ch}
@media (max-width:520px){ .ap-phase{display:none} }
@media (max-width:640px){   /* tighter playback controls on phones (placed after the base rules so it wins) */
  .atlas-player{margin-top:6px; gap:7px}
  .ap-btn{width:32px; height:32px}
  .ap-primary{width:36px; height:36px}
  .ap-btn svg{width:16px; height:16px}
  .ap-primary svg{width:18px; height:18px}
}

/* the spoken query, as a chat bubble aimed at the terminal */
.atlas-bubble{opacity:0; transform:translateY(6px); transition:opacity .38s ease, transform .38s cubic-bezier(.2,.8,.2,1)}
.atlas-bubble.show{opacity:1; transform:none}
.bub-body,.bub-tail{fill:var(--limestone); stroke:var(--copper); stroke-width:1.5}
.bub-txt{font-family:var(--mono); font-size:11px; line-height:1.3; color:var(--copper-ink); text-align:center;
  height:100%; display:flex; align-items:center; justify-content:center}

/* clusters glow as the query reaches into them */
.atlas-cluster-glow{fill:var(--cg,var(--accent-teal)); opacity:0; filter:blur(11px)}
.atlas-cluster-glow.steady{opacity:.24}
.atlas-cluster-glow.steady.strong{opacity:.34}
.atlas-cluster-glow.matched{--cg:var(--atlas-blue)}   /* the cluster the query matches glows blue */
@media (prefers-reduced-motion:no-preference){
  .atlas-cluster-glow.lit{animation:atlasClusterGlow .95s ease-out}
  .atlas-cluster-glow.strong.lit{animation:atlasClusterGlowStrong 1.6s ease-out}
}
.atlas-answer{fill:none; stroke:var(--copper); stroke-width:3; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(184,115,51,.7))}
/* glowing beam that draws toward a target then fades — no idle lines */
.atlas-beam2{fill:none; stroke:var(--accent-teal); stroke-width:2.6; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(227,168,106,.85))}
@keyframes atlasBeam{0%{stroke-dashoffset:var(--l); opacity:0} 18%{opacity:1} 55%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}
/* contained pulse ring at the terminal as it sends / receives */
.atlas-ping{fill:none; stroke:var(--accent-teal); stroke-width:2; opacity:0}
@keyframes atlasPing{0%{r:14; opacity:.55} 100%{r:72; opacity:0}}
@media (prefers-reduced-motion:no-preference){ .atlas-ping{animation:atlasPing 1s ease-out forwards} }
/* the bubble and terminal come alive with light */
@keyframes bubGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(184,115,51,.28))} 50%{filter:drop-shadow(0 0 8px rgba(184,115,51,.72))}}
@keyframes termGlowPulse{0%,100%{opacity:.12} 50%{opacity:.34}}
@media (prefers-reduced-motion:no-preference){
  .atlas-bubble.show .bub-body{animation:bubGlow 2.4s ease-in-out infinite}
  .atlas-term.active .atlas-term-glow{animation:termGlowPulse 2.6s ease-in-out infinite}
}
.atlas-pipeline li .orb{position:absolute; top:11px; right:11px; width:8px; height:8px; border-radius:50%; background:var(--tarnished)}
.atlas-pipeline li.on .orb{background:var(--copper)}
@media (prefers-reduced-motion:no-preference){
  html.js .atlas-node{animation:atlasTwinkle 4.6s ease-in-out infinite}
  html.js .atlas-node.on, html.js .atlas-node.src{animation:none}
  .atlas-model.active .atlas-model-glow{animation:atlasModelGlow 1.7s ease-out 1s}
  .atlas-pipeline li[data-step="4"].on .orb{animation:atlasOrbPulse 1.9s ease-in-out infinite}
}
@keyframes atlasTwinkle{0%,100%{opacity:.42}50%{opacity:.62}}
@keyframes atlasBloom{0%{opacity:.55; r:6}100%{opacity:0; r:34}}
@keyframes atlasComet{to{stroke-dashoffset:0}}
@keyframes atlasModelGlow{0%{opacity:0; r:16}45%{opacity:.4; r:40}100%{opacity:0; r:62}}
@keyframes atlasOrbPulse{0%,100%{box-shadow:0 0 0 0 rgba(184,115,51,.5)}50%{box-shadow:0 0 0 10px rgba(184,115,51,0)}}
@keyframes atlasClusterGlow{0%{opacity:0}35%{opacity:.24}100%{opacity:0}}
@keyframes atlasClusterGlowStrong{0%{opacity:0}22%{opacity:.36}68%{opacity:.20}100%{opacity:0}}
@keyframes termBlink{0%,49%{opacity:.9}50%,100%{opacity:0}}

/* ============================ reveal (no-JS safe) ============================ */
/* ===== Prompt Lab preview (static teaser → full page at /lab.html) ===== */
.labprev{background:var(--limestone-2); border-block:1px solid var(--line)}
.lp-head{max-width:70ch}
.lp-lede{font-size:clamp(1rem,.5vw+.9rem,1.18rem); line-height:1.55; color:var(--ash-soft); margin:.6rem 0 0}
.lp-demo{display:block; position:relative; margin:clamp(22px,3vw,34px) 0 0; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--limestone); box-shadow:var(--shadow);
  padding:clamp(16px,2.4vw,26px); overflow:hidden; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease}
.lp-demo:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--copper)}
.lp-demo:focus-visible{outline:2.5px solid var(--copper); outline-offset:3px}
.lp-ask{display:flex; gap:10px; max-width:560px}
.lp-input{flex:1 1 auto; min-width:0; display:flex; align-items:center; font-size:.98rem; color:var(--ash);
  background:var(--limestone-2); border:1.5px solid var(--copper); border-radius:8px; padding:.62em .85em;
  box-shadow:0 0 0 3px rgba(184,115,51,.14)}
.lp-caret{display:inline-block; width:2px; height:1.05em; margin-left:1px; background:var(--copper)}
@media (prefers-reduced-motion:no-preference){ .lp-caret{animation:lpblink 1.1s step-end infinite} }
@keyframes lpblink{50%{opacity:0}}
.lp-go{flex:none; font-weight:600; color:#fff; background:var(--teal-btn); border-radius:8px; padding:.62em 1.1em}
.lp-chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.lp-chip{font-family:var(--mono); font-size:.76rem; color:var(--ash-soft); background:var(--limestone-2);
  border:1px solid var(--line); border-radius:999px; padding:.4em .8em}
.lp-knobs{display:flex; flex-wrap:wrap; gap:10px 20px; margin:16px 0 2px}
.lp-knob{display:inline-flex; align-items:center; gap:9px; font-size:.78rem; font-weight:600; color:var(--ash-soft)}
.lp-track{position:relative; display:inline-block; width:88px; height:5px; border-radius:3px; background:var(--line-2)}
.lp-track::before{content:""; position:absolute; left:0; top:0; bottom:0; width:60%; background:var(--copper); opacity:.55; border-radius:3px}
.lp-track::after{content:""; position:absolute; left:60%; top:50%; width:13px; height:13px; border-radius:50%; background:var(--copper); border:2px solid var(--limestone); transform:translate(-50%,-50%); box-shadow:0 1px 2px rgba(44,44,44,.2)}
.lp-toggle{position:relative; display:inline-block; width:30px; height:16px; border-radius:999px; background:var(--teal-btn)}
.lp-toggle::after{content:""; position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:#fff}
.lp-lane{margin:16px 0 0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--limestone-2); padding:12px 12px 14px; max-width:640px}
.lp-lane-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--line)}
.lp-lane-h b{font-size:.92rem; color:var(--ash)}
.lp-lane-h span{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.lp-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.lp-card{position:relative; display:grid; grid-template-columns:auto auto 1fr; align-items:start; gap:9px;
  background:var(--limestone); border:1px solid var(--line); border-radius:7px; padding:9px 12px 12px; overflow:hidden}
.lp-rank{font-family:var(--mono); font-size:.74rem; font-weight:600; color:var(--copper-ink); min-width:1.1em}
.lp-emoji{font-size:1rem; line-height:1.2}
.lp-cardb{min-width:0; display:flex; flex-direction:column; gap:2px}
.lp-src{font-size:.82rem; font-weight:600; color:var(--ash)}
.lp-snip{font-size:.74rem; color:var(--muted); line-height:1.4}
.lp-bar{position:absolute; left:0; bottom:0; height:3px; background:var(--copper); opacity:.7; border-radius:0 2px 2px 0}
.lp-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0;
  background:rgba(244,241,234,.5); transition:opacity .25s ease; pointer-events:none}
.lp-demo:hover .lp-overlay, .lp-demo:focus-visible .lp-overlay{opacity:1}
.lp-play{font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:var(--teal-btn); border-radius:999px; padding:.6em 1.2em; box-shadow:var(--shadow)}
.lp-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin:clamp(20px,2.6vw,28px) 0 0}
.lp-meta{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .lp-demo{transition:none} .lp-demo:hover{transform:none} }
@media (max-width:560px){ .lp-go{display:none} }

/* ===== Prompt Tracer preview (landing) — static teaser that links to /tracer.html ===== */
.tp-demo{display:block; text-decoration:none; color:inherit; margin:clamp(22px,3vw,34px) 0 0;
  border-radius:var(--r-lg); transition:transform .25s ease}
.tp-demo:hover{transform:translateY(-3px)}
.tp-demo:focus-visible{outline:2.5px solid var(--copper); outline-offset:4px; border-radius:var(--r-lg)}
.tp-demo .atlas-stage{cursor:pointer; transition:box-shadow .25s ease, border-color .25s ease}
.tp-demo:hover .atlas-stage, .tp-demo:focus-visible .atlas-stage{box-shadow:var(--shadow-lg); border-color:var(--copper)}
.tp-frame .lp-overlay{z-index:2}
.tp-demo:hover .lp-overlay, .tp-demo:focus-visible .lp-overlay{opacity:1}
/* static "reach" beams in the frozen scene */
.tp-beam{fill:none; stroke:var(--accent-teal); stroke-width:2; opacity:.6; stroke-linecap:round;
  stroke-dasharray:3 7; filter:drop-shadow(0 0 4px rgba(227,168,106,.55))}
.tp-pipe{margin-top:clamp(16px,2.4vw,22px)}
@media (prefers-reduced-motion:reduce){ .tp-demo{transition:none} .tp-demo:hover{transform:none} }

.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  html.js .reveal.in{opacity:1; transform:none}
  html.js .stagger>*{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  html.js .stagger.in>*{opacity:1; transform:none}
  html.js .stagger.in>*:nth-child(2){transition-delay:.07s}
  html.js .stagger.in>*:nth-child(3){transition-delay:.14s}
  html.js .stagger.in>*:nth-child(4){transition-delay:.21s}

  .drip{animation:drip 3.2s ease-in infinite}
  .vapor{animation:vapor 4.5s ease-in-out infinite}
  .vapor.v2{animation-delay:1.1s}
  .vapor.v3{animation-delay:2.2s}
  .heat{animation:heat 2.4s ease-in-out infinite}
}
@keyframes drip{
  0%{opacity:0; transform:translateY(-2px)} 25%{opacity:1}
  72%{opacity:1; transform:translateY(13px)} 80%{opacity:0; transform:translateY(14px)} 100%{opacity:0; transform:translateY(0)}
}
@keyframes vapor{
  0%{opacity:0; transform:translateY(6px) scaleX(1)} 35%{opacity:.7} 100%{opacity:0; transform:translateY(-26px) scaleX(1.12)}
}
@keyframes heat{ 0%,100%{opacity:.4} 50%{opacity:.9} }