/* =========================================================
   ADNA.ai — Production Stylesheet v1.2
   GhostFire Digital × Mint-to-Deploy™
   Change summary (v1.2): body.grid dot field (14px lab paper) painted as one layered background, no
     overlay element; sequenced in with the trace; a stencil lens lights the grid in A/C/G/T colors
     around the cursor. Belongs tint is now translucent so the grid runs through it; studio carries
     its own paper-dot grid on ink.
   Change summary (v1.1): trace caption row + base color legend tucked under the trace; hero-foot
     tightened and top-aligned so the hero line and Buy peak land above the fold on laptops.
     Wordmark, trace and hero padding also scale with viewport height, so the caption row never
     straddles the fold on short windows.
   Change summary (v1.0): initial build. Cool bench-white paper, blue-black ink, the four Sanger
     trace colors as the only accents. Instrument Serif display, Geist text, Martian Mono for
     base calls only. CTAs are chromatogram peaks and trace-underlined reads. No boxes.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --paper: #f2f4f0;
  --paper-2: #e7eae3;
  --ink: #121624;
  --ink-2: #3c4252;
  --ink-3: #646a79;
  --rule: #d3d8cf;

  /* Sanger chromatogram convention */
  --base-a: #11995a;
  --base-t: #d8382c;
  --base-c: #2a5bd6;
  --base-g: #121624;

  --f-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;

  --shell: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--f-sans); font-size: 17px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--base-c); outline-offset: 4px; border-radius: 2px; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.012em; max-width: 18ch; }
.lede { margin-top: 22px; max-width: 58ch; color: var(--ink-2); font-size: 1.08rem; }

/* ---------- Dot field: lab paper with a sequencer lens ----------
   One background, four layers, top to bottom:
   1. reveal  — paper wash right of --rv, swept open by the trace read head (grimy.js)
   2. stencil — paper with a 2px hole every 14px: the holes are the dots
   3. lens    — dot grey everywhere except a clear spotlight at --mx/--my
   4. bases   — A/C/G/T colored squares under the holes, seen only through the lens */
body.grid {
  --dot: #d0d3ce;
  background:
    linear-gradient(90deg, transparent var(--rv, 100%), var(--paper) var(--rv, 100%)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%23f2f4f0' fill-rule='evenodd' shape-rendering='crispEdges' d='M0 0h14v14H0zM0 0h2v2H0z'/%3E%3C/svg%3E") 0 0 / 14px 14px repeat,
    radial-gradient(circle 240px at var(--mx, -999px) var(--my, -999px), rgba(208, 211, 206, 0) 0, rgba(208, 211, 206, .5) 45%, var(--dot) 100%) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%2311995a'/%3E%3Crect x='14' width='2' height='2' fill='%232a5bd6'/%3E%3Crect y='14' width='2' height='2' fill='%23d8382c'/%3E%3Crect x='14' y='14' width='2' height='2' fill='%23121624'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 28px 28px repeat,
    var(--dot);
}

/* ---------- Read link: text over a trace line ---------- */
.read {
  position: relative; display: inline-block; padding: 6px 0 14px; font-weight: 500; text-decoration: none; color: var(--ink);
}
.read::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 9 C6 9 8 2 12 2 S18 9 24 9 S30 5 34 5 S40 9 48 9' fill='none' stroke='%23646a79' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 48px 10px repeat-x;
  transition: background-position .9s var(--ease), opacity .3s;
}
.read:hover::after, .read:focus-visible::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 9 C6 9 8 1 12 1 S18 9 24 9 S30 4 34 4 S40 9 48 9' fill='none' stroke='%232a5bd6' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: 48px 0;
}
.read:focus-visible { outline: none; }

/* ---------- Peak: the primary action, shaped like a chromatogram peak ---------- */
.peak {
  position: relative; isolation: isolate; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-width: 250px; padding: 38px 40px 15px; border: 0; background: none; cursor: pointer; text-decoration: none;
  color: var(--paper); font-weight: 600; font-size: 1.02rem; line-height: 1.2; text-align: center;
  transition: transform .45s var(--ease);
}
.peak::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 V50 C46 50 66 2 100 2 S154 50 200 50 V80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 V50 C46 50 66 2 100 2 S154 50 200 50 V80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transition: background-color .35s var(--ease);
}
.peak small { display: block; margin-top: 3px; font-family: var(--f-mono); font-weight: 400; font-size: .72rem; letter-spacing: .02em; opacity: .78; }
.peak:hover, .peak:focus-visible { transform: translateY(-3px); }
.peak:hover::before, .peak:focus-visible::before { background: var(--base-a); }
.peak:focus-visible { outline: none; }
.peak:focus-visible::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--base-c); }
.peak[disabled] { opacity: .6; cursor: progress; }

