/* The home page: an argument first, the product second.
 *
 * Built on median.css (the app's material). Every section has its own
 * composition on purpose; a page made of one repeated block reads as generated.
 * Motion is spent on three moments only: the statement lighting line by line,
 * the morning drawing itself along its rail, and the record filling in. */

/* ── Navigation ─────────────────────────────────────────────────────────── */
/* Sticky, and deliberately cheap to scroll. It used to blur and mask the page
 * behind it; on iOS Safari a backdrop-filter plus a mask over the fixed ground
 * and grain layers repainted every frame and made the bar jitter. The ground
 * under it is near-black, so a plain fading gradient looks the same. The bar
 * gets its own GPU layer so it moves with the scroll, not after it. */
.nav { position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
  transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nav .frame { display: flex; align-items: center; height: 76px; gap: 12px; }
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 104px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.9) 58%, rgba(5,5,5,0) 100%);
}
.nav .mark { width: 20px; height: 20px; opacity: 0.9; }
.nav .word { font-weight: 500; font-size: 16px; letter-spacing: -0.2px; }
.nav .spacer { flex: 1; }
.nav .soon { color: var(--tertiary); font-size: 13px; }

/* ── The phone ──────────────────────────────────────────────────────────── */
.device {
  position: relative; display: block;
  width: var(--w, 320px); aspect-ratio: 413 / 872;
  border-radius: 15.74% / 7.45%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.5), 0 24px 40px -18px rgba(0,0,0,0.85),
              0 60px 120px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04);
}
.device img { display: block; width: 100%; height: 100%; border-radius: inherit; }
/* No side buttons: a generic phone may not carry details unique to Apple
 * products (Apple marketing guidelines), and volume and side controls are named
 * among them. */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero .frame { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 32px;
  min-height: min(calc(100svh - 76px), 900px); padding-top: 24px; padding-bottom: 88px; }
.hero h1 { margin: 0; font-size: clamp(46px, 5.1vw, 78px); max-width: 12ch; }
.hero .lead { margin: 28px 0 0; max-width: 30ch; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; font-weight: 500; color: rgba(242,242,242,0.72); }
.cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; height: 52px; padding: 0 22px 0 18px;
  border-radius: 999px; background: var(--primary); color: #0a0a0a; font-weight: 500; font-size: 15px; }
.cta img { width: 16px; height: 16px; filter: invert(1); opacity: 0.85; }
.stage { position: relative; height: min(760px, 88svh); perspective: 2200px; }
.stage::before { content: ""; position: absolute; left: 8%; right: -10%; top: 6%; bottom: 10%;
  background: radial-gradient(closest-side, rgba(var(--cool),0.16), rgba(var(--cool),0.05) 55%, transparent); filter: blur(8px); }
.stage .device { position: absolute; }
.stage .back  { --w: min(300px, 26vw); left: 4%;  top: 12%; transform: rotateY(18deg) rotateZ(-4deg) translateZ(-120px); opacity: 0.92; }
.stage .front { --w: min(340px, 29vw); right: 2%; top: 3%;  transform: rotateY(-14deg) rotateX(4deg) rotateZ(3deg); }

/* ── Shared type for the argument ───────────────────────────────────────── */
.kicker { display: block; margin-bottom: 22px; }
.big { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.06; font-weight: 500; letter-spacing: -0.028em; margin: 0; }
.prose { color: var(--secondary); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; max-width: 36ch; margin: 28px 0 0; }
.source { color: var(--tertiary); font-size: 12px; line-height: 18px; }
.source a { color: var(--tertiary); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.18); text-underline-offset: 3px; }
.source a:hover { color: var(--secondary); }

