/* ══════════════════════════════════════════════════════════════════════
   WAIT — the visual system.

   One metaphor: THE WORLD MOVES. YOU DON'T.

   Consequences, held to across every page:

   · There is no fixed palette. Every colour on this site is a custom
     property written by world.js from one number, and that number is an
     hour of the day. The site is pale blue at noon, cream and orange at
     six, violet at nine and near-black at two in the morning. Nothing is
     "the background colour" — there is only what time it is.

   · The ink turns over with the light. Dark type on a lit plain in the
     day, warm white at night, and the crossover happens at dawn and at
     dusk when the ground is mid-tone and both would read. That single
     rule is why this site can be bright at all.

   · One sun, one shadow. Every object in the world — the word, the
     photographs, the poles on the ridge — is skewed and stretched by the
     same two variables. They never move. Their shadows sweep.

   · Type is large, warm and slow. A display serif for anything that
     matters and a text serif for everything else. Mono appears exactly
     once, as a camera's burn-in, because that is what it is.

   · No pills, no glow, no boxes. A control here is a word with a rule
     under it, or a photograph, or the ground.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* written per frame by world.js; these are only what the first paint
     lands on before it runs */
  --zenith:#4C8ECB; --upper:#8FBEDF; --lower:#C3D8E2; --horizon:#E4E8E0;
  --g-far:#DDD2B9;  --g-near:#C7BCA3; --ink:#1E1810;  --sun-col:#FFF8E8;
  --glow:.52; --sun-x:50%; --sun-y:22%; --sun-op:1; --sun-blur:3px;
  --moon-x:50%; --moon-y:90%; --moon-op:0; --stars:0; --lamps:0;
  --lit:1; --warm:.1; --sat:1;
  --sh-len:.4; --sh-skew:0deg; --sh-op:.22; --sh-blur:6px;

  /* Fraunces, with its soft terminals and its wonk axis turned on. Old,
     warm, slightly odd, and it has actual weight at three hundred pixels —
     which the previous display face did not. */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --wonk:"SOFT" 55,"WONK" 1;
  --text:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --horizon-at:44vh;      /* where the world folds */
  --wind:0; --mx:0; --my:0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;-webkit-text-size-adjust:100%}
body{background:var(--g-near);color:var(--ink);
  font:300 17px/1.6 var(--text);letter-spacing:.005em;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--horizon)}

/* ════ THE WORLD ════════════════════════════════════════════════════ */
.world{position:fixed;inset:0;z-index:0;overflow:hidden}
/* the camera breathes with the pointer, and each layer takes it at its
   own rate. About twenty pixels at the very front — the cheapest depth
   there is, and the only thing on this page that answers to you. */
[data-par]{will-change:transform}
[data-par="4"] {transform:translate3d(calc(var(--mx) * -4px), calc(var(--my) * -2px),0)}
[data-par="10"]{transform:translate3d(calc(var(--mx) * -10px),calc(var(--my) * -4px),0)}
[data-par="20"]{transform:translate3d(calc(var(--mx) * -20px),calc(var(--my) * -7px),0)}
[data-par="26"]{transform:translate3d(calc(var(--mx) * -26px),calc(var(--my) * -9px),0)}
[data-par="44"]{transform:translate3d(calc(var(--mx) * -44px),calc(var(--my) * -13px),0)}

.sky{position:absolute;left:0;right:0;top:0;height:var(--horizon-at);
  background:linear-gradient(180deg,
    var(--zenith) 0%, var(--upper) 34%, var(--lower) 68%, var(--horizon) 100%);
  overflow:hidden}

.stars{position:absolute;inset:0;opacity:var(--stars)}
.stars i{position:absolute;display:block;background:#FFF6E8;border-radius:50%}

.sun{position:absolute;left:var(--sun-x);top:var(--sun-y);
  transition:left .5s linear,top .5s linear;
  width:9.5vmin;height:9.5vmin;margin:-4.75vmin 0 0 -4.75vmin;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    #FFFDF6 0%, var(--sun-col) 36%, rgba(255,255,255,0) 72%);
  filter:blur(var(--sun-blur));opacity:var(--sun-op)}
.moon{position:absolute;left:var(--moon-x);top:var(--moon-y);
  transition:left .5s linear,top .5s linear;
  width:4.4vmin;height:4.4vmin;margin:-2.2vmin 0 0 -2.2vmin;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFFCF2 0%,#E4E0D2 58%,#B9B6AA 100%);
  box-shadow:0 0 5vmin 1.4vmin rgba(230,232,240,.16);
  opacity:var(--moon-op);filter:blur(.4px)}

/* the haze that sits on the horizon and gets thicker as the sun gets
   lower — the single cheapest thing on the page and it does more for the
   hour than anything else */
.haze{position:absolute;left:0;right:0;bottom:0;height:62%;
  background:radial-gradient(58% 100% at var(--sun-x) 100%,
    var(--sun-col) 0%, rgba(255,255,255,0) 76%);
  opacity:calc(var(--glow) * .78);mix-blend-mode:screen}

/* clouds. Three of them, so wide and so slow that catching one moving
   requires the kind of attention this site is asking for anyway. */
.clouds{position:absolute;inset:0;opacity:calc(.10 + var(--lit) * .30)}
.clouds i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,0));
  mix-blend-mode:screen;will-change:transform}
