/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;overflow-x:hidden;scrollbar-width:none;background:#F8F4EC}
::-webkit-scrollbar{display:none}
html,html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
em,i,cite,address,b,strong{font-style:normal}
*{font-style:normal!important}

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --cream:      #F8F4EC;
  --cream-deep: #EDE5D4;
  --cocoa:      #5C3D2E;
  --cocoa-mid:  #7A5544;
  --cocoa-lt:   rgba(92,61,46,0.55);
  --cocoa-mu:   rgba(92,61,46,0.32);
  --cocoa-fa:   rgba(92,61,46,0.09);
  --ink:        #2A1810;
  --dark:       #180E08;
  --gold:       #B8860B;
  --g:          clamp(20px,5vw,80px);
  --max:        1320px;
  --nav-h:      62px;
}

/* ── BASE ─────────────────────────────────────────────────── */
body{
  background:var(--cream);color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h);
}
a{text-decoration:none;color:inherit}
button{font:inherit;border:none;background:none}

/* ── SKIP LINK ───────────────────────────────────────────────── */
.skip-link{
  position:absolute;top:-100px;left:1rem;
  background:var(--ink);color:var(--cream);
  font:700 11px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem 1rem;z-index:99999;
  transition:top .15s;
  border:1px solid var(--cocoa);
}
.skip-link:focus{top:1rem;outline:2px solid var(--cream);outline-offset:2px;}

/* ── CURSOR ──────────────────────────────────────────────────────────
   Custom ring/dot cursor. On pointer-fine devices the native system
   cursor is hidden UNCONDITIONALLY so it can never appear alongside the
   custom cursor (previously gated on a JS-added .cursor-on class, which
   let the native arrow leak through). The coarse-pointer media query
   below restores native behaviour on touch. The text caret stays visible
   so people can see where they are typing in the order / checkout forms. */
html,
html body,
html *,
html *::before,
html *::after,
html a,
html button,
html [role=button],
html input,
html select,
html textarea{cursor:none!important}
input,textarea{caret-color:var(--cocoa)}
@media(pointer:coarse){html,body,*,*::before,*::after{cursor:none!important}a,button,[role=button]{cursor:none!important}input,select,textarea{cursor:none!important;caret-color:auto!important}}
#cur-dot{
  position:fixed;top:0;left:0;width:10px;height:10px;
  background:var(--cocoa);pointer-events:none;z-index:100001;
  border-radius:0;
  transform:translate(-9999px,-9999px);
  transition:background 160ms ease, opacity 160ms ease;
}
#cur-ring{
  position:fixed;top:0;left:0;width:120px;height:120px;
  border:1.5px solid var(--cocoa);pointer-events:none;z-index:100000;
  border-radius:0;
  transform:translate(-9999px,-9999px);opacity:0.6;
  transition:width .22s cubic-bezier(.16,1,.3,1),
             height .22s cubic-bezier(.16,1,.3,1),
             opacity 160ms ease,
             border-color 160ms ease;
}

/* ── GRAIN ─────────────────────────────────────────────────── */
#grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px;
}

/* ── PROGRESS ─────────────────────────────────────────────────── */
#prog{position:fixed;top:0;left:0;width:8px;height:0;background:var(--gold);z-index:9996}
#prog-r{position:fixed;top:0;right:0;width:8px;height:0;background:var(--gold);z-index:9996}

