/* greg-brooks.com — generated from design/system/tokens.json by build/css.py. Edit tokens.json or css.py, not this file. */
:root{
  --paper:#ffffff; --ink:#1e1e1e; --ink-muted:#4a4945; --ink-quiet:#6b6a66;
  --line:#1e1e1e; --line-light:#d5d3cc; --line-faint:#9a9891; --red:#c8372d; --field:#efebe2;
  --display:Besley, Georgia, 'Times New Roman', serif; --sans:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --serif:'IBM Plex Serif', Georgia, 'Times New Roman', serif; --mono:'IBM Plex Mono', 'Courier New', monospace;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:48px; --space-5:72px;
  --frame:28px; --gutter:48px; --column-gap:64px; --measure:640px; --aside:420px; --page-max:1304px;
  --rule:1px; --tick:16px;
}
html{background:var(--paper);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
a:focus-visible{outline:1px solid var(--red);outline-offset:3px}
img,svg{max-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The sheet */
.page{padding:var(--frame);min-height:100vh}
.sheet{max-width:var(--page-max);margin:0 auto;border:var(--rule) solid var(--line);background:var(--paper);display:flex;flex-direction:column}

/* Header */
.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px;padding:20px var(--gutter);border-bottom:var(--rule) solid var(--line)}
.site-name{font-family:var(--sans);font-size:17px;line-height:1.3;font-weight:500;letter-spacing:.01em}
.site-meta{font-family:var(--mono);font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0.06em;color:var(--ink-quiet)}

/* Rows and columns */
.row{display:flex;flex-wrap:wrap;gap:40px var(--column-gap);padding:0 var(--gutter);align-items:flex-start}
.col-read{flex:1 1 520px;max-width:var(--measure);min-width:0}
.col-aside{flex:0 1 var(--aside);width:var(--aside);max-width:100%;margin:0 0 0 auto;min-width:0}
.stack{display:flex;flex-direction:column}

/* Home */
.hero{padding:var(--space-5) var(--gutter) 56px;gap:var(--space-4) var(--column-gap)}
.hero .col-read{flex:1 1 560px;max-width:none;display:flex;flex-direction:column;gap:30px}
.display-title{margin:0;font-family:var(--display);font-size:58px;line-height:1.06;font-weight:800;letter-spacing:-0.015em;max-width:19ch;color:var(--ink)}
.standfirst{margin:0;font-family:var(--sans);font-size:26px;line-height:1.35;font-weight:400;color:var(--ink-muted);max-width:32ch}
.drawing{margin:0;display:flex;flex-direction:column;gap:12px}
.drawing img,.drawing svg{display:block;width:100%;height:auto}
.mono-caption{font-family:var(--mono);font-size:12px;line-height:1.5;font-weight:400;letter-spacing:0.02em;color:var(--ink-quiet)}
.lead-row{padding-bottom:64px}
.lead{margin:0;font-family:var(--sans);font-size:19px;line-height:1.6;font-weight:400}
.index{display:flex;flex-direction:column;border-top:var(--rule) solid var(--line);flex:1 1 360px;max-width:var(--aside);min-width:0;margin-left:auto}
.index a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:var(--rule) solid var(--line-light);color:var(--ink)}
.index a:last-child{border-bottom-color:var(--line)}
.index .name{font-family:var(--sans);font-size:17px;line-height:1.3;font-weight:500}
.index .desc{font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;color:var(--ink-quiet);text-align:right}
.doors{display:flex;flex-wrap:wrap;gap:var(--space-4) 40px;padding:0 var(--gutter) var(--space-5)}
.door{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}
.dimension{display:flex;align-items:center;gap:12px}
.dimension .tick{flex:0 0 1px;height:var(--tick);border-left:var(--rule) solid var(--line)}
.dimension .rule{flex:1 1 auto;border-top:var(--rule) solid var(--line)}
.figure{font-family:var(--display);font-size:32px;line-height:1;font-weight:700;letter-spacing:-0.01em;color:var(--red)}
.door .caption{margin:0;min-height:88px;font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;color:var(--ink-quiet)}
.door h2,.h2{margin:12px 0 0;font-family:var(--sans);font-size:26px;line-height:1.15;font-weight:600;letter-spacing:-0.015em}
.door .body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400}
.door .body strong,.page-body .text strong{font-weight:600}
.door .more{margin-top:auto;font-size:15px;font-weight:500}
.ask{display:flex;flex-wrap:wrap;gap:24px var(--column-gap);padding:40px var(--gutter) 56px;border-top:var(--rule) solid var(--line);align-items:flex-start}
.ask .ask-text{flex:1 1 520px;max-width:var(--measure);min-width:0;display:flex;flex-direction:column;gap:14px}
.ask p{margin:0;font-family:var(--sans);font-size:22px;line-height:1.45;font-weight:400;letter-spacing:-0.005em}
.ask p.forms{font-family:var(--sans);font-size:15px;line-height:1.3;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink)}
.ask p.forms span{color:var(--ink-quiet);padding:0 .5em}
.ask .reach{flex:1 1 300px;min-width:0;font-size:16px;line-height:1.7;padding-top:4px}

