/*==================================================
01. RESET
==================================================*/

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    letter-spacing:0.01em;
}

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

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

button{
    border:none;
    background:none;
    cursor:pointer;
}

ul,
ol{
    list-style:none;
}

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

table{
    border-collapse:collapse;
    border-spacing:0;
}

/*==================================================
02. ROOT VARIABLES
==================================================*/

:root{

    --font-heading:"Cormorant Garamond",serif;
    --font-description:"Manrope",sans-serif;
    --font-display:var(--font-heading);
    --font-body:var(--font-description);

    --bg:#f8f7f4;
    --surface:#ffffff;
    --surface-soft:#f7f6f2;

    --text:#121212;
    --text-light:#666666;

    --olive:#0d0d0d;
    --olive-dark:#252525;
    --olive-light:#7c7c7c;

    --line:#e6e4df;
    --line-soft:#f2f1ec;

    --shadow-sm:0 10px 32px rgba(0,0,0,.05);
    --shadow-md:0 24px 80px rgba(0,0,0,.08);

    --radius-sm:12px;
    --radius-md:20px;
    --radius-lg:30px;

    --container:1180px;

    --transition:.35s ease;
    --motion:transform .35s ease, opacity .35s ease;
    --shadow-elevated:0 28px 72px rgba(0,0,0,.12);

}

:root[data-theme="dark"]{
    --bg:#0f1110;
    --surface:#171a16;
    --surface-soft:#1b1f18;

    --text:#f3efe7;
    --text-light:#b7b3a6;

    --olive:#f3efe7;
    --olive-dark:#dcd3bf;
    --olive-light:#8b8577;

    --line:#2d3228;
    --line-soft:#232822;

    --shadow-sm:0 10px 32px rgba(0,0,0,.28);
    --shadow-md:0 24px 80px rgba(0,0,0,.36);
    --shadow-elevated:0 28px 72px rgba(0,0,0,.42);
}

:root[data-theme="dark"] body::selection{
    background:rgba(139,133,119,.28);
}

:root[data-theme="dark"] ::selection{
    background:rgba(139,133,119,.28);
}

/*==================================================
03. TYPOGRAPHY
==================================================*/

body{

    background:linear-gradient(180deg, var(--surface-soft) 0%, var(--bg) 100%);

    color:var(--text);

    font-family:var(--font-body);

    font-size:16px;

    line-height:1.8;

}

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-display);

    font-weight:500;

    line-height:1.1;

    letter-spacing:-.02em;

}

h1{

    font-size:clamp(2.8rem,5.4vw,4.2rem);
    line-height:1.04;

}

h2{

    font-size:clamp(1.8rem,3.2vw,2.5rem);
    line-height:1.1;

}

h3{

    font-size:1.6rem;
    line-height:1.2;

}

p{

    font-family:var(--font-description);
    font-weight:400;

    color:var(--text-light);
    font-size:1rem;
    line-height:1.9;

}

.hero-description,
.chapters-heading p,
.collection-page-header p,
.artwork-description,
.article-content,
.reading-card-snippet,
.essay-excerpt,
.archive-description,
.site-footer p{
    font-family:var(--font-description);
    letter-spacing:.01em;
}

small{

    color:var(--text-light);

    letter-spacing:.08em;

    text-transform:uppercase;

}

/*==================================================
04. GLOBAL ELEMENTS
==================================================*/

body::selection{

    background:rgba(112,119,91,.22);

}

::selection{

    background:rgba(112,119,91,.22);

}

.theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-left:16px;
    padding:0;
    border:1px solid rgba(112,119,91,.24);
    border-radius:50%;
    color:var(--text);
    background:color-mix(in srgb, var(--surface) 92%, white 8%);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}

.theme-toggle::before,
.theme-toggle::after{
    content:"";
    position:absolute;
    inset:0;
    transition:var(--transition);
}

.theme-toggle::before{
    background:radial-gradient(circle, rgba(255,204,102,.95) 0 8px, transparent 9px);
    opacity:0;
    transform:scale(.65);
}

.theme-toggle::after{
    background:radial-gradient(circle at 50% 50%, transparent 0 8px, var(--text) 9px, transparent 10px);
    opacity:1;
}

.theme-toggle:hover{
    transform:translateY(-1px);
    border-color:rgba(112,119,91,.38);
    box-shadow:0 10px 26px rgba(0,0,0,.12);
}

:root[data-theme="dark"] .theme-toggle::before{
    opacity:1;
    transform:scale(1);
}

:root[data-theme="dark"] .theme-toggle::after{
    opacity:0;
    transform:scale(.75);
}

.container{

    width:min(calc(100% - 48px),var(--container));

    margin-inline:auto;

}

section{

    padding:100px 0;

}

hr{

    border:none;

    height:1px;

    background:var(--line-soft);

}

/*==================================================
05. HEADER
==================================================*/

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    background:color-mix(in srgb, var(--surface) 90%, transparent);

    border-bottom:1px solid var(--line);

    transition:var(--transition);

}

.site-header.scrolled{

    box-shadow:var(--shadow-sm);

}

.header-inner{

    width:min(calc(100% - 48px),1200px);

    margin:auto;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

}

/*==================================================
06. NAVIGATION
==================================================*/

.logo{
    display: flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;
}

.logo img{

    width: 80px;

    height: 75px;


}

.logo-text{

    font-family:var(--font-display);

    font-size: 1.5rem;

    letter-spacing: 0.22em;

    font-weight: 300;

    color:var(--text);

    transition: color .3s ease;

}

.logo:hover .logo-text{

    color:var(--olive-dark);

}

/*==================================================
06A. SEARCH BAR
==================================================*/

.header-search{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    display:flex;
    align-items:center;
    gap:0;
    width:clamp(220px, 24vw, 320px);
    padding:3px;
    border:1px solid var(--line);
    border-radius:999px;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    margin:0;
    z-index:1001;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.header-search:hover{
    transform:translateY(-1px);
    border-color:rgba(112,119,91,.32);
    box-shadow:0 16px 34px rgba(0,0,0,.10);
}

.header-search:focus-within{
    border-color:rgba(112,119,91,.46);
    box-shadow:0 0 0 3px rgba(112,119,91,.12), 0 18px 36px rgba(0,0,0,.10);
}

:root[data-theme="dark"] .header-search{
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    border-color:var(--line);
    box-shadow:0 14px 30px rgba(0,0,0,.32);
}

:root[data-theme="dark"] .header-search:focus-within{
    border-color:rgba(139,133,119,.56);
    box-shadow:0 0 0 3px rgba(139,133,119,.16), 0 20px 40px rgba(0,0,0,.36);
}

.search-input{
    width:100%;
    padding:10px 14px 10px 40px;
    border:1px solid transparent;
    border-radius:999px;
    background:transparent;
    color:var(--text);
    font-size:.88rem;
    letter-spacing:.02em;
    transition:background-color .3s ease, color .3s ease;
    font-family:inherit;
}

.search-input::placeholder{
    color:color-mix(in srgb, var(--text-light) 90%, transparent);
}

.search-input:focus{
    outline:none;
    background:color-mix(in srgb, var(--surface) 86%, transparent);
}

:root[data-theme="dark"] .search-input{
    background:transparent;
}

:root[data-theme="dark"] .search-input:focus{
    background:rgba(31,35,30,.58);
}

.search-icon{
    position:absolute;
    left:12px;
    width:16px;
    height:16px;
    color:var(--text-light);
    pointer-events:none;
    transition:color .3s ease, transform .3s ease;
}

.search-input:focus + .search-icon{
    color:var(--olive-dark);
    transform:scale(1.04);
}

.nav{
    display:flex;

    align-items:center;

    gap:40px;
    margin-left:auto;

}

.nav a{


    font-size:0.82rem;

    letter-spacing:0.22em; 

    text-transform:uppercase;

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--olive);

    transition:width .35s ease;

}

.nav a:hover{

    color:var(--olive);

}

.nav a:hover::after{

    width:100%;

}

.nav a.active{

    color:var(--olive);

}

.nav a.active::after{

    width:100%;

}

/*==================================================
07. GLOBAL LINKS
==================================================*/

a{

    transition:color .3s ease;

}

a:hover{

    color:var(--olive);

}

.text-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--olive);

    transition:var(--transition);

}

.text-link:hover{

    gap:14px;

}

.text-center{

    text-align:center;

}
/*==================================================
08. MAIN LAYOUT
==================================================*/

main{

    padding-top:122px;

}

.page{

    width:min(calc(100% - 48px),var(--container));

    margin-inline:auto;

}

.page-narrow{

    width:min(calc(100% - 48px),820px);

    margin-inline:auto;

}

/* ===========================
   09. HERO 10. HERO BUTTONS
=========================== */

.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    max-width:1200px;
    margin:0 auto;
    padding:160px 40px 100px;
    background:linear-gradient(180deg, var(--surface-soft) 0%, var(--bg) 100%);
}

.hero-inner{
    max-width:720px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
}

.hero h1{
    font-family:var(--font-display);
    font-size:clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-0.03em;
    color:var(--text);
    margin:0;
    display:inline-block;
    width:auto;
    max-width:13ch;
    white-space:nowrap;
    text-align:center;
}

