/* ==============================================================
   DAVID HAAVE — CUSTOM SITE STYLES
   Shared across every page (index, gallery, about, wikipedia,
   books, and all 51 gallery detail pages)
   ============================================================== */

/* --------------------------------------------------------------
   1. PALETTE & DESIGN TOKENS
   -------------------------------------------------------------- */
:root {
    --navy:        #0d2b52;
    --navy-deep:   #091d3a;
    --blue:        #1565c0;
    --blue-bright: #2196f3;
    --blue-soft:   #e3f2fd;
    --red:         #c62828;
    --red-bright:  #e53935;
    --red-soft:    #ffebee;
    --gold:        #f9a825;
    --gold-deep:   #b8860b;
    --cream:       #fdf6ed;
    --cream-2:     #fff8ec;
    --ink:         #1a2238;
    --ink-soft:    #4a5568;
    --paper:       #ffffff;

    /* sunset palette (home — liberty hero) */
    --sunset-1:     #3d1436;
    --sunset-2:     #7a2f52;
    --sunset-3:     #c65c4a;
    --sunset-4:     #f2913d;
    --sunset-5:     #ffcb6b;
    --sunset-flame: #fff2c8;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------
   2. BASE / BODY
   -------------------------------------------------------------- */
html, body { overflow-x: hidden; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(ellipse 900px 700px at 0% 0%,     #fff2e0 0%, transparent 55%),
        radial-gradient(ellipse 900px 700px at 100% 0%,   #e8f2ff 0%, transparent 55%),
        radial-gradient(ellipse 900px 700px at 0% 100%,   #ffeeee 0%, transparent 55%),
        radial-gradient(ellipse 900px 700px at 100% 100%, #f0f7ff 0%, transparent 55%),
        linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 40%, #fff5f0 70%, #f0f7ff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(13, 43, 82, .07) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(198, 40, 40, .05) 1px, transparent 1.5px);
    background-size: 42px 42px, 60px 60px;
    background-position: 0 0, 20px 20px;
    pointer-events: none;
    z-index: 0;
}

/* --------------------------------------------------------------
   3. SHARED HERO ORNAMENT & EYEBROW
   -------------------------------------------------------------- */
.hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
    color: var(--gold);
}
.hero-ornament span {
    display: block;
    height: 2px;
    width: clamp(48px, 12vw, 112px);
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-ornament span:last-child {
    background: linear-gradient(90deg, var(--gold), transparent);
}
.hero-ornament i {
    font-size: clamp(1.1rem, 2.6vw, 1.45rem);
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(249, 168, 37, .65));
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 16px;
    padding: 8px 20px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: clamp(.72rem, 1.2vw, .85rem);
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(249, 168, 37, .45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.hero-eyebrow i {
    color: var(--gold);
    font-size: 1.15em;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
}

/* shared hero sweeps */
@keyframes heroSweep {
    0%   { background-position: -180% 0; }
    100% { background-position:  280% 0; }
}
@keyframes accentFlow {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes barFlow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 250% 50%; }
}
@keyframes cardRise {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes emblemFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* --------------------------------------------------------------
   4. HERO — HOME · US FLAG
   -------------------------------------------------------------- */
.hero-flag {
    position: relative;
    overflow: hidden;
    min-height: clamp(300px, 35vw, 450px);
    padding: clamp(70px, 9vw, 110px) 22px clamp(56px, 6.5vw, 86px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    isolation: isolate;
    background: #0a1e3f;
}
.flag-photo {
    position: absolute;
    inset: -2%;
    z-index: 0;
    background-image: url("../img/home/header_00_01.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    animation: libertyBreathe 30s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}
.hero-flag::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 1) 70%,
            rgba(0, 0, 0, 1) 85%,
            rgba(0, 0, 0, 1) 100%),
            radial-gradient(ellipse 70% 60% at 50% 22%,
            rgba(255, 220, 160, .10) 0%,
            transparent 60%); */
}
.flag-card {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(28px, 3.6vw, 46px) clamp(22px, 3.6vw, 56px);
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(160deg,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.54) 50%,
        rgba(0, 0, 0, 0.62) 100%);
    border: 1px solid rgba(255, 203, 107, .42);
    overflow: hidden;
}
.flag-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--sunset-3) 0%,
        var(--sunset-4) 28%,
        var(--sunset-flame) 50%,
        var(--sunset-4) 72%,
        var(--sunset-2) 100%);
    background-size: 250% 100%;
    animation: barFlow 7s linear infinite;
}
.flag-card h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.4rem, 6.8vw, 5.2rem);
    line-height: 1.5;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    color: #fff;
    text-shadow:
        0 3px 0 rgba(255, 0, 0, 0.4),
        0 20px 52px rgba(0, 0, 0, .70);
}
.flag-card h1 .accent {
    display: inline-block;
    font-style: normal;
    /* background: linear-gradient(115deg,
        #ff0000 0%, #da1111 42%, #be2424 68%, #973333 100%);
    background-size: 240% 100%; */
    -webkit-background-clip: text;
    background-clip: text;
    /* color: transparent; */
    animation: accentFlow 6s ease infinite;
    /* filter: drop-shadow(0 4px 14px rgba(249, 168, 37, .50)); */
}
.flag-card .hero-tagline {
    margin-inline: auto;
}
.flag-card .hero-actions,
.flag-card .hero-btn-featured {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------
   5. HERO — HOME · LIBERTY
   -------------------------------------------------------------- */
.hero-liberty {
    position: relative;
    overflow: hidden;
    min-height: clamp(680px, 82vw, 960px);
    padding: clamp(70px, 9vw, 110px) 22px clamp(56px, 6.5vw, 86px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    isolation: isolate;
    background: #1a0818;
}
.liberty-photo {
    position: absolute;
    inset: -2%;
    z-index: 0;
    background-image: url("../img/home/header_01_01.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    animation: libertyBreathe 30s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}
@keyframes libertyBreathe {
    0%, 100% { transform: scale(1)    translateX(0); }
    50%      { transform: scale(1.05) translateX(-1%); }
}
.hero-liberty::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(30, 10, 30, .18) 0%,
            rgba(30, 10, 30, .05) 30%,
            rgba(30, 10, 30, .10) 55%,
            rgba(30, 10, 30, .55) 100%),
        radial-gradient(ellipse 70% 60% at 50% 22%,
            rgba(255, 220, 160, .10) 0%,
            transparent 60%);
}
.liberty-scene-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 214, 150, .08) 48%,
        rgba(255, 242, 200, .12) 51%,
        rgba(255, 203, 107, .06) 54%,
        transparent 64%);
    background-size: 280% 100%;
    background-position: -120% 0;
    animation: sceneShine 11s linear infinite;
    mix-blend-mode: screen;
}
@keyframes sceneShine {
    0%   { background-position: -120% 0; }
    100% { background-position:  220% 0; }
}
.liberty-card {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(28px, 3.6vw, 46px) clamp(22px, 3.6vw, 56px);
    border-radius: 22px;
    text-align: center;
    background: linear-gradient(160deg,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.54) 50%,
        rgba(0, 0, 0, 0.62) 100%);
    border: 1px solid rgba(255, 203, 107, .42);
    overflow: hidden;
}
.liberty-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    animation: barFlow 7s linear infinite;
}
.liberty-emblem {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: #4b1a12;
    font-size: 1.35rem;
    background: linear-gradient(140deg, #fff2c8 0%, var(--sunset-4) 45%, var(--sunset-3) 100%);
    border: 3px solid rgba(255, 255, 255, .95);
    box-shadow:
        0 12px 30px rgba(122, 47, 82, .55),
        0 0 0 1px rgba(255, 203, 107, .65),
        inset 0 2px 0 rgba(255, 255, 255, .75);
    animation: emblemFloat 6s ease-in-out infinite;
}
.liberty-emblem i {
    filter: drop-shadow(0 2px 3px rgba(70, 20, 8, .45));
}
.liberty-card h3 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.08rem, 2.2vw, 1.55rem);
    line-height: 1.5;
    letter-spacing: -.005em;
    margin: 0 auto clamp(14px, 2vw, 20px);
    color: #ffeaea;
    -webkit-text-stroke: 0.5px black;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .40),
        0 10px 26px rgba(0, 0, 0, .60);
    max-width: 58ch;
}
.liberty-card h3:last-child { margin-bottom: 0; }
.liberty-card h3 .liberty-accent {
    font-style: normal;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: red;
    -webkit-text-stroke: 0.5px rgb(255, 115, 0);
    animation: accentFlow 6s ease infinite;
}
.liberty-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: clamp(14px, 2vw, 20px) auto;
    max-width: 300px;
}
.liberty-divider::before,
.liberty-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 203, 107, .7), transparent);
}
.liberty-divider i {
    color: var(--sunset-flame);
    font-size: .95rem;
    filter: drop-shadow(0 2px 6px rgba(255, 203, 107, .75));
}
.lib-hl {
    font-weight: 700;
    color: #fff7ea;
    padding: 0 .14em;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.lib-key {
    font-weight: 700;
    color: #fff;
    padding: .06em .32em;
    border-radius: 7px;
    box-shadow:
        inset 0 -2px 0 rgba(255, 203, 107, .65),
        inset 0 1px 0 rgba(255, 255, 255, .25);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.lib-em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.06em;
    color: var(--sunset-flame);
    letter-spacing: .005em;
}

/* --------------------------------------------------------------
   6. HERO — BOOKS
   -------------------------------------------------------------- */
.books-hero {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 10px;
    text-align: center;
    background:
        radial-gradient(ellipse 1200px 500px at 50% 0%,   rgba(33, 150, 243, .35) 0%, transparent 60%),
        radial-gradient(ellipse 900px 500px at 10% 100%,  rgba(229, 57, 53, .30) 0%,  transparent 60%),
        radial-gradient(ellipse 900px 500px at 90% 100%,  rgba(249, 168, 37, .35) 0%,  transparent 60%),
        linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #12345c 100%);
    border-bottom: 5px solid var(--red);
    box-shadow: 0 22px 60px rgba(9, 29, 58, .28);
}
.books-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.12), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(255,255,255,.08), transparent 40%);
    pointer-events: none;
}
.books-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255, 255, 255, .14) 48%,
        rgba(255, 255, 255, .05) 52%,
        transparent 62%);
    background-size: 260% 100%;
    animation: heroSweep 8s linear infinite;
    pointer-events: none;
}
.books-hero > * { position: relative; z-index: 2; }
.books-hero h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    color: #fff;
    text-shadow:
        0 3px 0 rgba(198, 40, 40, .35),
        0 16px 46px rgba(0, 0, 0, .50);
}
.books-hero h1 .accent {
    display: inline-block;
    font-style: normal;
    background: linear-gradient(115deg,
        var(--red) 0%, #ffe082 35%, var(--red-bright) 65%, var(--red) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: accentFlow 5s ease infinite;
    filter: drop-shadow(0 2px 8px rgba(249, 168, 37, .40));
}
.books-hero p {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 2.25vw, 1.99rem);
    font-weight: 500;
    color: rgba(255, 255, 255, .90);
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .30);
}

