@font-face { font-family: "ZT Nature"; src: url("fonts/ZTNature-Black.woff2") format("woff2"); font-weight: 900; font-display: block; }
@font-face { font-family: "ZT Nature"; src: url("fonts/ZTNature-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "ZT Nature"; src: url("fonts/ZTNature-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --night: #0e0c0b;
  --bone: #efe7d6;
  --smoke: #8d857a;
  --amber: #e5a34d;
  --focus-x: 70%;
  --ink: #9b1f2e;             /* current drink, set from JS */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
html, body { background: var(--night); color: var(--bone); font-family: "ZT Nature", Georgia, serif; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scene { position: relative; min-height: 100svh; }

/* top bar */
.top { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 22px 3.2vw; mix-blend-mode: difference; font-weight: 600; font-size: clamp(14px, 1vw, 20px); }
.top-nav a { margin-left: 2.2em; }
.top-nav a:hover { text-decoration: underline; text-underline-offset: .3em; }

/* hero */
.hero { height: 100svh; overflow: hidden; isolation: isolate; }
.hero-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#heroRoom { z-index: 1; }
.hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(14 12 11 / .55) 0%, rgb(14 12 11 / .15) 45%, rgb(14 12 11 / 0) 70%), linear-gradient(0deg, rgb(14 12 11 / .55) 0%, rgb(14 12 11 / 0) 35%); }
.hero-name { position: absolute; left: 3.2vw; bottom: 9svh; z-index: 3; font-weight: 900; font-size: clamp(64px, 12.4vw, 300px); line-height: .8; letter-spacing: -.035em; text-transform: uppercase; pointer-events: none; }
.hero-name span { display: block; }
.hero-name span + span { padding-left: 17vw; }
.hero-her { z-index: 4; pointer-events: none; }
.hero-role { position: absolute; left: 3.4vw; top: 10svh; z-index: 5; font-size: clamp(14px, 1.05vw, 22px); line-height: 1.35; }
.hero-down { position: absolute; right: 3.2vw; bottom: 5svh; z-index: 5; font-weight: 600; font-size: clamp(14px, 1vw, 20px); border-bottom: 1px solid currentColor; padding-bottom: .2em; }
/* entry: the frame is a long exposure, then she comes into focus */
body.entering #heroRoom, body.entering #heroHer, body.entering .hero-name { filter: blur(26px); }
#heroRoom, #heroHer, .hero-name { transition: filter 1.4s var(--ease); }
#heroHer { transition-delay: .15s; }
.hero-name { transition-delay: .45s; }

/* menu */
.menu { display: grid; grid-template-columns: 1fr; align-content: center; padding: 14svh 3.2vw 12svh; }
.menu-title { font-weight: 600; font-size: clamp(16px, 1.2vw, 24px); color: var(--smoke); margin-bottom: 3vh; }
.menu-list { list-style: none; }
.menu-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2vw; padding: 1.2vh 0; border-top: 1px solid rgb(239 231 214 / .14); cursor: pointer; transition: color .3s; }
.menu-list li:last-child { border-bottom: 1px solid rgb(239 231 214 / .14); }
.menu-list .name { font-weight: 900; font-size: clamp(36px, 5.6vw, 128px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.menu-list .note { font-size: clamp(14px, 1.1vw, 22px); color: var(--smoke); max-width: 34ch; text-align: right; }
.menu-list li:hover, .menu-list li:focus-within { color: var(--drink, var(--amber)); }
.menu-peek { position: fixed; z-index: 15; left: 50%; top: 50%; width: min(22vw, 34svh); aspect-ratio: 9 / 16; transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.menu-peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.menu-peek video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* order */
.order { overflow: hidden; }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.order-grid { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4vw; }
.plate { position: relative; height: 84svh; aspect-ratio: 9 / 16; justify-self: center; }
.plate video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.plate-sound { position: absolute; right: 12px; bottom: 12px; font-size: 13px; font-weight: 600; padding: 6px 10px; background: rgb(0 0 0 / .45); color: var(--bone); border-radius: 3px; }
.plate-sound[aria-pressed="true"] { background: var(--bone); color: var(--night); }
.recipe { padding-right: 4vw; }
.recipe-name { font-weight: 900; font-size: clamp(40px, 5.2vw, 120px); line-height: .88; letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 4vh; }
.recipe-list { list-style: none; font-size: clamp(18px, 1.5vw, 32px); line-height: 1.9; }
.recipe-list li { opacity: .28; transform: translateX(-.4em); transition: opacity .5s, transform .5s var(--ease); }
.recipe-list li.on { opacity: 1; transform: none; }
.recipe-list b { font-weight: 400; display: inline-block; min-width: 4.4em; }
.order-nav { justify-self: end; align-self: end; padding-bottom: 6vh; font-weight: 600; font-size: clamp(16px, 1.3vw, 26px); display: flex; gap: 2em; }
.order-nav button { border-bottom: 1px solid currentColor; padding-bottom: .15em; }

/* wall (v7, 2026-10-26): her archive, drinks from her Instagram as polaroids; a tap turns one over to what she wrote */
.wall { padding: 14svh 3.2vw; }
.wall-title { font-weight: 600; font-size: clamp(16px, 1.2vw, 24px); color: var(--smoke); margin-bottom: 4vh; }
.wall-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3vw 2vw; align-items: start; }
.polaroid { appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  display: block; width: 100%; position: relative; transform: rotate(var(--tilt, -1.5deg)); transition: transform .5s var(--ease); }
.polaroid:hover { transform: rotate(0deg) scale(1.04); }
.polaroid:focus { outline: none; }
.polaroid:focus-visible .polaroid-face { outline: 2px solid var(--amber); outline-offset: 5px; }
/* the tape holds it to the wall, so it stays put while the photo turns */
.polaroid::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -12px; width: 38%; height: 22px; transform: translateX(-50%) rotate(-2deg); background: rgb(255 240 200 / .55); backdrop-filter: blur(1px); }
/* the turn is flat (narrows to its edge, then opens on the other side), so it looks the same in every browser */
.polaroid-turn { display: block; position: relative; transition: transform .3s var(--ease); }
.polaroid.flipping .polaroid-turn { transform: scaleX(0); transition: transform .2s cubic-bezier(.5, 0, .9, .4); }
.polaroid-face { display: block; background: #f4efe6; box-shadow: 0 14px 40px rgb(0 0 0 / .45); }
.polaroid.turned .front { visibility: hidden; }
.polaroid:not(.turned) .back { visibility: hidden; }
.polaroid-face.front { padding: 5% 5% 14%; }
.polaroid-face.back { position: absolute; inset: 0; padding: 9% 9% 8%; display: flex; flex-direction: column; gap: .5em; color: #2a2521;
  background: #efe8dc; }
.photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1d1916; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.front .polaroid-name { position: absolute; left: 7%; right: 7%; bottom: 4%; }
.polaroid-name { color: #2a2521; font-weight: 600; font-size: clamp(12px, .95vw, 19px); line-height: 1.1; }
.back .polaroid-name { font-size: clamp(14px, 1.15vw, 23px); }
.polaroid-when { font-size: clamp(10px, .7vw, 14px); color: #7a7064; margin-top: -.2em; }
.polaroid-recipe { list-style: none; margin: .6em 0 0; padding: 0; font-size: clamp(10.5px, .78vw, 15px); line-height: 1.35; }
.polaroid-recipe li { display: grid; grid-template-columns: 4.4em 1fr; }
.polaroid-recipe b { font-weight: 600; }
.polaroid-note { margin: .6em 0 0; font-size: clamp(11px, .85vw, 16px); line-height: 1.35; }
.polaroid-by { margin-top: auto; font-size: clamp(9.5px, .65vw, 13px); color: #7a7064; }
@media (prefers-reduced-motion: reduce) { .polaroid-turn, .polaroid { transition: none; } }

/* years (v7, 2026-10-25): the scroll takes the camera into the ice sphere of her drink, along a path of frozen light
   where her years come towards us, and out to the sphere in a glass on her bar; the film is drawn frame by frame on a canvas */
/* a long scene: the camera travel is the whole of it */
.years { height: 520svh; }
.years-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--night); }
.shots { position: absolute; inset: 0; }
.shot, .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity, filter; }
/* once the film is loaded the canvas plays it and the stills step aside */
.film-canvas { display: none; }
.shots.film .film-canvas { display: block; }
.shots.film .shot { display: none; }
/* the push into the path aims at its vanishing point, the sphere push at the sphere */
.s1 { transform-origin: 50% 46%; }
.s2 { transform-origin: 51% 21%; }
.s3 { transform-origin: 68% 57%; }
/* the way out of the scene: the picture goes into the black the closing starts from */
.years-stage::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--night); opacity: var(--out, 0); pointer-events: none; }
.years-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 60% 50%, rgb(14 12 11 / 0) 55%, rgb(14 12 11 / .8)); }

