/* enzocalamita.com v3, lean launch build (1 Oct 2026)
   Identity: 15 MARGINS. Bone paper and night spreads, one marker green, the lens O wordmark.
   Type: Cabinet Grotesk (voice), IBM Plex Serif Italic (feeling), DM Mono (apparatus). All self-hosted.
   Layout: an editorial column grid; each section is a printed spread with a running head. */

@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/CabinetGrotesk-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap }
@font-face { font-family: 'Plex Serif'; src: url('fonts/ibm-plex-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap }
@font-face { font-family: 'Plex Serif'; src: url('fonts/ibm-plex-serif-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap }
@font-face { font-family: 'DM Mono'; src: url('fonts/dm-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'DM Mono'; src: url('fonts/dm-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap }

:root {
  color-scheme: light;
  --night: #15120F;
  --graphite: #2A2521;
  --bone: #EDE5D4;
  --board: #D9CEB9;
  --pencil: #857C70;
  --marker: #C8F03C;
  --marker-hover: #D6F76A;
  --photo-lime: #C8CF5E;
  --line: #C3E06A; /* the lime line of light in the Home hero photo */
  --cap-p: #5F584E;
  --cap-n: #A39A8C;
  --rule-p: #CDC2AE;
  --rule-n: #3A342E;
  --error: #9E2B1F;
  --error-n: #F2A08F;
  --f-display: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-feel: 'Plex Serif', Georgia, 'Times New Roman', serif;
  --f-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  --gut: clamp(16px, 5vw, 72px);
  --max: 1240px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bone); color: var(--night); font: 460 18px/1.55 var(--f-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0 }
ul, ol { list-style: none }
a { color: inherit }
img { display: block; max-width: 100%; height: auto }
:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px }
.paper :focus-visible { outline-color: var(--night) }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--marker); color: var(--night); padding: 10px 14px; font: 500 13px/1 var(--f-mono) }
.skip:focus { left: 8px }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut) }

/* grounds: printed stock */
.paper { background: var(--bone) url('img/paper-bone.jpg') 0 0 / 1280px auto; color: var(--night); --cap: var(--cap-p); --rule: var(--rule-p) }
.night { background: var(--night) url('img/paper-night.jpg') 0 0 / 1280px auto; color: var(--bone); --cap: var(--cap-n); --rule: var(--rule-n) }

/* type */
.x { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .88; text-wrap: balance }
.feel { font-family: var(--f-feel); font-style: italic; font-weight: 400; letter-spacing: -.01em; line-height: 1.25 }
.mono { font-family: var(--f-mono); font-weight: 400 }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; max-width: 32em; text-wrap: pretty }
p { text-wrap: pretty }
.small { font-size: 14px; line-height: 1.5; color: var(--cap) }

/* the highlighter: one word, chisel-ended */
.hl { position: relative; display: inline-block; z-index: 0; white-space: nowrap }
.hl::before { content: ""; position: absolute; z-index: -1; left: -.07em; right: -.09em; top: .07em; bottom: .01em; background: var(--marker); transform: rotate(-1.2deg) skewX(-8deg); clip-path: polygon(2% 4%, 99% 0, 100% 96%, 0 100%) }
.paper .hl::before { mix-blend-mode: multiply }
.night .hl { color: var(--night) }

/* running head */
.head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: clamp(32px, 5vw, 64px); font: 400 12px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.head b { font-weight: 500; color: currentColor }
.head em { margin-left: auto; font: italic 400 17px/1 var(--f-feel); letter-spacing: 0; text-transform: none }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; font: 800 14px/1 var(--f-display); letter-spacing: .09em; text-transform: uppercase; padding: 19px 26px 18px; white-space: nowrap; text-decoration: none; border: 0; cursor: pointer; transition: background-color .2s, color .2s }
.btn svg { width: 14px; height: 14px; flex: none; transition: transform .25s }
.btn:hover svg { transform: translateX(4px) }
.btn-p { background: var(--marker); color: var(--night) }
.btn-p:hover { background: var(--marker-hover) }
.btn-o { box-shadow: inset 0 0 0 1.5px currentColor; background: transparent; color: inherit }
.btn-o:hover { background: var(--bone); color: var(--night) }
.paper .btn-o:hover { background: var(--night); color: var(--bone) }
.tl { font: 800 14px/1 var(--f-display); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; text-decoration: none; padding: 8px 0 7px; border-bottom: 1.5px solid currentColor; transition: color .2s }
.tl:hover { color: var(--cap) }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(28px, 3vw, 40px) }
.book { display: inline-grid; gap: 6px; text-decoration: none; padding-bottom: 6px; border-bottom: 1.5px solid currentColor }
.book span { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.book b { font: 700 18px/1.1 var(--f-display); letter-spacing: -.005em }
.book b::after { content: ' \2192'; display: inline-block; transition: transform .25s }
.book:hover b::after { transform: translateX(4px) }
.cta-note { margin-top: 16px; font: 400 12px/1.5 var(--f-mono); letter-spacing: .04em; color: var(--cap) }

/* ============ HEADER ============ */
.hdr { position: relative; z-index: 50; border-bottom: 1px solid var(--rule-p) }
.hdr .wrap { max-width: 1440px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(16px, 2.4vw, 32px); padding-block: 16px 6px }
@media (min-width: 1101px) {
  .hdr .wrap { padding-block: 16px }
  .hdr .nav { order: 0; width: auto; margin-left: auto; padding-top: 0; border-top: 0 }
}
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; flex: none; min-width: 0 }
.wm { height: 26px; width: auto; display: block; fill: currentColor; flex: none }
.brand .role { display: grid; gap: 4px; padding-left: 16px; border-left: 1px solid var(--rule-p); min-width: 0 }
.brand .role b { font: 700 15px/1.15 var(--f-display); letter-spacing: -.005em; color: var(--night) }
.brand .role > span { font: 400 10.5px/1.25 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cap-p) }
/* the menu sits on its own row under the masthead */
.nav { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: 2px clamp(20px, 2.6vw, 40px); padding-top: 6px; border-top: 1px solid var(--rule-p); font: 500 16px/1 var(--f-display) }
.nav a { padding-block: 8px; position: relative; text-decoration: none; white-space: nowrap }
.nav .nav-bt { display: inline-flex; align-items: center; gap: 9px; font-weight: 700 }
.nav .nav-bt::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--marker); box-shadow: 0 0 0 1.5px var(--night) }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1) }
.hdr .btn { margin-left: auto; min-height: 46px; padding: 15px 20px 14px; font-size: 13px }