/* --------------------------------------------------------------
   7. HERO — ABOUT / WIKIPEDIA (shared)
   -------------------------------------------------------------- */
.about-hero,
.wiki-hero {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 10px;
    text-align: center;
    background:
        radial-gradient(ellipse 1200px 500px at 50% 0%,   rgba(33, 150, 243, .35) 0%, transparent 60%),
        radial-gradient(ellipse 900px 500px at 10% 100%,  rgba(229, 57, 53, .30) 0%,  transparent 60%),
        radial-gradient(ellipse 900px 500px at 90% 100%,  rgba(249, 168, 37, .35) 0%,  transparent 60%),
        linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #12345c 100%);
    border-bottom: 5px solid var(--red);
    box-shadow: 0 22px 60px rgba(9, 29, 58, .28);
}
.about-hero::before,
.wiki-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.12), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(255,255,255,.08), transparent 40%);
    pointer-events: none;
}
.about-hero::after,
.wiki-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255, 255, 255, .14) 48%,
        rgba(255, 255, 255, .05) 52%,
        transparent 62%);
    background-size: 260% 100%;
    animation: heroSweep 8s linear infinite;
    pointer-events: none;
}
.about-hero > *,
.wiki-hero > * { position: relative; z-index: 2; }
.about-hero h1,
.wiki-hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.85rem, 5.4vw, 3.9rem);
    line-height: 1.4;
    letter-spacing: -.02em;
    max-width: 1400px;
    margin: 0 auto 18px;
    color: #fff;
    text-shadow:
        0 3px 0 rgba(198, 40, 40, .35),
        0 14px 44px rgba(0, 0, 0, .45);
}
.about-hero h1 .accent,
.wiki-hero h1 .accent {
    display: inline-block;
    font-style: normal;
    background: linear-gradient(115deg,
        var(--red) 0%, #ffe082 35%, var(--red-bright) 65%, var(--red) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: accentFlow 5s ease infinite;
    filter: drop-shadow(0 2px 8px rgba(249, 168, 37, .40));
}

/* --------------------------------------------------------------
   8. HERO — GALLERY
   -------------------------------------------------------------- */
.gallery-hero {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    background:
        radial-gradient(ellipse 1200px 500px at 50% 0%,   rgba(33, 150, 243, .35) 0%, transparent 60%),
        radial-gradient(ellipse 900px 500px at 10% 100%,  rgba(229, 57, 53, .30) 0%,  transparent 60%),
        radial-gradient(ellipse 900px 500px at 90% 100%,  rgba(249, 168, 37, .35) 0%,  transparent 60%),
        linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #12345c 100%);
    border-bottom: 5px solid var(--red);
    box-shadow: 0 22px 60px rgba(9, 29, 58, .28);
}
.gallery-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.12), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(255,255,255,.08), transparent 40%);
    pointer-events: none;
}
.gallery-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(255, 255, 255, .14) 48%,
        rgba(255, 255, 255, .05) 52%,
        transparent 62%);
    background-size: 260% 100%;
    animation: heroSweep 8s linear infinite;
    pointer-events: none;
}
.gallery-hero > * { position: relative; z-index: 2; }
.gallery-hero h1 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.1rem, 6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    color: #fff;
    text-shadow:
        0 3px 0 rgba(198, 40, 40, .35),
        0 14px 44px rgba(0, 0, 0, .45);
}
.gallery-hero h1 .accent {
    display: inline-block;
    font-style: normal;
    background: linear-gradient(115deg,
        var(--red) 0%, #ffe082 35%, var(--red-bright) 65%, var(--red) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: accentFlow 5s ease infinite;
    filter: drop-shadow(0 2px 8px rgba(249, 168, 37, .40));
}
.gallery-hero p {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: clamp(1.68rem, 2.5vw, 1.80rem);
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------
   9. BUTTONS
   -------------------------------------------------------------- */
.hero-actions {
    margin-top: clamp(30px, 4vw, 44px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 18px);
}
.hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(13px, 1.7vw, 17px) clamp(26px, 3.4vw, 44px);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: clamp(.82rem, 1.2vw, .96rem);
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        letter-spacing .35s ease,
        box-shadow .35s ease,
        background-position .7s ease;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.hero-btn i {
    font-size: 1.15em;
    line-height: 1;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.hero-btn:hover i,
.hero-btn:focus-visible i { transform: translateX(5px) scale(1.15); }
.hero-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, .5) 48%,
        rgba(255, 235, 170, .75) 51%,
        rgba(255, 255, 255, .3) 54%,
        transparent 68%);
    background-size: 260% 100%;
    background-position: -150% 0;
    transition: background-position .9s ease;
    pointer-events: none;
}
.hero-btn:hover::before,
.hero-btn:focus-visible::before { background-position: 250% 0; }
.hero-btn-primary {
    background: linear-gradient(115deg,
        var(--navy) 0%, var(--blue) 38%, var(--blue-bright) 58%, var(--red) 100%);
    background-size: 240% 240%;
    background-position: 0% 50%;
    box-shadow:
        0 14px 36px rgba(9, 29, 58, .55),
        0 0 0 1px rgba(249, 168, 37, .5),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.hero-btn-primary:hover,
.hero-btn-primary:focus-visible {
    background-position: 100% 50%;
    letter-spacing: 3.1px;
    transform: translateY(-3px);
    box-shadow:
        0 20px 48px rgba(198, 40, 40, .55),
        0 0 0 2px rgba(249, 168, 37, .8),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    color: #fff;
    outline: none;
}
.hero-btn-optional {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hero-btn-optional:hover,
.hero-btn-optional:focus-visible {
    background: rgba(255, 255, 255, .18);
    letter-spacing: 3.1px;
    transform: translateY(-3px);
    box-shadow:
        0 20px 48px rgba(198, 40, 40, .40),
        0 0 0 2px rgba(255, 255, 255, .7),
        inset 0 1px 0 rgba(255, 255, 255, .6);
    color: #fff;
    outline: none;
}
.hero-btn-featured {
    display: block;
    width: min(420px, 100%);
    margin: clamp(24px, 3.4vw, 36px) auto 0;
    padding: clamp(18px, 2.4vw, 24px) clamp(26px, 3.4vw, 44px);
    border-radius: 20px;
    font-size: clamp(1.05rem, 2.2vw, 1.55rem);
    letter-spacing: 4px;
    background: linear-gradient(115deg,
        #b8860b 0%, #f9a825 25%, #ffd54f 45%, #e53935 80%, #b71c1c 100%);
    background-size: 260% 260%;
    background-position: 0% 50%;
    box-shadow:
        0 18px 46px rgba(184, 134, 11, .50),
        0 0 0 2px rgba(255, 255, 255, .85),
        0 0 0 6px rgba(249, 168, 37, .22),
        inset 0 2px 0 rgba(255, 255, 255, .5);
    color: #2b1500;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.hero-btn-featured strong {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 1.3em;
    letter-spacing: 1px;
    text-transform: none;
}
.hero-btn-featured:hover,
.hero-btn-featured:focus-visible {
    background-position: 100% 50%;
    letter-spacing: 5px;
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 26px 62px rgba(198, 40, 40, .55),
        0 0 0 2px rgba(255, 255, 255, .95),
        0 0 0 8px rgba(249, 168, 37, .30),
        inset 0 2px 0 rgba(255, 255, 255, .6);
    color: #1a0a00;
    outline: none;
}

/* --------------------------------------------------------------
   10. AREAS / SECTION WRAPPERS
   -------------------------------------------------------------- */
.gallery-area {
    padding: 60px 0 100px;
    position: relative;
    z-index: 1;
}
.about-area {
    padding: clamp(72px, 9vw, 104px) 0 clamp(84px, 10vw, 120px);
    position: relative;
    z-index: 1;
}
.wiki-area {
    padding: clamp(72px, 9vw, 108px) 0 clamp(84px, 10vw, 122px);
    position: relative;
    z-index: 1;
}
.wiki-area .container-fluid,
.wiki-area .container { max-width: 1240px; }
.books-area {
    padding: clamp(56px, 7vw, 90px) 0 clamp(80px, 9vw, 110px);
    position: relative;
    z-index: 1;
}

/* section heading (books) */
.books-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.4vw, 22px);
    margin: 0 auto clamp(34px, 4.4vw, 52px);
    max-width: 720px;
}
.books-heading::before,
.books-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    border-radius: 1px;
}
.books-heading::before {
    background: linear-gradient(90deg,
        transparent 0%, rgba(13, 43, 82, .14) 55%, rgba(198, 40, 40, .38) 100%);
}
.books-heading::after {
    background: linear-gradient(90deg,
        rgba(198, 40, 40, .38) 0%, rgba(13, 43, 82, .14) 45%, transparent 100%);
}
.books-heading h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.25rem, 3.9vw, 2.75rem);
    letter-spacing: -.01em;
    color: var(--navy);
    margin: 0;
    padding: 0 6px;
    text-shadow: 0 2px 0 rgba(249, 168, 37, .16);
}
.books-heading h2 .accent {
    font-style: normal;
    color: var(--red);
}

