:root {
      --paper: #e9e5dc;
      --paper-2: #f4f1e9;
      --ink: #171716;
      --muted: #686660;
      --line: #aaa59b;
      --faint: #d5d0c6;
      --signal: #ed2f8a;
      --signal-soft: #fce8f2;
      --serif: Georgia, "Times New Roman", serif;
      --sans: Arial, Helvetica, sans-serif;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --page-pad: clamp(16px, 2.8vw, 42px);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--paper);
    }

    body {
      min-width: 320px;
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--sans);
    }

    button,
    input,
    select { font: inherit; }

    button { color: inherit; }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 0;
      background-color: var(--signal-soft);
    }

    [hidden] { display: none !important; }

    .masthead {
      position: sticky;
      top: 0;
      z-index: 20;
      display: grid;
      grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
      align-items: stretch;
      min-height: 66px;
      background: rgba(233, 229, 220, 0.96);
      backdrop-filter: blur(10px);
    }

    .brand-button,
    .nav-button,
    .wallet-entry,
    .text-button,
    .index-row,
    .edition-cell,
    .zoom-button {
      border: 0;
      border-radius: 0;
      background: transparent;
      cursor: pointer;
    }

    .brand-button {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 var(--page-pad);
      text-align: left;
    }

    .brand-mark {
      display: block;
      width: 42px;
      height: 24px;
      object-fit: contain;
    }

    .brand-name {
      font: 700 16px var(--mono);
      letter-spacing: -0.05em;
      text-transform: lowercase;
    }

    .primary-nav {
      display: flex;
      gap: 4px;
      align-items: stretch;
      padding: 5px;
    }

    .nav-button {
      min-width: 92px;
      padding: 0 20px;
      color: var(--muted);
      font: 700 11px var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .nav-button:hover,
    .nav-button:focus-visible,
    .nav-button[aria-current="page"] {
      color: var(--ink);
      background: var(--signal-soft);
    }

    .masthead-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      padding: 0 var(--page-pad);
    }

    .wallet-entry {
      min-height: 42px;
      padding: 0 15px;
      background: var(--signal);
      color: #fff;
      font: 700 10px var(--mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .wallet-entry:hover,
    .wallet-entry:focus-visible {
      background: var(--button-action-hover-fill, var(--ink));
      color: var(--button-action-ink, var(--paper-2));
    }

    .wallet-entry--mint {
      width: fit-content;
      min-width: 170px;
    }

    .wallet-form-entry {
      display: grid;
      gap: 9px;
      justify-items: start;
    }

    .wallet-prototype-status {
      min-height: 30px;
      max-width: 58ch;
      margin: 0;
      color: var(--signal);
      font: 10px/1.45 var(--mono);
    }

    .view {
      min-height: calc(100svh - 66px);
      padding: var(--page-pad);
    }

    .eyebrow,
    .section-label,
    .micro-label,
    .view-number {
      margin: 0;
      color: var(--muted);
      font: 700 10px/1.3 var(--mono);
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .archive-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.75fr);
      gap: clamp(30px, 7vw, 110px);
      align-items: end;
      min-height: min(500px, 64svh);
      padding: clamp(36px, 8vh, 100px) 0 clamp(30px, 6vh, 70px);
    }

    .archive-title {
      max-width: 11ch;
      margin: 18px 0 0;
      font: 400 clamp(58px, 10.5vw, 158px)/0.78 var(--serif);
      letter-spacing: -0.075em;
    }

    .archive-title em {
      display: block;
      color: var(--signal);
      font-weight: 400;
    }

    .archive-deck {
      display: grid;
      gap: 22px;
      padding-bottom: 5px;
    }

    .archive-deck p {
      max-width: 42ch;
      margin: 0;
      font: 20px/1.35 var(--serif);
    }

    .archive-deck-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .archive-deck-meta div {
      min-height: 75px;
      padding: 12px;
    }

    .archive-deck-meta div + div {
      padding-left: 14px;
    }

    .archive-deck-meta b {
      display: block;
      margin-top: 12px;
      font: 400 18px var(--serif);
    }

    .text-button {
      width: fit-content;
      padding: 9px 11px;
      background: var(--paper-2);
      font: 700 11px var(--mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .text-button:hover,
    .text-button:focus-visible {
      color: var(--button-action-ink, var(--on-signal));
      background: var(--button-action-fill, var(--signal));
    }

    .archive-section-head,
    .about-head,
    .mint-head,
    .detail-topline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
      padding: 24px 0 18px;
    }

    .archive-section-head h2,
    .about-head h1,
    .mint-head h1 {
      margin: 7px 0 0;
      font: 400 clamp(34px, 4vw, 62px)/0.95 var(--serif);
      letter-spacing: -0.04em;
    }

    .archive-section-head p:last-child,
    .about-head > p,
    .mint-head > p {
      max-width: 38ch;
      margin: 0;
      color: var(--muted);
      font: 13px/1.5 var(--mono);
    }

    .archive-index {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(28px, 5vw, 76px) clamp(18px, 4vw, 58px);
      padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 8vw, 110px);
    }

    .index-row {
      position: relative;
      display: grid;
      width: 100%;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 12px 14px;
      align-items: start;
      padding: 0 0 16px;
      text-align: left;
    }

    .index-row::before {
      content: none;
    }

    .index-row:hover .index-title strong,
    .index-row:focus-visible .index-title strong { color: var(--signal); }

    .index-number {
      grid-column: 1;
      grid-row: 2;
      padding-top: 4px;
      font: 700 11px var(--mono);
    }

    .index-title {
      grid-column: 2;
      grid-row: 2;
    }

    .index-title strong {
      display: block;
      font: 400 clamp(28px, 3.3vw, 52px)/0.88 var(--serif);
      letter-spacing: -0.045em;
    }

    .index-title span,
    .index-state span {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font: 10px var(--mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .strip-art {
      position: relative;
      grid-column: 1 / -1;
      grid-row: 1;
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      overflow: hidden;
    }

    .strip-art img,
    .detail-art img,
    .mint-preview-art img,
    .edition-cell img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .strip-art img {
      object-fit: contain;
    }

    .detail-art img,
    .mint-preview-art img {
      object-fit: contain;
    }

    .detail-art iframe {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      pointer-events: auto;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .index-state strong {
      display: block;
      font: 400 18px var(--serif);
    }

    .index-state {
      grid-column: 2;
      grid-row: 3;
    }

    .index-arrow {
      grid-column: 3;
      grid-row: 2;
      align-self: center;
      font: 22px var(--serif);
      transition: transform 130ms ease;
    }

    .index-row:hover .index-arrow { transform: translateX(5px); }

    .view-footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 0 0;
      color: var(--muted);
      font: 9px var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .source-note {
      max-width: 68ch;
      color: var(--muted);
      font: 10px/1.5 var(--mono);
    }

    /* About */
    .about-head,
    .mint-head {
      min-height: 200px;
      padding-top: 60px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: clamp(36px, 8vw, 130px);
      padding: clamp(42px, 7vw, 100px) 0;
    }

    .about-pullquote {
      margin: 0;
      font: 400 clamp(32px, 4.8vw, 70px)/0.96 var(--serif);
      letter-spacing: -0.045em;
    }

    .about-pullquote em { color: var(--signal); font-weight: 400; }

    .about-copy {
      display: grid;
      max-width: 720px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      font: 17px/1.55 var(--serif);
    }

    .about-copy p { margin: 0; }

    .process-list {
      display: grid;
      gap: 7px;
    }

    .process-row {
      display: grid;
      grid-template-columns: 55px minmax(160px, 0.7fr) minmax(240px, 1.3fr);
      gap: 26px;
      padding: 24px;
    }

    .process-row b { font: 400 28px var(--serif); }
    .process-row p { max-width: 62ch; margin: 0; color: var(--muted); font: 14px/1.55 var(--sans); }

    /* Mint */
    .mint-layout {
      display: grid;
      grid-template-columns: minmax(280px, 0.88fr) minmax(360px, 1.12fr);
      gap: clamp(34px, 7vw, 110px);
      padding: clamp(42px, 7vw, 100px) 0;
    }

    .mint-form {
      align-self: start;
    }

    .mint-heat-picker {
      padding: 18px 0 24px;
    }

    .mint-heat-picker-head {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: baseline;
      padding-bottom: 12px;
    }

    .mint-heat-picker-head strong {
      font: 400 18px var(--serif);
    }

    .mint-heat-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .mint-heat-option {
      position: relative;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      min-height: 38px;
      padding: 0 8px 0 12px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 700 10px var(--mono);
      letter-spacing: 0.06em;
      text-align: left;
      text-transform: uppercase;
    }

    .mint-heat-option::before {
      content: none;
    }

    .mint-heat-option b {
      overflow: hidden;
      font-size: 13px;
      text-overflow: ellipsis;
      text-transform: none;
      white-space: nowrap;
    }

    .mint-heat-option span {
      color: var(--muted);
      white-space: nowrap;
    }

    .mint-heat-option:hover,
    .mint-heat-option:focus-visible,
    .mint-heat-option[aria-pressed="true"] {
      color: var(--signal);
      background: var(--signal-soft);
    }

    .mint-heat-option[aria-pressed="true"] span { color: inherit; }

    .mint-heat-picker .form-note { margin: 10px 0 0; }

    .form-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 22px;
      padding: 20px 0;
    }

    .form-row label,
    .form-row-label {
      padding-top: 13px;
      color: var(--muted);
      font: 700 10px var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .form-control {
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      border: 0;
      border-radius: 0;
      background: var(--paper-2);
      color: var(--ink);
    }

    .form-note {
      grid-column: 2;
      margin: -10px 0 0;
      color: var(--muted);
      font: 10px/1.45 var(--mono);
    }

    .mint-summary {
      margin-top: 32px;
    }

    .mint-summary-head,
    .mint-summary-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 12px 14px;
      font: 10px var(--mono);
      text-transform: uppercase;
    }

    .mint-summary-head {
      color: var(--signal);
      letter-spacing: 0.06em;
    }

    .mint-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 14px;
    }

    .primary-action,
    .secondary-action {
      min-height: 46px;
      padding: 0 18px;
      border: 0;
      border-radius: 0;
      cursor: pointer;
      font: 700 11px var(--mono);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .primary-action { background: var(--button-action-fill, var(--signal)); color: var(--button-action-ink, #fff); }
    .secondary-action { background: var(--signal-soft); color: var(--ink); }
    .primary-action:hover,
    .primary-action:focus-visible { background: var(--button-action-hover-fill, var(--ink)); color: var(--button-action-ink, #fff); }
    .secondary-action:hover:not(:disabled),
    .secondary-action:focus-visible { background: var(--button-action-fill, var(--signal)); color: var(--button-action-ink, var(--on-signal)); }
    .secondary-action:disabled {
      cursor: default;
      opacity: 0.4;
    }

    .mint-status {
      min-height: 38px;
      margin: 0;
      padding: 0 14px 14px;
      color: var(--signal);
      font: 10px/1.45 var(--mono);
    }

    .mint-preview {
      position: sticky;
      top: 104px;
      align-self: start;
    }

    .mint-preview-head {
      display: flex;
      justify-content: flex-end;
      gap: 20px;
      margin-bottom: 12px;
      font: 10px var(--mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .mint-preview-art,
    .detail-art {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
    }

    .mint-preview-caption {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 14px 0;
    }

    .mint-preview-caption strong { font: 400 28px var(--serif); }
    .mint-preview-caption span { color: var(--muted); font: 10px/1.4 var(--mono); text-align: right; }

    /* Artwork detail */
    .detail-topline { align-items: center; }

    .detail-context {
      display: flex;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font: 10px var(--mono);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .detail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr);
      gap: clamp(30px, 5vw, 80px);
      padding: clamp(30px, 5vw, 72px) 0;
    }

    .art-stage { min-width: 0; }

    .art-stage-head {
      display: flex;
      justify-content: flex-end;
      gap: 20px;
      margin-bottom: 12px;
    }

    .zoom-controls {
      display: flex;
      gap: 4px;
      padding: 3px;
      margin-left: auto;
    }

    .zoom-button {
      width: 42px;
      height: 34px;
      font: 12px var(--mono);
    }
    .zoom-button:hover { background: var(--paper-2); }

    .art-viewport {
      overflow: auto;
    }

    .detail-art {
      width: 100%;
      transform: scale(var(--art-scale, 1));
      transform-origin: top left;
      transition: transform 160ms ease;
    }

    .detail-sidebar {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .detail-title h1 {
      margin: 9px 0 0;
      font: 400 clamp(46px, 6vw, 92px)/0.82 var(--serif);
      letter-spacing: -0.06em;
    }

    .detail-title p {
      max-width: 34ch;
      margin: 20px 0 0;
      color: var(--muted);
      font: 15px/1.5 var(--serif);
    }

    .detail-ledger {
      display: grid;
      gap: 5px;
    }

    .ledger-row {
      display: grid;
      grid-template-columns: 95px minmax(0, 1fr);
      gap: 14px;
      padding: 12px;
    }

    .ledger-row span { color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
    .ledger-row b { font: 400 14px var(--serif); }

    .public-link {
      border: 0;
      color: var(--ink);
      padding: 4px 6px;
      background: var(--signal-soft);
      cursor: pointer;
      font: inherit;
      text-decoration: none;
    }

    .detail-actions { display: grid; gap: 9px; }

    .edition-section { padding: 26px 0 0; }

    .edition-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
      gap: 4px;
      margin-top: 14px;
      overflow-x: auto;
    }

    .edition-cell {
      position: relative;
      min-width: 48px;
      display: grid;
      gap: 5px;
      align-content: start;
      font: 9px var(--mono);
    }

    .edition-cell::before {
      content: none;
    }

    .edition-cell img {
      position: static;
      aspect-ratio: 1;
      height: auto;
    }

    .edition-cell:hover,
    .edition-cell:focus-visible,
    .edition-cell[aria-current="true"] {
      color: var(--signal);
    }

    .edition-cell span { position: relative; z-index: 1; padding: 2px 0; }

    .edition-cell:disabled {
      cursor: default;
      opacity: 0.56;
    }

    .noscript-note {
      margin: 20px var(--page-pad);
      padding: 16px;
      background: var(--paper-2);
      font: 12px/1.5 var(--mono);
    }

    @media (max-width: 900px) {
      .masthead {
        position: relative;
        grid-template-columns: 1fr auto;
      }

      .primary-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        border: 0;
      }

      .nav-button { flex: 1; min-height: 46px; }
      .masthead-actions { grid-column: 2; grid-row: 1; }
      .archive-intro, .about-grid, .mint-layout, .detail-layout { grid-template-columns: 1fr; }
      .archive-intro { min-height: auto; }
      .archive-title { max-width: 8ch; }
      .about-copy { grid-template-columns: 1fr; }
      .mint-preview { position: static; }
      .detail-layout { padding-bottom: 40px; }
    }

    @media (max-width: 620px) {
      .masthead-actions { padding-left: 0; }
      .archive-section-head, .about-head, .mint-head, .detail-topline { grid-template-columns: 1fr; }
      .archive-section-head > p:last-child, .about-head > p, .mint-head > p { text-align: left; }
      .archive-index { gap: 24px 14px; padding-bottom: 64px; }
      .index-row {
        grid-template-columns: 26px minmax(0, 1fr) 18px;
        gap: 8px 6px;
        padding-bottom: 10px;
      }
      .index-title strong { font-size: clamp(22px, 7vw, 30px); }
      .index-title span, .index-state span { display: none; }
      .index-state strong { font: 10px var(--mono); text-transform: uppercase; }
      .form-row { grid-template-columns: 1fr; gap: 8px; }
      .form-row label, .form-row-label { padding-top: 0; }
      .form-note { grid-column: 1; }
      .mint-heat-grid { grid-template-columns: 1fr; }
      .process-row { grid-template-columns: 36px 1fr; gap: 14px; }
      .process-row p { grid-column: 2; }
      .mint-actions { grid-template-columns: 1fr; }
      .view-footer { flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; }
    }

    /* --- Swiss ---
/* Forge14 heat archive — Swiss
   International Typographic Style. One family (Helvetica Neue) across six
   weights — 200/300/400/500/700/900 — doing all the work that colour,
   rules, and ornament would otherwise do. White ground, hairline grid,
   flush left, ragged right. Pink is the only accent, used sparingly.

   Layered over ../forge14-heat-archive-wireframe.html by build.py; the
   wireframe's markup and behaviour are untouched.

   No italics anywhere: weight and size carry every distinction.

   The only skin with a dark mode. It is not an inversion: on a dark ground
   the UltraLight counter-word halates and the full-strength hairline grid
   shouts, so the grid drops to grey, the counter-weight steps 200 -> 300,
   and the pink lifts to hold its saturation. Those three moves are carried
   by --rule, --ultralight and --signal, so the dark block below only ever
   restates variables. */

:root {
  --paper: #ffffff;
  --paper-2: #f1f1f1;
  --ink: #111111;
  --muted: #767676;
  --line: #111111;
  --faint: #dcdcdc;
  --signal: #ff29a3;
  --signal-soft: #ffe4f4;
  --on-signal: #ffffff;

  /* Skin-local tokens the dark block swaps. */
  --rule: #111111;          /* the hairline grid */
  --plate: #f1f1f1;         /* ground behind artwork, inputs, quiet buttons */
  --ultralight: 200;        /* counter-weight against the bold display */
  --masthead-bg: rgba(255, 255, 255, 0.96);
  --logo-filter: grayscale(1) contrast(1.6);

  --helvetica: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --serif: var(--helvetica);
  --sans: var(--helvetica);
  --mono: var(--helvetica);
}

/* #0e0e0e / #f0f0f0 rather than #000 / #fff — pure black and pure white
   vibrate against each other at these weights. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e0e;
    --paper-2: #1a1a1a;
    --ink: #f0f0f0;
    --muted: #8c8c8c;
    --line: #333333;
    --faint: #272727;
    --signal: #ff45ad;
    --signal-soft: #3b0d26;
    --on-signal: #0e0e0e;
    --rule: #4a4a4a;
    --plate: #1a1a1a;
    --ultralight: 300;
    --masthead-bg: rgba(14, 14, 14, 0.96);
    --logo-filter: invert(1) grayscale(1) contrast(1.2);
  }
}

:root[data-theme="dark"] {
  --paper: #0e0e0e;
  --paper-2: #1a1a1a;
  --ink: #f0f0f0;
  --muted: #8c8c8c;
  --line: #333333;
  --faint: #272727;
  --signal: #ff45ad;
  --signal-soft: #3b0d26;
  --on-signal: #0e0e0e;
  --rule: #4a4a4a;
  --plate: #1a1a1a;
  --ultralight: 300;
  --masthead-bg: rgba(14, 14, 14, 0.96);
  --logo-filter: invert(1) grayscale(1) contrast(1.2);
}

/* One family means the tabular columns lose their monospace alignment —
   give it back with figures rather than with a second typeface. */
body { font-variant-numeric: tabular-nums; font-weight: 400; }

.archive-title em,
.about-pullquote em { font-style: normal; }

.brand-mark { filter: var(--logo-filter); }
.brand-name { font: 500 17px var(--helvetica); letter-spacing: -0.035em; }

.masthead { background: var(--masthead-bg); box-shadow: inset 0 -1px 0 var(--rule); }

.nav-button { font: 500 11px var(--helvetica); letter-spacing: 0.05em; }
.nav-button:hover,
.nav-button:focus-visible,
.nav-button[aria-current="page"] { color: var(--signal); background: transparent; }

.wallet-entry { font: 500 11px var(--helvetica); letter-spacing: 0.04em; }
.wallet-entry:hover,
.wallet-entry:focus-visible { background: var(--button-action-hover-fill, var(--ink)); color: var(--button-action-ink, var(--paper)); }

.eyebrow,
.section-label,
.micro-label,
.view-number {
  font: 500 10px/1.3 var(--helvetica);
  letter-spacing: 0.07em;
}

/* Display: bold statement, light counter-statement. */
.archive-title {
  max-width: 10ch;
  font: 700 clamp(60px, 11vw, 168px)/0.86 var(--helvetica);
  letter-spacing: -0.045em;
}

.archive-title em { font-weight: var(--ultralight); letter-spacing: -0.05em; }

.archive-section-head h2,
.about-head h1,
.mint-head h1 {
  font: 700 clamp(32px, 3.9vw, 58px)/0.98 var(--helvetica);
  letter-spacing: -0.035em;
}

.about-pullquote {
  font: 700 clamp(30px, 4.6vw, 66px)/1.02 var(--helvetica);
  letter-spacing: -0.04em;
}

.about-pullquote em { color: var(--signal); font-weight: var(--ultralight); }

.detail-title h1 {
  font: 700 clamp(42px, 5.6vw, 84px)/0.9 var(--helvetica);
  letter-spacing: -0.05em;
}

.archive-deck p { max-width: 34ch; font: 300 21px/1.35 var(--helvetica); letter-spacing: -0.015em; }
.about-copy { font: 400 15px/1.6 var(--helvetica); }
.detail-title p { font: 300 16px/1.45 var(--helvetica); letter-spacing: -0.01em; }
.process-row p { font: 400 14px/1.55 var(--helvetica); }

.archive-section-head p:last-child,
.about-head > p,
.mint-head > p { max-width: 34ch; font: 400 13px/1.5 var(--helvetica); }

/* The grid, drawn as hairlines: a rule above every field. */
.archive-deck-meta div,
.index-row,
.process-row,
.ledger-row { box-shadow: inset 0 1px 0 var(--rule); }

.archive-deck-meta div { padding: 12px 0 0; }
.archive-deck-meta div + div { padding-left: 0; }
.archive-deck-meta b { font: 500 20px var(--helvetica); letter-spacing: -0.02em; }

.text-button {
  background: var(--plate);
  font: 500 11px var(--helvetica);
  letter-spacing: 0.04em;
}

.text-button:hover,
.text-button:focus-visible { color: var(--button-action-ink, var(--on-signal)); background: var(--button-action-fill, var(--signal)); }

.archive-section-head,
.about-head,
.mint-head,
.detail-topline { box-shadow: inset 0 -1px 0 var(--rule); }

.index-row { padding: 12px 0 18px; }
.index-number { font: 500 11px var(--helvetica); color: var(--signal); }
.index-title strong { font: 700 clamp(26px, 3.1vw, 46px)/0.95 var(--helvetica); letter-spacing: -0.04em; }
.index-title span,
.index-state span { font: 500 10px var(--helvetica); letter-spacing: 0.07em; }
.index-state strong { font: 400 16px var(--helvetica); letter-spacing: -0.02em; }
.index-arrow { font: 300 20px var(--helvetica); }

.strip-art,
.detail-art,
.mint-preview-art { background: var(--plate); }

.process-row { padding: 20px 0 24px; }
.process-row b { font: 500 22px var(--helvetica); letter-spacing: -0.025em; }

.form-row label,
.form-row-label { font: 500 10px var(--helvetica); letter-spacing: 0.07em; }

/* The word and its submit share one line: field, then act. The note keeps
   the field's column so the rule of the left edge is never broken. The
   form column widens to give the field room to be a field — above 900px
   only, where the wireframe still has two columns to widen. */
@media (min-width: 901px) {
  .mint-layout { grid-template-columns: minmax(320px, 1fr) minmax(300px, 1fr); }
}

.form-control { font: 400 15px var(--helvetica); background: var(--plate); }
.form-control::placeholder { color: var(--muted); }
.form-note { font: 400 11px/1.45 var(--helvetica); }

.wallet-prototype-status--mint {
  margin: 14px 0 0;
  color: var(--signal);
  font: 500 11px/1.45 var(--helvetica);
  letter-spacing: 0.02em;
}

.wallet-prototype-status--mint:empty { display: none; }

/* The word is the only thing the collector writes, so it is the only
   field set at display scale: no plate, a pink rule to stand on, and the
   submit grown to the same height. Attention by size and signal, not by
   ornament. A 2px ink rule opens the row. */
.form-row--word {
  grid-template-columns: 90px minmax(160px, 1fr) auto;
  align-items: end;
  padding: 30px 0 26px;
  box-shadow: inset 0 2px 0 var(--ink);
}

.form-row--word label {
  align-self: end;
  padding-top: 0;
  padding-bottom: 18px;
  color: var(--signal);
}

.form-row--word .form-control {
  min-height: 68px;
  padding: 6px 0;
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--signal);
  font: 300 clamp(28px, 3.6vw, 40px)/1.1 var(--helvetica);
  letter-spacing: -0.035em;
  caret-color: var(--signal);
}

.form-row--word .form-control::placeholder {
  color: var(--muted);
  font-weight: var(--ultralight);
}

.form-row--word .form-control:hover { box-shadow: inset 0 -2px 0 var(--ink); }

.form-row--word .form-control:focus,
.form-row--word .form-control:focus-visible {
  outline: 0;
  background: var(--signal-soft);
  box-shadow: inset 0 -3px 0 var(--signal);
}

.form-row--word .form-control:focus::placeholder { color: transparent; }

.form-row--word .primary-action {
  align-self: stretch;
  min-height: 68px;
  padding: 0 26px;
  font-size: 12px;
}

.mint-heat-picker-head strong { font: 500 17px var(--helvetica); letter-spacing: -0.02em; }
.mint-heat-option { font: 500 10px var(--helvetica); letter-spacing: 0.05em; }
.mint-heat-option b { font-weight: 500; }

.mint-summary { box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule); }
.mint-summary-head { padding-top: 14px; font: 500 10px var(--helvetica); letter-spacing: 0.07em; }

/* The receipt folds away behind its own head. Closed by default; the
   drawn triangle spins down on open. */
.mint-receipt summary {
  cursor: pointer;
  list-style: none;
  padding-bottom: 14px;
}

.mint-receipt summary::-webkit-details-marker { display: none; }
.mint-receipt summary:hover span,
.mint-receipt summary:focus-visible span { color: var(--ink); }

.mint-receipt summary span:first-child::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 9px;
  vertical-align: 1px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 120ms ease;
}

.mint-receipt[open] summary { padding-bottom: 6px; }
.mint-receipt[open] summary span:first-child::before { transform: rotate(90deg); }
.mint-receipt-body { padding-bottom: 8px; }
.mint-summary-row { font: 400 12px var(--helvetica); letter-spacing: 0.02em; }
.mint-summary-row strong { font-weight: 500; }
.mint-summary-row + .mint-summary-row { box-shadow: inset 0 1px 0 var(--faint); }

.primary-action,
.secondary-action { font: 500 11px var(--helvetica); letter-spacing: 0.04em; }
.secondary-action { background: var(--plate); }
.secondary-action:hover:not(:disabled),
.secondary-action:focus-visible { color: var(--button-action-ink, var(--on-signal)); background: var(--button-action-fill, var(--signal)); }

.mint-preview-head,
.mint-preview-caption span,
.detail-context { font: 500 10px var(--helvetica); letter-spacing: 0.07em; }
.mint-preview-caption strong { font: 500 24px var(--helvetica); letter-spacing: -0.03em; }

/* Stacked, the preview leads: you see what the heat makes before you are
   asked for a word. (900px is where the wireframe drops to one column.) */
@media (max-width: 900px) {
  .mint-preview { order: -1; }
}

.ledger-row { padding: 12px 0; }
.ledger-row span { font: 500 9px var(--helvetica); letter-spacing: 0.07em; }
.ledger-row b { font: 400 15px var(--helvetica); letter-spacing: -0.015em; }

.public-link { padding: 0; background: transparent; color: var(--signal); font-weight: 500; }
.public-link:hover { text-decoration: underline; }

.zoom-button { font: 400 12px var(--helvetica); }
.edition-cell { font: 500 9px var(--helvetica); }
.edition-cell img { background: var(--plate); }

.view-footer { padding-top: 16px; box-shadow: inset 0 1px 0 var(--rule); font: 500 9px var(--helvetica); letter-spacing: 0.07em; }
.noscript-note { font: 400 13px/1.5 var(--helvetica); }

/* The base wireframe hardcodes #fff on its two filled buttons; on the
   light ground the fill is pink, on the dark ground it is near-black. */
.wallet-entry,
.primary-action { color: var(--button-action-ink, var(--on-signal)); }

/* Helvetica sets wider than the wireframe's Georgia — let a long heat name
   wrap rather than run under the arrow column. */
.archive-title,
.about-pullquote,
.index-title strong,
.detail-title h1 { overflow-wrap: break-word; }

/* Theme control, in the masthead beside the wallet entry. Icon only — the
   state reads off the disc. Untouched, the page follows
   prefers-color-scheme; pressing it pins an explicit choice. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--signal); }

/* Half-filled disc, drawn rather than set — no glyph coverage to trust.
   Filled half swings from right (light) to left (dark). */
.theme-toggle::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

:root[data-theme="dark"] .theme-toggle::before { transform: rotate(180deg); }

@media (max-width: 620px) {
  .index-title strong { font-size: clamp(22px, 6.6vw, 30px); }
  .index-state strong { font: 500 10px var(--helvetica); }

  /* The deck is the one place the light 21px reads as a wall on a phone. */
  .archive-deck p { font-size: 18px; }
  .detail-title p { font-size: 15px; }

  /* The label stacks; the field and its submit stay on one line. */
  .form-row--word { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 24px 0 22px; }
  .form-row--word label,
  .form-row--word .form-note { grid-column: 1 / -1; }
  .form-row--word label { padding-bottom: 0; }
  .form-row--word .form-control { min-height: 60px; }
  .form-row--word .primary-action { min-height: 60px; padding: 0 16px; }

  /* Touch targets: the picker rows and zoom controls are finger-sized. */
  .mint-heat-option { min-height: 46px; }
  .zoom-button { width: 46px; height: 44px; }
  .theme-toggle { width: 44px; height: 44px; }

  /* The receipt head is the disclosure's hit area — give it depth. */
  .mint-receipt summary { padding-top: 16px; padding-bottom: 16px; }
  .mint-receipt[open] summary { padding-bottom: 8px; }
}

/* Production runtime compatibility for the Swiss structure. */
/* Forge14 Swiss Ledger RC — Mint runtime only.
   The shared Swiss source supplies the visual system. This layer maps the
   live wallet, Hammer state, heat ledger, and renderer onto that structure. */

:root {
  --swiss-signal: #ff29a3;
  --button-action-fill: var(--swiss-signal);
  --button-action-hover-fill: var(--ink);
  --button-action-ink: #fff;
  --button-quiet-fill: var(--plate);
  --button-selection-hover-fill: var(--signal-soft);
  --button-selection-hover-ink: var(--signal);
  --button-navigation-hover-ink: var(--signal);
  --spark-guide-label-width: 120px;
  --mint-hammer-image: url("/assets/hammer-anvil-forging-white.gif");
  --mint-hammer-still: url("/assets/hammer-anvil-forging-white-first-frame.png");
  --mint-action-ink: var(--button-action-ink);
}

a.brand-button,
a.nav-button,
a.wallet-entry,
a.text-button,
a.index-row,
a.edition-cell {
  color: inherit;
  text-decoration: none;
}

/* Interactive roles. Filled actions share one theme-safe ink and one hover;
   quiet actions share the same pink reveal. Navigation and selectors retain
   their own lower-volume affordances. */
a.wallet-entry,
button.wallet-entry,
.primary-action {
  background: var(--button-action-fill);
  color: var(--button-action-ink);
  transition: background-color 120ms ease, color 120ms ease;
}

.wallet-entry:hover,
.wallet-entry:focus-visible,
.primary-action:not([aria-disabled="true"]):hover,
.primary-action:not([aria-disabled="true"]):focus-visible {
  background: var(--button-action-hover-fill);
  color: var(--button-action-ink);
}

.text-button,
.secondary-action {
  background: var(--button-quiet-fill);
  transition: background-color 120ms ease, color 120ms ease;
}

.text-button:hover,
.text-button:focus-visible,
.secondary-action:hover:not(:disabled),
.secondary-action:focus-visible {
  background: var(--button-action-fill);
  color: var(--button-action-ink);
}

.nav-button:hover,
.nav-button:focus-visible,
.nav-button[aria-current="page"],
.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--button-navigation-hover-ink); }

/* Static routes use links where the Swiss source used native buttons. Give
   every masthead control the same centered box model across all surfaces. */
.masthead .nav-button,
.masthead .wallet-entry {
  display: grid;
  place-items: center;
  line-height: 1;
}

.masthead .brand-name { line-height: 1; }

.masthead .wallet-entry[data-wallet-state="remembered"] {
  min-width: 112px;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --button-action-ink: #000;
  }

  :root:not([data-theme="light"]) .theme-toggle::before { transform: rotate(180deg); }
}

:root[data-theme="dark"] { --button-action-ink: #000; }
:root[data-theme="light"] { --button-action-ink: #fff; }

body[data-surface="mint"] {
  --signal: var(--swiss-signal);
  --signal-soft: #ffe4f4;
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--helvetica);
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-surface="mint"] {
    --signal: var(--swiss-signal);
    --signal-soft: #3b0d26;
    --mint-hammer-image: url("/assets/hammer-anvil-forging-black.gif");
    --mint-hammer-still: url("/assets/hammer-anvil-forging-black-first-frame.png");
    --mint-action-ink: #000;
  }
}

:root[data-theme="dark"] body[data-surface="mint"] {
  --signal: var(--swiss-signal);
  --signal-soft: #3b0d26;
  --mint-hammer-image: url("/assets/hammer-anvil-forging-black.gif");
  --mint-hammer-still: url("/assets/hammer-anvil-forging-black-first-frame.png");
  --mint-action-ink: #000;
}

:root[data-theme="light"] body[data-surface="mint"] {
  --signal: var(--swiss-signal);
  --signal-soft: #ffe4f4;
  --mint-hammer-image: url("/assets/hammer-anvil-forging-white.gif");
  --mint-hammer-still: url("/assets/hammer-anvil-forging-white-first-frame.png");
  --mint-action-ink: #fff;
}

body[data-surface="mint"] *,
body[data-surface="mint"] *::before,
body[data-surface="mint"] *::after { box-sizing: border-box; }

body[data-surface="mint"] [hidden] { display: none !important; }

body[data-surface="mint"] a { color: inherit; }

body[data-surface="mint"] a:focus-visible,
body[data-surface="mint"] button:focus-visible,
body[data-surface="mint"] input:focus-visible,
body[data-surface="mint"] summary:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

/* Masthead: identical shell tokens to Archive and About. */
body[data-surface="mint"] .masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: stretch;
  min-height: 66px;
  background: var(--masthead-bg);
}

body[data-surface="mint"] .brand-button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 var(--page-pad);
  color: var(--ink);
  text-decoration: none;
}