/* Footer */
.site-footer{border-top:var(--rule) solid var(--line);display:flex;flex-direction:column}
.footer-index{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding:16px var(--gutter);border-bottom:var(--rule) solid var(--line-light)}
.footer-index .links{display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;font-weight:500}
.footer-index .reach{font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding:12px var(--gutter) 14px;font-family:var(--mono);font-size:11px;line-height:1.4;font-weight:400;letter-spacing:0.06em;color:var(--ink-quiet)}

/* Essay */
.essay-head{padding:60px var(--gutter) 44px;gap:40px 72px}
.essay-head .col-read{display:flex;flex-direction:column;gap:22px}
.crumb{font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;color:var(--ink-quiet);display:flex;flex-wrap:wrap;gap:0 6px}
.crumb a{color:var(--ink-quiet)}
.essay-title{margin:0;font-family:var(--display);font-size:66px;line-height:1.0;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.essay-standfirst{margin:0;font-family:var(--sans);font-size:24px;line-height:1.38;font-weight:400;color:var(--ink-muted);max-width:34ch}
.essay-head .drawing{padding-top:40px;gap:10px}
.essay-row{padding-bottom:var(--space-5);gap:40px 72px}
.essay-body{font-family:var(--serif);font-size:19px;line-height:1.65;font-weight:400;color:var(--ink);display:flex;flex-direction:column;gap:20px}
.essay-body p{margin:0}
.essay-body p.essay-lead{font-family:var(--serif);font-size:21.5px;line-height:1.6;font-weight:500}
.essay-body h2{margin:var(--space-3) 0 0;font-family:var(--sans);font-size:15px;line-height:1.3;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink)}
.essay-body ul{margin:0;padding-left:1.25em}
.essay-body li{margin:0 0 10px}
.essay-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-faint)}
.essay-body a:hover{color:var(--red);text-decoration-color:var(--red)}
.essay-body .date-line{font-family:var(--mono);font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0.06em;color:var(--ink-quiet);margin-top:4px}
.essay-body .date-line + h2{margin-top:0}
.tick-rule{display:flex;align-items:center;gap:10px}
.tick-rule .tick{flex:0 0 1px;height:12px;border-left:var(--rule) solid var(--line)}
.tick-rule .rule{flex:0 0 72px;border-top:var(--rule) solid var(--line)}
.tick-rule.center{justify-content:center;margin:var(--space-1) 0}
.tick-rule.end{margin-top:28px}
.credit{margin:0;font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;color:var(--ink-quiet)}
.thesis{position:relative}
.thesis .num{position:absolute;left:-44px;width:34px;text-align:right;font-family:var(--mono);font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0.06em;color:var(--ink-quiet);top:.55em}
.essay-aside{display:flex;flex-direction:column;gap:32px;padding-top:10px}
.pull-quote{margin:0;display:flex;flex-direction:column;gap:14px}
.pull-quote .tick-rule .rule{flex:1 1 auto}
.pull-quote p{margin:0;font-family:var(--display);font-size:28px;line-height:1.22;font-weight:700;letter-spacing:-0.012em;color:var(--red)}
.also{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5}
.also .label{font-weight:500;padding-bottom:6px;border-bottom:var(--rule) solid var(--line)}
.also .item{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.also .item .when{font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;color:var(--ink-quiet);white-space:nowrap}
.also .all{padding-top:4px;font-weight:500}
.selected{display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.5}
.selected .label{font-weight:500;padding-bottom:6px;border-bottom:var(--rule) solid var(--line)}
.selected p{margin:0}
.selected strong{font-weight:600}
.numbers{display:flex;flex-direction:column;font-size:15px;line-height:1.5}
.numbers .label{font-weight:500;padding-bottom:6px;border-bottom:var(--rule) solid var(--line)}
.numbers .number{margin:0;padding:14px 0 13px;border-bottom:var(--rule) solid var(--line-light)}
.numbers .number:last-child{border-bottom:0}
.numbers .fig{display:block;font-family:var(--display);font-size:32px;line-height:1;font-weight:700;letter-spacing:-0.01em;font-size:28px;color:var(--ink);margin-bottom:3px}
.numbers .base{display:block}

/* Musings index + Notes */
.list-head{padding:60px var(--gutter) 36px;gap:22px}
.list-head .col-read{display:flex;flex-direction:column;gap:22px}
.musings{display:flex;flex-direction:column;gap:var(--space-4)}
.musings h2{margin:0 0 4px;font-family:var(--sans);font-size:26px;line-height:1.15;font-weight:600;letter-spacing:-0.015em}
.musings .group{display:flex;flex-direction:column;border-top:var(--rule) solid var(--line)}
.musings .group a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:var(--rule) solid var(--line-light)}
.musings .group a:last-child{border-bottom-color:var(--line)}
.musings .group .name{font-family:var(--sans);font-size:17px;line-height:1.3;font-weight:500;display:flex;flex-direction:column;gap:3px}
.musings .group .deck{font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;color:var(--ink-quiet);max-width:46ch}
.musings .group .when{font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;color:var(--ink-quiet);white-space:nowrap}
.notes-col{display:flex;flex-direction:column;gap:0}
.notes-col .label{font-family:var(--sans);font-size:17px;line-height:1.3;font-weight:500;padding-bottom:6px;border-bottom:var(--rule) solid var(--line)}
.note{padding:14px 0;border-bottom:var(--rule) solid var(--line-light)}
.note .meta{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0.06em;color:var(--ink-quiet)}
.note .text{margin:8px 0 0;font-family:var(--serif);font-size:17px;line-height:1.55}
.note .text p{margin:0 0 10px}
.note .text p:last-child{margin-bottom:0}
.note .text a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-faint)}
.notes-col .all{padding-top:12px;font-size:15px;font-weight:500}
.notes-page .note .text{font-size:19px;line-height:1.65}

