@font-face{font-family:Anton;src:url('assets/Anton-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('assets/IBMPlexMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#b5b36c;--ink:#24271f;--subtitle:#e9e5d1;--edge:3.2vw}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Plex,'Courier New',monospace}body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.085;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}::selection{color:var(--paper);background:var(--ink)}.stage{padding:0 var(--edge);max-width:2200px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column}.masthead,.colophon{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:clamp(10px,.94vw,16px);line-height:1.5;letter-spacing:.06em}.masthead{min-height:55px;padding-top:6px}.small-name{letter-spacing:.22em}.medium{text-align:center}.place{text-align:right}.title{font-family:Anton,Impact,'Arial Narrow',sans-serif;font-size:27vw;font-weight:400;line-height:1.02;letter-spacing:-.035em;margin:-5px 0 12px;white-space:nowrap}.frame{position:relative;isolation:isolate;margin:0;overflow:hidden;aspect-ratio:2.86;background:var(--ink);flex-grow:1;min-height:310px;max-height:65vh}.still{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 61%;display:block;animation:linger 48s ease-in-out infinite alternate;will-change:transform}.frame.paused .still{animation-play-state:paused}.subtitle{position:absolute;bottom:25px;left:24px;right:24px;text-align:center;color:var(--subtitle);font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(14px,1.1vw,21px);line-height:1.5;letter-spacing:.025em;text-shadow:0 1px 3px #000,0 0 12px #0009;transition:opacity 1.2s;min-height:1.5em}.subtitle.absent{opacity:0}.colophon{min-height:92px;padding:22px 0 24px}.afterimage{text-align:center;font-size:inherit;letter-spacing:.04em}.motion{justify-self:end;display:flex;gap:17px;align-items:center;background:none;border:0;color:inherit;padding:10px 0 10px 15px;font:inherit;letter-spacing:.1em;cursor:pointer}.motion[hidden]{display:none}.motion svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}.play-icon{display:none}.motion[aria-pressed=true] .play-icon{display:block}.motion[aria-pressed=true] .pause-icon{display:none}.motion:hover .motion-label{text-decoration:underline;text-underline-offset:5px}.motion:focus-visible{outline:1px solid currentColor;outline-offset:7px}.stage.static .still{animation:none;will-change:auto}.stage.static .subtitle{transition:none}.stage.static .afterimage{visibility:visible}@keyframes linger{from{transform:scale(1.025) translateX(-.3%)}to{transform:scale(1.06) translateX(.3%)}}
@media(min-width:1800px){.masthead{min-height:65px}.colophon{min-height:110px}.frame{min-height:430px}}
@media(max-width:700px){:root{--edge:20px}.masthead{min-height:62px;grid-template-columns:1fr 1fr;font-size:10px;letter-spacing:0}.masthead .small-name{display:none}.medium{text-align:left}.title{margin:7px 0 25px;line-height:1.08}.frame{aspect-ratio:.83;min-height:370px;max-height:none;flex-grow:1}.still{object-position:63% 61%}.subtitle{left:15px;right:15px;bottom:27px;font-size:14px;line-height:1.5}.colophon{min-height:110px;grid-template-columns:1fr auto;gap:15px;font-size:10px;padding:23px 0 26px}.colophon .small-name{display:none}.afterimage{text-align:left;letter-spacing:0}.motion{gap:9px;letter-spacing:.03em}.motion svg{width:13px;height:13px}.stage{min-height:100svh}}
@media(max-width:360px){:root{--edge:16px}.frame{min-height:350px}.subtitle{font-size:13px}.afterimage{font-size:9px}}
@media(prefers-reduced-motion:reduce){.still{animation:none;will-change:auto}.subtitle{transition:none}}
@media(min-width:701px){.title{line-height:.82;transform:scaleY(.86);transform-origin:center 55%}}
@media(max-width:700px){.still{object-position:85% 61%}}

/* Images overlap to dissolve without empty frames, text keeps its own rhythm */
.still{opacity:0;transition:opacity 2.4s ease;object-position:50% 61%}.still.is-front{opacity:1}.subtitle{z-index:2;transition:none}.stage.static .still{transition:none}
@media(max-width:700px){.still{object-position:var(--crop,65% 61%)}}
@media(prefers-reduced-motion:reduce){.still,.subtitle{transition:none}}

/* Desktop: the stage is exactly one viewport tall — title keeps full width, photo takes whatever height is left, subtitle and colophon always on screen */
@media(min-width:701px){
  .stage{height:100svh;min-height:520px}
  .masthead,.title,.colophon{flex:none}
  .masthead{min-height:44px;padding-top:4px}
  .title{margin:-.05em 0 0}
  .frame{aspect-ratio:auto;max-height:none;min-height:160px;flex:1 1 0}
  .colophon{min-height:64px;padding:14px 0 16px}
}
@media(min-width:1800px){
  .masthead{min-height:52px}
  .frame{min-height:300px}
  .colophon{min-height:76px}
}

/* Phrases: centred Plex Mono in a cream that screens over the photo. Legibility comes from blending, not from boxes or shadows:
   a multiply grade burns the photo's lower edge (it reads as part of the image, like a lens vignette), the screened text sits in it. */
.frame:after{content:'';position:absolute;left:0;right:0;bottom:0;height:min(42%,250px);z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(20,21,14,.9) 0%,rgba(20,21,14,.6) 40%,rgba(20,21,14,0) 100%);mix-blend-mode:multiply}
.subtitle{left:24px;right:24px;bottom:26px;width:auto;max-width:none;text-align:center;background:none;padding:0;min-height:1.5em;color:#f1ecd2;mix-blend-mode:screen;font-family:Plex,'Courier New',monospace;font-size:clamp(14px,1.15vw,22px);line-height:1.5;letter-spacing:.05em;text-shadow:none}
@media(max-width:700px){.subtitle{left:18px;right:18px;bottom:24px;font-size:13px;letter-spacing:.04em}.frame:after{height:min(34%,200px)}}