/* ============================================================
   oc-base.css   OneCity Technologies shared design system
   Generated 2026-08-19

   Brand red #EC1E24 sampled from the logo artwork.
   Type: Newsreader display, Instrument Sans UI, JetBrains Mono data.
   Spacing on a 4px scale. Six step type scale.

   Load AFTER any framework css so these tokens win.
   ============================================================ */

:root{
  --r:#EC1E24; --rh:#CA191E; --r-deep:#A51519;
  --r06:rgba(236,30,36,.06); --r12:rgba(236,30,36,.12);
  --r-on-dark:#F26C70;
  --g900:#0C0C0E; --g800:#18181B; --g700:#27272A; --g600:#3F3F46;
  --g500:#52525B; --g400:#71717A; --g300:#A1A1AA; --g200:#D4D4D8;
  --g150:#E4E4E7; --g100:#F4F4F5; --g50:#FAFAFA; --w:#FFFFFF;
  --surface:#F6F6F4;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:104px;
  --display:'Newsreader',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --rad:6px; --rad-lg:10px;
  --rule:1px solid var(--g150);
}

@media(prefers-reduced-motion:reduce){
  .oc *,.oc *::before,.oc *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* scoped to .oc so it cannot disturb unconverted pages */
.oc{font-family:var(--sans);font-size:1rem;line-height:1.65;color:var(--g600);
  -webkit-font-smoothing:antialiased}
.oc *,.oc *::before,.oc *::after{box-sizing:border-box}
.oc p,.oc h1,.oc h2,.oc h3,.oc h4{margin:0}

/* layout */
.oc-w{max-width:1180px;margin:0 auto;padding:0 var(--s5)}
.oc-w-narrow{max-width:760px;margin:0 auto;padding:0 var(--s5)}
.oc-sec{padding:var(--s9) 0}
.oc-sec--tint{background:var(--surface)}
.oc-sec--ink{background:var(--g900);color:var(--g300)}
.oc-sec--rule{border-top:var(--rule)}
@media(max-width:768px){.oc-sec{padding:var(--s8) 0}}

/* type */
.oc .oc-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--r);display:block;margin-bottom:var(--s4)}
.oc-sec--ink .oc-eyebrow{color:var(--r-on-dark)}
.oc h1,.oc .oc-h1{font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,5.2vw,4.1rem);line-height:1.04;letter-spacing:-.022em;
  color:var(--g900);margin-bottom:var(--s5)}
.oc h2,.oc .oc-h2{font-family:var(--display);font-weight:500;
  font-size:clamp(1.85rem,3.4vw,2.7rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--g900);margin-bottom:var(--s4)}
.oc h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;
  color:var(--g900);line-height:1.4;margin-bottom:var(--s2)}
.oc-sec--ink h1,.oc-sec--ink h2,.oc-sec--ink h3{color:var(--w)}
.oc p{margin-bottom:var(--s4)}
.oc p:last-child{margin-bottom:0}
.oc .oc-lede{font-size:1.16rem;line-height:1.62;color:var(--g600);max-width:62ch}
.oc .oc-body{max-width:66ch;color:var(--g600)}
.oc-sec--ink .oc-lede,.oc-sec--ink .oc-body,.oc-sec--ink p{color:var(--g300)}
.oc a{color:var(--r);text-decoration:none;transition:color .16s}
.oc a:hover{color:var(--rh)}
.oc a:focus-visible,.oc button:focus-visible{outline:2px solid var(--r);outline-offset:3px}

