/* Peau Aesthetics by Tyla: shared stylesheet. Direction B, The Journal; see DESIGN.md.
   Mobile first: S below 768px, M from 768px, L from 1024px. */

/* Fonts: Newsreader static cuts (OFL), plus metric-matched local fallbacks so nothing moves when they swap in. */
@font-face { font-family: "Newsreader Display"; src: url(../fonts/newsreader-display-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Display"; src: url(../fonts/newsreader-display-300-italic.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader Text"; src: url(../fonts/newsreader-text-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader Text"; src: url(../fonts/newsreader-text-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader Text Medium"; src: url(../fonts/newsreader-text-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: "Newsreader Display Fallback"; src: local("Georgia"); font-weight: 300; font-style: normal; size-adjust: 98.6%; ascent-override: 74.54%; descent-override: 26.88%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Display Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 300; font-style: italic; size-adjust: 88.5%; ascent-override: 83.05%; descent-override: 29.94%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Display Fallback Android"; src: local("Noto Serif"), local("NotoSerif-Regular"); font-weight: 300; font-style: normal; size-adjust: 92.4%; ascent-override: 79.55%; descent-override: 28.68%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Display Fallback Android"; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); font-weight: 300; font-style: italic; size-adjust: 89.4%; ascent-override: 82.21%; descent-override: 29.64%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Text Fallback"; src: local("Georgia"); font-weight: 400 500; font-style: normal; size-adjust: 95.1%; ascent-override: 77.29%; descent-override: 27.87%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Text Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 400; font-style: italic; size-adjust: 88.9%; ascent-override: 82.68%; descent-override: 29.81%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Text Fallback Android"; src: local("Noto Serif"), local("NotoSerif-Regular"); font-weight: 400 500; font-style: normal; size-adjust: 88.3%; ascent-override: 83.24%; descent-override: 30.01%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Text Fallback Android"; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); font-weight: 400; font-style: italic; size-adjust: 85.9%; ascent-override: 85.56%; descent-override: 30.85%; line-gap-override: 0%; }

/* Tokens */
:root {
  --paper: #eeeee9;      /* limewash */
  --plate: #f9f9f6;      /* print mats and stationery */
  --shade: #e3e3db;      /* limewash in shade: the footer only */
  --ink: #1d2940;        /* blue-black stationery ink */
  --ink-2: #4e5a70;
  --ink-hover: #2e3b55;
  --line: rgba(29, 41, 64, .2);
  --display: "Newsreader Display", "Newsreader Display Fallback", "Newsreader Display Fallback Android", serif;
  --text: "Newsreader Text", "Newsreader Text Fallback", "Newsreader Text Fallback Android", serif;
  --medium: "Newsreader Text Medium", "Newsreader Text Fallback", "Newsreader Text Fallback Android", serif;
  --pad: clamp(20px, 4.2vw, 60px);
  --pad-l: max(var(--pad), env(safe-area-inset-left));
  --pad-r: max(var(--pad), env(safe-area-inset-right));
  --gap: 16px;
  --space: clamp(88px, 7.5vw + 58px, 168px);
  --bar: 57px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow: 0 1px 0 rgba(29, 41, 64, .05), 0 22px 44px -26px rgba(29, 41, 64, .45);
}
@media (min-width: 768px) { :root { --gap: 20px; } }
@media (min-width: 1024px) { :root { --gap: 24px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--text); font-synthesis: none; -webkit-font-smoothing: antialiased; }
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: italic; }
address { font-style: normal; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 768px) { body { font-size: 18px; } }
@media (max-width: 767px) { html { scroll-padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom) + 8px); } }

