/* 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) */
.aurora .b3 {
    width: 34vw; height: 34vw; left: 22vw; bottom: -16vw;
    background: #34d399;
    animation: drift3 34s ease-in-out infinite;
}
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,-5vw) scale(1.08); } }

/* theme.css turns off animation under reduced motion but not smooth scrolling */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- 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: prose + a stat strip */
.lead-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 18px; }
.lead-section p { max-width: 78ch; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat-n {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 600; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-l {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-dimmer);
}

/* 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: 'Space Grotesk', sans-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: 'JetBrains Mono', 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(--cyan); outline-offset: 2px; }
.secnav-num { font-family: 'JetBrains Mono', 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 {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- 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: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 700; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cat-head h2 {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Space Grotesk', sans-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(--cyan); 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); }

/* The left column carries the two things a reader wants while looking at the
   map: the size of the field, and the decisions this category will force. */
.cat-facts {
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
}
.fact { display: flex; flex-direction: column; gap: 3px; }
.fact-n {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem; font-weight: 600; line-height: 1;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fact-l {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-dimmer);
}
.dec-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', 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(--violet); 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: 'JetBrains Mono', 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: 'Space Grotesk', sans-serif;
    font-size: var(--fs-title); font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}
.section h3.sub ion-icon { color: var(--violet); 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: 'JetBrains Mono', 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(--violet); }
.t-dedup .omap-boxlabel { fill: var(--violet); }
.t-split .omap-box, .t-split .omap-link { stroke: var(--mint); }
.t-split .omap-boxlabel { fill: var(--mint); }
.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: 'JetBrains Mono', 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(--violet); }
.omap-legend li.t-split .omap-key { border-color: var(--mint); }
.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: 'Space Grotesk', sans-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: 'JetBrains Mono', monospace; font-size: var(--fs-meta);
    color: var(--cyan);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.skill-repo:hover { text-decoration: underline; }
.skill-repo:focus-visible { outline: 2px solid var(--cyan); 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: 'JetBrains Mono', 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(--mint); border-color: var(--mint); }
.skill-card.is-maybe .state-pill { color: var(--cyan); border-color: var(--cyan); }

/* 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: 'Inter', 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(--cyan); outline-offset: 2px; }
.seg-key {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', 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(--mint); font-size: var(--fs-ui); }
.seg-btn.is-on { color: var(--ink); background: var(--surface); border-color: transparent; }
.seg-btn.is-on .seg-key {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    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(--cyan); outline-offset: 2px; }
.panel-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta); letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-dimmer);
}
.panel-head ion-icon { color: var(--cyan); font-size: 1rem; }
.panel-head strong {
    font-family: 'Inter', 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: 'JetBrains Mono', 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: 'Space Grotesk', sans-serif;
    font-size: var(--fs-title); font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}
.draft-key {
    font-family: 'JetBrains Mono', 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: 'JetBrains Mono', monospace;
    font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--mint);
    border: 1px solid var(--mint);
    border-radius: 999px;
    padding: 2px 9px;
}
.section .draft p { font-size: var(--fs-md); }
.section .draft-cut {
    margin-top: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-meta);
    color: var(--ink-dimmer);
}
.draft-cut strong { color: var(--violet); }

/* 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(--violet); }
:root[data-theme="light"] .section h3.sub { color: var(--violet); }
: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) {
    .lead-row { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(4, 1fr); }
    .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; }
    .stats { grid-template-columns: 1fr 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; }
}

/* ==========================================================================
   TEST — justified body text. Delete this whole block to go back to
   ragged-right. `hyphens` is on because justifying without it opens rivers of
   white space, badly so in the narrow columns (skill cards, draft columns).
   ========================================================================== */
article p,
article li,
.dec-body,
.omap-legend li > span:last-child {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* Leave the short mono/label bits alone — justifying a one-line label just
   stretches it edge to edge. */
.meta, .end-note, .sub-note, .stack-note, .draft-cut,
.chip, .state-pill, .fact-l, .dec-title {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
}