/* ═══════════════════════════════════════════════════════════════════════════
   HOUSE SHEET — the proven system. DO NOT EDIT PER JOB.

   Lifted verbatim from andreafoods.com, 2026-09-02 — the build that came out
   right the first time and only needed tweaks. Every comment below marks a
   night we lost; leave them in.

   Colours come from css/palette.css. There is not one hue in this file.

   ── WHAT IS IN HERE ──────────────────────────────────────────────────────
   .top .brand .mark .nav ........ header: mark left, nav right, accent rule
   .tm-h .tm-word .tm-sub ........ masthead: letterspaced word between rules
   .deck .mc .deck-rail .tick .... the rotating card deck on the dark band
   .doors .door .................. one-line doors: hairline, words, hairline
   .ov .ov-shell ................. the overlay a door opens
   .mp-wrap .mp-shell ............ the framed panel (same frame, smaller)
   .g2 .dateline .press .......... the broadsheet two-column
   .strip .arch-h ................ the photo strip
   .visit .visit-row ............. the colophon — ONE ROW, two lines maximum
   .rkft-footer .................. the house footer. Identical on every page.
   .btn .kick .h2 .lead .copy .f .msg

   ── THE RULES THIS FILE ENFORCES ─────────────────────────────────────────
   · every tap target ≥ 44px            · no text colour under 19px on accent
     (2026-09-02: the rail, the nav, the colophon email, the footer links and the credit
      all shipped from Andrea at 30-35px. Fixed here so no site inherits it again.)
   · nothing under 10.5px               · reduced-motion kills every transition
   · the deck stage derives from --cw   · one row rails, never a wrapped pile
   ═══════════════════════════════════════════════════════════════════════════ */

/* THE HOUSE SHEET — the store is the home page. Red from their own logo; cream ground;
   the archive photography lives at the bottom with the story. Every text role measured
   on the REAL ground under it: ink/paper 14.4:1 · red-deep/paper 6.0:1 · dim/paper 5.3:1
   · parchment/dark 12.8:1 · meta/dark 8.1:1. The accent is structural — rules,
   wordmark, big headings (3.85:1, large text only). Never a text colour under 19px. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep)}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;line-height:1.05;color:var(--ink)}
p{margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-deep);color:var(--paper);padding:13px 16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;z-index:200;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* preview shield — all three parts together (this bar + noindex + robots) */
.preview-note{background:var(--accent-deep);color:var(--paper);text-align:center;font-weight:600;font-size:11.5px;line-height:1.5;padding:9px var(--pad);position:relative;z-index:50}
.preview-note b{font-weight:800;letter-spacing:.04em}
@media print{.preview-note{display:none}}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.kick{font-weight:700;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 12px;padding-right:.3em}
.h2{font-size:clamp(32px,4.8vw,58px);letter-spacing:-.005em}
.h2 i{font-style:italic;font-weight:500}
.lead{font-family:var(--serif);font-size:clamp(18px,2.1vw,22px);line-height:1.4;color:var(--ink)}
.copy p{margin:0 0 1em;max-width:62ch}
.copy p:last-child{margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:2px;background:var(--accent-deep);color:var(--paper);text-decoration:none;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer;font-family:inherit;transition:background .2s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--accent)}
.btn[disabled]{background:var(--dim);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink);color:var(--paper)}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--pad) 10px;border-bottom:2px solid var(--accent);max-width:var(--wrap);margin:0 auto}
.brand{position:relative;display:block;flex:none;text-decoration:none}
/* 🔴 2026-09-13 — Mike: the header mark was too small and flat. The wordmark was also
   replaced with THEIR real one (FERNANDES II / STEAK HOUSE / NEWARK, NEW JERSEY /
   SINCE 1962), read off the door mat at 158 Fleming Ave. The II is theirs — never drop it.
   The ratio here MUST track assets/img/logo.svg's viewBox, which is 0 0 960 420 — NOT
   900/420. A 900-wide box letterboxes a 960-wide drawing. Measured off the file. */
.mark{display:block;width:clamp(168px,20vw,248px);aspect-ratio:960/350}
.mark img{width:100%;height:100%}
.nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,26px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:14px 0;border-bottom:1.5px solid transparent;transition:border-color .2s;display:inline-block;line-height:1.35}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--accent)}
.nav a[aria-current]{border-bottom-color:var(--accent-deep)}
.nav a.tel{color:var(--accent-deep)}
@media(max-width:760px){.top{flex-wrap:wrap;padding-bottom:4px}.nav{width:100%;justify-content:flex-start;gap:18px}.nav a{padding:14px 0}}

/* ── THE STORE — the first screen is product ───────────────────────────── */
.store{padding:clamp(10px,2vh,20px) 0 clamp(22px,3vw,34px)}
.tm-h{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,26px);margin:clamp(8px,1.6vh,18px) auto 0;line-height:1}
.tm-dash{display:block;width:clamp(26px,7vw,70px);height:1.5px;background:var(--accent);flex:0 0 auto}
.tm-word{font-family:var(--serif);font-weight:500;font-size:clamp(34px,7.5vw,60px);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-indent:.18em}
.tm-sub{text-align:center;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:8px 0 0;font-weight:600;line-height:1.6}

