/* The pages the projection writes: the record page at /look/<phrase>, the pages of prose, the
   wall, the AI study and the page for the day. One shell renders every one of them, and the
   home page loads none of it.

   It lived in styles.css, which reached the 500-line limit this repo holds itself to. The cut
   is along a seam that was already there; what stayed behind is what the home page draws too,
   checked against the classes the running page actually uses rather than the ones in its HTML,
   because the home page builds most of itself after load. */
/* Top and bottom only. These sit on the same element as .wrap, and a padding shorthand here
   sets its side padding to zero: on a screen narrower than the page's own maximum, which is
   every phone, that put the words against both edges. */
/* What the site is, for somebody who arrived at one phrase from a link. Quiet, above the
   phrase, and the first half of it is the way in. */
/* ---- the page a shared link lands on ---- */
/* Three seconds: what the site is, the phrase, the picture in it, the swap, and their own vote.
   It opened on a slogan in a gray box and a split they could not answer, with a note telling them
   to go to the wall to do it. */
.wti-head{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);font-weight:600;
  letter-spacing:-.02em;line-height:1.1;text-align:center;margin:0 auto}
.wti-body{font-size:17px;line-height:1.5;color:var(--ink-soft);text-align:center;
  max-width:46ch;margin:10px auto 26px}
.look-page{padding-top:44px;padding-bottom:72px;max-width:760px}
/* The wall is browsed, not read, so it takes the page's full width and its cards come three to
   the row. It used to be given the reading measure above, which fits two. */
.wall-page{padding-top:44px;padding-bottom:72px}
/* A page of prose is read, not scanned, and it was set the full width of the page: about 140
   characters to the line, which is twice what anyone reads comfortably. Everything here is held
   to a reading measure and given room to breathe between thoughts. */
.info-page{max-width:38rem;margin:0 auto;padding-bottom:8px}
.info-page p{font-size:17px;line-height:1.7;color:var(--ink-soft);margin-top:18px}
.info-page .steps,.info-page ul{margin-top:18px}
/* The phrase itself, which is the thing being looked at, so it is set like one. */
.info-page .say{font-family:var(--serif);font-size:clamp(21px,2.6vw,26px);line-height:1.35;color:var(--ink);margin-top:26px}
/* Where the story turns. */
.info-page .turn{font-family:var(--serif);font-size:20px;color:var(--ink);margin-top:34px}
.info-page .ask{font-family:var(--serif);font-size:20px;color:var(--ink);margin-top:34px}
.info-page .decide{font-family:var(--serif);font-size:22px;color:var(--tofu-ink);margin-top:20px}
/* Three ordinary words, one under the next, because a list of them read as a sentence is three
   words in a row and read as a list is three things you have said this week. */
.info-page .noticing{list-style:none;display:grid;gap:8px;font-family:var(--serif);font-size:21px;color:var(--ink)}
.info-page .sign{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--serif);font-size:19px;color:var(--ink)}
.info-page .sign span{display:block;font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:4px}
.look-page .hook{font-size:19px;color:var(--ink-soft);margin-bottom:22px}
.look-page .facts{margin:26px 0}

