:root{
  --ink:#2A170E;         /* deep brown/black */
  --tan:#D2C7B1;
  --teal:#426A5A;
  --coral:#EF6F6C;
  --orange:#C85E3A;      /* close to your orange swatch */
  --bg:#2A170E;
}

@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald/static/Oswald-Regular.ttf") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald/static/Oswald-Regular.ttf") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root { --font-sans: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
html, body { font-family: var(--font-sans); }
button, input, select, textarea { font: inherit; }


html, body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font: inherit;   /* ensure form controls also use Oswald */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:tan;}

/* Header */
.site-header{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:var(--bg);
  border-bottom:1px solid #222;
}
.brand{
  font-weight:900; letter-spacing:1px; font-size:36px;
  color:var(--coral);
}
nav a{
  color:#d4d4d4; text-decoration:none; margin:0 14px; font-weight:700;
}
nav a:hover{ color:#fff; }

/* Dotted halftone background (animated) */
#app::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
          radial-gradient(circle at 10px 10px, rgba(239,111,108,0.9) 2px, transparent 3px) 0 0/22px 22px,
          radial-gradient(circle at 0 0, rgba(66,106,90,0.85) 2px, transparent 3px) 11px 11px/22px 22px;
  opacity:0.6;
  filter:saturate(0.9) contrast(1.05) hue-rotate(0deg);
  animation: bgHue 18s ease-in-out infinite alternate;
}
@keyframes bgHue{
  from{ filter:saturate(0.9) contrast(1.05) hue-rotate(0deg); }
  to  { filter:saturate(1.1) contrast(1.07) hue-rotate(18deg); }
}

/* Hover tooltip */
.hover-tip{
  position:fixed; z-index:20;
  background:#fff; color:#111; font-size:12px; padding:6px 8px;
  border:1px solid #ccc; border-radius:6px; pointer-events:none;
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
}

