/* ------------------------------------------------------------------
About page (Figma 1423:22532). Nav, cursor and footer come from styles.css.
------------------------------------------------------------------- */
@font-face {
font-family: "PP Neue Montreal";
font-weight: 700;
src: url("fonts/PPNeueMontreal-Bold.woff") format("woff");
font-display: swap;
}
:root {
--pink: #ff00bd;
--rule: #b5b0af;
--apple-line: #b5b0af;
--apple-grey: #ececec;
}
/* nav: ABOUT is the active link here (the home page pins the active width for "HOME") */
.ab-body .nav__link.is-active { width: auto; }
.ab-body { overflow-x: clip; } /* the TV frame shadow pokes a few px past the column */
.ab {
max-width: var(--page);
margin: 0 auto;
display: grid;
grid-template-columns: 440px minmax(0, 1320px); /* same grid as the work page */
column-gap: 96px;
align-items: start;
padding: 143px 64px 0 0;
}
/* ================= left column ================= */
.ab-side {
position: sticky;
top: 143px;
padding-left: var(--gutter);
display: flex;
flex-direction: column;
}
.ab-side__top { display: flex; flex-direction: column; gap: 29px; }
/* hidden until script.js splits the letters for the rise-in (same as the work page) */
.js .ab-side:not(.is-split) :is(.ab-name__title, .ab-name__say) { opacity: 0; }
.ab-name { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ab-name__title { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--black); } /* same as "WORK" on the work page */
.ab-name__say {
display: flex;
align-items: center;
font-size: 14px;
letter-spacing: -0.01em;
color: var(--grey);
transition: color .2s ease-out;
}
.ab-name__say img { width: 16px; height: 16px; margin-right: -1px; }
.ab-name__say > span:nth-of-type(2) { margin-right: 2px; } /* direct child only — the split letter spans inside must not pick this up */
.ab-name__say:hover { color: var(--black); }
/* on-this-page links: the current one is black with a dot */
.ab-toc { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; }
.ab-toc__link {
display: flex;
align-items: center;
font-family: var(--mono);
font-size: 18px;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--grey);
transition: color .25s ease-out;
}
.ab-toc__dot { width: 0; height: 11px; margin-right: 0; opacity: 0; transform: scale(0); transition: width .3s cubic-bezier(.65, 0, .35, 1), margin .3s cubic-bezier(.65, 0, .35, 1), opacity .2s, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.ab-toc__link:hover { color: var(--black); }
.ab-toc__notes { font-size: 1.35em; line-height: 1; letter-spacing: 0.04em; } /* the music glyphs draw small at 18px */
.ab-toc__link.is-active { color: #000; }
.ab-toc__link.is-active .ab-toc__dot { width: 11px; margin-right: 5px; opacity: 1; transform: none; }
/* ================= content ================= */
.ab-main { display: flex; flex-direction: column; gap: 88px; padding-bottom: 200px; }
/* everything on the right is drawn a little smaller than the 1920 Figma frame (tweak --ab-scale to taste) */
.ab-main { --ab-scale: .85; zoom: var(--ab-scale); } /* space lives inside the grid so the left column stays pinned until the footer */
.ab-hero, .ab-lower {
display: grid;
grid-template-columns: minmax(0, 668px) minmax(0, 1fr); /* right column runs to the same edge as the work grid */
column-gap: 40px;
align-items: start;
}
.ab-hero { align-items: stretch; } /* both columns end on the same line… */
.ab-hero__left { display: flex; flex-direction: column; gap: 50px; }
.ab-hero__left .ep { flex: 1; } /* …whichever is shorter lets its last window grow */
.ab-hero__right { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20.67px; } /* windows keep their own height; any extra space to end level with New Episode goes evenly between them */
/* ---------- photo "TV" (drawn at Figma size, scales with its column) ---------- */
.tv { container-type: inline-size; }
.tv__in {
--u: calc(100cqw / 668 * var(--cqfix, 1));
position: relative;
height: calc(570 * var(--u));
margin-top: calc(-40 * var(--u)); /* the frame's top edge (not the name tab) sits on the page's top line */
}
.tv__in > * { position: absolute; }
.tv__frame, .tv__shell { left: calc(-16.5 * var(--u)); top: calc(29.57 * var(--u)); width: calc(700.94 * var(--u)); height: calc(562.5 * var(--u)); }
/* plastic shell: top light, bottom shade and fine grain, clipped to the frame's silhouette */
.tv__shell {
-webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat; /* the frame outline, inlined so it also works when the page is opened as a file */
mask: url("data:image/svg+xml;utf8,") 0 0 / 100% 100% no-repeat;
background:
radial-gradient(60% 40% at 22% 6%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 9%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .14) 100%),
linear-gradient(90deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, .08));
}
.tv__shell::after {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml;utf8,");
opacity: .3;
}
/* the screen sits in a sunken lip: dark on top, catching light at the bottom */
.tv__lip {
left: calc(16.7 * var(--u));
top: calc(57 * var(--u));
width: calc(634.6 * var(--u));
height: calc(450 * var(--u));
border-radius: calc(22 * var(--u));
background: linear-gradient(180deg, #8d8f95 0%, #b9bbc0 45%, #eceef1 100%);
box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .45), 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, .9);
}
.tv__screw {
width: calc(7 * var(--u));
height: calc(7 * var(--u));
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff 0 18%, #b8bac0 45%, #6f727a 100%);
box-shadow: inset 0 0 0 calc(.6 * var(--u)) rgba(0, 0, 0, .35), 0 calc(.6 * var(--u)) 0 rgba(255, 255, 255, .8);
}
/* a cross slot in each screw */
.tv__screw::before, .tv__screw::after { content: ""; position: absolute; left: 50%; top: 50%; width: 62%; height: 12%; background: rgba(40, 40, 46, .55); transform: translate(-50%, -50%) rotate(35deg); border-radius: 1px; }
.tv__screw::after { transform: translate(-50%, -50%) rotate(125deg); }
/* speaker slots on the stand, left of the dots */
.tv__grille { left: calc(96 * var(--u)); top: calc(528 * var(--u)); display: flex; flex-direction: column; gap: calc(2.6 * var(--u)); }
.tv__grille i { display: block; width: calc(46 * var(--u)); height: calc(2 * var(--u)); border-radius: 2px; background: #7f828a; box-shadow: 0 calc(.7 * var(--u)) 0 rgba(255, 255, 255, .85), inset 0 calc(.6 * var(--u)) calc(.6 * var(--u)) rgba(0, 0, 0, .5); }
/* power light, right of the dots, softly breathing */
.tv__led {
left: calc(552 * var(--u));
top: calc(530 * var(--u));
width: calc(7 * var(--u));
height: calc(7 * var(--u));
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #eaffd8 0 15%, #6fe34a 45%, #2f9a1d 100%);
box-shadow: 0 0 calc(5 * var(--u)) rgba(111, 227, 74, .85), inset 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .25);
animation: tv-led 3.2s ease-in-out infinite;
}
@keyframes tv-led { 50% { box-shadow: 0 0 calc(2 * var(--u)) rgba(111, 227, 74, .45), inset 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .25); filter: brightness(.85); } }
@media (prefers-reduced-motion: reduce) { .tv__led { animation: none; } }
.tv__tab-shadow { left: calc(43.32 * var(--u)); top: calc(-2 * var(--u)); width: calc(235.36 * var(--u)); height: calc(43 * var(--u)); }
.tv__tab { left: calc(43.39 * var(--u)); top: calc(-2.5 * var(--u)); width: calc(235.2 * var(--u)); height: calc(42 * var(--u)); }
.tv__name {
left: calc(48 * var(--u));
top: calc(8 * var(--u));
width: calc(226 * var(--u));
text-align: center;
font-family: var(--mono);
font-weight: 500;
font-size: calc(18 * var(--u));
letter-spacing: -0.01em;
color: #f5f5f5;
white-space: nowrap;
}
.tv__pics, .tv__crt, .tv__blank, .tv__flare {
left: calc(24.7 * var(--u)); /* widened from 29 / 610 so the bezel is the same on all four sides */
top: calc(65 * var(--u));
width: calc(618.6 * var(--u));
height: calc(434 * var(--u));
border-radius: calc(16 * var(--u));
overflow: hidden;
}
.tv__pics {
background: #111;
touch-action: pan-y; /* sideways swipes change the photo, up/down still scrolls the page */
user-select: none; -webkit-user-select: none;
/* old-TV picture: the bulge (an SVG displacement map built in script.js) + warm, slightly crushed colour */
filter: url(#crt-bulge) contrast(1.08) saturate(1.12) sepia(.12) brightness(1.02);
}
.tv__crt {
pointer-events: none;
background:
/* curved-glass reflection, top left */
radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%),
/* scanlines */
repeating-linear-gradient(to bottom, rgba(0, 0, 0, .16) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
/* dark, rounded edges like a tube */
radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .42) 100%);
box-shadow: inset 0 0 calc(18 * var(--u)) rgba(0, 0, 0, .55), inset 0 0 calc(3 * var(--u)) rgba(0, 0, 0, .5);
animation: crt-flicker 4s steps(1) infinite;
}
/* film grain: SVG noise, nudged around a few times a second */
.tv__grain {
position: absolute;
inset: -50%;
background: url("data:image/svg+xml;utf8,");
opacity: .22;
mix-blend-mode: overlay;
animation: crt-grain .6s steps(4) infinite;
}
@keyframes crt-grain {
0% { transform: translate(0, 0); }
25% { transform: translate(-7%, 4%); }
50% { transform: translate(5%, -6%); }
75% { transform: translate(-3%, -2%); }
100% { transform: translate(6%, 5%); }
}
@keyframes crt-flicker {
0%, 100% { opacity: 1; }
47% { opacity: .93; }
48% { opacity: 1; }
83% { opacity: .96; }
84% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tv__crt, .tv__grain { animation: none; } }
.tv__pic { -webkit-user-drag: none; pointer-events: none; }
/* ---- power on (first load + each new episode) ----
a dark tube, a pinpoint of light that stretches into a thin line,
then the picture opens out of that line. ~0.7s, kept soft on purpose */
.tv__blank { background: #050505; }
.tv__flare { pointer-events: none; opacity: 0; }
.tv__flare::before, .tv__flare::after { content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none; }
/* the line: bright in the middle, fading out to both edges, with a soft glow */
.tv__flare::before {
width: 100%; height: calc(3 * var(--u)); margin: calc(-1.5 * var(--u)) 0 0 -50%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 30%, #fff 50%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, 0));
box-shadow: 0 0 calc(14 * var(--u)) calc(2 * var(--u)) rgba(210, 225, 255, .35);
border-radius: 50%;
}
/* the pinpoint + its halo */
.tv__flare::after {
width: calc(90 * var(--u)); height: calc(46 * var(--u)); margin: calc(-23 * var(--u)) 0 0 calc(-45 * var(--u));
background: radial-gradient(closest-side, #fff 0 12%, rgba(255, 255, 255, .45) 35%, rgba(200, 215, 255, 0) 100%);
}
#tv.is-powering .tv__pics { animation: tv-open 1.15s both; }
#tv.is-powering .tv__flare { animation: tv-flare 1.15s ease-in-out both; }
#tv.is-powering .tv__flare::before { animation: tv-line 1.15s ease-in-out both; }
#tv.is-powering .tv__flare::after { animation: tv-dot 1.15s ease-in-out both; }
#tv.is-first .tv__pics, #tv.is-first .tv__flare, #tv.is-first .tv__flare::before, #tv.is-first .tv__flare::after { animation-delay: .25s; }
/* softer: longer, eased everywhere, the picture fades up while it opens and the light hands over gently */
@keyframes tv-open {
0%, 36% { clip-path: inset(50% 0 50% 0); opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes tv-flare { 0% { opacity: 0; } 14%, 48% { opacity: .9; } 88%, 100% { opacity: 0; } }
@keyframes tv-line {
0%, 6% { transform: scaleX(0); opacity: 0; }
40% { transform: scaleX(1); opacity: 1; }
85%, 100% { transform: scaleX(1) scaleY(3); opacity: 0; }
}
@keyframes tv-dot {
0% { transform: scale(.2); opacity: 0; }
18% { transform: scale(.7); opacity: 1; }
40% { transform: scale(1); opacity: 1; }
85%, 100% { transform: scale(1.6, 1.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #tv.is-powering .tv__pics, #tv.is-powering .tv__flare, #tv.is-powering .tv__flare::before, #tv.is-powering .tv__flare::after { animation: none; } }
.tv__pics::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 12px rgba(0, 0, 0, .4); pointer-events: none; }
.tv__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease-out; }
.tv__pic.is-on { opacity: 1; }
.tv__arrow {
top: calc(423 * var(--u));
width: calc(56 * var(--u));
height: calc(56 * var(--u));
border-radius: 50%;
transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .2s;
}
.tv__arrow img { width: 100%; height: 100%; }
.tv__arrow--prev { left: calc(49 * var(--u)); }
.tv__arrow--prev img { transform: scaleX(-1); }
.tv__arrow--next { left: calc(562 * var(--u)); }
.tv__arrow:hover { transform: scale(1.08); }
.tv__arrow:active { transform: scale(.92); transition-duration: .08s; }
.tv__arrow[disabled] { opacity: 0; pointer-events: none; }
.tv__dots {
left: 0;
right: 0;
top: calc(525 * var(--u));
display: flex;
justify-content: center;
gap: calc(10 * var(--u));
}
.tv__dot {
width: calc(14 * var(--u));
height: calc(14 * var(--u));
border-radius: 50%;
background: #d2d2d2;
border: .8px solid rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .15);
transition: background-color .25s;
}
.tv__dot:hover { background: #bdbdbd; }
.tv__dot.is-on {
border: 1px solid #1f2b76;
background: linear-gradient(180deg, #1f2b76 1.44%, #326bb5 38.46%, #4277c1 57.21%, #a2ddee 100%);
}
/* ---------- little "windows" (New episode / Hey / Currently) ---------- */
.win {
position: relative;
display: flex;
flex-direction: column;
border: 2px solid var(--win);
border-radius: 8px;
overflow: hidden;
background: #fff;
filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .09)) drop-shadow(0 2px 1.5px rgba(0, 0, 0, .18)); /* a little softer than Figma */
}
.win--pink { --win: var(--pink); }
.win--blue { --win: #1648b3; }
.win__hdr {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.02em;
color: #fff;
}
.win__hdr > span { position: relative; flex: 1; }
.win__hdr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win__hdr-icon { position: relative; width: 24px; height: 24px; }
/* episodes */
.ep__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 24px; align-items: end; align-content: start; }
.ep__item { display: flex; flex-direction: column; gap: 6px; }
.ep__thumb {
position: relative;
display: block;
width: 100%;
aspect-ratio: 136 / 96.8;
border: 1.6px solid #171717;
border-radius: 3.2px;
overflow: hidden;
box-shadow: 0 3.2px 3.2px rgba(0, 0, 0, .18);
transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.ep__thumb > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ep__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(102, 102, 102, .4)); transition: opacity .25s; }
.ep__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 28.2%; transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.ep__badge {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 2px 4px;
border-radius: 2px;
background: rgba(23, 23, 23, .75);
font-family: var(--mono);
font-size: 12px;
letter-spacing: -0.01em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
opacity: 0;
transition: opacity .2s;
}
.ep__label {
font-family: var(--mono);
font-size: 12px;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--grey);
text-shadow: 0 2.4px 4px rgba(0, 0, 0, .12);
transition: color .2s;
}
.ep__item:hover .ep__thumb { transform: translateY(-3px); }
.ep__item:hover .ep__play { transform: translate(-50%, -50%) scale(1.1); }
.ep__item.is-playing .ep__play { opacity: 0; }
.ep__item.is-playing .ep__badge { opacity: 1; }
.ep__item.is-playing .ep__label { color: var(--black); }
/* right column */
/* the two ads sit side by side at the same height: each takes width in proportion to its aspect ratio (770×184, 770×264) */
/* "Let's work together" banner under the last window: full column width, ends level with New Episode */
.ab-hello, .ab-creating { display: block; min-width: 0; height: auto; }
/* all four ads: the 1pt line from Figma is drawn here (cropped out of the images) so it's the same weight on every ad, with clean rounded corners */
.ab-ad img, .ab-hello, .ab-creating { box-sizing: border-box; border: 2px solid var(--ad-line); border-radius: 4px; } /* 2px, same as the windows */
.ab-ad--resume { --ad-line: #decc00; }
.ab-ad--ring { --ad-line: #5c7d38; } /* darker shade of the ad's green */
.ab-hello { --ad-line: #2c2b26; }
.ab-creating { --ad-line: #e4e4e4; }
/* bottom pair, same idea as the top ads: widths split by aspect ratio (297×70, 158×70 in Figma) so both are the same height */
.ab-hello { flex: 4.243 1 0; } /* 1188×280 */
.ab-creating { flex: 2.257 1 0; } /* 632×280 */
.ab-ads { display: flex; gap: 16px; align-items: flex-start; }
.ab-ad--resume { flex: 4.256 1 0; } /* 766×180 */
.ab-ad--ring { flex: 2.946 1 0; } /* 766×260 */
.ab-ad { display: block; min-width: 0; border-radius: 4px; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.ab-ad img { display: block; width: 100%; height: auto; }
.ab-ad:hover { transform: rotate(-1.2deg) scale(1.015); }
.ab-ad--ring:hover { transform: rotate(1.2deg) scale(1.015); }
.hey__body { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 24px 24px 20px; } /* bottom 4px less: the Open to… line's box has a few px of empty space under its capitals */
.hey__text > p:first-child { text-box: trim-start cap alphabetic; } /* drop the line's top leading so the first capital sits exactly one padding below the header, same as the side */
.hey__text { display: flex; flex-direction: column; gap: 12px; font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; color: var(--black); }
.now__chips { display: flex; gap: 10px; margin-top: auto; } /* sits on the window's bottom padding */
.chip {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 18px 9px 14px;
border-radius: 48px;
background: #eee;
font-family: var(--mono);
font-weight: 500;
font-size: 17px;
letter-spacing: -0.01em;
color: var(--grey);
transition: background-color .2s, color .2s;
}
.chip img { width: 24px; height: 24px; }
.chip:hover { background: #e2e2e2; color: var(--black); }
.now__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; padding: 24px; } /* starts 24px from the top, like the Hey window */
.now__row { display: flex; align-items: center; gap: 18px; }
/* same green light as the home page / Click me popup */
/* exactly the home page line (.hero__avail); undo the page's 85% zoom so it renders at the same size */
.now__open { zoom: calc(1 / var(--ab-scale)); font-size: calc(16px * var(--ab-scale)); color: var(--grey); } /* 16px on the page's scale (intro is 20px), so the mono caps sit level with the paragraphs; the green light keeps its size */
.now__logo { position: relative; flex: none; width: 100px; height: 100px; }
.now__ring { position: absolute; inset: -1.28%; width: 102.56%; height: 102.56%; }
.now__crest { position: absolute; left: 12.5%; top: 11.87%; width: 75%; height: 75%; object-fit: cover; } /* Figma 9.75 / 9.26 / 58.5 inside 78 */
/* one type system with the Hey window:
mono grey label 16px (= Open to…) · body 21px Book black (= the intro) · secondary 21px Book grey */
.now__text { display: flex; flex-direction: column; gap: 16px; font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; white-space: nowrap; }
.now__text > p { text-box: trim-both cap alphabetic; } /* each line trimmed to capital-top → baseline, so the 16px gaps are the real visible gaps whatever the font */
.now__school { font-family: var(--mono); font-size: 16px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; color: var(--grey); }
.now__degree { color: var(--black); }
.now__conc { color: var(--black); } /* degree + concentration read as two lines of one paragraph */
/* ---------- Experience / Education / Communities ---------- */
.ab-lower__left { display: flex; flex-direction: column; gap: 66px; }
.ab-sec { display: flex; flex-direction: column; gap: 48px; }
.ab-sec__title { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--black); }
.ab-row { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.ab-row + .ab-row { padding-top: 24px; }
.ab-rows > .ab-row:not(.ab-row--comm) { display: flex; justify-content: space-between; gap: 24px; white-space: nowrap; }
.ab-row__what {
font-family: var(--mono);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--black);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ab-role { color: var(--grey); }
.ab-row__when { font-size: 18px; letter-spacing: -0.01em; color: var(--grey); }
.ab-row__when.is-now { color: var(--pink); }
/* the organisation names turn pink on hover */
.ab-org { cursor: default; transition: color .25s ease-out; }
.ab-org:hover { color: var(--pink); }
/* communities: + opens a 300px photo frame under the row */
.comm__head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.comm__name { display: flex; align-items: center; gap: 18px; font-size: 18px; white-space: nowrap; }
.comm__name .ab-org { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; color: var(--black); cursor: inherit; }
.comm__head:hover .ab-org { color: var(--pink); }
/* + → − : the vertical bar turns flat */
.comm__pm { position: relative; flex: none; width: 24px; height: 24px; }
.comm__pm::before, .comm__pm::after {
content: "";
position: absolute;
left: 5px; /* Figma "Add": two 12px strokes, 2px, square caps, #1A1A1A */
top: 11px;
width: 14px;
height: 2px;
background: var(--black);
transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.comm__pm::after { transform: rotate(90deg); }
.ab-row--comm.is-open .comm__pm::after { transform: rotate(0deg); }
.comm__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.65, 0, .35, 1); }
.ab-row--comm.is-open .comm__panel { grid-template-rows: 1fr; }
.comm__clip { min-height: 0; overflow: hidden; }
.comm__pics {
position: relative;
height: var(--comm-h, 300px); /* set by script.js so an open row ends level with Education */
margin-top: 24px;
border: 2px solid var(--grey); /* the grey frame from Figma, now on all four sides */
border-radius: 4px;
overflow: hidden;
background: #f2f2f2;
opacity: 0;
transition: opacity .35s ease-out;
}
.ab-row--comm.is-open .comm__pics, .ab-row--comm.is-open .comm__dots { opacity: 1; transition-delay: .12s; }
.comm__pics { touch-action: pan-y; user-select: none; -webkit-user-select: none; } /* sideways swipes go to the photos */
.comm__pics img { -webkit-user-drag: none; pointer-events: none; }
/* the photos come with that grey line baked into their edges; push it just outside the frame */
.comm__pics img { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); object-fit: cover; opacity: 0; transition: opacity 1.1s ease-in-out; }
.comm__pics img.is-on { opacity: 1; }
/* dots under the photos: click to jump */
.comm__dots { display: flex; justify-content: center; gap: 4px; height: 16px; margin-top: 12px; opacity: 0; transition: opacity .35s ease-out; }
.comm__dot { position: relative; width: 16px; height: 16px; }
.comm__dot::before { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #d2d2d2; transition: background-color .25s, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.comm__dot:hover::before { background: #a8a8a8; transform: scale(1.15); }
.comm__dot.is-on::before { background: var(--black); }
/* ---------- smaller screens ---------- */
@media (max-width: 1600px) {
.ab-hero, .ab-lower { grid-template-columns: minmax(0, 668px) minmax(300px, 1fr); column-gap: clamp(24px, 2.5vw, 40px); }
.now__text { white-space: normal; }
}
@media (max-width: 1500px) {
.ab { grid-template-columns: 340px minmax(0, 1fr); column-gap: 48px; padding-right: var(--gutter); }
}
@media (max-width: 1300px) {
.ab { grid-template-columns: 1fr; row-gap: 56px; padding: 120px var(--gutter) 0; }
.ab-main { padding-bottom: 64px; }
.ab-side { position: static; padding-left: 0; }
.ab-hero, .ab-lower { grid-template-columns: minmax(0, 1fr); row-gap: 56px; } /* full width, like phones */
.ab-hero__right { margin-top: 0; }
}
.ep__dots { display: none; }
@media (max-width: 1300px) { /* tablets and phones: the phone layout */
.ab-toc { display: none; }
/* New episode: two at a time, swipe or use the dots for the other two */
.ep__list {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 24px;
scroll-padding: 0 24px;
}
.ep__list::-webkit-scrollbar { display: none; }
/* two a bit smaller than half, so the third peeks in at the right edge as a "there's more" hint */
.ep__item { flex: 0 0 calc((100% - 32px - 40px) / 2); scroll-snap-align: start; }
.now__body { min-height: 0; } /* no stretch: same 24px above and below the school row */
}
@media (max-width: 1300px) {
.ab-rows > .ab-row:not(.ab-row--comm) { flex-direction: column; gap: 6px; white-space: normal; }
.ab-row__what { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.tv__pic, .comm__pics img, .comm__panel { transition: none; }
}
/* ------------------------------------------------------------------
On Repeat: nine CDs + a pebble MP3 player (same navy outline and
moulded white plastic as the TV, with a colour band you can swap)
------------------------------------------------------------------- */
.music__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: 56px; row-gap: 48px; align-items: center; }
/* CDs: clear jewel cases — hinge on the left, tray tabs, a cover insert behind the plastic,
the disc showing through, and a glare that slides as the case tilts toward the pointer */
.cds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 22px; list-style: none; padding: 0; margin: 0; perspective: 900px; }
.cd {
--ty: 0px; --rx: 0deg; --ry: 0deg; --gx: 22%;
position: relative; display: block; width: 100%; aspect-ratio: 1.12; padding: 0; border: 0; background: none; cursor: pointer;
transform: translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .55s cubic-bezier(.3, 1.3, .5, 1), filter .3s;
filter: drop-shadow(0 6px 6px rgba(20, 30, 70, .12)) drop-shadow(0 1px 1px rgba(20, 30, 70, .25));
}
.cd.is-tilting { transition: transform .12s ease-out, filter .3s; }
.cd:hover { --ty: -5px; filter: drop-shadow(0 12px 12px rgba(20, 30, 70, .16)) drop-shadow(0 2px 2px rgba(20, 30, 70, .25)); }
.cd:active { --ty: -2px; }
.cd:focus-visible { outline: 2px solid var(--pink); outline-offset: 5px; border-radius: 4px; }
/* the cover insert, sitting just inside the case lips */
.cd__art { position: absolute; left: 10.5%; top: 3.2%; right: 2.6%; bottom: 3.2%; overflow: hidden; background: #e9e9ee; }
.cd__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd__fallback {
position: absolute; inset: 0; display: none; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 10% 9%;
background: linear-gradient(150deg, hsl(var(--h, 220) 85% 88%), hsl(var(--h, 220) 70% 70%));
color: #10154a; text-align: left; font-family: var(--mono); letter-spacing: -0.02em;
}
.cd__fallback b { font-size: clamp(11px, 1.05vw, 15px); font-weight: 500; line-height: 1.15; }
.cd__fallback i { font-style: normal; font-size: clamp(9px, .8vw, 11px); opacity: .7; }
.cd.no-art .cd__art img { display: none; }
.cd.no-art .cd__fallback { display: flex; }
/* the disc showing through: silver sheen, data rings, clear hub with the tray's teeth.
It stays put; only its sheen turns a little on hover */
.cd__disc {
position: absolute; top: 6%; bottom: 6%; left: calc(10.5% + (87% - 88% / 1.12) / 2); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
background:
repeating-conic-gradient(rgba(255, 255, 255, .95) 0 4deg, rgba(255, 255, 255, 0) 4deg 30deg) center / 24% 24% no-repeat,
radial-gradient(circle, rgba(0, 0, 0, 0) 0 6%, rgba(255, 255, 255, .95) 6.5% 8%, rgba(255, 255, 255, .55) 8.5% 19%, rgba(255, 255, 255, .95) 19.5% 21%, rgba(0, 0, 0, 0) 21.5% 31%, rgba(255, 255, 255, .4) 31.5% 32.2%, rgba(0, 0, 0, 0) 32.7% 96.5%, rgba(255, 255, 255, .9) 97% 99%, rgba(0, 0, 0, 0) 99.5%),
conic-gradient(from 20deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 8%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .35) 82%, rgba(255, 255, 255, 0));
-webkit-mask: radial-gradient(circle, transparent 0 6%, #000 6.5%); mask: radial-gradient(circle, transparent 0 6%, #000 6.5%);
mix-blend-mode: soft-light; opacity: .9;
transition: transform .8s cubic-bezier(.3, 1, .5, 1), opacity .3s;
}
.cd:hover .cd__disc { transform: rotate(35deg); opacity: 1; }
.cd.is-on.is-playing .cd__disc { animation: mp3-spin 4s linear infinite; }
/* the clear case: outer edge, inner lip, ribbed hinge */
.cd__case {
position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
border: 1px solid rgba(140, 150, 175, .75);
background:
linear-gradient(90deg, rgba(225, 229, 238, .92) 0, rgba(255, 255, 255, .95) 1.6%, rgba(160, 168, 186, .75) 2.6%, rgba(250, 251, 253, .9) 3.8%, rgba(176, 183, 200, .7) 5%, rgba(250, 251, 253, .9) 6.4%, rgba(190, 196, 210, .7) 7.8%, rgba(255, 255, 255, .75) 9.6%, rgba(160, 168, 186, .6) 10.4%, rgba(255, 255, 255, 0) 10.9%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .85),
inset 0 0 0 3.5px rgba(205, 211, 224, .55),
inset 0 0 0 4.5px rgba(255, 255, 255, .5),
inset 0 -3px 5px rgba(30, 40, 80, .1);
}
.cd__case::before, .cd__case::after { content: ""; position: absolute; }
.cd__case::before {
left: 46%; width: 16%; top: -1px; bottom: -1px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(214, 219, 230, .9)) top / 100% 3.2% no-repeat,
linear-gradient(0deg, rgba(255, 255, 255, .95), rgba(214, 219, 230, .9)) bottom / 100% 3.2% no-repeat;
border-radius: 2px;
}
.cd__case::after {
left: -1px; width: 3.4%; top: 6%; bottom: 6%;
background:
linear-gradient(90deg, #c9ceda, #fff 60%, #b7bdcb) top / 100% 10% no-repeat,
linear-gradient(90deg, #c9ceda, #fff 60%, #b7bdcb) bottom / 100% 10% no-repeat;
border-radius: 1px;
}
/* glare on the front plastic: it slides across as the case turns */
.cd__glare {
position: absolute; inset: 0; border-radius: 3px; pointer-events: none; overflow: hidden;
background:
linear-gradient(118deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 44%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 56%) var(--gx) 0 / 260% 100% no-repeat,
linear-gradient(118deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .16) 64%, rgba(255, 255, 255, 0) 69%) var(--gx) 0 / 260% 100% no-repeat;
transition: background-position .55s cubic-bezier(.3, 1.3, .5, 1);
}
.cd.is-tilting .cd__glare { transition: background-position .12s ease-out; }
.cd.is-on { --ty: -6px; }
.cd.is-on .cd__case { border: 2px solid var(--pink); }
.cd.is-on::after {
content: "♪"; position: absolute; right: -8px; top: -10px; width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center; background: var(--pink); color: #fff; font-size: 13px; line-height: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transform: translateZ(1px);
}
.cd.is-on.is-playing::after { animation: cd-bop .9s ease-in-out infinite; }
@keyframes cd-bop { 50% { transform: translateY(-3px) rotate(-8deg); } }
/* player colours (band, buttons) and the LCD backlight */
.mp3 { --c1: #bfe9f7; --c2: #5a93dc; --c3: #2f62c0; --c4: #1a2a78; --lcd: #e6f6ff; --scr1: #5b9be8; --scr2: #1b3a92; }
.mp3[data-theme="pink"] { --c1: #ffd0f2; --c2: #ff7ad8; --c3: #f21fb4; --c4: #7d0a5f; --lcd: #fff0fb; --scr1: #f36fcf; --scr2: #85085f; }
.mp3[data-theme="orange"] { --c1: #ffe0bd; --c2: #ffa851; --c3: #f07a0e; --c4: #7a3300; --lcd: #fff4e6; --scr1: #f79a3e; --scr2: #8f3c00; }
.mp3[data-theme="green"] { --c1: #e2fbb8; --c2: #a9e04a; --c3: #6cbf1c; --c4: #2e5c08; --lcd: #f3ffe8; --scr1: #7fc25a; --scr2: #1f5a1b; }
.mp3[data-theme="yellow"] { --c1: #fff6c0; --c2: #ffe35a; --c3: #eebd00; --c4: #6b5200; --lcd: #fffbe6; --scr1: #d9b21a; --scr2: #5f4700; }
.mp3-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mp3 { width: 100%; max-width: 680px; container-type: inline-size; }
.mp3__in { --u: calc(100cqw / 800 * var(--cqfix, 1)); position: relative; height: calc(546 * var(--u)); }
.mp3__in > * { position: absolute; }
/* the bean (drawn in the inline SVG): no hard outline, just a slightly darker edge in its own colour */
.mp3__shape { inset: 0 0 auto 0; width: 100%; height: auto; overflow: visible; }
.mp3__edge { stroke: color-mix(in srgb, var(--c4) 75%, #000); stroke-opacity: .45; stroke-width: 1.5; transition: stroke .4s; }
.mp3__glow { fill: var(--c1); opacity: .5; transition: fill .4s; }
.mp3__sockets circle { fill: url(#mp3-well); filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, .35)) drop-shadow(0 2px 1px rgba(255, 255, 255, .55)); }
.mp3__shape stop { transition: stop-color .4s; }
/* the logo (Figma 1542:11878, inlined so the mask also works when the page is opened as a file), silk-screened onto the dark recess above the screen: pale ink, slightly worn
(grain knocks bits out), a hair of ink spread, and it catches the same top light as the plastic */
.mp3__logo {
left: calc(340 * var(--u)); top: calc(82.2 * var(--u)); width: calc(120 * var(--u)); height: calc(35 * var(--u));
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(214, 220, 236, .78) 70%, rgba(190, 198, 220, .7));
-webkit-mask:
url("data:image/svg+xml;utf8,") 0 0 / calc(40 * var(--u)) auto,
url("data:image/png;base64,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") center / contain no-repeat;
-webkit-mask-composite: source-in;
mask:
url("data:image/svg+xml;utf8,") 0 0 / calc(40 * var(--u)) auto,
url("data:image/png;base64,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") center / contain no-repeat;
mask-composite: intersect;
opacity: .88;
filter: blur(calc(.2 * var(--u))) drop-shadow(0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .25));
mix-blend-mode: screen;
}
/* the screen: wide, a glossy dark bezel around a backlit LCD (pixel grid, vignette, glass) */
.mp3__screen {
left: calc(132 * var(--u)); top: calc(134 * var(--u)); width: calc(536 * var(--u)); height: calc(222 * var(--u));
padding: calc(5 * var(--u));
border-radius: calc(30 * var(--u));
background: linear-gradient(180deg, #2a2f45, #0c0f1d 55%, #1b2033);
box-shadow:
0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .08),
inset 0 calc(1.5 * var(--u)) 0 rgba(255, 255, 255, .25),
inset 0 calc(-2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .6);
}
.mp3__lcd {
position: relative; height: 100%; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
border-radius: calc(25 * var(--u));
background: radial-gradient(120% 95% at 50% 15%, var(--scr1) 0%, var(--scr2) 72%, color-mix(in srgb, var(--scr2) 70%, #000) 100%);
color: var(--lcd); font-family: var(--mono); letter-spacing: -0.02em;
text-shadow: 0 0 calc(5 * var(--u)) color-mix(in srgb, var(--lcd) 55%, transparent), 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, .35);
transition: background .4s;
}
.mp3__lcd::before { /* pixel grid */
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply;
background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 calc(.8 * var(--u)), rgba(0, 0, 0, 0) calc(.8 * var(--u)) calc(2.6 * var(--u))),
repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 calc(.8 * var(--u)), rgba(0, 0, 0, 0) calc(.8 * var(--u)) calc(2.6 * var(--u)));
}
.mp3__lcd::after { /* vignette + sunken edge */
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
box-shadow: inset 0 0 calc(18 * var(--u)) rgba(0, 0, 30, .45), inset 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .45);
}
.mp3__glass {
position: absolute; inset: calc(5 * var(--u)); z-index: 4; pointer-events: none;
border-radius: calc(25 * var(--u));
background:
radial-gradient(140% 55% at 30% -12%, rgba(255, 255, 255, .2) 0 40%, rgba(255, 255, 255, 0) 41%),
linear-gradient(115deg, rgba(255, 255, 255, 0) 0 62%, rgba(255, 255, 255, .1) 66%, rgba(255, 255, 255, 0) 72%);
}
/* "Now playing" strip across the top */
.mp3__top {
position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center;
padding: calc(7 * var(--u)) calc(26 * var(--u)); font-size: max(9px, calc(11 * var(--u)));
background: linear-gradient(180deg, rgba(0, 0, 20, .28), rgba(0, 0, 20, .12));
border-bottom: calc(1 * var(--u)) solid color-mix(in srgb, var(--lcd) 30%, transparent);
}
.mp3__np { letter-spacing: .14em; opacity: .85; }
.mp3__mid { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; padding: 0 calc(28 * var(--u)); }
.mp3__disc {
position: relative; flex: none; width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; overflow: hidden;
background: conic-gradient(from 30deg, #d9dde6, #ffffff, #b9bfcc, #f2f4f8, #c9ceda, #d9dde6);
box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .55), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .4);
animation: mp3-spin 4s linear infinite; animation-play-state: paused;
}
.mp3__disc img { width: 100%; height: 100%; object-fit: cover; }
/* YouTube songs: a small video window takes the disc's place */
.mp3__yt { display: none; position: relative; flex: none; width: calc(150 * var(--u)); aspect-ratio: 16 / 9; border-radius: calc(8 * var(--u)); overflow: hidden; background: #000;
box-shadow: 0 0 0 calc(1.5 * var(--u)) color-mix(in srgb, var(--lcd) 45%, transparent), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .45); }
.mp3__yt iframe, .mp3__yt > span { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mp3.is-yt .mp3__yt { display: block; }
.mp3.is-yt .mp3__disc { display: none; }
.mp3__disc.no-art img { visibility: hidden; }
.mp3__disc i { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--c4) 0 32%, #e9ecf2 34% 100%); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(0, 0, 0, .25); }
.mp3.is-playing .mp3__disc { animation-play-state: running; }
@keyframes mp3-spin { to { transform: rotate(360deg); } }
.mp3__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.mp3__title { overflow: hidden; white-space: nowrap; font-family: var(--sans); font-weight: 700; font-size: max(13px, calc(22 * var(--u))); letter-spacing: -0.01em; }
.mp3__title span { display: inline-block; }
.mp3__title.is-long span { padding-right: 2em; animation: mp3-marquee 9s linear infinite; }
@keyframes mp3-marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(calc(-100% + var(--w, 0px))); } }
.mp3__artist { font-size: max(10px, calc(14 * var(--u))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp3__album { font-size: max(8.5px, calc(10.5 * var(--u))); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the retro block EQ beside the title (drawn by script.js) */
.mp3__eq { flex: none; display: block; width: calc(108 * var(--u)); height: calc(70 * var(--u)); }
/* time — bar — time left, on the screen */
.mp3__prog { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(28 * var(--u)) calc(14 * var(--u)); font-size: max(10px, calc(14 * var(--u))); }
.mp3__cur { font-weight: 500; }
.mp3__left { opacity: .85; }
.mp3__bar {
position: relative; flex: 1; height: calc(12 * var(--u)); cursor: pointer;
border: calc(1.2 * var(--u)) solid color-mix(in srgb, var(--lcd) 70%, transparent);
background: rgba(0, 0, 20, .28);
box-shadow: 0 0 calc(4 * var(--u)) color-mix(in srgb, var(--lcd) 35%, transparent);
}
.mp3__bar i { /* filled part: little LCD segments */
position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); width: 0; max-width: calc(100% - 4 * var(--u));
background: repeating-linear-gradient(90deg, var(--lcd) 0 calc(5 * var(--u)), transparent calc(5 * var(--u)) calc(7 * var(--u)));
opacity: .95;
}
.mp3__bar b { position: absolute; top: 50%; left: 0; width: calc(6 * var(--u)); height: calc(18 * var(--u)); transform: translate(-50%, -50%); background: var(--lcd); box-shadow: 0 0 calc(5 * var(--u)) var(--lcd); }
.mp3__bar:focus-visible { outline: 2px solid var(--lcd); outline-offset: 3px; }
/* buttons: glossy domes sitting in sockets on the lower shell — no outlines, the light does the work */
.mp3__ctrls { left: calc(266 * var(--u)); top: calc(378 * var(--u)); width: calc(288 * var(--u)); height: calc(100 * var(--u)); }
.mp3__btn {
/* every button is the same moulded dome: --b1 light, --b2 body, --b3 rim, --b4 its depth */
--b1: #ffffff; --b2: #eceff5; --b3: #c4cad7; --b4: #9aa2b4;
position: absolute; top: 50%; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
width: calc(54 * var(--u)); height: calc(54 * var(--u)); transform: translate(-50%, -50%);
background:
radial-gradient(46% 30% at 42% 20%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 100%),
radial-gradient(120% 120% at 40% 25%, var(--b1) 0%, var(--b2) 42%, var(--b3) 82%, var(--b4) 100%);
box-shadow:
0 calc(4 * var(--u)) 0 var(--b4),
0 calc(8 * var(--u)) calc(9 * var(--u)) rgba(10, 15, 40, .28),
inset 0 calc(-5 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 30, .14),
inset 0 calc(1.5 * var(--u)) calc(1 * var(--u)) rgba(255, 255, 255, .85);
transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .1s;
}
.mp3__btn:nth-child(1) { left: calc(50 * var(--u)); }
.mp3__btn:nth-child(2) { left: 50%; }
.mp3__btn:nth-child(3) { left: calc(238 * var(--u)); }
.mp3__btn svg { width: 40%; height: 40%; fill: var(--c4); filter: drop-shadow(0 calc(1 * var(--u)) 0 rgba(255, 255, 255, .6)); transition: fill .4s; }
.mp3__btn:hover { transform: translate(-50%, calc(-50% - 1px)); }
.mp3__btn:active {
transform: translate(-50%, calc(-50% + 4 * var(--u)));
box-shadow: 0 0 0 var(--b4), 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(10, 15, 40, .28), inset 0 calc(-5 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 30, .14), inset 0 calc(1.5 * var(--u)) calc(1 * var(--u)) rgba(255, 255, 255, .85);
transition-duration: .05s;
}
.mp3__btn:focus-visible { outline: 2px solid var(--c3); outline-offset: 4px; }
/* play: same dome, bigger, in the body colour */
.mp3__btn--play {
--b1: color-mix(in srgb, var(--c1) 55%, #fff); --b2: var(--c2); --b3: var(--c3); --b4: color-mix(in srgb, var(--c3) 55%, var(--c4));
width: calc(76 * var(--u)); height: calc(76 * var(--u));
}
.mp3__btn--play svg { fill: #fff; filter: drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) color-mix(in srgb, var(--c4) 70%, transparent)); }
.mp3__btn--play .i-pause, .mp3.is-playing .mp3__btn--play .i-play { display: none; }
.mp3.is-playing .mp3__btn--play .i-pause { display: block; }
.mp3__led {
left: calc(580 * var(--u)); top: calc(424 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #f2f2f2 0 15%, #9aa0aa 60%);
box-shadow: inset 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, .3), 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, .5);
}
.mp3.is-playing .mp3__led { background: radial-gradient(circle at 40% 35%, #eaffd8 0 15%, #6fe34a 45%, #2f9a1d 100%); box-shadow: 0 0 calc(7 * var(--u)) rgba(111, 227, 74, .9); animation: tv-led 1.6s ease-in-out infinite; }
/* colour chips under the player */
.mp3-colors {
display: flex; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #fff;
border: 1px solid var(--rule); box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}
.mp3-color {
width: 46px; height: 26px; border-radius: 6px; cursor: pointer; padding: 0;
border: 1px solid rgba(0, 0, 0, .15);
background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 45%), var(--sw);
box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .15);
transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.mp3-color:hover { transform: translateY(-2px); }
.mp3-color.is-on { transform: translateY(-3px); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1f2b76, 0 3px 6px rgba(0, 0, 0, .2); }
.mp3-color[data-theme="pink"] { --sw: #ff4fcf; }
.mp3-color[data-theme="orange"] { --sw: #ff9a3d; }
.mp3-color[data-theme="blue"] { --sw: #4a7fd4; }
.mp3-color[data-theme="green"] { --sw: #4fd65c; }
.mp3-color[data-theme="yellow"] { --sw: #ffe14a; }
@media (max-width: 1300px) {
.music__in { grid-template-columns: minmax(0, 1fr); }
}
.cds-dots { display: none; }
@media (max-width: 1300px) {
/* tablets and phones: the player first, then the CDs three at a time — swipe (or tap the dots) for the rest */
.mp3-wrap { order: -1; }
.music__in { row-gap: 28px; }
.cds {
display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin: -14px -24px 0; padding: 30px 24px 14px; scroll-padding: 0 24px; /* tall top padding: room for the lifted CD + ♪ badge (the scroller clips) */
}
.cds::-webkit-scrollbar { display: none; }
/* exactly three whole CDs in view; the gap matches the side padding so neighbours sit just off-screen */
.cds > li { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.cds-dots { display: flex; opacity: 1; margin-top: -20px; } /* close under the CDs */
}
@media (max-width: 760px) {
.ab-main { padding-bottom: 8px; }
.mp3-colors { gap: 10px; padding: 12px 14px; }
.mp3-color { width: 40px; height: 24px; }
}
/* tablets: keep the column phone-like in size, centred, instead of stretching the TV and episodes across the iPad */
@media (min-width: 761px) and (max-width: 1300px) {
.ab-side, .ab-main { width: 100%; max-width: 820px; margin-inline: auto; }
.ab-main { max-width: calc(820px / var(--ab-scale)); } /* the main column is zoomed to .85 */
.ab-side { padding-bottom: 44px; } /* room between the name and the TV's tab */
.ep__item { flex-basis: calc((100% - 32px - 36px) / 3); } /* three at a time on tablets, so the window is shorter */
.ep__list { padding-block: 20px; }
.mp3 { max-width: 680px; }
/* CDs a little smaller: a narrower strip, still three at a time */
.cds { width: 600px; max-width: calc(100% + 48px); margin-inline: auto; gap: 28px; }
.cds > li { flex-basis: calc((100% - 56px) / 3); }
}
@media (prefers-reduced-motion: reduce) {
.mp3__disc, .cd__disc, .mp3__title.is-long span, .cd.is-on.is-playing::after { animation: none !important; }
}
/* ---------- TV: a little more real depth, same look as the MP3 player ---------- */
/* the shell's thickness under the front face, and a soft floor shadow */
/* (the frame keeps its own soft shadow from the SVG) */
.tv__tab, .tv__tab-shadow { filter: drop-shadow(0 calc(3 * var(--u)) 0 #14318a); }
/* the face falls off into shade toward its edges, with a long soft sheen across the top */
.tv__shell {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 0 1.4%, rgba(255, 255, 255, .85) 2.6%, rgba(255, 255, 255, 0) 6%),
radial-gradient(60% 40% at 22% 6%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
radial-gradient(130% 120% at 50% 32%, rgba(0, 0, 0, 0) 58%, rgba(20, 30, 70, .16) 100%),
linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 9%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, .18) 100%),
linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, .1));
}
/* the screen sits deeper */
.tv__lip { box-shadow: inset 0 calc(4 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, .5), inset 0 calc(-1 * var(--u)) calc(2 * var(--u)) rgba(255, 255, 255, .6), 0 calc(1.5 * var(--u)) 0 rgba(255, 255, 255, .95); }
/* arrows and dots are moulded buttons with a bit of height */
.tv__arrow img { filter: drop-shadow(0 calc(3.5 * var(--u)) 0 #b3127f) drop-shadow(0 calc(6 * var(--u)) calc(6 * var(--u)) rgba(60, 0, 50, .28)); }
.tv__arrow:active img { filter: drop-shadow(0 calc(1 * var(--u)) 0 #b3127f) drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(60, 0, 50, .28)); }
.tv__arrow:active { transform: translateY(calc(2.5 * var(--u))) scale(.98); }
.tv__dot {
background: radial-gradient(circle at 40% 30%, #ffffff 0 18%, #e3e6ec 55%, #bfc5d1 100%);
border: 0;
box-shadow: 0 calc(2 * var(--u)) 0 #9ea6b7, 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .22), inset 0 calc(-1.5 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 30, .12);
}
.tv__dot:hover { background: radial-gradient(circle at 40% 30%, #ffffff 0 14%, #d4d8e0 55%, #b0b7c5 100%); }
.tv__dot.is-on {
border: 0;
background: radial-gradient(circle at 40% 30%, #e6f6ff 0 14%, #6aa0e0 45%, #2f5fb5 80%, #1f2b76 100%);
box-shadow: 0 calc(2 * var(--u)) 0 #14318a, 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .25), inset 0 calc(-1.5 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 30, .2);
}