:root {
    --bg: #f6f3ed;
    --surface: #fffcf7;
    --text: #242321;
    --muted: #706c65;
    --line: #dcd5ca;
    --accent: #8a6746;
    --max-width: 1440px;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 5rem;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
    --font-display: Georgia, "Times New Roman", "Batang", serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.container { width: min(100%, var(--max-width)); padding-inline: var(--gutter); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 20; padding: 0.75rem 1rem; background: var(--text); color: var(--surface); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: 1rem; }
.wordmark { display: flex; flex-direction: column; justify-content: center; min-height: 44px; min-width: 0; }
.wordmark > span:first-child { font-family: var(--font-display); font-size: clamp(1.125rem, 3vw, 1.5rem); letter-spacing: 0.07em; }
.wordmark-caption { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--muted); }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-width: 64px; min-height: 44px; padding: 0.5rem; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 0.8125rem; }
.menu-icon { position: relative; width: 20px; height: 12px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.menu-toggle[aria-expanded="true"] .menu-icon { height: 0; border-bottom: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { content: ""; position: absolute; top: -1px; left: 0; width: 20px; border-top: 1px solid currentColor; transform: rotate(90deg); }
.site-nav { flex-basis: 100%; min-width: 0; }
.site-nav ul { display: flex; flex-direction: column; padding: var(--space-1) 0 0; margin: 0; list-style: none; }
.site-nav a, .nav-placeholder { display: flex; align-items: center; min-height: 44px; padding-block: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.065em; overflow-wrap: anywhere; }
.site-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.nav-placeholder { color: var(--muted); cursor: default; }
.admin-item { margin-top: var(--space-1); border-top: 1px solid var(--line); }
.site-nav .admin-link { font-size: 0.75rem; color: var(--muted); }

.home-hero { padding-top: var(--space-5); padding-bottom: var(--space-3); }
.hero-introduction { max-width: 54rem; margin-inline: auto; text-align: center; }
.eyebrow { color: var(--accent); font-size: 0.8125rem; letter-spacing: 0.16em; margin-bottom: var(--space-3); }
.hero-introduction h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.045em; word-break: keep-all; overflow-wrap: anywhere; }
.hero-description { max-width: 40rem; margin: var(--space-3) auto 0; font-size: 0.875rem; line-height: 1.9; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.hero-gallery { margin-top: var(--space-5); }
.gallery-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-2); margin-bottom: var(--space-4); }
.gallery-heading h2 { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; }
.gallery-heading > span { font-size: 0.75rem; letter-spacing: 0.16em; color: var(--muted); }

/* Base card styling; compact compositions below use explicit data-display-index. */
.artwork-composition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); padding-bottom: var(--space-4); }
.artwork-card { min-width: 0; align-self: start; }
.artwork-card:first-child { grid-column: 1 / -1; width: 72%; justify-self: center; }
.artwork-card:nth-child(2n+3) { margin-top: var(--space-4); }
.artwork-frame { padding: clamp(0.375rem, 1vw, 0.875rem); background: var(--surface); box-shadow: 0 12px 26px -18px rgb(53 42 28 / 35%), 0 1px 2px rgb(53 42 28 / 8%); }
.home-hero .artwork-image-link { display: block; color: inherit; }
.artwork-image { width: 100%; height: auto; max-height: 19rem; object-fit: contain; }
/* Landscape-first default: empty (no-image-yet) slots assume a wide frame,
   since real works skew ~70-80% landscape; only the 2n slots default to a
   portrait placeholder instead. Real images never use this ratio -- they get
   is-landscape/is-portrait/is-square from actual derivative dimensions. */
