/* ============ WE ARE POV — shared stylesheet ============ */
:root{
  --paper:#F5F6F7; --card:#FFFFFF; --sand:#EAE6E0; --ink:#15181C; --muted:#5F666E;
  --line:rgba(21,24,28,.14); --line-soft:rgba(21,24,28,.07);
  --rot:#C30F11; --rot-soft:rgba(195,15,17,.09);
  --dark:#14161A; --dark-ink:#EDEEF0;
  --gut:clamp(18px,4vw,60px); --max:1280px;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101215; --card:#191C20; --sand:#23211D; --ink:#E9EAEC; --muted:#9AA1A9;
    --line:rgba(233,234,236,.17); --line-soft:rgba(233,234,236,.08);
    --rot:#F04446; --rot-soft:rgba(240,68,70,.14);
    --dark:#0A0B0D; --dark-ink:#EDEEF0;
  }
}
:root[data-theme="dark"]{
  --paper:#101215; --card:#191C20; --sand:#23211D; --ink:#E9EAEC; --muted:#9AA1A9;
  --line:rgba(233,234,236,.17); --line-soft:rgba(233,234,236,.08);
  --rot:#F04446; --rot-soft:rgba(240,68,70,.14);
  --dark:#0A0B0D; --dark-ink:#EDEEF0;
}

*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--rot);color:#fff}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.rail{display:grid;grid-template-columns:116px 1fr;gap:0 40px}
@media (max-width:980px){.rail{grid-template-columns:1fr}}

h1,h2,h3{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 112;
  margin:0;line-height:1;letter-spacing:-.018em;text-wrap:balance;text-transform:uppercase}
h1{font-size:clamp(32px,5.2vw,74px);line-height:.98;hyphens:auto;overflow-wrap:break-word}
h2{font-size:clamp(27px,3.9vw,50px)}
h3{font-size:clamp(18px,1.7vw,23px);line-height:1.08}
p{margin:0}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:60ch;color:var(--muted)}
.small{font-size:14.5px;line-height:1.6;color:var(--muted)}
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.lab-rot{color:var(--rot)}
.tick{width:22px;height:1px;background:var(--rot);display:inline-block;vertical-align:middle}

/* ---- header ---- */
header.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.top-in{display:flex;align-items:center;gap:18px;justify-content:space-between;
  max-width:var(--max);margin-inline:auto;padding:11px var(--gut)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:clamp(92px,20vw,126px)}
.brand .lightlogo{display:none}
:root[data-theme="dark"] .brand .darklogo{display:none}
:root[data-theme="dark"] .brand .lightlogo{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .darklogo{display:none}
  :root:not([data-theme="light"]) .brand .lightlogo{display:block}
}
nav.main{display:flex;gap:24px;align-items:center}
nav.main a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--ink);border-color:var(--rot)}
@media (max-width:940px){nav.main{display:none}}
.tools{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:7px 9px;border:0;
  background:transparent;color:var(--muted);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--rot);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 17px;border:0;border-radius:2px;cursor:pointer;
  transition:transform .16s ease,filter .16s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:inherit;border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--rot);color:var(--rot);filter:none}

/* ---- sections ---- */
section{padding-block:clamp(52px,7vw,104px)}
.sec-head{margin-bottom:clamp(28px,3.6vw,48px)}
.sec-head .lab{display:block;margin-bottom:13px}
.sec-head .lede{margin-top:18px}
.rail>.lab{position:sticky;top:80px;align-self:start;padding-top:7px}
@media (max-width:980px){.rail>.lab{position:static;margin-bottom:12px}}
.band-sand{background:var(--sand)}
.band-card{background:var(--card);border-block:1px solid var(--line-soft)}

/* ---- footer ---- */
footer.site{background:var(--dark);color:rgba(237,238,240,.72);padding-block:52px 34px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media (max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site img{width:168px;margin-bottom:16px}
footer.site .lab{color:rgba(237,238,240,.5);margin-bottom:9px;display:block}
footer.site p,footer.site a{font-size:14.5px;line-height:1.75;text-decoration:none;color:rgba(237,238,240,.72)}
footer.site a:hover{color:#fff}
.rule{height:1px;background:rgba(237,238,240,.15);margin:32px 0 16px}
.sig{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,238,240,.45)}

/* ---- motion ---- */
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.25,1)}
  .reveal.in{opacity:1;transform:none}
}
