/* Tofu & Potatoes. Fonts are declared in the contract and projected into generated/appearance.css. */
:root{
  color-scheme:light;
  /* Apple-quiet: a white ground, one blue for anything that leads somewhere, and the site's own
     two colors kept for the swap and the keep, because the name depends on them. */
  --bg:#FFFFFF;--surface:#FFFFFF;--sunk:#F5F5F7;--ink:#1D1D1F;--ink-soft:#6E6E73;--muted:#86868B;
  --blue:#0071E3;--blue-dark:#0077ED;
  --potato:#E05D38;--potato-dark:#C24A28;--tofu:#34C759;--tofu-ink:#1B7A38;--on-accent:#fff;
  --line:rgba(0,0,0,.08);--line-strong:rgba(0,0,0,.14);--mark:#FFF4CC;--mark-ink:#5C4400;
  --shadow:0 4px 24px rgba(0,0,0,.04);--shadow-lg:0 16px 48px rgba(0,0,0,.10);--r:22px;--r-sm:14px;
  --nav-h:65px;
}
/* Light only. The site is a page about noticing things in print, and it is read in daylight
   colors everywhere: an editor's drawing, a share card and a visitor's screen all match. */
*{box-sizing:border-box;margin:0;padding:0}
/* A laid-out block beats the attribute that hides it, so the result panel and its share row
   were on screen before anything had been checked. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--potato);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:999}.skip:focus{left:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif)}

/* launch strip + nav */
/* The day, across the top. One line, quiet, and a link: a banner that shouts gets closed. */
.strip{display:block;background:var(--ink);color:var(--bg);font-size:13.5px;text-align:center;
  padding:10px 16px;text-decoration:none}
