/* ============================================================
   SILLAGE · v4 — the dark vitrine
   A spotlit gallery at night. Each specimen is a glass flacon
   that reveals the real site bottled inside; the house stays
   restrained and dark so the specimens BLOOM (Law III) and the
   warm spotlight against cool dark gives depth (Law V).
   Shell = English / French. Soul (the analysis) = Chinese.
   Method is fixed. Light is the luxury.
   ============================================================ */
:root{
  /* — the gallery: deep neutral dark, a warm spotlight from above — */
  --ground:#101113;        /* the wall */
  --ground-lit:#1b1d22;    /* where the light falls */
  --ground-deep:#070809;   /* the corners */
  --text:#ece7dc;          /* bone — the catalogue ink, on dark */
  --text-soft:#9d9a90;
  --text-faint:#615f58;
  --prose:#cdc8bd;         /* body reading tone */
  --hair:rgba(236,231,220,.12);
  --hair-strong:rgba(236,231,220,.26);
  --label:#efe9da;         /* letterpress label cream */
  /* the reagent — the ONLY chromatic event. Each specimen overrides it. */
  --reagent:#caa24b;
  --reagent-soft:color-mix(in oklab, var(--reagent) 30%, transparent);
  --fr:"Fraunces",Georgia,serif;
  --mono:"PlexMono",ui-monospace,Menlo,monospace;
  --serif:"Bitter",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --mar:clamp(28px,5vw,76px);
}
*{ margin:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(80% 50% at 50% -2%, rgba(196,162,75,.10) 0%, transparent 46%),
    radial-gradient(140% 120% at 50% 16%, var(--ground-lit) 0%, var(--ground) 54%, var(--ground-deep) 100%) fixed;
  color:var(--text); font-family:var(--serif);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* fine grain — film, not gloss */
body::after{
  content:""; position:fixed; inset:0; z-index:9990; pointer-events:none;
  background:radial-gradient(rgba(236,231,220,.022) 1px, transparent 1.5px) 0 0 / 5px 5px;
  opacity:.7;
}
::selection{ background:var(--reagent); color:var(--ground); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---- shared chrome ---- */
.bar{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:22px var(--mar); font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-soft); }
.bar .mk{ display:flex; align-items:center; gap:12px; }
.bar .glyph{ font-family:var(--fr); font-style:italic; font-size:15px; letter-spacing:0; color:var(--text); }
.bar a:hover{ color:var(--text); }
.wrap{ max-width:1240px; margin:0 auto; padding:0 var(--mar); }
.measure{ max-width:60ch; }

/* ---- type ---- */
.klabel{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-soft); }
.display{ font-family:var(--fr); font-weight:330; letter-spacing:-.02em; line-height:.94; }
.display em{ font-style:italic; font-weight:300; }
.serif-it{ font-family:var(--fr); font-style:italic; }
.rule{ height:1px; background:var(--hair); border:0; }

/* ---- spectral band — the specimen's reagent signature ---- */
.band{ display:flex; height:5px; width:100%; overflow:hidden; }
.band > i{ flex:1 1 0; }

/* ---- vertical rhythm: one movement per breath ---- */
.movement{ padding-block:clamp(96px,16vh,210px); border-top:1px solid var(--hair); }
.movement:first-of-type{ border-top:0; }
.sec-no{ display:flex; gap:18px; align-items:baseline; margin-bottom:clamp(46px,8vh,104px); }
.sec-no b{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--reagent); font-weight:400; }
.sec-no h2{ font-family:var(--fr); font-weight:300; font-size:clamp(1.9rem,4.2vw,3rem); }
.sec-no h2 em{ font-style:italic; }
.sec-no .zh{ margin-left:auto; align-self:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--text-faint); text-transform:uppercase; }

/* ============================================================
   I · LE SPECTRE — the fixed six channels.
   ============================================================ */
.spectre{ display:grid; max-width:1040px; }
.chan{ display:grid; grid-template-columns:200px 1fr; gap:clamp(22px,5vw,72px);
  padding:clamp(28px,4.4vh,46px) 0; border-top:1px solid var(--hair); align-items:start; }
