/* ==========================================================================
   D.O.G — THE END
   Static site. No build step. Deploy the folder as-is.
   ========================================================================== */

/* ---------- fonts ---------------------------------------------------------
   Apfel Grotezk — Collletttivo, SIL Open Font License (see fonts/ApfelGrotezk-LICENSE.txt).
   Sets everything on the site as it stands.

   Brown Sunflower Serif — Din Studio. Declared as --font-display but NOT
   currently applied anywhere, so it is never downloaded. Note before you use
   it: the bundled file is the PERSONAL USE build, and a ticketed event is
   commercial use — it would need the paid licence first:
   https://din-studio.com/product/brown-sunflower-font/
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Apfel Grotezk';
  src: url('../fonts/ApfelGrotezk-Regular.woff2') format('woff2'),
       url('../fonts/ApfelGrotezk-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apfel Grotezk';
  src: url('../fonts/ApfelGrotezk-Mittel.woff2') format('woff2'),
       url('../fonts/ApfelGrotezk-Mittel.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apfel Grotezk';
  src: url('../fonts/ApfelGrotezk-Fett.woff2') format('woff2'),
       url('../fonts/ApfelGrotezk-Fett.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brown Sunflower';
  src: url('../fonts/BrownSunflowerSerif.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  --red:   #dc211d;   /* sampled from the key art */
  --black: #0b0a0a;
  --ink:   #111010;
  --bone:  #efe8de;

  --font-ui: 'Apfel Grotezk', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Brown Sunflower', 'Apfel Grotezk', serif;

  --pad: clamp(20px, 5vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-ui);
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--bone); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; top: 8px; left: 8px; z-index: 300;
  padding: 10px 14px; background: var(--black); color: var(--bone);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---------- grain + texture overlay ------------------------------------- */
.grain,
.texture {
  position: fixed; inset: 0; z-index: 120;
  pointer-events: none;
}
.texture {
  background: url('../img/texture.jpg') center / cover no-repeat;
  opacity: .30;
  mix-blend-mode: soft-light;
  z-index: 119;
}
.grain {
  opacity: .13;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 180px 180px;
  /* self-contained noise tile — no extra request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .grain { animation: grainshift .8s steps(1) infinite; }
  @keyframes grainshift {
    0%   { transform: translate3d(0,0,0) }
    25%  { transform: translate3d(-4%,3%,0) }
    50%  { transform: translate3d(3%,-5%,0) }
    75%  { transform: translate3d(-2%,-2%,0) }
    100% { transform: translate3d(0,0,0) }
  }
}
.vignette {
  position: fixed; inset: 0; z-index: 118; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgb(0 0 0 / .42) 100%);
}

/* ---------- chrome ------------------------------------------------------ *
 * The coffin is the mark: centred at the top, and used again as corner
 * furniture. The PNGs are red artwork; brightness(0) drops them to solid
 * black for the red panels without needing a second file.
 * ----------------------------------------------------------------------- */
.logo {
  position: absolute; top: clamp(20px, 4svh, 42px); left: 50%;
  translate: -50% 0; z-index: 100;
  display: block;
  transition: opacity .3s;
}
.logo img { height: clamp(38px, 6.5svh, 62px); width: auto; }
.logo--dark img { filter: brightness(0); }
.logo:hover { opacity: .7; }

/* small caps labels — the recurring voice for anything that isn't display type */
.label {
  margin: 0;
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.label--muted { opacity: .55; }

/* corner labels, pinned to the panel they sit in */
.frame { position: absolute; inset: 0; pointer-events: none; }
.frame__label {
  position: absolute;
  font-size: clamp(10px, 1.15vw, 14px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.frame--dark .frame__label { color: var(--ink); }
.frame__label--tl { top: var(--pad); left: var(--pad); }
.frame__label--tr { top: var(--pad); right: var(--pad); }
.frame__label--bl { bottom: var(--pad); left: var(--pad); }
.frame__label--br { bottom: var(--pad); right: var(--pad); }

/* ---------- hero -------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(90px, 16svh, 160px) var(--pad) clamp(80px, 14svh, 150px);
  background: var(--red);
  color: var(--ink);
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* Explicitly sized so the glow is fully transparent well before the bottom
     edge. Otherwise the hero's last row of pixels is a tinted red while the
     fade below starts from pure red, and that mismatch shows as a seam. */
  background: radial-gradient(ellipse 78% 52% at 50% 34%, rgb(255 120 90 / .26), transparent 70%);
}
.hero__lockup {
  position: relative; z-index: 2;
  width: min(92vw, 1080px);
  filter: drop-shadow(0 18px 40px rgb(0 0 0 / .18));
  animation: lockup-in 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lockup-in {
  from { opacity: 0; transform: scale(1.035); filter: blur(6px) }
  to   { opacity: 1; transform: none; filter: none }
}
.scrollcue {
  position: absolute; z-index: 2;
  bottom: clamp(22px, 5svh, 48px); left: 50%; translate: -50% 0;
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(5px) } }

/* ---------- the poem ---------------------------------------------------- *
 * One act per screen. Lines are pre-broken in the markup and each stanza is
 * a size container, so the type is scaled to fit its own column instead of
 * being clamped to the viewport and overflowing on long lines.
 * ----------------------------------------------------------------------- */
.poem {
  position: relative;
  color: var(--red);
  padding: 12svh 0 4svh;
  background-color: var(--black);
  /* One voice for the whole poem: the size is set by the tightest column in
     it (a stanza in a two-up act), so every stanza reads at the same weight
     the way the artwork does — long lines simply run wider, they don't get
     shrunk. Tracks the pair column width as the viewport changes. */
  --poem-size: min(57px, max(3.56vw, calc(3.98vw - 5.42px)));
}
.poem::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgb(220 33 29 / .12), transparent 60%);
}

.act {
  position: relative;
  min-height: 88svh;
  display: grid;
  align-content: center;
  gap: clamp(40px, 9svh, 120px);
  padding: clamp(40px, 8svh, 110px) var(--pad);
  max-width: 1560px;
  margin-inline: auto;
}
.act--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 6vw, 110px);
  align-items: start;
}
.act--pair > :nth-child(2) { margin-top: clamp(48px, 16svh, 200px); }

