/* ===============================================================
   retrography.app v2 — CHALK edition
   Loaded AFTER styles.css. Converts the warm "paper" identity to the
   app's chalk-sketch design system: pure neutral black, chalk-white
   monochrome (no amber, no cyan), hand-sketched hero illustrations.
   The token override transforms every paper-mode page at once; the
   rest of this file styles the new sketch imagery.
   =============================================================== */

/* Shareit — hand-written display font for hero titles (free for commercial
   use, by Khurasan; self-hosted). Chalk handwriting to match the sketches. */
@font-face {
    font-family: "Shareit";
    src: url("../fonts/Shareit.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body.paper {
    --paper: #060607;                       /* pure neutral near-black */
    --paper-2: #121214;
    --ink: #F2F2F4;                         /* chalk white */
    --ink-2: rgba(242, 242, 244, 0.72);
    --ink-3: rgba(242, 242, 244, 0.44);
    --accent: #FFFFFF;                      /* monochrome: accent is bright chalk */
    --line: rgba(242, 242, 244, 0.12);
}

/* Base (non-paper) tokens for any page still on the editorial theme. */
:root {
    --label: #F2F2F4;                       /* kill the cyan — monochrome */
    --warm: #F2F2F4;
    --warm-soft: rgba(242, 242, 244, 0.10);
}

/* Film grain reads as chalk dust on pure black — keep it, slightly stronger. */
body.paper::after { opacity: 0.5; }

/* ── Sketch hero images ──────────────────────────────────────────
   Chalk-on-black artwork must sit frameless: no border, no card, no
   shadow — the black ground melts into the page (learned in-app). */
.sketch-hero {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    background: transparent;
}
.article-hero.sketch {
    margin: 6px 0 10px;
}
.article-hero.sketch img {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    max-width: min(100%, 720px);
    height: auto;   /* beat the HTML height attribute — keep 16:9 */
}

/* Homepage "Reading" cards get their story's chalk art on top. */
.read-card { overflow: hidden; }
.read-card-art {
    display: block;
    width: calc(100% + 44px);               /* bleed over the card padding */
    margin: -22px -22px 12px;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.92);
    transition: filter 0.25s ease, transform 0.25s ease;
}
.read-card:hover .read-card-art {
    filter: brightness(1.08);
    transform: scale(1.02);
}

/* Features page: full-width chalk banner under the page title. */
.sketch-banner {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;   /* beat the HTML height attribute — keep 16:9 */
    margin: 8px auto 26px;
}

/* Headline marker stroke: amber highlighter → faint chalk smear. */
.paper-lede-accent {
    background-image: linear-gradient(transparent 68%, rgba(242, 242, 244, 0.22) 68%);
}

/* Hero titles in the hand-written face. Script fonts need looser tracking,
   more line-height, no negative letter-spacing — and they render optically
   smaller than sans at equal size, so all sizes run ~15% larger than the
   originals. body.paper scoping beats the story pages' inline <style>
   (.article-h1 there re-declares font-family and would otherwise win). */
body.paper .paper-lede,
body.paper .features-hero-lede,
body.paper .article-h1 {
    font-family: "Shareit", var(--serif);
    font-weight: normal;
    letter-spacing: 0.01em;
    line-height: 1.18;
}
body.paper .paper-lede { font-size: clamp(3.7rem, 7.6vw, 6.7rem); }
body.paper .features-hero-lede { font-size: clamp(3rem, 6.3vw, 5.3rem); }
body.paper .article-h1 { font-size: clamp(2.3rem, 5.1vw, 3.45rem); }
@media (max-width: 540px) {
    body.paper .paper-lede { font-size: 2.76rem; }
}

/* Story standfirst: script headlines stay short (≤ ~6 words); the original
   long headline survives here in the sans, right under the script line. */
body.paper .article-standfirst {
    font-family: var(--sans);
    font-weight: 650;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink-2);
    margin: 0 0 14px;
}

/* Closing CTA is a voice moment, not a header — it gets the script too. */
body.paper .cta-band .paper-h2 {
    font-family: "Shareit", var(--serif);
    font-weight: normal;
    letter-spacing: 0.01em;
    line-height: 1.18;
    font-size: clamp(2.6rem, 5vw, 4rem);
}

/* Feature-page illustrations for rows without a screenshot/video. */
.feature-illo {
    display: block;
    margin: 0 auto 20px;
    height: auto;
    background: transparent;
}
.feature-illo.wide { max-width: 560px; width: 100%; }
.feature-illo.square { max-width: 340px; width: 70%; }

/* Kill the last amber remnants. */
.feature-text-link { border-bottom-color: var(--line); }
.hero-read a { border-bottom-color: var(--line); }

/* Features CTA: accent went white, so the amber-fill button became
   white-on-white. Chalk-white pill, near-black text. */
.features-cta-btn {
    background: var(--ink);
    color: #0A0A0C;
}
.features-cta-btn:hover {
    background: #FFFFFF;
    color: #000000;
}

/* Buttons: with --accent now chalk-white, EVERY rule that pairs an accent
   background with white text becomes white-on-white. Fix the whole family:
   chalk-white pill, near-black text. (.phones-dot.in-focus is a dot with no
   text — fine as-is.) */
.cta-btn,
.paper-form button[type="submit"],
.paper-form button,
.paper-step-send,
.features-cta-btn {
    background: var(--ink);
    color: #0A0A0C;
}
.paper-step-send:hover,
.paper-form button:hover {
    background: #FFFFFF;
    color: #000000;
}

/* Story-page hero + demo video can coexist; give video a hair more room. */
.article-hero video { border-color: var(--line); }