/* kingsmen.css — self-contained design system for this prototype.
   Extracted from the original single-page build so all pages of the site share it.
   Brand-isolated on purpose: do NOT merge into the main site stylesheet. */

button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
:root{
  --ink:#0a0807; --ink-2:#1a1612; --ink-3:#3a342d;
  --bone:#f1ebe0; --bone-2:#e3dccc; --paper:#f7f1e6;
  --brass:#c8941f; --brass-2:#866516;
  --red:#c3371a;
  --rule:rgba(241,235,224,.1); --rule-2:rgba(241,235,224,.18);
  --rule-ink:rgba(10,8,7,.1);
  --display:'Bebas Neue', sans-serif;
  --sans:'IBM Plex Sans', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --serif:'IBM Plex Serif', serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

/* ── PAGE TRANSITION ─────────────────────────────────────────────────── */
#pto{position:fixed;inset:0;background:var(--ink);z-index:9999;pointer-events:none;opacity:1;transition:opacity .3s ease}
#pto.hide{opacity:0}

/* ── YETI BAND ───────────────────────────────────────────────────────── */
.yeti-bar{
  position:sticky;top:0;z-index:9000;background:#000;color:rgba(241,235,224,.55);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  border-bottom:1px solid rgba(241,235,224,.06);
}
.yeti-bar a{color:rgba(241,235,224,.55);text-decoration:none}
.yeti-bar a:hover{color:#fff}
.yeti-bar .right{background:var(--red);color:#fff;font-weight:500;
  padding:7px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
.yeti-bar .right:hover{background:#a82c14}

/* ── NAV ─────────────────────────────────────────────────────────────── */
.nav-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:8px;color:var(--bone)}
nav.site-nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 36px;background:var(--ink);border-bottom:1px solid var(--rule);
  position:relative;z-index:8500;
}
.nav-l,.nav-r{display:flex;gap:32px;align-items:center}
.nav-r{justify-content:flex-end}
nav.site-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,235,224,.65);text-decoration:none;position:relative;padding-bottom:4px;font-weight:400;
}
nav.site-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brass);transition:right .35s cubic-bezier(.4,0,.2,1);
}
nav.site-nav a:hover{color:var(--bone)}
nav.site-nav a:hover::after{right:0}
nav.site-nav a.nav-cta::after{display:none}
nav.site-nav .nav-mark{
  font-family:var(--display);font-size:36px;letter-spacing:.04em;color:var(--bone);
  display:inline-block;line-height:1;white-space:nowrap;
}
nav.site-nav .nav-mark .K{color:var(--brass)}
nav.site-nav .nav-mark sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--bone);text-transform:uppercase;vertical-align:baseline;font-weight:500;margin-left:11px}
.nav-cta{
  border:1px solid var(--brass);color:var(--brass)!important;
  padding:10px 16px!important;font-size:10px!important;letter-spacing:.18em!important;
  transition:background .25s,color .25s;
}
.nav-cta:hover{background:var(--brass);color:var(--ink)!important}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink);overflow:hidden;padding:48px 36px 0}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;min-height:80vh}
.hero-left{padding-bottom:48px}
.hero-meta{
  display:flex;gap:20px;align-items:center;margin-bottom:36px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(241,235,224,.5);
}
.hero-meta .pill{background:var(--brass);color:var(--ink);padding:5px 10px;font-weight:600;letter-spacing:.18em}
.hero-meta .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ade80}
.hero-h1{
  font-family:var(--display);font-weight:400;line-height:.78;letter-spacing:.005em;
  font-size:clamp(48px,7.6vw,135px);color:var(--bone);
}

.hero-h1 .word{display:inline-block;opacity:0;transform:translateY(.2em);animation:wordIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-h1 .word.l2, .hero-h1 .word.l3, .hero-h1 .word.l4{display:block}
.hero-h1 .word.l2{-webkit-text-stroke:2px var(--brass);color:transparent;margin-top:-.04em}
.hero-h1 .word.l3{color:var(--brass)}
.hero-h1 .word.l4{color:var(--bone)}
@keyframes wordIn{to{opacity:1;transform:none}}

.hero-right{padding-bottom:48px;display:flex;flex-direction:column;gap:36px}
.hero-fig{
  position:relative;background:#1a1612;aspect-ratio:4/5;max-height:min(480px,52vh);overflow:hidden;
  border:1px solid var(--rule-2);
}
.hero-fig image-slot, .hero-fig img{position:absolute;inset:0;width:100%;height:100%;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.14) translate(-2%,-1%)}}
.hero-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.45) 100%)}
.hero-fig .stamp{
  position:absolute;top:18px;left:18px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,.55);padding:6px 10px;border:1px solid rgba(255,255,255,.18);
}
.hero-fig .stamp.br{top:auto;bottom:18px;left:auto;right:18px}
.hero-lede{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:rgba(241,235,224,.78);max-width:36ch}
.hero-lede em{font-style:italic;color:var(--brass)}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.btn-brass{
  background:var(--brass);color:var(--ink);padding:18px 28px;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;border:none;cursor:pointer;font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;gap:14px;transition:background .25s, gap .25s;
}
.btn-brass:hover{background:var(--bone);gap:18px}
.btn-brass span{display:inline-block;width:20px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h17M13 1l5 5-5 5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h17M13 1l5 5-5 5'/></svg>") center/contain no-repeat;vertical-align:middle;margin-left:2px;transition:transform .25s ease}
.btn-brass:hover span{transform:translateX(3px)}
.btn-link{color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:4px;background:none;border-left:0;border-right:0;border-top-width:0;cursor:pointer;font-weight:500}
.btn-link:hover{color:var(--brass)}

/* ── ROSTER STRIP (under hero) ───────────────────────────────────────── */
.roster{
  background:var(--ink);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  padding:24px 36px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;
}
.roster-head{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone)}
.roster-list{display:flex;gap:36px;flex-wrap:wrap;align-items:center}
.roster-item{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--bone);text-transform:uppercase}
.roster-item b{font-family:var(--display);font-size:18px;letter-spacing:.04em;color:var(--brass);font-weight:400}
.roster-item .st{display:inline-block;width:6px;height:6px;border-radius:50%}
.roster-item .st.in{background:#4ade80}
.roster-item .st.out{background:#a82c14}
.roster-item .st.brk{background:var(--brass)}
.roster-time{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(241,235,224,.55);text-align:right}
.roster-time b{color:var(--brass);font-weight:500}

/* ── RIBBON ──────────────────────────────────────────────────────────── */
.ribbon{background:var(--brass);color:var(--ink);padding:14px 0;overflow:hidden}
.ribbon-track{display:flex;gap:36px;white-space:nowrap;animation:ribbonScroll 22s linear infinite;
  font-family:var(--display);font-size:24px;letter-spacing:.06em;font-weight:400}
@media (max-width:560px){.ribbon-track{animation-duration:18s}}
.ribbon-track span{display:inline-flex;align-items:center;gap:36px}
.ribbon-track i{font-style:normal;color:var(--ink);font-size:8px}
@keyframes ribbonScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SHOP FLOOR (bespoke) ────────────────────────────────────────────── */
.floor{background:var(--ink);padding:140px 36px;position:relative;overflow:hidden}
.floor-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;max-width:1320px;margin:0 auto}
.floor-fig{position:relative;aspect-ratio:4/5;background:var(--ink-2);border:1px solid var(--rule-2);overflow:hidden}
.floor-fig image-slot{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(.4) contrast(1.05)}
.floor-est{
  position:absolute;top:32px;left:32px;z-index:2;
  font-family:var(--display);font-size:128px;line-height:.85;color:var(--bone);letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.floor-est em{display:block;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--brass);font-weight:500;margin-top:8px}
.floor-corner{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.7);text-transform:uppercase}
.floor-corner.br{bottom:18px;right:18px}
.floor-body .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:24px;display:flex;gap:12px;align-items:center}
.floor-body .eyebrow::before{content:"";width:24px;height:1px;background:var(--brass)}
.floor-body h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,96px);line-height:.92;letter-spacing:.01em;color:var(--bone);margin-bottom:32px}
.floor-body h2 em{font-style:normal;color:var(--brass)}
.floor-body p{font-size:16px;line-height:1.65;color:rgba(241,235,224,.72);margin-bottom:18px;max-width:48ch}
.floor-body p em{font-family:var(--serif);font-style:italic;color:var(--bone);font-size:18px;font-weight:400}
.floor-plates{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;padding-top:36px;border-top:1px solid var(--rule-2)}
.plate{background:var(--ink-2);padding:24px 22px;border-left:2px solid var(--brass)}
.plate b{display:block;font-family:var(--display);font-size:54px;line-height:.9;color:var(--bone);letter-spacing:.02em;font-weight:400}
.plate b em{font-style:normal;color:var(--brass)}
.plate span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,235,224,.5);margin-top:8px}

