/* GENERATED from public/index.html by tools/service-pages/build.mjs. Do not edit: change the
homepage and re-run the build. Used by the service pages (/skin-fades etc.). */
:root {
--ink: #17130F; /* espresso black */
--ink-soft: #2A221B; /* raised dark surface, lifted so cards read against the section */
--cream: #F7F4EE; /* warm paper */
--cream-deep: #EFEAE0;
--brass: #B8860B; /* brass gold, borders and decoration only */
--brass-soft: #D4A937; /* highlight gold, 8.4:1 with ink, AAA */
/* Gold is unreadable as text on cream (#B8860B is only 2.96:1). This deeper
bronze is 7.75:1: AAA at every size, and is what all gold TEXT on light
backgrounds must use. */
--brass-deep: #5F4A08;
--stone: #4A4238; /* muted text on light, 8.99:1, AAA */
--mist: #B9B0A5; /* muted text on dark, 8.64:1, AAA */
--line-dark: rgba(184,134,11,.28);
--line-light: #DDD5C7; /* hairline dividers only, deliberately faint */
/* Form controls need a boundary that meets the 3:1 non-text rule (SC 1.4.11):
the border is the only thing identifying the field. #8F8069 ≈ 3.4:1 on
white and on cream. */
--line-control: #8F8069;
--radius: 2px;
--ease: cubic-bezier(.22,.61,.36,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
/* iOS Safari "font boosting" independently inflates text in narrow flex
columns based on content length vs. viewport width — it's why the
period-filter chips (All times / Morning / Afternoon / Evening) render
at mismatched sizes in landscape but not portrait. Disabling it keeps
every font-size we set actually fixed. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Phones paint a grey box over anything tapped. Every control below has its
own :active state instead, so the browser's flash is switched off. */
html { -webkit-tap-highlight-color:transparent; }
/* An author display:flex/grid silently beats the browser's [hidden]
display:none — the sign-up row stayed on screen after a successful
submit because of exactly that. Make hidden mean hidden, everywhere. */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body {
font-family:'Jost',sans-serif; font-weight:400; font-size:17px; line-height:1.65;
background:var(--ink); color:var(--cream);
-webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--brass); color:var(--ink); }
/* Nav height lives in a variable: the fixed bar, the dropdown's top edge and
the anchor scroll offset all depend on it, and they used to be three
separate hard-coded 72s waiting to drift apart. */
:root { --nav-h:72px; }
html { scroll-padding-top:calc(var(--nav-h) + 16px); }
/* Skip link — first focusable thing on the page. */
.skip {
position:absolute; left:12px; top:-60px; z-index:200;
background:var(--brass-soft); color:var(--ink); font-weight:600;
padding:10px 18px; border-radius:var(--radius); transition:top .2s var(--ease);
}
.skip:focus { top:12px; }
#main:focus { outline:none; }
h1,h2,h3,.serif { font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.14; letter-spacing:-.004em; }
/* ── Razor line (signature divider) ─────────────────────────── */
.razor { display:flex; align-items:center; gap:14px; margin:0 auto; width:min(280px,60%); }
.razor::before,.razor::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--brass)); }
.razor::after { background:linear-gradient(90deg,var(--brass),transparent); }
.razor span { width:7px; height:7px; background:var(--brass); transform:rotate(45deg); flex:none; }
.eyebrow {
font-size:12px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
color:var(--brass-soft); margin-bottom:22px;
}
/* On cream, gold text needs the deeper bronze to stay readable. */
.light .eyebrow { color:var(--brass-deep); }
.wrap { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
/* ── Nav ────────────────────────────────────────────────────── */
nav {
position:fixed; inset:0 0 auto 0; z-index:100;
background:rgba(23,19,15,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(184,134,11,.14);
transition:background .3s var(--ease), transform .3s var(--ease);
}
/* Phones: the bar slides away while you scroll down and comes back the
moment you scroll up (script at the bottom), like the accounting app. */
nav.nav-away { transform:translateY(-100%); }
@media (prefers-reduced-motion: reduce) { nav { transition:none; } }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--nav-h); }
/* The bar may run wider than the page content: with Products, Work and the
Instagram logo the full menu needs ~1,180px, and the 1,120px content
width made "The Studio" and "Book the chair" break onto two lines. */
nav .wrap.nav-inner { width:min(1320px,calc(100% - 48px)); }
.logo { display:flex; align-items:center; gap:12px; font-family:'Fraunces',Georgia,serif; font-size:21px; font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.logo em { font-style:italic; font-weight:400; color:var(--brass); margin-right:6px; }
.logo-mark { width:48px; height:48px; flex:none; display:block; }
footer .logo-mark { width:44px; height:44px; }
.nav-links { display:flex; gap:26px; align-items:center; list-style:none; }
.nav-links a { font-size:13px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; color:var(--mist); transition:color .25s; white-space:nowrap; }
/* Hover only with a mouse: an iPhone keeps a tapped link "hovered", which
left Work and Visit brighter than the rest of the menu. */
.nav-links a:focus-visible, .nav-links a:active { color:var(--cream); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color:var(--cream); } }
.nav-contact { display:none; }
.nav-book {
border:1px solid var(--brass-soft); color:var(--brass-soft)!important; padding:10px 22px;
font-weight:500; transition:background-color .25s var(--ease), color .25s var(--ease);
}
.nav-book:hover, .nav-book:focus-visible { background:var(--brass-soft); color:var(--ink)!important; }
.burger { display:none; background:none; border:0; cursor:pointer; padding:8px; }
/* Dims the page behind the open phone menu, so it's clear a tap outside closes it. */
.nav-scrim { position:fixed; inset:var(--nav-h) 0 0 0; z-index:99; background:rgba(10,8,6,.55);
opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.nav-scrim.on { opacity:1; pointer-events:auto; }
/* Menu, Instagram, burger: visually in that order whatever the source order
(the burger stays first in the DOM, next to the menu it controls). */
.nav-end { display:flex; align-items:center; gap:22px; }
.nav-end .nav-links { order:1; }
.nav-end .nav-ig { order:2; }
.nav-end .burger { order:3; }
.nav-ig { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
border-radius:10px; transition:transform .2s var(--ease); touch-action:manipulation; }
.nav-ig { color:var(--brass-soft); }
.nav-ig .ig-glyph { width:28px; height:28px; }
.nav-ig:active { transform:scale(.92); }
.nav-ig:focus-visible { outline:2px solid var(--brass-soft); outline-offset:2px; }
.burger span { display:block; width:24px; height:2px; background:var(--cream); margin:5px 0; transition:transform .3s var(--ease), opacity .3s var(--ease); }
/* ── Hero ───────────────────────────────────────────────────── */
header {
min-height:100svh; display:grid; align-items:center; position:relative; overflow:hidden;
padding:130px 0 80px;
}
.hero-bg {
position:absolute; inset:0; z-index:0;
background:
linear-gradient(100deg, rgba(23,19,15,.94) 22%, rgba(23,19,15,.45) 52%, rgba(23,19,15,.25)),
url('/assets/studio-hero.jpg') center center/cover no-repeat;
}
@media (max-width: 900px) {
.hero-bg { background: linear-gradient(rgba(23,19,15,.72), rgba(23,19,15,.94) 60%), url('/assets/studio-hero.jpg') center 30%/cover no-repeat; }
}
.hero-inner { position:relative; z-index:1; max-width:640px; }
/* The hero eyebrow carries two facts, so it becomes a wrapping row. Scoped to
the hero: .eyebrow is a plain line in seven other sections. */
.hero-inner .eyebrow {
animation:rise .8s var(--ease) both;
display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px;
}
/* No separator between the two: the flex gap does it, and a divider drawn
with ::before would still render after the row wraps on a phone, leaving a
stray mark at the start of the second line. */
.eb-card { display:inline-flex; align-items:center; gap:8px; }
.eb-card svg { width:14px; height:14px; stroke:currentColor; flex:none; }
header h1 {
font-size:clamp(46px,7.2vw,88px); font-weight:500; color:var(--cream);
animation:rise .8s .12s var(--ease) both;
}
header h1 em { font-style:italic; color:var(--brass-soft); }
/* What the page is about, for Google and screen readers, inside the H1 but
set small so the big three lines stay the headline people see. */
.h1-local { display:block; font-family:'Jost',sans-serif; font-size:clamp(16px,1.6vw,19px); font-weight:500;
letter-spacing:.04em; color:var(--mist); margin-bottom:14px; line-height:1.4; }
.hero-sub {
margin:28px 0 40px; font-size:19px; color:var(--mist); max-width:46ch;
animation:rise .8s .24s var(--ease) both;
}
.hero-ctas { display:flex; gap:18px; flex-wrap:wrap; animation:rise .8s .36s var(--ease) both; }
.btn {
display:inline-flex; align-items:center; gap:10px; cursor:pointer;
font-family:'Jost',sans-serif; font-size:14px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
padding:17px 36px; border-radius:var(--radius); border:1px solid transparent;
transition:background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease),
transform .28s var(--ease), box-shadow .28s var(--ease);
}
/* brass-soft, not brass: ink on #D4A937 is 8.4:1 (AAA); on #B8860B it was 5.7:1 */
.btn-gold { background:var(--brass-soft); color:var(--ink); font-weight:600; }
/* The lift is for a mouse or keyboard only. On a phone a tap leaves :hover
stuck on, so the button stayed raised after the finger had gone. */
.btn-gold:focus-visible { background:#E3BE55; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(184,134,11,.5); }
.btn-gold:active { background:#E3BE55; }
.btn-ghost { border-color:rgba(247,244,238,.55); color:var(--cream); }
.btn-ghost:hover, .btn-ghost:focus-visible, .btn-ghost:active { border-color:var(--cream); background:rgba(247,244,238,.06); }
/* Call, WhatsApp, Directions: under the two main buttons, one tap each. */
.hero-contact { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; animation:rise .8s .42s var(--ease) both; }
.hero-contact a {
display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px;
border:1px solid var(--line-dark); border-radius:40px; color:var(--cream);
font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; touch-action:manipulation;
transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.hero-contact svg { width:18px; height:18px; flex:none; color:var(--brass-soft); }
.hero-contact a:active, .hero-contact a:focus-visible { border-color:var(--brass-soft); background:rgba(184,134,11,.1); }
@media (hover: hover) and (pointer: fine) { .hero-contact a:hover { border-color:var(--brass-soft); background:rgba(184,134,11,.1); } }
.hero-meta {
margin-top:64px; display:flex; gap:36px; flex-wrap:wrap; color:var(--mist);
font-size:13px; letter-spacing:.14em; text-transform:uppercase;
animation:rise .8s .5s var(--ease) both;
}
.hero-meta span { display:flex; align-items:center; gap:9px; }
.hero-meta svg { width:15px; height:15px; stroke:var(--brass); flex:none; }
@keyframes rise { from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
/* ── Sections base ──────────────────────────────────────────── */
section { padding:110px 0; }
/* Wide enough that the headings sit on one line — at 560px "Men's grooming,
done properly." wrapped awkwardly onto a second line. */
.sec-head { text-align:center; max-width:820px; margin:0 auto 70px; }
.sec-head h2 {
font-size:clamp(29px,3.6vw,44px); margin:18px auto 20px;
text-wrap:balance; /* only kicks in if it does have to wrap, e.g. on a phone */
}
.sec-head p { color:var(--mist); max-width:56ch; margin:0 auto; }
.light .sec-head p { color:var(--stone); }
/* reveal on scroll. Only hidden once the script in has marked the page
.js: without it nothing would ever add .in, and every section stayed
invisible for anyone with JavaScript off or a script that failed to load. */
:where(.js) .rv { opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
:where(.js) .rv.in { opacity:1; transform:none; }
/* ── Story (light) ──────────────────────────────────────────── */
.light { background:var(--cream); color:var(--ink); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.story-grid h2 { font-size:clamp(30px,3.8vw,46px); margin:18px 0 24px; }
.story-grid p { color:#4A4238; margin-bottom:18px; max-width:54ch; }
.story-img { position:relative; }
.story-img img { aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.story-img::after {
content:""; position:absolute; inset:18px -18px -18px 18px; z-index:-1;
border:1px solid var(--brass); border-radius:var(--radius);
}
.story-sign { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:24px; color:var(--brass-deep); margin-top:26px; }
/* ── Experience (dark) ──────────────────────────────────────── */
.exp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.exp-card {
background:var(--ink-soft); border:1px solid rgba(184,134,11,.35); border-radius:var(--radius);
padding:40px 30px; transition:border-color .3s, transform .3s var(--ease);
}
.exp-card svg { width:30px; height:30px; stroke:var(--brass); margin-bottom:22px; }
.exp-card h3 { font-size:21px; margin-bottom:12px; color:var(--cream); }
.exp-card p { font-size:15px; color:var(--mist); }
/* ── Services (light) ───────────────────────────────────────── */
.svc-list { max-width:760px; margin:0 auto; }
/* The price column is a FIXED width, not `auto`. Each .svc is its own grid, so
`auto` sized column 2 to that row's own price: £25 got a narrow column and
£39.50 a wide one, and the prices stepped in and out down the page. A fixed
width plus text-align:right puts every price on one edge. 5.5rem clears
"£999.50" at this size, which is well past anything on the menu. */
.svc {
display:grid; grid-template-columns:1fr 5.5rem; gap:8px 28px; align-items:baseline;
padding:30px 6px; border-bottom:1px solid var(--line-light);
transition:background .25s, padding-left .25s var(--ease);
}
.svc:first-child { border-top:1px solid var(--line-light); }
/* Service names use the sans, not Bodoni. Bodoni's hairline strokes are lovely
at display size but genuinely hard to read as a scannable list, especially
on a phone. The serif is kept for section headings, where it's brand. */
.svc h3 {
font-family:'Jost',sans-serif; font-size:23px; font-weight:600;
color:var(--ink); letter-spacing:.005em; line-height:1.25;
}
.svc .price {
font-family:'Jost',sans-serif; font-size:22px; font-weight:600;
color:var(--brass-deep); white-space:nowrap; letter-spacing:.01em;
text-align:right;
}
.svc p { grid-column:1; font-size:16.5px; line-height:1.6; color:#3D362D; max-width:58ch; }
.svc .dur { grid-column:2; grid-row:2; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); text-align:right; }
.svc-note { text-align:center; margin-top:38px; font-size:14px; color:var(--stone); }
/* Section headings for the menu (Haircuts, Beards, Kids, Colour…).
These stay in Fraunces deliberately — the serif is the brand voice for
headings, and .svc h3 only drops to the sans for the service names
themselves, which have to be scannable. */
.svc-group + .svc-group { margin-top:52px; }
.svc-group-title {
font-size:15px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
color:var(--brass-deep); line-height:1.2;
}
.svc-group-blurb {
margin-top:8px; font-size:15.5px; line-height:1.6; color:var(--stone); max-width:54ch;
}
/* The blurb is optional, so the gap below the heading belongs to the list. */
.svc-group-items { margin-top:18px; }
/* Under a section heading: its own page (/skin-fades etc.). */
.svc-more { display:inline-flex; align-items:center; min-height:44px; margin-top:2px;
font-size:15.5px; font-weight:500; color:var(--brass-deep); text-decoration:underline; text-underline-offset:3px; }
.svc-more:hover, .svc-more:focus-visible { color:var(--ink); }
/* ── Products (light) ───────────────────────────────────────── */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:24px; }
.prod {
background:#FFFFFF; border:1px solid var(--line-light); border-radius:var(--radius);
overflow:hidden; display:flex; flex-direction:column;
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prod-img { aspect-ratio:1/1; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; }
.prod-img img { width:100%; height:100%; object-fit:cover; }
.prod-noimg { font-family:'Fraunces',Georgia,serif; font-size:34px; font-weight:600; color:var(--brass); opacity:.45; letter-spacing:.05em; }
.prod-body { padding:20px; display:flex; flex-direction:column; gap:7px; flex:1; }
.prod-brand { font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-deep); }
.prod h3 { font-family:'Jost',sans-serif; font-size:17.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.prod-blurb { font-size:14px; line-height:1.55; color:#3D362D; flex:1; }
.prod-meta { display:flex; align-items:baseline; gap:10px; margin-top:8px; }
.prod-price { font-family:'Jost',sans-serif; font-size:19px; font-weight:600; color:var(--brass-deep); }
.prod-size { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.prod-note { text-align:center; margin-top:38px; font-size:14px; color:var(--stone); }
/* ── Gallery (dark) ─────────────────────────────────────────
Same grid and square crop as the product cards, so the photos sit at
product size instead of filling a phone screen each. Tap one to open the
viewer and swipe through them all at full size. Only the first 8 show
on a computer and 6 on a phone or tablet (two rows, three on a phone);
"See all" opens the rest in the viewer, so the section never turns into
a long scroll however many photos Hak adds. */
/* Four across on a computer (the width the product cards land at), so 8 is
always two full rows. */
.gal { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.gal figure { position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:1/1; background:var(--ink-soft); }
.gal figure:nth-child(n+9) { display:none; }
.gal-open { display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in;
-webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.gal-open:focus-visible { outline:2px solid var(--brass-soft); outline-offset:-4px; }
.gal img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease), filter .8s; filter:saturate(.85); }
.gal figure:active img { transform:scale(.98); transition-duration:.1s; }
.gal figcaption {
position:absolute; inset:auto 0 0 0; padding:36px 16px 13px; pointer-events:none;
background:linear-gradient(transparent, rgba(23,19,15,.85));
font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mist);
}
.gal-more { text-align:center; margin-top:38px; }
.gal-more .btn { background:transparent; }
@media (min-width:901px) { .gal-more.few { display:none; } }
/* Photo viewer: a native horizontal scroll-snap track, so swiping between
photos uses the phone's own physics and follows the finger exactly.
Drag a photo down to close it. */
.lb { position:fixed; inset:0; z-index:10050; background:#0C0A08; display:flex; flex-direction:column;
opacity:0; transition:opacity .22s ease; overscroll-behavior:contain; }
.lb[hidden] { display:none; }
.lb.open { opacity:1; }
.lb-bar { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
padding:max(10px, env(safe-area-inset-top)) 12px 10px 20px; pointer-events:none; }
.lb-count { font-size:13px; letter-spacing:.2em; color:var(--mist); }
.lb-btn { pointer-events:auto; width:48px; height:48px; border-radius:50%; border:1px solid rgba(247,244,238,.25);
background:rgba(23,19,15,.6); color:var(--cream); display:flex; align-items:center; justify-content:center;
cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .1s ease-out, border-color .2s; }
.lb-btn:active { transform:scale(.94); }
.lb-btn svg { width:22px; height:22px; }
.lb-btn:focus-visible { outline:2px solid var(--brass-soft); outline-offset:2px; }
.lb-prev, .lb-next { position:absolute; top:50%; z-index:2; margin-top:-24px; }
.lb-prev { left:16px; } .lb-next { right:16px; }
.lb-prev[disabled], .lb-next[disabled] { opacity:.25; pointer-events:none; }
.lb-track { flex:1; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
scrollbar-width:none; overscroll-behavior-x:contain; }
.lb-track::-webkit-scrollbar { display:none; }
.lb-slide { flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; flex-direction:column;
align-items:center; justify-content:center; padding:72px 16px max(28px, env(safe-area-inset-bottom)); margin:0;
transition:transform .3s cubic-bezier(.32,.72,0,1), opacity .3s; }
.lb-slide.drag { transition:none; }
.lb-slide img { max-width:min(100%, 1100px); max-height:calc(100% - 40px); object-fit:contain; border-radius:2px;
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; }
.lb-slide figcaption { margin-top:14px; min-height:20px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); text-align:center; }
/* Arrows are for a mouse; on touch the swipe is the control. */
@media (pointer:coarse) { .lb-prev, .lb-next { display:none; } }
@media (hover:hover) and (pointer:fine) { .lb-btn:hover { border-color:var(--brass-soft); } }
@media (prefers-reduced-motion:reduce) { .lb, .lb-slide { transition:none; } }
/* ── Instagram ── the real logo in its colours, so it reads at a glance. */
.ig-glyph { width:28px; height:28px; flex:none; display:block; }
.ig-cta { text-align:center; margin-top:26px; }
.ig-btn {
display:inline-flex; align-items:center; gap:12px; min-height:54px; padding:12px 24px 12px 14px;
border-radius:99px; border:1px solid rgba(247,244,238,.28); background:rgba(247,244,238,.05);
color:var(--cream); font-size:15.5px; text-align:left; touch-action:manipulation;
transition:border-color .2s var(--ease), background-color .2s var(--ease), transform .1s ease-out;
}
.ig-btn b { font-weight:600; }
.ig-btn:active { transform:scale(.97); }
.ig-btn:focus-visible { border-color:var(--brass-soft); }
.ig-inline { display:inline-flex; align-items:center; gap:9px; margin-top:12px; min-height:44px;
color:var(--cream); font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.ig-inline .ig-glyph { width:24px; height:24px; }
.ig-foot { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--mist); font-size:14px; letter-spacing:.06em; }
.ig-foot .ig-glyph { width:30px; height:30px; }
/* ── Good to know (FAQ) ── */
.faq { max-width:760px; margin:0 auto; border-top:1px solid var(--line-light); }
.faq-item { border-bottom:1px solid var(--line-light); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px;
padding:22px 4px; font-family:'Fraunces',Georgia,serif; font-size:clamp(19px,2vw,22px); font-weight:500; color:var(--ink);
-webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; flex:none; font-family:'Jost',sans-serif; font-size:26px; font-weight:400;
color:var(--brass-deep); transition:transform .25s var(--ease); }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:focus-visible { outline:2px solid var(--brass-deep); outline-offset:2px; }
.faq-item p { padding:0 4px 24px; font-size:17px; line-height:1.65; color:var(--stone); max-width:62ch; }
/* ── Booking (light) ────────────────────────────────────────── */
.book-grid { display:grid; grid-template-columns:5fr 7fr; gap:72px; align-items:start; }
/* Grid items default to min-width:auto, so they refuse to shrink below their
content's min-content width. The slot grid's auto-fill tracks report a
huge min-content, so the moment a service was chosen the form blew out to
1012px inside a 343px wrap and the whole page scrolled sideways on a
phone. min-width:0 lets the column do its job. */
.book-grid > * { min-width:0; }
.book-info h2 { font-size:clamp(30px,3.8vw,46px); margin:18px 0 22px; }
.book-info > p { color:#4A4238; margin-bottom:30px; max-width:44ch; }
.book-points { list-style:none; display:grid; gap:16px; }
.book-points li { display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:#4A4238; }
.book-points svg { width:18px; height:18px; stroke:var(--brass); flex:none; margin-top:3px; }
form { background:#FFFFFF; border:1px solid var(--line-light); border-radius:var(--radius); padding:44px; box-shadow:0 30px 60px -30px rgba(23,19,15,.18); }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { margin-bottom:20px; }
label, .fieldlabel { display:block; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin-bottom:9px; }
label .req { color:var(--brass-deep); }
.req-legend { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:22px; }
.req-legend .req { color:var(--brass-deep); }
input,select,textarea {
width:100%; font-family:'Jost',sans-serif; font-size:16px; font-weight:400; color:var(--ink);
background:var(--cream); border:1px solid var(--line-control); border-radius:var(--radius);
padding:14px 16px; transition:border-color .25s, box-shadow .25s; min-height:48px;
}
textarea { min-height:96px; resize:vertical; }
::placeholder { color:var(--stone); opacity:1; }
input:focus,select:focus,textarea:focus { border-color:var(--brass-deep); box-shadow:0 0 0 3px rgba(95,74,8,.22); }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--brass-deep); outline-offset:2px; }
.fhint { font-size:13px; color:var(--stone); margin-top:7px; }
form .btn { width:100%; justify-content:center; margin-top:6px; }
/* ── Slot picker ────────────────────────────────────────────── */
.day-strip-wrap { position:relative; }
/* Right-edge fade so it's obvious the day strip scrolls to more dates. */
.day-strip-wrap::after {
content:""; position:absolute; top:0; right:0; bottom:10px; width:36px; pointer-events:none;
background:linear-gradient(90deg, rgba(255,255,255,0), #FFFFFF);
}
.day-strip { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:thin;
scroll-snap-type:x proximity;
/* So a chip reached by keyboard is never left half off the edge. */
scroll-padding-inline:8px; }
.day-chip { scroll-snap-align:start; }
.day-chip {
flex:none; min-width:64px; padding:10px 12px; cursor:pointer; text-align:center;
background:var(--cream); border:1px solid var(--line-control); border-radius:var(--radius);
font-family:'Jost',sans-serif; font-size:13px; color:var(--ink);
transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.day-chip b { display:block; font-size:17px; font-weight:600; margin-top:2px; }
.day-chip small { display:block; font-size:11px; color:var(--stone); margin-top:2px; }
/* Sighted visitors were getting less than screen reader users, who already
heard the free count. A dot carries it without fighting the date: solid
when the day is open, hollow when it is nearly gone. */
.day-dot { display:block; width:5px; height:5px; border-radius:50%; margin:5px auto 0;
background:var(--brass-deep); }
.day-dot.low { background:none; border:1px solid var(--brass-deep); }
.day-chip.on .day-dot { background:var(--brass-soft); }
.day-chip.on .day-dot.low { background:none; border-color:var(--brass-soft); }
.day-chip:disabled .day-dot { visibility:hidden; }
.day-chip:hover:not(:disabled) { border-color:var(--brass-deep); }
.day-chip.on { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.day-chip.on small { color:var(--brass-soft); }
.day-chip:disabled { opacity:.5; cursor:not-allowed; }
/* A filter that starts on "All times", NOT a gate you have to pass through.
Researched against Fresha, Booksy, Treatwell, Cal.com, Setmore, Calendly,
Acuity, Zocdoc and OpenTable: not one of them groups a single day's times
behind period tabs. Where morning/afternoon/evening appears at all it is a
marketplace filter for narrowing hundreds of salons, which is a different
problem from choosing one of forty buttons at one barber.
Two reasons it matters here. The boundaries are arbitrary and the industry
does not agree on them (Fresha ends afternoon at 18:00, Treatwell at
17:00), so someone after 17:30 taps the wrong one, sees nothing and
concludes we are full. And showing every time is the availability signal:
a full grid says "plenty free" at a glance, three tabs say nothing. */
/* "Bookings open soon" panel, shown in place of the form while closed. */
.soon { background:#FFF; border:1px solid var(--line-control); border-radius:var(--radius); padding:34px 30px; }
.soon-eyebrow { font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:10px; }
.soon h3 { font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(24px,4vw,30px); line-height:1.15; margin-bottom:12px; color:var(--ink); }
.soon p { color:var(--ink); }
.soon-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.soon-row input { flex:1 1 220px; min-width:0; min-height:48px; padding:12px 14px; border:1px solid var(--line-control); border-radius:var(--radius); font:inherit; font-size:16px; color:var(--ink); background:#FFF; }
.soon-row .btn { flex:0 0 auto; }
.soon-alt { margin-top:18px; font-size:15px; color:var(--stone); }
.soon-alt a { color:var(--brass-deep); text-decoration:underline; }
.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; }
@media (max-width:520px) { .soon { padding:26px 20px; } .soon-row .btn { flex:1 1 100%; } }
.period-tabs { display:flex; gap:6px; margin:14px 0 10px; flex-wrap:wrap; }
.period-tab {
flex:1 1 0; min-width:0; padding:9px 6px; cursor:pointer; text-align:center;
background:var(--cream); border:1px solid var(--line-control); border-radius:var(--radius);
font-family:'Jost',sans-serif; font-size:13.5px; color:var(--ink);
min-height:44px;
transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.period-tab b { display:block; font-weight:500; }
.period-tab small { display:block; font-size:11px; color:var(--stone); margin-top:1px; }
.period-tab:hover:not(:disabled) { border-color:var(--brass-deep); }
.period-tab[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.period-tab[aria-pressed="true"] small { color:var(--brass-soft); }
.period-tab:disabled { opacity:.45; cursor:not-allowed; }
/* Headings inside the one scrolling list, so the day still reads in parts
without anything being hidden behind a tap. */
.slot-head {
grid-column:1/-1; margin:14px 0 2px; font-size:11.5px; font-weight:600;
letter-spacing:.18em; text-transform:uppercase; color:var(--brass-deep);
}
.slot-head:first-child { margin-top:0; }
.slot-count { font-size:13.5px; color:var(--stone); margin:2px 0 0; }
.slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:6px; }
/* min-height with auto height, not a fixed height: at 200% text zoom a fixed
button clips its own label. 48px clears the WCAG AAA 44px target. */
.slot-btn {
padding:12px 6px; min-height:48px; height:auto; cursor:pointer;
font-family:'Jost',sans-serif; font-size:15px;
background:#FFF; border:1px solid var(--line-control); border-radius:var(--radius);
color:var(--ink);
transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.slot-btn:hover, .slot-btn:active { border-color:var(--brass-deep); background:rgba(184,134,11,.06); }
.day-chip:active:not(:disabled), .period-tab:active:not(:disabled) { border-color:var(--brass-deep); }
/* Selected = ink fill (16.8:1), matching the selected day chip, plus a ✓ so the
state is not carried by colour alone. */
.slot-btn.on { background:var(--ink); border-color:var(--ink); color:var(--cream); font-weight:600; }
.slot-btn.on::before { content:"✓ "; }
.more-days {
margin-top:12px; background:none; border:0; cursor:pointer; padding:10px 4px; min-height:44px;
font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.14em;
text-transform:uppercase; color:var(--stone); border-bottom:1px solid var(--line-control);
}
.more-days:hover { color:var(--brass-deep); border-color:var(--brass-deep); }
.slot-chosen { margin-top:12px; font-size:14.5px; color:var(--ink); }
.slot-chosen b { color:var(--brass-deep); }
.slot-empty { grid-column:1/-1; padding:18px 0; color:var(--stone); font-size:14.5px; }
/* The global `a` reset strips colour and underline, which left the WhatsApp
link in the "booking unavailable" message looking like plain text, and that
link is the only way to book when it shows. */
.slot-empty a { color:var(--brass-deep); text-decoration:underline; text-underline-offset:2px; }
/* ── Consent + fine print ───────────────────────────────────── */
.check { display:flex; gap:11px; align-items:flex-start; margin:4px 0 12px; cursor:pointer; }
.check input { width:18px; height:18px; min-height:0; flex:none; margin-top:2px; accent-color:var(--brass); }
.check span { font-size:14.5px; line-height:1.55; color:#3D362D; letter-spacing:0; text-transform:none; font-weight:400; }
.fine { font-size:13px; line-height:1.55; color:var(--stone); margin-bottom:16px; }
.fine a { color:var(--brass-deep); text-decoration:underline; }
/* ── Visit (dark) ───────────────────────────────────────────── */
.visit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; text-align:center; }
.visit-card { padding:40px 26px; border:1px solid rgba(184,134,11,.35); border-radius:var(--radius); background:var(--ink-soft); }
.visit-card > svg { width:26px; height:26px; stroke:var(--brass); margin:0 auto 18px; }
.visit-card h3 { font-size:20px; margin-bottom:10px; }
.visit-card p { font-size:15px; color:var(--mist); }
.visit-card p a { color:var(--cream); text-decoration:underline; text-underline-offset:2px; }
.visit-card p a:hover, .visit-card p a:focus-visible { color:var(--brass-soft); }
/* ── Footer ─────────────────────────────────────────────────── */
footer { border-top:1px solid rgba(184,134,11,.14); padding:54px 0 40px; }
.foot { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.foot small { color:var(--mist); font-size:13px; letter-spacing:.06em; }
.foot small a { color:var(--mist); text-decoration:underline; transition:color .2s; }
.foot small a:hover { color:var(--brass-soft); }
.foot .logo { font-size:22px; }
/* The web designer's credit, last thing on the page. */
.credit { margin-top:28px; padding-top:18px; border-top:1px solid rgba(184,134,11,.08); text-align:center;
color:var(--mist); font-size:12px; letter-spacing:.08em; opacity:.85; }
.credit a { color:var(--mist); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:6px 2px; transition:color .2s; }
.credit a:hover, .credit a:focus-visible { color:var(--brass-soft); }
/* The service pages, linked from every page's footer. */
.foot-svcs { margin-top:26px; display:flex; flex-wrap:wrap; gap:0 20px; align-items:center; font-size:14.5px; }
.foot-svcs span { color:var(--mist); letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.foot-svcs a { color:var(--cream); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:10px 0; }
.foot-svcs a:hover, .foot-svcs a:focus-visible { color:var(--brass-soft); }
/* ── Responsive ─────────────────────────────────────────────── */
/* ── Nav: one dropdown for everything below a real desktop ─────
Measured: seven uppercase links plus the logo need 1085px laid out in a
row. That clears a desktop and nothing else. iPad landscape has 976px to
play with, iPad portrait 720px, and a phone in landscape between 619px and
884px. Below this width the row simply ran off the right-hand edge, and
because a flex row does not scroll, the last links were unreachable.
Burger everywhere under 1290px is both simpler and honest about the fact
that this menu does not fit on a tablet (it was 1150px before Products,
Work and the Instagram logo made the row longer). */
@media (max-width: 1290px) {
.nav-links {
position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
background:var(--ink);
max-height:0; overflow:hidden; visibility:hidden;
transition:max-height .4s var(--ease), visibility .4s;
}
/* visibility:hidden while closed so the links are not focusable / not read
by a screen reader as an open menu. */
/* Bounded by the viewport and scrollable. A phone in landscape is only
~390px tall, so the old flat 420px menu ran off the bottom of the screen
with no way to reach the last item. vh first for older iOS, dvh after. */
.nav-links.open {
visibility:visible;
max-height:calc(100vh - var(--nav-h));
max-height:calc(100dvh - var(--nav-h));
overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
height:calc(100vh - var(--nav-h)); height:calc(100dvh - var(--nav-h));
}
/* Solid bar while the menu is open, so bar and menu read as one piece. */
nav.menu-open { background:var(--ink); }
.menu-open .book-fab { display:none!important; }
.nav-links li { width:100%; text-align:center; flex:none; }
/* Equal space above the links and between them and the buttons: the links
sit centred in the room the buttons leave. */
.nav-links li:first-child, .nav-links .nav-contact { margin-top:auto; }
.nav-links a { display:block; padding:18px; position:relative; }
/* The section you're in: the same diamond as the dividers. */
.nav-links a[aria-current] { color:var(--cream); }
.nav-links a[aria-current]::after {
content:""; position:absolute; left:50%; bottom:7px; width:6px; height:6px; margin-left:-3px;
background:var(--brass-soft); transform:rotate(45deg);
}
.nav-links .nav-contact { display:flex; gap:10px; max-width:520px; margin-inline:auto; padding:24px 16px 0; }
.nav-contact a {
flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px;
padding:14px 4px 12px; border:1px solid var(--line-dark); border-radius:12px;
font-size:11.5px; letter-spacing:.14em; color:var(--cream);
}
.nav-contact svg { width:22px; height:22px; color:var(--brass-soft); }
.nav-contact a:active { background:rgba(184,134,11,.1); border-color:var(--brass-soft); }
.nav-links .nav-book-li { max-width:520px; margin-inline:auto; padding:12px 16px max(18px, env(safe-area-inset-bottom)); }
.nav-links .nav-book { border:0; border-radius:var(--radius); background:var(--brass-soft); color:var(--ink)!important; font-weight:600; }
.burger { display:block; }
.nav-end { gap:6px; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
/* A phone held sideways is short, not just wide. Claw back vertical space so
the hero is not just a nav bar and a sliver of headline. */
@media (max-height: 460px) and (orientation: landscape) {
:root { --nav-h:56px; }
.nav-links a { padding:13px; }
header { min-height:0; padding:88px 0 52px; }
.hero-meta { margin-top:30px; gap:14px 22px; }
.hero-sub { margin:16px 0 26px; }
}
@media (max-width: 900px) {
.exp-grid { grid-template-columns:repeat(2,1fr); }
.gal figure:nth-child(n+7) { display:none; }
.story-grid,.book-grid { grid-template-columns:1fr; gap:48px; }
.story-img { order:-1; max-width:440px; }
.visit-grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
section { padding:80px 0; }
/* The offset brass frame sits 18px right of the photo. On a phone the photo
is flush with the wrap, and the gutter is only 16px, so those last 2px
pushed the whole document wider than the screen and every page scrolled
sideways a touch. 12px keeps the effect and stays inside the gutter. */
.story-img::after { inset:12px -12px -12px 12px; }
.exp-grid { grid-template-columns:1fr; }
.gal { grid-template-columns:repeat(2,1fr); gap:14px; }
.gal figcaption { padding:28px 10px 9px; font-size:10.5px; letter-spacing:.14em; }
.frow { grid-template-columns:1fr; gap:0; }
form { padding:26px 18px; }
.hero-meta { gap:18px; margin-top:44px; }
/* Most visitors are on a phone — tighten everything for that first. */
.wrap { width:calc(100% - 32px); }
/* The header needed ~370px, so the burger was cut in half on a 375px
iPhone SE and gone on a 360px Android. Same gutter as the page, the
burger's own padding pulled into it, and a logo that scales down. */
nav .wrap.nav-inner { width:calc(100% - 32px); gap:10px; }
.nav-end .burger { margin-right:-10px; }
.logo { font-size:clamp(17px, 4.9vw, 21px); gap:clamp(8px, 2.4vw, 12px); }
.logo-mark { width:clamp(38px, 10.5vw, 48px); height:clamp(38px, 10.5vw, 48px); }
.hero-contact { gap:8px; }
}
/* 320-340px (iPhone SE 1st gen, small Androids): the header was still 9px
too wide, so the burger sat in the gutter. */
@media (max-width: 340px) {
nav .wrap.nav-inner { gap:4px; }
.nav-ig { width:40px; }
.logo { font-size:16px; gap:7px; }
}
@media (max-width: 640px) {
.hero-contact a { flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:6px;
padding:12px 4px; border-radius:12px; font-size:11.5px; }
.sec-head { margin-bottom:44px; }
.sec-head h2 { max-width:none; }
header { padding:112px 0 64px; }
.hero-sub { font-size:17.5px; margin:22px 0 32px; }
.hero-ctas .btn { flex:1 1 100%; justify-content:center; }
/* Service rows: name and price on one line, description beneath. */
.svc-group + .svc-group { margin-top:38px; }
.svc-group-title { font-size:13.5px; letter-spacing:.18em; }
.svc-group-blurb { font-size:14.5px; }
.svc { padding:22px 4px; gap:6px 16px; grid-template-columns:1fr 4.8rem; }
.svc h3 { font-size:20px; }
.svc .price { font-size:20px; }
.svc p { font-size:15.5px; }
.svc .dur { grid-column:2; grid-row:1; align-self:center; font-size:11px; }
.prod-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
.prod-body { padding:14px 13px; gap:5px; }
.prod h3 { font-size:15.5px; }
.prod-blurb { display:none; } /* names + prices are what matter on a small screen */
.prod-price { font-size:17px; }
.day-strip { gap:6px; margin:0 -4px; padding:2px 4px 10px; }
/* Three columns, not four. Four gave 71px wide buttons; the period split
means there are far fewer to show, so spend the room on target size. */
/* minmax(0,1fr), not plain 1fr: 1fr has an automatic minimum of the
content's size, so a long label can still push the track wider and
scroll the page at 320px. */
.slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.slot-btn { padding:15px 4px; font-size:15px; } /* comfortably over 44px */
.period-tab { font-size:13.5px; padding:10px 4px; }
.period-tab small { font-size:11px; }
footer { padding:40px 0 32px; }
.foot { flex-direction:column; align-items:flex-start; gap:16px; }
}
/* ── Tablet (641–900px) ─────────────────────────────────────
The single-column sections already kick in at 900px; these just stop
the page feeling like a stretched phone layout on an iPad. */
@media (min-width: 641px) and (max-width: 900px) {
section { padding:92px 0; }
.sec-head { margin-bottom:56px; }
.prod-grid { grid-template-columns:repeat(3,1fr); }
.gal { grid-template-columns:repeat(3,1fr); }
.story-img { margin:0 auto; }
.book-grid, .story-grid { max-width:680px; margin-inline:auto; }
.slot-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
}
/* Very narrow phones */
@media (max-width: 380px) {
.prod-grid { grid-template-columns:1fr; }
/* Narrower than the 4.8rem the wider phones get: less room, smaller type. */
.svc { grid-template-columns:1fr 4.4rem; }
/* Still three columns. This used to pack in as many 70px tracks as would
fit, which meant four cramped buttons; splitting the day by period leaves
few enough times that the space is better spent on the targets. */
.slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Hover effects that move or restyle things, for a real mouse only. A phone
fakes :hover on tap and leaves it on until the next tap elsewhere, so cards
stayed lifted and photos stayed zoomed after a finger had touched them. */
@media (hover: hover) and (pointer: fine) {
.btn-gold:hover { background:#E3BE55; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(184,134,11,.5); }
.exp-card:hover { border-color:var(--brass-soft); transform:translateY(-5px); }
.svc:hover { background:rgba(184,134,11,.06); padding-left:16px; }
.prod:hover { transform:translateY(-4px); box-shadow:0 22px 44px -24px rgba(23,19,15,.28); }
.gal figure:hover img { transform:scale(1.05); filter:saturate(1); }
.ig-btn:hover { border-color:var(--brass-soft); background:rgba(247,244,238,.09); }
.ig-inline:hover, .ig-foot:hover { color:var(--brass-soft); }
}
/* Never let a tap target be smaller than the ~44px guideline. */
@media (pointer: coarse) {
.btn, .slot-btn, .day-chip, .nav-links a, .more-days { min-height:44px; }
.burger { padding:10px; }
.foot small a, .fine a { display:inline-block; padding:6px 2px; }
.visit-card p a { display:inline-block; padding:8px 4px; } /* Directions, review, phone: were 22px tall */
input, select, textarea { font-size:16px; } /* stops iOS zooming on focus */
}
/* ── Sticky "Book" button on phones ─────────────────────────────
Appears once the hero is scrolled past; hides again when the booking
form or footer is on screen (toggled by .fab-hide from JS). */
.book-fab {
position:fixed; right:16px; bottom:16px; z-index:90; display:none;
align-items:center; gap:8px; padding:14px 22px; border-radius:40px;
background:var(--brass-soft); color:var(--ink); font-weight:600;
font-size:13px; letter-spacing:.16em; text-transform:uppercase;
box-shadow:0 12px 30px -8px rgba(0,0,0,.5); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
@media (max-width: 900px) and (pointer: coarse) {
.book-fab.show { display:inline-flex; }
}
/* visibility as well as opacity: a faded-out link was still a Tab stop, so a
keyboard user landed on a button they could not see. The delay lets the
fade finish before it drops out of the tab order. */
.book-fab.fab-hide { opacity:0; transform:translateY(120%); pointer-events:none;
visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior:auto; }
*,*::before,*::after { animation-duration:.01ms!important; animation-delay:0s!important; transition-duration:.01ms!important; }
:where(.js) .rv { opacity:1; transform:none; }
}
:focus-visible { outline:2px solid var(--brass-soft); outline-offset:3px; }
.light :focus-visible { outline-color:var(--brass-deep); }