body[data-surface="mint"] .brand-mark {
  display: block;
  width: 42px;
  height: 24px;
  object-fit: contain;
  filter: var(--logo-filter);
}

body[data-surface="mint"] .brand-name {
  overflow: hidden;
  font: 500 17px/1 var(--helvetica);
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-surface="mint"] .primary-nav {
  display: flex;
  gap: 4px;
  align-items: stretch;
  padding: 5px;
}

body[data-surface="mint"] .nav-button {
  display: grid;
  min-width: 92px;
  padding: 0 20px;
  place-items: center;
  color: var(--muted);
  font: 500 11px/1 var(--helvetica);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

body[data-surface="mint"] .nav-button:hover,
body[data-surface="mint"] .nav-button:focus-visible,
body[data-surface="mint"] .nav-button[aria-current="page"] {
  background: transparent;
  color: var(--signal);
}

body[data-surface="mint"] .masthead-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  padding: 0 var(--page-pad);
}

body[data-surface="mint"] .top-wallet {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-surface="mint"] .top-wallet-balance {
  overflow: hidden;
  max-width: 20ch;
  color: var(--muted);
  font: 500 10px/1.2 var(--helvetica);
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-surface="mint"] .top-wallet-button {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 0;
  background: var(--signal);
  color: var(--button-action-ink);
  cursor: pointer;
  font: 500 11px/1 var(--helvetica);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-surface="mint"] .top-wallet-button:hover:not(:disabled) {
  background: var(--button-action-hover-fill);
  color: var(--button-action-ink);
}

