/* ------------------------------------------------------------------
   Maritime Propulsion — site stylesheet
   Mobile-first, no framework. Tokens first, then base, layout, components.
   Palette is drawn from the steel logo: warm dark greys with a brass accent.
   ------------------------------------------------------------------ */

:root {
    /* Steel (from the logo gradient) */
    --steel-900: #2b2724;
    --steel-800: #3f3a36;
    --steel-700: #4e4843;
    --steel-600: #5c5651;
    --steel-500: #6e6862;
    --steel-400: #8d8782;
    --steel-300: #b5b0ab;
    --steel-200: #d9d5d0;
    --steel-100: #efedea;
    --steel-50:  #f7f6f4;

    --color-accent: #f4a300;      /* brass */
    --color-accent-ink: #1a1400;
    --color-accent-deep: #a86f00;

    /* Semantic */
    --color-bg: #ffffff;
    --color-bg-alt: var(--steel-100);
    --color-surface: #ffffff;
    --color-border: var(--steel-200);
    --color-text: var(--steel-900);
    --color-text-muted: var(--steel-500);
    --color-heading: var(--steel-800);
    --color-link: var(--steel-800);
    --color-link-hover: var(--color-accent-deep);

    /* Type */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-sm: 0.875rem;
    --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    --leading: 1.6;

    /* Spacing & layout */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --container: 72rem;
    --container-narrow: 44rem;
    --gutter: 1rem;
    --radius: 0.375rem;
    --shadow: 0 1px 2px rgb(43 39 36 / 0.06), 0 4px 16px rgb(43 39 36 / 0.06);
    --header-height: 3.75rem;
}

@media (min-width: 48em) {
    :root {
        --gutter: 1.5rem;
        --header-height: 4.5rem;
    }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--color-text);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--color-link); text-decoration-thickness: 0.06em; text-underline-offset: 0.15em; }
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4 {
    line-height: 1.2;
    margin: 0 0 var(--space-4);
    font-weight: 700;
    color: var(--color-heading);
    text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
.muted { color: var(--color-text-muted); }

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---------- Utilities ---------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 600;
}
.skip-link:focus { top: 0; }

.button {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: var(--steel-800);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    border: 0;
    cursor: pointer;
}
.button:hover { background: var(--steel-600); color: #fff; }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    color: var(--steel-800);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 12px rgb(43 39 36 / 0.06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-height);
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    padding-block: var(--space-2);
}
.brand__logo {
    /* 1999x327 artwork (about 6:1). A fixed width (not a percentage) so the flex row measures
       the link at this size rather than at the image's intrinsic width and wraps. Keep these in
       step with the img's sizes attribute in _Layout.cshtml. */
    width: 14rem;
    max-width: 100%;
    height: auto;
}

@media (min-width: 48em) {
    .brand__logo { width: 15rem; }
}
@media (min-width: 64em) {
    .brand__logo { width: 20rem; }
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; height: 2.75rem;
    background: transparent;
    border: 1px solid var(--steel-300);
    border-radius: var(--radius);
    color: var(--steel-800);
    cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    display: block;
    width: 1.25rem; height: 2px;
    background: currentColor;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
    flex-basis: 100%;
    display: none;
    padding-block: var(--space-2) var(--space-4);
}
.site-nav.is-open { display: block; }

.site-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.site-nav__list a {
    display: block;
    padding: var(--space-3) var(--space-3);
    color: var(--steel-800);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius);
    border-bottom: 2px solid transparent;
}
.site-nav__list a:hover {
    background: var(--steel-100);
    color: var(--steel-900);
}
.site-nav__list a[aria-current="page"] {
    color: var(--steel-900);
    border-bottom-color: var(--color-accent);
    border-radius: var(--radius) var(--radius) 0 0;
}

.site-search {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.site-search input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--steel-300);
    border-radius: var(--radius);
    background: var(--steel-50);
    color: var(--steel-900);
    font: inherit;
}
.site-search input::placeholder { color: var(--steel-400); }
.site-search button {
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: var(--steel-800);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}
.site-search button:hover { background: var(--steel-600); }

