/* The page's faces, served from this site: the wordmark's own letters, and Latin subsets of the two text faces as
   Google Fonts cuts them, the variable axes trimmed to what the page uses. SIL Open Font License 1.1, the licences
   beside the files. */
@font-face {
  font-family: "Instrument Sans Wordmark";   /* only the letters of "product passion", weight 600, width 94 */
  font-style: normal;
  font-weight: 600;
  font-stretch: 94%;
  font-display: block;
  src: url(/fonts/instrument-sans-wordmark.woff2) format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin-wght400-700.woff2) format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/source-serif-4-latin-opsz-wght400-500.woff2) format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-italic-latin-opsz-400.woff2) format("woff2");
}

/* Layout: a full-bleed hero carried by two ribbons of hairlines, one blue and one red, entwining, with the quiet name row resting over their lower end; the team's work as a live strip beside its text; a quiet closing footer on the same grid: an invitation, the address in the body size with the red mark at rest beside it, and the company line. Light theme only (the brief). */
:root {
  --paper: #F6F7F5;      /* near-white page */
  --ink: #1D2226;        /* text */
  --ink-soft: #5F676C;   /* supporting text */
  --mark: #80888D;       /* grey names, 3:1 on the page */
  --blue: #1F5E73;       /* the one cool accent */
  --blue-deep: #174A5B;
  --red: #C8402F;        /* the human: the mark, the red ribbon and the wordmark */
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --measure: 1180px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--blue-deep); }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
.wrap {
  max-width: calc(var(--measure) + 96px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px), 4vw);
  padding-right: max(16px, env(safe-area-inset-right, 0px), 4vw);
}

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.hero > .wrap { padding-block: 28px clamp(40px, 7vh, 84px); display: grid; gap: 28px; }
/* the wordmark: live text in Instrument Sans 600 at width 94, so the browser hints and smooths it like the headline;
   18 px, the whole size whose ascender (12.96 px) is nearest the stand-in's capitals (13.3 px); wordmark round
   three's spacing at that size: tracking +0.01 em, c-t +0.01 em, s-s +0.005 em, the font's word space and kerning.
   It keeps the box the 19 px stand-in's line took, so nothing below moves. The outlines of the same setting are in
   prototypes/2026-11-09-prototype-ten/brand/ for large uses. */
.wordmark {
  display: block; width: max-content; height: 29.45px;
  font-family: "Instrument Sans Wordmark", var(--display); font-weight: 600; font-stretch: 94%;
  font-size: 18px; line-height: 29.45px; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--red); text-decoration: none;
  margin: 0 0 clamp(64px, 12vh, 132px);
}
.wordmark:hover { color: var(--red); }
.wordmark .ct { margin-right: 0.01em; }
.wordmark .ss { margin-right: 0.005em; }
.wordmark .end { letter-spacing: 0; }
.wordmark:focus-visible { outline-color: var(--red); }
h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 5.8vw, 80px); line-height: 1.02; letter-spacing: -0.032em;
  margin: 0; max-width: 12.5em; text-wrap: balance;
}
h1 span { display: block; }
.support { margin: 0; font-size: clamp(18px, 1.6vw, 21px); color: var(--ink); max-width: 38em; text-wrap: balance; }
/* the hero round: from 760 px up each sentence of the supporting line takes its own line; on phones they run on */
@media (min-width: 760px) { .support span { display: block; } }

