/* ============================================================================
   SkipSynthetic — consolidated stylesheet (redesign)
   One file, no build step. Drop-in for /assets/style.css.
   Editorial / tactile / garment-label. Tokens in :root.
   Sections:  0 Tokens · 1 Base/a11y · 2 Header/Footer · 3 Buttons
              4 Hero · 5 Spec card · 6 Bands · 7 Tier glyphs · 8 Fiber meter
              9 Product card · 10 Shop (rail/toolbar/empty)
              11 Product detail · 12 Methodology/prose
   Self-host Newsreader as woff2 (see @font-face stub at top) — or keep the
   system serif fallback and delete the @font-face block.
   ============================================================================ */

/* Optional: self-hosted display face. Drop a woff2 at /assets/fonts/ and keep;
   otherwise remove this block — the fallback serif stack below still applies. */
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/newsreader.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('/assets/fonts/newsreader-italic.woff2') format('woff2');
}

/* ── 0. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* surfaces & ink */
  --paper:#f4f0e6;        /* undyed-cotton ground */
  --paper-2:#efe9db;      /* deeper band / footer */
  --surface:#fffdf8;      /* single near-white (was #fffefb + #fffdf8) */
  --ink:#201c15;          /* warm near-black — 13.8:1 on paper */
  --muted:#5b5346;        /* AA on paper (6.6:1) & surface */
  --line:#e4ddce;
  --line-2:#d6cdb9;

  /* tier semantics — TEXT color (dark, AA) + tint bg + GRAPHIC variant */
  --pure:#1b6a39;   --pure-bg:#e6f1e7;   --pure-g:#2f8a4e;   /* ≥5.4:1 */
  --bodyp:#1b5a68;  --bodyp-bg:#e0edef;  --bodyp-g:#2f7f92;  /* ≥5.6:1 */
  --natdom:#6d5012; --natdom-bg:#f3ead2; --natdom-g:#b07d12; /* ≥6.0:1 */
  --excl:#5b5347;   --excl-bg:#ebe5db;   --excl-g:#8a8178;   /* ≥4.9:1 */
  --syn:#a3331b;    --syn-bg:#f7e3dc;                         /* only red  */
  --cell:#6d5012;   --cell-bg:#f3ead2;                        /* cellulosic */

  /* indigo — RESERVED for the affiliate buy CTA only */
  --click:#283a6b; --click-hi:#324787; --click-on:#fffdf8;   /* 10.6:1 w/ white */
  /* clay — sparing editorial accent: rules, marks, logo. NEVER small text */
  --clay:#b9542a;

  /* spacing scale (4px base) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;  --s7:3rem;  --s8:4rem;  --s9:6rem;

  /* radii / shadow */
  --r-sm:7px; --r-md:11px; --r-lg:18px; --r-pill:999px;
  --sh-1:0 1px 2px #20140805, 0 10px 26px -18px #20140830;
  --sh-2:0 2px 6px #2014080d, 0 22px 48px -22px #20140842;

  /* type */
  --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',ui-serif,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --header-h:4.25rem;
}

/* ── 1. BASE / A11Y ──────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
[id]{scroll-margin-top:calc(var(--header-h) + 1rem);}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;position:relative;}
/* subtle paper grain (replaces decorative cross-hatch) */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}
body>*{position:relative;z-index:1;}
.wrap{width:min(1120px,93vw);margin:0 auto;}
img{max-width:100%;display:block;}
a{color:var(--ink);}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.012em;margin:0;color:var(--ink);}
h2{font-size:clamp(1.5rem,3vw,2.1rem);}
h3{font-size:1.18rem;font-weight:600;}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:600;color:var(--muted);margin:0 0 var(--s3);}
.eyebrow.clay{color:var(--clay);}
.subtle{color:var(--muted);}

:where(a,button,.btn,.chip,.cta,select,input,label,summary):focus-visible{
  outline:2px solid var(--click);outline-offset:2px;border-radius:6px;}

