/* main.css */

@layer reset, base;

:root {
    /* Typography */
    --font-body: "EB Garamond", "Crimson Pro", Georgia, serif;
    --font-signature: "Tangerine", "Pinyon Script", cursive;
    --font-size-base: clamp(1.0625rem, 1.25vw + 0.625rem, 1.1875rem);
    --line-height-body: 1.75;
    --line-height-heading: 1.2;
    --measure: 68ch;

    /* Spacing scale */
    --space-xs: 0.375rem;
    --space-s: 0.75rem;
    --space-m: 1.25rem;
    --space-l: 2rem;
    --space-xl: 3.25rem;

    /* Colors — light */
    --color-bg: #e8e3d8;
    --color-surface: #faf7f2;
    --color-border: #d5c9b5;
    --color-text: #1b1714;
    --color-text-muted: #52463a;
    --color-accent: #6b4423;
    --color-accent-hover: #4f301a;
    --color-focus: #b85a00;
    --shadow: 0 2px 6px rgba(0,0,0,0.06), 0 10px 36px rgba(0,0,0,0.10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #181512;
        --color-surface: #211d19;
        --color-border: #382f26;
        --color-text: #ede8df;
        --color-text-muted: #a89277;
        --color-accent: #c9894d;
        --color-accent-hover: #dda668;
        --color-focus: #e8a050;
        --shadow: 0 2px 8px rgba(0,0,0,0.4), 0 10px 36px rgba(0,0,0,0.5);
    }
}

/* reset default styles (based on https://www.joshwcomeau.com/css/custom-css-reset/) */
@layer reset {

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

    /* remove default margin */
    *:not(dialog) {
        margin: 0;
    }

    /* enable keyword animations if supported */
    @media (prefers-reduced-motion: no-preference) {
        @supports (interpolate-size: allow-keywords) {
            html {
                interpolate-size: allow-keywords;
            }
        }
    }

    /* fix body text */
    body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* fix media elements */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    /* fix form elements */
    input, button, textarea, select {
        font: inherit;
    }

    /* fix text overflow */
    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* fix text wrapping */
    p {
        text-wrap: pretty;
    }
    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
    }
}

