/* ===========================================================================
   ORIGIN INSIGHTS — Theme overlay
   ---------------------------------------------------------------------------
   This stylesheet is loaded AFTER the Source-derived screen.css. It:
     1. Declares the full Origin design-token set at :root
     2. Re-maps Source's internal CSS variables onto Origin tokens
     3. Applies editorial-specific treatments (serif body, sparing green
        accents, tighter rhythm) that can't be achieved with variables alone.

   Editing note: prefer changing a token in section 1 over writing new rules
   further down. The theme is designed so 90% of future brand tweaks can be
   made by adjusting tokens in this single file.
   =========================================================================== */


/* ===========================================================================
   1. ORIGIN DESIGN TOKENS (ported from Claude Design export)
   =========================================================================== */

:root {

    /* ── Font families ─────────────────────────────────────────────────── */
    --origin-font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --origin-font-body:    'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --origin-font-ui:      system-ui, -apple-system, 'Segoe UI', sans-serif;
    --origin-font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    /* ── Font weights ──────────────────────────────────────────────────── */
    --origin-fw-light:     300;
    --origin-fw-regular:   400;
    --origin-fw-medium:    500;
    --origin-fw-semibold:  600;
    --origin-fw-bold:      700;

    /* ── Letter tracking ───────────────────────────────────────────────── */
    --origin-tracking-tight:     -0.01em;
    --origin-tracking-normal:     0;
    --origin-tracking-overline:   0.14em;
    --origin-tracking-wordmark:   0.22em;

    /* ── Brand — ink navy ──────────────────────────────────────────────── */
    --origin-ink:         #04192A;
    --origin-ink-2:       #20364B;
    --origin-ink-3:       #426B94;

    /* ── Brand — paper (surfaces) ──────────────────────────────────────── */
    --origin-paper:       #FBF9F8;
    --origin-paper-pure:  #FFFFFF;

    /* ── Brand — accents ───────────────────────────────────────────────── */
    --origin-green:       #43BE9C;
    --origin-green-hover: #37AA8C;
    --origin-green-soft:  #E4F5EF;

    --origin-amber:       #E99B00;
    --origin-blue:        #0057A7;
    --origin-red:         #E45B5B;

    /* ── Neutrals — warm grey scale tuned to paper ─────────────────────── */
    --origin-grey-50:     #F4F1EF;
    --origin-grey-100:    #E8E4E1;
    --origin-grey-200:    #D6D0CB;
    --origin-grey-300:    #A3AAB1;
    --origin-grey-400:    #7A828B;
    --origin-grey-500:    #4E565F;
    --origin-grey-600:    #2E363E;

    /* ── Semantic text aliases ─────────────────────────────────────────── */
    --origin-text-primary:        var(--origin-ink-2);
    --origin-text-primary-strong: var(--origin-ink);
    --origin-text-secondary:      var(--origin-grey-500);
    --origin-text-tertiary:       var(--origin-grey-400);
    --origin-text-muted:          var(--origin-grey-300);
    --origin-text-on-dark:        var(--origin-paper);
    --origin-text-link:           var(--origin-ink);
    --origin-text-link-hover:     var(--origin-green-hover);

    /* ── Borders ───────────────────────────────────────────────────────── */
    --origin-border-subtle:  rgba(4, 25, 42, 0.06);
    --origin-border-default: rgba(4, 25, 42, 0.10);
    --origin-border-strong:  rgba(4, 25, 42, 0.18);

    /* ── Focus / accent ────────────────────────────────────────────────── */
    --origin-focus-ring: 0 0 0 3px rgba(67, 190, 156, 0.28);
}


/* ===========================================================================
   2. REMAP SOURCE VARIABLES ONTO ORIGIN TOKENS
   ---------------------------------------------------------------------------
   Source's screen.css references a handful of CSS variables throughout.
   Overriding them here cascades our branding to every component Source ships.
   =========================================================================== */

