/* ══════════════════════════════════════════════════════════════
   Amurtaya — design system built on the Oryzo grammar
   tokens · type scale · grid · dashlines · pills · pinned sections
   ══════════════════════════════════════════════════════════════ */
:root{
  --vh:1vh;
  --display-font:"Figtree",system-ui,-apple-system,sans-serif;
  --serif-font:"Literata",Georgia,serif;
  --mono-font:"DM Mono",ui-monospace,Menlo,monospace;

  --color-white:#ffedd7;
  --color-white-60:#ffedd799;
  --color-white-30:#ffedd74d;
  --color-black:#100904;
  --color-green:#445231;
  --color-green-light:#5d6c49;
  --color-green-deep:#2c361f;
  --color-green-lightest:#f6e0c6;
  --color-orange:#dc5000;
  --color-brown:#382416;
  --color-grey-brown:#6c5f51;
  --color-pre:#4b5c3d;

  --site-padding-x:3.125vw;
  --site-row-height:calc(var(--site-padding-x) * 8 / 60);
  --site-padding-y:calc(var(--site-row-height) * 4);
  --inner-width:calc(100vw - var(--site-padding-x) * 2);
  --screen-unit:min(var(--inner-width) / 1800, calc(var(--vh) * 100) / 1024 * 1.25);

  --h1:calc(164 * var(--screen-unit));
  --h2:calc(68 * var(--screen-unit));
  --h3:calc(45 * var(--screen-unit));
  --h4:calc(32 * var(--screen-unit));
  --h5:calc(20 * var(--screen-unit));
  --sub1:calc(24 * var(--screen-unit));
  --sub2:calc(16 * var(--screen-unit));
  --body1:calc(38 * var(--screen-unit));
  --body2:calc(24 * var(--screen-unit));
  --body3:calc(18 * var(--screen-unit));
  --default:calc(18 * var(--screen-unit));
  --btn:calc(16 * var(--screen-unit));

  --grid-columns:16;
  --gap:calc(var(--inner-width) / 60);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-oryzo:cubic-bezier(.3,0,.66,-.3);
}
@media (max-width:767.98px){
  :root{
    --site-padding-x:calc(16 * 100vw / 375);
    --site-row-height:5px;
    --screen-unit:calc(var(--inner-width) / 343);
    --h1:calc(84 * var(--screen-unit));
    --h2:calc(38 * var(--screen-unit));
    --h3:calc(26 * var(--screen-unit));
    --h4:calc(18 * var(--screen-unit));
    --h5:calc(14 * var(--screen-unit));
    --body1:calc(20 * var(--screen-unit));
    --body2:calc(16 * var(--screen-unit));
    --body3:calc(14 * var(--screen-unit));
    --sub1:calc(16 * var(--screen-unit));
    --sub2:calc(12 * var(--screen-unit));
    --default:calc(14 * var(--screen-unit));
    --btn:calc(12 * var(--screen-unit));
  }
}

/* ── base ─────────────────────────────────────────── */
*{box-sizing:border-box}
html{background:var(--color-green)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;width:100%;overscroll-behavior:none;
  background:var(--color-green);color:var(--color-white);
  font-family:var(--display-font);font-weight:500;font-size:var(--default);line-height:1.2;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--color-orange);color:var(--color-black)}
::-webkit-scrollbar{width:0;height:0}

