/* Per-persona design for the personalized site (/you/).
   you.js sets data-persona="<id>" on <html> and loads the persona's fonts
   (the `fonts` field in personas.js). Structure and markup never change: a
   theme only overrides the main stylesheet's colour variables plus a few
   finishing touches. The picker and ?as=standard carry no data-persona and
   keep the main site's design.

   Every theme defines a light and a dark palette. The light one is guarded
   with :not([data-theme="dark"]), since an unguarded :root[data-persona]
   rule would have the same specificity as the main stylesheet's dark block
   and, coming later, would beat it.

   Hooks shared by all themes:
   --you-head   heading typeface         --you-ui     labels, nav, small caps
   --you-radius corner rounding           --you-logo   filter that recolours the
                                                       green FuSo logo */
/* Plain-paragraph overrides are written as ":where(&) p" so they carry no
   more weight than the main stylesheet's bare "p" rule: they restyle body
   text without beating classed small text (.footer-privacy, .focus-num,
   .event-name, ...). */

:root[data-persona] {
  --you-head: var(--font);
  --you-ui: 'Inter', system-ui, sans-serif;
  --you-radius: 0px;
  --you-logo: none;
}

:root[data-persona] :is(h1, h2, h3, .event-box-heading, .project-title, .footer-wordmark, .nav-wordmark) {
  font-family: var(--you-head);
}
:root[data-persona] :is(nav, .hero-label, .hero-meta, .you-bar, .section-label, .focus-num,
  .focus-pub-toggle, .focus-pub-meta, .talk-kicker, .talk-date, .event-meta-row, .way-num,
  .project-num, .you-tile-go, .you-pick-tag, .brick-role, .footer-privacy, .you-btn, .talk-ics-export) {
  font-family: var(--you-ui);
}
:root[data-persona] :is(.hero-logo img, .footer-logo img) { filter: var(--you-logo); }
:root[data-persona][data-theme="dark"] .about-intro { background: color-mix(in srgb, var(--gray), var(--black) 7%); }

/* Wider typefaces can make a long word in a team brick wider than its
   column; let bricks shrink and wrap instead of overflowing on phones. */
:root[data-persona] :is(.team-brick, .team-brick > *) { min-width: 0; overflow-wrap: anywhere; }

/* Rounded themes: cards become separate tiles (the main grid draws 1px black
   lines through a black background showing between square cards, which
   rounded corners would expose). */
:root:is([data-persona="student"], [data-persona="business"], [data-persona="kid"], [data-persona="music"]) {
  & .focus-grid { gap: 1rem; background: none; }
  & .focus-card { border-radius: var(--you-radius); overflow: hidden; border: 1px solid var(--divider); }
  & .you-filler { visibility: hidden; }
  & :is(.event-box, .about-intro, .you-data) { border-radius: var(--you-radius); }
}

/* ─── ACADEMIC: a journal page. Serif text, deep teal, paper grey. ─── */
:root[data-persona="academic"]:not([data-theme="dark"]) {
  --black: #1a1a1a; --white: #ffffff; --gray: #f4f1ea; --mid: #8f887a;
  --accent: #0f5e63; --accent-contrast: #0f5e63; --accent-text: #0f5e63;
  --text-body: #33302a; --text-quiet: #6b655a; --divider: #ddd6c8;
}
:root[data-persona="academic"][data-theme="dark"] {
  --black: #ece8df; --white: #131516; --gray: #1a1d1e; --mid: #a39d90;
  --accent: #3a979c; --accent-contrast: #0f5e63; --accent-text: #8fd0d3;
  --text-body: #d9d4ca; --text-quiet: #b8b2a6; --divider: #2c3031;
}
:root[data-persona="academic"] {
  --font: 'Source Serif 4', Georgia, serif;
  --you-head: 'Newsreader', Georgia, serif;
  --you-logo: hue-rotate(40deg) saturate(0.8);
  :where(&) p { font-weight: 400; font-size: 1.04rem; }
  & :is(h1, h2) { font-weight: 600; letter-spacing: -0.015em; }
  & :is(h1, h2) .accent-text { font-style: italic; font-weight: 500; }
  & .about-intro { border-left: 3px solid var(--accent); }
  & .focus-num { font-variant-numeric: oldstyle-nums; }
}

