, so p{margin:0 0 1em} applies and p:last-child doesn't reach it (the nav follows). Flex centres the margin box, so that stray 11px bottom margin pushed the pill half its height above centre. */ margin:0; } .live__dot{ width:7px;height:7px;border-radius:50%;background:var(--hot);flex:0 0 auto; box-shadow:0 0 0 0 color-mix(in srgb,var(--hot) 70%,transparent); animation:pulse 2.6s ease-out infinite; } [data-open="closed"] .live__dot{background:var(--closed);animation:none;box-shadow:none} [data-open="closed"] .live__state{color:var(--closed)} .live__state{color:var(--hot);font-weight:600} @keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hot) 60%,transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} } .chrome .live{display:none} @media(min-width:1080px){.chrome .live{display:inline-flex}} .chrome nav a.chrome__cta{ position:relative;isolation:isolate;overflow:hidden; border:1px solid var(--rule);padding:8px 15px;color:var(--ink); transition:color .3s cubic-bezier(.4,0,.2,1),border-color .3s; } .chrome nav a.chrome__cta::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--hot); transform:scaleX(0);transform-origin:right center; transition:transform .42s cubic-bezier(.65,0,.35,1); } .chrome nav a.chrome__cta:hover, .chrome nav a.chrome__cta:focus-visible{color:#fff;border-color:var(--hot)} .chrome nav a.chrome__cta:hover::before, .chrome nav a.chrome__cta:focus-visible::before{transform:scaleX(1);transform-origin:left center} .chrome nav a.chrome__cta:active{transform:translateY(1px)} .burger{display:none;margin-left:auto;padding:8px;letter-spacing:.16em} @media(max-width:860px){ .chrome nav{ position:fixed;inset:var(--chrome-h) 0 auto 0;flex-direction:column;gap:0; /* back to stretch in the column layout — centring here would shrink each link to its text width and cut the full-bleed dividers short */ align-items:stretch; background:var(--paper);border-bottom:1px solid var(--rule); padding:8px var(--gutter) 22px;margin:0; transform:translateY(-101%);visibility:hidden;pointer-events:none; transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s; } .chrome nav a{padding:13px 0;border-bottom:1px solid var(--rule);font-size:13px} [data-nav="open"] .chrome nav{transform:none;visibility:visible;pointer-events:auto;transition-delay:0s,0s} /* on a phone the order button is the whole point — make it the whole width */ .chrome nav a.chrome__cta{ justify-content:center;text-align:center;margin-top:14px; background:var(--hot);border:1px solid var(--hot);color:#fff; padding:15px 0;font-size:12px; } .chrome nav a.chrome__cta::before{display:none} .burger{display:block} } /* ========================================================================== XEROX PHOTOGRAPHY — the signature flyer (halftone) state resolves to real on reveal / hover ========================================================================== */ .xr{position:relative;overflow:hidden;background:var(--paper-2)} .xr img{width:100%;height:100%;object-fit:cover;display:block} .xr__x{ /* halftone layer */ position:absolute;inset:0;z-index:2; image-rendering:auto; transition:opacity .85s cubic-bezier(.4,0,.2,1); } .xr__c{position:relative;z-index:1} /* mode: reveal-on-scroll (default) */ [data-xerox="reveal"] .xr.is-in .xr__x{opacity:0} /* mode: hold — stays a flyer until you hover it */ [data-xerox="hold"] .xr__x{opacity:1} [data-xerox="hold"] .xr:hover .xr__x, [data-xerox="hold"] .xr:focus-within .xr__x{opacity:0} /* mode: off */ [data-xerox="off"] .xr__x{opacity:0!important} /* mode: always */ [data-xerox="always"] .xr__x{opacity:1!important} /* -------------------------------------------------------------------------- RE-PRINT — the plate comes back and drops off again. Has to be a keyframe rather than a transition: the plate's resting state is already opacity 0 once .is-in has landed, and transitioning it back to 1 before fading would show the fade run backwards first. An animation just starts at 1 and goes. Scroll re-entry (js adds .is-reprint) runs at the load-in's own .85s. Hover runs shorter — it answers the cursor directly, so it should feel quicker than something happening in your peripheral vision. -------------------------------------------------------------------------- */ @keyframes xr-reprint{ from{opacity:1} to{opacity:0} } [data-xerox="reveal"] .xr.is-reprint .xr__x{ animation:xr-reprint .85s cubic-bezier(.4,0,.2,1) both; } /* hover is pure CSS. hover:hover + pointer:fine keeps it off touch screens, where :hover latches after a tap and would strand the plate mid-fade. */ @media(hover:hover) and (pointer:fine){ [data-xerox="reveal"] .xr.is-in:hover .xr__x{ animation:xr-reprint .6s cubic-bezier(.4,0,.2,1) both; } /* …but not the full-bleed backdrops. You cross those simply moving the pointer down the page, so re-printing them is noise, not delight. They still re-print on scroll like everything else. */ [data-xerox="reveal"] .hero__bg:hover .xr__x, [data-xerox="reveal"] .phead__bg:hover .xr__x, [data-xerox="reveal"] .fscene .xr:hover .xr__x{animation:none} } @media(prefers-reduced-motion:reduce){ .xr__x{transition:none} /* no replays at all — the image resolves once and stays resolved */ [data-xerox="reveal"] .xr.is-reprint .xr__x, [data-xerox="reveal"] .xr.is-in:hover .xr__x{animation:none} } /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative;min-height:100svh;display:flex;flex-direction:column; justify-content:flex-end;padding-top:var(--chrome-h); isolation:isolate;overflow:hidden; } .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.12) contrast(1.04)} .hero__scrim{ position:absolute;inset:0;z-index:-1; background: linear-gradient(180deg,rgba(10,10,9,.86) 0%,rgba(10,10,9,.28) 34%,rgba(10,10,9,.62) 68%,var(--paper) 99%), radial-gradient(120% 80% at 50% 100%,rgba(10,10,9,.7),transparent 70%); } .hero__in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(28px,4vw,52px)} .hero h1{ /* min was 46px, tuned for the old 9-character longest line. "Asbury's OG" is 11 and wrapped inside .t (which is overflow:hidden, so the wrap ate the rise-in). 34px holds one line per span down to a 320px viewport. */ font-size:clamp(34px,10.4vw,168px); font-stretch:112%; margin:0 0 clamp(18px,2.4vw,30px); } .hero h1 em{font-style:normal;display:block} .hero h1 .t{display:block;overflow:hidden} .hero h1 .t i{display:block;font-style:normal;transform:translateY(102%); animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards} .hero h1 .t:nth-child(2) i{animation-delay:.07s} .hero h1 .t:nth-child(3) i{animation-delay:.14s} @keyframes riseIn{to{transform:none}} @media(prefers-reduced-motion:reduce){ .hero h1 .t i{transform:none;animation:none} } .hero__meta{ display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,42px);align-items:flex-end; border-top:1px solid var(--rule);padding-top:18px; } .hero__lede{max-width:46ch;color:var(--ink);font-family:var(--sans);font-stretch:100%; font-size:clamp(15px,1.3vw,19px);line-height:1.45; /* margin:0 because it's a
and p{margin:0 0 1em} applies — p:last-child
can't reach it, the clock is its sibling.
align-self overrides the row's flex-end: the row is as tall as the clock,
so a one-line lede pinned to the bottom left ~130px of dead space under
the rule. Top-aligned it sits beside OPEN and the gap closes. */
margin:0;align-self:flex-start}
.hero__lede b{font-weight:700}
/* the big live clock */
.clock{margin-left:auto;text-align:right;min-width:min(100%,300px)}
.clock__state{
font-family:var(--sans);font-weight:900;font-stretch:112%;text-transform:uppercase;
font-size:clamp(34px,4.4vw,64px);line-height:.9;color:var(--hot);letter-spacing:-.02em;
display:flex;align-items:center;gap:.28em;justify-content:flex-end;
}
[data-open="closed"] .clock__state{color:var(--closed)}
.clock__sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}
.clock__sub b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
/* blinking eye beside the state */
.eyeblink{width:.86em;height:.53em;color:currentColor;flex:0 0 auto}
.eyeblink .lid{
transform-origin:50% 46%;
animation:blink 7.2s cubic-bezier(.3,0,.2,1) infinite;
}
@keyframes blink{
0%,92%,100%{transform:scaleY(1)}
94.5%{transform:scaleY(.04)}
97%{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){.eyeblink .lid{animation:none}}
.hero__scroll{
position:absolute;right:var(--gutter);top:calc(var(--chrome-h) + 26px);
writing-mode:vertical-rl;font-size:10px;letter-spacing:.28em;color:var(--ink-3);
text-transform:uppercase;display:none;
}
@media(min-width:1280px){.hero__scroll{display:block}}
/* ==========================================================================
PLACARD
the static fact band between the hero and section 01. replaced a scrolling
marquee — a ticker reads as website, not as bar, and it hid real copy
behind aria-hidden. 1px grid gaps draw the dividers, same trick as .shots.
All four across at every width. These are brand facts now, not flavour —
hiding three of them on a phone loses the two the client asked for by name.
Still one row rather than a 2x2: a grid of tiles reads as an app menu, not
a placard. The labels are short enough that the type just scales down.
========================================================================== */
.plac{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
border-block:1px solid var(--rule);
}
/* the band already closes on a full-bleed rule — the next section's folio rule
directly under it makes the page look like it starts twice. */
.plac + .sec .slabel{border-top:0}
.plac__i{
background:var(--paper);margin:0;text-align:center;
/* Centred both ways. The menu page's "No reservations" is long enough to
wrap to two lines on a phone; centring keeps it level with the one-line
labels beside it instead of hanging off the top of the band. */
display:flex;align-items:center;justify-content:center;
/* horizontal padding collapses first — the gutters are what push a long
label over the edge on a narrow screen, before the type size does */
padding:clamp(13px,1.8vw,21px) clamp(3px,1vw,10px);
font-family:var(--sans);font-weight:800;font-stretch:82%;text-transform:uppercase;
font-size:clamp(10px,1.7vw,20px);letter-spacing:.02em;line-height:1.15;
text-wrap:balance;
}
.plac__i.hot{color:var(--hot)}
/* The one colour utility. Everything else in this sheet is component-scoped, but
`.hot` gets used as an inline accent inside display headlines on three different
components — scoping it per component is how menu.html's closer ended up with a
dead one. `.btn--hot` is a separate class and is untouched by this. */
.hot{color:var(--hot)}
/* ==========================================================================
STATEMENT
========================================================================== */
.state{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(min-width:940px){.state{grid-template-columns:1.06fr .94fr}}
.state h2{font-size:clamp(30px,4.2vw,64px);font-stretch:92%;line-height:.94}
/* .hot as a headline accent is now the utility below, not scoped here — the same
markup was already being used outside .state (menu.html's closer, "on the wall.")
where this selector never reached it, so that line had been rendering plain cream. */
.state__body{margin-top:clamp(20px,2.6vw,34px);display:grid;gap:18px;max-width:56ch}
.state__body p{font-family:var(--sans);font-stretch:100%;font-size:clamp(15px,1.25vw,18px);
line-height:1.5;color:var(--ink-2)}
.state__body p b{color:var(--ink);font-weight:600}
.state__fig{position:relative}
.state__fig .xr{aspect-ratio:3/4;border:1px solid var(--rule)}
.cap{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
margin-top:10px;display:flex;gap:10px}
.cap b{color:var(--ink-2);font-weight:500}
/* ==========================================================================
BEER & A SHOT
========================================================================== */
/* two up, then four. never three — four cards in a 3-col grid leaves a
two-column hole beside the last one right across tablet portrait. */
.shots{display:grid;gap:1px;background:var(--rule);
grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
@media(min-width:900px){.shots{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){
.shot__t{padding:14px 12px 16px;gap:5px}
.shot__d{font-size:11px}
.shot__tag{font-size:9px;letter-spacing:.14em}
}
.shot{background:var(--paper);padding:0;position:relative;display:flex;flex-direction:column}
.shot .xr{aspect-ratio:4/5}
.shot__t{padding:20px clamp(14px,1.5vw,22px) 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.shot__n{font-family:var(--sans);font-weight:900;font-stretch:80%;text-transform:uppercase;
font-size:clamp(19px,2vw,29px);line-height:.94}
.shot__d{font-size:12px;color:var(--ink-2);letter-spacing:.02em;line-height:1.45}
.shot__tag{margin-top:auto;padding-top:12px;font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-3)}
.shot__tag.tbd{color:var(--yellow)}
/* ==========================================================================
THE BOARD (chalk) + draught list
========================================================================== */
.board{display:grid;gap:clamp(24px,4vw,58px);grid-template-columns:1fr}
/* the photo went portrait 2026-07-29 (client pick) — the list takes the wider
column now, or the picture runs taller than the prices sitting beside it. */
@media(min-width:960px){.board{grid-template-columns:.85fr 1.15fr}}
.board .xr{aspect-ratio:4/5;border:1px solid var(--rule)}
.blist{border-top:1px solid var(--rule)}
.blist h3{font-family:var(--sans);font-weight:900;font-stretch:80%;text-transform:uppercase;
font-size:14px;letter-spacing:.06em;margin:26px 0 10px;color:var(--ink-3)}
.blist h3:first-child{margin-top:20px}
.brow{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.brow__n{font-family:var(--sans);font-stretch:96%;font-weight:600;font-size:clamp(15px,1.4vw,18px);
text-transform:uppercase;letter-spacing:.01em}
.brow__l{flex:1;height:1px;background:var(--rule);transform:translateY(-3px)}
.brow__p{font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-2)}
.cashonly{
display:inline-flex;align-items:center;gap:10px;margin-top:24px;
border:1px solid var(--hot);color:var(--hot);padding:9px 14px;
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
}
/* ==========================================================================
FOOD
========================================================================== */
.food{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr}
/* tablet portrait was stacking four full-width 4:5 portraits — taller page
than the phone. two up from 600 keeps the plates big without the marathon. */
@media(min-width:600px){.food{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.food{grid-template-columns:repeat(4,1fr)}}
.dish{display:flex;flex-direction:column;gap:12px}
.dish .xr{aspect-ratio:4/5;border:1px solid var(--rule)}
.dish__h{display:flex;align-items:baseline;gap:10px}
.dish__n{font-family:var(--sans);font-weight:900;font-stretch:82%;text-transform:uppercase;
font-size:clamp(17px,1.7vw,22px);line-height:1}
.dish__p{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--hot);font-size:14px}
.dish__d{font-size:12px;color:var(--ink-2);line-height:1.45}
.menuband{
margin-top:clamp(34px,4vw,58px);padding-top:clamp(24px,3vw,36px);
border-top:1px solid var(--rule);
display:grid;gap:clamp(18px,3vw,44px);grid-template-columns:1fr;align-items:start;
}
@media(min-width:820px){.menuband{grid-template-columns:1.25fr .75fr}}
.menuband__note{font-size:13px;color:var(--ink-2);line-height:1.6;max-width:56ch}
.menuband__cta{margin-top:0}
@media(min-width:820px){.menuband__cta{justify-content:flex-end;margin-top:6px}}
.credit{border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.credit:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
/* ==========================================================================
BASEMENT
========================================================================== */
.basement{background:#060605;border-block:1px solid var(--rule)}
.bment{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:1fr}
@media(min-width:960px){.bment{grid-template-columns:.92fr 1.08fr}}
.bment h2{font-size:clamp(32px,5.4vw,86px);font-stretch:78%;line-height:.9}
/* A grid, not a flex row: rows now carry a time and some carry a second line
of detail under the name, and a two-line middle cell can't sit on a shared
baseline with the columns either side of it. */
.gigs{border-top:1px solid var(--rule)}
.gig{display:grid;grid-template-columns:74px 1fr auto;
gap:4px clamp(12px,2vw,26px);align-items:baseline;padding:13px 0;
border-bottom:1px solid var(--rule)}
.gig__d{font-size:11px;letter-spacing:.14em;color:var(--ink-3);
text-transform:uppercase;font-variant-numeric:tabular-nums}
.gig__a{font-family:var(--sans);font-weight:800;font-stretch:88%;text-transform:uppercase;
font-size:clamp(15px,1.6vw,21px);line-height:1.05}
/* who's hosting, how it runs — the flyer's small print */
.gig__s{grid-column:2;font-size:11px;color:var(--ink-3);line-height:1.4;margin:0}
.gig__m{text-align:right;font-size:10px;letter-spacing:.14em;
color:var(--ink-3);text-transform:uppercase;line-height:1.5;white-space:nowrap}
.gig__t{display:block;color:var(--ink-2);font-variant-numeric:tabular-nums}
.gig__x{display:block}
/* the room it's in, when it isn't ours */
.gig__x.is-away{color:var(--hot)}
/* narrow: the name needs the full measure, so time+room drop under the date */
@media(max-width:560px){
.gig{grid-template-columns:1fr auto}
.gig__d{grid-column:1}
.gig__a{grid-column:1/-1}
.gig__s{grid-column:1/-1}
.gig__m{grid-column:2;grid-row:1;text-align:right}
}
/* unconfirmed date — same yellow as .shot__tag.tbd */
.gig__d.tbd{color:var(--yellow)}
/* --------------------------------------------------------------------------
BLOCK PARTY CALLOUT — once a year, so it sits outside the month list
rather than reading as one more Wednesday.
-------------------------------------------------------------------------- */
.bpcall{
margin-top:clamp(28px,3.4vw,44px);
border:1px solid var(--hot);
display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:1fr;
padding:clamp(20px,2.6vw,30px);align-items:center;
}
@media(min-width:820px){.bpcall{grid-template-columns:1fr auto}}
.bpcall__eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
text-transform:uppercase;color:var(--hot);margin:0 0 10px}
/* name and date are separate elements, not one string with a
: forced
together they wrapped again inside each half and came out as four ragged
lines. The date is the thing to remember, so it gets the accent. */
.bpcall__h{font-family:var(--sans);font-weight:900;font-stretch:86%;
text-transform:uppercase;font-size:clamp(19px,2.2vw,30px);line-height:1.02;margin:0}
.bpcall__date{font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:.14em;
text-transform:uppercase;color:var(--hot);margin:10px 0 0}
.bpcall__d{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:10px 0 0;max-width:44ch}
.bpcall .linkrow{margin-top:0}
/* ==========================================================================
BLOCK PARTY
========================================================================== */
.bp__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px;margin-bottom:clamp(24px,3vw,44px)}
.bp__head h2{font-size:clamp(34px,7.4vw,120px);font-stretch:104%;line-height:.85}
.bp__yr{margin-left:auto;text-align:right}
.bp__yr b{display:block;font-family:var(--sans);font-weight:900;font-stretch:110%;
font-size:clamp(38px,5vw,74px);line-height:.86;color:var(--hot)}
/* below this the head stacks and a right-aligned "10" floats away from its
own caption — keep the number sitting on top of the words it belongs to */
@media(max-width:560px){.bp__yr{margin-left:0;text-align:left}}
.bpgrid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.bpgrid{grid-template-columns:repeat(12,1fr)}}
.bpgrid .xr{background:var(--paper-2)}
/* full / half half / full — a lone half-width tile leaves a black hole */
.bpgrid .a,.bpgrid .d{grid-column:span 2}
.bpgrid .xr{aspect-ratio:16/11}
/* row heights match because each pair's aspect ratios are solved against
its column span: 7-col @16/10 and 5-col @8/7 resolve to the same height. */
@media(min-width:820px){
.bpgrid .a{grid-column:span 7;aspect-ratio:16/10}
.bpgrid .b{grid-column:span 5;aspect-ratio:8/7}
.bpgrid .c{grid-column:span 5;aspect-ratio:8/7}
.bpgrid .d{grid-column:span 7;aspect-ratio:16/10}
}
/* ==========================================================================
LINK ROWS
========================================================================== */
.linkrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
/* --------------------------------------------------------------------------
BUTTONS — ink floods the stencil left-to-right, drains right on the way out.
No shadows, no rounded corners, no lift: this site is printed, not layered.
-------------------------------------------------------------------------- */
.btn{
position:relative;isolation:isolate;overflow:hidden;
display:inline-flex;align-items:center;gap:.85em;
min-height:44px;padding:0 20px;
border:1px solid var(--rule);background:transparent;color:var(--ink);
font-family:var(--mono);font-size:11px;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
transition:color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);
}
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
transform:scaleX(0);transform-origin:right center;
transition:transform .44s cubic-bezier(.65,0,.35,1);
}
/* the arrow is drawn, not a glyph — it steps forward with the ink */
.btn::after{
content:"";width:9px;height:9px;flex:0 0 auto;margin-left:-.2em;
background:currentColor;
clip-path:polygon(0 42%,62% 42%,62% 16%,100% 50%,62% 84%,62% 58%,0 58%);
transform:translateX(-3px);opacity:.45;
transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .3s;
}
.btn:hover,.btn:focus-visible{color:var(--paper);border-color:var(--ink)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.btn:hover::after,.btn:focus-visible::after{transform:none;opacity:1}
.btn:active{transform:translateY(1px)}
/* primary — already inked; hover drains it back to bone */
.btn--hot{background:var(--hot);border-color:var(--hot);color:#fff}
.btn--hot::after{opacity:.7}
.btn--hot:hover,.btn--hot:focus-visible{color:var(--paper);border-color:var(--ink)}
/* quiet variant for dense rows (footer, secondary links) */
.btn--sm{min-height:38px;padding:0 15px;font-size:10px;letter-spacing:.18em;gap:.7em}
.btn--sm::after{width:8px;height:8px}
/* a button with no arrow, for phone numbers and other non-journeys */
.btn--flat::after{display:none}
@media(prefers-reduced-motion:reduce){
.btn,.btn::before,.btn::after,.chrome__cta,.chrome nav a.chrome__cta::before{transition-duration:.01ms}
}
/* ==========================================================================
GIFT BAND — section 08
The card is the Complex's, shared by all three rooms. Its CMYK
misregistration is already this site's language, so it needs no treatment
beyond the standard halftone pair.
========================================================================== */
.giftband{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.giftband{grid-template-columns:.95fr 1.05fr}}
/* Square corners, per the house rule. The source photo caught the card's own
rounded corners with the table showing through them as pale marks, so the
image itself is cropped inside the card's edge instead — see the -inset
crop in the asset. Nothing rounded, nothing layered. */
.giftband .xr{aspect-ratio:1200/748;border:1px solid var(--rule)}
.giftband__d{font-size:clamp(14px,1.2vw,17px);color:var(--ink-2);line-height:1.55;
max-width:44ch;margin:clamp(14px,1.6vw,20px) 0 0}
/* ==========================================================================
JOIN BAND — the email list. A utility strip, deliberately outside the
numbered 01…08 grammar, same full-bleed rules as .plac.
========================================================================== */
.joinband{border-block:1px solid var(--rule);background:var(--paper-2)}
.joinband__in{
max-width:var(--maxw);margin:0 auto;padding:clamp(26px,3.4vw,44px) var(--gutter);
display:grid;gap:clamp(16px,2.4vw,32px);grid-template-columns:1fr;align-items:center;
}
@media(min-width:760px){.joinband__in{grid-template-columns:1fr auto}}
.joinband h2{font-family:var(--sans);font-weight:900;font-stretch:88%;text-transform:uppercase;
font-size:clamp(20px,2.6vw,34px);line-height:1;margin:0}
.joinband p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:10px 0 0;max-width:52ch}
.joinband .linkrow{margin-top:0}
/* ==========================================================================
FOOTER
========================================================================== */
footer{border-top:1px solid var(--rule);background:#060605}
/* the scene — merch on the wall, with the wordmark cut out of it */
.fscene{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);
height:clamp(190px,26vw,360px)}
.fscene .xr{position:absolute;inset:0}
/* hold the sign in frame. The band shows ~45% of the strip's height and the
sign lives in its top two-thirds, so the window has to sit high — at 32%
it cut the eye in half and left only the lashes. */
.fscene .xr img{object-position:50% 12%}
.fscene__scrim{position:absolute;inset:0;z-index:3;
background:linear-gradient(180deg,rgba(6,6,5,.55),rgba(6,6,5,.82))}
.fscene__word{
position:absolute;inset:0;z-index:4;display:grid;place-items:center;
font-family:var(--sans);font-weight:900;font-stretch:118%;text-transform:uppercase;
font-size:min(15vw,150px);line-height:.8;letter-spacing:-.02em;white-space:nowrap;
color:transparent;-webkit-text-stroke:clamp(1px,.22vw,3px) var(--ink);
opacity:.9;user-select:none;margin:0;
}
.fwrap{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,72px) var(--gutter)}
.fgrid{display:grid;gap:clamp(26px,3.4vw,52px);grid-template-columns:1fr}
@media(min-width:640px){
.fgrid{grid-template-columns:1fr 1fr}
.fmap{grid-column:1/-1}
}
@media(min-width:1080px){
.fgrid{grid-template-columns:1.35fr .8fr .8fr .95fr 1.15fr}
.fmap{grid-column:auto}
}
.fcol h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
border-bottom:1px solid var(--rule);padding-bottom:10px}
.fcol address,.fcol p{font-style:normal;font-size:12.5px;color:var(--ink-2);line-height:1.75;margin:0}
.fcol a:hover{color:var(--ink)}
.fnav{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.9;color:var(--ink-2)}
.fnav a:hover{color:var(--hot)}
.fbrand svg{height:34px;width:auto;color:var(--ink)}
.fbrand p{margin-top:16px;max-width:34ch}
/* same treatment as .map on the contact page — invert + hue-rotate darkens the
tiles while putting the colour back, then the vignette drops the edges. A
plain grayscale+invert reads light, which is the opposite of what we want. */
.fmap{border:1px solid var(--rule);aspect-ratio:4/3;overflow:hidden;
background:var(--paper-2);position:relative}
@media(min-width:1080px){.fmap{aspect-ratio:auto;min-height:220px}}
.fmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
filter:invert(1) hue-rotate(180deg) saturate(.42) contrast(.86) brightness(.92)}
.fmap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(10,10,9,.5));
mix-blend-mode:multiply}
/* --------------------------------------------------------------------------
THE COMPLEX — mirrors the block on capitolineap.com and loteriaap.com so
the three rooms cross-link identically whichever one you land on: centred
label, three chips, each site marking its own.
The chips are cream because Capitoline's wolf carries magenta and Lotería's
mermaid carries cyan — both are black artwork. The greyscale-invert this
replaced flattened all three to grey and threw the brand colour away. Bond
St.'s own mark is white line art, so it sits on a dark block inside its
chip, which is precisely what the other two sites do for ours.
-------------------------------------------------------------------------- */
.fcomplex{margin-top:clamp(34px,4vw,56px);padding-top:clamp(24px,3vw,38px);
border-top:1px solid var(--rule);text-align:center}
.fcomplex__label{
font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.28em;
text-transform:uppercase;color:var(--ink-3);margin:0 0 clamp(18px,2.2vw,28px);
}
.fam{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
gap:clamp(10px,1.4vw,18px)}
.fam__chip{
display:flex;align-items:center;justify-content:center;
width:clamp(146px,19vw,214px);min-height:clamp(78px,8.6vw,100px);
padding:clamp(14px,1.6vw,20px);
background:var(--ink);border:1px solid var(--ink);
transition:border-color .3s,filter .3s;
}
.fam__chip img{max-height:42px;width:auto;object-fit:contain;display:block}
/* the wolf is nearly square — matched on optical weight, not on box height */
.fam__chip img[src*="capitoline"]{max-height:62px}
/* All three chips share one background, so the odd one out has to be the
artwork: ours is white line art and would vanish on cream, so it's flipped
to black here. Alpha survives invert(), so only the strokes change. The
other two sites solve this by putting a dark block behind our mark instead —
same problem, different answer. */
.fam__chip img[src*="bondstreet"]{filter:invert(1);max-height:38px}
.fam__chip:hover,.fam__chip:focus-visible{border-color:var(--hot)}
/* no lift, no shadow — this site is printed, not layered */
.fam__chip.is-here{outline:2px solid var(--hot);outline-offset:3px}
/* three-up: credit / the mark / address. Grid rather than flex so the mark
lands dead centre regardless of how long the two side strings are. */
.fbottom{margin-top:clamp(26px,3vw,40px);padding-top:clamp(18px,2vw,26px);
border-top:1px solid var(--rule);
display:grid;gap:14px;grid-template-columns:1fr;align-items:center;
font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media(min-width:760px){
.fbottom{grid-template-columns:1fr auto 1fr}
.fbottom__end{text-align:right}
}
/* phones: the nav column was a stack of 14px tap targets */
@media(max-width:700px){
.fnav a{display:block;padding-block:11px;border-bottom:1px solid var(--rule)}
.fcol address a{display:inline-block;padding-block:7px}
}
/* --------------------------------------------------------------------------
GFY — the monogram, small and quiet in the middle of the bottom bar, the
way Capitoline parks its discoball. Kept as outline letters rather than a
filled chip so it still reads as the mark chalked on the wall, just at
footnote size. No label: the single wiggle when the footer first scrolls
past is the whole invitation. js/main.js §5 runs the takeover.
-------------------------------------------------------------------------- */
.gfy__mark{
justify-self:center;padding:0;background:none;border:0;cursor:pointer;
font-family:var(--sans);font-weight:900;font-stretch:118%;text-transform:uppercase;
font-size:21px;line-height:1;letter-spacing:.02em;
color:transparent;-webkit-text-stroke:1px var(--ink-3);
opacity:.55;user-select:none;white-space:nowrap;
transition:opacity .4s,-webkit-text-stroke-color .4s,transform .6s cubic-bezier(.16,1,.3,1);
}
.gfy__mark:hover,
.gfy__mark:focus-visible{
opacity:1;-webkit-text-stroke-color:var(--hot);transform:rotate(-3deg) scale(1.12);
}
/* a little bigger where it's a thumb target rather than a cursor target */
@media(max-width:760px){.gfy__mark{font-size:26px;padding:6px 4px}}
.gfy__mark.hint{animation:gfyhint 2.2s cubic-bezier(.2,.7,.2,1) 1}
@keyframes gfyhint{
0%,100%{transform:none}
20%{transform:rotate(-5deg) scale(1.1)}
42%{transform:rotate(4deg) scale(1.06)}
64%{transform:rotate(-2deg) scale(1.03)}
82%{transform:rotate(1deg)}
}
/* --------------------------------------------------------------------------
GFY TAKEOVER — three print passes that miss, then land.
The whole site is a xerox of a flyer; this is that idea at full volume.
Pure transform/opacity on three text layers — no canvas.
-------------------------------------------------------------------------- */
.gfy-stage{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden}
.gfy-stage__veil{position:absolute;inset:0;background:#060605;opacity:0;
transition:opacity .42s cubic-bezier(.4,0,.2,1)}
.gfy-stage.is-on .gfy-stage__veil{opacity:1}
.gfy-stage__reg{position:relative;display:grid;place-items:center;z-index:2}
.gfy-pass{
grid-area:1/1;margin:0;white-space:nowrap;user-select:none;
font-family:var(--sans);font-weight:900;font-stretch:125%;text-transform:uppercase;
font-size:min(30vw,34vh);line-height:.74;letter-spacing:-.012em;
mix-blend-mode:screen;opacity:0;
transition:transform .52s cubic-bezier(.16,1,.3,1),opacity .3s linear;
}
.gfy-pass--c{color:#2fb8dd} /* cyan plate */
.gfy-pass--m{color:#ff2d8a} /* magenta plate */
.gfy-pass--k{color:var(--ink)} /* key */
/* off-register entry positions */
.gfy-stage.p-c .gfy-pass--c{opacity:1;transform:translate3d(-7%,-6%,0)}
.gfy-stage.p-m .gfy-pass--m{opacity:1;transform:translate3d(7%,6%,0)}
.gfy-stage.p-k .gfy-pass--k{opacity:1;transform:translate3d(2.5%,-2%,0)}
/* …SNAP */
.gfy-stage.is-reg .gfy-pass{transform:translate3d(0,0,0);opacity:1}
.gfy-stage.is-reg .gfy-stage__reg{animation:gfyjitter 2.6s steps(1) infinite}
@keyframes gfyjitter{
0%,92%{transform:translate3d(0,0,0)}
94%{transform:translate3d(.25%,-.2%,0)}
96%{transform:translate3d(-.2%,.15%,0)}
98%{transform:translate3d(.1%,.1%,0)}
}
/* exit — the passes peel back off in reverse */
.gfy-stage.is-out .gfy-pass{opacity:0;transition-duration:.34s}
.gfy-stage.is-out .gfy-pass--k{transform:translate3d(2.5%,-2%,0)}
.gfy-stage.is-out .gfy-pass--m{transform:translate3d(9%,8%,0)}
.gfy-stage.is-out .gfy-pass--c{transform:translate3d(-9%,-8%,0)}
.gfy-stage.is-out .gfy-stage__veil{opacity:0}
.gfy-stage__grain{
position:absolute;inset:-50%;z-index:3;pointer-events:none;
opacity:0;mix-blend-mode:overlay;transition:opacity .4s;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grainshift 6s steps(6) infinite;
}
.gfy-stage.is-reg .gfy-stage__grain{opacity:.5}
.gfy-stage__skip{
position:absolute;left:50%;bottom:clamp(20px,4vh,42px);transform:translateX(-50%);
z-index:5;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity .5s .8s;
}
.gfy-stage.is-reg .gfy-stage__skip{opacity:1}
body.gfy-lock{overflow:hidden}
/* reduced motion: no slam, no jitter — the registered mark simply appears */
@media(prefers-reduced-motion:reduce){
.gfy__mark.hint{animation:none}
.gfy-pass{transition:opacity .3s linear;transform:none!important}
.gfy-stage.p-c .gfy-pass--c,
.gfy-stage.p-m .gfy-pass--m,
.gfy-stage.p-k .gfy-pass--k,
.gfy-stage.is-reg .gfy-pass{opacity:1}
.gfy-stage.is-reg .gfy-stage__reg,
.gfy-stage__grain{animation:none}
.gfy-stage.is-out .gfy-pass{opacity:0}
}
/* ==========================================================================
REVEALS
========================================================================== */
.rv{opacity:0;transform:translateY(16px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* hard breaks in display copy only survive where there's room for them */
@media(max-width:720px){ br.nb{display:none} }
/* ==========================================================================
SUBPAGES — menu / plan a party / contact
Everything here reuses the homepage's own parts (.slabel folios, .blist
price rows, .plac band, .btn, .cap) so a second page never announces
itself as a different site. Only two genuinely new components: the short
page header, and the forms.
========================================================================== */
/* native controls (select popups, date picker, scrollbars) follow the paper */
:root{color-scheme:dark}
/* current page in the chrome — a hairline under, nothing louder */
.chrome nav a[aria-current="page"]{color:var(--ink)}
@media(min-width:861px){
.chrome nav a[aria-current="page"]{box-shadow:0 7px 0 -6px var(--hot)}
}
@media(max-width:860px){
.chrome nav a[aria-current="page"]{color:var(--hot)}
}
/* --------------------------------------------------------------------------
PAGE HEADER
Deliberately NOT the 100svh homepage hero — a subpage that opens with a
full-screen photo makes the site feel like five homepages. Same photograph,
same scrim, same rising type; roughly half the height.
-------------------------------------------------------------------------- */
.phead{
position:relative;min-height:min(58svh,560px);display:flex;flex-direction:column;
justify-content:flex-end;padding-top:var(--chrome-h);
isolation:isolate;overflow:hidden;
}
.phead__bg{position:absolute;inset:0;z-index:-2}
.phead__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.1) contrast(1.04)}
.phead__scrim{
position:absolute;inset:0;z-index:-1;
background:
linear-gradient(90deg,rgba(10,10,9,.82) 0%,rgba(10,10,9,.45) 34%,transparent 62%),
linear-gradient(180deg,rgba(10,10,9,.86) 0%,rgba(10,10,9,.3) 40%,rgba(10,10,9,.72) 76%,var(--paper) 99%),
radial-gradient(120% 80% at 50% 100%,rgba(10,10,9,.7),transparent 72%);
}
/* on a phone the type column IS the full width, so a left-side wash protects
nothing — the eyebrow was sitting unreadable on the lit storefront window.
Swap it for a flat overall knock-back below 700px. */
@media(max-width:700px){
.phead__scrim{
background:
linear-gradient(180deg,rgba(10,10,9,.8) 0%,rgba(10,10,9,.52) 34%,rgba(10,10,9,.8) 78%,var(--paper) 99%),
linear-gradient(0deg,rgba(10,10,9,.28),rgba(10,10,9,.28));
}
}
.phead__in{width:100%;max-width:var(--maxw);margin:0 auto;
padding:clamp(60px,9vw,120px) var(--gutter) clamp(26px,3.4vw,44px)}
.phead h1{font-size:clamp(38px,8vw,124px);font-stretch:110%;margin:0}
.phead h1 .t{display:block;overflow:hidden}
.phead h1 .t i{display:block;font-style:normal;transform:translateY(102%);
animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards}
.phead h1 .t:nth-child(2) i{animation-delay:.07s}
.phead h1 .t:nth-child(3) i{animation-delay:.14s}
@media(prefers-reduced-motion:reduce){.phead h1 .t i{transform:none;animation:none}}
.phead__lede{
max-width:56ch;margin:clamp(16px,2vw,24px) 0 0;color:var(--ink-2);
font-family:var(--sans);font-stretch:100%;font-size:clamp(14px,1.2vw,18px);line-height:1.5;
border-top:1px solid var(--rule);padding-top:16px;
}
/* --------------------------------------------------------------------------
MENU — the .blist/.brow price row from the homepage board, in columns.
-------------------------------------------------------------------------- */
.mlists{display:grid;gap:clamp(26px,3.2vw,54px) clamp(26px,4vw,72px);
grid-template-columns:1fr;align-items:start}
@media(min-width:680px){.mlists{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.mlists{grid-template-columns:repeat(4,1fr)}}
/* long compound names (the grilled cheeses) have to wrap without shoving the
price off the row — the leader absorbs whatever is left */
.mlists .brow{align-items:baseline;gap:10px}
.mlists .brow__n{flex:0 1 auto;min-width:0}
.mlists .brow__p{flex:0 0 auto}
/* The drink section holds THREE lists, and three items in a two- or
four-column grid always leaves a hole (same rule as the homepage card
grids: never a lone tile in an incomplete row). So it gets its own
ladder — 1-up, then 2-up with "Beer & a shot" spanning the full width,
then a true 3-up once there's room. */
@media(min-width:680px) and (max-width:1019px){
.mlists--3 > :nth-child(3){grid-column:1/-1}
}
@media(min-width:1020px){
.mlists--3{grid-template-columns:repeat(3,1fr)}
.mlists--3 > :nth-child(3){grid-column:auto}
}
.brow__s{font-size:11.5px;color:var(--ink-3);line-height:1.45;
margin:8px 0 0;max-width:40ch}
.brow__s + .brow{margin-top:12px}
.blist__note{font-size:11px;color:var(--ink-3);line-height:1.5;margin:14px 0 0;max-width:36ch}
.drinkband{background:#060605;border-block:1px solid var(--rule)}
.mnote{margin-top:clamp(28px,3.4vw,48px);display:grid;gap:18px clamp(26px,4vw,72px);
align-items:start}
@media(min-width:1020px){.mnote{grid-template-columns:repeat(3,1fr)}}
.mnote__t{font-size:12px;color:var(--ink-3);line-height:1.55;max-width:46ch;margin:0}
/* --------------------------------------------------------------------------
TBC — the open questions rendered as design instead of hidden in a doc.
Same yellow as .shot__tag.tbd on the homepage. Delete these once Lauren
comes back with numbers; nothing else depends on the class.
-------------------------------------------------------------------------- */
.tbc{
display:inline-flex;align-items:center;gap:.6em;
border:1px solid var(--yellow);color:var(--yellow);
padding:5px 10px;margin:0;
font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
}
.specnote{font-family:var(--sans);font-stretch:100%;font-size:clamp(14px,1.2vw,17px);
line-height:1.55;color:var(--ink-2);max-width:52ch}
.closer{display:grid;gap:clamp(20px,3vw,52px);grid-template-columns:1fr;align-items:end}
@media(min-width:860px){.closer{grid-template-columns:1.05fr .95fr}}
.closer .linkrow{margin-top:22px}
/* --------------------------------------------------------------------------
FORMS — stub only. Printed, not layered: hairline boxes, no radius,
no shadow, the hot colour reserved for focus, errors and the submit.
-------------------------------------------------------------------------- */
.form{margin:0}
.form__grid{display:grid;gap:clamp(14px,1.6vw,20px);
grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--full{grid-column:1/-1}
.field label{
font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-2);
}
.field .req{color:var(--hot)}
.form input,.form select,.form textarea{
font:inherit;font-size:14px;color:var(--ink);background:transparent;
border:1px solid var(--rule);border-radius:0;
padding:0 13px;min-height:48px;width:100%;
transition:border-color .2s,background-color .2s;
}
.form textarea{padding:13px;min-height:132px;resize:vertical;line-height:1.5}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-3)}
.form input:hover,.form select:hover,.form textarea:hover{border-color:#3b3632}
.form input:focus,.form select:focus,.form textarea:focus{
outline:none;border-color:var(--hot);background:rgba(255,59,31,.045);
}
.form select{
appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.form select:invalid{color:var(--ink-3)}
/* The option list is drawn by the OS, and it takes its colours from the select
rather than from the page. The rule above sets background:transparent, so on
Windows the popup can come out light while the text stays near-white and the
choices are unreadable. The employment selects dodged it by accident — being
required, they match :invalid and inherit the muted grey, which reads on any
background. Contact's Topic isn't required, so it never did. Pin both ends
explicitly instead of relying on that. */
.form select option{background-color:var(--paper-2);color:var(--ink)}
.form select option:disabled{color:var(--ink-3)}
.form input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.45;cursor:pointer}
.form input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:.9}
.form input[type="number"]{-moz-appearance:textfield}
.form input[type="number"]::-webkit-outer-spin-button,
.form input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field__err{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--hot);min-height:0;line-height:1.4}
.field__err:empty{display:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--hot)}
/* honeypot — off-screen rather than display:none, which some bots skip */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
margin-top:clamp(20px,2.4vw,30px)}
.form__req{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-3);margin:0}
.form__status{margin-top:18px}
.form__status:empty{display:none}
.form__status p{
display:block;margin:0;
border:1px solid var(--hot);color:var(--hot);padding:14px 16px;
font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;
}
.form.is-sent .form__grid,.form.is-sent .form__actions{display:none}
/* Sentence-length notices — the plain .form__status p stamp is uppercase and
letterspaced, which is right for a three-word nudge and unreadable for two
sentences. --ok keeps the hot border (a real confirmation); --warn goes
yellow, so a failed send can never be mistaken for a successful one. */
.form__status p.form__status--ok,
.form__status p.form__status--warn{
text-transform:none;letter-spacing:0;font-size:12.5px;line-height:1.65;
}
.form__status p.form__status--warn{border-color:var(--yellow);color:var(--yellow)}
.form__status p.form__status--ok a,
.form__status p.form__status--warn a{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){
.form input,.form select,.form textarea{transition:none}
}
/* ==========================================================================
SIMPLIFIED PAGE LAYOUT — party / contact / employment
Pattern lifted from loteria/site/*.html (the partner's newer, tighter
version): page header, then ONE section — a small info card beside the
form. Everything those pages used to say in four scrolling sections now
lives in the card, because on a bar's contact page nobody is reading an
essay; they want the address, the hours, and a box to type in.
========================================================================== */
.sgrid{display:grid;gap:clamp(28px,3.6vw,64px);grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.sgrid{grid-template-columns:minmax(270px,.72fr) 1fr}}
@media(min-width:1240px){.sgrid{grid-template-columns:minmax(300px,.58fr) 1fr}}
/* the card is the only "panel" on the site — kept to a hairline box and the
slightly lifted paper so it reads as a pinned index card, not a UI widget */
.icard{
border:1px solid var(--rule);background:#060605;
padding:clamp(22px,2.4vw,32px);
font-size:13px;line-height:1.65;color:var(--ink-2);
}
.icard h2{
font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;
text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
}
.icard h2:first-child{margin-top:0}
/* :not() guards matter here — .icard p (0,1,1) outranks .tbc and
.icard__note (both 0,1,0), so without them the TBC chips silently lost
their mono face and yellow, and the footnotes lost their smaller size. */
.icard p:not(.tbc):not(.icard__note){
margin:0 0 13px;font-family:var(--sans);font-stretch:100%;
font-size:14.5px;line-height:1.55;color:var(--ink-2);
}
.icard p b{color:var(--ink)}
.icard b{color:var(--ink);font-weight:600}
.icard address{font-style:normal;line-height:1.9}
.icard a{color:var(--ink);border-bottom:1px solid var(--rule);transition:border-color .2s,color .2s}
.icard a:hover,.icard a:focus-visible{color:var(--hot);border-color:var(--hot)}
.icard hr{border:0;border-top:1px solid var(--rule);margin:clamp(20px,2.2vw,28px) 0}
.icard__note{font-family:var(--sans);font-stretch:100%;font-size:12.5px;
color:var(--ink-3);line-height:1.5;margin-top:10px}
.icard .tbc{margin-top:clamp(16px,1.8vw,22px)}
.mnote .tbc{align-self:start}
.icard .linkrow{margin-top:0}
.linkrow--tight{gap:8px}
/* hours: every day is identical here, so a seven-row table is seven rows of
the same sentence. Two lines say it. */
.ihours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;
font-family:var(--mono);font-size:12.5px}
.ihours dt{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;
align-self:center}
.ihours dd{margin:0;color:var(--ink)}
/* the map is the one third-party element on the site — knocked back so it
sits in the paper instead of punching a lit rectangle through it */
.map{margin-top:clamp(20px,2.2vw,28px);border:1px solid var(--rule);
aspect-ratio:16/10;max-height:min(50vh,340px);position:relative;overflow:hidden;
background:var(--paper-2)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
filter:invert(1) hue-rotate(180deg) saturate(.42) contrast(.86) brightness(.92);
}
.map::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(10,10,9,.5));
mix-blend-mode:multiply}
/* form header — smaller than a section h2, it's a label for the box below */
.fhead{margin-bottom:clamp(20px,2.4vw,30px)}
.fhead__h{font-size:clamp(26px,3.4vw,46px);font-stretch:90%;line-height:.92;margin-top:10px}
/* was yellow while it carried the "not connected yet" TBC notice; now it's
ordinary supporting copy under the employment form, so it reads as such */
.form__note{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin:14px 0 0;max-width:46ch}