/* ============================================================
   luminescence.dev  -  Studio of Quiet Light
   v2  -  sepia / grain / marble / f-pattern, divergent layout
   Palette derived strictly from DESIGN.md
   ============================================================ */

:root {
    --c-parchment: #F5ECD8;   /* aged paper background */
    --c-marble:    #F0ECE6;   /* marble panel base */
    --c-warm:      #8B7355;   /* secondary text, ornaments */
    --c-warm-2:    #6B5B4A;   /* grain overlay tint */
    --c-sepia:     #3A3025;   /* nav bar, footer, strong text */
    --c-umber:     #2A2420;   /* deepest value */
    --c-amber:     #C8A050;   /* accent / links */

    --f-serif-d: 'Playfair Display', 'Times New Roman', serif;
    --f-serif-b: 'Lora', Georgia, 'Times New Roman', serif;
    --f-cap:     'Cormorant', Georgia, serif;

    --topbar-h: 64px;

    --gut-x: clamp(24px, 6vw, 96px);
    --content-max: 1280px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; min-height: 100%; }

body {
    background: var(--c-parchment);
    color: var(--c-umber);
    font-family: var(--f-serif-b);
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--c-amber); text-decoration: none; transition: color .35s ease; }
a:hover { color: var(--c-sepia); }

em { font-style: italic; }

/* ---------- Persistent grain overlay (viewport-fixed) ---------- */
#grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.085;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 0 0.29  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 320px 320px;
    animation: grainShift 6s steps(6) infinite;
}

@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-4px, 3px); }
    40%  { transform: translate(3px, -2px); }
    60%  { transform: translate(-2px, -4px); }
    80%  { transform: translate(4px, 1px); }
    100% { transform: translate(0, 0); }
}

/* ---------- Soft vignette ---------- */
#vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background:
        radial-gradient(120% 80% at 50% 40%,
            rgba(42, 36, 32, 0) 55%,
            rgba(42, 36, 32, 0.22) 95%,
            rgba(42, 36, 32, 0.36) 100%);
}

/* ============================================================
   TOP BAR (fixed, sepia)
   ============================================================ */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    background: var(--c-sepia);
    z-index: 100;
    border-bottom: 1px solid rgba(200, 160, 80, 0.18);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 8px 28px -18px rgba(0, 0, 0, 0.35);
}

#top-bar::after {
    /* fine inner rule, evokes a printed plate edge */
    content: "";
    position: absolute;
    inset: 6px 12px;
    border: 1px solid rgba(200, 160, 80, 0.22);
    pointer-events: none;
}

.nav-inner {
    height: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gut-x);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}

.logotype {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--c-parchment);
    font-family: var(--f-serif-d);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.005em;
    line-height: 1;
}

.logotype:hover { color: var(--c-amber); }

.logotype-mark {
    font-size: 13px;
    color: var(--c-amber);
    transform: translateY(-2px);
}

.logotype-tld {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    letter-spacing: 0.12em;
    font-size: 13px;
    color: var(--c-amber);
    margin-left: -2px;
}

.nav-links {
    justify-self: center;
    display: flex;
    gap: clamp(18px, 3vw, 38px);
}

.nav-link {
    color: var(--c-marble);
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.14em;
    position: relative;
    padding: 6px 2px;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--c-amber);
    transform: translateX(-50%);
    transition: width .4s ease;
}

.nav-link:hover { color: var(--c-amber); }
.nav-link:hover::after { width: 100%; }

.nav-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-marble);
}

.meter-label {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--c-amber);
}

.meter-bar {
    width: 92px;
    height: 2px;
    background: rgba(245, 236, 216, 0.18);
    position: relative;
    overflow: hidden;
}

.meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, var(--c-amber) 0%, #E0C28A 100%);
    transition: width .25s ease;
}

@media (max-width: 760px) {
    .nav-meter { display: none; }
    .nav-inner { grid-template-columns: auto 1fr; gap: 16px; }
    .nav-links { justify-self: end; gap: 14px; }
    .nav-link { font-size: 11px; letter-spacing: 0.12em; }
}

/* ============================================================
   HERO  (split: 55% text, 45% marble)
   ============================================================ */
