/* ---------------------------------------------------------------------------
   1. Design elements
   --------------------------------------------------------------------------- */

:root {
    /* palette — light ink */
    --paper: #FAF8F4;
    --ink:   #211D16;
    --soft:  #6E675C;
    --line:  #DCD6CA;
    --acc:   #A51C30;   /* Harvard crimson */
    --acc2:  #8A6F3F;   /* muted gold, Incidentally device only */

    /* typography — Century Supra is the default face */
    --bf: 'century-supra-text', Georgia, serif;     /* body */
    --cf: 'century-supra-caps', Georgia, serif;     /* small caps */
    --df: 'advocate-c41', Impact, sans-serif;       /* display (blog index) */
    --fk: 0.93;          /* per-font size factor */
    --lh: 1.46;          /* per-font line height */
    --ffs: normal;       /* per-font font-feature-settings */

    --ts: 1;                                  /* reader text-size factor */
    --u:  calc(22px * var(--ts));             /* base unit */
    --bs: calc(var(--u) * var(--fk));         /* body size */

    /* layout */
    --pgx: 16px;                              /* page x padding */
    --measure: 1000px;
    --gutter: 250px;                          /* margin-note column incl. gap */
    --notew: 210px;                           /* margin-note text width */

    /* hover wash */
    --wash: color-mix(in srgb, var(--acc) 7%, transparent);
}

html[data-font="equity"] {
    --bf: 'equity-text', Georgia, serif;
    --cf: 'equity-caps', Georgia, serif;
    --fk: 0.98; --lh: 1.40; --ffs: normal;
}
html[data-font="concourse"] {
    --bf: 'concourse-text', 'Helvetica Neue', sans-serif;
    --cf: 'concourse-caps', sans-serif;
    --fk: 1.00; --lh: 1.38; --ffs: normal;
}
html[data-font="heliotrope"] {
    --bf: 'heliotrope-text', Georgia, serif;
    --cf: 'heliotrope-caps', Georgia, serif;
    --fk: 0.96; --lh: 1.42; --ffs: normal;
}
html[data-font="triplicate"],
html[data-txt] {
    --bf: 'triplicate', 'Courier New', monospace;
    --cf: 'triplicate', monospace;
    --fk: 0.85; --lh: 1.50; --ffs: "ss01";
}
html[data-txt] {
    --df: 'triplicate', 'Courier New', monospace;
}

html[data-size="small"] { --ts: 0.91; }
html[data-size="large"] { --ts: 1.12; }

html[data-ink="dark"] {
    --paper: #191613;
    --ink:   #DAD3C4;
    --soft:  #99907E;
    --line:  #39342B;
    --acc:   #DF7079;
    --acc2:  #B99F6A;
}

/* .txt mode strips the photo */
html[data-txt] aside.portrait { display: none; }

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { margin: 0; padding: 0; }

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--bf);
    font-size: var(--bs);
    line-height: var(--lh);
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: var(--ffs);
    hyphens: auto;
    -webkit-hyphens: auto;
    transition: background 0.35s ease, color 0.35s ease;
    -webkit-font-smoothing: subpixel-antialiased;
}

::selection { background: color-mix(in srgb, var(--acc) 16%, transparent); }

/* barely-perceptible page fade between navigations (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.10s; }
::view-transition-new(root) { animation-duration: 0.18s; }

p { margin: 0 0 1em 0; }

em, book { font-style: italic; }
strong { font-weight: bold; }
.no-hyphens, no-hyphens { hyphens: none; -webkit-hyphens: none; }

/* ---------------------------------------------------------------------------
   3. Links
   --------------------------------------------------------------------------- */

