:root{
  --ink:#14142B; --paper:#FFF8EE; --ground:#FFF8EE; --fg:#14142B;
  --acc:#14142B; --acc-on:#FFF8EE; --acc-safe:#14142B;
  --display:"Unbounded", Heebo, sans-serif; --body:"Manrope", Heebo, sans-serif;
  --gut:clamp(16px, 3.4vw, 56px);
}
body{background:var(--ground); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.45; overflow-x:clip}
.wrap{padding-inline:var(--gut)}
/* LifePathQuest: what every page shares. Page files add their own layout. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
/* nav */
.nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px}
.nav a{color:var(--fg); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; position:relative}
.logo{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.01em; transition:letter-spacing .3s ease}
.links{display:flex; gap:clamp(16px,2.4vw,40px)}
.links a{font-weight:700; font-size:15px}
.links a::after{content:""; position:absolute; left:0; right:0; bottom:9px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.nav a:active{opacity:.7}
a:focus-visible, button:focus-visible{outline:3px solid var(--acc-safe); outline-offset:4px; border-radius:6px}
@media (hover:hover){
  .links a:hover::after{transform:scaleX(1)}
  .logo:hover{letter-spacing:.01em}
}

/* footer */
.foot{display:grid; justify-items:start; background:#FFF8EE; color:#14142B; border-top:1px solid color-mix(in srgb, #14142B 14%, transparent); padding:clamp(24px,3vw,40px) var(--gut) clamp(12px,1.5vw,20px)}
.foot-row{justify-self:stretch; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 32px}
.foot a{color:var(--fg); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; position:relative; font-weight:700; font-size:15px}
.foot .links a::after{content:""; position:absolute; left:0; right:0; bottom:9px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.credit{text-decoration:underline !important; text-underline-offset:5px; text-decoration-color:var(--acc-safe) !important; text-decoration-thickness:2px !important}
.wordmark{margin-top:clamp(20px,3vw,48px); font-family:var(--display) !important; font-weight:800 !important; font-size:clamp(20px, 4.7vw, 48px) !important; letter-spacing:-.04em; line-height:1; color:var(--acc-safe) !important; transition:letter-spacing .3s ease}
.foot a:active{opacity:.7}
@media (hover:hover){
  .foot .links a:hover::after{transform:scaleX(1)}
  .credit:hover{text-decoration-thickness:3px}
  .wordmark:hover{letter-spacing:-.02em}
}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }
@media (max-width: 860px){
  .nav{height:60px}
  .logo{font-size:16px}
  .links{gap:16px}
  .links a{font-size:14px; white-space:nowrap}
  .foot-row{flex-direction:column; align-items:flex-start}
}
/* the sister sites: a second, quieter row, apart from this site's own links */
.sisters{justify-self:stretch; display:flex; flex-wrap:wrap; gap:0 28px; margin-top:6px; border-top:1px solid color-mix(in srgb, #14142B 10%, transparent); padding-top:6px}
.foot .sisters a{font-weight:600; font-size:14px}
.foot .sisters a::after{content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ .foot .sisters a:hover::after{transform:scaleX(1)} }
@media (max-width: 420px){ .logo{font-size:14px} .links{gap:14px} }
/* below 390px the logo and both links no longer fit on one line, so the links wrap under the logo */
@media (max-width: 389px){ .nav{height:auto; flex-wrap:wrap; row-gap:0; padding-block:8px} }
/* not found */
.nf{min-height:calc(100svh - 76px - 180px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:32px; padding-block:64px}
.nf h1{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(34px, 5vw, 72px); letter-spacing:-.025em; line-height:1}
.nf .blocks{display:flex; gap:12px}
.nf .blocks span{width:clamp(64px,8vw,104px); height:clamp(64px,8vw,104px); border-radius:20%; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,46px)}
.nf a{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 24px; border:2px solid var(--acc-safe); border-radius:999px; color:var(--fg); text-decoration:none; font-weight:800; transition:transform .18s ease}
.nf a svg{width:18px; height:18px; transition:transform .25s cubic-bezier(.2,.7,.2,1)} .nf a svg *{stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){ .nf a:hover{background:var(--acc); border-color:var(--acc); color:var(--acc-on)} .nf a:hover svg{transform:translateX(-4px)} }
.nf a:active{transform:scale(.97)}