/* RUSDRAM — HISTORY. An antique sepia chronicle with a dated timeline. */

.hist-hero {
  position: relative; padding: calc(var(--header-h) + 5rem) 0 4rem; overflow: hidden; isolation: isolate;
  background: #1a120a;
}
.hist-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url('../img/photos/workers-theatre-1932.jpg') center/cover;
  filter: sepia(.6) contrast(1.05) brightness(.5); opacity: .55;
}
.hist-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,12,8,.5), rgba(12,10,11,.95));
}
.hist-hero .kicker { color: var(--brass-br); }
.hist-hero h1 { font-family: var(--f-display); font-size: clamp(2.4rem,1.6rem+4vw,4.8rem); color: var(--paper); margin: 1rem 0; max-width: 16ch; }
.hist-hero p { max-width: 60ch; color: var(--smoke); font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; }

.hist-intro { padding: clamp(3rem,6vw,5rem) 0 1rem; background: var(--black); }
.hist-intro p { max-width: 70ch; margin: 0 auto; text-align: center; color: var(--smoke); font-size: 1.1rem; }

/* timeline */
.timeline { padding: clamp(2rem,5vw,4rem) 0 clamp(4rem,8vw,7rem); background: var(--black); }
.tl { position: relative; max-width: 920px; margin: 0 auto; padding-inline-start: 0; }
.tl::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px;
  background: linear-gradient(var(--brass), transparent); transform: translateX(-50%);
}
.tl-item { position: relative; width: 50%; padding: 1.4rem 2.4rem; }
.tl-item:nth-child(odd) { inset-inline-start: 0; text-align: end; }
.tl-item:nth-child(even) { inset-inline-start: 50%; }
.tl-item::after {
  content: ""; position: absolute; inset-block-start: 2rem; width: 13px; height: 13px; border-radius: 50%;
  background: var(--brass); box-shadow: 0 0 0 4px rgba(201,162,75,.18);
}
.tl-item:nth-child(odd)::after { inset-inline-end: -6.5px; }
.tl-item:nth-child(even)::after { inset-inline-start: -6.5px; }
.tl-year { font-family: var(--f-display); font-size: 2rem; color: var(--brass); line-height: 1; }
.tl-t { font-family: var(--f-display); font-size: 1.3rem; color: var(--paper); margin: .4rem 0 .5rem; }
.tl-d { color: var(--smoke-dim); font-size: .95rem; }
@media (max-width: 720px) {
  .tl::before { inset-inline-start: 7px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; inset-inline-start: 0; text-align: start; padding-inline-start: 2.2rem; padding-inline-end: 0; }
  .tl-item:nth-child(odd) { text-align: start; }
  .tl-item::after, .tl-item:nth-child(odd)::after, .tl-item:nth-child(even)::after { inset-inline-start: 1px; }
}

/* awards + photo band */
.awards { padding: clamp(3.5rem,7vw,6rem) 0; background: var(--black-2); }
.awards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
@media (max-width: 760px){ .awards-grid{ grid-template-columns: 1fr; } }
.awards-copy h2 { font-family: var(--f-display); color: var(--paper); font-size: clamp(1.8rem,1.3rem+1.6vw,2.6rem); margin-bottom: 1rem; }
.awards-copy p { color: var(--smoke-dim); }
.awards-photo { border: 1px solid var(--line); overflow: hidden; }
.awards-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: sepia(.35) contrast(1.03); }
.awards-photo figcaption { font-size: .76rem; color: var(--smoke-dim); padding: .7rem .9rem; background: var(--black); }
.hist-note { margin-top: 2rem; text-align: center; font-size: .82rem; color: var(--smoke-dim); font-style: italic; }