/* Origenality — the common ground: fonts, tokens, masthead, focus.
   Loaded by every page before its own sheet.
   Romain Girardi, 2026. */

@font-face{
  font-family:"EB Garamond"; src:url("fonts/EBGaramond-VF.subset.woff2") format("woff2-variations");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Literata"; src:url("fonts/literata-var.woff2") format("woff2-variations");
  font-weight:200 900; font-style:normal; font-display:swap;
}

:root{
  --ground:#EFE9DA;
  --ground-lift:#F7F2E6;
  --ground-deep:#E6DECB;
  --ink:#23201B;
  --ink-2:#5A5346;
  --stone:#6A6353;
  --rule:rgba(35,32,27,.15);
  --rule-soft:rgba(35,32,27,.08);
  --accent:#A03620;
  --dark:#26221C;

  /* language of publication — every value at 3:1 or better on the cream */
  --l-eng:#1F5674;
  --l-ger:#A8371F;
  --l-ita:#8A6A12;
  --l-fre:#4F7350;
  --l-spa:#B15A17;
  --l-oth:#78766F;

  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --text:"Literata",Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------------ masthead */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:5;height:60px;
  display:flex;align-items:center;gap:1.2rem;
  padding:0 clamp(1rem,3vw,2.2rem);
  background:rgba(247,242,230,.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule-soft);
}
.wordmark{font-family:var(--serif);font-size:1.28rem;font-weight:500;letter-spacing:.005em;color:var(--ink);
  text-decoration:none;display:flex;align-items:baseline;gap:.5rem;flex:0 0 auto}
.wordmark .mk{color:var(--accent);flex:0 0 auto;align-self:center}
.nav{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.35rem);margin-left:auto}
.nav a{
  font-size:.85rem;color:var(--ink-2);text-decoration:none;padding:.2rem 0;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--accent);border-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.bar .scope{font-size:.79rem;color:var(--ink-2);letter-spacing:.005em;margin:0;flex:0 0 auto}
.bar .scope b{font-weight:600;color:var(--ink)}
@media (max-width:900px){ .bar .scope{display:none} }
@media (max-width:760px){
  .bar{height:54px;gap:.7rem;padding:0 .8rem}
  .wordmark{font-size:1.12rem}
  .nav{gap:.62rem}
  .nav a{font-size:.76rem}
}
@media (max-width:360px){ .wordmark span{display:none} }

/* ------------------------------------------------------------------ focus, skip link */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;left:1rem;z-index:20;background:var(--dark);color:#F4EFE2;
  padding:.6rem 1rem;border-radius:0 0 10px 10px;text-decoration:none;font-size:.85rem;transition:top .2s}
.skip:focus{top:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}