/* The Salon by Allison: the website's styles. Carried over verbatim from the approved prototype
   (public/p/salon-by-allison-proposal-19aea8bd/: assets/brand.css and site.html's <style>), minus
   the prototype banner, the pretend booking sheet and the phone/texting mock-ups the site never draws.
   Tokens and components: docs/clients/salon-by-allison/design-system.md. Never add a value here that
   isn't there first. */
:root {
  color-scheme: light;
  --paper: #F5F2F4;        /* porcelain with a breath of mauve */
  --paper-2: #EDE6EB;      /* the wash behind cards and bands */
  --card: #FFFFFF;
  --ink: #1F1A21;          /* aubergine black */
  --ink-2: #554C58;        /* secondary text, 7.4:1 on paper */
  --ink-3: #6F6672;        /* captions, 5.3:1 on paper */
  --plum: #6A3E6D;         /* toner: links, accents, fills under white text */
  --plum-deep: #4E2B51;
  --plum-wash: #EADDEA;
  --champagne: #C7A77B;    /* decorative light only, never text */
  --line: rgba(31, 26, 33, .12);
  --line-2: rgba(31, 26, 33, .22);
  --ok: #2F6B4F;
  --ok-wash: #DDEDE4;
  --err: #A3313A;          /* error text, from the prototype's booking sheet (.err), 6.2:1 on paper */

  --display: "Brygada 1918", "Brygada fallback", "Iowan Old Style", Georgia, serif;
  --text: "Afacad", "Afacad fallback", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 26px;
  --shadow: 0 1px 2px rgba(31,26,33,.06), 0 12px 32px -12px rgba(31,26,33,.22);
  --shadow-lg: 0 2px 4px rgba(31,26,33,.06), 0 30px 60px -20px rgba(46,22,48,.38);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.55 var(--text);
  font-feature-settings: "liga" 1, "kern" 1;
}
img { max-width: 100%; display: block; }
a { color: var(--plum); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--plum-deep); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--plum); }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Wordmark: "The Salon" upright, "by Allison" in the italic, one baseline. */
.wordmark { display: inline-flex; align-items: baseline; gap: .32em; font-family: var(--display); color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1; }
.wordmark b { font-weight: 600; font-size: 1em; letter-spacing: -.01em; }
.wordmark i { font-weight: 400; font-size: 1em; color: var(--plum); }

/* Small labels: sentence case, weight and colour only. */
.label { font: 600 14px/1.3 var(--text); color: var(--plum); }
.muted { color: var(--ink-2); }
.small { font-size: 15px; }
.tnum { font-variant-numeric: tabular-nums; }

/* One button family: pill, two weights. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-primary { background: var(--plum); color: #fff; }
.btn-primary:hover { background: var(--plum-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Site layout (prototype site.html) ---- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(245,242,244,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav > .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.nav .wordmark { font-size: 24px; margin-right: auto; }
@media (max-width: 480px) { .nav > .wrap { gap: 10px; } .nav .wordmark { font-size: 20px; } }
.nav-links { display: none; gap: 4px; }
.nav-links a { padding: 8px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; }
.nav-links a:hover { background: var(--paper-2); color: var(--ink); }
.nav .call { display: none; color: var(--ink-2); font-size: 15px; text-decoration: none; }
.nav .call b { color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) { .nav-links { display: flex; } .nav .call { display: block; } }
.menu-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; cursor: pointer; }
.menu-btn i { display: block; width: 16px; height: 1.5px; background: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 -5px 0 var(--ink); }
@media (min-width: 1024px) { .menu-btn { display: none; } }
.mobile-menu { border-top: 1px solid var(--line); background: var(--paper); }
.mobile-menu .wrap { display: grid; padding-block: 8px 18px; }
.mobile-menu a { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 24px/1.2 var(--display); }
.mobile-menu .tel { font: 400 16px/1.4 var(--text); color: var(--ink-2); border: 0; padding-top: 16px; }

/* Hero */
.hero { padding-block: 56px 24px; overflow: hidden; }
.hero-top { display: grid; gap: 24px; align-items: end; }
@media (min-width: 960px) { .hero-top { grid-template-columns: 1.4fr 1fr; gap: 64px; } }
/* STU-160: a touch smaller, with room between lines so "quantity" no longer meets "chair" (Allie's ask). */
.hero h1 { font-size: clamp(42px, 6.9vw, 94px); line-height: 1.14; letter-spacing: -.02em; }
/* Phones: the long descenders (y, q) need clear air above the next line's ascenders (h, l, t). */
@media (max-width: 640px) { .hero h1 { font-size: 39px; line-height: 1.22; } }
.hero h1 em { font-weight: 400; }
.hero-side { display: grid; gap: 20px; padding-bottom: 10px; }
.hero-side p { font-size: 19px; color: var(--ink-2); }
.hero-side .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--ink-2); }
.facts span { display: inline-flex; gap: 8px; align-items: center; }
.facts span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--champagne); }