/* ── NAV ─────────────────────────────────────────────────── */
#site-nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:200;
  padding:0 var(--g);display:flex;align-items:center;justify-content:space-between;
  background:rgba(248,244,236,0.98);border-bottom:1px solid rgba(92,61,46,0.09);
  will-change:transform;
}
#site-nav .nav-logo,
.nav-logo{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:16px;letter-spacing:0.38em;text-transform:uppercase;
  color:#2A1810 !important;text-decoration:none;transition:color .2s,letter-spacing .3s cubic-bezier(.16,1,.3,1);
}
.nav-logo:hover{color:#5C3D2E !important;letter-spacing:0.46em}
#site-nav .nav-links,
.nav-links{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:0;
}
#site-nav .nav-link,
.nav-link{
  font-family:'Courier New',monospace;font-size: 14px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#2A1810 !important;background:transparent;
  padding:7px 12px;margin:0 2px;
  border:1px solid rgba(92,61,46,0.15);
  text-decoration:none;
  transition:background .18s,color .18s,border-color .18s;
  display:inline-block;opacity:1;visibility:visible;
  white-space:nowrap;
}
#site-nav .nav-link:hover,.nav-link:hover{background:#2A1810 !important;color:#F8F4EC !important;border-color:transparent}
#site-nav .nav-link.active,.nav-link.active{background:#2A1810 !important;color:#F8F4EC !important;border-color:transparent}
#site-nav .nav-cta,
.nav-cta{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:14px;letter-spacing:0.20em;text-transform:uppercase;
  background:#2A1810;color:#F8F4EC !important;padding:11px 22px;
  text-decoration:none;
  transition:background .18s;min-height:40px;line-height:1.8;display:inline-block;
}
.nav-cta:hover{background:#5C3D2E}
@media(max-width:480px){
  .nav-links{display:none}
  .nav-cta{display:none}
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--g) clamp(60px,10vh,120px);
  position:relative;
}
.hero-watermark{
  position:absolute;top:0;bottom:0;right:-2vw;
  display:flex;align-items:center;justify-content:flex-end;
  pointer-events:none;user-select:none;overflow:visible;
  z-index:2;
}
.hero-watermark-text{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(160px,28vw,480px);
  letter-spacing:-0.05em;line-height:1;
  color:rgba(42,24,16,0.07);white-space:nowrap;
  animation:driftIn 1.8s cubic-bezier(.16,1,.3,1) both;
  transform:translateX(12%);
}
@keyframes driftIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
.hero-top{
  position:absolute;top:calc(var(--nav-h) + clamp(16px,3vh,40px));left:var(--g);right:var(--g);
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .1s both;
  pointer-events:none;
}
.hero-eyebrow{
  font-family:'Courier New',monospace;
  font-weight:600;font-size:clamp(12px,1vw,14px);
  letter-spacing:0.42em;text-transform:uppercase;
  color:var(--cocoa-mu);opacity:1;
  line-height:1;
}
.hero-bottom{
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .2s both;
  max-width:var(--max);
  /* Clear the absolutely positioned hero-top on small viewports */
  padding-top:clamp(80px,14vh,160px);
}
.hero-headline{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(58px,9.5vw,152px);
  letter-spacing:-0.04em;line-height:0.86;color:var(--ink);
  margin-bottom:clamp(24px,3.5vh,48px);
  /* Reserve space for the 01 accent — clamp(180px,14vw,240px) is its footprint */
  max-width:calc(100% - clamp(180px,14vw,240px));
}
.hero-headline-inner{display:block}
.hero-headline span{
  display:block;font-weight:300;font-size:clamp(16px,1.8vw,28px);
  letter-spacing:-0.01em;line-height:1.3;color:var(--cocoa-lt);
  margin-top:clamp(20px,3vh,36px);
  font-style:normal;
}
.hero-sub{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.38em;text-transform:uppercase;color:var(--cocoa-mu);
  margin-bottom:clamp(12px,2vh,20px);display:none;
}
.hero-decree{
  font-size:clamp(13px,1.3vw,17px);font-weight:300;
  color:var(--cocoa-lt);line-height:1.8;
  margin-bottom:clamp(32px,5vh,56px);
  max-width:560px;letter-spacing:0;text-transform:none;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.hero-products{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vw,18px);
  max-width:min(960px, 100%);
  margin-bottom:clamp(40px,6vh,72px);
  padding:clamp(8px,1.2vw,14px);
  background:rgba(92,61,46,0.07);
  border:1px solid rgba(92,61,46,0.18);
  border-radius:2px;
}
@media(max-width:680px){.hero-products{grid-template-columns:1fr}}
.hero-product{
  padding:clamp(28px,3.5vw,48px);
  border:1px solid rgba(248,244,236,0.07);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  min-height:clamp(480px,55vh,680px);
  background:var(--ink);
  transition:border-color .4s, box-shadow .4s;
  border-radius:1px;
}
.hero-product:hover{
  border-color:rgba(248,244,236,0.18);
  box-shadow:0 4px 48px rgba(0,0,0,0.32);
}
/* Fine grid — printed matter quality */
.hero-product::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(248,244,236,0.028) 1px, transparent 1px),
    linear-gradient(90deg,rgba(248,244,236,0.028) 1px, transparent 1px);
  background-size:40px 40px;
  z-index:0;opacity:1;
  transition:opacity .4s;
}
.hero-product:hover::after{opacity:1.8;}
/* Corner bracket — expands on hover */
.hero-product::before{
  content:'';position:absolute;
  top:0;left:0;width:52px;height:52px;
  border-top:1px solid rgba(248,244,236,0.22);
  border-left:1px solid rgba(248,244,236,0.22);
  z-index:2;pointer-events:none;
  transition:width .45s cubic-bezier(.16,1,.3,1),
             height .45s cubic-bezier(.16,1,.3,1),
             border-color .4s;
}
.hero-product:hover::before{
  width:84px;height:84px;
  border-color:rgba(248,244,236,0.42);
}
.hero-product--bread{
  background:var(--ink);
  background-image:
    linear-gradient(to top,
      rgba(42,24,16,0.97) 0%,
      rgba(42,24,16,0.72) 38%,
      rgba(42,24,16,0.18) 68%,
      rgba(42,24,16,0.10) 100%),
    url('/img/bread-hero-v2.webp');
  background-size:cover;background-position:center top;
}
.hero-product--brew{
  background:var(--dark);
  background-image:
    linear-gradient(to top,
      rgba(24,14,8,0.97) 0%,
      rgba(24,14,8,0.74) 38%,
      rgba(24,14,8,0.20) 68%,
      rgba(24,14,8,0.10) 100%),
    url('/img/brew-hero.webp');
  background-size:cover;background-position:center;
}
.hero-product--bread > *,
.hero-product--brew > *{position:relative;z-index:1;}
.hp-tag{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.34em;text-transform:uppercase;color:rgba(248,244,236,0.38);
  margin-bottom:0;display:block;
}
/* Price anchor — top of card, always in viewport, Design AC-06 */
.hp-price-anchor{
  position:absolute;top:clamp(20px,2.8vw,36px);right:clamp(20px,2.8vw,36px);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:-0.03em;
  color:var(--cream);
  z-index:2;
  line-height:1;
  /* Allow .pl sub-line to render below without clipping */
  overflow:visible;
  white-space:nowrap;
}
.hp-price-anchor span{
  font-family:'Courier New',monospace;
  font-size: 12px;font-weight:600;
  letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(248,244,236,0.4);
  vertical-align:middle;margin-left:5px;
}
.hp-body{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(80px,14vh,160px);
}
.hp-name{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(40px,5vw,72px);
  letter-spacing:-0.04em;line-height:0.88;color:var(--cream);
  margin-bottom:14px;
}
.hp-origin{
  font-family:'Courier New',monospace;font-size:11px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:rgba(248,244,236,0.48);
  margin-bottom:20px;line-height:1.7;
  overflow:hidden;
  /* Never clip — the altitude claim must complete */
  white-space:normal;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.hp-desc{
  font-size:clamp(13px,1.2vw,15px);color:rgba(248,244,236,0.52);line-height:1.75;
  margin-bottom:auto;padding-bottom:28px;
  max-width:400px;
}
.hp-stats{
  display:flex;gap:clamp(20px,3vw,40px);
  margin-bottom:24px;
  padding-top:24px;
  border-top:1px solid rgba(248,244,236,0.08);
}
.hp-stat-val{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(22px,2.8vw,36px);
  letter-spacing:-0.03em;line-height:1;color:var(--cream);
  display:block;
}
.hp-stat-key{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;color:rgba(248,244,236,0.36);
  margin-top:5px;display:block;
}
.hp-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid rgba(248,244,236,0.08);
  margin-top:auto;
}
.hp-price{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(28px,3.2vw,44px);
  letter-spacing:-0.03em;color:var(--cream);
}
.hp-price span{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.24em;text-transform:uppercase;color:rgba(248,244,236,0.4);
  vertical-align:middle;margin-left:8px;
}
.hp-cta{
  min-height:40px;display:inline-flex;align-items:center;
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;color:rgba(248,244,236,0.56);
  border-bottom:1px solid rgba(248,244,236,0.18);padding-bottom:3px;
  transition:color .2s,border-color .2s,letter-spacing .2s;white-space:nowrap;
}
.hp-cta:hover{color:var(--cream);border-color:rgba(248,244,236,0.6);letter-spacing:0.34em}
.hero-scroll{
  position:absolute;right:var(--g);bottom:clamp(60px,10vh,100px);
  writing-mode:vertical-rl;
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.3em;text-transform:uppercase;color:var(--cocoa-mu);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .4s both;
}
.hero-scroll-line{width:1px;height:44px;background:var(--cocoa-mu);animation:lineGrow 2s ease-in-out infinite}
@keyframes lineGrow{0%,100%{transform:scaleY(0.4);opacity:.25}50%{transform:scaleY(1);opacity:.6}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ── HERO ACCENT (right-side vertical) ───────────────────── */
.hero-accent{
  position:absolute;
  right:var(--g);
  top:calc(var(--nav-h) + clamp(16px,3vh,40px));
  bottom:clamp(60px,10vh,120px);
  display:flex;flex-direction:column;
  align-items:flex-end;justify-content:space-between;
  pointer-events:none;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .4s both;
}
.hero-accent-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(120px,18vw,260px);
  letter-spacing:-0.06em;line-height:1;
  color:rgba(92,61,46,0.12);
  text-align:right;
}
.hero-accent-line{
  width:1px;height:clamp(60px,8vh,120px);
  background:linear-gradient(to bottom, transparent, var(--cocoa-mu));
  margin-right:2px;
}
.hero-accent-meta{
  writing-mode:vertical-rl;
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--cocoa-mu);
  text-align:right;
}
@media(max-width:720px){.hero-accent{display:none}}
.ticker{
  background:var(--cocoa);overflow:hidden;
  padding:28px 0;white-space:nowrap;
}
.ticker-inner{
  display:inline-flex;
  animation:ticker 38s linear infinite;
  will-change:transform;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
  font-family:'Courier New',monospace;font-size:15px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);padding:0 44px;
}
.ticker-item.hl{color:rgba(248,244,236,0.95)}

