/*
Theme Name: Ottoman Archive
Theme URI: https://example.com/ottoman-archive
Author: Ottoman Archive
Description: Premium digital historical archive theme with museum-inspired editorial design.
Version: 2.6.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ottoman-archive
*/

/* =========================================================
   01. VARIABLES & BASE
   ========================================================= */

:root {
    --oa-black: #0b0c0b;
    --oa-black2: #12110e;
    --oa-cream: #eee4d1;
    --oa-paper: #eee4d1;
    --oa-paper2: #e4d6bd;
    --oa-gold: #b89452;
    --oa-gold2: #d9b86d;
    --oa-burgundy: #5a2028;
    --oa-ink: #211c15;
    --oa-muted: #827661;

    --oa-border: rgba(184, 148, 82, .32);

    --oa-max: 1320px;

    --oa-serif: "Cormorant Garamond", Georgia, serif;
    --oa-sans: "Inter", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--oa-paper);
    color: var(--oa-ink);
    font-family: var(--oa-sans);
    line-height: 1.6;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .08;
    background-image: radial-gradient(
        rgba(60, 45, 25, .35) .5px,
        transparent .5px
    );
    background-size: 5px 5px;
    mix-blend-mode: multiply;
}

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

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

.container {
    width: min(calc(100% - 64px), var(--oa-max));
    margin: 0 auto;
}

.oa-section {
    padding: 62px 0;
}

.archive-empty {
    padding: 40px;
    border: 1px solid var(--oa-border);
    text-align: center;
    font-family: var(--oa-serif);
}


/* =========================================================
   02. HEADER
   ========================================================= */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;

    background: rgba(8, 9, 8, .92);
    border-bottom: 1px solid rgba(184, 148, 82, .5);

    transition: .3s;
}

.site-header.is-scrolled {
    position: fixed;
    background: rgba(8, 9, 8, .97);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
}

.header-inner {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;
    min-width: 235px;
}

.brand-logo {
    width: 210px;
    height: auto;
    max-height: 62px;
    object-fit: contain;
    object-position: left center;
}

.main-nav {
    margin-left: auto;
}

.main-nav ul {
    display: flex;
    gap: 27px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a {
    position: relative;
    color: #eee5d5;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.main-nav a:hover,
.main-nav .current-menu-item a {
    color: var(--oa-gold2);
}

.main-nav .current-menu-item a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -29px;
    height: 2px;
    background: var(--oa-gold);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 17px;
    color: var(--oa-gold);
}

.header-search {
    font-size: 24px;
    line-height: 1;
}

.header-emblem {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;

    border: 1px solid var(--oa-gold);
    border-radius: 50%;

    font-size: 13px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--oa-gold);
    font-size: 25px;
}

.mobile-menu {
    display: none;
}


/* =========================================================
   03. HERO
   ========================================================= */

.hero-home {
    position: relative;
    min-height: 560px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 7, 7, .97) 0%,
            rgba(5, 7, 7, .83) 30%,
            rgba(5, 7, 7, .2) 66%,
            rgba(5, 7, 7, .35) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5, 7, 7, .72),
            transparent 35%
        ),
        url("assets/images/hero.jpg");

    background-position: center;
    background-size: cover;
}

.hero-vignette {
    position: absolute;
    inset: 0;

    box-shadow: inset 0 -80px 90px rgba(0, 0, 0, .45);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding-top: 72px;
}

.hero-eyebrow {
    display: block;
    margin-bottom: 16px;

    color: #e4c67e;
    font-size: 11px;
    letter-spacing: .2em;
}

.hero h1 {
    margin: 0 0 24px;

    color: #f0d9a7;
    font-family: var(--oa-serif);
    font-size: clamp(56px, 6vw, 94px);
    font-weight: 600;
    line-height: .83;
    letter-spacing: .01em;

    text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}

.hero p {
    max-width: 530px;
    margin: 0 0 26px;

    color: #f0e8d9;
    font-family: var(--oa-serif);
    font-size: 19px;
    line-height: 1.45;
}

.oa-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 13px 20px;

    border: 1px solid var(--oa-gold);
    background: rgba(14, 14, 12, .55);

    color: #efd18b;
    font-family: var(--oa-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;

    transition: .25s;
}

.oa-button:hover {
    background: var(--oa-gold);
    color: #15130e;
}

.oa-button span {
    font-size: 17px;
}

.dark-button {
    background: #b89452;
    border-color: #b89452;
    color: #19140d;
}

.dark-button:hover {
    background: #19140d;
    color: #efd18b;
}


/* =========================================================
   04. QUICK NAVIGATION
   ========================================================= */

.quick-nav {
    background: #0d0d0b;
    border-bottom: 1px solid rgba(184, 148, 82, .35);
    color: #efe5d3;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.quick-grid a {
    min-height: 92px;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;

    padding: 17px 15px;

    border-right: 1px solid rgba(184, 148, 82, .16);

    transition: .25s;
}

.quick-grid a:first-child {
    border-left: 1px solid rgba(184, 148, 82, .16);
}

.quick-grid a:hover {
    background: #171612;
}

.quick-icon {
    grid-row: 1 / 3;

    display: grid;
    place-items: center;

    color: var(--oa-gold2);
    font-size: 26px;
}

.quick-grid b {
    font-family: var(--oa-serif);
    font-size: 14px;
    letter-spacing: .05em;
}

.quick-grid small {
    color: #bcb09d;
    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   05. SECTION HEADINGS
   ========================================================= */

.ornate-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-bottom: 22px;

    color: #17140f;
    font-family: var(--oa-serif);
    font-size: 20px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ornate-heading::before,
.ornate-heading::after {
    content: "";
    width: 160px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--oa-gold)
    );
}

.ornate-heading::after {
    background: linear-gradient(
        90deg,
        var(--oa-gold),
        transparent
    );
}

.eyebrow-dark {
    color: #9d7737;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.featured-section,
.minutes-section,
.archive-section {
    background: var(--oa-paper);
}


/* =========================================================
   06. FEATURED STORY
   ========================================================= */

.featured-layout {
    display: grid;
    grid-template-columns: 1.35fr .95fr .62fr;
    gap: 22px;
    align-items: stretch;
}

.featured-image {
    position: relative;
    min-height: 330px;
    overflow: hidden;

    background: #c9b796;

    box-shadow: 0 10px 30px rgba(38, 27, 13, .16);
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder {
    min-height: 330px;
    height: 100%;

    background: url("assets/images/hero.jpg") center / cover;
}

.image-badge {
    position: absolute;
    top: 14px;
    left: 14px;

    padding: 5px 10px;

    background: #15140f;
    color: #e9ca84;

    font-size: 11px;
    letter-spacing: .08em;
}

.featured-copy {
    padding: 8px 5px;
}

.featured-copy h2 {
    margin: 6px 0;

    font-family: var(--oa-serif);
    font-size: 44px;
    font-weight: 600;
    line-height: .95;
}

.featured-copy h3 {
    margin: 0 0 13px;

    font-family: var(--oa-serif);
    font-size: 20px;
    font-weight: 500;
}

.featured-copy p {
    margin: 0 0 17px;

    color: #3e362b;
    font-size: 13px;
    line-height: 1.7;
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;

    margin-bottom: 18px;

    color: #806b4c;
    font-size: 10px;
}

.meta-row b {
    margin-right: 3px;
    font-size: 9px;
    letter-spacing: .08em;
}

.featured-side {
    overflow: hidden;

    background: #15140f;
    color: #f0e5d2;
}

.side-story {
    min-height: 78px;

    display: grid;
    grid-template-columns: 55px 1fr 14px;
    gap: 10px;
    align-items: center;

    padding: 10px;

    border-bottom: 1px solid rgba(184, 148, 82, .2);
}

.side-story img {
    width: 55px;
    height: 55px;
    object-fit: cover;
}

.side-story b {
    display: block;

    font-family: var(--oa-serif);
    font-size: 14px;
    line-height: 1.05;
}

.side-story small {
    display: block;
    margin-top: 4px;

    color: var(--oa-gold);
    font-size: 9px;
}

.side-story i {
    color: var(--oa-gold2);
    font-size: 22px;
}


/* =========================================================
   07. 5 MINUTES IN HISTORY
   ========================================================= */

.minutes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.minute-card {
    position: relative;
    min-height: 180px;

    display: flex;
    align-items: flex-end;

    padding: 15px;

    overflow: hidden;

    background: #201d17 center / cover no-repeat;
    border: 1px solid rgba(184, 148, 82, .25);
    box-shadow: 0 8px 18px rgba(30, 22, 12, .13);

    color: #f2e8d6;
}

.minute-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        0deg,
        rgba(7, 9, 8, .97),
        rgba(7, 9, 8, .08) 75%
    );
}

.minute-card > * {
    position: relative;
    z-index: 1;
}

.minute-time {
    position: absolute;
    top: 10px;
    left: 10px;

    padding: 4px 7px;

    background: #14130f;
    color: #e6c77f;

    font-size: 9px;
    letter-spacing: .08em;
}

.minute-card h3 {
    margin: 0 0 5px;

    font-family: var(--oa-serif);
    font-size: 20px;
    line-height: 1;
}

.minute-card p {
    margin: 0;

    color: #d0c2ac;
    font-size: 10px;
}


/* =========================================================
   08. FEATURE PANELS
   ========================================================= */

.dark-panels-section {
    padding-top: 34px;
    background: var(--oa-paper2);
}

