/* Lafayette Coney Island
   The look is taken from the building: mint green walls and cream subway tile
   inside, grey enamel and orange-red Clarendon lettering with a white keyline
   outside. Cream is the ground, mint is the brand field, tile is the structural
   motif, and the orange-red stays an accent — the way it is on the sign.

   Every colour, face, radius and shadow value is declared once, here.
   Nothing below :root may contain a raw hex, rgb(), hsl() or font-family. */

:root{
  /* --- sampled from their own building; provenance in src/theme.json --- */
  --cream:#F4EFE3;          /* menu-board ground + subway tile, WB corrected */
  --cream-deep:#E7DFCE;
  --tile:#E2D9C9;           /* subway tile face */
  --tile-line:#BCAF97;      /* grout */
  --mint-pale:#D3DFD8;      /* dining-room wall, opened up for a page field */
  --mint:#7F968C;           /* dining-room wall, as sampled */
  --mint-deep:#264035;      /* darkened so cream sits on it at 10.6:1 */
  /* The facade panel. Sampled across storefront-1280.jpg away from the letters:
     mean #87827B, median #88847B. Published at the light end of that range so
     ink body copy clears AA on it (5.11:1); at the mean it measures 4.36 and fails. */
  --enamel:#8E8A83;
  --enamel-deep:#4E524F;
  --enamel-edge:#3D4145;
  --ink:#171A17;
  --ink-soft:#33372F;
  --paper:#FBF8F1;
  --accent:#D74D29;         /* sign letters, as sampled — logotype + large display */
  --accent-ink:#8C2E15;     /* deepened: clears AA on cream, tile and mint grounds */
  --accent-deep:#A83517;    /* button fills: cream on it at 6.2:1 */

  --hair-ink:rgba(23,26,23,.14);
  --hair-paper:rgba(251,248,241,.24);
  --hair-enamel:rgba(23,26,23,.22);
  --shadow-1:0 1px 2px rgba(23,26,23,.08);
  --shadow-2:0 20px 46px -26px rgba(23,26,23,.5);

  --f-display:'Alfa Slab One','Clarendon',Rockwell,Georgia,serif;
  --f-cond:'Oswald','Haettenschweiler','Arial Narrow',sans-serif;
  --f-body:Georgia,'Iowan Old Style','Times New Roman',serif;

  --r-sm:2px;
  --wrap:1140px;
  --gut:clamp(1.1rem,4vw,2.5rem);
  --tw:58px; --th:27px; --tg:2px;   /* subway tile: width, row height, grout */
}

