/* ==========================================================================
   Justin Benner: The Personal Dispatches
   One stylesheet, organised in the same order as the page.

   1.  Fonts
   2.  Colour and type tokens
   3.  Base and accessibility helpers
   4.  Animations
   5.  Shared pieces (containers, artwork, buttons, cards, tape)
   6.  Utility strip
   7.  Sticky header
   8.  Field menu (overlay, Rorschach plate, bat swarm)
   9.  Hero
   10. Ticker
   11. Work: Dispatch #001 Tobacco Road
   12. Dispatch #002 The Family Central
   13. Dispatches #003 and #004
   14. Field Notes
   15. About me
   16. Contact: the telegram
   17. Footer
   18. Custom scrollbars
   ========================================================================== */


/* ===== 1. Fonts (self-hosted, latin subset) ===== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/playfair-display-900.woff2) format('woff2');
}

@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/rock-salt.woff2) format('woff2');
}

@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/special-elite.woff2) format('woff2');
}


/* ===== 2. Colour and type tokens ===== */

:root {
  /* Core palette */
  --ink: #17130F;          /* near-black, the main ink colour */
  --cream: #F2EDE3;        /* page background */
  --paper: #FBF8F2;        /* cards and photo frames */
  --red: #C4161C;          /* blood red, the main accent */
  --red-dark: #B3261E;     /* link hover */
  --orange: #F0592A;

  /* Supporting colours, mostly used in artwork and backgrounds */
  --cyan: #2BB0D6;
  --green: #6FAF86;
  --pink: #F36B9A;
  --peach: #F6C3B2;
  --yellow: #F7E27A;       /* workbench sticky note */
  --telegram: #F1E2A8;     /* telegram paper */

  /* Neutrals */
  --sand: #E3DCCF;
  --grey-dark: #4A433B;
  --grey: #8A8174;
  --grey-light: #CFC6B6;
  --white: #FFFFFF;

  /* Fonts */
  --font-body: 'Special Elite', 'Courier New', monospace;
  --font-hand: 'Rock Salt', cursive;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Layout */
  --column: 1340px;                      /* content width used by every section */
  --gutter: clamp(16px, 4vw, 48px);      /* side padding on every section */
}


/* ===== 3. Base and accessibility helpers ===== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--cream);
}

body.menu-open {
  overflow: hidden;
}

/* Wraps the whole page so wide artwork can't cause sideways scrolling */
.page {
  position: relative;
  overflow-x: clip;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

/* :where() keeps these at zero specificity, so any link with its own colour keeps it on hover */
:where(a) {
  color: var(--ink);
}

:where(a:hover) {
  color: var(--red-dark);
}

/* A clear focus ring for keyboard users, in every section */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

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

/* Hidden until a keyboard user tabs to it */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--red);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--cream);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ===== 4. Animations ===== */

