/* =========================================================
   Launchpad. Shares the printed-package language of the main site;
   the colour and type tokens are identical to index.html.
   ========================================================= */

:root {
  --ink:    #14140F;
  --cream:  #F4F0E2;
  --cream-2:#E4DFCC;
  --yellow: #FFE000;
  --red:    #D01E1E;
  --cyan:   #00E5FF;
  --green:  #0E7A3C;

  --fat:  Impact, Haettenschweiler, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  --sans: "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
a { color: inherit; }

.wrap { width: min(1160px, 100% - 36px); margin-inline: auto; position: relative; z-index: 2; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------- bands ---------------- */

.band {
  position: relative;
  padding-block: clamp(38px, 5vw, 74px);
  border-top: 7px solid var(--ink);
  isolation: isolate;
}

.band::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,.17) 2px, transparent 2.1px);
  background-size: 11px 11px;
}

.b-violet { background: linear-gradient(135deg, #C39CFF, #2E1178); }
.b-cyan   { background: linear-gradient(135deg, #5EE7FF, #1B3FA0); }
.b-yellow { background: linear-gradient(135deg, #FFDD4D, #B03A00); }
.b-dark   { background: #14140F; }
.b-dark::before { background-image: radial-gradient(circle, rgba(255,255,255,.09) 2px, transparent 2.1px); }

.rays::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 24%,
    rgba(255,255,255,.19) 0deg 6.5deg, transparent 6.5deg 19deg);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 24%, #000 29%, transparent 77%);
  mask-image: radial-gradient(120% 90% at 50% 24%, #000 29%, transparent 77%);
}

/* ---------------- typography ---------------- */

h1 {
  font-family: var(--fat); font-style: italic;
  font-size: clamp(38px, 7.4vw, 92px); line-height: .93; margin: 0 0 8px;
  color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: -7px 6px 0 var(--cyan);
  text-wrap: balance;
}

h2 {
  font-family: var(--fat); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 4.4vw, 52px); line-height: .96; margin: 0 0 6px;
  color: #fff; -webkit-text-stroke: 2.5px var(--ink); text-shadow: -5px 4px 0 var(--cyan);
}

.b-yellow h1, .b-yellow h2 { text-shadow: -6px 5px 0 var(--red); }

/* dark on light bands, light on dark ones: the same rule as index.html */
.kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .19em;
  text-transform: uppercase; color: rgba(0,0,0,.62); margin: 0 0 24px;
}
.b-dark .kicker { color: rgba(255,255,255,.55); }

.tag {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: var(--yellow); border: 3px solid var(--ink); padding: 4px 11px;
  border-radius: 5px; transform: rotate(-3.5deg); box-shadow: 4px 4px 0 rgba(0,0,0,.5);
  margin-bottom: 20px;
}

/* ---------------- top bar ---------------- */

.topbar {
  background: var(--ink); border-bottom: 5px solid #000;
  padding: 12px 0; position: sticky; top: 0; z-index: 60;
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; }
.topbar .mark {
  font-family: var(--fat); font-style: italic; font-size: 25px; color: var(--cream);
  text-decoration: none; letter-spacing: .01em;
}
.topbar .mark em { color: var(--yellow); font-style: italic; }
.topbar nav { display: flex; gap: 16px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.66); text-decoration: none; padding: 6px 0;
}
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--yellow); }

/* ---------------- panels ---------------- */

.panel {
  background: var(--cream); border: 5px solid var(--ink); border-radius: 12px;
  box-shadow: 9px 10px 0 rgba(0,0,0,.55); padding: clamp(20px, 3vw, 34px);
}
.panel + .panel { margin-top: 20px; }
.panel p { margin: 0 0 14px; } .panel p:last-child { margin-bottom: 0; }
.panel h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px;
  border: 4px solid var(--ink); border-radius: 9px; background: var(--cream); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: 6px 6px 0 rgba(0,0,0,.55); transition: transform .13s ease, box-shadow .13s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 rgba(0,0,0,.55); }
.btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.55); }
.btn-main { background: var(--yellow); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: 6px 6px 0 rgba(0,0,0,.28);
}
.btn-sm { padding: 9px 15px; border-width: 3px; box-shadow: 4px 4px 0 rgba(0,0,0,.5); font-size: 14px; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; align-items: center; }

/* ---------------- preview notice ---------------- */

