/* ===========================================================================
   aubreyperin.com — shared theme
   ---------------------------------------------------------------------------
   One stylesheet for the whole site. Every page links this and declares
   nothing about colour or type of its own.

   ONE PALETTE, navy + gold, across the whole site. The writing, books and
   frameworks pages used to carry a separate brown-and-tan family; they were
   folded into this one so every page reads as the same site.

   FOUR MODES, set on <html> by js/theme.js:
     (no data-theme)            follow the operating system
     data-theme="light"
     data-theme="dark"
     data-theme="learning"      palette-independent. Dark reading ground,
                                Atkinson Hyperlegible, decorative colour
                                stripped so the only hues left carry meaning:
                                blue = right, orange = wrong (Okabe-Ito, safe
                                for all common forms of colour blindness).

   Values are declared ONCE, as primitives, in the first block. Everything
   below only remaps semantic names onto them.
   =========================================================================== */

/* --- 1. primitives: every colour the site uses, declared once -------------- */

:root {
    /* navy family — dark */
    --navy-d-bg-deep: #0c1320;
    --navy-d-bg-surface: #131c2e;
    --navy-d-bg-elevated: #1a2640;
    --navy-d-bg-hover: #243352;
    --navy-d-text-primary: #f1e9d8;
    --navy-d-text-secondary: #b3bccb;
    --navy-d-text-muted: #818ea4;
    --navy-d-accent-warm: #d6a94e;
    --navy-d-accent-gold: #e6c074;
    --navy-d-accent-ember: #df8a45;
    --navy-d-border-subtle: rgba(214, 169, 78, 0.13);
    --navy-d-border-warm: rgba(214, 169, 78, 0.26);
    --navy-d-nav-bg: rgba(12, 19, 32, 0.85);

    /* navy family — light */
    --navy-l-bg-deep: #f4efe2;
    --navy-l-bg-surface: #ebe4d4;
    --navy-l-bg-elevated: #e0d7c4;
    --navy-l-bg-hover: #d2c8b2;
    --navy-l-text-primary: #111d2e;
    --navy-l-text-secondary: #38485d;
    --navy-l-text-muted: #555f6d;
    --navy-l-accent-warm: #7d5714;
    --navy-l-accent-gold: #5e3f0b;
    --navy-l-accent-ember: #964816;
    --navy-l-border-subtle: rgba(17, 29, 46, 0.12);
    --navy-l-border-warm: rgba(17, 29, 46, 0.26);
    --navy-l-nav-bg: rgba(244, 239, 226, 0.9);



    /* semantic signals — these mean something, so they do not vary by family */
    --sig-red-dark: #d86f5e;
    --sig-red-light: #94301f;
    --sig-green-dark: #6f9a63;
    --sig-green-light: #3f5e36;

    /* type */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- 2. the dark default -------------------------------------------------- */

:root {
    --bg-deep: var(--navy-d-bg-deep);
    --bg-surface: var(--navy-d-bg-surface);
    --bg-elevated: var(--navy-d-bg-elevated);
    --bg-hover: var(--navy-d-bg-hover);
    --text-primary: var(--navy-d-text-primary);
    --text-secondary: var(--navy-d-text-secondary);
    --text-muted: var(--navy-d-text-muted);
    --accent-warm: var(--navy-d-accent-warm);
    --accent-gold: var(--navy-d-accent-gold);
    --accent-ember: var(--navy-d-accent-ember);
    --accent-red: var(--sig-red-dark);
    --accent-green: var(--sig-green-dark);
    --border-subtle: var(--navy-d-border-subtle);
    --border-warm: var(--navy-d-border-warm);
    --nav-bg: var(--navy-d-nav-bg);
    --on-accent: #0c1320;
}

/* --- 3. light ------------------------------------------------------------- */

/* explicit choice */
:root[data-theme="light"] {
    --bg-deep: var(--navy-l-bg-deep);
    --bg-surface: var(--navy-l-bg-surface);
    --bg-elevated: var(--navy-l-bg-elevated);
    --bg-hover: var(--navy-l-bg-hover);
    --text-primary: var(--navy-l-text-primary);
    --text-secondary: var(--navy-l-text-secondary);
    --text-muted: var(--navy-l-text-muted);
    --accent-warm: var(--navy-l-accent-warm);
    --accent-gold: var(--navy-l-accent-gold);
    --accent-ember: var(--navy-l-accent-ember);
    --accent-red: var(--sig-red-light);
    --accent-green: var(--sig-green-light);
    --border-subtle: var(--navy-l-border-subtle);
    --border-warm: var(--navy-l-border-warm);
    --nav-bg: var(--navy-l-nav-bg);
    --on-accent: #f4efe2;
}

/* following the system, with no explicit choice stored. Kept so the page is
   correct before js/theme.js runs, and correct if it never runs at all. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-deep: var(--navy-l-bg-deep);
        --bg-surface: var(--navy-l-bg-surface);
        --bg-elevated: var(--navy-l-bg-elevated);
        --bg-hover: var(--navy-l-bg-hover);
        --text-primary: var(--navy-l-text-primary);
        --text-secondary: var(--navy-l-text-secondary);
        --text-muted: var(--navy-l-text-muted);
        --accent-warm: var(--navy-l-accent-warm);
        --accent-gold: var(--navy-l-accent-gold);
        --accent-ember: var(--navy-l-accent-ember);
        --accent-red: var(--sig-red-light);
        --accent-green: var(--sig-green-light);
        --border-subtle: var(--navy-l-border-subtle);
        --border-warm: var(--navy-l-border-warm);
        --nav-bg: var(--navy-l-nav-bg);
        --on-accent: #f4efe2;
    }
    }

/* --- 4. dark, chosen explicitly ------------------------------------------- */

:root[data-theme="dark"] {
    --bg-deep: var(--navy-d-bg-deep);
    --bg-surface: var(--navy-d-bg-surface);
    --bg-elevated: var(--navy-d-bg-elevated);
    --bg-hover: var(--navy-d-bg-hover);
    --text-primary: var(--navy-d-text-primary);
    --text-secondary: var(--navy-d-text-secondary);
    --text-muted: var(--navy-d-text-muted);
    --accent-warm: var(--navy-d-accent-warm);
    --accent-gold: var(--navy-d-accent-gold);
    --accent-ember: var(--navy-d-accent-ember);
    --accent-red: var(--sig-red-dark);
    --accent-green: var(--sig-green-dark);
    --border-subtle: var(--navy-d-border-subtle);
    --border-warm: var(--navy-d-border-warm);
    --nav-bg: var(--navy-d-nav-bg);
    --on-accent: #0c1320;
}

/* --- 5. learning mode ----------------------------------------------------- */

:root[data-theme="learning"] {
    --bg-deep: #14161a;
    --bg-surface: #1c1f25;
    --bg-elevated: #252931;
    --bg-hover: #31363f;
    --text-primary: #e9e7e2;
    --text-secondary: #bcb9b2;
    --text-muted: #929089;
    --accent-warm: #b9b5ac;
    --accent-gold: #d8d4cb;
    --accent-ember: #b9b5ac;
    --accent-red: #e69f00;   /* Okabe-Ito orange — wrong */
    --accent-green: #56b4e9; /* Okabe-Ito blue   — right */
    --border-subtle: rgba(233, 231, 226, 0.12);
    --border-warm: rgba(233, 231, 226, 0.3);
    --nav-bg: rgba(20, 22, 26, 0.93);
    --on-accent: #14161a;
    --font-display: 'Atkinson Hyperlegible', 'Source Sans 3', sans-serif;
    --font-body: 'Atkinson Hyperlegible', 'Source Sans 3', sans-serif;
}

:root[data-theme="learning"] body { font-weight: 400; line-height: 1.8; }
:root[data-theme="learning"] body::before { display: none; }
:root[data-theme="learning"] ::selection { background: #3a4149; color: #f2f0ec; }
:root[data-theme="learning"] p,
:root[data-theme="learning"] li,
:root[data-theme="learning"] .lede { max-width: 68ch; }

/* --- 6. base layer -------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: var(--accent-red); color: var(--text-primary); }

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-ember) var(--bg-deep);
    color-scheme: dark;
}
:root[data-theme="light"] html, :root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } }

body {
    font-family: var(--font-body);
    background-color: var(--bg-deep);
    color: var(--text-primary);
    line-height: 1.7;
    font-weight: 300;
    overflow-x: hidden;
}

/* the paper grain. Suppressed in learning mode and for reduced-motion users. */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
}

a { color: var(--accent-gold); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- 7. site navigation --------------------------------------------------- */

nav.site-nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}
nav.site-nav .nav-inner {
    max-width: 1100px; margin: 0 auto; padding: 1rem 2rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
nav.site-nav .nav-name {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.02em;
    text-decoration: none; white-space: nowrap;
}
nav.site-nav .nav-course {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--text-muted);
}
nav.site-nav .nav-links { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
nav.site-nav .nav-links a {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-secondary);
    text-decoration: none; transition: color 0.2s ease;
}
nav.site-nav .nav-links a:hover { color: var(--accent-gold); }
nav.site-nav .nav-links a[aria-current="page"] { color: var(--accent-warm); }

/* legacy: pages still carrying a bare <nav> get the same treatment */
body > nav:not(.site-nav) {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}

/* --- 8. the mode switch --------------------------------------------------- */

.theme-switch {
    display: flex; gap: 2px; padding: 3px;
    border: 1px solid var(--border-subtle); border-radius: 4px;
    background: var(--bg-surface); flex-shrink: 0;
}
.theme-opt {
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
    background: none; border: none; border-radius: 3px;
    padding: 0.3rem 0.5rem; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.theme-opt:hover { color: var(--text-primary); }
.theme-opt[aria-pressed="true"] {
    background: var(--bg-elevated); color: var(--accent-warm);
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
    nav.site-nav .nav-inner { padding: 0.8rem 1rem; }
    nav.site-nav .nav-course { display: none; }
    .theme-opt { padding: 0.3rem 0.4rem; font-size: 0.58rem; }
}

/* --- 8b. wayfinding inside /law ------------------------------------------- */

/* Two separate jobs, deliberately not combined.
 *
 * .crumbs lives in the fixed nav bar and is always on screen. It answers
 * "where am I and how do I get back up" — the thing 31 law pages had no answer
 * to, where the only link in the nav went to the author's homepage, i.e. out
 * of the study material and into the half that sells books.
 *
 * .course-rail sits at the top of <main>, in normal flow, and answers "what
 * else is in this course". It is NOT fixed: the nav is, and stacking a second
 * fixed strip under it would mean editing the top padding of 31 pages, each of
 * which sets its own. In flow it needs no layout maths and cannot overlap.
 *
 * Both take colour only from semantic tokens, so all four modes follow. */

.crumbs {
    display: flex; flex-wrap: nowrap; align-items: center;
    list-style: none; margin: 0; padding: 0; min-width: 0;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
}
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumbs li + li::before {
    content: "/"; margin: 0 0.45rem; flex-shrink: 0;
    color: var(--text-muted); opacity: 0.55;
}
.crumbs a {
    color: var(--text-secondary); text-decoration: none; white-space: nowrap;
    transition: color 0.2s ease;
}
.crumbs a:hover, .crumbs a:focus-visible { color: var(--accent-gold); }
.crumbs [aria-current="page"] {
    color: var(--text-muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Both are div[role="navigation"], not <nav>: 38 law pages style a bare `nav`
 * selector as position:fixed in their own inline <style>, and as <nav> these
 * two were pinned to the top of the viewport on top of the real nav. The
 * explicit position:static below is a second belt — a page is free to add a
 * bare rule tomorrow, and these must stay in flow for the layout to hold. */
.course-rail, .seq-nav { position: static; }

.course-rail {
    display: flex; gap: 0.25rem; align-items: center;
    margin: 0 0 2.5rem; padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.course-rail a {
    font-family: var(--font-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-secondary); text-decoration: none;
    padding: 0.4rem 0.6rem; border-radius: 3px; white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}
.course-rail a:hover, .course-rail a:focus-visible {
    background: var(--bg-elevated); color: var(--text-primary);
}
.course-rail a[aria-current="page"] {
    background: var(--bg-elevated); color: var(--accent-warm);
}
.course-rail .rail-up { color: var(--text-muted); }
.course-rail .rail-up:hover { color: var(--accent-gold); background: none; }

/* prev / next, for pages that are a numbered sequence */
.seq-nav {
    display: flex; justify-content: space-between; align-items: stretch; gap: 1rem;
    margin: 4rem 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}
.seq-nav a {
    flex: 1 1 0; min-width: 0; max-width: 22rem;
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.9rem 1.1rem; border-radius: 4px;
    border: 1px solid var(--border-subtle); background: var(--bg-surface);
    text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease;
}
.seq-nav a:hover, .seq-nav a:focus-visible {
    border-color: var(--border-warm); background: var(--bg-elevated);
}
.seq-nav .seq-next { text-align: right; align-items: flex-end; margin-left: auto; }
.seq-nav .seq-dir {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
}
.seq-nav .seq-title {
    font-family: var(--font-display); font-size: 1rem;
    color: var(--text-primary); line-height: 1.3;
}

@media (max-width: 560px) {
    /* The trail is the only route back on a phone, so it stays — but at 390px
       the name and the three-button switch leave it about 60px, and a trail
       squeezed into 60px was being drawn underneath the switch. So it gets a
       row of its own below them rather than competing for the same one. The
       nav grows to roughly 88px, still inside the 128px top padding the pages
       reserve. Only the parent and the current page: that is what fits. */
    nav.site-nav .nav-inner,
    body > nav:not(.site-nav) .nav-inner { flex-wrap: wrap; row-gap: 0.35rem; }
    .crumbs { order: 9; flex-basis: 100%; font-size: 0.66rem; min-width: 0; }
    .crumbs li:not(:nth-last-child(-n+2)) { display: none; }
    .crumbs li:nth-last-child(2)::before { content: none; margin: 0; }
    .crumbs li:last-child { min-width: 0; }
    .course-rail { margin-bottom: 1.75rem; }
    .seq-nav { flex-direction: column; }
    .seq-nav a { max-width: none; }
    .seq-nav .seq-next { text-align: left; align-items: flex-start; margin-left: 0; }
}

/* --- 9. cross-ribbon: the bridge between the study side and the rest ------ */

.cross-ribbon {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    max-width: 1100px; margin: 0 auto 2rem; padding: 0.85rem 1.25rem;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--accent-warm); border-radius: 3px;
    text-decoration: none; color: inherit;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.cross-ribbon:hover { background: var(--bg-elevated); border-color: var(--border-warm);
    border-left-color: var(--accent-gold); }
.cross-ribbon .cr-label {
    font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent-warm); white-space: nowrap;
}
.cross-ribbon .cr-text { font-size: 0.9rem; color: var(--text-secondary); flex: 1 1 18rem; }
.cross-ribbon .cr-go {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent-gold); white-space: nowrap; margin-left: auto;
}
.cross-ribbon.is-top { margin-top: 0; }
.cross-ribbon.is-bottom { margin: 3.5rem auto 2rem; }

@media (max-width: 620px) {
    .cross-ribbon { gap: 0.4rem; }
    .cross-ribbon .cr-go { margin-left: 0; }
}

/* --- 10. book formats table ---------------------------------------------- */

.formats-section { padding: 4rem 0 1rem; }
.formats-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.formats-label { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-warm);
  letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 1.1rem; }
.formats-heading { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400; line-height: 1.2; margin-bottom: 1.25rem; }
.formats { margin-top: 2rem; max-width: 860px; border: 1px solid var(--border-subtle);
  border-radius: 3px; overflow: hidden; }
.format-row { display: grid; grid-template-columns: 1.3fr 1fr 0.6fr auto; gap: 1rem;
  align-items: center; padding: 1.1rem 1.4rem; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle); }
.format-row:last-child { border-bottom: none; }
.format-row .fmt { font-weight: 500; }
.format-row .fmt small { display: block; font-weight: 300; font-size: 0.83rem; color: var(--text-muted); }
.format-row .where { color: var(--text-secondary); font-size: 0.93rem; }
.format-row .price { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); }
.format-row .btn { padding: 0.6rem 1.1rem; font-size: 0.86rem; }
.formats-note { margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); max-width: 60ch; }

