/* The front page of sundry.works.

   The app's own palette and fonts, from src/styles/base.css - same ink, same
   brass, same Fraunces and Caveat - so that arriving at the app afterwards is
   not arriving somewhere else. Nothing here is shared with the app by code:
   this page has no build, no framework and no dependency on the repo beyond
   the two images, which is the whole reason it can sit in a folder of its own
   and be published without one.

   The idea is a wall in a gallery. The page is dark and the mark hangs on it
   unframed: it is a cut-out with its own transparency, so a mat would only put
   the cream rectangle back behind it that the cut-out was made to lose. The
   small brass handwriting is the label beside it. Everything else gets out of
   the way.

   A gallery wall is lit, and a lamp is warm. The ground carries two gradients
   now: the old cool one from above, and a small warm one behind the emblem, so
   that the brass, the cream headline and the emblem's parchment sit in light
   rather than on a steel shelf. The same warmth, dimmer, is behind the form at
   the bottom, so the two places the page asks for something are lit alike. */

:root {
  --ink: #16202B;
  --panel: #1E2B38;
  --panel2: #243444;
  --rule: #38506A;
  --text: #ECE6DA;
  --dim: #93A5B8;
  --brass: #E4B363;
  --verd: #7FB2A6;
  --rose: #C9736B;
  /* The emblem's own parchment. The form's fields are cut from it so the slips
     of paper match the picture at the top of the page. */
  --paper: #F4EEE2;
  --gutter: clamp(20px, 5vw, 48px);
  --wide: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* --------------- the cut-over --------------- */

/* The page carries all three of its states at once - closed, invitations, open
   - and one attribute on the html element decides which of them is drawn. See
   the head of index.html, and cutover.sh, which is what throws it.

   Done this way rather than as three pages because the three differ in six
   places and agree in four hundred lines, and three copies of four hundred
   lines is three copies that drift. Done in CSS rather than in script because
   a state chosen after the first paint is a state the reader watches change.

   display: none rather than visibility or a clip: it takes the hidden states
   out of the accessibility tree as well as off the page, so a screen reader is
   not read two answers to the same question. The states that are not drawn are
   still in the file a crawler reads, which is the honest cost of doing it this
   way and is judged acceptable for a page this size.

   .when-asking is closed and invites together - the two states in which the
   page asks a stranger for their address. It exists because the rules below
   match on a single class: an element carrying both .when-closed and
   .when-invites would be hidden in both states rather than shown in both. */
[data-state="closed"]  .when-invites,
[data-state="closed"]  .when-open,
[data-state="invites"] .when-closed,
[data-state="invites"] .when-open,
[data-state="open"]    .when-closed,
[data-state="open"]    .when-invites,
[data-state="open"]    .when-asking { display: none !important; }

/* The download, in the open state only. The button is centred like the form it
   stands in place of, and the small print under it is a column of the same
   width as the lede above rather than the full 1080. */
.waitlist .downloads { justify-content: center; margin-top: 26px; }
.waitlist .downloads-fine {
  max-width: 62ch;
  margin: 14px auto 0;
  line-height: 1.6;
}
.waitlist .downloads-fine em { font-style: normal; color: var(--text); opacity: .9; }

/* The second door, and it has to read like one. The Windows program is offered
   after the browser rather than instead of it, and two paragraphs of identical
   small print side by side is the same thing said twice - a reader picks the
   first or gives up on both. A rule above it and a step down in weight is
   enough: anybody who wants a program on their own disk is looking for exactly
   this and will find it, and nobody else has to read past it. */
/* The trial, and the one paragraph on this page that is allowed to sit
   between the lede and the button. It is set at the lede size rather than as
   small print because of what it says - no card, and your work is not
   anywhere I could keep it - and small print is where a reader has learned to
   expect the opposite of that. Brass on the first line for the same reason
   the label above the heading is brass: it is the thing to read if you read
   one thing here. */
.waitlist .trial {
  max-width: 54ch;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  border-left: 2px solid var(--brass);
  padding-left: 18px;
  text-align: left;
}

.waitlist .downloads-fine.aside {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  opacity: .72;
  max-width: 58ch;
}

img { max-width: 100%; height: auto; }

/* Both calls to action are now anchors to #waitlist, so the page should be seen
   to travel rather than to cut. Turned off again under prefers-reduced-motion. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  /* a little depth in the wall, so the frame has something to sit against,
     and a lamp above and to the right of it */
  background-image:
    radial-gradient(760px 460px at 72% 4%, rgba(228,179,99,.11) 0%, rgba(228,179,99,0) 70%),
    radial-gradient(1100px 620px at 50% -10%, #22384F 0%, rgba(34,56,79,0) 70%);
  background-repeat: no-repeat;
  color: var(--text);
  font: 400 17px/1.65 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: Fraunces, Georgia, 'Times New Roman', serif; font-weight: 600; }
a { color: var(--brass); }
a:hover { color: #F2CB86; }

/* the gallery label: small, brass, handwritten */
.label {
  font-family: Caveat, 'Segoe Script', cursive;
  font-weight: 500;
  font-size: 25px;
  color: var(--brass);
  opacity: .8;
  letter-spacing: .04em;
  margin: 0 0 4px;
}

.section-title { font-size: clamp(26px, 4vw, 34px); margin: 0 0 14px; line-height: 1.25; }
.lede { color: var(--dim); font-size: clamp(17px, 2.2vw, 19px); max-width: 60ch; }

/* --------------- the notice for a stranded home-screen icon --------------- */

.moved {
  margin: 0;
  padding: 12px var(--gutter);
  background: var(--panel2);
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  font-size: 15px;
  text-align: center;
}

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

.hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(32px, 7vw, 72px) var(--gutter) clamp(12px, 3vw, 28px);
}

.hero-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 5vw, 52px);
  align-items: center;
  text-align: left;
}
.hero-grid > * { min-width: 0; }
.hero-words .label { margin-bottom: 8px; opacity: 1; }
.hero-words h1 {
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.14;
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 26px 0 0; }

