/* skills-roundup.css — the Claude skills roundup post only.
   Loaded AFTER post.css (front matter lists both), so post.css keeps its
   brightened --ink-dim for long-form reading and this file only adds.
   Every colour here comes from a theme.css variable, so it holds in both modes. */

/* Third aurora blob (front matter sets `aurora: 3`; post.css places b1 and b2).
   b1 and b3 are swapped relative to every other post: the bright --aurora-4 blob
   used to sit at left:22vw/bottom, directly behind the article column, which put
   the page's most saturated colour under the body text. It's up in the top-left
   corner now and b1 has taken the low centre slot.
   The b1 override belongs here rather than in post.css — that file is shared by
   every post, so moving it there would drag the karate post's blob along too. */
.aurora .b3 {
    width: 34vw; height: 34vw; left: -10vw; top: -12vw;
    background: var(--aurora-4);
    animation: drift3 34s ease-in-out infinite;
}
/* `top: auto` is load-bearing: post.css sets top:-12vw on b1, and with a fixed
   height a surviving `top` wins over `bottom` and the blob would never move. */
.aurora .b1 {
    left: 22vw; top: auto; bottom: -16vw;
}
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,-5vw) scale(1.08); } }

/* The reduced-motion smooth-scroll override that used to live here is gone:
   smooth scrolling is now opt-in via :root.smooth-scroll, and js/theme.js
   simply never adds that class under reduced motion. */

/* --- Page width & bento -------------------------------------------------
   post.css sizes .container as a single 820px reading column, which is right
   for an essay and wrong for a comparison piece. This post opens out to a wide
   bento: intro beside its overlap map, cards in a real grid, the three drafts
   side by side rather than stacked. Prose blocks keep their own max-width, so
   widening the page never lengthens a line of text. */
.container { max-width: 1240px; }
header.post-head { max-width: 900px; }
.section { padding: 22px 24px; }

/* Lead.
   Full width, deliberately, and there is a cost: .container is 1240px on this
   post — widened from post.css's 820px reading column so the category bentos
   fit — so the lead runs at roughly 135 characters a line, about double a
   comfortable measure.

   Two earlier attempts are both wrong, don't repeat either. Capping the
   PARAGRAPHS (`.lead-section p { max-width: 78ch }`) leaves a third of a
   gradient-bordered panel visibly empty. Capping the BOX makes a two-thirds
   panel floating in a full-width column. The only fix that keeps the panel
   full-width AND the measure readable is columns:
       .lead-section { column-count: 2; column-gap: 48px; }
   which lands each column near 65ch. Left off because it changes the reading
   flow to down-then-across. */
.lead-row { display: grid; gap: 18px; }
/* Each category is a 12-column bento */
.cat {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    scroll-margin-top: 76px;
}
/* The left column is three separate cards, not one tall one — it matches the
   bento rhythm, and the extra card padding is most of what closes the height
   difference against the (much taller) overlap map beside it. */
.cat-side {
    grid-column: span 5;
    display: flex;
    flex-direction: column;
    gap: 18px;   /* uniform — space-between here produced lopsided gaps */
}
/* The map is the shorter card now, so it absorbs the row's slack. Centring the
   figure inside it keeps that slack symmetric instead of pooling it under the
   diagram, which is what read as "a big empty gap" before. */
.cat-map { grid-column: span 7; display: flex; flex-direction: column; }
.cat-map .omap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}
.cat-grid,
.cat-switch,
.rec-section { grid-column: 1 / -1; }

/* The recommendation and the closing note are single full-width blocks — no
   max-width cap, so the text runs the whole box instead of leaving a dead strip
   down the right. They sit one step above the surrounding prose: a long measure
   reads more comfortably at a larger size, and these are the verdicts anyway. */
.section .rec-section p,
.section .close-out p { font-size: var(--fs-lead); }

/* Closing bento: the three skills nothing cuts, side by side */
.close { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.close-head, .close-out { grid-column: 1 / -1; }
.survivor { display: flex; flex-direction: column; gap: 8px; }
.survivor h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--fs-title); font-weight: 600;
    color: var(--ink);
}
.section .survivor p { font-size: var(--fs-sm); }

/* post.css styles `.section ul` / `.section li` as prose lists — column flow and
   a gradient bullet. These four lists are components, not prose, so opt them out.
   This block MUST stay above the components below: it declares padding-left at
   the same specificity they do, so if it came after, it would silently clobber
   their `padding` shorthand and jam their contents against the left edge. */
.section .omap-legend ul,
.section .stack,
.section .drafts,
.section .dec-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.section .omap-legend li,
.section .stack li,
.section .drafts li,
.section .dec-list li { padding-left: 0; }
.section .omap-legend li::before { content: none; }