/* skip link */
.skip{position:absolute;left:var(--s4);top:-3rem;background:var(--ink);color:var(--surface);
  padding:.6rem 1rem;border-radius:var(--r-sm);z-index:50;transition:top .15s ease;text-decoration:none;font-weight:600;}
.skip:focus{top:var(--s3);}

/* ── 2. HEADER / FOOTER ──────────────────────────────────────────────────── */
.site-header{background:#fffefb;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--header-h);}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--serif);font-weight:600;
  font-size:1.32rem;text-decoration:none;color:var(--ink);letter-spacing:-.02em;padding:.5rem 0;}
.logo .logomark,.logo .logomark svg{width:26px;height:26px;display:block;}
.logo .logo-accent{color:var(--clay);}
.nav{display:flex;align-items:center;gap:var(--s1);}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;text-decoration:none;
  font-weight:600;font-size:.96rem;color:var(--muted);border-radius:var(--r-sm);}
.nav a.active,.nav a:hover{color:var(--ink);background:var(--paper-2);}

main.wrap{padding:1.4rem 0 3rem;}

.site-footer{background:var(--paper-2);border-top:1px solid var(--line);padding:var(--s6) 0;margin-top:var(--s7);
  color:var(--muted);font-size:.9rem;}
.site-footer strong{color:var(--ink);}
.disclosure{max-width:78ch;margin:0 0 var(--s4);}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0 0 var(--s4);list-style:none;padding:0;}
.foot-links a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink);text-decoration:none;font-weight:600;}
.foot-links a:hover{color:var(--clay);}
.foot-fine{max-width:78ch;margin:0;font-size:.84rem;}

/* ── 3. BUTTONS (site actions = ink/outline. Indigo is reserved: see .buy) ── */
.btn,.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;gap:.4rem;
  background:var(--ink);color:var(--surface);text-decoration:none;font-weight:600;font-family:var(--sans);
  font-size:1rem;padding:0 1.4rem;border-radius:var(--r-pill);border:1.5px solid var(--ink);cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;}
.btn:hover,.cta:hover{transform:translateY(-1px);box-shadow:var(--sh-1);}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn.secondary:hover{border-color:var(--ink);background:#fffdf8;}

/* ── 4. HERO ─────────────────────────────────────────────────────────────── */
.hero{width:100vw;margin-left:calc(50% - 50vw);border-bottom:1px solid var(--line);
  background:radial-gradient(120% 120% at 88% -20%, #e9efe1 0%, transparent 52%),
             linear-gradient(168deg,#fbf8f1 0%, #efe8da 100%);}
.hero-inner{width:min(1120px,93vw);margin:0 auto;padding:clamp(2.4rem,6vw,4.6rem) 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,5vw,4rem);align-items:center;}
@media(max-width:840px){.hero-inner{grid-template-columns:1fr;gap:2.2rem;}}
.hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,6vw,4.1rem);
  line-height:1.02;letter-spacing:-.02em;margin:0 0 var(--s4);max-width:13ch;}
.hero-title em{font-style:italic;color:var(--clay);font-weight:500;}
.lede{font-size:clamp(1.05rem,1.5vw,1.18rem);color:var(--muted);max-width:48ch;margin:0 0 var(--s5);}
.fiber-strip{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s5);padding:0;list-style:none;}
.fiber-strip a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;
  font-size:.95rem;color:var(--ink);border:1.5px solid var(--line-2);background:#fffdf8;border-radius:var(--r-pill);
  padding:0 1.05rem;transition:border-color .12s ease;}
.fiber-strip a:hover{border-color:var(--ink);}
.fiber-strip a.fs-hero{color:var(--surface);background:var(--ink);border-color:var(--ink);}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);}
.link-arrow{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;
  color:var(--ink);border-bottom:1.5px solid transparent;}
.link-arrow:hover{border-bottom-color:var(--clay);}

