/* michaelchoi.nyc — shared stylesheet
─────────────────────────────────────────────────────────────────────────────
Espresso stage, single amber spotlight, cool dusk edge.
Tokens below are lifted verbatim from the Claude Design system
(_ds/michael-choi-design-system-ed6428d7…/tokens/*.css) so the built site and
the design bundle stay in sync. Change a value here only if you change it there.
Fonts are self-hosted in /assets/fonts/ — no Google Fonts request.
───────────────────────────────────────────────────────────────────────────── */
@import url('/assets/fonts/fonts.css');
:root{
/* ── Base surfaces (espresso) ── */
--bg: #160f09; /* espresso base — page */
--panel: #20160d; /* raised section tint */
--panel-2: #2c1e12; /* card / elevated surface */
--panel-3: #382715; /* hover-raised, input fills */
/* ── Text ── */
--text: #ece2d3; /* warm cream — primary */
--text-hi: #ffffff; /* headings, emphasis */
--muted: #a8937a; /* secondary / captions */
--faint: #6f5e49; /* disabled, hairline labels */
/* ── Amber — the one accent ── */
--accent: #d99a3f;
--accent-soft: #f0c574;
--accent-deep: #a9701f;
--on-accent: #221803;
/* ── Lines & borders ── */
--line: rgba(217,154,63,.24);
--line-soft: rgba(217,154,63,.15);
--line-hard: rgba(217,154,63,.44);
/* ── Type — the ONLY place fonts are named ── */
--font-display: "Aboreto", Georgia, serif;
--font-body: "DM Sans", system-ui, sans-serif;
--font-accent: "Permanent Marker", cursive;
--fs-hero: clamp(3rem, 10vw, 7rem);
--fs-h1: clamp(2.4rem, 7vw, 4rem);
--fs-h2: clamp(2rem, 6vw, 3.4rem);
--fs-lede: clamp(1rem, 2.4vw, 1.15rem);
--fs-eyebrow: .72rem;
--fs-callout: clamp(1.3rem, 3vw, 1.9rem);
--ls-display: .05em;
--ls-eyebrow: .32em;
--ls-nav: .14em;
--ls-btn: .12em;
/* ── Layout ── */
--section-y: clamp(64px, 9vw, 120px);
--gutter: clamp(20px, 5vw, 48px);
--maxw: 1512px; /* 14-inch laptop screen (MacBook Pro 14 logical width) */
--maxw-text: 990px; /* the same step up, kept in proportion: 760 × 1512/1160 */
/* ── Radii, shadows, motion ── */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow-card: 0 10px 30px rgba(0,0,0,.35);
--glow-amber: 0 10px 30px rgba(217,154,63,.35);
--ease: cubic-bezier(.2,.7,.2,1);
--dur-fast: .18s;
--dur: .25s;
}
/* ── Base ── */
*{box-sizing:border-box;margin:0;padding:0}
/* The page background lives on , not , so that the plate layer can
sit at z-index:-1 — above the page ground, beneath every bit of content —
without a single page needing its content raised. body must stay
transparent or it buries the layer. */
html{scroll-behavior:smooth;background:var(--bg)}
body{background:transparent;color:var(--text);font-family:var(--font-body);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,.display{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:var(--ls-display)}
h3,h4{font-family:var(--font-body);font-weight:600;line-height:1.25}
a{color:var(--accent-soft);text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid rgba(240,197,116,.55);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--maxw-text)}
/* ── Signature gradients (from tokens/backgrounds.css) ── */
.gradient-hero{
background:
radial-gradient(44% 60% at 72% 44%, rgba(240,197,116,.26), transparent 60%),
radial-gradient(52% 64% at 3% 94%, rgba(47,111,106,.30), transparent 62%),
radial-gradient(48% 56% at 100% 106%, rgba(91,42,74,.36), transparent 56%),
radial-gradient(62% 60% at 46% 110%, rgba(197,106,58,.12), transparent 60%),
linear-gradient(158deg,#20150d,#0e0908 74%);
}
.gradient-soft{
background:
radial-gradient(90% 70% at 78% 20%, rgba(240,197,116,.14), transparent 60%),
linear-gradient(160deg,#1a1109,#0e0908 80%);
}
.vignette::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(62% 60% at 50% 40%,transparent,rgba(8,5,12,.55));
}
/* ── Type helpers ── */
.eyebrow{font-family:var(--font-body);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-size:var(--fs-eyebrow);color:var(--accent-soft)}
.callout{font-family:var(--font-accent);color:var(--accent-soft);display:inline-block;transform:rotate(-2deg);font-size:var(--fs-callout);line-height:1.2}
/* Epigraph — a standing quotation in display type. Used on the home page's
mission block and at the head of Dance Nerd. Quote marks are typed, not
generated, so the source reads the way it renders. */
.epigraph{font-family:var(--font-display);color:var(--text-hi);font-size:clamp(1.1rem,2.1vw,1.45rem);line-height:1.38;margin:0;text-wrap:balance}
.epigraph cite{display:block;margin-top:.7rem;font-family:var(--font-body);font-style:normal;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-soft)}
.lede{color:var(--muted);font-size:var(--fs-lede)}
/* ── Nav ── */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(14,10,20,.72);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--font-display);font-size:1.5rem;letter-spacing:1px;color:var(--accent-soft)}
.nav-links{display:flex;gap:clamp(14px,2.2vw,32px);list-style:none}
.nav-links a{font-size:.82rem;letter-spacing:var(--ls-nav);text-transform:uppercase;color:var(--muted);padding:6px 0;transition:color var(--dur-fast)}
.nav-links a:hover,.nav-links a.active{color:var(--accent-soft)}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--accent-soft);font-size:1.1rem;cursor:pointer}
@media(max-width:940px){
.nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:rgba(14,10,20,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px var(--gutter) 24px}
.nav-links.open{display:flex}
.nav-links a{font-size:.9rem;padding:13px 0;border-bottom:1px solid var(--line-soft);display:block}
.menu-btn{display:flex}
}
/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:.85rem;font-weight:500;letter-spacing:var(--ls-btn);text-transform:uppercase;border:1px solid transparent;line-height:1;white-space:nowrap;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.btn-gold{background:linear-gradient(120deg,var(--accent),var(--accent-soft));color:var(--on-accent)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:var(--glow-amber);color:var(--on-accent)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--accent-soft)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--line-hard);color:var(--accent-soft)}
.btn-lg{padding:14px 28px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
/* ── Sections ── */
.block{padding:var(--section-y) 0}
.block.tint{background:var(--panel)}
.page-header{position:relative;overflow:hidden;padding:clamp(72px,10vw,130px) 0 clamp(40px,6vw,64px)}
.page-header h1{color:var(--text-hi);font-size:var(--fs-h1);line-height:1.08;margin:.2em 0 .3em;max-width:22ch}
.section-head{max-width:60ch}
.section-head h2{font-size:var(--fs-h2);color:var(--text-hi);margin:.35rem 0}
.section-head p{color:var(--muted);font-size:var(--fs-lede)}
/* ── Cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.cards.tight{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.card{display:block;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:30px 28px;transition:transform var(--dur) var(--ease),border-color var(--dur)}
a.card:hover{transform:translateY(-4px);border-color:var(--line)}
.card .num{font-family:var(--font-display);font-size:2rem;color:var(--accent);line-height:1}
.card h3{font-family:var(--font-display);font-weight:500;letter-spacing:var(--ls-display);font-size:1.6rem;color:var(--text-hi);margin:.3rem 0 .5rem}
.card p{color:var(--muted);font-size:.96rem}
.card .meta{display:block;color:var(--accent-soft);font-size:.85rem;margin-bottom:8px}
.card .out{color:var(--accent-soft)}
.card .sub{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.card .sub span{display:block;color:var(--muted);font-size:.85rem;padding:5px 0}
.card .sub .arrow{display:inline;color:var(--accent)}
/* ── Card history disclosure (Teaching boards) ── */
.card-hist{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.card-hist>summary{cursor:pointer;color:var(--accent-soft);font-size:.82rem;letter-spacing:var(--ls-btn);text-transform:uppercase;list-style:none}
.card-hist>summary::-webkit-details-marker{display:none}
.card-hist>summary::after{content:" +";color:var(--accent)}
.card-hist[open]>summary::after{content:" –"}
.card-hist>summary:hover{color:var(--accent)}
.card-hist p{color:var(--muted);font-size:.92rem;margin-top:10px}
/* ── Numbered path (Taking your examinations) ── */
.path{display:flex;flex-direction:column}
.path .step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line-soft)}
.path .step:last-child{border-bottom:1px solid var(--line-soft)}
.path .n{font-family:var(--font-display);font-size:1.6rem;color:var(--accent);line-height:1}
.path .step .lead{font-weight:500;color:var(--text);margin:0}
.path .step .sub{color:var(--muted);margin:.3rem 0 0}
@media(max-width:520px){
.path .step{grid-template-columns:1fr;gap:6px}
}
/* ── Corner motif host (position:absolute inside a positioned section) ── */
.motif-corner{position:absolute;inset:0;z-index:0;pointer-events:none}
/* ── Credentials ── */
.cred-strip{font-weight:400;font-size:.9rem;letter-spacing:.02em;color:var(--muted);line-height:1.9}
.cred-strip span{color:var(--text)}
.cred-strip .sep{color:var(--accent);padding:0 .55em}
.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(20px,3vw,32px)}
.cred-grid > div{border-top:1px solid var(--line);padding-top:16px}
.cred-grid h4{font-family:var(--font-body);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-size:var(--fs-eyebrow);color:var(--accent);margin:0 0 10px}
.cred-grid p{color:var(--muted)}
.cred-grid .paren{color:var(--faint)}
/* ── Post rows ── */
.post-row{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line-soft);transition:padding-left var(--dur-fast) var(--ease)}
.post-row:hover{padding-left:8px}
.post-row .date{color:var(--muted);font-size:.82rem;letter-spacing:.05em;padding-top:.5rem}
.post-row h3{font-family:var(--font-display);font-weight:500;letter-spacing:var(--ls-display);font-size:clamp(1.5rem,3.2vw,2rem);color:var(--text-hi);margin:0 0 .35rem;transition:color var(--dur-fast)}
.post-row:hover h3{color:var(--accent-soft)}
.post-row .excerpt{color:var(--muted);font-size:.98rem;max-width:64ch}
.post-row .tags{margin-top:.6rem;display:flex;gap:8px;flex-wrap:wrap}
/* .tagchip is the name used in post markup and _templates/PUBLISHING.md; .tag is the
older alias still present on some pages. Both styled, per the design system's tokens/site.css. */
.tagchip,.tag{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px 10px;display:inline-block}
.tags{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){
.post-row{grid-template-columns:1fr;gap:8px}
.post-row .date{padding-top:0}
}
/* ── Photo frame ── */
.photo-frame{margin:0}
.photo-frame .shot{position:relative;aspect-ratio:4 / 5;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--panel)}
.photo-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) sepia(.18) saturate(1.05)}
.photo-frame figcaption{margin-top:10px;color:var(--muted);font-size:.84rem;line-height:1.5}
/* Partnerships (About) — the chronology carries all seven; the photo strip carries
however many images exist. Deliberately decoupled, so a missing photo leaves no
hole in the record and a new one can be dropped in without reflowing anything. */
.partner-list{list-style:none;margin:clamp(24px,4vw,36px) 0 0;padding:0}
.partner-list li{display:grid;grid-template-columns:6.2rem 1fr auto;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line-soft)}
.partner-list .when{font-family:var(--font-display);color:var(--accent-soft);font-size:.9rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.partner-list .who{font-family:var(--font-display);color:var(--text-hi);font-size:1.08rem}
.partner-list .what{color:var(--muted);font-size:.9rem;text-align:right}
.partner-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:clamp(16px,2.5vw,28px);margin-top:clamp(28px,4vw,44px);align-items:start}
@media (max-width:560px){
.partner-list li{grid-template-columns:5.4rem 1fr;gap:2px 14px}
.partner-list .what{grid-column:2;text-align:left}
}
/* .natural — keep the photo's own aspect ratio instead of cover-cropping to 4:5.
For dance photographs the extended line IS the subject; a 4:5 crop lops off the
reaching arm or the working leg and throws away the reason the shot exists. */
.photo-frame.natural .shot{aspect-ratio:auto}
.photo-frame.natural img{height:auto;object-fit:fill}
/* .true-color — drop the grayscale/sepia wash.
The rule, decided 2026-07-30: current work runs true, the archive stays washed.
Photographs whose subject IS the colour (a Grinch suit, a pink ombré skirt) lose
the reason they exist under the filter, so the live pages — Productions, the home
showcase, the About lede — get .true-color. The partnerships strip deliberately
keeps the wash: it reads as an archive of former partners, and looking historical
is the point. Don't "fix" that inconsistency. */
.photo-frame.true-color img{filter:none}
/* ── Contact + social ── */
.icon-link{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;transition:color var(--dur-fast)}
.icon-link:hover{color:var(--accent-soft)}
.social-row{display:flex;gap:18px}
.social-row a{color:var(--muted);transition:color var(--dur-fast)}
.social-row a:hover{color:var(--accent-soft)}
.social-row.divided{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line-soft)}
/* ── Footer ── */
footer.site{background:linear-gradient(180deg,#0c0812,#080510);border-top:1px solid var(--line-soft)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px;padding-block:clamp(40px,6vw,72px)}
.foot-grid .brand{font-size:1.4rem;display:inline-block}
.foot-tag{color:var(--muted);font-size:.85rem;margin:10px 0 0}
.foot-contact{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.foot-social{margin-top:18px}
.foot-links{display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.foot-links a{color:var(--muted);font-size:.9rem;transition:color var(--dur-fast)}
.foot-links a:hover{color:var(--accent-soft)}
.legal{border-top:1px solid rgba(255,255,255,.06);padding-block:20px;color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* ── Home hero (scroll-scrubbed dissolve) ── */
#heroWrap{position:relative;height:100vh;margin-top:-68px}
#heroSticky{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center}
#heroInner{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:32px}
#heroCopy h1{color:var(--text-hi);font-size:var(--fs-hero);line-height:1.02;margin:.15em 0 .1em}
.triad{font-weight:400;letter-spacing:.04em;font-size:clamp(1.05rem,2.6vw,1.4rem);color:var(--text);margin:0 0 1.1rem}
#marquee{color:var(--accent-soft);transition:opacity .4s var(--ease)}
#heroStage{position:relative;height:100vh;display:flex;align-items:flex-end;justify-content:center}
#heroGlow{position:absolute;width:460px;height:460px;bottom:4%;left:52%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(240,197,116,.32),transparent 62%);filter:blur(12px);will-change:opacity,transform}
#heroCanvas{position:absolute;z-index:2;bottom:0;left:-42%;width:184%;height:104%;will-change:transform,opacity}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--muted);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--accent-soft),transparent)}
@media(max-width:880px){
.scroll-cue{display:none}
#heroWrap{height:auto}
#heroSticky{position:relative;height:auto;min-height:100svh;display:block;overflow:hidden}
#heroInner{position:relative;display:block;min-height:100svh;width:100%;padding:calc(68px + 16px) var(--gutter) 0}
#heroCopy{position:relative;z-index:2;width:100%}
#heroStage{position:absolute;left:0;right:0;bottom:0;width:100%;height:64vh;z-index:1;display:block}
#heroCanvas{position:absolute;bottom:0;left:-38%;width:176%;height:100%}
#heroGlow{width:320px;height:320px;left:50%;bottom:0}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
#heroWrap{height:auto}
#heroSticky{position:relative;height:auto}
*{transition:none!important}
}
/* ── Blog article ── */
.article-hero{padding:clamp(72px,10vw,130px) 0 clamp(24px,4vw,40px)}
.article-hero h1{color:var(--text-hi);font-size:var(--fs-h1);line-height:1.08;margin:.2em 0 0;max-width:24ch}
.article-hero .date{color:var(--muted);font-size:.82rem;letter-spacing:.05em}
.article{padding:0 0 var(--section-y)}
.article .body{font-size:1.05rem}
.article .body > *{margin-bottom:1.2rem}
.article .body h2{font-size:clamp(1.6rem,4vw,2.2rem);color:var(--text-hi);margin:2.4rem 0 1rem}
.article .body h3,.article .body h4{font-family:var(--font-body);font-weight:600;color:var(--text-hi);margin:2rem 0 .8rem}
.article .body h3{font-size:1.3rem}
.article .body h4{font-size:1.1rem}
.article .body a{color:var(--accent-soft);border-bottom:1px solid var(--line)}
.article .body a:hover{border-bottom-color:var(--line-hard)}
.article .body img{border-radius:var(--radius-md);border:1px solid var(--line);margin-block:1.6rem}
.article .body ul,.article .body ol{padding-left:1.4rem}
.article .body li{margin-bottom:.5rem}
.article .body blockquote{border-left:2px solid var(--line);padding-left:1.2rem;color:var(--muted);font-style:italic}
.article .body em{font-style:italic}
.article .body strong{font-weight:600;color:var(--text-hi)}
/* Captioned figures. Diagrams ship as INLINE svg (not ![]()
) so the self-hosted
DM Sans/Aboreto reach their live text and any external refs resolve —
an SVG in ![]()
runs in secure static mode and loads neither. Each figure's
own