*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.wordmark { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-xl); letter-spacing: 0.02em; margin: 0 0 var(--space-sm); }
.wordmark s { text-decoration-thickness: 3px; color: var(--color-ink-3); }
mark { background: linear-gradient(transparent 55%, var(--color-mark) 55%); color: inherit; padding: 0 0.1em; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-style: normal;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); line-height: 1.05; }
.hl { color: var(--color-accent); }
p { margin: 0 0 var(--space-md); max-width: var(--measure); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--color-ink-3); }

.wrap { width: min(100% - 2 * clamp(16px, 5vw, 48px), var(--page-max)); margin-inline: auto; }
section { padding-block: var(--space-3xl); }

/* ---------- Nav · N9 edge-aligned ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding-block: var(--space-lg);
}
.nav__mark { display: flex; flex-direction: column; gap: var(--space-2xs); text-decoration: none; }
.nav__mark img { width: 150px; }
.nav__title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-lg); align-items: center; font-family: var(--font-display); font-stretch: 85%; font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.nav__links a { color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav__links a:hover { color: var(--color-accent); }
.nav__links .nav__cta { color: var(--color-accent); }
@media (max-width: 760px) { .nav__links a:not(.nav__cta) { display: none; } .nav__mark img { width: 120px; } .nav__title { font-size: 0.875rem; white-space: normal; max-width: 26ch; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-base);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.textlink { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-sm); white-space: nowrap; }

/* ---------- Split Studio rows ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
.split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split--flip > :first-child { order: 2; }
@media (max-width: 900px) { .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .split--flip > :first-child { order: 0; } }

/* ---------- Hero ---------- */
.hero__lede { font-size: var(--text-lg); color: var(--color-ink-2); margin-top: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; margin-top: var(--space-xl); }

/* the proof column: a real beat grid excerpt */
.beatgrid { border-top: var(--rule-ink); }
.beatgrid__head, .beatgrid__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair); }
.beatgrid__head { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; color: var(--color-ink-3); }
.beatgrid__row { font-size: var(--text-sm); line-height: 1.45; }
.beatgrid__beat { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; }
.beatgrid__mine { color: var(--color-ink); }
.beatgrid__theirs { color: var(--color-ink-3); }
.beatgrid__foot { margin-top: var(--space-sm); }
@media (max-width: 560px) {
  .beatgrid__head { display: none; }
  .beatgrid__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .beatgrid__theirs::before { content: "Their winner: "; font-family: var(--font-mono); font-size: var(--text-xs); }
  .beatgrid__mine::before { content: "My version: "; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); }
}


/* ---------- Hero: article push + testimonial ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-md) var(--space-2xl); }
.hero h1 { font-size: clamp(2.5rem, 4.5vw + 0.75rem, 5rem); }
.hero__kicker { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-xl); line-height: 1.15; color: var(--color-ink-3); margin: 0 0 var(--space-sm); }
.hero__kicker s { text-decoration-thickness: 3px; text-decoration-color: var(--color-accent); }
.hero__lede { font-size: var(--text-xl); line-height: 1.35; color: var(--color-ink); margin: var(--space-md) 0 var(--space-lg); max-width: 30ch; }
.hero__proof { margin: 0; }
.hero__photo { width: 100%; max-width: 340px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.hero__quote { font-family: var(--font-body); font-style: italic; font-size: var(--text-base); line-height: 1.4; margin: var(--space-md) 0 var(--space-sm); padding-left: var(--space-md); border-left: 4px solid var(--color-accent); }
.hero__cite { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-sm); padding-left: var(--space-md); }
.hero__cite img { border-radius: 50%; width: 44px; height: 44px; }
.record__h { margin-bottom: var(--space-xl); }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-top: var(--space-md); }
  .hero__proof { order: -1; display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-md); align-items: start; }
  .hero__photo { width: 88px; border-radius: 50%; grid-row: span 2; }
  .hero__quote { font-size: var(--text-base); margin: 0 0 var(--space-xs); padding-left: var(--space-sm); }
  .hero__cite { padding-left: var(--space-sm); }
  .hero__cite img { display: none; }
  .hero__lede { font-size: var(--text-lg); margin: var(--space-md) 0 var(--space-lg); }
}


/* ---------- Results ---------- */
.results h2 { max-width: 20ch; }
.results__aside { font-style: italic; color: var(--color-ink-2); margin: var(--space-sm) 0 var(--space-xl); }
.latest { margin-top: var(--space-2xl); }
.latest h3 { margin-bottom: var(--space-md); }
.latest__imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 600px) { .latest__imgs { grid-template-columns: minmax(0, 1fr); } }
.bio { padding-left: 1.2em; margin: 0; max-width: var(--measure); }
.bio li { margin-bottom: var(--space-sm); }