body[data-surface="mint"] .top-wallet-button.connected {
  min-width: 112px;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

body[data-surface="mint"] .top-wallet-button:focus-visible:not(:disabled) {
  background: var(--button-action-hover-fill);
  color: var(--button-action-ink);
}

body[data-surface="mint"] .top-wallet-button:disabled {
  cursor: progress;
  opacity: 0.55;
}

/* Static approval header; live heat state starts below it. */
body[data-surface="mint"] main#top { min-height: calc(100svh - 66px); }

body[data-surface="mint"] #view-mint {
  min-height: calc(100svh - 66px);
  padding: var(--page-pad);
}

body[data-surface="mint"] .mint-head {
  min-height: 200px;
  padding-top: 60px;
}

body[data-surface="mint"] .mint-layout {
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 1fr);
  gap: clamp(34px, 7vw, 110px);
  padding: clamp(42px, 7vw, 100px) 0;
}

body[data-surface="mint"] .mint-form { align-self: start; }

body[data-surface="mint"] .form-row--word .mint-submit {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  gap: 10px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  background: var(--signal);
  color: var(--mint-action-ink);
  cursor: pointer;
  font: 500 12px/1 var(--helvetica);
  letter-spacing: 0.04em;
  box-shadow: none;
  text-shadow: none;
  text-transform: uppercase;
}

