/* =============================================================================
   THE BOOK OF LIFE — the paper edition stylesheet.

   The book in the labs.llc register: DM Sans off this origin, the paper/ink
   token set from the homepage, one restrained accent used for hairlines and
   the reading progress only. The dark edition loads book-dark.css after this
   file and answers the literals; everything that reads a token needs nothing
   there.
   ========================================================================== */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('../assets/fonts/dm-sans-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: 'DM Sans';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('../assets/fonts/dm-sans-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;
}

:root {
    --ink:        #1E262B;
    --ink-77:     rgba(30, 38, 43, .77);
    --ink-55:     rgba(30, 38, 43, .64);
    --paper:      #ffffff;
    --tint:       #FAFAFA;
    --deep:       #11161C;
    --line:       rgba(30, 38, 43, .12);
    --line-soft:  rgba(30, 38, 43, .07);
    --muted:      #717171;
    --accent:     #C2410C;

    --measure:    1265px;
    --gutter:     clamp(20px, 5vw, 56px);
    --nav-h:      74px;
    --band:       clamp(64px, 9vw, 128px);
    --ease:       cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-77);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* An anchored heading must clear the sticky bar, and the margin has to read
   the same token the bar is drawn at. On anything with an id, because a
   hand-kept list of targets is a thing to forget to update. */
[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }

img, svg { display: block; }

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------- skip link -- */
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: var(--paper);
    padding: .7rem 1.1rem; font-weight: 600; font-size: .85rem;
    text-decoration: none; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------- nav -- */
.nav {
    position: sticky; top: 0; z-index: 100;
    height: var(--nav-h);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.nav__in {
    max-width: var(--measure); height: 100%;
    margin-inline: auto; padding-inline: var(--gutter);
    display: flex; align-items: center; gap: 1rem;
}
.nav__mark { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.nav__mark img { width: 78px; height: 33px; }
.nav__mark span {
    font-size: .6rem; font-weight: 700; letter-spacing: .32em;
    text-transform: uppercase; color: var(--ink-55);
    padding-left: .8rem; border-left: 1px solid var(--line);
}
@media (max-width: 900px) { .nav__mark span { display: none; } }

/* --------------------------------------------------------------- buttons -- */
.btn {
    display: inline-flex; align-items: center; gap: .6rem;
    font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
    padding: .72rem 1.15rem; border-radius: 8px;
    border: 1px solid transparent; background: var(--ink); color: #fff;
    text-decoration: none; cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: #000; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn svg { flex: 0 0 auto; }

/* ------------------------------------------------------ the edition pill -- */
/* Lifted from the homepage bar: one thumb behind two equal segments, exactly
   one segment lit and written into the markup, 13px glyphs carrying their own
   width and height on the tag. */
.mode-pill {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 3px; border-radius: 999px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(30,38,43,.045), rgba(30,38,43,.025));
    box-shadow: inset 0 1px 2px rgba(30,38,43,.055);
}
.mode-pill__thumb {
    position: absolute; z-index: 0;
    top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
    border-radius: 999px; background: var(--ink);
    box-shadow: 0 1px 2px rgba(30,38,43,.26), 0 6px 18px rgba(30,38,43,.14);
    transition: transform .42s var(--ease);
}
.mode-pill--dark .mode-pill__thumb { transform: translateX(100%); }
.mode-pill:has(.mode-pill__seg:not(.is-on):hover) .mode-pill__thumb { transform: translateX(100%); }
.mode-pill--dark:has(.mode-pill__seg:not(.is-on):hover) .mode-pill__thumb { transform: none; }
.mode-pill__seg {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; padding: .4rem .45rem; border-radius: 999px;
    text-decoration: none; color: var(--ink-55);
    transition: color .32s var(--ease);
}
.mode-pill__seg.is-on { color: var(--paper); cursor: default; }
.mode-pill__seg:not(.is-on):hover { color: var(--ink); }
.mode-pill:has(.mode-pill__seg:hover) .mode-pill__seg.is-on { color: var(--ink-55); }
.mode-pill:has(.mode-pill__seg:hover) .mode-pill__seg:hover  { color: var(--paper); }
.mode-pill__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-pill__i { width: 13px; height: 13px; flex: 0 0 auto; display: block; }

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

/* ------------------------------------------------------ reading progress -- */
/* A hairline under the bar, not a second bar. JS drives the width; without JS
   the track is invisible and nothing is owed. */
.progress {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    height: 2px; z-index: 99; pointer-events: none;
}
.progress__bar {
    height: 100%; width: 0;
    background: var(--accent);
}

/* ----------------------------------------------------------------- cover -- */
.cover { padding: calc(var(--band) * 1.1) 0 var(--band); }
.cover__in { max-width: 720px; }

.eyebrow {
    display: flex; align-items: center; gap: .7rem;
    font-size: .688rem; font-weight: 700;
    letter-spacing: .19em; text-transform: uppercase;
    color: var(--ink-55);
    margin: 0 0 1.6rem;
}
.eyebrow::before {
    content: ''; width: 26px; height: 1px; background: var(--accent); flex: 0 0 auto;
}

.cover h1 {
    margin: 0 0 1.2rem;
    font-size: clamp(2.5rem, 6vw, 4.1rem);
    font-weight: 300; letter-spacing: -.03em; line-height: 1.04;
    color: var(--ink);
}
.cover__lede {
    margin: 0 0 1.1rem;
    font-size: clamp(1.02rem, 1.35vw, 1.19rem);
    line-height: 1.6; font-weight: 300; color: var(--ink-77);
    max-width: 62ch;
}
.cover__quote {
    margin: 0 0 2.2rem;
    font-style: italic; color: var(--ink-55);
    max-width: 52ch;
}
.cover__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.cover__meta {
    font-size: .72rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.cover__meta a { color: inherit; text-decoration: none; }
.cover__meta a:hover { color: var(--ink); }

/* -------------------------------------------------------------- contents -- */
.contents { background: var(--tint); border-block: 1px solid var(--line-soft); padding: var(--band) 0; }
.contents__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 clamp(1.5rem, 4vw, 4rem);
    margin-top: .4rem;
}
.contents__row {
    display: flex; align-items: baseline; gap: .9rem;
    padding: .78rem 0; text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
}
.contents__num {
    flex: 0 0 3.2rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent);
}
.contents__title {
    font-size: .95rem; font-weight: 500; color: var(--ink-77);
    transition: color .25s var(--ease);
}
.contents__row:hover .contents__title { color: var(--ink); }

/* ---------------------------------------------------------------- reader -- */
.read { padding: var(--band) 0; }
.read__in {
    display: grid; grid-template-columns: minmax(0, 680px);
    justify-content: center;
    max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter);
}
@media (min-width: 1100px) {
    .read__in { grid-template-columns: 210px minmax(0, 680px); gap: clamp(2.5rem, 5vw, 5rem); }
}

