/* Starsill site layout, extracted unchanged from the locked home page (docs/design/website_i_locked_2026-10-05/index.html, Proposal I).
   Shared by every page; tokens and glass come from starsill.css. */
body { background: var(--bg); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--s-lg); }
h1, h2, h3 { font-family: var(--serif); margin: 0; letter-spacing: -.012em; }
h2 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1; font-weight: 600; }
h3 { font-size: 20px; line-height: 1.25; font-weight: 600; }
p { margin: 0; }
.sub { color: var(--text-2); }
.sc { font: 600 13px/1.2 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .16em; color: var(--accent); margin-bottom: var(--s-sm); }
section.sheet { padding: 72px 0; border-top: 1px solid var(--separator); position: relative; }
section.sheet::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(90deg, var(--separator) 0 1px, transparent 1px 48px); }

/* Header: no background, no icon; fixed, floating over the sky. A glass menu button opens the page's sections. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 8px; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.top .wrap > * { pointer-events: auto; }
.brand { color: var(--text); text-decoration: none; font: 600 20px var(--serif); letter-spacing: .01em; text-shadow: 0 1px 14px rgba(11,14,26,.95), 0 0 2px rgba(11,14,26,.8); }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.mb { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--text); }
.bars { display: grid; gap: 4px; width: 16px; }
.bars i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; transition: translate .22s ease, rotate .22s ease, opacity .18s ease; }
.menu[open] .bars i:nth-child(1) { translate: 0 5.5px; rotate: 45deg; }
.menu[open] .bars i:nth-child(2) { opacity: 0; }
.menu[open] .bars i:nth-child(3) { translate: 0 -5.5px; rotate: -45deg; }
.panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 236px; padding: 8px; border-radius: var(--r-lg); display: grid;
  background: rgba(11,14,26,.78); transform-origin: top right; animation: pop .18s ease-out; }
.panel a { color: var(--text); text-decoration: none; font: 500 16px/1.2 var(--sans); padding: 11px 14px; border-radius: var(--r-sm); }
.panel a:hover { background: rgba(255,255,255,.07); }
.panel a[lang="es"] { font-weight: 600; }
.panel hr { border: 0; border-top: 1px solid var(--glass-sep); margin: 6px 6px; }
@keyframes pop { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
@media (max-width: 640px) { .panel { position: fixed; left: 16px; right: 16px; top: 70px; min-width: 0; } }

/* The chart: grid, named stars, the sill as horizon. The star field itself is the page-wide canvas behind. */
.chart { position: relative; overflow: hidden;
  background: radial-gradient(60% 90% at 50% 100%, rgba(200,126,90,.20), transparent 70%); }
.chart svg.grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart svg.grid * { fill: none; vector-effect: non-scaling-stroke; }
.grid .g { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.grid .c { stroke: rgba(200,126,90,.5); stroke-width: 1; stroke-dasharray: 3 5; }
.ns { position: absolute; translate: -9px -9px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ns svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 0 8px rgba(200,126,90,.9)); }
.ns i { font: italic 400 clamp(13px, 1.4vw, 16px)/1 var(--serif); color: var(--text); }
.ns.l { flex-direction: row-reverse; translate: calc(-100% + 9px) -9px; }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); box-shadow: 0 0 22px 2px rgba(200,126,90,.65); }
@media (max-width: 640px) { .ns.m-hide i { display: none; } }

/* Hero: the sentence, and one phone standing on the sill */
.hero-chart { min-height: clamp(660px, 100svh, 900px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 76px; }
.hero-chart::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(11,14,26,.70) 82%); }
.hero-chart .sky { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 34%; }
.hero-chart .sky > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-chart .horizon { z-index: 3; }
.hero-chart .card { position: relative; z-index: 2; width: 100%; display: grid; gap: var(--s-xl) var(--s-xxl); align-items: end; }
.hero-chart .words { padding-bottom: 64px; display: grid; gap: var(--s-lg); align-content: end; }
.hero-chart h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.04; font-weight: 600; }
.hero-chart h1 em { font-style: italic; color: var(--accent); }
.hero-chart .lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--text-2); max-width: 30em; margin-top: var(--s-xs); }
.cta { margin-top: var(--s-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md) var(--s-xl); }
.cta .meta-line { margin: 0; }
/* Apple badge: official artwork, unmodified; height ≥ 40 px and clear space of a quarter of its height */
.store { display: inline-block; line-height: 0; padding: 12px; margin: -12px; border-radius: 10px; }
.store img { height: 52px; width: auto; display: block; }
.hero-phone { margin: 0; justify-self: center; line-height: 0; }
.hero-phone .device { --dw: 200px; }
@media (min-width: 900px) {
  .hero-chart .sky { height: 40%; }
  .hero-chart .card { grid-template-columns: 1fr 260px; gap: var(--s-xxxl); }
  .hero-phone { justify-self: end; }
  .hero-phone .device { --dw: 260px; }
}
@media (max-width: 899px) {
  .hero-chart .sky { height: 210px; }
  .hero-chart .card { padding-top: 150px; gap: var(--s-xxl); }
  .hero-chart .words { padding-bottom: 0; }
}

