/* ==========================================================================
   Erika Houle — 07b Big Type (built out)
   Two faces: Bricolage Grotesque (display), Newsreader (reading).
   Colour comes from role tokens; each palette sets the roles.
   Three fields use them: paper, block and deep (the menu).
   ========================================================================== */

/* ---------- metric-matched fallbacks: while (or if) the web fonts are missing, text keeps the same size ---------- */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 88.98%; ascent-override: 104.52%; descent-override: 30.35%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 101.61%; ascent-override: 72.83%; descent-override: 25.59%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 101.61%; ascent-override: 72.83%; descent-override: 25.59%; line-gap-override: 0%; }

/* ---------- palettes: Tomato (default), Eggplant, Butter ----------
   paper / ink / display / accent ........ the page ground and its type
   read .................................. long-form reading ink on paper (bio, ledes)
   block / on-block / block-accent ....... the big colour blocks (name field, footer)
   deep / on-deep / deep-accent .......... the menu overlay, the gallery, typeset peek cards
   card / card-ink / card-read / card-star  the typeset menu cards (on the block band)
   star-* ................................ the small brand glyph on each field (decorative)
   sh / sh-a / rim ....................... the plate's shadow, its strength, and a rim light for dark grounds */
:root, html[data-theme="tomato"] {
  --paper: #F5F0E4; --ink: #B4300E; --display: #E2471D; --accent: #B4300E; --read: #8A2A10; --star-p: #E2471D;
  --block: #C4340F; --on-block: #FBF6EA; --block-accent: #D8F5BE; --star-b: #D8F5BE;
  --deep: #8A2309; --on-deep: #FBF6EA; --deep-accent: #D8F5BE; --star-d: #D8F5BE;
  --card: #F5F0E4; --card-ink: #B4300E; --card-read: #8A2A10; --card-star: #E2471D;
  --sh: 92, 18, 2; --sh-a: 1; --rim: rgba(255, 255, 255, 0);
  color-scheme: light;
}
html[data-theme="eggplant"] {
  --paper: #33173D; --ink: #F4EDE2; --display: #F4EDE2; --accent: #CDB8FF; --read: #EADFCF; --star-p: #CDB8FF;
  --block: #4A2258; --on-block: #F4EDE2; --block-accent: #F8A848; --star-b: #CDB8FF;
  --deep: #CDB8FF; --on-deep: #33173D; --deep-accent: #5A2470; --star-d: #33173D;
  --card: #F4EDE2; --card-ink: #33173D; --card-read: #4A2258; --card-star: #5A2470;
  --sh: 10, 0, 16; --sh-a: 1.6; --rim: rgba(244, 237, 226, .12);
  color-scheme: dark;
}
html[data-theme="butter"] {
  --paper: #F6E3A1; --ink: #2B1E16; --display: #2B1E16; --accent: #A8331A; --read: #3A291D; --star-p: #D2421F;
  --block: #2B1E16; --on-block: #F6E3A1; --block-accent: #F2936E; --star-b: #D2421F;
  --deep: #E9C46A; --on-deep: #2B1E16; --deep-accent: #8E2A14; --star-d: #D2421F;
  --card: #FBF0C8; --card-ink: #2B1E16; --card-read: #3A291D; --card-star: #D2421F;
  --sh: 0, 0, 0; --sh-a: 1.5; --rim: rgba(246, 227, 161, .14);
  color-scheme: light;
}

:root {
  --disp-f: "Bricolage Grotesque", "Bricolage Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-f: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  /* side gutter; in landscape it also clears the notch / home-indicator safe areas */
  --g: max(clamp(16px, 2.4vw, 36px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --head-h: 76px;
  /* motion: one curve for anything a person starts or that enters, one in-out for long self-running moves */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --dur-xs: 160ms; --dur-s: 250ms; --dur-m: 450ms; --dur-l: 600ms; --dur-xl: 780ms;
  /* small text scale (labels, captions, meta) */
  --fs-2xs: .75rem;   /* 12px: micro labels (menu cards) */
  --fs-xs: .8rem;     /* 12.8px: small-caps labels (eyebrows, legends, palette label) */
  --fs-s: .9rem;      /* 14.4px: captions (plate, fish, gallery), form note */
  --fs-m: 1rem;       /* 16px: small links, footer line */
  --fs-l: 1.05rem;    /* 16.8px: dates beside big type (résumé, archive) */
  --sup-min: 11px;    /* count superscripts never get smaller than this */
  --sec-gap: clamp(20px, 3vw, 40px); /* section heading → its content, everywhere */
  --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='black'%3E%3Crect x='41' y='2' width='18' height='96' rx='9'/%3E%3Crect x='41' y='2' width='18' height='96' rx='9' transform='rotate(45 50 50)'/%3E%3Crect x='41' y='2' width='18' height='96' rx='9' transform='rotate(90 50 50)'/%3E%3Crect x='41' y='2' width='18' height='96' rx='9' transform='rotate(135 50 50)'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 720px) { :root { --head-h: 64px; --sup-min: 12px; } }

/* ---------- fields ---------- */
.f-paper { --bg: var(--paper); --fg: var(--ink); --big: var(--display); --acc: var(--accent); --star: var(--star-p); --rd: var(--read); }
.f-block { --bg: var(--block); --fg: var(--on-block); --big: var(--on-block); --acc: var(--block-accent); --star: var(--star-b); --rd: var(--on-block); }
.f-deep  { --bg: var(--deep);  --fg: var(--on-deep);  --big: var(--on-deep);  --acc: var(--deep-accent);  --star: var(--star-d); --rd: var(--on-deep); }
/* long-form reading text takes the reading ink */
.lede, .bio-text, .cv-role, .entry-side .lede { color: var(--rd, inherit); }
.nw { white-space: nowrap; }
main:focus { outline: none; }
.f-paper, .f-block, .f-deep {
  background: var(--bg); color: var(--fg);
  --pill-bg: var(--fg); --pill-fg: var(--bg);
  --rule: color-mix(in srgb, var(--fg) 24%, transparent);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; }
a, button, label { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text-f); font-size: 19px; line-height: 1.55; font-optical-sizing: auto;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }
@media (max-width: 720px) { body { font-size: 18px; } }
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
:focus-visible { outline: 3px solid var(--fg, var(--ink)); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip { position: absolute; left: var(--g); top: -80px; z-index: 300; background: var(--fg); color: var(--bg); padding: .6em 1em; border-radius: 999px; font-family: var(--disp-f); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- the star (quiet brand glyph) ---------- */
.star {
  display: inline-block; width: .62em; height: .62em; flex: none;
  background: var(--star, var(--star-p));
  -webkit-mask: var(--star-svg) center / contain no-repeat; mask: var(--star-svg) center / contain no-repeat;
  vertical-align: .02em;
}

/* ---------- type primitives ---------- */
.page-title, .sec-title, .g-word, .menu-words a, .course-t, .cv-org, .foot-big, .mc-title, .entry-title {
  font-family: var(--disp-f); font-optical-sizing: auto; text-transform: lowercase;
}
.eyebrow {
  font-family: var(--disp-f); font-weight: 650; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .55em; margin: 0;
}
.eyebrow .star { width: 1em; height: 1em; }
.lede { font-family: var(--text-f); font-size: clamp(1.3rem, 2.1vw, 2rem); line-height: 1.26; font-weight: 400; margin: 0; max-width: 25em; text-wrap: pretty; }
/* Arrows are drawn (Bricolage has no ↗ or →). The stroke matches the stems of the text beside it
   (--aw: .11em at weight 500, .127em at 600–650), the ↗ sits with its top on the cap height (.66em). */
.arw { display: inline-block; width: .62em; height: .62em; vertical-align: .07em; margin-left: .18em; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: var(--aw, .125em); stroke-linecap: round; stroke-linejoin: round; }
.arw path { vector-effect: non-scaling-stroke; }
.arw--r { width: .9em; height: .8em; vertical-align: -.08em; }
/* links that carry ↗: the words are underlined (.u); the arrow sits outside the line. One underline recipe site-wide. */
.u { text-decoration: underline; text-decoration-thickness: max(2px, .06em); text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color var(--dur-s) var(--ease-out); }
a:focus-visible .u { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { a:hover .u { text-decoration-color: currentColor; } }

/* ---------- pills ---------- */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.35em;
  border-radius: 999px; border: 2px solid currentColor;
  background: transparent; color: inherit; cursor: pointer;
  font-family: var(--disp-f); font-weight: 600; font-size: 1rem; line-height: 1.1; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; --aw: .127em;
  transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}
/* the lifted pill keeps its hit area under the pointer (no hover flicker at its bottom edge) */
.pill::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; }
.pill .arw { margin-left: 0; }
.pill--solid { background: var(--pill-bg); color: var(--pill-fg); border-color: var(--pill-bg); }
.pill:focus-visible { transform: translateY(-2px); }
.pill:active { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { transform: translateY(-2px); }
  .pill:not(.pill--solid):hover { background: var(--pill-bg); border-color: var(--pill-bg); color: var(--pill-fg); }
  .pill--solid:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
}
/* header and overlay corner pills: one box, so "menu" and "close" sit in exactly the same place */
.corner-pill { min-height: 44px; min-width: 118px; padding: 0 1.15em; gap: .6em; text-transform: lowercase; }
.corner-pill .bars, .corner-pill .xmark { width: 18px; height: 18px; position: relative; display: inline-block; flex: none; }
.corner-pill .bars::before, .corner-pill .bars::after, .corner-pill .xmark::before, .corner-pill .xmark::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-s) var(--ease-out); }
.corner-pill .bars::before { top: 4px; } .corner-pill .bars::after { bottom: 4px; }
.corner-pill .xmark::before, .corner-pill .xmark::after { top: 8px; }
.corner-pill .xmark::before { transform: rotate(45deg); } .corner-pill .xmark::after { transform: rotate(-45deg); }
.menu-btn:focus-visible .bars::before { transform: translateX(3px); } .menu-btn:focus-visible .bars::after { transform: translateX(-3px); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover .bars::before { transform: translateX(3px); } .menu-btn:hover .bars::after { transform: translateX(-3px); } }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .pill { white-space: normal; text-align: center; } }