/* ============ HOME: HERO ============ */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 72px); align-items: end; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px) }
.kicker { font: 400 12.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap); margin-bottom: clamp(22px, 3vw, 36px) }
.kicker b { font-weight: 500; color: var(--night) }
.night .kicker b { color: var(--bone) }
.hero h1 { font-size: clamp(54px, 9.4vw, 136px); margin-left: -.04em }
.hero h1 span { display: block }
.hero .lede { margin-top: clamp(26px, 3vw, 40px) }
.portrait { margin: 0; position: relative; min-width: 0 }
.portrait .frame { background: var(--photo-lime); aspect-ratio: 3 / 4; overflow: hidden; max-width: 100% }
.portrait img { width: 100%; height: 100%; object-fit: cover }
.portrait figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 12px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .02em; color: var(--cap) }
.portrait figcaption b { font-weight: 400; color: var(--night); white-space: nowrap }

/* Home hero: the lime line photo. The photo is drawn at a fixed height (--h) from the top, so the line in it sits at
   --t (50.83% of --h). A CSS line at the same height carries it to the left edge, the headline sits on it, and the
   copy below gets as much room as it needs: the hero grows and the photo fades out at the bottom. */
.hero.lh { --h: clamp(640px, 52vw, 880px); --t: calc(var(--h) * .5083); position: relative; overflow: hidden }
.lh::before { content: ""; position: absolute; left: 0; right: 0; top: var(--t); height: calc(var(--h) * .0068); transform: translateY(-50%); background: var(--line); box-shadow: 0 0 calc(var(--h) * .008) rgba(195,224,106,.75), 0 0 calc(var(--h) * .026) rgba(195,224,106,.3); z-index: 0 }
.lh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 10vw, 150px); background: linear-gradient(180deg, rgba(21,18,15,0), var(--night)); z-index: 1; pointer-events: none }
.lh-img { position: absolute; top: 0; right: -4vw; height: var(--h); z-index: 1 }
.lh-img img { display: block; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 80%, transparent 100%); mask-composite: intersect }
.hero.lh .lh-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--t) auto; gap: 0; align-items: stretch; padding-block: 0 }
.lh-top { align-self: end; max-width: 60%; padding-bottom: calc(var(--h) * .012) }
.lh-bot { align-self: start; max-width: 46%; padding-block: clamp(36px, 3.6vw, 52px) clamp(44px, 4.4vw, 64px) }
.hero.lh h1 { font-size: clamp(54px, 6vw, 100px); margin-left: -.04em }
.lh .kicker { margin-bottom: clamp(16px, 2vw, 26px) }
.lh .lede { margin: 0; color: var(--bone) }
.lh .ctas { margin-top: clamp(30px, 3vw, 42px); row-gap: 24px }
.lh .cta-note { margin-top: 28px; max-width: 38em; line-height: 1.75 }
/* Home hero: two matching paths (12 Oct) */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: clamp(30px, 3vw, 42px); max-width: 620px }
.path { display: grid; gap: 12px; align-content: start }
.path-lb { margin: 0; min-height: 2.7em; font: 400 11.5px/1.35 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.path-lb b { display: block; font-weight: 500; color: var(--bone) }
.path .btn { width: 100%; text-shadow: none }
@media (max-width: 699px) { .paths { grid-template-columns: 1fr; gap: 26px } .path-lb { min-height: 0 } }
.lh + .idea { padding-top: clamp(32px, 3.4vw, 48px) }
@media (min-width: 700px) and (max-width: 980px) {
  .lh-img { right: -20vw }
  .lh-top { max-width: 54% }
  .lh-bot { max-width: 50%; padding-block: 34px 56px }
  .hero.lh h1 { font-size: clamp(46px, 6.6vw, 62px) }
}
@media (max-width: 699px) {
  /* Phones: the photo sits behind the top of the hero, smaller, and the headline starts just under the line.
     The kicker sits in the black band above his head. */
  .lh::before, .lh::after { display: none }
  .hero.lh { --w: 165vw; --ih: calc(var(--w) / 1.7686); --kt: 64px }
  .lh-img { position: absolute; top: var(--kt); left: 0; right: 0; height: var(--ih); overflow: hidden }
  .lh-img img { position: absolute; top: 0; left: calc(66vw - var(--w) * .665); width: var(--w); height: auto; max-width: none;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%) }
  .hero.lh .lh-grid { display: block; padding-block: calc(var(--kt) + var(--ih) * .508 + 20px) 0; text-shadow: 0 1px 14px rgba(21,18,15,.85) }
  .lh-top, .lh-bot { max-width: none }
  .lh-top { padding-bottom: 16px }
  .lh-bot { padding-block: 8px 56px }
  .hero.lh h1 { font-size: clamp(44px, 12.5vw, 76px) }
  .lh .kicker { position: absolute; top: 0; left: var(--gut); right: var(--gut); height: var(--kt); margin: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; font-size: 11.5px; line-height: 1; text-shadow: none }
  .lh .kicker .sep { display: none }
  .lh .kicker .k2 { color: var(--marker) }
  .lh .btn { text-shadow: none }
}

/* Photo band: a real photo set into a page, with a mono caption */
.band-sec, .c-hero .wrap.band-sec { display: block; padding-block: 0 clamp(56px, 7vw, 96px) }
.band { margin: 0 }
.band .ph { overflow: hidden; background: var(--night) }
.band img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: 50% 38% }
.band figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cap) }
.band figcaption b { font-weight: 500; color: var(--night) }
.night .band figcaption b { color: var(--bone) }
@media (max-width: 640px) { .band img { aspect-ratio: 3 / 2 } }