/* --- Inline code (this post is full of slash commands and filenames) --- */
.section code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.85em;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink);
}

/* --- Sticky section nav --- */
.secnav { position: sticky; top: 10px; z-index: 40; }
.secnav ul {
    display: flex; gap: 6px; padding: 6px;
    /* Centred pill. The max-width keeps 58px clear on each side, which is what
       stops it sliding under the fixed theme toggle in the top-right corner. */
    width: fit-content;
    max-width: calc(100% - 116px);
    margin: 0 auto;
    list-style: none;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow-x: auto;
    scrollbar-width: none;
}
.secnav ul::-webkit-scrollbar { display: none; }
.secnav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-size: var(--fs-ui); font-weight: 600;
    color: var(--ink-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.secnav a:hover { color: var(--ink); border-color: var(--border); }
.secnav a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.secnav-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-meta); color: var(--ink-dimmer); }
.secnav a.is-here {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--border-hi);
}
.secnav a.is-here .secnav-num { color: var(--accent-3); }

/* --- Category chapter header -------------------------------------------
   Every card on this page is the same glass panel, so without this the four
   categories read as one undifferentiated wall. Each category opens with a rule
   across the full width, a big gradient number, and its title — and the space
   between categories (~84px) is deliberately much larger than the gap between
   cards inside one (18px), so the grouping is legible at a glance. */
.cat, .close {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}
.cat-head {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 2px;
}
.cat-num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 700; line-height: 1;
    color: var(--ink-dimmer);
}
.cat-head h2 {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.45rem, 3vw, 1.95rem);
    font-weight: 600; letter-spacing: -0.01em; line-height: 1.15;
    color: var(--ink);
}
.cat-head h2 ion-icon { color: var(--accent-2); font-size: 1.35rem; }
.cat-rule {
    flex: 1 1 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--border-hi), transparent);
}

/* The category's opening line carries the same weight as the post's lead */
.section .cat-intro p:first-child { font-size: var(--fs-lead); color: var(--ink); }

.dec-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-dimmer);
    margin-bottom: 14px;
}
.dec-title ion-icon { color: var(--accent-1); font-size: 1rem; }
.section .dec-list { flex-direction: column; gap: 10px; }
.section .dec-list li {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 13px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.section .dec-list li::before { content: none; }
.dec-n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    /* body sets line-height 1.7 — inherited, the digit's line box is taller
       than the chip's content area and can't centre in it */
    line-height: 1;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-hi);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-meta);
    color: var(--ink);
}
/* the chip is 24px, the first text line is ~21px — nudge it onto that line */
.dec-body {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm); line-height: 1.5;
    color: var(--ink-dim);
}
.dec-body strong { display: block; color: var(--ink); }

.section h3.sub {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--fs-title); font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}
.section h3.sub ion-icon { color: var(--accent-1); font-size: 1.1rem; }
.section .sub-note {
    font-size: var(--fs-ui);
    color: var(--ink-dimmer);
    margin-bottom: 4px;
}

/* --- Overlap map ---------------------------------------------------------
   The SVG is decorative-but-informative: role="img" with <title>/<desc>, and
   the legend below repeats every cluster's note as real, wrapping HTML text —
   so the argument survives even when the diagram is scrolled off or unread. */
.omap { margin: 16px 0 0; }
.omap-scroll { overflow-x: auto; padding-bottom: 8px; }
.omap-scroll::-webkit-scrollbar { height: 8px; }
.omap-scroll::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 999px; }
.omap-svg { display: block; width: 100%; min-width: 620px; height: auto; }

.omap-box { fill: none; stroke-width: 1.5; stroke-dasharray: 7 6; }
.omap-boxlabel {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.omap-link { stroke-width: 1.5; stroke-dasharray: 4 4; }

.t-dedup .omap-box, .t-dedup .omap-link { stroke: var(--accent-1); }
.t-dedup .omap-boxlabel { fill: var(--accent-1); }
.t-split .omap-box, .t-split .omap-link { stroke: var(--accent-3); }
.t-split .omap-boxlabel { fill: var(--accent-3); }
.t-solo .omap-box { stroke: var(--ink-dimmer); }
.t-solo .omap-boxlabel { fill: var(--ink-dimmer); }

.omap-node { fill: var(--surface-2); stroke: var(--border-hi); stroke-width: 1; }
.omap-node.is-ghost { stroke-dasharray: 4 4; opacity: 0.8; }
.omap-nodetext {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px; font-weight: 500;
    fill: var(--ink);
    text-anchor: middle;
}
.omap-nodetext.is-sub { font-size: 11px; fill: var(--ink-dim); }

/* Legend across the width rather than stacked — three short columns under a
   wide diagram, matching its two-row shape. (.omap's flex gap spaces it.) */
.section .omap-legend ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 18px;
}
.section .omap-legend li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: var(--fs-sm); line-height: 1.55;
    color: var(--ink-dim);
}
.omap-key {
    flex: 0 0 auto;
    width: 13px; height: 13px; margin-top: 5px;
    border-radius: 4px;
    border: 1.5px dashed var(--ink-dimmer);
}
.omap-legend li.t-dedup .omap-key { border-color: var(--accent-1); }
.omap-legend li.t-split .omap-key { border-color: var(--accent-3); }
.omap-legend strong { color: var(--ink); }

