/* Home — mobile first; wider layouts are min-width additions only. */

.lid-stop {
	background: var(--li-bg);
	color: var(--li-ink);
	padding: 40px var(--li-pad) 56px;
}

.lid-home > *,
.lid-home .lid-hero__text > *,
.lid-home .lid-card > * { margin-block: 0; }

/* Time rule — the first thing in every stop */
.li-time-rule { gap: 10px; } /* the dots run up to the words, not to a ragged stop short of them */

/* One measured breath under every rule (0.8.4, Brandon: "a little more spacing between section headers … tidy and
   neat and intentional"). It was the 24px block gap on a phone and anything from 22 to 157px on desktop, where the
   10 AM copy floated mid-card. The margin collapses with the block gap in flow and stands alone in a grid. */
.lid-home .lid-stop > .li-time-rule { margin-bottom: 32px; }

/* From 960px the rule is a menu leader, not a banner: capped so time · dots · line read as one line (0.4.1, 9).
   560, not 470, since the script line went to 34px (0.6.0, D5): at 470 "sandwiches and salads take over." broke
   after "take" and left "over." alone on a second line (seen on staging 2026-10-24); 560 holds the longest line. */
@media (min-width: 960px) {
	.lid-home .li-time-rule { max-width: 560px; }
}

.li-time-rule__time {
	font-family: var(--wp--preset--font-family--subhead);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .2em;
	padding: 6px 12px;
	border: 1.5px solid var(--li-ink);
	border-radius: 0;
	white-space: nowrap; /* the box never wraps; at 320 the line may */
	color: var(--li-ink);
}

.li-time-rule__leader { min-width: 32px; color: var(--li-ink); } /* the dots stay when the 30px line wraps (0.6.0, D5) */

.li-time-rule__line {
	font-family: var(--wp--preset--font-family--script);
	font-size: 30px;
	line-height: 1.1;
	color: var(--li-accent);
}

/* Logo */
.li-logo {
	display: block;
	width: 230px;
	aspect-ratio: var(--li-logo-ratio);
	background-color: var(--li-logo);
	-webkit-mask: var(--li-img-logo) left center / contain no-repeat;
	mask: var(--li-img-logo) left center / contain no-repeat;
}

/* Sunrise stop — text */
.li-hero__tagline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: var(--li-display-weight);
	font-synthesis: var(--li-display-synthesis);
	letter-spacing: var(--li-display-tracking);
	text-transform: uppercase;
	font-size: clamp(46px, calc((14vw - 5.6px) * var(--li-display-scale)), calc(92px * var(--li-display-scale))); /* one line per phrase at 320 (~47px there; 48 overflows the column by a hair) */
	line-height: .88;
}

.lid-hero__text .li-contact--address-line {
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--li-ink-soft);
	margin-top: 18px;
}

.lid-hero__text .li-status { margin-top: 18px; }

