/* Morphora — shared brand layer for every static page (home, about, why, install, terms, privacy, share).
   One place for: fonts, palette (light + dark), the logo mark, and the header/footer.
   The app has its own stylesheet but uses the same tokens. */

/* ---------- fonts (self-hosted, Latin subset) ---------- */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/newsreader.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/newsreader-italic.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/hanken-grotesk.woff2) format('woff2')}

/* ---------- palette ---------- */
:root{
  --bg:#ECF2EE; --surface:#F8FBF9; --ink:#10261C; --ink2:#4A5F53; --line:#C9D8CF;
  --leaf:#1F5B3E; --leaf-dim:#2C4335; --brass:#A8752E; --card:#FFFFFF; --ivory:#FAF5EA; --pink:#B23A5C;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* the logo mark: the M and the two books behind it */
  --mk-m:#1F5B3E; --mk-b1:#70947D; --mk-b2:#A7BBA8;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1C15; --surface:#172A20; --ink:#E4F0E8; --ink2:#9DB3A5; --line:#2C4335;
    --leaf:#6FC79A; --leaf-dim:#0F1C15; --brass:#C99A55; --card:#152219; --ivory:#1B281E; --pink:#E07A93;
    --mk-m:#EDEBDD; --mk-b1:#579C79; --mk-b2:#35604A;
  }
}
*{box-sizing:border-box}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}   /* the page container; pages may narrow it with their own rule */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.18;margin:0}

/* ---------- logo mark (uses the #mk sprite symbol that every page includes) ---------- */
.mark{display:block;flex:none;height:var(--mh,52px);width:calc(var(--mh,52px) * 1.133)}

/* ---------- header & footer: always the same width and position, whatever the page's reading column is ---------- */
nav.top,footer{--chrome:min(1032px,100vw - 48px);width:var(--chrome);margin-left:calc(50% - var(--chrome) / 2);margin-right:0}
nav.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:24px}
.brand{--mh:52px;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand span{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink);letter-spacing:.14em;text-transform:uppercase;line-height:1}   /* the wordmark, as on the About page */
.nav-links{display:flex;gap:32px;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);flex:1;justify-content:center}
.nav-links a{text-decoration:none;color:inherit}
.nav-links a:hover{color:var(--ink)}
.nav-acts{display:flex;align-items:center;gap:22px;font-size:15px}
.nav-acts a.cta{background:var(--leaf);color:var(--surface);padding:9px 18px;border-radius:9px;text-decoration:none;font-weight:500;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
.nav-acts a:not(.cta){text-decoration:none;color:var(--ink2);padding:12px 2px}
.nav-acts a:not(.cta):hover{color:var(--ink)}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-acts a:not(.cta){display:none}   /* on phones only the button stays */
  .nav-acts{gap:14px}
}
@media (max-width:520px){
  nav.top{padding:16px 0;gap:12px}
  .brand{--mh:38px;gap:8px;min-width:0}
  .brand span{font-size:17px}
  .nav-acts{gap:12px}
  .nav-acts a.cta{padding:12px 12px;font-size:12px;letter-spacing:.02em;white-space:nowrap}
}
.nav-acts a.cta .short{display:none}
@media (max-width:340px){
  .brand{--mh:30px;gap:6px}
  .brand span{font-size:13px;letter-spacing:.1em}
  .nav-acts a.cta .long{display:none}
  .nav-acts a.cta .short{display:inline}
  .nav-acts a.cta{padding:10px 10px}
}
@media (max-width:380px){
  .brand{--mh:34px}
  .brand span{font-size:15px}
  .nav-acts{gap:10px}
  .nav-acts a.cta{padding:8px 10px;font-size:11.5px}
}


/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 0;margin-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .brand{--mh:34px;gap:10px}
footer .brand span{font-size:17px}
footer nav{display:flex;gap:0 20px;flex-wrap:wrap;font-size:15px}
footer nav a{text-decoration:none;color:var(--ink2);padding:11px 0;display:inline-block}
footer nav a:hover{color:var(--ink)}
footer .copy{color:var(--ink2);font-size:13.5px;margin:0}
.social-links{display:flex;gap:12px}
.social-links a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);text-decoration:none}
.social-links a:hover{color:var(--leaf);border-color:var(--leaf)}

/* ---------- stacked lockup: mark, wordmark, tagline (the About page look) ---------- */
.lockup{display:flex;flex-direction:column;align-items:center;text-align:center}
.lockup .lockup-word{font:500 clamp(28px,6vw,40px)/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--ink)}
.lockup .lockup-tag{margin:12px 0 0;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}