/* ==========================================================================
   aswritten.ai — SIC Brand Overrides for Keel
   Loaded on every page via default.hbs. Color/font tokens are defined in
   default.hbs <style> block; landing-specific styles live in landing.css.
   ========================================================================== */

/* --- Avenue X (display) — Avenue Mono is loaded in global.css --- */
@font-face {
    font-family: 'Avenue X';
    src: url('../fonts/Avenue X.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Architectural / layout tokens (extending the --sic-* set in default.hbs) --- */
:root {
    --border:      rgba(27,27,27,0.12);
    --rule:        rgba(27,27,27,0.18);
    --guide:       rgba(27,27,27,0.08);
    --mark:        rgba(27,27,27,0.08);
    --muted:       rgba(27,27,27,0.6);
    --gold-tint:   rgba(205, 163, 73, 0.05);
    --gold-target: rgba(205, 163, 73, 0.13);
}

/* --- Typography role mapping --- */

/* Headings: Avenue X (display) */
.heading-1, .heading-2,
h1, h2, h3, h4 {
    font-family: var(--font1), Georgia, serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Small headings / labels: Source Code Pro */
h5, h6 {
    font-family: var(--font-code);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Body text: Source Serif 4 */
body, html,
p, .paragraph,
li, td, th, figcaption,
.post-content {
    font-family: var(--font2), Georgia, serif;
}

/* UI elements: Source Sans 3 */
.button, button,
.kg-btn, .kg-cta-button, .kg-header-card-button,
input, small,
.section-info,
.post-number,
nav, .navbar,
.footer-normal,
.form-alert {
    font-family: var(--font-ui);
}

/* Code blocks */
code, kbd, samp, pre {
    font-family: var(--font-code);
}

/* --- Wordmark — ASWRITTEN[AI] in Avenue X with bracketed superscript --- */
.wordmark {
    font-family: var(--font1), Georgia, serif;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    display: inline-block;
    color: var(--sic-ink);
}
.wordmark sup {
    vertical-align: baseline;
    font-size: 0.42em;
    line-height: 1;
    position: relative;
    top: -1.9em;
    letter-spacing: 0.02em;
    margin-left: 1px;
    font-weight: 400;
}

/* --- Color accents --- */

/* Links use SIC blue */
.post-content a {
    color: var(--sic-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.post-content a:hover {
    opacity: 0.8;
}

/* Blockquotes: gold left border (expertise-adjacent rail per brand bible) */
.post-content blockquote {
    border-left: 4px solid var(--sic-gold);
    padding-left: 1.25em;
    font-style: italic;
    color: var(--sic-ink);
    background: var(--gold-tint);
}

/* Inline code */
.post-content code:not(pre code) {
    font-family: var(--font-code);
    background: color-mix(in srgb, var(--text-color), transparent 94%);
    border-radius: 0.28em;
    padding: 0.15em 0.35em;
}

/* Code blocks */
.post-content pre {
    border-radius: 0.6em;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--text-color), transparent 92%);
}

/* --- Ghost card overrides --- */

/* Callout cards: terracotta accent */
.kg-callout-card {
    border-left: 4px solid var(--sic-terr);
}

/* Toggle cards */
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-heading svg path {
    fill: var(--sic-terr);
}

/* Bookmark cards */
.kg-bookmark-container {
    border-color: color-mix(in srgb, var(--text-color), transparent 85%);
}

/* --- Lists: en-dash bullets like the deck --- */
.post-content ul {
    list-style: none;
    padding-left: 0;
}

.post-content ul > li {
    position: relative;
    padding-left: 1.25em;
}

.post-content ul > li::before {
    content: "\2013";
    position: absolute;
    left: 0;
    width: 1.25em;
    font-family: var(--font1), Georgia, serif;
    opacity: 0.85;
}

/* Ordered list markers in Avenue X */
.post-content ol > li::marker {
    font-family: var(--font1), Georgia, serif;
}

/* --- Hairline / shadow tokens (from SIC system) --- */
.post-content hr {
    border: none;
    height: 1px;
    background-color: color-mix(in srgb, var(--text-color), transparent 85%);
}

/* --- Button accent: terracotta on hover --- */
.button:hover, .kg-btn:hover {
    background-color: var(--sic-terr);
    border-color: var(--sic-terr);
    color: var(--sic-paper);
}

/* ==========================================================================
   STAGE 3 — brand pass for non-landing templates
   (post, page, tag, author, archive, error-404, all-posts, etc.)
   These selectors target Keel's existing structure so we don't have to
   rewrite the templates — just override what reads off-brand.
   ========================================================================== */

/* --- Body always on brand paper, brand body font --- */
body {
    background: var(--sic-paper);
    color: var(--sic-ink);
    font-family: var(--font2), Georgia, serif;
    font-feature-settings: "tnum" 1;
}

/* --- Hide Keel's site-name marquee, menu, navbar, and footers ---
   We replace them with our own lp-header + lp-footer in the landing/post/
   tag/author templates. This blanket hide keeps the rest of Keel's
   stock pages from showing double chrome. */
.site-name,
.menu-wrapper,
.menu-overlay,
nav.navbar,
custom-footer,
.footer-creative-wrapper,
.footer-normal-wrapper { display: none !important; }

/* --- Post: the article body --- */

/* Heading scale inside post bodies — Keel's defaults are too tight */
.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 {
    font-family: var(--font1), Georgia, serif;
    color: var(--sic-ink);
    letter-spacing: 0;
    line-height: 1.18;
}
.post-content h1 { font-size: clamp(32px, 4.2vw, 52px); margin-top: 1.4em; margin-bottom: 0.4em; }
.post-content h2 { font-size: clamp(26px, 3vw, 34px);  margin-top: 1.6em; margin-bottom: 0.4em; }
.post-content h3 { font-size: clamp(20px, 2.2vw, 24px); margin-top: 1.4em; margin-bottom: 0.3em; }

/* Body paragraphs */
.post-content p {
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.65;
    color: var(--sic-ink);
    margin: 0 0 1.1em;
}

/* Lead paragraph (Ghost adds .kg-callout-card or the article header lead) */
.post-content > p:first-of-type {
    font-size: clamp(18px, 1.5vw, 21px);
    color: var(--sic-ink);
}

/* --- Post header (article title + meta) --- */
.post-header h1, .post-header .post-title,
.post-title {
    font-family: var(--font1), Georgia, serif;
    color: var(--sic-ink);
    letter-spacing: 0;
    line-height: 1.1;
}

/* --- Secondary hero (used on tag, archive, all-posts pages) --- */
.secondary-hero-title, .secondary-hero h1 {
    font-family: var(--font1), Georgia, serif;
    color: var(--sic-ink);
    letter-spacing: 0;
}
.secondary-hero-paragraph,
.secondary-hero p {
    font-family: var(--font2), Georgia, serif;
    color: var(--sic-stone);
}

/* --- Post cards (used in tag.hbs, author.hbs, archive, etc.) --- */
.post-card .post-card-title,
.post-card-title,
.post-card-normal .post-card-title {
    font-family: var(--font1), Georgia, serif;
    color: var(--sic-ink);
    letter-spacing: 0;
}
.post-card .excerpt,
.post-card .post-card-excerpt,
.post-card-excerpt {
    font-family: var(--font2), Georgia, serif;
    color: var(--sic-stone);
}
.post-card .post-card-meta,
.post-card-meta {
    font-family: var(--font-code);
    color: var(--sic-stone);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78em;
}

/* --- Author page --- */
.author-name, .author-section h1, .author-page h1 {
    font-family: var(--font1), Georgia, serif;
    color: var(--sic-ink);
    letter-spacing: 0;
}
.author-bio, .author-section .bio {
    font-family: var(--font2), Georgia, serif;
    color: var(--sic-ink);
}

/* --- Navbar --- */
.navbar a,
.navbar-link {
    font-family: var(--font-code);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sic-stone);
}
.navbar a:hover { color: var(--sic-ink); }

/* --- Footer (both Creative and Normal variants) --- */
.footer-logo-text,
.footer-normal-label {
    font-family: var(--font1), Georgia, serif;
    letter-spacing: 0;
    color: var(--sic-ink);
}
.footer-normal p,
.footer-creative p,
footer p {
    font-family: var(--font2), Georgia, serif;
    color: var(--sic-stone);
}

/* --- 404 --- */
.error-content h1 {
    font-family: var(--font1), Georgia, serif;
    color: var(--sic-ink);
}

/* --- Pagination --- */
.pagination a,
.pagination .nav-next, .pagination .nav-previous {
    font-family: var(--font-code);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sic-stone);
}
.pagination a:hover { color: var(--sic-ink); }

/* --- Subscribe / member forms (used in normal-footer) --- */
.subscribe-form input,
.subscribe-input {
    font-family: var(--font2), Georgia, serif;
    color: var(--sic-ink);
    background: transparent;
    border-bottom: 1px solid var(--border);
}
.subscribe-form input::placeholder {
    color: var(--sic-stone);
}

/* --- Tag list / archive --- */
.tag-name, .archive-tag-name {
    font-family: var(--font-code);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* ==========================================================================
   Inline citation marks + grounding carousel — shared across landing (.lp)
   and post pages (.post-content). Single source of truth so the two
   surfaces stay visually identical.
   ========================================================================== */

/* Inline sup markers in prose.
   The LP and the post body emit different HTML — on the LP the sup wraps
   the link (<sup class="cite"><a href="#fn-N">N</a></sup>); Ghost's
   content processor strips the class and inverts the nesting in posts
   (<a href="#fn-N"><sup>N</sup></a>). Selectors below cover both. */

/* Sup wrapper sizing — both structures */
.lp sup.cite,
.post-content a[href^="#fn-"] > sup {
    font-family: var(--font-code);
    font-size: 0.62em;
    vertical-align: super; line-height: 0;
    margin-left: 1px; font-weight: 500;
}

/* The link itself — dotted gold underline, ink color, no Ghost-blue */
.lp sup.cite a,
.post-content a[href^="#fn-"] {
    color: var(--sic-ink);
    text-decoration: none;
    border: none;
    border-bottom: 1px dotted var(--sic-gold);
    padding: 0 1px;
    text-decoration-thickness: 0;
}
.lp sup.cite a:hover,
.post-content a[href^="#fn-"]:hover {
    color: var(--sic-gold);
    border-bottom-color: var(--sic-ink);
    opacity: 1;  /* override .post-content a:hover { opacity: 0.8 } */
}

.post-content .uncommitted,
.lp .uncommitted {
    font-family: var(--font-code);
    font-size: 0.78em;
    color: var(--sic-red);
    font-style: italic;
    padding: 0 2px;
}

/* --- Human intro block at top of artifact posts --- */
.post-content .artifact-intro p {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: var(--sic-ink);
}
.post-content .artifact-intro .signed {
    font-family: var(--font2), Georgia, serif;
    color: var(--sic-stone);
    margin-top: 1.6em;
}
.post-content .addendum-label {
    font-family: var(--font-code);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin: 1.6em 0 0.6em;
}

/* --- Grounding container + label --- */
.post-content .grounding,
.lp .grounding {
    margin-top: 2.5em;
    padding-top: 22px;
    border-top: 1px dashed var(--rule);
}
.post-content .grounding-label,
.lp .grounding-label {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.post-content .grounding-label .carousel-pos,
.lp .grounding-label .carousel-pos {
    font-family: var(--font-code);
    color: var(--sic-stone);
    font-weight: 500;
    letter-spacing: 0.12em;
    margin-left: auto;
}
.post-content .grounding-label .carousel-pos .current,
.lp .grounding-label .carousel-pos .current {
    color: var(--sic-ink);
}

/* --- Carousel scroll container ---
   Full-viewport-width carousel: extends past the .lp container so that
   when a card is centered at the content-area edges, the NEXT card peeks
   from the viewport's right edge and the PREVIOUS card peeks from the
   viewport's left edge. Cards themselves are sized to the content-area
   width so each card sits exactly where the prose sits when snapped. */
.post-content .carousel,
.lp .carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* (no margin-right needed — width: 100vw forces the right extent) */

    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Scrollbar hidden — the prev/next buttons + scroll-snap are the
       affordances. A scrollbar competes with the architectural mark
       language. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;

    /* Snap targets align with content-area edges (not viewport edges) so
       cards land in the same column as the prose above the grounding. */
    scroll-padding-left: max(var(--landing-gutter, 56px), calc((100vw - var(--landing-max, 960px)) / 2 + var(--landing-gutter, 56px)));
    scroll-padding-right: max(var(--landing-gutter, 56px), calc((100vw - var(--landing-max, 960px)) / 2 + var(--landing-gutter, 56px)));
}
.post-content .carousel::-webkit-scrollbar,
.lp .carousel::-webkit-scrollbar { display: none; }
.post-content .carousel::-webkit-scrollbar,
.lp .carousel::-webkit-scrollbar { height: 8px; }
.post-content .carousel::-webkit-scrollbar-track,
.lp .carousel::-webkit-scrollbar-track { background: transparent; }
.post-content .carousel::-webkit-scrollbar-thumb,
.lp .carousel::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 4px;
}
.post-content .carousel-track,
.lp .carousel-track {
    display: flex;
    gap: 14px;
    align-items: stretch;
    /* Padding so the first card visually starts at the content-area's left
       edge at scrollLeft=0 — same x as the section H2 / prose above. */
    padding-left: max(var(--landing-gutter, 56px), calc((100vw - var(--landing-max, 960px)) / 2 + var(--landing-gutter, 56px)));
    padding-right: max(var(--landing-gutter, 56px), calc((100vw - var(--landing-max, 960px)) / 2 + var(--landing-gutter, 56px)));
}

/* --- Carousel controls (prev/next arrows below the active card) ---
   Desktop only. Two buttons: prev pinned left, next pinned right, both
   aligned to the content-area edges so they sit directly under the
   active card's left and right edges. */
.post-content .carousel-controls,
.lp .carousel-controls {
    display: none;
}
@media (min-width: 768px) {
    .post-content .carousel-controls,
    .lp .carousel-controls {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
    }
}
.post-content .carousel-controls button,
.lp .carousel-controls button {
    appearance: none;
    background: transparent;
    /* Circle and arrow at the same strength (stone), per review: the
       mark-color circle disappeared entirely, and circle-weaker-than-
       arrow read as mismatched. Both stone keeps the control quiet but
       findable. */
    border: 1px dashed var(--sic-stone);
    border-radius: 50%;
    color: var(--sic-stone);
    width: 38px; height: 38px;
    cursor: pointer;
    font-family: var(--font-code);
    font-size: 16px;
    /* inline-flex centers the arrow glyph both axes — line-height alone
       wasn't catching the arrow's optical baseline. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.post-content .carousel-controls button:hover:not([disabled]),
.lp .carousel-controls button:hover:not([disabled]) {
    background: var(--gold-tint);
    border-color: var(--sic-gold);
    color: var(--sic-ink);
}
.post-content .carousel-controls button[disabled],
.lp .carousel-controls button[disabled] {
    opacity: 0.4; cursor: not-allowed;
}

/* --- Citation card (.fn) --- */
.post-content .fn,
.lp .fn {
    /* Card width = .lp content-area width on desktop/tablet so each card
       fills the column the prose sits in. The carousel's scroll-padding
       + track padding handle the bleed so the next/prev cards peek from
       the viewport edges. */
    flex: 0 0 calc(min(100vw, var(--landing-max, 960px)) - var(--landing-gutter, 56px) * 2);
    min-width: 0;
    max-width: 100%;
    display: grid;
    /* 36px num column so '↑ NN' (two-digit + arrow) fits on one line. */
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 14px 16px;
    /* Base look is the gold-rail active treatment — mobile uses this
       always (no ghosting), desktop active swaps in here too. Ghosted
       desktop swaps to the dashed-mark treatment via the media query
       below, so the card and its blockquote share the same drawing-
       mark vocabulary at rest. */
    border: 1px solid transparent;
    border-left: 3px solid var(--sic-gold);
    margin-left: -2px;
    background: var(--gold-tint);
    scroll-snap-align: start;
    scroll-margin-top: 24px;
    transition: background 120ms ease, border-color 120ms ease, opacity 220ms ease;
}
.post-content .fn:target,
.lp .fn:target {
    background: var(--gold-target);
    border-left-width: 5px;
    /* Inset 1px gold ring on the three non-left edges (the left already has
       the 5px gold rail). Inset shadows are drawn inside the card border
       and can't be clipped by the carousel's overflow-x — which matters
       most when the LAST card snaps flush at the carousel's right edge. */
    box-shadow: inset 0 0 0 1px var(--sic-gold);
}

@media (max-width: 767px) {
    .post-content .fn,
    .lp .fn {
        /* Mobile: card slightly narrower than content area so the right
           peek is visibly larger than just the .lp gutter (20px would be
           too tight). 24px shave gives ~38px of peek (gap + shave). */
        flex: 0 0 calc(100vw - var(--landing-gutter, 20px) * 2 - 24px);
        grid-template-columns: 22px 1fr;
        gap: 10px;
        padding: 12px 14px;
    }
}

/* Last card snaps to the END so its right edge lands at the content-area
   right (same x as the section borders), giving the previous card a
   natural peek on the left. */
.post-content .fn:last-child,
.lp .fn:last-child {
    scroll-snap-align: end;
}

/* --- Ghosting non-active cards (desktop only) ---
   Cards in a carousel render faded except the one snapped / targeted.
   JS in citation-carousel.js toggles .is-active on the most-visible
   card via IntersectionObserver.

   The ghosted card swaps its gold-rail look for a dashed-mark outline
   to share the drawing-mark vocabulary with the blockquote and the
   architectural shapes — when the card is dimmed, it reads as a
   technical drawing element. Active cards reclaim the gold. */
@media (min-width: 768px) {
    .post-content .fn:not(.is-active):not(:target),
    .lp .fn:not(.is-active):not(:target) {
        opacity: 1;
        border: 1px dashed var(--mark);
        margin-left: 0px;
        background: transparent;
        box-shadow: none;
    }
    /* Hover on a ghosted card strengthens color only — same 1px dashed
       geometry, so neither this card's text nor the following cards move.
       (The old rule dropped the ghost treatment on hover, which swapped
       border-left 1px->3px and margin-left 0->-2px and shoved the whole
       row sideways.) */
    .post-content .fn:not(.is-active):not(:target):hover,
    .lp .fn:not(.is-active):not(:target):hover {
        border-color: var(--sic-stone);
        background: var(--gold-tint);
    }
}

/* --- Card contents (smaller than before per spec) --- */
.post-content .fn-num,
.lp .fn-num {
    font-family: var(--font-code);
    font-size: 11px;
    color: var(--sic-ink);
    font-weight: 600;
    padding-top: 1px;
    white-space: nowrap;
}
.post-content .fn-num a,
.lp .fn-num a {
    color: inherit; text-decoration: none; border: none;
    display: inline-block; padding: 0 2px;
}
.post-content .fn-num a:hover,
.lp .fn-num a:hover { color: var(--sic-gold); }
.post-content .fn-num a::before,
.lp .fn-num a::before {
    content: '↑ ';
    color: var(--sic-stone);
    font-size: 0.85em;
    opacity: 0.5;
}
.post-content .fn-body,
.lp .fn-body {
    font-family: var(--font2), Georgia, serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--sic-ink);
    min-width: 0;
}
.post-content .fn-quote,
.lp .fn-quote {
    font-family: var(--font2), Georgia, serif;
    font-style: italic;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sic-ink);
    /* Dashed outline (no background) — same drawing-mark vocabulary as
       the architectural shapes and the carousel buttons. The box escapes
       leftward to the citation number column's left edge. Padding-left
       = half the .lp gutter (28px desktop / 16px tablet / 10px mobile)
       so the text sits in from the dashed edge by an architectural
       interval rather than the full body-column offset. */
    margin: 8px 0 8px calc(var(--landing-gutter, 56px) / -4);
    padding: 6px 12px 6px calc(var(--landing-gutter, 56px) / 4);
    border: 1px dashed var(--mark);
    background: transparent;
}
@media (max-width: 767px) {
    /* Mobile .fn uses 22px num col + 10px gap = 32px escape to number column. */
    .post-content .fn-quote,
    .lp .fn-quote {
        margin-left: -32px;
    }
}
/* No ::before / ::after curly quotes — the cite tool's narrative bakes
   straight-quote characters into the quoted text already; adding CSS
   quotes here would double them ("…" becomes ""…""). */
.post-content .fn-narrative,
.lp .fn-narrative { margin: 0; color: var(--sic-ink); }
.post-content .fn-para,
.lp .fn-para { display: block; margin: 0 0 5px; }
.post-content .fn-meta,
.lp .fn-meta {
    display: block;
    margin-top: 10px;
    font-family: var(--font-code);
    font-size: 9px;
    color: var(--sic-stone);
    letter-spacing: 0.04em;
    line-height: 1.55;
}
.post-content .fn-meta .src,
.lp .fn-meta .src { color: var(--sic-ink); }
.post-content .fn-meta .who,
.lp .fn-meta .who { color: var(--sic-stone); }
.post-content .fn-meta .conv,
.lp .fn-meta .conv { font-style: italic; color: var(--sic-stone); }
.post-content .fn-meta .rel-list,
.lp .fn-meta .rel-list { display: block; margin-top: 3px; }
.post-content .fn-meta .rel-chip,
.lp .fn-meta .rel-chip {
    display: inline-block;
    background: rgba(27,27,27,0.04);
    padding: 1px 5px;
    margin: 0 3px 2px 0;
    border-radius: 2px;
    color: var(--sic-ink);
}

/* --- Grounding closing meta line (post-content only) --- */
.post-content .grounding-meta {
    font-family: var(--font-code);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sic-stone);
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--rule);
}

/* --- Print --- */
@media print {
    body { background: white !important; color: black !important; }
}