/* The two menu PDFs, under the status line: the first thing a pre-arrival visitor can tap (0.4.0, 13). */
.lid-hero__text .lid-hero__menus {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.lid-hero__menus > * {
	flex: 1 1 140px;
	margin: 0;
}

.lid-hero__menus .li-cta,
.lid-card--menu .li-cta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

.lid-hero__menus a.li-cta {
	padding: 16px 14px;
	font-size: 14px;
}

/* Card — arch-topped, filled with the stop's arch colour */
.lid-card {
	margin-top: 32px;
	padding: 32px 24px 26px;
	border: 1.5px solid var(--li-line-strong);
	background: var(--li-arch);
	text-align: center;
}

.lid-card .wp-block-heading {
	font-size: calc(27px * var(--li-display-scale));
	margin-bottom: 8px;
}

/* "Coffee & Pastry" at 1.25x the card heading (0.6.0, D2); the cqw middle term holds it on one line inside the
   crown's 80cqw heading width on the narrowest phones. The Private Events dome's heading shares it while the dome
   has no art (0.7.1). */
.lid-stop-sunrise .lid-card .wp-block-heading,
.li-no-queen .lid-card--events .wp-block-heading {
	font-size: clamp(28px, 13.2cqw, calc(1.25 * 27px * var(--li-display-scale)));
}

.lid-card .li-smallcaps { margin-bottom: 22px; }

/* Three roasters, one per line (0.5.0, D4): at the 11px floor the tracking opens with the viewport — none at
   320, the usual small-caps spacing's third by 375 — so each roaster holds on one line in the card. */
.lid-card .lid-card__roasters,
.lid-card .lid-card__drinks {
	font-size: 11px;
	letter-spacing: clamp(0px, calc(2vw - 6.4px), 1.1px);
	line-height: 1.8;
	margin-bottom: 0;
}

.lid-card .lid-card__drinks { margin-top: 10px; margin-bottom: 18px; }

/* Menu card — every stop's anchor: a script lead (no item names, no prices) and a quiet link to the
   stop's PDF (0.4.1: the pill and the time chip are gone — Home's hero already holds both menu buttons,
   and the time rule already says the hour). Three solid cards, one per stop: the sun-filled arch on
   sunrise, an Ivory card on Sapphire, a Terra card on Maroon. */
.lid-card--menu .lid-card__lead {
	font-size: 30px;
	line-height: 1.08;
	max-width: 11em;
	margin-inline: auto;
}

.lid-stop-sunrise .lid-card__lead { color: var(--li-ink); } /* accent is ivory on an ivory arch in "bold" */

.lid-card--menu .li-cta-wrap { margin-top: 22px; }

.lid-card--menu .li-cta--link { color: var(--li-ink); }

.lid-stop-afternoon .lid-card--menu,
.lid-stop-evening .lid-card--menu {
	position: relative;
	padding-top: 52px;
	background: var(--li-arch);
	border-color: transparent;
	color: var(--li-ink);
}

/* The Ivory card on the Sapphire stop takes Sapphire ink and a Terra script (both brand hexes, 7.8:1+ on Ivory). */
.lid-stop-afternoon .lid-card--menu {
	--li-ink: #184F7D;
	--li-ink-soft: #184F7D;
	--li-accent: #793B40;
}

/* The Terra card on the Maroon stop keeps the stop's Ivory ink and Shell script (5.0:1 on Terra). */

/* The Logan Lunchbox badge (0.5.0, D6): the eagle-and-pedestal art from the cafe menu, painted in the card's
   ink, with "Lunch, handled." set in the pedestal's empty panel — where the menu prints the combo and price. */
.lid-card--lunchbox { --li-art: var(--li-ink); }

/* The badge fills the dome (0.6.0, D3): its top sits ~24px under the crown's peak, not under the shared room. */
.lid-stop-afternoon .lid-card--lunchbox { padding-top: 24px; }

/* (One class heavier than components.css's room-under-the-crown rule, which loads after this file.) */
.lid-card.lid-card--lunchbox > :first-child { margin-top: 0; }

.lid-card--lunchbox .lid-card__badge {
	position: relative;
	height: min(300px, 78vw);
	aspect-ratio: 1146 / 1576;
	margin-inline: auto;
}

.li-art--lunchbox {
	inset: 0;
	-webkit-mask-image: var(--li-img-lunchbox);
	mask-image: var(--li-img-lunchbox);
}

.lid-card--lunchbox .lid-card__lead {
	position: absolute;
	inset: 69% 18% 3% 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	margin: 0;
	font-size: 26px;
	line-height: 1;
}

/* The martini badge (0.6.0, D4): the glasses from the cocktail menu's "DOUBLE IT." box, painted in the card's ink,
   filling the bar card's dome — "Ice cold from the freezer." sits under the glasses, not inside them. Since 0.10.0
   both glasses, the Tini and the Martini, without the menu's lettering (Kiva, 2026-10-29). */
.lid-card--martini { --li-art: var(--li-ink); }

.lid-stop-evening .lid-card--martini { padding-top: 24px; }

.lid-card.lid-card--martini > :first-child { margin-top: 0; }

.lid-card--martini .li-art--martini {
	position: relative;
	display: block;
	height: min(210px, 56vw);
	aspect-ratio: 37.52 / 52.3;
	margin-inline: auto;
	-webkit-mask-image: var(--li-img-martini);
	mask-image: var(--li-img-martini);
}

/* The glasses carry the size, not the badge group, so the script flows under them rather than over them. */
.lid-card--martini .lid-card__lead { margin-top: 14px; }

/* The Private Events dome (0.6.0, D6): the queen-and-charcuterie drawing in its crown, the whole card the link (a
   stretched link). Since 0.10.0 it is a stop of its own — Grape, after a gradient from the evening — with a Shell
   dome in Maroon ink (Kiva, 2026-10-29: "add the same transition from martini time to events and add this
   illustration from the event menu PDF"). */
.lid-stop-events .lid-card--events {
	--li-ink: #4C0000;
	--li-ink-soft: #4C0000;
	--li-accent: #793B40;
}

/* No ratio floor on this card (0.11.4, Brandon on an iPhone: "the dome isn't coming down enough"): iOS Safari sizes a
   box with an aspect-ratio and a max-width from that max-width and drops the content minimum — 470 × .68 = 320 px, the
   Shell fill ended under the drawing, and the heading, script line and link spilled onto the Grape below, over the
   Rooms rule. With the art, the card is always taller than the 100/68 floor components.css sets, so dropping it costs
   nothing. Measured in the iOS Simulator; Chromium and Playwright's WebKit both grow the box and never show this.
   (Selector heavier than components.css's .lid-card, which loads after this file.) */
.lid-card.lid-card--events { aspect-ratio: auto; }

.lid-card--events {
	--li-art: var(--li-ink);
	position: relative;
	max-width: 470px;
	margin-inline: auto;
	background: var(--li-arch);
	border-color: transparent;
	color: var(--li-ink);
	transition: border-color .15s ease;
}

/* Private Events gets a rule like the stops' time rules (0.8.0, Brandon: "add at least some small header to
   Events") — a word in the time box instead of a time; Rooms has one too (0.10.0). The rule's margin is the gap. */
.lid-stop-events > .lid-card--events { margin-top: 0; }

.lid-card--events:hover,
.lid-card--events:focus-within { border-color: var(--li-ink); }

.lid-card--events .li-art--queen {
	position: relative;
	display: var(--li-queen-art, none); /* off until the plugin has the file (0.7.1) — so never an unmasked square, editor included */
	height: min(230px, 60vw);
	aspect-ratio: 108.24 / 93.35; /* the drawing from the event menu (0.10.0) */
	margin-inline: auto;
	-webkit-mask-image: var(--li-img-queen);
	mask-image: var(--li-img-queen);
}

.lid-card--events .wp-block-heading { margin-top: 18px; }

/* No art yet (0.7.1): the hidden slot is still the card's first child, so the heading takes the crown's room itself
   (the same max(0, 20cqw − 24px) components.css gives a first child) at the coffee card's size — its clamp is shared
   above — so the dome reads as a text card like Coffee & Pastry rather than an arch with an empty crown. Dropping the
   real file at assets/img/queen-charcuterie.svg|png turns the art back on with no other change. */
.li-no-queen .lid-card--events .wp-block-heading { margin-top: max(0px, calc(20cqw - 24px)); }

.lid-card--events .lid-card__lead {
	font-size: 30px;
	line-height: 1.08;
	max-width: 11em;
	margin-top: 12px; /* the script line sat on the heading's baseline (0.8.4) */
	margin-inline: auto;
}

.lid-card--events .li-cta-wrap { margin-top: 22px; }

.lid-card--events .li-cta--link { color: var(--li-ink); }

.lid-card--events .lid-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9999px 9999px 0 0;
}

