/* ==========================================================================
   Hack the Toon: "A bright day on the Tyne"

   The page is painted in the same medium as the commissions: one watercolour
   of the Tyne on a clear summer's day. A deep cobalt sky, with clouds drifting
   across it, pales to haze at the horizon, and the river at the foot of the
   page glints in the sun. The sun sits behind the magpie, the words sit on
   sheets of watercolour paper, and Metro yellow is kept for the things you
   press.
   ========================================================================== */

:root {
  /* The wash */
  --zenith: #133d88;       /* the very top and bottom of the page, and the browser bars */
  --cobalt: #1b55a8;
  --cerulean: #2569b8;

  /* Light, as RGB channels so it can be used at any strength: rgb(var(--sun) / 0.4) */
  --sun: 255 196 92;       /* sunlight on sandstone */

  /* Paper and ink */
  --cream: #f6eedf;
  --mist: #f1f4fb;         /* body copy on the wash: cream, cooled by the blue */
  --card: #fbf6ea;
  --ink: #1c1a2b;
  --ink-soft: #565266;
  --pen: #2a44a6;          /* ultramarine fountain-pen ink */

  --metro: #ffc72c;
  --metro-deep: #e0a800;
  --brick: #b0503a;

  --font-display: "Arvo", "Rockwell", "Roboto Slab", Georgia, serif;
  --font-body: "Arvo", "Rockwell", "Roboto Slab", Georgia, serif;
  --font-dot: "DotGothic16", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Browsers paint this behind the page wherever it doesn't reach: Safari on
   iOS fills its status bar and toolbar strips with it, and it shows when the
   page is pulled past either end. The wash starts and ends on this colour, so
   those strips read as more sky. Keep it in step with theme-color. */
html,
body { background: var(--zenith); }

/* Dark scrollbars against the sky; the form controls on paper stay light */
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
.panel,
.note { color-scheme: light; }

::selection { background: var(--metro); color: var(--ink); }

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2 {
  font-family: var(--font-display);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 3px solid var(--metro);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Yellow would vanish against the paper */
.panel :focus-visible,
.note :focus-visible { outline-color: var(--pen); }

.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--metro {
  --btn-bg: var(--metro);
  --btn-fg: var(--ink);
  box-shadow: 0 4px 0 var(--metro-deep);
}
.btn--metro:hover { box-shadow: 0 6px 0 var(--metro-deep); }
.btn--metro:active { box-shadow: 0 2px 0 var(--metro-deep); }
/* The arrow leans towards the next stop */
.btn--metro [aria-hidden="true"] { display: inline-block; transition: transform 0.15s ease; }
.btn--metro:hover [aria-hidden="true"] { transform: translateX(3px); }

.btn--ghost {
  border-color: rgb(246 238 223 / 0.35);
  color: var(--cream);
}
.btn--ghost:hover { border-color: var(--cream); }

.btn--block { width: 100%; padding-block: 1.05em; font-size: 1.05rem; }
.btn[disabled] { opacity: 0.75; cursor: progress; transform: none; }

/* Metro passenger-information style display */
.dotmatrix {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  padding: 0.45em 0.9em;
  border-radius: 6px;
  background:
    radial-gradient(circle, rgb(255 199 44 / 0.07) 1px, transparent 1.4px) 0 0 / 4px 4px,
    #07080c;
  /* The unit's housing, so it holds its own against the sky */
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 10px 24px -10px rgb(0 0 0 / 0.8);
  color: var(--metro);
  font-family: var(--font-dot);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgb(255 199 44 / 0.55);
  white-space: nowrap;
}
.dotmatrix__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--metro);
  box-shadow: 0 0 8px var(--metro);
  animation: blink 2.4s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

.geordie {
  position: relative;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--metro);
  cursor: help;
  white-space: nowrap;
}
.geordie__gloss {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: 220px;
  padding: 0.5em 0.75em;
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.7);
  font: 400 0.8rem/1.35 var(--font-body);
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.geordie__gloss::before { content: "Geordie: "; color: var(--brick); font-weight: 700; }
.geordie:hover .geordie__gloss,
.geordie:focus .geordie__gloss { opacity: 1; transform: translate(-50%, 0); }
/* On paper, the gloss is dark instead */
.note .geordie { text-decoration-color: var(--metro-deep); }
.note .geordie__gloss { background: var(--ink); color: var(--cream); }
.note .geordie__gloss::before { color: var(--metro); }

/* --------------------------------------------------------------------------
   Page: the wash
   -------------------------------------------------------------------------- */
