:root {
    --radius: 3px;
    --bg: #ffffff;
    --paper: #ffffff;
    --ink: #222824;
    --muted: #626963;
    --light: #8d958f;
    --line: rgba(34, 40, 36, .13);
    --accent: #365d4c;
    --pine: #365d4c;
    --page-bg: #f0f0f0;
    --header-bg: rgba(255, 255, 255, .94);
    --day-preview-bg: #ffffff;
    --day-preview-ink: #222824;
    --scrollbar-thumb: color-mix(in srgb, var(--ink) 20%, transparent);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--ink) 30%, transparent);
    --poster-height: 500px;
    --frame-max: 1400px;
    --content-max: 1320px;
    --gutter-desktop: 40px;
    --gutter-tablet: 28px;
    --gutter-mobile: 15px;
    --rail-width: 246px;
    --column-gap: 30px;
    --settings-panel-width: 286px;
    --floating-size: 40px;
    --floating-half-size: 20px;
    --floating-anchor-y: 25%;
    --font-main: "Noto Serif SC", "Aurora Song", serif;
    --font-body: var(--font-main);
    --font-original-serif: var(--font-main);
    --font-article: var(--font-main);
    --font-heading: var(--font-main);
    --font-ui: var(--font-main);
    --font-mono: "Aurora Mono", "Noto Serif SC", "Aurora Song", monospace;
    color-scheme: light;
}

html[data-palette="paper"] {
    --bg: #f3ead2;
    --paper: #f8f2df;
    --ink: #2e382f;
    --muted: #6b7065;
    --light: #989a8e;
    --line: rgba(46, 56, 47, .16);
    --accent: #7c6747;
    --pine: #43594a;
    --page-bg: #e5dac0;
    --header-bg: rgba(243, 234, 210, .92);
    --day-preview-bg: #f8f2df;
    --day-preview-ink: #2e382f;
}

html[data-palette="pine"] {
    --bg: #e8ede4;
    --paper: #eef2ea;
    --ink: #2c362a;
    --muted: #5d6b58;
    --light: #899484;
    --line: rgba(44, 54, 42, .14);
    --accent: #527a4a;
    --pine: #3d6136;
    --page-bg: #d5ddd0;
    --header-bg: rgba(232, 237, 228, .92);
    --day-preview-bg: #eef2ea;
    --day-preview-ink: #2c362a;
}

html[data-palette="moon"] {
    --bg: #eef1f4;
    --paper: #f4f6f8;
    --ink: #2d3238;
    --muted: #5d636b;
    --light: #8b929a;
    --line: rgba(45, 50, 56, .14);
    --accent: #4a6d8b;
    --pine: #385573;
    --page-bg: #dbe0e4;
    --header-bg: rgba(238, 241, 244, .92);
    --day-preview-bg: #f4f6f8;
    --day-preview-ink: #2d3238;
}

html[data-color-scheme="night"] {
    --bg: #1a1d21;
    --paper: #23272b;
    --ink: #d4d7db;
    --muted: #949aa1;
    --light: #727981;
    --line: rgba(255, 255, 255, .09);
    --accent: #7ba4c7;
    --pine: #96bcdb;
    --page-bg: #111512;
    --header-bg: rgba(26, 29, 33, .92);
    color-scheme: dark;
}

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

