/* Layout: one 68rem column. A notice band, then a hero split between the pitch and a stamped brass nameplate
   (the one bold object on the page), then quiet sections. Colors come from OPV's own brand guide. */
:root{
  --paper:#f4f5f8; --surface:#ffffff; --ink:#152042; --muted:#56607a; --line:#d9dde7;
  --blue:#14275A; --brass:#9a7a12; --brass-fill:#C9A227; --notice-bg:#fff4cf; --notice-ink:#4a3a05;
  --plate-1:#e2c45a; --plate-2:#b8901c; --plate-ink:#1c1606; --chip:#e8ebf3;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0b1330; --surface:#121d44; --ink:#e7eaf3; --muted:#a3abc4; --line:#26325e;
  --blue:#c9d4f5; --brass:#e0bf55; --brass-fill:#C9A227; --notice-bg:#3a2f0a; --notice-ink:#fbe9b0;
  --chip:#1c2a5c; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0b1330; --surface:#121d44; --ink:#e7eaf3; --muted:#a3abc4; --line:#26325e;
  --blue:#c9d4f5; --brass:#e0bf55; --brass-fill:#C9A227; --notice-bg:#3a2f0a; --notice-ink:#fbe9b0;
  --chip:#1c2a5c; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--body)}
a{color:var(--blue);text-underline-offset:.18em}
a:focus-visible{outline:3px solid var(--brass-fill);outline-offset:2px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:68rem;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

.notice{background:var(--notice-bg);color:var(--notice-ink);border-bottom:2px solid var(--brass-fill)}
.notice .wrap{display:flex;gap:.9rem;align-items:flex-start;padding-block:.85rem}
.notice strong{font-family:var(--display);font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;
  background:var(--brass-fill);color:#1c1606;padding:.2rem .55rem;border-radius:3px;white-space:nowrap;margin-top:.15rem}
.notice p{margin:0;font-size:.98rem}

header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.4rem}
.mark{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--ink)}
.mark img{width:46px;height:46px}
.mark b{display:block;font-family:var(--display);font-stretch:118%;font-weight:850;font-size:1.3rem;letter-spacing:.05em;line-height:1;color:var(--blue)}
.mark span{display:block;font-family:var(--display);font-stretch:112%;font-weight:600;font-size:.74rem;letter-spacing:.2em;color:var(--brass);margin-top:.3rem}
nav.links{display:flex;gap:.3rem 1.3rem;flex-wrap:wrap;font-size:.93rem}
nav.links a{text-decoration:none;color:var(--muted)}nav.links a:hover{color:var(--ink);text-decoration:underline}

.hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:1.5rem 2.5rem}
h1{font-family:var(--display);font-stretch:100%;font-weight:800;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.01em;margin:0 0 1.1rem;color:var(--blue);text-wrap:balance}
.lede{font-size:1.18rem;max-width:36em;margin:0 0 1.2rem}
.hero p{max-width:38em}

/* the nameplate: a riveted brass data plate, stamped */
.plate{position:relative;background:linear-gradient(135deg,var(--plate-1),var(--plate-2) 55%,var(--plate-1));color:var(--plate-ink);
  border-radius:8px;padding:1.6rem 1.5rem 1.2rem;font-family:var(--mono);box-shadow:inset 0 0 0 2px rgba(60,44,0,.45),inset 0 0 0 5px rgba(255,240,190,.35),0 10px 28px rgba(10,20,50,.22)}