body[data-surface="mint"] .form-row--word .mint-submit:hover:not(:disabled) {
  background: var(--button-action-hover-fill);
  color: var(--button-action-ink);
}

body[data-surface="mint"] .form-row--word .mint-submit:focus-visible:not(:disabled) {
  background: var(--button-action-hover-fill);
  color: var(--button-action-ink);
}

body[data-surface="mint"] .form-row--word .mint-submit:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

body[data-surface="mint"] .form-row--word .mint-submit.is-forging:disabled {
  cursor: wait;
  opacity: 1;
}

body[data-surface="mint"] .form-row--word .mint-submit.is-forging::after {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  content: "";
  background: transparent var(--mint-hammer-image) center / contain no-repeat;
  box-shadow: none;
  filter: none;
}

body[data-surface="mint"] .mint-status {
  min-height: 16px;
  color: var(--muted);
}

/* Conditional SPARK requirement: an editorial ledger rail, not an alert card. */
body[data-surface="mint"] .spark-guide {
  display: grid;
  grid-template-columns: var(--spark-guide-label-width) minmax(0, 1fr);
  gap: 24px;
  margin: 6px 0 26px;
  padding: 20px 0 18px;
  box-shadow: inset 0 2px 0 var(--signal);
}

body[data-surface="mint"] .spark-guide > .micro-label {
  margin: 0;
  color: var(--signal);
}