.c1{left:-40%;top:14%;width:70%;height:16%;animation:drift 300s linear infinite;
  transform:translateX(calc(var(--wind) * 26px))}
.c2{left:-52%;top:33%;width:96%;height:12%;opacity:.7;animation:drift 440s linear infinite -180s}
.c3{left:-30%;top:5%; width:48%;height:11%;opacity:.5;animation:drift 210s linear infinite -90s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(210vw)}}

/* one bird, and it is deliberately too rare to be a feature */
.bird{position:absolute;left:-8%;top:26%;width:3.2vmin;color:var(--ink);
  opacity:0;pointer-events:none}
.bird svg{width:100%;height:auto;display:block}
.bird.fly{animation:cross 44s linear 1}
@keyframes cross{
  0%{opacity:0;transform:translate(0,0)}
  8%{opacity:.32}
  92%{opacity:.32}
  100%{opacity:0;transform:translate(126vw,-9vh)}
}

/* ── the far shore ─────────────────────────────────────────────────── */
.ridge{position:absolute;left:0;right:0;top:calc(var(--horizon-at) - 8vh);height:8vh;
  z-index:2;pointer-events:none}
.ridge svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ridge .far {fill:var(--ink);opacity:calc(.10 + var(--lit) * .07)}
.ridge .near{fill:var(--ink);opacity:calc(.18 + var(--lit) * .12)}
/* the lights on the other side, which come on when it is dark enough to
   want them and go off again when it is not */
.ridge::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(180deg,transparent,var(--g-far));opacity:.85}
.lamps{position:absolute;left:0;right:0;bottom:1px;height:2px;opacity:var(--lamps);z-index:2}
.lamps i{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFCE86;
  box-shadow:0 0 7px 2px rgba(255,190,110,.5)}

/* ── the plain ─────────────────────────────────────────────────────── */
.ground{position:absolute;left:0;right:0;top:var(--horizon-at);bottom:0;z-index:1;
  background:
    radial-gradient(140% 70% at 18% 104%,rgba(0,0,0,.10),transparent 68%),
    radial-gradient(110% 54% at 84% 88%,rgba(255,255,255,.07),transparent 64%),
    linear-gradient(180deg,var(--g-far) 0%,var(--g-far) 9%,var(--g-near) 54%,
      var(--g-near) 78%,rgba(0,0,0,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* the ground darkens toward the viewer at night and lifts at noon, so the
   plain is a plain and not a flat fill */
.ground::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 100%);
  opacity:calc(1 - var(--lit) * .5)}

/* ════ THE SHADOW ═══════════════════════════════════════════════════
   Everything that stands in this world casts the same shadow: mirrored
   down from its own base, skewed by the sun's bearing, stretched by how
   low it is. One rule, and the whole plain is lit by one thing. */
.cast{position:absolute;left:0;bottom:0;width:100%;height:100%;
  transform-origin:50% 100%;
  transform:scaleY(calc(-1 * var(--sh-len))) skewX(var(--sh-skew));
  opacity:var(--sh-op);filter:blur(var(--sh-blur));
  pointer-events:none;z-index:-1}

/* ════ THE PHOTOGRAPHS ══════════════════════════════════════════════
   They are jpegs and they are treated as jpegs. Nothing is cut out,
   feathered, inverted or dissolved — a low-resolution picture of a dog
   sitting down is allowed to look exactly like a low-resolution picture
   of a dog sitting down.

   What makes them belong to the world is not retouching, it is physics:
   each one is a printed photograph standing on the plain. It has a paper
   edge, it is lit by whatever the hour is lighting everything else by, it
   casts the same shadow as the word does, and the further away it stands
   the more of the horizon's colour sits in front of it.

   The border is on the image itself, not on the figure, so the same
   filter that dims the picture at night dims its paper too. */
.crowd{position:absolute;inset:0;z-index:3}
.one{position:absolute;margin:0;transform-origin:50% 100%;
  transform:translateX(-50%) translateY(16px) scale(.985);
  opacity:0;transition:opacity 6s ease,transform 6s cubic-bezier(.16,1,.3,1)}
.one.in{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.one img{height:100%;width:auto;background:#FBF6EC;transform-origin:50% 100%;
  transform:rotate(calc(var(--wind) * var(--sway,.6) * .34deg));
  border:var(--bw,4px) solid #FBF6EC;
  filter:brightness(var(--lit)) sepia(var(--warm)) saturate(var(--sat));
  box-shadow:0 .3vh .9vh rgba(0,0,0,.16)}
/* aerial perspective. The one thing that turns a pile of rectangles into
   a plain with things standing about on it at different distances. */
.one::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--horizon);opacity:calc(var(--d,0) * .55)}
.one .cast{background-size:100% 100%;
  filter:blur(var(--sh-blur)) brightness(0) saturate(0);
  opacity:calc(var(--sh-op) * (1 - var(--d,0) * .7))}