.artwork-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); aspect-ratio: 5 / 4; background: #e8e1d7; color: var(--muted); }
.artwork-placeholder::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgb(112 108 101 / 20%); }
.artwork-card:nth-child(2n) .artwork-placeholder { background: #e3e5df; aspect-ratio: 4 / 5; }
.artwork-card:nth-child(3n) .artwork-placeholder { background: #e8ded5; }
.placeholder-number { font: 400 clamp(2rem, 8vw, 5rem) / 1 var(--font-display); color: #a79d8e; }
.placeholder-caption { position: relative; font-size: 0.75rem; letter-spacing: 0.04em; }
.gallery-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 18rem; padding: var(--space-4); border: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 0.875rem; }
.empty-mark { width: 3rem; height: 4rem; border: 1px solid var(--line); box-shadow: 7px 7px 0 var(--surface); }

@media (min-width: 768px) {
    .home-hero { padding-top: var(--space-6); }
    .hero-description { font-size: 1rem; }
    .artwork-composition { max-width: 48rem; margin-inline: auto; gap: var(--space-5) var(--space-4); }
    .artwork-card:first-child { width: 60%; }
    .artwork-image { max-height: 30rem; }
    /* Portrait/square works never stretch into a landscape-shaped card: the
       frame shrinks and centers instead, so object-fit:contain has less
       empty side padding to fill. object-fit/aspect ratio of the artwork
       itself is untouched -- this only narrows the frame box around it. */
    .artwork-card.is-square .artwork-frame { width: 82%; margin-inline: auto; }
    .artwork-card.is-portrait .artwork-frame { width: 62%; margin-inline: auto; }
}

@media (max-width: 1199.98px) {
    .home-hero { padding-top: var(--space-4); }
    .eyebrow { margin-bottom: var(--space-2); }
    .hero-description { margin-top: var(--space-2); }
    .hero-gallery { margin-top: var(--space-4); }
    .gallery-heading { padding-top: 0.75rem; margin-bottom: var(--space-2); }

    /* Only the rear cards (02/03) are absolute; 01/04/05 stay in normal
       flow so the grid's own row sizing still drives the section height. */
    .artwork-composition {
        position: relative;
        isolation: isolate;
        max-width: 36rem;
        min-height: 400px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(260px, auto) auto;
        gap: var(--space-2);
        margin-inline: auto;
        padding-bottom: 0;
    }
    .artwork-composition .artwork-card {
        width: auto;
        margin: 0;
        grid-column: auto;
        justify-self: stretch;
    }
    .artwork-composition .artwork-frame {
        height: clamp(210px, 60vw, 250px);
        transform: none;
    }
    .artwork-composition .artwork-image,
    .artwork-composition .artwork-placeholder {
        width: 100%;
        height: 100%;
        max-height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
    }
    .artwork-composition .artwork-card[data-display-index="1"] {
        position: relative;
        grid-column: 1 / -1;
        grid-row: 1;
        width: 60%;
        justify-self: center;
        margin-top: 28px;
        z-index: 3;
    }
    .artwork-composition .artwork-card[data-display-index="2"],
    .artwork-composition .artwork-card[data-display-index="3"] {
        position: absolute;
        top: 12px;
        width: 36%;
        z-index: 1;
    }
    .artwork-composition .artwork-card[data-display-index="2"] { left: 1%; }
    .artwork-composition .artwork-card[data-display-index="3"] { right: 1%; top: 54px; }
    .artwork-card[data-display-index="2"] .artwork-frame,
    .artwork-card[data-display-index="3"] .artwork-frame { height: clamp(150px, 43vw, 185px); }
    .artwork-composition .artwork-card[data-display-index="4"],
    .artwork-composition .artwork-card[data-display-index="5"] {
        grid-row: 2;
        width: 76%;
        z-index: 2;
    }
    .artwork-composition .artwork-card[data-display-index="4"] { grid-column: 1; justify-self: start; }
    .artwork-composition .artwork-card[data-display-index="5"] { grid-column: 2; justify-self: end; margin-top: 12px; }
    .artwork-card[data-display-index="4"] .artwork-frame,
    .artwork-card[data-display-index="5"] .artwork-frame { height: 104px; }
    .artwork-composition .placeholder-number { font-size: clamp(2rem, 8vw, 3rem); }
    .artwork-composition .gallery-empty { grid-row: 1 / -1; min-height: 100%; }
}

/* Second-pass proportions are confined to phones; larger layouts stay intact. */
@media (min-width: 360px) and (max-width: 767.98px) {
    .gallery-heading { margin-bottom: 10px; }
    /* min-height trimmed from the shared 400px (<=1199.98px block above,
       still 400px at tablet widths, untouched) to 350px: 04/05's -50px/
       -38px pull-up below reduces row 2's own auto track height too (a
       grid item's negative margin shrinks its contribution to auto track
       sizing), so without this the 400px floor would just reappear as
       dead space under the now-shorter content instead of the section
       actually getting shorter. */
    .artwork-composition { row-gap: 52px; min-height: 350px; }
    /* Narrower than before (was 56%) so the side works (40% each, flush to
       the container edges) are no longer more than half covered by 01. */
    .artwork-composition .artwork-card[data-display-index="1"] { width: 50%; }
    /* Shorter ceiling than before (was 185-220px) so the center work reads
       as a landscape band rather than a tall card; width is unchanged from
       the earlier overlap fix (56% -> 50%) so 02/03 stay more than half
       visible either side. */
    .artwork-card[data-display-index="1"] .artwork-frame {
        height: clamp(150px, 42vw, 180px);
    }
    .artwork-composition .artwork-card[data-display-index="2"],
    .artwork-composition .artwork-card[data-display-index="3"] { width: 40%; }
    .artwork-composition .artwork-card[data-display-index="2"] { left: 0; top: 18px; }
    .artwork-composition .artwork-card[data-display-index="3"] { right: 0; top: 42px; }
    /* 04/05 pulled up ~50px: at this width, row 1's grid-row (minmax(260px,
       auto), set in the shared <=1199.98px block above) is taller than its
       own content ever gets -- 01's frame (clamp 150-180px) plus its 28px
       margin-top only reaches roughly ~205px, leaving ~55px of unused
       floor space before row 2 (04/05) even starts, on top of the 52px
       row-gap. That's the "큰 빈 공간" -- there's ~40-60px of headroom
       before this shift's pulled-up 04/05 could ever reach 02/03's own
       lowest edge (03 bottom ~223px vs 04/05's new top ~262px), so no
       collision with the approved 01/02/03 group. 05 keeps its existing
       12px stagger under 04 (12px - 50px = -38px) rather than landing
       flush with it. Only display-index 4/5 are touched -- 1/2/3's
       position/width/overlap/z-index/frame-height rules above are
       untouched. */
    .artwork-composition .artwork-card[data-display-index="4"] { margin-top: -50px; }
    .artwork-composition .artwork-card[data-display-index="5"] { margin-top: -38px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .home-hero { padding-top: var(--space-5); }
    .hero-gallery { margin-top: var(--space-5); }
    .artwork-composition {
        max-width: 52rem;
        min-height: 480px;
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: 250px minmax(200px, auto);
        column-gap: 0;
        row-gap: var(--space-3);
    }
    .artwork-composition .artwork-card[data-display-index="1"] {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 100%;
        align-self: center;
        margin-top: 0;
    }
    /* Shorter than before (was fixed 310px) so a landscape hero reads as
       wide-and-calm instead of a tall portrait-shaped slot; still tall
       enough for a portrait test image to letterbox safely inside. */
    .artwork-card[data-display-index="1"] .artwork-frame { height: clamp(230px, 32vw, 290px); }
    .artwork-composition .artwork-card[data-display-index="2"],
    .artwork-composition .artwork-card[data-display-index="3"] { width: 28%; }
    .artwork-composition .artwork-card[data-display-index="2"] { top: 24px; }
    .artwork-composition .artwork-card[data-display-index="3"] { top: 0; }
    .artwork-card[data-display-index="2"] .artwork-frame,
    .artwork-card[data-display-index="3"] .artwork-frame { height: 210px; }
    .artwork-composition .artwork-card[data-display-index="4"] { width: 84%; justify-self: center; }
    .artwork-composition .artwork-card[data-display-index="5"] { grid-column: 3; width: 90%; margin-top: 16px; }
    .artwork-card[data-display-index="4"] .artwork-frame,
    .artwork-card[data-display-index="5"] .artwork-frame { height: 148px; }
}

/* Center a lone lower work without enlarging it or covering the tablet main. */
@media (min-width: 360px) and (max-width: 1199.98px) {
    .artwork-composition .artwork-card[data-display-index="4"]:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(38% - 0.38rem);
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .artwork-composition .artwork-card[data-display-index="4"]:last-child {
        grid-row: 3;
        width: 25.2%;
    }
}

@media (min-width: 1200px) {
    .header-inner { flex-wrap: nowrap; gap: var(--space-3); padding-block: 1.25rem; }
    .wordmark > span:first-child { font-size: 1.25rem; white-space: nowrap; }
    .site-nav { flex-basis: auto; }
    .site-nav ul { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem clamp(0.625rem, 1.2vw, 1.5rem); padding: 0; }
    .site-nav a, .nav-placeholder { font-size: 0.75rem; white-space: nowrap; }
    .admin-item { border-top: 0; margin-top: 0; }
    /* Compact editorial composition: title-area and heading-to-grid gaps
       trimmed ~20% (80px->64px, 48px->32px) so the page reads tighter
       without feeling cramped. */
    .home-hero { padding-top: 4rem; }
    .hero-gallery { margin-top: 4rem; }
    .gallery-heading { margin-bottom: 2rem; }
    /* Landscape-first: 01 is a wide single-row hero with 02/03 as a top
       pair and 04/05 as a bottom pair -- "02  03 / 01 wide / 04  05".
       Real works skew ~70-80% landscape, so the hero needs width, not
       height.
       Editorial overlap: row-gap is trimmed to a sliver (0.5rem) and 01/
       04/05 each pull up with a negative margin beyond that gap, so
       adjacent rows overlap by roughly 8-20px of frame/shadow edge (never
       image content -- object-fit stays "contain" and no card's box is
       covered by more than that edge sliver, so every link stays fully
       clickable). All of this is layout-only (margin/grid-row), not a
       transform, so it never competes with the reveal/hover/floating
       transforms below on the same .artwork-card -- and it's what lets
       max-height be reduced too (below) without the rows just leaving
       more empty gap between them.
       z-index is layered by row (1 / 2 / 3, back to front) so the
       lower row visually rises in front of 01 where they meet, matching
       "04/05 rise slightly over 01's bottom edge"; the hover/focus rule
       further down raises whichever single card is interacted with above
       all three tiers. */
    .artwork-composition { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.5rem 1.25%; align-items: start; }
    .artwork-card:nth-child(2) { grid-column: 2 / 7; grid-row: 1; width: 78%; justify-self: start; z-index: 1; }
    .artwork-card:nth-child(3) { grid-column: 8 / 12; grid-row: 1; width: 68%; justify-self: end; margin-top: 0.5rem; z-index: 1; }
    .artwork-card:first-child { grid-column: 4 / 10; grid-row: 2; width: 100%; justify-self: center; z-index: 2; margin-top: -1.75rem; }
    .artwork-card:nth-child(4) { grid-column: 1 / 6; grid-row: 3; width: 66%; justify-self: start; margin-top: -1.25rem; z-index: 3; }
    .artwork-card:nth-child(5) { grid-column: 8 / 13; grid-row: 3; width: 78%; justify-self: end; margin-top: -1.25rem; z-index: 3; }
    .artwork-card:first-child .artwork-frame { transform: translateY(-0.5rem) scale(1.025); }
    /* Caps each row's tallest element so the three-row composition reads as
       one compact block instead of stacking full aspect-ratio heights,
       and -- combined with the tighter row-gap/overlap above -- brings
       the whole composition to roughly 20% less total height than
       before. 01 keeps the tallest cap (still within the 16-17rem range
       that keeps it the clear visual anchor) since it stays the anchor. */
    .artwork-composition .artwork-image,
    .artwork-composition .artwork-placeholder {
        max-height: 12rem;
    }
    .artwork-card:first-child .artwork-image,
    .artwork-card:first-child .artwork-placeholder {
        max-height: 16.5rem;
    }
    .placeholder-number { font-size: clamp(3rem, 5vw, 5rem); }
}

/* HOME featured-work motion (reveal / hover / floating) only. The *static*
   layout properties (grid-column, width, justify-self, margin, top/left,
   and each row's resting z-index) above are never touched here. card1's
   static desktop transform (the .artwork-card:first-child .artwork-frame
   rule in the 1200px block above) is preserved by giving its hover state
   its own higher-specificity rule below instead of overwriting the shared
   .artwork-frame transform. */
@media (prefers-reduced-motion: no-preference) {
    .artwork-composition[data-reveal-ready] .artwork-card {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--reveal-i, 0) * 0.1s);
    }
    .artwork-composition[data-reveal-ready].is-revealed .artwork-card {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    @keyframes artwork-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    .artwork-composition.is-revealed .artwork-card {
        animation-name: artwork-float;
        animation-duration: calc(7s + var(--reveal-i, 0) * 0.5s);
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-delay: calc(0.9s + var(--reveal-i, 0) * 0.1s);
    }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .artwork-card,
    .artwork-frame {
        transition: transform 0.5s ease-out, box-shadow 0.3s ease-out;
    }
    .artwork-card:hover,
    .artwork-card:focus-within {
        animation-name: none;
        transform: translateY(-8px);
    }
    .artwork-card:hover .artwork-frame,
    .artwork-card:focus-within .artwork-frame {
        transform: scale(1.03);
    }
    /* Composed scale reduced from 1.055 to 1.04: 01 is now ~2x wider
       (grid-column 3/11 vs the old 5/9), so the same relative hover zoom
       would grow by more absolute pixels and could crowd 02/03/04/05, which
       now sit directly above/below it instead of beside a narrower hero. */
    .artwork-card:first-child:hover .artwork-frame,
    .artwork-card:first-child:focus-within .artwork-frame {
        transform: translateY(-0.5rem) scale(1.04);
    }
}

/* Overlapping cards means hover/focus needs to visibly come *forward*, not
   just lift -- z-index and a stronger shadow do that job, kept in their
   own rule (ungated by hover-capability/pointer/motion-preference, unlike
   the transform-based lift above) so a keyboard-only user or someone with
   prefers-reduced-motion: reduce still gets a "this card is now in front"
   cue even though the translateY/scale motion above is skipped for them.
   10 clears every row's resting z-index (1/2/3 in the 1200px block above)
   regardless of which row the interacted card is in. */
@media (min-width: 1200px) {
    .artwork-card:hover,
    .artwork-card:focus-within {
        z-index: 10;
    }
    .artwork-card:hover .artwork-frame,
    .artwork-card:focus-within .artwork-frame {
        box-shadow: 0 20px 34px -16px rgb(53 42 28 / 42%), 0 2px 4px rgb(53 42 28 / 10%);
    }
}

/* Artist archive: scoped independently from the HOME composition. */
.artist-page {
    padding-block: var(--space-5) var(--space-6);
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.artist-page .artist-hero { display: grid; gap: var(--space-4); }
.artist-page .artist-hero > * { min-width: 0; }
.artist-page .artist-eyebrow { color: var(--accent); font-size: 0.8125rem; letter-spacing: 0.16em; margin-bottom: var(--space-3); }
.artist-page .artist-name-en { font: 400 clamp(1.75rem, 4vw, 3.25rem) / 1.2 var(--font-display); letter-spacing: 0.025em; }
.artist-page h1 { margin-top: var(--space-2); font-size: 1.25rem; font-weight: 400; }
.artist-page h2 { font-size: 1rem; font-weight: 500; margin-bottom: var(--space-3); }
.artist-page .artist-portrait { margin: 0; padding: var(--space-1); background: var(--surface); }
.artist-page .artist-portrait img { width: 100%; height: auto; max-height: 36rem; object-fit: contain; }
.artist-page .artist-portrait-placeholder { display: grid; place-items: center; min-height: 18rem; aspect-ratio: 4 / 5; padding: var(--space-3); background: var(--line); color: var(--muted); text-align: center; font-size: 0.8125rem; }
.artist-page .artist-prose { max-width: 42rem; min-width: 0; font-size: 0.9375rem; line-height: 1.95; }
.artist-page .artist-prose p + p { margin-top: var(--space-3); }
.artist-page .artist-section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.artist-page .artist-section > * { min-width: 0; }
.artist-page .artist-biography .artist-prose { color: var(--muted); }
.artist-page .artist-studio figure { margin: 0; max-width: 56rem; }
.artist-page .artist-studio img { width: 100%; height: auto; max-height: 40rem; object-fit: contain; }
.artist-page .artist-timeline-list { list-style: none; margin: 0; padding: 0; max-width: 56rem; }
.artist-page .artist-timeline-entry { display: grid; gap: var(--space-2); padding-block: var(--space-3); }
.artist-page .artist-timeline-entry + .artist-timeline-entry { border-top: 1px solid var(--line); }
.artist-page .artist-timeline-entry:first-child { padding-top: 0; }
.artist-page .artist-timeline-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.artist-page .artist-timeline-year { color: var(--accent); font-size: 1rem; }
.artist-page .artist-timeline-date time { font-size: 0.8125rem; color: var(--muted); }
.artist-page .artist-timeline-content { min-width: 0; }
.artist-page .artist-timeline-content h3 { font-size: 0.9375rem; font-weight: 500; }
.artist-page .artist-timeline-content .artist-prose { margin-top: var(--space-1); color: var(--muted); font-size: 0.875rem; }
.artist-page .artist-empty { color: var(--muted); }

@media (min-width: 768px) {
    .artist-page { padding-top: var(--space-6); }
    .artist-page .artist-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--space-5); row-gap: var(--space-4); align-items: start; }
    .artist-page .artist-heading { grid-column: 2; grid-row: 1; }
    .artist-page .artist-portrait { grid-column: 1; grid-row: 1 / 3; }
    .artist-page .artist-introduction, .artist-page .artist-empty { grid-column: 2; grid-row: 2; }
    .artist-page .artist-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); }
    .artist-page .artist-timeline-entry { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); }
    .artist-page .artist-timeline-date { flex-direction: column; gap: 0.25rem; }
}

