:root {
  --ink: #292019;
  --navy: #173a63;
  --navy-deep: #102a48;
  --rust: #a84729;
  --rust-deep: #77321f;
  --gold: #d99a46;
  --paper: #f7ead9;
  --paper-light: #fff9f1;
  --line: rgba(93, 54, 34, .27);
  --shadow: 0 26px 78px rgba(29, 20, 15, .30);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 5%, rgba(232, 158, 70, .20), transparent 36rem),
    linear-gradient(180deg, #0d2743 0, #35231a 43rem, #d7c1a4 100%);
  font-family: var(--serif);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -5rem;
  padding: .7rem 1rem;
  color: white;
  background: var(--navy);
  border-radius: .25rem;
  font-family: var(--sans);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(255, 246, 230, .76);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* FIRST LIGHT ------------------------------------------------------------- */
.welcome {
  position: relative;
  min-height: clamp(560px, 69vw, 795px);
  overflow: hidden;
  isolation: isolate;
  background: #2d241e;
}

.desert-image,
.dawn-blue,
.dawn-gold,
.horizon-light,
.parchment-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.desert-image {
  z-index: -6;
  background-image: url("assets/southwest-desert.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 46%;
  transform: scale(1.018);
  filter: brightness(.72) saturate(.84) contrast(1.04);
  animation: landscape-awakens 4.2s cubic-bezier(.22, .74, .22, 1) both;
}

.dawn-blue {
  z-index: -5;
  background:
    linear-gradient(180deg, rgba(7, 25, 48, .70) 0%, rgba(23, 50, 77, .43) 37%, rgba(52, 40, 31, .16) 68%, rgba(247, 234, 217, 0) 100%);
  animation: night-recedes 4.2s ease-out both;
}

.dawn-gold {
  z-index: -4;
  background:
    radial-gradient(ellipse at 69% 42%, rgba(255, 194, 91, .46) 0%, rgba(239, 137, 54, .25) 20%, transparent 48%),
    linear-gradient(180deg, rgba(255, 162, 70, .04) 0%, rgba(231, 120, 49, .11) 56%, rgba(249, 225, 188, .10) 78%, transparent 100%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: gold-arrives 4.2s 0.25s ease-out both;
}

.horizon-light {
  z-index: -3;
  top: 31%;
  bottom: auto;
  height: 33%;
  background: radial-gradient(ellipse at 67% 56%, rgba(255, 216, 139, .28), transparent 55%);
  opacity: 0;
  animation: horizon-breathes 4.3s .45s ease-out both;
}

.parchment-fade {
  z-index: -2;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 60%,
      rgba(247, 234, 217, .08) 69%,
      rgba(247, 234, 217, .52) 79%,
      rgba(247, 234, 217, .94) 91%,
      var(--paper) 100%);
}

.identity {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 6.8vw, 96px);
  right: clamp(24px, 6.8vw, 96px);
  bottom: clamp(19px, 3.7vw, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.2vw, 38px);
  opacity: 0;
  transform: translateY(15px);
  animation: identity-arrives 1.45s 2.2s ease-out forwards;
}

.brand-mark {
  width: clamp(112px, 15vw, 170px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 9px rgba(61, 35, 24, .19));
}

.brand-copy { padding-top: .2rem; }

h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.55rem, 6.5vw, 5.35rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.038em;
  text-shadow: 0 1px 0 rgba(255, 251, 240, .88);
}

.tagline {
  margin: .82rem 0 0;
  color: #472f21;
  font-size: clamp(1.05rem, 2.35vw, 1.7rem);
  font-style: italic;
  line-height: 1.24;
  letter-spacing: .014em;
}

main {
  position: relative;
  padding: 5px clamp(22px, 6vw, 88px) 50px;
  background:
    radial-gradient(circle at 79% 0%, rgba(214, 133, 64, .10), transparent 27rem),
    linear-gradient(180deg, var(--paper) 0, #f3e2ce 100%);
}

/* THOUGHT ----------------------------------------------------------------- */
.thought {
  position: relative;
  max-width: 900px;
  margin: 0 auto 38px;
  padding: clamp(31px, 5vw, 52px) clamp(25px, 7vw, 78px) clamp(29px, 4.5vw, 46px);
  text-align: center;
  background:
    radial-gradient(circle at 50% -28%, rgba(224, 155, 69, .14), transparent 22rem),
    linear-gradient(180deg, rgba(255, 251, 242, .95), rgba(248, 234, 216, .93));
  border-top: 1px solid rgba(156, 82, 42, .30);
  border-bottom: 1px solid rgba(156, 82, 42, .30);
  opacity: 0;
  transform: translateY(10px);
  animation: thought-arrives 1.15s 3.25s ease-out forwards;
}

.thought::before,
.thought::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 40px;
  height: 40px;
  opacity: .42;
}