/* ============ HOME: THE IDEA ============ */
.sec { padding-block: clamp(64px, 9vw, 128px) }
.idea h2 { font-size: clamp(48px, 8vw, 120px) }
.idea .lede { margin-top: clamp(24px, 3vw, 36px); color: var(--bone) }
.beliefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin-top: clamp(48px, 6vw, 88px) }
.beliefs li { border-top: 1.5px solid var(--bone); padding-top: 20px; font-size: clamp(22px, 2vw, 27px) }

/* ============ HOME: 5M ============ */
.method .top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 72px); align-items: end }
.method h2 { font-size: clamp(46px, 6.2vw, 90px) }
.fivem { margin-top: clamp(40px, 5vw, 72px); border-top: 1.5px solid var(--night) }
.fivem li { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(20px, 3vw, 48px); align-items: baseline; padding-block: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--rule-p) }
.fivem .n { font: 400 13px/1 var(--f-mono); color: var(--cap-p); font-variant-numeric: tabular-nums }
.fivem h3 { font: 800 clamp(28px, 3.2vw, 44px)/1 var(--f-display); letter-spacing: -.02em }
.fivem h3 i { font-style: normal; color: var(--cap-p) }
.fivem p { font-size: clamp(18px, 1.5vw, 20px); max-width: 30em }

/* ============ MEET ENZO ============ */
.enzo .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(32px, 5vw, 80px) }
.enzo blockquote { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.2; max-width: 17em }
.enzo .by { margin-top: 24px; font: 400 12.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-n) }
.enzo .by b { font-weight: 500; color: var(--bone) }
.stats { display: grid; border-top: 1.5px solid var(--bone) }
.stats div { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 18px 0 20px; border-bottom: 1px solid var(--rule-n) }
.stats dt { font: 900 clamp(26px, 2.5vw, 36px)/1 var(--f-display); letter-spacing: -.03em; text-transform: uppercase; font-variant-numeric: tabular-nums }
.stats dd { font-size: 15px; line-height: 1.4; color: var(--cap-n) }
.creds { margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--cap-n) }
.values { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone) }
/* Meet Enzo with a photo (Home). Desktop and tablet: photo left with the quote centred beside it, stats full width below. Phone: stacked. */
.enzo .grid.withphoto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; row-gap: clamp(44px, 5vw, 64px) }
.withphoto .mphoto { grid-column: 1; grid-row: 1 }
.withphoto .m-intro { grid-column: 2; grid-row: 1; align-self: center }
.withphoto .m-stats { grid-column: 1 / -1; grid-row: 2 }
.mphoto img { aspect-ratio: 4 / 5; object-position: 50% 30% }
@media (min-width: 700px) and (max-width: 980px) {
  .enzo .grid.withphoto { column-gap: 32px; row-gap: 44px }
  .withphoto blockquote { font-size: 28px }
}
@media (max-width: 699px) {
  .enzo .grid.withphoto { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .withphoto .mphoto, .withphoto .m-intro, .withphoto .m-stats { grid-column: 1; grid-row: auto }
  .mphoto img { aspect-ratio: 4 / 3; object-position: 50% 24% }
}

/* ============ CLOSE ============ */
.close { text-align: left }
.close h2 { font-size: clamp(44px, 7vw, 104px); max-width: 11em }
.close .feel { font-size: clamp(22px, 2.2vw, 30px); margin-top: clamp(20px, 2.4vw, 30px) }

/* ============ FOOTER ============ */
.ftr .wrap { padding-block: clamp(48px, 6vw, 80px) clamp(28px, 3vw, 40px) }
.ftr .row { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)); gap: 32px clamp(24px, 4vw, 64px); padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule-n) }
.ftr .wm { height: 34px }
.ftr .role { margin-top: 16px; font: 400 12px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-n) }
.ftr h4 { margin: 0 0 14px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-n) }
.ftr ul { display: grid; gap: 10px; font-size: 16px }
.ftr ul a { text-decoration: none; overflow-wrap: anywhere }
.ftr ul a:hover { text-decoration: underline; text-underline-offset: 3px }
.risk { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--cap-n); max-width: 60em }
.risk a { color: var(--bone) }
.legalrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 18px; font: 400 11.5px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cap-n) }

/* ============ FORMS ============ */
.signup { display: grid; gap: 14px; max-width: 34rem }
.signup .fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px }
.signup.one .fields { grid-template-columns: minmax(0, 1fr) }
.field { display: grid; gap: 6px; min-width: 0 }
.field label { font: 400 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.field input { width: 100%; min-height: 52px; padding: 14px 16px; font: 500 17px/1.2 var(--f-display); color: var(--night); background: var(--bone); border: 1.5px solid var(--night); border-radius: 0; -webkit-appearance: none; appearance: none }
.night .field input { border-color: var(--bone) }
.field input::placeholder { color: var(--pencil) }
.field input:focus { outline: 2px solid var(--marker); outline-offset: 2px }
.paper .field input:focus { outline-color: var(--night) }
.field input[aria-invalid="true"] { border-color: var(--error) }
.night .field input[aria-invalid="true"] { border-color: var(--error-n) }
.signup .btn { width: 100% }
.signup .err:empty { display: none }
.signup .err { font-size: 14px; color: var(--error) }
.night .signup .err { color: var(--error-n) }
.signup .fine { font-size: 13px; line-height: 1.5; color: var(--cap) }
.signup .fine a { color: inherit }
.signup .done { display: grid; gap: 8px; padding: 22px 22px 24px; border: 1.5px solid currentColor }
.signup .done p:first-child { font: 800 22px/1.15 var(--f-display); letter-spacing: -.01em }
.signup .done .feel { font-size: 19px }
.signup .done .note { font: 400 12px/1.5 var(--f-mono); color: var(--cap) }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* waitlist criteria tick boxes */
.criteria { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; min-width: 0 }
.criteria legend { padding: 0; margin-bottom: 10px; font: 400 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.tick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.4; cursor: pointer }
.tick input { color: inherit; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid currentColor; border-radius: 0; background: transparent; display: grid; place-content: center; cursor: pointer }
.tick input::before { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--night); border-bottom: 2.5px solid var(--night); transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform .12s }
.tick input:checked { background: var(--marker); border-color: var(--marker) }
.paper .tick input:checked, .card.primary .tick input:checked { border-color: var(--night) }
.tick input:checked::before { transform: translateY(-2px) rotate(-45deg) scale(1) }
.tick input:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px }
.card.primary .tick input:focus-visible, .paper .tick input:focus-visible { outline-color: var(--night) }
.tick input[aria-invalid="true"] { border-color: var(--error-n) }
.card.primary .tick input[aria-invalid="true"], .paper .tick input[aria-invalid="true"] { border-color: var(--error) }

