/* orandynamics.com — the whole stylesheet. Hand-written, no build step, no
   Tailwind. Values are the measured Starlink ("V3") design set: D-DIN, pure
   #000, 64px sentence-case headlines, borderless #101010 panels, no hairlines
   anywhere, compact 37px buttons, floating inset nav. Eyebrows and the wordmark
   are the only uppercase elements. */

/* ------------------------------------------------------------------ fonts */

@font-face{font-family:D-DIN;font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/d-din-400.woff2) format("woff2")}
@font-face{font-family:D-DIN;font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/d-din-700.woff2) format("woff2")}

/* ------------------------------------------------------------------ reset */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#000;
  color:rgba(250,250,250,.7);
  font-family:D-DIN,Roboto,Arial,Verdana,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:16px;left:16px;z-index:60;width:auto;height:auto;
  margin:0;clip:auto;overflow:visible;white-space:normal;
  background:#fafafa;color:#000;font-weight:700;padding:8px 16px;border-radius:8px;
}

/* -------------------------------------------------------------- container */

.wrap{width:100%;max-width:1170px;margin:0 auto;padding:0 16px}

/* ------------------------------------------------------------- typography */

.h-xl{
  font-size:40px;line-height:1.05;font-weight:700;color:#fafafa;
  letter-spacing:-.01em;text-wrap:balance;
}
.lede{
  margin-top:24px;max-width:34rem;
  font-size:17px;line-height:1.5;color:rgba(250,250,250,.7);
}
.eyebrow{
  font-size:12px;line-height:20px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:rgba(250,250,250,.55);
}
.h-page{font-size:40px;line-height:1.1;font-weight:700;color:#fafafa;letter-spacing:-.01em}

@media (min-width:640px){.h-xl{font-size:56px}}
@media (min-width:1024px){.h-xl{font-size:64px}.lede{font-size:19px}}

/* ----------------------------------------------------------------- button */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;padding:6px 32px;
  font-size:14px;line-height:24px;font-weight:700;white-space:nowrap;
  text-decoration:none;transition:background-color .2s ease;
}
.btn-primary{background:#fafafa;color:#0a0a0a}
.btn-primary:hover{background:#fff}
.btn-ghost{
  background:rgba(255,255,255,.1);color:#fafafa;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}

/* -------------------------------------------------------------------- nav */

.site-header{position:fixed;inset:16px 16px auto;z-index:50;pointer-events:none}
.site-nav{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:64px;max-width:1170px;margin:0 auto;padding:0 16px;
  border-radius:8px;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.25));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background-color .3s ease;
}
.site-nav.is-scrolled{
  background:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.7));
}
.wordmark{
  font-size:14px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;
  color:#fafafa;text-decoration:none;white-space:nowrap;
}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:none;align-items:center;gap:28px;list-style:none;margin:0}
.nav-links a{
  font-size:13px;color:rgba(250,250,250,.8);text-decoration:none;white-space:nowrap;
  transition:color .2s ease;
}
.nav-links a:hover{color:#fafafa}

.menu-btn{display:inline-flex;flex-direction:column;gap:4px;padding:8px;margin-right:-8px}
.menu-btn span{display:block;width:20px;height:2px;background:#fafafa}

@media (min-width:768px){
  .nav-links{display:flex}
  .menu-btn{display:none}
}
/* "ORAN DYNAMICS" at 0.35em tracking is a wide wordmark — tighten the bar's own
   spacing on phones so the hamburger can never be pushed off the edge. Type,
   height and radius of the button are untouched. */
@media (max-width:767px){
  .site-nav{padding:0 12px}
  .nav-right{gap:10px}
  .menu-btn{margin-right:0;padding:8px 6px}
  .site-nav .btn{padding:6px 20px}
}
@media (max-width:379px){.site-nav .btn{display:none}}

/* mobile menu panel */
.menu-backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6)}
.menu-panel{
  position:fixed;inset:0 0 0 auto;z-index:61;width:100%;max-width:20rem;
  background:#101010;padding:24px 24px 40px;
  display:flex;flex-direction:column;gap:8px;
}
.menu-panel .menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.menu-close{font-size:26px;line-height:1;padding:6px 10px;color:#fafafa}
.menu-panel a.menu-link{
  font-size:17px;color:rgba(250,250,250,.85);text-decoration:none;padding:10px 0;
}
.menu-panel a.menu-link:hover{color:#fafafa}
.menu-panel .btn{margin-top:16px;align-self:flex-start}
[hidden]{display:none !important}

/* ------------------------------------------------------- full-bleed shots */

.shot{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex}
.shot > img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
}
.scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.08) 68%,rgba(0,0,0,0) 100%);
}
/* Deeper linear for phones on the deep tiers (text spans full width there) */
.shot-deep .scrim,.shot-deeper .scrim,.shot-deepest .scrim{
  background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.06) 74%,rgba(0,0,0,0) 100%);
}
/* extra mobile depth for very bright images behind the text (Grey lab) */
@media (max-width:639px){
  .shot-bright .scrim{
    background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.68) 50%,rgba(0,0,0,.08) 80%,rgba(0,0,0,0) 100%);
  }
}
/* >=640px: Starlink-style — one radial pool anchored under the text block
   (theirs: radial at the text edge fading to clear; ours sits top-left).
   Four strengths, each the lightest that keeps the lede AA over its image.
   The right half of every frame now carries only ~11-14% darkening. */