.arches { margin-top: 48px; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(10px, 2vw, 24px); align-items: end; }
.arch { position: relative; border-radius: 999px 999px 18px 18px; overflow: hidden; background: var(--plum-wash); box-shadow: var(--shadow); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch.a1 { aspect-ratio: 3 / 4.2; }
.arch.a2 { aspect-ratio: 3 / 4; }
.arch.a3 { aspect-ratio: 3 / 4.6; }
.arch.a2 img { object-position: 50% 20%; }
.arch.a3 img { object-position: 50% 0; }
.arch .sample-tag { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; }
.arch .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 18px; background: linear-gradient(transparent, rgba(31,26,33,.72)); color: #fff; font: italic 500 20px/1.2 var(--display); text-align: center; }
@media (max-width: 640px) { .arch .sample-tag { display: none; } .arch .cap { font-size: 15px; padding: 28px 8px 12px; } }

section { padding-block: 80px; }
.band { background: var(--paper-2); }
/* STU-118 Recent work: Allie's own photos, the hero's arches in a row, the middle one dropped like the hero's */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 24px); padding-bottom: clamp(12px, 3vw, 36px); }
.work .arch { aspect-ratio: 3 / 4.2; }
.work .arch:nth-child(2) { transform: translateY(clamp(12px, 3vw, 36px)); }
.work .arch:nth-child(n+2) img { object-position: 50% 30%; }
.sec-head { display: grid; gap: 12px; margin-bottom: 36px; max-width: 720px; }
.sec-head h2 { font-size: clamp(36px, 4.8vw, 58px); }
.sec-head p { font-size: 18px; color: var(--ink-2); }

/* Services: a menu card */
.svc-wrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .svc-wrap { grid-template-columns: 300px 1fr; gap: 64px; align-items: start; } .svc-aside { position: sticky; top: 110px; } }
.svc-aside { display: grid; gap: 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1024px) { .tabs { flex-direction: column; } }
.tab { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 600 15px/1 var(--text); color: var(--ink); cursor: pointer; text-align: left; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; }
.tab span { color: var(--ink-3); font-weight: 500; }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab[aria-selected="true"] span { color: #CFC5CD; }
.svc-aside .policy { font-size: 15px; color: var(--ink-2); padding: 16px 18px; border-radius: var(--r); background: var(--card); }
.svc-aside .policy b { display: block; color: var(--ink); margin-bottom: 4px; }
.menu { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--line); }
.item:first-child { border-top: 1px solid var(--line-2); }
.item h3 { font-size: 26px; display: flex; align-items: baseline; gap: 12px; }
.item h3::after { content: ""; flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-6px); min-width: 20px; }
.item .price { font: 500 24px/1 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item .meta { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-size: 15px; color: var(--ink-2); }
.item .dep { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--plum-wash); color: var(--plum-deep); font-weight: 600; font-size: 13px; }
.item .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
@media (max-width: 560px) { .item h3::after { display: none; } .item h3 { font-size: 22px; } }

