/* ═══════════════════════════════════════════════════════════════
   IRON HORSE IMPORTS — "The White Room"

   Drawn from how galleries and import houses actually present
   objects (David Zwirner, Nickey Kehoe), NOT from the house
   restaurant site. The two idioms are opposites, on purpose:

     restaurant / bar          gallery / import house
     ─────────────────         ──────────────────────
     dark room, candlelit      white room, daylight
     grain + haze              nothing. paper is paper.
     filled uppercase buttons  underlined text links
     accent colour everywhere  no accent. ink and grey.
     type over photography     photograph, then caption beneath
     left mark, nav right      centred mark, nav centred beneath
     scale = hierarchy         black vs grey at one size = hierarchy

   The white cube is not a style choice here, it is the literal
   convention of the trade. Terracotta, iron and talavera are warm
   and matte; on paper they read as objects for sale, which is what
   they are. Every object carries a tombstone caption — the museum
   label — because that is the single strongest signal that what
   you are looking at is a piece and not merchandise.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:   #F7F5F0;
  --paper-2: #EFEBE3;
  --ink:     #14120F;
  /* Both greys are darker than they "look right" at, on purpose: the
     gallery convention is a very light tertiary grey, and at this
     paper value that measured 2.98:1 — a WCAG AA failure on every
     caption and label. These are the lightest values that still pass
     on BOTH paper tones. Separation comes from typeface and case
     instead of from lightness. */
  --ink-2:   #56514A;   /* secondary — 7.4:1 on paper */
  --ink-3:   #6F695F;   /* tertiary  — 4.99:1 on paper, 4.57:1 on paper-2 */
  --rule:    #DDD7CC;
  --clay:    #97552A;   /* used ONLY on hover/underline. Never a fill. */

  --shell: 1340px;
  --ease:  cubic-bezier(.22,1,.36,1);

  --disp: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Iron: deliberately low-contrast. It is furniture, not content — it
     should register as a hint when you look at it and disappear when you
     are reading. Used only at section breaks and under two headings. */
  --iron: rgba(90,72,58,.40);

  /* THE STAR RAIL.
     Drawn from the shop's own "Eat Drink Enjoy" wall sign: one rail
     running unbroken end to end, undulating; three Texas stars set
     into it; a small C-curl either side; a spiral roll at each end
     turning inward. Thin cut steel — even weight, no taper.

     The rail is a single continuous path so it reads as one piece of
     bar with the stars applied, not as segments butted together. */
  --iron-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 44'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M40 22C40 12 58 12 58 20.5 58 27 47 27 47 21.5'/%3E%3Cpath d='M440 22C440 12 422 12 422 20.5 422 27 433 27 433 21.5'/%3E%3Cpath d='M58 22C88 22 104 13 132 22 160 31 178 15 202 22 218 26 226 22 240 22 254 22 262 26 278 22 302 15 320 31 348 22 376 13 392 22 422 22'/%3E%3Cpath d='M96 22C96 14 112 14 112 21 112 27 102 27 102 22.5'/%3E%3Cpath d='M384 22C384 14 368 14 368 21 368 27 378 27 378 22.5'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpath d='M240 13.5 242 19.25 248.08 19.37 243.23 23.05 245 28.88 240 25.4 235 28.88 236.77 23.05 231.92 19.37 238 19.25Z'/%3E%3Cpath d='M150 15.5 151.53 19.9 156.18 19.99 152.47 22.8 153.82 27.26 150 24.6 146.18 27.26 147.53 22.8 143.82 19.99 148.47 19.9Z'/%3E%3Cpath d='M330 15.5 331.53 19.9 336.18 19.99 332.47 22.8 333.82 27.26 330 24.6 326.18 27.26 327.53 22.8 323.82 19.99 328.47 19.9Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── DARK ROOM ────────────────────────────────────────────
   The same gallery, lights down. Only the room changes:
   layout, type, spacing and every tombstone stay identical,
   so the two versions are a fair comparison rather than two
   different designs. Greys are re-derived, not inverted —
   an inverted grey ramp fails contrast on a dark ground. */