.strip:hover{background:#000}
.strip b{font-weight:700}
.strip-go{opacity:.7;margin-left:2px}
.strip a{font-weight:600;text-underline-offset:3px}.strip b{color:var(--tofu)}
.nav{position:sticky;top:0;z-index:100;min-height:var(--nav-h);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 28px;max-width:1100px;margin:auto}
.logo{font-family:var(--serif);font-weight:600;font-size:21px;text-decoration:none;white-space:nowrap}
.logo .t{color:var(--tofu-ink)}.logo .p{color:var(--potato)}
/* The ampersand is split like the site icon: --mark-split is the glyph's own middle, projected from the font. */
.logo .a{color:transparent;background:linear-gradient(to bottom,var(--tofu-ink) var(--mark-split),var(--potato) var(--mark-split));-webkit-background-clip:text;background-clip:text}
.nav-links{display:flex;align-items:center;gap:22px;font-weight:500;font-size:15px}
.nav-links a,.nav-links .linkish{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover,.nav-links .linkish:hover{color:var(--ink)}
/* Adding a phrase is a dialog, so in the menu it is a button that has to read as a line. */
.linkish{font:inherit;background:none;border:0;padding:0;cursor:pointer}
/* Add phrase is a button where the dialog lives and a link to it from every other page, and
   the rule above is more specific than the button's own: as a link it was being drawn in the
   nav's ink, dark gray on dark green, which reads as an empty pill. */
.nav-actions .btn-primary,.nav-links .btn-primary{color:var(--on-accent)}
/* Add phrase and the menu button, together at the end of the bar. The button that adds a
   phrase is outside the group that collapses, so it is on screen at every width. */
.nav-actions{display:flex;align-items:center;gap:10px}
/* The one button in the bar keeps its words on one line: wrapped, it grew the whole header. */
.nav-actions .btn{white-space:nowrap}
.burger{display:none;background:none;border:0;font-size:24px;cursor:pointer;padding:4px 8px}

/* A centered section heading. Used by the home page and by the page for the day, which is the
   same page in a different month. */
.mid{max-width:960px;margin:0 auto;padding:clamp(48px,7vh,88px) 0}
.sec-eyebrow{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue);margin-bottom:8px;text-align:center}
/* The shared h2 is capped at 20ch for a page that reads down the left. Here the heading is
   centered, and a capped box sitting at the left edge only centers its own text inside it. */
.sec-title{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.03em;text-align:center;
  max-width:22ch;margin:0 auto 16px}
.sec-desc{font-size:17.5px;color:var(--ink-soft);text-align:center;max-width:640px;margin:0 auto clamp(32px,5vh,56px)}
.sec-desc em{font-style:italic}


/* buttons */
.btn{font-weight:600;font-size:14.5px;border-radius:999px;cursor:pointer;border:0;padding:11px 18px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
/* Every button the visitor presses is the tofu one. Orange stays the site's other half: the
   wordmark, the numbers, a pulled quote, the focus ring, and the potato vote. */
.btn-primary{background:var(--ink);color:var(--on-accent)}.btn-primary:hover{opacity:.85}
.btn-ghost{background:transparent;border:1px solid rgba(0,113,227,.25);color:var(--blue)}.btn-ghost:hover{background:rgba(0,113,227,.06)}
.btn-sm{font-size:13px;padding:7px 13px;min-height:36px}
.btn:disabled{opacity:.7;cursor:default}
.linkbtn{background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--ink-soft)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Used by every page that has something to center, so it lives with the rest of the shared
   chrome rather than once in each sheet. */
.centered{text-align:center;justify-content:center}
/* The site's own name never breaks across two lines. */
.nowrap{white-space:nowrap}

/* hero */
/* The rhythm is measured against the screen it is read on, not fixed: on a tall one the page
   breathes, on a laptop the phrase and the two buttons under it are still in view without
   scrolling. No steps, so there is no size where the layout suddenly changes its mind. */
.hero{padding:clamp(12px,3.4vh,56px) 0 clamp(8px,2.4vh,44px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.eyebrow,.sec-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tofu-ink);margin-bottom:clamp(6px,1.4vh,12px)}
/* Sized by the shorter of the two dimensions: a wide, short laptop should not be given a
   headline so tall that the phrase under it falls off the screen. */
h1{font-family:var(--serif);font-size:clamp(40px,min(5.8vw,9vh),72px);line-height:1.02;letter-spacing:-.03em;font-weight:600;margin-bottom:clamp(10px,2vh,20px)}
/* A 50ch measure broke this sentence with a single word left over, which reads as a mistake in
   the line that is the whole explanation of the site. The measure is the column's now, so on most
   screens it is one line; on the widest, where the drawing is at its full size, it wraps into two
   balanced lines instead. Never one word on its own. */
.lede{font-size:clamp(16px,2.3vh,19px);color:var(--ink-soft);max-width:60ch;text-wrap:pretty}
.lede mark{background:var(--mark);color:var(--mark-ink);padding:0 4px;border-radius:4px}
/* One box, wide, first thing. It takes a phrase or a whole email, so it is a textarea that looks
   like a search field until there is more than a line in it. */
.look{margin-top:24px;display:flex;flex-direction:column;gap:12px;max-width:720px}
.look-box{position:relative}
.look textarea{width:100%;min-width:0;font:inherit;font-size:17px;line-height:1.5;padding:14px 18px;border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--surface);resize:vertical;min-height:52px}
.look textarea:focus{outline:none;border-color:var(--potato)}
.look .row{gap:10px;flex-wrap:wrap}
.look .private,.look .consent{margin:0}
/* What we know, under the box. It sits over the page rather than pushing it about. */
.suggest{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-lg);max-height:320px;overflow:auto}
.sg{display:grid;gap:2px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer}
.sg:hover,.sg.on{background:var(--bg)}
.sg-p{font-weight:600}
.sg-n{font-size:13px;color:var(--muted)}
/* The result, where today's phrase was: one thing at a time in the same place. */
/* ---- the page as it is drawn: what it is, one phrase shown, your own words, where to go ---- */
/* The hero and the phrase below it share one grid, so the words line up down the page and so do
   the drawings. They were near enough to look like a mistake rather than a choice. */
/* The drawing's column is measured against the height there is, not split as a ratio. When the
   window is short the picture gives up width, the words get a wider line and wrap less, and the
   page loses the height it needed to lose. It answers to the width as well, because the narrowest
   desktop window has no room to spare either. Continuously: a ratio swapped at a breakpoint put a
   cliff in the page, where a window a pixel taller grew by a row. The drawing caps at 420px, so
   on a tall screen this is the layout as it was drawn. */
.hero-grid,.shown-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,min(38vh,32vw),460px);gap:clamp(24px,4vw,48px);align-items:center}
/* The box is one line, like a search field, because what goes in it is a phrase. */
.look-box{position:relative;display:flex;gap:0;align-items:stretch;max-width:520px;
  border:1.5px solid var(--line-strong);border-radius:999px;background:var(--surface);overflow:visible}