a {
    color: inherit;
    text-decoration: none;
    border-radius: 0.28em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

a:hover {
    background: var(--wash);
    box-shadow: 0 0 0 0.08em var(--wash);
}

/* hanging degree mark after links */
a::after {
    position: relative;
    content: "\FEFF°";
    margin-left: 0.06em;
    font-size: 74%;
    top: -0.32em;
    color: var(--acc);
    font-style: normal;
    font-variant-numeric: normal;
}

/* links that don't take the ° */
a.xref::after,
a[name]::after,
.subhead a::after,
.nav-link::after,
.eyebrow a::after,
#footer a::after {
    content: none;
}

/* internal cross-references read as quiet small caps */
a.xref {
    font-family: var(--cf);
    letter-spacing: 0.04em;
}

/* manual ° (used where the mark needs to sit inside other markup, e.g. nav cv) */
.deg {
    color: var(--acc);
    font-size: 74%;
    vertical-align: 0.3em;
    font-style: normal;
    font-variant-numeric: normal;
}

/* ---------------------------------------------------------------------------
   4. Navigation
   --------------------------------------------------------------------------- */

#top {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 14px var(--pgx) 0 var(--pgx);
}

#nav-desktop {
    border: 1px solid var(--soft);
    box-shadow: 2px 2px 0 var(--ink);
    padding: 0.32em 1em;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1.15em;
    background: var(--paper);
    transition: background 0.35s ease;
}

.nav-link {
    font-family: var(--cf);
    font-size: calc(var(--u) * 0.62);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--soft);
    cursor: pointer;
    white-space: nowrap;
}

.nav-link:hover {
    background: var(--wash);
    box-shadow: 0 0 0 0.18em var(--wash);
}

.nav-link.active {
    color: var(--ink);
    font-weight: bold;
}

/* mobile collapsible nav (design pick N2) */
#nav-mobile {
    display: none;
    border: 1px solid var(--soft);
    box-shadow: 2px 2px 0 var(--ink);
    background: var(--paper);
    transition: background 0.35s ease;
}

#nav-mobile-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    padding: 0.6em 1em;
    cursor: pointer;
}

#nav-mobile-bar .nav-an {
    font-family: var(--cf);
    font-size: calc(var(--u) * 0.64);
    letter-spacing: 0.18em;
    font-weight: bold;
    color: var(--ink);
}

#nav-mobile-bar .nav-an .an-mid { color: var(--acc); }

#nav-mobile-label {
    font-family: var(--cf);
    font-size: calc(var(--u) * 0.62);
    letter-spacing: 0.1em;
    color: var(--soft);
}

#nav-mobile-list {
    border-top: 1px solid var(--line);
    padding: 0.2em 1em 0.45em 1em;
    display: flex;
    flex-direction: column;
}

#nav-mobile-list[hidden] { display: none; }

#nav-mobile-list .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    padding: 0.6em 0;
    border-bottom: 1px solid var(--line);
    font-size: calc(var(--u) * 0.66);
}

#nav-mobile-list .nav-link:last-child { border-bottom: none; }

#nav-mobile-list .nav-link .dot {
    color: var(--acc);
    font-size: calc(var(--u) * 0.5);
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   5. Page layout
   --------------------------------------------------------------------------- */

#page {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--pgx);
}

#doc {
    position: relative;
    margin: 2.4rem 24px 0 var(--gutter);
    min-height: 55vh;
}

/* blog posts: the template adds chrome (eyebrow, title, end mark) around
   #doc, so the measure wrapper moves up a level */
.post-measure {
    position: relative;
    margin: 2.4rem 24px 0 var(--gutter);
    min-height: 55vh;
}

.post-measure #doc {
    position: static;
    margin: 0;
    min-height: 0;
}

/* ---------------------------------------------------------------------------
   6. Titles & headings
   --------------------------------------------------------------------------- */

/* full-measure italic title under a hairline rule (About page, blog posts) */
topic.small {
    display: block;
    border-top: 1px solid var(--ink);
    padding-top: 0.18em;
    margin: 0 0 1.6rem 0;
    font-style: italic;
    font-size: calc(var(--bs) * 1.7);
    line-height: 1.25;
    hyphens: none;
}