/* Name row */
.logos { position: relative; }
.logos .wrap { padding-block: 0 clamp(36px, 6vh, 64px); display: grid; gap: 10px; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.track { display: flex; width: max-content; animation: drift 52s linear infinite; }
.track ul { display: flex; align-items: center; gap: clamp(48px, 6vw, 88px); padding: 0 clamp(24px, 3vw, 44px); margin: 0; list-style: none; }
.track li { display: flex; align-items: center; height: 56px; }
/* each company's own mark, turned to one grey; heights set by eye so the six weigh the same */
.track img { display: block; width: auto; filter: grayscale(1) brightness(0); opacity: 0.5; }
.track .spotify { height: 36px; }
.track .ingrid { height: 30px; }
.track .pley { height: 27px; }
.track .schibsted { height: 70px; margin: -10px -24px; }   /* the file carries wide clear space round the word */
.track .telia { height: 34px; }
.track .kth { height: 58px; }
@keyframes drift { to { transform: translateX(-50%); } }

/* The team at work */
.team .wrap {
  padding-block: clamp(64px, 10vh, 120px) clamp(48px, 8vh, 96px);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.team-text { display: grid; gap: 16px; min-width: 0; }
.team h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.08; letter-spacing: -0.024em; margin: 0; text-wrap: balance;
}
.team p { margin: 0; max-width: 30em; }
.scene { min-width: 0; }
.scene svg { display: block; width: 100%; }
.scene .lane-label { font-family: var(--display); font-size: 12.5px; fill: var(--ink-soft); }
.scene .lane-label.lead { fill: var(--ink); font-weight: 600; }
.scene .group-label { font-family: var(--display); font-size: 11px; letter-spacing: 0.02em; fill: var(--ink-soft); }
.scene .clock { font-family: var(--display); font-size: 12px; fill: var(--blue); font-variant-numeric: tabular-nums; }
.scene .say { font-family: var(--display); font-size: 13px; fill: var(--ink); }
.scene .say.lead { font-family: var(--body); font-style: italic; font-size: 14px; fill: var(--ink); }

/* The close: an invitation and the address, then the company line, closed by spacing and order alone */
.close .wrap {
  padding-block: clamp(96px, 14vh, 160px) clamp(36px, 6vh, 56px);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 72px);
}
.invite {
  grid-column: 1 / -1; margin: 0; max-width: 20em;
  font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.12; letter-spacing: -0.024em; text-wrap: balance;
}
.reach { grid-column: 1 / -1; margin: clamp(18px, 2.6vh, 26px) 0 0; display: flex; align-items: center; gap: 14px; }
/* the red mark from the hero, at rest: its dot and faint halo, still */
.reach::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; margin-left: 9px;
  background: var(--red); box-shadow: 0 0 0 8.5px rgba(200, 64, 47, 0.16);
}
.reach a { overflow-wrap: anywhere; }
.colophon {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  margin: clamp(80px, 13vh, 144px) 0 0; padding: 0; list-style: none;
  font-family: var(--display); font-size: 15px; color: var(--ink-soft);
}
.colophon li:nth-child(2) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; }
.colophon a { color: var(--ink-soft); }
.colophon a:hover { color: var(--blue-deep); }

@media (max-width: 860px) {
  .team .wrap { grid-template-columns: minmax(0, 1fr); }
  .close .wrap { grid-template-columns: minmax(0, 1fr); }
  .colophon { display: flex; flex-wrap: wrap; gap: 6px 28px; }
  .colophon li:nth-child(2) { display: contents; }
}
/* Phones only (Arek, 2026-11-09): the logo row closer to the team heading (about 76 px instead of 128); the diagram
   a little further from the text before it (56 px instead of 32) and much closer to the footer after it (about 64 px
   instead of 186), so the space around it is even. Measured from the visible logos and the diagram's frame. */
@media (max-width: 759px) {
  .team .wrap { padding-top: 32px; padding-bottom: 24px; row-gap: 56px; }
  .close .wrap { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; width: auto; }
  .track ul[aria-hidden] { display: none; }
  .track ul { flex-wrap: wrap; row-gap: 12px; padding: 0; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* The 404 page: the wordmark, one line, the way home */
.lost { padding-block: 28px 96px; }
.lost h1 { font-size: clamp(32px, 4.4vw, 56px); margin-bottom: 20px; }
.lost p { margin: 0; }