.look-box input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16.5px;padding:clamp(10px,1.8vh,14px) 22px;border-radius:999px}
.look-box input:focus{outline:none}
.look-box:focus-within{border-color:var(--tofu-ink)}
.look-box .btn{border-radius:999px;white-space:nowrap;margin:4px}
.look{display:block;margin-top:clamp(12px,2.2vh,24px)}

/* What the site is, and one phrase opened out under it: one screen, with nothing of the next
   section showing over the fold. The sand band takes whatever height is left over, so the join
   between the two is where the words end rather than at a fixed measurement. On a window too
   short to hold it, it simply grows and the page scrolls as any page does. */
.first{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column}
.first .shown{flex:1;display:flex;align-items:center}
.first .shown > .wrap{width:100%}

/* One phrase, opened out, on the sand the drawing sits on. */
.shown{background:var(--sunk);padding:clamp(10px,2.6vh,52px) 0}
/* A phrase swapped in where it stands: enough to be noticed, not enough to follow. */
.shown.changed .shown-words{animation:settle .32s ease-out}
@keyframes settle{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.shown.changed .shown-words{animation:none}}
.shown-art,.hero-art img{display:block;width:100%;max-width:420px;max-height:clamp(140px,24vh,260px);object-fit:contain;height:auto;margin:0 auto}
/* The phrase is the biggest thing in the panel, because it is what the fields describe and what
   the two buttons are asking about. In small capitals it was a label, and "I'd swap it" under a
   label is a question with no subject. */
.shown-name{font-family:var(--serif);font-size:clamp(29px,3.8vh,42px);line-height:1.1;font-weight:600;
  letter-spacing:-.01em;margin:0 0 clamp(6px,1.3vh,16px)}
.shown-list{display:grid;gap:clamp(6px,1vh,16px);margin-top:clamp(3px,0.8vh,8px)}
.shown-row dt{font-weight:700;font-size:clamp(13px,1.9vh,14px)}
.shown-row dd{color:var(--ink-soft);font-size:clamp(14px,2vh,15.5px);line-height:1.55;margin-top:2px}
.shown-art{display:block;width:100%;height:auto}

.plainly .two{align-items:start}
.plain-list{list-style:none;display:grid;gap:10px;font-size:16px;color:var(--ink-soft)}
.plain-list b{color:var(--ink)}
.plain-turn{margin-top:16px;font-family:var(--serif);font-style:italic;font-weight:600;
  border-bottom:2px solid var(--tofu);display:inline-block;padding-bottom:6px}

/* Your own words: its own band, so it reads as a different question from the box above. */
.band-tofu{background:color-mix(in srgb,var(--tofu) 12%,var(--bg))}
.check-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.check-box textarea{width:100%;min-height:120px;resize:vertical;border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);padding:14px 16px;font:inherit;font-size:15.5px;line-height:1.6}
.check-box .row{margin-top:12px}

.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.explore-card{display:grid;gap:6px;padding:20px;border-radius:var(--r);text-decoration:none;color:inherit;
  border:1.5px solid transparent;transition:border-color .15s,transform .15s}
.explore-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.explore-card.wall{background:#E7EEF5}.explore-card.writing{background:#FBEFE3}.explore-card.ai{background:#E6F0E7}
.explore-art{font-size:30px}
.explore-label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
.explore-note{color:var(--ink-soft);font-size:15px}
.explore-go{color:var(--tofu-ink);font-size:18px;margin-top:6px}

/* The day, at the end, as an invitation rather than a banner. */
.band-day{background:#E7EEF5}
.day-grid{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center}
.day-title{display:flex;gap:14px;align-items:center}
.day-leaf{font-size:30px}
.day-words{border-left:1.5px solid var(--line-strong);padding-left:28px;color:var(--ink-soft);display:grid;gap:8px;font-size:15.5px}

@media(max-width:860px){
.hero-grid,.shown-grid,.check-grid{grid-template-columns:1fr;gap:28px}
/* On a phone the words and the box come first: a picture at the top is a picture in the way. */
.hero-art{max-width:420px;margin:0 auto}
.explore-grid{grid-template-columns:1fr}
.day-grid{grid-template-columns:1fr;gap:18px}
.day-words{border-left:0;padding-left:0}
}

/* The examples under the box: a blank page asks a visitor to think of something first. */
.try{margin-top:2px;font-size:14px;color:var(--muted)}
.try-lbl{margin-right:4px}
.try .linkbtn{font-size:14px}
.try-dot{margin:0 8px;color:var(--line-strong)}
.result{margin-top:28px;max-width:720px}
/* The drawing beside today's phrase: it says what the site is for before a word is read. */
.today-art{display:block;width:100%;max-width:460px;height:auto;margin:-6px auto 14px;border-radius:var(--r-sm)}
.result .out{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;line-height:1.75;font-size:16.5px}
.today{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:28px}
.today .q{font-family:var(--serif);font-size:clamp(26px,3vw,34px);line-height:1.12;font-weight:600;margin:6px 0 10px}
.today .hook{color:var(--ink-soft);font-size:16.5px;margin-bottom:18px}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--potato)}

