/* Fonts, served from /assets/fonts/ (latin and latin-ext, as Google Fonts cut them; SIL OFL, licences beside them) */
/* Bricolage Grotesque, latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-300-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Bricolage Grotesque, latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-300-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Space Mono, latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Space Mono, latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Space Mono, latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-mono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Space Mono, latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-mono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
*{box-sizing:border-box}
body{margin:0;background:#ece8e4;color:#2a2523;font:15px/1.5 system-ui,-apple-system,sans-serif}
a{color:inherit}
.page{container:page/inline-size;overflow:hidden;color:#59256a}
.page h1,.page h2,.page h3,.page h4,.page p,.page blockquote{margin:0}
.page input,.page button{font:inherit;color:inherit}
.page a{text-decoration:none}
.page .bb-status{font-size:13px;margin:6px 0 0;min-height:1px}
.ph{position:relative;background:#e9e3ee center/cover no-repeat}
.ph .cr{position:absolute;right:0;bottom:0;font:10px system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-top-left-radius:6px;z-index:2}
.ph-littlehampton{background-image:url(/assets/cover-2026-10-25.jpg);background-position:20% 55%}
.ph-poulter{background-image:url(/assets/poulter-putt.jpg);background-position:50% 58%}
.tuft{width:1em;height:.62em}

/* ---------- Caddyshanks-style ---------- */
.cs{background:var(--ink);padding:8px;font-family:'Bricolage Grotesque',sans-serif}
.cs .panel{background:#fff;border:var(--line) solid var(--ink);border-radius:18px;overflow:hidden}
.cs .mono,.cs .date,.cs h3,.cs .pill-g,.cs .sub-pill,.cs .links,.cs .signup button,.cs .tag,.cs .eyebrow,.cs .tee,.cs .win-cta,.cs .prod h3,.cs .foot-nav{font-family:'Space Mono',monospace}
.cs .mast{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:var(--line) solid var(--ink)}
.cs .brand{display:flex;flex-direction:column;align-items:center;gap:0}
.cs .links{display:none}
.cs .mast-r{display:flex;gap:10px;align-items:center}
.cs .sub-pill{border:var(--line) solid var(--ink);border-radius:999px;padding:5px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.cs .hero{padding:40px 20px 10px;text-align:center}
.cs h1{font-weight:800;font-stretch:75%;font-size:54px;line-height:.92;letter-spacing:-.01em}
.cs .mono{font-size:14.5px;line-height:1.5;margin-top:16px}
.cs .small{font-size:13px;margin-top:10px}
.cs .signup{display:grid;margin-top:20px;border:var(--line) solid var(--ink);border-radius:12px;overflow:hidden}
.cs .signup input{border:0;padding:13px 16px;text-align:center;font-style:italic;outline:none;min-width:0;background:#fff}
.cs .signup button{border:0;background:var(--ink);color:#fff;padding:13px;text-transform:uppercase;letter-spacing:.12em;font-size:13px;cursor:pointer}
.cs .hero-art{margin-top:16px}
.cs .sec{padding:44px 16px 10px}
.cs .sec-head{text-align:center;margin-bottom:20px;display:grid;gap:12px;justify-items:center}
.cs h2{font-weight:800;font-stretch:75%;font-size:38px;line-height:.95;letter-spacing:-.01em}
.cs .sec-head p{font-size:14px;margin-top:6px}
.cs .pill-g{display:inline-block;background:var(--ink);color:#fff;border:var(--line) solid var(--ink);border-radius:999px;padding:4px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3em}
.cs .c{text-align:center}
.cs .ph{border:var(--line) solid var(--ink);border-radius:16px;overflow:hidden}
.cs article h3{font-weight:400;font-size:17px;line-height:1.3;margin-top:4px}
.cs .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.cs .foot{margin-top:8px;padding:24px 18px 16px}
.cs .foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12px;text-transform:uppercase}
.cs .foot-nav nav{display:grid;gap:8px}
.cs .giant{display:flex;align-items:flex-end;justify-content:center;gap:0;margin:26px -6px 6px;font-size:16cqi}
.cs .giant .tuft{width:.7em;height:.45em;flex:none}
.cs .legal{font-size:11px;margin-top:10px}
@container page (min-width:860px){
 .cs{padding:14px}
 .cs .mast{padding:10px 40px}
 .cs .links{display:flex;gap:34px;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
 .cs .hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;text-align:left;padding:56px 64px 40px}
 .cs h1{font-size:88px}.cs .mono{font-size:16px;max-width:520px}
 .cs .signup{display:flex;border-radius:999px;max-width:470px;padding:3px}
 .cs .signup input{flex:1;text-align:left;padding:8px 14px;border-radius:999px}
 .cs .signup button{border-radius:999px;padding:9px 22px}
 .cs .hero-art{margin:0}
 .cs .sec{padding:60px 64px 10px}
 .cs .sec-head{display:flex;justify-content:space-between;align-items:flex-end;text-align:left}
 .cs .sec-head.c{display:grid;text-align:center;justify-content:center}
 .cs h2{font-size:52px}
 .cs .foot{padding:34px 40px 18px}
 .cs .foot-nav{grid-template-columns:1fr auto;gap:60px;font-size:13px}
 .cs .foot-nav nav:first-child{display:flex;gap:40px;align-items:flex-start}
 .cs .foot-nav nav:last-child{grid-template-columns:auto auto;column-gap:70px}
 .cs .giant{font-size:12cqi}
}

.cs{color:var(--ink)}
.img{display:block;background:center/contain no-repeat}

.cs .hero-art{position:relative;aspect-ratio:400/330;max-width:440px;margin:16px auto 0}
.cs .doodles{position:absolute;inset:0;width:100%;height:100%}
.cs .hero-m{position:absolute;left:19%;bottom:5%;height:88%}
.cs .pill-g{background:var(--pill);color:var(--ink)}
.cs .giant-logo{flex:1;max-width:84%}
@container page (min-width:860px){
 
 .cs .hero-art{margin:0;max-width:none}
}

.cs .rls{display:grid;gap:22px}
.cs .rl{border:var(--line) solid var(--ink);border-radius:16px;overflow:hidden;background:#fff}
.cs .rl-cover{position:relative;border:6px solid var(--pill);border-bottom:0}
.cs .rl-cover .ph{height:210px;border:0;border-radius:0}
.cs .rl-cover .cr{top:0;left:0;right:auto;bottom:auto;border-radius:0 0 6px 0}
.cs .dpill{position:absolute;top:10px;right:10px;z-index:3;background:var(--ink);color:#fff;font:700 12px 'Space Mono',monospace;border-radius:999px;padding:3px 10px;text-transform:uppercase}
.cs .rl-b{padding:14px 16px 16px;border-top:var(--line) solid var(--ink)}
.cs .rl-b h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-stretch:75%;font-size:25px;line-height:1.02;margin:0}
.cs .rl-b p{font:13px 'Space Mono',monospace;margin-top:8px}
.cs .recent .c{margin-top:24px}
@container page (min-width:860px){
 .cs .rls{grid-template-columns:repeat(3,1fr);gap:24px}
 .cs .rl-cover .ph{height:200px}
}

.cs{background:var(--frame);color:var(--ink)}
.cs .pill-g,.cs .arrow{background:var(--pill);color:var(--on-pill)}
.cs .rl-cover{border-color:var(--cover)}
.cs .doodles,.cs .tuft{color:var(--ink)}
.cs .hero-m{left:50%;transform:translateX(-50%);bottom:8%;height:80%;width:auto;max-width:90%}
.cs .rl-plate{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;background:#fff;border:var(--line) solid var(--ink);border-radius:12px;padding:6px 10px}
.cs .giant-logo{flex:none;width:min(78%,calc(var(--ga) * 24cqi));max-width:none}
.vw34{--ink:#051230;--fill:#fffbed;--frame:#b6bfc1;--pill:#f37f94;--on-pill:#051230;--cover:#f37f94;--ga:3.714}.vw34 .img-logo{background-image:url(/assets/logo-horizontal.svg);aspect-ratio:2600/700}.vw34 .img-small{background-image:url(/assets/logo-stacked.svg);aspect-ratio:2600/1821}.vw34 .img-hero{background-image:url(/assets/clover-mark.svg);aspect-ratio:2600/2208}.vw34 .brand .img-small{width:83px}@container page (min-width:860px){.vw34 .brand .img-small{width:120px}}

/* edit 1: no outer border, page fills */
.page.cs,.page.cs{background:#fff;padding:0}
.cs .panel{border:0;border-radius:0}
.cs .foot{margin-top:0;border-top:var(--line) solid var(--ink)}
@container page (min-width:860px){.page.cs{padding:0}}
/* edit 2: no logo stickers over the issue photos */
.cs .rl-plate{display:none}
/* edit 3: hero shows only the clover mark: no swirls, lines or tufts */
.cs .doodles{display:none}
.cs .hero-m{top:50%;bottom:auto;transform:translate(-50%,-50%);height:86%}
/* edit 4: line weight is a variable, 2px on phone and 3px on desktop */
.page.cs{--line:2px}
@container page (min-width:860px){.cs>*{--line:3px}}
.cs .rl-cover{border-width:calc(var(--line) * 3);border-bottom:0}
/* edit 5: desktop email button fills the pill */
@container page (min-width:860px){
 .cs .signup{padding:0;align-items:stretch}
 .cs .signup input{padding:13px 20px}
 .cs .signup button{border-radius:0;padding:13px 28px;margin:0}
}
/* edit 5b: the pill's own background is indigo, so no white can show at the button's edges */
.cs .signup{background:var(--ink)}
.cs .signup input{background:#fff}
.cs .signup button{background:transparent}
/* edit 6: header Subscribe button filled pink */
.cs .sub-pill{background:var(--pill);color:var(--ink)}
/* edit 7: footer logo is the horizontal lockup, full width; no tufts */
.cs .giant{margin:34px 0 14px;display:block}
.cs .giant .tuft{display:none}
.cs .giant-logo{width:100%;max-width:none;flex:none}
body{background:#fff;margin:0}
/* launch 1: smooth scrolling to #issues and #subscribe, unless the visitor prefers reduced motion */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* launch 2: wide issue cards (.rls.wide), one under another on desktop: the homepage's newest three and the archive's every issue; remove the class to get the three-card grid back */
.cs .rls.wide .rl-cover .ph{height:260px}
@container page (min-width:860px){
 .cs .rls.wide{grid-template-columns:1fr}
 .cs .rls.wide .rl{display:grid;grid-template-columns:58% minmax(0,1fr)}
 .cs .rls.wide .rl-cover{border-bottom:calc(var(--line) * 3) solid var(--cover);border-right:0}
 .cs .rls.wide .rl-cover .ph{height:360px}
 .cs .rls.wide .rl-b{display:flex;flex-direction:column;justify-content:center;border-top:0;border-left:var(--line) solid var(--ink);padding:32px 40px}
 .cs .rls.wide .rl-b h3{font-size:36px}
 .cs .rls.wide .rl-b p{font-size:14px;margin-top:12px}
}
/* launch 3: a single footer nav lays out as one wrapped row */
.cs .foot-nav nav:only-child{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 24px}
@container page (min-width:860px){.cs .foot-nav nav:only-child{gap:8px 40px}}
/* launch 4: recent issues is now the last section, so it takes the bottom padding the archive section had */
.cs .recent{padding-bottom:48px}
@container page (min-width:860px){.cs .recent{padding-bottom:64px}}

/* launch 5: archive page, which doubles as the 404 page */
.cs .nf{text-align:center;max-width:720px;margin-inline:auto;padding-top:48px;padding-bottom:56px}
.cs .nf .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em}
.cs .nf h2{margin-top:12px}
.cs .nf-ph{height:240px;margin-top:24px}
.cs .nf-alt{position:absolute;inset:0}
.cs .nf .mono{margin:20px auto 0;max-width:520px}
.cs .nf .signup{margin:24px auto 0}
.cs .nf .back{font:13px 'Space Mono',monospace;margin-top:24px}
.cs .nf .back a{text-decoration:underline;text-underline-offset:3px}
@container page (min-width:860px){
 .cs .nf{padding:72px 0 80px}
 .cs .nf-ph{height:400px;margin-top:32px}
}
/* launch 6: Caddyshanks-style content column. On desktop the mast, hero, sections and footer share one column capped at 1250px and centred, so wide screens get big side margins; the mast and footer lines stay full width. 64px is the floor, which is the hero's original side padding. */
@container page (min-width:860px){
 .cs .mast,.cs .hero,.cs .sec,.cs .foot{padding-left:max(64px,calc((100% - 1250px) / 2));padding-right:max(64px,calc((100% - 1250px) / 2))}
}
/* launch 7: the archive block is already its own centred 720px column, so the wide-screen column padding from launch 6 must not apply to it (with border-box sizing it squashed the content to 50px at 1920) */
@container page (min-width:860px){.cs .sec.nf{padding-left:0;padding-right:0}}
/* launch 8: footer horizontal logo smaller on desktop: 75% of the column, centred. Phone keeps the full width. */
@container page (min-width:860px){.cs .giant-logo{width:75%;margin-inline:auto}}
/* launch 9: footer links centred */
.cs .foot-nav nav:only-child{justify-content:center}
/* launch 10: the form's status line always takes one line of space, so showing a message doesn't shift the hero */
.page .bb-status{min-height:20px;line-height:20px}
/* launch 11: privacy page. It uses the archive page's centred 720px column (.nf); the heading block stays centred and the text reads left-aligned. Section headings are the issue card's title size. */
.cs .pv-body{text-align:left;margin-top:8px}
.cs .pv-body h2{font-size:25px;line-height:1.02;margin-top:36px}
.cs .pv-body .mono{max-width:none;margin:12px 0 0}
.cs .pv-body a{text-decoration:underline;text-underline-offset:3px}
.cs .pv-body .pv-end{margin-top:36px}
/* launch 12: more room above the hero, so the gap from the mast line down to the hero matches the gap from the hero down to the "Recent issues" heading. Measured in the browser (see the site report). Only the top padding changes; the bottom gap is as it was. Phones 98px. Desktop 145px, set at 1280px. From 1348px the headline drops to two lines and the clover becomes the top of the hero, so wide screens take 124px. */
.cs .hero{padding-top:98px}
@container page (min-width:860px){.cs .hero{padding-top:145px}}
@container page (min-width:1348px){.cs .hero{padding-top:124px}}
/* launch 13: the archive and privacy headings are h1s, sized exactly as the section h2 they replace */
.cs .nf h1{font-size:38px;line-height:.95;margin-top:12px}
@container page (min-width:860px){.cs .nf h1{font-size:52px}}
/* launch 14: the issue card is one link (cover, pill, title and date); it looks exactly as before */
.cs .rl-link{display:block;color:inherit;text-decoration:none}
/* launch 15: the legal line's links look like the text around them, with an underline on hover */
.cs .legal a:hover{text-decoration:underline;text-underline-offset:3px}
/* launch 16: the header has one link, Archive, centred on the page. On desktop the mast is a three-column grid: logo at the start, the link in the middle, Subscribe at the end. Phones keep the logo and the Subscribe pill. */
@container page (min-width:860px){
 .cs .mast{display:grid;grid-template-columns:1fr auto 1fr}
 .cs .mast .brand{justify-self:start}
 .cs .mast .links{justify-self:center}
 .cs .mast .mast-r{justify-self:end}
}
/* launch 18: the legal line is centred at every width */
.cs .legal{text-align:center}
/* launch 19: an issue's body. tools/issues/pull.py puts beehiiv's web HTML for the issue inside .issue-body, and these rules make it read in the house style. beehiiv writes fonts, colours and sizes into inline styles, so the type rules carry !important to win over them; beehiiv's block wrappers (the divs straight inside, unless they have a background) lose their inline padding so the text lines up with the cover and the spacing comes from the rules here; other inline spacing and widths are left alone, apart from images and tables, which never go wider than the column. Body text is 17px/1.6 Bricolage Grotesque in Deep Indigo; headings are the site's (800, 75% width); links are underlined; photos have the 2px indigo border and 12px corners; captions are Space Mono 13px in grey (#5b6478, Deep Indigo at about two-thirds on white, 5.9:1; Neutral Gray is too light for text); quotes have a pink rule; beehiiv's buttons are the site's pink pill. */
.cs .issue-body{text-align:left;font:17px/1.6 'Bricolage Grotesque',sans-serif;color:var(--ink);overflow-wrap:break-word}
.cs .issue-body p,.cs .issue-body li,.cs .issue-body div,.cs .issue-body td,.cs .issue-body th,.cs .issue-body blockquote,.cs .issue-body figure,.cs .issue-body ul,.cs .issue-body ol,.cs .issue-body table{font-family:'Bricolage Grotesque',sans-serif !important;font-size:17px !important;line-height:1.6 !important;color:var(--ink) !important;font-style:normal !important}
.cs .issue-body span,.cs .issue-body strong,.cs .issue-body b,.cs .issue-body em,.cs .issue-body i,.cs .issue-body u,.cs .issue-body s,.cs .issue-body sup,.cs .issue-body sub,.cs .issue-body small,.cs .issue-body code{font-family:inherit !important;font-size:inherit !important;line-height:inherit !important;color:inherit !important}
.cs .issue-body em,.cs .issue-body i{font-style:italic !important}
.cs .issue-body strong,.cs .issue-body b{font-weight:700}
.cs .issue-body p{margin:0 0 16px}
.cs .issue-body ul,.cs .issue-body ol{margin:0 0 16px;padding-left:1.4em}
.cs .issue-body li{margin:0 0 6px}
.cs .issue-body li p{margin:0}
.cs .issue-body h1,.cs .issue-body h2,.cs .issue-body h3,.cs .issue-body h4,.cs .issue-body h5,.cs .issue-body h6{font-family:'Bricolage Grotesque',sans-serif !important;font-weight:800 !important;font-stretch:75%;letter-spacing:-.01em;line-height:1.02 !important;color:var(--ink) !important;font-style:normal !important;text-transform:none !important;margin:36px 0 12px}
.cs .issue-body h1{font-size:32px !important}
.cs .issue-body h2{font-size:25px !important}
.cs .issue-body h3{font-size:21px !important}
.cs .issue-body h4,.cs .issue-body h5,.cs .issue-body h6{font-size:17px !important}
.cs .issue-body h1 *,.cs .issue-body h2 *,.cs .issue-body h3 *,.cs .issue-body h4 *,.cs .issue-body h5 *,.cs .issue-body h6 *{font:inherit !important;color:inherit !important}
.cs .issue-body a{color:var(--ink) !important;text-decoration:underline !important;text-underline-offset:3px;text-decoration-color:var(--ink) !important}
.cs .issue-body img{display:block;max-width:100% !important;height:auto !important;margin:0 auto;border:2px solid var(--ink) !important;border-radius:12px !important;box-sizing:border-box}
.cs .issue-body .image,.cs .issue-body figure{margin:24px 0}
.cs .issue-body .button{margin:4px 0 20px}
.cs .issue-body table,.cs .issue-body iframe,.cs .issue-body video{max-width:100% !important}
.cs .issue-body table{border-collapse:collapse}
.cs .issue-body td,.cs .issue-body th{vertical-align:top}
.cs .issue-body figcaption,.cs .issue-body .image__source,.cs .issue-body .image__source *,.cs .issue-body [class*="caption"],.cs .issue-body [class*="caption"] *,.cs .issue-body .blockquote__byline,.cs .issue-body cite{font-family:'Space Mono',monospace !important;font-size:13px !important;line-height:1.5 !important;color:#5b6478 !important;font-style:normal !important}
.cs .issue-body .image__source,.cs .issue-body figcaption{margin-top:8px}
.cs .issue-body .image__source p{margin:0}
.cs .issue-body blockquote{margin:24px 0;padding:2px 0 2px 18px !important;border:0 !important;border-left:6px solid var(--pill) !important}
.cs .issue-body blockquote p{margin:0 0 8px}
.cs .issue-body hr{border:0 !important;border-top:2px solid var(--ink) !important;margin:32px 0 !important}
.cs .issue-body a.button__link,.cs .issue-body .button a,.cs .issue-body a[class*="button"],.cs .issue-body a[class*="btn"]{display:inline-block;width:auto !important;background:var(--pill) !important;color:var(--ink) !important;border:var(--line) solid var(--ink) !important;border-radius:999px !important;padding:4px 18px !important;font:700 12px/1.5 'Space Mono',monospace !important;text-transform:uppercase;letter-spacing:.3em;text-decoration:none !important}
.cs .issue-body a.button__link *,.cs .issue-body .button a *,.cs .issue-body a[class*="button"] *,.cs .issue-body a[class*="btn"] *{font:inherit !important;color:inherit !important;background:none !important}
.cs .issue-body>div:not([style*="background"]){padding:0 !important}
.cs .issue-body>:first-child,.cs .issue-body>:first-child>:first-child{margin-top:0}
/* launch 20: the sign-up form's honeypot. A second field, named website, that people never see or reach with the keyboard; bots that fill in every field fill it in, and the function quietly drops them. It is moved off-screen rather than hidden with display:none, which some bots detect. padding and border are zeroed so it really is 1px. */
.cs .signup input.bb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;padding:0;border:0}
/* launch 21: issue pages and the archive list, both written by tools/issues/pull.py. An issue page uses the archive page's centred 720px column (.nf): the eyebrow and heading centred, the cover in the issue card's pink frame (no pill), the body reading left-aligned, then a line, the sign-up form and the way back. With no cover from beehiiv, the cover is the clover mark on white. The archive list is the heading block in the 720px column, then every issue card, wide and one under another as on the homepage (launch 2). */
.ph-clover{background:#fff url(/assets/clover-mark.svg) center/auto 72% no-repeat}
.cs .issue-cover{margin-top:24px}
.cs .issue-cover .rl-cover{border-bottom:calc(var(--line) * 3) solid var(--cover)}
.cs .issue-cover .rl-cover .ph{height:240px}
.cs .issue-body{margin-top:32px}
.cs .issue-end{margin-top:40px;padding-top:36px;border-top:var(--line) solid var(--ink)}
.cs .issue-end .mono{margin-top:0}
.cs .nf.al-head{padding-bottom:0}
.cs .sec.al{padding-top:40px;padding-bottom:56px}
.cs .al .back{font:13px 'Space Mono',monospace;margin-top:32px;text-align:center}
.cs .al .back a{text-decoration:underline;text-underline-offset:3px}
@container page (min-width:860px){
 .cs .issue-cover{margin-top:32px}
 .cs .issue-cover .rl-cover .ph{height:400px}
 .cs .issue-body{margin-top:40px}
 .cs .issue-end{margin-top:48px;padding-top:44px}
 .cs .sec.al{padding-top:48px;padding-bottom:80px}
}

/* launch 22: the contact page (contact.html). It uses the archive page's centred 720px column (.nf): the eyebrow and heading centred, then the intro and the form reading left-aligned, as on the privacy page. The fields are stacked and full width: each label in Space Mono 12px capitals like the eyebrow, each box white with a 2px Deep Indigo line and 16px corners (the pill suits one line only), the text 16px Bricolage Grotesque (16px also stops iPhones zooming in). The select has the site's own chevron. Focus shows a 3px Eosine Pink ring. The button is the sign-up form's indigo, as a pill: full width on phones, its own width on desktop. The honeypot hides as the sign-up form's does (launch 20). */
.cs .ct-body{text-align:left;margin-top:20px}
.cs .ct-body .mono{max-width:none;margin:0}
.cs .contact{display:grid;gap:20px;margin-top:28px}
.cs .ct-field{display:grid;gap:8px}
.cs .ct-label{font:700 12px/1.2 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.12em}
.cs .contact input,.cs .contact select,.cs .contact textarea{display:block;width:100%;min-width:0;margin:0;padding:12px 16px;border:2px solid var(--ink);border-radius:16px;background-color:#fff;color:var(--ink);font:16px/1.4 'Bricolage Grotesque',sans-serif;-webkit-appearance:none;appearance:none}
.cs .contact textarea{resize:vertical;min-height:120px}
.cs .contact select{padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23051230' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:14px 9px;cursor:pointer}
.cs .contact button{justify-self:stretch;margin-top:4px;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:13px 28px;font-family:'Space Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.cs .contact input:focus-visible,.cs .contact select:focus-visible,.cs .contact textarea:focus-visible,.cs .contact button:focus-visible{outline:3px solid var(--pill);outline-offset:2px}
.cs .contact input.bb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;padding:0;border:0}
@container page (min-width:860px){
 .cs .contact{gap:24px;margin-top:36px}
 .cs .contact button{justify-self:start}
}

/* launch 23: the contact page's intro reads centred like the archive's (the same 520px measure, auto margins, centred text), so the eyebrow, heading and intro line up symmetrically on phones and on desktop; the form below it stays left-aligned. */
.cs .ct-body .mono{max-width:520px;margin:0 auto;text-align:center}

/* launch 24: the centred intros on the archive and contact pages balance their line lengths (text-wrap: balance), so no single line runs wider than the rest and the block reads symmetrically on phones; browsers without balance keep the plain wrap. The privacy page's intro is left-aligned and is left alone. */
.cs .nf .mono{text-wrap:balance}
.cs .pv-body .mono{text-wrap:wrap}

/* launch 25: an issue sent with our own email HTML (tools/email/build.py, a table with class bb-root) reads as it did in the inbox. pull.py takes out the email's logo, issue line and cover (the page has its own heading and cover) and puts it in .issue-mail instead of .issue-body, so the house-style rules for beehiiv's blocks leave its inline styles alone. beehiiv's wrapper loses its 40px side padding and the first row its gap, so the text lines up with the cover; on a phone the text is 17px and pictures shrink to fit, as in the email's own phone rules (tools/email/custom.css). */
.cs .issue-mail{margin-top:32px;text-align:left}
.cs .issue-mail>div{padding:0 !important}
.cs .issue-mail .bb-root{table-layout:fixed}
.cs .issue-mail .bb-root>tbody>tr:first-child>td{padding-top:0 !important}
@container page (min-width:860px){
 .cs .issue-mail{margin-top:40px}
}
@container page (max-width:480px){
 .cs .issue-mail .bb-t,.cs .issue-mail .bb-w{font-size:17px !important}
 .cs .issue-mail .bb-root img{max-width:100% !important;height:auto !important}
}
/* launch 26: each issue card carries the issue's preview text (the beehiiv subtitle, the line under the subject in the inbox) between the title and the date, in 16px Bricolage Grotesque on phones and 18px on the wide desktop card. */
.cs .rl-b .rl-d{font:16px/1.4 'Bricolage Grotesque',sans-serif;margin-top:8px}
@container page (min-width:860px){.cs .rls.wide .rl-b .rl-d{font-size:18px;margin-top:14px}}

/* launch 27: the guides. Written by tools/guides/build.py from evergreen/<guide>.md: a page per guide at
 /guides/<slug>, the list at /guides, and one static row of up to three cards on the homepage,
 between the markers <!-- bb:guides --> and <!-- /bb:guides -->, outside pull.py's issue markers so
 the Sunday run leaves it alone. The three cards take the width of the wide issue cards; one or two
 sit centred; on phones and tablets they stack. A card is a photograph, then the title and preview
 under it, the same pink frame the issue cards have. Colours are the brand kit's only: indigo, pink,
 white, and #50596e (indigo at about two-thirds on white, 5.9:1) for the small notes. */
.cs .guides .sec-head{margin-bottom:24px}
.cs .gcards{display:flex;flex-direction:column;gap:24px;align-items:stretch}
.cs .gcard{display:flex;flex-direction:column;min-width:0;background:#fff;color:var(--ink);text-decoration:none;border:var(--line) solid var(--ink);border-radius:16px;overflow:hidden}
.cs .gcard:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.cs .gcard-pic{flex:none;background:var(--pill);border:calc(var(--line) * 3) solid var(--pill);border-bottom:0}
.cs .gcard-pic img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.cs .gcard-b{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:20px;border-top:var(--line) solid var(--ink)}
.cs .gpill{display:inline-block;margin-bottom:14px;padding:6px 12px 5px;border:2px solid var(--ink);border-radius:999px;background:var(--pill);color:var(--ink);font:700 11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.cs .gcard h3{font:800 25px/1.08 'Bricolage Grotesque',sans-serif;font-stretch:75%;letter-spacing:-.005em;margin:0}
.cs .gcard p{font:400 16px/1.5 'Bricolage Grotesque',sans-serif;margin:12px 0 0}
@container page (min-width:860px){
 .cs .guides .sec-head{margin-bottom:36px}
 .cs .gcards{flex-direction:row;justify-content:center}
 .cs .gcard{flex:0 0 calc((100% - 48px) / 3)}
 .cs .gcard-b{padding:24px}
 .cs .gcard h3{font-size:27px}
 /* the headings and copy line up with the issue cards' new column (launch 6) */
 .cs .guides{padding-bottom:0}
}
/* an individual guide: the issue page's 720px column and type, its tables and photo framed in pink,
 the small grey note under a photo, and the sign-up block above a rule at the end */
.cs .g-credit{font:400 12px/1.5 'Space Mono',monospace;color:#50596e;margin-top:10px;text-align:left}
.cs .issue-cover .rl-cover .ph{height:auto;aspect-ratio:3 / 2}
.cs .guide-body{text-align:left;font:400 18px/1.6 'Bricolage Grotesque',sans-serif;color:var(--ink);margin-top:56px}
.cs .guide-body p{margin:0 0 24px}
.cs .guide-body h2{font:800 26px/1.05 'Bricolage Grotesque',sans-serif;font-stretch:75%;letter-spacing:-.005em;margin:56px 0 28px}
.cs .guide-body h3.g-q{font:700 18px/1.3 'Bricolage Grotesque',sans-serif;margin:40px 0 10px}
.cs .guide-body h3.g-q+p{margin-bottom:0}
.cs .guide-body h3.g-q+p+p{margin-top:24px}
.cs .guide-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cs .g-fig{margin:56px 0 0}
.cs .g-fig img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;border:calc(var(--line) * 3) solid var(--pill);border-radius:12px;box-sizing:border-box}
.cs .g-fig figcaption{font:400 12px/1.5 'Space Mono',monospace;color:#50596e;margin-top:10px}.cs .guide-body .g-fig+p{margin-top:32px}
.cs .gtab{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:var(--line) solid var(--ink);border-radius:12px;overflow:hidden;margin:28px 0 0;table-layout:fixed}
.cs .gtab thead tr{background:var(--ink)}
.cs .gtab th{background:var(--ink);color:#fff;font:700 11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:14px 14px 13px}
.cs .gtab th:first-child{width:46%}
.cs .gtab th:not(:first-child){text-align:right}
.cs .gtab td{background:#fff;font:400 18px/1.3 'Bricolage Grotesque',sans-serif;padding:14px 14px 13px;vertical-align:baseline;border-top:1px solid #b6bfc1}
.cs .gtab tbody:first-of-type tr:first-child td{border-top:0}
.cs .gtab .g-club{display:block;font-weight:700}
.cs .gtab .g-sub{display:block;font:400 12px/1.4 'Space Mono',monospace;color:#50596e;margin-top:3px}
.cs .gtab .g-num{text-align:right;font:700 13px/1.5 'Space Mono',monospace;font-variant-numeric:tabular-nums;overflow-wrap:normal}
.cs .gtab .g-num .g-sub{text-align:right}
.cs .gtab.g-young .g-head td{border-top:var(--line) solid var(--ink);padding:16px 14px 8px}
.cs .gtab.g-young tbody:first-of-type .g-head td{border-top:0}
.cs .gtab .g-band{font:700 13px/1.5 'Space Mono',monospace;padding-left:22px}
.cs .gtab.g-young td[rowspan]{vertical-align:middle}
.cs .gtab.g-young tbody{background:#fff}
.cs .guide-end{margin-top:80px;padding:36px 0 0;border-top:var(--line) solid var(--ink);text-align:center}
.cs .guide-end h2{font:800 26px/1.05 'Bricolage Grotesque',sans-serif;font-stretch:75%;margin:0}
.cs .guide-end .mono{margin:16px auto 0;max-width:460px;font-size:14px}
.cs .guide-end .signup{margin:24px auto 0}
@container page (max-width:480px){
 .cs .guide-body,.cs .gtab td{font-size:17px}
 .cs .guide-body{margin-top:48px}
 .cs .guide-body h2{margin-top:48px;margin-bottom:24px}
 .cs .gtab{margin-top:24px}
 .cs .gtab{table-layout:auto}
 .cs .gtab th,.cs .gtab td{padding-left:10px;padding-right:10px}
 .cs .gtab .g-band{padding-left:16px}
 .cs .g-fig{margin-top:40px}
 .cs .guide-end{margin-top:56px}
}
.cs .guide-body h3.g-sh{font:800 26px/1.05 'Bricolage Grotesque',sans-serif;font-stretch:75%;letter-spacing:-.005em;margin:56px 0 28px}
/* table headers: the table's own fill is indigo, so no white shows inside the rounded corners behind the header row; the body cells keep their white */
.cs .gtab{background:var(--ink)}
.cs .gtab th:first-child{border-top-left-radius:10px}
.cs .gtab th:last-child{border-top-right-radius:10px}
.cs .gtab tbody:last-of-type tr:last-child td:first-child{border-bottom-left-radius:10px}
.cs .gtab tbody:last-of-type tr:last-child td:last-child{border-bottom-right-radius:10px}
.cs .gtab+p{margin-top:12px}
.cs .gtab.g-rank th:first-child{width:22%}
.cs .gtab.g-rank th:nth-child(2){text-align:left}
.cs .gtab.g-rank td:first-child{font-family:'Space Mono',monospace;font-size:15px}
.cs .gtab.g-rank td:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:600px){.cs .gtab.g-rank{table-layout:fixed}.cs .gtab.g-rank th:first-child{width:27%}.cs .gtab.g-rank th:last-child{width:30%}}
/* a soft header: the homepage card's small pink pill, sitting just above a section heading */
.cs .guide-body .g-kicker{margin:56px 0 12px;line-height:1}
.cs .guide-body .g-kicker .gpill{margin-bottom:0}
.cs .guide-body .g-kicker+h2,.cs .guide-body .g-kicker+h3.g-sh{margin-top:0}
@container page (max-width:480px){.cs .guide-body .g-kicker{margin-top:48px}}