body[data-surface="mint"] .spark-guide-copy { min-width: 0; }

body[data-surface="mint"] .spark-guide-copy h2 {
  margin: -2px 0 9px;
  color: var(--ink);
  font: 500 24px/1 var(--helvetica);
  letter-spacing: -0.035em;
}

body[data-surface="mint"] .spark-guide-copy p {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font: 400 13px/1.48 var(--helvetica);
}

body[data-surface="mint"] .spark-guide-copy .spark-guide-balance {
  margin: 0 0 7px;
  color: var(--ink);
  font: 500 10px/1.3 var(--helvetica);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-surface="mint"] .spark-guide-copy a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--signal);
  font: 500 11px/1.2 var(--helvetica);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

body[data-surface="mint"] .spark-guide-copy a span { margin-left: 5px; }

/* Fourteen buttons are the selector; no parallel carousel or slot meter. */
body[data-surface="mint"] .mint-heat-picker { padding: 18px 0 24px; }

body[data-surface="mint"] .mint-heat-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
}

body[data-surface="mint"] .mint-heat-picker-head strong {
  font: 500 17px/1.2 var(--helvetica);
  letter-spacing: -0.02em;
}

body[data-surface="mint"] .mint-heat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body[data-surface="mint"] .mint-heat-option {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 500 10px/1.2 var(--helvetica);
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

body[data-surface="mint"] .mint-heat-option b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

body[data-surface="mint"] .mint-heat-option span {
  color: var(--muted);
  white-space: nowrap;
}

body[data-surface="mint"] .mint-heat-option [data-heat-number] { color: var(--signal); }

body[data-surface="mint"] .mint-heat-option:hover,
body[data-surface="mint"] .mint-heat-option:focus-visible,
body[data-surface="mint"] .mint-heat-option.active,
body[data-surface="mint"] .mint-heat-option[aria-pressed="true"] {
  background: var(--button-selection-hover-fill);
  color: var(--button-selection-hover-ink);
}

body[data-surface="mint"] .mint-heat-option.active span,
body[data-surface="mint"] .mint-heat-option[aria-pressed="true"] span { color: inherit; }

body[data-surface="mint"] .mint-heat-option.placeholder {
  cursor: default;
  opacity: 0.35;
}

body[data-surface="mint"] .mint-heat-note {
  margin: 10px 0 0;
  padding: 0;
}

/* Compact approval disclosure and real post-transaction receipt. */
body[data-surface="mint"] .mint-summary {
  margin-top: 32px;
  box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule);
}