.feature-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.feature-panel {
    min-height: 240px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 18px;

    background: #161512;
    border: 1px solid rgba(184, 148, 82, .28);

    color: #eee2ce;
    text-align: center;
}

.panel-title {
    color: #e4c47b;
    font-family: var(--oa-serif);
    font-size: 17px;
    letter-spacing: .07em;
}

.feature-panel p {
    margin: 8px 0 12px;

    color: #c7b9a2;
    font-size: 11px;
}

.panel-button {
    margin-top: auto;

    padding: 8px 14px;

    border: 1px solid var(--oa-gold);

    color: #e6c67e;
    font-family: var(--oa-serif);
    font-size: 11px;
    text-transform: uppercase;
}


/* =========================================================
   09. MINI TIMELINE
   ========================================================= */

.timeline-mini {
    position: relative;

    width: 90%;
    height: 85px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 3px;
}

.mini-line {
    position: absolute;
    top: 33px;
    left: 8%;
    right: 8%;

    height: 2px;

    background: var(--oa-gold);
    opacity: .6;
}

.timeline-mini span {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.timeline-mini i {
    width: 14px;
    height: 14px;

    border: 3px solid #312a1c;
    border-radius: 50%;

    background: #cba968;

    box-shadow: 0 0 0 1px #d4b56f;
}

.timeline-mini b {
    font-family: var(--oa-serif);
    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   10. MAP PREVIEW / FACT PANEL
   ========================================================= */

.map-preview {
    width: 100%;
    height: 90px;

    margin: 12px 0 3px;

    overflow: hidden;

    border: 1px solid rgba(184, 148, 82, .3);
}

.map-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: saturate(.65) sepia(.18);
}

.quote-mark {
    margin-top: 17px;

    color: var(--oa-gold);
    font-family: Georgia, serif;
    font-size: 55px;
    line-height: .65;
}

.fact-panel blockquote {
    max-width: 290px;

    margin: 4px auto 12px;

    color: #ecd9b4;
    font-family: var(--oa-serif);
    font-size: 20px;
    line-height: 1.25;
}


/* =========================================================
   11. ARCHIVE CARDS
   ========================================================= */

.archive-tabs {
    display: flex;
    justify-content: center;
    gap: 28px;

    margin: -5px 0 17px;

    font-family: var(--oa-serif);
    font-size: 11px;
}

.archive-tabs span {
    cursor: pointer;
}

.archive-tabs .active {
    padding-bottom: 4px;

    border-bottom: 1px solid #9c7331;

    color: #9c7331;
}

.archive-carousel {
    position: relative;
}

.archive-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.archive-tile {
    min-width: 0;

    overflow: hidden;

    background: #1b1915;
    border: 1px solid rgba(184, 148, 82, .2);

    color: #efe4d2;

    transition: .25s;
}

.archive-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(20, 14, 7, .22);
}

.archive-tile-image {
    aspect-ratio: 1.15;

    overflow: hidden;

    background: #3a3227;
}

.archive-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-tile-body {
    padding: 10px;
}

.archive-tile-body > span {
    color: #d1a858;
    font-size: 8px;
    letter-spacing: .1em;
}

.archive-tile-body h3 {
    margin: 4px 0;

    font-family: var(--oa-serif);
    font-size: 17px;
    line-height: 1.02;
}

.archive-tile-body small {
    color: #b7aa94;
    font-size: 9px;
}

.archive-arrow {
    display: none;
}


/* =========================================================
   12. FULL MAP
   ========================================================= */

.map-section {
    background: #0d0e0c;
    color: #eee4d2;
}

.map-section .ornate-heading {
    color: #eee4d2;
}

.map-wrap {
    display: grid;
    grid-template-columns: 250px 1fr;

    background: #121411;
    border: 1px solid var(--oa-border);
}

.map-sidebar {
    max-height: 460px;

    padding: 14px;

    overflow: auto;

    border-right: 1px solid var(--oa-border);
}

.map-sidebar h3 {
    margin: 0 0 10px;

    color: #e4c67e;
    font-family: var(--oa-serif);
    font-size: 21px;
}

.map-battle {
    display: block;

    padding: 9px;

    border-bottom: 1px solid rgba(184, 148, 82, .16);
}

.map-battle:hover,
.map-battle.active {
    background: rgba(90, 32, 40, .35);
}

.map-battle strong {
    display: block;

    font-family: var(--oa-serif);
    font-size: 14px;
}

.map-battle span {
    color: var(--oa-gold);
    font-size: 9px;
}

.oa-map {
    height: 460px;
}

.muted-note {
    color: #a89e8b;
    font-size: 11px;
}


/* =========================================================
   13. STATISTICS
   ========================================================= */

.stats-bar {
    background: #0a0b0a;
    border-top: 1px solid rgba(184, 148, 82, .4);
    color: #eee2cd;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.stats-grid > div {
    padding: 20px 10px;

    border-right: 1px solid rgba(184, 148, 82, .15);

    text-align: center;
}

.stats-grid > div:first-child {
    border-left: 1px solid rgba(184, 148, 82, .15);
}

.stats-grid b {
    display: block;

    color: #e1bd70;
    font-family: var(--oa-serif);
    font-size: 30px;
    font-weight: 500;
}

.stats-grid span {
    display: block;

    color: #b3a58f;
    font-size: 8px;
    letter-spacing: .1em;
}


/* =========================================================
   14. FOOTER
   ========================================================= */

.site-footer {
    padding: 50px 0 20px;

    background: #0b0c0b;
    border-top: 1px solid rgba(184, 148, 82, .3);

    color: #c9bba4;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 45px;
}

.footer-logo {
    width: 260px;
    max-width: 100%;
    margin-bottom: 12px;
}

.footer-brand p {
    max-width: 360px;

    color: #9f9482;
    font-size: 12px;
}

.footer-title {
    margin: 0 0 10px;

    color: #e1bf74;
    font-family: var(--oa-serif);
    font-size: 18px;
}

.footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-list li {
    margin: 5px 0;
}

.footer-list a {
    font-size: 11px;
}

.footer-list a:hover {
    color: #e1bf74;
}

.footer-note {
    max-width: 220px;

    color: #9f9482;
    font-size: 11px;
}

.footer-bottom {
    margin-top: 35px;
    padding-top: 15px;

    border-top: 1px solid rgba(184, 148, 82, .16);

    color: #827867;
    font-size: 10px;
}


/* =========================================================
   15. GENERIC ARCHIVES / SINGLES
   ========================================================= */

.single-hero,
.archive-page {
    background: var(--oa-paper);
}

.single-hero {
    padding: 150px 0 70px;

    background:
        linear-gradient(
            0deg,
            rgba(8, 9, 8, .8),
            rgba(8, 9, 8, .35)
        ),
        url("assets/images/page-header.jpg") center / cover;

    color: #eee;
}

.single-hero .single-title {
    color: #e4c67e;
    font-family: var(--oa-serif);
    font-size: 68px;
}

.single-title {
    margin: 10px 0 20px;

    font-family: var(--oa-serif);
    font-size: 58px;
    line-height: 1;
}

.archive-header {
    padding-top: 120px;
    padding-bottom: 35px;
}

.archive-eyebrow,
.meta {
    color: #9c7331;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.content,
.source-lead {
    max-width: 720px;
    color: #665b4a;
}

.archive-grid,
.source-grid,
.video-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.archive-card,
.oa-source-card,
.video-archive-card {
    overflow: hidden;

    background: #171612;
    border: 1px solid var(--oa-border);

    color: #eee4d2;
}

.archive-card-image,
.video-archive-thumb {
    aspect-ratio: 1.55;
    overflow: hidden;
}

.archive-card-image img,
.video-archive-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-card-body,
.video-archive-body,
.oa-source-card {
    padding: 18px;
}

.archive-card h2,
.video-archive-body h2,
.oa-source-card h3 {
    font-family: var(--oa-serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.02;
}

.oa-source-card p {
    color: #b7aa94;
    font-size: 12px;
}

.oa-source-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.video-archive-card {
    position: relative;
}

.video-play-button {
    position: absolute;
    top: 18px;
    left: 18px;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid var(--oa-gold);
    border-radius: 50%;

    background: rgba(10, 10, 8, .7);
    color: #efd18b;
}


/* =========================================================
   16. DOSSIER / MEDIA SAFETY
   ========================================================= */

.dossier-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 34px;
    align-items: start;
}

.dossier-main,
.dossier-sidebar,
.content {
    min-width: 0;
}

.content {
    max-width: none;
    color: #4a4032;
}

.content img,
.content video,
.content iframe,
.content embed,
.content object {
    max-width: 100%;
    height: auto;
}

.content iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.video-dossier,
.video-player-shell {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.video-player-shell {
    overflow: hidden;
}

.video-player-frame {
    position: relative;

    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #090908;
    border: 1px solid var(--oa-border);
    box-shadow: 0 16px 45px rgba(20, 14, 7, .18);
}

.video-player-frame video,
.video-player-frame iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;

    border: 0;

    background: #090908;
    object-fit: contain;
}

.video-player-frame iframe {
    position: absolute;
    inset: 0;
}

.video-player-fallback {
    min-height: 220px;

    display: grid;
    place-items: center;

    padding: 30px;

    background: #15140f;
    border: 1px solid var(--oa-border);

    color: #d9cbb6;
    text-align: center;
}

.video-dossier-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;

    margin-bottom: 26px;
    padding: 15px 0;

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

    color: var(--oa-muted);
    font-size: 12px;
}

.video-dossier-meta strong {
    margin-right: 5px;

    color: #5d4b30;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.single-hero .container {
    min-width: 0;
}

.single-hero .single-title {
    overflow-wrap: anywhere;
}


/* =========================================================
   17. PREMIUM TIMELINE ARCHIVE
   ========================================================= */

.timeline-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(184, 148, 82, .08),
            transparent 34%
        ),
        var(--oa-paper);
}

.timeline-header {
    max-width: 760px;

    margin: 0 auto;
    padding-top: 125px;
    padding-bottom: 70px;

    text-align: center;
}

.timeline-header .archive-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
}

.timeline-header .single-title {
    margin-bottom: 18px;

    color: var(--oa-ink);
    font-size: clamp(54px, 7vw, 82px);
}

.timeline-header .content {
    max-width: 620px;
    margin: 0 auto;

    color: #665b4a;
    font-family: var(--oa-serif);
    font-size: 18px;
    line-height: 1.55;
}

.timeline-archive {
    position: relative;

    max-width: 1120px;

    margin: 0 auto;
    padding: 30px 0 80px;
}

.timeline-axis {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(184, 148, 82, .7) 5%,
        rgba(184, 148, 82, .7) 95%,
        transparent 100%
    );
}

.timeline-axis::before,
.timeline-axis::after {
    content: "";

    position: absolute;
    left: 50%;

    width: 7px;
    height: 7px;

    transform: translateX(-50%) rotate(45deg);

    background: var(--oa-gold);
}

.timeline-axis::before {
    top: 0;
}

.timeline-axis::after {
    bottom: 0;
}

.timeline-archive-item {
    position: relative;

    min-height: 250px;

    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    align-items: center;
}

.timeline-archive-year {
    grid-column: 1;

    padding-right: 42px;

    text-align: right;
}

.timeline-archive-year span {
    display: inline-block;

    color: var(--oa-gold);
    font-family: var(--oa-serif);
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.02em;

    text-shadow: 0 2px 12px rgba(80, 55, 20, .08);
}

.timeline-archive-marker {
    position: relative;
    z-index: 3;

    grid-column: 2;

    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-archive-dot {
    width: 18px;
    height: 18px;
    display: block;

    border: 2px solid var(--oa-gold);
    border-radius: 50%;

    background: var(--oa-paper);

    box-shadow:
        0 0 0 5px var(--oa-paper),
        0 0 0 6px rgba(184, 148, 82, .25);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.timeline-archive-content {
    grid-column: 3;
    padding-left: 42px;
}

.timeline-card {
    position: relative;

    padding: 25px 26px 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .42),
            rgba(228, 214, 189, .22)
        ),
        #eee4d1;

    border: 1px solid rgba(184, 148, 82, .35);

    box-shadow:
        0 12px 35px rgba(48, 34, 16, .08),
        inset 0 1px 0 rgba(255, 255, 255, .45);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.timeline-card::before {
    content: "";

    position: absolute;
    top: 28px;
    left: -7px;

    width: 12px;
    height: 12px;

    transform: rotate(45deg);

    background: #eee4d1;

    border-left: 1px solid rgba(184, 148, 82, .35);
    border-bottom: 1px solid rgba(184, 148, 82, .35);
}

.timeline-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 10px;
}

.timeline-card-top .archive-eyebrow {
    font-size: 9px;
}

.timeline-card-number {
    color: rgba(130, 118, 97, .65);
    font-family: var(--oa-serif);
    font-size: 13px;
    letter-spacing: .1em;
}

.timeline-card h2 {
    margin: 0 0 10px;

    color: var(--oa-ink);
    font-family: var(--oa-serif);
    font-size: clamp(25px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1;
}

.timeline-card h2 a {
    transition: color .2s ease;
}

.timeline-card h2 a:hover {
    color: #9c7331;
}

.timeline-card p {
    max-width: 500px;

    margin: 0;

    color: #665b4a;
    font-size: 13px;
    line-height: 1.7;
}

.timeline-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 19px;
    padding-top: 13px;

    border-top: 1px solid rgba(184, 148, 82, .22);
}

.timeline-card-date {
    color: #9c7331;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.timeline-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #5f4927;
    font-family: var(--oa-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
}

.timeline-read-more span {
    color: var(--oa-gold);
    font-size: 17px;

    transition: transform .2s ease;
}

.timeline-read-more:hover span {
    transform: translateX(4px);
}


/* Timeline hover */

.timeline-archive-item:hover .timeline-card {
    transform: translateY(-4px);

    border-color: rgba(184, 148, 82, .65);

    box-shadow:
        0 18px 45px rgba(48, 34, 16, .13),
        inset 0 1px 0 rgba(255, 255, 255, .5);
}

.timeline-archive-item:hover .timeline-archive-dot {
    transform: scale(1.12);

    background: var(--oa-gold);

    box-shadow:
        0 0 0 5px var(--oa-paper),
        0 0 0 7px rgba(184, 148, 82, .28),
        0 0 22px rgba(184, 148, 82, .35);
}


/* Timeline alternate side */

.timeline-left .timeline-archive-year {
    grid-column: 3;
    grid-row: 1;

    padding-right: 0;
    padding-left: 42px;

    text-align: left;
}

.timeline-left .timeline-archive-marker {
    grid-column: 2;
    grid-row: 1;
}

.timeline-left .timeline-archive-content {
    grid-column: 1;
    grid-row: 1;

    padding-right: 42px;
    padding-left: 0;
}

.timeline-left .timeline-card::before {
    left: auto;
    right: -7px;

    border-top: 1px solid rgba(184, 148, 82, .35);
    border-right: 1px solid rgba(184, 148, 82, .35);
    border-bottom: 0;
    border-left: 0;
}


/* Timeline empty */

.timeline-empty {
    max-width: 650px;

    margin: 20px auto 80px;
    padding: 55px 30px;

    background: rgba(255, 255, 255, .22);
}

.timeline-empty h2 {
    margin: 10px 0;

    font-family: var(--oa-serif);
    font-size: 32px;
}

.timeline-empty p {
    margin: 0;
    color: var(--oa-muted);
}


/* Timeline pagination */

.timeline-page .navigation.pagination {
    margin: 0 auto 50px;
}

.timeline-page .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.timeline-page .page-numbers {
    min-width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(184, 148, 82, .35);

    color: #6b5839;
    font-size: 11px;

    transition: .2s ease;
}

.timeline-page .page-numbers:hover,
.timeline-page .page-numbers.current {
    background: var(--oa-gold);
    border-color: var(--oa-gold);
    color: #17130d;
}


/* =========================================================
   18. TIMELINE EVENT DOSSIER
   ========================================================= */

.oa-single-oa_event {
    background: var(--oa-paper);
}

.event-hero {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(8, 9, 8, .98) 0%,
            rgba(8, 9, 8, .94) 42%,
            rgba(8, 9, 8, .72) 72%,
            rgba(8, 9, 8, .85) 100%
        ),
        url("assets/images/page-header.jpg") center / cover;

    color: #eee4d2;
}

.event-hero-bg {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 76% 48%,
            rgba(184, 148, 82, .16),
            transparent 34%
        );
}

.event-hero-inner {
    position: relative;
    z-index: 2;

    padding-top: 125px;
    padding-bottom: 70px;
}

.event-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 55px;

    color: #8e8371;
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.event-breadcrumb a {
    color: var(--oa-gold2);
}

.event-hero-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 65px;
    align-items: end;
}

.event-year-block {
    position: relative;

    padding-left: 25px;

    border-left: 1px solid rgba(184, 148, 82, .5);
}

.event-year-label {
    display: block;

    margin-bottom: 4px;

    color: var(--oa-gold2);
    font-size: 10px;
    letter-spacing: .25em;
}

.event-year {
    color: #e1bf74;
    font-family: var(--oa-serif);
    font-size: clamp(76px, 9vw, 125px);
    font-weight: 500;
    line-height: .78;
    letter-spacing: -.03em;
}

.event-year-line {
    width: 105px;
    height: 1px;

    margin: 28px 0 12px;

    background: rgba(184, 148, 82, .35);
}

.event-year-line span {
    display: block;

    width: 35px;
    height: 2px;

    background: var(--oa-gold);
}

.event-year-caption {
    color: #847866;
    font-size: 8px;
    letter-spacing: .17em;
}

.event-title-block {
    max-width: 800px;
}

.event-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #cba45d;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
}

.event-title {
    margin: 0;

    color: #f0d9a7;
    font-family: var(--oa-serif);
    font-size: clamp(55px, 7vw, 94px);
    font-weight: 500;
    line-height: .84;
    letter-spacing: -.015em;
}

.event-lead {
    max-width: 650px;

    margin: 27px 0 0;

    color: #c9bda9;
    font-family: var(--oa-serif);
    font-size: 19px;
    line-height: 1.45;
}

.event-body {
    padding: 70px 0 80px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08),
            transparent 35%
        ),
        var(--oa-paper);
}

.event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 80px;
    align-items: start;
}

.event-main {
    min-width: 0;
    max-width: 780px;
}

.event-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-bottom: 38px;
    padding-bottom: 18px;

    border-bottom: 1px solid var(--oa-border);
}

.event-section-number {
    color: var(--oa-gold);
    font-family: var(--oa-serif);
    font-size: 18px;
}

.event-section-overline {
    display: block;

    margin-bottom: 4px;

    color: #9c7331;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
}

.event-section-heading h2 {
    margin: 0;

    font-family: var(--oa-serif);
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
}

.event-content {
    color: #3d352b;
    font-family: var(--oa-serif);
    font-size: 19px;
    line-height: 1.7;
}

.event-content p {
    margin: 0 0 24px;
}

.event-content p:first-child:first-letter {
    float: left;

    padding: 7px 12px 0 0;

    color: #8e6428;
    font-family: var(--oa-serif);
    font-size: 66px;
    line-height: .75;
}


/* Event sidebar */

.event-sidebar {
    position: sticky;
    top: 100px;

    display: flex;
    flex-direction: column;
    gap: 18px;
}

.event-fact-card,
.event-source-card {
    background: #171612;
    border: 1px solid rgba(184, 148, 82, .3);
    box-shadow: 0 15px 35px rgba(30, 22, 12, .12);
}

.event-fact-card {
    padding: 22px;
}

.event-card-label {
    display: block;

    margin-bottom: 18px;

    color: var(--oa-gold2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}

.event-fact {
    padding: 15px 0;
    border-top: 1px solid rgba(184, 148, 82, .17);
}

.event-fact span {
    display: block;

    margin-bottom: 4px;

    color: #817664;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.event-fact strong {
    display: block;

    color: #eee1cb;
    font-family: var(--oa-serif);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
}

.event-card-footer {
    margin-top: 8px;
    padding-top: 14px;

    border-top: 1px solid rgba(184, 148, 82, .17);

    color: #766c5c;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.event-source-card {
    padding: 20px;

    background: #e4d6bd;
    color: #3d352b;
}

.event-source-card .event-card-label {
    color: #8c652b;
}

.event-source-card p {
    margin: 0 0 15px;

    color: #6a5d4b;
    font-size: 12px;
    line-height: 1.6;
}


/* Event bottom navigation */

.event-next {
    padding: 0 0 65px;
    background: var(--oa-paper);
}

.event-back {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    color: #5c4b32;

    transition: .25s;
}

.event-back:hover {
    color: #9b7436;
}

.event-back-arrow {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid var(--oa-gold);

    color: var(--oa-gold);
    font-size: 22px;
}

.event-back small {
    display: block;

    margin-bottom: 2px;

    color: #927344;
    font-size: 8px;
    letter-spacing: .15em;
}

.event-back span:last-child {
    font-family: var(--oa-serif);
    font-size: 20px;
}


/* =========================================================
   19. RESPONSIVE — LARGE TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .main-nav ul {
        gap: 15px;
    }

    .brand {
        min-width: 200px;
    }

    .brand-logo {
        width: 185px;
    }

    .featured-layout {
        grid-template-columns: 1.2fr 1fr;
    }

    .featured-side {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .side-story {
        border-right: 1px solid rgba(184, 148, 82, .2);
    }

    .quick-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .archive-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .people-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =========================================================
   20. RESPONSIVE — TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .dossier-layout {
        grid-template-columns: 1fr;
    }

    .dossier-sidebar {
        order: 2;
    }

    .video-player-shell,
    .video-player-frame {
        width: 100%;
    }

    .event-hero {
        min-height: auto;
    }

    .event-hero-inner {
        padding-top: 110px;
        padding-bottom: 55px;
    }

    .event-breadcrumb {
        margin-bottom: 38px;
    }

    .event-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .event-year-block {
        padding-left: 18px;
    }

    .event-year {
        font-size: 82px;
    }

    .event-title {
        font-size: clamp(50px, 13vw, 75px);
    }

    .event-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .event-sidebar {
        position: static;
    }

    .event-main {
        max-width: none;
    }
}


/* =========================================================
   21. RESPONSIVE — MOBILE 760
   ========================================================= */

@media (max-width: 760px) {

    .container {
        width: min(calc(100% - 30px), var(--oa-max));
    }

    /* Header */

    .header-inner {
        height: 70px;
    }

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

    .brand-logo {
        width: 180px;
    }

    .header-actions {
        margin-left: auto;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .mobile-menu {
        position: fixed;
        inset: 0;

        display: block;

        background: rgba(0, 0, 0, .72);

        opacity: 0;
        visibility: hidden;

        transition: .25s;
    }

    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-panel {
        width: min(340px, 88vw);
        height: 100%;

        margin-left: auto;
        padding: 28px;

        transform: translateX(100%);

        background: #0d0d0b;
        border-left: 1px solid var(--oa-border);

        color: #eee;

        transition: .3s;
    }

    .mobile-menu.is-open .mobile-menu-panel {
        transform: translateX(0);
    }

    .mobile-menu-close {
        float: right;

        background: none;
        border: 0;

        color: var(--oa-gold);
        font-size: 30px;
    }

    .mobile-logo {
        width: 230px;
        clear: both;

        margin: 50px 0 30px;
    }

    .mobile-menu-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-menu-panel li {
        border-bottom: 1px solid rgba(184, 148, 82, .16);
    }

    .mobile-menu-panel a {
        display: block;
        padding: 13px 0;

        font-family: var(--oa-serif);
        font-size: 19px;
    }


    /* Hero */

    .hero-home {
        min-height: 620px;
        background-position: 58% center;
    }

    .hero-content {
        padding-top: 70px;
    }

    .hero h1 {
        font-size: 57px;
    }

    .hero p {
        font-size: 17px;
    }


    /* Quick nav */

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

    .quick-grid a:nth-child(odd) {
        border-left: 1px solid rgba(184, 148, 82, .16);
    }


    /* Featured */

    .featured-layout {
        grid-template-columns: 1fr;
    }

    .featured-image {
        min-height: 260px;
    }

    .featured-side {
        grid-column: auto;
        display: block;
    }

    .side-story {
        border-right: 0;
    }


    /* Cards */

    .minutes-grid,
    .feature-panels,
    .archive-grid,
    .source-grid,
    .video-archive-grid,
    .oa-source-list {
        grid-template-columns: 1fr 1fr;
    }

    .archive-cards {
        display: flex;

        overflow-x: auto;

        padding-bottom: 10px;

        scroll-snap-type: x mandatory;
    }

    .archive-tile {
        min-width: 210px;
        scroll-snap-align: start;
    }

    .archive-arrow {
        position: absolute;
        z-index: 2;
        top: 42%;

        width: 34px;
        height: 34px;

        display: block;

        border: 0;
        border-radius: 50%;

        background: #b89452;
        color: #19150e;

        font-size: 25px;
    }

    .archive-prev {
        left: -8px;
    }

    .archive-next {
        right: -8px;
    }


    /* Map */

    .map-wrap {
        grid-template-columns: 1fr;
    }

    .map-sidebar {
        max-height: 220px;

        border-right: 0;
        border-bottom: 1px solid var(--oa-border);
    }

    .oa-map {
        height: 360px;
    }


    /* Stats */

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

    .stats-grid > div:nth-child(5) {
        grid-column: 1 / -1;
    }


    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }


    /* Singles */

    .single-hero {
        padding: 115px 0 50px;
    }

    .single-hero .single-title,
    .single-title {
        font-size: 48px;
    }

    .video-dossier-meta {
        gap: 8px 16px;
    }

    .video-player-frame {
        aspect-ratio: 16 / 9;
    }

    .content {
        font-size: 16px;
    }

    .content iframe {
        min-height: 0;
    }


    /* Timeline */

    .timeline-header {
        padding-top: 105px;
        padding-bottom: 45px;
    }

    .timeline-header .single-title {
        font-size: 52px;
    }

    .timeline-header .content {
        font-size: 16px;
    }

    .timeline-archive {
        padding: 15px 0 50px;
    }

    .timeline-axis {
        left: 20px;
        transform: none;
    }

    .timeline-archive-item,
    .timeline-left .timeline-archive-item {
        min-height: auto;

        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;

        margin-bottom: 28px;
    }

    .timeline-archive-marker,
    .timeline-left .timeline-archive-marker {
        grid-column: 1;
        grid-row: 1 / 4;

        padding-top: 22px;
    }

    .timeline-archive-year,
    .timeline-left .timeline-archive-year {
        grid-column: 2;
        grid-row: 1;

        padding: 0 0 10px 18px;

        text-align: left;
    }

    .timeline-archive-year span {
        font-size: 42px;
    }

    .timeline-archive-content,
    .timeline-left .timeline-archive-content {
        grid-column: 2;
        grid-row: 2;

        padding: 0 0 0 18px;
    }

    .timeline-card {
        padding: 20px 18px 17px;
    }

    .timeline-card::before,
    .timeline-left .timeline-card::before {
        left: -7px;
        right: auto;

        border-top: 0;
        border-right: 0;
        border-left: 1px solid rgba(184, 148, 82, .35);
        border-bottom: 1px solid rgba(184, 148, 82, .35);
    }

    .timeline-card h2 {
        font-size: 27px;
    }

    .timeline-card p {
        font-size: 12px;
    }

    .timeline-card-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .timeline-read-more {
        font-size: 12px;
    }


    /* Event dossier */

    .event-hero-inner {
        padding-top: 100px;
        padding-bottom: 45px;
    }

    .event-year {
        font-size: 70px;
    }

    .event-title {
        font-size: 48px;
    }

    .event-lead {
        font-size: 17px;
    }

    .event-body {
        padding: 50px 0 60px;
    }

    .event-section-heading h2 {
        font-size: 30px;
    }

    .event-content {
        font-size: 18px;
    }
}


/* =========================================================
   22. RESPONSIVE — SMALL MOBILE 480
   ========================================================= */

@media (max-width: 480px) {

    .quick-grid a {
        min-height: 100px;
    }

    .minutes-grid,
    .feature-panels,
    .archive-grid,
    .source-grid,
    .video-archive-grid,
    .oa-source-list {
        grid-template-columns: 1fr;
    }

    .featured-copy h2 {
        font-size: 38px;
    }

    .hero h1 {
        font-size: 48px;
    }

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

    .stats-grid b {
        font-size: 25px;
    }


    /* Timeline */

    .timeline-header .single-title {
        font-size: 45px;
    }

    .timeline-archive-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .timeline-axis {
        left: 16px;
    }

    .timeline-archive-year {
        padding-left: 14px;
    }

    .timeline-archive-content {
        padding-left: 14px;
    }

    .timeline-archive-year span {
        font-size: 37px;
    }

    .timeline-card {
        padding: 18px 15px;
    }

    .timeline-card h2 {
        font-size: 25px;
    }
}

/* =========================================================
   OTTOMAN ARCHIVE — VIDEO ARCHIVE
   ========================================================= */

.video-archive-page {
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(184,148,82,.07),
            transparent 32%
        ),
        var(--oa-paper);
}

.video-archive-page .archive-header {
    max-width: 760px;
    padding-top: 125px;
    padding-bottom: 45px;
}

.video-archive-page .archive-header .single-title {
    margin: 10px 0 16px;
    color: var(--oa-ink);
}

.video-archive-page .archive-header .content {
    margin: 0;
    max-width: 620px;
    font-family: var(--oa-serif);
    font-size: 18px;
    line-height: 1.55;
}


/* Grid */

.video-archive-page .video-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* Card */

.video-archive-page .video-archive-card {
    position: relative;
    background: #171612;
    color: #eee4d2;
    border: 1px solid rgba(184,148,82,.28);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(30,22,12,.10);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.video-archive-page .video-archive-card:hover {
    transform: translateY(-5px);
    border-color: rgba(184,148,82,.65);
    box-shadow: 0 20px 42px rgba(30,22,12,.18);
}


/* Thumbnail */

.video-archive-page .video-archive-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #242019,
            #0d0d0b
        );
}

.video-archive-page .video-archive-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .5s ease,
        filter .5s ease;
}

.video-archive-page .video-archive-card:hover
.video-archive-thumb img {
    transform: scale(1.04);
    filter: brightness(.72) saturate(.8);
}


/* Image overlay */

.video-archive-page .video-archive-thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.55)
        );
    pointer-events: none;
}


/* Placeholder */

.video-placeholder {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background:
        radial-gradient(
            circle at center,
            rgba(184,148,82,.16),
            transparent 45%
        ),
        #12110e;
    color: var(--oa-gold2);
    font-family: var(--oa-serif);
    letter-spacing: .12em;
}

.video-placeholder span {
    font-size: 10px;
    opacity: .65;
}

.video-placeholder strong {
    font-size: 25px;
    font-weight: 500;
}


/* Play button */

.video-archive-page .video-play-button {
    position: absolute;
    z-index: 3;
    left: 18px;
    bottom: 18px;
    top: auto;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(225,189,112,.75);
    border-radius: 50%;

    background: rgba(10,10,8,.78);
    color: #efd18b;

    font-size: 14px;
    padding-left: 2px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.video-archive-page .video-archive-card:hover
.video-play-button {
    background: var(--oa-gold);
    color: #17130d;
    transform: scale(1.06);
}


/* Body */

.video-archive-page .video-archive-body {
    padding: 20px 20px 19px;
}

.video-archive-page .video-type {
    display: block;
    margin-bottom: 8px;
    color: var(--oa-gold2);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.video-archive-page .video-archive-body h2 {
    margin: 0;
    font-family: var(--oa-serif);
    font-size: 27px;
    line-height: 1.02;
    font-weight: 500;
    color: #f0e5d3;
}

.video-archive-page .video-archive-body h2 a {
    transition: color .2s ease;
}

.video-archive-page .video-archive-body h2 a:hover {
    color: var(--oa-gold2);
}


/* Duration */

.video-duration {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(184,148,82,.18);

    color: #9f927e;
    font-size: 10px;
    letter-spacing: .08em;
}

.video-duration span {
    color: var(--oa-gold);
    font-size: 13px;
}


/* Pagination */

.video-archive-page .archive-pagination {
    margin-top: 45px;
}

.video-archive-page .navigation.pagination {
    margin: 0;
}

.video-archive-page .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.video-archive-page .page-numbers {
    min-width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(184,148,82,.3);

    color: #6b5839;
    background: transparent;

    font-size: 11px;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.video-archive-page .page-numbers:hover,
.video-archive-page .page-numbers.current {
    background: var(--oa-gold);
    border-color: var(--oa-gold);
    color: #17130d;
}


/* Empty state */

.video-archive-empty {
    max-width: 650px;
    margin: 20px auto 70px;
    padding: 55px 30px;
    text-align: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(184,148,82,.25);
}

.video-archive-empty h2 {
    margin: 10px 0 5px;
    font-family: var(--oa-serif);
    font-size: 34px;
    font-weight: 500;
}

.video-archive-empty p {
    margin: 0;
    color: var(--oa-muted);
    font-size: 13px;
}


/* =========================================================
   VIDEO ARCHIVE — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .video-archive-page .video-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 760px) {

    .video-archive-page .archive-header {
        padding-top: 105px;
        padding-bottom: 35px;
    }

    .video-archive-page .archive-header .single-title {
        font-size: 48px;
    }

    .video-archive-page .archive-header .content {
        font-size: 16px;
    }

    .video-archive-page .video-archive-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .video-archive-page .video-archive-body {
        padding: 18px;
    }

    .video-archive-page .video-archive-body h2 {
        font-size: 25px;
    }

}

@media (max-width: 480px) {

    .video-archive-page .archive-header .single-title {
        font-size: 43px;
    }

    .video-archive-page .video-archive-thumb {
        aspect-ratio: 16 / 10;
    }

}

/* =========================================================
OTTOMAN ARCHIVE — VIDEO DOSSIER
========================================================= */

.video-single-page {
background: var(--oa-paper);
}

/* =========================================================
VIDEO HERO
========================================================= */

.video-hero {
position: relative;
min-height: 520px;
display: flex;
align-items: flex-end;
overflow: hidden;
background:
linear-gradient(
90deg,
rgba(8,9,8,.98) 0%,
rgba(8,9,8,.94) 38%,
rgba(8,9,8,.68) 72%,
rgba(8,9,8,.88) 100%
),
url("assets/images/page-header.jpg") center/cover;
color: #eee4d2;
}

.video-hero:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 78% 45%,
rgba(184,148,82,.16),
transparent 30%
);
}

.video-hero-inner {
position: relative;
z-index: 2;
padding-top: 125px;
padding-bottom: 70px;
}

.video-breadcrumb {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 55px;
color: #817666;
font-size: 10px;
letter-spacing: .13em;
text-transform: uppercase;
}

.video-breadcrumb a {
color: var(--oa-gold2);
}

.video-breadcrumb span:nth-child(2) {
color: #5d5549;
}

.video-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 190px;
gap: 70px;
align-items: end;
}

.video-title-block {
max-width: 850px;
}

.video-eyebrow {
display: block;
margin-bottom: 15px;
color: #cba45d;
font-size: 10px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
}

.video-title {
margin: 0;
color: #f0d9a7;
font-family: var(--oa-serif);
font-size: clamp(54px, 7vw, 94px);
line-height: .86;
font-weight: 500;
letter-spacing: -.02em;
}

.video-lead {
max-width: 650px;
margin: 27px 0 0;
color: #c9bda9;
font-family: var(--oa-serif);
font-size: 19px;
line-height: 1.5;
}

.video-year-block {
padding-left: 25px;
border-left: 1px solid rgba(184,148,82,.45);
}

.video-year-block > span {
display: block;
margin-bottom: 5px;
color: #887a67;
font-size: 9px;
letter-spacing: .2em;
}

.video-year-block strong {
display: block;
color: var(--oa-gold2);
font-family: var(--oa-serif);
font-size: 70px;
line-height: .8;
font-weight: 500;
}

.video-year-block i {
display: block;
width: 65px;
height: 1px;
margin-top: 22px;
background: var(--oa-gold);
}

/* =========================================================
VIDEO BODY
========================================================= */

.video-body {
padding: 70px 0 90px;
background:
linear-gradient(
90deg,
rgba(255,255,255,.08),
transparent 35%
),
var(--oa-paper);
}

.video-dossier-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 55px;
align-items: start;
}

.video-dossier-main {
min-width: 0;
}

/* =========================================================
PLAYER
========================================================= */

.video-player-shell {
width: 100%;
}

.video-player-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 15px;
}

.video-section-label {
display: block;
color: #9c7331;
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
}

.video-player-heading h2 {
margin: 4px 0 0;
color: var(--oa-ink);
font-family: var(--oa-serif);
font-size: 32px;
line-height: 1;
font-weight: 500;
}

.video-reel-mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid var(--oa-gold);
color: var(--oa-gold);
font-size: 13px;
}

.video-player-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #090908;
border: 1px solid rgba(184,148,82,.4);
box-shadow:
0 20px 50px rgba(20,14,7,.18),
0 0 0 6px rgba(184,148,82,.035);
}

.video-player-frame video,
.video-player-frame iframe {
display: block;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
border: 0;
background: #090908;
}

.video-player-frame iframe {
position: absolute;
inset: 0;
}

.video-player-frame video {
object-fit: contain;
}

/* Fallback */

.video-player-fallback {
width: 100%;
height: 100%;
min-height: 260px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
text-align: center;
color: #d8cbb7;
background:
radial-gradient(
circle,
rgba(184,148,82,.09),
transparent 45%
),
#11110f;
}

.video-player-fallback .fallback-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 17px;
border: 1px solid var(--oa-gold);
border-radius: 50%;
color: var(--oa-gold2);
font-size: 16px;
}

.video-player-fallback strong {
font-family: var(--oa-serif);
font-size: 23px;
font-weight: 500;
color: #eee2cf;
}

.video-player-fallback p {
max-width: 400px;
margin: 8px 0 17px;
color: #8f8474;
font-size: 11px;
}

.video-player-fallback a {
color: var(--oa-gold2);
font-family: var(--oa-serif);
font-size: 13px;
}

/* =========================================================
METADATA
========================================================= */

.video-metadata {
margin-top: 28px;
padding: 20px 0;
border-top: 1px solid var(--oa-border);
border-bottom: 1px solid var(--oa-border);
}

.video-meta-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}

.video-meta-heading > span:last-child {
color: #8c7d67;
font-size: 10px;
letter-spacing: .08em;
}

.video-meta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.video-meta-item {
min-width: 0;
padding: 4px 18px;
border-right: 1px solid rgba(184,148,82,.18);
}

.video-meta-item:first-child {
padding-left: 0;
}

.video-meta-item:last-child {
border-right: 0;
}

.video-meta-item span {
display: block;
margin-bottom: 4px;
color: #8b7b65;
font-size: 8px;
letter-spacing: .12em;
text-transform: uppercase;
}

.video-meta-item strong {
display: block;
color: #40372c;
font-family: var(--oa-serif);
font-size: 17px;
line-height: 1.2;
font-weight: 500;
overflow-wrap: anywhere;
}

/* =========================================================
CONTENT
========================================================= */

.video-content {
margin-top: 55px;
max-width: 780px;
}

.video-content-heading {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 28px;
padding-bottom: 15px;
border-bottom: 1px solid var(--oa-border);
}

.video-content-heading > span {
color: var(--oa-gold);
font-family: var(--oa-serif);
font-size: 17px;
}

.video-content-heading small {
display: block;
margin-bottom: 3px;
color: #9c7331;
font-size: 8px;
font-weight: 700;
letter-spacing: .14em;
}

.video-content-heading h2 {
margin: 0;
color: var(--oa-ink);
font-family: var(--oa-serif);
font-size: 34px;
line-height: 1;
font-weight: 500;
}

.video-content .content {
max-width: none;
color: #4a4032;
font-family: var(--oa-serif);
font-size: 19px;
line-height: 1.7;
}

.video-content .content p {
margin: 0 0 24px;
}

/* =========================================================
SIDEBAR
========================================================= */

.video-dossier-sidebar {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 18px;
}

.video-info-card {
padding: 25px;
background: #171612;
border: 1px solid rgba(184,148,82,.3);
box-shadow: 0 15px 35px rgba(30,22,12,.12);
}

.video-info-symbol {
margin: 22px 0 12px;
color: var(--oa-gold);
font-size: 25px;
}

.video-info-card p {
margin: 0;
color: #b9ad9b;
font-family: var(--oa-serif);
font-size: 17px;
line-height: 1.45;
}

.video-card-line {
width: 45px;
height: 1px;
margin: 22px 0 15px;
background: var(--oa-gold);
}

.video-card-note {
color: #766d5e;
font-size: 9px;
line-height: 1.6;
letter-spacing: .07em;
text-transform: uppercase;
}

/* Back */

.video-back-link {
display: flex;
align-items: center;
gap: 14px;
color: #5c4b32;
transition: .25s ease;
}

.video-back-link:hover {
color: #9b7436;
}

.video-back-arrow {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--oa-gold);
color: var(--oa-gold);
font-size: 19px;
}

.video-back-link small {
display: block;
margin-bottom: 2px;
color: #927344;
font-size: 8px;
letter-spacing: .15em;
}

.video-back-link > span:last-child {
font-family: var(--oa-serif);
font-size: 19px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

.video-dossier-layout {
    grid-template-columns: 1fr;
    gap: 40px;
}

.video-dossier-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}


}

@media (max-width: 760px) {

.video-hero {
    min-height: auto;
}

.video-hero-inner {
    padding-top: 105px;
    padding-bottom: 55px;
}

.video-breadcrumb {
    margin-bottom: 38px;
}

.video-hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
}

.video-title {
    font-size: clamp(48px, 12vw, 70px);
}

.video-lead {
    font-size: 17px;
}

.video-year-block {
    padding-left: 18px;
}

.video-year-block strong {
    font-size: 62px;
}

.video-body {
    padding: 50px 0 65px;
}

.video-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px 0;
}

.video-meta-item {
    padding: 4px 15px;
}

.video-meta-item:nth-child(odd) {
    padding-left: 0;
}

.video-meta-item:nth-child(even) {
    border-right: 0;
}

.video-dossier-sidebar {
    grid-template-columns: 1fr;
}


}

@media (max-width: 480px) {

.video-title {
    font-size: 44px;
}

.video-player-heading h2 {
    font-size: 27px;
}

.video-reel-mark {
    width: 36px;
    height: 36px;
}

.video-meta-grid {
    grid-template-columns: 1fr;
}

.video-meta-item,
.video-meta-item:nth-child(odd),
.video-meta-item:nth-child(even) {
    padding: 7px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(184,148,82,.12);
}

.video-meta-item:last-child {
    border-bottom: 0;
}

.video-content .content {
    font-size: 18px;
}

.video-content-heading h2 {
    font-size: 29px;
}


}

/* =========================================================
OTTOMAN ARCHIVE — BATTLE ARCHIVE
========================================================= */

.battle-archive-page {
background: var(--oa-paper);
}

/* =========================================================
HERO
========================================================= */

.battle-archive-hero {
position: relative;
min-height: 430px;
display: flex;
align-items: flex-end;
overflow: hidden;
background:
linear-gradient(
90deg,
rgba(8,9,8,.98) 0%,
rgba(8,9,8,.92) 42%,
rgba(8,9,8,.66) 75%,
rgba(8,9,8,.88) 100%
),
url("assets/images/page-header.jpg") center/cover;
color: #eee4d2;
}

.battle-archive-hero:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 78% 50%,
rgba(184,148,82,.16),
transparent 31%
);
}

.battle-archive-hero-inner {
position: relative;
z-index: 2;
padding-top: 125px;
padding-bottom: 65px;
}

.battle-archive-hero .archive-eyebrow {
display: block;
margin-bottom: 14px;
color: var(--oa-gold2);
}

.battle-archive-title {
margin: 0;
color: #f0d9a7;
font-family: var(--oa-serif);
font-size: clamp(58px, 8vw, 94px);
line-height: .85;
font-weight: 500;
letter-spacing: -.02em;
}

.battle-archive-lead {
max-width: 650px;
margin: 24px 0 0;
color: #c9bda9;
font-family: var(--oa-serif);
font-size: 19px;
line-height: 1.5;
}

.battle-archive-rule {
width: 100px;
height: 1px;
margin-top: 30px;
background: rgba(184,148,82,.35);
}

.battle-archive-rule span {
display: block;
width: 35px;
height: 2px;
background: var(--oa-gold);
}

/* =========================================================
BODY
========================================================= */

.battle-archive-body {
padding: 70px 0 90px;
background:
linear-gradient(
90deg,
rgba(255,255,255,.08),
transparent 35%
),
var(--oa-paper);
}

.battle-archive-intro {
display: grid;
grid-template-columns: 1fr 420px;
gap: 60px;
align-items: end;
margin-bottom: 35px;
padding-bottom: 20px;
border-bottom: 1px solid var(--oa-border);
}

.archive-section-label {
display: block;
margin-bottom: 5px;
color: #9c7331;
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
}

.battle-archive-intro h2 {
margin: 0;
color: var(--oa-ink);
font-family: var(--oa-serif);
font-size: 38px;
line-height: 1;
font-weight: 500;
}

.battle-archive-intro p {
margin: 0;
color: #766a58;
font-size: 12px;
line-height: 1.7;
}

/* =========================================================
GRID
========================================================= */

.battle-archive-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}

/* =========================================================
CARD
========================================================= */

.battle-card {
overflow: hidden;
background: #171612;
color: #eee4d2;
border: 1px solid rgba(184,148,82,.28);
box-shadow: 0 12px 30px rgba(30,22,12,.09);
transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}

.battle-card:hover {
transform: translateY(-5px);
border-color: rgba(184,148,82,.62);
box-shadow: 0 20px 45px rgba(30,22,12,.16);
}

/* =========================================================
IMAGE
========================================================= */

.battle-card-image {
position: relative;
display: block;
aspect-ratio: 1.55;
overflow: hidden;
background: #29251e;
}

.battle-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}

.battle-card:hover .battle-card-image img {
transform: scale(1.04);
}

.battle-card-image:after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
0deg,
rgba(7,8,7,.78),
transparent 48%
);
pointer-events: none;
}

/* Placeholder */

.battle-image-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle,
rgba(184,148,82,.12),
transparent 50%
),
#211f1a;
color: #806e50;
}

.battle-image-placeholder span {
font-size: 8px;
letter-spacing: .18em;
}

.battle-image-placeholder i {
margin-top: 12px;
color: var(--oa-gold);
font-size: 30px;
font-style: normal;
}

/* Image labels */

.battle-card-number {
position: absolute;
z-index: 2;
top: 13px;
left: 13px;
color: #e4c47b;
font-family: var(--oa-serif);
font-size: 14px;
}

.battle-card-date {
position: absolute;
z-index: 2;
right: 13px;
bottom: 12px;
color: #e4c47b;
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
}

/* =========================================================
CARD BODY
========================================================= */

.battle-card-body {
padding: 20px;
}

.battle-card-overline {
display: block;
margin-bottom: 7px;
color: #b89452;
font-size: 8px;
font-weight: 700;
letter-spacing: .15em;
}

.battle-card h2 {
margin: 0 0 13px;
font-family: var(--oa-serif);
font-size: 29px;
line-height: .98;
font-weight: 500;
}

.battle-card h2 a {
color: #eee1cc;
transition: color .2s ease;
}

.battle-card h2 a:hover {
color: var(--oa-gold2);
}

/* Location */

.battle-location {
display: flex;
align-items: center;
gap: 7px;
padding: 9px 0;
border-top: 1px solid rgba(184,148,82,.16);
border-bottom: 1px solid rgba(184,148,82,.16);
}

.battle-location span {
color: var(--oa-gold);
font-size: 13px;
}

.battle-location strong {
color: #bdb19e;
font-size: 10px;
font-weight: 500;
}

/* Outcome */

.battle-outcome {
min-height: 45px;
margin: 13px 0;
color: #9f9483;
font-size: 11px;
line-height: 1.6;
}

/* Commanders */

.battle-commanders {
margin-top: 12px;
}

.battle-commanders span {
display: block;
margin-bottom: 3px;
color: #766a58;
font-size: 8px;
letter-spacing: .13em;
}

.battle-commanders strong {
display: block;
color: #c7b9a5;
font-family: var(--oa-serif);
font-size: 15px;
font-weight: 500;
line-height: 1.25;
}

/* Footer */

.battle-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(184,148,82,.18);
}

.battle-card-footer > span {
color: #6f6658;
font-size: 8px;
letter-spacing: .1em;
}

.battle-card-footer a {
color: var(--oa-gold2);
font-family: var(--oa-serif);
font-size: 12px;
}

.battle-card-footer b {
margin-left: 5px;
font-size: 15px;
font-weight: 400;
transition: transform .2s ease;
}

.battle-card-footer a:hover b {
display: inline-block;
transform: translateX(4px);
}

/* =========================================================
EMPTY
========================================================= */

.battle-archive-empty {
max-width: 600px;
margin: 20px auto;
padding: 60px 30px;
text-align: center;
border: 1px solid var(--oa-border);
background: rgba(255,255,255,.16);
}

.battle-archive-empty > span {
color: var(--oa-gold);
font-size: 30px;
}

.battle-archive-empty h2 {
margin: 12px 0 7px;
color: var(--oa-ink);
font-family: var(--oa-serif);
font-size: 30px;
font-weight: 500;
}

.battle-archive-empty p {
margin: 0;
color: var(--oa-muted);
font-size: 12px;
}

/* =========================================================
PAGINATION
========================================================= */

.battle-pagination {
margin-top: 45px;
}

.battle-pagination .nav-links {
display: flex;
justify-content: center;
gap: 8px;
}

.battle-pagination .page-numbers {
min-width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(184,148,82,.35);
color: #6b5839;
font-size: 11px;
transition: .2s ease;
}

.battle-pagination .page-numbers:hover,
.battle-pagination .page-numbers.current {
background: var(--oa-gold);
border-color: var(--oa-gold);
color: #17130d;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

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

.battle-archive-intro {
    grid-template-columns: 1fr 320px;
    gap: 35px;
}


}

@media (max-width: 760px) {

.battle-archive-hero {
    min-height: auto;
}

.battle-archive-hero-inner {
    padding-top: 105px;
    padding-bottom: 55px;
}

.battle-archive-title {
    font-size: clamp(50px, 13vw, 72px);
}

.battle-archive-lead {
    font-size: 17px;
}

.battle-archive-body {
    padding: 50px 0 65px;
}

.battle-archive-intro {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.battle-archive-intro h2 {
    font-size: 33px;
}

.battle-archive-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}


}

@media (max-width: 540px) {

.battle-archive-title {
    font-size: 47px;
}

.battle-archive-grid {
    grid-template-columns: 1fr;
}

.battle-card-body {
    padding: 18px;
}

.battle-card h2 {
    font-size: 27px;
}


}

/* =========================================================
OTTOMAN ARCHIVE — BATTLE DOSSIER
========================================================= */

.oa-single-oa_battle {
background: var(--oa-paper);
}

/* ---------------------------------------------------------
HERO
--------------------------------------------------------- */

.battle-hero {
position: relative;
min-height: 520px;
display: flex;
align-items: flex-end;
overflow: hidden;

background:
    linear-gradient(
        90deg,
        rgba(8,9,8,.98) 0%,
        rgba(8,9,8,.94) 42%,
        rgba(8,9,8,.70) 72%,
        rgba(8,9,8,.86) 100%
    ),
    url("assets/images/page-header.jpg") center/cover;

color: #eee4d2;


}

.battle-hero-overlay {
position: absolute;
inset: 0;
pointer-events: none;

background:
    radial-gradient(
        circle at 76% 45%,
        rgba(184,148,82,.15),
        transparent 34%
    );


}

.battle-hero-inner {
position: relative;
z-index: 2;
padding-top: 125px;
padding-bottom: 70px;
}

/* Breadcrumb */

.battle-breadcrumb {
display: flex;
gap: 8px;
align-items: center;

margin-bottom: 55px;

color: #8e8371;
font-size: 10px;
letter-spacing: .13em;
text-transform: uppercase;


}

.battle-breadcrumb a {
color: var(--oa-gold2);
}

/* Hero grid */

.battle-hero-grid {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 65px;
align-items: end;
}

/* Hero label */

.battle-hero-label {
position: relative;
padding-left: 25px;

border-left: 1px solid rgba(184,148,82,.5);


}

.battle-hero-label > span {
display: block;

color: var(--oa-gold2);
font-family: var(--oa-serif);
font-size: 34px;
letter-spacing: .08em;


}

.battle-hero-label small {
display: block;

color: #847866;
font-size: 8px;
letter-spacing: .17em;


}

.battle-hero-line {
width: 105px;
height: 1px;

margin: 22px 0 12px;

background: rgba(184,148,82,.35);


}

.battle-hero-line:after {
content: "";
display: block;

width: 35px;
height: 2px;

background: var(--oa-gold);


}

/* Title */

.battle-title-block {
max-width: 850px;
}

.battle-eyebrow {
display: block;

margin-bottom: 14px;

color: #cba45d;
font-size: 10px;
font-weight: 600;
letter-spacing: .2em;


}

.battle-title {
margin: 0;

color: #f0d9a7;
font-family: var(--oa-serif);
font-size: clamp(55px, 7vw, 94px);
line-height: .84;
font-weight: 500;
letter-spacing: -.015em;


}

.battle-lead {
max-width: 700px;

margin: 27px 0 0;

color: #c9bda9;
font-family: var(--oa-serif);
font-size: 19px;
line-height: 1.45;


}

/* ---------------------------------------------------------
BODY
--------------------------------------------------------- */

.battle-body {
padding: 70px 0 80px;

background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.08),
        transparent 35%
    ),
    var(--oa-paper);


}

.battle-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 80px;
align-items: start;
}

.battle-main {
min-width: 0;
max-width: 800px;
}

/* ---------------------------------------------------------
SECTION HEADING
--------------------------------------------------------- */

.battle-section-heading {
display: flex;
align-items: flex-start;
gap: 18px;

margin-bottom: 38px;
padding-bottom: 18px;

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


}

.battle-section-number {
color: var(--oa-gold);
font-family: var(--oa-serif);
font-size: 18px;
}

.battle-section-overline {
display: block;

margin-bottom: 4px;

color: #9c7331;
font-size: 9px;
font-weight: 700;
letter-spacing: .15em;


}

.battle-section-heading h2 {
margin: 0;

font-family: var(--oa-serif);
font-size: 36px;
font-weight: 500;
line-height: 1;


}

/* ---------------------------------------------------------
CONTENT
--------------------------------------------------------- */

.battle-content {
max-width: 780px;

font-family: var(--oa-serif);
font-size: 19px;
line-height: 1.7;

color: #3d352b;


}

.battle-content p {
margin: 0 0 24px;
}

.battle-content p:first-child:first-letter {
float: left;

padding: 7px 12px 0 0;

color: #8e6428;
font-family: var(--oa-serif);
font-size: 66px;
line-height: .75;


}

.battle-content h2,
.battle-content h3 {
margin: 38px 0 15px;

color: var(--oa-ink);
font-family: var(--oa-serif);
line-height: 1.1;


}

/* ---------------------------------------------------------
SIDEBAR
--------------------------------------------------------- */

.battle-sidebar {
position: sticky;
top: 100px;

display: flex;
flex-direction: column;
gap: 18px;


}