/* The whole dark ramp is the logo brown #5F4A3F taken up and down in
   value, not a neutral black. Every surface, rule and text tone is the
   same hue family as the mark, so the room reads as the brand rather
   than as generic dark mode. The logo brown itself sits at 2.29:1 —
   fine as an edge or a fill, never as text, so it is not used for type. */
:root[data-theme="dark"]{
  --paper:   #14100D;   /* brown-black, the mark taken almost to zero */
  --paper-2: #1C1712;
  --ink:     #F2E6DA;   /* 15.42:1 */
  --ink-2:   #C2AB99;   /*  8.63:1 */
  --ink-3:   #9C8874;   /*  5.58:1 on ground, 5.24:1 on alt */
  --rule:    #3B2F26;
  --clay:    #CE9160;   /*  7.07:1 — the mark lifted into readability */
  --iron:    rgba(206,145,96,.30);   /* iron catching the warm light */
}

/* The dark room is a flat surface.

   An earlier version drew plank seams across it. Horizontal seams at a
   fixed pitch read as boards — a wall with a pattern on it — rather than
   as grain, and it fought the photography instead of sitting behind it.
   Removed. The room is now just the colour, and the objects are the only
   texture on the page. */
:root[data-theme="dark"] body{ background-color:var(--paper); background-image:none; }
:root[data-theme="dark"] .obj__f,
:root[data-theme="dark"] .plate img{ background:var(--paper-2); }
/* The logo is now background-knocked-out, so on paper it sits clean with
   no white box.

   The dark room still needs a light ground behind it: the mark's own
   wordmark is dark, and knocked out on a dark wall it disappears. So it
   gets a small bone plaque — but drawn with box-shadow SPREAD, not
   padding. Spread paints outside the box without entering layout, so the
   image measures exactly the same in both rooms. Padding was what made
   the mark appear to change size when you flipped themes. */
/* No plaque any more. The mark is now the horse alone — a silhouette,
   not a white-field image — so it sits directly on either room. The
   wordmark beside it is live type and takes the room's ink.

   ONE MARK, BOTH ROOMS - no per-theme filter.

   The dark room used to lift the horse with brightness(1.9), on the
   reasoning that #5F4A3F is dark on a dark wall. Owner's call, after
   seeing both: the lightened version reads wrong, and the mark should be
   the same brown everywhere. So there is no theme rule at all now - the
   artwork ships as-is in both rooms.

   Worth knowing rather than re-litigating: unlifted, the mark measures
   3.76:1 against the dark paper, where the lift gave 6.27:1. That is
   below the 4.5:1 text threshold, but WCAG 1.4.11 exempts logotypes -
   a logo is allowed to be its own colour - and the name is also set
   beside it in live type at 15.42:1, so nothing depends on reading the
   image. This was a deliberate aesthetic choice, not an oversight.

   Do not re-add a filter here. It would also wreck the shadow: see below.

   THE DROP SHADOW - and why there is no CSS for it.

   The mark now ships as the original smallhorse.png, untouched. Its own
   alpha channel already carries a soft black shadow offset from the
   shape, and that shadow is what makes it sit off the page.

   Earlier passes recoloured every pixel to one flat brown to fix the
   gold. That destroyed the shadow: black at partial alpha became BROWN at
   partial alpha, so depth turned into a pale halo. Nothing in CSS could
   repair it, because the damage was already in the bitmap. The file
   needed no recolour at all - its shape is #5F4A3F natively.

   So: no drop-shadow() here. The shadow is in the pixels, and adding a
   second one in CSS would double it.

   With no filter on the image in either room, the shadow is simply the
   shadow the artist drew. Do not "simplify" this by flattening the
   artwork again. */

