/* page.css — alpha0.io. Layout and rhythm only. Every colour, face and the lockup come from
 * tokens.css, which build.mjs writes from the brand guide's alpha0.css so this file cannot
 * disagree with it. The accent is spent, not picked: the gradient appears on the zero, on one
 * primary action and on one word in the headline, and nowhere else. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--a0-bg);
  color: var(--a0-ink);
  font-family: "Geist", var(--a0-font);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(105, 170, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 170, 255, .028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000, transparent 70%);
  -webkit-mask-image: linear-gradient(#000, transparent 70%);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; position: relative; z-index: 1; }
.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: 16px; z-index: 10; background: var(--a0-ink); color: var(--a0-bg); padding: 8px 12px; border-radius: 6px; }

.display { font-family: var(--a0-font); letter-spacing: -.045em; font-weight: 700; }
.eyebrow { font-family: var(--a0-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--a0-cyan); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.mono { font-family: var(--a0-mono); font-variant-numeric: tabular-nums; }
.grad { background: var(--a0-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--a0-muted); }

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */
.top { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.top .alpha0-lockup { font-size: 26px; }
.top nav { display: flex; gap: 26px; color: var(--a0-muted); font-size: 14px; }
.top nav a:hover { color: var(--a0-ink); }
.top nav a[href^="http"]::after { content: " ↗"; opacity: .6; }
/* THE MENU, WITHOUT A SCRIPT. A checkbox holds the state and its label is the button; the page
   carries no JavaScript, so this is the one way to open a menu on a phone. */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-button { display: none; }
.button { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 1px solid rgba(52, 226, 240, .45); border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--a0-ink); background: rgba(20, 59, 84, .28); transition: transform .18s ease, background .18s ease; white-space: nowrap; }
.button:hover { background: rgba(52, 226, 240, .14); transform: translateY(-1px); }
.button.primary { border-color: transparent; background: var(--a0-gradient); color: #06101c; }
.button.primary:hover { filter: saturate(1.1) brightness(1.05); }

/* ── hero ───────────────────────────────────────────────────────────────────────────────────── */
/* The team stands full height on the right, as the founder's concept had it, and the copy sits on
   the grid in front. The image is masked into the ground on its left edge and its foot, so it is
   a place the page opens onto rather than a tile placed beside a paragraph. */
.hero { position: relative; isolation: isolate; border-top: 1px solid var(--a0-line); min-height: 720px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 76% 45%, rgba(55, 164, 255, .16), transparent 38%), radial-gradient(ellipse at 18% 20%, rgba(167, 139, 250, .12), transparent 36%); }
.hero .shell { padding: 72px 0 64px; }
.hero-copy { max-width: 700px; min-width: 0; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: .96; margin: 18px 0 22px; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--a0-muted); max-width: 48ch; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.hero-art { position: absolute; right: 0; top: 0; bottom: 0; width: min(940px, 60vw); z-index: -1; margin: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 92%, transparent 100%); }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--a0-bg) 100%); pointer-events: none; }
.hero-art figcaption { position: absolute; right: 28px; bottom: 18px; font-family: var(--a0-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--a0-muted); z-index: 1; }

/* THE ADDRESS BAR. This is the page, not a pointer to it. The seed is the inn's own content
   address, written by build.mjs from the bytes an agent reads at /llms.txt. */
.addr { display: flex; align-items: center; gap: 12px; margin-top: 30px; max-width: min(640px, 100%); background: rgba(11, 19, 34, .85); border: 1px solid var(--a0-line); border-radius: 10px; padding: 9px 14px; font-family: var(--a0-mono); font-size: 12px; min-width: 0; }
.addr .host { color: var(--a0-muted); white-space: nowrap; }
.addr .seed { color: #37cd92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.addr .tag { color: var(--a0-muted); font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
.addr:hover { border-color: rgba(52, 226, 240, .45); }

/* ── sections ───────────────────────────────────────────────────────────────────────────────── */
section.band { padding: 104px 0; border-top: 1px solid var(--a0-line); }
.section-title { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: start; margin-bottom: 44px; }
.section-title h2 { font-size: clamp(32px, 3.9vw, 56px); line-height: .98; margin-top: 14px; }
.section-title p { font-size: 17px; line-height: 1.55; color: var(--a0-muted); margin-top: 30px; max-width: 52ch; }

.principles { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--a0-line); border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, rgba(26, 47, 70, .30), rgba(10, 19, 31, .44)); }
.principle { padding: 26px; min-height: 210px; border-right: 1px solid var(--a0-line); }
.principle:last-child { border-right: 0; }
.number { color: var(--a0-cyan); font-family: var(--a0-mono); font-size: 12px; }
.principle h3 { font-size: 24px; letter-spacing: -.035em; margin: 44px 0 8px; font-family: var(--a0-font); }
.principle p, .role p, .step p { color: var(--a0-muted); font-size: 15px; line-height: 1.45; }