/* ── 1. The problem: one large sentence, and a fact set off to its side ─── */
.problem { padding: clamp(110px, 18vh, 200px) 0 clamp(40px, 6vh, 80px); }
.problem .frame { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; }
.problem .say { grid-column: 1 / span 9; }
.problem .say .big { max-width: 17ch; }
.problem .fact { grid-column: 9 / span 4; margin-top: clamp(40px, 6vh, 72px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.1); }
.problem .fact .figure { font-size: clamp(44px, 4.4vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -0.03em; display: block; }
.problem .fact p { margin: 14px 0 12px; color: var(--secondary); font-size: 15px; line-height: 23px; }

/* ── 2. The statement: lines that light as they reach the middle ────────── */
.statement-block { position: relative; padding: clamp(40px, 8vh, 90px) 0 clamp(120px, 18vh, 200px); overflow: hidden; }
.statement-block .field { position: absolute; right: -8vw; top: 4%; width: min(52vw, 760px); height: 92%;
  background: center / cover no-repeat url("img/fields/field-clarity.jpg"); opacity: 0.5;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%); }
/* The width lives on each line, so ch is measured in the line's own large
 * type. On the container it was 17px ch, and broke after every word. */
.statement-block .lines { position: relative; margin-left: 8.33%; }
.statement-block .line { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 500;
  margin: 0 0 clamp(26px, 4.5vh, 44px); color: var(--primary); max-width: 22ch; }
.statement-block .cite { margin-left: 8.33%; margin-top: 44px; max-width: 46ch; }

/* ── 3. The idea: words, and a phone rising out of the section's floor ─── */
.idea { position: relative; padding-top: clamp(110px, 16vh, 180px); }
.idea .frame { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.idea .words { padding-bottom: clamp(100px, 16vh, 180px); }
.idea .rise { position: relative; height: clamp(460px, 56vh, 600px); align-self: end; display: flex; justify-content: center; overflow: hidden; }

.idea .rise .device { --w: min(360px, 32vw); position: absolute; top: 0; }
/* A straight fade on the phone itself: no glow behind it and no shadow for
 * a mask to cut into a shape. */
.idea .rise-mask { position: absolute; inset: 0; display: flex; justify-content: center; }
.idea .rise .device { box-shadow: none;
  -webkit-mask: linear-gradient(to bottom, #000 28%, transparent 62%); mask: linear-gradient(to bottom, #000 28%, transparent 62%); }
.idea .rise .device::before, .idea .rise .device::after { display: none; }

/* ── 4. The morning: a band of light from the field itself ─────────────── */
.morning { position: relative; min-height: min(92svh, 860px); display: flex; align-items: center; overflow: hidden; isolation: isolate; margin-top: -120px; padding-top: 120px; }
.morning .band { position: absolute; inset: 0; z-index: -1; background: center 38% / cover no-repeat url("img/fields/field-calm.jpg"); opacity: 0.78;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 32%, #000 78%, transparent 100%); mask: linear-gradient(to bottom, transparent 0%, #000 32%, #000 78%, transparent 100%); }
.morning .band::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,5,0.3) 34%, rgba(5,5,5,0.35) 70%, var(--ground) 100%),
              linear-gradient(to right, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.2) 60%, rgba(5,5,5,0.5) 100%); }
