/*
  Palette sampled from the app's own render rather than chosen abstractly: the vignetted
  corners of the desk, the sunlit wood, the light through the blinds, the cream plinth.
  The page and the product are lit by the same lamp.
*/
:root {
  --ink:     #1a130f;  /* the table in shadow — the page ground, warmer than black */
  --groove:  #0c0a08;  /* vinyl, the deepest layer */
  --walnut:  #7d5739;  /* sunlit walnut, sampled from the render */
  --amber:   #d99957;  /* the pool of sun on the wood — the one accent */
  --sun:     #ffeecb;  /* light through the blinds — headings */
  --linen:   #e8e3d9;  /* the plinth */

  --body:    color-mix(in srgb, var(--linen) 68%, transparent);
  --rule:    color-mix(in srgb, var(--amber) 22%, transparent);

  --display: "Fraunces", Georgia, serif;
  --text:    "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 60ch;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--body);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* A low warm glow from the upper left, the same direction the scene is lit from. */
  background-image: radial-gradient(
    120ch 80ch at 12% -10%,
    color-mix(in srgb, var(--walnut) 55%, transparent),
    transparent 70%);
  background-repeat: no-repeat;
}

.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sun); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem var(--gutter);
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: 1.375rem;
  color: var(--sun);
  letter-spacing: -0.01em;
  text-decoration: none;
}

a.wordmark:hover { color: var(--amber); }

.masthead-note { color: color-mix(in srgb, var(--linen) 40%, transparent); }
.masthead-note a { color: inherit; }
.masthead-note a:hover { color: var(--amber); }

/* ---------------------------------------------------------------- hero */

.hero {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 6vw, 5.5rem) var(--gutter) clamp(3rem, 8vw, 7rem);
  max-width: 100rem;
  margin-inline: auto;
}

@media (min-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); }
}

.eyebrow { color: var(--amber); margin: 0 0 1.25rem; }

h1 {
  font-family: var(--display);
  /* Fraunces' optical-size and wonk axes give the display face a hand-cut warmth that a
     neutral serif would not; kept to the headline only so it stays an event. */
  font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 1;
  font-weight: 400;
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--sun);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

/*
  The promise, between the headline and the detail. Set in the display face so it reads as part
  of the headline's sentence rather than as the first line of body copy — but at 400 and well
  under half the size, since two lines of Fraunces competing for the same job is two headlines.
*/
.promise {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--linen);
  max-width: 30ch;
  margin: 0 0 1.375rem;
  text-wrap: balance;
}

.lede { max-width: var(--measure); margin: 0 0 2rem; }

.actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }

.button {
  display: inline-block;
  padding: 0.8125rem 1.5rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--groove);
  font-weight: 500;
  text-decoration: none;
  transition: transform 120ms ease, background-color 120ms ease;
}

.button:hover {
  background: var(--sun);
  color: var(--groove);
  transform: translateY(-1px);
}

.fineprint { color: color-mix(in srgb, var(--linen) 45%, transparent); margin: 0; }

/* ---------------------------------------------------------------- the deck */

.hero-figure { margin: 0; }

.deck {
  position: relative;
  border-radius: 14px;
  overflow: hidden;

  /*
    Where the printed label sits in hero.png, as fractions of that render.

    These three are the *only* copy of geometry that belongs to VinylLayout, and they are
    declared once here because two rules need them. They are pinned by
    `DeckLabelGeometryTests` in DioramaKit, which recomputes them from the layout itself and
    fails if they drift — which is not hypothetical: the deck was redrawn in #33 and hero.png
    regenerated with it, while these numbers stayed on the old composition's platter. The
    result was a second label hanging off the edge of the record for every visitor.

    Recompute rather than nudge by eye. `--label-size` is deliberately a shade over the
    computed 11.94% so the still's own printed label cannot peek out from under the rotating
    copy at any angle; the test allows for that and pins the direction of the fudge.
  */
  --label-x: 48.25%;
  --label-y: 53.23%;
  --label-size: 12.3%;

  /* Sits on the page like the deck sits on the desk. */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 30px 70px -20px rgba(0, 0, 0, 0.75);
}

