:root {
    color-scheme: light;

    --ink: #2b2016;
    --ink-soft: #5a4632;
    --ink-faint: #856a4d;
    --ink-inverse: #f3e7cc;

    --parchment: #ede0c2;
    --parchment-bright: #f6ecd5;
    --parchment-shade: #dccba4;
    --parchment-deep: #c9b489;

    --leather: #241a12;
    --leather-deep: #16100b;

    --gold: #a9832f;
    --gold-bright: #d3ab53;
    --oxblood: #7b2d26;
    --verdigris: #3f6b5c;

    --rule: rgba(80, 58, 34, 0.34);
    --rule-strong: rgba(80, 58, 34, 0.6);

    --accent-hue: 38;
    --accent: hsl(var(--accent-hue) 46% 34%);
    --accent-soft: hsl(var(--accent-hue) 46% 34% / 0.12);
    --accent-line: hsl(var(--accent-hue) 46% 34% / 0.4);

    --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
    --font-heading: "IM Fell English", "EB Garamond", Georgia, serif;
    --font-body: "EB Garamond", "IM Fell English", Georgia, serif;

    --shadow-sheet: 0 22px 48px -26px rgba(20, 12, 6, 0.75);
    --shadow-card: 0 12px 26px -16px rgba(20, 12, 6, 0.6);

    --parchment-image:
        radial-gradient(ellipse at 18% 12%, rgba(255, 250, 235, 0.75), transparent 55%),
        radial-gradient(ellipse at 82% 88%, rgba(255, 248, 228, 0.5), transparent 50%),
        radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(150, 118, 74, 0.28) 100%),
        var(--fibres),
        var(--grain);
    --parchment-blend: screen, screen, multiply, multiply, multiply;
    --parchment-stain:
        radial-gradient(circle at 6% 4%, rgba(120, 88, 48, 0.22), transparent 26%),
        radial-gradient(circle at 96% 22%, rgba(120, 88, 48, 0.16), transparent 22%),
        radial-gradient(circle at 12% 92%, rgba(120, 88, 48, 0.18), transparent 24%),
        radial-gradient(circle at 88% 96%, rgba(120, 88, 48, 0.2), transparent 26%);

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
    --fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)' opacity='0.3'/%3E%3C/svg%3E");
}

* {
    box-sizing: border-box;
    --accent: hsl(var(--accent-hue) 46% 34%);
    --accent-soft: hsl(var(--accent-hue) 46% 34% / 0.12);
    --accent-line: hsl(var(--accent-hue) 46% 34% / 0.4);
}

.codex-sheet,
.print-card,
.category-card,
.overview-hero {
    position: relative;
    background-color: var(--parchment);
    background-image: var(--parchment-image);
    background-blend-mode: var(--parchment-blend);
    color: var(--ink);
    isolation: isolate;
}

.codex-sheet::after,
.print-card::after,
.category-card::after,
.overview-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--parchment-stain);
    mix-blend-mode: multiply;
    border-radius: inherit;
}

.rule-divider {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 1.1rem 0;
    color: var(--accent);
}

.rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent);
    opacity: 0.55;
}

.rule-diamond {
    width: 0.55em;
    height: 0.55em;
    transform: rotate(45deg);
    border: 1px solid currentColor;
    background: currentColor;
    opacity: 0.75;
}

.glyph {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- ornament ---------- */

.codex-sheet::before,
.overview-hero::before {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border: 1px solid var(--card-frame-colour, var(--rule));
    pointer-events: none;
    z-index: 0;
}

.codex-sheet > *,
.overview-hero > *,
.print-card > * {
    position: relative;
    z-index: 1;
}

.corner-flourish {
    position: absolute;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--accent);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}

.corner-flourish-top-left {
    top: 0.45rem;
    left: 0.45rem;
}

.corner-flourish-top-right {
    top: 0.45rem;
    right: 0.45rem;
    transform: scaleX(-1);
}

.corner-flourish-bottom-left {
    bottom: 0.45rem;
    left: 0.45rem;
    transform: scaleY(-1);
}

.corner-flourish-bottom-right {
    bottom: 0.45rem;
    right: 0.45rem;
    transform: scale(-1);
}

.drop-cap::first-letter {
    float: left;
    margin: 0.08em 0.14em 0 0;
    font-family: var(--font-display);
    font-size: 2.9em;
    line-height: 0.82;
    font-weight: 700;
    color: var(--accent);
}