/* ════ TYPE ═════════════════════════════════════════════════════════ */
.stage{position:relative;z-index:3;height:100vh;pointer-events:none}
.stage > *{pointer-events:auto}

/* the word. It is the largest thing on any screen of this site and it is
   the only thing that never changes. */
.mark{position:absolute;left:50%;bottom:calc(100vh - 65vh);transform:translateX(-50%);
  line-height:1;opacity:0;transition:opacity 2.4s ease}
body.lit .mark{opacity:1}
.mark h1,.mark .cast{font-variation-settings:var(--wonk);
  margin:0;font:400 clamp(88px,20vw,340px)/.78 var(--display);
  letter-spacing:.012em;white-space:nowrap;display:block}
.mark h1{color:var(--ink)}
.mark .cast{color:#000;left:0;top:0;bottom:auto;height:auto;width:auto;
  transform-origin:50% 100%;opacity:calc(var(--sh-op) * 1.55)}

.say{position:absolute;left:50%;top:17vh;transform:translateX(-50%);
  margin:0;font:300 italic clamp(18px,2vw,27px)/1.4 var(--text);
  color:var(--ink);opacity:0;transition:opacity 2.4s ease .5s;white-space:nowrap}
body.lit .say{opacity:.8}

/* the burn-in. The one place mono appears on this site, because a camera
   left pointing at a field for a year writes the hour into every frame. */
.burn{position:absolute;left:50%;top:calc(17vh + 3.2em);transform:translateX(-50%);
  margin:0;font:400 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);opacity:0;transition:opacity 2s ease .9s;white-space:nowrap}
body.lit .burn{opacity:.44}

.whisper{position:absolute;left:50%;top:calc(17vh + 5.8em);transform:translateX(-50%);
  margin:0;font:300 italic clamp(15px,1.35vw,18px)/1.4 var(--text);color:var(--ink);
  opacity:0;white-space:nowrap}

/* ════ NAVIGATION ═══════════════════════════════════════════════════
   Not links in the corners. One quiet band along the bottom edge of the
   world, in the same type as everything else, with a rule that draws
   itself under a word when you reach for it. */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:10;text-align:center;
  padding:96px 18px 20px;pointer-events:none}
.rail > *{pointer-events:auto}
/* the last few metres in front of you, which a low sun never reaches.
   It is the ground's own colour, so it is pale at noon and dark at
   midnight and the words on it are legible at both — which is the whole
   reason the ink turns over with the light. */
.nearshade{position:absolute;left:0;right:0;bottom:0;height:23vh;z-index:6;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,.07) 54%,rgba(0,0,0,.16) 100%),
    linear-gradient(180deg,transparent 0%,var(--g-near) 58%,var(--g-near) 100%)}opacity:0;transition:opacity 2.2s ease 1.3s}
body.lit .rail{opacity:1}
.ways{display:flex;gap:clamp(26px,5vw,72px);justify-content:center;align-items:baseline;
  flex-wrap:wrap}
.ways a{position:relative;color:var(--ink);text-decoration:none;
  font:300 clamp(16px,1.6vw,21px)/1 var(--text);letter-spacing:.01em;padding:6px 0 9px}
.ways a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.16,1,.3,1);opacity:.55}
.ways a:hover::after,.ways a:focus-visible::after{transform:scaleX(1)}
.ways a[data-inert]{opacity:.4;cursor:default}
.ways a[data-inert]::after{display:none}

.ca{display:block;margin:12px auto 0;background:none;border:0;padding:2px 4px;
  font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink);opacity:.46;
  text-transform:uppercase;cursor:pointer;max-width:92vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ca[data-empty]{cursor:default}
.ca:not([data-empty]):hover{opacity:.8}
.ca.copied{opacity:.95}
.ca.copied::after{content:" — copied"}

.fine{margin:12px 0 0;font:300 13px/1.5 var(--text);color:var(--ink);opacity:.5;
  letter-spacing:.03em;text-align:center}
.fine a{margin:0 3px}
.fine a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:1px}
.fine a:hover{opacity:1}
.fine i{font-style:normal;padding:0 5px;opacity:.45}
.fine b{font-weight:inherit;padding:0 10px;opacity:.4}

/* ════ RESPONSIVE ═══════════════════════════════════════════════════
   The plain is the same plain; there is simply less of it. The crowd
   thins rather than shrinking, because seven photographs you can see
   beats sixteen you cannot. */