@media (min-width: 1024px) {
    .artist-page .artist-hero { column-gap: var(--space-6); }
    .artist-page .artist-portrait { max-width: 30rem; }
    .artist-page .artist-section { column-gap: var(--space-6); }
}

/* WORKS uses natural image heights and row-major model ordering. */
.works-page { padding-block: var(--space-5) var(--space-6); }
.works-page .works-eyebrow { color: var(--accent); font-size: 0.8125rem; letter-spacing: 0.16em; margin-bottom: var(--space-2); }
.works-page .works-header h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; }
.works-page .works-description { margin-top: var(--space-2); max-width: 38rem; color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.works-page .works-filters { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-3); margin-block: var(--space-4); border-bottom: 1px solid var(--line); }
.works-page .works-filters > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; max-width: 100%; padding: 0.75rem 0; color: var(--muted); border-bottom: 1px solid transparent; font-size: 0.8125rem; letter-spacing: 0.1em; overflow-wrap: anywhere; }
.works-page .works-filters > a[aria-current="page"] { color: var(--accent); border-bottom-color: currentColor; }
.works-page .works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-5) var(--space-2); }
.works-page .work-card { min-width: 0; width: 100%; }
.works-page .work-card:nth-child(even) { margin-top: var(--space-3); }
.works-page .work-image { width: 100%; height: auto; object-fit: contain; }
.works-page .work-placeholder { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: var(--space-1); background: var(--line); color: var(--muted); text-align: center; font-size: 0.75rem; }
.works-page .work-card:nth-child(even) .work-placeholder { aspect-ratio: 5 / 4; background: #e3e5df; }
.works-page .work-caption { margin-top: 0.75rem; word-break: keep-all; overflow-wrap: anywhere; }
.works-page .work-caption h2 { font-size: 0.8125rem; font-weight: 500; line-height: 1.5; }
.works-page .work-caption p { color: var(--muted); font-size: 0.8125rem; line-height: 1.65; margin-top: 0.25rem; }
.works-page .work-caption .work-series { margin-top: var(--space-1); }
.works-page .works-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; padding-block: var(--space-3); }