html {
    min-width: min(320px, 100%);
    overflow-y: scroll;
    background: var(--page-bg);
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border-radius: var(--radius);
    background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    /* Reference tile: https://www.evan.xin/bg-w.svg, stored locally. */
    background-color: var(--page-bg);
    background-image: url('../images/evan-bg.svg');
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
button, input, select, textarea, .header-tools,
.settings-panel, .site-footer, .story-kicker, .entry-meta,
.media-page-navigation { font-family: var(--font-ui); }
.main-nav, .mobile-menu { font-family: var(--font-original-serif); }

body::before {
    position: fixed;
    z-index: 20;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
    content: "";
    mix-blend-mode: multiply;
    opacity: .18;
    pointer-events: none;
}

html[data-color-scheme="night"] body::before {
    mix-blend-mode: soft-light;
    opacity: .11;
}

.site-entry-screen {
    position: fixed;
    z-index: 10000;
    inset: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
        var(--page-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.site-entry-pending,
html.site-entry-active {
    overflow-y: scroll;
}

html.site-entry-pending body,
html.site-entry-active body {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
}

html.site-entry-pending,
html.site-entry-pending body {
    background: var(--aurora-entry-boot-bg, var(--page-bg));
}

html.site-entry-pending .site-frame {
    visibility: hidden;
}

html.site-entry-pending .site-entry-screen,
html.site-entry-active .site-entry-screen {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-entry-layout {
    display: flex;
    min-height: 100%;
    padding: 9vh 8vw 6vh;
    flex-direction: column;
    justify-content: space-between;
}

.site-entry-mark,
.site-entry-destination,
.site-entry-copy,
.site-entry-foot {
    font-family: var(--font-ui);
}

.site-entry-mark {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .24em;
}

.site-entry-body {
    width: min(470px, 100%);
}

.site-entry-destination {
    margin: 0 0 15px;
    color: var(--light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.site-entry-quote {
    min-height: 1.55em;
    margin: 0;
    font: 500 clamp(19px, 2.3vw, 26px)/1.55 var(--font-heading);
    letter-spacing: .04em;
}

.site-entry-quote span.is-typing {
    border-right: 1px solid color-mix(in srgb, var(--accent) 88%, transparent);
    animation: site-entry-caret .85s step-end infinite;
}

.site-entry-copy {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.site-entry-progress {
    position: relative;
    width: min(250px, 52vw);
    height: 2px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--line);
}

.site-entry-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 36%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--accent) 24%, var(--accent));
    animation: site-entry-progress 1.4s ease-in-out infinite;
}

.site-entry-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    color: var(--light);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@keyframes site-entry-progress {
    from { transform: translateX(-120%); }
    to { transform: translateX(380%); }
}

@keyframes site-entry-caret {
    0%, 48% { border-right-color: color-mix(in srgb, var(--accent) 88%, transparent); }
    49%, 100% { border-right-color: transparent; }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html.theme-transition-to-night::view-transition-new(root),
html.theme-transition-to-day::view-transition-new(root) {
    z-index: 2;
}

html.theme-transition-to-night::view-transition-old(root),
html.theme-transition-to-day::view-transition-old(root) {
    z-index: 1;
}

html.aurora-pjax-loading {
    cursor: progress;
    overflow-anchor: none;
}

.site-header::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 54%, transparent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: center;
}

html.aurora-pjax-loading .site-header::after {
    animation: aurora-pjax-progress 1.4s cubic-bezier(.2, .72, .2, 1) both;
}

html.aurora-pjax-progress-complete .site-header::after {
    animation: aurora-pjax-progress-complete 420ms cubic-bezier(.2, .72, .2, 1) both;
}

html.aurora-pjax-loading [data-pjax-container],
html.aurora-pjax-loading .site-header,
html.aurora-pjax-loading .floating-tools,
html.aurora-pjax-loading .settings-panel {
    pointer-events: none;
}

html.aurora-pjax-transition .site-header {
    view-transition-name: aurora-header;
}

html.aurora-pjax-transition .floating-tools {
    view-transition-name: aurora-tools;
}

html.aurora-pjax-transition::view-transition-old(root) {
    z-index: 1;
    animation: aurora-page-leave 220ms cubic-bezier(.4, 0, 1, 1) both;
}

html.aurora-pjax-transition::view-transition-new(root) {
    z-index: 2;
    animation: aurora-page-enter 480ms cubic-bezier(.2, .72, .2, 1) 70ms both;
}

html.aurora-pjax-transition::view-transition-old(aurora-header),
html.aurora-pjax-transition::view-transition-new(aurora-header),
html.aurora-pjax-transition::view-transition-old(aurora-tools),
html.aurora-pjax-transition::view-transition-new(aurora-tools) {
    animation: none;
    mix-blend-mode: normal;
}

html.aurora-pjax-transition::view-transition-old(aurora-header),
html.aurora-pjax-transition::view-transition-old(aurora-tools) {
    opacity: 0;
}

@keyframes aurora-page-leave {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: .16;
        transform: translateY(-8px);
    }
}

@keyframes aurora-page-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aurora-pjax-progress {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    12% {
        opacity: 1;
        transform: scaleX(.12);
    }
    100% {
        opacity: 1;
        transform: scaleX(.86);
    }
}

@keyframes aurora-pjax-progress-complete {
    0% {
        opacity: 1;
        transform: scaleX(.7);
    }
    58% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
input,
textarea {
    border-radius: 0;
}

img,
svg {
    display: block;
}

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

::selection {
    color: var(--paper);
    background: var(--accent);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-frame {
    width: min(var(--frame-max), 100%);
    min-height: 100vh;
    margin: 0 auto;
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .34), transparent 27rem),
        radial-gradient(circle at 82% 46%, rgba(139, 111, 71, .04), transparent 32rem),
        var(--bg);
}

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    height: 78px;
    border-bottom: 1px solid var(--line);
    background: var(--header-bg);
    backdrop-filter: blur(14px);
}

.header-inner,
.page-shell,
.site-footer {
    width: min(var(--content-max), calc(100% - (var(--gutter-desktop) * 2)));
    margin-right: auto;
    margin-left: auto;
}

.header-inner {
    display: grid;
    height: 100%;
    grid-template-columns: 236px 1fr auto;
    align-items: center;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 11px;
    min-width: 0;
}

.brand strong {
    flex-shrink: 0;
    overflow: hidden;
    font: 500 27px/1 var(--font-main);
    letter-spacing: .02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand.has-logo { display: grid; justify-items: start; align-items: center; gap: 3px; }
.brand-logo { display: block; flex: 0 0 auto; width: auto; height: 32px; max-width: 150px; object-fit: contain; }
@media(max-width:600px) { .brand-logo { height: 28px; max-width: 160px; } }

.brand small {
    overflow: hidden;
    color: var(--light);
    font: 10px/1 var(--font-ui);
    letter-spacing: .14em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 42px;
    min-width: 0;
    font-size: 14px;
}

.main-nav a, .mobile-menu-nav a {
    -webkit-user-select: none;
    user-select: none;
}

.main-nav a {
    position: relative;
    padding: 28px 0 24px;
    white-space: nowrap;
}

.main-nav a::after {
    position: absolute;
    right: 0;
    bottom: 17px;
    left: 0;
    height: 1px;
    background: var(--accent);
    content: "";
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity 180ms ease, transform 180ms ease;
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.header-tools {
    display: flex;
    width: 230px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--ink);
    transform: translateX(8px);
}

.icon-button,
.floating-tool {
    display: grid;
    padding: 0;
    border: 1px solid transparent;
    color: inherit;
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.icon-button {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

.icon-button svg {
    width: 20px;
    height: 20px;
}

.header-search {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    width: 230px;
    height: 36px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(46, 56, 47, .14);
    border-radius: 999px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--paper) 54%, transparent);
    transition: width 180ms ease, border-color 180ms ease, background 180ms ease;
}

.header-search:focus-within {
    width: 246px;
    border-color: rgba(63, 101, 79, .46);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
}

.header-search svg,
.drawer-search svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: var(--light);
}

.search-submit {
    display: grid;
    flex: 0 0 20px;
    width: 20px;
    height: 28px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.header-search input,
.drawer-search input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font: 11px/1.2 var(--font-ui);
}

.header-search input::placeholder,
.drawer-search input::placeholder {
    color: var(--light);
}

.search-suggestions {
    position: absolute;
    z-index: 72;
    top: calc(100% + 10px);
    right: 0;
    width: min(340px, calc(100vw - 32px));
    padding: 5px 15px 7px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    box-shadow: 0 14px 34px rgba(25, 31, 26, .1);
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 150ms ease, transform 190ms ease;
}

.search-suggestions[hidden] {
    display: none;
}

.search-suggestions.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.search-suggestion-list {
    display: grid;
}

.search-suggestion {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 3px 9px 11px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.search-suggestion:last-child {
    border-bottom: 0;
}

.search-suggestion::before {
    position: absolute;
    top: 10px;
    bottom: 9px;
    left: 0;
    width: 2px;
    background: var(--accent);
    content: "";
    opacity: 0;
    transform: scaleY(.35);
    transition: opacity 150ms ease, transform 180ms ease;
}

.search-suggestion:hover,
.search-suggestion.is-active {
    color: var(--ink);
}

.search-suggestion:hover::before,
.search-suggestion.is-active::before {
    opacity: 1;
    transform: scaleY(1);
}

.search-suggestion-title {
    overflow: hidden;
    font: 500 13px/1.5 var(--font-ui);
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggestion-snippet {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.search-suggestion-hit {
    padding: 0 .08em;
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    font: inherit;
}

.search-suggestion-meta {
    overflow: hidden;
    color: var(--light);
    font: 8px/1.45 var(--font-ui);
    letter-spacing: .08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.search-suggestion-empty {
    margin: 0;
    padding: 16px 4px;
    color: var(--light);
    font-size: 11px;
    text-align: center;
}

.mobile-menu-button {
    display: none;
}

.mobile-menu {
    position: fixed;
    z-index: 61;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 62px 0 20px;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .34), transparent 27rem),
        radial-gradient(circle at 82% 46%, rgba(139, 111, 71, .04), transparent 32rem),
        var(--bg);
    clip-path: circle(0 at calc(100% - 32px) 31px);
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 560ms cubic-bezier(.76, 0, .24, 1), visibility 0s linear 560ms;
}

body.menu-open,
body.menu-closing {
    overflow: hidden;
}

body.menu-open .mobile-menu {
    clip-path: circle(160% at calc(100% - 32px) 31px);
    visibility: visible;
    pointer-events: auto;
    transition: clip-path 560ms cubic-bezier(.76, 0, .24, 1);
}

body.menu-closing .mobile-menu {
    clip-path: circle(0 at calc(100% - 32px) 31px);
    visibility: visible;
    pointer-events: none;
    transition: clip-path 520ms cubic-bezier(.76, 0, .24, 1) 80ms, visibility 0s linear 0s;
}

.mobile-menu-head {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    width: 100%;
    height: 62px;
    padding: 0 var(--gutter-mobile);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.mobile-menu-brand {
    overflow: hidden;
    font: 500 23px/1 var(--font-main);
    letter-spacing: .02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu-close {
    color: var(--ink);
}

#mobile-menu [data-menu-item] {
    opacity: 0;
    transform: translate(18px, -12px);
    transition: opacity 190ms ease, transform 300ms ease;
}

body.menu-open #mobile-menu [data-menu-item] {
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: calc(220ms + (var(--menu-enter-order, 0) * 60ms));
}

body.menu-closing #mobile-menu [data-menu-item] {
    opacity: 0;
    transform: translate(-12px, 7px);
    transition-delay: calc(var(--menu-exit-order, 0) * 50ms);
    transition-duration: 200ms, 260ms;
}

.mobile-menu-nav {
    display: grid;
    min-height: 0;
    width: min(360px, 100%);
    flex: 1;
    grid-template-columns: minmax(74px, 1fr) minmax(140px, 1.25fr);
    align-content: center;
    gap: 58px 42px;
    margin: 0 auto;
    padding: 10px 4px 28px;
}

.mobile-menu-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 18px;
    letter-spacing: .04em;
}

.mobile-menu-nav a.is-active {
    color: var(--ink);
}

.mobile-menu-nav a.is-active::after {
    position: absolute;
    bottom: -13px;
    left: 50%;
    width: 32px;
    height: 4px;
    border-radius: var(--radius);
    background: var(--accent);
    content: "";
    transform: translateX(-50%);
}

.drawer-search {
    position: relative;
    display: flex;
    width: min(150px, 100%);
    height: 42px;
    align-items: center;
    justify-self: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg) 64%, transparent);
}

