/* Exodus shared design system.
   Palette and type read off Ty's own posters and the real brand assets.
   See 03 Design/(C) Ty's Graphic Style.md. Do not invent colours here. */

:root{
  --paper:#F0E7D6;
  --ink:#3B2318;
  --shadow:#5C2E15;
  --peach:#F0A464;
  --red:#E0473C;
  --gold:#E9B44C;
  --blue:#456682;
  --jeans:#9FCBE8;      /* fills and illustration only, never type: 1.4:1 on paper */
  --paper-dim:#E4D8C2;
  --rule:3px;
  --r-card:14px;
  --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Serif",Georgia,serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--blue)}

/* ---- texture. grain plus halftone, nothing sits clean ---- */
.tex{position:fixed;inset:0;pointer-events:none;z-index:9999}
.tex::before{
  content:"";position:absolute;inset:0;opacity:.26;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");
}
.tex::after{
  content:"";position:absolute;inset:0;opacity:.10;mix-blend-mode:multiply;
  background-image:radial-gradient(var(--ink) 0.6px,transparent 0.7px);
  background-size:4px 4px;
}

/* ---- display type. fat rounded letters with a hard offset shadow ---- */
.display{
  font-family:"Titan One",system-ui,sans-serif;
  font-weight:400;letter-spacing:.01em;line-height:.95;
  text-transform:uppercase;
}
.offset{ text-shadow:5px 5px 0 var(--red); }
.offset-brown{ text-shadow:5px 5px 0 var(--shadow); }
.offset-blue{ text-shadow:5px 5px 0 var(--blue); }
.slab{font-family:"Alfa Slab One",Georgia,serif;font-weight:400}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px}

/* ---- rounded photo cards, floating, sometimes tilted ---- */
.card{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--r-card);
  box-shadow:6px 6px 0 var(--shadow);
  overflow:hidden;
}
.card.tilt-l{transform:rotate(-2.2deg)}
.card.tilt-r{transform:rotate(1.8deg)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Titan One",system-ui,sans-serif;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.02em;
  padding:.85rem 1.6rem;border-radius:var(--r-pill);
  border:2px solid var(--ink);
  background:var(--gold);color:var(--ink);text-decoration:none;
  box-shadow:5px 5px 0 var(--shadow);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);
  cursor:pointer;
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--shadow)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--shadow)}
.btn--red{background:var(--red);color:#FFF6EA}
.btn--paper{background:var(--paper)}
.btn:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;
}

/* ---- rotated stamp ---- */
.stamp{
  display:inline-block;font-family:"IBM Plex Mono",monospace;
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  border:2px solid var(--red);color:var(--red);
  padding:.35rem .7rem;border-radius:6px;transform:rotate(-3deg);
}

/* ---- shared page furniture ---- */
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.rail{height:10px;background:var(--gold);border-bottom:var(--rule) solid var(--ink)}
.backbar{
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:14px 0;border-bottom:var(--rule) solid var(--ink);margin-bottom:2.2rem;
}
.backlink{
  font-family:"IBM Plex Mono",monospace;text-transform:uppercase;
  letter-spacing:.12em;font-size:12px;color:var(--ink);text-decoration:none;
}
.backlink:hover{color:var(--red)}
.foot{
  border-top:var(--rule) solid var(--ink);margin-top:4rem;padding:1.6rem 0 3rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}