/* email consent tick (added 4 Oct 2026, waitlist and ebook forms) */
.tick.consent { font-size: 14.5px }
.tick.consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px }
.criteria + .tick.consent { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--rule, var(--rule-n)) }

/* ============ COMMUNITY ============ */
.c-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; padding-block: clamp(48px, 7vw, 104px) }
.c-hero .top { grid-column: 1 / -1 }
.c-hero h1 { font-size: clamp(46px, 7.6vw, 112px); margin-left: -.04em; max-width: 12em }
.c-hero .lede { margin-top: 4px }
.c-hero .feel.big { font-size: clamp(24px, 2.4vw, 32px); margin-top: 22px; color: var(--bone) }
.joincard { padding: clamp(24px, 3vw, 36px); border: 1.5px solid var(--bone); min-width: 0 }
.joincard h2 { font: 800 24px/1.1 var(--f-display); letter-spacing: -.01em; margin-bottom: 8px }
.joincard > p { color: var(--cap-n); font-size: 16px; margin-bottom: 22px }
.inside { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 2.6vw, 40px); border-top: 1.5px solid var(--night); padding-top: 24px }
.inside h3 { font: 800 clamp(22px, 2vw, 26px)/1.1 var(--f-display); letter-spacing: -.01em; margin-bottom: 10px }
.inside p { font-size: 17px; color: var(--graphite) }
.change { margin-top: clamp(56px, 7vw, 96px); font-size: clamp(30px, 3.8vw, 54px); line-height: 1.15; max-width: 20em }
.inside.three + .ctas { margin-top: clamp(44px, 5vw, 64px) }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 80px) }
.fit h3 { font: 900 clamp(30px, 3.4vw, 46px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; padding-bottom: 18px; border-bottom: 1.5px solid currentColor }
.fit li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding-block: 16px; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.45 }
.fit li::before { font: 500 15px/1.6 var(--f-mono) }
.fit .yes li::before { content: "+" }
.fit .no li::before { content: "\2212"; color: var(--cap) }
.fit .no li { color: var(--cap) }

.inlist { display: grid; gap: 0; margin-top: 22px; max-width: 30rem; border-top: 1px solid var(--rule) }
.inlist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding-block: 11px; border-bottom: 1px solid var(--rule); font: 600 17px/1.3 var(--f-display) }
.inlist li::before { content: ""; width: 9px; height: 9px; margin-top: .42em; background: var(--marker) }
.paper .joincard { border-color: var(--night) }
.paper .joincard > p { color: var(--cap-p) }
.mailline { display: grid; gap: 6px; margin-top: 28px }
.mailline span { font: 400 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.mailline a { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--f-display); letter-spacing: -.01em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; overflow-wrap: anywhere }

/* ============ RESOURCES ============ */
.r-hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(48px, 7vw, 104px) }
.cover { position: relative; aspect-ratio: 5 / 7; max-width: 440px; width: 100%; background: var(--night) url('img/paper-night.jpg') 0 0 / 1280px auto; color: var(--bone); padding: 9% 9% 8%; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(21,18,15,.2), 18px 22px 0 -2px var(--board) }
.cover .top { display: flex; justify-content: space-between; align-items: center; font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cap-n); padding-bottom: 12px; border-bottom: 1px solid var(--rule-n) }
.cover .top .wm { height: 14px }
.cover h2 { margin-top: auto; font: 900 clamp(36px, 4.4vw, 56px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: -.03em }
.cover h2 .hl { color: var(--night) }
.cover .sub { margin-top: 18px; font-size: clamp(14px, 1.3vw, 17px); color: var(--cap-n); max-width: 18em }
.cover .bot { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--rule-n); font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cap-n) }
.r-hero h1 { font-size: clamp(44px, 6.4vw, 92px); margin-left: -.03em }
.r-hero .feel { font-size: clamp(22px, 2.2vw, 28px); margin-top: 18px }
.r-hero .lede { margin-top: 22px }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; margin-bottom: 18px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase }
.status::before { content: ""; width: 9px; height: 9px; background: var(--marker); box-shadow: 0 0 0 1.5px var(--night) }

/* ============ LEGAL ============ */
.legal .wrap { max-width: 860px; padding-block: clamp(48px, 7vw, 96px) }
.legal h1 { font-size: clamp(44px, 6vw, 84px) }
.legal .toc { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px }
.legal section { margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1.5px solid var(--night) }
.legal h2 { font: 900 clamp(28px, 3vw, 38px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 20px }
.legal h3 { font: 800 19px/1.3 var(--f-display); margin: 26px 0 8px }
.legal p, .legal li { font-size: 17px; line-height: 1.6; max-width: 40em }
.legal p + p { margin-top: 12px }
.legal ul { display: grid; gap: 8px; margin-top: 10px }
.legal ul li { padding-left: 18px; position: relative }
.legal ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1.5px; background: currentColor }
.legal .upd { margin-top: 18px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-p) }