/* blog index display title */
topic.commentary {
    display: block;
    font-family: var(--df);
    text-transform: uppercase;
    font-style: normal;
    font-size: calc(var(--u) * 2.2);
    letter-spacing: 0.02em;
    line-height: 1.05;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.3em;
    margin: 0 0 1.6rem 0;
    hyphens: none;
}

/* hanging margin title (Research, Experience, Contact, Colophon) */
title-block {
    display: block;
    float: left;
    position: absolute;
    left: calc(-1 * var(--gutter));
    width: var(--notew);
    text-align: right;
    clear: both;
}

title-block topic,
title-block topic.small {
    display: block;
    border-top: 3px solid var(--ink);
    border-bottom: none;
    margin-top: 0.4rem;
    margin-bottom: 0;
    padding-top: 6px;
    font-family: inherit;
    font-style: italic;
    font-size: calc(var(--bs) * 1.5);
    line-height: 1.18;
    letter-spacing: normal;
    text-transform: none;
    hyphens: none;
}

title-block short-rule {
    display: block;
    margin-top: 0.9em;
    font-style: italic;
    font-size: calc(var(--bs) * 0.78);
    line-height: 1.5;
    color: var(--soft);
}

title-block short-rule:empty { display: none; }

/* section subheads ("academic publications", "professional", …) */
.subhead {
    font-family: var(--cf);
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    font-size: calc(var(--u) * 0.78);
    margin: 2em 0 0.9em 0;
    hyphens: none;
}

.subhead a { color: inherit; }

/* ---------------------------------------------------------------------------
   7. Margin notes
   --------------------------------------------------------------------------- */

aside {
    display: block;
    float: left;
    position: absolute;
    left: calc(-1 * var(--gutter));
    width: var(--notew);
    text-align: right;
    clear: both;
    margin: 0;
    font-variant-numeric: normal;
}

aside p {
    margin: 0;
    font-family: 'heliotrope-t3', Georgia, serif;
    font-size: calc(var(--u) * 0.73);
    line-height: 1.45;
    color: var(--soft);
    hyphens: none;
    letter-spacing: 0.015em;
}

/* labeled margin note — settled style ⅲ: short rule + small-caps crimson label */
aside.labeled .aside-rule {
    border-top: 1px solid var(--soft);
    width: 52px;
    margin: 0.35em 0 0.4em auto;
}

aside.labeled .aside-label {
    font-family: var(--cf);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    font-size: calc(var(--u) * 0.58);
    color: var(--acc);
    margin-bottom: 0.25em;
}

aside.labeled .aside-run-in { display: none; }

/* portrait photo in the margin */
aside.portrait {
    left: calc(-1 * var(--gutter) - 10px);
    width: 220px;
}

aside.portrait p { margin: 0; }

aside.portrait img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    display: block;
    margin-left: auto;
    box-shadow: 2px 2px 0 var(--ink);   /* ink hard shadow, no border (the photo's own edge reads as the edge) */
}

/* footnotes — superscript crimson numerals, notes pinned to markers by site.js */
fn-mark {
    color: var(--acc);
    font-size: 72%;
    vertical-align: 0.32em;
    font-variant-numeric: lining-nums;
    padding: 0 0.18em;
    margin: 0 -0.14em;
    cursor: default;
    transition: text-shadow 0.18s ease;
    text-shadow: 0 0 0 transparent;
    hyphens: none;
}

fn-mark.fn-hot { text-shadow: 0 0 0.8px currentColor; }

aside.footnote p {
    cursor: default;
    transition: color 0.22s ease;
}

aside.footnote.fn-hot p { color: var(--ink); }

aside.footnote .fn-num {
    color: var(--acc);
    font-size: 78%;
    vertical-align: 0.32em;
    font-variant-numeric: lining-nums;
}

/* gathered endnotes (mobile pick B3) — built by site.js, shown < 720px only */
.endnotes { display: none; margin-top: 2.2em; }