/* Layout */
.wrap { width: 100%; max-width: calc(1320px + var(--pad-l) + var(--pad-r)); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); }
.g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
@media (min-width: 768px) { .g { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.section { padding-top: var(--space); }
.section--end { padding-bottom: var(--space); }

/* Type roles */
.h2 { font: 300 clamp(36px, 2.25vw + 27.2px, 60px)/1.08 var(--display); letter-spacing: -.02em; }
.h3 { font: 300 clamp(28px, .67vw + 25.4px, 36px)/1.12 var(--display); letter-spacing: -.01em; }
.label { font: 500 12px/1.2 var(--medium); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.lead { font-size: 19px; line-height: 1.5; }
.italic { font-style: italic; }
.muted { color: var(--ink-2); }
@media (min-width: 768px) { .lead { font-size: 20px; } }
@media (min-width: 1024px) { .label { font-size: 13px; } .lead { font-size: 21px; } }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 13px/1 var(--medium); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease); }
.btn:active { transform: scale(.98); }
.btn--line { background: transparent; color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 20px; }
.tlink { display: inline-flex; align-items: center; min-height: 44px; font-style: italic; font-size: 19px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
@media (max-width: 767px) {
  /* On phones every action row stacks: the button full width, the text link centred under it. */
  .actions { display: grid; gap: 4px; }
  .actions .tlink { justify-content: center; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
  .btn--line:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .tlink:hover, .nav a:hover, .foot a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}

/* Skip link and header */
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 14px 18px; background: var(--ink); color: var(--paper); font: 500 12px/1 var(--medium); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 12px; }
.top { position: relative; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); view-transition-name: site-header; }
html[data-vt-skip] .top { view-transition-name: none; }
.top__in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.nav, .top__book { display: none; }
.menu-m { flex: 1; }
.menu-m > summary { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; list-style: none; cursor: pointer; font: 500 12px/1 var(--medium); letter-spacing: .16em; text-transform: uppercase; }
.menu-m > summary::-webkit-details-marker { display: none; }
.menu-m[open] > summary { text-decoration: underline; text-underline-offset: 6px; }
.menu-m__panel { padding: 6px 0 18px; }
.menu-m__panel a:not(.btn) { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--line); font-size: 19px; text-decoration: none; }
.menu-m__panel a[aria-current="page"] { font-style: italic; }
.menu-m__panel .btn { display: flex; margin-top: 14px; }
@media (min-width: 768px) {
  .top__in { min-height: 72px; }
  .menu-m { display: none; }
  .nav { display: flex; gap: 28px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: none; }
  .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
  .top__book { display: inline-flex; }
}

/* Running head (inner pages) */
.runhead { border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 17px; }
.runhead a { display: inline-block; padding-block: 11px; text-decoration: none; }
.runhead em { font-style: italic; }

/* Prints (matted) and crops (unmatted). M2 clips .plate__img, never the print, so the shadow survives. */
.plate { margin: 0; padding: 10px; background: var(--plate); box-shadow: var(--shadow); }
.plate__img, .crop { position: relative; overflow: hidden; background: var(--shade); }
.plate__img img, .plate__img iframe, .crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-32 { aspect-ratio: 3 / 2; }
.ar-45 { aspect-ratio: 4 / 5; }
.ar-34 { aspect-ratio: 3 / 4; }
.ar-11 { aspect-ratio: 1 / 1; }
@media (min-width: 1024px) { .plate { padding: 12px; } }

/* Stationery cards: B's menu card, used as the menu, the booking card and the message card */
.card { position: relative; margin-inline: -8px; padding: 40px 26px; background: var(--plate); border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -8px; }
.card__head { display: grid; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.card__title { font: 300 clamp(42px, 5vw, 68px)/1 var(--display); letter-spacing: -.02em; }
@media (min-width: 768px) {
  .card { margin-inline: 0; padding: clamp(40px, 6vw, 84px) clamp(28px, 6vw, 84px); outline-offset: -12px; }
  .card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-bottom: 26px; }
}

/* ---------- Home ---------- */

