/* ============================================================
   OLD TREE YARD — design system
   "Small trees. Long stories."
   ------------------------------------------------------------
   Palette · Sandwashed Clay / Aged Parchment / Bonsai Needle /
             Deep Moss / Burnt Sienna / Charcoal Ink / Weathered Wood
   Type    · Cormorant Garamond (display) · Karla (body)
             IBM Plex Mono (field notes) · Zen Old Mincho (kanji)
   ============================================================ */

:root{
  /* colour */
  --clay:        #E7DECC;   /* sandwashed clay — main ground          */
  --clay-deep:   #DDD2BC;   /* shaded clay                            */
  --parchment:   #F3EDDE;   /* aged parchment — panels & cards        */
  --needle:      #3D5A42;   /* bonsai needle green                    */
  --moss:        #22301F;   /* deep moss — dark bands & footer        */
  --moss-2:      #2C3D29;
  --sienna:      #A4552B;   /* burnt sienna — the single warm accent  */
  --sienna-deep: #8A4421;
  --ink:         #26231C;   /* charcoal ink — text                    */
  --ink-soft:    #4D483D;
  --wood:        #8B6F4E;   /* weathered wood — hairlines & frames    */
  --line:        rgba(38,35,28,.18);
  --line-strong: rgba(38,35,28,.4);
  --paper-line:  rgba(243,237,222,.18);

  /* type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "Courier New", monospace;
  --kanji: "Zen Old Mincho", serif;

  /* rhythm */
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --sec: clamp(88px, 12vw, 168px);

  --ease: cubic-bezier(.22,.61,.21,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* clip (not hidden) at the root: pre-reveal translateX panels otherwise widen the
   document scroller by ~10px on phones; clip keeps sticky positioning intact */
html{ scroll-behavior:smooth; overflow-x:clip; }
html:focus-within{ scroll-behavior:smooth; }
body{
  background:var(--clay);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--needle); color:var(--parchment); }
:focus-visible{ outline:2px solid var(--sienna); outline-offset:3px; border-radius:2px; }

/* skip link — first tab stop, visible only on focus */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:130;
  background:var(--ink); color:var(--parchment);
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:12px 18px; border-radius:3px; box-shadow:0 8px 24px -10px rgba(38,35,28,.5);
  transform:translateY(-160%); transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:none; outline:2px solid var(--sienna); outline-offset:2px; }
main:focus{ outline:none; }

/* paper grain over everything — barely there */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--sienna-deep);   /* deeper burnt sienna — meets WCAG AA on the light grounds */
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--sienna-deep); opacity:.7; flex:none; }
.eyebrow--bare::before{ display:none; }

.kanji-no{
  font-family:var(--kanji); font-weight:400;
  font-size:15px; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2px;
  width:30px; height:30px; display:inline-flex;
  align-items:center; justify-content:center; flex:none;
}

.display-xl{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(46px, 7.4vw, 104px);
  line-height:1.02; letter-spacing:-.012em;
  color:var(--ink);
}
.display-xl em, .h-section em, .display em{
  font-style:italic; font-weight:300; color:var(--needle);
}
.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px, 4.6vw, 62px);
  line-height:1.08; letter-spacing:-.01em;
}
.h-section{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 3.8vw, 52px);
  line-height:1.12; letter-spacing:-.008em;
  max-width:17ch;
}
.h-card{
  font-family:var(--serif); font-weight:500;
  font-size:25px; line-height:1.2;
}
.lede{
  font-size:clamp(17px, 1.5vw, 20px);
  line-height:1.7; color:var(--ink-soft); max-width:54ch;
}
.body-text{ color:var(--ink-soft); max-width:58ch; }
.body-text + .body-text{ margin-top:1em; }
.small{ font-size:14px; color:var(--ink-soft); }
.mono{ font-family:var(--mono); }

/* vertical kanji rail */
.kanji-rail{
  position:absolute; top:0; bottom:auto;
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--kanji); font-size:clamp(20px,2vw,28px);
  letter-spacing:.5em; color:var(--ink); opacity:.32;
  user-select:none; pointer-events:none;
}
.kanji-rail span{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.4em;
  text-transform:uppercase; margin-top:18px; opacity:.85;
}

/* ---------- layout ---------- */
.wrap{ width:min(var(--wrap), 100% - var(--gut)*2); margin-inline:auto; }
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:calc(var(--sec) * .62); }
.sec-head{ max-width:760px; margin-bottom:clamp(40px,5vw,72px); }
.sec-head .eyebrow{ margin-bottom:22px; }
.sec-head .h-section{ margin-bottom:20px; }
.sec-top{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }

.grid{ display:grid; gap:clamp(24px,3vw,48px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,96px); align-items:center; }
.split--rev > :first-child{ order:2; }

/* ---------- ink brush divider ---------- */
.brush{ width:100%; height:22px; color:var(--ink); opacity:.5; }
.brush--paper{ color:var(--parchment); }
.brush-wrap{ padding-block:6px; }