/* Where the captcha widget mounts. It is only populated when a write form opens. */
.guess details.method{margin-top:14px;font-size:14px;color:var(--ink-soft)}
.guess details.method summary{cursor:pointer;font-weight:600;color:var(--ink)}
.guess details.method ul{margin:8px 0 8px 18px;display:grid;gap:4px}
.gtally{list-style:none;display:grid;gap:8px;margin:14px 0 4px}
.gt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 3.2em;gap:10px;align-items:center;font-size:15px}
.gt .gl{color:var(--ink-soft)}.gt.mine .gl{color:var(--ink);font-weight:600}
.gbar{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden;display:block}
.gfill{display:block;height:100%;background:var(--line-strong)}.gt.right .gfill{background:var(--tofu)}.gt.mine .gfill{background:var(--potato)}
.gt .gn{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
@media(max-width:560px){.gt{grid-template-columns:1fr 3.2em}.gt .gbar{grid-column:1/-1;grid-row:2}}
.guess .takeaway{font-size:17px;color:var(--ink);margin-top:18px;border-left:4px solid var(--tofu);padding-left:16px}
.guess .takeaway p{margin-top:8px;color:var(--ink)}
.guess .takeaway .lead{font-family:var(--serif);font-size:24px;font-weight:600;margin-top:0}

/* Oct 2: pick a phrase, pick its swap, share the card */
.swap-pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.swap-pick .fchip{font-size:15px;padding:9px 14px}
.swap-pick .fchip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.swap-pick .fchip .cnt{opacity:.7;font-size:12px;margin-left:4px}
.swap-pick .fchip.swap-to{border-color:var(--tofu)}
/* Two numbered steps, both standing on the page before anything is clicked. The number carries
   the eye down: a reader who sees a 2 under the phrases knows a choice follows them. */
.swap-pick .lbl.step{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.swap-pick .step-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:var(--tofu);color:var(--on-accent);font-size:11px;font-weight:700;letter-spacing:0;flex:0 0 auto}
/* Step two before a phrase is picked: it says what will land here, so the gap is an instruction
   rather than an empty space. */
.swap-pick .step-wait{color:var(--muted);font-size:14.5px;margin:0;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:12px 14px}
.pledge{border-left:3px solid var(--tofu);padding-left:14px;color:var(--ink-soft);font-size:15px}
.campaign-page{max-width:640px}
.campaign-page .big-lede{font-size:19px;color:var(--ink-soft);margin-top:12px}
.campaign-page .swap-pick{margin-top:22px}
.look-lbl{display:block;font-size:13.5px;color:var(--muted);margin-bottom:8px}

/* The two buttons under the phrase are part of it: they keep their distance on a tall screen and
   close it on a short one, so they are never the thing that falls below the fold. */
/* The vote sits between the phrase and the ways on from it, tight enough that all three are
   read as one thing: here is the picture, what do you think, and here is where everyone else is. */
/* The question and the ways on share a line while there is room for one, so asking costs the
   page no height until somebody answers. */
/* Everything on this line is one row of controls, so they share a height and a center: the link
   was sitting a few pixels below the buttons beside it, which reads as a mistake before it reads
   as anything else. */

/* The page for the day is the home page in a different month: the same centered heading, the same
   width, and the picker laid out as a panel rather than a column of chips against the left edge. */
.campaign-page{max-width:820px;margin:0 auto;text-align:center}
.campaign-page .swap-pick{text-align:left;margin-top:24px}
.campaign-page .found{justify-content:center}
.campaign-page h1.sec-title{margin-top:8px}

/* The three cases and the principle, on the page that now holds them. */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tri{background:var(--sunk);border-radius:var(--r);padding:clamp(24px,3vw,36px) clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column}
/* The figure sits on the floor of its card so the three read as one row. It is the body above it
   that grows, not a margin on the figure: on a page whose own paragraph rule is more specific than
   a class, `margin-top:auto` on the figure loses and the row staggers. */
.tri>div{flex:1}
.tri .num{font-size:12px;font-weight:700;color:var(--blue);margin-bottom:14px;letter-spacing:.08em;
  text-transform:uppercase}
.tri h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px;line-height:1.25}
.tri p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:24px}
.tri-stat{border-top:1px solid var(--line);padding-top:16px}
.tri-stat b{font-size:25px;font-weight:700;display:block;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tri-stat span{font-size:12px;color:var(--ink-soft)}

.principle{margin-top:48px;background:#F8F8FA;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.principle-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.principle-head .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--blue)}
.principle-head .r{font-size:13px;color:var(--ink-soft)}
.principle h3{font-size:23px;font-weight:700;margin:0 0 12px;letter-spacing:-.02em}
.principle>p{font-size:16.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:24px}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:20px}
.two-up div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.two-up b{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.two-up .on b{color:var(--tofu-ink)}
.two-up p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0}
/* Three cards do not fit in a reading column: at 608px each one was 187px wide and the words
   towered. On its own page the row steps outside the column it sits in. */
.info-page .triptych,.info-page .principle{position:relative;left:50%;transform:translateX(-50%);
  width:min(1000px,calc(100vw - 48px))}
.info-page .triptych{margin-top:32px}
@media(max-width:860px){.triptych,.two-up{grid-template-columns:1fr}}

/* A page whose argument is a row of cards reads from the middle out: its heading sat a third of
   the way in from the left edge of the row underneath it. The cards keep their own left edge,
   because a card is read down the left like anything else. */
.info-page-centered{text-align:center}
.info-page-centered .say{text-wrap:balance}
.info-page-centered > p{margin-inline:auto;max-width:62ch}
.info-page-centered .tri,.info-page-centered .two-up>div,.info-page-centered .principle{text-align:left}
.info-page-centered .principle>p{margin-inline:0}

/* A centered page centers what it ends on too: the row was flex and left-aligned, so the button
   sat neither against the left edge of the cards above it nor under the middle of them. */
.info-page-centered .row{justify-content:center}
.info-page-centered .badge-emoji{font-size:35px;line-height:1;margin:0 0 6px}
.info-page-centered .turn{text-wrap:balance}

/* ---- the one page that is a recipe ---- */
/* Held to the width of the row of cards on the other page, so a step is a line of text rather
   than four words and a wrap, and laid out as a card because everything else here is. */
.info-page-centered .recipe{position:relative;left:50%;transform:translateX(-50%);
  width:min(820px,calc(100vw - 48px));margin:32px 0 0;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,34px);text-align:left}
