:root {
  --navy: #06142d;
  --navy-2: #0a2248;
  --ink: #0b1730;
  --paper: #f4f0e7;
  --white: #fffdf8;
  --gold: #f4b735;
  --gold-light: #ffd774;
  --silver: #c9d1dd;
  --muted: #677286;
  --line: rgba(11, 23, 48, .16);
  --max: 1240px;
  --header-h: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Avenir Next", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.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 {
  position: fixed;
  z-index: 1000;
  left: 1rem;
  top: -4rem;
  padding: .8rem 1rem;
  background: var(--gold);
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 72px);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: background .3s ease, height .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  height: 72px;
  background: rgba(6, 20, 45, .93);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}
/*
 * The blur lives on a pseudo-element, and must stay there.
 *
 * backdrop-filter makes an element the containing block for its position:fixed
 * descendants. The mobile menu is a fixed panel inside this header, so putting the blur
 * on .site-header itself makes the panel's inset:0 resolve against the ~72px header
 * instead of the viewport: the navy sheet shrinks to a strip and the links spill out
 * over the page. ::before has no fixed descendants, so it can blur harmlessly.
 *
 * Rendering is unchanged — backdrop-filter always filtered what was behind the header,
 * and the header's own translucent background still paints on top of it.
 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.site-header.scrolled::before { opacity: 1; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: var(--gold);
  border: 2px solid rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 3px var(--navy), 0 0 0 1px var(--gold);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 900;
}
.brand-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: cover;
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(6, 20, 45, .88), 0 0 0 4px rgba(255, 255, 255, .45);
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { letter-spacing: .18em; font-size: 15px; }
.brand-copy small { color: var(--silver); letter-spacing: .32em; font-size: 8px; }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); }
.site-nav a {
  position: relative;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.site-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.site-nav > a:hover::after,
.site-nav > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.site-nav .nav-cta {
  padding: 12px 19px;
  color: var(--navy);
  background: var(--gold);
}
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 780px;
  height: max(100svh, 780px);
  display: flex;
  align-items: center;
  isolation: isolate;
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.hero-art {
  position: absolute;
  z-index: -4;
  inset: 0;
  background: url("assets/scrypto-assemble.webp") center 42% / cover no-repeat;
  transform: scale(1.025);
  animation: hero-settle 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-shade {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 12, 28, .98) 0%, rgba(3, 12, 28, .89) 33%, rgba(3, 12, 28, .26) 68%, rgba(3, 12, 28, .42) 100%),
    linear-gradient(0deg, rgba(3, 12, 28, .92) 0%, transparent 34%);
}
.hero-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.hero-content {
  width: min(760px, 82vw);
  margin-left: max(6vw, calc((100vw - var(--max)) / 2));
  padding-top: 70px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 44px;
  height: 2px;
  background: currentColor;
}
.hero h1,
.statement h2,
.network h2,
.priorities h2,
.join h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .95;
}
.hero h1 { font-size: clamp(66px, 7.5vw, 116px); text-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.hero h1 span, em { color: var(--gold); font-style: italic; }
.hero-lede {
  max-width: 620px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.65;
}
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 54px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button-primary { color: var(--navy); background: var(--gold); }
.button-primary:hover, .button-primary:focus-visible { background: var(--white); }
.text-link {
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}
.text-link span { display: inline-block; margin-left: 9px; color: var(--gold); transition: transform .2s ease; }
.text-link:hover span { transform: translateX(5px); }
.scroll-cue {
  position: absolute;
  right: clamp(24px, 5vw, 72px);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, .58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-decoration: none;
}
.scroll-cue i {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
}
.scroll-cue i::after {
  content: "↓";
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--gold);
  font-style: normal;
}

.section-pad { padding: clamp(90px, 11vw, 150px) max(6vw, calc((100vw - var(--max)) / 2)); }
.section-tag {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 130px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.section-tag span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 9px;
}
.section-tag p { margin: 0; }
.statement {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(40px, 8vw, 120px);
  background:
    radial-gradient(circle at 90% 10%, rgba(244, 183, 53, .14), transparent 25%),
    var(--paper);
}
.statement-copy { display: grid; }
.statement h2 { max-width: 920px; font-size: clamp(54px, 7vw, 96px); }
.statement-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 7vw, 90px);
  margin-top: 60px;
  padding-top: 35px;
  border-top: 1px solid var(--line);
}
.statement-body p {
  margin: 0;
  color: #3d485c;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.75;
}
.statement-body p:first-child { color: var(--ink); font-weight: 600; }

.network {
  position: relative;
  min-height: 780px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  background: #06142d url("assets/scrypto-tree-v1.webp") left center / 72% auto no-repeat;
  color: var(--white);
}
.network::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(6, 20, 45, .08) 45%, rgba(6, 20, 45, .88) 69%, #06142d 82%),
    linear-gradient(0deg, #06142d 0%, transparent 17%, transparent 83%, #06142d 100%);
}
.network-visual {
  position: relative;
  z-index: 1;
  min-height: 680px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle, rgba(46, 94, 157, .12), transparent 58%);
}
.network-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: linear-gradient(135deg, transparent 49.7%, var(--silver) 50%, transparent 50.3%);
  background-size: 38px 38px;
}
.orbit {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(244, 183, 53, .42);
  border-radius: 50%;
  animation: orbit 26s linear infinite;
}
.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2b8 0 10%, var(--gold) 22%, #8e5700 76%);
  box-shadow: 0 0 7px #fff, 0 0 25px var(--gold);
}
.orbit::before { left: 16%; top: 7%; }
.orbit::after { right: 7%; bottom: 20%; }
.orbit-one { width: 72%; aspect-ratio: 1; }
.orbit-two { width: 93%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 34s; }
.orbit-two::before {
  background: radial-gradient(circle at 35% 30%, #f2ffd1 0 10%, #78a936 24%, #183f20 76%);
  box-shadow: 0 0 7px #fff, 0 0 25px #75ba53;
}
.orbit-two::after {
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ccd6e5 24%, #596579 76%);
  box-shadow: 0 0 7px #fff, 0 0 25px #a8c5ed;
}
.network-copy {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(38px, 5vw, 80px);
  padding-right: clamp(30px, 6vw, 90px);
  background: linear-gradient(90deg, rgba(6, 20, 45, .44), rgba(6, 20, 45, .88));
  backdrop-filter: blur(2px);
}
.section-tag.light { color: rgba(255, 255, 255, .5); }
.section-tag.light span { color: var(--gold); border-color: rgba(255, 255, 255, .2); }
.network h2 { margin-top: 46px; font-size: clamp(48px, 4.5vw, 72px); }
.network-copy > p {
  max-width: 540px;
  margin: 38px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 18px;
  line-height: 1.75;
}
.network-line { display: flex; align-items: center; max-width: 480px; margin-top: 48px; }
.network-line span { flex: 1; height: 1px; background: rgba(255, 255, 255, .2); }
.network-line i { width: 10px; height: 10px; border: 2px solid var(--gold); transform: rotate(45deg); }
.network-copy .network-note { margin-top: 18px; color: var(--gold-light); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }

.priorities { background: var(--white); }
.priorities-heading {
  display: grid;
  grid-template-columns: 1.5fr .5fr;
  gap: 60px;
  align-items: end;
  margin-top: 50px;
  padding-bottom: 70px;
}
.priorities h2 { font-size: clamp(56px, 6vw, 90px); }
.priorities-heading > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.priority-list { border-top: 1px solid var(--line); }
.priority {
  display: grid;
  grid-template-columns: 70px 110px 1fr;
  align-items: center;
  min-height: 200px;
  border-bottom: 1px solid var(--line);
  transition: background .25s ease, padding .25s ease;
}
.priority:hover { padding: 0 24px; background: var(--paper); }
.priority-number { align-self: start; padding-top: 32px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.priority-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.priority-icon svg { width: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.priority h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(30px, 3vw, 44px); font-weight: 400; }
.priority p { max-width: 660px; margin: 13px 0 0; color: var(--muted); line-height: 1.65; }

.manifesto {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  min-height: 650px;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(5,17,39,.94), rgba(8,29,61,.87)),
    url("assets/scrypto-assemble.webp") center 42% / cover fixed;
}
.manifesto-crest {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 650px;
  padding: 70px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .15);
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .35));
  background: radial-gradient(circle, rgba(244, 183, 53, .13), transparent 61%);
}
.shield-piece {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(108%, 680px);
  height: auto;
  opacity: 0;
  transition:
    opacity .22s ease,
    transform 1.25s cubic-bezier(.16, .88, .18, 1.08);
  will-change: transform, opacity;
}
.shield-final {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(108%, 680px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease 1.65s;
}
.assembly-axis {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  opacity: 0;
  border-color: rgba(244, 183, 53, .68);
  border-style: dashed;
  pointer-events: none;
}
.assembly-axis-horizontal {
  width: 92%;
  height: 1px;
  border-width: 1px 0 0;
  transform: translate(-50%, -50%);
}
.assembly-axis-vertical {
  width: 1px;
  height: 92%;
  border-width: 0 0 0 1px;
  transform: translate(-50%, -50%);
}
.shield-shell-left {
  clip-path: polygon(8% 13%, 51% 13%, 51% 80%, 8% 74%);
  transform: translate(calc(-50% - 155px), -50%) rotate(-8deg);
}
.shield-shell-right {
  clip-path: polygon(49% 13%, 92% 13%, 92% 74%, 49% 80%);
  transform: translate(calc(-50% + 155px), -50%) rotate(8deg);
}
.shield-pick-left {
  clip-path: polygon(0 0, 51% 0, 51% 36%, 0 36%);
  transform: translate(calc(-50% - 190px), calc(-50% - 125px)) rotate(-24deg);
}
.shield-pick-right {
  clip-path: polygon(49% 0, 100% 0, 100% 36%, 49% 36%);
  transform: translate(calc(-50% + 190px), calc(-50% - 125px)) rotate(24deg);
}
.shield-core {
  clip-path: circle(18% at 50% 51%);
  transform: translate(-50%, -50%) scale(.08) rotate(180deg);
}
.shield-banner {
  clip-path: polygon(3% 68%, 97% 68%, 97% 100%, 3% 100%);
  transform: translate(-50%, calc(-50% + 175px)) scale(.88);
}
.shield-build.visible .shield-piece {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0);
}
.shield-build.visible .shield-final { opacity: 1; }
.shield-build.visible .assembly-axis { animation: assembly-guide 1.75s ease both; }
.shield-build.visible .shield-shell-left { transition-delay: .05s; }
.shield-build.visible .shield-shell-right { transition-delay: .12s; }
.shield-build.visible .shield-pick-left { transition-delay: .32s; }
.shield-build.visible .shield-pick-right { transition-delay: .39s; }
.shield-build.visible .shield-core { transition-delay: .62s; }
.shield-build.visible .shield-banner { transition-delay: .78s; }
.manifesto-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 9vw, 140px);
}
.manifesto blockquote {
  max-width: 760px;
  margin: 20px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

.join {
  position: relative;
  min-height: 700px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--gold);
  overflow: hidden;
}
.join-inner { position: relative; z-index: 2; max-width: 920px; }

/* Scrypto beside the invitation. He is cut out to transparency rather than sitting on his
   own gold panel — the render's background was an amber gradient and would have shown as a
   rectangle against this section's flat --gold. alt="" because the adjacent copy carries the
   meaning; he is decoration, and a screen reader announcing him would only add noise. */
