/* ==========================================================================
   Georgie's Chelsea — site stylesheet
   Squarespace → Hostinger migration.

   This is a FAITHFUL REPRODUCTION of the live Squarespace site. Every component
   below maps to a real block on georgies-chelsea.com, and the geometry (corner
   offsets, band heights, card radii, breakpoints) is carried over from that
   site's own custom CSS rather than reinterpreted. Where the original had a bug
   or a dead link it's noted inline.

   Contents
     1.  Fonts
     2.  Tokens (the Squarespace :root vars, verbatim) + the --text-* type scale
     3.  Reset + base
     4.  Corner cover        .header-container / .nav-item  (home, downstairs, links)
     5.  Red logo band       .hdr                          (menu, about, contact, team)
     6.  Home: story + info sections
     7.  Happy hour box      .hh-standout
     8.  About page
     9.  Contact card
     10. Downstairs page
     11. Join the team
     12. Links (linktree)
     13. 404 page
     14. Promo popup (ships inactive) + utilities

   The menu component and its skeleton loader are NOT here — they live with the
   renderer that emits them, in menus/menu-georgies.css. This file still themes
   them: the --menu-ink / --menu-paper pair in §10.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
/* Self-hosted WOFF2 (MIGRATION.md §8). The live site loads Annuario and
   Roylands from Squarespace, plus Google's Newsreader — see the note in §2. */