/* ── CUTS (filing-cabinet menu) ─────────────────────────────────────── */
.cuts{background:var(--bone);color:var(--ink);padding:140px 36px}
.cuts-head{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:end;margin-bottom:64px;max-width:1320px;margin-left:auto;margin-right:auto}
.cuts-head .l{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.cuts-head .r{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;line-height:1.6}
.cuts-head .r b{color:var(--brass-2);font-weight:600}
.cuts-head h2{font-family:var(--display);font-weight:400;font-size:clamp(64px,8vw,128px);line-height:.88;letter-spacing:.01em;color:var(--ink);text-align:center}
.cuts-head h2 em{font-style:normal;color:var(--brass-2)}
.cuts-list{max-width:1180px;margin:0 auto;border-top:2px solid var(--ink)}
.cut-row{
  display:grid;grid-template-columns:80px 1fr 100px 120px;gap:24px;align-items:center;
  padding:24px 12px;border-bottom:1px solid var(--rule-ink);transition:background .2s, padding .2s;cursor:pointer;
}
.cut-row:hover{background:rgba(200,148,31,.08);padding-left:18px}
.cut-no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brass-2);font-weight:600}
.cut-name{font-family:var(--display);font-size:32px;line-height:.95;color:var(--ink);letter-spacing:.02em}
.cut-name em{font-style:normal;color:var(--brass-2)}
.cut-name small{display:block;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-3);margin-top:4px;letter-spacing:0;line-height:1.4}
.cut-dur{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.cut-price{font-family:var(--display);font-size:36px;color:var(--ink);text-align:right;letter-spacing:.02em}
.cut-price em{font-style:normal;color:var(--brass-2);font-size:18px;margin-right:4px}

/* ── CHAIRMEN (team as ID cards) ─────────────────────────────────────── */
.chairmen{background:var(--paper);color:var(--ink);padding:140px 36px}
.chairmen-head{max-width:1320px;margin:0 auto 64px;display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.chairmen-head .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);margin-bottom:18px}
.chairmen-head h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,7vw,108px);line-height:.9;letter-spacing:.01em;color:var(--ink)}
.chairmen-head h2 em{font-style:normal;color:var(--brass-2)}
.chairmen-head p{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-3);max-width:32ch;line-height:1.5}
.chairmen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1320px;margin:0 auto}
.chair-card{background:var(--bone);border:1px solid var(--rule-ink);position:relative}
.chair-card .id{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--rule-ink);
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.chair-card .id b{color:var(--brass-2);font-weight:600}
.chair-card .photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bone-2)}
.chair-card .photo image-slot{display:block;width:100%;height:100%}
.chair-card .data{padding:18px 16px 22px}
.chair-card h3{font-family:var(--display);font-size:32px;line-height:.95;color:var(--ink);letter-spacing:.02em}
.chair-card h3 em{font-style:normal;color:var(--brass-2)}
.chair-card .spec{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:10px;display:flex;justify-content:space-between;border-top:1px dotted var(--rule-ink);padding-top:10px}
.chair-card .spec b{color:var(--ink);font-weight:500}

/* ── REVIEWS ─────────────────────────────────────────────────────────── */
.reviews{background:var(--ink);padding:140px 36px}
.reviews-head{max-width:1320px;margin:0 auto 56px;display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.reviews-head .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.reviews-head h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,84px);line-height:.92;letter-spacing:.01em;color:var(--bone);max-width:18ch}
.reviews-head h2 em{font-style:normal;color:var(--brass)}
.reviews-meta{font-family:var(--serif);font-style:italic;font-size:18px;color:rgba(241,235,224,.55);max-width:30ch;line-height:1.5}
.reviews-meta b{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:8px;font-weight:500}
.reviews-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{padding:32px 28px;background:var(--ink-2);border:1px solid var(--rule-2);position:relative}
.rev .stars{color:var(--brass);font-size:13px;letter-spacing:.15em;margin-bottom:18px;font-family:var(--mono)}
.rev-q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;line-height:1.5;color:var(--bone);margin-bottom:24px;text-wrap:pretty}
.rev-q em{font-style:italic;color:var(--brass)}
.rev-attr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);display:flex;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--rule-2)}
.rev-attr b{color:var(--bone);font-weight:500}

/* ── HOUSE RULES (stamps) ────────────────────────────────────────────── */
.rules{background:var(--bone);color:var(--ink);padding:120px 36px}
.rules-head{max-width:1320px;margin:0 auto 56px;text-align:center}
.rules-head .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);margin-bottom:18px}
.rules-head h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,84px);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.rules-head h2 em{font-style:normal;color:var(--brass-2)}
.rules-head p{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-3);margin-top:14px}
.rules-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule-ink)}
.rule{background:var(--bone);padding:36px 28px;display:flex;flex-direction:column;gap:14px;position:relative;transition:background .25s}
.rule:hover{background:var(--paper)}
.rule .no{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
.rule .no::after{content:"";flex:1;margin-left:14px;height:1px;background:var(--rule-ink)}
.rule h3,
.rule h4{font-family:var(--display);font-size:36px;line-height:.95;color:var(--ink);letter-spacing:.02em}
.rule h3 em,
.rule h4 em{font-style:normal;color:var(--brass-2)}
.rule p{font-size:14px;line-height:1.55;color:var(--ink-3)}

/* ── ON THE FLOOR (instagram) ────────────────────────────────────────── */
.feed{background:var(--ink);padding:140px 36px;text-align:center}
.feed .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.feed h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,96px);line-height:.95;letter-spacing:.01em;color:var(--bone);margin-bottom:14px}
.feed h2 em{font-style:normal;color:var(--brass)}
.feed .handle{font-family:var(--serif);font-style:italic;font-size:18px;color:rgba(241,235,224,.55);margin-bottom:48px}
.feed-grid{max-width:1320px;margin:0 auto 40px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.feed-cell{position:relative;background:var(--ink-2);overflow:hidden;cursor:pointer;aspect-ratio:1}
.feed-cell image-slot{display:block;width:100%;height:100%}
.feed-cell::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .25s}
.feed-cell:hover::after{background:rgba(0,0,0,.3)}
.feed-link{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:4px}
.feed-link:hover{color:var(--brass)}

