/* OPPOS — Phase 1 site. Full-bleed editorial. Typography-led, no product imagery.
   Colors are the twelve defined values from the OPPOS Brand System (2026). */
:root{
  --black:#0c0c0c; --off-black:#141414; --mid:#1e1e1e; --iron:#2e2e2e;
  --atlantic:#1a2744; --bermuda:#264d2e; --dusk:#3d1f35; --dune:#c8b89a;
  --cream:#f5f0e8; --cream-alt:#e8dcc8; --gold:#c9a465; --gold-dark:#a07d40;
  --ink:var(--black); --panel:var(--off-black); --line:var(--iron);
  --gold-dim:var(--gold-dark); --muted:#8f8a83;
  --f:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --max:1720px;
  --text:900px;   /* single text column — headlines and prose share it */
  --gut:clamp(22px,4.5vw,86px);
  --split:clamp(26px,5vw,104px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font-family:var(--f);
  -webkit-font-smoothing:antialiased;line-height:1.6;font-size:17px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);width:100%}

/* NAV — full bleed bar */
header.nav{position:sticky;top:0;z-index:60;background:rgba(12,12,12,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center}
.brand img{height:20px;width:auto;display:block}
.links{display:flex;gap:clamp(16px,2vw,34px);align-items:center}
.links a{font-size:13px;color:var(--muted);letter-spacing:.4px;transition:color .15s;white-space:nowrap}
.links a:hover,.links a.on{color:var(--cream)}
.navcta{border:1px solid var(--gold);color:var(--gold);padding:9px 20px;border-radius:2px;
  font-size:12px;letter-spacing:1.6px;font-weight:700;transition:.15s;white-space:nowrap}
.navcta:hover{background:var(--gold);color:#0c0c0c}
.navright{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px)}

/* HERO — tall, full bleed, bottom-weighted */
.hero{border-bottom:1px solid var(--line);padding:clamp(48px,6vw,88px) 0 clamp(34px,3.6vw,56px)}
.hero .kick{color:var(--gold);letter-spacing:5px;font-size:clamp(10px,.9vw,12px);font-weight:700;margin-bottom:clamp(16px,1.8vw,26px)}
.hero h1{font-size:clamp(42px,6.6vw,96px);line-height:.98;font-weight:700;letter-spacing:-.032em;
  max-width:var(--text);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold)}
.rule{width:clamp(56px,5vw,90px);height:2px;background:var(--gold);margin:clamp(18px,2vw,30px) 0}
.hero .sub{color:var(--cream-alt);font-size:clamp(17px,1.35vw,21px);max-width:var(--text);
  line-height:1.5;text-wrap:pretty}

/* SECTION — editorial split, full-bleed bands */
section{padding:clamp(44px,4.6vw,80px) 0;border-bottom:1px solid var(--line)}
section.alt{background:var(--panel)}
section > .wrap{display:block}
.eyebrow{color:var(--gold);letter-spacing:3px;font-size:11px;font-weight:700;
  line-height:1.7;margin-bottom:clamp(11px,1.1vw,16px)}
h2{font-size:clamp(27px,3.3vw,50px);line-height:1.06;font-weight:700;letter-spacing:-.026em;
  max-width:var(--text);text-wrap:balance}
h2 em{font-style:normal;color:var(--gold)}
h3{font-size:14px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase}
p{color:#CFC9C1;max-width:var(--text);margin-top:clamp(13px,1.2vw,20px);font-size:clamp(16px,1.05vw,18px);
  line-height:1.66;text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
/* short supporting text stays ragged — justification needs a long measure */
p.lede,.tnote,.fineprint,.block p,.post p,.imgslot span,.hero .sub{text-align:left;hyphens:none}
p.lede{font-size:clamp(19px,1.55vw,24px);color:var(--cream);max-width:var(--text);line-height:1.45;text-wrap:pretty}
.arrow{display:inline-block;margin-top:clamp(15px,1.6vw,24px);color:var(--gold);
  border-bottom:1px solid var(--gold-dim);padding-bottom:3px;font-size:clamp(14px,1.1vw,17px)}
.arrow:hover{border-bottom-color:var(--gold)}

/* PROSE PAGES — same split, no eyebrow */
.prose{padding:clamp(38px,4vw,66px) 0 clamp(44px,4.6vw,78px)}
.prose .sec{margin-top:clamp(30px,3.2vw,50px);padding-top:clamp(20px,2.2vw,32px);
  border-top:1px solid var(--line)}
.prose .sec:first-child{border-top:none;padding-top:0;margin-top:0}
.prose .sec h3{color:var(--gold);line-height:1.7;margin-bottom:clamp(10px,1vw,15px)}
.prose .sec p:first-of-type{margin-top:0}

/* PULL QUOTE — full bleed statement */
.pullquote{font-size:clamp(23px,2.9vw,42px);line-height:1.14;
  font-weight:700;letter-spacing:-.024em;color:var(--cream);max-width:var(--text);
  margin:clamp(32px,3.6vw,58px) 0;padding-left:clamp(14px,1.6vw,24px);
  border-left:3px solid var(--gold);text-wrap:balance}

/* REAL MEDIA — edge to edge */
.herovid,.media{width:100%;display:block;border-radius:2px;background:var(--mid)}
.herovid{height:clamp(230px,30vw,420px);object-fit:cover;margin-top:clamp(28px,3vw,48px)}
.media{height:clamp(200px,26vw,380px);object-fit:cover;margin:clamp(28px,3vw,48px) 0}
.mediapair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,22px);
  margin:clamp(28px,3vw,48px) 0}