@media (max-width: 760px) {
  .formats-inner { padding: 0 1rem; }
  .format-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .format-row .btn { justify-self: start; margin-top: 0.4rem; }
}

/* --- print ----------------------------------------------------------------
   Every page on this site printed BLANK before this block existed, and the
   cause was not obvious: body::before is a fixed, full-viewport noise texture
   at z-index 9999. Browsers do not print background graphics unless the reader
   ticks the box, so the texture paints nothing — but the box is still there,
   over everything, and Chromium renders the sheet empty. A PDF of this page
   contained 2,026 characters of real text and zero non-white pixels.

   The second half is the dark-mode problem. A reader with the dark palette has
   cream text; printing drops the dark ground and keeps the cream, which is a
   structurally perfect invisible page. So the paper is forced white and the
   ink is forced dark regardless of which mode the reader is in.

   Verified by rasterising the PDF and counting non-white pixels, because every
   display- and colour-based check passed while the output was blank. */

@media print {
    body::before { display: none !important; }

    html, body { background: #fff !important; }
    body, main, p, li, td, th, h1, h2, h3, h4, dt, dd, blockquote, figcaption,
    strong, em, code, pre { color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    table, th, td { border-color: #999 !important; }

    .theme-switch, .cross-ribbon { display: none !important; }
}