/* ── ABOUT ───────────────────────────────────────────────────────────── */
.about{background:var(--paper);color:var(--ink);padding:140px 36px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1380px;margin:0 auto}
.about .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);margin-bottom:24px;display:flex;gap:12px;align-items:center}
.about .eyebrow::before{content:"";width:24px;height:1px;background:var(--brass-2)}
.about h2{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,108px);line-height:.92;letter-spacing:.01em;color:var(--ink);margin-bottom:32px}
.about h2 em{font-style:normal;color:var(--brass-2)}
.about p{font-size:16px;line-height:1.7;color:var(--ink-3);margin-bottom:18px;max-width:50ch}
.about p em{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:18px;font-weight:400}
.about-fig{position:relative;aspect-ratio:4/5;background:var(--bone-2);overflow:hidden;border:1px solid var(--rule-ink)}
.about-fig image-slot{position:absolute;inset:0;width:100%;height:100%}
.about-fig .corner{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.about-fig .corner.tl{top:18px;left:18px}
.about-fig .corner.br{bottom:18px;right:18px}

/* ── BIG CTA ─────────────────────────────────────────────────────────── */
.bigcta{background:var(--ink);color:var(--bone);padding:140px 36px;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--rule-2)}
.bigcta::before{content:"";position:absolute;left:50%;top:0;width:140%;height:1px;background:var(--brass);transform:translateX(-50%)}
.bigcta .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:24px}
.bigcta h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,8.4vw,150px);line-height:.88;letter-spacing:.005em;margin-bottom:36px;text-wrap:balance}
.bigcta h2 em{font-style:normal;color:var(--brass)}
.bigcta h2 .stk{-webkit-text-stroke:2px var(--brass);color:transparent}
.bigcta p{font-family:var(--serif);font-style:italic;font-size:22px;color:rgba(241,235,224,.62);max-width:38ch;margin:0 auto 48px;line-height:1.5}
.bigcta-info{margin-top:64px;display:flex;justify-content:center;gap:60px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,235,224,.5);flex-wrap:wrap}
.bigcta-info div{display:flex;flex-direction:column;gap:6px}
.bigcta-info b{font-family:var(--display);font-style:normal;font-size:24px;color:var(--bone);letter-spacing:.02em;font-weight:400}