.mobile-menu-nav.is-even .drawer-search {
    width: min(280px, calc(100vw - 62px));
    grid-column: 1 / -1;
}

.mobile-menu-actions {
    display: grid;
    width: min(280px, 100%);
    flex: 0 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    align-self: center;
    padding: 14px 0 2px;
}

.mobile-menu-actions .rail-action {
    height: 42px;
}

.page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--column-gap);
    margin-top: 28px;
}

.main-column {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}

.side-rail {
    display: flex;
    height: calc(100dvh - 134px);
    min-height: 610px;
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    align-self: start;
    position: sticky;
    top: 106px;
    overflow: hidden auto;
    border-left: 1px solid var(--line);
    padding-left: 28px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.side-rail::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.rail-section {
    border-top: 1px solid var(--line);
    padding: 17px 0;
}

.rail-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.side-rail > [hidden]:first-child + .rail-section,
.side-rail > [hidden]:first-child + [hidden] + .rail-section { border-top: 0; padding-top: 0; }
.cinema-quote[hidden] { display: none; }
.cinema-quote-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-top: 2px; }
.cinema-quote-heading strong { color: var(--ink); font: 500 16px/1.6 var(--font-original-serif); letter-spacing: .07em; }
.cinema-quote-heading > span { flex-shrink: 0; color: var(--light); font: 8px/1.6 var(--font-original-serif); letter-spacing: .1em; }
.cinema-quote-card { position: relative; perspective: 1000px; }
.cinema-quote-card.is-enhanced { cursor: pointer; }
.cinema-quote-inner { display: grid; transform-style: preserve-3d; transition: transform 480ms cubic-bezier(.2, .72, .2, 1); }
.cinema-quote-card.is-flipped .cinema-quote-inner { transform: rotateY(180deg); }
.cinema-quote-face { position: relative; grid-area: 1 / 1; min-width: 0; min-height: 210px; padding: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.cinema-quote-front { isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; color: #fff9e9; background: #43594a; }
.cinema-quote-cover, .cinema-quote-cover::after, .cinema-quote-cover img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cinema-quote-cover { z-index: -1; overflow: hidden; }
.cinema-quote-cover img { display: block; object-fit: cover; transition: transform 460ms ease; }
.cinema-quote-cover::after { content: ""; background: linear-gradient(180deg, rgba(16, 24, 18, .87), rgba(16, 24, 18, .24) 45%, rgba(16, 24, 18, .94)); }
.cinema-quote-byline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cinema-quote-title { position: relative; z-index: 2; min-width: 0; margin-inline: -4px; padding-inline: 4px; border-radius: var(--radius); color: #fff9e9; font: 500 17px/1.5 var(--font-original-serif); letter-spacing: .025em; overflow-wrap: anywhere; text-decoration: none; transition: color 160ms ease, background 160ms ease; }
.cinema-quote-title[href]:hover, .cinema-quote-title:focus-visible { color: #ffe0a2; background: rgba(255, 224, 162, .17); text-decoration: none; }
.cinema-quote-rating { flex-shrink: 0; color: #e5c482; font: 12px/1.6 var(--font-original-serif); white-space: nowrap; }
.cinema-quote-meta { display: flex; flex-wrap: wrap; gap: 3px 9px; margin-top: 7px; color: #e5d8b9; font: 11px/1.7 var(--font-original-serif); }
.cinema-quote blockquote { margin: 0; font: 15px/1.85 var(--font-original-serif); overflow-wrap: anywhere; }
.cinema-quote [data-cinema-text]::before { content: "“"; }
.cinema-quote [data-cinema-text]::after { content: "”"; }
.cinema-quote-card.is-enhanced .cinema-quote-preview > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cinema-quote-flip { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; color: #e5c482; background: transparent; cursor: pointer; }
.cinema-quote-back { display: flex; flex-direction: column; gap: 12px; color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), var(--paper); transform: rotateY(180deg); }
.cinema-quote-kicker { color: var(--accent); font: 11px/1.6 var(--font-original-serif); letter-spacing: .1em; }
.cinema-quote-bottom { margin-bottom: 12px; }
.cinema-quote-back blockquote { display: flex; flex-direction: column; flex: 1; max-height: 260px; text-align: center; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cinema-quote-back blockquote > span { flex-shrink: 0; margin-block: auto; }
.cinema-quote-back cite { align-self: flex-end; margin-top: auto; color: var(--muted); font: 500 13px/1.6 var(--font-original-serif); text-align: right; overflow-wrap: anywhere; }
.cinema-quote-title:focus-visible { outline: 1px solid #ffe0a2; outline-offset: 2px; }
.cinema-quote-flip:focus-visible, .cinema-quote-back:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
.cinema-quote [hidden] { display: none; }
.cinema-quote + .rail-section { border-top: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cinema-quote-card.is-enhanced:not(.is-flipped):hover .cinema-quote-cover img { transform: scale(1.035); } }

.rail-label {
    margin-bottom: 12px;
    color: var(--light);
    font: 10px/1 var(--font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rail-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.rail-index a {
    display: flex;
    min-height: 58px;
    flex-direction: column;
    justify-content: space-between;
    padding: 9px 9px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    background: color-mix(in srgb, var(--paper) 58%, transparent);
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: border-color 180ms ease, transform 180ms ease;
}

.rail-index a:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    transform: translateY(-1px);
}

.rail-index a.is-active,
.rail-index a.is-related {
    border-color: color-mix(in srgb, var(--accent) 62%, transparent);
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 9%, var(--paper));
}

.rail-index a.is-active::before,
.rail-index a.is-related::before {
    width: 19px;
    height: 2px;
    background: var(--accent);
    content: "";
}

.rail-index span {
    color: var(--accent);
    font: 10px/1 var(--font-ui);
    letter-spacing: .08em;
}

.rail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    gap: 0;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.rail-action {
    display: grid;
    height: 34px;
    padding: 0;
    border: 0;
    color: var(--light);
    background: transparent;
    cursor: pointer;
    font: inherit;
    place-items: center;
    transition: color 180ms ease, transform 180ms ease;
}

.rail-action:active {
    background: transparent;
}

.rail-action svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.site-action {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
    .rail-action:hover {
        color: var(--accent);
        transform: translateY(-1px);
    }
}

.login-dialog {
    position: fixed;
    z-index: 10010;
    inset: 0;
    display: grid;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms step-end;
    place-items: center;
}

.login-dialog.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease;
}

.login-dialog-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.login-card {
    position: relative;
    overflow: hidden;
    width: min(360px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 18px 48px rgba(34, 40, 35, .13);
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition: opacity 220ms ease, transform 300ms cubic-bezier(.2, .75, .2, 1);
}

.login-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    content: "";
}

.login-dialog.is-open .login-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 45ms;
}

.login-close {
    position: absolute;
    z-index: 2;
    top: 11px;
    right: 11px;
    color: var(--light);
}

.login-form-panel {
    padding: 32px 30px 26px;
}

.login-kicker {
    margin: 0 0 7px;
    color: var(--accent);
    font: 700 9px/1 var(--font-ui);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.login-card h2 {
    margin: 0 0 22px;
    font: 500 24px/1.2 var(--font-ui);
    letter-spacing: .03em;
}

.login-form {
    display: grid;
    gap: 15px;
}

.login-field {
    display: grid;
    gap: 6px;
}

.login-field label {
    color: var(--light);
    font: 700 9px/1 var(--font-ui);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.login-field input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--line);
    border-width: 0 0 1px;
    border-radius: 0;
    outline: 0;
    padding: 0 4px;
    color: var(--ink);
    background: transparent;
    font: 13px/1 var(--font-ui);
    transition: border-color 180ms ease, background 180ms ease;
}

.login-field input:focus {
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 38%, transparent));
}

.login-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
}

.login-remember input {
    accent-color: var(--accent);
}

.login-submit {
    min-width: 88px;
    height: 35px;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--paper);
    background: var(--accent);
    cursor: pointer;
    font: 11px/1 var(--font-ui);
    letter-spacing: .08em;
    transition: color 170ms ease, background 170ms ease;
}

.login-submit:hover {
    color: var(--accent);
    background: transparent;
}

.login-submit:disabled {
    cursor: wait;
    opacity: .62;
}

.login-status {
    min-height: 16px;
    margin: -1px 0 0;
    color: #9a4d42;
    font-size: 11px;
    line-height: 1.55;
}

.login-status.is-success {
    color: var(--accent);
}

.login-form.is-complete .login-field,
.login-form.is-complete .login-form-row {
    display: none;
}

.featured {
    position: relative;
    height: var(--poster-height);
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--pine);
    box-shadow: 0 7px 22px rgba(37, 44, 38, .11);
}

.feature-slides,
.feature-slide {
    position: absolute;
    inset: 0;
}

.feature-slide {
    z-index: 0;
    isolation: isolate;
    visibility: hidden;
    pointer-events: none;
}

.feature-slide.is-active {
    z-index: 1;
    visibility: visible;
    pointer-events: auto;
}

.feature-slide.is-leaving {
    visibility: hidden;
    transition: visibility 0s linear 520ms;
}

.feature-slide > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-slide::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(17, 24, 20, .77) 0%, rgba(17, 24, 20, .48) 33%, rgba(17, 24, 20, .05) 68%),
        linear-gradient(0deg, rgba(17, 24, 20, .52), transparent 54%);
    content: "";
    pointer-events: none;
}

