/* GaiaTara — one committed dark world, per the September 2026 brief:
   deep forest ground, bone-white filaments, warm bark, amber from the
   Cordyceps, and a luminous algae green kept for the microalgae alone. */
:root{
  color-scheme: dark;
  --ground:#0A1810;
  --forest:#10261A;
  --earth:#16110B;
  --bark:#6B5238;
  --bone:#EDE6D6;
  --bone-72:rgba(237,230,214,.72);
  --bone-muted:rgba(237,230,214,.64);
  --bone-16:rgba(237,230,214,.16);
  --amber:#D99A3A;
  --algae-ground:#0E3027;
  --algae:#8EDB9B;
  --line:var(--bone-16);
  --cell:#0C1C13;
  --tone:var(--amber);
  --disp:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --gut:clamp(18px, 5vw, 72px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--bone); font-family:var(--sans);
  font-weight:300; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber); outline-offset:4px}
.wrap{width:100%; max-width:1320px; margin:0 auto; padding-inline:var(--gut)}
.skip{position:absolute; left:12px; top:-60px; z-index:100; padding:10px 14px; background:var(--bone); color:var(--ground);
  font-family:var(--mono); font-size:12px; text-decoration:none}
.skip:focus{top:12px}

/* The pointer trail (assets/js/fluid.js). Fixed over the page, never clickable,
   screen blend so it can only lighten. Below the mobile sheet, which is opaque. */
.fluid{position:fixed; inset:0; width:100%; height:100%; z-index:50; pointer-events:none;
  mix-blend-mode:screen; opacity:.36}
@media (prefers-reduced-motion:reduce){ .fluid{display:none} }

/* ---------------- bar, brand, nav ---------------- */
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:22px}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:34px; height:34px}
.mark{font-family:var(--disp); font-weight:400; font-size:18px; letter-spacing:.2em}
.mark span{color:var(--amber)}
.nav{display:flex; align-items:center; gap:clamp(16px, 2vw, 28px)}
.nav a{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--bone-72); padding-block:6px; border-bottom:1px solid transparent; transition:color .25s, border-color .25s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone); border-bottom-color:var(--amber)}
.menu-btn,.sheet-close{display:none; background:none; border:1px solid var(--bone-16); color:var(--bone); cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:10px 14px}
.sheet-close{display:inline-flex}
@media (max-width:1080px){ .nav{display:none} .menu-btn{display:inline-flex} }

.top{position:sticky; top:0; z-index:40; background:rgba(10,24,16,.9); border-bottom:1px solid var(--bone-16);
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2)}
.top .bar{padding-block:14px}

.sheet{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; gap:28px; overflow-y:auto;
  padding:14px var(--gut) 32px; background:var(--ground); transform:translateY(-100%); visibility:hidden;
  transition:transform .5s cubic-bezier(.76,0,.24,1), visibility 0s .5s}
.sheet[data-open="true"]{transform:none; visibility:visible; transition:transform .5s cubic-bezier(.76,0,.24,1)}
.sheet-top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px}
.sheet nav{display:grid}
.sheet nav a{padding:12px 0; border-bottom:1px solid var(--bone-16); text-decoration:none;
  font-family:var(--disp); font-weight:300; font-size:clamp(28px, 7vw, 40px); letter-spacing:-.015em}
.sheet nav a[aria-current="page"]{color:var(--amber)}
.sheet-mail{margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--bone-muted)}

/* ---------------- home hero ---------------- */
.hero{position:relative; overflow:hidden; min-height:clamp(620px, 94svh, 980px);
  display:grid; grid-template-rows:auto 1fr auto;
  background:radial-gradient(120% 90% at 72% 28%, #11291C 0%, #0A1810 58%, #07120C 100%)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero .bar,.hero-body,.hero-foot{position:relative; z-index:1}

.hero-body{align-self:end; padding-block:48px 36px}
.eyebrow{margin:0 0 20px; font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber)}
h1{margin:0; max-width:15ch; font-family:var(--disp); font-weight:300; font-variation-settings:"opsz" 144;
  font-size:clamp(40px, 6.6vw, 94px); line-height:1.02; letter-spacing:-.026em; text-wrap:balance}
h1 em{font-style:italic; color:var(--bone-72)}
.lede{margin:26px 0 0; max-width:52ch; font-size:clamp(16px, 1.25vw, 19px); color:var(--bone-72)}

.hero-foot{padding-block:0 22px;
  background:linear-gradient(to top, rgba(7,18,12,.94) 40%, rgba(7,18,12,0))}
.doors{display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--bone-16)}
.doors a{display:grid; grid-template-columns:1fr auto; row-gap:4px; align-items:baseline;
  padding:20px 22px 22px 0; text-decoration:none}
