/* Lacewing Hair Studio: design system (v1, rebuild 2).
   One unit (a rounded lozenge on a half-step grid), one gauge (1px), one saturated solid (the way in).
   Flat fills only: no gradient, no box-shadow, no text-shadow, no blur, no filter. */

@font-face {
  font-family: "Markazi Text Variable";
  src: url("fonts/markazi-text-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Georgia, shrunk to Markazi's size so the swap does not reflow */
@font-face {
  font-family: "Markazi Fallback";
  src: local("Georgia");
  size-adjust: 75%;
}

:root {
  /* color: measured from the anchors (see borrowings_v1.md, Palette borrowing gate) */
  --ink: #0D161B;          /* anchor 01 handle, anchor 02 darkest band */
  --action: #BF001C;       /* anchor 01 cushion: the only control fill, and the arrow */
  --linen: #EAEAE8;        /* anchor 02 towels: neutral, not cream */
  --paper: #F7F7F5;        /* anchor 01 pin tips */
  --sun: #E9D14A;          /* framing: harsh daylight (cross-checked against anchor 07) */
  --shade: #9DB4C3;        /* framing: sky-lit shade */
  --shade-deep: #27476B;   /* framing: shade at its deepest (cross-checked against anchor 07) */
  --ink-faint: #666C6F;    /* ink at 62% over paper: the tone of a day or a time that is not on offer (4.97:1 on paper) */
  --ring: var(--ink);

  /* type */
  --font: "Markazi Text Variable", "Markazi Fallback", Georgia, "Times New Roman", serif;
  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --fs-body: 1.3125rem;     /* 21px: Markazi is narrow with a low x-height; it reads like Georgia at 17px */
  --fs-note: 1.25rem;
  --fs-lede: 1.75rem;

  /* space */
  --margin: 20px;
  --gutter: 24px;
  --wrap: 1200px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font: 400 var(--fs-body)/1.42 var(--font);
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.05; text-wrap: balance; }
p { max-width: 62ch; text-wrap: pretty; }
.place { text-wrap: balance; }
a { color: var(--shade-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--margin), var(--wrap)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; display: flex; align-items: center; min-height: 44px; padding: 0 var(--margin); color: var(--ink); background: transparent; text-decoration: underline; }
.skip:focus { position: static; border-bottom: 1px solid var(--ink); outline: 3px solid var(--ink); outline-offset: -6px; }

/* svg fills by class so the palette lives in one place */
.c-ink { fill: var(--ink); } .c-sun { fill: var(--sun); } .c-shade { fill: var(--shade); }
.c-paper { fill: var(--paper); } .c-linen { fill: var(--linen); } .c-action { fill: var(--action); }
.s-ink { fill: none; stroke: var(--ink); stroke-width: 1; }
.s-linen { fill: none; stroke: var(--linen); stroke-width: 1; }
.s-sun { fill: none; stroke: var(--sun); stroke-width: 1; }
.s-shade { fill: none; stroke: var(--shade); stroke-width: 1; }
.s-ink, .s-linen, .s-sun, .s-shade { vector-effect: non-scaling-stroke; }
.pin rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------ the demo bar (always the first thing) */
.demo-bar {
  position: sticky; bottom: 0; z-index: 50;
  background: var(--ink); color: var(--linen);
  font-size: .9375rem; line-height: 1.25;
  padding: 4px var(--margin);
  display: block; text-align: center;
  border-top: 1px solid var(--linen);
}
.demo-bar strong { font-weight: 700; margin-right: 10px; }
.demo-bar a { display: inline-flex; align-items: center; vertical-align: middle; min-height: 44px; color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }
.demo-bar a:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }

/* ------------------------------------------------------------ the one control: red fill, "Book a visit" */
.book {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  background-color: var(--action); color: var(--paper);
  font: 700 1.375rem/1 var(--font);
  border: 0; border-radius: 0; cursor: pointer;
  text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 2px;
  appearance: none; -webkit-appearance: none;
}
.book:hover { text-decoration: underline; }
.book:active { transform: translateY(1px); }
.book:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.book-bar { min-height: 44px; padding: 0 18px; font-size: 1.25rem; }

/* ------------------------------------------------------------ bar and page links */
.bar { position: sticky; top: 0; z-index: 30; background: var(--linen); border-bottom: 1px solid var(--ink); }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.875rem; line-height: 1; }
.wordmark:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.wordmark-mark { flex: none; display: block; }
.navlist { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 18px; list-style: none; padding: 0; }
.navlist a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.3125rem; border-bottom: 3px solid transparent; transition: border-color .15s linear; }
.navlist a:hover { border-bottom-color: var(--shade-deep); }
.navlist a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav-desk { display: none; }
.pagelinks { border-bottom: 1px solid var(--ink); }
.pagelinks .navlist { justify-content: space-between; row-gap: 0; padding-block: 2px; }

@media (max-width: 359px) {
  .navlist a { font-size: 1.0625rem; }
  .pagelinks .navlist { gap: 0 4px; }
}
@media (min-width: 900px) {
  .nav-desk { display: block; }
  .pagelinks { display: none; }
  .bar-row { min-height: 72px; }
}

