/* ───────────────────────────────────────────────────────────────────────────
   Rose — site styles.

   The palette is the app's own (Rose/Theme.swift): a charcoal page lit toward
   the centre, parchment ink, and the nine instrument hues running from bass red
   to synth indigo. The page is laid out in polar terms because the app is —
   sections are marked by their angle, rules are arcs, and scroll is one turn.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Ground — Theme.swift bgHi / bg / bgLo, pushed a shade deeper for the page. */
  --ink-0: #0B0B0D;
  --ink-1: #121214;
  --ink-2: #1E1F23;
  --ink-3: #2C2D31;
  --surface: #303237;
  --edge: #474A51;

  /* Parchment ink, stepped down for hierarchy. */
  --t1: #E7E4D4;
  --t2: rgba(231, 228, 212, .72);
  --t3: rgba(231, 228, 212, .50);
  --t4: rgba(231, 228, 212, .32);
  --hair: rgba(231, 228, 212, .13);
  --hair-soft: rgba(231, 228, 212, .07);

  --amber: #E8932F;
  --teal: #4FA39E;
  --playhead: #4FB4FF;

  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --body: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 5vw, 60px);
  --wide: 1180px;
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-0);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(44, 45, 49, .85) 0%, rgba(18, 18, 20, 0) 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(31, 33, 38, .7) 0%, rgba(11, 11, 13, 0) 60%);
  background-attachment: fixed;
  color: var(--t1);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* The app draws a fine grain over its background; so does the page. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(232, 147, 47, .3); }

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 40;
  padding: 10px 16px;
  background: var(--surface);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  text-decoration: none;
}
.skip:focus { left: 16px; }

/* ── Type ────────────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 500; }

h1 {
  font-size: clamp(2rem, 5vw, 4.05rem);
  font-variation-settings: "opsz" 88;
  line-height: .97;
  letter-spacing: -.018em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.95rem, 4vw, 3.1rem);
  font-variation-settings: "opsz" 64;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h3 {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
}

p { margin: 0; }

.eyebrow,
.plate-mark,
.zone-r,
.pill,
.seam,
.dial span,
.foot-deg {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .625rem;
}

.lead {
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  line-height: 1.62;
  color: var(--t2);
}

.note {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--t3);
  max-width: 48ch;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--gut);
  background: linear-gradient(to bottom, rgba(11, 11, 13, .82), rgba(11, 11, 13, 0));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.22rem;
  font-variation-settings: "opsz" 20;
  letter-spacing: .01em;
}
.mark img { width: 34px; height: 34px; border-radius: 23%; }

.topnav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: .87rem;
  color: var(--t3);
}
.topnav a { text-decoration: none; transition: color .2s; }
.topnav a:hover { color: var(--t1); }
.topnav-cta { color: var(--amber); }
@media (max-width: 720px) {
  .topnav a:not(.topnav-cta) { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vh, 20px);
  padding: 72px var(--gut) 26px;
  text-align: center;
}

.hero-head { display: grid; gap: 10px; justify-items: center; flex: 0 0 auto; }
.hero-head .eyebrow { color: var(--t4); }
.hero-head .lead { max-width: 58ch; font-size: clamp(.95rem, 1vw, 1.04rem); }

/* The portrait. Canvas is inset so the engraved bezel legend sits outside it. */
.portrait {
  position: relative;
  margin: 0;
  container-type: inline-size;
  aspect-ratio: 1;
  flex: 1 1 auto;
  width: auto;
  min-height: 300px;
  max-height: min(90vw, 800px);
}

@media (max-width: 780px), (max-height: 620px) {
  .portrait { flex: 0 0 auto; width: min(92vw, 520px); height: auto; max-height: none; }
}

.portrait canvas {
  position: absolute;
  inset: 5.5%;
  width: 89%;
  height: 89%;
}

.bezel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bezel-text {
  fill: var(--t4);
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: 3px;
  text-anchor: middle;
}

.disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26%;
  display: grid;
  gap: .28em;
  text-align: center;
  pointer-events: none;
}
.disc-name {
  font-family: var(--display);
  font-variation-settings: "opsz" 40;
  font-size: clamp(19px, 6cqi, 44px);
  line-height: 1;
  letter-spacing: .005em;
}
.disc-meta {
  font-family: var(--mono);
  font-size: clamp(7px, 1.7cqi, 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  transition: color .35s;
}

.seam { position: absolute; bottom: 1%; color: var(--t4); font-size: .5rem; }
.seam-start { right: 53.5%; }
.seam-end { left: 53.5%; }

/* The chips are built by script; without them the label has nothing to label. */
.legend-row:has(.legend:empty) { display: none; }

.legend-row {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}
.legend-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .56rem;
  color: var(--t4);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(48, 50, 55, .34);
  color: var(--t2);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--t3));
  box-shadow: 0 0 0 0 var(--c);
  transition: box-shadow .25s;
}
.chip:hover, .chip:focus-visible { color: var(--t1); border-color: var(--t4); }
.chip[aria-pressed="true"] {
  color: var(--t1);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 11%, transparent);
}
.chip[aria-pressed="true"]::before { box-shadow: 0 0 11px 1px var(--c); }

.hero-note {
  flex: 0 0 auto;
  max-width: 54ch;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--t4);
}

/* Wide screens: a centred stack is height-bound, so the ring stays small. Two
   columns let it take the full height of the fold instead. */
@media (min-width: 1150px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    /* The outer 1fr rows absorb the slack the tall ring leaves, so the copy
       stays a tight block instead of being spread down the column. */
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(30px, 4vw, 68px);
    row-gap: 0;
    padding: 96px var(--gut) 48px;
    text-align: left;
  }
  .hero-head { grid-area: 2 / 1; justify-items: start; }
  .hero-head .lead { max-width: 42ch; }
  .legend-row { grid-area: 3 / 1; justify-content: flex-start; margin-top: 26px; }
  .hero-note { grid-area: 4 / 1; margin-top: 16px; }
  .portrait {
    grid-area: 1 / 2 / 6 / 3;
    align-self: center;
    justify-self: center;
    width: min(100%, 76vh);
    height: auto;
    max-height: none;
  }
}

/* ── Plates ──────────────────────────────────────────────────────────────── */

.plate {
  position: relative;
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(72px, 11vh, 132px) var(--gut);
  display: grid;
  gap: 26px;
}

/* Rules are arcs, not lines — a very shallow dome across the page. */
.plate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 210%;
  aspect-ratio: 8 / 1;
  transform: translateX(-50%);
  border-top: 1px solid var(--hair-soft);
  border-radius: 50%;
  pointer-events: none;
}

@media (min-width: 1000px) {
  .plate { grid-template-columns: 128px minmax(0, 1fr); column-gap: 52px; }
}

.plate-mark {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--t4);
}
.plate-mark .deg { color: var(--amber); }

@media (min-width: 1000px) {
  .plate-mark {
    position: sticky;
    top: 92px;
    align-self: start;
    flex-direction: column;
    gap: 6px;
    line-height: 1.5;
  }
}

.plate-body { display: grid; gap: 24px; align-content: start; }

/* ── 060° Read the ring ──────────────────────────────────────────────────── */

.shots {
  display: grid;
  gap: clamp(22px, 3.5vw, 44px);
  justify-items: center;
  margin: 10px 0 6px;
}
@media (min-width: 640px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.shot { display: grid; gap: 14px; max-width: 330px; }
.shot img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--hair);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .6);
}
.shot figcaption { font-size: .86rem; line-height: 1.55; color: var(--t3); }
.shot b { color: var(--t1); font-weight: 600; }

.atlas {
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  margin-top: 14px;
  align-items: center;
}
@media (min-width: 860px) {
  .atlas { grid-template-columns: minmax(280px, 42%) minmax(0, 1fr); }
}

.atlas-fig { justify-self: center; width: 100%; max-width: 420px; }
.schematic { width: 100%; height: auto; display: block; }

.schematic .zone { transition: opacity .3s; }
.schematic.hl .zone { opacity: .16; }
.schematic.hl .zone.on { opacity: 1; }

.zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }

.zones li {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border-radius: 3px;
  border-left: 1px solid var(--hair);
  transition: background .25s, border-color .25s;
  cursor: default;
}
.zones li:hover, .zones li:focus-within {
  background: rgba(48, 50, 55, .32);
  border-left-color: var(--amber);
}
.zones .zone-r { color: var(--t4); }
.note--wide { max-width: 68ch; }
.zones p { color: var(--t3); font-size: .9rem; line-height: 1.55; max-width: 46ch; }

/* ── 120° Colour ─────────────────────────────────────────────────────────── */

.wheel-wrap {
  margin-top: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
/* Nine labels round an arc need room; below that the plate scrolls, not the page. */
.wheel { width: 100%; min-width: 620px; height: auto; display: block; overflow: visible; }

/* ── 180° On device ──────────────────────────────────────────────────────── */

.measures {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hair-soft);
  border-block: 1px solid var(--hair-soft);
}
@media (min-width: 700px) { .measures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .measures { grid-template-columns: repeat(4, 1fr); } }

.measures li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 22px 30px;
  background: var(--ink-0);
}
.measures p { color: var(--t3); font-size: .88rem; line-height: 1.55; }
.glyph { width: 42px; height: 42px; margin-bottom: 4px; }

/* ── 240° In your hands ──────────────────────────────────────────────────── */

.uses { display: grid; gap: 1px; margin-top: 14px; background: var(--hair-soft); }
@media (min-width: 820px) { .uses { grid-template-columns: repeat(3, 1fr); } }

.use {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 26px 32px;
  background: var(--ink-0);
}
.use p { color: var(--t3); font-size: .92rem; line-height: 1.58; }

.use--wide { grid-column: 1 / -1; }
@media (min-width: 820px) {
  .use--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: 40px 26px;
  }
}
.use-text { display: grid; gap: 10px; align-content: center; }

.specimen {
  width: 100%;
  max-width: 400px;
  justify-self: center;
  filter: drop-shadow(0 0 60px rgba(79, 180, 255, .12));
}

.minis { display: flex; gap: 10px; margin-top: 8px; }
.minis canvas { width: 76px; height: 76px; border-radius: 50%; }

/* ── 300° Get Rose ───────────────────────────────────────────────────────── */

.getcard {
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
  justify-items: center;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 52px);
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(48, 50, 55, .45), rgba(18, 18, 20, .3));
}
@media (min-width: 700px) {
  .getcard { grid-template-columns: auto minmax(0, 1fr); text-align: left; justify-items: start; }
}

.getcard-icon {
  width: clamp(120px, 17vw, 172px);
  height: auto;
  border-radius: 23%;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
}
.getcard-text { display: grid; gap: 14px; justify-items: inherit; }

.spec {
  display: grid;
  gap: 1px 0;
  margin: 4px 0 0;
  max-width: 30ch;
  width: 100%;
  border-top: 1px solid var(--hair);
}
.spec div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.spec dt {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t4);
}
.spec dd { margin: 0; font-size: .86rem; color: var(--t2); }

.pill {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--t3);
  background: rgba(11, 11, 13, .5);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: baseline;
  max-width: var(--wide);
  margin-inline: auto;
  padding: 40px var(--gut) 60px;
  color: var(--t4);
  font-size: .84rem;
}
.foot-deg { color: var(--t4); }

/* ── Scroll dial: the page itself is one turn ────────────────────────────── */

.dial {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t4);
  pointer-events: none;
}
.dial svg { width: 44px; height: 44px; }
.dial-ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.dial-arc { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-linecap: round; }
.dial-dot { fill: var(--amber); }
@media (max-width: 900px) { .dial { display: none; } }

/* ── Reveal on scroll ────────────────────────────────────────────────────── */

/* Gated on .js: with scripting off nothing would ever add .in, and the page
   would read as blank. */
.js .plate-body, .js .plate-mark {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.plate.in .plate-body, .plate.in .plate-mark { opacity: 1; transform: none; }
.plate.in .plate-body { transition-delay: .06s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .plate-body, .js .plate-mark { opacity: 1; transform: none; }
}