/* The tape: a strip of the header's masking-tape pattern holding the sandwich card to the stop. The bar card
   has none (0.6.0, D4) — the martini badge sits on its crown instead. */
.lid-stop-afternoon .lid-card--menu::before {
	content: "";
	position: absolute;
	top: -19px;
	left: 50%;
	width: 210px;
	height: 38px;
	background-color: var(--li-band-ink);
	background-image: var(--li-img-tape);
	background-size: auto 62%;
	background-position: 6px center;
	background-repeat: repeat-x;
	transform: translateX(-50%) rotate(-1.6deg);
	box-shadow: 0 1px 2px rgb(23 18 15 / .25);
}

.lid-more a {
	color: var(--li-ink);
	text-decoration: underline;
}

/* Illustration art — painted through a mask in the stop's art ink */
.li-art {
	position: absolute;
	background-color: var(--li-art);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* The building's box sits inside its arch on every side — far enough below the half-round crown that the roof
   is never clipped — and the mask scales the drawing to fit it, at any arch size (0.5.0, D1). */
.li-art--building {
	inset: 10% 2% 2%;
	-webkit-mask-image: var(--li-img-building);
	mask-image: var(--li-img-building);
}

.li-art--packaging {
	display: none;
	left: 7%;
	top: 50%;
	width: 86%;
	aspect-ratio: 1;
	transform: translateY(-50%);
	-webkit-mask-image: var(--li-img-packaging);
	mask-image: var(--li-img-packaging);
}

/* Afternoon stop — heading and lead, then the menu card */
.lid-home .lid-text > *,
.lid-home .lid-text__copy > *,
.lid-home .lid-bar > *,
.lid-home .lid-bar__text > *,
.lid-home .lid-happenings > *,
.lid-home .lid-rooms > *,
.lid-home .lid-rooms__copy > * { margin-block: 0; }

.lid-text .wp-block-heading { font-size: calc(27px * var(--li-display-scale)); }

.lid-text .is-style-li-lead { margin-top: 16px; } /* 12 set the caps heading on the copy (0.8.4) */

.lid-text .lid-card--menu,
.lid-bar .lid-card--menu { margin-top: 32px; }


.lid-stop .lid-more {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--subhead);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .26em;
}