/* ------------------------------------------------------------ 1. the Screen */
.screen-block { border-bottom: 1px solid var(--ink); overflow-x: clip; padding-top: 0; }
.screen-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.screen-copy { position: relative; padding: 26px 0 28px; display: flex; flex-direction: column; }
.brush { position: absolute; right: 0; bottom: 28px; width: 58px; line-height: 0; transform: rotate(3deg); transform-origin: 50% 100%; pointer-events: none; }
.brush-svg { display: block; width: 100%; height: auto; }
@media (max-width: 349px) { .brush { display: none; } }
.name-stack { display: block; }
.name-big { display: block; font-size: clamp(4.5rem, 24vw, 6.25rem); font-weight: 700; line-height: .86; letter-spacing: -.012em; margin-left: -.03em; }
.name-small { display: block; margin-top: 8px; font-size: clamp(1.7rem, 9.4vw, 2.6rem); font-weight: 600; line-height: 1.05; color: var(--shade-deep); }
.lede { margin-top: 18px; font-size: var(--fs-lede); line-height: 1.28; max-width: 24ch; }
.services-line { margin-top: 10px; max-width: 44ch; text-wrap: pretty; }
.price-anchor { margin-top: 8px; max-width: 44ch; font-size: 1.25rem; line-height: 1.25; }
.price-anchor span { display: block; }
.price-anchor span + span { margin-top: 2px; }
.price-anchor b { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 350px) and (max-width: 719px) { .services-line { max-width: calc(100% - 80px); } .price-anchor { max-width: calc(100% - 52px); } }
.action-row { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.arrow-svg { display: block; flex: none; width: 64px; height: auto; }
.see-prices { margin-top: 4px; }
.see-prices a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.place { margin-top: 10px; }
.screen-art { margin-inline: calc(-1 * var(--margin)); line-height: 0; }
.screen-svg { display: block; width: 100%; height: auto; }
.screen-wide { aspect-ratio: 390 / 330; max-height: 400px; }
.screen-tall { display: none; }

@media (min-width: 720px) {
  .screen-block { padding-top: 24px; }
  .screen-grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 42vw, 546px); gap: 0 var(--gutter); align-items: stretch; }
  .screen-copy { padding: 36px 0 40px; justify-content: space-between; }
  .name-big { font-size: clamp(5.5rem, 13.5vw, 11rem); }
  .name-small { font-size: clamp(1.9rem, 4.2vw, 4.1rem); }
  .screen-art { margin: 0; align-self: end; }
  .screen-wide { display: none; }
  .screen-tall { display: block; overflow: visible; }
  .place { margin-top: 0; }
  .brush { display: none; }
}
@media (min-width: 768px) {
  .brush { --bw: clamp(64px, 9.2vw, 118px); display: block; left: calc(100% + var(--gutter) + 40px - var(--bw)); right: auto; bottom: 0; width: var(--bw); }
}

/* ------------------------------------------------------------ 2. the hung price card */
.hang { position: relative; padding-bottom: var(--s-8); display: flow-root; }
.cords { position: absolute; left: 0; right: 0; top: 0; height: 96px; overflow: hidden; pointer-events: none; }
.cords-svg { display: block; width: 100%; height: 100%; }
.cords-desk { display: none; }
.price-card { position: relative; margin-top: 96px; background: var(--paper); border: 1px solid var(--ink); padding: 24px 18px 22px; }
.tie { position: absolute; top: -96px; height: 96px; width: 1px; background: var(--ink); }
.tie::after { content: ""; position: absolute; bottom: -5px; left: -3px; width: 7px; height: 19px; border-radius: 4px; background: var(--ink); }
.tie-l { left: 26px; } .tie-r { right: 26px; }
.card-head { display: grid; gap: 14px; }
.card-title { font-size: clamp(2.75rem, 6vw, 4rem); line-height: .95; }
.note { font-family: var(--hand); font-size: 1.375rem; line-height: 1.35; color: var(--shade-deep); transform: rotate(-1.2deg); transform-origin: left top; max-width: 16rem; }
.card-intro { margin-top: 16px; max-width: 54ch; }
.price-group { margin-top: 30px; }
.price-group h3 { font-size: 1.875rem; margin-bottom: 8px; }
.pin-rule { display: block; max-width: 100%; height: auto; }
.price-list { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid var(--ink); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "svc svc" "dur rng"; border-bottom: 1px solid var(--ink); padding: 12px 0; align-items: baseline; row-gap: 6px; }
.svc { grid-area: svc; font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.svc small { display: block; margin-top: 2px; font-size: var(--fs-note); font-weight: 400; line-height: 1.3; }
[data-hook="duration"] { grid-area: dur; padding-right: 10px; }
[data-hook="range"] { grid-area: rng; padding-left: 12px; border-left: 1px solid var(--ink); font-weight: 700; font-size: 1.4375rem; font-variant-numeric: lining-nums tabular-nums; line-height: 1.15; }
.card-foot { margin-top: 22px; }
.hang-wrap { position: relative; }
.gutter-shade { display: none; }
/* Below 960px the Screen's shade is a strip down the right margin beside the card (the same cast, poured narrow: leaning
   lozenge holes in the shade tint). The card is held in from it so no text sits on the shade. */
.phone-shade { --strip: 56px; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--margin)); width: var(--strip); overflow: hidden; line-height: 0; pointer-events: none; }
.strip-svg { display: block; width: 100%; height: 100%; max-width: none; }
.hang-wrap .price-card { margin-right: calc(56px - var(--margin) + 12px); }
@media (max-width: 359px) { .phone-shade { --strip: 44px; } .hang-wrap .price-card { margin-right: calc(44px - var(--margin) + 10px); } }
.card-foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (min-width: 600px) {
  .price-card { padding: 32px 32px 28px; }
  .price-row { grid-template-columns: minmax(0, 1fr) 7.5rem 10.5rem; grid-template-areas: "svc dur rng"; column-gap: 0; padding: 14px 0; }
  [data-hook="duration"] { padding: 0 14px; }
  [data-hook="range"] { padding-left: 16px; font-size: 1.5rem; }
}
@media (min-width: 720px) {
  .phone-shade { --strip: 72px; }
  .hang-wrap .price-card { margin-right: calc(72px - var(--margin) + 14px); }
  .hang { padding-bottom: var(--s-9); }
  .cords { height: 190px; }
  .cords-desk { display: block; } .cords-phone { display: none; }
  .price-card { margin-top: 190px; margin-left: 48px; }
  .tie { top: -190px; height: 190px; }
  .tie-l { left: 36px; } .tie-r { right: 36px; }
  .card-head { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); align-items: start; gap: 24px; }
  .note { margin-top: 10px; }
}
@media (min-width: 960px) {
  .phone-shade { display: none; }
  .hang-wrap .price-card { margin-right: 0; }
  .price-card { margin-left: calc((100% + var(--gutter)) / 12 * 2.5); width: calc((100% + var(--gutter)) / 12 * 8 - var(--gutter)); }
  /* The Screen's shade (hero) carried down the page: the card is offset 2.5 columns because this field lies in the gutter, and
     the card, hung in front of it, cuts it off. It starts below the cords and seats 40px behind the card's left edge. */
  .gutter-shade { display: block; position: absolute; top: 0; left: calc((100% + var(--gutter)) / 12 * 2.5 + 40px - 480px); width: 480px; height: 480px; line-height: 0; pointer-events: none; }
  .gutter-svg { display: block; width: 480px; height: 480px; max-width: none; }
}