/* small text links (Instagram, Substack…) */
.tlinks { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; list-style: none; font-family: var(--disp-f); font-weight: 600; font-size: var(--fs-m); --aw: .127em; }
.tlinks a { display: inline-block; line-height: 44px; min-height: 44px; text-decoration: none; white-space: nowrap; }

/* ==========================================================================
   Header + menu
   ========================================================================== */
.top {
  height: var(--head-h); display: flex; align-items: center; gap: 18px;
  padding: 0 var(--g); position: relative; z-index: 20;
}
.logo { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; text-decoration: none; font-family: var(--disp-f); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; font-stretch: 90%; margin-right: auto; white-space: nowrap; }
.logo .star { width: .95em; height: .95em; transition: transform var(--dur-l) var(--ease); }
.logo:focus-visible .star { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .logo:hover .star { transform: rotate(180deg); } }
.top-nav { display: flex; gap: clamp(12px, 1.5vw, 24px); font-family: var(--disp-f); font-weight: 500; font-size: 1.02rem; margin-right: clamp(4px, 1vw, 16px); }
.top-nav a { text-decoration: none; position: relative; padding: .3em 0; display: inline-flex; align-items: center; min-height: 44px; text-transform: lowercase; white-space: nowrap; }
/* the nav bar uses the same weight and offset as every underline: max(2px, .06em), about .2em under the baseline */
.top-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: max(2px, .06em); border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-m) var(--ease-out); }
.top-nav a[aria-current="page"]::after, .top-nav a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .top-nav a:hover::after { transform: scaleX(1); } }
@media (max-width: 1180px) { .top-nav { display: none; } }


