@import url("../font/fonts.css");

/* ==========================================================================
   Eirini's Gyros & More
   Treated as print collateral for a real restaurant, not a product page.

   Ground is limewashed plaster. The dominant colour is the blue the building
   is actually painted; it arrives as full-bleed fields, the way paint does on
   a wall. One tomato red, taken from the checkered basket liner, appears only
   as a mark. Photographs are pinned at angles like snapshots on a board.

   Geometry rule: print is square. Panels and photographs are 2px. The only
   round things are the ones you press (pills) and the stamp.
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, motion;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, svg, video { display: block; max-width: 100%; }
  picture { display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  ul, ol { list-style: none; padding: 0; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    --paper:      #F0F1EC;   /* limewashed plaster */
    --paper-2:    #E7E9E2;   /* the shaded side of the same wall */
    --ink:        #141A22;
    --ink-2:      #4E5A66;
    --ink-3:      #808C97;

    --blue:       #22409A;   /* the building, saturated */
    --blue-deep:  #152A66;   /* the shadowed coat */
    --blue-pale:  #C9D2EC;
    --red:        #C43D28;   /* the basket liner. used as a mark, never a field */

    --on-blue:      #F2F4FA;
    --on-blue-2:    #AFBEE4;

    --rule:       rgb(20 26 34 / 0.16);
    --rule-soft:  rgb(20 26 34 / 0.09);
    --rule-blue:  rgb(242 244 250 / 0.22);

    --display: "Young Serif", Georgia, "Times New Roman", serif;
    --text: "Newsreader", Georgia, "Times New Roman", serif;

    --r-flat: 2px;
    --r-pill: 999px;

    --pad: clamp(1.25rem, 5vw, 5rem);
    --bay: clamp(4.5rem, 11vh, 9rem);
    --max: 1360px;

    /* mass and spring, never linear */
    --e-mass:   cubic-bezier(0.32, 0.72, 0, 1);
    --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    color-scheme: light;
  }

  /* Night service. The plaster goes to the blue it turns after dark. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0E1522; --paper-2: #141E30;
      --ink: #EDF0F6; --ink-2: #A2B0C4; --ink-3: #71808F;
      --blue: #6E86D8; --blue-deep: #101A33; --blue-pale: #24365F;
      --red: #E4674C;
      --on-blue: #EDF0F6; --on-blue-2: #A9B8DF;
      --rule: rgb(237 240 246 / 0.18); --rule-soft: rgb(237 240 246 / 0.10);
      --rule-blue: rgb(237 240 246 / 0.20);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0E1522; --paper-2: #141E30;
    --ink: #EDF0F6; --ink-2: #A2B0C4; --ink-3: #71808F;
    --blue: #6E86D8; --blue-deep: #101A33; --blue-pale: #24365F;
    --red: #E4674C;
    --on-blue: #EDF0F6; --on-blue-2: #A9B8DF;
    --rule: rgb(237 240 246 / 0.18); --rule-soft: rgb(237 240 246 / 0.10);
    --rule-blue: rgb(237 240 246 / 0.20);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
    line-height: 1.6;
    font-weight: 380;
    font-optical-sizing: auto;
    overflow-x: hidden;
  }

  /* Paper grain. Fixed layer, never attached to anything that scrolls. */
  body::after {
    content: "";
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    opacity: 0.05; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: 0.045; }
  }
  :root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.045; }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }
  h1 { font-size: clamp(3rem, 1.4rem + 6.4vw, 7rem); line-height: 0.94; }
  h2 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem); }
  h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem); line-height: 1.14; }

  h4 {
    font-family: var(--text); font-weight: 600;
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
    line-height: 1.3; letter-spacing: -0.005em;
  }

  p { text-wrap: pretty; }
  em { font-style: italic; }

  .lede {
    font-size: clamp(1.16rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.48; font-weight: 350; color: var(--ink-2);
    max-width: 34ch;
  }
  .prose { color: var(--ink-2); max-width: 58ch; line-height: 1.68; }
  .prose + .prose { margin-block-start: 1.1em; }

  /* Editorial small caps. This is the label voice everywhere on the page. */
  .label {
    font-family: var(--text);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-3);
  }

  ::selection { background: var(--blue); color: var(--on-blue); }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .skip-link {
    position: absolute; left: var(--pad); top: -100px; z-index: 200;
    background: var(--blue); color: var(--on-blue);
    padding: 0.7rem 1.2rem; font-weight: 600;
    transition: top 0.25s var(--e-out);
  }
  .skip-link:focus { top: 1rem; }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
  .bay { padding-block: var(--bay); position: relative; }
  .rule { height: 1px; background: var(--rule); border: 0; }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* ---- CTA: pill, with the arrow nested in its own disc ---- */
  .cta {
    --cta-bg: var(--blue); --cta-fg: var(--on-blue);
    display: inline-flex; align-items: center; gap: 0.85rem;
    padding: 0.6rem 0.6rem 0.6rem 1.5rem;
    border-radius: var(--r-pill);
    background: var(--cta-bg); color: var(--cta-fg);
    font-family: var(--text); font-weight: 600; font-size: 1.02rem;
    letter-spacing: 0.004em; text-decoration: none; white-space: nowrap;
    transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)), 0) scale(var(--press, 1));
    transition: transform 0.4s var(--e-mass), background-color 0.6s var(--e-mass),
                box-shadow 0.6s var(--e-mass);
    box-shadow: 0 1px 0 rgb(20 26 34 / 0.06), 0 10px 26px -14px rgb(21 42 102 / 0.5);
  }
  .cta .disc {
    display: grid; place-items: center; flex: none;
    width: 2.15rem; height: 2.15rem; border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.17);
    transition: transform 0.6s var(--e-spring), background-color 0.5s var(--e-mass);
  }
  .cta .disc svg { transition: transform 0.6s var(--e-spring); }
  .cta:hover { --lift: -2px; }
  .cta:hover .disc { background: rgb(255 255 255 / 0.28); transform: scale(1.06); }
  .cta:hover .disc svg { transform: translate(2px, -2px); }
  .cta:active { --lift: 0px; --press: 0.982; }

  .cta-quiet {
    --cta-bg: transparent; --cta-fg: var(--ink);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
  .cta-quiet .disc { background: rgb(20 26 34 / 0.07); }
  .cta-quiet:hover { --cta-bg: rgb(20 26 34 / 0.04); box-shadow: inset 0 0 0 1px var(--ink-3); }
  .cta-quiet:hover .disc { background: rgb(20 26 34 / 0.11); }

  .on-blue .cta-quiet { --cta-fg: var(--on-blue); box-shadow: inset 0 0 0 1px var(--rule-blue); }
  .on-blue .cta-quiet .disc { background: rgb(255 255 255 / 0.14); }
  .on-blue .cta-quiet:hover { --cta-bg: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px var(--on-blue-2); }

  /* ---- text link with a rule that draws itself ---- */
  .ln {
    text-decoration: none; position: relative; white-space: nowrap;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size 0.5s var(--e-mass);
  }
  .ln:hover { background-size: 100% 1px; }

  /* ---- photographs: pinned to the page, not floated in a card ---- */
  .plate { position: relative; border-radius: var(--r-flat); overflow: hidden; background: var(--paper-2); }
  .plate picture, .plate img { width: 100%; height: 100%; }
  .plate img { object-fit: cover; }

  /* the paper edge under a pinned photograph */
  .pinned { position: relative; }
  .pinned .plate {
    box-shadow:
      0 1px 1px rgb(20 26 34 / 0.07),
      0 12px 28px -18px rgb(20 26 34 / 0.42),
      0 2px 0 0 var(--paper) inset;
  }

  /* ---- the est. stamp ---- */
  .stamp {
    display: grid; place-items: center; text-align: center;
    width: 8.5rem; height: 8.5rem; border-radius: 50%;
    color: var(--red);
    box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 5px transparent, inset 0 0 0 6px currentColor;
    font-family: var(--display); line-height: 1.05;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
  }
  .stamp small { display: block; font-family: var(--text); font-size: 0.6rem; font-weight: 600;
                 letter-spacing: 0.22em; text-transform: uppercase; margin-block-end: 0.15rem; }
  .stamp b { display: block; font-size: 1.75rem; letter-spacing: -0.01em; font-weight: 400; }

  /* ---- Greek meander, drawn as a rule ---- */
  .meander {
    height: 14px;
    background-image:
      linear-gradient(90deg, currentColor 2px, transparent 2px),
      linear-gradient(0deg, currentColor 2px, transparent 2px);
    background-size: 28px 14px, 28px 7px;
    background-repeat: repeat-x;
    opacity: 0.32;
  }

  /* ---- nav: sits in the paper, becomes an island once you leave the top ---- */
  .nav {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90;
    padding-block: 1.5rem;
    transition: padding-block 0.7s var(--e-mass);
  }
  .nav-bar {
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
    max-width: var(--max); margin-inline: auto;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    border-radius: var(--r-pill);
    background: transparent;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color 0.7s var(--e-mass), box-shadow 0.7s var(--e-mass),
                max-width 0.7s var(--e-mass), backdrop-filter 0.7s var(--e-mass);
  }
  .nav.docked { padding-block: 0.85rem; }
  .nav.docked .nav-bar {
    max-width: 62rem;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--rule-soft), 0 12px 34px -20px rgb(20 26 34 / 0.45);
  }
  .nav-mark { display: flex; align-items: center; margin-inline-end: auto; text-decoration: none; }
  .nav-mark img { height: 40px; width: auto; transition: height 0.7s var(--e-mass); }
  .nav.docked .nav-mark img { height: 32px; }
  .nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }
  .nav-links a {
    font-family: var(--text); font-weight: 500; font-size: 1rem;
    text-decoration: none; padding-block: 0.3rem; position: relative;
  }
  .nav-links a::after {
    content: ""; position: absolute; inset-block-end: 0.05rem; inset-inline-start: 0;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right;
    transition: transform 0.55s var(--e-mass);
  }
  .nav-links a:hover::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
  .nav-tools { display: flex; align-items: center; gap: 0.5rem; }
  .nav .cta { padding: 0.5rem 0.5rem 0.5rem 1.15rem; font-size: 0.95rem; }
  .nav .cta .disc { width: 1.85rem; height: 1.85rem; }

  .knob {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: var(--r-pill); color: inherit;
    box-shadow: inset 0 0 0 1px var(--rule);
    transition: box-shadow 0.5s var(--e-mass), transform 0.5s var(--e-spring), background-color 0.5s var(--e-mass);
  }
  .knob:hover { box-shadow: inset 0 0 0 1px var(--ink-3); background: rgb(20 26 34 / 0.04); }
  .knob:active { transform: scale(0.93); }
  .burger { display: none; }

  /* hamburger that morphs into an X rather than swapping glyphs */
  .burger i {
    position: absolute; width: 17px; height: 1.5px; background: currentColor;
    transition: transform 0.6s var(--e-mass), opacity 0.35s var(--e-mass);
  }
  .burger i:nth-child(1) { transform: translateY(-4.5px); }
  .burger i:nth-child(2) { transform: translateY(4.5px); }
  .burger[aria-expanded="true"] i:nth-child(1) { transform: rotate(45deg); }
  .burger[aria-expanded="true"] i:nth-child(2) { transform: rotate(-45deg); }
}