.mediapair img{width:100%;height:clamp(280px,34vw,520px);object-fit:cover;display:block;
  border-radius:2px;background:var(--mid)}
.media-inset{max-width:var(--text);height:auto;object-fit:contain;margin:clamp(24px,2.6vw,40px) 0 0}
.cap{font-size:12px;color:var(--muted);letter-spacing:.4px;margin-top:10px;text-align:left}

/* IMAGE SLOTS — edge to edge */
.imgslot{border:1px dashed #2E2E2E;background:
  repeating-linear-gradient(45deg,#0E0E0E,#0E0E0E 10px,#111 10px,#111 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#4A4A4A;font-size:12px;letter-spacing:1.5px;text-align:center;padding:26px;gap:8px}
.imgslot b{color:#6E6E6E;font-size:12px;letter-spacing:2.4px}
.imgslot span{font-size:11px;letter-spacing:.4px;color:#3E3E3E;max-width:52ch;line-height:1.6}
.slot-hero{height:clamp(230px,32vw,440px);margin-top:clamp(28px,3vw,48px)}
.slot-wide{height:clamp(150px,17vw,250px);margin:clamp(28px,3vw,48px) 0}

/* GRIDS */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,36px);
  margin-top:clamp(26px,2.8vw,44px)}
.block{border-top:1px solid var(--line);padding-top:clamp(16px,1.8vw,26px)}
.block h3{color:var(--cream);margin-bottom:10px}
.block p{margin-top:0;font-size:clamp(14px,1vw,16px);color:var(--muted);text-wrap:pretty}

/* STATS — full width */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,34px);
  margin-top:clamp(26px,2.8vw,44px)}
.stat{border-top:2px solid var(--gold);padding-top:clamp(14px,1.6vw,24px)}
.stat .n{font-size:clamp(28px,3.6vw,56px);font-weight:700;letter-spacing:-.032em;line-height:.98}
.stat .l{color:var(--muted);font-size:clamp(10px,.85vw,12px);letter-spacing:2.4px;
  text-transform:uppercase;margin-top:clamp(8px,1vw,14px)}

/* COLORWAYS — full width */
.ways{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(9px,1.1vw,18px);
  margin-top:clamp(26px,2.8vw,44px)}