:root {
    /* Fonts — Source expects three named families */
    --font-sans:       var(--origin-font-ui);
    --font-serif:      var(--origin-font-body);
    --font-serif-alt:  var(--origin-font-body);
    --font-mono:       var(--origin-font-mono);

    /* Ghost-editor font overrides (Portal / Members / admin-driven) */
    --gh-font-heading: var(--origin-font-display);
    --gh-font-body:    var(--origin-font-body);

    /* Colour system Source uses — map onto Origin tokens */
    --color-darker-gray:    var(--origin-ink);
    --color-dark-gray:      var(--origin-grey-500);
    --color-mid-gray:       var(--origin-grey-300);
    --color-light-gray:     var(--origin-grey-100);
    --color-lighter-gray:   rgba(4, 25, 42, 0.04);
    --color-primary-text:   var(--origin-text-primary);
    --color-secondary-text: var(--origin-text-secondary);
    --color-border:         var(--origin-border-default);
    --color-dark-border:    var(--origin-border-strong);

    /* Layout — widen the reading column a little for long-form insight pieces */
    --container-width: 1280px;
    --content-width:   720px;
}


/* ===========================================================================
   3. EDITORIAL OVERRIDES
   ---------------------------------------------------------------------------
   These are the rules that go beyond simple token-swapping and give the
   site its distinctly editorial (rather than product-y) character.
   =========================================================================== */

/* 3.1  Globals — paper surface, ink text, serif body by default */

body {
    background-color: var(--origin-paper);
    color: var(--origin-text-primary);
    font-family: var(--origin-font-body);
    font-size: 1.7rem;
    font-weight: var(--origin-fw-regular);
    line-height: 1.6;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings use Montserrat SemiBold — the signature Origin display voice */
h1, h2, h3, h4, h5, h6,
.gh-article-title,
.gh-card-title,
.gh-header-title,
.gh-about-title,
.gh-footer-signup-header,
.gh-container-title,
.gh-featured-title,
.gh-sidebar-title,
.gh-cta-title,
.gh-navigation-logo,
.gh-footer-logo,
.gh-more {
    font-family: var(--origin-font-display);
    color: var(--origin-text-primary-strong);
    font-weight: var(--origin-fw-semibold);
    letter-spacing: var(--origin-tracking-tight);
}

/* Overline-style section labels (CONTAINER TITLE, SIDEBAR, FEATURED, etc.) */
.gh-container-title,
.gh-sidebar-title,
.gh-featured-title {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    font-size: 1.1rem;
    letter-spacing: var(--origin-tracking-overline);
    text-transform: uppercase;
    color: var(--origin-text-primary-strong);
    border-bottom-color: var(--origin-border-default);
}


/* 3.2  Navigation — wordmark treatment, subtle hairline */

.gh-navigation {
    background-color: var(--origin-paper);
    color: var(--origin-text-primary-strong);
    border-bottom: 1px solid var(--origin-border-subtle);
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-medium);
    font-size: 1.4rem;
    letter-spacing: var(--origin-tracking-tight);
}

.gh-navigation-logo {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    font-size: 1.8rem;
    letter-spacing: var(--origin-tracking-wordmark);
    text-transform: uppercase;
    color: var(--origin-text-primary-strong);
}

.gh-navigation .nav a {
    color: var(--origin-text-primary);
}

.gh-navigation .nav a:hover {
    opacity: 1;
    color: var(--origin-green-hover);
}


/* 3.3  Links — navy text, green on hover, sparing use throughout */

a {
    color: var(--origin-text-link);
    transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
    opacity: 1;
    color: var(--origin-text-link-hover);
}