/* the deck: six section cards, sized from the card, never a second clamp */
/* 🔴 2026-09-02 — the page was cream on cream. Mike: "It's too white. Give me colour contrast
   on the menu. Leave them black and pick the other one." The deck sits on the palette's own
   --dark, edge to edge; the six cards stay cream with their black titles and pop off it.
   Text on this ground: meta 8.1:1 · parch 12.8:1 (measured). The logo never sits on it —
   its tagline is black. */
.deck{position:relative;margin:clamp(10px,2vh,20px) 0 0;background:var(--dark);padding:clamp(8px,1.6vh,16px) 0 clamp(10px,1.8vh,16px)}
.deck-stage{position:relative;height:calc(var(--cw) * 1.28 + 30px);perspective:1500px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.deck-in{position:relative;width:var(--cw);height:calc(var(--cw) * 1.28);transform-style:preserve-3d;cursor:grab;touch-action:pan-y}
.deck-in:active{cursor:grabbing}
.mc{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:0 16px 34px -20px rgba(34,26,26,.55);backface-visibility:hidden;will-change:transform,opacity;text-align:center;cursor:pointer}
.mc::before{content:'';position:absolute;inset:8px;border:1px solid var(--accent);border-radius:3px;pointer-events:none}
.mc-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px}
.mc-logo{width:46%;height:auto}
.mc-name{font-family:var(--serif);font-weight:500;font-size:clamp(21px,4.6vw,28px);line-height:1.05;color:var(--ink);letter-spacing:.01em}
.mc-n{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:600;line-height:1.5}
.mc-go{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;margin-top:4px}
.mc.is-front{border-color:var(--accent);box-shadow:0 18px 40px -18px rgba(34,26,26,.7)}
.mc>*{opacity:clamp(0,calc((var(--face,1) - 0.4) * 3.4),1);transition:opacity .18s linear}

/* the rail is ONE row at every width. On a phone it scrolls sideways (Mike, 2026-09-02: it
   wrapped to two rows and "reads as a loose word pile"). The auto margins on the first and
   last item centre the row when it fits and let it scroll from the start when it does not. */
.deck-rail{list-style:none;margin:clamp(8px,1.6vh,16px) 0 0;padding:0 var(--pad);display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0 clamp(14px,2.2vw,26px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.deck-rail::-webkit-scrollbar{display:none}
.deck-rail li{flex:0 0 auto}
.deck-rail li:first-child{margin-left:auto}
.deck-rail li:last-child{margin-right:auto}
.tick{appearance:none;background:none;border:0;cursor:pointer;padding:10px 0;min-height:44px;white-space:nowrap;display:inline-flex;align-items:baseline;gap:7px;font-family:var(--sans);font-weight:700;font-size:clamp(11.5px,2.5vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--meta);transition:color .22s var(--ease)}
.tick-go{color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.tick:hover,.tick:focus-visible,.tick.on{color:var(--parch);outline:0}
.tick:hover .tick-go,.tick:focus-visible .tick-go,.tick.on .tick-go{opacity:1;transform:none}
.deck-hint{text-align:center;font-size:11.5px;color:var(--meta);margin:6px 0 0;padding:0 var(--pad);letter-spacing:.04em}

/* deck-safe.css — house file, inlined verbatim so the page ships with one request */
.deck,.deck *,.deck-in,[data-deck],[data-deck] *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.deck img,[data-deck] img{-webkit-user-drag:none;pointer-events:none}
.sheet[hidden],.panel[hidden],.veil[hidden],[role="dialog"][hidden]{display:none !important}


/* ── THE DOORS — Frozen Foods and Our Story are ONE LINE each on the home page: a hairline,
   the logo, the words, a hairline. Each opens its content OVER the store (Mike, 2026-09-01:
   "the store is the home screen; everything else opens over it and closes back to it"). ── */
/* 🔴 2026-09-02 — each door carried its own logo, two logos side by side on a desktop. Mike:
   "that's a lot of logo going around. Put the logo on top and then the two options under it.
   Keep it on two lines." ONE logo, centred, the two doors under it: side by side past 760px,
   stacked on a phone. */
.doors{padding:clamp(2px,.8vh,8px) 0 clamp(14px,2.4vw,24px)}
.doors .wrap{display:block}
.doors-mark{display:block;width:clamp(64px,7vw,84px);height:auto;margin:0 auto}
.doors-row{display:grid;grid-template-columns:1fr;gap:0}
/* 🔴 Three doors now — Our Story · Parties · Reservations — centred under the mark. */
@media(min-width:760px){.doors-row{grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,3vw,44px)}}
.door{appearance:none;background:none;border:0;cursor:pointer;width:100%;min-height:46px;padding:2px 0;margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,16px);font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(19px,2.4vw,25px);line-height:1.2;color:var(--accent-deep);text-align:center;transition:color .2s var(--ease)}
.door::before,.door::after{content:'';height:1px;flex:1 1 0;min-width:14px;background:var(--line);transition:background .2s var(--ease)}
.door:hover,.door:focus-visible{color:var(--accent);outline:0}
.door:hover::before,.door:hover::after,.door:focus-visible::before,.door:focus-visible::after{background:var(--accent)}
.door:focus-visible span{outline:2px solid var(--accent);outline-offset:4px}

/* ── THE OVERLAYS — the same frame as the store panel: veil, paper card, red border, pinned X,
   logo and section name at the top, Close at the end. Frozen Foods and Our Story are siblings. ── */
.ov{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vh,28px)}
.ov[hidden]{display:none}
.ov-veil{position:absolute;inset:0;background:rgba(20,16,16,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ov-shell{position:relative;flex:0 0 auto;width:min(1180px,94vw);max-height:min(92vh,960px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--accent);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--line),0 30px 80px rgba(0,0,0,.5);border-radius:8px;padding:clamp(20px,4vw,34px) clamp(18px,3.4vw,44px) clamp(22px,3vw,34px);text-align:left;scrollbar-width:none;-ms-overflow-style:none}
.ov-shell::-webkit-scrollbar{width:0;height:0;display:none}
.ov-shell:focus{outline:0}
@media(max-width:760px){
  .ov{padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .ov-shell{width:100%;max-width:none;max-height:calc(100dvh - 12px);padding:14px 12px 16px;border-radius:6px}
}

/* the story — the film beside their words, the archive strip, what they stand on */
.g2{display:grid;gap:clamp(18px,3.4vw,44px);grid-template-columns:1fr}
@media(min-width:900px){.g2{grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:start}}
.film{margin:0;border:1px solid var(--line);padding:6px;background:var(--paper2)}
.film video{width:100%;height:auto;max-height:78vh;object-fit:contain;background:var(--dark)}
.film figcaption{margin-top:8px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;gap:12px;line-height:1.5}
.press{margin:0}
.press .h2{margin-top:2px}
.press .copy{margin-top:18px}

/* the broadsheet — a dateline between a heavy rule and a hair rule, column rules in the gutters */
.dateline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;margin:0 0 clamp(16px,2.6vw,28px);padding:7px 0 6px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.dateline span:nth-child(2){text-align:center}
.dateline span:last-child{text-align:right}
@media(max-width:559px){.dateline{justify-content:center;text-align:center}.dateline span:last-child{text-align:center}}
.press .g2{--gut:clamp(18px,3.4vw,44px);gap:var(--gut)}
@media(min-width:900px){.press .g2>div{position:relative}.press .g2>div:last-child::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) / -2);width:1px;background:var(--line)}}

