@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paint:#ECE8E0;--ink:#0E0E0E;
  --display:"Archivo","Arial Narrow",sans-serif;
  /* painting is 1792x1024: size a "cover" box we can position things on in image coordinates */
  --W:max(100vw,calc(100vh * 1.75));
  --H:max(100vh,calc(100vw / 1.75));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink)}
.stage{position:fixed;width:var(--W);height:var(--H);
  left:clamp(calc(100vw - var(--W)),calc(50vw - .62 * var(--W)),0px);
  top:clamp(calc(100vh - var(--H)),calc(50vh - .75 * var(--H)),0px);
  background:var(--ink) url(/bg-sm.webp) 0 0/100% 100% no-repeat}
.stage::before{content:"";position:absolute;inset:0;background:url(/bg.webp) 0 0/100% 100% no-repeat;opacity:0;animation:show 1.6s ease-out .1s forwards}
/* the word sits in the dark cliff just under the ledge where the two figures stand (x 56%, y 77% of the painting) */
.word{position:absolute;left:56.5%;top:76.5%;margin:0;white-space:nowrap;
  font-family:var(--display);font-weight:900;font-stretch:62%;font-size:calc(var(--W) * .066);line-height:1;letter-spacing:-.005em;text-transform:uppercase;
  color:var(--paint);
  text-shadow:0 -1px 0 rgba(255,255,255,.45),0 .02em 0 rgba(0,0,0,.85),0 .06em .12em rgba(0,0,0,.7),0 0 .6em rgba(0,0,0,.5)}
.caret{display:inline-block;width:.07em;height:.72em;margin-left:.06em;background:var(--paint);box-shadow:0 .02em 0 rgba(0,0,0,.85);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes show{to{opacity:1}}
/* portrait: the cover box shows only a vertical strip; keep the word on screen at the same height */
@media (max-aspect-ratio:1/1){
  .stage{left:clamp(calc(100vw - var(--W)),calc(50vw - .66 * var(--W)),0px)}
  .word{position:fixed;left:7vw;top:83vh;font-size:15.5vw}
}
@media (prefers-reduced-motion:reduce){.caret,.stage::before{animation:none;opacity:1}}