/* ── YETI CASE ───────────────────────────────────────────────────────── */
.yeti-case{background:#000;color:rgba(241,235,224,.85);padding:100px 36px;border-top:1px solid var(--rule-2)}
.yeti-case-inner{max-width:1180px;margin:0 auto}
.yeti-case .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:36px;display:flex;gap:12px;align-items:center}
.yeti-case .eyebrow::before{content:"";width:36px;height:1px;background:var(--brass)}
.yeti-case h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,72px);line-height:.96;letter-spacing:.01em;color:#fff;max-width:22ch;margin-bottom:8px}
.yeti-case h2 em{font-style:normal;color:var(--brass)}
.yeti-case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:32px 0;border-top:1px solid rgba(241,235,224,.1);border-bottom:1px solid rgba(241,235,224,.1);margin:44px 0}
.yeti-case-meta div{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.yeti-case-meta b{font-family:var(--display);font-style:normal;font-size:24px;color:#fff;font-weight:400;letter-spacing:.02em;text-transform:none}
.yeti-case-meta b em{font-style:normal;color:var(--brass)}
.yeti-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:24px}
.yeti-case-col h3{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:18px;display:flex;gap:10px;align-items:center}
.yeti-case-col h3 .n{font-family:var(--display);font-style:normal;font-size:22px;color:var(--bone);letter-spacing:.04em}
.yeti-case-col p{font-size:15px;line-height:1.65;color:rgba(241,235,224,.72)}
.yeti-case-col p em{font-family:var(--serif);font-style:italic;color:#fff;font-size:17px;font-weight:400}
.yeti-case-results{display:flex;flex-direction:column;gap:0;margin-top:8px}
.yeti-case-results div{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid rgba(241,235,224,.08)}
.yeti-case-results div:last-child{border-bottom:none}
.yeti-case-results b{font-family:var(--display);font-size:42px;font-weight:400;color:#fff;letter-spacing:.02em;line-height:1;flex-shrink:0;min-width:90px}
.yeti-case-results b em{font-style:normal;color:var(--brass);font-size:24px}
.yeti-case-results span{font-size:13px;color:rgba(241,235,224,.6);line-height:1.4}
.yeti-case-cta{margin-top:56px;padding-top:36px;border-top:1px solid rgba(241,235,224,.1);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.yeti-case-cta p{font-family:var(--serif);font-style:italic;font-size:20px;color:rgba(241,235,224,.7);max-width:38ch;line-height:1.45}
.yeti-case-cta a{background:var(--brass);color:var(--ink);padding:18px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:14px;transition:background .25s, gap .25s;flex-shrink:0;font-weight:600}
.yeti-case-cta a:hover{background:var(--bone);gap:18px}
.yeti-case-cta a span{display:inline-block;width:24px;height:1px;background:currentColor}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.foot{background:#000;color:rgba(241,235,224,.5);padding:32px 36px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;flex-wrap:wrap;gap:18px;text-transform:uppercase}
.foot a{color:var(--brass);text-decoration:none}
.foot a:hover{color:#fff}

/* ── SCROLL REVEAL ───────────────────────────────────────────────────── */
.js .sr{opacity:0;transform:translateY(28px);transition:opacity .55s ease, transform .55s ease}
.sr.visible{opacity:1;transform:none}
.sr-delay-1{transition-delay:.1s}.sr-delay-2{transition-delay:.2s}

/* ── HOURS BADGE ─────────────────────────────────────────────────────── */
.hours-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;padding:4px 10px;text-transform:uppercase}
.hours-badge.open{background:rgba(34,139,84,.18);color:#7dd6a3;border:1px solid rgba(34,139,84,.28)}
.hours-badge.closed{background:rgba(241,235,224,.06);color:rgba(241,235,224,.5);border:1px solid var(--rule)}
.hours-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── MOBILE BOOK BAR ─────────────────────────────────────────────────── */
.mobile-book-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:8888;background:rgba(0,0,0,.96);backdrop-filter:blur(12px);padding:12px 20px 20px;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);border-top:1px solid var(--rule-2)}
.mobile-book-bar.visible{transform:translateY(0)}
.mobile-book-bar-btn{display:block;width:100%;text-align:center;background:var(--brass);color:var(--ink);font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:15px;text-decoration:none;border:none;cursor:pointer}

/* ── BOOKING MODAL ───────────────────────────────────────────────────── */
.booking-modal-overlay{position:fixed;inset:0;z-index:10100;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.booking-modal-overlay.open{opacity:1;pointer-events:all}
.booking-modal{background:var(--bone);color:var(--ink);border:1px solid var(--rule-ink);width:100%;max-width:480px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6);transform:translateY(20px);transition:transform .25s ease}
.booking-modal-overlay.open .booking-modal{transform:none}
.booking-modal-head{padding:24px 28px 20px;border-bottom:1px solid var(--rule-ink);display:flex;justify-content:space-between;align-items:center}
.booking-modal-title{font-family:var(--display);font-size:32px;font-weight:400;color:var(--ink);letter-spacing:.02em;line-height:1}
.booking-modal-title em{font-style:normal;color:var(--brass-2)}
.booking-modal-sub{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.booking-close{width:32px;height:32px;background:var(--bone-2);border:1px solid var(--rule-ink);cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:background .2s}
.booking-close:hover{background:var(--brass);color:#fff;border-color:var(--brass)}
.booking-cal{padding:20px 24px}
.booking-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.booking-cal-nav button{background:var(--bone-2);border:1px solid var(--rule-ink);color:var(--ink);width:36px;height:36px;cursor:pointer;font-size:14px;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.booking-cal-nav button:hover{background:var(--brass);color:#fff;border-color:var(--brass)}
.booking-month{font-family:var(--display);font-size:24px;color:var(--ink);font-weight:400;letter-spacing:.02em}
.booking-month em{font-style:normal;color:var(--brass-2)}
.booking-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:8px}
.booking-weekday{text-align:center;font-family:var(--mono);font-size:9px;color:var(--ink-3);padding:4px 0;letter-spacing:.16em}
.booking-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.booking-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--ink-3);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s;border:1px solid transparent;background:none;font-weight:500}
.booking-day:hover:not(.past):not(.unavail){background:var(--bone-2)}
.booking-day.avail{color:var(--ink)}
.booking-day.avail:hover{border-color:var(--brass)}
.booking-day.selected{background:var(--brass);color:var(--ink);border-color:var(--brass);font-weight:600}
.booking-day.past{color:var(--rule-ink);cursor:default}
.booking-day.unavail{color:var(--rule-ink);cursor:default;text-decoration:line-through}
.booking-day.today{outline:1px solid var(--brass)}
.booking-times{padding:0 24px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:0;overflow:hidden;transition:max-height .3s ease, padding .3s ease}
.booking-times.show{max-height:200px;padding:0 24px 20px}
.booking-time-slot{padding:10px 6px;border:1px solid var(--rule-ink);text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s;background:var(--bone-2);letter-spacing:.08em}
.booking-time-slot:hover{border-color:var(--brass);background:var(--paper);color:var(--brass-2)}
.booking-time-slot.booked{color:var(--rule-ink);cursor:default;text-decoration:line-through}
.booking-time-slot.selected{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:500}
.booking-footer{padding:16px 24px 24px;border-top:1px solid var(--rule-ink)}
.booking-confirm-btn{display:block;width:100%;text-align:center;padding:14px;background:var(--ink);color:var(--bone);border:none;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .15s}
.booking-confirm-btn:disabled{opacity:.35;cursor:default}
.booking-confirm-btn:not(:disabled):hover{background:var(--brass);color:var(--ink)}
.booking-note{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:center;margin-top:10px}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 980px){
  .yeti-bar a:first-child{display:none}
  .yeti-bar{justify-content:flex-end}
  .hero-grid{grid-template-columns:1fr;gap:32px;min-height:auto}
  .hero{padding:36px 24px 0}
  .hero-left{padding-bottom:28px}
  .hero-right{padding-bottom:36px}
  .roster{grid-template-columns:1fr;gap:18px;padding:20px 24px}
  .roster-head, .roster-time{text-align:left}
  .floor{padding:80px 24px}
  .floor-grid{grid-template-columns:1fr;gap:48px}
  .floor-est{font-size:84px;top:20px;left:20px}
  .cuts{padding:80px 24px}
  .cuts-head{grid-template-columns:1fr;gap:16px;text-align:center}
  .cuts-head .l, .cuts-head .r{text-align:center}
  .cut-row{grid-template-columns:50px 1fr 90px;gap:14px;padding:18px 8px}
  .cut-dur{display:none}
  .cut-name{font-size:24px}
  .cut-price{font-size:28px}
  .chairmen{padding:80px 24px}
  .chairmen-grid{grid-template-columns:repeat(2,1fr)}
  .reviews{padding:80px 24px}
  .reviews-grid{grid-template-columns:1fr;gap:18px}
  .rules{padding:80px 24px}
  .rules-grid{grid-template-columns:repeat(2,1fr)}
  .feed{padding:80px 24px}
  .feed-grid{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:1fr;padding:80px 24px;gap:48px}
  .bigcta{padding:80px 24px}
  .bigcta-info{flex-direction:column;gap:28px}
  .yeti-case{padding:60px 24px}
  .yeti-case-meta{grid-template-columns:repeat(2,1fr)}
  .yeti-case-grid{grid-template-columns:1fr;gap:36px}
  .foot{padding:24px 24px}
}
@media (max-width: 768px){
  .nav-toggle{display:block}
  nav.site-nav{grid-template-columns:auto auto auto;padding:16px 20px}
  .nav-l, .nav-r{display:none}
  nav.site-nav.mobile-open{grid-template-columns:1fr}
  nav.site-nav.mobile-open .nav-l, nav.site-nav.mobile-open .nav-r{display:flex;flex-direction:column;width:100%;gap:18px;align-items:flex-start;padding-top:18px;border-top:1px solid var(--rule);margin-top:14px}
  nav.site-nav.mobile-open .nav-r{padding-bottom:8px}
  nav.site-nav .nav-mark{font-size:27px}
  .mobile-book-bar{display:block}
  .feed-grid{grid-template-columns:repeat(2,1fr)}
  .chairmen-grid{grid-template-columns:1fr}
  .rules-grid{grid-template-columns:1fr}
  .cut-row{grid-template-columns:40px 1fr 70px;gap:10px}
}
@media (max-width: 480px){
  input, textarea, select{font-size:16px !important}
  .hero-h1{font-size:72px;line-height:.82}
  .floor-est{font-size:56px}
  .floor-plates{grid-template-columns:1fr}
}

[class*="-card"]{will-change:transform;contain:layout style}
section:not(:first-of-type){contain-intrinsic-size:0 600px}

/* ── Mobile safety: prevent horizontal overflow ─ */
html,body{overflow-x:clip}

/* ── Mobile + reduced-motion: disable kenburns + heavy animations to keep scroll smooth ─ */
@media (max-width:880px){
  image-slot{animation:none !important}
}
/* Narrow-viewport heading clamps (≤560px iPhone Pro) — Kingsmen mark + cuts h2
   were sized for desktop; this drops them so Bebas Neue uppercase doesn't
   overflow on 390px. */
@media (max-width:560px){
  .hero-h1{font-size:clamp(56px,16vw,108px);line-height:.84;letter-spacing:.005em}
  .hero-meta{flex-wrap:wrap;gap:10px;font-size:9px;letter-spacing:.16em}
  .floor-body h2,.cuts-head h2{font-size:clamp(40px,11vw,68px);line-height:.92}
  .container,.wrap{padding-left:18px;padding-right:18px}
  .bigcta{padding:80px 20px}
  .bigcta h2{font-size:clamp(44px,11vw,72px);line-height:.92;margin-bottom:24px}
  .bigcta p{font-size:18px}
  .bigcta-info{gap:24px;margin-top:32px;font-size:10px;letter-spacing:.12em}
  .bigcta-info b{font-size:18px}
  .chairmen-head h2{font-size:clamp(40px,11vw,68px);line-height:.92}
}
@media (prefers-reduced-motion:reduce){
  image-slot{animation:none !important}
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}


/* ─── A11y: keyboard focus ring + touch handling ─── */
:focus{outline:none}
:focus-visible{outline:2px solid #b08543;outline-offset:3px;border-radius:2px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #b08543;outline-offset:3px;border-radius:2px}
button,a,input[type=submit],input[type=button]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.08)}
.modal,.booking-modal{overscroll-behavior:contain}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:#111;color:#fff;padding:14px 22px;font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;z-index:9999}
.skip-link:focus,.skip-link:focus-visible{left:16px;top:16px;outline:2px solid #b08543;outline-offset:3px}

/* ─── Mobile scroll-perf — kill infinite animations + backdrop-filter + heavy transforms.
       Stops scroll jank on iOS Safari + low-end Android. Universal selectors. */
@media (max-width: 880px) {
  .hero-fig image-slot, .hero-figure image-slot,
  .hero-fig img, .hero-figure img,
  .hero-photo image-slot, .hero-photo img,
  image-slot[id*="hero"], .featured-cover img {
    animation: none !important;
    transform: none !important;
  }
  .modal-bg, .booking-modal-bg, [class*="modal-bg"],
  [class*="-cap"], [class*="-bar"], [class*="-stamp"], [class*="-plate"],
  .topbar, .site-nav, .yeti-bar, nav.site-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  section { content-visibility: auto; contain-intrinsic-size: 0 800px; }
  /* Reset stuck compositor layers from opacity:0 backdrop-filter elements */
  .modal-bg[style*="opacity: 0"], .modal-bg:not(.is-open) {
    will-change: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ── MULTI-PAGE ADDITIONS ────────────────────────────────────────────────
   Added when this prototype grew from one page into a full site.
   Additive only — nothing above is redefined. */

/* Prototype disclosure inside the Yeti band */
.yeti-bar span{flex:1 1 auto;text-align:center;color:var(--bone);letter-spacing:.06em}
@media (max-width:560px){
  .yeti-bar{padding:8px 14px;gap:10px}
  .yeti-bar span{font-size:9px;letter-spacing:.03em}
  .yeti-bar .right{font-size:9px;padding:6px 9px;white-space:nowrap}
}

/* Sitewide nav — full link set, wraps instead of overflowing */
nav.site-nav.nav-full .nav-l,nav.site-nav.nav-full .nav-r{gap:12px 24px;flex-wrap:wrap}
nav.site-nav a[aria-current="page"]{color:var(--brass)}
nav.site-nav .nav-mark[aria-current="page"]{color:var(--brass)}
nav.site-nav .nav-cta[aria-current="page"]{background:var(--brass);color:var(--ink)!important;border-color:var(--brass)}
.mob-nav a[aria-current="page"]{color:var(--brass)}
@media (max-width:768px){
}

/* Plain <img> in the figures the single-page build filled with <image-slot> */
.floor-fig img,.about-fig img,.chair-card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-fig img{object-fit:cover}

/* Sub-page hero — same type, less height than the home page's 80vh */
.hero.hero-page{padding:56px 36px 64px}
.hero.hero-page .hero-grid{min-height:auto;align-items:start;gap:44px}
.hero.hero-page .hero-left{padding-bottom:0}
.hero.hero-page .hero-right{padding-bottom:0;gap:26px}
.hero.hero-page .hero-h1{font-size:clamp(48px,8vw,120px)}
@media (max-width:980px){.hero.hero-page{padding:36px 24px 44px}}

/* Barber cards carry a bio + their own booking route */
.chair-card .data p{font-size:13px;line-height:1.55;color:var(--ink-3);margin-top:12px}
.chair-card .book{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-2);text-decoration:none;
}
.chair-card .book:hover{color:var(--ink)}

/* Reference tables built on the cuts menu rows (hours, wait times, rotas) */
.cut-row.is-static{cursor:default}
.cut-row.is-static:hover{background:transparent;padding-left:12px}
.cut-price .unit{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ink-3);margin-left:3px}
.cut-price.closed{font-size:26px;color:var(--ink-3)}

/* Text links inside prose — light grounds by default, brass on the dark ones */
.tlink{color:var(--brass-2);text-decoration:none;border-bottom:1px solid rgba(139,104,23,.45)}
.tlink:hover{color:var(--ink);border-bottom-color:var(--ink)}
.floor-body .tlink,.hero .tlink,.bigcta .tlink,.reviews .tlink,.feed .tlink{color:var(--brass);border-bottom-color:rgba(200,148,31,.45)}
.floor-body .tlink:hover,.hero .tlink:hover,.bigcta .tlink:hover,.reviews .tlink:hover,.feed .tlink:hover{color:var(--bone);border-bottom-color:var(--bone)}
/* Standalone link on a light section — sized to a 44px touch target */
.lnk{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-2);text-decoration:none;
}
.lnk::after{content:"";flex:0 0 26px;height:1px;background:currentColor}
.lnk:hover{color:var(--ink)}

/* ── PRICE BOARD / POLICY BOARD PAGES ────────────────────────────────────
   services · cuts-fades · beard-shaves · shop-policies */

/* An <h1> carries the weight of the <h2> in whichever section head opens the page */
.cuts-head h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,8vw,128px);line-height:.88;letter-spacing:.01em;color:var(--ink);text-align:center}
.cuts-head h1 em{font-style:normal;color:var(--brass-2)}
.rules-head h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,84px);line-height:.95;letter-spacing:.01em;color:var(--ink)}
.rules-head h1 em{font-style:normal;color:var(--brass-2)}
.floor-body h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,96px);line-height:.92;letter-spacing:.01em;color:var(--bone);margin-bottom:32px}
.floor-body h1 em{font-style:normal;color:var(--brass)}
.about h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,6vw,100px);line-height:.92;letter-spacing:.01em;color:var(--ink);margin-bottom:32px}
.about h1 em{font-style:normal;color:var(--brass-2)}