/* The rail. Sticky contents beside the text on a wide screen; on anything
   narrower it simply does not exist and the contents band does its job. */
.rail { display: none; }
@media (min-width: 1100px) {
    .rail { display: block; }
    .rail__in { position: sticky; top: calc(var(--nav-h) + 28px); }
    .rail__label {
        font-size: .62rem; font-weight: 700; letter-spacing: .22em;
        text-transform: uppercase; color: var(--muted);
        margin-bottom: .9rem;
    }
    .rail a {
        display: block; padding: .34rem 0 .34rem .9rem;
        font-size: .82rem; color: var(--ink-55); text-decoration: none;
        border-left: 1px solid var(--line);
        transition: color .25s var(--ease), border-color .25s var(--ease);
    }
    .rail a:hover { color: var(--ink); }
    .rail a[aria-current] { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }
}

/* --------------------------------------------------------------- chapter -- */
.chapter { margin-bottom: calc(var(--band) * .7); }
.chapter:last-of-type { margin-bottom: 0; }

.chapter h2 {
    display: flex; align-items: center; gap: .7rem;
    margin: 0 0 .55rem;
    font-size: .688rem; font-weight: 700;
    letter-spacing: .19em; text-transform: uppercase;
    color: var(--accent);
}
.chapter h2::before {
    content: ''; width: 26px; height: 1px; background: var(--accent); flex: 0 0 auto;
}
.chapter h3 {
    margin: 0 0 1.5rem;
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    font-weight: 600; letter-spacing: -.015em; line-height: 1.25;
    color: var(--ink);
}
.chapter p {
    margin: 0 0 1.05em;
    font-size: 1.02rem; line-height: 1.78;
    color: var(--ink-77);
}
.chapter h3 + p {
    font-size: 1.11rem; line-height: 1.7; font-weight: 400;
    color: var(--ink);
}
.chapter blockquote {
    margin: 1.8rem 0; padding: 1rem 1.4rem;
    border-left: 2px solid var(--accent);
    background: var(--line-soft);
    font-style: italic; font-size: 1.02rem; line-height: 1.65;
    color: var(--ink-77);
}
.chapter blockquote p { margin: 0; }

/* -------------------------------------------------------------- end mark -- */
.end-mark { margin-top: calc(var(--band) * .5); text-align: center; }
.end-line { width: 40px; height: 1px; background: var(--accent); margin: 0 auto 1rem; }
.end-labs {
    font-size: .72rem; font-weight: 700; letter-spacing: .3em;
    text-transform: uppercase; color: var(--ink);
}
.end-note { margin-top: .4rem; font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------- footer -- */
.foot { border-top: 1px solid var(--line); padding: 2.2rem 0 2.8rem; }
.foot__in {
    max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.foot__brand {
    font-size: .72rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-55); text-decoration: none;
}
.foot__brand:hover { color: var(--ink); }
.foot__note { font-size: .8rem; color: var(--muted); }
.foot__pdf { font-size: .8rem; font-weight: 600; color: var(--ink-55); text-decoration: none; }
.foot__pdf:hover { color: var(--ink); }

/* ----------------------------------------------------------------- phone -- */
@media (max-width: 640px) {
    :root { --nav-h: 62px; }
    .nav__in { gap: .55rem; }
    .nav__mark img { width: 64px; height: 27px; }
    /* The glyph stays 13px; what grows on a phone is the box around it. */
    .mode-pill__seg { min-width: 1.9rem; padding: .58rem .4rem; }
    /* The bar keeps the pill and the mark; the PDF lives on the cover, in the
       contents band's shadow, and in the footer. */
    .nav .btn { display: none; }
    .cover__actions .btn { flex: 1 1 auto; justify-content: center; }
}