@font-face{font-family:'Alfa Slab One';src:url(/fonts/alfaslabone-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Oswald';src:url(/fonts/oswald-latin.woff2) format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink)}
a:hover{color:var(--ink)}
h1,h2,h3{line-height:1.04;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.center{text-align:center}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.5rem;z-index:30;background:var(--accent-deep);color:var(--paper);
  padding:.6rem 1rem;font-family:var(--f-cond);text-decoration:none}

/* ============ THE TILE MOTIF ============
   Lafayette's wainscot is cream subway tile in running bond. Two rows, the
   second offset by half a tile. Drawn in gradients so it costs no bytes. */
.tile-band{
  height:calc(var(--th) * 2);
  background-color:var(--tile);
  background-image:
    repeating-linear-gradient(90deg, var(--tile-line) 0 var(--tg), transparent var(--tg) var(--tw)),
    repeating-linear-gradient(90deg, var(--tile-line) 0 var(--tg), transparent var(--tg) var(--tw)),
    linear-gradient(var(--tile-line),var(--tile-line)),
    linear-gradient(var(--tile-line),var(--tile-line));
  background-size: var(--tw) var(--th), var(--tw) var(--th), 100% var(--tg), 100% var(--tg);
  background-position: 0 0, calc(var(--tw)/2) var(--th), 0 var(--th), 0 100%;
  background-repeat:repeat-x;
}
.tile-band.thin{height:var(--th);background-image:
    repeating-linear-gradient(90deg, var(--tile-line) 0 var(--tg), transparent var(--tg) var(--tw)),
    linear-gradient(var(--tile-line),var(--tile-line));
  background-size:var(--tw) var(--th), 100% var(--tg);
  background-position:0 0, 0 100%}

/* ============ THE ENAMEL WORDMARK ============
   On the building the letters are orange-red Clarendon with a white keyline on
   a grey enamel panel. The plate reproduces that lockup. */
.mark{display:inline-flex;flex-direction:column;gap:.06rem;text-decoration:none;line-height:.94;
  padding:.6rem 0 .65rem;margin-right:auto}
.mark-l,.mark-r{font-family:var(--f-display);text-transform:uppercase;font-weight:700}
.mark-l{color:var(--accent);font-size:clamp(1.18rem,3.4vw,1.3rem);letter-spacing:.03em}
.mark-r{color:var(--tile);font-size:clamp(.74rem,2.4vw,.88rem);letter-spacing:.085em}

/* ============ HEADER ============ */
.site{background:var(--ink)}
.bar{display:flex;align-items:center;gap:1rem;min-height:74px;flex-wrap:wrap;padding-block:.65rem}
.nav{display:flex;gap:clamp(.7rem,2.6vw,1.6rem);font-family:var(--f-cond);
  text-transform:uppercase;letter-spacing:.11em;font-size:.78rem;font-weight:500;
  order:3;width:100%;border-top:1px solid var(--hair-enamel);padding-top:.6rem}
.nav a{color:var(--tile);text-decoration:none}
.nav a:hover{color:var(--accent)}
.nav a[aria-current]{color:var(--paper)}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.tel{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent-deep);color:var(--paper);
  text-decoration:none;font-family:var(--f-cond);font-weight:600;letter-spacing:.06em;
  padding:.55rem .9rem;border-radius:var(--r-sm);font-size:.88rem;white-space:nowrap}
.tel:hover{background:var(--paper);color:var(--ink)}
@media(min-width:800px){.nav{order:0;width:auto;border-top:0;padding-top:0}}

/* ============ BUTTONS ============ */
.btn{display:inline-block;font-family:var(--f-cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;font-size:.84rem;text-decoration:none;
  background:var(--accent-deep);color:var(--paper);padding:.75rem 1.3rem;border-radius:var(--r-sm);
  border:2px solid var(--accent-deep);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-lg{font-size:.94rem;padding:.88rem 1.55rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-onmint{background:var(--paper);color:var(--mint-deep);border-color:var(--paper)}
.btn-onmint:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--paper)}

/* ============ FRAMED PHOTOGRAPH ============
   Their wall is a row of black-framed photographs over the tile. Every image on
   the site is hung the same way. */
.framed{display:block;background:var(--paper);padding:clamp(8px,1.1vw,13px);
  border:1px solid var(--tile-line);box-shadow:var(--shadow-2)}
.framed img{width:100%;border:1px solid var(--enamel-edge)}

/* ============ HERO ============ */
/* The room, full bleed, with the sign painted over it. This is the building's
   own logic: orange-red letters with a white keyline on a dark ground. On cream
   that keyline is invisible and eats the letterform; here it is the point. */
.hero{position:relative;display:grid;align-items:center;isolation:isolate;
  min-height:clamp(30rem,82svh,46rem);background:var(--ink);overflow:hidden}
.hero-shot{position:absolute;inset:0;z-index:0}
.hero-shot picture,.hero-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:74% 44%}
/* Two passes: a hard wedge that carries the type, and a base tint so the whole
   frame reads as one photograph rather than a photo with a panel stuck on it. */
.hero-veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(95deg,
      rgba(17,19,16,.97) 0%, rgba(17,19,16,.96) 34%, rgba(17,19,16,.93) 50%,
      rgba(17,19,16,.62) 64%, rgba(17,19,16,.24) 78%, rgba(17,19,16,.04) 90%),
    linear-gradient(180deg, rgba(17,19,16,.26) 0%, rgba(17,19,16,.04) 42%, rgba(17,19,16,.34) 100%)}