@media (min-width:640px){
  .scrim{
    background:radial-gradient(92% 165% at 0% 0%,rgba(0,0,0,.7) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 94%);
  }
  .shot-deep .scrim{
    background:radial-gradient(92% 165% at 0% 0%,rgba(0,0,0,.8) 0%,rgba(0,0,0,.58) 50%,rgba(0,0,0,0) 94%);
  }
  .shot-deeper .scrim{
    background:radial-gradient(92% 165% at 0% 0%,rgba(0,0,0,.88) 0%,rgba(0,0,0,.63) 50%,rgba(0,0,0,0) 94%);
  }
  .shot-deepest .scrim{
    background:radial-gradient(92% 165% at 0% 0%,rgba(0,0,0,.95) 0%,rgba(0,0,0,.68) 50%,rgba(0,0,0,0) 94%);
  }
}
.shot .wrap{padding-top:120px;padding-bottom:96px}
@media (min-width:1024px){.shot .wrap{padding-top:136px}}
.shot-text{max-width:36rem}
.shot-text .h-xl{max-width:15ch}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:40px}

/* --------------------------------------------------------- black sections */

.band{padding:96px 0}
@media (min-width:1024px){.band{padding:128px 0}}

.panel-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:56px}
@media (min-width:768px){.panel-grid{grid-template-columns:1fr 1fr}}
.panel{background:#101010;border-radius:8px;padding:32px}
.panel p.body{margin-top:20px;font-size:15px;line-height:1.6;color:rgba(250,250,250,.7)}
.panel p.body b{color:#fafafa;font-weight:700}
.panel p.body a{display:inline-block;margin-top:12px;color:#fafafa;text-decoration:underline;
text-decoration-color:rgba(250,250,250,.35);text-underline-offset:3px}
.panel p.body a:hover{text-decoration-color:#fafafa}

/* ----------------------------------------------------------------- footer */

.site-footer{background:#000;padding:64px 0 72px}
.footer-links{
  display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin:0;
}
.footer-links a{
  font-size:13px;color:rgba(250,250,250,.5);text-decoration:none;transition:color .2s ease;
}
.footer-links a:hover{color:#fafafa}
.legal{margin-top:28px;max-width:44rem;font-size:12px;line-height:1.6;color:rgba(250,250,250,.35)}

/* ------------------------------------------------------------------ prose */

.page{padding:136px 0 24px}
.page .wrap{max-width:44rem}
.prose{margin-top:40px}
.prose p,.prose li{font-size:16px;line-height:1.65;color:rgba(250,250,250,.7);margin:0 0 16px}
.prose h2{
  font-size:20px;line-height:1.3;font-weight:700;color:#fafafa;
  margin:44px 0 14px;
}
.prose ul{list-style:disc;margin:0 0 16px;padding-left:1.2rem}
.prose li{margin:0 0 8px}
.prose b,.prose strong{color:#fafafa;font-weight:700}
.prose a{color:#fafafa;text-decoration:underline;text-decoration-color:rgba(250,250,250,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:#fafafa}
.prose address{font-style:normal;color:rgba(250,250,250,.7);margin:0 0 16px}
.stamp{margin-top:14px;font-size:13px;color:rgba(250,250,250,.5)}

/* -------------------------------------------------------------------- 404 */

.center-page{
  min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
}
.center-page .h-xl{max-width:none}
.center-page .btn-row{justify-content:center}

/* ----------------------------------------------------------- reveal-on-scroll */

.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transition:opacity .4s ease-out}
  .js .reveal.is-in{opacity:1}
}