/* base styles */
@layer base {

    html {
        color-scheme: light dark;
    }

    body {
        font-family: var(--font-body);
        font-size: var(--font-size-base);
        line-height: var(--line-height-body);
        color: var(--color-text);
        background: radial-gradient(ellipse at 50% 0%, #2a2218 0%, #181512 60%);
        min-height: 100svh;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            transition-duration: 0.01ms !important;
        }
    }

    .skip-link {
        position: fixed;
        top: var(--space-s);
        left: var(--space-s);
        padding: var(--space-xs) var(--space-m);
        background: var(--color-accent);
        color: #fff;
        font-family: "Inter", sans-serif;
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-decoration: none;
        border-radius: 3px;
        z-index: 100;
        transform: translateY(-200%);
        transition: transform 0.2s ease;
    }

    .skip-link:focus {
        transform: translateY(0);
    }

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

    .page {
        width: min(var(--measure), 90vw);
        margin: clamp(2rem, 6vw, 5rem) auto;
        background: var(--color-surface);
        padding: clamp(1.75rem, 5vw, 3.5rem);
        border: 1px solid var(--color-border);
        border-radius: 2px;
        box-shadow: var(--shadow);
    }

    main {
        display: flow-root;
    }

    h1 {
        font-family: var(--font-signature);
        font-weight: 700;
        font-style: normal;
        font-size: clamp(2.5rem, 7vw, 4rem);   
        line-height: var(--line-height-heading);
        letter-spacing: -0.03em;                  
        color: var(--color-text);
        margin-block-end: var(--space-l);
        font-feature-settings: normal;
        padding-block-end: var(--space-m);
        border-block-end: 1px solid var(--color-border);
    }

    h2 {
        font-weight: 400;
        font-style: italic;
        font-size: clamp(1.2rem, 2.5vw, 1.5rem);
        line-height: var(--line-height-heading);
        color: var(--color-accent);                   
        margin-block-end: var(--space-m);
        font-feature-settings: "liga" 1, "calt" 1, "swsh" 1;
    }

    h2.section-heading {
        font-style: normal;
        font-variant-caps: small-caps;
        letter-spacing: 0.08em;
        color: var(--color-text-muted);
        font-size: clamp(1.5rem, 2vw, 2rem);
    }

    h2.section-heading::before {
        content: "☽";
        display: inline-block;
        margin-inline-end: 0.5em;
    }
    
    a {
        color: var(--color-accent);
        text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        transition: color 0.15s ease, text-decoration-color 0.15s ease;
    }

    a:hover {
        color: var(--color-accent-hover);
        text-decoration-color: currentColor;
        text-decoration-thickness: 2px;
    }

    a:visited {
        color: color-mix(in srgb, var(--color-accent) 70%, var(--color-text-muted));
    }

    a svg { vertical-align: -0.125em; margin-inline-end: 0.25em; }

    p + p,
    p + .annotated,
    .annotated + p {
        margin-block-start: var(--space-m);
    }

    abbr[title] {
        text-decoration: underline dotted;
        text-decoration-color: var(--color-text-muted);
        text-underline-offset: 3px;
        cursor: help;
    }

    .u-photo {
        float: right;
        margin-inline-start: var(--space-l);
        margin-block-end: var(--space-m);
        max-width: min(14rem, 42%);
        height: auto;
        filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.22));
    }

    article {
        margin-block-end: var(--space-l);
    }

    article > header {
        margin-block-end: var(--space-m);
    }

    article > footer {
        margin-block-start: var(--space-l);
        font-style: italic;
        color: var(--color-text-muted);
    }

    article > footer p + p,
    article > footer p + a {
        display: block;
        margin-block-start: var(--space-xs);
    }

    hr {
        border: none;
        margin-block: var(--space-xl);
        position: relative;
        height: 1.5em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    hr::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        border-block-start: 1px solid var(--color-border);
    }
    
    hr::after {
        content: "✦ ✦ ✦";
        background: var(--color-surface);
        padding-inline: 0.75em;
        color: var(--color-text-muted);
        position: relative;
        z-index: 1;
        font-size: 1.25em;
        line-height: 1;
    }

    section {
        margin-block-start: var(--space-xl);
    }

    dl {
        margin-block-start: var(--space-l);
        display: grid;
        gap: var(--space-l);
    }

    dt {
        font-style: italic;
        font-size: 1.05em;
        color: var(--color-text-muted);
        margin-block-end: var(--space-xs);
    }

    dd {
        padding-inline-start: var(--space-m);
        border-inline-start: 2px solid var(--color-border);
    }

    dd p {
        margin: 0;
    }

    .page > footer {
        margin-block-start: var(--space-xl);
        padding-block-start: var(--space-m);
        border-block-start: 1px solid var(--color-border);
        font-size: 0.85em;
        color: var(--color-text-muted);
    }

    small {
        font-size: 0.875em;
    }

    time {
        font-variant-numeric: tabular-nums;
    }

    p,
    h2 {
        position: relative;
    }

    .anchor-link {
        position: absolute;
        right: 100%;
        padding-inline-end: 0.5em;
        top: 0.1em;
        opacity: 0;
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: 0.8em;
        font-style: normal;
        user-select: none;
        transition: opacity 0.15s ease;
    }

    p:hover > .anchor-link,
    h2:hover > .anchor-link,
    .anchor-link:focus {
        opacity: 1;
    }

    /* Marginalia anchor blocks */
    .annotated {
        position: relative;
    }

    /* The margin note itself */
    .marginalium {
        position: absolute;
        top: 0;
        left: calc(100% + var(--space-m));
        width: 12rem;
        font-size: 0.72em;
        line-height: 1.5;
        font-style: italic;
        color: var(--color-text-muted);
        opacity: 0.38;
        user-select: none;
        text-wrap: pretty;
        hyphens: auto;
    }

    .marginalium:hover {
        opacity: 0.85;
    }

    /* Left-side variant */
    .marginalium.left {
        left: auto;
        right: calc(100% + 6rem);
        text-align: right;
    }

    /* Only show when there's room in the gutters */
    @media (max-width: 76rem) {
        .marginalium {
            display: none;
        }
    }

    article > footer .u-url {
        font-family: var(--font-signature);
        font-size: clamp(2.5rem, 8vw, 4.5rem);
        font-style: normal;
        color: var(--color-accent);
        text-decoration: none;
        line-height: 1.1;
        display: block;
        margin-block-start: var(--space-s);
        font-weight: 700;
    }
    
    article > footer .u-url:hover {
        color: var(--color-accent-hover);
    }

    .enter-link {
        margin-block-start: var(--space-xl);
        text-align: center;
    }
    
    .enter-link a {
        font-family: "Cinzel", "Trajan Pro", Georgia, serif;
        font-size: clamp(1.5rem, 5vw, 2.5rem);
        font-weight: 900;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--color-accent);
        display: inline-block;
        padding-block: var(--space-m);
        padding-inline: var(--space-l);
        border-block: 1px solid var(--color-border);
        transition: color 0.2s ease, border-color 0.2s ease, letter-spacing 0.2s ease;
    }
    
    .enter-link a:hover {
        color: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
        letter-spacing: 0.32em;
    }
}