/* ===========================================================
   SOA MEDIA — app surfaces (brief studio + admin)
   Near-black, chrome-white type, one teal lens accent (#35b491).
   All type = Jost (self-hosted), Futura on Apple as fallback.
   Token NAMES mirror the Sleepy Panda app system so the ported
   views stay readable side by side; the VALUES are SOA's.
   (Note: here --ink is the BACKGROUND, unlike index.html.)
   =========================================================== */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/jost-var.woff2') format('woff2')}

:root{
  --ink:#0a0a0b;
  --ink-2:#0e0f11;
  --panel:#141518;
  --panel-2:#17181c;
  --line:#26272b;
  --line-2:#1c1d20;
  --line-gold:rgba(242,241,238,.16);

  /* primary accent = the lens teal */
  --lav:#5ccaa8;
  --lav-bright:#35b491;
  --lav-deep:#1e6b57;
  --lav-glow:rgba(53,180,145,.12);

  /* secondary accent = chrome */
  --gold:#f2f1ee;
  --gold-soft:#b9b8b3;
  --gold-glow:rgba(242,241,238,.07);

  --paper:#f2f1ee;
  --dim:#9b9a96;
  --dimmer:#6d6c69;

  --sans:'Jost','Futura','Century Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:300;line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--lav-bright);color:#04120d}
[hidden]{display:none !important}
input,textarea,select,button{font-family:var(--sans)}

.display,h1,h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:-.01em;line-height:1.08}
.lav{color:var(--lav)}
.muted{color:var(--dim)}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;color:var(--dim)}
.kicker::before{content:'';width:30px;height:1px;background:var(--lav-bright)}

/* SOA logo — the studio's real mark (assets/img/soa-logo-white.png), sized by height where used */
.logo{display:block;width:auto;max-width:100%;user-select:none;-webkit-user-drag:none}

/* buttons — SOA's squared, tracked-caps language */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer;
  padding:.85rem 1.5rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  border:1px solid rgba(242,241,238,.35);border-radius:2px;background:transparent;color:var(--paper);
  transition:transform .2s var(--ease),border-color .25s,color .25s,background .25s;white-space:nowrap}
.btn:hover{border-color:var(--lav-bright);color:var(--lav)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default}
.btn-gold,.btn.solid{background:var(--paper);color:#0c0c0d;border-color:var(--paper);font-weight:600}
.btn-gold:hover,.btn.solid:hover{background:var(--lav-bright);border-color:var(--lav-bright);color:#04120d}
.btn-lav{background:var(--lav-bright);border-color:var(--lav-bright);color:#04120d;font-weight:600}
.btn-lav:hover{background:var(--lav);border-color:var(--lav);color:#04120d}
.btn-ghost{background:rgba(255,255,255,.02)}
.btn-lg{padding:1rem 1.8rem;font-size:.78rem}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--lav-bright);outline-offset:3px}

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