/* Outlier Creative Co. — shared subpage styles.
   Tokens mirror index.html exactly. */
:root{
  --fog:#EAECE8;--paper:#F3F4F1;--granite:#151916;--granite-soft:#2A302C;
  --spruce:#1E3D2F;--spruce-hi:#2C5A44;--signal:#E4B23C;
  --line:rgba(21,25,22,.14);--ink-70:rgba(21,25,22,.86);--ink-45:rgba(21,25,22,.72);
  --step--1:clamp(.78rem,.74rem + .2vw,.9rem);
  --step-0:clamp(1rem,.95rem + .28vw,1.18rem);
  --step-1:clamp(1.28rem,1.15rem + .6vw,1.7rem);
  --step-2:clamp(1.7rem,1.4rem + 1.4vw,2.6rem);
  --step-3:clamp(2.3rem,1.7rem + 3vw,4.2rem);
  --ease:cubic-bezier(.19,1,.22,1);
  --gutter:clamp(1.25rem,5vw,7rem);
  color-scheme:only light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#EAECE8}
body{background:var(--fog);color:var(--granite);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);line-height:1.5;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh}
::selection{background:var(--signal);color:var(--granite)}
a{color:inherit;text-decoration:none}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter);width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--spruce);outline-offset:3px;border-radius:2px}
.eyebrow{font-family:"Space Mono",monospace;font-weight:700;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(234,236,232,.88);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.05rem}
.brand{display:flex;align-items:baseline;gap:.45rem}
.brand .bw{font-weight:900;letter-spacing:-.03em;font-size:1.06rem}
.brand .star{color:var(--signal)}
.brand .bco{font-family:"Space Mono",monospace;font-weight:700;font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2.4rem);align-items:center}
.nav-links .lk{font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.1em;
  color:var(--ink-45);transition:color .2s var(--ease);display:none}
.nav-links .lk:hover{color:var(--granite)}
@media(min-width:860px){.nav-links .lk{display:inline}}
.nav-cta{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.08em;
  background:var(--spruce);color:var(--paper);padding:.62rem 1.05rem;border-radius:6px;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.nav-cta:hover{background:var(--spruce-hi);transform:translateY(-1px)}

/* page shell */
main{flex:1;padding-block:clamp(3.2rem,7vw,6rem) clamp(4rem,8vw,7rem)}
.stage-tag{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem}
.stage-tag .num{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.12em;
  background:var(--granite);color:var(--fog);padding:.28rem .5rem;border-radius:5px}
.stage-tag .lbl{font-family:"Space Mono",monospace;font-weight:700;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
h1{font-size:var(--step-3);line-height:1.03;letter-spacing:-.035em;font-weight:800;max-width:18ch}
h1 .star{color:var(--signal)}
.lede{margin-top:1.5rem;max-width:62ch;font-size:var(--step-1);line-height:1.42;
  letter-spacing:-.02em;color:var(--ink-70)}
.narrow{max-width:74ch}

/* prose (legal pages) */
.prose h2{font-size:var(--step-1);letter-spacing:-.025em;font-weight:800;
  margin-top:3rem;margin-bottom:.7rem}
.prose h3{font-size:var(--step-0);font-weight:700;margin-top:1.7rem;margin-bottom:.4rem}
.prose p,.prose li{color:var(--ink-70);margin-bottom:.85rem}
.prose ul{padding-left:1.15rem;margin-bottom:.85rem}
.prose li{margin-bottom:.4rem}
.prose a{border-bottom:1px solid var(--line)}
.prose a:hover{border-color:var(--spruce)}
.updated{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45);margin-top:1.6rem}

/* card grid */
.cards{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(2.6rem,5vw,4rem);
  border:1px solid var(--line);background:var(--paper)}
@media(min-width:820px){.cards{grid-template-columns:1fr 1fr}}
.cards a{padding:clamp(1.6rem,3vw,2.3rem);display:block;transition:background .2s var(--ease)}
.cards a:hover{background:var(--fog)}
@media(min-width:820px){.cards a+a{border-left:1px solid var(--line)}}
@media(max-width:819px){.cards a+a{border-top:1px solid var(--line)}}
.cards .k{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45)}
.cards .t{font-size:var(--step-1);font-weight:800;letter-spacing:-.028em;margin-top:.7rem;
  display:flex;align-items:center;gap:.5rem}
.cards .t .arw{color:var(--signal);transition:transform .2s var(--ease)}
.cards a:hover .arw{transform:translateX(5px)}
.cards .d{margin-top:.45rem;color:var(--ink-45);font-size:var(--step--1);line-height:1.5}

/* footer */
footer{border-top:1px solid var(--line);padding-block:clamp(2.6rem,5vw,4rem) 2rem}
.foot{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media(min-width:820px){.foot{grid-template-columns:2fr 1fr 1fr}}
.foot .tag{margin-top:.9rem;max-width:44ch;color:var(--ink-45);font-size:var(--step--1);line-height:1.55}
.foot h4{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);font-weight:700;margin-bottom:.9rem}
.foot ul{list-style:none}
.foot li{margin-bottom:.5rem;font-size:var(--step--1)}
.foot li a{color:var(--ink-70)}
.foot li a:hover{color:var(--granite)}
.foot-btm{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:1.4rem;border-top:1px solid var(--line);
  font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45)}

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