:root{--bg:#08080a;--surface:#131317;--surface-2:#1a1a1f;--border:#26262c;--control-border:#5c5c62;--text:#f5f5f6;--muted:#a6a6ad;--red:#ff2e3e;--red-surface:#d81f2d;--max:1240px;--reading:740px;--body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;--display:Commissioner,Inter,system-ui,sans-serif;--wordmark:Commissioner,Inter,system-ui,sans-serif;--radius:14px;color-scheme:dark} /* No language-scoped display face any more: Commissioner covers Greek and Latin, so both languages use one. */ /* [hidden] is display:none in the user-agent sheet only, so any author rule that sets display beats it — a button that is .text-link stayed on screen with the attribute set, and nothing in the markup said why. This is the standard remedy and it closes the whole class, not the one instance found. */ [hidden]{display:none!important} *{box-sizing:border-box}html{scroll-padding-top:120px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:#fff}button,input,textarea,select{font:inherit}button,a,input,textarea,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed}img{display:block;max-width:100%;height:auto}svg{display:block}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:var(--display);line-height:1.2}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--red);outline-offset:5px}::selection{background:var(--red-surface);color:white}.wrap{width:calc(100% - 64px);max-width:var(--max);margin-inline:auto}.muted,.fine-print{color:var(--muted)}.fine-print{font-size:12px;margin-top:12px}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;background:white;color:black;padding:12px}.site-header{border-bottom:1px solid var(--border);background:var(--bg)}.masthead{display:flex;align-items:center;gap:28px;min-height:114px}.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}.brand img{width:56px;height:56px}.brand-type{font:800 28px/.94 var(--wordmark);letter-spacing:-1px}.brand-type strong{font-weight:800}.brand-type small{display:block;font:500 10px/1.2 var(--body);letter-spacing:3px;margin-top:10px}.masthead-note{margin-left:auto;display:grid;gap:8px;font-size:11px;letter-spacing:1.2px;text-align:right}.masthead-note span:last-child{color:var(--muted);font-size:12px;letter-spacing:0}.header-actions{display:flex;align-items:center;gap:8px}.icon-link{display:flex;justify-content:center;align-items:center;width:44px;height:44px;border:1px solid var(--control-border);border-radius:50%}.desktop-nav{display:flex;gap:29px;align-items:center;border-top:1px solid var(--border)}.desktop-nav a{display:flex;align-items:center;min-height:54px;position:relative;font-size:14px;font-weight:600;white-space:nowrap}.desktop-nav a[aria-current]:after{content:'';height:3px;background:var(--red);position:absolute;bottom:-1px;inset-inline:0}.desktop-nav a:hover{color:var(--red)}.mobile-menu{display:none}.latest-strip{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--border);padding:17px 0;margin-bottom:28px;min-width:0;font-size:12px}.strip-label{color:var(--red);font-size:10px;font-weight:800;letter-spacing:1.2px;flex-shrink:0}.latest-strip a:hover{color:var(--text)}.lead-grid{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);gap:32px}.story-card{min-width:0}.visual-link{display:block}.story-visual{aspect-ratio:16/9;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);position:relative}.story-visual img{width:100%;height:100%;object-fit:cover}.story-copy{padding-top:17px}.category-label{color:var(--red);font-size:11px;font-weight:750;letter-spacing:.9px;line-height:1.4;display:inline-flex;align-items:center;min-height:24px}.story-copy h3{font-size:20px;line-height:1.35;font-weight:700;margin-top:6px;letter-spacing:-.35px}.story-copy h2{font-size:clamp(30px,3.3vw,42px);line-height:1.18;letter-spacing:-1px;margin-top:7px}.story-copy h2 a:hover,.story-copy h3 a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px;text-decoration-thickness:2px}.dek{color:var(--muted);line-height:1.65;margin-top:14px;font-size:16px}.story-meta{font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:16px;margin-top:17px}.story-meta span{border-left:1px solid var(--border);padding-left:16px}.secondary-stories{display:grid;align-content:start;gap:25px}.card-secondary{display:grid;grid-template-columns:44% minmax(0,1fr);gap:20px;align-items:start;padding-bottom:24px;border-bottom:1px solid var(--border)}.card-secondary .story-copy{padding:0}.card-secondary .story-visual{aspect-ratio:1}.card-secondary h3{font-size:21px}.secondary-stories .story-meta{gap:8px}.secondary-stories .story-meta span{border:0;padding:0}.editorial-graphic{container-type:size;padding:22px;display:flex;gap:6px;flex-direction:column;justify-content:space-between;background-color:#192022;background-image:linear-gradient(125deg,transparent 60%,#ffffff08 60%,#ffffff08 61%,transparent 61%);color:#e9ede8}.editorial-graphic:before{content:'';position:absolute;width:60%;height:150%;top:-25%;left:65%;transform:rotate(25deg);border-left:1px solid #ffffff1a;pointer-events:none}.graphic-brand{font:500 8px/1.4 var(--body);letter-spacing:1.6px;color:#ffffffaa}.editorial-graphic strong{font:800 min(var(--graphic-title-size,48px),var(--graphic-title-fit,21cqw),30cqh)/.92 var(--display);letter-spacing:-.04em;max-width:100%;overflow-wrap:normal;word-spacing:4ch;z-index:1}.graphic-foot{font:500 8px/1.4 var(--body);letter-spacing:1px;display:flex;justify-content:space-between;gap:8px}.graphic-foot span{font-size:20px;line-height:1}.graphic-new-motorcycles{background-color:#342125;color:#ffacae}.graphic-motogp,.graphic-racing,.graphic-moto2,.graphic-moto3{background-color:#292724;color:#e4d7b6}.graphic-gear,.graphic-helmets{background-color:#1c2833;color:#b2d1e9}.graphic-guides,.graphic-trackdays{background-color:#1c2928;color:#b1d4c5}.graphic-technology{background-color:#26223b;color:#ccbfed}.card-secondary .editorial-graphic{padding:17px}.card-secondary .editorial-graphic strong{--graphic-title-size:36px}.card-secondary .graphic-brand{font-size:7px;letter-spacing:1px}.card-secondary .graphic-foot{font-size:7px}.news-section{padding-block:42px;border-top:1px solid var(--border);margin-top:40px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}.section-heading h2{font-size:28px;letter-spacing:-.7px}.section-heading h2:before{content:'';display:inline-block;width:5px;height:22px;background:var(--red);margin-right:12px;vertical-align:-1px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--muted);margin-bottom:10px}.text-link{font-size:12px;font-weight:600;display:inline-flex;align-items:center;min-height:44px;gap:8px}.text-link:hover{color:var(--red)}.latest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}.card-compact{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center}.card-compact .story-visual{aspect-ratio:4/3}.card-compact .story-copy{padding:0}.card-compact .story-copy h3{font-size:18px}.card-compact .editorial-graphic{padding:13px}.card-compact .graphic-brand{font-size:6px;letter-spacing:.5px}.card-compact .editorial-graphic strong{--graphic-title-size:27px;letter-spacing:-.04em}.card-compact .graphic-foot{font-size:6px}.card-compact .story-meta{margin-top:9px}.card-compact .story-meta span{display:none}.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.racing-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px;margin-bottom:22px}.racing-links a{font:600 12px/1 var(--display);padding:14px 20px;border:1px solid var(--control-border);border-radius:5px;min-height:44px}.racing-links a:hover{border-color:var(--red)}.section-racing{border-top-color:#4b252a}.youtube-section{margin-bottom:48px}.button{background:var(--red-surface);border:1px solid var(--red-surface);color:#fff;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;font-size:13px;font-weight:600;border-radius:6px}.button:hover{background:#d71e2e}.button-outline{background:transparent;border-color:var(--control-border)}.button-outline:hover{background:var(--surface);border-color:var(--text)}.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.button:disabled{opacity:.4;background:var(--surface);border-color:var(--border)}#video-status:not(:empty){margin-block:20px;color:var(--muted);font-size:14px}.video-card{padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.video-card h3{font-size:18px;margin-block:15px}.video-card .button{margin-top:18px}.video-card iframe{width:100%;aspect-ratio:16/9;border:0}.site-footer{border-top:1px solid var(--border);background:#0d0d10;padding-top:52px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding-bottom:45px}.footer-brand{font:800 26px/1 var(--wordmark);letter-spacing:-1px}.footer-grid p{font-size:13px;color:var(--muted);margin-top:14px}.footer-grid nav{display:flex;flex-direction:column;align-items:flex-start}.footer-grid h2{font:600 10px/1.5 var(--body);color:var(--muted);letter-spacing:1.3px;margin-bottom:12px}.footer-grid nav a{font-size:13px;min-height:44px;display:flex;align-items:center}.footer-bottom{border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;font-size:11px;color:var(--muted)}.footer-bottom nav{display:flex;gap:25px}.footer-bottom a{display:inline-flex;min-height:44px;align-items:center}.error-page{padding-block:90px 130px;max-width:850px}.error-code{font:800 100px/1 var(--wordmark);color:var(--red);margin-bottom:25px}.error-page h1{font-size:40px}.empty-state{padding:60px 25px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.home-empty{margin-top:40px}.empty-state p{margin-top:15px;color:var(--muted)} /* The last story beside the lead gets no rule of its own. Every card in that column is separated from the next by one, but the last has nothing under it except the section border that closes the whole block — and on a phone, where the column is the full width, the two lines met twenty pixels apart. Owner, 21 September 2026. The specificity beats the base rule and both narrow overrides, so it holds at every width. */ .card-secondary:last-child{padding-bottom:0;border-bottom:0} @media(min-width:1400px){.card-secondary{grid-template-columns:46% minmax(0,1fr)}} @media(max-width:1100px){.desktop-nav{gap:20px}.desktop-nav a{font-size:12px}.lead-grid{gap:25px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}.card-secondary{grid-template-columns:40% minmax(0,1fr);gap:18px}.card-secondary .editorial-graphic{padding:14px}.card-secondary .editorial-graphic strong{--graphic-title-size:30px}.card-secondary .graphic-foot{display:none}.card-secondary .graphic-brand{font-size:6px;letter-spacing:.5px}.card-secondary h3{font-size:19px}.masthead-note{font-size:9px}.brand-type{font-size:25px}.card-compact{grid-template-columns:125px minmax(0,1fr);gap:15px}} @media(max-width:900px){.wrap{width:calc(100% - 40px)}.desktop-nav{gap:16px;flex-wrap:wrap;justify-content:center}.desktop-nav a{min-height:44px}.masthead-note{display:none}.header-actions{margin-left:auto}.story-grid{gap:20px}.story-copy h3{font-size:18px}.editorial-graphic{padding:18px}.editorial-graphic strong{--graphic-title-size:34px}.graphic-brand{font-size:7px;letter-spacing:1px}.graphic-foot{font-size:7px}.latest-grid{gap:25px}.card-compact{grid-template-columns:110px minmax(0,1fr)}.card-compact .graphic-foot{display:none}.card-compact .story-copy h3{font-size:16px}.footer-grid{gap:30px}} /* Where the lead stops sharing its row. Measured on 21 September 2026 with three stories in the column: the column ends within 60px of the lead at 860 and wider, and runs 104px past it at 760, 225px at 700 — a narrow column cannot carry three readable cards beside a picture. Below this the page does what a phone already does: the lead takes the full width and the three sit under it as a list. */ @media(max-width:840px){.lead-grid{display:block}.secondary-stories{margin-top:28px;gap:20px}.card-secondary{grid-template-columns:150px minmax(0,1fr);gap:18px;padding-bottom:20px}} @media(max-width:640px){html{scroll-padding-top:90px}.wrap{width:calc(100% - 32px)}.site-header{position:sticky;top:0;z-index:20}.masthead{min-height:85px;gap:12px}.brand{gap:9px}.brand img{width:39px;height:39px}.brand-type{font-size:20px;letter-spacing:-.7px}.brand-type small{font-size:7px;letter-spacing:1.4px;margin-top:7px}.icon-link{border:0;width:44px}.header-actions{gap:0}.desktop-nav{display:none}.mobile-menu{display:block}.mobile-menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:23px;cursor:pointer}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;top:100%;inset-inline:0;background:var(--surface);padding:16px 24px;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;border-block:1px solid var(--border);max-height:70vh;overflow:auto;box-shadow:0 15px 30px #0008}.mobile-menu nav a{display:flex;align-items:center;min-height:48px;font-size:14px}.mobile-menu nav a[aria-current]{color:var(--red)}.latest-strip{gap:12px;padding-block:14px;margin-bottom:22px}.strip-label{font-size:8px}.latest-strip a{max-width:100%;font-size:10px}.card-hero .story-copy h2{font-size:30px;letter-spacing:-.75px;line-height:1.25}.card-hero .dek{font-size:14px}.story-meta{margin-top:13px}.category-label{font-size:10px}.card-secondary{grid-template-columns:116px minmax(0,1fr);gap:16px}.card-secondary .editorial-graphic{padding:13px}.card-secondary .editorial-graphic strong{--graphic-title-size:27px}.card-secondary h3{font-size:17px;margin-top:4px}.card-secondary .story-meta{font-size:10px}.card-secondary .story-meta span{display:none}.news-section{margin-top:28px;padding-block:28px}.section-heading{gap:12px;margin-bottom:20px}.section-heading h2{font-size:23px;letter-spacing:-.6px}.section-heading h2:before{height:18px;width:4px;margin-right:9px}.eyebrow{font-size:8px}.text-link{font-size:10px;white-space:nowrap}.latest-grid{grid-template-columns:1fr;gap:23px}.card-compact{grid-template-columns:106px minmax(0,1fr);gap:15px}.card-compact .story-copy h3{font-size:17px}.card-compact .story-visual{aspect-ratio:1.15}.card-compact .editorial-graphic strong{--graphic-title-size:24px}.story-grid{grid-template-columns:1fr;gap:30px}.story-grid .story-copy h3{font-size:22px}.story-grid .editorial-graphic{padding:24px}.story-grid .editorial-graphic strong{--graphic-title-size:48px}.story-grid .graphic-brand{font-size:9px}.story-grid .graphic-foot{font-size:9px}.racing-links{gap:6px}.racing-links a{padding:14px 17px;font-size:11px}.youtube-section{margin-bottom:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div{grid-column:1/-1}.footer-brand{font-size:26px}.footer-bottom{flex-wrap:wrap;gap:0 20px;padding-block:15px}.footer-bottom>span{flex-basis:100%;padding-block:8px}.footer-bottom nav{gap:18px}.error-page{padding-block:55px 90px}.error-page h1{font-size:30px}.error-code{font-size:80px}.empty-state{padding:35px 20px}.home-empty{margin-top:28px}} .breadcrumbs{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);padding-block:20px 28px;flex-wrap:wrap}.breadcrumbs a{min-height:32px;display:flex;align-items:center}.archive-page{padding-bottom:80px;min-height:65vh}.archive-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:18px 0 38px;padding-bottom:25px;border-bottom:1px solid var(--border)}.archive-heading h1,.search-page h1,.info-page h1{font-size:48px;letter-spacing:-1.5px}.archive-heading>span{font-size:13px}.archive-grid{row-gap:44px}.pagination{display:flex;align-items:center;gap:15px;margin-top:45px;flex-wrap:wrap}.pagination>span{font-size:12px;margin-left:auto}.search-page{max-width:1080px}.search-form{display:flex;gap:12px;margin-block:28px;max-width:800px}.search-form input{width:100%;min-width:0;padding:16px 20px;border:1px solid var(--control-border);border-radius:6px;background:var(--surface);color:var(--text);font-size:17px}.search-form .button{white-space:nowrap;padding-inline:26px}.search-form .button span{margin-left:12px}.suggested-search{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}.suggested-search a,.article-tags a{border:1px solid var(--control-border);padding:9px 16px;border-radius:5px;min-height:44px;display:inline-flex;align-items:center}.search-hint{font-size:14px;margin-top:30px}.search-results-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-block:40px 28px}.search-results-heading h2{font-size:22px;overflow-wrap:anywhere}.search-results-heading p{font-size:12px;white-space:nowrap}.article-page{padding-bottom:50px}.reading-wrap{max-width:var(--reading);margin-inline:auto}.article-header{padding-block:20px 28px}.article-header h1{font-size:clamp(34px,4vw,52px);line-height:1.18;font-weight:750;letter-spacing:-1.4px;margin-top:14px}.article-dek{font-size:20px;line-height:1.65;color:var(--muted);margin-top:22px}.byline{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:12px}.byline img{height:32px;width:32px}.byline strong{font-size:12px;font-weight:600}.byline p{font-size:11px;color:var(--muted);margin-top:4px}.updated-label{font-size:11px;color:var(--muted);margin-top:12px}.article-hero{margin:10px auto 38px;max-width:980px}.article-hero .story-visual{border-radius:10px;aspect-ratio:1.9}.article-hero .editorial-graphic{padding:45px}.article-hero .editorial-graphic strong{--graphic-title-size:90px}.article-hero .graphic-brand{font-size:12px}.article-hero .graphic-foot{font-size:11px}.article-hero figcaption{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6}.fixture-notice{font-size:12px;color:#c8bdab;border-left:2px solid #7b6141;background:#1c1916;padding:13px 17px;margin-bottom:28px}.article-body{font-size:19px;line-height:1.75;color:#e3e3e6}.article-body p{margin-block:0 25px}.article-body h2{font-size:28px;letter-spacing:-.5px;margin-block:40px 19px;color:var(--text)}.article-body h3{font-size:23px;margin-block:30px 15px}.article-body ul{padding-left:24px;margin-block:0 28px}.article-body li{padding-left:8px;margin-bottom:12px}.article-body li::marker{color:var(--red)}.source-references{margin-top:32px}.source-references h2{font-size:23px}.source-references ul{margin:15px 0 0;padding-left:19px;font-size:13px;line-height:1.8}.source-references a{text-decoration:underline;text-underline-offset:4px}.article-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;font-size:12px}.correction-link{font-size:12px;color:var(--muted);margin-top:25px}.correction-link a{text-decoration:underline;text-underline-offset:3px}.article-social{margin-top:40px;padding:28px 0;border-top:1px solid var(--border);font-size:14px}.info-page{padding-block:0 100px;min-height:65vh}.info-page h1{margin-block:15px 30px}.info-page .button{margin-top:16px}.admin-shell{padding-block:36px 65px}.admin-nav{display:flex;gap:28px;border-bottom:1px solid var(--border);padding-block:15px;margin-bottom:32px;font-size:12px}.admin-nav a{display:flex;align-items:center;min-height:44px}.admin-nav a:last-child{margin-left:auto;color:var(--muted)}.admin-nav a[aria-current]{color:var(--red)}.prototype-notice{font-size:12px;color:#c8bdab;background:#1c1916;border:1px solid #39312a;border-radius:6px;padding:13px 18px;margin-bottom:28px}.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:42px}.stat-card{padding:22px 20px;border:1px solid var(--border);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;gap:15px}.stat-card>span{font-size:12px;color:var(--muted)}.stat-card strong{font:600 42px/1 var(--wordmark)}.stat-card small{font-size:10px;color:var(--muted)}.stat-pending_review{border-top:2px solid #d99a2a}.stat-processing_error strong{color:#f398a0}select{background:var(--surface);border:1px solid #43434a;border-radius:5px;color:var(--text);padding:11px;min-height:44px}.queue-table{border:1px solid var(--border);border-radius:10px;overflow:hidden}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-weight:500;font-size:10px;background:var(--surface);color:var(--muted);padding:15px}td{padding:20px 15px;border-top:1px solid var(--border)}td:first-child{width:45%}.queue-story{display:flex;align-items:center;gap:14px}.queue-story p{font-size:13px;font-weight:600;line-height:1.5}.queue-story .category-label{font-size:9px}.status-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:5px;background:var(--surface-2);font-size:10px;white-space:nowrap}.status-pending_review{background:#342c14;color:#e8c66b}.status-revision_requested{background:#2c2545;color:#c7b4f5}.status-drafting{background:#1b2b45;color:#a8c7f5}.status-processing_error{background:#3d2020;color:#f5a0a0}.status-published{background:#1b3329;color:#9ad9b8}.attention-note{display:block;color:#d6b97e;font-size:9px;margin-top:7px}.field-help{font-size:12px;color:var(--muted);line-height:1.7;margin-block:12px 16px}.count-badge{border:1px solid var(--border);font:500 11px/1 var(--body);padding:6px 8px;border-radius:5px;color:var(--muted)} @media(max-width:1000px){.stats-grid{gap:10px}.stat-card{padding:18px 12px}.stat-card>span{font-size:11px}td{padding:17px 12px}.article-header h1{font-size:44px}} @media(max-width:760px){.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.queue-table{border:0;border-radius:0}.queue-table table,.queue-table tbody,.queue-table tr,.queue-table td{display:block}.queue-table thead{display:none}.queue-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--border);border-radius:8px;margin-bottom:16px;overflow:hidden}.queue-table td{width:auto!important;padding:12px 15px;font-size:11px;border-top:0}.queue-table td:first-child{grid-column:1/-1;border-bottom:1px solid var(--border);background:var(--surface)}.queue-table td[data-label]:before{content:attr(data-label);display:block;font-size:9px;color:var(--muted);margin-bottom:7px}.article-header h1{font-size:38px}.article-hero .editorial-graphic strong{--graphic-title-size:70px}.article-dek{font-size:18px}} @media(max-width:640px){.archive-heading h1,.search-page h1,.info-page h1{font-size:35px;letter-spacing:-1px}.archive-heading{margin-top:8px;margin-bottom:28px}.breadcrumbs{font-size:11px;padding-block:15px 20px;gap:9px}.breadcrumbs a{min-height:44px}.archive-grid{row-gap:30px}.search-form{gap:9px}.search-form input{padding:13px;font-size:15px}.search-form .button{padding-inline:14px;font-size:11px}.search-form .button span{display:none}.suggested-search{font-size:12px}.suggested-search>span{flex-basis:100%;margin-bottom:5px}.search-results-heading{align-items:start}.search-results-heading h2{font-size:20px}.article-header{padding-top:5px}.article-header h1{font-size:33px;letter-spacing:-.8px;line-height:1.25;margin-top:10px}.article-dek{font-size:17px;line-height:1.65;margin-top:18px}.article-body{font-size:17px;line-height:1.7}.article-body h2{font-size:25px;margin-top:32px}.article-hero{margin-block:0 28px}.article-hero .story-visual{border-radius:8px}.article-hero figcaption{font-size:10px}.article-hero .editorial-graphic{padding:23px}.article-hero .editorial-graphic strong{--graphic-title-size:49px}.article-hero .graphic-brand,.article-hero .graphic-foot{font-size:8px}.fixture-notice{font-size:11px}.admin-nav{gap:18px;font-size:10px;margin-bottom:25px}.admin-nav a:last-child{font-size:9px}.prototype-notice{padding:12px;font-size:11px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:28px}.stat-card{padding:17px}.stat-card strong{font-size:35px}.stat-card>span{font-size:11px}.stat-card small{font-size:9px}.stats-grid .stat-card:last-child{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.stats-grid .stat-card:last-child small{display:none}.info-page{padding-bottom:70px}.info-page h1{margin-top:8px}} /* Independent archive headings and generous targets without JavaScript. */ .archive-grid .story-copy h2{font-size:22px;line-height:1.35;font-weight:700;letter-spacing:-.35px;margin-top:6px} a.category-label{min-height:44px}.story-copy h2 a,.story-copy h3 a{display:block;min-height:44px}.latest-strip a{display:flex;align-items:center;min-height:44px}.latest-strip{padding-block:6px}.source-references a{display:inline-flex;align-items:center;min-height:44px} /* This rule used to end `.correction-link a,` with the declaration block missing, so the selector list ran on into the @media below it. An invalid selector drops the whole rule: the correction link never got its 44px target (it measured 15px tall) and the entire media block went with it. Both are written out properly here. */ .correction-link a{display:inline-flex;align-items:center;min-height:44px} @media(max-width:640px){.archive-grid .story-copy h2{font-size:22px}.latest-strip a{display:block;line-height:44px}} .language-switch{display:flex;align-items:center;padding:3px;border:1px solid var(--control-border);border-radius:8px;flex-shrink:0;gap:2px} .language-switch a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:5px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px} .language-switch a:hover{background:var(--surface-2);color:var(--text)}.language-switch a[aria-current]{background:var(--red-surface);color:white} @media(max-width:640px){.masthead{gap:10px}.brand-type{font-size:16px;line-height:1.05;letter-spacing:-.5px}.brand-type strong{display:block}.brand-type small{display:none}.header-actions{gap:0}.language-switch{padding:1px;gap:0;border-radius:6px}.language-switch a{min-width:44px;font-size:10px}.brand img{width:36px;height:36px}.brand{gap:7px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} .language-switch .unavailable-language{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;opacity:.45;cursor:not-allowed}/* Keep each language's text, comments and decisions together during review. */ .contact-page{padding-block:36px 88px}.contact-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);gap:80px;align-items:start;margin-top:38px}.contact-intro h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-1.8px;margin-top:14px;max-width:520px}.contact-intro>.dek{margin-top:24px;color:var(--muted);font-size:18px;max-width:420px}.contact-note{margin-top:44px;padding-top:24px;border-top:1px solid var(--border);max-width:420px}.contact-note h2{font-size:19px;margin-bottom:12px}.contact-note p{color:var(--muted);font-size:14px;line-height:1.8}.contact-signature{font-weight:700;letter-spacing:1.5px;font-size:12px;margin-top:44px}.contact-signature span{font-size:9px;letter-spacing:2px}.contact-panel{padding:32px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:0}.contact-panel h2{font-size:26px} /* The note owns the space under itself. Without it the form began 4px below the note's last line — the note read as the first field's caption rather than as a statement about the form. The form is a grid container, so nothing collapses through it; where an error box follows instead, the two margins collapse to its 20px. */ .form-required-note{font-size:12px;margin-top:8px;margin-bottom:18px}.contact-panel .fixture-notice{margin:20px 0;font-size:13px}.contact-form{display:grid;gap:22px}.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-field{min-width:0}.form-field label{display:block;font-size:13px;font-weight:600;margin-bottom:9px}.form-field label>span{font-weight:400;color:var(--muted)}.form-field input,.form-field select,.form-field textarea{display:block;width:100%;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--control-border);border-radius:7px;padding:12px 14px;font-size:16px;min-height:48px}.form-field textarea{resize:vertical;min-height:160px;line-height:1.7}.form-field .field-help{font-size:12px;color:var(--muted);margin-top:7px}.contact-protection{display:flex;gap:12px;padding:16px;border:1px dashed var(--control-border);border-radius:8px;color:var(--muted)}.contact-protection svg{flex-shrink:0;margin-top:2px}.contact-protection strong{font-size:12px;font-weight:600;color:var(--text)}.contact-protection p{font-size:12px;margin-top:4px}.contact-form>.fine-print{margin:0}.contact-submit{justify-self:start;min-height:48px}.contact-submit:disabled{opacity:.45}.contact-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.form-result{display:flex;gap:13px;align-items:flex-start;padding:17px 18px;border-radius:8px;margin-block:20px}.form-result svg{flex-shrink:0;margin-top:1px}.form-result p{font-size:14px;line-height:1.7}.form-result.is-sent{background:#16241d;border:1px solid #2f5544;color:#a8d6c2}.form-result.is-error{background:#2a1a1c;border:1px solid #5a3034;color:#f3a5a5}.contact-panel .form-result+.fine-print{margin-bottom:18px}.cf-turnstile{min-height:65px}@media (scripting:none){.cf-turnstile{min-height:0}}.cf-turnstile noscript .captcha-warning{margin-top:0} @media(max-width:960px){.contact-layout{gap:36px}.contact-panel{padding:24px}.contact-row{grid-template-columns:1fr}}@media(max-width:700px){.contact-page{padding-block:24px 56px}.contact-layout{grid-template-columns:1fr;gap:28px;margin-top:24px}.contact-intro h1{font-size:38px}.contact-intro>.dek{font-size:16px;margin-top:16px}.contact-note{margin-top:24px;padding-top:20px;max-width:none}.contact-signature{display:none}.contact-panel{padding:22px 18px}.contact-submit{width:100%}} .article-share{margin:24px 0 32px;padding:18px 0;border-block:1px solid var(--border)}.share-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.share-end{display:flex;align-items:center;gap:8px}.share-label{flex-basis:100%;font-size:11px;font-weight:700;letter-spacing:.7px;margin:0 0 4px;color:var(--muted)}.share-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:9px 13px;border:1px solid var(--control-border);border-radius:6px;color:var(--text);background:transparent;font-size:12px;font-weight:600}.share-button:hover:not(:disabled){background:var(--surface-2);border-color:var(--muted)}.share-button:disabled{opacity:.45}.share-button[hidden]{display:none}.share-link-fallback{font-size:12px;color:var(--muted);margin-top:12px}.share-link-fallback label{display:block}.share-url{display:block;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:11px;color:var(--text);font-size:13px;margin-top:8px}.share-status{font-size:12px;margin-top:8px;color:var(--muted)}.share-status:empty{display:none}@media(max-width:600px){.share-label{flex-basis:100%;margin:0 0 4px}.share-button{padding-inline:11px}.article-share{margin-top:20px}} /* Localized brand copy and readable policy drafts share the editorial shell. */ .brand-type small{letter-spacing:1.2px;font-size:11px;line-height:1.5} .contact-signature span{letter-spacing:.8px;font-size:11px;line-height:1.8} .policy-heading h1{margin-bottom:18px} .policy-summary{font-size:19px;line-height:1.7;color:var(--muted)} .policy-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:24px;font-size:12px;color:var(--muted)} .policy-draft{border:1px solid #65563c;background:#272218;color:#e7cca0;padding:6px 10px;border-radius:5px} .policy-status{border:1px solid var(--border);border-left:3px solid var(--red);border-radius:8px;background:var(--surface);padding:24px;margin:28px 0;font-size:14px;line-height:1.8;color:var(--muted)} .policy-status h2{font-size:18px;color:var(--text);margin:18px 0 8px} .policy-toc{padding-bottom:24px;border-bottom:1px solid var(--border)} .policy-toc h2{font-size:18px;margin-bottom:12px} .policy-toc ul{list-style:none;padding:0;margin:0} .policy-toc a{display:flex;align-items:center;min-height:44px;padding-block:9px;font-size:14px;line-height:1.6;text-decoration:underline;text-underline-offset:4px} .policy-page{overflow-wrap:anywhere} .policy-body{font-size:17px;line-height:1.85} .policy-body h2{font-size:26px;line-height:1.35;scroll-margin-top:24px} .policy-body ul{padding-left:23px;margin:0 0 25px} .policy-body li{padding-left:5px;margin-bottom:18px} .policy-body a,.policy-email{text-decoration:underline;text-underline-offset:4px} .policy-contact{margin-top:36px;padding:26px;border:1px solid var(--border);border-radius:8px;background:var(--surface)} .policy-contact h2{font-size:23px;line-height:1.4;margin-bottom:12px;scroll-margin-top:24px} .policy-contact p{font-size:14px;line-height:1.8;color:var(--muted)} .policy-email{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding-block:8px;font-size:17px;font-weight:600} .policy-contact .fine-print{margin-top:12px} .policy-contact .button{margin-top:16px;max-width:100%;white-space:normal} .policy-related{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:24px;font-size:14px} .policy-related a{display:flex;align-items:center;min-height:44px} @media(max-width:640px){.policy-summary{font-size:17px}.policy-status,.policy-contact{padding:20px 16px}.policy-body{font-size:16px}.policy-body h2{font-size:24px}.policy-email{font-size:16px}} /* Greek compounds are single long words where English would use two, and the display sizes have no wrapping rule at all: a headline word past about 20 characters is painted straight out of its card and gives the whole phone page a horizontal scrollbar. Measured at 375px: a 24-character word in the article h1 took document.scrollWidth to 425 against a 375 client width, one in a .card-compact h3 to 472, one in an .article-body h2 to 463. Body copy is small enough that the same words fit, so this is the display type only. `anywhere` is what .search-results-heading h2, .policy-page, .bg-model h3 and the video card titles already use; every container involved is an explicit minmax(0,…) track, so allowing the smaller min-content contribution cannot change a column width. It only ever acts on a word that would otherwise overflow. */ .story-copy h2,.story-copy h3,.article-header h1,.article-dek,.article-body h2,.article-body h3, .archive-heading h1,.search-page h1,.info-page h1,.hub-heading h1,.contact-intro h1,.about-intro h1, .about-destination h3,.ride-hub h3,.error-page h1,.offer-description h3,.offer-detail-grid h1, .newsletter-invite-copy h2,.section-heading h2,.calendar-empty h3,.organizer-card h3{overflow-wrap:anywhere} /* Graphic type scales to the thumbnail's content width, including long category names. */ .racing-links a[aria-current="page"]{color:var(--text);border-color:var(--red);background:var(--surface-2)} .ride-hubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .ride-hub{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:32px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)} .ride-hub:hover{border-color:var(--muted)}.ride-hub h3{font-size:28px;line-height:1.2}.ride-hub p{color:var(--muted);font-size:15px;max-width:450px}.ride-hub .text-link{margin-top:auto;padding-top:8px} .hub-heading{max-width:800px;margin:36px 0}.hub-heading h1{font-size:clamp(34px,4.3vw,58px);letter-spacing:-1.8px;margin:14px 0 20px;line-height:1.12}.hub-heading .dek{font-size:18px;color:var(--muted);max-width:670px} .reviews-articles{margin-bottom:64px} .reviews-page #video-status{margin-block:24px;font-size:14px;color:var(--muted)} .review-library-heading,.video-library-heading{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:26px}.video-library{margin-top:48px}.video-library-heading{padding-top:0}.review-library-heading{border-top:1px solid var(--border)}.review-library-heading h2,.video-library-heading h2{font-size:24px}.review-library-heading h2:before,.video-library-heading h2:before{content:'';display:inline-block;width:5px;height:22px;background:var(--red);margin-right:12px;vertical-align:-1px}.review-library-heading .text-link,.video-library-heading .text-link{display:inline-flex;align-items:center;min-height:44px}.reviews-library>.fine-print,.video-library>.fine-print{margin:4px 0 26px}.reviews-page #video-status:empty{display:none}.reviews-library>#load-videos,.video-library>#load-videos{margin-bottom:24px} .video-gallery{align-items:stretch}.video-gallery .video-card{padding:0;overflow:hidden;height:100%;min-width:0}.video-card-copy{padding:20px 22px 24px}.video-gallery .video-card h3{margin:10px 0 0;font-size:19px;line-height:1.4;overflow-wrap:anywhere}.video-cover{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--surface-2);border:0;padding:0;overflow:hidden;color:white}.video-cover img{width:100%;height:100%;object-fit:cover}.video-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;padding-left:3px;width:60px;height:60px;border-radius:50%;background:#ff2e3ee8;box-shadow:0 4px 24px #0006;font-size:22px}.video-cover:hover .video-play-icon{background:var(--red);box-shadow:0 4px 30px #0009}.video-cover:focus-visible{outline:3px solid var(--red);outline-offset:-4px}.video-skeleton{min-height:270px;aspect-ratio:1.3;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface-2) 65%,var(--surface) 65%)} .video-modal-open{overflow:hidden}.video-dialog{width:min(1040px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #414149;border-radius:14px;background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain}.video-dialog::backdrop{background:#000d}.video-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px}.video-dialog-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;color:var(--text);border:1px solid var(--border);border-radius:50%;background:var(--surface-2);font:400 30px/1 var(--body)}.video-dialog-close:hover{border-color:var(--muted)}.video-dialog-mount{background:#000;aspect-ratio:16/9;width:100%}.video-dialog-mount iframe{display:block;width:100%;height:100%;border:0}.video-dialog-footer{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.video-dialog-footer h2{font-size:20px;line-height:1.4;overflow-wrap:anywhere;min-width:0}.video-dialog-footer .text-link{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}.video-dialog:not([open]){display:none} .video-dialog-actions{display:flex;flex-wrap:wrap;gap:4px 20px;flex-shrink:0;max-width:100%}.video-dialog-actions button{background:none;border:0;color:inherit;padding:0}.video-dialog-actions button:hover{color:var(--red)} @media(max-width:640px){.video-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:10px}.video-dialog-bar{padding:8px 12px}.video-dialog-footer{padding:18px;flex-direction:column;align-items:flex-start;gap:12px}.video-dialog-footer h2{font-size:18px}.video-card-copy{padding:18px}.review-library-heading h2,.video-library-heading h2{font-size:21px}.review-library-heading h2:before,.video-library-heading h2:before{height:18px;width:4px;margin-right:9px}.video-play-icon{width:54px;height:54px;font-size:20px}} @media(max-height:550px) and (min-width:641px){.video-dialog{width:min(640px,calc(100% - 40px))}.video-dialog-mount{max-height:calc(100dvh - 170px)}.video-dialog-footer{padding:12px 18px}.video-dialog-footer h2{font-size:16px}} .calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}.calendar-panel{min-width:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;flex-wrap:wrap}.calendar-toolbar h2{font-size:25px}.calendar-month-nav{display:flex;gap:6px}.calendar-month-nav .button{min-width:44px;min-height:44px;padding:10px 12px;font-size:12px} .calendar-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(6rem,.55fr) minmax(0,1fr);gap:16px;align-items:end;padding:0 24px 24px}.calendar-filters .button{min-height:48px;grid-column:1/-1;justify-self:start} .trackday-calendar{width:100%;table-layout:fixed;border-collapse:collapse}.trackday-calendar th{color:var(--muted);font-weight:500;font-size:12px;padding:12px 0;border-block:1px solid var(--border)}.trackday-calendar abbr{text-decoration:none}.trackday-calendar td{height:78px;border:1px solid var(--border);vertical-align:top;padding:8px}.trackday-calendar td:first-child{border-left:0}.trackday-calendar td:last-child{border-right:0}.trackday-calendar time{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:13px;color:var(--muted);border-radius:50%}.trackday-calendar time[aria-current="date"]{background:var(--red-surface);color:#fff;font-weight:700}.calendar-blank{background:var(--bg)} .calendar-empty{padding:26px}.calendar-empty h3{font-size:22px;line-height:1.35;margin:12px 0}.calendar-empty p{font-size:14px;line-height:1.8;color:var(--muted);max-width:570px} .calendar-sources h2{font-size:26px;margin:12px 0}.calendar-sources>.muted{font-size:14px;line-height:1.8;margin-bottom:10px}.organizer-card{padding-block:22px;border-bottom:1px solid var(--border)}.organizer-card h3{font-size:19px} /* A cancelled or postponed trackday must be unmistakable: somebody reads this page and then drives to a circuit. The badge sits directly under the title and the dates it refers to are struck through, so the card cannot be skim-read as still happening. Colour is never the only signal — the word itself is always present, and the grid marker below changes glyph as well as hue so neither sight nor a screen reader depends on colour. */ .event-status{display:inline-block;margin-top:10px;padding:6px 11px;border-radius:5px;font-size:11px;letter-spacing:.5px;text-transform:uppercase} .organizer-card.is-cancelled .event-status{background:#3a2226;border:1px solid #6b3740;color:#ffb4ba} .organizer-card.is-postponed .event-status{background:#332c1e;border:1px solid #6b5a36;color:#e8cf9a} .organizer-card .event-dates{margin-top:10px} .organizer-card.is-cancelled h3{color:var(--muted)} .organizer-card.is-cancelled .event-dates time{text-decoration:line-through;color:var(--muted)} .calendar-event-marker.is-cancelled{color:var(--muted)} .calendar-event-marker.is-postponed{color:#d6b97e}.organizer-links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:8px}.organizer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:underline;text-underline-offset:4px}.calendar-source-note{padding-top:26px}.calendar-source-note h3{font-size:17px;margin-bottom:12px}.calendar-source-note p{font-size:13px;color:var(--muted);line-height:1.8}.calendar-source-note .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;line-height:1.6} .calendar-filters select{height:48px}.trackday-calendar th{text-align:center} .button[hidden]{display:none} @media(max-width:1000px){.calendar-layout{grid-template-columns:minmax(0,1fr) 250px;gap:24px}.calendar-toolbar{padding:20px}.calendar-filters{padding:0 20px 20px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(6rem,.55fr)}.calendar-filters .calendar-venue-field{grid-column:1/-1}} @media(max-width:760px){.calendar-layout{grid-template-columns:1fr;gap:36px}.ride-hubs{grid-template-columns:1fr}.ride-hub{padding:24px}.calendar-filters{grid-template-columns:minmax(0,1fr) minmax(6rem,.55fr) minmax(0,1fr)}.calendar-filters .calendar-venue-field{grid-column:auto}} @media(max-width:600px){.calendar-filters{grid-template-columns:minmax(0,1fr) minmax(6rem,.55fr)}.calendar-filters .calendar-venue-field{grid-column:1/-1}} @media(max-width:340px){.calendar-filters{grid-template-columns:minmax(0,1fr)}} @media(max-width:480px){.hub-heading{margin:26px 0}.hub-heading .dek{font-size:16px}.calendar-toolbar{padding:18px 14px;gap:14px}.calendar-toolbar h2{font-size:23px}.calendar-month-nav{width:100%}.calendar-month-nav a:nth-child(2){flex:1}.calendar-filters{padding:0 14px 20px;gap:12px}.calendar-filters .button{width:100%}.trackday-calendar td{height:52px;padding:4px 0;text-align:center}.trackday-calendar time{width:28px;height:28px;font-size:12px}.calendar-empty{padding:22px 16px}.calendar-empty h3{font-size:20px}.ride-hub h3{font-size:25px}} .graphic-worldsbk{--graphic-title-fit:16cqw} .graphic-helmets{--graphic-title-fit:19cqw} @container(max-width:240px){.graphic-foot{display:none}} /* Keep the full brand and 44px controls within the smallest supported viewport. */ .header-actions{flex-shrink:0} @media(max-width:380px){.header-actions>.icon-link{display:none}.masthead{gap:8px}} @media(max-width:640px){ .archive-heading{align-items:flex-start;flex-direction:column;gap:12px} .archive-heading>span{white-space:nowrap} } .video-section-intro{margin-bottom:26px;max-width:740px}.video-section-intro>.muted{font-size:16px;line-height:1.7}.video-gallery-status{margin-block:24px;font-size:14px;color:var(--muted)}.video-gallery-status:empty{display:none}.video-gallery-retry{margin-bottom:24px} /* Newsletter consent is separate from general form fields and cookie choices. */ .newsletter-consent{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.8;cursor:pointer;min-height:44px;padding-block:8px}.newsletter-consent input{flex:0 0 20px;width:20px;height:20px;margin:2px 0 0;accent-color:var(--red)}.newsletter-consent span{min-width:0}.newsletter-page .contact-note+.contact-note{margin-top:28px} /* About: the supplied photograph stays uncropped, including the original credit. */ .about-page{padding-bottom:72px}.about-page>.breadcrumbs{margin-block:26px 38px} .about-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px;align-items:center;padding-bottom:60px} .about-intro h1{font-size:clamp(38px,4.3vw,60px);line-height:1.06;letter-spacing:-1.9px;margin:20px 0 26px;text-wrap:balance} .about-intro .eyebrow{color:var(--red)}.about-lead{font-size:21px;line-height:1.5;margin-bottom:20px}.about-intro>.muted{font-size:15px;line-height:1.8}.about-socials{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px} .about-photo{margin:0;min-width:0}.about-photo img{width:100%;height:auto;border-radius:var(--radius)}.about-photo figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:15px;color:var(--muted);font-size:9px;letter-spacing:1px;line-height:1.5} .about-story,.about-principles{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px;border-top:1px solid var(--border);padding-block:50px} .about-story h2,.about-principles h2{font-size:clamp(28px,3vw,38px);line-height:1.15;letter-spacing:-.8px;max-width:440px;text-wrap:balance} .about-prose{font-size:16px;line-height:1.85;color:var(--muted)}.about-prose p+p{margin-top:20px}.about-prose .text-link{color:var(--text);margin-top:18px} .about-discover{padding-block:42px 50px;border-top:1px solid var(--border)}.about-destinations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px} .about-destination{display:grid;grid-template-columns:26px minmax(0,1fr) 20px;gap:18px;border-top:1px solid var(--border);padding:26px 0;align-items:start}.about-index{color:var(--red);font-size:11px;font-weight:700;padding-top:4px}.about-destination h3{font-size:23px;line-height:1.3;letter-spacing:-.4px}.about-destination p{font-size:14px;color:var(--muted);line-height:1.75;margin-top:12px;max-width:450px}.about-destination:hover h3{color:var(--red)}.about-destination>span:last-child{color:var(--muted)} .about-contact{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 40px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:var(--radius);margin-top:10px}.about-contact h2{font-size:30px;line-height:1.2;letter-spacing:-.6px}.about-contact p:not(.eyebrow){max-width:650px;color:var(--muted);font-size:15px;margin-top:16px}.about-contact>.button{flex-shrink:0} @media(max-width:1000px){.about-hero{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.about-intro h1{font-size:42px;letter-spacing:-1.3px}.about-lead{font-size:18px}.about-story,.about-principles{gap:32px}.about-destinations{column-gap:28px}} @media(max-width:760px){.about-hero{grid-template-columns:1fr;gap:30px;padding-bottom:36px}.about-intro{max-width:620px}.about-intro h1{font-size:clamp(38px,7vw,54px);max-width:600px}.about-page>.breadcrumbs{margin-block:24px 30px}.about-story,.about-principles{grid-template-columns:1fr;gap:24px;padding-block:36px}.about-story h2,.about-principles h2{max-width:550px}.about-discover{padding-block:32px}.about-destinations{grid-template-columns:1fr}.about-destination{padding-block:24px;gap:14px}.about-destination h3{font-size:22px}.about-contact{flex-direction:column;align-items:flex-start;padding:28px 24px;gap:24px}.about-contact h2{font-size:27px}.about-page{padding-bottom:44px}} @media(max-width:380px){.about-intro h1{font-size:34px;letter-spacing:-1px}.about-photo figcaption{font-size:8px;letter-spacing:.5px}.about-contact{padding:24px 20px}} /* Community offers: one wide card or up to three equal cards. */ /* Phase 2 login contains no private article HTML before gateway authorization. */ /* Every admin view ended flush against the bottom of the page — the last table, card row or panel touching the edge with nothing under it, because a trailing margin on the last child collapses out of its container. The padding belongs to the shell, so it applies to the workspace and to the isolated QA harness alike, both of which carry this class. */ .newsroom-auth{min-height:60vh;padding-bottom:56px}.admin-login-panel{width:min(100%,530px);margin:36px auto 60px}.admin-login-panel h1{font-size:clamp(32px,4vw,46px);line-height:1.12;margin:20px 0}.admin-login-panel>.muted{margin-bottom:28px}.admin-login-panel fieldset{border:0;padding:0;min-width:0}.admin-login-panel .form-field{margin-bottom:22px}.admin-login-panel .button{width:100%;margin-top:6px}.admin-login-panel .fine-print{margin-top:22px}.admin-reset{display:block;background:none;border:0;margin:14px auto 0;padding:12px 0;color:var(--muted)}.newsroom-auth [hidden]{display:none}.newsroom-auth #admin-auth-status:not(:empty){max-width:720px;margin:20px auto;padding:18px;border:1px solid var(--border);border-radius:8px;font-size:14px}.admin-live-queue{display:grid;gap:12px}.admin-live-row{display:grid;grid-template-columns:40px minmax(0,1fr) 150px 110px;gap:20px;align-items:center;padding:20px;border:1px solid var(--border);border-radius:8px}.admin-live-row h2{font-size:18px;line-height:1.5}.admin-live-row>*{min-width:0;overflow-wrap:anywhere}.admin-live-editions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.admin-live-edition{min-width:0;padding:26px;border:1px solid var(--border);border-radius:10px;overflow-wrap:anywhere}.admin-live-edition h2{font-size:28px;line-height:1.35;margin:18px 0}.admin-live-edition p,.admin-live-edition ul{margin:18px 0;line-height:1.8}.admin-live-edition h3{font-size:22px;margin:24px 0 16px}.admin-live-edition ul{padding-left:24px}.newsroom-auth .admin-nav{gap:24px} @media(max-width:760px){.admin-live-editions{grid-template-columns:minmax(0,1fr)}.admin-live-row{grid-template-columns:40px minmax(0,1fr);gap:12px}.admin-live-row .fine-print{grid-column:2}.admin-live-row .button{grid-column:2;justify-self:start}.admin-live-edition{padding:20px}.admin-login-panel{margin-block:28px 40px}} /* The offers band sits in the home page's run of .news-section blocks, so it keeps their rhythm: the same 42px inside the top rule and the same 42px under the last card. It carried padding-top:32px and no bottom padding at all, which put its rule 24px after the section above and left its cards hard against the next. */ .community-offers{padding-block:42px 42px;border-top:1px solid var(--border)}.community-offers .section-heading{margin-bottom:14px}.offers-introduction{font-size:15px;color:var(--muted);margin-bottom:26px}.community-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.community-offer-grid[data-count="1"]{grid-template-columns:1fr}.community-offer-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} .community-offer-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #403b34;border-radius:12px;background:var(--surface)}.offer-benefit{padding:24px 28px;background:linear-gradient(120deg,#28221d,#1b1918);color:#f0d1a4;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;border-bottom:1px solid #403b34}.offer-benefit-label{font-size:8px;letter-spacing:1.4px;font-weight:700;color:#c4b49e;line-height:1.5}.offer-discount{display:flex;align-items:baseline;gap:4px;margin:12px 0 2px;line-height:1}.offer-discount strong{font:800 76px/.95 var(--display);letter-spacing:-4px}.offer-discount>span{font:600 32px/1 var(--display);letter-spacing:-1px}.offer-discount-label{font-size:10px;letter-spacing:2px;font-weight:700;margin-top:10px}.offer-description{padding:26px 28px 0;flex:1;min-width:0}.offer-disclosure{font-size:10px;line-height:1.6;color:#cabca8;margin-bottom:12px}.offer-description h3{font-size:25px;line-height:1.25;letter-spacing:-.5px;margin-bottom:14px}.offer-description h3+p{font-size:14px;color:var(--muted);line-height:1.75}.offer-audience{display:block;font-size:11px;color:#c9c6c0;margin-top:18px}.offer-action{padding:24px 28px 28px;min-width:0}.offer-button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:46px;padding:12px 16px;border:1px solid #73634e;border-radius:6px;background:transparent;color:#efdabd;font-size:12px;font-weight:600;cursor:pointer}.offer-action p{font-size:11px;line-height:1.6;color:var(--muted);margin-top:10px} .community-offer-grid[data-count="1"] .community-offer-card{display:grid;grid-template-columns:240px minmax(0,1fr) 230px;align-items:stretch}.community-offer-grid[data-count="1"] .offer-benefit{border-bottom:0;border-right:1px solid #403b34;padding:30px}.community-offer-grid[data-count="1"] .offer-description{padding:30px 34px}.community-offer-grid[data-count="1"] .offer-action{display:flex;flex-direction:column;justify-content:center;padding:30px 28px 30px 0} @media(max-width:1000px){.community-offer-grid{gap:16px}.offer-benefit{padding:22px}.offer-description{padding:24px 22px 0}.offer-action{padding:22px}.community-offer-grid[data-count="1"] .community-offer-card{grid-template-columns:190px minmax(0,1fr)}.community-offer-grid[data-count="1"] .offer-benefit{grid-row:1/3;padding:24px}.community-offer-grid[data-count="1"] .offer-description{padding:24px 26px 0}.community-offer-grid[data-count="1"] .offer-action{padding:20px 26px 26px;max-width:360px}.community-offer-grid[data-count="1"] .offer-action p{max-width:260px}} @media(max-width:760px){.community-offer-grid,.community-offer-grid[data-count="2"]{grid-template-columns:1fr}.community-offer-grid[data-count="1"] .community-offer-card{display:flex}.community-offer-grid[data-count="1"] .offer-benefit{border-right:0;border-bottom:1px solid #403b34;padding:24px}.community-offer-grid[data-count="1"] .offer-description{padding:24px 24px 0}.community-offer-grid[data-count="1"] .offer-action{padding:22px 24px 24px;max-width:none}.community-offer-grid[data-count="1"] .offer-action p{max-width:none}.offer-benefit{padding:24px}.offer-description{padding:24px 24px 0}.offer-action{padding:22px 24px 24px}.offer-discount strong{font-size:68px}.community-offers .section-heading h2{font-size:26px;line-height:1.25}} /* Offers are omitted completely when no visible records remain. */ /* margin-top only: the section that follows brings its own 40px, exactly as one .news-section follows another. */ .community-offers-home{margin:40px 0 0;scroll-margin-top:120px} /* .news-section drops to 28px on both counts at this width; the offers band follows it rather than keeping a desktop gap on a phone. */ @media(max-width:640px){.community-offers{padding-block:28px}.community-offers-home{margin-top:28px}} .community-offer-card,.offer-detail-page{overflow-wrap:anywhere}.offer-button{cursor:pointer}.offer-button:hover{background:#2a241e;border-color:#c4a982} .offer-detail-page{padding-bottom:72px}.offer-detail-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;max-width:1040px;margin:42px auto 0;align-items:start}.offer-detail-grid>.offer-benefit{border:1px solid #403b34;border-radius:12px;min-height:260px}.offer-detail-grid h1{font-size:clamp(32px,4vw,52px);line-height:1.15;margin:16px 0 22px}.offer-detail-grid .dek{color:var(--muted);font-size:18px;line-height:1.75}.offer-detail-grid h2{margin:30px 0 14px;font-size:24px}.offer-terms{white-space:pre-wrap;line-height:1.85;color:var(--muted);margin-bottom:28px}.offer-code{padding:20px;border:1px solid var(--border);border-radius:8px;margin:24px 0;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}.offer-code span{font-size:13px;color:var(--muted)}.offer-code code{font-size:22px;color:#f0d1a4;white-space:pre-wrap}.offer-detail-notice{padding:18px;background:var(--surface);border:1px dashed var(--border);border-radius:8px;font-size:14px;color:var(--muted)} .admin-nav{flex-wrap:wrap} .offers-empty{border:1px solid var(--border);border-radius:8px;padding:20px;line-height:1.8;font-size:14px;margin-block:24px;background:var(--surface)}.offers-empty{color:var(--muted)} .offers-admin-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:40px}.offers-admin-card{min-width:0;padding:24px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.offers-admin-card h2{font-size:20px;line-height:1.4}.offers-admin-card p{font-size:13px;color:var(--muted);margin-top:5px}.offers-admin-card .fine-print{display:block;margin-top:12px}.offers-admin-card>.text-link{min-height:44px;display:inline-flex;align-items:center} @media(max-width:1000px){.offers-admin-list{gap:14px}.offers-admin-card{padding:18px}.offer-detail-grid{grid-template-columns:220px minmax(0,1fr);gap:30px}} @media(max-width:760px){.offer-detail-grid{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:30px}.offer-detail-grid>.offer-benefit{min-height:220px}.offer-detail-grid .button{white-space:normal}.offers-admin-list{grid-template-columns:minmax(0,1fr)}.offer-detail-page{padding-bottom:44px}} .calendar-event-marker{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px;color:var(--red)}.calendar-event-list{padding-top:24px}.calendar-event-list>p{margin-bottom:20px}.calendar-event-list>p.muted{margin-bottom:0}.calendar-event-list article{scroll-margin-top:130px;overflow-wrap:anywhere}.calendar-event-list article p{margin-top:12px}.calendar-event-list article .organizer-links{margin-top:16px} /* Phase 3 editor: contained forms and separate edition panels. */ .editor-create{max-width:860px;margin:24px auto}.editor-create .form-field,.admin-live-edition .form-field{margin:20px 0}.editor-create textarea,.admin-live-edition textarea{min-height:110px;resize:vertical}.editor-create input,.editor-create textarea,.editor-create select,.admin-live-edition input,.admin-live-edition textarea,.admin-live-edition select{width:100%;max-width:100%;font:inherit;box-sizing:border-box}.editor-check{display:flex;gap:12px;align-items:flex-start;line-height:1.6;margin:14px 0;cursor:pointer}.editor-check input{width:20px!important;min-width:20px;height:20px;margin-top:3px}.editor-sources{min-width:0;border:1px solid var(--border);padding:16px;border-radius:8px;margin:24px 0}.editor-source{border-bottom:1px solid var(--border);padding-bottom:16px;margin-bottom:20px}.editor-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}.editor-actions>.editor-check{flex-basis:100%}.editor-focused{grid-template-columns:minmax(0,1fr);max-width:940px;margin-inline:auto}.admin-live-edition details{padding:16px 0;border-block-end:1px solid var(--border)}.admin-live-edition summary{cursor:pointer;min-height:44px;align-content:center}.admin-live-edition form{margin:24px 0}.editor-comment{border-left:3px solid var(--border);padding-left:16px;white-space:pre-wrap}.newsroom-auth .admin-nav{flex-wrap:wrap}.editor-create .button,.admin-live-edition .button{white-space:normal;min-height:44px}.editor-create select,.admin-live-edition select{padding:12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text)} @media(max-width:600px){.editor-actions>.button{flex:1 1 160px}.editor-create{margin-block:16px}.editor-sources{padding:12px}.admin-live-edition{padding:16px}.editor-create .admin-live-editions{gap:20px}} /* Keep each language panel at its natural height. */ .newsroom-auth .admin-live-editions{align-items:start} .newsroom-auth .offers-admin-card{overflow-wrap:anywhere} /* Authenticated workspace: section chrome shared by the queue, the activity log and the trackday list, so every view is headed and measured the same way instead of opening with a bare

. */ .admin-view-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 24px} .admin-view-heading h2{font:650 26px/1.25 var(--display);letter-spacing:-.5px} .admin-view-heading .eyebrow{margin-bottom:8px} .admin-view-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .admin-view-actions .button{font-size:11px;padding-inline:14px} .admin-detail-heading{display:grid;gap:18px;margin-bottom:24px} .admin-detail-heading .admin-view-heading{margin:0} .admin-back-button{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;font-size:13px;line-height:1.4;text-transform:none;letter-spacing:0} .admin-back-button:focus-visible{outline:2px solid var(--text);outline-offset:4px} /* The status counts double as the queue filter, so they are buttons rather than links and carry a pressed state. */ .stats-grid.stats-filter{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:30px} .stats-filter .stat-card{appearance:none;font:inherit;text-align:left;cursor:pointer;gap:10px;transition:border-color .12s,background .12s} .stats-filter .stat-card strong{font:650 32px/1 var(--display)} .stats-filter .stat-card:hover{border-color:#3c3c46} .stats-filter .stat-card[aria-current],.stats-filter .stat-card[aria-pressed="true"]{border-color:var(--red);background:var(--surface-2)} .stats-filter .stat-card[aria-current]>span,.stats-filter .stat-card[aria-pressed="true"]>span{color:var(--text)} /* Table cells built by the editor: a review action, an evidence warning and the audit log's action names. */ .queue-table td .text-link{background:none;border:0;padding:0;color:var(--red);cursor:pointer;white-space:nowrap} .queue-table td code{font-size:11px;color:var(--text);overflow-wrap:anywhere} .queue-table .queue-story p{overflow-wrap:anywhere} .queue-table td .fine-print{color:var(--muted);font-size:10px} .status-rejected{background:#3a2333;color:#f0aad0} .status-candidate,.status-fetching,.status-classified{background:var(--surface-2);color:var(--muted)} .status-scheduled{background:#123239;color:#8fd5e2} .status-cancelled,.status-postponed{background:#2a2c30;color:#c3c7ce} @media(max-width:1000px){.stats-grid.stats-filter{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.stats-grid.stats-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-view-heading h2{font-size:22px} .stats-filter .stat-card strong{font-size:26px} .stats-grid.stats-filter .stat-card:last-child{grid-column:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}} /* Workspace tab bar: the open view is marked, matching how the public nav marks the current category. */ /* The workspace nav sits directly above a section heading, so it keeps its own clear space. */ .newsroom-auth .admin-nav{margin-bottom:36px;padding-block:12px} /* Source registry: state belongs on the card header, and the review form folds away so eighteen sources stay scannable instead of becoming eighteen stacked forms. */ .source-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap} .source-card-head h3{font-size:18px;line-height:1.4} .source-card-head .fine-print{margin-top:6px} .source-states{display:flex;gap:8px;flex-wrap:wrap} .source-review-fold{border-top:1px solid var(--border);margin-top:18px;padding-top:4px} .source-review-fold summary{cursor:pointer;min-height:44px;align-content:center;font-size:12px;color:var(--muted)} .source-review-fold[open] summary{color:var(--text);margin-bottom:8px} /* An opened fold started its form flush against the summary it opened from. */ .source-review-fold>summary+form{margin-top:14px} @media(max-width:640px){.source-card-head{gap:12px}.source-card-head h3{font-size:16px} } /* One chip per language on a queue row: the language code and that edition's own state, so a story that is live in Greek and still pending in English says exactly that. */ .edition-states{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .edition-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 9px;border-radius:5px;background:var(--surface-2);font-size:10px;white-space:nowrap} .edition-chip strong{font:700 10px/1 var(--body);letter-spacing:.6px;opacity:.85} .edition-missing{background:transparent;border:1px dashed var(--border);color:var(--muted)} @media(max-width:760px){.edition-states{flex-direction:row;flex-wrap:wrap}} /* A refused action used to report itself only in the status line at the top of the page, far above the button that was clicked, which read as the button doing nothing at all. */ .editor-feedback:empty{display:none} .editor-feedback{flex-basis:100%;margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--muted)} .editor-feedback.is-error{color:#f3a5a5} .editor-actions>.editor-check{flex-basis:100%;margin-bottom:4px} /* Registry curation sits below the fold-away review form: check an endpoint, or remove a source outright. */ .source-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .source-tools .button{font-size:11px} /* A table's action column has no visible header, but it must still be announced. */ .queue-table th.sr-only-th{font-size:0;color:transparent} /* The admin page opens in a neutral state while a stored session is checked, so a returning owner never sees the sign-in form flash past. It cannot be decided on the server: the session lives only in the browser. */ .admin-restoring{display:flex;align-items:center;justify-content:center;min-height:45vh} .admin-restoring[hidden]{display:none} .admin-spinner{width:30px;height:30px;border:2px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:admin-spin .7s linear infinite} @media(prefers-reduced-motion:reduce){.admin-spinner{animation-duration:2.4s}} @keyframes admin-spin{to{transform:rotate(360deg)}} /* Image picker: the candidates a story's sources offered, with the one on the article marked. */ .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:16px 0} .media-card{border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--surface);min-width:0; text-align:left;font:inherit;color:inherit;cursor:pointer;display:block;width:100%;transition:border-color .12s,box-shadow .12s} .media-card:hover{border-color:#3c3c46} .media-card.is-selected{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset;background:var(--surface-2)} .media-card.is-chosen .status-pill{white-space:nowrap} .media-card:focus-visible{outline:2px solid var(--red);outline-offset:2px} .media-choose{margin-top:4px} .media-card img{width:100%;height:auto;border-radius:5px;display:block;background:var(--surface-2)} .media-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px} .media-card .form-field{margin:12px 0 8px} .media-card .editor-check{margin:10px 0} .media-card .button{width:100%;white-space:normal} .media-card>.fine-print{margin-top:8px;overflow-wrap:anywhere} /* The shared source snapshots sat hard against the bottom of the edition columns, reading as part of the last panel rather than as the story-wide reference material it is. */ .editor-evidence{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)} .editor-evidence>summary{cursor:pointer;font:700 11px/1 var(--body);letter-spacing:.8px;text-transform:uppercase;color:var(--muted)} /* A fold that opens onto a list of further folds — version history is the one that does this — put its first entry hard against its own summary. */ .admin-live-edition details>summary+details{margin-top:14px} /* Sharing reads as a row of identical grey pills. A hint of each network's own colour on hover is enough to make the row scannable without pasting brand logos into the page. */ .share-button[data-network="Facebook"]:hover:not(:disabled){border-color:#1877f2;color:#4a97f7} .share-button[data-network="WhatsApp"]:hover:not(:disabled){border-color:#25d366;color:#3ddc7d} .share-button[data-network="X"]:hover:not(:disabled){border-color:#f2f2f2;color:#fff}.share-button[data-network="Email"]:hover:not(:disabled){border-color:#8c8c96;color:#e6e6ea} .share-button.native-share,.share-button.copy-share{border-color:var(--red);color:#f0a0a6} .share-button.native-share:hover,.share-button.copy-share:hover{background:var(--red-surface);color:#fff} .share-button:disabled{cursor:not-allowed} /* The same review controls on a page of their own, with nothing to fold away. */ .source-review-flat{border-top:1px solid var(--border);padding-top:16px} /* The messages inbox and the subscriber list, 2026-09-12. Both filter with plain selects that reload on change, so the bar is a row of labelled controls and never a form with a button to press. */ .admin-filter-bar{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid var(--border)} .admin-filter-bar .form-field{margin:0;min-width:210px} .admin-filter-bar .form-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:7px} .admin-filter-bar select{width:100%} /* An unread row earns the one piece of emphasis in the table: its sender reads as bold, nothing else moves. */ tr.is-unread .queue-story p,tr.is-unread td:first-child p{font-weight:700;color:var(--text)} tr.is-unread td:first-child{border-left:2px solid var(--red)} .status-contact-new{background:#36262a;color:#ffb4ba} .status-contact-read{background:var(--surface-2);color:var(--muted)} .status-contact-archived{background:#21262f;color:#a9bdd6} /* One message, opened. The facts are a definition list so the labels stay readable at narrow widths, and the text keeps the reader's own paragraph breaks. */ .message-facts{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:10px 22px;margin:0 0 28px;font-size:13px} .message-facts dt{color:var(--muted);font-size:11px;align-self:center} .message-facts dd{margin:0;overflow-wrap:anywhere} .message-body{border-left:2px solid var(--border);padding:4px 0 4px 20px;margin-bottom:30px;max-width:var(--reading)} .message-body p{font-size:16px;line-height:1.75;margin:0 0 16px} .message-body p:last-child{margin-bottom:0} @media(max-width:640px){.admin-filter-bar{gap:14px}.admin-filter-bar .form-field{min-width:100%}.message-facts{grid-template-columns:1fr;gap:4px 0}.message-facts dd{margin-bottom:12px}.message-body{padding-left:14px}} /* The withdraw control in the subscriber table sat under a faint rule with a gap above it: .source-tools is built for the bottom of a card, where a separator belongs. Inside a table cell it needs none of that. */ td>.source-tools{margin-top:0;padding-top:0;border-top:0;gap:8px} /* The optional reason list on the unsubscribe page. A browser's default fieldset draws a border with the legend sitting on top of it, which cut through the line above; this drops the border and treats the legend as an ordinary field label, matching every other group of choices on the site. */ .unsubscribe-reasons{border:0;padding:0;margin:26px 0 0;min-width:0} .unsubscribe-reasons legend{padding:0;font-size:13px;font-weight:600;margin-bottom:4px} .unsubscribe-reasons .editor-check{font-size:14px;margin:10px 0;min-height:44px;align-items:center} /* Shown only when the security check never arrives, so it has to read as a problem rather than fine print. */ .captcha-warning{font-size:12px;line-height:1.7;color:#f3a5a5;border-left:2px solid #5a3034;padding:2px 0 2px 12px;margin:10px 0 0} /* Row actions inside a table cell. The pair that answers a question must never be split across two lines: a "Cancel" sitting alone under a red "Withdraw" reads as a second, unrelated control. Grouping them makes the pair one flex item, so if it cannot fit beside the other controls the whole pair moves together. */ .row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* display:flex beats the plain [hidden]{display:none} above on equal specificity and later source order, which showed both the question and its answer at once. Two classes settle it regardless of order. */ .row-actions[hidden]{display:none} .row-confirm{flex-wrap:nowrap;white-space:nowrap} .row-confirm .button{font-size:11px;padding:9px 12px;min-height:38px} td>.source-tools>.editor-feedback{flex-basis:100%;margin-top:6px} /* On a phone the table is a card of two columns, and the subscriber row's controls had half of it: about 138px, so "Withdraw" and "Cancel" broke mid-word and the longer Greek labels ran to three lines. The cell with the controls takes the whole width instead, when it has any to show. */ @media(max-width:760px){.queue-table td:has(>.source-tools :is(a,button)){grid-column:1/-1}} /* Why a reader left, under the state that says they did. A block of its own: .fine-print stays inline because the trackdays table uses it that way on purpose ("one page · health ok"), so this needs its own class rather than a rule that would run those two together instead. */ .state-reason{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:var(--muted)} /* The event list sits inside .calendar-panel, which is a bordered card with no padding of its own — every child supplies its own, and the calendar table is deliberately edge to edge. This one had padding-top and nothing else, so the note and the event entries ran flush against the card's left border. The alternative that fills the same slot when there are no events, .calendar-empty, was already padded on all four sides; this simply brings the populated state into line, at each of the breakpoints the toolbar and filters already use. */ .calendar-event-list{padding:24px} @media(max-width:1000px){.calendar-event-list{padding:20px}} @media(max-width:480px){.calendar-event-list{padding:20px 14px}} /* The offer list read as one tall box with doubled borders across it: .offers-admin-card carries a border and a background but no margin, and #admin-data is a plain block, so consecutive cards met edge to edge. The adjacent sibling selector spaces them without giving a lone card a stray margin underneath. The action inside them had no separation either — plain .button has no top margin, only particular contexts add one — so "Edit" sat directly against the line of text above it. Scoped to a direct child so the buttons inside a nested form, such as the source access review, keep their own spacing. */ .offers-admin-card+.offers-admin-card{margin-top:16px} .offers-admin-card>.button{margin-top:18px} /* The markup uses h3; the existing rule styled h2, so the size here was whatever the browser chose. */ .offers-admin-card h3{font-size:20px;line-height:1.4} /* The editorial card offered as a choice in the header-image picker. It is the real card — the same markup and the same rules the article uses — so the tile is a preview rather than an illustration of one. .media-card sizes photographs through .media-card img, which a div is not, and .story-visual already carries the aspect ratio, so all this needs is for the title to scale down to a 210px tile. */ .media-card-editorial .story-visual{width:100%} .media-card-editorial .editorial-graphic{padding:14px} .media-card-editorial .editorial-graphic strong{--graphic-title-size:30px} .media-card-editorial .graphic-brand,.media-card-editorial .graphic-foot{font-size:7px;letter-spacing:.8px} .media-choose>div[hidden]{display:none} /* The button that commits the choice sat against whatever ended the fields above it: 8px below the card's "Bottom line" input, 10px below the photograph's rights checkbox. It is a direct child of the form on both paths, so one rule separates it from either. */ /* The button is inline-flex, so its margin does not collapse with the margin of the block above it and the two add up. Dropping the trailing margin of whichever control ends the group — the card's last field or the photograph's rights checkbox — makes this one number the whole gap on either path. */ .media-choose>div>:last-child{margin-bottom:0} .media-choose>.button{margin-top:26px} /* The editor builds a field as