/* OPEN EDITION / kinetic print. A bounded sculpture connects About and Footer.
   Reading and action planes always remain above its path. */
:root { --fast: 150ms; --normal: 280ms; --slow: 650ms; --section: 1100ms; }
.masthead { perspective: 1400px; }
.masthead h1 { font-weight: 700; }
.title-gb { color: var(--blue); position: relative; }
.gb-static { display: none; }
.title-gb .gb-text { display: inline-block; }
.title-word { transform-origin: 50% 100%; }
.title-gb::after {
  content: 'GB' / ''; position: absolute; inset: 0; pointer-events: none;
  color: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 31%, 0 70%);
  transform: translateY(calc(var(--chapter, 0) * -20px));
}
.title-stop { background: var(--ink); }
.edition-wall { perspective: 1600px; background: var(--ink); }
.edition-panel { transform-origin: left center; }
.panel-art { perspective: 1600px; }
.panel-art > svg { overflow: visible; }
.depth-front, .depth-back { transform-box: view-box; transform-origin: 50% 50%; }
.fold-leaf { transform-box: fill-box; transform-origin: 50% 50%; }
html[data-folio='ready'] .depth-front, html[data-folio='ready'] .depth-back {
  transition: none;
}
/* Finite opening: a title typesets, then the same five prints unfold. */
html[data-space-init='PENDING'] .title-word { clip-path: inset(0 0 100% 0); transform: translateY(-12px) rotateX(-24deg); }
html[data-space-init='PENDING'] .panel-art { clip-path: none; }
html[data-space-init='PENDING'] .panel-art .depth-front { transform: translate(0, 85px) scaleY(.18) rotate(-12deg); opacity: .15; }
html[data-space-init='PENDING'] .panel-art .depth-back { transform: translate(0, 36px) rotate(13deg); }
html[data-space-init='PLAYING'] .title-word { animation: folio-type 1.05s var(--ease) both; }
html[data-space-init='PLAYING'] .title-word:nth-child(2) { animation-delay: .14s; }
html[data-space-init='PLAYING'] .panel-art { animation: none; clip-path: none; }
html[data-space-init='PLAYING'] .panel-art .depth-back { animation: folio-back 1.25s .12s var(--ease) both; }
html[data-space-init='PLAYING'] .panel-art .depth-front { animation: folio-front 1.5s .24s var(--ease) both; }
html[data-space-init='PLAYING'] .edition-panel:nth-child(even) .depth-front { animation-delay: .4s; }
@keyframes folio-type {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-12px) rotateX(-24deg); }
  to { clip-path: inset(-10% -8% -10% -8%); transform: none; }
}
@keyframes folio-front {
  from { transform: translate(0, 85px) scaleY(.18) rotate(-12deg); opacity: .15; }
  55% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@keyframes folio-back { from { transform: translate(0, 36px) rotate(13deg); } to { transform: none; } }
.project-cover { isolation: isolate; }
.folio-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.folio-art > svg { width: 100%; height: 100%; display: block; }
.project-cover .cover-fallback { position: relative; z-index: 0; }
.folio-art .cover-only { display: none; }
.cover-open { z-index: 2; }
.project-cover::after {
  content: ''; position: absolute; inset: 0; border: 1px solid #10161309;
  pointer-events: none; z-index: 3;
}
.cover-action { opacity: 1; transform: none; transition: background var(--normal), color var(--normal); }
.cover-open:hover .cover-action, .cover-open:focus-visible .cover-action { background: var(--ink); color: var(--paper); }
.cover-action > span { transition: transform var(--normal) var(--ease); }
.cover-open:hover .cover-action > span, .cover-open:focus-visible .cover-action > span { transform: rotate(45deg); }
.project h3 a > span { display: inline-block; transition: transform var(--normal) var(--ease); }
.project h3 a:hover > span { transform: translate(3px, -3px); }
.project--agri .project-cover { min-height: 400px; }
.project-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
.project-description { max-width: 44em; }
.about { background: #244bfa; overflow: visible; }
.about-inner { min-height: 680px; }
.about-layout { grid-template-columns: 3fr 9fr; gap: 32px; margin-top: 72px; }
.about-aside { position: relative; z-index: 2; align-self: start; }
.about-text { font-size: clamp(40px, 5.6vw, 92px); line-height: 1.08; letter-spacing: -.06em; }
.about-text span:first-child { color: #d3dcff; }
.about-quote-wrap { position: relative; z-index: 2; }
.about-imprint { display: none; }
.edition-sculpture {
  position: absolute; left: -18px; bottom: -34px; width: 29%;
  height: 510px; pointer-events: none; overflow: hidden; z-index: 0;
  transform-origin: 50% 50%;
}
.edition-sculpture img { width: 100%; height: 100%; object-fit: contain; }
.edition-sculpture canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.edition-sculpture[data-material='ready'] > img { visibility: hidden; }
.edition-sculpture:not([data-material='ready']) canvas { visibility: hidden; }
.about-bottom { position: relative; z-index: 2; }
html[data-folio='ready'] .edition-sculpture {
  left: 0; top: 0; right: auto; bottom: auto; overflow: visible;
}
/* Real occlusion planes: the sculpture passes behind the copy, never over it. */
.about-quote-wrap, .about-aside { background: #244bfa; }
.footer-top > div, .footer-links, .footer-wordmark, .footer-bottom {
  position: relative; z-index: 2; background: var(--paper);
}
.footer-top > div { padding-right: 20px; }
.footer-wordmark { isolation: isolate; }
.footer-wordmark { overflow: hidden; }
.footer-wordmark .footer-name, .footer-wordmark .footer-gb, .footer-wordmark .gb-text {
  display: inline; color: inherit; font: inherit; letter-spacing: inherit; padding: 0; transition: none;
}
.footer-wordmark .footer-name { display: inline-block; transform: translateY(calc((1 - var(--chapter, 1)) * 16px)); }
.footer-wordmark:hover .footer-name, .footer-wordmark:hover .footer-gb, .footer-wordmark:hover .gb-text { transform: none; }
.footer-wordmark .footer-arrow { display: inline-block; color: var(--blue); font-size: .8em; }
.footer-links a > span { transition: transform var(--normal) var(--ease); }
.footer-links a:hover > span { transform: translate(3px, -3px); }
.brand-symbol { transition: transform .5s var(--ease); }
.brand:hover .brand-symbol { transform: rotate(90deg); }
@media (min-width: 801px) and (max-height: 950px) {
  .hero { padding-top: 24px; }
  .masthead { margin-top: 24px; margin-bottom: 22px; }
  .edition-wall { height: clamp(310px, 23.5vw, 360px); }
}
@media (max-width: 1100px) {
  .about-layout { grid-template-columns: 2fr 10fr; }
  .edition-sculpture { width: 20%; left: -12px; height: 360px; }
  .about-inner { min-height: 590px; }
}
@media (max-width: 1000px) {
  .about { overflow: hidden; }
  .about-inner { padding-bottom: 215px; }
  .about-layout { grid-template-columns: 1fr; }
  .about-quote-wrap { padding-left: 0; }
  .edition-sculpture { width: 55%; height: 200px; left: auto; right: 0; bottom: 0; }
  .footer-top { position: relative; z-index: 2; background: var(--paper); }
}
@media (max-width: 800px) {
  .about-layout { grid-template-columns: 1fr; margin-top: 40px; }
  .about-quote-wrap { padding-left: 0; }
  .about-text { font-size: 7.8vw; }
  .edition-sculpture { width: 55%; height: 200px; left: auto; right: 0; bottom: 0; }
}
@media (max-width: 600px) {
  html[data-space-init='PLAYING'] .panel-art .depth-front { animation-duration: .92s; animation-delay: .08s; }
  html[data-space-init='PLAYING'] .edition-panel:nth-child(even) .depth-front { animation-delay: .18s; }
  html[data-space-init='PLAYING'] .panel-art .depth-back { animation-duration: .95s; animation-delay: .08s; }
  .masthead { margin-top: 26px; margin-bottom: 23px; }
  .masthead h1 { font-size: 21.6vw; gap: .04em; }
  .title-gb::after { clip-path: polygon(0 0, 100% 0, 100% 35%, 0 66%); }
  .panel-art > svg { width: 100%; left: 0; transform: none; }
  .folio-art > svg { height: 100%; width: 100%; }
  /* Mobile uses native scroll; cover layers move without a delayed catch-up. */
  html[data-motion='on'] .panel-art .depth-front,
  html[data-motion='on'] .panel-art .depth-back,
  html[data-motion='on'] .folio-art .depth-front,
  html[data-motion='on'] .folio-art .depth-back { transform: revert-layer; }
  .project-cover, .project--arena .project-cover, .project--collab .project-cover, .project--agri .project-cover { aspect-ratio: 1.17; }
  .project--agri .project-cover { min-height: 0; }
  .about-inner { min-height: 0; padding-bottom: 195px; }
  .about-layout { margin-top: 34px; gap: 27px; }
  .about-text { font-size: clamp(31px, 9.8vw, 48px); }
  .about-quote-wrap { padding: 0; }
  .about-text span:nth-child(2) { max-width: 14ch; }
  .edition-sculpture { width: 52%; height: 180px; left: auto; right: 0; bottom: 5px; opacity: 1; }
  .about-bottom { margin-top: 32px; }
  .interests { max-width: 170px; }
  .footer-wordmark { line-height: 1; }
}
html[data-motion='off'] .title-gb::after { transform: none; }
html[data-motion='off'] .folio-art .depth-front,
html[data-motion='off'] .folio-art .depth-back,
html[data-motion='off'] .fold-leaf,
html[data-motion='off'] .edition-sculpture,
html[data-motion='off'] .footer-wordmark .footer-name { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fold-leaf, .edition-sculpture, .footer-wordmark .footer-name, .title-gb::after { transform: none !important; }
}