@font-face {
  font-family: Oswald;
  src: url("/assets/oswald-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Oswald;
  src: url("/assets/oswald-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --ink: #171510;
  --deep: #11100d;
  --panel: #201c15;
  --paper: #f2ecde;
  --soft: #d0c5b4;
  --muted: #b5a996;
  --accent: #edb76e;
  --rust: #874717;
  --rule: #514637;
  --display: Oswald, "Arial Narrow", sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  --gutter: clamp(1.125rem, 5vw, 5.25rem);
  --header-height: 5.2rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: 1rem; }
html.has-section-nav { scroll-padding-block-start: calc(var(--header-height) + .75rem); }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font: 1rem/1.6 system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
img { display: block; max-inline-size: 100%; }
figure, p, h1, h2, h3 { margin: 0; }
ul { padding: 0; margin: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; }
button, summary { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.paper:focus-visible, .paper :focus-visible { outline-color: var(--rust); }
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link { position: fixed; z-index: 5; inset: .6rem auto auto .6rem; padding: .75rem 1rem; color: var(--deep); background: var(--paper); }
.skip-link:not(:focus) { transform: translateY(-200%); }
.wrap { width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto; }
.header { background: var(--ink); }
.has-section-nav .header { position: sticky; inset-block-start: 0; z-index: 2; }
.header-inner { display: flex; justify-content: space-between; align-items: center; min-block-size: var(--header-height); gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { inline-size: 3.125rem; block-size: auto; }
.brand strong { display: block; font: 600 1.05rem/1.14 var(--display); letter-spacing: .055em; text-transform: uppercase; }
.desktop-nav { display: none; }
.mobile-nav { position: relative; z-index: 3; }
.mobile-nav summary {
  display: flex; align-items: center; gap: .6rem; min-block-size: 2.75rem;
  padding: .4rem .75rem; border: 1px solid var(--rule); list-style: none; cursor: pointer;
  font-size: .86rem; font-weight: 650;
}
summary::-webkit-details-marker { display: none; }
.menu-lines { inline-size: .95rem; block-size: .56rem; border-block: 1px solid var(--accent); }
.mobile-nav nav {
  position: absolute; inset: calc(100% + .55rem) 0 auto auto; min-inline-size: 12rem;
  display: grid; padding: .4rem; background: var(--panel); border: 1px solid var(--rule);
  box-shadow: 0 10px 28px #0007;
}
.mobile-nav a { display: flex; align-items: center; min-block-size: 2.75rem; padding: .5rem .85rem; text-decoration: none; }
.mobile-nav a:hover { color: var(--accent); background: var(--deep); }
[data-section-nav] a[aria-current="location"] { color: var(--accent); text-decoration: underline; }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: clamp(33rem, 133vw, 37rem);
  background: var(--deep);
  border: 1px solid #43372a;
}
.hero-photo { position: absolute; z-index: -1; inset: 0 0 24%; }
.hero-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 59% 53%; }
.hero-photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, var(--deep), #11100db8 25%, #11100d00 64%);
}
.hero-photo figcaption {
  position: absolute; z-index: 1; inset: .8rem .8rem auto auto;
  color: var(--soft); background: #16130fec; padding: .25rem .43rem;
  font: 500 .61rem/1.45 var(--mono); letter-spacing: .03em;
}
.hero-copy { position: relative; padding: 8.4rem clamp(1rem, 5vw, 4.15rem) clamp(1.65rem, 6vw, 3.4rem); }
.section-index, .hero-strip, .hero-index {
  font: 650 .72rem/1.35 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.section-index { display: flex; gap: .65rem; align-items: center; color: var(--accent); }
.hero-tagline { text-shadow: 0 1px 4px var(--deep); }
h1, h2 { font-family: var(--display); text-transform: uppercase; font-weight: 700; }
.hero h1 {
  display: grid;
  font-size: clamp(3.6rem, 15vw, 7.35rem);
  line-height: 1;
  letter-spacing: -.04em;
  margin: .48rem 0 .95rem;
}
.hero h1 span:last-child { color: var(--accent); }
.hero-tagline { max-inline-size: 42ch; color: var(--paper); font-size: clamp(.96rem, 2.7vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-block-start: 1.35rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .62rem;
  min-block-size: 2.85rem; padding: .58rem .78rem;
  border: 1px solid transparent; text-decoration: none; font-weight: 720; font-size: .82rem;
}
.button-fill { color: var(--deep); background: var(--accent); }
.button-fill:hover { background: #f5cc93; }
.hero-index { display: none; }
.hero-strip {
  min-block-size: 3.25rem; display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: .59rem; gap: .65rem;
}
.hero-strip b, .hero-strip a:hover { color: var(--accent); }
.hero-strip a { display: none; min-block-size: 2.75rem; align-items: center; }

.section { padding-block: clamp(3.25rem, 8vw, 7rem); }
.section:focus-visible { outline-offset: -4px; }
.paper { background: var(--paper); color: var(--ink); color-scheme: light; }
.paper .section-index, .paper .period { color: var(--rust); }
.section-index { margin-block-end: .85rem; }
.section-index span { inline-size: 1.6rem; border-block-start: 1px solid currentColor; }
h2, .error-title { font-size: clamp(2.85rem, 9vw, 6rem); line-height: 1.07; letter-spacing: -.036em; }
.error-title { margin-block-end: 1rem; }
h3 { font-size: 1.08rem; line-height: 1.35; }
.period { color: var(--accent); }
.wide-break { display: none; }
.split { display: grid; gap: clamp(1.6rem, 4.5vw, 5rem); }
.about-copy { max-inline-size: 43rem; }
.about-copy > p, .channel-copy p, .contact-copy > p {
  max-inline-size: 58ch; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.7;
}
.about-copy > p + p { margin-block-start: 1rem; }
.about-detail { margin-block-start: 1.2rem; }
.about-detail h3 { margin-block-end: .5rem; }
.about-detail li + li, .about-detail p + p { margin-block-start: .4rem; }
.section-head { display: grid; gap: .85rem; margin-block-end: clamp(1.7rem, 4vw, 3rem); }
.paper .section-head > p { color: #544633; }
.music { background: var(--deep); }
.channel-band { display: grid; border-block: 1px solid var(--rule); }
.channel-copy { align-self: center; padding-block: clamp(1.4rem, 4vw, 3rem); }
.channel-copy p { max-inline-size: 35ch; color: var(--soft); }
.channel-copy .button { margin-block-start: 1.3rem; }
.channel-art {
  display: grid; align-content: center; justify-items: center; gap: .85rem;
  min-block-size: 9rem; padding: 1.25rem;
  background: var(--panel); border-block-start: 1px solid var(--rule);
}
.channel-mark { display: flex; align-items: center; gap: .65rem; font: 650 clamp(2rem, 4vw, 3.45rem)/1 var(--display); }
.channel-mark svg { inline-size: clamp(2.45rem, 5vw, 4.3rem); block-size: auto; }
.channel-label { color: var(--muted); text-align: center; font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.text-link { color: var(--accent); }

.gallery-grid { display: grid; gap: clamp(.85rem, 2vw, 1.45rem); }
.photo-link { display: block; overflow: hidden; background: #382c20; }
.photo-link img { inline-size: 100%; block-size: auto; aspect-ratio: 5/4; object-fit: cover; }
.lightbox {
  color: var(--paper); background: var(--deep); border: 1px solid var(--rule);
  width: min(90vw, 62rem); max-block-size: 91dvh; padding: 0;
}
.lightbox::backdrop { background: #090806e8; }
.lightbox-inner { display: grid; gap: .65rem; padding: clamp(.7rem, 2vw, 1.15rem); }
.lightbox-image img { width: 100%; height: auto; max-block-size: 63dvh; object-fit: contain; }
.lightbox button {
  border: 1px solid var(--rule); background: var(--panel); color: var(--paper);
  min-block-size: 2.75rem; padding: .35rem .55rem; font-size: .83rem; font-weight: 650;
}
.lightbox button:hover { color: var(--accent); }
.lightbox button:focus-visible { outline-color: var(--accent); }
.lightbox-close { justify-self: end; }
.lightbox-controls { display: flex; justify-content: space-between; gap: .5rem; }

.contact-section { background: var(--panel); border-block-end: 1px solid var(--rule); }
.contact-copy { min-inline-size: 0; color: var(--soft); }
.contact-links { margin-block-start: 1.15rem; border-block-end: 1px solid var(--rule); }
.contact-links li {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr);
  align-items: center; gap: .75rem; border-block-start: 1px solid var(--rule); padding-block: .25rem;
}
.contact-links a {
  display: grid; align-items: center; justify-self: end; min-block-size: 2.75rem;
  color: var(--paper); text-align: end; overflow-wrap: anywhere;
}
.contact-links a:hover { color: var(--accent); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 6rem; padding-block: .65rem; }
.footer-traffic { margin: 0; color: var(--muted); font-size: .75rem; }
.footer-traffic:not([hidden]) { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.footer-traffic > div { display: flex; align-items: baseline; gap: .35rem; }
.footer-traffic dd { margin: 0; color: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.4rem, 1vw, 1rem); }
.footer-social { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; }
.footer-social img, .footer-social svg { inline-size: 1.8rem; block-size: auto; }
.footer-social:hover { background: var(--panel); }
.back-top { color: var(--soft); font-size: .83rem; padding-block: .75rem; }
.back-top:hover { color: var(--accent); }

@media (max-width: 35.99rem) {
  .footer-traffic { order: 1; flex-basis: 100%; }
}

@media (min-width: 36rem) {
  .hero-copy { padding-block-end: 3rem; }
  .hero-strip { font-size: .67rem; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .button { min-block-size: 3rem; padding-inline: 1rem; font-size: .9rem; }
}

@media (min-width: 53rem) {
  :root { --header-height: 5.45rem; }
  .brand img { inline-size: 3.5rem; }
  .brand strong { font-size: 1.15rem; }
  .mobile-nav { display: none; }
  .desktop-nav { display: flex; align-items: center; gap: clamp(.8rem, 2.3vw, 2.3rem); }
  .desktop-nav a { display: flex; align-items: center; min-block-size: 2.75rem; text-decoration: none; font-size: .94rem; font-weight: 620; }
  .desktop-nav a:hover { color: var(--accent); }
  .hero { min-block-size: clamp(34rem, 46vw, 40rem); align-items: center; }
  .hero-photo { inset-block-end: 0; inset-inline-start: 29%; }
  .hero-photo img { object-position: 50% 55%; }
  .hero-photo::after {
    background: linear-gradient(90deg, #11100d 0%, #11100dc9 15%, #11100d40 38%, transparent 63%),
      linear-gradient(0deg, #11100da3 0%, transparent 23%);
  }
  .hero-photo figcaption { inset: auto 1.1rem 1.05rem auto; }
  .hero-copy { padding-block: 2.35rem 3.15rem; }
  .hero h1 { font-size: clamp(5.6rem, 10.45vw, 9.45rem); margin-block: .42rem 1.05rem; line-height: .97; }
  .hero-actions { margin-block-start: 1.65rem; }
  .hero-index { display: block; position: absolute; top: 1.05rem; right: 1.25rem; color: #f2dfc8; font-size: .63rem; text-shadow: 0 0 8px #000; }
  .hero-strip { min-block-size: 3.35rem; }
  .hero-strip a { display: inline-flex; }
  .split { grid-template-columns: minmax(0, .93fr) minmax(0, 1fr); align-items: start; }
  .about-copy, .contact-copy { padding-block-start: 2.2rem; }
  .wide-break { display: inline; }
  .section-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .section-head > p { padding-block-end: .3rem; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .channel-band { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .channel-copy { padding-inline-end: 2rem; }
  .channel-art { border-block-start: 0; border-inline-start: 1px solid var(--rule); }
}

@media (prefers-reduced-motion: no-preference) {
  html.has-section-nav { scroll-behavior: smooth; }
  .button { transition: color .16s ease-out, background-color .16s ease-out, border-color .16s ease-out; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .photo-link img { transition: transform .22s ease-out; }
  .photo-link:hover img { transform: scale(1.025); }
}