/* the remainder Is productions · trI 1 · theremainderis.com
   the stone fills the frame like a wall seen from the fondamenta; under it a typed spine with Venice's clock */
@font-face{font-family:"Courier Prime";src:url(/fonts/CourierPrime-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --lagoon:#08090d;         /* the lagoon before first light */
  --type:#c2bbb0;           /* typewriter ink under a Venetian lantern */
  --type-dim:#8a837a;       /* 5.3:1 on the lagoon */
  --rule:#24211e;
  --dawn:#e5632d;
  --face:"Courier Prime","Courier New",Courier,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--lagoon)}
body{color:var(--type);font:15px/1.5 var(--face);-webkit-text-size-adjust:100%}
.wrap{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:16px;
  padding-block:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  /* the stone and the line under it share one width, capped so both fit above the fold (150 px kept for the line) */
  --w:min(100%,1080px,max(280px,calc((100vh - 150px)*1400/772)))}
@supports (height:100svh){.wrap{--w:min(100%,1080px,max(280px,calc((100svh - 150px)*1400/772)))}}
.wrap>*{width:var(--w);margin-inline:auto}
h1{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stage{position:relative;aspect-ratio:1400/772;isolation:isolate;background:var(--lagoon);overflow:hidden}
.stage img,.stage .lay{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;pointer-events:none}
#b,.veil{opacity:0}
.water{mix-blend-mode:plus-lighter;opacity:0;background-size:34% auto;background-repeat:repeat;
  -webkit-mask-image:url(/marker-reach.png);mask-image:url(/marker-reach.png);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.w1{animation:drift 9s linear infinite}.w2{animation:drift 13s linear infinite reverse;background-size:27% auto}
.fog{background:url(/fog.webp) 0 0/160% auto repeat;opacity:0;animation:fogd 90s linear infinite}
.easing .water,.easing .fog{transition:opacity 1.4s linear}
.veil.fade{transition:opacity 1.4s linear}
@keyframes drift{from{background-position:0 0}to{background-position:-34% 6%}}
@keyframes fogd{from{background-position:0 0}to{background-position:-160% 0}}
.spine{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding-top:12px}
.clock{font-size:15px;color:var(--type);font-variant-numeric:tabular-nums;min-width:0}
.cat{letter-spacing:.06em;color:var(--type-dim);margin-right:8px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;transition:opacity 1.2s ease}
/* the controls show themselves, then fade; a touch, a move or a key brings them back */
.controls.rest{opacity:0;pointer-events:none}
.controls.rest:focus-within{opacity:1;pointer-events:auto}
button{font:inherit;font-size:14px;color:var(--type);background:transparent;border:1px solid var(--rule);border-radius:2px;padding:6px 12px;cursor:pointer;min-height:32px}
button:hover{border-color:var(--type-dim)}
#b-dawn{min-width:calc(12ch + 26px)}   /* both labels, one width: the button never moves under the hand */
button[aria-pressed="true"],button.on{color:#f3e8dc;border-color:var(--dawn)}
button:focus-visible,a:focus-visible{outline:2px solid var(--dawn);outline-offset:2px}
a{color:var(--type);text-underline-offset:3px}
a:hover{color:#f3e8dc}
.msg{margin:0}
@media (prefers-reduced-motion:reduce){.w1,.w2,.fog{animation:none}}