:root {
  color-scheme: light;
  --cream: #faf8f2;
  --paper: #eeeae0;
  --ink: #153446;
  --forest: #1d2420;
  --blue: #a8d2df;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--cream); font-family: var(--sans); }
h1, h2, p, figure { margin: 0; }
img { display: block; }
.scene { position: relative; width: 100%; min-height: 900px; height: 100svh; isolation: isolate; overflow: clip; }
.world { position: absolute; inset: 0; z-index: -3; }
.world img, .world-image { width: 100%; height: 100%; object-fit: cover; }
.world .aligned-overlay { position: absolute; inset: 0; }
.overline { font: 11px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.symbol { position: absolute; width: 35px; height: 35px; object-fit: contain; top: 38px; left: 48px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.entry .world img { object-position: 50% 65%; }
.entry .veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(250,248,242,.93) 0%, rgba(250,248,242,.9) 26%, rgba(250,248,242,.74) 45%, rgba(250,248,242,.15) 76%, rgba(250,248,242,0) 100%); }
.entry .signature { position: absolute; top: 23%; left: 50%; transform: translateX(-50%); width: 390px; text-align: center; }
.entry .full-logo { width: 100%; height: auto; }
.entry .tagline { font: italic 27px/1.4 var(--serif); margin-top: 25px; white-space: nowrap; }
.entry .quiet-line { position: absolute; bottom: 40px; left: 50%; width: 1px; height: 42px; background: rgba(250,248,242,.8); }
.encounter .world img { object-position: center; }
.encounter .character { position: absolute; width: 430px; left: calc(50% - 215px); bottom: 9%; }
.character img { width: 100%; height: auto; }
.encounter .contact-shadow { position: absolute; width: 225px; height: 29px; left: calc(50% - 100px); bottom: 16.7%; background: rgba(15,24,16,.58); border-radius: 50%; filter: blur(10px); }
.fork { color: var(--cream); background: var(--forest); }
.fork h1 { position: absolute; z-index: 2; top: 84px; width: 100%; text-align: center; font: 43px/1.2 var(--serif); font-weight: normal; letter-spacing: -.025em; }
.currents { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.current { position: relative; overflow: clip; }
.current .landscape { position: absolute; inset: 0; z-index: -2; }
.current .landscape img { width: 100%; height: 100%; object-fit: cover; }
.current-water { border-right: 1px solid rgba(250,248,242,.28); }
.current-water .landscape img { object-position: 0% 50%; filter: saturate(.65); }
.current-water::after { content: ''; position: absolute; inset: 0; background: rgba(13,42,53,.54); z-index: -1; }
.current-craft .landscape img { object-position: 95% 50%; }
.current-craft::after { content: ''; position: absolute; inset: 0; background: rgba(49,34,17,.47); z-index: -1; }
.current-copy { position: absolute; left: 13%; bottom: 15%; }
.current h2 { font: 70px/1.06 var(--serif); font-weight: normal; letter-spacing: -.045em; margin-top: 20px; }
.current .underline { width: 84px; height: 1px; background: rgba(250,248,242,.55); margin-top: 36px; }
.curiosity { background: #e8ece7; }
.curiosity .poem { position: absolute; top: 25%; left: 8%; width: 38%; z-index: 2; }
.curiosity h1 { font: 78px/1.05 var(--serif); letter-spacing: -.055em; font-weight: normal; margin-top: 25px; }
.curiosity h1 em { font-weight: normal; }
.curiosity .explanation { font: 17px/1.75 var(--sans); max-width: 355px; margin-top: 43px; color: #52676c; }
.curiosity .reflection-world { position: absolute; left: 51%; top: 0; width: 49%; height: 100%; overflow: clip; }
.curiosity .upright { position: absolute; width: 100%; height: 64%; object-fit: cover; object-position: 33% center; }
.curiosity .reflected { position: absolute; top: 64%; width: 100%; height: 45%; object-fit: cover; object-position: 80% 20%; transform: scaleY(-1); filter: saturate(.6); }
.curiosity .water-veil { position: absolute; top: 64%; width: 100%; height: 36%; background: rgba(85,135,149,.3); border-top: 1px solid rgba(230,245,243,.7); }
.curiosity .horizon { position: absolute; top: calc(64% + 28px); right: 9%; width: 70%; height: 1px; background: rgba(232,244,242,.26); }
.craft { background: var(--cream); }
.craft .craft-heading { position: absolute; top: 128px; left: 8%; right: 8%; }
.craft h1 { font: 64px/1.1 var(--serif); font-weight: normal; letter-spacing: -.04em; }
.craft h1 em { font-weight: normal; }
.craft .material-study { --art-width: 1120px; width: var(--art-width); height: 382px; position: absolute; top: 340px; left: calc(50% - 560px); }
.material-study .piece { position: absolute; background-image: url('/assets/p1-forest-master.jpg'); background-size: var(--art-width) auto; }
.material-study .p1 { left: 0; top: 70px; width: 45px; height: 140px; background-position: 0 -250px; }
.material-study .p2 { left: 61px; top: 13px; width: 48px; height: 235px; background-position: -61px -193px; }
.material-study .p3 { left: 125px; top: 115px; width: 73px; height: 223px; background-position: -125px -295px; }
.material-study .p4 { left: 214px; top: 53px; width: 83px; height: 276px; background-position: -214px -233px; }
.material-study .p5 { left: 309px; top: 25px; width: 95px; height: 333px; background-position: -309px -205px; }
.material-study .p6 { left: 413px; top: 10px; width: 131px; height: 361px; background-position: -413px -190px; }
.material-study .p7 { left: 551px; top: 0; width: 159px; height: 382px; background-position: -551px -180px; }
.material-study .p8 { left: 714px; top: 0; width: 406px; height: 382px; background-position: -714px -180px; }
.craft .study-labels { position: absolute; display: flex; justify-content: space-between; top: 758px; left: calc(50% - 560px); width: 1120px; border-top: 1px solid #c8cec5; padding-top: 17px; color: #5c685c; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.craft .character { position: absolute; width: 170px; top: 490px; left: calc(50% + 120px); }
.craft .character img { filter: drop-shadow(0 8px 5px rgba(20,32,20,.3)); }
.confluence { background: var(--cream); }
.confluence .world { height: 75%; }
.confluence .world img { width: 140%; object-position: center bottom; transform: translateX(-28%); }
.confluence .world::after { content: ''; position: absolute; inset: 0; background: rgba(18,38,36,.67); }
.confluence .character { position: absolute; width: 620px; top: 30px; left: 10%; }
.confluence .contact-shadow { position: absolute; left: 285px; top: 528px; width: 360px; height: 28px; border-radius: 50%; background: rgba(10,24,16,.64); filter: blur(12px); }
.confluence .mouth-copy { position: absolute; color: var(--cream); font: 33px/1.25 var(--serif); font-weight: normal; left: 62%; }
.confluence .mouth-copy::before { content: ''; position: absolute; top: 20px; right: calc(100% + 25px); width: 225px; height: 1px; background: rgba(250,248,242,.37); }
.confluence .upper-mouth { top: 300px; }
.confluence .lower-mouth { top: 389px; }
.confluence .upper-mouth::before { width: 325px; transform: rotate(3deg); transform-origin: right center; }
.confluence .lower-mouth::before { width: 330px; transform: rotate(9.6deg); transform-origin: right center; }
.confluence .resolution { position: absolute; top: 79.7%; width: 100%; text-align: center; }
.confluence h1 { font: 63px/1.1 var(--serif); font-weight: normal; letter-spacing: -.045em; }
.confluence h1 em { font-weight: normal; }

@media (max-width: 650px) {
  .scene { min-height: 844px; }
  .symbol { width: 28px; height: 28px; top: 25px; left: 26px; }
  .entry .world img { object-position: 50% 50%; }
  .entry .veil { background: linear-gradient(180deg, rgba(250,248,242,.96) 0%, rgba(250,248,242,.92) 24%, rgba(250,248,242,.78) 40%, rgba(250,248,242,.07) 75%, transparent 100%); }
  .entry .signature { top: 23%; width: 270px; }
  .entry .tagline { font-size: 20px; margin-top: 22px; }
  .entry .quiet-line { bottom: 28px; height: 30px; }
  .encounter .character { width: 284px; left: calc(50% - 142px); bottom: 99px; }
  .encounter .contact-shadow { width: 141px; left: calc(50% - 65px); height: 19px; bottom: 143px; filter: blur(7px); }
  .fork h1 { top: 40px; font-size: 30px; padding: 0 36px; line-height: 1.13; }
  .currents { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .current-water { border-right: 0; border-bottom: 1px solid rgba(250,248,242,.35); }
  .current-water .landscape img { object-position: 10% 65%; }
  .current-craft .landscape img { object-position: 90% 65%; }
  .current-copy { left: 30px; bottom: 38px; }
  .current h2 { font-size: 46px; margin-top: 13px; }
  .current .overline { font-size: 10px; }
  .current .underline { width: 49px; margin-top: 20px; }
  .curiosity .poem { top: 88px; left: 29px; width: calc(100% - 58px); }
  .curiosity h1 { font-size: 53px; line-height: 1.02; margin-top: 14px; }
  .curiosity h1 br.optional-break { display: none; }
  .curiosity .explanation { font-size: 14px; line-height: 1.7; max-width: 307px; margin-top: 20px; }
  .curiosity .reflection-world { left: 0; top: 48%; width: 100%; height: 52%; }
  .curiosity .upright { height: 59%; object-position: 50% 60%; }
  .curiosity .reflected { top: 59%; height: 52%; object-position: 72% 5%; }
  .curiosity .water-veil { top: 59%; height: 41%; }
  .curiosity .horizon { top: calc(59% + 18px); }
  .craft .craft-heading { top: 97px; left: 28px; right: 20px; }
  .craft h1 { font-size: 45px; line-height: 1.06; }
  .craft h1 .desktop-break { display: none; }
  .craft .material-study { --art-width: 342px; left: 24px; top: 330px; height: 338px; }
  .material-study .piece { background-size: 600px auto; }
  .material-study .p1 { left: 0; top: 75px; width: 14px; height: 140px; background-position: -140px -75px; }
  .material-study .p2 { left: 21px; top: 20px; width: 14px; height: 215px; background-position: -161px -20px; }
  .material-study .p3 { left: 43px; top: 112px; width: 20px; height: 210px; background-position: -183px -112px; }
  .material-study .p4 { left: 70px; top: 54px; width: 24px; height: 262px; background-position: -210px -54px; }
  .material-study .p5 { left: 101px; top: 20px; width: 27px; height: 307px; background-position: -241px -20px; }
  .material-study .p6 { left: 134px; top: 10px; width: 39px; height: 318px; background-position: -274px -10px; }
  .material-study .p7 { left: 178px; top: 0; width: 49px; height: 338px; background-position: -318px 0; }
  .material-study .p8 { left: 231px; top: 0; width: 111px; height: 338px; background-position: -371px 0; }
  .craft .study-labels { top: 706px; left: 24px; width: 342px; font-size: 10px; letter-spacing: .025em; padding-top: 13px; }
  .craft .character { top: 523px; width: 133px; left: 220px; }
  .confluence .world { height: 72%; }
  .confluence .world img { width: 100%; object-position: 52% center; transform: none; }
  .confluence .character { top: 157px; width: 350px; left: -42px; }
  .confluence .contact-shadow { left: 39px; top: 431px; width: 206px; height: 18px; filter: blur(8px); }
  .confluence .mouth-copy { left: 241px; right: 17px; font-size: 22px; line-height: 1.22; }
  .confluence .mouth-copy::before { width: 40px; top: 14px; right: calc(100% + 11px); }
  .confluence .upper-mouth { top: 289px; }
  .confluence .lower-mouth { top: 363px; }
  .confluence .upper-mouth::before { width: 40px; transform: none; }
  .confluence .lower-mouth::before { width: 70px; transform: rotate(38deg); }
  .confluence .resolution { top: 77%; padding: 0 24px; }
  .confluence h1 { font-size: 46px; line-height: 1.07; }
  .confluence h1 em { display: block; }
}