/* ---------- navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,44px);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.nav.is-scrolled{
  background:rgba(231,222,204,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding-block:12px;
}
.nav--dark:not(.is-scrolled){ color:var(--parchment); }
.nav-logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{ width:38px; height:38px; color:currentColor; flex:none; }
.logo-word{
  font-family:var(--serif); font-weight:500; font-size:19px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.logo-word small{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:8.5px; letter-spacing:.42em; opacity:.65; margin-top:1px;
}
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.6vw,38px); }
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; position:relative; padding:6px 0;
  opacity:.78; transition:opacity .3s;
}
.nav-links a:hover{ opacity:1; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-current::after{ transform:scaleX(1); }
.nav-links a.is-current{ opacity:1; }
.nav-links a.nav-atlas{
  border:1px solid currentColor; padding:9px 16px; border-radius:2px;
  display:flex; align-items:center; gap:9px; opacity:1;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav-links a.nav-atlas::after{ display:none; }
.nav-links a.nav-atlas:hover{ background:var(--ink); color:var(--parchment); border-color:var(--ink); }
.nav--dark:not(.is-scrolled) .nav-links a.nav-atlas:hover{ background:var(--parchment); color:var(--ink); border-color:var(--parchment); }
.nav-atlas .dot{ width:7px; height:7px; border-radius:50%; background:var(--sienna); flex:none; }

.nav-burger{ display:none; width:42px; height:42px; position:relative; z-index:96; }
.nav-burger span{
  position:absolute; left:9px; right:9px; height:1.6px; background:currentColor;
  transition:transform .45s var(--ease), top .45s var(--ease), opacity .3s;
}
.nav-burger span:nth-child(1){ top:16px; }
.nav-burger span:nth-child(2){ top:25px; }
.nav-burger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ top:20px; transform:rotate(-45deg); }

/* full-screen menu */
.menu{
  position:fixed; inset:0; z-index:92; background:var(--moss); color:var(--parchment);
  display:flex; flex-direction:column; justify-content:center; padding:0 clamp(28px,8vw,90px);
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .7s var(--ease), visibility 0s .7s;
}
.menu.is-open{ clip-path:inset(0 0 0% 0); visibility:visible; transition:clip-path .7s var(--ease); }
.menu a.menu-link{
  font-family:var(--serif); font-size:clamp(38px,7vw,72px); line-height:1.25;
  display:flex; align-items:baseline; gap:20px; width:fit-content;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open a.menu-link{ opacity:1; transform:none; }
.menu.is-open a.menu-link:nth-child(2){ transition-delay:.08s; }
.menu.is-open a.menu-link:nth-child(3){ transition-delay:.16s; }
.menu a.menu-link:hover{ color:#CFE0CF; }
.menu a.menu-link .mono{ font-size:12px; letter-spacing:.3em; opacity:.5; }
.menu-foot{
  position:absolute; bottom:34px; left:clamp(28px,8vw,90px); right:clamp(28px,8vw,90px);
  display:flex; justify-content:space-between; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; opacity:.55;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  padding:16px 26px; border:1px solid var(--ink); border-radius:2px;
  color:var(--ink); background:transparent; position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease); z-index:0;
}
.btn:hover::before{ transform:scaleY(1); }
.btn:hover{ color:var(--parchment); }
.btn > *{ position:relative; z-index:1; }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }

.btn--fill{ background:var(--sienna); border-color:var(--sienna); color:var(--parchment); }
.btn--fill::before{ background:var(--sienna-deep); }
.btn--fill:hover{ border-color:var(--sienna-deep); color:var(--parchment); }

.btn--paper{ border-color:rgba(243,237,222,.55); color:var(--parchment); }
.btn--paper::before{ background:var(--parchment); }
.btn--paper:hover{ color:var(--moss); border-color:var(--parchment); }

.btn--quiet{ border:0; padding:10px 0; letter-spacing:.26em; }
.btn--quiet::before{ display:none; }
.btn--quiet::after{
  content:""; position:absolute; left:0; bottom:6px; height:1px; width:100%;
  background:currentColor; transform-origin:left; transition:transform .4s var(--ease);
}
.btn--quiet:hover{ color:var(--sienna); }
.btn--quiet:hover::after{ transform:scaleX(.6); }

/* hanko seal */
.seal{
  width:46px; height:46px; background:var(--sienna); color:var(--parchment);
  border-radius:3px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--kanji); font-size:24px; line-height:1;
  box-shadow:inset 0 0 0 1.5px rgba(243,237,222,.35);
  transform:rotate(-3deg);
}

/* ---------- cards & panels ---------- */
.panel{
  background:var(--parchment);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 1px 0 rgba(38,35,28,.05), 0 24px 48px -32px rgba(38,35,28,.28);
  position:relative;
}
.panel::after{ /* inner hairline — mounted print feel */
  content:""; position:absolute; inset:10px; border:1px solid var(--line);
  border-radius:2px; pointer-events:none; opacity:.55;
}
.panel--moss{ background:var(--moss); color:var(--parchment); border-color:rgba(243,237,222,.16); }
.panel--moss::after{ border-color:var(--paper-line); }

