/* ─────────────────────────────────────────────────────────────────────────
   insidermovement.info — the "Organic" design system, applied.

   The tokens and the base layer below are taken verbatim from the system's
   own styles.css (namespace Organic_organi, fe00ec37). Two changes were
   forced on the copy:

     - the system's sheet opens with `@import url(fonts.googleapis.com...)`.
       A mirror should not phone a third party on every view, so Caprasimo
       and Figtree are vendored under /fonts and declared here with
       @font-face. Nothing is fetched at build or at view time.
     - the focus ring is --color-accent-600, not --color-accent. The
       system's own note admits the accent sits at about 3:1 on this
       ground; measured against #f5ead8 it is 2.6:1, which is under the
       3:1 a focus indicator needs. The 600 step is 3.8:1 and is the same
       hue.

   The system's component layer - buttons, forms, cards, tags, the nav bar,
   tables, the dialog - is not copied. This page has none of those things.
   The page layer at the bottom builds what it does have out of the tokens,
   which is what the system asks for.

   The original's bgcolor/text/link/vlink/alink go with it: the four
   colours they named are replaced by the system's palette. The one thing
   they said that the system does not is `vlink` - a visited link is a
   different colour - and that is kept, in the system's second accent.
   ───────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'Caprasimo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/caprasimo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Caprasimo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/caprasimo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ── tokens, from the system ─────────────────────────────────────────── */

:root {
    --color-bg: #f5ead8;
    --color-surface: #ebddc5;
    --color-text: #201e1d;
    --color-accent: #c67139;
    --color-accent-2: #7a8a5e;
    --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

    /* Tonal ramps - generated in OKLCH on one shared lightness scale, so the
       same step of any role matches the others in visual value. */
    --color-neutral-100: #f9f4ed;
    --color-neutral-200: #eee7db;
    --color-neutral-300: #dcd3c4;
    --color-neutral-400: #c0b6a5;
    --color-neutral-500: #a19786;
    --color-neutral-600: #82796a;
    --color-neutral-700: #645c50;
    --color-neutral-800: #474238;
    --color-neutral-900: #2e2b25;

    --color-accent-100: #fff2eb;
    --color-accent-200: #ffe1d0;
    --color-accent-300: #ffc6a5;
    --color-accent-400: #f6a06b;
    --color-accent-500: #d67f48;
    --color-accent-600: #b2622d;
    --color-accent-700: #8c491a;
    --color-accent-800: #643312;
    --color-accent-900: #402310;

    --color-accent-2-100: #f0fae1;
    --color-accent-2-200: #e1eecc;
    --color-accent-2-300: #ccdbb2;
    --color-accent-2-400: #aebf92;
    --color-accent-2-500: #8fa073;
    --color-accent-2-600: #728157;
    --color-accent-2-700: #56633f;
    --color-accent-2-800: #3d472b;
    --color-accent-2-900: #272e1b;

    --font-heading: 'Caprasimo', Georgia, 'Times New Roman', serif;
    --font-heading-weight: 400;
    --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --space-1: 4.4px;
    --space-2: 8.8px;
    --space-3: 13.2px;
    --space-4: 17.6px;
    --space-6: 26.4px;
    --space-8: 35.2px;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    /* Elevation - derived from the ground: soft ink-tinted shadows on a
       light theme, a hairline edge + ambient darkness on a dark one. */
    --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

    /* Page roles, named so the dark variant has one place to move them.
       Body-size text never uses --color-accent itself: the system says to
       reach for a deep ramp step instead, and 700 measures 5.7:1 here. */
    --color-link: var(--color-accent-700);
    --color-link-hover: var(--color-accent-900);
    --color-visited: var(--color-accent-2-700);
    --color-focus: var(--color-accent-600);
    --color-quiet: var(--color-neutral-700);
    --color-body-2: var(--color-neutral-800);
    --ghost: var(--color-accent-200);
    --coda-bg: var(--color-accent-2-900);
    --coda-fg: var(--color-neutral-100);
    --coda-ghost: var(--color-accent-2-800);
    --mark-ground: var(--color-accent-2-100);
    --mark-edge: var(--color-accent-2-300);
}