/* ── SECTION BASE ─────────────────────────────────────────────────── */
.section{padding:clamp(80px,12vw,160px) var(--g)}
.inner{max-width:var(--max);margin:0 auto}
.eyebrow{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.36em;text-transform:uppercase;color:var(--cocoa);
  display:block;margin-bottom:20px;
}
.h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(38px,5.5vw,82px);
  letter-spacing:-0.03em;line-height:0.93;color:var(--ink);
  margin-bottom:24px;
}
.lead{
  font-size:clamp(15px,1.8vw,19px);color:var(--cocoa-lt);
  max-width:560px;line-height:1.65;
}

.btn-primary{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:12px;letter-spacing:0.20em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);padding:14px 28px;
  transition:background .18s;display:inline-block;min-height:44px;line-height:2;
}
.btn-primary:hover{background:var(--cocoa)}
.btn-ghost{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cocoa-lt);border:1px solid var(--cocoa-fa);
  padding:13px 28px;transition:border-color .18s,color .18s;
  min-height:44px;line-height:2;display:inline-block;
}
.btn-ghost:hover{border-color:rgba(92,61,46,0.3);color:var(--ink)}

/* ── PHILOSOPHY ─────────────────────────────────────────────────── */
.philosophy{background:var(--dark);color:rgba(248,244,236,0.85);position:relative;overflow:hidden;}
.phil-accent-num{
  position:absolute;
  right:var(--g);bottom:clamp(40px,6vw,80px);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(120px,18vw,260px);
  letter-spacing:-0.06em;line-height:1;
  color:rgba(248,244,236,0.10);
  pointer-events:none;user-select:none;
}
.philosophy::after{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(248,244,236,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,244,236,0.028) 1px, transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
}
.philosophy::before{content:none}
.philosophy-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,8vw,140px);
  align-items:start;position:relative;z-index:1;
}
@media(max-width:760px){.philosophy-inner{grid-template-columns:1fr;gap:48px}
  .phil-quote{padding-right:clamp(16px,3vw,24px)}
}
.phil-quote{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(36px,5.5vw,84px);
  letter-spacing:-0.04em;line-height:0.92;
  color:rgba(248,244,236,0.92);
  padding-right:clamp(20px,2.5vw,36px);
  border-right:3px solid #C49A3C;
  margin-top:clamp(40px,6vh,80px);
}
.phil-quote em{
  display:block;font-weight:400;font-size:clamp(12px,1.1vw,14px);
  color:rgba(248,244,236,0.25);margin-top:clamp(24px,3vh,40px);
  letter-spacing:0.22em;text-transform:uppercase;
  font-family:'Courier New',monospace;font-style:normal;
}
.phil-right{
  padding-top:clamp(40px,6vh,80px);
  display:flex;flex-direction:column;
  border-top:1px solid rgba(248,244,236,0.07);
  margin-top:clamp(40px,6vh,80px);
}
.phil-text{
  font-size:clamp(16px,1.8vw,22px);
  color:rgba(248,244,236,0.72);line-height:1.8;
  margin-bottom:clamp(32px,4vh,56px);
}
.phil-attr{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(248,244,236,0.2);
  padding-top:clamp(24px,3vh,40px);
  border-top:1px solid rgba(248,244,236,0.07);
}



