/* ==========================================================================
   The Alaskan Angle — "Cold Front Light" design system
   Fonts: Newsreader (serif) + Public Sans (sans)
   ========================================================================== */

:root {
    --cf-ink: #173039;          /* primary text */
    --cf-ink-deep: #122b33;     /* headlines */
    --cf-body-ink: #243d46;     /* article body text */
    --cf-slate: #3c5660;        /* secondary text */
    --cf-muted: #5a7780;        /* metadata text */
    --cf-teal: #0E7C8C;         /* accent */
    --cf-teal-soft: #9fcdd4;    /* link underlines */
    --cf-paper: #F4F8F9;        /* page background */
    --cf-panel: #E3EEF0;        /* strips, cards, panels */
    --cf-rule: #d3e2e4;         /* hairlines */
    --cf-rule-strong: #cfe0e3;  /* panel borders */
    --cf-backdrop: #dfe7e8;     /* behind the page */
    --cf-serif: 'Newsreader', Georgia, serif;
    --cf-sans: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
}

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

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

body.cf {
    margin: 0;
    background: var(--cf-paper);
    font-family: var(--cf-sans);
    color: var(--cf-ink);
    line-height: 1.5;
}

.cf-page {
    width: 100%;
    margin: 0 auto;
    background: var(--cf-paper);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cf-page > article { flex: 1; }

img { max-width: 100%; }

/* --------------------------------------------------------------------------
   Top utility strip
   -------------------------------------------------------------------------- */
.cf-utility {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 44px;
    background: var(--cf-panel);
    border-bottom: 1px solid var(--cf-rule-strong);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    color: var(--cf-muted);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Masthead + navigation
   -------------------------------------------------------------------------- */
.cf-masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 26px 44px 22px;
}

.cf-masthead--ruled { border-bottom: 1px solid var(--cf-rule); }

.cf-logo {
    font-family: var(--cf-serif);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cf-ink);
    text-decoration: none;
    white-space: nowrap;
}

.cf-logo span { font-style: italic; color: var(--cf-teal); }

.cf-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.cf-nav a {
    color: var(--cf-slate);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cf-nav a:hover, .cf-nav a.active { color: var(--cf-teal); }

/* --------------------------------------------------------------------------
   Kickers (section labels)
   -------------------------------------------------------------------------- */
.cf-kicker {
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--cf-teal);
    font-weight: 700;
    text-transform: uppercase;
}

.cf-kicker--sm { font-size: 11px; letter-spacing: 0.14em; }

/* --------------------------------------------------------------------------
   Homepage — hero
   -------------------------------------------------------------------------- */
.cf-hero {
    position: relative;
    margin: 0 44px;
    display: block;
    color: inherit;
    text-decoration: none;
}

.cf-hero > img {
    width: 100%;
    height: 470px;
    object-fit: cover;
    display: block;
}

.cf-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(244,248,249,0) 34%, rgba(244,248,249,0.62) 64%, rgba(244,248,249,0.96) 100%);
    opacity: 0.9;
}

.cf-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 38px 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
}

.cf-hero-text h1 {
    font-family: var(--cf-serif);
    font-size: clamp(34px, 4.7vw, 60px);
    font-weight: 800;
    line-height: 1.0;
    margin: 0;
    letter-spacing: -0.018em;
    color: var(--cf-ink-deep);
}

.cf-hero-text .cf-dek {
    font-family: var(--cf-serif);
    font-style: italic;
    font-size: 21px;
    line-height: 1.4;
    color: var(--cf-slate);
    margin: 0;
    max-width: 600px;
}

.cf-meta {
    font-size: 13px;
    color: var(--cf-muted);
    font-weight: 500;
}

.cf-meta b { color: var(--cf-ink); }

/* --------------------------------------------------------------------------
   Homepage — secondary lead row
   -------------------------------------------------------------------------- */
.cf-secondary {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 44px;
    padding: 36px 44px 32px;
    border-bottom: 1px solid var(--cf-rule);
}

.cf-secondary a { color: inherit; text-decoration: none; }

.cf-secondary-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-secondary-main h2 {
    font-family: var(--cf-serif);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.01em;
}

.cf-secondary-main p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--cf-slate);
    margin: 0;
    max-width: 560px;
}

.cf-secondary-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid var(--cf-rule);
    padding-left: 36px;
}

.cf-secondary-side h3 {
    font-family: var(--cf-serif);
    font-size: 25px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.18;
    margin: 0;
}

.cf-secondary-side p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--cf-slate);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Card grids (homepage "more" + article "read next")
   -------------------------------------------------------------------------- */
.cf-section-label { padding: 26px 44px 0; }

.cf-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 20px 44px 40px;
}