.page {
  /* Each page floodlights its own landmarks (see the end of this section) */
  --floodlight: linear-gradient(transparent, transparent);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  /* From the top: the grain of the paper, the Tyne glinting in the sun, the
     blooms and drifts of the wash, then the sky itself, laid in wet-in-wet
     from deep cobalt overhead down to the haze on the horizon. The large
     textures are WebP renders of the SVGs in assets/texture/src (see the
     README). */
  background:
    url("../assets/texture/granulation.svg") 0 0 / 240px 240px,
    url("../assets/texture/paper.svg") 0 0 / 320px 320px,
    url("../assets/texture/river.webp") 0 100% / 100% 9% no-repeat,
    url("../assets/texture/blooms.webp") center / cover no-repeat,
    url("../assets/texture/drift.webp") center / cover no-repeat,
    radial-gradient(ellipse 55% 45% at 82% 22%, rgb(120 180 240 / 0.35), transparent 70%),
    linear-gradient(
      var(--zenith),
      var(--cobalt) 20%,
      var(--cerulean) 46%,
      #3a80c6 60%,
      #79b1dc 72%,
      #c2dcea 82%,
      #f2ecd8 90.6%,
      #6d9fb8 91%,
      #3a7598 94%,
      #22548c 97.5%,
      var(--zenith)
    );
  background-blend-mode: multiply, soft-light, normal, soft-light, multiply, normal, normal;
}
/* Floodlight: a page-specific pool of warm light around its landmarks */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--floodlight);
  pointer-events: none;
}
/* Clouds drifting slowly across the upper sky. The strip is one tile wider
   than the page and slides by exactly one tile, so the loop is seamless; it
   moves as a whole layer, so the browser never has to repaint the wash. */
.page::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(100% + 1600px);
  height: min(70vh, 640px);
  background: url("../assets/texture/clouds.webp") 0 0 / 1600px 100% repeat-x;
  opacity: 0.85;
  pointer-events: none;
  animation: drift 240s linear infinite;
}
@keyframes drift { to { transform: translateX(-1600px); } }

/* Sunlight warming the sandstone of Grey's Monument */
.page--interest {
  --floodlight: radial-gradient(ellipse 34vw 56vh at 100% 100%, rgb(var(--sun) / 0.3), rgb(var(--sun) / 0.08) 50%, transparent 74%);
}
/* A haze of light behind the university arches, where the sketch of the
   building above them would otherwise be lost against the blue. It is measured
   from the painting (866 x 1100), so it follows it at every size. */
.page--thanks {
  --arches-h: clamp(220px, 44vh, 500px);
  --floodlight: radial-gradient(
    ellipse calc(var(--arches-h) * 0.62) calc(var(--arches-h) * 0.42)
    at calc(var(--arches-h) * 0.36) calc(100% - var(--arches-h) * 0.74),
    rgb(255 252 240 / 0.6), rgb(240 248 255 / 0.2) 55%, transparent 75%
  );
}

.site-header {
  position: relative;
  z-index: 2;
  padding: 18px var(--gutter);
}
.site-header:not(:has(.brand__name, .brand__mark)) { display: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__mark { width: 40px; height: auto; }
.brand__name { font: 700 1.2rem/1 var(--font-display); }

/* Corner pieces: paintings with straight edges, placed flush against the
   page's bottom corners and kept behind the content */
.corner {
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  animation: develop 1.4s 0.3s ease-out both;
}
/* Both paintings run off the edge of their canvas on one more side than the
   corner they sit in, so that edge is faded into the wash */
.corner--right {
  right: 0;
  height: clamp(240px, 46vh, 520px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%);
}
.corner--left {
  left: 0;
  height: var(--arches-h);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 18%);
  mask-image: linear-gradient(to left, transparent, #000 18%);
}
.corner--angel {
  right: clamp(8px, 3vw, 48px);
  bottom: clamp(4px, 2vh, 20px);
  height: clamp(110px, 20vh, 220px);
}
/* Paintings fade up out of the wash, like watercolour soaking in. The filter
   lists match the paintings' own, so the glow eases in rather than snapping. */
@keyframes develop {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: saturate(0.2) blur(2px) drop-shadow(0 0 0 rgb(255 255 255 / 0));
  }
}

/* --------------------------------------------------------------------------
   Register your interest
   -------------------------------------------------------------------------- */