/* Group label above a run of .cut-row price lines */
.cut-group{
  max-width:1180px;margin:56px auto 12px;padding:0 12px;
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-2);
}
.cuts-head + .cut-group{margin-top:0}
.cut-group::after{content:"";flex:1;height:1px;background:var(--rule-ink)}

/* Dashed prose lists inside the floor + about columns */
.floor-body ul,.about ul{list-style:none;margin:0 0 18px;padding:0;max-width:52ch}
.floor-body ul li,.about ul li{position:relative;padding-left:22px;margin-bottom:12px;font-size:15px;line-height:1.6}
.floor-body ul li{color:rgba(241,235,224,.72)}
.about ul li{color:var(--ink-3)}
.floor-body ul li::before,.about ul li::before{content:"—";position:absolute;left:0;top:0}
.floor-body ul li::before{color:var(--brass)}
.about ul li::before{color:var(--brass-2)}

/* Figure captions sit above the photograph, not behind it */
.floor-corner,.about-fig .corner{z-index:2}

@media (max-width:560px){
  .cuts-head h1,.floor-body h1,.about h1{font-size:clamp(40px,11vw,68px);line-height:.92}
  .rules-head h1{font-size:clamp(38px,10vw,60px)}
  .cut-group{margin:36px auto 10px;padding:0 8px}
}

