/* ═══════════════════════════════════════════════════════════════
   FUSE · a cyanotype, the whole page
   The page is one technical drawing printed as a cyanotype: Prussian
   blue paper, white lines, zone letters along the top and bottom
   margins and numbers down the sides, a title block at the bottom
   right. The cord is drawn in section across the sheet, from an
   anchor ring to the drum that is the reserve, with dimension lines
   for the full cord and for what is left, a spark at the burning end,
   the burned part shown as a removed line. The two stamps to trade
   sit beside the title. One warm colour, the spark, and the hatching
   of the reserve. Nothing else on the sheet is not white or blue.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: "Barlow Semi Condensed"; src: url("assets/fonts/barlowsemicondensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("assets/fonts/barlowsemicondensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --blue:      #14417c;
  --blue-cold: #113a72;   /* the sheet in the last stretch of cord */
  --blue-deep: #0b2a55;   /* the table under the sheet */
  --line:      #eef4ff;
  --line-2:    rgba(238, 244, 255, .68);
  --line-3:    rgba(238, 244, 255, .32);
  --line-4:    rgba(238, 244, 255, .1);
  --spark:     #ffcf5c;

  --display: "Barlow Semi Condensed", "Barlow", sans-serif;
  --text: "Barlow", system-ui, -apple-system, sans-serif;
  --fig: clamp(20px, 2.2vw, 27px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: clamp(16px, 3vw, 44px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; background: var(--blue-deep); }

body {
  margin: 0;
  background: var(--blue-deep);
  color: var(--line);
  font-family: var(--text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
code { font-family: var(--text); font-weight: 600; letter-spacing: .01em; }
::selection { background: var(--spark); color: var(--blue-deep); }
:focus-visible { outline: 3px solid var(--spark); outline-offset: 3px; }

/* ─── the sheet ───────────────────────────────────────────────── */

.sheet {
  position: relative; margin: 12px; min-height: calc(100vh - 24px);
  border: 2px solid var(--line);
  background-color: var(--blue);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255, 255, 255, .06), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(5, 22, 50, .5) 100%);
  transition: background-color .8s ease;
}
.sheet.near { background-color: var(--blue-cold); }

.zones { position: absolute; display: grid; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; color: var(--line-3); pointer-events: none; }
.zones span { display: grid; place-items: center; }
.zones.top, .zones.bottom { left: 28px; right: 28px; height: 26px; grid-template-columns: repeat(8, 1fr); }
.zones.top { top: 0; border-bottom: 1px solid var(--line-3); }
.zones.bottom { bottom: 0; border-top: 1px solid var(--line-3); }
.zones.left, .zones.right { top: 26px; bottom: 26px; width: 28px; grid-template-rows: repeat(8, 1fr); }
.zones.left { left: 0; border-right: 1px solid var(--line-3); }
.zones.right { right: 0; border-left: 1px solid var(--line-3); }
.zones.top span, .zones.bottom span { border-right: 1px solid var(--line-4); }
.zones.top span:last-child, .zones.bottom span:last-child { border-right: 0; }
.zones.left span, .zones.right span { border-bottom: 1px solid var(--line-4); }
.zones.left span:last-child, .zones.right span:last-child { border-bottom: 0; }

/* ─── the strip: the mark and the tags ────────────────────────── */

.strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 44px calc(28px + var(--pad)) 0; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark img { width: 30px; height: 30px; border-radius: 6px; }
.mark span { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: .1em; text-transform: uppercase; }
.mark small { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); padding-left: 10px; border-left: 1px solid var(--line-3); }
.tags { display: flex; align-items: center; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; cursor: pointer; text-decoration: none;
  background: none; border: 1.5px solid var(--line-2); border-radius: 3px; color: var(--line);
  font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
}
.tag:hover, .tag:focus-visible { border-color: var(--line); background: var(--line-4); }
.tag:disabled { opacity: .5; cursor: default; }
.wallet-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); }
.wallet-btn.is-on .wallet-dot { background: var(--spark); }
.wallet-btn.is-off .wallet-dot { background: var(--line); }