/* vote */
.vote{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* The site is named after this choice: tofu is the swap, potatoes are what stays. The buttons
   were the other way round, and only on hover, so the colors said nothing. */
.vbtn{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);padding:10px 14px;font-weight:600;font-size:14.5px;cursor:pointer;min-height:clamp(42px,6vh,48px);transition:transform .12s,border-color .12s,background .12s}
.vbtn:hover{transform:translateY(-1px)}
.vbtn.va{border-color:color-mix(in srgb,var(--tofu-ink) 45%,transparent);color:var(--tofu-ink)}
.vbtn.va:hover{border-color:var(--tofu-ink);background:color-mix(in srgb,var(--tofu) 12%,var(--surface))}
.vbtn.vb{border-color:color-mix(in srgb,var(--potato) 40%,transparent);color:var(--potato-dark)}
.vbtn.vb:hover{border-color:var(--potato);background:color-mix(in srgb,var(--potato) 8%,var(--surface))}
/* The side you chose. The buttons used to vanish once you voted and the bar took their place, so
   nothing had to say which one was yours; they stay now, and the one you pressed is filled in
   rather than outlined. The tick carries it where color alone would not. */
.vbtn.chosen{font-weight:700}
.vbtn.va.chosen{background:color-mix(in srgb,var(--tofu) 22%,var(--surface));border-color:var(--tofu-ink)}
.vbtn.vb.chosen{background:color-mix(in srgb,var(--potato) 16%,var(--surface));border-color:var(--potato)}
.vbtn .tick{margin-left:4px;opacity:.75}
/* The bar is everyone, and it sits under the buttons rather than in place of them. */
.vote + .vlegend{margin-top:16px}
.vhint{font-size:12.5px;color:var(--muted);margin-top:8px}
/* The result is a bar with the numbers labeling it, not a sentence with a bar under it: a
   percentage in a sentence is read, a bar is seen. The track is the potato side and the fill is
   the tofu one, the same way round as the two buttons that were just pressed. */
.split{height:16px;border-radius:999px;background:var(--potato);overflow:hidden;display:flex}
.split .sa{background:var(--tofu);height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.vlegend{display:flex;justify-content:space-between;gap:14px;margin-bottom:4px;font-size:12.5px;color:var(--ink-soft)}
.vleg strong{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-right:4px}
.vleg.va strong{color:var(--tofu-ink)}.vleg.vb strong{color:var(--potato-dark)}
.vleg.vb{text-align:right}
.vres{font-size:13.5px;margin-top:4px;color:var(--ink-soft)}.vres strong{color:var(--ink)}.vtot{display:block;color:var(--muted);font-size:12px}
.swapline{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-strong);font-size:14.5px;color:var(--ink-soft)}
.swapline em{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:16.5px}

/* sections */
section{padding:60px 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:30px}
h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);letter-spacing:-.025em;line-height:1.05;font-weight:600;max-width:20ch}
.sec-note{color:var(--ink-soft);font-size:17px;max-width:60ch}
.band{background:var(--sunk);border-block:1px solid var(--line)}

