/* Paradigm 13 grid, v25 (Tom, 29 Oct 2026: "the grid is what tells you what size everything should be").
   One unit, --u = 10px, built round Silkscreen: its capitals are 5/8 of its size, so at 16, 32 and 64px they are 10, 20
   and 40px tall, a whole number of units. Literata is set at 19.4px, where its lowercase is exactly 10px tall.
   Rules for every element:
   - every line height, margin, padding and box is a whole number of units;
   - Silkscreen capitals sit with their top and bottom on grid lines; book text has its lowercase top and its baseline
     on grid lines (the --n values lift each typeface so its letters land on the lines; measured, not guessed);
   - a 2px rule starts on a grid line, and whatever follows it starts 2px later (8px of padding instead of 10);
   - boxes with a frame (buttons, tags, the search box) are 30px or 50px, frame included, letters in the middle unit.
   Checked with tools/gridcheck.py, which lists anything off a line. */
:root{--u:10px;--m:calc(var(--u)*2);--book-size:19.4px;
  --n16:-1px;--n16l:4px;--n32:-2px;--n64:-5px;--nb:-3px}
body{font-size:var(--book-size);line-height:calc(var(--u)*3)}

/* the top bar: 50px; its marks and buttons are 30px boxes, 10px from the top, 10px apart; its rule is on the 50 line */
.bar{height:calc(var(--u)*5);padding:var(--u) var(--m);gap:var(--u);align-items:flex-start;flex-wrap:nowrap;
  border-bottom:0;box-shadow:0 2px 0 var(--ink)}
.bar .where{gap:0;flex-wrap:nowrap;align-items:flex-start}
.bar .mark,.bar .crumb{display:block;height:calc(var(--u)*3);line-height:calc(var(--u)*2);padding:4px 0 6px}
.bar .crumb{padding-left:var(--u);padding-right:var(--u)}
.bar .tools{gap:var(--u);flex-wrap:nowrap}
.bar button,.bar a.tool{display:block;height:calc(var(--u)*3);line-height:calc(var(--u)*2);padding:2px var(--u) 4px}

main.landing{max-width:800px;padding:calc(var(--u)*4) var(--m) calc(var(--u)*10)}
.landing>*{position:relative}

/* titles */
.title{font-size:64px;line-height:calc(var(--u)*8);margin:0;top:var(--n64)}
.tag{font-size:16px;line-height:calc(var(--u)*2);margin:0;padding-top:var(--u);top:var(--n16l)}  /* two lines of capitals, 10px apart */

/* sections */
section{margin-top:calc(var(--u)*8)}
h2{font-size:32px;line-height:calc(var(--u)*4);margin:0;gap:var(--u);align-items:flex-start;position:relative;top:var(--n32)}
h2 .sig8{width:calc(var(--u)*2);height:calc(var(--u)*2);margin-top:calc(var(--u) - var(--n32))}
.lede{margin:var(--u) 0 0;position:relative;top:var(--nb)}

/* rows (the lists and the footer): a rule on a grid line, 8 + 30n + 10, then the next rule */
.list,footer.family ul{margin:calc(var(--u)*2) 0 -2px;border-top:2px solid var(--ink)}
.list a,.list .row,footer.family li a{display:flex;align-items:flex-start;gap:var(--u);padding:8px var(--u) var(--u);
  border-bottom:2px solid var(--ink)}
.list .nm{position:relative;top:var(--nb)}
.list .what{line-height:calc(var(--u)*3);position:relative;top:var(--n16)}
.tagbox{display:block;flex:0 0 auto;height:calc(var(--u)*3);line-height:calc(var(--u)*2);padding:2px var(--u) 4px}
footer.family li a{line-height:calc(var(--u)*3)}
footer.family li a span,footer.family li a{position:relative}
footer.family .t{position:relative;top:var(--n16)}

/* sign-up: the box and its button are 50px, 10px apart; letters in the middle unit */
.signup{gap:var(--u);margin:calc(var(--u)*2) 0 0;flex-wrap:nowrap}
.signup input[type=email]{min-width:0}
.signup input[type=email]{height:calc(var(--u)*5);padding:0 var(--u) var(--np,7px);font-size:var(--book-size);line-height:normal}
.signup button{height:calc(var(--u)*5);line-height:calc(var(--u)*2);padding:12px calc(var(--u)*2) 14px}
.said{line-height:calc(var(--u)*2);padding:4px var(--u) 6px;margin:calc(var(--u)*2) 0 0}

/* footer and For agents */
footer.family{max-width:800px;margin:calc(var(--u)*8) auto 0;padding:0 var(--m) calc(var(--u)*4)}
.agents{max-width:800px;padding:0 var(--m) calc(var(--u)*6)}
.agents .agentbox{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 var(--u);padding:8px var(--u)}
.agentbox .sig8{width:calc(var(--u)*3);height:calc(var(--u)*3)}
.agentbox .lab{line-height:calc(var(--u)*3);position:relative;top:var(--n16)}
.agents .agentbox .nm{flex:1;font-size:var(--book-size);line-height:calc(var(--u)*3);position:relative;top:var(--nb)}

