/* ==========================================================================
   krikordikranian.com — shared chrome
   Tokens, reset, nav, footer, buttons, focus states, mobile nav, motion prefs.
   Page-specific CSS stays in each page's inline <style>, which loads after
   this file and therefore wins.
   ========================================================================== */

:root {
  /* canonical palette */
  --ground:#f7f7f5;          /* page background */
  --ink:#1d2126;             /* body text */
  --mut:#5b626c;             /* secondary text (5.7:1 on ground) */
  --line:#e1e3e5;            /* hairlines */
  --burg:#7a2717;            /* the accent: type, rules, pills */
  --burg-deep:#5e1d10;       /* accent, pressed/hover */
  --cream:#f4f6f8;           /* type on burgundy (9.1:1) */

  /* aliases kept so existing page CSS keeps resolving */
  --paper:var(--ground);
  --ox:var(--burg);
  --oxdeep:var(--burg-deep);
  --accent:var(--burg);
  --creammut:#cfd8e0;

  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:var(--ground);
  color:var(--ink);
  font-family:'Erode', Baskerville, Georgia, serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---------- nav ---------- */
nav {
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 48px;
  background:rgba(247,247,245,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav .wordmark { font-size:19px; color:var(--burg); text-decoration:none;
                text-transform:none; letter-spacing:normal; margin-left:0; }
nav .wordmark em { font-style:italic; color:var(--ink); }

/* both selectors: the home page marks up its links bare, the others wrap them */
nav a:not(.wordmark),
nav .links a {
  font-family:'Erode', Georgia, serif;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mut); text-decoration:none; margin-left:22px;
}
nav .links a { padding:9px 16px; border-radius:100px; margin-left:6px; }
nav .links a.on { background:var(--burg); color:var(--cream); }
nav a:not(.wordmark):hover, nav .links a:hover:not(.on) { color:var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display:inline-block; border:none; cursor:pointer;
  background:var(--burg); color:var(--cream);
  padding:16px 32px; text-decoration:none;
  font-family:'Erode', Georgia, serif; font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  transition:transform .18s var(--ease-out-expo), background .18s;
}
.btn:hover { transform:translateY(-2px); background:var(--burg-deep); }
.btn:active { transform:translateY(0) scale(.98); }
.btn.ghost { background:none; color:var(--burg); border:1px solid var(--burg); }
.btn.ghost:hover { background:none; color:var(--burg-deep); border-color:var(--burg-deep); }

/* ---------- footer ---------- */
body > footer {
  border-top:1px solid var(--line);
  padding:26px 48px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13px; color:var(--mut);
}
body > footer .fl { display:inline; }
body > footer .fl a { color:var(--burg); text-decoration:none; margin-left:20px; }
body > footer .fl a:hover { color:var(--burg-deep); }
body > footer .fbtn {
  background:var(--burg); color:var(--cream) !important;
  padding:11px 20px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500; transition:background .18s;
}
body > footer .fbtn:hover { background:var(--burg-deep); }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible { outline:2px solid var(--burg); outline-offset:3px; }

/* ---------- compact chrome: two-row nav, 44px targets ---------- */
@media (max-width:800px) {
  nav {
    position:sticky;
    flex-wrap:wrap; row-gap:2px;
    padding:10px 20px 6px; align-items:flex-start;
  }
  nav .wordmark { flex:1 0 100%; font-size:17px; white-space:nowrap; }
  nav .links { flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; margin-left:-10px; }
  nav a:not(.wordmark), nav .links a {
    margin-left:0; font-size:11.5px; letter-spacing:.06em; position:relative; z-index:0;
    min-height:44px; display:inline-flex; align-items:center; padding:0 12px;
  }
  /* keep the 44px hit area, but paint a pill sized to the text */
  nav .links a.on { background:none; color:var(--cream); }
  nav .links a.on::before {
    content:''; position:absolute; left:0; right:0; top:50%; height:28px;
    transform:translateY(-50%); border-radius:100px; background:var(--burg); z-index:-1;
  }
  body > footer { flex-direction:column; align-items:flex-start; gap:4px; padding:20px 20px 26px; }
  body > footer .fl { display:flex; flex-wrap:wrap; margin-left:-10px; }
  body > footer .fl a { margin-left:0; min-height:44px; display:inline-flex; align-items:center; padding:0 10px; }
  body > footer .fl a.fbtn { min-height:44px; padding:0 18px; margin:6px 0 0 10px; }
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
  }
}