.feature-slide > img,
.feature-slide::after {
    opacity: 0;
    transition: opacity 520ms cubic-bezier(.2, .72, .2, 1);
}

.feature-slide.is-active > img,
.feature-slide.is-active::after {
    opacity: 1;
}

.feature-copy {
    position: absolute;
    z-index: 2;
    top: 29%;
    left: clamp(32px, 5vw, 68px);
    width: min(620px, 60%);
    color: #f7f1df;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 120ms ease, transform 160ms ease;
}

.feature-slide.is-active .feature-copy {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 280ms ease 140ms, transform 360ms cubic-bezier(.2, .72, .2, 1) 140ms;
}

.feature-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e9dcc1;
    font: 11px/1.2 var(--font-ui);
    letter-spacing: .19em;
    text-transform: uppercase;
}

.feature-eyebrow::before {
    width: 30px;
    height: 1px;
    background: currentColor;
    content: "";
}

.feature-copy h1 {
    margin: 19px 0 12px;
    font-family: var(--font-original-serif);
    font-size: clamp(27px, 2.7vw, 38px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .04em;
    text-wrap: balance;
}

.feature-copy p {
    max-width: 390px;
    margin: 0;
    color: rgba(247, 241, 223, .78);
    font-size: 13px;
    line-height: 1.85;
}

.feature-link {
    display: inline-block;
    margin-top: 23px;
    border-bottom: 1px solid rgba(247, 241, 223, .55);
    padding-bottom: 5px;
    font: 11px/1 var(--font-ui);
    letter-spacing: .08em;
}

.feature-meta {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(247, 241, 223, .72);
    font: 10px/1 var(--font-ui);
    letter-spacing: .06em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .28);
    opacity: 0;
    transition: opacity 120ms ease;
}

.feature-slide.is-active .feature-meta {
    opacity: 1;
    transition: opacity 280ms ease 140ms;
}

.feature-meta time {
    color: rgba(255, 255, 255, .9);
}

.feature-meta i {
    color: rgba(247, 241, 223, .42);
    font-style: normal;
}

.slide-dots {
    position: absolute;
    z-index: 3;
    right: 24px;
    bottom: 16px;
    display: flex;
    gap: 7px;
}

.slide-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
}

.slide-dots button[aria-current="true"] {
    background: #fff;
}

.carousel-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--radius);
    color: #fff;
    background: rgba(20, 29, 23, .34);
    backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    place-items: center;
    transform: translateY(-50%) scale(.92);
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.carousel-prev { left: 17px; }
.carousel-next { right: 17px; }

.featured:hover .carousel-arrow,
.featured:focus-within .carousel-arrow {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.carousel-arrow:hover {
    background: rgba(20, 29, 23, .62);
}

.carousel-arrow svg {
    width: 15px;
    height: 15px;
}

.popular-list {
    display: grid;
    gap: 12px;
    counter-reset: popular;
}

.popular-list a {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
    counter-increment: popular;
    transition: color 180ms ease;
}

.popular-list a::before {
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--accent);
    content: "0" counter(popular);
    font: 9px/1 var(--font-ui);
}

.popular-title {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 180ms ease;
}

.popular-list a:hover .popular-title,
.popular-list a.is-active .popular-title {
    color: var(--ink);
}

.popular-list a.is-active .popular-title {
    font-weight: 600;
}

.popular-list a.is-active::before {
    color: var(--ink);
    font-weight: 700;
}

.popular-views {
    display: flex;
    width: 100%;
    grid-column: 2;
    align-items: center;
    gap: 8px;
    justify-self: stretch;
    color: var(--light);
    font: 8px/1 var(--font-ui);
    letter-spacing: .04em;
}

.popular-views::after {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--line), transparent);
    content: "";
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
}

.tag-cloud a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0 3px 10px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
    transition: color 170ms ease;
}

.tag-cloud a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: var(--radius);
    background: var(--accent);
    content: "";
    transform: translateY(-50%);
    transition: transform 180ms ease;
}

.tag-cloud a:hover,
.tag-cloud a.is-active {
    color: var(--ink);
}

.tag-cloud a:hover::before,
.tag-cloud a.is-active::before {
    transform: translateY(-50%) scale(1.65);
}

.tag-cloud a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-cloud small {
    color: var(--light);
    font: 8px/1 var(--font-ui);
    letter-spacing: .04em;
}

.tag-cloud--post {
    row-gap: 8px;
}

.article-toc {
    padding-top: 0;
    border-top: 0;
}

.article-toc-heading {
    display: block;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-top: 2px;
    border-left: 2px solid var(--accent);
}

.article-toc-title {
    display: grid;
    gap: 4px;
}

.article-toc-title > span {
    display: block;
    color: var(--light);
    font: 7px/1.4 var(--font-ui);
    letter-spacing: .18em;
}

.article-toc-title strong {
    color: var(--ink);
    font: 500 13px/1.5 var(--font-ui);
    letter-spacing: .08em;
}

.article-toc-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-toc-list li {
    min-width: 0;
}