@media (min-width: 768px) {
    .works-page { padding-top: var(--space-6); }
    .works-page .works-filters { margin-block: var(--space-5); }
    .works-page .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
    .works-page .work-card:nth-child(even) { margin-top: 0; }
    .works-page .work-card:nth-child(3n+2) { width: 90%; justify-self: center; margin-top: var(--space-4); }
}

@media (min-width: 1024px) {
    .works-page .works-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
    .works-page .work-card:nth-child(3n+2) { width: 100%; margin-top: 0; }
    .works-page .work-card:nth-child(4n+2) { width: 88%; justify-self: center; margin-top: var(--space-4); }
    .works-page .work-card:nth-child(4n+4) { width: 94%; justify-self: end; margin-top: var(--space-2); }
}

/* Compact WORKS spacing without changing image sizing or desktop layouts. */
@media (min-width: 360px) and (max-width: 1023px) {
    .works-page .works-filters { margin-block: var(--space-3); }
    .works-page .works-filters > a { padding-block: var(--space-1); }
    .works-page .work-placeholder { max-height: 200px; }
    .works-page .work-caption { margin-top: 10px; }
    .works-page .work-caption h2 { line-height: 1.4; }
    .works-page .work-caption p { line-height: 1.45; margin-top: 2px; }
    .works-page .work-caption .work-series { margin-top: 4px; font-size: 0.75rem; }
}