@media(max-width:899px){
  .hero-veil{background:linear-gradient(180deg,
    rgba(17,19,16,.94) 0%, rgba(17,19,16,.88) 42%, rgba(17,19,16,.62) 66%, rgba(17,19,16,.42) 100%)}
  .hero{min-height:clamp(32rem,90svh,44rem)}
}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.5rem,7vw,4.5rem);width:100%}
@media(min-width:900px){.hero-in>*{max-width:34rem}}

.eyebrow{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;
  color:var(--tile);margin:0 0 .9rem;font-weight:600}
/* The painted sign, at page scale. No keyline — the sign carries one because it
   sits on grey enamel outside; over a photograph it reads as an outline around
   the letters rather than part of them. The shadow does the separating instead. */
.hero h1{font-family:var(--f-display);text-transform:uppercase;color:var(--accent);
  font-size:clamp(2.85rem,8.6vw,5.5rem);line-height:.92;letter-spacing:.012em;margin:0 0 1.4rem;
  text-shadow:0 2px 22px rgba(0,0,0,.55)}
.lede{font-size:clamp(1.06rem,2.2vw,1.24rem);max-width:33ch;color:var(--paper);margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.7rem 0 1.2rem}
.hero-state{display:flex;gap:.85rem;align-items:baseline;flex-wrap:wrap;margin:0;
  font-family:var(--f-cond);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tile)}
.dot{display:inline-flex;align-items:center;gap:.45rem;color:var(--paper);font-weight:500}
.dot::before{content:"";width:.62rem;height:.62rem;border-radius:50%;background:var(--mint-pale);flex:none}
.dot[data-open="no"]::before{background:var(--accent)}
/* Ghost button on a photograph needs its own pair — the ink one vanishes here. */
.btn-onshot{color:var(--paper);border-color:var(--paper);background:rgba(17,19,16,.35)}
.btn-onshot:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ============ FULL-BLEED BAND ============ */
.band{margin:clamp(2.5rem,6vw,4rem) auto 0;width:min(1100px,88vw)}
.band picture img{width:100%;object-fit:cover;aspect-ratio:16/7;
  border:1px solid var(--tile-line);box-shadow:var(--shadow-2)}
.band figcaption{font-family:var(--f-cond);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:.7rem;margin:0}

/* ============ SECTIONS ============ */
.slab-sec{padding-block:clamp(2.5rem,7vw,4.75rem)}
.h-slab{font-family:var(--f-display);font-size:clamp(1.8rem,5vw,2.85rem);text-transform:uppercase;
  color:var(--ink);margin:0 0 1rem;letter-spacing:.004em}
.h-slab.center{text-align:center}
.two{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:820px){.two{grid-template-columns:1fr 1fr}.two.flip>*:first-child{order:2}}
.quote-line{border-left:4px solid var(--accent);padding-left:1rem;color:var(--ink-soft)}
.quote-line em{color:var(--ink);font-style:italic}
.mint-sec{background:var(--mint-deep);color:var(--paper);padding-block:clamp(2.5rem,7vw,4.75rem)}
.mint-sec .h-slab{color:var(--paper)}
.mint-sec a:not(.btn){color:var(--paper)}
.mint-sec em{color:var(--paper)}
.tile-sec{background:var(--cream-deep)}
.enamel-sec{background:var(--enamel);color:var(--ink);
  border-block:3px solid var(--enamel-edge);padding-block:clamp(2.4rem,6.5vw,4.25rem)}
.enamel-sec .h-slab{color:var(--ink)}
.enamel-sec .quote-line{border-left-color:var(--accent-deep);color:var(--ink)}
.enamel-sec .quote-line em{color:var(--ink)}
.enamel-sec .btn-ghost{color:var(--ink);border-color:var(--ink)}
.enamel-sec .btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ============ PRESS ============ */
.press{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.press li{display:grid;gap:.15rem .9rem;padding:1.05rem 0;border-bottom:1px solid var(--tile-line)}
@media(min-width:760px){.press li{grid-template-columns:11.5rem 1fr auto;align-items:baseline}}
.press-outlet{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:.78rem;font-weight:600;color:var(--accent-ink)}
.press a{font-size:1.06rem;text-decoration:none;color:var(--ink)}
.press a:hover{color:var(--accent-ink);text-decoration:underline}
.press time{font-family:var(--f-cond);font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);
  text-transform:uppercase}