/* ─── STUDENT: bright, rounded, highlighter on the key words. ─── */
:root[data-persona="student"]:not([data-theme="dark"]) {
  --black: #111111; --white: #ffffff; --gray: #f1f6ee; --mid: #8c9a8f;
  --accent: #00a651; --accent-contrast: #007a3d; --accent-text: #007a3d;
  --text-body: #2f3a32; --text-quiet: #5d6b61; --divider: #dbe6dc;
  --you-mark: #d4f53c;
}
:root[data-persona="student"][data-theme="dark"] {
  --black: #eef3ee; --white: #0f1411; --gray: #161d18; --mid: #8fa394;
  --accent: #22c46d; --accent-contrast: #007a3d; --accent-text: #7fe7a8;
  --text-body: #d6e0d8; --text-quiet: #b0beb3; --divider: #26332a;
  --you-mark: rgba(212, 245, 60, 0.3);
}
:root[data-persona="student"] {
  --you-head: 'Space Grotesk', 'Inter', sans-serif;
  --you-radius: 16px;
  --you-logo: saturate(1.4) brightness(1.05);
  & :is(h1, h2) { letter-spacing: -0.03em; }
  & :is(h1, h2) .accent-text {
    color: inherit;
    background: linear-gradient(transparent 58%, var(--you-mark) 58%, var(--you-mark) 92%, transparent 92%);
  }
  & .way-filter, & .you-btn { border-radius: 999px; }
  & .project-item.open { background: var(--gray); border-radius: 12px; }
}

/* ─── POLICYMAKER: institutional. Navy, plain sans, notice-style boxes. ─── */
:root[data-persona="policy"]:not([data-theme="dark"]) {
  --black: #0f1b2d; --white: #ffffff; --gray: #eef2f7; --mid: #8592a6;
  --accent: #1f4e8c; --accent-contrast: #1f4e8c; --accent-text: #1f4e8c;
  --text-body: #2b3645; --text-quiet: #5a6678; --divider: #d5dde8;
}
:root[data-persona="policy"][data-theme="dark"] {
  --black: #e6ebf2; --white: #0f141c; --gray: #151c27; --mid: #8d99ab;
  --accent: #4a7cc2; --accent-contrast: #1f4e8c; --accent-text: #a8c4ec;
  --text-body: #d3dbe6; --text-quiet: #aab5c4; --divider: #263041;
}
:root[data-persona="policy"] {
  --font: 'IBM Plex Sans', 'Inter', sans-serif;
  --you-ui: 'IBM Plex Sans', 'Inter', sans-serif;
  --you-logo: hue-rotate(75deg) saturate(0.85);
  :where(&) p { font-weight: 400; }
  & :is(h1, h2) { font-weight: 600; letter-spacing: -0.015em; }
  & .about-intro { border-left: 4px solid var(--accent); }
  & section { border-top: 1px solid var(--divider); }
  & .focus-grid { background: var(--divider); }
  & .focus-num { color: var(--text-quiet); }
}