/* --------------------------------------------------------------
   11. GALLERY GRID & CARDS
   -------------------------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    justify-content: center;
    gap: clamp(10px, 2vw, 22px);
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(10px, 2vw, 22px);
    list-style: none;
    perspective: 1600px;
}
.gallery-grid > li {
    margin: 0;
    padding: 0;
    display: flex;
}
@media (min-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (min-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
.gallery-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: var(--paper);
    transform-style: preserve-3d;
    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease;
    box-shadow:
        0 10px 28px rgba(9, 29, 58, .14),
        0 3px 10px rgba(9, 29, 58, .08),
        0 0 0 1px rgba(9, 29, 58, .05);
    animation: cardRise .7s cubic-bezier(.2,.7,.2,1) both;
}
.gallery-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--red-bright) 0%, var(--gold) 35%, var(--blue-bright) 70%, var(--navy) 100%);
    background-size: 250% 100%;
    animation: barFlow 6s linear infinite;
    z-index: 4;
}
.gallery-card:hover,
.gallery-card:focus-within {
    transform:
        perspective(1200px)
        rotateY(-6deg) rotateX(4deg)
        translateY(-10px) translateZ(28px) scale(1.03);
    box-shadow:
        0 26px 55px rgba(9, 29, 58, .30),
        0 10px 24px rgba(198, 40, 40, .18),
        0 0 0 2px rgba(249, 168, 37, .55);
}
.gallery-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 425 / 650;
    overflow: hidden;
    cursor: zoom-in;
    background: #eef2f7;
    text-decoration: none;
    outline: none;
    transform-style: preserve-3d;
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
    filter: brightness(1) saturate(1.05);
}
.gallery-card:hover .gallery-thumb img,
.gallery-thumb:focus-visible img {
    transform: scale(1.12) rotate(-1.2deg);
    filter: brightness(1.06) saturate(1.15);
}
.gallery-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(9, 29, 58, .35) 100%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
    z-index: 2;
}
.gallery-card:hover .gallery-thumb::before,
.gallery-thumb:focus-visible::before { opacity: 1; }
.gallery-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 42%,
        rgba(255, 255, 255, .55) 49%,
        rgba(255, 235, 170, .35) 51%,
        transparent 60%);
    background-size: 260% 100%;
    background-position: -160% 0;
    z-index: 3;
    pointer-events: none;
    transition: background-position 1.1s ease;
}
.gallery-card:hover .gallery-thumb::after,
.gallery-thumb:focus-visible::after { background-position: 260% 0; }
.gallery-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: clamp(28px, 6vw, 36px);
    height: clamp(28px, 6vw, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red-bright), var(--red));
    color: #fff;
    font-size: clamp(.85rem, 2vw, 1.05rem);
    z-index: 5;
    opacity: 0;
    transform: translateZ(60px) scale(.4) rotate(-30deg);
    transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1);
    box-shadow:
        0 6px 16px rgba(198, 40, 40, .5),
        0 0 0 2px rgba(255, 255, 255, .95);
}
.gallery-card:hover .gallery-zoom,
.gallery-thumb:focus-visible .gallery-zoom {
    opacity: 1;
    transform: translateZ(60px) scale(1) rotate(0deg);
}
.details-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: clamp(9px, 1.6vw, 13px) 6px;
    font-family: var(--font-body);
    font-size: clamp(.6rem, 1.6vw, .76rem);
    font-weight: 800;
    letter-spacing: clamp(1.1px, .35vw, 2px);
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(115deg,
        var(--navy) 0%, var(--blue) 35%, var(--blue-bright) 55%, var(--red) 100%);
    background-size: 240% 240%;
    background-position: 0% 50%;
    border-top: 1px solid rgba(255, 255, 255, .28);
    overflow: hidden;
    transition:
        background-position .6s ease,
        letter-spacing .3s ease,
        transform .3s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 5;
}
.details-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, .5) 48%,
        rgba(255, 235, 170, .8) 51%,
        rgba(255, 255, 255, .3) 54%,
        transparent 68%);
    background-size: 260% 100%;
    background-position: -150% 0;
    transition: background-position .9s ease;
    pointer-events: none;
}
.details-btn:hover::before,
.details-btn:focus-visible::before { background-position: 250% 0; }
.details-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -3px 0 rgba(0, 0, 0, .22);
    pointer-events: none;
}
.details-btn:hover,
.details-btn:focus-visible {
    background-position: 100% 50%;
    letter-spacing: clamp(1.6px, .5vw, 3px);
    color: #fff;
    outline: none;
    transform: translateY(-2px);
}
.details-btn i {
    font-size: clamp(.82rem, 1.8vw, .98rem);
    line-height: 1;
    color: var(--gold);
    transition: transform .38s cubic-bezier(.2,.7,.2,1);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.details-btn:hover i,
.details-btn:focus-visible i { transform: translateX(5px) scale(1.15); }

/* lightgallery overrides */
.lg-backdrop { background: rgba(9, 29, 58, .94) !important; }
.lg-sub-html {
    background: linear-gradient(180deg, rgba(9, 29, 58, .92), rgba(0, 0, 0, .92)) !important;
    padding: 18px 22px !important;
}
.lg-sub-html .lg-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 38px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(115deg, var(--navy), var(--blue), var(--blue-bright), var(--red), var(--navy));
    background-size: 300% 300%;
    background-position: 0% 50%;
    border: 1px solid rgba(249, 168, 37, .7);
    box-shadow:
        0 12px 34px rgba(198, 40, 40, .5),
        0 0 0 5px rgba(249, 168, 37, .14),
        inset 0 1px 0 rgba(255, 255, 255, .35);
    transition:
        background-position .7s ease,
        letter-spacing .35s ease,
        transform .3s ease,
        box-shadow .3s ease;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.lg-sub-html .lg-details-btn:hover {
    background-position: 100% 50%;
    letter-spacing: 3.4px;
    transform: translateY(-3px) scale(1.05);
    color: #fff;
    box-shadow:
        0 18px 48px rgba(198, 40, 40, .75),
        0 0 0 9px rgba(249, 168, 37, .18),
        inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------
   12. STORY CARDS (ABOUT & WIKIPEDIA)
   -------------------------------------------------------------- */
.story-card {
    position: relative;
    max-width: 1100px;
    margin: 0 auto clamp(34px, 4.4vw, 52px);
    border-radius: 22px;
    padding:
        clamp(58px, 7vw, 92px)
        clamp(26px, 5.5vw, 92px)
        clamp(48px, 6vw, 76px);
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 0% 0%,     rgba(249, 168, 37, .11), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(21, 101, 192, .09), transparent 42%),
        radial-gradient(circle at 100% 0%,   rgba(229, 57, 53, .06),  transparent 36%),
        radial-gradient(rgba(13, 43, 82, .055) 1px, transparent 1.6px);
    background-size: auto, auto, auto, 26px 26px;
    overflow: hidden;
    animation: cardRise .85s cubic-bezier(.2,.7,.2,1) both;
    transition: box-shadow .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
    box-shadow:
        0 24px 60px rgba(9, 29, 58, .14),
        0 8px 22px rgba(9, 29, 58, .07),
        0 0 0 1px rgba(13, 43, 82, .06),
        inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.story-card:last-child { margin-bottom: 0; }
.story-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 34px 80px rgba(9, 29, 58, .20),
        0 12px 28px rgba(198, 40, 40, .10),
        0 0 0 1px rgba(249, 168, 37, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.story-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--red-bright) 0%,
        var(--gold) 28%,
        var(--blue-bright) 55%,
        var(--navy) 80%,
        var(--red-bright) 100%);
    background-size: 250% 100%;
    animation: barFlow 7s linear infinite;
    z-index: 5;
}
.story-emblem {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 6;
    color: #fff;
    font-size: 1.5rem;
    background: linear-gradient(140deg, #ffd54f 0%, var(--gold) 40%, var(--gold-deep) 100%);
    border: 4px solid #fff;
    box-shadow:
        0 10px 26px rgba(184, 134, 11, .42),
        0 0 0 1px rgba(249, 168, 37, .55),
        inset 0 2px 0 rgba(255, 255, 255, .6);
    animation: emblemFloat 5s ease-in-out infinite;
}
.story-emblem i {
    filter: drop-shadow(0 2px 3px rgba(120, 80, 0, .45));
}
.story-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(249, 168, 37, .55);
    pointer-events: none;
    z-index: 2;
}
.story-corner.tl { top: 22px;    left: 22px;  border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.story-corner.tr { top: 22px;    right: 22px; border-left: 0;  border-bottom: 0; border-radius: 0 10px 0 0; }
.story-corner.bl { bottom: 22px; left: 22px;  border-right: 0; border-top: 0;    border-radius: 0 0 0 10px; }
.story-corner.br { bottom: 22px; right: 22px; border-left: 0;  border-top: 0;    border-radius: 0 0 10px 0; }
@media (max-width: 991.98px) {
    .story-corner { display: none; }
}
.story-content {
    position: relative;
    z-index: 3;
    max-width: 76ch;
    margin: 0 auto;
}
.story-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.4vw, 24px);
    margin: clamp(46px, 6vw, 72px) 0 clamp(26px, 3.4vw, 40px);
    position: relative;
}
.story-heading:first-child { margin-top: 0; }
.story-heading h3 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--navy);
    margin: 0;
    padding: 0 6px 12px;
    position: relative;
    text-align: center;
    text-shadow: 0 2px 0 rgba(249, 168, 37, .16);
}
.story-heading h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 76%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(229, 57, 53, .55) 20%,
        var(--gold) 50%,
        rgba(229, 57, 53, .55) 80%,
        transparent 100%);
    box-shadow: 0 2px 8px rgba(249, 168, 37, .35);
}
.heading-flourish {
    flex: 0 1 100px;
    height: 1px;
    position: relative;
    background: linear-gradient(90deg,
        transparent, rgba(13, 43, 82, .22) 60%, rgba(198, 40, 40, .55));
}
.heading-flourish:last-child {
    background: linear-gradient(90deg,
        rgba(198, 40, 40, .55), rgba(13, 43, 82, .22) 40%, transparent);
}
.heading-flourish::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    transform: translateY(-50%);
    box-shadow: 0 2px 6px rgba(249, 168, 37, .55);
}
.heading-flourish:first-child::after { right: -2px; }
.heading-flourish:last-child::after  { left: -2px;  }
@media (max-width: 575.98px) {
    .heading-flourish { display: none; }
}
.story-content p {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 2.05;
    color: var(--ink-soft);
    margin: 0 0 1.4em;
    text-align: left;
    letter-spacing: .002em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.story-content p:last-child { margin-bottom: 0; }
.story-content p.lede {
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    color: var(--ink);
}
.story-content p.lede::first-letter {
    float: left;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(3.1rem, 6.4vw, 4.7rem);
    line-height: .76;
    margin: .08em .16em 0 0;
    padding: 0;
    color: var(--red);
    background-image: linear-gradient(140deg,
        var(--red-bright) 0%,
        var(--red) 30%,
        var(--gold-deep) 62%,
        var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 7px rgba(198, 40, 40, .26));
}

/* inline emphasis */
.hl-gold, .hl-red, .hl-blue, .key-line {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.hl-gold {
    font-weight: 700;
    color: var(--navy);
    padding: 0 .1em;
    border-radius: 3px;
}
.hl-red {
    font-weight: 700;
    color: #8e1b1b;
    padding: 0 .1em;
    border-radius: 3px;
}
.hl-blue {
    font-weight: 700;
    color: var(--navy);
    padding: 0 .1em;
    border-radius: 3px;
}
.em-accent {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.06em;
    color: var(--red);
    letter-spacing: .005em;
}
.key-line {
    font-weight: 700;
    color: var(--navy);
    padding: .08em .3em;
    border-radius: 7px;
    background-image: linear-gradient(100deg,
        rgba(249, 168, 37, .26) 0%,
        rgba(229, 57, 53, .16) 52%,
        rgba(21, 101, 192, .16) 100%);
    box-shadow:
        inset 0 -2px 0 rgba(198, 40, 40, .38),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* story divider & end */
.story-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.2vw, 20px);
    margin: clamp(30px, 4.4vw, 50px) 0;
}
.story-divider::before,
.story-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    border-radius: 1px;
}
.story-divider::before {
    background: linear-gradient(90deg,
        transparent 0%, rgba(13, 43, 82, .14) 55%, rgba(198, 40, 40, .38) 100%);
}
.story-divider::after {
    background: linear-gradient(90deg,
        rgba(198, 40, 40, .38) 0%, rgba(13, 43, 82, .14) 45%, transparent 100%);
}
.divider-chip {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--red);
    font-size: 1.05rem;
    background: linear-gradient(150deg, #ffffff 0%, #fff6e5 100%);
    box-shadow:
        0 8px 20px rgba(249, 168, 37, .30),
        0 0 0 1px rgba(249, 168, 37, .45),
        inset 0 1px 0 #ffffff;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.story-card:hover .divider-chip {
    transform: rotate(180deg) scale(1.08);
    box-shadow:
        0 12px 28px rgba(249, 168, 37, .48),
        0 0 0 1px rgba(249, 168, 37, .7),
        inset 0 1px 0 #ffffff;
}
.story-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(34px, 4.6vw, 54px);
}
.story-end span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .55;
    box-shadow: 0 2px 6px rgba(249, 168, 37, .5);
}
.story-end span:nth-child(2) {
    width: 11px;
    height: 11px;
    opacity: .9;
    background: linear-gradient(135deg, var(--red-bright), var(--red));
    box-shadow: 0 3px 10px rgba(198, 40, 40, .45);
}

