/* still_in_draft on the web: the iOS app's screens, no more. Black ground, white 1px
   hairlines that collapse into a ledger, uppercase meta letterspaced at 0.06em, sentence-
   case titles. One column at phone width on every screen, so the site IS the app.
   Tokens mirror still-app/lib/theme.ts. */
:root{
  --bg:#000;--fg:#fff;--dim:rgba(255,255,255,.58);--faint:rgba(255,255,255,.32);
  --line:#fff;--tint:rgba(255,255,255,.04);--pad:16px;--col:560px;--tabs:58px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 24px)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0;border-radius:0;-webkit-appearance:none}
button{cursor:pointer}
b{font-weight:700}

/* META: 10px, 0.06em, uppercase, bold. Every label, foot, tab and filter. */
.meta,.head,.foot,.ago,.filter,.tab,.btn,.small,.city,.t,.read,.bar,.back{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

.wrap{max-width:var(--col);margin:0 auto;min-height:100vh}

/* The tab screen header: a title in META, hairline below. */
.bar{position:sticky;top:0;z-index:5;background:var(--bg);height:48px;display:flex;align-items:center;
  justify-content:center;border-bottom:1px solid var(--line);font-size:12px;color:var(--fg);text-transform:none;letter-spacing:.2em}
.bar .back{position:absolute;left:var(--pad);top:0;height:48px;display:flex;align-items:center;color:var(--fg)}
.bar .back .ic{width:20px;height:20px;margin:0 2px 0 -6px}

/* Filter bar: four equal cells, the active one tinted. */
.filters{display:flex;border-bottom:1px solid var(--line)}
.filter{flex:1;padding:12px 0;text-align:center;color:var(--dim);border-right:1px solid var(--line)}
.filter:last-child{border-right:0}
.filter.on{color:var(--fg);background:var(--tint)}

/* Lists sit 10px in from the edge, as the FlatList does. */
.list{padding:10px 10px 0}
.head{display:block;color:var(--dim);margin:24px 0 10px}
.list>.head:first-child{margin-top:14px}

/* Row: one box, one line of meta, one title, one quiet foot. Boxes overlap by the hairline. */
.post,.srow,.cell,.more,.slot,.fieldcell{display:block;border:1px solid var(--line);margin-bottom:-1px;background:var(--bg)}
.post{padding:var(--pad)}
.post:hover,.post:focus-visible,.srow:hover,.cell:hover,.more:hover,.slot:hover,.slot.on{background:var(--tint);outline:none}
.post .meta{display:flex;justify-content:space-between;gap:12px;color:var(--dim);margin-bottom:10px}
.post .meta>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.post .ago{color:var(--faint);flex:none}
.post .ttl{display:block;color:var(--fg);font-size:18px;line-height:25px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--faint)}
.post .read{color:var(--dim);white-space:nowrap;flex:none;margin-left:12px}
.post.lead .ttl{font-size:18px}
.post[hidden],.month[hidden],.day[hidden]{display:none}

/* Seasons ledger: code cell, cities cell. */
.srow{display:flex;align-items:stretch}
.srow .code{flex:1;padding:14px;border-right:1px solid var(--line);font-size:22px;font-weight:700;letter-spacing:1px;display:flex;align-items:center}
.srow .cities{flex:2;padding:10px 14px;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-width:0}
.srow .city{white-space:nowrap}

/* Decade grid: three across, boxes overlapping on both axes. */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);padding-right:1px}
.cell{padding:14px;margin-right:-1px}
.cell b{display:block;font-size:17px;line-height:22px}
.cell span{display:block;color:var(--faint);margin-top:4px;font-size:10px;letter-spacing:.16em;font-weight:700}

/* Calendar: a day head, then two slots across. */
.slots{display:grid;grid-template-columns:1fr 1fr;padding-right:1px}
.slot{padding:12px 14px;margin-right:-1px;text-align:left;display:block;width:100%}
.slot .t{display:block;color:var(--faint);margin-bottom:4px}
.slot span:last-child{font-size:15px;line-height:20px;font-weight:600;display:block}

/* Buttons are the app's Btn: a bordered cell, META at 12px/0.2em. */
.btn,.more{display:block;width:100%;padding:15px;text-align:center;font-size:12px;letter-spacing:.2em;color:var(--fg);border:1px solid var(--fg)}
.btn.quiet,.more{color:var(--dim);border-color:var(--line)}
.btn+.btn,.btn+.more{margin-top:14px}
.more{margin-bottom:-1px}