.deck-still { display: block; width: 100%; height: auto; }

/* The signature: the label actually turns. It lands on the printed one because both come from
   VinylLayout — see the custom properties above. */
.deck-label {
  position: absolute;
  left: var(--label-x);
  top: var(--label-y);
  width: var(--label-size);
  height: auto;
  translate: -50% -50%;
  border-radius: 50%;
  animation: spin 1.8s linear infinite;
}

/*
  The light on the label does not turn with it. Matches the shading the app draws into the
  label — a soft edge shade and a highlight from the upper left — laid over the spinning copy
  as a separate, still element, because a specular that rotates reads as a printed swirl.
*/
.deck::after {
  content: "";
  position: absolute;
  left: var(--label-x);
  top: var(--label-y);
  width: var(--label-size);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(circle, transparent 82%, rgba(0, 0, 0, 0.2) 100%);
}

@keyframes spin { to { rotate: 360deg; } }

figcaption {
  margin-top: 1rem;
  color: color-mix(in srgb, var(--linen) 38%, transparent);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- scenes */

.scenes {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  border-top: 1px solid var(--rule);
  max-width: 100rem;
  margin-inline: auto;
}

/* Image first on wide screens: the turntable sits right in the hero, so alternating puts the
   two decks on opposite sides rather than stacking them in one column. */
@media (min-width: 62rem) {
  .scenes { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
  .scenes figure { order: -1; }
}

.scenes h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--sun);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.scenes figure { margin: 0; }

.scenes img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 30px 70px -20px rgba(0, 0, 0, 0.75);
}

/* ---------------------------------------------------------------- gallery */

.gallery {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  border-top: 1px solid var(--rule);
  max-width: 100rem;
  margin-inline: auto;
}

.gallery-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.gallery-head h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--sun);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* Two up rather than auto-fit's three: there are four of these, and three columns leaves one
   stranded on a row of its own. Two also buys each shot half the page, which is the point of
   showing them at all. */
@media (min-width: 62rem) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gallery-grid figure { margin: 0; }

.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  /* Shallower than the two feature shots: a grid of deep drop shadows reads as a page of
     floating cards rather than as one room seen from several angles. */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 16px 36px -14px rgba(0, 0, 0, 0.7);
}

.gallery-grid figcaption {
  margin-top: 1.125rem;
  color: var(--body);
  text-transform: none;
  letter-spacing: normal;
}

.gallery-grid h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "SOFT" 30;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--sun);
  margin: 0 0 0.375rem;
}

.gallery-grid p { margin: 0; max-width: 44ch; }

.gallery-grid .tag {
  margin-top: 0.75rem;
  color: color-mix(in srgb, var(--amber) 75%, transparent);
}

/* ---------------------------------------------------------------- specs */

.specs {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  border-top: 1px solid var(--rule);
  max-width: 100rem;
  margin-inline: auto;
}

.specs dl {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.specs dt {
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "SOFT" 30;
  font-size: 1.25rem;
  color: var(--sun);
  margin-bottom: 0.5rem;
}

.specs dd { margin: 0; max-width: 42ch; }

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

.plate {
  padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem);
  max-width: 100rem;
  margin-inline: auto;
}

/* Reads as the plate riveted to the back of a piece of hi-fi equipment. A table because this
   genuinely is tabular: attributes and their values. */
.plate table {
  width: 100%;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--groove) 70%, transparent);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  text-transform: none;
  letter-spacing: 0.01em;
}

.plate tr + tr { border-top: 1px solid color-mix(in srgb, var(--amber) 12%, transparent); }

.plate th,
.plate td { padding: 0.875rem 1.25rem; text-align: left; font-weight: 400; }

.plate th {
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  white-space: nowrap;
  width: 1%;
}

.plate td { color: var(--linen); }

/* ---------------------------------------------------------------- buy */

