/* JAM OS shared system — extracted from /pitch/ (tokens identical).
   The pitch page stays self-contained; these two must not drift apart
   without a deliberate decision. */
:root{
  --oxblood:#6E1E23; --oxblood-lt:#8a2830;
  --brass:#B08733; --brass-lt:#d4ae5e;
  --paper:#F3EEE4; --paper-2:#EAE3D6;
  --ink:#2A211D; --muted:#8B7E72; --white:#FFFCF7;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure:34rem;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:clamp(1rem,0.96rem+0.2vw,1.08rem);line-height:1.62;overflow-x:clip;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-0.015em;margin:0}
p{margin:0 0 1.1em}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:var(--measure);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 14px;display:block}
section{padding:clamp(72px,10vw,130px) 0}
.sec-title{font-size:clamp(1.9rem,4.6vw,3.1rem);margin-bottom:.5em}
.lede{font-size:clamp(1.05rem,1.9vw,1.25rem);color:var(--ink);opacity:.9}
.muted{color:var(--muted)}
.band{background:var(--paper-2)}
.band-dark{background:var(--ink);color:var(--paper)}
.band-dark .sec-title{color:var(--paper)}
.band-dark .eyebrow{color:var(--brass-lt)}
.band-dark .muted{color:#b6aa9d}

/* reveal-on-scroll — same failsafe as /pitch/: hidden only once JS confirms
   it can reveal. Native scroll-driven branch behind @supports, IO fallback
   in jamos.js (mirrors base.css:488 / base.js:121 pattern). */
.rv{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}
@supports (animation-timeline: view()){
  .st .rv{
    opacity:1;transform:none;transition:none;
    animation-name:jamos-rv-in;animation-duration:auto;
    animation-timing-function:linear;animation-fill-mode:both;
    animation-timeline:view();animation-range:entry 0% cover 24%;
  }
  .st .rv.d1{animation-range:entry 0% cover 30%}
  .st .rv.d2{animation-range:entry 0% cover 36%}
  .st .rv.d3{animation-range:entry 0% cover 42%}
  .st .rv.d4{animation-range:entry 0% cover 48%}
  .st .rv.d5{animation-range:entry 0% cover 54%}
}
@keyframes jamos-rv-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* skip link — visually hidden until focus, mirrors base.css's .skip-link pattern */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:300;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--oxblood);color:var(--paper);
  padding:.85em 1.2em;border-radius:100px;
  transform:translateY(calc(-100% - 24px));
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}
/* the jump target must not draw a ring just because we moved focus to it */
main:focus{outline:none}

/* nav — calm chrome, sticky, paper scrim */
.jnav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px 24px;background:color-mix(in oklab,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(42,33,29,.1);
}
.jnav .mark{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--oxblood);text-decoration:none;letter-spacing:-.02em}
.jnav .links{display:flex;align-items:center;gap:22px;font-size:.9rem}
.jnav .links a{text-decoration:none;color:var(--ink);opacity:.85;transition:opacity .2s}
.jnav .links a:hover{opacity:1}
.jnav .links a.go{
  background:var(--oxblood);color:var(--paper);padding:9px 18px;border-radius:4px;
  opacity:1;transition:background .2s;
}
.jnav .links a.go:hover{background:var(--oxblood-lt)}
@media (max-width:640px){.jnav .links{gap:14px;font-size:.82rem}.jnav .links a.hide-sm{display:none}}

/* panels / rule / guards — copied from /pitch/ */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:52px}
.panel{background:var(--white);border:1px solid rgba(42,33,29,.1);border-radius:6px;padding:26px 24px;position:relative;overflow:hidden}
.panel .num{font-family:var(--serif);font-size:3.4rem;color:var(--paper-2);position:absolute;top:-6px;right:14px;line-height:1;font-weight:700}
.panel h3{font-size:1.3rem;color:var(--oxblood);margin-bottom:.4em;position:relative}
.panel p{font-size:.94rem;margin:0;color:var(--ink);opacity:.88;position:relative}
.rule{margin-top:44px;border:1px solid var(--oxblood);border-radius:6px;padding:24px 26px;background:rgba(110,30,35,.04)}
.rule h3{font-size:1.25rem;color:var(--oxblood);margin-bottom:.35em}
.rule p{margin:0;font-size:.96rem}
.guards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:48px}
.guard{border:1px solid rgba(243,238,228,.16);border-radius:6px;padding:22px 22px 20px;background:rgba(243,238,228,.04)}
.guard .mark{font-family:var(--mono);font-size:.95rem;color:var(--brass-lt)}
.guard h3{font-size:1.05rem;margin:10px 0 8px;color:var(--paper)}
.guard p{font-size:.9rem;margin:0;color:#b6aa9d}

/* CTA button + footer */
.cta{
  display:inline-block;margin-top:26px;background:var(--oxblood);color:var(--paper);
  font-size:.95rem;font-weight:500;letter-spacing:.01em;text-decoration:none;
  padding:15px 34px;border-radius:4px;transition:background .2s,transform .2s;
}
.cta:hover{background:var(--oxblood-lt);transform:translateY(-1px)}
.jfoot{padding:40px 24px 60px;text-align:center;font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.06em}
.jfoot a{color:var(--muted);text-decoration:none;border-bottom:1px dashed rgba(139,126,114,.5)}
.jfoot a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.js .rv,.st .rv{opacity:1;transform:none;transition:none;animation:none}
  .hero-loop{display:none}
  *{transition-duration:.01ms !important}
}