/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 */
/* Hallmark · macrostructure: live-board hero + statement scroll · theme: studied-DNA (source: S/C Labs, Awwwards nominee) · nav: N3 · footer: Ft5 · contrast: pass (40-41) · tokens: pass (48) · mobile: pass (34, 49-57) */
/* RAIDR: premium black and white. Graphite void, hairline grids, wide mono wordmark. */
@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("/assets/fonts/azeret-mono-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #0A0A0A;
  --ink-2: #141414;
  --paper: #F2F2F0;
  --dim: #8A8A88;
  --line: #262626;
  --line-soft: rgba(242, 242, 240, .08);
  --thumb: #333333;
  --thumb-2: #3A3A3A;
  --ink-glass: rgba(10, 10, 10, .86);
  --ink-92: rgba(10, 10, 10, .92);
  --ink-55: rgba(10, 10, 10, .55);
  --ink-35: rgba(10, 10, 10, .35);
  --ink-0: rgba(10, 10, 10, 0);
  --mask: #0A0A0A;
  --paper-03: rgba(242, 242, 240, .03);
  --paper-12: rgba(242, 242, 240, .12);
  --scrim: rgba(10, 10, 10, .6);
  --sans: "Onest", ui-sans-serif, system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --pad: clamp(20px, 4vw, 72px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

html { overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); scroll-behavior: smooth; scrollbar-color: var(--thumb-2) var(--ink); scrollbar-width: thin; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--ink); }
html::-webkit-scrollbar-thumb { background: var(--thumb); border: 3px solid var(--ink); border-radius: 10px; }
body { margin: 0; font: 400 15px/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--ink); padding: 8px 12px; z-index: 99; }
.skip:focus { left: 8px; }

/* underline hover, drawn from the left */
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 1px; }
.ul:hover, .ul:focus-visible { background-size: 100% 1px; }

/* header */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 28px; padding: 16px var(--pad); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.bar.solid { background: var(--ink-glass); backdrop-filter: blur(14px); border-color: var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand-word { font: 500 14px/1 var(--mono); letter-spacing: .42em; }
.links { display: flex; gap: 24px; margin-left: auto; font-size: 13px; color: var(--dim); }
.links a { transition: color .3s; }
.links a:hover { color: var(--paper); }
.tools { display: flex; align-items: center; gap: 8px; }
.ico { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); transition: border-color .3s, background .3s; }
.ico svg { width: 15px; height: 15px; fill: currentColor; }
.ico:hover { border-color: var(--paper); }
.ca { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 34px; background: none; font: 400 12px/1 var(--mono); color: var(--dim); cursor: pointer; }
.ca:disabled { cursor: default; }
.ca:not(:disabled):hover { border-color: var(--paper); color: var(--paper); }
.ca-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--dim); }
.ca.live .ca-dot { background: var(--paper); border-color: var(--paper); }
.pair { font-size: 11px; color: var(--dim); }
.buy { height: 34px; display: grid; place-items: center; padding: 0 16px; border-radius: 34px; border: 1px solid var(--paper); font-size: 13px; font-weight: 500; transition: background .3s, color .3s; }
.buy:hover { background: var(--paper); color: var(--ink); }
.buy[aria-disabled="true"] { border-color: var(--line); color: var(--dim); pointer-events: none; }
.phantom { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 0; border-radius: 34px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity .3s; }
.phantom svg { width: 16px; height: 16px; fill: currentColor; }
.phantom:hover { opacity: .86; }

/* hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -1; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink-92) 0%, var(--ink-55) 42%, var(--ink-0) 70%), linear-gradient(0deg, var(--ink) 0%, var(--ink-0) 30%); }
.hero-art picture, .hero-img { width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 70% 50%; transform: scale(var(--z, 1.08)); transform-origin: 72% 40%; animation: settle 2.4s var(--ease) both; will-change: transform; }
@keyframes settle { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
.hero-in { position: relative; flex: 1; width: min(680px, 100%); padding: clamp(104px, 15vh, 160px) var(--pad) 40px; }
.wordmark { margin: 0 0 clamp(20px, 3vh, 36px); font: 300 clamp(40px, 5.4vw, 92px)/.9 var(--mono); letter-spacing: .34em; margin-right: -.34em; white-space: nowrap; }
.wm .ch { display: inline-block; }
.hero-line { margin: 0; font: 500 clamp(24px, 2.4vw, 40px)/1.12 var(--sans); letter-spacing: -.02em; max-width: 18ch; }
.hero-sub { margin: 16px 0 0; color: var(--dim); max-width: 46ch; }

/* live board in the hero: the earning action */
.board { margin-top: clamp(24px, 4vh, 44px); border-top: 1px solid var(--line); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; }
.board-title { margin: 0; font: 500 15px/1 var(--sans); display: flex; align-items: center; gap: 10px; }
.board-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.board-tally { margin: 0; font-size: 13px; color: var(--dim); }
.raids { list-style: none; margin: 0; padding: 0; }
.raid { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 20px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.raid-who { min-width: 0; }
.raid-author { font-weight: 500; }
.raid-text { display: block; color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--dim); }
.raid-sol { font: 400 20px/1 var(--mono); text-align: right; }
.raid-sol small { display: block; margin-top: 4px; font: 400 11px/1 var(--sans); color: var(--dim); }
.raid-flag { color: var(--paper); text-decoration: line-through; text-decoration-color: var(--dim); }
.board-empty { padding: 20px 0 8px; }
.empty-big { margin: 0; font: 500 20px/1.2 var(--sans); }
.empty-small { margin: 8px 0 18px; color: var(--dim); max-width: 48ch; }
.empty-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-solid, .btn-line, .raid-go { height: 42px; padding: 0 20px; border-radius: 42px; display: inline-grid; place-items: center; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s, opacity .3s; }
.btn-solid, .raid-go { border: 0; background: var(--paper); color: var(--ink); }
.btn-solid:hover, .raid-go:hover { opacity: .86; }
.btn-solid:disabled { opacity: .4; cursor: default; }
.btn-line { border: 1px solid var(--line); background: none; color: var(--paper); }
.btn-line:hover { border-color: var(--paper); }
.raid-go { height: 38px; }
.hero-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin: 0 var(--pad); }
.stat { padding: 18px 16px 22px 0; display: flex; flex-direction: column; gap: 6px; }
.stat + .stat { padding-left: 16px; border-left: 1px solid var(--line); }
.stat-n { font: 300 clamp(22px, 2vw, 34px)/1 var(--mono); }
.stat-l { font-size: 12px; color: var(--dim); }

/* statements */
.statement { margin: 0; font: 500 clamp(28px, 3.6vw, 60px)/1.06 var(--sans); letter-spacing: -.025em; max-width: 22ch; }
.statement .ln { display: block; overflow: hidden; }
.statement .ln > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.statement.in .ln > span { transform: none; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.aside { color: var(--dim); max-width: 40ch; margin: 0; }
.sub { margin: 0 0 18px; font: 500 15px/1.3 var(--sans); }

/* opening */
.opening { padding: clamp(96px, 16vh, 200px) var(--pad) clamp(80px, 12vh, 140px); }
.opening-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; }
.steps { margin-top: clamp(56px, 9vh, 110px); display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.steps::before, .trust-cols::before, .board-grid::before, .rules-grid::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--line); transform: scaleX(var(--draw, 0)); transform-origin: left; transition: transform 1.6s var(--ease); }
.drawn::before { --draw: 1; }
.step { padding: 28px 28px 0 0; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--line); }
.step h3 { margin: 0 0 10px; font: 500 20px/1.2 var(--sans); }
.step p { margin: 0; color: var(--dim); max-width: 38ch; }

