/* The holder flow. Same brand, a fraction of the surface: someone with a
   word wants to see it look good in three taps, not operate a console. */

body.holder{background:var(--surface-2);color:var(--ink)}

.hmast{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:16px 22px 14px;
  border-bottom:1px solid var(--line);background:var(--surface)}
/* The ONA widget in the corner already says who is signed in; the old
   "Connected 0x…" line is not shown (Matt, 2026-09-12). The element stays
   for the page's own bookkeeping. */
.hmast{position:relative}
.hwallet{display:none}
.hwallet b{color:var(--ink);font-weight:500}

.hmain{max-width:1120px;margin:0 auto;padding:34px 22px 80px}
.step h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,52px);
  line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.step h2{font-family:var(--display);font-weight:700;font-size:30px;margin:0 0 8px}
.step h3{margin:22px 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.lede{max-width:56ch;font-size:15.5px;line-height:1.55;color:var(--muted);margin:0 0 22px}
.btnrow.wide{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.btnrow.wide .btn{width:auto;padding:12px 20px}
.btn.big{width:100%;padding:14px;font-size:12px}

.wordgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.wordcard{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0;
  cursor:pointer;text-align:left;overflow:hidden;transition:border-color .12s,transform .12s}
.wordcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.wordcard svg{display:block;width:100%;height:auto;background:var(--surface-2)}
.wordcard .meta{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px}
.wordcard .w{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.02em}
.wordcard .t{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.wordcard .t b{color:var(--accent);font-weight:500}

.designwrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
@media (max-width:880px){.designwrap{grid-template-columns:minmax(0,1fr)}}
.shirtpane{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:18px}
#shirt{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}

.facts{border:1px solid var(--line);border-radius:3px;background:var(--surface);padding:10px 14px;
  display:flex;flex-direction:column;gap:6px}
/* a <dl> carries browser margins of 1em top and bottom; without this
   reset the facts panel ran to twice its height */
.fact{display:flex;justify-content:space-between;gap:12px;margin:0;font-family:var(--mono);font-size:11px;line-height:1.3}
.fact dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:9.5px}
.fact dd{margin:0;font-variant-numeric:tabular-nums}
.facts .locked{font-size:11.5px;color:var(--muted);font-family:var(--ui);line-height:1.45;
  border-top:1px dotted var(--line);padding-top:8px;margin-top:2px}

.pickrow{display:flex;flex-wrap:wrap;gap:7px}
.pickrow button{background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:7px 11px;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.pickrow button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--mat)}
.swatchrow button{width:30px;height:24px;padding:0}
.swatchrow button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface-2),0 0 0 3.5px var(--ink)}

.pricebox{margin:24px 0 12px;border-top:1px solid var(--line);padding-top:14px;
  display:flex;flex-direction:column;gap:4px}
.pricebox .amt{font-family:var(--display);font-size:28px;font-weight:700;line-height:1}
.pricebox .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--muted);
  text-transform:uppercase}
.linkback{background:none;border:0;cursor:pointer;color:var(--muted);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:0 0 16px}
.linkback:hover{color:var(--ink)}
.flag.demo{max-width:640px}

.claim{margin:0 0 26px;max-width:420px}
.claim label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.claimrow{display:flex;gap:8px}
.claimrow input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:2px;padding:11px 12px;font-family:var(--mono);font-size:13px;color:var(--ink);
  letter-spacing:.06em}
.claimrow input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.claimrow .btn{width:auto;padding:11px 20px}
.claim .note{margin:9px 0 0;min-height:1.2em}
.claim .note.bad{color:#B4562B}

.bytoken{margin:30px 0 0;border-top:1px solid var(--line);padding-top:16px;max-width:520px}
.bytoken summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);list-style:none}
.bytoken summary::-webkit-details-marker{display:none}
.bytoken summary::before{content:'+ ';color:var(--muted)}
.bytoken[open] summary::before{content:'– '}
.bytoken summary:hover{color:var(--ink)}
.bytoken .claim{margin-top:14px}
#shelfNote{margin:16px 0 0}
.shelfempty{border:1px dashed var(--line);border-radius:4px;padding:26px 22px;max-width:560px;
  color:var(--muted);font-size:14px;line-height:1.55}