/* --------------------------------------------------------------- sections */
@layer sections {

  /* ============ HERO: editorial split, no scrim over the food ============ */
  .hero { padding-block: clamp(8rem, 15vh, 11rem) clamp(3rem, 7vh, 5rem); position: relative; }
  .hero-grid {
    display: grid; grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  }
  .hero-copy { display: grid; justify-items: start; gap: clamp(1.3rem, 2.6vh, 2rem); }
  .hero h1 .ln-mask { display: block; overflow: hidden; padding-block-end: 0.06em; }
  .hero h1 .ln-mask > span { display: block; }
  .hero h1 i { font-style: normal; color: var(--blue); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

  /* the photograph sits on a field of the building's blue, offset behind it */
  .hero-plate { position: relative; }
  .hero-plate .field {
    position: absolute; inset: 14% -4% -5% 18%;
    background: var(--blue); border-radius: var(--r-flat);
  }
  .hero-plate .pinned { position: relative; transform: rotate(-1.4deg); }
  .hero-plate .plate { aspect-ratio: 5 / 6; }
  .hero-plate .stamp { position: absolute; inset-block-end: -1.6rem; inset-inline-start: -1.9rem; z-index: 2; }

  /* running foot under the hero, set like a masthead line */
  .masthead {
    margin-block-start: clamp(2.5rem, 6vh, 4.5rem);
    border-block-start: 1px solid var(--rule);
    padding-block-start: 1.1rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
    align-items: baseline;
  }
  .masthead span { color: var(--ink-2); font-size: 0.98rem; }
  .masthead b { font-weight: 600; color: var(--ink); }

  /* ============ FULL-BLEED BLUE FIELD ============ */
  .field-blue {
    background: var(--blue-deep); color: var(--on-blue);
    position: relative; overflow: hidden;
  }
  .field-blue .label { color: var(--on-blue-2); }
  .field-blue .prose { color: var(--on-blue-2); }
  .field-blue .lede { color: var(--on-blue); }
  .field-blue .rule { background: var(--rule-blue); }

  .story-grid {
    display: grid; grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
  }
  .story-copy { display: grid; gap: 1.4rem; justify-items: start; }
  .byline { display: flex; align-items: center; gap: 0.85rem; color: var(--on-blue); }
  .byline .dash { width: 2.4rem; height: 1px; background: currentColor; opacity: 0.6; }
  .byline span { font-family: var(--display); font-size: 1.15rem; }
  .story-plate .pinned { transform: rotate(1.8deg); }
  .story-plate .plate { aspect-ratio: 4 / 3; }
  .story-plate .plate::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  }

  /* ============ SIGNATURES: snapshots on a board ============ */
  .head { display: grid; grid-template-columns: minmax(0, 46rem) 1fr; gap: 0 clamp(2rem, 5vw, 4rem); align-items: end; }
  .head > .bar { border-block-start: 1px solid var(--rule); align-self: end; margin-block-end: 0.85rem; }
  .field-blue .head > .bar { border-block-start-color: var(--rule-blue); }
  .rail-head { display: grid; gap: 1rem; }
  .rail-wrap { margin-block-start: clamp(1.75rem, 4vh, 2.75rem); }
  .rail {
    display: flex; align-items: flex-start; gap: clamp(1.5rem, 3.5vw, 3rem);
    padding-inline: var(--pad); padding-block: 1.5rem 2.5rem;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; cursor: grab;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail.dragging { cursor: grabbing; scroll-snap-type: none; }

  .snap { flex: none; width: clamp(15rem, 26vw, 21rem); scroll-snap-align: center; }
  /* varied heights and tilts so the row reads as objects, not a carousel */
  .snap:nth-child(3n+1) .plate { aspect-ratio: 4 / 5; }
  .snap:nth-child(3n+2) .plate { aspect-ratio: 1 / 1; }
  .snap:nth-child(3n+3) .plate { aspect-ratio: 5 / 7; }
  .snap:nth-child(4n+1) .pinned { transform: rotate(-1.6deg); }
  .snap:nth-child(4n+2) .pinned { transform: rotate(1.1deg); margin-block-start: 2.2rem; }
  .snap:nth-child(4n+3) .pinned { transform: rotate(-0.6deg); margin-block-start: 1rem; }
  .snap:nth-child(4n+4) .pinned { transform: rotate(2deg); }
  .snap .pinned { transition: transform 0.8s var(--e-mass); }
  .snap:hover .pinned { transform: rotate(0deg) translateY(-6px); }
  .snap .plate img { transition: transform 1.4s var(--e-mass); }
  .snap:hover .plate img { transform: scale(1.045); }

  .snap-cap { margin-block-start: 1.1rem; display: grid; gap: 0.3rem; }
  .snap-cap .top { display: flex; align-items: baseline; gap: 0.75rem; }
  .snap-cap h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); }
  .snap-cap .fig {
    margin-inline-start: auto; font-weight: 600; font-size: 0.95rem;
    font-variant-numeric: tabular-nums; color: var(--red); white-space: nowrap;
  }
  .snap-cap p { color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }

  .rail-foot { display: flex; align-items: center; gap: 1rem; padding-block-start: 0.5rem; }
  .rail-foot .track { flex: 1; max-width: 16rem; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
  .rail-foot .track i { position: absolute; inset-block: -1px; inset-inline-start: 0; background: var(--blue); }

  /* ============ MENU: set like something printed ============ */
  .menu-top { display: grid; gap: 1.1rem; }
  .card-list { display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 3vw, 2.5rem); margin-block: clamp(2rem, 5vh, 3rem) 0; }
  .card-list button {
    font-family: var(--text); font-size: 1.05rem; font-weight: 500;
    color: var(--ink-3); padding-block: 0.6rem; position: relative;
    transition: color 0.45s var(--e-mass);
  }
  .card-list button::after {
    content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
    width: 100%; height: 2px; background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.6s var(--e-mass);
  }
  .card-list button:hover { color: var(--ink); }
  .card-list button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
  .card-list button[aria-selected="true"]::after { transform: scaleX(1); }

  .card { border-block-start: 1px solid var(--ink); padding-block-start: clamp(1.75rem, 4vh, 2.5rem); margin-block-start: -1px; }
  .card[hidden] { display: none; }
  .dishes {
    columns: 2; column-gap: clamp(2.5rem, 6vw, 5rem);
    orphans: 2; widows: 2;
  }
  .line {
    display: grid; gap: 0.24rem; padding-block: 0.62rem;
    break-inside: avoid; align-content: start;
  }
  .line-top { display: flex; align-items: baseline; gap: 0.7rem; }
  .line-top h4 { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
  .line-top .lead { flex: 1 1 1rem; min-width: 0.75rem; border-block-end: 1px dotted var(--rule); transform: translateY(-0.25rem); }
  .line-top .fig {
    flex: 0 1 auto; text-align: right; text-wrap: balance;
    font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums;
  }
  .line p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; max-width: 44ch; }

  .colophon {
    margin-block-start: clamp(2.5rem, 5vh, 3.5rem);
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
    border-block-start: 1px solid var(--rule); padding-block-start: 1.5rem;
  }
  .colophon p { color: var(--ink-2); font-size: 0.98rem; max-width: 52ch; }
  .colophon strong { color: var(--ink); font-weight: 600; }

  /* ============ SPECIALS: one marquee, set in the blue ============ */
  .strip {
    background: var(--blue); color: var(--on-blue);
    padding-block: clamp(0.9rem, 2vh, 1.35rem); overflow: hidden;
  }
  .marquee { display: flex; width: max-content; }
  .marquee-run { display: flex; align-items: center; gap: 2.75rem; padding-inline-end: 2.75rem; }
  .marquee span {
    font-family: var(--display); font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.65rem);
    white-space: nowrap; letter-spacing: -0.012em;
  }
  .marquee .sep { flex: none; width: 6px; height: 6px; background: currentColor; opacity: 0.5; transform: rotate(45deg); }

  /* ============ SWEETS: overlapping cascade ============ */
  .cascade {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem); align-items: start;
    margin-block-start: clamp(1.75rem, 4vh, 3rem);
  }
  .cascade .a { grid-column: 1 / span 6; }
  .cascade .b { grid-column: 8 / span 5; margin-block-start: clamp(3rem, 9vh, 7rem); }
  .cascade .c { grid-column: 2 / span 4; margin-block-start: clamp(0.5rem, 3vh, 2rem); }
  .cascade .d { grid-column: 7 / span 6; margin-block-start: clamp(-6rem, -6vh, -2rem); }
  .cascade .a .plate { aspect-ratio: 4 / 5; }
  .cascade .b .plate { aspect-ratio: 1 / 1; }
  .cascade .d .plate { aspect-ratio: 5 / 4; }
  .cascade .a .pinned { transform: rotate(-1.3deg); }
  .cascade .b .pinned { transform: rotate(2.1deg); }
  .cascade .d .pinned { transform: rotate(-2deg); }
  .cascade .pinned { transition: transform 0.9s var(--e-mass); }
  .cascade article:hover .pinned { transform: rotate(0deg) translateY(-8px); }
  .cap { margin-block-start: 1rem; display: grid; gap: 0.3rem; max-width: 34ch; }
  .cap p { color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
  .note-col { display: grid; gap: 1rem; align-content: center; }
  .note-col .drop::first-letter {
    font-family: var(--display); float: left; font-size: 3.4em;
    line-height: 0.82; padding-inline-end: 0.09em; padding-block-start: 0.06em; color: var(--blue);
  }

  /* ============ VISIT ============ */
  .visit-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .visit-copy { display: grid; gap: clamp(1.75rem, 3.5vh, 2.5rem); justify-items: start; }
  .facts { display: grid; gap: 1.4rem; width: 100%; }
  .facts > div { display: grid; gap: 0.4rem; padding-block-end: 1.3rem; border-block-end: 1px solid var(--rule-blue); }
  .facts > div:last-child { border-block-end: 0; padding-block-end: 0; }
  .facts dd { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); }
  .week { display: grid; gap: 0.28rem; max-width: 21rem; font-variant-numeric: tabular-nums; }
  .week li { position: relative; display: flex; justify-content: space-between; gap: 1rem; }
  .week li.shut { opacity: 0.5; }
  .week li.now { color: #fff; font-weight: 600; }
  .week li.now::after {
    content: "open now"; position: absolute; inset-inline-start: calc(100% + 1.1rem);
    inset-block-start: 50%; transform: translateY(-50%);
    font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--red); white-space: nowrap;
  }
  .visit-plate .pinned { transform: rotate(-1.2deg); }
  .visit-plate .plate { aspect-ratio: 16 / 11; }
  .visit-plate figcaption { margin-block-start: 1.9rem; color: var(--on-blue-2); font-size: 0.95rem; font-style: italic; }

  /* ============ FOOT ============ */
  .foot { padding-block: clamp(3.5rem, 8vh, 5.5rem) 2rem; }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
  .foot-mark img { height: 40px; width: auto; margin-block-end: 1.1rem; }
  .foot h4 { font-family: var(--text); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
             text-transform: uppercase; color: var(--ink-3); margin-block-end: 1rem; }
  .foot ul { display: grid; gap: 0.6rem; }
  .foot ul a, .foot ul li { color: var(--ink-2); text-decoration: none; }
  .foot-base {
    margin-block-start: clamp(2.5rem, 5vh, 3.5rem); border-block-start: 1px solid var(--rule);
    padding-block-start: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: space-between; align-items: center; color: var(--ink-3); font-size: 0.9rem;
  }
  .socials { display: flex; gap: 0.5rem; }
}