.years-title { position: absolute; z-index: 2; left: 3.2vw; top: 12svh; margin: 0; font-weight: 900; font-size: clamp(48px, 8vw, 200px); line-height: .85; letter-spacing: -.03em; text-transform: uppercase; }
.years-count { position: absolute; z-index: 2; left: 3.2vw; top: calc(12svh + clamp(48px, 8vw, 200px) * .85 + 2.5svh); font-weight: 600; font-size: clamp(18px, 1.6vw, 34px); color: var(--amber); font-variant-numeric: tabular-nums lining-nums; }
.years-services { position: absolute; z-index: 2; left: 3.2vw; bottom: 6svh; color: var(--smoke); font-size: clamp(15px, 1.15vw, 22px); }

/* the marks come towards the camera along the path: small and far, then big, then past */
.marks { list-style: none; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.marks li { position: absolute; left: 50%; top: 50%; width: max-content; max-width: 38vw; opacity: var(--o, 0);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) scale(var(--s, .4)); filter: blur(var(--b, 0px));
  font-weight: 600; font-size: clamp(22px, 2.4vw, 52px); line-height: 1.05; text-shadow: 0 0 24px rgb(14 12 11 / .9), 0 0 60px rgb(14 12 11 / .8); }
/* a soft dark patch under each year, so it reads on the bright light too */
.marks li::before { content: ""; position: absolute; inset: -45% -30%; z-index: -1; background: radial-gradient(closest-side, rgb(14 12 11 / .62), rgb(14 12 11 / 0)); }
.marks b { display: block; font-weight: 900; color: var(--amber); font-size: 1.5em; letter-spacing: -.02em; }
.marks span { display: block; margin-top: .35em; font-weight: 400; font-size: .5em; color: var(--bone); opacity: .8; max-width: 26ch; }