/* checker */
.checker{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pane{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pane h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pane textarea{width:100%;min-height:210px;resize:vertical;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg);padding:14px;font-size:15.5px;line-height:1.6}
.pane textarea:focus{outline:none;border-color:var(--potato)}
.private{font-size:12.5px;color:var(--tofu-ink);font-weight:600}
.out{white-space:pre-wrap;word-wrap:break-word;font-size:15.5px;line-height:1.9;min-height:210px;border-radius:var(--r-sm);background:var(--bg);padding:14px;border:1.5px dashed var(--line-strong);color:var(--ink-soft)}
.hit{background:var(--mark);color:var(--mark-ink);border:0;border-bottom:2px solid var(--potato);border-radius:4px;padding:1px 3px;cursor:pointer;font-weight:600}
.tally{font-family:var(--serif);font-size:22px;line-height:1.25}.tally b{color:var(--potato)}
.found{display:flex;flex-wrap:wrap;gap:7px}
.fchip{font-size:12.5px;border:1px solid var(--line-strong);border-radius:999px;padding:5px 10px;background:var(--surface);cursor:pointer}

/* wall */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar input,.toolbar select{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:9px 16px;font-size:14px;min-height:42px}
.toolbar input{flex:1 1 200px;min-width:0}
/* Every filter is visible at once: a row that scrolled sideways hid the one just switched on. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding:2px}
.chip{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap;min-height:38px}
.chip:focus-visible{outline:2px solid var(--potato);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.lens{border-color:var(--tofu-ink);color:var(--tofu-ink)}.chip.lens[aria-pressed="true"]{background:var(--tofu-ink);color:var(--on-accent)}
/* Every card the same height, not just the ones that happen to share a row. A grid row sizes
   itself to its own tallest card, so the wall came out in five different heights and a card's
   buttons sat level with its neighbors' but not with the row above. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;
  grid-auto-rows:1fr}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.tag-row{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--tofu) 16%,transparent);color:var(--tofu-ink);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* Says what kind of thing this is, not one of its tags. Named for the slot, not for one kind. */
.pill.kind{background:color-mix(in srgb,var(--potato) 14%,transparent);color:var(--potato)}
.ph{font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.18}
.ph button{all:unset;cursor:pointer}.ph button:hover{color:var(--potato)}.ph button:focus-visible{outline:3px solid var(--potato);outline-offset:2px;border-radius:6px}
.card .hook{font-size:15px;color:var(--ink-soft);flex:1}
.card .swap{font-size:13.5px;color:var(--muted)}.card .swap em{font-family:var(--serif);color:var(--ink);font-size:15px}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:42px;border:1.5px dashed var(--line-strong);border-radius:var(--r)}

/* Oct 2 */
.big-lede{font-family:var(--serif);font-size:clamp(20px,2.3vw,26px);line-height:1.3;margin:16px 0;color:var(--ink-soft)}.big-lede strong{color:var(--ink)}
.count-down{display:inline-block;background:var(--potato);color:var(--on-accent);font-weight:700;font-size:13px;border-radius:999px;padding:5px 12px;margin-bottom:14px}