/* --- Contender grid --- */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.skill-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: filter 0.35s ease, transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease;
}
.skill-card:hover { transform: translateY(-3px); }
.skill-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.skill-head h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--fs-title); font-weight: 600; line-height: 1.3;
    color: var(--ink);
}
.section .skill-one { font-size: var(--fs-sm); line-height: 1.55; }
.skill-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }

/* Line the titles up across each row. The names are wildly uneven — "memU" next
   to "academic-research-skills (ARS)" — so with each card laying itself out
   alone, a title that wrapped to two lines pushed its one-liner down while the
   card beside it started higher. Subgrid gives every card in a row the same
   three tracks (title / one-liner / footer), so the titles sit on one line and
   the descriptions start together.
   The footer keeps its `margin-top: auto` from the flex rules above — an auto
   margin absorbs the slack in a grid track too, so the repo link stays pinned
   to the bottom, exactly as it was. */
@supports (grid-template-rows: subgrid) {
    .skill-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 10px;   /* the card's own rhythm, not the grid's 14px */
    }
}
.skill-repo {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-meta);
    color: var(--accent-2);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.skill-repo:hover { text-decoration: underline; }
.skill-repo:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
.skill-repo ion-icon { flex: 0 0 auto; font-size: 0.95rem; }
.skill-out { font-size: var(--fs-meta); opacity: 0.65; }

/* State pill — the keep/cut verdict as text, so state is never colour-only */
.state-pill {
    flex: 0 0 auto;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-dimmer);
    white-space: nowrap;
}
.skill-card.is-keep .state-pill { color: var(--accent-3); border-color: var(--accent-3); }
.skill-card.is-maybe .state-pill { color: var(--accent-2); border-color: var(--accent-2); }

/* Kept — hold the .lift-card gradient border on */
.skill-card.is-keep { border-color: transparent; }
.skill-card.is-keep::before { opacity: 0.85; }

/* Conditional — kept, but only under a stated condition */
.skill-card.is-maybe { border-style: dashed; border-color: var(--border-hi); }
.skill-card.is-maybe::before { opacity: 0.3; }

/* Cut — dimmed and desaturated, but restored on hover/focus so a cut card is
   never unreadable and its repo link stays reachable.
   The dim rides inside filter() rather than the opacity property on purpose:
   .lift-card animates opacity to 1 with `forwards`, and an animation's fill
   beats a normal declaration in the cascade — so `opacity: 0.5` here would
   simply never apply. */
.skill-card.is-cut { filter: grayscale(1) opacity(0.5); }
.skill-card.is-cut:hover,
.skill-card.is-cut:focus-within { filter: none; }
.skill-card.is-cut::before,
.skill-card.is-cut:hover::before { opacity: 0; }

/* --- Draft switcher --- */
.switcher { margin-top: 4px; }

/* The control sits beside the stack it rebuilds, so you see the effect without
   scrolling. Flex, not a 2-col grid: with JS off .seg is [hidden] and the panel
   simply takes the whole row. */
.switch-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }

/* A fixed 280px basis rather than `auto`, which would size the control to its
   longest draft name — that made every category's control a different width, and
   on a narrow card the name needed more room than the card had. With no shrink
   allowed it could not give any back, so the control pushed out through the side
   of the section. A basis it may shrink from keeps it inside; long names wrap
   inside the button instead. */