/* ------------------------------------------------------------ 3. the sun field: who does what */
.sun-field { position: relative; background: var(--sun); padding: 116px 0 80px; }
.sun-edge { position: absolute; left: 0; right: 0; top: 0; height: 44px; background: var(--linen); }
.sun-edge-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sun-inner { position: relative; }
.sun-field h2 { font-size: clamp(3.5rem, 10vw, 8.25rem); line-height: .9; letter-spacing: -.01em; padding-right: 92px; }
.sun-intro { margin-top: 18px; padding-right: 92px; max-width: 46ch; }
.hung-form { position: absolute; right: -4px; top: -6px; width: 84px; line-height: 0; }
.hung-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ledger { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid var(--ink); }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 20px 0 22px; border-bottom: 1px solid var(--ink); }
.chair { font-size: 2.5rem; line-height: 1; }
.spec { font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
.how { max-width: 46ch; }
.sun-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 40px; }
.sun-action .arrow-wrap { display: block; line-height: 0; }
.sun-action .arrow-svg { width: 64px; }
.sun-action-note { flex: 1 1 15rem; max-width: 24rem; }

@media (min-width: 720px) {
  .sun-field h2, .sun-intro { padding-right: 0; }
  .ledger li { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); column-gap: 28px; align-items: baseline; }
  .ledger .spec, .ledger .how { grid-column: 2; }
  .ledger .chair { grid-row: 1 / span 2; }
  .ledger li:nth-child(even) { padding-left: 48px; }
}
@media (min-width: 960px) {
  .sun-field { padding: 172px 0 var(--s-10); }
  .sun-inner > .sun-text { width: calc((100% + var(--gutter)) / 12 * 9 - var(--gutter)); }
  .hung-form { right: 0; top: -20px; width: clamp(190px, 21vw, 270px); }
}

/* ------------------------------------------------------------ 4. plates (no heading) */
.plates-block { padding: 56px 0 48px; }
.plates { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.plate img { display: block; width: 100%; height: auto; background: var(--shade); }
.plate figcaption { margin-top: 10px; font-size: var(--fs-note); line-height: 1.35; max-width: 40ch; }
.plate figcaption b { font-weight: 700; }
.plate:nth-child(1) { width: 100%; }
.plate:nth-child(2) { width: 78%; margin-left: auto; }
.plate:nth-child(3) { width: 62%; }

@media (min-width: 720px) {
  .plates-block { padding: 80px 0 56px; }
  .plates { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; align-items: start; }
  .plate:nth-child(1), .plate:nth-child(2), .plate:nth-child(3) { width: auto; margin-left: 0; }
  .plate:nth-child(1) { grid-column: 1 / span 7; }
  .plate:nth-child(2) { grid-column: 8 / span 3; margin-top: 64px; }
  .plate:nth-child(3) { grid-column: 11 / span 2; margin-top: 168px; }
}

/* ------------------------------------------------------------ 5. the ink passage: first visit and the mirror */
.ink-passage { --ring: var(--sun); background: var(--ink); color: var(--linen); padding: 64px 0 72px; }
.ink-passage a { color: var(--sun); }
.ink-passage .mirror a { color: var(--shade-deep); }
.passage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px 0; }
.passage-h { font-size: clamp(2.5rem, 5.6vw, 4rem); line-height: .98; max-width: 14ch; color: var(--linen); }
.visit { list-style: none; padding: 0; margin: 36px 0 0; }
.visit li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-top: 1px solid var(--linen); }
.visit .dur { font-weight: 700; font-size: 1.6875rem; line-height: 1.05; font-variant-numeric: lining-nums; }
.visit p { max-width: 44ch; }
.passage-aside { margin-top: 28px; }
.note-ink { font-family: var(--hand); font-size: 1.375rem; line-height: 1.35; color: var(--linen); max-width: 22rem; transform: rotate(-1deg); transform-origin: left top; }