/* the archive — six clips as ONE photo strip, not six blocks.
   🔴 2026-09-02 — a 45° halftone screen and grayscale(1) were laid over these. Mike, on his
   phone: "those pictures are good, but they're blurry and they got some stupid ass shit on
   them — little all black dots." Both are gone. These are the family's own photographs; they
   run clean and at a size you can actually see. Never texture a client's own archive. */
.arch-h{display:flex;align-items:center;gap:14px;margin:clamp(20px,3.4vw,36px) 0 10px;padding-top:12px;border-top:1px solid var(--ink);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-deep);line-height:1.5;white-space:nowrap}
.arch-h::after{content:'';height:1px;flex:1 1 auto;background:var(--line)}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:1180px;margin:0 auto;padding:8px;border:1px solid var(--line);background:var(--paper2)}
@media(min-width:761px){.strip{grid-template-columns:repeat(3,1fr)}}
.strip figure{margin:0;min-width:0}
.ph{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--dark)}
.strip video{width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--dark);image-rendering:auto}
.strip figcaption{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold{text-align:center;margin:clamp(18px,3vw,28px) 0 0;padding-top:14px;border-top:1px solid var(--line)}

.stand{margin-top:clamp(20px,3.4vw,40px);padding-top:clamp(18px,3vw,30px);border-top:1px solid var(--line)}
.stand .recs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.stand .recs li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line)}
.stand .recs li::before{content:'';position:absolute;left:0;top:-2px;width:18px;height:3px;background:var(--accent)}
.stand .recs h3{font-size:clamp(21px,2.3vw,26px);margin-bottom:4px}
.stand .recs p{max-width:52ch;font-size:14.5px}
.thanks{margin:0;font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);line-height:1.35;color:var(--ink)}
.thanks b{display:block;font-weight:600;font-size:clamp(28px,3.6vw,44px);margin-bottom:12px;line-height:1.02}
.who{margin-top:16px;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}

/* ── VISIT — the colophon that closes the page. Centred like everything else on this page
   (the masthead, the deck, the doors). The phone number is what a hungry person acts on, so
   it is the largest thing down here — the .thanks b scale, serif 600, ink, a red rule under
   it the way the header has one. The extension is a label under it, not a peer. The address
   and the email take the records scale. Hours are support and set like support. Every size
   here already exists on the page: 44/26/14.5/11.5/11. The logo is the last mark. ── */
