/* ==========================================================================
   THE LETTER

   Only what belongs to the letter. Everything else — the paper, the ink, the
   ratio, the six voices, the nav, the way a button behaves, the way a
   photograph arrives and the way the name comes alive — is the site's, and
   comes from styles.css above this file.

   The scale, largest first:

     the title         --t-xl      one line opens the letter
     an opening        --t-word    the seven, each in a voice of its own
     the pause         --t-pause   one moment only, in Vacio
     a beat            --t-beat    the lines the letter turns on
     the close         --t-end     the last thing it says
     a lead, a turn    --t-say     what raises its voice inside the prose
     the prose         --t-body    one size, everywhere, always
     a caption         --t-sm      what is said under a thing
     a label           --t-label   the site's small capitals

   The rhythm is phi, from --sp-1 to --sp-7, and nothing is measured by eye.
   ========================================================================== */

:root{
  /* there is no index on this page, so the margin it would stand in is not
     kept empty for it */
  --rail-w: 0rem;

  --t-word: clamp(2.4rem, 1.5rem + 3.4vw, 3.9rem);
  --t-pause: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --t-beat: clamp(1.7rem, 1.15rem + 2.3vw, 2.6rem);
  --t-end: clamp(2.2rem, 1.5rem + 2.9vw, 3.6rem);
  --t-say: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  --t-sub: clamp(1.1rem, .95rem + .75vw, 1.5rem);

  /* One gap between paragraphs, everywhere in the letter and the same
     whatever size the paragraph is set at. In em it changed with every
     element and no two gaps in the letter were alike. */
  --gap-p: clamp(1.45rem, 1.2rem + .5vw, 1.8rem);
}

/* ------------------------------------------------------------ the opening */

/* Centred while there is room, and not one pixel higher than its padding
   when there is not. A flex box that centres what is taller than itself
   overflows past its own padding at both ends, which is how the first line
   ended up under the nav on a short screen. The auto margins do the
   centring instead, and they only take room that is actually spare. */
.band-opening{min-height:var(--screen);display:flex;flex-direction:column;justify-content:flex-start;padding-block:var(--sp-6) var(--sp-5)}
.band-opening::before{content:'';margin-top:auto}
.band-opening::after{content:'';margin-bottom:auto}

.label{margin:0 0 var(--sp-4);font-family:Anybody,system-ui,sans-serif;font-weight:500;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-52)}

.opening-title{margin:0 0 var(--sp-5);font-weight:400;font-size:var(--t-xl);line-height:1.02;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.opening-title em{font-style:normal;color:var(--c-guided)}

.foot{margin:var(--sp-5) 0 0;font-size:var(--t-sm);line-height:1.6;color:var(--ink-52)}

/* ---------------------------------------------------------- the seven, in
   turn. Each opens the same way: its mark, its word, and what the word is
   for. Seven identical openings are what make the letter one letter. */

.band-word{padding-block:var(--sp-6) var(--sp-5)}

.opens{margin:0 auto var(--sp-4);display:grid;justify-items:center;gap:var(--sp-1)}
.opens-word{margin:0;font-weight:400;font-size:var(--t-word);line-height:1;letter-spacing:-.04em;color:var(--v);overflow-wrap:anywhere}
.opens-say{margin:0;font-size:var(--t-sub);line-height:1.4;color:var(--ink-52)}

/* ------------------------------------------------------------- the column

   A letter is read, so there is one place to read it: the site's measure,
   in the middle of the page, ranged left as prose is. Only four things are
   ever allowed out of it. */

.read{width:min(var(--measure),100%);margin-inline:auto;text-align:left}
.read p{margin:0 0 var(--gap-p);font-size:var(--t-body);line-height:1.78;color:var(--ink-72)}
.read > p:last-child{margin-bottom:0}

/* a paragraph in the column already has a size, so these have to be asked
   for by name to be heard over it */

/* the lead of a passage: ink, one step above the prose, never coloured, so
   it is never mistaken for a recognition */
.read p.say,.you-copy p.say{font-size:var(--t-say);line-height:1.42;letter-spacing:-.018em;color:var(--ink);margin-bottom:var(--gap-p)}

/* a turn: the prose's own size, in the voice of its opening. It is a
   sentence inside the reading, not a line above it. */
.read p.turn{margin-top:calc(var(--gap-p) * 1.6);font-size:var(--t-body);line-height:1.78;color:var(--v,var(--ink))}

/* a word the letter names, in the voice of the opening that names it */
.term{color:var(--v,var(--c-guided));font-weight:450}
.term-by{--v:var(--c-by)}
.term-coherence{--v:var(--c-coherence)}

/* ------------------------------------------------------------- the beats

   The lines the letter turns on. They leave the column, stand on the centre
   and speak in the voice of their opening. */

.beat{width:min(42rem,100%);margin:var(--sp-5) auto;font-size:var(--t-beat);line-height:1.28;letter-spacing:-.032em;color:var(--v);text-wrap:balance}

/* one that stands on its own line gets the air of one */
.beat-alone{margin-block:var(--sp-6)}

/* -------------------------------------------------------------- the pause

   Vacio asks for room to be left. The page leaves it: a screen with two
   lines on it and nothing else at all. */

.pause{min-height:calc(var(--screen) * .82);margin-block:var(--sp-7);display:grid;align-content:center;justify-items:center;gap:var(--sp-5)}
.pause p{margin:0;font-size:var(--t-pause);line-height:1.22;letter-spacing:-.035em;color:var(--c-by);text-wrap:balance}

/* not a footnote under the lines: the invitation itself, said the way the
   site says the things it asks of a reader */
.pause span{font-family:Anybody,system-ui,sans-serif;font-weight:500;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--c-by)}