/* Long-form body links get a restrained underline + green on hover */
.gh-content a {
    color: var(--origin-text-primary-strong);
    text-decoration: underline;
    text-decoration-color: var(--origin-border-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.gh-content a:hover {
    color: var(--origin-green-hover);
    text-decoration-color: var(--origin-green-hover);
}


/* 3.4  Buttons — flatter, squarer, more editorial than Source's pill default */

.gh-button {
    background-color: var(--origin-ink);
    color: var(--origin-paper);
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    border-radius: 2px;
    padding: 0.9em 1.6em;
    transition: background-color 0.15s ease;
}

.gh-button:hover {
    opacity: 1;
    background-color: var(--origin-ink-2);
}


/* 3.5  Search / subscribe form — square the inputs to match button style */

.gh-form,
.gh-form-input {
    border-radius: 2px;
}

.gh-form {
    background-color: var(--origin-grey-50);
}

.gh-form:hover {
    background-color: var(--origin-grey-100);
}


/* 3.6  Article — proper editorial typography */

.gh-article-title {
    font-weight: var(--origin-fw-semibold);
    letter-spacing: -0.018em;
    line-height: 1.1;
}

.gh-article-tag {
    color: var(--origin-green);
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    font-size: 1.15rem;
    letter-spacing: var(--origin-tracking-overline);
}

.gh-article-excerpt {
    font-family: var(--origin-font-body);
    font-style: italic;
    color: var(--origin-text-secondary);
    letter-spacing: -0.005em;
}

.gh-article-author-name {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
}

.gh-article-meta-content {
    font-family: var(--origin-font-ui);
    color: var(--origin-text-tertiary);
}

/* Green hairline under the article byline — the one place the accent is
   really visible on a post. Purposefully small, purposefully Origin-coloured. */
.gh-article-header {
    position: relative;
    padding-bottom: 32px;
}

.gh-article-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 2px;
    background-color: var(--origin-green);
}


/* 3.7  Post content — serif body, editorial rhythm */

.gh-content {
    font-family: var(--origin-font-body);
    font-size: 1.9rem;
    line-height: 1.65;
    letter-spacing: -0.005em;
    color: var(--origin-text-primary);
}

.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4 {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    color: var(--origin-text-primary-strong);
    letter-spacing: var(--origin-tracking-tight);
}

.gh-content h2 { font-size: 1.55em; margin-top: 1.6em; }
.gh-content h3 { font-size: 1.2em;  margin-top: 1.4em; }

.gh-content blockquote:not([class]) {
    border-left: 3px solid var(--origin-green);
    padding-left: 1.4em;
    font-style: italic;
    color: var(--origin-text-primary-strong);
}

/* Drop-cap — if enabled via theme settings, use the display face */
.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    color: var(--origin-text-primary-strong);
}


/* 3.8  Post list / card feed — quiet, hairline dividers, Montserrat titles */

.gh-card-title {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--origin-text-primary-strong);
}

.gh-card-excerpt {
    font-family: var(--origin-font-body);
    font-size: 1.55rem;
    color: var(--origin-text-secondary);
    letter-spacing: -0.002em;
}

.gh-card-meta,
.gh-card-tag {
    font-family: var(--origin-font-ui);
    color: var(--origin-text-tertiary);
    letter-spacing: 0;
}

.gh-card-tag {
    color: var(--origin-green);
    font-weight: var(--origin-fw-semibold);
    font-size: 1.15rem;
    letter-spacing: var(--origin-tracking-overline);
    text-transform: uppercase;
}


/* 3.9  Sidebar CTA — subtle, not shouty */

.gh-about {
    background-color: var(--origin-grey-50);
    border-top: 2px solid var(--origin-green);
}

.gh-cta-inner {
    background-color: var(--origin-grey-50);
}


/* 3.10  Footer — ink panel, paper text */

.gh-footer {
    color: var(--origin-text-primary);
}

.gh-footer-bar {
    border-block-color: var(--origin-border-subtle);
}

.gh-footer-signup-header {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    letter-spacing: var(--origin-tracking-tight);
    color: var(--origin-text-primary-strong);
}

.gh-footer-signup-subhead {
    font-family: var(--origin-font-body);
    color: var(--origin-text-secondary);
    opacity: 1;
}

.gh-footer-logo {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    letter-spacing: var(--origin-tracking-wordmark);
    text-transform: uppercase;
    font-size: 1.8rem;
}


/* 3.11  Focus states — use the Origin green focus ring for accessibility */

:is(a, button, input, .gh-button):focus-visible {
    outline: none;
    box-shadow: var(--origin-focus-ring);
}


/* 3.12  Code blocks — small, restrained */

.gh-content pre {
    background: var(--origin-grey-50);
    border: 1px solid var(--origin-border-subtle);
    border-radius: 4px;
    font-size: 1.45rem;
}