/* What is true about the offer, under the one thing to press: invite-only,
   free, which desktops, and that the painter is the editor. It replaced a
   second link ("Already using it? Open the app") written for people who do not
   exist yet, which halved the only ask on the first screen. */
.fine { color: var(--dim); font-size: 16px; max-width: 48ch; margin: 14px 0 0; }

.button {
  display: inline-block;
  background: var(--brass);
  color: #1A1206;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  padding: 12px 26px;
  border: 1px solid #C9974C;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.button:hover {
  color: #1A1206;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(228,179,99,.22);
}
.quiet { color: var(--dim); font-size: 15.5px; text-decoration: none; }
.quiet:hover { color: var(--brass); }

/* the picture, hung */
.frame {
  margin: 0;
  padding: 0;
}
.frame img { display: block; width: 100%; height: auto; }

/* --------------- the wall --------------- */

/* Full bleed, outside the 1080 column, because a band that stops at the text
   margin is a picture of a wall rather than the wall itself. The gradient is
   what makes it bleed: without it six tiles sit on the ground with a hard edge,
   and with it they come out of the dark. */
.wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* The row has to be 1fr, not auto. An auto row sizes to the image height and
     the container height does not shrink it, so the pictures overflow the band
     and spill onto whatever is below - by 14px on a desktop and 43px on a
     phone, which is how it was found. minmax(0,...) rather than a bare 1fr:
     a 1fr row keeps an automatic minimum of its content, so it grows to the
     image height regardless of the container. */
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  height: clamp(140px, 22vw, 260px);
  overflow: hidden;
  margin-top: clamp(16px, 3vw, 30px);
}
.wall img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wall::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(22,32,43,0) 62%, var(--ink) 100%);
}

/* --------------- how it goes --------------- */

section { max-width: var(--wide); margin: 0 auto; padding: clamp(34px, 5vw, 56px) var(--gutter); }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(20px, 3vw, 30px);
}
.steps li { counter-increment: step; position: relative; padding-top: 68px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: 54px;
  line-height: 1;
  color: var(--brass);
  opacity: 1;
  border: 0;
  padding: 0;
}
/* min-height holds two lines so all four bodies start level. Three of the
   headings fit on one line and "It drafts. You decide." does not, which left
   that column a line lower than its neighbours; reserving the space is steadier
   than trimming headings to fit a column width that changes anyway. */
.steps h2 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; min-height: 2.5em; }
.steps p { color: var(--dim); margin: 0; font-size: 17px; }
.steps p + p { margin-top: 10px; }

/* The fifth beat. Cream and serif rather than the steps' grey sans, because it
   is the payoff the four steps were building to, not a fifth instruction. */
.then {
  margin: 30px 0 0;
  max-width: 58ch;
  font-family: Fraunces, Georgia, 'Times New Roman', serif;
  font-size: 21px;
  line-height: 1.4;
  color: var(--text);
}
/* One soft echo of the hero button where the pitch lands, not a second brass
   one. A page that offers twice is offering; a page with two brass buttons on
   one screen is selling. */