.article-toc-list a {
    position: relative;
    display: block;
    min-width: 0;
    padding: 6px 8px 6px calc(16px + var(--toc-indent, 0px));
    border-radius: var(--radius);
    color: var(--muted);
    background: transparent;
    font-size: 10px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    transition: color 170ms ease, background 180ms ease, box-shadow 180ms ease;
}

.article-toc-list a::before {
    position: absolute;
    top: 50%;
    left: calc(5px + var(--toc-indent, 0px));
    width: 6px;
    height: 1px;
    background: var(--light);
    content: "";
    transform: translateY(-50%);
    transition: width 170ms ease, background 170ms ease;
}

.article-toc-list a:hover,
.article-toc-list a.is-active {
    color: var(--ink);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.article-toc-list a:hover::before,
.article-toc-list a.is-active::before {
    width: 9px;
    background: var(--accent);
}

.archive-heading {
    margin: 22px 0 0;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
}

.archive-heading h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .06em;
}

.archive-heading p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.story-list {
    margin-top: 0;
}

.month-section {
    margin-top: 22px;
    padding-top: 0;
}

.story {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 168px;
    gap: 24px;
    min-height: 148px;
    padding: 24px 0 22px;
    border-bottom: 1px solid var(--line);
}

.story:last-child {
    border-bottom: 0;
}

.story-date {
    padding-top: 2px;
    color: var(--light);
    font: 10px/1.6 var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.story-year {
    display: block;
    margin-bottom: 7px;
    color: var(--accent);
    font: 9px/1 var(--font-ui);
    letter-spacing: .12em;
}

.story-date b {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font: 400 26px/1 var(--font-ui);
}

.story-copy {
    min-width: 0;
    align-self: center;
}

.story-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 10px;
    letter-spacing: .12em;
}

.story-kicker::before {
    width: 18px;
    height: 1px;
    background: currentColor;
    content: "";
}

.story h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .035em;
    text-wrap: pretty;
}

.story h2 a:hover {
    color: var(--accent);
}

.story-excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.85;
    text-indent: 2em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.story-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 11px;
    color: var(--light);
    font: 10px/1 var(--font-ui);
    letter-spacing: .05em;
}

.story-read {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: var(--accent);
    white-space: nowrap;
}

.story-read svg {
    width: 13px;
    height: 13px;
    margin-left: 9px;
}

.story-media {
    width: 168px;
    height: 102px;
    align-self: center;
    overflow: hidden;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--pine) 18%, var(--paper));
}

.story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms ease;
}

.story:hover .story-media img {
    transform: scale(1.025);
}

.story--text .story-copy {
    grid-column: 2 / 4;
}

