/* ==========================================================================
   Klaeri — editorial theme
   Magazine, modern, sleek. Paper ground, never the black cover.

   The signature is the BUBBLE: text lives inside soft rounded containers
   rather than running loose down the page. That is what breaks the wall of
   text, and it is why radii here are large and deliberate — do not flatten
   them to a generic 8px card.

   Palette is the original site's, kept so the logo belongs to the page:
   forest #27332C · blush #F4DCE1 · pink #D2718E
   ========================================================================== */

:root{
  /* --- ground --- */
  --paper:      #FDF6F6;   /* the page */
  --paper-warm: #FAEDEE;   /* alternating band */
  --paper-pink: #F6E3E6;   /* blush block */
  --bubble:     #FFFFFF;   /* bubble fill */

  /* --- ink --- */
  --forest:     #27332C;   /* display type, the mark */
  --ink:        #33222A;   /* body */
  --ink-soft:   #6B565D;   /* secondary */
  --ink-faint:  #7D6970;   /* was #9C8890 — 3.07:1, failed WCAG AA */   /* captions, meta */

  /* --- signal --- */
  --pink:       #D2718E;
  --pink-deep:  #A84566;   /* pink on light, for contrast-safe text */
  --pink-wash:  #FCEEF1;

  --sage:       #7D9080;   /* mid-tone green — borders and marks only, never text */
  --hair:       rgba(125,144,128,.26);
  --hair-pink:  rgba(181,77,110,.24);

  /* on-forest text ramp — was 7 loose hexes across the file */
  --on-dark:      #FBF3F1;
  --on-dark-soft: #E9DFDB;
  --on-dark-dim:  #C4B5B1;
  --on-dark-mute: #8FA394;
  --pink-soft:    #E79BB2;   /* pink that survives a dark ground */

  /* interactive pink — darker than --pink because white sits on it (4.94:1) */
  --pink-btn:      #B54D6E;
  --pink-btn-hover:#93375A;

  /* ONE radius scale. Was eight values; a card is now always --r-md. */
  --r-sm:   14px;   /* inputs, small chips */
  --r-md:   20px;   /* every card and surface */
  --r-lg:   28px;   /* hero-weight panels only */
  --hair-pink:  rgba(210,113,142,.28);

  --ff-display: Didot,"Bodoni MT","Didot LT STD",Georgia,"Times New Roman",serif;
  --ff-body:    ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --ff-mono:    "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw: 1180px;
  --pad:  clamp(1.1rem,4vw,2.4rem);
  --r-bubble: var(--r-md);   /* alias — use --r-md */
  --r-pill:   999px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* Never let a layout class reset .wrap's measure or side padding —
   that collision took 25 pages full-bleed once already. Vertical only. */
.section{padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.band-warm{background:var(--paper-warm)}
.band-pink{background:var(--paper-pink)}

.mono{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.kick{color:var(--ink-faint);margin:0 0 1rem}

h1,h2,h3{font-family:var(--ff-display);font-weight:400;color:var(--forest);
  margin:0;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:1.02}
h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.08}
h3{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.2}
em{font-style:italic;color:var(--pink-deep)}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ NAV */
.topbar{position:sticky;top:0;z-index:50;background:rgba(251,245,242,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--hair)}
.topbar .wrap{display:flex;align-items:center;gap:1.6rem;
  padding-top:1rem;padding-bottom:1rem}
.brandmark{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:0 0 auto}
.brandmark img{width:38px;height:38px}   /* was 30 — the K was illegible */
.brandmark span{font-family:var(--ff-display);font-size:1.55rem;color:var(--forest);
  letter-spacing:.005em;line-height:1}

/* BETA, said out loud. Klaeri+ is not purchasable, citations are not built and
   the catalogue is 1,000 products — a visitor is entitled to know that before
   they judge what is missing. Sits with the wordmark because it qualifies the
   product, not the navigation. */
.beta-tag{flex:0 0 auto;align-self:center;margin-left:.5rem;text-decoration:none;
  font-family:var(--ff-mono);font-size:.53rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pink-deep);background:var(--pink-wash);
  border:1px solid var(--pink);border-radius:var(--r-pill);padding:.24rem .5rem;
  line-height:1;transition:background .16s,color .16s}
.beta-tag:hover,.beta-tag:focus-visible{background:var(--pink);color:#fff}

/* Feedback. In a beta the cheapest thing you can buy is a reason someone left,
   so it stays visible rather than living in a footer nobody reaches. */
.feedback-fab{position:fixed;right:1rem;bottom:1rem;z-index:60;
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest);
  background:var(--paper);border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:.62rem .9rem;
  box-shadow:0 8px 22px -12px rgba(39,51,44,.4);
  transition:border-color .16s,color .16s,transform .16s}
.feedback-fab:hover,.feedback-fab:focus-visible{
  border-color:var(--pink);color:var(--pink-deep);transform:translateY(-1px)}
@media(max-width:640px){.feedback-fab{right:.7rem;bottom:.7rem;font-size:.54rem}}
@media(prefers-reduced-motion:reduce){.feedback-fab{transition:none}
  .feedback-fab:hover{transform:none}}

.nav{display:flex;gap:.15rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{
  font-size:.9rem;text-decoration:none;color:var(--ink);
  padding:.5rem .8rem;border-radius:var(--r-pill);
  /* transparent border so the outlined "Create account" below is the same
     height as its neighbours instead of sitting 1px proud of the row */
  border:1px solid transparent;
  transition:background .16s,color .16s,border-color .16s;
}
/* the original's hover highlight, kept — it is what the top bar is for */
.nav a:hover,.nav a:focus-visible{background:var(--pink-wash);color:var(--pink-deep)}
.nav a[aria-current]{background:var(--pink-wash);color:var(--pink-deep);font-weight:600}

/* Create account. The magazine rebuild dropped this from the nav — the old site
   had it — so the only route to signup.html was via Sign in and a footnote at the
   bottom of that page. On an account-based product that is a hole in the funnel.
   Outlined rather than filled: "Add to Chrome" stays the one primary action. */
.nav a.navjoin{border:1px solid var(--pink);color:var(--pink-deep);font-weight:600}
.nav a.navjoin:hover,.nav a.navjoin:focus-visible{background:var(--pink-wash)}

/* --------------------------------------------------- NAV, SMALL SCREENS */
/* This file is mobile-first (min-width only), but the nav never got a
   small-screen case: six links plus the CTA wrapped to three rows and ate
   157px of an 812px viewport on every page. Collapsed to a disclosure below
   980px.

   980 rather than the 900 used elsewhere in this file, and that is
   deliberate: the row needs ~863px (brandmark 115 + links 500 + CTA 140 +
   gaps), and at a 900px viewport --pad leaves only 828px, so the nav wrapped
   to two rows at exactly the width that was supposed to fix it. 980 leaves
   about 40px of headroom for font-rendering differences.

   The Chrome CTA stays outside the menu: it is the conversion action, not
   navigation, and burying it costs installs. */
.topbar .wrap{position:relative}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;order:3;
  /* flex:0 0 auto or the row squeezes this to 23px — under the 44px tap
     target minimum, and it shrank silently because a button has no
     intrinsic min-width to defend itself. */
  margin-left:auto;flex:0 0 auto;width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--hair);border-radius:var(--r-sm);
  color:var(--forest);cursor:pointer;transition:border-color .16s,background .16s;
}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--pink);background:var(--pink-wash)}
.nav-toggle b{position:relative;display:block;width:18px;height:1.5px;
  background:currentColor;border-radius:2px;transition:background .2s}