.visit{padding:clamp(26px,4.4vw,52px) 0 clamp(24px,4vw,44px);border-top:2px solid var(--ink);text-align:center}
.visit .wrap{display:flex;flex-direction:column;align-items:center}
.visit-k{display:flex;align-items:center;gap:14px;width:100%;max-width:520px;margin:0 0 clamp(14px,2.4vw,22px);font-weight:700;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-deep);line-height:1.5;white-space:nowrap}
.visit-k::before,.visit-k::after{content:'';height:1px;flex:1 1 0;background:var(--line)}
.visit-k span{padding-left:.3em}
.visit-tel{display:inline-block;font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,44px);line-height:1.02;letter-spacing:.01em;color:var(--ink);text-decoration:none;padding:10px 2px 6px;border-bottom:2px solid var(--accent);font-variant-numeric:lining-nums;transition:color .2s var(--ease)}
.visit-tel:hover,.visit-tel:focus-visible{color:var(--accent-deep)}
.visit-ext{margin:10px 0 0;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);line-height:1.5;padding-left:.22em}
.visit-addr{margin:clamp(16px,2.6vw,26px) 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,26px);line-height:1.2;color:var(--ink)}
.visit-addr a{color:var(--ink);text-decoration:none;display:inline-block;padding-block:8px;transition:color .2s var(--ease)}
.visit-addr a:hover,.visit-addr a:focus-visible{color:var(--accent-deep)}
.visit-addr b{font-weight:500;display:block}
.visit-mail{margin:2px 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.visit-mail a{color:var(--accent-deep);text-decoration:none;display:inline-block;padding-block:14px;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.visit-mail a:hover,.visit-mail a:focus-visible{border-bottom-color:var(--accent-deep)}
.visit-hrs{margin:clamp(12px,2vw,18px) 0 0;font-size:14.5px;line-height:1.55;color:var(--dim);display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px}
.visit-hrs b{font-weight:600;color:var(--ink)}
.visit-hrs .dot{color:var(--accent-deep)}
@media(max-width:559px){.visit-hrs{flex-direction:column;gap:0}.visit-hrs .dot{display:none}}
.visit-mark{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);width:100%;max-width:760px;margin:clamp(22px,3.6vw,40px) 0 0}
.visit-mark::before,.visit-mark::after{content:'';height:1px;flex:1 1 0;background:var(--line)}
.visit-mark img{width:clamp(124px,16vw,184px);height:auto;flex:0 0 auto}

/* ── footer — the house standard, identical on every page ───────────────── */
.rkft-footer{background:var(--dark);border-top:1px solid rgba(226,211,184,.14)}
.rkft-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(26px,4vh,38px) var(--pad);text-align:center}
.rkft-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin:0 0 12px;padding:0}
.rkft-legal a{color:var(--parch);text-decoration:none;padding:14px 10px;font-size:11.5px;letter-spacing:.04em;border-bottom:1px solid transparent;display:inline-block;line-height:1.35}
.rkft-legal a:hover,.rkft-legal a:focus-visible{border-bottom-color:var(--parch)}
.rkft-sep{color:var(--meta)}
.rkft-copy{color:var(--parch);font-size:11.5px;margin:0 0 14px}
.rkft-credit{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:12px;color:var(--parch);min-height:44px;padding:6px 8px}
.rkft-ufo{width:24px;height:24px;object-fit:contain}
.rkft-made{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;animation:rkftBreathe 4.5s ease-in-out infinite}
@keyframes rkftBreathe{0%,100%{opacity:1}46%,54%{opacity:.18}}
.rkft-lock{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
.rkft-rk{font-weight:700;font-size:15px;background:var(--rk);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.12em;margin-right:-.12em}
@supports not (background-clip:text){.rkft-rk{color:#25e6f0}}
.rkft-kick{font-style:normal;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--meta);padding-right:.3em;margin-right:-.3em}
.rkft-credit:hover .rkft-rk{filter:drop-shadow(0 0 12px rgba(37,230,240,.5))}

/* ── THE PANEL — a framed card over the page; every section and the cart open here ── */
.mp-wrap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(10px,3vh,28px)}
.mp-wrap[hidden]{display:none}
.mp-veil{position:absolute;inset:0;background:rgba(20,16,16,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mp-shell{position:relative;flex:0 0 auto;width:min(640px,100%);max-height:min(88vh,840px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--accent);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--line),0 30px 80px rgba(0,0,0,.5);border-radius:8px;padding:clamp(20px,4vw,34px);text-align:left;scrollbar-width:none;-ms-overflow-style:none}
.mp-shell::-webkit-scrollbar{width:0;height:0;display:none}
.mp-x{position:sticky;top:0;float:right;margin:-6px -6px 0 0;width:46px;height:46px;border-radius:50%;cursor:pointer;z-index:3;border:2px solid var(--accent);background:var(--paper);color:var(--accent-deep);font-size:26px;font-weight:700;line-height:1;font-family:var(--sans);box-shadow:0 4px 16px rgba(20,16,16,.28);transition:background .2s var(--ease),color .2s var(--ease)}
.mp-x:hover,.mp-x:focus-visible{background:var(--accent-deep);color:var(--paper)}
.mp-top{text-align:center;padding:0 0 12px;border-bottom:2px solid var(--accent);margin:0 0 14px}
.mp-mark{display:block;margin:0 auto 8px;width:clamp(120px,22vw,160px);height:auto}
.mp-kick{font-family:var(--serif);font-weight:500;font-size:clamp(24px,4vw,34px);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1;margin:8px 0 0;display:flex;align-items:center;justify-content:center;gap:14px}
.mp-kick::before,.mp-kick::after{content:'';height:1px;width:clamp(18px,6vw,48px);background:var(--line);flex:0 0 auto}
.mp-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 14px}
.mp-strip.one{grid-template-columns:1fr}
.mp-shot{display:block;width:100%;height:clamp(74px,9vw,104px);object-fit:cover;border-radius:3px}
.d-note{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--dim);margin:0 0 8px;line-height:1.5;text-align:center}
.d-key{display:flex;justify-content:flex-end;gap:6px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 2px;padding-right:2px}
.d-key span{min-width:78px;text-align:center}
.d-list{list-style:none;margin:0;padding:0}
.d{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;padding:5px 0;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.d:not(:last-child)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line)}
.d-name{font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.2;color:var(--ink);min-width:0}
.buys{display:flex;gap:6px;justify-content:flex-end}
.buy{font-family:inherit;padding:3px 8px;min-height:36px;min-width:78px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.buy span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700;line-height:1.2}
.buy b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.buy:hover,.buy:focus-visible{background:var(--paper2);border-color:var(--ink)}
.buy.added{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--paper)}
.buy.added span{color:var(--parch)}
.mp-end{text-align:center;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.mp-close2{min-height:44px;padding:0 26px;border-radius:2px;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;transition:background .2s,color .2s}
.mp-close2:hover,.mp-close2:focus-visible{background:var(--ink);color:var(--paper)}

/* the empty cart says so and points back at the menu */
.empty{color:var(--dim);font-size:14px;padding:16px 0 14px;border-top:1px solid var(--line);text-align:center}
.empty p{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);line-height:1.35}
.f{display:block;margin:12px 0 0}
.f label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:5px}
.f input,.f select,.f textarea{width:100%;font-family:inherit;font-size:15.5px;padding:10px 12px;min-height:44px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink)}
.f textarea{min-height:64px;resize:vertical}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:2px solid var(--accent-deep);outline-offset:1px}
#form .btn{width:100%;margin-top:16px}
.fine{font-size:11.5px;color:var(--dim);margin:12px 0 0;line-height:1.6;text-align:center}
.fine a{display:inline-block;padding-block:7px;line-height:1.35}
.msg{margin-top:12px;font-size:13.5px;padding:11px 13px;display:none;line-height:1.55}
.msg.on{display:block}
.msg.err{background:#F7DDE0;color:#7E0A18;border-left:3px solid var(--accent-deep)}
.msg.ok{background:#DEE9DB;color:#1B4514;border-left:3px solid #2C6B22}
@media(min-width:761px){
  /* a menu card over the page, not a sheet: capped well inside the viewport so the dark
     ground shows all round it (Mike, 2026-09-01: "too big, too wide — not measured right") */
  .mp-shell{width:min(880px,86vw);max-height:min(84vh,780px);padding:28px 38px 32px}
  .d-list{columns:2;column-gap:46px;column-fill:balance}
  .mp-strip{grid-template-columns:repeat(4,1fr)}
  .mp-strip.one{grid-template-columns:1fr}
  .mp-strip.one .mp-shot{height:clamp(110px,14vw,170px)}
  #mp-cart .mp-body{max-width:640px;margin:0 auto}
  .mp-cart{margin:18px -38px -32px;padding:12px 38px}
}
@media(min-width:1500px){
  .mp-shell{width:min(920px,86vw)}
  .d-list{columns:2;column-gap:46px}
}
@media(max-width:760px){
  .mp-wrap{padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .mp-shell{width:100%;max-width:none;max-height:calc(100dvh - 12px);padding:14px 12px 16px;border-radius:6px}
  .mp-mark{width:clamp(84px,19vw,108px);margin-bottom:3px}
  .mp-kick{font-size:20px;margin-top:4px}
  .mp-top{padding-bottom:8px;margin-bottom:8px}
  .mp-x{width:44px;height:44px;font-size:22px}
  .mp-shot{height:60px}
  .d{padding:4px 0}
  .d-name{font-size:15.5px;line-height:1.15}
  .buy{min-width:70px;padding:3px 6px}
  .d-key span{min-width:70px}
  .mp-end{margin-top:12px;padding-top:10px}
  .mp-cart{margin:12px -12px -16px;padding:9px 12px}
}

/* ── mobile cart bar — shows the moment something is added ─────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--dark);color:var(--paper);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));display:none;align-items:center;gap:14px}
.bar b{font-variant-numeric:tabular-nums;font-size:18px;font-family:var(--serif);font-weight:600}
.bar span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);font-weight:700;margin-right:auto;white-space:nowrap}
.bar.on{display:flex}
body.has-bar{padding-bottom:72px}
.bar .btn{min-height:42px;padding:0 18px}

@media(prefers-reduced-motion:reduce){.rkft-made{animation:none}.mc,.tick,.tick-go,.mp-x,.mp-close2,.btn,.buy,.door,.door::before,.door::after{transition:none}}

/* ── VISIT: one row, two lines maximum ─────────────────────────────────────
   It shipped as six stacked lines — logo, phone, ext, address, email, hours, each on its own
   row. Mike: "It's not staying a five six line stack. Spread it out. Two lines max."
   Everything sits on ONE row and only wraps when the width genuinely runs out. */
.visit-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vw,46px);max-width:var(--wrap);margin:0 auto;
  padding-top:clamp(14px,2vw,22px);border-top:1px solid var(--line)}
.visit-row>*{margin:0}
.visit-row small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-top:3px;line-height:1.5}
.visit-mark img{width:clamp(96px,10vw,132px);height:auto;display:block}
.visit-tel{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);font-weight:600;
  color:var(--accent-deep);text-decoration:none;line-height:1;white-space:nowrap;padding-block:6px}
