/* feesmedia.com, rebuilt Oct 2026. One stylesheet, no framework. DESIGN.md has the why.
   The page is a stage with the house lights down: show black, white type, and amber only where something is lit
   (the last piece of tape, a map you're pointing at, the keyboard focus ring). */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/assets/fonts/nunito-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("/assets/fonts/nunito-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/permanent-marker-latin.woff2") format("woff2"); }

:root {
  --black: #000000;        /* show black: the ground */
  --white: #FFFFFF;
  --smoke: #9EA5B0;        /* secondary text on black */
  --line: #262626;         /* hairlines on black */
  --panel: #111111;        /* image placeholders while they load */
  --navy: #26344F;         /* his brand navy: type on the light sections */
  --paper: #F4F5F7;        /* light sections */
  --muted-ink: #5A6478;    /* secondary text on light */
  --rule: #D9DEE6;         /* hairlines on light */
  --land: #E4E8EF;         /* map land and water on the light cards */
  --amber: #F2A541;        /* tungsten: only things that are lit */
  --tape: #ECEAE3;         /* console tape */
  --display: "Montserrat", "Arial Black", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Permanent Marker", "Comic Sans MS", cursive;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;  /* the camera readouts only; system fonts, nothing to load */
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.wrap {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--white); color: var(--black); padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  /* clear of the iPhone notch and side insets (the page uses viewport-fit=cover) */
  padding: calc(16px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 16px max(var(--gutter), env(safe-area-inset-left, 0px));
  transition: background .3s ease, padding .3s ease;
}
.bar.solid { background: rgba(0, 0, 0, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
.logo {
  font: 800 1.05rem/1 var(--display); color: var(--black); background: var(--white); text-decoration: none;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; letter-spacing: -0.04em;
}
.bar nav { display: flex; gap: clamp(16px, 3vw, 34px); align-items: center; }
.bar nav a { text-decoration: none; font: 600 .92rem/1 var(--display); padding-block: 6px; border-bottom: 2px solid transparent; transition: border-color .2s; }
/* the underline means "you are here" (or the pointer is on it); Contact used to wear it all the time and read as a glitch */
.bar nav a:hover, .bar nav a[aria-current="page"] { border-bottom-color: currentColor; }
@media (max-width: 560px) { .bar nav a:not(.bar-cta):not(.bar-about):not(.bar-work):not(.bar-play) { display: none; } }  /* phones keep all four since Play has its own page (20 Oct) */

/* ---------- hero: the reel ---------- */
.hero { position: relative; height: 92svh; min-height: 560px; max-height: 980px; display: grid; align-items: end; }
.hero-frame {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--panel) url("/assets/video/hero-poster.webp") center / cover no-repeat;
  /* --p: 0 at the top of the page, 1 once the hero has scrolled away. It tucks into a rounded card as you leave. */
  transform: scale(calc(1 - var(--p, 0) * .08)); border-radius: calc(var(--p, 0) * 36px);
  transform-origin: 50% 0; will-change: transform;
  /* the bottom of the reel melts into the black, so there's no hard edge on the way into the intro */
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
}
@media (max-width: 700px) {
  .hero-frame { background-image: url("/assets/video/hero-poster-800.webp"); }
  /* phones: the reel runs most of the screen before it fades (his ask, 19 Oct) */
  .hero { height: 100svh; }
  .hero-frame { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
}
.hero-video { width: 100%; height: 100%; object-fit: cover; }  /* never hidden: iPhones won't autoplay an invisible video */
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.6) 100%); opacity: calc(1 + var(--p, 0)); }
.hero-copy { position: relative; padding-bottom: clamp(56px, 11vh, 120px); transform: translateY(calc(var(--p, 0) * -60px)); opacity: calc(1 - var(--p, 0) * 1.4); }
.hero h1 { font-size: clamp(3.6rem, 12vw, 10rem); letter-spacing: -0.045em; line-height: .9; }