/* palette picker: a small pill of swatches */
.picker { display: inline-flex; align-items: center; gap: 2px; padding: 0 3px; border-radius: 999px; border: 2px solid var(--rule); }
.sw { position: relative; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.sw-dot {
  width: 24px; height: 24px; border-radius: 50%; display: block; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent);
  transition: transform .35s var(--ease-out), box-shadow .25s var(--ease-out);
}
.sw-dot::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; right: 3px; bottom: 3px; background: var(--sw-c); }
@media (hover: hover) and (pointer: fine) { .sw:hover .sw-dot { transform: rotate(-20deg); } }
.sw[aria-pressed="true"] .sw-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.sw-name {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); opacity: 0; pointer-events: none;
  background: var(--fg); color: var(--bg); font-family: var(--disp-f); font-weight: 600; font-size: var(--fs-xs); line-height: 1; padding: .5em .8em; border-radius: 999px; white-space: nowrap;
  transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); z-index: 5;
}
@media (hover: hover) and (pointer: fine) { .top .sw:hover .sw-name { opacity: 1; transform: translate(-50%, 0); } }
.top .sw:focus-visible .sw-name { opacity: 1; transform: translate(-50%, 0); }
.top .sw.tip-off .sw-name { opacity: 0 !important; transition: none !important; } /* hidden from the moment of a pick */
.sw:focus-visible { outline-offset: 0; border-radius: 50%; }
.sw[data-p="tomato"]    { --sw-a: #F5F0E4; --sw-b: #C4340F; --sw-c: #D8F5BE; }
.sw[data-p="eggplant"] { --sw-a: #33173D; --sw-b: #4A2258; --sw-c: #CDB8FF; }
.sw[data-p="butter"]    { --sw-a: #F6E3A1; --sw-b: #2B1E16; --sw-c: #D2421F; }
.top .picker { margin-right: 4px; }
@media (pointer: coarse) { .sw { width: 44px; height: 40px; } }
@media (max-width: 720px) { .top .picker { display: none; } }

/* the menu: the six pages in giant type */
.menu {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  padding: 0 var(--g) calc(var(--g) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu.is-open { animation: menuIn var(--dur-l) var(--ease-out) both; }
.menu.is-closing { animation: menuOut var(--dur-m) var(--ease-out) both; }
@keyframes menuIn { from { clip-path: circle(0px at var(--ox, calc(100% - 70px)) var(--oy, 38px)); } to { clip-path: circle(160vmax at var(--ox, calc(100% - 70px)) var(--oy, 38px)); } }
@keyframes menuOut { from { clip-path: circle(160vmax at var(--ox, calc(100% - 70px)) var(--oy, 38px)); } to { clip-path: circle(0px at var(--ox, calc(100% - 70px)) var(--oy, 38px)); } }
.menu .top { padding: 0; flex: none; }
.menu-words { display: flex; flex-direction: column; margin: clamp(8px, 3vh, 40px) 0 clamp(20px, 4vh, 40px); }
.menu-words a {
  font-weight: 600; font-stretch: 88%; letter-spacing: -.03em; line-height: .96; text-decoration: none;
  font-size: clamp(2.8rem, min(18.5vw, 10.6svh), 9rem); display: flex; align-items: baseline; gap: .12em; width: max-content; max-width: 100%;
  transition: transform var(--dur-m) var(--ease-out);
}
.menu.is-open .menu-words a { animation: rise var(--dur-l) var(--ease-out) backwards; animation-delay: calc(var(--i) * 45ms + 100ms); }
.menu-words a:focus-visible { transform: translateX(.06em); }
@media (hover: hover) and (pointer: fine) { .menu-words a:hover { transform: translateX(.06em); } }
@media (min-width: 721px) {
  .menu-words { flex-direction: row; flex-wrap: wrap; column-gap: .3em; row-gap: .02em; align-content: flex-start; font-size: min(9.4vw, 15.5svh); }
  .menu-words a { font-size: 1em; }
}
.menu-words a sup { font-size: max(var(--sup-min), .22em); font-weight: 600; font-stretch: 100%; line-height: 1; letter-spacing: 0; color: var(--acc); font-variant-numeric: tabular-nums; align-self: flex-start; margin-top: .9em; }
.menu-words a[aria-current="page"] { font-weight: 800; font-stretch: 78%; }
.menu-words a[aria-current="page"]::before { content: ""; width: .32em; height: .32em; align-self: center; position: relative; top: .064em; background: var(--acc); -webkit-mask: var(--star-svg) center / contain no-repeat; mask: var(--star-svg) center / contain no-repeat; margin-right: .08em; }
.menu-foot .picker-wrap { display: flex; flex-direction: column; gap: 8px; }
.menu-foot .lbl { font-family: var(--disp-f); font-weight: 650; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
/* in the menu the names are always visible; the pill's ends sit well clear of "Tomato" and "Butter" */
.menu .picker { padding: 0 16px; }
.menu .sw { width: 64px; height: 66px; border-radius: 16px; align-content: start; padding-top: 10px; }
.menu .sw .sw-dot { width: 28px; height: 28px; }
.menu .sw .sw-name { position: static; transform: none; opacity: 1; background: none; color: inherit; padding: 6px 0 0; font-size: var(--fs-2xs); font-weight: 600; transition: none; }
.menu .sw[aria-pressed="true"] .sw-name { text-decoration: underline; text-decoration-thickness: max(2px, .06em); text-underline-offset: .2em; }
/* while the menu is open (from the moment its wipe covers the screen) the page ground is the menu's colour:
   Safari falls back to it for its bars during the palette switch's two hidden frames. WebKit lays the body's
   background over the html's for that colour, so both change. */
html.menu-ground, html.menu-ground body { background: var(--deep); }
/* the static stand-in for the menu during those two frames (absolute, so Safari doesn't sample it) */
.menu-ghost { position: absolute; inset: auto; z-index: 199; animation: none !important; clip-path: none !important; } /* taps on it go to the live menu (main.js) */
.menu-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: last baseline; gap: 18px 28px; border-top: 2px solid var(--rule); padding-top: 16px; }

/* ==========================================================================
   Home: giant index + name field + bio
   ========================================================================== */
.home-top { padding-bottom: clamp(8px, 1.4vw, 20px); }
.giant {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: nowrap;
  padding: 0 var(--g); margin: 0; white-space: nowrap;
  font-size: 4.36vw; column-gap: .34em; line-height: .92;
  color: var(--big);
}
.giant:empty { min-height: 1.06em; }
.g-word {
  flex: none; position: relative; text-decoration: none;
  font-weight: 560; font-stretch: 100%; letter-spacing: -.045em;
  display: inline-flex; align-items: baseline; padding: .04em 0 .1em;
  transition: opacity var(--dur-m) var(--ease-out), color var(--dur-s) var(--ease-out);
}
.g-word:first-child { margin-left: calc(var(--lsb, .016em) * -1); } /* optical: the first letter's ink sits on the gutter */
.g-txt { display: inline-block; }
.g-word .ch { display: inline-block; transition: transform var(--dur-m) var(--ease-out), font-weight var(--dur-m) var(--ease-out), font-stretch var(--dur-m) var(--ease-out); transition-delay: calc(var(--i) * 28ms); font-weight: inherit; font-stretch: inherit; }
/* counts: left-anchored just after the word, digit tops on the ascender line */
.g-word--n { padding-right: .3em; }
.g-word sup { position: absolute; left: calc(100% - .3em); top: .45em; /* (em of the superscript itself) */ margin-left: .05em; font-size: max(var(--sup-min), .22em); font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--acc); font-variant-numeric: tabular-nums; line-height: 1; }
.giant:has(.g-word:focus-visible) .g-word { opacity: .3; }
.giant .g-word:focus-visible { opacity: 1; }
.g-word:focus-visible .ch { transform: translateY(-.09em); font-weight: 800; font-stretch: 78%; }
.g-word:focus-visible .ch:nth-child(odd) { transform: translateY(-.13em); }
@media (hover: hover) and (pointer: fine) {
  .giant:hover .g-word { opacity: .3; }
  .giant .g-word:hover { opacity: 1; }
  .g-word:hover .ch { transform: translateY(-.09em); font-weight: 800; font-stretch: 78%; }
  .g-word:hover .ch:nth-child(odd) { transform: translateY(-.13em); }
}
@media (max-width: 720px) {
  .giant { flex-direction: column; align-items: flex-start; row-gap: 0; padding-top: 4px; padding-bottom: 10px; font-size: 16.4vw; }
  .giant:empty { min-height: calc(6 * 1.08em); }
  .giant:has(.g-word:focus-visible) .g-word { opacity: 1; }
  .g-word { padding-top: .02em; padding-bottom: .06em; }
  .g-word sup { top: .3em; }
}

/* name field: "erika" with her line beside it, then the plate and "houle"; sized to its content */
.name-field {
  --pad-t: clamp(32px, 5vh, 64px);
  position: relative; overflow-x: clip;
  padding: var(--pad-t) var(--g) clamp(36px, 5vh, 64px);
  /* the lockup, then her line beside "houle", sharing its baseline */
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 48px); align-items: last baseline;
}
.lockup { position: relative; font-size: clamp(5rem, min(17vw, 28vh), 19rem); line-height: .84; padding-bottom: calc(.5em + 44px); }
.name { margin: 0; font-size: 1em; line-height: .84; font-weight: 400; display: flex; flex-direction: column; color: var(--big); }
.name .n1 { font-family: var(--disp-f); font-weight: 800; font-stretch: 76%; letter-spacing: -.012em; text-transform: lowercase; }
/* the italic e leans past the end of its box; the extra end padding (taken back by the margin, so nothing moves)
   keeps it inside the layer Safari paints "houle" on while it rises in, or the e's tip is cut off */
.name .n2 { font-family: var(--text-f); font-style: italic; font-weight: 300; letter-spacing: -.04em; padding-left: 1.5em; padding-right: .25em; margin-right: -.25em; text-transform: lowercase; }
.name-side { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.line { font-family: var(--text-f); font-size: clamp(1.4rem, 2.2vw, 2.2rem); line-height: 1.14; margin: 0; max-width: 13em; font-weight: 400; text-wrap: balance; }
/* her line stays beside "houle" down to the phone layout, where it moves under the name */
@media (max-width: 720px) { .name-field { grid-template-columns: 1fr; } .name-side { margin-top: 8px; } }
.line i { font-weight: 300; }

/* the plate: a real overhead plate, cut to a circle, turning slowly */
.plate-wrap { position: absolute; left: .02em; top: .8em; width: 1.35em; }
.plate {
  position: relative; display: block; width: 100%; aspect-ratio: 1; height: auto;
  border: 0; padding: 0; margin: 0; border-radius: 50%; background: transparent; cursor: grab;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; /* vertical swipes still scroll the page */
  font-size: inherit; line-height: 0;
}
.plate.is-grab { cursor: grabbing; }
html.rm .plate { cursor: pointer; }
.plate:focus-visible { outline: 3px solid var(--fg); outline-offset: 6px; border-radius: 50%; }
.plate-lift { position: absolute; inset: 0; border-radius: 50%; transition: transform .5s var(--ease-out); }
.plate-shadow {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--rim),
    0 .006em .01em rgba(var(--sh), calc(.22 * var(--sh-a))),
    0 .02em .04em -.01em rgba(var(--sh), calc(.26 * var(--sh-a))),
    0 .09em .16em -.05em rgba(var(--sh), calc(.42 * var(--sh-a)));
  transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.plate-spin { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.disc {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--dish, #d8d0c2);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.disc img {
  position: absolute; max-width: none; width: var(--pw); height: var(--ph); left: var(--pl); top: var(--pt);
  -webkit-user-drag: none; pointer-events: none;
}
.disc.is-back { opacity: 0; }
/* glaze: a fixed highlight and the thickness of the rim; it does not turn with the plate */
.plate-glaze {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(120% 120% at 28% 18%, rgba(255, 255, 255, .16), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -.012em .02em rgba(40, 20, 0, .16), inset 0 .008em .008em rgba(255, 255, 255, .3);
}
/* the swap: the plate is lifted, cleared, and the next one is set down */
.plate.is-swap .plate-lift { transform: translateY(-.025em) scale(1.045); }
.plate.is-swap .plate-shadow { box-shadow: 0 0 0 1px var(--rim), 0 .02em .03em rgba(var(--sh), calc(.18 * var(--sh-a))), 0 .07em .1em -.02em rgba(var(--sh), calc(.22 * var(--sh-a))), 0 .2em .3em -.1em rgba(var(--sh), calc(.4 * var(--sh-a))); }
/* the old dish stays opaque under the new one (no double exposure), and is hidden once covered */
.disc.is-in { animation: setDown .7s var(--ease-out) both; }
@keyframes setDown { from { opacity: 0; transform: scale(.94); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.plate-cap {
  margin: 14px 0 0; font-family: var(--disp-f); font-size: var(--fs-s); font-weight: 600; line-height: 1.25; text-align: center; letter-spacing: 0;
  color: var(--fg); text-wrap: balance;
}
.plate-cap .t { display: block; transition: opacity var(--dur-s) var(--ease-out); }
.plate-cap .t.is-out { opacity: 0; }
.plate-cap .hint { display: block; font-weight: 500; font-family: var(--text-f); font-style: italic; transition: opacity var(--dur-l) var(--ease-out); }
.plate-cap .hint.gone { opacity: 0; }
html.ready:not(.rm) .plate-wrap { animation: plateIn 1.3s var(--ease-out) .25s backwards; }
@keyframes plateIn { from { transform: translateY(-.12em) scale(1.08); opacity: 0; } }

@media (max-width: 720px) {
  /* phone: the plate sits beside "erika" and bleeds off the right edge */
  .name-field { --bleed: 12vw; padding-top: 28px; padding-bottom: 36px; }
  .lockup { font-size: clamp(4rem, 22vw, 8rem); padding-bottom: calc(.45em + 54px); }
  .name .n2 { padding-left: .15em; margin-left: -.15em; margin-top: .04em; } /* (the h's foot leans left the same way) */
  .plate-wrap { left: auto; right: calc(var(--bleed) * -1); top: -.2em; width: min(2.3em, 58vw); }
  /* the caption reaches left under "houle"'s line (free space) so long names fit; it wraps, balanced, before it
     would pass the gutter */
  .plate-cap { font-size: 13px; margin-top: 8px; text-align: right; padding-right: var(--bleed); margin-left: -42vw; }
  .name-side { position: static; width: auto; }
}

/* bio */
.bio { padding: clamp(64px, 10vw, 150px) var(--g) clamp(64px, 9vw, 140px); }
.bio-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.home-photo { margin: 0; padding-top: .4em; }
.hp-arch {
  border-radius: 999px 999px 16px 16px; overflow: hidden; aspect-ratio: 4 / 5; transform: rotate(-1.5deg); background: var(--rule);
  box-shadow: 0 1px 2px rgba(var(--sh), .2), 0 8px 16px -6px rgba(var(--sh), .28), 0 34px 60px -24px rgba(var(--sh), .5);
  transition: transform .8s var(--ease-out);
}
.hp-arch img { width: 100%; height: 100%; object-fit: cover; }
/* a photo that opens the viewer: the button fills its frame; the frame draws the focus ring, so it follows the shape */
.ph-btn { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ph-btn img { display: block; }
.ph-btn:focus-visible { outline: none; }
:is(.hp-arch, .frame, figure):has(> .ph-btn:focus-visible) { outline: 3px solid var(--fg); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .home-photo:hover .hp-arch { transform: rotate(0deg) translateY(-4px); } }
.hp-arch:has(> .ph-btn:focus-visible) { transform: rotate(0deg) translateY(-4px); }
.home-photo figcaption { margin-top: 16px; font-family: var(--disp-f); font-weight: 600; font-size: var(--fs-s); line-height: 1.3; max-width: 22em; text-wrap: balance; }
.bio-in.no-photo { grid-template-columns: minmax(0, 1fr); }
.bio-text p { margin: 0 0 .9em; max-width: min(27em, 66ch); text-wrap: pretty; font-size: clamp(1.4rem, 2.35vw, 2.3rem); line-height: 1.3; font-weight: 400; }
.bio-text p:first-child::first-line { font-weight: 500; }
.bio-text p:last-child { font-style: italic; font-weight: 300; margin-bottom: 0; text-wrap: balance; }
.bio-text p + p:not(:last-child) { font-size: clamp(1.2rem, 1.75vw, 1.7rem); line-height: 1.4; max-width: 32em; }
@media (max-width: 860px) {
  .bio-in { grid-template-columns: 1fr; }
  .home-photo { position: static; order: 2; padding-top: 0; max-width: 420px; width: 88%; margin: 8px auto 0; }
}

/* ==========================================================================
   Inner page hero
   ========================================================================== */
.hero { padding: clamp(4px, 1vw, 16px) var(--g) clamp(36px, 5vw, 72px); position: relative; }
.page-title {
  margin: 0; font-weight: 640; font-stretch: 86%; letter-spacing: -.05em; line-height: .84; padding-bottom: .1em;
  white-space: nowrap; font-size: clamp(4rem, 21vw, 20rem); color: var(--big);
}
.fit-in { display: inline-block; }
/* optical: pull big words left by their first letter's measured side bearing (--lsb, set per word), so the ink sits on the gutter */
.page-title .fit-in, .foot-big .fit-in { margin-left: calc(var(--lsb, .016em) * -1); }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--g); margin-top: clamp(20px, 3vw, 44px); align-items: end; }
.hero-row .lede { justify-self: end; }
.hero-meta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero--side { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--g); align-items: last baseline; }
.hero--side .hero-row { margin-top: 0; grid-template-columns: 1fr; gap: 22px; padding-top: clamp(28px, 4vw, 64px); }
.hero--side .hero-meta:empty { display: none; }
.hero--side .hero-meta { order: 2; }
.hero--side .lede { justify-self: start; }
@media (max-width: 800px) { .hero--side { display: block; } .hero--side .hero-row { margin-top: clamp(20px, 3vw, 44px); padding-bottom: 0; } }
@media (max-width: 800px) { .hero-row { grid-template-columns: 1fr; } .hero-row .lede { justify-self: start; } }

/* entrance */
/* One reveal moment: header, page and footer stay hidden (layout kept) until main.js has rendered,
   the fonts are in and big type is fitted. */
html.js:not(.ready) #top, html.js:not(.ready) #main, html.js:not(.ready) #foot { visibility: hidden; }
html.ready .rise { animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
html.arrived .rise { animation-duration: var(--dur-m); animation-delay: 0s; }
/* Arriving from a word transfer (set by the inline head script, before first paint): the veil in this
   page's hero colour, with the title above it at the size the old page landed it on. */
html.arriving body::after { content: ""; position: fixed; inset: 0; z-index: 30; background: var(--arrive-bg); pointer-events: none; transition: opacity var(--dur-m) var(--ease-out); }
html.arrive-fade body::after { opacity: 0; }
html.arriving-word .page-title:not(.fitting) { position: relative; z-index: 31; visibility: visible; font-size: var(--arrive-fs) !important; }
@keyframes rise { from { transform: translateY(22px); } to { transform: none; } }
.title-in .fit-in { transform-origin: 0 100%; }
html.ready .title-in .fit-in { animation: titleIn .9s var(--ease-out) both; }
@keyframes titleIn { from { transform: translateY(.1em) scaleY(.9); } to { transform: none; } }
html.arrived .title-in .fit-in { animation: none !important; }

/* word transfer between pages */
.xfer-veil { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.xfer-word { position: fixed; z-index: 401; margin: 0; pointer-events: none; white-space: nowrap; transform-origin: 0 0; }
.arrive-veil { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.over-veil { position: relative; z-index: 31; }
.probe { position: fixed; left: 0; right: 0; top: 0; padding-top: var(--head-h); visibility: hidden; pointer-events: none; z-index: -1; }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec { padding: clamp(48px, 7vw, 110px) var(--g); position: relative; }
.sec + .sec.f-paper.join, .sec.join { padding-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: var(--sec-gap); }
.sec-title { text-wrap: balance; margin: 0; font-weight: 640; font-stretch: 86%; letter-spacing: -.05em; line-height: .86; font-size: clamp(3rem, 8vw, 8rem); display: flex; align-items: flex-start; gap: .1em; color: var(--big); }
.sec-title sup { font-size: max(var(--sup-min), .22em); font-weight: 600; font-stretch: 100%; line-height: 1; letter-spacing: 0; color: var(--acc); margin-top: .1em; font-variant-numeric: tabular-nums; }
/* a title long enough to wrap on a phone: plain text, so the count follows the last word instead of the far edge */
.sec-title--wrap { display: block; }
.sec-title--wrap sup { vertical-align: top; position: relative; top: .1em; margin-left: .1em; }
.sec-title--md { font-size: clamp(2.5rem, 5.4vw, 5rem); }
.sec-note { max-width: 26em; margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; }

/* cursor peek (from 07): an oval card trailing the pointer over big lists. The box never changes size; the
   oval inside it eases between tall and wide, and the shadow follows the shape. The oval is the photo's own
   rounded box (not a clip over a bigger photo): Safari dropped that clip now and then while the card moved, and
   sizing the photo to the oval keeps its focus point (a face) inside the part that shows. */
.peek {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 400px; height: 380px; opacity: 0; transform: translate(-600px, -600px); scale: .6;
  transition: opacity var(--dur-s) var(--ease-out), scale var(--dur-m) var(--ease-out);
  filter: drop-shadow(0 16px 22px rgba(var(--sh), calc(.3 * var(--sh-a))));
}
.peek.on { opacity: 1; scale: 1; }
.peek-in {
  position: absolute; inset: 0 50px; border-radius: 999px; background: var(--deep);
  transition-property: top, right, bottom, left; transition-duration: var(--dur-m); transition-timing-function: var(--ease-out);
}
.peek.wide .peek-in { inset: 65px 0; }
.peek-in > * { border-radius: inherit; }
.peek-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.peek .peek-type {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 30px;
  background: var(--deep); color: var(--on-deep); --star: var(--star-d);
  font-family: var(--disp-f); font-weight: 700; font-stretch: 86%; font-size: 2.3rem; line-height: 1; letter-spacing: -.03em; text-wrap: balance;
}
.peek .peek-type .star { width: 1.2em; height: 1.2em; margin: 0 auto 12px; display: block; }

/* ==========================================================================
   Information
   ========================================================================== */
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.portrait { margin: 0; position: sticky; top: 24px; }
.portrait .frame { border-radius: 999px; overflow: hidden; aspect-ratio: 3 / 4.2; background: var(--rule); }
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .portrait .frame:hover img { transform: scale(1.03); } }
.cv { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.cv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: baseline; padding: clamp(14px, 1.7vw, 24px) 0; border-bottom: 2px solid var(--rule); }
.cv-org { text-wrap: balance; font-weight: 600; font-stretch: 90%; letter-spacing: -.04em; line-height: .96; font-size: clamp(2rem, 4.3vw, 4.3rem); margin: 0; }
.cv-role { grid-column: 1; font-family: var(--text-f); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.25; margin: 0; }
.cv-yrs { margin: 0; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--disp-f); font-weight: 600; font-size: var(--fs-l); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) {
  .info-grid { grid-template-columns: 1fr; }
  .portrait { position: static; max-width: 420px; }
  .portrait .frame { aspect-ratio: 4 / 3.2; }
}
@media (max-width: 560px) {
  .cv li { grid-template-columns: 1fr; }
  .cv-yrs { grid-column: 1; grid-row: auto; }
}

/* 21 clients: 7 or 3 columns, so every row is full */
.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid currentColor; }
@media (max-width: 1100px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.client { display: grid; place-items: center; min-height: clamp(96px, 9vw, 132px); padding: 18px 16px; border-bottom: 2px solid var(--rule); border-right: 2px solid var(--rule); text-align: center; }
/* logos keep one optical size at every width: sized in px from their proportions (main.js), capped by the cell */
.client .lg { display: block; width: min(var(--lw, 96px), 92%); aspect-ratio: var(--ar, 3); background: currentColor; -webkit-mask: var(--lg) center / contain no-repeat; mask: var(--lg) center / contain no-repeat; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .client:hover .lg { transform: scale(1.06); } }
.client .cn { font-family: var(--disp-f); font-weight: 650; font-stretch: 86%; letter-spacing: -.02em; line-height: 1.02; font-size: clamp(.92rem, 1.25vw, 1.25rem); text-wrap: balance; overflow-wrap: anywhere; }
@media (max-width: 560px) { .client { padding: 14px 6px; min-height: 92px; } }

/* ==========================================================================
   Food: course filters + carousel + clips
   ========================================================================== */
.courses { display: flex; flex-wrap: wrap; gap: 0 .5em; margin: 0 0 clamp(20px, 2.6vw, 40px); padding: 0; font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1; }
@media (min-width: 721px) { .courses { flex-wrap: nowrap; justify-content: space-between; column-gap: .4em; white-space: nowrap; } }
.food-sec { padding-top: clamp(28px, 3.6vw, 56px); }
.course {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: baseline; gap: .06em;
  min-height: 48px; padding: .06em 0 .12em; position: relative; color: var(--fg);
}
.course-t { position: relative; display: inline-block; font-weight: 340; font-stretch: 94%; letter-spacing: -.045em; white-space: nowrap; transition: font-weight var(--dur-m) var(--ease-out), font-stretch var(--dur-m) var(--ease-out); }
.course sup { font-family: var(--disp-f); font-size: max(var(--sup-min), .26em); font-weight: 600; font-stretch: 100%; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--acc); align-self: flex-start; margin-top: .35em; }
/* ≥721px: the count is pinned where it sits at rest (main.js), so heavier words never move it */
.course.pin sup { position: absolute; margin-top: 0; }
.course.measure-wide .course-t { font-weight: 800; font-stretch: 94%; transition: none; }
.course:focus-visible .course-t { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .course:hover .course-t { font-weight: 600; } }
.course[aria-pressed="true"] .course-t { font-weight: 800; font-stretch: 78%; }
/* the active underline spans the word itself, not the word plus its count */
.course[aria-pressed="true"] .course-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .07em; border-radius: 1em; background: currentColor; animation: grow var(--dur-m) var(--ease-out) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.course:focus-visible { outline: 3px solid var(--fg); outline-offset: 4px; border-radius: 10px; }
@media (max-width: 720px) {
  .courses-wrap { margin: 0 calc(var(--g) * -1); position: sticky; top: 0; z-index: 6; background: var(--bg); padding-top: 6px; }
  .courses { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 8px var(--g) 8px; scroll-padding: 0 var(--g); font-size: 2.5rem; gap: 0 .55em; margin-bottom: 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--g), #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--g), #000 calc(100% - 44px), transparent); }
  .courses::-webkit-scrollbar { display: none; }
  .course { scroll-snap-align: start; flex: none; min-height: 56px; }
}

.deck { position: relative; }
.deck-track {
  position: relative; display: flex; gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin: -10px calc(var(--g) * -1) 0; padding: 10px var(--g) 10px; scroll-padding: 0 var(--g);
}
.deck-track::-webkit-scrollbar { display: none; }
.deck-track:focus-visible { outline: 3px solid var(--fg); outline-offset: -3px; border-radius: 12px; }
.deck-track.is-drag { scroll-snap-type: none; cursor: grabbing; }
.deck-track.is-drag * { pointer-events: none; }
.slide { flex: none; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.slide .ph { display: block; padding: 0; border: 0; background: var(--rule); cursor: pointer; border-radius: 0; }
.slide .ph:focus-visible { outline: 3px solid var(--fg); outline-offset: 4px; }
.slide[hidden] { display: none !important; }
.food-deck .slide .ph { height: clamp(200px, min(62svh, 46vw), 660px); overflow: hidden; background: var(--rule); }
.food-deck .slide img { height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .food-deck .slide:hover img { transform: scale(1.03); } }
.slide figcaption { font-family: var(--disp-f); font-weight: 600; font-size: .95rem; line-height: 1.2; letter-spacing: -.01em; display: flex; gap: .55em; align-items: baseline; max-width: 30em; }
.slide figcaption .n { font-variant-numeric: tabular-nums; font-weight: 500; }
.deck-ctrl[hidden] { display: none !important; }
.deck-ctrl { display: flex; align-items: center; gap: 12px; margin-top: clamp(14px, 2vw, 26px); }
.deck-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), opacity var(--dur-s) var(--ease-out); padding: 0; }
.deck-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.deck-btn:focus-visible:not(.is-off) { background: var(--fg); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .deck-btn:hover:not(.is-off) { background: var(--fg); color: var(--bg); } }
.deck-btn:active:not(.is-off) { transform: scale(.94); }
/* at an end the arrow dims but stays focusable (aria-disabled), so keyboard focus is never dropped */
.deck-btn.is-off { opacity: .35; cursor: default; }
.deck-n { font-family: var(--disp-f); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 5.2em; text-align: center; }
.deck-bar { flex: 1; height: 2px; background: var(--rule); position: relative; overflow: hidden; border-radius: 2px; }
.deck-bar i { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .3s var(--ease-out); }
.slide.deal { animation: deal .6s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes deal { from { opacity: 0; transform: translateX(46px) rotate(1.5deg); } }
.slide.leave { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity var(--dur-xs) var(--ease-out), transform var(--dur-xs) var(--ease-out); }
@media (max-width: 720px) {
  .deck-track { gap: var(--g); } /* no sliver of the previous slide at the left edge */
  .food-deck .slide { width: 78vw; }
  .food-deck .slide .ph { height: auto; aspect-ratio: 4 / 5; }
  .food-deck .slide img { width: 100%; height: 100%; }
  .deck-btn { width: 48px; height: 48px; }
}

.clips { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--g); }
.clips { position: relative; }
.clip { margin: 0; position: relative; }
/* .vid-clip holds the footage, clipped to the pill shape; the Sound pill sits on it but outside the clip,
   so its focus ring is never cut by the curve. The poster is .vid-clip's background (cover, at the clip's
   focus), over the poster's own colour while it loads; the video fades in over it once it has painted a
   frame (main.js adds .has-frame). */
.vid-pill { position: relative; border-radius: 999px; aspect-ratio: 5 / 6; }
.vid-clip {
  position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
  background-color: var(--clip-c, #7A6457); background-size: cover; background-repeat: no-repeat;
}
.vid-pill:has(.vid-play:focus-visible) { outline: 3px solid var(--fg); outline-offset: 3px; }
.vid-clip video { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-s) var(--ease-out); }
.vid-clip.has-frame video { opacity: 1; }
.vid-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* centred with `translate`, so the pill's own lift/press (`transform`) composes with it instead of replacing it */
.vid-sound {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0; min-height: 44px; padding: .45em 1em; gap: .45em;
  background: rgba(17, 17, 17, .62); color: #fff; border-color: transparent; font-size: .85rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--dur-s) var(--ease-out); /* on/off swaps colours at once (no grey-on-grey midpoint) */
}
/* focus: a white ring with a dark halo, legible over any footage and any palette */
.vid-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(17, 17, 17, .6); }
.vid-sound:focus-visible:active { transform: translateY(-2px); } /* a keyboard press doesn't drop it */
/* a forgiving hit area: near-misses toggle sound instead of pausing the clip */
.vid-sound::after { left: -10px; right: -10px; top: -10px; bottom: -10px; height: auto; }
/* sound on: the pill inverts */
.vid-sound[aria-pressed="true"] { background: #fff; color: #111; }
.vid-play, .vid-sound { touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  .pill.vid-sound:hover { background: rgba(17, 17, 17, .8); color: #fff; border-color: transparent; } /* (beats the generic pill hover) */
  .pill.vid-sound[aria-pressed="true"]:hover { background: #fff; color: #111; }
  .vid-sound:hover:active { transform: translateY(-2px); } /* a mouse press doesn't move it from under the pointer */
}
.vid-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; top: -1px; }
.vid-sound .i-on, .vid-sound[aria-pressed="true"] .i-off { display: none; }
.vid-sound[aria-pressed="true"] .i-on { display: block; }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; width: 100%; color: #fff; transition: opacity var(--dur-s) var(--ease-out); }
.vid-play:focus-visible { outline: none; }
.clip.is-playing .vid-play { opacity: 0; }
.clip.is-playing .vid-play:focus-visible { opacity: 1; }
.vid-play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(17, 17, 17, .6); display: grid; place-items: center; transition: background-color var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out); }
.vid-play:active span { transform: scale(.94); }
.vid-play svg { width: 22px; height: 22px; fill: #fff; }
/* ▶ (nudged right to its optical centre in the path) or ‖. ‖ shows only while the button is shown during
   play (focus, or hover with a mouse); when the button fades out, its glyph changes only once it's gone */
.vid-play .g-pause { visibility: hidden; }
.clip.is-playing .vid-play .g-play, .clip.is-playing .vid-play .g-pause { transition: visibility 0s linear var(--dur-s); }
.clip.is-playing .vid-play:focus-visible .g-play { visibility: hidden; transition-delay: 0s; }
.clip.is-playing .vid-play:focus-visible .g-pause { visibility: visible; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .vid-play:hover span { background: rgba(17, 17, 17, .78); }
  .clip.is-playing .vid-play:hover { opacity: 1; } /* hovering a playing clip: "click to pause" */
  .clip.is-playing .vid-play:hover .g-play { visibility: hidden; transition-delay: 0s; }
  .clip.is-playing .vid-play:hover .g-pause { visibility: visible; transition-delay: 0s; }
}
.clip figcaption { margin-top: 12px; font-family: var(--disp-f); font-size: var(--fs-m); line-height: 1.3; display: flex; flex-direction: column; gap: 0; --aw: .127em; }
.clip figcaption .ct { font-weight: 650; text-wrap: balance; }
.clip figcaption a { font-weight: 600; text-decoration: none; display: inline-block; line-height: 44px; min-height: 44px; align-self: flex-start; white-space: nowrap; }
@media (max-width: 720px) {
  .clips { display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; margin: -8px calc(var(--g) * -1) 0; padding: 8px var(--g) 10px; scroll-padding: 0 var(--g); scrollbar-width: none; }
  .clips::-webkit-scrollbar { display: none; }
  .clip { flex: none; width: 66vw; scroll-snap-align: start; }
}

/* full-screen gallery */
.gal { position: fixed; inset: 0; z-index: 250; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.gal[hidden] { display: none; }
/* the top bar matches the header, so "close" sits exactly where "menu" does */
.gal-top { height: calc(var(--head-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--g) 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gal-bot { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 12px var(--g) calc(14px + env(safe-area-inset-bottom, 0px)); }
.gal-n, .gal-t { margin: 0; font-family: var(--disp-f); font-weight: 600; font-size: var(--fs-m); line-height: 1.3; }
.gal-n { font-variant-numeric: tabular-nums; }
.gal-t { max-width: 32em; text-wrap: balance; }
.gal-ctrl { display: flex; gap: 12px; flex: none; }
.gal-ctrl .deck-btn[hidden] { display: none; }
.gal-stage { min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 var(--g); touch-action: pinch-zoom; overflow: hidden; }
.gal-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain; -webkit-user-select: none; user-select: none; }
/* landscape phones: the photo gets the whole height; the bars float over it */
@media (max-height: 500px) {
  .gal { grid-template-rows: minmax(0, 1fr); }
  .gal-stage { grid-row: 1; padding: 8px var(--g); }
  .gal-top, .gal-bot { position: absolute; left: 0; right: 0; pointer-events: none; }
  .gal-top { top: 0; height: 64px; } .gal-bot { bottom: 0; }
  .gal-top > *, .gal-bot > * { pointer-events: auto; }
}
/* pages (the Words pile, phones held upright): one printed page at a time, a native sideways scroll-snap between
   the two. Each page is the whole spread, clipped to its half (--pf of the width, a little past the spine), and
   fitted to the stage like a photo; the dots sit just under it (the stage is a size container for that). */
.gal-pages, .gal-dots { display: none; }
.gal.is-pages .gal-img { display: none; }
.gal.is-pages .gal-stage {
  position: relative; padding: 0; display: block; container-type: size; touch-action: pan-x pinch-zoom;
  --pw: min(calc(100cqw - 2 * var(--g)), calc((100cqh - 56px) * var(--pa, .8)));
}
.gal.is-pages .gal-pages {
  display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pinch-zoom;
}
.gal-pages::-webkit-scrollbar { display: none; }
.gal-page { flex: none; width: 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.gal-pbox { position: relative; overflow: hidden; width: var(--pw); aspect-ratio: var(--pa, .8); }
.gal-pimg { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% / var(--pf, .52)); max-width: none; -webkit-user-select: none; user-select: none; }
.gal-page.is-r .gal-pimg { left: auto; right: 0; }
/* (its placeholder colour would show behind the morphing spread) */
html.vt-open .gal-pbox, html.vt-close .gal-pbox { background-color: transparent !important; }
.gal.is-pages .gal-dots { display: flex; gap: 8px; position: absolute; left: 50%; top: calc(50% + var(--pw) / var(--pa, .8) / 2 + 16px); translate: -50% 0; pointer-events: none; }
.gal-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .32; transition: opacity var(--dur-s) var(--ease-out); }
.gal-dots i.on { opacity: 1; }
/* the card grows into the photo (and back): one image during the morph, never two crossfading */
::view-transition-group(gal-photo) { animation-duration: var(--dur-m); animation-timing-function: var(--ease-out); }
/* only one image is ever drawn: the viewer's photo. It is cropped like its frame (focus point), its corners
   ease between the frame's shape and square, and the group un-tilts the arch on the way out (and back). */
::view-transition-old(gal-photo), ::view-transition-new(gal-photo) { height: 100%; object-fit: cover; object-position: var(--vt-pos, 50% 50%); animation: none; mix-blend-mode: normal; }
html.vt-open::view-transition-old(gal-photo), html.vt-close::view-transition-new(gal-photo) { opacity: 0; }
html.vt-open::view-transition-new(gal-photo) { animation: vtUnclip var(--dur-m) var(--ease-out) both; }
html.vt-close::view-transition-old(gal-photo) { animation: vtClip var(--dur-m) var(--ease-out) both; }
@keyframes vtUnclip { from { clip-path: inset(0 round var(--vt-r)); } to { clip-path: inset(0 round 0px 0px 0px 0px); } }
@keyframes vtClip { from { clip-path: inset(0 round 0px 0px 0px 0px); } to { clip-path: inset(0 round var(--vt-r)); } }
/* pages: the whole spread grows out of the magazine and is cut down to the page that shows (--vt-cl / --vt-cr),
   and back; same proportions all the way, so nothing is squashed */
html.vt-page.vt-open::view-transition-new(gal-photo) { animation-name: vtUnclipPage; }
html.vt-page.vt-close::view-transition-old(gal-photo) { animation-name: vtClipPage; }
@keyframes vtUnclipPage { from { clip-path: inset(0 round var(--vt-r)); } to { clip-path: inset(0 var(--vt-cr, 0%) 0 var(--vt-cl, 0%) round 0px); } }
@keyframes vtClipPage { from { clip-path: inset(0 var(--vt-cr, 0%) 0 var(--vt-cl, 0%) round 0px); } to { clip-path: inset(0 round var(--vt-r)); } }
html.vt-lift.vt-open::view-transition-image-pair(gal-photo) { animation: vtDrop var(--dur-m) var(--ease-out) both; }
html.vt-lift.vt-close::view-transition-image-pair(gal-photo) { animation: vtDrop var(--dur-m) var(--ease-out) reverse both; }
@keyframes vtDrop {
  from { filter: drop-shadow(0 8px 10px rgba(var(--sh), .26)) drop-shadow(0 26px 30px rgba(var(--sh), .34)); }
  to { filter: drop-shadow(0 8px 10px rgba(var(--sh), 0)) drop-shadow(0 26px 30px rgba(var(--sh), 0)); }
}

/* ==========================================================================
   Words: the pile. Her printed spreads lie in a loose stack on the block band, which runs on into the
   footer's "say hello" (one field). main.js sets each magazine's place: a fixed offset and tilt per place in
   the pile, so it looks the same on every visit. Motion is transform and opacity only.
   ========================================================================== */
.pile-sec { overflow: clip; isolation: isolate; padding-top: clamp(64px, 8.4vw, 132px); padding-bottom: clamp(28px, 3vw, 44px); }
/* the pile sits under "words", its titles start where the intro does (the hero's columns) */
.pile-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--g); align-items: end; }
.pile { position: relative; z-index: 1; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.mag {
  position: absolute; display: block; padding: 0; margin: 0; border: 0; border-radius: 2px; background: none; color: inherit; font: inherit;
  transform-origin: 50% 50%;
  transition: transform var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out);
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.mag:not(.is-top) { pointer-events: none; }
.mag.is-top { cursor: grab; will-change: transform; } /* the one that follows the pointer frame by frame */
html.pile-grabbing, html.pile-grabbing * { cursor: grabbing !important; }
.mag:focus-visible { outline-offset: 5px; border-radius: 3px; }
.mag-in { position: absolute; inset: 0; display: block; border-radius: inherit; transition: transform var(--dur-s) var(--ease-out); }
/* a magazine lying on the one under it: a tight contact shadow and a soft spread; lifted, a longer one fades in */
.mag-in::before, .mag-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.mag-in::before {
  box-shadow:
    0 0 0 1px var(--rim),
    0 1px 1px rgba(var(--sh), calc(.26 * var(--sh-a))),
    0 3px 7px -1px rgba(var(--sh), calc(.22 * var(--sh-a))),
    0 14px 26px -8px rgba(var(--sh), calc(.32 * var(--sh-a))),
    0 34px 56px -26px rgba(var(--sh), calc(.42 * var(--sh-a)));
}
.mag-in::after {
  opacity: 0; transition: opacity var(--dur-s) var(--ease-out);
  box-shadow: 0 12px 22px -8px rgba(var(--sh), calc(.22 * var(--sh-a))), 0 44px 80px -30px rgba(var(--sh), calc(.5 * var(--sh-a)));
}
.mag img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; pointer-events: none; }
/* picked up: it lifts off the pile while it follows the pointer */
.mag.is-drag .mag-in { transform: translateY(-6px) scale(1.025); }
.mag.is-drag .mag-in::after { opacity: 1; }
.mag.is-top:focus-visible .mag-in { transform: translateY(-3px) scale(1.01); }
.mag.is-top:focus-visible .mag-in::after { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .mag.is-top:hover .mag-in { transform: translateY(-3px) scale(1.01); }
  .mag.is-top:hover .mag-in::after { opacity: .7; }
}
html.rm .mag .mag-in { transform: none !important; }

/* the caption: every title is also set, invisibly, in the same cell, so the cell is as tall as the longest and
   the buttons never move as the titles change. Beside the pile the caption sits on the buttons; under it, on top. */
.pile-side { min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 36px); }
.pile-caps { display: grid; }
.pile-cap { grid-area: 1 / 1; align-self: end; min-width: 0; transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out); }
.pile-cap.is-size { visibility: hidden; }
.pile-cap.is-on { transition-delay: 80ms; }
.pile-cap.is-in, .pile-cap.is-in-back { opacity: 0; transform: translateY(16px); transition: none; }
.pile-cap.is-in-back { transform: translateY(-16px); }
.pile-cap.is-out, .pile-cap.is-out-back { opacity: 0; transform: translateY(-12px); transition-duration: var(--dur-s); }
.pile-cap.is-out-back { transform: translateY(12px); }
.pile-t {
  margin: 0; font-family: var(--disp-f); font-optical-sizing: auto; font-weight: 700; font-stretch: 82%; letter-spacing: -.04em; line-height: .93;
  font-size: clamp(2.1rem, 4.1vw, 4.6rem); text-wrap: balance; color: var(--big);
}
.pile-t.is-long { font-size: clamp(1.7rem, 3.1vw, 3.5rem); line-height: .96; }
.pile-o { margin: .5em 0 0; font-family: var(--text-f); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.45vw, 1.4rem); line-height: 1.25; }
.pile-ctrl { display: flex; align-items: center; gap: 12px; }
.pile-next { min-height: 52px; }
@media (max-width: 900px) {
  /* the tilted magazines reach above the pile's box; below, the caption cell already keeps room for the longest title */
  .pile-sec { padding-top: clamp(68px, 12vw, 112px); padding-bottom: 12px; }
  .pile-wrap { grid-template-columns: minmax(0, 1fr); }
  /* room under the pile for the tilted magazines' corners */
  .pile { margin-bottom: clamp(30px, 6vw, 48px); }
  .pile-ctrl { order: -1; }
  .pile-cap { align-self: start; }
  .pile-t { font-size: clamp(2rem, 8.4vw, 3.5rem); }
  .pile-t.is-long { font-size: clamp(1.6rem, 6.4vw, 2.7rem); }
}
@media (max-width: 720px) { .pile-next { min-height: 48px; } }

/* ==========================================================================
   Archive
   ========================================================================== */
.entry-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px var(--g); align-items: end; }
.entry-title { margin: 0; font-weight: 640; font-stretch: 86%; letter-spacing: -.05em; line-height: .86; font-size: clamp(3rem, 7.4vw, 7.4rem); color: var(--big); text-wrap: balance; }
.entry-yrs { display: block; font-family: var(--disp-f); font-weight: 600; font-size: var(--fs-l); letter-spacing: 0; margin-bottom: 14px; font-variant-numeric: tabular-nums; text-transform: none; }
.entry-side { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
@media (max-width: 860px) { .entry-head { grid-template-columns: 1fr; } }

/* the typeset menus: printed arch-topped cards, each sized to its own menu */
.menu-deck .deck-track { align-items: flex-start; }
.menu-deck .slide { width: min(380px, 84vw); }
.menu-card {
  position: relative; background: var(--card); color: var(--card-read); --fg: var(--card-ink); --star: var(--card-star);
  padding: 30px clamp(22px, 2vw, 30px) 32px; text-align: center; border-radius: 999px 999px 16px 16px;
  display: flex; flex-direction: column; align-items: center; width: 100%;
  box-shadow: 0 22px 44px -26px rgba(var(--sh), calc(.55 * var(--sh-a)));
}
/* the printed frame: a 2px rule, concentric with the card (16px corner − 9px inset = 7px) */
.menu-card::before { content: ""; position: absolute; inset: 9px; border: 2px solid var(--card-ink); opacity: .32; border-radius: 999px 999px 7px 7px; pointer-events: none; }
.menu-card .mc-head { font-family: var(--disp-f); font-weight: 650; font-size: var(--fs-2xs); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; padding-top: 44px; color: var(--card-ink); }
.menu-card .mc-title { font-weight: 650; font-stretch: 84%; letter-spacing: -.035em; line-height: .95; font-size: clamp(1.9rem, 2.5vw, 2.35rem); margin: 0; text-wrap: balance; color: var(--card-ink); max-width: 8em; }
.menu-card .mc-note { font-family: var(--text-f); font-style: italic; font-size: 1.08rem; line-height: 1.3; margin: 8px 0 0; }
.menu-card .mc-star { width: 15px; height: 15px; margin: 16px auto 2px; display: block; }
.mc-body { width: 100%; }
.mc-sec { margin-top: 18px; width: 100%; }
.mc-h { font-family: var(--disp-f); font-weight: 650; font-size: var(--fs-2xs); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 7px; color: var(--card-ink); }
.mc-sec ul { list-style: none; margin: 0; padding: 0; }
.mc-sec li { font-family: var(--text-f); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.34; text-wrap: balance; }
.mc-sec li:nth-child(even) { font-style: italic; }
.mc-foot { margin: 0; padding-top: 18px; max-width: 21em; font-size: .86rem; line-height: 1.35; font-style: italic; }

.ph-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.ph-grid figure { margin: 0; overflow: hidden; }
.ph-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ph-grid figure:hover img { transform: scale(1.03); } }
.ph-grid .a { grid-column: 1 / span 5; aspect-ratio: 3 / 4; }
.ph-grid .b { grid-column: 6 / span 7; aspect-ratio: 3 / 2; margin-top: clamp(40px, 8vw, 120px); }
.ph-grid .c { grid-column: 2 / span 6; aspect-ratio: 3 / 2; }
.ph-grid .d { grid-column: 8 / span 5; aspect-ratio: 3 / 2; margin-top: clamp(30px, 6vw, 90px); }
.ph-grid .tall { aspect-ratio: 3 / 4; }
.ph-grid .pill-crop { border-radius: 999px; }
@media (max-width: 720px) {
  .ph-grid { grid-template-columns: 1fr 1fr; }
  .ph-grid .a, .ph-grid .b, .ph-grid .c, .ph-grid .d { grid-column: auto; margin-top: 0; }
  .ph-grid .b { aspect-ratio: 3 / 4; }
  .ph-grid .c { grid-column: 1 / -1; }
  .ph-grid .d { grid-column: 1 / -1; }
  /* phones: the menu deck's arrows sit above the cards, so short menus don't leave a gap above them */
  .menu-deck { display: flex; flex-direction: column; }
  .menu-deck .deck-ctrl { order: -1; margin: 0 0 14px; }
}
.ig-big { display: inline-flex; flex-direction: column; gap: 6px; text-decoration: none; }
.ig-k { font-family: var(--disp-f); font-weight: 650; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; gap: .55em; align-items: center; }
.ig-k .star { width: 1em; height: 1em; }
.ig-h { font-family: var(--disp-f); font-weight: 640; font-stretch: 86%; letter-spacing: -.045em; line-height: .9; font-size: clamp(2.5rem, 6vw, 6rem); color: var(--big); --aw: .127em; transition: transform var(--dur-m) var(--ease-out); }
.ig-h .arw { color: var(--fg); }
.ig-big:focus-visible .ig-h { transform: translateX(.06em); }
@media (hover: hover) and (pointer: fine) { .ig-big:hover .ig-h { transform: translateX(.06em); } }
.after-row { margin: 0; margin-top: clamp(28px, 4vw, 56px); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }

/* ==========================================================================
   Let's Eat
   ========================================================================== */
.eat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: end; }
.eat-grid figure { margin: 0; overflow: hidden; }
.eat-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .eat-grid figure:hover img { transform: scale(1.03); } }
.eat-grid .a { grid-column: 1 / span 4; aspect-ratio: 3 / 4; border-radius: 999px 999px 16px 16px; }
.eat-grid .b { grid-column: 5 / span 8; aspect-ratio: 3 / 2; }
.eat-grid .c { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.eat-grid .d { grid-column: 8 / span 5; aspect-ratio: 3 / 4; border-radius: 999px 999px 16px 16px; }
@media (max-width: 720px) {
  .eat-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .eat-grid .a, .eat-grid .d { grid-column: auto; }
  .eat-grid .b, .eat-grid .c { grid-column: 1 / -1; }
  .eat-grid .a { order: 1; } .eat-grid .d { order: 2; margin-top: 40px; } .eat-grid .b { order: 3; } .eat-grid .c { order: 4; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
/* the side column starts where the hero ledes (and the Words pile's titles) start */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--g); row-gap: 56px; align-items: start; }
/* the form starts level with the side cards' heads (their 2px rule + 18px padding) */
.contact-grid .form { padding-top: 20px; }
.form { display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); }
.form fieldset { border: 0; padding: 0; margin: 0; }
/* every small-caps label: one size, one weight */
.form legend, .form label.fl { font-family: var(--disp-f); font-weight: 650; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; display: block; padding: 0; }
.form legend { margin-bottom: 12px; }
.types { display: flex; flex-wrap: wrap; gap: 10px; }
.types label { position: relative; }
.types input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.types span { display: inline-flex; align-items: center; min-height: 48px; padding: .55em 1.15em; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--fg) 45%, transparent); font-family: var(--disp-f); font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: -.015em; transition: background-color var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .types label:hover span { border-color: currentColor; } }
.types input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.types input:focus-visible + span { outline: 3px solid var(--fg); outline-offset: 3px; }
/* label sits on its own field: 4px to the input, the input as tall as its text (label + input still ≥ 44px to tap) */
.field input, .field textarea {
  display: block; width: 100%; border: 0; border-bottom: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0;
  font-family: var(--text-f); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; padding: 0 0 .2em; min-height: 0;
}
/* where the text is small (phone), the input's box reaches up under its label to make a 44px target; the text stays put */
.field input { --reach: max(0px, calc(42.5px - 1.4em)); padding-top: var(--reach); margin-top: calc(var(--reach) * -1); }
.field label.fl { position: relative; z-index: 1; }
.field textarea { min-height: 5.2em; resize: vertical; font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-width: 4px; padding-bottom: calc(.2em - 2px); }
/* browser autofill (Safari's yellow, Chrome's blue) forces its own background and text colour with !important:
   paint the field's colours back over them, and keep the rule in the field's colour rather than currentColor
   (two rules: a browser that doesn't know one of the selectors would drop a shared rule) */
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg); border-bottom-color: var(--fg);
  -webkit-box-shadow: 0 0 0 100vmax var(--bg) inset; box-shadow: 0 0 0 100vmax var(--bg) inset;
}
.field input:autofill {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg); border-bottom-color: var(--fg);
  box-shadow: 0 0 0 100vmax var(--bg) inset;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 4.4vw, 64px) 26px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.err { font-family: var(--disp-f); font-size: var(--fs-s); font-weight: 650; color: var(--fg); margin: 8px 0 0; display: flex; gap: .45em; align-items: center; }
