:root {
  color-scheme: light;
  --fog: #f4f3f8;
  --cool: #d9dce4;
  --paper: #ffffff;
  --ink: #22232a;
  --grape: #5a2a7a;
  --deep-grape: #321341;
  --vermilion: #e34a32;
  --lime: #c9ea45;
  --moss: #52682d;
  --lavender: #e7e0f3;
  --line: color-mix(in srgb, var(--grape), transparent 74%);
  --measure: 68ch;
  --display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--fog); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); line-height: 1.62; background: linear-gradient(180deg, #faf9fc, var(--fog) 24rem, #ebe7f2); }
img { display: block; width: 100%; height: auto; }
a { color: var(--grape); text-decoration-thickness: .11em; text-underline-offset: .19em; }
a:hover { color: var(--vermilion); }
a:focus-visible, button:focus-visible { outline: .22rem solid var(--lime); outline-offset: .24rem; }
p, li { max-width: var(--measure); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(3.2rem, 10vw, 9rem); margin: 0; font-weight: 900; }
h2 { font-size: clamp(2.1rem, 5.5vw, 5.2rem); margin: 0; font-weight: 860; }
h3 { font-size: clamp(1.25rem, 2vw, 1.8rem); margin: 0; font-weight: 760; }

.utility-corner {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem clamp(1rem, 3vw, 3.5rem);
  background: color-mix(in srgb, var(--fog), transparent 8%);
  border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; font-weight: 860; letter-spacing: .08em; font-size: .78rem; }
.wordmark::before { content: ""; width: 1.85rem; aspect-ratio: 1; background: var(--grape); border-radius: 0 38% 0 38%; box-shadow: inset -.55rem .55rem 0 var(--lime); }
.utility-links { display: flex; gap: 1rem; font-size: .83rem; font-weight: 720; }

.world-intro {
  min-height: min(82rem, 92svh);
  position: relative;
  overflow: clip;
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--lavender);
}
.world-intro > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.world-intro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(18deg, rgba(34,35,42,.88) 3%, rgba(50,19,65,.28) 54%, rgba(244,243,248,.05)); }
.intro-annotation { color: white; width: min(100%, 84rem); padding: clamp(1.4rem, 4vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(14rem, .7fr); align-items: end; gap: 2rem; }
.intro-annotation h1 span { display: block; color: var(--lime); }
.intro-note { border-left: .32rem solid var(--vermilion); padding: .2rem 0 .2rem 1.2rem; font-size: clamp(1rem, 1.6vw, 1.27rem); }
.intro-note strong { color: var(--lime); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; display: block; margin-bottom: .45rem; }

.annotation-trail { width: min(100% - 2rem, 88rem); margin: -4rem auto 5rem; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: .7rem; pointer-events: none; }
.annotation-trail p { margin: 0; padding: .8rem 1rem; background: color-mix(in srgb, var(--paper), transparent 5%); border-left: .25rem solid var(--vermilion); box-shadow: 0 .8rem 2rem rgba(50,19,65,.10); font-size: .9rem; }
.annotation-trail p:nth-child(1) { grid-column: 1 / span 4; transform: translateY(-1.2rem); }
.annotation-trail p:nth-child(2) { grid-column: 6 / span 5; transform: translateY(2.8rem); }
.annotation-trail p:nth-child(3) { grid-column: 2 / span 5; transform: translateY(5.3rem); }
.annotation-trail p:nth-child(4) { grid-column: 8 / span 5; transform: translateY(7.8rem); background: var(--lime); }
.annotation-trail b { font-variant-numeric: tabular-nums; color: var(--grape); font-size: .66rem; letter-spacing: .1em; display: block; margin-bottom: .25rem; }

.fact-pause { width: min(100% - 2rem, 86rem); margin: clamp(4rem, 10vw, 9rem) auto; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.fact-pause figure { margin: 0; position: relative; }
.fact-pause figure::before { content: "PUBLIC PURPOSE"; position: absolute; left: -.7rem; top: 1rem; z-index: 1; padding: .45rem .65rem; background: var(--lime); color: var(--deep-grape); font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.fact-pause img { aspect-ratio: 4/3; object-fit: cover; clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 8% 100%, 0 88%); }
.fact-copy .eyebrow, .chapter .eyebrow, .policy-eyebrow { color: var(--vermilion); text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; font-weight: 850; }
.fact-copy p:first-of-type { font-size: clamp(1.12rem, 2vw, 1.45rem); }

.scale-chapter { margin: 0 auto clamp(5rem, 11vw, 10rem); width: min(100% - 2rem, 100rem); display: grid; grid-template-columns: 1.08fr .44fr .48fr; grid-template-rows: auto auto; gap: clamp(1rem, 2vw, 2.2rem); align-items: start; }
.scale-chapter .scale-main { grid-row: span 2; position: relative; }
.scale-main img { min-height: 38rem; object-fit: cover; clip-path: polygon(0 0, 94% 0, 100% 8%, 100% 94%, 94% 100%, 0 100%); }
.scale-copy { background: var(--deep-grape); color: white; padding: clamp(1.4rem, 3vw, 3rem); margin-left: -8rem; position: relative; z-index: 1; align-self: center; grid-column: 2 / -1; }
.scale-copy h2 { color: var(--lime); }
.scale-detail { grid-column: 2; }
.scale-detail img { aspect-ratio: 4/5; object-fit: cover; }
.scale-aside { grid-column: 3; padding-top: 2rem; }

.perspective-crossing { background: var(--paper); padding: clamp(4rem, 10vw, 10rem) max(1rem, calc((100vw - 92rem)/2)); overflow: clip; }
.perspective-intro { display: grid; grid-template-columns: .72fr 1.28fr; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.perspective-scene { position: relative; min-height: 43rem; }
.perspective-scene > img { height: 100%; min-height: 43rem; object-fit: cover; clip-path: polygon(5% 0, 100% 0, 100% 92%, 95% 100%, 0 100%, 0 8%); }
.callout { position: absolute; max-width: 20rem; padding: .85rem 1rem; background: rgba(255,255,255,.95); border-left: .28rem solid var(--vermilion); box-shadow: 0 .8rem 2rem rgba(34,35,42,.11); }
.callout b { display: block; color: var(--grape); font-size: .7rem; letter-spacing: .1em; margin-bottom: .3rem; }
.callout.one { left: 3%; top: 7%; }
.callout.two { right: 3%; top: 18%; }
.callout.three { left: 5%; bottom: 8%; }
.callout.four { right: 5%; bottom: 5%; background: var(--lime); }

.detail-pair { width: min(100% - 2rem, 88rem); margin: clamp(4rem, 10vw, 10rem) auto; display: grid; grid-template-columns: .6fr 1.4fr; gap: clamp(1rem, 5vw, 6rem); align-items: center; }
.detail-square img { aspect-ratio: 1; object-fit: cover; border-radius: 0 30% 0 30%; }
.boundary-run { display: grid; gap: 1.2rem; }
.boundary-run figure { margin: 0; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; }
.boundary-run figure:nth-child(even) { grid-template-columns: .9fr 1.1fr; }
.boundary-run img { aspect-ratio: 3/2; object-fit: cover; }
.boundary-run figcaption { padding: clamp(1rem, 4vw, 3.2rem); }
.boundary-run figure:nth-child(even) img { order: 2; }

.handoff { width: min(100% - 2rem, 96rem); margin: clamp(5rem, 12vw, 12rem) auto; display: grid; grid-template-columns: 1.25fr .75fr; gap: 0; align-items: stretch; }
.handoff-image { position: relative; }
.handoff-image img { height: 100%; min-height: 35rem; object-fit: cover; }
.handoff-copy { background: var(--lime); padding: clamp(1.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.handoff-copy a { font-weight: 800; }

.return-pair { display: grid; grid-template-columns: .7fr 1.3fr; width: min(100% - 2rem, 90rem); margin: 0 auto 6rem; align-items: end; }
.return-pair figure { margin: 0; }
.return-pair .not-plan { background: var(--deep-grape); color: white; padding: clamp(1.3rem, 4vw, 3.4rem); margin-right: -3rem; z-index: 1; }
.purpose-horizon { position: relative; min-height: 34rem; display: grid; align-items: end; overflow: clip; }
.purpose-horizon > img { position: absolute; inset: 0; height: 100%; object-fit: cover; z-index: -2; }
.purpose-horizon::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(50,19,65,.88), transparent 70%); z-index: -1; }
.purpose-horizon div { color: white; padding: clamp(2rem, 7vw, 7rem); max-width: 70rem; }
.purpose-horizon h2 { color: var(--lime); }

.source-foot { background: var(--ink); color: white; padding: 3rem max(1rem, calc((100vw - 88rem)/2)); display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem; }
.source-foot a { color: var(--lime); }
.source-foot ul { columns: 2; padding-left: 1.1rem; }
.source-foot li { break-inside: avoid; margin-bottom: .5rem; }

/* Privacy is intentionally a different, calmer composition. */
.privacy-page { background: #f7f6f9; }
.privacy-shell { width: min(100% - 2rem, 82rem); margin: 0 auto; padding: clamp(2rem, 6vw, 6rem) 0 8rem; }
.privacy-opening { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; margin-bottom: 4rem; }
.privacy-opening img { aspect-ratio: 16/9; object-fit: cover; clip-path: polygon(0 0, 94% 0, 100% 12%, 100% 100%, 6% 100%, 0 88%); }
.privacy-opening h1 { font-size: clamp(3rem, 8vw, 7rem); }
.privacy-summary { font-size: clamp(1.04rem, 1.6vw, 1.26rem); }
.topic-index { border-top: .35rem solid var(--grape); border-bottom: 1px solid var(--line); padding: 1.4rem 0 1.8rem; margin: 0 0 6rem; }
.topic-index h2 { font-size: 1.25rem; margin-bottom: 1rem; letter-spacing: -.01em; }
.topic-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: policy; }
.topic-index li { counter-increment: policy; min-width: 0; border-top: 1px solid var(--line); }
.topic-index a { display: grid; grid-template-columns: 2.2rem 1fr; gap: .55rem; padding: .78rem .5rem .78rem 0; text-decoration: none; color: var(--ink); }
.topic-index a::before { content: counter(policy, decimal-leading-zero); color: var(--vermilion); font-variant-numeric: tabular-nums; font-weight: 850; font-size: .7rem; letter-spacing: .08em; }

.policy-reading { max-width: 70rem; margin: 0 auto; }
.policy-reading section { scroll-margin-top: 1.5rem; display: grid; grid-template-columns: minmax(7rem, .26fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 4rem); padding: 2.2rem 0; border-top: 1px solid var(--line); }
.policy-reading section::before { content: attr(data-step); color: var(--vermilion); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: .12em; font-size: .68rem; padding-top: .38rem; }
.policy-reading section h2 { font-size: clamp(1.45rem, 3vw, 2.5rem); margin-bottom: .8rem; }
.policy-reading section p, .policy-reading section ul { margin-top: .45rem; }
.lifecycle-figure { margin: 3.6rem 0 4.4rem; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; background: var(--lavender); }
.lifecycle-figure:nth-of-type(even) { grid-template-columns: .86fr 1.14fr; background: var(--paper); }
.lifecycle-figure:nth-of-type(even) img { order: 2; }
.lifecycle-figure img { aspect-ratio: 4/3; object-fit: cover; }
.lifecycle-figure.wide img { aspect-ratio: 3/2; }
.lifecycle-figure figcaption { padding: clamp(1.2rem, 4vw, 3.4rem); }
.lifecycle-figure figcaption b { display: block; color: var(--grape); letter-spacing: .1em; font-size: .7rem; margin-bottom: .5rem; }
.policy-close { margin-top: 5rem; padding: 2rem 0; border-top: .35rem solid var(--lime); display: flex; justify-content: space-between; gap: 2rem; }

[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  [data-enhanced="true"] [data-reveal] { opacity: 0; transform: translateY(1.4rem); transition: opacity .45s ease, transform .45s ease; }
  [data-enhanced="true"] [data-reveal][data-visible="true"] { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .utility-corner { align-items: flex-start; }
  .utility-links { flex-direction: column; gap: .25rem; text-align: right; }
  .world-intro { min-height: 78svh; }
  .intro-annotation { grid-template-columns: 1fr; }
  .intro-annotation h1 { font-size: clamp(3.4rem, 20vw, 6rem); }
  .annotation-trail { grid-template-columns: repeat(6, 1fr); margin: -1.5rem auto 7rem; }
  .annotation-trail p:nth-child(1) { grid-column: 1 / span 5; transform: none; }
  .annotation-trail p:nth-child(2) { grid-column: 2 / span 5; transform: translateY(.5rem); }
  .annotation-trail p:nth-child(3) { grid-column: 1 / span 5; transform: translateY(1rem); }
  .annotation-trail p:nth-child(4) { grid-column: 2 / span 5; transform: translateY(1.5rem); }
  .fact-pause, .perspective-intro, .detail-pair, .handoff, .return-pair, .source-foot, .privacy-opening { grid-template-columns: 1fr; }
  .scale-chapter { grid-template-columns: 1fr; grid-template-rows: auto; }
  .scale-chapter .scale-main, .scale-copy, .scale-detail, .scale-aside { grid-column: 1; grid-row: auto; }
  .scale-main img { min-height: 28rem; }
  .scale-copy { margin: -3rem 1rem 0; }
  .scale-detail { width: 58%; margin-left: auto; }
  .perspective-scene, .perspective-scene > img { min-height: 48rem; }
  .callout { max-width: 76%; }
  .callout.one { top: 3%; }
  .callout.two { top: 28%; }
  .callout.three { bottom: 26%; }
  .callout.four { bottom: 3%; }
  .boundary-run figure, .boundary-run figure:nth-child(even) { grid-template-columns: 1fr; }
  .boundary-run figure:nth-child(even) img { order: 0; }
  .return-pair .not-plan { margin: 0 1rem -2rem; }
  .source-foot ul { columns: 1; }
  .topic-index ol { grid-template-columns: 1fr 1fr; }
  .policy-reading section { grid-template-columns: 2.3rem minmax(0, 1fr); gap: .55rem; }
  .lifecycle-figure, .lifecycle-figure:nth-of-type(even) { grid-template-columns: 1fr; }
  .lifecycle-figure:nth-of-type(even) img { order: 0; }
  .policy-close { flex-direction: column; }
}

@media (max-width: 460px) {
  .topic-index ol { grid-template-columns: 1fr; }
  .annotation-trail { grid-template-columns: 1fr; }
  .annotation-trail p:nth-child(n) { grid-column: 1; }
}

@media print {
  .utility-corner, .purpose-horizon, .source-foot { background: white !important; color: black !important; }
  .utility-links { display: none; }
  .topic-index a { color: black; }
  .policy-reading section { break-inside: avoid; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}