#hero {
    position: relative;
    min-height: 92vh;
    padding-top: calc(var(--topbar-h) + 36px);
    padding-bottom: 48px;
    overflow: hidden;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero-photo {
    position: absolute;
    inset: -6% -2%;
    background:
        radial-gradient(60% 60% at 30% 35%, rgba(245, 236, 216, 0.55) 0%, rgba(245, 236, 216, 0) 60%),
        radial-gradient(80% 60% at 75% 70%, rgba(58, 48, 37, 0.55) 0%, rgba(58, 48, 37, 0) 70%),
        linear-gradient(135deg, #E8DCBF 0%, #C8A878 35%, #8B7355 70%, #3A3025 100%);
    filter: sepia(85%) brightness(92%) contrast(112%) saturate(85%);
    transform: scale(1.05);
    opacity: 0;
    transition: opacity 1.4s ease, transform 14s linear;
}

#hero.entered .hero-photo { opacity: 1; transform: scale(1.0); }

.hero-photo-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.18;
    pointer-events: none;
}

.hero-grid {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gut-x);
    display: grid;
    grid-template-columns: 55% 5% 40%;
    align-items: center;
    gap: 0;
    min-height: calc(92vh - var(--topbar-h) - 84px);
}

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

.hero-text {
    grid-column: 1;
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 1s ease, transform 1.2s ease;
}

#hero.entered .hero-text { opacity: 1; transform: translateX(0); transition-delay: .9s; }

.hero-eyebrow {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--c-warm);
    margin-bottom: 22px;
}

.hero-headline {
    font-family: var(--f-serif-d);
    font-weight: 700;
    color: var(--c-umber);
    font-size: clamp(40px, 6.4vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.012em;
    margin-bottom: 26px;
    max-width: 14ch;
}

.hero-headline .line-a { display: block; }
.hero-headline .line-b {
    display: block;
    color: var(--c-sepia);
    font-weight: 600;
}
.hero-headline em {
    font-family: var(--f-serif-d);
    font-style: italic;
    font-weight: 500;
    color: var(--c-amber);
}

.hero-subtitle {
    font-family: var(--f-serif-b);
    font-size: clamp(15px, 1.2vw, 19px);
    line-height: 1.75;
    color: var(--c-sepia);
    max-width: 52ch;
    margin-bottom: 28px;
}

.hero-ornament { margin-bottom: 22px; max-width: 240px; }
.ornament-svg { width: 100%; height: auto; }
.ornament-svg-small { width: 100%; height: auto; }

.hero-caption {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--c-warm);
    line-height: 1.55;
}

.caption-italic {
    font-family: var(--f-serif-b);
    font-style: italic;
    font-variant: normal;
    text-transform: none;
    letter-spacing: 0;
    color: var(--c-sepia);
}

/* ---- Hero marble panel ---- */
.hero-marble {
    grid-column: 3;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(48px);
    transition: opacity 1s ease, transform 1.2s ease;
}

#hero.entered .hero-marble { opacity: 1; transform: translateX(0); transition-delay: .55s; }

@media (max-width: 960px) {
    .hero-marble { grid-column: 1; min-height: 360px; }
}

.marble-panel {
    position: relative;
    width: 100%;
    background:
        linear-gradient(115deg, #FCFAF5 0%, #F0ECE6 30%, #E8E2D4 65%, #DDD3BF 100%);
    border: 1px solid rgba(139, 115, 85, 0.32);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 0 0 1px rgba(245, 236, 216, 0.4) inset,
        0 28px 60px -28px rgba(42, 36, 32, 0.55),
        0 12px 26px -16px rgba(42, 36, 32, 0.35);
    overflow: hidden;
    isolation: isolate;
}

.hero-marble .marble-panel {
    aspect-ratio: 4 / 5;
    max-width: 460px;
}

.marble-breathing {
    animation: breathe 8s ease-in-out infinite alternate;
    transform-origin: center center;
}

@keyframes breathe {
    from { transform: scale(1.0); }
    to   { transform: scale(1.03); }
}

.marble-veins {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(80% 30% at 20% 18%, rgba(139, 115, 85, 0.18) 0%, transparent 60%),
        radial-gradient(70% 40% at 75% 65%, rgba(139, 115, 85, 0.14) 0%, transparent 65%),
        radial-gradient(50% 30% at 35% 80%, rgba(107, 91, 74, 0.18) 0%, transparent 60%),
        repeating-linear-gradient(118deg,
            rgba(139, 115, 85, 0.0)  0px,
            rgba(139, 115, 85, 0.0)  46px,
            rgba(139, 115, 85, 0.06) 47px,
            rgba(139, 115, 85, 0.0)  48px,
            rgba(139, 115, 85, 0.0)  92px),
        repeating-linear-gradient(64deg,
            rgba(107, 91, 74, 0.0)  0px,
            rgba(107, 91, 74, 0.0)  72px,
            rgba(107, 91, 74, 0.05) 73px,
            rgba(107, 91, 74, 0.0)  74px);
}

.marble-veins::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.12;
}