h1,h2,h3,h4,h5{margin:0;padding:0;font-weight:500}
h1{font-size:var(--h1);line-height:.9;text-transform:uppercase;letter-spacing:-.01em}
h2{font-size:var(--h2);line-height:.9;text-transform:uppercase;letter-spacing:-.01em}
h3{font-size:var(--h3);line-height:.95;text-transform:uppercase}
h4{font-size:var(--h4);line-height:1;text-transform:uppercase}
h5{font-size:var(--h5);line-height:1.05;text-transform:uppercase;font-weight:600}
.sub1{font-size:var(--sub1);font-weight:500;text-transform:uppercase;line-height:1.1}
.sub2{font-size:var(--sub2);font-weight:500;line-height:1.09;text-transform:uppercase;color:var(--color-white-60)}
.body1{font-weight:400;font-size:var(--body1);line-height:1.222}
.body2{font-weight:400;font-size:var(--body2);line-height:1.333}
.body3{font-weight:400;font-size:var(--body3);line-height:1.5;color:var(--color-white-60)}
.mono{font-family:var(--mono-font);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.serif{font-family:var(--serif-font);font-weight:300;font-style:italic;text-transform:none;letter-spacing:0}
p{margin:0}
.o-container{width:100%;padding:0 var(--site-padding-x)}
.o-dashline{
  --dashline-color:var(--color-white);
  height:1px;width:100%;
  background:repeating-linear-gradient(90deg,var(--dashline-color) 0 2px,transparent 0 4px);
}
.is-light .o-dashline,.section.is-light .o-dashline{--dashline-color:var(--color-black)}
.row{display:flex;justify-content:space-between;align-items:center;gap:1em}
.w-100{width:100%}

/* ── buttons ──────────────────────────────────────── */
.btn{
  --btn-color:var(--color-white);--btn-active-color:var(--color-black);
  --btn-text-color:var(--color-black);--btn-active-text-color:var(--color-white);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  line-height:1.1;text-transform:uppercase;padding:1.2em 2em;overflow:hidden;
  background-color:var(--btn-color);color:var(--btn-text-color);border:0;z-index:0;cursor:pointer;
  white-space:nowrap;border-radius:3em;font-weight:500;font-size:var(--btn);
  transition:background-color .18s ease-in-out,color .18s,transform .18s;
}
.btn:hover{background-color:var(--btn-active-color);color:var(--btn-active-text-color)}
.btn:active{transform:scale(.97)}
.btn.is-large{padding:1.5em 3em}
.btn.is-orange{--btn-color:var(--color-orange);--btn-active-color:var(--color-white);--btn-text-color:#fff;--btn-active-text-color:var(--color-black);font-weight:600}
.btn.is-dark{--btn-color:var(--color-brown);--btn-active-color:var(--color-brown);--btn-text-color:var(--color-white);--btn-active-text-color:var(--color-white);border:2px solid transparent}
.btn.is-dark:hover{border-color:var(--color-orange);box-shadow:inset 0 0 .75em rgba(220,80,0,.8)}
.btn.is-ghost{--btn-color:transparent;--btn-text-color:var(--color-white);--btn-active-color:var(--color-white);--btn-active-text-color:var(--color-black);border:1px solid var(--color-white-30)}
.is-light .btn.is-ghost{--btn-text-color:var(--color-black);--btn-active-color:var(--color-black);--btn-active-text-color:var(--color-white);border-color:#10090440}
.btn:disabled{opacity:.4;cursor:not-allowed}
.xbtn{background:none;border:0;cursor:pointer;font-size:var(--sub2);text-transform:uppercase;font-weight:500;color:var(--color-white-60);padding:.4em 0}
.xbtn:hover{color:var(--color-white)}

/* ── preloader ────────────────────────────────────── */
#preloader{position:fixed;inset:0;z-index:100;background:var(--color-pre);display:grid;place-items:center;padding:var(--site-padding-x)}
#preloader-inner{width:min(26em,78vw);text-align:center}
#preloader-mark{font-size:var(--h3);letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;font-weight:500;line-height:1}
#preloader-bar{height:1px;background:rgba(255,237,215,.22);margin:1.6em 0 .9em;overflow:hidden}
#preloader-bar i{display:block;height:100%;width:0;background:var(--color-white);transition:width .25s linear}
#preloader-row{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--sub2)}
#preloader-row .sub2{color:rgba(255,237,215,.55)}
#preloader-count{color:var(--color-white)}

/* ── header ───────────────────────────────────────── */
#site-header{
  position:fixed;left:var(--site-padding-x);right:var(--site-padding-x);top:var(--site-padding-y);z-index:10;
  display:flex;align-items:flex-start;justify-content:space-between;
  font-size:var(--sub2);text-transform:uppercase;font-weight:500;
  transition:color .35s;
}
#site-header-logo{display:flex;align-items:baseline;gap:.9em;font-size:var(--h5);font-weight:600;padding-bottom:.9em}
#site-header-logo .sub2{color:inherit;opacity:.6}
#site-header-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2em;padding-bottom:.9em}
#site-header-nav li{transition:opacity .18s}
#site-header-nav:hover li{opacity:.5}
#site-header-nav:hover li:hover{opacity:1}
#site-header-nav li.is-active a::after{content:"";display:block;height:1px;background:currentColor;margin-top:.25em}
#site-header-line{position:absolute;left:0;right:0;bottom:0}
/* full-width blur band behind the fixed header, shown once the page has scrolled */
#site-header::before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--site-padding-x));right:calc(-1 * var(--site-padding-x));
  top:calc(-1 * var(--site-padding-y));bottom:-1px;background:rgba(16,9,4,.42);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  opacity:0;transition:opacity .35s}
#site-header.is-solid::before{opacity:1}
#site-header.is-light::before{background:rgba(246,224,198,.82)}
#site-header.is-light{color:var(--color-black)}
#site-header.is-light .o-dashline{--dashline-color:var(--color-black)}
@media (max-width:767.98px){#site-header-nav ul{gap:1.1em}#site-header-logo .sub2{display:none}}

/* ── sections ─────────────────────────────────────── */
.section{position:relative;width:100%;background:var(--color-green)}
.section.is-black{background:var(--color-black)}
.section.is-light{background:var(--color-green-lightest);color:var(--color-black)}
.section.is-light .sub2{color:#100904a6}
.section.is-light .body3{color:#100904a6}
.section.is-deep{background:var(--color-green-deep)}
.section__inner{position:relative;padding-top:var(--site-padding-y);padding-bottom:var(--site-padding-y)}
.section__inner.is-full{height:calc(var(--vh) * 100);display:flex;flex-direction:column;justify-content:center}
@supports (height:100svh){ .section__inner.is-full{height:100svh} }
.section__pin{position:sticky;top:0;height:calc(var(--vh) * 100);overflow:hidden}
@supports (height:100svh){ .section__pin{height:100svh} }   /* svh = smallest viewport: never taller than what's visible */
.pad{padding:calc(var(--site-padding-y) * 3) var(--site-padding-x)}

/* split text masks (SplitText mask:'lines' adds overflow hidden wrappers) */
.split{visibility:hidden}
.split.is-split{visibility:visible}

/* ── image loading skeletons ──────────────────────── */
@keyframes shimmer{to{background-position:-200% 0}}
.card__media,.stage,.citem img{background-image:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.09) 40%,rgba(255,255,255,0) 60%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.card__media.is-ready,.stage.is-ready,.citem img.is-ready{animation:none;background-image:none}
.card__media img,.citem img,.fig img{opacity:0;transition:opacity .5s var(--ease-out)}
.card__media img.is-loaded,.citem img.is-loaded,.fig img.is-loaded{opacity:1}

/* ── JOURNEY (one pinned scene) ───────────────────── */
#journey{height:calc(var(--vh) * 1100)}
#journey .section__pin{background:var(--color-green)}
#world{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Drags inside this zone rotate the piece and never scroll the page; outside it, scrolling is
   completely native — the two gestures never fight. */
#world-grab{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(34em,70%);height:46%;z-index:1;touch-action:none;cursor:grab}
#world-grab:active{cursor:grabbing}
@media (max-width:820px){ #world-grab{width:78%;height:34%;top:40%} }
#drag-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
  color:var(--color-white-60);opacity:0;animation:hint-in 1s var(--ease-out) 2.4s forwards;transition:opacity .4s}
#drag-hint span{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--color-white-30);border-radius:3em;padding:.7em 1.2em;
  background:rgba(16,9,4,.28)}
#drag-hint span::before{content:"";width:1.1em;height:1.1em;border:1px solid currentColor;border-radius:50%;
  border-left-color:transparent;border-right-color:transparent;animation:spin 3s linear infinite}
#drag-hint.gone{opacity:0!important;animation:none}
@keyframes hint-in{to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.layer{position:absolute;inset:0;padding:var(--site-padding-y) var(--site-padding-x);opacity:0;visibility:hidden;
  pointer-events:none;                               /* the canvas underneath must stay draggable */
  transition:opacity .45s var(--ease-out),visibility 0s .45s}
.layer.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out)}
.layer a,.layer button,.layer input,.layer select{pointer-events:auto}   /* only real controls take the pointer */
#lay-hero{will-change:transform}
.kin i,#statement-h1 .line span{will-change:transform}

/* A · hero */
#hero-top{position:absolute;left:var(--site-padding-x);top:calc(var(--site-padding-y) + 3.6em);font-size:var(--sub1)}
#hero-top-tagline{display:flex;flex-wrap:wrap;gap:.25em;max-width:9em}
#hero-top-tagline > div{overflow:hidden}
#hero-copy{position:absolute;right:var(--site-padding-x);top:50%;transform:translateY(-50%);width:32%;text-align:right;font-weight:400}
#hero-copy .serif{font-size:1.15em}
#hero-title{position:absolute;left:var(--site-padding-x);bottom:calc(var(--site-padding-y) * 1.1);right:var(--site-padding-x);pointer-events:none}
#hero-title h1{font-size:calc(var(--h1) * 1.22);letter-spacing:-.03em;line-height:.82}
#hero-card{position:absolute;left:var(--site-padding-x);bottom:calc(var(--site-padding-y) * 1.1 + var(--h1) * 1.25);width:20em}
#hero-card h4{display:flex;align-items:center;gap:.5em;font-size:var(--sub2)}
#hero-card h4 i{width:.5em;height:.5em;border-radius:50%;background:var(--color-orange);animation:dot-blink 1.4s infinite}
@keyframes dot-blink{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}
#hero-card .o-dashline{margin:.9em 0}
#hero-cta{position:absolute;right:var(--site-padding-x);bottom:calc(var(--site-padding-y) * 1.1);display:flex;gap:.6em}
#hero-scroll{position:absolute;left:50%;bottom:var(--site-padding-y);transform:translateX(-50%);font-size:var(--sub2);display:flex;align-items:center;gap:.8em}
#hero-scroll i{display:block;width:5px;height:5px;border-radius:50%;background:var(--color-white)}

/* B · statement */
#lay-statement{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(var(--site-padding-y) * 2)}
#statement-h1{font-size:calc(var(--h1) * .8);margin-top:.3em}
#statement-h1 .line{display:block}
#statement-h1 .serif{color:var(--color-orange)}

/* C · callouts around the turning model */
#callouts-label{position:absolute;left:var(--site-padding-x);top:calc(var(--site-padding-y) + 3.6em)}
.callout{position:absolute;width:min(22em,34vw);opacity:0}
.callout h3{font-size:var(--h3);margin:.35em 0 .5em}
.callout h3 .serif{color:var(--color-orange)}
.callout .o-dashline{margin-bottom:.8em}
.callout .body3{max-width:22em}
.callout-stat{font-family:var(--mono-font);font-size:var(--h4);margin-top:.8em;color:var(--color-white)}
.callout-stat small{font-size:.45em;color:var(--color-orange);margin-left:.2em;vertical-align:top}
.callout-0{left:var(--site-padding-x);top:28%}
.callout-1{right:var(--site-padding-x);top:22%;text-align:right}
.callout-1 .body3{margin-left:auto}
.callout-2{right:var(--site-padding-x);bottom:calc(var(--site-padding-y) * 1.5);text-align:right}
.callout-2 .body3{margin-left:auto}

/* D–H · making (reuses the forge UI) */
#lay-stage{display:grid;grid-template-rows:auto 1fr auto}
#forge-top{display:flex;justify-content:space-between;align-items:flex-start;padding-top:3.4em}
#forge-idx{font-size:var(--h1);line-height:.8;letter-spacing:-.03em;color:var(--color-white-30)}
#forge-idx b{font-weight:500;color:var(--color-white)}
#forge-stage{align-self:end;max-width:min(38em,44vw);margin-bottom:1.2em}
#forge-stage h2{margin:.25em 0 .35em}
#forge-stage h2 .serif{color:var(--color-orange)}
#forge-stage .body2{max-width:24em;font-weight:400}
#forge-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding-top:.8em;position:relative}
#forge-rail::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,var(--color-white) 0 2px,transparent 0 4px);opacity:.6}
.forge-step{position:relative;padding-top:.4em}
.forge-step i{position:absolute;top:-.85em;left:0;height:2px;width:0;background:var(--color-orange)}
.forge-step b{display:block;font-size:var(--sub1);font-weight:500;text-transform:uppercase;color:var(--color-white-30);transition:color .3s;margin-top:.15em}
.forge-step.on .sub2{color:var(--color-orange)}
.forge-step.on b{color:var(--color-white)}
#forge-read{display:flex;gap:2.4em;margin-top:1em;font-size:var(--sub2)}
#forge-read strong{display:block;font-family:var(--mono-font);font-weight:400;font-size:var(--h4);color:var(--color-white);margin-top:.2em;text-transform:none}

@media (max-width:900px){
  #hero-copy{position:absolute;left:var(--site-padding-x);right:auto;top:auto;bottom:calc(var(--site-padding-y) * 1.1 + var(--h1) * 1.05);transform:none;width:70%;text-align:left}
  #hero-card,#hero-scroll{display:none}
  #hero-cta{left:var(--site-padding-x);right:auto;bottom:var(--site-padding-y);flex-wrap:wrap}
  #hero-title{bottom:calc(var(--site-padding-y) * 5)}
  .callout{width:70vw}
  .callout-0{top:auto;bottom:calc(var(--site-padding-y)*1.5)}
  .callout-1,.callout-2{left:var(--site-padding-x);right:auto;top:auto;bottom:calc(var(--site-padding-y)*1.5);text-align:left}
  .callout-1 .body3,.callout-2 .body3{margin-left:0}
  #forge-stage{max-width:none}#forge-idx{font-size:calc(var(--h1) * .6)}#forge-read{gap:1.4em}
}

/* ── COLLECTION (light) ───────────────────────────── */
#collection-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1em;margin-bottom:calc(var(--site-padding-y) * 1.4)}
#collection-head .body2{max-width:22em;font-weight:400}
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media (max-width:1100px){.grid-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid-products{grid-template-columns:1fr}}
.card{position:relative;cursor:pointer;display:flex;flex-direction:column}
.card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#e9d3b6;border-radius:.5em}
.card__media img{width:100%;height:100%;object-fit:contain;padding:6% 8%;   /* transparent cut-outs: fit the whole piece, never crop it */
  transition:transform 1s var(--ease-out),filter .4s}
.card__media img.is-placeholder{object-fit:cover;padding:0}   /* generated art already fills its own frame */
.card:hover .card__media img{transform:scale(1.04)}
.card__tag{position:absolute;top:1em;left:1em;font-family:var(--mono-font);font-size:var(--sub2);text-transform:uppercase;background:var(--color-black);color:var(--color-white);padding:.45em .7em;border-radius:2em}
.is-light .card__tag{background:var(--color-black)}
.card__body{padding:1em 0 0}
.card__body .o-dashline{margin:.7em 0}
.card__title{font-size:var(--h4);text-transform:uppercase;line-height:1;margin:0}
.card__meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--sub2)}
.card__meta .mono{font-size:var(--body3)}
.dots{display:flex;gap:4px}
.dots i{width:.55em;height:.55em;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px #10090433}
.card__cta{position:absolute;top:1em;right:1em;opacity:0;transform:translateY(-6px);transition:.35s var(--ease-out)}
.card:hover .card__cta{opacity:1;transform:none}
.card__cta .btn{padding:.9em 1.4em}
.price s{opacity:.45;margin-right:.5em}

/* ── NUMBERS ──────────────────────────────────────── */
#numbers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:calc(var(--site-padding-y) * 1.5)}
.number-item{position:relative;padding-top:1.4em}
.number-item .o-dashline{position:absolute;top:0;left:0;right:0}
.number-item .sub2{max-width:14em;min-height:2.4em}
.number-item strong{display:block;font-size:calc(var(--h1) * 1.15);line-height:.85;letter-spacing:-.04em;font-weight:500;margin:.35em 0 .3em}
.number-item strong small{font-size:.28em;letter-spacing:0;margin-left:.1em;color:var(--color-orange);vertical-align:top}
.number-item .body3{max-width:20em}
@media (max-width:900px){#numbers-grid{grid-template-columns:1fr;gap:2.4em}}

/* ── REVIEWS ──────────────────────────────────────── */
#reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1em}
#reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:calc(var(--site-padding-y) * 1.4)}
.review{position:relative;padding-top:1.2em;display:flex;flex-direction:column;gap:1em}
.review .o-dashline{position:absolute;top:0;left:0;right:0}
.review .quote{font-size:var(--sub1);text-transform:none;line-height:1.25;font-weight:500;margin-bottom:.4em}
.review .quote .serif{font-size:1.05em}
.review-by{font-size:var(--sub2)}
.review-by b{display:block;color:var(--color-white);font-weight:500}
@media (max-width:900px){#reviews-grid{grid-template-columns:1fr}}

.review-rating{display:flex;align-items:center;gap:.7em;font-size:var(--sub2)}
.stars{color:var(--color-orange);letter-spacing:.08em;font-size:1.15em;line-height:1}
.stars i{font-style:normal;background:linear-gradient(90deg,var(--color-orange) 50%,var(--color-white-30) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── MARQUEE ──────────────────────────────────────── */
.marquee{overflow:hidden;padding:var(--site-padding-y) 0;position:relative}
.marquee .o-dashline{position:absolute;left:0;right:0}
.marquee .o-dashline:first-child{top:0}
.marquee .o-dashline:last-child{bottom:0}
.marquee__track{display:flex;width:max-content;font-size:var(--h3);line-height:1;font-weight:400;letter-spacing:-.01em;will-change:transform}
.marquee__track > span{display:inline-block;white-space:nowrap}
.marquee__track .serif{color:var(--color-orange)}
.marquee__track i{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--color-orange);margin:0 1.2em;vertical-align:middle}

/* ── FOOTER ───────────────────────────────────────── */
#footer .section__inner{min-height:calc(var(--vh) * 100);display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(var(--site-padding-y) * 4)}
#footer h1{font-size:calc(var(--h1) * 1.05)}
#footer h1 .serif{color:var(--color-orange)}
#footer-grid{display:grid;grid-template-columns:6fr 3fr 3fr 4fr;gap:var(--gap);margin-top:calc(var(--site-padding-y) * 2)}
#footer-grid .sub2{margin-bottom:1em}
#footer-grid a{display:block;font-size:var(--body3);padding:.15em 0;transition:opacity .18s}
#footer-grid a:hover{opacity:.6}
#footer-news{display:flex;border-bottom:1px solid var(--color-white-30);padding-bottom:.5em;margin-top:.4em}
#footer-news input{flex:1;background:none;border:0;outline:none;font-size:var(--body3);font-weight:400;color:var(--color-white)}
#footer-news input::placeholder{color:var(--color-white-30)}
#footer-news button{background:none;border:0;cursor:pointer;font-size:var(--sub2);text-transform:uppercase;color:var(--color-orange)}
#footer-bottom{display:flex;justify-content:space-between;gap:1em;font-size:var(--sub2);padding-top:1em;margin-top:calc(var(--site-padding-y) * 2);flex-wrap:wrap}
@media (max-width:900px){#footer-grid{grid-template-columns:1fr 1fr}}

/* ── SHOP page ────────────────────────────────────── */
.page-head{padding-top:calc(var(--site-padding-y) * 5)}
.page-head .body2{max-width:24em;font-weight:400;margin-top:1em}
.filters{display:flex;gap:.5em;flex-wrap:wrap;margin:calc(var(--site-padding-y) * 1.4) 0}
.chip{border:1px solid #10090440;background:transparent;color:var(--color-black);padding:.7em 1.3em;border-radius:3em;cursor:pointer;font-size:var(--sub2);text-transform:uppercase;font-weight:500;transition:.18s}
.chip:hover,.chip.on{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}
.section.is-green .chip{border-color:var(--color-white-30);color:var(--color-white)}
.section.is-green .chip:hover,.section.is-green .chip.on{background:var(--color-white);color:var(--color-black)}

/* ── PRODUCT page ─────────────────────────────────── */
.pdp{padding-top:calc(var(--site-padding-y) * 5)}
.crumbs{font-size:var(--sub2);margin-bottom:1.6em}
.crumbs a:hover{opacity:.6}
.pdp__grid{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--gap) * 2);align-items:start}
.viewer{position:relative;aspect-ratio:1/1;border-radius:.6em;overflow:hidden;background:radial-gradient(110% 90% at 50% 10%,#5d6c49,var(--color-green-deep) 75%)}
.viewer canvas{width:100%;height:100%;display:block;cursor:grab}
.viewer canvas:active{cursor:grabbing}
.viewer__hint{position:absolute;left:1.2em;bottom:1em;font-size:var(--sub2)}
.viewer__photo{position:absolute;inset:0;object-fit:cover;opacity:0;transition:opacity .4s;pointer-events:none}
.viewer__tabs{display:flex;gap:.5em;margin-top:.9em}
.pdp__info h1{font-size:calc(var(--h2) * 1.2);margin:.15em 0 .4em}
.pdp__info .body2{font-weight:400;max-width:24em}
.pdp__price{display:flex;align-items:baseline;gap:.7em;margin:1.2em 0 .2em;font-size:var(--h4);font-family:var(--mono-font);font-weight:400}
.pdp__block{padding-top:1em;margin-top:1.4em;position:relative}
.pdp__block > .o-dashline{position:absolute;top:0;left:0;right:0}
.pdp__block .sub2{display:flex;justify-content:space-between}
.swatches{display:flex;gap:.7em;flex-wrap:wrap;margin-top:.9em}
.swatch{width:2.8em;height:2.8em;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative;transition:.25s var(--ease-out);box-shadow:inset 0 -.5em .8em rgba(0,0,0,.35),inset 0 .35em .6em rgba(255,255,255,.25)}
.swatch:hover{transform:scale(1.08)}
.swatch.on{border-color:var(--color-white);transform:scale(1.1)}
.swatch.on::after{content:"";position:absolute;inset:-.45em;border:1px solid var(--color-white-30);border-radius:50%}
.sizes{display:flex;gap:.5em;flex-wrap:wrap;margin-top:.9em}
.size{border:1px solid var(--color-white-30);background:transparent;color:var(--color-white-60);padding:.7em 1.2em;border-radius:3em;cursor:pointer;font-size:var(--sub2);text-transform:uppercase;transition:.18s}
.size:hover{color:var(--color-white)}
.size.on{background:var(--color-white);color:var(--color-black);border-color:var(--color-white)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--color-white-30);border-radius:3em;overflow:hidden}
.qty button{background:transparent;border:0;padding:.9em 1.1em;cursor:pointer;color:var(--color-white)}
.qty button:hover{background:var(--color-white-30)}
.qty span{min-width:2.2em;text-align:center;font-family:var(--mono-font)}
.buybar{display:flex;gap:.7em;align-items:center;margin-top:1.6em;flex-wrap:wrap}
.buybar .btn{flex:1;min-width:12em}
.spec{display:flex;justify-content:space-between;padding:.8em 0;font-size:var(--body3);border-bottom:1px dashed var(--color-white-30)}
.spec span:first-child{color:var(--color-white-60);text-transform:uppercase;font-size:var(--sub2)}
@media (max-width:900px){.pdp__grid{grid-template-columns:1fr}}

.stage{position:relative;aspect-ratio:4/5;border-radius:.6em;overflow:hidden;touch-action:pan-y;
  background:radial-gradient(75% 60% at 50% 32%,#65744f 0%,#3a4630 45%,#181d12 100%)}
.stage__floor{position:absolute;left:50%;bottom:7%;width:70%;height:9%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,0) 70%)}
.stage__views{position:absolute;inset:6% 8% 9%}
.stage__3d{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;opacity:0;pointer-events:none;
  touch-action:none;cursor:grab;transition:opacity .35s}
.stage.show-3d .stage__3d{opacity:1;pointer-events:auto}
.stage.show-3d .stage__views,.stage.show-3d .stage__arrow,.stage.show-3d .stage__dots{opacity:0;pointer-events:none}
.stage__3d:active{cursor:grabbing}
.fig{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s}
.fig.on{opacity:1}
.fig__img{position:absolute;inset:0;background:var(--img) center/contain no-repeat}
.stage__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:2.8em;height:2.8em;border-radius:50%;border:1px solid var(--color-white-30);
  background:rgba(16,9,4,.35);color:var(--color-white);cursor:pointer;font-size:var(--body3);backdrop-filter:blur(6px);transition:.2s}
.stage__arrow:hover{background:var(--color-white);color:var(--color-black)}
.stage__arrow.prev{left:1em}.stage__arrow.next{right:1em}
.stage__dots{position:absolute;left:50%;bottom:1.1em;transform:translateX(-50%);display:flex;gap:.45em;z-index:3;transition:opacity .3s}
.stage__dots i{width:.45em;height:.45em;border-radius:50%;background:var(--color-white-30);transition:.25s}
.stage__dots i.on{background:var(--color-orange);transform:scale(1.3)}
.stage__label{position:absolute;left:1.2em;top:1em;z-index:3;color:var(--color-white-60)}
/* same idea as the home page hint: shows the gesture, then gets out of the way */
.stage__full{position:absolute;right:1em;top:1em;z-index:5;border:1px solid var(--color-white-30);
  background:rgba(16,9,4,.4);color:var(--color-white);border-radius:3em;padding:.7em 1.2em;cursor:pointer;
  font-size:var(--sub2);text-transform:uppercase;letter-spacing:.12em;font-weight:500;
  backdrop-filter:blur(6px);transition:.2s;display:flex;align-items:center;gap:.55em}
.stage__full::before{content:"";width:.85em;height:.85em;border:1.5px solid currentColor;border-radius:2px;
  box-shadow:.28em -.28em 0 -.15em currentColor,-.28em .28em 0 -.15em currentColor}
.stage__full:hover{background:var(--color-white);color:var(--color-black)}
.stage:not(.show-3d) .stage__full{display:none}
.stage.is-full{position:fixed;inset:0;width:100vw;height:100svh;aspect-ratio:auto;border-radius:0;z-index:95;
  background:radial-gradient(70% 60% at 50% 40%,#5c6b48 0%,#333e28 45%,#12160d 100%)}
.stage.is-full .stage__views{inset:8% 12% 10%}
.stage.is-full .stage__full{right:clamp(16px,4vw,40px);top:clamp(16px,4vw,40px)}
.stage.is-full .stage__label{left:clamp(16px,4vw,40px);top:clamp(20px,4.6vw,44px)}
html.stage-full{overflow:hidden}
.stage__hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;
  font-size:var(--sub2);text-transform:uppercase;letter-spacing:.14em;color:var(--color-white);
  opacity:0;animation:hint-in .8s var(--ease-out) 1.2s forwards;transition:opacity .35s}
.stage__hint span{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--color-white-30);border-radius:3em;
  padding:.7em 1.2em;background:rgba(16,9,4,.35);backdrop-filter:blur(6px)}
.stage__hint span::before{content:"";width:1.05em;height:1.05em;border:1px solid currentColor;border-radius:50%;
  border-left-color:transparent;border-right-color:transparent;animation:spin 3s linear infinite}
.stage__hint.gone{opacity:0!important;animation:none}

.sizerow{margin-top:.9em}
.sizesel{width:100%;appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffedd7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1.2em center;
  border:1px solid var(--color-white-30);border-radius:3em;padding:1em 3em 1em 1.4em;color:var(--color-white);font-size:var(--body3);cursor:pointer;outline:none}
.sizesel:focus{border-color:var(--color-orange)}
.sizesel option{background:var(--color-black);color:var(--color-white)}

/* ── PROCESS page ─────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:calc(var(--site-padding-y) * 1.4)}
.step{position:relative;padding-top:1.2em}
.step .o-dashline{position:absolute;top:0;left:0;right:0}
.step b{display:block;font-size:var(--h2);line-height:.9;margin-bottom:.4em;color:var(--color-orange)}
.step h4{margin-bottom:.6em}
.step p{font-size:var(--body3);font-weight:400;color:var(--color-white-60);max-width:20em}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}

/* ── CHECKOUT / SUCCESS ───────────────────────────── */
.checkout{padding-top:calc(var(--site-padding-y) * 5)}
.checkout__grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gap) * 2);margin-top:calc(var(--site-padding-y) * 1.4);align-items:start}
.panelcard{position:relative;padding-top:1.4em}
.panelcard > .o-dashline{position:absolute;top:0;left:0;right:0}
.panelcard h4{margin-bottom:.3em}
.success{min-height:calc(var(--vh) * 100);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.success .body2{max-width:26em;font-weight:400;margin-top:1em}
@media (max-width:900px){.checkout__grid{grid-template-columns:1fr}}

/* ── drawer / modal / toast ───────────────────────── */
.scrim{position:fixed;inset:0;background:#201914bf;opacity:0;visibility:hidden;transition:.3s;z-index:70}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(30em,92vw);z-index:80;background:var(--color-black);color:var(--color-white);
  transform:translateX(102%);transition:transform .6s var(--ease-out);display:flex;flex-direction:column;padding:var(--site-padding-y) calc(var(--site-padding-x) * .8)}
.drawer.on{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:1em}
.drawer__body{flex:1;overflow:auto;padding:.5em 0}
.drawer__foot .row{margin:1em 0 .4em}
.drawer__foot .btn{margin-top:1.2em}
.citem{display:grid;grid-template-columns:4em 1fr auto;gap:1em;padding:1em 0;border-bottom:1px dashed var(--color-white-30);align-items:center}
.citem img{width:4em;height:5em;object-fit:contain;border-radius:.3em;background:#ffffff0a}
.citem h5{margin:0 0 .2em}
.citem p{font-size:var(--sub2);color:var(--color-white-60);text-transform:uppercase}
.citem .x{background:none;border:0;color:var(--color-white-60);cursor:pointer;font-size:var(--sub2);text-transform:uppercase;padding:0;margin-top:.4em;text-decoration:underline}
.empty{padding:4em 0;color:var(--color-white-60);font-size:var(--sub1)}

.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.2em;opacity:0;visibility:hidden;transition:.3s;background:#201914d9}
.modal.on{opacity:1;visibility:visible}
.modal__card{position:relative;width:min(30em,100%);background:var(--color-black);color:var(--color-white);padding:2.2em 2em 2em;transform:translateY(20px);transition:.5s var(--ease-out);border-radius:.6em}
.modal.on .modal__card{transform:none}
.modal__x{position:absolute;top:1.4em;right:1.6em}
.modal__card h3{margin:.4em 0 .4em}
.modal__card .o-dashline{margin:1.2em 0}
.form{display:grid;gap:1em}
.field{display:grid;gap:.4em}
.field input,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--color-white-30);padding:.6em 0;outline:none;transition:.2s;resize:vertical;font-weight:400;font-size:var(--body3);color:var(--color-white);border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--color-orange)}
.field input::placeholder,.field textarea::placeholder{color:var(--color-white-30)}
.err{color:#ff6b6b;font-size:var(--sub2);min-height:1.2em}

.toast{position:fixed;left:50%;bottom:var(--site-padding-y);transform:translate(-50%,220%);opacity:0;pointer-events:none;z-index:120;background:var(--color-white);color:var(--color-black);padding:1em 1.6em;border-radius:3em;font-size:var(--sub2);text-transform:uppercase;font-weight:500;transition:transform .5s var(--ease-out);white-space:nowrap}
.toast.on{transform:translate(-50%,0);opacity:1}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ══════════════════════════════════════════════════════
   MOBILE — stacked layouts, menu, readable layers
   ══════════════════════════════════════════════════════ */
#site-header-mobile-btn{display:none;background:none;border:1px solid var(--color-white-30);border-radius:3em;padding:.7em 1.2em;color:inherit;font-size:var(--sub2);text-transform:uppercase;letter-spacing:.1em;font-weight:600;cursor:pointer}
#site-header-mobile-btn span:last-child{display:none}
.menu-open #site-header-mobile-btn span:first-child{display:none}
.menu-open #site-header-mobile-btn span:last-child{display:inline}
#mobile-menu{position:fixed;inset:0;z-index:9;background:var(--color-black);color:var(--color-white);padding:calc(var(--site-padding-y) + 5em) var(--site-padding-x) var(--site-padding-y);
  display:flex;flex-direction:column;justify-content:flex-end;gap:1.2em;opacity:0;visibility:hidden;transform:translateY(-2%);transition:.35s var(--ease-out)}
