/* Homepage — Career palette applied (v50).
   Hero is single-column centered, mirroring career-site structure.
   (Search bar sits below, so kept vertical padding generous but not 11rem.) */
.hero{padding-top:72px;padding-bottom:24px;text-align:left}
.hero h1{font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);font-weight:var(--fw-bold);max-width:700px;margin:0}
.hero h1 strong{font-weight:var(--fw-bold)}
.hero h1 em{font-style:normal;font-weight:var(--fw-bold);color:var(--ink)}
.hero-right p,.hero .subtitle{font-size:var(--fs-body-lg);color:var(--ink-medium);line-height:var(--lh-body);max-width:540px;margin:0;font-weight:var(--fw-regular)}
.recency-signal{font-family:var(--font-body);font-size:var(--fs-nano);color:var(--ink-soft);font-weight:var(--fw-regular);margin:var(--space-2) 0 0;letter-spacing:var(--ls-wide)}
.accent{color:var(--ink);font-style:normal;font-weight:var(--fw-bold)}

/* Filter tab — copper active (career one-accent rule) */
.filter-tabs{display:flex;gap:8px}
.filter-tab{padding:8px 20px;font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-semibold);border:1px solid var(--ink-hairline);background:transparent;color:var(--ink-medium);cursor:pointer;transition:all var(--ease);border-radius:var(--radius-xs);letter-spacing:var(--ls-wide)}
.filter-tab:hover{border-color:var(--ink);color:var(--ink)}
.filter-tab.active{background:var(--ink);color:var(--paper-white);border-color:transparent}
.filter-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.disc-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.topic-card:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;background:var(--paper-warm)}
.collapse-chevron:focus-visible,.collapsible-header:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Tier group — hairline-bordered section on cream */
.tier-group{margin-bottom:16px;background:var(--paper-warm);border:none;border-radius:var(--radius-xs);padding:20px}
.tier-header{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.tier-header h2{font-size:var(--fs-h2);border-bottom:none;padding-bottom:0;margin:0;font-weight:var(--fw-bold);letter-spacing:var(--ls-snug);color:var(--ink)}
.tier-header h2 strong{font-weight:var(--fw-bold)}
.tier-header .tier-badge{position:relative;top:-3px}
.tier-count{font-size:var(--fs-nano);color:var(--ink-medium);font-weight:var(--fw-medium)}

/* Topic grid — clean hairline grid (no colored backgrounds here).
   Discipline tint comes from very faint --disc-*-bg in the inline
   rule in index.html, so the grid stays airy and cream-dominant. */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-1)}
.card{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
.card:hover{box-shadow:none}
/* Topic card — interactive (link).
   At rest: hairline border, no accent strip.
   On hover: paper-deep background, subtle translateY, warm shadow.
   Hairline border stays at rest, no outline unfolds. */
.topic-card{padding:24px 24px 24px 28px;border:1px solid var(--ink-hairline);transition:transform var(--ease),box-shadow var(--ease-slow),background var(--ease);cursor:pointer;display:flex;flex-direction:column;min-height:140px;text-decoration:none;color:inherit;position:relative}
.topic-card:hover{background:var(--paper-white);z-index:1;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link:hover{color:inherit}

.topic-card .topic-number{font-family:var(--font-mono);font-size:var(--fs-nano);font-weight:var(--fw-regular);color:var(--ink);line-height:1;margin-bottom:10px;letter-spacing:var(--ls-wider);text-transform:uppercase}
.topic-card h3{font-family:var(--font-display);font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);line-height:var(--lh-card);margin-bottom:6px;letter-spacing:var(--ls-snug);color:var(--ink)}
.topic-card .topic-desc{font-size:var(--fs-micro);color:var(--ink-medium);line-height:var(--lh-body);font-weight:var(--fw-regular)}

.section-divider{display:flex;align-items:center;gap:16px;margin:48px 0 32px}
.section-divider .line{flex:1;height:2px;background:var(--ink)}
.section-divider .label{font-size:var(--fs-micro);font-weight:400;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink);white-space:nowrap}

/* Tablet: 769px–960px — 2-column grids */
@media(max-width:960px){
.hero{grid-template-columns:1fr;gap:24px}
.hero h1{font-size:var(--fs-h1)}
.topic-grid{grid-template-columns:repeat(2,1fr)}
.filter-row-1{flex-wrap:wrap}
.filter-bar .search-box{flex-basis:100%;order:1}
}

