/* Shared by every client page (order, status and the delivery page, about, inquire): the palette, the type, the site grid, the header,
   the footer, and the pieces every page uses (steps, cards, buttons, contact rows). A page file keeps only what is its own.
   2026-10-01, Mika: each page carried its own copy of all this and they had drifted into a hodgepodge (the status page never got the menu,
   its header sat on a different grid, title sizes differed). The header and footer markup is written once in src/worker.js (siteChrome).
   Colour has two jobs: red marks what is live or chosen (tonight, the selected show, package, speed); amber marks money and the action.
   Labels, codes and figures are set in Geist Mono; everything else is Helvetica. */
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/GeistMono.woff2) format("woff2")}
:root{--bg:#0c0b0b;--panel:#131111;--panel2:#191616;--line:#252121;--line2:#352f2f;--ink:#f3efe8;--ink2:#d3cdc4;--muted:#948c85;--faint:#857d77;--red:#e03a30;--red2:#ff6257;--red-tint:rgba(224,58,48,.06);--amber:#e9a23b;--amber2:#f2bb63;--amber-ink:#171614;--venmo:#008cff;--green:#5fbf6a;
--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
--site:1240px;--gutter:22px;--z:1}
/* 2026-10-01: --faint was #625b56, 2.95:1 on --bg, under WCAG AA's 4.5:1 for the footer, the placeholders and the note counter, which are all
   text. #857d77 is 4.86:1 on --bg and 4.66:1 on --panel (the inputs), and still sits a step under --muted. */
@media(min-width:960px){:root{--gutter:48px}}
/* 2026-10-04, Mika: on his wide desktop the site at 100% sat small in the middle of the screen; at 125% browser zoom it looked right. The page
   now zooms itself from 1x at a 1440px window to 1.25x at 1800px (SCALE_SCRIPT in src/worker.js sets html{zoom} and --z, continuously, so
   browser zoom never makes it smaller). Viewport units ignore zoom (measured in Chrome 154: 100vh inside zoom 1.25 renders at 125% of the
   window), so every vh/vw on the client pages is divided by --z. Media queries see the real window, so no breakpoint moves. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable} /* a short page (the status lookup) keeps the scrollbar's room, so the header doesn't shift between pages */
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
img,video{display:block}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber2);outline-offset:2px}
.hidden{display:none!important}

/* The site grid: one 520px column on phones and tablets (boxed between 720 and 959), 1240px from 960 up. The header, the footer and the
   content sit on it; only full-bleed photographs (the delivery cover) go wider. The status page widens .wrap and puts its sections on the grid itself. */
.wrap{max-width:520px;margin:0 auto;min-height:calc(100vh / var(--z));display:flex;flex-direction:column;background:var(--bg)}
@media(min-width:720px) and (max-width:959px){body{background:#070606}.wrap{box-shadow:0 0 0 1px var(--line)}}
@media(min-width:960px){.wrap{max-width:var(--site)}}

/* header: the wordmark and the menu, the same on every page. On a phone the menu takes its own row under the wordmark. */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:var(--site);margin:0 auto;padding:18px var(--gutter) 12px;position:relative;z-index:3}
/* The wordmark (2026-10-04, from Mika's canvas): PHOTO & VIDEO is one span per letter, spread across the exact width of LORENZO CREATIVE.
   font-size on .wordmark is the one size control; the subtitle (.76em), the gap and the alignment all scale from it. */
.wordmark{display:inline-grid;width:max-content;row-gap:.24em;font-size:13.5px;color:var(--ink)}
.wm-title{font-weight:700;line-height:1.1;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;margin-right:-.2em} /* drop the trailing tracking so the right edges line up */
.wm-sub{display:flex;justify-content:space-between;font-family:var(--mono);font-weight:700;font-size:.76em;line-height:1.1;text-transform:uppercase;color:var(--red2);white-space:nowrap} /* .76em is 11px under the 14.5px title, the menu's size; the canvas ratio (.586em, 8.5px) in --red read as faint on Mika's desktop (2026-10-04) */
.nav{display:flex;gap:20px}
.nav a{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 0;margin:-12px 0;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
@media(max-width:559px){.masthead{flex-wrap:wrap;row-gap:14px}.nav{width:100%;gap:18px;flex-wrap:wrap}}
@media(min-width:960px){.masthead{padding-top:26px;padding-bottom:18px}.wordmark{font-size:14.5px}}

/* footer */
.footer{margin:auto auto 0;width:100%;max-width:var(--site);padding:26px var(--gutter) 36px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--faint)}
.footer a{color:var(--muted)}
@media(min-width:960px){.footer{padding-bottom:40px;flex-direction:row;gap:28px;flex-wrap:wrap}}

/* type: one title size, one section size, the mono label over them */
h1{font-weight:700;font-size:38px;line-height:1.02;letter-spacing:-.025em;margin:0}
h2{font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.015em;margin:0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.eyebrow+h1{margin-top:6px}
.lede{font-size:16px;color:var(--ink2);margin:0}
.hint{font-size:14px;color:var(--muted);margin:0}
@media(min-width:960px){h1{font-size:60px}.lede{font-size:18px}}

/* The two-column pages (order, about, inquire): a photograph with the page title on it, then the content. On a phone the photograph heads
   the page; from 960 it sits on the left and stays put while the content scrolls. */
.hero{position:relative;height:calc(42vh / var(--z));max-height:420px;min-height:260px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,11,.1) 0%,rgba(12,11,11,.3) 50%,var(--bg) 100%)}
.hero-text{position:absolute;left:var(--gutter);right:var(--gutter);bottom:18px;z-index:1}
.content{display:flex;flex-direction:column;gap:30px;padding:22px var(--gutter) 30px;position:relative}
@media(min-width:960px){
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;padding:0 var(--gutter) 40px;align-items:start}
.split .hero{position:sticky;top:24px;height:auto;aspect-ratio:4/5;max-height:calc(100vh / var(--z) - 48px);min-height:0;border-radius:14px}
.split .hero-text{left:36px;right:36px;bottom:32px}
.split .content{padding:8px 0 30px;max-width:560px;gap:36px}
}

/* steps, cards, buttons, errors */
.step{display:flex;flex-direction:column;gap:12px;scroll-margin-top:12px}
.step-head{display:flex;flex-direction:column;gap:4px}
.card{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 20px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-weight:500;font-size:16px;cursor:pointer;text-align:center;width:100%}
.btn.primary,.btn.venmo{background:var(--amber);color:var(--amber-ink);border-color:var(--amber);font-weight:700}
.btn:disabled{opacity:.45;cursor:default}
@media(hover:hover){.btn.primary:not(:disabled):hover,.btn.venmo:hover{background:var(--amber2);border-color:var(--amber2)}}
.err{color:#f08a8a;font-size:14px}
.err:empty{display:none}

/* contact rows (email, phone, Instagram) */
.contact{display:flex;flex-direction:column;gap:8px}
.contact:empty{display:none}
.contact a{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 16px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:var(--ink);font-size:15px;min-width:0;overflow-wrap:anywhere}
.contact a span{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:52px;flex:none}