.mirror-wrap { position: relative; --cw: 136px; padding-top: 118px; }
.mirror { --ring: var(--ink); position: relative; background: var(--paper); color: var(--ink); border: 1px solid var(--linen); outline: 1px solid var(--linen); outline-offset: 8px; margin: 0 10px 10px 0; padding: 40px 16px 24px; }
.fan-svg { position: absolute; left: 34%; bottom: 100%; width: 200px; height: auto; margin-left: -100px; margin-bottom: 1px; z-index: 2; }
.cape { position: absolute; right: -4px; top: calc(118px - var(--cw) * .42); width: var(--cw); line-height: 0; z-index: 3; pointer-events: none; }
.cape-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cape-shade { transition: transform .2s linear; }
.mirror-wrap.is-done .cape-shade { transform: translateX(30px); }
.mirror h3 { font-size: 1.875rem; line-height: 1.05; padding-right: calc(var(--cw) * .74 + 10px); }
.mirror-wrap.is-done #book-h, .mirror-wrap.is-done .form-lede { display: none; }
.mirror-wrap, .price-card { scroll-margin-top: 96px; }
.form-lede { margin-top: 8px; font-size: var(--fs-note); }
fieldset { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 1.3125rem; }
legend .opt { font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.chip > span { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); font-weight: 500; line-height: 1.1; transition: font-weight .2s linear, border-width .2s linear; }
/* selected: a heavy rule all round and bold. For the many-of-these list (services) a tick in its box. For the one-of-these lists (day, time)
   the chip is filled with the booking's own red, the one fill colour on the page, in paper type: the slot being booked is part of the booking
   and is never given a second fill colour (ICP 2; borrowings_v1.md, constraint decision). */
.chip input:checked + span { font-weight: 700; border-width: 3px; padding: 0 12px; }
.chip input[type="radio"]:checked + span { background-color: var(--action); border-color: var(--action); color: var(--paper); }
.chip input[type="checkbox"] + span { padding-left: 42px; }
.chip input[type="checkbox"]:checked + span { padding-left: 40px; }
.chip input[type="checkbox"] + span::before { content: ""; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--ink); }
.chip input[type="checkbox"]:checked + span::before { left: 11px; }
.chip input[type="checkbox"]:checked + span::after { content: ""; position: absolute; left: 17px; top: 50%; width: 7px; height: 13px; margin-top: -11px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.chip input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 3px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 400; border-style: dashed; color: var(--ink-faint); border-color: var(--ink-faint); }
.chip:hover input:disabled + span { text-decoration: line-through; text-decoration-thickness: 2px; }
.times-note { margin-top: 10px; font-size: var(--fs-note); line-height: 1.3; max-width: 38ch; }
.times-note:empty { display: none; }
.chip:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.hint { font-size: var(--fs-note); max-width: 34ch; }
.together { margin-top: 14px; padding: 10px 0 12px; border-block: 1px solid var(--ink); font-size: var(--fs-note); line-height: 1.35; }
.together[hidden] { display: none; }
.together p { max-width: 40ch; }
.together p + p { margin-top: 6px; }
.tg-total b { font-weight: 700; }
.tg-total { font-size: 1.375rem; font-weight: 600; }
.field-hint { margin-top: 6px; font-size: var(--fs-note); line-height: 1.3; max-width: 38ch; }
.field { margin-top: 18px; }
.field label { display: block; font-weight: 700; font-size: 1.3125rem; margin-bottom: 6px; }
.field input { display: block; width: 100%; min-height: 48px; padding: 8px 12px; font: 400 var(--fs-body)/1.2 var(--font); color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; }
.field input:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.err { margin-top: 8px; font-weight: 700; font-size: var(--fs-note); line-height: 1.3; max-width: 36ch; }
.err[hidden] { display: none; }
.field input[aria-invalid="true"], fieldset[data-invalid="true"] .chips { border-width: 1px; outline: 2px solid var(--ink); outline-offset: 3px; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 14px; margin-top: 26px; }
.submit-row .arrow-svg { width: 52px; }
.policy { flex: 1 1 14rem; font-size: var(--fs-note); line-height: 1.35; max-width: 26rem; }
.done { margin-top: 18px; }
.done[hidden], form[hidden], .nojs[hidden] { display: none; }
.done h3 { max-width: none; padding-right: calc(var(--cw) * .74 + 10px); }
.done p { margin-top: 10px; }
.done-how { font-size: 1.375rem; line-height: 1.3; font-weight: 600; max-width: 34ch; }
.done-rules, .done-demo { font-size: var(--fs-note); line-height: 1.35; }
.done-reach, .foot-reach, .contact-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.done-reach a.tel, .foot-reach a.tel, .contact-reach a.tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.done-reach span { font-weight: 600; }
/* the day as the paper book draws it: the open hours as a line, the daylight as a row of sun lozenges above it, the booking a heavy pencil bar
   on it. Drawn once, about a second, when the line is in view after Book is pressed (reduced motion: already drawn). */