/* Mobile touch target for the underlined text button — hit area only, look unchanged */
@media (max-width:880px){
  .btn-link{position:relative}
  .btn-link::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
}

/* ── JOURNAL ARTICLES ────────────────────────────────────────────────────
   journal-fade-vocabulary · journal-cut-frequency · journal-beard-growing */

/* Article titles run long — the home page's display size would break them */
.hero-h1.jr-h1{font-size:clamp(38px,5.6vw,78px);line-height:.92}
.hero-h1.jr-h1 em{font-style:normal;color:var(--brass)}

.jr{background:var(--bone);color:var(--ink);padding:96px 36px 110px}
.jr-inner{max-width:760px;margin:0 auto}

/* Byline strip above the article proper */
.jr-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:0 0 40px;padding-bottom:18px;border-bottom:1px solid var(--rule-ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.jr-meta b{color:var(--brass-2);font-weight:600}
.jr-meta .sep{flex:0 0 3px;width:3px;height:3px;border-radius:50%;background:var(--brass-2)}

/* The blunt answer, stamped in ink before anything else */
.jr-answer{background:var(--ink);border-left:3px solid var(--brass);padding:30px 30px 32px;margin:0 0 48px}
.jr-answer .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.jr-answer p{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--bone);margin:0}
.jr-answer p + p{margin-top:12px}
.jr-answer em{font-style:italic;color:var(--brass)}
.jr-answer b{color:var(--brass);font-weight:500}

/* Body copy */
.jr-body p{font-size:17px;line-height:1.68;color:var(--ink-2);margin:0 0 20px;text-wrap:pretty}
.jr-body h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.6vw,50px);line-height:.96;letter-spacing:.015em;color:var(--ink);margin:52px 0 18px}
.jr-body h2 em{font-style:normal;color:var(--brass-2)}
.jr-body h3{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-2);margin:34px 0 12px}
.jr-body strong{color:var(--ink);font-weight:600}
.jr-body ul{list-style:none;margin:0 0 22px;padding:0}
.jr-body ul li{position:relative;padding-left:22px;margin-bottom:12px;font-size:16px;line-height:1.62;color:var(--ink-2)}
.jr-body ul li::before{content:"—";position:absolute;left:0;top:0;color:var(--brass-2)}
.jr-body > :first-child{margin-top:0}

/* A line said out loud in the shop */
.jr-say{
  margin:36px 0 38px;padding-left:24px;border-left:2px solid var(--brass);
  font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,38px);
  line-height:1.06;letter-spacing:.015em;color:var(--ink);
}
.jr-say em{font-style:normal;color:var(--brass-2)}

/* Stamped reference chart — guard numbers, intervals, week by week */
.jr-spec{margin:30px 0 34px;border-top:1px solid var(--rule-ink)}
.jr-spec-row{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:baseline;padding:14px 4px;border-bottom:1px solid var(--rule-ink)}
.jr-spec-row .k{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:.03em;color:var(--brass-2)}
.jr-spec-row .k small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.jr-spec-row .v{font-size:15px;line-height:1.55;color:var(--ink-2)}
.jr-spec-row .v b{color:var(--ink);font-weight:600}
.jr-spec-wide .jr-spec-row{grid-template-columns:158px 1fr}

/* Route back into the shop */
.jr-end{margin-top:56px;padding-top:30px;border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.jr-end p{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink-2);margin:0;max-width:42ch}
.jr-end p em{font-style:italic;color:var(--brass-2)}

/* Sibling articles */
.jr-more{background:var(--ink);padding:80px 36px 96px}
.jr-more-inner{max-width:1180px;margin:0 auto}
.jr-more .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.jr-more .eyebrow::before{content:"";width:24px;height:1px;background:var(--brass)}
.jr-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.jr-card{display:block;background:var(--ink-2);border:1px solid var(--rule);padding:30px 26px 28px;text-decoration:none;transition:background .25s,border-color .25s}
.jr-card:hover{background:#221d18;border-color:var(--brass)}
.jr-card .no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--brass);margin-bottom:16px}
.jr-card h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;letter-spacing:.02em;color:var(--bone);margin-bottom:12px}
.jr-card p{font-size:14px;line-height:1.55;color:rgba(241,235,224,.62);margin:0}
.jr-card.is-current{opacity:.4;pointer-events:none}

@media (max-width:880px){
  .jr{padding:64px 24px 84px}
  .jr-more{padding:64px 24px 76px}
  .jr-more-grid{grid-template-columns:1fr}
  .jr-end{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .hero-h1.jr-h1{font-size:clamp(32px,9vw,46px)}
  .jr-answer{padding:24px 22px 26px}
  .jr-answer p{font-size:18px}
  .jr-body h2{font-size:clamp(28px,9vw,40px)}
  .jr-spec-row{grid-template-columns:70px 1fr;gap:14px}
  .jr-spec-wide .jr-spec-row{grid-template-columns:106px 1fr}
  .jr-spec-row .k{font-size:22px}
}

/* ── GALLERY · JOURNAL INDEX · BOOKING FORM ──────────────────────────────
   gallery · journal · book-chair. Additive only. */

/* Gallery — contact-sheet grid on ink, captions burned into the corner */
.gal{background:var(--ink);padding:96px 36px 120px}
.gal-group{
  max-width:1320px;margin:0 auto 20px;display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass);
}
.gal-group + .gal-grid{margin-top:0}
.gal-group::after{content:"";flex:1;height:1px;background:var(--rule-2)}
.gal-grid{max-width:1320px;margin:0 auto 64px;display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.gal-grid:last-child{margin-bottom:0}
.gal-cell{position:relative;grid-column:span 3;background:var(--ink-2);overflow:hidden;border:1px solid rgba(241,235,224,.06)}
.gal-cell.w4{grid-column:span 4}
.gal-cell.w6{grid-column:span 6}
.gal-cell.w12{grid-column:span 12}
.gal-cell.sq{aspect-ratio:1}
.gal-cell.tall{aspect-ratio:4/5}
.gal-cell.wide{aspect-ratio:16/9}
.gal-cell img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) contrast(1.04);transition:filter .45s ease, transform .6s ease}
.gal-cell:hover img{filter:none;transform:scale(1.035)}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,235,224,.82);
  background:linear-gradient(to top,rgba(10,8,7,.88) 0%,rgba(10,8,7,.45) 55%,rgba(10,8,7,0) 100%);
}
.gal-cap b{color:var(--brass);font-weight:500}
.gal-cap span{text-align:right;flex-shrink:0;color:rgba(241,235,224,.5)}