@media (max-aspect-ratio: 1/1) {
  .years { height: 460svh; }
  .years-title { left: 5vw; top: 11svh; font-size: 15vw; }
  .years-count { left: 5vw; top: calc(11svh + 15vw * .85 + 2svh); }
  .years-services { left: 5vw; right: 5vw; bottom: 5svh; font-size: 14px; }
  .marks li { max-width: 80vw; font-size: 26px; }
  /* the sphere sits on black, so on a tall screen it fits whole; the glass is centred */
  .s1 { object-fit: contain; }
  .s3 { object-position: 68% 50%; transform-origin: 50% 57%; }
}

/* the closing, after hours: her at night, then the ask */
.night { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4vw; padding: 12svh 3.2vw; min-height: 100svh; }
/* four frames overlap by their soft edges; lighten keeps the brighter of two, and all of them are graded to the page black,
   so where they cross only her light shows and the panel reads as one dark picture */
.night-photos { display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; width: min(100%, 96svh); justify-self: center; }
.nf { margin: -9%; aspect-ratio: 1; overflow: hidden; mix-blend-mode: lighten; opacity: 0; filter: brightness(.25); transition: opacity 1.8s var(--ease), filter 2.4s var(--ease);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-composite: intersect; }
.nf img, .nf video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); }
/* they come up out of the dark one after another as the scene arrives */
.night.on .nf { opacity: 1; filter: none; }
.night.on .nf:nth-child(2) { transition-delay: .35s; }
.night.on .nf:nth-child(3) { transition-delay: .7s; }
.night.on .nf:nth-child(4) { transition-delay: 1.05s; }
/* and then breathe: a slow drift, each at its own pace, the streak frames along their light */
.night.on .nf img, .night.on .nf video { animation: drift var(--t, 26s) ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.03); } to { transform: scale(1.09) translate(var(--dx, 0), var(--dy, 0)); } }