.endnotes-title {
    border-top: 1px solid var(--ink);
    padding-top: 0.4em;
    font-family: var(--cf);
    font-weight: bold;
    letter-spacing: 0.08em;
    font-size: calc(var(--u) * 0.68);
    margin-bottom: 0.7em;
}

.endnotes-grid {
    display: grid;
    grid-template-columns: 1.6em 1fr;
    row-gap: 0.55em;
    font-family: 'heliotrope-t3', Georgia, serif;
    font-size: calc(var(--u) * 0.73);
    line-height: 1.45;
    color: var(--soft);
}

.endnotes-grid .fn-num {
    color: var(--acc);
    font-variant-numeric: lining-nums;
}

/* ---------------------------------------------------------------------------
   8. Body blocks
   --------------------------------------------------------------------------- */

/* abstracts under publications */
.indented-justified,
.justified {
    text-align: justify;
    font-size: 94%;
    hyphens: auto;
}

.indented-justified { margin: 0 2.4em 1.5em 2.4em; }

.indented-justified-small {
    margin: 0 2.4em 0.4em 2.4em;
    text-align: justify;
    hyphens: auto;
    text-indent: -0.45em;
    font-size: 96%;
}

.indented { margin: 0 2.4em 1em 2.4em; }

/* quote attribution (◊sig / ◊quote-source) */
sig, .quote-source {
    display: block;
    text-align: right;
    margin: 0 2.4em 1.2em 0;
    font-family: var(--cf);
    font-size: calc(var(--u) * 0.74);
}

sig book, sig em, .quote-source book, .quote-source em {
    font-style: italic;
    font-family: var(--bf);
}

/* blockquotes — hairline (default) and hard-shadow box (◊blockquote-boxed) */
blockquote {
    margin: 0 2.4em 1em 2.4em;
    padding: 0.85em 1.3em;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 90%;
    line-height: 1.42;
}

blockquote.boxed {
    border: 1px solid var(--soft);
    box-shadow: 2px 2px 0 var(--ink);
}

blockquote p { margin: 0 0 0.6em 0; }
blockquote p:last-child { margin-bottom: 0; }

blockquote .quote-source {
    margin: 0.5em 0 0 0;
    font-size: 88%;
}

/* section break — § */
.section-break {
    text-align: center;
    color: var(--soft);
    margin: 1.7em 0;
    font-size: calc(var(--bs) * 1.05);
}

/* dinkus — asterism, one asterisk seated above two */
.dinkus {
    text-align: center;
    color: var(--soft);
    margin: 1.7em 0;
    font-size: calc(var(--bs) * 1.05);
}

.dinkus .dinkus-top { line-height: 1; }

.dinkus .dinkus-bottom {
    line-height: 1;
    margin-top: -0.55em;
    letter-spacing: 0.55em;
    text-indent: 0.55em;
}

/* numbered list with hanging gray figures */
.numbered-grid {
    display: grid;
    grid-template-columns: 2.2em 1fr;
    row-gap: 0.5em;
    margin: 0 0 1.5em 0.4em;
}

.numbered-grid .num-fig { color: var(--soft); }
.numbered-grid p { margin: 0; }

/* colophon's ① ② font list */
.glyph-item {
    display: flex;
    gap: 18px;
    margin: 0 0 1em 1.2em;
}

.glyph-item .glyph-num { color: var(--soft); }
.glyph-item p { margin: 0; }

/* tables — small-caps headers, ink rules top & bottom, hairlines between */
#doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5em 0;
    font-size: 94%;
}

#doc th {
    text-align: left;
    font-family: var(--cf);
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    font-size: calc(var(--u) * 0.62);
    padding: 0.45em 1em 0.45em 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--line);
    color: var(--soft);
    hyphens: none;
}

#doc td {
    padding: 0.5em 1em 0.5em 0;
    border-bottom: 1px solid var(--line);
    vertical-align: baseline;
}

#doc th:last-child, #doc td:last-child { padding-right: 0; }

#doc tbody tr:last-child td { border-bottom: 1px solid var(--ink); }

