:root {
    color-scheme: dark;
    --ink: #f1e9dd;
    --muted: #c0b5a6;
    --brass: #d8b775;
    --brass-deep: #b8914a;
    --surface: #24211d;
    --surface-raised: #302b24;
    --line: #ffffff1c;
    --paper: var(--surface);
    --edge: var(--line);
    background: #191612;
}
body {
    background:
        radial-gradient(ellipse 70% 45% at 50% -10%, #55462f55, transparent 70%),
        #191612;
}
a { color: var(--brass); }
a:hover { color: #f0d49a; }
:focus-visible { outline-color: var(--brass); }
h1 { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-weight: 400; letter-spacing: -.01em; }
.skip-link, .skip-link:focus { color: #17140f; background: var(--brass); }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner { padding-block: .6rem; }
.brand { flex: 0 0 220px; }
.main-navigation { background: none; border: 0; border-radius: 0; box-shadow: none; }
.navigation-inner { padding: 0; gap: .3rem; }
.navigation-inner a {
    border: 0;
    border-radius: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .2s ease-out, box-shadow .2s ease-out;
}
.navigation-inner a:hover { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 #ffffff40; }
.navigation-inner a[aria-current] { color: var(--brass); background: none; box-shadow: inset 0 -2px 0 var(--brass); }

.welcome-panel, .links-panel, .message-panel {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 12px 30px #0000004d;
}
.welcome-panel {
    background: radial-gradient(420px circle at top right, #55462f55, transparent 75%), var(--surface);
}
.signature strong { color: var(--brass); }
.section-bar, .card-heading { background: none; color: var(--ink); }
.section-bar {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0 0 .7rem;
    font-family: Georgia, "Palatino Linotype", serif;
    font-weight: 400;
    font-size: 1.25rem;
}
.featured-pen, .pen-card {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 14px 34px #00000059;
}
.featured-pen figcaption { border-top-color: var(--line); color: var(--ink); }
.pen-card { transition: border-color .25s ease-out; }
.pen-card:hover { border-color: #d6b26a59; }
.pen-photo { background: #15120e; }
.pen-photo > img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.pen-photo:hover > img { transform: scale(1.03); }
.photo-action {
    position: relative;
    background: #15120ee6;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .68rem;
}
.pen-photo:hover .photo-action { background: #15120e; color: var(--brass); }
.card-heading h2 { font-family: Georgia, "Palatino Linotype", serif; font-weight: 400; font-size: 1.08rem; }
.pen-details p { color: var(--muted); padding-top: .4rem; }

@media (any-hover: hover) and (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
    .pen-details[data-cursor-glow] { position: relative; isolation: isolate; overflow: hidden; }
    .pen-details[data-cursor-glow]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(220px circle at var(--glow-x, 50%) var(--glow-y, 50%), #55462f55, transparent 75%);
        opacity: 0;
        transition: opacity .2s ease-out;
    }
    .pen-details.is-glowing::before { opacity: 1; }
}

.button { background: var(--brass); border-color: var(--brass); color: #17140f; box-shadow: none; }
.button:hover { background: #e6c47e; color: #17140f; }
.button-secondary { background: transparent; border-color: #ffffff33; color: var(--ink); }
.button-secondary:hover { background: #ffffff0f; border-color: var(--brass); color: var(--ink); }
.button-disabled, .button:disabled { background: transparent; border-color: var(--line); color: #77726b; }
.page-heading p { color: var(--muted); }
.gallery-search input { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
.gallery-search input::placeholder, .search-help, .search-status { color: var(--muted); }
.archive-date, .archive-note { color: #8f8a82; }
.page-number, .page-boundary { color: var(--muted); }
.page-number:hover, .page-boundary:hover { color: var(--ink); background: #ffffff12; }
.page-boundary[aria-disabled="true"] { color: #69666a; }
.page-ellipsis { color: var(--muted); }
.page-number[aria-current="page"] { color: #17140f; background: var(--brass); }

.site-footer { border-top-color: var(--line); color: var(--muted); }
.viewer-caption h2 { font-family: Georgia, "Palatino Linotype", serif; font-weight: 400; }
.photo-viewer::backdrop { background: #100d09c2; backdrop-filter: blur(12px) saturate(.8); }
.viewer-image { box-shadow: 0 20px 54px #00000099, 0 0 52px 10px #d8b7753d; }
.viewer-control { background: #211d19e6; }
.viewer-control:hover:not(:disabled) { background: #393126; }

@media (max-width: 850px) {
    .brand { flex: none; width: 220px; }
}

@media (max-width: 600px) {
    .brand { width: 180px; }
    .navigation-inner a { flex: 1 0 40%; letter-spacing: .08em; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pen-photo:hover > img { transform: none; }
}