/* AI, about */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.two p{color:var(--ink-soft);margin-bottom:14px}
.quote-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.quote-card .who{display:flex;gap:10px;align-items:center;margin-bottom:12px;font-size:13px;color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#4F7D55,#B8441F);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.method{list-style:none;counter-reset:m;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.method li{counter-increment:m;display:flex;gap:12px;color:var(--ink-soft)}
.method li::before{content:counter(m);font-family:var(--serif);font-weight:600;color:var(--potato);font-size:20px;line-height:1.2;min-width:18px}
.name-stacks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.name-stack{border-radius:var(--r);padding:24px;color:#fff}.name-stack.t{background:#4F7D55}.name-stack.p{background:#B8441F}
.name-stack .role{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}.name-stack .nm{font-family:var(--serif);font-size:26px;margin:6px 0}.name-stack p{font-size:14px;color:#fff;margin:0}
.pull{font-family:var(--serif);font-size:20px;font-style:italic;border-left:4px solid var(--potato);padding-left:18px;margin-top:20px;color:var(--ink)}
footer{border-top:1px solid var(--line);padding:26px 0 34px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:10px 28px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.foot p{max-width:none;margin:0}.foot strong{color:var(--ink-soft);font-weight:600}.foot p a{text-decoration:underline;text-underline-offset:3px}.foot nav{display:flex;gap:18px;flex-wrap:wrap}.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

/* dialogs */
dialog{border:0;border-radius:var(--r);background:var(--bg);color:var(--ink);max-width:720px;width:calc(100% - 32px);padding:0;box-shadow:var(--shadow-lg);margin:auto;max-height:calc(100dvh - 32px)}
dialog::backdrop{background:rgba(20,18,15,.6)}
.dlg{padding:34px;position:relative}
.x{position:sticky;float:right;top:10px;margin:-18px -18px 0 0;background:var(--surface);border:1.5px solid var(--line);width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;z-index:2}
.dlg h2{font-size:clamp(28px,4vw,38px);max-width:none;margin:10px 0}
.dlg .hook{font-size:17px;color:var(--ink-soft);margin-bottom:20px}
.lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tofu-ink);margin-bottom:3px}
.facts{display:grid;gap:14px;margin:20px 0}
.fact p{font-size:15px;color:var(--ink-soft)}
.fact.assume p{border-left:3px solid var(--potato);padding-left:12px;color:var(--ink)}
.fact.cp{background:color-mix(in srgb,var(--tofu) 12%,var(--surface));border:1.5px solid color-mix(in srgb,var(--tofu) 45%,transparent);border-radius:var(--r-sm);padding:14px 16px}
.fact.cp p{color:var(--ink)}
.alts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.alt-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.alt-chip{padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13.5px}
.alt-chip.play{font-family:var(--serif);font-style:italic;border-color:var(--tofu)}
.tier{display:inline-flex;gap:6px;align-items:center;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--tofu) 16%,transparent);color:var(--tofu-ink);font-size:12px;font-weight:700}
.src{font-size:12.5px;color:var(--muted);margin-top:8px}
.block{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:18px;margin-top:18px}
/* The picture that gets shared, previewed. Its colors are the card's own, projected from the
   same palette the card is drawn from: the card went white and this stayed black. */
.og{aspect-ratio:1200/630;border-radius:14px;background:var(--card-background);color:var(--card-heading);
  border:1px solid var(--line);border-top:1cqw solid var(--card-rule);
  padding:6%;display:flex;flex-direction:column;justify-content:space-between;container-type:inline-size;margin-top:10px}
.og .oq{font-family:var(--serif);font-weight:600;font-size:7cqw;line-height:1.05}
.og .oh{font-size:3cqw;color:var(--card-hook);margin-top:2cqw}
.og .ob{display:flex;justify-content:space-between;align-items:end;font-size:2.6cqw;gap:3cqw}
.og .brand{font-family:var(--serif);font-weight:600;white-space:nowrap}.og .brand i{font-style:normal;color:var(--tofu-ink)}.og .brand u{text-decoration:none;color:var(--potato)}
/* The joining letters take both colors, cut across the middle, as the icon cuts its ampersand. */
.og .brand b{font-weight:inherit;background:linear-gradient(to bottom,var(--tofu-ink) 0 50%,var(--potato) 50% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.og .obar{flex:1;max-width:58%;color:var(--potato)}.og .obar .split{height:1.6cqw;background:#EC7A4B}.og .obar .sa{background:#7FB184}
.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-size:13px;font-weight:600}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:11px 13px;background:var(--surface);font-size:15px}
.field textarea{min-height:96px;resize:vertical}
.steps{list-style:none;display:grid;gap:10px;margin:16px 0}.steps li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}.steps li b{color:var(--ink)}
#flash{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);font-weight:600;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);z-index:500;font-size:14px;opacity:0;transition:all .25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
#flash.on{opacity:1;transform:translateX(-50%)}

@media(max-width:860px){
 /* The menu button is taller than the links it replaces, so the bar is, and the first screen
    below it has to know. Measured, not guessed: the two must agree or the fold is in the wrong
    place by the difference. */
 :root{--nav-h:74px}
 .chip{padding:7px 12px;font-size:12.5px;min-height:34px}
 .hero-grid,.checker,.two,.sec-head{grid-template-columns:1fr}.sec-head{gap:14px}
 .burger{display:block}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 28px 20px;gap:4px}
 .nav-links.open{display:flex}.nav-links a{padding:10px 0}
}
/* On a phone the box has to be reachable without scrolling. The headline and the demonstration
   above it are the argument; the box is the point, so the argument gets less room. */
