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

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-type);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 18% 22%, rgba(255, 245, 215, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(220, 195, 140, 0.35) 0%, transparent 55%),
    url("../assets/textures/paper-grain.svg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 320px 320px;
}

/* Foxing stains — inline SVG sits behind everything, fixed to viewport, with
   organic blob paths (not radial-gradients) so the edges stay sharp at any
   zoom and look like real coffee marks rather than perfect circles. */
.bg-foxing {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.site { position: relative; z-index: 1; }

/* Skip-link — hidden off-screen until keyboard focus brings it into view. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 16px;
  background: var(--navy-deep, #0f1f3a);
  color: var(--cream, #f0e3c4);
  font-family: var(--f-type);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 9999;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--red, #b8141e);
  outline-offset: 2px;
}

a { color: inherit; text-decoration: none; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Page shell */
.site {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 22px clamp(20px, 3vw, 48px) 18px;
  position: relative;
}

/* Header lockup */
.masthead {
  margin-bottom: clamp(14px, 1.6vw, 24px);
}
.masthead__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.masthead__intro {
  font-family: var(--f-type);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead__title {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.005em;
}
.masthead__tagline {
  font-family: var(--f-type);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.masthead__tagline .sep {
  color: var(--red);
  font-weight: 700;
  transform: translateY(-1px);
}
/* Generic card behavior */
.card {
  position: relative;
  background: var(--cream-light);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  transition: box-shadow var(--hover-ms) var(--ease);
  /* No transform / will-change here — the hover-lift transform lives on
     .card-wrap, not .card. Setting `will-change: transform` on the card
     promoted it to its own compositor layer and caused Chrome to render
     deeply-nested flex children at slightly different Y positions (the
     Utrecht-vs-Rimini misalignment bug). */
}
.card-wrap:hover .card,
.card-wrap.is-focus .card {
  box-shadow: var(--shadow-lift);
}
a.card { display: block; color: inherit; }

/* ── Aged scotch tape ─────────────────────────────────────
   Translucent yellowed cellophane with edge shading, glue ripple,
   dust grime, broad sheen, and a sharp specular line. Three layers
   stacked via base + ::before (overlay) + ::after (screen) — one span,
   no extra markup. Four clip-path variants so no two strips tear alike.
   ───────────────────────────────────────────────────────── */
.tape {
  position: absolute;
  width: 90px;
  height: 22px;
  pointer-events: none;
  z-index: 3;
  transition: transform var(--hover-ms) var(--ease);
  /* aged cellophane base — opaque enough to read on cream paper */
  background: linear-gradient(180deg,
    rgba(252, 235, 175, .70) 0%,
    rgba(240, 215, 145, .82) 50%,
    rgba(252, 235, 175, .70) 100%);
  filter:
    drop-shadow(0 1.5px 2px rgba(20, 12, 4, .26))
    drop-shadow(0 0.6px 0.6px rgba(20, 12, 4, .18));
}
.tape::before,
.tape::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Overlay layer: edge shading + glue ripple + dust grime, all stacked. */
.tape::before {
  background:
    radial-gradient(circle 1.2px at 22% 45%, rgba(255,255,255,.45) 100%, transparent 0),
    radial-gradient(circle 0.8px at 38% 68%, rgba(0,0,0,.18)   100%, transparent 0),
    radial-gradient(circle 1.4px at 55% 38%, rgba(255,255,255,.30) 100%, transparent 0),
    radial-gradient(circle 0.6px at 71% 60%, rgba(0,0,0,.20)   100%, transparent 0),
    radial-gradient(circle 1px   at 84% 28%, rgba(255,255,255,.40) 100%, transparent 0),
    repeating-linear-gradient(90deg,
      transparent 0 9px,
      rgba(255,255,255,.04) 9px 10px,
      transparent 10px 19px,
      rgba(0,0,0,.025) 19px 20px,
      transparent 20px 31px),
    linear-gradient(180deg,
      rgba(255,255,255,.30) 0%,  rgba(255,255,255,.10) 4%,
      rgba(0,0,0,.04)       10%, rgba(0,0,0,0)         22%,
      rgba(0,0,0,0)         78%, rgba(0,0,0,.04)       90%,
      rgba(255,255,255,.10) 96%, rgba(255,255,255,.30) 100%);
  mix-blend-mode: overlay;
  opacity: .85;
}
/* Screen layer: broad sheen + narrow specular line — the "real tape" cue. */
.tape::after {
  background:
    linear-gradient(102deg,
      transparent 56%,
      rgba(255,255,255,.30) 64%,
      rgba(255,255,255,.55) 67.5%,
      rgba(255,255,255,.20) 71%,
      transparent 80%),
    linear-gradient(102deg,
      transparent 0%,  transparent 18%,
      rgba(255,255,255,.10) 28%,
      rgba(255,255,255,.45) 42%,
      rgba(255,255,255,.18) 52%,
      transparent 68%, transparent 100%);
  mix-blend-mode: screen;
  opacity: .9;
}

/* Four torn-edge variants — pick one per strip in the HTML so no two
   tapes tear identically. Clip applies to base + both layers via the
   element bounding box, so the whole stack respects the torn shape. */
.tape--clip-a { clip-path: polygon(
  2% 4%, 1% 14%, 3% 24%, 0.4% 34%, 2.8% 44%, 0.6% 54%, 3.2% 64%, 1% 74%,
  2.6% 84%, 0.8% 94%, 1.4% 100%,
  20% 99%, 40% 100%, 60% 99%, 80% 100%, 96% 99.2%,
  98.6% 94%, 96.8% 84%, 99.2% 74%, 96.8% 64%, 99.4% 54%, 97.2% 44%,
  99.6% 34%, 97% 24%, 99% 14%, 98% 4%,
  98% 0%, 80% 1%, 60% 0.4%, 40% 1.4%, 20% 0%, 4% 1.2%
);}
.tape--clip-b { clip-path: polygon(
  3% 4%, 0.5% 12%, 2.5% 22%, 0% 31%, 3.8% 40%, 1% 49%, 2.6% 58%, 0.4% 67%,
  3.4% 76%, 0.8% 85%, 2% 94%, 0% 100%,
  20% 99%, 40% 100%, 60% 98.8%, 80% 100%, 96% 99%,
  100% 94%, 97.6% 85%, 99.4% 76%, 96.8% 67%, 99.2% 58%, 97% 49%, 99.6% 40%,
  96.2% 31%, 100% 22%, 97% 12%, 99.4% 4%,
  98% 0%, 80% 1%, 60% 0.4%, 40% 1.4%, 20% 0%, 4% 1.2%
);}
.tape--clip-c { clip-path: polygon(
  1.4% 6%, 3.2% 16%, 0.8% 26%, 3.8% 36%, 1.2% 46%, 3.4% 56%, 0.6% 66%, 3% 76%,
  1.2% 86%, 3.2% 96%, 1% 100%,
  22% 100%, 42% 99%, 62% 100%, 82% 99%, 96% 100%,
  99% 96%, 96.8% 86%, 99.4% 76%, 97% 66%, 99.4% 56%, 96.6% 46%, 98.8% 36%,
  96.2% 26%, 99.2% 16%, 98.6% 6%,
  97% 0%, 82% 1.2%, 62% 0%, 42% 1%, 22% 0.4%, 3% 1.4%
);}
.tape--clip-d { clip-path: polygon(
  2.8% 5%, 0.6% 18%, 3% 30%, 0.8% 42%, 2.4% 54%, 0.4% 66%, 3.2% 78%, 0.6% 90%,
  2% 100%,
  18% 99%, 36% 100%, 54% 99%, 72% 100%, 88% 99%, 97% 100%,
  99.2% 90%, 96.8% 78%, 99.6% 66%, 97.6% 54%, 99.2% 42%, 97% 30%, 99.4% 18%,
  97.2% 5%,
  98% 0%, 88% 1%, 72% 0.4%, 54% 1.4%, 36% 0.2%, 18% 1%, 2% 0%
);}

/* On lift the tape skews/twists slightly — sells "peeling up" feel. */
.card-wrap:hover .tape--tl,
.card-wrap.is-focus .tape--tl { transform: rotate(-9deg) skewX(-3deg) translateY(-1px); }
.card-wrap:hover .tape--tr,
.card-wrap.is-focus .tape--tr { transform: rotate(10deg) skewX(3deg) translateY(-1px); }
.card-wrap:hover .tape--tc,
.card-wrap.is-focus .tape--tc { transform: translateX(-50%) rotate(-4deg) translateY(-1px); }
.card-wrap:hover .tape--bc,
.card-wrap.is-focus .tape--bc { transform: rotate(-5deg) translateY(1px); }

.tape--tl { top: -10px; left: 18px; transform: rotate(-6deg); }
.tape--tr { top: -10px; right: 18px; transform: rotate(7deg); }
.tape--tc { top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.tape--bc { bottom: -10px; left: 42%; transform: rotate(-3deg); }

/* Section labels */
.eyebrow {
  font-family: var(--f-type);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}