/* ============ START (link in bio) ============ */
.card.primary .field input { border-color: var(--night) }
.card.primary .field input:focus { outline-color: var(--night) }
.card.primary .signup .err { color: var(--error) }
.start { min-height: 100vh; min-height: 100dvh }
.start .col { max-width: 460px; margin-inline: auto; padding: 28px 16px 36px; display: grid; gap: 14px }
.start .me { display: grid; justify-items: center; text-align: center; gap: 10px; padding-bottom: 14px }
.start .ava { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--photo-lime); box-shadow: 0 0 0 1.5px var(--bone), 0 0 0 6px var(--night), 0 0 0 7px var(--rule-n) }
.start .ava img { width: 100%; height: 100%; object-fit: cover }
.start .me .wm { height: 22px; margin-top: 14px }
.start .me .name { font: 400 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cap-n) }
.start .me .feel { font-size: 19px; color: var(--bone) }
.card { border: 1.5px solid var(--bone); padding: 22px 20px 20px; display: grid; gap: 10px }
.card.primary { background: var(--bone) url('img/paper-bone.jpg') 0 0 / 1280px auto; color: var(--night); border-color: var(--bone); --cap: var(--cap-p) }
.start .card.primary { margin-block: 7px; box-shadow: 0 0 0 6px var(--night), 0 0 0 8px var(--marker), 0 0 22px 8px rgba(200,240,60,.18) } /* lime frame: the main link on the bio page */
.card .lab { display: flex; justify-content: space-between; gap: 12px; font: 400 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.card h2 { font: 900 30px/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.025em }
.card p { font-size: 16px; line-height: 1.45 }
.card .signup { margin-top: 6px; max-width: none }
.joincard .signup { max-width: none }
.card .btn { width: 100%; margin-top: 6px; padding-inline: 16px; font-size: 13px; letter-spacing: .06em }
.links { display: grid; margin-top: 4px; border-top: 1px solid var(--rule-n) }
.links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding-block: 12px; border-bottom: 1px solid var(--rule-n); text-decoration: none; font: 600 17px/1.2 var(--f-display) }
.links a span { font: 400 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--cap-n) }
.links a:hover { color: var(--marker) }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.minis a { display: grid; gap: 8px; padding: 16px 16px 18px; border: 1.5px solid var(--rule-n); text-decoration: none; transition: border-color .2s }
.minis a:hover { border-color: var(--bone) }
.minis span { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-n) }
.minis b { font: 700 17px/1.2 var(--f-display) }
.minis b::after { content: " \2192" }
.start .risk { text-align: center; margin-top: 12px; font-size: 12px }

/* ============ 404 ============ */
.nf .wrap { padding-block: clamp(72px, 12vw, 160px) }
.nf h1 { font-size: clamp(56px, 10vw, 150px) }

/* ============ ABOUT / COACHING / SPEAKING ============ */
.hero h1.a-h1 { font-size: clamp(40px, 5.2vw, 76px); margin-left: -.03em; width: auto }
.hero h1.a-h1 span { display: inline-block }
.story { display: grid; gap: 16px; margin-top: clamp(24px, 3vw, 36px); max-width: 34em }
.story p { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55 }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start }
.two h2 { font-size: clamp(40px, 5.2vw, 78px) }
.two .story { margin-top: 0 }
.inside.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.steps { margin-top: clamp(28px, 3vw, 40px); border-top: 1.5px solid var(--bone) }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-block: 18px; border-bottom: 1px solid var(--rule) }
.steps li > span { font: 400 12px/1.9 var(--f-mono); color: var(--cap); font-variant-numeric: tabular-nums }
.steps h3 { font: 800 22px/1.15 var(--f-display); letter-spacing: -.01em; margin-bottom: 4px }
.steps p { font-size: 16px; color: var(--cap-n) }
.bio { margin-top: 28px; font-size: 17px; line-height: 1.55; color: var(--bone); max-width: 34em }
.signup.enquiry .fields { grid-template-columns: minmax(0, 1fr) }
.field textarea { width: 100%; min-height: 120px; padding: 14px 16px; font: 500 17px/1.4 var(--f-display); color: var(--night); background: var(--bone); border: 1.5px solid var(--night); border-radius: 0; resize: vertical; -webkit-appearance: none; appearance: none }
.night .field textarea { border-color: var(--bone) }
.paper .field textarea:focus { outline-color: var(--night) }
.paper .field textarea[aria-invalid="true"] { border-color: var(--error) }
.field textarea:focus { outline: 2px solid var(--marker); outline-offset: 2px }
.field textarea[aria-invalid="true"] { border-color: var(--error-n) }
.field label em { font-style: normal; text-transform: none; letter-spacing: 0 }
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 2.6vw, 40px) }
.routes a { display: flex; flex-direction: column; gap: 10px; height: 100%; text-decoration: none; border-top: 1.5px solid var(--night); padding-top: 18px }
.routes span { font: 400 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap) }
.routes b { font: 700 clamp(19px, 1.6vw, 22px)/1.2 var(--f-display); letter-spacing: -.01em }
.routes i { margin-top: auto; padding-top: 8px; font: 800 13px/1 var(--f-display); font-style: normal; letter-spacing: .09em; text-transform: uppercase }
.routes i::after { content: " \2192"; display: inline-block; transition: transform .25s }
.routes a:hover i::after { transform: translateX(4px) }
.routes a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px }
@media (max-width: 980px) {
  .two, .inside.three { grid-template-columns: minmax(0, 1fr) }
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .routes { grid-template-columns: minmax(0, 1fr) }
  .ftr .row { grid-template-columns: minmax(0, 1fr) }
}