/* Journal index — one filed row per piece */
.jl{background:var(--bone);color:var(--ink);padding:120px 36px}
.jl-list{max-width:1180px;margin:0 auto;border-top:2px solid var(--ink)}
.jl-row{
  display:grid;grid-template-columns:160px 1fr 130px;gap:32px;align-items:center;
  padding:28px 12px;border-bottom:1px solid var(--rule-ink);
  text-decoration:none;color:inherit;transition:background .2s ease, padding .2s ease;
}
.jl-row:hover{background:rgba(200,148,31,.08);padding-left:18px}
.jl-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.jl-thumb img{width:100%;height:100%;object-fit:cover}
.jl-meta{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);font-weight:600;margin-bottom:10px}
.jl-row h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:.98;letter-spacing:.02em;color:var(--ink)}
.jl-row h2 em{font-style:normal;color:var(--brass-2)}
.jl-row p{font-size:14px;line-height:1.6;color:var(--ink-3);margin-top:10px;max-width:62ch}
.jl-go{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);text-align:right}

/* Short-answer block — questions that never needed a whole piece */
.qa{background:var(--ink);padding:110px 36px}
.qa-inner{max-width:1180px;margin:0 auto}
.qa-list{border-top:1px solid var(--rule-2);margin-top:44px}
.qa-item{display:grid;grid-template-columns:1fr 1.5fr;gap:36px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule)}
.qa-item h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.02em;color:var(--bone)}
.qa-item h3 em{font-style:normal;color:var(--brass)}
.qa-item p{font-size:15px;line-height:1.65;color:rgba(241,235,224,.68)}

