/* selseh. v12 — shared styles. One idea per page; the thread lives on the home page only. */
:root{
 --butter:#fbe783;--navy:#182839;--cream:#fffdf7;--oat:#f0eacb;--coral:#dc845e;
 --ink-2:rgba(24,40,57,.72);
 --pad:clamp(20px,4vw,56px);
 --sans:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
 --ar:"Aref Ruqaa",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);font-optical-sizing:auto;color:var(--navy);background:var(--butter);
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:6px}

/* top bar — same on every page */
.bar{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;
 gap:16px;padding:clamp(16px,2.4vw,28px) var(--pad);z-index:5}
.logo{font-weight:800;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.05em;text-decoration:none}
.nav{display:flex;gap:clamp(14px,2.4vw,34px);font-size:clamp(15px,1.15vw,17px);font-weight:500}
.nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:currentColor}

/* inner pages */
.page{min-height:100svh;padding:clamp(110px,14vh,170px) var(--pad) clamp(48px,8vh,90px);
 display:flex;flex-direction:column}
/* page titles are for screen readers; the nav already says where you are */
.page h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.foot{margin-top:auto;padding-top:clamp(40px,7vh,80px);display:flex;flex-wrap:wrap;gap:12px 28px;
 align-items:baseline;justify-content:space-between;font-size:clamp(15px,1.15vw,17px)}
.btn{display:inline-block;font:600 clamp(16px,1.3vw,19px)/1 var(--sans);text-decoration:none;
 background:var(--navy);color:var(--butter);padding:.95em 1.4em;border-radius:999px;border:0;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.navy{background:var(--navy);color:var(--butter)}
.navy .btn{background:var(--butter);color:var(--navy)}
.cream{background:var(--cream)}

@media (max-width:620px){
 .nav{gap:14px;font-size:15px}
 .nav .opt{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}