/* ── 5. SPEC CARD (hero demo of the parse — pure CSS, no image) ───────────── */
.spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:var(--s5);position:relative;max-width:380px;justify-self:end;}
@media(max-width:840px){.spec{justify-self:stretch;max-width:none;}}
.spec::before{content:'';position:absolute;inset:9px;border:1.5px dashed var(--line-2);border-radius:12px;pointer-events:none;}
.spec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s4);}
.spec-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.spec-name{font-family:var(--serif);font-size:1.5rem;line-height:1.1;margin:.1rem 0 .15rem;}
.spec-brand{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.spec-meter-row{display:flex;align-items:center;gap:var(--s4);margin:var(--s4) 0;
  padding:var(--s4) 0;border-block:1px solid var(--line);}
.spec-rows{display:grid;gap:.4rem;margin:var(--s4) 0 0;font-family:var(--mono);font-size:.8rem;}
.spec-rows .r{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);}
.spec-rows .r b{color:var(--ink);font-weight:600;}

/* ── 6. SECTION BANDS ────────────────────────────────────────────────────── */
.band{width:100vw;margin-left:calc(50% - 50vw);padding:clamp(2.4rem,5vw,3.6rem) 0;}
.band.alt{background:var(--paper-2);border-block:1px solid var(--line);}
.band-inner{width:min(1120px,93vw);margin:0 auto;}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s5);flex-wrap:wrap;}
.band-head p{margin:.4rem 0 0;color:var(--muted);max-width:46ch;}
.seeall{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--clay);padding-bottom:2px;
  display:inline-flex;align-items:center;min-height:44px;}