.doors a + a{padding-left:22px; border-left:1px solid var(--bone-16)}
.door-t{font-family:var(--disp); font-weight:300; font-size:clamp(24px, 2.2vw, 30px); letter-spacing:-.01em}
.door-a{font-family:var(--mono); color:var(--amber); transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.door-m{grid-column:1 / -1; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-muted)}
.doors a:hover .door-a,.doors a:focus-visible .door-a{transform:translateX(6px)}
.readout{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding-top:14px;
  border-top:1px solid var(--bone-16); font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--bone-muted)}
.stats b{font-weight:400; color:var(--bone); font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .doors{grid-template-columns:1fr}
  .doors a,.doors a + a{padding:16px 0; border-left:0}
  .doors a + a{border-top:1px solid var(--bone-16)}
}

/* ---------------- section heads ---------------- */
.lib{padding-block:clamp(64px, 9vw, 120px)}
.lib-head{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:20px 48px; align-items:end;
  margin-bottom:clamp(32px, 4vw, 52px)}
.lib-head h2{margin:0; font-family:var(--disp); font-weight:300; font-variation-settings:"opsz" 144;
  font-size:clamp(36px, 5vw, 64px); line-height:1; letter-spacing:-.024em; text-wrap:balance}
.lib-head p{margin:0; max-width:50ch; color:var(--bone-72)}
.kicker{display:block; margin:0 0 14px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--tone)}
@media (max-width:760px){ .lib-head{grid-template-columns:1fr} }
.lib-more{margin-top:28px}
.more-link{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--tone)}
.more-link:hover{color:var(--bone)}

/* ---------------- home species index ---------------- */
.species{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.species li{background:var(--cell)}
.species a{display:grid; gap:4px; align-content:start; height:100%; padding:20px 18px 22px; text-decoration:none; transition:background .3s}
.species a:hover{background:rgba(237,230,214,.04)}
.species a:hover .sp-n{color:var(--tone)}
.sp-n{font-family:var(--disp); font-weight:400; font-size:20px; letter-spacing:-.01em; transition:color .3s}
.sp-l{font-size:15px; color:var(--bone-72)}
.sp-l i{font-style:italic}
.sp-r{margin-top:10px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--tone)}