.nav-toggle b::before,.nav-toggle b::after{content:"";position:absolute;left:0;
  width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .2s}
.nav-toggle b::before{top:-6px}
.nav-toggle b::after{top:6px}
.nav-toggle[aria-expanded="true"] b{background:transparent}
.nav-toggle[aria-expanded="true"] b::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] b::after{transform:translateY(-6px) rotate(-45deg)}

/* The CTA sits in the bar on every width. Only index.html actually has one
   — the other 11 pages carry no Chrome CTA in the header at all, which is
   its own problem — so the toggle needs margin-left:auto to push right on
   its own. This sibling rule cancels the double push when both are present. */
.navcta{order:2;margin-left:auto;flex:0 0 auto}
.navcta ~ .nav-toggle{margin-left:.6rem}

/* At 375 the row wants 350px (brandmark 115 + CTA 140 + button 44 + two
   25.6 gaps) but the padded wrap only offers 340, so the button pushed past
   the padding and sat flush against the screen edge. Tighten the gap and the
   CTA until there is room, and hand both back once there is width for them.
   a.navcta, not .navcta — .btn is declared after this block and would
   otherwise win the padding and font-size. */
.topbar .wrap{gap:.6rem}
a.navcta{font-size:.8rem;padding:.5rem .85rem}
@media(min-width:520px){
  .topbar .wrap{gap:1.6rem}
  a.navcta{font-size:.88rem;padding:.6rem 1.15rem}
}

.nav{
  display:none;order:4;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;align-items:stretch;gap:.1rem;
  margin:0;padding:.5rem var(--pad) 1rem;
  background:var(--paper);border-bottom:1px solid var(--hair);
}
.nav[data-open]{display:flex}
.nav a{padding:.75rem .9rem}

@media(min-width:980px){
  .nav-toggle{display:none}
  .navcta{order:0;margin-left:.6rem}
  .nav{
    display:flex;order:0;position:static;
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:.15rem;
    margin-left:auto;padding:0;background:none;border-bottom:0;
  }
  .nav a{padding:.5rem .8rem}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:inherit;font-size:.88rem;font-weight:600;text-decoration:none;
  padding:.6rem 1.15rem;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;transition:.16s;white-space:nowrap}
/* Button fill is deliberately darker than --pink: white on #D2718E is
   3.23:1 and fails WCAG AA. #B54D6E clears it at 4.94:1. --pink stays
   the brand accent for the dot, borders and washes. */
.btn-pink,a.btn-pink,.nav a.btn-pink{background:var(--pink-btn);color:#fff}
.nav a.btn-pink{margin-left:.6rem}
.btn-pink:hover,.btn-pink:focus-visible,.nav a.btn-pink:hover{background:var(--pink-btn-hover);color:#fff}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--hair)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--pink);color:var(--pink-deep)}
.btn-lg{font-size:.98rem;padding:.8rem 1.6rem}

/* Forest, for the primary action *on the page you are already on*. The search
   submit and the Chrome CTA were both btn-pink and sat 90px apart in the same
   sightline, reading as two equal offers when one searches this page and the
   other installs software. Pink is now reserved for the conversion actions
   (Add to Chrome, Create account); forest is "do the thing here". */
.btn-forest,button.btn-forest{background:var(--forest);color:#F4EDE9}
.btn-forest:hover,.btn-forest:focus-visible{background:#1B2620;color:#fff}

:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--pink-deep);outline-offset:2px;border-radius:6px}

/* --------------------------------------------------------------- BUBBLE */
/* The signature element. Text sits inside these, not loose on the page. */
.bubble{
  background:var(--bubble);border:1px solid var(--hair);
  border-radius:var(--r-bubble);padding:clamp(1.3rem,2.6vw,2rem);
}
.bubble-pink{background:var(--pink-wash);border-color:var(--hair-pink)}
.bubble-quiet{background:transparent;border-style:dashed}
.bubble h3{margin-bottom:.5rem}
.bubble p{color:var(--ink-soft);font-size:.95rem}

.bubbles{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}

/* A speech-bubble tail, for the "in plain English" moments only. */
.bubble-say{position:relative}
.bubble-say::after{
  content:"";position:absolute;left:2.2rem;bottom:-11px;width:20px;height:20px;
  background:inherit;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transform:rotate(45deg);border-bottom-right-radius:4px}
.bubble-pink.bubble-say::after{border-color:var(--hair-pink)}

/* ----------------------------------------------------------------- HERO */
.hero{padding-top:clamp(2.4rem,6vw,4.4rem);padding-bottom:clamp(2.4rem,6vw,4rem)}
.hero .lede{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--ink-soft);
  max-width:46ch;margin:1.4rem 0 0}
.hero .lede b{color:var(--forest);font-weight:600}

/* ------------------------------------------------------- DICTIONARY LOOKUP */
.lookup{margin:1.8rem 0 0;max-width:640px;position:relative}
.lookup-row{display:flex;gap:.6rem}
.lookup input{
  flex:1;min-width:0;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--bubble);border:1.5px solid var(--hair-pink);
  border-radius:var(--r-pill);padding:.85rem 1.2rem;
}
.lookup input::placeholder{color:var(--ink-faint)}
.lookup input:focus{outline:none;border-color:var(--pink)}

