/* Source typography and choreography; v30 changes the final source gradient to blue.
   These tokens belong only to this reference sequence, not the global system. */
@font-face { font-family: 'Poto Reference Bold'; src: url('./assets/cabinet-grotesk-bold-v28.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poto Reference Variable'; src: url('./assets/cabinet-grotesk-variable-v28.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
.portfolio-story { --reference-paper: var(--poto-paper); --reference-dark: #1f1d1d; --reference-display-size: 12vw; --reference-title-size: 12vw; --reference-tracking: -.025em; --reference-story-size: 10vw; --reference-gradient: radial-gradient(ellipse at calc(75% + var(--journey-pointer-x, 0%)) calc(25% + var(--journey-pointer-y, 0%)), var(--poto-blue-light), transparent 58%), radial-gradient(ellipse at calc(25% + var(--journey-pointer-x, 0%)) calc(80% + var(--journey-pointer-y, 0%)), var(--poto-blue-mid), transparent 65%), var(--poto-blue-deep); padding-top: 0; }
.reference-section { width: 100%; margin: 0; scroll-margin-top: 0; color: var(--reference-dark); background: var(--reference-dark); }
.reference-frame { position: relative; display: flex; align-items: center; width: 100%; height: 100svh; min-height: 0; overflow: clip; }
.manifesto-frame { background: var(--reference-paper); transform-origin: center top; }
.reference-text { margin: 0; padding: var(--poto-space-xl); width: 100%; color: var(--reference-dark); font: 700 var(--reference-display-size)/1 'Poto Reference Bold', Arial, sans-serif; letter-spacing: var(--reference-tracking); text-wrap: balance; text-align: center; }
.manifesto-section.is-enhanced { height: calc(100svh + var(--manifesto-scroll)); }
.is-enhanced .manifesto-frame { position: sticky; top: 0; }
.is-enhanced .reference-text { display: flex; width: max-content; padding: 0 101vw; white-space: nowrap; text-wrap: nowrap; text-align: left; }
.reference-letter { display: inline-block; white-space: pre; transform-origin: 50% 75%; }
.journey-title-frame { justify-content: center; background: var(--reference-dark); }
/* The approved desktop greeting sits above the existing centered title.
   Photo, type, gap and corner size derive from the current local tokens. */
.journey-person { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(50% + var(--reference-title-size) / 2 + var(--poto-space-xl)); display: flex; justify-content: center; align-items: center; gap: var(--poto-space-xl); padding: 0 var(--poto-space-xl); color: var(--reference-paper); opacity: var(--person-presence, 1); }
.journey-greeting { flex: 0 0 auto; font: 300 clamp(var(--poto-space-lg), calc(var(--reference-title-size) * .18), var(--poto-control-height))/1.2 'Poto Reference Variable', Arial, sans-serif; white-space: nowrap; opacity: var(--greeting-entry, 1); }
.journey-portrait { display: block; flex: 0 0 auto; width: min(calc(var(--reference-title-size) + var(--poto-space-md)), calc(var(--poto-space-xxl) * 5)); height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--poto-space-sm); opacity: var(--portrait-entry, 1); transform: translate3d(0, calc((1 - var(--portrait-entry, 1)) * var(--poto-space-md)), 0); }
.reference-title { margin: 0; color: var(--reference-paper); font: 700 var(--reference-title-size)/1 'Poto Reference Variable', Arial, sans-serif; letter-spacing: var(--reference-tracking); text-align: center; white-space: nowrap; }
.journey-heading { min-height: 100svh; }
.is-enhanced .journey-heading { height: calc(100svh + var(--journey-title-scroll)); }
.is-enhanced .journey-title-frame, .is-enhanced .journey-frame { position: sticky; top: 0; }
.journey-sequence { background: var(--reference-dark); }
.is-enhanced .journey-sequence { height: calc(100svh + var(--journey-scroll)); }
/* Main desktop handoff shares the departing title viewport with First.
   Keep the title frame above the incoming scene until its native exit. */
.journey-section--portrait.is-enhanced .journey-heading { position: relative; z-index: 1; }
.journey-section--portrait.is-enhanced .journey-sequence { margin-top: calc(-1 * var(--journey-handoff-overlap, 0px)); }
.journey-frame { justify-content: center; background: var(--reference-dark); transform-origin: center top; }
.journey-copy { position: relative; z-index: 2; width: 100%; color: var(--reference-paper); text-align: center; font: 700 var(--reference-story-size)/.9 'Poto Reference Bold', Arial, sans-serif; letter-spacing: var(--reference-tracking); }
.journey-copy p { margin: 0 0 var(--poto-space-xl); }
.is-enhanced .journey-copy { height: 0; }
.is-enhanced .journey-copy p { position: absolute; top: 0; left: 0; width: 100%; margin: -.45em 0 0; }
.is-enhanced .journey-copy p:has(br) { margin-top: -.9em; }
.journey-frame.is-dialogue { background: var(--reference-paper); }
.journey-frame.is-dialogue .journey-copy { color: var(--reference-dark); }
.journey-frame.is-gradient .journey-copy { color: var(--reference-paper); }
/* The first line starts centered in the band, then shifts by half a line as
   the second joins. Size and spacing retain the established closing layout. */
.journey-ending { color: var(--reference-paper); line-height: 1.2; padding: var(--poto-space-xxl) var(--poto-space-xl); border-radius: var(--poto-card-radius); background: var(--reference-gradient); }
.journey-ending-line { display: block; }
.is-enhanced .journey-copy .journey-ending { margin-top: -1.2em; padding: 0 var(--poto-space-xl); border-radius: 0; background: none; font-size: calc(var(--reference-story-size) * .6); transform: translate3d(0, calc(.6em * (1 - var(--ending-stack, 1))), 0); }
.is-enhanced .journey-ending-line { opacity: var(--ending-line-reveal, 1); transform: translate3d(0, calc(var(--poto-space-md) * (1 - var(--ending-line-reveal, 1))), 0); }
.journey-visuals { position: absolute; inset: 0; pointer-events: none; }
.journey-visual { position: absolute; top: 50%; width: 48vw; height: 30svh; background: var(--reference-gradient); background-size: 100vw 100svh; background-repeat: no-repeat; }
.journey-visual-left { left: 0; background-position: left center; }
.journey-visual-right { right: 0; background-position: right center; }
/* Generated SVG turbulence is local grain, not a downloaded/generated photograph. */
.journey-visual::after { position: absolute; inset: 0; content: ''; opacity: .15; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h128v128H0z'/%3E%3C/svg%3E"); }
.is-outline .journey-together { -webkit-text-stroke: 1.5px var(--reference-paper); }
.is-outline .journey-together .reference-letter { color: transparent; transition: color 400ms var(--poto-ease); }
.is-outline .journey-together:hover .reference-letter { color: var(--reference-paper); }
.reference-scroll-hint { position: absolute; bottom: var(--poto-space-xxl); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--poto-space-sm); min-width: var(--poto-control-height); min-height: var(--poto-control-height); padding: var(--poto-space-sm); color: var(--reference-dark); border: 0; background: none; font: 400 .75rem/1.4 Arial, sans-serif; cursor: pointer; }
.reference-scroll-hint svg { width: var(--poto-space-lg); height: var(--poto-space-lg); }
.hint-stem { transform-origin: 12px 5px; }
.reference-scroll-hint:focus-visible { outline-color: var(--reference-dark); }
.reference-section h2:focus { outline: none; }
.reference-section ::selection { color: var(--reference-paper); background: var(--reference-dark); }
.journey-section ::selection { color: var(--reference-dark); background: var(--reference-paper); }
.reference-rail { position: fixed; z-index: 9; bottom: clamp(24px, 4vh, 40px); left: clamp(20px, 2vw, 32px); display: flex; flex-direction: column; align-items: flex-start; color: var(--reference-dark); }
.reference-rail.is-dark { color: var(--reference-paper); }
/* The verified source's 18px rail targets expand to 24px for narrow targets. */
.reference-rail a { position: relative; display: flex; align-items: center; width: 52px; min-height: var(--poto-space-lg); color: inherit; }
.reference-rail a > span { display: block; position: relative; width: 12px; height: 2px; background: currentColor; opacity: .75; transform-origin: left; transition: width 450ms var(--poto-ease), opacity 350ms var(--poto-ease); }
.reference-rail a.is-neighbor > span { width: 28px; opacity: .9; }
.reference-rail a[aria-current='location'] > span { width: 48px; opacity: 1; }
.reference-rail a[aria-current='location'] > span::after { position: absolute; inset: 0; content: ''; background: currentColor; transform: scaleX(var(--reference-progress, 0)); transform-origin: left; }
.reference-rail a::after { content: attr(aria-label); position: absolute; top: 50%; left: calc(100% + var(--poto-space-sm)); color: inherit; font: 400 .875rem/1 Arial, sans-serif; opacity: 0; transform: translateY(-50%); pointer-events: none; }
.reference-rail a:is(:hover, :focus-visible)::after { opacity: .8; }
.reference-rail a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.is-reading-reference .story-nav { visibility: hidden; pointer-events: none; }
@media (max-width: 600px) {
  .portfolio-story { --reference-display-size: clamp(52px, 15vw, 72px); --reference-title-size: clamp(52px, 15vw, 72px); --reference-story-size: clamp(42px, 12vw, 60px); }
  .reference-text { padding: var(--poto-space-md); }
  .reference-rail { left: var(--poto-space-md); }
  .journey-together { font-size: clamp(32px, 10vw, 42px); }
}

/* A complete static reading flow, including no-JS, rather than hidden slides. */
.journey-section:not(.is-enhanced) .journey-title-frame { height: auto; min-height: 50svh; padding: var(--poto-space-xl); }
.journey-section--portrait:not(.is-enhanced) .journey-title-frame { flex-direction: column; gap: var(--poto-space-xl); }
.journey-section:not(.is-enhanced) .journey-person { position: static; opacity: 1; }
.journey-section:not(.is-enhanced) :is(.journey-greeting, .journey-portrait) { opacity: 1; transform: none; }
.journey-section:not(.is-enhanced) .journey-frame { height: auto; min-height: 100svh; padding: var(--poto-space-xxl) var(--poto-space-lg); }
.journey-section:not(.is-enhanced) .journey-copy { font-size: clamp(2rem, 6vw, 4rem); }
.journey-section:not(.is-enhanced) .journey-visuals { display: none; }
.reduce-motion .reference-section { height: auto; }
.reduce-motion .reference-frame { position: relative; }
.reduce-motion .reference-text { display: block; width: 100%; padding: var(--poto-space-xl); white-space: normal; text-wrap: balance; text-align: center; transform: none !important; }
.reduce-motion .reference-letter { display: inline; white-space: normal; transform: none !important; }
.reduce-motion .reference-title, .reduce-motion .manifesto-frame { transform: none !important; }
.reduce-motion .journey-person, .reduce-motion :is(.journey-greeting, .journey-portrait) { opacity: 1; transform: none; }
.reduce-motion .reference-rail a > span { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .journey-section--portrait .journey-sequence { margin-top: 0 !important; }
  .journey-copy .journey-ending { padding: var(--poto-space-xxl) var(--poto-space-xl) !important; border-radius: var(--poto-card-radius); background: var(--reference-gradient); font-size: inherit !important; }
  .journey-ending-line { opacity: 1 !important; transform: none !important; }
  .reference-section.is-enhanced, .journey-heading, .journey-sequence { height: auto !important; }
  .reference-frame { position: relative !important; }
  .reference-text { display: block !important; width: 100% !important; padding: var(--poto-space-xl) !important; white-space: normal !important; text-wrap: balance !important; text-align: center !important; transform: none !important; }
  .reference-title, .reference-letter, .manifesto-frame { transform: none !important; }
  .reference-letter { display: inline; white-space: normal; }
  .journey-title-frame { height: auto; min-height: 50svh; padding: var(--poto-space-xl); }
  .journey-section--portrait .journey-title-frame { flex-direction: column; gap: var(--poto-space-xl); }
  .journey-person { position: static; opacity: 1; }
  .journey-greeting, .journey-portrait { opacity: 1; transform: none; }
  .journey-frame { height: auto; min-height: 100svh; padding: var(--poto-space-xxl) var(--poto-space-lg); }
  .journey-copy { height: auto !important; font-size: clamp(2rem, 6vw, 4rem); }
  .journey-copy p { position: static !important; margin: 0 0 var(--poto-space-xl) !important; transform: none !important; visibility: visible !important; }
  .journey-visuals { display: none; }
  .reference-rail a > span, .journey-together .reference-letter { transition: none; }
}

/* Restore the approved centered desktop statement at its earlier 75% size.
   The summary reserves its full space while phrases reveal on scroll.
   These local rules leave shared tokens and the legacy O treatment intact. */
.manifesto-section--compact .manifesto-frame { flex-direction: column; justify-content: center; gap: var(--poto-space-xl); padding: 0 var(--poto-space-xl); }
.manifesto-section--compact .reference-text { display: block; width: 100%; padding: 0; font-size: calc(var(--reference-display-size) * .75); white-space: normal; text-wrap: balance; text-align: center; }
.manifesto-summary { width: 100%; max-width: calc(var(--poto-intro-width) + var(--poto-space-xl) * 2); margin: 0; color: var(--reference-dark); text-align: center; text-wrap: balance;
  font: 300 clamp(var(--poto-space-md), calc(var(--reference-display-size) * .2), var(--poto-space-xl))/1.4 'Poto Reference Variable', Arial, sans-serif; }
.manifesto-section--compact.is-enhanced .manifesto-phrase { opacity: var(--phrase-reveal, 0); }
.reduce-motion .manifesto-section--compact .manifesto-phrase { opacity: 1; }
@media (max-width: 600px) {
  .manifesto-section--compact .manifesto-frame { gap: var(--poto-space-lg); padding: 0 var(--poto-space-lg); }
}
@media (max-height: 600px) {
  /* Local height cap leaves room for the supporting sentence and scroll cue. */
  .manifesto-section--compact .manifesto-frame { gap: var(--poto-space-md); }
  .manifesto-section--compact .reference-text { font-size: min(calc(var(--reference-display-size) * .75), 18svh); }
  .manifesto-section--compact .reference-scroll-hint { bottom: var(--poto-space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto-section--compact .manifesto-phrase { opacity: 1; }
}