/* ============================================================
TROY DOWNWARD, THEME STYLESHEET
One file, one request. Every class is prefixed td- so nothing can
collide with a plugin's styles.
Brand tokens are his own, verified against the live site:
gold #F2B927 on blue black #0A0E14.
Display face is Outfit, body face is Inter, both self hosted from
assets/fonts so the page makes no third party connection.
Section order matches the template parts in /template-parts.
============================================================ */
/* ---------- TYPEFACES, self hosted ----------
Outfit is the face the client approved in the first draft and explicitly
asked us to keep ("you don't have to use the same text font that is on my
site currently, I like yours better"). Free under the SIL Open Font Licence.
His live site uses Dharma Gothic E, a commercial Dharma Type family with no
web licence and only desktop TTFs in the media library, so it is not an
option and is not used anywhere here.
Served from the theme rather than fonts.googleapis.com: it removes two third
party connections from the critical path. @font-face declarations are in
assets/css/fonts.css, printed inline in the head by td_print_font_faces()
in functions.php. */
/* ---------- DESIGN TOKENS, the live site's own values ---------- */
:root{
--td-bg: #0A0E14;
--td-surface: #0F151C;
--td-surface-2: #141B24;
--td-text: #F5F3EE;
--td-white: #FFFFFF;
--td-muted: #86888A;
--td-dim: #565C64;
--td-gold: #F2B927;
--td-gold-hi: #FFD75E;
--td-gold-deep: #B8891A;
--td-line: rgba(242,185,39,.14);
--td-line-2: rgba(242,185,39,.30);
--td-hair: rgba(245,243,238,.08);
--td-wrap: 1300px;
--td-pad: clamp(20px, 5vw, 56px);
--td-sect: clamp(84px, 11vw, 150px);
/* Outfit, the face the client approved in the very first draft. Free under
the SIL OFL, upright, and wider than a condensed face, which is what
"more lined up like the original" reads as. */
--td-display: 'Outfit', 'Outfit Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
--td-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
--td-slant: 0deg; /* the first draft had no slant, letters stand upright */
--td-ease: cubic-bezier(.22,.61,.36,1);
--td-out: cubic-bezier(.16,1,.3,1);
}
/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--td-bg); color:var(--td-text);
font-family:var(--td-body); font-size:16px; line-height:1.7; font-weight:400;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.td-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-family:var(--td-display); font-weight:800; line-height:.9; letter-spacing:.005em}
p{margin:0 0 18px}
::selection{background:var(--td-gold); color:#0A0E14}
.td-wrap{width:100%; max-width:var(--td-wrap); margin:0 auto; padding:0 var(--td-pad)}
.td-section{position:relative; padding:var(--td-sect) 0}
.td-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. Off screen until a keyboard visitor tabs to it, then the first
thing on the page. Not display:none, which would take it out of the tab
order entirely and defeat the point. */
.td-skip{
position:absolute; left:8px; top:-60px; z-index:9999;
padding:12px 20px; border-radius:0 0 6px 6px;
background:var(--td-gold); color:#0A0E14;
font-family:var(--td-body); font-weight:700; font-size:12px;
letter-spacing:.14em; text-transform:uppercase;
transition:top .25s var(--td-out);
}
.td-skip:focus{top:0}
/* Film grain, the cheapest way to make a flat dark page feel expensive */
.td-grain{
position:fixed; inset:-50%; width:200%; height:200%; z-index:1; pointer-events:none; opacity:.045;
background-image:url("data:image/svg+xml;utf8,");
animation:td-grain 1.4s steps(4) infinite;
}
@keyframes td-grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}}
/* ---------- SECTION MARKER, numbered ---------- */
.td-mark{
display:flex; align-items:baseline; gap:16px; margin:0 0 20px;
font-family:var(--td-body); font-weight:600; font-size:11px;
letter-spacing:.28em; text-transform:uppercase; color:var(--td-gold);
}
.td-mark b{font-family:var(--td-display); font-weight:700; font-size:24px; letter-spacing:.06em; color:var(--td-dim)}
.td-mark i{
flex:1; height:1px; background:var(--td-line); font-style:normal;
transform:scaleX(0); transform-origin:left; transition:transform 1s var(--td-out) .15s;
}
.td-mark.td-in i{transform:scaleX(1)}
/* ---------- TYPE ---------- */
.td-h2{
font-size:clamp(38px, 7vw, 92px); text-transform:uppercase;
margin:0 0 26px; font-weight:800; line-height:.94; letter-spacing:-.03em;
}
.td-h2 .td-word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em}
.td-h2 .td-word i{display:inline-block; font-style:normal; transform:translateY(105%); transition:transform .9s var(--td-out)}
.td-h2.td-in .td-word i{transform:translateY(0)}
.td-h2 em{font-style:normal; color:var(--td-gold)}
.td-lead{color:var(--td-muted); font-size:clamp(15px,1.6vw,18px); max-width:60ch; font-weight:300}
.td-lead b{color:var(--td-text); font-weight:600}
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .85s var(--td-ease), transform .85s var(--td-out)}
[data-reveal].td-in{opacity:1; transform:none}
/* ---------- BUTTONS ---------- */
.td-btn{
position:relative; display:inline-flex; align-items:center; gap:12px;
padding:17px 34px; border-radius:999px; overflow:hidden;
background:var(--td-gold); color:#0A0E14;
font-family:var(--td-body); font-weight:700; font-size:13px;
letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
transition:transform .5s var(--td-out), box-shadow .5s var(--td-ease);
will-change:transform;
}
.td-btn span{position:relative; z-index:2}
.td-btn::before{content:""; position:absolute; inset:0; z-index:1; background:var(--td-white); transform:translateY(101%); transition:transform .5s var(--td-out)}
.td-btn:hover::before{transform:translateY(0)}
.td-btn:hover{box-shadow:0 18px 48px -14px rgba(242,185,39,.7)}
.td-btn--ghost{background:transparent; color:var(--td-text); border:1px solid var(--td-line-2)}
.td-btn--ghost::before{background:var(--td-gold)}
.td-btn--ghost:hover{color:#0A0E14}
.td-textlink{
font-family:var(--td-body); font-weight:600; font-size:11.5px;
letter-spacing:.2em; text-transform:uppercase; color:var(--td-muted);
display:inline-flex; align-items:center; gap:10px; white-space:nowrap; transition:color .35s;
}
.td-textlink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .4s var(--td-out)}
.td-textlink:hover{color:var(--td-gold)}
.td-textlink:hover svg{transform:translateX(5px)}
/* ---------- SOCIALS ---------- */
.td-socials{display:flex; gap:10px; align-items:center}
.td-socials a{
width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
border:1px solid var(--td-line-2); color:var(--td-muted);
transition:transform .45s var(--td-out), color .35s, border-color .35s, background .35s;
}
.td-socials a svg{width:18px;height:18px;fill:currentColor}
.td-socials a:hover{transform:translateY(-5px); color:#0A0E14; background:var(--td-gold); border-color:var(--td-gold)}
/* ============================================================
SECTION: LOADING SCREEN
The logo, a gold bar under it, on the page's own dark ground.
The bar runs most of the way on its own while the page loads, and
main.js finishes it and lifts the screen once the page is ready.
td-in brings it back when a visitor follows a link to another page.
============================================================ */
.td-load{
position:fixed; inset:0; z-index:10000;
display:grid; place-items:center;
background:var(--td-bg);
transition:opacity .5s var(--td-ease), visibility 0s linear .5s;
/* If the script never runs, the screen still lifts on its own. */
animation:td-load-failsafe 0s linear 6s forwards;
}
@keyframes td-load-failsafe{to{opacity:0; visibility:hidden; pointer-events:none}}
.td-load__in{display:grid; justify-items:center; gap:clamp(22px,3vw,30px); padding:0 24px}
.td-load__logo{display:block; width:auto; height:clamp(44px,5.8vw,68px); max-width:72vw; animation:td-load-logo .7s var(--td-out) both}
@keyframes td-load-logo{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.td-load__bar{position:relative; width:min(240px,58vw); height:2px; border-radius:2px; overflow:hidden; background:var(--td-hair)}
.td-load__bar i{
position:absolute; inset:0; border-radius:inherit; background:var(--td-gold);
box-shadow:0 0 12px rgba(242,185,39,.55);
transform-origin:left center; transform:scaleX(0);
animation:td-load-run 2.6s cubic-bezier(.12,.6,.18,1) .1s forwards;
}
@keyframes td-load-run{to{transform:scaleX(.88)}}
/* the page is ready: finish the bar, then fade the screen */
/* Already seen this visit: gone before it can be painted. */
.td-load.td-load--seen{display:none}
.td-load.td-done{opacity:0; visibility:hidden; pointer-events:none; transition-delay:.18s, .68s}
.td-load.td-done .td-load__bar i{animation:none; transform:scaleX(1); transition:transform .2s ease-out}
/* following a link: the screen comes back over the page being left */
.td-load.td-in{animation:none; opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s var(--td-ease), visibility 0s}
.td-load.td-in .td-load__logo{animation:none}
.td-load.td-in .td-load__bar i{animation:td-load-run 2.6s cubic-bezier(.12,.6,.18,1) forwards}
@media (prefers-reduced-motion:reduce){
.td-load__logo,.td-load__bar i{animation:none!important}
.td-load__bar i{transform:scaleX(.5)}
}
/* ============================================================
SECTION: FRET RAIL
============================================================ */
.td-rail{position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:60; display:none; flex-direction:column; gap:16px; align-items:center}
.td-rail::before{content:""; position:absolute; left:50%; top:-26px; bottom:-26px; width:1px; transform:translateX(-50%);
background:linear-gradient(180deg,transparent,var(--td-line-2) 12%,var(--td-line-2) 88%,transparent)}
.td-rail__dot{position:relative; width:9px; height:9px; border-radius:50%; background:var(--td-dim); transition:background .4s, transform .4s var(--td-out)}
.td-rail__dot::after{content:attr(data-label); position:absolute; left:22px; top:50%; transform:translate(-6px,-50%); white-space:nowrap;
font-family:var(--td-body); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--td-muted);
opacity:0; pointer-events:none; transition:opacity .35s, transform .35s var(--td-out)}
.td-rail__dot:hover::after{opacity:1; transform:translate(0,-50%)}
.td-rail__dot.td-on{background:var(--td-gold); transform:scale(1.55); box-shadow:0 0 0 5px rgba(242,185,39,.16)}
@media (min-width:1180px){ .td-rail{display:flex} }
/* ============================================================
SECTION: HEADER
============================================================ */
.td-header{position:fixed; inset:0 0 auto 0; z-index:200; padding:20px 0; border-bottom:1px solid transparent;
transition:padding .45s var(--td-ease), background .45s, border-color .45s}
.td-header.td-stuck{padding:12px 0; background:rgba(10,14,20,.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--td-hair)}
/* Signed in, the WordPress toolbar is fixed over the top of the page and would
cover the logo. WordPress itself publishes its height, and stops holding the
bar in place below 600px, where the header goes back to the very top. */
body.admin-bar .td-header{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){ body.admin-bar .td-header{top:0} }
.td-header__inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.td-header__logo img{height:34px; width:auto; transition:height .45s var(--td-ease)}
.td-header.td-stuck .td-header__logo img{height:28px}
.td-nav{display:none; align-items:center; gap:34px}
.td-nav a{position:relative; font-family:var(--td-body); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--td-muted); transition:color .35s}
.td-nav a::after{content:""; position:absolute; left:0; bottom:-7px; height:1px; width:100%; background:var(--td-gold); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--td-out)}
.td-nav a:hover{color:var(--td-text)}
.td-nav a:hover::after{transform:scaleX(1); transform-origin:left}
.td-nav .td-pill{padding:10px 22px; border:1px solid var(--td-line-2); border-radius:999px; color:var(--td-text); transition:background .35s, color .35s, border-color .35s}
.td-nav .td-pill::after{display:none}
.td-nav .td-pill:hover{background:var(--td-gold); border-color:var(--td-gold); color:#0A0E14}
.td-burger{width:44px;height:44px;border:1px solid var(--td-line-2);border-radius:50%;background:none;cursor:pointer;display:grid;place-content:center;gap:5px;padding:0}
.td-burger span{display:block;width:18px;height:1.5px;background:var(--td-text)}
/* Desktop: the inline nav appears and the burger goes.
This block MUST stay below the .td-burger rule above. A media query adds no
specificity, so a later plain declaration beats it, and that is exactly what
was happening: .td-burger{display:grid} sat one line under the query and won,
putting a hamburger next to the full nav on every desktop page. */
@media (min-width:960px){ .td-nav{display:flex} .td-burger{display:none} }
.td-menu{position:fixed; inset:0; z-index:300; background:var(--td-surface); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
clip-path:circle(0% at calc(100% - 46px) 46px); visibility:hidden; transition:clip-path .8s var(--td-out), visibility 0s .8s}
.td-menu.td-open{clip-path:circle(150% at calc(100% - 46px) 46px); visibility:visible; transition:clip-path .8s var(--td-out), visibility 0s}
.td-menu a{font-family:var(--td-display); font-weight:700; font-size:clamp(40px,11vw,74px); text-transform:uppercase; line-height:1.35;
opacity:0; transform:translateY(22px); transition:opacity .5s, transform .6s var(--td-out), color .3s}
.td-menu.td-open a{opacity:1; transform:none}
.td-menu.td-open a:nth-child(2){transition-delay:.10s}
.td-menu.td-open a:nth-child(3){transition-delay:.16s}
.td-menu.td-open a:nth-child(4){transition-delay:.22s}
.td-menu.td-open a:nth-child(5){transition-delay:.28s}
.td-menu a:hover{color:var(--td-gold)}
.td-menu__close{position:absolute;top:24px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid var(--td-line-2);background:none;font-size:22px;cursor:pointer;line-height:1}
/* ============================================================
SECTION: HERO, "One Light"
Three painted layers. Zero per-frame work, zero resize work.
The entire motion budget is one CSS transition on one at a time,
plus one 18 second opacity breath on a pseudo element.
Every number below was measured in a browser against the real asset at
375x667, 390x844, 920x700, 1024x768, 1280x720, 1366x620 and 1920x1080.
Hero-Homepage-1.png is 821x912 with an alpha bounding box of x140-676,
y27-911: 17.05% dead margin left, 17.54% right, 2.96% top, 0.00% bottom.
That flush bottom edge is the thigh cut, and it is why the mask exists.
============================================================ */
.td-stage{
position:relative; overflow:hidden;
display:flex; align-items:flex-end;
min-height:100vh; /* fallback */
min-height:max(600px, 100svh); /* never crushed, never over one screen */
/* LAYER 1, the still stage. Two radials painted into the section's own
background, so this costs no DOM. It must stay smooth and low contrast:
it sits BEHIND a cut out PNG, and any hard stop or strong edge back there
would trace his silhouette in the air. This is why the old
.td-hero__glow at right:-10%;bottom:-20% had to go. */
background:
radial-gradient(62% 52% at 64% 42%, rgba(242,185,39,.05), rgba(242,185,39,0) 66%),
radial-gradient(96% 74% at 62% 58%, var(--td-surface), rgba(15,21,28,0) 74%),
var(--td-bg);
}
/* One slow breath, so a hero where nothing else moves does not read as a page
that failed to load. 18s, opacity only, on a 5% gold radial with no hard
stops, so the contrast differential across the alpha boundary never exceeds
5% and the silhouette is never traced. Composited; costs no main thread. */
.td-stage::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(46% 40% at 58% 46%, rgba(242,185,39,.05), rgba(242,185,39,0) 70%);
animation:td-stage-breath 18s ease-in-out infinite;
}
@keyframes td-stage-breath{0%,100%{opacity:.45} 50%{opacity:1}}
/* ---------- LAYER 1b, the strings ----------
Behind the figure on purpose. Thin gold lines being occluded by his body is
what reads as depth; it is also why this is safe over a cut out PNG, where a
hard edged GRADIENT behind him would have traced his silhouette. */
.td-stage__strings{
position:absolute; inset:0; z-index:0; width:100%; height:100%;
display:block; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .td-stage__strings{display:none} }
/* ---------- LAYER 2, one performer ----------
top/bottom give the wrapper a definite height, so the img can size in %.
left:50% puts his ink edge at 57-62% of the viewport at every width, which
is what lets the name run onto him instead of stopping beside him.
No drop shadow and no gold halo: those two filters are exactly what make a
cut out read as a sticker rather than a photograph. */
.td-stage__figure{
position:absolute; top:0; bottom:0; left:50%; right:auto; z-index:1;
display:flex; align-items:flex-end; justify-content:flex-start;
pointer-events:none;
}
.td-stage__img{
/* Height drives the scale, so viewport aspect ratio can never blow him up.
The 912px cap is the source height: he is NEVER upscaled in CSS pixels.
Measured: 0.821x at 1280x720, 0.876x at 1024x768, exactly 1.000x at
1920x1080. object-fit:cover would be 2.339x at 1920x1080, painting 660px
of transparency and cropping him at the sternum.
max-width:none is MANDATORY: the theme reset has img{max-width:100%} at
line 83 of index-3.html and it will squash him on every phone. Some WP
themes also force img{height:auto}, in which case height needs !important. */
height:min(104%, 912px);
width:auto; max-width:none; display:block; filter:none;
/* The PNG is cut square through the thighs at y911, flush with the canvas.
Dissolving the bottom sixth kills that razor edge at every viewport and
replaces the old .td-hero__floor element entirely. No @supports fallback
is needed here: the scrim's first stop is solid --td-bg for the bottom 3%
of the section, which is exactly where the hard edge lands. */
-webkit-mask-image:linear-gradient(to top, transparent 0, #000 16%);
mask-image:linear-gradient(to top, transparent 0, #000 16%);
}
/* ---------- LAYER 3, the scrim, the first draft's technique ----------
Drawn ON TOP of the figure at inset:0 so it treats transparent pixels and
photographic pixels identically. That is what integrates a cut out into a
frame, and it is the one thing the approved draft got right about this image.
Every alpha is rgb(10,14,20), the real --td-bg. The draft used rgba(10,10,11),
a neutral black, which left a faint cool mismatch at every fade edge.
Band 1, top: protects the nav where the pale maple headstock crosses it.
Band 2, bottom: carries the type and joins seamlessly to the next section.
Band 3, left to right: carries the name, and reaches ZERO at 62%.
62% is the number that matters. Measured at 1280x720 his face occupies
x821-922, which is 64-72% across, so it takes no horizontal darkening at all.
He keeps his light; the type still wins. */
.td-stage__scrim{
position:absolute; inset:0; z-index:2; pointer-events:none;
background:
linear-gradient(to bottom, rgba(10,14,20,.90) 0%, rgba(10,14,20,.55) 8%, rgba(10,14,20,0) 20%),
linear-gradient(to top, var(--td-bg) 3%, rgba(10,14,20,.78) 17%, rgba(10,14,20,.30) 33%, rgba(10,14,20,0) 52%),
linear-gradient(to right, rgba(10,14,20,.94) 0%, rgba(10,14,20,.72) 26%, rgba(10,14,20,.30) 46%, rgba(10,14,20,0) 62%);
}
/* ---------- LAYER 4, the copy ----------
Bottom aligned. padding-top is a guard for tall content, not the layout:
at every tested desktop size the block is bottom aligned with slack.
Measured eyebrow top vs a 74px header: 206px at 1280x720 (132 clear),
150px at 1366x620 (76 clear), 309px at 1024x768, 514px at 1920x1080.
Measured action row bottom vs the floor: 36px at 1280x720, 31px at 1366x620. */
.td-stage__inner{
position:relative; z-index:3;
display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
padding-top:clamp(92px, 13.5vh, 150px);
padding-bottom:clamp(26px, 5vh, 54px);
}
.td-stage__copy{min-width:0}
/* Entrance. Deliberately NOT [data-reveal]: this block is above the fold and
carries the h1, so it must never start invisible and wait on JS, an
IntersectionObserver or a transition that may never run. animation-fill-mode
backwards means the resting state is VISIBLE, so if animation is unsupported,
blocked or reduced, the copy simply shows. */
@keyframes td-stage-in{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
.td-stage__eyebrow,.td-stage__name,.td-stage__sub,.td-stage__act{
animation:td-stage-in .9s var(--td-out) backwards;
}
/* While the loading screen covers the page, the entrance waits for it. */
.td-loading .td-stage__eyebrow,
.td-loading .td-stage__name,
.td-loading .td-stage__sub,
.td-loading .td-stage__act{animation-play-state:paused}
.td-stage__name{animation-delay:.09s}
.td-stage__sub{animation-delay:.18s}
.td-stage__act{animation-delay:.27s}
.td-stage__eyebrow{
display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:0 0 20px;
font-family:var(--td-body); font-size:11px; font-weight:600; line-height:1.2;
letter-spacing:.3em; text-transform:uppercase; color:var(--td-gold);
}
.td-stage__eyebrow::before{content:""; flex:none; width:30px; height:1px; background:var(--td-gold)}
/* ---------- THE INSTRUMENT ----------
Sized by one clamp. No JS fitter, no Range, no fonts.ready re-run, no resize
measurer. The 24.5vh term is what protects the fold on a short laptop; the
13.6vw term is what keeps DOWNWARD clear of his face on a wide one.
Measured: 174.08px at 1280x720, 151.9px at 1366x620, 139.26px at 1024x768,
190px at 1920x1080, 56px at 375. No horizontal overflow at any width.
No skew: the first draft had none. */
/* The first draft's lockup, restored exactly: Outfit 800, upright, tight
-.045em tracking so the letters read as one locked block rather than a row
of separate characters, line-height .84 and the draft's own size formula. */
.td-stage__name{
margin:0 0 clamp(14px, 2.6vh, 26px);
font-family:var(--td-display); font-weight:800; text-transform:uppercase;
line-height:.84; letter-spacing:-.045em;
}
.td-stage__lines{display:block}
.td-stage__line{display:block; white-space:nowrap; font-size:clamp(50px, min(11.4vw, 21vh), 178px)}
.td-stage__line--gold{color:var(--td-gold)}
/* One letter, one note. The padding/negative-margin pair fattens the hit area
vertically and horizontally without changing a single advance width, so a
normal sweep across the name never lands in a dead gap. Verified in browser:
consecutive letters overlap by 4.84px and elementFromPoint returns a letter
at all 48 probe points (left, right, top and bottom edge of all twelve).
Fast attack, slow release: the transition is an envelope, which is why this
reads as a plucked string and not as a hover. */
.td-stage__ch{
display:inline-block;
padding:.07em .014em; margin:-.07em -.014em;
transition:color .55s var(--td-ease), text-shadow .55s var(--td-ease);
}
.td-stage__ch.td-lit{
color:var(--td-gold-hi);
text-shadow:0 0 26px rgba(242,185,39,.55), 0 0 70px rgba(242,185,39,.22);
transition-duration:.045s;
}
.td-stage__sub{
margin:0 0 26px; max-width:28ch;
font-family:var(--td-body); font-weight:500; line-height:1.4;
font-size:clamp(16px, 2vw, 21px); color:var(--td-text);
}
.td-stage__act{display:flex; align-items:center; flex-wrap:wrap; gap:16px 22px}
/* ---------- the right hand corner ----------
The social icons, over the lower right of the figure. They used to sit
beside the button; the client asked for them further right. */
.td-stage__aside{
flex:0 0 auto; text-align:right;
display:flex; flex-direction:column; align-items:flex-end;
/* level with the middle of the button row beside it */
padding-bottom:6px;
}
/* ---------- MOBILE, 899 and under: two bands ----------
Him above, the type below. A big bottom anchored figure is wrong here and I
checked why: at 375x667 it puts his face at y345-419, which is exactly where
the name goes. Top anchoring is the only correct answer on a phone.
Do NOT centre the figure with translateX(-50%): [data-reveal] sets a
transform and a media query declaration will not reliably outrank it.
Centre with flexbox.
The 102vw term caps him at 92% of the viewport width so he can never
overflow on a narrow tall phone, without ever squashing the aspect ratio.
Measured at 375x667: figure 252x280 at y37, effectively finished by y278,
eyebrow top y273, everything inside 667, document.scrollWidth exactly 375.
Measured at 390x844: figure 319x354, eyebrow top y441, 90px of clear air. */
@media (max-width:899px){
.td-stage{min-height:max(640px, 100svh)}
.td-stage__figure{
left:0; right:0; top:clamp(36px, 5.5vh, 64px); bottom:auto;
justify-content:center; align-items:flex-start;
}
.td-stage__img{
height:min(42svh, 380px, 102vw);
/* Shallower than desktop ON PURPOSE. The red Strat body and the cream
pickguard are the most recognisable objects in the photograph and a
deep fade wipes them out on the device most of his students use.
14% dissolves source y784-912 only: the lower bout and his thighs. */
-webkit-mask-image:linear-gradient(to top, transparent 2%, #000 14%);
mask-image:linear-gradient(to top, transparent 2%, #000 14%);
}
/* Stronger and reaching higher: the guitar lands where the gold eyebrow
sits, and the desktop values leave it marginal. No left-to-right band
here, there is nothing to the right of the type. */
.td-stage__scrim{background:
linear-gradient(to bottom, rgba(10,14,20,.86) 0%, rgba(10,14,20,0) 13%),
linear-gradient(to top, var(--td-bg) 4%, rgba(10,14,20,.96) 44%, rgba(10,14,20,.72) 58%, rgba(10,14,20,.24) 72%, rgba(10,14,20,0) 88%)}
.td-stage__inner{
flex-direction:column; align-items:flex-start; gap:22px;
padding-top:clamp(76px, 12vh, 120px);
}
.td-stage__eyebrow{font-size:10px; letter-spacing:.18em; gap:10px; margin-bottom:14px}
.td-stage__eyebrow::before{width:22px}
.td-stage__name{margin-bottom:14px}
/* 15px with no measure puts the sub on one line at 375, which buys 24px. */
.td-stage__sub{font-size:15px; max-width:none; margin-bottom:20px}
.td-stage__aside{flex-direction:row; align-items:center; text-align:left; gap:14px}
}
/* ---------- REDUCED MOTION ----------
Sound and light are not motion, so the instrument stays. Only the breath
(here) and the teaching strum (in JS) are suppressed. */
@media (prefers-reduced-motion:reduce){
.td-stage::before{animation:none; opacity:.8}
.td-stage__eyebrow,.td-stage__name,.td-stage__sub,.td-stage__act{animation:none}
.td-stage__ch{transition-duration:.12s}
.td-stage__ch.td-lit{text-shadow:0 0 18px rgba(242,185,39,.4)}
}
/* ============================================================
SECTION: CREDIBILITY TICKER
============================================================ */
.td-cred{padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(40px,6vw,72px)}
.td-cred__label{text-align:center; font-family:var(--td-body); font-weight:600; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--td-dim); margin:0 0 30px}
.td-ticker{position:relative; overflow:hidden; padding:8px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.td-ticker__track{display:flex; width:max-content; will-change:transform}
/* ---------- MARQUEE LOOP, shared by the tickers and the reviews ----------
Each track holds its items twice, so sliding it by half its width lands
exactly where it started. Duration and direction are set by main.js. */
@keyframes td-marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.td-marq-run{animation:td-marq var(--td-marq-dur, 25s) linear infinite}
.td-marq-run--rev{animation-direction:reverse}
.td-marq-off,
.td-ticker:hover .td-marq-run,
.td-marq:hover .td-marq-run{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .td-marq-run{animation:none} }
/* Reduced motion: the row stands still and scrolls by hand instead. */
.td-marq--static{overflow-x:auto!important; -webkit-mask-image:none!important; mask-image:none!important; scroll-snap-type:x proximity; scrollbar-width:thin}
.td-marq--static > *{padding-left:max(16px, calc((100vw - 1166px) / 2)); padding-right:16px}
.td-ticker__track span{font-family:var(--td-display); font-weight:700; font-size:clamp(26px,3.8vw,50px); text-transform:uppercase; letter-spacing:.03em; color:var(--td-dim);
padding:0 26px; white-space:nowrap; transition:color .4s; display:flex; align-items:center; gap:26px}
.td-ticker__track span::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--td-gold); opacity:.5}
.td-ticker:hover .td-ticker__track span{color:var(--td-muted)}
/* ============================================================
SECTION: ABOUT
============================================================ */
.td-about__grid{display:grid; gap:clamp(38px,6vw,80px); align-items:center}
.td-about__pic{position:relative}
.td-about__pic img{width:100%; border-radius:4px}
.td-about__pic::after{content:""; position:absolute; inset:auto 0 0 0; height:36%; background:linear-gradient(180deg,transparent,var(--td-bg)); pointer-events:none}
.td-about__pic::before{content:""; position:absolute; inset:-14px; border:1px solid var(--td-line); border-radius:6px; pointer-events:none}
.td-about__body p{color:var(--td-muted); font-size:15.5px; font-weight:300}
/* The three numbers under the bio: each in its own cell, centred, with a thin
rule between cells and above and below the row, gold figures and small
capital labels under them. The client's reference was exactly this shape. */
.td-stats{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
margin-top:48px; padding:30px 0;
border-top:1px solid var(--td-line); border-bottom:1px solid var(--td-line);
/* the figures size to the row, so "1,400+" always fits its cell */
container-type:inline-size;
}
.td-stat{position:relative; padding:4px 6px; text-align:center}
.td-stat + .td-stat::before{content:""; position:absolute; left:0; top:10%; bottom:10%; width:1px; background:var(--td-line-2)}
.td-stat__n{font-family:var(--td-display); font-weight:800; font-size:clamp(26px,7vw,54px); font-size:clamp(26px,8cqw,54px); line-height:1; color:var(--td-gold); letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap}
.td-stat__l{margin-top:12px; font-size:10.5px; font-weight:600; line-height:1.45; letter-spacing:.2em; text-transform:uppercase; color:var(--td-muted)}
/* Narrow phones: "subscribers" in wide tracked capitals is wider than its cell. */
@media (max-width:400px){ .td-stat__l{letter-spacing:.08em; overflow-wrap:anywhere} }
@media (min-width:900px){ .td-about__grid{grid-template-columns:.85fr 1.15fr} }
/* ============================================================
SECTION: COURSES
============================================================ */
.td-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:52px}
.td-head .td-h2{margin-bottom:0}
.td-grid3{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:700px){ .td-grid3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .td-grid3{grid-template-columns:repeat(3,1fr)} }
/* Video covers are wide and short, so three of them fit long before three
course cards do. Two and a lonely third looked like a mistake at 960px. */
@media (min-width:900px){ .td-grid3--vid{grid-template-columns:repeat(3,1fr)} }
.td-card{position:relative; display:flex; flex-direction:column; background:var(--td-surface); border:1px solid var(--td-line); border-radius:6px; overflow:hidden;
transition:transform .6s var(--td-out), border-color .5s, background .5s, box-shadow .6s; will-change:transform}
.td-card:hover{transform:translateY(-8px); border-color:rgba(242,185,39,.55); background:var(--td-surface-2); box-shadow:0 30px 60px -30px rgba(242,185,39,.25)}
/* contain, not cover. The three covers are artwork with the course name set
into them and they are not the same shape (0.80, 0.71 and 0.67 against the
frame's 0.75), so cover was cutting the top and bottom off the two taller
ones: the client saw it on Pentatonic Flow. The frame is the page's own
background, so what is left beside a cover reads as space, not as a bar. */
.td-card__frame{position:relative; overflow:hidden; aspect-ratio:3/4; background:#0A0E14}
.td-card__frame img{width:100%; height:100%; object-fit:contain; transition:transform 1.05s var(--td-out), filter .6s}
.td-card:hover .td-card__frame img{transform:scale(1.04)}
.td-card__frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,14,20,0) 42%,rgba(10,14,20,.88) 100%)}
.td-card--soon .td-card__frame img{filter:grayscale(.7) brightness(.62)}
.td-card--soon:hover .td-card__frame img{filter:grayscale(0) brightness(.9)}
.td-badge{position:absolute; left:14px; top:14px; z-index:2; font-family:var(--td-body); font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
padding:7px 14px; border-radius:999px; background:rgba(10,14,20,.72); border:1px solid var(--td-line-2); color:var(--td-muted); backdrop-filter:blur(8px)}
.td-badge--live{background:var(--td-gold); border-color:var(--td-gold); color:#0A0E14}
.td-card__body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.td-card__lvl{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-gold); margin-bottom:12px; font-weight:600}
.td-card__t{font-size:clamp(22px,2.4vw,29px); text-transform:uppercase; margin-bottom:6px; line-height:1.02; letter-spacing:-.02em}
.td-card__s{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--td-dim); margin-bottom:14px; font-weight:600}
.td-card__p{font-size:14px; color:var(--td-muted); margin-bottom:20px; flex:1; line-height:1.65; font-weight:300}
.td-card__foot{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:18px; border-top:1px solid var(--td-line)}
.td-card__price{font-family:var(--td-display); font-size:36px; color:var(--td-text); line-height:1; letter-spacing:.02em}
.td-card__price s{font-family:var(--td-body); font-size:11px; color:var(--td-dim); letter-spacing:.14em; text-decoration:none; margin-left:7px; font-weight:600}
.td-card__go{width:38px; height:38px; border-radius:50%; border:1px solid var(--td-line-2); display:grid; place-items:center; flex:0 0 38px; transition:background .4s, border-color .4s, transform .5s var(--td-out)}
.td-card__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.td-card:hover .td-card__go{background:var(--td-gold); border-color:var(--td-gold); color:#0A0E14; transform:rotate(-45deg)}
/* ============================================================
SECTION: FLAGSHIP, sticky video panel + the client's own breakdown
============================================================ */
.td-deep__grid{display:grid; gap:44px}
.td-deep__panel{background:var(--td-surface); border:1px solid var(--td-line); border-radius:6px; padding:18px; align-self:start}
.td-deep__video{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:4px; border:1px solid var(--td-line-2); background:#000; cursor:pointer; margin-bottom:18px;
box-shadow:0 0 0 1px rgba(10,14,20,1), 0 20px 50px -20px rgba(242,185,39,.35)}
.td-deep__video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--td-out)}
.td-deep__video:hover video{transform:scale(1.04)}
.td-deep__video::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,14,20,.1),rgba(10,14,20,.55)); pointer-events:none}
.td-deep__play{position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
background:rgba(10,14,20,.55); border:1px solid var(--td-gold); backdrop-filter:blur(10px); transition:transform .5s var(--td-out), background .4s}
.td-deep__play svg{width:16px;height:18px;fill:var(--td-gold);margin-left:3px;transition:fill .4s}
.td-deep__video:hover .td-deep__play{transform:translate(-50%,-50%) scale(1.12); background:var(--td-gold)}
.td-deep__video:hover .td-deep__play svg{fill:#0A0E14}
.td-deep__vlabel{position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--td-body); font-weight:600; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--td-gold)}
.td-deep__chips{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:18px}
.td-deep__chip{background:var(--td-bg); border:1px solid var(--td-line); border-radius:4px; padding:12px 12px 10px}
.td-deep__chip b{display:block; font-family:var(--td-display); font-weight:700; font-size:34px; line-height:1; color:var(--td-gold); letter-spacing:.02em}
.td-deep__chip span{display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--td-dim); margin-top:6px; font-weight:600; line-height:1.4}
.td-deep__count{display:flex; align-items:baseline; gap:8px; font-family:var(--td-display); margin-bottom:12px}
.td-deep__count i{font-size:54px; font-style:normal; color:var(--td-gold); line-height:1}
.td-deep__count s{font-size:22px; color:var(--td-dim); text-decoration:none}
.td-deep__bar{height:2px; background:var(--td-hair); margin-bottom:18px; overflow:hidden}
.td-deep__bar i{display:block; height:100%; width:0; background:var(--td-gold); transition:width .5s var(--td-ease)}
.td-deep__panel .td-btn{width:100%; justify-content:center}
.td-deep__price{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px; font-family:var(--td-body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--td-dim); font-weight:600}
.td-deep__price b{font-family:var(--td-display); font-size:34px; color:var(--td-text); letter-spacing:.02em; font-weight:700}
.td-deep__price b s{font-family:var(--td-body); font-size:11px; color:var(--td-dim); text-decoration:none; margin-left:6px; letter-spacing:.14em}
.td-deep__g{font-size:11.5px; color:var(--td-dim); margin:14px 0 0; line-height:1.55; font-weight:300}
.td-mod{padding:30px 0; border-top:1px solid var(--td-line); opacity:.3; transition:opacity .6s var(--td-ease); display:grid; grid-template-columns:52px 1fr; gap:18px}
.td-mod.td-live{opacity:1}
.td-mod__n{font-family:var(--td-display); font-size:30px; color:var(--td-gold); letter-spacing:.06em; line-height:1; padding-top:4px}
.td-mod__t{font-size:clamp(22px,2.6vw,32px); text-transform:uppercase; margin-bottom:8px; line-height:1.02; letter-spacing:-.02em}
.td-mod__p{color:var(--td-muted); font-size:15px; margin:0; font-weight:300}
.td-incl{margin-top:56px; padding-top:40px; border-top:1px solid var(--td-line); display:grid; gap:26px}
.td-incl h3{font-size:clamp(20px,2.2vw,27px); text-transform:uppercase; letter-spacing:-.02em}
.td-incl ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px 26px}
.td-incl li{display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--td-muted); font-weight:300}
.td-incl li svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--td-gold);stroke-width:2.2}
@media (min-width:960px){ .td-deep__grid{grid-template-columns:400px 1fr; gap:70px} .td-deep__panel{position:sticky; top:104px} }
/* ============================================================
SECTION: WATCH, gold framed video cards with a name bar
============================================================ */
.td-vid{position:relative; cursor:pointer; transition:transform .6s var(--td-out); will-change:transform}
.td-vid:hover{transform:translateY(-8px)}
.td-vid__frame{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:4px; background:#000;
border:1px solid rgba(242,185,39,.42); box-shadow:0 0 0 4px rgba(242,185,39,.06), 0 24px 50px -24px rgba(0,0,0,.9);
transition:border-color .45s, box-shadow .55s}
.td-vid:hover .td-vid__frame{border-color:var(--td-gold); box-shadow:0 0 0 4px rgba(242,185,39,.16), 0 30px 60px -22px rgba(242,185,39,.3)}
.td-vid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--td-out), filter .5s; filter:brightness(.82)}
.td-vid:hover video{transform:scale(1.05); filter:none}
.td-vid__play{position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
background:rgba(10,14,20,.55); border:1px solid var(--td-gold); backdrop-filter:blur(10px); transition:transform .5s var(--td-out), background .4s}
.td-vid__play svg{width:16px;height:18px;fill:var(--td-gold);margin-left:3px;transition:fill .4s}
.td-vid:hover .td-vid__play{transform:translate(-50%,-50%) scale(1.12); background:var(--td-gold)}
.td-vid:hover .td-vid__play svg{fill:#0A0E14}
.td-vid__bar{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 4px 0}
.td-vid__t{font-family:var(--td-display); font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:-.015em; line-height:1.1; transition:color .35s}
.td-vid:hover .td-vid__t{color:var(--td-gold)}
.td-vid__s{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-dim); font-weight:600; white-space:nowrap}
/* ---------- LIGHTBOX, gold frame + name ---------- */
.td-lb{position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:clamp(16px,4vw,48px);
background:rgba(6,9,13,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
opacity:0; visibility:hidden; transition:opacity .45s var(--td-ease), visibility .45s}
.td-lb.td-open{opacity:1; visibility:visible; transition:opacity .45s var(--td-ease), visibility 0s}
.td-lb__inner{width:min(1180px,100%); transform:scale(.94) translateY(16px); transition:transform .6s var(--td-out)}
.td-lb.td-open .td-lb__inner{transform:none}
.td-lb__box{position:relative; aspect-ratio:16/9; background:#000; border:1px solid var(--td-gold); border-radius:6px; overflow:hidden;
box-shadow:0 0 0 6px rgba(242,185,39,.08), 0 60px 140px -30px rgba(0,0,0,.95)}
.td-lb__box video{width:100%; height:100%; display:block; object-fit:contain; background:#000}
.td-lb__box iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.td-lb--yt .td-lb__box video{display:none}
.td-lb__cap{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 4px 0}
.td-lb__cap b{font-family:var(--td-display); font-weight:800; font-size:21px; text-transform:uppercase; letter-spacing:-.015em; color:var(--td-gold); line-height:1.1}
.td-lb__cap span{font-family:var(--td-body); font-weight:600; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--td-muted)}
.td-lb__x{position:absolute; top:clamp(14px,3vw,26px); right:clamp(14px,3vw,26px); width:48px; height:48px; border-radius:50%; padding:0; cursor:pointer;
border:1px solid var(--td-line-2); background:rgba(10,14,20,.65); color:var(--td-text); font-size:22px; line-height:1; display:grid; place-items:center;
transition:background .35s, color .35s, border-color .35s, transform .45s var(--td-out)}
.td-lb__x:hover{background:var(--td-gold); color:#0A0E14; border-color:var(--td-gold); transform:rotate(90deg)}
/* ============================================================
SECTION: LISTEN
============================================================ */
.td-listen__grid{display:grid; gap:clamp(34px,5vw,64px)}
@media (min-width:980px){ .td-listen__grid{grid-template-columns:.9fr 1.1fr; align-items:center} }
.td-track{display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:center; padding:18px; border:1px solid var(--td-line); border-radius:6px; background:var(--td-surface); margin-bottom:12px; transition:border-color .45s, background .45s}
.td-track:hover{border-color:var(--td-line-2); background:var(--td-surface-2)}
.td-track.td-on{border-color:rgba(242,185,39,.6)}
.td-track__btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--td-gold);background:transparent;color:var(--td-gold);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .4s,color .4s,transform .5s var(--td-out)}
.td-track__btn svg{width:14px;height:16px;fill:currentColor}
.td-track__btn:hover{transform:scale(1.08)}
.td-track.td-on .td-track__btn{background:var(--td-gold);color:#0A0E14}
.td-track__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px}
.td-track__t{font-family:var(--td-body);font-weight:600;font-size:14px}
.td-track__d{font-family:var(--td-display);font-size:20px;color:var(--td-dim);letter-spacing:.08em}
.td-wave{display:flex;align-items:flex-end;gap:2px;height:34px;cursor:pointer}
.td-wave i{flex:1;min-width:1px;background:var(--td-dim);border-radius:1px;transform-origin:bottom;transition:background .18s linear,transform .18s var(--td-out)}
.td-wave i.td-done{background:var(--td-gold)}
.td-wave i.td-cursor{background:var(--td-gold-hi);transform:scaleY(1.35)}
/* ============================================================
SECTION: LIVE, tour poster
============================================================ */
.td-tour__meta{display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 40px; font-family:var(--td-body); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-dim); font-weight:600}
.td-tour__meta b{color:var(--td-gold); font-family:var(--td-display); font-size:22px; letter-spacing:.06em; font-weight:700; margin-right:6px}
.td-leg{margin-bottom:38px}
.td-leg__h{display:flex; align-items:baseline; gap:18px; margin:0 0 4px; padding-bottom:12px; border-bottom:1px solid var(--td-line-2)}
.td-leg__h h3{font-size:clamp(24px,3vw,38px); text-transform:uppercase; color:var(--td-gold); letter-spacing:-.02em}
.td-leg__h span{font-family:var(--td-body); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--td-dim); font-weight:600}
.td-date{display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center; padding:22px 6px; border-bottom:1px solid var(--td-line); position:relative; overflow:hidden}
.td-date::before{content:""; position:absolute; inset:0; z-index:0; background:var(--td-gold); transform:scaleX(0); transform-origin:left; transition:transform .65s var(--td-out)}
.td-date:hover::before{transform:scaleX(1)}
.td-date > *{position:relative; z-index:1; transition:color .35s}
.td-date:hover, .td-date:hover *{color:#0A0E14}
.td-date__d{display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:center; line-height:1}
.td-date__n{font-family:var(--td-display); font-size:58px; letter-spacing:.02em; grid-row:span 2; line-height:.9}
.td-date__mo{font-family:var(--td-body); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--td-gold); align-self:end}
.td-date__wd{font-family:var(--td-body); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--td-dim); align-self:start; margin-top:3px}
.td-date__city{font-family:var(--td-display); font-size:clamp(20px,2.4vw,30px); text-transform:uppercase; line-height:1.05; letter-spacing:-.02em; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.td-date__next{font-family:var(--td-body); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#0A0E14; background:var(--td-gold); padding:5px 9px 4px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-weight:700}
.td-date__next i{width:6px; height:6px; border-radius:50%; background:#0A0E14; animation:td-pulse 1.6s ease-in-out infinite}
.td-date:hover .td-date__next{background:#0A0E14; color:var(--td-gold)}
.td-date:hover .td-date__next i{background:var(--td-gold)}
@keyframes td-pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.6)}}
.td-date__ven{font-size:13px; color:var(--td-muted); margin-top:5px; font-weight:300}
.td-date__cta{display:flex; align-items:center; gap:9px; white-space:nowrap; font-family:var(--td-body); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-dim); transition:transform .5s var(--td-out), color .35s}
.td-date:hover .td-date__cta{transform:translateX(-4px)}
.td-date__cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
@media (max-width:600px){ .td-date{grid-template-columns:84px 1fr} .td-date__cta{grid-column:2} .td-date__n{font-size:48px} }
/* ============================================================
SECTION: REVIEWS, real course reviews
============================================================ */
.td-marq{position:relative; overflow:hidden; padding:4px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.td-marq__track{display:flex; gap:20px; width:max-content; will-change:transform; padding:8px 10px}
.td-quote{width:min(370px,80vw); min-height:250px; display:flex; flex-direction:column; background:var(--td-surface); border:1px solid var(--td-line); border-radius:6px; padding:26px 24px; margin:0; transition:transform .5s var(--td-out), border-color .5s}
.td-quote:hover{transform:translateY(-6px); border-color:rgba(242,185,39,.5)}
.td-quote__stars{display:flex; gap:3px; margin-bottom:14px}
.td-quote__stars svg{width:13px;height:13px;fill:var(--td-gold)}
.td-quote__txt{margin:0 0 20px; font-size:14.5px; color:var(--td-text); line-height:1.65; flex:1; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; font-weight:300}
.td-quote__who{display:flex; align-items:center; gap:12px; margin-top:auto}
.td-quote__av{width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:grid;place-items:center;background:rgba(242,185,39,.14);color:var(--td-gold);font-family:var(--td-display);font-weight:700;font-size:16px;letter-spacing:.04em}
.td-quote__n{font-weight:600; font-size:13px; line-height:1.3}
.td-quote__src{font-size:10px; color:var(--td-dim); letter-spacing:.1em; text-transform:uppercase; line-height:1.4; font-weight:600}
@media (hover:none){ .td-marq{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch} .td-marq::-webkit-scrollbar{display:none} .td-quote{scroll-snap-align:center} }
/* ============================================================
SECTION: FAQ, the client's own six questions
============================================================ */
.td-faq{max-width:820px; margin:0 auto}
.td-faq__i{border-bottom:1px solid var(--td-line)}
.td-faq__q{width:100%; background:none; border:0; cursor:pointer; text-align:left; padding:24px 44px 24px 0; position:relative;
font-family:var(--td-display); font-weight:700; font-size:clamp(17px,2vw,23px); letter-spacing:-.015em; text-transform:none; color:var(--td-text); transition:color .4s; line-height:1.25}
.td-faq__i.td-open .td-faq__q{color:var(--td-gold)}
.td-faq__q::before,.td-faq__q::after{content:""; position:absolute; right:6px; top:50%; background:currentColor; transition:transform .5s var(--td-out), opacity .3s}
.td-faq__q::before{width:14px; height:1.5px; transform:translateY(-50%)}
.td-faq__q::after{width:1.5px; height:14px; right:12px; transform:translateY(-50%)}
.td-faq__i.td-open .td-faq__q::after{transform:translateY(-50%) rotate(90deg); opacity:0}
.td-faq__a{height:0; overflow:hidden; transition:height .5s var(--td-ease)}
.td-faq__a p{margin:0 0 24px; color:var(--td-muted); font-size:15px; padding-right:44px; font-weight:300}
/* ============================================================
SECTION: LEAD MAGNET
============================================================ */
.td-magnet{position:relative; overflow:hidden; border-radius:8px; background:var(--td-surface); border:1px solid var(--td-line); padding:clamp(32px,5.5vw,68px); display:grid; gap:38px}
.td-magnet::before{content:""; position:absolute; left:-14%; top:-58%; width:70%; aspect-ratio:1; pointer-events:none; background:radial-gradient(circle, rgba(242,185,39,.2), transparent 66%)}
.td-magnet > *{position:relative}
.td-checks{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px}
.td-checks li{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--td-muted); font-weight:300}
.td-checks svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:var(--td-gold);stroke-width:2.2}
.td-form{display:flex; flex-wrap:wrap; gap:10px}
.td-form input{flex:1 1 210px; min-width:0; padding:16px 20px; border-radius:999px; background:var(--td-bg); border:1px solid var(--td-line-2); font-size:14px; transition:border-color .4s}
.td-form input:focus{outline:none; border-color:var(--td-gold)}
.td-form button{border:0; cursor:pointer; padding:16px 30px; border-radius:999px; background:var(--td-gold); color:#0A0E14; font-family:var(--td-body); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; transition:background .4s, transform .5s var(--td-out)}
.td-form button:hover{background:var(--td-white); transform:translateY(-2px)}
.td-magnet__note{font-size:12px; color:var(--td-dim); margin:16px 0 0}
.td-magnet__ok{font-size:13px; color:var(--td-gold); margin:12px 0 0; display:none}
.td-magnet__ok.td-show{display:block}
@media (min-width:900px){ .td-magnet{grid-template-columns:1.15fr .85fr; gap:64px; align-items:center} }
/* ============================================================
SECTION: FOOTER, the name you can play
============================================================ */
.td-footer{border-top:1px solid var(--td-line); padding-top:clamp(56px,8vw,96px); overflow:hidden; position:relative}
.td-footer__play{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 18px;
font-family:var(--td-body); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--td-dim); font-weight:600}
.td-snd,
.td-snd{cursor:pointer; border:1px solid var(--td-line-2); background:transparent; color:var(--td-text); border-radius:999px; padding:8px 14px; display:inline-flex; align-items:center; gap:8px;
font-family:var(--td-body); font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; transition:background .35s, color .35s, border-color .35s}
.td-snd i{width:7px; height:7px; border-radius:50%; background:var(--td-dim); font-style:normal; transition:background .3s, box-shadow .3s}
.td-snd.td-on i{background:var(--td-gold); box-shadow:0 0 0 4px rgba(242,185,39,.18)}
.td-snd:hover{border-color:var(--td-gold); color:var(--td-gold)}
.td-footer__big{
font-family:var(--td-display); font-weight:900; text-transform:uppercase; letter-spacing:-.055em;
/* Always ONE line. Measured in browser: at font-size 100px this string is
9.75 x the font size wide in Outfit 900 at -.055em WITH the 1px text
stroke, which is wider than the same face without it. Dividing by 10.05
leaves about 3 percent of margin for the scrollbar. nowrap is the hard guard, and .td-footer already has
overflow:hidden so a miss clips instead of scrolling the page.
Re-measure this divisor if the string or the display face ever changes. */
font-size:min(260px, calc((100vw - 2 * var(--td-pad)) / 10.05));
white-space:nowrap;
line-height:.8; letter-spacing:.01em; text-align:center;
color:transparent; -webkit-text-stroke:1px rgba(242,185,39,.35);
margin:0 0 -.06em; padding:0 var(--td-pad); user-select:none; cursor:default;
}
.td-footer__big span{display:inline-block; transform:skewX(var(--td-slant)); transition:color .35s, -webkit-text-stroke-color .35s, transform .5s var(--td-out); position:relative}
.td-footer__big span.td-hit{color:var(--td-gold); -webkit-text-stroke-color:var(--td-gold); transform:skewX(calc(var(--td-slant) - 2deg)) translateY(-.08em); transition-duration:.08s}
.td-footer__big span.td-hit::after{
content:""; position:absolute; left:-6%; right:-6%; bottom:-.04em; height:2px; background:var(--td-gold);
animation:td-string .5s ease-out forwards;
}
@keyframes td-string{0%{transform:scaleY(1) translateY(0); opacity:1}25%{transform:scaleY(5) translateY(-2px)}50%{transform:scaleY(3) translateY(2px)}75%{transform:scaleY(1.6) translateY(-1px)}100%{transform:scaleY(1); opacity:0}}
.td-footer__strings{position:relative; height:1px; margin:0 auto; width:min(1100px,90vw); background:linear-gradient(90deg,transparent,var(--td-line-2),transparent)}
.td-footer__hint{text-align:center; font-family:var(--td-body); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--td-dim); margin:18px 0 0; min-height:14px; transition:opacity .3s}
.td-footer__top{display:grid; gap:34px; padding:clamp(42px,6vw,72px) 0 40px; border-bottom:1px solid var(--td-line)}
.td-footer__logo img{height:32px; width:auto}
.td-footer__nav{display:flex; flex-wrap:wrap; gap:22px}
.td-footer__nav a{font-family:var(--td-body); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--td-muted); transition:color .35s}
.td-footer__nav a:hover{color:var(--td-gold)}
.td-footer__meta{font-size:13px; color:var(--td-muted); line-height:1.9; font-weight:300}
.td-footer__meta a:hover{color:var(--td-gold)}
.td-footer__bar{padding:26px 0 34px; font-size:11px; letter-spacing:.1em; color:var(--td-dim); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between}
@media (min-width:860px){ .td-footer__top{grid-template-columns:auto 1fr auto; align-items:center} .td-footer__nav{justify-content:center} .td-footer__meta{text-align:right} }
/* ---------- SOCIAL PROOF, real enrolment count from the database ---------- */
.td-proof{display:flex; align-items:center; gap:12px; font-family:var(--td-body); font-size:12px; color:var(--td-muted); font-weight:500}
.td-proof__stack{display:flex}
.td-proof__stack i{width:28px; height:28px; border-radius:50%; margin-left:-9px; display:grid; place-items:center;
background:var(--td-surface-2); border:2px solid var(--td-bg); color:var(--td-gold);
font-family:var(--td-display); font-style:normal; font-size:13px; letter-spacing:.04em}
.td-proof__stack i:first-child{margin-left:0}
.td-proof b{color:var(--td-text); font-weight:700}
.td-proof--dark i{border-color:var(--td-surface)}
/* ---------- STICKY ENROL BAR, appears after the flagship section ---------- */
.td-bar{position:fixed; left:0; right:0; bottom:0; z-index:150; padding:0 var(--td-pad) 14px; pointer-events:none;
transform:translateY(120%); visibility:hidden; transition:transform .6s var(--td-out), visibility 0s .6s}
.td-bar.td-show{transform:none; pointer-events:auto; visibility:visible; transition:transform .6s var(--td-out), visibility 0s}
.td-bar__in{max-width:var(--td-wrap); margin:0 auto; display:flex; align-items:center; gap:16px; padding:10px 12px 10px 10px;
background:rgba(15,21,28,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
border:1px solid var(--td-line-2); border-radius:999px; box-shadow:0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(10,14,20,.6)}
.td-bar__img{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 44px; border:1px solid var(--td-line-2)}
.td-bar__t{font-family:var(--td-display); font-weight:800; font-size:17px; line-height:1.1; text-transform:uppercase; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.td-bar__s{font-family:var(--td-body); font-size:11px; color:var(--td-muted); letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px}
.td-bar__s b{color:var(--td-gold); font-weight:700}
.td-bar__mid{flex:1; min-width:0}
.td-bar__g{font-size:11px; color:var(--td-dim); white-space:nowrap; display:none}
.td-bar .td-btn{padding:13px 24px; font-size:12px}
.td-bar__x{width:36px; height:36px; border-radius:50%; border:1px solid var(--td-line); background:none; color:var(--td-dim); cursor:pointer; font-size:18px; line-height:1; display:grid; place-items:center; padding:0; transition:color .3s, border-color .3s}
.td-bar__x:hover{color:var(--td-text); border-color:var(--td-line-2)}
@media (min-width:900px){ .td-bar__g{display:block} }
@media (max-width:600px){
/* The button and the close button leave a phone about 50px for the name,
which cut a two word course name down to three letters. Tighter spacing
and a name on two short lines instead of one long one. */
.td-bar{padding-bottom:10px}
.td-bar__in{gap:10px; padding:8px}
.td-bar__img{width:40px; height:40px; flex-basis:40px}
.td-bar__s{display:none}
.td-bar__t{font-size:14.5px; line-height:1.08; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2}
.td-bar .td-btn{padding:12px 16px}
.td-bar .td-btn span{font-size:10.5px; letter-spacing:.1em}
.td-bar__x{width:32px; height:32px; flex:0 0 32px}
}
/* ---------- WAITLIST, the lead magnet is the real free course ---------- */
/* ---------- WAITLIST PANEL ----------
Three things compete here: the cover, the pitch and the form. The trap is
that an `fr` track's automatic minimum is min-content, so the heading's
longest word ("PENTATONIC") refuses to shrink and shoves the form clean out
of the panel. minmax(0, ...) is what lets the text column give way, and the
form gets a real floor so the input and button never collapse together. */
.td-magnet--wait{grid-template-columns:1fr}
/* A panel heading, not a section heading: it lives inside 68px of padding and
shares the row, so it is set well below the page's --td-h2 scale. */
.td-magnet--wait .td-h2{font-size:clamp(30px, 3.6vw, 54px); line-height:1; margin-bottom:18px}
/* The form column is never wide enough for a usable input AND a button that
says "Join the waitlist" side by side, so stack them deliberately at full
width rather than letting flex-wrap drop a short button onto its own line. */
.td-magnet--wait .td-form{flex-direction:column; align-items:stretch; gap:10px}
.td-magnet--wait .td-form input{flex:0 0 auto; width:100%; text-align:left}
.td-magnet--wait .td-form button{width:100%; justify-content:center}
.td-magnet__cover{position:relative; width:min(240px,60vw); aspect-ratio:2/3; border-radius:6px; overflow:hidden; border:1px solid var(--td-line-2);
box-shadow:0 0 0 5px rgba(242,185,39,.07), 0 40px 70px -30px rgba(0,0,0,.9); transform:rotate(-3deg)}
.td-magnet__cover img{width:100%; height:100%; object-fit:cover}
.td-magnet__cover .td-badge{left:12px; top:12px}
.td-magnet__count{margin-top:14px}
/* Two columns first: cover beside the pitch, form underneath, spanning. */
@media (min-width:760px){
.td-magnet--wait{grid-template-columns:200px minmax(0,1fr); gap:clamp(26px,3vw,44px); align-items:start}
.td-magnet--wait > :last-child{grid-column:1 / -1}
}
/* Three columns only once there is genuinely room for a usable form. */
@media (min-width:1120px){
.td-magnet--wait{grid-template-columns:210px minmax(0,1fr) minmax(270px,.85fr); align-items:center}
.td-magnet--wait > :last-child{grid-column:auto}
}
@media (max-width:899px){ .td-magnet__cover{transform:none; margin:0 auto} }
/* ---------- a coming soon card with its own waitlist ---------- */
.td-card--wait{cursor:pointer}
.td-card--wait .td-card__foot{flex-wrap:wrap}
.td-card--wait .td-card__price{font-size:24px}
.td-card__wait{
padding:11px 15px; border-radius:999px; border:1px solid var(--td-gold); background:transparent; color:var(--td-gold);
font-family:var(--td-body); font-weight:700; font-size:11px; line-height:1; letter-spacing:.12em; text-transform:uppercase;
white-space:nowrap; cursor:pointer; transition:background .35s, color .35s;
}
.td-card--wait:hover .td-card__wait,
.td-card__wait:focus-visible{background:var(--td-gold); color:#0A0E14}
.td-card__wait:focus-visible{outline:2px solid var(--td-gold); outline-offset:3px}
/* ---------- the waitlist pop-up ---------- */
.td-wait{
width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0;
border:1px solid var(--td-line-2); border-radius:12px; background:var(--td-surface); color:var(--td-text);
box-shadow:0 40px 90px -30px rgba(0,0,0,.85); overflow:auto;
}
.td-wait__in{position:relative; padding:clamp(26px,5vw,38px)}
.td-wait::backdrop{background:rgba(8,11,16,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.td-wait__x{
position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
border:1px solid var(--td-line-2); background:none; color:var(--td-text); font-size:20px; line-height:1; cursor:pointer;
transition:background .3s, color .3s, border-color .3s;
}
.td-wait__x:hover{background:var(--td-gold); border-color:var(--td-gold); color:#0A0E14}
.td-wait__eyebrow{margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--td-gold)}
.td-wait__title{margin:0 0 10px; padding-right:40px; font-family:var(--td-display); font-weight:800; font-size:clamp(24px,4.4vw,30px); line-height:1.06; letter-spacing:-.01em; text-transform:uppercase}
.td-wait__name{display:block; color:var(--td-gold)}
.td-wait__lead{margin:0 0 22px; color:var(--td-muted); font-size:14.5px; font-weight:300; line-height:1.6}
.td-wait .td-form{flex-direction:column; align-items:stretch}
.td-wait .td-form input{flex:0 0 auto; width:100%}
.td-wait.td-wait--done .td-form{display:none}
.td-card--flow{cursor:default}
.td-card--flow:hover{transform:none; border-color:var(--td-line); background:var(--td-surface); box-shadow:none}
.td-card--flow:hover .td-card__frame img{transform:none}
.td-card--flow:hover .td-card__go{background:transparent; border-color:var(--td-line-2); color:inherit; transform:none}
/* ============================================================
CUSTOM CURSOR
============================================================ */
/* Only over the footer name: the regular mouse everywhere else. */
.td-cur{position:fixed; top:0; left:0; z-index:9998; pointer-events:none; width:34px; height:34px; margin:-17px 0 0 -17px; opacity:0; transition:opacity .2s}
.td-cur svg{position:absolute; left:50%; top:50%; width:26px; height:30px; transform:translate(-50%,-50%) rotate(-28deg) scale(0); opacity:0;
transition:transform .35s var(--td-out), opacity .25s}
.td-cur.td-pick{opacity:1}
.td-cur.td-pick svg{transform:translate(-50%,-50%) rotate(-28deg) scale(1); opacity:1}
.td-cur.td-pick.td-strum svg{transform:translate(-50%,-50%) rotate(-52deg) scale(.9); transition-duration:.08s}
/* Only where the pick can be drawn: with reduced motion it is not, and the normal pointer stays. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .td-footer__big{cursor:none} }
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
:root{--td-slant:0deg}
*,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
[data-reveal]{opacity:1!important; transform:none!important}
.td-h2 .td-word i{transform:none!important}
.td-mod{opacity:1!important}
.td-cur,.td-grain{display:none}
}
/* ============================================================
SECTION: CONTACT
============================================================ */
.td-contact__grid{display:grid; gap:clamp(38px,6vw,80px); align-items:start}
@media (min-width:900px){ .td-contact__grid{grid-template-columns:1fr 1fr} }
.td-contact__cards{display:grid; gap:14px; margin:34px 0 30px}
.td-contact__card{
display:flex; align-items:center; gap:16px; padding:18px 20px;
background:var(--td-surface); border:1px solid var(--td-line); border-radius:6px;
transition:border-color .4s;
}
.td-contact__card:hover{border-color:var(--td-line-2)}
.td-contact__ico{
width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:grid; place-items:center;
background:rgba(242,185,39,.12); color:var(--td-gold);
}
.td-contact__ico svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.td-contact__label{
font-family:var(--td-body); font-weight:600; font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:var(--td-dim); margin:0 0 4px; line-height:1;
}
.td-contact__card a,.td-contact__card span{font-size:15px; color:var(--td-text); transition:color .35s}
.td-contact__card a:hover{color:var(--td-gold)}
/* ---------- the form ---------- */
.td-contact{
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
padding:clamp(24px,3.4vw,40px); position:relative; overflow:hidden;
}
.td-contact::before{
content:""; position:absolute; right:-18%; top:-40%; width:60%; aspect-ratio:1; pointer-events:none;
background:radial-gradient(circle, rgba(242,185,39,.13), transparent 68%);
}
.td-contact > *{position:relative}
.td-field{margin:0 0 18px}
.td-field label{
display:block; margin-bottom:8px;
font-family:var(--td-body); font-weight:600; font-size:10.5px;
letter-spacing:.18em; text-transform:uppercase; color:var(--td-muted);
}
.td-req{color:var(--td-gold)}
.td-field input,.td-field textarea{
/* A textarea falls back to the browser's monospace face without this. */
width:100%; padding:14px 16px; border-radius:6px; font-family:var(--td-body); font-size:15px;
background:var(--td-bg); border:1px solid var(--td-line-2); color:var(--td-text);
transition:border-color .35s, background .35s;
}
.td-field textarea{resize:vertical; min-height:130px; line-height:1.6}
.td-field input:focus,.td-field textarea:focus{outline:none; border-color:var(--td-gold); background:var(--td-surface-2)}
.td-field input::placeholder,.td-field textarea::placeholder{color:var(--td-dim)}
.td-contact .td-btn{margin-top:6px}
/* The honeypot. Off screen rather than display:none, because some bots skip
anything that is display:none and fill in everything else. */
.td-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.td-note{
margin:0 0 22px; padding:14px 18px; border-radius:6px; font-size:14px; line-height:1.55;
border:1px solid var(--td-line-2); background:var(--td-bg);
}
.td-note--ok{border-color:rgba(242,185,39,.5); color:var(--td-gold-hi)}
.td-note--error{border-color:rgba(212,83,42,.55); color:#E8917A}
/* ---------- prose, for pages with plain content ---------- */
.td-prose{max-width:800px}
.td-prose h1,.td-prose h2,.td-prose h3{margin-bottom:18px}
.td-prose p,.td-prose li{color:var(--td-muted); font-size:15.5px; font-weight:300}
.td-prose a{color:var(--td-gold); text-decoration:underline; text-underline-offset:3px}
.td-prose img{border-radius:6px; margin:22px 0}
.td-prose ul,.td-prose ol{padding-left:22px; margin:0 0 20px}
.td-prose li{margin-bottom:8px}
/* ============================================================
SECTION: ACCOUNT, sign in / register / password / profile
============================================================ */
/* ---------- the guitar shade ----------
A Strat cutout out of his own media library (uploads/2021/06), cropped to
the guitar, resampled small and tinted to the brand gold when the file was
built, so painting it costs no filter and no second layer. 14KB of WebP.
It is a background rather than an because a background image is only
fetched when a rule matches something in the page: every template without
td-shade on it never asks the server for the file at all.
Eight per cent is the whole idea. Enough that the page feels like it belongs
to a guitarist, not enough to read as a picture or to fight the form. */
.td-shade{overflow:hidden; isolation:isolate}
.td-shade::before{
content:""; position:absolute; z-index:-1; pointer-events:none;
top:50%; left:calc(50% + clamp(190px, 26vw, 380px));
width:min(30vw, 290px); aspect-ratio:220 / 681;
transform:translate(-50%,-50%) rotate(-11deg);
background:url("../img/guitar-shade.webp") center/contain no-repeat;
opacity:.055;
/* Dissolve both ends so the section edge never cuts it off square. */
-webkit-mask-image:linear-gradient(180deg, transparent, #000 15%, #000 78%, transparent 99%);
mask-image:linear-gradient(180deg, transparent, #000 15%, #000 78%, transparent 99%);
}
/* On a phone the panel is as wide as the screen, so a shade behind it is a
shade nobody sees. Move it inside the card, cropped to the body, where it
reads as a watermark instead of a backdrop. */
@media (max-width:900px){
.td-account.td-shade::before{display:none}
.td-shade .td-account__panel::after{
content:""; position:absolute; z-index:0; pointer-events:none;
right:-58px; bottom:-84px; width:min(64vw, 228px); aspect-ratio:220 / 681;
transform:rotate(-17deg);
background:url("../img/guitar-shade.webp") center/contain no-repeat;
opacity:.06;
-webkit-mask-image:linear-gradient(180deg, transparent 16%, #000 58%);
mask-image:linear-gradient(180deg, transparent 16%, #000 58%);
}
}
/* The profile is a wide grid, not a centred panel, so the guitar goes to the
empty corner beside the heading and fades out before the course cards. */
.td-shade--side::before{
top:0; left:auto; right:min(3vw, 48px);
width:min(34vw, 320px);
transform:rotate(-9deg) translateY(-6%);
opacity:.045;
-webkit-mask-image:linear-gradient(180deg, #000 0 44%, transparent 86%);
mask-image:linear-gradient(180deg, #000 0 44%, transparent 86%);
}
@media (max-width:900px){
.td-shade--side::before{
right:-14vw; width:min(62vw, 280px); opacity:.04;
transform:rotate(-7deg) translateY(-4%);
}
}
/* A shade is decoration. If the visitor has asked for less movement they have
usually also asked for less noise, so drop it back further. */
@media (prefers-reduced-motion:reduce){
.td-shade::before{opacity:.035}
}
.td-account{display:flex; align-items:center; min-height:70vh}
.td-account__panel{
width:100%; max-width:560px; margin:0 auto; position:relative; overflow:hidden;
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
padding:clamp(28px,4vw,52px);
}
.td-account__panel::before{
content:""; position:absolute; right:-22%; top:-46%; width:66%; aspect-ratio:1; pointer-events:none;
background:radial-gradient(circle, rgba(242,185,39,.14), transparent 68%);
}
.td-account__panel > *{position:relative; z-index:1}
.td-account .td-h2{font-size:clamp(30px,3.8vw,52px); line-height:1; margin-bottom:14px}
.td-account .td-lead{margin-bottom:28px; font-size:15px}
.td-account__form{margin:0}
.td-account__row{display:grid; gap:0 16px}
@media (min-width:520px){ .td-account__row{grid-template-columns:1fr 1fr} }
.td-account .td-btn{width:100%; justify-content:center; margin-top:8px}
.td-account__alt{
margin:24px 0 0; padding-top:22px; border-top:1px solid var(--td-line);
font-size:13.5px; color:var(--td-muted); display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.td-account__alt a{color:var(--td-gold); text-decoration:underline; text-underline-offset:3px}
.td-check{margin:0 0 18px; font-size:13.5px; color:var(--td-muted)}
.td-check label{display:flex; align-items:center; gap:9px; cursor:pointer}
.td-check input{width:16px; height:16px; accent-color:var(--td-gold)}
.td-hint{display:block; margin-top:7px; font-size:11.5px; color:var(--td-dim); letter-spacing:0; text-transform:none}
/* ============================================================
SECTION: SINGLE COURSE
The sales page, and for a student who already owns it, the way back in.
Everything here is content driven: any section whose fields are empty is
not printed at all, so these rules never style an empty box.
The section markers on this page carry a label and no number.
============================================================ */
/* ---------- hero ---------- */
/* The client's own photograph behind the headline, dark enough in the file
itself that the copy over it needs no extra help, plus a gradient so the
left hand column stays as plain as it was. */
.td-chero--shot{isolation:isolate}
.td-chero__shot{
position:absolute; inset:0; z-index:-1; pointer-events:none;
background-position:66% 28%; background-size:cover; background-repeat:no-repeat;
opacity:.5;
}
.td-chero__shot::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(90deg, #0A0E14 0%, rgba(10,14,20,.92) 34%, rgba(10,14,20,.6) 68%, rgba(10,14,20,.72) 100%),
linear-gradient(0deg, #0A0E14 0%, rgba(10,14,20,0) 42%);
}
@media (max-width:899px){ .td-chero__shot{opacity:.34; background-position:62% 22%} }
.td-chero__grid{display:grid; gap:44px; align-items:center}
@media (min-width:1000px){ .td-chero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:60px} }
.td-chero .td-h2{margin-bottom:18px}
.td-chero__intro{margin-bottom:32px}
.td-chero__intro .td-hl{color:var(--td-white); font-weight:500}
.td-chero__proof{margin:22px 0 0}
.td-chero__proof .td-proof{font-size:13.5px}
/* The client's own sentence, so it reads as a sentence rather than a label. */
.td-chero__size{margin:22px 0 0; font-size:14px; color:var(--td-muted); font-weight:400; line-height:1.5}
.td-chero__buy{display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px}
.td-chero__price{display:flex; flex-direction:column; gap:2px; line-height:1}
.td-chero__price span{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-dim); font-weight:600}
.td-chero__price b{font-family:var(--td-display); font-weight:800; font-size:44px; letter-spacing:-.01em; color:var(--td-text)}
/* The owner's panel replaces the buy panel, never sits beside it. */
.td-chero__own{
padding:24px 26px 26px; border:1px solid var(--td-line); border-radius:8px;
background:var(--td-surface); display:grid; gap:14px; max-width:460px;
}
.td-chero__owned{margin:0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-gold); font-weight:700}
.td-chero__own .td-btn{justify-content:center; margin-top:4px}
/* The cover carries its own frame, so this one only positions the caption and
must not clip the frame's focus ring or its hover glow. */
.td-chero__video{margin:0; position:relative}
/* A YouTube link in the headline: a cover that opens the player, not a