/* Pages */
.page-head{padding:var(--space-5) var(--gutter) 48px;gap:40px 72px}
.page-head .col-read{display:flex;flex-direction:column;gap:22px}
.page-body{padding-bottom:var(--space-5)}
.page-body .text{font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;display:flex;flex-direction:column;gap:16px}
.page-body .text p{margin:0}
.page-body .text h2{margin:var(--space-3) 0 0;font-family:var(--sans);font-size:15px;line-height:1.3;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink)}
.page-body .text p.entry{display:block}
.page-body .text .entry .when{display:block;font-family:var(--mono);font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0.06em;color:var(--ink-quiet);margin-bottom:4px}
.page-body .text .entry strong{font-weight:600}
.page-body .text .entry em{font-style:normal;color:var(--ink-quiet)}
.page-body .text a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-faint)}
.page-body .text a:hover{text-decoration-color:var(--red)}
.page-body .dimension{max-width:var(--aside)}
.status-line{font-family:var(--mono);font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0.06em;color:var(--ink-quiet)}
.photo{margin:0;display:flex;flex-direction:column;gap:12px}
.photo .field{background:var(--field);aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom}
.photo figcaption{font-family:var(--mono);font-size:12px;line-height:1.5;font-weight:400;letter-spacing:0.02em;color:var(--ink-quiet)}

/* Phone */
@media (max-width:640px){
  .page{padding:12px}
  .site-header,.row,.hero,.doors,.ask,.footer-index,.colophon,.essay-head,.list-head,.page-head{padding-left:20px;padding-right:20px}
  .hero{padding-top:48px;padding-bottom:40px}
  .essay-head,.list-head,.page-head{padding-top:40px}
  .display-title{font-size:38px}
  .essay-title{font-size:44px}
  .standfirst{font-size:21px}
  .essay-standfirst{font-size:21px}
  .col-aside,.index{width:100%;flex-basis:100%;max-width:none;margin-left:0}
  .essay-head .drawing{padding-top:0}
  .thesis .num{position:static;display:block;width:auto;text-align:left;margin-bottom:2px}
  .door .caption{min-height:0}
  .index a{flex-direction:column;align-items:flex-start;gap:2px}
  .index .desc{text-align:left}
}