/*
  ONA - site styles. The app's name itself lives in _build/site.json.

  Mobile first: the base rules are the phone (the Terms and Privacy links in
  the app open in Safari's sheet), and wider screens add columns on top.

  Values come from the app's design system (app/packages/design_system):
  tokens.dart, blob_field.dart, glass_panel.dart, gel_surface.dart. Where the
  web needs something the app doesn't have (long-form line height, blob sizes
  on a wide screen), it says so next to the rule.
*/

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Squashed.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-SquashedItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nothing You Could Do";
  src: url("/assets/fonts/NothingYouCouldDo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour */
  --ground: #EDE7F5;
  --ink: #241C33;
  --muted: #6E6383;
  --label: #8C857A;
  --pink-ink: #7A2148;
  --action: #C23E70;
  --paper-top: #FFFBF4;
  --paper-bottom: #F7ECDD;
  --hairline: rgb(110 99 131 / 0.2);

  /* Materials */
  --glass: rgb(255 255 255 / 0.55);
  --glass-strong: rgb(255 255 255 / 0.6);
  --e1: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --e2: 0 12px 26px -18px rgb(60 40 90 / 0.55);
  --e3: 0 16px 32px -14px rgb(60 40 90 / 0.7);
  --shadow-paper: 0 14px 26px -14px rgb(60 40 90 / 0.6);
  --gel-career: linear-gradient(180deg, #FFB2D3, #E0538A 58%, #C23E70);
  --gel-inset: inset 0 1px 1px rgb(255 255 255 / 0.7), inset 0 -2px 3px rgb(0 0 0 / 0.06);

  /* Radii */
  --r-sheet: 28px;
  --r-hero: 26px;
  --r-panel: 22px;
  --r-tile: 20px;
  --r-row: 16px;
  --r-chip: 14px;
  --r-photo: 12px;

  /* Motion: one curve everywhere */
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1);

  /* Type. The serif is the app's squashed cut; a stock fallback sets taller. */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Nothing You Could Do", "Bradley Hand", cursive;

  --gutter: clamp(20px, 6vw, 24px);
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--pink-ink);
  text-decoration-line: underline;
  text-decoration-color: rgb(194 62 112 / 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

a:hover {
  text-decoration-color: var(--action);
}

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

::selection {
  background: #FFB2D3;
  color: var(--ink);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: max(12px, env(safe-area-inset-top));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- The blob field ----------
   blob_field.dart: #EDE7F5 and three blurred radial blobs. The app places
   them on a 390 x 844 frame; here each keeps the same share of itself on
   screen at any width, and grows on wide screens so it still reads. */

.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ground);
}