.cf-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.cf-card > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.cf-card-tile {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--cf-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cf-card-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.cf-card h3 {
    font-family: var(--cf-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.cf-card p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cf-slate);
    margin: 0;
}

.cf-card .cf-meta { font-size: 12.5px; }

.cf-card:hover h3 { color: var(--cf-teal); }

/* --------------------------------------------------------------------------
   Article pages
   -------------------------------------------------------------------------- */
.cf-article-head {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 44px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.cf-article-head h1 {
    font-family: var(--cf-serif);
    font-size: clamp(32px, 4.6vw, 58px);
    font-weight: 800;
    line-height: 1.02;
    margin: 0;
    letter-spacing: -0.018em;
    color: var(--cf-ink-deep);
}

.cf-article-head .cf-dek {
    font-family: var(--cf-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--cf-slate);
    margin: 0;
}

.cf-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 6px;
}

.cf-byline img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.cf-byline-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.cf-byline-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cf-ink);
}

.cf-byline-date {
    font-size: 12.5px;
    color: var(--cf-muted);
}

/* Hero art */
.cf-hero-figure {
    max-width: 980px;
    margin: 40px auto 0;
    padding: 0 44px;
}

.cf-hero-figure img {
    width: 100%;
    display: block;
}

.cf-hero-figure--portrait { max-width: 460px; }

.cf-hero-figure figcaption {
    font-size: 12.5px;
    color: var(--cf-muted);
    padding-top: 10px;
    text-align: center;
    font-style: normal;
}

/* Body copy */
.cf-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 44px 44px 24px;
    font-family: var(--cf-serif);
    font-size: 19px;
    line-height: 1.75;
    color: var(--cf-body-ink);
}

.cf-body p { margin: 0 0 26px; }

.cf-body > p:first-of-type::first-letter {
    font-family: var(--cf-serif);
    font-size: 74px;
    font-weight: 700;
    line-height: 0.78;
    float: left;
    padding: 8px 12px 0 0;
    color: var(--cf-teal);
}

.cf-body a {
    color: var(--cf-teal);
    text-decoration: underline;
    text-decoration-color: var(--cf-teal-soft);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}

.cf-body a:visited { color: var(--cf-teal); }

.cf-body a:hover { text-decoration-color: var(--cf-teal); }

.cf-body h2 {
    font-family: var(--cf-serif);
    font-size: 30px;
    font-weight: 700;
    margin: 44px 0 18px;
    color: var(--cf-ink-deep);
    letter-spacing: -0.01em;
    border: none;
    padding: 0;
}

.cf-body ul, .cf-body ol { margin: 0 0 26px; padding-left: 28px; }

.cf-body li { margin: 8px 0; }

.cf-body figure { margin: 0 0 26px; }

.cf-body figcaption {
    font-size: 13px;
    color: var(--cf-muted);
    text-align: center;
    padding-top: 8px;
    font-family: var(--cf-sans);
    font-style: normal;
    line-height: 1.5;
}

.cf-body blockquote {
    margin: 0 0 26px;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--cf-teal);
    font-style: italic;
    color: var(--cf-slate);
}

/* Editorial corrections / notes */
.cf-note {
    font-family: var(--cf-sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cf-muted);
    border-left: 3px solid var(--cf-rule-strong);
    padding: 10px 0 10px 18px;
}

/* End mark + author card */
.cf-endmatter {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 44px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cf-endmark {
    display: flex;
    justify-content: center;
}

.cf-endmark span {
    width: 8px;
    height: 8px;
    background: var(--cf-teal);
    transform: rotate(45deg);
}

.cf-author-card {
    background: var(--cf-panel);
    padding: 24px 28px;
    display: flex;
    gap: 18px;
    align-items: center;
}

.cf-author-card img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cf-author-card > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cf-author-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cf-ink);
}

.cf-author-bio {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cf-slate);
}

/* Read next */
.cf-readnext { border-top: 1px solid var(--cf-rule); }

.cf-readnext .cf-kicker { padding: 30px 44px 0; }

.cf-readnext .cf-cards { padding: 18px 44px 40px; }

.cf-readnext .cf-card h3 { font-size: 20px; line-height: 1.22; }

/* --------------------------------------------------------------------------
   Archive page (articles.html)
   -------------------------------------------------------------------------- */
.cf-page-head {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 44px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.cf-page-head h1 {
    font-family: var(--cf-serif);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0;
    color: var(--cf-ink-deep);
}

.cf-archive {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 44px 48px;
    width: 100%;
}

.cf-archive-item {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--cf-rule);
    color: inherit;
    text-decoration: none;
    align-items: center;
}

.cf-archive-item:last-child { border-bottom: none; }

.cf-archive-item > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.cf-archive-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cf-archive-text h2 {
    font-family: var(--cf-serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--cf-ink-deep);
}

.cf-archive-item:hover h2 { color: var(--cf-teal); }

.cf-archive-text p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cf-slate);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Simple prose pages (about, contact)
   -------------------------------------------------------------------------- */