/* Info card (bottom sheet) */
.info-card{
  position:fixed; left:24px; right:24px; bottom:24px; z-index:15;
  background:var(--orange); color:#2b1a11;
  border-radius:14px; border:2px solid var(--tan);
  box-shadow:0 10px 40px rgba(0,0,0,0.45);
}
.info-card__header{
  background:var(--tan); color:var(--ink);
  font-weight:900; letter-spacing:.5px; font-size:28px;
  padding:12px 20px; border-radius:10px; display:inline-block; margin:18px 18px 0;
}
.info-card__body{
  display:flex; gap:20px; padding:18px;
  align-items:flex-start;
}
.info-card__thumb{
  width:360px; height:200px; object-fit:cover; border-radius:10px; border:2px solid var(--tan);
  background:#0002;
}
.info-card__grid{
  flex:1; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;
}
.label{ color:#000; opacity:.8; font-weight:800; }
.btn{
  justify-self:start;
  padding:10px 14px; background:#fff; color:#111; border-radius:8px; text-decoration:none; font-weight:800;
}
.spacer{ grid-column:1/-1; height:4px; }

/* Ensure the canvas sits below UI, fills screen */
canvas{ position:fixed; inset:0; z-index:0; display:block; }

/* --- 3D interaction hint --- */
.hint{
  position:fixed; z-index:12; left:50%; transform:translateX(-50%);
  top:86px; padding:8px 12px; border-radius:999px;
  background:rgba(210,199,177,0.18); color:#f2f2f2; border:1px solid rgba(210,199,177,0.35);
  font-weight:700; letter-spacing:.3px; font-size:12px; backdrop-filter: blur(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.hint--hide{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-6px); }

/* Make sure canvas fills screen behind UI */
canvas{ position:fixed; inset:0; z-index:0; display:block; }

/* --- Tag chips --- */
.tag-row{ grid-column:1/-1; display:flex; align-items:flex-start; gap:12px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px;
  background:#2A170E; color:#D2C7B1; border:1px solid #D2C7B1;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ===========================
   TEASER THEME MERGE LAYER
   (safe to append at the end)
   =========================== */

/* --- Palette bridge: keep existing vars, add teaser aliases --- */
:root {
  /* existing */
  --ink:#2A170E;
  --tan:#D2C7B1;
  --teal:#426A5A;
  --coral:#EF6F6C;
  --orange:#C85E3A;
  --bg:#2A170E;

  /* teaser aliases mapped into your palette */
  --primary-bg: var(--bg);
  --secondary-bg: #426A5A;
  --text-color: #E2CCA3;
  --text-muted: #E2CCA3;
  --title-color: #D98A3A;     /* warm headline */
  --accent-color: #B85C2C;
  --accent-hover: #EF6F6C;
  --nav-color: #D98A3A;
  --nav-hover: #F2B705;
  --button-bg: #B85C2C;
  --button-hover: #8F4722;
  --shadow-color: rgba(0,0,0,.2);
  --overlay-bg: rgba(0,0,0,.5);
  --overlay-hover: rgba(0,0,0,.8);
}

/* --- Optional: Oswald for display headings only --- */
h1, h2, .brand { font-family: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif; }
h1, h2 { text-transform: uppercase; letter-spacing: .02em; font-weight: 800; }

/* --- Header accent line like teaser --- */
.site-header .brand {
  border-bottom: 1px solid var(--accent-color);
  padding-bottom: 2px;
}
.site-header nav a:hover { color: var(--nav-hover); }

/* --- Buttons/CTAs with teaser tones --- */
.btn, .cta {
  background: var(--button-bg);
  color: var(--text-color);
  border: none;
  transition: background .2s ease, transform .1s ease;
}
.btn:hover, .cta:hover { background: var(--button-hover); transform: translateY(-1px); }

/* --- Colored overlay slabs (use as section backdrops) --- */
.overlay-slab {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #222;
  box-shadow: 0 10px 30px var(--shadow-color);
}
.overlay-slab::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none;
}
.overlay--tangerine { background: linear-gradient(180deg, rgba(184,92,44,.28), rgba(184,92,44,.06)); }
.overlay--gold     { background: linear-gradient(180deg, rgba(217,138,58,.24), rgba(217,138,58,.06)); }
.overlay--teal     { background: linear-gradient(180deg, rgba(66,106,90,.24), rgba(66,106,90,.06)); }

/* --- Tinted image wrapper (for hero/gallery zones) --- */
.tint {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid #222;
}
.tint img { display:block; width:100%; height:auto; }
.tint::after {
  content:""; position:absolute; inset:0; mix-blend-mode:multiply; pointer-events:none;
}
.tint--orange::after { background: rgba(184,92,44,.25); }
.tint--teal::after   { background: rgba(66,106,90,.25); }
.tint--gold::after   { background: rgba(217,138,58,.20); }

/* --- Polaroid (teaser style, harmonized) --- */
.polaroid {
  width: 220px;
  background: var(--text-color);
  color: var(--ink);
  padding: 10px;
  border-radius: 6px;
  box-shadow: 3px 3px 15px rgba(0,0,0,.35);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.polaroid img { width: 100%; border-radius: 4px; display:block; }
.polaroid .caption { font-size: 13px; color: #4b3b2e; margin-top: 8px; font-style: italic; }
.polaroid:hover { transform: rotate(1.5deg) translateY(-2px); box-shadow: 6px 10px 22px rgba(0,0,0,.45); }
.tilt-left        { transform: rotate(-12deg); }
.tilt-right       { transform: rotate(8deg); }
.tilt-subtle-left { transform: rotate(-5deg); }
.tilt-subtle-right{ transform: rotate(5deg); }
.float-left  { float: left;  margin: 10px 40px 10px -180px; }
.float-right { float: right; margin: 10px -160px 10px 40px; }
@media (max-width: 1024px){
  .polaroid { float:none; margin: 16px auto; width: 200px; }
  .float-left, .float-right { margin: 16px auto; }
}

/* --- Scope the teaser sepia so it doesn't tint everything --- */
.teaser-sepia img { filter: sepia(70%); }

/* --- Smaller, subtler orange dots on the archive background --- */
#app::before {
  /* tighter grid + smaller dots, lighter opacity */
  background:
          radial-gradient(circle at 10px 10px, rgba(239,111,108,0.65) 1.3px, transparent 2.6px) 0 0/18px 18px,
          radial-gradient(circle at 0 0, rgba(66,106,90,0.72) 1.3px, transparent 2.6px) 9px 9px/18px 18px;
  opacity: .48;
}

/* --- Timeline chips: tighter & teaser-tinted active states --- */
.timeline-cards .chip {
  background: rgba(24,24,24,.62);
  border: 1px solid rgba(255,234,214,.18);
}
.timeline-cards .chip.is-active[data-period="precursors"] {
  background: linear-gradient(180deg, #B284BE 0%, #7f5a86 100%);
}
.timeline-cards .chip.is-active[data-period="thick"] {
  background: linear-gradient(180deg, #EF6F6C 0%, #b4514f 100%);
}
.timeline-cards .chip.is-active[data-period="today"] {
  background: linear-gradient(180deg, #7CA982 0%, #5a7c60 100%);
}

/* --- Link accents (teaser) --- */
a { color: var(--nav-color); }
a:hover { color: var(--nav-hover); }

/* --- Utility: soft section divider in teaser tone --- */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,138,58,.6), transparent);
  border: 0; margin: 28px 0;
}
.hero-image-rotator{
  position: relative;
  width: 100%;
  /* match your old gallery’s visual footprint */
  min-height: 600px;       /* same as your carousel fallbacks */
  aspect-ratio: 16 / 9;    /* stays consistent & responsive */
  overflow: hidden;
}
.hero-image {
  position: relative;
  width: 100%;
  /* match your old gallery’s visual footprint */
  min-height: 600px;       /* same as your carousel fallbacks */
  aspect-ratio: 16 / 9;    /* stays consistent & responsive */
  overflow: hidden;
}
.hero-image-rotator img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 400ms ease;
  display: block;
  /* optional teaser tint—remove if you want true colors */
  filter: sepia(60%);
}

.hero-image-rotator img.is-visible{ opacity: 1; }

/* Prev/Next controls (optional) */
.hero-rotator__prev,
.hero-rotator__next{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.35);
  border: 1px solid #222;
  color: #fff; font-size: 28px; line-height: 1;
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer; z-index: 2;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}
.hero-rotator__prev{ left: 10px; }
.hero-rotator__next{ right: 10px; }
.hero-rotator__prev:hover,
.hero-rotator__next:hover{
  background: rgba(0,0,0,.5);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* If you don’t want visible buttons on mobile: */
@media (max-width: 700px){
  .hero-rotator__prev, .hero-rotator__next{ display:none; }
}

.timeline-cards .chip.is-active{
  outline: 2px solid lightcoral;
  background: teal;
}

.search-btn{
  height: 36px; width: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #eee;
  cursor: pointer;
  z-index: 25;
}

/* Inline search panel now acts like an input group */
.search-panel{
  position: relative;        /* make z-index apply */
  z-index: 31;               /* slightly above the toolbar shell */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15,15,15,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 6px 8px;
}
#searchInput{
  width: clamp(220px, 36vw, 420px);
  background: transparent;
  border: none;
  color: #f1f1f1;
  outline: none;
  font-size: 14px;
}

@media (max-width: 900px){
  .search-panel{ right: 12px; left: 12px; top: 0px; }
  #searchInput{ width: 100%; }
}

/* header link to dedicated Search page */
.header-link{
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #eee;
  text-decoration: none;
  z-index: 25;
}

/* Title row: H1 left, chips right */
.page-title-row{
  display: flex;
  align-items: flex-end;
  gap: 12px 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 30; /* above canvas */
  margin: 8px 0 8px;
}
.page-title{
  margin: 0 8px 6px 0;
  line-height: 1.1;
}

/* Make the chips sit to the right of the H1 on wide screens */
.timeline-cards--inline{
  margin-left: auto;            /* pushes chips to the right */
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Slightly more compact chips when inline */
.timeline-cards--inline .chip{
  padding: 8px 10px;
  border-radius: 10px;
}
.timeline-cards--inline .chip__title{
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}
.timeline-cards--inline .chip__sub{
  display: block;
  font-size: 11px;
  opacity: .85;
  line-height: 1.1;
}

/* On small screens, chips wrap under the H1 */
@media (max-width: 820px){
  .timeline-cards--inline{ margin-left: 0; }
  .page-title-row{ align-items: flex-start; }
}

/* Title row: H1 left, chips middle, search right */
.page-title-row{
  display: flex;
  align-items: flex-end;
  gap: 12px 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 30; /* above canvas */
  margin: 8px 0 10px;
}
.page-title{
  margin: 0 8px 6px 0;
  line-height: 1.1;
}

/* Chips sit after H1; they’ll wrap on small screens */
.timeline-cards--inline{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Inline search sits at far right on wide screens */
.search-panel--inline{
  margin-left: auto;      /* pushes search to the right edge */
  position: relative;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15,15,15,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 6px 8px;
}

/* Compact input that grows but won’t crush chips */
.search-panel--inline #searchInput{
  width: clamp(200px, 26vw, 380px);
}

/* Keep UI above WebGL canvas */
canvas { z-index: 0 !important; }

/* Toolbar containing search + chips */
.archive-toolbar{
  position: sticky;   /* stays visible when scrolling */
  top: 12px;
  z-index: 30;        /* above canvas and bottom sheet */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 12px;
  margin: 8px 0 16px 0;
  background: rgba(20,20,20,.70);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  pointer-events: auto; /* ensure inputs are interactive */
}

/* Inline search panel now acts like an input group */
.search-panel{
  position: relative;        /* make z-index apply */
  z-index: 31;               /* slightly above the toolbar shell */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15,15,15,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 6px 8px;
}
#searchInput{
  width: clamp(220px, 36vw, 420px);
  background: transparent;
  border: none;
  color: #f1f1f1;
  outline: none;
  font-size: 14px;
}
.search-clear{
  height: 28px; width: 28px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #eee;
  cursor: pointer;
}

/* Chips sit nicely to the right, wrap on small screens */
.timeline-cards{
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* Make sure the bottom info card is above canvas too */
.info-card{ z-index: 25; }

@media (max-width: 900px){
  .archive-toolbar{ gap: 10px; padding: 8px 10px; }
  #searchInput{ width: clamp(160px, 60vw, 100%); }
}

/* ==== ARCHIVES TITLE BAR: final overrides (place LAST) ==== */

/* === ARCHIVES title row: flex-only layout that never overlaps === */

/* Container: two items on row 1 (H1 + search), chips forced to row 2 */
.page-title-row{
  display: flex !important;
  flex-wrap: wrap;                 /* allow a second row */
  align-items: flex-end;
  gap: 12px 16px;
}

/* H1 just sits on the left */
.page-title{
  flex: 0 1 auto;
  margin: 0 8px 6px 0;
  line-height: 1.1;
}

/* Search stays inline with the H1, shrinks before wrapping */
.search-panel--inline{
  order: 2;                        /* keep it on row 1 */
  margin-left: auto;               /* push to the right edge */
  flex: 1 1 420px;                 /* grow/shrink as space allows */
  min-width: 140px;                /* how small it can go on XS */
  max-width: 520px;                /* don’t explode on wide */
}

/* Make the input fluid inside its panel (beats earlier #searchInput) */
.page-title-row .search-panel--inline #searchInput{
  width: 100% !important;
}

/* Chips always start on a new line (row 2) and fill the width */
.timeline-cards--inline{
  order: 3;                        /* ensure it comes after search */
  flex: 1 0 100%;                  /* force wrap to next line */
  margin-left: 0 !important;       /* cancel earlier auto-push */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* XS tweaks: let search compress a bit more so it never collides */
@media (max-width: 520px){
  .search-panel--inline{
    flex-basis: 320px;             /* preferred width on tiny screens */
    min-width: 120px;
  }
}

/* Era chips */
.chips--eras{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; width: 100%;}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:#151515; color:#eee; font-size:13px; font-weight:800;
  cursor:pointer; user-select:none;
}
.chip .sub{ opacity:.75; font-weight:600; font-size:18px; }
.chip.is-active{ outline:2px solid #EF6F6C; background:#1b1b1b; }

/* Tag accordion */
.tag-accordion{ width:100%; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#111; overflow:hidden; }
.tag-accordion > summary{
  padding:10px 12px; cursor:pointer; list-style:none; font-weight:800; color:#eee;
}
.tag-accordion > summary::-webkit-details-marker{ display:none; }
.tag-accordion[open] > summary{ border-bottom:1px solid rgba(255,255,255,.1); }
.tag-accordion .tags{ padding:10px 12px; }
.tag-accordion .tags label{ background:#161616; }

/* === Keep header + dropdown above archive toolbar/title bar === */
.site-header{
  position: relative;      /* create stacking context */
  z-index: 1200;           /* higher than page-title-row/archive-toolbar */
}

.nav-item{ position: relative; }  /* anchor for the dropdown */

.nav-item .dropdown{
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1300;           /* above header and any page UI */
  /* optional safety: */
  /* pointer-events: auto; */
}

/* (Optional) If you ever boosted the title row a lot, you can cap it here */
.page-title-row,
.archive-toolbar{
  z-index: 300;            /* still above canvas, below header/dropdown */
}


.logos img {
  max-height: 60px;
  width: auto;
  background-color: rgb(300, 300, 300);
}

/* ====== Full-width bands with centered content ====== */
.link-bands { margin: 24px 0 8px; }

.band {
  position: relative;
  width: 100%;
  padding: 18px 0;                     /* band thickness */
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.band__content{
  max-width: 1200px;                   /* center width */
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;             /* centered row */
}

/* ====== Chip-style buttons (match timeline buttons) ====== */
.chip-btn{
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.20);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, filter .2s ease;
  will-change: transform, filter;
}
.chip-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  filter: brightness(1.04);
  color: #EF6F6C;
  background-color: teal;
}

/* Color accents per era */
.chip-btn.is-precursors{
  outline: 2px solid rgba(178,132,190,.55);
}
.chip-btn.is-thick{
  outline: 2px solid rgba(239,111,108,.55);
}
.chip-btn.is-today{
  outline: 2px solid rgba(124,169,130,.55);
}

/* Compact on tiny screens but still centered */
@media (max-width: 520px){
  .band { padding: 14px 0; }
  .chip-btn{
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 12px;
  }
}

/* Keep bands above WebGL canvas if placed near hero */
.band, .band__content, .chip-btn{ position: relative; z-index: 5; }