/* About */
.about { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .about { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.about .portrait { position: relative; max-width: 460px; }
.about .portrait .arch { aspect-ratio: 4 / 5.2; }
.about .portrait .badge { position: absolute; right: -14px; bottom: 36px; width: 120px; height: 120px; border-radius: 50%; background: var(--plum); color: #fff; display: grid; place-items: center; text-align: center; box-shadow: var(--shadow-lg); }
.about .portrait .badge b { display: block; font: 500 40px/1 var(--display); }
.about .portrait .badge span { font-size: 13px; line-height: 1.2; }
@media (max-width: 520px) { .about .portrait .badge { right: 6px; width: 100px; height: 100px; } .about .portrait .badge b { font-size: 32px; } }
.about blockquote { margin: 0; font: italic 400 clamp(28px, 3.4vw, 40px)/1.2 var(--display); color: var(--ink); text-wrap: balance; }
/* STU-160: the quote marks sit with the words, not alone on a line with a gap under them (Allie's ask). */
.about blockquote::before { content: "\201C"; color: var(--champagne); }
.about blockquote::after { content: "\201D"; color: var(--champagne); }
.about .copy { display: grid; gap: 18px; }
.about .copy p { font-size: 18px; color: var(--ink-2); max-width: 36em; }
.about .sig { font: italic 500 26px/1 var(--display); color: var(--plum); }
.three { margin-top: 64px; display: grid; gap: 16px; }
@media (min-width: 860px) { .three { grid-template-columns: repeat(3, 1fr); } }
.three div { padding: 26px; border-radius: var(--r-lg); background: var(--card); display: grid; gap: 8px; }
.three h3 { font-size: 26px; }
.three p { font-size: 16px; color: var(--ink-2); }

/* Visit */
.visit { display: grid; gap: 40px; }
@media (min-width: 960px) { .visit { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; } }
.visit .photo { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
.visit .photo img { width: 100%; height: 100%; object-fit: cover; }
.addr { margin-top: 24px; display: grid; gap: 6px; }
.addr b { font: 500 28px/1.2 var(--display); }
.addr span { color: var(--ink-2); }
.addr .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.keypad { background: var(--card); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); display: grid; gap: 20px; }
.keypad h3 { font-size: 30px; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.keys li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; }
.keys .k { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--paper-2); font: 600 18px/1 var(--text); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(31,26,33,.12); }
.keys .k.bell { background: var(--plum); color: #fff; }
.keys b { display: block; font-weight: 600; }
.keys span { font-size: 15px; color: var(--ink-2); }
.hours { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.hours b { color: var(--ink); }

/* Gift card band */
.gift { padding-block: 0; }
.gift-in { position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center; padding: 48px clamp(24px, 5vw, 64px); border-radius: 32px; background: var(--ink); color: #EFE7ED; }
@media (min-width: 860px) { .gift-in { grid-template-columns: 1.2fr 1fr; } }
.gift h2 { font-size: clamp(34px, 4.4vw, 54px); color: #fff; }
.gift h2 em { color: var(--champagne); }
.gift p { margin-top: 14px; color: #CFC5CD; font-size: 18px; max-width: 30em; }
.gift .btn { margin-top: 24px; background: #fff; color: var(--ink); }
.gift .btn:hover { background: var(--champagne); color: var(--ink); }
.giftcard { justify-self: center; width: min(340px, 100%); aspect-ratio: 1.586; border-radius: 18px; padding: 22px; display: grid; align-content: space-between; background: linear-gradient(135deg, #8A5A8D 0%, var(--plum-deep) 55%, #2E1830 100%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); transform: rotate(-4deg); }
.giftcard .wordmark { color: #fff; font-size: 20px; }
.giftcard .wordmark i { color: var(--champagne); }
.giftcard .amt { font: 500 44px/1 var(--display); color: #fff; }
.giftcard .for { font-size: 13px; color: #E6D7E4; }

.foot { padding-block: 64px 40px; }
.foot .wrap { display: grid; gap: 28px; }
@media (min-width: 860px) { .foot .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot .wordmark { font-size: 26px; }
.foot p, .foot a { font-size: 15px; color: var(--ink-2); }
.foot h4, .foot .foot-h { margin: 0 0 8px; font: 600 15px/1.2 var(--text); color: var(--ink); }
.foot nav { display: grid; gap: 6px; }
.foot .fine { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* Sticky book bar on phones */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(245,242,244,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.mbar .btn { flex: 1; }
@media (min-width: 1024px) { .mbar { display: none; } }
@media (max-width: 1023px) { .foot { padding-bottom: 110px; } }

/* ---- Added for the live site (design-system.md, "Additions") ---- */
/* Skip link: off screen until focused, then the primary pill at the top left. */
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
/* Headings the prototype drew as a <p class="label"> (About) and <h4> (footer), made real headings
   so the outline doesn't skip levels. The global h2 letter-spacing is the only rule they'd otherwise pick up. */
h2.label, .foot .foot-h { letter-spacing: normal; text-wrap: wrap; }
/* The skip link focuses <main>; it needs no ring round the whole page. */
main:focus { outline: none; }
/* The footer's one-line description (the prototype set this margin inline). */
.foot .tagline { margin-top: 12px; }
/* The credit link in the fine print takes the fine print's size and colour, not .foot a's. */
.foot .fine a { font-size: inherit; color: inherit; }
/* Phones narrower than 360px (iPhone SE 1st gen, small Androids): the prototype's header ran 44px
   past a 320px screen. Tighten it there only; every other width is the prototype's. */
@media (max-width: 359px) {
  .nav > .wrap { gap: 8px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .nav .wordmark { font-size: 17px; }
  .nav .btn-sm { padding: 0 14px; }
}
/* In the prototype ".about .copy p" also styled this label (it was a <p>): 18px, ink-2. */
.about .copy h2.label { font-size: 18px; color: var(--ink-2); }
/* STU-098: the "Already booked?" card under the services list opens her Square booking site. It sits
   below the list, not in the sticky aside, so the aside keeps the prototype's height and sticks in any
   laptop window. (Its header link became STU-112's account link, below.) */
.mine-card { display: grid; gap: 16px; justify-items: start; margin-top: 40px; padding: 22px 24px; border-radius: var(--r); background: var(--card); color: var(--ink-2); font-size: 16px; }
.mine-card h3 { margin-bottom: 6px; font-size: 24px; line-height: 1.2; color: var(--ink); }
@media (min-width: 768px) { .mine-card { grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 26px 32px; } }
/* Landing on /#appointments (GoDaddy's old /m/account) must clear the sticky header. */
#appointments { scroll-margin-top: 96px; }
/* The phone menu's row gap and narrow-phone padding, which it used to get from the header's rule
   (scoped to the header row by STU-098 so the header's 72px height no longer clips the menu). */
.mobile-menu .wrap { gap: 24px; }
@media (max-width: 480px) { .mobile-menu .wrap { gap: 10px; } }
@media (max-width: 359px) { .mobile-menu .wrap { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); } }

/* ---- STU-103: sign in and profile ----
   The prototype's booking sheet (site.html's <style>, "Booking sheet"), carried over verbatim for the
   parts the sign-in uses: the sheet, its header, progress, fields, inputs, styled selects, error,
   footer and the done tick. */
.sheet-bg { position: fixed; inset: 0; z-index: 80; background: rgba(31,26,33,.45); backdrop-filter: blur(3px); display: grid; align-items: end; justify-items: center; }
@media (min-width: 760px) { .sheet-bg { align-items: center; padding: 24px; } }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--paper); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-lg); padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); animation: up .35s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 760px) { .sheet { border-radius: 28px; padding-bottom: 24px; } }
@keyframes up { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.sheet-h h2 { font-size: 26px; margin-right: auto; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; font-size: 18px; color: var(--ink); display: grid; place-items: center; }
.progress { display: flex; gap: 6px; padding: 14px 22px 0; }
.progress i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.progress i.on { background: var(--plum); }
.sheet-b { padding: 20px 22px 0; display: grid; gap: 18px; }
.hint { font-size: 14px; color: var(--ink-3); }
.field { display: grid; gap: 6px; }
.field label, .field .lb { font: 600 14px/1.2 var(--text); color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.input, .select { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); font: 400 17px/1 var(--text); color: var(--ink); }
.input:focus, .select:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px var(--plum-wash); }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231F1A21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center no-repeat; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.err { font-size: 14px; color: #A3313A; }
.secure { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-3); }
.sheet-f { display: flex; gap: 10px; padding: 22px 22px 0; }
.sheet-f .btn { flex: 1; }
.done { text-align: center; display: grid; gap: 14px; justify-items: center; padding-top: 10px; }
.done .tick { width: 72px; height: 72px; border-radius: 50%; background: var(--ok-wash); color: var(--ok); display: grid; place-items: center; font-size: 34px; }
.done h3 { font-size: 34px; }
.done p { color: var(--ink-2); max-width: 26em; }

/* Additions for the sign-in (design-system.md, "Additions"). The intro line under the sheet title, in
   the done screen's paragraph style. */
.sheet-b .intro { color: var(--ink-2); font-size: 16px; }
/* Birthday and anniversary are fieldsets (one legend for two or three selects): no browser box, and
   the legend set like the prototype's field label. */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; font: 600 14px/1.2 var(--text); color: var(--ink); }
/* Month, day and year: the prototype's .two, one column wider. */
.three-up { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 10px; }
/* The read-only email the client signed in with. */
.input[readonly] { background: var(--paper-2); color: var(--ink-2); }
/* "Send a new code" and "Book without signing in" (and "Sign out" until STU-158): text buttons in the plum link colour. */
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--plum); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.link-btn:hover { color: var(--plum-deep); }
/* Finish on the carried sheet: the back and close buttons get the 44px touch target, the slide-in takes
   .22s (the standard's 120-250ms; the prototype's was .35s), and the error colour is the --err token. */
.icon-btn { width: 44px; height: 44px; }
.sheet { animation-duration: .22s; }
.err { color: var(--err); }
/* The sheet's status line for screen readers (e.g. "We sent a new code"): in the page, never seen. */
.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; }

/* ---- STU-109: finish before launch (design-system.md, "Additions") ---- */
/* Fallback faces sized to the web fonts, so the page doesn't jump when Afacad and Brygada arrive (the
   hero buttons used to drop from two rows to one, moving the arches 89px on a phone). Measured in
   Chromium: Afacad sets 0.89x Arial's width (about 0.80x Arial Bold's on the 16px button labels, hence a second face), ascent 1.00em, descent 0.33em; Brygada
   1.04x Georgia, 0.91x Georgia Bold at 600, 0.98x Georgia Italic, 0.86x Georgia Bold Italic; ascent 0.92em,
   descent 0.25em. Each weight and style has its own face, or the browser fakes bold and italic. */
@font-face { font-family: "Afacad fallback"; font-weight: 100 549; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 89%; ascent-override: 112.4%; descent-override: 37.1%; line-gap-override: 0%; }
@font-face { font-family: "Afacad fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Roboto Bold"); size-adjust: 80%; ascent-override: 125%; descent-override: 41.3%; line-gap-override: 0%; }
@font-face { font-family: "Brygada fallback"; font-weight: 100 549; src: local("Georgia"), local("Noto Serif"); size-adjust: 104%; ascent-override: 88.5%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Brygada fallback"; font-weight: 550 900; src: local("Georgia Bold"), local("Georgia-Bold"), local("Noto Serif Bold"); size-adjust: 91%; ascent-override: 101.1%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "Brygada fallback"; font-style: italic; font-weight: 100 549; src: local("Georgia Italic"), local("Georgia-Italic"), local("Noto Serif Italic"); size-adjust: 98%; ascent-override: 93.9%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Brygada fallback"; font-style: italic; font-weight: 550 900; src: local("Georgia Bold Italic"), local("Georgia-BoldItalic"), local("Noto Serif Bold Italic"); size-adjust: 85.5%; ascent-override: 107.6%; descent-override: 29.2%; line-gap-override: 0%; }
/* The menu button keeps its 44px circle: below 398px the header row was 398px of content,
   and flexbox squeezed the button to a 30px oval. The wordmark and gaps give way instead. */
.menu-btn { flex: none; }
/* Below 360px the full-size button needs 12px more: the Book pill and the gaps give it. */
@media (max-width: 359px) { .nav > .wrap { gap: 6px; } .nav .btn-sm { padding: 0 10px; } }
@media (min-width: 360px) and (max-width: 397px) {
  .nav > .wrap { gap: 8px; }
  .nav .wordmark { font-size: 18px; }
  .nav .btn-sm { padding: 0 14px; }
}
/* Every tap target at least 44px: the small pills (header Book, Get directions, Text) and the services
   list's Book buttons were 40px, and the footer links 23px. */
.btn-sm, .item .btn { min-height: 44px; }
@media (max-width: 1023px) { .foot nav { gap: 0; } .foot nav a { display: flex; align-items: center; min-height: 44px; } }
/* Services list: price and Book sit at their own width on the right, so every Book button is the same
   size and the prices line up, instead of stretching to the widest price. */
.item .price, .item .btn { justify-self: end; }
/* The not-found page (404.html): the hero's type on one short screen. */
/* The Studio credit at the bottom of the pages with no site footer: 404, the clients page (STU-167). */
.credit { padding-block: 8px 28px; text-align: center; font-size: 13px; color: var(--ink-3); }
.credit a { color: inherit; }
.lost { min-height: 60vh; display: grid; align-content: center; gap: 20px; padding-block: 72px; }
.lost h1 { font-size: clamp(40px, 6vw, 72px); }
.lost p { font-size: 19px; color: var(--ink-2); max-width: 30em; }
.lost .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- STU-112: one account entry ("Sign in", then "My account") ----
   Phones and tablets: a ghost pill in the header where "Book online" was (the book bar at the bottom
   already carries Book online on every phone screen). Laptops: a text link beside the phone number, in the
   style STU-098's "My appointments" had, with Book online kept. Wide enough for "My account" either way,
   so the label changing after sign-in moves nothing. */
.nav .acct { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 108px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); font: 600 15px/1 var(--text); text-decoration: none; white-space: nowrap; }
.nav .acct:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 1023px) { .nav .book-top { display: none; } }
@media (min-width: 1024px) { .nav .acct { min-width: 80px; padding: 0; border: 0; justify-content: flex-end; } .nav .acct:hover { color: var(--plum); } }
@media (max-width: 359px) { .nav .acct { min-width: 90px; padding: 0 9px; } }
#sheet-title:focus { outline: none; }
/* The account's appointments block: the services card's look, on the sheet. */
.appts { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--card); font-size: 15px; color: var(--ink-2); }
.appts b { display: block; margin-bottom: 2px; font: 600 16px/1.3 var(--text); color: var(--ink); }
@media (min-width: 480px) { .appts { grid-template-columns: 1fr auto; align-items: center; gap: 16px; } }

/* ---- STU-158: the sheet scrolls its body only ----
   The whole .sheet used to scroll, so the browser drew its scrollbar through the sticky header and past
   the rounded corners (chunky, with arrow buttons, on Windows). Now the sheet is a column: the header,
   the sign-in dots and the footer button stay put, and only the body between them scrolls, with a thin
   inset scrollbar in the ink line colour. Phones: a bottom sheet up to the full visible height (dvh, so
   the browser's own toolbars never hide its button). Laptops: a dialog up to 760px tall. */
.sheet { display: flex; flex-direction: column; overflow: hidden; max-height: 92vh; max-height: 92dvh; padding: 0; }
/* Laptops: never taller than the backdrop's padded area (a short window, or a phone on its side, which gets the
   dialog too, around its notch and home indicator). */
@media (min-width: 760px) {
  .sheet-bg { padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
  .sheet { max-height: min(calc(100vh - 48px), 760px); max-height: min(calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px))), 760px); }
}
.sheet-h, .progress { flex: none; }
.sheet-h { position: static; }
#s-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sheet-b { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 22px; }
/* Chrome and Edge, and Safari where it draws a scrollbar at all (iOS and macOS's default overlay bars are its
   own), draw it from these: no arrow buttons, a 4px pill inset 3px. Firefox, which has no ::-webkit-scrollbar,
   from the standard properties. Chrome ignores these once the standard ones are set, and then draws its arrow
   buttons, hence the @supports. */
.sheet-b::-webkit-scrollbar { width: 10px; }
.sheet-b::-webkit-scrollbar-track { background: transparent; margin-block: 6px; }
.sheet-b::-webkit-scrollbar-thumb { background: rgba(31,26,33,.28); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.sheet-b::-webkit-scrollbar-thumb:hover { background-color: rgba(31,26,33,.45); }
.sheet-b::-webkit-scrollbar-button { display: none; height: 0; }
@supports not selector(::-webkit-scrollbar) { .sheet-b { scrollbar-width: thin; scrollbar-color: rgba(31,26,33,.28) transparent; } }
/* With a mouse the 10px bar takes room: keep it reserved, and the right padding 12px + 10px = the left's 22px,
   so the fields don't narrow when an error makes the body scroll. */
@supports selector(::-webkit-scrollbar) and (scrollbar-gutter: stable) {
  @media (hover: hover) and (pointer: fine) { .sheet-b { scrollbar-gutter: stable; padding-right: 12px; } }
}
/* The footer: its button always in reach, a hairline above it only while there is more body under it. */
.sheet-f { flex: none; padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid transparent; background: var(--paper); }
@media (min-width: 760px) { .sheet-f { padding-bottom: 22px; } }
#s-body.scrolls .sheet-f { border-top-color: var(--line); }
/* Long names and emails wrap inside the sheet (the read-only email trims with an ellipsis; the full address is
   in "Signed in as" below it); nothing pushes the sheet sideways. */
.sheet-b > * { min-width: 0; }
.sheet-b .intro b, .who b, .appts span, .done h3 { overflow-wrap: anywhere; }
.input[readonly] { text-overflow: ellipsis; }
/* Signed in as ... / Sign out: a real 44px button, not a 13px link at the end of a sentence. */
.who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.who > span { min-width: 0; flex: 1 1 12em; }
.who b { font-weight: 600; color: var(--ink-2); }
.who .btn { flex: none; }
/* "Send a new code" and "Book without signing in" stay text in their sentence, with a 44px tap area. An error
   under a field sits 12px below it, so that area never reaches over the field. */
.sheet .link-btn { position: relative; }
.sheet .link-btn::after { content: ""; position: absolute; inset: -12px -6px; }
.field > .err { margin-top: 6px; }
/* The page under an open sheet doesn't scroll (iOS 16 and later honour it on <html>; older iOS can still drag
   the page behind the backdrop, accepted), and doesn't jump sideways when its scrollbar goes: site.js sets --sb
   to the scrollbar's width, and the body and book bar keep it. */
html.sheet-open, html.sheet-open body { overflow: hidden; }
html.sheet-open body { padding-right: var(--sb, 0px); }
html.sheet-open .mbar { right: var(--sb, 0px); }
/* Review round 2: her number never breaks at a hyphen; a busy button looks busy; the sign-in dots keep 12px
   above the scrolling body (the same 20px to the first line). */
.appts .nw { white-space: nowrap; }
.btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.progress { padding-bottom: 12px; }
.progress:not([hidden]) + #s-body .sheet-b { padding-top: 8px; }