.morning .frame { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 24px; width: 100%; }
.morning .quote { font-size: clamp(56px, 7.4vw, 112px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 500; margin: 0; }
.morning .quote .dim { color: var(--secondary); display: block; }
.morning .aside { margin-top: 36px; max-width: 34ch; }
.morning .edge { position: relative; height: 760px;
  -webkit-mask: linear-gradient(to bottom, #000 80%, transparent 99%); mask: linear-gradient(to bottom, #000 80%, transparent 99%); }
.morning .edge { margin-right: -14vw; }
.morning .edge .device { --w: 330px; position: absolute; right: calc(14vw - 14%); top: 4%; transform: rotate(7deg); }

/* ── 4b. The reach: the question, then its answer, in sequence ─────────── */
.reach { position: relative; padding: clamp(40px, 7vh, 80px) 0 0; overflow: hidden; }
.reach .frame { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
/* One sentence per line, so a line never breaks between the two thoughts. */
.reach .big span { display: block; text-wrap: balance; }
.reach .big span:first-child { color: var(--secondary); }
.reach .quiet { color: var(--tertiary); font-size: clamp(16px, 1.2vw, 18px); margin-top: 18px; }
/* Two screens stepping down and to the right, so the eye reads them in order.
 * Both sink into the section floor rather than sitting whole on the page. */
.reach .pair { position: relative; height: clamp(560px, 70vh, 700px);
  -webkit-mask: linear-gradient(to bottom, #000 78%, transparent 99%); mask: linear-gradient(to bottom, #000 78%, transparent 99%); }
/* Positioned from the phone's own width, so the pair overlaps by the same
 * fifth at every window size and the second never runs off the column. */
.reach .pair .device { --w: min(280px, 21vw); position: absolute; }
.reach .pair .first  { left: 4%; top: 0; }
.reach .pair .second { left: calc(4% + var(--w) * 0.8); top: 13%; }

/* ── 5. How it works, said once ────────────────────────────────────────── */
.how { padding: clamp(110px, 16vh, 170px) 0 clamp(40px, 6vh, 70px); }
.how .plain { margin: 0; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.16; letter-spacing: -0.025em; font-weight: 500; }
.how .plain span { display: block; }
.how .plain span:nth-child(2) { color: var(--secondary); }
.how .note { margin-top: 30px; }
.how .cta { margin-top: 36px; }

/* ── 6. Over time: the record, filling in ──────────────────────────────── */
.record { padding: clamp(70px, 10vh, 110px) 0 clamp(100px, 14vh, 160px); }
.record .frame { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.record .grid-wrap { position: relative; padding: 28px 30px 26px; max-width: 460px; width: 100%; justify-self: center; }
.record .grid-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.record .grid-head .kicker { margin: 0; }
.record .grid-head .count { font-size: 13px; color: var(--tertiary); }
.record .grid-head .count b { color: var(--primary); font-weight: 500; font-size: 17px; margin-right: 2px; }
.record .grid-wrap::before { content: ""; position: absolute; inset: -12% -8%; height: auto; width: auto;
  background: radial-gradient(closest-side, rgba(var(--cool),0.1), transparent); z-index: -1; }
.record .weeks { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(7px, 0.8vw, 11px); }
.record .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(7px, 0.8vw, 11px); margin-bottom: 14px; }
.record .days span { text-align: center; font-size: 11px; letter-spacing: 1.2px; color: var(--tertiary); }
.record .cell { height: clamp(14px, 1.5vw, 20px); border-radius: 5px; background: rgba(255,255,255,0.05);
  transition: background-color 500ms var(--ease-out); }
.record .grid-wrap.in .cell.kept   { background: rgba(236,236,236,0.72); }
.record .grid-wrap.in .cell.missed { background: rgba(255,255,255,0.12); }
.record .grid-wrap.in .cell.today  { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(242,242,242,0.75); }
.record .legend { display: flex; gap: 22px; margin-top: 22px; }
.record .legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tertiary); }
.record .legend i { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
.record .legend i.k { background: rgba(236,236,236,0.72); }
.record .legend i.m { background: rgba(255,255,255,0.12); }

/* ── 7. Why it matters: four figures in one row, sources in the footer ── */
.research { padding: clamp(100px, 14vh, 160px) 0; }
.research .head { max-width: 16ch; }
.figures { display: grid; grid-template-columns: 1.1fr 1fr 1fr 0.9fr; margin-top: clamp(48px, 7vh, 72px); border-top: 1px solid rgba(255,255,255,0.08); }
.fig { padding: 30px 24px 0 0; }
.fig + .fig { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.06); }
.fig .n { display: block; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; white-space: nowrap; }
.fig p { margin: 14px 0 0; color: var(--secondary); font-size: 15px; line-height: 22px; max-width: 24ch; }
sup { font-size: 0.32em; vertical-align: top; position: relative; top: 0.25em; margin-left: 3px; letter-spacing: 0; }
sup a { color: var(--tertiary); }
.research .cited { margin-top: 30px; }

/* ── 8. Questions ───────────────────────────────────────────────────────── */
.questions { padding: clamp(90px, 14vh, 150px) 0; }
.questions .frame { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); }
.faq details { border-top: 1px solid rgba(255,255,255,0.08); }
.faq details:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: 18px; line-height: 26px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px;
  border-right: 1.5px solid var(--tertiary); border-bottom: 1.5px solid var(--tertiary);
  transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { margin: -6px 0 26px; color: var(--secondary); max-width: 40rem; }

/* ── 9. Closing: light rising from below, no image, no edge ─────────── */
.closing { position: relative; overflow: hidden; isolation: isolate; padding: clamp(140px, 22vh, 240px) 0 clamp(120px, 18vh, 200px); }
.closing .dawn { position: absolute; left: -20%; right: -20%; bottom: -30%; height: 110%; z-index: -1;
  background: radial-gradient(60% 55% at 50% 100%, rgba(var(--cool),0.20), rgba(var(--cool),0.07) 45%, transparent 75%),
              radial-gradient(35% 30% at 62% 100%, rgba(255,255,255,0.08), transparent 70%); }
.closing .statement { max-width: 11ch; margin: 0; }

footer.site { padding: 32px 0 44px; border-top: 1px solid rgba(255,255,255,0.06); }
footer.site .bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.sources { margin: 26px 0 0; padding-left: 1.2em; color: var(--tertiary); font-size: 12px; line-height: 20px; max-width: 70ch; }
.sources a { color: var(--tertiary); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.15); text-underline-offset: 3px; }
.sources a:hover { color: var(--secondary); }
footer.site a { color: var(--tertiary); transition: color 200ms var(--ease-out); }
footer.site a:hover { color: var(--primary); }
footer.site .spacer { flex: 1; }

/* ── Motion: three moments, nothing else animates ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .stage .device { transition: transform 1400ms var(--ease-out), opacity 1000ms var(--ease-out); }
  .stage:not(.in) .front { transform: rotateY(-24deg) rotateX(8deg) rotateZ(6deg) translateY(40px); opacity: 0; }
  .stage:not(.in) .back  { transform: rotateY(26deg) rotateZ(-8deg) translateZ(-160px) translateY(60px); opacity: 0; }
  .statement-block .line { color: rgba(242,242,242,0.2); transition: color 700ms var(--ease-out); }
  .statement-block .line.lit { color: var(--primary); }
  .record .cell { transition-delay: calc(var(--i) * 9ms); }
}

/* ── Smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero .frame { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; padding-bottom: 8px; gap: 8px; }
  .problem { padding-top: 56px; }
  .stage { height: 600px; margin: 0 -32px; }
  /* Centred as a group: the pair's bounding box sits on the middle of the screen. */
  .stage { height: 490px; }
  .stage .front { --w: 214px; right: auto; left: calc(50% - 62px); top: 4%; }
  .stage .back  { --w: 188px; left: calc(50% - 134px); top: 13%; }
  .problem .say, .problem .fact { grid-column: 1 / -1; }
  .statement-block .lines, .statement-block .cite { margin-left: 0; }
  /* At 21ch of 30px type a phone gave three words a line. */
  .statement-block .lines { max-width: none; }
  .statement-block .line { font-size: 32px; line-height: 1.16; }
  .statement-block .field { width: 110vw; right: -40vw; opacity: 0.35; }
  .idea .frame, .morning .frame, .record .frame, .questions .frame { grid-template-columns: 1fr; }
  .idea .words { padding-bottom: 20px; }
  .idea .rise .device { --w: min(300px, 74vw); }
  .morning { min-height: 0; padding: 120px 0 0; }
  .morning .edge { height: 560px; }
  .morning .edge { margin-right: -32px; }
  .morning .edge .device { --w: 250px; right: calc(32px - 6%); top: 30px; }
  .figures { grid-template-columns: 1fr 1fr; }
  .fig:nth-child(odd) { padding-left: 0; border-left: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 26px; }
  .how .plain { font-size: 28px; }
  .how .plain span { margin-bottom: 6px; }
  .morning { margin-top: -60px; padding-top: 180px; }
  .reach { padding-top: 90px; }
  .reach .frame { grid-template-columns: 1fr; gap: 40px; }
  .reach .pair { height: 500px; margin: 0 -32px; }
  .reach .pair .device { --w: 196px; }
  .reach .pair .first  { left: calc(50% - 188px); }
  .reach .pair .second { left: calc(50% - 8px); top: 11%; }
}

.big, .statement-block .line, .how .plain span, .quote { text-wrap: balance; }
.prose, .fig p, .problem .fact p { text-wrap: pretty; }