.daybar { margin-top: 18px; }
.db-light { position: relative; height: 24px; margin-inline: 12px; }
.db-l { position: absolute; bottom: 3px; width: 12px; height: 17px; overflow: visible; translate: -50% 0; transform-origin: 50% 100%; scale: .15; opacity: 0; }
.db-l.lo { bottom: -2px; }
.daybar.in .db-l { scale: 1; opacity: 1; transition: scale .3s ease-out, opacity .2s linear; transition-delay: calc(var(--i, 0) * 26ms); }
.db-track { position: relative; height: 26px; margin-inline: 12px; border-bottom: 1px solid var(--ink); }
.db-lo, .db-hi { position: absolute; bottom: -1px; height: 20px; box-sizing: border-box; clip-path: inset(-2px 100% -2px 0); }
.db-lo { border: 3px solid var(--ink); }
.db-hi { border: 1px dashed var(--ink); border-left: 0; }
.db-hi[hidden] { display: none; }
.daybar.in .db-lo { clip-path: inset(-2px 0 -2px 0); transition: clip-path .7s cubic-bezier(.5, .05, .3, 1); }
.daybar.in .db-hi { clip-path: inset(-2px 0 -2px 0); transition: clip-path .3s linear .7s; }
@media (min-width: 480px) { .db-l { width: 15px; height: 21px; } }
@media (prefers-reduced-motion: reduce) {
  .db-lo, .db-hi { clip-path: none; }
  .db-l { scale: 1; opacity: 1; }
}
.db-hours { position: relative; list-style: none; padding: 0; margin: 8px 12px 0; height: 20px; }
.db-hours li { position: absolute; top: 0; transform: translateX(-50%); font-size: 1rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.db-hours li::before { content: ""; position: absolute; left: 50%; top: -9px; height: 6px; border-left: 1px solid var(--ink); }
.db-cap { margin-top: 6px; font-size: var(--fs-note); line-height: 1.3; max-width: 40ch; }
.done-facts { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--ink); }
.done-facts li { padding: 8px 0; border-bottom: 1px solid var(--ink); overflow-wrap: anywhere; }
.done-facts b { font-weight: 700; }
.linkbtn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 0; background: none; border: 0; font: 600 var(--fs-body)/1 var(--font); color: var(--shade-deep); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.nojs-note { display: none; margin-top: 12px; font-size: var(--fs-note); max-width: 36ch; }
html:not(.js) .nojs-note { display: block; }
html:not(.js) #book-form > :not(.nojs-note) { display: none; }
html:not(.js) .form-lede { display: none; }

@media (min-width: 720px) {
  .ink-passage { padding: 96px 0 var(--s-9); }
  .mirror { padding: 44px 28px 28px; }
  .mirror-wrap { --cw: 170px; }
}
@media (min-width: 960px) {
  .passage-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .passage-left { grid-column: 1 / span 6; align-self: stretch; }
  /* the steps and the pencil note travel beside the form as it grows, so the left half is never empty ink */
  .visit-stick { position: sticky; top: 96px; }
  .passage-right { grid-column: 7 / span 6; padding-left: calc((100% + var(--gutter)) / 6 * 0.5); }
  .mirror-wrap { --cw: 160px; }
}
@media (min-width: 960px) and (max-height: 699px) { .visit-stick { position: static; } }
@media (min-width: 1200px) {
  .mirror-wrap { --cw: 204px; }
  .form-lede { margin-top: 20px; }
}

/* ------------------------------------------------------------ 6. the wall of slips: one treatment, no overlaps
   Every rule is the same object: a ruled strip, top and bottom, with a pin (the Denman capsule, lying down) on its top rule.
   Widths and offsets differ by half steps; nothing is boxed, filled, rotated or laid over another. */
.slips-block { padding: 72px 0 64px; }
.slips { display: flex; flex-direction: column; row-gap: 30px; }
.slip { position: relative; background: transparent; border: solid var(--ink); border-width: 1px 0; padding: 22px 0 18px; max-width: 100%; }
.slip-pin { position: absolute; left: 0; top: -4px; width: 28px; height: 8px; overflow: visible; }
.slip p { max-width: 34ch; }
.slip b { font-weight: 700; }
.slip h2 { font-size: clamp(2.5rem, 7vw, 3.25rem); line-height: .95; }
.slip-1 p { margin-top: 10px; font-size: var(--fs-note); }
.slip-1 { width: 72%; }
.slip-2 { width: 92%; margin-left: auto; }
.slip-3 { width: 80%; }
.slip-4 { width: 96%; margin-left: auto; }
.slip-5 { width: 84%; }
.slip-6 { width: 92%; margin-left: auto; }