/* ── 7. TIER GLYPHS (locked mark — each shape describes its tier) ─────────── */
/* meaning is NEVER color-only: glyph + tier NAME + plain-English line always shown */
.gly{width:14px;height:14px;border-radius:50%;flex:0 0 auto;position:relative;}
.gly-pure{background:var(--pure-g);box-shadow:inset 0 0 0 1px #00000018;}                 /* solid disc      */
.gly-bodyp{background:conic-gradient(from -40deg,var(--surface) 0 17%,var(--bodyp-g) 17% 100%);box-shadow:inset 0 0 0 1px #00000018;} /* notch */
.gly-natdom{background:conic-gradient(var(--natdom-g) 0 95%,#d3c9b4 95% 100%);box-shadow:inset 0 0 0 1px #00000018;} /* ~95% fill */
.gly-excl{background:transparent;box-shadow:inset 0 0 0 2px var(--excl-g);}               /* hollow ring     */
.gly-excl::after{content:'';position:absolute;inset:50% 1.5px auto 1.5px;height:2px;background:var(--excl-g);transform:translateY(-50%) rotate(-45deg);border-radius:2px;}
.gly-lg{width:18px;height:18px;}
.gly-on-dark{box-shadow:inset 0 0 0 1px #ffffff40;}  /* glyph on dark chips */

/* ── 8. FIBER METER (conic ring; hole punched with radial-gradient) ──────── */
.meter{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:radial-gradient(closest-side, var(--surface) 76%, transparent 77%),
            conic-gradient(var(--ring) calc(var(--pct)*1%), #20140814 0);}
.meter-num{position:relative;z-index:1;font-weight:700;font-size:.78rem;line-height:1;color:var(--ink);font-family:var(--sans);}
.meter-num i{font-style:normal;font-size:.62em;color:var(--muted);margin-left:.5px;}
.meter-lg{width:84px;height:84px;
  background:radial-gradient(closest-side, var(--paper) 77%, transparent 78%),
            conic-gradient(var(--ring) calc(var(--pct)*1%), #20140814 0);}
.meter-lg .meter-num{font-size:1.28rem;}
.meter-cap{font-family:var(--mono);font-size:.62rem;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.meter-wrap{display:flex;align-items:center;gap:.5rem;}

/* ── 9. PRODUCT CARD (most-reused unit) ──────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);}
@media(min-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:var(--s5);}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2);}
.card[hidden]{display:none;}
.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%;}
.thumb{position:relative;aspect-ratio:4/5;background:var(--tint,#ece7dd);overflow:hidden;display:grid;place-items:center;}
.thumb::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0000 0 9px,#00000007 9px 10px);pointer-events:none;}
.thumb:has(img)::after{display:none;} /* hatch texture is for empty placeholder tiles, never over photography */
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease;} /* top-anchored: tall editorial shots crop at the hem, never the head */
.card:hover .thumb img{transform:scale(1.05);}
.thumb-ph{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.85;}
.tier-tab{position:absolute;top:.6rem;left:.6rem;display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.26rem .62rem .26rem .5rem;font-size:.76rem;font-weight:600;box-shadow:var(--sh-1);z-index:2;}
.at-retailer{position:absolute;bottom:.6rem;left:.6rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:#fffdf8e8;border:1px solid var(--line);border-radius:var(--r-pill);padding:.24rem .6rem;z-index:2;}
.view-hint{position:absolute;bottom:.6rem;right:.6rem;font-weight:600;font-size:.82rem;color:var(--surface);background:var(--ink);
  border-radius:var(--r-pill);padding:.3rem .7rem;opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;z-index:2;}
.card:hover .view-hint{opacity:1;transform:translateY(0);}
.card .body{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.card .brand{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.card .name{font-weight:600;font-size:1.04rem;line-height:1.25;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-top:.3rem;}
.price{font-weight:700;font-size:1.32rem;color:var(--ink);letter-spacing:-.01em;}     /* second-loudest after image */
.price-stale{font-weight:600;font-size:.9rem;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem;}
.price-stale::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--natdom-g);flex:0 0 auto;}
.tier-line{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted);
  padding-top:.45rem;border-top:1px solid var(--line);margin-top:.2rem;flex-wrap:wrap;}
.tier-line b{color:var(--ink);font-weight:600;}
.tag-cell{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cell);background:var(--cell-bg);
  border:1px solid #e3d2a6;border-radius:var(--r-pill);padding:.1rem .45rem;font-weight:600;}

/* ── 10. SHOP — rail (one unified GET form) + toolbar + empty state ──────── */
.shop{display:grid;grid-template-columns:1fr;gap:1.3rem;align-items:start;}
@media(min-width:860px){.shop{grid-template-columns:268px 1fr;gap:2rem;}}
.results{min-width:0;}

.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin:.4rem 0 1.4rem;}
.page-head h1{font-size:clamp(1.45rem,5.5vw,2.7rem);overflow-wrap:break-word;}
.page-head>div{min-width:0;}
.page-head .sub{color:var(--muted);margin:.35rem 0 0;}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  margin:0 0 1.2rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);}
.count{margin:0;color:var(--ink);font-size:.98rem;}
.count strong{font-weight:700;}
.count .sub{color:var(--muted);}
.sortwrap{display:inline-flex;align-items:center;gap:.5rem;}
.sortwrap label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.select{appearance:none;-webkit-appearance:none;min-height:44px;border:1.5px solid var(--line-2);background:#fffdf8;color:var(--ink);
  border-radius:var(--r-pill);padding:0 2.2rem 0 1rem;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b5346' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;}
.select:hover{border-color:var(--ink);}

.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;}
@media(min-width:860px){.rail{position:sticky;top:calc(var(--header-h) + .8rem);}}
.rail-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line);}
.rail-h .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600;}
.rail-h .clear{font-size:.82rem;color:var(--muted);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line-2);}
.rail-h .clear:hover{color:var(--clay);border-color:var(--clay);}
.rail-body{padding:1.05rem 1.1rem 0;}
.fgroup{margin:0 0 1.15rem;}
.fgroup>.lbl{display:block;font-family:var(--mono);font-weight:600;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 .55rem;}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.chip{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;border:1.5px solid var(--line-2);
  background:#fffdf8;color:var(--ink);border-radius:var(--r-pill);padding:0 .9rem;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:border-color .12s ease,background .12s ease,color .12s ease;}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.chip:hover{border-color:var(--ink);}
.chip:has(input:checked){background:var(--ink);color:var(--surface);border-color:var(--ink);}
.chip:has(input:checked) .gly{box-shadow:inset 0 0 0 1px #ffffff40;}
.chip:has(input:focus-visible){outline:2px solid var(--click);outline-offset:2px;}
/* cellulosics toggle */
.switch{display:flex;align-items:center;gap:.6rem;min-height:44px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--ink);}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch .track{width:42px;height:24px;border-radius:999px;background:#d4ccbd;position:relative;flex:0 0 auto;transition:background .15s ease;}
.switch .knob{position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000040;transition:transform .15s ease;}
.switch:has(input:checked) .track{background:var(--pure-g);}
.switch:has(input:checked) .knob{transform:translateX(18px);}
.switch:has(input:focus-visible) .track{outline:2px solid var(--click);outline-offset:2px;}
.hint{font-size:.8rem;color:var(--muted);margin:.45rem 0 0;}
.more{border-top:1px dashed var(--line-2);margin-top:.2rem;}
.more>summary{cursor:pointer;font-family:var(--mono);font-weight:600;font-size:.7rem;color:var(--ink);text-transform:uppercase;letter-spacing:.1em;list-style:none;padding:.9rem 0;display:flex;align-items:center;gap:.5rem;}
.more>summary::-webkit-details-marker{display:none;}
.more>summary::before{content:'+';font-size:1.1em;color:var(--clay);}
.more[open]>summary::before{content:'\2013';}
.more-form{display:flex;flex-direction:column;gap:.7rem;padding-bottom:.3rem;}
.more-form label.fld{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--muted);}
.more-form .select,.more-form input[type=number]{width:100%;min-height:44px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:0 .7rem;font:inherit;background:#fffdf8;color:var(--ink);font-weight:500;}
.more-form .select{padding-right:2rem;}
.excl{border:0;padding:0;margin:.2rem 0 0;}
.excl legend{font-size:.8rem;font-weight:600;color:var(--muted);padding:0;margin-bottom:.3rem;}
.cbx{display:flex;align-items:center;gap:.5rem;min-height:40px;font-size:.92rem;font-weight:500;color:var(--ink);cursor:pointer;}
.cbx input{width:19px;height:19px;accent-color:var(--ink);cursor:pointer;}
.rail-actions{display:flex;gap:.5rem;padding:1rem 1.1rem;border-top:1px solid var(--line);background:#fcf8f0;position:sticky;bottom:0;}
.rail-actions .btn{min-height:46px;font-size:.95rem;flex:1;}
.rail-actions .btn.secondary{flex:0 0 auto;}
.autohint{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);text-align:center;padding:0 1.1rem .9rem;}
/* mobile filter drawer (no-JS) */
.filt-toggle-cb{position:absolute;opacity:0;pointer-events:none;}
.filters-toggle-label{display:none;}
@media(max-width:859px){
  .filters-toggle-label{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
    font-weight:600;background:var(--ink);color:var(--surface);border-radius:var(--r-pill);padding:0 1.3rem;cursor:pointer;width:100%;}
  .rail{display:none;margin-top:.9rem;}
  #filt-toggle:checked ~ .rail{display:block;}
}
/* empty state */
.empty{display:none;text-align:center;background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:3rem 1.5rem;box-shadow:var(--sh-1);}
.empty.show{display:block;}
.empty .mk{width:44px;height:44px;border-radius:50%;border:2px solid var(--excl-g);margin:0 auto 1rem;position:relative;}
.empty .mk::after{content:'';position:absolute;inset:50% 6px auto 6px;height:2px;background:var(--excl-g);transform:translateY(-50%) rotate(-45deg);}
.empty h2{font-size:1.4rem;margin:0 0 .4rem;}
.empty p{color:var(--muted);max-width:42ch;margin:0 auto 1.2rem;}

/* ── 11. PRODUCT DETAIL ──────────────────────────────────────────────────── */
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:.2rem 0 1.2rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--ink);}
.crumb .sep{opacity:.5;}
.crumb b{color:var(--ink);font-weight:600;}
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(1.4rem,4vw,2.8rem);align-items:start;}
@media(max-width:720px){.product{grid-template-columns:1fr;}}
.gallery{position:sticky;top:calc(var(--header-h) + 1rem);}
@media(max-width:720px){.gallery{position:static;}}
.gmain{position:relative;aspect-ratio:4/5;background:#e8e3d6;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:grid;place-items:center;box-shadow:var(--sh-1);}
.gmain::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0000 0 11px,#00000007 11px 12px);}
.gmain:has(img)::after{display:none;}
.gmain img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--tint,#ece7dd);} /* PDP shows the WHOLE photo, letterboxed on the fiber tint (own background so the placeholder never peeks through) */
.gmain .ph{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.85;}
.gthumbs{display:flex;gap:.6rem;margin-top:.7rem;}
.gthumb{flex:1;aspect-ratio:1;background:#ece4d6;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;display:grid;place-items:center;cursor:pointer;position:relative;}
.gthumb::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0000 0 9px,#00000007 9px 10px);}
.gthumb.on{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);}
.gthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;}
.gthumb:has(img)::after{display:none;} /* hatch texture is for placeholders only */
.gthumb span{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);position:relative;}
.brand-line{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;}
.brand-line b{color:var(--ink);font-weight:600;}
.ptitle{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 1rem;line-height:1.05;}
.tier-row{display:flex;align-items:center;gap:1.05rem;padding:1rem 0;border-block:1px solid var(--line);}
.tier-meta .badge-big{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.1rem;color:var(--ink);text-decoration:none;}
.tier-meta .short{color:var(--muted);font-size:.95rem;margin:.15rem 0 0;}
.tier-meta .cap{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:.35rem 0 0;}
.explain{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ring,var(--natdom-g));border-radius:var(--r-md);
  padding:1.05rem 1.2rem;margin:1.2rem 0;font-size:1.06rem;line-height:1.55;box-shadow:var(--sh-1);}