/* ─── the zone: everything drawn on the sheet ─────────────────── */

.zone { padding: 0 calc(28px + var(--pad)) 44px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title stamps" "drawing drawing"; gap: 34px 48px; align-items: end; padding-top: 40px; }
.title { grid-area: title; max-width: 900px; }
.kicker { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--line-2); }
.kicker b { color: var(--line); }
.h1 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 66px); line-height: .98; letter-spacing: .005em; text-transform: uppercase; margin: 10px 0 16px; text-wrap: balance; }
.sub { font-size: 18px; line-height: 1.5; color: var(--line-2); max-width: 66ch; }
.sub code { color: var(--line); }

/* the stamps */
.stamps { grid-area: stamps; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding-bottom: 6px; }
.stamp {
  width: 252px; padding: 12px 16px 10px; cursor: pointer; text-align: left;
  background: none; color: var(--line); border: 2px solid var(--line); border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 4.5px var(--line-2);
  display: flex; flex-direction: column; gap: 2px;
  transition: background-color .1s ease, transform .08s ease;
}
.stamp span { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px 0; }
.stamp small { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--line-2); padding: 0 6px 4px; white-space: nowrap; }
.stamp.buy { transform: rotate(-3deg); }
.stamp.sell { transform: rotate(2deg); }
.stamp:hover { background: var(--line-4); }
.stamp:active { background: var(--line); color: var(--blue); }
.stamp:active small { color: var(--blue); }
.stamp.buy:active { transform: rotate(-3deg) scale(.96); }
.stamp.sell:active { transform: rotate(2deg) scale(.96); }
.stamp-note { font-size: 13px; color: var(--line-2); max-width: 252px; text-align: right; }

/* the drawing */
.drawing { grid-area: drawing; }
.zero { font-family: var(--display); font-weight: 600; font-size: var(--fig); line-height: 1.25; letter-spacing: .005em; max-width: 44em; text-wrap: balance; }
.zero code { color: var(--spark); }
#dwg { width: 100%; height: 380px; margin-top: 8px; }
.figure { font-family: var(--display); font-weight: 600; font-size: var(--fig); line-height: 1.25; color: var(--line-2); margin-top: 6px; }
.figure b { color: var(--line); font-variant-numeric: tabular-nums; }
.figure b.warm { color: var(--spark); }
.small-figs { margin-top: 8px; font-size: 14px; color: var(--line-2); }
.small-figs b { color: var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }
.caption { margin-top: 18px; font-size: 17.5px; line-height: 1.5; max-width: 82ch; min-height: 3.2em; }
.caption b { font-weight: 600; color: var(--spark); }
.fine { margin-top: 10px; font-size: 12.5px; color: var(--line-2); max-width: 90ch; }