.cta-mid { margin-top: 18px; }

/* --------------- why it exists --------------- */

/* Two paragraphs rather than one: the account of what a painting used to cost
   in evenings, and then what the tool does about it. Running them together
   buried the two days, which is the only number on this page a painter already
   knows in their own hands. */
.why .lede + .lede { margin-top: 18px; }

/* --------------- what is in it --------------- */

/* Nine panels with nine borders read as a feature matrix from a software site,
   which is the exact thing this reader distrusts, and --panel on --ink is only
   a 3% lift so the borders were doing all the work. Hairline rules and two
   columns instead: the same language as the steps above, and each entry gets a
   full line for its title. */
.cards {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
}
.cards li {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 18px 0 26px;
}
.cards li:last-child { border-bottom: 1px solid var(--rule); }
.cards h3 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; color: var(--text); }
.cards p { color: var(--dim); margin: 0; font-size: 17px; line-height: 1.6; }
/* One entry in the list shows the thing it describes. The business card is the
   one item here that is not made per painting, so it is also the one a sentence
   struggles to picture. */
.cards li.has-pic img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 4px;
  margin: 12px 0 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}

/* --------------- one painting, and what came out of it --------------- */

/* Five real files from one painting, at one height, standing on a shelf. Equal
   height rather than equal columns is what makes them read as objects laid out
   side by side: a tall reel frame in a fifth of the width would be two and a
   half times the height of the card beside it, which is a chart, not a table.
   Each one keeps its own width, so the row is the shapes themselves.

   The height is capped at 176px because the five at their own proportions plus
   four gaps come to 971px, and the column is 984px wide at the page's widest.
   Anything taller wraps, which is not wrong - it is what happens on a narrow
   screen - but the row reads best unbroken. */
.made {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(14px, 2vw, 20px);
}
.made li { flex: 0 0 auto; }
/* The painting went in and the other four came out, and the row should say so
   without a caption saying it. One wider gap after the first object is the
   whole of that argument. The heights are capped a little under what the
   column would allow so this gap has somewhere to come from. */
.made li:first-child { margin-right: clamp(8px, 2vw, 26px); }
/* Six objects will not sit on one line at any height worth looking at, and left
   to itself the row breaks four and two. This forces three and three. It is
   display:none on a phone, where the natural wrap is the right one. */
.made .row-break { flex-basis: 100%; height: 0; margin: 0; }
.made figure { margin: 0; text-align: center; }
.made img {
  display: block;
  height: clamp(118px, 22vw, 245px);
  width: auto;
  border-radius: 2px;
  box-shadow: 0 22px 44px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.45);
}
/* The card has no rectangle. Its black surround was flooded away when the webp
   was made, so a box-shadow would draw the edge of a box that is not there; a
   drop-shadow filter follows the torn paper instead. */
.made img.torn {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.6));
}
.made figcaption {
  font-family: Caveat, 'Segoe Script', cursive;
  font-weight: 500;
  font-size: 21px;
  color: var(--brass);
  opacity: .85;
  margin-top: 12px;
}

/* The nine on show are half of what the heading counts, and a number a reader
   cannot account for is a boast. This says where the others went, and names
   four of them, so eighteen is checkable. */
.what .rest {
  margin: 28px 0 0;
  max-width: 62ch;
  color: var(--dim);
  font-size: 17px;
}

/* --------------- where it all lives --------------- */

/* Its own room, like the form below it. This was a green-ruled aside after nine
   cards - a footnote, styled to be skipped, answering the question a protective
   painter asks at the top of the page. --verd goes back to meaning one thing:
   the success note on the form. */
.where { border-top: 1px solid var(--rule); }

/* --------------- the waitlist --------------- */

/* The one section whose content is narrower than the section it sits in - a
   640px form and a 60ch lede inside 1080px. Left-aligned that reads as a block
   that slipped off to one side, because the sections above it fill the width
   with a grid and this one cannot. So this one centres, as a column. The fields
   keep their own text left: a centred label above a left-aligned box points at
   nothing. */
.waitlist {
  border-top: 1px solid var(--rule);
  text-align: center;
  background: radial-gradient(700px 360px at 50% 0%, rgba(228,179,99,.06) 0%, rgba(228,179,99,0) 70%);
}
.waitlist .lede { margin-left: auto; margin-right: auto; }
/* The money answer, set apart from the invitation above it and a shade quieter,
   so it reads as the plain fact it is rather than as small print. */