@font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/Cormorant-300-normal.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/Cormorant-300-italic.woff2") format("woff2");
  font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/Cormorant-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/Cormorant-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("../fonts/Cormorant-500-normal.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:130px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-weight:400;
  font-size:clamp(14.5px,.3vw + 13.6px,15.5px); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,p,figure,dl,dd,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.shell{ width:min(100% - clamp(22px,5vw,90px), var(--shell)); margin-inline:auto; }
.shell--mid{ max-width:1000px; }
.shell--tight{ max-width:720px; }

:focus-visible{ outline:1px solid var(--clay); outline-offset:4px; }
.skip{ position:absolute; left:14px; top:-60px; z-index:200; background:var(--ink);
  color:var(--paper); padding:10px 18px; transition:top .2s; }
.skip:focus{ top:14px; }

/* ── type ────────────────────────────────────────────────── */

/* Display: letterspaced serif. Used sparingly and never shouted. */
.disp{ font-family:var(--disp); font-weight:300; line-height:1.08; }
h1.disp{ font-size:clamp(2.1rem,4.4vw,3.9rem); letter-spacing:.01em; }
h2.disp{ font-size:clamp(1.7rem,3.2vw,2.9rem); letter-spacing:.01em; }
.disp em{ font-style:italic; }

/* The label. Every gallery uses this: 10–11px, wide tracking, caps. */
.label{
  font-family:var(--ui); font-size:.635rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3);
}
.label--ink{ color:var(--ink); }

/* Zwirner's device: hierarchy from colour at ONE size, not from scale. */
.two-tone{ font-family:var(--disp); font-weight:300; line-height:1.12;
  font-size:clamp(1.7rem,3.2vw,2.9rem); }
.two-tone b{ font-weight:300; color:var(--ink); display:block; }
.two-tone span{ color:var(--ink-3); display:block; }

.body-lg{ font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.72; color:var(--ink-2); max-width:52ch; }
.muted{ color:var(--ink-2); }
.meta{ font-size:.78rem; color:var(--ink-3); line-height:1.6; }

/* Links are links. No pills, no fills — the trade does not use them. */
.tlink{
  display:inline-block; font-family:var(--ui);
  font-size:.66rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); padding-bottom:3px;
  border-bottom:1px solid var(--ink); transition:color .3s, border-color .3s;
}
.tlink:hover{ color:var(--clay); border-color:var(--clay); }
.tlink--quiet{ color:var(--ink-2); border-bottom-color:var(--rule); }
.tlink--quiet:hover{ color:var(--clay); border-color:var(--clay); }

/* Facebook mark, for links that actually go to the page.

   Drawn in the same stroked language as the dock icons rather than pasted
   in as Facebook's blue badge - a brand badge would be the loudest thing
   on a page built around muted ink, and it would sit oddly on a gallery
   masthead. currentColor means it inherits the room's ink and turns clay
   on hover along with its label, with no per-theme rule needed.

   Sized in em so it tracks whatever type it sits beside: the footer nav
   sets .635rem and the closing call sets .66rem, and the mark follows
   both without a second declaration.

   SOLID, not stroked. This first shipped as fill:none with a 1.7px
   stroke, to match the dock's line icons - and at the 11px it renders
   at, the strokes collided and the counters of the "f" filled in. It
   read as a smudge. The dock's icons survive that treatment because
   they are simple shapes (a handset, a map pin); a letterform does not.
   A brand mark at small size has to be solid. */
.fbico{
  width:1.25em; height:1.25em; fill:currentColor; stroke:none;
  vertical-align:-.24em; margin-right:.45em;
}
.acts{ display:flex; flex-wrap:wrap; gap:2.4rem; align-items:center; margin-top:2.4rem; }

hr.rule{ border:0; border-top:1px solid var(--rule); margin:0; }

/* ── ironwork ────────────────────────────────────────────────
   A bar scrolled into opposed S-curves with a ring at the centre —
   drawn from the scrollwork the shop actually sells, so the furniture
   of the page is made of the same thing as the merchandise.

   Delivered as a CSS mask, not an <img>: the shape is the mask and the
   colour comes from background-color, so one file serves both rooms and
   the iron re-tints with the theme. repeat-x lets one 200px tile span
   any width without distortion. Purely decorative, so it is aria-hidden
   in the markup and never carries meaning. */
/* Centred at a fixed width, not edge to edge — it is a piece hung on the
   wall, not a border. Same artwork at both sizes so the section breaks
   and the heading flourishes are visibly the same object. */
.ironrule{
  height:28px; width:min(560px,78%); margin-inline:auto;
  background-color:var(--iron);
  -webkit-mask:var(--iron-rail) center/contain no-repeat;
          mask:var(--iron-rail) center/contain no-repeat;
}