/* fungi: dark and earthen, amber */
.lib--fungi{--line:rgba(107,82,56,.45); --cell:#16110B; --tone:var(--amber); background:var(--earth)}
.lib--fungi .species{grid-template-columns:repeat(5, 1fr)}
@media (max-width:1100px){ .lib--fungi .species{grid-template-columns:repeat(2, 1fr)} }

/* microalgae: the palette turns to water and light */
.lib--algae{--line:rgba(142,219,155,.2); --cell:#0E3027; --tone:var(--algae);
  background:linear-gradient(var(--earth), var(--algae-ground) 220px)}
.lib--algae .species{grid-template-columns:repeat(3, 1fr)}
@media (max-width:900px){ .lib--algae .species{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:540px){ .lib--fungi .species,.lib--algae .species{grid-template-columns:1fr} }

/* ---------------- the chain ---------------- */
.chain{--tone:var(--amber); background:linear-gradient(var(--algae-ground), var(--ground) 200px)}
.chain--plain{background:var(--ground)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--bone-16)}
.steps li{position:relative; padding:22px 28px 0 0}
.steps li + li{padding-left:28px; border-left:1px solid var(--bone-16)}
.steps li + li::before{content:"→"; position:absolute; left:-9px; top:18px; padding:0 2px;
  background:var(--ground); font-family:var(--mono); color:var(--amber)}
.steps h3{margin:0 0 8px; font-family:var(--disp); font-weight:400; font-size:22px; letter-spacing:-.01em}
.steps p{margin:0; font-size:15.5px; color:var(--bone-72)}
@media (max-width:860px){
  .steps{grid-template-columns:1fr 1fr; row-gap:28px}
  .steps li:nth-child(3){padding-left:0; border-left:0}
  .steps li:nth-child(3)::before{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .steps li,.steps li + li{padding:18px 0 0; border-left:0}
  .steps li + li{border-top:1px solid var(--bone-16)}
  .steps li + li::before{display:none}
}

/* ---------------- inner page heads and sections ---------------- */
.page-head{padding-block:clamp(56px, 8vw, 110px) clamp(32px, 4vw, 52px)}
.page-head h1{font-size:clamp(38px, 5.4vw, 76px); max-width:17ch}
.section{padding-block:clamp(56px, 8vw, 104px); border-top:1px solid var(--bone-16)}
.prose{max-width:64ch}
.prose p{margin:0; color:var(--bone-72)}
.prose p + p{margin-top:1.05em}
.prose .first{font-family:var(--disp); font-weight:300; font-size:clamp(22px, 2.2vw, 30px); line-height:1.32; letter-spacing:-.01em; color:var(--bone)}

.flow{list-style:none; margin:0; padding:0; border-top:1px solid var(--bone-16); counter-reset:step}
.flow li{display:grid; grid-template-columns:minmax(0, .42fr) minmax(0, 1fr); gap:8px 40px; padding:22px 0; border-bottom:1px solid var(--bone-16)}
.flow h3{margin:0; font-family:var(--disp); font-weight:400; font-size:22px; letter-spacing:-.01em}
.flow p{margin:0; max-width:60ch; color:var(--bone-72)}
.flow--steps li{counter-increment:step}
.flow--steps h3::before{content:counter(step, decimal-leading-zero); display:block; margin-bottom:6px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--amber)}
@media (max-width:700px){ .flow li{grid-template-columns:1fr} }

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; padding:0; list-style:none}
.chips a{display:inline-block; padding:10px 14px; border:1px solid var(--bone-16); text-decoration:none; font-size:15px}
.chips a:hover{border-color:var(--amber); color:var(--amber)}
.chips i{font-style:italic}

/* ---------------- library cards ---------------- */
.cards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.card{display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); background:var(--cell); text-decoration:none; transition:background .3s}
.card:hover{background:rgba(237,230,214,.035)}
.card:hover .sp-n{color:var(--tone)}
.card-fig{position:relative; margin:0; aspect-ratio:1 / 1; border-right:1px solid var(--line); overflow:hidden}
.card-body{display:grid; align-content:start; gap:4px; padding:22px 22px 24px}
.card .sp-n{font-size:clamp(22px, 2vw, 27px); font-weight:300; letter-spacing:-.015em}
.card p{margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--bone-72)}
.card .sp-r{margin-top:14px}
.plate{position:absolute; inset:0; display:block; width:100%; height:100%}
.card-fig img,.frame img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover}
.card:hover .card-fig img{transform:scale(1.03)}
.card-fig img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }
@media (max-width:520px){
  .card{grid-template-columns:1fr}
  .card-fig{aspect-ratio:16 / 10; border-right:0; border-bottom:1px solid var(--line)}
}