.thought::before {
  left: 18px;
  border-top: 1px solid var(--rust);
  border-left: 1px solid var(--rust);
}

.thought::after {
  right: 18px;
  border-top: 1px solid var(--rust);
  border-right: 1px solid var(--rust);
}

.thought-kicker {
  margin: 0 0 1rem;
  color: var(--rust-deep);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

blockquote {
  margin: 0;
  color: var(--navy-deep);
  font-size: clamp(1.36rem, 2.8vw, 2.12rem);
  font-style: italic;
  line-height: 1.42;
  text-wrap: balance;
  transition: opacity .55s ease, transform .55s ease;
}

blockquote.is-changing {
  opacity: 0;
  transform: translateY(5px);
}

.thought-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 160px;
  margin: 1.5rem auto 0;
}
.thought-rule::before,
.thought-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(137, 62, 32, .52));
}
.thought-rule::after { transform: scaleX(-1); }
.thought-rule span {
  width: 7px;
  height: 7px;
  border: 1px solid var(--rust);
  transform: rotate(45deg);
}

/* ALBUM ------------------------------------------------------------------- */
.album-card {
  position: relative;
  max-width: 890px;
  margin: 0 auto;
  padding: clamp(31px, 5vw, 58px) clamp(25px, 6vw, 72px);
  background:
    linear-gradient(90deg, rgba(141, 74, 42, .022) 1px, transparent 1px),
    linear-gradient(rgba(141, 74, 42, .018) 1px, transparent 1px),
    var(--paper-light);
  background-size: 5px 5px;
  border: 1px solid rgba(120, 68, 39, .24);
  box-shadow: 0 15px 34px rgba(73, 47, 31, .12), inset 0 0 45px rgba(190, 112, 53, .04);
}

.album-card::before,
.album-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164, 77, 42, .48), transparent);
}
.album-card::before { top: 17px; }
.album-card::after { bottom: 17px; }

.album-card p {
  margin: 0 0 1.25em;
  font-size: clamp(1.08rem, 1.55vw, 1.31rem);
}

.album-card p:first-of-type::first-letter {
  float: left;
  margin: .08em .11em 0 0;
  color: var(--rust);
  font-size: 3.25em;
  font-weight: 700;
  line-height: .78;
}

.album-card em { color: #572d20; }
.album-card q { font-style: italic; }
.album-card .closing {
  margin-bottom: 0;
  color: var(--navy);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
}

footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  padding: 22px 24px 28px;
  color: rgba(41, 31, 25, .76);
  background: #ead4ba;
  border-top: 1px solid rgba(90, 50, 31, .22);
  text-align: center;
}
footer p {
  margin: 0;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .045em;
}
footer .domain { color: var(--navy-deep); }

@keyframes landscape-awakens {
  from { filter: brightness(.62) saturate(.68) contrast(1.06); transform: scale(1.03); }
  to { filter: brightness(1) saturate(1.03) contrast(1.01); transform: scale(1.018); }
}
@keyframes night-recedes {
  from { opacity: 1; }
  to { opacity: .10; }
}
@keyframes gold-arrives {
  from { opacity: 0; }
  55% { opacity: .92; }
  to { opacity: .58; }
}
@keyframes horizon-breathes {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.03); }
}
@keyframes identity-arrives {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes thought-arrives {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  body { background: var(--paper); }
  .site-shell {
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
  .welcome { min-height: clamp(510px, 131vw, 680px); }
  .desert-image { background-position: 57% center; }
  .identity {
    left: 18px;
    right: 18px;
    bottom: 18px;
    flex-direction: column;
    gap: 3px;
    text-align: center;
  }
  .brand-mark { width: 104px; }
  h1 { font-size: clamp(2.45rem, 12.2vw, 3.55rem); }
  .tagline { margin-top: .52rem; }
  main { padding: 4px 18px 38px; }
  .thought { margin-bottom: 25px; padding: 34px 24px 31px; }
  .thought::before,
  .thought::after { width: 28px; height: 28px; }
  .album-card { padding: 36px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .desert-image,
  .dawn-blue,
  .dawn-gold,
  .horizon-light,
  .identity,
  .thought {
    animation: none !important;
  }
  .desert-image { filter: brightness(1) saturate(1.03) contrast(1.01); }
  .dawn-blue { opacity: .10; }
  .dawn-gold { opacity: .58; }
  .horizon-light,
  .identity,
  .thought { opacity: 1; transform: none; }
  blockquote { transition: none; }
}