/* the size container each stanza is measured against */
.col { container-type: inline-size; width: 100%; }

.stanza {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.06;
  text-transform: uppercase;
  /* --w (set per stanza in the markup) is the width of that stanza's longest
     line in em. The second term is the largest size at which that line still
     fits the column, so --poem-size is used unless the stanza genuinely
     can't take it — no line can overflow, whatever the viewport. */
  font-size: min(var(--poem-size), calc(94cqw / var(--w)));
}
.stanza .l { display: block; }
.stanza--center { text-align: center; }
.stanza--left   { text-align: left; }
.stanza--right  { text-align: right; }
/* the opening and closing lines break the poem's shared size on purpose —
   they're the two moments that carry a whole screen on their own */
.stanza--lead   { font-size: min(200px, calc(78cqw / var(--w))); }
.stanza--finale { font-size: min(190px, calc(62cqw / var(--w))); }

/* reveal — the blur fade the poem is built around: each block arrives out of
   focus and resolves as it settles into the viewport */
.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 1.3s cubic-bezier(.2,.7,.2,1),
    transform 1.3s cubic-bezier(.2,.7,.2,1),
    filter 1.3s cubic-bezier(.2,.7,.2,1);
  filter: blur(18px);
  will-change: opacity, transform, filter;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
.reveal--slow { transition-duration: 1.7s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hero__lockup { animation: none; }
  .scrollcue { animation: none; }
}

/* finale act — the closing line, alone on the screen */
.act--finale { place-items: center; }

/* ---------- the end — plate --------------------------------------------- *
 * The outlined lockup on black with the four corner labels, straight off the
 * campaign artwork.
 * ----------------------------------------------------------------------- */
.plate {
  position: relative; z-index: 6;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(90px, 18svh, 190px) var(--pad);
  background: var(--black);
}
.plate__lockup { width: min(88vw, 760px); }

/* ---------- the closing panel ------------------------------------------- *
 * Centred stack, no boxes: THE END as type, the three facts side by side,
 * then tickets as type. Matches the campaign layout.
 * ----------------------------------------------------------------------- */
.details {
  position: relative; z-index: 6;
  min-height: 100svh;
  color: var(--ink);
  padding: clamp(70px, 11svh, 140px) var(--pad) clamp(36px, 6svh, 72px);
  background-color: var(--red);
  display: grid; justify-items: center; align-content: center;
  gap: clamp(26px, 4.5svh, 58px);
  text-align: center;
}
.details::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/texture.jpg') center / cover no-repeat;
  opacity: .14; mix-blend-mode: multiply;
}
.details > * { position: relative; z-index: 2; }
.details > .seam { z-index: 1; }
.details::before { z-index: 2; }

