/* Buero, the playground, dressed as a page of version 3 (index.html): two-tone
   heading, tabs as underlined text, the stage as a window with a 32px title
   bar. White, Geist, 0.5px hairlines, square corners, one orange, and orange
   is only ever you. One stage per idea; every module owns its stage. */
:root {
  --bg: #fff;
  --ink: #0a0a0a;
  --muted: #767676;
  --faint: #a8a8a8;
  --hair: #8c8c8c;
  --hair-soft: #d4d4d4;
  --grid: rgb(140 140 140 / 0.2);
  --inset: #f5f5f5;
  --accent: #f54e00;
  --accent-hover: #ff6a1a;
  --accent-soft: rgb(245 78 0 / 0.1);
  --col: min(1120px, calc(100% - 32px));
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.45 "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); letter-spacing: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
.wrap { width: var(--col); margin-inline: auto; }

/* ── Nav: pure type, no cells and no lines. At the top it is clear and a
   size larger. On the home pages it starts as wide as the film (--nav-top)
   and spreads to the content column in step with it; here it keeps to the
   content column from the start, aligned with the page below. As the page
   moves, assets/nav.js sets --p from 0 to 1 with the scroll, and the bar
   steps down a size and takes on a light white veil. Scrolling back undoes
   it. Always shown. */
.nav {
  --p: 0;
  --w0: var(--nav-top, var(--col));
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(32px - 4px * var(--p));
  height: calc(80px - 20px * var(--p));
  padding-inline: calc((100% - (var(--w0) + (var(--col) - var(--w0)) * var(--p))) / 2);
  font-size: calc(15px - 2px * var(--p));
  background: rgb(255 255 255 / calc(0.55 * var(--p)));
  -webkit-backdrop-filter: saturate(calc(1 + 0.8 * var(--p))) blur(calc(20px * var(--p)));
  backdrop-filter: saturate(calc(1 + 0.8 * var(--p))) blur(calc(20px * var(--p)));
}
.nav a { display: flex; align-items: baseline; flex: none; white-space: nowrap; text-decoration: none; }
.nav .home { align-self: center; margin-right: auto; }
/* The wordmark, assets/brand/buero-wordmark.svg. */
.nav .home svg { display: block; width: auto; height: calc(19px - 4px * var(--p)); }
.nav .link { gap: 5px; }
.nav .link small { font: 0.7em/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); transition: color 0.2s; }
@media (hover: hover) { .nav .link:hover small { color: var(--ink); } }
.nav .link[aria-current="page"] small { color: var(--accent); }
/* The one call to act: the same type, underlined in the one orange. */
.nav .wait {
  text-decoration: underline 1px var(--accent);
  text-underline-offset: 5px;
  transition: text-decoration-thickness 0.2s;
}
@media (hover: hover) { .nav .wait:hover { text-decoration-thickness: 2px; } }
@media (max-width: 480px) {
  .nav { gap: 18px; height: calc(64px - 8px * var(--p)); font-size: 14px; }
  .nav .home svg { height: 17px; }
  .nav .link small { display: none; }
}

/* Two-tone heading: the claim in ink, its second half in grey. */
.h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.035em; }
.h1 span { display: block; color: var(--faint); }

.rule { position: relative; border-top: 0.5px solid var(--hair); }

.play { padding: 120px 0 96px; }
.play .intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.play .intro p { max-width: 300px; color: var(--muted); text-wrap: pretty; }

/* Tabs as underlined text, as on the landing page: a mono number that turns
   orange when selected, and an ink bar that grows under the open one. */
.pg-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.pg-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 0.5px solid var(--hair-soft);
  background: none;
  text-align: left;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s;
}
.pg-tab .n { font: 10px/1 var(--mono); letter-spacing: 0.08em; }
.pg-tab[aria-selected="true"] { color: var(--ink); }
.pg-tab[aria-selected="true"] .n { color: var(--accent); }
.pg-tab i { position: absolute; left: 0; bottom: -0.5px; height: 1px; width: 0; background: var(--ink); }
.pg-tab[aria-selected="true"] i { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .pg-tab i { transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1); } }
@media (hover: hover) { .pg-tab:hover { color: var(--ink); } }

/* The project, in the window's title bar: its name with a chevron, a native select over it. */
.pg-proj { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.pg-proj select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font: inherit; }
.pg-proj svg { flex: none; width: 8px; height: 8px; }
@media (hover: hover) { .pg-proj:hover { color: var(--ink); } }
.pg-proj:focus-within { outline: 1px solid var(--ink); outline-offset: 2px; }

/* The stage as a window: an ink frame and a 32px title bar. */
.pg-frame { position: relative; margin-top: 24px; background: var(--bg); border: 0.5px solid var(--ink); }
.pg-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border-bottom: 0.5px solid var(--ink); font-size: 12px; }
.pg-bar small { font: 9px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* The stage every module draws into. Modules own everything inside it. */
.pg-stage {
  position: relative;
  height: clamp(560px, 72svh, 680px);
  overflow: hidden;
  background: var(--bg);
}
.pg-stage[hidden] { display: none; }
/* Your decisions: the seats are the window's top edge, and only there. */
.play .pg-seats { margin-top: 24px; }
.play .pg-seats[hidden] { display: none; }
.pg-seats:not([hidden]) + .pg-frame { margin-top: 0; }
.pg-stage[data-stage="decide"] { height: clamp(620px, 78svh, 740px); }
/* The history is Buero's Decisions view, on the site's tokens. */
.pg-dt { position: absolute; inset: 0; }
.pg-dt > div { height: 100%; }
.pg-dt .dt-src, .pg-dt .dt-open { display: none !important; }
.pg-dt .dt-gl { touch-action: pan-y; }

.pg-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 9px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background:
    radial-gradient(circle, rgb(140 140 140 / 0.3) 0.75px, transparent 1px) 0 0 / 14px 14px,
    var(--inset);
}
.pg-tech { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0 0; font: 9px/1.7 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.pg-tech b { font-weight: 400; color: var(--ink); }
.pg-tech [data-status] { text-align: right; }
.pg-tech [hidden] { display: none; }


@media (max-width: 720px) {
  .play { padding: 88px 0 72px; }
  .play .intro { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Three tabs side by side on a phone too: the number over the name. */
  .pg-tabs { gap: 12px; margin-top: 28px; }
  .pg-tab { flex-direction: column; gap: 6px; padding: 0 0 12px; font-size: 13px; line-height: 1.2; }
  .pg-stage { height: auto; min-height: 640px; }
  .pg-stage[data-stage="decide"] { height: auto; min-height: 0; }
  .pg-frame .pg-sub, .pg-frame [data-bar-meta] { display: none; }
  .pg-stage[data-stage="history"] { height: 640px; }
  .pg-tech { flex-direction: column; gap: 4px; }
  .pg-tech [data-status] { text-align: left; }
}