/* Artycle landing. The one bold thing is the proof sheet in the hero: a real
   set's image with crop marks and a printer's colour bar, each ink labelled
   with what it means. Everything else stays quiet so the set's colours do the
   talking. Tokens from /brand/tokens.css. */

body { background: var(--a-paper); }
main { overflow-x: clip; }

.top, .hero, .argument, .returns, .how, .access, .bottom {
  max-width: var(--a-container-max); margin-inline: auto; padding-inline: var(--a-margin-md);
}
@media (max-width: 640px) {
  .top, .hero, .argument, .returns, .how, .access, .bottom { padding-inline: var(--a-margin-sm); }
}

/* ---- header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--a-space-4);
       padding-block: var(--a-space-6); }
.wordmark { font-family: var(--a-font-serif); font-weight: 600; font-size: 1.625rem; letter-spacing: -0.02em;
            color: var(--a-ink); border: 0; }
.wordmark:hover { border: 0; }
.wordmark.small { font-size: 1.125rem; }
.top nav { display: flex; gap: var(--a-space-6); align-items: center; font-size: var(--a-text-small); }
.top nav a { color: var(--a-ink); }
.top nav .signin { color: var(--a-proof); }
@media (max-width: 640px) { .top nav a:not(.signin) { display: none; } }

/* ---- buttons ---- */
.button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--a-space-6);
          border-radius: var(--a-radius-sm); font-weight: 500; border: 1px solid transparent; cursor: pointer;
          font: inherit; font-weight: 500; transition: background var(--a-duration-micro) var(--a-ease); }
.button.primary { background: var(--a-proof); color: var(--a-paper); }
.button.primary:hover { background: var(--a-proof-active); border-color: transparent; }
.button.quiet { color: var(--a-ink); border-color: var(--a-grey-20); }
.button.quiet:hover { border-color: var(--a-ink); }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a-space-12);
        align-items: center; padding-block: var(--a-space-12) var(--a-space-24); }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.025em; font-weight: 500;
           margin-bottom: var(--a-space-6); }
.lead { font-size: var(--a-text-lead); color: var(--a-graphite); max-width: 40ch; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--a-space-3); margin-top: var(--a-space-8); }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--a-space-8); padding-bottom: var(--a-space-16); }
}

/* the proof sheet */
.proof { margin: 0; background: var(--a-panel); padding: var(--a-space-8); border-radius: var(--a-radius-xs); }
.plate { position: relative; }
.plate img { display: block; width: 100%; height: auto; }
.crop { position: absolute; width: 18px; height: 18px; pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--a-ink); }
.crop::before { width: 18px; height: 1px; }
.crop::after { width: 1px; height: 18px; }
.crop.tl { top: -12px; left: -12px; }   .crop.tl::before { top: 11px; left: -6px; } .crop.tl::after { left: 11px; top: -6px; }
.crop.tr { top: -12px; right: -12px; }  .crop.tr::before { top: 11px; right: -6px; } .crop.tr::after { right: 11px; top: -6px; }
.crop.bl { bottom: -12px; left: -12px; } .crop.bl::before { bottom: 11px; left: -6px; } .crop.bl::after { left: 11px; bottom: -6px; }
.crop.br { bottom: -12px; right: -12px; } .crop.br::before { bottom: 11px; right: -6px; } .crop.br::after { right: 11px; bottom: -6px; }

.colourbar { list-style: none; margin: var(--a-space-6) 0 0; padding: 0; display: grid;
             grid-template-columns: repeat(3, 1fr); gap: var(--a-space-4); font-size: var(--a-text-small); line-height: 1.45; }
.colourbar li { display: grid; grid-template-rows: auto auto; gap: var(--a-space-2); color: var(--a-graphite); }
.colourbar li::before { content: ""; display: block; height: 28px; background: var(--ink); }
.colourbar b { color: var(--a-ink); font-weight: 600; }
.proof figcaption { margin-top: var(--a-space-6); font-size: var(--a-text-small); color: var(--a-graphite); }
.proof figcaption i { font-family: var(--a-font-serif); font-size: 1.0625rem; color: var(--a-ink); }
@media (max-width: 640px) {
  .proof { padding: var(--a-space-6) var(--a-space-4); }
  .colourbar { grid-template-columns: 1fr; }
  .colourbar li { display: block; position: relative; padding-left: 52px; }
  .colourbar li::before { position: absolute; left: 0; top: 3px; width: 40px; height: 16px; }
}