.explain b{font-weight:600;}
/* THE money button (indigo — the only indigo on the site) */
.buy-block{margin:1.3rem 0 .2rem;}
.buy{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:66px;
  background:var(--click);color:var(--click-on);text-decoration:none;font-weight:600;font-size:1.14rem;
  padding:0 1.4rem;border-radius:var(--r-md);box-shadow:0 2px 4px #20140822,0 16px 34px -12px #283a6b6b;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;}
.buy:hover{background:var(--click-hi);transform:translateY(-2px);box-shadow:0 4px 9px #2014082e,0 22px 44px -12px #283a6b85;}
.buy:active{transform:translateY(0);}
.buy .l{display:inline-flex;align-items:center;gap:.55rem;}
.buy .ext{font-size:.92em;}
.buy .price{font-size:1.34rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;color:var(--click-on);} /* explicit: the bare card .price rule sets ink and would beat inheritance */
.cta-disclosure{font-size:.8rem;color:var(--muted);margin:.55rem 0 0;display:flex;align-items:flex-start;gap:.4rem;}
.cta-disclosure::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--click);margin-top:.5rem;flex:0 0 auto;}
.ship{font-size:.86rem;color:var(--muted);margin:.5rem 0 0;}
.sec-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:1.8rem 0 .7rem;}
.primary{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:.95rem;color:var(--muted);}
.fiber-pill{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;background:var(--pure-bg);color:var(--pure);
  border:1px solid #bcdcc4;border-radius:var(--r-pill);padding:.18rem .6rem;font-weight:600;}
.components{width:100%;border-collapse:collapse;margin:.2rem 0 .5rem;}
.components th,.components td{text-align:left;padding:.65rem .55rem;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem;}
.components th{font-family:var(--mono);color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.components td:first-child{width:30%;}
.components td strong{font-weight:600;}
.tag{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--mono);font-size:.7rem;padding:.16rem .5rem;border-radius:6px;margin:0 .25rem .25rem 0;font-weight:600;white-space:nowrap;}
.tag.nat{background:var(--pure-bg);color:var(--pure);}
.tag.syn{background:var(--syn-bg);color:var(--syn);}
.tag.cell{background:var(--cell-bg);color:var(--cell);}
.tag.syn::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--syn);}
.synth{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--syn);border-radius:var(--r-md);padding:1rem 1.15rem;box-shadow:var(--sh-1);margin:.3rem 0;}
.synth ul{margin:.2rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem;}
.synth li{display:flex;gap:.6rem;align-items:baseline;font-size:.98rem;}
.synth li .amt{font-family:var(--mono);font-weight:700;color:var(--syn);font-size:.85rem;flex:0 0 auto;}
.synth li .where{color:var(--muted);}
.cell-note{display:flex;gap:.7rem;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.9rem 1.1rem;margin:1.4rem 0 0;font-size:.92rem;color:var(--muted);}
.cell-note .ic{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--cell) 0 80%,#e3d2a6 80% 100%);box-shadow:inset 0 0 0 1px #00000018;flex:0 0 auto;margin-top:.1rem;}
.cell-note b{color:var(--ink);font-weight:600;}
/* mobile sticky buy bar */
.buybar{display:none;}
@media(max-width:720px){
  main.wrap{padding-bottom:6.5rem;}
  .buybar{display:flex;align-items:center;gap:.7rem;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px #20140855;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));}
  .buybar .bb-tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);flex:0 0 auto;}
  .buybar .buy{min-height:52px;font-size:1rem;border-radius:var(--r-sm);}
  .buybar .buy .price{font-size:1.15rem;}
}