.visit-tel:hover{color:var(--accent)}
.visit-addr{font-family:var(--serif);font-size:clamp(17px,1.8vw,21px);color:var(--ink);
  text-decoration:none;line-height:1.2;padding-block:6px}
.visit-addr:hover{color:var(--accent-deep)}
.visit-hrs{font-size:15px;color:var(--ink);line-height:1.25}
.visit-mail{font-size:15px;color:var(--accent-deep);padding-block:14px;display:inline-block;line-height:1.15}
@media(max-width:760px){
  .visit-row{gap:16px 26px;justify-content:center;text-align:center}
  .visit-tel{font-size:30px}
}

/* 🔴 The one-row Visit was still stacking: `.visit .wrap{flex-direction:column}` and the old
   .visit-mark / .visit-hrs rules were still winning. The row owns its own layout now. */
.visit .wrap{display:block!important}
.visit-row{display:flex!important;flex-direction:row!important;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:clamp(16px,3vw,44px)}
.visit-row .visit-mark{display:block!important;width:auto!important;max-width:none!important;margin:0!important}
.visit-row .visit-hrs{display:block!important;flex-direction:row!important;margin:0!important;
  font-size:15px;color:var(--ink);text-align:center}
.visit-row .visit-tel,.visit-row .visit-addr,.visit-row .visit-mail{margin:0!important}
@media(max-width:900px){.visit-row{gap:14px 24px}}