.wordcard .t b.pending{color:var(--muted);font-weight:400}
.wordcard.checking{opacity:.55;pointer-events:none}
.claim.ona{margin-top:22px;max-width:460px}
.claim.ona .claimrow + .claimrow{margin-top:8px}
#orderNote{margin-top:10px;line-height:1.5}
#orderNote strong{color:var(--ink)}
.btn:disabled{opacity:.45;cursor:default}

/* ---- the extras ---- */
.custom{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.custom summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;gap:10px;
  align-items:baseline}
.custom summary::-webkit-details-marker{display:none}
.custom summary::before{content:'+';width:10px;color:var(--muted)}
.custom[open] summary::before{content:'–'}
.custom summary .sub{margin-left:auto;color:var(--muted);letter-spacing:.08em;font-size:9.5px;
  text-transform:none}
.custom select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:8px 10px;font-family:var(--ui);font-size:13px;color:var(--ink)}
.custom input[type=range]{width:100%;accent-color:var(--ink)}
.custom h3 output{margin-left:8px;color:var(--ink);letter-spacing:0}
.custom .reset{margin-top:18px;padding:0}
.swatchrow button.pick{position:relative;width:30px;height:24px;padding:0;overflow:hidden}
.swatchrow button.pick input{position:absolute;inset:-6px;width:calc(100% + 12px);
  height:calc(100% + 12px);opacity:0;cursor:pointer}
.swatchrow button.pick::after{content:'+';position:absolute;inset:0;display:grid;
  place-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);pointer-events:none}
.swatchrow button.pick.set::after{content:''}

.pricebox .line{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.pricebox .line.extra{color:var(--ink)}
.pricebox .line b{font-weight:500}
.pricebox .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:8px;padding-top:8px;border-top:1px dotted var(--line)}
.pricebox .total .amt{font-family:var(--display);font-size:26px;font-weight:700;line-height:1}
.pricebox .total .usd{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  letter-spacing:.06em}

/* ---- checkout ---- */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
@media (max-width:880px){.checkout{grid-template-columns:minmax(0,1fr)}}
.summary{display:flex;flex-direction:column;gap:16px}
.shirtpane.small{padding:12px}
.shirtpane.small svg{width:100%;max-width:380px;height:auto;display:block;margin:0 auto}
.ship h2{margin:0 0 4px}
.lede.tight{margin-bottom:16px;font-size:13.5px}
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.field label .why{text-transform:none;letter-spacing:.02em;color:var(--muted);opacity:.8}
.field input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:10px 11px;font-family:var(--ui);font-size:14px;color:var(--ink)}
.field input + input{margin-top:6px}
.field input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field input.missing{border-color:#B4562B}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#shipNote{min-height:1.2em;margin:0 0 6px}
.note.bad{color:#B4562B}
.orderdone{border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:16px 18px;
  line-height:1.55;font-size:14px}
.orderdone code{font-family:var(--mono);font-size:12px}
.orderdone .btnrow{margin-top:12px}
.wordcard .t b.staked{color:#B4562B;font-weight:500}
.choices h3 .sub{margin-left:8px;color:var(--muted);letter-spacing:.06em;text-transform:none;font-size:9.5px}
.swatchrow{gap:6px}

/* ---- the other side, waiting in the corner ---- */
.shirtpane{position:relative}
.sidetag{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);pointer-events:none}
.flip{position:absolute;right:14px;bottom:14px;width:92px;background:var(--surface);border:1px solid var(--line);
  border-radius:4px;padding:6px 6px 5px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.06);text-align:center;
  -webkit-tap-highlight-color:transparent}
.flip svg{width:100%;height:auto;display:block}
.flip .lbl{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:4px}
.flip:hover,.flip:focus-visible{border-color:var(--ink)}
.flip:active{transform:translateY(1px)}
@media (max-width:600px){.flip{width:74px;right:10px;bottom:10px}}

/* ---- how to pay ---- */
.payhead{margin:18px 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.paymethod button{min-width:70px}
#balanceNote{margin:8px 0 0;min-height:1.2em}
.split{margin:10px 0 4px}
.split label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.split output{margin-left:8px;color:var(--ink);letter-spacing:0}
.split input[type=range]{width:100%;accent-color:var(--ink)}
.pricebox .line.pay{color:var(--ink)}
.pricebox .line.pay b{font-weight:600}