/* The Whiteds — antique gold, oxblood, and black. Shared visual layer only. */
:root{
  --ink:#090807;
  --ivory:#f5ead6;
  --gold:#e6c989;
  --red:#390b14;
  --line:rgba(214,175,102,.32);
  --gold-soft:#ba8f4c;
  --gold-shine:linear-gradient(110deg,#c39851 0%,#f5dfaa 28%,#e6c989 48%,#c79c54 70%,#f0d69d 100%);
}
body{background:var(--ink)}
.site-header{background:#090807;border-bottom-color:rgba(214,175,102,.4)}
.site-wordmark{color:var(--gold)}
.site-nav a[aria-current="page"]{text-decoration-color:var(--gold-soft)}
.family-name{color:var(--gold);letter-spacing:.035em}
.hero{
  min-height:calc(100svh - 110px);
  background:radial-gradient(ellipse at 23% 48%,#57101e 0%,#2c090f 31%,transparent 62%),#090807;
}
.hero:before,.hero:after{
  content:'';position:absolute;z-index:1;inset:22px;pointer-events:none;
  border:1px solid rgba(217,178,104,.68);
}
.hero:after{inset:28px;border-color:rgba(217,178,104,.28)}
.hero-grid{
  z-index:2;min-height:calc(100svh - 110px);
  grid-template-columns:.86fr 1.14fr;gap:clamp(42px,5vw,80px);
  padding-block:88px 125px;
}
.hero-copy{grid-column:2;grid-row:1}
.hero .family-name{margin-bottom:32px}
.hero h1{font-size:clamp(76px,7.5vw,122px);letter-spacing:-.055em;color:var(--gold)}
.hero h1>span{white-space:nowrap}
.hero h1 em{
  position:relative;margin-top:37px;padding-top:29px;
  font-size:.53em;font-style:normal;line-height:1.2;letter-spacing:.025em;
}
.hero h1 em:before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 12%,#f2dca8 47%,transparent 48%,transparent 52%,#f2dca8 53%,var(--gold-soft) 88%,transparent);
}
.hero h1 em:after{
  content:'';position:absolute;left:50%;top:-5px;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:var(--gold-shine);
}
.hero-art{
  grid-column:1;grid-row:1;justify-self:center;width:min(100%,455px);
  transform:none;filter:drop-shadow(0 20px 34px rgba(0,0,0,.28));
}
.hero-art:before,.hero-art:after{content:none}
.crest-window{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}
.crest-image{position:static;width:100%;height:auto;top:auto}
.hero-scroll{bottom:47px;color:var(--gold)}
.hero-scroll:before{background:linear-gradient(90deg,transparent,rgba(214,175,102,.5))}
.hero-orbit{opacity:.38}
.values-intro{background:var(--red);padding-top:88px}
.values-intro .section-title{color:var(--gold)}
.value-chapter{background:radial-gradient(ellipse at 22% 48%,rgba(176,120,39,.055),transparent 65%),var(--surface)}
.value-chapter.oxblood{--surface:var(--red)}
.value-chapter.ivory{--surface:#15100c;--art-color:var(--gold);color:var(--ivory)}
.value-copy h3{color:var(--gold)}
.value-art{filter:drop-shadow(0 0 20px rgba(214,175,102,.13))}
.art-halo{border-color:rgba(214,175,102,.18)}
.ivory .chapter-line{background:var(--line)}
.scripture{border-left-width:1px}
.mission{
  background:radial-gradient(ellipse at 83% 55%,#59111f 0%,transparent 66%),#21090d;
  color:var(--ivory);border-block:1px solid var(--line);
}
.mission .section-title{color:var(--gold)}
.mission-mark{color:var(--gold);opacity:.72}
.mission-phrase{color:#c9bba2}
.mission-phrase+.mission-phrase{border-top-color:var(--line)}
.mission-phrase.is-current{color:#f4dca3}
.vision{background:radial-gradient(ellipse at 50% 86%,#3b0b15 0%,transparent 63%),#090807}
.vision-stage:before{
  content:'';position:absolute;inset:36px 0;border-block:1px solid var(--line);
  pointer-events:none;
}
.vision-word{color:var(--ivory)}
.vision-word:nth-of-type(3){color:var(--gold)}
.vision-orbits{opacity:.8}
.legacy-footer{background:linear-gradient(105deg,#380a13,#18090c);border-top:1px solid var(--line)}
.legacy-link{color:var(--gold)}
/* The same restrained border and palette carry across the family pages. */
.page-hero,.words-hero{
  background:radial-gradient(ellipse at 80% 45%,#470d19 0%,transparent 63%),#090807;
}
.page-hero:before,.words-hero:before{
  content:'';position:absolute;inset:22px;z-index:-1;
  border:1px solid rgba(217,178,104,.55);pointer-events:none;
}
.page-hero:after,.words-hero:after{
  content:'';position:absolute;inset:28px;z-index:-1;width:auto;height:auto;
  border:1px solid rgba(217,178,104,.22);border-radius:0;pointer-events:none;
}
.page-title,.words-title{color:var(--ivory)}
.page-title em,.words-title em{color:var(--gold)}
.words-orbit{opacity:.14}
.search-field input,.search-field select{background:#16110e;border-color:rgba(214,175,102,.45)}
.search-field input:hover,.search-field select:hover{border-color:var(--gold-soft)}
.entry-title{color:var(--ivory)}
.entry-link{text-decoration-color:rgba(214,175,102,.5)}
.entry-link:hover{color:var(--gold)}
.lesson-space{background:linear-gradient(180deg,#1d0c0e,#090807)}
.calendar-year{background:linear-gradient(135deg,#2e1016,#130b0b);border-top-color:var(--gold)}
.calendar-year.is-next{background:#100b09;border-top-color:var(--line)}
.page-footer{background:#0d0908}
@supports (-webkit-background-clip:text){
  .hero h1>span,.hero h1 em,.value-copy h3,.vision-word:nth-of-type(3){
    background-image:var(--gold-shine);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
@media(hover:hover) and (pointer:fine){
  .hero-art:hover{transform:translateY(-4px)}
}
@media(min-width:1800px){.hero-art{width:520px}.hero h1{font-size:138px}}
@media(max-width:1100px){
  .hero-grid{gap:42px;grid-template-columns:.88fr 1.12fr;padding-block:82px 120px}
  .hero-art{width:min(100%,390px)}
  .hero h1{font-size:7.6vw}
}
@media(max-width:760px){
  .hero:before,.page-hero:before,.words-hero:before{inset:12px}
  .hero:after,.page-hero:after,.words-hero:after{inset:17px}
  .hero-grid{min-height:auto;grid-template-columns:1fr;gap:44px;padding-block:64px 99px}
  .hero-copy{grid-column:1;grid-row:1}
  .hero .family-name{margin-bottom:27px;font-size:22px;letter-spacing:.02em}
  .hero h1{font-size:clamp(66px,12vw,90px);letter-spacing:-.055em}
  .hero h1 em{font-size:.58em;letter-spacing:.015em;margin-top:29px;padding-top:24px}
  .hero-art{grid-column:1;grid-row:2;width:min(72vw,350px);transform:none}
  .hero-scroll{bottom:38px;font-size:22px;left:12px;right:12px}
  .values-intro{padding-top:61px}
  .vision-stage:before{inset:24px 0}
}
@media(max-width:360px){.hero h1{font-size:61px}.hero-grid{padding-top:57px}.hero-art{width:72vw}}
@media(max-height:620px) and (min-width:761px){.hero-grid{min-height:650px}.hero-art{width:360px}}
@media(prefers-reduced-motion:reduce){.hero-art:hover{transform:none}}
@media(forced-colors:active){
  .hero h1>span,.hero h1 em,.value-copy h3,.vision-word:nth-of-type(3){background:none;color:CanvasText}
}