/* Booking form — five controls, no account, no wizard */
.bookpanel{background:var(--ink);padding:100px 36px 120px;border-top:1px solid var(--rule-2)}
.bookpanel-head{max-width:780px;margin:0 auto 48px}
.bookpanel-head .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:20px;display:flex;gap:12px;align-items:center}
.bookpanel-head .eyebrow::before{content:"";width:24px;height:1px;background:var(--brass)}
.bookpanel-head h2{font-family:var(--display);font-weight:400;font-size:clamp(44px,5.5vw,84px);line-height:.92;letter-spacing:.01em;color:var(--bone);margin-bottom:20px}
.bookpanel-head h2 em{font-style:normal;color:var(--brass)}
.bookpanel-head p{font-size:16px;line-height:1.65;color:rgba(241,235,224,.7);max-width:52ch}
.bookform{max-width:780px;margin:0 auto;color-scheme:dark}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bf-field{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.bf-field.full{grid-column:1/-1}
.bf-field > label,.bf-legend{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(241,235,224,.55)}
.bf-field .req{color:var(--brass)}
.bf-hint{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--bone);line-height:1.5}
.bf-field input,.bf-field select,.bf-field textarea{
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--bone);
  background:var(--ink-2);border:1px solid var(--rule-2);border-radius:0;
  padding:15px 16px;min-height:52px;width:100%;
}
.bf-field textarea{min-height:110px;resize:vertical}
.bf-field input::placeholder,.bf-field textarea::placeholder{color:rgba(241,235,224,.3)}
.bf-field input:focus,.bf-field select:focus,.bf-field textarea:focus{border-color:var(--brass);outline:none}
.bf-set{border:0;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px}
.bf-pills{display:flex;flex-wrap:wrap;gap:8px}
.bf-pills label{display:inline-flex;position:relative;cursor:pointer}
.bf-pills input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.bf-pills span{
  display:inline-flex;align-items:center;min-height:46px;padding:12px 18px;
  border:1px solid var(--rule-2);background:var(--ink-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,235,224,.7);transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.bf-pills label:hover span{border-color:var(--brass);color:var(--bone)}
.bf-pills input:checked + span{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:600}
.bf-pills input:focus-visible + span{outline:2px solid #b08543;outline-offset:3px}
.bf-submit{margin-top:8px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.bf-note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,235,224,.35);line-height:1.9;margin-top:22px}
.bf-ok{display:none;margin-top:28px;padding:26px 28px;border:1px solid var(--brass);background:rgba(200,148,31,.09)}
.bf-ok.show{display:block}
.bf-ok b{display:block;font-family:var(--display);font-weight:400;font-size:32px;letter-spacing:.02em;color:var(--brass);margin-bottom:10px}
.bf-ok p{font-size:14px;line-height:1.65;color:rgba(241,235,224,.7)}

@media (max-width:980px){
  .gal{padding:64px 20px 80px}
  .gal-cell,.gal-cell.w4{grid-column:span 6}
  .gal-cell.w6,.gal-cell.w12{grid-column:span 12}
  .gal-grid{margin-bottom:44px}
  .jl{padding:72px 24px}
  .jl-row{grid-template-columns:120px 1fr;gap:20px;padding:22px 8px}
  .jl-go{display:none}
  .qa{padding:72px 24px}
  .qa-item{grid-template-columns:1fr;gap:12px}
  .bookpanel{padding:64px 24px 84px}
  .bf-row{grid-template-columns:1fr;gap:0}
}
@media (max-width:560px){
  .gal-cell.wide{aspect-ratio:4/3}
  .gal-cap{font-size:8px;letter-spacing:.14em;padding:12px}
  .jl-row h2{font-size:26px}
  .jl-row{grid-template-columns:88px 1fr;gap:16px}
  .bookpanel-head h2{font-size:clamp(38px,10vw,60px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV — grouped. A sixteen-page site cannot hang sixteen links in one bar;
   the old one wrapped into soup on desktop and buried everything on phones.
   Group heads are real links, so every page stays one hover (or one tap)
   away and the crawler sees the whole graph without opening anything.
   ═══════════════════════════════════════════════════════════════════════ */
nav.site-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding:22px 36px;background:var(--ink);border-bottom:1px solid var(--rule);
  position:relative;z-index:8500}
.nav-l,.nav-r{display:flex;align-items:center;gap:30px;min-width:0}
.nav-r{justify-content:flex-end}
nav.site-nav .nav-l>a,nav.site-nav .nav-head{white-space:nowrap}

.nav-group{position:relative;display:flex;align-items:center}
.nav-head{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.nav-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.5;transition:transform .25s,opacity .25s;flex:none}
.nav-group:hover .nav-caret,.nav-group.is-open .nav-caret,.nav-group:focus-within .nav-caret{transform:rotate(180deg);opacity:1}
.nav-group.is-here>.nav-head{color:var(--brass)}

.nav-drop{position:absolute;top:100%;left:-18px;padding-top:16px;min-width:214px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:20}
.nav-r .nav-drop{left:auto;right:-18px}
.nav-group:hover>.nav-drop,.nav-group:focus-within>.nav-drop,.nav-group.is-open>.nav-drop{
  opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-in{background:var(--ink-2);border:1px solid var(--rule);padding:14px 18px;
  display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 48px rgba(0,0,0,.5)}
nav.site-nav .nav-drop a{display:block;padding:9px 0;font-size:10.5px;letter-spacing:.15em;
  color:rgba(241,235,224,.62);white-space:nowrap}
nav.site-nav .nav-drop a::after{display:none}
nav.site-nav .nav-drop a:hover,nav.site-nav .nav-drop a[aria-current="page"]{color:var(--brass)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px;
  width:44px;height:44px;align-items:center;justify-content:center;color:var(--bone)}
.nav-burger,.nav-burger::before,.nav-burger::after{display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.nav-burger{position:relative}
.nav-burger::before,.nav-burger::after{content:"";position:absolute;left:0}
.nav-burger::before{top:-7px}
.nav-burger::after{top:7px}
[aria-expanded="true"] .nav-burger{background:transparent}
[aria-expanded="true"] .nav-burger::before{transform:translateY(7px) rotate(45deg)}
[aria-expanded="true"] .nav-burger::after{transform:translateY(-7px) rotate(-45deg)}

/* Drawer */
html.nav-locked{overflow:hidden}
.mob-scrim{position:fixed;inset:0;background:rgba(0,0,0,.44);z-index:9600;
  animation:navFade .25s ease}
@keyframes navFade{from{opacity:0}to{opacity:1}}
.mob-nav{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--ink);
  color:var(--bone);padding:24px 28px 40px;z-index:9700;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(105%);visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s;
  display:flex;flex-direction:column;gap:2px}
.mob-nav.on{transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mob-nav .x{align-self:flex-end;background:none;border:0;color:rgba(241,235,224,.52);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 0 10px 10px;margin-bottom:10px}
.mob-nav .x:hover{color:var(--bone)}
.mob-nav a{text-decoration:none;color:var(--bone);display:flex;align-items:center;min-height:44px}
.mob-nav a.lg{font-family:var(--display);font-size:26px;letter-spacing:.05em;text-transform:uppercase;}
.mob-nav a.sm{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(241,235,224,.52);min-height:40px;padding-left:2px}
.mob-nav a.sm:hover,.mob-nav a[aria-current="page"]{color:var(--brass)}
.mob-nav .grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin:20px 0 6px;padding-top:14px;border-top:1px solid rgba(241,235,224,.14)}
.mob-nav .mob-cta{margin-top:26px;justify-content:center;border:1px solid var(--brass);color:var(--brass);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;min-height:52px}
.mob-nav .mob-cta:hover{background:var(--brass);color:var(--ink)}
.mob-nav .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;line-height:1.9;
  color:rgba(241,235,224,.52);text-transform:uppercase;margin-top:28px;padding-top:18px;
  border-top:1px solid rgba(241,235,224,.14)}

@media (max-width:1180px){ .nav-l,.nav-r{gap:20px} }
@media (max-width:980px){
  nav.site-nav{grid-template-columns:1fr auto 1fr;padding:16px 20px}
  .nav-l{display:none}
  .nav-r .nav-group{display:none}
  .nav-toggle{display:inline-flex}
}
@media (max-width:600px){
  nav.site-nav .nav-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mob-nav{transition:none}
  .nav-drop{transition:none}
}

/* The wordmark and the CTA are nav destinations too — mark them. */
nav.site-nav .nav-mark[aria-current="page"]{color:var(--brass)}
nav.site-nav .nav-cta[aria-current="page"]{background:var(--brass);color:var(--ink)!important;border-color:var(--brass)}
.mob-nav a[aria-current="page"]{color:var(--brass)}
.mob-nav .mob-cta[aria-current="page"]{background:var(--brass);color:var(--ink)}

/* ── Touch targets on phones ─────────────────────────────────────────
   The Yeti framing chrome and the shared link styles were sized for a
   cursor: the band links sat at 14px tall and the case-study CTA at 21.
   Nothing here changes type, colour or spacing above 880px. */
@media (max-width:880px){
  .yeti-bar a,.yeti-link,.yeti-cs-cta{display:inline-flex;align-items:center;min-height:44px}
  .p-band a,.p-cs-cta{display:inline-flex;align-items:center;min-height:44px}
  .site-nav a,.site-nav .nav-mark{display:inline-flex;align-items:center;min-height:44px}
  .modal-x,.booking-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  .btn-link,.svc-cta,.insta-link,.feed-link{display:inline-flex;align-items:center;min-height:44px}
  .btn,.btn-fill{display:inline-flex;align-items:center;min-height:44px}
  .booking-cal-nav button,.tt-cats button{min-height:44px}
  .foot-bottom a,.p-foot-bottom a,.p-crumb a{display:inline-block;padding:6px 0}
  /* The band stays one row. Both labels shorten on a phone rather than
     truncating: "Back to Examples" and "Get a site — $950". */
  .yeti-bar,.p-band,.yeti-band-inner{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;min-height:52px}
  .yeti-bar .bd-lg,.p-band .bd-lg,.yeti-band .bd-lg{display:none}
  .yeti-bar > a:first-child,.p-band .back,.yeti-band-inner > a:first-child{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;white-space:nowrap}
  .yeti-bar .right,.p-band .right,.yeti-band .yeti-cta{flex:0 0 auto;align-self:center;text-align:center;white-space:nowrap}
  /* The wordmark bar duplicates the nav mark directly beneath it. One is enough
     on a phone; it carries no links. */
  .shop-top{display:none}
}
/* .nav-l is display:none on a phone, which drops it out of the grid and slides
   the mark and the toggle a column to the left: the hamburger ended up stranded
   mid-row with dead space beside it. Lay the row out with flex instead. */
@media (max-width:980px){
  nav.site-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
  nav.site-nav .nav-mark{flex:0 1 auto;min-width:0}
  nav.site-nav .nav-r{flex:0 0 auto;margin-left:auto}
}
/* Under 360px there is no room for both band labels; the way back steps aside.
   work.html stays in the drawer and in the panel at the foot of the page. */
@media (max-width:359px){
  .yeti-bar > a:first-child,.p-band .back,.yeti-band-inner > a:first-child{display:none}
  .yeti-bar,.p-band,.yeti-band-inner{justify-content:flex-end}
}


/* ── Nav layout: mark left, one menu in the middle, CTA right ──────────
   Was a three-column grid with the wordmark centred and the links split
   either side of it, which reads as two separate menus rather than one.
   Scoped above the 980px breakpoint so the mobile drawer rules are
   untouched. The auto margins centre the two link groups as a pair. */
@media (min-width:981px){
  nav.site-nav{display:flex;align-items:center;gap:30px}
  nav.site-nav .nav-mark{order:1;flex:0 0 auto}
  nav.site-nav .nav-l{order:2;margin-left:auto}
  nav.site-nav .nav-r{order:3;margin-right:auto;justify-content:flex-start}
  nav.site-nav .nav-cta{order:4;flex:0 0 auto}
  nav.site-nav .nav-toggle{order:5;flex:0 0 auto}
}


/* ── Quote cards: attribution sits on the floor of the card ────────────
   The grid stretches all three to the tallest, but .rev was not a column,
   so the shorter cards left their attribution stranded mid-card with dead
   space under it. The oversized first card is deliberate. */
.rev{display:flex;flex-direction:column}
.rev-attr{margin-top:auto}

/* ── Mobile drawer: one hierarchy, two steps ─────────────
   Top-level links ran at 26px display against 12px mono children, a jump
   that read as two unrelated menus stacked on top of each other. */
@media (max-width:980px){
  .mob-nav a.lg{font-size:19px;letter-spacing:.04em;min-height:50px}
  .mob-nav a.sm{font-size:13px;letter-spacing:.12em;min-height:46px;padding-left:12px}
  .mob-nav .grp{font-size:9.5px;letter-spacing:.24em;margin:18px 0 4px;padding-top:14px}
  .mob-nav .mob-cta{margin-top:22px;min-height:52px}
  .mob-nav .sub{margin-top:24px;padding-top:16px;line-height:1.8}
}