.chan:last-child{ border-bottom:1px solid var(--hair); }
.chan .ch-id{ display:flex; flex-direction:column; gap:9px; }
.chan .ch-zh{ font-family:var(--fr); font-size:1.9rem; font-weight:340; line-height:1; color:var(--text); }
.chan .ch-zh em{ font-style:italic; }
.chan .ch-lat{ font-family:var(--mono); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-faint); }
.chan .ch-tick{ width:26px; height:5px; margin-top:3px; box-shadow:0 0 12px -1px var(--reagent); }
.chan .ch-read{ font-size:clamp(1.02rem,1.45vw,1.2rem); line-height:1.74; color:var(--prose); max-width:52ch; }
.chan .ch-read em{ font-family:var(--fr); font-style:italic; color:var(--text); }
.chan .ch-tok{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--text-soft); margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 20px; }
.chan .ch-tok span::before{ content:"·"; color:var(--reagent); margin-right:7px; }

/* ============================================================
   II · LA CONVERGENCE — N clues, one verdict.
   ============================================================ */
.converge{ max-width:980px; margin:0 auto; }
.clues{ display:grid; gap:0; position:relative; }
.clue{ display:grid; grid-template-columns:108px 1fr; gap:clamp(18px,3vw,46px); align-items:baseline;
  padding:24px 0; border-top:1px solid var(--hair); }
.clue:first-child{ border-top:0; }
.clue .src{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); padding-top:6px; }
.clue .src b{ display:block; color:var(--reagent); font-weight:400; font-size:11px; margin-bottom:4px; }
.clue .txt{ font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.7; color:var(--prose); }
.clue .txt em{ font-family:var(--fr); font-style:italic; color:var(--text); }
.converge .arrow{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--reagent); padding:34px 0 0; }
.verdict-box{ text-align:center; padding:clamp(34px,6vh,60px) 0 0; }
.verdict-box .cat{ font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--text-faint); }
.verdict-box .vd{ font-family:var(--fr); font-weight:330; font-size:clamp(1.7rem,4.4vw,3.1rem); line-height:1.16; letter-spacing:-.01em; margin-top:18px; color:var(--text); }
.verdict-box .vd em{ font-style:italic; color:var(--reagent); }
.verdict-box .vd b{ font-weight:330; border-bottom:1px solid var(--reagent-soft); }

/* ============================================================
   III · LE SPÉCIMEN — the single irreducible fragment.
   ============================================================ */
.specimen{ max-width:1100px; margin:0 auto; }
.specimen .sp-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:14px;
  border-bottom:1px solid var(--hair); padding-bottom:18px; margin-bottom:34px; }
.specimen .sp-head .nm{ font-family:var(--fr); font-style:italic; font-size:clamp(1.4rem,2.6vw,2.1rem); }
.specimen .sp-head .no{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft); }
.specimen .glass{ position:relative; border:1px solid var(--hair-strong); background:#0a0b0d; overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5); }
.specimen .glass.live{ aspect-ratio:16/9; }
.specimen .glass iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.specimen .glass img{ width:100%; height:auto; display:block; }
.specimen .sp-cap{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px; max-width:60ch; }
.specimen .sp-cap .why{ font-family:var(--fr); font-style:italic; font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.5; color:var(--text); }
.specimen .sp-cap .how{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }

/* ============================================================
   II · LES INDICES — La Distillation.
   Many visual clues fan DOWN into a category node; nodes thread
   down a central spine into the single verdict. The convergence
   is DRAWN (SVG connector lines, stroke-dashoffset) as you scroll
   — the relation is felt, not labelled. Evidence distilled to a
   drop, not a grid of cards.
   ============================================================ */
.distil{ position:relative; max-width:1060px; margin:0 auto; }
.idx-lead{ text-align:center; font-family:var(--fr); font-style:italic; font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--text-soft); max-width:40ch; margin:0 auto clamp(36px,6vh,72px); line-height:1.55; position:relative; z-index:2; }
.dlinks{ position:absolute; left:0; top:0; pointer-events:none; z-index:0; overflow:visible; }
.dlinks path{ fill:none; stroke:var(--reagent); stroke-width:1; opacity:.5;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.3s var(--ease); }
.dlinks g.drawn path{ stroke-dashoffset:0; }
.dcat{ position:relative; z-index:1; padding:clamp(24px,4vh,48px) 0 clamp(56px,8vh,100px); }
.dclues{ display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:clamp(22px,3vw,50px); }
.dclue{ width:clamp(186px,21vw,242px); }
.dclue .crop{ aspect-ratio:4/3; border:1px solid var(--hair-strong); background-color:#0a0b0d; background-repeat:no-repeat;
  box-shadow:0 18px 32px rgba(0,0,0,.42); transition:border-color .55s var(--ease), transform .55s var(--ease); }