/* 🔴 2026-09-02 — on a phone the Visit block was a poster: the number at 30px owned the
   footer. Mike: "all that info at the bottom needs to be smaller. Look how big that phone
   number is taking up space." Under 760px the whole block is one compact bordered card —
   every line stays, every tap target stays 44px, nothing under 10.5px. Desktop untouched. */
@media(max-width:760px){
  .visit{padding:16px 0 18px}
  .visit-row{gap:6px 16px!important;padding:12px 10px 10px;border:1px solid var(--line);border-radius:4px}
  .visit-row .visit-mark img{width:76px}
  .visit-row .visit-tel{font-size:20px;padding-block:12px;line-height:1}
  .visit-row .visit-addr{font-size:15px;padding-block:8px}
  .visit-row .visit-hrs{font-size:13px}
  .visit-row .visit-mail{font-size:13px;padding-block:12px;line-height:1.55}
  .visit-row small{font-size:10.5px;margin-top:2px;letter-spacing:.12em}
}


/* ══ THE COLOPHON — three columns ════════════════════════════════════════════
   Mike: "That phone number is way too big at the bottom. Get it out of the
   middle — that's not a centerpiece. His name on the left underneath D'Andrea
   Landscaping, put Lenny D'Andrea President, then the phone number and his
   email. The locations on the right and the certifications in the middle."
   Fax removed. Measured on --ground the ground: ink 13.8:1 · body 11.2:1 ·
   accent-deep 5.4:1 · dim 5.9:1. */
.visit{padding:clamp(20px,3vw,34px) 0 clamp(18px,2.6vw,28px);text-align:left}
.visit .wrap{display:block!important}
.visit-row{
  display:grid!important;grid-template-columns:1fr;gap:clamp(18px,3vw,30px);
  align-items:start;text-align:left}
@media(min-width:820px){
  .visit-row{grid-template-columns:minmax(0,1fr) auto minmax(0,auto);
    gap:clamp(24px,4vw,60px);align-items:center}
  .vcol-where{text-align:right}
}
.vcol{display:flex;flex-direction:column;gap:2px;min-width:0}

/* LEFT */
.vcol-who .visit-mark{display:block;margin:0 0 6px}
.vcol-who .mark-text{font-family:var(--serif);font-weight:600;
  font-size:clamp(15px,1.5vw,18px);letter-spacing:.01em;color:var(--ink);padding:0}
.v-name{font-family:var(--serif);font-weight:600;
  font-size:clamp(15px,1.45vw,17.5px);line-height:1.2;color:var(--ink);margin:0 0 4px}
.v-name span{display:block;font-family:var(--sans);font-weight:600;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  margin-top:2px}
.v-tel{font-family:var(--serif);font-weight:600;
  font-size:clamp(15px,1.4vw,17px);            /* was up to 44px */
  color:var(--ink);text-decoration:none;line-height:1.25;
  display:inline-block;min-height:44px;padding-block:11px;width:fit-content;
  border-bottom:1.5px solid var(--accent)}
.v-tel:hover,.v-tel:focus-visible{color:var(--accent-deep)}
.v-mail{font-size:12.5px;color:var(--accent-deep);
  text-decoration:none;line-height:1.3;
  display:inline-block;min-height:44px;padding-block:14px;width:fit-content}
