/* Opscient Labs — opscient.org
   One stylesheet, no build step. Tokens mirror the Opscient Labs design system. */

@font-face { font-family: "Geist"; src: url("../fonts/Geist-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #F4F2EE;
  --tint: #ECE9E3;
  --surface: #FFFFFF;
  --ink: #111315;
  --ink-2: #3E4348;
  --muted: #5A6066;
  --rule: #DEDAD3;
  --rule-strong: #C9C4BB;
  --signal: #E4572E;
  --signal-soft: #FF916F;
  --graphite: #0F1113;
  --graphite-2: #16191C;
  --graphite-3: #1E2226;
  --on-dark: #EDEBE7;
  --on-dark-2: #C4C7CB;
  --on-dark-muted: #9CA1A7;
  --rule-dark: #2A2E33;

  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(20px, 6vw, 112px);
  --section: clamp(80px, 9vw, 136px);
  --max: 1440px;
  --radius: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease); }
a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; font-weight: 400; color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--on-dark); color: var(--ink); padding: 10px 14px; }

/* Kicker: the small mono label that opens every section */
.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kicker span { color: var(--ink); }
.kicker span::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: currentColor; opacity: .5; }
.kicker--dark { color: var(--on-dark-muted); }
.kicker--dark span { color: var(--on-dark); }

/* NAV */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.nav__in { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; gap: 34px; align-items: center; font-size: 14.5px; font-weight: 400; color: var(--on-dark-muted); }
.nav__links a:hover { color: var(--on-dark); }
.nav__cta { color: var(--on-dark); border-bottom: 1px solid var(--signal); padding-bottom: 3px; }

