/* ============================================================
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, enqueued first. */
/* ---------- 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', system-ui, -apple-system, 'Segoe UI', sans-serif;
--td-body: 'Inter', 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: PRELOADER
============================================================ */
.td-pre{position:fixed; inset:0; z-index:9999; background:var(--td-bg); display:grid; place-items:center; overflow:hidden}
.td-pre__inner{text-align:center; padding:0 24px}
.td-pre__name{
font-family:var(--td-display); font-weight:900;
font-size:clamp(64px, 15vw, 190px); line-height:.86; letter-spacing:.005em; text-transform:uppercase;
}
.td-pre__name b{transform:skewX(var(--td-slant))}
.td-pre__name b{display:block; font-weight:inherit}
.td-pre__ch{display:inline-block; transform:translateY(110%) rotate(5deg); opacity:0; transition:transform .9s var(--td-out), opacity .5s linear}
.td-pre.td-go .td-pre__ch{transform:translateY(0) rotate(0); opacity:1}
.td-pre__ch--a{color:var(--td-gold)}
.td-pre__rail{margin:36px auto 0; width:min(320px,66vw); height:2px; background:var(--td-hair); position:relative; overflow:hidden}
.td-pre__rail i{position:absolute; inset:0 100% 0 0; background:var(--td-gold); transition:right .12s linear}
.td-pre__pct{margin-top:14px; font-family:var(--td-display); font-size:26px; letter-spacing:.14em; color:var(--td-muted)}
.td-pre.td-out{transform:translateY(-100%); transition:transform .85s var(--td-out)}
/* ============================================================
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)}
.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); transition:clip-path .8s var(--td-out)}
.td-menu.td-open{clip-path:circle(150% at calc(100% - 46px) 46px)}
.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;
}
.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 quiet corner ----------
This sits over the lower right of the figure, which is why the hint is
--td-muted at 11px and not --td-dim at 10px. Sampled the real composite
(figure pixel x mask alpha x scrim alpha) at six points across the aside
box at 1280x720: effective ground is rgb(10-20,14-19,18-22) and #86888A
scores 5.21:1 to 5.44:1. Passes AA. --td-dim would be 2.91:1 and fail. */
.td-stage__aside{
flex:0 0 auto; text-align:right;
display:flex; flex-direction:column; align-items:flex-end;
}
.td-stage__hint{
margin:0 0 12px; min-height:14px;
font-family:var(--td-body); font-size:11px; font-weight:600; line-height:1.2;
letter-spacing:.2em; text-transform:uppercase; color:var(--td-muted);
}
/* The keyboard entry point. Hidden until focused, then a gold pill above the
toggle. Skip link pattern: the small shift on focus is the point. */
.td-stage__play{
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; border:0; background:none; cursor:pointer;
}
.td-stage__play:focus-visible{
position:static; width:auto; height:auto; clip:auto; overflow:visible;
margin:0 0 12px; padding:8px 14px;
border:1px solid var(--td-gold); border-radius:999px; color:var(--td-gold);
font-family:var(--td-body); font-size:10px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
}
/* ---------- 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}
.td-stage__hint{margin:0}
}
/* ---------- 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}
.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}
.td-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; padding-top:36px; border-top:1px solid var(--td-line)}
.td-stat__n{font-family:var(--td-display); font-size:clamp(54px,7vw,84px); line-height:1; color:var(--td-gold); letter-spacing:.02em}
.td-stat__l{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-dim); margin-top:8px; line-height:1.5; font-weight:600}
@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)} }
.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)}
.td-card__frame{position:relative; overflow:hidden; aspect-ratio:3/4; background:#0A0E14}
.td-card__frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.05s var(--td-out), filter .6s}
.td-card:hover .td-card__frame img{transform:scale(1.07)}
.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}
.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__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-footer__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,.td-footer__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,.td-footer__snd.td-on i{background:var(--td-gold); box-shadow:0 0 0 4px rgba(242,185,39,.18)}
.td-snd:hover,.td-footer__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%); transition:transform .6s var(--td-out)}
.td-bar.td-show{transform:none; pointer-events:auto}
.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}
.td-bar__s{font-family:var(--td-body); font-size:11px; color:var(--td-muted); letter-spacing:.06em; white-space:nowrap; 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){ .td-bar__s{display:none} .td-bar__t{font-size:20px} .td-bar .td-btn span{font-size:11px} }
/* ---------- 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} }
.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
============================================================ */
.td-cur,.td-cur-dot{position:fixed; top:0; left:0; z-index:9998; pointer-events:none; border-radius:50%; opacity:0}
.td-cur{width:34px; height:34px; border:1px solid var(--td-line-2); margin:-17px 0 0 -17px; transition:width .35s var(--td-out), height .35s var(--td-out), margin .35s var(--td-out), background .35s, border-color .35s, opacity .3s}
.td-cur-dot{width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--td-gold); transition:opacity .3s}
.td-cur.td-grow{width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(242,185,39,.1); border-color:var(--td-gold)}
/* Over the name the ring becomes a gold plectrum, and it strums on every pluck */
.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{border-color:transparent; background:transparent}
.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}
.td-cur.td-pick ~ .td-cur-dot{opacity:0}
@media (hover:hover) and (pointer:fine){ .td-cur,.td-cur-dot{opacity:1} }
/* ============================================================
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-cur-dot,.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-contact__row{display:grid; gap:0 16px}
@media (min-width:560px){ .td-contact__row{grid-template-columns:1fr 1fr} }
.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{
width:100%; padding:14px 16px; border-radius:6px; 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-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.
============================================================ */
/* ---------- hero ---------- */
.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__size{margin:22px 0 0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--td-dim); font-weight:600}
.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}
.td-chero__video{margin:0; position:relative; border:1px solid var(--td-line); border-radius:8px; overflow:hidden; background:#000}
.td-chero__video video{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.td-chero__dur{
position:absolute; left:14px; bottom:14px; margin:0; padding:6px 12px; border-radius:999px;
background:rgba(10,14,20,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--td-text); font-weight:600;
}
.td-chero__stats{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
margin-top:56px; background:var(--td-line); border:1px solid var(--td-line); border-radius:8px; overflow:hidden;
}
.td-chero__stat{background:var(--td-bg); padding:26px 22px; display:grid; gap:6px}
.td-chero__stat b{font-family:var(--td-display); font-weight:800; font-size:clamp(28px,3.4vw,40px); line-height:1; color:var(--td-gold); letter-spacing:-.01em}
.td-chero__stat span{font-size:12px; color:var(--td-muted); font-weight:300; line-height:1.45}
/* ---------- breakdown ---------- */
.td-cbreak .td-h2{margin-bottom:44px}
.td-cgrid{display:grid; gap:18px; grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){ .td-cgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1040px){ .td-cgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.td-cbreak__card{
background:var(--td-surface); border:1px solid var(--td-line); border-radius:6px;
padding:30px 28px 32px; display:flex; flex-direction:column; gap:12px;
transition:transform .5s var(--td-out), border-color .5s, background .5s;
}
.td-cbreak__card:hover{transform:translateY(-6px); border-color:rgba(242,185,39,.5); background:var(--td-surface-2)}
.td-cbreak__n{font-family:var(--td-display); font-weight:800; font-size:26px; line-height:1; color:var(--td-gold); letter-spacing:.06em}
.td-cbreak__t{font-size:clamp(20px,2.3vw,27px); text-transform:uppercase; line-height:1.04; letter-spacing:-.02em; margin:0}
.td-cbreak__p{margin:0; font-size:14.5px; color:var(--td-muted); font-weight:300; line-height:1.65}
.td-cbreak__card--hi{background:var(--td-gold); border-color:var(--td-gold)}
.td-cbreak__card--hi:hover{background:var(--td-gold-hi); border-color:var(--td-gold-hi); transform:translateY(-6px)}
.td-cbreak__card--hi .td-cbreak__n,
.td-cbreak__card--hi .td-cbreak__t,
.td-cbreak__card--hi .td-cbreak__p{color:#0A0E14}
/* ---------- fit and inclusions ---------- */
.td-cfit__grid{display:grid; gap:36px}
@media (min-width:880px){ .td-cfit__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px} }
/* The shared checklist normally follows other content and carries a rule above
it. Standing on its own in a grid cell it needs neither. */
.td-incl--flush{margin-top:0; padding-top:0; border-top:0}
.td-incl li img{width:18px; height:18px; flex:0 0 18px; object-fit:contain}
.td-cfit__g{
margin:44px 0 0; padding-top:28px; border-top:1px solid var(--td-line);
font-size:13.5px; color:var(--td-dim); font-weight:300; max-width:74ch;
}
/* ---------- instructor ---------- */
.td-cins__grid{display:grid; gap:40px; align-items:center}
@media (min-width:900px){ .td-cins__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px} }
.td-cins__fig{margin:0; border:1px solid var(--td-line); border-radius:8px; overflow:hidden; background:var(--td-surface)}
.td-cins__fig img{width:100%; height:auto; display:block}
.td-cins .td-h2{margin-bottom:18px}
.td-cins__stats{display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:34px; padding-top:28px; border-top:1px solid var(--td-line)}
.td-cins__stat{display:grid; gap:4px}
.td-cins__stat b{font-family:var(--td-display); font-weight:800; font-size:clamp(24px,2.8vw,34px); line-height:1; color:var(--td-gold)}
.td-cins__stat span{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--td-dim); font-weight:600}
/* ---------- closing call to action ---------- */
.td-ccta__panel{
max-width:760px; margin:0 auto; padding:clamp(30px,4.4vw,58px);
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
}
.td-ccta__panel > *{position:relative; z-index:1}
.td-ccta .td-h2{margin-bottom:16px}
.td-ccta .td-lead{margin-bottom:30px}
.td-ccta .td-incl{margin-bottom:34px}
.td-ccta__buy{display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px}
.td-ccta__buy .td-btn{flex:1 1 240px; justify-content:center}
.td-ccta__g{
margin:26px 0 0; padding-top:22px; border-top:1px solid var(--td-line);
font-size:13px; color:var(--td-dim); font-weight:300;
}
.td-ccta__g b{display:block; color:var(--td-text); font-weight:700; letter-spacing:.02em; margin-bottom:4px}
/* ============================================================
SECTION: WOOCOMMERCE, the shop and the product page
Only the shop, the product category archives and the single product, all of
which come through woocommerce.php. Cart, checkout and my account render
through page.php and nothing in this block reaches them.
The double class prefix .td-section.td-woo is deliberate. WooCommerce writes
its own rules as ".woocommerce div.product div.images", and body carries the
.woocommerce class, so a single class prefix only ties with them and then
loses on source order, because woocommerce.css is enqueued after main.css.
Two classes wins the cascade honestly, with no !important anywhere.
============================================================ */
.td-woo .woocommerce-breadcrumb{
margin:0 0 26px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--td-dim); font-weight:600;
}
.td-woo .woocommerce-breadcrumb a{color:var(--td-muted)}
.td-woo .woocommerce-breadcrumb a:hover{color:var(--td-gold)}
/* ---------- single product ---------- */
.td-section.td-woo div.product{display:grid; gap:44px; align-items:start; margin:0}
@media (min-width:900px){
.td-section.td-woo div.product{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px}
}
.td-section.td-woo div.product div.images,
.td-section.td-woo div.product div.summary{width:auto; float:none; margin:0}
.td-section.td-woo div.product .woocommerce-tabs,
.td-section.td-woo div.product .related,
.td-section.td-woo div.product .upsells{grid-column:1 / -1; margin-top:20px}
.td-woo .woocommerce-product-gallery{border:1px solid var(--td-line); border-radius:8px; overflow:hidden; background:var(--td-surface)}
.td-woo .woocommerce-product-gallery img{display:block; width:100%; height:auto}
.td-woo .woocommerce-product-gallery__trigger{display:none}
.td-woo .product_title{
font-family:var(--td-display); font-weight:800; text-transform:uppercase;
font-size:clamp(30px,4vw,54px); line-height:.96; letter-spacing:-.02em; margin:0 0 18px;
}
.td-section.td-woo div.product p.price,
.td-section.td-woo div.product span.price{
font-family:var(--td-display); font-weight:800; font-size:40px; line-height:1;
color:var(--td-gold); margin:0 0 24px;
}
.td-section.td-woo div.product p.price del{color:var(--td-dim); font-size:26px; margin-right:10px}
.td-section.td-woo div.product p.price ins{text-decoration:none}
.td-woo .woocommerce-product-details__short-description{color:var(--td-muted); font-weight:300; margin-bottom:28px}
.td-woo .product_meta{
margin-top:26px; padding-top:20px; border-top:1px solid var(--td-line);
font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--td-dim); font-weight:600;
}
.td-woo .product_meta a{color:var(--td-muted)}
.td-woo .product_meta a:hover{color:var(--td-gold)}
/* ---------- buttons, the theme pill ---------- */
.td-section.td-woo .button,
.td-section.td-woo a.button,
.td-section.td-woo button.button,
.td-section.td-woo input.button,
.td-section.td-woo button.single_add_to_cart_button{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:16px 32px; border:0; border-radius:999px;
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; cursor:pointer;
transition:background .4s var(--td-ease), transform .5s var(--td-out);
}
.td-section.td-woo .button:hover,
.td-section.td-woo a.button:hover,
.td-section.td-woo button.button:hover,
.td-section.td-woo input.button:hover,
.td-section.td-woo button.single_add_to_cart_button:hover{background:var(--td-gold-hi); color:#0A0E14; transform:translateY(-2px)}
.td-woo form.cart{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 8px}
.td-woo .quantity input.qty{
width:76px; padding:14px 10px; text-align:center; border-radius:999px;
background:var(--td-bg); border:1px solid var(--td-line-2); color:var(--td-text);
}
/* ---------- tabs and reviews ---------- */
.td-woo .woocommerce-tabs{padding-top:36px; border-top:1px solid var(--td-line)}
.td-section.td-woo .woocommerce-tabs ul.tabs{margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.td-section.td-woo .woocommerce-tabs ul.tabs::before{display:none}
.td-section.td-woo .woocommerce-tabs ul.tabs li{
margin:0; padding:0; border:1px solid var(--td-line); border-radius:999px; background:var(--td-surface);
}
.td-section.td-woo .woocommerce-tabs ul.tabs li::before,
.td-section.td-woo .woocommerce-tabs ul.tabs li::after{display:none}
.td-section.td-woo .woocommerce-tabs ul.tabs li a{
display:block; padding:11px 24px; font-size:11.5px; letter-spacing:.16em;
text-transform:uppercase; font-weight:600; color:var(--td-muted);
}
.td-section.td-woo .woocommerce-tabs ul.tabs li.active{background:var(--td-gold); border-color:var(--td-gold)}
.td-section.td-woo .woocommerce-tabs ul.tabs li.active a{color:#0A0E14}
.td-woo .woocommerce-Tabs-panel h2{font-size:clamp(20px,2.2vw,27px); text-transform:uppercase; margin-bottom:14px}
.td-woo .woocommerce-Tabs-panel{color:var(--td-muted); font-weight:300}
/* ---------- product grids, shop and related ---------- */
.td-section.td-woo ul.products{
display:grid; gap:22px; margin:0; padding:0; list-style:none;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.td-section.td-woo ul.products::before,
.td-section.td-woo ul.products::after{display:none}
.td-section.td-woo ul.products li.product{
width:auto; float:none; margin:0; text-align:left;
background:var(--td-surface); border:1px solid var(--td-line); border-radius:6px; overflow:hidden;
transition:transform .5s var(--td-out), border-color .5s;
}
.td-section.td-woo ul.products li.product:hover{transform:translateY(-6px); border-color:rgba(242,185,39,.5)}
.td-section.td-woo ul.products li.product img{margin:0; width:100%; height:auto; display:block}
.td-section.td-woo ul.products li.product .woocommerce-loop-product__title{
font-family:var(--td-display); font-weight:800; text-transform:uppercase;
font-size:20px; line-height:1.05; letter-spacing:-.02em; padding:20px 20px 0; margin:0;
}
.td-section.td-woo ul.products li.product .price{
display:block; padding:8px 20px 0; color:var(--td-gold);
font-family:var(--td-display); font-weight:800; font-size:24px;
}
.td-section.td-woo ul.products li.product .button{margin:18px 20px 22px; padding:13px 24px; font-size:11.5px}
.td-woo .related > h2,
.td-woo .upsells > h2{font-size:clamp(20px,2.4vw,28px); text-transform:uppercase; margin:0 0 24px; letter-spacing:-.02em}
/* ---------- archive chrome ---------- */
.td-woo .woocommerce-products-header__title{
font-family:var(--td-display); font-weight:800; text-transform:uppercase;
font-size:clamp(30px,4vw,54px); line-height:.96; letter-spacing:-.02em; margin:0 0 22px;
}
.td-woo .woocommerce-result-count{font-size:12px; color:var(--td-dim); font-weight:500}
.td-woo .woocommerce-ordering select,
.td-woo select{
padding:11px 16px; border-radius:999px; background:var(--td-surface);
border:1px solid var(--td-line-2); color:var(--td-text); font-size:12.5px;
}
/* ---------- notices ---------- */
.td-section.td-woo .woocommerce-message,
.td-section.td-woo .woocommerce-info,
.td-section.td-woo .woocommerce-error{
margin:0 0 26px; padding:16px 20px; list-style:none;
background:var(--td-surface); border:1px solid var(--td-line); border-left:3px solid var(--td-gold);
border-radius:6px; color:var(--td-text); font-size:14px;
}
.td-section.td-woo .woocommerce-error{border-left-color:#D9534F}
.td-section.td-woo .woocommerce-message::before,
.td-section.td-woo .woocommerce-info::before,
.td-section.td-woo .woocommerce-error::before{display:none}
/* ============================================================
SECTION: SEARCH
============================================================ */
.td-search .td-lead{margin:16px 0 30px}
.td-search__form{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 48px; max-width:620px}
.td-search__form input[type="search"]{
flex:1 1 240px; padding:15px 22px; border-radius:999px;
background:var(--td-surface); border:1px solid var(--td-line-2); color:var(--td-text);
}
.td-search__form input[type="search"]::placeholder{color:var(--td-dim)}
.td-search__form input[type="search"]:focus{outline:2px solid var(--td-gold); outline-offset:2px}
.td-search__list{display:grid; gap:1px; background:var(--td-line); border-block:1px solid var(--td-line)}
.td-result{background:var(--td-bg); transition:background .4s}
.td-result:hover{background:var(--td-surface)}
.td-result__link{display:block; padding:26px 4px 28px}
.td-result__t{font-size:clamp(19px,2.2vw,26px); text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; margin:0}
.td-result__p{margin:10px 0 0; font-size:14.5px; color:var(--td-muted); font-weight:300; max-width:78ch}
.td-result__go{
display:inline-flex; align-items:center; gap:9px; margin-top:14px;
font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--td-dim); font-weight:600;
}
.td-result__go svg{width:15px; height:15px; fill:none; stroke:var(--td-gold); stroke-width:2; transition:transform .45s var(--td-out)}
.td-result:hover .td-result__go{color:var(--td-gold)}
.td-result:hover .td-result__go svg{transform:translateX(5px)}
.td-search__none{margin-top:8px}
.td-search .pagination,
.td-search .nav-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px}
.td-search .page-numbers{
display:grid; place-items:center; min-width:42px; height:42px; padding:0 14px;
border:1px solid var(--td-line); border-radius:999px; font-size:13px; font-weight:600; color:var(--td-muted);
}
.td-search .page-numbers.current{background:var(--td-gold); border-color:var(--td-gold); color:#0A0E14}
.td-search .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
/* ============================================================
SECTION: CONTACT PAGE
The page had a heading, two small cards and a bare form on a black field,
and the client's word for it was dead. What it was missing was a face, a
container around the form, and something in the empty half of the layout.
============================================================ */
.td-contact-page__lead{margin-bottom:48px; max-width:62ch}
/* The aside is narrower than the form on purpose: the form is the job of the
page, so it gets the width and the eye. */
.td-contact-page__grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:940px){
.td-contact-page__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
}
/* No frame, no radius, no card. The lower edge of the source file is already
composited onto #0A0E14, this page's background, so the photograph ends by
dissolving into the page rather than stopping at a border. */
.td-contact-page__photo{margin:0 0 8px; max-width:400px}
.td-contact-page__photo img{width:100%; height:auto; display:block}
.td-contact-page__aside .td-contact__cards{margin-top:0}
.td-contact-page__panel{
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
padding:clamp(26px,3.4vw,44px);
}
.td-contact-page__panel .td-acct__h{margin:0 0 8px}
.td-contact-page__panel .td-hint{margin:0 0 26px; max-width:46ch}
/* The shared form part carries its own panel treatment for use elsewhere on the
site. Inside this one it would be a box in a box. */
.td-contact-page__panel .td-contact{background:none; border:0; padding:0}
.td-contact-page__panel .td-contact::before{display:none}
/* The guitar shade sits behind the aside, not behind the form, or it would be
reading through the panel the visitor is typing into. */
@media (min-width:940px){
.td-contact-page.td-shade::before{
left:auto; right:auto; margin-left:0;
left:calc(50% - clamp(150px, 20vw, 300px));
opacity:.05;
}
}
/* ============================================================
SECTION: LIVE DATES
The tour list itself reuses .td-leg and .td-date, which were already in this
stylesheet because JavaScript used to build that markup. Only the single
event page and the archive need anything new.
============================================================ */
.td-live__all{margin:8px 0 0}
/* ---------- one event ---------- */
.td-event__grid{display:grid; gap:40px; align-items:start}
@media (min-width:960px){ .td-event__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:56px} }
.td-event .td-mark b{color:var(--td-gold); letter-spacing:.04em}
.td-event .td-h2{margin-bottom:12px}
.td-event__venue{
margin:0 0 30px; font-family:var(--td-display); font-weight:700;
font-size:clamp(19px,2.2vw,25px); text-transform:uppercase; letter-spacing:-.01em; color:var(--td-text);
}
.td-event__venue s{
display:block; margin-top:5px; text-decoration:none;
font-family:var(--td-body); font-weight:600; font-size:11.5px;
letter-spacing:.18em; text-transform:uppercase; color:var(--td-gold);
}
.td-event__facts{display:grid; gap:1px; margin:0; background:var(--td-line); border:1px solid var(--td-line); border-radius:8px; overflow:hidden}
.td-event__facts > div{background:var(--td-bg); display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:15px 20px}
.td-event__facts dt{
margin:0; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
color:var(--td-dim); font-weight:700; padding-top:2px;
}
.td-event__facts dd{margin:0; font-size:14.5px; color:var(--td-text); font-weight:300}
.td-event__map{display:inline-block; margin-top:6px; color:var(--td-gold); text-decoration:underline; text-underline-offset:3px; font-size:13px}
.td-event__body{margin-top:32px}
.td-event__side{display:grid; gap:22px}
.td-event__poster{margin:0; border:1px solid var(--td-line); border-radius:8px; overflow:hidden; background:var(--td-surface)}
.td-event__poster img{width:100%; height:auto; display:block}
.td-event__ticket{
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
padding:clamp(22px,2.8vw,32px); display:grid; gap:14px;
}
.td-event__ticket .td-btn{width:100%; justify-content:center}
.td-event__seats{
margin:0; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--td-gold); font-weight:700;
}
.td-event__note{margin:0; font-size:13px; color:var(--td-dim); font-weight:300}
.td-event__closed{
margin:0; font-family:var(--td-display); font-weight:800;
font-size:clamp(22px,2.6vw,30px); text-transform:uppercase; color:var(--td-muted); letter-spacing:-.02em;
}
/* The enquiry form takes the whole panel, so it does not need the panel's grid
gap fighting the form's own spacing. */
.td-event__ticket .td-contact{margin-top:4px}
.td-event__ticket .td-contact__form{margin:0}
.td-event__ticket .td-acct__h{margin:0}
/* A sold out date still shows in the list, marked, rather than disappearing. */
.td-date__next--out{background:var(--td-dim); color:var(--td-text)}
.td-date:hover .td-date__next--out{background:#0A0E14; color:var(--td-text)}
/* ---------- already played ---------- */
.td-past__list{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--td-line); border-block:1px solid var(--td-line)}
.td-past__list li{background:var(--td-bg); transition:background .35s}
.td-past__list li:hover{background:var(--td-surface)}
.td-past__list a{
display:grid; grid-template-columns:minmax(0,180px) minmax(0,1fr); gap:20px;
padding:16px 6px; align-items:baseline;
}
@media (max-width:620px){ .td-past__list a{grid-template-columns:minmax(0,1fr); gap:4px} }
.td-past__when{
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--td-dim); font-weight:700;
}
.td-past__where{font-size:14.5px; color:var(--td-muted); font-weight:300}
.td-past__list li:hover .td-past__where{color:var(--td-text)}
/* ============================================================
SECTION: NOT FOUND
============================================================ */
.td-404{display:flex; align-items:center; min-height:66vh}
.td-404 .td-lead{margin:18px 0 0}
.td-404__actions{display:flex; flex-wrap:wrap; gap:14px; margin:36px 0 0}
.td-404__alt{margin:30px 0 0; font-size:13.5px; color:var(--td-muted)}
.td-404__alt a{color:var(--td-gold); text-decoration:underline; text-underline-offset:3px}
/* No panel on this page, so the phone has room for the whole instrument. */
@media (max-width:900px){
.td-404.td-shade::before,
.td-ccta.td-shade::before{
left:auto; right:-22vw; width:min(74vw, 300px); opacity:.06;
transform:translateY(-50%) rotate(-11deg);
}
}
/* ---------- profile tabs and the account panels ---------- */
.td-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px}
.td-tabs__t{
padding:11px 24px; border:1px solid var(--td-line); border-radius:999px;
background:var(--td-surface); color:var(--td-muted);
font-family:var(--td-body); font-weight:600; font-size:11.5px;
letter-spacing:.16em; text-transform:uppercase;
transition:background .35s, color .35s, border-color .35s;
}
.td-tabs__t:hover{color:var(--td-text); border-color:var(--td-line-2)}
.td-tabs__t--on{background:var(--td-gold); border-color:var(--td-gold); color:#0A0E14}
.td-tabs__t--on:hover{color:#0A0E14}
.td-acct{display:grid; gap:22px; align-items:start}
@media (min-width:900px){ .td-acct{grid-template-columns:repeat(2,minmax(0,1fr))} }
.td-acct__panel{
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
padding:clamp(24px,3.2vw,38px);
}
.td-acct__h{font-size:clamp(19px,2.2vw,25px); text-transform:uppercase; letter-spacing:-.02em; margin:0 0 8px}
.td-acct__panel .td-hint{margin:0 0 22px; max-width:52ch}
.td-acct__panel .td-account__form{margin:0}
.td-acct__panel .td-btn{width:100%; justify-content:center; margin-top:6px}
/* A field the student can read but not change. Shown rather than hidden: the
username is what their course access is keyed to, so it is worth seeing. */
.td-field--locked input{opacity:.55; cursor:not-allowed}
.td-field--locked .td-hint{margin-bottom:0}
/* ---------- profile ---------- */
.td-profile__bar{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
margin:6px 0 44px; padding:16px 20px;
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
}
.td-profile__who{display:flex; align-items:center; gap:14px}
.td-profile__av{border-radius:50%; border:1px solid var(--td-line-2)}
.td-profile__who b{display:block; font-size:15px; font-weight:600; line-height:1.3}
.td-profile__who s{display:block; font-size:12.5px; color:var(--td-dim); text-decoration:none; margin-top:2px}
.td-profile__grid{display:grid; gap:22px; grid-template-columns:1fr}
@media (min-width:780px){ .td-profile__grid{grid-template-columns:repeat(2,1fr)} }
.td-progress{
display:flex; flex-direction:column; overflow:hidden;
background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
transition:border-color .45s, transform .55s var(--td-out);
}
.td-progress:hover{border-color:rgba(242,185,39,.45); transform:translateY(-5px)}
.td-progress__thumb{aspect-ratio:16/9; overflow:hidden; background:var(--td-bg)}
.td-progress__thumb img{width:100%; height:100%; object-fit:cover}
.td-progress__body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.td-progress__t{
font-family:var(--td-display); font-weight:800; font-size:clamp(20px,2.2vw,26px);
letter-spacing:-.02em; text-transform:uppercase; line-height:1.05; margin-bottom:18px;
}
.td-progress__meter{height:6px; border-radius:999px; background:var(--td-bg); border:1px solid var(--td-line); overflow:hidden}
.td-progress__meter i{
display:block; height:100%; border-radius:999px;
background:linear-gradient(90deg, var(--td-gold-deep), var(--td-gold));
transition:width .8s var(--td-out);
}
.td-progress__meta{
display:flex; align-items:baseline; gap:10px; margin:12px 0 22px;
font-size:12.5px; color:var(--td-dim);
}
.td-progress__meta b{font-family:var(--td-display); font-weight:800; font-size:22px; color:var(--td-gold); letter-spacing:-.02em}
.td-progress .td-btn{margin-top:auto; justify-content:center}
.td-profile__empty{
text-align:center; padding:clamp(36px,6vw,72px) 24px;
background:var(--td-surface); border:1px dashed var(--td-line-2); border-radius:8px;
}
.td-profile__empty .td-lead{margin:12px auto 26px; max-width:44ch}