.v-mail:hover,.v-mail:focus-visible{border-bottom:1px solid currentColor}

/* MIDDLE — the marks only */
.vcol-badges{flex-direction:row;align-items:center;gap:clamp(10px,1.4vw,16px);
  justify-content:flex-start}
@media(min-width:820px){.vcol-badges{justify-content:center}}
.vcol-badges img{height:clamp(38px,3.8vw,52px);width:auto;display:block;
  background:#fff;padding:5px;border:1px solid var(--line)}

/* RIGHT */
.v-k{font-weight:700;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin:0 0 5px}
.v-addr{font-family:var(--serif);font-weight:500;font-size:clamp(13.5px,1.25vw,15.5px);
  line-height:1.3;color:var(--ink);text-decoration:none;
  display:block;min-height:44px;padding-block:6px}
.v-addr:hover,.v-addr:focus-visible{color:var(--accent-deep)}

/* ══ COLOPHON — alignment ════════════════════════════════════════════════════
   The wordmark was floating right of its own column because .visit-mark is an
   inline-flex span inheriting centre alignment from the house .visit rules, and
   the middle column sat off-centre because the grid was 1fr auto auto. */
.visit-row{grid-template-columns:1fr!important}
@media(min-width:820px){
  .visit-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center;gap:clamp(20px,3vw,44px)}
}
.vcol{align-items:flex-start;text-align:left}
.vcol-who .visit-mark{display:block!important;width:auto!important;margin:0 0 8px!important;
  text-align:left}
.vcol-who .mark-text{display:inline-block;padding:0!important;margin:0}
.vcol-badges{align-items:center}
@media(min-width:820px){
  .vcol-where{align-items:flex-end;text-align:right}
}
/* the two yards sit as one block, not two islands */
.vcol-where .v-addr{padding-block:5px;min-height:0}
.vcol-where .v-addr + .v-addr{margin-top:9px}
.vcol-where .v-addr{display:inline-block;min-height:44px;padding-block:9px}

/* badges up a size — Mike, 2026-09-02: "the two logos in the middle might be a
   little small, make them a little bigger, bring them down" */
.vcol-badges img{height:clamp(50px,5vw,70px)!important;padding:6px}
@media(min-width:820px){.vcol-badges{margin-top:6px}}

/* ══ THE DOORS — three, evenly ═══════════════════════════════════════════════
   Mike: "Our certifications, request an estimate and our story need to be
   different. It's not symmetrical — two on one side, one on the right. And that
   font is horrible. Certifications should be capital."

   The row was grid-template-columns:1fr 1fr with three doors in it, so the third
   wrapped underneath. Three equal columns now. And the italic serif is gone —
   these are letterspaced caps, the same voice as every other label on the site,
   with the hairlines running out to each side. */
.doors-row{grid-template-columns:repeat(3,1fr)!important;
  column-gap:clamp(16px,2.6vw,40px);row-gap:0}
@media(max-width:759px){.doors-row{grid-template-columns:1fr!important}}
.door{
  font-family:var(--sans)!important;font-style:normal!important;font-weight:700!important;
  font-size:clamp(11px,1.05vw,12.5px)!important;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink)!important;min-height:52px;gap:clamp(8px,1.2vw,14px)}
.door span{padding-left:.24em}
.door::before,.door::after{background:var(--line)}
.door:hover,.door:focus-visible{color:var(--accent-deep)!important}
.door:hover::before,.door:hover::after,
.door:focus-visible::before,.door:focus-visible::after{background:var(--accent)}

/* the colophon: two columns, ONE phone number, hours on their own quiet line */
.visit-row-2{gap:clamp(18px,4vw,64px)}
.v-hours{margin:16px 0 0;text-align:center;font:600 11.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.visit .fold .v-tel{display:inline-block}

/* 🔴 FOOTER — one row: their name left, legal centred, our mark right.
   Three stacked centred blocks were burning a screen of dark space. */
.rkft-row{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,3vw,40px);text-align:left;padding:14px var(--pad)}
.rkft-row .rkft-copy{margin:0;flex:0 0 auto;white-space:nowrap}
.rkft-row .rkft-legal{margin:0;flex:1 1 auto;justify-content:center;gap:0}
.rkft-row .rkft-legal a{padding:10px 8px}
.rkft-row .rkft-credit{flex:0 0 auto;margin:0}
@media(max-width:760px){
  .rkft-row{flex-direction:column;text-align:center;gap:2px;padding:18px var(--pad)}
  .rkft-row .rkft-legal{order:-1}
}
/* the colophon columns read left-to-right: who + where, then how to call */
.visit-row-2 .vcol-where{text-align:right}
@media(max-width:700px){.visit-row-2 .vcol-where{text-align:center}}

/* 🔴 Their six rodizio photographs are portrait 1500x2250. In the 3:2 strip cell they
   pillarbox hard, and cropping them is out (never crop a photograph). Give that one
   strip a portrait cell so the skewer fills it end to end. */
#mp-rod .strip img{aspect-ratio:2/3}