/* ── PHILOSOPHY → FOOTER: seamless dark lower section ─────── */
.philosophy{background:var(--dark);color:rgba(248,244,236,0.85);position:relative;overflow:hidden;
  padding-bottom: clamp(80px,10vw,120px) !important;
  margin-bottom: 0 !important;
}
footer{
  background:var(--dark);color:rgba(248,244,236,0.4);
  padding:0 var(--g) clamp(40px,5vw,64px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  border-top:none;
  position:relative;overflow:hidden;
}
footer::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(248,244,236,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,244,236,0.028) 1px, transparent 1px);
  background-size:72px 72px;
  pointer-events:none;z-index:0;
}
.footer-links,.footer-logo,.footer-copy{position:relative;z-index:1;}
.footer-logo{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:13px;letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(248,244,236,0.5);
}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 0;justify-content:center;border-top:1px solid rgba(248,244,236,0.05);padding-top:20px;}
.footer-link{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.25);padding:4px 14px;
  border-right:1px solid rgba(248,244,236,0.08);
  transition:color .18s;
}
.footer-link:last-child{border-right:none}
.footer-link:hover{color:rgba(248,244,236,0.7)}
.footer-copy{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.18);
  width:100%;text-align:center;
  margin-bottom:20px;
}


/* ── BTN GHOST PALE (dark backgrounds) ─────────────────────────────── */
.btn-ghost-pale{
  color:rgba(248,244,236,0.45)!important;
  border-color:rgba(248,244,236,0.15)!important;
}
.btn-ghost-pale:hover{
  color:rgba(248,244,236,0.8)!important;
  border-color:rgba(248,244,236,0.35)!important;
}