/* ---------- Anti-resume showcase ---------- */
.showcase { padding-top: 0; }
.showcase__intro { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-2xl); line-height: 1.1; margin-bottom: var(--space-xl); }
.show { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-xl); border-top: var(--rule-hair); }
.show:nth-of-type(odd) .show__text { order: 2; }
.show__text h3 { font-size: var(--text-2xl); line-height: 1.05; margin-bottom: var(--space-md); }
.show__yes { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-lg); color: var(--color-accent); margin: var(--space-md) 0 0; }
.show__imgs { display: grid; gap: var(--space-sm); }
.show__imgs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.show__imgs--3 img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-sm); }
.show__imgs--1 img { width: 100%; max-height: 560px; object-fit: cover; object-position: top; border: var(--rule-hair); }
@media (max-width: 900px) {
  .show { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .show:nth-of-type(odd) .show__text { order: 0; }
  .show__text h3 { font-size: var(--text-xl); }
  }


.dude { margin-top: var(--space-2xl); max-width: 560px; }
.dude__lead { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.dude img { width: 100%; border: var(--rule-hair); background: var(--color-paper); }
.dude__name { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; margin: var(--space-sm) 0 var(--space-2xs); }


/* ---------- Tier list (from LinkedIn ad 8) ---------- */
.tiers { background: var(--color-tier-panel); padding: var(--space-xl); border-radius: var(--radius-sm); }
.tiers__title { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-2xl); line-height: 1.05; color: var(--color-paper); margin: 0 0 var(--space-lg); }
.tiers__list, .job .tiers__list { list-style: none; margin: 0 0 var(--space-xl); padding: 0; max-width: none; display: grid; gap: var(--space-xs); }
.job .tiers__list li { margin: 0; }
.tiers__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); background: var(--color-tier-row); border-radius: var(--radius-sm); overflow: hidden; }
.tiers__list div { padding: var(--space-sm) var(--space-md); }
.tiers__list strong { display: block; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-lg); color: var(--color-paper); line-height: 1.15; }
.tiers__list div span { display: block; font-size: var(--text-sm); line-height: 1.45; color: oklch(78% 0.015 60); margin-top: var(--space-2xs); }
.tier { display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); color: var(--color-tier-ink); }
.tier--s { background: var(--color-tier-s); } .tier--a { background: var(--color-tier-a); } .tier--b { background: var(--color-tier-b); } .tier--c { background: var(--color-tier-c); } .tier--d { background: var(--color-tier-d); }

/* ---------- Process ---------- */
.steps { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); counter-reset: none; }
.steps li { border-top: var(--rule-ink); padding-top: var(--space-md); }
.steps__n { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-3xl); color: var(--color-accent); line-height: 1; }
.steps h3 { margin: var(--space-sm) 0 var(--space-xs); }
.steps p { margin: 0; color: var(--color-ink-2); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } .tiers { padding: var(--space-lg) var(--space-md); } .tiers__list li { grid-template-columns: 44px minmax(0, 1fr); } }