@keyframes crawl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes rise {
  0%   { transform: translateY(0) scale(.8); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-240px) scale(1.2); opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

@keyframes blink {
  50% { opacity: .25; }
}

@keyframes trail {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes roll {
  from { left: 0; transform: rotate(0deg); }
  to   { left: calc(100% - 22px); transform: rotate(1800deg); }
}

.crawl {
  animation: crawl 40s linear infinite;
}

/* Pause the ticker while someone is reading it */
.crawl:hover {
  animation-play-state: paused;
}

.rise,
.rise2,
.rise3,
.spin,
.spinslow {
  transform-box: fill-box;
  transform-origin: center;
}

.rise     { animation: rise 7s ease-in infinite; }
.rise2    { animation: rise 9s ease-in 2s infinite; }
.rise3    { animation: rise 8s ease-in 4s infinite; }
.spin     { animation: spin 14s linear infinite; }
.spinslow { animation: spin 30s linear infinite; }
.bob      { animation: bob 6s ease-in-out infinite; }
.blink    { animation: blink 1.6s steps(2) infinite; }

@media (prefers-reduced-motion: reduce) {
  .crawl,
  .rise,
  .rise2,
  .rise3,
  .spin,
  .spinslow,
  .bob,
  .blink {
    animation: none;
  }
}


/* ===== 5. Shared pieces ===== */

/* Centred content column */
.container {
  position: relative;
  max-width: var(--column);
  margin: 0 auto;
}

.container--narrow {
  max-width: 1240px;
}

/* Decorative SVG artwork that fills the section behind the content */
.bg-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ink splats, drawn by ink.js. Each one sits wholly inside its section,
   and may only run off the left or right edge of the screen. */
.ink {
  position: absolute;
  aspect-ratio: 1;
  height: auto;
  color: var(--ink);
  pointer-events: none;
}

.ink path {
  fill: currentColor;
}

/* Watered-down bloom under some splats */
.ink__wash {
  opacity: 0.16;
}

.ink--red {
  color: var(--red);
}

.ink--orange {
  color: var(--orange);
}

/* Where each splat sits */
.fm__ink {
  right: -9%;
  bottom: 0;
  width: clamp(240px, 34vw, 540px);
}

.hero__ink--black {
  top: 0;
  right: -26%;
  width: clamp(300px, 62vw, 960px);
}

.tobacco__ink {
  top: -14%;
  right: -12%;
  width: 44%;
}

.family__ink {
  left: -6%;
  bottom: 0;
  width: clamp(130px, 15vw, 230px);
}

.contact__ink {
  top: 0;
  right: 2%;
  width: clamp(160px, 20vw, 320px);
}

/* Small flecks */
.work__fleck {
  top: clamp(40px, 6vw, 90px);
  right: 22%;
  width: clamp(90px, 9vw, 140px);
}

.more-work__ink {
  left: 1%;
  bottom: 28%;
  width: clamp(110px, 12vw, 190px);
}

.notes__ink {
  bottom: 24px;
  left: 1%;
  width: clamp(100px, 10vw, 160px);
}

/* Seams: these splats straddle the line between two sections, like paint
   sprayed across a wall regardless of what's on it. They sit above both
   sections' backgrounds, so they're placed clear of headings and text. */
.ink--seam {
  z-index: 4;
}

.hero__seam {
  left: 4%;
  bottom: 0;
  width: clamp(200px, 28vw, 440px);
  transform: translateY(55%);
}

.work__seam {
  right: -14%;
  bottom: 0;
  width: clamp(240px, 38vw, 620px);
  transform: translateY(50%);
}

.more-work__seam-top {
  top: 0;
  left: 44%;
  width: clamp(140px, 16vw, 260px);
  transform: translateY(-50%);
}

.more-work__seam-bottom {
  right: -22%;
  bottom: 0;
  width: clamp(280px, 44vw, 720px);
  transform: translateY(62%);
}

.about__seam-top {
  top: 0;
  right: 4%;
  width: clamp(160px, 18vw, 280px);
  transform: translateY(-50%);
}

.about__seam-bottom {
  left: -9%;
  bottom: 0;
  width: clamp(240px, 34vw, 560px);
  transform: translateY(50%);
}

.ft__ink {
  left: -6%;
  top: 50%;
  width: clamp(240px, 36vw, 560px);
  transform: translateY(-38%);
}

/* Once the hero stacks, the black splat moves down behind the mascot, off the title */
@media (max-width: 900px) {
  .hero__ink--black {
    top: auto;
    bottom: 60px;
    right: -10%;
    width: clamp(240px, 48vw, 380px);
  }
}

/* Phones: smaller splats, kept off the headings */
@media (max-width: 600px) {
  .ft__ink {
    top: -40px;
    left: -16%;
    width: 220px;
    transform: none;
  }
}

/* The hidden SVG that holds shared filters, gradients and shapes */
.svg-defs {
  position: absolute;
}

/* Ink drips hanging off the bottom of a section */
.edge-drips {
  display: block;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 70px;
  margin-top: -2px;
}

/* Torn paper edge along the top of a section */
.edge-torn {
  display: block;
  width: 100%;
  height: 40px;
}

/* Small red label above a section title */
.kicker {
  margin: 0;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
}

.kicker--ink {
  color: var(--ink);
}

/* Big hand-lettered section titles */
.section-title {
  margin: 4px 0 0;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 96px);
  line-height: 1.15;
  transform: rotate(-2deg);
}

.section-title--work {
  text-shadow: 4px 4px 0 var(--peach);
}

.section-title--about {
  margin: 4px 0 24px;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 1.2;
  text-shadow: 4px 4px 0 var(--cream);
}

.section-intro {
  margin: 36px 0 0;
  max-width: 560px;
  font-size: 18px;
}

.section-intro--notes {
  margin-top: 30px;
  max-width: 600px;
}

/* Chunky buttons with a hard offset shadow */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 28px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 15px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover {
  transform: translate(-2px, -2px) rotate(0deg) !important;
}

.btn--ink {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 7px 7px 0 var(--red);
}

.btn--paper {
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
}

.btn--cream {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--orange);
}

/* Tilted cards lift and straighten on hover */
.card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
  transform: rotate(0deg) translateY(-8px) !important;
  box-shadow: 16px 16px 0 var(--ink) !important;
}

/* Strips of masking tape stuck to photos and cards */
.tape {
  position: absolute;
}

/* "Dispatch #00X" tags on the work showcases */
.dispatch-tag {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  background: var(--red);
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.dispatch-tag--orange {
  background: var(--orange);
  color: var(--ink);
}

.dispatch-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(42px, 4.8vw, 70px);
  line-height: 0.95;
  letter-spacing: -1px;
}


