/* Adam Cole. Fluid em scale: everything is sized in em off --size-font. */
:root {
  --color--dark: #000;
  --color--light: #fff;
  --color--gray: #c5c5c5;
  --color--green: #a7ff9c;
  --color--orange: #d9571c;
  --color--dark-20: color-mix(in srgb, var(--color--dark), transparent 80%);
  --color--dark-30: color-mix(in srgb, var(--color--dark), transparent 70%);
  --color--dark-40: color-mix(in srgb, var(--color--dark), transparent 60%);

  --size-unit: 16;
  --size-container-ideal: 1920;
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  --page-pad: .625em;
  --gap-xxs: .25em; --gap-xs: .5em; --gap-s: .75em; --gap-m: 1em; --gap-ml: 1.25em; --gap-l: 1.5em; --gap-xl: 2em;
  --col-pad: var(--gap-ml);
  --space-s: 1em; --space-sm: 2em; --space-m: 7.5em; --space-l: 10em; --space-xl: 15.625em; --space-xxl: 18.75em; --space-xxxl: 25em;
  --cta-height: 11.25em;
  

  --cubic-default: cubic-bezier(.625, .05, 0, 1);
  --animation-default: .7s var(--cubic-default);
  --animation-default-half: .35s var(--cubic-default);
}
@media (max-width: 991px) { :root { --size-container-ideal: 834; --size-container-min: 768px; --size-container-max: 991px; } }
@media (max-width: 767px) { :root { --size-container-ideal: 550; --size-container-min: 480px; --size-container-max: 767px; } }
@media (max-width: 479px) { :root { --size-container-ideal: 390; --size-container-min: 320px; --size-container-max: 479px; } }

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; min-height: 100%;
  background: var(--color--dark); color: var(--color--dark);
  font-family: "ABC Diatype Plus Variable", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; line-height: 1; font-size: var(--size-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
img.is-missing { visibility: hidden; }
[data-needs].is-off { display: none !important; }

/* Type */
.h-d { letter-spacing: -.05em; font-size: 12.5em; line-height: .8; }
.h-xl { letter-spacing: -.05em; font-size: 8em; line-height: .8; }
.h-l { letter-spacing: -.02em; font-size: 3em; line-height: .9; }
.h-m { letter-spacing: -.02em; font-size: 1.5em; line-height: .9; }
h3 { letter-spacing: -.02em; font-size: 1.5em; line-height: .9; }
.p-l { font-size: 1.125em; }
.p-r { font-size: 1em; line-height: 1.5; }
.p-s { font-size: .875em; }
.eyebrow { font-size: .75em; line-height: 1.2; }
.u-text-caps { text-transform: uppercase; }
.u-color-dark-40 { color: color-mix(in srgb, currentColor, transparent 45%); }
.u--clip { overflow: clip; }
.flex-v { display: flex; flex-flow: column; align-items: flex-start; }

/* Layout */
.main { background: var(--color--light); width: 100%; overflow-x: hidden; overflow: clip visible; }
.container { width: 100%; padding: 0 var(--page-pad); margin: 0 auto; }
.row { display: flex; flex-flow: wrap; margin: 0 calc(-1 * var(--col-pad)); }
.col { flex: 1; padding: 0 var(--col-pad); min-width: 0; }
.u-col-1 { flex: none; width: 12.5%; } .u-col-2 { flex: none; width: 25%; } .u-col-3 { flex: none; width: 37.5%; } .u-col-4 { flex: none; width: 50%; }
.section { width: 100%; padding: var(--space-s) 0; }
.section.u--clip { overflow: clip; }
.section.u--rel { position: relative; z-index: 1; }
.spacer.is--m { height: var(--space-m); } .spacer.is--l { height: var(--space-l); }
.spacer.is--xl { height: var(--space-xl); } .spacer.is--xxl { height: var(--space-xxl); }
[data-section-theme="gray"] { background: var(--color--gray); }
[data-section-theme="dark"] { background: var(--color--dark); color: var(--color--light); }

.section-top__start { display: flex; align-items: center; gap: var(--gap-xs); }
.square { aspect-ratio: 1; background: currentColor; width: 1.125em; flex: none; }
.section-top__p { max-width: 22em; }
.section-top__h { width: 100%; max-width: 32em; }
.section-top__h .h-m { font-size: 3em; }

.line-mask { overflow: clip; padding-bottom: .3em; margin-bottom: -.3em; }

/* Nav */
.nav { z-index: 100; position: fixed; inset: 0 0 auto; color: var(--color--dark); mix-blend-mode: difference; color: #fff; }
.nav-wrap { padding-top: var(--page-pad); transition: transform var(--animation-default-half); }
[data-scrolling-started="true"][data-scrolling-direction="down"] .nav-wrap { transform: translateY(-110%); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
.nav-logo { width: 2.25em; display: block; }
.nav-logo svg { width: 100%; display: block; }
.nav-end__list { display: flex; justify-content: flex-end; align-items: center; }
.nav-list { display: flex; gap: 5em; align-items: center; }
.nav-link { display: flex; align-items: center; margin: -.625em 0; padding: .625em 0; }
.nav-toggle, .nav-list__bg { display: none; }

/* Rolling-character hover (links, buttons) */
[data-button-text] { display: inline-block; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  [data-button-text] { clip-path: inset(8% 0% 5% 0%); }
  .button-char { display: inline-block; white-space: pre; text-shadow: 0 1.25em currentColor; transition: translate .3s var(--cubic-default); }
  [data-button]:is(:hover, :focus-visible) .button-char,
  [data-hover]:is(:hover, :focus-visible) [data-button] .button-char {
    translate: 0 -1.25em 0;
    transition: translate .5s calc((var(--char) - 1) * .02s) var(--cubic-default);
  }
}
.text-link { display: inline-block; padding: .05em 0; overflow: clip; }
[data-underline-link] { position: relative; }
[data-underline-link]::before { content: ""; position: absolute; bottom: -.0625em; left: 0; width: 100%; height: .0625em; background: currentColor; transform-origin: right; transform: scaleX(0); transition: transform .735s var(--cubic-default); }
@media (hover: hover) { [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1); } }
a.is-unset { cursor: default; }

/* Bordered CTA button with rising fill */
.button { width: 100%; height: var(--cta-height); border: 1px solid; display: flex; justify-content: center; align-items: center; position: relative; overflow: clip; text-align: center; }
.button span { position: relative; z-index: 1; }
.button::after { content: ""; position: absolute; inset: 0 -1em -2em; background: var(--color--dark); transform: scaleY(0) skew(0, -5deg); transform-origin: bottom center; transition: transform var(--animation-default); }
[data-section-theme="dark"] .button::after { background: var(--color--light); }
@media (hover: hover) and (pointer: fine) {
  .button:is(:hover, :focus-visible)::after { transform: scale(1) skew(0); }
  .button:is(:hover, :focus-visible) { color: var(--color--light); }
  .button:is(:hover, :focus-visible) [data-button-text] { color: var(--color--light); }
}
.button { transition: color .3s .1s; }

/* Hero */
.js [data-home-hero] .home-hero { opacity: 0; }
.home-hero { padding-bottom: var(--page-pad); height: calc(100svh - var(--space-s)); min-height: 34em; display: flex; flex-flow: column; justify-content: space-between; position: relative; }
.home-hero__center { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; }
.home-hero__inner { white-space: nowrap; }
.home-hero h1 { display: flex; align-items: center; justify-content: center; gap: .2em; }
.h-d__span { display: inline-block; }
.home-hero__btm { margin-top: var(--gap-xl); }
.home-hero__btm-start { display: flex; gap: var(--gap-s); align-items: flex-end; }
.home-hero__btm-end { display: flex; justify-content: flex-end; align-items: flex-start; }
.home-hero__p { max-width: 22em; line-height: 1.05; }
.eq__wrap { display: flex; gap: .125em; align-items: stretch; height: 1.5em; padding-bottom: .1875em; }
.eq__bar { background: currentColor; width: .1875em; transform-origin: 50% 100%; transform: scaleY(.15); }
.sound-button__wrap { display: flex; flex-flow: column; gap: .5em; align-items: flex-end; height: 1.25em; overflow: clip; }
.sound-button { transition: transform var(--animation-default-half); }
[data-sound="on"] .sound-button { transform: translateY(calc(-100% - .5em)); }

/* Grid headline */

/* Marquees */
.marquee { width: 100%; overflow: hidden; display: flex; }
.marquee__track { display: flex; flex: none; will-change: transform; }
.marquee__list { display: flex; flex: none; align-items: center; }
.marquee.is--platforms { margin: calc(-1 * var(--space-s)) 0; padding: 4em 0; }
.marquee.is--platforms .marquee__item { flex: none; margin-right: 20em; display: flex; align-items: center; height: 3em; }

/* Full-bleed media with parallax */
.media { color: var(--color--light); position: relative; overflow: hidden; container-type: inline-size; }
.media-w { z-index: 1; background: var(--color--dark-20); width: 100%; position: relative; overflow: hidden; }
.media-w.is--wide { aspect-ratio: 15 / 8; }
.media-w.is--tall { aspect-ratio: 6 / 5; }
.media-w.is--square { aspect-ratio: 1; }
.media-inner { width: 100%; height: 114%; position: absolute; top: 0; left: 0; will-change: transform; }
.img, .cover { object-fit: cover; width: 100%; height: 100%; }
.section-overlay { z-index: 2; padding-top: var(--space-s); position: absolute; inset: 0 0 auto; }
.section-overlay__btm { z-index: 1; position: absolute; inset: auto 0 0; pointer-events: none; }
.overlay-nr { display: block; letter-spacing: -.06em; font-size: 44.5cqi; font-weight: 400; line-height: .8; margin-bottom: -.12em; white-space: nowrap; }

/* Pixelated scroll transition */
.pixelated-scroll-transition { z-index: 10; pointer-events: none; color: var(--color--dark); position: absolute; inset: auto 0 0; }
.pixelated-scroll-transition[data-theme="gray"] { color: var(--color--gray); }
[data-pixelated-scroll-panel] { display: flex; width: 100%; }
[data-pixelated-scroll-column] { display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 0%; min-width: 0; }
[data-pixelated-scroll-pixel] { aspect-ratio: 1; width: 100%; background: currentColor; margin: -.5px 0; }

/* Lessons (feature block with spinning disc) */
.album-feature__top { width: 100%; padding-bottom: var(--gap-l); border-bottom: 1px solid currentColor; display: flex; justify-content: space-between; align-items: center; }
.album-feature__top-bar { width: calc(75% - 2 * var(--col-pad)); }
.album-feature__top-list { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: calc(2 * var(--col-pad)); justify-items: start; }
.album-feature__top-btn { padding: .1em 0; overflow: clip; transition: opacity var(--animation-default-half); }
.album-feature__top-btn:not([data-active]) { opacity: .3; }
.album-feature__top-btn:hover { opacity: 1; }
.link { display: flex; gap: var(--gap-ml); align-items: center; }
.icon-w { flex: none; width: 1.5em; display: block; }
.icon-w svg { width: 100%; display: block; }
.row.is--feature { margin-top: 0; }
.album-feature__visual-list { aspect-ratio: 1; width: 100%; display: grid; position: relative; place-items: center; overflow: hidden; background: #000; }
.album-feature__visual-inner { z-index: 2; border: 1px solid #555; border-radius: 100em; width: 90%; height: 90%; display: flex; justify-content: center; align-items: center; position: absolute; overflow: hidden; background: #777; }
.album-feature__visual-inner-bg { aspect-ratio: 1; width: 100%; position: absolute; filter: var(--photo-tone); }
[data-spin] { animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.album-feature__visual-center { z-index: 3; background: var(--color--gray); border-radius: 100em; width: 5em; height: 5em; position: absolute; }
.album-feature__info-list { width: 100%; height: 100%; display: grid; position: relative; }
.album-feature__info-item { padding-top: var(--gap-xl); grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; }
.album-feature__info-item[data-active] { opacity: 1; visibility: visible; pointer-events: auto; }
.album-feature__info-inner { display: flex; flex-flow: column; justify-content: space-between; align-items: flex-start; height: 100%; gap: 3em; }
.album-feature__info-center { display: flex; flex-flow: column; gap: var(--gap-xxs); width: 100%; max-width: 22em; line-height: 1.05; }
.album-feature__info-end { width: 100%; display: flex; }
.album-feature__info-end .button:nth-of-type(2) { border-left: none; }

/* Gigs table */
.tour-dates { padding: var(--space-s) 0 var(--page-pad); }
.tour-dates__item-bg { opacity: 0; background: #000; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--page-pad)); right: calc(-1 * var(--page-pad)); transition: opacity .2s ease; pointer-events: none; }
[data-hover]:hover + .tour-dates__item-bg { opacity: .1; }

/* Gallery: dropping stack */
.dropping-stack { margin-top: var(--gap-xl); display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; }
.dropping-stack__collection { z-index: 1; padding-top: 17.5em; position: relative; }
.dropping-stack__list { perspective: 100em; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; position: relative; height: 37.5em; width: 30em; }
.dropping-stack__item { will-change: transform, opacity; user-select: none; position: absolute; inset: 0; transform-style: preserve-3d; cursor: pointer; }
.dropping-stack__inner { height: 100%; width: 100%; background: #9b9b9b; overflow: hidden; }
.dropping-stack__inner img { filter: var(--photo-tone); }
.dropping-stack__controls { z-index: 0; display: flex; justify-content: space-between; align-items: center; position: absolute; left: 0; right: 0; top: 50%; }
.dropping-stack__count { display: flex; height: 1.5em; overflow: clip; font-variant-numeric: tabular-nums; }
.dropping-stack__buttons { display: flex; gap: var(--gap-ml); align-items: center; }
.dropping-stack__spacer { height: 17.5em; }
.roll { display: inline-block; }

/* Videos */
.archive-inner__grid { display: grid; column-gap: calc(2 * var(--col-pad)); grid-template-rows: auto 1fr; grid-template-columns: 1fr 1fr; width: 100%; }
.h-d.is--archive__count { display: inline-flex; overflow: clip; font-variant-numeric: tabular-nums; padding-bottom: .08em; }
.archive-inner__grid-main { grid-area: 1 / 2 / span 2; }
.archive-inner__main-item { display: flex; flex-flow: column; gap: var(--gap-m); justify-content: space-between; height: 100%; }
.archive-inner__main-p { max-width: 20em; line-height: 1.05; }
.archive-inner__main-visual { aspect-ratio: 1.77; width: 100%; display: block; position: relative; background: #1c1c1c; overflow: hidden; }
.archive-inner__grid-sub { display: flex; flex-flow: column; justify-content: flex-end; }
.archive-inner__sub-i { opacity: .3; max-width: 22em; line-height: 1.05; }
.archive-inner__strip { width: 100%; margin-top: 6.25em; }
.archive-inner__strip-list { display: flex; gap: 2em; align-items: flex-end; flex-wrap: wrap; }
.archive-inner__strip-trigger { width: 6.875em; display: flex; flex-flow: column; gap: .625em; align-items: flex-start; }
.archive-inner__strip-trigger img, .archive-inner__strip-trigger span { opacity: .3; transition: opacity var(--animation-default-half); }
.archive-inner__strip-trigger[data-active] img, .archive-inner__strip-trigger[data-active] span, .archive-inner__strip-trigger:hover img { opacity: 1; }
.archive-inner__strip-trigger img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Contact */
.newsletter { padding: var(--space-s) 0 var(--page-pad); }
.cta-note { margin-top: var(--gap-m); padding-bottom: var(--space-m); }

/* Footer */
.footer { position: relative; overflow: hidden; background: var(--color--dark); color: var(--color--light); }
.footer-wrap { z-index: 1; will-change: transform; position: relative; }
.footer-inner { padding-top: var(--space-xxl); padding-bottom: var(--space-s); }
.footer-content.row { align-items: flex-end; }
.footer-links__grid { display: grid; column-gap: calc(var(--col-pad) * 2); grid-template-columns: repeat(4, 1fr); width: 100%; }
.footer-links { margin-top: var(--gap-m); display: flex; flex-flow: column; align-items: flex-start; }
.footer-end { display: flex; gap: var(--gap-s); justify-content: flex-end; align-items: center; text-align: right; }
.footer-end .p-r { line-height: 1.2; }
.footer-end__logo { width: 2.25em; flex: none; }
.footer-overlay { z-index: 2; background: var(--color--dark); opacity: 0; pointer-events: none; position: absolute; inset: 0; }

/* Tablet */
@media (max-width: 991px) {
  .u-col-md-4 { width: 50%; }
  .nav-list { gap: 2.2em; }
  .album-feature__top-bar { width: 100%; }
}

/* Mobile */
@media (max-width: 991px) {
  .u-sm-hide, .u-hide-sm { display: none !important; }
  .section-top.row { row-gap: 1.25em; }
  .section-top .u-col-4, .section-top .u-col-2, .section-top .u-col-md-4 { width: 100%; }
  .section-top__p { max-width: 90%; }
  .section-top__h .h-m { font-size: 2.2em; }
  .spacer.is--xl { height: 5em; } .spacer.is--xxl { height: 6em; } .spacer.is--l { height: 4em; } .spacer.is--m { height: 2em; }

  .nav { mix-blend-mode: normal; color: var(--color--dark); }
  .nav-toggle { z-index: 2; background: currentColor; border-radius: 10em; width: 2em; height: 2em; display: block; position: relative; mix-blend-mode: difference; background: #fff; }
  .nav-end__list { position: fixed; inset: 0; height: 100dvh; padding: 5em var(--page-pad) 2em; align-items: flex-end; justify-content: flex-start; color: var(--color--light); visibility: hidden; pointer-events: none; }
  .nav-list { position: relative; z-index: 1; flex-flow: column; align-items: flex-start; gap: .2em; }
  .nav-link { margin: 0; padding: 0; font-size: 4em; letter-spacing: -.04em; overflow: clip; }
  .nav-link .p-r { line-height: 1; transform: translateY(110%); transition: transform .6s var(--cubic-default); }
  .nav-list__bg { z-index: 0; background: var(--color--dark); display: block; position: absolute; inset: 0; transform: scaleY(0); transform-origin: top; transition: transform .6s var(--cubic-default); }
  [data-nav-status="open"] .nav-end__list { visibility: visible; pointer-events: auto; }
  [data-nav-status="open"] .nav-list__bg { transform: scaleY(1); }
  [data-nav-status="open"] .nav-link .p-r { transform: none; }
  [data-nav-status="open"] .nav-wrap { transform: none !important; }

  .home-hero h1 { flex-flow: column; align-items: flex-start; gap: 0; font-size: 6.4em; line-height: .84; }
  .home-hero__inner { width: 100%; }
  .home-hero__btm .row { row-gap: 1.25em; }
  .home-hero__btm .col { flex: none; width: 100%; }
  .home-hero__btm .u-col-4 { width: 60%; } .home-hero__btm .col:last-child { width: 40%; order: 2; }
  .home-hero__btm .hero-p-col { order: 3; width: 100%; }

  .marquee.is--platforms .marquee__item { margin-right: 8em; }
  .media-w.is--wide { aspect-ratio: 3 / 4; } .media-w.is--tall { aspect-ratio: 1; }

  .row.is--feature { row-gap: 0; }
  .row.is--feature > .col { flex: none; width: 100%; }
  .album-feature__info-inner { gap: 2em; }
  .album-feature__info-end { flex-flow: column; margin-top: 2em; }
  .album-feature__info-end .button:nth-of-type(2) { border-left: 1px solid currentColor; border-top: none; }
  :root { --cta-height: 6.5em; }


  .dropping-stack__collection { padding-top: 10em; }
  .dropping-stack__list { height: 24em; width: 19.2em; }
  .dropping-stack__controls { position: relative; top: auto; width: 100%; margin-top: 3em; }
  .dropping-stack__spacer { height: var(--page-pad); }

  .archive-inner__grid { grid-template-columns: 1fr; row-gap: 2em; }
  .archive-inner__grid-main { grid-area: auto; }
  .h-d.is--archive__count { font-size: 8.8em; }

  .footer-inner { padding-top: 4em; }
  .footer-content.row { row-gap: 5em; }
  .footer-content .u-col-4 { width: 100%; }
  .footer-links__grid { display: flex; gap: 5em; }
  .footer-end { justify-content: flex-start; text-align: left; flex-direction: row-reverse; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  [data-spin] { animation: none; }
  [data-home-hero] .home-hero { opacity: 1; }
}

/* Dark sections: photo shows as is, hovers invert */
[data-section-theme="dark"] .tour-dates__item-bg { background: #fff; }
[data-section-theme="dark"] [data-hover]:hover + .tour-dates__item-bg { opacity: .12; }
@media (hover: hover) and (pointer: fine) {
  [data-section-theme="dark"] .button:is(:hover, :focus-visible),
  [data-section-theme="dark"] .button:is(:hover, :focus-visible) [data-button-text] { color: var(--color--dark); }
}

/* Gigs: headline, options beside the photo, one big booking button */
.spacer.is--sm { height: var(--space-sm); }
.gigs-h { white-space: nowrap; margin-bottom: .2em; }
.gigs-row { align-items: stretch; }
.gigs-list { height: 100%; display: flex; flex-flow: column; border-top: 1px solid currentColor; }
.gigs-item { flex: 1; position: relative; border-bottom: 1px solid currentColor; display: flex; }
.gigs-item__inner { z-index: 1; position: relative; width: 100%; display: grid; grid-template-columns: 4.5em 1fr auto; column-gap: var(--gap-m); align-items: start; padding: 1.25em 0 1.5em; }
.gigs-item__no { padding-top: .35em; }
.gigs-item__main { display: flex; flex-flow: column; gap: .6em; height: 100%; justify-content: space-between; }
.gigs-item__title { font-size: 2.5em; letter-spacing: -.03em; line-height: .95; max-width: 11em; }
.gigs-item__detail { color: color-mix(in srgb, currentColor, transparent 45%); }
.gigs-item__cta { padding-top: .35em; }
.button.is--big { height: 15em; }
.button.is--big .h-l { text-transform: none; line-height: 1.25; clip-path: none; overflow: clip; }
@media (max-width: 991px) {
  .gigs-h { font-size: 4.2em; white-space: normal; }
  .gigs-row { flex-flow: column-reverse; row-gap: 2em; }
  .gigs-row > .col { flex: none; width: 100%; }
  .gigs-item__inner { grid-template-columns: 2.5em 1fr auto; padding: 1.1em 0 1.3em; }
  .gigs-item__title { font-size: 1.9em; }
  .button.is--big { height: 9em; }
  .button.is--big .h-l { font-size: 2em; }
}

/* Lessons record: the photo's own backdrop, blurred, sits behind the disc */
.album-feature__visual-blur { position: absolute; inset: -12%; z-index: 0; }
.album-feature__visual-blur img { width: 100%; height: 100%; object-fit: cover; }
.album-feature__visual-inner { box-shadow: 0 1.5em 4em rgba(0, 0, 0, .55); border-color: #6a6a6a; }

/* Social logos in the scrolling strip (optically matched heights) */
.marquee__logo { height: 2em; width: auto; max-width: none; object-fit: contain; }
.marquee__logo.is--youtube { height: 1.9em; }
.marquee__logo.is--tiktok { height: 2.1em; }
.marquee__logo.is--instagram { height: 2.3em; }
.marquee__logo.is--skool { height: 2.1em; }

.img.is--top { object-position: 50% 0; }

/* One warm monochrome tone for every photo, whatever the source file looks like */
:root { --photo-tone: none; } /* the warm tone is baked into the files in assets/t/ */

[data-section-theme="light"] { background: var(--color--light); }

/* Fretboard headline: two guitar necks, the frets slide past as you scroll */
.fb-wrap { margin-top: 3.5em; }
.fb { display: block; position: relative; height: 15em; overflow-x: clip; overflow-y: visible; }
.fb__strings { position: absolute; inset: 0; display: flex; flex-flow: column; justify-content: space-between; pointer-events: none; z-index: 1; }
.fb__strings i { display: block; background: var(--color--dark); height: 1px; }
.fb__strings i:nth-child(4) { height: 1.5px; } .fb__strings i:nth-child(5) { height: 2px; } .fb__strings i:nth-child(6) { height: 3px; }
.fb__track { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.fb__fret { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color--dark); }
.fb__fret.is--nut { width: .7em; }
.fb__no { position: absolute; top: -1.6em; font-size: 1.125em; transform: translateX(-50%); }
.fb__dot { position: absolute; width: 3.4em; aspect-ratio: 1; border-radius: 100em; background: var(--color--dark); transform: translate(-50%, -50%); top: 50%; }
.fb__dot.is--hi { top: 30%; } .fb__dot.is--lo { top: 70%; }
.fb__text { position: absolute; z-index: 2; left: -.04em; top: 50%; transform: translateY(-52%); white-space: nowrap; text-shadow: 0.080em 0.000em 0 var(--color--light), 0.074em 0.031em 0 var(--color--light), 0.057em 0.057em 0 var(--color--light), 0.031em 0.074em 0 var(--color--light), 0.000em 0.080em 0 var(--color--light), -0.031em 0.074em 0 var(--color--light), -0.057em 0.057em 0 var(--color--light), -0.074em 0.031em 0 var(--color--light), -0.080em 0.000em 0 var(--color--light), -0.074em -0.031em 0 var(--color--light), -0.057em -0.057em 0 var(--color--light), -0.031em -0.074em 0 var(--color--light), -0.000em -0.080em 0 var(--color--light), 0.031em -0.074em 0 var(--color--light), 0.057em -0.057em 0 var(--color--light), 0.074em -0.031em 0 var(--color--light); }
.fb-or { padding: .6em 0 1.5em; }
@media (hover: hover) { .fb__text { transition: letter-spacing .5s var(--cubic-default); } .fb:hover .fb__text { letter-spacing: -.035em; } }
@media (max-width: 991px) {
  .fb { height: 9.5em; }
  .fb__text { font-size: 4.3em; }
  .fb__dot { width: 2.2em; }
}

.pixelated-scroll-transition[data-theme="light"] { color: var(--color--light); }
[data-section-theme="light"] .album-feature__visual-center { background: var(--color--light); }

/* Contact: the three ways to reach him, each on its own neck */
.fb-wrap.is--stack { margin-top: 0; }
.fb-wrap.is--stack .fb { margin-top: 4em; }
.fb-wrap.is--stack + .cta-note { margin-top: var(--gap-xl); }

.fb__dotclip { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Arrow button on each neck */
.fb__go { position: absolute; z-index: 3; right: 1.2em; top: 50%; width: 6.5em; aspect-ratio: 1; margin-top: -3.25em; border-radius: 100em; background: var(--color--dark); color: var(--color--light); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .7em var(--color--light); transition: transform .5s var(--cubic-default), background-color .3s, color .3s; }
.fb__go svg { width: 42%; display: block; transition: transform .5s var(--cubic-default); }
.fb__go.is--down svg { transform: rotate(90deg); }
@media (hover: hover) {
  .fb:hover .fb__go { transform: scale(1.12); }
  .fb:hover .fb__go svg { transform: translateX(14%); }
  .fb:hover .fb__go.is--down svg { transform: rotate(90deg) translateX(14%); }
}
@media (max-width: 991px) { .fb__go { width: 3.6em; margin-top: -1.8em; right: .4em; box-shadow: 0 0 0 .4em var(--color--light); } }

/* Phone: long neck labels wrap onto two lines and stop short of the arrow button */
@media (max-width: 991px) {
  .fb { height: 10em; }
  .fb__text { font-size: 3.9em; line-height: .88; white-space: normal; max-width: calc(100% - 1.3em); transform: translateY(-50%); }
}

/* Photo tone on full-width and section photos (this rule was dropped by mistake during the chord strip removal) */
.img.is--bw { filter: none; }

/* Phone fixes */
@media (max-width: 991px) {
  .nav-toggle { mix-blend-mode: normal; background: var(--color--dark); }
  [data-nav-status="open"] .nav-toggle { background: var(--color--light); }
  [data-nav-status="open"] .nav-logo { color: var(--color--light); position: relative; z-index: 2; }
  .home-hero h1 { font-size: 5.7em; }
}

@media (max-width: 991px) { .nav-link { padding-bottom: .16em; margin-bottom: -.1em; } }

/* Phone header inverts over whatever is behind it, like desktop. The open menu uses its own colours. */
@media (max-width: 991px) {
  .nav[data-nav-status="closed"] { mix-blend-mode: normal; color: var(--color--dark); transition: color .25s; }
  .nav[data-nav-status="closed"][data-on="dark"] { color: var(--color--light); }
  .nav[data-nav-status="closed"] .nav-toggle { background: currentColor; transition: background-color .25s; }
  .nav:not([data-nav-status="closed"]) { mix-blend-mode: normal; color: var(--color--light); }
  .nav:not([data-nav-status="closed"]) .nav-toggle { background: var(--color--light); }
  .nav:not([data-nav-status="closed"]) .nav-logo { color: var(--color--light); position: relative; z-index: 2; }
}

/* Phone menu links: room for letter tails (the hover clip used on desktop links was cutting them) */
@media (max-width: 991px) {
  .nav-link { overflow: clip; padding: 0 0 .04em; margin: 0; }
  .nav-link .p-r, .nav-link [data-button-text] { clip-path: none; line-height: 1.16; }
  .nav-link .button-char { text-shadow: none; }
  .nav-toggle { z-index: 3; }
}




/* ---------- Accessibility helpers ---------- */
.u-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--page-pad); top: -4em; z-index: 200; background: var(--color--dark); color: var(--color--light); padding: .8em 1.1em; font-size: 1.1em; }
.skip-link:focus { top: var(--page-pad); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* "More" text links into the detail pages */
.link-more { display: inline-flex; align-items: center; gap: .6em; margin-top: 1.2em; border-bottom: 1px solid currentColor; padding-bottom: .15em; }
.link-more svg { width: 1.4em; display: block; transition: transform .5s var(--cubic-default); }
@media (hover: hover) { .link-more:hover svg { transform: translateX(.3em); } }
.gigs-h + .link-more { margin-top: 0; margin-bottom: .4em; }

/* ---------- Detail pages (guitar lessons, live music) ---------- */
.page-hero { padding-top: 9em; padding-bottom: 4em; }
.page-hero__crumbs { display: flex; gap: .5em; margin-bottom: 2.5em; }
.page-hero__crumbs a { border-bottom: 1px solid currentColor; }
.page-hero h1 { font-size: 8em; letter-spacing: -.05em; line-height: .86; max-width: 11em; }
.page-hero__intro { margin-top: 3em; max-width: 34em; font-size: 1.6em; line-height: 1.2; letter-spacing: -.01em; }
.page-hero__meta { margin-top: 2.5em; display: flex; flex-wrap: wrap; gap: .6em 2.4em; }
.page-photo { margin-top: 1em; }
.page-photo .media-w { aspect-ratio: 16 / 7; }

.block { padding: 6em 0 0; }
.block__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(2 * var(--col-pad)); border-top: 1px solid currentColor; padding-top: 1.2em; }
.block__label { display: flex; align-items: flex-start; gap: var(--gap-xs); }
.block__label .square { margin-top: .2em; }
.block__body { display: flex; flex-flow: column; gap: 1.1em; max-width: 36em; }
.block__body h3 { font-size: 2.6em; letter-spacing: -.03em; line-height: .95; margin-bottom: .2em; }
.block__body p, .block__body li { font-size: 1.25em; line-height: 1.32; font-weight: 400; }
.block__body strong { font-weight: 700; }
.block__body ul { display: flex; flex-flow: column; gap: .5em; }
.block__body li { padding-left: 1.2em; position: relative; }
.block__body li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45em; height: .45em; border-radius: 100em; background: currentColor; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid currentColor; margin-top: 1.2em; }
.cards.is--4 { grid-template-columns: repeat(2, 1fr); }
.card { padding: 1.4em var(--col-pad) 2.4em 0; border-bottom: 1px solid currentColor; display: flex; flex-flow: column; gap: .9em; }
.card + .card { padding-left: var(--col-pad); border-left: 1px solid currentColor; }
.cards.is--4 .card:nth-child(3) { padding-left: 0; border-left: 0; }
.card__no { font-size: .875em; }
.card h3 { font-size: 3em; letter-spacing: -.04em; line-height: .9; }
.card p { font-size: 1.2em; line-height: 1.3; font-weight: 400; max-width: 26em; }

.faq { border-top: 1px solid currentColor; margin-top: 1.2em; }
.faq__item { border-bottom: 1px solid currentColor; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 2em; padding: 1.3em 0; font-size: 2em; letter-spacing: -.03em; line-height: 1; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-weight: 400; font-size: 1.2em; line-height: .8; transition: transform .4s var(--cubic-default); flex: none; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 1.8em; max-width: 46em; }
.faq__answer p { font-size: 1.25em; line-height: 1.35; font-weight: 400; }
.faq__answer p + p { margin-top: .7em; }

.areas { display: flex; flex-wrap: wrap; gap: .4em 1.6em; }
.areas li { font-size: 2.2em; letter-spacing: -.03em; line-height: 1; }
.areas li::before { display: none; }

@media (max-width: 991px) {
  .page-hero { padding-top: 6.5em; padding-bottom: 2.5em; }
  .page-hero h1 { font-size: 3.6em; }
  .page-hero__intro { font-size: 1.3em; }
  .page-photo .media-w { aspect-ratio: 4 / 3; }
  .block { padding-top: 4em; }
  .block__grid { grid-template-columns: 1fr; row-gap: 1.6em; }
  .block__body h3 { font-size: 2em; }
  .cards, .cards.is--4 { grid-template-columns: 1fr; }
  .card, .card + .card, .cards.is--4 .card:nth-child(3) { padding-left: 0; border-left: 0; }
  .card h3 { font-size: 2.4em; }
  .faq__item summary { font-size: 1.45em; }
  .areas li { font-size: 1.7em; }
}

/* Header comes back when a keyboard user tabs into it */
.nav:focus-within .nav-wrap { transform: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- Booking page and enquiry form (one narrow column) ---------- */
.book { padding: 8.5em 0 6em; }
.book__wrap { max-width: 36em; margin: 0 auto; }
.book .page-hero__crumbs { margin-bottom: 2em; }
.book__h { font-size: 4.6em; letter-spacing: -.05em; line-height: .9; }
.book__intro { margin-top: 1em; font-size: 1.35em; line-height: 1.3; font-weight: 400; color: color-mix(in srgb, currentColor, transparent 35%); }
.book__alt { margin-top: 2.4em; font-weight: 400; }
.book__alt a { border-bottom: 1px solid currentColor; font-weight: 700; }
.book__alt a.is-unset { display: none; }

.enq { display: flex; flex-flow: column; gap: 1.6em; margin-top: 2.6em; }
.enq fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.enq__label { display: block; font-size: .9em; margin-bottom: .55em; }
.enq__label i { font-style: normal; font-weight: 400; color: color-mix(in srgb, currentColor, transparent 45%); }
.enq__grid { display: flex; flex-flow: column; gap: 1.6em; }
.field { display: block; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-weight: 400; font-size: 1.15em; color: inherit; background: var(--color--light); border: 1px solid color-mix(in srgb, currentColor, transparent 70%); border-radius: .35em; padding: .75em .85em; -webkit-appearance: none; appearance: none; transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 5.5em; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15em) 52%, calc(100% - .85em) 52%; background-size: .3em .3em; background-repeat: no-repeat; padding-right: 2.2em; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, currentColor, transparent 60%); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.field.is--invalid input, .field.is--invalid select { border-color: #c0261b; box-shadow: 0 0 0 1px #c0261b; }
.chips { display: flex; flex-wrap: wrap; gap: .5em; }
.chips.is--cards { display: grid; grid-template-columns: 1fr 1fr; }
.chip { position: relative; cursor: pointer; display: flex; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; width: 100%; border: 1px solid color-mix(in srgb, currentColor, transparent 70%); border-radius: .35em; padding: .7em .9em; font-size: 1.05em; transition: background-color .2s, color .2s, border-color .2s; }
.chips.is--cards .chip span { min-height: 3.4em; font-size: 1.1em; }
.chip input:checked + span { background: var(--color--dark); color: var(--color--light); border-color: var(--color--dark); }
.chip input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.enq__row.is--invalid .chip span { border-color: #c0261b; }
.enq__group { display: flex; flex-flow: column; gap: 1.6em; }
.js .enq__group:not(.is--on), .js .enq [data-for].field:not(.is--on) { display: none; }
.enq__consent { display: flex; gap: .7em; align-items: flex-start; font-size: .95em; line-height: 1.4; font-weight: 400; cursor: pointer; }
.enq__consent input { width: 1.15em; height: 1.15em; margin-top: .1em; flex: none; accent-color: #000; }
.enq__end { display: flex; flex-flow: column; gap: .8em; }
.enq__submit { width: 100%; height: 3.8em; border: 0; border-radius: .35em; background: var(--color--dark); color: var(--color--light); font: inherit; font-size: 1.2em; cursor: pointer; }
.enq__submit::after { display: none; }
@media (hover: hover) { .enq__submit:hover { background: #2a2a2a; } }
.enq__submit[disabled] { opacity: .5; cursor: wait; }
.enq__status { min-height: 1.2em; font-size: 1em; }
.enq__status.is--error { color: #c0261b; }
.enq__note { color: color-mix(in srgb, currentColor, transparent 45%); font-weight: 400; }
.enq__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq__thanks { margin-top: 2.6em; border-top: 1px solid currentColor; padding-top: 2em; }
.enq__thanks h2 { font-size: 3.4em; letter-spacing: -.05em; line-height: .9; }
.enq__thanks p { font-size: 1.3em; line-height: 1.3; font-weight: 400; margin-top: .8em; }
.enq__thanks a { display: inline-block; margin-top: 1.4em; border-bottom: 1px solid currentColor; }
.enq__or { margin-top: 6em; }
@media (max-width: 991px) {
  .book { padding-top: 6.5em; }
  .book__h { font-size: 3em; }
  .field input, .field select, .field textarea { font-size: 16px; } /* 16px stops iPhones zooming in on tap */
  .chips.is--cards .chip span { font-size: 1em; }
  .enq__or { margin-top: 4em; }
}