/* ═══════════════════════════════════════════════════════════════════════════
   THE CLASS PASS — 2026-09-13
   Mike: "This is a classy place. The menu has to reflect it. Like Thomas Keller.
   You can't use the same shit we use for the bodega. It has to be better than Valença."

   The pattern is THEIRS. Their own in-house Worker's Special sheet sets every
   Portuguese dish name in a script italic with a small roman English line beneath
   it — "Parrilhada do Mar na Braza, c/ Vegetais Salteados, Azeite & Alho" over
   "Grilled Fish & Seafood Combination…". Around that good instinct sits WordArt.
   We keep the instinct and throw away the WordArt.

   Rules of the pass: the serif does the talking. The sans only ever whispers, in
   small caps, at 11px or under. Nothing shouts. Air before ornament.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the dish: their Portuguese in italic, the English small and roman beneath ── */
.d-name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:20.5px;
  line-height:1.24;
  letter-spacing:.004em;
  color:var(--ink);
}
.d-name em{
  display:block;
  font-family:var(--serif);
  font-style:normal;           /* roman under the italic — their sheet does exactly this */
  font-weight:400;
  font-size:14px;
  line-height:1.45;
  letter-spacing:.012em;
  color:var(--dim);
  margin-top:3px;
}
.d{padding:9px 0}
.d:not(:last-child)::after{background:var(--line);opacity:.62}

/* ── panel heads: lighter, wider, quieter ── */
.mp-kick{
  font-weight:300;
  font-size:clamp(26px,4.4vw,40px);
  letter-spacing:.14em;
  gap:clamp(14px,3vw,26px);
}
.mp-kick::before,.mp-kick::after{background:var(--line);opacity:.7}
.mp-shell{padding:clamp(24px,4.4vw,46px)}

/* ── the masthead word ── */
.tm-word{font-weight:300;letter-spacing:.24em}
.tm-sub{font-weight:500;font-size:10.5px;letter-spacing:.3em;color:var(--dim)}

/* ── section rules inside a panel ── */
.arch-h{
  font-family:var(--serif);font-style:italic;text-transform:none;
  font-size:17px;font-weight:500;letter-spacing:.02em;color:var(--accent-deep);
  border-top:1px solid var(--line);padding-top:16px;
}

/* ── strip captions: the dish name in italic, their English under it ── */
.mp-body .strip figcaption{
  white-space:normal;overflow:visible;text-overflow:clip;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:13.5px;line-height:1.3;letter-spacing:.006em;
  text-transform:none;color:var(--ink);text-align:left;margin-top:7px;
}
.mp-body .strip figcaption span{
  display:block;font-style:normal;font-weight:400;font-size:11.5px;
  line-height:1.35;color:var(--dim);margin-top:2px;
}
.mp-body .strip{border:0;background:none;padding:0;gap:clamp(10px,2vw,18px)}

/* ── every small sans label on the site: quieter, wider, never loud ── */
.nav a,.v-k,.v-hours,.rkft-copy,.rkft-legal a,.d-key,.note{
  font-weight:500;letter-spacing:.24em;
}
.nav a{font-size:10.5px}
.v-k{font-size:10.5px;letter-spacing:.28em}

/* ── the doors already whisper; give them more room to ── */
.door{font-weight:400;font-size:clamp(20px,2.6vw,27px);letter-spacing:.01em}
.doors-row{row-gap:2px}

/* ── the spotlight caption ── */
.spot-cap h3{font-weight:300;letter-spacing:.13em}
.spot-cap p{font-weight:500;letter-spacing:.26em;font-size:10.5px}
.spot-cta{font-weight:500;letter-spacing:.24em;font-size:10.5px}
.spot-name{font-weight:500;letter-spacing:.22em;font-size:11px}

/* ── the colophon ── */
.vcol-who .mark-text{font-weight:400;letter-spacing:.03em}
.v-addr{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.45}
.v-tel{font-family:var(--serif);font-weight:400;letter-spacing:.02em}

@media(max-width:520px){
  .d-name{font-size:18.5px}
  .d-name em{font-size:13px}
}

/* ── the colophon: three columns, each answering one question ──────────────
   who + where · how do I book · how do I get there. Evenly weighted, top-aligned,
   with a hairline between them so it reads as a plate of information, not a pile. */
.visit-row-3{
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:start;justify-items:start;
  gap:clamp(20px,4vw,56px);text-align:left;
}
.visit-row-3 .vcol{min-width:0}
.visit-row-3 .vcol+.vcol{padding-left:clamp(20px,4vw,56px);border-left:1px solid var(--line)}
.visit-row-3 .visit-mark{display:block;margin:0 0 10px}
.v-addr-p{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.5;
  color:var(--dim);margin:0}
.v-go{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;
  color:var(--accent-deep);text-decoration:none;display:inline-block;
  min-height:44px;line-height:44px;transition:color .2s var(--ease)}
.v-go:hover,.v-go:focus-visible{color:var(--accent)}
.visit-row-3 .v-k{margin:0 0 4px}
.visit-row-3 .v-tel{font-size:22px}
@media(max-width:760px){
  .visit-row-3{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  .visit-row-3 .vcol+.vcol{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:20px;width:100%}
}