/* The void: gradient, three nebulas that drift (keyframes) and follow the scroll (sky.js), then the star canvas */
.void { background: linear-gradient(135deg, var(--bg), var(--bg-end)); overflow: hidden; }
.neb-wrap { position: absolute; inset: 0; will-change: transform; }
.neb { position: absolute; border-radius: 50%; }
.cyan .neb { width: 90vmin; height: 90vmin; left: -22vmin; top: -30vmin; animation: neb-a 46s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, rgba(0,255,255,.14), rgba(0,255,255,.05) 45%, transparent 72%); }
.copper .neb { width: 110vmin; height: 110vmin; right: -35vmin; bottom: -45vmin; animation: neb-b 58s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, rgba(200,126,90,.22), rgba(200,126,90,.08) 45%, transparent 72%); }
.dust .neb { width: 70vmin; height: 70vmin; left: 44%; top: 28%; animation: neb-c 70s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, rgba(30,40,70,.55), transparent 70%); }
@keyframes neb-a { to { translate: 6vmin 5vmin; scale: 1.08; } }
@keyframes neb-b { to { translate: -7vmin -6vmin; scale: 1.1; } }
@keyframes neb-c { to { translate: -5vmin 4vmin; scale: 1.05; } }

/* Option A: the phone rests 30 % behind the sill, its top level with the headline */
.hero-phone { margin-bottom: calc(var(--dw) * -0.67); }
@media (min-width: 900px) { .hero-phone { margin-bottom: calc(260px * -0.67); } }