.gh-content :not(pre) > code {
    background: var(--origin-grey-50);
    border: 1px solid var(--origin-border-subtle);
}


/* 3.13  Tables inside content — financial-reporting feel */

.gh-content .gh-table table th {
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    font-size: 1.1rem;
    color: var(--origin-text-primary-strong);
    letter-spacing: var(--origin-tracking-overline);
    text-transform: uppercase;
    border-bottom: 2px solid var(--origin-border-strong);
}

.gh-content .gh-table table td {
    font-family: var(--origin-font-ui);
    font-size: 1.5rem;
    color: var(--origin-text-primary);
}


/* 3.14  Selection — tinted with the Origin green */

::selection {
    background-color: var(--origin-green-soft);
    color: var(--origin-text-primary-strong);
}


/* ===========================================================================
   4. v0.2 EDITORIAL REFINEMENTS
   ---------------------------------------------------------------------------
   Addresses feedback from the first render:
     • Hero goes serif (the biggest visual change)
     • Eyebrow label framing above hero
     • Tighter hero rhythm, looser footer rhythm
     • Featured lead treatment for the first post in the list
     • Accent green appears once on the homepage (LATEST hairline)
     • Nav Subscribe becomes an outline button
     • Subscribe input pure white
   =========================================================================== */

/* 4.1  Hero — serif lede, not sans */

.gh-header.is-classic {
    padding-block: 112px 72px;  /* tighter than Source's 160px/160px */
}

.gh-header.is-classic .gh-header-inner {
    gap: 36px;                  /* was 48px — brings form closer to headline */
    max-width: 980px;
}

.gh-header.is-classic .gh-header-title {
    font-family: var(--origin-font-body);
    font-weight: var(--origin-fw-regular);   /* Source Serif 4 at 400 */
    font-style: normal;
    font-size: clamp(3.6rem, 2.2vw + 2.8rem, 5.6rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--origin-text-primary-strong);
    text-wrap: balance;
}


/* 4.2  Eyebrow label above the hero */

.gh-header-eyebrow {
    display: inline-block;
    margin: 0;
    padding: 0 0 4px;
    font-family: var(--origin-font-display);
    font-weight: var(--origin-fw-semibold);
    font-size: 1.1rem;
    letter-spacing: var(--origin-tracking-overline);
    text-transform: uppercase;
    color: var(--origin-text-primary-strong);
    border-bottom: 2px solid var(--origin-green);
}


/* 4.3  Nav Subscribe button — ghosted, so it doesn't out-shout the hero CTA */

.gh-navigation .gh-button {
    background-color: transparent;
    color: var(--origin-text-primary-strong);
    border: 1px solid var(--origin-border-strong);
    border-radius: 2px;
    padding: 0.7em 1.3em;
    font-size: 1.35rem;
}

.gh-navigation .gh-button:hover {
    background-color: var(--origin-ink);
    color: var(--origin-paper);
    border-color: var(--origin-ink);
}


/* 4.4  Hero and footer subscribe form — pure white input, not warm grey */

.gh-header .gh-form,
.gh-footer .gh-form {
    background-color: var(--origin-paper-pure);
    border: 1px solid var(--origin-border-default);
}

.gh-header .gh-form:hover,
.gh-footer .gh-form:hover {
    background-color: var(--origin-paper-pure);
    border-color: var(--origin-border-strong);
}

.gh-header .gh-form-input::placeholder,
.gh-footer .gh-form-input::placeholder {
    color: var(--origin-text-tertiary);
}


/* 4.5  LATEST label — green hairline above, slightly more room below */

.gh-container-title {
    position: relative;
    padding-top: 18px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--origin-border-subtle);
}

.gh-container-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--origin-green);
}


/* 4.6  Featured lead treatment — first post in the homepage list is bigger */

.home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-link {
    gap: 36px;
    padding-block: 8px 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--origin-border-subtle);
}

.home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-image {
    width: 360px;
    aspect-ratio: 1.618033;
}