.buy {
  padding: clamp(3.5rem, 8vw, 7rem) var(--gutter);
  border-top: 1px solid var(--rule);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.buy .eyebrow { margin-bottom: 1rem; }
.buy .lede { margin-inline: auto; margin-bottom: 2rem; }

.price { margin: 0 0 1.25rem; }

.amount {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  color: var(--sun);
  line-height: 1;
}

.once { color: color-mix(in srgb, var(--linen) 50%, transparent); font-size: 1.125rem; }

/* The price the discount comes off. Set well down from the headline number rather than beside
   it at the same weight: two large prices next to each other read as two products. */
.was {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: color-mix(in srgb, var(--linen) 32%, transparent);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: 0.5rem;
}

.launch { color: var(--amber); margin-bottom: 2rem; }

.buy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
}

/* The second of two calls to action. Outlined rather than filled, because two solid amber pills
   side by side make neither of them the thing to do next. */
.button-quiet {
  background: transparent;
  color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.button-quiet:hover {
  background: transparent;
  color: var(--sun);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent);
}

.buy .fineprint { margin-top: 1rem; }
/* Narrower than the section's measure so it reads as two short lines under the buttons rather
   than as another paragraph of copy competing with the price. */
.buy .install-note { max-width: 36ch; margin: 1rem auto 0; }

/* ------------------------------------------------- documents: releases, privacy */

/* The two pages that are documentation rather than a pitch share one column, one measure and
   one heading scale, because a privacy policy set differently from the changelog reads as
   something bolted on by a lawyer. */
.releases,
.doc {
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
  max-width: 52rem;
  margin-inline: auto;
}

.releases h1,
.doc h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem); }
/* The heading runs straight into the list, so it carries the gap the lede used to. */
.releases h1 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Tighter, because a dateline follows it rather than the content. */
.doc > .lede { margin-bottom: 1.25rem; }

/* Same rule between sections as between releases: this is a list of things being looked up. */
.doc-section {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  border-top: 1px solid var(--rule);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.doc-section h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sun);
  margin: 0 0 1rem;
}

.doc-section p { max-width: var(--measure); margin: 0 0 1rem; }
.doc-section ul { max-width: var(--measure); margin: 0 0 1rem; padding-left: 1.15rem; }
.doc-section li { margin-bottom: 0.6rem; }
.doc-section li::marker { color: color-mix(in srgb, var(--amber) 60%, transparent); }
.doc-section strong { color: var(--linen); font-weight: 500; }
.doc-section em { color: var(--linen); font-style: normal; }

.doc-section code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--groove) 80%, transparent);
  color: var(--linen);
}

/* Borrows the spec plate wholesale — the "what leaves your Mac" table is exactly the same kind
   of object as the specifications, so it should look like one. Only the page padding it carries
   on the landing page has to come off, since it is inside a column here. */
.doc-plate {
  padding: 0;
  max-width: none;
  margin: 0 0 1.25rem;
}

.doc-plate td em { color: var(--linen); font-style: normal; }
.doc-plate th { vertical-align: top; padding-top: 1rem; }

/* On a phone the label column starves the sentence beside it — these cells hold prose, not the
   landing page's four-word values. Stack them instead. */
@media (max-width: 40rem) {
  .doc-plate th,
  .doc-plate td { display: block; width: auto; }
  .doc-plate th { white-space: normal; padding-bottom: 0.25rem; }
  .doc-plate td { padding-top: 0; }
}

.release-list { display: grid; gap: 0; }

/* Each release is a plate in the same family as the spec table: this page is documentation,
   and the version number is the thing being looked up. */
.release {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
}

.release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
}

.release h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sun);
}

.badge {
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--amber);
  letter-spacing: 0.1em;
}

.release-meta { margin: 0; color: color-mix(in srgb, var(--linen) 45%, transparent); }

.release-notes { max-width: var(--measure); }
.release-notes p { margin: 0 0 0.75rem; }
.release-notes ul { margin: 0 0 1.25rem; padding-left: 1.15rem; }
.release-notes li { margin-bottom: 0.5rem; }
.release-notes li::marker { color: color-mix(in srgb, var(--amber) 60%, transparent); }
.release-notes strong { color: var(--linen); font-weight: 500; }

