/* ═══════════════════════════════════════════════════════════
   CHENGAL WORKS — end-grain naturalist craft
   heartwood russet · sapwood cream · lacquer black · brass
   ═══════════════════════════════════════════════════════════ */

:root{
  --black:#17110D;
  --russet:#4A2A1B;
  --russet-2:#3A2015;
  --cream:#E7D9C3;
  --cream-70:#B2A28C;
  --brass:#A8804A;
  --line:#33241A;

  --f-disp:"Zilla Slab",Georgia,serif;
  --f-body:"Assistant",system-ui,sans-serif;
  --f-mono:"Nanum Gothic Coding",ui-monospace,monospace;

  --s-1:clamp(.72rem,.68rem + .16vw,.8rem);
  --s0:clamp(1rem,.96rem + .2vw,1.09rem);
  --s1:clamp(1.12rem,1.02rem + .45vw,1.34rem);
  --s2:clamp(1.4rem,1.15rem + 1.1vw,2.05rem);
  --s3:clamp(1.85rem,1.3rem + 2.4vw,3.2rem);
  --s4:clamp(2.2rem,1.4rem + 3.4vw,4.3rem);

  --gut:clamp(1.35rem,5vw,4.5rem);
  --maxw:78rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--f-body);font-weight:300;font-size:var(--s0);line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:500;line-height:1.08;text-wrap:balance}
p{margin:0 0 1em}
::selection{background:var(--brass);color:var(--black)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--brass);color:var(--black);padding:.7rem 1.1rem;font-family:var(--f-mono);font-size:var(--s-1)}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.kicker{font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.13em;text-transform:uppercase;color:#8C7660;margin:0 0 1rem}
.dim{color:#B3A28C}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){.reveal{animation:up linear both;animation-timeline:view();animation-range:entry 4% cover 20%}}
  @supports not (animation-timeline:view()){
    .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
    .js .reveal.in{opacity:1;transform:none}
  }
}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:60;transition:transform .34s,background .3s}
.hdr.up{transform:translateY(-102%)}
.hdr.solid{background:rgba(23,17,13,.95);border-bottom:1px solid var(--line)}
.hdr__in{max-width:var(--maxw);margin-inline:auto;padding:.9rem var(--gut);display:flex;align-items:center;gap:1.3rem}
.mark{font-family:var(--f-disp);font-weight:600;font-size:1.1rem;letter-spacing:.1em;text-decoration:none;display:flex;gap:.45rem;white-space:nowrap}
.mark span{color:var(--brass)}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.nav a{text-decoration:none;font-size:var(--s-1);color:#B3A28C;white-space:nowrap;padding:.5rem 0;border-bottom:1px solid transparent;transition:.2s}
.nav a:hover{color:var(--cream);border-bottom-color:var(--brass)}
.nav__cta{background:var(--brass);color:var(--black)!important;padding:.55rem 1rem!important;border:0!important;font-weight:600}
.nav__cta:hover{background:var(--cream)}
.burger{display:none}
@media (max-width:1040px){
  .nav{position:fixed;inset:0;z-index:65;background:var(--black);flex-direction:column;justify-content:center;gap:1.4rem;margin:0;visibility:hidden;opacity:0;transition:.3s}
  .nav.open{visibility:visible;opacity:1}
  .nav a{font-size:1.14rem}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;z-index:70}
  .burger span{display:block;height:1.6px;background:var(--cream);transition:.3s}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:7rem var(--gut) 3rem;overflow:hidden}