/* ── REVEAL ─────────────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}

/* ── MOBILE NAV ─────────────────────────────────────────────────── */
.nav-hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  width:44px;height:44px;gap:6px;
  background:none;border:none;padding:4px;
  -webkit-tap-highlight-color:transparent;
}
.nav-hamburger span{
  display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s,width .2s;
  transform-origin:center;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;width:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.nav-drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--cream);
  padding:clamp(32px,6vw,56px) var(--g) clamp(32px,6vw,56px);
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateX(100%);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;
  z-index:199;overflow-y:auto;overscroll-behavior:none;
}
.nav-drawer-links{display:flex;flex-direction:column;gap:0}
.nav-drawer-link{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(40px,10vw,64px);
  letter-spacing:-0.04em;line-height:0.95;color:var(--ink);
  padding:16px 0;border-bottom:1px solid var(--cocoa-fa);
  transition:color .18s,padding-left .18s;display:block;
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-link:active{color:var(--cocoa);padding-left:8px}
.nav-drawer-link:last-of-type{border-bottom:none}
.nav-drawer-bottom{
  padding-top:32px;
  display:flex;flex-direction:column;gap:16px;
}
.nav-drawer-sub{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--cocoa-mu);line-height:1.8;
}
.nav-drawer-cta{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:12px;letter-spacing:0.20em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);
  padding:18px 32px;display:inline-block;
  transition:background .18s;align-self:flex-start;
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-cta:active{background:var(--cocoa)}

@media(max-width:480px){
  #site-nav .nav-links,
.nav-links{display:none}
  .nav-hamburger{display:flex}
  #site-nav .nav-cta,
.nav-cta{display:none}
}

/* ── TABLET (720px) ─────────────────────────────────────────────────── */
@media(max-width:720px){
  :root{--nav-h:56px}
  .section{padding:clamp(60px,10vw,100px) var(--g)}

}

/* ── MOBILE (480px) ─────────────────────────────────────────────────── */
@media(max-width:480px){
  /* iOS form zoom fix */
  input,select,textarea{font-size:16px!important}

  /* No custom cursor on touch */
  .hero-scroll{display:none}

  /* Hero — full‑bleed cards, content above fold */
  .hero{padding-bottom:0;padding-top:0}
  .hero-bottom{padding-top:calc(var(--nav-h) + clamp(20px,5vh,40px))}
  .hero-top{position:static;animation:none;opacity:1;transform:none;margin-bottom:0;display:none}
  .hero-headline{font-size:clamp(44px,12vw,66px);line-height:0.88}
  .hero-headline span{font-size:clamp(13px,3.5vw,18px);margin-top:10px;font-style:italic}
  .hero-sub{font-size:clamp(13px,3.5vw,16px);margin-bottom:16px;letter-spacing:0.3em}
  .hero-decree{font-size:13px;margin-bottom:28px;line-height:1.7}
  .hero-products{max-width:100%;gap:8px;margin-bottom:0;padding:6px}

  /* Product cards — full width, no horizontal scroll */
  .hero-product{
    padding:clamp(20px,5vw,28px);
    min-height:clamp(380px,70vw,480px);
  }
  .hp-body{padding-top:clamp(60px,12vw,100px)}
  .hp-name{font-size:clamp(34px,9.5vw,52px);margin-bottom:8px}
  .hp-origin{
    font-size:12px;letter-spacing:0.16em;margin-bottom:12px;
    white-space:normal;overflow:visible;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    max-width:100%;
  }
  .hp-desc{font-size:13px;line-height:1.6;margin-bottom:16px}
  .hp-stats{gap:clamp(12px,4vw,24px);margin-bottom:16px;padding-top:14px}
  .hp-stat-val{font-size:clamp(20px,5.5vw,30px)}
  .hp-stat-key{font-size:11px;letter-spacing:0.2em}
  .hp-footer{padding-top:14px}
  .hp-price{font-size:clamp(22px,6vw,30px)}
  .hp-cta{font-size:12px}
  /* Hide anchor sub-line on mobile — hp-price footer carries the local equiv */
  .hp-price-anchor .pl{display:none}

  /* Philosophy */
  .phil-quote{font-size:clamp(24px,7.5vw,38px);line-height:0.95}
  .phil-text{font-size:14px}

  /* Footer */
  footer{flex-direction:column;align-items:center;gap:0;padding:40px var(--g) 32px}
  .footer-links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0;width:100%}
  .footer-link{border-right:1px solid rgba(248,244,236,0.08);padding:6px 10px;font-size:12px;letter-spacing:0.16em}
  .footer-link:last-child{border-right:none}
  .footer-copy{text-align:center;margin-bottom:16px;font-size:11px}

  /* Ticker — slower on mobile, slightly taller */
  .ticker-inner{animation-duration:55s}
  .ticker{padding:24px 0}

  /* Buttons — full width on mobile */
  .btn-primary,.btn-ghost,.btn-light,.btn-cream{width:100%;text-align:center;justify-content:center}
  .hero-cta-row{flex-direction:column;gap:8px}
}

/* ── SMALL MOBILE (380px) ─────────────────────────────────────────────── */
@media(max-width:380px){
  .hero-headline{font-size:clamp(38px,11.5vw,52px)}
  .hp-name{font-size:clamp(28px,8.5vw,40px)}
  .hero-product{min-height:clamp(340px,65vw,420px)}
}

/* ── CRAFT REFINEMENTS ──────────────────────────────────────────────── */

/* Smooth page entry */
@keyframes bodyShow{from{opacity:0}to{opacity:1}}
body{animation:bodyShow .5s .1s both}
body.ready{animation:none;opacity:1}