/* trust band */
.trust { position: relative; background: var(--ink-2); overflow: hidden; isolation: isolate; }
.trust-art { position: absolute; inset: -20% 0 0 46%; z-index: -1; opacity: .5; }
.trust-img { width: 100%; height: 100%; background: url("/assets/img/raid-hero.jpg") 80% 30% / cover; transform: translateY(var(--py, 0)); -webkit-mask: linear-gradient(90deg, transparent, var(--mask) 40%); mask: linear-gradient(90deg, transparent, var(--mask) 40%); }
.trust-in { padding: clamp(96px, 14vh, 180px) var(--pad); }
.trust-cols { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 40px; margin-top: 48px; padding-top: 28px; }
.trust-cols p { margin: 0; color: var(--dim); }
.teams-wrap { margin-top: 72px; max-width: 980px; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 400; font-size: 12px; color: var(--dim); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl td.n, .tbl th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background .3s; }
.tbl tbody tr:hover { background: var(--paper-03); }
.tbl-empty { color: var(--dim); margin: 16px 0 0; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; border: 1px solid var(--paper); }
.dot.full { background: var(--paper); }
.dot.no { border-color: var(--dim); }
.muted { color: var(--dim); }

/* boards */
.boards { padding: clamp(96px, 14vh, 180px) var(--pad); }
.statement-dim span { color: var(--thumb-2); transition: color .5s; }
.statement-dim span.on { color: var(--paper); }
.board-grid { position: relative; margin-top: 64px; padding-top: 32px; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 96px); }

/* post a raid */
.post { padding: clamp(96px, 14vh, 180px) var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 120px); }
.post-left .aside { margin-top: 28px; }
.post-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wide { grid-column: 1 / -1; }
.half2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.half2 > div { display: flex; flex-direction: column; gap: 8px; }
.field label, .label { font-size: 13px; color: var(--dim); }
.field input[type="url"], .field input[type="number"], .field input:not([type]), .sheet input { width: 100%; height: 46px; padding: 0 2px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 16px; transition: border-color .3s; }
.field input:focus, .sheet input:focus { outline: none; border-color: var(--paper); }
.field input[type="number"] { font-family: var(--mono); }
.preview { margin: 0; min-height: 20px; font-size: 13px; color: var(--dim); }
.seg { display: flex; border: 1px solid var(--line); border-radius: 42px; padding: 3px; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 9px 6px; border-radius: 40px; font-size: 13px; color: var(--dim); cursor: pointer; transition: background .3s, color .3s; white-space: nowrap; }
.seg input:checked + span { background: var(--paper); color: var(--ink); }
.seg input:focus-visible + span { outline: 1px solid var(--paper); }
.post-sum { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); }
.post-sum p { margin: 0; color: var(--dim); max-width: 46ch; }
.status { margin: 0; min-height: 22px; font-size: 14px; }
.status.err { color: var(--paper); text-decoration: underline; text-decoration-color: var(--dim); }