@media (max-width:600px){
  .title{font-size:32px;line-height:calc(var(--u)*4);top:var(--n32)}
  .agents .agentbox .nm{flex:0 0 100%;order:3}
  .agentbox .tagbox{margin-left:auto}
}
/* For agents: one 50px row, no description (Tom, 29 Oct: "do we even need that text? It's just for agents") */
.agents .agentbox{flex-wrap:nowrap}
.agentbox .tagbox{margin-left:auto}
/* the checker mark: 5px squares, so a whole number of them fills its 20px or 30px box (no half squares at the edges) */
.sig8.pat-checker{-webkit-mask-size:var(--u) var(--u);mask-size:var(--u) var(--u)}

/* search page (search v03): the same grid. Title 32px (20px capitals); the box and its button are 50px;
   each hit is a row: where (Silkscreen), title (book text, heavier), a short piece of the text, 30px lines. */
.title.small{font-size:32px;line-height:calc(var(--u)*4);top:var(--n32)}
.find input[type=search]{height:calc(var(--u)*5);padding:0 var(--u) var(--np,7px);font-size:var(--book-size);line-height:normal;min-width:0}
.find input[type=search]:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.count{font-size:16px;line-height:calc(var(--u)*2);margin:calc(var(--u)*2) 0 0;padding-top:var(--u);top:var(--n16l)}
.hits:empty{display:none}
.hits a{flex-direction:column;gap:0}
.hits .what{display:block}
.hits .nm{font-weight:600}
.hits .snip{font-size:var(--book-size);line-height:calc(var(--u)*3);position:relative;top:var(--nb)}
.hits mark{padding:0}
.hits .what{line-height:calc(var(--u)*2);top:var(--n16l);margin-bottom:var(--u)}  /* wrapped labels: capitals 10px apart */
/* the highlight on a matched word: a 30px block from 20px above the baseline to 10px below, so it fills one line's grid
   units exactly (the letters' own box is 23px above and 6px below, so trim 3px off the top and add 4px below) */
.hits mark{background:linear-gradient(transparent 3px,var(--ink) 0);padding:0 0 4px}
/* the smallest phones (320px): the longest address only fits with the rows' side padding taken out */
@media (max-width:340px){ footer.family li a{padding-left:0;padding-right:0} }
/* the text boxes (search, sign-up email, password) speak Silkscreen, like the buttons beside them (Tom, 29 Oct: "a word or
   a name... looks like it's from a different website"). 16px capitals sit in the middle unit of the 50px box, level with
   the button's; the hint is the same letters, lighter; tapping in keeps the same 2px frame (the cursor shows you're in). */
.signup input[type=email],.find input[type=search],.gate .signup input[type=password]{font-family:"Silkscreen",monospace;
  font-size:16px;line-height:normal;text-transform:uppercase;letter-spacing:0;padding:0 var(--u) 2px}
.signup input::placeholder,.find input::placeholder{color:var(--ink);opacity:.45;text-transform:uppercase}
.signup input[type=email]:focus,.find input[type=search]:focus,.gate .signup input[type=password]:focus{outline:0;box-shadow:none}
/* optical centre in rows (Tom, 29 Oct: "the top is shorter than the bottom... The Clarence Problem looks like it's sitting
   up high"). Book capitals are taller than a unit, so with the baseline on the line there was 14px above the capitals and
   20px below the letters. In rows only, book text drops 3px so the space above its capitals equals the space below its
   baseline. Rows, rules and boxes stay on the grid; running paragraphs keep their baselines on the lines. */
:root{--optical:3px}
.list .nm,.toc .nm,.hits .nm{top:calc(var(--nb) + var(--optical))}  /* Tom, 29 Oct: "moving down 3 pixels... it does fit in the boxes" */
/* row titles in Silkscreen (Tom, 29 Oct, looking at the three versions: "I like silkscreen"). 16px capitals on 20px
   lines sit in the middle unit of each row, level with the tags; wrapped titles have their capitals 10px apart. This
   replaces the 3px optical nudge above. */
.list .nm,.toc .nm,.hits .nm{font-family:"Silkscreen",monospace;font-size:16px;font-weight:400;text-transform:uppercase;
  line-height:calc(var(--u)*2);top:var(--n16l);margin-bottom:var(--u)}
/* rows are exact rectangles (Tom, 29 Oct: "if you've got a rectangle, the type has to be exactly in the middle"). Each
   2px rule is centred on its grid line (1px either side), not started on it, so the space between two rules is
   symmetrical: 9px, then the row's 30px or more, then 9px. Capitals and tags sit dead centre. */
.list,footer.family ul{margin-top:calc(var(--u)*2 - 1px);margin-bottom:-1px}
.toc{margin:-1px 0 -1px}
.list a,.list .row,footer.family li a,.toc a{padding-top:9px;padding-bottom:9px}
footer.family ul{margin-top:-1px}  /* its margin joins the footer's 80px, so pull the rule up 1px to centre it on the line */