.err:empty { display: none; }
.err::before { content: "!"; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: .8em; line-height: 1; padding-bottom: .06em; box-sizing: border-box; flex: none; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-submit .pill { font-size: 1.15rem; min-height: 58px; padding: .8em 1.8em; }
.form-submit .note { font-family: var(--disp-f); font-size: var(--fs-s); font-weight: 500; text-wrap: pretty; }
.form-submit .err { flex-basis: 100%; margin: 0; }
.form-submit .pill[aria-busy="true"] { cursor: progress; opacity: .6; }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done { border: 2px solid currentColor; border-radius: 36px; padding: clamp(20px, 3vw, 36px); display: flex; gap: 16px; align-items: flex-start; }
.form-done:focus { outline: none; }
.form-done .pill { margin-top: 18px; }
.form-done .star { width: 1.6em; height: 1.6em; flex: none; margin-top: .2em; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-done p { margin: 0; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.3; }
.side-card { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px solid currentColor; align-items: flex-start; }
.side-card + .side-card { margin-top: 36px; }
.side-card h2 { margin: 0; }
.side-big { margin: 0; font-family: var(--disp-f); font-weight: 650; font-stretch: 86%; letter-spacing: -.04em; line-height: .95; font-size: clamp(2rem, 3.4vw, 3rem); text-transform: lowercase; text-wrap: balance; --aw: .127em; }
.side-big a { display: inline-block; min-height: 44px; text-decoration: none; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { padding: clamp(36px, 5vw, 72px) var(--g) calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot-big { display: block; text-decoration: none; white-space: nowrap; font-weight: 700; font-stretch: 80%; letter-spacing: -.06em; line-height: .85; font-size: clamp(4rem, 19vw, 19rem); margin: 0 0 clamp(20px, 3vw, 44px); color: var(--big); }
.foot-big .fit-in { display: inline-flex; align-items: center; gap: .08em; }
/* the star / plate sit on the x-height's centre, not the line box's, and lift with the letters on hover */
.foot-big .star { width: .5em; height: .5em; position: relative; top: .064em; transition: transform var(--dur-l) var(--ease-out); transition-delay: calc(var(--i, 0) * 24ms); }
/* the footer's small spinning plate, in place of the star after "say hello" */
.plate--mini { display: inline-block; position: relative; top: .107em; flex: none; font-size: .6em; width: 1em; height: 1em; margin-left: .1em; pointer-events: none; transition: transform var(--dur-m) var(--ease-out); transition-delay: calc(var(--i, 0) * 24ms); }
.foot-big .ch { display: inline-block; transition: transform var(--dur-m) var(--ease-out); transition-delay: calc(var(--i) * 24ms); }
.foot-big:focus-visible .ch { transform: translateY(-.06em); }
.foot-big:focus-visible .star { transform: translateY(-.06em) rotate(180deg) scale(1.1); }
.foot-big:focus-visible .plate--mini { transform: translateY(-.1em); }
@media (hover: hover) and (pointer: fine) {
  .foot-big:hover .ch { transform: translateY(-.06em); }
  .foot-big:hover .star { transform: translateY(-.06em) rotate(180deg) scale(1.1); }
  .foot-big:hover .plate--mini { transform: translateY(-.1em); }
}
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 12px 28px; flex-wrap: wrap; border-top: 2px solid currentColor; padding-top: 14px; font-family: var(--disp-f); font-size: var(--fs-m); font-weight: 500; }
.foot-menu { display: none; }
@media (max-width: 720px) { .foot-menu { display: inline-flex; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .disc { transition: opacity .45s var(--ease-out) !important; } /* the plate still changes with a fade */
  .pile .mag.is-fading { transition: opacity 200ms linear !important; } /* the pile swaps with a quick crossfade */
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-m); animation-timing-function: var(--ease-out); }
/* palette switch: the new palette spreads as a circle from the tapped swatch (--vt-x/--vt-y; --vt-r reaches
   the farthest corner); the old one stays put underneath. Reduced motion: a 150ms crossfade. */
html.vt-pal::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.vt-pal::view-transition-new(root) { animation: palReveal var(--dur-l) var(--ease-out) both; mix-blend-mode: normal; }
@keyframes palReveal { from { clip-path: circle(0px at var(--vt-x) var(--vt-y)); } to { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); } }
html.vt-pal-fade::view-transition-old(root), html.vt-pal-fade::view-transition-new(root) { animation-duration: 150ms; animation-timing-function: linear; }
html.vt-pal-fade::view-transition-group(root) { animation-duration: 150ms; }
/* let taps during the switch through where the engine allows it (Chrome still hits <html>; main.js then
   finishes the switch and passes the click on) */
html.vt-pal::view-transition, html.vt-pal-fade::view-transition { pointer-events: none; }

/* ---------- Windows high contrast / forced colours ---------- */
@media (forced-colors: active) {
  .client .lg { forced-color-adjust: none; background: CanvasText; }
  .top .picker, .menu-foot .picker-wrap { display: none; }
  .types input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .star, .menu-words a[aria-current="page"]::before { forced-color-adjust: none; background: CanvasText; }
}