@media (min-width: 360px) and (max-width: 767px) {
    .works-page .works-grid { row-gap: var(--space-4); }
    .works-page .work-placeholder { aspect-ratio: 5 / 6; max-height: 180px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .works-page .works-grid { row-gap: var(--space-5); }
    .works-page .works-filters { margin-block: var(--space-4); }
}

.works-page .work-image-link { display: block; }

.works-page .works-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem; margin-top: var(--space-5); font-size: 0.8125rem; color: var(--muted); }
.works-page .works-pagination > a,
.works-page .works-pagination > span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.5rem; }
.works-page .works-pagination [aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.works-page .works-pagination .works-pagination-ellipsis { min-width: 24px; }

/* WORKS card motion: quieter than HOME (weaker reveal, zoom-only hover, no
   card lift, no floating). Reveal observes each .work-card individually so
   a long/paginated grid reveals as cards actually scroll into view, rather
   than all at once when the grid top appears. */
@media (prefers-reduced-motion: no-preference) {
    .works-page .works-grid[data-reveal-ready] .work-card {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.55s ease-out, transform 0.55s ease-out;
        transition-delay: calc(var(--reveal-i, 0) * 0.075s);
    }
    .works-page .works-grid[data-reveal-ready] .work-card.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .works-page .work-image-link {
        overflow: hidden;
    }
    .works-page .work-image,
    .works-page .work-placeholder {
        transition: transform 0.45s ease-out;
    }
    .works-page .work-card:hover .work-image,
    .works-page .work-card:hover .work-placeholder,
    .works-page .work-card:focus-within .work-image,
    .works-page .work-card:focus-within .work-placeholder {
        transform: scale(1.025);
    }
}

/* Artwork detail has its own scope; existing gallery compositions stay intact. */
.work-detail-page { padding-block: var(--space-5) var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.work-detail-page .work-detail-intro { display: grid; gap: var(--space-4); }
.work-detail-page .work-detail-intro > * { min-width: 0; }
.work-detail-page .work-detail-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 0.8125rem; margin-bottom: var(--space-2); }
.work-detail-page h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 400; line-height: 1.3; }
.work-detail-page .work-detail-title-en { color: var(--muted); font-size: 0.875rem; margin-top: var(--space-1); }
.work-detail-page .work-detail-meta { display: grid; gap: 0.75rem; margin: var(--space-3) 0 0; font-size: 0.8125rem; }
.work-detail-page .work-detail-meta > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-1); }
.work-detail-page dt { color: var(--muted); }
.work-detail-page dd { margin: 0; }
.work-detail-page dd span { display: block; color: var(--muted); font-size: 0.8125rem; }
.work-detail-page figure { margin: 0; }
.work-detail-page img { width: 100%; height: auto; object-fit: contain; }
.work-detail-page .work-detail-main { width: 100%; max-width: 54rem; justify-self: center; }
.work-detail-page .work-detail-main img { max-height: 48rem; }
.work-detail-page .work-detail-placeholder { display: grid; place-items: center; min-height: 16rem; padding: var(--space-4); background: var(--surface); color: var(--muted); font-size: 0.875rem; text-align: center; }
.work-detail-page h2 { font-size: 1rem; font-weight: 500; margin-bottom: var(--space-3); }
.work-detail-page .work-detail-description { max-width: 42rem; margin: var(--space-5) auto 0; font-size: 0.9375rem; line-height: 1.95; }
.work-detail-page .work-detail-description p + p { margin-top: var(--space-3); }
.work-detail-page .work-detail-gallery { max-width: 68rem; margin: var(--space-6) auto 0; }
.work-detail-page .work-detail-gallery figure + figure { margin-top: var(--space-5); }
.work-detail-page .work-detail-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); border-top: 1px solid var(--line); margin-top: var(--space-6); padding-top: var(--space-3); }
.work-detail-page .work-detail-navigation a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding-block: var(--space-1); gap: 0.375rem; font-size: 0.8125rem; }
.work-detail-page .work-detail-navigation small { color: var(--muted); font-size: 0.8125rem; }
.work-detail-page .work-detail-previous { grid-column: 1; }
.work-detail-page .work-detail-next { grid-column: 2; text-align: right; }

