/* Scenes 01–02. All absolute layers are owned and paint-clipped by their scene.
   Percentages below describe image crops/layer geometry, not document widths. */
.arrival {
  min-block-size:100svh;
  padding-block:calc(var(--header-height) + var(--space-8)) var(--space-11);
  display:grid;
  align-items:center;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  background:var(--paper);
}
.arrival-background,.arrival-shade,.arrival-grid { position:absolute; inset:0; }
.arrival-background { z-index:0; }
.arrival-background picture { display:block; inline-size:100%; block-size:100%; }
.arrival-background img { display:block; object-position:right center; }
.arrival-shade {
  z-index:1;
  /* Paper under the reading column; preserve photographic blacks at the right. */
  background:linear-gradient(90deg,var(--paper) 12%,color-mix(in srgb,var(--paper) 98%,transparent) 34%,color-mix(in srgb,var(--paper) 78%,transparent) 48%,color-mix(in srgb,var(--paper) 12%,transparent) 72%,transparent),linear-gradient(180deg,color-mix(in srgb,var(--paper) 45%,transparent),transparent 28%);
}
.arrival-grid { z-index:2; opacity:.08; mask-image:linear-gradient(90deg,#000,transparent 60%); }
.arrival-copy { position:relative; z-index:3; max-inline-size:var(--content-details); }
.arrival .kicker { display:flex; align-items:center; gap:var(--space-3); }
.arrival .kicker::before { content:""; inline-size:var(--space-5); block-size:var(--border-hairline); background:currentColor; flex-shrink:0; }
.arrival h1 { margin-block:var(--space-5) var(--space-7); }
.opening-line { display:block; }
/* ScrollTrigger rounds pin widths to whole CSS pixels. At fractional browser
   scaling the page can be 1264.8px wide while its pin becomes 1265px. Keep both
   boxes container-sized; these two overrides intentionally beat GSAP inline
   width/max-width, including the cached fixed-position state restored on scroll. */
.pin-spacer:has(> .arrival),.pin-spacer > .arrival {
  inline-size:100% !important;
  max-inline-size:100% !important;
}
.arrival-lede { max-inline-size:var(--content-narrow); color:var(--muted); }
.scroll-cue { display:inline-flex; align-items:center; gap:var(--space-4); margin-top:var(--space-6); padding-block:var(--space-2); color:var(--ink); }
.scroll-cue-icon { display:grid; place-items:center; flex:0 0 var(--space-7); inline-size:var(--space-7); block-size:var(--space-7); border:var(--border-hairline) solid var(--accent); border-radius:var(--radius-orbit); color:var(--accent); transition:background var(--duration-ui) var(--ease-ui),color var(--duration-ui) var(--ease-ui); }
.scroll-cue:hover .scroll-cue-icon,.scroll-cue:focus-visible .scroll-cue-icon { background:var(--accent); color:var(--paper); }
.arrival-orbit { position:absolute; z-index:3; right:var(--page-gutter); bottom:var(--space-10); inline-size:32%; block-size:38%; display:grid; place-items:center; opacity:.3; pointer-events:none; }
.orbit-ring { position:absolute; border:var(--border-hairline) solid #8d88e8; transform:rotate(-25deg); }
/* Preserve 450×170 and 300×500 ornament proportions, capped to their owner.
   These are named artwork dimensions, never content/grid widths. */
.ring-a { inline-size:100%; max-inline-size:28.125rem; aspect-ratio:45/17; }
.ring-b { inline-size:100%; max-inline-size:18.75rem; aspect-ratio:3/5; transform:rotate(55deg); }
.arrival-transition { position:absolute; inset:78% 0 0; z-index:4; pointer-events:none; opacity:.2; background:linear-gradient(transparent,var(--surface-dark)); }
.opening-rule { position:absolute; inset:auto var(--layout-inset) var(--space-6); block-size:var(--border-hairline); background:var(--accent); z-index:5; transform-origin:left center; pointer-events:none; }
.arrival .opening-rule { inset-block-end:0; }
.scene-index { position:absolute; right:var(--layout-inset); bottom:var(--space-8); z-index:5; color:var(--muted); }
.arrival .scene-index { color:var(--paper); }
.experience { padding-block:var(--section-space-roomy); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--space-11); align-items:start; }
.experience-image { position:absolute; inset:0; opacity:.28; pointer-events:none; mask-image:linear-gradient(90deg,transparent 20%,#000); }
.experience-image img { object-position:72% center; }
.experience::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--surface-dark),transparent 50%,var(--surface-dark)); pointer-events:none; }
.experience-intro,.era-list { position:relative; z-index:2; }
.experience-intro h2 { margin-block:var(--space-6) var(--space-7); }
.experience-intro h2 em { color:var(--color-accent-on-dark); }
.section-lede { max-inline-size:var(--content-narrow); color:var(--color-muted-on-dark); }
.era-list { padding-top:var(--space-11); align-self:start; }
.era { display:grid; grid-template-columns:var(--space-7) minmax(0,1fr); padding-block:var(--space-7); column-gap:var(--space-5); border-top:var(--border-hairline) solid var(--color-line-on-dark); }
.era:last-child { border-bottom:var(--border-hairline) solid var(--color-line-on-dark); }
.era span { color:var(--color-accent-on-dark); }
.era small { grid-column:2; color:var(--color-muted-on-dark); margin-top:var(--space-3); }
.motion-lines { position:absolute; inset:0; opacity:.12; pointer-events:none; }
/* Full-bleed ellipses intentionally cross the scene edge; their owner clips paint. */
.motion-lines i { display:block; position:absolute; inline-size:70%; aspect-ratio:7/3; border:var(--border-hairline) solid #7873d0; transform:rotate(-30deg); }
.motion-lines i:nth-child(1) { top:10%; right:-20%; }
.motion-lines i:nth-child(2) { top:25%; right:-15%; }
.motion-lines i:nth-child(3) { top:40%; right:-10%; }
.motion-lines i:nth-child(4) { top:55%; right:-5%; }
.experience .opening-rule { inset:0 var(--layout-inset) auto; background:var(--color-accent-on-dark); }
/* 1024×700 is the existing reading-space threshold; JS adds fine-pointer gating. */
@media(min-width:1024px) and (min-height:700px) { .experience-intro { position:sticky; top:calc(var(--header-height) + var(--space-7)); } }
@media(max-width:1023px), (max-height:699px) { .experience { gap:var(--space-8); } .era-list { padding-top:var(--space-7); } }
@media(max-width:1023px) {
  /* Two editorial beats: readable paper, then the uncrowded walking portrait.
     The image occupies its own grid row rather than sitting behind mobile text. */
  .arrival { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:start; padding:calc(var(--header-height) + var(--space-7)) 0 0; }
  .arrival-copy { grid-area:1/1; padding-inline:var(--page-gutter); padding-bottom:var(--space-5); }
  .arrival-background { position:relative; inset:auto; grid-area:2/1; align-self:stretch; min-block-size:45svh; }
  .arrival-background picture { position:absolute; inset:0; }
  .arrival-background img { object-position:62% top; }
  .arrival-shade { background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 15%,transparent) 22%,transparent 40%); }
  .arrival-grid { display:none; }
  .arrival-orbit { display:none; }
  .arrival-transition { opacity:1; }
  .scroll-cue { margin-top:var(--space-3); }
}
@media(max-width:700px) {
  .motion-lines { display:none; }
  .experience { display:block; padding-block:var(--section-space); }
  .era-list { margin-top:var(--space-8); padding-top:0; }
  .era { padding-block:var(--space-6); }
  .experience-image { opacity:.12; }
}
@media(prefers-reduced-motion:reduce) { .arrival-transition { opacity:1; } .experience-intro { position:relative; top:auto; } }