/* the tape: a market-style ticker that never shows a price, only principles */
body { padding-bottom: 46px }
body.start { padding-bottom: 0 }
.tape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: stretch; height: calc(46px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--marker); color: var(--night); border-top: 1.5px solid var(--night) }
.tape-view { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%) }
.tape-track { display: flex; flex: none; white-space: nowrap; animation: tape 60s linear infinite; font: 500 12.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase }
.tape-track span { display: inline-flex; align-items: center; padding-right: 28px }
.tape-track span::after { content: ""; width: 7px; height: 7px; margin-left: 28px; background: var(--night) }
.tape:hover .tape-track { animation-play-state: paused }
@keyframes tape { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.tape-cta { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; background: var(--night); color: var(--bone); text-decoration: none; font: 700 14px/1 var(--f-display) }
.tape-cta .k { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--marker) }
.tape-cta svg { width: 14px; height: 14px; transition: transform .25s }
.tape-cta:hover svg { transform: translateX(4px) }
@media (max-width: 640px) { .tape-cta { padding: 0 14px; font-size: 13px } .tape-cta .k { display: none } }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none } }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hdr .btn { display: none }
  .nav { font-size: 15px; gap: 2px 22px }
}
@media (max-width: 980px) {
  .hero .wrap, .c-hero .wrap, .enzo .grid, .method .top, .r-hero .wrap { grid-template-columns: minmax(0, 1fr) }
  .portrait { max-width: 520px }
  .inside { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ftr .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .ftr .row > :first-child { grid-column: 1 / -1 }
  .cover { max-width: 360px }
}
@media (max-width: 640px) {
  body { font-size: 17px }
  .hdr .wrap { padding-block: 12px 8px }
  .wm { height: 22px }
  .hdr .btn { display: none }
  .brand { gap: 12px; flex: 0 1 auto }
  .brand .role { padding-left: 12px }
  .brand .role b { font-size: 14px }
  .brand .role > span { font-size: 9.5px; letter-spacing: .06em }
  .nav { gap: 0 18px; font-size: 14.5px }
  .beliefs, .fit, .inside { grid-template-columns: minmax(0, 1fr) }
  .fivem li { grid-template-columns: 32px minmax(0, 1fr) }
  .fivem p { grid-column: 2 }
  .signup .fields { grid-template-columns: minmax(0, 1fr) }
  .ctas .btn { width: 100% }
  .stats dt { font-size: 32px }
}
/* Tablets (700 to 980px): Resources keeps the cover beside the text */
@media (min-width: 700px) and (max-width: 980px) {
  .r-hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start }
  .cover { max-width: 100% }
  .cover h2 { font-size: 34px }
}
/* Phones: compact header with a Menu button, and a small ebook cover beside the Resources title */
.menu-btn { display: none }
@media (max-width: 699px) {
  .hdr .wrap { flex-wrap: nowrap; padding-block: 12px }
  .brand .role > span { display: none }
  .brand .role b .cm { display: none }
  .brand .role b .rl { display: block }
  /* Menu button: a lime square with two lines; turns black with a lime cross when the menu is open */
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: var(--marker); color: var(--night); cursor: pointer; transition: background .2s, color .2s }
  .menu-btn:focus-visible { outline: 2px solid var(--night); outline-offset: 3px }
  .menu-btn .ic { position: relative; display: block; width: 20px; height: 9px }
  .menu-btn .ic i { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .2s, top .2s }
  .menu-btn .ic i:nth-child(1) { top: 0 }
  .menu-btn .ic i:nth-child(2) { top: 7px }
  .hdr.open .menu-btn { background: var(--night); color: var(--marker) }
  .hdr.open .menu-btn .ic i:nth-child(1) { top: 4px; transform: rotate(45deg) }
  .hdr.open .menu-btn .ic i:nth-child(2) { top: 4px; transform: rotate(-45deg) }
  .hdr .nav { display: none }
  .hdr.open .nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; gap: 0; padding: 4px var(--gut) 14px; background: var(--bone) url('img/paper-bone.jpg') 0 0 / 1280px auto; border-top: 0; border-bottom: 1px solid var(--rule-p); box-shadow: 0 18px 30px -18px rgba(21,18,15,.45); font-size: 18px }
  .hdr.open .nav a { padding-block: 13px; border-top: 1px solid var(--rule-p) }
  .hdr.open .nav a:first-child { border-top: 0 }
  .hdr.open .nav a::after { display: none }
  .r-hero .wrap { display: block }
  .r-hero .cover { float: right; width: 36%; max-width: 150px; margin: 2px 0 14px 18px; padding: 9% 8% 8%; box-shadow: 7px 9px 0 -2px var(--board) }
  .r-hero .cover .top span, .r-hero .cover .sub, .r-hero .cover .bot { display: none }
  .r-hero .cover .top { border: 0; padding: 0 }
  .r-hero .cover .top .wm { height: 10px }
  .r-hero .cover h2 { font-size: 17px }
  .r-hero h1 { font-size: 40px }
  .r-hero .feel, .r-hero .signup { clear: both }
}
/* About portrait on tablets and desktop: a mounted print, with a cream border and a soft shadow */
@media (min-width: 700px) {
  .a-hero .portrait .frame { padding: 12px; background: #F6F1E6; border-radius: 4px; box-shadow: 0 1px 1px rgba(21,18,15,.08), 0 14px 34px -14px rgba(21,18,15,.35), 0 30px 60px -30px rgba(21,18,15,.25) }
  .a-hero .portrait img { border-radius: 2px }
}
/* About hero: tablets keep the portrait beside the text; phones show a round portrait beside the kicker */
@media (min-width: 700px) and (max-width: 980px) {
  .a-hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 32px }
  .a-hero .portrait { max-width: none; margin-top: 8px }
  .a-hero h1.a-h1 { font-size: 46px }
}
@media (max-width: 699px) {
  .a-hero .wrap { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; row-gap: 0; align-items: center }
  .a-hero .wrap > div { display: contents }
  .a-hero .portrait { grid-column: 1; grid-row: 1; width: 112px; max-width: none }
  .a-hero .portrait .frame { aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 4px var(--bone), 0 0 0 5.5px var(--night) }
  .a-hero .portrait img { object-position: 50% 16% }
  .a-hero .portrait figcaption { display: none }
  .a-hero .kicker { grid-column: 2; grid-row: 1; margin: 0 }
  .a-hero .kicker .sep { display: none }
  .a-hero .kicker .k2 { display: block; margin-top: 7px }
  .a-hero h1.a-h1 { grid-column: 1 / -1; grid-row: 2; margin-top: 24px }
  .a-hero .story { grid-column: 1 / -1; grid-row: 3; margin-top: 18px }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important; animation: none !important }
}

/* Cookie banner (4 Oct 2026). Sits above the tape; Accept and Reject carry equal weight. */
.ck { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); max-width: 520px; padding: 20px 20px 18px; background: var(--night); color: var(--bone); border: 1.5px solid var(--rule-n); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: 15px; line-height: 1.5 }
.ck[hidden], .ck [hidden] { display: none !important }
.ck-t { margin-bottom: 8px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-n) }
.ck a { color: var(--marker); text-underline-offset: 3px }
.ck-opts { display: grid; gap: 12px; margin-top: 14px }
.ck-opts label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer }
.ck-opts input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--marker) }
.ck-opts small { display: block; color: var(--cap-n); font-size: 13px; line-height: 1.45 }
.ck-b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px }
.ck .btn { flex: 1 1 110px; min-height: 44px; padding: 14px 18px 13px; font-size: 13px }
.ck .btn:hover { background: var(--bone); color: var(--night) }
.ck-l { flex: none; padding: 8px 4px; background: none; border: 0; color: var(--bone); font: 400 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.ck-open { padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
@media (min-width: 720px) { .ck { left: 24px; right: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px)) } }