@media (min-width: 768px) {
    .work-detail-page { padding-top: var(--space-6); }
    .work-detail-page .work-detail-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
    .work-detail-page .work-detail-description { margin-top: var(--space-6); }
    .work-detail-page .work-detail-gallery figure + figure { margin-top: var(--space-6); }
}

@media (min-width: 1024px) {
    .work-detail-page .work-detail-intro { gap: var(--space-6); }
    .work-detail-page .work-detail-header { max-width: 25rem; }
}

@media (min-width: 360px) and (max-width: 767px) {
    .work-detail-page .work-detail-intro { gap: var(--space-3); }
    .work-detail-page .work-detail-back { margin-bottom: var(--space-1); }
    .work-detail-page .work-detail-meta { gap: 0.625rem; margin-top: 1.25rem; }
    .work-detail-page .work-detail-meta > div { column-gap: 0.375rem; }
    .work-detail-page .work-detail-description { margin-top: var(--space-4); }
    .work-detail-page .work-detail-description h2 { margin-bottom: var(--space-2); }
    .work-detail-page .work-detail-navigation {
        margin-top: var(--space-5);
        padding-top: var(--space-2);
        gap: var(--space-2);
        align-items: stretch;
    }
    .work-detail-page .work-detail-navigation a {
        min-width: 0;
        min-height: 56px;
        justify-content: flex-start;
        padding: 0.75rem 0.25rem;
    }
    .work-detail-page .work-detail-navigation a:only-child {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }
}

/* Public news uses a regular editorial list, independently of artwork layouts. */
.news-page { padding-block: var(--space-5) var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.news-page .news-header { max-width: 44rem; margin-bottom: var(--space-5); }
.news-page .news-eyebrow { color: var(--accent); font-size: 0.8125rem; letter-spacing: 0.16em; margin-bottom: var(--space-2); }
.news-page h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; }
.news-page .news-description { color: var(--muted); font-size: 0.875rem; margin-top: var(--space-2); }
.news-page .news-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--space-5) - var(--space-1)) var(--space-5); }
.news-page .news-card { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--space-3); }
.news-page .news-cover img { width: 100%; height: auto; max-height: 24rem; object-fit: contain; }
.news-page .news-cover { display: block; }
.news-page .news-placeholder { display: grid; place-items: center; aspect-ratio: 3 / 2; max-height: 24rem; background: var(--surface); color: var(--muted); font-size: 0.8125rem; }
.news-page .news-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-block: var(--space-3) var(--space-1); font-size: 0.8125rem; color: var(--muted); }
.news-page .news-category { color: var(--accent); }
.news-page h2 { font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.news-page .news-title-en { margin-top: var(--space-1); color: var(--muted); font-size: 0.8125rem; }
.news-page .news-summary { margin-top: var(--space-2); max-width: 40rem; font-size: 0.875rem; line-height: 1.85; }
.news-page .news-exhibition-dates,
.news-page .news-venue { margin-top: var(--space-2); color: var(--muted); font-size: 0.8125rem; }
.news-page .news-exhibition-dates > span { display: block; margin-bottom: 0.25rem; }
.news-page .news-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; }

@media (min-width: 768px) {
    .news-page { padding-top: var(--space-6); }
    .news-page .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--space-6) * 0.85) var(--space-4); }
}