@media (min-width: 720px) {
  .slips-block { padding: 88px 0 72px; }
  .slips { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 44px; align-items: start; }
  .slip, .slip:first-child { width: auto; margin-left: 0; }
  .slip-1 { grid-column: 1 / span 4; grid-row: 1; }
  .slip-2 { grid-column: 5 / span 5; grid-row: 1; margin-top: 30px; }
  .slip-3 { grid-column: 10 / span 3; grid-row: 1; margin-top: 8px; }
  .slip-4 { grid-column: 2 / span 4; grid-row: 2; }
  .slip-5 { grid-column: 6 / span 3; grid-row: 2; margin-top: 22px; }
  .slip-6 { grid-column: 9 / span 4; grid-row: 2; margin-top: 10px; }
}

/* ------------------------------------------------------------ 7. foot */
.foot { padding: 28px 0 28px; background: var(--linen); }
.foot-pin { line-height: 0; margin-bottom: 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 0; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: 8px 0; border-top: 1px solid var(--ink); font-weight: 400; vertical-align: baseline; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 1px solid var(--ink); }
.hours th { padding-right: 16px; font-weight: 600; width: 46%; }
.foot address { font-style: normal; }
.foot-contact p { margin-top: 6px; }
.foot-contact p:first-child { margin-top: 0; }
.foot-contact a.tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.foot-title { font-weight: 700; font-size: 1.5rem; margin-bottom: 10px; display: block; }
.foot-nav .navlist { flex-direction: column; gap: 0; }
.foot-nav .book { margin-top: 18px; }
.credit { margin-top: 40px; font-size: 1.125rem; }
.credit a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 720px) {
  .foot { padding: 40px 0 32px; }
  .foot-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: var(--gutter); }
  .foot-contact { padding-left: calc((100% + var(--gutter)) / 4 * 0.5); }
}

@media (max-width: 359px) {
  .mirror-wrap { --cw: 118px; }
  .fan-svg { width: 160px; margin-left: -80px; left: 29%; }
}

/* ------------------------------------------------------------ motion: nothing moves until it is touched */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============================================================================================================
   Inner pages (services, about, gallery, contact, 404). Same tokens, same unit, same gauge, same one control.
   Added at build-out; nothing above this line was changed. Flat fills only: no gradient, shadow or blur.
   ============================================================================================================ */
.c-deep { fill: var(--shade-deep); }
.hook-arm { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }

/* ------------------------------------------------------------ page head (every inner page) */
.page-head { position: relative; padding: 36px 0 40px; border-bottom: 1px solid var(--ink); overflow-x: clip; }
.page-head h1 { font-size: clamp(3.5rem, 16vw, 5.5rem); line-height: .88; letter-spacing: -.012em; margin-left: -.03em; text-wrap: balance; }
.page-head h1.h1-lg { font-size: clamp(3rem, 12.5vw, 4.5rem); line-height: .92; }
.page-lede { margin-top: 20px; font-size: var(--fs-lede); line-height: 1.28; max-width: 30ch; }
.page-sub { margin-top: 12px; max-width: 46ch; }
.head-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 0; }
.head-art { line-height: 0; }
.head-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 26px; }
.head-actions .arrow-svg { width: 64px; }
.jump { margin-top: 18px; }
.jump ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.jump a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 600; font-size: 1.3125rem; }
@media (min-width: 720px) {
  .page-head { padding: 56px 0 56px; }
  .page-head h1 { font-size: clamp(5rem, 11.5vw, 9.5rem); }
  .page-head h1.h1-lg { font-size: clamp(3.5rem, 7.4vw, 6.25rem); }
  .page-lede { max-width: 32ch; }
}
@media (min-width: 900px) {
  .head-grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 38vw, 500px); column-gap: var(--gutter); align-items: end; }
}

/* a head with the headline across the full width and the text and the way in below it */
.head-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 4px; }
.head-r .jump { margin-top: 18px; }
@media (min-width: 900px) {
  .head-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .head-l { grid-column: 1 / span 6; }
  .head-r { grid-column: 8 / span 5; }
  .head-r .head-actions { margin-top: 18px; }
}

/* the cords over the services head (anchor 06): the same hanging as the home card, a quieter length */
.head-hung { padding-top: 104px; }
.head-hung .cords { height: 72px; }
@media (min-width: 720px) {
  .head-hung { padding-top: 168px; }
  .head-hung .cords { height: 124px; }
}

/* ------------------------------------------------------------ services: the sheets */
.sheet { padding: 44px 0 8px; }
.sheet + .sheet { padding-top: 56px; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 0; }
.sheet h2 { font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: .95; }
.sheet .pin-rule { margin-top: 12px; }
.sheet-note { margin-top: 14px; max-width: 34ch; font-size: var(--fs-note); line-height: 1.35; }
.svc-list { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--ink); }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "time price" "body body"; column-gap: 0; row-gap: 6px; padding: 18px 0 20px; border-bottom: 1px solid var(--ink); align-items: baseline; }
.svc-row h3 { grid-area: name; font-size: 2rem; line-height: 1.02; }
.svc-time { grid-area: time; font-size: 1.375rem; font-weight: 600; padding-right: 10px; }
.svc-price { grid-area: price; font-weight: 700; font-size: 1.875rem; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; padding-left: 12px; border-left: 1px solid var(--ink); }
.svc-body { grid-area: body; margin-top: 4px; }
.svc-body p { max-width: 52ch; }
.svc-body p + p { margin-top: 8px; }
.svc-body .who { font-weight: 700; }
@media (min-width: 720px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) 8rem 14.5rem; grid-template-areas: "name time price" "body time price"; column-gap: 0; row-gap: 6px; padding: 24px 0 26px; align-items: start; }
  .svc-row h3 { font-size: 2.25rem; }
  .svc-time { align-self: start; padding: 5px 14px 0; }
  .svc-price { font-size: 2.25rem; padding-left: 20px; }
}
@media (min-width: 960px) {
  .sheet-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .sheet-head { grid-column: 1 / span 3; position: sticky; top: 88px; padding-top: 22px; }
  .svc-list { grid-column: 4 / span 9; margin-top: 0; }
  .sheet:nth-of-type(even) .sheet-head { padding-left: calc((100% + var(--gutter)) / 3 * .15); }
}