.hero__disc{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__in{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;width:100%}
.hero__h{font-size:var(--s4);line-height:1.1;margin-bottom:1.4rem}
.hero__sub{max-width:34rem;color:#BFAF98;font-size:var(--s1);line-height:1.58}
.lnk{display:inline-flex;align-items:center;min-height:46px;padding:.6rem 0;font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--brass);color:var(--brass);transition:.22s}
.lnk:hover{color:var(--cream);border-bottom-color:var(--cream)}
.lnk--go{margin-top:1.8rem}
.lnk--big{border:1px solid var(--brass);padding:.9rem 2rem}
.lnk--big:hover{background:var(--brass);color:var(--black);border-color:var(--brass)}

/* lede */
.lede{max-width:54rem;margin-inline:auto;padding:clamp(3rem,8vh,5.5rem) var(--gut);border-top:1px solid var(--line)}
.lede p{font-size:var(--s1);line-height:1.6;color:#BFAF98}
.lede p:first-child{color:var(--cream)}

/* ══ THE RINGS ═════════════════════════════════════════════ */
.rings{position:relative;background:var(--russet-2)}
.js .rings{height:340svh}
.rings__pin{display:none}
.js .rings__pin{display:block;position:sticky;top:0;height:100svh;overflow:hidden}
.rings__cv{position:absolute;inset:0;width:100%;height:100%}
.rings__ui{
  position:absolute;left:var(--gut);bottom:clamp(2.5rem,8vh,5rem);z-index:2;max-width:min(30rem,72vw);
}
.rings__year{font-family:var(--f-mono);font-size:clamp(2.6rem,8vw,5.4rem);line-height:1;margin:0;color:var(--cream);font-variant-numeric:tabular-nums}
.rings__d{font-family:var(--f-mono);font-size:.82rem;color:var(--brass);margin:.3rem 0 1rem}
.rings__ev{font-size:var(--s1);line-height:1.5;color:#D6C6AE;margin:0;min-height:4.6em}
.rings__cue{position:absolute;bottom:1rem;left:0;right:0;text-align:center;margin:0;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(231,217,195,.32);transition:opacity .4s;z-index:2}
.rings__cue.gone{opacity:0}
.rings__fallback{max-width:46rem;margin-inline:auto;padding:5rem var(--gut)}
.js .rings__fallback{display:none}
.rings__fallback h2{font-size:var(--s2);margin-bottom:1.2rem}
.rings__fallback p{color:#BFAF98}

/* sections */
.sect{max-width:var(--maxw);margin-inline:auto;padding:clamp(3.2rem,8vh,5.5rem) var(--gut);border-top:1px solid var(--line)}
.sect__hd{margin-bottom:clamp(1.8rem,4vh,2.8rem);max-width:46rem}
.sect__hd h2{font-size:var(--s3)}
.sect__lead{margin-top:1.1rem;color:#BFAF98;max-width:42rem}

/* conversion rig */
.cutrig{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:940px){.cutrig{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}}
.cutrig__cv{border:1px solid var(--line);background:var(--russet-2)}
#cutCv{width:100%;aspect-ratio:1/.82}
.cutrig__side{display:flex;flex-direction:column;gap:1.1rem}
.cuts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(3,1fr)}
.cut{background:var(--russet-2);border:0;cursor:pointer;color:#BFAF98;padding:.7rem .6rem;min-height:56px;display:flex;flex-direction:column;gap:.1rem;transition:.2s;text-align:left}
.cut:hover{background:var(--russet)}
.cut.on{background:var(--brass);color:var(--black)}
.cut b{font-family:var(--f-disp);font-weight:500;font-size:.9rem;line-height:1.15}
.cut span{font-family:var(--f-mono);font-size:.6rem;opacity:.75}
.cutinfo{margin:0;display:grid;gap:.5rem;border-block:1px solid var(--line);padding:.9rem 0}
.cutinfo div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.cutinfo dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8C7660}
.cutinfo dd{margin:0;font-family:var(--f-mono);font-size:.92rem;color:var(--brass);font-variant-numeric:tabular-nums;text-align:right}
.cutnote{color:#BFAF98;font-size:calc(var(--s0) * .93);margin:0;min-height:6em}

/* tables */
.tablewrap{overflow-x:auto;border-block:1px solid var(--brass)}
.tbl{width:100%;border-collapse:collapse;min-width:42rem;font-size:calc(var(--s0) * .92)}
.tbl th,.tbl td{text-align:left;padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:#8C7660;font-weight:400}
.tbl tbody th{font-family:var(--f-disp);font-weight:500;font-size:1.02rem;color:var(--cream);padding-right:1.2rem;white-space:nowrap}
.tbl td{color:#BFAF98}
.tbl .num{font-family:var(--f-mono);color:var(--brass);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tfoot th,.tbl tfoot td{border-bottom:0;padding-top:1rem;color:var(--cream)}
.timber__note{margin-top:1.3rem;max-width:44rem;color:#BFAF98;font-size:calc(var(--s0) * .93);border-left:2px solid var(--brass);padding-left:1rem}

/* joints */
/* 3 cards — go straight from 1 column to 3, never 2, so the last row is never
   short. The hairline is drawn per-cell instead of by painting the container
   behind a 1px gap, so an unfilled track could never read as a slab. */
.joints{display:grid;gap:1px;grid-template-columns:1fr}
@media (min-width:920px){.joints{grid-template-columns:repeat(3,1fr)}}
.joints article{background:var(--russet-2);padding:1.5rem 1.4rem;box-shadow:0 0 0 1px var(--line)}
.joints h3{font-size:var(--s1);margin-bottom:.6rem}
.joints p{color:#BFAF98;font-size:calc(var(--s0) * .92);margin:0}
.joints__no{margin-top:1.4rem;border:1px solid var(--brass);padding:1.3rem 1.3rem;max-width:46rem}
.joints__no h3{font-family:var(--f-mono);font-weight:400;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:.7rem}
.joints__no p{color:#BFAF98;font-size:calc(var(--s0) * .93);margin:0}

/* faq */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{cursor:pointer;list-style:none;padding:1.05rem 2.4rem 1.05rem 0;position:relative;font-family:var(--f-disp);font-weight:500;font-size:var(--s1);min-height:44px;display:flex;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);color:var(--brass);font-family:var(--f-mono)}
.q[open] summary::after{content:"–"}
.q p{color:#BFAF98;max-width:48rem;padding-bottom:1.2rem;margin:0;font-size:calc(var(--s0) * .93)}

/* visit */
.visit{background:var(--russet);padding:clamp(3.4rem,10vh,6.5rem) var(--gut)}
.visit__in{max-width:var(--maxw);margin-inline:auto}
.visit .kicker{color:#C2A785}
.visit h2{font-size:var(--s3);margin-bottom:1.1rem}
.visit__lead{max-width:38rem;color:#DBCBB4}
.visit__grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));margin:2.3rem 0 0;border-top:1px solid rgba(231,217,195,.24);padding-top:1.4rem}
.visit__grid h3{font-family:var(--f-mono);font-weight:400;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#C2A785;margin-bottom:.5rem}
.visit__grid p{color:#E0D2BB;margin:0;line-height:1.74}
.visit__grid a{color:#F0C88C;text-decoration:none}
.visit__grid a:hover{text-decoration:underline}

/* footer */
.ftr{padding:2.4rem var(--gut) 3rem;border-top:1px solid var(--line)}
.ftr__in{max-width:var(--maxw);margin-inline:auto}
.ftr__mark{font-family:var(--f-disp);font-weight:600;font-size:1rem;letter-spacing:.1em;margin-bottom:.4rem}
.ftr p{color:#8C7660;font-size:var(--s-1);margin:0 0 .3rem}
.ftr__fine{margin-top:.9rem!important;max-width:46rem;color:#6B5A49!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .rings{height:auto}
  .js .rings__pin{position:static;height:auto;min-height:100svh}
  .js .rings__fallback{display:block;border-top:1px solid var(--line)}
  .rings__cue{display:none}
}