.marble-inner {
    position: relative;
    z-index: 2;
    padding: clamp(28px, 4vw, 52px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.marble-label {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--c-warm);
}

.marble-quote {
    font-family: var(--f-serif-d);
    font-style: italic;
    font-weight: 500;
    color: var(--c-umber);
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.32;
    position: relative;
    padding: 4px 0;
}

.quote-mark {
    font-family: var(--f-serif-d);
    color: var(--c-amber);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.18em;
    margin-right: 0.05em;
}
.quote-mark.closing { margin-left: 0.05em; margin-right: 0; }

.marble-attribution {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--c-warm);
}

.marble-pedestal {
    position: absolute;
    bottom: -22px;
    left: 8%;
    right: 8%;
    height: 22px;
    background: linear-gradient(180deg, rgba(58, 48, 37, 0.35), rgba(58, 48, 37, 0));
    filter: blur(8px);
    z-index: -1;
}

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--c-warm);
    opacity: 0;
    animation: cueIn 1.2s ease forwards 1.6s, cueBob 2.6s ease-in-out infinite 2.6s;
}

.cue-text {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-size: 11px;
    letter-spacing: 0.22em;
}
.cue-arrow { font-size: 14px; color: var(--c-amber); }

@keyframes cueIn  { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: .85; transform: translate(-50%, 0); } }
@keyframes cueBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }

/* ============================================================
   SEPIA BAND (section break)
   ============================================================ */
.sepia-band {
    height: 80px;
    background: var(--c-sepia);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.sepia-band-minimal {
    background: transparent;
    border-top: 1px solid rgba(139, 115, 85, 0.22);
    border-bottom: 1px solid rgba(139, 115, 85, 0.22);
}

.band-svg {
    width: 100%;
    height: 100%;
    max-width: var(--content-max);
    padding: 0 var(--gut-x);
}

/* ============================================================
   GENERIC SECTION
   ============================================================ */
section {
    position: relative;
    padding: clamp(72px, 9vw, 132px) var(--gut-x);
    max-width: var(--content-max);
    margin: 0 auto;
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.section-heading {
    font-family: var(--f-serif-d);
    font-weight: 600;
    color: var(--c-umber);
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
}

.section-numeral {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 0.42em;
    letter-spacing: 0.12em;
    color: var(--c-amber);
    transform: translateY(-0.4em);
}

.section-lede {
    font-family: var(--f-serif-b);
    font-style: italic;
    color: var(--c-sepia);
    max-width: 64ch;
    margin-bottom: 48px;
    font-size: clamp(15px, 1.15vw, 18px);
}

/* ---- F-pattern grid ---- */
.f-grid {
    display: grid;
    grid-template-columns: 65% 5% 30%;
    gap: 0;
}
@media (max-width: 880px) {
    .f-grid { grid-template-columns: 1fr; gap: 36px; }
}

.f-main { grid-column: 1; }
.f-side { grid-column: 3; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 880px) {
    .f-main, .f-side { grid-column: 1; }
}

.lede {
    font-size: clamp(17px, 1.3vw, 22px);
    line-height: 1.7;
    margin-bottom: 22px;
    color: var(--c-umber);
}

.dropcap {
    float: left;
    font-family: var(--f-serif-d);
    font-weight: 700;
    font-size: 4.6em;
    line-height: 0.86;
    color: var(--c-sepia);
    margin: 0.05em 0.12em -0.05em 0;
    text-shadow: 1px 1px 0 rgba(200, 160, 80, 0.18);
}

.f-main p + p { margin-top: 18px; }

/* ---- Side panels & meta ---- */
.side-panel.marble-panel { aspect-ratio: 4 / 3.4; }

.side-panel .marble-inner { padding: 26px 28px; gap: 12px; }

.side-label {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--c-warm);
}

.side-quote {
    font-family: var(--f-serif-d);
    font-style: italic;
    font-weight: 500;
    color: var(--c-sepia);
    font-size: 18px;
    line-height: 1.45;
}

.side-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 18px;
    row-gap: 6px;
    border-top: 0.5px solid rgba(139, 115, 85, 0.4);
    border-bottom: 0.5px solid rgba(139, 115, 85, 0.4);
    padding: 18px 0;
}