.filters{display:flex;gap:.4rem;margin:.7rem 0 0;flex-wrap:wrap;align-items:center}
.filters .lbl{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-right:.2rem}
.chip{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;background:transparent;color:var(--ink-soft);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:.32rem .8rem;cursor:pointer;transition:.16s}
.chip:hover{border-color:var(--pink)}
.chip[aria-pressed="true"]{background:#B54D6E;border-color:#B54D6E;color:#fff}

/* results — a dictionary, so entry + type + gloss */
.results{list-style:none;margin:.8rem 0 0;padding:0;background:var(--bubble);
  border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;display:none}
.results.on{display:block}
.results li{border-bottom:1px solid var(--hair)}
.results li:last-child{border-bottom:0}
.results a{display:flex;align-items:baseline;gap:.7rem;padding:.7rem 1.1rem;
  text-decoration:none;transition:background .14s}
.results a:hover,.results a:focus-visible{background:var(--pink-wash)}
.results .term{font-family:var(--ff-display);font-size:1.05rem;color:var(--forest)}
.results .type{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-deep);
  border:1px solid var(--hair-pink);border-radius:var(--r-pill);padding:.12rem .5rem}
.results .gloss{color:var(--ink-faint);font-size:.82rem;margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.results .empty{padding:.9rem 1.1rem;color:var(--ink-faint);font-size:.88rem}

/* --------------------------------------------------------------- SOURCES */
.sources{display:flex;flex-wrap:wrap;gap:.5rem}
.source{position:relative;display:inline-flex;align-items:center;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--forest);
  background:var(--bubble);border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:.45rem .95rem;transition:.16s}
.source:hover,.source:focus-visible{border-color:var(--pink);color:var(--pink-deep);
  background:var(--pink-wash)}
.source .what{
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  width:max-content;max-width:270px;background:var(--forest);color:#F4EDE9;
  font-family:var(--ff-body);font-size:.75rem;letter-spacing:0;text-transform:none;
  line-height:1.45;padding:.55rem .75rem;border-radius:var(--r-sm);
  opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s;
  pointer-events:none;z-index:5;text-align:left}
.source .what::after{content:"";position:absolute;left:50%;top:100%;
  transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--forest)}
.source:hover .what,.source:focus-visible .what{opacity:1;visibility:visible}

/* ---------------------------------------------------------------- MOTION */
/* The "how it works" demo. Motion is the wow moment, so it gets the budget. */
.demo{display:grid;gap:1.6rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.phone{background:var(--forest);border-radius:var(--r-lg);padding:1.4rem;
  box-shadow:0 24px 60px -28px rgba(39,51,44,.6);position:relative;overflow:hidden}
.phone .cap{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark-mute);margin:0 0 .9rem}
.label-line{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.6rem;
  align-items:baseline;padding:.5rem 0;border-bottom:1px solid rgba(244,220,225,.14);
  opacity:0;transform:translateY(6px);animation:lineIn .5s ease forwards}