/* iPhone Pro frame (6.3-inch class). The screen keeps the 1206 × 2622 ratio of the stills and the clip. */
.device { --dw: 280px; width: var(--dw); position: relative; padding: calc(var(--dw) * .024); border-radius: calc(var(--dw) * .18);
  background: linear-gradient(155deg, #3d4049 0%, #1c1e25 32%, #0f1116 66%, #2b2e37 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 2px rgba(255,255,255,.045), 0 34px 70px rgba(0,0,0,.6); }
.device .screen { position: relative; aspect-ratio: 1206 / 2622; border-radius: calc(var(--dw) * .158); overflow: hidden; background: #000; }
.device .screen > img, .device .screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dynamic Island. Sized to cover the recording indicator in the UAT frames; proper screenshots will show the normal island. */
.device .screen::before { content: ""; position: absolute; top: 2.4%; left: 50%; translate: -50% 0; width: 44%; height: 3.6%; border-radius: 999px; background: #000; z-index: 3; }
.device .k { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #262932, #4b4f5b); }
.device .k.a { left: -3px; top: 17%; height: 4%; }
.device .k.u { left: -3px; top: 24%; height: 7.5%; }
.device .k.d { left: -3px; top: 33.5%; height: 7.5%; }
.device .k.p { right: -3px; top: 27%; height: 11%; background: linear-gradient(270deg, #262932, #4b4f5b); }
.device .k.c { right: -3px; top: 56%; height: 6%; background: linear-gradient(270deg, #262932, #4b4f5b); }
.device .pp { position: absolute; right: 8%; bottom: 4.5%; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text); cursor: pointer; z-index: 4; padding: 0; }
.device .pp svg { width: 14px; height: 14px; fill: currentColor; }
.device.paused .i-pause, .device:not(.paused) .i-play { display: none; }

/* Where books reach you, as a strip */
section.strip { padding: 48px 0; }
.strip .wrap { display: grid; gap: var(--s-lg) var(--s-xxl); align-items: start; }
.strip h2 { font-size: clamp(24px, 2.6vw, 30px); }
.bearings { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-md); counter-reset: b; }
.bearings li { border-top: 1px solid var(--separator); padding-top: var(--s-sm); font: italic 400 clamp(18px, 1.8vw, 21px)/1.25 var(--serif); }
.bearings li::before { counter-increment: b; content: counter(b, upper-roman); display: block; font: 600 11px var(--serif); font-style: normal; letter-spacing: .16em; color: var(--accent); margin-bottom: 4px; }
.reach-end { font-size: 16px; color: var(--text-2); max-width: 30em; }
@media (min-width: 900px) {
  .strip .wrap { grid-template-columns: 1fr 2fr; }
  .strip h2 { grid-row: 1 / span 2; }
  .bearings { grid-column: 2; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
  .reach-end { grid-column: 2; }
}

/* How it works: three phones */
.plates { display: grid; gap: var(--s-xxxl) var(--s-xl); margin-top: var(--s-xxl); counter-reset: p; }
.plates figure { margin: 0; }
.plates .device { --dw: min(100%, 272px); }
@media (max-width: 640px) { .plates .device, .lib-shots .device { --dw: min(100%, 236px); } .plates figure { justify-self: center; } .plates figcaption { max-width: 100%; } }
.plates figcaption { margin-top: var(--s-xl); max-width: 320px; }
.plates figcaption::before { counter-increment: p; content: counter(p, upper-roman); display: block; font: 600 13px var(--serif); letter-spacing: .16em; color: var(--accent); margin-bottom: var(--s-xs); }
.plates figcaption p { margin-top: var(--s-xs); color: var(--text-2); font-size: 15px; }
.contrast { margin-top: 72px; font: 600 clamp(22px, 3vw, 32px)/1.3 var(--serif); max-width: 26em; }
.inbox { margin-top: var(--s-xl); padding-left: var(--s-lg); border-left: 1px solid var(--accent); color: var(--text-2); font-size: 15px; max-width: 44em; }
@media (min-width: 820px) { .plates { grid-template-columns: repeat(3, 1fr); } }

/* Library: the real library and a book page */
.lib-copy { display: grid; gap: var(--s-lg) var(--s-xxxl); margin-top: var(--s-lg); }
.lib-copy .owe { font: 600 clamp(20px, 2.4vw, 24px)/1.4 var(--serif); }
@media (min-width: 860px) { .lib-copy { grid-template-columns: 1fr 1fr; } }
/* Library: one window the width of the page; two phones stand cut behind its sill */
.lib-window { margin-top: var(--s-xxl); position: relative; height: clamp(240px, 36vw, 460px); overflow: hidden;
  border: 1px solid var(--separator); outline: 1px solid var(--separator); outline-offset: 5px;
  background: radial-gradient(60% 90% at 50% 100%, rgba(200,126,90,.18), transparent 70%); }
.lib-window .row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 6vw, 64px); }
.lib-window figure { margin: 0; line-height: 0; }
.lib-window .device { --dw: clamp(160px, 31vw, 340px); margin-bottom: calc(var(--dw) * -0.95); }
.lib-window .horizon { z-index: 3; }

/* The route of a photo */
.route { margin-top: var(--s-xxl); display: grid; gap: var(--s-xl); }
.route h3 { font: 600 13px var(--serif); font-variant-caps: all-small-caps; letter-spacing: .16em; color: var(--text-2); margin-bottom: var(--s-md); }
.path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.path li { font: 600 15px/1.3 var(--serif); padding: 12px 16px; border: 1px solid var(--separator); background: #0E1222; display: flex; align-items: center; gap: 10px; }
.path li svg { width: 12px; height: 12px; flex: none; color: var(--text-3); }
.path li.home { border-color: var(--accent-ring); }
.path li.home svg { color: var(--accent); }
.path li + li { margin-top: 30px; position: relative; }
.path li + li::before { content: ""; position: absolute; left: 22px; top: -31px; width: 1px; height: 30px; background: var(--accent); }
.path li + li::after { content: ""; position: absolute; left: 18px; top: -8px; border: 4.5px solid transparent; border-top: 7px solid var(--accent); border-bottom: 0; }
.route .legend { margin-top: var(--s-md); color: var(--text-2); font-size: 14px; max-width: 46em; }
.route .stays { border: 1px solid var(--accent-ring); padding: var(--s-lg) var(--s-xl); font: 600 clamp(19px, 2.2vw, 22px)/1.3 var(--serif); display: flex; gap: var(--s-md); align-items: center; background: rgba(11,14,26,.5); }
.route .stays svg { width: 20px; height: 20px; flex: none; color: var(--accent); filter: drop-shadow(0 0 8px rgba(200,126,90,.9)); }
@media (min-width: 860px) {
  .path { flex-direction: row; align-items: center; }
  .path li + li { margin: 0 0 0 56px; }
  .path li + li::before { left: -56px; top: 50%; width: 55px; height: 1px; }
  .path li + li::after { left: -8px; top: calc(50% - 4.5px); border: 4.5px solid transparent; border-left: 7px solid var(--accent); border-right: 0; }
}
.photo-copy { margin-top: var(--s-xxl); display: grid; gap: var(--s-md); max-width: 46em; color: var(--text-2); font-size: 16px; }

/* What's free */
.free { display: grid; gap: var(--s-xl) var(--s-xxxl); }
.free .big { font: 600 clamp(30px, 4.6vw, 52px)/1.1 var(--serif); margin-top: var(--s-sm); }
.free .txt { display: grid; gap: var(--s-md); color: var(--text-2); font-size: 16px; align-content: end; }
@media (min-width: 860px) { .free { grid-template-columns: 1fr 1fr; } }

.founder { max-width: 760px; }
.founder blockquote { margin: var(--s-lg) 0; font: 400 clamp(19px, 2.2vw, 23px)/1.55 var(--serif); }
.founder cite { font-style: normal; color: var(--text-2); font-size: 15px; }
.founder cite b { color: var(--text); font-weight: 600; }

.closing { text-align: center; padding: 0 0 104px; position: relative; }
.closing .chart { height: clamp(160px, 26vh, 260px); }
.closing h2 { font-size: clamp(30px, 5vw, 50px); max-width: 16em; margin: 72px auto var(--s-xxl); }
.closing .store { margin: 0; }

.faq { margin-top: var(--s-xl); max-width: 820px; border-top: 1px solid var(--separator); }
.faq details { border-bottom: 1px solid var(--separator); }
.faq summary { padding: var(--s-lg) 0; font: 600 18px/1.35 var(--serif); display: flex; justify-content: space-between; gap: var(--s-md); }
.faq summary::after { content: "+"; color: var(--accent); font: 400 22px/1 var(--sans); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text-2); font-size: 15px; padding-bottom: var(--s-lg); max-width: 44em; }

footer { border-top: 1px solid var(--separator); padding: var(--s-xxl) 0 56px; color: var(--text-3); font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--s-md) var(--s-xl); justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s-lg); }
footer a { color: var(--text-2); text-decoration: none; }
footer a:hover { color: var(--text); }

/* Motion. Reduced motion: final states everywhere; the sky stays still (sky.js) and the demo shows its poster. */
.js .rv { opacity: 0; translate: 0 14px; transition: opacity .7s ease, translate .7s ease; }
.js .rv.in { opacity: 1; translate: 0 0; }
.rv[data-d="1"] { transition-delay: .12s; } .rv[data-d="2"] { transition-delay: .24s; } .rv[data-d="3"] { transition-delay: .36s; } .rv[data-d="4"] { transition-delay: .48s; }
.js .hero-chart .sky .c.draw { vector-effect: none; stroke-width: .14; stroke-dasharray: 1; stroke-dashoffset: 1; stroke: rgba(242,201,168,.85);
  animation: draw 1.6s cubic-bezier(.4,0,.2,1) .35s forwards, fade .7s ease 1.9s forwards; }
.js .hero-chart .sky .c:not(.draw) { opacity: 0; animation: appear .8s ease 1.6s forwards; }
.js .hero-chart .ns { opacity: 0; animation: star-in .7s ease-out forwards; animation-delay: calc(.5s + var(--i, 0) * .22s); }
.js .hero-chart .card > * { opacity: 0; animation: rise .9s cubic-bezier(.2,.7,.2,1) 1.1s forwards; }
.js .hero-chart .card > * + * { animation-delay: 1.35s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes star-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.js .path li + li::before, .js .path li + li::after { transform-origin: left top; transform: scale(0); transition: transform .5s ease .3s; }
.js .path li.in::before, .js .path li.in::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; translate: none; transition: none; }
  .js .hero-chart .sky .c.draw { display: none; }
  .js .hero-chart .sky .c:not(.draw) { animation: none; opacity: 1; }
  .js .hero-chart .ns, .js .hero-chart .card > * { animation: none; opacity: 1; }
  .js .path li + li::before, .js .path li + li::after { transform: none; }
  .device .pp { display: none; }
}