/* the small print as a ruled strip (anchor 05's rule beside the action), not a card */
.terms-block { padding: 64px 0 56px; }
.terms-block h2 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: .98; max-width: 16ch; }
.terms { margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.terms > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 16px 0 18px; border-bottom: 1px solid var(--ink); }
.terms dt { font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.terms dd { margin: 0; max-width: 54ch; }
@media (min-width: 720px) {
  .terms > div { grid-template-columns: 14rem minmax(0, 1fr); }
}
@media (min-width: 960px) {
  .terms-block .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .terms-block .terms-h { grid-column: 1 / span 3; }
  .terms-block .terms { grid-column: 4 / span 9; margin-top: 0; }
}

/* ------------------------------------------------------------ ink passages on the inner pages */
.ink-band { --ring: var(--sun); background: var(--ink); color: var(--linen); padding: 56px 0 60px; }
.ink-band a { color: var(--sun); }
.ink-band a.book { color: var(--paper); }
.ink-band h2 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: .98; max-width: 16ch; color: var(--linen); }
.ink-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 0; }
.why { list-style: none; padding: 0; margin: 30px 0 0; }
.why li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; padding: 16px 0 18px; border-top: 1px solid var(--linen); }
.why h3 { font-size: 1.75rem; line-height: 1.05; color: var(--linen); }
.why p { max-width: 46ch; }
.band-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 30px; }
.band-act .arrow-svg { width: 64px; }
.band-act p { flex: 1 1 14rem; max-width: 24rem; font-size: var(--fs-note); line-height: 1.35; }
.ink-band .note-ink { margin-top: 28px; }
@media (min-width: 720px) {
  .ink-band { padding: 80px 0 84px; }
  .why li { grid-template-columns: 11rem minmax(0, 1fr); }
}
@media (min-width: 960px) {
  .ink-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .ink-grid .ink-l { grid-column: 1 / span 5; }
  .ink-grid .ink-r { grid-column: 7 / span 6; }
  .ink-band .why { margin-top: 0; }
  .ink-band .why li:first-child { padding-top: 0; border-top: 0; }
}

/* ------------------------------------------------------------ about */
.about-head .head-art { max-width: 520px; }
.name-block { padding: 56px 0 28px; }
.name-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 0; }
.name-grid h2 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: .98; max-width: 12ch; }
.prose p { max-width: 52ch; }
.prose p + p { margin-top: 14px; }
@media (min-width: 960px) {
  .name-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .name-grid h2 { grid-column: 1 / span 4; }
  .name-grid .prose { grid-column: 6 / span 6; }
}

.sun-field.flat { padding: 72px 0 72px; }
.sun-field.flat h2 { padding-right: 0; font-size: clamp(3.25rem, 9vw, 7rem); }
.sun-field.flat .sun-intro { padding-right: 0; }
.chairs { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid var(--ink); }
.chairs > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 0; padding: 22px 0 26px; border-bottom: 1px solid var(--ink); }
.chairs .chair { font-size: 3rem; }
.chairs .spec { margin-top: 2px; }
.chairs dl { margin: 12px 0 0; padding: 0; }
.chairs dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 10px; }
.chairs dt { font-weight: 700; }
.chairs dd { margin: 0; max-width: 46ch; }
@media (min-width: 720px) {
  .chairs > li { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .chairs .chair-id { grid-column: 1; }
  .chairs dl { margin-top: 0; grid-column: 2; }
  .chairs dl > div { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 16px; margin-top: 8px; }
  .chairs dl > div:first-child { margin-top: 0; }
  .chairs > li:nth-child(even) { padding-left: 48px; }
}
@media (min-width: 960px) {
  .sun-field.flat { padding: 96px 0 104px; }
  .chairs > li { grid-template-columns: 15rem minmax(0, 1fr); }
  .sun-field.flat .sun-text { width: calc((100% + var(--gutter)) / 12 * 10 - var(--gutter)); }
}

.door-block { padding: 64px 0 56px; }
.door-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 0; }
.door-block h2 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: .98; max-width: 13ch; }
.facts { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--ink); }
.facts li { padding: 14px 0 16px; border-bottom: 1px solid var(--ink); }
.facts b { font-weight: 700; }
.facts p { max-width: 50ch; }
.not-here { margin-top: 36px; }
.not-here h3 { font-size: 1.875rem; }
.not-here p { margin-top: 8px; max-width: 46ch; }
@media (min-width: 960px) {
  .door-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .door-grid .door-l { grid-column: 1 / span 4; }
  .door-grid .door-r { grid-column: 6 / span 7; }
  .door-grid .facts { margin-top: 0; }
  .facts li:nth-child(even) { padding-left: calc((100% + var(--gutter)) / 7 * .35); }
}

