/* bozcode.com home page, since 2026-10-31 the v2 design from Gordon's
   mockup "Homepage improved.png" (built as /prototypes/home-v2/). Over the
   previous design (now home-v1.css / home_v1.html, the rollback) it adds the
   header's section links, the hero's terminal window and stat cards, the
   Apps section, the restyled news cards and the footer logo, and drops the
   hero photo, the feature stack and the Apps popover (the Apps section
   replaces it). Standalone page (no main.css), so the basics are set here.
   Every text color is >= 4.5:1 on its surface (large text >= 3:1). */

:root {
    color-scheme: light;
    --bg:      #eef3fa;   /* page */
    --bg-2:    #f7f9fd;   /* Examples band */
    --panel:   #ffffff;
    --panel-2: #f1f5fc;   /* hover */
    --line:    #d5deeb;   /* decorative dividers */
    --line-2:  #b9c6da;
    --text:    #0f1b33;   /* 16:1+ on every surface */
    --text-2:  #3b4a63;   /* 7.8:1+ */
    --text-3:  #556379;   /* 5.4:1+, small meta text */
    --link:    #1d4ed8;   /* 6.0:1+ */
    --blue:    #2563eb;
    --cyan:    #0e7490;
    --violet:  #6d28d9;
    --grad:     linear-gradient(90deg, #0e7490 0%, #1d4ed8 34%, #6d28d9 68%, #a21caf 100%);   /* each stop 4.5:1+ on white */
    --shadow:   0 1px 2px rgb(15 27 51 / .06), 0 6px 18px rgb(15 27 51 / .07);
    --wrap: 1400px;   /* the mockup's content runs nearly edge to edge at 1536px */
    --gutter: clamp(16px, 4vw, 40px);
    --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    /* footer: a light blue-grey band, one step darker than the page (v4: Gordon wanted it lighter too) */
    --foot-bg:   #dfe7f2;
    --foot-text: #3b4a63;   /* 7.2:1 */
    --foot-dim:  #4f5d73;   /* 5.4:1, small mono text */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 104px; }   /* clear the sticky header on anchor jumps */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
svg { display: block; }
h1, h2, h3, p { margin: 0; }
a { color: var(--link); }
:where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.nh-skip {
    position: absolute; left: 12px; top: -64px; z-index: 100;
    padding: 10px 16px; border-radius: 8px;
    background: #fbe89b; color: #3d2e00; font-weight: 700; text-decoration: none;
}
.nh-skip:focus { top: 12px; }
.nh-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ── Header ── */
.nh-header {
    position: sticky; top: 0; z-index: 50;
    padding: 10px clamp(12px, 3vw, 32px);
    background: linear-gradient(rgb(238 243 250 / .96), rgb(238 243 250 / .84));
    backdrop-filter: blur(10px);
}
.nh-header-inner {   /* darker blue (Gordon, 2026-10-31; was steel #46779f→#3b6a95): white text 8.5:1+, and the glossy #2271b1 Projects button still stands out */
    max-width: 1180px; margin-inline: auto;
    display: grid; align-items: center; gap: 8px 14px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo site acct sign";
    padding: 9px 12px 9px 14px;
    border: 1px solid #183a5e; border-radius: 16px;
    background: linear-gradient(#2a5583, #1f4670);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 6px 18px rgb(24 58 94 / .32);
}
.nh-header :where(a, button):focus-visible { outline-color: #fff; }   /* the page's blue outline vanishes on the blue bar */
.nh-logo { grid-area: logo; display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
/* Section links (Examples / Apps / News / GitHub), centred in the bar. White on the bar 8.5:1+. */
.nh-sitenav { grid-area: site; justify-self: center; }
.nh-sitenav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nh-sitenav a {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 8px;
    color: #fff; font: 600 .95rem/1 var(--font); text-decoration: none; white-space: nowrap;
    transition: background-color .15s;
}
.nh-sitenav a:hover { background: rgb(255 255 255 / .12); text-decoration: underline; text-underline-offset: .3em; }
.nh-sitenav svg { width: 14px; height: 14px; opacity: .85; }
.nh-nav { grid-area: acct; }
.nh-signform, .nh-header-inner > .nh-signin { grid-area: sign; }
.nh-logo-mark {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    border: 2px solid rgb(255 255 255 / .75); border-radius: 11px;
    background: rgb(255 255 255 / .12);
    color: #fff; font: 700 1rem/1 var(--mono);
}
.nh-logo-text { font-size: 1.45rem; font-weight: 800; letter-spacing: .01em; line-height: 1; }
.nh-logo-text span { color: #d6e6fa; }   /* 3.8:1, large bold text */
.nh-logo-text .nh-logo-tld { color: #fff; }   /* ".com": Gordon wanted the full domain (2026-10-31) */

.nh-nav ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nh-nav a {   /* buttons (Gordon, 2026-10-31); Sign out stays the solid white one */
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border: 1px solid rgb(255 255 255 / .7); border-radius: 10px;   /* edge 3.2:1+ on the bar */
    background: rgb(15 27 51 / .22); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
    color: #fff; font: 600 .95rem/1 var(--font); text-decoration: none; white-space: nowrap;   /* 6.3:1+ */
    transition: background-color .2s, border-color .2s;
}
.nh-nav a:hover { border-color: #fff; background: rgb(15 27 51 / .38); }
/* Glossy buttons copied from the panel sidebar (admin.css), at Gordon's
   request 2026-10-31: Admin Panel = its orange Home button (li.home-cta),
   Projects = its blue Admin Panel button (li.panel-cta). Same body colour,
   sheen, border, inset shadows, hover and press as there.
   White label on the orange is only ~2.5:1; on the blue 5.1:1+. */
.nh-nav a.nh-nav-admin   { --gl-body: #f08a24; --gl-edge: #c96a12; --gl-sheen: .5;  --gl-rim: .6;  --gl-hover: 1.06; }
.nh-nav a.nh-nav-projects { --gl-body: #2271b1; --gl-edge: #174f7d; --gl-sheen: .45; --gl-rim: .55; --gl-hover: 1.08; }
.nh-nav a:is(.nh-nav-admin, .nh-nav-projects) {
    border-color: var(--gl-edge);
    background:
        linear-gradient(to bottom, rgb(255 255 255 / var(--gl-sheen)) 0%, rgb(255 255 255 / .1) 45%, rgb(255 255 255 / 0) 46%, rgb(255 255 255 / .05) 100%),
        var(--gl-body);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / var(--gl-rim)),
        inset 0 -2px 4px rgb(0 0 0 / .22),
        0 1px 2px rgb(0 0 0 / .3);
    font-weight: 700; text-shadow: 0 1px 1px rgb(0 0 0 / .4);
    transition: filter .15s, box-shadow .15s;
}
.nh-nav a:is(.nh-nav-admin, .nh-nav-projects):hover { filter: brightness(var(--gl-hover)); }
.nh-nav a:is(.nh-nav-admin, .nh-nav-projects):active {
    filter: brightness(.96);
    box-shadow: inset 0 2px 5px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .15);
}

.nh-signform { margin: 0; }
.nh-signin {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 0; border-radius: 10px; background: #fff;
    box-shadow: 0 2px 6px rgb(15 27 51 / .18);
    color: var(--text); cursor: pointer; white-space: nowrap;
    font: 600 .95rem/1 var(--font); text-decoration: none;
}
.nh-signin:hover { background: #e6eef8; }
.nh-signin svg { width: 18px; height: 18px; }
/* Metal buttons copied from the panel sidebar (admin.css), Gordon 2026-10-31:
   Sign out = the red Alerts button (li.nav-metal-red), Sign in = the green
   tmux button (li.nav-metal-green). Light top, dark midline reflection, light
   bottom. White label: red 5.7:1 mid-button; green 6.4:1 below the midline
   but ~4.3:1 on its upper half. */
.nh-signin.nh-signout     { --mt-grad: linear-gradient(to bottom, #d9636f 0%, #b83946 47%, #97232f 53%, #cc5460 100%); --mt-edge: #7a1822; }
.nh-signin.nh-signin-green { --mt-grad: linear-gradient(to bottom, #5fae6a 0%, #3d8a4c 47%, #2d6b39 53%, #4f9d5c 100%); --mt-edge: #245a30; }
.nh-signin:is(.nh-signout, .nh-signin-green) {
    border: 1px solid var(--mt-edge);
    background: var(--mt-grad);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 -2px 4px rgb(0 0 0 / .3), 0 1px 2px rgb(0 0 0 / .35);
    color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgb(0 0 0 / .55);
    transition: filter .15s, box-shadow .15s;
}
.nh-signin:is(.nh-signout, .nh-signin-green):hover { filter: brightness(1.06); }
.nh-signin:is(.nh-signout, .nh-signin-green):active {
    filter: brightness(.95);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .35);
}

/* ── Hero ──
   Desktop: copy | terminal window, then four stat cards across. */
/* Sunken, like the live home page's Programming Examples band (main.css
   .cards-section): inner shadows on the top and bottom edges and a dark hairline
   on each, so the band sits below the page. Navy at about two-thirds the
   live strength, since black at .6 turns grey and dirty on a light page. */
.nh-hero {
    border-block: 1px solid rgb(15 27 51 / .26);
    background: radial-gradient(50% 80% at 6% 0%, rgb(37 99 235 / .10), transparent 70%),
                radial-gradient(40% 70% at 100% 100%, rgb(109 40 217 / .07), transparent 70%),
                #e2e9f4;
    box-shadow: inset 0 10px 14px -4px rgb(15 27 51 / .40),
                inset 0 -10px 14px -4px rgb(15 27 51 / .32);
}
.nh-hero-inner {
    max-width: var(--wrap); margin-inline: auto;
    padding: clamp(36px, 4.6vw, 68px) var(--gutter) clamp(28px, 3.4vw, 44px);
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 44px) clamp(32px, 5vw, 80px); align-items: center;
}


.nh-eyebrow {
    margin-bottom: 18px; color: var(--text-2);
    font: 600 .82rem/1.4 var(--font); letter-spacing: .36em; text-transform: uppercase;
}
.nh-eyebrow .dot { margin: 0 .55em 0 .2em; color: var(--violet); letter-spacing: 0; }
@media (max-width: 400px) { .nh-eyebrow { letter-spacing: .2em; } }   /* the four words have no spaces: at .36em they run past 320px */
.nh-hero h1 {
    margin-bottom: 22px;
    font-size: clamp(2.6rem, 1.3rem + 3.9vw, 4.5rem); font-weight: 800; line-height: 1.03; letter-spacing: -.035em;
}
.nh-h1-a, .nh-h1-b { display: block; width: fit-content; }   /* Practical / Code. / Real Projects., as in the mockup */
.nh-h1-b { color: #1d4ed8; }   /* solid blue (v1 used a gradient); 6.1:1 */
.nh-lede {
    max-width: 34em; margin-bottom: 30px;
    color: var(--text-2); font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); line-height: 1.55;
}

.nh-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.nh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 52px; padding: 0 24px; border-radius: 12px; cursor: pointer;
    font: 600 1.05rem/1 var(--font); text-decoration: none;
    transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s;
}
.nh-btn svg { width: 22px; height: 22px; flex: none; }
.nh-btn-ghost { border: 1.5px solid #6f82a3; background: var(--panel); color: var(--text); }
.nh-btn-ghost:hover { border-color: #5b6f91; background: var(--panel-2); }
.nh-btn-steel {   /* steel blue, Gordon's pick for "View All Apps"; white label 4.5:1 on the lighter top */
    border: 1px solid #355f87; background: linear-gradient(#4a7aa8, #3e6f9c); color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 6px 16px rgb(53 95 135 / .28);
}
.nh-btn-steel:hover { background: linear-gradient(#41729f, #355f87); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 8px 22px rgb(53 95 135 / .36); }
@media (prefers-reduced-motion: no-preference) {
    .nh-btn:hover { transform: translateY(-1px); }
    .nh-btn:active { transform: translateY(1px); }
}



.nh-handmade { margin-top: 20px; color: var(--text-3); font: .85rem/1.4 var(--mono); }   /* 5.4:1 */
.nh-handmade span { white-space: nowrap; }   /* break between the phrases, never at "self-|hosted" */

/* The terminal window: the site map as a shell session. Navy body, the bar in
   the navigator's blue. Text on #0f2036: white 16:1, links #9cc9ff 9.6:1,
   the yellow 0 11:1. */
.nh-term {
    overflow: hidden; border: 1px solid #1b3657; border-radius: 16px;
    background: #0f2036; color: #e6edf7;
    box-shadow: 0 2px 6px rgb(15 27 51 / .12), 0 26px 60px rgb(15 27 51 / .30);
    font: 500 clamp(.84rem, .8rem + .2vw, .95rem)/1.65 var(--mono);
}
.nh-term-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    border-bottom: 1px solid #183a5e; background: linear-gradient(#2a5583, #1f4670);
    color: #e6eef8; font-size: .82rem;
}
.nh-term-mark {
    display: grid; place-items: center; width: 24px; height: 24px; flex: none;
    border: 1.5px solid rgb(255 255 255 / .7); border-radius: 6px; font: 700 .68rem/1 var(--mono);
}
.nh-term-shell { margin-left: auto; }
.nh-term-body { padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px); }
.nh-term-cmd { color: #fff; }
.nh-term-ps { margin-right: .5em; color: #8fc1ff; }
.nh-term-out { display: flex; flex-wrap: wrap; gap: 0 1.15em; margin: 0 0 14px; padding: 0; list-style: none; }
.nh-term-out a { color: #9cc9ff; text-decoration: none; }
.nh-term-out a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.nh-term :where(a):focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.nh-term-zero { margin-bottom: 14px; color: #f7d774; }
.nh-term-cmd .nw { white-space: nowrap; }   /* keep "google-analytics" whole */
.nh-term-cursor { display: inline-block; width: .6em; height: 1.15em; vertical-align: -.22em; background: #8fc1ff; }
@media (prefers-reduced-motion: no-preference) {
    .nh-term-cursor { animation: nh-blink 1.1s steps(1) infinite; }
}
@keyframes nh-blink { 50% { opacity: 0; } }

/* Four stat cards across the bottom of the hero. */
.nh-stats {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
    margin: 0; padding: 0; list-style: none;
}
.nh-stat {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow);
}
.nh-stat-ico, .nh-app-ico {
    display: grid; place-items: center; flex: none; width: 52px; height: 52px;
    border: 1px solid var(--line); border-radius: 12px; background: #edf2fb; color: var(--blue);
}
.nh-stat-ico svg, .nh-app-ico svg { width: 24px; height: 24px; }
.nh-stat-num { display: block; color: var(--text); font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.nh-stat-label { display: block; color: var(--text-2); font-size: .95rem; line-height: 1.35; }

/* ── Sections ── */
.nh-section { padding: clamp(36px, 5vw, 56px) 0; border-bottom: 1px solid var(--line); }
.nh-examples {   /* the deeper blue of Gordon's "Glossy Coding Examples Grid" mockup (2026-10-31); same dark hairline as the hero's edge */
    background: linear-gradient(#27699f, #1b5c93); color: #fff;   /* white 5.8:1+ */
    border-bottom-color: rgb(15 27 51 / .26);
    padding-block: clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px);   /* kept tight, as Gordon asked (v16) */
}
.nh-examples .nh-sec-head p { color: #fff; font-size: 1.06rem; }
.nh-examples .nh-sec-icon { background: #fff; color: #4158e8; box-shadow: 0 6px 16px rgb(8 18 36 / .25); }   /* plain white tile, indigo glyph */
.nh-examples :where(a):focus-visible { outline-color: #fff; }
/* The hero's bottom fade, mirrored onto the top of the next section (Apps in
   v2): with a shadow falling on both sides, the Examples band looks raised. */
.nh-appsec { background: #f6f8fc; box-shadow: inset 0 10px 14px -4px rgb(15 27 51 / .32); }
.nh-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; margin-bottom: 28px; }
.nh-sec-icon {
    display: grid; place-items: center; flex: none; width: 60px; height: 60px;
    border: 1px solid #c3d1e6; border-radius: 14px;   /* v2: light outlined tile, blue glyph */
    background: var(--panel); color: var(--blue); box-shadow: 0 2px 8px rgb(15 27 51 / .06);
}
.nh-sec-icon svg { width: 30px; height: 30px; }
.nh-sec-title { flex: 1 1 22rem; }
.nh-sec-head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.nh-sec-head p { margin-top: 4px; color: var(--text-2); }

/* Examples: white cards, icon on top, name + one-liner, arrow at the right
   (4 across on desktop; icon-left rows of 2 below 1200px, then 1 below 640px) */
.nh-ex-cards {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px);
    margin: 0; padding: 0; list-style: none;
}
.nh-ex-cards li { display: flex; }
.nh-ex-card {
    flex: 1; display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "icon icon" "name arrow" "desc arrow";
    padding: 14px 20px 16px; border-radius: 20px;   /* shorter cards (Gordon, 2026-10-31): was 18/22/22 + a 124px icon, 215px tall at 1280 */
    background: #fff; color: var(--text); text-decoration: none;
    box-shadow: 0 1px 2px rgb(8 18 36 / .12), 0 10px 26px rgb(8 18 36 / .20);
    transition: transform .2s, box-shadow .2s;
}
.nh-examples .nh-ex-card:focus-visible { outline-offset: 4px; border-radius: 20px; }
/* The icon art sits on a transparent 276x264 canvas with 18px of glow room at
   each side, so pull it left by that much to line the badge up with the text. */
.nh-ex-card picture { grid-area: icon; display: block; margin: -6px 0 4px -6px; }
.nh-ex-card-icon { display: block; width: 92px; height: auto; }
.nh-ex-card-name { grid-area: name; font-size: 1.22rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.nh-ex-card-desc { grid-area: desc; margin-top: 2px; font-size: 1rem; line-height: 1.35; color: var(--text-2); }
.nh-ex-card-arrow { grid-area: arrow; align-self: end; width: 26px; height: 26px; margin-left: 12px; color: var(--link); transition: transform .2s; }
.nh-ex-card:hover { box-shadow: 0 2px 4px rgb(8 18 36 / .14), 0 16px 34px rgb(8 18 36 / .28); }
@media (prefers-reduced-motion: no-preference) {
    .nh-ex-card:hover { transform: translateY(-3px); }
    .nh-ex-card:hover .nh-ex-card-arrow { transform: translateX(4px); }
}
@media (max-width: 1200px) {   /* 4 across gets cramped below this: "HTML, CSS & JS" wrapped at 1024 */
    .nh-ex-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-ex-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon name arrow" "icon desc arrow";
        align-content: center; column-gap: 14px; padding: 10px 18px 10px 10px; border-radius: 16px;
    }
    .nh-ex-card picture { margin: -5px -2px -5px -3px; }
    .nh-ex-card-icon { width: 76px; }
    .nh-ex-card-name { align-self: end; font-size: 1.15rem; }
    .nh-ex-card-desc { align-self: start; margin-top: 2px; font-size: .95rem; }
    .nh-ex-card-arrow { align-self: center; margin-left: 0; }
}
@media (max-width: 640px) {
    .nh-ex-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Apps: icon tile, name + one-liner, arrow. 4 across, then 3, 2, 1. */
.nh-app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.nh-app-grid li { display: flex; }
.nh-app {
    flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); box-shadow: var(--shadow); color: var(--text); text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.nh-app:hover { border-color: #9db5e0; box-shadow: 0 12px 28px rgb(15 27 51 / .12); }
.nh-app-name { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.nh-app-desc { display: block; color: var(--text-2); font-size: .9rem; line-height: 1.4; }
.nh-app-arrow { width: 20px; height: 20px; color: var(--link); transition: transform .2s; }
@media (prefers-reduced-motion: no-preference) {
    .nh-app:hover { transform: translateY(-2px); }
    .nh-app:hover .nh-app-arrow { transform: translateX(3px); }
}

/* Tech News */
.nh-news-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 26px; }
.nh-news-head .nh-sec-head { margin-bottom: 0; }
.nh-news-head .nh-sec-title { flex: 0 1 auto; }
.nh-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-tab {
    min-height: 40px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 8px;
    background: var(--panel); color: var(--text); cursor: pointer;
    font: 500 .92rem/1 var(--font);
}
.nh-tab:hover { border-color: #6f82a3; background: var(--panel-2); }
.nh-tab[aria-pressed="true"] {
    border-color: transparent; background: linear-gradient(90deg, #2563eb, #1d4ed8); color: #fff;
    box-shadow: 0 6px 16px rgb(37 99 235 / .28);
}
/* the chosen outlet's logo, once, above its cards (hidden on "All") */
.nh-src-banner { margin-bottom: 22px; }
.nh-src-banner img {
    width: min(100%, 540px); height: auto; aspect-ratio: 3 / 1;
    border-radius: 14px; background: #e4ecf7; box-shadow: var(--shadow);
}
.nh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 18px; }
.nh-card {
    display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
    color: var(--text); text-decoration: none; box-shadow: var(--shadow);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.nh-card:hover { border-color: #9db5e0; box-shadow: 0 16px 36px rgb(15 27 51 / .14); }
@media (prefers-reduced-motion: no-preference) { .nh-card:hover { transform: translateY(-3px); } }
.nh-card-meta { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .82rem; }
.nh-src-mark {   /* one navy badge for every outlet, as in the mockup; white 11.6:1 */
    display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 5px;
    background: #1e3a5f; color: #fff; font: 700 .62rem/1 var(--mono);
}
.nh-src { color: var(--text); font-weight: 600; }
.nh-time { margin-left: auto; color: var(--text-3); white-space: nowrap; }
.nh-card-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
    font-size: 1rem; font-weight: 700; line-height: 1.38;
}
.nh-card-read {   /* "Read on XDA ↗" at the foot of every card */
    display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px;
    color: var(--link); font-size: .9rem; font-weight: 600;
}
.nh-card-read svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nh-card:hover .nh-card-read { text-decoration: underline; text-underline-offset: .2em; }
.nh-more { display: flex; justify-content: center; margin-top: 28px; }
.nh-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--text-2); text-align: center; }

/* ── Footer ── */
.nh-footer { border-top: 1px solid var(--line-2); background: var(--foot-bg); color: var(--foot-text); }
main > .nh-section:last-child { border-bottom: 0; }   /* the footer's own top border takes over */
.nh-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; padding-block: 44px 32px; }
.nh-foot-logo { display: inline-flex; align-items: center; gap: 10px; color: #1f4670; font-size: 1.35rem; font-weight: 800; letter-spacing: .01em; text-decoration: none; }   /* 9.6:1 */
.nh-footer a.nh-foot-logo:hover { color: #1f4670; text-decoration: none; }
.nh-foot-mark {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 9px;
    background: linear-gradient(#2a5583, #1f4670); color: #fff; font: 700 .85rem/1 var(--mono);
}
.nh-foot-tld { color: #4a6283; }   /* 5.3:1 on the footer */
.nh-tagline { margin: 12px 0 12px; color: var(--foot-dim); font: .8rem/1.4 var(--mono); }
.nh-footer p { max-width: 42ch; margin-bottom: 14px; }
.nh-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nh-pills li { padding: 3px 10px; border: 1px solid #9fb0c9; border-radius: 999px; color: var(--foot-text); font: .75rem/1.5 var(--mono); }
.nh-footer h2 { margin-bottom: 12px; color: var(--foot-dim); font: 600 .8rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.nh-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nh-footer a { color: var(--foot-text); text-decoration: none; }
.nh-footer a:hover { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.nh-footer-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding-block: 16px 24px; border-top: 1px solid var(--line-2);
    color: var(--foot-dim); font: .8rem/1.4 var(--mono);
}
.nh-footer-bottom p { margin: 0; }
.nh-foot-meta { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }



/* ── Responsive ── */
/* Header: the section links drop to a second row in the bar when the buttons
   need the room: staff (Admin Panel + Projects + Sign out) first, then
   signed-in (Projects + Sign out), then everyone. On phones the account
   buttons take a row of their own too. */
@media (max-width: 1100px) {
    .nh-header-inner.nh-has-admin { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo . acct sign" "site site site site"; }
    html:has(.nh-has-admin) { scroll-padding-top: 160px; }
}
@media (max-width: 900px) {
    .nh-header-inner.nh-has-nav { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo . acct sign" "site site site site"; }
    html:has(.nh-has-nav) { scroll-padding-top: 160px; }
}
@media (max-width: 840px) {   /* below this the four links get squeezed onto two lines beside the logo */
    .nh-header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo . acct sign" "site site site site"; }
    html { scroll-padding-top: 160px; }
    .nh-sitenav { width: 100%; padding-top: 4px; border-top: 1px solid rgb(255 255 255 / .18); }
    .nh-sitenav a { min-height: 40px; padding: 0 10px; }
}
@media (max-width: 1100px) {
    .nh-has-admin .nh-sitenav { width: 100%; padding-top: 4px; border-top: 1px solid rgb(255 255 255 / .18); }
}
@media (max-width: 900px) {
    .nh-has-nav .nh-sitenav { width: 100%; padding-top: 4px; border-top: 1px solid rgb(255 255 255 / .18); }
}
/* Phones: with the section links on their own row the bar is 2-3 rows tall,
   too much to pin over a small screen, so it scrolls away with the page. */
@media (max-width: 660px) {
    .nh-header { position: static; }
    html, html:has(.nh-has-nav), html:has(.nh-has-admin) { scroll-padding-top: 12px; }
}
@media (max-width: 380px) {
    .nh-sitenav a { padding: 0 7px; font-size: .9rem; }   /* all four links on one row at 320px */
}
@media (max-width: 660px) {
    .nh-header-inner.nh-has-admin { grid-template-areas: "logo . . sign" "acct acct acct acct" "site site site site"; }
}
@media (max-width: 440px) {
    .nh-header-inner.nh-has-nav { grid-template-areas: "logo . . sign" "acct acct acct acct" "site site site site"; }
}
/* Hero: copy over terminal; stats 2 x 2 */
@media (max-width: 1000px) {
    .nh-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .nh-term { max-width: 640px; }
    .nh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) { .nh-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .nh-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .nh-app-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (max-width: 880px) {
    .nh-footer-grid { grid-template-columns: 1fr 1fr; }
    .nh-footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .nh-header-inner { gap: 10px; padding: 8px; }
    .nh-logo { gap: 9px; }
    .nh-logo-mark { width: 38px; height: 38px; }
    .nh-logo-text { font-size: 1.2rem; }
    .nh-signin { padding: 0 12px; }
    .nh-actions .nh-btn { flex: 1 1 100%; }
    .nh-stats { gap: 12px; }
    .nh-stat { gap: 12px; padding: 12px 14px; }
    .nh-stat-ico { width: 42px; height: 42px; }
    .nh-stat-num { font-size: 1.45rem; }
    .nh-stat-label { font-size: .88rem; }
}
@media (max-width: 440px) {
    /* room for "BOZCODE.com" + Projects + Sign out on one row (390px iPhone) */
    .nh-logo-text { font-size: 1.02rem; }
    .nh-signin svg { display: none; }
}
@media (max-width: 380px) {
    .nh-logo-text { display: none; }   /* the >_ mark alone keeps the header on one row */
    .nh-footer-grid { grid-template-columns: 1fr; }
}