@font-face {
  font-family: "SASCOSM Instrument";
  src: url("../assets/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Digi Carta Serif";
  src: url("../assets/fonts/SourceSerif4-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --dc-void: #020304;
  --dc-platinum: #f2f4f5;
  --dc-copy: #c8cccf;
  --dc-muted: #858b91;
  --dc-bitcoin: #f7931a;
  --dc-signal: #6fd8e6;
  --dc-line: rgba(229, 232, 235, 0.19);
  --dc-display: "SASCOSM Instrument", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dc-charter: "Digi Carta Serif", Georgia, serif;
  --dc-ui: "SASCOSM Matrix", ui-monospace, SFMono-Regular, Menlo, monospace;
  --dc-ease: cubic-bezier(0.2, 0.72, 0.18, 1);
}

html { scroll-behavior: smooth; background: var(--dc-void); }
body.dc-page { margin: 0; overflow-x: clip; background: var(--dc-void); color: var(--dc-platinum); font-family: var(--dc-display); -webkit-font-smoothing: antialiased; }
.dc-page *, .dc-page *::before, .dc-page *::after { box-sizing: border-box; }
.dc-page main { display: block; width: 100%; margin: 0; padding: 0; overflow: clip; }
.dc-shell { width: min(100% - clamp(2rem, 7vw, 8rem), 92rem); margin-inline: auto; }

.dc-stage {
  position: relative;
  display: grid;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  min-height: 100svh;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background: #050607;
}

.dc-stage-media, .dc-stage-media img, .dc-stage-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-stage-media { z-index: -3; display: block; }
.dc-stage-media img { display: block; object-fit: cover; object-position: center; transform: scale(1.008); transition: transform 1600ms var(--dc-ease), filter 1000ms ease; }
.dc-stage.is-active .dc-stage-media img, .dc-hero .dc-stage-media img { transform: scale(1); }
.dc-stage-shade { z-index: -2; background: linear-gradient(90deg, rgba(2,3,4,.97) 0%, rgba(2,3,4,.82) 28%, rgba(2,3,4,.28) 54%, rgba(2,3,4,.04) 100%), linear-gradient(180deg, rgba(2,3,4,.18), transparent 50%, rgba(2,3,4,.86)); }
.dc-stage-shade--opposite { background: linear-gradient(270deg, rgba(2,3,4,.98) 0%, rgba(2,3,4,.83) 31%, rgba(2,3,4,.2) 58%, rgba(2,3,4,.08) 100%), linear-gradient(180deg, rgba(2,3,4,.24), transparent 55%, rgba(2,3,4,.78)); }

.dc-stage-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  align-content: center;
  min-height: 100svh;
  padding-block: clamp(7rem, 13vh, 10rem) clamp(7rem, 12vh, 9rem);
}

.dc-stage-copy h1, .dc-stage-copy h2, .dc-principles-copy h2, .dc-test-layout h2 {
  max-width: 11ch;
  margin: 1.25rem 0 0;
  color: #f6f2e8;
  font-family: var(--dc-display);
  font-size: clamp(3.6rem, 6.2vw, 7rem);
  font-weight: 565;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

.dc-hero-copy h1 { max-width: 10.5ch; font-family: var(--dc-charter); font-weight: 510; letter-spacing: -0.035em; }
.dc-human-stage h2 { max-width: 9ch; }
.dc-bridge-stage h2 { max-width: 10.5ch; font-size: clamp(3.25rem, 5.5vw, 6.25rem); }
.dc-gateway-stage h2 { max-width: 10ch; font-family: var(--dc-charter); font-weight: 500; }

.dc-stage-copy > p:not(.dc-index), .dc-principles-copy > p, .dc-test-layout > div:first-child > p {
  max-width: 48ch;
  margin: 1.5rem 0 0;
  color: rgba(242,244,245,.82);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 420;
  letter-spacing: -.01em;
  line-height: 1.58;
}

.dc-index, .dc-seal-lockup span {
  margin: 0;
  color: rgba(242,244,245,.72);
  font-family: var(--dc-ui);
  font-size: clamp(.66rem, .78vw, .75rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.dc-seal-lockup { display: inline-flex; align-items: center; gap: .85rem; }
.dc-seal-lockup img {
  width: clamp(3rem, 4vw, 4.2rem);
  height: clamp(3rem, 4vw, 4.2rem);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(242,244,245,.17), 0 0 2.4rem rgba(247,147,26,.13);
}

.dc-primary {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.4rem;
  margin-top: 2rem;
  padding: .82rem 1.18rem;
  border: 1px solid rgba(247,147,26,.56);
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(247,147,26,.15), rgba(111,216,230,.04));
  color: #fff;
  font-family: var(--dc-ui);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.dc-primary:hover, .dc-primary:focus-visible { border-color: var(--dc-bitcoin); background: rgba(247,147,26,.22); transform: translateY(-2px); }
.dc-primary span { color: var(--dc-bitcoin); font-size: 1rem; }
.dc-stage-copy small { display: block; max-width: 58ch; margin-top: 1.1rem; color: rgba(242,244,245,.5); font: 700 .6rem/1.5 var(--dc-ui); letter-spacing: .09em; text-transform: uppercase; }

.dc-scroll { position: absolute; z-index: 3; right: clamp(1.5rem,4vw,4rem); bottom: max(1.5rem,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:.8rem; color:rgba(242,244,245,.72); font:700 .61rem/1 var(--dc-ui); letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }
.dc-scroll i { position:relative; width:2.8rem; height:1px; overflow:hidden; background:rgba(242,244,245,.25); }
.dc-scroll i::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,transparent,var(--dc-bitcoin)); transform:translateX(-100%); animation:dc-route 1800ms var(--dc-ease) 1000ms both; }

.dc-human-stage .dc-stage-media img { object-position: center; }
.dc-human-stage .dc-stage-copy { align-content: end; padding-bottom: clamp(7rem, 14vh, 11rem); }

.dc-principles-layout, .dc-test-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(20rem, .88fr) minmax(20rem, .7fr);
  gap: clamp(4rem, 9vw, 11rem);
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(7rem, 12vh, 9rem);
}
.dc-principles-layout { grid-template-columns: minmax(18rem,.68fr) minmax(22rem,.72fr); }
.dc-principles-copy { grid-column: 2; }
.dc-principles-copy h2 { max-width: 10ch; font-family: var(--dc-charter); font-size: clamp(2.8rem, 4.5vw, 5.2rem); font-weight: 480; }
.dc-principles-copy blockquote {
  max-width: 35ch;
  margin: 2.2rem 0 0;
  padding: 1rem 0 1rem 1.25rem;
  border-left: 1px solid var(--dc-bitcoin);
  color: #f5efe2;
  font-family: var(--dc-charter);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.32;
}

.dc-article-index {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  align-self: center;
  border-top: 1px solid var(--dc-line);
}
.dc-article-index button, .dc-test-index button {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  min-height: 4.55rem;
  padding: .75rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--dc-line);
  background: transparent;
  color: rgba(242,244,245,.62);
  font: 520 1rem/1.25 var(--dc-display);
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, padding-left 260ms var(--dc-ease), background 180ms ease;
}
.dc-article-index button span, .dc-test-index button span { color: rgba(242,244,245,.42); font: 700 .64rem/1 var(--dc-ui); letter-spacing:.12em; }
.dc-article-index button[aria-selected="true"], .dc-test-index button[aria-selected="true"] { padding-left: .8rem; background: linear-gradient(90deg,rgba(247,147,26,.12),transparent); color:#fff; }
.dc-article-index button[aria-selected="true"] span, .dc-test-index button[aria-selected="true"] span { color:var(--dc-bitcoin); }
.dc-article-index button:focus-visible, .dc-test-index button:focus-visible { outline:2px solid var(--dc-signal); outline-offset:3px; }

.dc-test-layout { align-items: end; padding-bottom: clamp(6rem, 10vh, 8rem); }
.dc-test-layout > div:first-child h2 { max-width: 9ch; font-size:clamp(3rem,5vw,5.7rem); }
.dc-test-question { display:block; max-width:30ch; margin-top:2.2rem; color:#f5efe2; font-family:var(--dc-charter); font-size:clamp(1.4rem,2vw,1.9rem); font-weight:460; line-height:1.3; }
.dc-test-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--dc-line); }
.dc-test-index button { min-height:4rem; grid-template-columns:2.4rem 1fr; font-size:.86rem; }

.dc-bridge-stage .dc-stage-shade { background:linear-gradient(90deg,rgba(2,3,4,.98) 0%,rgba(2,3,4,.84) 28%,rgba(2,3,4,.3) 53%,rgba(2,3,4,.02) 100%),linear-gradient(180deg,rgba(2,3,4,.12),transparent 55%,rgba(2,3,4,.78)); }
.dc-domain-line { display:flex; flex-wrap:wrap; gap:.58rem; max-width:45rem; margin-top:2rem; }
.dc-domain-line span { padding:.56rem .72rem; border-left:1px solid rgba(247,147,26,.55); background:rgba(2,3,4,.34); color:rgba(242,244,245,.76); font:700 .59rem/1 var(--dc-ui); letter-spacing:.1em; text-transform:uppercase; }
.dc-gateway-stage .dc-stage-shade { background:linear-gradient(90deg,rgba(2,3,4,.99) 0%,rgba(2,3,4,.88) 34%,rgba(2,3,4,.3) 58%,rgba(2,3,4,.06)),linear-gradient(180deg,rgba(2,3,4,.1),transparent 55%,rgba(2,3,4,.78)); }

.dc-reveal { opacity:1; transform:none; }
.js .dc-reveal { opacity:.48; transform:translateY(1.7rem); transition:opacity 720ms var(--dc-ease),transform 720ms var(--dc-ease); }
.js .dc-reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes dc-route { to { transform:translateX(100%); } }

@media (min-width:721px) and (max-height:900px) {
  .dc-stage-copy, .dc-principles-layout { padding-block:clamp(5.4rem,10vh,6.1rem) clamp(4rem,8vh,4.8rem); }
  .dc-stage-copy h1, .dc-stage-copy h2 { font-size:clamp(3.25rem,min(5.5vw,10.5vh),5.5rem); }
  .dc-stage-copy > p:not(.dc-index) { margin-top:1.15rem; }
  .dc-primary { margin-top:1.35rem; }
}

@media (max-width:900px) {
  .dc-principles-layout, .dc-test-layout { grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width:720px) {
  .dc-shell { width:min(100% - 2rem,42rem); }
  .dc-stage { min-height:100svh; }
  .dc-stage-media img { object-position:center; }
  .dc-stage-shade, .dc-stage-shade--opposite, .dc-bridge-stage .dc-stage-shade, .dc-gateway-stage .dc-stage-shade { background:linear-gradient(180deg,rgba(2,3,4,.32) 0%,rgba(2,3,4,.16) 37%,rgba(2,3,4,.78) 62%,rgba(2,3,4,.99) 100%); }
  .dc-stage-copy { align-content:end; padding-top:max(5.5rem,calc(env(safe-area-inset-top) + 4.8rem)); padding-bottom:max(8.1rem,calc(env(safe-area-inset-bottom) + 7.5rem)); }
  .dc-stage-copy h1, .dc-stage-copy h2 { max-width:10ch; margin-top:.85rem; font-size:clamp(2.65rem,11.7vw,4.1rem); line-height:.94; }
  .dc-stage-copy > p:not(.dc-index) { max-width:36ch; margin-top:.95rem; font-size:.96rem; line-height:1.47; }
  .dc-seal-lockup { gap:.65rem; }
  .dc-seal-lockup img { width:3.3rem; height:3.3rem; }
  .dc-seal-lockup span { max-width:25ch; font-size:.59rem; }
  .dc-primary { min-height:3.1rem; margin-top:1.2rem; font-size:.61rem; }
  .dc-stage-copy small { margin-top:.78rem; font-size:.53rem; }
  .dc-scroll { display:none; }
  .dc-human-stage .dc-stage-copy { align-content:end; padding-bottom:max(8.5rem,calc(env(safe-area-inset-bottom) + 7.8rem)); }

  .dc-principles-layout, .dc-test-layout { grid-template-columns:1fr; align-content:end; gap:1.1rem; min-height:100svh; padding-top:max(5rem,calc(env(safe-area-inset-top) + 4.5rem)); padding-bottom:max(8rem,calc(env(safe-area-inset-bottom) + 7.4rem)); }
  .dc-principles-copy { grid-column:1; grid-row:1; }
  .dc-principles-copy h2, .dc-test-layout > div:first-child h2 { margin-top:.7rem; font-size:clamp(2.2rem,9.7vw,3.2rem); }
  .dc-principles-copy > p, .dc-test-layout > div:first-child > p { margin-top:.7rem; font-size:.88rem; line-height:1.4; }
  .dc-principles-copy blockquote { margin-top:.85rem; padding:.55rem 0 .55rem .8rem; font-size:1.04rem; }
  .dc-article-index { grid-column:1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dc-article-index button, .dc-test-index button { min-height:3.05rem; grid-template-columns:2rem 1fr; padding:.4rem .2rem; font-size:.72rem; }
  .dc-article-index button { grid-template-columns:1fr; gap:.18rem; justify-items:start; font-size:.64rem; }
  .dc-article-index button[aria-selected="true"], .dc-test-index button[aria-selected="true"] { padding-left:.45rem; }
  .dc-test-layout { align-items:end; }
  .dc-test-question { margin-top:.8rem; font-size:1.05rem; }
  .dc-test-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dc-test-index button { grid-template-columns:1fr; gap:.18rem; justify-items:start; }
  .dc-domain-line { gap:.3rem; margin-top:.9rem; }
  .dc-domain-line span { padding:.38rem .48rem; font-size:.5rem; }
}

@media (max-width:390px), (max-height:720px) and (max-width:720px) {
  .dc-stage-copy h1, .dc-stage-copy h2 { font-size:clamp(2.25rem,10.4vw,3.2rem); }
  .dc-stage-copy > p:not(.dc-index) { font-size:.86rem; }
  .dc-stage-copy small { display:none; }
  .dc-principles-copy h2, .dc-test-layout > div:first-child h2 { font-size:2rem; }
  .dc-principles-copy > p, .dc-test-layout > div:first-child > p { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .dc-stage-media img, .dc-scroll i::after { animation:none; transition:none; transform:none; }
  .js .dc-reveal { opacity:1; transform:none; transition:none; }
  .dc-primary, .dc-article-index button, .dc-test-index button { transition:none; }
}

@media (forced-colors:active) {
  .dc-primary, .dc-article-index button, .dc-test-index button { border-color:CanvasText; }
  .dc-stage-shade, .dc-stage-shade--opposite { background:rgba(0,0,0,.74); }
}