/* Cover: masthead, then a bleed row with the lead and the portrait (frame > zoom > img). */
.cover__mast { padding: 18px 0 20px; border-bottom: 1px solid var(--line); font: 300 13.4vw/.95 var(--display); letter-spacing: -.028em; }
.cover__mast em { display: block; font-style: italic; padding-bottom: .08em; }
.cover__frame { position: relative; overflow: hidden; height: 250px; background: var(--shade); }
.cover__zoom { position: absolute; inset: 0; transform-origin: 50% 40%; }
.cover__img { position: absolute; left: 0; top: -8%; width: 100%; height: 108%; max-width: none; object-fit: cover; object-position: 50% 42%; }
.cover__text { padding: 26px var(--pad-r) 36px var(--pad-l); }
.cover__text .actions { margin-top: 22px; }
.cover__print { display: none; }
@media (min-width: 768px) {
  .cover__mast { padding: 22px 0 26px; font-size: clamp(66px, 8.6vw, 124px); white-space: nowrap; }
  .cover__mast em { display: inline; line-height: 0; } /* the roman sets the line box, so a font swap can't change its height */
  .cover__frame { height: auto; aspect-ratio: 16 / 9; }
  .cover__text .lead { max-width: 44ch; }
  
}
@media (min-width: 1024px) {
  .cover { display: flex; flex-direction: column; min-height: min(calc(100svh - 73px), 900px); }
  .cover__row { flex: 1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-left: max(var(--pad-l), (100% - 1320px) / 2); }
  .cover__text { grid-column: 1 / 5; grid-row: 1; align-self: end; padding: 40px 0 56px; }
  .cover__text .lead { max-width: 25ch; }
  .cover__frame { grid-column: 5 / -1; grid-row: 1; aspect-ratio: auto; min-height: 420px; }
}
@media (min-width: 1366px), (min-width: 1280px) and (min-height: 700px) {
  .cover__print { display: block; grid-column: 5; grid-row: 1; align-self: start; justify-self: start; position: relative; z-index: 2; width: 172px; margin: 44px 0 0 -112px; }
}

/* The studio: article with a drop cap and B's pull-line, beside two prints */
.dropcap { font-size: 19px; line-height: 1.6; margin-top: 26px; }
.dropcap::first-letter { float: left; font: 300 5.3em/.78 var(--display); padding: .07em .09em 0 0; }
.pull { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 44px; padding: 28px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pull__num { font: 300 clamp(76px, 7.4vw, 104px)/.8 var(--display); letter-spacing: -.03em; }
.pull__txt { font: italic 300 clamp(22px, 2vw, 27px)/1.3 var(--display); }
.studio__more { margin-top: 24px; }
.studio__link { margin-top: 4px; }
.studio__prints { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 56px; }
.studio__prints .plate--wide { grid-column: 1 / -1; }
.studio__prints .plate--tall { grid-column: 3 / 5; margin-top: -56px; position: relative; }
.studio__text { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .studio__text { max-width: 62ch; }
  .dropcap { font-size: 20px; }
  .pull { grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
  .studio__prints { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .studio__prints .plate--wide { grid-column: 1 / 6; }
  .studio__prints .plate--tall { grid-column: 4 / 7; margin-top: -64px; }
}
@media (min-width: 1024px) {
  .studio { align-items: start; }
  .studio__text { grid-column: 1 / 6; max-width: none; }
  .studio__prints { grid-column: 7 / -1; margin-top: 0; }
  .studio__prints .plate--wide { grid-column: 1 / -1; }
  .studio__prints .plate--tall { grid-column: 3 / 6; margin-top: -84px; }
}

/* From the menu: three features of different sizes, then B's menu card */
.feats { display: grid; gap: 56px; margin-top: 32px; }
.feat { display: flex; flex-direction: column; }
.feat .crop { aspect-ratio: 3 / 2; }
.feat--1 .crop { aspect-ratio: 4 / 5; }
.feat__t { margin-top: 20px; }
.feat__t a { text-decoration: none; }
.feat__t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.feat__line { margin-top: 8px; font-style: italic; color: var(--ink-2); }
.grps { margin-top: 28px; }
.grp { break-inside: avoid; padding-bottom: 26px; }
.grp__name { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1.2 var(--medium); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.grp__name:hover { text-decoration: underline; text-underline-offset: 5px; }
.grp__line { font-style: italic; color: var(--ink-2); line-height: 1.5; }
.menu-card { margin-top: 64px; }
@media (min-width: 768px) {
  .feats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px var(--gap); margin-top: 40px; }
  .feat--1 { grid-column: 1 / -1; }
  .feat--1 .crop { aspect-ratio: 3 / 2; }
  .feat--1 .crop img { object-position: 50% 100%; } /* the 4:5 photo at 3:2 keeps the closed eyes */
  .feat--2 { grid-column: 1 / 4; }
  .feat--3 { grid-column: 4 / -1; }
  .grps { columns: 2; column-gap: 48px; margin-top: 36px; }
  .menu-card { margin-top: 80px; }
}
@media (min-width: 1024px) {
  .feats { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; margin-top: 48px; }
  .feat--1 { grid-column: 1 / 7; grid-row: 1 / 3; }
  .feat--1 .crop { aspect-ratio: 4 / 5; }
  .feat--2 { grid-column: 8 / -1; grid-row: 1; }
  .feat--3 { grid-column: 8 / -1; grid-row: 2; }
  .feat--2 .crop, .feat--3 .crop { flex: 1 1 0; min-height: 200px; aspect-ratio: auto; }
  /* Equal image heights on the right: each text block reserves two title lines and three description lines, with the spare room at the end. */
  .feat--2 .feat__txt, .feat--3 .feat__txt { min-height: calc(2 * 1.12 * clamp(28px, .67vw + 25.4px, 36px) + 28px + 3 * 1.6 * 18px); }
  .grps { columns: 3; column-gap: 56px; margin-top: 44px; }
  .grp__name { font-size: 13px; }
  .menu-card { margin-top: 96px; }
}

/* At Zevenster: a print beside the place */
.place__text { grid-column: 1 / -1; }
.place__text p { margin-top: 18px; font-size: 20px; }
.place__print { grid-column: 2 / -1; margin-top: 40px; }
@media (min-width: 768px) {
  .place { align-items: center; }
  .place__print { grid-column: 1 / 4; grid-row: 1; margin-top: 0; }
  .place__text { grid-column: 4 / -1; grid-row: 1; }
}
@media (min-width: 1024px) {
  .place__print { grid-column: 1 / 5; }
  .place__text { grid-column: 6 / 12; }
}

/* Endings: a full-bleed photograph with the booking card over its lower edge */
.ending { padding-block: var(--space); }
.ending__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--shade); }
.ending__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; }
.card--book { grid-column: 1 / -1; margin-top: -48px; z-index: 1; box-shadow: var(--shadow); }
.book__h { font: 300 clamp(44px, 3.15vw + 31.7px, 76px)/1.05 var(--display); letter-spacing: -.02em; }
.card--book p { margin-top: 16px; font-size: 19px; }

