/* THE WITH — phase 1
   one screen, no scroll, a ground that moves, one input.

   ------------------------------------------------------------------
   WHERE TO CHANGE THINGS

   tune.html        the dials. desktop and mobile side by side, every
                    piece of type on its own. press "save look.js".
   assets/look.js   what the dials write. sizes, splits, opacity, blend,
                    colour, placement, the ground. one set per device.
   ?grid=1          draws the artboard guides over the page.

   nothing below needs touching to change the look. the numbers here
   are fallbacks for a browser with javascript off.

   LEAVE ALONE unless you know why
     the z-index on #ground and #grain, and body's transparent background.
     that trio is what lets the blend modes see the gradient. put a
     background back on body and the whole thing disappears behind it.
     same for .capture: it moves with `top`, never `transform`. a
     transform makes it a sealed layer and the type inside it stops
     seeing the ground.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* the hands. subset to the names they set, ~6KB each. */
@font-face { font-family: 'hand-caveat'; src: url('../fonts/hand/caveat.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'hand-belle';  src: url('../fonts/hand/belle.woff2')  format('woff2'); font-display: swap; }
@font-face { font-family: 'hand-nycd';   src: url('../fonts/hand/nycd.woff2')   format('woff2'); font-display: swap; }
@font-face { font-family: 'hand-reenie'; src: url('../fonts/hand/reenie.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'hand-zeyada'; src: url('../fonts/hand/zeyada.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'hand-archd';  src: url('../fonts/hand/archd.woff2')  format('woff2'); font-display: swap; }
@font-face { font-family: 'hand-jah';    src: url('../fonts/hand/jah.woff2')    format('woff2'); font-display: swap; }
@font-face { font-family: 'hand-cedar';  src: url('../fonts/hand/cedar.woff2')  format('woff2'); font-display: swap; }
/* the one people type in. a printed hand with a full character set, so
   real names with accents and apostrophes survive. */
@font-face { font-family: 'hand-input';  src: url('../fonts/hand/input.woff2')  format('woff2'); font-display: swap; }

:root {
  /* --- the grid, straight off the artboard. symmetric. --- */
  --g1:   1.69%;   /* rail, left        */
  --g2:  18.12%;   /* wordmark, left    */
  --g3:  26.54%;   /* tagline, left     */
  --g4:  34.75%;   /* seats line, left  */
  --g5:  39.86%;   /* field, left       */
  --g6:  60.14%;   /* field, right      */
  --g7:  65.25%;   /* seats line, right */
  --g8:  73.46%;   /* tagline, right    */
  --g9:  81.88%;   /* wordmark, right   */
  --g10: 98.31%;   /* rail, right       */
  --h1:  40.32%;   /* upper horizontal  */
  --h2:  67.83%;   /* lower horizontal  */

  /* fallbacks only. assets/look.js overrides every one of these. */
  --mark-top: 0vh;  --mark-w: 63.76%;  --mark-l: 18.12%;
  --mark-flat: #9c4a1c;  --mark-lit: #6b3a18;
  --mark-op-flat: 0.28;  --mark-op-lit: 1;  --mark-blend: color-dodge;

  --rail-show: flex;  --rail: clamp(9px, 0.7vw, 12px);  --rail-track: 0.42em;  --rail-inset: 1.69%;
  --rail-flat: #a46231;  --rail-lit: #5a3116;
  --rail-op-flat: 0.39;  --rail-op-lit: 0.69;  --rail-blend: color-dodge;

  --form-shift: 0vh;  --block-gap: 0.45vh;

  --lede-size: max(10px, 1.007vw);  --lede-weight: 350;  --lede-track: 0.02em;  --lede-lead: 1.2;
  --lede-flat: rgba(236,211,180,0.61);  --lede-lit: #241a11;  --lede-k: 0.27;  --lede-blend: plus-lighter;
  --lede-x: 0vw;  --lede-y: 0vh;  --lede-ws: pre;  --lede-w: max-content;

  --field-size: max(13px, 1.3vw);  --field-weight: 700;  --field-track: 0.06em;
  --field-flat: rgba(236,211,180,0.75);  --field-lit: #241a11;  --field-k: 0.34;  --field-blend: plus-lighter;
  --field-x: 0vw;  --field-y: 0vh;  --field-dir: row;  --field-align: baseline;

  --names-scale: 1;  --names-op: 0.42;  --typed-scale: 1.18em;

  --tag-size: max(15px, 3.749vw);  --tag-weight: 350;  --tag-track: 0.02em;  --tag-lead: 1;
  --tag-flat: rgba(236,211,180,0.33);  --tag-lit: #241a11;  --tag-k: 0.86;  --tag-blend: plus-lighter;
  --tag-ws: pre;  --tag-w: max-content;  --tag-col: 63.76%;  --tag-l: 18.12%;  --tag-lift: 0vh;

  --small: clamp(8.5px, 0.6vw, 10.5px);  --small-op: 0.46;

  --ground: #110c08;
  --ink: #ecd3b4;
  --line: rgba(236, 211, 180, 0.3);
  --line-hot: rgba(236, 211, 180, 0.72);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  overscroll-behavior: none;
}

/* the ground colour lives on html, not body. body must stay
   transparent or its background box paints over #ground, which sits
   at a negative z-index so that blend modes can see it. */
html { background: var(--ground); }
body { background: transparent; text-transform: uppercase; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ground ---------- */

#ground {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* ground and grain sit behind the content rather than the content
     sitting above them. that keeps every blend mode on the page in the
     root stacking context, where it can actually see the canvas. */
  z-index: -2;
  /* fallback, and what paints before the first frame */
  background:
    radial-gradient(145% 100% at 58% 52%, #8a5a2e 0%, #5c3218 24%, #3a2113 46%, #241609 72%, #130d09 92%),
    linear-gradient(100deg, rgba(19,13,9,0.97) 0%, rgba(19,13,9,0.55) 20%, rgba(19,13,9,0) 40%),
    var(--ground);
}

html[data-bg='steel'] #ground {
  background:
    radial-gradient(120% 90% at 50% 40%, #8c6a5e 0%, #5a3a30 40%, #2a1712 85%),
    var(--ground);
}

/* the shoot. whatever is painted here is only what shows before the
   first webgl frame, or if the file never arrives. */
html[data-bg='media'] #ground {
  background:
    radial-gradient(130% 100% at 52% 46%, #4a2f22 0%, #2a1a12 52%, #130d09 92%),
    var(--ground);
}

/* the video the media ground draws from. never seen directly: it is
   pulled into webgl frame by frame, the same as the steel photo. */
#media {
  position: fixed;
  left: -200vw;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

#grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-mix, 0.16);
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: var(--grain-size, 140px) var(--grain-size, 140px);
}

/* ---------- frame ---------- */

.frame {
  position: relative;
  min-height: 100%;
  height: 100dvh;
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
}

/* ---------- rails ---------- */

.rail {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: var(--rail-show);
  align-items: center;
  color: var(--rail-flat);
  opacity: var(--rail-op-flat);
  pointer-events: none;
  user-select: none;
}
/* the rails are the artboard's own outlines, so they match it exactly */
.rail svg { display: block; width: var(--rail); height: auto; position: relative; top: var(--rail-y, 0); }
.rail--l { left: var(--rail-inset); }
.rail--r { right: var(--rail-inset); }

.rail.is-sheen {
  opacity: var(--rail-sheen, 0);
  mix-blend-mode: plus-lighter;
}
.rail.is-sheen svg { visibility: hidden; }

.rail.is-lit {
  color: var(--rail-lit);
  opacity: var(--rail-op-lit);
  mix-blend-mode: var(--rail-blend);
}

/* ---------- w/ WEYLANDTS, under the wordmark ---------- */

/* the same artwork as the rails, turned to read across. it sits under the
   mark and travels with it, so the two read as one lockup. */
.lockup {
  position: fixed;
  top: calc(var(--safe-t) + var(--lock-top, 12vh));
  left: 50%;
  width: var(--lock-w, 24%);
  margin-left: calc(-0.5 * var(--lock-w, 24%) + var(--lock-x, 0%));
  z-index: 1;
  display: var(--lock-show, block);
  pointer-events: none;
  color: var(--lock-flat, #f2ecd9);
  opacity: var(--lock-op-flat, 1);
}
.lockup svg { display: block; width: 100%; height: auto; }
.lockup.is-lit {
  color: var(--lock-lit, #f2ecd9);
  opacity: var(--lock-op-lit, 1);
  mix-blend-mode: var(--lock-blend, soft-light);
}
.lockup.is-sheen { opacity: var(--lock-sheen, 0); mix-blend-mode: plus-lighter; }
.lockup.is-sheen svg { visibility: hidden; }
.lock-sheen {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sheen-r, 240px) circle at var(--sx, -999px) var(--sy, -999px), var(--sheen-c, #fff4ea), transparent 70%);
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
  mask: var(--mask) center / 100% 100% no-repeat;
}

/* ---------- the footer bar ---------- */

/* three things spread across the bottom edge: who it is with, how to reach
   them, and whose week it is. */
.foot {
  position: absolute;
  left: var(--foot-inset, 1.53%);
  right: var(--foot-inset, 1.53%);
  bottom: calc(var(--safe-b) + var(--foot-bottom, 1.5vh));
  z-index: 2;
  display: var(--foot-show, flex);
  flex-direction: var(--foot-dir, row);
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  color: var(--foot-color, var(--ink));
  opacity: var(--foot-op, 1);
}
.foot__l { flex: 0 0 auto; width: var(--foot-wey-w, 13.3%); }
.foot__l svg { display: block; width: 100%; height: auto; }
.foot__c {
  display: var(--foot-touch, block);
  flex: 0 0 auto;
  font-size: var(--foot-size, max(11px, 1.39vw));
  font-weight: var(--foot-weight, 500);
  letter-spacing: var(--foot-track, 0.02em);
  line-height: 1;
  color: inherit;
  text-decoration: none;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  transition: opacity 0.25s ease;
}
.foot__c:hover { opacity: 0.72; }
.foot__c:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.foot__r {
  flex: 0 0 auto;
  width: var(--foot-logo-w, 14.7%);
  display: flex;
  justify-content: flex-end;
  /* the .ai has this one knocking out of whatever is behind it */
  mix-blend-mode: var(--foot-logo-blend, difference);
}
.foot__logo { display: block; width: 100%; height: auto; }
.foot__logotext {
  font-size: var(--foot-size, max(11px, 1.39vw));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- wordmark ---------- */

.mark {
  position: fixed;
  top: calc(var(--safe-t) + var(--mark-top));
  left: var(--mark-l);
  width: var(--mark-w);
  z-index: 1;
  pointer-events: none;
}
.mark svg { display: block; width: 100%; height: auto; }

/* the flat layer. the ground cannot reach it. */
.mark svg { color: var(--mark-flat); }
.mark { opacity: var(--mark-op-flat); }

/* the lit layer. it adds its light to the ground, so the ground's drift
   moves through it: where the field runs hot the mark burns, where it
   goes dark the mark sinks back into the brown. */
.mark.is-lit {
  opacity: var(--mark-op-lit);
  mix-blend-mode: var(--mark-blend);
}
.mark.is-lit svg { color: var(--mark-lit); }

/* the light catching the wordmark. a plain gradient, cut to the mark's
   shape by a mask site.js builds from the inline svg. */
.mark.is-sheen {
  opacity: var(--mark-sheen, 0);
  mix-blend-mode: plus-lighter;
}
.mark.is-sheen svg { visibility: hidden; }
.mark-sheen,
.rail-sheen {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--sheen-r, 240px) circle at var(--sx, -999px) var(--sy, -999px), var(--sheen-c, #fff4ea), transparent 70%);
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
  mask: var(--mask) center / 100% 100% no-repeat;
}
.rail-sheen { inset: auto; left: 0; top: 50%; width: var(--rail); transform: translateY(-50%); aspect-ratio: var(--rail-ar, 0.077); margin-top: var(--rail-y, 0); }

@supports not (mix-blend-mode: color-dodge) {
  .mark { opacity: 1; }
  .mark.is-lit { display: none; }
}

/* ---------- centre line ---------- */

/* the tagline closes the page at the wordmark's own width, so the two
   of them frame everything between. */
.tagline {
  display: var(--tag-show, flex);
  position: absolute;
  left: var(--tag-l);
  width: var(--tag-col);
  bottom: calc(var(--tag-lift) + var(--safe-b));
  justify-content: center;
  text-align: center;
}
.tagline p {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  width: var(--tag-w);
  font-size: var(--tag-size);
  font-weight: var(--tag-weight);
  letter-spacing: var(--tag-track);
  line-height: var(--tag-lead);
  white-space: var(--tag-ws);
  color: var(--tag-flat);
  text-shadow: 0 1px 26px rgba(0, 0, 0, 0.45);
}

/* the ground layer of every text piece. an exact copy of the words,
   stacked on top, mixed into the ground. */
.tagline p::after,
.capture__lede::after,
.field__label::after {
  content: attr(data-ink);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: inherit;
  text-shadow: none;
  pointer-events: none;
}
.tagline p::before,
.capture__lede::before,
.field__label::before,
.done h2::before,
.done p::before {
  content: attr(data-ink);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: inherit;
  color: transparent;
  text-shadow: none;
  pointer-events: none;
  background-image: radial-gradient(var(--sheen-r, 240px) circle at var(--sx, -999px) var(--sy, -999px), var(--sheen-c, #fff4ea), transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: plus-lighter;
  z-index: 1;
}
.tagline p::before { opacity: var(--tag-sheen, 0); }
.capture__lede::before { opacity: var(--lede-sheen, 0); }
.field__label::before { opacity: var(--field-sheen, 0); width: auto; }
.done h2::before, .done p::before { opacity: var(--done-sheen, 0); }
.tagline p::after { color: var(--tag-lit); opacity: var(--tag-k); mix-blend-mode: var(--tag-blend); }

/* ---------- capture ---------- */

.capture {
  position: absolute;
  top: calc(var(--h1) + var(--form-shift));
  height: calc(var(--h2) - var(--h1));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--block-gap);
  text-align: center;
}

.capture__lede {
  position: relative;
  margin: 0 auto;
  left: var(--lede-x);
  top: var(--lede-y);
  width: var(--lede-w);
  font-size: var(--lede-size);
  font-weight: var(--lede-weight);
  letter-spacing: var(--lede-track);
  line-height: var(--lede-lead);
  white-space: var(--lede-ws);
  color: var(--lede-flat);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55);
}
.capture__lede::after { color: var(--lede-lit); opacity: var(--lede-k); mix-blend-mode: var(--lede-blend); }

form { margin: 0; width: 100%; display: flex; justify-content: center; position: relative; }

.field {
  position: relative;
  left: var(--field-x);
  top: var(--field-y);
  display: inline-flex;
  flex-direction: var(--field-dir);
  align-items: var(--field-align);
  justify-content: center;
  gap: var(--field-gap, 0.5em);
  max-width: 92%;
  font-size: var(--field-size);
  font-weight: var(--field-weight);
  letter-spacing: var(--field-track);
}

.field__label {
  display: var(--field-label, inline);
  position: relative;
  color: var(--field-flat);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55);
  white-space: pre;
}
.field__label::after { color: var(--field-lit); opacity: var(--field-k); mix-blend-mode: var(--field-blend); }

/* the rule is as wide as whatever is sitting on it — the name passing
   through, or the one being typed — plus a little run-off. site.js
   measures it and sets --slot. */
.field__slot {
  position: relative;
  flex: 0 0 auto;
  width: var(--slot, 7em);
  transition: width 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sizer {
  position: absolute;
  left: 0; top: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
}

.field__input {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  /* archivo by default. the printed hand is still loaded and one dial
     away (names.typedFace), it just is not what the name is set in. */
  font-family: var(--typed-face, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  font-size: var(--typed-scale);
  font-weight: var(--typed-weight, 500);
  letter-spacing: var(--typed-track, 0.03em);
  text-transform: uppercase;
  padding: 0 0.2em 0.26em;
  width: 100%;
  outline: none;
  transition: border-color 0.35s ease;
  caret-color: var(--ink);
}
.field__input::placeholder { color: transparent; }
/* the rule. drawn under the slot rather than as the input's border, so
   it can sit where the artboard puts it, just under the baseline. */
.field__input { border-bottom-color: transparent !important; }
.field__slot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--rule-top, 100%);
  height: var(--rule-weight, 1px);
  background: var(--line);
  transition: background 0.35s ease;
  pointer-events: none;
}
.field__slot:focus-within::after,
.field.is-typed .field__slot::after { background: var(--line-hot); }

/* something is wrong with what's on the line. the line says so first,
   before any words do: it takes the warn colour and lifts to it. */
.field.is-bad .field__slot::after,
.field.is-bad .field__slot:focus-within::after { background: var(--line-bad); animation: rule-warn 0.55s ease; }
@keyframes rule-warn {
  0%   { opacity: 0.2; }
  38%  { opacity: 1; }
  100% { opacity: 1; }
}
.field.is-bad .field__input { caret-color: var(--line-bad); }
.field__input:focus,
.field__input:not(:placeholder-shown) { border-bottom-color: var(--line-hot); }
/* the email step goes back to Archivo. handwriting an address is unkind. */
.field.is-email .field__input {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* the names passing through the field */
/* every hand sits differently inside its own line box, so the ghost is
   placed by measuring its real baseline at runtime, not by guessing an
   offset per font. .bl is a zero-size marker whose top IS the baseline. */
.ghost {
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  bottom: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #e9c7a0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.42s ease;
  transform-origin: 0 100%;
  line-height: 1;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}
.bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.ghost.is-on { opacity: var(--names-op); }

/* the prompt. the same slot as the names, set in archivo and kept
   quiet, for anyone who doesn't read a passing name as an invitation.
   which of the two shows is names.mode in look.js. */
.ghost.is-prompt {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: calc(var(--hint-size, 0.6em) * var(--names-scale, 1));
  font-weight: var(--hint-weight, 300);
  letter-spacing: var(--hint-track, 0.18em);
  text-transform: uppercase;
  color: var(--hint-color, #e9dcc8);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}
.ghost.is-prompt.is-on { opacity: var(--hint-op, 0.34); }

.field__go {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  letter-spacing: 0.15em;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  left: calc(100% + 0.55em);
  bottom: -0.15em;
  padding: 0 0.1em;
  min-height: 44px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.field__go:focus-visible {
  opacity: 1; transform: none;
  outline: 1px solid var(--line-hot); outline-offset: 4px;
}
.field.is-ready .field__go { opacity: 0.85; transform: none; }
.field__go:hover { opacity: 1; }

/* honeypot */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.consent {
  margin: 0;
  position: absolute;
  top: calc(100% + clamp(18px, 2.6vh, 32px));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 76vw);
  font-size: var(--small);
  letter-spacing: var(--small-track, 0.13em);
  line-height: var(--small-lead, 2.1);
  color: var(--ink);
  opacity: 0;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.capture.is-open .consent { opacity: var(--small-op); pointer-events: auto; }
.consent a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.consent a:hover { opacity: 1; }

.note {
  margin: 0;
  position: absolute;
  top: calc(100% + var(--note-drop, 0.9em));
  left: 50%;
  width: max-content;
  max-width: min(86vw, 42em);
  text-align: center;
  min-height: 1.1em;
  font-size: var(--note-size, var(--small));
  font-weight: var(--note-weight, 300);
  letter-spacing: var(--note-track, 0.2em);
  line-height: 1.7;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.note.is-on { opacity: var(--note-op, 0.82); transform: translate(-50%, 0); pointer-events: auto; }
.note[data-tone='bad'] { color: var(--note-bad, #e8b189); }
.note[data-tone='ok'] { color: var(--note-ok, #e9dcc8); }

/* the note hangs off the form, so 100% is the bottom of the line it is
   about. it must not be moved back out into .capture: there 100% is the
   whole middle block, which drops it onto the popia paragraph. */

/* the offer to fix a mistyped address. a word, not a button. */
.note__fix {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0 0 0.18em;
  margin: 0;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.25s ease;
}
.note__fix:hover { opacity: 1; }
.note__fix:focus-visible { opacity: 1; outline: 1px solid currentColor; outline-offset: 4px; }

/* done */
.done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.done.is-on { opacity: 1; transform: none; }
.done h2,
.done p {
  position: relative;
  margin: 0;
  color: var(--done-color);
  mix-blend-mode: var(--done-blend, normal);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.35);
}
.done h2 {
  top: var(--dt-y, 0);
  left: var(--dt-x, 0);
  font-size: var(--dt-size);
  font-weight: var(--dt-weight);
  letter-spacing: var(--dt-track);
  line-height: var(--dt-lead);
  white-space: pre;
  opacity: var(--done-op, 1);
}
.done p {
  top: var(--dn-y, 0);
  left: var(--dn-x, 0);
  font-size: var(--dn-size);
  font-weight: var(--dn-weight);
  letter-spacing: var(--dn-track);
  line-height: var(--dn-lead);
  white-space: pre;
  opacity: calc(var(--done-op, 1) * var(--dn-op, 0.68));
}

/* ---------- the grid, on demand: ?grid=1 ---------- */

.grid-overlay { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: none; }
body.show-grid .grid-overlay { display: block; }
.grid-overlay i { position: absolute; background: #35d6e6; opacity: 0.55; }
.grid-overlay i[data-v] { top: 0; bottom: 0; width: 1px; }
.grid-overlay i[data-h] { left: 0; right: 0; height: 1px; }
.grid-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid-overlay line { stroke: #6a6af0; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.8; }

/* the illustrator artboard laid over the page, from tune.html */
.reference { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none;
  background: center / 100% 100% no-repeat; }
.reference.is-on { display: block; opacity: 0.5; }
.reference.is-diff { display: block; opacity: 1; mix-blend-mode: difference; }

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  /* sizes, splits and placement for phones live in look.js -> mobile.
     only the things that aren't dials stay here. */
  .consent { width: 84vw; }
}

/* ---------- short ---------- */

@media (max-height: 620px) and (min-width: 861px) {
  .mark { left: 28%; width: 44%; }
  .tagline p { font-size: clamp(15px, 1.9vw, 26px); }  /* short laptop screens only */
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}