/* ── 12. METHODOLOGY / PROSE (restyled from original) ────────────────────── */
.prose{max-width:70ch;}
.prose h2{margin-top:1.9rem;}
.tier-card{border:1px solid var(--line);border-top:4px solid var(--line);border-radius:var(--r-md);
  padding:1rem 1.2rem;margin:.9rem 0;background:var(--surface);box-shadow:var(--sh-1);}
.tier-card h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-family:var(--serif);font-weight:600;}
.tier-card h3 .gly{width:16px;height:16px;}
.tier-card p{margin:0;color:var(--muted);}
.tier-card.pure{border-top-color:var(--pure-g);}
.tier-card.body_pure{border-top-color:var(--bodyp-g);}
.tier-card.natural_dominant{border-top-color:var(--natdom-g);}
.tier-card.excluded{border-top-color:var(--excl-g);}
.group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0;}
.group-grid .g{border:1px solid var(--line);border-radius:var(--r-md);padding:1rem;background:var(--surface);box-shadow:var(--sh-1);}
.group-grid .g h3{font-family:var(--serif);margin:0 0 .3rem;}
.notice{background:var(--natdom-bg);border:1px solid #e3d2a6;color:var(--natdom);padding:.85rem 1.05rem;border-radius:var(--r-md);}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;}
  .card,.btn,.buy,.thumb img,.view-hint{transition:none;}
}