.mock {
  background: var(--red); color: #fff; border: 4px solid var(--ink); border-radius: 9px;
  padding: 11px 16px; font-size: 14px; font-weight: 700; line-height: 1.45;
  box-shadow: 5px 5px 0 rgba(0,0,0,.5);
}
.mock b { background: var(--yellow); color: var(--ink); padding: 1px 6px; }

/* ---------------- filter bar ---------------- */

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }

.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 13px; border: 3px solid var(--ink); border-radius: 7px;
  background: var(--cream); cursor: pointer; font-weight: 700;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.chip[aria-pressed="true"] { background: var(--yellow); }

select.chip, input.chip { appearance: none; padding-right: 13px; }
.filters .spacer { margin-left: auto; }

/* ---------------- collection grid ---------------- */

.collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }

.coll {
  background: var(--cream); border: 5px solid var(--ink); border-radius: 12px;
  box-shadow: 8px 9px 0 rgba(0,0,0,.55); overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.coll:hover { transform: translate(-3px,-3px); box-shadow: 12px 13px 0 rgba(0,0,0,.55); }

.coll-art { background: var(--ink); padding: 14px; position: relative; }
.coll-art svg { width: 100%; display: block; border-radius: 5px; }
.coll-art .noart {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 5px;
  background: repeating-linear-gradient(45deg, #22221c 0 10px, #1a1a15 10px 20px);
  color: rgba(255,255,255,.4); font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}

/* directory states */
.state {
  background: var(--cream); border: 5px solid var(--ink); border-radius: 12px;
  box-shadow: 9px 10px 0 rgba(0,0,0,.55); padding: clamp(26px,4vw,44px); text-align: center;
}
.state h3 { font-family: var(--fat); font-style: italic; font-size: clamp(26px,4vw,40px); margin: 0 0 10px; }
.state p { font-size: 15px; max-width: 52ch; margin: 0 auto 8px; }
.state .cta-row { justify-content: center; }

.badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }

.badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; padding: 3px 7px; border-radius: 4px; border: 2px solid var(--ink);
  background: var(--cream-2); color: var(--ink);
}
.badge.ok    { background: var(--green); color: #fff; }
.badge.warn  { background: var(--yellow); }
.badge.bad   { background: var(--red); color: #fff; }
.badge.chain { background: var(--cyan); }
.badge.star  { background: var(--ink); color: var(--yellow); }
.badge.official {
  background: var(--yellow); color: var(--ink); border-color: var(--ink);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

/* the official notice on a collection page */
.official-note {
  background: var(--yellow); border: 4px solid var(--ink); border-radius: 10px;
  padding: 13px 16px; margin-bottom: 14px; box-shadow: 5px 5px 0 rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 4px;
}
.official-note b { font-family: var(--fat); font-style: italic; font-size: 20px; }
.official-note span { font-size: 13.5px; }
.official-note code { font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* removed-collection notice */
.removed {
  background: var(--red); color: #fff; border: 5px solid var(--ink); border-radius: 12px;
  box-shadow: 9px 10px 0 rgba(0,0,0,.55); padding: clamp(22px,3vw,34px);
}
.removed h3 { font-family: var(--fat); font-style: italic; font-size: clamp(26px,4vw,40px); margin: 0 0 10px; }
.removed p { margin: 0 0 10px; font-size: 15px; }
.removed .why {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 5px; padding: 4px 10px; margin: 4px 0 12px;
}

/* mint schedule and allowlist boxes */
.starts, .allow {
  border: 4px solid var(--ink); border-radius: 10px; padding: 13px 16px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.5); margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.starts { background: var(--cyan); }
.allow  { background: var(--cream-2); }
.starts b, .allow b { font-family: var(--fat); font-style: italic; font-size: 21px; }
.starts span, .allow span { font-size: 13.5px; }
.starts .soft, .allow .soft { opacity: .62; font-size: 12px; }

/* creator warning */
.cwarn {
  background: var(--yellow); border: 4px solid var(--ink); border-radius: 10px;
  padding: 13px 16px; font-size: 14.5px; font-weight: 700;
  box-shadow: 5px 5px 0 rgba(0,0,0,.5); margin-bottom: 16px;
}

.coll-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.coll-body h3 { margin: 0; font-family: var(--fat); font-style: italic; font-size: 25px; line-height: 1.02; }
.coll-by { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

.coll-price {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--ink); color: var(--cream); border-radius: 8px; padding: 9px 12px;
}
.coll-price .v { font-family: var(--fat); font-size: 20px; color: var(--yellow); }
.coll-price .usd { font-family: var(--mono); font-size: 11px; opacity: .65; }

/* ---------------- chain picker ---------------- */

.chain-pick { position: relative; margin-left: 14px; }

.chain-now {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.chain-now:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.chain-now .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--yellow); border: 2px solid var(--ink);
}
.chain-now b { font-size: 10px; opacity: .7; }

.chain-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 232px; background: var(--cream);
  border: 4px solid var(--ink); border-radius: 10px;
  box-shadow: 7px 8px 0 rgba(0,0,0,.55); overflow: hidden;
}
.chain-menu button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 3px solid var(--ink);
  padding: 11px 13px; font: inherit; color: var(--ink);
}
.chain-menu button:last-child { border-bottom: 0; }
.chain-menu button:hover { background: var(--yellow); }
.chain-menu button[aria-current="true"] { background: var(--cream-2); }
.chain-menu button span {
  display: block; font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.chain-menu button small { display: block; font-size: 12px; opacity: .68; margin-top: 1px; }

/* The wallet and the page disagreeing about which chain they are on. Fixed to
   the bottom so it is impossible to scroll past without noticing. */
.wrong-chain {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  width: min(760px, calc(100% - 24px));
  background: var(--yellow); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 11px;
  box-shadow: 8px 9px 0 rgba(0,0,0,.55); padding: 13px 16px;
  font-size: 14.5px; font-weight: 700;
}
.wrong-chain button {
  font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 7px; padding: 7px 11px;
}
.wrong-chain button:hover { background: #fff; }

@media (max-width: 700px) {
  .chain-pick { margin-left: 8px; }
  .chain-now span { display: none; }
  .wrong-chain { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------------- range ---------------- */

/* The browser's own slider fills only as far as the middle of its handle, so at
   the maximum it still shows an empty sliver at the right end and reads as not
   quite finished. The fill is drawn here instead, edge to edge, from a --fill
   variable the page keeps in step with the value. */
.range,
.field input.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 4px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.range:focus-visible,
.field input.range:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.field input.range:focus { box-shadow: none; }

.range::-webkit-slider-runnable-track,
.field input.range::-webkit-slider-runnable-track {
  height: 15px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(var(--yellow), var(--yellow)) left center / var(--fill, 0%) 100% no-repeat,
    var(--cream-2);
}
.range::-webkit-slider-thumb,
.field input.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  margin-top: -8px;             /* centres a 24px handle on a 15px track */
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.range:active::-webkit-slider-thumb,
.field input.range:active::-webkit-slider-thumb { background: var(--yellow); }

.range::-moz-range-track,
.field input.range::-moz-range-track {
  height: 15px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(var(--yellow), var(--yellow)) left center / var(--fill, 0%) 100% no-repeat,
    var(--cream-2);
}
.range::-moz-range-thumb,
.field input.range::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
}
.range:active::-moz-range-thumb,
.field input.range:active::-moz-range-thumb { background: var(--yellow); }

/* ---------------- storefront editor ---------------- */

.store-form { margin-top: 16px; display: grid; gap: 2px; }
.store-form .fl {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; opacity: .7; margin-top: 10px;
}
.store-form input[type=text],
.store-form input[type=url],
.store-form textarea {
  width: 100%; padding: 9px 10px; border: 3px solid var(--ink); border-radius: 7px;
  font: inherit; font-size: 14.5px; background: var(--cream); color: var(--ink);
}
.store-form textarea { resize: vertical; }
.store-form input[type=file] { font-family: var(--mono); font-size: 12px; }

/* ---------------- progress ---------------- */

.bar { height: 15px; background: var(--cream-2); border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--yellow); }
.bar i.full { background: var(--green); }
.bar-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; opacity: .68; }

/* ---------------- form ---------------- */

.build { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); gap: 22px; align-items: start; }
@media (max-width: 940px) { .build { grid-template-columns: 1fr; } }

.rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 940px) { .rail { position: static; } }

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; opacity: .68; margin-bottom: 6px; font-weight: 700;
}

