/* Shared styles for index.html, cv.html and 404.html. */

:root {
    --bg: #ffffff;
    --text: #111111;
    --muted: #555555;
    --rule: #e5e5e5;
    --link: #111111;
    --link-line: #b5b5b5;
    --shot-edge: rgba(0, 0, 0, .12);
    --measure: 38rem;
    color-scheme: light;
}


:root[data-theme="dark"] {
    --bg: #000000;
    --text: #f2f2f2;
    --muted: #a3a3a3;
    --rule: #262626;
    --link: #ffffff;
    --link-line: #5c5c5c;
    --shot-edge: rgba(255, 255, 255, .14);
    color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: var(--link-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 1em; }

h1, h2, h3, h4 { font-weight: 550; line-height: 1.25; margin: 0; }

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    background: var(--text);
    color: var(--bg);
    padding: 8px 12px;
    z-index: 10;
}
.skip-link:focus { top: 12px; }

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

/* Page frame: a narrow label column on the left, text on the right. */

.page {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 16px;
}

.masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 2.5rem 0 .5rem;
}

.name { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.005em; }
.name a { color: var(--text); text-decoration: none; }

.masthead-links { display: flex; gap: 1.25rem; align-items: baseline; font-size: 1rem; }

.theme-toggle {
    font: inherit;
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--link-line);
    text-underline-offset: 3px;
}
.theme-toggle:hover { text-decoration-color: currentColor; }

.block {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 2.5rem;
    padding: 2.25rem 0;
    border-top: 1px solid var(--rule);
}
.block.intro { border-top: 0; padding-top: .75rem; }

.label {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
    padding-top: .2rem;
}

.body { max-width: 46rem; }
.body > :last-child, .feature-text > :last-child { margin-bottom: 0; }
.body > p, .rows, .feature-text, .lead p { max-width: var(--measure); }

.lede { font-size: 1.3rem; line-height: 1.45; }
.now { color: var(--text); }
.now em { color: var(--muted); }
.contact { margin-bottom: 0; }
.contact span { color: var(--rule); margin: 0 .2em; }

/* Projects */

.year {
    color: var(--muted);
    font-family: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 400;
    font-size: .8rem;
    white-space: nowrap;
}
h3 .year, h4 .year { margin-left: .35em; }

.shot-link { display: block; }
.shot-link img {
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--shot-edge);
}

.lead { margin-bottom: 1.5rem; }
.lead .shot-link { margin-bottom: 1.1rem; }
.lead h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.lead h3 a, .feature h4 a { color: var(--text); text-decoration-color: var(--rule); }
.lead h3 a:hover, .feature h4 a:hover { text-decoration-color: currentColor; }

.links a { margin-right: 1.1rem; white-space: nowrap; }
.links { margin-bottom: 0; }

.group {
    font-size: 1.15rem;
    margin: 2.75rem 0 1rem;
}
.group .aside { font-weight: 400; color: var(--muted); font-style: italic; font-size: 1rem; }

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 1.75rem;
    align-items: start;
    margin-bottom: 1.25rem;
}
.feature h4 { font-size: 1.3rem; margin-bottom: .5rem; }
.feature .shot-link { margin-top: .35rem; }
.feature.flip { grid-template-columns: 19rem minmax(0, 1fr); }
.feature.flip .shot-link { order: -1; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: .55rem 0;
    border-top: 1px dotted var(--rule);
}
.rows li:last-child { border-bottom: 1px dotted var(--rule); }
.rows .year { padding-top: .12rem; }
.rows .code { font-size: .9rem; margin-left: .2em; }
.work { margin-bottom: 1.5rem; }

/* Footer */

.colophon { color: var(--muted); font-size: .95rem; padding-bottom: 3rem; }
.colophon p { margin: 0; }

/* CV page */

.cv-page .body { max-width: 42rem; }
.cv-header h1 { font-size: 2rem; margin-bottom: .25rem; }
.cv-header .role { color: var(--muted); font-style: italic; margin-bottom: .6rem; }
.cv-contact { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.cv-contact span { color: var(--muted); }
.cv-item { margin-bottom: 1.6rem; }
.cv-item:last-child { margin-bottom: 0; }
.cv-item h3 { font-size: 1.15rem; }
.cv-item .meta { color: var(--muted); font-size: .95rem; margin: .15rem 0 .5rem; }
.cv-item ul { margin: 0; padding-left: 1.1rem; }
.cv-item li { margin-bottom: .45rem; }
.cv-item li::marker { color: var(--muted); }
.cv-page code { font-size: .85em; }
.inline-list { list-style: none; margin: 0; padding: 0; }
.inline-list li { display: inline; }
.inline-list li:not(:last-child)::after { content: ", "; }

/* 404 */
.notfound h1 { font-size: 1.6rem; margin-bottom: .6rem; }

@media (max-width: 760px) {
    body { font-size: 17px; }
    .masthead { padding-top: 1.5rem; }
    .block { grid-template-columns: minmax(0, 1fr); padding: 1.75rem 0; }
    .label:empty { display: none; }
    .label { margin-bottom: .75rem; padding-top: 0; }
    .lede { font-size: 1.15rem; }
    .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .feature .shot-link, .feature.flip .shot-link { order: -1; margin-top: 0; }
    .rows li { grid-template-columns: 3.6rem minmax(0, 1fr); gap: .75rem; }
    .lead h3 { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}

@media print {
    :root, :root[data-theme="dark"] {
        --bg: #fff; --text: #000; --muted: #333; --rule: #bbb; --link: #000; --link-line: #999;
        color-scheme: light;
    }
    body { font-size: 10.5pt; line-height: 1.45; }
    .no-print, .skip-link, .masthead { display: none !important; }
    .page { max-width: none; padding: 0; }
    .block { grid-template-columns: 7rem minmax(0, 1fr); padding: .8rem 0; break-inside: auto; }
    /* Long entries (the Cayuse role runs past a page) must be allowed to split, or the
       browser pushes them to the next page and leaves a blank page behind. Keep a heading
       with its first lines instead, and keep short list items whole. */
    .cv-item { break-inside: auto; margin-bottom: .8rem; }
    .cv-item h3, .cv-item .meta { break-after: avoid; }
    .cv-item li, .cv-item p { break-inside: avoid; orphans: 3; widows: 3; }
    /* The header runs full width on paper, not squeezed into the label column. */
    .cv-header { display: block; }
    .cv-header > .label { display: none; }
    .cv-header h1 { font-size: 20pt; }
    a { text-decoration: none; }
}