.field::before,
.field::after,
.field i {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.field::before {
  --d: clamp(420px, 44vw, 760px);
  width: var(--d);
  left: 0;
  top: 0;
  translate: -28% -12%;
  background: radial-gradient(circle at 35% 35%, #FFB7D5, transparent 70%);
  filter: blur(calc(var(--d) * 0.0714));
}

.field i {
  --d: clamp(380px, 40vw, 690px);
  width: var(--d);
  right: 0;
  top: 26%;
  translate: 36% 0;
  background: radial-gradient(circle at 50% 50%, #9FE8F0, transparent 70%);
  filter: blur(calc(var(--d) * 0.0895));
}

.field::after {
  --d: clamp(400px, 42vw, 720px);
  width: var(--d);
  left: 0;
  bottom: 0;
  translate: -24% 25%;
  background: radial-gradient(circle at 50% 40%, #C9B6FF, transparent 70%);
  filter: blur(calc(var(--d) * 0.09));
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.wrap.narrow {
  max-width: 760px;
}

/* ---------- Header ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: 6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  box-shadow: var(--e2);
}

/* The ONA wordmark. The rest of the name joins it underneath once the header
   has room for it next to the nav. */
.brand-name {
  display: grid;
  gap: 4px;
}

.brand-name span {
  font: 400 28px/1 var(--serif);
  letter-spacing: 0.02em;
}

.brand-name small {
  display: none;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 440px) {
  .brand-name span {
    font-size: 22px;
  }

  .brand-name small {
    display: block;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--glass);
  box-shadow: var(--e1), var(--e2);
}

.nav .wide {
  display: none;
}

@media (min-width: 680px) {
  .nav .wide {
    display: inline-flex;
  }
}

/* ---------- Small parts ---------- */

.label {
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 680px) {
  .label {
    font-size: 13px;
  }
}

.glass {
  background: var(--glass);
  border-radius: var(--r-panel);
  box-shadow: var(--e1), var(--e2);
}

/* A gel ball: gel_surface.dart's `circle at 32% 26%` highlight. */
.gel-dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff, var(--l) 30%, var(--m) 78%, var(--d));
}

/* Each area's ramp. --s is the chip surface, halfway from light to mid, as
   AreaChip.surfaceOf has it; ink reads on all eight (6.6:1 to 13.1:1). */
.area-career { --l: #FFB2D3; --s: #F082AE; --m: #E0538A; --d: #C23E70; }
.area-health { --l: #CFF6F9; --s: #87DBE0; --m: #3FBFC7; --d: #1E7A80; }
.area-wealth { --l: #D6D8FA; --s: #B0B3F1; --m: #8A8FE8; --d: #4A4FA8; }
.area-relationships { --l: #FFCBB0; --s: #F89E7D; --m: #F0704A; --d: #A83D1F; }
.area-growth { --l: #D8F3D0; --s: #AADE8D; --m: #7BC94A; --d: #4C8A2A; }
.area-fun { --l: #F3F7B8; --s: #E4EE7A; --m: #D6E63B; --d: #A3B520; }
.area-self-image { --l: #E5D4FA; --s: #CDA8F1; --m: #B57CE8; --d: #7D3FB0; }
.area-home { --l: #CFE3F5; --s: #9FC5E9; --m: #6FA8DC; --d: #3A6E9E; }

/* The primary button: a gel fill in the Career ramp, full width on a phone. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--gel-career);
  box-shadow: var(--gel-inset), 0 18px 40px -12px rgb(194 62 112 / 0.5);
  color: #fff;
  font: 600 18px/1 var(--sans);
  text-decoration: none;
  text-shadow: 0 1px 1px rgb(122 33 72 / 0.35);
  transition: scale 260ms var(--ease);
}

.btn:hover {
  color: #fff;
}

.btn:active {
  scale: 0.98;
}

@media (min-width: 680px) {
  .btn {
    display: inline-flex;
    width: auto;
  }
}

/* An in-app path, drawn as the chips it names. */
.path {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  vertical-align: baseline;
}

.path span {
  position: relative;
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-chip);
  background: rgb(255 255 255 / 0.7);
  box-shadow: var(--e1), 0 6px 14px -10px rgb(60 40 90 / 0.55);
  font: 600 14px/1.5 var(--sans);
  color: var(--ink);
  white-space: nowrap;
}

.path span + span {
  margin-left: 18px;
}

.path span + span::before {
  content: "\2192";
  position: absolute;
  left: -19px;
  width: 18px;
  text-align: center;
  color: var(--muted);
  font-weight: 400;
}

/* ---------- Landing ---------- */

.hero {
  display: grid;
  gap: 32px;
  padding-block: 18px 8px;
}

.hero-copy .label {
  color: var(--pink-ink);
}

.hero h1 {
  margin-top: 14px;
  font-size: clamp(42px, 12vw, 76px);
  line-height: 1.02;
}

.hero h1 em {
  font-style: italic;
}

.dot {
  color: var(--action);
}

.lede {
  margin-top: 18px;
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.45;
}

/* Pick one: a radio group drawn as the app's area chips. */
.areas {
  min-width: 0;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.areas legend {
  margin-bottom: 10px;
  padding: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips label {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--e1), var(--e2);
  color: var(--ink);
  font: 500 12px/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: translate 260ms var(--ease);
}

/* The chip's colour lives on a layer, so picking fades it in. */
.chips label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--s);
  box-shadow: var(--gel-inset), 0 10px 20px -10px var(--d);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

/* The radios sit fixed in the viewport, so tapping a slice while the chips are
   scrolled away doesn't pull the page back up to them. Their order in the
   page is unchanged, so arrow keys and screen readers work as before. */
.chips input {
  position: fixed;
  top: 0;
  left: 0;
}

/* A slim chip with a taller finger target: 4px more above and below, inside
   the 8px gap between rows. */
.chips label::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

.chips .gel-dot {
  transition: background 300ms var(--ease);
}

.chips input:checked + label {
  animation: chip-pop 420ms var(--ease);
}

.chips input:checked + label::before {
  opacity: 1;
}

.chips input:checked + label .gel-dot {
  background: radial-gradient(circle at 32% 26%, #fff, #fff 45%, rgb(255 255 255 / 0.7));
}

.chips input:focus-visible + label {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

@media (hover: hover) {
  .chips label:hover {
    translate: 0 -1px;
  }
}

@keyframes chip-pop {
  45% {
    scale: 1.06;
  }
}

.art {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding-bottom: 12px;
  container-type: inline-size;
}

.wheel {
  width: 88%;
  height: auto;
  margin-left: auto;
  overflow: visible;
}

.wheel .ring {
  fill: none;
  stroke: rgb(255 255 255 / 0.75);
  stroke-width: 1;
}

.wheel .ring.outer {
  stroke: rgb(110 99 131 / 0.35);
  stroke-dasharray: 3 6;
}

.wheel .spokes {
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 1;
}

.wheel .w {
  fill: var(--m);
  fill-opacity: 0.42;
  stroke: var(--m);
  stroke-opacity: 0.55;
  stroke-width: 1;
}

/* The picked slice slides out along its own bisector (--ox, --oy) while its
   gel fades in. --on is 1 for the picked area and 0 for the rest. */
.wheel .slice {
  --on: 0;
  --peek: 0;
  translate: calc(var(--ox) * min(1, var(--on) + var(--peek))) calc(var(--oy) * min(1, var(--on) + var(--peek)));
  transition: translate 500ms var(--ease);
}

.wheel .w {
  transition: fill-opacity 300ms var(--ease);
}

/* Each slice is a tap target too: a label for the same radio as its chip,
   clipped to the whole 45-degree sector out to the dashed ring. */
.wheel .hit label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .wheel .slice:hover {
    --peek: 0.35;
  }

  .wheel .slice:hover .w {
    fill-opacity: 0.6;
  }
}

.wheel .gel {
  opacity: var(--on);
  stroke: rgb(255 255 255 / 0.85);
  stroke-width: 1.5;
  filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--d) 35%, transparent));
  transition: opacity 400ms var(--ease);
}

.wheel .hub {
  fill: rgb(255 255 255 / 0.6);
  stroke: rgb(255 255 255 / 0.95);
}

.wheel .hub-n {
  font: italic 400 44px var(--serif);
  fill: var(--ink);
}

.wheel .hub-l {
  font: 500 15px var(--sans);
  letter-spacing: 0.1em;
  fill: var(--muted);
}

/* Paper: anything she keeps. Always tilted; a flat paper card is a bug. */
.paper {
  position: relative;
  background: linear-gradient(180deg, var(--paper-top), var(--paper-bottom));
  border-radius: var(--r-photo);
  box-shadow: var(--shadow-paper);
}

.paper > * {
  position: relative;
  z-index: 1;
}

.paper::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pinned over the wheel's lower left. Its place in the flow (-10%) clears
   every slice, and is where it stays without container queries; --lift then
   raises it by a share of the artwork's width. The negative bottom margin
   gives back the space the lift frees. */
.chapter {
  width: 68%;
  max-width: 290px;
  margin-top: -10%;
  margin-bottom: -14%;
  padding: 22px 18px 18px;
  rotate: var(--tilt, -3deg);
  translate: 0 calc(var(--lift, 18) * -1cqw);
  transition: rotate 600ms var(--ease), translate 600ms var(--ease);
}

.chapter .pin {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  translate: -50% 0;
  background: radial-gradient(circle at 32% 26%, #fff, var(--pick-l) 30%, var(--pick-m) 78%, var(--pick-d));
  box-shadow: 0 6px 10px -4px color-mix(in srgb, var(--pick-d) 55%, transparent);
}

.chapter .label {
  color: var(--label);
}

/* Eight notes share one cell, so the card keeps the tallest one's height and
   never jumps when the pick changes. */
.notes {
  display: grid;
}

.note {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  --on: 0;
  opacity: var(--on);
  translate: 0 calc((1 - var(--on)) * 8px);
  visibility: hidden;
  transition: opacity 200ms var(--ease), translate 300ms var(--ease), visibility 0s linear 200ms;
}

.note .tag {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--s);
  box-shadow: var(--gel-inset);
  color: var(--ink);
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The hand is hers alone: Nothing You Could Do at the app's 0.82 scale. */
.hand {
  margin-top: 10px;
  font-family: var(--hand);
  font-size: calc(26px * 0.82);
  line-height: 1.3;
  color: var(--ink);
}

.chapter hr {
  height: 1px;
  margin: 14px 0 12px;
  border: 0;
  background: rgb(140 133 122 / 0.3);
}

.chapter .thing {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.35;
}

/* A short goal leaves its room under the handwriting, not at the foot of the
   card: the goal sits at the top, today's one thing on the bottom line. */
.note .hand {
  margin-bottom: 14px;
}

.note hr {
  align-self: stretch;
  margin-top: auto;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 56px;
    padding-block: 56px 24px;
  }

  .art {
    max-width: 480px;
  }
}

/* ---------- Picking an area ----------
   No script: the chips are radios, and :has() carries the pick to the wheel
   and the note. Health is the default, and it's what a browser without
   :has() keeps. The pick's colours are registered so the pin can blend
   between them instead of jumping. */

@property --pick-l {
  syntax: "<color>";
  inherits: true;
  initial-value: #CFF6F9;
}

@property --pick-m {
  syntax: "<color>";
  inherits: true;
  initial-value: #3FBFC7;
}

@property --pick-d {
  syntax: "<color>";
  inherits: true;
  initial-value: #1E7A80;
}

.hero {
  --pick-l: #CFF6F9;
  --pick-m: #3FBFC7;
  --pick-d: #1E7A80;
  --tilt: -3deg;
  --lift: 18;
  transition: --pick-l 500ms var(--ease), --pick-m 500ms var(--ease), --pick-d 500ms var(--ease);
}

.slice.area-health,
.note.area-health {
  --on: 1;
  visibility: visible;
}

/* Paper is always tilted, 0.6 to 4 degrees; each area leans its own way.
   --lift is how far the note rises over the wheel, in % of the artwork's
   width. It stays high for every area; only Growth, which sits right under
   the note, dips a little so its slice is covered by half at most. */
.hero:has(#pick-career:checked) { --pick-l: #FFB2D3; --pick-m: #E0538A; --pick-d: #C23E70; --tilt: -2.2deg; --lift: 18; }
.hero:has(#pick-health:checked) { --pick-l: #CFF6F9; --pick-m: #3FBFC7; --pick-d: #1E7A80; --tilt: -3deg; --lift: 18; }
.hero:has(#pick-wealth:checked) { --pick-l: #D6D8FA; --pick-m: #8A8FE8; --pick-d: #4A4FA8; --tilt: -1.6deg; --lift: 18; }
.hero:has(#pick-relationships:checked) { --pick-l: #FFCBB0; --pick-m: #F0704A; --pick-d: #A83D1F; --tilt: -3.4deg; --lift: 18; }
.hero:has(#pick-growth:checked) { --pick-l: #D8F3D0; --pick-m: #7BC94A; --pick-d: #4C8A2A; --tilt: -2.6deg; --lift: 12; }
.hero:has(#pick-fun:checked) { --pick-l: #F3F7B8; --pick-m: #D6E63B; --pick-d: #A3B520; --tilt: -1.2deg; --lift: 18; }
.hero:has(#pick-self-image:checked) { --pick-l: #E5D4FA; --pick-m: #B57CE8; --pick-d: #7D3FB0; --tilt: -2.8deg; --lift: 18; }
.hero:has(#pick-home:checked) { --pick-l: #CFE3F5; --pick-m: #6FA8DC; --pick-d: #3A6E9E; --tilt: -1.8deg; --lift: 18; }

/* Once a pick is known, every slice and note starts from off... */
.hero:has(.chips input:checked) :is(.slice, .note) {
  --on: 0;
}

.hero:has(.chips input:checked) .note {
  visibility: hidden;
  transition: opacity 200ms var(--ease), translate 300ms var(--ease), visibility 0s linear 200ms;
}

/* ...and the picked area comes on. */
.hero:has(#pick-career:checked) :is(.slice, .note).area-career,
.hero:has(#pick-health:checked) :is(.slice, .note).area-health,
.hero:has(#pick-wealth:checked) :is(.slice, .note).area-wealth,
.hero:has(#pick-relationships:checked) :is(.slice, .note).area-relationships,
.hero:has(#pick-growth:checked) :is(.slice, .note).area-growth,
.hero:has(#pick-fun:checked) :is(.slice, .note).area-fun,
.hero:has(#pick-self-image:checked) :is(.slice, .note).area-self-image,
.hero:has(#pick-home:checked) :is(.slice, .note).area-home {
  --on: 1;
}

/* The new note waits for the old one to leave, then rises into place. */
.hero:has(#pick-career:checked) .note.area-career,
.hero:has(#pick-health:checked) .note.area-health,
.hero:has(#pick-wealth:checked) .note.area-wealth,
.hero:has(#pick-relationships:checked) .note.area-relationships,
.hero:has(#pick-growth:checked) .note.area-growth,
.hero:has(#pick-fun:checked) .note.area-fun,
.hero:has(#pick-self-image:checked) .note.area-self-image,
.hero:has(#pick-home:checked) .note.area-home {
  visibility: visible;
  transition: opacity 360ms var(--ease) 160ms, translate 500ms var(--ease) 160ms, visibility 0s linear 0s;
}

/* Support */

.support {
  margin-top: 28px;
  padding: 26px 20px 22px;
  scroll-margin-top: 16px;
}

@media (min-width: 900px) {
  .support {
    margin-top: 48px;
  }
}

.support h2 {
  margin-top: 10px;
  font-size: clamp(32px, 8.4vw, 52px);
  line-height: 1.08;
}

.support p {
  margin-top: 12px;
  max-width: 54ch;
}

.support .btn {
  margin-top: 22px;
}

.support .email {
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted);
}

@media (min-width: 680px) {
  .support {
    padding: 40px 44px 40px;
  }
}

.tiles {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.tile {
  padding: 22px 20px;
  border-radius: var(--r-tile);
}

.tile h3 {
  font-size: 22px;
  line-height: 1.2;
}

.tile p {
  margin-top: 8px;
}

@media (min-width: 820px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .tile {
    padding: 26px 24px;
  }
}

/* FAQ: native <details>, so it opens without a script. The questions and
   answers are built from _build/facts.json, the same text as the FAQPage data. */

.faq {
  margin-top: 12px;
  padding: 26px 20px 10px;
  scroll-margin-top: 16px;
}

.faq h2 {
  margin-top: 10px;
  font-size: clamp(32px, 8.4vw, 52px);
  line-height: 1.08;
}

.faq-list {
  margin-top: 14px;
}

.faq-item {
  border-top: 1px solid var(--hairline);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font: 400 21px/1.25 var(--serif);
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
  transition: rotate 260ms var(--ease), margin 260ms var(--ease);
}

.faq-item[open] summary::after {
  rotate: 225deg;
  margin-top: 4px;
}

.faq-item p {
  max-width: 60ch;
  padding-bottom: 18px;
}

@media (min-width: 680px) {
  .faq {
    padding: 40px 44px 24px;
  }

  .faq-item summary {
    font-size: 24px;
  }
}

/* Store links: built into the hero once facts.json says the app is live. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.store {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: var(--e2);
  color: #fff;
  font: 600 16px/1 var(--sans);
  text-decoration: none;
}

.store:hover {
  color: #fff;
}

/* ---------- Document pages: an issue of the magazine ---------- */

.mast {
  padding-block: 22px 18px;
  border-bottom: 1px solid var(--hairline);
}

.mast-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.mast h1 {
  font-size: clamp(46px, 13.4vw, 76px);
  line-height: 0.96;
  text-transform: uppercase;
}

.issue {
  flex: none;
  padding-bottom: 4px;
  text-align: right;
}

.issue time {
  display: block;
  margin-top: 2px;
  color: var(--ink);
}

.intro {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.45;
  max-width: 40ch;
}

.short {
  margin-top: 24px;
  padding: 22px 20px 22px;
}

.short ul {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.short li {
  position: relative;
  padding-left: 24px;
}

.short li .gel-dot {
  position: absolute;
  left: 0;
  top: 0.45em;
}

@media (min-width: 680px) {
  .short {
    padding: 30px 36px;
  }
}

/* Contents: folded on a phone, a sidebar on a wide screen. */

.contents {
  margin-top: 16px;
}

.contents summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--r-row);
  background: var(--glass);
  box-shadow: var(--e1), var(--e2);
  cursor: pointer;
  list-style: none;
}

.contents summary::-webkit-details-marker {
  display: none;
}

.contents summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
  transition: rotate 260ms var(--ease), margin 260ms var(--ease);
}

.contents[open] summary::after {
  rotate: 225deg;
  margin-top: 4px;
}

.toc {
  margin: 8px 0 0;
  padding: 0 4px;
  list-style: none;
}

.toc li {
  border-bottom: 1px solid var(--hairline);
}

.toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 46px;
  padding: 12px 2px 10px;
  color: var(--ink);
  font: 400 19px/1.2 var(--serif);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.toc a:hover {
  color: var(--pink-ink);
}

/* The italic serif counts it. */
.n {
  flex: none;
  min-width: 1.5em;
  font-family: var(--serif);
  font-style: italic;
  color: var(--action);
}

.toc .n {
  font-size: 17px;
}

.side {
  display: none;
}

.col {
  max-width: 760px;
}

.doc {
  margin-top: 8px;
}

.doc section {
  padding-top: 30px;
  scroll-margin-top: 12px;
}

.doc section + section {
  margin-top: 30px;
  border-top: 1px solid var(--hairline);
}

.doc h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(27px, 7vw, 32px);
  line-height: 1.15;
}

.doc h2 .n {
  font-size: 0.72em;
}

.doc h3 {
  margin-top: 22px;
  font-size: 22px;
  line-height: 1.2;
}

.doc p {
  margin-top: 12px;
}

.doc ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.doc ul li {
  position: relative;
  padding-left: 20px;
}

.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  opacity: 0.8;
}

.doc strong {
  font-weight: 600;
}

@media (min-width: 680px) {
  .doc {
    margin-top: 24px;
    padding: 12px 44px 48px;
    background: var(--glass);
    border-radius: var(--r-hero);
    box-shadow: var(--e1), var(--e2);
  }

  .doc section {
    padding-top: 36px;
  }

  .doc p,
  .doc li {
    font-size: 17px;
  }
}

@media (min-width: 1040px) {
  .reading {
    display: grid;
    grid-template-columns: 240px minmax(0, 760px);
    gap: 48px;
    align-items: start;
  }

  .contents {
    display: none;
  }

  .side {
    display: block;
    position: sticky;
    top: 24px;
    margin-top: 24px;
  }

  .side .toc a {
    min-height: 38px;
    padding: 8px 0 7px;
    font-size: 17px;
  }

  .side .toc .n {
    font-size: 15px;
  }
}

/* Steps on the delete page */

.steps {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.step {
  padding: 24px 20px 22px;
  border-radius: var(--r-panel);
}

.step h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(27px, 7vw, 32px);
  line-height: 1.15;
}

.step h2 .n {
  font-size: 0.72em;
}

.step p,
.step ul {
  margin-top: 12px;
}

.step .path {
  margin-top: 14px;
}

.step ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.step ul li {
  position: relative;
  padding-left: 20px;
}

.step ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  opacity: 0.8;
}

.split {
  display: grid;
  gap: 18px;
  margin-top: 6px;
}

.split h3 {
  font-size: 22px;
  line-height: 1.2;
  margin-top: 10px;
}

@media (min-width: 680px) {
  .step {
    padding: 34px 40px 34px;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ---------- Not found ---------- */

.lost {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding-block: 12vh 40px;
}

.lost .big {
  font: italic 400 clamp(96px, 30vw, 180px)/0.9 var(--serif);
  color: var(--action);
  letter-spacing: 0.02em;
}

.lost h1 {
  font-size: clamp(34px, 9vw, 52px);
  line-height: 1.08;
}

.lost .btn {
  margin-top: 12px;
}

/* ---------- Footer ---------- */

.foot {
  margin-top: 56px;
  padding-top: 26px;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 14px;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.foot nav a:hover {
  color: var(--pink-ink);
}

.foot small {
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Motion: things arrive, they don't loop ---------- */

@keyframes arrive {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

@keyframes grow {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.rise {
  animation: arrive 500ms var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.wheel .slice {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: grow 600ms var(--ease) backwards;
  animation-delay: calc(240ms + var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .wheel .slice {
    animation: fade 120ms linear backwards;
    animation-delay: 0ms;
  }

  .btn,
  .contents summary::after,
  .faq-item summary::after,
  .chips label,
  .chapter,
  .wheel .slice {
    transition: none;
  }

  .chips input:checked + label {
    animation: none;
  }

  .wheel .slice:hover {
    --peek: 0;
  }

  /* Picking still cross-fades, briefly. Nothing slides or tilts. */
  .note,
  .wheel .gel,
  .chips label::before {
    transition-duration: 120ms !important;
    transition-delay: 0s !important;
  }

  .note {
    translate: none !important;
  }
}