.card{
  background:var(--parchment); border:1px solid var(--line); border-radius:3px;
  padding:clamp(26px,3vw,38px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  position:relative;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line-strong);
  box-shadow:0 28px 44px -30px rgba(38,35,28,.35);
}
.card .card-kanji{
  position:absolute; top:18px; right:20px;
  font-family:var(--kanji); font-size:30px; color:var(--needle); opacity:.16;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.card:hover .card-kanji{ opacity:.45; transform:translateY(-3px); }
.card .h-card{ margin:16px 0 12px; }
.card .small{ line-height:1.7; }
.card-icon{ width:44px; height:44px; color:var(--needle); }

/* mono ledger rows */
.ledger{ border-top:1px solid var(--line); }
.ledger li{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:15px 2px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
}
.ledger li b{ font-weight:500; letter-spacing:.18em; text-transform:uppercase; font-size:11.5px; color:var(--ink); }
.ledger li span{ color:var(--ink-soft); text-align:right; }
.ledger--paper{ border-color:var(--paper-line); }
.ledger--paper li{ border-color:var(--paper-line); }
.ledger--paper li b{ color:var(--parchment); }
.ledger--paper li span{ color:rgba(243,237,222,.72); }

/* ---------- footer ---------- */
.footer{
  background:var(--moss); color:var(--parchment);
  padding:calc(var(--sec) * .8) 0 0; position:relative; overflow:hidden;
}
.footer .ghost{
  position:absolute; right:-2%; bottom:-7%; width:min(46vw,560px); opacity:.07; color:var(--parchment);
  pointer-events:none;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,64px);
  padding-bottom:72px; position:relative; z-index:1;
}
.footer h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:#A9BCA4; margin-bottom:20px; font-weight:500;
}
.footer a{ transition:color .3s, opacity .3s; opacity:.85; }
.footer a:hover{ color:#fff; opacity:1; }
.footer li{ margin-bottom:11px; font-size:15px; }
.footer .f-brand p{ max-width:34ch; color:rgba(243,237,222,.75); font-size:15px; margin-top:18px; }
.footer .f-tag{
  font-family:var(--serif); font-style:italic; font-size:21px; color:#CFE0CF; margin-top:26px;
}
.footer-base{
  border-top:1px solid var(--paper-line);
  padding:26px 0 30px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(243,237,222,.62); position:relative; z-index:1;
}

/* ---------- reveal & motion ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-30px); }
[data-reveal="right"]{ transform:translateX(30px); }
[data-reveal="scale"]{ transform:scale(.96); }

/* page veil transition */
.veil{
  position:fixed; inset:0; z-index:120; background:var(--clay);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .55s var(--ease), visibility 0s .55s; pointer-events:none;
}
.veil .veil-mark{ width:60px; height:60px; color:var(--ink); opacity:.7; }
body.is-loaded .veil{ opacity:0; visibility:hidden; }
body.is-leaving .veil{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); pointer-events:all; }

/* ============================================================
   PAGE — LANDING
   ============================================================ */
.hero{
  min-height:100svh; display:flex; align-items:center; position:relative;
  padding-top:120px; padding-bottom:60px; overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,5vw,80px); align-items:center; width:100%; }
.hero .eyebrow{ margin-bottom:30px; }
.hero .display-xl{ margin-bottom:30px; }
.hero .lede{ margin-bottom:44px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-foot{
  position:absolute; left:0; right:0; bottom:0;
  border-top:1px solid var(--line);
}
.hero-foot .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-block:18px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
}
.scroll-cue{ display:flex; align-items:center; gap:12px; }
.scroll-cue i{
  width:1px; height:34px; background:var(--ink-soft); display:block; position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--sienna);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 55%{transform:translateY(0)} 100%{transform:translateY(100%)} }

.hero-art{ position:relative; aspect-ratio:1/1.04; max-width:560px; margin-left:auto; width:100%; }
.hero-art .enso-svg{ position:absolute; inset:0; color:var(--ink); }
.enso-path{
  fill:none; stroke:currentColor; stroke-linecap:round; opacity:.8;
}
.enso-draw .enso-path{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:enso 2.6s var(--ease) .35s forwards;
}
@keyframes enso{ to{ stroke-dashoffset:0; } }
.hero-art .pine-svg{
  position:absolute; inset:11% 13% 9% 13%; color:var(--ink);
  filter:drop-shadow(0 26px 22px rgba(38,35,28,.18));
}
.hero-art .pine-svg .pad{ fill:var(--needle); }
.hero-art .pine-svg .trunkline{ stroke:var(--ink); }
.hero-kanji{ right:calc((100vw - min(var(--wrap),100vw - var(--gut)*2))/2 * -1 + 14px); }
#motes{ position:absolute; inset:0; pointer-events:none; }

/* field-notes card */
.fieldnote{ padding:clamp(28px,3vw,42px); }
.fieldnote .fn-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px;
}
.fieldnote .ledger li:first-child{ border-top:0; }

