/* Reset + the site chrome shared by every page: the brand block and the nav.
 *
 * The nav is the only thing on screen that has to look identical across Library,
 * Components and New movie — three copies of it drifted in padding and font-size
 * before this file existed. It comes in two densities: the default for the
 * document-shaped pages, and `.compact` for the lab, where the header sits above
 * a full-height three-pane layout and cannot spend 50px on itself. */

*{box-sizing:border-box}

body{
  color:var(--ink);
  font:15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
}

/* ---- header ------------------------------------------------------------- */
header.top{
  display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;
  padding:28px 0 22px;
  border-bottom:1px solid var(--line);
}
header.top.compact{
  padding:16px clamp(16px,2.5vw,28px);
  gap:16px;
  background:#0A101Ccc;
  backdrop-filter:blur(10px);
}

.brand{flex:1; min-width:200px}
header.top.compact .brand{min-width:180px}

.brand-mark{
  display:block; text-decoration:none;
  font-family:var(--display); font-weight:600;
  font-size:28px; letter-spacing:-.02em; line-height:1.1; color:var(--ink);
}
header.top.compact .brand-mark{font-size:24px}

.brand-sub{
  display:block; margin-top:6px;
  font-size:12.5px; color:var(--dim); letter-spacing:.01em;
}
header.top.compact .brand-sub{margin-top:4px; font-size:12px}

/* ---- nav ---------------------------------------------------------------- */
nav{display:flex; gap:8px; align-items:center}
nav a{
  font-size:13px; font-weight:500; color:var(--dim); text-decoration:none;
  padding:8px 14px; border:1px solid var(--line); border-radius:10px;
  transition:color .15s, border-color .15s, background .15s;
}
header.top.compact nav a{padding:7px 12px}

nav a:hover{color:var(--ink); border-color:var(--line-hi)}
nav a.on{color:var(--ink); background:var(--raised); border-color:var(--line-hi)}
nav a.cta{
  color:#0A0E16; background:var(--accent); border-color:var(--accent); font-weight:600;
}
nav a.cta:hover{filter:brightness(1.06); color:#0A0E16}