/* goals card */
.goals-card {
    padding-left: clamp(22px, 4.5vw, 60px);
    padding-right: clamp(22px, 4.5vw, 60px);
}
.goals-portrait {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 20px 50px rgba(9, 29, 58, .20),
        0 6px 16px rgba(198, 40, 40, .10),
        0 0 0 1px rgba(13, 43, 82, .06);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.goals-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(9, 29, 58, .35) 100%);
    pointer-events: none;
}
.goals-portrait img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.goals-portrait:hover {
    transform: translateY(-6px);
    box-shadow:
        0 30px 70px rgba(9, 29, 58, .28),
        0 10px 24px rgba(198, 40, 40, .16),
        0 0 0 2px rgba(249, 168, 37, .45);
}
.goals-portrait:hover img { transform: scale(1.05); }
.goals-content { padding: clamp(6px, 1.6vw, 18px) 0; }
.goals-content .story-heading {
    margin-top: 0;
    justify-content: flex-start;
}
.goals-content .story-heading h3 { text-align: left; }
.goals-content .story-heading h3::after {
    left: 0; transform: none; width: 64%;
}
@media (max-width: 991.98px) {
    .goals-content .story-heading { justify-content: center; }
    .goals-content .story-heading h3 { text-align: center; }
    .goals-content .story-heading h3::after {
        left: 50%; transform: translateX(-50%);
    }
}
.who-we-are-list {
    list-style: none;
    margin: clamp(26px, 3vw, 36px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(12px, 1.6vw, 18px);
}
.who-we-are-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: clamp(.92rem, 1.15vw, 1.02rem);
    font-weight: 700;
    color: var(--navy);
    letter-spacing: .01em;
    border-radius: 14px;
    background: linear-gradient(140deg, #ffffff 0%, #fff8ec 100%);
    box-shadow:
        0 8px 20px rgba(9, 29, 58, .08),
        0 0 0 1px rgba(13, 43, 82, .06),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.who-we-are-list li:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 34px rgba(9, 29, 58, .16),
        0 0 0 1px rgba(249, 168, 37, .5),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}
.who-we-are-list li span {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(140deg, var(--red-bright) 0%, var(--red) 60%, var(--gold-deep) 100%);
    box-shadow:
        0 6px 14px rgba(198, 40, 40, .38),
        inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* --------------------------------------------------------------
   13. BOOK CARDS
   -------------------------------------------------------------- */
.book-col { display: flex; margin-bottom: 30px; }
.single-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: var(--paper);
    transform-style: preserve-3d;
    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease;
    box-shadow:
        0 12px 30px rgba(9, 29, 58, .12),
        0 3px 10px rgba(9, 29, 58, .06),
        0 0 0 1px rgba(9, 29, 58, .05);
    animation: cardRise .7s cubic-bezier(.2,.7,.2,1) both;
}
.single-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--red-bright) 0%, var(--gold) 35%, var(--blue-bright) 70%, var(--navy) 100%);
    background-size: 250% 100%;
    animation: barFlow 6s linear infinite;
    z-index: 4;
}
.single-box:hover,
.single-box:focus-within {
    transform:
        perspective(1200px)
        rotateY(-4deg) rotateX(3deg)
        translateY(-10px) translateZ(24px) scale(1.02);
    box-shadow:
        0 28px 60px rgba(9, 29, 58, .28),
        0 10px 24px rgba(198, 40, 40, .16),
        0 0 0 2px rgba(249, 168, 37, .50);
}
.box-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #fff8ec 0%, #f2e4cf 100%);
    border-bottom: 1px solid rgba(13, 43, 82, .08);
}
.box-image a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    outline: none;
}
.box-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(14px, 2vw, 22px);
    display: block;
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
    filter: brightness(1) saturate(1.02) drop-shadow(0 14px 26px rgba(9, 29, 58, .22));
}
.single-box:hover .box-image img,
.box-image a:focus-visible img {
    transform: scale(1.07) rotate(-1deg);
    filter: brightness(1.05) saturate(1.10) drop-shadow(0 20px 34px rgba(9, 29, 58, .30));
}
.box-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(9, 29, 58, .30) 100%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
    z-index: 2;
}
.single-box:hover .box-image::before,
.box-image a:focus-visible::before { opacity: 1; }
.box-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 42%,
        rgba(255, 255, 255, .55) 49%,
        rgba(255, 235, 170, .40) 51%,
        transparent 60%);
    background-size: 260% 100%;
    background-position: -160% 0;
    z-index: 3;
    pointer-events: none;
    transition: background-position 1.1s ease;
}
.single-box:hover .box-image::after,
.box-image a:focus-visible::after { background-position: 260% 0; }
.box-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 22px);
}
.box-content .price {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: clamp(.62rem, 1vw, .72rem);
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--navy);
    background: linear-gradient(120deg,
        rgba(249, 168, 37, .22) 0%,
        rgba(255, 224, 130, .35) 100%);
    border: 1px solid rgba(249, 168, 37, .55);
    box-shadow:
        0 4px 12px rgba(249, 168, 37, .18),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}
