/* TenTen Café — shared styles for the site and the menu page. */
  :root{
    --ivory:#FAF6EF;
    --marble:#EFEBE3;
    --card:#FFFDF8;
    --ink:#1C1A17;
    --muted:#6E675C;
    /* Two golds, on purpose: --brass is decorative only (frames, rules, stars,
       display accents at 24px+). Any gold TEXT below 24px must use --gold-text,
       which holds 4.6:1 on ivory. One violated variable is the difference
       between luxurious and gaudy. */
    --brass:#B08A3E;
    --gold-text:#7E5B1B;
    --teal:#24404A;
    --mist:#E7EBEC;
    --greyblue:#93A5B2;
    --hairline:#E4DCCB;
    --frame:rgba(176,138,62,.55);
    --frame-in:rgba(176,138,62,.3);
    --topbar-h:64px;
    --rail-h:44px;
    --page-h:clamp(480px,76vh,680px);
  }
  @media(max-width:639px){:root{--topbar-h:56px}}
  @media(max-width:860px){:root{--page-h:clamp(440px,70vh,600px)}}
  *{margin:0;padding:0;box-sizing:border-box}
  /* Class rules like .chapters{display:flex} would otherwise beat the UA's
     [hidden] rule, and the book toggles visibility with the attribute. */
  [hidden]{display:none!important}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
  body{
    font-family:'Jost','Century Gothic',Futura,system-ui,sans-serif;
    background:var(--ivory);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%;height:auto}
  a{color:inherit}
  .display{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.015em;line-height:1.12}
  .skip{
    position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:var(--ivory);
    padding:12px 20px;border-radius:0 0 6px 0;font-weight:600;text-decoration:none;
  }
  .skip:focus{left:0}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .on-dark :focus-visible{outline-color:var(--ivory)}

  .eyebrow{
    font-weight:600;font-size:.78rem;text-transform:uppercase;
    letter-spacing:.14em;color:var(--gold-text);
  }
  .wrap{max-width:1160px;margin:0 auto;padding:0 20px}

  /* ---------- deco frame: double hairline + four-point star, quoting their poster ---------- */
  .frame{position:relative;padding:10px;border:1px solid var(--frame)}
  .frame::after{content:"";position:absolute;inset:4px;border:1px solid var(--frame-in);pointer-events:none}
  .frame .star{
    position:absolute;top:-7px;left:50%;transform:translateX(-50%);
    width:14px;height:14px;color:var(--brass);
    background:var(--ivory);padding:0 4px;box-sizing:content-box;
  }
  .band-marble .frame .star{background:var(--marble)}
  .band-mist .frame .star{background:var(--mist)}
  .frame .ph{overflow:hidden}
  .frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  @media (prefers-reduced-motion: no-preference){
    .frame:hover img,.frame:focus-within img{transform:scale(1.03)}
  }

  /* ---------- topbar ---------- */
  .topbar{
    position:sticky;top:0;z-index:100;background:var(--ivory);
    border-bottom:1px solid transparent;
    transition:box-shadow .25s ease,background .25s ease,border-color .25s ease;
  }
  .topbar.scrolled{
    background:rgba(250,246,239,.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-color:var(--hairline);
    box-shadow:0 1px 12px rgba(28,26,23,.06);
  }
  .topbar-inner{
    max-width:1160px;margin:0 auto;height:var(--topbar-h);padding:0 20px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .brand{display:inline-flex;align-items:center;text-decoration:none;min-height:44px}
  /* The lockup ships exactly as drawn — one unit, never recomposed. Colour via mask. */
  .brand-mark{
    width:88px;height:46px;background:var(--ink);flex:0 0 auto;
    -webkit-mask:url('/logo-lockup.svg') no-repeat center/contain;
    mask:url('/logo-lockup.svg') no-repeat center/contain;
  }
  @media(max-width:639px){.brand-mark{width:77px;height:40px}}
  .topnav{display:none;gap:6px}
  @media(min-width:860px){.topnav{display:flex}}
  .topnav a{
    text-decoration:none;font-weight:500;font-size:.95rem;padding:10px 12px;
    min-height:44px;display:inline-flex;align-items:center;
    border-bottom:2px solid transparent;
  }
  .topnav a:hover{border-bottom-color:var(--brass);color:var(--gold-text)}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;padding:11px 22px;border-radius:999px;
    font-weight:600;font-size:.95rem;text-decoration:none;
    transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  .btn-ink{background:var(--ink);color:var(--ivory)}
  .btn-ink:hover{background:var(--teal);box-shadow:0 6px 16px rgba(28,26,23,.18)}
  .btn-outline{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
  .btn-outline:hover{background:var(--ink);color:var(--ivory)}
  .top-order .long{display:none}
  @media(min-width:640px){.top-order .long{display:inline}.top-order .short{display:none}}
  /* Below 860px the nav is gone; hours & directions are the top phone task,
     so Visit keeps a one-tap route from the first viewport. */
  .top-visit{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;margin-left:auto;font-weight:600;font-size:.9rem;text-decoration:none}
  .top-visit:hover{color:var(--gold-text)}
  @media(min-width:860px){.top-visit{display:none}}

  /* ---------- hero ---------- */
  .hero{max-width:1160px;margin:0 auto;padding:56px 20px 72px}
  @media(min-width:1000px){
    .hero{display:grid;grid-template-columns:55fr 45fr;gap:56px;align-items:center;padding-top:72px}
  }
  .hero h1{
    font-size:clamp(2.4rem,6.5vw,4.25rem);line-height:1.05;letter-spacing:-.015em;
    margin:18px 0 20px;max-width:12ch;
  }
  .hero .sub{color:var(--muted);font-size:1.08rem;max-width:46ch;margin-bottom:28px}
  .hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-bottom:22px}
  .link-menu{
    font-weight:600;text-decoration:none;border-bottom:2px solid var(--brass);
    padding:8px 2px;min-height:44px;display:inline-flex;align-items:center;gap:6px;
  }
  .link-menu:hover{color:var(--gold-text)}
  .link-uber{font-size:.9rem;color:var(--gold-text);text-decoration:none;border-bottom:1px solid transparent;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
  .link-uber:hover{border-bottom-color:var(--gold-text)}
  .proof{display:flex;align-items:center;gap:10px;font-weight:500;font-size:.95rem;flex-wrap:wrap}
  .stars{display:inline-flex;gap:3px;color:var(--brass)}
  .stars svg{width:13px;height:13px}
  .star-partial{position:relative;width:13px;height:13px}
  .star-partial .fill{position:absolute;inset:0;width:80%;overflow:hidden}
  .star-partial .outline{opacity:.35}
  .hero-photo{margin-top:40px}
  @media(min-width:1000px){.hero-photo{margin-top:0;max-width:560px;justify-self:end;width:100%}}
  .hero-photo .ph{aspect-ratio:4/5}
  .hero-photo img{object-position:50% 38%}

  /* ---------- marquee ---------- */
  .marquee{
    border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
    height:52px;overflow:hidden;position:relative;display:flex;align-items:center;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  }
  .marquee-track{display:flex;gap:0;white-space:nowrap;font-weight:600;font-size:.8rem;letter-spacing:.14em}
  .marquee-track span{padding-right:.5em}
  .marquee-track b{color:var(--brass);font-weight:600;padding:0 .5em}
  @media (prefers-reduced-motion: no-preference){
    .marquee-track{animation:slide 30s linear infinite}
    .marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
  }
  @keyframes slide{to{transform:translateX(-50%)}}

  /* ---------- sections ---------- */
  .section{padding:96px 0}
  @media(max-width:720px){.section{padding:64px 0}}
  h2.display{font-size:clamp(1.9rem,4.2vw,2.9rem);margin-top:10px}
  .band-marble{background:var(--marble)}
  .band-mist{background:var(--mist)}

  /* ---------- signatures ---------- */
  .sig-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:40px}
  .sig-note{font-size:.9rem;color:var(--muted);max-width:34ch}
  .sig-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px}
  .sig-grid::-webkit-scrollbar{display:none}
  .sig-card{flex:0 0 78vw;scroll-snap-align:center}
  @media(min-width:720px){
    .sig-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:24px;overflow:visible;margin:0;padding:0}
    .sig-card{flex:none}
    .sig-sofre{grid-column:1/6;grid-row:1/3}
    .sig-english{grid-column:6/10;grid-row:1}
    .sig-pancakes{grid-column:10/13;grid-row:1}
    .sig-benedict{grid-column:6/10;grid-row:2}
    .sig-notecard{grid-column:10/13;grid-row:2}
  }
  .sig-card .ph{overflow:hidden;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(28,26,23,.08)}
  .sig-sofre .ph{aspect-ratio:3/4}
  /* The hero shows the same table from further back — pull this crop down onto
     the tray itself so the two reads are "the room" vs "the dish". */
  .sig-sofre img{object-position:45% 72%}
  .sig-english .ph,.sig-pancakes .ph,.sig-benedict .ph{aspect-ratio:1/1}
  .sig-card img{width:100%;height:100%;object-fit:cover;border-radius:4px;transition:transform .6s ease}
  @media (prefers-reduced-motion: no-preference){
    .sig-card:hover img{transform:scale(1.03)}
  }
  .sig-card .kicker{margin-top:14px;font-size:.72rem}
  .sig-card h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.3rem;margin:4px 0 4px}
  .sig-card p{font-size:.9rem;color:var(--muted)}
  .sig-notecard{
    background:var(--card);border:1px solid var(--hairline);border-radius:4px;
    padding:28px;display:flex;flex-direction:column;justify-content:center;gap:14px;
  }
  .sig-notecard .glyph{color:var(--brass);width:16px;height:16px}
  .sig-notecard p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;font-size:1.1rem;color:var(--ink);line-height:1.5}

  /* ---------- lattes ---------- */
  .lattes-grid{display:grid;gap:48px}
  @media(min-width:900px){.lattes-grid{grid-template-columns:1fr 1fr;align-items:center}}
  .latte-photo .ph{aspect-ratio:1/1.07}
  @media(max-width:899px){.latte-photo{order:-1}}
  .latte-list{list-style:none;margin-top:28px}
  .latte-list li{
    display:flex;align-items:baseline;gap:12px;min-height:52px;
    border-bottom:1px solid var(--hairline);padding:12px 0;
  }
  .latte-list li:last-of-type{border-bottom:none}
  /* A little cup of the colour, rather than a dot of it. Sized in em so the
     same markup works at page scale inside the book. */
  .cup{flex:0 0 auto;align-self:center;line-height:0;color:var(--ink);transition:transform .15s ease}
  .cup .cup-i{width:1.62em;height:1.37em;display:block;overflow:visible}
  .latte-list li:hover .cup{transform:scale(1.12)}
  .cup-star .cup-i{filter:drop-shadow(0 0 0.5px var(--brass))}
  .cup-star{color:var(--gold-text)}
  .latte-name{font-weight:500;font-size:.98rem}
  .leader{flex:1 1 24px;min-width:24px;border-bottom:1px dotted rgba(28,26,23,.3);margin:0 10px 4px;align-self:flex-end}
  .price{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
  .price .c{font-weight:400;font-size:80%;position:relative;top:-1px}
  /* When a long dish name wraps, drop leader AND price to the last line together —
     classic menu setting; otherwise the dots orphan under a floated price. */
  .mitem-row .price,.latte-list .price{align-self:flex-end}
  .latte-signature{flex-wrap:wrap}
  .latte-signature .latte-name{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.2rem}
  .latte-signature .desc{flex-basis:100%;padding-left:24px;font-size:.87rem;color:var(--muted)}
  .tag-signature{
    font-size:.62rem;font-weight:600;letter-spacing:.12em;color:#A34509;
    border:1px solid rgba(163,69,9,.45);border-radius:999px;padding:3px 9px;margin-left:8px;
    white-space:nowrap;
  }
  .latte-note{margin-top:18px;font-size:.85rem;color:var(--gold-text)}
  /* Says out loud that a section is a sample, so nobody reads it as the menu */
  .more-note{margin-top:10px;font-size:.85rem}
  .more-note a{
    color:var(--gold-text);text-decoration:none;font-weight:600;
    display:inline-block;padding:8px 0;min-height:44px;line-height:1.6;
    border-bottom:1px solid transparent;
  }
  .more-note a:hover,.more-note a:focus-visible{border-bottom-color:currentColor}
  .more-note a span{margin-left:4px;display:inline-block;transition:transform .2s ease}
  .more-note a:hover span{transform:translateX(3px)}
  .on-dark-note{margin-top:16px}
  .on-dark-note a{color:var(--brass)}
  @media(prefers-reduced-motion:reduce){.more-note a span{transition:none}.more-note a:hover span{transform:none}}
  @media(max-width:639px){
    /* keep name–price on one line; the badge gets its own line instead of
       forcing a full-width orphan dot leader */
    .latte-signature .leader{display:none}
    .latte-signature .price{margin-left:auto}
    .latte-signature .tag-signature{order:5;flex-basis:100%;max-width:max-content;margin:6px 0 0 24px}
  }

  /* ---------- persian band ---------- */
  .persian{background:var(--teal);color:var(--ivory);position:relative;overflow:hidden}
  .persian .keyline{position:absolute;inset:14px;border:1px solid rgba(176,138,62,.5);pointer-events:none}
  @media(max-width:640px){.persian .keyline{inset:10px}}
  .persian .watermark{
    position:absolute;right:-90px;bottom:-56px;width:470px;height:244px;
    background:linear-gradient(135deg,#D8B463,#A97822);opacity:.06;
    -webkit-mask:url('/logo-lockup.svg') no-repeat center/contain;
    mask:url('/logo-lockup.svg') no-repeat center/contain;
  }
  @media(max-width:640px){.persian .watermark{display:none}}
  .persian-inner{max-width:980px;margin:0 auto;padding:0 32px;text-align:center;position:relative}
  .persian .eyebrow{color:#AEBFC9}
  .persian h2{color:var(--ivory)}
  .persian .lede{color:rgba(250,246,239,.88);font-size:1.05rem;line-height:1.7;max-width:62ch;margin:22px auto 0}
  .tray-cards{display:grid;gap:20px;margin-top:44px;text-align:left}
  @media(min-width:760px){.tray-cards{grid-template-columns:repeat(3,1fr)}}
  .tray{
    background:rgba(255,255,255,.05);border:1px solid rgba(176,138,62,.35);
    border-radius:4px;padding:26px;text-decoration:none;display:block;
    transition:border-color .2s ease,background .2s ease;
  }
  .tray:hover{border-color:rgba(216,180,99,.7);background:rgba(255,255,255,.08)}
  .tray h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.25rem;color:var(--ivory)}
  .tray .translit{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:.85rem;color:#D8B463;margin:2px 0 10px;display:block}
  .tray p{color:rgba(250,246,239,.75);font-size:.9rem;margin-bottom:0}
  .persian .closing{
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
    color:#D8B463;margin-top:40px;font-size:1.1rem;
  }

  /* ---------- menu ---------- */
  .menu-intro{text-align:center;max-width:640px;margin:0 auto 36px;padding:0 20px}
  .menu-key{color:var(--muted);font-size:.95rem;margin-top:14px}
  .rail{
    position:sticky;top:var(--topbar-h);z-index:90;
    background:rgba(250,246,239,.94);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--hairline);
  }
  .rail-inner{
    max-width:1160px;margin:0 auto;padding:0 20px;
    display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  }
  .rail-inner::-webkit-scrollbar{display:none}
  .rail a{
    flex:0 0 auto;text-decoration:none;font-weight:600;font-size:.74rem;
    text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
    min-height:var(--rail-h);display:inline-flex;align-items:center;
    border-bottom:2px solid transparent;white-space:nowrap;
  }
  .rail a:hover{color:var(--ink)}
  .rail a.active{color:var(--ink);border-bottom-color:var(--brass)}
  .menu-wrap{max-width:880px;margin:0 auto;padding:24px 20px 0}
  .master{
    display:flex;align-items:center;gap:20px;margin:56px 0 8px;
    font-weight:600;font-size:.9rem;letter-spacing:.3em;text-transform:uppercase;
  }
  .master::before,.master::after{
    content:"";flex:1;height:6px;
    border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  }
  .msection{
    padding-top:40px;scroll-margin-top:calc(var(--topbar-h) + var(--rail-h) + 20px);
  }
  .msection-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
  .msection-head .num{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;color:var(--gold-text);font-size:1.1rem;white-space:nowrap}
  /* Pin the optical size: at 24px Fraunces' opsz axis swaps to its closed "knot"
     ampersand, which reads as a wrong glyph next to the open form elsewhere. */
  .msection-head h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;font-variation-settings:'opsz' 18}
  .msection-head::after{content:"";flex:1;border-bottom:1px solid var(--hairline);align-self:center}
  .msection-note{font-style:italic;font-size:.85rem;color:var(--muted);margin-bottom:18px}
  .mgroup{margin-top:32px;font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
  .mfood{max-width:720px}
  .mitems{list-style:none}
  .mitem{padding:11px 0}
  .mitem-row{display:flex;align-items:baseline}
  .mname{font-weight:500;font-size:.98rem}
  .vtag{
    display:inline-block;font-size:.62rem;font-weight:600;color:#556A33;
    border:1px solid rgba(85,106,51,.5);background:rgba(126,145,89,.12);
    border-radius:3px;padding:1px 6px;margin-left:8px;vertical-align:2px;
  }
  .mdesc{font-size:.87rem;color:var(--muted);max-width:60ch;margin-top:3px}
  .mopts{font-size:.82rem;color:var(--gold-text);margin-top:4px}
  .mdrink{display:grid;column-gap:48px}
  @media(min-width:760px){.mdrink{grid-template-columns:1fr 1fr}}
  .mflat{font-size:.95rem;color:var(--ink);margin-top:6px}
  .mflat b{font-weight:500}
  .mflat i{color:var(--brass);font-style:normal;padding:0 4px}
  .crosslink{font-size:.85rem;color:var(--gold-text);text-decoration:none;border-bottom:1px solid rgba(138,101,32,.4);white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
  .crosslink:hover{border-bottom-color:var(--gold-text)}

  /* ---------- reviews ---------- */
  .reviews-inner{max-width:900px;margin:0 auto;padding:0 20px;text-align:center}
  .pullquote{
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
    font-size:clamp(1.4rem,3.5vw,2rem);line-height:1.4;max-width:34ch;margin:30px auto 44px;
    position:relative;
  }
  .pullquote .q{color:var(--brass);font-size:1.6em;line-height:0;vertical-align:-.3em;padding-right:4px}
  .review-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  .review-chips span{background:var(--card);border:1px solid var(--hairline);border-radius:999px;padding:10px 20px;font-size:.95rem}
  .review-src{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:14px}
  .rating-badge{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:36px;font-weight:500}

  /* ---------- visit ---------- */
  .visit-grid{display:grid;gap:48px}
  @media(min-width:960px){.visit-grid{grid-template-columns:55fr 45fr;align-items:start}}
  .visit .sub{color:var(--muted);margin-top:12px;max-width:44ch}
  .visit-cards{display:grid;gap:16px;margin-top:32px}
  .vcard{background:var(--card);border:1px solid #C9D2D4;border-radius:4px;padding:24px}
  .vcard h3{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px}
  .vcard .addr{font-size:1.02rem}
  .vlink{color:var(--gold-text);font-weight:600;text-decoration:none;border-bottom:2px solid var(--brass);padding:6px 0;margin-top:8px;display:inline-flex;align-items:center;min-height:44px}
  .vlink:hover{color:var(--ink)}
  .hours{width:100%;border-collapse:collapse;font-size:.97rem}
  .hours th,.hours td{padding:8px 0;border-bottom:1px dotted #C9D2D4}
  .hours th{text-align:left;font-weight:400}
  .hours tr:last-child th,.hours tr:last-child td{border-bottom:none}
  .hours td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
  .vcard .foot{font-size:.8rem;color:var(--muted);margin-top:10px}
  .vbtns{display:flex;flex-direction:column;gap:12px}
  .vbtns .btn{width:100%;min-height:48px}
  /* brand marks, never the words */
  .sicon{width:20px;height:20px;flex:none;display:block}
  .booknote{
    margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  }
  .booknote h4{
    font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-text);margin-bottom:6px;
  }
  .booknote p{font-size:.85rem;line-height:1.65;color:var(--muted)}
  .booknote a{color:var(--gold-text);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(176,138,62,.5)}
  .booknote a:hover{border-bottom-color:currentColor}
  .vbtns .socials{display:flex;justify-content:center;gap:10px;margin-top:4px}
  .vbtns .socials a{
    width:52px;height:46px;display:inline-flex;align-items:center;justify-content:center;
    color:var(--gold-text);border:1px solid rgba(176,138,62,.45);border-radius:4px;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  .vbtns .socials a:hover,.vbtns .socials a:focus-visible{
    background:var(--ink);border-color:var(--ink);color:var(--ivory)}
  .vbtns .btn-ink{display:inline-flex;align-items:center;justify-content:center;gap:9px}
  .visit-photo .ph{aspect-ratio:4/5}
  @media(max-width:959px){.visit-photo{max-width:560px}}

  /* ---------- photographed dishes (menu page) ---------- */
  .gallery{padding:64px 20px 8px;max-width:1180px;margin:0 auto}
  .gallery-head{text-align:center;max-width:22ch;margin:0 auto 34px}
  @media(min-width:760px){.gallery-head{max-width:34ch}}
  .gallery-head .sub{margin-top:10px}
  .dish-grid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
  @media(min-width:640px){.dish-grid{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:980px){.dish-grid{grid-template-columns:repeat(4,1fr);gap:22px}}
  .dish{
    display:block;text-decoration:none;color:inherit;border:1px solid #C9D2D4;border-radius:4px;
    background:var(--card);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  }
  .dish:hover,.dish:focus-visible{transform:translateY(-3px);border-color:var(--brass);box-shadow:0 10px 24px rgba(28,26,23,.13)}
  .dish-ph{display:block;aspect-ratio:1/1;overflow:hidden;background:#26282b}
  .dish-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
  .dish:hover .dish-ph img{transform:scale(1.045)}
  .dish-row{
    display:flex;align-items:baseline;gap:10px;padding:12px 14px 14px;
    font-size:.9rem;line-height:1.4;min-height:64px;
  }
  .dish-row b{font-weight:600;color:var(--ink);flex:1}
  .dish-row i{font-style:normal;font-weight:600;color:var(--gold-text);white-space:nowrap}
  @media(prefers-reduced-motion:reduce){
    .dish,.dish-ph img{transition:none}
    .dish:hover{transform:none}
    .dish:hover .dish-ph img{transform:none}
  }

  /* ---------- footer ---------- */
  footer{padding:48px 20px 56px;text-align:center}
  footer .foot-mark{
    width:132px;height:69px;margin:0 auto 18px;background:var(--brass);
    -webkit-mask:url('/logo-lockup.svg') no-repeat center/contain;
    mask:url('/logo-lockup.svg') no-repeat center/contain;
  }
  footer .l1{font-size:.9rem;font-weight:500}
  footer .l2{font-size:.84rem;color:var(--muted);margin-top:6px}
  footer .l2 a,footer .demo-note a{display:inline-block;padding:10px 2px}
  footer .foot-social{display:flex;justify-content:center;gap:10px;margin-top:12px}
  footer .foot-social a{
    width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
    color:var(--gold-text);border:1px solid rgba(176,138,62,.4);border-radius:999px;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  footer .foot-social a:hover,footer .foot-social a:focus-visible{
    background:var(--gold-text);border-color:var(--gold-text);color:var(--ivory)}
  footer .demo-note{
    max-width:640px;margin:28px auto 0;border:1px dashed rgba(176,138,62,.6);
    border-radius:4px;padding:16px 20px;font-size:.86rem;color:var(--ink);
  }
  footer .demo-note a{color:var(--gold-text);font-weight:600;text-decoration:none}
  footer .demo-note a:hover{text-decoration:underline}

  .backtop{
    position:fixed;right:18px;bottom:18px;z-index:110;width:46px;height:46px;
    border-radius:50%;background:var(--ink);color:var(--ivory);
    display:none;align-items:center;justify-content:center;text-decoration:none;
    /* permanent ivory ring so the button and its focus state survive the teal band */
    box-shadow:0 4px 14px rgba(28,26,23,.3),0 0 0 2px var(--ivory);
  }
  .backtop.show{display:flex}
  .backtop:focus-visible{outline:none;box-shadow:0 4px 14px rgba(28,26,23,.3),0 0 0 2px var(--ivory),0 0 0 4px var(--ink)}
  .backtop svg{width:16px;height:16px}

  /* ---------- ordering: three platforms, equal billing ---------- */
  .order-block{margin:0 0 24px}
  .order-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px}
  .order-trio{display:flex;flex-wrap:wrap;gap:10px}
  .btn-order{background:var(--card);border:1.5px solid var(--hairline);color:var(--ink);padding:11px 18px;font-size:.9rem}
  .btn-order:hover{border-color:var(--ink);background:var(--ink);color:var(--ivory)}
  /* A dot, not a logo: the platform is recognisable without importing three
     foreign brand marks into a page built on one palette. */
  .pdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--c)}
  .order-menu{position:relative}
  .order-menu>summary{list-style:none;cursor:pointer;display:inline-flex}
  .order-menu>summary::-webkit-details-marker{display:none}
  .order-menu>summary::marker{content:""}
  .order-pop{
    position:absolute;right:0;top:calc(100% + 10px);z-index:120;min-width:222px;
    background:var(--card);border:1px solid var(--hairline);border-radius:10px;padding:8px;
    box-shadow:0 14px 34px rgba(28,26,23,.16);display:flex;flex-direction:column;gap:2px;
  }
  .order-pop a .sicon{width:17px;height:17px;margin-right:2px}
  .order-pop a{
    display:flex;align-items:center;gap:11px;min-height:44px;padding:8px 12px;border-radius:7px;
    text-decoration:none;font-weight:500;font-size:.92rem;white-space:nowrap;
  }
  .order-pop a:hover{background:var(--marble)}
  .order-pop .sep{height:1px;background:var(--hairline);margin:4px 8px}

  /* ---------- about ---------- */
  .about-grid{display:grid;gap:44px}
  @media(min-width:900px){.about-grid{grid-template-columns:44fr 56fr;align-items:center}}
  .about-photo .ph{aspect-ratio:4/5}
  @media(max-width:899px){.about-photo{max-width:420px;order:-1}}
  .about h2{max-width:15ch}
  .about p{color:var(--muted);margin-top:18px;max-width:58ch;line-height:1.75}
  .about p.lead{color:var(--ink);font-size:1.12rem}
  .about-quote{
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;color:var(--ink);
    font-size:clamp(1.15rem,2.3vw,1.42rem);line-height:1.5;max-width:44ch;
    border-left:2px solid var(--brass);padding-left:20px;margin:28px 0;
  }
  .about-quote cite{
    display:block;margin-top:12px;font-family:'Jost',system-ui,sans-serif;font-style:normal;
    font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);
  }
  .about-sign{margin-top:20px;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}

  /* ---------- the menu, bound as a book ---------- */
  .menu-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:28px 0 4px}
  .btn-lg{padding:17px 34px;font-size:1.05rem}
  .menu-cta .hint{font-size:.82rem;color:var(--muted)}
  .bookwrap{max-width:1120px;margin:0 auto;padding:0 20px}
  /* strip and bar take the book's own width, so the object reads as one piece */
  .book-shell .chapters,.book-shell .book-bar,.book-shell .book-tools{
    width:min(100%,calc(var(--sp-w,1000px) + 2*var(--board,16px)));margin-left:auto;margin-right:auto;
  }
  .chapters{
    display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding:2px 0 14px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
  }
  .chapters::-webkit-scrollbar{display:none}
  .chapters button{
    flex:0 0 auto;background:none;border:0;padding:0 2px;cursor:pointer;font:inherit;
    font-weight:600;font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;
  }
  .chapters button:hover{color:var(--ink)}
  .chapters button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--brass)}

  /* A bound object sitting on the page, not a page shaped like one. The board
     and the spread are sized by book.js to fit the viewport, so the whole book
     is in the frame at once and never changes size when a page turns. */
  .book{
    position:relative;margin:0 auto;width:max-content;max-width:100%;
    padding:var(--board,16px);border-radius:7px;perspective:2600px;
    background:
      linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),
      linear-gradient(160deg,#27393b,#17262a);
    box-shadow:0 34px 64px rgba(28,26,23,.24),0 6px 14px rgba(28,26,23,.12);
  }
  /* The fore-edges: the stack you have turned on the left, what is left on the
     right. book.js moves the two widths as you go through. */
  .edge{
    position:absolute;top:calc(var(--board,16px) + 5px);bottom:calc(var(--board,16px) + 5px);
    z-index:1;pointer-events:none;border-radius:2px;
    background:repeating-linear-gradient(90deg,rgba(28,26,23,.20) 0 1px,rgba(252,250,246,.92) 1px 3px);
  }
  .edge-l{right:calc(100% - var(--board,16px));width:var(--stack-l,4px);box-shadow:inset -4px 0 7px rgba(28,26,23,.18)}
  .edge-r{left:calc(100% - var(--board,16px));width:var(--stack-r,14px);box-shadow:inset 4px 0 7px rgba(28,26,23,.18)}

  .spread{
    position:relative;display:flex;overflow:hidden;z-index:2;
    width:var(--sp-w,1000px);height:var(--sp-h,714px);
    background:var(--card);border-radius:2px;
    box-shadow:0 1px 3px rgba(28,26,23,.30);
  }
  .spread:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
  .pg{flex:1 1 50%;min-width:0;padding:1.9em 2.15em 2.7em;position:relative;font-size:var(--pgfs,16px)}
  .pg-r{border-left:1px solid var(--hairline)}
  .pgc{height:auto;overflow:hidden}
  .gutter{
    position:absolute;left:50%;top:0;bottom:0;width:86px;transform:translateX(-50%);pointer-events:none;z-index:3;
    background:linear-gradient(90deg,transparent,rgba(28,26,23,.05) 34%,rgba(28,26,23,.13) 50%,rgba(28,26,23,.05) 66%,transparent);
  }
  .folio{
    position:absolute;left:2.15em;right:2.15em;bottom:.95em;z-index:4;pointer-events:none;
    font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    display:flex;justify-content:space-between;
  }
  /* Everything inside a page is em of the page's own size, so the whole book
     scales as one object when it is fitted to the viewport. */
  .pgc .master{margin:0 0 .9em;font-size:.78em}
  .pgc .msection{padding-top:0}
  .pgc .msection-head{margin-bottom:.32em}
  .pgc .msection-head h3{font-size:1.2em}
  .pgc .msection-head .num{font-size:.95em}
  .pgc .msection-note{font-size:.78em;margin-bottom:.56em}
  .pgc .mgroup{margin-top:.94em;font-size:.67em}
  .pgc .mitems{max-width:none}
  .pgc .mitem{padding:.44em 0}
  .pgc .mname{font-size:.9em}
  .pgc .mdesc{font-size:.785em;margin-top:.12em;max-width:none}
  .pgc .mopts{font-size:.75em;margin-top:.19em}
  .pgc .mflat{font-size:.84em}
  .pgc .price{font-size:.92em}
  .pgc .vtag{font-size:.58em;margin-left:.38em}
  .pgc .cup{margin-right:.62em}
  .pgc .cup .cup-i{width:1.5em;height:1.27em}
  .pgc .crosslink{display:none}
  .pgc .blk-head{margin-bottom:.12em}
  .pgc .leader{margin:0 .6em .25em}

  .leaf{
    position:absolute;top:0;bottom:0;right:0;width:50%;z-index:6;display:none;pointer-events:none;
    transform-style:preserve-3d;transform-origin:left center;
  }
  .leaf.on{display:block}
  .leaf-face{
    position:absolute;inset:0;background:var(--card);backface-visibility:hidden;
    padding:1.9em 2.15em 2.7em;overflow:hidden;font-size:var(--pgfs,16px);
  }
  .leaf-back{transform:rotateY(180deg)}
  .leaf-face::after{content:"";position:absolute;inset:0;pointer-events:none}
  .leaf-front::after{background:linear-gradient(90deg,rgba(28,26,23,.16),rgba(28,26,23,0) 45%)}
  .leaf-back::after{background:linear-gradient(270deg,rgba(28,26,23,.16),rgba(28,26,23,0) 45%)}
  @keyframes leafFwd{from{transform:rotateY(0)}to{transform:rotateY(-178deg)}}
  @keyframes leafBack{from{transform:rotateY(0)}to{transform:rotateY(178deg)}}
  .leaf.fwd{animation:leafFwd 620ms cubic-bezier(.42,.02,.28,1) forwards}
  .leaf.back{left:0;right:auto;transform-origin:right center;animation:leafBack 620ms cubic-bezier(.42,.02,.28,1) forwards}

  /* Where you are, what you just left, what comes next — the strip does the
     work a thumb-index does on a printed menu. */
  .book-bar{display:grid;grid-template-columns:1fr minmax(190px,auto) 1fr;align-items:stretch;gap:14px;margin-top:20px}
  .bb-side{
    display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 16px;cursor:pointer;font:inherit;
    background:var(--card);border:1px solid var(--hairline);border-radius:6px;color:var(--ink);text-align:left;
    transition:border-color .2s ease;
  }
  .bb-side:hover:not([disabled]){border-color:var(--ink)}
  .bb-side[disabled]{opacity:.34;cursor:default}
  .bb-next{justify-content:flex-end;text-align:right}
  .bb-side .ar{flex:0 0 auto;color:var(--gold-text);display:inline-flex}
  .bb-side .ar svg{width:16px;height:16px}
  .bb-side .tx{display:flex;flex-direction:column;min-width:0;gap:2px}
  .bb-side em{font-style:normal;font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .bb-side b{font-weight:500;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bb-now{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;
    padding:10px 22px;border-radius:6px;background:var(--ink);color:var(--ivory);
  }
  .bb-now b{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.02rem;text-align:center;line-height:1.25}
  .bb-now span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,246,239,.72)}
  @media(max-width:720px){
    .book-bar{grid-template-columns:1fr 1fr;grid-template-areas:"now now" "prev next";gap:10px}
    .bb-now{grid-area:now}.bb-prev{grid-area:prev}.bb-next{grid-area:next}
    .bb-side{min-height:56px;padding:8px 12px}
    .bb-side b{font-size:.84rem}
  }
  .book-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;margin-top:14px;text-align:center}
  .bb-sound{
    width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .bb-sound:hover{color:var(--ink)}
  .bb-sound svg{width:19px;height:19px}
  .book-alt button{
    background:none;border:0;padding:10px 4px;cursor:pointer;font:inherit;font-size:.85rem;
    color:var(--gold-text);border-bottom:1px solid rgba(138,101,32,.4);min-height:44px;
  }
  .book-alt button:hover{color:var(--ink)}
  #menu-source{max-width:880px;margin:26px auto 0;padding:0 20px}
  .measure{position:absolute!important;left:-10000px;top:0;visibility:hidden;pointer-events:none;height:auto}
  /* Shrink-wrapped, so offsetHeight is the real content height — a fixed-height
     box would report its own height back and every heading would break a page. */
  .measure .pgc{height:auto;overflow:hidden}
  @media(max-width:860px){
    .pg-r,.gutter{display:none}
    .leaf{width:100%}
    .book{--board:9px;border-radius:5px}
    .pg,.leaf-face{padding:1.6em 1.5em 2.4em}
    .folio{left:1.5em;right:1.5em}
  }
  @media print{
    .book-shell,.menu-cta{display:none!important}
    #menu-source[hidden]{display:block!important}
  }

  /* ---------- reveal: sun sliding onto the table ---------- */
  @media (prefers-reduced-motion: no-preference){
    .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease-out,transform .7s ease-out,filter .7s ease-out}
    .rv img{filter:brightness(1.05);transition:filter .7s ease-out}
    .rv.in{opacity:1;transform:none}
    .rv.in img{filter:brightness(1)}
    .rv-group > *{transition-delay:0s}
    .rv-group > :nth-child(2){transition-delay:.06s}
    .rv-group > :nth-child(3){transition-delay:.12s}
    .rv-group > :nth-child(4){transition-delay:.18s}
    .rv-group > :nth-child(5){transition-delay:.24s}
  }