/* Short centred flourish for sitting under a heading. */
/* Centred by default — it is only ever used under a centred heading,
   and a fixed-width block otherwise pins itself to the left edge. */
.flourish{
  height:24px; width:min(300px,56%); margin:16px auto 0;
  background-color:var(--iron);
  -webkit-mask:var(--iron-rail) center/contain no-repeat;
          mask:var(--iron-rail) center/contain no-repeat;
}
.flourish--left{ margin-inline:0; }

/* ── masthead ────────────────────────────────────────────── */
.util{ border-bottom:1px solid var(--rule); background:var(--paper); }
.util__in{ display:flex; justify-content:space-between; gap:20px; padding-block:9px; align-items:center; }
.util span,.util a{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none; }
.util a:hover{ color:var(--clay); }
.util__r{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }

/* Lights switch. Reads as a utility, not a feature. */
.theme{ display:inline-flex; align-items:center; gap:.55rem; min-height:36px;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  transition:color .3s; }
.theme:hover{ color:var(--ink); }
.theme__dot{ width:11px; height:11px; border-radius:50%; border:1px solid currentColor;
  background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); }

.mast{ position:sticky; top:0; z-index:70; background:var(--paper);
  border-bottom:1px solid var(--rule); transition:padding .4s var(--ease); }
.mast__in{ padding-block:clamp(18px,2.4vw,30px) 0; text-align:center; position:relative; }
.mast.stuck .mast__in{ padding-block:11px 0; }

/* The lockup: horse above, wordmark below — wide and short, the same
   arrangement as the retired web logo.

   The supplied mark bakes its own lettering into the image. At masthead
   size that lettering was illegible, and once knocked out for
   transparency it disappeared entirely on the dark wall. So the horse is
   cropped free of it and the words are set as live type: they stay
   sharp at any size and take the room's ink automatically.

   PROPORTION. In the original artwork the horse spans the full width of
   the lettering beneath it - that relationship is what makes it read as
   one mark. At 78px against a 420px wordmark it read as a stray icon
   floating over unrelated type. The horse is now sized to the wordmark's
   own measured width, and the type is pulled down to keep the total
   height sane; both scale together on scroll so the relationship holds. */
.wordmark{ display:inline-flex; flex-direction:column; align-items:center;
  gap:.3rem; text-decoration:none; }
/* The horse's width is not a free choice - it must track the rendered
   width of the words, or the two drift apart between the clamp's floor
   and ceiling. Measured: this face at .3em tracking renders ~16.05x its
   font-size, so 1.32vw of type is 21.2vw of text. The horse mirrors that
   curve exactly, floor and ceiling included. Re-derive both numbers
   together if the font-size or the tracking changes. */
.wordmark img{ width:clamp(205px,21.2vw,290px); height:auto;
  transition:width .4s var(--ease); }
.mast.stuck .wordmark img{ width:clamp(164px,14.1vw,193px); }
.wordmark b{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(.8rem,1.32vw,1.13rem); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink); padding-left:.3em;   /* optical: absorb the trailing track */
  transition:font-size .4s var(--ease);
}
.mast.stuck .wordmark b{ font-size:clamp(.67rem,.92vw,.79rem); letter-spacing:.26em; }

.mast__nav{ display:flex; justify-content:center; gap:clamp(18px,2.6vw,40px);
  padding-block:clamp(12px,1.6vw,18px) clamp(10px,1.3vw,14px); }
.mast__nav a{
  font-size:.635rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2); padding-bottom:3px;
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.mast__nav a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