.waitlist .cost {
  max-width: 58ch;
  margin: 20px auto 0;
  color: var(--dim);
  font-size: 16px;
  line-height: 1.6;
  opacity: .9;
}

form {
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 20px;
  max-width: 640px;
  text-align: left;
}
.field { display: block; }
.field.wide { grid-column: 1 / -1; }
.field > span { display: block; font-size: 14.5px; color: var(--dim); margin-bottom: 6px; }
.field em { font-style: normal; opacity: .65; }

/* Slips of paper on a dark wall, in the emblem's own parchment. They used to be
   --panel with a --rule border, which made the one place the painter is asked
   to act look like a tenth of the boxes above it. Dark ink on cream also reads
   better on a phone in daylight than cream on dark. */
input[type=text], input[type=email], textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid #C9BFAE;
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 11px 13px;
}
input::placeholder, textarea::placeholder { color: #8A8578; }
textarea { resize: vertical; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(228,179,99,.35);
}

.submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin: 4px 0 0; }
button.button { font-family: inherit; }

/* What happens to the address, said where it is asked for. The page is new and
   asks a stranger for an email; the truth is unusually good and costs a line. */
.fine-print {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  text-align: center;
  color: var(--dim);
  font-size: 14px;
  opacity: .85;
}

/* Off the page rather than display:none - a bot that fills in forms reads the
   markup, and skipping what is hidden is the easiest rule for one to follow. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.note { font-size: 15.5px; margin: 0; }
.note.good { color: var(--verd); }
.note.bad { color: var(--rose); }
/* With no JavaScript the endpoint sends the browser back to #joined or
   #joined-no, and the right one of these appears. With JavaScript neither is
   ever the target and the script writes into #note instead. */
#joined, #joined-no { display: none; margin: 14px 0 0; }
#joined:target, #joined-no:target { display: block; }

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

footer {
  border-top: 1px solid var(--rule);
  padding: 34px var(--gutter) 48px;
  text-align: center;
  color: var(--dim);
  font-size: 15px;
}
footer p { margin: 0 0 6px; }
/* The signature, in the same hand as the labels beside the pictures. It used to
   share a 13.5px line with the copyright symbol. */
footer .by {
  font-family: Caveat, 'Segoe Script', cursive;
  font-weight: 500;
  font-size: 24px;
  color: var(--brass);
  opacity: .85;
  margin: 10px 0 2px;
}
.mark { display: block; width: 170px; height: auto; margin: 0 auto 16px; opacity: .92; }
.dot { opacity: .5; margin: 0 8px; }
.small { font-size: 13.5px; opacity: .7; margin-top: 10px; }
/* Its own line rather than crammed into the credit sentence above, so two
   short links don't read as a third clause of somebody else's sentence. */
.legal-links { font-size: 12.5px; opacity: .55; margin-top: 4px; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

/* --------------- inner pages (privacy.html, terms.html, photograph.html) ---
   Reuses the footer's own .mark as a small header logo, and narrows the
   normal 1080px section width down to a readable measure for paragraphs
   of dense text rather than the wide layout the rest of the page uses. */

.legal-head { padding: 34px var(--gutter) 0; text-align: center; }
.legal-head .mark { margin-bottom: 0; }

.legal { max-width: 640px; }
.legal h2 { font-size: 21px; margin-top: 34px; }
.legal p { margin: 10px 0; }

/* --------------- the guide (photograph.html) ---------------
   Wider than the legal pages, because this one is read standing at an easel
   with wet hands rather than sat down: the checklists want room, and the type
   is a size up on the same measure. Nothing here is on the front page, so it
   costs that page nothing but the bytes.

   The boxes are real checkboxes and nothing remembers them. That is the point
   of them - one pass down the page while the painting is on the easel, and the
   next painting starts with them clear. Storing the ticks would mean the second
   painting began with somebody else's finished list. */

.guide { max-width: 720px; }
.guide h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  margin: 6px 0 18px;
}
.guide h2 {
  font-size: clamp(23px, 3.4vw, 28px);
  margin: 46px 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.guide h3 { font-size: 19px; margin: 26px 0 8px; color: var(--brass); }
.guide p { margin: 12px 0; }
.guide .lede { max-width: none; }

/* The jump list. A page this long arrives from a search for one half of it. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 26px 0 8px;
}
.jump a {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 15px;
  text-decoration: none;
  background: var(--panel);
}
.jump a:hover { border-color: var(--brass); background: var(--panel2); }

/* The one decision on the page, made side by side rather than in two
   paragraphs that have to be held in the head at once. */
.pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 8px;
}
.pick > div {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
}
.pick h3 { margin: 0 0 6px; }
.pick p { color: var(--dim); margin: 0; font-size: 16px; }