@media(max-width:560px){.wrap,.nav-inner{padding-left:16px;padding-right:16px}.hero{padding-top:24px}section{padding:44px 0}
h1{font-size:clamp(28px,8vw,36px)}
.hero .lede{font-size:16px;margin-top:10px}
.look{margin-top:16px}
.look textarea{min-height:46px}
.look-lbl{margin-bottom:6px}
.result{margin-top:20px}.wall{grid-template-columns:1fr}.alts,.name-stacks{grid-template-columns:1fr}.dlg{padding:24px 20px}}
/* The header is the last thing anyone came for, and on a phone it was most of what they got:
   a strip, a sticky bar, an eyebrow and a headline before the box they came to use. */
@media(max-width:560px){
.strip{font-size:12.5px;padding:6px 14px}
:root{--nav-h:66px}
.nav-inner{padding:10px 16px}
.eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:6px}
}

/* A phone on its side has about 375px of height for everything. The argument for the site can
   wait below the fold; the box cannot, so here it is nearly all that is left. */
@media(max-height:520px) and (max-width:1000px){
.strip{padding:5px 14px;font-size:12px}
:root{--nav-h:62px}
.nav-inner{padding:8px 16px}
.hero{padding:14px 0 18px}
.hero .eyebrow{display:none}
.hero h1{font-size:23px;line-height:1.15;margin:0}
.hero .lede{display:none}
.look{margin-top:12px}
.look-lbl{margin-bottom:5px}
.look textarea{min-height:44px;font-size:16px;padding:10px 14px}
.result{margin-top:14px}
section{padding:28px 0}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* V5 */
.srcs{margin-top:14px}.srcs ul{list-style:none;display:grid;gap:4px;margin-top:4px}.srcs li{font-size:13.5px}.srcs a{color:var(--potato);text-underline-offset:3px}.srcs span{color:var(--muted)}
.h3{font-family:var(--serif);font-size:22px;line-height:1.2;font-weight:600;color:var(--ink);margin-bottom:8px}
.ai-out{min-height:0;border-style:solid;color:var(--ink);font-size:16px}
.prompts{display:grid;gap:8px;margin:10px 0 14px}.prompt{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:14.5px;color:var(--ink)}
.ai-found{font-size:14.5px;color:var(--ink-soft);margin-top:6px}
.take{margin-top:10px;background:color-mix(in srgb,var(--tofu) 10%,var(--surface));border:1.5px solid color-mix(in srgb,var(--tofu) 40%,transparent);border-radius:var(--r-sm);padding:12px 14px}.take p{color:var(--ink);font-size:15px;margin:0}
.guess{max-width:760px;margin:0 auto;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:30px}
.gq{font-family:var(--serif);font-size:clamp(20px,2.4vw,25px);line-height:1.25;font-weight:600;color:var(--ink)}.gq em{font-style:italic;color:var(--potato)}
.gopts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.guess p{color:var(--ink-soft);margin-top:10px}
.gans{display:flex;gap:18px;align-items:center}.gans b{font-family:var(--serif);font-size:clamp(44px,7vw,76px);line-height:1;color:var(--potato);white-space:nowrap}.gans span{font-size:17px;color:var(--ink-soft);max-width:34ch}
#infoBody p{color:var(--ink-soft);margin-top:10px}
@media(max-width:560px){.gopts{grid-template-columns:1fr 1fr}.gans{flex-direction:column;align-items:flex-start;gap:8px}}
.lede-turn{display:inline-block;margin-top:10px;font-weight:600;color:var(--ink)}
.recipe{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:18px;margin-top:14px}
.recipe h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}
.rmeta{font-size:13px;color:var(--muted);margin:4px 0 6px}
.recipe .steps li span{font-size:14.5px}
.rnote{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:12px}

/* Spacing utilities. These exist because the content security policy forbids inline style
   attributes: a template that writes style="" would be silently dropped by the browser. */
.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}
.mb-18{margin-bottom:18px}.center{justify-content:center}.soft{color:var(--ink-soft)}
.og .mt-cq{margin-top:1cqw}


.captcha{margin:14px 0 4px;min-height:0}
.captcha:empty{display:none}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-soft);margin-top:8px;cursor:pointer}
.consent input{margin-top:2px}
/* The standalone record page at /look/:slug. */

/* These two are scoped to something the home page also draws, so they belong to the sheet
   every page loads rather than to the projected pages' own. */