.hero-description{
    font-family:var(--font-body);
    font-size:1.1rem;
    line-height:1.95;
    color:var(--text-light);
    margin:0;
    max-width:680px;
}

.hero-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:16px 40px;
    border:1.5px solid var(--olive-light);
    border-radius:999px;
    background:transparent;
    color:var(--text);
    text-decoration:none;
    font-family:var(--font-body);
    font-size:.92rem;
    font-weight:500;
    letter-spacing:.04em;
    box-shadow:0 12px 32px rgba(0,0,0,.08);
    transition:transform .35s cubic-bezier(.22,.61,.36,1), 
              box-shadow .35s ease, 
              background-color .35s ease, 
              border-color .35s ease, 
              color .35s ease;
    will-change:transform, box-shadow;
}

:root[data-theme="dark"] .hero-button{
    border-color:var(--olive-light);
    box-shadow:0 12px 32px rgba(0,0,0,.24);
}

.hero-button::after{
    content:"→";
    font-weight:600;
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.hero-button:hover{
    background:var(--olive-dark);
    border-color:var(--olive-dark);
    color:var(--surface);
    transform:translateY(-3px) scale(1.02);
    box-shadow:var(--shadow-elevated);
}

.hero-button:hover::after{
    transform:translateX(8px);
}

.hero-button:active{
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
}

.hero-image img{
    transition:transform .6s ease, opacity .6s ease;
    will-change:transform, opacity;
    animation:drift-soft 16s ease-in-out infinite alternate;
}

.hero-image:hover img{
    transform:translateY(-6px) scale(1.02);
    opacity:.98;
}

.hero-image{
    width:100%;
    max-width:780px;
    margin:32px auto 0;
}

.hero-image img{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    box-shadow:0 32px 88px rgba(0,0,0,.12);
}

/* ==========================
 09A. WHAT'S NEW
========================== */

.whats-new{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:28px 0 130px;
    background:
        radial-gradient(1200px 420px at 12% 8%, rgba(181,166,136,.18), transparent 62%),
        radial-gradient(900px 360px at 88% 16%, rgba(112,119,91,.16), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--surface-soft) 100%);
}

.whats-new::before,
.whats-new::after{
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:-1;
}

.whats-new::before{
    inset:22% -12% auto;
    height:260px;
    background:radial-gradient(closest-side, rgba(255,255,255,.55), transparent 72%);
    filter:blur(12px);
    opacity:.72;
    animation:luxe-drift 18s ease-in-out infinite alternate;
}

.whats-new::after{
    inset:auto auto 12% -8%;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle at 36% 36%, rgba(112,119,91,.18), rgba(112,119,91,0) 68%);
    opacity:.72;
    animation:luxe-drift 24s ease-in-out infinite alternate-reverse;
}

.whats-new .section-heading{
    margin-bottom:42px;
}

.whats-new .section-heading h2{
    letter-spacing:-.02em;
}

.whats-new-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:26px;
    align-items:stretch;
    perspective:1200px;
}

.update-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:14px;
    height:100%;
    padding:30px 28px;
    border:1px solid color-mix(in srgb, var(--line) 82%, var(--olive-light));
    border-radius:26px;
    background:
        linear-gradient(170deg, rgba(255,255,255,.95) 0%, rgba(248,247,242,.97) 58%, rgba(243,241,234,.95) 100%);
    box-shadow:0 18px 44px rgba(0,0,0,.07), 0 1px 0 rgba(255,255,255,.55) inset;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transform-origin:center;
    transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .45s ease;
    overflow:hidden;
}

:root[data-theme="dark"] .update-card{
    background:linear-gradient(165deg, rgba(22,25,22,.9) 0%, rgba(30,34,29,.95) 62%, rgba(36,40,34,.93) 100%);
    box-shadow:0 18px 44px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.02) inset;
}

.update-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(130deg, rgba(255,255,255,.75), rgba(255,255,255,.1) 34%, rgba(112,119,91,.32) 78%, rgba(255,255,255,.56));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.72;
    pointer-events:none;
    z-index:2;
}

.update-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    top:-88px;
    right:-80px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
    opacity:.55;
    transform:translate3d(0,0,0);
    transition:transform .65s ease, opacity .6s ease;
    pointer-events:none;
}

.update-card:hover{
    transform:translateY(-7px) rotateX(2.2deg);
    border-color:color-mix(in srgb, var(--olive-light) 48%, var(--line));
    box-shadow:0 30px 72px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.65) inset;
}

.update-card:hover::after{
    transform:translate3d(-14px, 12px, 0);
    opacity:.82;
}

.update-type{
    align-self:flex-start;
    padding:7px 11px;
    border-radius:999px;
    background:color-mix(in srgb, var(--olive-light) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--olive-light) 28%, transparent);
    margin-bottom:14px;
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--olive-light);
}

.update-card h3{
    margin:0;
    font-family:var(--font-display);
    font-size:1.45rem;
    line-height:1.12;
    color:var(--text);
}

.update-card p{
    margin:0;
    font-size:.95rem;
    line-height:1.9;
    color:var(--text-light);
}

.update-link{
    position:relative;
    margin-top:auto;
    align-self:flex-start;
    padding:10px 16px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--olive-dark);
    border:1px solid color-mix(in srgb, var(--line) 75%, var(--olive-light) 25%);
    border-radius:999px;
    background:color-mix(in srgb, var(--surface) 92%, transparent 8%);
    transition:transform .3s ease, border-color .3s ease, background-color .3s ease;
}

.update-link::after{
    content:"→";
    transition:transform .35s ease;
}

.update-link:hover::after{
    transform:translateX(7px);
}

.update-link:hover,
.update-link:focus-visible{
    border-color:color-mix(in srgb, var(--olive-light) 58%, var(--line));
    background:color-mix(in srgb, var(--surface) 84%, var(--olive-light) 16%);
    transform:translateY(-1px);
}

.whats-new-actions{
    margin-top:38px;
    display:flex;
    justify-content:center;
}

/* ==========================
 09B. NEW CONTENT SYSTEM
========================== */

.is-new{
    position:relative;
    isolation:isolate;
    --new-sheen-x:36%;
    --new-sheen-y:0%;
}

.is-new.is-visible{
    animation:new-card-intro .72s cubic-bezier(.22,.61,.36,1) both;
}

.collection-card.is-new::before,
.reading-card.is-new::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(120% 90% at var(--new-sheen-x) var(--new-sheen-y), rgba(255,255,255,.24), transparent 52%);
    opacity:0;
    transition:opacity .45s ease;
    z-index:0;
}

.collection-card.is-new:hover::before,
.reading-card.is-new:hover::before{
    opacity:.9;
}

.new-badge{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:54px;
    padding:7px 11px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--olive-light) 36%, var(--line));
    background:linear-gradient(125deg, rgba(255,255,255,.94), rgba(244,240,230,.98));
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    color:var(--olive-dark);
    font-size:.65rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    overflow:hidden;
}

.new-badge::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-130%) skewX(-22deg);
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.52) 50%, rgba(255,255,255,0) 100%);
    animation:new-badge-sheen 3.2s ease-in-out infinite;
}

.update-card.is-new .new-badge::before{
    display:none;
}

:root[data-theme="dark"] .new-badge{
    background:linear-gradient(130deg, rgba(28,33,28,.96), rgba(37,42,36,.98));
    border-color:rgba(139,133,119,.4);
    box-shadow:0 10px 24px rgba(0,0,0,.26);
    color:var(--olive);
}

.update-card.is-new,
.collection-card.is-new,
.reading-card.is-new{
    transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease;
}

.update-card.is-new:hover,
.collection-card.is-new:hover,
.reading-card.is-new:hover{
    transform:translateY(-8px) scale(1.005);
}

.update-card.is-new::after{
    content:"";
    position:absolute;
    inset:0;
    width:auto;
    height:auto;
    top:auto;
    right:auto;
    border-radius:inherit;
    background:radial-gradient(142% 104% at var(--new-sheen-x) var(--new-sheen-y), rgba(255,255,255,.44) 0%, rgba(255,255,255,.18) 24%, transparent 62%);
    opacity:0;
    transform:none;
    transition:opacity .35s ease;
    pointer-events:none;
    z-index:0;
}

.update-card.is-new:hover::after,
.update-card.is-new:focus-within::after{
    opacity:.88;
}

.update-card.is-new > *:not(.new-badge){
    position:relative;
    z-index:1;
}

.update-card.is-new .new-badge{
    position:absolute;
    display:inline-flex;
    z-index:3;
}

:root[data-theme="dark"] .update-card.is-new::after{
    background:radial-gradient(146% 108% at var(--new-sheen-x) var(--new-sheen-y), rgba(220,236,201,.28) 0%, rgba(190,208,173,.12) 26%, transparent 64%);
}

@media (hover:none), (pointer:coarse){
    .update-card,
    .update-card:hover,
    .update-card.is-new:hover{
        transform:none;
        box-shadow:0 16px 36px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.55) inset;
    }

    :root[data-theme="dark"] .update-card,
    :root[data-theme="dark"] .update-card:hover,
    :root[data-theme="dark"] .update-card.is-new:hover{
        box-shadow:0 18px 40px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.02) inset;
    }

    .update-card.is-new::after,
    .update-card.is-new:hover::after,
    .update-card.is-new:focus-within::after{
        opacity:0;
    }

    .new-badge::before{
        animation:none;
    }

    .update-link,
    .update-link:hover,
    .update-link:focus-visible{
        transform:none;
    }
}

