/* Wired World Fair — shared identity tokens.
   Every demo links this file so the base look stays consistent
   while each demo owns its own motion CSS. */

/* Onlysans, the rounded grotesk the poster is set in. TRIAL WEIGHT — this is a
   trial file and a trial licence, which will not cover a public site. It is
   here so the type can be judged before the licence is bought; swap the file
   and this rule when the live fonts arrive and nothing else has to change.
   OTTO/CFF, so the format hint is opentype rather than truetype. */
@font-face {
  font-family: "Onlysans";
  src: url("fonts/OnlysansTRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  /* swap, not block: the page is readable in the fallback and a title that
     arrives late beats a title that isn't there. */
  font-display: swap;
}

/* Medium is the weight the elements sheet specifies for type. */
@font-face {
  font-family: "Onlysans";
  src: url("fonts/OnlysansTRIAL-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The brand package's own two faces. */
@font-face {
  font-family: "WIRED Sans";
  src: url("fonts/WIREDSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "WIRED Mono";
  src: url("fonts/WiredMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Key art palette — sampled from the Miami Fall 2026 artwork, not guessed.
     Violet is the only accent: internet blue and the separate lockup indigo
     are both gone, so there is one blue in the system rather than three. */
  /* FINAL, from WIRED_WORLDFAIR_ELEMENTS (Round 4). These four are the brand's
     own values and are not to be nudged — everything else here is derived from
     them. The earlier set was sampled off the key art and was close but wrong:
     orange was #ec561e, violet #5244c4, grey #757575. */
  --orange: #f85300; /* RED ORANGE — gradient top, and the dominant field */
  /* Two names on purpose. --violet-brand is the brand's value and never
     changes; --violet is the interface accent, which lifts in dark mode. Use
     the brand one on anything sitting on the gradient. */
  --violet-brand: #5744df; /* PURPLE-BLUE */
  --violet: var(--violet-brand); /* gradient bottom, and the interface accent */
  --violet-wash: #eceafc;
  --violet-visited: #8a58e6;
  --map-grey: #808080; /* DARK GRAY — the halftone world map */
  --on-brand: #ffffff; /* WHITE — text on the gradient */

  --ink: #000000;
  --paper: #ffffff;
  --rule: #d4d4d4;
  --mute: #6a6a6a;

  /* The orange holds almost flat for the first half and only then falls away
     to violet — sampled down the artwork's clear left edge at 10% steps, so
     the stops are the measured curve rather than a two-stop approximation.
     Re-based onto the final endpoints by keeping each stop's deviation from the
     straight orange-to-violet line and rebuilding it on the new line: a plain
     two-stop ramp between the brand colours loses the mauve dip at 80-90% that
     is what makes it look like the poster. */
  --gradient: linear-gradient(
    180deg,
    #f85300 0%,
    #f25202 50%,
    #ea5006 60%,
    #d94d12 70%,
    #c04b33 80%,
    #924576 90%,
    #5744df 100%
  );

  /* The chevron used as an indicator. ASCII on purpose — it is one of the few
     marks that sits on the exact monospace advance, unlike › or ❯. */
  --indicator: ">";

  /* Type. Four roles, and each one is a measurement rather than a taste:
       --text    WIRED Sans. Prose and UI. Proportional.
       --data    WIRED Mono. Anything that has to line up in a column. Every
                 letter and digit is exactly 0.600 — a true monospace with
                 tabular figures. WIRED Sans is NOT: its ten digits come in
                 nine different widths (0.372 to 0.645), so times and numbers
                 set in it jitter column to column.
       --grid    System monospace. The ASCII artwork ONLY, and it has to stay:
                 it is the one face measured where the block elements
                 (U+2580-259F) sit on the same 0.6182 advance as the letters.
                 In WIRED Mono the letters are 0.600 and the blocks are 1.000,
                 which shears every map on the site.
       --display Onlysans. Titles. */
  --text: "WIRED Sans", ui-sans-serif, system-ui, sans-serif;
  --data: "WIRED Mono", ui-monospace, "SF Mono", SFMono-Regular, "Menlo",
    monospace;
  --grid: ui-monospace, "SF Mono", SFMono-Regular, "Menlo", "Consolas",
    "Liberation Mono", monospace;
  --display: "Onlysans", var(--text);

  /* The demos all reference --mono and are unchanged by any of the above. */
  --mono: var(--grid);

  /* Raised from 12 / 14 / 18. Those were interface sizes carried over from the
     demos, where the page is a control panel and the artwork is the ASCII; on
     the launch pages they are what made everything read efficient rather than
     welcoming, and 14px body is small for a page somebody reads standing up.
     16 is the browser's own default and the biggest single readability win
     available for nothing.
     --step-2 comes up with them, so the display end keeps its distance from a
     body that has grown — left where it was, a 4rem heading over 16px copy is a
     smaller jump than the same heading was over 14px, and the page flattens.
     The ASCII grids are unaffected either way: both maps size themselves off
     measured cell geometry, not off this scale. */
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: clamp(2.1rem, 7vw, 5rem);

  /* Space — 8px base, tight and gridded. */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 48px;
  --s5: 96px;

  /* Motion — shared easing vocabulary. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-mech: steps(12, end);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The accent lifts on a dark page: the brand violet alone is too close to
       near-black for text. Mixed from --violet-brand rather than hand-picked,
       so it stays a tint of the real colour and follows it if it ever moves. */
    --violet: color-mix(in srgb, var(--violet-brand) 55%, #ffffff);
    --violet-visited: color-mix(in srgb, var(--violet-brand) 34%, #ffffff);
    --violet-wash: color-mix(in srgb, var(--violet-brand) 22%, #000000);
    --ink: #f2f2f2;
    --paper: #050505;
    --rule: #2a2a2a;
    --mute: #8c8c8c;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--step-0);
  line-height: 1.5;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--violet);
  text-underline-offset: 3px;
}

a:visited {
  color: var(--violet-visited);
}

/* Brand surface: the gradient with white on it. Brand colours are fixed, so
   this looks the same in either theme. */
.on-brand {
  background: var(--gradient);
  color: var(--on-brand);
}

/* The chevron indicator. Used as a list marker and in place of a bullet. */
.ind::before {
  content: var(--indicator);
  margin-right: 0.6em;
  color: var(--violet);
}

.on-brand .ind::before {
  color: var(--on-brand);
}

/* Demo chrome — the bar every demo page carries at the top. */
.bar {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bar strong {
  font-weight: 400;
  color: var(--violet);
}

.bar .meta {
  color: var(--mute);
}

.note {
  max-width: 62ch;
  padding: var(--s3);
  color: var(--mute);
  font-size: var(--step--1);
  line-height: 1.7;
}

.note b {
  color: var(--ink);
  font-weight: 400;
}

/* Controls — plain, mechanical, no rounded corners anywhere. */
.controls {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  padding: 0 var(--s3) var(--s3);
}

button,
.btn {
  appearance: none;
  border: 1px solid var(--violet);
  background: transparent;
  color: var(--violet);
  font: inherit;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  cursor: pointer;
}

button:hover,
.btn:hover {
  background: var(--violet);
  color: var(--paper);
}

button[aria-pressed="true"] {
  background: var(--violet);
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}