.side-meta dt {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--c-warm);
}

.side-meta dd {
    font-family: var(--f-serif-b);
    font-size: 14px;
    color: var(--c-sepia);
}

.side-card {
    border: 0.5px solid rgba(139, 115, 85, 0.4);
    background: rgba(240, 236, 230, 0.5);
    padding: 22px 24px;
    position: relative;
}
.side-card::before {
    content: "";
    position: absolute; inset: 4px;
    border: 0.5px solid rgba(200, 160, 80, 0.3);
    pointer-events: none;
}

.side-card-body {
    font-family: var(--f-serif-d);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-umber);
    margin-top: 8px;
}
.side-card-attr {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--c-warm);
    margin-top: 12px;
}

.side-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--c-sepia);
}

.side-list-num {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--c-amber);
    margin-right: 4px;
}

.side-ornament { margin: 6px 0; max-width: 200px; }

/* ============================================================
   EXPOSURES (research entries)
   ============================================================ */
.exposures-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.exposure {
    position: relative;
    padding: 32px 32px 32px 132px;
    border-top: 0.5px solid rgba(139, 115, 85, 0.45);
    transition: background .5s ease;
    cursor: default;
}

.exposure:last-child { border-bottom: 0.5px solid rgba(139, 115, 85, 0.45); }

.exposure:hover {
    background: linear-gradient(90deg, rgba(240, 236, 230, 0.6) 0%, rgba(240, 236, 230, 0) 80%);
}

.exposure-plate {
    position: absolute;
    left: 0;
    top: 36px;
    width: 104px;
    text-align: left;
    color: var(--c-warm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plate-number {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-size: 13px;
    color: var(--c-amber);
}

.plate-marker {
    font-size: 18px;
    color: var(--c-warm);
    transition: transform .6s ease, color .4s ease;
}

.exposure:hover .plate-marker {
    color: var(--c-amber);
    transform: rotate(45deg);
}

@media (max-width: 540px) {
    .exposure { padding: 28px 0 28px 0; }
    .exposure-plate { position: static; width: auto; margin-bottom: 8px; flex-direction: row; align-items: baseline; gap: 12px; }
}

.exposure-title {
    font-family: var(--f-serif-d);
    font-weight: 600;
    color: var(--c-umber);
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.25;
    margin-bottom: 8px;
}
.exposure-title em { color: var(--c-sepia); }

.exposure-meta {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--c-warm);
    margin-bottom: 12px;
}

.exposure-body {
    color: var(--c-sepia);
    margin-bottom: 16px;
    max-width: 64ch;
}

.exposure-link {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 600;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--c-amber);
    border-bottom: 0.5px solid rgba(200, 160, 80, 0.45);
    padding-bottom: 2px;
    transition: color .3s ease, border-color .3s ease;
}

.exposure-link:hover {
    color: var(--c-sepia);
    border-bottom-color: var(--c-sepia);
}

/* ============================================================
   EDGE-BLED PHOTO STRIP
   ============================================================ */
.edge-bleed {
    position: relative;
    width: 100%;
    height: clamp(220px, 26vw, 360px);
    overflow: hidden;
    margin: 60px 0;
    border-top: 0.5px solid rgba(139, 115, 85, 0.4);
    border-bottom: 0.5px solid rgba(139, 115, 85, 0.4);
}