.collection-card.is-new{
    border-radius:20px;
    border:none;
    padding:0;
    background:transparent;
    box-shadow:0 14px 38px rgba(0,0,0,.07);
}

.collection-card.is-new img{
    border-radius:20px;
}

:root[data-theme="dark"] .collection-card.is-new{
    background:transparent;
}

.reading-card.is-new{
    border-color:color-mix(in srgb, var(--olive-light) 28%, var(--line));
}

.reading-card.is-new .new-badge{
    top:12px;
    right:12px;
}

@keyframes new-badge-sheen{
    0%, 56%, 100%{
        transform:translateX(-130%) skewX(-22deg);
    }
    22%, 34%{
        transform:translateX(150%) skewX(-22deg);
    }
}

@keyframes new-card-intro{
    from{
        opacity:.65;
        transform:translateY(12px) scale(.99);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes luxe-drift{
    from{
        transform:translate3d(0, 0, 0) scale(1);
    }
    to{
        transform:translate3d(0, 14px, 0) scale(1.04);
    }
}
/*==================================================
11. BOTANICAL TITLE ORNAMENT
==================================================*/

.title-ornament{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin:20px 0;

    opacity:.55;

}

.title-ornament::before,

.title-ornament::after{

    content:"";

    width:90px;

    height:1px;

    background:var(--line);

}

.title-ornament svg{

    width:18px;

    height:18px;

    transition:transform .5s ease;

}

.hero:hover .title-ornament svg{

    transform:rotate(10deg);

}

/*==================================================
12. SECTION INTRO
==================================================*/

.section-heading{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    margin-bottom:70px;

    text-align:center;

}

.section-heading p{

    max-width:620px;

}

.eyebrow{

    font-size:.75rem;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:var(--olive);

}

/*==================================================
13. DIVIDERS
==================================================*/

.section-divider{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:80px 0;

}

.section-divider::before,

.section-divider::after{

    content:"";

    width:110px;

    height:1px;

    background:var(--line);

}

.section-divider span{

    width:10px;

    height:10px;

    margin:0 18px;

    border-radius:50%;

    background:var(--olive-light);

}

/*==================================================
14. FADE ANIMATIONS
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(30px);

    animation:fadeUp .9s ease forwards;

}

.fade-delay-1{

    animation-delay:.15s;

}

.fade-delay-2{

    animation-delay:.3s;

}

.fade-delay-3{

    animation-delay:.45s;

}

@keyframes drift-soft{
    from{
        transform:translateY(0) rotate(0deg);
    }
    to{
        transform:translateY(-4px) rotate(0.18deg);
    }
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* ==========================
   15. LIBRARY HERO
========================== */

.library-hero{

    max-width:1200px;

    margin:140px auto 80px;

    padding:0 40px;

    display:flex;

    justify-content:center;

}

.chapters-heading p{

    margin:24px auto 0;

    max-width: 680px;

    font-family:var(--font-body);

    font-size:.94rem;

    line-height:1.85;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--olive-light);

}

.chapters-heading{
    text-align:center;
}

.chapters-heading h1{

    font-size:clamp(2.8rem, 5vw, 4.8rem);

    margin:0;
    color:var(--text);
    line-height:1.08;

}

.chapters-heading h1:hover{

    color:var(--olive-dark);

}

/* ==========================
 16.  COLLECTION GRID
========================== */

.collection-grid{

    max-width:1200px;

    margin:0 auto 140px;

    padding:0 40px;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:72px;

    align-items:stretch;
    justify-items:center;

    justify-content:center;

}

.collection-card{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    max-width:360px;
    text-align:center;
    position:relative;
    transition:transform .35s ease, box-shadow .35s ease;
}

.collection-card:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 64px rgba(0,0,0,.12);
}

.collection-card img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 20px 56px rgba(0,0,0,.1);
    transition:transform .35s ease, box-shadow .35s ease;
}

.collection-card:hover img{
    transform:scale(1.02);
}

.library-page .collection-card img{
    border-radius:20px;
}

.collection-card.is-new,
.collection-card.collection-card-luxe{
    position:relative;
    isolation:isolate;
    --new-sheen-x:36%;
    --new-sheen-y:0%;
    border-radius:20px;
    border:none;
    padding:0;
    background:transparent;
    box-shadow:0 14px 38px rgba(0,0,0,.07);
}

.collection-card.is-new img,
.collection-card.collection-card-luxe img{
    border-radius:20px;
}

:root[data-theme="dark"] .collection-card.is-new,
:root[data-theme="dark"] .collection-card.collection-card-luxe{
    background:transparent;
}

.collection-card.is-new::before,
.collection-card.collection-card-luxe::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(120% 90% at var(--new-sheen-x) var(--new-sheen-y), rgba(255,255,255,.24), transparent 52%);
    opacity:0;
    transition:opacity .45s ease;
    z-index:0;
}

.collection-card.is-new:hover,
.collection-card.collection-card-luxe:hover{
    transform:translateY(-8px) scale(1.005);
}

.collection-card.is-new:hover::before,
.collection-card.collection-card-luxe:hover::before{
    opacity:.9;
}

.collection-info{
    display:flex;
    flex:1;
    flex-direction:column;
    margin-top:32px;
}

.collection-year{
    font-family:var(--font-body);
    font-size:.82rem;
    letter-spacing:.20em;
    color:var(--text-light);
    font-weight:500;
    text-transform:uppercase;
}

.collection-info h2{
    margin:16px 0 24px;
    font-family:var(--font-display);
    font-size:2.2rem;
    font-weight:500;
    line-height:1.1;
    color:var(--text);
}

.collection-info .view-btn{
    margin-top:auto;
}

.view-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;
    gap:12px;

    padding:14px 32px;

    border:1.5px solid var(--olive-light);

    border-radius:999px;

    text-decoration:none;

    color:var(--text);

    font-family:var(--font-body);
    font-size:.9rem;
    font-weight:500;
    letter-spacing:.04em;

    background:transparent;
    box-shadow:0 12px 32px rgba(0,0,0,.08);

    transition:transform .35s cubic-bezier(.22,.61,.36,1), 
              box-shadow .35s ease, 
              background-color .35s ease, 
              border-color .35s ease, 
              color .35s ease;
    will-change:transform, box-shadow;

}

:root[data-theme="dark"] .view-btn{
    border-color:var(--olive-light);
    box-shadow:0 12px 32px rgba(0,0,0,.24);
}

.view-btn::after{
    content:"→";
    font-weight:600;
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.view-btn:hover{

    background:var(--olive-dark);

    border-color:var(--olive-dark);

    color:var(--surface);
    transform:translateY(-3px) scale(1.02);
    box-shadow:var(--shadow-elevated);

}

.view-btn:hover::after{
    transform:translateX(8px);
}

/*==================================================
17. COLLECTION COVER
==================================================*/

.collection-cover{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:var(--surface);

    box-shadow:var(--shadow-sm);

}

.collection-cover img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

}

/*==================================================
18. COLLECTION INFORMATION
==================================================*/

.collection-info{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.collection-year{

    font-size:.72rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--olive);

}

.collection-title{

    font-size:2.2rem;

    font-family:var(--font-display);

    transition:var(--transition);

}

.collection:hover .collection-title{

    color:var(--olive);

}

.collection-description{

    max-width:520px;

}

/*==================================================
19. COLLECTION LINK
==================================================*/

.collection-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:6px;

    font-size:.92rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--olive);

    transition:var(--transition);

}

.collection-link svg{

    transition:transform .35s ease;

}

.collection-link:hover svg{

    transform:translateX(6px);

}

/*==================================================
20. SOFT RUINS HEADER
==================================================*/

.collection-page-header{

    text-align:center;

    padding:70px 10px 0px;

}

.collection-page-header h1{

    margin-bottom:10px;
    font-size: 45px;

}

.collection-page-header p{

    max-width:620px;

    margin:0 auto;

}

.collection-kicker{
    margin-bottom:10px;
    font-size:.66rem;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:color-mix(in srgb, var(--olive-light) 72%, transparent 28%);
}

/*==================================================
20A. SOFT RUINS SIGNATURE LAYOUT
==================================================*/

.soft-ruins-page main{
    background:
        radial-gradient(1200px 500px at 20% 0%, rgba(112,119,91,.08), transparent 62%),
        radial-gradient(1000px 420px at 85% 10%, rgba(180,162,138,.10), transparent 64%),
        linear-gradient(180deg, var(--surface-soft) 0%, var(--bg) 100%);
}

.soft-ruins-page .collection-page-header,
.unfinished-union-page .collection-page-header{
    padding:96px 0 26px;
}

.soft-ruins-page .collection-page-header .container,
.unfinished-union-page .collection-page-header .container{
    max-width:760px;
    border:none;
    border-radius:0;
    padding:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
}

:root[data-theme="dark"] .soft-ruins-page .collection-page-header .container,
:root[data-theme="dark"] .unfinished-union-page .collection-page-header .container{
    background:none;
}

.soft-ruins-page .collection-page-header h1,
.unfinished-union-page .collection-page-header h1{
    font-size:clamp(2.6rem, 5vw, 3.8rem);
    letter-spacing:-.03em;
}

