@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --gold: #C6942C;
  --gold-hi: #F9DE8B;
  --gold-shadow: #8B5D14;
  --charcoal: #313131;
  --grey: #5a5a5a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--charcoal);
  background: #ffffff;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.hero {
  background: linear-gradient(160deg, #1c1c1c, #313131 60%, #181818);
  color: #fff;
  padding: 5rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  right: -6rem; top: -6rem;
  width: 26rem; height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,148,44,0.4), transparent 70%);
  filter: blur(40px);
}
.wrap { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; margin-bottom: 2.5rem;
}
.brand .sq { color: #fff; }
.brand .cn {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold), var(--gold-shadow));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kicker {
  text-transform: uppercase; letter-spacing: .32em; font-size: .7rem;
  font-weight: 600; color: var(--gold-hi); margin-bottom: 1rem;
}
h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -.01em;
}
.updated { margin-top: 1.25rem; color: rgba(255,255,255,.6); font-size: .9rem; }

.content { max-width: 860px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem; font-weight: 600; color: var(--charcoal);
  margin: 2.75rem 0 .9rem; position: relative; padding-left: 1rem;
}
.content h2::before {
  content: ''; position: absolute; left: 0; top: .35em; bottom: .35em;
  width: 3px; background: var(--gold); border-radius: 2px;
}
.content p, .content li { color: var(--grey); margin-bottom: 1rem; }
.content ul { padding-left: 1.4rem; margin-bottom: 1rem; }
.content li { margin-bottom: .5rem; }
.content a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
strong { color: var(--charcoal); font-weight: 600; }

.back {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 3rem; padding: .85rem 1.6rem;
  border: 1px solid var(--charcoal); border-radius: 999px;
  color: var(--charcoal); text-decoration: none; font-size: .82rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  transition: all .3s;
}
.back:hover { background: var(--charcoal); color: #fff; }

footer.foot {
  background: #0b0b0b; color: rgba(255,255,255,.5);
  text-align: center; padding: 2.5rem 1.5rem; font-size: .85rem;
}