:root {
  --bg-deep: #e7e1d7;
  --bg-mid: #eee9e0;
  --bg-low: #e8e2d8;
  --plaster: #ece7de;
  --plaster-light: #f8f5ef;
  --plaster-dark: #c9c2b7;
  --plaster-inset: #ddd6cb;
  --ink: #342f2b;
  --ink-soft: #49443f;
  --ink-faint: #5f5953;
  --clay: #a85f45;
  --clay-deep: #7f402d;
  --clay-soft: rgba(168, 95, 69, .17);
  --violet: #6d667d;
  --text-hi: var(--ink);
  --text-mid: var(--ink-soft);
  --text-lo: var(--ink-faint);
  --gold: var(--clay);
  --gold-soft: var(--clay-soft);
  --glass: var(--plaster);
  --glass-strong: #e5dfd5;
  --glass-border: rgba(255, 255, 255, .55);
  --raised: -13px -13px 24px rgba(255, 255, 255, .9), 13px 13px 26px rgba(143, 132, 119, .28);
  --raised-small: -6px -6px 12px rgba(255, 255, 255, .88), 6px 6px 13px rgba(143, 132, 119, .25);
  --pressed: inset -5px -5px 10px rgba(255, 255, 255, .78), inset 5px 5px 11px rgba(143, 132, 119, .27);
}

html { scroll-padding-top: 24px; }

body {
  color: var(--ink-soft);
  background:
    radial-gradient(circle at 18% 9%, rgba(255,255,255,.82), transparent 28%),
    radial-gradient(circle at 84% 31%, rgba(205,194,181,.32), transparent 32%),
    linear-gradient(145deg, #f0ece4 0%, #e7e0d5 52%, #eee9e1 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(80,65,50,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(118deg, transparent 0 14px, rgba(255,255,255,.08) 14px 15px);
  mix-blend-mode: multiply;
}

h1, h2, h3 { color: var(--ink); letter-spacing: -.025em; }
a { color: var(--clay-deep); }
::selection { background: rgba(168,95,69,.24); color: var(--ink); }

.skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 100;
  transform: translateY(-180%);
  padding: 10px 16px;
  color: var(--ink);
  background: var(--plaster-light);
  border-radius: 12px;
  box-shadow: var(--raised-small);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.shard { filter: blur(2px); opacity: .55; box-shadow: var(--raised); }
.shard.s1 { background: #e7ddd0; }
.shard.s2 { background: #ddd5ca; }
.shard.s3 { background: #e9e4dc; }

section { padding-top: clamp(86px, 10vw, 120px); }
.wrap { max-width: 940px; }

nav.dots {
  right: 24px;
  gap: 17px;
  padding: 16px 12px;
  border-radius: 999px;
  background: var(--plaster);
  box-shadow: var(--raised-small);
}
nav.dots a {
  width: 10px;
  height: 10px;
  background: var(--plaster-dark);
  border: 0;
  box-shadow: inset 1px 1px 3px rgba(90,78,66,.28), 1px 1px 1px rgba(255,255,255,.8);
}
nav.dots a.active {
  background: var(--clay);
  box-shadow: inset 1px 1px 2px rgba(92,45,30,.28), 0 0 0 5px rgba(168,95,69,.12);
}
nav.dots a span {
  color: var(--ink-soft);
  background: var(--plaster);
  border: 0;
  box-shadow: var(--raised-small);
}

.glass {
  background: linear-gradient(145deg, rgba(246,242,235,.55), rgba(226,219,208,.42));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 25px;
  box-shadow: var(--raised);
}

#hero { min-height: 100svh; }
.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 13px;
  color: var(--clay-deep);
  background: var(--plaster);
  border-radius: 999px;
  box-shadow: var(--pressed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#hero h1 {
  font-size: clamp(42px, 7vw, 74px);
  line-height: 1.02;
  max-width: 790px;
  margin-top: 20px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.8);
}
#hero p.lede { color: var(--ink-soft); max-width: 610px; line-height: 1.75; }

.house { gap: 14px; }
.layer {
  margin-bottom: 0;
  border: 1px solid rgba(255,255,255,.58) !important;
  background: var(--plaster) !important;
  box-shadow: var(--raised-small) !important;
}
.layer:hover { transform: translateY(-4px); }
.layer.l2 { width: 94%; }
.layer.l3 { width: 88%; background: #e4ded7 !important; }
.layer .icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--plaster);
  box-shadow: var(--pressed);
}
.layer .txt strong { color: var(--ink); }
.layer .txt span { color: var(--ink-faint); font-weight: 500; }

.sec-title { margin-top: 18px; line-height: 1.15; }
.sec-sub { color: var(--ink-faint); line-height: 1.75; }

.timeline { border-left: 2px solid rgba(130,116,102,.22); }
.tl-item::before {
  color: var(--clay-deep);
  background: var(--plaster);
  border: 0;
  box-shadow: var(--raised-small);
}
.tl-item p, .mech-card p, .fact-card, table.schools td { color: var(--ink-soft); }

.quote-box { color: var(--ink); border-left: 5px solid var(--clay); }
.quote-box span { color: var(--ink-faint); font-weight: 500; }

.mech-card { transition: transform .25s ease, box-shadow .25s ease; }
.mech-card:hover { transform: translateY(-4px); box-shadow: -15px -15px 27px rgba(255,255,255,.9), 15px 15px 29px rgba(143,132,119,.3); }
.mech-card .m-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--clay);
  border-radius: 15px;
  box-shadow: var(--pressed);
}