/* figures */
figure { margin: 1.8em 2.4em; }

figure img {
    width: 100%;
    display: block;
    border: 1px solid var(--line);
}

.fig-placeholder {
    height: 240px;
    border: 1px solid var(--line);
    background: repeating-linear-gradient(45deg,
        transparent, transparent 9px,
        color-mix(in srgb, var(--soft) 10%, transparent) 9px,
        color-mix(in srgb, var(--soft) 10%, transparent) 10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fig-placeholder span {
    font-family: 'triplicate-code', monospace;
    font-size: calc(var(--u) * 0.6);
    color: var(--soft);
    hyphens: none;
    padding: 0 1em;
    text-align: center;
}

figcaption {
    margin-top: 0.65em;
    text-align: center;
    font-family: 'heliotrope-t3', Georgia, serif;
    font-size: calc(var(--u) * 0.7);
    line-height: 1.45;
    color: var(--soft);
}

figcaption .fig-num {
    font-family: var(--cf);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--acc);
    padding-right: 0.6em;
}

/* drop cap + small-caps opening */
.dropcap {
    float: left;
    font-size: calc(var(--bs) * 3.05);
    line-height: 0.82;
    padding: 0.04em 0.07em 0 0;
}

.opening-caps { font-family: var(--cf); }

/* "❧ Incidentally" device */
.incidentally-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 2.4em 0 1.5em 0;
}

.incidentally-head .incid-rule {
    flex: 1;
    border-top: 1px solid var(--line);
}

.incidentally-head .incid-title {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    white-space: nowrap;
}

.incidentally-head .incid-fleuron {
    color: var(--acc);
    font-size: calc(var(--bs) * 0.95);
}

.incidentally-head .incid-label {
    font-family: 'equity-caps', Georgia, serif;
    font-weight: bold;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    font-size: calc(var(--u) * 0.7);
    color: var(--acc2);
}

.incid-items {
    display: grid;
    grid-template-columns: 3em 1fr;
    row-gap: 1em;
    margin: 0 0 1em 0;
}

.incid-items .incid-arrow {
    color: var(--acc);
    font-size: 85%;
    padding-top: 0.2em;
}

.incid-items p { margin: 0; }

/* end marks — the a·n printer's device (style ⅱ) and the ❧ option */
.an-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    margin: 2.4em 0 0.5em 0;
}

.an-device .an-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.an-device .an-rule {
    border-top: 1px solid var(--line);
    width: 44px;
}

.an-device .an-mark {
    font-family: var(--cf);
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    font-size: calc(var(--u) * 0.72);
}

.an-device .an-mid { color: var(--acc); }

.fleuron-end {
    text-align: center;
    color: var(--acc);
    font-size: calc(var(--bs) * 1.25);
    margin: 1.2em 0 0.5em 0;
}

/* ---------------------------------------------------------------------------
   9. Directory rows (Contact + Colophon preferences)
   --------------------------------------------------------------------------- */

.directory { border-bottom: 1px solid var(--line); }

.directory.prefs { margin-bottom: 1.2em; }

.dir-row {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 165px 1fr;
    gap: 1em;
    padding: 0.62em 0;
    align-items: baseline;
}

.dir-label {
    font-family: var(--cf);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--soft);
    font-size: calc(var(--u) * 0.72);
    hyphens: none;
}

.dir-value p { margin: 0; }

.dir-value .font-triplicate-code { font-size: calc(var(--u) * 0.78); line-height: 1.55; }

/* preference options */
.pref-opts {
    display: flex;
    gap: 1.1em;
    flex-wrap: wrap;
    align-items: baseline;
}

.pref-opt {
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0.28em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.pref-opt:hover {
    background: var(--wash);
    box-shadow: 0 0 0 0.08em var(--wash);
}

.pref-opt.on { color: var(--acc); }

.pref-opt.on::after {
    content: "●";
    font-size: 62%;
    vertical-align: 0.32em;
    margin-left: 0.18em;
}

.keys-row {
    font-family: 'triplicate-code', monospace;
    font-size: calc(var(--u) * 0.68);
    color: var(--soft);
    hyphens: none;
}

/* ---------------------------------------------------------------------------
   10. Blog index & post chrome
   --------------------------------------------------------------------------- */

.blog-entry { position: relative; margin-bottom: 1.6em; }

.blog-entry-title {
    margin: 0 0 0.35em 0;
    font-style: italic;
    font-size: 112%;
}

.blog-entry-title a::after { font-size: 70%; top: -0.35em; }

.blog-entry-summary {
    margin: 0;
    color: var(--soft);
    font-size: 94%;
}

/* post eyebrow — variant ⅱ: back link left, "tag · date" right */
.eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    font-family: var(--cf);
    font-size: calc(var(--u) * 0.62);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--soft);
    margin-bottom: 0.45em;
}

.eyebrow a {
    cursor: pointer;
    transition: color 0.2s;
    border-radius: 0;
}

.eyebrow a:hover {
    color: var(--ink);
    background: none;
    box-shadow: none;
}

.eyebrow + topic.small { margin-bottom: 1.4rem; }

/* ---------------------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------------------- */

#footer {
    margin: 5rem 24px 0 0;
    padding-bottom: 44px;
}

#footer .footer-line {
    border-top: 1px solid var(--line);
    padding-top: 0.85em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4em 1em;
    font-family: var(--cf);
    font-size: calc(var(--u) * 0.6);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--soft);
    font-variant-numeric: lining-nums;
}

#footer a {
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
    border-radius: 0;
}

#footer a:hover {
    color: var(--ink);
    background: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   12. Hanging punctuation (root decoder emits push/pull around quotes)
   --------------------------------------------------------------------------- */

dquo-open-push {
    display: inline-block;
    width: 0;
    margin-left: -0.42em;
}

dquo-open-pull { display: inline; }

squo-open-push {
    display: inline-block;
    width: 0;
    margin-left: -0.22em;
}

squo-open-pull { display: inline; }