/* ----------------------------------------------------------------- motion */
@layer motion {
  /* Each of these answers "what does it communicate?".
     hero mask   -> the name sets line by line, like type being placed
     field wipe  -> the blue arrives the way paint goes on a wall
     pin         -> photographs settle onto the page instead of fading in
     rail        -> walking the counter
     stamp       -> a mark being pressed
     marquee     -> the specials genuinely rotate through the week */

  .rise { opacity: 0; transform: translate3d(0, 2.6rem, 0); filter: blur(6px); }
  .rise.on {
    opacity: 1; transform: none; filter: blur(0);
    transition: opacity 0.9s var(--e-mass), transform 1s var(--e-mass), filter 0.9s var(--e-mass);
    transition-delay: var(--d, 0ms);
  }
  .rise-set > * { opacity: 0; transform: translate3d(0, 2rem, 0); filter: blur(5px); }
  .rise-set.on > * {
    opacity: 1; transform: none; filter: blur(0);
    transition: opacity 0.85s var(--e-mass), transform 0.95s var(--e-mass), filter 0.85s var(--e-mass);
  }
  .rise-set.on > *:nth-child(1) { transition-delay: 0ms; }
  .rise-set.on > *:nth-child(2) { transition-delay: 90ms; }
  .rise-set.on > *:nth-child(3) { transition-delay: 180ms; }
  .rise-set.on > *:nth-child(4) { transition-delay: 270ms; }
  .rise-set.on > *:nth-child(5) { transition-delay: 360ms; }
  .rise-set.on > *:nth-child(6) { transition-delay: 450ms; }

  /* photographs settle: they arrive tilted further than they land */
  .settle .pinned { opacity: 0; transform: rotate(var(--from, -5deg)) translate3d(0, 3rem, 0) scale(0.96); }
  .settle.on .pinned {
    opacity: 1;
    transition: opacity 1s var(--e-mass), transform 1.25s var(--e-mass);
    transition-delay: var(--d, 0ms);
  }

  /* the stamp presses on, coming down onto the page */
  .stamp { opacity: 0; transform: rotate(-22deg) scale(1.15); }
  /* the hero stamp rides the opening sequence rather than waiting for scroll */
  .ready .hero-plate .stamp {
    opacity: 1; transform: rotate(-9deg) scale(1);
    transition: opacity 0.5s var(--e-out) 0.85s, transform 0.9s var(--e-spring) 0.85s;
  }
  .on .stamp, .stamp.on {
    opacity: 1; transform: rotate(-9deg) scale(1);
    transition: opacity 0.5s var(--e-out) 0.5s, transform 0.9s var(--e-spring) 0.5s;
  }

  /* the blue field paints itself in */
  .hero-plate .field { transform: scaleY(0); transform-origin: bottom; }
  .ready .hero-plate .field {
    transform: scaleY(1);
    transition: transform 1.3s var(--e-mass) 0.25s;
  }

  /* hero type sets line by line out of a mask */
  .hero h1 .ln-mask > span,
  .hero .label, .hero .lede, .hero .hero-actions, .hero .masthead {
    opacity: 0; transform: translate3d(0, 105%, 0);
  }
  .hero .label, .hero .lede, .hero .hero-actions, .hero .masthead { transform: translate3d(0, 1.6rem, 0); }
  .ready .hero h1 .ln-mask > span,
  .ready .hero .label, .ready .hero .lede,
  .ready .hero .hero-actions, .ready .hero .masthead {
    opacity: 1; transform: none;
    transition: opacity 1s var(--e-mass), transform 1.15s var(--e-mass);
  }
  .ready .hero .label                       { transition-delay: 0.12s; }
  .ready .hero h1 .ln-mask:nth-of-type(1) > span { transition-delay: 0.22s; }
  .ready .hero h1 .ln-mask:nth-of-type(2) > span { transition-delay: 0.32s; }
  .ready .hero h1 .ln-mask:nth-of-type(3) > span { transition-delay: 0.42s; }
  .ready .hero .lede                        { transition-delay: 0.58s; }
  .ready .hero .hero-actions                { transition-delay: 0.70s; }
  .ready .hero .masthead                    { transition-delay: 0.84s; }

  .hero-plate .pinned { opacity: 0; transform: rotate(-5deg) translate3d(0, 2.5rem, 0) scale(0.95); }
  .ready .hero-plate .pinned {
    opacity: 1; transform: rotate(-1.4deg);
    transition: opacity 1.1s var(--e-mass) 0.3s, transform 1.4s var(--e-mass) 0.3s;
  }

  /* scroll-linked drift on the pinned photographs, no scroll listeners */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .drift img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
      @keyframes drift { from { transform: scale(1.12) translate3d(0, -3.5%, 0); }
                         to   { transform: scale(1.12) translate3d(0, 3.5%, 0); } }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .marquee { animation: run 42s linear infinite; }
    .strip:hover .marquee { animation-play-state: paused; }
    @keyframes run { to { transform: translate3d(-50%, 0, 0); } }
  }

  .card > * { animation: card 0.6s var(--e-mass) both; }
  @keyframes card { from { opacity: 0; transform: translate3d(0, 1rem, 0); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }
    .rise, .rise-set > *, .settle .pinned, .stamp,
    .hero h1 .ln-mask > span, .hero .label, .hero .lede,
    .hero .hero-actions, .hero .masthead, .hero-plate .pinned {
      opacity: 1 !important; filter: none !important;
    }
    .hero h1 .ln-mask > span, .hero .label, .hero .lede,
    .hero .hero-actions, .hero .masthead { transform: none !important; }
    .hero-plate .field { transform: scaleY(1) !important; }
    .hero-plate .pinned { transform: rotate(-1.4deg) !important; }
    .settle .pinned { transform: none !important; }
    .stamp { transform: rotate(-9deg) !important; }
  }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(3rem, 8vh, 5rem); }
  .hero-plate { max-width: 34rem; }
  .story-grid, .visit-grid { grid-template-columns: 1fr; gap: 3rem; }
  .story-plate, .visit-plate { order: -1; }
  .cascade .a { grid-column: 1 / span 7; }
  .cascade .b { grid-column: 8 / span 5; }
  .cascade .c { grid-column: 1 / span 6; }
  .cascade .d { grid-column: 7 / span 6; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* the burger morphs to an X in place, so it outranks the sheet it opens */
  .nav { z-index: 96; }
  .nav-links { display: none; }
  .nav .cta { display: none; }
  .burger { display: grid; position: relative; }
  .sheet {
    position: fixed; inset: 0; z-index: 95;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(28px) saturate(140%);
    display: grid; align-content: center; gap: 0.2rem; padding: var(--pad);
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s var(--e-mass);
  }
  .sheet.open { opacity: 1; pointer-events: auto; }
  .sheet a {
    font-family: var(--display); font-size: clamp(2.2rem, 10vw, 3.4rem);
    text-decoration: none; padding-block: 0.3rem; line-height: 1.06;
    opacity: 0; transform: translate3d(0, 2.5rem, 0);
    transition: opacity 0.6s var(--e-mass), transform 0.7s var(--e-mass);
  }
  .sheet.open a { opacity: 1; transform: none; }
  .sheet.open a:nth-child(1) { transition-delay: 0.09s; }
  .sheet.open a:nth-child(2) { transition-delay: 0.15s; }
  .sheet.open a:nth-child(3) { transition-delay: 0.21s; }
  .sheet.open a:nth-child(4) { transition-delay: 0.27s; }
  .sheet .cta { margin-block-start: 1.75rem; justify-self: start; font-size: 1.05rem;
                opacity: 0; transform: translate3d(0, 2.5rem, 0);
                transition: opacity 0.6s var(--e-mass) 0.33s, transform 0.7s var(--e-mass) 0.33s; }
  .sheet.open .cta { opacity: 1; transform: none; }

  .dishes { grid-template-columns: 1fr; }
  .cascade { grid-template-columns: 1fr; }
  .cascade .a, .cascade .b, .cascade .c, .cascade .d {
    grid-column: 1 / -1; margin-block-start: 0;
  }
  /* tilts and overlaps become touch hazards on a phone */
  .cascade .pinned, .story-plate .pinned, .visit-plate .pinned { transform: none; }
  .hero-plate .stamp { inset-inline-start: auto; inset-inline-end: 0.9rem; inset-block-end: 0.9rem; }
}