.box-content .price::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red-bright);
    box-shadow: 0 0 0 2px rgba(229, 57, 53, .25);
}
.box-content h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(.98rem, 1.4vw, 1.08rem);
    line-height: 1.5;
    letter-spacing: -.005em;
    color: var(--ink);
    margin: 14px 0 16px;
    flex: 1 1 auto;
}
.box-content h3 a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}
.box-content h3 a:hover,
.box-content h3 a:focus-visible {
    color: var(--red);
    outline: none;
}
.box-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}
.btn-book {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(10px, 1.3vw, 13px) clamp(10px, 1.6vw, 16px);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: clamp(.7rem, 1.05vw, .8rem);
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        letter-spacing .3s ease,
        box-shadow .35s ease,
        background-position .65s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.btn-book i {
    font-size: 1.05em;
    line-height: 1;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-book:hover i,
.btn-book:focus-visible i { transform: scale(1.15); }
.btn-book::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, .45) 48%,
        rgba(255, 235, 170, .70) 51%,
        rgba(255, 255, 255, .30) 54%,
        transparent 68%);
    background-size: 260% 100%;
    background-position: -150% 0;
    transition: background-position .9s ease;
    pointer-events: none;
}
.btn-book:hover::before,
.btn-book:focus-visible::before { background-position: 250% 0; }
.btn-book-buy {
    background: linear-gradient(115deg,
        var(--red) 0%, var(--red-bright) 40%, var(--gold-deep) 78%, var(--gold) 100%);
    background-size: 240% 240%;
    background-position: 0% 50%;
    box-shadow:
        0 10px 22px rgba(198, 40, 40, .32),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-book-buy:hover,
.btn-book-buy:focus-visible {
    background-position: 100% 50%;
    letter-spacing: 2.2px;
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(198, 40, 40, .48),
        0 0 0 2px rgba(249, 168, 37, .55),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    color: #fff;
    outline: none;
}
.btn-book-details {
    background: linear-gradient(115deg,
        var(--navy) 0%, var(--blue) 55%, var(--blue-bright) 100%);
    background-size: 240% 240%;
    background-position: 0% 50%;
    box-shadow:
        0 10px 22px rgba(13, 43, 82, .32),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-book-details:hover,
.btn-book-details:focus-visible {
    background-position: 100% 50%;
    letter-spacing: 2.2px;
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(21, 101, 192, .48),
        0 0 0 2px rgba(33, 150, 243, .55),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    color: #fff;
    outline: none;
}

/* pagination */
.pagination-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(30px, 4vw, 44px);
    border-top: 1px solid rgba(13, 43, 82, .10);
    position: relative;
}
.pagination-area::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
    box-shadow: 0 0 12px rgba(249, 168, 37, .55);
}
.pagination-area a.page-numbers,
.pagination-area span.page-numbers {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-decoration: none;
    color: var(--navy);
    background: var(--paper);
    border: 1px solid rgba(13, 43, 82, .10);
    box-shadow:
        0 6px 16px rgba(9, 29, 58, .07),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transition:
        transform .3s cubic-bezier(.2,.7,.2,1),
        color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}