@media (min-width: 768px) {
  .ending__frame { aspect-ratio: 16 / 9; }
  .card--book { margin: -72px 32px 0; }
}
@media (min-width: 1024px) {
  .ending__frame { aspect-ratio: 16 / 7; }
  .ending .g > .card--book { grid-column: 3 / 11; margin: -120px 0 0; }
  .card--book p { font-size: 20px; }
}

/* ---------- Inner-page head: the title on the left, a photograph bleeding right ---------- */
.ihead__text { padding: 8px var(--pad-r) 36px var(--pad-l); }
.ihead__h { margin-top: 28px; font: 300 clamp(52px, 4.94vw + 32.7px, 96px)/1 var(--display); letter-spacing: -.025em; }
.ihead__text .lead { margin-top: 20px; max-width: 44ch; }
.ihead__stand { margin-top: 20px; font: 300 clamp(30px, .67vw + 27.4px, 38px)/1.2 var(--display); letter-spacing: -.01em; }
.ihead__stand em { font-style: italic; }
.ihead__para { margin-top: 16px; max-width: 30ch; font-size: 20px; line-height: 1.5; }
.ihead__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--shade); }
.ihead__frame--square { aspect-ratio: 1 / 1; }
.ihead__img { position: absolute; left: 0; top: -8%; width: 100%; height: 108%; max-width: none; object-fit: cover; }
.ihead__img--frond { object-position: 50% 40%; }
/* The Treatments bottle is wider than a near-square frame. Below L (no parallax) it sits unshifted and whole;
   at L, a frame narrower than 11:10 keeps the bottle's mouth and lets its base run off the left edge. */
.ihead__img--bottle { top: 0; height: 100%; object-position: 45% 15%; }
.ihead__print { position: relative; z-index: 2; width: 72%; margin: -56px var(--pad-r) 0 auto; }
@media (min-width: 768px) {
  .ihead__frame, .ihead__frame--square { aspect-ratio: 16 / 9; }
  .ihead__frame--four3 { aspect-ratio: 4 / 3; }
  .ihead__print { width: 48%; margin-top: -64px; }
}
@media (min-width: 1024px) {
  .ihead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); min-height: clamp(520px, calc(100svh - 73px - 56px), 680px); padding-left: max(var(--pad-l), (100% - 1320px) / 2); }
  .ihead__text { grid-column: 1 / 6; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 8px 0 48px; }
  .ihead__frame, .ihead__frame--square, .ihead__frame--four3 { grid-column: 6 / -1; grid-row: 1; aspect-ratio: auto; }
  .ihead__frame--bottle { container-type: size; }
  .ihead__img--bottle { top: -8%; height: 108%; object-position: 45% 50%; }
  .ihead__print { display: none; }
}
@container (max-aspect-ratio: 11 / 10) { .ihead__img--bottle { object-position: 72% 50%; } }
@media (min-width: 1200px) {
  .ihead__print { display: block; grid-column: 6; grid-row: 1; align-self: end; justify-self: start; width: 264px; margin: 0 0 -64px -132px; }
}