/* buttons */
.oc-btn{display:inline-flex;align-items:center;gap:var(--s2);padding:13px 22px;
  font-family:var(--sans);font-size:.9rem;font-weight:600;border:1px solid transparent;
  border-radius:var(--rad);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.oc-btn--primary{background:var(--r);color:#fff}
.oc-btn--primary:hover{background:var(--rh);color:#fff}
.oc-btn--ghost{background:transparent;color:var(--g900);border-color:var(--g200)}
.oc-btn--ghost:hover{border-color:var(--g900)}
.oc-sec--ink .oc-btn--ghost{color:var(--w);border-color:var(--g700)}

/* hero */
.oc-hero{padding:var(--s9) 0 var(--s8)}
.oc-hero__grid{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media(min-width:940px){.oc-hero__grid{grid-template-columns:1.35fr .9fr;align-items:start;gap:var(--s8)}}
.oc-hero__actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* record card */
.oc-record{border:var(--rule);border-radius:var(--rad-lg);overflow:hidden;background:var(--w)}
.oc-record__bar{display:flex;justify-content:space-between;align-items:center;
  padding:var(--s3) var(--s4);background:var(--g900);color:var(--g300);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.oc-record__live{display:inline-flex;align-items:center;gap:6px;color:#7CE0A3}
.oc-record__dot{width:6px;height:6px;border-radius:50%;background:#7CE0A3}
.oc-record__row{display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s4);border-bottom:var(--rule);font-size:.86rem}
.oc-record__row:last-of-type{border-bottom:0}
.oc-record__k{color:var(--g400);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;padding-top:2px;white-space:nowrap}
.oc-record__v{color:var(--g900);font-weight:500;text-align:right}
.oc-record__foot{padding:var(--s3) var(--s4);background:var(--g50);
  font-family:var(--mono);font-size:.68rem;color:var(--g400);letter-spacing:.04em}

/* credential strip */
.oc-creds{display:grid;grid-template-columns:repeat(2,1fr);border-top:var(--rule)}
@media(min-width:800px){.oc-creds{grid-template-columns:repeat(4,1fr)}}
.oc-cred{padding:var(--s6) var(--s5) var(--s6) 0;border-right:var(--rule)}
.oc-cred:last-child{border-right:0}
@media(max-width:799px){.oc-cred{border-bottom:var(--rule);padding-right:var(--s4)}
  .oc-cred:nth-child(2n){border-right:0}}
.oc-cred__v{font-family:var(--display);font-size:2.3rem;font-weight:500;
  color:var(--g900);letter-spacing:-.02em;line-height:1}
.oc-cred__v em{font-style:normal;color:var(--r)}
.oc-cred__l{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g400);margin-top:var(--s2)}

/* module registry */
.oc-registry{border-top:var(--rule);margin-top:var(--s7)}
.oc-module{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);
  padding:var(--s5) 0;border-bottom:var(--rule);align-items:start;transition:background .16s}
@media(min-width:820px){.oc-module{grid-template-columns:96px 1fr 1.15fr;gap:var(--s6);align-items:baseline}}
.oc-module:hover{background:var(--r06)}
.oc-module__code{font-family:var(--mono);font-size:.74rem;color:var(--r);
  letter-spacing:.06em;font-weight:500;padding-top:3px}
.oc-module__name{font-size:1.02rem;font-weight:600;color:var(--g900);line-height:1.4}
.oc-module__dept{font-family:var(--mono);font-size:.68rem;color:var(--g400);
  text-transform:uppercase;letter-spacing:.08em;margin-top:var(--s1)}
.oc-module__desc{color:var(--g500);font-size:.94rem;line-height:1.6;grid-column:1/-1}
@media(min-width:820px){.oc-module__desc{grid-column:auto}}

/* split content */
.oc-split{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media(min-width:900px){.oc-split{grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}}
.oc-figure{background:var(--surface);border:var(--rule);border-radius:var(--rad-lg);
  overflow:hidden}
.oc-figure img{width:100%;height:auto;display:block}

/* card grid, for pages without a registry */
.oc-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:700px){.oc-grid--2,.oc-grid--3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.oc-grid--3{grid-template-columns:repeat(3,1fr)}}
.oc-card{border:var(--rule);border-radius:var(--rad-lg);padding:var(--s5);
  background:var(--w);transition:border-color .2s}
.oc-card:hover{border-color:var(--r)}

/* faq */
.oc-faq{border-top:var(--rule)}
.oc-faq__item{padding:var(--s5) 0;border-bottom:var(--rule)}
.oc-faq__q{font-size:1.02rem;font-weight:600;color:var(--g900);margin-bottom:var(--s2)}
.oc-faq__a{color:var(--g500);font-size:.94rem;line-height:1.68;max-width:70ch}

/* author block, E-E-A-T */
.oc-author{margin-top:var(--s7);padding-top:var(--s5);border-top:var(--rule);
  font-size:.88rem;color:var(--g500);display:flex;gap:var(--s4);align-items:baseline;flex-wrap:wrap}
.oc-author__mark{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g400)}

/* utilities */
.oc-center{text-align:center}
.oc-mt6{margin-top:var(--s6)}
.oc-mt7{margin-top:var(--s7)}