/* ============ TICKET ============ */
.ticket-sec{padding-block:clamp(2.2rem,6vw,4rem);background:var(--cream-deep)}
.ticket{background:var(--paper);border:1px solid var(--tile-line);padding:clamp(1.5rem,5vw,2.75rem);
  text-align:center;max-width:44rem;margin-inline:auto;position:relative;box-shadow:var(--shadow-2)}
.ticket::before,.ticket::after{content:"";position:absolute;left:0;right:0;height:9px;
  background-image:radial-gradient(circle at 5px 5px,var(--cream-deep) 4.5px,transparent 5px);
  background-size:14px 9px}
.ticket::before{top:-1px}
.ticket::after{bottom:-1px;transform:rotate(180deg)}
.ticket-k{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;
  color:var(--accent-ink);margin:0 0 .7rem;font-weight:600}
.ticket-addr{font-family:var(--f-display);font-size:clamp(1.2rem,3.6vw,1.7rem);line-height:1.25;margin:0 0 .6rem}
.ticket-hours{font-family:var(--f-cond);font-size:.9rem;letter-spacing:.05em;color:var(--ink-soft);margin:0 0 1.3rem}
.ticket .btn{margin:.2rem}

/* ============ PAGE HEADS ============ */
.page-head{padding-block:clamp(2rem,6vw,3.5rem) clamp(.5rem,2vw,1rem)}
.page-head.tall{padding-block:clamp(3rem,12vw,7rem)}
.page-lede{font-size:clamp(1.06rem,2.3vw,1.25rem);max-width:46ch;color:var(--ink-soft)}
.crumbs{padding-top:1.1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;
  font-family:var(--f-cond);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.crumbs li+li::before{content:"›";margin-right:.45rem;color:var(--tile-line)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs [aria-current]{color:var(--ink)}

/* ============ MENU ============ */
.menu-layout{display:grid;gap:clamp(1.8rem,5vw,3.25rem);padding-bottom:clamp(2rem,6vw,3.5rem)}
@media(min-width:900px){.menu-layout{grid-template-columns:1fr 20rem;align-items:start}
  .menu-aside{position:sticky;top:1.25rem}}
.menu-card{background:var(--paper);border:1px solid var(--tile-line);box-shadow:var(--shadow-2);
  padding:clamp(1.2rem,4vw,2.5rem)}
.menu-sec+.menu-sec{margin-top:2.1rem}
.menu-sec h2{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.05rem,2.8vw,1.35rem);
  color:var(--accent-ink);margin:0 0 .15rem}
.col-head{display:flex;justify-content:flex-end;gap:1.1rem;margin:0 0 .3rem;
  font-family:var(--f-cond);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.col-head span{width:3.1rem;text-align:right}
.rows{list-style:none;margin:0;padding:0;font-family:var(--f-cond)}
.rows li{display:flex;align-items:baseline;gap:.5rem;padding:.44rem 0;border-bottom:1px solid var(--hair-ink)}
.rows li:last-child{border-bottom:0}
.rows li.is-sub{padding-left:1.4rem}
.rows li.is-sub .row-n{font-weight:300;font-style:italic;color:var(--ink-soft)}
.row-n{font-weight:500;font-size:1.03rem;letter-spacing:.015em;flex:none;max-width:62%}
.row-d{display:block;font-weight:200;font-size:.8rem;letter-spacing:.02em;color:var(--ink-soft);
  line-height:1.45;margin-top:.1rem}
.leader{flex:1;border-bottom:2px dotted var(--tile-line);transform:translateY(-.22em)}
.row-p{display:flex;gap:1.1rem;flex:none;font-variant-numeric:tabular-nums;font-weight:500}
.row-p span{width:3.1rem;text-align:right}
.p-credit{color:var(--ink-soft);font-weight:300}
.menu-fine{margin:1.8rem 0 0;padding-top:1rem;border-top:2px solid var(--ink);
  font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;
  text-align:center;color:var(--ink)}
.menu-aside{display:grid;gap:1.5rem}
.board-fig{margin:0}
.board-fig figcaption{font-family:var(--f-cond);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:.6rem}
.note{background:var(--mint-deep);color:var(--paper);padding:1.3rem 1.4rem}
.note h2{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.11em;font-size:.88rem;
  color:var(--paper);margin:0 0 .55rem;font-weight:600}
.note p{font-size:.97rem;margin:0}
.note p+p{margin-top:.7rem}
.note a{color:var(--paper)}
.note-plain{background:var(--paper);color:var(--ink-soft);border:1px dashed var(--tile-line);padding:1.15rem 1.25rem}
.note-plain h2{color:var(--accent-ink)}
.note-plain a{color:var(--accent-ink)}
.note-plain strong{color:var(--ink)}
.note-wide{max-width:52rem;margin-inline:auto;padding:clamp(1.5rem,4vw,2.25rem)}
.note-wide h2{font-size:1rem;letter-spacing:.14em}
.note-wide p{font-size:1.03rem;line-height:1.7}

/* ============ TIMELINE ============ */
.timeline{list-style:none;margin:0;padding:0 0 clamp(1rem,4vw,2rem)}
.timeline li{display:grid;gap:.2rem 1.6rem;padding:1.45rem 0;border-top:1px solid var(--tile-line)}
@media(min-width:680px){.timeline li{grid-template-columns:7.5rem 1fr}}
.t-year{font-family:var(--f-display);font-size:clamp(1.5rem,4.6vw,2.15rem);color:var(--accent-ink);
  margin:0;line-height:1;font-variant-numeric:tabular-nums}
.timeline h2{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.05rem,2.7vw,1.25rem);font-weight:600;margin:0 0 .45rem}
.timeline p:not(.t-year){margin:0 0 .6rem;max-width:56ch}
.t-note{font-size:.94rem;color:var(--ink-soft);border-left:3px solid var(--tile-line);padding-left:.9rem}
.t-mark{background:var(--mint-pale);border-left:5px solid var(--accent);padding-left:1.1rem}
@media(min-width:680px){.t-mark{grid-template-columns:calc(7.5rem - 1.1rem) 1fr}}

/* ============ VISIT ============ */
.visit-grid{display:grid;gap:1.25rem;padding-block:clamp(1rem,3vw,2rem) clamp(2rem,6vw,3.5rem)}
@media(min-width:780px){.visit-grid{grid-template-columns:repeat(3,1fr);align-items:start}}
.visit-card{background:var(--paper);border:1px solid var(--tile-line);padding:1.45rem 1.55rem;
  box-shadow:var(--shadow-1)}
.visit-card h2{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.86rem;
  font-weight:600;color:var(--accent-ink);margin:0 0 .85rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.visit-card address{font-style:normal;font-family:var(--f-display);font-size:1.2rem;line-height:1.35;
  margin-bottom:1.1rem}
.dot.small{color:var(--ink-soft);font-size:.78rem;letter-spacing:.09em;font-weight:400}
.visit-actions{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;margin:0}
.hours{width:100%;border-collapse:collapse;font-family:var(--f-cond);font-size:.94rem}
.hours th{text-align:left;font-weight:400;padding:.32rem 0;color:var(--ink-soft)}
.hours td{text-align:right;padding:.32rem 0;font-variant-numeric:tabular-nums;font-weight:500}
.hours tr+tr th,.hours tr+tr td{border-top:1px solid var(--hair-ink)}
.visit-fine{font-family:var(--f-cond);font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);
  margin:.9rem 0 0;text-transform:uppercase}
.ticks{list-style:none;margin:0;padding:0;font-size:.99rem}
.ticks li{padding:.44rem 0 .44rem 1.5rem;position:relative;border-bottom:1px solid var(--hair-ink)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"✦";position:absolute;left:0;color:var(--accent-ink);font-size:.8em;top:.55em}

/* ============ MAP ============ */
.mapwrap{aspect-ratio:16/10;max-width:60rem;margin-inline:auto;border:1px solid var(--tile-line);
  background:var(--cream-deep);overflow:hidden}
@media(max-width:600px){.mapwrap{aspect-ratio:1/1}}
.mapbtn{width:100%;height:100%;border:0;background:var(--cream-deep);cursor:pointer;
  display:grid;place-items:center;font:inherit;color:var(--ink);padding:1.5rem}
.mapbtn:hover{background:var(--mint-pale)}
.mapbtn-in{display:block;text-align:center}
.mapbtn strong{display:block;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.13em;
  font-size:.94rem;margin-bottom:.4rem}
.mapbtn-in>span{font-size:.88rem;color:var(--ink-soft)}
.map-alt{margin-top:1rem;font-family:var(--f-cond);font-size:.82rem;letter-spacing:.06em}

/* ============ FOOTER ============ */
.site-foot{background:var(--ink);color:var(--paper);padding-block:clamp(2.2rem,6vw,3.25rem) 1.5rem}
.foot-grid{display:grid;gap:1.9rem}
@media(min-width:720px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr .85fr}}
.foot-mark{display:inline-flex;flex-direction:column;line-height:.94;margin:0 0 .6rem;
  background:var(--enamel-deep);border:2px solid var(--enamel-edge);padding:.6rem 1rem .65rem;opacity:1}