.og .os{font-family:var(--serif);font-size:3cqw;color:var(--tofu-ink);margin-top:2cqw}
.shown .row{margin-top:clamp(10px,1.8vh,16px)}

.shown-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(10px,1.6vw,18px);margin-top:clamp(8px,1.4vh,18px)}
.shown-actions>*{display:flex;align-items:center}
.shown-actions .btn{min-height:clamp(42px,6vh,48px)}

.shown-swap{margin-top:clamp(6px,1.2vh,14px);font-size:clamp(14.5px,2vh,15.5px);color:var(--ink-soft)}
.shown-swap em{font-family:var(--serif);font-style:italic;color:var(--ink)}
.shown-vote{max-width:460px}
/* The answered split, under the row rather than in it, as wide as the words it belongs to. */
.shown-result{margin-top:clamp(6px,0.9vh,14px);max-width:520px}
.shown-vote .vote{gap:10px;margin:0}
/* Not here: the panel's three controls belong on one line, and two buttons saying "I'd swap it"
   and "I'd keep it" do not need to be told what they are for. The nudge stays on the card, where
   there is room for it. */
.shown-vote .vhint{display:none}
.shown-actions .row{margin-top:0}

/* The share sheet. It opens from the home page as well as from a record's own page, so it
   belongs to the sheet every page loads. It was moved out with the pages' own styles and the
   home page lost it: the preview is a 1200px picture, and nothing was left to hold it to the
   width of the dialog. */
/* What is going, then where. The preview is the biggest thing in the sheet; the ways out are a
   row of small drawn glyphs, each with its name on hover and for a screen reader. */
.sh-prev{background:var(--sunk);border-radius:14px;padding:14px;margin:14px 0 12px}
.sh-img{display:block;width:100%;height:auto;border-radius:10px}
.sh-msg{font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:0;white-space:pre-wrap}
/* The picture, with taking it away sitting on top of it rather than below. */
.sh-pic{position:relative;margin-bottom:12px}
.sh-pic-acts{position:absolute;right:8px;top:8px;display:flex;gap:6px}
.sh-opt.sh-tiny{width:32px;height:32px;background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.sh-opt.sh-tiny svg{width:15px;height:15px}
.sh-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sh-opt{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:50%;padding:0;cursor:pointer;text-decoration:none;transition:border-color .15s,color .15s}
.sh-opt svg{width:18px;height:18px}
.sh-opt span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sh-opt:hover,.sh-opt:focus-visible{border-color:var(--ink);color:var(--ink)}

/* Drawn by the home page after load, so they belong to the sheet it loads. The split put
   them with the projected pages because the home page's HTML does not mention them: it
   builds the share sheet, the day's card and what the checker found once someone asks. */
.swap-card{background:#26231F;color:#F6F1E7;border-radius:var(--r);padding:26px;box-shadow:var(--shadow-lg)}
.sc-label{font-family:var(--serif);font-size:15px;font-weight:600;color:#7FB184}
.sc-to{font-family:var(--serif);font-size:clamp(28px,4vw,40px);line-height:1.1;font-weight:600;margin:8px 0}
.sc-from{font-size:16px;opacity:.85}
.own-swap{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.own-swap summary{cursor:pointer;font-weight:600}
.own-form{display:grid;gap:6px;margin-top:10px}
.own-form input{padding:9px 11px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--bg);font:inherit}
.own-form .btn{justify-self:start;margin-top:8px}
.take{border-left:3px solid var(--tofu);background:var(--sunk);border-radius:0 10px 10px 0;padding:10px 14px;margin:14px 0}
.take-label,.take-line span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tofu-ink);font-weight:700}
.take-line{font-family:var(--serif);font-size:18px;margin:6px 0 8px}
.take-src{font-size:12.5px;color:var(--muted);margin:0}
.looking{color:var(--muted);font-style:italic;margin:14px 0}
.take-line span{display:block}
.ai-hit{background:none;border-bottom:2px dashed var(--tofu);color:inherit;padding-bottom:1px;cursor:help}
.ai-found{border-left:3px solid var(--tofu);padding:10px 14px;background:var(--sunk);border-radius:0 10px 10px 0;margin-top:14px}
.ai-found ul{list-style:none;margin:8px 0 0;display:grid;gap:6px;font-size:14px}
.ai-found b{font-family:var(--serif);font-weight:600}