/* desk */
.desk { padding: clamp(80px, 12vh, 140px) var(--pad); border-top: 1px solid var(--line); background: var(--ink-2); }
.desk-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); }
.desk-earned { font: 300 28px/1 var(--mono); margin: 18px 0; }
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.own { border-top: 1px solid var(--line); padding: 18px 0; }
.own-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.own-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.owed { list-style: none; padding: 0; margin: 12px 0 0; }
.owed li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.lnk { background: none; border: 0; padding: 0; color: var(--dim); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lnk:hover { color: var(--paper); }

/* rules */
.rules { padding: clamp(80px, 12vh, 140px) var(--pad); border-top: 1px solid var(--line); }
.rules-grid { position: relative; padding-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.rules-grid p { margin: 0; color: var(--dim); font-size: 14px; }

/* footer */
.foot { padding: clamp(80px, 14vh, 180px) var(--pad) 32px; border-top: 1px solid var(--line); overflow: hidden; }
.foot-big { margin: 0 0 clamp(48px, 10vh, 120px); font: 300 clamp(40px, 9vw, 168px)/.95 var(--sans); letter-spacing: -.045em; white-space: nowrap; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--dim); }
.foot-links { display: flex; gap: 22px; }

/* raid sheet */
.sheet { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .5s; }
.sheet-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--ink); border-left: 1px solid var(--line); padding: 72px clamp(22px, 3vw, 44px) 40px; overflow-y: auto; transform: translateX(100%); transition: transform .6s var(--ease); scrollbar-color: var(--thumb) var(--ink); scrollbar-width: thin; }
.sheet.open { pointer-events: auto; }
.sheet.open .sheet-scrim { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-x { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.sheet-x:hover { border-color: var(--paper); }
.sheet-title { margin: 0 0 6px; font: 500 28px/1.1 var(--sans); letter-spacing: -.02em; }
.sheet-quote { margin: 18px 0 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.sheet-sol { display: flex; gap: 28px; margin: 20px 0 6px; }
.sheet-sol div { display: flex; flex-direction: column; gap: 4px; }
.sheet-sol b { font: 300 26px/1 var(--mono); }
.sheet-sol span { font-size: 12px; color: var(--dim); }
.stepper { list-style: none; margin: 28px 0 0; padding: 0; }
.stepper > li { position: relative; padding: 0 0 26px 34px; }
.stepper > li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--dim); }
.stepper > li::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 1px; background: var(--line); }
.stepper > li:last-child::after { display: none; }
.stepper > li.done::before { background: var(--paper); border-color: var(--paper); }
.stepper > li.now::before { border-color: var(--paper); box-shadow: 0 0 0 4px var(--paper-12); }
.stepper h3 { margin: 0 0 6px; font: 500 16px/1.3 var(--sans); }
.stepper p { margin: 0 0 12px; color: var(--dim); font-size: 14px; }
.stepper .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.stepper .row input { flex: 1; min-width: 180px; }
.code { font: 400 15px/1 var(--mono); padding: 10px 12px; border: 1px dashed var(--line); display: inline-block; letter-spacing: .08em; }
.stepper .msg { margin-top: 10px; min-height: 20px; font-size: 13px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 140%); background: var(--paper); color: var(--ink); padding: 12px 20px; border-radius: 40px; font-size: 14px; transition: transform .5s var(--ease); max-width: calc(100% - 32px); }
.toast.on { transform: translate(-50%, 0); }

/* responsive */
@media (max-width: 1100px) {
  .links { display: none; }
  .rules-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .opening-top, .post, .board-grid, .desk-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .trust-cols { grid-template-columns: 1fr; }
  .trust-art { inset: 0 0 50% 20%; }
}
@media (max-width: 760px) {
  .bar { gap: 10px; padding: 12px 16px; }
  .brand-word { display: none; }
  .ca { padding: 0 10px; font-size: 11px; }
  .tools { margin-left: auto; gap: 6px; }
  .ico { width: 32px; height: 32px; }
  .phantom { padding: 0 12px; }
  .phantom span { display: none; }
  .hero-art::after { background: linear-gradient(0deg, var(--ink) 42%, var(--ink-35) 66%, var(--ink-0) 100%); }
  .hero-img { object-position: 60% 30%; }
  .hero-in { padding-top: 40vh; }
  .hero-foot { grid-template-columns: 1fr 1fr; margin: 0 16px; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .post-form { grid-template-columns: 1fr; }
  .post-sum { flex-direction: column; align-items: stretch; }
  .rules-grid { grid-template-columns: 1fr; }
  .tbl { font-size: 13px; }
  .tbl .hide-s { display: none; }
}
@media (max-width: 420px) {
  .buy { padding: 0 12px; }
  .ca #catext { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .raid { grid-template-columns: 1fr auto; }
  .raid-go { grid-column: 1 / -1; width: 100%; }
}
@media (min-width: 1800px) {
  body { font-size: 16px; }
  .hero-in { width: min(820px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .statement .ln > span { opacity: 1; transform: none; }
  .hero-img { transform: none; }
}

/* press + disabled states */
.btn-solid:active, .btn-line:active, .raid-go:active, .buy:active, .phantom:active, .ico:active, .ca:not(:disabled):active, .sheet-x:active, .seg span:active { transform: translateY(1px); }
.btn-line:disabled, .raid-go:disabled, .phantom:disabled, .buy[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-solid:disabled { cursor: not-allowed; }
.links a, .lnk, .ca { white-space: nowrap; }
h1, h2, h3, .statement { overflow-wrap: anywhere; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .btn-solid:active, .btn-line:active, .raid-go:active, .buy:active, .phantom:active, .ico:active, .sheet-x:active { transform: none; } }