@font-face {
  font-family: 'Annuario';
  src: url('fonts/Annuario-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Annuario';
  src: url('fonts/Annuario-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Annuario';
  src: url('fonts/Annuario-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Annuario';
  src: url('fonts/annuario-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Annuario';
  src: url('fonts/annuario-light-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Annuario';
  src: url('fonts/annuario-bold-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Roylands Sans';
  src: url('fonts/Roylands-Sans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* The live custom CSS declares this family name explicitly (`font-family:
   Roylands-Script` on .cursive and the menu category heading), so both spellings
   are registered to the same file. */
@font-face {
  font-family: 'Roylands Script';
  src: url('fonts/Roylands-Script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roylands-Script';
  src: url('fonts/Roylands-Script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens ------------------------------------------------------------- */

:root {
  /* Lifted verbatim from the Squarespace custom CSS, names included, so the two
     builds stay identical while DNS cuts over. */
  --primary-color: #F6F1EB;
  --secondary-color: #85001D;
  --text-light: #FFFFFF;
  --text-dark: #000000;
  --accent-1: #FFCFC7;
  --accent-2: #0C2D28;
  --highlight: #0C2D28;

  /* The corner-nav block used its own short names */
  --color-r: #85001D;
  --color-g: #0C2D28;
  --color-p: #FFCFC7;
  --color-w: #FFFFFF;

  /* Type. NOTE: the live site also loads Newsreader (a Google serif) alongside
     Annuario and Roylands. Which elements it drives is set in Squarespace's
     runtime stylesheet and isn't in any file we can read, so body copy here uses
     Annuario — the brand's own text face, already self-hosted. If body copy
     should be the serif, change --font-body in one place. */
  --font-body: 'Annuario', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading: 'Roylands Sans', 'Arial Narrow', sans-serif;
  --font-script: 'Roylands Script', 'Snell Roundhand', cursive;

  /* Page ink/paper — flipped by .theme-night on the downstairs page */
  --page-bg: var(--primary-color);
  --page-ink: var(--secondary-color);

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --max: 1500px; /* the original's --sqs-site-max-width */

  /* --- Type scale ------------------------------------------------------
     ONE system for the whole site. Every font-size in this file references a
     token below — no component invents its own size, and nothing is expressed in
     `em`.

     Why that matters: this file used to mix two incompatible systems. The menu
     component sized everything in `em` (.menu-category-title was 3.5em), so it
     compounded off `body` and ballooned the moment the base changed, while every
     other page used its own bespoke `rem` clamp and so ignored the base entirely.
     Changing the body size therefore made the menu enormous and left the rest
     untouched. Tokens fix both halves of that.

     Each step is fluid: it interpolates linearly from its phone size at 390px to
     its desktop size at 1440px, then holds. So a component picks a role once and
     is correct at every width — there are no per-breakpoint font-size overrides.

     The bottom of the scale is the important part: body and the small supporting
     sizes sit ~50% above a conventional web base, because Annuario has a small
     x-height and reads a size down from its metrics. The ratio above the base is
     correspondingly gentler than a textbook modular scale (roughly 1.12–1.18
     rather than 1.2–1.25) — with a base this large, a textbook ratio would push
     display type past 100px. Small type gains the most, large type the least,
     which is what keeps the hierarchy legible rather than merely big.

     Sizes in the comments are px at a default 16px root.

     To rescale the site, edit these ten lines. */
  --text-2xs:     clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);        /* 16 → 18 */
  --text-xs:      clamp(1.125rem, 1.09rem + 0.1429vw, 1.219rem);      /* 18 → 19.5 */
  --text-sm:      clamp(1.219rem, 1.161rem + 0.2381vw, 1.375rem);     /* 19.5 → 22 */
  --text-base:    clamp(1.375rem, 1.317rem + 0.2381vw, 1.531rem);     /* 22 → 24.5 */
  --text-md:      clamp(1.531rem, 1.45rem + 0.3333vw, 1.75rem);       /* 24.5 → 28 */
  --text-lg:      clamp(1.75rem, 1.634rem + 0.4762vw, 2.062rem);      /* 28 → 33 */
  --text-xl:      clamp(1.969rem, 1.795rem + 0.7143vw, 2.438rem);     /* 31.5 → 39 */
  --text-2xl:     clamp(2.219rem, 1.975rem + 1vw, 2.875rem);          /* 35.5 → 46 */
  --text-3xl:     clamp(2.562rem, 2.249rem + 1.286vw, 3.406rem);      /* 41 → 54.5 */
  --text-display: clamp(2.938rem, 2.45rem + 2vw, 4.25rem);            /* 47 → 68 */
}

/* 3. Reset + base ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Left at the browser default (usually 16px) so `rem` means what a reader has
     actually asked for, and so someone who raises their default font size gets
     the benefit. The site's own sizing lives in the --text-* scale in §2, not
     here — putting it here as well would give two levers fighting each other. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The /menu venue switch flips the whole palette between the cream day theme and
   the downstairs green, so the change is eased rather than snapped. Static pages
   never trigger it. The reduced-motion block in §14 neutralises this. */
body,
.hdr,
.hh-standout {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* Images carry width/height attributes so the browser can reserve their box and
   avoid layout shift (MIGRATION.md §7). Without `height: auto` that height
   attribute keeps applying once CSS sets a width, which stretches the image —
   the DOWN STAIRS lockup rendered 330x554 instead of 330x261. Components that
   genuinely want a fixed height (the hero's object-fit cover) set it themselves. */
img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
}

/* Every level gets a token, so nothing falls back to the browser's own defaults
   — those are `em`-based (h1 is 2em, h2 1.5em), which would quietly reintroduce
   the compounding this scale exists to remove. Components override these freely;
   a class selector already outranks a bare element one. */
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

::selection {
  background: var(--secondary-color);
  color: var(--primary-color);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
}

/* Page-level themes. Both re-point the two page tokens rather than restyling
   components, so the menu, its skeleton and the corner nav follow along for
   free. `.theme-night` (the downstairs green) lives in §10 with that page.

   `.theme-red` is the Squarespace "bright" theme: a full brand-red stock with
   white ink, used on contact, links and join-the-team. */
.theme-red {
  --page-bg: var(--secondary-color);
  --page-ink: var(--text-light);
}

/* Accessibility scaffolding the original lacked — invisible, so the design is
   unchanged (MIGRATION.md §4). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.75em 1.25em;
  background: var(--secondary-color);
  color: var(--primary-color);
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
  text-decoration: none;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Wordmarks are drawn as masks tinted by currentColor: one cached SVG instead of
   the original's separate white PNG per placement. */
.wordmark {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--wordmark);
  mask-image: var(--wordmark);
}

.wordmark--primary {
  --wordmark: url('images/logo/logo-primary.svg');
  aspect-ratio: 570 / 212;
}

/* The "DOWN STAIRS at Georgie's" lockup — the downstairs cover mark. */
.wordmark--downstairs {
  --wordmark: url('images/logo/logo-downstairs.svg');
  aspect-ratio: 569 / 330;
}

/* The standing "UPSTAIRS" corner word on the downstairs page. It's one 3.5 KB
   compound path, so it's a cached mask asset rather than inline markup — the
   other corner words are small enough to inline. */
.wordmark--upstairs {
  --wordmark: url('images/logo/word-upstairs.svg');
  aspect-ratio: 246.05 / 1442.56;
}

/* 4. Corner cover ------------------------------------------------------- */
/* The signature block: a full-viewport panel with letterform wordmarks tucked
   into the top-left and bottom-right corners. Offsets, widths and the 700px
   breakpoint are the original's exact values.

   The vertical words (CONTACT, EVENTS, DOWNSTAIRS) are drawn already-rotated in
   their path data — tall viewBoxes — so nothing here rotates them. */

.header-container {
  position: relative;
  width: 100%;
  height: 100vh;  /* fallback where svh is unsupported */
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-g);
  --corner-inset: 60px;
  --corner-fill: var(--color-w);
  --corner-fill-hover: var(--color-p);
  /* The ornamental brackets track the lettering by default; downstairs keeps
     them white while the words go pink, so they get their own token. */
  --corner-bracket-fill: var(--corner-fill);
}

.header-container__media,
.header-container__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.header-container__media img {
  object-fit: cover;
  object-position: center;
}

.header-corners {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nav-menu-tl,
.nav-menu-br {
  position: absolute;
}

.nav-menu-tl {
  top: var(--corner-inset);
  left: var(--corner-inset);
}

.nav-menu-br {
  right: var(--corner-inset);
  bottom: var(--corner-inset);
}

/* Each link is its own positioning anchor; the SVG fills its width. */
.nav-item,
.nav-item-2 {
  position: absolute;
  display: block;
}

.nav-item svg,
.nav-item-2 svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--corner-fill);
  transition: fill 0.25s ease;
}

.nav-item:hover svg,
.nav-item:focus-visible svg,
.nav-item-2:hover svg,
.nav-item-2:focus-visible svg {
  fill: var(--corner-fill-hover);
}

/* Corner words carried as a mask asset instead of inline SVG tint via `color`,
   so they hover identically to their inline siblings. */
.nav-item .wordmark,
.nav-item-2 .wordmark {
  width: 100%;
  color: var(--corner-fill);
  transition: color 0.25s ease;
}

.nav-item:hover .wordmark,
.nav-item:focus-visible .wordmark,
.nav-item-2:hover .wordmark,
.nav-item-2:focus-visible .wordmark {
  color: var(--corner-fill-hover);
}

/* The corner brackets are ornament. The original pointed them at href="", which
   just reloaded the page, so they're spans here. */
.corner-bracket {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* The bracket-specific token is optional: contexts that don't set it (the links
   page) fall through to the lettering colour rather than to black. */
.corner-bracket svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--corner-bracket-fill, var(--corner-fill));
}

/* A 44px tap area without moving the artwork (MIGRATION.md §2) */
.nav-item::after,
.nav-item-2::after {
  content: "";
  position: absolute;
  inset: -11px;
  min-width: 44px;
  min-height: 44px;
}

/* Centred logo inside the cover (used on downstairs and links; the homepage's
   copy of this block is commented out in the original, so it stays out). */
.header-images {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.header-images img,
.header-images .wordmark {
  width: 35%;
  transform-origin: 50% 50%;
  transition: transform 0.6s ease-in;
}

.header-images img:hover,
.header-images .wordmark:hover {
  transform: scale(1.1);
}

/* --- Desktop offsets --------------------------------------------------- */

.corner-bracket--tl { top: 8px;   left: 8px;   width: 30px; }
.nav-item--menu     { top: 0;     left: 60px;  width: 80px; }
.nav-item--contact  { top: 65px;  left: 0;     width: 20px; }
.nav-item--events   { top: 200px; left: 0;     width: 20px; }
.nav-item--about    { top: 0;     left: 160px; width: 95px; }

.corner-bracket--br     { right: 8px;  bottom: 8px;  width: 30px; }
.nav-item--reservations { right: 60px; bottom: 0;    width: 190px; }
.nav-item--downstairs   { right: 0;    bottom: 60px; width: 20px; }
.nav-item--upstairs     { right: 0;    bottom: 60px; width: 20px; }

/* --- Phone offsets (the original's max-width: 700px block) ------------- */

@media (max-width: 700px) {
  .header-container {
    /* The original dropped to 87vh on phones; a full-height cover is wanted. */
    --corner-inset: 30px;
  }

  .corner-bracket--tl { top: 5px;   left: 5px;   width: 20px; }
  .nav-item--menu     { top: 0;     left: 40px;  width: 50px; }
  .nav-item--contact  { top: 45px;  left: 0;     width: 13px; }
  .nav-item--events   { top: 135px; left: 0;     width: 13px; }
  .nav-item--about    { top: 0;     left: 105px; width: 60px; }

  .corner-bracket--br     { right: 5px;  bottom: 5px;  width: 20px; }
  .nav-item--reservations { right: 40px; bottom: 0;    width: 125px; }
  .nav-item--downstairs   { right: 0;    bottom: 45px; width: 13px; }
  /* Matched to DOWNSTAIRS above — UPSTAIRS is the shorter word, so at 11px its
     letters read a touch smaller than its counterpart on the homepage. */
  .nav-item--upstairs     { right: 0;    bottom: 45px; width: 13px; }

  .header-images img,
  .header-images .wordmark {
    width: 70%;
  }
}

/* 5. Red logo band ------------------------------------------------------ */
/* The inner-page header: a 100px brand-red band with the white wordmark centred,
   growing 10% on hover. Used on menu, about, contact and join-the-team.

   The original animated `width` (200px → 220px) over 1s. That was the clunky
   bit: width is a layout property, so every frame forced a reflow of the flex
   band AND a re-rasterise of the wordmark's mask, and re-centring a growing box
   made it visibly jitter. It's a `transform: scale()` now — composited, no
   layout, and ~4x faster so it feels like a response rather than a drift.

   Because it's a scale, the phone breakpoint no longer needs its own hover
   values: 200→220 and 150→165 were both 1.1x, which is now expressed once.

   HEADS-UP: as on the live site, these pages carry no navigation at all — the
   Squarespace header was hidden globally (`header,footer{display:none!important}`),
   so the logo is the only way out. Reproduced as-is; see the migration notes. */

.hdr {
  background-color: var(--secondary-color);
  min-height: 100px;
  padding: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hdr a {
  display: block;
  line-height: 0;
}

.hdr .wordmark {
  width: 200px;
  color: var(--text-light);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Keyboard focus gets the same cue, unguarded. */
.hdr a:focus-visible .wordmark {
  transform: scale(1.1);
}

/* Hover is gated on a real pointer: on touch, :hover latches after a tap and
   would leave the logo stuck at 1.1x until you tapped elsewhere. */
@media (hover: hover) {
  .hdr a:hover .wordmark {
    transform: scale(1.1);
  }
}

@media (max-width: 520px) {
  .hdr {
    min-height: 84px;
    padding: 22px;
  }

  .hdr .wordmark {
    width: 150px;
  }
}

/* 6. Home: story + info ------------------------------------------------- */
/* Sections 2 and 3 of the homepage. The original's section themes ("bright" and
   "white-bold") are resolved by Squarespace at runtime, so they were read off
   the rendered live page rather than any stylesheet:
     bright     → brand red  #85001D ground, white ink   (the story section)
     white-bold → white      #FFFFFF ground, brand-red ink (the info section) */

.story {
  padding: clamp(3.5rem, 11vw, 8rem) var(--gutter);
  background: var(--secondary-color);
  color: var(--text-light);
}

/* Weight, tracking and centring read off the live page's computed styles — the
   body copy here is Annuario Regular with slight positive tracking, not Light. */
/* Pinned in px, matching the 1158px measure the live section actually uses (a
   Squarespace 80% content width, not a ch-based one). In px rather than rem on
   purpose: it's a measured value, so it shouldn't drift when the root type scale
   in §3 is adjusted. */
.story p {
  max-width: 1150px;
  margin: 0 auto;
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.5;
  letter-spacing: 0.027em;
  text-align: center;
}

.info {
  padding: clamp(3rem, 9vw, 6rem) var(--gutter) clamp(3.5rem, 10vw, 7rem);
  background: var(--text-light);
  color: var(--secondary-color);
}

.info__grid {
  display: grid;
  gap: clamp(2.2rem, 6vw, 3rem);
}

.info h2 {
  margin: 0 0 1rem;
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
}

/* On the live page this is the italic "Socials" line — body face, title case, no
   tracking. The address column carries no visible label at all, so its copy of
   this element is hidden (kept in the markup for screen readers). */
.info__label {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-base);
}

.info__lines {
  margin: 0;
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.85;
  font-variant-numeric: tabular-nums;
  font-style: normal;
}

.info__lines a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.info__lines a:hover {
  color: var(--accent-2);
}

/* Day and time sit together on one line, the block left-aligned inside itself and
   centred as a whole — as on the live page, where the time is a <strong>. The old
   space-between layout pushed them to opposite ends of a 22rem row. */
.info__lines dl,
.info__block--hours .info__lines {
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}

.info__hours-row {
  display: flex;
  justify-content: flex-start;
  gap: 0.45em;
}

.info__hours-row dt {
  white-space: nowrap;
}

.info__hours-row dd {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

/* Desktop: address left, hours centre, socials right — the original's grid.
   DOM order is hours → address → socials so phones stack in the original order. */
@media (min-width: 820px) {
  .info__grid {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }

  .info__block--hours   { grid-column: 2; grid-row: 1; text-align: center; }
  .info__block--address { grid-column: 1; grid-row: 1; }

  /* Pushed to the right of its column, but its two lines stay left-aligned with
     each other — as on the live page. */
  .info__block--socials {
    grid-column: 3;
    grid-row: 1;
    width: fit-content;
    margin-left: auto;
    text-align: left;
  }
}

@media (max-width: 819px) {
  .info__grid {
    text-align: center;
  }
}

/* "Check out DOWN STAIRS at Georgie's" — the disco-ball sign.
   The lockup is ~330px on desktop and ~310px on a phone (measured off the live
   page), i.e. near-constant rather than fluid, hence min() not clamp(). */
.info__downstairs {
  position: relative;
  display: block;
  width: fit-content;
  margin: clamp(3rem, 9vw, 5.5rem) auto 0;
  text-align: center;
  text-decoration: none;
  transition: transform 0.4s ease;
}

.info__downstairs img {
  width: min(80vw, 330px);
}

.info__downstairs:hover,
.info__downstairs:focus-visible {
  transform: scale(1.05);
}

/* "Check out" is not part of the artwork — it sits in the lockup's top-left
   whitespace, just right of the pendant's ceiling plate. Position and size are
   fractions of the image (31% / 4% / 4.3% of its width on the live page at both
   breakpoints), so the caption tracks the artwork at any viewport. */
.info__downstairs-cue {
  position: absolute;
  top: 4%;
  left: 31%;
  margin: 0;
  font-family: var(--font-script);
  font-size: calc(min(80vw, 330px) * 0.043);
  line-height: 1;
  white-space: nowrap;
}

/* 7. Happy hour box ----------------------------------------------------- */
/* `.hh-standout` from the Squarespace menu page, verbatim: 3px brand border,
   1em/2.5em margin (1em on phones), centred, with the time in Roylands Script. */

.hh-standout {
  border: 3px solid var(--secondary-color);
  margin: 1em 2.5em;
  padding: 1em;
  text-align: center;
}

.hh-standout h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.hh-standout p {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.2;
}

.hh-standout .cursive {
  margin: 0;
  font-family: var(--font-script);
  font-size: var(--text-2xl);
}

@media (max-width: 700px) {
  .hh-standout {
    margin: 1em 1em;
  }

}

/* 8. About page --------------------------------------------------------- */
/* The live page is the full brand-red stock with white ink, headings and copy
   centred — the page carries .theme-red, so no colours are set here. An earlier
   pass had this on cream with a red panel behind the logos only; the panel is
   gone now that the whole page is red. */

.about {
  padding: clamp(2.5rem, 8vw, 5rem) var(--gutter) clamp(3rem, 9vw, 6rem);
  text-align: center;
}

.about h1,
.about h2 {
  font-size: var(--text-2xl);
  margin-bottom: 0.8em;
}

.about h2 {
  margin-top: 2.4em;
}

.about p {
  max-width: 74ch;
  margin-inline: auto;
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.75;
}

/* The Host Restaurants group: 14 white sister-venue wordmarks in rows of 5 / 4 / 5.

   Each row is its own flex line, centred, so the middle row of four sits inset
   between the two rows of five — that inset IS the composition, and it's why this
   isn't one auto-flowing grid (14 items in a 5-column grid would give 5/5/4, with
   the short row ragged at the end rather than centred).

   The row counts live in about.html, not here. Below the desktop sizes the rows
   wrap on their own, since five marks across a phone would be unreadable. */
.group-venues {
  margin-top: clamp(2rem, 6vw, 3.2rem);
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
}

.group-venues__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
}

.group-venues a {
  flex: 0 1 auto;
  width: clamp(104px, 15vw, 168px);
  display: grid;
  place-items: center;
  min-height: 60px;
  padding: 0.4rem;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.group-venues a:hover,
.group-venues a:focus-visible {
  opacity: 1;
  transform: scale(1.06);
}

.group-venues img {
  max-height: 54px;
  width: auto;
  object-fit: contain;
}

/* On a phone the 5/4/5 composition can't hold — five marks across 390px would be
   ~60px each. Letting each row wrap on its own gave 2+2+1 / 2+2 / 2+2+1, which
   strands single logos on their own line. So the rows dissolve (`display:
   contents` promotes the 14 links to direct grid items) and the whole set
   re-flows as a clean 2-up: seven even rows, no orphans. */
@media (max-width: 700px) {
  .group-venues {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.2rem, 5vw, 2rem);
  }

  .group-venues__row {
    display: contents;
  }

  .group-venues a {
    width: auto;
    justify-self: center;
  }
}

/* 9. Contact card ------------------------------------------------------- */
/* The live page's composition: an 80%-wide white card with a 60px radius, a
   square map illustration on the left with the storefront pin centred on it
   (wiggling on hover), and the details on the right.

   The original's fixed values didn't survive contact with real widths, so three
   of them are now fluid:

   - The map was `width: 400px; flex: 0 0 auto`, i.e. it never gave up a pixel.
     Together with a hard 80px gap and 80px of right padding that left the text
     column ~239px of usable width around 1024px, and the card grew from 453px
     to 637px tall as everything wrapped. It's `flex: 0 1 400px` now — 400px is
     the ideal, not a floor — so the squeeze is shared.
   - In the stacked layout the map was `width: 100%` with a 1:1 ratio, which made
     it a 645px-tall square on a tablet and drove the card to 1280px. It's capped
     and centred below.
   - `padding-right: 80px` on the text column left ~90px of dead white at the
     card's right edge. Now fluid, and there's vertical padding too so the copy
     isn't tight against the 60px corner rounding. */

.contact-page {
  padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(3rem, 9vw, 6rem);
}

.contact-card {
  background-color: var(--text-light);
  width: 80%;
  margin: 0 10%;
  border-radius: 60px;
  min-height: 400px;
  /* One padding value on all four sides, and the text column below carries no
     vertical padding of its own, so the white margin around the map is the same
     on the top, bottom and left. It was 10px left against 32px top/bottom before,
     because the text column was taller than the map and drove the card height. */
  padding: clamp(1rem, 2vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 5rem);
}

.contact-card-l {
  flex: 0 1 400px;
  min-width: 0;
  aspect-ratio: 1 / 1;
  height: auto;
  align-self: center;
  background-image: url('images/brand/map.webp');
  background-size: cover;
  background-position: center;
  border-radius: 50px;
  position: relative;
}

.contact-card-l a {
  position: absolute;
  width: 50px;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  transform: translate(20%, 5%);
}

.contact-card-l img {
  width: 50px;
  display: block;
}

.contact-card-l a:hover,
.contact-card-l a:focus-visible {
  transform: translate(20%, 5%) scale(1.1);
  animation: wiggle 0.6s ease-in-out infinite;
}

@keyframes wiggle {
  0%   { transform: translate(20%, 5%) scale(1.1) rotate(0); }
  25%  { transform: translate(20%, 5%) scale(1.1) rotate(-5deg); }
  50%  { transform: translate(20%, 5%) scale(1.1) rotate(0); }
  75%  { transform: translate(20%, 5%) scale(1.1) rotate(5deg); }
  100% { transform: translate(20%, 5%) scale(1.1) rotate(0); }
}

.contact-card-r {
  flex: 1 1 auto;
  min-width: 0;
  /* No vertical padding — the card's own padding provides that, and adding more
     here would make this column taller than the map and take over the card's
     height. Only the right inset is set. */
  padding: 0 clamp(1rem, 3vw, 3rem) 0 0;
  color: var(--secondary-color);
}

.contact-card-r h1,
.contact-card-r h3 {
  color: var(--secondary-color);
  margin: 10px 0;
}

.contact-card-r h1 {
  font-size: var(--text-2xl);
}

.contact-card-r h3 {
  font-size: var(--text-md);
}

/* .info__lines is shared with the homepage footer, where it runs at 1.85 to give
   the three columns air. Inside the card that's far too open — the two address
   lines read as separate blocks — so it tightens up here. */
.contact-card-r .info__lines {
  line-height: 1.35;
}

/* Deliberate deviation from the live page, which leaves these links unmarked and
   in the same colour as the surrounding copy — nothing but the cursor signals
   they're tappable. The rule is subtle enough to keep the card's look. */
.contact-card-r a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.contact-card a:hover {
  color: var(--accent-1);
}

/* The gap tops out lower than it used to (was a flat 50px). Address and Contact
   together need ~344px and the mid-range only offered ~334px, so they were
   wrapping to stacked at 1024px and below and taking the card to 627px tall —
   trimming the gap keeps them side by side down to the stacking breakpoint. */
.contact-info {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding: clamp(1rem, 2.5vw, 1.875rem) 0 clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: wrap;
}

.contact-card-r hr {
  border: 0;
  border-top: 1px solid var(--secondary-color);
  width: 100%;
  margin-bottom: 15px;
}

.contact-info-bottom {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hours {
  margin-right: auto;
}

/* A step down the scale and tighter leading. At body size these four lines ran
   ~173px, which made the text column taller than the 400px map and left the map
   with uneven white above and below it. Trimmed, the column comes in under the
   map's height, so the card is sized by the map and the space around it is even.
   These are supporting details next to the address and phone, so a smaller size
   also reads correctly here. */
.hours p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.contact-social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-bottom: 0;
}

.contact-social svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Stacks at 1024, not 768. Between those two the row still technically fitted but
   badly: the map had shrunk, Address and Contact had wrapped to stacked, and the
   card ran to ~570px tall with the map floating in the middle of it. Stacking
   earlier gives the copy the full width and keeps the map at a sane size. */
@media (max-width: 1024px) {
  .contact-card {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.25rem, 4vw, 1.875rem);
    width: 90%;
    margin: 0 5%;
    border-radius: 30px;
    padding: clamp(1.25rem, 4vw, 2rem);
  }

  /* Capped and centred. Unbounded, `width: 100%` on a 1:1 box made this a 645px
     square on a tablet — taller than the phone viewport it was meant for, and it
     pushed the address and hours entirely below the fold. */
  .contact-card-l {
    flex: 0 0 auto;
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 20px;
  }

  .contact-card-r {
    flex: unset;
    width: 100%;
    padding: 0;
  }

  .contact-info {
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
  }

  .contact-info-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 5px;
  }

  .contact-social a {
    width: 32px;
  }
}

/* 10. Downstairs page --------------------------------------------------- */
/* The speakeasy inverts the register: dark green stock, cream ink, pink accents.
   Re-pointing the two page tokens restyles the menu and its skeleton for free. */

.theme-night {
  --page-bg: var(--accent-2);
  --page-ink: var(--text-light);
  background: var(--page-bg);
  color: var(--page-ink);
}

.theme-night .menu-page {
  --menu-ink: var(--text-light);
  --menu-paper: var(--accent-2);
}

/* A highlighted row is filled with --menu-ink, so on the night theme that card
   flips from brand red to white. The pink accent the glassware and diet icons use
   reads well on red but nearly vanishes on white, so on this theme they take the
   card's own ink instead — the same colour as the name and price beside them.
   (The live site has the pink-on-white version of this.) */
.theme-night .menu-item.highlighted .diet-icon-svg,
.theme-night .menu-item.highlighted .menu-item__glyph {
  color: var(--menu-paper);
}

.theme-night .header-container {
  --corner-fill: var(--color-p);
  --corner-fill-hover: var(--color-w);
  --corner-bracket-fill: var(--color-w);
  background-color: var(--color-g);
}

/* --- .theme-night on the menu page ------------------------------------- */
/* /menu applies this class to <body> while the Downstairs venue is selected, so
   picking a venue moves you between the two rooms rather than just swapping a
   list (see the switch in menu.html).

   Most of the page needs nothing here: the menu, its tabs, its diet filters and
   its skeleton all derive from --menu-ink, which `.theme-night .menu-page` above
   already re-points. These two are the only components that hard-code the brand
   red, so they're the only ones that need a night value — pink on green, which is
   the accent pairing the downstairs page itself uses. */

.theme-night .hdr {
  background-color: var(--accent-2);
}

.theme-night .hh-standout {
  border-color: var(--accent-1);
}

.theme-night .hh-standout .cursive {
  color: var(--accent-1);
}

.downstairs-copy {
  padding: clamp(3rem, 9vw, 6rem) var(--gutter) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

/* Matches the live measure (~1040px) and the Regular weight used there, in step
   with the homepage story copy. In px for the same reason as .story p (§6). */
.downstairs-copy p {
  max-width: 1040px;
  margin: 0 auto 1.2em;
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.5;
  letter-spacing: 0.027em;
}

.downstairs-copy .cursive {
  font-family: var(--font-script);
  font-size: var(--text-xl);
  color: var(--accent-1);
  line-height: 1.25;
}

/* The button sits a little clear of the copy above it, and drops the inherited
   paragraph measure so it isn't stretched by .downstairs-copy p's max-width. */
.downstairs-copy__cta {
  max-width: none;
  margin: clamp(1.25rem, 4vw, 2rem) 0 0;
}

/* The pink pendant lamp illustration between the menu and the hours */
.downstairs-light {
  padding: clamp(2.5rem, 8vw, 5rem) var(--gutter);
  display: grid;
  place-items: center;
}

.downstairs-light img {
  width: clamp(120px, 22vw, 220px);
}

.info--night {
  background: var(--accent-2);
  color: var(--text-light);
  border-top: 1px solid rgba(255, 207, 199, 0.25);
}

.info--night .info__lines a:hover {
  color: var(--accent-1);
}

/* 11. Join the team ---------------------------------------------------- */
/* The live page is the brand-red stock (.theme-red) with white ink. The
   Squarespace original carried a form block — labels above, bottom-rule inputs,
   position pills, a dashed file drop zone and a pink submit. That form is gone
   (the reason is in join-the-team.html), so all its CSS went with it; what's
   left is the centred title and the apply block that replaced it. */

.team {
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(3rem, 9vw, 6rem);
}

.team__title {
  margin: 0 0 clamp(2.5rem, 8vw, 4.5rem);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  text-align: center;
}

/* The apply block. Narrow measure and centred, so it reads as one short
   instruction rather than a page of copy. */
.team-apply {
  max-width: 46ch;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: clamp(1.2rem, 4vw, 1.8rem);
  text-align: center;
}

.team-apply p {
  margin: 0;
}

.team-apply__lede {
  font-size: var(--text-md);
}

/* Deliberately the old submit button's pink solid rather than the outlined .btn
   used elsewhere: it sits where the original's Submit sat and is the only call to
   action on the page, so it keeps that weight. */
.team-apply__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7em 2.2em;
  border: 0;
  background: var(--accent-1);
  color: var(--secondary-color);
  font-size: var(--text-base);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.team-apply__cta:hover,
.team-apply__cta:focus-visible {
  background: var(--text-light);
}

.team-apply__note {
  font-size: var(--text-sm);
}

/* 12. Links (linktree) -------------------------------------------------- */
/* Verbatim from the live links page: a full brand-red stock (the page carries
   .theme-red) with the white script wordmark, the handle in condensed caps, and
   cream buttons with red lettering. The mark, handle and icons all inherit the
   page ink, so the whole block re-tints with the theme. */

/* The frame the corner lettering anchors to. The original section was 87vh on
   phones, which left a stray band of the pink body colour under the red — that
   was a section-height artefact, so this fills the viewport instead. */
.links-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  --corner-inset: 60px;
  --corner-fill: var(--color-w);
}

/* The links-page corners are lettering, not navigation: on the live page they
   point at href="" (which just reloads), so they're inert spans here. They spell
   GEORGIE'S CHELSEA top-left and GEORGIE'S LINKS bottom-right. */
.corner-word {
  position: absolute;
  display: block;
  pointer-events: none;
}

.corner-word svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--corner-fill);
}

.corner-word--chelsea    { top: 0;      left: 60px;   width: 115px; }
.corner-word--georgies-v { top: 65px;   left: 0;      width: 20px; }
.corner-word--georgies-h { right: 60px; bottom: 0;    width: 140px; }
.corner-word--links-v    { right: 0;    bottom: 60px; width: 20px; }

.linktree-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 12vh 20px;
}

.profile-image {
  width: 400px;
  max-width: 100%;
  margin: 0 auto 15px;
  color: inherit;
}

.linktree-container .description {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  color: inherit;
}

.linktree-social {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.linktree-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.linktree-social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: fill 0.3s ease;
}

.linktree-social a:hover svg,
.linktree-social a:focus-visible svg {
  fill: var(--accent-1);
}

.link-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.link-button {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  text-decoration: none;
  padding: 14px 20px;
  min-height: 44px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.link-button:hover,
.link-button:focus-visible {
  background-color: var(--accent-1);
  color: var(--secondary-color);
}

@media (max-width: 700px) {
  .links-page {
    --corner-inset: 30px;
  }

  .corner-word--chelsea    { top: 0;      left: 40px;   width: 76px; }
  .corner-word--georgies-v { top: 45px;   left: 0;      width: 14px; }
  .corner-word--georgies-h { right: 40px; bottom: 0;    width: 100px; }
  .corner-word--links-v    { right: 0;    bottom: 45px; width: 14px; }

  .profile-image {
    width: 200px;
  }


  .link-button {
    width: 240px;
    align-self: center;
  }
}

/* 13. 404 page --------------------------------------------------------- */
/* Not part of the Squarespace original — Squarespace served its own generic 404,
   so there's no live page to reproduce here. Built from the existing inner-page
   furniture instead: .theme-red stock, the .hdr logo band, .shell measure and the
   .btn utility, so it inherits the brand without introducing new components. */

.notfound {
  padding: clamp(2.5rem, 8vw, 5rem) var(--gutter) clamp(4rem, 10vw, 7rem);
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 3.5vw, 1.6rem);
  text-align: center;
}

/* The big script "86'd". Decorative and aria-hidden — the real heading below
   carries the same words for anyone not looking at it. */
.notfound__code {
  margin: 0;
  font-family: var(--font-script);
  font-size: var(--text-display);
  line-height: 0.9;
  color: var(--accent-1);
}

.notfound__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
}

.notfound__lede {
  max-width: 46ch;
  margin: 0;
  font-size: var(--text-md);
}

/* Wraps to a stack on a phone rather than squeezing three buttons onto one row. */
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em;
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

.notfound__note {
  margin: 0;
  font-size: var(--text-sm);
}


/* 14. Promo popup + utilities ------------------------------------------ */
/* Ships INACTIVE (MIGRATION.md §12) — toggle in js/site.js. */

.promo-popup[hidden] {
  display: none;
}

.promo-popup {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.promo-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 45, 40, 0.66);
}

.promo-popup__card {
  position: relative;
  z-index: 1;
  width: min(90vw, 440px);
  padding: clamp(2rem, 6vw, 3rem) clamp(1.4rem, 5vw, 2.4rem);
  background: var(--primary-color);
  color: var(--secondary-color);
  text-align: center;
}

.promo-popup__close {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: inherit;
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}

.promo-popup__title {
  font-family: var(--font-script);
  font-size: var(--text-2xl);
  margin-bottom: 0.5rem;
}

.promo-popup__cta {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.8em 1.8em;
  background: var(--secondary-color);
  color: var(--primary-color);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

/* A general call-to-action button. Deliberately theme-agnostic: the outline and
   label are `currentColor`, so it inherits whatever page ink it lands on — cream
   on the downstairs green, brand red on the cream pages — and fills with the pink
   accent on hover, which is the same move the corner nav makes. First used by the
   downstairs "See menu" link; reuse it rather than styling one-off links. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.55em 1.8em;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--accent-1);
  border-color: var(--accent-1);
  color: var(--accent-2);
}

.no-scroll {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .header-container,
  .promo-popup,
  [data-menu-tabs],
  [data-menu-diets] {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}