/* Digital Art Registry — front page.
   Palette and identity are fixed. Ink on paper, one red accent, hairlines, no gradients. */

:root{
  --paper:#FCFAF6;
  --ink:#1A1A1A;
  --red:#8C2318;
  --mute:#7A7268;   /* 4.54:1 on --paper, AA for body text */
  --hair:rgba(26,26,26,.18);
  --serif:'Lora','DejaVu Serif',Georgia,serif;
  --mono:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:1152px;   /* 560 plate + 72 gutter + 520 right column */
  --gutter:22px;
  --plate:560px;
  --hero-gap:72px;
  --ask-min:520px;
  --prose:620px;   /* reading measure for running prose inside the wider column */
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0 auto;
  max-width:calc(var(--measure) + 2*var(--gutter));
  padding:0 var(--gutter);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)}
a:hover,a:focus-visible{border-bottom-color:var(--ink)}

:focus-visible{outline:1px solid var(--red);outline-offset:3px}

/* ---- the name ------------------------------------------------------------
   wordmark_primary.svg carries 120u of paper around a 96u cap height. The
   wrapper is the cap box; the image is scaled past it and clipped, so the ink
   sits flush on the left gutter at any width.
     ink box   2529.3784615384616 - 240 = 2289.3784615384616 x 96
     image     2529.3784615384616 / 2289.3784615384616 = 110.48318%
     offset    120 / 2289.3784615384616 = 5.241592%                            */

.masthead{--mark-cap:36px;padding:56px 0 0}

/* mark_numero.svg: viewBox 448.4332307692308 x 320, 80u of paper around a 160u cap.
   The mark's margin box is its cap box, so its bottom edge is its baseline. In a
   baseline-aligned flex row that bottom edge meets the digits' baseline. */
.lockup{
  margin:0 0 20px;
  font-size:0;      /* no word space between the mark and the digits */
  line-height:0;    /* the mark's cap box sets the line, and its bottom is the baseline */
  white-space:nowrap;
}

.masthead .mark{
  --cap:var(--mark-cap);
  display:inline-block;
  vertical-align:baseline;
}

/* EB Garamond Medium: lining figures stand 0.63em, so this is the size at which
   they match the mark's cap height. line-height:0 keeps the digits' box from
   setting the row height — the mark does that. */
.count{
  margin-left:.3333em;
  font-family:'EB Garamond','DejaVu Serif',Georgia,serif;
  font-weight:500;
  font-size:calc(var(--mark-cap) / 0.63);
  line-height:0;
  letter-spacing:.12em;
  white-space:nowrap;
}

.wordmark{
  width:100%;
  max-width:960px;
  aspect-ratio:2289.3784615384616 / 96;
  overflow:hidden;
}
.wordmark a{display:block;border-bottom:0}
.wordmark img{
  display:block;
  width:110.48318%;
  max-width:none;
  margin:-5.241592% 0 0 -5.241592%;
}

.tagline{
  margin:26px 0 0;
  font-size:24px;
  font-style:italic;
  line-height:1.4;
}

/* /method is a reading page: the masthead and footer frame its narrower column */
body.method{max-width:calc(680px + 2*var(--gutter))}
.article th{color:var(--ink)}

/* ---- the first screen ------------------------------------------------------
   Mark, wordmark, tagline and hero row share one block a screen tall. Anything
   below — the card, the tiers — starts after it, never inside it.              */

.floor{
  min-height:100svh;
  padding-bottom:96px;
}

/* what the register holds, assembled from whichever parts are not nought */
.register{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.5;
  color:var(--mute);
}

/* ---- hero row ------------------------------------------------------------- */

.hero{margin:68px 0 0}

.plate{margin:0;max-width:var(--plate);text-align:center}

.plate img{
  display:block;
  width:100%;
  max-width:var(--plate);
  height:auto;
  margin:0 auto;
}

.plate figcaption{
  margin:16px 0 0;
  font-size:14px;
  font-style:italic;
  line-height:1.5;
  color:var(--mute);
}

/* stacked, the question keeps the plate's measure rather than running the
   full width of the page */
.ask{margin:56px 0 0;max-width:var(--plate)}

.ask h1{
  margin:0;
  font-size:36px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.005em;
}

.lede{
  margin:18px 0 0;
  font-size:18px;
  line-height:1.5;
}

/* ---- 5. the field: wide enough for all 42 characters of an address -------- */

#read-form{margin:30px 0 0}

#wallet{
  display:block;
  width:100%;
  min-width:0;
  padding:.5em 0;
  border:0;
  border-bottom:1px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:17px;
  line-height:1.5;
}
#wallet::placeholder{color:var(--mute);opacity:1}
#wallet:focus{outline:none;border-bottom-width:2px;margin-bottom:-1px}
#wallet:focus-visible{outline:none}