body[data-surface="mint"] .mint-receipt summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

body[data-surface="mint"] .mint-final-receipt {
  margin-top: 18px;
  padding: 18px 0 2px;
  box-shadow: inset 0 1px 0 var(--rule);
}

body[data-surface="mint"] .mint-final-receipt[hidden] { display: none !important; }

body[data-surface="mint"] .mint-final-receipt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  font: 500 10px/1.3 var(--helvetica);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-surface="mint"] .mint-final-receipt-head span { color: var(--signal); }

body[data-surface="mint"] .mint-final-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--rule);
}

body[data-surface="mint"] .mint-final-receipt-grid > div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--paper);
}

body[data-surface="mint"] .mint-final-receipt-grid dt {
  color: var(--muted);
  font: 500 9px/1.3 var(--helvetica);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-surface="mint"] .mint-final-receipt-grid dd {
  overflow: hidden;
  margin: 5px 0 0;
  font: 400 11px/1.35 var(--helvetica);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-surface="mint"] .mint-final-receipt-grid a {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body[data-surface="mint"] .mint-final-note {
  margin: 12px 0 0;
  color: var(--muted);
  font: 400 10px/1.45 var(--helvetica);
}

/* The live renderer occupies the reference's single square preview. */
body[data-surface="mint"] .mint-preview {
  position: sticky;
  top: 104px;
  align-self: start;
}

body[data-surface="mint"] .mint-preview-head {
  display: flex;
  justify-content: flex-end;
  min-height: 24px;
  margin-bottom: 12px;
}

body[data-surface="mint"] .mint-preview-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--plate);
}