/* ===== 6. Utility strip ===== */

.util-strip {
  position: relative;
  z-index: 6;
  padding: 7px var(--gutter);
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.util-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px 24px;
  max-width: var(--column);
  margin: 0 auto;
}

.util-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.util-status__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 89, 42, 0.3);
}

@media (max-width: 760px) {
  .util-left {
    display: none;
  }
}


/* ===== 7. Sticky header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 5px 0 rgba(23, 19, 15, 0.14);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: var(--column);
  margin: 0 auto;
  padding: 8px var(--gutter);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 4px clamp(4px, 1vw, 14px);
}

/* Nameplate */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.logo__mark {
  flex: none;
  width: clamp(50px, 5vw, 64px);
  height: auto;
  overflow: visible;
}

.logo__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.np-name {
  font-family: var(--font-hand);
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.35;
  white-space: nowrap;
}

.np-sub {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey-dark);
  white-space: nowrap;
}

/* The splat turns around the centre of the mark, not its own lopsided middle */
.logo-splat,
.logo-splat__spin {
  transform-box: view-box;
  transform-origin: 0 0;
}

.logo-splat {
  transition: transform .45s cubic-bezier(.3, 1.7, .5, 1);
}

.logo-fist {
  transform-box: view-box;
  transform-origin: 0 20px;
  transition: transform .3s cubic-bezier(.3, 1.7, .5, 1);
}

/* Hover: the splat blows out and the fist punches up */
.logo:hover .logo-splat {
  transform: scale(1.25) rotate(35deg);
}

.logo:hover .logo-fist {
  transform: translateY(-4px) scale(1.08);
}

/* On the dark menu header the splat turns orange so it still shows */
body.menu-open .logo__ink {
  color: var(--orange);
}

/* Menu button: three inky lines that become an X */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-left: 6px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  font-family: 'Special Elite', monospace;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(1.5deg);
  transition: transform .15s ease, box-shadow .15s ease;
}

.menu-btn:hover,
.menu-btn:focus-visible {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--red);
}

.menu-btn__icon {
  flex: none;
  width: 26px;
  height: 20px;
}

.mb1,
.mb2,
.mb3 {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease, stroke .2s ease;
}

.menu-btn:hover .mb1 { transform: translateX(-3px); }
.menu-btn:hover .mb2 { transform: translateX(5px); }
.menu-btn:hover .mb3 { transform: translateX(-1px); }

/* Scroll progress: a red rule that fills in, with a golf ball rolling along it */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  pointer-events: none;
}

.trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
}

.ball {
  position: absolute;
  top: -9px;
  left: 0;
  width: 22px;
  height: 22px;
}

.ball__svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* Only browsers with scroll-driven animations show the progress */
@supports (animation-timeline: scroll()) {
  .trail {
    animation: trail linear both;
    animation-timeline: scroll(root);
  }

  .ball {
    animation: roll linear both;
    animation-timeline: scroll(root);
  }
}

@media (max-width: 520px) {
  .np-sub {
    display: none;
  }

  .np-name {
    font-size: 16px;
  }

  .menu-btn {
    margin-left: 0;
    padding: 0 12px;
  }
}

/* While the menu is open, the header has no paper of its own: the logo and
   Close button sit straight on the menu, so the two read as one surface */
.site-header .logo,
.site-header .np-sub {
  transition: color .15s ease;
}

.site-header .trail,
.site-header .ball {
  transition: opacity .25s ease;
}

body.menu-open .site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.site-header > .bg-art {
  transition: opacity .15s ease;
}

body.menu-open .site-header > .bg-art {
  opacity: 0;
}

body.menu-open .site-header .logo {
  color: var(--cream);
}

body.menu-open .site-header .np-sub {
  color: var(--grey-light);
}

body.menu-open .site-header .trail,
body.menu-open .site-header .ball {
  opacity: 0;
}

body.menu-open .menu-btn {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
  box-shadow: 4px 4px 0 var(--orange);
  transform: rotate(-1.5deg);
}

body.menu-open .menu-btn:hover,
body.menu-open .menu-btn:focus-visible {
  box-shadow: 7px 7px 0 var(--orange);
}

body.menu-open .menu-btn .mb1,
body.menu-open .menu-btn:hover .mb1 {
  stroke: var(--ink);
  transform: translateY(8px) rotate(45deg);
}

body.menu-open .menu-btn .mb3,
body.menu-open .menu-btn:hover .mb3 {
  stroke: var(--ink);
  transform: translateY(-8px) rotate(-45deg);
}

body.menu-open .menu-btn .mb2,
body.menu-open .menu-btn:hover .mb2 {
  opacity: 0;
  transform: scaleX(0);
}


/* ===== 8. Field menu ===== */