@media (max-width: 620px) {
  :root { --bay: 3.75rem; }
  .stamp { width: 7rem; height: 7rem; }
  .stamp b { font-size: 1.35rem; }
  .hero-plate .pinned, .snap .pinned { transform: none; }
  .snap { width: 76vw; }
  .snap:nth-child(4n+2) .pinned, .snap:nth-child(4n+3) .pinned { margin-block-start: 0; }
  .line-top { flex-wrap: wrap; gap: 0.1rem 0.7rem; }
  .line-top h4 { flex: 1 1 100%; }
  .line-top .lead { display: none; }
  .line-top .fig { flex: 1 1 100%; text-align: left; color: var(--red); }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-actions { width: 100%; }
  .hero-actions .cta { flex: 1 1 100%; justify-content: space-between; }
}

@media print {
  .nav, .strip, .hero-actions, .rail-foot, .sheet { display: none; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
}

/* ------------------------------------------------ theme-aware marks etc. */
@layer components {
  /* The wordmark is the client's own logo. Only its ink changes with theme. */
  .mark-rev { display: none; }
  .mark-ink { display: block; }
  #theme-toggle .ico-moon { display: block; }
  #theme-toggle .ico-sun  { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mark-rev { display: block; }
    :root:not([data-theme="light"]) .mark-ink { display: none; }
    :root:not([data-theme="light"]) #theme-toggle .ico-moon { display: none; }
    :root:not([data-theme="light"]) #theme-toggle .ico-sun  { display: block; }
  }
  :root[data-theme="dark"] .mark-rev { display: block; }
  :root[data-theme="dark"] .mark-ink { display: none; }
  :root[data-theme="dark"] #theme-toggle .ico-moon { display: none; }
  :root[data-theme="dark"] #theme-toggle .ico-sun  { display: block; }

  .knob svg, .cta svg, .foot svg { fill: currentColor; }
  .sheet { display: none; }
  .cascade .c .plate { aspect-ratio: 1 / 1; }
  .rail-foot .track i { transition: transform 0.16s linear, width 0.25s var(--e-mass); }
  .foot-mark p { margin-block-start: 0.2rem; }

  /* "open now" is only true during service; outside it the row just reads today */
  .week li.now.later::after { content: "today"; color: var(--on-blue-2); }

}

@media (max-width: 860px) { .sheet { display: grid; } }