.plate::before,.plate::after,.plate i::before,.plate i::after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff3c4,#8a6a10 70%);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.plate::before{top:9px;left:9px}.plate::after{top:9px;right:9px}.plate i::before{bottom:9px;left:9px}.plate i::after{bottom:9px;right:9px}
.plate h2{font-family:var(--display);font-stretch:112%;font-weight:850;font-size:.98rem;letter-spacing:.1em;text-align:center;margin:0;color:var(--plate-ink)}
.plate .sub{text-align:center;font-size:.72rem;letter-spacing:.2em;margin:.2rem 0 .9rem;text-transform:uppercase}
.plate dl{display:grid;grid-template-columns:auto 1fr;margin:0;border-top:1.5px solid rgba(40,30,0,.55)}
.plate dt,.plate dd{margin:0;padding:.42rem .2rem;border-bottom:1px solid rgba(40,30,0,.35);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.plate dt{opacity:.8;padding-right:1rem}.plate dd{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.plate .foot{font-size:.68rem;letter-spacing:.12em;text-align:center;margin-top:.8rem;text-transform:uppercase}

figure{margin:0}
.photo .wrap{padding-block:0 1rem}
.photo img{width:100%;aspect-ratio:1000/558;object-fit:cover;border-radius:6px}
figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}

section{padding-block:2.6rem}
section+section{border-top:1px solid var(--line)}
h2.sec{font-family:var(--display);font-stretch:110%;font-weight:800;font-size:clamp(1.45rem,3vw,1.9rem);color:var(--blue);margin:0 0 .4rem;text-wrap:balance}
.kicker{font-family:var(--display);font-stretch:118%;font-weight:600;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 .5rem}
.prose{max-width:40em}
.prose p{margin:0 0 1rem}

.timeline{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 2rem}
.timeline li{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:.8rem;padding:.7rem 0;border-top:1px solid var(--line)}
.timeline .yr{font-family:var(--mono);font-weight:500;color:var(--brass);font-variant-numeric:tabular-nums}
.timeline b{font-weight:600}

.traps{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.traps li{list-style:none}
.traps{padding:0}
.chip{display:inline-block;background:var(--chip);border-radius:4px;padding:.35rem .65rem;font-size:.92rem}
.chip code{font-family:var(--mono);font-size:.86rem}

.arms{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr));gap:1rem;margin-top:1.4rem}
.arm{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.arm .tag{font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--surface);background:var(--blue);border-radius:3px;padding:.05rem .45rem;align-self:flex-start}
.arm h3{font-family:var(--display);font-stretch:105%;font-weight:750;font-size:1.12rem;margin:0;color:var(--ink)}
.arm p{margin:0;font-size:.95rem;color:var(--muted)}
.same{margin-top:1.3rem;font-size:.97rem;max-width:44em}

.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.4rem}
.docs img{border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 18px rgba(10,20,50,.12);aspect-ratio:510/660;object-fit:cover;object-position:top;width:100%}
.docs figure:nth-child(3) img{object-position:center}

.intranet{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1.6rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:center}
.intranet p{margin:.3rem 0 0}
.btn{display:inline-block;font-family:var(--display);font-stretch:110%;font-weight:700;letter-spacing:.03em;text-decoration:none;
  background:var(--blue);color:var(--surface);padding:.75rem 1.2rem;border-radius:5px;white-space:nowrap}
.btn:hover{filter:brightness(1.12)}
.small{font-size:.88rem;color:var(--muted)}

footer{border-top:1px solid var(--line);margin-top:1rem}
footer .wrap{padding-block:1.8rem 2.4rem;font-size:.88rem;color:var(--muted);display:grid;gap:.5rem}
footer p{margin:0;max-width:52em}

@media (max-width:760px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .docs{grid-template-columns:repeat(2,minmax(0,1fr))}.docs figure:nth-child(3){display:none}
  .intranet{grid-template-columns:minmax(0,1fr)}
  .notice .wrap{flex-direction:column;gap:.4rem}
}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s}}

/* Policy pages (privacy, terms) */
.policy .wrap{padding-block:1rem 3rem}
.policy article{max-width:44em}
.policy h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:.4rem}
.policy .updated{color:var(--muted);font-size:.92rem;margin:0 0 1.6rem}
.policy h2{font-family:var(--display);font-stretch:108%;font-weight:750;font-size:1.25rem;color:var(--blue);margin:2rem 0 .5rem}
.policy p,.policy li{margin:0 0 .7rem}
.policy ul{padding-left:1.2rem;margin:0 0 1rem}
.policy .callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass-fill);border-radius:4px;padding:1rem 1.2rem;margin:0 0 1.5rem}
.policy .callout p:last-child{margin:0}
.policy code{font-family:var(--mono);font-size:.9em;background:var(--chip);padding:.05rem .3rem;border-radius:3px}
.addr{font-family:var(--mono);user-select:all;background:var(--chip);padding:.1rem .4rem;border-radius:3px}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.memo article>h1:first-of-type,.memo article h2{text-wrap:balance}
.memo .kicker{margin-bottom:.8rem}
.memo article table{border-collapse:collapse;display:block;overflow-x:auto;font-size:.95rem;margin:0 0 1rem}
.memo article th,.memo article td{border:1px solid var(--line);padding:.35rem .6rem;text-align:left;vertical-align:top}
.memo article hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}