.menu-open #mobile-menu{opacity:1;visibility:visible;transform:none}
#mobile-menu nav{display:flex;flex-direction:column;gap:.15em;margin-bottom:auto}
#mobile-menu nav a{font-size:var(--h2);text-transform:uppercase;line-height:1.05;padding:.12em 0;color:var(--color-white-60)}
#mobile-menu nav a.is-active,#mobile-menu nav a:active{color:var(--color-white)}
#mobile-menu .sub1{color:var(--color-orange);text-transform:none}
.menu-open #site-header{color:var(--color-white)}
.menu-open #site-header::before{opacity:0}

@media (max-width:820px){
  :root{--h1:calc(84 * var(--screen-unit))}
  #site-header::before{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,9,4,.82)}
  #site-header.is-light::before{background:rgba(246,224,198,.94)}
  .layer{will-change:opacity,transform}
  .layer::after{will-change:opacity}
  #journey{height:calc(var(--vh) * 800)}
  #site-header{align-items:center}
  #site-header-nav{display:none}
  #site-header-mobile-btn{display:inline-block}
  #site-header-logo{padding-bottom:0;font-size:var(--h5)}
  #site-header-line{bottom:-.9em}

  /* journey layers: everything stacks at the bottom over a scrim, model sits above */
  .layer{padding-top:calc(var(--site-padding-y) + 4.2em)}
  .layer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;z-index:-1;
    background:linear-gradient(180deg,rgba(68,82,49,0) 0%,rgba(68,82,49,.85) 45%,rgba(68,82,49,.97) 100%)}
  #lay-hero{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(var(--site-padding-y) * 1.4)}
  #hero-top{position:absolute;top:calc(var(--site-padding-y) + 4.4em);left:var(--site-padding-x)}
  #hero-copy,#hero-title,#hero-cta{position:static;transform:none;width:auto;text-align:left}
  #hero-copy{font-size:var(--body2);max-width:24em;margin-bottom:.9em;order:1}
  #hero-title{order:2;margin-bottom:.9em}
  #hero-title h1{font-size:min(calc(var(--h1) * 1.05),22vw);white-space:nowrap;line-height:.85}
  #hero-cta{order:3;display:grid;grid-template-columns:1fr 1fr;gap:.5em}
  #hero-cta .btn{padding:1.2em .8em;font-size:var(--btn);white-space:normal;text-align:center}
  #hero-card,#hero-scroll{display:none}

  #lay-statement{padding-bottom:calc(var(--site-padding-y) * 1.6)}
  #statement-h1{font-size:calc(var(--h1) * .9)}

  #lay-callouts{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(var(--site-padding-y) * 1.6)}
  #callouts-label{top:calc(var(--site-padding-y) + 4.4em)}
  .callout{position:absolute;left:var(--site-padding-x);right:var(--site-padding-x);bottom:calc(var(--site-padding-y) * 1.6);width:auto;text-align:left}
  .callout h3{font-size:var(--h2)}
  .callout .body3{max-width:none}
  .callout-1 .body3,.callout-2 .body3{margin-left:0}

  #lay-stage{grid-template-rows:auto 1fr auto;padding-bottom:calc(var(--site-padding-y) * 1.2)}
  #forge-top{padding-top:0}
  #forge-idx{font-size:calc(var(--h1) * .7)}
  #forge-stage{max-width:none;margin-bottom:.8em}
  #forge-stage h2{font-size:var(--h2)}
  #forge-rail{grid-template-columns:repeat(4,1fr);gap:.6em}
  .forge-step b{font-size:var(--sub2)}
  #forge-read{gap:1.2em;flex-wrap:wrap}
  #forge-read strong{font-size:var(--h5)}

  .pad{padding:calc(var(--site-padding-y) * 4) var(--site-padding-x)}
  #collection-head,#reviews-head{flex-direction:column;align-items:flex-start}
  .grid-products{grid-template-columns:1fr 1fr;gap:.9em}
  .card__title{font-size:var(--h5)}
  #numbers-grid{grid-template-columns:1fr;gap:1.8em;margin-top:2em}
  .number-item strong{font-size:calc(var(--h1) * .9)}
  #reviews-grid{grid-template-columns:1fr;gap:1.4em}
  .marquee__track{font-size:var(--h4)}
  #footer .section__inner{padding-top:calc(var(--site-padding-y) * 8)}
  #footer-grid{grid-template-columns:1fr;gap:1.6em}

  .page-head,.pdp,.checkout{padding-top:calc(var(--site-padding-y) + 6em)}
  .page-head h1,.checkout h1{font-size:min(calc(var(--h1) * .62),15vw);line-height:.95;word-break:normal;overflow-wrap:break-word}
  .pdp__grid{gap:1.6em}
  .stage{cursor:auto}
  .stage__cursor{display:none}
  .stage__arrow{cursor:pointer}
  .pdp__info h1{font-size:var(--h2)}
  .buybar .btn{min-width:0}
  .steps{grid-template-columns:1fr}
  .drawer{width:100vw}
  .modal__card{padding:1.8em 1.4em}
}