/* Sign-up done state: check-your-inbox (5 Oct 2026) */
.signup.is-done > :not(.done) { display: none !important }
.signup .done b { font-weight: 700 }
.signup .done b[data-email] { overflow-wrap: anywhere }
.signup .done .again { padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.signup .done .junk { font-size: 14px; opacity: .78 }
.signup .done .hd { font: 800 22px/1.15 var(--f-display); letter-spacing: -.01em }
.signup .done .hl { color: var(--night); font-weight: 700 }
.signup .done .check-cta { margin-top: 6px }

/* Home: "Latest from Enzo", Enzo's latest Instagram reels (12 Oct, v2). Filled in by site.js; hidden until there are reels.
   Reels in view play silently on a loop; tapping one plays it with sound in place (full screen is in the controls).
   The strip scrolls sideways: 5 across on desktop, 3 on tablets, about 1.6 on phones. */
.feed .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: clamp(28px, 3vw, 44px) }
.feed .top h2 { font-size: clamp(40px, 5vw, 72px) }
.feed .top p { max-width: 34em; margin: 12px 0 0; color: var(--cap) }
.feed .follow { gap: 10px }
.feed .follow svg { width: 18px; height: 18px }
.strip { --gap: 16px; --per: 5; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px }
.strip::-webkit-scrollbar { display: none }
.strip .tile { display: grid; gap: 10px; align-content: start; scroll-snap-align: start; min-width: 0 }
.strip .th { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--night) }
.strip video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--night) }
.strip .tap { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: linear-gradient(180deg, rgba(21, 18, 15, 0) 70%, rgba(21, 18, 15, .45)); cursor: pointer }
.strip .tap svg { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; transition: transform .2s }
@media (hover: hover) { .strip .tap:hover svg { transform: scale(1.1) } }
.strip .tap:focus-visible { outline: 2px solid var(--marker); outline-offset: -2px }
.strip .tile.is-on .tap { display: none }
.strip .tile.is-on .th { box-shadow: 0 0 0 2px var(--marker) }
.strip .tile b { font: 700 16px/1.25 var(--f-display); letter-spacing: -.005em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden }
.strip .when { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 400 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cap) }
.strip .when a { color: var(--cap); text-decoration: underline; text-underline-offset: 2px }
.strip .when a:hover { color: var(--night) }
.feed-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px }
.feed-nav[hidden] { display: none }
.fnav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--night); background: transparent; color: var(--night); font: 800 13px/1 var(--f-display); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, opacity .2s }
.fnav svg { width: 14px; height: 14px }
@media (hover: hover) { .fnav:hover:not(:disabled) { background: var(--night); color: var(--bone) } }
.fnav:focus-visible { outline: 2px solid var(--night); outline-offset: 3px }
.fnav:disabled { opacity: .3; cursor: default }
.feed-nav .count { font: 400 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cap); text-align: center }
@media (max-width: 980px) { .strip { --per: 3; --gap: 12px } }
@media (max-width: 699px) { .strip { --per: 1.6 } .strip .tile b { font-size: 15px } }
@media (prefers-reduced-motion: reduce) { .strip .tap svg { transition: none } }
/* The player */
.reel-open { overflow: hidden }
.reel-dlg { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--bone) }
.reel-dlg[open] { display: grid; place-items: center }
.reel-dlg::backdrop { background: rgba(21, 18, 15, .96) }
.reel-box { display: grid; gap: 14px; width: min(400px, 88vw, calc((100dvh - 150px) * 9 / 16)) }
.reel-box video { display: block; width: 100%; aspect-ratio: 9 / 16; background: #000; object-fit: contain }
.reel-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase }
.reel-bar p { margin: 0; min-width: 0 }
.reel-bar a { color: var(--bone); white-space: nowrap }
.reel-x { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 48px; height: 48px; border: 0; background: transparent; color: var(--bone); font: 400 34px/1 var(--f-display); cursor: pointer }
.reel-x:focus-visible { outline: 2px solid var(--marker) }

/* Speaking: "Watch Enzo speak" (12 Oct, v2). The clip plays in place with the browser's own controls,
   including full screen. Arrows, swipe and the thumbnail strip move between clips (site.js). */
