/* ==========================================================================
   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); }


/* ---------- burger (mobile only) ---------- */
.burger { display:none; }

/* ---------- 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: full-screen menu, 44px targets ---------- */
@media (max-width:800px) {
  nav {
    position:sticky; top:0;
    flex-wrap:nowrap; align-items:center;
    padding:10px 18px;
    /* no backdrop-filter here: it would create a containing block and trap the
       position:fixed menu panel inside the 64px bar */
    background:var(--ground);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  nav .wordmark { font-size:17px; white-space:nowrap; position:relative; z-index:60; }

  .burger {
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; margin-right:-10px; padding:0 10px;
    background:none; border:none; cursor:pointer;
    position:relative; z-index:60;
  }
  .burger span {
    display:block; height:1.5px; width:100%; background:var(--burg); border-radius:2px;
    transition:transform .22s var(--ease-out-quart), opacity .16s, background .2s;
  }
  /* on the burgundy panel the wordmark has to invert too */
  nav.open .wordmark { color:var(--cream); }
  nav.open .wordmark em { color:rgba(244,246,248,.5); }
  nav.open .burger span { background:var(--cream); }
  nav.open .burger span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  nav.open .burger span:nth-child(2) { opacity:0; }
  nav.open .burger span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

  /* the panel: burgundy takes the whole screen, revealed by a circle from the burger */
  nav .links {
    position:fixed; inset:0; z-index:50; margin:0;
    background:var(--burg);
    display:flex; flex-direction:column; justify-content:center; align-items:stretch;
    padding:0 26px; gap:2px;
    clip-path:circle(0% at calc(100% - 40px) 32px);
    visibility:hidden;
    transition:clip-path .55s var(--ease-out-expo), visibility 0s linear .55s;
  }
  nav.open .links {
    clip-path:circle(150% at calc(100% - 40px) 32px);
    visibility:visible;
    transition:clip-path .55s var(--ease-out-expo), visibility 0s;
  }
  nav .links a {
    font-family:'Gambarino', Baskerville, Georgia, serif;
    font-size:clamp(30px, 9vw, 40px); line-height:1.1;
    text-transform:none; letter-spacing:0;
    color:var(--cream); opacity:.55;
    margin:0; padding:10px 0; min-height:52px;
    display:flex; align-items:center;
    background:none; border:none; border-radius:0;
  }
  nav .links a.on { color:#fff; opacity:1; }
  nav .links a.on::before { display:none; }
  nav .links a.cta {
    font-family:'Erode', Georgia, serif;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
    background:var(--cream); color:var(--burg); opacity:1;
    justify-content:center; padding:16px 0; margin-top:26px;
  }

  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; }
}

/* the menu's Book a call lives in the panel only, never in the desktop bar */
@media (min-width:801px) { nav .links a.cta { display:none; } }

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