/* Body copy on the inner pages. */
.copy{padding:14px 14px 0}
.copy h1{font-size:22px;line-height:28px;font-weight:700;margin-bottom:8px}
.copy p{color:var(--dim);font-size:14px;line-height:22px;margin-bottom:16px}
.copy p.fg{color:var(--fg)}
.copy .small{display:block;color:var(--faint);letter-spacing:.1em;text-transform:none;font-weight:400;font-size:11px;line-height:17px;margin-top:10px}
.rows .post .ttl{font-size:15px;line-height:22px;font-weight:600}
.rows .post .sub{display:block;color:var(--dim);font-size:13px;line-height:20px;margin-top:6px}
.rows .post .meta{margin-bottom:8px}

/* The app's text field: a bottom hairline, nothing else. */
.field{display:block;width:100%;color:var(--fg);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:18px;font-size:16px}
.field::placeholder{color:var(--dim)}
.form{padding:0 14px}

/* Tabs: fixed to the bottom, the column's width, no icons. */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs .in{max-width:var(--col);margin:0 auto;display:flex;height:var(--tabs)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--faint);letter-spacing:.1em;font-size:9px}
.tab .ic{width:22px;height:22px}
.tab.on{color:var(--fg)}

/* Foot line under everything. */
.foot-line{padding:32px 14px 8px;color:var(--faint);display:flex;justify-content:space-between;gap:12px}
.foot-line a{color:var(--dim)}

/* Reveal: rows rise 8px as they arrive. Quiet; the app has no animation past the intro. */
.js .rv{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.js .rv.in{opacity:1;transform:none}

/* The opening: the name typed out, as the app does on launch. */
.intro{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;letter-spacing:.5px;color:var(--fg);transition:opacity .32s ease}
.intro.off{opacity:0;pointer-events:none}
.intro[hidden]{display:none}
.intro .cur{display:inline-block;width:2px;height:1em;background:var(--fg);margin-left:3px;vertical-align:-2px}
.intro .cur.hide{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .intro{transition:none}
}
@media (min-width:600px){
  /* On a wide screen the column keeps its phone width and the tab bar its width, so
     the page reads as the app on a desk. */
  .wrap{border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .tabs .in{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* Icons: one sprite (/icons.svg), drawn at 24px on a 1.5 stroke, square caps, mitred
   corners. They inherit the text colour, so an active tab lights its icon with its label. */
.ic{display:inline-block;width:16px;height:16px;flex:none;vertical-align:middle}
.post .read{display:inline-flex;align-items:center;gap:4px}
.post .read .ic{width:14px;height:14px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px}
.btn .ic{width:18px;height:18px;margin-top:-2px}
.foot-line a{display:inline-flex;align-items:center;gap:6px}
.foot-line .ic{width:14px;height:14px}

/* Quiz: the app's game screen. */
.streak{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:12px}
.streak div{padding:14px;border-right:1px solid var(--line)}
.streak div:last-child{border-right:0}
.streak b{display:block;font-size:34px;line-height:40px}
.streak span{display:block;color:var(--dim);margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;padding-right:1px}
.box{display:block;border:1px solid var(--line);margin:0 -1px -1px 0;padding:14px;text-align:left;width:auto}
.box:hover{background:var(--tint)}
.box.wide{grid-column:1/-1}
.box .row{display:flex;justify-content:space-between;color:var(--fg)}
.box .row span:last-child{color:var(--faint)}
.box .sub{display:block;color:var(--dim);font-size:12px;margin-top:6px}
.q-top{display:flex;justify-content:space-between;color:var(--dim);margin:16px 0}
.q-topic{color:var(--dim);font-size:13px;line-height:19px;margin-bottom:10px}
.q-text{font-size:19px;line-height:27px;font-weight:600}
.q-ask{color:var(--dim);margin:12px 0 18px}
.opt{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:1px solid var(--line);margin-bottom:-1px;padding:16px;font-size:17px;color:var(--fg)}
.opt:hover:not([disabled]){background:var(--tint)}
.opt[disabled]{cursor:default}
.opt.faint{color:var(--faint)}
.opt.chosen{background:var(--tint)}
.opt.right{border-color:var(--fg);position:relative;z-index:1}
.opt .ic{width:18px;height:18px}
.q-src{display:inline-flex;align-items:center;gap:6px;color:var(--dim);padding:16px 0}
.score{font-size:64px;line-height:72px;font-weight:700;margin-top:6px}
.note{color:var(--faint);font-size:11px;line-height:17px;margin-top:22px}

/* The weekly sign-up: a Row cell holding a form. */
.sub-cell .ttl{-webkit-line-clamp:unset;margin-bottom:14px}
.sub-form .field{margin-bottom:14px}
.check{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:13px;margin-bottom:16px;cursor:pointer}
.check input{width:16px;height:16px;border:1px solid var(--line);display:grid;place-content:center;flex:none}
.check input:checked::after{content:"";width:8px;height:8px;background:var(--fg)}
.sub-cell .small{display:block;color:var(--faint);font-size:11px;line-height:17px;margin-top:12px;letter-spacing:.02em;text-transform:none;font-weight:400}
.form-msg{margin-top:12px;color:var(--dim)}
.form-msg.ok{color:var(--fg)}
.btn[disabled]{opacity:.5;cursor:default}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* A post page: the app's post screen. Prose at reading size, the slides below as a ledger. */
.story{padding:16px 14px 0}
.story-meta{display:flex;justify-content:space-between;gap:12px;color:var(--dim);margin-bottom:14px}
.story h1{font-size:26px;line-height:32px;font-weight:700;margin-bottom:16px;letter-spacing:-.01em}
.story .dek{font-size:19px;line-height:27px;font-weight:600;margin-bottom:12px}
.story .byline{color:var(--faint);margin-bottom:24px}
.story .lead{font-size:17px;line-height:27px;color:var(--fg);opacity:.94;margin-bottom:8px}
.story .para{font-size:17px;line-height:28px;color:var(--fg);opacity:.94;margin-bottom:20px}
.figs{margin:20px -14px 24px}
.fig{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:-1px}
.fig img{display:block;width:100%;height:auto;background:var(--tint)}
.fig figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;color:var(--faint)}
.beats{border:1px solid var(--line)}
.beat{display:flex;gap:14px;padding:14px;border-bottom:1px solid var(--line)}
.beat:last-child{border-bottom:0}
.beat .n{color:var(--faint);padding-top:3px;flex:none}
.beat .bt{font-size:14px;line-height:21px;font-weight:600;letter-spacing:.02em}
.srcs{display:flex;flex-direction:column;gap:8px}
.src{color:var(--dim);font-size:12px;line-height:18px;text-decoration:underline;text-underline-offset:3px;word-break:break-all}

/* Second footer row: the coffee ask, partnerships and privacy live here, not in the tabs. */
.foot-2{padding-top:4px;justify-content:flex-start;gap:20px;flex-wrap:wrap}

/* The opening cell's introduction, under BLACK_AND_WHITE_COVERAGE. */
.post.lead .sub{display:block;color:var(--dim);font-size:15px;line-height:22px;margin-top:10px}

/* 17 Oct: the filter tabs stay pinned under the header, like the app's. */
.filters{position:sticky;top:48px;z-index:4;background:var(--bg)}
#feed [hidden]{display:none!important}
/* The top sign-up: field and button side by side. */
.sub-form.inline{display:flex;gap:10px;align-items:stretch;margin-top:4px}
.sub-form.inline .field{flex:1;margin-bottom:0;min-width:0}
.sub-form.inline .btn{width:auto;padding:12px 16px;flex:none}
.signup-top .ttl{-webkit-line-clamp:unset;margin-bottom:10px}

/* Footer (17 Oct 2026): the app's cell language. Mark, a two-column grid of link cells, one
   small line. Replaces two loose rows of text that read as unfinished. */
.site-foot{padding:36px 10px 8px;margin-top:12px}
.foot-mark{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0 22px}
.foot-mark .badge{border:1px solid var(--fg);padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--fg)}
.foot-mark .meta{color:var(--faint)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;padding-right:1px}
.fcell{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);margin:0 -1px -1px 0;padding:16px 14px;color:var(--fg)}
.fcell:hover,.fcell:focus-visible{background:var(--tint);outline:none}
.fcell .ic{width:16px;height:16px;color:var(--dim)}
.foot-small{display:flex;justify-content:space-between;color:var(--faint);padding:18px 4px 0}
.foot-small a{color:var(--dim)}

/* Consent banner (GA4): a cell pinned above the tab bar, the site's own buttons. */
.consent{position:fixed;left:10px;right:10px;bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 10px);z-index:30;max-width:540px;margin:0 auto;background:var(--bg);border:1px solid var(--fg);padding:16px}
.consent p{color:var(--dim);font-size:13px;line-height:20px;margin-bottom:12px}
.consent a{text-decoration:underline;color:var(--fg)}
.consent-btns{display:flex;gap:10px}
.consent-btns .btn{margin:0;padding:12px}
.consent-btns .btn+.btn{margin-top:0}
.foot-links{display:flex;gap:16px}
.cookie-link{display:none}
.ga .cookie-link{display:inline}