.burger{ display:none; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.burger span{ display:block; width:20px; height:1px; background:var(--ink); transition:.3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ── plate: the gallery's core unit — image, then label beneath ─ */
.plate{ margin:0; }
.plate img{ width:100%; object-fit:cover; background:var(--paper-2); }
.plate figcaption{ padding-top:14px; }

/* The tombstone. Museum label order: title / medium / note. */
.tomb{ display:block; }
.tomb b{ display:block; font-family:var(--disp); font-size:1.16rem; font-weight:400;
  color:var(--ink); line-height:1.25; }
.tomb i{ display:block; font-style:italic; font-family:var(--disp); font-size:1rem;
  color:var(--ink-2); line-height:1.4; }
.tomb span{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:5px; }

/* ── opening plate (hero) ────────────────────────────────── */
/* The opening photograph is portrait, so it hangs centred with room on
   both sides rather than being cropped to a letterbox — the way a single
   work is hung on a wall. */
.open{ padding-top:clamp(20px,3vw,40px); }
/* Cropped in CSS rather than in the file: cover to a slightly narrower
   ratio, anchored left, trims ~10% off the right edge where the
   fountain's power cord runs out of frame. */
.open__img{ max-width:min(620px,86vw); margin-inline:auto; }
.open__img img{ width:100%; height:auto; aspect-ratio:738/1440;
  object-fit:cover; object-position:left top; }
.open__under{ display:grid; grid-template-columns:1fr auto; gap:30px;
  align-items:end; padding-top:18px; }
.open__stat{ display:flex; gap:clamp(22px,3.4vw,54px); }
.open__stat div{ text-align:right; }
.open__stat b{ display:block; font-family:var(--disp); font-size:1.3rem; font-weight:400; }
.open__stat span{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

.statement{ padding-block:clamp(60px,10vh,132px); }
.statement h1{ max-width:19ch; }
.statement .body-lg{ margin-top:1.9rem; }

/* ── the index: collections as a ruled catalogue ─────────── */
.index{ border-top:1px solid var(--rule); }
.idx{
  display:grid; grid-template-columns:70px 1.15fr 1fr 150px;
  gap:clamp(16px,3vw,44px); align-items:center;
  padding-block:clamp(20px,2.6vw,30px);
  border-bottom:1px solid var(--rule);
  text-decoration:none; transition:background .4s var(--ease);
}
.idx:hover{ background:var(--paper-2); }
.idx__no{ font-family:var(--disp); font-size:1rem; color:var(--ink-3); }
.idx__nm{ font-family:var(--disp); font-size:clamp(1.3rem,2.2vw,1.95rem); font-weight:300;
  line-height:1.15; }
.idx__ds{ color:var(--ink-2); font-size:.9rem; max-width:42ch; }
.idx__go{ justify-self:end; display:flex; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  transition:color .3s, gap .3s; white-space:nowrap; }
.idx:hover .idx__go{ color:var(--clay); gap:1.1rem; }
.idx__go svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; }

/* ── objects grid ────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:22px; padding-block:clamp(22px,3vw,34px);
  border-bottom:1px solid var(--rule); margin-bottom:clamp(30px,4vw,52px); }
.filter{
  font-size:.635rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); padding:8px 0 5px; min-height:44px;
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s;
}
.filter sup{ font-size:.55em; letter-spacing:0; margin-left:.45em; top:-.6em; }
.filter:hover{ color:var(--ink); }
.filter.on{ color:var(--ink); border-bottom-color:var(--ink); }

.objects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(200px,23vw,290px),1fr));
  gap:clamp(26px,3.2vw,54px) clamp(18px,2.2vw,34px); }
.objects li.out{ display:none; }
.obj{ display:block; width:100%; text-align:left; }
/* CONTAIN, not cover. A cover-crop on a 4:5 frame beheaded the tall
   objects — the top of an iron stand is the part that tells you what
   it is, and it was the first thing cut. Objects now sit whole inside
   the frame on a neutral ground, which is also how a catalogue plate
   works: the frame is constant, the object is never trimmed. */
.obj__f{ overflow:hidden; background:var(--paper-2); }
.obj img{ width:100%; aspect-ratio:4/5; object-fit:contain;
  padding:clamp(8px,1.2vw,16px);
  transition:transform 1.2s var(--ease); }
.obj:hover img{ transform:scale(1.03); }
.obj figcaption{ padding-top:13px; }
.obj:hover .tomb b{ color:var(--clay); }

/* ── visit ───────────────────────────────────────────────── */
.visit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); }
.facts{ border-top:1px solid var(--ink); margin-top:2.2rem; }
.facts>div{ display:grid; grid-template-columns:120px 1fr; gap:20px;
  padding-block:1.05rem; border-bottom:1px solid var(--rule); }