.check { list-style: none; margin: 14px 0 0; padding: 0; }
.check li { border-bottom: 1px solid rgba(56, 80, 106, .5); }
.check li:last-child { border-bottom: 0; }
.check label {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 11px 2px;
  cursor: pointer;
}
.check input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 0;
  /* one line instead of a hand-drawn tick, and it takes the brass with it */
  accent-color: var(--brass);
  /* sits on the first line of the text rather than above it */
  margin-top: 3px;
}
.check span { flex: 1 1 auto; }
.check input:checked ~ span { color: var(--dim); }
.check strong { color: var(--brass); font-weight: 600; }

.tip {
  background: var(--panel);
  border-left: 3px solid var(--brass);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 22px 0;
  color: var(--dim);
  font-size: 16.5px;
}

.guide-cta {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.guide-cta h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.guide-cta .lede { margin-inline: auto; max-width: 56ch; }
.guide-cta .cta { justify-content: center; }

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

@media (max-width: 760px) {
  .hero { padding-top: 24px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 0; }
  /* display:contents dissolves the words column so the emblem can be ordered
     between the headline and the lede. It used to come first at up to 420px
     wide, which is about 600px of picture before a single word: the whole of a
     phone's first screen spent on a drawing that means nothing yet, with the
     headline and the button below the fold. At 220px it is a seal under the
     headline instead, and label, headline, emblem, lede and button all land on
     one 375px screen. The desktop order is untouched. */
  .hero-words { display: contents; }
  .hero-words .label { order: 1; }
  .hero-words h1 { order: 2; margin-bottom: 10px; }
  .frame { order: 3; max-width: 220px; margin: 4px auto 14px; }
  .hero-words .lede { order: 4; font-size: 16px; line-height: 1.5; margin: 0 auto; }
  .hero-words .cta { order: 5; justify-content: center; }
  .hero-words .fine { order: 6; margin-inline: auto; }
  .cta { justify-content: center; }
  /* The one thing to press, as wide as a thumb. */
  .cta .button { flex: 1 1 100%; text-align: center; padding: 15px 26px; }
  .submit .button { flex: 1 1 100%; padding: 15px 26px; }
  .lede { margin-inline: auto; }
  /* Three across on a phone rather than six slivers. The last three are
     display:none and still downloaded - about 100KB of mobile data that goes
     nowhere. loading=lazy was tried and does not prevent it: the browser
     fetched all six anyway. Fixing it properly wants <picture> with a media
     source, which is more markup than 100KB is worth on a page with no build.
     Measured, not assumed. */
  .wall { grid-template-columns: repeat(3, 1fr); height: 132px; }
  .wall img:nth-child(n+4) { display: none; }
  .cards { margin-top: 12px; }
  .cards li { padding: 14px 0 18px; }
  .cards h3 { font-size: 19px; }
  .cards p { font-size: 16px; }
  .steps li { padding-top: 50px; }
  .steps li::before { font-size: 38px; }
  .steps h2 { font-size: 21px; min-height: 0; }
  .steps p { font-size: 16px; }
  .then { font-size: 19px; margin-inline: auto; }
  /* Six objects at their own widths wrap into four ragged rows on a phone, one
     of them holding a single certificate. A two-column grid gives three tidy
     rows of two instead: the height cap governs the tall ones and the cell
     width governs the wide ones, and align-items keeps each pair on a line. */
  .made {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
    align-items: end;
    justify-items: center;
  }
  .made li:first-child { margin-right: 0; }
  .made .row-break { display: none; }
  .made img { width: auto; height: auto; max-width: 100%; max-height: 132px; }
  .made figcaption { font-size: 19px; margin-top: 8px; }
  /* Two cards of prose side by side at 375px is two words a line. */
  .pick { grid-template-columns: 1fr; }
  .guide h2 { margin-top: 36px; }
  /* A finger, not a mouse pointer: the whole row is the target, so the taps
     land at the easel with the phone propped against something. */
  .check label { padding: 13px 2px; }
  .check input { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:hover { transform: none; }
}