/* ── 13. CLOSING CREED (home) — patched in: present in the Homepage reference
       artifact but missing from the consolidated handoff stylesheet. ───────── */
.creed{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,5vw,3.5rem);align-items:center;}
.creed-q{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.18;font-weight:500;margin:0;}
.creed-q em{font-style:italic;color:var(--clay);}
.creed ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);}
.creed li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink);font-size:.98rem;}
.creed li::before{content:'';width:9px;height:9px;border-radius:2px;background:var(--pure-g);margin-top:.45rem;flex:0 0 auto;}
@media (max-width:840px){ .creed{grid-template-columns:1fr;} }
/* price-na (no price in feed) shares the stale-price treatment */
.price-na{}
/* tier badge link (spec card / inline) — patched in from the Homepage artifact:
   meaning is never color-only (glyph + name, links to methodology). */
.tierbadge{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;
  color:var(--ink);text-decoration:none;}
.tierbadge:hover{text-decoration:underline;}
/* home tier band — patched in: present in the Homepage artifact but missing
   from the consolidated handoff stylesheet */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4);}
.tier-card .ex{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed var(--line-2);}
.tier-card .ex b{color:var(--ink);font-weight:600;}
.chip .gly{box-shadow:inset 0 0 0 1px #ffffff40;}
/* shop pager */
.pager{display:flex;justify-content:center;align-items:center;gap:.35rem;margin-top:var(--s6);flex-wrap:wrap;}
.pager a,.pager .cur{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.6rem;
  padding:0 .65rem;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem;}
.pager a:hover{border-color:var(--ink);}
.pager .cur{background:var(--ink);color:var(--surface);border-color:var(--ink);}
.pager .gap{color:var(--muted);padding:0 .15rem;}
/* label-checker form */
.checkform textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:.7rem .8rem;resize:vertical;}
.checkform textarea:focus-visible{outline:2px solid var(--click);outline-offset:1px;}
.checkform .cbx{display:inline-flex;gap:.45rem;align-items:center;margin-top:.6rem;}