/* HERO */
.hero { background: radial-gradient(ellipse 70% 60% at 50% 30%, #1E2226 0%, var(--graphite) 70%); color: var(--on-dark); }
.hero__in { padding-top: calc(92px + 48px); padding-bottom: var(--section); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__mark { width: 360px; height: 360px; }
.hero__title { margin-top: 40px; font-weight: 500; font-size: clamp(38px, 5vw, 68px); line-height: 1.04; letter-spacing: -.04em; }
.hero__tag { margin-top: 14px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; letter-spacing: -.01em; color: var(--on-dark-muted); }
.hero__body { margin-top: 36px; max-width: 720px; display: flex; flex-direction: column; gap: 18px; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.75; color: var(--on-dark-2); text-wrap: pretty; }
.hero__body em { color: var(--on-dark); }

/* CHAPTERS: one header pattern for every section */
.chapter { padding: var(--section) 0; }
.chapter--dark { background: var(--graphite-2); color: var(--on-dark); border-top: 1px solid var(--rule-dark); }
.chapter--tint { background: var(--tint); }
.chapter--white { background: var(--surface); }
.chapter__head { max-width: 940px; }
.chapter__title { margin-top: 0; font-weight: 500; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -.035em; }
.chapter__sub { margin-top: 16px; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); }
.chapter--dark .chapter__sub { color: var(--on-dark-muted); }

/* CARD: one card language across the site */
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); box-shadow: 0 1px 0 var(--rule), 0 14px 34px -22px rgba(17, 19, 21, .28); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.card__num { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.card__title { font-weight: 500; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -.025em; }
.card__body { font-size: 15.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

.icon { width: 44px; height: 44px; flex: none; overflow: visible; }
.icon path, .icon rect, .icon ellipse, .icon circle:not(.pt) { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.icon .pt { fill: var(--signal); }

/* 01 PRACTICE — the loop */
.loop__track { position: relative; margin-top: 72px; padding-top: 110px; }
.loop__return { position: absolute; top: 0; left: 0; width: 100%; height: 120px; overflow: visible; }
.loop__return path { fill: none; stroke: #4A5056; stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.loop__arrow { position: absolute; top: 104px; left: calc(16.667% - 6px); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #6B7178; }
.loop__line { position: absolute; top: calc(110px + 48px); left: 16.667%; right: 16.667%; height: 1.5px; background: linear-gradient(90deg, #6B7178, var(--signal) 50%, #6B7178); opacity: .8; }
.loop__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 clamp(16px, 2.6vw, 44px); }
.node { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--graphite-2); display: flex; align-items: center; justify-content: center; }
.node svg { position: absolute; inset: 0; width: 96px; height: 96px; }
.node svg path { fill: none; stroke: var(--on-dark); stroke-width: 3.2; }
.node svg circle { fill: var(--signal); }
.node b { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .06em; color: var(--on-dark); }
.step--point .node svg path { stroke: var(--signal); }
.step--point .node b { color: var(--signal-soft); }
.step__title { margin-top: 26px; font-weight: 500; font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -.03em; line-height: 1.1; }
.step__body { margin: 14px 0 24px; max-width: 330px; font-size: 16px; line-height: 1.7; color: var(--on-dark-2); text-wrap: pretty; }
.step__get { margin-top: auto; padding: 18px 20px; width: 100%; max-width: 330px; border: 1px solid var(--rule-dark); border-radius: var(--radius); background: rgba(255, 255, 255, .02); font-size: 15px; line-height: 1.55; color: var(--on-dark); }
.step__get span { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); }
.step--point .step__get { border-color: rgba(228, 87, 46, .55); }

/* 02 WHAT WE BUILD — streams */
.streams { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stream { padding: 30px 30px 28px; }
.stream .card__title { margin-top: 34px; }
.stream .card__body { margin-top: 12px; }
.tags { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 6px 11px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--ink-2); }
.stream:hover .tags li { border-color: var(--rule-strong); }

.hood { margin-top: 16px; padding: 28px 30px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.hood__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hood__grid div { padding-left: 24px; border-left: 1px solid var(--rule); }
.hood__grid div:first-child { padding-left: 0; border-left: 0; }
.hood dt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.hood dd { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); font-weight: 400; }

/* 03 METHOD — pillars */
.pillars { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { min-height: 420px; padding: 34px 34px 28px; }
.pnode { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.pnode svg { position: absolute; inset: 0; width: 56px; height: 56px; }
.pnode svg path { fill: none; stroke: var(--ink); stroke-width: 3; }
.pnode svg circle { fill: var(--signal); }
.pnode b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; }
.pillar__title { margin-top: 48px; font-weight: 500; font-size: clamp(36px, 3.4vw, 50px); line-height: 1; letter-spacing: -.04em; }
.pillar__body { margin: 20px 0 32px; font-size: 18px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.pillar__tag { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pillar__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.pillar--point { background: radial-gradient(ellipse 90% 70% at 85% 0%, var(--graphite-3) 0%, var(--graphite) 70%); color: var(--on-dark); border-color: var(--graphite); }
.pillar--point:hover { border-color: var(--graphite); }
.pillar--point .pnode svg path { stroke: var(--signal); }
.pillar--point .pnode b { color: var(--signal-soft); }
.pillar--point .pillar__body { color: var(--on-dark-2); }
.pillar--point .pillar__tag { color: var(--on-dark-muted); border-top-color: var(--rule-dark); }
.pillar--point .pillar__tag::before { background: var(--signal); }

/* 04 SECTORS */
.sectors { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sector { padding: 30px 28px 32px; background: var(--paper); }
.sector .card__title { margin-top: 34px; min-height: 2.4em; }
.sector .card__body { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rule); }
.sectors__line { margin-top: 48px; max-width: 880px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; letter-spacing: -.015em; color: var(--ink); }

/* CONTACT — the address, nothing else */
.close { background: var(--graphite); color: var(--on-dark); padding: clamp(96px, 12vw, 180px) 0; }
.close__mail { display: inline-block; font-weight: 500; font-size: clamp(34px, 9.4vw, 140px); line-height: .95; letter-spacing: -.055em; color: var(--on-dark); overflow-wrap: anywhere; }
.close__mail:hover { color: var(--signal); }

/* FOOTER */
.foot { background: var(--graphite); color: var(--on-dark-muted); border-top: 1px solid var(--rule-dark); padding: 40px 0 32px; font-size: 14px; }
.foot__top { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.foot__brand { display: flex; align-items: center; gap: 20px; }
.foot__brand img { height: 22px; width: auto; }
.foot__line { padding-left: 20px; border-left: 1px solid var(--rule-dark); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.foot__nav { display: flex; gap: 28px; }
.foot__nav a:hover, .foot__legal a:hover { color: var(--on-dark); }
.foot__bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule-dark); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12.5px; }
.foot__legal { display: flex; gap: 24px; }
.foot__copy { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #6B7178; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .streams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hood__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 0; }
  .pillar__title { margin-top: 28px; }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hood__grid div:nth-child(3) { padding-left: 0; border-left: 0; }
  .foot__top { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .hide-sm { display: none; }
  .nav__in { height: 68px; }
  .nav__logo img { height: 22px; }
  .hero__in { padding-top: calc(68px + 28px); padding-bottom: 56px; }
  .hero__mark { width: 230px; height: 230px; }
  .hero .kicker { margin-top: 24px; }
  .hero__body { margin-top: 28px; }

  .loop__track { margin-top: 44px; padding-top: 0; }
  .loop__return, .loop__arrow, .loop__note, .loop__line { display: none; }
  .loop__steps { grid-template-columns: 1fr; border-left: 1.5px solid #4A5056; margin-left: 36px; }
  .step { align-items: flex-start; text-align: left; padding: 0 0 44px 44px; position: relative; }
  .step:last-child { padding-bottom: 0; }
  .node { position: absolute; left: -37px; top: 0; width: 72px; height: 72px; }
  .node svg { width: 72px; height: 72px; }
  .step__title { margin-top: 20px; }
  .step__body, .step__get { max-width: none; }

  .streams, .sectors { grid-template-columns: 1fr; }
  .hood { padding: 24px; }
  .hood__grid { grid-template-columns: 1fr; gap: 18px; }
  .hood__grid div { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--rule); }
  .hood__grid div:first-child { padding-top: 0; border-top: 0; }
  .sector .card__title { min-height: 0; }
  .foot__brand { flex-direction: column; align-items: flex-start; gap: 12px; }
  .foot__line { padding-left: 0; border-left: 0; }
  .foot__nav { flex-wrap: wrap; gap: 10px 22px; }
  .foot__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .foot__legal { flex-wrap: wrap; gap: 12px 24px; }
}