.facts dt{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding-top:.4em; }
.facts dd{ color:var(--ink); }
.facts a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--rule); }
.facts a:hover{ color:var(--clay); text-decoration-color:var(--clay); }

/* ── colophon / close ────────────────────────────────────── */
.colophon{ background:var(--paper-2); }
.colophon .shell{ padding-block:clamp(64px,10vh,124px); text-align:center; }
.colophon p{ margin:1.5rem auto 0; color:var(--ink-2); max-width:46ch; }
.colophon .tlink{ margin-top:2.4rem; }

/* ── footer ──────────────────────────────────────────────── */
.ftr{ border-top:1px solid var(--rule); padding-block:clamp(40px,6vh,64px) 24px; }
.ftr__in{ display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; }
/* The footer carries the full lockup - horse over the words - because it is
   the only place the name is not already set in live type. It stacks rather
   than sitting beside the tagline so the lettering can run wide enough to
   read; at the old 76px inline width the words were 8px tall and illegible. */
.ftr__brand{ display:flex; flex-direction:column; gap:14px;
  align-items:flex-start; max-width:330px; }
.ftr__brand img{ width:150px; height:auto; }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:12px 28px; align-content:flex-start; }
.ftr__nav a{ font-size:.635rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2); }
.ftr__nav a:hover{ color:var(--clay); }
.ftr__legal{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  margin-top:clamp(36px,5vh,58px); padding-top:18px; border-top:1px solid var(--rule);
  font-size:.68rem; letter-spacing:.1em; color:var(--ink-3); }

/* ── deferred dock (mobile utility, not a gallery device) ── */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  grid-template-columns:repeat(3,1fr); background:var(--paper);
  border-top:1px solid var(--rule); transform:translateY(110%);
  transition:transform .5s var(--ease); padding-bottom:env(safe-area-inset-bottom); }
.dock.up{ transform:none; }
.dock a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:58px; text-decoration:none; color:var(--ink-2);
  font-size:.55rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.dock a+a{ border-left:1px solid var(--rule); }
.dock svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }

/* ── lightbox: a viewing room, on paper ──────────────────── */
.lb{ position:fixed; inset:0; z-index:150; background:var(--paper);
  display:grid; grid-template-rows:auto 1fr; }
.lb__bar{ display:flex; justify-content:space-between; align-items:center;
  padding:16px clamp(18px,4vw,40px); border-bottom:1px solid var(--rule); }
.lb__nav{ display:flex; gap:10px; }
.lb__bar button{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); min-height:44px; padding:0 12px; transition:color .3s; }
.lb__bar button:hover{ color:var(--clay); }
.lb__body{ display:grid; place-items:center; padding:clamp(20px,4vw,52px); overflow:auto; }
.lb__body figure{ text-align:center; max-width:min(1100px,90vw); }
.lb__body img{ max-width:100%; max-height:70vh; width:auto; margin-inline:auto; }
.lb__body figcaption{ padding-top:18px; }

/* ── reveals: slower and smaller than the restaurant's ───── */
.rv{ opacity:0; transform:translateY(14px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.1s } .rv[data-d="2"]{ transition-delay:.2s }
.rv[data-d="3"]{ transition-delay:.3s }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1000px){
  .visit{ grid-template-columns:1fr; }
  .idx{ grid-template-columns:44px 1fr; gap:14px 20px; }
  .idx__ds{ grid-column:2; max-width:none; }
  .idx__go{ grid-column:2; justify-self:start; }
  .open__under{ grid-template-columns:1fr; align-items:start; }
  .open__stat div{ text-align:left; }
}

@media (max-width:760px){
  .burger{ display:flex; }
  .mast__nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px); z-index:75;
    flex-direction:column; justify-content:center; gap:26px; padding:0 32px;
    background:var(--paper); border-left:1px solid var(--rule);
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .mast__nav.open{ transform:none; }
  .mast__nav a{ font-size:.78rem; }
  .dock{ display:grid; }
  .ftr{ padding-bottom:80px; }
  .open__img img{ aspect-ratio:4/3; }
  .util__in span:last-child{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

@media print{
  .mast,.util,.dock,.lb,.filters{ display:none !important; }
  body{ background:#fff; }
}