/* ---------- Ledger ---------- */
.ledger { border-top: var(--rule-ink); border-bottom: var(--rule-ink); padding-block: 0; }
.ledger__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-xl); padding-block: var(--space-lg); border-bottom: var(--rule-hair); align-items: baseline; }
.ledger__row:last-child { border-bottom: 0; }
.ledger__fig { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-3xl); line-height: 1; }
.ledger__row p { margin: 0; }
.ledger__names { padding-block: var(--space-lg); color: var(--color-ink-2); text-align: center; }
.ledger__names .mono { margin-inline: auto; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xl); margin-top: var(--space-md); }
.logos img { height: 64px; width: auto; }
@media (max-width: 700px) { .ledger__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }

/* ---------- Jobs ---------- */
.job h2 { margin-bottom: var(--space-lg); }
.job ol { padding-left: 1.2em; margin: 0 0 var(--space-lg); max-width: var(--measure); }
.job li { margin-bottom: var(--space-xs); }
.formula { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-lg); line-height: 1.2; border-left: 4px solid var(--color-accent); padding-left: var(--space-md); margin: var(--space-lg) 0; }
figure { margin: 0; }
figure img { border: var(--rule-hair); background: var(--color-paper-2); }
figure img.crop { max-height: 520px; width: 100%; object-fit: cover; object-position: top; }
figcaption { margin-top: var(--space-xs); }

.night { background: var(--color-night); color: var(--color-paper); }
.night p { color: oklch(85% 0.015 60); }
.night .mono { color: oklch(70% 0.02 55); }
.night figure img { border-color: oklch(35% 0.02 45); }
.night blockquote { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-xl); line-height: 1.15; margin: var(--space-lg) 0; color: var(--color-paper); white-space: nowrap; }
@media (max-width: 600px) { .night blockquote { white-space: normal; text-align: center; text-wrap: balance; margin-inline: auto; } }

/* ---------- Work ---------- */
.work__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--space-2xl); margin-top: var(--space-2xl); }
.wplayer--v { display: block; width: 100%; max-width: 360px; }
.wplayer--a { display: block; width: 100%; height: 120px; border: 0; margin-top: var(--space-sm); }
.work__stack { display: grid; gap: var(--space-2xl); align-content: start; }
.work__item h3 { margin: var(--space-sm) 0 var(--space-sm); }
.work__item audio { width: 100%; margin-top: var(--space-sm); }
.lyric { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: var(--text-lg); line-height: 1.2; margin: var(--space-md) 0; }
.concept { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-paper-2); padding: var(--space-2xs) var(--space-xs); overflow-wrap: anywhere; display: inline-block; }
@media (max-width: 900px) { .work__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Article teaser ---------- */
.teaser { border-top: var(--rule-ink); }
.teaser__quote { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-3xl); line-height: 1; max-width: 22ch; margin: var(--space-lg) 0; }

/* ---------- Proof filter / CTA ---------- */
.filter ul { padding-left: 1.2em; margin: 0 0 var(--space-xl); max-width: var(--measure); color: var(--color-ink-2); }
.filter li { margin-bottom: var(--space-xs); }