/* ---------- Header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.top.is-solid { background: rgba(242, 244, 240, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--rule); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.top-mark { font-family: var(--f-serif); font-size: 1.6rem; line-height: 1; text-decoration: none; }
.top-mark span { color: var(--ink-3); }
.top-nav { display: flex; align-items: center; gap: 30px; font-size: .95rem; }
.top-nav a:not(.read) { text-decoration: none; color: var(--ink-2); }
.top-nav a:not(.read):hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(84px, 12vh, 150px); }
.mark {
  display: flex; align-items: baseline; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(6.6rem, min(22vw, 32vh), 21rem); line-height: .78; letter-spacing: .015em;
}
.mark .l { display: inline-block; }
.mark .tld { margin-left: .06em; font-size: .3em; letter-spacing: 0; color: var(--ink-3); }
.trace-wrap { position: relative; margin-top: clamp(10px, 2vh, 28px); }
#trace { display: block; width: 100%; height: clamp(120px, 21vh, 270px); cursor: crosshair; touch-action: pan-y; }
.readout {
  position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 7px 11px 6px; border-radius: 6px; background: var(--ink); color: var(--paper);
  font-size: .85rem; line-height: 1.35; opacity: 0; transform: translate(-50%, -8px); transition: opacity .2s;
}
.readout b { font-family: var(--f-mono); font-weight: 500; margin-right: 6px; }
.readout.is-on { opacity: 1; }
.trace-key { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 28px; margin-top: 2px; font-size: .88rem; color: var(--ink-3); }
.legend { white-space: nowrap; }
.legend span { margin: 0 6px 0 10px; font-family: var(--f-mono); font-weight: 500; font-size: .8rem; }
.legend span:first-child { margin-left: 0; }
.legend .la { color: var(--base-a); }
.legend .lc { color: var(--base-c); }
.legend .lg { color: var(--base-g); }
.legend .lt { color: var(--base-t); }

.hero-foot { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 6vw, 96px); align-items: start; padding-top: clamp(14px, 2.4vh, 32px); padding-bottom: clamp(80px, 10vw, 130px); }
.hero-line { font-family: var(--f-serif); font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; max-width: 22ch; }
.hero-copy { margin-top: 18px; max-width: 50ch; color: var(--ink-2); }
.hero-act { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 36px; justify-self: end; }
.hero-note { flex-basis: 100%; font-size: .88rem; color: var(--ink-3); text-align: right; }

/* ---------- Readings ---------- */
.readings { padding: clamp(90px, 11vw, 150px) 0; border-top: 1px solid var(--rule); }
.readings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); margin-top: clamp(48px, 6vw, 80px); }
.reading h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; }
.reading > p { margin-top: 16px; max-width: 46ch; color: var(--ink-2); }
.uses { margin-top: 26px; list-style: none; display: grid; gap: 12px; }
.uses li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.uses li::before { content: ""; width: 14px; height: 9px; margin-top: 9px; background: var(--base-a); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C8 18 10 1 14 1 S20 18 28 18 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C8 18 10 1 14 1 S20 18 28 18 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.uses li:nth-child(2)::before { background: var(--base-c); }
.uses li:nth-child(3)::before { background: var(--base-t); }

.codes { margin-top: 26px; border-collapse: collapse; width: 100%; }
.codes td { padding: 14px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.codes tr:first-child td { border-top: 1px solid var(--rule); }
.codes .g { width: 112px; padding-right: 18px; }
.codes .g svg { display: block; width: 96px; height: 40px; overflow: visible; }
.codes .k { width: 52px; font-family: var(--f-mono); font-weight: 500; font-size: 1.25rem; }
.codes .m { color: var(--ink-2); }
.codes .m b { color: var(--ink); font-weight: 600; }
.cite { margin-top: 16px; font-size: .88rem; color: var(--ink-3); max-width: 52ch; }
.cite a { color: var(--ink-2); text-underline-offset: 3px; }
.aside { grid-column: 1 / -1; padding-top: 34px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: baseline; }
.aside-k { font-family: var(--f-serif); font-size: 2.3rem; line-height: 1; }
.aside-k i { color: var(--ink-3); }
.aside p { max-width: 70ch; color: var(--ink-2); }

/* ---------- Where it belongs: an alignment ---------- */
.belongs { padding: clamp(90px, 11vw, 150px) 0; background: rgba(18, 22, 36, .045); }
.align { margin-top: clamp(44px, 6vw, 72px); list-style: none; border-top: 1px solid var(--rule); }
.align li { display: grid; grid-template-columns: 9ch minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.seq { font-family: var(--f-mono); font-weight: 500; font-size: 1rem; letter-spacing: .32em; color: var(--ink-3); transition: color .3s; }
.seq span { transition: color .3s; }
.align li:hover .seq .sa, .align li:focus-within .seq .sa { color: var(--base-a); }
.align li:hover .seq .sd, .align li:focus-within .seq .sd { color: var(--base-t); }
.align li:hover .seq .sn, .align li:focus-within .seq .sn { color: var(--base-c); }
.align h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.12; }
.align p { color: var(--ink-2); }

/* ---------- Acquire ---------- */
.acquire { padding: clamp(90px, 11vw, 150px) 0; }
.acq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.price { font-family: var(--f-serif); font-variant-numeric: lining-nums; font-size: clamp(4.2rem, 9vw, 7.4rem); line-height: .9; letter-spacing: -.01em; }
.price-cap { margin-top: 10px; color: var(--ink-3); font-size: .95rem; }
.facts { margin-top: 34px; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--rule); }
.facts dt, .facts dd { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { padding-right: 28px; color: var(--ink-3); font-size: .95rem; }
.facts dd { color: var(--ink); }
.acq-act { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 34px; margin-top: 40px; }
.acq-note { margin-top: 16px; font-size: .9rem; color: var(--ink-3); max-width: 46ch; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.form h3 { grid-column: 1 / -1; font-family: var(--f-serif); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1.05; }
.form-intro { grid-column: 1 / -1; margin-top: -10px; color: var(--ink-2); max-width: 48ch; }
.field { display: grid; gap: 4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .88rem; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 0 10px; border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0; background: transparent; font-size: 1.05rem; color: var(--ink);
  -webkit-appearance: none; appearance: none; outline: none; transition: border-color .25s;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23646a79' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom: 2px solid var(--base-a); padding-bottom: 9px; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 30px; margin-top: 6px; }
.form-alt { font-size: .92rem; color: var(--ink-3); }
.status { grid-column: 1 / -1; display: none; padding: 4px 0 4px 16px; border-left: 3px solid var(--base-a); color: var(--ink-2); }
.status.ok { display: block; }
.status.err { display: block; border-left-color: var(--base-t); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Studio ---------- */
.studio { padding: clamp(80px, 10vw, 130px) 0; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='1.5' height='1.5' fill='%23f2f4f0' fill-opacity='.1' shape-rendering='crispEdges'/%3E%3C/svg%3E") 0 0 / 14px 14px repeat; color: var(--paper); }
.studio-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: end; }
.studio h2 { max-width: 16ch; }
.studio p { color: rgba(242, 244, 240, .74); max-width: 52ch; }
.studio p + p { margin-top: 14px; }
.studio .read { color: var(--paper); margin-top: 22px; }
.studio .read::after { filter: invert(1) brightness(1.4); }
.studio .read:hover::after, .studio .read:focus-visible::after { filter: none; }

/* ---------- Footer ---------- */
.foot { padding: 34px 0 40px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-3); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 14px 30px; }
.foot-motto { font-family: var(--f-serif); font-size: 1.25rem; color: var(--ink); }
.foot a { color: var(--ink-2); text-underline-offset: 3px; }

/* ---------- Back to top: a strand you can climb ---------- */
.climb {
  position: fixed; right: clamp(16px, 2.6vw, 34px); bottom: clamp(16px, 3vw, 30px); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.climb.is-on { opacity: 1; visibility: visible; transform: none; }
.climb svg { width: 26px; height: 64px; overflow: visible; }
.climb .s1 { stroke: var(--base-a); }
.climb .s2 { stroke: var(--base-c); }
.climb .rung { stroke: var(--rule); }
.climb .tip { stroke: var(--ink); }
.climb svg path, .climb svg line { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.climb span { font-size: .78rem; color: var(--ink-3); opacity: 0; transition: opacity .25s; }
.climb:hover span, .climb:focus-visible span { opacity: 1; }
.climb:hover .strands, .climb:focus-visible .strands { animation: twist 1.4s linear infinite; transform-origin: 13px 40px; }
@keyframes twist { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.climb:focus-visible { outline: none; }
.climb:focus-visible svg { outline: 2px solid var(--base-c); outline-offset: 6px; border-radius: 4px; }

/* ---------- Responsive ---------- */
@media (min-width: 1100px) {
  .foot-in { padding-right: 56px; }
}
@media (max-width: 960px) {
  .hero-foot, .readings-grid, .acq-grid, .studio-in { grid-template-columns: 1fr; }
  .hero-act { justify-self: start; }
  .hero-note { text-align: left; }
  .top-nav a:not(.read) { display: none; }
  .align li { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .form { grid-template-columns: 1fr; }
  .peak { min-width: 0; width: 100%; }
  .hero-act, .acq-act { gap: 18px; }
  .aside { grid-template-columns: 1fr; gap: 8px; }
  .codes .g { width: 84px; }
  .codes .g svg { width: 72px; }
  .top-mark { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}