@media (min-width: 48em) {
    .nav-toggle { display: none; }
    .site-nav {
        flex-basis: auto;
        display: flex;
        align-items: center;
        gap: var(--space-6);
        padding-block: 0;
    }
    .site-nav__list { flex-direction: row; gap: var(--space-1); }
    .site-nav__list a { padding-inline: var(--space-2); }
    .site-search { margin-top: 0; width: 8rem; }
}
@media (min-width: 64em) {
    .site-nav__list a { padding-inline: var(--space-3); }
    .site-search { width: 14rem; }
}

/* ---------- Main / sections ---------- */

.site-main { flex: 1 0 auto; }

.section { padding-block: var(--space-12); }
.section--alt { background: var(--color-bg-alt); }
.section__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.section__title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--steel-400), transparent);
}
/* "All news →" style link at the end of a section title, after the rule. */
.section__more {
    order: 1;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

/* Brushed-steel band, same tones as the logo lettering. */
.hero {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.10), rgb(0 0 0 / 0.18)),
        linear-gradient(160deg, var(--steel-600), var(--steel-800) 55%, var(--steel-700));
    color: #fff;
    padding-block: var(--space-16);
    border-bottom: 4px solid var(--color-accent);
}
/* Video variant: the clip fills the band behind a steel tint so the headline stays readable. */
.hero--video { position: relative; overflow: hidden; isolation: isolate; }
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}
.hero--video::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(43 39 36 / 0.55), rgb(43 39 36 / 0.75)),
        linear-gradient(90deg, rgb(43 39 36 / 0.35), transparent 60%);
}
.hero__content { position: relative; }
.hero__title { color: #fff; margin-bottom: var(--space-3); text-shadow: 0 1px 2px rgb(0 0 0 / 0.4); }
.hero__lead {
    font-size: var(--text-lg);
    max-width: 40ch;
    color: rgb(255 255 255 / 0.85);
    margin: 0;
}

/* ---------- Cards ---------- */

.card-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card > img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card__body { padding: var(--space-4); }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- News list ---------- */

.page-header { margin-bottom: var(--space-8); }
.page-header h1 { margin-bottom: var(--space-2); }
.page-header p { margin: 0; }

/* Fixed 300px columns so the cards line up with the 300x250 banners mixed into the grid.
   Columns are centred; on a phone that is a single centred column. */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    justify-content: center;
    gap: var(--space-8) var(--space-6);
}

.news-card {
    width: 300px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
/* 16:9 picture (300x169). Banner slots stay 300x250, the standard medium rectangle. */
.news-card__media {
    display: block;
    width: 300px;
    aspect-ratio: 16 / 9;
    background: var(--steel-100);
}
.news-card__media img {
    width: 300px;
    height: 100%;
    object-fit: cover;
}
.news-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}
.news-card__kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
}
.news-card__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
}
.news-card__title a { color: var(--color-heading); text-decoration: none; }
.news-card__title a:hover { color: var(--color-link-hover); text-decoration: underline; }
.news-card__excerpt {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--steel-700);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text-only card: no picture, so a steel top rule marks it. Height follows the content. */
.news-card--text {
    border-top: 4px solid var(--steel-600);
}
.news-card--text .news-card__body { padding-top: var(--space-6); }
.news-card--text .news-card__kicker { margin-top: auto; }

/* Banner slot: the same 300x250 block as a card picture, ready for an ad tag. */
.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    background: var(--steel-50);
    border: 1px dashed var(--steel-300);
    border-radius: var(--radius);
    color: var(--steel-400);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-self: start;
}
.ad-slot--mrec { width: 300px; height: 250px; }
.ad-slot--leaderboard { width: 728px; height: 90px; margin-inline: auto; }

/* Leaderboard band above the masthead. Hidden where a 728px banner does not fit. */
.top-banner { display: none; padding-block: var(--space-3); background: var(--steel-100); border-bottom: 1px solid var(--color-border); }
@media (min-width: 48em) { .top-banner { display: block; } }
.ad-slot__label { font-weight: 600; }
.ad-slot__size { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: none; }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-12);
    font-weight: 600;
}
.pager__link {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--steel-800);
}
.pager__link:hover { background: var(--steel-100); color: var(--steel-900); }
.pager__status { color: var(--color-text-muted); font-weight: 400; }