/* The changelog's "Added / Changed / Fixed" — a label on a list, not a section title, so it
   is set as the small caps the rest of the page uses for labels. */
.release-notes h3,
.release-notes h4 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 1.5rem 0 0.75rem;
}

.release-notes code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--groove) 80%, transparent);
  color: var(--linen);
}

.release-actions { margin: 1.5rem 0 0; }

.text-link { color: var(--amber); }

.note { color: color-mix(in srgb, var(--linen) 40%, transparent); }

.feed-note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- footer */

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  color: color-mix(in srgb, var(--linen) 35%, transparent);
  text-transform: none;
}

/* ---------------------------------------------------------------- the key */

/* The licence key on the success page. It is the one string on this site somebody has to move
   out of the page and into an application by hand, so it is set at the same size as body text
   rather than as fineprint, and it wraps on the dashes the key already carries. */
.keybox {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--groove) 55%, transparent);
}

.keybox-status { color: color-mix(in srgb, var(--linen) 45%, transparent); margin: 0; }
.keybox[data-state="error"] .keybox-status { color: var(--amber); }

.keybox-key {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--linen);
  /* `anywhere` rather than `break-all`: the key is dash-grouped precisely so it can be read
     back over the phone, and breaking mid-group would undo that. */
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.keybox-copy { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  /* The spinning label is the one piece of motion on the page, so honouring this actually
     means something rather than being a formality. */
  .deck-label { animation: none; }
  .button { transition: none; }
  .button:hover { transform: none; }
}
/* ------------------------------------------------------- the desktop frame */

/*
  The one thing a visitor has to understand in the first second is that this *is* the wallpaper.
  A full-bleed render of a turntable reads as an illustration of a turntable; it took a menu bar
  and a Dock around it before anybody could see it was a desktop picture. The chrome is drawn in
  CSS rather than screenshotted, so it costs no asset, weighs nothing, and cannot go stale
  against a macOS release the way a captured screenshot would.

  Everything inside scales with the frame's own width (cqw) rather than the viewport, because
  this is a picture of a screen: a menu bar that stayed 24 px while the screen shrank would give
  the whole thing away. Every one of those is preceded by a plain fallback, because a browser
  without container query units drops the whole clamp() — which does not degrade, it collapses:
  the app icon falls back to width:auto and renders the 512 px original inside the menu bar.
*/
.desktop {
  position: relative;
  container-type: inline-size;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--linen) 14%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 30px 70px -20px rgba(0, 0, 0, 0.75);
}

/* The deck sits inside the frame now, so its own shadow would be a shadow inside a screen. */
.desktop .deck { border-radius: 0; box-shadow: none; }

.desktop-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center;
  gap: 13px;
  gap: clamp(7px, 1.5cqw, 22px);
  height: 18px;
  height: clamp(14px, 2.2cqw, 30px);
  padding-inline: 9px;
  padding-inline: clamp(6px, 1.1cqw, 16px);
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--text);
  font-size: 9px;
  font-size: clamp(7px, 1.05cqw, 13px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
}
.desktop-bar img {
  width: 11px;
  width: clamp(9px, 1.3cqw, 17px);
  height: auto;
  border-radius: 22%;
  flex: none;
}
.desktop-bar b { font-weight: 600; }
.desktop-bar .bar-spacer { margin-left: auto; }
.desktop-bar .bar-scene { color: var(--amber); }
/* The first thing to give up on a narrow frame is the middle of the menu bar, exactly as macOS
   does it — the app name and the right-hand side are what carry the meaning. */
@container (max-width: 480px) { .desktop-bar .bar-menu { display: none; } }