button{
  padding:.52em 1.15em;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.5;
  cursor:pointer;
}
button:hover{background:var(--ink);color:var(--paper)}
button[disabled]{cursor:default;color:var(--mute);border-color:var(--hair)}
button[disabled]:hover{background:var(--paper);color:var(--mute)}

/* the address the Registry actually read, checksummed, under the field */
.echo{
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.5;
  color:var(--mute);
  overflow-wrap:anywhere;
}

#read-button{margin-top:22px}

/* "Reading…" sits under the button. Nothing else goes in that space. */
.status{
  min-height:1.5em;
  margin:20px 0 0;
  font-size:15px;
  font-style:italic;
  line-height:1.5;
  color:var(--mute);
}

/* two columns only once the plate, the gutter and a 520px column all fit:
   560 + 72 + 520 = 1152, plus the two 22px gutters */
@media (min-width:1196px){
  .hero{
    display:grid;
    grid-template-columns:var(--plate) minmax(var(--ask-min), 1fr);
    column-gap:var(--hero-gap);
    align-items:start;
  }
  .ask{margin:0}
  /* the question's cap height, not its line box, meets the top of the plate */
  .ask h1{margin-top:-9.4px}
}

/* ---- the card, under the hero row, across both columns --------------------- */

#result{margin:0 0 96px}

.card{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.card-act{
  max-width:900px;
  margin:28px auto 0;
  text-align:center;
}
.card img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--hair);
}
.card figcaption{
  margin:16px 0 0;
  font-size:14px;
  font-style:italic;
  line-height:1.5;
  color:var(--mute);
}

/* ---- tiers ---------------------------------------------------------------- */

.tiers{margin:0}

.tiers table{
  width:100%;
  max-width:960px;
  border-collapse:collapse;
  text-align:left;
}

.tiers tr{border-top:1px solid var(--hair)}
.tiers tbody:last-child tr:last-child{border-bottom:1px solid var(--hair)}

.tiers th,.tiers td{
  padding:1.05em 0;
  vertical-align:top;
  font-weight:400;
}

.tiers th{
  width:128px;
  padding-right:14px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:2.1;
}

.tiers .price{
  width:124px;
  padding-right:14px;
  font-size:15px;
  line-height:1.72;
  white-space:nowrap;
}

.tiers td:last-child{font-size:15.5px;line-height:1.6}

/* Once / Every year: the kicker, heading its own row group */
.tiers .group th{
  width:auto;
  padding:2.6em 0 .9em;
  font-size:11.5px;
  letter-spacing:.24em;
  color:var(--red);
}
.tiers tbody:first-child .group th{padding-top:0}
.tiers .group{border-top:0}

.act{display:block;margin:16px 0 2px}
.act button{font-size:15px}
.gate{color:var(--mute)}

/* ---- why this exists ------------------------------------------------------- */

.why{margin:96px 0 0}

.why h2{
  margin:0;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--red);
}

.why p{margin:1.1em 0 0;max-width:var(--prose)}
.method{margin-top:1.4em}

/* ---- footer ---------------------------------------------------------------- */
/* mark_numero.svg: viewBox 448.4332307692308 x 320, 80u of paper around a 160u cap */

footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px 24px;
  flex-wrap:wrap;
  margin:112px 0 0;
  padding:26px 0 56px;
  border-top:1px solid var(--hair);
}

.mark{
  --cap:14px;
  --k:calc(var(--cap) / 160);
  display:block;
  width:calc(448.4332307692308 * var(--k));
  height:calc(320 * var(--k));
  margin:calc(80 * var(--k) * -1);
  max-width:none;
}

.colophon{text-align:right}

.record{
  margin:0;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.6;
  color:var(--ink);
  white-space:nowrap;
}

.disclosure{margin:.7em 0 0;font-size:13px}

/* ---- narrow ---------------------------------------------------------------- */

@media (max-width:560px){
  body{font-size:16px}
  .masthead{--mark-cap:28px}
  .ask h1{font-size:30px}
  .lede{font-size:17px}
  .tiers tr{display:block}
  .tiers th,.tiers td{display:block;width:auto;padding:0}
  .tiers th{padding-top:1.05em;line-height:1.6}
  .tiers .group th{padding:2.2em 0 .9em}
  .tiers tbody:first-child .group th{padding-top:0}
  .tiers .price{padding-top:.25em;font-size:14.5px}
  .tiers td:last-child{padding:.5em 0 1.15em}
}

/* the mark and the record line stop sharing a line on a narrow phone */
@media (max-width:419px){
  footer{display:block}
  .colophon{margin-top:22px;text-align:left}
}

@media (max-width:360px){
  .record{white-space:normal}
}