.join-figure {
  position: relative;
  z-index: 2;
  display: block;
  width: min(210px, 52vw);
  height: auto;
  margin: 0 auto 6px;
}
@media (min-width: 980px) {
  /* Two columns only where there is room for both. Below this the figure stacks above the
     copy, because a narrow column beside text makes him tiny and the text unreadable. */
  .join {
    grid-template-columns: auto minmax(0, 620px);
    justify-content: center;
    align-items: center;
    gap: clamp(28px, 4vw, 76px);
    text-align: left;
  }
  .join-figure { width: clamp(230px, 23vw, 340px); margin: 0; align-self: end; }
  .join-inner { max-width: 620px; }
}
.join .eyebrow { justify-content: center; color: var(--ink); }
.join h2 { font-size: clamp(68px, 8vw, 116px); }
.join h2 em { color: var(--white); text-shadow: 2px 3px 0 var(--ink); }
.join p:not(.eyebrow) { max-width: 660px; margin: 30px auto 0; font-size: 18px; line-height: 1.7; }
.button-dark { margin-top: 38px; color: var(--white); background: var(--navy); }
.button-dark:hover, .button-dark:focus-visible { color: var(--navy); background: var(--white); }
.join-rings { position: absolute; inset: 0; display: grid; place-items: center; opacity: .22; }
.join-rings i { position: absolute; width: 54vw; min-width: 700px; aspect-ratio: 1; border: 1px solid var(--navy); border-radius: 50%; }
.join-rings i:nth-child(2) { width: 71vw; }
.join-rings i:nth-child(3) { width: 88vw; }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 48px max(6vw, calc((100vw - var(--max)) / 2));
  color: var(--white);
  background: #030b1b;
}
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand strong { display: block; font-family: Georgia, serif; font-size: 21px; }
.footer-brand p, .footer-meta p { margin: 5px 0 0; color: rgba(255, 255, 255, .48); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footer-meta { text-align: right; }
.footer-meta p:first-child { color: var(--gold); font-weight: 900; }
.footer-meta a { text-decoration: none; }
.footer-meta a:hover, .footer-meta a:focus-visible { text-decoration: underline; }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.hero .reveal { opacity: 1; transform: none; }
@keyframes hero-settle { from { opacity: .5; transform: scale(1.1); } to { opacity: 1; transform: scale(1.025); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes assembly-guide {
  0% { opacity: 0; }
  14% { opacity: .72; }
  72% { opacity: .38; }
  100% { opacity: 0; }
}

/*
 * 979.98px, not 980px. Chrome on Android lays "Desktop site" out at a viewport of
 * exactly 980px, and max-width is inclusive — so a round 980 put desktop mode on the
 * mobile side of the boundary and served the hamburger to someone who explicitly asked
 * for the desktop layout. The fraction also avoids a gap at fractional zoom widths.
 */
@media (max-width: 979.98px) {
  :root { --header-h: 74px; }
  .menu-toggle {
    position: relative;
    z-index: 102;
    width: 46px;
    height: 46px;
    display: grid;
    place-content: center;
    gap: 7px;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
  }
  .menu-toggle span:not(.sr-only) { width: 20px; height: 2px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 0 clamp(24px, 5vw, 72px);
    overflow-y: auto;
    background: var(--navy);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  }
  .site-nav.open { transform: none; }
  .site-nav a { font-family: Georgia, serif; font-size: 34px; font-weight: 400; letter-spacing: 0; }
  .site-nav .nav-cta { font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
  .hero { min-height: 720px; }
  .hero-art { background-position: 58% 45%; }
  .hero-shade { background: linear-gradient(90deg, rgba(3,12,28,.96), rgba(3,12,28,.52)), linear-gradient(0deg, rgba(3,12,28,.9), transparent 42%); }
  .statement { grid-template-columns: 1fr; }
  .network { grid-template-columns: 1fr; }
  .network {
    background:
      linear-gradient(0deg, #06142d 0%, rgba(6, 20, 45, .12) 27%, rgba(6, 20, 45, .06) 72%, #06142d 100%),
      url("assets/scrypto-tree-v1.webp") center top / 100% auto no-repeat,
      #06142d;
  }
  .network::before {
    background: linear-gradient(0deg, #06142d 0%, transparent 42%, transparent 78%, rgba(6, 20, 45, .38) 100%);
  }
  .network-visual { min-height: 580px; }
  .network-copy { padding: 90px 8vw; background: rgba(6, 20, 45, .78); }
  .priorities-heading { grid-template-columns: 1fr; gap: 24px; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto-crest { padding: 70px 20%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
}

@media (max-width: 650px) {
  .site-header { padding: 0 20px; }
  .brand-copy { display: none; }
  .hero { height: 100svh; min-height: 680px; align-items: flex-end; }
  .hero-art { background-position: 60% center; }
  .hero-content { width: auto; margin: 0; padding: 0 22px 110px; }
  .hero h1 { font-size: clamp(52px, 15vw, 72px); }
  .hero-lede { font-size: 16px; line-height: 1.55; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 28px; }
  .scroll-cue { display: none; }
  .section-pad { padding: 80px 22px; }
  .statement-body { grid-template-columns: 1fr; margin-top: 40px; }
  .network-visual { min-height: 440px; }
  .network-copy { padding: 80px 22px; }
  .priority { grid-template-columns: 42px 1fr; gap: 15px; padding: 32px 0; }
  .priority:hover { padding: 32px 10px; }
  .priority-number { grid-row: 1 / 3; }
  .priority-icon { width: 56px; height: 56px; }
  .priority > div:last-child { grid-column: 2; }
  .manifesto-crest { padding: 70px 12%; }
  .manifesto-copy { padding: 80px 22px; }
  .join { min-height: 620px; }
  .join-rings i { min-width: 500px; }
  footer { flex-direction: column; align-items: flex-start; padding: 42px 22px; }
  .footer-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .manifesto { background-attachment: scroll; }
  .shield-piece { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  .shield-final { opacity: 1; }
}

/* ---- community prices (see app/views/public/_price_card.php) ---- */
.price-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 28px 0; }
.price-card { padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--c, var(--navy)); background: #fff; }
.price-card-coin { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.price-card-coin strong { color: var(--c, var(--navy)); }
.price-card-coin span { color: var(--muted); font-weight: 600; }
.price-card-price { margin: 0; font-family: Georgia, serif; font-size: 26px; letter-spacing: -.02em; }
.price-card-change { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.price-card.is-up .price-card-change { color: #1a7f45; }
.price-card.is-down .price-card-change { color: #b3261e; }
.price-card-spark { display: block; width: 100%; height: 32px; margin: 10px 0 0; color: var(--c, var(--navy)); }
.price-card-asof { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.price-card-venues { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.price-card-venues a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.price-card-venues a:hover, .price-card-venues a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }

/* ---- community prices on the landing page ---- */
.prices {
  position: relative;
  padding: clamp(60px, 8vw, 110px) clamp(24px, 5vw, 72px);
  background: var(--paper);
  overflow: hidden;
}
/*
 * A banknote-style guilloche underprint. It is decoration and must never compete with the
 * numbers: kept faint, behind everything, and inert to the pointer. The cards paint opaque
 * white on top, so the only text sitting directly over it is the heading.
 */
.prices::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background: url("assets/market-bg.webp") center / cover no-repeat;
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 55%, transparent 100%);
}
.prices > * { position: relative; z-index: 1; }
.prices h2 { margin: 0 0 8px; }
.prices .price-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 28px 0 0; }
.price-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.price-disclaimer { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

/* ---- latest articles (landing page; see the Latest IIFE in script.js) ---- */
.latest {
  position: relative;
  padding: clamp(64px, 8vw, 116px) clamp(24px, 5vw, 72px);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
/*
 * Dark, not another pale texture. Market above is paper and Join below is gold, so a third
 * light section made the whole lower page one flat wash and the article cards had nothing
 * to stand against. On navy the covers read as lit objects, which is what a news strip
 * wants, and it matches the language of the hero, network and merge sections.
 *
 * The structure is drawn in CSS rather than an image: broadsheet column rules and a wash.
 * Crisp at any width, themeable, and it removes a 38KB asset that was barely visible.
 */
.latest::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 152px),
    radial-gradient(120% 90% at 82% 8%, rgba(244,183,53,.10), transparent 60%),
    radial-gradient(90% 70% at 8% 100%, rgba(52,93,157,.22), transparent 62%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
}
.latest > * { position: relative; z-index: 1; }
/* Market sits directly above Latest and both are on --paper, so their vertical padding was
   stacking into roughly 220px of dead space at the seam. They read as one continuous area,
   so the join between them only needs one section's worth of breathing room. */
.prices + .latest { padding-top: clamp(20px, 2.5vw, 36px); }
.latest h2 { margin: 0 0 8px; color: var(--white); }
.latest .eyebrow { color: var(--gold-light); }

/* Filter chips -- same visual language as blog.css's .chips/.chip, redeclared here
   because index.html only loads styles.css, never blog.css. Real <button>s (not links,
   like the blog page's chips) since filtering here happens client-side, in place. */
.latest-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.latest-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.latest-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--gold)); }
.latest-chip:hover, .latest-chip:focus-visible { border-color: var(--gold); color: var(--white); }
.latest-chip.is-active { color: var(--navy); background: var(--gold); border-color: var(--gold); }

/*
 * auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so with two articles the
 * two cards stretched across the whole row and the section ballooned. auto-fill keeps the
 * tracks card-sized and simply leaves the rest of the row empty, which is what you want for
 * a strip that starts with two communities and grows to seven.
 *
 * align-items: start stops a card with no cover image from stretching to match the height
 * of one that has a cover — that mismatch was the large blank panel beside the first card.
 */
.latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: stretch;
  gap: 20px;
  margin: 24px 0 0;
}
/* The card must reset the colour the dark section sets, or its white background inherits
   white text and the headline disappears. */
.latest-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, .10);
  border-top: 3px solid var(--c, var(--gold));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  transition: transform .25s ease, box-shadow .25s ease;
}
.latest-card a { color: inherit; }
.latest-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(0, 0, 0, .46); }
/* Capped as well as ratio'd: this is a signpost to an article, not a hero image. */
.latest-card-cover { display: block; aspect-ratio: 16 / 9; max-height: 150px; overflow: hidden; background: var(--navy); }
.latest-card-cover img { width: 100%; height: 100%; object-fit: cover; }
/* No cover: the community's colour with its ticker, mirroring .card-cover.placeholder on
   the blog index so the two surfaces look like the same site. */
.latest-card-cover.is-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--navy), var(--c, var(--navy)));
}
.latest-card-cover.is-placeholder span {
  color: rgba(255, 255, 255, .85);
  font-family: Georgia, serif;
  font-size: 30px;
  letter-spacing: .06em;
}
.latest-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
/* Every card the same height: the cover slot is a fixed ratio for all of them (placeholder
   included), the headline is clamped to three lines so a long one cannot stretch its card,
   and the date is pushed to the bottom so the baselines line up across the row. */
.latest-card-body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-card-body .latest-card-date { margin-top: auto; }
.latest-card-meta { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.latest-card-meta strong { color: var(--c, var(--navy)); }
.latest-card-meta span { color: var(--muted); font-weight: 600; }
.latest-card h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.3; }
.latest-card h3 a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.latest-card h3 a:hover, .latest-card h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--gold); }
.latest-card-date { margin: 0; color: var(--muted); font-size: 12px; }

/* ---- merge mining (#merge) ----
   Same shape as .network: art bleeds behind the copy, with a gradient scrim so white text
   keeps its contrast wherever the image happens to be bright. The scrim is not decoration —
   without it the copy fails against the lighter areas of the background. */
.merge {
  position: relative;
  min-height: 640px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  background: #06142d;
  color: var(--white);
  overflow: hidden;
}
.merge-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #06142d url("assets/merge-mining-bg.webp") center / cover no-repeat;
  opacity: .85;
}
.merge::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    /* 90deg, not 270: the artwork's monolith is on the LEFT and the copy is on the RIGHT,
       so the scrim has to be clear at the left and opaque under the text. Reversed, it
       hid the art and lit the empty half. */
    linear-gradient(90deg, transparent 0%, rgba(6, 20, 45, .10) 30%, rgba(6, 20, 45, .86) 58%, #06142d 78%),
    linear-gradient(0deg, #06142d 0%, transparent 22%, transparent 80%, #06142d 100%);
}
/*
 * Deliberately NOT .section-pad: that class pads to max(6vw, (100vw - --max)/2) — 340px a
 * side at 1920 — because it centres a FULL-WIDTH section's content. Inside a grid column
 * it eats the whole column and collapses the text to a ribbon. .network-copy sets its own
 * padding for the same reason.
 */
.merge-copy {
  position: relative;
  z-index: 2;
  grid-column: 2;
  width: min(620px, 100%);
  /* The right edge lands on the same margin as the nav CTA, the network copy and the Market
     section. Before this the block floated mid-column and lined up with nothing on the page. */
  margin-left: auto;
  margin-right: clamp(24px, 5vw, 72px);
  padding: clamp(70px, 9vw, 130px) 0;
}
.merge-copy h2 { margin: 0 0 22px; }
.merge-copy p { color: rgba(255, 255, 255, .80); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; }
.merge-note { color: rgba(255, 255, 255, .58); font-size: 14px; border-left: 2px solid var(--gold); padding-left: 16px; }

/* The seven chains as something you can see, rather than a claim in prose. Each carries its
   community colour; Litecoin is marked parent because it is the chain whose work the others
   can accept. Deliberately no per-coin "merge-mined" badge — that depends on the pool. */
.merge-chains { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 26px; padding: 0; list-style: none; }
.merge-chains li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--c);
  background: rgba(255, 255, 255, .04);
}
.merge-chains b { color: var(--white); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.merge-chains span { color: rgba(255, 255, 255, .5); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.merge-chains .is-parent { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); }

@media (max-width: 979.98px) {
  .merge { grid-template-columns: 1fr; min-height: 0; }
  .merge-copy { grid-column: 1; max-width: none; padding: clamp(48px, 9vw, 90px) clamp(24px, 5vw, 72px); }
  /* On a phone the art is a backdrop, not a companion — drop it back so the copy leads. */
  .merge-art { opacity: .38; }
  .merge::before { background: linear-gradient(0deg, rgba(6,20,45,.94), rgba(6,20,45,.72)); }
}

/* ---- mining figures on the merge section (see the Mining IIFE in script.js) ---- */
/* The merge section is dark, so these inherit its light-on-navy palette rather than
   redeclaring a colour scheme. Both tables scroll inside .mining-scroll instead of
   forcing the page to scroll horizontally on a phone. */
/*
 * Full width, unlike the merge section above it, which is a 620px column beside artwork.
 * That column suits an essay; it cannot hold two tables without scrolling them sideways
 * and stacking everything into one very long strip. The change of layout is also what
 * separates the two dark sections from each other -- narrow-right-column, then edge to
 * edge -- helped by the gold hairline at the join.
 */
.mining {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
  background: var(--navy);
  color: var(--white);
  border-top: 1px solid rgba(244, 183, 53, .28);
}
.mining::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 15% 0%, rgba(244, 183, 53, .07), transparent 62%);
}
.mining-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
}
.mining-inner h2 { margin: 0 0 30px; color: var(--white); }
/* Table left, the sentence that reads it right -- evidence beside its interpretation,
   rather than a second block of numbers underneath the first. */
.mining-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin: 0 0 12px;
}
.mining-read p { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.mining-read .mining-h { margin-top: 0; }
.mining-h {
  margin: 34px 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.mining-scroll { overflow-x: auto; }
.mining-hash, .mining-rigs {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.mining-hash th, .mining-rigs th {
  text-align: right;
  padding: 8px 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.mining-hash th:first-child, .mining-rigs th:first-child { text-align: left; }
.mining-hash td, .mining-rigs td {
  padding: 9px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mining-hash td:first-child, .mining-rigs td:first-child { text-align: left; }
/* The chain's own colour, carried on --c exactly as the .merge-chains pills carry it. */
.mining-hash tr td:first-child b { color: var(--c, var(--white)); }
.mining-hash .is-parent td { background: rgba(255, 255, 255, .04); }
.mining-hash td:first-child small,
.mining-rigs td:first-child small {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
/* Current-generation hardware carries the comparison; the older pair is context. */
.mining-rigs .is-headline td { font-weight: 700; }
.mining-rigs .is-dim td { color: rgba(255, 255, 255, .58); }
.mining-rigs .is-loss { color: #ff9c8a; }
.mining-rigs .is-win { color: #7fe0a8; }

.mining-verdict {
  margin: 0 0 14px;
  max-width: 60ch;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.45;
}
.mining-verdict b { color: var(--gold-light); }

.mining-calc {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.mining-calc label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.mining-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}
.mining-field input, .mining-field select {
  width: 6.5em;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  background: rgba(0, 0, 0, .25);
  color: var(--white);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.mining-field select { width: auto; }
.mining-field input:focus-visible, .mining-field select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.mining-asof {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}
/* Same breakpoint the merge section collapses at, so the two dark sections stop being
   side-by-side layouts at the same width rather than one at a time. */
@media (max-width: 979.98px) {
  .mining-proof { grid-template-columns: 1fr; gap: 20px; }
  /* Table first on desktop reads as evidence-then-reading; stacked, the sentence has to
     come first or the reader meets seven rows of numbers with nothing framing them. */
  .mining-proof .mining-read { order: -1; }
}