:root {
  --ink: #171512;
  --cream: #efe8da;
  --red: #a22c1e;
  --gold: #c49b53;
  --line: rgba(239, 232, 218, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }

.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 28px clamp(20px, 5vw, 76px) 72px;
  background:
    radial-gradient(circle at 80% 15%, rgba(162,44,30,.28), transparent 36%),
    linear-gradient(135deg, #0f0e0c, #242019 70%, #191612);
}
.grain { position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 18px; z-index: 2; }
.wordmark { text-decoration: none; font-weight: 900; letter-spacing: .11em; font-size: 15px; }
.wordmark span { color: var(--red); }
.navLink { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; text-underline-offset: 5px; }
.heroCopy { position: relative; z-index: 2; max-width: 980px; padding: clamp(62px, 9vw, 126px) 0 46px; }
.eyebrow, .sectionNo { color: var(--gold); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 700; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; margin: 0; font-weight: 500; }
h1 { font-size: clamp(54px, 9.5vw, 146px); line-height: .84; letter-spacing: -.055em; }
h1 em { color: var(--gold); font-weight: 400; }
.intro { max-width: 610px; margin: 34px 0 0 auto; font-family: Georgia, serif; font-size: clamp(18px, 2vw, 27px); line-height: 1.45; color: #d5caba; }
.photoFrame { position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; border: 1px solid var(--line); background: #0d0c0a; padding: clamp(8px, 1.2vw, 16px); }
.photoFrame img { display: block; width: 100%; max-height: 78vh; object-fit: cover; object-position: center; position: relative; z-index: 2; }
.photoFrame img[src="/band-photo.jpg"] { min-height: 440px; }
.photoFallback { position: absolute; inset: 16px; display: grid; place-content: center; text-align: center; gap: 14px; color: rgba(239,232,218,.5); background: radial-gradient(circle, #312a21, #15120f); letter-spacing: .22em; }
.photoFallback span { font-family: Georgia, serif; font-size: clamp(24px, 5vw, 62px); }
.photoFallback small { text-transform: uppercase; font-size: 10px; }
.photoCaption { display: flex; justify-content: space-between; padding: 14px 4px 0; text-transform: uppercase; letter-spacing: .16em; font-size: 9px; color: #a99e8e; }
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; padding: clamp(80px, 12vw, 180px) clamp(20px, 8vw, 130px); background: var(--cream); color: var(--ink); }
.about h2, .notice h2 { font-size: clamp(44px, 6vw, 88px); line-height: .98; letter-spacing: -.045em; }
.aboutCopy { max-width: 670px; font-family: Georgia, serif; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.45; }
.signature { color: var(--red); font-style: italic; margin-top: 45px; }
.notice { display: grid; grid-template-columns: .25fr 1.75fr; gap: 5vw; padding: clamp(80px, 10vw, 150px) clamp(20px, 8vw, 130px); border-top: 1px solid var(--line); }
.noticeMark { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: Georgia, serif; font-size: 40px; }
.notice > div:last-child { max-width: 850px; }
.notice h2 { max-width: 760px; margin: 15px 0 40px; }
.notice p:not(.eyebrow) { color: #bbb1a2; max-width: 780px; font-size: 15px; line-height: 1.75; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px clamp(20px, 5vw, 76px); border-top: 1px solid var(--line); color: #8e8578; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; }

@media (max-width: 720px) {
  .navLink { display: none; }
  .hero { padding-bottom: 40px; }
  .heroCopy { padding-top: 80px; }
  .intro { margin-left: 0; }
  .photoFrame img[src="/band-photo.jpg"] { min-height: 310px; }
  .photoCaption, footer { flex-direction: column; }
  .about, .notice { grid-template-columns: 1fr; }
  .aboutCopy { font-size: 21px; }
  .noticeMark { width: 56px; height: 56px; font-size: 28px; }
}