.fm {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: var(--hdr, 96px);   /* set by main.js to the header's height */
  background: var(--ink);
  color: var(--cream);
  overflow-y: auto;
  scrollbar-width: none;           /* scrolls only on very short screens, without a second scrollbar */
}

.fm[hidden] {
  display: none !important;
}

.fm::-webkit-scrollbar {
  display: none;
}

.fm__nav {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 1.5vh, 16px);
  padding: clamp(24px, 5vh, 56px) clamp(16px, 6vw, 96px);
}

/* The four big menu links */
.big {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(12px, 2vw, 28px);
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  color: var(--cream);
  text-decoration: none;
  transition: color .2s ease, transform .25s ease;
}

.big:hover,
.big:focus-visible {
  color: var(--orange);
  transform: translateX(18px) rotate(-1.5deg);
}

.big-num {
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 3px;
  color: var(--orange);
}

.big-word {
  font-family: var(--font-hand);
  font-size: clamp(48px, min(8.5vw, 10.5vh), 116px);
  line-height: 1.3;
  text-shadow: 6px 6px 0 var(--red);
}

.big-desc {
  grid-column: 2;
  margin-top: 6px;
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey-light);
}

.fm__footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px var(--gutter) 24px;
  border-top: 2px solid var(--grey-dark);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey-light);
}

.fm__email {
  color: var(--white);
}

/* Rorschach plate, drawn by rorschach.js; hidden on narrower screens */
.plate {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 6vw, 110px);
  top: calc(var(--hdr, 96px) + (100% - var(--hdr, 96px) - 64px) / 2);
  width: min(40vw, 620px);
  margin: 0;
  transform: translateY(-50%) rotate(2.5deg);
  pointer-events: none;
}

.plate-card {
  position: relative;
  padding: clamp(14px, 1.8vw, 26px) clamp(14px, 1.8vw, 26px) clamp(16px, 2vw, 28px);
  background:
    radial-gradient(ellipse 40% 30% at 85% 12%, rgba(120, 84, 40, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 8% 92%, rgba(110, 70, 30, 0.14), transparent 70%),
    radial-gradient(ellipse at center, transparent 55%, rgba(60, 40, 20, 0.22) 100%),
    #EDE5D3;
  box-shadow: 14px 14px 0 var(--red), 0 40px 80px rgba(0, 0, 0, 0.55);
}

/* Tape holding the plate to the wall */
.plate-card::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 46%;
  width: 110px;
  height: 30px;
  background: rgba(240, 89, 42, 0.7);
  transform: rotate(-4deg);
}

.plate-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
}

#plate-no {
  color: var(--red);
}

#plate-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.plate figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink);
  color: var(--ink);
}

.plate-q {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

@media (max-width: 1099px) {
  .plate {
    display: none;
  }
}

/* Bats that swarm out of the menu button (created by main.js) */
#bat-swarm {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

/* The bat that flies into the camera: a screen-sized SVG redrawn every frame */
.camera-bat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sbat {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  will-change: transform;
}

/* Each bat stacks four wing poses; only one shows at a time, so it flaps.
   --flap (set per bat by main.js) is one full wingbeat. */
.sbat__pose {
  visibility: hidden;
  animation: wingbeat var(--flap, .14s) steps(1) infinite;
}

.sbat__pose--1 { animation-delay: calc(var(--flap, .14s) * -.75); }
.sbat__pose--2 { animation-delay: calc(var(--flap, .14s) * -.5); }
.sbat__pose--3 { animation-delay: calc(var(--flap, .14s) * -.25); }

@keyframes wingbeat {
  0%   { visibility: visible; }
  25%  { visibility: hidden; }
  100% { visibility: hidden; }
}

/* Thin, slightly see-through membrane; solid bones and body */
.bat__wing {
  fill: currentColor;
  fill-opacity: 0.88;
}

.bat__bone {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.bat__body {
  fill: currentColor;
}


/* ===== 9. Hero ===== */

.hero {
  position: relative;
  padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(90px, 9vw, 140px);
  background: var(--peach);
}

.hero__inner {
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}

.hero__copy {
  flex: 1 1 560px;
  min-width: 0;
}

.hero__kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  background: var(--ink);
  color: var(--cream);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--red);
}

.hero__title {
  margin: 0;
  line-height: 0.9;
}

.hero__title-line {
  display: block;
  margin-left: -4px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(52px, 8.5vw, 132px);
  line-height: 1.08;
  letter-spacing: -2px;
  transform: rotate(-4deg);
  text-shadow: 5px 5px 0 var(--cream);
}

.hero__title-line--red {
  margin: 4px 0 0 clamp(16px, 6vw, 90px);
  color: var(--red);
  transform: rotate(-2deg);
  text-shadow: 5px 5px 0 var(--ink);
}