@media(max-width:760px){
  :root{--horizon-at:46vh}
  body{font-size:16px}
  .mark{bottom:calc(100vh - 61vh)}
  .mark h1,.mark .cast{font-size:clamp(64px,26vw,180px)}
  .say{top:19vh;font-size:19px}
  .burn{top:calc(19vh + 3.2em);letter-spacing:.2em}
  .whisper{top:calc(19vh + 6em);font-size:15px;white-space:normal;
    width:78vw;text-align:center}
  .sun{width:13vmin;height:13vmin;margin:-6.5vmin 0 0 -6.5vmin}
  .moon{width:6vmin;height:6vmin;margin:-3vmin 0 0 -3vmin}
  .ways{gap:20px}
  .ways a{font-size:16px}
  .fine{font-size:11px;line-height:1.6}
  .rail{padding:76px 14px 15px}
  .ca{font-size:9px}
}
@media(max-height:560px) and (orientation:landscape){
  :root{--horizon-at:46vh}
  .mark{bottom:calc(100vh - 70vh)}
  .mark h1,.mark .cast{font-size:clamp(56px,13vw,120px)}
  .say{top:75vh;font-size:15px}
  .burn,.whisper{display:none}
}

/* The world still turns under reduced motion — an hour passing is the
   content here, not an effect. What stops is anything that travels: the
   clouds, the bird, and the crowd's arrival, which becomes a plain fade. */
@media(prefers-reduced-motion:reduce){
  .clouds i{animation:none}
  .bird{display:none}
  .one{transition:opacity 1.2s ease}
  .one,.one.in{transform:translateX(-50%)}
  .mark,.say,.burn,.rail{transition-duration:.4s}
}

/* ══════════════════════════════════════════════════════════════════════
   THE LONG WAIT
   The same world, walked. Distance is time, so the far end of the walk
   is the far end of the day.
   ══════════════════════════════════════════════════════════════════════ */
body.walk{overflow:hidden;height:100%;touch-action:none;
  cursor:grab;user-select:none;-webkit-user-select:none}
body.walk:active{cursor:grabbing}
html:has(body.walk){overflow:hidden;height:100%}

/* the far shore and the near dirt, each at its own rate. Masked bands
   rather than images, so they take the ink of whatever hour it is. */
.band{position:absolute;left:0;right:0;z-index:2;pointer-events:none;
  background:var(--ink);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;mask-size:auto 100%}