/* ---------------- species page ---------------- */
.g-fungi{--line:rgba(107,82,56,.45); --cell:#16110B; --tone:var(--amber); background:var(--earth)}
.g-algae{--line:rgba(142,219,155,.2); --cell:#0E3027; --tone:var(--algae); background:var(--algae-ground)}
.g-fungi .top{background:rgba(22,17,11,.9)}
.g-algae .top{background:rgba(14,48,39,.9)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; padding-top:clamp(28px, 4vw, 48px);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--tone)}
.spec{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(28px, 5vw, 80px); align-items:start;
  padding-block:clamp(28px, 4vw, 48px) clamp(56px, 7vw, 96px)}
.spec-fig{position:sticky; top:96px; margin:0}
.frame{position:relative; aspect-ratio:4 / 5; border:1px solid var(--line); overflow:hidden}
.frame::before,.frame::after{content:""; position:absolute; z-index:1; width:12px; height:12px; border:1px solid var(--tone)}
.frame::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.frame::after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.spec-fig figcaption{display:flex; justify-content:space-between; gap:16px; margin-top:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-muted)}
.spec-fig figcaption i{text-transform:none; letter-spacing:.02em}
.credit{text-align:right; text-transform:none; letter-spacing:.02em}
.credit a{text-decoration:none; border-bottom:1px solid var(--bone-16)}
.credit a:hover{color:var(--tone); border-bottom-color:var(--tone)}
.flow h3 a{text-decoration:none}
.flow h3 a:hover{color:var(--amber)}
.flow p a{border-bottom:1px solid var(--bone-16); text-decoration:none}
.spec h1{max-width:none; font-size:clamp(42px, 5.6vw, 80px)}
.latin{margin:10px 0 0; font-family:var(--disp); font-weight:300; font-size:clamp(20px, 2vw, 28px); color:var(--tone)}
.latin i{font-style:italic}
.spec .lede{margin-top:26px; max-width:none; font-size:clamp(17px, 1.35vw, 20px); color:var(--bone)}
.block{margin-top:32px; padding-top:18px; border-top:1px solid var(--line)}
.block h2{margin:0 0 10px; font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--tone)}
.block p{margin:0; max-width:60ch; color:var(--bone-72)}
.fields{margin:32px 0 0; border-top:1px solid var(--line)}
.fields div{display:grid; grid-template-columns:minmax(120px, .5fr) 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--line)}
.fields dt{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-muted); padding-top:2px}
.fields dd{margin:0; font-size:15.5px}
.fields dd i{font-style:italic}
.claim-note{margin:26px 0 0; max-width:60ch; font-size:14px; line-height:1.55; color:var(--bone-muted)}
.pager{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); margin-bottom:clamp(56px, 7vw, 96px)}
.pager a{display:grid; gap:4px; padding:22px 0; text-decoration:none}
.pager .next{text-align:right; padding-left:20px; border-left:1px solid var(--line)}
.pager .prev{padding-right:20px}
.pager-k{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-muted)}
.pager-n{font-family:var(--disp); font-weight:300; font-size:clamp(22px, 2.4vw, 30px); letter-spacing:-.01em; transition:color .3s}
.pager a:hover .pager-n{color:var(--tone)}
@media (max-width:900px){
  .spec{grid-template-columns:1fr}
  .spec-fig{position:static}
  .frame{aspect-ratio:4 / 3}
}

/* ---------------- buttons and forms ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border:1px solid var(--bone);
  background:none; color:var(--bone); cursor:pointer; text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; transition:background .3s, color .3s}
.btn:hover{background:var(--bone); color:var(--ground)}
.btn--amber{border-color:var(--amber); color:var(--amber)}
.btn--amber:hover{background:var(--amber); color:var(--ground)}
label{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-muted)}
input,textarea,select{width:100%; padding:13px 14px; border:1px solid var(--bone-16); border-radius:0; background-color:rgba(237,230,214,.03);
  color:var(--bone); font:inherit; font-size:16px}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--amber)}
select{appearance:none; padding-right:40px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--bone-72) 50%), linear-gradient(135deg, var(--bone-72) 50%, transparent 50%);
  background-position:calc(100% - 21px) 52%, calc(100% - 16px) 52%; background-size:5px 5px; background-repeat:no-repeat}
select option{background:var(--ground); color:var(--bone)}
form.enq .kicker{margin:0; --tone:var(--amber)}
textarea{min-height:150px; resize:vertical}
input:-webkit-autofill,textarea:-webkit-autofill{-webkit-text-fill-color:var(--bone); caret-color:var(--bone);
  -webkit-box-shadow:0 0 0 60px var(--ground) inset}
.field{display:grid; gap:8px}
.form-msg{min-height:1.5em; margin:4px 0 0; font-size:14px; color:var(--bone-muted)}
.notify{display:grid; gap:8px; margin-top:24px; max-width:520px}
.notify .row{display:flex; flex-wrap:wrap; gap:10px}
.notify input{flex:1 1 220px; min-width:0}
form.enq{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form.enq .wide{grid-column:1 / -1}
form.enq .foot{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
form.enq .foot small{font-size:14px; color:var(--bone-muted)}
@media (max-width:620px){ form.enq{grid-template-columns:1fr} }

/* ---------------- two traditions ----------------
   Korean medicine on the left, Ayurveda on the right, and what GaiaTara grows in
   the middle as the bridge. The bridge takes the forest ground and the algae
   green, so the one column that is ours reads as different from the two that
   are sourced. */
.trad{--tone:var(--amber)}
.trad-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .92fr) minmax(0, 1fr); gap:1px;
  background:var(--bone-16); border:1px solid var(--bone-16)}
