/* The Garage: page layout. Composes tokens only; no raw colors or font names. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--red-text); }
img, svg { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-left: max(var(--gutter-compact), env(safe-area-inset-left)); padding-right: max(var(--gutter-compact), env(safe-area-inset-right)); }
@media (min-width: 600px) { .wrap { padding-left: var(--gutter-medium); padding-right: var(--gutter-medium); } }
@media (min-width: 1024px) { .wrap { padding-left: var(--gutter-expanded); padding-right: var(--gutter-expanded); } }

/* title bar */
.titlebar { background: var(--surface-raised); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.titlebar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; min-height: var(--tap-min); }
.brand__name { font-family: var(--font-badge); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; transform: skewX(-12deg); }
.theme-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--space-3); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* hero */
main { flex: 1; }
.hero { padding: var(--space-12) 0 var(--space-10); }
.hero .wrap { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .hero .wrap { grid-template-columns: 1.2fr 1fr; } }
.hero__eyebrow { margin: 0 0 var(--space-3); font-family: var(--font-badge); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); }
.hero__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-style: italic; line-height: .92; letter-spacing: -.01em; text-transform: uppercase; font-size: clamp(56px, calc(56px + 40 * ((100vw - 393px) / 807)), 96px); }
.hero__lede { margin: var(--space-5) 0 0; max-width: var(--measure); font-size: 19px; line-height: 1.5; color: var(--ink-muted); }
.hero__plate { justify-self: start; }
@media (min-width: 1024px) { .hero__plate { justify-self: end; } }
.hero__plate .g-plate { min-width: 280px; }
.hero__plate .g-plate__main { font-size: clamp(40px, 6vw, 56px); }

/* zones */
.zones { padding: var(--space-10) 0 var(--space-16); }
.zones__head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); font-family: var(--font-badge); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.zones__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .zones__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zones__grid { grid-template-columns: repeat(3, 1fr); } }
.zone-card { --zone: var(--red); --zone-text: var(--red-text); }
.zone-card .g-card__plate { --zone-band: var(--panda-black); }
.zone-card--bay .g-card__plate { background: linear-gradient(225deg, transparent 0 9px, var(--bay-maroon) 9px); }
.zone-card--tools { --zone-text: var(--tool-amber-text); }
.zone-card--fab { --zone-text: var(--fab-teal-text); }
.zone-card--fab .g-card__plate { background: linear-gradient(225deg, transparent 0 9px, var(--fab-green) 9px); }
.zone-card--retro { --zone-text: var(--retro-maroon); }
.zone-card--retro .g-card__plate { background: linear-gradient(225deg, transparent 0 9px, var(--console-dark) 9px); }
.zone-card--lounge { --zone-text: var(--lounge-blue-text); }
[data-theme="dark"] .zone-card--retro { --zone-text: var(--retro-cream); }
.zone-card__code { font-family: var(--font-mono); }

/* footer */
.footer { border-top: 3px solid var(--ink); padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom)); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.footer__line { margin: 0; font-family: var(--font-badge); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* 404 */
.lost { padding: var(--space-16) 0; }
.lost .g-plate { margin-bottom: var(--space-8); }