/* ---------- Type ---------- */
/* Self-hosted (not Google's CDN) so the font never depends on a third-party
   request succeeding — same reasoning as inlining assets on the artifact
   pitch, just via local files instead of data URIs since this is a real,
   unsandboxed site. IBM Plex Sans ships as a single variable file covering
   weight 400-700; Zilla Slab and IBM Plex Mono ship as static per-weight
   files (Google doesn't offer them as variable fonts). */
@font-face {
    font-family: 'Zilla Slab';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/zilla-slab-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Zilla Slab';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/zilla-slab-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Zilla Slab';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/zilla-slab-700.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/plex-sans-var.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/plex-mono-500.woff2') format('woff2');
}

:root {
    /* Fixed brand backdrop — header/hero/footer stay this color in both themes,
       same reasoning as a printed logo not changing with the page it's on. */
    --brand-navy: #0f2557;
    --brand-navy-dark: #081533;

    --navy: #0f2557;
    --navy-dark: #081533;
    --saffron: #e8720f;
    --saffron-dark: #c25f0a;
    --gold: #c9932f;
    --green: #0f7a42;
    --bg: #f4f6fb;
    --card: #ffffff;
    --border: #dde3f0;
    --text: #131a33;
    --text-muted: #5a6382;
    --radius: 6px;

    --font-display: 'Zilla Slab', Georgia, 'Times New Roman', serif;
    --font-body: 'IBM Plex Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
    /* --navy lightens here since it's used for links/accents/small buttons —
       the original deep navy has poor contrast on a dark page background.
       --brand-navy stays untouched (see above) since header/hero/footer are
       meant to stay their fixed brand color regardless of theme. */
    --navy: #7699ea;
    --saffron: #ff9a4d;
    --saffron-dark: #ffb271;
    --gold: #dcac52;
    --green: #35c47f;
    --bg: #0d121c;
    --card: #171e2c;
    --border: #2b3346;
    --text: #e8ecf6;
    --text-muted: #9aa5bc;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--saffron); }

/* Small-caps-ish utility for eyebrows/labels/dates — anywhere a mono,
   tracked-out label reads as "official record" rather than marketing copy. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Header */
.site-header {
    background: var(--brand-navy);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.logo { display: flex; align-items: center; margin-right: auto; }
.logo img {
    display: block;
    flex-shrink: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.main-nav a {
    color: #c7d2ee;
    margin-left: 26px;
    font-weight: 500;
    font-size: 0.95rem;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: #fff; border-color: var(--saffron); }

.header-controls { display: flex; align-items: center; gap: 8px; margin-left: 20px; }

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    border-radius: 50%;
    color: #fff;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero — a "notice board" composition: copy on one side, a stack of pinned
   real notices on the other, so the page demonstrates what the site does in
   the first few seconds rather than just describing it with a stock hero. */
.hero {
    background: var(--brand-navy);
    color: #fff;
    padding: 60px 20px 0;
    position: relative;
    overflow: hidden;
}
.hero-chakra {
    position: absolute;
    top: -160px;
    right: -160px;
    width: 480px;
    height: 480px;
    opacity: 0.06;
    pointer-events: none;
}
.hero-grid {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    padding-bottom: 52px;
}
.hero-copy { text-align: left; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 5px 12px;
    border: 1px solid rgba(201, 147, 47, 0.4);
    border-radius: 3px;
    margin-bottom: 20px;
}
.hero-eyebrow .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}
.hero-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.hero-title img {
    flex-shrink: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.hero h1 { font-size: 2.5rem; margin: 0; letter-spacing: -0.01em; line-height: 1.08; }
.hero p { color: #c7d2ee; font-size: 1.08rem; max-width: 46ch; margin: 0 0 26px; font-family: var(--font-body); }
.hero-actions { margin-top: 4px; }
.hero-actions a {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    margin: 0 10px 0 0;
}
.btn-primary { background: var(--saffron); color: #fff; }
.btn-primary:hover { background: var(--saffron-dark); color: #fff; }
.btn-secondary { background: transparent; color: #fff; border: 1px solid #4a5d92; }
.btn-secondary:hover { border-color: var(--saffron); color: var(--saffron); }

/* Hero search bar */
.hero-search {
    display: flex;
    max-width: 480px;
    margin: 0 0 22px;
    box-shadow: 0 14px 34px rgba(4, 10, 28, 0.28);
    border-radius: var(--radius);
    overflow: hidden;
}
.hero-search input {
    flex: 1;
    border: none;
    padding: 15px 18px;
    font-size: 1rem;
    font-family: var(--font-body);
    outline: none;
    background: var(--card);
    color: var(--text);
}
.hero-search button {
    background: var(--saffron);
    color: #fff;
    border: none;
    padding: 0 26px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    font-size: 0.95rem;
}
.hero-search button:hover { background: var(--saffron-dark); }

/* Stats — folded into the hero copy column as a tabular-numeral strip,
   rather than a separate floating card overlapping the hero. */
.hero-stats { display: flex; gap: 30px; margin-top: 28px; }
.hero-stats .stat strong {
    display: block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.4rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.hero-stats .stat span { color: #93a2c9; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Pinned notice board — cards look pinned to paper: slight rotation, a pin
   dot, drop shadow. Populated from the site's own live data (closing-soon /
   latest-results), never placeholder content. */
.board { position: relative; height: 400px; }
.pin-card {
    position: absolute;
    width: 260px;
    background: var(--card);
    color: var(--text);
    border-radius: 3px;
    padding: 16px 18px 18px;
    box-shadow: 0 20px 34px rgba(4, 10, 28, 0.3);
}
.pin-card::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 22px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}
.pin-card .tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 2px;
    margin-bottom: 9px;
}
.pin-card h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; line-height: 1.35; margin: 0 0 8px; }
.pin-card .meta { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); }
.pin-1 { top: 0; left: 4%; transform: rotate(-3deg); z-index: 3; }
.pin-2 { top: 56px; left: 40%; transform: rotate(2.5deg); z-index: 2; }
.pin-3 { top: 178px; left: 2%; transform: rotate(2deg); z-index: 1; }
.pin-4 { top: 234px; left: 38%; transform: rotate(-2deg); z-index: 2; }
.tag-job { background: #fff0e2; color: #b85a0d; }
.tag-result { background: #e3f6ec; color: #0f7a42; }
.tag-admit-card { background: #ede7fb; color: #5b3fb0; }
.tag-answer-key { background: #fdf1e0; color: #b5760a; }

/* Sections */
.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 20px;
}
.section h2 { font-size: 1.7rem; margin-bottom: 24px; text-align: center; }

/* Closing soon */
.closing-soon-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.closing-soon-item {
    flex: 0 0 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--saffron);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.closing-soon-item:hover { border-color: var(--saffron); box-shadow: 0 6px 16px rgba(15, 37, 87, 0.1); }
.closing-soon-item .days-left {
    align-self: flex-start;
    background: #eef1fa;
    color: var(--navy);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 20px;
}
.closing-soon-item .days-left.urgent { background: #fdeaea; color: #c0392b; }
:root[data-theme="dark"] .closing-soon-item .days-left { background: rgba(118, 153, 234, 0.15); }
:root[data-theme="dark"] .closing-soon-item .days-left.urgent { background: rgba(224, 90, 90, 0.18); color: #ff8b8b; }
.closing-soon-item .csi-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.closing-soon-item .csi-org { color: var(--text-muted); font-size: 0.82rem; }

/* Category grid — a seal-style badge instead of a generic icon-over-label
   card, so it reads more like a stamped credential than a UI tile. */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.category-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    text-align: left;
    font-weight: 600;
    transition: transform 0.15s, box-shadow 0.15s;
}
.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 37, 87, 0.1);
}
.category-card .icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    margin-bottom: 14px;
}

/* Results/Admit Card/Answer Key type tabs */
.type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.type-tabs a {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}
.type-tabs a:hover { border-color: var(--saffron); color: var(--saffron-dark); }
.type-tabs a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.type-tabs .count { opacity: 0.7; font-weight: 400; margin-left: 3px; font-family: var(--font-mono); }

.badge.type-badge-result { background: #e3f6ec; color: var(--green); }
.badge.type-badge-admit-card { background: #eaf1fd; color: #2255bb; }
.badge.type-badge-answer-key { background: #fdf1e0; color: #b5760a; }
:root[data-theme="dark"] .badge.type-badge-result { background: rgba(53, 196, 127, 0.15); }
:root[data-theme="dark"] .badge.type-badge-admit-card { background: rgba(85, 140, 240, 0.18); color: #a9c3fb; }
:root[data-theme="dark"] .badge.type-badge-answer-key { background: rgba(220, 172, 82, 0.18); color: var(--gold); }

/* Filters */
.filters {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.filters input[type="text"],
.filters select {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: var(--card);
    color: var(--text);
}
.filters input[type="text"] { flex: 2; min-width: 200px; }
.filters select { flex: 1; min-width: 150px; }
.filters button {
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 22px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
}
.filters button:hover { background: var(--saffron); }

/* Active filter chips */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -14px 0 20px;
    font-size: 0.85rem;
}
.result-count { color: var(--text-muted); font-weight: 600; margin-right: 4px; font-family: var(--font-mono); }
.filter-chip {
    background: #eef1fa;
    color: var(--navy);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
}
.filter-chip:hover { background: #fdeaea; color: #c0392b; }
:root[data-theme="dark"] .filter-chip { background: rgba(118, 153, 234, 0.15); }
:root[data-theme="dark"] .filter-chip:hover { background: rgba(224, 90, 90, 0.18); color: #ff8b8b; }
.clear-filters { color: var(--text-muted); text-decoration: underline; margin-left: 4px; }
.clear-filters:hover { color: var(--saffron); }

/* Job list */
.job-list { display: flex; flex-direction: column; gap: 14px; }
.job-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
/* Category color coding — a quiet left-rail cue so cards are scannable by
   category at a glance without adding another text badge to read. */
.job-card.cat-banking { border-left-color: var(--gold); }
.job-card.cat-ssc { border-left-color: var(--saffron); }
.job-card.cat-railways { border-left-color: #1a8f8f; }
.job-card.cat-defence { border-left-color: #a8342a; }
.job-card.cat-police { border-left-color: #2255bb; }
.job-card.cat-psu { border-left-color: #7a4fc4; }
.job-card.cat-state { border-left-color: var(--green); }
.job-card h3 { margin: 0 0 6px; font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; }
.job-card .meta { color: var(--text-muted); font-size: 0.9rem; }
.job-card .badge {
    display: inline-block;
    background: #eef1fa;
    color: var(--navy);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 8px;
    margin-right: 8px;
}
:root[data-theme="dark"] .job-card .badge { background: rgba(118, 153, 234, 0.15); }
.job-card .badge.badge-deadline { background: #fff4e8; color: var(--saffron-dark); font-family: var(--font-mono); }
.job-card .badge.badge-deadline.urgent { background: #fdeaea; color: #c0392b; }
:root[data-theme="dark"] .job-card .badge.badge-deadline { background: rgba(255, 154, 77, 0.15); }
:root[data-theme="dark"] .job-card .badge.badge-deadline.urgent { background: rgba(224, 90, 90, 0.18); color: #ff8b8b; }
.job-card .badge.badge-expired { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); font-family: var(--font-mono); text-decoration: line-through; }
.job-card .badge.badge-qualification { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.key-facts .badge.badge-expired {
    display: inline-block;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-mono);
    text-decoration: line-through;
    margin-left: 4px;
}
.job-card .posted { color: var(--text-muted); font-size: 0.83rem; font-family: var(--font-mono); white-space: nowrap; }
.empty-state { text-align: center; color: var(--text-muted); padding: 60px 20px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 28px; font-family: var(--font-mono); font-size: 0.9rem; }
.pagination a, .pagination span {
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--card);
}
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Job detail */
.job-detail {
    max-width: 780px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}
.job-detail h1 { margin-top: 0; }
.job-detail .meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.job-detail .meta-row span {
    background: #eef1fa;
    color: var(--navy);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}
:root[data-theme="dark"] .job-detail .meta-row span { background: rgba(118, 153, 234, 0.15); }
.job-detail .apply-btn {
    display: inline-block;
    margin-top: 24px;
    margin-right: 12px;
    background: var(--green);
    color: #fff;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-weight: 600;
}
.job-detail .apply-btn:hover { background: #0c6135; color: #fff; }
.job-detail .pdf-btn {
    display: inline-block;
    margin-top: 24px;
    background: var(--card);
    color: var(--navy);
    border: 2px solid var(--navy);
    padding: 10px 26px;
    border-radius: var(--radius);
    font-weight: 600;
}
.job-detail .pdf-btn:hover { background: var(--navy); color: #fff; }
.job-detail .source-note { color: var(--text-muted); font-size: 0.85rem; margin-top: 10px; }

/* Key facts grid on job detail page */
.key-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    background: var(--bg);
    border-radius: var(--radius);
}
.key-facts dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.key-facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--navy);
    font-size: 0.95rem;
}

/* Detail sections (eligibility, fee, selection process, how to apply) */
.detail-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.detail-section h2 { font-size: 1.1rem; margin: 0 0 10px; color: var(--navy); text-align: left; }
.detail-section p { margin: 0; line-height: 1.7; }

/* Static pages */
.policy-page { max-width: 720px; margin: 0 auto; padding: 56px 20px; }
.breadcrumb-nav { max-width: 1100px; margin: 20px auto 0; padding: 0 20px; color: var(--text-muted); font-size: 0.88rem; font-family: var(--font-mono); }

/* Footer */
.site-footer {
    background: var(--brand-navy-dark);
    color: #93a2c9;
    margin-top: 40px;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px;
    text-align: center;
    font-size: 0.9rem;
}
.footer-inner a { color: #cdd6f0; }

.ymyl-disclaimer {
    text-align: left;
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 16px 18px;
    background: rgba(232, 114, 15, 0.08);
    border: 1px solid rgba(232, 114, 15, 0.35);
    border-radius: var(--radius);
    color: #c7d2ee;
    font-size: 0.8rem;
    line-height: 1.65;
}
.ymyl-disclaimer strong { color: #fff; }
.ymyl-disclaimer a { text-decoration: underline; }

/* Blog */
.blog-content h2 { font-size: 1.45rem; margin: 32px 0 12px; text-align: left; }
.blog-content h3 { font-size: 1.15rem; margin: 24px 0 10px; }
.blog-content p { margin: 0 0 16px; }
.blog-content ul, .blog-content ol { margin: 0 0 16px; padding-left: 24px; }
.blog-content li { margin-bottom: 8px; }
.blog-content strong { color: var(--navy); }
.blog-content a { text-decoration: underline; }
.blog-figure {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin: 24px 0;
}
.blog-figure svg { max-width: 100%; height: auto; display: block; }
.blog-figure figcaption { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 10px; }

@media (max-width: 640px) {
    .nav-toggle { display: flex; }
    /* Explicit order for all three groups: logo and controls must both wrap
       before main-nav, or expanding the nav (which goes width:100%) pushes
       logo/controls out of the top row instead of leaving them anchored
       there with the expanded nav dropping below as its own line. */
    .logo { order: 1; }
    .header-controls { order: 2; }
    .main-nav {
        order: 3;
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 14px;
    }
    .main-nav.is-open { display: flex; }
    .main-nav a {
        margin: 0;
        padding: 10px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-copy { text-align: center; }
    .hero-title { flex-direction: column; justify-content: center; }
    .hero-search { margin-left: auto; margin-right: auto; }
    .hero-stats { justify-content: center; }
    .board { display: none; }
    .hero h1 { font-size: 1.9rem; }
    .hero-actions a { display: block; margin: 8px auto; max-width: 260px; }
}

@media (max-width: 900px) and (min-width: 641px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-copy { text-align: center; }
    .hero-title { justify-content: center; }
    .hero-search { margin-left: auto; margin-right: auto; }
    .hero-stats { justify-content: center; }
    .board { display: none; }
}

/* Auth: signup / login */
.auth-section { display: flex; justify-content: center; padding-top: 48px; padding-bottom: 64px; }
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}
.auth-card h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 4px; }
.auth-subtitle { color: var(--text-muted); margin: 0 0 20px; font-size: 0.92rem; }
.auth-error { background: #fde8e8; color: #a11; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; }
:root[data-theme="dark"] .auth-error { background: rgba(224, 90, 90, 0.18); color: #ff8b8b; }
.auth-form label { display: block; font-weight: 600; font-size: 0.88rem; margin: 14px 0 6px; }
.auth-form label:first-of-type { margin-top: 0; }
.auth-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}
.auth-submit { width: 100%; margin-top: 22px; padding: 12px; border-radius: var(--radius); border: none; cursor: pointer; font-weight: 600; }
.auth-switch { text-align: center; margin: 20px 0 0; font-size: 0.9rem; color: var(--text-muted); }

/* Bookmarks */
.nav-signup { color: var(--saffron) !important; font-weight: 600; }
.job-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.job-title-row h1 { margin: 0; flex: 1; min-width: 200px; }
.bookmark-btn {
    display: inline-block;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
}
.bookmark-btn.is-saved { background: #fff4e8; color: var(--saffron-dark); border-color: var(--saffron); }
:root[data-theme="dark"] .bookmark-btn.is-saved { background: rgba(255, 154, 77, 0.15); color: var(--saffron); }
.bookmark-btn-icon {
    display: inline-block;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    padding: 0;
}
.bookmark-btn-icon.is-saved { color: var(--saffron); }