.empty-state {
    padding: 70px 24px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.empty-state h2 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 500;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.post-pagination,
.post-pagination ol {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.pagination-area {
    margin-top: 28px;
}

.pagination-area .post-pagination {
    margin-top: 0;
}

.load-more, .media-load-more, .life-more {
    width: fit-content;
    min-width: 190px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 24px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 6px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    font: 500 12px/1.6 var(--font-ui);
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.load-more { display: none; margin: 0 auto; }
.media-load-more { border-radius: 12px; }
.load-more::after, .life-more::after { width: 6px; height: 6px; flex-shrink: 0; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; transform: rotate(45deg); }
.media-load-more::after { flex-shrink: 0; content: "↓"; font: 16px/1 var(--font-ui); }
.load-more:hover, .media-load-more:hover, .life-more:hover { border-color: color-mix(in srgb, var(--accent) 48%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.load-more:disabled, .media-load-more[aria-disabled="true"], .life-more[aria-disabled="true"] { opacity: .65; cursor: wait; }
.load-more[aria-busy="true"]::after, .media-load-more[aria-disabled="true"]::after, .life-more[aria-busy="true"]::after { width: 11px; height: 11px; margin-top: 0; border: 1px solid currentColor; border-left-color: transparent; border-radius: 50%; content: ""; transform: none; animation: aurora-load-spin .7s linear infinite; }
.load-more:focus-visible, .media-load-more:focus-visible, .life-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@keyframes aurora-load-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .load-more, .media-load-more, .life-more, .load-more::after, .media-load-more::after, .life-more::after { transition: none; animation: none !important; } }

.has-js[data-pagination-mode="loadmore"] .pagination-area .post-pagination {
    display: none;
}

.has-js[data-pagination-mode="loadmore"] .load-more {
    display: flex;
}

.has-js[data-pagination-mode="loadmore"] .load-more[hidden] {
    display: none;
}

.post-pagination li {
    margin: 0;
}

.post-pagination a,
.post-pagination span {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line);
    place-items: center;
    color: var(--muted);
    font: 10px/1 var(--font-ui);
}

.post-pagination .current > a,
.post-pagination .current > span,
.post-pagination a:hover {
    border-color: var(--accent);
    color: var(--paper);
    background: var(--accent);
}

.content-panel {
    --panel-padding-block: clamp(28px, 5vw, 64px);
    --panel-padding-inline: clamp(20px, 6vw, 76px);
    padding: var(--panel-padding-block) var(--panel-padding-inline);
    border: 0;
    background: transparent;
}

.entry-header {
    margin-bottom: 38px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.entry-header h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .04em;
    text-wrap: balance;
}

/* Independent collection pages share a compact editorial heading. */
.about-page,.archives-page,[data-neighbor-page],.life-page[data-life-page="moments"],.life-page[data-life-page="albums"][data-album-view="index"] { padding-top: 40px; }
.content-panel .section-heading { width: 100%; margin: 0 auto 26px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.about-page .section-heading,.archives-page .section-heading { max-width: 46rem; }
.life-page[data-life-page="moments"] .section-heading,.life-page[data-life-page="moments"] .moment-list { max-width: 812px; margin-inline: auto; }
.life-page[data-album-view="index"] .section-heading { width: 92%; max-width: 812px; }
.section-heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.content-panel .section-heading h1 { min-width: 0; font: 500 34px/1.35 var(--font-heading); letter-spacing: .035em; }
.section-heading-aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; min-width: 0; max-width: 100%; }
.section-heading-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: inherit; gap: 6px 18px; color: var(--muted); font: 400 12px/1.6 var(--font-ui); }
.section-heading-stat { overflow-wrap: anywhere; }
.section-heading-intro { max-width: 42em; margin: 10px 0 0; color: var(--muted); font: 400 14px/1.8 var(--font-body); }
.section-heading-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.section-heading-identity img,.section-heading-monogram { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; background: var(--paper); }
.section-heading-monogram { color: var(--accent); font: 400 24px/1 Georgia,serif; }
.section-heading-identity-name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 400 13px/1.6 var(--font-ui); }
@media(max-width:700px) {
    .about-page,.archives-page,[data-neighbor-page],.life-page[data-life-page="moments"],.life-page[data-life-page="albums"][data-album-view="index"] { padding-top: 28px; }
    .content-panel .section-heading { margin-bottom: 24px; padding-bottom: 16px; }
    .content-panel .section-heading h1 { font-size: 26px; }
    .section-heading-row { gap: 10px 18px; }
    .section-heading-aside { justify-content: flex-start; }
    .section-heading-aside.has-stats { flex-basis: 100%; }
    .section-heading-meta { gap: 4px 14px; }
    .section-heading-intro { margin-top: 9px; }
    .section-heading-identity img,.section-heading-monogram { flex-basis: 40px; width: 40px; height: 40px; }
    .section-heading-identity-name { max-width: 8em; }
}

/* Magazine-style headings pair the introduction with stacked figures. */
.content-panel .bookmark-heading { display: block; width: 100%; min-height: 184px; margin: 0 auto 28px; padding: 13px 8px 16px; border: 0; background: transparent; }
.about-page .bookmark-heading { max-width: 46rem; }
.life-page[data-life-page="moments"] .bookmark-heading { max-width: 812px; }
.life-page[data-album-view="index"] .bookmark-heading { width: 92%; max-width: 812px; }
.bookmark-heading-kicker { margin: 0; color: #5d636b; font: 400 11px/1.7 Georgia,"Times New Roman",serif; letter-spacing: .09em; }
.bookmark-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-top: 11px; }
.bookmark-heading-copy { flex: 1; min-width: 0; }
.content-panel .bookmark-heading h1 { min-width: 0; margin: 0 0 3px; color: var(--ink); font: 600 clamp(34px, 4vw, 52px)/1.25 var(--font-heading); letter-spacing: .02em; overflow-wrap: anywhere; }
.bookmark-heading-stats { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 16px 30px; min-width: 0; }
.bookmark-heading-stat { display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.bookmark-heading-number { min-width: 0; max-width: 100%; color: var(--ink); font: 400 30px/1.1 Georgia,"Times New Roman",serif; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.bookmark-heading-label { color: var(--muted); font: 400 12px/1.5 var(--font-body); }
.bookmark-heading-caption { margin: 13px 0 0; padding-top: 7px; color: var(--muted); font: 400 11px/1.8 Georgia,"Times New Roman",serif; letter-spacing: .1em; }
.bookmark-heading-motto { flex: 0 1 220px; align-self: center; margin: 0; padding: 0; text-align: right; }
.bookmark-heading-motto span { display: block; }
@media(max-width:700px) {
    .content-panel .bookmark-heading { min-height: 0; margin-bottom: 24px; padding: 10px 0 14px; }
    .bookmark-heading-kicker { letter-spacing: .04em; }
    .bookmark-heading-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 13px 16px; }
    .bookmark-heading-copy { display: contents; }
    .content-panel .bookmark-heading h1 { grid-column: 1; grid-row: 1; align-self: center; }
    html[data-language="en"] .bookmark-heading-row { grid-template-columns: max-content minmax(0,1fr); column-gap: 12px; }
    html[data-language="en"] .bookmark-heading-stats { column-gap: 12px; }
    .bookmark-heading-stats { grid-column: 2; grid-row: 1; gap: 12px 17px; }
    .bookmark-heading-number { font-size: 26px; }
    .bookmark-heading-label { font-size: 11px; }
    .bookmark-heading-motto { grid-column: 2; grid-row: 1; max-width: 155px; letter-spacing: .06em; }
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 15px;
    color: var(--light);
    font: 10px/1.5 var(--font-ui);
    letter-spacing: .06em;
}

.entry-content {
    max-width: 46rem;
    margin: 0 auto;
    font-family: var(--font-article);
    font-size: 16px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.entry-content > :first-child {
    margin-top: 0;
}

.entry-content > :last-child {
    margin-bottom: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: inherit;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin: 2em 0 .8em;
    font-weight: 500;
    line-height: 1.4;
    scroll-margin-top: 104px;
}

.entry-content a {
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
    color: var(--accent);
}

.entry-content blockquote {
    margin: 1.8em 0;
    padding: .2em 0 .2em 1.4em;
    border-left: 2px solid var(--accent);
    color: var(--muted);
}

.entry-content pre,
.entry-content code {
    font-family: var(--font-mono);
}

.entry-content pre {
    max-width: 100%;
    overflow: auto;
    padding: 18px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    font-size: 13px;
    line-height: 1.7;
}

.entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    padding: 9px 12px;
    border: 1px solid var(--line);
}

.entry-content img {
    margin: 1.8em auto;
}

.protected {
    padding: 24px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 72%, var(--bg));
}

.protected .word {
    margin-top: 0;
}

.protected p:last-child {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.protected input[type="password"] {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
}

.protected input[type="submit"] {
    padding: 10px 18px;
    border: 1px solid var(--accent);
    color: var(--paper);
    background: var(--accent);
    cursor: pointer;
}

.entry-tags,
.post-near {
    max-width: 46rem;
    margin: 34px auto 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.post-near {
    display: grid;
    gap: 8px;
    padding: 24px 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.error-search input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); outline: 0; color: var(--ink); background: color-mix(in srgb, var(--paper) 76%, transparent); }
.error-search input:focus { border-color: var(--accent); }
.error-search button { min-height: 44px; padding: 0 20px; border: 1px solid var(--accent); color: var(--paper); background: var(--accent); cursor: pointer; }

.collection-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 28px; padding-bottom: 20px; }

.archives-intro { margin-bottom: 28px; }
.archive-years { max-width: 46rem; margin: 0 auto; }
.archive-year { border-bottom: 1px solid var(--line); }
.archive-year summary { display: flex; min-height: 64px; align-items: baseline; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.archive-year summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.archive-year summary::-webkit-details-marker { display: none; }
.archive-year-label { color: var(--ink); font: 500 24px/1.35 var(--font-ui); }
.archive-year summary small { color: var(--muted); font: 12px/1.6 var(--font-ui); }
.archive-year summary::after { align-self: center; width: 7px; height: 7px; margin-left: auto; margin-right: 3px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); content: ""; transform: rotate(45deg); transition: transform 180ms ease; }
.archive-year[open] summary::after { transform: rotate(225deg); }
.archive-year ol { margin: 0; padding: 4px 0 24px; list-style: none; }
.archive-year li { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: baseline; gap: 18px; padding: 10px 0; color: var(--ink); font-size: 15px; line-height: 1.7; }
.archive-date { color: var(--muted); font: 12px/1.7 var(--font-ui); font-variant-numeric: tabular-nums; }
.archive-year a:hover { color: var(--accent); }

.collection-intro {
    margin-bottom: 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line);
}

.link-grid {
    display: grid;
    gap: 18px;
    max-width: 56rem;
    margin: 0 auto;
}

.link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.link-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    min-height: 88px;
    padding: 15px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 82%, var(--bg));
    transition: border-color 180ms ease, transform 180ms ease;
}

.link-card:hover {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    transform: translateY(-2px);
}

.link-card img,
.link-card-mark {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
}

.link-card img {
    object-fit: cover;
}

.link-card-mark {
    display: grid;
    place-items: center;
    color: var(--paper);
    background: var(--accent);
    font: 20px/1 var(--font-ui);
}

.link-card span:last-child {
    min-width: 0;
}

.link-card strong,
.link-card small {
    display: block;
}

.link-card strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-card small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.error-code {
    margin: 0;
    color: color-mix(in srgb, var(--accent) 50%, transparent);
    font: italic clamp(74px, 14vw, 150px)/.9 var(--font-ui);
}

.error-page h1 {
    margin: 20px 0 12px;
    font-weight: 500;
}

.error-page > p {
    color: var(--muted);
}

.error-search {
    display: flex;
    max-width: 420px;
    margin: 28px auto 0;
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 34px;
    padding: 24px 0 28px;
    border-top: 1px solid var(--line);
    color: var(--light);
    font: 10px/1.6 var(--font-ui);
    letter-spacing: .06em;
}

.site-footer > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer-copyright,
.footer-item {
    white-space: nowrap;
}

.footer-copyright > a {
    margin-left: 7px;
}

.footer-item + .footer-item::before {
    margin: 0 7px;
    color: var(--light);
    content: "·";
}

.site-footer a:hover {
    color: var(--accent);
}

.floating-tools {
    position: fixed;
    z-index: 45;
    top: var(--floating-anchor-y);
    right: 0;
    display: grid;
    gap: 3px;
    transform: translateY(calc(-1 * var(--floating-half-size)));
}