/* The system ships one ground and calls it light. This is the warm family
   turned down rather than a second palette: the ink becomes the ground, the
   lightest neutral becomes the text, and the two accents step up their
   ramps far enough to hold contrast. Derived here, not taken from the
   system, which does not define it. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #201e1d;
        --color-surface: #2e2b25;
        --color-text: #f9f4ed;
        --color-divider: color-mix(in srgb, #f9f4ed 18%, transparent);
        --color-link: var(--color-accent-400);
        --color-link-hover: var(--color-accent-300);
        --color-visited: var(--color-accent-2-400);
        --color-focus: var(--color-accent-400);
        --color-quiet: var(--color-neutral-400);
        --color-body-2: var(--color-neutral-300);
        --ghost: var(--color-accent-800);
        --coda-bg: var(--color-accent-2-800);
        --coda-ghost: var(--color-accent-2-900);
        --mark-ground: var(--color-accent-2-800);
        --mark-edge: var(--color-accent-2-600);
        --shadow-sm: 0 1px 2px color-mix(in srgb, #000 45%, transparent);
        --shadow-md: 0 3px 10px color-mix(in srgb, #000 50%, transparent);
    }
}

/* ── base, from the system ───────────────────────────────────────────── */

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

html {
    /* The page ground, not the closing band's. The band is no longer the
       last thing on the page - the footer is, and it sits on the page
       ground - so a canvas in the band's dark green shows as a strip
       below the footer on a window taller than the content. */
    background: var(--color-bg);
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    /* The system's own base. Every size on this page is set against it -
       the hero lede at 20, the bylines at 15, the note at 14 - so raising
       it here would put one paragraph out of step with the rest. */
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-3); }

a {
    color: var(--color-link);
    text-underline-offset: 3px;
}
a:visited { color: var(--color-visited); }
a:hover { color: var(--color-link-hover); }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }


/* ── page ────────────────────────────────────────────────────────────── */

/* The design is left-aligned and asymmetric: text hugs the left edge and
   the whitespace is on the right. The original centred every paragraph
   with align="center", and that is the one instruction of the original's
   this overrules - being left-aligned is most of what the system looks
   like. */

.page {
    min-height: 100%;
    overflow-x: hidden;
}

.wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-muted { color: var(--color-quiet); }

.kicker {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-2-700);
    margin-bottom: var(--space-3);
}

@media (prefers-color-scheme: dark) {
    .kicker { color: var(--color-accent-2-400); }
}

/* The heading's own shadow, offset rather than blurred - the design calls
   it an echo. It is decoration and it is the first thing to go when a
   window is narrow, where the offset would collide with the next line. */
.ghost { text-shadow: 12px 9px 0 var(--ghost); }

/* ── the bar ─────────────────────────────────────────────────────────── */

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 22px 0 0;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 18px;
}

.nav a {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}
.nav a:visited { color: inherit; }
.nav a:hover { color: var(--color-link); }

/* The brand mark: two discs, sage under clay, overlapping. `multiply`
   makes the overlap a third colour rather than a stack, which is the
   point of it - two things in the same place. */
.mark {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 18px;
    flex: none;
}
.disc {
    position: absolute;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.disc-sage { left: 0; background: var(--color-accent-2-500); }
.disc-clay { left: 11px; background: var(--color-accent-500); mix-blend-mode: multiply; opacity: 0.85; }

@media (prefers-color-scheme: dark) {
    /* multiply against a dark ground turns the overlap to mud. Screen is
       the same idea the other way up. */
    .disc-clay { mix-blend-mode: screen; }
}

/* ── buttons ────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    padding: var(--space-2) calc(var(--space-3) * 1.2);
    border-radius: 999px;
}
.btn:visited { color: var(--color-text); }

.btn-primary {
    background: var(--color-accent);
    color: var(--color-bg);
}
.btn-primary:visited { color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* ── the hero ────────────────────────────────────────────────────────── */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
    gap: var(--space-8);
    align-items: center;
    padding: clamp(40px, 7vw, 86px) 0 clamp(48px, 8vw, 96px);
}

.hero h1 {
    font-size: clamp(44px, 7.4vw, 86px);
    line-height: 1.02;
    margin: 0 0 var(--space-4);
    text-wrap: pretty;
}

.hero-lede {
    font-size: 20px;
    max-width: 30ch;
    color: var(--color-body-2);
    margin-bottom: var(--space-4);
}

.hero-note {
    font-size: 14px;
    max-width: 34ch;
    font-style: italic;
    color: var(--color-quiet);
}