.soft-ruins-page .collection-page-header p,
.unfinished-union-page .collection-page-header p{
    font-size:1.04rem;
    line-height:1.98;
}

.soft-ruins-page .collection-section{
    margin-bottom:128px;
}

.soft-ruins-page .artwork-strip{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-top:-65px;
}

.soft-ruins-page .artwork-preview{
    width:140px;
    border:none;
    border-radius:0;
    padding:0;
    background:transparent;
    box-shadow:none;
    transition:transform .45s ease;
}

.soft-ruins-page .artwork-preview:hover{
    transform:translateY(-8px);
}

.soft-ruins-page .artwork-link{
    display:block;
}

.soft-ruins-page .artwork-preview img{
    width:140px;
    height:530px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
}

.soft-ruins-page .artwork-title{
    margin-top:16px;
    font-size:1.15rem;
    text-align:center;
}

.soft-ruins-page .artwork-year{
    margin-top:4px;
    text-align:center;
}

/*==================================================
20B. UNFINISHED UNION COLLECTION
==================================================*/

.unfinished-union-page main{
    background:
        radial-gradient(950px 440px at 18% 7%, rgba(158,148,132,.13), transparent 66%),
        radial-gradient(820px 360px at 85% 15%, rgba(126,132,117,.11), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 90%, #f4f2ec 10%) 0%, var(--bg) 100%);
}

.unfinished-union-page .collection-page-header{
    padding:96px 0 26px;
}

.union-intro-inner{
    max-width:900px;
    text-align:center;
}

.unfinished-union-page .collection-page-header h1{
    font-family:var(--font-display);
    font-size:clamp(2.6rem, 5vw, 3.8rem);
    font-weight:500;
    letter-spacing:-.03em;
    margin-bottom:10px;
}

.union-subtitle{
    max-width:620px;
    margin:0 auto;
    font-size:1.04rem;
    line-height:1.98;
}

.union-wall{
    padding:12px 0 150px;
}

.union-wall-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(220px, 1fr));
    justify-content:center;
    justify-items:center;
    gap:36px 32px;
    max-width:1040px;
    margin:0 auto;
}

.union-piece{
    width:min(100%, 282px);
}

.union-piece-link{
    display:block;
    width:100%;
    transition:filter .7s cubic-bezier(.22,.61,.36,1);
}

.union-piece-link img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:contain;
    box-shadow:0 24px 64px rgba(0,0,0,.08);
    background:color-mix(in srgb, var(--surface) 90%, transparent 10%);
}

.union-piece-title{
    margin-top:16px;
    font-family:var(--font-heading);
    font-size:1.38rem;
    font-weight:500;
    line-height:1.28;
}

.union-piece-title a{
    display:inline-flex;
    align-items:baseline;
    gap:6px;
}

.union-piece-title a::after{
    content:"↗";
    opacity:0;
    transition:opacity .45s ease;
}

.union-piece:hover .union-piece-link,
.union-piece:focus-within .union-piece-link{
    filter:brightness(.93);
}

.union-piece:hover .union-piece-title a::after,
.union-piece:focus-within .union-piece-title a::after{
    opacity:1;
}

.union-piece-1{ grid-column:1; grid-row:1; transform:translateY(12px); }
.union-piece-2{ grid-column:2; grid-row:1; transform:translateY(-8px); }
.union-piece-3{ grid-column:1; grid-row:2; }
.union-piece-4{ grid-column:2; grid-row:2; transform:translateY(14px); }
.union-piece-5{ grid-column:3; grid-row:2; }
.union-piece-6{ grid-column:2; grid-row:3; transform:translateY(10px); }
.union-piece-7{ grid-column:3; grid-row:3; transform:translateY(-12px); }

/*==================================================
20C. UNFINISHED UNION ARTWORK PAGES
==================================================*/

.unfinished-union-artwork-page main{
    background:
        radial-gradient(860px 420px at 20% 6%, rgba(158,148,132,.11), transparent 68%),
        linear-gradient(180deg, var(--surface-soft) 0%, var(--bg) 100%);
}

.union-artwork-stage{
    padding:146px 0 126px;
}

.union-artwork-shell{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.union-back-link{
    display:inline-block;
    margin-bottom:18px;
    font-size:.78rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--olive-light);
}

.union-artwork-shell h1{
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    margin-bottom:30px;
}

.union-artwork-frame{
    margin:0;
}

.union-artwork-frame img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:contain;
    box-shadow:0 32px 78px rgba(0,0,0,.1);
    background:color-mix(in srgb, var(--surface) 92%, transparent 8%);
}

.union-artwork-nav{
    max-width:760px;
    margin:48px auto 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.union-artwork-nav a{
    display:flex;
    flex-direction:column;
    gap:6px;
    color:var(--text);
}

.union-artwork-nav small{
    color:var(--text-light);
    letter-spacing:.16em;
    text-transform:uppercase;
}

.union-artwork-nav span{
    font-family:var(--font-heading);
    font-size:1.22rem;
}

@media (max-width:1080px){
    .union-wall-grid{
        grid-template-columns:repeat(2, minmax(220px, 1fr));
        gap:34px 28px;
        max-width:700px;
    }

    .union-piece-1,
    .union-piece-2,
    .union-piece-3,
    .union-piece-4,
    .union-piece-5,
    .union-piece-6,
    .union-piece-7{
        grid-column:auto;
        grid-row:auto;
    }

    .union-piece-1{ transform:translateY(8px); }
    .union-piece-2{ transform:translateY(-6px); }
    .union-piece-3{ transform:translateY(2px); }
    .union-piece-4{ transform:translateY(10px); }
    .union-piece-5{ transform:translateY(0); }
    .union-piece-6{ transform:translateY(6px); }
    .union-piece-7{ transform:translateY(-6px); }
}

@media (max-width:768px){
    .unfinished-union-page .collection-page-header{
        padding:96px 0 10px;
    }

    .unfinished-union-page .collection-page-header h1{
        font-size:2.06rem;
    }

    .union-subtitle{
        font-size:.97rem;
        line-height:1.88;
    }

    .union-wall{
        padding:4px 0 126px;
    }

    .union-wall-grid{
        grid-template-columns:1fr;
        gap:44px;
        max-width:360px;
    }

    .union-piece,
    .union-piece-1,
    .union-piece-2,
    .union-piece-3,
    .union-piece-4,
    .union-piece-5,
    .union-piece-6,
    .union-piece-7{
        width:100%;
        transform:none;
    }

    .union-piece-title{
        text-align:center;
        margin-top:18px;
        font-size:1.44rem;
    }

    .union-piece-title a{
        justify-content:center;
    }

    .union-artwork-stage{
        padding:126px 0 106px;
    }

    .union-artwork-shell h1{
        font-size:clamp(2rem, 10vw, 2.8rem);
        margin-bottom:22px;
    }

    .union-artwork-nav{
        margin-top:36px;
        flex-direction:column;
        gap:16px;
        align-items:center;
    }

    .union-artwork-nav a{
        text-align:center;
    }
}

/*==================================================
21. THUMBNAIL STRIP
==================================================*/

.artwork-strip{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

    margin-top:-65px;

}

.artwork-preview{

    width:140px;

    transition:transform .45s ease;

}

.artwork-preview:hover{

    transform:translateY(-8px);

}

.artwork-preview img{

    width:140px;

    height:530px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:var(--shadow-sm);

}

.artwork-title{

    margin-top:16px;

    font-family:var(--font-display);

    font-size:1.15rem;

    text-align:center;

}

.artwork-year{

    margin-top:4px;

    text-align:center;

    font-size:.75rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--text-light);

}

/*==================================================
22. EMPTY SPACE / MUSEUM FEEL
==================================================*/

.collection-space{

    height:120px;

}

.collection-section{

    margin-bottom:120px;

}

.collection-section:last-child{

    margin-bottom:0;

}
/*==================================================
23. ARTWORK GALLERY
==================================================*/

.gallery{

    width:100%;

    padding:40px 0 140px;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:80px 56px;

    align-items:start;

}

/*==================================================
24. ARTWORK CARD
==================================================*/

.art-card{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.art-card figure{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:var(--surface);

    box-shadow:0 18px 48px rgba(0,0,0,.07);
    transition:transform .35s ease, box-shadow .35s ease;
    will-change:transform, box-shadow;

}

.art-card:hover figure{
    transform:translateY(-6px);
    box-shadow:0 32px 86px rgba(0,0,0,.12);
}

.art-card img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;
    transition:transform .35s ease, opacity .35s ease;
    will-change:transform, opacity;

}

.art-card:hover img{
    transform:scale(1.01);
}

/*==================================================
25. ARTWORK DETAILS
==================================================*/

.art-meta{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.art-title{

    font-family:var(--font-display);

    font-size:2rem;

    line-height:1.1;

}

.art-title a{

    transition:var(--transition);

}

.art-title a:hover{

    color:var(--olive);

}

.art-year{

    font-size:.72rem;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:var(--olive);

}

.art-medium{

    font-size:.95rem;

    color:var(--text-light);

    line-height:1.9;

}

/*==================================================
26. MUSEUM LABEL
==================================================*/

.museum-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:4px;

    font-size:.78rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--text-light);

}