/* ---------- Home page ---------- */

.container--home { max-width: 76rem; }
.section--tight { padding-block: var(--space-8); }

/* Small uppercase label above headings. */
.eyebrow {
    margin: 0 0 var(--space-2);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
}
.eyebrow--light { color: var(--color-accent); }

.section-head { margin-bottom: var(--space-6); }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.section-head__title { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.section-head__lead { margin: 0; max-width: 60ch; color: var(--steel-700); }
/* A lead that stays on one line where the width allows (the 76rem container from 64em). */
.section-head__lead--wide { max-width: none; }
@media (min-width: 64em) { .section-head__lead--wide { white-space: nowrap; } }
.section-head__more { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Hero, home variant: compact band, serif headline on one line where it fits, search box. */
.hero--home { padding-block: var(--space-8); }
.hero--home .hero__content { max-width: 76rem; }
.hero__headline {
    margin: 0 0 var(--space-2);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}
@media (min-width: 48em) { .hero__headline { white-space: nowrap; } }
.hero--home .eyebrow { margin-bottom: var(--space-1); }
.hero--home .hero__lead { max-width: 60ch; margin-bottom: var(--space-4); font-size: var(--text-base); }
.hero__search {
    display: flex;
    max-width: 40rem;
    padding: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}
.hero__search input {
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 0;
    font: inherit;
    font-size: 1rem;
    color: var(--steel-900);
    background: #fff;
}
.hero__search button {
    padding: 0 var(--space-6);
    border: 0;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font: inherit;
    font-weight: 800;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.hero__search button:hover { background: #ffb31a; }

/* Explore by technology: one strip of tiles with hairline dividers. */
.explore {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-border);
    background: #fff;
}
@media (min-width: 48em) { .explore { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64em) { .explore { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.explore__tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--steel-900);
    text-decoration: none;
    min-height: 9rem;
}
.explore__tile:hover { background: var(--steel-50); color: var(--steel-900); }
.explore__symbol { font-size: 1.5rem; line-height: 1; color: var(--color-accent-deep); margin-bottom: var(--space-2); }
.explore__name { font-size: 0.95rem; line-height: 1.25; }
.explore__more { margin-top: auto; font-size: 0.75rem; color: var(--color-text-muted); }

/* Hero search options: scope switch above the box, popular technologies below it. */
.hero__finder { max-width: 44rem; }
.scope { display: inline-flex; gap: 2px; margin: 0 0 var(--space-2); padding: 3px; border: 0; background: rgb(0 0 0 / 0.35); border-radius: var(--radius); }
.scope__option { position: relative; cursor: pointer; }
.scope__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scope__option span { display: block; padding: var(--space-1) var(--space-4); border-radius: calc(var(--radius) - 1px); font-size: var(--text-sm); font-weight: 700; color: rgb(255 255 255 / 0.85); }
.scope__option:hover span { color: #fff; background: rgb(255 255 255 / 0.1); }
.scope__option input:checked + span { background: #fff; color: var(--steel-900); }
.scope__option input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.hero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; }
.hero__popular-label { font-size: var(--text-sm); font-weight: 700; color: rgb(255 255 255 / 0.75); margin-right: var(--space-1); }
.chip { display: inline-block; padding: 3px var(--space-3); border: 1px solid rgb(255 255 255 / 0.35); border-radius: 999px; font-size: 0.8125rem; color: #fff; text-decoration: none; background: rgb(0 0 0 / 0.2); }
.chip:hover { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }

/* Latest news + banner column. Areas: narrow = head, lead, ads, more; 64em+ the ads are a
   300px column spanning every row. */
.home-news__layout { display: grid; gap: var(--space-6); grid-template-areas: "head" "lead" "ads" "more"; }
.home-news__head { grid-area: head; margin-bottom: 0; }
.home-news__lead { grid-area: lead; }
.home-news__ads { grid-area: ads; min-width: 0; }
.home-news__more { grid-area: more; display: grid; gap: var(--space-6); min-width: 0; }
@media (min-width: 64em) {
    .home-news__layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "head ads" "lead ads" "more ads";
        column-gap: var(--space-10, 2.5rem);
    }
    .home-news__ads { align-self: start; }
    .home-news__ads .ad-stack { position: static; }
}

.lead { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.lead__media { display: block; background: var(--steel-100); }
.lead__media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lead__text { padding: var(--space-4) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.lead__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.lead__meta .eyebrow { margin: 0; }
.lead__title { margin: 0; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.2; }
.lead__title a { color: var(--color-heading); text-decoration: none; }
.lead__title a:hover { color: var(--color-link-hover); text-decoration: underline; }
.lead__excerpt { margin: 0; color: var(--steel-700); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lead__more { margin-top: auto; font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
/* Side by side once there is room: picture left, text right. */
@media (min-width: 48em) {
    .lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .lead__media img { aspect-ratio: auto; min-height: 100%; }
    .lead__text { padding: var(--space-6); }
}

.story-row { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.story { display: flex; flex-direction: column; gap: var(--space-2); }
.story__media { display: block; border-radius: var(--radius); overflow: hidden; background: var(--steel-100); margin-bottom: var(--space-1); }
.story__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.3s ease; }
.story:hover .story__media img { transform: scale(1.03); }
.story .eyebrow { margin: 0; font-size: 0.7rem; }
.story__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.story__title a { color: var(--color-heading); text-decoration: none; }
.story__title a:hover { color: var(--color-link-hover); text-decoration: underline; }

.headlines { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--steel-800); }
.headlines__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.headlines__category { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-500); }
.headlines__link { font-weight: 600; color: var(--steel-900); text-decoration: none; line-height: 1.3; }
.headlines__link:hover { color: var(--color-link-hover); text-decoration: underline; }
@media (min-width: 48em) { .headlines--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }

/* Featured company / product spots: four across on wide screens. The picture block stays
   even when there is no picture (a monogram stands in). */
.spots { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 64em) { .spots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spot { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.spot:hover { transform: translateY(-2px); border-color: var(--steel-400); box-shadow: 0 2px 4px rgb(43 39 36 / 0.08), 0 12px 28px rgb(43 39 36 / 0.12); }
.spot--enhanced { border-top: 3px solid var(--color-accent); }
.spot__badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; padding: 2px var(--space-2); border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.spot__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--steel-50); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.spot__media img { width: 100%; height: 100%; object-fit: cover; }
.spot__media--logo { background: #fff; padding: var(--space-6); }
.spot__media--logo img { width: auto; height: auto; max-width: 80%; max-height: 100%; object-fit: contain; }
/* No picture: a faint diagonal steel texture behind the monogram. */
.spot__media:has(.spot__monogram) { background: repeating-linear-gradient(135deg, var(--steel-50) 0 10px, var(--steel-100) 10px 11px); }
.spot__monogram { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; box-shadow: 0 4px 12px rgb(43 39 36 / 0.25); background: linear-gradient(160deg, var(--steel-500), var(--steel-800)); color: #fff; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; }
.spot__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.spot__kicker { margin: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-deep); }
.spot__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.spot__title a { color: var(--color-heading); text-decoration: none; }
/* The title link covers the whole card. */
.spot__title a::after { content: ""; position: absolute; inset: 0; }
.spot__title a:hover { color: var(--color-link-hover); }
.spot__text { margin: 0; font-size: var(--text-sm); color: var(--steel-700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.spot__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: auto 0 0; padding-top: var(--space-2); font-size: 0.8125rem; color: var(--color-text-muted); }
.spot__meta span + span::before { content: "\00b7"; margin-right: var(--space-3); color: var(--steel-300); }

/* ---------- Search page ---------- */

.search-page__title { margin-bottom: var(--space-4); }
.search-page__form { margin-bottom: var(--space-6); border: 1px solid var(--color-border); box-shadow: none; }
.search-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.search-tabs__tab { padding: var(--space-2) var(--space-3); color: var(--steel-700); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.search-tabs__tab:hover { color: var(--steel-900); }
.search-tabs__tab.is-selected { color: var(--steel-900); border-bottom-color: var(--color-accent); }
.search-page__count { margin-bottom: var(--space-4); }
.search-results { list-style: none; margin: 0 0 var(--space-8); padding: 0; }
.search-result { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.search-result--enhanced { padding-left: var(--space-3); border-left: 3px solid var(--color-accent); }
.search-result__kind { margin: 0 0 var(--space-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-500); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.search-result__kind a { text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: none; }
.search-result__sep { color: var(--steel-300); }
.search-result__badge { padding: 1px var(--space-2); border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.65rem; }
.search-result__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.search-result__title a { color: var(--color-heading); text-decoration: none; }
.search-result__title a:hover { color: var(--color-link-hover); text-decoration: underline; }
.search-result__snippet { margin: 0; color: var(--steel-700); }
.search-page__empty { padding: var(--space-4); background: var(--steel-50); border: 1px solid var(--color-border); border-radius: var(--radius); }
.search-page__news { color: var(--color-text-muted); }

/* ---------- Directory (companies & products) ---------- */

.page-header__lead { max-width: 60ch; color: var(--steel-700); margin: var(--space-3) 0 0; }

/* List layout. DOM order: filter, ads, main.
   Narrow: one column in that order, ads as a swipeable row above the cards.
   64em+: filter and ads stacked in a 300px left column, cards on the right.
   80em+: filter left, cards centre, ads in a sticky 300px right column. The wide container
   (90rem) leaves room for two card columns between them on a laptop. */
.container--wide { max-width: 90rem; }
/* Exactly three 300px blocks plus their gaps and the page gutters: the home page width. */
.container--blocks-3 { max-width: calc(3 * 300px + 2 * var(--space-6) + 2 * var(--gutter)); }
.directory__layout { display: grid; gap: var(--space-8); align-items: start; }
.directory__main { min-width: 0; }
.directory__ads { min-width: 0; }
.news-grid--start { justify-content: start; }
@media (min-width: 64em) {
    .directory__layout {
        grid-template-columns: 300px minmax(0, 1fr);
        /* auto + 1fr: the filter row is only as tall as the filter, so the ads sit right
           under it rather than sharing the tall main column's height. */
        grid-template-rows: auto 1fr;
        grid-template-areas: "filter main" "ads main";
        gap: var(--space-8);
    }
    .directory__layout > .filter { grid-area: filter; }
    .directory__ads { grid-area: ads; }
    .directory__main { grid-area: main; }
    .filter > .filter__toggle { display: none; }
    .directory__ads .ad-stack { flex-direction: column; overflow: visible; padding-bottom: 0; gap: var(--space-6); }
    .directory__ads .ad-stack > .ad-slot { flex: none; }
}
@media (min-width: 80em) {
    /* The card column is exactly two cards wide (three from 99em), so the ad column sits
       right after the cards with the same gap the cards have between themselves. Any
       leftover width goes to the far right, not between the cards and the ads. */
    .directory__layout {
        grid-template-columns: 14rem calc(2 * 300px + var(--space-6)) 300px;
        grid-template-areas: "filter main ads";
        column-gap: var(--space-6);
        justify-content: start;
    }
    .directory__ads { align-self: stretch; }
    .directory__ads .ad-stack { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
@media (min-width: 99em) {
    .directory__layout { grid-template-columns: 14rem calc(3 * 300px + 2 * var(--space-6)) 300px; }
}

/* Entry pages: banners under the facts panel in the right column. */
.entry__ads { margin-top: var(--space-6); }
.entry__ads .ad-stack { flex-direction: column; overflow: visible; padding-bottom: 0; gap: var(--space-6); align-items: center; }
.entry__ads .ad-stack > .ad-slot { flex: none; }

.filter { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--steel-50); }
.filter__toggle {
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    list-style: none;
}
.filter__toggle::-webkit-details-marker { display: none; }
.filter__toggle::after { content: "\25BE"; float: right; color: var(--steel-500); }
.filter[open] > .filter__toggle::after { content: "\25B4"; }
.filter__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5, 1.25rem); }
.filter__label { margin: 0 0 var(--space-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-500); }
.filter__search { display: flex; gap: var(--space-2); }
.filter__search input, .filter__country select {
    width: 100%;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--steel-300);
    border-radius: var(--radius);
    background: #fff;
    color: var(--steel-900);
    font: inherit;
}
.filter__search button { padding: 0 var(--space-3); border: 0; border-radius: var(--radius); background: var(--steel-800); color: #fff; font-size: 1.125rem; cursor: pointer; }
.filter__search button:hover { background: var(--steel-600); }
.filter__country { display: flex; flex-direction: column; }
.filter__all, .filter__link {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    color: var(--steel-800);
    text-decoration: none;
    font-size: var(--text-sm);
}
.filter__all { font-weight: 600; margin-bottom: var(--space-2); }
.filter__all:hover, .filter__link:hover { background: var(--steel-100); color: var(--steel-900); }
.filter__all.is-selected, .filter__link.is-selected { background: var(--steel-800); color: #fff; }
.filter__all.is-selected .filter__count, .filter__link.is-selected .filter__count { color: var(--steel-200); }
.filter__count { color: var(--steel-400); font-variant-numeric: tabular-nums; }
.filter__section { border-top: 1px solid var(--color-border); }
.filter__section-name {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm);
    list-style: none;
}
.filter__section-name::-webkit-details-marker { display: none; }
.filter__list { list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-2); }
.filter__list--sub { padding-left: var(--space-4); border-left: 2px solid var(--steel-200); margin-left: var(--space-2); }

/* Directory cards reuse the news card; the media box holds a logo or a product picture. */
.dir-card__media { display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid var(--color-border); }
/* Scoped to the media box so it beats ".news-card__media img" (300px wide, cover), which would
   crop logos. The img fills a 240x120 area and the logo is scaled to fit inside it, whole. */
.dir-card__media .dir-card__logo { width: 100%; height: 100%; max-width: 240px; max-height: 120px; object-fit: contain; }
.dir-card__image { width: 300px; height: 169px; object-fit: cover; }
/* On directory cards the kicker comes first, so a text-only card keeps its content at the top
   instead of dropping it to the bottom of a row stretched by a neighbour's logo. */
.dir-card.news-card--text .news-card__kicker { margin-top: 0; }
.dir-card--enhanced { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow); }
.news-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Company / product entry pages */
.entry { padding-block: var(--space-8) var(--space-12); }
.entry__header { margin-bottom: var(--space-8); }
.entry__masthead { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.entry__logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 240px; height: 135px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.entry__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.entry__logo.is-missing { display: none; }
.entry__title { margin-bottom: var(--space-2); }
.entry__lead { font-size: var(--text-lg); color: var(--steel-700); max-width: 60ch; margin: 0 0 var(--space-4); }
.entry__layout { display: grid; gap: var(--space-8); align-items: start; }
.entry__main { min-width: 0; }
.entry__section { margin-top: var(--space-10, 2.5rem); }
.entry__section > h2 { font-size: var(--text-lg); }
@media (min-width: 64em) {
    /* 300px plus the panel's padding, so a 300x250 banner fits inside it. */
    .entry__layout { grid-template-columns: minmax(0, 1fr) calc(300px + 2 * var(--space-4) + 2px); gap: var(--space-12); }
}
.entry__aside { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--steel-50); }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.facts dt { color: var(--steel-500); font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts--grid { font-size: var(--text-base); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); }
.facts__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-500); margin: var(--space-6) 0 var(--space-2); }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-list li { display: inline-flex; align-items: center; gap: var(--space-2); }
.tag { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--steel-300); border-radius: 999px; font-size: var(--text-sm); color: var(--steel-800); text-decoration: none; background: #fff; }
a.tag:hover { border-color: var(--steel-800); color: var(--steel-900); }
.tag--plain { background: var(--steel-100); border-color: transparent; }
.tag-list__note { font-size: 0.75rem; color: var(--steel-500); }

/* ---------- Story page ---------- */

.kicker {
    margin: 0 0 var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
}

.article { padding-block: var(--space-8) var(--space-12); }

/* Story layout. Narrow: a single 44rem column in DOM order, so the ad stack lands between the
   opening paragraphs and the rest of the body. Wide: the ad stack becomes a right column that
   spans every row and sticks while the story scrolls. */
.article__layout {
    display: grid;
    grid-template-columns: minmax(0, var(--container-narrow));
    justify-content: center;
    row-gap: 0;
}
.article__ads { margin-block: var(--space-6) var(--space-8); }
.ad-stack {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
}
.ad-stack > .ad-slot { flex: 0 0 300px; scroll-snap-align: start; }

@media (min-width: 64em) {
    .article__layout {
        grid-template-columns: minmax(0, var(--container-narrow)) 300px;
        column-gap: var(--space-12);
        grid-template-areas:
            "header ads"
            "gallery ads"
            "top ads"
            "rest ads";
        align-items: start;
    }
    .article__header { grid-area: header; }
    .article__layout > .gallery { grid-area: gallery; }
    .article__body--top { grid-area: top; }
    .article__body--rest { grid-area: rest; }
    .article__ads { grid-area: ads; margin: 0; align-self: stretch; }
    .ad-stack {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        flex-direction: column;
        overflow: visible;
        padding-bottom: 0;
        gap: var(--space-6);
    }
    .ad-stack > .ad-slot { flex: none; }
}

.article__header { margin-bottom: var(--space-6); }
.article__breadcrumb { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.article__breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.article__breadcrumb a::before { content: "\2190\00a0"; }
.article__breadcrumb a:hover { color: var(--color-link-hover); text-decoration: underline; }
.article__title { margin-bottom: var(--space-3); }
.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.article__author { color: var(--steel-700); font-weight: 600; }

.article__body { line-height: 1.7; }
.article__body > :first-child { margin-top: 0; }
.article__body--top { margin-bottom: 0; }
.article__body p { margin: 0 0 1.25em; }
.article__body h2, .article__body h3 { margin-top: 1.5em; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.article__body a { text-decoration: underline; }
.article__body blockquote {
    margin: 1.5em 0;
    padding: var(--space-2) var(--space-6);
    border-left: 4px solid var(--color-accent);
    color: var(--steel-700);
}
.article__body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.article__body td, .article__body th { padding: var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; }
.article__body iframe { max-width: 100%; }

/* Gallery: one active slide when scripted, all slides stacked otherwise. */
.gallery { margin: 0 0 var(--space-8); }
.gallery__slide { margin: 0 0 var(--space-4); }
/* Full picture at its own proportions: no fixed ratio, no cropping. */
.gallery__slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    background: var(--steel-100);
}
.gallery__caption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.js .gallery__slide { margin-bottom: 0; }
.js .gallery__slide:not(.is-active) { display: none; }
.gallery__thumbs { display: none; }
.js .gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.gallery__thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: none;
    line-height: 0;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gallery__thumb img { display: block; width: 120px; height: 68px; object-fit: cover; border-radius: 2px; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-selected="true"] { opacity: 1; border-color: var(--color-accent); }

/* ---------- Footer ---------- */

/* Light steel so the same dark-lettered logo works here as in the header. */
.site-footer {
    background: var(--steel-100);
    color: var(--steel-700);
    padding-block: var(--space-12) var(--space-8);
    margin-top: auto;
    border-top: 4px solid var(--steel-600);
}
.site-footer a { color: var(--steel-800); }
.site-footer a:hover { color: var(--color-accent-deep); }
.site-footer__logo { width: 16rem; max-width: 100%; margin-bottom: var(--space-6); }
.site-footer__links {
    list-style: none;
    margin: 0 0 var(--space-6); padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
}
.site-footer__copy { font-size: var(--text-sm); margin: 0; color: var(--steel-500); }

/* ---------- Print ---------- */

@media print {
    .site-header, .site-footer, .nav-toggle, .site-search { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: inherit; text-decoration: none; }
}