.band.far{top:calc(var(--horizon-at) - 9vh);height:9vh;opacity:calc(.09 + var(--lit) * .07);
  -webkit-mask-position:calc(0px - var(--px-far,0px)) bottom;
          mask-position:calc(0px - var(--px-far,0px)) bottom;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2600' height='150' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 104 L96 62 L172 96 L268 44 L336 88 L452 30 L560 84 L648 56 L742 100 L836 48 L928 92 L1044 38 L1128 86 L1236 60 L1350 98 L1444 42 L1552 88 L1648 66 L1756 102 L1860 46 L1962 90 L2072 34 L2168 86 L2280 58 L2388 96 L2494 50 L2600 104 L2600 150 L0 150 Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2600' height='150' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 104 L96 62 L172 96 L268 44 L336 88 L452 30 L560 84 L648 56 L742 100 L836 48 L928 92 L1044 38 L1128 86 L1236 60 L1350 98 L1444 42 L1552 88 L1648 66 L1756 102 L1860 46 L1962 90 L2072 34 L2168 86 L2280 58 L2388 96 L2494 50 L2600 104 L2600 150 L0 150 Z'/%3E%3C/svg%3E")}
.band.near{top:calc(var(--horizon-at) - 4.5vh);height:4.5vh;opacity:calc(.15 + var(--lit) * .12);
  -webkit-mask-position:calc(0px - var(--px-near,0px)) bottom;
          mask-position:calc(0px - var(--px-near,0px)) bottom;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1700' height='80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 58 L84 38 L162 60 L254 28 L330 54 L428 40 L516 64 L606 32 L688 56 L778 44 L868 62 L962 30 L1046 58 L1140 42 L1232 64 L1326 34 L1414 56 L1508 46 L1602 62 L1700 58 L1700 80 L0 80 Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1700' height='80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 58 L84 38 L162 60 L254 28 L330 54 L428 40 L516 64 L606 32 L688 56 L778 44 L868 62 L962 30 L1046 58 L1140 42 L1232 64 L1326 34 L1414 56 L1508 46 L1602 62 L1700 58 L1700 80 L0 80 Z'/%3E%3C/svg%3E")}

/* the ground immediately in front of you, going past at speed. Nothing
   else on the page makes it as clear that you are the one moving. */
.fore{position:absolute;left:0;right:0;bottom:0;height:17vh;z-index:5;
  pointer-events:none;background:var(--g-near);
  filter:brightness(.66) saturate(.88);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
  -webkit-mask-position:calc(0px - var(--px-fore,0px)) bottom;
          mask-position:calc(0px - var(--px-fore,0px)) bottom;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='120'%3E%3Cpath fill='%23000' d='M0 78 L46 72 L84 80 L128 70 L176 79 L226 68 L272 80 L322 71 L368 82 L420 69 L462 78 L512 73 L560 81 L606 70 L652 79 L700 74 L760 80 L760 120 L0 120 Z'/%3E%3Cg fill='%23000'%3E%3Cpath d='M96 74 L100 40 L104 74 Z'/%3E%3Cpath d='M104 74 L112 48 L114 74 Z'/%3E%3Cpath d='M298 76 L302 46 L306 76 Z'/%3E%3Cpath d='M306 76 L314 56 L316 76 Z'/%3E%3Cpath d='M528 77 L534 42 L538 77 Z'/%3E%3Cpath d='M538 77 L546 58 L549 77 Z'/%3E%3Cpath d='M672 76 L676 50 L680 76 Z'/%3E%3C/g%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='120'%3E%3Cpath fill='%23000' d='M0 78 L46 72 L84 80 L128 70 L176 79 L226 68 L272 80 L322 71 L368 82 L420 69 L462 78 L512 73 L560 81 L606 70 L652 79 L700 74 L760 80 L760 120 L0 120 Z'/%3E%3Cg fill='%23000'%3E%3Cpath d='M96 74 L100 40 L104 74 Z'/%3E%3Cpath d='M104 74 L112 48 L114 74 Z'/%3E%3Cpath d='M298 76 L302 46 L306 76 Z'/%3E%3Cpath d='M306 76 L314 56 L316 76 Z'/%3E%3Cpath d='M528 77 L534 42 L538 77 Z'/%3E%3Cpath d='M538 77 L546 58 L549 77 Z'/%3E%3Cpath d='M672 76 L676 50 L680 76 Z'/%3E%3C/g%3E%3C/svg%3E")}

body.walk .rail{padding-top:64px}
body.walk .nearshade{height:22vh}

.scatter{position:absolute;left:0;right:0;bottom:14vh;height:9vh;z-index:3;
  pointer-events:none;background:var(--ink);opacity:calc(.05 + var(--lit) * .07);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
  -webkit-mask-position:calc(0px - var(--px-scat,0px)) bottom;
          mask-position:calc(0px - var(--px-scat,0px)) bottom;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='90'%3E%3Cg fill='%23000'%3E%3Cellipse cx='60' cy='84' rx='26' ry='6'/%3E%3Cellipse cx='300' cy='80' rx='14' ry='4'/%3E%3Cellipse cx='430' cy='86' rx='38' ry='7'/%3E%3Cellipse cx='690' cy='79' rx='11' ry='3'/%3E%3Cellipse cx='840' cy='85' rx='30' ry='6'/%3E%3Cellipse cx='1080' cy='81' rx='18' ry='4'/%3E%3Cellipse cx='1250' cy='86' rx='44' ry='8'/%3E%3Cellipse cx='1430' cy='80' rx='13' ry='3'/%3E%3C/g%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='90'%3E%3Cg fill='%23000'%3E%3Cellipse cx='60' cy='84' rx='26' ry='6'/%3E%3Cellipse cx='300' cy='80' rx='14' ry='4'/%3E%3Cellipse cx='430' cy='86' rx='38' ry='7'/%3E%3Cellipse cx='690' cy='79' rx='11' ry='3'/%3E%3Cellipse cx='840' cy='85' rx='30' ry='6'/%3E%3Cellipse cx='1080' cy='81' rx='18' ry='4'/%3E%3Cellipse cx='1250' cy='86' rx='44' ry='8'/%3E%3Cellipse cx='1430' cy='80' rx='13' ry='3'/%3E%3C/g%3E%3C/svg%3E")}

.field{position:fixed;inset:0;z-index:4;pointer-events:none}
.field .one{left:0;pointer-events:auto;cursor:pointer;opacity:1;
  transform:none;transition:none;will-change:transform}
.field .one.out{display:none}
.field .one img{transition:filter .5s ease}
.field .one:hover img{filter:brightness(calc(var(--lit) + .1)) sepia(var(--warm)) saturate(var(--sat))}

/* the caption stands on the ground next to whoever it belongs to */
.field figcaption{position:absolute;bottom:calc(100% + .55em);left:50%;
  transform:translateX(-50%);text-align:center;
  font:300 italic clamp(18px,1.8vw,32px)/1.2 var(--text);color:var(--ink);
  white-space:nowrap;opacity:.88;display:flex;flex-direction:column}
.field figcaption i{display:block;margin-bottom:.55em;order:-1;font:400 9px/1 var(--mono);
  font-style:normal;letter-spacing:.24em;opacity:.45}
.field .f figcaption{font-size:clamp(12px,1vw,15px);opacity:.6}
.field .f figcaption i{display:none}

/* a line of type standing on its own in the middle of nothing */
.sign{position:absolute;left:0;bottom:46vh;margin:0;
  font:300 italic clamp(22px,3.4vw,58px)/1.2 var(--text);color:var(--ink);
  white-space:nowrap;opacity:.42;pointer-events:none;will-change:transform}
.sign.out{display:none}

.odo{margin:11px 0 0;font:400 10px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);opacity:.46}
.odo b{font-weight:inherit;padding:0 11px;opacity:.45}

.teach{position:fixed;left:0;right:0;top:21vh;margin:0;z-index:7;
  text-align:center;font:300 italic 16px/1 var(--text);color:var(--ink);
  opacity:.5;pointer-events:none;transition:opacity 1.4s ease}
.teach.gone{opacity:0}

/* looking at one properly: the picture, its caption, and the same sky it
   was standing under. No frame, no chrome, no close button. */
.look{position:fixed;inset:0;z-index:40;display:none;align-items:center;
  justify-content:center;flex-direction:column;gap:1.2em;padding:6vh 6vw;
  background:var(--g-near);cursor:zoom-out}
.look.on{display:flex}
.look img{max-width:100%;max-height:76vh;width:auto;border:6px solid #FBF6EC;
  background:#FBF6EC;filter:brightness(var(--lit)) sepia(var(--warm)) saturate(var(--sat));
  box-shadow:0 3vh 7vh rgba(0,0,0,.3)}
.look .cap{margin:0;font:300 italic clamp(20px,2.4vw,36px)/1 var(--text);
  color:var(--ink);opacity:.85}
.look .save{font:300 15px/1 var(--text);letter-spacing:.02em;color:var(--ink);
  opacity:.6;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:2px;cursor:pointer}
.look .save:hover{opacity:1}
.look img{cursor:default}

@media(max-width:760px){
  /* a print wider than the phone starts off the left edge, and so did its
     caption. On a narrow screen the caption centres over whoever it
     belongs to instead of hanging off them. */
  .field figcaption{font-size:17px;max-width:88vw;white-space:normal}
  .sign{font-size:22px;bottom:52vh}
  .teach{font-size:14px}
  .band.far{height:7vh;top:calc(var(--horizon-at) - 7vh)}
  .fore{height:8vh}
}

/* ══════════════════════════════════════════════════════════════════════
   THE ARGUMENT
   Not a document with a background. A walk from first light to the
   middle of the night with the argument written along the way.
   ══════════════════════════════════════════════════════════════════════ */
body.home{overflow:hidden;height:100%}
html:has(body.home){overflow:hidden;height:100%}
body.read{--horizon-at:33vh;background:var(--g-near)}
body.read .world{position:fixed}

/* The halo, and the reason this page can be read at any hour. Type here
   crosses a sky, a ridge and a plain as it scrolls, and no single ink
   colour survives all three. So every character carries a soft field of
   the opposite tone — invisible as a shape, decisive as contrast. It is
   set from world.js off the ink's own luminance, so it flips when the
   ink does and never has to be thought about again. */
body.read .read-body{position:relative;z-index:5;
  text-shadow:0 0 13px var(--halo,transparent)}

.read-body{margin:0 auto;padding:0 0 6vh}
.read-body p{margin:0 0 1.05em}

/* ── the opening ─────────────────────────────────────────────────── */
.open{min-height:84vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 12vh clamp(24px,7vw,140px)}
.open h1{font-variation-settings:var(--wonk);margin:0;font:400 clamp(96px,19vw,300px)/.82 var(--display);
  letter-spacing:.012em;color:var(--ink)}
.open .kicker{margin:.5em 0 0;font:300 italic clamp(19px,2.1vw,30px)/1 var(--text);
  color:var(--ink);opacity:.72}

/* The contract sits in the header, above the argument, where it can be
   ignored. It is available rather than offered — which is the only reason
   the page that follows is able to ask for nothing at all. */
.open .ca{align-self:flex-start;margin:2.6em 0 0;max-width:min(56ch,86vw);text-align:left}

/* ── the movements ───────────────────────────────────────────────────
   No two sit the same way. The argument moves across the plain as it
   goes rather than running down a single column in the middle of it. */
.mv{position:relative;min-height:56vh;display:flex;flex-direction:column;
  justify-content:center;padding:6vh 0}
.mv p{font:300 clamp(19px,1.45vw,25px)/1.72 var(--text);color:var(--ink);
  letter-spacing:.004em}
.mv p.q{opacity:.82}
.mv em{font-style:italic;font-weight:400}
.mv .num{display:block;margin:0 0 .3em;font:400 clamp(46px,5vw,86px)/1 var(--display);
  font-variation-settings:var(--wonk);color:var(--ink);opacity:.30;font-style:normal;
  letter-spacing:.06em}

.mv.l    {margin:0 auto 0 clamp(24px,9vw,180px);width:min(52ch,84vw)}
.mv.r    {margin:0 clamp(24px,9vw,180px) 0 auto;width:min(50ch,84vw)}
.mv.c    {margin:0 auto;width:min(48ch,84vw);text-align:center}
.mv.wide {margin:0 auto;width:min(64ch,88vw)}
.mv.wide p   {font-size:clamp(21px,1.75vw,31px);line-height:1.62}

/* The one moment the name is set as the name inside the argument, at the
   end of movement IV, where it arrives as a conclusion rather than an
   introduction. There is no other accent on the page. */
.mv .name{font-variation-settings:var(--wonk);display:block;margin:.28em 0 0;
  font:400 clamp(56px,9vw,148px)/.94 var(--display);letter-spacing:.012em;
  color:var(--ink);font-weight:400}

/* ── the two quotations, which are the only centred things here ─────── */
.epi,.said{margin:0 auto;padding:10vh 0;width:min(56ch,86vw);text-align:center}
.epi p{font-variation-settings:var(--wonk);margin:0;font:400 italic clamp(24px,3vw,50px)/1.3 var(--display);color:var(--ink)}
.said p{font-variation-settings:var(--wonk);margin:0;font:400 clamp(26px,3.6vw,62px)/1.24 var(--display);color:var(--ink)}
.epi cite,.said cite{display:block;margin-top:1.5em;font-style:normal;
  font:300 13px/1.5 var(--text);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:.5}

/* ── the plates ──────────────────────────────────────────────────────
   Whole beats of the argument that say nothing at all. The same printed
   photographs standing in the same world, at the size they deserve. */
.plate{margin:0;min-height:86vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4em;padding:6vh 5vw}
.plate img{height:clamp(260px,52vh,700px);width:auto;max-width:88vw;object-fit:contain;
  border:7px solid #FBF6EC;background:#FBF6EC;
  filter:brightness(var(--lit)) sepia(var(--warm)) saturate(var(--sat));
  box-shadow:0 3vh 8vh rgba(0,0,0,.26)}
.plate figcaption{font:300 italic clamp(26px,4vw,74px)/1 var(--text);
  color:var(--ink);opacity:.84}
.plate.wide-plate img{height:clamp(290px,60vh,800px)}

/* ── the end ─────────────────────────────────────────────────────── */
.shut{min-height:88vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:10vh clamp(24px,6vw,80px) 4vh}
.shut p{max-width:46ch;font:300 clamp(18px,1.4vw,23px)/1.7 var(--text);
  color:var(--ink);opacity:.8}
.shut b{font-variation-settings:var(--wonk);display:block;margin:8vh 0;font:400 clamp(60px,11vw,180px)/1 var(--display);
  letter-spacing:.012em;color:var(--ink);font-weight:400}
.shut .ways{margin:0 0 3.4vh}
.shut .fine{opacity:.42;max-width:none}

/* the clock, which is also the only thing on this page that is a link.
   It reads out where in the day your reading has got to. */
.mark-time{position:fixed;left:0;right:0;bottom:0;z-index:9;margin:0;text-align:center;
  padding:22px 18px 20px;pointer-events:none;
  font:400 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);opacity:.5;
  background:linear-gradient(180deg,transparent,var(--g-near) 78%)}
.mark-time a{color:inherit;text-decoration:none;pointer-events:auto;
  border-bottom:1px solid currentColor;padding-bottom:2px}
.mark-time b{font-weight:inherit;padding:0 12px;opacity:.45}

/* The argument is the product; the arrival is decoration. With JavaScript
   off, or under reduced motion, every movement renders at full opacity —
   the class that enables any of this is only added inside the script. */
html.js .mv,html.js .epi,html.js .said,html.js .plate,html.js .open,html.js .shut{
  opacity:0;transform:translateY(26px);
  transition:opacity 1.5s ease,transform 1.5s cubic-bezier(.16,1,.3,1)}
html.js .here{opacity:1;transform:none}

@media(max-width:760px){
  body.read{--horizon-at:30vh}
  .open{padding-left:24px;padding-bottom:10vh;min-height:80vh}
  .mv{min-height:auto;padding:8vh 0}
  .mv.l,.mv.r,.mv.c,.mv.wide{margin:0 auto;width:86vw;text-align:left}
  .mv.c{text-align:left}
  .mv p,.mv.wide p{font-size:18px;line-height:1.72}
  .mv .num{font-size:44px;opacity:.34;margin-bottom:.22em}
  .epi,.said{padding:9vh 0;width:86vw}
  .plate{min-height:auto;padding:9vh 5vw}
  .plate img,.plate.wide-plate img{max-height:52vh}
  .shut b{margin:6vh 0}
}


/* ══════════════════════════════════════════════════════════════════════
   THE HOME PLAIN — what is actually out there
   ══════════════════════════════════════════════════════════════════════ */
body.home .scatter{position:absolute;left:0;right:0;bottom:22vh;height:8vh;z-index:2;
  pointer-events:none;background:var(--ink);opacity:calc(.04 + var(--lit) * .06);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
  -webkit-mask-image:var(--stones);mask-image:var(--stones)}

/* the grass in front of you, which is the only thing on this page that
   the wind is visibly doing something to */
.grass{position:absolute;left:-4%;right:-4%;bottom:0;height:15vh;z-index:7;
  pointer-events:none;background:var(--g-near);filter:brightness(.74) saturate(.92);
  transform-origin:50% 100%;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
  -webkit-mask-image:var(--tufts);mask-image:var(--tufts)}
body.home .grass{transform:translate3d(calc(var(--mx) * -44px),calc(var(--my) * -13px),0)
                 skewX(calc(var(--wind) * -1.6deg))}

/* dust, carried the way the wind is going */
.dust{position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:4;
  pointer-events:none;opacity:calc(.10 + var(--lit) * .22)}
.dust i{position:absolute;display:block;width:3px;height:3px;border-radius:50%;
  background:var(--horizon);filter:blur(1.2px)}
.dust i:nth-child(1){bottom:14%;animation:blow 41s linear infinite}
.dust i:nth-child(2){bottom:31%;width:2px;height:2px;animation:blow 58s linear infinite -20s}
.dust i:nth-child(3){bottom:7%; width:4px;height:4px;animation:blow 33s linear infinite -12s}
.dust i:nth-child(4){bottom:23%;animation:blow 49s linear infinite -31s}
@keyframes blow{
  from{transform:translateX(-6vw) translateY(0);opacity:0}
  8%{opacity:1} 88%{opacity:1}
  to{transform:translateX(108vw) translateY(-4vh);opacity:0}
}

:root{
  --stones:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='90'%3E%3Cg fill='%23000'%3E%3Cellipse cx='60' cy='84' rx='26' ry='6'/%3E%3Cellipse cx='300' cy='80' rx='14' ry='4'/%3E%3Cellipse cx='430' cy='86' rx='38' ry='7'/%3E%3Cellipse cx='690' cy='79' rx='11' ry='3'/%3E%3Cellipse cx='840' cy='85' rx='30' ry='6'/%3E%3Cellipse cx='1080' cy='81' rx='18' ry='4'/%3E%3Cellipse cx='1250' cy='86' rx='44' ry='8'/%3E%3Cellipse cx='1430' cy='80' rx='13' ry='3'/%3E%3C/g%3E%3C/svg%3E");
  --tufts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='120'%3E%3Cpath fill='%23000' d='M0 78 L46 72 L84 80 L128 70 L176 79 L226 68 L272 80 L322 71 L368 82 L420 69 L462 78 L512 73 L560 81 L606 70 L652 79 L700 74 L760 80 L760 120 L0 120 Z'/%3E%3Cg fill='%23000'%3E%3Cpath d='M96 74 L100 40 L104 74 Z'/%3E%3Cpath d='M104 74 L112 48 L114 74 Z'/%3E%3Cpath d='M298 76 L302 46 L306 76 Z'/%3E%3Cpath d='M306 76 L314 56 L316 76 Z'/%3E%3Cpath d='M528 77 L534 42 L538 77 Z'/%3E%3Cpath d='M538 77 L546 58 L549 77 Z'/%3E%3Cpath d='M672 76 L676 50 L680 76 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* the prints answer to a pointer, because a photograph propped up in a
   field ought to. It straightens and lifts; nothing glows. */
body.home .one{cursor:pointer}
body.home .one img{transition:transform .6s cubic-bezier(.16,1,.3,1),filter .6s ease}
body.home .one:hover img{filter:brightness(calc(var(--lit) + .09)) sepia(var(--warm)) saturate(var(--sat));
  transform:rotate(0deg) translateY(-6px) scale(1.015)}

/* ══════════════════════════════════════════════════════════════════════
   THE DOOR
   The only honest loading screen a site about waiting could have: nothing
   is being fetched, you are simply not being let in yet.
   ══════════════════════════════════════════════════════════════════════ */
.door{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35em;
  background:linear-gradient(180deg,var(--zenith) 0%,var(--upper) 30%,
    var(--lower) 56%,var(--horizon) 74%,var(--g-far) 82%,var(--g-near) 100%);
  transition:opacity 1.2s ease,visibility 1.2s}
.door.gone{opacity:0;visibility:hidden;pointer-events:none}
.count{font:400 clamp(76px,13vw,200px)/1 var(--display);
  font-variation-settings:var(--wonk);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.doorsay{margin:0;font:300 italic clamp(15px,1.5vw,20px)/1 var(--text);
  color:var(--ink);opacity:.6;order:-1;letter-spacing:.03em}
body.shut .stage,body.shut .rail{opacity:0}

/* ══ the enlarged view, shared by the plain and the walk ═════════════ */
.look{position:fixed;inset:0;z-index:70;display:none;align-items:center;
  justify-content:center;flex-direction:column;gap:1.1em;padding:6vh 6vw;
  background:var(--g-near);cursor:zoom-out}
.look.on{display:flex}
.look img{max-width:100%;max-height:74vh;width:auto;border:6px solid #FBF6EC;
  background:#FBF6EC;cursor:default;
  filter:brightness(var(--lit)) sepia(var(--warm)) saturate(var(--sat));
  box-shadow:0 3vh 7vh rgba(0,0,0,.3)}
.look .cap{margin:0;font:300 italic clamp(20px,2.4vw,36px)/1 var(--text);
  color:var(--ink);opacity:.85}
.look .save{font:300 15px/1 var(--text);letter-spacing:.02em;color:var(--ink);
  opacity:.6;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:2px;cursor:pointer}
.look .save:hover{opacity:1}

@media(max-width:760px){
  .grass{height:12vh}
  body.home .scatter{bottom:18vh;height:6vh}
  .count{font-size:clamp(76px,24vw,150px)}
}
@media(prefers-reduced-motion:reduce){
  .dust,.grass{display:none}
  .one img{transform:none}
}