/* Nav — subtle border appears on scroll */
nav{transition:border-color .3s,box-shadow .3s}
nav.scrolled{border-bottom-color:rgba(92,61,46,0.14);box-shadow:0 1px 24px rgba(42,24,16,0.06)}

/* Hero product cards — equal height via flex */
.hero-products{align-items:stretch}
/* Image card border hover */
.hero-product--bread:hover,.hero-product--brew:hover{border-color:rgba(92,61,46,0.22)}

/* Ticker — pause on hover */
.ticker:hover .ticker-inner{animation-play-state:paused}

/* Reveal — stagger children automatically when parent is .reveal-group */
.reveal-group .reveal:nth-child(1){transition-delay:0s}
.reveal-group .reveal:nth-child(2){transition-delay:.08s}
.reveal-group .reveal:nth-child(3){transition-delay:.16s}
.reveal-group .reveal:nth-child(4){transition-delay:.24s}

/* Selection color */
::selection{background:var(--cocoa);color:var(--cream)}
::-moz-selection{background:var(--cocoa);color:var(--cream)}

/* Focus visible — keyboard nav accessibility.
   Covers every interactive element, not just <a>/<button>. A double ring
   (dark outline + cream shadow) stays visible on BOTH the cream and the
   dark (data-dark) surfaces, so a keyboard user is never lost. */
a:focus-visible,
button:focus-visible,
[role=button]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.principle-item:focus-visible,
.nav-link:focus-visible,
.nav-drawer-link:focus-visible{
  outline:2px solid var(--cocoa);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(248,244,236,0.65);
  border-radius:1px;
}
/* On dark sections the ink outline would vanish — invert it to cream. */
[data-dark] a:focus-visible,
[data-dark] button:focus-visible,
[data-dark] [role=button]:focus-visible,
[data-dark] [tabindex]:focus-visible,
[data-dark] .principle-item:focus-visible{
  outline-color:var(--cream);
  box-shadow:0 0 0 5px rgba(42,24,16,0.6);
}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  body{animation:none;opacity:1}
}

/* Print — hide decorative elements */
@media print{
  #grain,#prog,#prog-r,#cur-dot,#cur-ring,nav,.ticker{display:none!important}
  body{padding-top:0}
}

/* ── FINAL POLISH ──────────────────────────────────────────── */

/* Nav logo hover handled in main nav block above */

/* Hero product cards — lift on hover desktop */
@media(hover:hover){
  .hero-product{transition:border-color .2s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
  .hero-product:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(42,24,16,0.08)}
}

/* Drawer links — stagger in when drawer opens */
.nav-drawer.open .nav-drawer-link:nth-child(1){transition-delay:.04s}
.nav-drawer.open .nav-drawer-link:nth-child(2){transition-delay:.08s}
.nav-drawer.open .nav-drawer-link:nth-child(3){transition-delay:.12s}
.nav-drawer-link{
  opacity:0;transform:translateX(16px);
  transition:color .18s,padding-left .18s,opacity .3s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-drawer.open .nav-drawer-link{opacity:1;transform:translateX(0)}

/* Scroll progress — rounded cap */
#prog{border-radius:0 1px 1px 0}
#prog-r{border-radius:1px 0 0 1px}

/* Order form inputs — focus ring matches brand */
.form-row input:focus,.form-row select:focus{
  outline:none;
  border-color:var(--cocoa)!important;
  box-shadow:0 0 0 3px rgba(92,61,46,0.12);
}

/* Brew qty cards — hover lift */
@media(hover:hover){
  .qty-card{transition:background .18s,border-color .18s,transform .2s cubic-bezier(.16,1,.3,1)}
  .qty-card:hover{transform:translateY(-2px)}
}

/* Ingredient/origin/tasting items — consistent hover across all pages */
@media(hover:hover){
  .ing-col,.tasting-note,.pillar,.who-col{
    transition:background .2s,transform .2s cubic-bezier(.16,1,.3,1);
  }
  .ing-col:hover,.tasting-note:hover,.pillar:hover,.who-col:hover{
    transform:translateY(-2px);
  }
}

/* Supply chain steps — left accent on hover */
.chain-step{
  transition:padding-left .2s cubic-bezier(.16,1,.3,1);
  border-left:2px solid transparent;
}
@media(hover:hover){
  .chain-step:hover{padding-left:12px;border-left-color:var(--cocoa-mid)}
}

/* Step items (ritual/brew method) — same treatment */
.step{transition:background .2s,padding-left .2s}
@media(hover:hover){
  .step:hover{padding-left:calc(clamp(24px,3vw,40px) + 8px)}
}

/* Mobile — ensure drawer CTA is always full width */
@media(max-width:720px){
  .nav-drawer-cta{width:100%;text-align:center;align-self:stretch}
}

/* ── SCREENSHOT FIXES ──────────────────────────────────────────────── */



/* Fix 8: Order form — Connecting state button needs cocoa bg */
.btn-order[disabled]{
  background:var(--cocoa-mid);
  opacity:1;
}

/* Fix 9: Who-col icon display tweak (images 8-9) — wc-icon too light */
.wc-icon{color:rgba(92,61,46,0.15)}

/* Fix 10: Source col padding on left side (brew image 16) */
@media(max-width:760px){
  .source-col:first-child{padding-right:0}
  .source-col:last-child{padding-left:0}
}

/* ── COOKIE CONSENT — Content AC-03 ─────────────────────────── */
/* Same voice as the rest: states what it does, trusts the reader */
#cookie-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--ink);color:var(--cream);
  border-top:1px solid rgba(92,61,46,0.4);
  padding:14px 24px calc(14px + env(safe-area-inset-bottom));
  z-index:9999;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  font-family:'Helvetica Neue',Arial,sans-serif;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
#cookie-bar.visible{transform:translateY(0)}
#cookie-bar p{
  font-size:12px;letter-spacing:.06em;line-height:1.5;
  color:rgba(248,244,236,0.75);margin:0;flex:1;min-width:200px;
}
#cookie-bar p strong{color:var(--cream);font-weight:700;}
.cookie-btns{display:flex;gap:8px;flex-shrink:0;}
.cookie-btn{
  font:700 11px/1 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border:1px solid rgba(92,61,46,0.5);
  background:transparent;color:var(--cream);
  cursor:none!important;
  transition:background .2s,border-color .2s;
}
.cookie-btn:hover{background:var(--cocoa);border-color:var(--cocoa);}
.cookie-btn.primary{background:var(--cocoa-mid);border-color:var(--cocoa-mid);}
.cookie-btn.primary:hover{background:var(--cocoa);border-color:var(--cocoa);}
@media(max-width:600px){
  #cookie-bar{flex-direction:column;align-items:flex-start;}
  .cookie-btns{width:100%;}
  .cookie-btn{flex:1;text-align:center;}
}