.floating-tool {
    position: relative;
    width: var(--floating-size);
    height: var(--floating-size);
    border: 1px solid var(--line);
    border-radius: var(--floating-size) 0 0 var(--floating-size);
    color: var(--muted);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    box-shadow: 0 7px 20px rgba(46, 56, 47, .1);
    backdrop-filter: blur(10px);
    transition: color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.floating-tool:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.floating-tool svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    transform: translate(-50%, -50%);
    transition: transform 260ms cubic-bezier(.2, .75, .2, 1);
}

[data-back-to-top] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(12px) scale(.86);
}

[data-back-to-top].is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.floating-tools.is-settings-open [data-back-to-top] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(12px) scale(.86);
}

.settings-trigger {
    z-index: 2;
    transition-duration: 420ms;
}

.settings-trigger svg {
    animation: settings-gear-spin 4.8s linear infinite paused;
    transition: none;
}

.settings-trigger.is-open {
    border-right: 0;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    box-shadow: none;
    transform: translateX(calc(-1 * var(--settings-panel-width)));
}

.settings-trigger.is-open:focus-visible {
    outline: 0;
    border-color: var(--accent);
}

.settings-trigger.is-open svg {
    animation-play-state: running;
}

@keyframes settings-gear-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.settings-panel {
    position: fixed;
    z-index: 44;
    top: calc(var(--floating-anchor-y) - var(--floating-half-size));
    right: 0;
    width: var(--settings-panel-width);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
    transition: clip-path 420ms cubic-bezier(.2, .78, .18, 1), opacity 120ms ease, visibility 420ms step-end;
}

.settings-panel.is-open {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0);
    pointer-events: auto;
    transition: clip-path 420ms cubic-bezier(.2, .78, .18, 1), opacity 100ms ease;
}

.settings-panel-heading {
    display: flex;
    height: 40px;
    width: 100%;
    margin-left: 0;
    padding: 0 17px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    box-shadow: none;
    backdrop-filter: blur(14px);
}

.settings-panel-heading span {
    color: var(--light);
    font: 700 8px/1 var(--font-ui);
    letter-spacing: .2em;
}

.settings-panel-heading h2 {
    margin: 0;
    font: 500 13px/1 var(--font-ui);
    letter-spacing: .1em;
}

.settings-content {
    max-height: min(520px, calc(75vh - 64px));
    margin-left: 0;
    padding: 17px 16px 16px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-top: 0;
    border-right: 0;
    border-radius: 0 0 0 var(--radius);
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    box-shadow: none;
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 150ms ease, transform 220ms ease;
}

.settings-panel.is-open .settings-content {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 150ms;
}

.settings-section + .settings-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.settings-kicker {
    margin: 0;
}

.settings-kicker {
    color: var(--light);
    font: 700 8px/1.2 var(--font-ui);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.palette-options {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.palette-sample {
    --sample-bg: #ffffff;
    --sample-ink: #222824;
    --sample-accent: #365d4c;
    display: grid;
    min-width: 0;
    min-height: 46px;
    padding: 6px 9px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(46, 56, 47, .13);
    color: var(--sample-ink);
    background: var(--sample-bg);
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.palette-sample[data-palette="paper"] {
    --sample-bg: #f8f2df;
    --sample-ink: #2e382f;
    --sample-accent: #7c6747;
}

.palette-sample[data-palette="pine"] {
    --sample-bg: #eef2ea;
    --sample-ink: #2c362a;
    --sample-accent: #527a4a;
}

.palette-sample[data-palette="moon"] {
    --sample-bg: #f4f6f8;
    --sample-ink: #2d3238;
    --sample-accent: #4a6d8b;
}

.palette-sample:hover,
.palette-sample[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--sample-accent) 64%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sample-accent) 12%, transparent);
}

.palette-sample > span {
    display: grid;
    gap: 3px;
}

.palette-sample strong {
    font: 600 11px/1.2 var(--font-ui);
    letter-spacing: .05em;
}

.palette-sample small,
.palette-sample em {
    font: 700 7px/1 var(--font-ui);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.palette-sample small {
    opacity: .5;
}

.palette-sample em {
    color: var(--sample-accent);
    font-style: normal;
    opacity: 0;
}

.palette-sample[aria-checked="true"] em {
    opacity: 1;
}

.scheme-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 9px;
}

.scheme-options button {
    position: relative;
    display: grid;
    min-height: 62px;
    padding: 9px 8px;
    place-items: center;
    gap: 5px;
    overflow: hidden;
    border: 1px solid var(--line);
    font: 600 10px/1.1 var(--font-ui);
    letter-spacing: .08em;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.scheme-options button[data-scheme-choice="day"] {
    color: var(--day-preview-ink);
    background: var(--day-preview-bg);
}

.scheme-options button[data-scheme-choice="night"] {
    color: #d4d7db;
    background: #1a1d21;
}

.scheme-options button::before {
    position: absolute;
    z-index: 1;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius);
    background: var(--accent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: scale(.65);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .75, .2, 1);
}

.scheme-options button::after {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 12px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: rotate(45deg) scale(.65);
    transform-origin: center;
    transition: opacity 160ms ease, transform 220ms cubic-bezier(.2, .75, .2, 1);
}

.scheme-options button[aria-checked="true"]::before {
    opacity: 1;
    transform: scale(1);
}

.scheme-options button[aria-checked="true"]::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.scheme-options button[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 10%, transparent);
    transform: translateY(-1px);
}

.scheme-options svg {
    width: 20px;
    height: 20px;
}

.site-entry-link {
    position: relative;
    display: grid;
    min-height: 62px;
    padding: 10px 38px 10px 12px;
    align-content: center;
    gap: 5px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--ink) 2%, transparent);
}

.site-entry-link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms cubic-bezier(.2, .75, .2, 1);
}

.site-entry-link > span {
    color: var(--light);
    font: 700 7px/1 var(--font-ui);
    letter-spacing: .18em;
}

.site-entry-link > strong {
    font: 600 12px/1.3 var(--font-ui);
    letter-spacing: .05em;
}

.site-entry-link svg {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    color: var(--accent);
    transform: translateY(-50%);
    transition: transform 220ms ease;
}

.site-entry-link:hover::after,
.site-entry-link:focus-visible::after {
    transform: scaleX(1);
}

.site-entry-link:hover svg,
.site-entry-link:focus-visible svg {
    transform: translate(3px, -50%);
}

@media (min-width: 1401px) {
    .site-frame {
        box-shadow: 0 0 0 1px rgba(46, 56, 47, .13), 0 0 54px rgba(46, 56, 47, .08);
    }
}

@media (max-width: 1280px) {
    :root {
        --poster-height: 450px;
    }
}

@media (max-width: 1100px) {
    :root {
        --poster-height: 430px;
    }

    .header-inner,
    .page-shell,
    .site-footer {
        width: calc(100% - (var(--gutter-tablet) * 2));
    }

    .header-inner {
        grid-template-columns: auto 1fr auto;
    }

    .brand small {
        display: none;
    }

    .main-nav {
        gap: 27px;
    }

    .header-search {
        width: 180px;
    }

    .header-tools {
        width: 180px;
    }

    .header-search:focus-within {
        width: 200px;
    }

    .page-shell {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 24px;
    }

    .side-rail {
        display: none;
    }

    .main-column {
        grid-column: 1;
    }
}