/* ------------------------------------------------------------- the scenes */

/* a beat, a drawing and the photograph are all the same kind of thing — a
   moment out of the column — so they are all the same width */
.scene{width:min(42rem,100%);margin:var(--sp-5) auto}
.scene-art{width:100%;height:auto;color:var(--v)}
.scene figcaption{margin-top:var(--sp-3);font-size:var(--t-sm);line-height:1.55;color:var(--ink-52)}
.scene-do{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-3)}

/* the two shapes: each answers to how much room it has been given */
.shape-a{transform:translateX(calc(var(--a, 0) * 1px));transition:transform 1.2s var(--ease)}
.shape-b{transform:translateX(calc(var(--b, 0) * 1px));transition:transform 1.2s var(--ease)}
.scene-thread{transition:d 1.2s var(--ease)}

/* the spiral is drawn when it opens, once, and the point you started from
   arrives last */
.scene-spiral .scene-art{width:min(26rem,100%);margin-inline:auto}
.spiral path{stroke-dasharray:1;stroke-dashoffset:0}
.js .spiral path{stroke-dashoffset:.66}
.js .scene-spiral.is-drawn .spiral path{animation:spiral-open 2.9s cubic-bezier(.33,0,.15,1) forwards}
@keyframes spiral-open{from{stroke-dashoffset:.66}to{stroke-dashoffset:0}}
.js .spiral-start{opacity:0;transition:opacity .9s var(--ease)}
.js .scene-spiral.is-drawn .spiral-start{opacity:1;transition-delay:2.4s}

@media (prefers-reduced-motion: reduce){
  .shape-a,.shape-b,.scene-thread{transition:none}
  .js .spiral path{stroke-dashoffset:0;animation:none}
  .js .spiral-start{opacity:1;transition:none}
}

/* ------------------------------------------------------------- the button

   The site's button, exactly: an outlined pill in the site's small capitals
   that fills with the voice of the section when it is reached for.
   -------------------------------------------------------------------------- */

.letter-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:2.85rem;padding:.9rem 1.45rem;border:1px solid var(--ink-18);border-radius:999px;background:none;cursor:pointer;font-family:Anybody,system-ui,sans-serif;font-weight:500;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:color .45s var(--ease),border-color .45s var(--ease)}
.letter-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--v,var(--ink));transform:scaleX(0);transform-origin:0% 50%;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.letter-btn:not(:disabled):hover,.letter-btn:focus-visible{color:var(--paper);border-color:var(--v,var(--ink))}
.letter-btn:not(:disabled):hover::before,.letter-btn:focus-visible::before{transform:scaleX(1)}
.letter-btn:disabled{cursor:default;color:var(--ink-38);border-color:var(--ink-18)}

/* --------------------------------------------------------- and here you are

   A spread, in the same hand as the landing's. The frame is set off the
   picture and only the picture, so nothing is ever drawn around the words.
   -------------------------------------------------------------------------- */

