:root {

  --bg:        #F7EAE0;
  --bg-alt:    #F1DFCF;
  --panel:     #3D2B1F;
  --panel-2:   #4B3728;
  --paper:     #FBF3EA;
  --paper-dim: #D9C8B6;
  --ink:       #382B20;
  --muted:     #7A6352;
  --line:      rgba(61, 43, 31, .16);

  --link:       #6A4C93;
  --link-hover: #9B7FC4;

  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px rgba(61, 43, 31, .16);
  --shadow-sm: 0 8px 22px rgba(61, 43, 31, .14);

  --maxw: 1080px;
  --gutter: clamp(1.25rem, 5vw, 2.75rem);

  --font-hero: 'Aboreto', 'Georgia', serif;
  --font-head: 'Abhaya Libre', 'Times New Roman', serif;
  --font-body: 'Abhaya Libre', 'Georgia', serif;
  --font-logo: 'Ingrid Darling', 'Segoe Script', cursive;
  --font-btn:  'Island Moments', 'Segoe Script', cursive;

  --glow-hue: 280deg;
  --spring-duration: 1.1s;
  --spring-easing: linear(0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%, 1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%, 1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%, 0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%, 0.998 84%, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.4rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding-left: 1.2em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; transition: color .25s, transform .25s; }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 3px solid #8C6A4A; outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--panel); color: var(--paper);
  padding: .6rem 1rem; border-radius: var(--radius-sm);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

.page-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.1;
  color: var(--panel);
}

.section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: .02em;
  color: var(--panel);
  display: flex;
  align-items: center;
  gap: .9rem;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.section-kicker {
  display: inline-block;
  font-family: var(--font-btn);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.page {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
}

.panel {
  background: var(--panel);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.diamond {
  display: block;
  width: clamp(38px, 6vw, 60px);
  margin: clamp(1.75rem, 4vw, 3rem) auto;
  opacity: .9;
  transform: rotate(0deg);
}

.panel .section-title { color: var(--paper); }
.panel .muted { color: var(--paper-dim); }

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
}