/* Scintilla overrides on top of the shared landing stylesheets.
   Art is drawn as masked ink so one asset serves both themes. */

:root {
  --wordmark-ae-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 28 H92 V38 H8 Z M30 70 a20 20 0 1 0 40 0 a20 20 0 1 0 -40 0 Z'/%3E%3C/svg%3E");
  --star: var(--wordmark-ae-glyph);
}

.skip-content {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 300;
  padding: 10px 14px;
  background: var(--action);
  color: var(--on-action);
  font: 10px var(--pixel);
}
.skip-content:focus {
  left: 8px;
  top: 8px;
}

/* ---- Artwork --------------------------------------------------------- */
.art {
  background: var(--art-ink);
  -webkit-mask: var(--art) center bottom / contain no-repeat;
  mask: var(--art) center bottom / contain no-repeat;
  pointer-events: none;
  will-change: transform;
}
.hero-field.art {
  -webkit-mask-image: var(--art), linear-gradient(90deg, transparent 0, #000 46%);
  mask-image: var(--art), linear-gradient(90deg, transparent 0, #000 46%);
  -webkit-mask-size: auto 100%, 100% 100%;
  mask-size: auto 100%, 100% 100%;
  -webkit-mask-position: right center, 0 0;
  mask-position: right center, 0 0;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.chapter-field.art {
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}
.token-coins-field.art {
  -webkit-mask-position: center;
  mask-position: center;
}
.footer-field.art {
  background: var(--footer-art);
  -webkit-mask: var(--art) right 7% bottom / auto 88% no-repeat;
  mask: var(--art) right 7% bottom / auto 88% no-repeat;
}
.surface-grain {
  background: radial-gradient(circle, var(--section-grain) 1.1px, transparent 1.6px) 0 0 / 6px 6px;
}
.surface-grain-top {
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.surface-grain-bottom {
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}

/* ---- Wordmark and coin star ------------------------------------------ */
.tk-coin .star {
  display: block;
  width: 52%;
  height: 52%;
  background: var(--ink);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

/* ---- Small additions the original compositions do not need ----------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.chip-row li {
  padding: 7px 10px;
  border: 1px solid var(--lp-line);
  font: 8px/1.4 var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lp-muted);
}
.router-line {
  margin: 0 0 30px;
}
.chapter .position-trio {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
}
.chapter .position-trio .position-card {
  display: block;
  grid-row: auto;
}
.chapter .position-trio .position-card + .position-card {
  border-left: 0;
  border-top: 1px solid var(--lp-line);
}
.chapter .position-trio .position-card > dl {
  display: block;
}
@media (min-width: 1500px) {
  .chapter .position-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto repeat(4, auto);
  }
  .chapter .position-trio .position-card {
    display: grid;
    grid-row: span 7;
  }
  .chapter .position-trio .position-card > dl {
    display: contents;
  }
  .chapter .position-trio .position-card + .position-card {
    border-top: 0;
    border-left: 1px solid var(--lp-line);
  }
}
.fee-table {
  border: 1px solid var(--lp-line);
  background: var(--lp-card);
  box-shadow: var(--lp-box-shadow);
}
.fee-table th,
.fee-table td {
  border-bottom: 1px solid var(--lp-line);
  padding: 18px 16px;
}
.fee-table thead th {
  font: 9px/1 var(--pixel);
  text-transform: uppercase;
  color: var(--lp-muted);
  font-weight: 400;
}
.fee-table thead th:last-child {
  color: var(--accent);
}
.fee-table tbody td:last-child {
  font-weight: 600;
}
.asset-card[hidden] {
  display: none;
}
/* ---- Scroll behaviour ------------------------------------------------- */
[data-par] {
  transition: transform 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  [data-par] {
    transform: none !important;
  }
}

/* Code sample inside the intent sheet */
.code {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--lp-line);
  background: var(--lp-faint);
  font: 12px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
}
.code code {
  font: inherit;
  white-space: pre;
}

/* Page scale (--z; 1 = 100%): CSS zoom, with viewport units compensated so the
   layout fills the window exactly as at 100%. */
:root {
  --z: 1;
}
html {
  zoom: var(--z);
}

/* Size balance: the headline keeps two lines, and the footer art and
   wordmark sit in proportion. */
@media (min-width: 1000px) {
  .landing-composition .hero-type {
    width: 760px;
  }
  .footer-wordmark {
    font-size: clamp(44px, calc(5.2vw / var(--z)), 72px);
  }
  .final-copy .footer-message {
    font-size: clamp(24px, calc(2.6vw / var(--z)), 38px);
  }
  .footer-field.art {
    -webkit-mask: var(--art) right 9% bottom 9% / auto 70% no-repeat;
    mask: var(--art) right 9% bottom 9% / auto 70% no-repeat;
  }
}

/* Narrow windows and phones: headline fits in two lines, text sits at the top
   and the scene occupies the lower part of the hero so the two do not collide. */
@media (max-width: 900px) {
  .landing-composition .hero-type {
    justify-content: flex-start;
    padding-top: 104px;
  }
  .landing-composition .hero-type h1 {
    font-size: clamp(36px, calc(9vw / var(--z)), 64px);
    line-height: 1.02;
  }
  .landing-composition .hero-type .ser {
    padding-top: 6px;
  }
  .landing-composition .lede {
    max-width: 30ch;
    margin-top: 18px;
  }
  .hero-field.art {
    -webkit-mask-image: var(--art), linear-gradient(90deg, transparent 0, #000 14%);
    mask-image: var(--art), linear-gradient(90deg, transparent 0, #000 14%);
    -webkit-mask-size: auto 40%, 100% 100%;
    mask-size: auto 40%, 100% 100%;
    -webkit-mask-position: 80% 100%, 0 0;
    mask-position: 80% 100%, 0 0;
  }
}

/* Hero legibility: solid text instead of the blend-difference effect, and the
   scene fades out before it reaches the copy. */
.hero-type > p:not(.hero-cta),
.hero-type h1 .line:first-child,
.hero-type .hero-secondary {
  mix-blend-mode: normal;
}
.hero-type .hero-kicker,
.hero-type .lede,
.hero-type h1 .line:first-child,
.hero-type .hero-secondary {
  color: var(--ink);
  text-shadow: 0 0 20px var(--paper), 0 0 8px var(--paper);
}
@media (min-width: 901px) {
  .hero-field.art {
    -webkit-mask-image: var(--art), linear-gradient(90deg, transparent 0, transparent 38%, #000 66%);
    mask-image: var(--art), linear-gradient(90deg, transparent 0, transparent 38%, #000 66%);
    -webkit-mask-position: calc(100% + 90px) center, 0 0;
    mask-position: calc(100% + 90px) center, 0 0;
  }
}

/* ---- Larger type, smaller art ------------------------------------------
   Body copy and the small pixel labels are raised about 20-30% so they read
   comfortably next to the artwork; the art columns get narrower. */
.landing-editorial {
  --story-title-size: 23px;
  --story-description-size: 16px;
  --story-number-size: 13px;
  --list-data-title-size: 18px;
  --list-data-text-size: 15px;
}
.landing-composition .lede { font-size: 22px; }
.landing-composition .section-aside,
.landing-editorial .chapter .section-aside { font-size: 20px; line-height: 1.75; max-width: 46ch; }
.landing-editorial .manager-description { font-size: 21px; }
.landing-editorial .stage-note { font-size: 16px; }
.landing-editorial .position-footnote p { font-size: 15px; }
.landing-editorial .fund-identity p { font-size: 15px; }
.landing-editorial .fund-identity h3,
.landing-editorial .chapter .position-card h3 { font-size: 27px; }
.funds-caption,
.landing-editorial .launchpad-section .funds-caption { font-size: 16px; max-width: 60ch; }
.landing-editorial .chapter .walkthrough-steps strong,
.walkthrough-steps strong { font-size: 24px; }
.walkthrough-steps small { font-size: 15px; }

.landing-editorial .eyebrow { font-size: 13px; }
.landing-editorial .chapter-art-note .eyebrow,
.landing-editorial .fund-facts .eyebrow,
.landing-editorial .allocation-title .eyebrow,
.landing-editorial .chart-heading .eyebrow,
.landing-editorial .walkthrough-caption,
.landing-editorial .blueprint-footer,
.landing-editorial .chart-axis { font-size: 12px; }
.quiet-link,
.landing-editorial .window-bottom .quiet-link,
.landing-editorial .position-footnote .quiet-link { font-size: 14px; }
.landing-editorial .fund-facts strong { font-size: 16px; }
.fund-facts span { font-size: 14px; }
.allocation-list strong { font-size: 15px; }
.allocation-list div span { font-size: 14px; }
.allocation-list li > span:last-child { font-size: 15px; }
.window-bottom > span { font-size: 14px; }
.chart-mark, .sample-tag, .step-number { font-size: 12px; }
.token-equation { font-size: 12px; }
.token-ticker { font-size: 14px; }
.asset-filters button { font-size: 13px; }
.asset-cash { font-size: 12px; }
.asset-name strong { font-size: 20px; }
.asset-name small { font-size: 15px; }
.asset-kind, .asset-status, .asset-card-bottom .eyebrow, .asset-card-more .eyebrow { font-size: 12px; }
.asset-price { font-size: 22px; }
.asset-card-more strong { font-size: 20px; }
.asset-card-more small { font-size: 15px; }
.play-choice, .flow-chips { font-size: 12px; }
.fa-route { font-size: 18px; }
.fa-route .pixel, .fa-asset, .fa-vault-inner .pixel { font-size: 13px; }
.fa-route small, .fa-node > small { font-size: 14px; }
.fa-node > .flow-label { font-size: 12px; }
.fee-table { font-size: 16px; }
.fee-table thead th { font-size: 13px; }
.code { font-size: 15px; }
.tokenomics-caption .token-art-credit { font-size: 12px; }
.landing-editorial .token-publication-note,
.token-publication-note { font-size: 15px; }
.token-publication-note .pixel { font-size: 12px; }
.position-card .eyebrow { font-size: 12px; }
.position-card dt { font-size: 14px; }
.route-caption { font-size: 14px; }

.landing-composition .hero-kicker { font-size: 14px; }
.hero-type .hero-secondary, .hero-scroll, .landing-composition .hero-status { font-size: 13px; }
.hero-colophon { font-size: 12px; }
.landing-composition .nav, .landing-composition .nav .pill { font-size: 14px; }
.landing-composition .footer-links nav a { font-size: 14px; }
.footer-links nav .pixel, .footer-caution .pixel, .footer-bottom .pixel { font-size: 14px; }
.footer-caution { font-size: 15px; }
.landing-menu nav a { font-size: 15px; }

@media (min-width: 901px) {
  .landing-editorial .chapter { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); }
  .landing-editorial .chapter-right { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); }
  .hero-field.art {
    -webkit-mask-size: auto 86%, 100% 100%;
    mask-size: auto 86%, 100% 100%;
  }
  .footer-field.art {
    -webkit-mask: var(--art) right 9% bottom 9% / auto 60% no-repeat;
    mask: var(--art) right 9% bottom 9% / auto 60% no-repeat;
  }
}

/* ---- Logo: the Doric-column "i" with its pixel sun ---------------------- */
:root {
  --star: url("assets/logo/mark.svg");
}
.wordmark-i {
  display: inline-block;
  flex: none;
  height: 0.86em;
  aspect-ratio: 109 / 268;
  margin-right: 0.05em;
  vertical-align: -0.03em;
}
.wordmark-i svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tk-coin .star {
  width: 40%;
  height: 56%;
}