/* ---------- Treatments ---------- */
.menu__index .label { margin-bottom: 8px; }
.menu__index ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.menu__index a { position: relative; display: flex; align-items: center; min-height: 44px; font-size: 17px; text-decoration: none; }
.menu__index a:hover { text-decoration: underline; }
.menu__card { margin-top: 40px; }
.gb { padding-block: 40px; border-top: 1px solid var(--line); }
.gb:first-of-type { border-top: 0; }
.gb__h { font: 300 34px/1.1 var(--display); letter-spacing: -.01em; }
.gb__desc { margin-top: 10px; font-style: italic; font-size: 19px; line-height: 1.45; color: var(--ink-2); }
.gb__opts { margin-top: 20px; line-height: 1.5; }
.gb__opts h4 { margin-top: 14px; font-style: italic; font-size: 17px; color: var(--ink-2); }
.gb__opts h4:first-child { margin-top: 0; }
.gb__opts ul { break-inside: avoid; }
.gb__opts--cols > ul:only-of-type { break-inside: auto; } /* a lone list fills both columns; brand sub-lists stay whole */
.gb__opts li + li { margin-top: 4px; }
.gb__photo { margin-top: 28px; aspect-ratio: 4 / 5; }
.gb__wide { aspect-ratio: 314 / 180; margin-block: 8px; }
.gb--last { padding-bottom: 0; }
.gb--last p { margin-top: 12px; font-size: 19px; }
@media (min-width: 768px) {
  .menu__index ul { grid-template-columns: repeat(3, 1fr); }
  .gb { padding-block: 48px; }
  .gb__opts--cols { columns: 2; column-gap: 40px; }
  .gb__opts--cols h4 { break-after: avoid; }
  .gb__photo { width: 60%; }
  .gb--right .gb__photo { margin-left: auto; }
  .gb__wide { aspect-ratio: 745 / 330; }
}
@media (min-width: 1024px) {
  .menu { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .menu__index { grid-column: 1 / 4; position: sticky; top: 32px; }
  .menu__index ul { grid-template-columns: 1fr; }
  .menu__index a { padding-left: 32px; }
  .menu__index a::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); }
  .menu__index a[aria-current="true"]::before { transform: scaleX(1); }
  .menu__card { grid-column: 4 / -1; margin-top: 0; padding: 64px; }
  .gb__h { font-size: 40px; }
  .gb--photo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; align-items: start; }
  .gb--photo .gb__photo { width: auto; margin: 0; grid-column: 2; grid-row: 1; }
  .gb--photo .gb__text { grid-column: 1; grid-row: 1; }
  .gb--left { grid-template-columns: 360px minmax(0, 1fr); }
  .gb--left .gb__photo { grid-column: 1; }
  .gb--left .gb__text { grid-column: 2; }
}