/* ── SHIP BADGE ─────────────────────────────────────────────── */
.ship-badge{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,2.5vw,28px) var(--g);
  border-top:1px solid rgba(92,61,46,0.10);
  border-bottom:1px solid rgba(92,61,46,0.10);
  background:var(--cream);
}
.ship-badge[data-dark]{
  background:transparent;
  border-top-color:rgba(248,244,236,0.08);
  border-bottom-color:rgba(248,244,236,0.08);
}
.ship-badge-inner{
  display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);
  max-width:var(--max);width:100%;justify-content:center;
}
.ship-rule{
  flex:1;max-width:200px;height:1px;
  background:linear-gradient(to right,transparent,rgba(92,61,46,0.18));
}
.ship-rule.r{
  background:linear-gradient(to left,transparent,rgba(92,61,46,0.18));
}
.ship-badge[data-dark] .ship-rule{
  background:linear-gradient(to right,transparent,rgba(248,244,236,0.14));
}
.ship-badge[data-dark] .ship-rule.r{
  background:linear-gradient(to left,transparent,rgba(248,244,236,0.14));
}
.ship-badge-content{
  display:flex;align-items:center;gap:clamp(10px,1.5vw,18px);
  flex-shrink:0;
}
.ship-globe{
  width:clamp(20px,2vw,26px);height:clamp(20px,2vw,26px);
  opacity:0.45;flex-shrink:0;
}
.ship-badge[data-dark] .ship-globe{opacity:0.50;filter:invert(1);}
.ship-text{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--cocoa);white-space:nowrap;
}
.ship-badge[data-dark] .ship-text{color:rgba(248,244,236,0.62);}
.ship-dot{
  width:3px;height:3px;border-radius:50%;
  background:var(--cocoa-mu);flex-shrink:0;opacity:0.5;
}
.ship-badge[data-dark] .ship-dot{background:rgba(248,244,236,0.4);}

/* ══ NAV TYPOGRAPHY — Perfection ══════════════════════════════════════ */
#site-nav {
  padding: 0 clamp(20px,3vw,48px) !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.nav-logo {
  font-family: 'Courier New', monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink, #2A1810) !important;
  text-decoration: none !important;
  margin-right: auto !important;
}
.nav-links {
  display: flex !important;
  gap: 0 !important;
}
#site-nav .nav-link,
.nav-link {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink, #2A1810) !important;
  background: transparent;
  padding: 8px 14px;
  margin: 0;
  border: 1px solid rgba(92,61,46,0.14);
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
  display: inline-flex;
  align-items: center;
  height: 36px;
  white-space: nowrap;
}