.pagination-area a.page-numbers:hover,
.pagination-area a.page-numbers:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    transform: translateY(-3px);
    box-shadow:
        0 12px 26px rgba(13, 43, 82, .32),
        0 0 0 2px rgba(249, 168, 37, .35);
    outline: none;
}
.pagination-area span.page-numbers.current {
    color: #fff;
    background: linear-gradient(135deg,
        var(--red-bright) 0%, var(--red) 45%, var(--gold-deep) 100%);
    border-color: transparent;
    box-shadow:
        0 10px 24px rgba(198, 40, 40, .40),
        0 0 0 2px rgba(249, 168, 37, .55),
        inset 0 1px 0 rgba(255, 255, 255, .40);
    cursor: default;
}
.pagination-area .prev,
.pagination-area .next { font-size: 1.2rem; padding: 0 12px; }
.pagination-area .prev i,
.pagination-area .next i {
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.pagination-area .prev:hover i { transform: translateX(-3px); }
.pagination-area .next:hover i { transform: translateX(3px);  }

/* --------------------------------------------------------------
   14. GALLERY DETAIL PAGE (the 51 photo pages)
   -------------------------------------------------------------- */
.gallery-detail-area {
    position: relative;
    padding: clamp(6px, 0.875vw, 11.5px) 2.75px clamp(8px, 1vw, 13.75px);
    background:
        radial-gradient(ellipse 900px 700px at 0% 0%,     #fff2e0 0%, transparent 55%),
        radial-gradient(ellipse 900px 700px at 100% 0%,   #e8f2ff 0%, transparent 55%),
        radial-gradient(ellipse 900px 700px at 0% 100%,   #ffeeee 0%, transparent 55%),
        radial-gradient(ellipse 900px 700px at 100% 100%, #f0f7ff 0%, transparent 55%),
        linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 40%, #fff5f0 70%, #f0f7ff 100%);
    background-attachment: fixed;
    overflow: hidden;
}
.gallery-detail-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(13, 43, 82, .07) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(198, 40, 40, .05) 1px, transparent 1.5px);
    background-size: 21px 21px, 30px 30px;
    background-position: 0 0, 20px 20px;
    pointer-events: none;
    z-index: 0;
}
.gallery-detail-area > .col {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    flex: 0 0 auto;
    width: 100%;
}
.gallery-detail-area .text-center::before {
    content: "Gallery Photograph";
    display: inline-block;
    margin-bottom: clamp(1px, 0.0625vw, 1.5px);
    padding: 8px 22px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: clamp(.7rem, 1.1vw, .82rem);
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-deep);
    background: linear-gradient(120deg, rgba(249, 168, 37, .18), rgba(255, 224, 130, .34));
    border: 1px solid rgba(249, 168, 37, .55);
    box-shadow:
        0 6px 18px rgba(249, 168, 37, .20),
        inset 0 1px 0 #ffffff;
}
.gallery-detail-area h1 {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-style: italic;
    font-size: clamp(1.35rem, 3vw, 2.35rem) !important;
    line-height: 1.3 !important;
    letter-spacing: -.015em;
    color: var(--navy) !important;
    text-align: center;
    text-shadow: 0 2px 0 rgba(249, 168, 37, .16);
    background: #ffffff;
    border: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    padding: clamp(26px, 3.4vw, 46px) clamp(22px, 4vw, 56px) !important;
    margin: 0 auto !important;
    max-width: 1000px;
    position: relative;
    box-shadow:
        0 18px 44px rgba(9, 29, 58, .12),
        0 4px 12px rgba(9, 29, 58, .06),
        0 0 0 1px rgba(13, 43, 82, .06);
}
.gallery-detail-area h1::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg,
        var(--red-bright) 0%, var(--gold) 35%, var(--blue-bright) 70%, var(--navy) 100%);
    background-size: 250% 100%;
    animation: barFlow 6s linear infinite;
}
.gallery-detail-area hr {
    border: 0 !important;
    height: 3px !important;
    opacity: 1 !important;
    max-width: 240px;
    margin: clamp(22px, 3vw, 34px) auto !important;
    border-radius: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--red-bright) 22%,
        var(--gold) 50%,
        var(--red-bright) 78%,
        transparent 100%);
    box-shadow: 0 2px 12px rgba(249, 168, 37, .45);
    position: relative;
}
.gallery-detail-area hr::after {
    content: "★";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--gold);
    background: var(--cream);
    padding: 0 12px;
    font-size: .95rem;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(249, 168, 37, .7);
}
.gallery-detail-area img {
    display: block;
    width: 100%;
    max-width: min(100%, 1400px);
    height: auto;
    margin: 0 auto;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 30px 70px rgba(9, 29, 58, .22),
        0 12px 30px rgba(198, 40, 40, .10),
        0 0 0 1px rgba(13, 43, 82, .06),
        0 0 0 10px #ffffff,
        0 0 0 11px rgba(249, 168, 37, .35);
    transition:
        transform .6s cubic-bezier(.2, .7, .2, 1),
        box-shadow .6s ease;
}
.gallery-detail-area img:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 42px 90px rgba(9, 29, 58, .30),
        0 16px 40px rgba(198, 40, 40, .18),
        0 0 0 1px rgba(13, 43, 82, .08),
        0 0 0 10px #ffffff,
        0 0 0 12px rgba(249, 168, 37, .55);
}
.gallery-back-wrap {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(6px, 0.75vw, 10px) 5.5px 0;
}
.gallery-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: clamp(.78rem, 1.1vw, .9rem);
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(115deg, var(--navy) 0%, var(--blue) 55%, var(--blue-bright) 100%);
    background-size: 240% 240%;
    background-position: 0% 50%;
    box-shadow:
        0 12px 28px rgba(13, 43, 82, .32),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    transition:
        background-position .6s ease,
        letter-spacing .3s ease,
        transform .3s cubic-bezier(.2, .7, .2, 1),
        box-shadow .3s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.gallery-back-btn i {
    font-size: 1.1em;
    line-height: 1;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.gallery-back-btn:hover,
.gallery-back-btn:focus-visible {
    background-position: 100% 50%;
    letter-spacing: 2.8px;
    transform: translateY(-3px);
    box-shadow:
        0 18px 40px rgba(21, 101, 192, .48),
        0 0 0 2px rgba(249, 168, 37, .55),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    color: #fff;
    outline: none;
}
.gallery-back-btn:hover i { transform: translateX(-4px); }

/* --------------------------------------------------------------
   15. COPYRIGHT AREA
   -------------------------------------------------------------- */
.copyright-area {
    position: relative;
    padding: 22px 0;
    background:
        radial-gradient(ellipse 900px 200px at 50% 0%, rgba(249, 168, 37, .10) 0%, transparent 70%),
        linear-gradient(180deg, #0a1e3f 0%, #06152b 100%);
    border-top: 1px solid rgba(249, 168, 37, .22);
    overflow: hidden;
}
.copyright-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    max-width: 420px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(249, 168, 37, .55) 30%,
        #ffd54f 50%,
        rgba(249, 168, 37, .55) 70%,
        transparent 100%);
    box-shadow: 0 0 18px rgba(249, 168, 37, .55);
}
.copyright-area-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.copyright-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(.82rem, 1.15vw, .95rem);
    font-weight: 600;
    letter-spacing: .4px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.copyright-text .copyright-brand {
    color: #ffd54f;
    font-weight: 800;
    text-decoration: none;
    transition: color .3s ease, text-shadow .3s ease;
}
.copyright-text .copyright-brand:hover,
.copyright-text .copyright-brand:focus-visible {
    color: #fff2c8;
    text-shadow: 0 0 14px rgba(255, 213, 79, .65);
    outline: none;
}

