:root { --bg:#fff; --ink:#000; --muted:#555; --line:#dedede; --accent:#2602ff; --accent-soft:#a99eff; --dark:#141618; --cream:#f4f2ec; --peach:#f7d0bb; --ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--ui); color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; height:auto; }
em { font-style:italic; color:var(--accent); }
.container { width:100%; max-width:1280px; padding-inline:clamp(20px,4.4vw,56px); margin-inline:auto; }
/* Let grid content shrink without forcing the page wider than the viewport. */
.hero-layout > *,.hero-reveal > *,.story-layout > *,.metaphor-layout > *,
.breaking-point > *,.network-result > *,.closing-layout > *,
.event-details > *,.one-plan > *,.impact-notes > * { min-width:0; }
h1,h2,h3 { text-wrap:balance; }
p { overflow-wrap:break-word; }
.label { display:block; color:var(--accent); font-size:.72rem; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
[id] { scroll-margin-top:106px; }
.nav { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.nav-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; max-width:1280px; padding:20px clamp(20px,4.4vw,56px); margin:auto; }
.nav-logo { font-size:clamp(.88rem,1.6vw,1.05rem); font-weight:800; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:clamp(20px,3vw,40px); }
.nav-links a { display:inline-flex; align-items:center; min-height:44px; }
.nav-links a { font-weight:500; }
.nav-links a:hover,.nav-links .active { color:var(--accent); }
.nav-hamburger { display:none; align-items:center; justify-content:center; width:44px; height:44px; color:var(--ink); border:1px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; }
.nav-hamburger svg { width:20px; height:20px; }
.icon-close,.nav.open .icon-open { display:none; }
.nav.open .icon-close { display:block; }
.backlink { padding-top:36px; color:var(--muted); font-size:.9rem; font-weight:600; }
.backlink a:hover,.back-home:hover { color:var(--accent); }
.hero { padding-top:clamp(36px,5vw,65px); padding-bottom:clamp(56px,7vw,90px); }
.hero-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center; }
.hero-kicker { max-width:32ch; margin-bottom:clamp(24px,2.5vw,32px); font-size:clamp(1.15rem,2vw,1.6rem); font-weight:600; letter-spacing:-.025em; line-height:1.4; text-wrap:balance; }
.desktop-break { display:none; }
h1 { font-size:clamp(3rem,7.4vw,6.25rem); font-weight:800; line-height:.98; letter-spacing:-.055em; }
h1 em { display:block; }
.hero-question { max-width:46ch; margin-top:clamp(24px,2.6vw,34px); color:var(--muted); font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.65; }
.hero-cat { display:grid; place-items:center; width:100%; aspect-ratio:1; max-width:390px; padding:clamp(24px,3vw,40px) 28px; background:var(--peach); border-radius:50%; justify-self:end; }
.hero-cat img { width:100%; }
.hero-reveal { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,70px); margin:clamp(40px,6vw,76px) 0 clamp(32px,4vw,52px); padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--line); }
.hero-reveal > .label { max-width:310px; line-height:1.9; }
.intro-copy p { margin-top:18px; color:var(--muted); font-size:clamp(1rem,1.5vw,1.125rem); line-height:1.7; }
.intro-copy p:first-child { margin-top:0; }
.intro-copy .last-line { color:var(--ink); font-weight:650; }
.event-photo { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:22px; }
.event-photo img { width:100%; }
.opening-photo img { aspect-ratio:4/3; object-fit:cover; object-position:center; }
.event-photo figcaption { padding:18px 24px; color:var(--muted); font-size:.86rem; }
.image-open { display:block; position:relative; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.image-open::after { content:"↗"; position:absolute; bottom:16px; right:16px; display:grid; place-items:center; width:38px; height:38px; border:1px solid #ddd; border-radius:50%; color:#000; background:#fff; font-weight:700; }
.image-open:hover::after { background:var(--accent); color:#fff; border-color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.image-open:focus-visible { outline-offset:-5px; }
.chapter { padding-block:clamp(56px,7.5vw,104px); }
.chapter-label { margin-bottom:clamp(24px,2.7vw,34px); line-height:1.7; }
h2 { font-size:clamp(2rem,4.2vw,3.75rem); font-weight:800; letter-spacing:-.038em; line-height:1.12; }
h3 { font-size:clamp(1.35rem,2.2vw,1.8rem); letter-spacing:-.025em; line-height:1.2; }
.wide-heading { max-width:1080px; }
.prose p,.metaphor-meaning > p { max-width:65ch; color:var(--muted); font-size:clamp(1rem,1.5vw,1.125rem); line-height:1.75; }
.prose p + p,.metaphor-meaning > p + p { margin-top:22px; }
.prose .emphasis { color:var(--ink); font-weight:700; }
.story-behind { border-top:1px solid var(--line); }
.story-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:start; }
.story-layout h2 { max-width:22ch; font-size:clamp(2rem,3.8vw,3.5rem); }
.pull-line { max-width:34ch; margin-top:clamp(40px,6vw,76px); padding-top:clamp(24px,3vw,35px); border-top:1px solid var(--ink); font-size:clamp(1.7rem,3.3vw,3rem); font-weight:750; letter-spacing:-.035em; line-height:1.25; text-wrap:balance; }
.metaphor { background:#faf4ed; }
.metaphor-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); margin-top:clamp(32px,4vw,55px); }
.metaphor-layout .refrain { color:var(--ink); font-size:2rem; font-weight:750; letter-spacing:-.025em; }
.metaphor-meaning { align-self:center; border-left:2px solid #d5bea8; padding-left:38px; }
.metaphor-meaning .definition { color:var(--ink); font-size:1.7rem; font-weight:650; letter-spacing:-.025em; line-height:1.4; }
.journey-figure { margin-top:clamp(40px,5vw,64px); }
.visual-journey { list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(20px,3vw,38px); padding:clamp(20px,2.5vw,32px); background:var(--peach); border-radius:18px; }
.visual-journey li { position:relative; min-width:0; }
.visual-journey li:not(:last-child)::after { content:"→"; position:absolute; top:37%; right:calc(clamp(20px,3vw,38px) * -.8); color:var(--muted); font-size:1.4rem; }
.journey-art { position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; }
.journey-art > img { width:100%; height:100%; object-fit:contain; }
.visual-journey li > span { display:block; margin-top:18px; text-align:center; font-size:.85rem; font-weight:700; }
.dream-art > .dream-cat { position:absolute; left:0; bottom:0; width:65%; height:auto; }
.dream-armadillo { position:absolute; right:0; top:0; width:59%; aspect-ratio:1; overflow:hidden; }
.dream-armadillo img { position:absolute; width:240%; max-width:none; transform:translate(-35%,-20%); }
.journey-figure figcaption { margin-top:30px; color:var(--muted); font-size:.8rem; }
.mobile-hint { display:none; }
.challenge-list { margin:65px 0 0 auto; max-width:960px; border-top:1px solid var(--ink); }
.challenge-list article { display:grid; grid-template-columns:80px 1fr; gap:32px; padding:35px 0; border-bottom:1px solid var(--line); }
.challenge-list .number { color:var(--accent); font-size:.84rem; font-weight:750; padding-top:4px; }
.challenge-list h3 { margin-bottom:22px; }
.challenge-list p { max-width:760px; color:var(--muted); font-size:1.12rem; line-height:1.65; }
.challenge-list p + p { margin-top:16px; }
.breaking-point { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:center; margin:70px auto 0; max-width:960px; }
.breaking-point img { width:100%; max-height:320px; object-fit:contain; }
.turning-point { background:var(--cream); }
.turning-copy { max-width:780px; margin:50px 0 0 auto; }
cite { font-style:italic; color:var(--ink); }
.flip-illustration { margin-top:clamp(32px,5vw,65px); }
.flip-illustration img { width:100%; }
.flip-illustration,.rolling-illustration { container-type:inline-size; container-name:illustration; }
.illustration-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; padding-bottom:12px; }
.illustration-scroll img { min-width:600px; }
.illustration-hint { display:none; }
.flip-illustration figcaption { color:var(--muted); font-size:.8rem; margin-top:20px; }
.plan { color:#fff; background:var(--dark); }
.plan em,.plan .label { color:var(--accent-soft); }
.plan-intro { max-width:760px; margin:40px 0 0 auto; }
.plan .prose p { color:#c6c6c6; }
.one-plan { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:clamp(36px,5vw,64px); border-top:1px solid #555; border-bottom:1px solid #555; }
.one-plan > div { padding:clamp(28px,4vw,48px) clamp(8px,2vw,24px); }
.one-plan > div + div { border-left:1px solid #555; }
.big-number { display:block; color:var(--accent-soft); font-size:clamp(4.5rem,18vw,14rem); font-weight:800; line-height:.85; letter-spacing:-.075em; }
.one-plan h3 { max-width:15ch; margin-top:clamp(24px,3vw,38px); font-size:clamp(.85rem,1.5vw,1.2rem); font-weight:650; letter-spacing:0; line-height:1.5; text-wrap:initial; }
.plan-note { max-width:760px; margin:34px 0 0 auto; color:#c6c6c6; font-size:1.16rem; line-height:1.65; }
.network-result { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; margin-top:75px; }
.network-result > .label { padding-top:6px; }
.plan-conclusion { margin-top:60px; font-size:clamp(1.9rem,3.8vw,3.25rem); font-weight:750; letter-spacing:-.035em; line-height:1.18; }
.impact-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:65px 0; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.impact-notes p { margin-top:16px; color:var(--muted); font-size:1rem; line-height:1.65; }
.near-end-photo { max-width:960px; margin-left:auto; }
.near-end-photo img { aspect-ratio:1600/902; object-fit:cover; object-position:center; }
.closing-message { background:#f1f0ff; }
.closing-message h2 { font-size:clamp(3.25rem,8vw,7rem); letter-spacing:-.05em; line-height:1; }
.closing-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:60px; }
.closing-thought { font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1.35; letter-spacing:-.025em; font-weight:650; }
.rolling-illustration { margin:65px auto 0; max-width:1000px; }
.rolling-illustration img { width:100%; }
.last-flip { max-width:780px; margin:55px auto 0; text-align:center; }
.last-flip > p { color:var(--muted); font-size:1.12rem; }
.last-flip > p + p { margin-top:15px; }
.last-flip .lift-pull-flop { color:var(--ink); font-size:clamp(2.5rem,6vw,5rem); font-weight:800; letter-spacing:-.04em; }
.event-record { padding-block:clamp(56px,7vw,90px); }
.closing-photo img { aspect-ratio:4/3; object-fit:cover; object-position:center; }
.event-details { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:55px; }
.event-details .label { margin-bottom:20px; }
.event-details h2 { font-size:clamp(2rem,3.7vw,3.4rem); }
.event-subtitle { margin-top:15px; font-size:1.3rem; line-height:1.4; font-weight:600; }
.event-details > div:last-child p { color:var(--muted); font-size:1rem; line-height:1.7; }
.event-details > div:last-child p + p { margin-top:24px; }
.related-links { margin:60px 0 40px; border-top:1px solid var(--ink); }
.related-links a { display:grid; grid-template-columns:1fr 1fr 35px; align-items:center; gap:24px; padding:28px 0; border-bottom:1px solid var(--ink); }
.related-links a > span:nth-child(2) { font-size:1.6rem; font-weight:750; letter-spacing:-.025em; }
.related-links a:hover { color:var(--accent); }
.related-links a > span:last-child { font-size:1.6rem; }
.back-home { color:var(--muted); font-size:.95rem; font-weight:600; }
footer { padding:42px 0; border-top:1px solid var(--line); }
footer .container { display:flex; justify-content:space-between; gap:25px; color:var(--muted); font-size:.88rem; }
.image-viewer { width:min(1500px,96vw); max-width:96vw; max-height:94vh; max-height:94dvh; overflow-y:auto; margin:auto; padding:54px 18px 18px; color:#fff; background:var(--dark); border:1px solid #555; border-radius:18px; }
.image-viewer::backdrop { background:rgba(10,12,14,.9); }
.viewer-canvas { overflow:hidden; border-radius:8px; background:#fff; }
.image-viewer img { display:block; width:100%; height:auto; max-height:75dvh; object-fit:contain; }
.image-viewer p { max-width:1000px; margin:16px auto 0; color:#ccc; font-size:.9rem; }
.viewer-close { position:absolute; top:10px; right:14px; padding:8px 16px; color:#fff; background:transparent; border:1px solid #888; border-radius:999px; font:600 .85rem var(--ui); cursor:pointer; }
.viewer-close:focus-visible { outline-color:var(--accent-soft); }
@media(max-width:900px) {
  .story-layout,.metaphor-layout,.breaking-point,.network-result,.closing-layout,.event-details { grid-template-columns:minmax(0,1fr); gap:32px; }
  .story-layout h2 { max-width:28ch; }
  .prose,.intro-copy { max-width:65ch; }
  .metaphor-meaning { padding-left:28px; }
  .impact-notes { gap:22px; }
  .breaking-point img { max-width:330px; justify-self:center; }
  .turning-copy,.plan-intro,.plan-note { margin-left:0; }
}
@media(max-width:800px) {
  .nav-hamburger { display:flex; }
  .nav-inner { padding-block:16px; }
  .nav-links { position:absolute; top:100%; right:0; left:0; display:none; align-items:stretch; flex-direction:column; gap:0; max-height:calc(100dvh - 77px); overflow-y:auto; padding:8px clamp(20px,4.4vw,56px) 20px; border-bottom:1px solid var(--line); background:var(--bg); }
  .nav.open .nav-links { display:flex; }
  .nav-links a { padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-links a:last-child { border-bottom:0; }
  .hero-layout { grid-template-columns:minmax(0,1fr); gap:36px; }
  .hero-copy { max-width:620px; }
  .hero-cat { justify-self:center; max-width:clamp(230px,42vw,320px); }
  .hero-reveal { grid-template-columns:minmax(0,1fr); gap:24px; }
  .hero-reveal > .label { max-width:45ch; }
  .visual-journey { display:flex; gap:30px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; padding:24px 20px; }
  .visual-journey li { flex:0 0 clamp(130px,25vw,160px); scroll-snap-align:start; }
  .visual-journey li:not(:last-child)::after { right:-24px; }
  .mobile-hint { display:block; margin-top:8px; }
}
@media(max-width:600px) {
  .backlink { padding-top:26px; font-size:.82rem; }
  .hero-cat { padding:28px 20px; }
  .event-photo figcaption { padding:18px; font-size:.78rem; }
  .chapter-label { font-size:.65rem; letter-spacing:.12em; }
  .metaphor-layout { gap:32px; }
  .metaphor-meaning .definition { font-size:1.45rem; }
  .metaphor-layout .refrain { font-size:1.6rem; }
  .challenge-list { margin-top:40px; }
  .challenge-list article { grid-template-columns:minmax(0,1fr); gap:14px; padding:28px 0; }
  .challenge-list h3 { margin-bottom:16px; }
  .challenge-list p { font-size:1rem; }
  .breaking-point { margin-top:40px; gap:32px; }
  .turning-copy { margin-top:35px; }
  .plan-note { font-size:1rem; }
  .network-result { margin-top:40px; gap:24px; }
  .plan-conclusion { margin-top:40px; font-size:clamp(1.7rem,4.5vw,2rem); }
  .impact-notes { grid-template-columns:minmax(0,1fr); gap:24px; margin:40px 0; padding:25px 0; }
  .closing-layout { margin-top:35px; }
  .closing-thought { font-size:1.65rem; }
  .rolling-illustration { margin-top:40px; }
  .last-flip { margin-top:35px; }
  .last-flip > p { font-size:1.05rem; }
  .event-details { margin-top:40px; }
  .event-subtitle { font-size:1.1rem; }
  .related-links { margin-top:45px; }
  .related-links a { grid-template-columns:1fr 28px; gap:10px; }
  .related-links a .label { grid-column:1/-1; font-size:.65rem; }
  .related-links a > span:nth-child(2) { font-size:1.4rem; }
  footer .container { flex-direction:column; gap:10px; }
  .image-viewer { padding:55px 10px 16px; }
  .image-viewer p { padding:0 8px; font-size:.8rem; }
}
@media(max-height:500px) and (min-width:601px) {
  .nav-inner { padding-block:8px; }
  .image-viewer img { max-height:60dvh; }
}
@container illustration (max-width:599px) {
  .illustration-hint { display:block; margin-top:8px; font-size:.8rem; color:var(--muted); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }