/* ------------------------------------------------------------------
   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__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); }

/* Latest news: leads on the left, headline list + ad + promo on the right. */
.news-layout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 64em) { .news-layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--space-10, 2.5rem); } }
.news-layout__leads { display: grid; gap: var(--space-6); }
@media (min-width: 48em) {
    .news-layout__leads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lead--first { grid-column: 1 / -1; }
}
.lead { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.lead__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lead__text { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.lead__title { margin: 0; font-size: var(--text-lg); line-height: 1.25; }
.lead--first .lead__title { font-size: var(--text-xl); }
.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); }
.lead__more { font-size: var(--text-sm); font-weight: 700; text-decoration: none; }

.news-layout__side { display: flex; flex-direction: column; gap: var(--space-6); }
.news-layout__side .ad-slot { align-self: center; }
.headlines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.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; }

.promo { padding: var(--space-6); background: var(--steel-800); color: #fff; border-radius: var(--radius); }
.promo .eyebrow { color: var(--color-accent); }
.promo__title { color: #fff; margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.promo__text { margin: 0 0 var(--space-4); color: rgb(255 255 255 / 0.8); }
.promo .button { background: var(--color-accent); color: var(--color-accent-ink); }
.promo .button:hover { background: #ffb31a; color: var(--color-accent-ink); }

/* Supplier profile band. */
.supplier { background: var(--steel-100); }
.supplier__layout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 64em) { .supplier__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-12); } }
.supplier__links { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin: var(--space-6) 0 0; }
.supplier__link { font-weight: 700; text-decoration: none; }
.supplier__cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.supplier__logo { grid-column: 1 / -1; display: flex; align-items: center; padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }
.supplier__logo img { max-height: 72px; width: auto; max-width: 240px; }
.supplier__logo.is-missing { display: none; }
.supplier__card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--steel-900); text-decoration: none; }
.supplier__card:hover { border-color: var(--steel-500); color: var(--steel-900); }
.supplier__card .eyebrow { margin: 0; font-size: 0.65rem; }
.supplier__card strong { font-size: 1rem; line-height: 1.3; }
.supplier__card span { font-size: var(--text-sm); color: var(--steel-700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Rows of cards plus a banner: cards flex to the column so four fit beside each other. */
.home-row { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.home-row__head { margin-top: var(--space-12); }
.home-row > .news-card { width: auto; }
.home-row .news-card__media, .home-row .dir-card__image { width: 100%; }
.home-row .dir-card__image { height: auto; aspect-ratio: 16 / 9; }
.home-row > .ad-slot { justify-self: center; }

/* ---------- 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); }
.dir-card__logo { width: auto; height: auto; max-width: 240px; max-height: 120px; object-fit: contain; }
.dir-card__image { width: 300px; height: 169px; object-fit: cover; }
.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; }
}