/* --------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .flag-photo,
    .liberty-photo { background-position: center 26%; }
}
@media (max-width: 767.98px) {
    .hero-flag,
    .hero-liberty {
        min-height: clamp(600px, 92vw, 780px);
        padding-top: clamp(50px, 8vw, 80px);
    }
    .flag-photo,
    .liberty-photo { background-position: center 22%; }
    .flag-card,
    .liberty-card { max-width: 92%; }
}
@media (max-width: 575.98px) {
    .hero-tagline { letter-spacing: 1.8px; padding: 9px 16px; }
    .hero-btn { letter-spacing: 1.9px; padding: 12px 20px; }
    .hero-btn-featured { letter-spacing: 2.8px; }
    .hero-flag,
    .hero-liberty { min-height: clamp(560px, 108vw, 720px); }
    .flag-photo,
    .liberty-photo { background-position: center 18%; }
    .flag-card,
    .liberty-card { border-radius: 16px; padding: 22px 18px; }
    .liberty-emblem { width: 46px; height: 46px; font-size: 1.15rem; margin-bottom: 12px; }
    .story-card { border-radius: 18px; padding-left: 22px; padding-right: 22px; }
    .story-emblem { width: 54px; height: 54px; top: -27px; font-size: 1.25rem; }
    .story-content p.lede::first-letter { margin-right: .12em; }
    .key-line { padding: .06em .18em; }
    .who-we-are-list { grid-template-columns: 1fr 1fr; }
    .box-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
    .btn-book { letter-spacing: 1.3px; }
    .pagination-area a.page-numbers,
    .pagination-area span.page-numbers { min-width: 40px; height: 40px; font-size: .85rem; }
    .gallery-detail-area h1 { border-radius: 16px 16px 0 0 !important; }
    .gallery-detail-area img {
        border-radius: 16px;
        box-shadow:
            0 20px 44px rgba(9, 29, 58, .20),
            0 8px 20px rgba(198, 40, 40, .10),
            0 0 0 1px rgba(13, 43, 82, .06),
            0 0 0 6px #ffffff,
            0 0 0 7px rgba(249, 168, 37, .35);
    }
    .copyright-area { padding: 18px 12px; }
    .copyright-text { font-size: .82rem; letter-spacing: .3px; }
}

/* --------------------------------------------------------------
   17. REDUCED MOTION
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}