/*
Theme Name: Tusco
Theme URI: https://www.tusco.co.uk/
Author: Hinba Group
Description: Custom classic WordPress theme for Tusco, an Italian restaurant in Glasgow's West End. Hand-coded HTML/PHP templates rather than the block editor's full-site-editing system or a page builder, see the project brief, Section 8, for why: the design is bespoke and not meant to be visually rearranged, so a classic theme is simpler to build and maintain than converting everything into Gutenberg block markup for no real benefit.
Version: 1.9.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: tusco

WordPress requires this file and loads it as the theme's main stylesheet
(via get_stylesheet_uri() in functions.php). Everything below this comment
is the real, approved design system, ported directly from the approved
HTML mockups, not rewritten.
*/


  /* ============================================
     v3 changes from previous pass:
     - Real logo (uploaded PNG) replaces the Caveat
       script text-logo everywhere. Biro Script Plus
       no longer has a placeholder stand-in in this
       pass since the real wordmark covers that role.
     - "4 nights a week" stat removed from intro.
     - Real Google Map embed in Find Us (address-based
       embed, no API key, production should move to
       the official Maps Embed API with a proper key).
     - Looser, more collaged/artsy direction: rotated
       photo frames, "tape corner" details, rubber-stamp
       style tags (echoing the logo's own stamped
       texture), mixed-scale headline type. Less grid-
       perfect than the previous pass.
     ============================================ */
  /* ============================================
     TYPEFACES, self-hosted.
     Previously pulled from fonts.googleapis.com, which cost a
     render-blocking third-party stylesheet plus a second connection to
     fonts.gstatic.com, and put a US transfer in the path (a live GDPR
     complaint area in the UK/EU). These are the same fonts, latin
     subset, woff2 only, served from the theme.

     Caveat has been dropped entirely, the v3 pass replaced the script
     text-logo with the real logo PNG, so it was being downloaded and
     never used.

     The display face is Fraunces, and it is permanent. It replaces
     Bodoni Moda, which was only ever a mockup stand-in for Tropikal.
     Tropikal could not be licensed for web embedding, so rather than
     keep a placeholder the site now uses a face it can keep.

     Why Fraunces specifically. Tropikal is a vintage-modern display
     serif redrawn from nineteenth-century Philippine banknotes and
     newspapers, and its defining quirks are sharp edges, high stroke
     contrast and semi-tilted details. That printed-ephemera lineage is
     where this design got its stamps, its ticket labels and its
     banknote-stripe fills, so the replacement had to hold the idea, not
     just be a nice serif. Fraunces is an old-style revival built for
     exactly that brief, and it has a WONK axis that curls the tails of
     g, y and similar letters, which is the nearest thing in an open
     font to Tropikal's tilted crossbars.

     Honest trade-off: Fraunces is warmer and lower contrast than
     Tropikal. Gloock was the sharper, higher contrast match and was
     rejected for one concrete reason, it has no italic, and the hero
     sets "Italian" in display italic alongside three press quotes.

     These are the WONK variable builds, shipped unmodified, so WONK is
     on by default and the whole 100 to 900 weight range comes in one
     file. Two files now instead of Bodoni's four. About 19KB more, and
     both are font-display:swap so neither blocks rendering.

     Licence: SIL Open Font Licence 1.1. Free to embed and self-host
     permanently, with no renewal and no per-domain terms, which is the
     whole point of the change.

     Only the faces actually used are declared. Unused @font-face rules
     cost nothing, a browser downloads a face only when something on
     the page matches it.
     ============================================ */
  @font-face{
    font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
    src:url("assets/fonts/fraunces-latin-wonk-normal.woff2") format("woff2");
  }
  @font-face{
    font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
    src:url("assets/fonts/fraunces-latin-wonk-italic.woff2") format("woff2");
  }
  @font-face{
    font-family:"Lora"; font-style:normal; font-weight:400; font-display:swap;
    src:url("assets/fonts/lora-latin-400-normal.woff2") format("woff2");
  }
  @font-face{
    font-family:"Lora"; font-style:italic; font-weight:400; font-display:swap;
    src:url("assets/fonts/lora-latin-400-italic.woff2") format("woff2");
  }
  @font-face{
    font-family:"Lora"; font-style:normal; font-weight:600; font-display:swap;
    src:url("assets/fonts/lora-latin-600-normal.woff2") format("woff2");
  }

  :root{
    --oxblood: #512519;
    --oxblood-deep: #2C1310;
    --parchment: #EDEADF;
    --parchment-white: #FAF8F2;
    --ink: #17110D;
    --muted: #7A6B5D;
    --line: rgba(23,17,13,0.14);
    --line-on-dark: rgba(250,248,242,0.2);

    /* Brass: the single accent alongside oxblood. Reserved for the
       Wednesday tasting menu and the nav active state, nothing else,
       so it keeps meaning something. Chosen to clear 3:1 against BOTH
       header states (4.07:1 on --oxblood-deep, 4.02:1 on
       --parchment-white) since it carries a UI indicator, not just
       decoration. It was already referenced by the
       a[aria-current="page"] rule below but never defined. */
    --brass: #A6702A;

    --font-display: "Fraunces", "Times New Roman", serif;
    --font-body: "Lora", Georgia, serif;                      /* real: Lora */

    /* Labels, nav, buttons and tags. Was Space Grotesk, now Lora at 600.
       Two reasons. The honest one: Space Grotesk is on an enormous
       number of recent sites, and a geometric grotesque setting tiny
       tracked-out uppercase labels is the single most recognisable
       "generated in the last two years" combination there is. It was
       fighting the letterpress and stamped-ephemera idea the rest of
       the design is built on.

       The second is that setting kickers and small caps in the text
       face is simply what print does, and it takes the site from three
       families to two. Named --font-ui rather than --font-sans because
       it is not a sans any more and a misleading token name is how the
       next person makes a mistake. */
    --font-ui: "Lora", Georgia, serif;

    /* ------------------------------------------------------------
       TYPE SCALE.
       The design previously carried 26 distinct hard-coded font sizes
      , 0.65, 0.68, 0.72, 0.78, 0.8, 0.82, 0.85, 0.88, 0.92, 0.95,
       0.98, 1.02, 1.05…, most of them differences nobody could see,
       plus nine unrelated one-off clamp() curves. That is what made
       the type feel untidy rather than any single wrong value.

       This is a modular scale, fluid between a 380px and a 1440px
       viewport. Every step reaches its stated min at 380px and its max
       at 1440px exactly (the intercept/slope pairs are computed, not
       eyeballed). The largest steps deliberately reproduce the
       approved mockup's endpoints, so the design does not shift:
       --step-7 is the old 2.8→5.6rem hero, --step-6 the old 2.6→4.4rem
       page hero.

       Use a step. Do not reintroduce a literal size.
       ------------------------------------------------------------ */
    --step--2: clamp(0.70rem, 0.6785rem + 0.0906vw, 0.76rem);   /* uppercase micro labels */
    --step--1: clamp(0.82rem, 0.7913rem + 0.1208vw, 0.90rem);   /* nav, buttons, captions */
    --step-0:  clamp(1.00rem, 0.9776rem + 0.0943vw, 1.0625rem); /* body copy */
    --step-1:  clamp(1.10rem, 1.0355rem + 0.2717vw, 1.28rem);   /* lede, dish names */
    --step-2:  clamp(1.28rem, 1.1653rem + 0.4830vw, 1.60rem);   /* card headings */
    --step-3:  clamp(1.50rem, 1.3028rem + 0.8302vw, 2.05rem);   /* feature headings, quotes */
    --step-4:  clamp(1.85rem, 1.5811rem + 1.1321vw, 2.60rem);   /* section h2 */
    --step-5:  clamp(2.05rem, 1.6736rem + 1.5849vw, 3.10rem);   /* major h2 */
    --step-6:  clamp(2.60rem, 1.9547rem + 2.7170vw, 4.40rem);   /* inner-page h1 */
    --step-7:  clamp(2.80rem, 1.7962rem + 4.2264vw, 5.60rem);   /* home hero h1 */

    /* Line heights: tight for display type, generous for reading. */
    --lh-display: 1.05;  /* h1 to h3 */
    --lh-hero: 1.18;     /* hero h1, two lines need more room */
    --lh-snug: 1.35;     /* pull quotes, short multi-line headings */
    --lh-body: 1.6;      /* default */
    --lh-loose: 1.78;    /* long-form paragraphs */

    /* Letter spacing: three roles, replacing eight ad-hoc values
       (0.2/0.14/0.08/0.06/0.05/0.04/0.03/0.02em). */
    --ls-label: 0.2em;     /* uppercase micro labels, opened up for Lora caps */
    --ls-ui: 0.09em;       /* uppercase nav, buttons, tags, opened up for Lora caps */
    --ls-display: -0.02em; /* large display headings, tightened for Fraunces */
  }

  *{ box-sizing:border-box; }
  @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
  /* The header is position:fixed, so in-page anchors (#faq, #wednesdays)
     would otherwise land with their heading hidden underneath it. */
  [id]{ scroll-margin-top:6rem; }
  body{
    margin:0; background:var(--parchment-white); color:var(--ink);
    font-family:var(--font-body); font-size:var(--step-0); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  :focus-visible{ outline:2px solid var(--oxblood); outline-offset:3px; }
  .wrap{ max-width:1240px; margin:0 auto; padding:0 2rem; }
  h1,h2,h3{
    font-family:var(--font-display); font-weight:500; line-height:var(--lh-display);
    letter-spacing:var(--ls-display); margin:0;
    /* The quirk axis. On by default in these builds, stated anyway. */
    font-variation-settings:"WONK" 1;
  }

  .eyebrow{
    font-family:var(--font-ui); font-size:var(--step--2); letter-spacing:var(--ls-label);
    text-transform:uppercase; font-weight:600; color:var(--oxblood);
  }
  .eyebrow.on-dark{ color:var(--parchment); opacity:0.8; }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  /* Reveal-on-scroll.
     The opacity:0 is scoped to .js, a class added to <html> by a one
     line inline script in header.php. Unscoped, this was a single point
     of failure for the whole site: every .reveal element starts
     invisible and is only shown by an IntersectionObserver in
     theme.js, so if that file failed to load, was blocked, or threw
     anywhere above the observer setup, most of the content on every
     page stayed permanently invisible with no error the visitor could
     see. Now, no JavaScript means no .js class means the content is
     simply visible, which is the correct failure mode. */
  .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .js .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

  /* ---------- Logo ---------- */
  .logo-img{ height:34px; width:auto; filter:brightness(0) invert(1); transition:filter 0.35s ease; }
  header.scrolled .logo-img{ filter:none; }

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:200; padding:1.1rem 0;
    transition:background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(250,248,242,0.92); backdrop-filter:blur(8px);
    border-bottom-color:var(--line); padding:0.7rem 0;
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
  .nav-links{ display:flex; align-items:center; gap:2.4rem; list-style:none; margin:0; padding:0; }
  .nav-links a{
    font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:var(--ls-ui); text-transform:uppercase;
    text-decoration:none; color:var(--parchment-white); transition:color 0.35s ease, opacity 0.2s ease; opacity:0.85;
  }
  header.scrolled .nav-links a{ color:var(--ink); }
  .nav-links a:hover{ opacity:1; }

  /* Featured nav item (Wednesday tasting menu). Marked by a brass dot
     AND heavier weight + full opacity, deliberately not colour alone,
     so it still reads as distinct in greyscale or with colour vision
     deficiency. */
  .nav-links a.nav-featured{
    opacity:1; font-weight:600; display:inline-flex; align-items:center; gap:0.5rem;
  }
  .nav-links a.nav-featured::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--brass); flex:none;
  }

  /* Seven items + logo + status pill gets tight before the mobile
     breakpoint takes over, so close the gaps rather than wrap. */
  @media (max-width:1120px) and (min-width:861px){
    .nav-links{ gap:1.5rem; }
    .nav-links a{ font-size:var(--step--2); }
  }
  .status-pill{
    font-family:var(--font-ui); font-size:var(--step--2); letter-spacing:var(--ls-ui); text-transform:uppercase;
    padding:0.4rem 0.8rem; border:1px solid var(--line-on-dark); color:var(--parchment-white);
    display:flex; align-items:center; gap:0.5rem; transition:color 0.35s ease, border-color 0.35s ease; white-space:nowrap;
  }
  header.scrolled .status-pill{ color:var(--ink); border-color:var(--line); }
  .status-dot{ width:6px; height:6px; border-radius:50%; background:#6B8A5A; flex:none; }
  .status-dot.closed{ background:#B4483A; }
  .nav-toggle{ display:none; background:none; border:none; font-size:var(--step-2); cursor:pointer; color:var(--parchment-white); }
  header.scrolled .nav-toggle{ color:var(--ink); }

  @media (max-width:860px){
    .nav-links{
      position:fixed; inset:0 0 auto 0; top:64px; background:var(--parchment-white);
      flex-direction:column; align-items:flex-start; padding:0; margin:0; max-height:0; overflow:hidden;
      transition:max-height 0.3s ease;
    }
    /* 7 items x ~43px + vertical padding, measured at 468px. Was 320px,
       which clipped the last item once the tasting menu link was added. */
    .nav-links.open{ max-height:500px; padding:1rem 1.75rem 1.5rem; }
    .nav-links a{ color:var(--ink) !important; opacity:1; padding:0.7rem 0; width:100%; border-bottom:1px solid var(--line); }
    .status-pill{ display:none; }
    .nav-toggle{ display:block; }
  }

  /* ---------- Hero (looser, overlapping composition) ---------- */
  .hero{ background:var(--oxblood-deep); color:var(--parchment-white); padding:10.5rem 0 7.5rem; position:relative; overflow:hidden; }
  .hero::after{
    content:""; position:absolute; inset:0; opacity:0.05; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .hero-grid{ display:grid; grid-template-columns:1.15fr 0.9fr; gap:1rem; align-items:center; position:relative; z-index:1; }
  .hero-text{ position:relative; z-index:2; }
  .hero-head{ margin-top:1.5rem; }
  .hero-head h1{
    font-family:var(--font-display); font-weight:500; font-style:normal;
    font-size:var(--step-7); line-height:var(--lh-hero); letter-spacing:var(--ls-display);
  }
  .hero-head h1 em{ font-style:italic; font-weight:500; }

  .hero p.lede{ font-size:var(--step-1); max-width:38ch; color:var(--parchment); opacity:0.85; margin-top:2rem; line-height:var(--lh-loose); }
  .hero-actions{ display:flex; gap:1.2rem; margin-top:2.8rem; flex-wrap:wrap; }
  .btn{
    font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:var(--ls-ui); text-transform:uppercase; font-weight:600;
    text-decoration:none; padding:0.95rem 1.7rem; display:inline-flex; align-items:center; gap:0.5rem;
    transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .btn-solid{ background:var(--parchment-white); color:var(--oxblood-deep); }
  .btn-solid:hover{ transform:translateY(-2px); }
  .btn-line{ border:1px solid var(--line-on-dark); color:var(--parchment-white); }
  .btn-line:hover{ border-color:var(--parchment-white); transform:translateY(-2px); }

  /* Third-tier hero action: deliberately a text link, not a button.
     Two buttons already compete for the primary action; a third would
     flatten the hierarchy rather than add to it. */
  .hero-note{ margin:1.7rem 0 0; font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:var(--ls-ui); }
  .hero-note a{
    color:var(--parchment); text-decoration:none; opacity:0.9;
    border-bottom:1px solid var(--brass); padding-bottom:3px;
    transition:opacity 0.2s ease, border-color 0.2s ease;
  }
  .hero-note a:hover{ opacity:1; border-bottom-color:var(--parchment-white); }

  .hero-photo-wrap{
    position:relative; z-index:1; margin-left:-3.5rem;
  }
  .hero-photo{
    aspect-ratio:3/4;
    background:repeating-linear-gradient(135deg, var(--oxblood) 0 14px, var(--oxblood-deep) 14px 28px);
    position:relative; display:flex; align-items:flex-end;
    transform:rotate(3deg);
    box-shadow:0 14px 26px rgba(0,0,0,0.3);
  }
  .hero-photo span{
    font-family:var(--font-ui); font-size:var(--step--2); letter-spacing:var(--ls-label); text-transform:uppercase;
    color:var(--parchment-white); background:rgba(0,0,0,0.35); padding:0.6rem 0.8rem; margin:0.9rem;
  }

  @media (max-width:860px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-photo-wrap{ margin-left:0; margin-top:3rem; max-width:280px; }
  }

  /* ---------- Marquee ---------- */
  .marquee{ background:var(--parchment); color:var(--ink); border-top:1px solid var(--line-on-dark); overflow:hidden; padding:1.3rem 0; white-space:nowrap; }
  .marquee-track{ display:inline-flex; animation:scroll-left 28s linear infinite; }
  .marquee-track span{
    font-family:var(--font-ui); font-size:var(--step-0); letter-spacing:var(--ls-label); text-transform:uppercase; font-weight:600;
    padding:0 1.5rem; display:inline-flex; align-items:center; gap:1.5rem;
  }
  .marquee-track span::after{ content:"\00B7"; opacity:0.4; }
  @keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

  /* ---------- Wednesday tasting menu band ----------
     Sits directly after the marquee so it can't be scrolled past.
     Uses --oxblood rather than --oxblood-deep on purpose: the hero and
     the press spotlight both own the deep tone, so a mid-tone band
     reads as its own thing rather than as more hero. Contrast of
     --parchment-white on --oxblood is 12.1:1 (AAA). */
  .wednesday-band{
    background:var(--oxblood); color:var(--parchment-white);
    padding:7rem 0; position:relative; overflow:hidden;
  }
  .wednesday-band::after{
    content:""; position:absolute; inset:0; opacity:0.05; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wednesday-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:4.5rem;
    align-items:center; position:relative; z-index:1;
  }
  .wednesday-photo{ aspect-ratio:16/9; position:relative; overflow:hidden; }
  .wednesday-text h2{ font-size:var(--step-5); margin-top:0.8rem; }
  .wednesday-text p{ color:var(--parchment); opacity:0.88; margin-top:1.3rem; max-width:46ch; line-height:var(--lh-loose); }
  .wednesday-price{
    font-family:var(--font-ui); font-size:var(--step-0); letter-spacing:var(--ls-ui);
    margin-top:1.5rem !important; opacity:1 !important;
  }
  .wednesday-price strong{ font-size:var(--step-1); font-weight:600; }
  .wednesday-actions{ display:flex; gap:1.1rem; margin-top:2.2rem; flex-wrap:wrap; }

  @media (max-width:860px){
    .wednesday-band{ padding:5rem 0; }
    .wednesday-grid{ grid-template-columns:1fr; gap:2.8rem; }
    /* Lead with the words on mobile, the photo reinforces the offer,
       it doesn't explain it. Tab order is unaffected (the photo holds
       no focusable elements). */
    .wednesday-text{ order:-1; }
    .wednesday-actions .btn{ width:100%; justify-content:center; }
  }

  /* Reusable inline callout, Menu and Book a Table pages. Brass rule
     on the left ties it to the nav marker without repeating the band.

     Renamed to .offer-callout now that it carries the lunch deal as
     well as the tasting menu. The old .wednesday-callout name is kept
     as an alias so existing markup keeps working; new markup should
     use .offer-callout. */
  .offer-callout,
  .wednesday-callout{
    background:var(--parchment); border-left:3px solid var(--brass);
    padding:1.6rem 1.8rem; margin:0 0 3.2rem;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
  }
  .offer-callout .eyebrow,
  .wednesday-callout .eyebrow{ margin:0 0 0.5rem; display:block; }
  .offer-callout p,
  .wednesday-callout p{ margin:0; color:var(--ink); font-size:var(--step-0); max-width:62ch; }
  .offer-callout .link-arrow,
  .wednesday-callout .link-arrow{ white-space:nowrap; }


  /* ---------- Friday and Saturday lunch ----------
     Placed directly after the marquee on the homepage, so the newest
     thing about the restaurant is the first thing under the hero.

     Deliberately NOT another dark band. The hero, the Wednesday band
     and the press spotlight already own the dark tones, and stacking a
     fourth would flatten the page into one long maroon scroll. This
     sits on the page background instead, with the offer itself drawn as
     one of the stamped, slightly rotated cards the site already uses
     for addresses and opening times, so it reads as part of the same
     collage rather than a new idea bolted on.

     It also carries no photograph on purpose. This section sits high
     enough to compete with the hero image for bandwidth, and an eager
     image here would push LCP the wrong way for no real gain. The type
     is the point. */
  .lunch-band{
    background:var(--parchment-white); color:var(--ink);
    padding:6.5rem 0; border-bottom:1px solid var(--line);
  }
  .lunch-grid{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:4.5rem; align-items:center;
  }
  .lunch-text h2{ font-size:var(--step-5); margin-top:0.8rem; }
  .lunch-text p{ color:var(--muted); margin-top:1.3rem; max-width:46ch; line-height:var(--lh-loose); }
  .lunch-hours{
    font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:var(--ls-ui);
    text-transform:uppercase; color:var(--oxblood) !important; margin-top:1.6rem !important;
  }
  .lunch-actions{ display:flex; gap:1.1rem; margin-top:2.2rem; flex-wrap:wrap; }

  /* The deal card. --ink rather than --muted for the detail line: on
     --parchment the muted brown drops to about 4.2:1, under the 4.5:1
     AA threshold for body text. --ink clears it comfortably. */
  /* Letterpress, not a floating card. The soft 40px drop shadow this
     used to have made it the one element on the site that looked like a
     UI component rather than something printed. A hard offset rule
     behind the box reads as ink laid on paper and matches the stamps. */
  .lunch-deal{
    background:var(--parchment); border:1.5px solid var(--oxblood);
    padding:2.4rem 2rem; text-align:center; transform:rotate(-1.5deg);
    box-shadow:6px 6px 0 var(--oxblood);
  }
  .lunch-deal .eyebrow{ display:block; margin:0; }
  .lunch-deal-price{
    font-family:var(--font-display); font-weight:500; font-size:var(--step-6);
    line-height:1; margin:0.7rem 0 0; color:var(--oxblood);
  }
  .lunch-deal-detail{ margin:1rem 0 0; color:var(--ink); font-size:var(--step-0); line-height:var(--lh-body); }
  .lunch-deal-when{
    margin:1.2rem 0 0; font-family:var(--font-ui); font-size:var(--step--1);
    letter-spacing:var(--ls-ui); text-transform:uppercase; color:var(--muted);
  }

  @media (max-width:860px){
    .lunch-band{ padding:4.5rem 0; }
    /* Words first, the card is the proof, not the explanation. */
    .lunch-grid{ grid-template-columns:1fr; gap:2.6rem; }
    .lunch-deal{ transform:rotate(0deg); }
    .lunch-actions .btn{ width:100%; justify-content:center; }
  }

  /* ---------- ResDiary booking embed ----------
     The min-height is the point of this rule. The widget is injected by
     a third-party script after the page has painted, so without a
     reserved box everything below it (the phone number, the hours
     stamps, the FAQ) gets shoved down the moment it arrives, which is
     exactly the jump Cumulative Layout Shift measures and this is the
     page where it would hurt most.

     640px is an estimate for a two-step date/covers widget. Measure the
     rendered height once on desktop and once on mobile and set these to
     match: too small and the shift comes back, too large and there is a
     gap under the widget. It is the one number here that needs checking
     against the real thing rather than trusting. */
  .booking-embed{ min-height:640px; }
  @media (max-width:860px){ .booking-embed{ min-height:720px; } }

  .booking-fallback{
    border-left:3px solid var(--oxblood); background:var(--parchment);
    padding:1.4rem 1.6rem; margin:0; color:var(--ink);
  }
  .booking-fallback a{ color:var(--oxblood); }

  /* Solid oxblood button for light backgrounds. This pairing was
     already in use, written inline on six elements across four
     templates; it belongs here. Existing inline copies still work and
     can migrate at leisure. */
  .btn-oxblood{ background:var(--oxblood); color:var(--parchment-white); }
  .btn-oxblood:hover{ transform:translateY(-2px); }

  /* ---------- Intro (stat removed) ---------- */
  .intro{ padding:9rem 0; }
  .intro-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:5rem; align-items:start; }
  .intro h2{ font-size:var(--step-5); margin-top:1.1rem; line-height:var(--lh-snug); }
  .intro-side p{ color:var(--muted); font-size:var(--step-1); padding-top:0.6rem; line-height:var(--lh-loose); }
  @media (max-width:860px){ .intro-grid{ grid-template-columns:1fr; } }

  /* ---------- Find Us: stamps + real map ---------- */
  .find-us{ padding:3rem 0 9rem; }
  .find-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:4.5rem; align-items:center; }
  .stamp-cluster{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:2.3rem; }
  .stamp{
    font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:var(--ls-ui);
    border:1.5px solid var(--oxblood); color:var(--oxblood);
    padding:0.9rem 1.25rem; background:var(--parchment-white);
  }
  .stamp:nth-child(1){ transform:rotate(-2deg); }
  .stamp:nth-child(2){ transform:rotate(1.5deg); }
  .stamp:nth-child(3){ transform:rotate(-1deg); }
  .stamp:nth-child(4){ transform:rotate(1.8deg); }

  .map-frame{
    position:relative; background:var(--parchment-white); padding:0.6rem;
    border:1px solid var(--line); transform:rotate(-1.2deg);
    box-shadow:0 8px 16px rgba(23,17,13,0.13);
  }
  .map-frame iframe{ width:100%; height:340px; border:0; display:block; filter:grayscale(0.15) sepia(0.08); }
  .map-frame::before, .map-frame::after{
    content:""; position:absolute; width:74px; height:26px;
    background:rgba(237,234,223,0.75); border:1px solid rgba(23,17,13,0.12);
  }
  .map-frame::before{ top:-13px; left:24px; transform:rotate(-7deg); }
  .map-frame::after{ bottom:-13px; right:28px; transform:rotate(6deg); }

  @media (max-width:860px){
    .find-grid{ grid-template-columns:1fr; }
    .map-frame{ transform:rotate(0deg); }
  }

  /* ---------- Menu teaser ---------- */
  .menu-teaser{ padding:9rem 0; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; flex-wrap:wrap; gap:1rem; }
  .section-head h2{ font-size:var(--step-4); margin-top:0.5rem; }
  .link-arrow{
    font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:var(--ls-ui); text-transform:uppercase;
    text-decoration:none; color:var(--oxblood); border-bottom:1px solid var(--oxblood); padding-bottom:2px;
  }
  .menu-grid{ display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:repeat(2,auto); gap:2.6rem 3.2rem; }
  .menu-feature{ grid-row:span 2; }
  .menu-photo{
    aspect-ratio:4/3; background:repeating-linear-gradient(45deg, var(--parchment) 0 12px, var(--parchment-white) 12px 24px);
    border:1px solid var(--line); position:relative; overflow:hidden;
  }
  .menu-feature .menu-photo{ aspect-ratio:4/5; transform:rotate(-1.5deg); box-shadow:0 8px 16px rgba(23,17,13,0.12); }
  .menu-grid > div:nth-child(2) .menu-photo{ transform:rotate(1deg); }
  .menu-photo span{
    position:absolute; left:0.9rem; bottom:0.9rem; font-family:var(--font-ui); font-size:var(--step--2);
    letter-spacing:var(--ls-ui); text-transform:uppercase; background:var(--parchment-white); padding:0.4rem 0.6rem;
    color:var(--muted); border:1px solid var(--line);
  }
  .menu-item-info{ margin-top:1.5rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
  .menu-item-info h3{ font-size:var(--step-2); }
  .menu-feature .menu-item-info h3{ font-size:var(--step-3); }
  .menu-item-info p{ margin:0.35rem 0 0; color:var(--muted); font-size:var(--step-0); }
  .menu-tag{
    font-family:var(--font-ui); font-size:var(--step--2); letter-spacing:var(--ls-ui); text-transform:uppercase;
    color:var(--oxblood); border:1.5px solid var(--oxblood); padding:0.3rem 0.55rem; white-space:nowrap; transform:rotate(-2deg);
  }
  @media (max-width:860px){ .menu-grid{ grid-template-columns:1fr; } .menu-feature{ grid-row:auto; } }

  /* ---------- Testimonial spotlight ---------- */
  .spotlight{ background:var(--oxblood-deep); color:var(--parchment-white); padding:9.5rem 0; text-align:center; }
  .spotlight .wrap{ max-width:780px; }
  .spot-quote{
    font-family:var(--font-display); font-style:italic; font-size:var(--step-3); line-height:var(--lh-snug);
    min-height:6.5em; display:flex; align-items:center; justify-content:center; transition:opacity 0.5s ease;
  }
  .spot-attr{ margin-top:1.5rem; font-family:var(--font-ui); font-size:var(--step--1); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--parchment); opacity:0.7; }
  .spot-attr a{
    color:inherit; text-decoration:none; border-bottom:1px solid rgba(250,248,242,0.4);
    padding-bottom:2px; transition:border-color 0.2s ease, opacity 0.2s ease;
  }
  .spot-attr a:hover{ border-color:var(--parchment-white); opacity:1; }
  .spot-dots{ display:flex; gap:0.6rem; justify-content:center; margin-top:2.2rem; }
  .spot-dots button{ width:8px; height:8px; border-radius:50%; border:1px solid var(--line-on-dark); background:transparent; padding:0; cursor:pointer; }
  .spot-dots button[aria-current="true"]{ background:var(--parchment-white); }

  /* ---------- FAQ ---------- */
  .faq{ padding:9rem 0; }
  .faq h2{ font-size:var(--step-4); margin-top:0.7rem; }
  .faq-list{ margin-top:3rem; border-top:1px solid var(--line); max-width:64rem; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{
    padding:1.7rem 0; font-family:var(--font-ui); font-size:var(--step-1); font-weight:500;
    cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    list-style:none; gap:1rem;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+"; font-size:var(--step-2); color:var(--oxblood); flex:none; line-height:1;
  }
  .faq-item[open] summary::after{ content:"\2212"; }
  .faq-item p{ padding:0 0 1.8rem; color:var(--muted); max-width:60ch; font-size:var(--step-0); }

  /* ---------- Final CTA ---------- */
  .final-cta{ padding:9.5rem 0; text-align:center; }
  .final-cta h2{ font-size:var(--step-5); }
  .final-cta p{ color:var(--muted); margin:1.4rem auto 2.8rem; max-width:42ch; line-height:var(--lh-loose); }

  /* ---------- Footer ---------- */
  footer{ background:var(--ink); color:var(--parchment); padding:7.5rem 0 2.5rem; position:relative; overflow:hidden; }
  .footer-logo{ max-width:420px; opacity:0.9; margin-bottom:4rem; filter:brightness(0) invert(1); opacity:0.14; }
  .footer-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1.1fr; gap:3.2rem; border-top:1px solid var(--line-on-dark); padding-top:3rem; position:relative; z-index:1; }
  /* Footer column headings. These are h2, not h4, despite being small and
     quiet. They used to be h4 sitting directly after the page's closing h2,
     which made every single page on the site skip two heading levels, and a
     screen reader user navigating by heading would hear the outline jump.
     The tag carries the structure, this rule carries the look. */
  footer h2{ font-family:var(--font-ui); font-size:var(--step--2); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); margin:0 0 1rem; font-weight:600; }
  footer ul{ list-style:none; margin:0; padding:0; }
  footer a, footer p{ font-family:var(--font-ui); font-size:var(--step--1); color:var(--parchment); text-decoration:none; line-height:2; opacity:0.85; }
  footer a:hover{ opacity:1; }
  .footer-bottom{
    margin-top:3.6rem; padding-top:1.8rem; border-top:1px solid var(--line-on-dark);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
    font-family:var(--font-ui); font-size:var(--step--2); color:var(--muted); position:relative; z-index:1;
  }
  @media (max-width:700px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

  /* ============================================
     Additional components for inner pages
     (Menu, Find Us, Book a Table, About, Reviews)
    , reuses existing tokens/motifs, adds nothing
     that breaks the established system.
     ============================================ */

  /* Simple inner-page hero (vs Home's split/overlap hero) */
  .page-hero{
    background: var(--oxblood-deep); color: var(--parchment-white);
    padding: 10.5rem 0 5rem; position: relative; overflow: hidden;
  }
  .page-hero::after{
    content: ""; position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .page-hero .wrap{ position: relative; z-index: 1; max-width: 860px; }
  .page-hero h1{ font-size: var(--step-6); margin-top: 0.8rem; }
  .page-hero p.lede{ font-size: var(--step-1); max-width: 46ch; color: var(--parchment); opacity: 0.85; margin-top: 1.4rem; }

  /* Nav active-page indicator */
  .nav-links a[aria-current="page"]{ opacity: 1; border-bottom: 1px solid var(--brass, currentColor); }

  /* Taped photo frame, same motif as .map-frame, reusable for any image */
  .photo-frame{
    position: relative; background: var(--parchment-white); padding: 0.6rem;
    border: 1px solid var(--line); box-shadow: 0 8px 16px rgba(23,17,13,0.13);
  }
  .photo-frame.rotate-left{ transform: rotate(-1.5deg); }
  .photo-frame.rotate-right{ transform: rotate(1.2deg); }
  .photo-frame::before, .photo-frame::after{
    content: ""; position: absolute; width: 74px; height: 26px;
    background: rgba(237,234,223,0.75); border: 1px solid rgba(23,17,13,0.12);
  }
  .photo-frame::before{ top: -13px; left: 24px; transform: rotate(-7deg); }
  .photo-frame::after{ bottom: -13px; right: 28px; transform: rotate(6deg); }
  @media (max-width: 860px){ .photo-frame{ transform: rotate(0deg) !important; } }

  /* Generic pending-embed / placeholder panel (ResDiary, PDF viewer) */
  .embed-placeholder{
    aspect-ratio: 16/9;
    background: repeating-linear-gradient(135deg, var(--parchment) 0 14px, var(--parchment-white) 14px 28px);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 2rem;
  }
  .embed-placeholder span{
    font-family: var(--font-ui); font-size: var(--step--2); letter-spacing: var(--ls-ui); text-transform: uppercase;
    color: var(--muted); background: var(--parchment-white); padding: 0.6rem 1rem; border: 1px solid var(--line);
  }

  /* Menu page: the PDF links and the notes line.
     The inline PDF viewer that lived here in v1.7.0 is gone. With the whole
     menu now on the page as text, an embedded viewer showed the same menu a
     second time, doubled the weight of the page's largest element, and did
     not render at all on iOS. The PDF is still one tap away, it is just not
     drawn twice. */
  .menu-pdf-links{
    margin-top: 2.5rem;
    display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;
  }

  /* Menu listing.

     Rebuilt to read like the printed card rather than like a web table. The
     previous version had a heading per group, each dish as a name in the
     display face with the garnish underneath in grey, a rule between every
     row and the price pinned to the right margin. All of that is normal for
     a restaurant website and none of it is on Tusco's actual menu, which is
     one dish per line, price at the end of the line, and white space instead
     of headings.

     Dropping the rules matters more than it sounds. Twelve full width lines
     across a 900px column made the page read as a spreadsheet, and the eye
     stopped at each rule instead of running down the list. */
  .menu-list{
    list-style: none; margin: 0 0 2.75rem; padding: 0;
  }
  .menu-list li{
    margin: 0 0 0.9rem; max-width: 62ch;
    font-size: var(--step-0); line-height: 1.65; color: var(--ink);
  }
  /* Italic, and no visible pound sign, as printed. The sign is still there
     for screen readers, in a .sr-only span in the markup. */
  .dish-price{
    font-style: italic; color: var(--oxblood); white-space: nowrap;
    font-variant-numeric: tabular-nums; margin-left: 0.15rem;
  }
  /* The one heading the printed menu has. Lowercase italic display face,
     matching the card, rather than the uppercase letterspaced label style
     used everywhere else on the site. */
  .menu-heading{
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: var(--step-2); color: var(--ink);
    text-transform: none; letter-spacing: 0;
    margin: 0 0 1.1rem;
  }
  .menu-note{
    font-style: italic; color: var(--muted); font-size: var(--step--1);
    margin: 0.35rem 0 0; max-width: 62ch;
  }
  .menu-note:first-of-type{ margin-top: 2.5rem; }

  /* Press review grid (Reviews page, all quotes shown at once, not rotating) */
  .press-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
  .press-card{
    background: var(--parchment-white); border-left: 3px solid var(--oxblood);
    padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: 1.2rem;
  }
  .press-card blockquote{
    font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: var(--lh-snug); margin: 0;
  }
  .press-card cite{
    font-family: var(--font-ui); font-style: normal; font-size: var(--step--2); letter-spacing: var(--ls-ui);
    text-transform: uppercase; color: var(--muted);
  }
  .press-card cite a{ color: var(--oxblood); text-decoration: none; border-bottom: 1px solid var(--oxblood); padding-bottom: 1px; }
  @media (max-width: 900px){ .press-grid{ grid-template-columns: 1fr; } }

  /* Pull quote (About page, owner quote) */
  .pull-quote{
    border-left: 3px solid var(--oxblood); padding: 0.3rem 0 0.3rem 1.8rem; margin: 2.5rem 0;
  }
  .pull-quote p{
    font-family: var(--font-display); font-style: italic; font-size: var(--step-3); line-height: var(--lh-snug); margin: 0; color: var(--ink);
  }
  .pull-quote cite{ display: block; margin-top: 0.8rem; font-family: var(--font-ui); font-style: normal; font-size: var(--step--2); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--muted); }

  /* Two-column narrative block (About page sections) */
  .narrative{ padding: 5.5rem 0; }
  .narrative-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .narrative-grid.reverse .photo-col{ order: -1; }
  .narrative h2{ font-size: var(--step-4); margin-top: 0.6rem; }
  .narrative p{ color: var(--muted); font-size: var(--step-0); line-height: var(--lh-loose); margin-top: 1.1rem; }
  @media (max-width: 860px){
    .narrative-grid{ grid-template-columns: 1fr; }
    .narrative-grid.reverse .photo-col{ order: 0; }
    .press-grid{ grid-template-columns: 1fr; }
  }

/* ---------- Image fit rules for filled photo slots (hero, menu cards, photo-frames) ---------- */
.hero-photo, .menu-photo, .wednesday-photo{ position:relative; }
.hero-photo picture, .menu-photo picture, .embed-placeholder picture, .wednesday-photo picture{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.embed-placeholder:has(picture){ padding:0; background:none; }
.hero-photo img, .menu-photo img, .embed-placeholder img, .wednesday-photo img{ width:100%; height:100%; object-fit:cover; display:block; }