/* Korff — family site shared styles */
:root{
  --field:#efe9dc; --ink:#2a2320; --muted:#6f6355; --line:#d9cfbc;
  --accent:#1e3a5f;               /* navy */
  --display:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --script:"Pinyon Script",cursive;
}
:root[data-theme="dark"]{
  --field:#14110d; --ink:#ebe3d4; --muted:#a99c86; --line:#33291d;
  --accent:#c9a86a;               /* gilt */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --field:#14110d; --ink:#ebe3d4; --muted:#a99c86; --line:#33291d; --accent:#c9a86a;
  }
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden}
body{
  margin:0; background:var(--field); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100%;
  overflow-x:hidden;
  transition:background .6s ease, color .6s ease;
}
a{color:inherit}
main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
     text-align:center; padding:56px 24px 32px}

/* crest — single asset, recoloured by theme via mask */
.crest{
  display:block;
  width:clamp(122px,20vw,180px); aspect-ratio:646/467;
  background-color:var(--accent);
  -webkit-mask:url(falcon-mask.png) center/contain no-repeat;
          mask:url(falcon-mask.png) center/contain no-repeat;
  transition:background-color .6s ease;
}
.crest.sm{width:clamp(84px,15vw,116px)}
.crest-link{display:inline-block; line-height:0}

.word{
  font-family:var(--display); font-weight:440;
  font-size:clamp(54px,13vw,104px); line-height:.92;
  letter-spacing:.15em; text-indent:.15em; margin:14px 0 0;
}
.motto{
  font-family:var(--script); font-size:clamp(28px,6.4vw,44px);
  color:var(--accent); margin:12px 0 0; line-height:1;
  transition:color .6s ease;
}
.rule{width:50px; height:1px; background:var(--accent); opacity:.45; margin:34px auto 0; transition:background-color .6s ease}

/* roll of names */
.roll{display:flex; flex-direction:column; gap:0; margin:32px 0 0; align-items:center}
.name{
  font-family:var(--display); font-weight:360; font-size:clamp(19px,4.2vw,26px);
  letter-spacing:.24em; text-indent:.24em; color:var(--ink);
  padding:8px 6px; text-decoration:none; position:relative; display:inline-block;
}
a.name{color:var(--ink)}
a.name::after{
  content:""; position:absolute; left:14%; right:14%; bottom:4px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .32s ease;
}
a.name:hover{color:var(--accent)}
a.name:hover::after,a.name:focus-visible::after{transform:scaleX(1)}
.name.quiet{color:var(--muted); font-weight:320}

/* subpage (e.g. /alex/) */
.pagetitle{
  font-family:var(--display); font-weight:420; font-size:clamp(38px,8vw,60px);
  letter-spacing:.06em; text-indent:.06em; line-height:1; margin:20px 0 0;
}
.lede{
  font-family:var(--sans); font-size:clamp(14px,3.6vw,16px); letter-spacing:.03em;
  color:var(--muted); margin:16px 0 0; line-height:1.5; max-width:34ch;
}
.links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 0}
.pill{
  font-family:var(--sans); font-size:14px; color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:10px 18px;
  transition:border-color .25s ease, color .25s ease, background-color .25s ease;
}
.pill b{font-weight:500; color:var(--ink)}
.pill .ext{color:var(--accent); font-size:12px}
.pill:hover{border-color:var(--accent); color:var(--ink)}
.backhome{
  font-family:var(--sans); font-size:13px; letter-spacing:.06em; color:var(--muted);
  text-decoration:none; margin:44px 0 0; display:inline-flex; align-items:center; gap:7px;
  transition:color .25s ease;
}
.backhome:hover{color:var(--accent)}

footer{
  text-align:center; padding:22px 24px 30px; color:var(--muted);
  font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}

/* theme toggle */
.toggle{
  position:fixed; top:16px; right:16px; z-index:5;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  display:grid; place-items:center; transition:border-color .25s, color .25s;
}
.toggle:hover{border-color:var(--accent); color:var(--accent)}
.toggle svg{width:17px; height:17px}

a:focus-visible,.toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

@media (max-width:480px){
  main{padding:52px 18px 30px}
  .word{font-size:clamp(42px,11.5vw,104px); letter-spacing:.08em; text-indent:.08em}
  .name{letter-spacing:.18em; text-indent:.18em}
  .pagetitle{font-size:clamp(30px,8.5vw,60px); letter-spacing:.03em; text-indent:.03em}
}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .crest{opacity:0; animation:k-fade 1.1s ease .1s forwards}
  .word,.pagetitle{opacity:0; animation:k-rise 1s ease .5s forwards}
  .motto,.lede{opacity:0; animation:k-rise 1s ease .8s forwards}
  .rule{opacity:0; animation:k-grow 1s ease 1.05s forwards}
  .links{opacity:0; animation:k-rise .9s ease 1s forwards}
  .roll .name{opacity:0; animation:k-rise .8s ease forwards}
  .roll .name:nth-child(1){animation-delay:1.15s}
  .roll .name:nth-child(2){animation-delay:1.25s}
  .roll .name:nth-child(3){animation-delay:1.35s}
  .roll .name:nth-child(4){animation-delay:1.45s}
  .roll .name:nth-child(5){animation-delay:1.55s}
  .roll .name:nth-child(6){animation-delay:1.65s}
  @keyframes k-fade{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}
  @keyframes k-rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  @keyframes k-grow{from{opacity:0; transform:scaleX(.2)} to{opacity:.45; transform:none}}
}