/* ---------- intro ---------- */
.intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(110px, 17vh, 190px) clamp(48px, 8vh, 100px); }
.intro-copy { min-width: 0; }
.intro-copy h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); text-wrap: balance; }  /* a size down for his longer line (copy deck V7, 20 Oct) */
.intro-copy p { margin-top: 22px; max-width: 56ch; color: #D5D9E0; font-size: 1.14rem; }
.intro-copy h2 + p, .intro-read p:first-child { margin-top: 26px; }
/* the intro lights up as you read (his note, 21 Oct: on a phone it was a lot of words in one go), the same way as the
   story on About: every word dim until the reading line passes it (--p on the block, --i and --k from main.js) */
.intro-read.lit .w { opacity: calc(.2 + .8 * clamp(0, (var(--p, 0) - var(--i, 0)) * var(--k, 14), 1)); transition: opacity .2s linear; }
/* social icons: in the footer on every page (his call, 20 Oct: in the intro they invited people off the page early) */
.socials { list-style: none; margin: 0 -10px 0 0; padding: 0; display: flex; gap: 4px; }
.socials a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--white); transition: transform .2s ease, background-color .2s; }
.socials a:hover { transform: translateY(-2px); background: #1A1A1A; }
.socials svg { width: 24px; height: 24px; fill: currentColor; }
@media (max-width: 800px) { .intro { grid-template-columns: 1fr; padding-bottom: 36px; } }

/* The pass hangs from the top of the intro, out of the hero's fade; the intro clips it while it waits up there. */
.intro { overflow-y: clip; }
.intro .rig { --strap: clamp(90px, 15vh, 170px); align-self: start; justify-self: center; margin-top: calc(-1 * clamp(110px, 17vh, 190px)); }
@media (max-width: 800px) { .intro .rig { --pw: min(50vw, 210px); --strap: 64px; } }

/* ---------- the all-access pass (homepage intro and About; his ask, 20 Oct) ---------- */
/* .rig drops in once (CSS); .swing is the pendulum (--a, from about.js), hung from the top centre; .pass twists in 3D
   (--rx, --ry) and catches the light (--sheen, --glint); main.js runs all three. Sizes follow the card's width (--pw). */
.rig {
  --pw: clamp(220px, 21vw, 290px); --strap: clamp(110px, 21vh, 230px);
  position: relative; z-index: 2; width: var(--pw);
  animation: drop 1.15s cubic-bezier(.3, .7, .4, 1) .1s both;
}
/* below the fold when the page opens (the homepage): held up out of sight until main.js drops it */
.rig.armed { animation: none; transform: translateY(-115%); }
.rig.armed.drop { animation: drop 1.15s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes drop { 0% { transform: translateY(-115%); } 55% { transform: translateY(3%); } 76% { transform: translateY(-1.2%); } 100% { transform: none; } }
.swing { --a: 0deg; display: grid; justify-items: center; transform: rotate(var(--a)); transform-origin: 50% 0; perspective: 1100px; }
.strap {
  display: flex; justify-content: center; overflow: hidden; width: calc(var(--pw) * .11); height: var(--strap);
  background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 30%, transparent 70%, rgba(0,0,0,.25)), var(--navy);
  color: rgba(255, 255, 255, .78); font: 800 calc(var(--pw) * .034)/1 var(--display); letter-spacing: .3em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.strap::before { content: "fees media    fees media    fees media    fees media    fees media    fees media"; white-space: pre; }
.clip {
  position: relative; z-index: 2; width: calc(var(--pw) * .17); height: calc(var(--pw) * .12); margin-top: -2px;
  border-radius: 3px 3px 9px 9px; background: linear-gradient(90deg, #7D838B, #E3E6EA 42%, #A7ACB3 68%, #6F757D);
}
.clip::after {
  content: ""; position: absolute; left: 34%; top: 70%; width: 32%; height: 75%; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #6F757D, #C9CDD2 50%, #6F757D);
}
.pass {
  --rx: 0deg; --ry: 0deg;
  position: relative; width: var(--pw); margin-top: calc(var(--pw) * -.03); font-size: calc(var(--pw) / 19);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pass:active { cursor: grabbing; }
.pass-face { border-radius: .8em; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pass-front { position: relative; padding-bottom: .9em; background: var(--white); color: var(--navy); }
/* the lamination: a gloss that slides across as the card turns */
.pass-front::after {
  content: ""; position: absolute; inset: -10% -70%; pointer-events: none;
  background: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .42) 50%, transparent 57%);
  transform: translateX(calc((var(--sheen, 0) + .45) * 38%));  /* at rest the glare sits off to the right */
}
.pass-back {
  position: absolute; inset: 0; transform: rotateY(180deg); display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  padding: 0 1.6em 1.4em; text-align: center; background: var(--navy); color: var(--white);
}
.pass-back-msg { display: grid; align-content: center; justify-items: center; gap: 1.2em; }
.pass-back-msg p { font: 700 1.25em/1.3 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.pass-back .pass-foil { position: relative; right: auto; bottom: auto; width: 3.2em; height: 3.2em; font-size: 1.15em; }
.pass-back-small { font: 600 .7em/1.5 var(--mono); color: rgba(255, 255, 255, .6); }
.slot { display: block; width: 26%; height: .55em; margin: .8em auto .7em; border-radius: 1em; background: var(--black); }
.pass-back .slot { margin-bottom: 0; }
.pass-band {
  padding: .85em .9em .8em; background: var(--navy); color: var(--white); text-align: center;
  font: 800 .8em/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
}
.pass-photo { position: relative; margin: .9em .9em 0; aspect-ratio: 1; border-radius: .4em; overflow: hidden; background: var(--land); }
.pass-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* the foil seal, the pass's only logo (his pick): clear film at rest, it only shines amber when the light catches it */
.pass-foil {
  position: absolute; right: .55em; bottom: .55em; width: 2.7em; height: 2.7em; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .6);
  color: rgba(255, 255, 255, .85); font: 800 .78em/1 var(--display); letter-spacing: -0.04em;
}
.pass-foil::before {
  content: ""; position: absolute; inset: 0; opacity: var(--glint, 0);
  background: conic-gradient(from calc(var(--ry) * 2), #F2A541, #FFE6B8, #C97C1E, #FFD08A, #F2A541);
}
.pass-foil::after { content: "fm."; position: relative; }
.pass-name { margin: .14em .25em 0; font: 800 3.5em/.9 var(--display); letter-spacing: -0.05em; }  /* margins in its own em: .9 of the card's */
.pass-role { margin: .3em .95em 0; font: 700 .95em/1.2 var(--body); color: var(--muted-ink); }
.pass-access {
  margin-top: .85em; padding: .5em .4em .45em; background: var(--navy); color: var(--white); text-align: center;
  font: 800 1.42em/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.pass-code { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: .75em 1em 0; font: 600 .72em/1 var(--mono); color: var(--muted-ink); }
.pass-code i {
  flex: 1; height: 2em;
  background: repeating-linear-gradient(90deg, var(--navy) 0 .14em, transparent .14em .3em, var(--navy) .3em .38em, transparent .38em .56em, var(--navy) .56em .8em, transparent .8em .95em);
}


/* ---------- roles: pinned while the scribble draws and the tape goes down ---------- */
/* The stage is only as tall as the tape, held in the middle of the screen (main.js sets --stage-h and --stage-top),
   so the intro and WORK sit right against it instead of half a screen of black either side (his note, 19 Oct). */
.roles { height: calc(var(--stage-h, 100svh) + 60svh); position: relative; }
.roles-stage { position: sticky; top: var(--stage-top, 0px); display: grid; justify-items: center; gap: clamp(14px, 3.5vh, 36px); padding-block: 24px 32px; overflow: hidden; }
.scribble { position: absolute; inset: -5%; width: 110%; height: 110%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.scribble path { fill: none; stroke: #E9EDF3; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .32; }
.roles-lead { position: relative; font: 600 clamp(1rem, 1.6vw, 1.2rem)/1 var(--display); color: var(--smoke); }
.tapes { position: relative; list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; justify-items: center; gap: clamp(3px, .9vh, 10px); }
/* Each strip: the <li> drops the shadow and moves, the <span> is the tape (torn ends cut with clip-path). */
.tapes li {
  --x: 0em; --r: 0deg;
  opacity: 0; transform: translateX(calc(var(--x) * var(--spread, 1))) rotate(calc(var(--r) * 2.2)) scale(1.4);
  transition: opacity .16s ease, transform .34s cubic-bezier(.2, .9, .3, 1.25);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
}
.tapes li.on { opacity: 1; transform: translateX(calc(var(--x) * var(--spread, 1))) rotate(var(--r)); }
.tapes li:nth-child(even).on { transition-delay: .09s; }  /* pairs land slap-slap, not as one */
.tapes span {
  display: block; padding: .24em .8em .18em; color: #151515;
  /* sized by the screen's width and height, so eight strips fit a short laptop too */
  font: 400 min(clamp(1.55rem, 4.2vw, 3.2rem), 5.4vh)/1.1 var(--hand);
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%, rgba(0,0,0,.05)), var(--tape);
  clip-path: polygon(0 6%, 100% 0, 98.6% 18%, 100% 34%, 98.2% 52%, 100% 70%, 98.8% 86%, 100% 100%, 0 96%, 1.4% 80%, 0 62%, 1.8% 44%, 0 28%, 1.2% 14%);
}
.tapes li:nth-child(1) { --x: -1.6em; --r: -3deg; }
.tapes li:nth-child(2) { --x: 1.2em;  --r: 2deg; }
.tapes li:nth-child(3) { --x: -.6em;  --r: -1.5deg; }
.tapes li:nth-child(4) { --x: 1.8em;  --r: 2.5deg; }
.tapes li:nth-child(5) { --x: -1.2em; --r: -2deg; }
.tapes li:nth-child(6) { --x: -2.4em; --r: -4deg; }
.tapes li:nth-child(7) { --x: 1.4em;  --r: 3deg; }
.tapes li:nth-child(8) { --x: -.2em;  --r: -2deg; }
@media (max-width: 560px) { .tapes { --spread: .45; } }
.tapes li:last-child span { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.06)), var(--amber); }

/* ---------- act titles (WORK. / PLAY.) ---------- */
.giant { font-size: clamp(4rem, 15vw, 12.5rem); line-height: .86; letter-spacing: -0.045em; }
/* PLAY's full stop turns into a play button, lit, when the title comes into view (main.js adds .on). It starts as a
   circle drawn where Montserrat's full stop sits, and morphs point by point into the triangle. */
.play-dot {
  display: inline-block; width: .61em; height: .7em; background: var(--white);
  clip-path: polygon(41.8% 84.3%, 41.2% 88.4%, 39.4% 92.1%, 36.5% 95.4%, 32.8% 97.9%, 28.4% 99.5%, 23.8% 100%, 19.1% 99.5%, 14.8% 97.9%, 11% 95.4%, 8.2% 92.1%, 6.4% 88.4%, 5.7% 84.3%, 6.4% 80.2%, 8.2% 76.4%, 11% 73.2%, 14.8% 70.7%, 19.1% 69.1%, 23.8% 68.6%, 28.4% 69.1%, 32.8% 70.7%, 36.5% 73.2%, 39.4% 76.4%, 41.2% 80.2%);
  transition: clip-path .55s cubic-bezier(.3,1.25,.5,1), transform .55s cubic-bezier(.3,1.25,.5,1), background-color .25s ease .3s;
}
.play-title.on .play-dot {
  background: var(--amber); transform: translateX(.13em);
  clip-path: polygon(100% 50%, 78.8% 60.6%, 66.6% 66.7%, 57.6% 71.2%, 49.9% 75%, 42.2% 78.9%, 33.3% 83.3%, 21.2% 89.4%, 0% 100%, 0% 79%, 0% 66.8%, 0% 57.8%, 0% 50%, 0% 42.2%, 0% 33.2%, 0% 21%, 0% 0%, 21.2% 10.6%, 33.3% 16.7%, 42.2% 21.1%, 49.9% 25%, 57.6% 28.8%, 66.6% 33.3%, 78.8% 39.4%);
}
.act-sub { font-style: italic; color: var(--smoke); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-top: 14px; }

/* ---------- work: a sideways row ---------- */
.work { position: relative; }
.work-stage { padding-block: clamp(56px, 9vh, 120px) 24px; }
.work-track { display: flex; gap: clamp(18px, 2.2vw, 32px); padding: 40px var(--gutter) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.work-track::-webkit-scrollbar { display: none; }
.card { flex: 0 0 min(80vw, 440px); scroll-snap-align: start; text-decoration: none; display: grid; gap: 12px; align-content: start; }
.card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--panel); transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s; filter: saturate(.9); }
.card:hover img { transform: scale(1.02); filter: saturate(1.05); }
.card-title { font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.1; letter-spacing: -0.01em; margin-top: 6px; }
.card-story { color: var(--smoke); font-size: 1rem; line-height: 1.45; max-width: 42ch; }
.card:hover .card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.end-board { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 6px; border: 1px solid var(--line); }
.end-num { font: 800 clamp(4.5rem, 9vw, 8rem)/1 var(--display); letter-spacing: -0.05em; }
.card-end u { color: var(--white); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* Wide screens: pin the section and slide the row with the page (main.js sets --shift in px). */
@media (min-width: 901px) {
  .work.pinned { height: var(--pin-h, 300vh); }
  .work.pinned .work-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: 72px 32px; }
  .work.pinned .work-track { overflow: visible; scroll-snap-type: none; transform: translateX(calc(var(--shift, 0) * -1px)); will-change: transform; }
  .work.pinned .card { flex-basis: clamp(300px, min(32vw, 56vh), 500px); }
}

/* ---------- play ---------- */
.play { padding-block: clamp(48px, 8vh, 110px) clamp(48px, 8vh, 96px); }
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(32px, 6vh, 64px); }
.video {
  position: relative; padding: 0; border: 0; background: var(--panel); color: var(--white); cursor: pointer; text-align: left;
  border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; font: inherit;
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85)); }
.video::before {
  content: ""; position: absolute; z-index: 2; left: 16px; top: 16px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23000'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform .25s ease;
}
.video:hover img { transform: scale(1.04); }
.video:hover::before { transform: scale(1.1); }
.v-title { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; font: 700 1rem/1.3 var(--display); text-wrap: balance; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.more { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; }
.more a { font: 600 .95rem/1 var(--display); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (max-width: 900px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .videos { grid-template-columns: 1fr; } }

/* ---------- places: three map cards drawn from his own lists (light) ---------- */
.places { background: var(--paper); color: var(--navy); position: relative; overflow: hidden; padding-block: clamp(110px, 16vh, 180px) clamp(110px, 15vh, 170px); }
.places-head { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 5vw, 80px); align-items: end; }
.places h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.places-head p { color: var(--muted-ink); max-width: 46ch; font-size: 1.12rem; }
.guides { list-style: none; margin: clamp(36px, 6vh, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.guide {
  display: grid; gap: 6px; height: 100%; padding: 16px 16px 20px; text-decoration: none;
  background: var(--white); border: 1px solid var(--rule); border-radius: 8px;
  transition: border-color .25s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.guide:hover { border-color: var(--navy); transform: translateY(-3px); }
/* All three drawn the same way: the country in navy, every saved place a small white pin; busy cities glow brighter */
.g-map { display: block; aspect-ratio: 1; margin-bottom: 10px; border-radius: 4px; background: var(--land); overflow: hidden; }
.map { display: block; width: 100%; height: 100%; }
.map .land { fill: var(--navy); }
.map circle { fill: var(--white); opacity: 0; transform: translateY(-6px); transform-box: fill-box; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.9,.3,1.3), fill .25s; }
.map circle.on { opacity: .6; transform: none; }
.guide:hover .map circle { fill: var(--amber); }
.g-name { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--display); letter-spacing: -0.02em; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.g-count { font: 600 .9rem/1 var(--display); color: var(--muted-ink); letter-spacing: 0; white-space: nowrap; }
.g-note { color: var(--muted-ink); }
.g-open { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 .95rem/1.2 var(--display); }
.g-open::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z' fill='%2326344F'/%3E%3C/svg%3E") center / contain no-repeat;
}
.guide:hover .g-open { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* The cat walks right to left along the bottom of the section as you scroll through it (main.js picks the frame). */
.cat { position: absolute; bottom: 14px; left: 0; width: 100%; height: 75px; pointer-events: none; }
.cat-sprite {
  width: 100px; height: 75px; background: url("/assets/img/cat-walk.webp") 0 0 / 1000px 75px no-repeat;
  transform: translateX(calc((1 - var(--p, 0)) * (100vw + 120px) - 120px));
  background-position-x: calc(var(--frame, 0) * -100px);
}
@media (max-width: 900px) {
  .places-head { grid-template-columns: 1fr; }
  .guides { grid-template-columns: 1fr; max-width: 460px; }
  .g-map { aspect-ratio: 2 / 1; }  /* half the height on phones; the country shrinks to fit */
}

/* ---------- brands: every name faint, a few lit at a time, like rain (light) ---------- */
.credits { background: var(--paper); color: var(--navy); padding-bottom: clamp(80px, 13vh, 150px); }
.credits .wrap { border-top: 1px solid var(--rule); padding-top: clamp(48px, 8vh, 90px); }
.credits-lead { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.brands { list-style: none; margin: clamp(20px, 4vh, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: clamp(18px, 3vw, 44px); row-gap: 4px; max-width: 1100px; }
.brands li {
  font: 800 clamp(1.7rem, 4.4vw, 3.8rem)/1.15 var(--display); letter-spacing: -0.03em; white-space: nowrap;
  opacity: .13; transform: translateY(-.12em); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.brands li.lit { opacity: 1; transform: none; transition-duration: .6s; }
.brands:not(.raining) li { opacity: 1; transform: none; }

/* ---------- contact: a note written as a sentence ---------- */
.contact { max-width: none; padding-block: clamp(80px, 12vh, 140px); text-align: center; }
.contact h2 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.03em; }  /* one size on every page, Want to collaborate? included (his ask, 20 Oct) */
.contact-sub { margin-top: 18px; color: var(--smoke); font-size: 1.15rem; }
.note { max-width: 38rem; margin: clamp(40px, 7vh, 64px) auto 0; text-align: left; }
.note-line { font: 600 clamp(1.2rem, 1.6vw, 1.4rem)/1.9 var(--display); letter-spacing: -0.01em; }
.note-line .nw { white-space: nowrap; }  /* the full stop never wraps away from its box */
.note input, .note textarea { font: inherit; color: var(--white); background: transparent; border: 0; outline-offset: 4px; }
.note-line input {
  width: 9.5ch; padding: 0 .1em; margin-inline: .1em; border-bottom: 2px solid #4A4A4A; border-radius: 0;
  transition: border-color .2s;
}
.note-line input[type="email"] { width: 13ch; }
.note-line input:focus { border-bottom-color: var(--white); outline: none; }
.note-line input::placeholder, .note textarea::placeholder { color: #6B7280; }
.note textarea {
  display: block; width: 100%; margin-top: 22px; padding: 14px 16px; resize: vertical;
  font: 400 1.1rem/1.55 var(--body); border: 1px solid #333; border-radius: 6px; background: #0A0A0A;
}
.note textarea:focus { border-color: var(--white); outline: none; }
.note input:user-invalid, .note textarea:user-invalid { border-color: #E07A6B; }
.hp { position: absolute; left: -9999px; }
.note-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 28px; text-align: center; }  /* centred, the email under the button (his ask, 20 Oct) */
/* The send button is a strip of console tape, like the roles. */
.send { border: 0; padding: 0; background: none; cursor: pointer; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.send span {
  display: block; padding: .22em .9em .16em; color: #151515; font: 400 1.7rem/1.1 var(--hand); transform: rotate(-2deg);
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%, rgba(0,0,0,.05)), var(--tape);
  clip-path: polygon(0 6%, 100% 0, 98.6% 18%, 100% 34%, 98.2% 52%, 100% 70%, 98.8% 86%, 100% 100%, 0 96%, 1.4% 80%, 0 62%, 1.8% 44%, 0 28%, 1.2% 14%);
}
.send:hover { transform: translateY(-2px) rotate(1deg); }
.send:disabled { opacity: .6; cursor: progress; }
.contact-sub a { color: var(--white); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.contact-sub a:hover { color: var(--amber); }
.note-alt { color: var(--smoke); }
.note-alt a { color: var(--white); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mail-btn {
  padding: 0; border: 0; background: none; color: var(--white); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.mail-btn:hover { color: var(--amber); }
.mail-copied { margin-left: 12px; color: var(--amber); font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.note-privacy { color: #7D8590; font-size: .82rem; }  /* what the note is used for (PIPEDA; his wording, 21 Oct) */
.note-status { margin-top: 18px; color: var(--smoke); min-height: 1.6em; text-align: center; }
.note-status.error { color: #F0A090; }
/* Sent: the form gives way to one strip of amber tape. */
.note-sent { display: flex; justify-content: center; margin-top: clamp(40px, 7vh, 64px); }
.note-sent span {
  display: block; padding: .26em .9em .2em; color: #151515; font: 400 clamp(1.6rem, 3.6vw, 2.6rem)/1.1 var(--hand);
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.06)), var(--amber);
  clip-path: polygon(0 6%, 100% 0, 98.6% 18%, 100% 34%, 98.2% 52%, 100% 70%, 98.8% 86%, 100% 100%, 0 96%, 1.4% 80%, 0 62%, 1.8% 44%, 0 28%, 1.2% 14%);
  animation: slap .4s cubic-bezier(.2,.9,.3,1.25) both;
}
@keyframes slap { from { opacity: 0; transform: scale(1.4) rotate(-6deg); } to { opacity: 1; transform: rotate(-2deg); } }
@media (max-width: 560px) {
  .note-line { line-height: 1.7; }
  .note-line input, .note-line input[type="email"] { display: block; width: 100%; margin: 2px 0 10px; }
  .note-line .nw { white-space: normal; }
  .note-line .nl { display: none; }
  .note-line .dot { display: none; }
}

/* ---------- footer ---------- */
.foot { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 48px 40px; border-top: 1px solid var(--line); text-align: center; }  /* centred at every width (his ask, 20 Oct) */
.foot .socials { margin: 0; }
.foot-name { font: 800 1.6rem/1 var(--display); }
.foot-where, .foot-built { color: var(--smoke); font-size: .92rem; margin-top: 6px; }

/* Reduce Motion: no still version. Everything moves for everyone (his call, 19 Oct); see main.js. */