.statics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.statics img, .statics__vid { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.statics__vid { background: #000; }
.statics img.statics__fit { object-fit: contain; }
.statics__vid iframe { width: 100%; height: 100%; border: 0; display: block; }
.more-results__title { margin-top: var(--space-2xl); }
#more-results h2 { margin-bottom: var(--space-xl); }
.more-results { columns: 3; column-gap: var(--space-md); }
@media (max-width: 900px) { .more-results { columns: 2; } }
.more-results figure.pair { display: grid; gap: var(--space-xs); }
.more-results figure { break-inside: avoid; margin: 0 0 var(--space-md); }
.more-results img { width: 100%; height: auto; border: var(--rule-hair); }
.more-results figcaption { margin-top: var(--space-xs); }
@media (max-width: 600px) { .more-results { columns: 1; } }
.still { max-width: 340px; margin: var(--space-xl) auto 0; text-align: center; }
.still img { width: 100%; height: auto; display: block; }
.still .mono { margin-top: var(--space-xs); }
@media (max-width: 600px) { .statics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } }
.yt-short { max-width: 340px; margin: var(--space-xl) auto 0; text-align: center; }
.yt-short iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; display: block; }
.yt-short .mono { margin-top: var(--space-xs); }
.sc { display: block; width: 100%; height: 166px; border: 0; margin-block: var(--space-md); }
.page .yt-short { margin: var(--space-md) 0; }
.page .yt-short--top { margin: var(--space-lg) auto; }
.work__list { max-width: 780px; margin: var(--space-2xl) auto 0; }
.work__list > .work__item { border-top: var(--rule-ink); padding-block: var(--space-xl); }
.work__list > .work__item:last-child { border-bottom: var(--rule-ink); }
.work__list .yt-short, .work__list .work__video { max-width: 340px; margin: var(--space-md) 0 var(--space-xs); }
/* ---------- Footer · Ft6 letter close ---------- */
.close { border-top: var(--rule-ink); padding-block: var(--space-2xl); }
.close__lines { font-family: var(--font-body); font-style: italic; color: var(--color-ink-2); }
.close__lines p { margin-bottom: var(--space-2xs); }
.close__img { margin-top: var(--space-xl); width: 100%; max-width: min(640px, 100%); }
.close__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }

/* ===== ME-tab sales-page layer (2026-11-09): Montserrat, #333, dark red, pink bands, one centred column ===== */
body { font-weight: 500; font-size: var(--text-base); line-height: 1.6; }
h1, h2, h3 { font-stretch: normal; font-weight: 800; letter-spacing: -0.005em; line-height: 1.18; }
h1 { font-size: clamp(2.1rem, 3.6vw + 1rem, 3.6rem); }
h2 { font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem); }
h3 { font-size: 1.45rem; line-height: 1.25; }
.hero h1 { font-size: clamp(2.1rem, 3.4vw + 1rem, 3.5rem); }
.hero__kicker, .showcase__intro, .ledger__fig, .teaser__quote, .tiers__title, .steps__n, .formula, .lyric, .show__yes, .dude__lead, .dude__name, .wordmark, .btn, .textlink, .nav__links, .tiers__list strong, .beatgrid__beat, .hero__cite { font-stretch: normal; }
.band { background: var(--color-band); padding: 0.05em 0.2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.yel { background: var(--color-mark); padding: 0 0.15em; }
.mad { color: var(--color-accent); }
.wordmark { font-weight: 900; letter-spacing: 0; }
.hero__quote, .close__lines { font-family: var(--font-body); font-style: italic; font-weight: 600; }
.hero__lede { font-weight: 600; }
.btn { border-radius: 6px; font-weight: 800; letter-spacing: 0.02em; }
.btn:hover { background: var(--color-ink); }
.textlink { font-weight: 800; }
a { color: var(--color-accent); }

/* one readable column, like the ME tab: everything after the hero stacks and centres */
.split, .split--flip, .work__grid, .latest { grid-template-columns: minmax(0, 1fr) !important; max-width: 780px; margin-inline: auto; gap: var(--space-xl); }
.split--flip > :first-child { order: 0 !important; }
.hero.split { max-width: none; }
.hero { padding-inline: clamp(0px, 5vw, 96px); padding-top: clamp(16px, 4vw, 64px); }  /* Jamie 2026-11-14: more room around the hero */
.results, .showcase, .process, .teaser, .menu, #work > h2, #work > .mono { max-width: 780px; margin-inline: auto; }
#work { max-width: 780px; }
.results h2, .menu__title, .process > .mono, .showcase__intro { text-align: center; margin-inline: auto; }
.results__aside { text-align: center; }
.show, .show:nth-of-type(odd) { grid-template-columns: minmax(0, 1fr); }
.show:nth-of-type(odd) .show__text { order: 0; }
.show__text h3 { font-size: 1.6rem; line-height: 1.25; }
.ledger__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.ledger__fig { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); font-weight: 900; }
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.night { background: var(--color-night); color: var(--color-ink); }
.night p { color: var(--color-ink); }
.night .mono { color: var(--color-ink-3); }
.night blockquote { color: var(--color-ink); font-weight: 800; }
.work__video { justify-self: center; }
.wplayer--v { margin-inline: auto; }
figure img, .show__imgs--1 img { border-radius: 4px; }