.label-line:last-child{border-bottom:0}
.label-line .n{font-family:var(--ff-mono);font-size:.6rem;color:var(--on-dark-mute)}
.label-line .nm{font-size:.86rem;color:#F4DCE1;font-weight:600}
.label-line .fn{font-family:var(--ff-mono);font-size:.56rem;color:var(--pink);
  text-align:right}
.label-line:nth-child(2){animation-delay:.25s}
.label-line:nth-child(3){animation-delay:.5s}
.label-line:nth-child(4){animation-delay:.75s}
.label-line:nth-child(5){animation-delay:1s}
.label-line:nth-child(6){animation-delay:1.25s}
@keyframes lineIn{to{opacity:1;transform:none}}

.scanbar{position:absolute;left:0;right:0;height:2px;background:var(--pink);
  box-shadow:0 0 18px 3px rgba(210,113,142,.65);
  animation:scan 3.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{0%{top:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:92%;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .label-line{opacity:1;transform:none;animation:none}
  .scanbar{animation:none;opacity:.5;top:50%}
  *{scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- FOOTER */
.foot{background:var(--forest);color:#D8CFCB;padding:clamp(2.6rem,6vw,4rem) 0 2rem}
.foot h4{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-mute);margin:0 0 .8rem;font-weight:400}
.foot a{color:#F4EDE9;text-decoration:none;font-size:.9rem;display:block;
  padding:.24rem 0;transition:color .14s}
.foot a:hover,.foot a:focus-visible{color:var(--pink)}
.foot-grid{display:grid;gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.foot-bot{margin-top:2.4rem;padding-top:1.4rem;
  border-top:1px solid rgba(244,220,225,.16);color:var(--on-dark-mute);font-size:.78rem}

.stack-sm{display:grid;gap:.5rem}
.stack{display:grid;gap:1rem}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.center{text-align:center}
.measure{max-width:62ch}

/* ==========================================================================
   HOMEPAGE — added after review. The hero was left-aligned with a dead right
   column; it is now a two-up so the specimen card demonstrates the product
   in the space the headline was wasting.
   ========================================================================== */

.hero-grid{display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:start;
  grid-template-columns:1fr}
@media(min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}}

/* The specimen: a real dictionary entry, sitting in the hero, doing the
   explaining that the headline only promises. */
.specimen{background:var(--bubble);border:1px solid var(--hair);
  border-radius:var(--r-bubble);overflow:hidden;position:sticky;top:5rem}
.specimen-top{background:var(--forest);color:var(--blush,#F4DCE1);padding:1.1rem 1.3rem}
.specimen-top .lbl{font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark-mute);margin:0 0 .35rem}
.specimen-top .term{font-family:var(--ff-display);font-size:1.6rem;color:var(--on-dark);
  line-height:1.1;margin:0}
.specimen-top .say{font-family:var(--ff-mono);font-size:.66rem;color:var(--pink-soft,var(--pink-soft));
  margin:.35rem 0 0}
.specimen-body{padding:1.3rem}
.specimen .tldr{font-size:1rem;color:var(--ink);margin:0 0 1rem}
.specimen .tldr b{color:var(--forest)}
.like{background:var(--pink-wash);border:1px solid var(--hair-pink);
  border-radius:var(--r-md);padding:.85rem 1rem;margin:0 0 1rem}
.like .h{font-family:var(--ff-display);font-style:italic;font-size:.95rem;
  color:var(--pink-deep);margin:0 0 .3rem}
.like p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.facts{display:grid;gap:.4rem;margin:0}
.facts div{display:flex;gap:.7rem;align-items:baseline;
  border-top:1px solid var(--hair);padding-top:.4rem}
.facts dt{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);min-width:3.2rem}
.facts dd{margin:0;font-family:var(--ff-mono);font-size:.76rem;color:var(--ink)}
.specimen .src{margin:1rem 0 0;font-size:.74rem;color:var(--ink-faint)}
.specimen .src a{color:var(--pink-deep)}

/* popular categories */
.cats{display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.cat{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;
  background:var(--bubble);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:1rem 1.1rem;transition:.16s}
.cat:hover,.cat:focus-visible{border-color:var(--pink);background:var(--pink-wash);
  transform:translateY(-2px)}
.cat .n{font-family:var(--ff-display);font-size:1.15rem;color:var(--forest)}
.cat .c{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}

.needs{display:flex;flex-wrap:wrap;gap:.5rem}
.need{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.85rem;color:var(--forest);background:var(--bubble);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:.5rem 1rem;transition:.16s}
.need:hover,.need:focus-visible{border-color:var(--pink);background:var(--pink-wash);
  color:var(--pink-deep)}

/* values / why klaeri */
.values{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.value{background:var(--bubble);border:1px solid var(--hair);
  border-radius:var(--r-bubble);padding:1.4rem}
.value .num{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;
  color:var(--pink-deep);margin:0 0 .5rem}
.value h3{margin:0 0 .45rem}
.value p{margin:0;font-size:.92rem;color:var(--ink-soft)}

/* klaeri cares — the give-back ask */
.cares{background:var(--bubble);border:1px solid var(--hair-pink);
  border-radius:var(--r-bubble);padding:clamp(1.4rem,3vw,2.2rem)}
.cares .tag{display:inline-block;font-family:var(--ff-mono);font-size:.56rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep);
  background:var(--pink-wash);border-radius:var(--r-pill);
  padding:.28rem .8rem;margin:0 0 1rem}
.cares textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--hair);border-radius:var(--r-md);
  padding:.8rem 1rem;min-height:96px;resize:vertical}
.cares textarea:focus{outline:none;border-color:var(--pink)}
.cares .msg{margin:.7rem 0 0;font-size:.88rem;min-height:1.1rem}
.cares .msg.ok{color:var(--pink-deep)}
.cares .msg.bad{color:#B4543A}

/* ==========================================================================
   HOMEPAGE v2 — search sits under the nav, hero carries rotating positioning.
   Brief: fill the dead space, sell the position, give people somewhere to go.
   ========================================================================== */

/* search rail, directly beneath the nav */
.rail{background:var(--paper);border-bottom:1px solid var(--hair);
  position:sticky;top:56px;z-index:40}
.rail .wrap{padding-top:.8rem;padding-bottom:.8rem}
.rail .lookup{margin:0;max-width:none}


.trust{display:inline-flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin:1.6rem 0 0;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest);background:var(--pink-wash);
  border:1px solid var(--hair-pink);border-radius:var(--r-pill);padding:.5rem 1.1rem}
.trust b{color:var(--pink-deep);font-weight:400}

/* product + ingredient rows */
.pcards{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr))}
.pcard{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;
  background:var(--bubble);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:1.1rem;transition:.16s}
.pcard:hover,.pcard:focus-visible{border-color:var(--pink);transform:translateY(-2px)}
.pcard .b{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.pcard .n{font-family:var(--ff-display);font-size:1.08rem;color:var(--forest);line-height:1.2}
.pcard .m{font-family:var(--ff-mono);font-size:.58rem;color:var(--pink-deep);margin-top:auto;
  padding-top:.6rem}

.iwords{display:flex;flex-wrap:wrap;gap:.5rem}
.iword{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;
  background:var(--bubble);border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:.45rem 1rem;transition:.16s}
.iword:hover,.iword:focus-visible{border-color:var(--pink);background:var(--pink-wash)}
.iword .w{font-family:var(--ff-display);font-size:1rem;color:var(--forest)}
.iword .g{font-family:var(--ff-mono);font-size:.55rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-faint)}

/* front says / back says */
.vs{display:grid;gap:0;border:1px solid var(--hair);border-radius:var(--r-bubble);
  overflow:hidden;background:var(--bubble)}
@media(min-width:720px){.vs{grid-template-columns:1fr 1fr}}
.vs .side{padding:1.3rem 1.4rem}
.vs .side + .side{border-top:1px solid var(--hair)}
@media(min-width:720px){.vs .side + .side{border-top:0;border-left:1px solid var(--hair)}}
.vs .h{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 .8rem}
.vs .front .h{color:var(--ink-faint)}
.vs .back .h{color:var(--pink-deep)}
.vs .claim{font-family:var(--ff-display);font-size:1.15rem;color:var(--forest);
  margin:0 0 .4rem;line-height:1.25}
.vs p{margin:0 0 1.1rem;font-size:.9rem;color:var(--ink-soft)}
.vs p:last-child{margin-bottom:0}
.vs .back{background:var(--pink-wash)}

/* mini-course steps */
.steps{display:grid;gap:.9rem;counter-reset:s}
.step{display:flex;gap:1rem;align-items:flex-start;background:var(--bubble);
  border:1px solid var(--hair);border-radius:var(--r-md);padding:1.1rem 1.3rem}
.step .k{font-family:var(--ff-mono);font-size:.62rem;color:var(--pink-deep);
  border:1px solid var(--hair-pink);border-radius:var(--r-pill);
  padding:.15rem .6rem;flex:0 0 auto}
.step h3{margin:0 0 .25rem;font-size:1.08rem}
.step p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* extension teaser */
.ext{display:grid;gap:1.6rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.ext-shot{background:var(--forest);border-radius:var(--r-lg);padding:1.2rem;
  box-shadow:0 20px 50px -26px rgba(39,51,44,.55)}
.ext-bar{background:#F4EDE9;border-radius:var(--r-sm);padding:.8rem .9rem}
.ext-bar .t{font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7E6B72;margin:0 0 .35rem}
.ext-bar .s{margin:0;font-size:.9rem;color:#27332C}
.ext-bar .s b{color:#A84566}

/* reveal-on-scroll — quiet, and off entirely for reduced motion */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rotator .line{transition:none}
}

/* ---- hero, static. No fade cycling: it read as slow and it wrapped badly. ---- */
/* ---- THE HERO BAND -------------------------------------------------------
   Ground first. The flat blush hero read as static next to the old site, which
   had a soft green-to-blush wash and depth. Green is a ground here and never a
   status — see CLAUDE.md, revised 2026-08-03. Two very light radial washes, so
   the display type keeps its contrast on top. */
.heroband{
  background:
    radial-gradient(115% 85% at 10% -5%, #E7F0E9 0%, rgba(231,240,233,0) 55%),
    radial-gradient(95% 75% at 95% 35%, #F9E5E9 0%, rgba(249,229,233,0) 60%),
    var(--paper);
}
.hero2{padding-top:clamp(1.8rem,4vw,3rem);padding-bottom:0}
.tagline{font-size:clamp(2.6rem,7vw,5rem);line-height:1;margin:0}

/* Copy left, the decoder right. Single column until there is genuinely room —
   below that the decoder is decoration competing with the headline. */
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.6rem);
  align-items:center}
@media(min-width:980px){
  .hero-grid{grid-template-columns:1.18fr .82fr}
  /* The tagline is set to fill a full-width hero. In two columns that same
     clamp broke "The back of the label," across four lines and lost the couplet.
     Capped so it holds two. */
  .hero-grid .tagline{font-size:clamp(2.4rem,4vw,3.7rem)}
}

/* ---- THE DECODER ---------------------------------------------------------
   The product, demonstrated, instead of described: real INCI names off real
   labels drift up the column, and as each crosses the reading line it resolves
   into the plain English Klaeri actually holds for it.

   Motion runs continuously rather than cycling with pauses — the rejected hero
   rotator failed because it made you wait. Nothing here is ever waited on: the
   next name is always already on its way in. */
.decoder{display:none}
@media(min-width:980px){
  .decoder{
    display:block;position:relative;height:26rem;overflow:hidden;
    border-radius:var(--r-md);background:var(--forest);
    padding:1.1rem 1.3rem;
    box-shadow:0 18px 44px -22px rgba(39,51,44,.55);
  }
}
.decoder::after{                     /* top and bottom fade, so nothing pops in */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--forest) 0%,rgba(39,51,44,0) 16%,
             rgba(39,51,44,0) 78%,var(--forest) 96%);
}
/* Head and foot sit on their own forest ground: rows travel behind them, and
   without it the last line collided with the caption. */
.dec-head{position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;gap:.5rem;
  padding:1.1rem 1.3rem .7rem;background:var(--forest);
  font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:#7F9585}
.dec-head b{width:5px;height:5px;border-radius:50%;background:var(--pink);
  animation:decpulse 2.4s ease-in-out infinite}
@keyframes decpulse{0%,100%{opacity:.35}50%{opacity:1}}

/* the reading line — one hairline, the only pink in the panel */
.dec-beam{position:absolute;left:0;right:0;top:50%;height:1px;z-index:2;
  background:linear-gradient(90deg,rgba(210,113,142,0),var(--pink) 18%,
             var(--pink) 82%,rgba(210,113,142,0))}

.dec-track{position:absolute;left:1.3rem;right:1.3rem;top:0;will-change:transform}

/* Fixed height, and the gloss always occupies its space. The first version let
   the gloss expand the row on read, which moved every row below it, which changed
   which rows were near the beam, which re-fired the toggle — a feedback loop that
   restarted the transition every frame and pinned the text at 6% opacity. Nothing
   the read state touches may affect layout. */
.dec-row{height:5.05rem;display:flex;flex-direction:column;justify-content:center;
  gap:.28rem;border-bottom:1px solid rgba(244,220,225,.08)}
.dec-inci{display:block;font-family:var(--ff-mono);font-size:.72rem;
  line-height:1.35;letter-spacing:.04em;color:#7C9282;
  transition:color .34s ease}
.dec-say{display:block;font-family:var(--ff-display);font-style:italic;
  font-size:1.06rem;line-height:1.28;color:#F4DCE1;
  opacity:0;transform:translateY(5px);
  transition:opacity .38s ease,transform .38s ease}
/* .is-read is set by hero-decoder.js as a row crosses the beam */
.dec-row.is-read .dec-inci{color:#F4DCE1}
.dec-row.is-read .dec-say{opacity:1;transform:none}

.dec-foot{position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:.7rem 1.3rem 1.05rem;background:var(--forest);
  font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7F9585}

@media(prefers-reduced-motion:reduce){
  .dec-track{transform:none!important;position:static}
  .decoder{height:auto;max-height:26rem}
  .dec-head b{animation:none}
  .dec-row .dec-say{max-height:4.5rem;opacity:1;margin-top:.3rem}
  .dec-row .dec-inci{color:#F4DCE1}
  .dec-beam{display:none}
}
.sub{margin:1.1rem 0 0;font-size:clamp(1.02rem,1.8vw,1.2rem);color:var(--ink-soft);
  max-width:52ch}
.sub b{color:var(--forest);font-weight:600}

/* ---- the ticker: motion that RUNS ACROSS, like a masthead strip.
   One continuous pass, no fading, no waiting for the next line. ---- */
.ticker-strip{margin:1.6rem 0 0;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);background:var(--pink-wash);
  overflow:hidden;position:relative}
.ticker-track{display:flex;width:max-content;
  animation:run 38s linear infinite}
.ticker-strip:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--ff-display);font-style:italic;
  font-size:clamp(1rem,1.8vw,1.35rem);color:var(--forest);
  padding:.7rem 0}
.ticker-track span::after{content:"·";color:var(--pink);
  font-style:normal;margin:0 1.6rem;opacity:.8}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;flex-wrap:wrap;width:auto}
  .ticker-strip{overflow:visible}
}

/* ---- THE INGREDIENT SPREAD ----------------------------------------------
   One layout for all 3,110, with modules that degrade honestly: a page is never
   broken, only less full. The bespoke pieces (analogy, findings) simply do not
   render when the row is empty, rather than leaving a labelled hole. See
   PROJECT_STATE/STRATEGY.md for the tiering. */
.ing-lede{margin:1.1rem 0 0;font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.45;
  color:var(--ink-soft);max-width:46ch}

/* The short version — the analogy, set as the pull quote it deserves to be.
   It was buried in a small card halfway down the page. */
.shortver{background:var(--forest);color:#F4EDE9;margin-top:clamp(2rem,5vw,3.4rem)}
.shortver-in{display:grid;grid-template-columns:1fr;gap:.8rem;
  padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
@media(min-width:820px){
  .shortver-in{grid-template-columns:14rem minmax(0,1fr);gap:2rem;align-items:start}
}
.shortver .kick{color:var(--pink-soft);margin:0}
.sv-quote{font-family:var(--ff-display);font-size:clamp(1.5rem,3.4vw,2.35rem);
  line-height:1.18;margin:0;max-width:26ch;color:#F7EFEA}

/* The honest bit — the limits of the label. Every competitor ends on a verdict;
   this ends on what a label cannot support. */
.honest{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.6rem)}
@media(min-width:860px){.honest{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.honest h2{margin:0}
.honest-body p{margin:0 0 1rem;color:var(--ink-soft);max-width:52ch}
.honest-body p b{color:var(--ink);font-weight:600}
.cant{list-style:none;margin:0 0 1rem;padding:0;max-width:52ch}
.cant li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;
  color:var(--ink-soft);font-size:.94rem;line-height:1.5}
.cant li::before{content:"";position:absolute;left:0;top:.62em;
  width:.7rem;height:1px;background:var(--pink)}

/* On the record — three states, rendered differently on purpose. */
.record-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.rec{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
@media(max-width:620px){.rec{grid-template-columns:1fr;gap:.2rem}}
.rec .rs{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.rec .rv{font-size:.92rem;color:var(--ink-soft)}
.rec .rv em{display:block;font-style:normal;font-family:var(--ff-mono);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin-top:.2rem}
.rec .rv a{color:var(--pink-deep)}
/* "nobody looked" must read as absent, not as reassurance */
.rec.unchecked .rs,.rec.unchecked .rv{color:var(--ink-faint)}
.rec.published .rv{color:var(--ink)}

/* The nothing-checked-yet state. Proportionate to what it has to say. */
.record-empty{border-left:2px solid var(--pink);padding-left:1.3rem;max-width:56ch}
.record-empty p{margin:0 0 .9rem;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.re-lede{font-family:var(--ff-display);font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.25;color:var(--ink)!important}
.re-src{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)!important;margin-bottom:0!important}
.re-src b{color:var(--ink-soft);font-weight:400}

/* ---- WHAT IT TRAVELS WITH ------------------------------------------------
   Two bars per row, overlaid rather than side by side: the faint one is how
   often the partner appears on any label, the solid one how often it appears
   on these. The gap between them IS the finding, so the eye should land on the
   gap and not on either number. Ranked server-side; see the cooccurrence
   migration for why raw frequency was the wrong measure. */
.cooc{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.cooc li{display:grid;grid-template-columns:minmax(9rem,1.1fr) minmax(0,1.6fr) auto;
  gap:1rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--hair)}
@media(max-width:720px){
  .cooc li{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .cooc .cbar{grid-column:1/-1;order:3}
}
.cooc .cn{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid transparent}
.cooc .cn:hover,.cooc .cn:focus-visible{color:var(--pink-deep);border-bottom-color:var(--pink)}

.cooc .cbar{position:relative;display:block;height:10px;border-radius:999px;
  background:var(--pink-wash)}
/* the fill: how often the partner is on THESE labels */
.cooc .cbar .here{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:var(--pink);opacity:.9}
/* the tick: how often it is on ANY label. A marker, not a second bar — as a bar
   it sat underneath the fill and was never once visible, which removed the only
   thing the row exists to show. */
.cooc .cbar .base{position:absolute;top:-3px;bottom:-3px;width:2px;
  background:var(--forest);opacity:.5;border-radius:1px;transform:translateX(-1px)}

.cooc .cnum{text-align:right;font-family:var(--ff-mono);font-size:.62rem;
  letter-spacing:.06em;color:var(--ink-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums;line-height:1.5}
.cooc .cnum b{display:block;font-size:.8rem;color:var(--ink);letter-spacing:.02em}
.cooc .cnum em{display:block;font-style:normal}

.cooc-key{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem 1.4rem;
  margin:1rem 0 0;font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.cooc-key span{display:inline-block;margin-right:.45rem;vertical-align:middle}
.cooc-key .k-fill{width:18px;height:8px;border-radius:999px;background:var(--pink);opacity:.9}
.cooc-key .k-tick{width:2px;height:12px;border-radius:1px;background:var(--forest);opacity:.5}

/* ==========================================================================
   INGREDIENT PAGE — the crown jewel. Answer the question in the first screen:
   what is it, what does it do, where does that come from. Never a verdict.
   ========================================================================== */
.ing-head{padding-top:clamp(1.8rem,4vw,3rem)}
.crumb{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem}
.crumb a{color:var(--pink-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.ing-head h1{font-size:clamp(2.2rem,5.5vw,3.8rem);line-height:1.02}
.ing-alias{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-faint);
  margin:.9rem 0 0}

.ing-grid{display:grid;gap:clamp(1.2rem,3vw,2rem);align-items:start;
  grid-template-columns:1fr}
@media(min-width:900px){.ing-grid{grid-template-columns:1.25fr .75fr}}

.tldr{font-family:var(--ff-display);font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.28;color:var(--forest);margin:0}
.jobs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 0}
/* The curated function, told apart from the raw CosIng list beside it. Those are
   alphabetical and unranked; this is the answer. Weight, not colour — a second
   colour here would start to look like a grade. */
.job-primary{background:var(--forest)!important;color:#F4DCE1!important;font-weight:600}
.job{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pink-deep);background:var(--pink-wash);
  border:1px solid var(--hair-pink);border-radius:var(--r-pill);padding:.3rem .8rem}

.record{background:var(--bubble);border:1px solid var(--hair);
  border-radius:var(--r-bubble);padding:1.3rem 1.4rem}
.record h2{font-size:1.15rem;margin:0 0 .9rem}
.record dl{margin:0;display:grid;gap:.5rem}
.record .row{display:flex;gap:.9rem;align-items:baseline;
  border-top:1px solid var(--hair);padding-top:.5rem}
.record .row:first-child{border-top:0;padding-top:0}
.record dt{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);min-width:4.2rem}
.record dd{margin:0;font-family:var(--ff-mono);font-size:.78rem;color:var(--ink);
  word-break:break-word}
.record .cite{margin:1rem 0 0;font-size:.72rem;color:var(--ink-faint);line-height:1.5}
.record .cite a{color:var(--pink-deep)}

.stance{margin:1.6rem 0 0;font-size:.9rem;color:var(--ink-soft);
  border-left:2px solid var(--hair-pink);padding-left:1rem;max-width:56ch}
.state{padding:2rem 0;color:var(--ink-faint);font-family:var(--ff-mono);font-size:.8rem}

/* ---- products index ---- */
.shelf-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;
  justify-content:space-between;margin:1.4rem 0 0}
.tally{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.freefrom{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.9rem 0 0}
.pcard .flags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.pcard .flag{font-family:var(--ff-mono);font-size:.52rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pink-deep);background:var(--pink-wash);
  border-radius:var(--r-pill);padding:.18rem .55rem}

/* ---- how it works: three steps, nothing more ---- */
.bigstep{display:grid;gap:1.4rem;align-items:start;grid-template-columns:1fr;
  padding:clamp(1.6rem,4vw,2.4rem) 0;border-top:1px solid var(--hair)}
@media(min-width:760px){.bigstep{grid-template-columns:5.5rem 1fr}}
.bigstep:first-of-type{border-top:0}
.bigstep .no{font-family:var(--ff-display);font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:.9;color:var(--pink);font-style:italic}
.bigstep h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .6rem}
.bigstep p{color:var(--ink-soft);max-width:56ch;margin:0 0 1rem}
.ways{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin:1.1rem 0 0}
.way{background:var(--bubble);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:.9rem 1rem}
.way .t{font-family:var(--ff-display);font-size:1rem;color:var(--forest);margin:0 0 .2rem}
.way p{font-size:.85rem;margin:0;color:var(--ink-soft)}

/* ---- dictionary index: A–Z, because it is a dictionary ---- */
.azbar{display:flex;flex-wrap:wrap;gap:.28rem;margin:1.2rem 0 0}
.azbar button{font-family:var(--ff-mono);font-size:.66rem;min-width:1.9rem;
  background:transparent;color:var(--ink-soft);border:1px solid var(--hair);
  border-radius:var(--r-sm);padding:.3rem 0;cursor:pointer;transition:.14s}
.azbar button:hover{border-color:var(--pink)}
.azbar button[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff}
.entries{display:grid;gap:.6rem;margin:1.4rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.entry-card{display:block;text-decoration:none;background:var(--bubble);
  border:1px solid var(--hair);border-radius:var(--r-md);padding:.9rem 1.1rem;transition:.14s}
.entry-card:hover,.entry-card:focus-visible{border-color:var(--pink);background:var(--pink-wash)}
.entry-card .w{font-family:var(--ff-display);font-size:1.08rem;color:var(--forest);
  display:block;line-height:1.2}
.entry-card .d{font-size:.83rem;color:var(--ink-soft);display:block;margin-top:.2rem}
.entry-card .none{font-family:var(--ff-mono);font-size:.62rem;color:var(--ink-faint);
  display:block;margin-top:.2rem}

/* ---- plans ---- */
.plans{display:grid;gap:1.2rem;margin:1.8rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.plan{background:var(--bubble);border:1px solid var(--hair);
  border-radius:var(--r-bubble);padding:clamp(1.4rem,3vw,2rem);
  display:flex;flex-direction:column}
.plan.hero-plan{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.plan .pname{font-family:var(--ff-display);font-size:1.5rem;color:var(--forest);margin:0}
.plan .price{font-family:var(--ff-display);font-size:2.4rem;color:var(--pink-deep);
  margin:.4rem 0 .2rem;line-height:1}
.plan .note{font-size:.85rem;color:var(--ink-soft);margin:0 0 1.2rem}
.plan ul{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.55rem}
.plan li{font-size:.9rem;color:var(--ink-soft);padding-left:1.3rem;position:relative}
.plan li::before{content:"·";position:absolute;left:.35rem;color:var(--pink);
  font-size:1.3rem;line-height:1}
.plan .cta{margin-top:auto}
.never{display:grid;gap:.7rem;margin:1.4rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.never div{background:var(--pink-wash);border:1px solid var(--hair-pink);
  border-radius:var(--r-md);padding:.9rem 1.1rem;font-size:.9rem;color:var(--ink)}

/* ---- collections + contact ---- */
.colls{display:grid;gap:1.1rem;margin:1.8rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.coll{background:var(--bubble);border:1px solid var(--hair);border-radius:var(--r-bubble);
  padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.4rem}
.coll .tag-plus{font-family:var(--ff-mono);font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-deep);background:var(--pink-wash);
  border:1px solid var(--hair-pink);border-radius:var(--r-pill);
  padding:.15rem .55rem;align-self:flex-start}
.coll h3{margin:.2rem 0 0}
.coll p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.form-stack{display:grid;gap:.9rem;max-width:32rem;margin:1.6rem 0 0}
.form-stack label{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.35rem}
.form-stack input,.form-stack textarea,.form-stack select{
  width:100%;background:var(--bubble);border:1.5px solid var(--hair);border-radius:var(--r-sm);
  padding:.75rem 1rem;font-family:inherit;font-size:.95rem;color:var(--ink);outline:none;
  transition:border-color .16s}
.form-stack input:focus,.form-stack textarea:focus,.form-stack select:focus{border-color:var(--pink)}
.form-stack textarea{min-height:8rem;resize:vertical;border-radius:var(--r-md)}

/* ---- FAQ ---- */
.qgroup{margin:2.2rem 0 0}
.qgroup > h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:0 0 1rem}
.qa{background:var(--bubble);border:1px solid var(--hair);border-radius:var(--r-md);
  margin:0 0 .7rem;overflow:hidden}
.qa summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;
  font-family:var(--ff-display);font-size:1.05rem;color:var(--forest);
  display:flex;align-items:center;gap:.8rem;transition:background .14s}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;color:var(--pink);
  font-family:var(--ff-mono);font-size:1.1rem;flex:0 0 auto}
.qa[open] summary::after{content:"–"}
.qa summary:hover{background:var(--pink-wash)}
.qa .ans{padding:0 1.2rem 1.2rem;color:var(--ink-soft);font-size:.93rem;line-height:1.65}
.qa .ans p{margin:0 0 .8rem}
.qa .ans p:last-child{margin-bottom:0}
.qa .ans a{color:var(--pink-deep)}
.qa .ans ul{margin:.4rem 0 .8rem;padding-left:1.1rem}
.qa .ans li{margin:.25rem 0}

/* ==========================================================================
   LABEL CLUB — reddit-shaped, magazine-dressed.
   Reading is free. Posting needs an account, and nothing publishes until it
   is approved, so the pending state is a first-class part of the UI.
   ========================================================================== */
.club{display:grid;gap:clamp(1.2rem,3vw,2rem);align-items:start;grid-template-columns:1fr}
@media(min-width:900px){.club{grid-template-columns:13rem 1fr}}

.rail-ch{position:sticky;top:5rem;display:grid;gap:.2rem;align-content:start}
.rail-ch .hd{font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .5rem}
.rail-ch button{text-align:left;background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:.88rem;color:var(--ink-soft);
  padding:.42rem .7rem;border-radius:var(--r-pill);transition:.14s;
  display:flex;align-items:baseline;gap:.5rem}
.rail-ch button:hover{background:var(--pink-wash);color:var(--pink-deep)}
.rail-ch button[aria-pressed="true"]{background:#B54D6E;color:#fff}
.rail-ch button .n{margin-left:auto;font-family:var(--ff-mono);font-size:.6rem;opacity:.7}

.sorts{display:flex;gap:.3rem;margin:0 0 1.1rem}
.sorts button{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;background:transparent;color:var(--ink-soft);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:.34rem .9rem;cursor:pointer;transition:.14s}
.sorts button:hover{border-color:var(--pink)}
.sorts button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper-pink)}

.post{display:grid;grid-template-columns:3rem 1fr;gap:.9rem;
  background:var(--bubble);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:1rem 1.2rem;margin:0 0 .8rem;transition:.14s}
.post:hover{border-color:var(--hair-pink)}
.post.pending{border-style:dashed;border-color:var(--hair-pink);background:var(--pink-wash)}
.vote{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.vote button{background:transparent;border:0;cursor:pointer;color:var(--ink-faint);
  font-size:1.05rem;line-height:1;padding:.15rem;border-radius:6px;transition:.14s}
.vote button:hover{color:var(--pink);background:var(--pink-wash)}
.vote button[aria-pressed="true"]{color:var(--pink-deep)}
.vote .score{font-family:var(--ff-mono);font-size:.8rem;color:var(--forest);font-weight:600}
.post .meta{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);display:flex;flex-wrap:wrap;
  gap:.5rem;align-items:center;margin:0 0 .35rem}
.post .meta .ch{color:var(--pink-deep);text-decoration:none}
.post .meta .ch:hover{text-decoration:underline}
.post h3{font-size:1.1rem;margin:0 0 .3rem;line-height:1.25}
.post h3 a{text-decoration:none}
.post h3 a:hover{color:var(--pink-deep)}
.post .body{margin:0;font-size:.92rem;color:var(--ink-soft)}
.post .foot-row{display:flex;gap:1rem;align-items:center;margin:.6rem 0 0;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.post .foot-row a{color:var(--pink-deep);text-decoration:none}
.badge-pending{font-family:var(--ff-mono);font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-deep);background:var(--bubble);
  border:1px solid var(--hair-pink);border-radius:var(--r-pill);padding:.15rem .55rem}

.composer{background:var(--bubble);border:1px solid var(--hair);
  border-radius:var(--r-bubble);padding:1.3rem;margin:0 0 1.4rem}
.composer h3{margin:0 0 .8rem;font-size:1.1rem}
.composer .grid2{display:grid;gap:.7rem;grid-template-columns:1fr;margin-bottom:.7rem}
@media(min-width:620px){.composer .grid2{grid-template-columns:1fr 12rem}}
.composer input,.composer textarea,.composer select{
  width:100%;background:var(--paper);border:1.5px solid var(--hair);border-radius:var(--r-sm);
  padding:.7rem .95rem;font-family:inherit;font-size:.93rem;color:var(--ink);outline:none}
.composer textarea{min-height:6rem;resize:vertical;border-radius:var(--r-md)}
.composer input:focus,.composer textarea:focus,.composer select:focus{border-color:var(--pink)}
.gate-note{background:var(--pink-wash);border:1px solid var(--hair-pink);
  border-radius:var(--r-bubble);padding:1.2rem 1.4rem;margin:0 0 1.4rem}
.gate-note p{margin:0 0 .8rem;font-size:.92rem;color:var(--ink-soft)}

/* ==========================================================================
   FOREST BANDS — the green half of the brand.
   The page had drifted all-pink, with forest surviving only in type where it
   reads as near-black. Same logic as the mark: green is the ground, pink is
   the signal. A dark band every few sections also makes the blush read as
   deliberate rather than as the only colour available.
   ========================================================================== */
.band-forest{background:var(--forest);color:var(--on-dark-soft)}
.band-forest h2,.band-forest h3{color:var(--on-dark)}
.band-forest em{color:var(--pink-soft,var(--pink-soft))}
.band-forest .kick{color:var(--on-dark-mute)}
.band-forest p{color:#CBBDB9}
.band-forest .measure b,.band-forest strong{color:var(--on-dark)}

/* elements sitting on forest have to invert too */
.band-forest .source{background:rgba(251,243,241,.06);border-color:rgba(244,220,225,.22);
  color:#F4EDE9}
.band-forest .source:hover,.band-forest .source:focus-visible{
  background:rgba(231,155,178,.16);border-color:var(--pink-soft,var(--pink-soft));color:var(--on-dark)}
.band-forest .source .what{background:#F4DCE1;color:#27332C}
.band-forest .source .what::after{border-top-color:#F4DCE1}

.band-forest .value,.band-forest .bubble,.band-forest .step{
  background:rgba(251,243,241,.05);border-color:rgba(244,220,225,.18)}
.band-forest .value p,.band-forest .bubble p,.band-forest .step p{color:var(--on-dark-dim)}
.band-forest .value .num,.band-forest .step .k{color:var(--pink-soft,var(--pink-soft));
  border-color:rgba(231,155,178,.35)}
.band-forest .bubble-pink{background:rgba(231,155,178,.14);
  border-color:rgba(231,155,178,.4)}
.band-forest .bubble-pink p{color:var(--on-dark)}
.band-forest .bubble-say::after{background:inherit;border-color:rgba(244,220,225,.18)}

.band-forest .btn-ghost{color:#F4EDE9;border-color:rgba(244,220,225,.34)}
.band-forest .btn-ghost:hover,.band-forest .btn-ghost:focus-visible{
  border-color:var(--pink-soft,var(--pink-soft));color:var(--pink-soft,var(--pink-soft))}
.band-forest .mono{color:var(--on-dark-mute)}
.band-forest a{color:var(--pink-soft,var(--pink-soft))}

/* the ticker reads better as a forest rule between two pink fields */
.ticker-strip{background:var(--paper-pink);
  border-top:1px solid var(--sage);border-bottom:1px solid var(--sage)}
.ticker-track span{color:var(--forest)}
.ticker-track span::after{color:var(--sage)}

/* ==========================================================================
   SYSTEM PASS — one card geometry.
   Sixteen surfaces had grown eight different radii between them, which is
   what made the site read as accumulated rather than designed. Variants may
   differ by FILL and BORDER. They no longer differ by shape.
   ========================================================================== */
.bubble,.cat,.coll,.composer,.entry-card,.never > div,.pcard,.plan,.post,.qa,.record,.specimen,.step,.value,.vs,.way{
  border-radius:var(--r-md);
}