.museum-label::before{

    content:"";

    width:36px;

    height:1px;

    background:var(--line);

}

/*==================================================
27. IMAGE OVERLAY
==================================================*/

/*==================================================
28. FEATURED ARTWORK
==================================================*/

.featured-art{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:90px;

    align-items:center;

    margin:140px 0;

}

.featured-image{

    overflow:hidden;

    border-radius:28px;

    box-shadow:var(--shadow-md);

}

.featured-image img{

    width:100%;

    aspect-ratio:5/6;

    object-fit:cover;

}

.featured-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.featured-content h2{

    max-width:420px;

}

.featured-content p{

    max-width:500px;

}

/*==================================================
29. PAGINATION
==================================================*/

.gallery-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:120px;

}

.gallery-pagination a{

    width:44px;

    height:44px;

    display:grid;

    place-items:center;

    border-radius:50%;

    border:1px solid var(--line);

    transition:var(--transition);

}

.gallery-pagination a:hover{

    border-color:var(--olive);

    color:var(--olive);

}

.gallery-pagination .active{

    background:var(--olive);

    color:#fff;

    border-color:var(--olive);

}

/*==================================================
30. GALLERY SPACING
==================================================*/

.gallery section{

    margin-bottom:120px;

}

.gallery section:last-child{

    margin-bottom:0;

}
/*==================================================
31. ARTWORK PAGE
==================================================*/

.artwork-page{

    padding:160px 0 180px;
    background:linear-gradient(180deg, var(--surface-soft) 0%, var(--bg) 100%);

}

.artwork-layout{

    position:relative;
    display:grid;

    grid-template-columns:minmax(420px,1.2fr) minmax(320px,0.8fr);

    gap:88px;

    align-items:start;

    overflow:visible;

}

/*==================================================
32. ARTWORK IMAGE
==================================================*/

.artwork-image{

    position:relative;

    overflow:hidden;
    border-radius:30px;
    box-shadow:0 32px 88px rgba(0,0,0,.08);

}

.artwork-image img{

    width:100%;

    display:block;

    user-select:none;
    border-radius:28px;
    transition:transform .45s ease, opacity .45s ease;

}

.artwork-image:hover img{
    transform:scale(1.01);
    opacity:.98;
}




/*==================================================
33. ARTWORK INFORMATION
==================================================*/

.artwork-info{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:36px;
    padding-right:0;
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1);

}


.collection-name{

    font-size:.66rem;

    letter-spacing:.26em;

    text-transform:uppercase;

    color:color-mix(in srgb, var(--olive-light) 72%, transparent 28%);

    margin-bottom:10px;
    font-weight:500;

}

.artwork-info h1{

    font-family:var(--font-display);

    font-size:clamp(3.2rem, 4.5vw, 4.4rem);

    font-weight:500;

    line-height:1.06;

    letter-spacing:-.03em;

    margin-bottom:10px;

    color:var(--text);

    max-width:100%;
}

.artwork-info h1::after{
    content:"";
    display:block;
    width:64px;
    height:2px;
    background:var(--olive-light);
    margin-top:18px;
    border-radius:2px;
}

.artwork-description{
    width:100%;
    max-width:620px;
    margin-top:4px;
    font-size:1.04rem;
    line-height:1.98;
    color:var(--text-light);
}

.artwork-description p{
    margin:0;

}

.artwork-description p+p{

    margin-top:26px;

}



/*==================================================
32. METADATA
==================================================*/

.artwork-meta{

    width:100%;

    margin-top:42px;

    display:grid;

    gap:24px;

}

.meta-item{

    display:grid;

    grid-template-columns:minmax(160px,200px) minmax(240px,1fr);

    gap:16px;

    align-items:flex-start;

    padding:0;

}

.meta-item:not(:last-child){

    border-bottom:1px solid var(--line-soft);
    padding-bottom:24px;

}

.meta-label{

    font-size:.8rem;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:var(--text-light);
    font-weight:500;

}

.meta-value{

    color:var(--text);

    line-height:1.8;
    font-weight:500;
    font-size:1.02rem;

}

.origin-link{
    color:inherit;
    text-decoration:underline;
    text-decoration-color:color-mix(in srgb, var(--olive-light) 36%, transparent 64%);
    text-decoration-thickness:1px;
    text-underline-offset:.17em;
    transition:color .3s ease, text-decoration-color .3s ease;
}

.origin-link:hover,
.origin-link:focus-visible{
    color:var(--olive-dark);
    text-decoration-color:var(--olive-dark);
}

.concept-item{
    border-bottom:1px solid var(--line-soft);
    padding-bottom:24px;
    display:flex;
    justify-content:flex-start;
}

.concept-item .meta-value{
    font-size:.96rem;
}

.artwork-meta-row{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    border-bottom:none;
    padding-bottom:0;
}

.artwork-meta-row .meta-item{
    display:flex;
    flex-direction:column;
    gap:8px;
    border:none;
    padding:0 0 22px;
}

.artwork-meta-row .meta-item:first-child{
    border-bottom:1px solid var(--line-soft);
}

.artwork-meta-row .meta-label{
    font-size:.78rem;
}

.artwork-meta-row .meta-value{
    font-size:.92rem;
    line-height:1.7;
}

.symbolism-item{
    border-bottom:none;
    padding-bottom:0;
}

.symbolism-item .meta-value{
    white-space:normal;
}
/*==================================================
35. READING ROOM
==================================================*/

.reading-room{

    padding:140px 0 120px;
    background:linear-gradient(180deg, var(--surface-soft) 0%, var(--bg) 100%);

}

.reading-header{

    max-width:760px;

    margin:0 auto 72px;
    text-align:center;

}

.reading-header h1{
    margin-bottom:28px;
    font-size:3.2rem;
    line-height:1.08;
}

.eyebrow{
    display:inline-block;
    margin-bottom:20px;
    font-size:.76rem;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--olive-light);
    font-weight:500;
}

.reading-header p{

    max-width:680px;

    margin:24px auto 0;
    font-size:1.06rem;
    line-height:2.0;

}

.reading-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:42px;

    align-items:stretch;

}

.reading-grid.single{
    grid-template-columns:1fr;
}

.reading-landing{
    padding-bottom:132px;
}

.reading-intro{
    max-width:760px;
    margin:0 auto 56px;
    text-align:center;
}

.reading-journal-title{
    margin:0;
    font-family:var(--font-heading);
    font-size:clamp(2.4rem, 4.8vw, 3.6rem);
    line-height:1.06;
    letter-spacing:-.03em;
    color:var(--text);
}

.reading-journal-subtitle{
    max-width:640px;
    margin:14px auto 0;
    font-family:var(--font-description);
    font-size:.94rem;
    line-height:1.85;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--olive-light);
}

.reading-tagline{
    max-width:720px;
    margin:0 auto;
    font-family:var(--font-display);
    font-size:clamp(1.35rem,2.6vw,2rem);
    line-height:1.16;
    color:var(--text);
}

.reading-grid-landing{
    gap:28px;
}

.reading-grid-landing .reading-card{
    min-height:280px;
    height:auto;
}

.reading-card{
    position:relative;
    display:flex;
    height:100%;
    min-height:260px;
    border:1px solid rgba(112,119,91,.14);
    border-radius:32px;
    background:linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(248,247,242,.985) 100%);
    box-shadow:0 18px 48px rgba(0,0,0,.05);
    overflow:hidden;
    transition:var(--motion);
}

:root[data-theme="dark"] .reading-card{
    background:linear-gradient(135deg, rgba(23,26,22,.92) 0%, rgba(31,35,30,.98) 100%);
}

.reading-card:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 72px rgba(0,0,0,.10);
}

.reading-card-link{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:100%;
    padding:36px 34px 34px;
    color:var(--text);
    cursor:pointer;
}

.reading-card-link:hover{
    color:var(--text);
}

.reading-card-kicker{
    display:inline-flex;
    align-self:flex-start;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(112,119,91,.08);
    color:var(--olive-light);
    font-size:.72rem;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.reading-card-title{
    font-family:var(--font-display);
    font-size:1.35rem;
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.03em;
    color:var(--text);
    min-height:2.2em;
}

.reading-card-snippet{
    margin-top:auto;
    min-height:5.4em;
    font-size:.94rem;
    line-height:1.88;
    color:var(--text-light);
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.reading-card-action{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:2px;
    font-size:.74rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--olive-light);
}

.reading-card-action::after{
    content:"→";
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.reading-card-link:hover .reading-card-action::after{
    transform:translateX(6px);
}

.reading-card-featured{
    border-color:rgba(112,119,91,.2);
    box-shadow:0 26px 80px rgba(0,0,0,.09);
}

.reading-card-featured .reading-card-link{
    gap:14px;
    padding:40px 36px 36px;
}

.reading-card-featured .reading-card-kicker{
    background:rgba(112,119,91,.10);
    color:var(--olive-dark);
}

.reading-card-featured .reading-card-title{
    font-size:1.95rem;
    line-height:1.03;
    max-width:14ch;
}

.reading-card-featured .reading-card-snippet{
    font-size:1rem;
    line-height:1.92;
    max-width:54ch;
}

.reading-card-featured .reading-card-action{
    color:var(--olive-dark);
}

.reading-grid-landing .reading-card-featured .reading-card-link{
    gap:12px;
    padding:36px 34px 34px;
}

.reading-grid-landing .reading-card-featured .reading-card-title{
    font-size:1.35rem;
    line-height:1.08;
    max-width:none;
}

.reading-grid-landing .reading-card-featured .reading-card-snippet{
    font-size:.94rem;
    line-height:1.88;
    max-width:none;
}

.reading-card-future{
    opacity:.92;
}

.reading-card-future .reading-card-kicker{
    background:rgba(112,119,91,.05);
}

/*==================================================
36. ESSAY CARD
==================================================*/

.essay-card{

    display:flex;

    flex-direction:column;

    gap:24px;

    padding:40px 44px;
    border:1px solid var(--line);
    border-radius:32px;
    background:linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(248,247,242,.95) 100%);
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:var(--motion);

}

:root[data-theme="dark"] .essay-card{
    background:linear-gradient(135deg, rgba(23,26,22,.85) 0%, rgba(31,35,30,.9) 100%);
}

.essay-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.essay-visual{

    display:grid;

    place-items:center;

    min-height:240px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(112,119,91,.12) 0%, rgba(255,255,255,.98) 100%);
    border:1px solid var(--line-soft);
    color:var(--olive-dark);
    font-size:.78rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    margin-bottom:8px;
    transition:var(--transition);

}