.protocol { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.card { border: 1px solid var(--a0-line); border-radius: 16px; background: var(--a0-panel); padding: 30px; }
.steps { margin-top: 26px; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--a0-line); }
.step:first-child { border-top: 0; }
.step b { font-family: var(--a0-mono); font-weight: 500; font-size: 13px; color: var(--a0-cyan); }
.step h3 { font-size: 20px; margin-bottom: 4px; font-family: var(--a0-font); letter-spacing: -.02em; }
.agreement { background: linear-gradient(160deg, rgba(27, 61, 91, .62), rgba(10, 19, 31, .9)); display: flex; flex-direction: column; justify-content: space-between; }
.agreement .symbol { font-size: 72px; color: var(--a0-cyan); line-height: 1; font-family: var(--a0-font); }
.agreement p { color: var(--a0-muted); line-height: 1.55; margin: 22px 0; }
.agreement strong { display: block; font-size: 19px; letter-spacing: -.02em; color: var(--a0-ink); font-family: var(--a0-font); }
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.state { border: 1px solid var(--a0-line); border-radius: 10px; padding: 12px; font-family: var(--a0-mono); font-size: 11px; letter-spacing: .12em; }
.state span { display: block; font-family: "Geist", var(--a0-font); letter-spacing: 0; font-size: 12.5px; color: var(--a0-muted); margin-top: 6px; text-transform: none; }
.state.recall { color: #37cd92; } .state.uncertain { color: #f4ad42; } .state.refuse { color: #fb7185; }

.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.role { border: 1px solid var(--a0-line); border-radius: 14px; padding: 22px; min-height: 150px; background: rgba(16, 29, 45, .48); }
.role span { color: var(--a0-cyan); font-family: var(--a0-mono); font-size: 11px; letter-spacing: .1em; }
.role h3 { font-size: 22px; margin: 18px 0 6px; letter-spacing: -.035em; font-family: var(--a0-font); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { border: 1px solid var(--a0-line); border-radius: 14px; padding: 22px; background: rgba(16, 29, 45, .48); }
.stat .num { font-family: var(--a0-font); font-weight: 700; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.04em; line-height: 1; }
.stat .lab { color: var(--a0-muted); font-size: 14px; line-height: 1.45; margin-top: 10px; }
.stat .src { font-family: var(--a0-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--a0-muted); margin-top: 14px; opacity: .8; }
.source-line { margin-top: 22px; color: var(--a0-muted); font-size: 14px; }
.source-line a { color: var(--a0-ink); border-bottom: 1px solid var(--a0-line); }

/* THE DOOR. A page that looks like this to a person and like the address to a machine. The
   label is white because a barcode is a measurement: black bars, a quiet zone, and nothing
   else, or a scanner reads silence. */
.door { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.label { background: #ffffff; color: #000; border-radius: 14px; padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; overflow: hidden; }
.label .code { font-family: "Libre Barcode 39 Text", monospace; font-size: 26px; line-height: 1; white-space: nowrap; overflow: hidden; }
.label .who { font-family: var(--a0-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #555; display: flex; justify-content: space-between; gap: 12px; }
.label .hex { font-family: var(--a0-mono); font-size: 12px; color: #111; word-break: break-all; }
.doors { list-style: none; display: grid; gap: 8px; margin-top: 18px; }
.doors li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--a0-line); font-size: 14px; }
.doors li:first-child { border-top: 0; }
.doors code, .card code { font-family: var(--a0-mono); font-size: 12px; background: rgba(255, 255, 255, .06); padding: 2px 6px; border-radius: 4px; }

.final { padding: 120px 0; border-top: 1px solid var(--a0-line); text-align: center; }
.final h2 { font-size: clamp(30px, 4.2vw, 60px); line-height: 1; max-width: 18ch; margin: 16px auto 22px; }
.final p { color: var(--a0-muted); max-width: 52ch; margin: 0 auto; font-size: 17px; }
.final .actions { justify-content: center; }

footer { border-top: 1px solid var(--a0-line); padding: 40px 0 48px; color: var(--a0-muted); font-size: 13px; }
footer .row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
footer .alpha0-lockup { font-size: 20px; }
footer nav { display: flex; gap: 20px; }
footer nav a:hover { color: var(--a0-ink); }
footer .fine { margin-top: 18px; font-family: var(--a0-mono); font-size: 11px; letter-spacing: .08em; }

/* ── responsive ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero .shell { padding: 28px 0 56px; }
  .hero-art { position: relative; top: auto; right: auto; bottom: auto; order: -1; width: min(1180px, calc(100% - 48px)); margin: 24px auto 0; z-index: 0; }
  .hero-art img { height: auto; aspect-ratio: 1800 / 768; border-radius: 16px; mask-image: none; -webkit-mask-image: none; }
  .hero-art::after { display: none; }
  .hero-art figcaption { right: 40px; bottom: 14px; }
  .menu-button { display: inline-flex; align-items: center; padding: 9px 12px; border: 1px solid var(--a0-line); border-radius: 8px; font-size: 14px; color: var(--a0-muted); cursor: pointer; margin-left: auto; }
  .top { position: relative; }
  .top nav { display: none; position: absolute; right: 0; top: 64px; flex-direction: column; gap: 6px; background: var(--a0-panel); border: 1px solid var(--a0-line); border-radius: 12px; padding: 14px 18px; min-width: 200px; z-index: 20; }
  .menu-toggle:checked ~ nav { display: flex; }
  .section-title { grid-template-columns: 1fr; gap: 0; }
  .principles { grid-template-columns: 1fr 1fr; }
  .principle:nth-child(2) { border-right: 0; }
  .principle:nth-child(-n+2) { border-bottom: 1px solid var(--a0-line); }
  .protocol, .door { grid-template-columns: 1fr; }
  .roles, .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .principles, .roles, .stats, .states { grid-template-columns: 1fr; }
  .principle { border-right: 0; border-bottom: 1px solid var(--a0-line); }
  .principle:last-child { border-bottom: 0; }
  .addr .tag { display: none; }
  .doors li { grid-template-columns: 1fr; gap: 4px; }
  .label .code { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }