:root {
    color-scheme: light;
    --period-night: #102f26;
    --period-soft: #194438;
    --period-paper: #eeeae0;
    --period-cream: #fbf8f0;
    --period-coral: #d97861;
    --period-gold: #d1b06f;
    --period-line: rgba(18, 42, 34, .18);
}

body.period-museum { color: var(--period-night); background: var(--period-paper); }

.period-museum-layout {
    display: block;
}

.period-exhibit .museum-heading h1 {
    max-width: 620px;
    font-size: clamp(2.8rem, 4.3vw, 4.8rem);
}

.period-main-panel {
    width: 57%;
    margin-left: 43%;
    min-width: 0;
    color: var(--period-night);
    background: var(--period-paper);
}

.period-panel-breadcrumbs {
    min-height: 46px;
    padding: 0 clamp(28px, 4vw, 66px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--period-line);
    color: #748079;
}

.period-panel-breadcrumbs strong {
    color: var(--period-night);
}

.period-hero {
    position: relative;
    min-height: 310px;
    padding: 27px clamp(28px, 5vw, 82px) 38px;
    display: grid;
    grid-template-columns: 1.15fr .75fr .55fr;
    grid-template-rows: auto 1fr;
    gap: 20px 5vw;
    overflow: hidden;
    color: var(--period-cream);
    background: var(--period-soft);
}

.period-breadcrumbs {
    grid-column: 1 / -1;
    color: rgba(255,255,255,.5);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.period-breadcrumbs span { margin: 0 9px; color: var(--period-gold); }
.period-breadcrumbs strong { color: rgba(255,255,255,.8); font-weight: 500; }
.period-panel-breadcrumbs.period-breadcrumbs { color: #65736c; }
.period-panel-breadcrumbs.period-breadcrumbs a { color: #45574f; }
.period-panel-breadcrumbs.period-breadcrumbs strong { color: var(--period-night); font-weight: 700; }
.period-panel-breadcrumbs.period-breadcrumbs span { color: #9a6f35; }
.period-title-block { align-self: end; }
.period-title-block p { margin: 0 0 10px; color: #e59a87; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.period-title-block h1 { max-width: 720px; margin: 0; font: 600 clamp(3.2rem,5.2vw,5.4rem)/.88 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.period-summary { z-index: 1; align-self: end; }
.period-summary > p { max-width: 430px; margin: 0 0 23px; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.6; }
.period-summary dl { display: flex; gap: 25px; margin: 0; }
.period-summary dl div { display: grid; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.2); }
.period-summary dt { font: 600 1.55rem Georgia, serif; }
.period-summary dd { margin: 3px 0 0; color: rgba(255,255,255,.46); font-size: .55rem; text-transform: uppercase; }
.period-hero-stamp { z-index: 1; align-self: center; justify-self: center; width: 190px; height: 190px; }
.period-hero-stamp img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 12px rgba(0,0,0,.38)); transform: rotate(4deg); }
.period-giant-year { position: absolute; right: -15px; bottom: -58px; color: rgba(255,255,255,.035); font: 700 11rem Georgia, serif; }

.period-viewbar {
    min-height: 58px;
    padding: 0 clamp(28px,4vw,66px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--period-line);
    background: var(--period-cream);
}

.period-viewbar > a { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.period-viewbar nav { align-self: stretch; display: flex; gap: 27px; }
.period-viewbar nav a { display: flex; align-items: center; border-bottom: 2px solid transparent; color: #718079; font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.period-viewbar nav a.active { border-color: var(--period-coral); color: var(--period-night); }

.period-content { padding: 34px clamp(28px,4vw,66px) 70px; }
.period-section-head { min-height: 72px; padding-bottom: 17px; display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--period-night); }
.period-section-head p { margin: 0; color: #b75c48; font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.period-section-head h2 { margin: 5px 0 0; font: 600 clamp(2rem,3vw,2.8rem)/1 Georgia, serif; letter-spacing: -.035em; }
.period-section-head > span { color: #6f7b75; font-size: .65rem; }

.period-tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-left: 1px solid var(--period-line); }
.period-tile {
    position: relative;
    min-height: 285px;
    padding: 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-right: 1px solid var(--period-line);
    border-bottom: 1px solid var(--period-line);
    background: rgba(255,255,255,.16);
    transition: background .18s ease, transform .18s ease;
}

.period-tile:hover { z-index: 1; background: var(--period-cream); transform: translateY(-2px); }
.period-tile-range { font: 600 1.45rem Georgia, serif; }
.period-tile-image { display: grid; place-items: center; min-height: 160px; }
.period-tile-image img { width: 82%; height: 150px; object-fit: contain; filter: drop-shadow(0 10px 7px rgba(0,0,0,.2)); }
.period-tile-meta { align-self: end; color: #758079; font-size: .63rem; }
.period-tile > i { position: absolute; right: 17px; top: 19px; color: var(--period-coral); font-style: normal; opacity: 0; }
.period-tile:hover > i { opacity: 1; }
.period-tile.empty { opacity: .45; filter: grayscale(1); }
.year-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); }

.period-series-list { position: relative; }
.period-series-row {
    min-height: 130px;
    display: grid;
    grid-template-columns: 85px 120px minmax(220px,1fr) 70px 18px;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--period-line);
}

.period-series-row:hover { background: var(--period-cream); }
.period-series-date { display: grid; }
.period-series-date strong { font: 600 1.5rem Georgia, serif; }
.period-series-date small, .period-series-copy > small { color: #b75c48; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.period-series-image { align-self: stretch; display: grid; place-items: center; background: #245e4b; }
.period-series-image img { width: 82%; height: 105px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0,0,0,.25)); }
.period-series-copy { display: grid; gap: 5px; }
.period-series-copy > strong { font: 600 1.45rem Georgia, serif; }
.period-series-copy > span { color: #758079; font-size: .63rem; }
.period-series-count { display: grid; text-align: center; }
.period-series-count strong { font: 600 1.4rem Georgia, serif; }
.period-series-count small { font-size: .52rem; text-transform: uppercase; }
.period-series-row > i { color: var(--period-coral); font-style: normal; opacity: 0; }
.period-series-row:hover > i { opacity: 1; }
.period-edit-link { position: absolute; right: 34px; margin-top: -30px; color: #8a948f; font-size: .75rem; }
.period-empty { padding: 30px 0; color: #69756f; }

@media (max-width: 1050px) {
    .period-hero { grid-template-columns: 1fr 1fr; }
    .period-hero-stamp { display: none; }
    .period-museum-layout .museum-exhibit { width: 39%; }
    .period-main-panel { width: 61%; margin-left: 39%; }
    .period-tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .year-tiles { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) and (min-width: 761px) {
    .period-museum-layout .museum-exhibit { display: none; }
    .period-main-panel { width: 100%; margin-left: 0; }
    .period-content { padding-right: 32px; padding-left: 32px; }
    .period-series-row { grid-template-columns: 74px 112px minmax(0,1fr) 58px 16px; gap: 18px; }
    .period-series-copy { min-width: 0; }
    .period-series-copy > strong { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
    .period-museum-layout { display: block; }
    .period-museum-layout .museum-exhibit { width: 100%; }
    .period-main-panel { width: 100%; margin-left: 0; }
    .period-panel-breadcrumbs { padding: 0 20px; }
    .period-hero { display: block; min-height: 0; padding: 27px 22px 34px; }
    .period-title-block { margin-top: 46px; }
    .period-summary { margin-top: 34px; }
    .period-title-block h1 { font-size: clamp(3rem,14vw,5rem); }
    .period-giant-year { font-size: 7rem; bottom: -30px; }
    .period-viewbar { padding: 12px 20px; align-items: flex-start; flex-direction: column; }
    .period-viewbar nav { width: 100%; min-height: 38px; gap: 18px; overflow-x: auto; }
    .period-viewbar nav a { flex: 0 0 auto; white-space: nowrap; }
    .period-content { padding: 28px 20px 50px; }
    .period-tile-grid, .year-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .period-tile { min-height: 240px; padding: 13px; }
    .period-tile-image { min-height: 130px; }
    .period-tile-image img { height: 125px; }
    .period-series-row { grid-template-columns: 58px 78px 1fr; gap: 13px; min-height: 112px; }
    .period-series-image img { height: 88px; }
    .period-series-copy > strong { font-size: 1rem; }
    .period-series-count, .period-series-row > i { display: none; }
}

@media (max-width: 420px) {
    .period-tile-grid, .year-tiles { grid-template-columns: 1fr 1fr; }
    .period-tile-range { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .period-tile { transition: none; }
}
.period-level-nav { margin:0; padding:7px 20px; display:grid; grid-template-columns:1fr 1fr; gap:8px; border-bottom:1px solid rgba(25,58,47,.18); background:#eeece4; }
.period-level-nav a { min-height:42px; padding:5px 9px; display:flex; flex-direction:column; justify-content:center; border:1px solid rgba(25,58,47,.2); color:#173f34; background:#f6f3ea; text-decoration:none; }
.period-level-nav a.is-next { align-items:flex-end; text-align:right; }
.period-level-nav small { color:#748079; font-size:.52rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.period-level-nav strong { margin-top:2px; font:600 .9rem/1 Georgia,serif; }
.period-level-nav a:hover { color:#173f34; background:#d9c37d; }
@media(max-width:600px){.period-level-nav{padding:6px 10px}.period-level-nav a{min-height:38px}.period-level-nav strong{font-size:.78rem}}