:root[data-theme="dark"] .essay-visual{
    background:linear-gradient(135deg, rgba(139,133,119,.08) 0%, rgba(31,35,30,.6) 100%);
    color:var(--olive-light);
}

.essay-title{

    font-family:var(--font-display);
    font-size:2.15rem;
    line-height:1.2;
    margin-top:8px;
    padding:24px 28px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,.8);
    transition:var(--transition);

}

:root[data-theme="dark"] .essay-title{
    background:rgba(23,26,22,.6);
    border-color:var(--line);
}

.essay-title a{

    transition:var(--transition);
    color:var(--text);

}

.essay-title a:hover{

    color:var(--olive);

}

.essay-excerpt{

    line-height:2.0;
    max-width:72ch;
    margin-top:8px;
    color:var(--text-light);
    font-size:1.02rem;

}

.essay-content{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/*==================================================
37. ARTICLE PAGE
==================================================*/

.article-page{
    padding:160px 0 140px;
    background:linear-gradient(180deg, var(--surface-soft) 0%, var(--bg) 100%);
}

.article-shell{
    max-width:760px;
    margin:0 auto;
    animation:fadeIn .6s ease-out forwards;
}

.article-header{
    padding:36px 40px;
    margin-bottom:48px;
    border:1px solid var(--line);
    border-radius:28px;
    background:linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(248,247,242,.95) 100%);
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:var(--motion);
}

:root[data-theme="dark"] .article-header{
    background:linear-gradient(135deg, rgba(23,26,22,.8) 0%, rgba(31,35,30,.85) 100%);
}

.article-back{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:32px;
    font-size:.78rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--olive-light);
    transition:var(--transition);
}

.article-back:hover{
    color:var(--olive);
    transform:translateX(-4px);
}

.article-header h1{
    font-size:3.2rem;
    line-height:1.08;
    margin:0;
    color:var(--text);
}

.article-date{
    margin-top:14px;
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--olive-light);
}

.article-tagline{
    font-size:1.08rem;
    line-height:1.9;
    color:var(--text-light);
    font-style:italic;
    margin:0;
}

.article-content{
    font-family:var(--font-body);
    font-size:1.08rem;
    line-height:2.1;
    color:var(--text-light);
    max-width:760px;
    padding:0;
}

.article-content p{
    margin-bottom:32px;
    color:var(--text-light);
    line-height:2.08;
}

.article-content p:last-child{
    margin-bottom:0;
}

.article-content-poem{
    max-width:640px;
}

.article-content-poem p{
    margin-bottom:44px;
    font-family:var(--font-display);
    font-size:1.15rem;
    line-height:1.9;
    white-space:normal;
}

.article-content-poem p:last-child{
    margin-bottom:0;
}

.visual-identity-page .article-content{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.visual-identity-page .article-content p{
    margin:0;
    line-height:2.0;
}

.visual-identity-page .article-subtitle{
    margin:6px 0 0;
    font-family:var(--font-display);
    font-size:1.55rem;
    line-height:1.2;
    font-weight:500;
    color:var(--text);
}

@media (max-width: 768px){
    .article-page{
        padding:120px 0 100px;
    }

    .article-header{
        padding:28px 32px;
        margin-bottom:40px;
    }

    .article-header h1{
        font-size:2.4rem;
    }

    .article-content{
        font-size:1.04rem;
        line-height:2.0;
    }

    .article-date{
        margin-top:12px;
        font-size:.72rem;
        letter-spacing:.18em;
    }

    .visual-identity-page .article-content{
        gap:20px;
    }

    .visual-identity-page .article-subtitle{
        font-size:1.28rem;
        line-height:1.22;
    }

    .article-content p{
        margin-bottom:28px;
    }

    .article-content-poem p{
        margin-bottom:40px;
        font-size:1.08rem;
        line-height:1.84;
    }

    .reading-room{
        padding:100px 0 80px;
    }

    .reading-header{
        margin-bottom:56px;
    }

    .reading-header h1{
        font-size:2.6rem;
    }

    .reading-landing{
        padding-bottom:112px;
    }

    .reading-intro{
        margin-bottom:44px;
    }

    .reading-journal-title{
        font-size:clamp(2.1rem, 6vw, 2.8rem);
    }

    .reading-journal-subtitle{
        font-size:.86rem;
        letter-spacing:.07em;
    }

    .reading-card-link{
        padding:30px 28px 28px;
    }

    .reading-card-title{
        font-size:1.28rem;
    }

    .reading-card-snippet{
        font-size:.96rem;
    }

    .reading-card-featured .reading-card-title{
        font-size:1.55rem;
        max-width:100%;
    }

    .reading-card-featured .reading-card-link{
        padding:34px 30px 30px;
    }

    .reading-grid-landing .reading-card-featured .reading-card-link{
        padding:30px 28px 28px;
    }

    .reading-grid-landing .reading-card-featured .reading-card-title{
        font-size:1.28rem;
    }

    .reading-grid-landing .reading-card-featured .reading-card-snippet{
        font-size:.96rem;
    }

    .essay-card{
        padding:32px 28px;
        gap:20px;
    }

    .essay-visual{
        min-height:180px;
    }

    .essay-title{
        font-size:1.8rem;
        padding:20px 24px;
    }

    .essay-excerpt{
        font-size:1rem;
    }

    .reading-grid{
        grid-template-columns:repeat(2,1fr);
        gap:32px;
    }

    .essay-card{
        max-width:100%;
    }
}

/*==================================================
34. PREVIOUS / NEXT NAVIGATION
==================================================*/

.artwork-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:48px;

    margin-top:140px;

    padding-top:52px;

    border-top:1px solid var(--line-soft);

}

.artwork-navigation a{

    display:flex;

    flex-direction:column;

    gap:12px;
    transition:var(--transition);

}

.artwork-navigation a:hover{
    transform:translateY(-4px);
}

.artwork-navigation a:first-child{
    align-items:flex-start;
}

.artwork-navigation a:last-child{
    align-items:flex-end;
}

.artwork-navigation small{

    font-size:.72rem;

    letter-spacing:.24em;

    color:var(--text-light);
    text-transform:uppercase;

}

.artwork-navigation h3{

    font-family:var(--font-display);

    font-size:1.7rem;

    font-weight:500;
    line-height:1.1;
    margin:0;

    transition:var(--transition);
    color:var(--text);

}

.artwork-navigation a:hover h3{

    color:var(--olive);

}

/*==================================================
39. UTILITY CLASSES
==================================================*/

.hidden{
    display:none !important;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.text-left{
    text-align:left;
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}

.mt-0{margin-top:0!important;}
.mt-1{margin-top:12px!important;}
.mt-2{margin-top:24px!important;}
.mt-3{margin-top:48px!important;}
.mt-4{margin-top:72px!important;}

.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:12px!important;}
.mb-2{margin-bottom:24px!important;}
.mb-3{margin-bottom:48px!important;}
.mb-4{margin-bottom:72px!important;}

/*==================================================
40. SCROLLBAR
==================================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:var(--bg);
}

::-webkit-scrollbar-thumb{
    background:#b8bca8;
    border-radius:999px;
}

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

/*==================================================
41. FOOTER
==================================================*/

.site-footer{
    padding:56px 0 44px;
    margin-top:20px;
    border-top:1px solid var(--line);
    color:var(--text);
    text-align:center;
    background:var(--surface);
}

.site-footer p{
    margin:0;
    font-size:.95rem;
    line-height:1.9;
    color:var(--text-light);
    max-width:620px;
}

.site-footer a{
    color:var(--text);
    font-weight:600;
    text-decoration:none;
}

.footer-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}

.footer-support{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.95rem;
    color:var(--olive-dark);
    text-transform:none;
}

.footer-support a{
    color:var(--olive);
}