.battle-facts-card,
.battle-source-card {
border: 1px solid rgba(184,148,82,.3);
box-shadow: 0 15px 35px rgba(30,22,12,.12);
}

/* Facts */

.battle-facts-card {
padding: 22px;

background: #171612;
color: #eee4d2;


}

.battle-card-label {
display: block;

margin-bottom: 18px;

color: var(--oa-gold2);
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;


}

.battle-fact {
padding: 15px 0;

border-top: 1px solid rgba(184,148,82,.17);


}

.battle-fact span {
display: block;

margin-bottom: 5px;

color: #817664;
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;


}

.battle-fact strong {
display: block;

color: #eee1cb;
font-family: var(--oa-serif);
font-size: 18px;
font-weight: 500;
line-height: 1.35;


}

/* Outcome */

.battle-outcome strong {
color: #e2bf73;
}

/* Footer */

.battle-card-footer {
margin-top: 8px;
padding-top: 14px;

border-top: 1px solid rgba(184,148,82,.17);

color: #766c5c;
font-size: 9px;
letter-spacing: .08em;
text-transform: uppercase;


}

/* Sources */

.battle-source-card {
padding: 20px;

background: #e4d6bd;
color: #3d352b;


}

.battle-source-card .battle-card-label {
color: #8c652b;
}

.battle-source-card p {
margin: 0 0 15px;

color: #6a5d4b;
font-size: 12px;
line-height: 1.6;


}

/* ---------------------------------------------------------
BACK
--------------------------------------------------------- */

.battle-next {
padding: 0 0 65px;

background: var(--oa-paper);


}

.battle-back {
display: inline-flex;
align-items: center;
gap: 16px;

color: #5c4b32;

transition: .25s;


}

.battle-back:hover {
color: #9b7436;
}

.battle-back-arrow {
display: grid;

width: 48px;
height: 48px;

place-items: center;

border: 1px solid var(--oa-gold);

color: var(--oa-gold);
font-size: 22px;


}

.battle-back small {
display: block;

margin-bottom: 2px;

color: #927344;
font-size: 8px;
letter-spacing: .15em;


}

.battle-back span:last-child {
font-family: var(--oa-serif);
font-size: 20px;
}

/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

.battle-hero {
    min-height: auto;
}

.battle-hero-inner {
    padding-top: 110px;
    padding-bottom: 55px;
}

.battle-breadcrumb {
    margin-bottom: 38px;
}

.battle-hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
}

.battle-hero-label {
    padding-left: 18px;
}

.battle-title {
    font-size: clamp(50px, 13vw, 75px);
}

.battle-layout {
    grid-template-columns: 1fr;
    gap: 45px;
}

.battle-sidebar {
    position: static;
}

.battle-main {
    max-width: none;
}


}

@media (max-width: 600px) {

.battle-hero-inner {
    padding-top: 100px;
    padding-bottom: 45px;
}

.battle-hero-label > span {
    font-size: 29px;
}

.battle-title {
    font-size: 48px;
}

.battle-lead {
    font-size: 17px;
}

.battle-body {
    padding: 50px 0 60px;
}

.battle-section-heading h2 {
    font-size: 30px;
}

.battle-content {
    font-size: 18px;
}

.battle-facts-card {
    padding: 18px;
}


}
/* =========================================================
   OTTOMAN ARCHIVE — CONSISTENT PREMIUM ARCHIVE RECORDS
   Added without changing the existing typography/font system.
   ========================================================= */

.record-archive-hero {
    position: relative;
    min-height: 410px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(8,9,8,.98) 0%, rgba(8,9,8,.91) 45%, rgba(8,9,8,.62) 100%),
        url("assets/images/page-header.jpg") center/cover;
    color: #eee4d2;
}
.record-archive-hero:after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(circle at 78% 48%, rgba(184,148,82,.15), transparent 32%);
}
.record-archive-hero-inner { position:relative; z-index:2; padding-top:125px; padding-bottom:62px; }
.record-archive-hero .archive-eyebrow { display:block; margin-bottom:14px; color:var(--oa-gold2); }
.record-archive-title {
    margin:0; color:#f0d9a7; font-size:clamp(58px,8vw,94px); line-height:.86; font-weight:500; letter-spacing:-.02em;
}
.record-archive-lead { max-width:680px; margin:24px 0 0; color:#c9bda9; font-size:19px; line-height:1.5; }
.record-archive-rule { width:100px; height:1px; margin-top:30px; background:rgba(184,148,82,.35); }
.record-archive-rule span { display:block; width:35px; height:2px; background:var(--oa-gold); }
.record-archive-body { padding:68px 0 82px; background:var(--oa-paper); }

/* Gold uppercase archive labels, matching the user's existing record style. */
.people-archive-page .archive-eyebrow,
.source-archive-page .archive-eyebrow,
.person-premium-label,
.source-premium-label,
.source-premium-meta,
.source-premium-more,
.person-premium-more {
    color:var(--oa-gold2); text-transform:uppercase; letter-spacing:.14em;
}

.people-premium-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.person-premium-card { background:#171612; border:1px solid rgba(184,148,82,.28); box-shadow:0 14px 34px rgba(30,22,12,.12); overflow:hidden; transition:transform .3s,border-color .3s,box-shadow .3s; }
.person-premium-card:hover { transform:translateY(-5px); border-color:rgba(184,148,82,.65); box-shadow:0 22px 44px rgba(30,22,12,.18); }
.person-premium-link { display:block; color:inherit; }
.person-premium-portrait { position:relative; aspect-ratio:4/5; overflow:hidden; background:#12110e; }
.person-premium-portrait img { width:100%; height:100%; object-fit:cover; transition:transform .5s,filter .5s; }
.person-premium-card:hover .person-premium-portrait img { transform:scale(1.035); filter:brightness(.78) saturate(.88); }
.person-premium-number { position:absolute; top:15px; right:15px; min-width:40px; padding:7px 9px; text-align:center; background:rgba(10,10,8,.82); border:1px solid rgba(225,189,112,.5); color:#efd18b; font-size:10px; letter-spacing:.1em; }
.person-premium-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--oa-gold2); background:radial-gradient(circle,rgba(184,148,82,.14),transparent 45%),#12110e; }
.person-premium-placeholder span { font-size:9px; letter-spacing:.14em; opacity:.7; }
.person-premium-placeholder strong { font-size:27px; font-weight:500; }
.person-premium-body { padding:20px 21px 22px; }
.person-premium-label { display:block; font-size:9px; margin-bottom:8px; }
.person-premium-body h2 { margin:0; color:#f0e5d3; font-size:30px; line-height:1; font-weight:500; }
.person-premium-body p { margin:8px 0 18px; color:#b8aa94; font-size:12px; }
.person-premium-more { display:flex; justify-content:space-between; align-items:center; padding-top:13px; border-top:1px solid rgba(184,148,82,.18); font-size:9px; }
.person-premium-more b { color:#efd18b; font-size:16px; font-weight:400; }

.source-premium-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.source-premium-card { position:relative; min-height:265px; display:flex; flex-direction:column; padding:24px; background:#171612; border:1px solid rgba(184,148,82,.28); box-shadow:0 14px 34px rgba(30,22,12,.12); color:#eee4d2; transition:transform .3s,border-color .3s,box-shadow .3s; }
.source-premium-card:hover { transform:translateY(-5px); border-color:rgba(184,148,82,.65); box-shadow:0 22px 44px rgba(30,22,12,.18); }
.source-premium-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid rgba(184,148,82,.18); }
.source-premium-number { color:#efd18b; font-size:11px; letter-spacing:.1em; }
.source-premium-label { font-size:9px; }
.source-premium-card h2 { margin:22px 0 10px; color:#f0e5d3; font-size:29px; line-height:1.02; font-weight:500; }
.source-premium-card h2 a:hover { color:#efd18b; }
.source-premium-author { margin:0; color:#c5b79f; font-size:13px; }
.source-premium-meta { margin:7px 0 18px; font-size:8px; }
.source-premium-more { margin-top:auto; padding-top:14px; border-top:1px solid rgba(184,148,82,.18); font-size:9px; }
.source-premium-more span { font-size:16px; color:#efd18b; }

/* Keep all editorial content visible; the theme never truncates record bodies. */
.content, .event-content, .battle-content, .video-content, .source-content, .person-content,
.content p, .content li, .content blockquote, .content pre, .content table { max-height:none !important; overflow:visible !important; }
.content, .event-content, .battle-content, .video-content, .source-content, .person-content { white-space:normal; overflow-wrap:anywhere; word-break:normal; }
.content img, .content video, .content iframe, .event-content img, .event-content video, .event-content iframe,
.battle-content img, .battle-content video, .battle-content iframe { max-width:100%; height:auto; }
.content table { display:block; max-width:100%; overflow-x:auto; }

/* Remove accidental English UI text from generic WordPress pagination. */
.navigation.pagination .prev, .navigation.pagination .next { text-transform:uppercase; }

@media (max-width:1000px) {
    .people-premium-grid, .source-premium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .record-archive-title { font-size:clamp(52px,9vw,78px); }
}
@media (max-width:700px) {
    .record-archive-hero { min-height:360px; }
    .record-archive-hero-inner { padding-top:105px; padding-bottom:48px; }
    .record-archive-title { font-size:48px; }
    .record-archive-lead { font-size:17px; }
    .record-archive-body { padding:50px 0 60px; }
    .people-premium-grid, .source-premium-grid { grid-template-columns:1fr; gap:18px; }
}