.details__head { display: grid; gap: clamp(10px, 1.8svh, 20px); }
.details__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(52px, 10vw, 150px);
  line-height: .88;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.details__sub {
  margin: 0;
  font-weight: 800;
  font-size: clamp(15px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
/* Brown Sunflower's comma reads as a broken glyph at display size — kept as a
   hook in case display type comes back; harmless on the grotesk. */
.punct { font-weight: inherit; }

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: clamp(20px, 4svh, 40px) clamp(28px, 7vw, 110px);
}
.facts dd {
  margin: 0;
  font-weight: 800;
  font-size: clamp(17px, 2.3vw, 32px);
  line-height: 1.25;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.facts sup { font-size: .6em; vertical-align: super; }

.cta { display: grid; justify-items: center; gap: clamp(16px, 3svh, 30px); }
.cta__tickets {
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  transition: opacity .25s, letter-spacing .25s;
}
.cta__tickets:hover,
.cta__tickets:focus-visible { letter-spacing: .04em; opacity: .72; }
.cta__apply {
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 20px);
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: opacity .25s, letter-spacing .25s;
}
.cta__apply:hover { opacity: .62; letter-spacing: .02em; }

.elsewhere {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 22px);
  max-width: min(100%, 62em);
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.elsewhere a { transition: opacity .25s, letter-spacing .25s; }
.elsewhere a:hover { opacity: .6; letter-spacing: .24em; }
.elsewhere__mark { width: 9px; height: auto; opacity: .8; }

.details__copy {
  margin: 0;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}


/* ---------- section transitions ----------------------------------------- *
 * The colour doesn't ramp into the next section, it breaks apart into film
 * grain — the same grain that sits over the whole site. Each band is the
 * outgoing colour masked by thresholded fractal noise; the threshold climbs
 * down the stack, so the speckle thins out until only the new colour is left.
 * Pure CSS, no JS: with masks unsupported the bands simply read as a solid
 * block of the outgoing colour, which is still a clean edge.
 * ----------------------------------------------------------------------- */
.seam {
  position: absolute; top: 0; left: 0; right: 0;
  /* capped to a fraction of the viewport as well as an absolute height, so on
     a short phone screen it can't reach down into the first line of type */
  height: min(52svh, 32vh, 520px);
  display: flex; flex-direction: column;
  pointer-events: none;
}
.seam i { flex: 1; display: block; }
.seam--red i   { background: var(--red); }
.seam--black i { background: var(--black); }
.seam i:first-child { -webkit-mask-image: none; mask-image: none; }

.seam i:nth-child(2) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-1.880%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-1.880%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 71px 137px;
          mask-position: 71px 137px;
}
.seam i:nth-child(3) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.109%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.109%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 142px 274px;
          mask-position: 142px 274px;
}
.seam i:nth-child(4) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.338%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.338%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 213px 111px;
          mask-position: 213px 111px;
}
.seam i:nth-child(5) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.567%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.567%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 284px 248px;
          mask-position: 284px 248px;
}
.seam i:nth-child(6) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.796%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-2.796%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 55px 85px;
          mask-position: 55px 85px;
}
.seam i:nth-child(7) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.025%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.025%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 126px 222px;
          mask-position: 126px 222px;
}
.seam i:nth-child(8) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.255%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.255%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 197px 59px;
          mask-position: 197px 59px;
}
.seam i:nth-child(9) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.484%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.484%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 268px 196px;
          mask-position: 268px 196px;
}
.seam i:nth-child(10) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.713%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.713%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 39px 33px;
          mask-position: 39px 33px;
}
.seam i:nth-child(11) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.942%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-3.942%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 110px 170px;
          mask-position: 110px 170px;
}
.seam i:nth-child(12) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-4.171%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-4.171%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 181px 7px;
          mask-position: 181px 7px;
}
.seam i:nth-child(13) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-4.400%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20.34%20.34%20.34%200%200%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%277%27%20intercept%3D%27-4.400%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: 252px 144px;
          mask-position: 252px 144px;
}

/* ---------- narrow screens --------------------------------------------- */
@media (max-width: 860px) {
  .act--pair {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(48px, 12svh, 120px);
  }
  .act--pair > :nth-child(2) { margin-top: 0; }
  .act { min-height: 0; padding-block: clamp(48px, 11svh, 90px); }
  .poem { padding-block: 10svh 6svh; }
  /* the dissolve has to fit inside the blank space above the first stanza —
     poem's + first act's top padding — or it bleeds over the opening line */
  .seam { height: min(24svh, 220px); }
  /* Narrow columns can't hold the desktop line breaks at a readable size, so
     the lines run together and wrap naturally instead — one size for every
     stanza, nothing squeezed down to fit a 28-character line. */
  .stanza {
    font-size: clamp(29px, 8.6vw, 54px);
    text-wrap: balance;
  }
  .stanza .l { display: inline; }
  .stanza--lead   { font-size: clamp(48px, 15vw, 96px); }
  .stanza--finale { font-size: clamp(44px, 13vw, 88px); }
}

@media (max-width: 620px) {
  .hero { padding-block: clamp(70px, 12svh, 120px) clamp(90px, 16svh, 150px); }
  .hero__lockup { width: 96vw; }
  /* clear the corner labels */
  .scrollcue { bottom: calc(var(--pad) + 30px); }
  .facts { grid-template-columns: repeat(2, auto); }
  .facts div:last-child { grid-column: 1 / -1; }
  /* the row wraps on a phone, and a divider stranded at the start of the
     second line reads as a mistake — drop them and let the gaps space it */
  .elsewhere { gap: 12px clamp(14px, 4vw, 24px); }
  .elsewhere__mark { display: none; }
}