@media (min-width: 1024px) {
    .news-page .news-list { column-gap: var(--space-5); }
    .news-page .news-cover { display: flex; align-items: center; justify-content: center; height: 24rem; }
    .news-page .news-placeholder { width: 100%; }
}

.news-detail-page { padding-block: var(--space-4) var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.news-detail-page .news-detail-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-3); color: var(--accent); font-size: 0.8125rem; }
.news-detail-page .news-detail-intro { display: grid; gap: var(--space-4); }
.news-detail-page .news-detail-intro > * { min-width: 0; }
.news-detail-page .news-detail-header { max-width: 48rem; }
.news-detail-page .news-detail-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--muted); font-size: 0.8125rem; }
.news-detail-page .news-detail-meta > span { color: var(--accent); }
.news-detail-page h1 { font: 400 clamp(1.75rem, 4vw, 3rem) / 1.35 var(--font-display); }
.news-detail-page .news-detail-title-en { margin-top: var(--space-2); color: var(--muted); font-size: 0.875rem; }
.news-detail-page .news-detail-exhibition { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: 0.8125rem; }
.news-detail-page .news-detail-exhibition > div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-2); }
.news-detail-page dt { color: var(--muted); }
.news-detail-page dd, .news-detail-page figure { margin: 0; }
.news-detail-page img { width: 100%; height: auto; object-fit: contain; }
.news-detail-page .news-detail-main-image { width: 100%; max-width: 52rem; justify-self: center; }
.news-detail-page .news-detail-main-image img { max-height: 42rem; }
.news-detail-page .news-detail-body { max-width: 42rem; margin: calc(var(--space-5) * 0.85) auto 0; font-size: 0.9375rem; line-height: 1.95; }
.news-detail-page .news-detail-body p + p { margin-top: var(--space-3); }
.news-detail-page .news-detail-external { max-width: 42rem; margin: var(--space-4) auto 0; }
.news-detail-page .news-detail-external a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 5px; }
.news-detail-page .news-detail-gallery { max-width: 64rem; margin: var(--space-5) auto 0; }
.news-detail-page .news-detail-gallery figure + figure { margin-top: var(--space-5); }
.news-detail-page .news-detail-gallery img { max-height: 56rem; }
.news-detail-page figcaption { margin-top: var(--space-2); color: var(--muted); font-size: 0.8125rem; }

@media (min-width: 768px) {
    .news-detail-page { padding-top: var(--space-5); }
    .news-detail-page .news-detail-with-cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-5); align-items: start; }
}

@media (min-width: 1024px) {
    .news-detail-page .news-detail-with-cover { gap: var(--space-6); }
    .news-detail-page .news-detail-gallery { margin-top: var(--space-6); }
}

/* HOME news stays in normal flow beneath the artwork composition. */
.home-news { padding-block: var(--space-5) var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.home-news .home-news-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-2); margin-bottom: var(--space-4); }
.home-news .home-news-header > div { min-width: 0; }
.home-news .home-news-eyebrow { color: var(--accent); font-size: 0.8125rem; letter-spacing: 0.12em; margin-bottom: var(--space-1); }
.home-news h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; }
.home-news .home-news-all { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8125rem; color: var(--muted); }
.home-news .home-news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--space-4); }
.home-news .home-news-card { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--space-3); }
.home-news .home-news-cover { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(180px, 50vw, 240px); }
.home-news .home-news-cover img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.home-news .home-news-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--surface); color: var(--muted); font-size: 0.8125rem; }
.home-news .home-news-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-2) var(--space-1); color: var(--muted); font-size: 0.8125rem; }
.home-news .home-news-meta > span { color: var(--accent); }
.home-news h3 { font-size: 1rem; font-weight: 500; line-height: 1.5; }
.home-news .home-news-summary { margin-top: var(--space-2); color: var(--muted); font-size: 0.8125rem; line-height: 1.8; }

@media (min-width: 768px) {
    .home-news .home-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .home-news .home-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Archive records use quiet dividers and uncropped document previews. */
.archive-page { padding-block: var(--space-5) var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.archive-page .archive-header { max-width: 44rem; margin-bottom: var(--space-5); }
.archive-page h1 { font: 400 clamp(2rem, 4vw, 3rem) / 1.35 var(--font-display); }
.archive-page .archive-description { margin-top: var(--space-2); color: var(--muted); font-size: 0.875rem; }
.archive-page .archive-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--space-4); }
.archive-page .archive-card { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--space-3); }
.archive-page .archive-cover { display: flex; align-items: center; justify-content: center; min-width: 0; }
.archive-page .archive-cover img { width: 100%; height: auto; max-height: 20rem; object-fit: contain; }
.archive-page .archive-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; max-height: 20rem; background: var(--surface); color: var(--muted); font-size: 0.8125rem; }
.archive-page .archive-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-block: var(--space-3) var(--space-1); color: var(--muted); font-size: 0.8125rem; }
.archive-page .archive-category { color: var(--accent); }
.archive-page h2 { font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.archive-page .archive-title-en { margin-top: var(--space-1); color: var(--muted); font-size: 0.8125rem; }
.archive-page .archive-summary { margin-top: var(--space-2); font-size: 0.875rem; line-height: 1.85; white-space: pre-line; }
.archive-page .archive-source { margin-top: var(--space-2); color: var(--muted); font-size: 0.8125rem; }
.archive-page .archive-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; }

@media (min-width: 768px) {
    .archive-page { padding-top: var(--space-6); }
    .archive-page .archive-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .archive-page .archive-cover { height: 20rem; }
}

