/* Alegreya Sans — SIL Open Font License, files in /public/fonts */
/* latin-ext */
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/alegreya-sans-400-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/alegreya-sans-400-italic-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}
/* latin-ext */
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/alegreya-sans-700-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/alegreya-sans-700-italic-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}
/* latin-ext */
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/alegreya-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/alegreya-sans-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}
/* latin-ext */
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alegreya-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alegreya-sans-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}

/* Tactixology public site — the palette from the cover images and tactical graphics */
:root{
  --slate:#4D646C;       /* the cover background */
  --slate-deep:#40555D;
  --night:#1F2C33;
  --rust:#9F5632;        /* the block mark */
  --rust-light:#E0875A;  /* rust that stays visible on slate */
  --ice:#BFDDF4;         /* the pale blue duotone */
  --paper:#FFFFFF;
  --mist:#F2F5F7;
  --ink:#1F2C33;
  --ink-soft:#55646B;
  --rule:#D8E0E5;
  --ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --read:"Alegreya Sans","Iowan Old Style",Georgia,sans-serif;   /* article text, self-hosted in /fonts */
  --head:"Alegreya Sans","Helvetica Neue",Helvetica,Arial,sans-serif;   /* headlines, in bold */
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* masthead */
.masthead{background:var(--slate);color:#fff;position:relative;overflow:hidden}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px;position:relative}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand .mark{height:34px;width:auto;fill:var(--rust)}
.wordmark{font-weight:700;font-style:italic;font-size:26px;letter-spacing:-.01em}
.tagline{color:var(--ice);font-size:14px}
.masthead-curve{position:absolute;right:-40px;top:0;width:55%;height:100%;fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;pointer-events:none}

/* menu */
.site-nav{background:var(--slate-deep);border-top:1px solid rgba(255,255,255,.08)}
.site-nav .wrap{display:flex;flex-wrap:wrap;gap:0 26px}
.site-nav a{color:var(--ice);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:12px 0 9px;border-bottom:3px solid transparent}
.site-nav a:hover{color:#fff}
.site-nav a.on{color:#fff;border-bottom-color:var(--rust-light)}

/* category label (the kicker), with a small rust block like the logo */
.kicker{display:block;margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust)}
.kicker::before{content:"";display:inline-block;width:8px;height:8px;background:var(--rust);margin-right:8px;vertical-align:1px}
.kicker a{color:inherit;text-decoration:none}
.lead .kicker{color:var(--ice)}
.lead .kicker::before{background:var(--rust-light)}

/* lead story and category header, on slate */
.lead{background:var(--slate);color:#fff;padding:44px 0 56px}
.lead-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.lead-inner.no-image{grid-template-columns:1fr;max-width:860px}
.lead-image{display:block;border-radius:4px;overflow:hidden;background:var(--slate-deep);aspect-ratio:16/10}
.lead-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.lead-image:hover img{transform:scale(1.02)}
.lead h2{font-family:var(--head);margin:0 0 16px;font-size:48px;line-height:1.04;letter-spacing:-.01em;font-weight:700}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{text-decoration:underline;text-decoration-color:var(--rust-light);text-decoration-thickness:3px;text-underline-offset:7px}
.lead .dek{font-family:var(--read);font-size:21px;line-height:1.45;color:var(--ice);margin:0 0 18px}
.lead .meta{color:rgba(255,255,255,.75)}
.lead .empty{color:var(--ice);padding:0}
.lead .empty a{color:#fff}
.category-head{padding:40px 0 44px}
.category-head h1{font-family:var(--head);margin:0;font-size:50px;line-height:1.02;letter-spacing:-.01em;font-weight:700}
.meta{display:block;font-size:13px;color:var(--ink-soft);margin:0}

/* story list */
.stories{padding-top:40px;padding-bottom:80px}
.section-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0;padding-bottom:12px;border-bottom:3px solid var(--night)}
.card{display:grid;grid-template-columns:1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.card.has-image{grid-template-columns:220px 1fr}
.card-image{display:block;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--mist)}
.card-image img{width:100%;height:100%;object-fit:cover}
.card .kicker{margin-bottom:8px}
.card-title{font-family:var(--head);display:block;font-size:28px;line-height:1.12;font-weight:700;letter-spacing:-.005em;margin-bottom:8px}
.card:hover .card-title{color:var(--slate)}
.card-dek{display:block;font-family:var(--read);font-size:18px;line-height:1.45;color:var(--ink-soft);margin-bottom:10px}
.empty{color:var(--ink-soft);padding:40px 0}

/* article page */
.article-wrap{padding-top:52px;padding-bottom:100px}
article{max-width:700px;margin:0 auto}
article h1{font-family:var(--head);font-size:50px;line-height:1.04;letter-spacing:-.01em;font-weight:700;margin:0 0 16px;color:var(--night)}
article .dek{font-family:var(--read);font-size:22px;line-height:1.4;color:var(--ink-soft);margin:0 0 22px}
.byline{font-size:13px;color:var(--ink-soft);margin:0 0 34px;padding-bottom:18px;border-bottom:3px solid var(--night)}
.body{font-family:var(--read);font-size:20px;line-height:1.4}
.body p{margin:0 0 1em}
.body h2{font-family:var(--head);font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.005em;margin:1.8em 0 .5em}
.body blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--rust);color:var(--slate);font-style:italic}
.body a{color:var(--rust);text-decoration-thickness:1px;text-underline-offset:3px}
.body figure{margin:2em 0}
.body img{width:100%;height:auto;border-radius:3px}
.body figcaption{font-family:var(--ui);font-size:14px;line-height:1.45;color:var(--ink-soft);margin-top:10px}
.body mark{background:var(--ice);color:inherit}

/* X handle in the masthead */
.masthead-right{display:flex;align-items:center;gap:18px}
.masthead-follow{color:#fff;text-decoration:none;font-weight:700;font-style:italic;font-size:15px;border:1.5px solid var(--rust-light);border-radius:999px;padding:6px 15px;white-space:nowrap}
.masthead-follow:hover{background:var(--rust);border-color:var(--rust)}

/* content + sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-top:40px;padding-bottom:80px;align-items:start}
.stream,.article-main{min-width:0}
.article-main article{margin:0;max-width:700px}
.layout .article-main{padding-top:12px}
.section-label.older{margin-top:56px}

/* pieces shown in full on the homepage */
.stream-story{padding:30px 0 44px;border-bottom:3px solid var(--night)}
.stream-story:last-of-type{border-bottom:0}
.stream-story h2{font-family:var(--head);font-size:40px;line-height:1.06;letter-spacing:-.01em;font-weight:700;margin:0 0 14px;color:var(--night)}
.stream-story h2 a{text-decoration:none}
.stream-story h2 a:hover{color:var(--slate)}
.stream-story .dek{font-family:var(--read);font-size:21px;line-height:1.4;color:var(--ink-soft);margin:0 0 18px}
.stream-story .byline{border-bottom-width:1px;border-color:var(--rule)}
.stream-story .body{max-width:700px}
.members-note{font-family:var(--ui);font-size:15px;background:var(--mist);border-left:4px solid var(--rust);padding:14px 18px;border-radius:0 4px 4px 0}

/* sidebar */
.sidebar{position:sticky;top:24px;display:flex;flex-direction:column;gap:22px}
.side-card{background:var(--mist);border-radius:6px;padding:20px 22px}
.side-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.side-card.follow{background:var(--slate);color:#fff;position:relative;overflow:hidden;padding:24px 22px}
.side-card.follow .mark{position:absolute;right:14px;top:18px;height:40px;width:auto;fill:var(--rust)}
.follow .side-text{max-width:210px}
.follow .side-label{color:var(--ice)}
.handle-big{position:relative;display:block;font-weight:700;font-style:italic;font-size:28px;color:#fff;text-decoration:none;letter-spacing:-.01em;margin-bottom:8px}
.follow .side-text{position:relative;color:var(--ice);font-size:14px;line-height:1.45;margin:0 0 16px}
.follow-button{position:relative;display:inline-block;background:var(--rust);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px}
.follow-button:hover{background:#B5633B}
.side-list{list-style:none;margin:0;padding:0;counter-reset:n}
.side-list li{display:grid;grid-template-columns:22px 1fr;column-gap:6px;padding:11px 0;border-top:1px solid var(--rule)}
.side-list li::before{counter-increment:n;content:counter(n);font-weight:700;color:var(--rust);grid-row:span 2}
.side-list a{font-family:var(--head);text-decoration:none;font-weight:700;font-size:17px;line-height:1.25}
.side-list a:hover{color:var(--slate)}
.side-list .meta{margin-top:3px}
.side-cats{list-style:none;margin:0;padding:0}
.side-cats li{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule);font-size:15px}
.side-cats a{text-decoration:none;font-weight:600}
.side-cats a:hover{color:var(--slate)}
.side-cats span{color:var(--ink-soft);font-size:13px}

/* related pieces under an article */
.related{margin-top:64px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:22px}
.related-card{display:block;text-decoration:none;color:inherit}
.related-image{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--slate);margin-bottom:12px}
.related-image img{width:100%;height:100%;object-fit:cover}
.related-image .mark{height:42px;width:auto;fill:var(--rust)}
.related-card .kicker{margin-bottom:6px}
.related-title{font-family:var(--head);display:block;font-weight:700;font-size:20px;line-height:1.18;margin-bottom:6px}
.related-card:hover .related-title{color:var(--slate)}

@media (max-width:980px){
  /* minmax(0,…) lets the column shrink below its widest word or image, so nothing spills off a phone screen */
  .layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .sidebar{position:static}
}

/* footer */
.site-foot{background:var(--night);color:var(--ice);padding:34px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand.small .mark{height:26px}
.brand.small .wordmark{font-size:20px}
.handle{color:var(--ice);text-decoration:none;font-weight:700;font-style:italic;font-size:18px}
.handle:hover{color:#fff}

@media (max-width:820px){
  .wrap{padding:0 20px}
  .masthead-inner{flex-direction:column;align-items:flex-start;gap:6px;padding-top:18px;padding-bottom:18px}
  .masthead-curve{display:none}   /* on a phone it runs through the tagline */
  .masthead-right{flex-direction:column;align-items:flex-start;gap:10px}
  .stream-story h2{font-size:31px}
  .related-grid{grid-template-columns:1fr;gap:28px}
  .site-nav .wrap{gap:0 18px}
  .lead{padding:28px 0 36px}
  .lead-inner{grid-template-columns:minmax(0,1fr);gap:22px}
  .lead h2{font-size:36px}
  .card.has-image{grid-template-columns:110px 1fr;gap:16px}
  .card-title{font-size:22px}
  .card-dek{display:none}
  article h1,.category-head h1{font-size:38px}
  .body{font-size:19px}
}

/* menu bar and sidebar in Alegreya Sans too (sizes up a step, since it runs small; bold, as only 400/700 are loaded) */
.site-nav a{font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:.05em}
.sidebar,.sidebar .meta{font-family:var(--head)}
.side-label{font-size:13px;letter-spacing:.12em}
.handle-big{font-size:31px}
.follow .side-text{font-size:16px;line-height:1.4}
.follow-button{font-size:16px}
.side-list .meta{font-size:14px}
.side-cats li{font-size:17px}
.side-cats a{font-weight:700}
.side-cats span{font-size:14px}
/* Alegreya's default numbers sit low like lowercase letters; in lists and counts they should stand full height */
.sidebar,.site-nav{font-variant-numeric:lining-nums}
.side-list li::before{font-size:17px;line-height:1.25}
/* dates and reading times under headlines in Alegreya Sans too, with full-height numbers */
.meta,.byline{font-family:var(--head);font-variant-numeric:lining-nums}
.meta{font-size:15px}
.byline{font-size:15px}

/* "From the tactics board": diagrams from published pieces, each linking to its article */
.board{background:var(--mist);padding:34px 0 40px;border-bottom:1px solid var(--rule)}
.board .section-label{margin-bottom:22px}
.board-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.board-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.board-image{display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--slate);box-shadow:0 1px 0 rgba(31,44,51,.08)}
.board-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.board-card:hover .board-image img{transform:scale(1.03)}
.board-caption{font-family:var(--read);font-size:16px;line-height:1.35;color:var(--ink-soft);margin:12px 0 6px}
.board-title{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.2;color:var(--night);margin-top:auto}
.board-title::after{content:" →";color:var(--rust)}
.board-card:hover .board-title{color:var(--slate)}
@media (max-width:980px){ .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .board-grid{grid-template-columns:minmax(0,1fr)} }

/* diagrams are 16:9, so image frames use 16:9 and never crop the diagram's legend or @tactixology */
.lead-image,.card-image,.related-image{aspect-ratio:16/9}
/* tactics board: captions stop at three lines so the cards line up */
.board-caption{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* tactics board on sand: a very soft version of the rust (#9F5632) */
.board{background:#F5EDE4;border-bottom-color:#E7D9CB}

/* newsletter sign-up: sidebar card, box under articles, and the /subscribe, /confirm, /unsubscribe pages */
.side-card.signup{background:#F5EDE4}
.signup .side-text{font-size:16px;line-height:1.4;color:var(--ink-soft);margin:0 0 12px}
.signup-form{display:flex;flex-direction:column;gap:8px}
.signup-form input[type=email]{font-family:var(--head);font-size:16px;padding:10px 12px;border:1px solid #E0CFBE;border-radius:6px;background:#fff;color:var(--ink);min-width:0}
.signup-form button,.unsubscribe-button{font-family:var(--head);font-weight:700;font-size:16px;background:var(--rust);color:#fff;border:0;border-radius:999px;padding:10px 18px;cursor:pointer}
.signup-form button:hover,.unsubscribe-button:hover{background:#B5633B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup-box{margin-top:48px;background:#F5EDE4;border-radius:8px;padding:26px 28px;max-width:700px}
.signup-box h2{font-family:var(--head);font-size:26px;line-height:1.15;margin:0 0 6px;color:var(--night)}
.signup-box p{font-family:var(--read);font-size:18px;line-height:1.4;color:var(--ink-soft);margin:0 0 14px}
.signup-box .signup-form{flex-direction:row;flex-wrap:wrap}
.signup-box .signup-form input[type=email]{flex:1;min-width:220px}
.message-page{padding-top:70px;padding-bottom:110px;max-width:680px}
.message-page h1{font-family:var(--head);font-size:42px;line-height:1.05;color:var(--night);margin:0 0 12px}
.message-page p{font-family:var(--read);font-size:20px;line-height:1.45;color:var(--ink-soft);margin:0 0 20px}
.message-page .signup-form{max-width:420px}

/* one centred column: no sidebar, fewer divider lines */
.layout{grid-template-columns:minmax(0,1fr);max-width:760px;gap:0}
.article-main article,.stream-story .body{max-width:none}
.section-label{border-bottom:0;padding-bottom:0;margin-bottom:4px}
.board .section-label{margin-bottom:18px}
.related .section-label{margin-bottom:0}
.stream-story{border-bottom:0;padding:26px 0 44px}
.stream-story + .stream-story{border-top:1px solid var(--rule);padding-top:44px}
.byline,.stream-story .byline{border-bottom:0;padding-bottom:0;margin-bottom:28px}
.stream .signup-box{margin-top:12px;max-width:none}
.article-main .signup-box{max-width:none}

/* ===================== preview: bar, sections, match clock, half-time, full time, footer hub, archive ===================== */
.masthead,.site-nav,.site-foot{display:none}
.bar{position:sticky;top:0;z-index:30;background:var(--slate);color:#fff}
.bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.bar .brand .mark{height:30px}
.bar .wordmark{font-size:24px}
.bar-actions{display:flex;align-items:center;gap:20px}
.sections summary{list-style:none;cursor:pointer;font-family:var(--head);font-weight:700;font-size:17px;color:#fff;display:flex;align-items:center;gap:9px;user-select:none}
.sections summary::-webkit-details-marker{display:none}
.sections summary::after{content:"";width:15px;height:11px;background:linear-gradient(#fff,#fff) top/100% 2px no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat,linear-gradient(#fff,#fff) bottom/100% 2px no-repeat}
.sections[open] summary{color:var(--ice)}
.sections-panel{position:absolute;left:0;right:0;top:100%;background:var(--night);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
.sections-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;padding-top:26px;padding-bottom:32px;max-width:760px}
.panel-label{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust-light);margin:0 0 6px}
.panel-link{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--head);font-weight:700;font-size:21px;color:#fff;text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-variant-numeric:lining-nums}
.panel-link span{color:var(--ice);font-weight:400;font-size:15px}
.panel-link:hover{color:var(--ice)}
.bar-signin{font-family:var(--head);font-weight:700;font-size:17px;color:var(--ice);text-decoration:none}
.bar-signin:hover{color:#fff}
.bar-subscribe{font-family:var(--head);font-weight:700;font-size:17px;color:#fff;background:var(--rust);border-radius:999px;padding:7px 17px;text-decoration:none}
.bar-subscribe:hover{background:#B5633B}

/* match clock */
.clock{position:relative;height:3px;background:rgba(255,255,255,.14)}
.clock-fill{position:absolute;inset:0;background:var(--rust-light);transform-origin:left;transform:scaleX(0)}
.clock-minute{position:absolute;right:18px;top:8px;font-family:var(--head);font-weight:700;font-size:14px;line-height:1.4;color:var(--night);background:#fff;border:1px solid var(--rule);border-radius:999px;padding:1px 9px;font-variant-numeric:lining-nums tabular-nums;box-shadow:0 3px 10px rgba(31,44,51,.14)}

/* one column for articles and the archive */
.column{max-width:760px;padding-top:52px;padding-bottom:70px}

/* half-time and full time labels */
.ht-whistle,.ft-whistle{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);margin:0 0 8px;font-variant-numeric:lining-nums}
.ht-whistle span,.ft-whistle span{display:inline-block;background:var(--rust);color:#fff;border-radius:4px;padding:1px 7px;margin-right:9px;letter-spacing:0}

/* half-time */
.halftime{background:#F5EDE4;border-radius:10px;padding:22px 24px;margin:8px 0 40px}
.ht-text{font-family:var(--read);font-size:20px;line-height:1.35;color:var(--ink);margin:0 0 12px}
.halftime .signup-form,.ft-signup .signup-form{flex-direction:row;flex-wrap:wrap}
.halftime .signup-form input[type=email],.ft-signup .signup-form input[type=email]{flex:1;min-width:190px}

/* full time */
.fulltime{margin-top:56px;border-top:3px solid var(--night);padding-top:22px}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:6px}
.ft-grid.single{grid-template-columns:minmax(0,1fr)}
.ft-signup{background:#F5EDE4;border-radius:10px;padding:22px 24px;align-self:start}
.ft-signup h2{font-family:var(--head);font-size:27px;line-height:1.08;color:var(--night);margin:0 0 6px}
.ft-signup p{font-family:var(--read);font-size:17px;line-height:1.4;color:var(--ink-soft);margin:0 0 14px}
.ft-next{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ft-label{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.ft-image{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--slate);margin-bottom:10px}
.ft-image img{width:100%;height:100%;object-fit:cover}
.ft-image .mark{height:42px;width:auto;fill:var(--rust)}
.ft-next .kicker{margin-bottom:4px}
.ft-title{font-family:var(--head);font-weight:700;font-size:23px;line-height:1.12;color:var(--night);margin-bottom:4px}
.ft-next:hover .ft-title{color:var(--slate)}
.ft-share{font-family:var(--head);font-size:17px;color:var(--ink-soft);margin:24px 0 0}
.ft-share a{color:var(--rust);font-weight:700;text-decoration:none}

/* footer hub */
.hub{background:var(--night);color:var(--ice);padding:50px 0 64px}
.hub-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,.7fr);gap:44px}
.hub h2{font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust-light);margin:22px 0 10px}
.hub-news p{font-family:var(--read);font-size:17px;line-height:1.4;color:var(--ice);margin:0 0 12px}
.hub .signup-form input[type=email]{border-color:transparent}
.hub-last ol{list-style:none;margin:0;padding:0;counter-reset:n}
.hub-last li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);font-variant-numeric:lining-nums}
.hub-last li::before{counter-increment:n;content:counter(n);font-family:var(--head);font-weight:700;color:var(--rust-light)}
.hub-last a{font-family:var(--head);font-weight:700;font-size:16px;line-height:1.25;color:#fff;text-decoration:none}
.hub-last a:hover{color:var(--ice)}
.hub-last span{font-family:var(--head);font-size:13px;color:rgba(191,221,244,.7);white-space:nowrap}
.hub-links a{display:block;font-family:var(--head);font-weight:700;font-size:17px;color:#fff;text-decoration:none;padding:5px 0}
.hub-links a:hover{color:var(--ice)}
.hub-links .hub-handle{font-style:italic;font-size:23px}

/* archive */
.archive h1{font-family:var(--head);font-size:50px;line-height:1.02;color:var(--night);margin:0 0 4px}
.archive-count{font-family:var(--head);font-size:17px;color:var(--ink-soft);margin:0 0 18px;font-variant-numeric:lining-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chips a{font-family:var(--head);font-weight:700;font-size:15px;text-decoration:none;color:var(--ink);background:var(--mist);border-radius:999px;padding:6px 14px}
.chips a.on{background:var(--night);color:#fff}
.archive-month h2{font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);margin:28px 0 2px}
.archive-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;font-variant-numeric:lining-nums}
.archive-date{font-family:var(--head);font-size:15px;color:var(--ink-soft)}
.archive-title{font-family:var(--head);font-weight:700;font-size:21px;line-height:1.18;color:var(--night)}
.archive-row:hover .archive-title{color:var(--slate)}
.archive-meta{font-family:var(--head);font-size:15px;color:var(--ink-soft);white-space:nowrap}
.more-link{display:inline-block;margin-top:22px;font-family:var(--head);font-weight:700;font-size:18px;color:var(--rust);text-decoration:none}

@media (max-width:820px){
  .bar-inner{height:56px}
  .bar .wordmark{font-size:21px}
  .bar .brand .mark{height:26px}
  .bar-signin{display:none}
  .bar-actions{gap:14px}
  .sections summary{font-size:16px}
  .sections-panel{position:fixed;top:56px;bottom:0;overflow-y:auto}
  .has-clock .sections-panel{top:59px}
  .sections-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .clock-minute{right:12px}
  .ft-grid,.hub-grid{grid-template-columns:minmax(0,1fr)}
  .hub-grid{gap:8px}
  .archive h1{font-size:40px}
  .archive-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .column{padding-top:34px}
}

/* ===================== preview: deep header (desktop) ===================== */
.masthead-deep{background:var(--slate);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.deep-inner{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,1.05fr);gap:36px;padding-top:34px;padding-bottom:36px;align-items:start}
.deep-brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:#fff}
.deep-brand .mark{height:60px;width:auto;fill:var(--rust)}
.deep-brand .wordmark{font-size:42px;letter-spacing:-.015em}
.deep-dateline{font-family:var(--head);font-size:16px;color:var(--ice);margin:12px 0 0;font-variant-numeric:lining-nums}
.deep-label{font-family:var(--head);font-weight:700;font-size:18px;color:#fff;margin:2px 0 8px}
.deep-col a{display:block;font-family:var(--head);font-size:16px;line-height:1.35;color:var(--ice);text-decoration:none;padding:3px 0}
.deep-col a:hover{color:#fff}
.deep-card{background:#F5EDE4;border-radius:10px;padding:18px 20px 16px;color:var(--night)}
.deep-card-title{font-family:var(--head);font-weight:700;font-size:21px;line-height:1.1;margin:0 0 12px;color:var(--night)}
.deep-card-title em{color:var(--rust)}
.deep-buttons{display:flex;gap:8px;margin-bottom:10px}
.deep-card .bar-subscribe{font-size:15px;padding:6px 15px}
.deep-login{font-family:var(--head);font-weight:700;font-size:15px;color:var(--night);border:1.5px solid var(--night);border-radius:999px;padding:5px 14px;text-decoration:none}
.deep-login:hover{background:var(--night);color:#fff}
.deep-more{display:block;font-family:var(--head);font-size:15px;color:var(--ink-soft);text-decoration:none}
.deep-more:hover{color:var(--rust)}
/* desktop: the compact bar slides in from the top once the deep header has scrolled away */
@media (min-width:821px){
  .bar{position:fixed;left:0;right:0;top:0;transform:translateY(-110%);transition:transform .25s ease;box-shadow:0 6px 18px -10px rgba(0,0,0,.45)}
  body.past-header .bar{transform:none}
}
/* phones: no deep header, the compact bar as before */
@media (max-width:820px){
  .masthead-deep{display:none}
}
/* while the compact bar is tucked away on desktop, take the match clock's minute bubble with it */
@media (min-width:821px){
  .bar{transform:translateY(calc(-100% - 44px))}
  body.past-header .bar{transform:none}
}

/* shallower deep header: less padding, smaller logo, Read links in two short columns, upright "Members" */
.deep-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1fr);gap:32px;padding-top:20px;padding-bottom:22px;align-items:center}
.deep-brand .mark{height:44px}
.deep-brand .wordmark{font-size:34px}
.deep-col{align-self:start}
.deep-label{font-size:16px;margin:0 0 4px}
.deep-links{display:grid;grid-template-columns:repeat(2,max-content);column-gap:26px}
.deep-col a{font-size:15px;padding:2px 0}
.deep-card{padding:14px 18px}
.deep-card-title{font-size:19px;margin-bottom:10px}
.deep-card-title span{color:var(--rust)}
.deep-more{display:none}

/* deep header, re-aligned: logo, two three-link columns and the Plus card on one centre line */
.deep-inner{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;gap:0 48px;align-items:center;padding-top:24px;padding-bottom:24px}
.deep-brand{margin-right:40px}
.deep-col,.deep-card{align-self:center}
.deep-label{font-size:15px;line-height:1.3;margin:0 0 4px}
.deep-col a{display:block;font-size:15px;line-height:1.55;padding:0}
.deep-card{min-width:260px;padding:16px 20px}
.deep-card-title{font-size:20px;color:var(--night);margin:0 0 10px}
.deep-card-title i{font-style:italic;font-weight:700;color:inherit}

/* sections and topics pages */
.section-block{margin-top:30px}
.section-block h2{font-family:var(--head);font-size:26px;line-height:1.1;margin:0 0 4px;color:var(--night)}
.section-block h2 a{color:inherit;text-decoration:none}
.section-block h2 a:hover{color:var(--slate)}
.section-block h2 span{font-size:15px;font-weight:400;color:var(--ink-soft);font-variant-numeric:lining-nums}
.topic-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.topic-cloud a{font-family:var(--head);font-weight:700;font-size:17px;text-decoration:none;color:var(--night);background:var(--mist);border-radius:999px;padding:7px 15px;font-variant-numeric:lining-nums}
.topic-cloud a span{font-weight:400;color:var(--ink-soft);margin-left:4px}
.topic-cloud a:hover{background:#F5EDE4}

/* header: logo top-aligned with READ / FOLLOW, compact columns, rust labels; the Plus card on the right */
.deep-inner{display:flex;align-items:flex-start;gap:44px}
.deep-brand{margin:0 16px 0 0;position:relative;top:-2px}
.deep-col{align-self:flex-start}
.deep-card{margin-left:auto;align-self:center}
.deep-label{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust-light);line-height:1.2;margin:4px 0 6px}
.deep-col a{font-size:15px;line-height:1.4}

/* lead story: rust kicker, tighter standfirst */
.lead .kicker{color:var(--rust-light)}
.lead .dek{line-height:1.3}
/* logo, READ / FOLLOW block and the Plus card all centred on one line */
.deep-inner{align-items:center}
.deep-brand{top:0}
.deep-col,.deep-card{align-self:center}
.deep-label{margin-top:0}

/* comparison page for header options (preview only) */
.options-page{background:#E8EAEE;padding-bottom:40px}
.variant-label{font-family:var(--head);font-weight:700;font-size:16px;color:var(--night);margin:0;padding:22px 32px 10px}
/* B and C: logo on the left, Read / Follow / Plus together on the right */
.v-b .deep-brand,.v-c .deep-brand{margin-right:auto}
.v-b .deep-card,.v-c .deep-card{margin-left:4px}
.v-b .deep-inner,.v-c .deep-inner{gap:40px}
.v-b .deep-brand .mark{height:56px}
.v-b .deep-brand .wordmark{font-size:44px}
.v-c .deep-inner{padding-top:30px;padding-bottom:30px}
.v-c .deep-brand .mark{height:74px}
.v-c .deep-brand .wordmark{font-size:58px}
.v-c .deep-brand{gap:20px}

/* header option B, on every page: bigger logo on the left; Read, Follow and the Plus card grouped on the right */
.masthead-deep .deep-inner{gap:40px}
.masthead-deep .deep-brand{margin-right:auto}
.masthead-deep .deep-card{margin-left:4px}
.masthead-deep .deep-brand .mark{height:56px}
.masthead-deep .deep-brand .wordmark{font-size:44px}

/* raise the logo so it lines up with Read / Follow and the Plus card */
.masthead-deep .deep-brand{top:-8px}

/* compact logo: the rust mark as tall as the capital letters, sitting on the same baseline as the wordmark */
.brand,.deep-brand{align-items:baseline}
.masthead-deep .deep-brand{gap:11px}
.masthead-deep .deep-brand .mark{height:32px}          /* wordmark 44px */
.bar .brand{gap:8px}
.bar .brand .mark{height:17px}                         /* wordmark 24px */
.hub .brand{gap:9px}
.hub .brand .mark{height:19px}                         /* wordmark 26px */
@media (max-width:820px){ .bar .brand .mark{height:15px} }   /* wordmark 21px on phones */

/* logo mark spans the wordmark's full height: from the top of T and l down to the bottom of g and y
   (measured: the lettering reaches 0.714em above the baseline and 0.195em below it) */
.masthead-deep .deep-brand .mark{height:40px;position:relative;top:9px}   /* wordmark 44px */
.bar .brand .mark{height:22px;position:relative;top:5px}                 /* wordmark 24px */
.hub .brand .mark{height:24px;position:relative;top:5px}                 /* wordmark 26px */
@media (max-width:820px){ .bar .brand .mark{height:19px;top:4px} }       /* wordmark 21px on phones */

/* logo mark rises slightly above the T; its bottom stays level with the bottom of g and y */
.masthead-deep .deep-brand .mark{height:45px}   /* wordmark 44px */
.bar .brand .mark{height:25px}                  /* wordmark 24px */
.hub .brand .mark{height:27px}                  /* wordmark 26px */
@media (max-width:820px){ .bar .brand .mark{height:21px} }

/* raise the logo in the desktop header so the lettering reads level with Read / Follow and the Plus box */
.masthead-deep .deep-brand{top:-14px}

/* centre the logo lettering on the READ / FOLLOW labels */
.masthead-deep .deep-brand{top:-36px}

/* top of the logo lettering level with the top of READ / FOLLOW */
.masthead-deep .deep-brand{top:-24px}

/* Alegreya Sans Medium, for the big headlines */
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/alegreya-sans-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/alegreya-sans-500-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}
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/alegreya-sans-500-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/alegreya-sans-500-italic-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}
.lead h2,article h1,.stream-story h2,.category-head h1,.archive h1,.message-page h1{font-weight:500}

/* YouTube embeds */
figure.video{margin:26px 0}
.video-frame{position:relative;aspect-ratio:16/9;background:var(--night);border-radius:8px;overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* homepage: the opening of a piece, then "Show full article" */
.stream-story .story-more{margin-top:0}
.show-full{display:inline-block;margin:18px 0 4px;font-family:var(--head);font-weight:700;font-size:16px;color:var(--rust);background:none;border:1.5px solid var(--rust);border-radius:999px;padding:8px 18px;cursor:pointer}
.show-full:hover{background:var(--rust);color:#fff}

/* one font across the site: the captions under pictures were still Helvetica.
   Only the wordmark stays Helvetica Neue bold italic. */
:root{--ui:"Alegreya Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
.wordmark{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.body figcaption{font-family:var(--head);font-size:15px}

/* the opening of a piece fades out, with the button centred under it */
.stream-story.trimmed .body{position:relative}
.stream-story.trimmed .body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper) 88%);pointer-events:none}
.show-wrap{margin:0;text-align:center}
.show-full{display:inline-block;margin:6px auto 4px}

/* the button sits right under the text it opens */
.stream-story.trimmed .body{padding-bottom:0}
.stream-story.trimmed .body::after{height:96px}
.show-wrap{margin:-6px 0 0}
.show-full{margin:0}
.stream-story{padding-bottom:30px}

/* ---- tidy-up ---- */

/* no block in front of the category label */
.kicker::before{content:none}

/* the footer matches the header */
.hub{background:var(--slate)}
.hub-last li{border-bottom-color:rgba(255,255,255,.12)}

/* one button: filled for the main action, outlined for the second, same shape everywhere */
.bar-subscribe,.signup-form button,.unsubscribe-button,.follow-button,.deep-login,.show-full,.masthead-follow{
  font-family:var(--head);font-weight:700;font-style:normal;font-size:16px;line-height:1.2;
  display:inline-block;padding:9px 18px;border:1.5px solid transparent;border-radius:999px;
  text-decoration:none;cursor:pointer}
.bar-subscribe,.signup-form button,.unsubscribe-button,.follow-button{background:var(--rust);border-color:var(--rust);color:#fff}
.bar-subscribe:hover,.signup-form button:hover,.unsubscribe-button:hover,.follow-button:hover{background:#B5633B;border-color:#B5633B;color:#fff}
.deep-login,.show-full{background:none;border-color:var(--rust);color:var(--rust)}
.deep-login:hover,.show-full:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.masthead-follow{background:none;border-color:var(--rust-light);color:#fff}
.masthead-follow:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.bar .bar-subscribe{font-size:15px;padding:7px 16px}

/* the button sits close under the text it opens */
.stream-story.trimmed .body::after{height:70px}
.stream-story.trimmed .body>*:last-child{margin-bottom:0}
.show-wrap{margin:10px 0 0}

/* headlines all underline in rust on hover */
.lead h2 a:hover,.stream-story h2 a:hover,.card:hover .card-title,.related-card:hover .related-title,
.board-card:hover .board-title,.archive-row:hover .archive-title,.section-block h2 a:hover,
.side-list a:hover,.ft-next:hover .ft-title,.hub-last a:hover,.hub-links a:hover,.panel-link:hover,.more-link:hover{
  text-decoration:underline;text-decoration-color:var(--rust-light);text-decoration-thickness:3px;text-underline-offset:6px}
.stream-story h2 a:hover,.card:hover .card-title,.related-card:hover .related-title,
.board-card:hover .board-title,.archive-row:hover .archive-title,.section-block h2 a:hover,
.side-list a:hover,.ft-next:hover .ft-title{color:var(--night)}
.hub-last a:hover,.hub-links a:hover,.panel-link:hover{color:#fff}

/* pictures stay still */
.lead-image:hover img,.board-card:hover .board-image img,.card:hover .card-image img{transform:none}

/* the two buttons in the Plus box are the same size and sit on the same line */
.deep-buttons{align-items:center}
.deep-card .bar-subscribe,.deep-card .deep-login{font-size:15px;line-height:1.2;padding:8px 16px;border-width:1.5px}

/* headlines warm towards rust on hover instead of underlining */
.lead h2 a:hover,.stream-story h2 a:hover,.card:hover .card-title,.related-card:hover .related-title,
.board-card:hover .board-title,.archive-row:hover .archive-title,.section-block h2 a:hover,
.side-list a:hover,.ft-next:hover .ft-title,.hub-last a:hover,.hub-links a:hover,.panel-link:hover,.more-link:hover{
  text-decoration:none}
.stream-story h2 a:hover,.card:hover .card-title,.related-card:hover .related-title,
.board-card:hover .board-title,.archive-row:hover .archive-title,.section-block h2 a:hover,
.side-list a:hover,.ft-next:hover .ft-title{color:#6E4632}
.lead h2 a:hover{color:#F0C4A8}
.hub-last a:hover,.hub-links a:hover,.panel-link:hover{color:var(--rust-light)}

/* the diagrams are portrait now: keep them a sensible height, and let the tactics board show them whole */
.body figure img{max-height:min(86vh,900px);width:auto;max-width:100%;margin:0 auto;display:block}
.board-image{aspect-ratio:4/5}
.board-image img{object-fit:cover;object-position:top}

/* the tactics board fits itself to each diagram: portrait for new ones, wide for older ones */
.board-image.tall{aspect-ratio:4/5}
.board-image.wide{aspect-ratio:16/9}
.board-image img{object-fit:cover;object-position:top}

/* on a phone the tactics board becomes a swipe: one diagram, with the next one peeking in */
@media (max-width:640px){
  .board-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 -20px;padding:0 20px 4px;scroll-padding-left:20px}
  .board-grid::-webkit-scrollbar{display:none}
  .board-card{flex:0 0 60%;scroll-snap-align:start}
  .board-caption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .board-card:last-child{padding-right:20px;box-sizing:content-box}
}

/* the tactics board titles stand on their own, without the arrow */
.board-title::after{content:none}

/* the Plus box: a soft dark panel on the slate header, instead of the sand block */
.deep-card{background:rgba(31,44,51,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.deep-card-title{color:#fff}
.deep-card-title em{color:var(--rust-light)}
.deep-card .deep-login{border-color:rgba(191,221,244,.8);color:var(--ice)}
.deep-card .deep-login:hover{background:var(--ice);border-color:var(--ice);color:var(--night)}

/* one softer dark for every dark panel: the same tone the Plus box shows over the slate */
:root{--dusk:#34454D}
.sections-panel{background:var(--dusk)}
.site-foot{background:var(--dusk)}
.deep-card{background:var(--dusk)}
.chips a.on{background:var(--dusk)}
.video-frame{background:var(--dusk)}

/* "Legendary articles": same cards as the tactics board, portrait, headline before the standfirst */
.legends .board-image{aspect-ratio:4/5}
.legends .board-image img{object-fit:cover;object-position:center}
.legends .board-title{margin-top:12px}
.legends .board-caption{margin:6px 0 0}

/* the Daily Update: posts on X shown as cards, your own words quoted, the reading list at the end */
.body figure.post-card{margin:24px 0;padding:16px 18px;background:var(--mist);border-radius:10px}
.body .post-card blockquote{margin:0;padding:0;border:0;font-family:var(--read);font-size:17px;line-height:1.45;color:var(--ink);font-style:normal}
.body .post-card figcaption{margin-top:9px;font-family:var(--head);font-size:14px;font-weight:700;color:var(--rust)}
.body blockquote.self-quote{border-left:4px solid var(--rust);background:#FBF7F2;padding:14px 18px;border-radius:0 8px 8px 0;font-style:italic}
.body blockquote.self-quote cite{display:block;margin-top:8px;font-family:var(--head);font-size:14px;font-style:normal;color:var(--ink-soft)}
.body ul.read-more{list-style:none;padding:0;margin:8px 0 0}
.body ul.read-more li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.4}
.body ul.read-more li span{font-family:var(--head);font-size:14px;color:var(--ink-soft)}
.body p.quote-source{margin-top:-6px;font-family:var(--head);font-size:14px;color:var(--ink-soft)}

/* the Daily Update: greeting, sign-off, and a clean reading list */
.body p.daily-open{font-size:20px;line-height:1.45}
.body p.daily-sign{margin-top:26px;color:var(--ink-soft)}
.body ul.read-more li{border-bottom:0;padding:6px 0;font-size:20px;line-height:1.4}
.body ul.read-more li span{font-family:var(--read);font-size:20px;color:var(--ink-soft)}

/* quotes in the Daily Update: upright, not italic, and someone else's piece gets its own card */
.body blockquote.self-quote{font-style:normal}
.body figure.source-quote{margin:24px 0;padding:16px 20px;background:var(--mist);border-left:4px solid var(--slate);border-radius:0 8px 8px 0}
.body .source-quote blockquote{margin:0;padding:0;border:0;font-family:var(--read);font-size:19px;line-height:1.45;font-style:normal;color:var(--ink)}
.body .source-quote figcaption{margin-top:9px;font-family:var(--head);font-size:14px;color:var(--ink-soft)}

/* one quote style: the same block whether the words are yours or someone else's.
   Who is speaking is said in the sentence above, or in the line underneath. */
.body blockquote.self-quote,
.body figure.source-quote,
.body figure.post-card{
  margin:24px 0;padding:16px 20px;background:var(--mist);
  border-left:4px solid var(--rust);border-radius:0 8px 8px 0}
.body blockquote.self-quote,
.body .source-quote blockquote,
.body .post-card blockquote{
  font-family:var(--read);font-size:19px;line-height:1.45;font-style:normal;color:var(--ink)}
.body .source-quote figcaption,
.body .post-card figcaption{
  margin-top:9px;font-family:var(--head);font-size:14px;font-weight:400;color:var(--ink-soft)}
.body .source-quote figcaption a,
.body .post-card figcaption a{color:var(--rust)}

/* one quote block, on sand, with no attribution inside it */
.body blockquote.quote-block,
.body blockquote.self-quote,
.body figure.source-quote,
.body figure.post-card{
  margin:24px 0;padding:16px 20px;background:#F5EDE4;
  border-left:4px solid var(--rust);border-radius:0 8px 8px 0;
  font-family:var(--read);font-size:19px;line-height:1.45;font-style:normal;color:var(--ink)}
.body figure.source-quote figcaption,.body figure.post-card figcaption{display:none}

/* the Daily Update box: this morning's update, and the last few before it */
.daily-box{background:var(--slate);color:#fff;padding:36px 0 40px}
.daily-inner{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:44px;align-items:start}
.daily-label{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rust-light);margin:0 0 10px}
.daily-label span{color:rgba(255,255,255,.55);margin-left:10px;letter-spacing:.06em}
.daily-main h2{font-family:var(--head);font-weight:500;font-size:34px;line-height:1.1;margin:0 0 10px}
.daily-main h2 a{color:#fff;text-decoration:none}
.daily-main h2 a:hover{color:var(--ice)}
.daily-standfirst{font-size:19px;line-height:1.4;color:rgba(255,255,255,.82);margin:0 0 14px}
.daily-subjects{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:8px}
.daily-subjects li{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:baseline;border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
.daily-subjects li::before{counter-increment:s;content:counter(s);font-family:var(--head);font-weight:700;font-size:13px;color:var(--rust-light)}
.daily-subjects a{font-family:var(--head);font-weight:700;font-size:17px;line-height:1.25;color:#fff;text-decoration:none}
.daily-subjects a:hover{color:var(--ice)}
.daily-earlier{list-style:none;margin:0 0 14px;padding:0}
.daily-earlier li{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.daily-earlier a{font-family:var(--head);font-weight:700;font-size:15px;line-height:1.25;color:#fff;text-decoration:none}
.daily-earlier a:hover{color:var(--ice)}
.daily-earlier span{font-family:var(--head);font-size:13px;color:rgba(191,221,244,.7);white-space:nowrap}
.daily-box .more-link{color:var(--rust-light)}
@media (max-width:820px){ .daily-inner{grid-template-columns:1fr;gap:26px} .daily-main h2{font-size:28px} }

/* the Daily Update box stays shallow: the label, the headline, and the last few updates */
.daily-box{padding:22px 0 24px}
.daily-inner{align-items:center;gap:40px}
.daily-main h2{font-size:30px;margin:0}
.daily-label{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.daily-label a{color:rgba(255,255,255,.6);text-decoration:none;font-size:12px}
.daily-label a:hover{color:#fff}
.daily-earlier{margin:0}
.daily-earlier li{padding:5px 0}
.daily-earlier li:last-child{border-bottom:0}

/* the Daily Update box sits on sand, so the top of the page is not one block of slate */
.daily-box{background:#F5EDE4;color:var(--ink)}
.daily-box .daily-label{color:var(--rust)}
.daily-box .daily-label span{color:var(--ink-soft)}
.daily-box .daily-label a{color:var(--ink-soft)}
.daily-box .daily-label a:hover{color:var(--rust)}
.daily-main h2 a{color:var(--night)}
.daily-main h2 a:hover{color:#6E4632}
.daily-earlier li{border-bottom-color:rgba(31,44,51,.12)}
.daily-earlier a{color:var(--night)}
.daily-earlier a:hover{color:#6E4632}
.daily-earlier span{color:var(--ink-soft)}
.daily-box .more-link{color:var(--rust)}
/* the archive band now sits inside the river, so it needs air above and below */
.legends{margin:10px 0 6px}

/* one rust: headlines warm into the same tone the kickers are set in */
.stream-story h2 a:hover,.card:hover .card-title,.related-card:hover .related-title,
.board-card:hover .board-title,.archive-row:hover .archive-title,.section-block h2 a:hover,
.side-list a:hover,.ft-next:hover .ft-title,
.daily-main h2 a:hover,.daily-earlier a:hover{color:var(--rust)}

/* Legendary articles keep their full cards; they sit in the middle of the river, after half-time */
.legends{margin:10px 0 6px}

/* the two halves of the daily strip start on the same line */
.daily-inner{align-items:start}
.daily-box .daily-label{margin:0 0 8px;line-height:1.2;min-height:16px}
.daily-main h2{margin-top:0}
.daily-earlier li:first-child{padding-top:0}

/* today and the classics share one sand band: the daily strip, a hairline, then the four cards */
.daily-box + .legends{margin:0;padding:0 0 36px;border-top:0}
.daily-box + .legends > .wrap{border-top:1px solid rgba(31,44,51,.12);padding-top:22px}
.daily-box{padding-bottom:22px}

/* Legendary articles: one line of standfirst under each headline */
.legends .board-caption{-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

/* Legendary articles: picture and headline only */
.legends .board-caption{display:none}
.legends .board-title{margin-top:10px}

/* the daily strip uses the lead story's columns: the headline is as wide as the photo above it,
   and the earlier updates line up with the lead's text */
.daily-inner{grid-template-columns:1.1fr 1fr;gap:44px}
@media (max-width:820px){ .daily-inner{grid-template-columns:minmax(0,1fr);gap:22px} }

/* Posts of note: its label in rust, like the daily strip's */
.daily-box + .legends .section-label{color:var(--rust)}

/* the header uses the lead story's columns too: the logo over the photo,
   Read and Follow starting where the lead's text starts, the Plus box at the right edge */
.masthead-deep .deep-inner{display:grid;grid-template-columns:1.1fr 1fr;column-gap:44px;align-items:center}
.masthead-deep .deep-brand{margin-right:0;justify-self:start}
.masthead-deep .deep-right{display:flex;align-items:center;gap:40px;min-width:0}
.masthead-deep .deep-right .deep-card{margin-left:auto}
/* on narrower laptops the three right-hand items share that column without spilling past the edge */
.masthead-deep .deep-right{gap:28px}
.masthead-deep .deep-right .deep-card{min-width:0;flex:0 1 auto}
@media (max-width:1100px){ .masthead-deep .deep-right{gap:22px} .masthead-deep .deep-card{padding:12px 14px} .masthead-deep .deep-card .deep-buttons{gap:6px} }

/* one size for every small capital label on the site: kickers, section labels, the header's Read and Follow,
   the daily strip, half-time, full time and the footer headings */
.kicker,.section-label,.daily-label,.deep-label,.panel-label,.ft-label,.hub h2,.archive-month h2,.ht-whistle,.ft-whistle,.daily-box .daily-label a{
  font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.2}

/* the daily strip a shade deeper than the sand below it, so the two read as a pair rather than one block */
.daily-box{background:#EFE3D5}
.daily-box + .legends > .wrap{border-top:0;padding-top:26px}

/* half-time sits with the same breathing room above and below it */
.halftime{margin-bottom:12px}

/* under an article: sharing, the same newsletter box as the homepage, then a quiet list of related pieces */
article + .ft-share,.column > .ft-share{margin:34px 0 22px;padding-top:18px;border-top:1px solid var(--rule)}
.column > .halftime{margin:0 0 44px}
.read-next{margin:0 0 60px}
.read-next .section-label{color:var(--rust);margin-bottom:6px}
.read-next ul{list-style:none;margin:0;padding:0}
.read-next li{border-bottom:1px solid var(--rule)}
.read-next li:last-child{border-bottom:0}
.read-next a{display:block;padding:18px 0;text-decoration:none;color:inherit}
.read-next .kicker{margin:0 0 5px}
.rn-title{display:block;font-family:var(--head);font-weight:500;font-size:24px;line-height:1.15;color:var(--night)}
.rn-dek{display:block;margin-top:6px;font-family:var(--read);font-size:17px;line-height:1.4;color:var(--ink-soft)}
.read-next a:hover .rn-title{color:var(--rust)}

/* sharing: two outlined buttons in the house style, under the article */
.ft-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:34px 0 22px;padding-top:20px;border-top:1px solid var(--rule)}
.share-label{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
.share-button{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:15px;line-height:1.2;
  padding:8px 16px;border:1.5px solid var(--rust);border-radius:999px;color:var(--rust);text-decoration:none;background:none;cursor:pointer}
.share-button:hover,.share-button.copied{background:var(--rust);color:#fff}
.share-icon{width:15px;height:15px;flex:0 0 15px}

/* a little more room above and below the daily strip */
.daily-box{padding:32px 0 34px}

/* the date in the daily strip is set like every other date on the site: plain, not in capitals */
.daily-box .daily-label span{font-family:var(--head);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-left:10px;font-variant-numeric:lining-nums}

/* on a phone the strip shows today's update only */
@media (max-width:820px){ .daily-box .daily-side{display:none} }

/* the date sits right beside the label, not across the strip from it */
.daily-box .daily-label{gap:0}
.daily-box .daily-label span{margin-left:9px}

/* /topics: the archive by subject */
.topics-page{padding-top:44px;padding-bottom:70px}
.topics-page h1{font-family:var(--head);font-weight:500;font-size:50px;line-height:1.02;color:var(--night);margin:0 0 10px}
.topics-intro{font-family:var(--read);font-size:20px;line-height:1.4;color:var(--ink-soft);max-width:640px;margin:0 0 40px}
.topic-group{margin:0 0 44px}
.topic-group .section-label{color:var(--rust);margin-bottom:14px}
.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.topic-card{display:flex;flex-direction:column;gap:5px;padding:18px 20px;background:#F5EDE4;border-radius:10px;text-decoration:none;color:inherit}
.topic-name{font-family:var(--head);font-weight:500;font-size:22px;line-height:1.15;color:var(--night)}
.topic-when{font-family:var(--head);font-size:14px;color:var(--rust)}
.topic-blurb{font-family:var(--read);font-size:16px;line-height:1.38;color:var(--ink-soft)}
.topic-count{margin-top:auto;padding-top:6px;font-family:var(--head);font-size:13px;color:var(--ink-soft)}
.topic-card:hover .topic-name{color:var(--rust)}
@media (max-width:900px){ .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .topic-grid{grid-template-columns:1fr} .topics-page h1{font-size:40px} }

/* /t/<subject>: what has been argued, then the posts, then neighbouring subjects */
.topic-page{padding-top:44px;padding-bottom:60px}
.topic-page h1{font-family:var(--head);font-weight:500;font-size:50px;line-height:1.04;color:var(--night);margin:0 0 10px}
.topic-summary{margin:20px 0 40px}
.topic-related{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.topic-related .section-label{flex-basis:100%;color:var(--rust);margin-bottom:6px}
.topic-related a{font-family:var(--head);font-weight:700;font-size:15px;color:var(--night);background:#F5EDE4;border-radius:999px;padding:7px 15px;text-decoration:none}
.topic-related a:hover{color:var(--rust)}

/* the CMS sign-in and first-password pages */
.account-form{display:grid;gap:14px;max-width:380px;margin:18px 0 0}
.account-form label{display:grid;gap:6px;font-family:var(--head);font-size:15px;font-weight:700;color:var(--night)}
.account-form input{font:inherit;font-weight:400;font-size:17px;padding:10px 12px;border:1px solid #E0CFBE;border-radius:6px;background:#fff;color:var(--ink)}
.account-form button{justify-self:start}
.account-error{margin:14px 0 0;padding:10px 14px;background:#F9E3DA;border-left:3px solid var(--rust);border-radius:0 6px 6px 0;font-family:var(--head);font-size:15px;color:var(--night)}

/* ------------------------------ Tactixology Plus ------------------------------ */
.plus-join,.plan-join{display:inline-block;font-family:var(--head);font-weight:700;font-size:16px;line-height:1.2;background:var(--rust);color:#fff;border:1.5px solid var(--rust);border-radius:999px;padding:10px 22px;text-decoration:none;cursor:pointer}
.plus-join:hover,.plan-join:hover{background:#8A4A2B;border-color:#8A4A2B;color:#fff}
.plus-signin{font-family:var(--head);font-size:16px;color:var(--rust)}
.plus-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.plus-small{font-family:var(--head);font-size:16px;color:var(--ink-soft);margin:14px 0 0}
.plus-small a{color:var(--rust)}
.plus-note{font-family:var(--head);font-size:18px;background:#F5EDE4;border-radius:8px;padding:14px 18px;color:var(--night)}
.plus-note a{color:var(--rust)}

/* where a members-only post stops */
.plus-gate{margin:8px 0 34px;padding:26px 28px;background:#F5EDE4;border-radius:10px;border-top:4px solid var(--rust)}
.plus-gate h2{font-family:var(--head);font-weight:500;font-size:30px;line-height:1.1;color:var(--night);margin:0 0 10px}
.plus-gate p{font-family:var(--read);font-size:19px;line-height:1.4;margin:0 0 18px}
.plus-gate .plus-actions{margin:0}
article .body:has(+ .plus-gate){position:relative}
article .body:has(+ .plus-gate)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(255,255,255,0),#fff)}

/* the Plus page: one clear offer, then what's in it */
.plus-page{padding-top:54px;padding-bottom:90px}
.plus-offer{text-align:center;padding-bottom:40px}
.plus-lockup{display:inline-flex;align-items:center;gap:12px;margin:0 0 26px}
.plus-lockup .mark{height:40px;width:auto;fill:var(--rust)}
.plus-lockup .wordmark{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-style:italic;font-size:34px;letter-spacing:-.01em;color:var(--night)}
.plus-lockup .plus-word{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-style:italic;font-size:34px;letter-spacing:-.01em;color:var(--rust);margin-left:-4px}
.plus-headline{font-family:var(--head);font-weight:700;font-size:22px;color:var(--night);margin:0 0 14px}
.plus-line{font-family:var(--head);font-size:18px;color:var(--ink);margin:0 0 14px}
.plus-line a,.plus-intro a{color:var(--night);font-weight:700;text-decoration-color:var(--rust);text-underline-offset:3px}
.plus-soft{color:var(--ink-soft)}
.plus-price{font-family:var(--head);font-size:19px;color:var(--ink);margin:0 0 16px}
.plus-price b{font-weight:700;color:var(--night)}
.plus-price i{color:var(--ink-soft)}
.plus-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0}
.plus-button{font-family:var(--head);font-weight:700;font-size:17px;line-height:1.2;padding:12px 24px;border-radius:6px;border:1.5px solid var(--night);background:var(--night);color:#fff;cursor:pointer}
.plus-button:hover{background:var(--dusk,#34454D);border-color:var(--dusk,#34454D)}
.plus-button-quiet{background:#fff;color:var(--night)}
.plus-button-quiet:hover{background:#F5EDE4;color:var(--night)}
.plus-offer .signup-form{max-width:420px;margin:0 auto;flex-direction:row;flex-wrap:wrap}
.plus-offer .signup-form input[type=email]{flex:1;min-width:200px}
.plus-intro{font-family:var(--read);font-size:20px;line-height:1.45;margin:0 0 26px;border-top:1px solid var(--rule);padding-top:34px}
.plus-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 30px;margin:0 0 30px}
.plus-item{display:flex;gap:16px;align-items:flex-start}
.plus-icon{flex:0 0 64px;height:64px;border-radius:6px;background:var(--slate);display:flex;align-items:center;justify-content:center}
.plus-item:nth-child(2) .plus-icon{background:#F5EDE4}
.plus-icon .mark{height:34px;width:auto;fill:var(--rust-light)}
.plus-item:nth-child(2) .plus-icon .mark{fill:var(--rust)}
.plus-item h2{font-family:var(--head);font-weight:700;font-size:19px;color:var(--night);margin:0 0 4px}
.plus-item p{font-family:var(--read);font-size:18px;line-height:1.4;color:var(--ink);margin:0}
.plus-fine{font-family:var(--read);font-style:italic;font-size:17px;line-height:1.45;color:var(--ink-soft);margin:0 0 34px}
.plus-faq h2{font-family:var(--head);font-weight:700;font-size:22px;color:var(--night);margin:0 0 10px}
.plus-faq details{border-bottom:1px solid var(--rule)}
.plus-faq summary{font-family:var(--head);font-weight:700;font-size:18px;color:var(--night);padding:12px 0;cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center}
.plus-faq summary::-webkit-details-marker{display:none}
.plus-faq summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;margin-right:4px}
.plus-faq details[open] summary::before{transform:rotate(45deg)}
.plus-faq details p{font-family:var(--read);font-size:18px;line-height:1.42;color:var(--ink);margin:0 0 14px 22px}
@media (max-width:760px){
  .plus-page{padding-top:34px}
  .plus-lockup .wordmark,.plus-lockup .plus-word{font-size:27px}
  .plus-lockup .mark{height:32px}
  .plus-items{grid-template-columns:minmax(0,1fr)}
  .plus-button{flex:1 1 100%}
}

/* reader accounts */
.account-page h1,.legal-page h1{font-family:var(--head);font-weight:500;font-size:44px;line-height:1.05;color:var(--night);margin:0 0 22px}
.account-block{border-top:1px solid var(--rule);padding:18px 0 8px}
.account-block h2{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.account-block p{font-family:var(--read);font-size:19px;line-height:1.4;margin:0 0 12px}
.account-block form{margin:0 0 10px}
.plus-signin-button{font-family:var(--head);font-weight:700;font-size:15px;background:#fff;color:var(--rust);border:1.5px solid var(--rust);border-radius:999px;padding:8px 16px;cursor:pointer}
.account-signout{border-top:1px solid var(--rule);padding-top:18px;margin-top:8px}
.account-signout button{background:none;border:0;padding:0;font-family:var(--head);font-size:16px;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.legal-page .body h2{font-size:24px}
@media (max-width:700px){ .account-page h1,.legal-page h1{font-size:36px} }

/* the Daily Update's short version */
.body ul.short-version{margin:0 0 1.2em;padding-left:1.2em}
.body ul.short-version li{margin:0 0 .35em}

/* the paywall line under a subscriber-only post in the river: an invitation, not a quote */
.members-note{font-family:var(--head)!important;font-size:17px!important;background:#F5EDE4!important;border-left:0!important;border-radius:10px!important;padding:16px 20px!important;display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--night)}
.members-note .members-more{display:inline-block;background:var(--rust);color:#fff;font-weight:700;font-size:15px;border-radius:999px;padding:7px 16px;text-decoration:none}
.members-note .members-more:hover{background:#8A4A2B}
.members-note .members-signin{font-family:var(--head);font-weight:700;font-size:15px;color:var(--rust);text-decoration:none}
.members-note .members-signin:hover{text-decoration:underline}

/* ------------------------- spacing, type and the phone ------------------------- */

/* "Previous posts" belongs to the river above it, not to the board below */
.more-link{margin-top:10px}
.stories{padding-bottom:20px}
.layout{padding-bottom:24px}
.board{padding-top:28px}

/* headlines and standfirsts, tighter */
.lead h2{line-height:1}
article h1,.category-head h1,.archive h1{line-height:1}
.stream-story h2{line-height:1.01}
.card-title{line-height:1.06}
.lead .dek,.stream-story .dek,article .dek,.card-dek{line-height:1.3}
.daily-main h2{line-height:1.05}

/* the swipe widgets say how many there are and where you are */
.scroll-dots{display:none;gap:7px;justify-content:center;padding:14px 0 2px}
.scroll-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--rule);cursor:pointer}
.scroll-dots button.on{background:var(--rust)}
.board.legends .scroll-dots button{background:#D9C9B7}
.board.legends .scroll-dots button.on{background:var(--rust)}

@media (max-width:640px){
  .scroll-dots{display:flex}
  .board{padding-bottom:26px}
}

@media (max-width:700px){
  /* the river ends and the board begins without a gulf between them */
  .stories{padding-bottom:14px}
  .layout{padding-bottom:14px}
  .more-link{margin-top:2px;font-size:17px}
  .board{padding-top:22px}

  /* a touch more air in the words themselves */
  .body{font-size:20px}

  /* the Daily Update box: shallower, with a headline that doesn't take the screen */
  .daily-box{padding:16px 0 18px}
  .daily-inner{gap:18px}
  .daily-main h2{font-size:24px;line-height:1.1}
  .daily-label{margin-bottom:4px}

  /* the footer keeps the newsletter and the links; the list of ten belongs to the archive page */
  .hub-last{display:none}
  .hub{padding:34px 0 40px}
}

/* ------------------------------- the phone, again ------------------------------ */
@media (max-width:700px){
  /* text set a little tighter */
  .body{line-height:1.33}
  article .dek,.stream-story .dek,.lead .dek{line-height:1.24}

  /* an article headline that doesn't take the whole screen */
  article h1,.category-head h1{font-size:32px;line-height:1.02}
  article .dek{font-size:19px}

  /* sharing: the label on its own line, the buttons side by side and the same height */
  .ft-share{gap:10px;align-items:stretch}
  .share-label{flex:0 0 100%;margin:0 0 2px}
  .share-button{flex:1 1 0;justify-content:center;min-width:0;padding:10px 12px}
}

/* the article headline: it reads better a step smaller, on every screen */
article h1{font-size:42px;line-height:1.03}
@media (max-width:1000px){ article h1{font-size:38px} }
@media (max-width:700px){ article h1{font-size:31px;line-height:1.05} }

/* the swipe widgets on a phone: less air around the cards, and dots that sit close under them */
@media (max-width:700px){
  .board{padding-top:22px;padding-bottom:18px}
  .daily-box + .legends{padding-bottom:20px}
  .board .section-label{margin-bottom:14px}
  .board-title{font-size:17px;line-height:1.15}
  .board-caption{margin-top:4px}
  .board-card{padding-bottom:0}
  .scroll-dots{padding:12px 0 0}

  /* the Daily Update box, with a little more room above and below */
  .daily-box{padding:26px 0 28px}
}

/* a post on X quoted in the Daily Update, drawn like X's own embed (no X scripts; the same markup works in email) */
.body figure.x-card{max-width:550px;margin:1.4em 0;padding:14px 18px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.body .x-card-head{margin:0 0 6px;font-family:var(--ui);font-size:16px;font-weight:700;line-height:1.3;padding-right:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F2C33' d='M17.8 3h3.1l-6.8 7.8L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8L17.8 3Zm-1.1 16.2h1.7L7.4 4.7H5.6l11.1 14.5Z'/%3E%3C/svg%3E") right center/18px no-repeat}
.body .x-card-head a{color:var(--night);text-decoration:none}
.body .x-card-text{margin:0 0 8px;font-family:var(--ui);font-size:17px;line-height:1.42;color:var(--ink)}
.body figure.x-card figcaption{margin:0;font-family:var(--ui);font-size:14px;color:var(--ink-soft)}
.body figure.x-card figcaption a{color:var(--ink-soft);text-decoration:none}
@media (max-width:640px){.body .x-card-text{font-size:16px}.body figure.x-card{padding:12px 14px 10px}}

/* an embedded post from X: X's script replaces it with the real post; until then (or without it) it reads as a card */
.body blockquote.twitter-tweet{max-width:550px;margin:1.4em 0;padding:14px 18px;border:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:12px;background:var(--paper);font-family:var(--ui);font-size:16px;line-height:1.42;color:var(--ink);font-style:normal}
.body blockquote.twitter-tweet p{margin:0 0 8px;font-size:16px}
.body blockquote.twitter-tweet a{color:var(--ink-soft)}
.body .twitter-tweet-rendered{margin:1.4em 0 !important}

/* section headlines in medium, like the headlines */
.body h2{font-weight:500}
/* embedded posts and videos sit in the middle of the column */
.body blockquote.twitter-tweet{margin-left:auto;margin-right:auto}
.body .twitter-tweet-rendered{margin-left:auto !important;margin-right:auto !important}
.body figure.video{max-width:640px;margin-left:auto;margin-right:auto}

/* the newsletter box: a plain invitation, no match minutes */
.ht-title{font-family:var(--head);font-weight:500;font-size:26px;line-height:1.15;color:var(--night);margin:0 0 6px}
@media (max-width:640px){.ht-title{font-size:23px}}

/* the subscribe page: everything centred except the questions */
.plus-intro,.plus-fine{text-align:center}
.plus-items{text-align:center}
.plus-item{flex-direction:column;align-items:center;gap:10px}
.plus-item .plus-icon{flex:none;width:64px}

/* the subscribe page's questions, centred like the rest */
.plus-faq{text-align:center}
.plus-faq summary{justify-content:center}
.plus-faq details p{margin:0 auto 14px;max-width:560px}

/* the About page: the subscribe page's layout, with the sections as its blocks */
.about-headline{font-family:var(--head);font-weight:500;font-size:46px;line-height:1.06;letter-spacing:-.01em;color:var(--night);margin:0 0 16px}
.about-lead{font-family:var(--read);font-size:21px;line-height:1.45;color:var(--ink);max-width:600px;margin:0 auto}
.about-page .plus-items{border-top:1px solid var(--rule);padding-top:34px}
.about-page a.plus-item{color:inherit;text-decoration:none}
.about-page a.plus-item:hover h2{color:var(--rust)}
.about-plus,.about-follow{text-align:center;border-top:1px solid var(--rule);padding:30px 0 6px;margin-top:6px}
.about-plus h2,.about-follow h2{font-family:var(--head);font-weight:500;font-size:28px;color:var(--night);margin:0 0 8px}
.about-plus p,.about-follow p{font-family:var(--read);font-size:19px;line-height:1.45;color:var(--ink);max-width:560px;margin:0 auto 16px}
.about-plus a.plus-button{display:inline-block;text-decoration:none}
.about-follow .signup-form{max-width:420px;margin:0 auto 16px;flex-direction:row;flex-wrap:wrap}
.about-follow .signup-form input[type=email]{flex:1;min-width:200px}
.about-links{font-size:17px}
.about-links a{color:var(--night);text-decoration-color:var(--rust);text-underline-offset:3px}
@media (max-width:640px){.about-headline{font-size:34px}.about-lead{font-size:19px}}
.about-page .plus-item:last-child:nth-child(odd){grid-column:1/-1}

/* the About page's section icons: drawn lines, on slate and sand tiles in a checkerboard */
.plus-icon .glyph{width:42px;height:42px;color:var(--rust-light)}
.about-page .plus-item:nth-child(2) .plus-icon .glyph,.about-page .plus-item:nth-child(3) .plus-icon .glyph{color:var(--rust)}
.about-page .plus-item:nth-child(3) .plus-icon{background:#F5EDE4}
.about-page .plus-item:nth-child(4) .plus-icon{background:var(--slate)}

/* the gap between "Read next" and the footer, tightened */
.read-next{margin-bottom:0}
.read-next li:last-child a{padding-bottom:0}
main.column:has(> .read-next:last-child){padding-bottom:48px}
/* later pages of the river: older on the left, newer on the right */
.river-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:10px}