.foot-mark span{font-family:var(--f-display);color:var(--accent);text-transform:uppercase;
  -webkit-text-stroke:2.2px var(--paper);paint-order:stroke fill}
.foot-mark span:first-child{font-size:1.15rem;letter-spacing:.03em}
.foot-mark span:last-child{font-size:.88rem;letter-spacing:.075em}
.foot-tag{font-family:var(--f-cond);font-style:italic;letter-spacing:.04em;opacity:.78;margin:0}
.site-foot h2{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;
  font-weight:600;color:var(--mint-pale);margin:0 0 .6rem}
.site-foot address{font-style:normal}
.site-foot p,.site-foot address{font-size:.97rem;opacity:.92;margin:0}
.site-foot p.foot-mark{opacity:1}
.site-foot a{color:var(--paper)}
.foot-fine{border-top:1px solid var(--hair-paper);margin-top:2rem;padding-top:1.1rem}
.foot-fine p{font-family:var(--f-cond);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  opacity:.72;margin:0}
.foot-fine .credits{margin-top:.5rem;opacity:.68;max-width:70ch;text-transform:none;letter-spacing:.02em}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ SOCIAL LINKS ============
   Real tap targets with labels, not text inside a sentence. */
.social{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.social a{display:flex;align-items:center;gap:.7rem;min-height:48px;text-decoration:none;
  padding:.5rem .7rem;border:1px solid var(--tile-line);border-radius:var(--r-sm);
  color:var(--ink);background:var(--cream);transition:background .15s,border-color .15s}
.social a:hover{background:var(--mint-pale);border-color:var(--ink)}
.social svg{width:22px;height:22px;flex:none;fill:var(--accent-ink)}
.s-name{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem}
.s-handle{font-family:var(--f-cond);font-size:.8rem;color:var(--ink-soft);margin-left:auto;
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visit-card h2.sub{margin-top:1.5rem}
.social-foot a{background:transparent;border-color:var(--hair-paper);color:var(--paper)}
.social-foot a:hover{background:var(--hair-paper);border-color:var(--paper)}
.social-foot svg{fill:var(--mint-pale)}
.social-foot .s-handle{color:var(--paper);opacity:.75}
@media(max-width:460px){.social-foot .s-handle,.social-stack .s-handle{display:none}}