.way .sw{height:clamp(96px,11vw,180px);border:1px solid #2A2A2A;border-radius:2px;margin-bottom:11px}
.way .nm{font-size:clamp(11px,.9vw,13px);letter-spacing:2.4px;text-transform:uppercase}
.way .st{font-size:10px;color:var(--muted);letter-spacing:1.4px;margin-top:5px}

/* TIER COUNTER */
.tiers{margin-top:clamp(22px,2.4vw,36px);border-top:1px solid var(--line)}
.trow{display:grid;grid-template-columns:clamp(80px,9vw,150px) minmax(0,1fr) clamp(90px,9vw,150px);
  gap:clamp(16px,2vw,34px);align-items:center;padding:clamp(14px,1.6vw,24px) 0;
  border-bottom:1px solid var(--line)}
.trow .tname{font-size:clamp(12px,1vw,15px);font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--muted)}
.trow.live .tname{color:var(--gold)}
.trow .tmeta{font-size:clamp(13px,1.05vw,17px);color:var(--muted);max-width:none}
.trow .tmeta b{color:var(--cream);font-weight:500}
.bar{height:4px;background:var(--iron);border-radius:2px;overflow:hidden;margin-top:12px;max-width:640px}
.bar i{display:block;height:100%;background:var(--gold-dark)}
.trow.live .bar i{background:var(--gold)}
.tstat{text-align:right;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.trow.live .tstat{color:var(--gold)}
.tnote{font-size:13px;color:var(--muted);margin-top:clamp(14px,1.5vw,22px);max-width:var(--text);text-wrap:pretty}

/* THE RECORD — full width rows */
.post{border-top:1px solid var(--line);padding:clamp(18px,2vw,32px) 0;display:grid;
  grid-template-columns:clamp(84px,8vw,150px) minmax(0,1fr);gap:clamp(18px,2.2vw,40px);transition:.15s}
.post:hover{border-top-color:var(--gold-dim)}
.post .d{color:var(--muted);font-size:12px;letter-spacing:1.6px;padding-top:6px}
.post h4{font-size:clamp(18px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.18;text-wrap:balance}
.post p{margin-top:8px;font-size:clamp(14px,1vw,16px);color:var(--muted);max-width:var(--text);text-wrap:pretty}

/* SIGNUP — full bleed band */
.signup{background:var(--panel);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:clamp(40px,4.4vw,74px) 0}
.signup .wrap{display:block}
.signup h2{font-size:clamp(25px,2.9vw,42px)}
.form{display:flex;gap:11px;margin-top:clamp(18px,2vw,30px);max-width:var(--text)}
.form input{flex:1;background:var(--black);border:1px solid #333;color:var(--cream);
  padding:clamp(14px,1.4vw,20px) 18px;font-family:var(--f);font-size:16px;border-radius:2px}
.form input:focus{outline:none;border-color:var(--gold-dim)}
.form button{background:var(--gold);color:#0c0c0c;border:none;padding:clamp(14px,1.4vw,20px) clamp(24px,3vw,44px);
  font-family:var(--f);font-weight:700;font-size:13px;letter-spacing:1.6px;cursor:pointer;
  border-radius:2px;transition:.15s;white-space:nowrap}
.form button:hover{filter:brightness(1.08)}
.fineprint{color:var(--muted);font-size:12px;letter-spacing:.6px;margin-top:18px}
.joined{display:none;color:var(--gold);font-size:15px;letter-spacing:.3px;margin-top:0;
  max-width:var(--text);text-align:left;hyphens:none}
.form input[aria-invalid="true"]{border-color:#8a4a3a}

/* FOOTER */
footer{padding:clamp(38px,4vw,66px) 0 clamp(28px,3vw,46px)}
.fgrid{display:flex;justify-content:space-between;gap:clamp(30px,5vw,80px);flex-wrap:wrap}
.fbrand img{height:clamp(40px,4vw,60px);width:auto;display:block}
.fnav{display:flex;gap:clamp(16px,2vw,34px);flex-wrap:wrap;align-items:flex-start}
.fnav a{font-size:13px;color:var(--muted)}
.fnav a:hover{color:var(--cream)}
.social{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;align-items:center}
.social a{display:flex;align-items:center;opacity:.45;transition:opacity .2s ease}
.social a:hover,.social a:focus-visible{opacity:1}
.social svg{width:18px;height:18px;fill:var(--cream-alt);display:block}
.copyright{color:#4E4A46;font-size:12px;margin-top:clamp(26px,3vw,44px);padding-top:20px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tagline{color:var(--gold);letter-spacing:2.4px;font-size:12px;font-weight:700}

/* MOBILE NAV — burger + drop panel. Desktop nav hides below 1000px, so the
   panel is the only way to reach the other pages on a phone. */
.burger{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger span{display:block;width:22px;height:2px;background:var(--cream);border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--black);
  border-bottom:1px solid var(--line);box-shadow:0 22px 40px rgba(0,0,0,.55);
  max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav.open .mnav{display:block}
.mnav a{display:flex;align-items:center;justify-content:space-between;
  padding:17px var(--gut);font-size:17px;letter-spacing:.2px;color:var(--cream-alt);
  border-top:1px solid var(--line)}
.mnav a:first-child{border-top:none}
.mnav a[aria-current="page"]{color:var(--gold)}
.mnav a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold)}
.mnav .mjoin{color:var(--gold);font-weight:700;letter-spacing:1.6px;font-size:14px;
  border-top:1px solid var(--gold-dim)}

@media(max-width:1000px){
  .links{display:none}
  .burger{display:flex}
  .ways{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .post{grid-template-columns:1fr;gap:6px}
  .trow{grid-template-columns:1fr;gap:8px}
  .trow .tstat{text-align:left}
  .mediapair{grid-template-columns:1fr}
  .pullquote{max-width:none}
  .form{flex-direction:column}
  /* portraits are 900x1117; the shorter mobile window would otherwise centre
     the crop on the face. Push it down to the body, as on desktop. */
  .mediapair img{object-position:50% 80%}
  /* touch targets: the footer icons are 18px of ink, far too small to tap */
  .social a{padding:11px;margin:-11px}
  .fnav a{padding:9px 0}
}
/* justification breaks down on short measures — go ragged on phones */
@media(max-width:760px){
  p{text-align:left;hyphens:none}
  .nav .wrap{height:64px}
  .mnav{max-height:calc(100vh - 64px)}
  .navcta{padding:8px 14px;font-size:11px;letter-spacing:1.2px}
  .brand img{height:17px}
  .form input,.form button{width:100%}
  .media{height:clamp(180px,44vw,300px)}
  .herovid{height:clamp(200px,52vw,340px)}
}
@media(max-width:560px){
  .ways{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .burger span{transition:none}
  html{scroll-behavior:auto}
}