body[data-surface="mint"] .mint-preview-canvas,
body[data-surface="mint"] .mint-preview-image,
body[data-surface="mint"] .mint-preview-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: transparent;
}

body[data-surface="mint"] .mint-preview-image { object-fit: contain; }

body[data-surface="mint"] .mint-preview-caption {
  display: grid;
  grid-template-columns: 1fr;
  padding: 14px 0;
}

body[data-surface="mint"] .mint-preview-caption strong {
  font: 500 24px/1.15 var(--helvetica);
  letter-spacing: -0.03em;
}

/* Explicit wallet chooser; no automatic provider selection. */
body[data-surface="mint"] .wallet-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(720px, calc(100svh - 32px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule);
  overflow: auto;
}

body[data-surface="mint"] .wallet-dialog:not([open]) { display: none; }

body[data-surface="mint"] .wallet-dialog::backdrop { background: rgb(0 0 0 / 0.52); }

body[data-surface="mint"] .wallet-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  box-shadow: inset 0 -1px 0 var(--rule);
}

body[data-surface="mint"] .wallet-dialog-head h2 {
  margin: 0;
  font: 700 clamp(28px, 5vw, 42px)/0.98 var(--helvetica);
  letter-spacing: -0.035em;
}

body[data-surface="mint"] .wallet-dialog-close,
body[data-surface="mint"] .wallet-dialog-cancel,
body[data-surface="mint"] .wallet-dialog-disconnect {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--button-quiet-fill);
  color: var(--ink);
  cursor: pointer;
  font: 500 10px/1 var(--helvetica);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-surface="mint"] .wallet-dialog-close:hover,
body[data-surface="mint"] .wallet-dialog-cancel:hover,
body[data-surface="mint"] .wallet-dialog-disconnect:hover,
body[data-surface="mint"] .wallet-dialog-close:focus-visible,
body[data-surface="mint"] .wallet-dialog-cancel:focus-visible,
body[data-surface="mint"] .wallet-dialog-disconnect:focus-visible {
  background: var(--button-action-fill);
  color: var(--button-action-ink);
}

body[data-surface="mint"] .wallet-dialog-copy,
body[data-surface="mint"] .wallet-dialog-empty {
  margin: 0;
  padding: 18px 24px;
  color: var(--muted);
  font: 400 12px/1.5 var(--helvetica);
}

body[data-surface="mint"] .wallet-provider-list { display: grid; }

body[data-surface="mint"] .wallet-choice {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 10px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 var(--faint);
}

body[data-surface="mint"] .wallet-choice:hover:not(:disabled),
body[data-surface="mint"] .wallet-choice:focus-visible,
body[data-surface="mint"] .wallet-choice-current { background: var(--button-selection-hover-fill); }

body[data-surface="mint"] .wallet-choice:disabled { cursor: default; opacity: 0.42; }

body[data-surface="mint"] .wallet-choice-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  background: var(--signal);
  color: var(--button-action-ink);
  font: 700 10px/1 var(--helvetica);
}

body[data-surface="mint"] .wallet-choice-copy { display: grid; gap: 3px; }
body[data-surface="mint"] .wallet-choice-copy strong { font: 500 13px/1.2 var(--helvetica); }
body[data-surface="mint"] .wallet-choice-copy span,
body[data-surface="mint"] .wallet-choice-status { color: var(--muted); font: 400 10px/1.3 var(--helvetica); }

body[data-surface="mint"] .wallet-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  box-shadow: inset 0 1px 0 var(--rule);
}

/* A confirmed mint is a verdict, not another transaction surface. */
body[data-surface="mint"] .mint-confirmation-dialog {
  --mint-confirmation-width: 720px;
  width: min(var(--mint-confirmation-width), calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
}

body[data-surface="mint"] .mint-confirmation-dialog:not([open]) { display: none; }

body[data-surface="mint"] .mint-confirmation-dialog::backdrop { background: rgb(0 0 0 / 0.64); }

body[data-surface="mint"] .mint-confirmation-shell { padding: clamp(28px, 6vw, 64px); }

body[data-surface="mint"] .mint-confirmation-kicker,
body[data-surface="mint"] .mint-confirmation-chronology {
  margin: 0;
  font: 500 10px/1.25 var(--helvetica);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-surface="mint"] .mint-confirmation-kicker { color: var(--signal); }

body[data-surface="mint"] .mint-confirmation-dialog h2 {
  margin: 26px 0 22px;
  font: 700 clamp(52px, 8vw, 86px)/0.88 var(--helvetica);
  letter-spacing: -0.055em;
}

body[data-surface="mint"] .mint-confirmation-dialog h2:focus { outline: 0; }

body[data-surface="mint"] .mint-confirmation-copy {
  max-width: 34ch;
  margin: 0;
  font: 400 clamp(18px, 2.2vw, 27px)/1.3 var(--helvetica);
  letter-spacing: -0.025em;
}

body[data-surface="mint"] .mint-confirmation-copy q { color: var(--signal); }

body[data-surface="mint"] .mint-confirmation-chronology {
  margin-top: 42px;
  padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--rule);
}