/* ─── BUSINESS: slate and emerald, soft shadows, rounded tiles. ─── */
:root[data-persona="business"]:not([data-theme="dark"]) {
  --black: #0f172a; --white: #ffffff; --gray: #f1f5f9; --mid: #94a3b8;
  --accent: #0d7a5f; --accent-contrast: #0d7a5f; --accent-text: #0d7a5f;
  --text-body: #334155; --text-quiet: #64748b; --divider: #e2e8f0;
  --you-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.07);
}
:root[data-persona="business"][data-theme="dark"] {
  --black: #e2e8f0; --white: #0b1120; --gray: #111a2e; --mid: #64748b;
  --accent: #10a37f; --accent-contrast: #0d7a5f; --accent-text: #6ee7c8;
  --text-body: #cbd5e1; --text-quiet: #94a3b8; --divider: #1e293b;
  --you-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
:root[data-persona="business"] {
  --font: 'Manrope', 'Inter', sans-serif;
  --you-ui: 'Manrope', 'Inter', sans-serif;
  --you-radius: 10px;
  --you-logo: hue-rotate(20deg) saturate(0.9);
  :where(&) p { font-weight: 400; }
  & :is(h1, h2) { font-weight: 800; letter-spacing: -0.035em; }
  & .focus-card { border: 0; box-shadow: var(--you-shadow); }
  & .event-box { box-shadow: var(--you-shadow); }
  & section:nth-of-type(odd) .focus-card { background: var(--white); }
}

/* ─── IN A HURRY: condensed type, signal orange, tight spacing. ─── */
:root[data-persona="hurry"]:not([data-theme="dark"]) {
  --black: #141414; --white: #ffffff; --gray: #fff3ea; --mid: #a3958a;
  --accent: #c2410c; --accent-contrast: #c2410c; --accent-text: #c2410c;
  --text-body: #33302d; --text-quiet: #6b625b; --divider: #f0dfd2;
}
:root[data-persona="hurry"][data-theme="dark"] {
  --black: #f3ece6; --white: #14100d; --gray: #1c1612; --mid: #a8998c;
  --accent: #ea580c; --accent-contrast: #c2410c; --accent-text: #ffa36b;
  --text-body: #e2d8cf; --text-quiet: #bfb2a6; --divider: #33281f;
}
:root[data-persona="hurry"] {
  --you-head: 'Archivo Narrow', 'Inter', sans-serif;
  --h2-size: clamp(1.8rem, 3.2vw, 2.75rem);
  --you-logo: hue-rotate(235deg) saturate(1.3);
  & section { padding: 3.5rem 0; }
  & #hero { padding-top: 2rem; padding-bottom: 1.5rem; }
  & :is(h1, h2) { font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
  & .hero-chain {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent-contrast);
  }
  & .you-line p { font-weight: 500; }
}

/* ─── CURIOUS 10-YEAR-OLD: round letters, sunny colours, a colour per card. ─── */
:root[data-persona="kid"]:not([data-theme="dark"]) {
  --black: #1f1636; --white: #ffffff; --gray: #fff6d8; --mid: #9a8fb0;
  --accent: #6d28d9; --accent-contrast: #6d28d9; --accent-text: #6d28d9;
  --text-body: #3b2f55; --text-quiet: #6a5d84; --divider: #e9e2f5;
}
:root[data-persona="kid"][data-theme="dark"] {
  --black: #f3eefe; --white: #17132a; --gray: #201a3a; --mid: #9a8fb8;
  --accent: #8b5cf6; --accent-contrast: #6d28d9; --accent-text: #c9b8ff;
  --text-body: #ddd5f0; --text-quiet: #b9aed4; --divider: #352c55;
}
:root[data-persona="kid"] {
  --font: 'Fredoka', 'Inter', sans-serif;
  --you-ui: 'Fredoka', 'Inter', sans-serif;
  --you-radius: 24px;
  --you-logo: hue-rotate(121deg) saturate(1.2);
  :where(&) p { font-weight: 400; font-size: 1.08rem; }
  & :is(h1, h2) { font-weight: 600; letter-spacing: -0.01em; }
  & .about-intro { border: 2px dashed var(--accent); }
  & .focus-card { border-width: 3px; }
  & .focus-card:nth-child(6n+1) { --you-c: #8b5cf6; }
  & .focus-card:nth-child(6n+2) { --you-c: #f97316; }
  & .focus-card:nth-child(6n+3) { --you-c: #14b8a6; }
  & .focus-card:nth-child(6n+4) { --you-c: #ec4899; }
  & .focus-card:nth-child(6n+5) { --you-c: #eab308; }
  & .focus-card:nth-child(6n+6) { --you-c: #3b82f6; }
  & .focus-card:not(.you-filler) { border-color: var(--you-c); }
  & .focus-card .focus-num { color: var(--you-c); font-size: 0.85rem; }
  & .project-title { font-size: 1.05rem; font-weight: 500; }
  & .brick-avatar { border-radius: 50%; }
}

/* ─── AI AGENT: a terminal. Monospace throughout, green on black when dark. ─── */
:root[data-persona="agent"]:not([data-theme="dark"]) {
  --black: #0b120b; --white: #ffffff; --gray: #f3f6f3; --mid: #7d8f7f;
  --accent: #0a7d2c; --accent-contrast: #0a7d2c; --accent-text: #0a7d2c;
  --text-body: #233023; --text-quiet: #526352; --divider: #cfd8cf;
}
:root[data-persona="agent"][data-theme="dark"] {
  --black: #b8f5c2; --white: #070b07; --gray: #0c130d; --mid: #5f9468;
  --accent: #22c55e; --accent-contrast: #0a7d2c; --accent-text: #4ade80;
  --text-body: #9fe0ab; --text-quiet: #7cbf88; --divider: #1d3322;
}
:root[data-persona="agent"] {
  --font: 'JetBrains Mono', ui-monospace, monospace;
  --you-head: 'JetBrains Mono', ui-monospace, monospace;
  --you-ui: 'JetBrains Mono', ui-monospace, monospace;
  --h2-size: clamp(1.7rem, 3.2vw, 2.7rem);
  & body { font-size: 15px; }
  :where(&) p { font-weight: 400; font-size: 0.92rem; }
  & h1 { font-weight: 800; letter-spacing: -0.06em; }
  & h2 { font-weight: 700; letter-spacing: -0.04em; }
  & h2::before { content: '## '; color: var(--mid); }
  & .hero-chain::after {
    content: '';
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 0.2em;
    vertical-align: -0.15em;
    background: var(--accent-text);
    animation: you-blink 1.1s steps(1) infinite;
  }
  & :is(.about-intro, .you-data) { border: 1px dashed var(--divider); }
}
@keyframes you-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-persona="agent"] .hero-chain::after { animation: none; }
}

/* ─── TIME TRAVELLER FROM 1898: a printed gazette. Sepia paper, Didone
   headings, Garamond text, double rules, drop cap, sepia photographs. ─── */
:root[data-persona="time-traveller"]:not([data-theme="dark"]) {
  --black: #2b1d12; --white: #f6efe0; --gray: #ece1c8; --mid: #8a7356;
  --accent: #7a1f1f; --accent-contrast: #7a1f1f; --accent-text: #7a1f1f;
  --text-body: #3d2b1c; --text-quiet: #6b5640; --divider: #cdb994;
}
:root[data-persona="time-traveller"][data-theme="dark"] {
  --black: #efe2c6; --white: #17110b; --gray: #201810; --mid: #9c8664;
  --accent: #b5523f; --accent-contrast: #7a1f1f; --accent-text: #e9ae7a;
  --text-body: #e0d0b0; --text-quiet: #bfa985; --divider: #3a2c1d;
}
:root[data-persona="time-traveller"] {
  --font: 'EB Garamond', Georgia, serif;
  --you-head: 'Playfair Display', Georgia, serif;
  --you-ui: 'EB Garamond', Georgia, serif;
  --you-logo: sepia(1) saturate(1.6) hue-rotate(-15deg) brightness(0.75) contrast(1.2);
  :where(&) p { font-weight: 400; font-size: 1.14rem; }
  & :is(h1, h2) { font-weight: 900; letter-spacing: -0.01em; }
  & :is(h1, h2) .accent-text { font-style: italic; font-weight: 700; }
  & .hero-slogan { font-family: 'Playfair Display', Georgia, serif; }
  & :is(.hero-label, .hero-meta, .focus-num, .section-label, nav a) { letter-spacing: 0.14em; }
  & .section-label { filter: sepia(1); }
  &[data-theme="dark"] .section-label { filter: invert(1) sepia(0.7); }
  & .event-box-heading, & .about-fullstack { border-bottom-style: double; border-width: 0 0 4px; }
  & .about-fullstack { border-width: 4px 0 0; border-top-style: double; }
  & .about-intro { border-top: 4px double var(--divider); border-bottom: 4px double var(--divider); }
  & .about-intro p::first-letter {
    float: left;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: 3.6em;
    line-height: 0.8;
    padding: 0.06em 0.12em 0 0;
    color: var(--accent-text);
  }
  & :is(.brick-avatar, .you-person img, .former-avatar) { filter: sepia(0.85) contrast(0.95); }
  & .funder-logo { filter: sepia(1) saturate(0.7); }
}

/* ─── MUSIC FAN: poster type, magenta-to-violet, record-sleeve tiles. ─── */
:root[data-persona="music"]:not([data-theme="dark"]) {
  --black: #160a12; --white: #ffffff; --gray: #fbf0f6; --mid: #a78a9b;
  --accent: #be185d; --accent-contrast: #be185d; --accent-text: #be185d;
  --text-body: #3a2532; --text-quiet: #6e5566; --divider: #f0d9e6;
  --you-accent2: #7c3aed;
}
:root[data-persona="music"][data-theme="dark"] {
  --black: #f6e9f1; --white: #120a10; --gray: #1c1018; --mid: #9b8193;
  --accent: #ec4899; --accent-contrast: #be185d; --accent-text: #f9a8d4;
  --text-body: #e5d3de; --text-quiet: #c0a8b7; --divider: #34202d;
  --you-accent2: #a78bfa;
}
:root[data-persona="music"] {
  --font: 'DM Sans', 'Inter', sans-serif;
  --you-head: 'Bebas Neue', 'Inter', sans-serif;
  --you-radius: 14px;
  --h2-size: clamp(2.6rem, 5vw, 4.4rem);
  --h2-line-height: 0.95;
  --you-logo: hue-rotate(195deg) saturate(1.3);
  & :is(h1, h2, h3) { font-weight: 400; letter-spacing: 0.01em; }
  & h1 { font-size: clamp(3.6rem, 8vw, 6.5rem); line-height: 0.9; }
  & .focus-card h3 { font-size: 1.6rem; }
  & :is(h1, h2) .accent-text {
    background: linear-gradient(90deg, var(--accent), var(--you-accent2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  & .focus-card {
    background-image: linear-gradient(90deg, var(--accent), var(--you-accent2));
    background-size: 100% 5px;
    background-repeat: no-repeat;
  }
  & .you-track audio { accent-color: var(--accent); border-radius: 999px; }
}

/* ─── SKEPTIC: a marked-up proof. Black and white, red pen, wavy underlines,
   monospaced labels, greyscale photographs. ─── */
:root[data-persona="skeptic"]:not([data-theme="dark"]) {
  --black: #111111; --white: #ffffff; --gray: #f2f2f0; --mid: #8f8f8f;
  --accent: #b3261e; --accent-contrast: #b3261e; --accent-text: #b3261e;
  --text-body: #2e2e2e; --text-quiet: #5f5f5f; --divider: #d9d9d6;
}
:root[data-persona="skeptic"][data-theme="dark"] {
  --black: #ededed; --white: #121212; --gray: #1a1a1a; --mid: #9a9a9a;
  --accent: #e5483d; --accent-contrast: #b3261e; --accent-text: #ff8a80;
  --text-body: #dadada; --text-quiet: #b5b5b5; --divider: #2e2e2e;
}
:root[data-persona="skeptic"] {
  --you-head: 'IBM Plex Serif', Georgia, serif;
  --you-ui: 'IBM Plex Mono', ui-monospace, monospace;
  --you-logo: grayscale(1) contrast(1.4);
  & :is(h1, h2) { font-weight: 700; letter-spacing: -0.02em; }
  & :is(h1, h2) .accent-text {
    color: inherit;
    text-decoration: underline wavy var(--accent);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.12em;
  }
  & .about-intro { background: none; border: 1px dashed var(--accent); }
  & .project-num::before { content: 'Q'; }
  & :is(.brick-avatar, .you-person img, .former-avatar) { filter: grayscale(1); }
}