.desktop-dock {
  position: absolute; z-index: 3;
  left: 50%;
  bottom: 8px;
  bottom: clamp(4px, 1cqw, 14px);
  translate: -50% 0;
  display: flex; align-items: flex-end;
  gap: 4px;
  gap: clamp(3px, 0.55cqw, 8px);
  padding: 4px;
  padding: clamp(3px, 0.5cqw, 7px);
  border-radius: 10px;
  border-radius: clamp(7px, 1.2cqw, 17px);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.desktop-dock i, .desktop-dock img {
  display: block;
  width: 27px;
  width: clamp(16px, 3.3cqw, 46px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 6px;
  border-radius: clamp(4px, 0.8cqw, 11px);
  flex: none;
}
/* Generic tiles rather than anybody's icons: the Dock has to be recognisable as a Dock without
   the page pretending to endorse, or be endorsed by, six other applications. */
.desktop-dock i { background: linear-gradient(160deg, var(--tile), color-mix(in srgb, var(--tile) 62%, #000)); }
.desktop-dock i:nth-child(1) { --tile: #4b8ef0; }
.desktop-dock i:nth-child(2) { --tile: #3ecf8e; }
.desktop-dock i:nth-child(3) { --tile: #f0a63c; }
.desktop-dock i:nth-child(4) { --tile: #e8615a; }
.desktop-dock i:nth-child(5) { --tile: #8b7cf0; }
.desktop-dock i:nth-child(6) { --tile: #7b8794; }
.desktop-dock .dock-sep {
  width: 1px; align-self: stretch;
  margin-inline: 3px;
  margin-inline: clamp(2px, 0.4cqw, 6px);
  background: rgba(255, 255, 255, 0.28);
  flex: none;
}

/* The caption under the frame does the naming that the picture cannot. */
.desktop-note {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
  margin-top: 1rem;
  color: color-mix(in srgb, var(--linen) 38%, transparent);
  text-transform: none;
  letter-spacing: 0.02em;
}
.desktop-note b { color: var(--linen); font-weight: 500; }

/* ------------------------------------------------------------ what it is */

/* Three sentences answering the three things people guess instead: a screensaver, an app
   window, a video. It sits directly under the hero because that is where the question arrives. */
.whatitis {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  border-top: 1px solid var(--rule);
  max-width: 100rem;
  margin-inline: auto;
}
.whatitis > h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--sun);
  letter-spacing: -0.015em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.whatitis ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.whatitis h3 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: 1.1875rem;
  color: var(--sun);
  margin: 0 0 0.5rem;
}
.whatitis p { margin: 0; }
.whatitis .step { color: var(--amber); display: block; margin-bottom: 0.75rem; }

/* ------------------------------------------------- what else is on the desk */

/*
  A player window and a couple of Desktop icons, over the wallpaper.

  Two things this earns at once, and neither is decoration. A window sitting on top is the only
  way to *show* that the picture is behind your windows rather than in one of them — the frame
  alone still read as "a picture of a turntable in a screen". And the window carries the same
  cover as the record's label, which is the product's whole claim in one glance: the sleeve on
  the platter is the record you actually have on.

  The window is deliberately generic — no wordmark, no brand green, no copy of anybody's layout.
  It is a music player because it has art, a title, an artist and a scrubber, and the caption
  below the frame is where the actual services get named.

  Positioned in cqw so it stays put relative to the screen it is drawn on, and kept to the
  left-hand third: `--label-x` is at 48.25%, and covering the one part of this picture that
  moves would be a strange way to advertise it.
*/
.desktop-win {
  position: absolute; z-index: 2;
  left: 4cqw;
  bottom: 7.5cqw;
  width: 30cqw;
  min-width: 118px;
  border-radius: 1.1cqw;
  overflow: hidden;
  background: rgba(28, 28, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 2cqw 4cqw -1.4cqw rgba(0, 0, 0, 0.72);
  color: #f2f2f4;
  font-family: var(--text);
  line-height: 1.25;
}
.desktop-win .win-bar {
  display: flex; align-items: center;
  gap: 0.5cqw;
  padding: 0.75cqw 0.9cqw;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.desktop-win .win-bar i {
  display: block;
  width: 0.85cqw; height: 0.85cqw;
  min-width: 4px; min-height: 4px;
  border-radius: 50%;
}
.desktop-win .win-bar i:nth-child(1) { background: #ff5f57; }
.desktop-win .win-bar i:nth-child(2) { background: #febc2e; }
.desktop-win .win-bar i:nth-child(3) { background: #28c840; }

.desktop-win .win-body { display: flex; gap: 1cqw; padding: 1cqw; align-items: center; }
.desktop-win .win-art {
  width: 7cqw; min-width: 30px;
  height: auto; aspect-ratio: 1;
  border-radius: 0.5cqw;
  flex: none;
}
.desktop-win .win-meta { min-width: 0; flex: 1; }
.desktop-win .win-meta b {
  display: block;
  font-size: 1.35cqw;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.desktop-win .win-meta span {
  display: block;
  font-size: 1.2cqw;
  color: rgba(242, 242, 244, 0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Two thirds through, which is where the tonearm on the platter behind it also is. */
.desktop-win .win-scrub {
  height: 0.42cqw; min-height: 2px;
  margin: 1cqw 0 0.55cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.desktop-win .win-scrub i {
  display: block; width: 63%; height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}
.desktop-win .win-time {
  display: flex; justify-content: space-between;
  font-size: 0.95cqw;
  color: rgba(242, 242, 244, 0.5);
  font-variant-numeric: tabular-nums;
}

/* Desktop icons, top right — the other half of "under your icons". */
.desktop-icons {
  position: absolute; z-index: 2;
  top: 4cqw; right: 2.4cqw;
  display: flex; flex-direction: column; align-items: center;
  gap: 2.2cqw;
}
.desktop-icons figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5cqw; }
.desktop-icons i {
  display: block;
  width: 4.2cqw; min-width: 20px;
  aspect-ratio: 1;
  border-radius: 0.7cqw;
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0.5cqw 1cqw -0.4cqw rgba(0, 0, 0, 0.5);
}
.desktop-icons figcaption {
  margin: 0;
  font-family: var(--text);
  font-size: 0.95cqw;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

/* On a small frame the icons are noise and the window's type falls under four pixels, so the
   icons go and the window takes the room they leave. */
@container (max-width: 520px) {
  .desktop-icons { display: none; }
  .desktop-win { width: 46cqw; }
  .desktop-win .win-meta b { font-size: 2cqw; }
  .desktop-win .win-meta span { font-size: 1.8cqw; }
  .desktop-win .win-time { font-size: 1.5cqw; }
}

/* The Field hero centres its copy, and that cascaded into the window — a player with its track
   title centred is the one detail that says "mock-up". */
.desktop-win { text-align: left; }

/* Translucent white over dark wood came out as two grey smudges. Desktop icons are opaque
   objects: a disk image and a folder, in the two colours macOS actually uses for them. */
.desktop-icons i { border: 0; box-shadow: 0 0.5cqw 1cqw -0.4cqw rgba(0, 0, 0, 0.55); }
.desktop-icons figure:nth-child(1) i {
  background: linear-gradient(155deg, #e9edf2, #b9c2cd 62%, #96a2b0);
  border-radius: 0.9cqw;
}
.desktop-icons figure:nth-child(2) i {
  background: linear-gradient(155deg, #7ec2f5, #3d9ae8 55%, #2b7fd0);
  border-radius: 0.7cqw;
}

/* ------------------------------------------------------------------- faq */

/* Two jobs: it answers what people ask before downloading, and it is the one part of this page
   eligible for a rich result — the FAQPage JSON-LD in index.html mirrors it exactly, so the two
   have to be edited together or the markup starts describing a page that does not exist. */
.faq {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  border-top: 1px solid var(--rule);
  max-width: 100rem;
  margin-inline: auto;
}

.faq > h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  color: var(--sun);
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  max-width: 30ch;
}

.faq dl {
  margin: 0;
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.faq dt {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: 1.125rem;
  color: var(--linen);
  margin-bottom: 0.5rem;
}

.faq dd { margin: 0; max-width: 46ch; }