/* Mobile: up to 768px */
@media(max-width:768px){
/* Hero */
.hero{grid-template-columns:1fr;gap:12px}
.hero h1{font-size:var(--fs-h1)}
.hero-right p,.hero .subtitle{font-size:var(--fs-micro)}
/* Tier groups — reduce excessive vertical spacing */
.tier-group{margin-bottom:12px;padding:14px}
.tier-header{gap:10px;margin-bottom:12px}
.tier-header h2{font-size:var(--fs-h3)}
.tier-count{font-size:var(--fs-micro)}
/* Topic grid */
.topic-grid{grid-template-columns:1fr}
.topic-card .topic-number{font-size:var(--fs-micro)}
.topic-card .topic-desc{line-height:1.4}
/* Filter bar */
.filter-row-1{flex-wrap:wrap}
.filter-bar .search-box{flex-basis:100%;order:1}
.filter-row-2{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.filter-row-2 .filter-status{flex-basis:100%;margin-left:0}
.filter-tabs{flex-wrap:wrap}
.filter-tab{padding:6px 14px;font-size:var(--fs-micro)}
/* Discipline toggles — 2x2 grid with clean short labels */
.discipline-toggles{display:grid!important;grid-template-columns:1fr 1fr;gap:4px;width:100%}
.disc-toggle{font-size:0;line-height:0;padding:10px 12px;min-height:40px;justify-content:center;gap:6px;overflow:hidden}
.disc-toggle>*{display:none}
.disc-toggle .disc-dot{display:inline-block;width:8px;height:8px;font-size:0;line-height:0}
.disc-toggle::after{font-size:var(--fs-micro);line-height:1;font-weight:600;letter-spacing:0}
.ux-toggle::after{content:'UX Design'}
.pm-toggle::after{content:'Product'}
.mk-toggle::after{content:'Marketing'}
.cs-toggle::after{content:'Content'}
/* Tier links — horizontal scroll */
.tier-links{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:4px;flex-wrap:nowrap;padding-bottom:4px}
.tier-link{white-space:nowrap;padding:6px 8px;font-size:var(--fs-micro)}
.tier-link .tier-num{display:none}
/* Disc separators — slimmer on mobile */
.disc-separator{padding:8px 16px}
}

/* Collapsible sections */
.collapsible-header{cursor:pointer;user-select:none;position:relative}
.collapsible-header:hover{opacity:0.85}
.collapse-chevron{width:14px;height:14px;transition:transform 0.25s ease;margin-left:auto;flex-shrink:0}
.collapse-chevron svg{display:block;width:14px;height:14px}
.collapse-chevron svg polyline{stroke:var(--ink-light);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.collapsible-section.collapsed .collapse-chevron{transform:rotate(-90deg)}
.collapsible-section.collapsed .collapsible-body{display:none}

/* Footer — hairline top border, muted type, copper accent in slogan */
.site-footer{padding:48px 40px 32px;border-top:1px solid var(--ink-hairline);margin-top:64px;background:var(--paper)}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.footer-meta{display:flex;flex-direction:column;gap:2px}
.footer-slogan{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--ink-soft);letter-spacing:var(--ls-snug)}
.footer-slogan em{font-style:normal;font-weight:var(--fw-bold);color:var(--ink)}
.footer-pills{display:flex;gap:10px}
.footer-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-family:var(--font-body);font-size:var(--fs-nano);font-weight:var(--fw-regular);color:var(--ink);border:none;background:var(--ink-a06);border-radius:var(--radius-xs);text-decoration:none;transition:all 0.2s ease;letter-spacing:var(--ls-wide);text-transform:uppercase}
.footer-pill:hover{color:var(--ink);border-color:var(--ink-a40);background:var(--ink-a12)}
@media(max-width:768px){
.footer-inner{flex-direction:column;gap:12px;align-items:flex-start}
.footer-pills{flex-wrap:wrap}
}

/* Topics section breathing room below sticky filter bar */
.topics-section{padding-top:40px}

/* Dark-mode card backgrounds — uses --disc-*-tint tokens which are
   transparent in light mode and a discipline-coloured wash in dark mode.
   The cascade is automatic, no @media or [data-theme] selectors needed. */
.topic-card[data-discipline="ux"]{background:linear-gradient(var(--disc-ux-tint),var(--disc-ux-tint)),var(--paper-warm)}
.topic-card[data-discipline="pm"]{background:linear-gradient(var(--disc-pm-tint),var(--disc-pm-tint)),var(--paper-warm)}
.topic-card[data-discipline="mk"]{background:linear-gradient(var(--disc-mk-tint),var(--disc-mk-tint)),var(--paper-warm)}
.topic-card[data-discipline="cs"]{background:linear-gradient(var(--disc-cs-tint),var(--disc-cs-tint)),var(--paper-warm)}

/* Dark-mode card backgrounds — white layer beneath disc tint for card lift.
   Disc tint on top, rgba white boost below it, then paper-warm base. */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .topic-card[data-discipline="ux"]{background:linear-gradient(var(--disc-ux-tint),var(--disc-ux-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
:root:not([data-theme="light"]) .topic-card[data-discipline="pm"]{background:linear-gradient(var(--disc-pm-tint),var(--disc-pm-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
:root:not([data-theme="light"]) .topic-card[data-discipline="mk"]{background:linear-gradient(var(--disc-mk-tint),var(--disc-mk-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
:root:not([data-theme="light"]) .topic-card[data-discipline="cs"]{background:linear-gradient(var(--disc-cs-tint),var(--disc-cs-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
:root:not([data-theme="light"]) .topic-card:hover{background:var(--paper-deep)}
:root:not([data-theme="light"]) .topic-card[data-discipline]:hover{filter:brightness(1.1)}
}
[data-theme="dark"] .topic-card[data-discipline="ux"]{background:linear-gradient(var(--disc-ux-tint),var(--disc-ux-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
[data-theme="dark"] .topic-card[data-discipline="pm"]{background:linear-gradient(var(--disc-pm-tint),var(--disc-pm-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
[data-theme="dark"] .topic-card[data-discipline="mk"]{background:linear-gradient(var(--disc-mk-tint),var(--disc-mk-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
[data-theme="dark"] .topic-card[data-discipline="cs"]{background:linear-gradient(var(--disc-cs-tint),var(--disc-cs-tint)),linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),var(--paper-warm)}
[data-theme="dark"] .topic-card:hover{background:var(--paper-deep)}
[data-theme="dark"] .topic-card[data-discipline]:hover{filter:brightness(1.1)}