/* Shared by card, shelf, workoutparse, teardowns and go: the portfolio's paper and inks, its top bar and the
   lowercase theme toggle. Cream by default; html[data-theme="dark"] is espresso.
   Keep the three copies identical (tests/sites.test.ts checks). */
:root {
    --paper: #f4ecde;
    --sheet: 251, 247, 239;
    --ink: #211e19;
    --muted: #6b6256;
    --faint: #9d9386;
    --rule: #d8cebc;
    --accent: #8e7d67;
    --primary: #322d26;
    --on-primary: #f4ecde;
    --red: #b8432f;
    --blue: #3f5d7d;
    --note: #f3e3b5;
    --amber: #b37b26;
    --green: #567849;
    --plum: #7a4b6b;
    --rust: #93522a;
    --teal: #2b6e69;
    --tab-ink: #fff8ee;
    --bar: rgba(232, 220, 199, 0.9);
    --tape: rgba(201, 189, 167, 0.62);
    --shadow: 40, 26, 14;
    --texture: url('assets/handmade-paper.jpg');
    --veil: rgba(244, 236, 222, 0);
    --ruled: rgba(63, 93, 125, 0.12);
    --margin-line: rgba(184, 67, 47, 0.32);
    --sans: 'Montserrat', system-ui, sans-serif;
    color-scheme: light;
}

:root[data-theme='dark'] {
    --paper: #171512;
    --sheet: 33, 31, 27;
    --ink: #f8f3ea;
    --muted: #b9b0a2;
    --faint: #81786c;
    --rule: #4b463e;
    --accent: #c9bda7;
    --primary: #f3eadb;
    --on-primary: #171512;
    --red: #e0715c;
    --blue: #8fb0d6;
    --note: #4a4130;
    --amber: #d9a54b;
    --green: #93b683;
    --plum: #be92b1;
    --rust: #d58d59;
    --teal: #6db5ae;
    --tab-ink: #17140f;
    --bar: rgba(23, 21, 18, 0.9);
    --tape: rgba(201, 189, 167, 0.28);
    --shadow: 0, 0, 0;
    --texture: url('assets/dark-handmade-paper-1040.jpg');
    --veil: rgba(23, 21, 18, 0.38);
    --ruled: rgba(143, 176, 214, 0.1);
    --margin-line: rgba(224, 113, 92, 0.32);
    color-scheme: dark;
}

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

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

body {
    background-color: var(--paper);
    background-image: linear-gradient(var(--texture-veil), var(--texture-veil)), var(--texture);
    background-size: 100% 100%, 520px auto;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: inherit;
}

img {
    display: block;
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Top bar: the portfolio's nav, lowercase and bold. */
.topbar {
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: var(--bar);
    border-bottom: 1px solid var(--rule);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.7rem max(1.25rem, calc((100vw - 1120px) / 2));
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    text-decoration: none;
}

.brand-mark {
    display: block;
    flex: none;
    height: 40px;
    width: 40px;
}

.brand-mark img {
    height: 100%;
    width: 100%;
}

.brand-mark--small {
    height: 18px;
    width: 18px;
}

:root[data-theme='dark'] .brand-mark img {
    filter: invert(1) brightness(1.2);
}

.brand-wordmark {
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.brand:hover .brand-wordmark {
    color: var(--accent);
}

.nav {
    align-items: center;
    display: flex;
}

.nav-link {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.35rem;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.9rem;
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link::after {
    background: var(--primary);
    bottom: 0.2rem;
    content: '';
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    transition: width 0.3s ease;
    width: 0;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link:hover::after {
    width: 70%;
}

.nav-link svg {
    height: 15px;
    stroke-width: 2.2;
    width: 15px;
}

.theme-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--rule);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.5rem;
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
    padding: 0.5rem 0 0.5rem 1.1rem;
    transition: color 0.3s ease;
}

.theme-toggle:hover {
    color: var(--primary);
}

.theme-toggle-dot {
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
    border: 2px solid currentColor;
    border-radius: 50%;
    display: inline-block;
    height: 0.8rem;
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 0.8rem;
}

:root[data-theme='dark'] .theme-toggle-dot {
    transform: rotate(180deg);
}

/* toggle.js clips the new theme to a growing ink blot. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    z-index: 2;
}

button {
    color: inherit;
    font: inherit;
}

html,
body {
    overflow-x: clip;
}

.kicker {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tape {
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.2) 6px 9px), var(--tape);
    height: 24px;
    position: absolute;
    width: 92px;
}

/* On phones the bar sits at the top of the page and scrolls away with it, rather than staying
   over the content. */
@media (max-width: 640px) {
    .topbar {
        position: relative;
    }
}

@media (max-width: 560px) {
    .nav-link--wide {
        display: none;
    }

    .brand-mark {
        height: 34px;
        width: 34px;
    }

    .brand-wordmark {
        font-size: 1.15rem;
    }
}