.band-you{padding-block:var(--sp-6) var(--sp-5)}

/* the picture first and the words under it, at the widths everything else
   on this page uses, so the close is read the way the letter is read */
.you{--v:var(--c-coherence);--p:0;display:grid;justify-items:center;gap:var(--sp-4);text-align:left}
.you-copy{width:min(var(--measure),100%)}
.you-copy p{margin:0 0 var(--gap-p);font-size:var(--t-body);line-height:1.78;color:var(--ink-72)}
.you-copy > p:last-child{margin-bottom:0}

.st-shot{--off:12px;--dir:-1;width:min(42rem,100%)}
.st-piece{position:relative;display:block}
/* the frame is the photograph's own proportion, so the room is shown whole
   and nothing of it is cut away */
.st-crop{aspect-ratio:4 / 3}
.st-shot figcaption{margin-top:var(--sp-3);font-size:var(--t-sm);line-height:1.55;color:var(--ink-52);text-align:center}

/* ---------------------------------------------------------------- the close */

.band-end{padding-block:var(--sp-6) var(--sp-5)}
.end-title{margin:0 auto var(--sp-5);max-width:20ch;font-weight:400;font-size:var(--t-end);line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.end-title em{font-style:normal;color:var(--c-design)}
.end-copy{width:min(var(--measure),100%);margin-inline:auto;font-size:var(--t-body);line-height:1.8;color:var(--ink-72)}
.end-copy p{margin:0 0 var(--gap-p)}
.end-copy > p:last-child{margin-bottom:0}

.sign{margin:var(--sp-5) 0 0;font-size:var(--t-sm);line-height:1.9;color:var(--ink-52)}
.sign-name{display:inline-block;margin-top:.45rem;font-family:Anybody,system-ui,sans-serif;font-weight:400;font-size:clamp(1.55rem, 1.25rem + 1vw, 2.1rem);line-height:1;letter-spacing:-.03em;color:var(--ink);text-decoration:none}

/* the site sets this spread in two columns on a wide screen; here it is one
   column at every width, like everything else in the letter */
@media (min-width: 1025px){
  .you{grid-template-columns:minmax(0,1fr);width:100%;min-height:0;margin-inline:auto}
  .band-you .st-shot{grid-column:auto;grid-row:auto;margin:0}
}

/* ---------------------------------------------------------------- in a hand */

@media (max-width: 900px){
  /* the nav is a pill floating over this screen, and the first line of
     the letter has to begin below it */
  .band-opening{padding-block:calc(var(--sp-6) + var(--sp-2)) var(--sp-4)}
  .band-word,.band-you,.band-end{padding-block:var(--sp-5) var(--sp-4)}

  .opens{margin-bottom:var(--sp-3)}

  .beat,.beat-alone{margin-block:var(--sp-4)}
  .pause{min-height:calc(var(--screen) * .74);margin-block:var(--sp-6);gap:var(--sp-4)}
  .scene{margin-block:var(--sp-4)}
  .scene-spiral .scene-art{width:min(20rem,100%)}
  .sign{margin-top:var(--sp-4)}
}

/* ==========================================================================
   ONE LEFT EDGE

   The letter was centred: its title, the seven words, the beats, the close.
   Centred display type reads as an announcement — it is what a poster does.
   A letter is not announced, it is read, and reading happens left to right
   from one edge.

   So everything begins on that edge. Not only the words inside a block, but
   the blocks themselves: the reading column, a beat, a drawing, the
   photograph and the close all start where the band starts, so a reader's
   eye returns to the same place on every line of the page.

   The air the centring used to put on both sides is all on the right now,
   which is where a column of text wants it.
   ========================================================================== */

.band-opening,.band-word,.band-you,.band-end{text-align:left}

/* the blocks: every one of them begins at the band's own left edge */
.read,.you-copy,.end-copy{margin-inline:0}
.beat{margin-inline:0}
.scene{margin-inline:0}
.scene-spiral .scene-art{margin-inline:0}
.st-shot{margin-inline:0}
.opening-title,.end-title{margin-left:0;margin-right:0}

/* and the things that were laid out from a centre */
.opens{justify-items:start}
.pause{justify-items:start;text-align:left}
.you{justify-items:start}

/* a caption sits under the left edge of the thing it is about */
.scene figcaption,.st-shot figcaption{text-align:left;margin-inline:0}