/* ==========================================================================
   Premier Man — Identity System V2
   Black, bone, one signal. Colour is rationed; when it appears, it means
   something. Type as architecture. Edge, not ornament — hard corners, one cut,
   no decoration. Labels are mono spec-tags borrowed from workwear and gear.

   This sheet is self-contained: it shares nothing with styles.css, which
   belongs to the previous (magazine) design.
   ========================================================================== */

:root {
  /* palette — Identity System V2 */
  --carbon:   #0D0D0C;   /* primary  */
  --bone:     #EEEBE4;   /* secondary */
  --blaze:    #FF4D1A;   /* accent — rationed */
  --concrete: #8E8C86;   /* support  */
  --drab:     #4A4B3C;   /* support  */

  /* masthead geometry: the supplied lockup is 2334 x 376 (1 : 6.207) */
  --masthead-w: min(74vw, 880px);
  --masthead-h: calc(var(--masthead-w) / 6.207);
  --switch-gap: clamp(34px, 7vh, 72px);
}

/* Dark is the brand's primary ground, so it is the default; the theme boot
   script sets data-theme before first paint. */
:root,
:root[data-theme="dark"] {
  --ground: var(--carbon);
  --ink: var(--bone);
  --ink-muted: var(--concrete);
  --edge: rgba(238, 235, 228, 0.34);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground: var(--bone);
  --ink: var(--carbon);
  --ink-muted: var(--drab);
  --edge: rgba(13, 13, 12, 0.28);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 420ms cubic-bezier(0.4, 0, 0.2, 1),
              color 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

::selection { background: var(--blaze); color: var(--carbon); }

/* ------------------------------------------------------------------ stage */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The masthead sits dead centre of the viewport: `inset: 0` + `margin: auto`
   centres both axes regardless of the switch above it. */
.masthead {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--masthead-w);
  height: var(--masthead-h);
  font-size: 0;
}

.masthead__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* One file per ground: Carbon ink on Bone, Bone ink on Carbon. Both are in the
   DOM so switching grounds never waits on a network fetch. */
.masthead__logo--bone { display: block; }
.masthead__logo--carbon { display: none; }

:root[data-theme="light"] .masthead__logo--bone { display: none; }
:root[data-theme="light"] .masthead__logo--carbon { display: block; }

/* ----------------------------------------------------------------- switch */

.switch {
  position: absolute;
  left: 50%;
  bottom: calc(50% + (var(--masthead-h) / 2) + var(--switch-gap));
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 16px;

  margin: 0;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch__side {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: color 320ms ease, opacity 320ms ease;
  /* labels are clickable targets that jump straight to their own side */
  padding: 6px 2px;
  user-select: none;
}

.switch__track {
  position: relative;
  flex: none;
  width: 66px;
  height: 30px;
  border: 2px solid var(--edge);
  background: transparent;
  transition: border-color 420ms ease;
}

.switch__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 24px;
  height: 24px;
  background: var(--ink);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 320ms ease;
}

/* Active side: the label carries the ink, the knob slides and takes the signal
   colour on the dark ground. Visual state keys off the root attribute so it is
   already correct on first paint. */
:root[data-theme="dark"] .switch__side[data-side="dark"],
:root[data-theme="light"] .switch__side[data-side="light"] {
  color: var(--ink);
  opacity: 1;
}

:root[data-theme="dark"] .switch__knob {
  transform: translateX(36px);
  background: var(--blaze);
}

.switch:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 4px;
}

/* Without scripting the switch cannot work, so it is not shown at all: the page
   stays a branded masthead on the primary ground. */
.no-js .switch { display: none; }

/* ------------------------------------------------------------------- spec */

/* The labelling voice, for the one page that has something to state rather than
   something to show. Same mono spec-tag treatment as the switch labels, in the
   muted ink, sitting exactly where the switch sits. */
.spec {
  position: absolute;
  left: 50%;
  bottom: calc(50% + (var(--masthead-h) / 2) + var(--switch-gap));
  transform: translateX(-50%);
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 600px) {
  :root {
    --masthead-w: 78vw;
    --switch-gap: clamp(28px, 6vh, 48px);
  }
  .switch { gap: 12px; }
  .switch__side { font-size: 10px; letter-spacing: 0.16em; }
  .switch__track { width: 58px; height: 26px; }
  .switch__knob { width: 20px; height: 20px; }
  :root[data-theme="dark"] .switch__knob { transform: translateX(32px); }
}

@media (prefers-reduced-motion: reduce) {
  body, .switch__side, .switch__track, .switch__knob { transition: none; }
}