/* ---------- About: the credits spread ---------- */
.credits__cols { row-gap: 44px; margin-top: 36px; }
.credits__col { grid-column: 1 / -1; }
.credits__h { font-style: italic; font-size: 19px; color: var(--ink-2); }
.credits__list { margin-top: 12px; }
.credits__list li { font: 300 clamp(36px, 3.6vw + 22px, 72px)/1.08 var(--display); letter-spacing: -.02em; }
.credits__proof { margin-top: 56px; font-style: italic; font-size: 19px; }
@media (min-width: 768px) {
  .credits__col { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .credits__col { grid-column: span 6; }
  .credits__proof { font-size: 20px; }
}

/* ---------- Contact ---------- */
.dir { margin-top: 32px; border-bottom: 1px solid var(--line); }
.dir__row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.dir__label { font-style: italic; font-size: 17px; color: var(--ink-2); }
.dir__val { font: 300 24px/1.15 var(--display); letter-spacing: -.01em; }
.dir__val--email { font: 400 18px/1.4 var(--text); letter-spacing: 0; }
.dir__row:hover .dir__val { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.visit__text { grid-column: 1 / -1; }
.visit__text address { margin-top: 20px; font-size: 19px; line-height: 1.5; }
.hours { margin-top: 28px; }
.hours__cap { font-style: italic; color: var(--ink-2); }
.hours dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 24px; margin-top: 8px; }
.hours dt { font-weight: 400; }
.visit__access { margin-top: 24px; }
.visit__map { grid-column: 1 / -1; margin-top: 40px; }
.visit__map iframe { border: 0; }
.message__intro { grid-column: 1 / -1; }
.message__intro p { margin-top: 16px; font-size: 19px; }
.message .card--msg { grid-column: 1 / -1; margin-top: 36px; }
.field { display: grid; gap: 8px; margin-top: 22px; }
.field:first-child { margin-top: 0; }
.field label { font-size: 17px; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--ink-2); border-radius: 0; background: var(--plate); color: var(--ink); font: 400 18px/1.4 var(--text); }
.field textarea { resize: vertical; }
.field input:user-invalid, .field textarea:user-invalid { border-width: 2px; padding: 10px 13px; }
.field .err { display: none; font-size: 15px; }
.field :user-invalid + .err { display: block; }
.form .btn { width: 100%; margin-top: 28px; }
.status { margin-top: 16px; font-style: italic; font-size: 17px; }
.status:empty { margin: 0; }
@media (min-width: 768px) {
  .dir__row { min-height: 84px; }
  .dir__val { font-size: 30px; }
  .dir__val--email { font-size: 20px; }
  .visit__map .plate__img { aspect-ratio: 4 / 3; }
  .form .btn { width: auto; }
}
@media (min-width: 1024px) {
  .visit { align-items: start; }
  .visit__text { grid-column: 1 / 6; }
  .visit__map { grid-column: 7 / -1; margin-top: 0; }
  .visit__map .plate__img { aspect-ratio: 1 / 1; }
  .message { align-items: start; }
  .message__intro { grid-column: 1 / 5; }
  .message .card--msg { grid-column: 6 / -1; margin-top: 0; }
}

/* ---------- Footer ---------- */
.foot { background: var(--shade); padding: 64px 0 calc(var(--bar) + env(safe-area-inset-bottom) + 24px); }
.foot__in { row-gap: 32px; }
.foot__id, .foot__col, .foot__base { grid-column: 1 / -1; }
.foot__name { font: 300 34px/1.1 var(--display); letter-spacing: -.01em; }
.foot__name em { font-style: italic; }
.foot__id address { margin-top: 14px; color: var(--ink-2); }
.foot__col a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.foot__base a { display: inline-block; padding-block: 11px; } /* one text run (flex dropped the space after the dot); 44px target */
@media (min-width: 768px) {
  .foot { padding-bottom: 44px; }
  .foot__id { grid-column: 1 / -1; }
  .foot__col { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .foot__id { grid-column: 1 / 6; }
  .foot__col--pages { grid-column: 7 / 9; }
  .foot__col--reach { grid-column: 9 / -1; }
}

/* ---------- Mobile bar ---------- */
.bar { position: fixed; inset: auto 0 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr 1.5fr; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--paper); border-top: 1px solid var(--line); }
.bar.is-parked { transform: translateY(110%); visibility: hidden; }
.bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; font: 500 12px/1 var(--medium); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.bar a + a { border-left: 1px solid var(--line); }
.bar a:focus-visible { outline-offset: -6px; }
.bar .bar__book { background: var(--ink); color: var(--plate); }
.bar .bar__book:focus-visible { outline-color: var(--paper); }
@media (min-width: 768px) { .bar { display: none; } }

/* ---------- Motion ---------- */
/* SplitText line masks get room, so descenders, italic overhangs and numerals are never cropped. */
.line-mask { padding: .12em .1em; margin: -.12em -.1em; }
/* A split element is a flex column, so the masks' negative margins can't collapse: its height matches the unsplit text exactly. */
.is-split { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .16s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  /* 'none', not a tiny duration: a .01ms reset turns every style change into a real transition, which GSAP then reads mid-way. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}