/* ---- sections ---- */
.argument, .returns, .how { padding-block: var(--a-space-16); border-top: 1px solid var(--a-grey-20); }
section h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); max-width: 24ch; }
.argument > p { font-family: var(--a-font-serif); font-size: 1.3125rem; line-height: 1.55; max-width: 56ch; color: var(--a-ink); }

.strip { list-style: none; padding: 0; margin: var(--a-space-8) 0 0; display: grid;
         grid-template-columns: repeat(3, 1fr); gap: var(--a-gutter); }
.strip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.strip span { display: block; margin-top: var(--a-space-3); font-family: var(--a-font-serif); font-style: italic; font-size: 1.0625rem; }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr; } }

.specimen { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--a-space-12);
            align-items: start; margin-top: var(--a-space-8); }
.specimen img { display: block; width: 100%; height: auto; }
.specimen dl { margin: 0; }
.specimen dt { font-size: var(--a-text-small); color: var(--a-graphite); margin-top: var(--a-space-6); }
.specimen dt:first-child { margin-top: 0; }
.specimen dd { margin: var(--a-space-1) 0 0; }
.specimen .caption { font-family: var(--a-font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.2; }
.specimen .alt { font-size: var(--a-text-body); }
.specimen .why { font-size: var(--a-text-small); color: var(--a-graphite); margin-top: var(--a-space-2); }
@media (max-width: 860px) { .specimen { grid-template-columns: 1fr; gap: var(--a-space-6); } }

.also { list-style: none; padding: 0; margin: var(--a-space-12) 0 0; display: grid;
        grid-template-columns: repeat(3, 1fr); gap: var(--a-space-8); }
.also li { color: var(--a-graphite); }
.also b { display: block; color: var(--a-ink); font-weight: 600; margin-bottom: var(--a-space-1); }
@media (max-width: 860px) { .also { grid-template-columns: 1fr; gap: var(--a-space-6); } }

/* a real sequence, so numbered */
.steps { list-style: none; padding: 0; margin: var(--a-space-8) 0 0; counter-reset: step;
         display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a-space-8); }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; font-family: var(--a-font-serif); font-size: 2.5rem;
                    line-height: 1; color: var(--a-proof); margin-bottom: var(--a-space-4); }
.steps h3 { font-family: var(--a-font-sans); font-size: var(--a-text-h4); font-weight: 600; margin-bottom: var(--a-space-2); }
.steps p { color: var(--a-graphite); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--a-space-6); } }

/* ---- early access ---- */
.access { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--a-space-12);
          padding-block: var(--a-space-16) var(--a-space-24); border-top: 1px solid var(--a-grey-20); }
.access > div p { color: var(--a-graphite); font-size: var(--a-text-lead); max-width: 36ch; }
#access-form { display: grid; gap: var(--a-space-4); }
#access-form label { display: grid; gap: var(--a-space-2); font-size: var(--a-text-small); font-weight: 500; }
#access-form input, #access-form textarea { font: inherit; font-size: var(--a-text-body); padding: var(--a-space-3) var(--a-space-4);
  border: 1px solid var(--a-grey-38); border-radius: var(--a-radius-sm); background: var(--a-paper); color: var(--a-ink); }
#access-form input:focus, #access-form textarea:focus { outline: 2px solid var(--a-proof); outline-offset: 1px; border-color: var(--a-proof); }
#access-form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#access-form button { justify-self: start; }
#access-form .note { margin: 0; min-height: 1.6em; font-weight: 500; }
#access-form .note.error { color: var(--a-stop); }
#access-form .fine { margin: 0; font-size: var(--a-text-small); color: var(--a-graphite); }
@media (max-width: 860px) { .access { grid-template-columns: 1fr; gap: var(--a-space-6); } }

/* ---- footer ---- */
.bottom { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--a-space-8);
          border-top: 1px solid var(--a-grey-20); font-size: var(--a-text-small); color: var(--a-graphite); }