.home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-title {
    font-size: clamp(2.4rem, 0.9vw + 2.1rem, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-excerpt {
    display: -webkit-box;
    margin-top: 12px;
    font-size: 1.7rem;
    line-height: 1.5;
    -webkit-line-clamp: 3;   /* was 2 — avoids truncating mid-word on the lead */
    -webkit-box-orient: vertical;
    color: var(--origin-text-secondary);
}

.home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-meta:not(:empty) {
    margin-top: 16px;
}

/* Reset the top-divider Source puts above every list card — the featured
   lead's bottom divider already visually separates it from the feed. */
.home-template .gh-container.is-list .gh-feed > .gh-card:first-child + .gh-card::before {
    display: none;
}

@media (max-width: 767px) {
    .home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-image {
        width: 100%;
    }
}


/* 4.7  Vertical rhythm — tighter top half, more generous bottom */

.gh-container {
    margin-top: 72px;
}

.gh-footer {
    margin-top: 10vw;    /* was 12vw */
    padding-top: 56px;   /* breathing room above footer bar */
}

.gh-footer-bar {
    margin-bottom: 64px; /* was 100px */
}

.gh-footer-signup {
    padding-bottom: 112px; /* was 160px */
}


/* 4.8  Hide the LATEST label when there's only one post in the feed.
   Keeps the homepage from looking empty-labelled during launch week. */

.home-template .gh-container:not(:has(.gh-card ~ .gh-card)) .gh-container-title {
    display: none;
}


/* ===========================================================================
   5. v0.3 REFINEMENTS
   ---------------------------------------------------------------------------
   Addresses the v0.2 render:
     • Featured lead excerpt — relax the line-clamp so it doesn't truncate
     • Featured lead image — shrink and cap height so it stops dominating
     • Homepage bottom rhythm — reduce dead space before the footer
     • Footer bar — keep the top hairline clear of the wordmark baseline
   =========================================================================== */

/* 5.1  Featured lead — let the excerpt breathe (override the v0.2 clamp) */

.home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-excerpt {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    max-width: 60ch;
}


/* 5.2  Featured lead image — smaller footprint, capped height so it never
   dwarfs the title + excerpt column next to it. */

.home-template .gh-container.is-list .gh-feed > .gh-card:first-child .gh-card-image {
    width: 300px;               /* was 360px */
    aspect-ratio: 3 / 2;         /* was 1.618 — shorter, so title leads */
    max-height: 220px;
}


/* 5.3  Bottom rhythm — kill the enormous vw-based footer margin that left
   a crater under the last post on a wide screen. Explicit px scales fine,
   and the featured lead's own bottom padding already creates separation. */

.gh-footer {
    margin-top: 80px;           /* was 10vw — ~144px on 1440 */
    padding-top: 40px;          /* was 56px */
}

.gh-footer-signup {
    padding-bottom: 80px;       /* was 112px — only kicks in when enabled */
}


/* 5.4  Footer bar — give the wordmark clearance from the top hairline.
   Source's default packs the logo straight into the 1px border; a serif/display
   wordmark needs a little breathing room either side of a baseline rule. */

.gh-footer-bar {
    padding-block: 36px;        /* was 28px */
    align-items: center;
}

.gh-footer-logo {
    line-height: 1;             /* kills the extra descender space */
}

.gh-footer-logo img {
    display: block;
    max-height: 36px;           /* was 40px — balances the new padding */
}


/* ===========================================================================
   6. v0.4 NAV REFINEMENTS
   ---------------------------------------------------------------------------
   The CTA is now "Join the mailing list" (~20 chars vs Source's 9-char
   "Subscribe"), and the nav no longer has a sibling text link. A few
   tweaks so the longer label sits naturally.
   =========================================================================== */

/* 6.1  Breathing room around the longer CTA */

.gh-navigation .gh-navigation-members .gh-button {
    padding: 0.7em 1.5em;       /* a touch more horizontal breathing room */
    white-space: nowrap;
}


/* 6.2  Drop the CTA to a secondary/linkish treatment on narrower widths
   so a 20-character label doesn't squeeze out primary nav items. */

@media (max-width: 991px) and (min-width: 768px) {
    .gh-navigation .gh-navigation-members .gh-button {
        padding: 0.5em 1em;
        font-size: 1.25rem;
    }
}