.trad-side,.trad-bridge{padding:clamp(22px, 2.6vw, 36px); background:var(--ground)}
.trad-bridge{--tone:var(--algae); background:var(--forest)}
.trad-side h3,.trad-bridge h3{margin:0; font-family:var(--disp); font-weight:300; font-size:clamp(26px, 2.6vw, 36px);
  line-height:1.1; letter-spacing:-.015em}
.trad-sub{margin:10px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tone)}
.trad-side--kr{--tone:var(--bone-72)}
.ingr{list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--bone-16)}
.ingr li{padding:15px 0 16px; border-bottom:1px solid var(--bone-16)}
.ingr-n{display:block; font-family:var(--disp); font-weight:400; font-size:21px; letter-spacing:-.01em}
.ingr-l{display:block; margin-top:3px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--bone-muted)}
.ingr-l i{font-style:italic}
.ingr p{margin:7px 0 0; font-size:15px; line-height:1.55; color:var(--bone-72)}
.trad-bridge p{margin:14px 0 0; color:var(--bone-72)}
.trad-bridge .chips{margin-top:22px}
.trad-bridge .chips a{font-size:14px}
.trad-bridge .chips a:hover{border-color:var(--algae); color:var(--algae)}
.trad-note{margin:18px 0 0; max-width:82ch; font-size:14px; line-height:1.6; color:var(--bone-muted)}
@media (max-width:980px){ .trad-grid{grid-template-columns:1fr} }

/* ---------------- where we are today ---------------- */
.stages{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--bone-16)}
.stages li{display:grid; gap:8px; align-content:start; padding:22px 24px 0 0}
.stages li + li{padding-left:24px; border-left:1px solid var(--bone-16)}
.stage-n{font-family:var(--disp); font-weight:400; font-size:22px; letter-spacing:-.01em}
.stage-s{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber)}
.stage-s::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.stage--soon .stage-s{color:var(--bone-muted)}
.stage--soon .stage-s::before{background:none; box-shadow:inset 0 0 0 1px currentColor}
@media (max-width:720px){
  .stages{grid-template-columns:1fr}
  .stages li,.stages li + li{padding:16px 0; border-left:0}
  .stages li + li{border-top:1px solid var(--bone-16)}
}

/* ---------------- closing line ---------------- */
.closing{padding-block:clamp(72px, 10vw, 150px); border-top:1px solid var(--bone-16);
  background:radial-gradient(90% 120% at 20% 100%, #11291C 0%, var(--ground) 65%)}
.closing-line{margin:0 0 22px; max-width:17ch; font-family:var(--disp); font-weight:300; font-variation-settings:"opsz" 144;
  font-size:clamp(34px, 5.2vw, 76px); line-height:1.04; letter-spacing:-.024em; text-wrap:balance}
.closing-line em{font-style:italic; color:var(--bone-72)}
.closing .eyebrow{margin:0}

/* ---------------- status on library tiles and cards ----------------
   First cultivation carries the section's colour and a filled dot; research
   stages are quieter, and long-term research has an open dot. */
.sp-r[data-status]{display:inline-flex; align-items:center; gap:8px}
.sp-r[data-status]::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor}
.sp-r[data-status="rnd"],.sp-r[data-status="longterm"]{color:var(--bone-muted)}
.sp-r[data-status="longterm"]::before{background:none; box-shadow:inset 0 0 0 1px currentColor}

/* ---------------- products ---------------- */
.prods{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; background:var(--bone-16); border:1px solid var(--bone-16)}
.prod{background:var(--ground); padding:clamp(24px, 3vw, 40px)}
.status{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.status::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber)}
.prod h2{margin:14px 0 10px; font-family:var(--disp); font-weight:300; font-size:clamp(26px, 2.6vw, 36px); line-height:1.1; letter-spacing:-.015em}
.prod p{margin:0; max-width:52ch; color:var(--bone-72)}
.prod p i{font-style:italic}
.prod .more-link{display:inline-block; margin-top:14px}
@media (max-width:760px){ .prods{grid-template-columns:1fr} }

/* ---------------- contact ---------------- */
.cgrid{display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(28px, 5vw, 80px); align-items:start}
@media (max-width:900px){ .cgrid{grid-template-columns:1fr} }
.dl{margin:0; border-top:1px solid var(--bone-16)}
.dl div{display:grid; grid-template-columns:minmax(96px, .4fr) 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--bone-16)}
.dl dt{padding-top:3px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-muted)}
.dl dd{margin:0; font-size:15.5px; line-height:1.5}
.dl a{text-decoration:none; border-bottom:1px solid var(--bone-16)}
.dl a:hover{color:var(--amber); border-bottom-color:var(--amber)}