.hero__underline {
  display: block;
  width: min(560px, 90%);
  margin: 6px 0 0 30px;
}

.hero__lead {
  max-width: 660px;
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
}

.hero__text {
  max-width: 580px;
  margin: 16px 0 0;
  font-size: 18px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 32px;
}

.hero__btn {
  padding: 0 30px;
  font-size: 16px;
}

.hero__btn--work  { transform: rotate(-1deg); }
.hero__btn--hello { transform: rotate(1deg); }

/* Mascot illustration, spinning badge and caption */
.hero__mascot {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
}

.hero__mascot-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__badge {
  position: absolute;
  left: -10px;
  bottom: 30px;
  width: clamp(110px, 12vw, 160px);
  height: auto;
}

.hero__caption {
  position: absolute;
  right: 0;
  bottom: -6px;
  margin: 0;
  padding: 4px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-hand);
  font-size: 14px;
  transform: rotate(-5deg);
}


/* ===== 10. Ticker ===== */

.ticker {
  position: relative;
  z-index: 2;
  margin: 14px -20px 0;
  padding: 14px 0;
  overflow: hidden;
  background: var(--orange);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}

.ticker__track {
  display: inline-block;
}

.ticker__item {
  padding-right: 40px;
}


/* ===== 11. Work: Dispatch #001 Tobacco Road ===== */

.work {
  position: relative;
  padding: clamp(72px, 8vw, 120px) var(--gutter) clamp(64px, 7vw, 100px);
}

.tobacco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 64px;
  margin-top: clamp(56px, 6vw, 88px);
}

.tobacco__collage {
  position: relative;
  flex: 1 1 640px;
  min-width: 0;
  padding: 0 0 clamp(60px, 8vw, 110px);
}

/* Orange wash and black splat behind the photos */
.tobacco__splash {
  position: absolute;
  left: -6%;
  top: -8%;
  width: 112%;
  height: 116%;
}

.tobacco__photo {
  position: relative;
  margin: 0;
  padding: 14px 14px 58px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  transform: rotate(-2deg);
}

.tobacco__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--ink);
}

.tobacco__caption {
  margin: 14px 4px 0;
  font-family: var(--font-hand);
  font-size: 16px;
  transform: rotate(-1deg);
}

.tobacco__photo-small {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: 46%;
  margin: 0;
  padding: 10px 10px 34px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--red);
}

.tobacco__img-small {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 2px solid var(--ink);
}

.tobacco__caption-small {
  margin: 8px 2px 0;
  font-family: var(--font-hand);
  font-size: 12px;
}

.tobacco__tape {
  top: -18px;
  left: 36%;
  width: 150px;
  height: 36px;
  background: rgba(43, 176, 214, 0.65);
  transform: rotate(-5deg);
}

.tobacco__stamp {
  position: absolute;
  right: 4%;
  top: 22px;
  margin: 0;
  padding: 8px 18px;
  border: 4px double var(--red);
  background: rgba(251, 248, 242, 0.92);
  color: var(--red);
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing: 5px;
  text-transform: uppercase;
  transform: rotate(12deg);
}

.tobacco__arrow {
  position: absolute;
  left: 2%;
  bottom: 0;
  width: clamp(90px, 10vw, 140px);
  height: auto;
}

.tobacco__copy {
  flex: 1 1 380px;
  min-width: 0;
}

.tobacco__title {
  margin: 16px 0 18px;
}

.tobacco__text {
  margin: 0 0 16px;
  font-size: 18px;
}

.tobacco__aside {
  margin: 0 0 26px;
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--red);
  transform: rotate(-1.5deg);
}

/* Project details box */
.details {
  padding: 16px 20px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--red);
  font-size: 15px;
}

.details__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.details__body {
  margin: 0;
}

.tobacco__btn {
  margin-top: 26px;
}


/* ===== 12. Dispatch #002 The Family Central ===== */

.family {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}

.edge-torn--family {
  margin-top: -1px;
}

.family__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 56px 64px;
  max-width: var(--column);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(72px, 8vw, 120px);
}

.family__copy {
  flex: 1 1 440px;
  min-width: 0;
}

.family__title {
  margin: 16px 0 6px;
}

.family__motto {
  margin: 0 0 22px;
  font-family: var(--font-hand);
  font-size: 16px;
  color: var(--orange);
  transform: rotate(-2deg);
}

.family__text {
  max-width: 560px;
  margin: 0 0 16px;
  font-size: 18px;
}

.family__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.family__media {
  position: relative;
  flex: 1 1 540px;
  min-width: 0;
}

.family__photo {
  position: relative;
  margin: 0;
  padding: 14px 14px 54px;
  background: var(--paper);
  border: 3px solid var(--cream);
  box-shadow: 14px 14px 0 var(--orange);
  transform: rotate(2.5deg);
}