/* No drawing on the afternoon stop (0.4.2): the building beside a sandwich card dominated the stop on desktop
   and doubled Late Nights' arch on a phone. Home keeps one drawing, Late Nights. The spec's packaging arch
   returns when the menu illustrations do (a sandwich, not the building). */
.lid-stop-afternoon .li-arch-art { display: none; }

/* Evening stop — bar, happenings */
.lid-bar .wp-block-heading { font-size: calc(27px * var(--li-display-scale)); }

/* The block sign (0.5.0, D7) stood at the left of "Martini time." from 0.5.0 to 0.9.0; Kiva took it off for now
   (2026-10-29: "it feels off balance"). The file (sign-stacked.svg) and --li-img-sign stay, so it can come back. */
.lid-bar .is-style-li-lead { margin-top: 16px; }

.lid-stop-evening > .lid-happenings { margin-top: 48px; }

.lid-happenings .li-happenings--tiles {
	margin-top: 18px;
	grid-template-columns: 1fr;
}

.lid-home .li-tile__link {
	border-color: var(--li-line-strong);
	color: var(--li-ink);
	padding-top: 36px; /* no art on Home: the title sits just under the arch's crown */
}

.lid-home .li-tile__art { display: none; }

/* Rooms stop (0.10.0): the last stop of the day — a heading and lead like the afternoon's, the hotel-site button,
   and the building arch that Late Nights carried (the building is the inn). */
.lid-rooms .wp-block-heading { font-size: calc(27px * var(--li-display-scale)); }

.lid-rooms .is-style-li-lead { margin-top: 16px; }

.lid-rooms .lid-cta-row {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lid-cta-row .wp-element-button {
	background: var(--li-btn-bg);
	color: var(--li-btn-ink);
}

/* 300px tall at 390, held as a ratio so a wider tablet arch grows with it and keeps a half-round crown (0.5.0, D1). */
.lid-rooms .li-arch-art {
	margin-top: 32px;
	width: 100%;
	height: auto;
	aspect-ratio: 342 / 300;
	min-height: 300px;
}

/* The lead-out to the footer is a short breath: the night is one colour, and a full gap read as dead space (0.4.1). */
.lid-gap--footer { height: calc(var(--lid-gap) * .4); }

/* Footer on Home continues the last stop's Navy (0.10.0; Maroon until then) — the footer sits outside main. */
body.lid-home .li-footer {
	--li-band-bg: #0E1D37;
	background: var(--li-band-bg); /* the block gap above the contact band stays the band's colour */
}

body.lid-home .li-footer__now {
	background: var(--li-band-bg);
	color: var(--li-band-ink);
	--li-ink: var(--li-band-ink);
	--li-ink-soft: var(--li-band-ink);
	--li-open: var(--li-band-ink);
	--li-soon: var(--li-band-ink);
	--li-closed: var(--li-band-ink);
}

/* ?bg=fixed — the background holds still and changes colour under the page (a preview, Brandon 2026-10-29: "the
   background essentially stays in place but changes colors as you scroll"). The stops and gaps go see-through over
   one screen-sized layer; theme.js sets --lid-fixed-from / -to / -t as each gap rises through the lower half of the
   screen, so the colour is a stop's own inside a stop and eases to the next in the same OKLab the gradients use. Each
   stop keeps its own ink; the blend runs low so a stop's first words land on its own colour (theme.js says why). */
html[data-bg="fixed"] body.lid-home,
html[data-bg="fixed"] body.lid-home .lid-stop,
html[data-bg="fixed"] body.lid-home .lid-gap { background: transparent; } /* body too: html carries its own Ivory, so body's
   background is not lifted to the canvas and would paint over the layer (0.11.1) */

/* Less room between stops (0.11.3, Brandon: "when we don't have the gradients in the flow of the page, we need less
   space between sections"): the gap was the gradient's length; now it is only a breath between one stop's padding
   and the next. It must keep some height — theme.js times each blend from the gap's position. */
html[data-bg="fixed"] body.lid-home { --lid-gap: 32px; }

@media (min-width: 960px) {
	html[data-bg="fixed"] body.lid-home { --lid-gap: 56px; }
}

html[data-bg="fixed"] body.lid-home::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--lid-fixed-to, #FBF6EC);
}

