/* verse.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{
--bone:#f3ede2; --bone-2:#ebe3d3; --paper:#faf6ee;
--ink:#1a1714; --ink-2:#3a342d; --ink-3:#74695e;
--gold:#866631; --gold-soft:#c4a06a;
--rule:rgba(26,23,20,.08); --rule-soft:rgba(26,23,20,.04);
--serif:'Cormorant Garamond', serif;
--sans:'Inter', sans-serif;
--mono:'JetBrains Mono', ui-monospace, monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bone);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
/* ── YETI BAND (sticky top, agency credit) ───────────────────────────── */
.yeti-bar{
position:sticky;top:0;z-index:9000;background:#0a0a0a;color:rgba(243,237,226,.6);
display:flex;align-items:center;justify-content:space-between;
padding:10px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
}
.yeti-bar a{color:rgba(243,237,226,.6);text-decoration:none}
.yeti-bar a:hover{color:#fff}
.yeti-bar .right{background:var(--gold);color:var(--ink);font-weight:500;
padding:7px 14px;border-radius:0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
.yeti-bar .right:hover{background:#7d5e2a;color:#fff}
/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:8px;color:var(--ink)}
nav.site-nav{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
padding:22px 36px;background:var(--bone);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(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-2);text-decoration:none;position:relative;padding-bottom:4px;font-weight:500;
}
nav.site-nav a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
background:var(--gold);transition:right .35s cubic-bezier(.4,0,.2,1);
}
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(--serif);font-size:30px;letter-spacing:.04em;font-weight:400;color:var(--ink);
display:inline-block;line-height:1;white-space:nowrap;
}
nav.site-nav .nav-mark em{font-style:italic;color:var(--gold);font-weight:300}
nav.site-nav .nav-mark sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;vertical-align:baseline;margin-left:10px}
.nav-cta{
border:1px solid var(--gold);color:var(--gold)!important;
padding:9px 16px!important;font-size:10px!important;letter-spacing:.18em!important;
transition:background .25s,color .25s;
}
.nav-cta:hover{background:var(--gold);color:var(--ink)!important}
/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero{
position:relative;min-height:92vh;
display:grid;grid-template-columns:1.05fr .95fr;
background:var(--bone);overflow:hidden;
}
.hero-figure{position:relative;background:var(--bone-2);overflow:hidden}
.hero-figure image-slot, .hero-figure img{
position:absolute;inset:0;width:100%;height:100%;
animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.hero-figure::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(26,23,20,0) 0%,rgba(26,23,20,0) 60%,rgba(26,23,20,.18) 100%);
pointer-events:none;
}
.hero-tag{
position:absolute;top:32px;left:32px;z-index:2;
font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:#fff;display:flex;gap:10px;align-items:center;text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.hero-tag span{display:inline-block;width:18px;height:1px;background:rgba(255,255,255,.7)}
.hero-coord{
position:absolute;bottom:28px;left:32px;z-index:2;color:#fff;
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.hero-coord b{font-weight:500;letter-spacing:.22em}
.hero-coord i{font-style:normal;opacity:.78}
.hero-body{position:relative;padding:80px 72px 60px;display:flex;flex-direction:column;justify-content:center}
.hero-since{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold);
display:flex;align-items:center;gap:14px;margin-bottom:32px;}
.hero-since::before,.hero-since::after{content:"";display:inline-block;flex:1;height:1px;background:var(--rule);max-width:60px}
.hero-h1{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.025em;
font-size:clamp(56px,7.2vw,108px);color:var(--ink);margin-bottom:28px}
.hero-h1 em{font-style:italic;font-weight:300;color:var(--gold)}
.hero-h1 .word{display:inline-block;opacity:0;transform:translateY(.18em);animation:wordIn .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero-lede{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:42ch;margin-bottom:36px}
.hero-lede em{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);font-weight:400}
.hero-ctas{display:flex;gap:24px;align-items:center;margin-bottom:48px;flex-wrap:wrap}
.btn-gold{background:var(--ink);color:#fff;padding:16px 28px;font-size:11px;
letter-spacing:.22em;text-transform:uppercase;border:none;cursor:pointer;
text-decoration:none;display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:500;
transition:background .25s, gap .25s;}
.btn-gold:hover{background:var(--gold);gap:18px}
.btn-gold span{display:inline-block;width:20px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;vertical-align:middle;margin-left:2px;transition:transform .25s ease}
.btn-gold:hover span{transform:translateX(3px)}
.btn-link{color:var(--ink);font-family:var(--serif);font-style:italic;font-size:18px;
text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer}
.hero-meta{display:grid;grid-template-columns:repeat(3,auto);gap:36px;padding-top:28px;border-top:1px solid var(--rule)}
.hero-meta div{display:flex;flex-direction:column;gap:6px}
.hero-meta b{font-family:var(--serif);font-size:28px;font-weight:400;color:var(--ink);letter-spacing:-.01em}
.hero-meta b em{font-style:italic;color:var(--gold);font-weight:300}
.hero-meta span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
/* ── RIBBON ───────────────────────────────────────────────────────────── */
.ribbon{background:var(--ink);color:var(--bone);padding:18px 0;overflow:hidden;
border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.ribbon-track{display:flex;gap:48px;white-space:nowrap;animation:ribbonScroll 22s linear infinite;
font-family:var(--serif);font-style:italic;font-size:22px;font-weight:400}
@media (max-width:560px){.ribbon-track{animation-duration:18s}}
.ribbon-track span{display:inline-flex;align-items:center;gap:48px}
.ribbon-track i{font-style:normal;color:var(--gold);font-size:8px}
@keyframes ribbonScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── CHAIR ────────────────────────────────────────────────────────────── */
.chair{background:var(--paper);padding:120px 72px;
display:grid;grid-template-columns:.95fr 1.05fr;gap:96px;align-items:center}
.chair-quote .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);margin-bottom:36px;display:flex;gap:12px;align-items:center}
.chair-quote .eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
.chair-quote blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,46px);
line-height:1.18;letter-spacing:-.012em;color:var(--ink);margin-bottom:32px;text-wrap:pretty}
.chair-quote blockquote em{font-style:italic;color:var(--gold)}
.chair-quote blockquote::before{content:"\201C";font-size:1.2em;color:var(--gold);display:block;line-height:0;margin-bottom:12px;font-style:italic}
.chair-attr{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.chair-attr b{color:var(--ink);font-weight:500}
.chair-attr::before{content:"";width:36px;height:1px;background:var(--ink-3)}
/* Fixed pixel offsets meant the third polaroid ran to 560px regardless of the
column it sat in, so between roughly 980 and 1200 its right edge was clipped
off. Percentages of the cluster keep the arrangement and let it shrink. */
.polaroids{position:relative;width:100%;max-width:560px;aspect-ratio:560/520;height:auto}
.polaroid{position:absolute;background:#fff;padding:14px 14px 56px;
box-shadow:0 18px 44px rgba(26,23,20,.12), 0 1px 0 rgba(26,23,20,.06);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.polaroid image-slot{display:block;width:100%;height:100%}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:14px;text-align:center;
font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-2)}
.polaroid:nth-child(1){width:42.9%;height:57.7%;left:0;top:7.7%;transform:rotate(-6deg)}
.polaroid:nth-child(2){width:46.4%;height:61.5%;left:28.6%;top:26.9%;transform:rotate(3deg);z-index:2}
.polaroid:nth-child(3){width:39.3%;height:53.8%;left:60.7%;top:11.5%;transform:rotate(-2deg)}
.polaroid:hover{transform:rotate(0) scale(1.04);z-index:5}
/* ── MENU ─────────────────────────────────────────────────────────────── */
.menu{background:var(--bone);padding:140px 72px}
.menu-head{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:end;margin-bottom:80px}
.menu-head .l{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.menu-head .r{text-align:right;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-2)}
.menu-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(56px,7vw,96px);
line-height:.95;letter-spacing:-.025em;color:var(--ink);text-align:center}
.menu-head h2 em{font-style:italic;color:var(--gold);font-weight:300}
.menu-card{max-width:880px;margin:0 auto;background:var(--paper);padding:60px 72px;border:1px solid var(--rule);position:relative}
.menu-card::before, .menu-card::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:60px;height:1px;background:var(--gold)}
.menu-card::before{top:24px}.menu-card::after{bottom:24px}
.menu-cat{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-align:center;margin:32px 0 20px}
.menu-cat:first-of-type{margin-top:0}
.menu-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:14px 0}
.menu-row + .menu-row{border-top:1px dotted var(--rule)}
.menu-row .name{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink);letter-spacing:-.005em}
.menu-row .name em{font-style:italic;color:var(--gold);font-weight:300}
.menu-row .desc{font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.5;font-style:italic;font-family:var(--serif)}
.menu-row .price{font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:400;letter-spacing:-.005em;white-space:nowrap}
.menu-row .price em{font-style:italic;color:var(--gold);font-size:14px;font-weight:300;margin-right:4px}
/* ── REVIEWS ──────────────────────────────────────────────────────────── */
.reviews{background:var(--paper);padding:140px 72px}
.reviews-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:64px;flex-wrap:wrap}
.reviews-head .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.reviews-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-.02em;color:var(--ink);max-width:14ch;margin-top:18px}
.reviews-head h2 em{font-style:italic;color:var(--gold);font-weight:300}
.reviews-meta{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-2);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(--ink-3);margin-bottom:8px;font-weight:500}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.rev{padding:36px 32px;background:var(--bone);border:1px solid var(--rule);position:relative}
.rev .stars{color:var(--gold);font-size:14px;letter-spacing:.15em;margin-bottom:18px}
.rev-q{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.45;color:var(--ink);margin-bottom:24px;text-wrap:pretty}
.rev-q em{font-style:italic;color:var(--gold)}
.rev-attr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--rule)}
.rev-attr b{color:var(--ink);font-weight:500}
/* ── LOOKBOOK ─────────────────────────────────────────────────────────── */
.lookbook{background:var(--ink);color:var(--bone);padding:120px 0 130px}
.lookbook-head{padding:0 72px;margin-bottom:64px;display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.lookbook-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(48px,6vw,84px);line-height:.95;letter-spacing:-.02em}
.lookbook-head h2 em{font-style:italic;color:var(--gold-soft);font-weight:300}
.lookbook-head p{font-family:var(--serif);font-style:italic;font-size:18px;color:rgba(243,237,226,.6);max-width:32ch;line-height:1.5}
.lookbook-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding:0 72px;max-width:1180px;margin:0 auto}
.look-card{position:relative;background:#0a0807;overflow:hidden}
/* height:auto matters. image-slot.js ships :host{width:240px;height:160px}
in its shadow stylesheet, and an explicit height beats aspect-ratio, so
without this the frame collapses to a 160px letterbox. */
.look-card image-slot{display:block;width:100%;height:auto;aspect-ratio:3/4}
.look-card .meta{position:absolute;left:0;right:0;bottom:0;padding:24px 22px 22px;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 100%);
display:flex;flex-direction:column;gap:4px;transform:translateY(8px);transition:transform .3s}
.look-card:hover .meta{transform:none}
.look-card .meta b{font-family:var(--serif);font-weight:400;font-size:22px;color:#fff;letter-spacing:-.01em}
.look-card .meta b em{font-style:italic;color:var(--gold-soft);font-weight:300}
.look-card .meta span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65)}
/* ── INSTAGRAM ────────────────────────────────────────────────────────── */
.instagram{background:var(--bone);padding:140px 72px;text-align:center}
.instagram .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.instagram h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,68px);letter-spacing:-.02em;color:var(--ink);margin-bottom:14px}
.instagram h2 em{font-style:italic;color:var(--gold);font-weight:300}
.instagram .handle{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-2);margin-bottom:56px}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:1280px;margin:0 auto 40px}
.insta-cell{position:relative;background:var(--bone-2);overflow:hidden;cursor:pointer;aspect-ratio:1}
.insta-cell image-slot{display:block;width:100%;height:100%}
.insta-cell::after{content:"";position:absolute;inset:0;background:rgba(26,23,20,0);transition:background .3s}
.insta-cell:hover::after{background:rgba(26,23,20,.18)}
.insta-link{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px}
.insta-link:hover{color:var(--gold)}
/* ── ABOUT ────────────────────────────────────────────────────────────── */
.about{background:var(--paper);padding:140px 72px;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.about .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:flex;gap:12px;align-items:center}
.about .eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}
.about h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:32px}
.about h2 em{font-style:italic;color:var(--gold);font-weight:300}
.about p{font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:20px;max-width:48ch}
.about p em{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:18px;font-weight:400}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;padding-top:36px;border-top:1px solid var(--rule)}
.about-stats div b{display:block;font-family:var(--serif);font-size:44px;font-weight:300;color:var(--ink);letter-spacing:-.02em;line-height:1}
.about-stats div b em{font-style:italic;color:var(--gold);font-weight:300}
.about-stats div span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;display:block}
.about-fig{position:relative;aspect-ratio:4/5;background:var(--bone-2);overflow:hidden}
.about-fig image-slot{position:absolute;inset:0;width:100%;height:100%}
.about-fig::after{content:"";position:absolute;inset:0;border:1px solid var(--rule);pointer-events:none}
.about-fig .corner{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.about-fig .corner.tl{top:18px;left:18px}
.about-fig .corner.br{bottom:18px;right:18px}
/* ── GIFT ─────────────────────────────────────────────────────────────── */
.gift{background:var(--ink);color:var(--bone);padding:120px 72px;text-align:center;position:relative;overflow:hidden}
.gift::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(160,122,58,.18) 0%,transparent 60%);pointer-events:none}
.gift-inner{position:relative;max-width:760px;margin:0 auto}
.gift .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:24px}
.gift h2{font-family:var(--serif);font-weight:300;font-size:clamp(48px,6vw,84px);line-height:.98;letter-spacing:-.02em;margin-bottom:24px}
.gift h2 em{font-style:italic;color:var(--gold-soft);font-weight:300}
.gift p{font-family:var(--serif);font-style:italic;font-size:20px;color:rgba(243,237,226,.65);line-height:1.5;margin-bottom:48px;max-width:48ch;margin-left:auto;margin-right:auto}
.gift-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:600px;margin:0 auto 48px}
.gift-card{padding:32px 22px;border:1px solid rgba(196,160,106,.3);position:relative;cursor:pointer;transition:border-color .25s, background .25s}
.gift-card:hover{border-color:var(--gold-soft);background:rgba(196,160,106,.06)}
.gift-card.feat{border-color:var(--gold-soft);background:rgba(196,160,106,.08)}
.gift-card.feat .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:4px 12px;white-space:nowrap}
.gift-card b{display:block;font-family:var(--serif);font-size:40px;font-weight:300;color:var(--bone);letter-spacing:-.02em}
.gift-card b em{font-style:italic;color:var(--gold-soft);font-weight:300}
.gift-card span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,237,226,.5);margin-top:6px;display:block}
.gift .btn-gold{background:var(--gold);color:var(--ink)}
.gift .btn-gold:hover{background:var(--gold-soft);color:var(--ink)}
.gift small{display:block;margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:rgba(243,237,226,.56);text-transform:uppercase}
/* ── BIG CTA ──────────────────────────────────────────────────────────── */
.bigcta{background:var(--bone);padding:140px 72px 120px;text-align:center}
.bigcta .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.bigcta h2{font-family:var(--serif);font-weight:300;font-size:clamp(56px,8vw,128px);line-height:.96;letter-spacing:-.025em;color:var(--ink);margin-bottom:36px;text-wrap:balance}
.bigcta h2 em{font-style:italic;color:var(--gold);font-weight:300}
.bigcta p{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-2);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:var(--ink-3);flex-wrap:wrap}
.bigcta-info div{display:flex;flex-direction:column;gap:6px}
.bigcta-info b{font-family:var(--serif);font-style:normal;font-size:18px;color:var(--ink);letter-spacing:0;text-transform:none;font-weight:400}
/* ── YETI CASE STUDY (agency frame) ──────────────────────────────────── */
.yeti-case{background:#0a0a0a;color:rgba(243,237,226,.85);padding:100px 72px}
.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(--gold-soft);margin-bottom:36px;display:flex;gap:12px;align-items:center}
.yeti-case .eyebrow::before{content:"";width:36px;height:1px;background:var(--gold-soft)}
.yeti-case h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.6vw,60px);line-height:1.05;letter-spacing:-.018em;color:#fff;max-width:22ch;margin-bottom:8px}
.yeti-case h2 em{font-style:italic;color:var(--gold-soft);font-weight:300}
.yeti-case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:32px 0;border-top:1px solid rgba(243,237,226,.1);border-bottom:1px solid rgba(243,237,226,.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:rgba(243,237,226,.56)}
.yeti-case-meta b{font-family:var(--serif);font-style:normal;font-size:18px;color:#fff;font-weight:400;letter-spacing:0;text-transform:none}
.yeti-case-meta b em{font-style:italic;color:var(--gold-soft);font-weight:300}
.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(--gold-soft);margin-bottom:18px;display:flex;gap:10px;align-items:center}
.yeti-case-col h3 .n{font-family:var(--serif);font-style:italic;font-size:18px;color:rgba(243,237,226,.5);font-weight:300}
.yeti-case-col p{font-size:15px;line-height:1.65;color:rgba(243,237,226,.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:14px;margin-top:8px}
.yeti-case-results div{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid rgba(243,237,226,.08)}
.yeti-case-results div:last-child{border-bottom:none}
.yeti-case-results b{font-family:var(--serif);font-size:30px;font-weight:300;color:#fff;letter-spacing:-.01em;line-height:1;flex-shrink:0;min-width:90px}
.yeti-case-results b em{font-style:italic;color:var(--gold-soft);font-weight:300;font-size:18px}
.yeti-case-results span{font-size:13px;color:rgba(243,237,226,.6);line-height:1.4}
.yeti-case-cta{margin-top:56px;padding-top:36px;border-top:1px solid rgba(243,237,226,.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(243,237,226,.7);max-width:38ch;line-height:1.45}
.yeti-case-cta a{background:var(--gold);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}
.yeti-case-cta a:hover{background:#7d5e2a;gap:18px}
.yeti-case-cta a span{display:inline-block;width:24px;height:1px;background:currentColor}
/* ── FOOTER ───────────────────────────────────────────────────────────── */
.foot{background:#0a0a0a;color:rgba(243,237,226,.5);padding:32px 72px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;flex-wrap:wrap;gap:18px}
.foot a{color:var(--gold-soft);text-decoration:none}
.foot a:hover{color:#fff}
/* ── PAGE TRANSITION & SCROLL REVEAL ─────────────────────────────────── */
.js #pto{position:fixed;inset:0;background:var(--bone);z-index:9999;pointer-events:none;opacity:1;transition:opacity .3s ease}
#pto.hide{opacity:0}
.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}.sr-delay-3{transition-delay:.3s}
/* ── HOURS BADGE ──────────────────────────────────────────────────────── */
.hours-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;padding:4px 10px;text-transform:uppercase}
.hours-badge.open{background:rgba(34,139,84,.12);color:#35784e;border:1px solid rgba(34,139,84,.22)}
.hours-badge.closed{background:rgba(26,23,20,.05);color:var(--ink-3);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(10,10,10,.96);backdrop-filter:blur(12px);padding:12px 20px 20px;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mobile-book-bar.visible{transform:translateY(0)}
.mobile-book-bar-btn{display:block;width:100%;text-align:center;background:var(--gold);color:var(--ink);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:15px;text-decoration:none;border:none;cursor:pointer}
/* ── CHAT WIDGET ──────────────────────────────────────────────────────── */
.chat-fab{position:fixed;bottom:28px;right:24px;z-index:9900;width:56px;height:56px;border-radius:50%;background:var(--ink);border:1px solid var(--gold);cursor:pointer;box-shadow:0 4px 24px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.chat-fab:hover{transform:scale(1.08)}
.chat-fab svg{transition:opacity .2s, transform .2s}
.chat-fab .icon-chat{opacity:1;transform:scale(1)}
.chat-fab .icon-close{opacity:0;transform:scale(.6);position:absolute}
.chat-fab.open .icon-chat{opacity:0;transform:scale(.6)}
.chat-fab.open .icon-close{opacity:1;transform:scale(1)}
.chat-unread{position:absolute;top:-3px;right:-3px;width:18px;height:18px;border-radius:50%;background:var(--gold);font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.chat-panel{position:fixed;bottom:96px;right:24px;z-index:9899;width:340px;max-height:480px;background:var(--paper);border:1px solid var(--rule);overflow:hidden;box-shadow:0 16px 56px rgba(26,23,20,.18);display:flex;flex-direction:column;opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:opacity .25s ease, transform .25s ease}
.chat-panel.open{opacity:1;transform:none;pointer-events:all}
.chat-header{padding:18px 20px;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-bottom:1px solid var(--rule)}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;color:#fff;font-size:18px;flex-shrink:0}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-family:var(--serif);font-size:16px;font-weight:400}
.chat-header-name em{font-style:italic;color:var(--gold-soft)}
.chat-header-status{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:3px;display:flex;align-items:center;gap:6px}
.chat-header-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ade80}
.chat-messages{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.chat-msg{max-width:80%}
.chat-msg.bot{align-self:flex-start}
.chat-msg.user{align-self:flex-end}
.chat-bubble{padding:10px 14px;font-size:13px;line-height:1.5}
.chat-msg.bot .chat-bubble{background:var(--bone);color:var(--ink-2);border-left:2px solid var(--gold)}
.chat-msg.user .chat-bubble{background:var(--gold);color:var(--ink)}
.chat-typing{display:flex;gap:4px;align-items:center;padding:10px 14px;background:var(--bone);border-left:2px solid var(--gold);width:fit-content}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:chatTyping 1.2s ease infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes chatTyping{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.chat-quick-replies{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.chat-qr-btn{padding:7px 13px;border:1px solid var(--rule);background:transparent;color:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;transition:background-color .15s,color .15s,border-color .15s,transform .15s;white-space:nowrap}
.chat-qr-btn:hover{background:var(--bone);border-color:var(--gold);color:var(--gold)}
.chat-input-row{padding:12px 16px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:10px}
.chat-input{flex:1;background:var(--bone);border:1px solid var(--rule);padding:9px 14px;color:var(--ink);font-family:var(--sans);font-size:13px;outline:none}
.chat-input::placeholder{color:var(--ink-3)}
.chat-input:focus{border-color:var(--gold)}
.chat-send{width:34px;height:34px;background:var(--ink);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.chat-send:hover{background:var(--gold)}
/* ── BOOKING MODAL ────────────────────────────────────────────────────── */
.booking-modal-overlay{position:fixed;inset:0;z-index:10100;background:rgba(10,8,7,.75);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(--paper);border:1px solid var(--rule);width:100%;max-width:480px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5);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);display:flex;justify-content:space-between;align-items:center}
.booking-modal-title{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink)}
.booking-modal-title em{font-style:italic;color:var(--gold)}
.booking-modal-sub{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.booking-close{width:32px;height:32px;background:var(--bone);border:1px solid var(--rule);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(--gold);color:var(--ink);border-color:var(--gold)}
.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);border:1px solid var(--rule);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(--gold);color:var(--ink);border-color:var(--gold)}
.booking-month{font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:400}
.booking-month em{font-style:italic;color:var(--gold)}
.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(--serif);font-size:16px;color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s;border:1px solid transparent;background:none}
.booking-day:hover:not(.past):not(.unavail){background:var(--bone);border-color:var(--rule)}
.booking-day.avail{color:var(--ink);font-weight:400}
.booking-day.avail:hover{background:var(--bone);border-color:var(--gold)}
.booking-day.selected{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:500}
.booking-day.past{color:var(--rule);cursor:default}
.booking-day.unavail{color:var(--rule);cursor:default;text-decoration:line-through}
.booking-day.today{outline:1px solid var(--gold)}
.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);text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s;background:var(--bone);letter-spacing:.08em}
.booking-time-slot:hover{border-color:var(--gold);background:var(--paper);color:var(--gold)}
.booking-time-slot.booked{color:var(--rule);cursor:default;text-decoration:line-through}
.booking-time-slot.selected{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:500}
.booking-footer{padding:16px 24px 24px;border-top:1px solid var(--rule)}
.booking-confirm-btn{display:block;width:100%;text-align:center;padding:14px;background:var(--ink);color:#fff;border:none;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:opacity .15s, background .15s}
.booking-confirm-btn:disabled{opacity:.35;cursor:default}
.booking-confirm-btn:not(:disabled):hover{background:var(--gold)}
.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}
/* ── Mobile safety: prevent horizontal overflow + hide misleading chat sim ─ */
html,body{overflow-x:clip}
.chat-fab,.chat-panel{display:none !important}
/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 980px){
.hero{grid-template-columns:1fr;min-height:auto}
.hero-figure{height:64vh}
.hero-body{padding:56px 28px}
.chair{grid-template-columns:1fr;padding:80px 28px;gap:60px}
.polaroids{max-width:480px;margin:0 auto}
}
@media (max-width: 560px){
.hero-h1{font-size:clamp(40px,11vw,68px);letter-spacing:-.025em;line-height:1.0}
.menu-head h2,.chair-quote blockquote{font-size:clamp(34px,9vw,56px)}
}
@media (max-width: 480px){
.polaroids{height:340px;max-width:100%;width:100%}
.polaroid:nth-child(1){width:155px;height:195px;left:0;top:30px}
.polaroid:nth-child(2){width:165px;height:205px;left:75px;top:90px}
.polaroid:nth-child(3){width:140px;height:175px;left:175px;top:40px}
.menu{padding:80px 28px}
.menu-card{padding:44px 28px}
.menu-head{grid-template-columns:1fr;text-align:center;gap:16px}
.menu-head .l, .menu-head .r{text-align:center}
.reviews{padding:80px 28px}
.reviews-grid{grid-template-columns:1fr;gap:18px}
.lookbook-head, .lookbook-strip{padding:0 28px}
.lookbook-strip{grid-template-columns:repeat(2,1fr)}
.instagram{padding:80px 28px}
.insta-grid{grid-template-columns:repeat(3,1fr)}
.about{grid-template-columns:1fr;padding:80px 28px;gap:48px}
.gift{padding:80px 28px}
.gift-cards{grid-template-columns:1fr}
.bigcta{padding:80px 28px}
.yeti-case{padding:60px 28px}
.yeti-case-meta{grid-template-columns:repeat(2,1fr)}
.yeti-case-grid{grid-template-columns:1fr;gap:36px}
.foot{padding:24px 28px}
}
@media (max-width: 980px){
.yeti-bar a:first-child{display:none}
.yeti-bar{justify-content:flex-end}
}
@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:23px}
.mobile-book-bar{display:block}
.yeti-bar{padding:10px 16px;font-size:10px;gap:12px}
.yeti-bar a:first-child{display:none}
.insta-grid{grid-template-columns:repeat(2,1fr)}
.lookbook-strip{grid-template-columns:1fr}
.bigcta-info{flex-direction:column;gap:24px}
}
@media (max-width: 480px){
.chat-panel{right:12px;left:12px;width:auto;bottom:88px}
.chat-fab{bottom:24px;right:16px}
input, textarea, select{font-size:16px !important}
}
.why-card,.port-card,.price-card,.tool-card,.service-card,.inc-card,.blog-card,.portfolio-card,[class*="-card"]{will-change:transform;contain:layout style}
section:not(:first-of-type){contain-intrinsic-size:0 600px}
/* ── Mobile + reduced-motion: disable kenburns + heavy animations to keep scroll smooth ─ */
@media (max-width:880px){
image-slot{animation:none !important}
}
@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 #c4a06a;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 #c4a06a;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 #c4a06a;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;
}
}
/* ══════════════════════════════════════════════════════════════════════
SITE-WIDE SUBNAV + JOURNAL ARTICLE PAGES
Added for the multi-page build. Namespaced .elan-* / .jr-* so the
single-page rules above are untouched.
══════════════════════════════════════════════════════════════════════ */
/* ── Prototype note in the Yeti band ─────────────────────────────────── */
.yeti-note{
flex:1 1 auto;min-width:0;text-align:center;padding:0 16px;
color:rgba(243,237,226,.42);font-family:var(--mono);font-size:10px;letter-spacing:.1em;
}
/* ── Subnav: the full service + journal link set ─────────────────────── */
/* ── Journal article: masthead ───────────────────────────────────────── */
.jr-head{max-width:1180px;margin:0 auto;padding:74px 36px 42px}
.jr-kicker{
display:flex;align-items:center;gap:12px;margin-bottom:24px;
font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.jr-kicker::before{content:"";width:34px;height:1px;background:var(--gold);flex:0 0 auto}
.jr-h1{
font-family:var(--serif);font-weight:300;font-size:clamp(38px,6.2vw,72px);
line-height:1.03;letter-spacing:-.012em;color:var(--ink);max-width:17ch;
}
.jr-h1 em{font-style:italic;color:var(--gold)}
.jr-standfirst{
font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.1vw,25px);
line-height:1.5;color:var(--ink-2);max-width:54ch;margin-top:24px;
}
.jr-byline{
display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:20px;
border-top:1px solid var(--rule);
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.jr-byline b{color:var(--ink);font-weight:500}
/* ── Journal article: lead image ─────────────────────────────────────── */
.jr-fig{max-width:1180px;margin:0 auto;padding:0 36px}
.jr-fig img{width:100%;height:clamp(230px,42vw,500px);object-fit:cover;background:var(--bone-2)}
.jr-fig figcaption{
padding-top:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-3);
}
.jr-prose .jr-fig{padding:0;margin:2.4em 0}
.jr-prose .jr-fig img{height:clamp(200px,34vw,360px)}
/* ── Journal article: two-column body ────────────────────────────────── */
.jr-main{
max-width:1180px;margin:0 auto;padding:58px 36px 44px;
display:grid;grid-template-columns:224px minmax(0,1fr);gap:64px;align-items:start;
}
.jr-rail{position:sticky;top:72px;display:flex;flex-direction:column;gap:26px}
.jr-rail-t{
font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:10px;
}
.jr-toc{list-style:none;margin:0;padding:0}
.jr-toc li{margin:0}
.jr-toc a{
display:block;padding:9px 0;border-top:1px solid var(--rule);
font-size:12.5px;line-height:1.4;color:var(--ink-2);text-decoration:none;
}
.jr-toc a:hover{color:var(--gold)}
.jr-author{border-top:1px solid var(--rule);padding-top:18px}
.jr-author b{display:block;font-family:var(--serif);font-size:20px;font-weight:400;color:var(--ink);line-height:1.2}
.jr-author span{
display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);
}
.jr-author p{margin-top:12px;font-size:13px;line-height:1.62;color:var(--ink-3)}
/* ── Journal article: prose ──────────────────────────────────────────── */
.jr-prose{max-width:66ch}
.jr-prose p{font-size:16.5px;line-height:1.78;color:var(--ink-2);margin-bottom:1.15em}
.jr-prose h2{
font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.1vw,35px);line-height:1.14;
letter-spacing:-.008em;color:var(--ink);margin:2.15em 0 .5em;scroll-margin-top:80px;
}
.jr-prose h2:first-child{margin-top:0}
.jr-prose h2 em{font-style:italic;color:var(--gold)}
.jr-prose h3{
font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);margin:1.9em 0 .55em;
}
.jr-prose ul,.jr-prose ol{list-style:none;margin:0 0 1.3em;padding:0}
.jr-prose li{position:relative;padding-left:26px;margin-bottom:.72em;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.jr-prose ul > li::before{content:"";position:absolute;left:2px;top:.78em;width:10px;height:1px;background:var(--gold)}
.jr-prose ol{counter-reset:jrc}
.jr-prose ol > li{counter-increment:jrc;padding-left:36px}
.jr-prose ol > li::before{
content:counter(jrc,decimal-leading-zero);position:absolute;left:0;top:.24em;
font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gold);
}
.jr-prose strong{color:var(--ink);font-weight:600}
.jr-prose em{font-style:italic}
.jr-prose a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(160,122,58,.34)}
.jr-prose a:hover{border-bottom-color:var(--gold)}
.jr-prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.jr-pull{
margin:2.1em 0;padding:2px 0 2px 26px;border-left:2px solid var(--gold);
font-family:var(--serif);font-style:italic;font-weight:300;
font-size:clamp(22px,2.6vw,30px);line-height:1.34;color:var(--ink);
}
/* ── Journal article: plates + spec lists ────────────────────────────── */
.jr-plate{background:var(--paper);border:1px solid var(--rule);padding:26px 28px;margin:2.2em 0}
.jr-plate-t{
display:block;margin-bottom:16px;font-family:var(--mono);font-size:10px;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.jr-plate p{font-size:15px;line-height:1.7;margin-bottom:.8em}
.jr-plate p:last-child{margin-bottom:0}
.jr-spec{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:13px 24px;margin:0}
.jr-spec dt{
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3);padding-top:3px;
}
.jr-spec dd{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2)}
/* ── Journal article: the two routes (book vs consult) ───────────────── */
.jr-gate{
display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:var(--rule);border:1px solid var(--rule);margin:2.4em 0;
}
.jr-gate > a{
background:var(--paper);padding:26px 26px 28px;text-decoration:none;
display:flex;flex-direction:column;gap:7px;transition:background .2s ease;
}
.jr-gate > a:hover{background:#fff}
.jr-gate .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.jr-gate b{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.16;color:var(--ink)}
.jr-gate p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.jr-gate .go{
margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-2);
}
/* ── Journal article: closing CTA + further reading ──────────────────── */
.jr-cta{border-top:1px solid var(--rule);margin-top:2.8em;padding-top:36px}
.jr-cta h2{
font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,40px);
line-height:1.1;color:var(--ink);margin-bottom:14px;
}
.jr-cta h2 em{font-style:italic;color:var(--gold)}
.jr-cta p{font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:24px;max-width:56ch}
.jr-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.jr-more{max-width:1180px;margin:0 auto;padding:0 36px 68px}
.jr-more-t{
font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-3);padding-bottom:16px;
}
.jr-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.jr-card{background:var(--bone);padding:26px 24px 30px;text-decoration:none;display:block;transition:background .2s ease}
.jr-card:hover{background:var(--paper)}
.jr-card .k{
display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.jr-card b{display:block;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.2;color:var(--ink)}
.jr-card span{display:block;margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink-3)}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:980px){
.jr-main{grid-template-columns:1fr;gap:34px;padding:44px 28px 34px}
.jr-rail{position:static;top:auto}
.jr-head{padding:52px 28px 34px}
.jr-fig,.jr-more{padding-left:28px;padding-right:28px}
.jr-more-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
.yeti-bar{flex-wrap:wrap;row-gap:6px}
.yeti-note{order:3;flex:1 0 100%;text-align:left;padding:0}
}
@media (max-width:640px){
.jr-gate{grid-template-columns:1fr}
}
@media (max-width:560px){
.jr-head{padding:36px 20px 28px}
.jr-main{padding:32px 20px 26px}
.jr-fig,.jr-more{padding-left:20px;padding-right:20px}
.jr-more{padding-bottom:52px}
.jr-prose p,.jr-prose li{font-size:16px}
.jr-plate{padding:22px 20px}
.jr-spec{grid-template-columns:1fr;gap:4px}
.jr-spec dd{margin-bottom:12px}
.jr-cta-row{gap:18px}
}
/* ════════════════════════════════════════════════════════════════════════
SUB-PAGE SYSTEM (el-*)
Interior pages of the Verse prototype — about, stylists, contact, booking.
Namespaced so parallel additions to this sheet cannot collide.
════════════════════════════════════════════════════════════════════════ */
/* Yeti band — prototype disclosure line */
.el-yeti-note{flex:1 1 auto;text-align:center;padding:0 20px;color:rgba(243,237,226,.56);
font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.4}
/* Nav — many links, wrap into an editorial masthead */
nav.site-nav .nav-l,nav.site-nav .nav-r{flex-wrap:wrap;column-gap:20px;row-gap:9px}
nav.site-nav a[aria-current="page"]{color:var(--ink)}
nav.site-nav a[aria-current="page"]::after{right:0}
/* Plain ![]()
parity with the rules above */
.polaroid img{display:block;width:100%;height:100%;object-fit:cover}
.look-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.about-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Page head */
.el-pagehead{background:var(--bone);padding:clamp(56px,8vw,104px) 72px clamp(44px,6vw,76px);
border-bottom:1px solid var(--rule)}
.el-pagehead h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,7vw,104px);
line-height:.94;letter-spacing:-.028em;color:var(--ink);max-width:15ch;text-wrap:balance}
.el-pagehead h1 em{font-style:italic;color:var(--gold);font-weight:300}
.el-pagehead .el-lede{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,24px);
line-height:1.5;color:var(--ink-2);max-width:46ch;margin-top:30px}
/* Eyebrow (page-level) */
.el-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);display:flex;gap:12px;align-items:center;margin-bottom:26px}
.el-eyebrow::before{content:"";width:24px;height:1px;background:var(--gold);flex:none}
/* Sections */
.el-sec{padding:clamp(64px,7.5vw,120px) 72px}
.el-sec--paper{background:var(--paper)}
.el-sec--bone{background:var(--bone)}
.el-sec--ink{background:var(--ink);color:var(--bone)}
.el-wrap{max-width:1180px;margin:0 auto}
.el-narrow{max-width:780px;margin:0 auto}
.el-h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.4vw,62px);line-height:1;
letter-spacing:-.022em;color:var(--ink);margin-bottom:26px;text-wrap:balance}
.el-h2 em{font-style:italic;color:var(--gold);font-weight:300}
.el-h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.1;
letter-spacing:-.015em;color:var(--ink);margin-bottom:16px}
.el-h3 em{font-style:italic;color:var(--gold);font-weight:300}
.el-p{font-size:16px;line-height:1.75;color:var(--ink-2);margin-bottom:20px;max-width:64ch}
.el-p:last-child{margin-bottom:0}
.el-p em{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:18px}
.el-p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.el-p a:hover{color:var(--gold)}
.el-sec--ink .el-h2,.el-sec--ink .el-h3{color:var(--bone)}
.el-sec--ink .el-h2 em,.el-sec--ink .el-h3 em{color:var(--gold-soft)}
.el-sec--ink .el-p{color:rgba(243,237,226,.72)}
.el-sec--ink .el-p em{color:#fff}
.el-sec--ink .el-p a{color:#fff;border-bottom-color:var(--gold-soft)}
.el-sec--ink .el-eyebrow{color:var(--gold-soft)}
.el-sec--ink .el-eyebrow::before{background:var(--gold-soft)}
/* Layouts */
.el-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5.5vw,88px);align-items:start}
.el-split--aside{grid-template-columns:1.35fr .65fr}
.el-split--flip .el-fig{order:2}
.el-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule)}
/* Figure */
.el-fig{margin:0}
.el-fig img{display:block;width:100%;object-fit:cover;background:var(--bone-2)}
.el-fig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-3);padding-top:14px}
/* Card */
.el-card{background:var(--paper);border:1px solid var(--rule);padding:32px 30px}
.el-card h3{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);margin-bottom:16px}
.el-card p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:12px}
.el-card p:last-child{margin-bottom:0}
.el-card a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.el-sec--ink .el-card{background:rgba(243,237,226,.035);border-color:rgba(243,237,226,.14)}
.el-sec--ink .el-card p{color:rgba(243,237,226,.7)}
.el-sec--ink .el-card h3{color:var(--gold-soft)}
.el-sec--ink .el-card a{color:#fff;border-bottom-color:var(--gold-soft)}
/* Pull statement */
.el-note{border-left:2px solid var(--gold);padding:6px 0 6px 26px;font-family:var(--serif);
font-style:italic;font-size:clamp(20px,2.3vw,28px);line-height:1.42;color:var(--ink);margin:38px 0}
.el-sec--ink .el-note{color:var(--bone);border-left-color:var(--gold-soft)}
/* Rule-separated list */
.el-list{list-style:none;margin:0 0 8px;padding:0;max-width:66ch}
.el-list li{position:relative;padding:13px 0 13px 28px;border-top:1px dotted var(--rule);
font-size:15px;line-height:1.62;color:var(--ink-2)}
.el-list li:first-child{border-top:none;padding-top:0}
.el-list li:first-child::before{top:9px}
.el-list li::before{content:"";position:absolute;left:0;top:22px;width:13px;height:1px;background:var(--gold)}
.el-list b{color:var(--ink);font-weight:600}
.el-sec--ink .el-list li{color:rgba(243,237,226,.72);border-top-color:rgba(243,237,226,.12)}
.el-sec--ink .el-list b{color:#fff}
.el-sec--ink .el-list li::before{background:var(--gold-soft)}
/* Definition rows (hours, facts) */
.el-dl{display:grid;grid-template-columns:auto 1fr;gap:0 28px;margin:0;
font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.el-dl dt{padding:13px 0;border-top:1px solid var(--rule);color:var(--ink-3)}
.el-dl dd{padding:13px 0;border-top:1px solid var(--rule);margin:0;text-align:right;color:var(--ink)}
.el-dl .el-off{color:var(--ink-3)}
/* Booking fork */
.el-fork{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule);
border:1px solid var(--rule);margin-top:8px}
.el-path{background:var(--paper);padding:clamp(34px,4vw,56px);display:flex;flex-direction:column}
.el-path--alt{background:var(--bone)}
.el-path .el-num{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold);
display:block;margin-bottom:14px}
.el-path h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.4vw,46px);line-height:1;
letter-spacing:-.022em;color:var(--ink);margin-bottom:16px}
.el-path h2 em{font-style:italic;color:var(--gold);font-weight:300}
.el-path .el-path-lede{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;
color:var(--ink-2);margin-bottom:26px;/* two columns sit side by side: one lede wraps to two lines and the other does not,
which pushed the lists out of level with each other */
min-height:3em}
.el-path .el-list{margin-bottom:30px}
.el-path .el-actions{margin-top:auto}
/* Action rows */
.el-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:34px}
.el-sec--ink .btn-link{color:var(--bone);border-bottom-color:var(--gold-soft)}
/* Small meta line */
.el-meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-3);margin-top:16px;line-height:1.7}
.el-sec--ink .el-meta{color:rgba(243,237,226,.56)}
/* Sub-page responsive */
@media (max-width:980px){
.el-split,.el-split--aside,.el-fork{grid-template-columns:1fr}
.el-split--flip .el-fig{order:0}
.el-cols{grid-template-columns:1fr}
.el-fork{gap:1px}
}
@media (max-width:640px){
.el-pagehead{padding-left:28px;padding-right:28px}
.el-sec{padding-left:28px;padding-right:28px}
.el-note{font-size:20px;padding-left:20px;margin:30px 0}
.el-dl{font-size:10px;letter-spacing:.1em;gap:0 14px}
}
/* ══ SERVICE + MENU PAGES ═════════════════════════════════════════════════
Added for services / color / cuts-blowouts / extensions. Everything these
pages can borrow from the .el-* sub-page system above, they borrow; what
follows is only what those four pages needed and nothing else defines. */
/* the wordmark becomes the home link */
a.look-card{display:block;text-decoration:none}
.menu-cat a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.menu-cat a:hover{color:var(--ink)}
/* breadcrumb line above a page head */
.el-crumb{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:30px}
.el-crumb a{color:var(--ink-3);text-decoration:none}
.el-crumb a:hover{color:var(--gold)}
/* one service, explained, with its price held to the right */
.el-svc{border-top:1px solid var(--rule);padding:38px 0;
display:grid;grid-template-columns:1fr 210px;gap:44px;align-items:start}
.el-svc h3{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.01em;
color:var(--ink);margin:0 0 14px;text-transform:none}
.el-svc h3 em{font-style:italic;color:var(--gold);font-weight:300}
.el-svc p{font-size:15px;line-height:1.72;color:var(--ink-2);margin-bottom:12px}
.el-svc .up{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.el-svc .fig{text-align:right}
.el-svc .fig b{display:block;font-family:var(--serif);font-size:30px;font-weight:400;color:var(--ink);line-height:1}
.el-svc .fig b em{font-style:italic;font-size:14px;color:var(--gold);font-weight:300;margin-right:5px}
.el-svc .fig span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-3);margin-top:10px}
/* numbered sequence — what happens, in order */
.el-steps{counter-reset:elstep;display:grid;gap:2px;margin:36px 0 8px}
.el-step{background:var(--bone);border:1px solid var(--rule);padding:28px 32px;
display:grid;grid-template-columns:62px 1fr;gap:24px;align-items:start}
.el-step::before{counter-increment:elstep;content:counter(elstep,decimal-leading-zero);
font-family:var(--serif);font-style:italic;font-size:34px;color:var(--gold);line-height:.9}
.el-step b{display:block;font-family:var(--serif);font-size:23px;font-weight:400;color:var(--ink);margin-bottom:9px}
.el-step p{font-size:15px;line-height:1.68;color:var(--ink-2);margin:0}
.el-sec--paper .el-step{background:var(--paper)}
/* questions people actually ask */
.el-faq details{border-bottom:1px solid var(--rule)}
.el-faq summary{cursor:pointer;list-style:none;padding:24px 0;font-family:var(--serif);font-size:23px;
color:var(--ink);display:flex;justify-content:space-between;gap:24px;align-items:baseline;min-height:44px}
.el-faq summary::-webkit-details-marker{display:none}
.el-faq summary::after{content:"+";color:var(--gold);font-family:var(--mono);font-size:18px;flex-shrink:0}
.el-faq details[open] summary::after{content:"\2013"}
.el-faq details p{font-size:15px;line-height:1.72;color:var(--ink-2);padding-bottom:26px;max-width:64ch}
@media (max-width:980px){
.el-svc{grid-template-columns:1fr;gap:18px}
.el-svc .fig{text-align:left;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.el-svc .fig span{margin-top:0}
}
@media (max-width:768px){
.yeti-bar{flex-wrap:wrap;justify-content:center;gap:8px}
.el-step{grid-template-columns:42px 1fr;gap:16px;padding:24px 22px}
.el-step::before{font-size:26px}
.foot{padding-bottom:96px}
}
/* ══════════════════════════════════════════════════════════════════════
SERVICE DETAIL · REQUEST FORM · JOURNAL INDEX
texture-treatments / bridal / color-consultation / journal
Additive only — extends the .elan-* and .jr-* sets above.
══════════════════════════════════════════════════════════════════════ */
/* ── Interior hero: home-page composition, shorter ───────────────────── */
.hero--page{min-height:clamp(420px,58vh,620px)}
.hero--page .hero-body{padding:66px 60px 58px}
.hero--page .hero-h1{font-size:clamp(42px,5.4vw,80px);margin-bottom:22px}
.hero--page .hero-lede{margin-bottom:30px}
/* ── Photo helpers for existing image containers ─────────────────────── */
.about-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.look-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.jr-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bone-2);margin-bottom:16px}
/* ── Journal index entries ───────────────────────────────────────────── */
.jr-index{max-width:1180px;margin:0 auto;padding:0 36px 8px}
.jr-entry{
display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:46px;align-items:center;
background:var(--paper);border:1px solid var(--rule);padding:36px 38px;
text-decoration:none;color:inherit;transition:border-color .25s ease,background .25s ease;
}
.jr-entry + .jr-entry{margin-top:20px}
.jr-entry:hover{border-color:var(--gold);background:#fff}
.jr-entry .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.jr-entry h2{
font-family:var(--serif);font-weight:300;font-size:clamp(27px,3.2vw,40px);
line-height:1.08;letter-spacing:-.012em;color:var(--ink);margin:14px 0;
}
.jr-entry h2 em{font-style:italic;color:var(--gold)}
.jr-entry p{font-size:15px;line-height:1.7;color:var(--ink-2);max-width:58ch;margin-bottom:16px}
.jr-entry .who{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--ink-3);margin-bottom:20px}
.jr-entry .go{
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:4px;display:inline-block;
}
.jr-entry:hover .go{color:var(--gold)}
.jr-entry-fig{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bone-2)}
.jr-entry-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ── FAQ accordion ───────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
list-style:none;cursor:pointer;position:relative;padding:22px 46px 22px 0;min-height:44px;
display:flex;align-items:center;
font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.2vw,25px);
line-height:1.25;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;background:var(--gold);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transform:translateY(-50%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.faq details[open] summary{color:var(--gold)}
.faq-a{padding:0 0 28px}
.faq-a p{font-size:15.5px;line-height:1.76;color:var(--ink-2);max-width:64ch;margin-bottom:.9em}
.faq-a p:last-child{margin-bottom:0}
/* ── Request form ────────────────────────────────────────────────────── */
.form-set{border:0;margin:0 0 48px;padding:0;min-width:0}
.form-legend{
display:block;width:100%;padding:0 0 20px;margin-bottom:28px;border-bottom:1px solid var(--rule);
font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.form-legend b{
display:block;margin-top:13px;font-family:var(--serif);font-size:27px;font-weight:400;
letter-spacing:-.008em;color:var(--ink);text-transform:none;line-height:1.15;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field--full{grid-column:1/-1}
.field > label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{
width:100%;font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--ink);
background:var(--paper);border:1px solid var(--rule);border-radius:0;
padding:14px 16px;min-height:50px;-webkit-appearance:none;appearance:none;
transition:border-color .2s ease,background .2s ease;
}
.field textarea{min-height:136px;resize:vertical;line-height:1.66}
.field select{
cursor:pointer;padding-right:44px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
.field input[type=file]{padding:14px 16px;font-size:14px;background:var(--bone);border-style:dashed;cursor:pointer}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(26,23,20,.2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#fff;outline:none}
.field-why{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.62;color:var(--ink-3)}
.field-why b{
display:block;margin-bottom:5px;font-style:normal;font-family:var(--mono);font-weight:500;
font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.checkline{display:flex;flex-direction:row;align-items:flex-start;gap:14px;cursor:pointer}
.checkline input[type=checkbox]{
width:22px;height:22px;min-height:22px;flex:0 0 22px;margin-top:2px;padding:0;
background:none;border:0;accent-color:var(--gold);cursor:pointer;-webkit-appearance:auto;appearance:auto;
}
.checkline span{
font-family:var(--sans);font-size:14.5px;line-height:1.66;color:var(--ink-2);
letter-spacing:0;text-transform:none;
}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding-top:6px}
.form-actions small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.form-ok{display:none;margin-top:30px;background:var(--paper);border:1px solid var(--gold);padding:28px 30px}
.form-ok.show{display:block}
.form-ok b{display:block;margin-bottom:9px;font-family:var(--serif);font-size:25px;font-weight:400;color:var(--ink)}
.form-ok p{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink-2)}
/* Sticky rail on the right of the content instead of the left */
.jr-main--flip{grid-template-columns:minmax(0,1fr) 272px}
/* Keep the mobile book bar clear of the footer */
@media (max-width:768px){.foot{padding-bottom:94px}}
@media (max-width:980px){
.hero--page{min-height:auto}
.hero--page .hero-body{padding:52px 28px 48px}
.jr-main--flip{grid-template-columns:1fr}
.jr-index{padding-left:28px;padding-right:28px}
.jr-entry{grid-template-columns:1fr;gap:26px;padding:30px 28px}
.jr-entry-fig{aspect-ratio:16/9}
}
@media (max-width:640px){
.form-grid{grid-template-columns:1fr}
.form-legend b{font-size:24px}
}
@media (max-width:560px){
.jr-index{padding-left:20px;padding-right:20px}
.jr-entry{padding:26px 22px}
.faq summary{font-size:19px;padding-right:40px}
}
/* two stacked cards read as one rule-separated block */
.el-card + .el-card{margin-top:2px}
/* a link inside the closing address row keeps the serif */
.bigcta-info a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold)}
.bigcta-info a:hover{color:var(--gold)}
/* a second heading after a split needs air above it */
.el-split + .el-h2{margin-top:clamp(56px,6vw,88px)}
/* Touch targets — inline links that carry real actions need a thumb-sized box */
@media (max-width:768px){
.el-card a,.el-crumb a,.bigcta-info a,.foot a{
display:inline-block;min-height:44px;padding:11px 0;line-height:22px}
.yeti-bar .right{display:inline-flex;align-items:center;min-height:44px;padding:0 16px}
}
/* ═══════════════════════════════════════════════════════════════════════
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(--bone);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(--gold)}
.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(--paper);border:1px solid var(--rule);padding:14px 18px;
display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 48px rgba(26,23,20,.14)}
nav.site-nav .nav-drop a{display:block;padding:9px 0;font-size:10.5px;letter-spacing:.15em;
color:var(--ink-3);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(--gold)}
.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(--ink)}
.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(243,237,226,.55);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(--serif);font-size:26px;letter-spacing:.05em;}
.mob-nav a.sm{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:rgba(243,237,226,.55);min-height:40px;padding-left:2px}
.mob-nav a.sm:hover,.mob-nav a[aria-current="page"]{color:var(--gold)}
.mob-nav .grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
color:var(--gold);margin:20px 0 6px;padding-top:14px;border-top:1px solid rgba(243,237,226,.14)}
.mob-nav .mob-cta{margin-top:26px;justify-content:center;border:1px solid var(--gold);color:var(--gold);
font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;min-height:52px}
.mob-nav .mob-cta:hover{background:var(--gold);color:var(--ink)}
.mob-nav .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;line-height:1.9;
color:rgba(243,237,226,.55);text-transform:uppercase;margin-top:28px;padding-top:18px;
border-top:1px solid rgba(243,237,226,.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(--gold)}
nav.site-nav .nav-cta[aria-current="page"]{background:var(--ink);color:var(--bone)!important;border-color:var(--ink)}
.mob-nav .mob-cta[aria-current="page"]{background:var(--gold);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}
/* Gold is set for the bone ground; the ink panels need it a shade lighter. */
.yeti-case,.mob-nav,.ribbon,.gift,.lookbook,.foot,.chat-header,.yeti-bar{--gold:#a17a3b}
/* ── 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}
}