/* choose-your-adventure tiles */
.menu { padding-block: var(--space-xl) var(--space-2xl); text-align: center; }
.menu__title { margin-bottom: var(--space-xs); }
.menu__sub { color: var(--color-ink-3); margin: 0 auto var(--space-xl); }
.menu__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); text-align: left; }
.tile { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a.tile:hover, .tile:has(.tile__main:hover) { transform: translateY(-2px); border-color: var(--color-accent); }
.tile__main { display: flex; flex-direction: column; gap: var(--space-2xs); color: inherit; text-decoration: none; }
.tile img { width: 56px; height: 56px; border-radius: 10px; margin-bottom: var(--space-xs); }
.tile__name { font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.tile__sub { font-size: 1.0625rem; color: var(--color-ink-3); line-height: 1.3; }
.tile__ex { font-size: 1rem; font-weight: 700; line-height: 1.3; margin-top: var(--space-2xs); }
@media (max-width: 1000px) { .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } .ledger__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .menu__grid { grid-template-columns: minmax(0, 1fr); } a.tile, .tile__main { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-sm); align-items: center; } a.tile img, .tile__main img { width: 44px; height: 44px; margin: 0; grid-row: span 2; } .tile__ex { padding-left: calc(44px + var(--space-sm)); } }

.night .tiers__title { color: var(--color-paper); }
.tiers__title .hl { color: var(--color-band); }
.night .tiers__list div span { color: oklch(80% 0.01 60); }
.results h2 { max-width: 26ch; }
.latest__imgs { margin-inline: auto; }
.close { max-width: 780px; margin-inline: auto; }
.close__img { margin-inline: auto; }
.close__lines { text-align: center; }