.family__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 40% 50%;
  border: 2px solid var(--ink);
}

.family__caption {
  margin: 12px 4px 0;
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--ink);
}

.family__tape {
  top: -16px;
  left: 28%;
  width: 140px;
  height: 34px;
  background: rgba(240, 89, 42, 0.75);
  transform: rotate(-4deg);
}

.family__stamp {
  position: absolute;
  right: -14px;
  bottom: 14px;
  margin: 0;
  padding: 6px 14px;
  border: 3px solid var(--cream);
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  transform: rotate(-9deg);
}


/* ===== 13. Dispatches #003 and #004 ===== */

.more-work {
  position: relative;
  padding: clamp(56px, 6vw, 88px) var(--gutter) clamp(64px, 7vw, 100px);
}

.more-work__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 72px 64px;
  max-width: 1240px;
  margin: 0 auto;
}

.dispatch-card {
  position: relative;
  padding: 16px 16px 30px;
  background: var(--paper);
  border: 3px solid var(--ink);
}

.dispatch-card--powerscourt {
  box-shadow: 12px 12px 0 var(--cyan);
  transform: rotate(-1.6deg);
}

.dispatch-card--blasi {
  margin-top: 40px;
  box-shadow: 12px 12px 0 var(--orange);
  transform: rotate(1.8deg);
}

.dispatch-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border: 2px solid var(--ink);
}

.dispatch-card--blasi .dispatch-card__img {
  object-position: 50% 50%;
  background: #F8F6F0;   /* matches the Blasi site's own background */
}

.dispatch-card__tag {
  margin: 22px 0 6px;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
}

.dispatch-card__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1;
}

.dispatch-card__text {
  margin: 0 0 18px;
  font-size: 16px;
}

.dispatch-card__link {
  display: inline-block;
  padding: 8px 0;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dispatch-card--powerscourt .dispatch-card__tape {
  top: -18px;
  right: 34px;
  width: 110px;
  height: 32px;
  background: rgba(111, 175, 134, 0.75);
  transform: rotate(6deg);
}

.dispatch-card--blasi .dispatch-card__tape {
  top: -18px;
  left: 34px;
  width: 120px;
  height: 32px;
  background: rgba(243, 107, 154, 0.7);
  transform: rotate(-5deg);
}


/* ===== 14. Field Notes ===== */

/* Lined notebook paper with a red margin line */
.notes {
  position: relative;
  padding: clamp(64px, 7vw, 104px) var(--gutter) clamp(80px, 8vw, 120px);
  background: var(--paper) repeating-linear-gradient(180deg, transparent 0 33px, rgba(43, 176, 214, 0.28) 33px 34px);
  border-top: 3px solid var(--ink);
}

.notes__margin-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(28px, 6vw, 96px);
  width: 2px;
  background: rgba(196, 22, 28, 0.45);
}

.notes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: 56px 44px;
  margin-top: 56px;
}

.note {
  position: relative;
  border: 3px solid var(--ink);
}

.note--opinion {
  padding: 26px 24px 24px;
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(-1.5deg);
}

.note--photo {
  margin: 24px 0 0;
  padding: 14px 14px 20px;
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--orange);
  transform: rotate(2.5deg);
}

.note--workbench {
  padding: 26px 24px 24px;
  background: var(--yellow);
  box-shadow: 10px 10px 0 var(--cyan);
  transform: rotate(-2.5deg);
}

.note--opinion .note__tape {
  top: -16px;
  left: 40%;
  width: 100px;
  height: 30px;
  background: rgba(43, 176, 214, 0.6);
  transform: rotate(-4deg);
}

.note--photo .note__tape {
  top: -16px;
  right: 30px;
  width: 90px;
  height: 30px;
  background: rgba(240, 89, 42, 0.6);
  transform: rotate(6deg);
}

/* Red pushpin on the workbench note */
.note__pin {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--ink);
  transform: translateX(-50%);
}

.note__stamp {
  display: inline-block;
  margin: 0;
  padding: 2px 10px;
  border: 3px double var(--red);
  color: var(--red);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.note__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.note__title {
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
}

.note__title--hand {
  margin: 12px 0 10px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
}

.note__text {
  margin: 0 0 18px;
  font-size: 16px;
}

.note__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.note__link {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.note__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 60% 20%;
  border: 2px solid var(--ink);
}

.note__caption {
  margin: 14px 4px 0;
  font-family: var(--font-hand);
  font-size: 16px;
  transform: rotate(-1deg);
}


/* ===== 15. About me ===== */

.about {
  position: relative;
  background: var(--peach);
}

.edge-torn--about {
  position: relative;
  z-index: 1;
}

.about__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 64px;
  max-width: var(--column);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) var(--gutter) clamp(72px, 8vw, 120px);
}