@media (min-width: 1024px) {
    .archive-page .archive-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Archive detail styles are confined to this page. */
.archive-detail-page { max-width: 80rem; padding-block: var(--space-4) var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.archive-detail-page .archive-detail-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-3); color: var(--accent); font-size: 0.8125rem; }
.archive-detail-page .archive-detail-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.archive-detail-page .archive-detail-intro > * { min-width: 0; }
.archive-detail-page .archive-detail-header { max-width: 48rem; }
.archive-detail-page .archive-detail-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--muted); font-size: 0.8125rem; }
.archive-detail-page .archive-detail-meta > span:first-child { color: var(--accent); }
.archive-detail-page h1 { font: 400 clamp(1.75rem, 4vw, 3rem) / 1.35 var(--font-display); }
.archive-detail-page .archive-detail-title-en { margin-top: var(--space-2); color: var(--muted); font-size: 0.875rem; }
.archive-detail-page .archive-detail-date,
.archive-detail-page .archive-detail-source { margin-top: var(--space-2); color: var(--muted); font-size: 0.8125rem; }
.archive-detail-page figure { margin: 0; }
.archive-detail-page img { width: 100%; height: auto; object-fit: contain; }
.archive-detail-page .archive-detail-main-image { width: 100%; max-width: 48rem; justify-self: center; }
.archive-detail-page .archive-detail-main-image img { max-height: 42rem; }
.archive-detail-page .archive-detail-body { max-width: 42rem; margin: calc(var(--space-5) * 0.85) auto 0; font-size: 0.9375rem; line-height: 1.95; }
.archive-detail-page .archive-detail-body p + p { margin-top: var(--space-3); }
.archive-detail-page .archive-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); max-width: 42rem; margin: var(--space-4) auto 0; }
.archive-detail-page .archive-detail-actions a { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; color: var(--accent); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 5px; }
.archive-detail-page .archive-detail-gallery { max-width: 64rem; margin: var(--space-5) auto 0; }
.archive-detail-page .archive-detail-gallery figure + figure { margin-top: var(--space-5); }
.archive-detail-page .archive-detail-gallery img { max-height: 56rem; }
.archive-detail-page figcaption { margin-top: var(--space-2); color: var(--muted); font-size: 0.8125rem; }

@media (min-width: 768px) {
    .archive-detail-page { padding-top: var(--space-5); }
    .archive-detail-page .archive-detail-with-cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-5); align-items: start; }
}

@media (min-width: 1024px) {
    .archive-detail-page .archive-detail-with-cover { gap: var(--space-6); }
    .archive-detail-page .archive-detail-gallery { margin-top: var(--space-6); }
}

/* Guestbook form and approved entries. */
.guestbook-page { max-width: 76rem; padding-block: var(--space-5) var(--space-6); word-break: keep-all; overflow-wrap: anywhere; }
.guestbook-page .guestbook-header { max-width: 44rem; margin-bottom: var(--space-5); }
.guestbook-page h1 { font: 400 clamp(2rem, 4vw, 3rem) / 1.35 var(--font-display); }
.guestbook-page .guestbook-description { margin-top: var(--space-2); font-size: 0.875rem; }
.guestbook-page .guestbook-notice, .guestbook-page .guestbook-help { color: var(--muted); font-size: 0.8125rem; margin-top: var(--space-1); }
.guestbook-page .guestbook-success { padding-block: var(--space-2); margin-bottom: var(--space-4); border-block: 1px solid var(--line); color: var(--accent); }
.guestbook-page .guestbook-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.guestbook-page .guestbook-layout > section { min-width: 0; }
.guestbook-page h2 { font-size: 1rem; font-weight: 500; margin-bottom: var(--space-3); }
.guestbook-page .guestbook-field { margin-bottom: var(--space-3); }
.guestbook-page label { display: block; margin-bottom: var(--space-1); font-size: 0.875rem; }
.guestbook-page input:not([type="hidden"]), .guestbook-page textarea { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 0.75rem; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--text); font: inherit; }
.guestbook-page textarea { resize: vertical; }
.guestbook-page button { width: 100%; min-height: 44px; padding: 0.75rem 1rem; border: 1px solid var(--text); background: var(--text); color: var(--surface); cursor: pointer; }
.guestbook-page .guestbook-errors { color: #9b302b; font-size: 0.8125rem; }
.guestbook-page .errorlist { padding-left: 1.25rem; margin-block: var(--space-1); }
.guestbook-page .guestbook-entry { border-top: 1px solid var(--line); padding-block: var(--space-3); }
.guestbook-page .guestbook-entry-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.guestbook-page h3 { min-width: 0; font-size: 0.875rem; font-weight: 500; }
.guestbook-page time { color: var(--muted); font-size: 0.8125rem; }
.guestbook-page .guestbook-message { margin-top: var(--space-2); font-size: 0.875rem; line-height: 1.9; }
.guestbook-page .guestbook-empty { border-top: 1px solid var(--line); padding-top: var(--space-3); color: var(--muted); font-size: 0.875rem; }
.guestbook-page .guestbook-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-size: 0.8125rem; }
.guestbook-page .guestbook-pagination > * { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; padding: 0.5rem; }
.guestbook-page .guestbook-pagination [aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }

@media (min-width: 768px) {
    .guestbook-page { padding-top: var(--space-6); }
    .guestbook-page .guestbook-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: start; }
}

@media (min-width: 1024px) {
    .guestbook-page .guestbook-layout { gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}