/* ===== shared.css — misty rain design system ===== */
/* fonts, palette, reset — single source of truth      */

/* ---------- @font-face ---------- */
@font-face{font-family:'Compagnon';src:url('../fonts/Compagnon-Roman.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Compagnon';src:url('../fonts/Compagnon-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Compagnon';src:url('../fonts/Compagnon-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Compagnon';src:url('../fonts/Compagnon-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Compagnon';src:url('../fonts/Compagnon-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IMFellSC';src:url('../fonts/IMFellEnglishSC-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'OldNewspaper';src:url('../fonts/OldNewspaperTypes.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ---------- design tokens ---------- */
:root{
  /* misty rain palette */
  --paper:#F3F2EF;
  --paper-2:#ECEAE5;
  --ink:#26272C;
  --muted:#63646A;
  --peach:#E3DAD0;
  --rose:#DCD1D6;
  --lavender:#D3D5E0;
  --sky:#D2DBE1;
  --butter:#E6E1D3;
  --violet:#5A6880;
  --line:rgba(38,39,44,.12);
  /* type stacks */
  --serif:'Compagnon',serif;
  --display:'IMFellSC',serif;
  --stamp:'OldNewspaper',serif;
  --sans:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

/* ---------- reset & base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  text-wrap:pretty;
}
h1,h2,h3,h4{text-wrap:balance}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- shared nav ---------- */
.back{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--muted);
  font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:2.4rem 4vw;transition:color .3s;
}
.back:hover{color:var(--ink)}