/* ---------- the menu band on the landing page ---------- */
.menu-band{background:var(--marble)}
.menu-band-inner{max-width:720px;text-align:center}
.menu-band-sub{color:var(--muted);margin:16px auto 28px;max-width:52ch}
.menu-band-note{margin-top:18px;font-size:.85rem;color:var(--muted)}
.menu-band .btn-lg{box-shadow:0 8px 22px rgba(28,26,23,.16)}

/* ---------- the menu page ---------- */
.menu-page{padding-top:52px}
.menu-page .menu-intro{margin-bottom:30px}
.back-to-site{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-text);text-decoration:none;
}
.back-to-site:hover{color:var(--ink)}

/* ---------- menu band, with a plate to sell it ---------- */
.menu-band-grid{display:grid;gap:44px;align-items:center}
@media(min-width:900px){.menu-band-grid{grid-template-columns:42fr 58fr}}
.menu-band-photo .ph{aspect-ratio:4/5}
@media(max-width:899px){.menu-band-photo{max-width:400px;margin:0 auto}}
.menu-band-inner{max-width:620px}
@media(max-width:899px){.menu-band-inner{text-align:center;margin:0 auto}}

/* ---------- something sweet ---------- */
.sweet{background:var(--marble)}
.sweet-head{text-align:center;max-width:620px;margin:0 auto 40px}
.sweet-sub{color:var(--muted);margin-top:14px}
.sweet-grid{display:grid;gap:22px}
@media(min-width:760px){.sweet-grid{grid-template-columns:repeat(3,1fr)}}
.sweet-card{margin:0}
.sweet-card .ph{overflow:hidden;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(28,26,23,.08);aspect-ratio:1/1.18}
.sweet-card img{width:100%;height:100%;object-fit:cover;border-radius:4px;transition:transform .6s ease}
@media (prefers-reduced-motion: no-preference){.sweet-card:hover img{transform:scale(1.03)}}
.sweet-card figcaption{margin-top:12px;font-size:.9rem;color:var(--muted)}
@media(min-width:900px){.menu-band-inner{text-align:left}}
.topnav a[aria-current="page"]{border-bottom-color:var(--brass);color:var(--gold-text)}