.interest {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "intro panel"
    "art   panel";
  column-gap: clamp(32px, 6vw, 88px);
  row-gap: clamp(8px, 2vh, 20px);
  align-content: center;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(16px, 3vh, 32px);
}
/* Above the panel, so the sun behind the magpie can never cover the words */
.interest__intro { grid-area: intro; align-self: end; position: relative; z-index: 1; }
.panel { grid-area: panel; align-self: center; }

/* The Tyne Bridge, under the headline, in a soft haze of daylight */
.interest__art {
  grid-area: art;
  align-self: start;
  width: auto;
  height: clamp(170px, 34vh, 380px);
  max-width: 100%;
  object-fit: contain;
  object-position: left top;
  margin-left: -2%;
  filter: saturate(1) blur(0) drop-shadow(0 0 44px rgb(255 255 255 / 0.4));
  animation: develop 1.4s 0.3s ease-out both;
}

.title { margin: 0.35em 0 0.3em; }
.title__small {
  display: block;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 400;
  color: rgb(var(--sun));
  text-shadow: 0 1px 2px rgb(19 61 136 / 0.5), 0 0 16px rgb(19 61 136 / 0.5);
}
.title__big {
  position: relative;
  display: block;
  width: fit-content;
  font-size: clamp(5rem, 15vw, 11.5rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.03em;
  /* Painted, not printed: the paper's grain shows through the letters */
  color: var(--cream);
  background: url("../assets/texture/paper.svg") 0 0 / 320px 320px, var(--cream);
  background-blend-mode: soft-light;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* A single dry stroke of Metro yellow under the name */
.title__big::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.04em;
  right: -0.08em;
  bottom: -0.1em;
  height: 0.2em;
  background: url("../assets/texture/brush.svg") center / 100% 100% no-repeat;
  transform-origin: left center;
  animation: brush 0.7s 0.6s cubic-bezier(.5, 0, .2, 1) both;
}
@keyframes brush { from { transform: scaleX(0); } }
.title__stop { color: var(--metro); -webkit-text-fill-color: var(--metro); }

.interest__lede {
  max-width: 32em;
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--mist);
  /* A soft shadow of the sky, so the words hold up when a cloud drifts behind */
  text-shadow: 0 1px 2px rgb(19 61 136 / 0.5), 0 0 14px rgb(19 61 136 / 0.55);
}

.interest__intro > *,
.panel {
  animation: rise 0.8s cubic-bezier(.2, .8, .2, 1) both;
}
.interest__intro > :nth-child(2) { animation-delay: 0.08s; }
.interest__intro > :nth-child(3) { animation-delay: 0.16s; }
.panel { animation-delay: 0.24s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}

/* The form, on a sheet of watercolour paper. The sheet itself is drawn by
   ::after so that its torn edge can be masked without clipping the magpie. */
.panel {
  --magpie-h: clamp(84px, 11vw, 118px);
  --perch: clamp(20px, 3vw, 36px);
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 3vw, 34px);
  color: var(--ink);
  border-radius: 8px;
  /* Tucked in, so the shadow shows below the torn edge rather than beside it */
  box-shadow: 0 34px 60px -26px rgb(2 4 20 / 0.85), 0 12px 24px -16px rgb(2 4 20 / 0.5);
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("../assets/texture/paper.svg") 0 0 / 320px 320px,
    /* sunlight from above, and a little blue reflected from the sky below */
    radial-gradient(120% 70% at 85% 0%, #fffef8, transparent 65%),
    linear-gradient(to top, rgb(150 190 230 / 0.12), transparent 35%),
    var(--card);
  background-blend-mode: soft-light, normal, normal, normal;
  /* The torn edge. It is inline rather than a file because browsers fetch mask
     images under stricter rules than other images: a mask file that fails to
     load (for example when the page is opened from disk) hides the whole sheet. */
  --deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 600' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='4' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3C/filter%3E%3Crect x='5' y='5' width='490' height='590' rx='4' fill='%23fff' filter='url(%23d)'/%3E%3C/svg%3E");
  -webkit-mask: var(--deckle) 0 0 / 100% 100% no-repeat;
  mask: var(--deckle) 0 0 / 100% 100% no-repeat;
}
/* The sun, rising behind the sheet, for the magpie to stand against */
.panel::before {
  /* The disc is just over half the width of the image (the rest is its halo):
     about 1.3 magpies across, centred a third of a magpie above the edge */
  --sun-size: calc(var(--magpie-h) * 2.44);
  content: "";
  position: absolute;
  z-index: -1;
  right: calc(var(--perch) + var(--magpie-h) * 0.42 - var(--sun-size) / 2);
  bottom: calc(100% + var(--magpie-h) * 0.34 - var(--sun-size) / 2);
  width: var(--sun-size);
  height: var(--sun-size);
  background: url("../assets/texture/sun.svg") center / contain no-repeat;
  pointer-events: none;
  animation: sunrise 1.8s 0.2s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes sunrise {
  from { opacity: 0; transform: translateY(30%); }
}
.panel__title { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; }
.panel__lede { margin: 0.5em 0 1.3em; color: var(--ink-soft); }

/* A magpie perched on the top edge of the form */
.panel__magpie {
  position: absolute;
  right: var(--perch);
  bottom: calc(100% - 9px);
  height: var(--magpie-h);
  width: auto;
  pointer-events: none;
  animation: hop 0.7s 0.9s cubic-bezier(.3, .7, .4, 1.4) both;
  transform-origin: 50% 100%;
}
@keyframes hop {
  0% { opacity: 0; transform: translate(40px, -30px) rotate(8deg); }
  60% { opacity: 1; }
  100% { transform: none; }
}

.station-sign {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font: 700 0.9rem/1 var(--font-display);
  letter-spacing: 0.04em;
}
.station-sign__bar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 5px solid var(--metro);
  background: var(--ink);
}