/* dark band sections */
.band{ background:var(--moss); color:var(--parchment); }
.band .h-section, .band .display{ color:var(--parchment); }
.band .lede, .band .body-text{ color:rgba(243,237,222,.78); }
.band .eyebrow{ color:#D08A5C; }
.band .eyebrow::before{ background:#D08A5C; }
.band .kanji-no{ color:rgba(243,237,222,.75); border-color:var(--paper-line); }

/* rehab steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--paper-line); border-radius:3px; overflow:hidden; }
.step{
  padding:clamp(24px,2.6vw,38px); border-left:1px solid var(--paper-line);
  background:linear-gradient(180deg, rgba(243,237,222,.03), rgba(243,237,222,0));
  transition:background .5s var(--ease);
}
.step:first-child{ border-left:0; }
.step:hover{ background:rgba(243,237,222,.06); }
.step .s-kanji{ font-family:var(--kanji); font-size:30px; color:#D08A5C; }
.step h3{ font-family:var(--serif); font-size:24px; font-weight:500; margin:16px 0 10px; }
.step p{ font-size:14.5px; color:rgba(243,237,222,.72); line-height:1.7; }
.step .s-no{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:rgba(243,237,222,.45); display:block; margin-top:6px; }

/* episode cards */
.ep{ padding:0; overflow:hidden; }
.ep .ep-frame{
  aspect-ratio:16/9.4; background:var(--moss); position:relative; display:flex;
  align-items:center; justify-content:center; color:var(--parchment); overflow:hidden;
}
.ep .ep-frame svg.scene{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.ep .play{
  width:60px; height:60px; border:1px solid rgba(243,237,222,.6); border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.ep:hover .play{ transform:scale(1.12); background:rgba(243,237,222,.12); }
.ep .ep-body{ padding:24px 26px 28px; }
.ep .ep-no{ font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; color:var(--sienna); }
.ep h3{ font-family:var(--serif); font-size:23px; font-weight:500; margin:10px 0 8px; }
.ep p{ font-size:14px; color:var(--ink-soft); }

/* atlas teaser */
.atlas-teaser{
  border-radius:4px; overflow:hidden; position:relative;
  background:radial-gradient(120% 130% at 78% 18%, #33422C 0%, var(--moss) 52%, #161F14 100%);
  color:var(--parchment); padding:clamp(40px,6vw,84px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center;
}
.atlas-teaser::before{
  content:""; position:absolute; inset:14px; border:1px solid var(--paper-line); border-radius:3px; pointer-events:none;
}
.atlas-teaser .pine-svg{ width:min(360px,80%); margin-inline:auto; color:var(--parchment);
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.4)); }
.atlas-teaser .pine-svg .pad{ fill:#5E7A5C; }
.atlas-teaser .mono-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:#D08A5C; margin-bottom:18px; display:block;
}

/* ============================================================
   PAGE — ABOUT
   ============================================================ */
.page-hero{ padding-top:clamp(150px,20vh,210px); padding-bottom:clamp(40px,7vw,90px); position:relative; }
.page-hero .display-xl{ max-width:14ch; }
.page-hero .lede{ margin-top:28px; }

.person{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.person .p-top{
  background:linear-gradient(170deg,#2C3D29, var(--moss));
  color:var(--parchment); padding:30px 28px 26px; position:relative; min-height:172px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.person .p-top::after{
  content:""; position:absolute; inset:9px; border:1px solid var(--paper-line); border-radius:2px;
}
.person .p-glyph{
  position:absolute; top:16px; right:20px; font-family:var(--kanji);
  font-size:46px; color:rgba(243,237,222,.14);
}
.person .p-name{ font-family:var(--serif); font-size:30px; font-weight:500; }
.person .p-role{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:#D08A5C; margin-top:8px;
}
.person .p-body{ padding:26px 28px 28px; display:flex; flex-direction:column; gap:16px; flex:1; }
.person .p-body p{ font-size:14.5px; color:var(--ink-soft); line-height:1.75; }
.person .p-tools{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-soft);
}

.mission-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.mission{ background:var(--parchment); padding:clamp(26px,3vw,40px); transition:background .5s var(--ease); }
.mission:hover{ background:#EFE7D4; }
.mission .m-kanji{ font-family:var(--kanji); font-size:32px; color:var(--needle); }
.mission h3{ font-family:var(--serif); font-size:24px; font-weight:500; margin:14px 0 8px; }
.mission p{ font-size:14px; color:var(--ink-soft); line-height:1.7; }

.quoteblock{
  border-left:2px solid var(--sienna); padding-left:clamp(22px,3vw,40px);
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3vw,36px); line-height:1.4; color:var(--ink); max-width:26ch;
}
.quoteblock cite{
  display:block; font-family:var(--mono); font-style:normal; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); margin-top:22px;
}

/* ============================================================
   PAGE — LIVING BONSAI ATLAS
   ============================================================ */
.atlas-hero{
  background:radial-gradient(130% 120% at 70% 0%, #33422C 0%, var(--moss) 46%, #131A11 100%);
  color:var(--parchment); position:relative; overflow:hidden;
  padding-top:clamp(160px,22vh,230px); padding-bottom:clamp(70px,9vw,130px);
}
.atlas-hero .eyebrow{ color:#D08A5C; }
.atlas-hero .eyebrow::before{ background:#D08A5C; }
.atlas-hero .display-xl{ color:var(--parchment); max-width:13ch; }
.atlas-hero .display-xl em{ color:#9FBF9A; }
.atlas-hero .lede{ color:rgba(243,237,222,.78); margin-top:28px; }
.atlas-hero .kanji-rail{ color:var(--parchment); opacity:.2; right:clamp(14px,3vw,40px); top:140px; }
.atlas-hero .h-meta{
  display:flex; gap:34px; flex-wrap:wrap; margin-top:44px;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(243,237,222,.6);
}
.atlas-hero .h-meta b{ color:var(--parchment); font-weight:500; display:block; font-size:13px; margin-top:6px; letter-spacing:.18em; }

/* the alcove — viewer stage */
.alcove-wrap{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(22px,3vw,40px); align-items:stretch; }
.alcove{
  position:relative; border-radius:4px; overflow:hidden; min-height:560px;
  background:
    radial-gradient(95% 80% at 50% 30%, #3A4A33 0%, #25301F 48%, #11180E 100%);
  border:1px solid rgba(38,35,28,.45);
  box-shadow:inset 0 0 0 1px rgba(243,237,222,.07), 0 40px 80px -50px rgba(17,24,14,.8);
}
.alcove::after{
  content:""; position:absolute; inset:12px; border:1px solid rgba(243,237,222,.12);
  border-radius:3px; pointer-events:none; z-index:3;
}
#stage{ position:absolute; inset:0; }
#stage canvas{ width:100% !important; height:100% !important; }
.alcove .a-corner{
  position:absolute; z-index:4; font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(243,237,222,.62);
}
.a-corner.tl{ top:26px; left:28px; } .a-corner.tr{ top:26px; right:28px; text-align:right; }
.a-corner.bl{ bottom:24px; left:28px; } .a-corner.br{ bottom:24px; right:28px; text-align:right; }
.a-corner b{ display:block; color:rgba(243,237,222,.85); font-weight:500; font-size:11.5px; margin-top:4px; }
.alcove .a-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(243,237,222,.55); transition:opacity .6s;
}
.alcove .a-hint svg{ width:18px; height:18px; opacity:.8; }
.alcove.is-touched .a-hint{ opacity:0; }

/* specimen panel */
.specimen{
  background:var(--parchment); border:1px solid var(--line); border-radius:4px;
  padding:clamp(26px,2.6vw,36px); display:flex; flex-direction:column; gap:0;
  box-shadow:0 30px 60px -44px rgba(38,35,28,.4);
}
.specimen .sp-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.specimen .sp-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--sienna); }
.specimen .sp-stage{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2vw,30px); line-height:1.15; margin-top:8px; }
.specimen .sp-age{ text-align:right; font-family:var(--mono); }
.specimen .sp-age b{ font-size:26px; font-weight:500; display:block; color:var(--ink); }
.specimen .sp-age span{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }
.sp-rows{ padding:6px 0 2px; }
.sp-row{
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px dashed var(--line);
}
.sp-row .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.sp-row .v{ font-family:var(--mono); font-size:14px; color:var(--ink); text-align:right; font-weight:500; }
.sp-bar{ grid-column:1 / -1; height:3px; background:rgba(38,35,28,.1); border-radius:2px; overflow:hidden; margin-top:-2px; }
.sp-bar i{ display:block; height:100%; background:var(--needle); width:0%; transition:width .8s var(--ease); }
.sp-text{ padding-top:16px; }
.sp-text h4{
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sienna); margin-bottom:8px; font-weight:500;
}
.sp-text p{ font-size:14px; line-height:1.7; color:var(--ink-soft); }
.sp-text + .sp-text{ margin-top:14px; }
.sp-health li{
  font-size:13.5px; color:var(--ink-soft); padding-left:18px; position:relative; margin-bottom:7px; line-height:1.6;
}
.sp-health li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border:1.5px solid var(--sienna); border-radius:50%; }
.swap{ transition:opacity .35s var(--ease); }
.swap.is-fading{ opacity:0; }

/* age console */
.console{
  margin-top:clamp(22px,3vw,36px); background:var(--parchment); border:1px solid var(--line);
  border-radius:4px; padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,46px);
  box-shadow:0 30px 60px -44px rgba(38,35,28,.35);
}
.console .c-top{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.console .c-title{ font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }
.console .c-read{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--ink); }
.console .c-read b{ font-size:20px; font-weight:500; color:var(--sienna); }
input[type="range"].age{
  -webkit-appearance:none; appearance:none; width:100%; height:34px; background:transparent; cursor:pointer;
}
input[type="range"].age::-webkit-slider-runnable-track{
  height:2px; background:linear-gradient(90deg, var(--needle) var(--fill,0%), rgba(38,35,28,.18) var(--fill,0%));
  border-radius:2px;
}
input[type="range"].age::-moz-range-track{ height:2px; background:rgba(38,35,28,.18); border-radius:2px; }
input[type="range"].age::-moz-range-progress{ height:2px; background:var(--needle); }
input[type="range"].age::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; margin-top:-10px;
  background:var(--parchment); border:2px solid var(--ink); border-radius:50%;
  box-shadow:0 3px 10px rgba(38,35,28,.3); transition:transform .25s var(--ease), border-color .25s;
}
input[type="range"].age::-webkit-slider-thumb:hover{ transform:scale(1.18); border-color:var(--sienna); }
input[type="range"].age::-moz-range-thumb{
  width:18px; height:18px; background:var(--parchment); border:2px solid var(--ink); border-radius:50%;
  box-shadow:0 3px 10px rgba(38,35,28,.3);
}
.c-ticks{
  display:flex; justify-content:space-between; margin-top:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.c-ticks span{ position:relative; padding-top:10px; }
.c-ticks span::before{ content:""; position:absolute; top:0; left:50%; width:1px; height:6px; background:var(--line-strong); }
.c-stages{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.c-stage{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:7px 13px; color:var(--ink-soft);
  transition:all .35s var(--ease); cursor:pointer; background:transparent;
}
.c-stage:hover{ border-color:var(--ink-soft); color:var(--ink); }
.c-stage.is-on{ background:var(--needle); border-color:var(--needle); color:var(--parchment); }

/* perfect form */
.form-ref{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,80px); align-items:center; }
.form-ref .pine-svg{ width:min(420px,92%); margin-inline:auto; color:var(--ink); }
.form-ref .pine-svg .pad{ fill:var(--needle); }

/* care cards */
.care-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.care{ display:flex; flex-direction:column; }
.care .care-k{ font-family:var(--kanji); font-size:26px; color:var(--needle); }
.care h3{ font-family:var(--serif); font-size:23px; font-weight:500; margin:14px 0 10px; }
.care p{ font-size:14px; color:var(--ink-soft); line-height:1.72; }
.care .care-tip{
  margin-top:auto; padding-top:14px; border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--sienna);
}
.care--warn{ border-color:rgba(164,85,43,.45); }
.care--warn .care-k{ color:var(--sienna); }

/* species library preview */
.species-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.species{
  border:1px dashed var(--paper-line); border-radius:3px; padding:26px 26px 24px;
  color:var(--parchment); transition:border-color .4s, background .4s;
  display:flex; flex-direction:column; gap:6px; min-height:150px;
}
.species:hover{ border-color:rgba(243,237,222,.45); background:rgba(243,237,222,.04); }
.species .sp-lat{ font-family:var(--serif); font-style:italic; font-size:21px; }
.species .sp-com{ font-size:13.5px; color:rgba(243,237,222,.65); }
.species .sp-stat{
  margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase; color:#D08A5C;
}
.species.is-live{ border:1px solid rgba(243,237,222,.4); background:rgba(243,237,222,.05); }
.species.is-live .sp-stat{ color:#9FBF9A; }

.disclaimer{
  border:1px solid var(--line); border-left:3px solid var(--sienna); border-radius:3px;
  padding:22px 26px; font-size:13.5px; color:var(--ink-soft); background:var(--parchment); max-width:880px;
}
.disclaimer b{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--sienna); display:block; margin-bottom:8px; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ max-width:430px; margin:10px auto 0; }
  .alcove-wrap{ grid-template-columns:1fr; }
  .alcove{ min-height:480px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step{ border-top:1px solid var(--paper-line); }
  .step:nth-child(-n+2){ border-top:0; }
  .step:nth-child(odd){ border-left:0; }
  .mission-grid{ grid-template-columns:repeat(2,1fr); }
  .atlas-teaser{ grid-template-columns:1fr; }
  .form-ref{ grid-template-columns:1fr; }
  .kanji-rail{ display:none; }
}
@media (max-width:860px){
  .grid-3, .grid-4, .care-grid, .species-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--rev > :first-child{ order:0; }
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .grid-2, .grid-3, .grid-4, .care-grid, .species-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-left:0; border-top:1px solid var(--paper-line); }
  .step:first-child{ border-top:0; }
  .hero{ padding-top:104px; }
  .hero-foot .wrap{ flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-grid{ grid-template-columns:1fr; }
  .logo-word small{ display:none; }
  .alcove{ min-height:400px; }
  /* corner labels collide at phone width — keep the specimen label + hint only */
  .a-corner.tr, .a-corner.bl, .a-corner.br{ display:none; }
  .sp-row{ grid-template-columns:1fr; gap:4px; }
  .sp-row .v{ text-align:left; }
}

/* ============================================================
   PAGE — THE OLD TREE BARN
   ============================================================ */
.barn-hero{ padding-top:clamp(150px,20vh,210px); padding-bottom:clamp(46px,7vw,90px); position:relative; overflow:hidden; }
.barn-hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,80px); align-items:center; }
.barn-hero .display-xl{ max-width:12ch; }
.barn-creed{
  margin-top:28px; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(18px,1.7vw,22px); line-height:1.55; color:var(--ink-soft); max-width:42ch;
}
.barn-hero-art{ position:relative; max-width:520px; width:100%; margin-left:auto; aspect-ratio:1/1.02; }
.barn-hero-art .enso-svg{ position:absolute; inset:0; color:var(--ink); }
.barn-hero-art .shelf-svg{ position:absolute; inset:9% 7% 5% 7%; color:var(--ink); filter:drop-shadow(0 24px 22px rgba(38,35,28,.16)); }