@media (max-width: 700px) {
    :root {
        --poster-height: 220px;
        --settings-panel-width: min(276px, calc(100vw - 52px));
        --floating-size: 34px;
        --floating-half-size: 17px;
    }

    html {
        scroll-behavior: auto;
    }

    .site-header {
        height: 62px;
    }

    .header-inner,
    .page-shell,
    .site-footer {
        width: calc(100% - (var(--gutter-mobile) * 2));
    }

    .header-inner {
        grid-template-columns: 1fr auto;
    }

    .brand strong {
        font-size: 23px;
    }

    .main-nav,
    .header-search {
        display: none;
    }

    .header-tools {
        width: auto;
        gap: 5px;
        transform: none;
    }

    .mobile-menu-button {
        display: grid;
    }

    .login-dialog {
        padding: 18px;
    }

    .login-card {
        width: min(342px, 100%);
    }

    .login-form-panel {
        padding: 30px 24px 24px;
    }

    .page-shell {
        gap: 16px;
        margin-top: 17px;
    }

    .feature-slide::after {
        background:
            linear-gradient(0deg, rgba(17, 24, 20, .84) 0%, rgba(17, 24, 20, .28) 58%, rgba(17, 24, 20, .08) 100%),
            linear-gradient(90deg, rgba(17, 24, 20, .22), transparent 70%);
    }

    .feature-copy {
        top: 27%;
        right: 18px;
        bottom: auto;
        left: 18px;
        width: auto;
    }

    .feature-eyebrow {
        gap: 8px;
        font-size: 8px;
    }

    .feature-eyebrow::before {
        width: 18px;
    }

    .feature-copy h1 {
        margin: 9px 0 7px;
        font-size: 21px;
        line-height: 1.3;
    }

    .feature-copy p {
        display: none;
    }

    .feature-link {
        margin-top: 9px;
        font-size: 9px;
    }

    .feature-meta {
        bottom: 14px;
        left: 14px;
        font-size: 8px;
    }

    .slide-dots {
        right: 14px;
        bottom: 15px;
    }

    .archive-heading {
        margin-top: 16px;
    }

    .month-section {
        margin-top: 16px;
    }

    .story {
        grid-template-columns: 52px minmax(0, 1fr) 88px;
        gap: 12px;
        min-height: 133px;
        padding: 19px 0 18px;
    }

    .story-date {
        font-size: 8px;
    }

    .story-year {
        margin-bottom: 5px;
        font-size: 7px;
    }

    .story-date b {
        margin-bottom: 5px;
        font-size: 20px;
    }

    .story-kicker {
        gap: 7px;
        margin-bottom: 7px;
        font-size: 8px;
    }

    .story-kicker::before {
        width: 12px;
    }

    .story h2 {
        margin-bottom: 6px;
        font-size: 16px;
        line-height: 1.46;
    }

    .story-excerpt {
        font-size: 10px;
        line-height: 1.7;
    }

    .story-foot {
        gap: 8px;
        margin-top: 8px;
        font-size: 8px;
    }

    .story-read svg {
        width: 10px;
        height: 10px;
        margin-left: 6px;
    }

    .story-media {
        width: 88px;
        height: 82px;
    }

    .content-panel {
        --panel-padding-block: 28px;
        --panel-padding-inline: 15px;
        border-right: 0;
        border-left: 0;
    }

    .archive-year li {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        font-size: 13px;
    }

    .link-grid {
        grid-template-columns: 1fr;
    }

    .collection-intro {
        margin-bottom: 26px;
        padding-bottom: 24px;
    }

    .entry-header {
        margin-bottom: 28px;
    }

    .entry-content {
        font-size: 15px;
        line-height: 1.9;
    }

    .entry-content h2,
    .entry-content h3,
    .entry-content h4 {
        scroll-margin-top: 82px;
    }

    .site-footer {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        margin-top: 22px;
        padding: 18px 0 24px;
        overflow: hidden;
        font-size: 9px;
        white-space: nowrap;
    }

    .site-footer > div {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .site-footer.is-footer-centered {
        justify-content: center;
    }

    .site-footer.is-footer-centered .footer-primary {
        justify-content: center;
    }

    .site-footer.is-record-hidden .footer-record,
    .site-footer.is-powered-hidden .footer-powered,
    .site-footer.is-powered-hidden .footer-secondary {
        display: none;
    }

    .floating-tools {
        right: 0;
        gap: 3px;
    }

    .settings-panel {
        right: 0;
    }

    .settings-panel-heading {
        height: 34px;
        padding-right: 13px;
        padding-left: 13px;
    }

    .settings-panel-heading h2 {
        font-size: 12px;
    }

    .settings-content {
        max-height: calc(75vh - 51px);
        margin-left: 0;
        padding: 14px 13px 13px;
    }

    .palette-options {
        gap: 5px;
    }

    .palette-sample {
        min-height: 43px;
    }

    .site-entry-layout {
        padding: 8vh 7vw 5vh;
    }

    .site-entry-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 400px) {
    :root {
        --poster-height: 200px;
    }

    .story {
        grid-template-columns: 46px minmax(0, 1fr) 82px;
        gap: 10px;
    }

    .story-media {
        width: 82px;
        height: 78px;
    }
}

@media (hover: none) {
    .mobile-menu-button,
    .mobile-menu-close,
    .mobile-menu-actions .site-action {
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
    }

    .mobile-menu-button:active,
    .mobile-menu-close:active,
    .mobile-menu-actions .site-action:active {
        background: transparent;
        transform: none;
    }

    .carousel-arrow {
        display: none;
    }

    .story:hover .story-media img {
        transform: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .feature-slide,
    .feature-slide > img,
    .feature-slide::after,
    .feature-copy,
    .feature-meta,
    .cinema-quote-inner {
        transition: none !important;
    }
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .mobile-menu {
        transition-property: clip-path, visibility !important;
        transition-duration: 360ms, 0s !important;
        transition-delay: 0s, 360ms !important;
    }

    body.menu-open .mobile-menu {
        visibility: visible;
        transition-delay: 0s, 0s !important;
    }

    body.menu-closing .mobile-menu {
        visibility: visible;
        transition-duration: 320ms, 0s !important;
        transition-delay: 60ms, 0s !important;
    }

    #mobile-menu [data-menu-item] {
        transform: none !important;
        transition-property: opacity !important;
        transition-duration: 160ms !important;
    }

    body.menu-open #mobile-menu [data-menu-item] {
        transition-delay: calc(140ms + (var(--menu-enter-order, 0) * 36ms)) !important;
    }

    body.menu-closing #mobile-menu [data-menu-item] {
        opacity: 0;
        transform: none !important;
        transition-delay: calc(var(--menu-exit-order, 0) * 30ms) !important;
    }

    .login-dialog {
        transition-duration: 170ms, 170ms !important;
    }

    .login-card {
        transform: none !important;
        transition-duration: 170ms, 170ms !important;
        transition-delay: 0ms !important;
    }

    html.aurora-pjax-loading .site-header::after {
        animation-duration: 480ms !important;
    }

    html.aurora-pjax-progress-complete .site-header::after {
        animation-duration: 340ms !important;
    }

    .settings-trigger {
        transition-duration: 420ms !important;
    }

    .settings-trigger svg {
        animation-duration: 4.8s !important;
        animation-iteration-count: infinite !important;
    }

    .settings-panel {
        transition-duration: 420ms, 120ms, 420ms !important;
    }

    .settings-content {
        transition-duration: 150ms, 220ms !important;
    }

    .site-entry-progress i {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }

    .site-entry-quote span.is-typing {
        animation-duration: .85s !important;
        animation-iteration-count: infinite !important;
    }
}

/* A wider reading measure for articles, shared by their supporting sections. */
.article-page { --reading-width: 52rem; }
.article-page > .entry-content, .article-page > .entry-tags, .article-page > .post-near, .article-page > .comments { max-width: var(--reading-width); }