.form { display: grid; gap: 16px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.92rem;
}
.field input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid rgb(28 26 43 / 0.2);
  border-radius: 10px;
  background: #fffdf9;
  color: var(--ink);
  caret-color: var(--pen);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: #6e6a80; }
.field input:focus {
  outline: none;
  border-color: var(--pen);
  box-shadow: 0 0 0 4px rgb(255 199 44 / 0.55);
}
.field.is-invalid input { border-color: var(--brick); }
.field__error {
  margin: 6px 0 0;
  color: var(--brick);
  font-size: 0.85rem;
  font-weight: 400;
}
.field__error:empty { display: none; }
/* Honeypot: kept off-screen rather than display:none, which some bots skip */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__error {
  margin: 0;
  color: var(--brick);
  font-size: 0.9rem;
  text-align: center;
}
.form__error:empty { display: none; }
/* Turnstile only shows itself if it needs the visitor to click something */
.cf-turnstile:empty { display: none; }
.form__small { margin: -4px 0 0; font-size: 0.85rem; color: var(--ink-soft); text-align: center; }

/* --------------------------------------------------------------------------
   Thank you: the Metro pulls in, drawn in white pencil, then the note is sealed
   -------------------------------------------------------------------------- */
.thanks {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 40px);
  width: min(1060px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) var(--gutter);
  text-align: center;
}

.arrival {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.arrival__display {
  min-width: 18em;
  justify-content: center;
  margin-bottom: clamp(14px, 2.5vh, 24px);
  font-size: 0.9rem;
  animation: rise 0.6s both;
}
.arrival__track {
  position: relative;
  width: min(880px, 100%);
}
/* Light from the platform, spilling onto the track */
.arrival__track::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 150%;
  height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.18), transparent);
  pointer-events: none;
  animation: develop 1.2s 1.6s ease-out both;
}
/* The pencil drawing is inverted so it reads as white pencil against the deep
   blue at the top of the sky */