.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 4px solid var(--ink); border-radius: 9px;
  background: #fff; font-family: var(--mono); font-size: 14.5px; color: var(--ink); outline: none;
}
.field textarea { font-family: var(--sans); min-height: 84px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: inset 0 0 0 3px var(--yellow); }
.field .help { font-size: 12.5px; opacity: .68; margin: 6px 0 0; }
.field .help.warn { opacity: 1; font-weight: 700; color: #8A1010; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

.step-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.step-no {
  font-family: var(--fat); font-style: italic; font-size: 30px; line-height: 1;
  background: var(--yellow); border: 4px solid var(--ink); border-radius: 50%;
  width: 48px; height: 48px; display: grid; place-items: center; flex: none;
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
}
.step-head h3 { margin: 0; font-size: 20px; font-weight: 800; }
.step-head .sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; opacity: .6; }

/* tabs */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 7px;
  background: var(--cream-2); cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.tab[aria-selected="true"] { background: var(--cyan); }

/* checkboxes */
.check { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1.5px dashed rgba(20,20,15,.28); }
.check:last-child { border-bottom: 0; }
.check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--red); }
.check span { font-size: 14px; }

/* ---------------- fact list ---------------- */

.facts { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.facts li {
  display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
  border-bottom: 1.5px dashed rgba(20,20,15,.26); align-items: baseline;
}
.facts li:last-child { border-bottom: 0; }
.facts b { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; word-break: break-all; }
.facts .k { opacity: .66; white-space: nowrap; }

/* verification list */
.checks { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 9px 0; align-items: start; }
.checks .m { font-family: var(--fat); font-size: 17px; line-height: 1.25; }
.checks .pass .m { color: var(--green); }
.checks .fail .m { color: var(--red); }

/* ---------------- mint panel ---------------- */

.mintbox { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .mintbox { grid-template-columns: 1fr; } }

.mint-art { background: var(--ink); border: 5px solid var(--ink); border-radius: 12px; box-shadow: 9px 10px 0 rgba(0,0,0,.55); }
.mint-art svg { width: 100%; display: block; border-radius: 8px; }

.qty { display: flex; align-items: stretch; gap: 0; border: 4px solid var(--ink); border-radius: 9px; overflow: hidden; }
.qty button { width: 54px; border: 0; background: var(--cream-2); font-family: var(--fat); font-size: 25px; cursor: pointer; }
.qty button:hover { background: var(--yellow); }
.qty input { flex: 1; border: 0; text-align: center; font-family: var(--fat); font-size: 26px; padding: 10px 0; outline: none; background: #fff; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.total {
  margin: 16px 0; padding: 15px 17px; background: var(--ink); border-radius: 10px; color: var(--cream);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.total .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.total .v { font-family: var(--fat); font-size: 29px; color: var(--yellow); }
.total .usd { font-family: var(--mono); font-size: 12px; opacity: .62; }

.twostep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .twostep { grid-template-columns: 1fr; } }

/* ---------------- footer ---------------- */

footer { background: var(--ink); color: var(--cream); border-top: 7px solid #000; padding-block: 36px 50px; }
.fine { font-size: 12.5px; line-height: 1.62; opacity: .72; max-width: 76ch; }
.fine strong { opacity: 1; color: var(--yellow); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-top: 22px; }
.foot-mark { font-family: var(--fat); font-style: italic; font-size: 36px; }

/* ---------------- creator links ---------------- */

.links { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .06em; font-weight: 700; padding: 8px 13px;
  border: 3px solid var(--ink); border-radius: 7px; background: var(--cream);
  color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 rgba(0,0,0,.5); cursor: pointer;
}
.link-btn:hover { background: var(--yellow); }
.link-btn .ext { opacity: .5; font-size: 13px; }

/* ---------------- leaving-site warning ---------------- */

.leaving { position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(10,10,8,.86); padding: clamp(14px,3vw,40px); overflow-y: auto; }
.leaving[open] { display: grid; place-items: center; }

.leaving-box {
  background: var(--cream); border: 6px solid var(--ink); border-radius: 14px;
  box-shadow: 12px 14px 0 rgba(0,0,0,.6); width: min(520px, 100%);
  padding: clamp(22px, 3vw, 32px);
}
.leaving-box h3 {
  font-family: var(--fat); font-style: italic; font-size: clamp(26px,4vw,38px);
  margin: 0 0 10px; line-height: 1;
}
.leaving-url {
  font-family: var(--mono); font-size: 14px; word-break: break-all;
  background: var(--ink); color: var(--yellow); border-radius: 8px;
  padding: 12px 14px; margin: 14px 0;
}
.leaving-url .host { font-weight: 700; background: var(--yellow); color: var(--ink); padding: 1px 4px; }
.leaving p { font-size: 14.5px; margin: 0 0 12px; }
.leaving .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }