:root{ --paper:#F5F2EB; --ink:#1B1A17; --soft:#3D3A34; --muted:#6B675F; --bg:var(--paper); --fg:var(--ink); --dim:var(--muted); --quiet:var(--soft); --rule:#E0DACD; --panel:#EDE8DE; --field:#FFFFFF; --c57:oklch(0.48 0.13 155); --c812:oklch(0.48 0.13 250); --c1317:oklch(0.48 0.13 305); --tint57:oklch(0.94 0.035 155); --tint812:oklch(0.94 0.035 250); --tint1317:oklch(0.94 0.035 305); --display:"Libre Caslon Display",Georgia,serif; --text:"Libre Caslon Text",Georgia,serif; --sans:"Instrument Sans",system-ui,-apple-system,sans-serif; color-scheme:light; } /* The system decides until the reader overrides it, and data-theme is how they do. The :not() guard is what lets an explicit "light" win against a dark OS. */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ color-scheme:dark; --bg:#141311; --fg:#F1EDE4; --dim:#A8A295; --quiet:#C9C3B5; --rule:#2E2C27; --panel:#1D1C19; --field:#221F1B; --c57:oklch(0.78 0.12 155); --c812:oklch(0.76 0.12 250); --c1317:oklch(0.78 0.12 305); --tint57:oklch(0.26 0.04 155); --tint812:oklch(0.26 0.04 250); --tint1317:oklch(0.26 0.04 305); }} :root[data-theme="dark"]{ color-scheme:dark; --bg:#141311; --fg:#F1EDE4; --dim:#A8A295; --quiet:#C9C3B5; --rule:#2E2C27; --panel:#1D1C19; --field:#221F1B; --c57:oklch(0.78 0.12 155); --c812:oklch(0.76 0.12 250); --c1317:oklch(0.78 0.12 305); --tint57:oklch(0.26 0.04 155); --tint812:oklch(0.26 0.04 250); --tint1317:oklch(0.26 0.04 305); } /* The age is a document-level fact: one attribute on colours and reveals the whole page, so switching it touches no element's inline style. */ html[data-band="5-7"]{--band:var(--c57); --bandtint:var(--tint57)} html[data-band="8-12"]{--band:var(--c812); --bandtint:var(--tint812)} html[data-band="13-17"]{--band:var(--c1317); --bandtint:var(--tint1317)} [data-for]{display:none} html[data-band="5-7"] [data-for="5-7"], html[data-band="8-12"] [data-for="8-12"], html[data-band="13-17"] [data-for="13-17"]{display:block} *{box-sizing:border-box} html{scroll-padding-top:120px} body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased} img{max-width:100%; display:block} a{color:inherit} .wrap{width:100%; max-width:var(--page,720px); margin:0 auto; padding-inline:20px} body.wide{--page:1120px} /* the front page: three stories abreast */ body.list{--page:880px} /* the archive: a list, wider than prose but not by much */ .eyebrow{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)} .sep{opacity:.5; margin-inline:6px} .skip{position:absolute; left:-9999px} .skip:focus{left:20px; top:8px; z-index:40; background:var(--fg); color:var(--bg); padding:8px 14px; border-radius:3px} /* ---- masthead ---------------------------------------------------- */ header{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--rule)} .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px} /* render.py's wordmark(): three lines with the dots beneath, dot 45% of the type size and the gaps proportional to it, so the site and the slides carry one mark. */ .mark{display:inline-flex; flex-direction:column; align-items:flex-start; gap:9px; text-decoration:none; padding-block:2px} .wm{font-family:var(--display); font-size:17px; line-height:1.0; letter-spacing:-.01em} .dots{display:flex; gap:6px} .dots i{width:8px; height:8px; border-radius:50%; display:block} /* The mark is a stack now, so it is taller than it was, and the masthead is sticky. Scaled down on a phone to keep the whole sticky block near a seventh of the screen rather than a fifth: the pills below it are the part worth keeping on screen. */ @media (max-width:640px){ .mark{gap:6px} .wm{font-size:14px} .dots{gap:5px} .dots i{width:6px; height:6px} .bar{padding-block:11px} .ages{padding-block:10px} } /* On a phone the prompt cannot share a line with three pills, so it takes one of its own and the sticky block grows by a fifth for a line nobody needs: the pills read "5-7 year old". Hidden from the eye, kept for a screen reader, which still gets the group's own label. */ @media (max-width:560px){ .ages .lab{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap} } nav{display:flex; gap:18px; font-size:14px} nav a{color:var(--dim); text-decoration:none} nav a:hover,nav a[aria-current="page"]{color:var(--fg)} .theme{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; margin-left:-4px; border:0; border-radius:50%; background:transparent; color:var(--dim); cursor:pointer} .theme:hover{color:var(--fg)} .theme:focus-visible{outline:2px solid var(--fg); outline-offset:2px} .bar nav{align-items:center} /* ---- the age control: the whole idea of the site ------------------ */ .ages{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-block:12px; border-top:1px solid var(--rule)} .ages .lab{font-size:13px; color:var(--dim)} .seg{display:flex; gap:6px} .seg button{font-family:var(--sans); font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; padding:7px 16px; border-radius:999px; background:transparent; color:var(--dim); border:1.5px solid var(--rule)} @media (max-width:440px){.ages{gap:8px} .seg{gap:5px} .seg button{padding:7px 11px; font-size:13px}} .seg button:hover{color:var(--fg)} .seg button[data-band="5-7"]{--band:var(--c57); --bandtint:var(--tint57)} .seg button[data-band="8-12"]{--band:var(--c812); --bandtint:var(--tint812)} .seg button[data-band="13-17"]{--band:var(--c1317); --bandtint:var(--tint1317)} .seg button[aria-pressed="true"]{color:var(--band); border-color:var(--band); background:var(--bandtint)} .seg button:focus-visible{outline:2px solid var(--band); outline-offset:2px} /* ---- today -------------------------------------------------------- */ .today{padding-block:36px 8px} .today h1{font-family:var(--display); font-weight:400; font-size:clamp(28px,6vw,38px); line-height:1.1; margin:6px 0 0; text-wrap:balance} .today p{color:var(--dim); font-size:15px; margin:10px 0 0; max-width:46ch} article{padding-block:34px; border-top:1px solid var(--rule)} .cat{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .cat b{font-weight:600; color:var(--band)} .hl{font-family:var(--sans); font-size:17px; font-weight:400; line-height:1.4; color:var(--dim); margin:10px 0 0; max-width:52ch} .hl a{text-decoration:none} .hl a:hover{text-decoration:underline; text-underline-offset:3px} .q{font-family:var(--display); font-weight:400; font-size:clamp(30px,6.4vw,44px); line-height:1.04; letter-spacing:-.02em; margin:18px 0 0; text-wrap:balance} .q .mk{color:var(--band)} .a{font-family:var(--text); font-size:clamp(19px,3.6vw,21px); line-height:1.5; margin:16px 0 0; max-width:40ch; border-left:3px solid var(--band); padding-left:18px} .src{font-size:13px; color:var(--dim); margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; align-items:baseline} .src a{text-decoration:underline; text-underline-offset:2px} /* The three stories are cards: the whole card is the link, so it gets an edge to be the extent of. Border rather than a filled panel -- three filled blocks would shout over the type, which is the thing worth looking at. */ .stories{display:grid; gap:18px; margin-top:26px} .stories article{border:1px solid var(--rule); border-radius:3px; padding:24px 22px; display:flex; flex-direction:column; transition:border-color .15s ease, background-color .15s ease} .stories article.tappable{cursor:pointer} .stories article:hover, .stories article:focus-within{border-color:var(--band); background:var(--panel)} /* Stacked, not flowed: a long outlet name wraps the link onto a second line in one card and not the next, and two cards' footers stop lining up. Always two lines. */ .stories .src{margin-top:auto; padding-top:20px; flex-direction:column; align-items:flex-start; gap:7px} .stories .hl a:hover{text-decoration:none} /* the whole card is already the target */ /* Three abreast once there is room for three readable columns. The question steps down: 44px display type in a 340px column is a wall. */ @media (min-width:940px){ body.wide .stories{grid-template-columns:repeat(3,1fr); gap:24px} body.wide .stories .q{font-size:clamp(24px,2.3vw,31px); margin-top:14px} body.wide .stories .hl{font-size:16px} body.wide .stories .a{font-size:18px; margin-top:14px} body.wide .search{max-width:520px} body.wide .today h1{font-size:44px} } /* Where the card cannot be hovered, the age's colour has no way to appear, so the whole border carries it instead of the neutral hairline. The query asks about hover rather than width because that is the actual reason: a tablet cannot hover either, and a desktop window dragged narrow still can. The border rather than a tint, which washes a whole page of same-age cards, or a shadow, which is invisible on the dark theme. */ @media (hover:none){ .stories article{border-color:var(--band)} } @media (prefers-reduced-motion:reduce){.stories article{transition:none}} .more{font-size:14px; color:var(--band); text-decoration:none; font-weight:500} .more:hover{text-decoration:underline; text-underline-offset:3px} /* ---- table question ------------------------------------------------ */ .table-q{background:var(--panel); border-radius:3px; padding:28px 24px; margin-block:12px 0} .table-q h2{font-family:var(--display); font-weight:400; font-size:clamp(23px,4.8vw,30px); line-height:1.12; margin:10px 0 0; text-wrap:balance} .table-q p{font-size:14px; color:var(--dim); margin:14px 0 0} /* ---- blocks: archive, follow --------------------------------------- */ section.block{padding-block:34px; border-top:1px solid var(--rule)} .block h2{font-family:var(--display); font-weight:400; font-size:26px; margin:8px 0 0} .block p{color:var(--dim); font-size:15px; margin:10px 0 0; max-width:48ch} .search{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap} .search input{flex:1 1 220px; min-width:0; font-family:var(--sans); font-size:15px; padding:11px 14px; border-radius:3px; border:1.5px solid var(--rule); background:var(--field); color:var(--fg)} .search button{font-family:var(--sans); font-size:15px; font-weight:500; padding:11px 20px; border-radius:3px; border:1.5px solid var(--fg); background:var(--fg); color:var(--bg); cursor:pointer} .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px} .chips button,.chips span{font-family:var(--sans); font-size:13px; color:var(--dim); border:1px solid var(--rule); border-radius:999px; padding:5px 12px; background:transparent; cursor:pointer} .chips button:hover{color:var(--fg)} .chips button[aria-pressed="true"]{color:var(--band); border-color:var(--band); background:var(--bandtint)} .note{font-size:13px; color:var(--dim); margin-top:10px; min-height:1.2em} .ageask{border:0; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center} .ageask legend{float:left; width:100%; font-size:13px; color:var(--dim); padding:0; margin-bottom:8px} .agebox{display:inline-flex} .agebox input{position:absolute; width:1px; height:1px; opacity:0; margin:0} .agebox span{display:inline-block; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; padding:7px 16px; border-radius:999px; border:1.5px solid var(--rule); color:var(--dim)} .agebox:nth-of-type(1) span{--band:var(--c57); --bandtint:var(--tint57)} .agebox:nth-of-type(2) span{--band:var(--c812); --bandtint:var(--tint812)} .agebox:nth-of-type(3) span{--band:var(--c1317); --bandtint:var(--tint1317)} .agebox input:checked + span{color:var(--band); border-color:var(--band); background:var(--bandtint)} .agebox input:focus-visible + span{outline:2px solid var(--band); outline-offset:2px} @media (max-width:440px){.agebox span{padding:7px 12px; font-size:13px}} .follow-card{display:flex; gap:16px; align-items:center; margin-top:16px; padding:18px 20px; background:var(--panel); border-radius:3px; flex-wrap:wrap} .follow-card .at{font-family:var(--display); font-size:19px} .btn{display:inline-block; font-size:15px; font-weight:500; padding:10px 18px; border-radius:3px; border:1.5px solid var(--fg); background:var(--fg); color:var(--bg); text-decoration:none} /* ---- archive list --------------------------------------------------- */ .list{margin-top:8px} .item{display:flex; gap:16px; padding-block:22px; border-top:1px solid var(--rule); align-items:flex-start} .item.hidden{display:none} .item .thumb{flex:0 0 84px; width:84px; border-radius:3px; overflow:hidden; background:var(--panel)} .item .thumb img{aspect-ratio:4/5; object-fit:cover; width:100%} .item .meta{font-size:12px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; font-weight:600} .item h3{font-family:var(--display); font-weight:400; font-size:21px; line-height:1.18; margin:6px 0 0; text-wrap:balance} .item h3 a{text-decoration:none} .item h3 a:hover{text-decoration:underline; text-underline-offset:3px} .item .ask{font-family:var(--text); font-size:16px; color:var(--quiet); margin:8px 0 0; max-width:46ch} .count{font-size:13px; color:var(--dim); margin-top:16px} /* ---- a single post --------------------------------------------------- */ /* A post is an
too, but it opens the page: it takes neither the rule between stories nor the space that rule needs. */ .post{padding-block:0; border-top:0} .post h1{font-family:var(--display); font-weight:400; font-size:clamp(30px,6.2vw,42px); line-height:1.08; margin:10px 0 0; text-wrap:balance; letter-spacing:-.01em} .post .summary{font-family:var(--text); font-size:clamp(17px,3.2vw,19px); line-height:1.55; margin:18px 0 0; max-width:44ch; color:var(--quiet)} .script{font-family:var(--text); font-size:clamp(19px,3.6vw,22px); line-height:1.5; margin:16px 0 0; max-width:42ch; border-left:3px solid var(--band); padding-left:18px} .chip{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--quiet); background:var(--panel); border-radius:999px; padding:6px 14px; margin-top:6px} .why{font-size:14px; color:var(--dim); margin:16px 0 0; max-width:46ch} .why b{color:var(--band); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:12px; display:block; margin-bottom:4px} .asks{margin-top:26px; background:var(--bandtint); border-radius:3px; padding:22px 20px} .asks .lab{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--band)} .asks dl{margin:0} .asks dt{font-family:var(--display); font-size:20px; line-height:1.2; margin-top:16px; text-wrap:balance} .asks dd{font-family:var(--text); font-size:16px; line-height:1.5; color:var(--quiet); margin:6px 0 0} .asks dd:before{content:"Try: "; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)} .others{font-size:14px; color:var(--dim); margin-top:22px} .others button{font:inherit; color:var(--fg); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px} .ig{display:flex; gap:16px; align-items:center; margin-top:8px; flex-wrap:wrap} .ig img{width:120px; border-radius:3px} .pager{display:flex; justify-content:space-between; gap:16px; padding-block:26px; border-top:1px solid var(--rule); font-size:14px} .pager a{color:var(--dim); text-decoration:none; max-width:46%} .pager a:hover{color:var(--fg)} .pager .lab{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px} .prose{max-width:60ch} .prose h2{font-family:var(--display); font-weight:400; font-size:24px; margin:34px 0 0} .prose h3{font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.04em; margin:24px 0 0; color:var(--band)} .prose h3 .yr{color:var(--dim); font-weight:500; letter-spacing:0} .prose .stage{border-left:2px solid var(--rule); padding-left:18px; margin-top:8px} .prose .stage.b57{--band:var(--c57)} .prose .stage.b812{--band:var(--c812)} .prose .stage.b1317{--band:var(--c1317)} .prose .stage{border-left-color:var(--band)} .prose p{font-size:15px; line-height:1.65; color:var(--quiet); margin:12px 0 0} .prose a{text-decoration:underline; text-underline-offset:2px} footer{border-top:1px solid var(--rule); padding-block:28px 40px; font-size:13px; color:var(--dim); display:grid; gap:10px} footer a{text-decoration:underline; text-underline-offset:2px} @media (prefers-reduced-motion:no-preference){.q,.a,.script{transition:opacity .18s ease}}