.hero-badge {
    position: relative;
    justify-self: end;
    width: min(260px, 100%);
    aspect-ratio: 1;
}

.badge-ring {
    position: absolute;
    inset: -16px 18px 18px -16px;
    border: 1px solid var(--color-accent-2-400);
    border-radius: 50%;
}

.badge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: help;
    filter: drop-shadow(var(--shadow-md));
}

.badge-ground { fill: var(--mark-ground); }
.badge-edge { stroke: var(--mark-edge); }

/* The cross is behind the crescent and mostly hidden by it. Moving the
   crescent aside is the whole gesture, so both halves are one
   transition. */
.badge-cross {
    fill: var(--color-accent-800);
    opacity: 0.4;
}
.badge-crescent-shadow { opacity: 0.22; filter: blur(3px); }
.badge-crescent-shadow circle { fill: var(--color-accent-2-900); }
.badge-crescent-body { fill: var(--color-accent-2-600); }

.badge-cross,
.badge-crescent {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}
.badge:hover .badge-crescent {
    transform: translate(28px, -22px);
    opacity: 0.3;
}
.badge:hover .badge-cross { opacity: 1; }

@media (prefers-color-scheme: dark) {
    .badge-cross { fill: var(--color-accent-300); }
    .badge-crescent-body { fill: var(--color-accent-2-500); }
}

/* ── the two sides ───────────────────────────────────────────────────── */

.section { padding-bottom: clamp(40px, 7vw, 80px); }

.section h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    margin-bottom: var(--space-2);
}

.section-lede {
    max-width: 52ch;
    margin-bottom: var(--space-8);
}

.panels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

/* One filled, one outlined: the assessment is the page's own position and
   the earlier discussion is the record it argues with. Same size, so
   neither is small print. */
.panel {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: calc(var(--radius-lg) * 1.15);
}
.panel-filled {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.panel-outlined { border: 1px solid var(--color-divider); }

.panel h3 {
    margin: 0;
    font-size: 25px;
    text-wrap: pretty;
}
.panel-by {
    margin: 0;
    font-size: 15px;
    color: var(--color-body-2);
}
.panel .tag,
.panel .btn { align-self: flex-start; }
.panel .btn { margin-top: var(--space-2); font-size: 14px; }

.tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 999px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

@media (prefers-color-scheme: dark) {
    .tag-accent { background: var(--color-accent-900); color: var(--color-accent-200); }
    .tag-accent-2 { background: var(--color-accent-2-900); color: var(--color-accent-2-200); }
}

/* ── the reading list ────────────────────────────────────────────────── */

.reading {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.reading li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.reading-no {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent-2-200);
    color: var(--color-accent-2-800);
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 17px;
}

@media (prefers-color-scheme: dark) {
    .reading-no { background: var(--color-accent-2-800); color: var(--color-accent-2-200); }
}

.reading-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 22px;
    text-decoration: none;
    line-height: 1.15;
}
.reading-title:hover { text-decoration: underline; }

.reading-by {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--color-body-2);
}

/* ── the closing band ────────────────────────────────────────────────── */

.coda {
    background: var(--coda-bg);
    color: var(--coda-fg);
    padding: clamp(34px, 5vw, 58px) 0;
}

.coda p {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: clamp(26px, 3.6vw, 44px);
    line-height: 1.14;
    margin: 0;
    color: var(--coda-fg);
    text-shadow: 10px 8px 0 var(--coda-ghost);
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--space-8);
    padding-bottom: calc(var(--space-8) * 1.6);
    font-size: 13px;
}

/* ── narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
    /* The badge stops being a companion to the heading and becomes a
       thing above it: one column, mark first, at a size that does not
       take the whole screen. */
    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }
    .hero-badge {
        order: -1;
        justify-self: start;
        width: min(180px, 60%);
    }
    .ghost { text-shadow: 7px 5px 0 var(--ghost); }
    .nav { flex-wrap: wrap; gap: var(--space-3); }
    .nav-brand { margin-right: auto; }
}

@media (max-width: 420px) {
    /* At this width the offset shadow crosses the line below it. */
    .ghost { text-shadow: none; }
}

/* Nothing on this page is hidden behind a transition - the two readings
   are both in the DOM and the badge reads the same at rest - but honour
   the request not to move anyway. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}