/* what is drawn in the svg */
.cord-out { fill: none; stroke: var(--line); stroke-width: 13; stroke-linecap: round; }
.cord-in { fill: none; stroke: var(--blue); stroke-width: 9; stroke-linecap: round; }
.sheet.near .cord-in { stroke: var(--blue-cold); }
.cord-gone { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.tick { stroke: var(--line); stroke-width: 1.5; }
.tick.thick { stroke-width: 3; }
.ring { fill: none; stroke: var(--line); stroke-width: 2.5; }
.thin { stroke: var(--line-2); stroke-width: 1.5; }
.dim { stroke: var(--line-2); stroke-width: 1; }
.dim-t, .lab { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--line-2); }
.drum { fill: none; stroke: var(--line); stroke-width: 2.5; }
.drum-fill { fill: url(#hatch); }
.hatch-line { stroke: var(--spark); stroke-width: 2; }
.level { stroke: var(--spark); stroke-width: 2; stroke-dasharray: 6 4; }
.fig-txt { font-family: var(--display); font-weight: 700; font-size: 24px; fill: var(--spark); }
.spark path { fill: var(--spark); stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.spark circle { fill: var(--blue); }

/* ─── below the drawing ───────────────────────────────────────── */

.h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; }
.lead { margin-top: 10px; max-width: 72ch; color: var(--line-2); }
.figs, .notes, .plain, .revs { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line-3); }

.fig-row { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fig svg { width: 100%; height: auto; }
.fig figcaption { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--line-2); }
.fig figcaption b { color: var(--line); font-weight: 600; }
.fig figcaption code { color: var(--line); }
.f-out { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
.f-in { fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round; }
.f-gone { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 6; }
.f-ticks line { stroke: var(--line); stroke-width: 1.5; }
.f-ring { fill: none; stroke: var(--line); stroke-width: 2; }
.f-dim line, .f-lead { stroke: var(--line-2); stroke-width: 1; }
.f-t { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--line-2); }
.f-t.strong { fill: var(--line); font-size: 13px; }
.f-coin { fill: none; stroke: var(--line); stroke-width: 2; }
.f-drum { fill: none; stroke: var(--line); stroke-width: 2; }
.f-fill { fill: url(#hatch); }
.f-level { stroke: var(--spark); stroke-width: 2; stroke-dasharray: 6 4; }
.f-x { stroke: var(--line); stroke-width: 1.5; }

.laws { list-style: none; counter-reset: law; padding: 0; margin: 22px 0 0; max-width: 900px; }
.laws li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-3); counter-increment: law; }
.laws li:last-child { border-bottom: 1px solid var(--line-3); }
.laws li::before { content: "Note " counter(law); font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); }
.laws li span { font-size: 17px; line-height: 1.45; }
.laws code { color: var(--line); }
.law-foot { margin-top: 16px; font-size: 15px; color: var(--line-2); }
.law-foot a { color: var(--line); font-weight: 600; }

.plain p { margin-top: 16px; max-width: 76ch; color: var(--line-2); }
.plain p strong { color: var(--line); font-weight: 600; }

.rev { width: 100%; max-width: 900px; border-collapse: collapse; margin-top: 22px; border: 1.5px solid var(--line); font-size: 16px; }
.rev th, .rev td { text-align: left; padding: 9px 12px; vertical-align: baseline; }
.rev th { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); border-bottom: 1.5px solid var(--line); }
.rev td { border-bottom: 1px solid var(--line-3); font-variant-numeric: tabular-nums; color: var(--line-2); }
.rev tr:last-child td { border-bottom: 0; }
.rev td:first-child { font-family: var(--display); font-weight: 700; color: var(--line); }
.rev td.burn { color: var(--spark); font-family: var(--display); font-weight: 700; font-size: 18px; }
.rev td.none { color: var(--line-2); }

/* the title block */
.block { margin-top: 64px; }
.legal { font-size: 13px; line-height: 1.5; color: var(--line-2); max-width: 110ch; margin-bottom: 16px; }
.title-block { display: grid; grid-template-columns: 1.1fr 1.5fr .9fr .6fr; border: 2px solid var(--line); max-width: 920px; margin-left: auto; }
.cell { padding: 9px 14px 10px; border-right: 1.5px solid var(--line); border-top: 1.5px solid var(--line); min-width: 0; }
.cell:nth-child(-n+4) { border-top: 0; }
.cell:nth-child(4n) { border-right: 0; }
.cell span { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); }
.cell b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.3; margin-top: 2px; }
.cell b a { text-decoration: none; border-bottom: 1.5px solid var(--spark); }
.cell b a:hover { color: var(--spark); }

/* ─── the law page ────────────────────────────────────────────── */