.dclue:hover .crop{ border-color:var(--reagent); transform:translateY(-5px); }
.dclue .tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-top:12px; }
.dclue .tag b{ color:var(--reagent); font-weight:400; }
.dclue .nt{ font-size:.93rem; line-height:1.56; color:var(--prose); margin-top:6px; }
.dclue .nt em{ font-family:var(--fr); font-style:italic; color:var(--text); }
.dnode{ position:relative; text-align:center; margin-top:clamp(48px,7vh,92px); }
.dnode::before{ content:""; position:absolute; left:50%; top:-10px; transform:translateX(-50%); width:11px; height:11px; border-radius:50%;
  background:var(--reagent); box-shadow:0 0 18px 2px var(--reagent); }
.dnode .cx{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--reagent); margin-top:24px; }
.dnode h3{ font-family:var(--fr); font-weight:330; font-size:clamp(1.55rem,3.4vw,2.4rem); margin-top:10px; line-height:1.12; }
.dnode .dsum{ font-family:var(--fr); font-style:italic; color:var(--text-soft); font-size:clamp(1rem,1.5vw,1.2rem); max-width:34ch; margin:14px auto 0; line-height:1.5; }
.distil .verdict-box{ position:relative; z-index:1; margin-top:clamp(20px,3vh,40px); }
.distil .verdict-box::before{ content:""; position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:13px; height:13px; border-radius:50%;
  background:var(--reagent); box-shadow:0 0 24px 3px var(--reagent); }
@media(max-width:620px){ .dclue{ width:100%; max-width:300px; } .dlinks{ display:none; } }

/* ---- a large quiet line between movements ---- */
.aside{ text-align:center; padding:clamp(80px,13vh,170px) 0; }
.aside p{ font-family:var(--fr); font-style:italic; font-weight:300; font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.34; max-width:26ch; margin:0 auto; color:var(--text); }
.aside p::first-letter{ color:var(--reagent); }

/* ============================================================
   bottle HERO — glass specimen on the left of the title
   ============================================================ */
.hero{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,84px); align-items:center; min-height:100svh; padding-block:120px 60px; }
.hero h1{ font-size:clamp(3.6rem,10vw,7.4rem); margin:0 0 8px -.03em; }
.hero .tag{ font-family:var(--fr); font-style:italic; font-size:clamp(1.05rem,2.1vw,1.5rem); color:var(--text-soft); }
.hero .verdict{ font-family:var(--fr); font-weight:340; font-size:clamp(1.18rem,1.9vw,1.55rem); line-height:1.5; max-width:30ch; margin:30px 0; }
.hero .verdict b{ font-style:italic; font-weight:500; border-bottom:1px solid var(--reagent-soft); }
.hero .band{ max-width:300px; margin:26px 0 0; }
.meta{ display:flex; gap:34px; margin-top:26px; flex-wrap:wrap; }
.meta .klabel{ display:block; margin-bottom:5px; }
.meta span.v{ font-family:var(--fr); font-style:italic; font-size:15px; }

/* the spotlit glass on its plinth */
.stage{ display:flex; align-items:center; justify-content:center; position:relative; }
.stage::before{ content:""; position:absolute; width:78%; height:78%; border-radius:50%;
  background:radial-gradient(closest-side, var(--reagent-soft), transparent 72%); filter:blur(8px); opacity:.5; z-index:0; }
.stage .flacon{ position:relative; z-index:1; width:min(300px,82%); height:auto;
  filter:drop-shadow(0 40px 44px rgba(0,0,0,.6)); }

/* ---- reveal ---- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ---- footer ---- */
.foot{ border-top:1px solid var(--hair); padding:46px var(--mar); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); }
.foot a{ border-bottom:1px solid transparent; transition:border-color .4s, color .4s; }
.foot a:hover{ color:var(--text); border-color:var(--reagent); }

@media(max-width:860px){
  .hero{ grid-template-columns:1fr; gap:40px; }
  .chan{ grid-template-columns:1fr; gap:14px; }
  .chan .ch-id{ flex-direction:row; align-items:baseline; gap:14px; }
  .clue{ grid-template-columns:1fr; gap:8px; }
}