/* Press credential with the portrait */
.press {
  position: relative;
  flex: 0 1 380px;
  min-width: 0;
  margin: 0 auto;
  transform: rotate(-4deg);
}

.press__card {
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
}

.press__band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--red);
  color: var(--cream);
  border-bottom: 4px solid var(--ink);
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.press__body {
  padding: 20px 18px 18px;
}

.press__photo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  object-fit: cover;
  object-position: 50% 20%;
  border: 3px solid var(--ink);
}

.press__name {
  margin: 16px 0 0;
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1.3;
}

.press__role {
  margin: 2px 0 0;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.press__note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 2px dashed var(--ink);
  font-size: 13px;
  color: var(--grey-dark);
}

/* The black clip hole at the top of the credential */
.press__clip {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--cream);
  transform: translateX(-50%);
}

/* Bio column */
.about__bio {
  flex: 1 1 540px;
  min-width: 0;
}

.about__lead {
  margin: 0 0 18px;
  font-size: 20px;
}

.about__text {
  margin: 0 0 28px;
  font-size: 18px;
}

.happy {
  margin-bottom: 40px;
  padding: 18px 20px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--red);
  transform: rotate(0.6deg);
}

.happy__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.happy__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
  font-size: 17px;
}

.day-job__title {
  margin: 0 0 14px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 18px;
  transform: rotate(-1.5deg);
}

.day-job {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.stat {
  padding: 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}

.stat--clients { transform: rotate(-1deg); }
.stat--started { transform: rotate(1deg); }

.stat--skills {
  grid-column: 1 / -1;
  transform: rotate(-0.5deg);
}

.stat__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.stat__label--skills {
  margin-bottom: 12px;
  font-weight: 400;
}

.stat__value {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 60px;
  line-height: 1;
  color: var(--red);
}

/* Skill chips */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill {
  padding: 6px 16px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 19px;
}

.skill--html      { transform: rotate(-2deg); }
.skill--css       { transform: rotate(1.5deg); background: var(--ink); color: var(--cream); box-shadow: 3px 3px 0 var(--orange); }
.skill--js        { transform: rotate(-1deg); background: var(--orange); }
.skill--php       { transform: rotate(2deg); background: var(--red); color: var(--cream); }
.skill--gsap      { transform: rotate(-2.5deg); background: var(--green); }
.skill--webgl     { transform: rotate(1deg); background: var(--cyan); }
.skill--wordpress { transform: rotate(-1.5deg); background: var(--paper); }
.skill--static    { transform: rotate(-1deg); background: var(--paper); }


/* ===== 16. Contact: the telegram ===== */

.contact {
  position: relative;
  padding: clamp(72px, 9vw, 130px) var(--gutter);
}

.telegram {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px);
  background: var(--telegram);
  border: 3px solid var(--ink);
  box-shadow: 16px 16px 0 var(--ink);
  transform: rotate(-1deg);
}

.telegram__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  padding-bottom: 14px;
  border-bottom: 4px double var(--ink);
}

.telegram__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 68px);
  letter-spacing: 8px;
  text-transform: uppercase;
}

.telegram__sub {
  margin: 0;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.telegram__text {
  margin: 14px 0 0;
  font-size: 19px;
}

.telegram__text--first {
  margin-top: 22px;
}

/* The email address as a big button */
.telegram__email {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 30px;
  padding: 14px 26px;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 8px 8px 0 var(--red);
  font-family: var(--font-hand);
  font-size: clamp(18px, 2.6vw, 32px);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
  transform: rotate(-1.5deg);
}

.telegram__sign-off {
  margin: 26px 0 0;
  font-family: var(--font-hand);
  font-size: 15px;
  transform: rotate(-2deg);
}

.telegram__stamp {
  position: absolute;
  right: clamp(12px, 3vw, 36px);
  bottom: clamp(16px, 3vw, 36px);
  padding: 6px 14px;
  border: 4px double var(--red);
  background: rgba(251, 248, 242, 0.6);
  color: var(--red);
  font-size: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  transform: rotate(-12deg);
}


/* ===== 17. Footer ===== */

.ft {
  position: relative;
  margin-top: 38px;
  padding: clamp(56px, 7vw, 96px) var(--gutter) 28px;
  background: var(--ink);
  color: var(--cream);
}

/* Torn edge sticking up out of the top of the footer */
.ft__edge {
  position: absolute;
  left: 0;
  top: -38px;
  z-index: 1;
  width: 100%;
  height: 40px;
}

.ft-inner {
  position: relative;
  z-index: 2;
  max-width: var(--column);
  margin: 0 auto;
}

.ft-sign {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 40px;
}

.ft-fore {
  margin: 0;
  font-family: var(--font-hand);
  font-size: clamp(72px, 15vw, 230px);
  line-height: 1.1;
  color: var(--orange);
  text-shadow: 7px 7px 0 var(--red), 14px 14px 0 rgba(0, 0, 0, .45);
  white-space: nowrap;
  transform: rotate(-4deg);
}

.ft-under {
  max-width: 22ch;
  margin: 0 0 clamp(16px, 3vw, 44px);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.6;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey-light);
}

