* { box-sizing: border-box; }
body { margin:0; padding:18px 14px 44px; background:#17161a; font-family:ui-sans-serif,system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:center; gap:14px; }
.picker { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:#9c9184; font-size:13px; max-width:1440px; width:100%; }
.picker > span:first-child { color:#e0d3bb; font-weight:700; }
.picker a { color:#c3b7a3; text-decoration:none; padding:4px 10px; border:1px solid #3a3730; border-radius:3px; }
.picker a:hover { border-color:#6d6455; color:#efe6d4; }
.picker a:focus-visible, .transport button:focus-visible, .transport input:focus-visible { outline:2.5px solid #e4de3c; outline-offset:3px; }
.cost { margin-left:auto; color:#7d7467; font-variant-numeric:tabular-nums; }
.stage { position:relative; overflow:hidden; background:#f6eeda; box-shadow:0 22px 70px rgba(0,0,0,.6); }
#frame { position:absolute; inset:0; display:block; }
.stage > :not(#frame) { position:absolute; z-index:1; }
[hidden] { display:none !important; }
.note { margin:0; max-width:1440px; color:#8e8476; font-size:12.5px; line-height:1.6; }

/* ---- the About resting state ---- */
:root { --paper:#f6eeda; --ink:#2a2018; --ink-soft:#5a4632; --coral:#c4562e; --coral-deep:#9e3d1c; }
.page { inset:0; pointer-events:none; }
.page > * { pointer-events:auto; }
.bar { position:absolute; top:0; left:0; right:0; height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.wordmark { font-family:Georgia,serif; font-weight:600; font-size:17px; letter-spacing:.14em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.wordmark em { font-style:italic; font-weight:400; color:var(--coral); }
.bar nav { display:flex; gap:26px; }
.bar nav a { font-size:14.5px; font-weight:500; color:var(--ink-soft); text-decoration:none; padding:6px 2px; }
.bar nav a[aria-current='page'] { color:var(--coral); font-weight:700; }
.intro { position:absolute; top:128px; left:790px; width:590px; display:grid; gap:14px; }
.eyebrow { margin:0; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--coral-deep); }
h1 { margin:0; font-family:Georgia,serif; font-weight:500; font-size:58px; line-height:.98; letter-spacing:-.02em; color:var(--ink); }
.lede { margin:0; font-size:17.5px; line-height:1.48; color:var(--ink-soft); max-width:30ch; }
.actions { margin:6px 0 0; display:flex; gap:22px; flex-wrap:wrap; }
.go { font-size:15px; font-weight:700; color:var(--coral-deep); text-decoration:none; border-bottom:2px solid rgba(158,61,28,.45); padding:6px 0 4px; }
.go.quiet { color:var(--ink-soft); border-bottom-color:rgba(90,70,50,.35); }
.page a:focus-visible { outline:2.5px solid var(--coral); outline-offset:4px; }

/* ---- phone recomposition of the rest state ---- */
.stage[data-mode='phone'] .bar { height:auto; padding:13px 20px 0; flex-direction:column; align-items:stretch; gap:9px; }
.stage[data-mode='phone'] .bar nav { gap:0; justify-content:space-between; }
.stage[data-mode='phone'] .bar nav a { font-size:13.5px; padding:7px 0; }
.stage[data-mode='phone'] .wordmark { font-size:15px; }
.stage[data-mode='phone'] .intro { top:132px; left:24px; width:342px; gap:10px; }
.stage[data-mode='phone'] h1 { font-size:37px; }
.stage[data-mode='phone'] .lede { font-size:16px; max-width:none; }
.stage[data-mode='phone'] .go { font-size:15px; padding:11px 0 9px; }

/* ---- transport ---- */
.transport { left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:linear-gradient(to top, rgba(20,18,14,.62), rgba(20,18,14,0)); }
.transport button { font:inherit; font-size:12.5px; color:#f2e7d2; background:rgba(28,24,18,.72);
  border:1px solid rgba(240,230,210,.28); border-radius:4px; padding:6px 11px; cursor:pointer; }
.transport button:hover { background:rgba(60,50,36,.86); }
.transport input[type=range] { flex:1; accent-color:#e4a93a; }
.transport #tc { color:#f2e7d2; font-size:12px; font-variant-numeric:tabular-nums; min-width:52px; text-align:right; }