/* 8 and 9 figure CTA (Account Playbook phases) */
.bigcta { max-width: 780px; margin-inline: auto; border-top: var(--rule-ink); }
.bigcta h2 { text-align: center; margin-bottom: var(--space-xl); }
.phases { list-style: none; padding: 0; margin: 0 0 var(--space-2xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
.phases li { border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.phase__n { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); }
.phases h3 { font-size: 1.3rem; margin: var(--space-2xs) 0 var(--space-2xs); }
.phases p { margin: 0; color: var(--color-ink-2); font-size: 1.0625rem; }
.bigcta__act { text-align: center; }
.bigcta__small { margin: var(--space-md) auto 0; color: var(--color-ink-3); font-size: 1.0625rem; }
@media (max-width: 700px) { .phases { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Inner pages (built 2026-11-13) ---------- */
.page { max-width: 780px; margin-inline: auto; padding-block: var(--space-xl) var(--space-3xl); }
.page h1 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.page h2 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-md); line-height: 1.05; }
.page h3 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-sm); }
.page h4 { font-size: var(--text-base); margin: var(--space-lg) 0 var(--space-xs); }
.page p, .page li { max-width: none; }
.page p, .page li, .page h2, .page h3 { overflow-wrap: anywhere; }
.page td, .page th { overflow-wrap: break-word; }
.page ul, .page ol { padding-left: 1.4em; margin: 0 0 var(--space-md); }
.page li { margin-bottom: var(--space-xs); }
.page img { margin: var(--space-md) auto; border-radius: var(--radius-sm); }
.page blockquote { margin: var(--space-md) 0; padding-left: var(--space-md); border-left: 4px solid var(--color-accent); font-style: italic; }
.page hr { border: 0; border-top: var(--rule-hair); margin: var(--space-xl) 0; }
.page .kicker { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: var(--text-xl); line-height: 1.15; color: var(--color-ink-3); margin: 0 0 var(--space-sm); }
.page .kicker s { text-decoration-thickness: 3px; text-decoration-color: var(--color-accent); }
.imgrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); align-items: start; max-width: none; }
.imgrow img { margin: 0; width: 100%; }
.table-scroll { overflow-x: auto; margin: var(--space-md) 0 var(--space-lg); -webkit-overflow-scrolling: touch; }
.page table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); line-height: 1.45; }
.page th, .page td { border: var(--rule-hair); padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: top; }
.page thead th { background: var(--color-paper-2); }
.table-scroll--wide table { min-width: 720px; }
.card { border: var(--rule-hair); border-radius: 6px; padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; }
.card img { margin: var(--space-sm) 0 0; }
.card > p:first-child { font-weight: 700; }
.callout { text-align: center; background: var(--color-band); border-radius: 6px; padding: var(--space-lg); margin: var(--space-xl) 0; font-weight: 700; }
.cta { text-align: center; margin: var(--space-2xl) 0 var(--space-lg); max-width: none; }
.page h2:has(+ .cta) { text-align: center; margin-inline: auto; text-wrap: balance; }
.page .wplayer--v { margin: var(--space-lg) auto; }
.sample { border-top: var(--rule-hair); padding-block: var(--space-lg); }
.sample h3 { margin-top: 0; }
.sample details { margin-top: var(--space-sm); }
.sample summary { cursor: pointer; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-sm); color: var(--color-accent); }
.sample details[open] summary { margin-bottom: var(--space-md); }
.sample__body { border-left: 3px solid var(--color-rule); padding-left: var(--space-md); font-size: var(--text-sm); }
.sample__note { color: var(--color-ink-3); font-style: italic; }
.pi-case { display: flex; gap: var(--space-lg); align-items: center; margin-bottom: var(--space-lg); }
.pi-case img { width: 96px; margin: 0; }
.pi-case p { margin: 0; }
.pi-toc { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 var(--space-xl); }
.pi-toc p { width: 100%; margin: 0; }
.pi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); }
.pi-grid img, .pi-grid p { margin: 0; }
.embed { margin: var(--space-md) 0; }
.embed iframe { display: block; width: 100%; border: 0; margin-inline: auto; }
.embed--yt iframe { aspect-ratio: 16 / 9; height: auto; }
.embed--ig iframe { max-width: 400px; height: 640px; }
.embed--reddit iframe { max-width: 560px; height: 520px; }
.embed--fb iframe { max-width: 560px; }
.cal { min-width: 320px; height: 760px; margin: var(--space-lg) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page .tiers { margin: var(--space-xl) 0; }
@media (max-width: 600px) {
  .table-scroll:not(.table-scroll--wide) table, .table-scroll:not(.table-scroll--wide) tbody,
  .table-scroll:not(.table-scroll--wide) thead, .table-scroll:not(.table-scroll--wide) tr,
  .table-scroll:not(.table-scroll--wide) th, .table-scroll:not(.table-scroll--wide) td { display: block; width: 100%; }
  .table-scroll:not(.table-scroll--wide) tr { border-bottom: var(--rule-hair); padding-block: var(--space-xs); }
  .table-scroll:not(.table-scroll--wide) th, .table-scroll:not(.table-scroll--wide) td { border: 0; padding: var(--space-2xs) 0; overflow-wrap: anywhere; }
  .table-scroll:not(.table-scroll--wide) td:first-child, .table-scroll:not(.table-scroll--wide) th:first-child { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; color: var(--color-ink-3); }
}

/* ---------- Phones (Jamie 2026-11-14: "make sure the entire website is mobile optimised") ---------- */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav__links { width: 100%; justify-content: space-between; gap: 0 12px; flex-wrap: wrap; font-size: 0.9375rem; }
  .nav__links a, .nav__links a:not(.nav__cta) { display: inline-flex; align-items: center; min-height: 44px; }
  .nav__title { font-size: 0.875rem; }
}
@media (max-width: 420px) { .nav__links { letter-spacing: 0.01em; gap: 0 8px; flex-wrap: nowrap; } }
@media (max-width: 600px) {
  .mono, .tile__ex, .close__base, .close__base a, .concept { font-size: 0.9375rem; }
  th, td { font-size: 1rem; }
  details summary { min-height: 44px; display: flex; align-items: center; }
  .pi-toc a { display: flex; align-items: center; min-height: 44px; }
  .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .yt-short, .work__list .yt-short, .work__list .work__video { max-width: 100%; }
  .yt-short iframe { max-height: 78vh; }
  .page img, .about-me img { max-width: 100%; height: auto; }
}
/* Jamie 2026-11-14: no lines ending on one lonely word ("made me / cry.") */
p, li, figcaption, td { text-wrap: pretty; }
h1, h2, h3, h4, blockquote, .lyric, .formula, .show__yes { text-wrap: balance; }
/* Jamie 2026-11-14: "sorry babe, tina su videos etc should all be aligned left or centre" -> every phone video centred */
.yt-short, .page .yt-short, .work__list .yt-short, .work__video, .work__list .work__video, .page wistia-player { margin-left: auto !important; margin-right: auto !important; }
/* Jamie 2026-11-14: phone screenshots shown at iPhone size */
img[src*="proof-client-message"] { display: block; width: 100%; max-width: 390px; height: auto; margin-inline: auto; }
.table-scroll--brief table { table-layout: fixed; }
.table-scroll--brief th:nth-child(1) { width: 22%; }
.table-scroll--brief th:nth-child(2), .table-scroll--brief th:nth-child(3) { width: 39%; }
.table-scroll--brief th, .table-scroll--brief td { padding: var(--space-sm) var(--space-md); }
.table-scroll--brief td:first-child { font-weight: 700; }
@media (max-width: 600px) {
  .table-scroll--brief thead { display: none !important; }
  .table-scroll--brief tr { border: var(--rule-hair) !important; border-radius: 6px; padding: var(--space-sm) var(--space-md) !important; margin-bottom: var(--space-sm); }
  .table-scroll--brief td:first-child { font-family: var(--font-display) !important; font-size: var(--text-lg) !important; text-transform: none !important; color: var(--color-ink) !important; padding-bottom: var(--space-xs) !important; }
  .table-scroll--brief td + td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-3); margin-bottom: 2px; }
  .table-scroll--brief td + td { padding-block: var(--space-xs) !important; }
}
img[src*="article-18"] { display: block; width: 100%; max-width: 390px; height: auto; margin-inline: auto; }