.doc-head { padding-top: 40px; max-width: 900px; }
.doc-sub { margin-top: 12px; max-width: 70ch; color: var(--line-2); font-size: 18px; }
.red { color: var(--spark); font-weight: 600; }
.tabs { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px 0 9px; border: 1.5px solid var(--line-3); border-radius: 3px; text-decoration: none; color: var(--line-2); font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.tabs a b { color: var(--line); font-size: 13px; }
.tabs a:hover, .tabs a.active { border-color: var(--line); color: var(--line); background: var(--line-4); }
.specs { margin-top: 44px; max-width: 900px; }
.art { padding: 28px 0 8px; border-top: 1px solid var(--line-3); scroll-margin-top: 20px; }
.art h2 { display: flex; align-items: baseline; gap: 14px; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 14px; }
.art h2 .n { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--line-2); min-width: 64px; }
.art h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; margin: 20px 0 8px; }
.art p { margin-bottom: 14px; max-width: 72ch; color: var(--line-2); }
.art strong { color: var(--line); font-weight: 600; }
.art code { color: var(--line); }
.art ul, .art ol { margin: 0 0 16px; padding-left: 24px; max-width: 72ch; color: var(--line-2); }
.art li { margin-bottom: 8px; }
.note { border: 1.5px dashed var(--line-2); border-radius: 4px; padding: 14px 18px; margin: 18px 0 22px; max-width: 72ch; }
.note p { color: var(--line); margin: 0; }
.note p + p { margin-top: 10px; }
.tbl { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15.5px; border: 1.5px solid var(--line); }
.tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-3); vertical-align: top; color: var(--line-2); }
.tbl th { font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); border-bottom: 1.5px solid var(--line); }
.tbl .set { font-weight: 600; color: var(--spark); }

/* ─── narrow ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .title-block { grid-template-columns: 1fr 1fr; }
  .cell:nth-child(-n+4) { border-top: 1.5px solid var(--line); }
  .cell:nth-child(-n+2) { border-top: 0; }
  .cell:nth-child(4n) { border-right: 1.5px solid var(--line); }
  .cell:nth-child(2n) { border-right: 0; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "title" "drawing" "stamps"; gap: 28px; }
  .stamps { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .stamp { width: min(252px, calc(50% - 8px)); }
  .stamp-note { text-align: left; max-width: none; width: 100%; }
  .fig-row { grid-template-columns: 1fr; gap: 24px; }
  .fig svg { max-width: 420px; }
}
@media (max-width: 700px) {
  .sheet { margin: 8px; }
  .zones.left, .zones.right { display: none; }
  .zones.top, .zones.bottom { left: 0; right: 0; }
  .strip { padding: 40px var(--pad) 0; flex-wrap: wrap; gap: 12px; }
  .mark small { display: none; }
  .tags { width: 100%; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
  .tag { height: 32px; padding: 0 9px; font-size: 12px; letter-spacing: .08em; }
  .wallet-btn { position: absolute; top: 40px; right: var(--pad); }
  .h1 br { display: none; }
  .zone { padding: 0 var(--pad) 40px; }
  .hero { padding-top: 28px; }
  #dwg { height: 300px; }
  .zero { font-size: 19px; }
  .figure { font-size: 19px; }
  .stamp { width: calc(50% - 8px); padding: 10px 12px 8px; }
  .stamp span { font-size: 22px; }
  .stamp small { font-size: 12px; letter-spacing: .04em; }
  .laws li { grid-template-columns: 62px 1fr; gap: 12px; }
  .rev { font-size: 14.5px; }
  .rev th, .rev td { padding: 8px 8px; }
  .title-block { grid-template-columns: 1fr; }
  .cell { border-right: 0 !important; border-top: 1.5px solid var(--line) !important; }
  .cell:first-child { border-top: 0 !important; }
}
@media (max-width: 420px) {
  #dwg { height: 270px; }
  .stamp { width: 100%; }
}

/* ─── still ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheet { transition: none; }
  .stamp { transition: none; }
}

/*  la seule ligne lue sur la chaine elle-meme : la tete de Robinhood Chain, en direct.
    Les couleurs sont heritees pour tenir sur n'importe quelle palette. La ligne reste masquee
    tant que le RPC n'a pas repondu, et redevient masquee s'il cesse de repondre : un nombre fige
    presente comme vivant serait pire que pas de nombre du tout.  */
.live { margin-top: 10px; font-size: 13.5px; opacity: .82; line-height: 1.45; }
.live b { font-weight: 700; font-variant-numeric: tabular-nums; opacity: 1; }
.live a { color: inherit; text-underline-offset: 3px; }