/* "-30-": old newsroom shorthand for the end of a story */
.ft-thirty {
  position: absolute;
  right: 0;
  top: clamp(0px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 22px 12px;
  border: 4px double var(--cream);
  background: rgba(23, 19, 15, .6);
  color: var(--cream);
  transform: rotate(9deg);
}

.ft-thirty span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1;
}

.ft-thirty small {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Three columns: index, email, colophon */
.ft-cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 72px);
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: 28px;
  border-top: 3px solid var(--cream);
}

/* Thin second rule under the thick one */
.ft-cols::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  border-top: 1px solid var(--grey-dark);
}

.ft-label {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--orange);
}

.ft-index {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.35;
  transition: color .2s ease, transform .25s ease;
}

.ft-index a span {
  font-family: 'Special Elite', monospace;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--grey);
}

.ft-index a:hover,
.ft-index a:focus-visible {
  color: var(--orange);
  transform: translateX(10px) rotate(-1.5deg);
}

.ft-text {
  max-width: 36ch;
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey-light);
}

.ft-mail {
  display: inline-block;
  padding: 6px 14px;
  background: var(--red);
  color: var(--cream);
  box-shadow: 5px 5px 0 var(--cream);
  font-family: var(--font-hand);
  font-size: clamp(15px, 1.4vw, 19px);
  text-decoration: none;
  overflow-wrap: anywhere;
  transform: rotate(-2deg);
  transition: transform .15s ease;
}

.ft-mail:hover,
.ft-mail:focus-visible {
  color: var(--cream);
  transform: translate(-2px, -2px) rotate(0);
}

/* "Back to the first tee": the golf ball hops on hover */
.ft-tee {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ft-tee svg {
  width: 26px;
  height: 40px;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}

.ft-tee:hover {
  color: var(--orange);
}

.ft-tee:hover svg {
  transform: translateY(-8px) rotate(-20deg);
}

.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 18px;
  border-top: 2px solid var(--grey-dark);
  font-size: 14px;
}

.ft-bottom p {
  margin: 0;
}

.ft-dim {
  color: var(--grey-light);
}

.ft-bat {
  transform-box: fill-box;
  transform-origin: center;
}

@media (max-width: 900px) {
  .ft-cols {
    grid-template-columns: 1fr 1fr;
  }

  .ft-thirty {
    position: static;
    margin-bottom: 12px;
    transform: rotate(6deg);
  }
}

@media (max-width: 600px) {
  .ft-cols {
    grid-template-columns: 1fr;
  }

  .ft-under {
    max-width: none;
  }
}

/* Paper grain laid over the whole page */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
}


/* ===== 18. Custom scrollbars ===== */

/* Chrome and Edge drop the ::-webkit-scrollbar styles whenever scrollbar-color is set,
   so the standard property is only used by browsers without them (Firefox) */
html {
  scrollbar-gutter: stable;
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--red) var(--sand);
  }

  html:has(body.menu-open) {
    scrollbar-color: var(--orange) var(--ink);
  }
}

html:has(body.menu-open) {
  background: var(--ink);
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

/* Track: a strip of field-notebook paper ruled like a yardage book */
::-webkit-scrollbar-track {
  border-radius: 0;
  border-left: 2px solid var(--ink);
  background:
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(23, 19, 15, 0.35) 23px 24px),
    repeating-linear-gradient(180deg, transparent 0 119px, var(--ink) 119px 121px),
    var(--sand);
}

/* Thumb: a slab of red ink, hatched like a Steadman shadow, with hard black edges */
::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: 2px solid var(--ink);
  border-left-width: 3px;
  background:
    repeating-linear-gradient(-45deg, rgba(23, 19, 15, 0.55) 0 2px, transparent 2px 6px),
    var(--red);
  box-shadow: inset 0 3px 0 rgba(242, 237, 227, 0.35);
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: var(--red);
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  background: var(--ink);
}

body.menu-open ::-webkit-scrollbar-track {
  border-left-color: var(--grey-dark);
  background:
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(242, 237, 227, 0.12) 23px 24px),
    var(--ink);
}

body.menu-open ::-webkit-scrollbar-thumb {
  border-color: var(--ink);
  background:
    repeating-linear-gradient(-45deg, rgba(23, 19, 15, 0.55) 0 2px, transparent 2px 6px),
    var(--orange);
}