.c-hero .wrap.talks { padding-block: 0 clamp(28px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 clamp(20px, 2.5vw, 36px); align-items: start }
.talks .talks-hd { grid-column: 1 / -1 }
.talks .stage { grid-column: 1; grid-row: 2 }
.talks .stage-cap { grid-column: 1; grid-row: 3 }
.c-hero .wrap.sp-intro { padding-bottom: 36px }
.c-hero .wrap.sp-detail { padding-top: clamp(28px, 3vw, 40px) }
.sp-detail .topics { margin-top: 0 }
.talks-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; font: 400 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-n) }
.stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; touch-action: pan-y }
.stage .poster { position: absolute; inset: 0; display: block; color: var(--bone); text-decoration: none }
.stage .poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.stage .poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 18, 15, 0) 45%, rgba(21, 18, 15, .85)) }
.stage .ov { position: absolute; left: clamp(16px, 3vw, 40px); right: clamp(64px, 8vw, 96px); bottom: clamp(16px, 3vw, 36px); z-index: 2; display: flex; align-items: end; gap: clamp(14px, 2vw, 20px) }
.stage .bigplay { flex: none; width: clamp(52px, 6vw, 84px); height: clamp(52px, 6vw, 84px); border-radius: 50%; background: var(--marker); color: var(--night); display: grid; place-items: center; transition: transform .25s }
.stage .bigplay svg { width: 42%; height: 42%; margin-left: 6% }
.stage .poster:hover .bigplay { transform: scale(1.06) }
.stage .poster:hover img { transform: scale(1.02) }
.stage .poster:focus-visible { outline: 2px solid var(--marker); outline-offset: -2px }
.stage .ttl { display: block; font: italic 400 clamp(22px, 3.2vw, 46px)/1.1 var(--f-feel) }
.stage .meta { display: block; margin-top: 8px; font: 400 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cap-n) }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; display: none }
.stage.playing video { display: block }
.stage.playing .poster { display: none }
.snav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid rgba(237, 229, 212, .35); background: rgba(21, 18, 15, .6); color: var(--bone); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, opacity .2s }
.snav svg { width: 18px; height: 18px }
.snav:hover { background: rgba(21, 18, 15, .85) }
.snav:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px }
.snav.prev { left: 12px }
.snav.next { right: 12px }
.stage.playing .snav { opacity: .55 }
.stage.playing .snav:hover, .stage.playing .snav:focus-visible { opacity: 1 }
.stage-cap { display: none; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0 0 }
.stage-cap .t { font: italic 400 20px/1.2 var(--f-feel) }
.stage-cap .d { font: 400 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--cap-n) }
.talks.playing .stage-cap { display: flex }
.talks .more { list-style: none; margin: 0; padding: 0; grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 8px }
.talks .more a { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 14px; color: var(--bone); text-decoration: none }
.talks .more .th { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000 }
.talks .more .th img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s, opacity .2s; opacity: .8 }
.talks .more a:hover .th img, .talks .more a.is-on .th img { opacity: 1 }
.talks .more a:hover .th img { transform: scale(1.04) }
.talks .more .th i { position: absolute; right: 6px; bottom: 6px; font: 400 11px/1 var(--f-mono); font-style: normal; color: var(--bone); background: rgba(21, 18, 15, .8); padding: 4px 6px }
.talks .more a.is-on .th { box-shadow: inset 0 0 0 2px var(--marker) }
.talks .more a.is-on .th i { background: var(--marker); color: var(--night) }
.talks .more b { font: 700 15px/1.25 var(--f-display) }
.talks .more a.is-on b { color: var(--marker) }
.talks .more a:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px }
/* Tablets and phones: the strip scrolls sideways */
@media (max-width: 980px) {
  .c-hero .wrap.talks { display: block }
  .talks .more a { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px }
  .talks .more b { font-size: 14px }
  .talks .more { flex-direction: row; margin-top: 14px; display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 12px; padding-bottom: 8px; scrollbar-width: thin }
  .talks .more li { flex: 0 0 30%; scroll-snap-align: start }
}
@media (max-width: 699px) {
  .talks .more li { flex-basis: 46% }
  .snav { width: 40px; height: 40px; margin-top: -20px }
  .snav.prev { left: 8px }
  .snav.next { right: 8px }
  .stage .ov { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%) }
  .stage .ov .txt { display: none }
  .stage-cap { display: flex }
}
@media (prefers-reduced-motion: reduce) { .stage img, .talks .more img, .stage .bigplay { transition: none } .stage .poster:hover img, .talks .more a:hover img, .stage .poster:hover .bigplay { transform: none } }

/* /book download page */
.bk{text-align:center;max-width:460px;margin:0 auto}
.bk-cover{width:260px;max-width:70%;height:auto;display:block;margin:0 auto 28px;box-shadow:0 2px 18px rgba(21,18,15,.28)}
.bk h1.bk-h1{margin:0 0 26px;font-size:clamp(26px,4.2vw,40px);line-height:1.05;letter-spacing:-.01em}
.bk .ctas{justify-content:center}
.bk-fmt{margin:16px 0 0;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.65}

/* Book download page: no tape, tighter on phones so the button lands above the fold (22 Oct 2026) */
@media (max-width:700px){
.bk-page .wrap{padding-block:26px 44px}
.bk-page .bk-cover{width:188px;margin-bottom:18px}
.bk-page .bk h1.bk-h1{margin:0 0 18px;font-size:clamp(21px,5.6vw,27px)}
.bk-page .ctas{margin-top:18px}
.bk-page .bk-fmt{margin-top:12px}
}

/* Resources page: the real V9 cover image replaces the built mock-up (22 Oct 2026) */
.cover.real{padding:0;background:none}
.cover.real img{width:100%;height:100%;display:block;object-fit:cover}

/* Sign-up success: the junk-folder note was too quiet to be read (22 Oct 2026) */
.signup .done .junk{margin-top:12px;padding:14px 16px;background:var(--marker);color:var(--night);border:1.5px solid var(--night);font-size:16px;line-height:1.45;opacity:1}
.signup .done .junk b{display:block;font-weight:800;font-size:18px;line-height:1.2;margin-bottom:6px}

/* Homepage paths: the two buttons sat at different heights when one label wrapped (22 Oct 2026) */
.path{grid-template-rows:1fr auto;align-content:stretch}

/* Book page: mailing list sign-up under the download, all centred (23 Oct 2026) */
.bk-ml{margin:34px auto 0;padding-top:26px;border-top:1px solid rgba(21,18,15,.18);max-width:380px;text-align:center}
.bk-ml h2{font:800 21px/1.15 var(--f-display);letter-spacing:-.01em;margin:0 0 8px}
.bk-ml .bk-ml-lead{font-size:16px;line-height:1.45;margin:0 0 14px}
.bk-ml:has(.is-done) > h2,.bk-ml:has(.is-done) > .bk-ml-lead{display:none}
.bk-ml .signup{max-width:none;text-align:center}
.bk-ml .field label{text-align:center}
.bk-ml .field input{text-align:center}
.bk-ml .signup .fine{margin:2px 0 0}
.bk-ml .signup .done{text-align:center;padding:20px 18px 22px}
.bk-ml .signup .done p:first-child{font-size:21px}
.bk-ml .signup .done .junk{margin-top:6px}

/* Confirmed page: the contacts line is now a lime call-out so it is not overlooked (23 Oct 2026) */
.junk-note{margin:22px 0 0;max-width:34rem;padding:14px 16px;background:var(--marker);color:var(--night);border:1.5px solid var(--night);font-size:16px;line-height:1.45}
.junk-note b{display:block;font-weight:800;font-size:18px;line-height:1.2;margin-bottom:6px}
.junk-note span{font-weight:700}