.recipe-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
.recipe h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.rmeta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.rmeta span{font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.recipe .steps{list-style:none;counter-reset:step;display:grid;gap:14px;margin:18px 0 0;padding:0}
/* The number is set beside the step rather than in a column of its own: as a grid the step's
   bold opening and the sentence after it became two cells, and the sentence wrapped one word to
   a line in a 26px track. */
.recipe .steps li{counter-increment:step;position:relative;display:block;padding-left:38px;
  font-size:15px;line-height:1.55;color:var(--ink-soft)}
.recipe .steps li::before{content:counter(step);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:999px;background:var(--tofu-ink);color:#fff;
  font-size:13px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.recipe .steps li b{color:var(--ink);font-weight:600}
.rnote{font-size:13.5px;color:var(--muted);font-style:italic;margin:18px 0 0;
  border-top:1px solid var(--line);padding-top:14px}
@media(max-width:620px){.recipe .steps li{padding-left:32px}
  .recipe .steps li::before{width:22px;height:22px;font-size:12px}}


/* What explains itself comes after the card, under a heading, so it reads as depth on offer
   rather than the six things you must read first. */
.look-more{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--muted);margin:clamp(36px,5vh,52px) 0 0;text-align:center;max-width:none}

/* The rest of the wall. A shared link is a way in, not a dead end: each of these is its own page,
   so whoever arrives can send on a different phrase instead of this one. */
.also{border-top:1px solid var(--line);margin-top:clamp(40px,6vh,64px);padding-top:clamp(32px,4vh,44px)}
.also-head{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;
  text-align:center;margin:0 auto 24px;max-width:none}
.also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.also-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:18px;text-decoration:none;
  transition:border-color .15s,transform .15s}
.also-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.also-kind{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted)}
.also-phrase{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.also-hook{font-size:13px;color:var(--ink-soft);line-height:1.45}
.also-swap{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:var(--tofu-ink)}
@media(max-width:860px){.also-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.also-grid{grid-template-columns:1fr}}

/* The wall says what the site is before it says what the wall does: most people who reach it
   have followed one phrase from somewhere else. */
.wall-intro{text-align:center;max-width:56ch;margin:0 auto clamp(28px,4vh,44px)}
.wall-intro .wti-body{margin-bottom:0}

/* The question a stranger actually has about the name, answered where they have it. */
.wti-why{text-align:center;margin:-16px auto 26px;font-size:14.5px}
.wti-why a{color:var(--tofu-ink);font-weight:600;text-decoration:none}
.wti-why a:hover{text-decoration:underline;text-underline-offset:3px}

/* A page that states a number says where it got it, the way a phrase does. */
.page-sources{max-width:760px;margin:clamp(32px,4vh,44px) auto 0;text-align:left;
  border-top:1px solid var(--line);padding-top:20px}
.page-sources .lbl{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--muted);margin-bottom:10px}
.page-sources ul{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.page-sources li{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.page-sources a{color:var(--blue);font-weight:600;text-decoration:none}
.page-sources a:hover{text-decoration:underline;text-underline-offset:3px}

/* The label and what is inside stack in one column; the sign keeps its own, centered against
   both, rather than wrapping onto a line of its own underneath them. */
/* The mark an accordion is expected to carry: a chevron pointing at what opens, turning to
   point back at the summary when it has. A plus reads as "add one more", which is a different
   promise. */

/* The pair, where a phrase has one: the picture its words make beside the thing people mean.
   Side by side at every width, because the whole point is reading one against the other. */