.footer-support a[href^="mailto:"]{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.footer-support a[href^="mailto:"]::before{
    content:"✉";
    font-size:.95rem;
    line-height:1;
}

.footer-support span{
    display:none;
}

@media (min-width:900px){
    .footer-inner{
        flex-direction:row;
        justify-content:center;
        gap:32px;
    }
}

/*==================================================
42. IMAGE PROTECTION
==================================================*/

img{

    -webkit-user-drag:none;

    user-select:none;

    -webkit-touch-callout:none;

    pointer-events:auto;

}

img::selection{

    background:transparent;

}

/*==================================================
42. FOCUS STATES
==================================================*/

a:focus-visible,
button:focus-visible{

    outline:2px solid var(--olive);

    outline-offset:5px;

    border-radius:6px;

}

/*==================================================
43. MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}

/*==================================================
44. TABLET
==================================================*/

@media (max-width:1024px){

    section{

        padding:90px 0;

    }

    .featured-art{

        grid-template-columns:1fr;

        gap:56px;

    }

    .artwork-layout{

        grid-template-columns:1fr;

        gap:60px;

    }

    .artwork-image{

        position:relative;

        top:auto;

    }

    .collection-grid{

        grid-template-columns:repeat(2, 1fr);
        gap:52px;
        padding:0 24px;
        margin:0 auto 100px;

    }

    .collection-card{
        width:100%;
    }

    .library-hero{
        margin:100px auto 60px;
        padding:0 24px;
    }

}

/*==================================================
45. MOBILE
==================================================*/

@media (max-width:768px){

    .site-header{
        overflow:visible;
    }

    .header-inner{

        display:flex;

        min-height:72px;
        height:auto;
        justify-content:flex-start;
        align-items:center;
        flex-wrap:wrap;
        row-gap:10px;
        padding:10px 0 12px;

    }

    .logo{
        flex:1 1 auto;
        min-width:0;
    }

    .header-search{
        position:static;
        order:3;
        z-index:1000;
        flex:0 0 100%;
        width:100%;
        max-width:none;
        padding:2px;
        margin:0;
        box-shadow:0 8px 22px rgba(0,0,0,.08);
    }

    main{
        padding-top:170px;
    }

    .search-input{
        padding:8px 12px 8px 36px;
        font-size:.84rem;
    }

    .search-icon{
        width:14px;
        height:14px;
        left:10px;
    }

    .menu-toggle{

        display:flex;
        margin-left:auto;

    }

    .site-header .nav{

        display:none !important;

        flex-direction:column;

        align-items:stretch;
        position:absolute;

        top:164px;

        right:0;

        min-width:220px;

        padding:16px;

        background:color-mix(in srgb, var(--surface) 94%, transparent);

        border:1px solid var(--line);

        border-radius:20px;

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

        z-index:1100;

        opacity:0;

        transform:translateY(-8px);

        pointer-events:none;

        transition:opacity .25s ease, transform .25s ease;

    }

    .soft-ruins-page .collection-page-header{
        padding:96px 0 0;
        text-align:center;
    }

    .soft-ruins-page .collection-page-header .container{
        border-radius:24px;
        padding:24px 20px;
        box-shadow:0 14px 34px rgba(0,0,0,.06);
    }

    :root[data-theme="dark"] .soft-ruins-page .collection-page-header .container{
        background:linear-gradient(135deg, rgba(23,26,22,.86) 0%, rgba(31,35,30,.9) 100%);
    }

    .soft-ruins-page .collection-page-header h1{
        font-size:2.35rem;
        margin-bottom:8px;
    }

    .soft-ruins-page .collection-page-header p{
        font-size:.97rem;
        line-height:1.88;
    }

    .soft-ruins-page .collection-section{
        margin-top:18px;
        margin-bottom:92px;
    }

    .soft-ruins-page .artwork-strip{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:10px;
        margin-top:2px;
        overflow:visible;
        padding:2px 0 10px;
        justify-content:center;
        justify-items:center;
        scroll-snap-type:none;
    }

    .soft-ruins-page .artwork-preview{
        width:100%;
        max-width:122px;
        border:1px solid var(--line);
        border-radius:22px;
        padding:8px;
        background:linear-gradient(145deg, rgba(255,255,255,.93) 0%, rgba(248,246,241,.98) 100%);
        box-shadow:0 12px 30px rgba(0,0,0,.08);
        scroll-snap-align:none;
    }

    :root[data-theme="dark"] .soft-ruins-page .artwork-preview{
        background:linear-gradient(145deg, rgba(23,26,22,.88) 0%, rgba(31,35,30,.95) 100%);
    }

    .soft-ruins-page .artwork-preview img{
        width:100%;
        height:clamp(205px, 42vh, 300px);
        aspect-ratio:auto;
        border-radius:12px;
        box-shadow:0 12px 28px rgba(0,0,0,.14);
    }

    .soft-ruins-page .artwork-title{
        margin-top:8px;
        font-size:.82rem;
        text-align:center;
        line-height:1.22;
    }

    .soft-ruins-page .artwork-year{
        margin-top:5px;
        text-align:center;
        letter-spacing:.18em;
        font-size:.58rem;
        color:var(--olive-light);
    }

    .site-header .nav.is-open{

        display:flex !important;

        opacity:1;

        transform:translateY(0);

        pointer-events:auto;

    }

    .nav a{

        font-size:0.78rem;
        padding:8px 0;
        width:100%;
        text-align:center;
        border-bottom:1px solid var(--line-soft);

    }

    .nav a:last-child{

        border-bottom:none;

    }

    .nav a::after{

        display:none;

    }

    .hero{

        padding:120px 24px 80px;

    }

    .hero-inner{
        gap:28px;
    }

    .hero h1{
        font-size:2.2rem;
        display:inline-block;
        width:auto;
        text-align:center;
    }

    .hero-description{
        font-size:1.02rem;
        line-height:1.9;
    }

    .hero-button{
        padding:14px 32px;
        font-size:.88rem;
    }

    .whats-new{
        padding:18px 0 102px;
    }

    .whats-new .section-heading{
        margin-bottom:34px;
    }

    .whats-new-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .update-card{
        padding:22px 20px;
        border-radius:22px;
        gap:12px;
    }

    .update-card h3{
        font-size:1.3rem;
    }

    .update-card p{
        font-size:.93rem;
        line-height:1.78;
    }

    .update-link{
        width:100%;
        justify-content:center;
        margin-top:6px;
        padding:10px 14px;
    }

    .whats-new-actions{
        margin-top:30px;
    }

    .new-badge{
        top:12px;
        right:12px;
        min-width:44px;
        padding:5px 8px;
        font-size:.56rem;
        letter-spacing:.14em;
    }

    .collection-card.is-new{
        padding:0;
    }

    .hero-image{
        margin:28px auto 0;
        max-width:100%;
    }

    .hero-actions{

        flex-direction:column;

        width:100%;

    }

    .btn{

        width:100%;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .reading-grid{

        grid-template-columns:1fr;

    }

    .collection-grid{
        grid-template-columns:1fr;
        gap:40px;
        padding:0 24px;
        margin:0 auto 80px;
    }

    .collection-info{
        margin-top:24px;
    }

    .collection-info h2{
        font-size:1.8rem;
        margin:12px 0 20px;
    }

    .artwork-strip{

        justify-content:flex-start;

        overflow-x:auto;

        padding-bottom:10px;

    }

    .artwork-preview{

        flex:0 0 auto;

    }

    .artwork-navigation{

        flex-direction:column;

        align-items:flex-start;
        gap:28px;
        margin-top:80px;

    }

    .artwork-navigation a:first-child,
    .artwork-navigation a:last-child{
        align-items:flex-start;
    }

    .artwork-info h1{
        font-size:2.55rem;
    }

    .artwork-meta-row{
        grid-template-columns:1fr;
        gap:20px;
    }

    .artwork-meta-row .meta-label{
        font-size:.76rem;
    }

    .artwork-meta-row .meta-value{
        font-size:.96rem;
    }

}


/*==================================================
46. SMALL MOBILE
==================================================*/

@media (max-width:480px){

    .container,
    .page,
    .page-narrow{

        width:min(calc(100% - 32px),100%);

    }

    .logo img{
        width:60px;
        height:56px;
    }

    .logo-text{
        font-size:1.1rem;
        letter-spacing:.14em;
    }

    .header-search{
        width:100%;
        max-width:none;
        margin:0;
        box-shadow:0 6px 18px rgba(0,0,0,.08);
    }

    .nav{
        top:118px;
    }

    main{
        padding-top:164px;
    }

    .nav{
        top:158px;
    }

    .soft-ruins-page .collection-page-header .container{
        padding:20px 16px;
        border-radius:20px;
    }

    .soft-ruins-page .collection-page-header h1{
        font-size:2.06rem;
    }

    .soft-ruins-page .collection-kicker,
    .unfinished-union-page .collection-kicker{
        margin-bottom:12px;
        font-size:.66rem;
    }

    .soft-ruins-page .collection-page-header .container,
    .unfinished-union-page .collection-page-header .container{
        padding:0;
        max-width:100%;
    }

    .unfinished-union-page .collection-page-header h1{
        font-size:2.06rem;
        margin-bottom:10px;
    }

    .unfinished-union-page .collection-page-header p{
        font-size:.97rem;
        line-height:1.88;
    }

    .soft-ruins-page .artwork-preview{
        max-width:104px;
        padding:7px;
        border-radius:18px;
    }

    .soft-ruins-page .artwork-strip{
        gap:8px;
    }

    .soft-ruins-page .artwork-preview img{
        height:clamp(185px, 35vh, 255px);
        border-radius:10px;
    }

    .soft-ruins-page .artwork-title{
        font-size:.74rem;
    }

    .soft-ruins-page .artwork-year{
        font-size:.54rem;
    }

    .union-subtitle{
        font-size:.96rem;
        line-height:1.8;
    }

    .union-wall{
        padding:0 0 108px;
    }

    .union-wall-grid{
        max-width:300px;
        gap:36px;
    }

    .union-piece-title{
        margin-top:14px;
        font-size:1.18rem;
    }

    .union-piece-link img{
        box-shadow:0 18px 42px rgba(0,0,0,.08);
    }

    .union-artwork-stage{
        padding:112px 0 92px;
    }

    .union-artwork-shell{
        max-width:100%;
    }

    .union-artwork-shell h1{
        font-size:clamp(1.9rem, 9vw, 2.4rem);
        margin-bottom:18px;
    }

    .union-artwork-frame img{
        box-shadow:0 20px 50px rgba(0,0,0,.09);
    }

    .union-artwork-nav{
        margin-top:30px;
        gap:14px;
    }

    .union-artwork-nav span{
        font-size:1.04rem;
    }

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:2rem;

    }

    .hero{
        padding:100px 20px 60px;
    }

    .hero h1{
        font-size:2rem;
        display:inline-block;
        width:auto;
        text-align:center;
    }

    .hero-description{
        font-size:.96rem;
    }

    .hero-button{
        padding:12px 28px;
        font-size:.84rem;
    }

    .whats-new{
        padding:12px 0 84px;
    }

    .update-card{
        padding:20px 16px;
    }

    .update-card h3{
        font-size:1.2rem;
    }

    .update-link{
        font-size:.68rem;
        letter-spacing:.15em;
        padding:9px 12px;
    }

    .new-badge{
        top:10px;
        right:10px;
        min-width:40px;
        padding:4px 7px;
        font-size:.52rem;
        letter-spacing:.12em;
    }

    .collection-card.is-new{
        padding:0;
    }

    .article-header h1{
        font-size:2.2rem;
    }

    .artwork-info h1{
        font-size:2.6rem;
    }

    .artwork-meta-row{
        grid-template-columns:1fr;
        gap:20px;
    }

    .hero h1{
        max-width:100%;
        white-space:normal;
        font-size:2.1rem;
        display:inline-block;
        width:auto;
        text-align:center;
    }

    .archive-title{
        font-size:1.8rem;
    }

    .collection-title{

        font-size:1.8rem;

    }

    .art-title{

        font-size:1.7rem;

    }

    .essay-title{

        font-size:1.7rem;

    }

    .reading-landing{
        padding-bottom:96px;
    }

    .reading-intro{
        margin-bottom:40px;
    }

    .reading-journal-title{
        font-size:2rem;
    }

    .reading-journal-subtitle{
        margin-top:10px;
        font-size:.78rem;
        line-height:1.7;
        letter-spacing:.06em;
    }

    .reading-tagline{
        font-size:1.1rem;
        line-height:1.18;
    }

    .reading-grid-landing{
        gap:20px;
    }

    .reading-card-link{
        padding:24px 20px 22px;
    }

    .reading-card-title{
        font-size:1.12rem;
    }

    .reading-card-snippet{
        font-size:.92rem;
        line-height:1.86;
    }

    .reading-card-featured .reading-card-link{
        padding:28px 22px 24px;
    }

    .reading-grid-landing .reading-card-featured .reading-card-link{
        padding:24px 20px 22px;
    }

    .reading-card-featured .reading-card-title{
        font-size:1.22rem;
        line-height:1.08;
    }

    .reading-grid-landing .reading-card-featured .reading-card-title{
        font-size:1.12rem;
    }

    .reading-card-featured .reading-card-snippet{
        font-size:.95rem;
    }

    .reading-grid-landing .reading-card-featured .reading-card-snippet{
        font-size:.92rem;
    }

    .reading-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .essay-card{
        padding:24px 20px;
        max-width:100%;
    }

    .essay-visual{
        min-height:160px;
    }

    .artwork-preview{

        width:120px;

    }

    .artwork-preview img{

        width:120px;

        height:480px;

    }

}

/*==================================================
47. PRINT
==================================================*/

@media print{

    .site-header,
    .site-footer,
    .hero-actions,
    .gallery-pagination{

        display:none!important;

    }

}

/*==================================================
48. ARCHIVE
==================================================*/

.archive-section{

    margin-top:72px;

    padding-top:52px;

    border-top:1px solid var(--line-soft);

}

.archive-heading{

    font-size:.74rem;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:var(--text-light);

    margin-bottom:22px;
    font-weight:500;

}

.archive-title{

    font-family:var(--font-display);

    font-size:2.2rem;

    font-weight:500;

    line-height:1.15;

    color:var(--text);

    margin-bottom:24px;

}

.archive-description{

    max-width:480px;

    color:var(--text-light);

    line-height:2.0;

    margin-bottom:44px;
    font-size:1.04rem;

}

.archive-specs{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:48px;

}

.archive-spec{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:40px;

    padding-bottom:16px;

    border-bottom:1px solid var(--line-soft);

}

.archive-spec span:first-child{

    font-size:.72rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--text-light);

}

