:root{--walnut:#241a15;--cream:#f2e4cf;--muted:#b7a08a;--amber:#e0a44a;--clay:#c9705a}
*{box-sizing:border-box}
body{margin:0;color:var(--cream);background:var(--walnut);font:17px/1.7 "Karla",system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 55% at 22% -5%,rgba(224,164,74,.24) 0%,rgba(36,26,21,0) 60%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--amber);color:var(--walnut);padding:.6rem 1rem;border-radius:0 0 6px 0;text-decoration:none}
.skip:focus{left:0}
main{max-width:52rem;margin:0 auto;padding:clamp(3rem,9vw,6rem) clamp(1.25rem,5vw,3rem) 3rem}
.kicker{margin:0 0 1rem;color:var(--amber);font-size:.95rem}
h1{margin:0;font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(3rem,12vw,6.5rem);line-height:.95;letter-spacing:-.02em}
.lede{max-width:52ch;margin:1.5rem 0 clamp(3rem,8vw,4.5rem);font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:1.3rem;color:var(--muted)}
ul{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;align-items:stretch}
li{display:flex}
li a{display:flex;flex-direction:column;flex:1 1 auto;position:relative;overflow:hidden;padding:clamp(1.5rem,4vw,2rem);border:1px solid rgba(242,228,207,.16);border-radius:2px;text-decoration:none;color:inherit;background:rgba(242,228,207,.03);
  transition:border-color .35s ease,background .35s ease,transform .35s ease,box-shadow .35s ease}
li a::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(60% 90% at 8% 0%,rgba(224,164,74,.18) 0%,rgba(224,164,74,0) 70%)}
li a:hover,li a:focus-visible{border-color:var(--amber);background:rgba(224,164,74,.06);transform:translateY(-3px);box-shadow:0 18px 40px -30px rgba(224,164,74,.75)}
li a:hover::after,li a:focus-visible::after{opacity:1}
li a:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.name{display:block;font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:clamp(1.5rem,3.6vw,1.95rem);line-height:1.2}
.role{display:block;margin-top:.5rem;max-width:48ch;color:var(--muted);font-size:.98rem}
@media(min-width:44rem){ul{grid-template-columns:1fr 1fr}}
.join{margin-top:clamp(3rem,8vw,4.5rem);max-width:56ch}
.join h2{margin:0 0 .9rem;font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:1.6rem;color:var(--amber)}
.join p{margin:0 0 1rem;color:var(--muted)}
.join a{color:var(--clay);font-family:"Newsreader",Georgia,serif;font-size:1.15rem;text-underline-offset:.25em;text-decoration-thickness:1px;transition:color .3s ease,text-decoration-color .3s ease}
.join a:hover{color:var(--amber)}
footer{margin-top:clamp(3rem,8vw,4.5rem);padding-top:1.5rem;border-top:1px solid rgba(242,228,207,.14);max-width:56ch;color:var(--muted);font-size:.9rem}
footer p{margin:0 0 .5rem}

/* ---- the lamp coming on ---- */
@media (prefers-reduced-motion:no-preference){
  body::before{opacity:0;animation:lamp 2.6s .1s cubic-bezier(.3,.7,.4,1) forwards,flicker 11s 2.7s ease-in-out infinite}
  .kicker,h1,.lede,li,.join,footer,#family{animation:lift .9s cubic-bezier(.2,.7,.3,1) both}
  .kicker{animation-delay:.45s}
  h1{animation-delay:.55s}
  .lede{animation-delay:.8s}
  li:nth-child(1){animation-delay:1s}
  li:nth-child(2){animation-delay:1.12s}
  .join{animation-delay:1.3s}
  footer{animation-delay:1.45s}
  @keyframes lamp{from{opacity:0;transform:translate(-6%,-4%) scale(1.15)}to{opacity:1;transform:none}}
  @keyframes flicker{0%,100%{opacity:1}38%{opacity:.9}52%{opacity:.97}71%{opacity:.88}}
  @keyframes lift{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}