.seg {
    display: flex; flex-direction: column; gap: 6px;
    flex: 0 1 280px;
    min-width: 0;
    align-self: flex-start;
    padding: 6px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.seg[hidden] { display: none; }   /* .seg's display:flex would otherwise beat [hidden] */
.seg-btn {
    position: relative;
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    text-align: left;
    min-width: 0;   /* a flex item defaults to min-content — it would not wrap */
    padding: 10px 14px;
    border-radius: 11px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-dim);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.seg-btn:hover { color: var(--ink); border-color: var(--border); }
.seg-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.seg-key {
    flex: 0 0 auto;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-meta);
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
/* The name is the only part that may take the slack, so the key pill and the
   star keep their size and it wraps to a second line when the control is narrow. */
.seg-name { min-width: 0; overflow-wrap: break-word; }
.seg-star { flex: 0 0 auto; color: var(--accent-3); font-size: var(--fs-ui); }
.seg-btn.is-on { color: var(--ink); background: var(--surface); border-color: transparent; }
.seg-btn.is-on .seg-key { color: var(--accent-3); border-color: var(--border-hi); }
.seg-btn.is-on::before {   /* the .lift-card gradient border, on the active tab */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    mask-composite: exclude;
    pointer-events: none;
}

/* Synergy stack */
.panel {
    flex: 1 1 340px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.panel:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.panel-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-meta); letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-dimmer);
}
.panel-head ion-icon { color: var(--accent-2); font-size: 1rem; }
.panel-head strong {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--fs-sm); letter-spacing: 0; text-transform: none;
}
.section .stack { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.section .stack li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-hi);
}
.section .stack li::before {   /* re-point post.css's gradient bullet into a chip dot */
    position: static;
    width: 7px; height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.chip-name { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: var(--fs-meta); color: var(--ink); }
.chip-role { font-size: var(--fs-meta); color: var(--ink-dimmer); }
.stack-note { margin-top: 14px; font-size: var(--fs-sm); font-style: italic; }

/* The three drafts — always rendered, always readable, JS or no JS.
   Side by side, because comparing them is the whole point (and stacking three
   of these per category was most of the page's height). */
.section .drafts {
    display: grid;
    /* min() and not a bare 280px: a track never shrinks below its minimum, so on
       a phone narrower than the track the boxes would run out through the side of
       the card. Below 280px of room the track simply becomes the full width. */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 14px;
    margin-top: 18px;
}
.section .drafts li {
    position: relative;
    padding: 16px 18px 16px 22px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.section .drafts li::before { content: none; }
.section .drafts li.is-active { border-color: var(--border-hi); background: var(--surface); }
.section .drafts li.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--grad);
}
.draft h4 {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--fs-title); font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}
.draft-key {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-dimmer);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
}
.draft.is-active .draft-key { color: var(--ink); border-color: var(--border-hi); }
.draft-rec {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent-3);
    border: 1px solid var(--accent-3);
    border-radius: 999px;
    padding: 2px 9px;
}
.section .draft p { font-size: var(--fs-md); }
.section .draft-cut {
    margin-top: 12px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--fs-meta);
    color: var(--ink-dimmer);
}
.draft-cut strong { color: var(--accent-1); }

/* Recommendation — echoes the lead-section's gradient rule */
.rec-section { border-left: 2px solid transparent; border-image: var(--grad) 1; }

/* --- Light mode --- */
:root[data-theme="light"] .cat-head h2 { color: var(--accent-1); }
:root[data-theme="light"] .section h3.sub { color: var(--accent-1); }
:root[data-theme="light"] .skill-head h3 { color: var(--ink); }
:root[data-theme="light"] .draft h4 { color: var(--ink); }

/* --- Responsive --- */
@media (max-width: 1180px) {
    /* The map needs the full width before its SVG starts scrolling */
    .cat-side, .cat-map { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .close { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    /* Four links no longer fit in a centred pill that has to keep clear of the
       theme toggle, so below this width the nav stops dodging the toggle
       sideways and drops beneath it instead. That buys the full page width,
       which it spends on four equal columns — every section stays visible and
       nothing scrolls sideways. */
    .secnav { top: 72px; }              /* toggle bottom is at most 66px */
    .secnav ul {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: auto;
        max-width: none;
        gap: 4px;
        padding: 4px;
        border-radius: 14px;
    }
    /* The nav opts out of the type scale from here down: it is sized to fit four
       links across the narrowest phone, and growing with the scale would put it
       straight back into the sideways scroll this block exists to prevent. */
    .secnav a {
        justify-content: center;
        gap: 6px;
        padding: 8px 6px;
        border-radius: 10px;
        font-size: 0.8rem;
    }
    .secnav-num { font-size: 0.72rem; }
    .cat { scroll-margin-top: 130px; }  /* clears the nav in its lower position */
}

@media (max-width: 620px) {
    .skill-grid { grid-template-columns: 1fr; }
    .close { grid-template-columns: 1fr; }
    .skill-head { flex-direction: column; gap: 8px; }
    .seg { flex: 1 1 100%; align-self: stretch; }   /* the control takes the row */
}

@media (max-width: 480px) {
    /* Phone: the number goes above the label rather than beside it, so a column
       only has to be as wide as "Research" instead of "01 Research". */
    .secnav a {
        flex-direction: column;
        gap: 2px;
        padding: 7px 4px;
        line-height: 1.25;
        font-size: clamp(0.68rem, 3vw, 0.8rem);
    }
    .secnav-num { font-size: 0.66rem; }
    .cat { scroll-margin-top: 124px; }
}