.archive-spec span:last-child{

    color:var(--text);

}

.archive-button{

    display:inline-flex;

    align-items:center;
    justify-content:center;
    gap:14px;

    padding:16px 40px;

    border:1.5px solid var(--olive-light);
    border-radius:999px;

    background:transparent;
    color:var(--text);
    text-decoration:none;

    font-size:.9rem;
    font-weight:500;
    letter-spacing:.04em;

    box-shadow:0 12px 32px rgba(0,0,0,.08);
    transition:transform .35s cubic-bezier(.22,.61,.36,1), 
              box-shadow .35s ease, 
              background-color .35s ease, 
              border-color .35s ease, 
              color .35s ease;
    will-change:transform, box-shadow;

}

:root[data-theme="dark"] .archive-button{
    border-color:var(--olive-light);
    box-shadow:0 12px 32px rgba(0,0,0,.24);
}

.archive-button::after{
    content:"→";
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    font-weight:600;
}

.archive-button:hover{

    background:var(--olive-dark);
    color:var(--surface);
    border-color:var(--olive-dark);
    transform:translateY(-3px) scale(1.02);
    box-shadow:var(--shadow-elevated);

}

.archive-button:hover::after{
    transform:translateX(8px);
}

.archive-button:active{
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
}

.archive-note{

    margin-top:22px;

    font-size:.84rem;

    line-height:1.9;

    color:var(--text-light);

}

@media (max-width:768px){

    .artwork-page{
        padding:132px 0 120px;
    }

    .artwork-layout{
        gap:44px;
    }

    .artwork-info{
        gap:24px;
    }

    .artwork-description{
        font-size:.98rem;
        line-height:1.85;
    }

    .artwork-meta{
        margin-top:26px;
        gap:18px;
    }

    .archive-section{
        margin-top:44px;
        padding-top:34px;
    }

    .archive-title{
        font-size:1.9rem;
        margin-bottom:16px;
    }

    .archive-description{
        margin-bottom:28px;
        font-size:.96rem;
        line-height:1.82;
    }

    .archive-spec{
        gap:16px;
        padding-bottom:12px;
    }

    .archive-button{
        width:100%;
        padding:14px 24px;
    }

}

@media (max-width:480px){

    .artwork-page{
        padding:118px 0 96px;
    }

    .artwork-layout{
        gap:34px;
    }

    .artwork-info{
        gap:20px;
    }

    .artwork-description{
        font-size:.94rem;
        line-height:1.8;
    }

    .archive-section{
        margin-top:34px;
        padding-top:26px;
    }

    .archive-title{
        font-size:1.62rem;
    }

    .archive-description{
        margin-bottom:22px;
    }

    .archive-specs{
        margin-bottom:30px;
        gap:12px;
    }

    .archive-spec span:first-child{
        font-size:.66rem;
        letter-spacing:.1em;
    }

    .archive-spec span:last-child{
        font-size:.9rem;
    }

    .archive-note{
        line-height:1.7;
    }

}

/*==================================================
49. DISABLE TEXT SELECTION
==================================================*/

body{

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

}

/*==================================================
50. ATMOSPHERE
==================================================*/

/*==================================================
GLOBAL TRANSITIONS
==================================================*/

html{

    scroll-behavior:smooth;

}

a,
button{

    transition:
        color .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        opacity .35s ease,
        transform .35s ease;

}

img{

    transition:
        opacity .4s ease;

}

/*==================================================
GLOBAL LINK HOVER
==================================================*/

nav a{

    transition:color .35s ease;

}

nav a:hover{

    color:var(--dusty-rose);

}

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:0;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    border:1px solid var(--line);
    border-radius:999px;
    cursor:pointer;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:5px;
    z-index:1100;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.menu-toggle:hover{
    transform:translateY(-1px);
    border-color:rgba(112,119,91,.3);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.menu-toggle span{
    width:20px;
    height:1.8px;
    background:var(--text);
    transition:.35s ease;
    border-radius:2px;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

@media (max-width:768px){
    .menu-toggle{
        display:flex;
    }
}