/* ---------------- footer ---------------- */
.site-foot{position:relative; z-index:1; padding-block:clamp(48px, 6vw, 80px) 28px; background:#07120C; border-top:1px solid var(--bone-16)}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px 40px; padding-bottom:36px; border-bottom:1px solid var(--bone-16)}
.f-brand img{width:72px; height:72px; margin-bottom:16px}
.f-brand p{margin:0; max-width:28ch; font-family:var(--disp); font-weight:300; font-size:20px; line-height:1.3}
.f-brand .f-tag{margin-top:12px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber)}
.f-h{margin:0 0 14px; font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-muted)}
.fgrid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15px}
.fgrid a{text-decoration:none}
.fgrid a:hover{color:var(--amber)}
.disclaimer{margin:24px 0 0; max-width:92ch; font-size:14px; line-height:1.6; color:var(--bone-muted)}
.legal{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; margin-top:18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-muted)}
@media (max-width:900px){ .fgrid{grid-template-columns:1fr 1fr} .f-brand{grid-column:1 / -1} }
@media (max-width:480px){ .fgrid{grid-template-columns:1fr} }

/* ---------------- language ---------------- */
.bar-end{display:flex; align-items:center; gap:clamp(16px, 2vw, 28px)}
.lang{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-decoration:none; color:var(--bone-72);
  padding:7px 11px; border:1px solid var(--bone-16); transition:color .25s, border-color .25s}
.lang:hover{color:var(--bone); border-color:var(--amber)}
.sheet-mail .lang{margin-right:6px}

/* Korean: Hangul from Noto, Latin names stay in Fraunces and Inter. Hangul has
   no italic, reads best unbroken by word, and needs more leading than Latin. */
html[lang="ko"]{--disp:"Fraunces", "Noto Serif KR", Georgia, serif; --sans:"Inter", "Noto Sans KR", system-ui, sans-serif;
  --mono:"IBM Plex Mono", "Noto Sans KR", ui-monospace, Menlo, monospace}
html[lang="ko"] body{word-break:keep-all; overflow-wrap:anywhere; line-height:1.78}
html[lang="ko"] h1{line-height:1.22; letter-spacing:-.012em}
html[lang="ko"] .hero h1{max-width:12em; font-size:clamp(34px, 5.2vw, 76px)}
html[lang="ko"] .page-head h1{max-width:14em; font-size:clamp(32px, 4.6vw, 66px)}
html[lang="ko"] .spec h1{font-size:clamp(36px, 5vw, 70px)}
html[lang="ko"] h1 em,html[lang="ko"] .closing-line em{font-style:normal; color:var(--amber)}
html[lang="ko"] .closing-line{max-width:14em; font-size:clamp(30px, 4.4vw, 62px); line-height:1.25; letter-spacing:-.012em}
html[lang="ko"] :is(.lib-head h2,.door-t,.sp-n,.pager-n,.steps h3,.flow h3,.prod h2,.prose .first,.f-brand p,.sheet nav a,
  .trad-side h3,.trad-bridge h3,.ingr-n,.stage-n){
  letter-spacing:-.01em; line-height:1.3}
html[lang="ko"] :is(.nav a,.kicker,.door-m,.readout,.sp-r,.status,.pager-k,.fields dt,.dl dt,label,.f-h,.block h2,.trad-sub,.stage-s,
  .crumbs,.more-link,.btn,.menu-btn,.sheet-close,.spec-fig figcaption,.legal){letter-spacing:.02em}
html[lang="ko"] .lede,html[lang="ko"] .prose p{line-height:1.8}

/* ---------------- motion ---------------- */
#spores{position:fixed; inset:0; z-index:30; width:100%; height:100%; pointer-events:none}
html.js .rise{opacity:0; transform:translateY(18px) scaleY(.985); transform-origin:50% 100%;
  transition:opacity .9s cubic-bezier(.16,.84,.28,1) var(--d, 0ms), transform 1.05s cubic-bezier(.16,.84,.28,1) var(--d, 0ms)}
html.js .rise.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rise{opacity:1; transform:none; transition:none}
  .door-a,.sheet,.species a,.card,.btn,.card-fig img{transition:none}
  .card:hover .card-fig img{transform:none}
  #spores{display:none}
}