.bleed-photo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 60% at 18% 50%, rgba(245, 236, 216, 0.45) 0%, rgba(245, 236, 216, 0) 60%),
        radial-gradient(60% 80% at 78% 60%, rgba(58, 48, 37, 0.6) 0%, rgba(58, 48, 37, 0) 70%),
        linear-gradient(95deg, #D8C088 0%, #B0905A 35%, #6B5740 70%, #2E251D 100%);
    filter: sepia(85%) brightness(95%) contrast(115%);
    transform: scale(1.02);
}

.bleed-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.22;
}

.bleed-caption {
    position: absolute;
    left: clamp(20px, 5vw, 80px);
    bottom: 20px;
    color: var(--c-marble);
    display: flex;
    align-items: baseline;
    gap: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.bleed-num {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 600;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--c-amber);
}

.bleed-text {
    font-family: var(--f-serif-d);
    font-style: italic;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--c-marble);
    max-width: 60ch;
}

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.archive-year {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: start;
    padding: 36px 0;
    border-top: 0.5px solid rgba(139, 115, 85, 0.4);
}

.archive-year:last-child { border-bottom: 0.5px solid rgba(139, 115, 85, 0.4); }

@media (max-width: 720px) {
    .archive-year { grid-template-columns: 1fr; gap: 14px; }
}

.archive-year-mark {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.year-numerals {
    font-family: var(--f-serif-d);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;
    color: var(--c-sepia);
    letter-spacing: 0.04em;
}

.year-arabic {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--c-amber);
}

.archive-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.archive-list li {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 18px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 0.5px dotted rgba(139, 115, 85, 0.35);
    color: var(--c-sepia);
    font-size: 16px;
    transition: color .3s ease, padding .3s ease;
}

.archive-list li:hover {
    color: var(--c-umber);
    padding-left: 6px;
}

.arc-no {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--c-amber);
}

.arc-title {
    font-family: var(--f-serif-d);
    font-weight: 600;
    font-style: italic;
    font-size: 18px;
}

.arc-tag {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--c-warm);
}

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */
#colophon {
    background: var(--c-umber);
    color: var(--c-marble);
    padding: clamp(64px, 8vw, 112px) var(--gut-x) clamp(40px, 5vw, 64px);
    max-width: none;
    margin: 0;
    position: relative;
}

#colophon::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 0.5px solid rgba(200, 160, 80, 0.18);
    pointer-events: none;
}

.colophon-grid {
    max-width: var(--content-max);
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
}

@media (max-width: 880px) {
    .colophon-grid { grid-template-columns: 1fr 1fr; }
    .colophon-col-wide { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
    .colophon-grid { grid-template-columns: 1fr; }
}

.colophon-heading {
    font-family: var(--f-serif-d);
    font-weight: 700;
    color: var(--c-amber);
    font-size: clamp(24px, 2.6vw, 32px);
    margin-bottom: 18px;
}

.colophon-subhead {
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--c-amber);
    margin-bottom: 14px;
}

.colophon-body {
    font-family: var(--f-serif-b);
    color: var(--c-marble);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 14px;
    max-width: 56ch;
    opacity: 0.88;
}

.colophon-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.colophon-link {
    color: var(--c-marble);
    border-bottom: 0.5px solid transparent;
    transition: color .3s ease, border-color .3s ease;
    font-family: var(--f-serif-b);
}

.colophon-link:hover {
    color: var(--c-amber);
    border-bottom-color: rgba(200, 160, 80, 0.5);
}

.colophon-rule {
    max-width: var(--content-max);
    margin: 28px auto 22px;
}

.rule-svg { width: 100%; height: 12px; }

.colophon-imprint {
    max-width: var(--content-max);
    margin: 0 auto;
    text-align: center;
    font-family: var(--f-cap);
    font-variant: small-caps;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--c-warm);
}

.imprint-mark { color: var(--c-amber); margin: 0 12px; font-variant: normal; letter-spacing: 0; }

.imprint-name {
    font-family: var(--f-serif-d);
    font-style: italic;
    font-weight: 500;
    color: var(--c-amber);
    font-variant: normal;
    text-transform: lowercase;
    letter-spacing: 0;
}

/* ============================================================
   Reduced motion: keep entrances but soften animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .marble-breathing { animation: none; }
    .hero-photo { transition: opacity .6s ease; }
    #grain-overlay { animation: none; }
    .hero-scroll-cue { animation: cueIn .8s ease forwards .3s; }
}