.cf-prose {
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 44px 56px;
    width: 100%;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--cf-slate);
}

.cf-prose h2 {
    font-family: var(--cf-serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--cf-ink-deep);
    margin: 36px 0 14px;
}

.cf-prose a {
    color: var(--cf-teal);
    text-decoration: underline;
    text-decoration-color: var(--cf-teal-soft);
    text-underline-offset: 3px;
}

.cf-panel-box {
    background: var(--cf-panel);
    border: 1px solid var(--cf-rule-strong);
    padding: 24px 28px;
    margin: 18px 0;
}

.cf-panel-box p { margin: 0 0 12px; }

.cf-panel-box p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.cf-footer {
    background: var(--cf-panel);
    border-top: 1px solid var(--cf-rule-strong);
    padding: 24px 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
}

.cf-footer-authors {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cf-avatars { display: flex; }

.cf-avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cf-paper);
}

.cf-avatars img + img { margin-left: -10px; }

.cf-footer span { font-size: 12.5px; color: var(--cf-muted); }

.cf-footer b { color: var(--cf-ink); }

.cf-footer a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cf-teal);
    letter-spacing: 0.04em;
    text-decoration: none;
}

.cf-footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Charts (carried over for articles with Chart.js visualizations)
   -------------------------------------------------------------------------- */
.chart-section { margin: 0 0 26px; }

.chart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.chart-wrapper {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    height: 280px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--cf-rule);
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.chart-description {
    font-family: var(--cf-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cf-muted);
    margin-top: 10px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cf-teal);
    color: #ffffff;
    padding: 8px 16px;
    z-index: 2000;
}

.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .cf-utility { padding: 8px 22px; font-size: 10px; }

    .cf-masthead { padding: 18px 22px 16px; }

    .cf-logo { font-size: 26px; }

    .cf-nav { gap: 18px; }

    .cf-hero { margin: 0 22px; }

    .cf-hero > img { height: 360px; }

    .cf-hero-text { padding: 0 20px 24px; }

    .cf-secondary {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 22px 26px;
    }

    .cf-secondary-side {
        border-left: none;
        border-top: 1px solid var(--cf-rule);
        padding-left: 0;
        padding-top: 24px;
    }

    .cf-section-label { padding: 24px 22px 0; }

    .cf-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 18px 22px 32px;
    }

    .cf-article-head { padding: 40px 22px 0; }

    .cf-hero-figure { padding: 0 22px; margin-top: 30px; }

    .cf-body { padding: 36px 22px 18px; font-size: 17.5px; }

    .cf-endmatter { padding: 0 22px 40px; }

    .cf-readnext .cf-kicker { padding: 26px 22px 0; }

    .cf-readnext .cf-cards { padding: 16px 22px 32px; }

    .cf-archive { padding: 20px 22px 36px; }

    .cf-archive-item { grid-template-columns: 200px 1fr; gap: 18px; }

    .cf-archive-text h2 { font-size: 21px; }

    .cf-page-head { padding: 36px 22px 4px; }

    .cf-prose { padding: 22px 22px 44px; }

    .cf-footer { padding: 20px 22px; }
}

@media (max-width: 620px) {
    .cf-utility { letter-spacing: 0.1em; }

    .cf-utility-date { display: none; }

    .cf-masthead { flex-direction: column; align-items: flex-start; gap: 10px; }

    .cf-nav { gap: 14px; font-size: 12px; }

    .cf-hero { margin: 0 14px; }

    .cf-hero > img { height: 300px; }

    .cf-hero-text .cf-dek { font-size: 17px; }

    .cf-secondary { padding: 24px 14px 22px; }

    .cf-secondary-main h2 { font-size: 27px; }

    .cf-section-label { padding: 20px 14px 0; }

    .cf-cards { grid-template-columns: 1fr; padding: 16px 14px 28px; }

    .cf-article-head { padding: 32px 14px 0; gap: 14px; }

    .cf-article-head .cf-dek { font-size: 18px; }

    .cf-hero-figure { padding: 0 14px; margin-top: 24px; }

    .cf-body { padding: 28px 14px 14px; font-size: 17px; line-height: 1.7; }

    .cf-body > p:first-of-type::first-letter { font-size: 58px; padding: 7px 9px 0 0; }

    .cf-body h2 { font-size: 24px; margin-top: 34px; }

    .cf-endmatter { padding: 0 14px 32px; }

    .cf-readnext .cf-kicker { padding: 22px 14px 0; }

    .cf-readnext .cf-cards { padding: 14px 14px 28px; }

    .cf-archive-item { grid-template-columns: 1fr; gap: 12px; }

    .cf-archive { padding: 14px 14px 28px; }

    .cf-prose { padding: 18px 14px 36px; }

    .cf-footer { flex-direction: column; align-items: flex-start; }

    .chart-wrapper { max-width: 100%; height: 220px; }
}