.about-lead { font-weight: 900; font-size: clamp(28px, 2.6vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 3vh; }
.about-body { font-size: clamp(16px, 1.25vw, 24px); line-height: 1.5; max-width: 46ch; color: var(--bone); margin-bottom: 5vh; }
.about-hire { font-weight: 600; font-size: clamp(18px, 1.5vw, 30px); margin-bottom: 2vh; color: var(--amber); }
.closing-mail { display: inline-block; font-weight: 600; font-size: clamp(18px, 2.2vw, 48px); border-bottom: 2px solid currentColor; padding-bottom: .1em; word-break: break-all; }
.closing-links { margin-top: 3vh; color: var(--smoke); font-size: clamp(15px, 1.15vw, 22px); }
.closing-links span { margin-left: 1.5em; }

/* a window dissolving into its next frame */
.nf { position: relative; }
.nf img, .nf video { position: absolute; inset: 0; }
.nf img.next { opacity: 0; transition: opacity 3s ease-in-out; }
.nf img.next.in { opacity: 1; }

/* phone: not a shrunken desktop */
@media (max-aspect-ratio: 1/1) {
  :root { --focus-x: 50%; }
  .top { padding: 16px 5vw; }
  .top-nav a { margin-left: 1.2em; }
  /* phone: the name sits on the counter below her, fully readable; nothing of her hangs over the letters */
  .hero-name { left: 5vw; bottom: 4svh; font-size: 13.2vw; line-height: .86; letter-spacing: -.03em; z-index: 5; }
  .hero-name span + span { padding-left: 0; }
  .hero-role { left: 5vw; top: 13svh; font-size: 15px; }
  .hero-down { right: 5vw; top: 13svh; bottom: auto; font-size: 15px; }
  .hero-shade { background: linear-gradient(0deg, rgb(14 12 11 / .75) 0%, rgb(14 12 11 / .25) 28%, rgb(14 12 11 / 0) 45%); }
  .menu { padding: 12svh 5vw; }
  .menu-list li { grid-template-columns: 1fr; gap: .2em; padding: 2vh 0; }
  .menu-list .name { font-size: 11vw; }
  .menu-list .note { text-align: left; max-width: none; }
  .menu-peek { display: none; }
  .order-grid { grid-template-columns: 1fr; padding: 0; }
  .plate { height: 100svh; width: 100vw; aspect-ratio: auto; }
  .recipe { position: absolute; left: 5vw; right: 5vw; bottom: 10svh; z-index: 2; padding: 0; text-shadow: 0 2px 20px rgb(0 0 0 / .7); }
  .recipe-name { font-size: 13vw; margin-bottom: 2vh; }
  .recipe-list { font-size: 15px; line-height: 1.6; }
  .order-nav { position: absolute; right: 5vw; top: 12svh; z-index: 2; padding: 0; gap: 1.2em; font-size: 15px; }
  .wall { padding: 12svh 5vw; }
  .wall-grid { grid-template-columns: repeat(2, 1fr); gap: 7vw 6vw; }
  /* the soft edges of the photos reach past the screen on a phone; clipped, so the page does not pan sideways */
  .night { grid-template-columns: 1fr; padding: 10svh 5vw 12svh; gap: 4vh; overflow: hidden; }
  .night-photos { margin: 0 -5vw; width: auto; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.entering #heroRoom, body.entering #heroHer, body.entering .hero-name { filter: none; }
  .nf { opacity: 1; filter: none; transition: none; }
  .night.on .nf img, .night.on .nf video { animation: none; }
}

/* plans (v7 preview, 2026-10-26): ways to book her, after the years end on "Now Booking"; draft. Compact cards on neutral
   grey (no browns, amber only as the accent): name and tag, one line, the check (lines with dots to the value, a dashed rule,
   the total), then a quiet button that fills on hover */
.plans { --card: #161616; --panel: #1f2023; --paper: #ecece7; --hair: rgb(236 236 231 / .08); padding: 12svh 3.2vw 10svh; }
.plans-title { font-weight: 600; font-size: clamp(16px, 1.2vw, 24px); color: var(--smoke); margin-bottom: 2.4vh; }
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.plan { display: grid; gap: 12px; padding: 10px; border-radius: 22px; background: var(--card); border: 1px solid var(--hair); }
.plan-head { padding: 12px 10px 2px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-name { font-weight: 600; font-size: clamp(19px, 1.25vw, 26px); line-height: 1.1; letter-spacing: -.01em; }
.plan-tag { flex: none; padding: .35em .7em; border-radius: 999px; border: 1px solid rgb(236 236 231 / .16); color: var(--amber);
  font-weight: 600; font-size: clamp(11px, .7vw, 13px); line-height: 1; white-space: nowrap; }
/* two lines at most, so the checks of all four stand level */
.plan-line { margin-top: .45em; min-height: 2.7em; font-size: clamp(13px, .82vw, 15px); line-height: 1.35; color: var(--smoke); }
/* the check: a line, dots running to the value, the way a bar tab is printed */
.plan-check { padding: 16px 18px 14px; border-radius: 16px; background: var(--panel); }
.plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55em; font-size: clamp(13px, .82vw, 15px); line-height: 1.3; }
.plan-list li { display: flex; align-items: baseline; gap: .45em; }
.plan-list li span:first-child { color: rgb(236 236 231 / .88); }
.plan-list li b { flex: 1; min-width: 1.2em; border-bottom: 1px dotted rgb(236 236 231 / .3); transform: translateY(-.28em); }
.plan-list li span:last-child { color: var(--smoke); white-space: nowrap; }
.plan-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgb(236 236 231 / .25); }
.plan-total-label { font-size: clamp(13px, .82vw, 15px); color: var(--smoke); }
.plan-sum { font-weight: 600; font-size: clamp(22px, 1.5vw, 30px); line-height: 1; color: var(--paper); font-variant-numeric: lining-nums tabular-nums; }
.plan-sum i { font-style: normal; font-weight: 400; font-size: .56em; vertical-align: .62em; margin-right: .05em; color: var(--smoke); }
.plan-unit { margin-top: .4em; text-align: right; font-size: clamp(12px, .75vw, 14px); line-height: 1.3; color: var(--smoke); }
/* the button: quiet outline at its own width; on hover the paper fills in from the left and the arrow steps on */
.plan-ask { justify-self: start; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .55em;
  margin: 0 10px 10px; padding: .72em 1.15em; border-radius: 12px; border: 1px solid rgb(236 236 231 / .45); color: var(--paper);
  font-weight: 600; font-size: clamp(13px, .85vw, 16px); text-decoration: none; transition: color .3s, border-color .3s; }
.plan-ask::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); transform: scaleX(0); transform-origin: 0 50%; transition: transform .38s var(--ease); }
.plan-ask:hover, .plan-ask:focus-visible, .plan-ask:active { color: #121212; border-color: var(--paper); outline: none; }
.plan-ask:hover::before, .plan-ask:focus-visible::before, .plan-ask:active::before { transform: scaleX(1); }
.plan-arrow { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.plan-ask:hover .plan-arrow { transform: translateX(3px); }
/* Her Bar: the calculator, folded */
.plan-calc { margin: -2px 10px 10px; }
.plan-calc summary { list-style: none; display: inline-flex; align-items: center; gap: .5em; cursor: pointer; color: var(--amber); font-weight: 600;
  font-size: clamp(13px, .82vw, 15px); }
.plan-calc summary::-webkit-details-marker { display: none; }
.plan-calc summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; border: 1px solid currentColor; font-size: .9em; line-height: 1; }
.plan-calc[open] summary::before { content: "\2212"; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: block; padding: .5em .85em; border-radius: 999px; border: 1px solid rgb(236 236 231 / .18); font-size: clamp(12px, .78vw, 14px);
  transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: rgb(236 236 231 / .4); }
.chip input:checked + span { background: var(--amber); border-color: var(--amber); color: #121212; font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.plan-guests { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: clamp(12px, .8vw, 15px); color: var(--smoke); }
.plan-guests[hidden] { display: none; }
.plan-guests input { width: 6em; padding: .55em .9em; border: 1px solid var(--hair); border-radius: 10px; background: var(--panel); color: var(--paper);
  font: inherit; font-variant-numeric: tabular-nums; }
.plan-guests input:focus { outline: none; border-color: var(--amber); }
.plans-note { margin-top: 2.4vh; font-size: clamp(12px, .8vw, 15px); color: var(--smoke); }
@media (max-aspect-ratio: 1/1) {
  .plans { padding: 10svh 4vw 8svh; }
  .plans-title { margin-left: 1vw; }
  .plans-grid { grid-template-columns: 1fr; gap: 12px; }
  .plan-line { min-height: 0; }
  .plan-guests input { font-size: 16px; }   /* 16px keeps iPhone from zooming into the field */
}
/* end of plans */