@supports (background-color: color-mix(in oklab, red 50%, blue)) {
	html[data-bg="fixed"] body.lid-home::before {
		background-color: color-mix(in oklab, var(--lid-fixed-to, #FBF6EC) var(--lid-fixed-t, 100%), var(--lid-fixed-from, #FBF6EC));
	}
}

@media (min-width: 760px) {
	.lid-card {
		padding: 44px 32px 34px;
	}

	.lid-happenings .li-happenings--tiles { grid-template-columns: repeat(3, 1fr); }

	.lid-rooms .lid-cta-row { flex-wrap: nowrap; }

	.lid-card--lunchbox .lid-card__badge { height: 340px; }

	.lid-card--lunchbox .lid-card__lead { font-size: 30px; }

	.lid-card--martini .li-art--martini { height: 240px; }

	.lid-card--events .li-art--queen { height: 300px; }
}

@media (min-width: 960px) {
	.lid-stop { padding: 64px var(--li-pad) 80px; }

	/* The script line a size up on desktop (0.6.0, D5) — after the base rule, so it applies. */
	.lid-home .lid-stop > .li-time-rule { margin-bottom: 40px; }

	.li-time-rule__line { font-size: 34px; }

	.lid-hero__menus,
	.lid-text .lid-card--menu,
	.lid-bar .lid-card--menu { max-width: 470px; }

	/* A max-width here too, so the same iOS Safari overflow as the events card (0.11.5); see .lid-card--events. */
	.lid-text .lid-card--menu,
	.lid-bar .lid-card--menu { aspect-ratio: auto; }

	.lid-text__copy,
	.lid-bar__text { max-width: 640px; }

	.lid-stop-sunrise {
		display: grid;
		grid-template-columns: 1fr 470px;
		gap: 0 56px;
		align-items: start; /* 0.8.4: the copy starts one breath under its rule, as at 10 AM and 4 PM */
	}

	.lid-stop-sunrise > .li-time-rule { grid-column: 1 / -1; }

	/* Side by side, the two columns start on the same line: no block gap on either. */
	.lid-stop-sunrise > .lid-hero__text,
	.lid-stop-sunrise > .lid-card,
	.lid-stop-afternoon > .lid-text,
	.lid-stop-evening > .lid-bar { margin-top: 0; }

	/* Afternoon (0.4.2): the same shape as sunrise and evening — copy left, the card right, centred — so the
	   three stops read as one system on desktop. (0.4.1 kept the building arch left with the card top-right,
	   which left the lower right of the stop empty.) */
	.lid-stop-afternoon > .lid-text {
		display: grid;
		grid-template-columns: 1fr 470px;
		gap: 0 56px;
		align-items: start; /* 0.8.4: centred, the heading floated ~160px below its 10 AM rule */
	}

	.lid-stop-afternoon > .lid-text > .lid-card--menu { margin-top: 0; }

	/* Evening: the bar's text left and its card right (the sunrise shape), then the three tiles in one
	   full-width row — not three tiles squeezed into half the width with wrapping titles (0.4.1, 16). */
	.lid-stop-evening > .lid-bar {
		display: grid;
		grid-template-columns: 1fr 470px;
		gap: 0 56px;
		align-items: start;
	}

	.lid-stop-evening > .lid-bar > .lid-card--menu { margin-top: 0; }

	.lid-stop-evening > .lid-happenings { margin-top: 64px; }

	.lid-happenings .li-happenings--tiles { gap: 28px; }

	/* Rooms: copy left, the building arch right, the copy starting one breath under its rule like every other
	   stop (0.8.4) — Late Nights was centred on the building, but it had no header to hang from. */
	.lid-stop-rooms > .lid-rooms {
		display: grid;
		grid-template-columns: 1fr 420px;
		gap: 0 56px;
		align-items: start;
	}

	.lid-rooms__copy { max-width: 640px; }

	.lid-rooms > .li-arch-art {
		margin-top: 0;
		height: auto;
		aspect-ratio: 380 / 440;
	}
}