.arrival__train {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: invert(1) drop-shadow(0 0 0 rgb(255 255 255 / 0.7)) drop-shadow(0 0 6px rgb(255 255 255 / 0.4));
  animation: pull-in 2.6s 0.3s cubic-bezier(.12, .7, .25, 1.02) both;
}
@keyframes pull-in {
  from { transform: translateX(-130vw); }
  to { transform: translateX(0); }
}
/* White-pencil rails, drawn in as the train approaches */
.arrival__rails {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 300vw;
  height: 14px;
  transform: translateX(-50%);
  max-width: none;
  overflow: visible;
  /* Fading out towards the edges of the page, as a sketch would */
  -webkit-mask-image: linear-gradient(90deg, transparent 33.3%, #000 42%, #000 58%, transparent 66.7%);
  mask-image: linear-gradient(90deg, transparent 33.3%, #000 42%, #000 58%, transparent 66.7%);
}
.arrival__rails path {
  fill: none;
  stroke: var(--cream);
  stroke-linecap: round;
  stroke-dasharray: 6000;
  animation: draw 1.4s 0.1s ease-out both;
}
@keyframes draw { from { stroke-dashoffset: 6000; } }

/* The message, on a page torn from a ruled notebook */
.note {
  width: min(620px, 100%);
  text-align: left;
}
.note__card {
  --margin: clamp(24px, 4vw, 44px);
  position: relative;
  isolation: isolate;
  padding: var(--margin);
  padding-top: calc(var(--margin) + 14px);
  border-radius: 4px;
  color: var(--ink);
  box-shadow: 0 34px 60px -26px rgb(2 4 20 / 0.85), 0 12px 24px -16px rgb(2 4 20 / 0.5);
  transform: rotate(-1.2deg);
  animation: card-in 0.8s 2.9s cubic-bezier(.2, .8, .2, 1) both, thud 0.35s 3.95s ease-out;
}
/* The page: a red margin, feint blue rules, and holes punched along the top */
.note__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent calc(var(--margin) - 14px), rgb(206 70 70 / 0.45) 0 calc(var(--margin) - 12.5px), transparent 0),
    repeating-linear-gradient(transparent 0 31px, rgb(42 68 166 / 0.15) 31px 32px) 0 44px / 100% 100% no-repeat,
    url("../assets/texture/paper.svg") 0 0 / 320px 320px,
    var(--card);
  background-blend-mode: normal, normal, soft-light, normal;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 12px no-repeat,
    radial-gradient(circle, transparent 5px, #000 5.6px) 0 12px / 30px 22px repeat-x,
    linear-gradient(#000 0 0) 0 34px / 100% calc(100% - 34px) no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% 12px no-repeat,
    radial-gradient(circle, transparent 5px, #000 5.6px) 0 12px / 30px 22px repeat-x,
    linear-gradient(#000 0 0) 0 34px / 100% calc(100% - 34px) no-repeat;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) rotate(1deg); }
}
/* The card gives a little as the seal is pressed into it */
@keyframes thud {
  40% { transform: rotate(-1.2deg) translateY(3px) scale(0.995); }
}

.note__seal {
  position: absolute;
  right: clamp(-28px, -2vw, -12px);
  bottom: clamp(-34px, -3vw, -18px);
  width: clamp(92px, 12vw, 132px);
  height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 6px rgb(10 8 30 / 0.45));
  animation: stamp 0.6s 3.6s cubic-bezier(.5, 0, .75, 0) both;
}
@keyframes stamp {
  0% { opacity: 0; transform: translateY(-40px) scale(2.2) rotate(-30deg); filter: drop-shadow(0 30px 18px rgb(10 8 30 / 0.2)); }
  30% { opacity: 1; }
  80% { transform: scale(0.94) rotate(-12deg); }
  100% { transform: scale(1) rotate(-12deg); }
}

.thanks__kicker {
  margin: 0 0 0.3em;
  color: var(--pen);
  font: 700 clamp(1.2rem, 2.4vw, 1.6rem)/1.2 var(--font-display);
}
.thanks__title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
}
.thanks__lede {
  max-width: 30em;
  margin: 0.8em 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  /* Stacked: headline, form, then the Tyne Bridge to finish the page */
  .interest {
    --stack-gap: clamp(28px, 5vh, 48px);
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "panel" "art";
    row-gap: var(--stack-gap);
  }
  /* Clear space above the form for the sun and the magpie, which would
     otherwise rise into the last lines of the intro on narrow phones */
  .panel { margin-top: calc(var(--magpie-h) + 12px - var(--stack-gap)); }
  .interest__art {
    justify-self: center;
    width: min(100%, 560px);
    height: auto;
    margin: 0;
  }
  .corner--right { display: none; }
  /* With the Monument gone, the sunlight falls on the bridge instead */
  .page--interest {
    --floodlight: radial-gradient(ellipse 90vw 46vh at 50% 100%, rgb(var(--sun) / 0.2), transparent 72%);
  }
  /* Room at the bottom of the thank-you page for the corner paintings */
  .thanks { padding-bottom: clamp(150px, 26vh, 240px); }
  .page--thanks { --arches-h: clamp(170px, 26vh, 260px); }
  .corner--angel { height: clamp(80px, 13vh, 130px); }
}

@media (max-width: 640px) {
  /* Room under the message for the seal, so it never covers the text */
  .note__card { padding-bottom: 76px; }
  .note__seal { right: 10px; bottom: -22px; width: 96px; }
}

@media (max-width: 520px) {
  .brand__name { font-size: 1.05rem; }
  .arrival__display { min-width: 0; font-size: 0.75rem; }
}

/* High-contrast modes drop backgrounds, which would leave the painted title
   with no fill at all */
@media (forced-colors: active) {
  .title__big { -webkit-text-fill-color: currentColor; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}