/* ------------------------------------------------------------ gallery */
.gallery-head .page-sub { max-width: 52ch; }
.gal-block { padding: 56px 0 24px; }
.gal { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
.gal figure { margin: 0; }
.gal img { display: block; width: 100%; height: auto; background: var(--shade); }
.gal figcaption { margin-top: 10px; font-size: var(--fs-note); line-height: 1.35; max-width: 40ch; }
.gal figcaption b { font-weight: 700; }
.gal .g1 { width: 100%; }
.gal .g2 { width: 74%; margin-left: auto; }
.gal .g3 { width: 58%; }
.gal .g4 { width: 70%; margin-left: 12%; }
.gal .g5 { width: 100%; }
.gal .g6 { width: 52%; margin-left: auto; }
@media (min-width: 720px) {
  .gal-block { padding: 64px 0 32px; }
  .gal { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; align-items: start; }
  .gal .g1, .gal .g2, .gal .g3, .gal .g4, .gal .g5, .gal .g6 { width: auto; margin-left: 0; }
  .gal .g1 { grid-column: 1 / span 7; grid-row: 1; }
  .gal .g2 { grid-column: 9 / span 4; grid-row: 1; margin-top: 88px; }
  .gal .g3 { grid-column: 2 / span 3; grid-row: 2; margin-top: 56px; }
  .gal .g4 { grid-column: 6 / span 3; grid-row: 2; margin-top: 8px; }
  .gal .g5 { grid-column: 1 / span 8; grid-row: 3; margin-top: 64px; }
  .gal .g6 { grid-column: 10 / span 3; grid-row: 3; margin-top: 120px; }
}
.objects { --ring: var(--sun); background: var(--ink); color: var(--linen); padding: 56px 0 64px; margin-top: 48px; }
.objects h2 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: .98; max-width: 20ch; color: var(--linen); }
.objects .page-sub { color: var(--linen); }
.obj-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 0; margin-top: 36px; }
.obj { margin: 0; }
.obj-art { line-height: 0; border-top: 1px solid var(--linen); padding-top: 22px; }
.obj figcaption { margin-top: 14px; font-size: var(--fs-note); line-height: 1.35; max-width: 38ch; }
.obj figcaption b { font-weight: 700; }
.obj .fan-svg { position: static; display: block; width: min(100%, 300px); height: auto; margin: 0; }
.obj .cape-svg { display: block; width: min(100%, 280px); height: auto; overflow: visible; }
@media (min-width: 720px) {
  .objects { padding: 80px 0 88px; margin-top: 64px; }
  .obj-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .obj-row .o1 { grid-column: 1 / span 5; }
  .obj-row .o2 { grid-column: 7 / span 5; margin-top: 64px; }
}
.credits-block { padding: 64px 0 56px; }
.credits-block h2 { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; }
.credits { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.credits li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; padding: 12px 0 14px; border-bottom: 1px solid var(--ink); overflow-wrap: anywhere; }
.credits b { font-weight: 700; }
.credits .src { font-size: var(--fs-note); }
@media (min-width: 720px) {
  .credits li { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; }
}

/* ------------------------------------------------------------ contact */
.contact-head .facts-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid var(--ink); }
.contact-head .facts-row > div { padding: 14px 0 16px; border-bottom: 1px solid var(--ink); }
.contact-head .foot-title { margin-bottom: 4px; font-size: 1.375rem; }
.contact-head address { font-style: normal; }
.contact-head address + p { margin-top: 12px; }
.contact-head .tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.5rem; }
.contact-head p { max-width: 38ch; }
.contact-hours .hours { max-width: 30rem; }
@media (min-width: 900px) {
  .contact-head .facts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--ink); }
  .contact-head .facts-row > div { border-bottom: 0; padding: 16px 0 0; }
}
.passage-note { margin-top: 36px; }
.field textarea { display: block; width: 100%; min-height: 96px; padding: 8px 12px; font: 400 var(--fs-body)/1.3 var(--font); color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; resize: vertical; }
.field textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.field .opt { font-weight: 400; }
.before { padding: 64px 0 56px; }
.before h2 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: .98; max-width: 14ch; }

/* ------------------------------------------------------------ 404 */
.lost { padding: 44px 0 56px; }
.lost h1 { font-size: clamp(3.5rem, 14vw, 5rem); line-height: .9; letter-spacing: -.012em; margin-left: -.03em; text-wrap: balance; }
.lost .page-lede { max-width: 34ch; }
.lost-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 0; }
.lost-art { line-height: 0; }
.lost-art svg { display: block; width: 100%; max-width: 220px; height: auto; overflow: visible; }
.next { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--ink); }
.next li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px 0 12px; border-bottom: 1px solid var(--ink); }
.next a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.next span { max-width: 44ch; }
@media (min-width: 720px) {
  .lost { padding: 72px 0 80px; }
  .lost h1 { font-size: clamp(5rem, 10vw, 8rem); }
  .lost-grid { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 40px; align-items: start; }
  .lost-art { order: 2; padding-top: 20px; }
  .next li { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
}