/* in right-aligned margin notes, hanging into the gutter looks wrong */
aside dquo-open-push,
aside squo-open-push {
    display: initial;
    width: auto;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   13. Inline font-override helpers
   --------------------------------------------------------------------------- */

.font-equity            { font-family: 'equity-text', Georgia, serif; }
.font-concourse         { font-family: 'concourse-text', sans-serif; }
.font-heliotrope        { font-family: 'heliotrope-text', Georgia, serif; }
.font-triplicate        { font-family: 'triplicate', monospace; }
.font-century-supra     { font-family: 'century-supra-text', Georgia, serif; }
.font-advocate          { font-family: 'advocate-c41', sans-serif; }
.font-triplicate-code   { font-family: 'triplicate-code', monospace; hyphens: none; }

.font-equity-caps        { font-family: 'equity-caps', Georgia, serif; }
.font-century-supra-caps { font-family: 'century-supra-caps', Georgia, serif; }
.font-concourse-caps     { font-family: 'concourse-caps', sans-serif; }
.font-heliotrope-caps    { font-family: 'heliotrope-caps', Georgia, serif; }

.font-concourse-t2       { font-family: 'concourse-t2', sans-serif; }
.font-concourse-t3       { font-family: 'concourse-t3', sans-serif; }
.font-concourse-t3-index { font-family: 'concourse-t3-index', sans-serif; }
.font-concourse-t7       { font-family: 'concourse-t7', sans-serif; }
.font-concourse-t8       { font-family: 'concourse-t8', sans-serif; }
.font-concourse-c4       { font-family: 'concourse-c4', sans-serif; }

.font-heliotrope-t3      { font-family: 'heliotrope-t3', Georgia, serif; }
.font-heliotrope-t8      { font-family: 'heliotrope-t8', Georgia, serif; }
.font-heliotrope-c6      { font-family: 'heliotrope-c6', Georgia, serif; }

.font-advocate-c43       { font-family: 'advocate-c43', sans-serif; text-transform: uppercase; font-size: 88%; }
.font-advocate-c53       { font-family: 'advocate-c53', sans-serif; text-transform: uppercase; font-size: 88%; }
.font-advocate-c63       { font-family: 'advocate-c63', sans-serif; text-transform: uppercase; font-size: 88%; }

/* the body face's caps companion (◊sc / caps runs inside citations) */
sc, .sc { font-family: var(--cf); }

monospaced { font-family: 'triplicate-code', monospace; font-size: 92%; hyphens: none; }

/* misc carried-over semantics */
run-in {
    text-transform: lowercase;
    padding-right: 0.4em;
    font-family: 'heliotrope-c6', Georgia, serif;
}

/* ---------------------------------------------------------------------------
   14. Mobile — < 720px (design picks R1 / E1 / B3 / N2)
   --------------------------------------------------------------------------- */

@media (max-width: 719px) {

    :root { --pgx: 20px; }

    #nav-desktop { display: none; }
    #nav-mobile  { display: block; }

    #doc, .post-measure { margin: 1.8rem 0 0 0; }
    .post-measure #doc { margin: 0; }

    /* all margin elements drop into the flow */
    aside,
    title-block {
        float: none;
        position: static;
        left: auto;
        width: auto;
        text-align: left;
    }

    /* E1 — dates sit above each entry */
    aside { margin-bottom: 0.1em; }

    aside p { font-size: calc(var(--u) * 0.68); }

    /* R1 — co-authors as a run-in "with …" line */
    aside.labeled { margin: -0.1em 0 0.6em 0; }
    aside.labeled .aside-rule,
    aside.labeled .aside-label { display: none; }

    aside.labeled .aside-run-in {
        display: inline;
        font-family: var(--cf);
        letter-spacing: 0.08em;
        text-transform: lowercase;
        font-size: calc(var(--u) * 0.58);
        color: var(--acc);
        padding-right: 0.45em;
    }

    aside.labeled p {
        display: inline;
        font-size: calc(var(--u) * 0.73);
    }

    /* portrait — full width under the name */
    aside.portrait {
        width: auto;
        left: auto;
        margin: 0 0 1.5rem 0;
    }

    aside.portrait img {
        width: 100%;
        max-width: 240px; 
        height: auto;
        aspect-ratio: 1 / 1;  
        margin: 0 auto;   
    }

    /* margin titles restack */
    title-block { margin-bottom: 1.3rem; }

    title-block topic,
    title-block topic.small {
        margin-top: 0;
        padding-top: 8px;
        line-height: 1.2;
    }

    title-block short-rule { margin: 0.4em 0 0 0; }

    topic.commentary { font-size: calc(var(--u) * 1.55); }

    /* B3 — footnotes gather as endnotes; margin notes hide once built */
    body.has-endnotes aside.footnote { display: none; }
    .endnotes { display: block; }

    /* block geometry tightens */
    .indented-justified { margin: 0 0 1.5em 1.1em; }
    .indented-justified-small { margin: 0 0 0.4em 1.1em; }
    blockquote { margin: 0 0 1em 1.1em; }
    figure { margin: 1.8em 0; }
    sig, .quote-source { margin: 0 0 1.2em 0; }

    /* directory stacks */
    .dir-row {
        grid-template-columns: 1fr;
        gap: 0.3em;
    }

    /* keyboard hints mean nothing on touch */
    .dir-row.keys { display: none; }

    #footer { margin: 4rem 0 0 0; }
}

/* ---------------------------------------------------------------------------
   15. Print
   --------------------------------------------------------------------------- */

@media print {
    [data-noprint] { display: none !important; }

    html, body {
        background: #ffffff !important;
        color: #111111 !important;
    }

    a::after { color: #111111; }

    fn-mark, aside.footnote .fn-num { color: #111111; }

    .endnotes { display: none; }

    #doc { min-height: 0; }
}