/* /about: fonts, sizes and colours from the ME tab of the Creative Strategist doc; spacing and centring
   like the LinkedIn article (Jamie 2026-11-14: "use the spacing similar to the linkedin article") */
.about-me { max-width: 760px; margin-inline: auto; font-family: "Montserrat", var(--font-body), sans-serif;
  color: #333333; font-size: 19px; font-weight: 500; line-height: 1.6; padding-bottom: var(--space-2xl); }
.about-me p, .about-me h1, .about-me h2, .about-me ul, .about-me li { color: inherit; letter-spacing: 0; font-family: inherit; max-width: none; }
.about-me > p, .about-me > ul, .about-me > div { margin: 0 0 1.1em; padding: 0; }
.about-me > h1, .about-me > h2 { margin: 1.8em 0 0.6em; padding: 0; line-height: 1.25; }
.about-me > h1:first-child { margin-top: 0.4em; }
.about-me .am-big, .about-me .am-xl, .about-me .am-lead, .about-me .am-glad { line-height: 1.35; }
.about-me .am-big { margin-top: 1.6em; margin-bottom: 0.6em; }
.about-me .am-big + .am-big { margin-top: 0.4em; }
.about-me .am-img { margin: 1.4em 0 1.6em; }
.about-me .am-box { margin: 2.2em 0; }
.about-me .am-book { margin: 1.6em 0 2em; }
.about-me .am-title, .about-me .am-who, .about-me .am-jamie { line-height: 1.2; }
.about-me ul.am-hl li { line-height: 1.35; margin-bottom: 0.7em; }
.about-me ul.am-bio li { margin-bottom: 0.5em; }
.about-me strong { font-weight: 700; }
.about-me a { color: #1155cc; text-decoration: underline; }
.about-me .am-title { font-size: 37.33px; font-weight: 900; text-align: center; text-transform: none; }
.about-me .am-title strong { font-weight: 700; }
.about-me .am-red { color: #980000; }
.about-me .am-lead { font-size: 24px; font-weight: 700; text-align: center; color: #666666; }
.about-me .am-big { font-size: 24px; font-weight: 700; }
.about-me .am-xl { font-size: 26.67px; font-weight: 700; }
.about-me .am-italic { font-style: italic; }
.about-me .am-who { font-size: 37.33px; font-weight: 700; font-style: italic; text-align: center; }
.about-me .am-glad { font-size: 26.67px; font-weight: 700; text-align: center; }
.about-me .am-jamie { font-size: 42px; font-weight: 700; text-align: center; }
.about-me .am-centre { text-align: center; }
.about-me .am-small { font-size: 18px; }
.about-me .am-tiny { font-size: 16px; line-height: 1.5; }
.about-me .am-indent { padding-left: 48px; }
.about-me .am-tim { font-size: 21.33px; font-weight: 700; color: #666666; text-align: right; margin-top: 0.4em; }
.about-me ul.am-hl, .about-me ul.am-bio { padding-left: 48px; list-style: disc; }
.about-me ul.am-hl li { font-size: 26.67px; font-weight: 700; }
.about-me ul li p { margin: 0; }
.about-me mark.am-pink { background: #f4cccc; color: inherit; padding: 0; }
.about-me mark.am-yel { background: #ffff00; color: inherit; padding: 0; }
.about-me .am-img { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.about-me .am-img.am-logos { gap: 24px 48px; }
.about-me .am-img img { display: block; max-width: 100%; height: auto; }
.about-me .am-img + .am-img { margin-top: -1em; }
.about-me .am-img img.am-border { border: 1.33px solid #000000; }
.about-me .am-img.am-indent { padding-left: 48px; }
.about-me .am-box { border: 1.33px solid #000000; padding: 16px 20px; }
.about-me .am-callout { font-size: 24px; font-weight: 700; text-align: center; }
.about-me .am-callout p { margin: 0; }
.about-me .am-black { background: #000000; color: #ffffff; }
.about-me p { max-width: none; }
.about-me .am-callout a { background: #f4cccc; }
.about-me .am-card .am-card__title { font-size: 20px; font-weight: 700; color: #980000; }
.about-me .am-card em { font-weight: 700; }
.about-me .am-card .am-img { justify-content: center; margin: 0.8em 0 0; }
.about-me .am-card p { margin: 0 0 0.3em; }
.about-me .am-book { text-align: center; font-size: 26.67px; font-weight: 700; }
.about-me .am-book a, .about-me .am-book a.btn { all: unset; cursor: pointer; background: #f4cccc; color: #1155cc;
  text-decoration: underline; font-weight: 700; font-size: 26.67px; font-family: "Montserrat", sans-serif; }
@media (max-width: 600px) {
  .about-me { font-size: 18px; }
  .about-me .am-title, .about-me .am-who { font-size: 28px; }
  .about-me .am-book a, .about-me .am-book a.btn { font-size: 22px; }
  .about-me .am-callout { font-size: 20px; }
  .about-me .am-tim { font-size: 18px; }
  .about-me .am-jamie { font-size: 32px; }
  .about-me ul.am-hl li, .about-me .am-xl, .about-me .am-glad { font-size: 21px; }
  .about-me .am-big, .about-me .am-lead { font-size: 20px; }
  .about-me .am-indent, .about-me ul.am-hl, .about-me ul.am-bio, .about-me .am-img.am-indent { padding-left: 24px; }
}