/* ---- review fixes (2026-06-04) ---- */
/* mobile header: the 6-link nav cannot share one row with the logo at phone
   widths — wrap to its own horizontally-scrollable row */
@media (max-width:720px){
  .header-row{flex-wrap:wrap;row-gap:.1rem;padding-top:.5rem;padding-bottom:.5rem;}
  /* WRAP, don't scroll: every link visible — half a nav hidden off-screen
     with no scroll affordance is a nav users never find */
  .nav{width:100%;display:flex;flex-wrap:wrap;gap:.15rem .95rem;font-size:.88rem;row-gap:.1rem;}
}
/* hero spec card: keep grid children shrinkable so it never overflows 93vw */
.spec, .spec *{min-width:0;}
@media (max-width:420px){ .spec-meter-row{gap:.6rem;} }
/* card gender tag */
.fit-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.05rem .45rem;
  margin-left:.4rem;vertical-align:middle;}
/* collapsible retailer description */
details.retailer-copy-d>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;}
details.retailer-copy-d>summary::-webkit-details-marker{display:none;}
details.retailer-copy-d>summary::after{content:'+';color:var(--clay);font-size:1.1em;}
details.retailer-copy-d[open]>summary::after{content:'\2013';}
/* companies directory cards */
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5);margin:1.4rem 0 1rem;}
.co-card{display:flex;flex-direction:column;gap:.45rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:1.4rem 1.5rem 1.5rem;}
.co-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.2rem;}
.co-logo{width:56px;height:56px;object-fit:contain;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;padding:4px;flex:0 0 auto;}
.co-card h2{font-size:1.45rem;margin:0;}
.co-stat{margin:0;}
.co-price{margin:0;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;}
.co-fibers{margin:.2rem 0 .8rem;}
.co-blurb{font-family:var(--serif);font-style:italic;font-size:1.04rem;line-height:1.45;color:var(--ink);
  margin:.1rem 0 .55rem;padding-left:.85rem;border-left:3px solid var(--clay);}
/* placeholder labels are for EMPTY tiles only: transparent-background product
   PNGs let text behind the photo shine through its clear regions */
.thumb:has(img) .thumb-ph{display:none;}
.gmain:has(img) .ph{display:none;}