/* sticky filter bar */
.filterbar{
  position:sticky; top:61px; z-index:60;
  background:rgba(231,222,204,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-block:1px solid var(--line);
}
.filterbar .wrap{ display:flex; align-items:center; gap:9px; padding-block:13px; overflow-x:auto; scrollbar-width:none; }
.filterbar .wrap::-webkit-scrollbar{ display:none; }
.f-label{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); flex:none; padding-right:4px; }
.f-chip{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:8px 14px; color:var(--ink-soft);
  background:transparent; white-space:nowrap; flex:none; transition:all .35s var(--ease);
}
.f-chip:hover{ border-color:var(--ink-soft); color:var(--ink); }
.f-chip.is-on{ background:var(--needle); border-color:var(--needle); color:var(--parchment); }
.barn-sec, #sec-featured, #request{ scroll-margin-top:130px; }

/* product grid + cards */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); margin-top:clamp(28px,3.4vw,44px); align-items:start; }
.pcard{
  background:var(--parchment); border:1px solid var(--line); border-radius:3px;
  display:flex; flex-direction:column; position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pcard:hover{ transform:translateY(-5px); border-color:var(--line-strong); box-shadow:0 28px 44px -30px rgba(38,35,28,.35); }
.pv-wrap{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:28px 20px 22px; border-bottom:1px solid var(--line); border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, #EFE8D6 0%, var(--parchment) 100%);
}
.pv{ width:118px; height:118px; transition:transform .5s var(--ease); }
.pcard:hover .pv{ transform:translateY(-4px); }
.p-skill{
  position:absolute; top:14px; left:16px; font-family:var(--mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); background:rgba(243,237,222,.78); border-radius:99px; padding:4px 10px;
}
.p-flag{ position:absolute; top:17px; right:16px; font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--sienna-deep); }
.p-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.p-cat{ font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--sienna-deep); }
.p-name{ font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.2; margin:8px 0; }
.p-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
.p-why{ margin-top:12px; }
.p-why h5, .p-best h5{ font-family:var(--mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--sienna-deep); margin-bottom:5px; font-weight:500; }
.p-why p{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
.p-best{ margin-top:10px; }
.p-best p{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.04em; line-height:1.6; }
.p-note{
  margin:14px 0 0; border-left:2px solid var(--sienna); padding:2px 0 2px 13px;
  font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.55; color:var(--ink);
}
.p-note cite{ display:block; font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:7px; }
.p-meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--mono);
}
.p-meta .use{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.p-meta .price{ font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap; }
.p-supplier{ font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; color:var(--ink-soft); opacity:.75; margin-top:7px; }
.p-ctas{ display:flex; gap:12px; margin-top:16px; align-items:center; }
.btn--sm{ padding:11px 16px; font-size:10.5px; letter-spacing:.18em; gap:8px; }

/* soil mix ratio bars */
.ratio{ display:flex; height:13px; border:1px solid var(--line); border-radius:2px; overflow:hidden; margin-top:14px; }
.ratio i{ display:block; height:100%; }
.ratio i + i{ border-left:1px solid rgba(243,237,222,.6); }
.ratio-legend{ display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; margin-top:10px; }
.ratio-legend span{ font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; }
.ratio-legend i{ width:9px; height:9px; border-radius:2px; flex:none; border:1px solid rgba(38,35,28,.25); }

/* wire gauge selector */
.gauges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.gauge{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  border:1px solid var(--line); border-radius:99px; padding:6px 11px; color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.gauge:hover{ border-color:var(--ink-soft); color:var(--ink); }
.gauge.is-on{ background:var(--needle); border-color:var(--needle); color:var(--parchment); }
.gauge-note{ font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--ink-soft); margin-top:10px; min-height:2.8em; }

/* handmade band */
.hm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(28px,3.4vw,44px); align-items:start; }
.hmcard{
  border:1px solid var(--paper-line); border-radius:3px; padding:clamp(22px,2.4vw,30px);
  color:var(--parchment); background:linear-gradient(180deg, rgba(243,237,222,.045), rgba(243,237,222,0));
  display:flex; flex-direction:column;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.hmcard:hover{ background:rgba(243,237,222,.07); border-color:rgba(243,237,222,.4); transform:translateY(-4px); }
.hmcard .pv{ width:104px; height:104px; color:#E9E2CF; margin-bottom:12px; }
.hm-kicker{ font-family:var(--mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:#D08A5C; }
.hmcard h3{ font-family:var(--serif); font-size:23px; font-weight:500; margin:8px 0; }
.hmcard > p{ font-size:13.5px; color:rgba(243,237,222,.72); line-height:1.65; }
.hm-note{
  margin-top:14px; border-left:2px solid #D08A5C; padding-left:13px;
  font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.55; color:var(--parchment);
}
.hm-note cite{ display:block; font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:rgba(243,237,222,.55); margin-top:7px; }
.hm-meta{
  display:flex; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--paper-line); font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:rgba(243,237,222,.62);
}
.hm-ctas{ display:flex; gap:12px; margin-top:14px; align-items:center; }
.hmcard .btn--quiet{ color:var(--parchment); }

/* wesley asides */
.w-aside{ max-width:760px; margin:clamp(44px,6vw,72px) auto 0; }
.quoteblock--sm{ font-size:clamp(19px,2.1vw,25px); max-width:none; }

/* request form */
.req-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,80px); align-items:start; }
.req-form{ display:grid; gap:16px; }
.req-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.input{
  font:inherit; font-size:15px; width:100%; background:var(--parchment); color:var(--ink);
  border:1px solid var(--line); border-radius:2px; padding:13px 14px; transition:border-color .3s, box-shadow .3s;
}
.input:focus{ outline:none; border-color:var(--sienna); box-shadow:0 0 0 1px var(--sienna); }
textarea.input{ resize:vertical; min-height:112px; }
.req-hint{ font-family:var(--mono); font-size:10.5px; line-height:1.7; color:var(--ink-soft); letter-spacing:.04em; }

/* product detail drawer */
.drawer-veil{
  position:fixed; inset:0; z-index:105; background:rgba(38,35,28,.45);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s;
}
.drawer-veil.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:110; width:min(480px, 94vw);
  background:var(--parchment); border-left:1px solid var(--line);
  box-shadow:-30px 0 80px -40px rgba(17,24,14,.55);
  transform:translateX(104%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.is-open{ transform:none; }
.d-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line); flex:none; }
.d-kicker{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--sienna-deep); }
.d-close{ width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease); flex:none; }
.d-close:hover{ background:var(--ink); color:var(--parchment); border-color:var(--ink); }
.d-body{ overflow-y:auto; padding:24px 26px 36px; }
.d-fig{ display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#EFE8D6,var(--parchment)); border:1px solid var(--line); border-radius:3px; padding:28px; }
.d-fig .pv{ width:150px; height:150px; }
.d-name{ font-family:var(--serif); font-size:30px; font-weight:500; line-height:1.15; margin:16px 0 4px; }
.d-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--sienna-deep); }
.d-desc{ margin-top:12px; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.d-sec{ margin-top:18px; }
.d-sec h5{ font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--sienna-deep); margin-bottom:7px; font-weight:500; }
.d-sec p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
.d-note{ margin-top:18px; border-left:2px solid var(--sienna); padding:2px 0 2px 14px; font-family:var(--serif); font-style:italic; font-size:16.5px; line-height:1.6; color:var(--ink); }
.d-note cite{ display:block; font-family:var(--mono); font-style:normal; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.d-table{ width:100%; border-collapse:collapse; margin-top:8px; font-family:var(--mono); font-size:11.5px; }
.d-table td{ padding:8px 6px; border-bottom:1px solid var(--line); color:var(--ink-soft); line-height:1.5; }
.d-table td:first-child{ font-weight:500; color:var(--ink); white-space:nowrap; }
.d-table td:last-child{ text-align:right; white-space:nowrap; }
.d-ctas{ display:grid; gap:10px; margin-top:22px; }
.d-ctas .btn{ justify-content:center; }
.stock{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:99px; padding:5px 12px;
}
.stock i{ width:7px; height:7px; border-radius:50%; background:var(--needle); flex:none; }
.stock.is-commission i{ background:var(--sienna); }

/* barn responsive */
@media (max-width:1080px){
  .barn-hero-grid{ grid-template-columns:1fr; }
  .barn-hero-art{ max-width:420px; margin:8px auto 0; }
  .pgrid{ grid-template-columns:repeat(2,1fr); }
  .hm-grid{ grid-template-columns:repeat(2,1fr); }
  .req-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .pgrid{ grid-template-columns:1fr; }
  .hm-grid{ grid-template-columns:1fr; }
  .req-row{ grid-template-columns:1fr; }
  .drawer{ width:100vw; border-left:0; }
  .p-meta, .hm-meta{ flex-wrap:wrap; }   /* long price ranges on narrow phones */
}

/* ---------- touch ergonomics (phones & tablets only) ---------- */
@media (pointer:coarse){
  .f-chip{ padding:11px 16px; }
  .c-stage{ padding:10px 15px; }
  .gauge{ padding:9px 13px; }
  .input{ font-size:16px; }   /* <16px makes iOS Safari zoom on focus */
  .d-body{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .menu{ overscroll-behavior:contain; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .enso-draw .enso-path{ stroke-dashoffset:0; animation:none; }
}