.flip-card { border-radius: 24px; }
.flip-front, .flip-back { border-radius: 24px; }
.flip-front {
  background: var(--plaster);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--raised);
}
.flip-back {
  color: var(--ink);
  background: #ddd5cc;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--pressed);
}
.flip-front h3 { color: var(--clay-deep); }
.flip-front .tap { color: var(--ink-faint); font-weight: 600; }
.flip-back p { color: var(--ink); }

.accordion-item { border-radius: 22px; }
.acc-head {
  width: 100%;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
}
.acc-head h3 { color: var(--ink); }
.acc-plus {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--clay-deep);
  border-radius: 50%;
  box-shadow: var(--pressed);
}
.acc-body-inner { color: var(--ink-soft); }

.fact-card strong { color: var(--clay-deep); }

table.schools { overflow: hidden; }
table.schools th { color: var(--clay-deep); border-bottom-color: rgba(130,116,102,.22); }
table.schools td { border-bottom-color: rgba(130,116,102,.14); }
table.schools td:first-child { color: var(--ink); }

.tab-btn {
  border: 0;
  color: var(--ink-soft);
  background: var(--plaster);
  box-shadow: var(--raised-small);
  font-family: inherit;
  font-weight: 600;
}
.tab-btn.active {
  color: var(--clay-deep);
  background: var(--plaster);
  box-shadow: var(--pressed);
}
.res-card { color: inherit; transition: transform .2s ease, color .2s ease; }
.res-card:hover { border-color: rgba(255,255,255,.55); transform: translateX(4px); }
.res-card .r-title { color: var(--ink); }
.res-card .r-why { color: var(--ink-faint); font-weight: 500; }
.res-card .r-go { color: var(--clay-deep); }

footer { position: relative; z-index: 1; }
footer p { color: #514b46; font-weight: 500; }

:where(a, button, [role="button"]):focus-visible {
  outline: 3px solid rgba(127,64,45,.48);
  outline-offset: 4px;
}

@media (max-width: 700px) {
  section { padding-left: 22px; padding-right: 22px; }
  #hero { padding-top: 58px; }
  #hero h1 { font-size: clamp(40px, 13vw, 58px); }
  .house { margin-top: 44px; }
  .layer, .layer.l2, .layer.l3 { width: 100%; padding: 19px 18px; }
  .facts-row { gap: 22px; }
  table.schools { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}