/* ══ PHILOSOPHY — God-mode elevation ══════════════════════════════════ */
.philosophy-inner {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(48px,8vw,160px) !important;
  align-items: start !important;
  position: relative !important;
  z-index: 1 !important;
}
.phil-quote {
  font: 900 clamp(42px,6.5vw,100px)/0.90 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.045em !important;
  border-right: 3px solid #C49A3C !important;
  padding-right: clamp(24px,3vw,48px) !important;
  color: rgba(248,244,236,0.94) !important;
  margin-top: 0 !important;
}
.phil-right {
  padding-top: 0 !important;
  border-top: none !important;
  margin-top: 0 !important;
  justify-content: flex-start !important;
}
.phil-text {
  font: 300 clamp(16px,1.6vw,21px)/1.88 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: rgba(248,244,236,0.68) !important;
  letter-spacing: -0.005em !important;
}
.phil-attr {
  font: 700 11px/1 'Courier New', monospace !important;
  letter-spacing: 0.30em !important;
  color: rgba(248,244,236,0.20) !important;
  border-top: 1px solid rgba(196,149,10,0.20) !important;
}
@media(max-width:760px) {
  .philosophy-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .phil-quote { border-right: none !important; padding-right: 0 !important; border-bottom: 3px solid #C49A3C; padding-bottom: 32px; }
}

/* ═══ PERIMETER PROGRESS — corner bars ═══════════════════════════════════
   At the bottom of the page the two rails turn the corner and run along the
   bottom edge, meeting in the middle at full scroll. After that meeting,
   scrolling back up plays the same meeting along the top edge. */
#prog-b-l{position:fixed;bottom:0;left:0;height:8px;width:0;background:var(--gold);z-index:9996}
#prog-b-r{position:fixed;bottom:0;right:0;height:8px;width:0;background:var(--gold);z-index:9996}
#prog-t-l{position:fixed;top:0;left:0;height:8px;width:0;background:var(--gold);z-index:9996}
#prog-t-r{position:fixed;top:0;right:0;height:8px;width:0;background:var(--gold);z-index:9996}
:root{--cocoa-lt:rgba(92,61,46,0.68);--cocoa-mu:rgba(92,61,46,0.46)}
body{font-size:16px}

/* ═══ MOBILE MASTERPASS ══════════════════════════════════════════════════
   Slimmer rails, true 44px touch targets, no iOS focus-zoom, tuned
   small-screen display type. */
@media (max-width:640px){
  #prog,#prog-r{width:4px}
  #prog-b-l,#prog-b-r,#prog-t-l,#prog-t-r{height:4px}
  .footer-link{padding:10px 14px}
  .pfs-main{font-size:clamp(34px,11vw,44px)}
  .ft-statement-line{font-size:clamp(44px,15vw,72px)}
}
@media (max-width:480px){
  .nav-logo{font-size:12px;letter-spacing:0.24em}
}
@media (pointer:coarse){
  /* inputs at 16px+ so iOS never zoom-jumps on focus */
  input,select,textarea{font-size:16px!important}
  .cookie-btn{min-height:44px;padding:12px 18px}
  .nav-hamburger{min-width:44px;min-height:44px}
  .footer-link{display:inline-block;padding:10px 14px}
  .btn-ghost,.nav-drawer-cta{min-height:44px;display:inline-flex;align-items:center}
}

/* Globe — rotates along its vertical middle axis (all occurrences) */
@keyframes globeSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.ship-globe{animation:globeSpin 8s linear infinite;transform-origin:center center}

/* NAV — larger for readability */
#site-nav .nav-logo,.nav-logo{font-size:18px}
#site-nav .nav-link,.nav-link{font-size:15px;padding:9px 16px}
#site-nav .nav-cta,.nav-cta{font-size:15px}

/* NAV — PNC monogram + larger links */
.nav-logo{font-size:26px!important;letter-spacing:0.30em!important}
.nav-link{font-size:17px!important;padding:11px 20px!important}
/* Globe — true 3D spin around the vertical middle axis */
.ship-badge-content{perspective:400px}
.ship-globe{transform-style:preserve-3d;backface-visibility:visible}
/* No horizontal panning — ever */
html,body{overflow-x:clip!important}

/* ═══ NAV — UNIFORM ACROSS ALL PAGES (final spec) ═══ */
:root{--nav-h:64px}
.nav-logo{font-size:26px!important;letter-spacing:0.30em!important;font-weight:900!important}
.nav-link{
  font-size:17px!important;font-weight:700!important;
  letter-spacing:0.18em!important;
  padding:11px 20px!important;margin:0 2px!important;
}
.nav-cta{font-size:15px!important;padding:12px 24px!important;min-height:44px!important}

/* ═══ NAV LINKS — FINAL UNIFORM SIZE (16px everywhere, all pages) ═══ */
.nav-link{
  font-family:"Courier New",monospace!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:0.18em!important;
  padding:10px 18px!important;
  margin:0 2px!important;
  line-height:1.2!important;
}

/* ── PERIMETER PROGRESS — GPU transforms (no per-frame layout) ────── */
#prog{height:100%!important;transform:scaleY(0);transform-origin:top center;will-change:transform}
#prog-r{height:100%!important;transform:scaleY(0);transform-origin:top center;will-change:transform}
#prog-b-l{width:50%!important;transform:scaleX(0);transform-origin:left center;will-change:transform}
#prog-b-r{width:50%!important;transform:scaleX(0);transform-origin:right center;will-change:transform}
#prog-t-l{width:50%!important;transform:scaleX(0);transform-origin:left center;will-change:transform}
#prog-t-r{width:50%!important;transform:scaleX(0);transform-origin:right center;will-change:transform}