body[data-surface="mint"] .mint-confirmation-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 34px;
}

body[data-surface="mint"] .mint-confirmation-primary,
body[data-surface="mint"] .mint-confirmation-secondary {
  display: grid;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  place-items: center;
  cursor: pointer;
  font: 500 11px/1 var(--helvetica);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-surface="mint"] .mint-confirmation-primary {
  background: var(--button-action-fill);
  color: var(--button-action-ink);
}

body[data-surface="mint"] .mint-confirmation-primary[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.5;
  pointer-events: none;
}

body[data-surface="mint"] .mint-confirmation-secondary {
  min-height: 48px;
  background: var(--button-quiet-fill);
  color: var(--ink);
}

body[data-surface="mint"] .mint-confirmation-primary:hover,
body[data-surface="mint"] .mint-confirmation-primary:focus-visible {
  background: var(--button-action-hover-fill);
  color: var(--button-action-ink);
}

body[data-surface="mint"] .mint-confirmation-secondary:hover,
body[data-surface="mint"] .mint-confirmation-secondary:focus-visible {
  background: var(--button-action-fill);
  color: var(--button-action-ink);
}

@media (max-width: 900px) {
  .masthead .primary-nav {
    gap: 4px;
    padding-inline: 16px;
  }

  .masthead .nav-button {
    min-width: 0;
    padding-inline: 8px;
  }

  .masthead .brand-button,
  .masthead .masthead-actions {
    min-width: 0;
    min-height: 44px;
  }

  body[data-surface="mint"] .masthead .primary-nav { padding-inline: 16px; }
  body[data-surface="mint"] .masthead .nav-button { padding-inline: 8px; }

  body[data-surface="mint"] .masthead {
    position: relative;
    grid-template-columns: 1fr auto;
  }

  body[data-surface="mint"] .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body[data-surface="mint"] .nav-button { flex: 1; min-height: 46px; }
  body[data-surface="mint"] .masthead-actions { grid-column: 2; grid-row: 1; }

  body[data-surface="mint"] .mint-layout { grid-template-columns: 1fr; }
  body[data-surface="mint"] .mint-preview { position: relative; top: auto; order: -1; }
}

@media (max-width: 620px) {
  body[data-surface="mint"] .brand-button { padding-inline: 16px; }
  body[data-surface="mint"] .brand-name { font-size: 15px; }
  body[data-surface="mint"] .masthead-actions { gap: 4px; padding-inline: 12px; }
  body[data-surface="mint"] .top-wallet-balance { display: none; }
  body[data-surface="mint"] .top-wallet-button { min-height: 40px; padding-inline: 11px; font-size: 10px; }
  body[data-surface="mint"] .nav-button { min-width: 0; padding-inline: 8px; }

  body[data-surface="mint"] .mint-head {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 18px;
    padding-top: 38px;
  }

  body[data-surface="mint"] .mint-layout { padding: 30px 0 64px; }

  body[data-surface="mint"] .form-row--word {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 24px 0 22px;
  }

  body[data-surface="mint"] .form-row--word label,
  body[data-surface="mint"] .form-row--word .form-note { grid-column: 1 / -1; }
  body[data-surface="mint"] .form-row--word label { padding-bottom: 0; }
  body[data-surface="mint"] .form-row--word .form-control { min-height: 60px; }
  body[data-surface="mint"] .form-row--word .mint-submit { min-height: 60px; gap: 8px; padding: 0 16px; }
  body[data-surface="mint"] .form-row--word .mint-submit.is-forging::after {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  body[data-surface="mint"] .spark-guide {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 18px;
    padding-top: 18px;
  }

  body[data-surface="mint"] .mint-heat-option {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 46px;
  }

  body[data-surface="mint"] .mint-heat-option [data-heat-status] { display: none; }

  body[data-surface="mint"] .mint-final-receipt-grid { grid-template-columns: 1fr; }

  body[data-surface="mint"] .wallet-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100svh - 20px);
  }

  body[data-surface="mint"] .wallet-dialog-head,
  body[data-surface="mint"] .wallet-dialog-copy,
  body[data-surface="mint"] .wallet-dialog-empty,
  body[data-surface="mint"] .wallet-dialog-actions { padding-inline: 18px; }

  body[data-surface="mint"] .wallet-choice { padding-inline: 18px; }

  body[data-surface="mint"] .mint-confirmation-dialog { width: calc(100vw - 32px); }
  body[data-surface="mint"] .mint-confirmation-shell { padding: 30px 22px 22px; }
  body[data-surface="mint"] .mint-confirmation-dialog h2 { margin: 22px 0 18px; font-size: 56px; }
  body[data-surface="mint"] .mint-confirmation-chronology { margin-top: 34px; }
  body[data-surface="mint"] .mint-confirmation-actions { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  body:not([data-surface="mint"]) .brand-name { display: none; }
  body:not([data-surface="mint"]) .masthead-actions { gap: 4px; padding-inline: 12px; }
  body:not([data-surface="mint"]) .wallet-entry { min-height: 40px; padding-inline: 11px; }
  body:not([data-surface="mint"]) .wallet-entry[data-wallet-state="remembered"] { min-width: 98px; }
  body[data-surface="mint"] .brand-mark { width: 36px; }
  body[data-surface="mint"] .brand-name { display: none; }
  body[data-surface="mint"] .theme-toggle { width: 38px; }
  body[data-surface="mint"] .mint-heat-picker-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  body[data-surface="mint"] .mint-heat-grid { gap: 3px; }
  body[data-surface="mint"] .mint-heat-option { padding-inline: 7px; }
  body[data-surface="mint"] .mint-heat-option b { font-size: 12px; }
  body[data-surface="mint"] .mint-receipt summary { align-items: flex-start; }
  body[data-surface="mint"] .mint-preview-caption strong { font-size: 21px; }
  body[data-surface="mint"] .wallet-dialog-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-surface="mint"] .form-row--word .mint-submit.is-forging::after {
    background-image: var(--mint-hammer-still);
  }

  body[data-surface="mint"] *,
  body[data-surface="mint"] *::before,
  body[data-surface="mint"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}