/* ============================================================
   Repository Fringe — field notes on open knowledge
   Scholarly-warm library editorial. Vanilla CSS, self-contained.
   ============================================================ */

:root{
  --paper:#F4EDDF;
  --card:#FBF6EC;
  --img-fill:#E7DCC4;
  --ink:#1C3A44;
  --ink-deep:#16303A;
  --ink-deepest:#0F272E;
  --accent:#B0833A;
  --accent-warm:#A9662F;
  --text:#2A2723;
  --muted:#4B473F;
  --muted-2:#5B574D;
  --meta:#6E6A5E;
  --on-dark:#EFE7D5;
  --on-dark-2:#C3D0D5;
  --on-dark-3:#8FA6AD;
  --border:#E2D6BC;
  --border-2:#DBCFB4;
  --line-dark:#2A4A54;

  --v-neutral:#9FB3B9;
  --v-weak:#E0A15F;
  --v-mid:#E7C063;
  --v-strong:#9FD0A6;

  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  --wrap:1240px;
  --measure:70ch;
  --radius:12px;
  --shadow:0 22px 44px -26px rgba(28,58,68,0.45);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--accent);}
::selection{background:var(--ink);color:var(--paper);}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);letter-spacing:-0.01em;font-weight:500;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
.serif{font-family:var(--serif);}
.eyebrow{font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--accent);}
.skip-link{position:absolute;left:-9999px;top:auto;}
.skip-link:focus{left:16px;top:12px;z-index:200;background:var(--accent);color:var(--ink-deep);padding:8px 14px;border-radius:6px;}

/* ---------- HEADER + NAV ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--paper);border-bottom:3px solid var(--accent);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px;}
.brand{display:flex;flex-direction:column;gap:2px;color:var(--paper);padding:12px 0;}
.brand .wordmark{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1;}
.brand .tagline{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#B9CBD1;}

.nav-toggle,.nav-toggle-label{display:none;}
.main-nav .nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px;}
.main-nav .nav-list>li{position:relative;display:flex;align-items:center;}
.main-nav .nav-list>li>a{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:15px;font-weight:500;color:#EAE0CC;border-radius:7px;white-space:nowrap;}
.main-nav .nav-list>li>a:hover{color:var(--paper);background:rgba(255,255,255,0.06);}
.has-sub>a::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.7;}

.nav-sub{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:100%;left:0;min-width:266px;
  background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);
  border-radius:0 0 11px 11px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.has-sub::after{content:"";position:absolute;top:100%;left:0;width:266px;height:12px;} /* hover bridge */
.has-sub:hover>.nav-sub,.has-sub:focus-within>.nav-sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav-sub li{margin:0;}
.nav-sub a{display:block;padding:9px 12px;border-radius:6px;font-size:14.5px;color:var(--text);font-family:var(--sans);}
.nav-sub a:hover{background:#F1E7CF;color:var(--ink);}
.nav-sub .sub-head{display:block;padding:4px 12px 8px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta);border-bottom:1px solid var(--border);margin-bottom:6px;}

/* ---------- HERO ---------- */
.hero{padding:66px 0 58px;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.kicker-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.dot{width:4px;height:4px;border-radius:50%;background:#C7B59A;flex:none;}
.kicker-muted{font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--meta);}
.hero h1{font-size:60px;line-height:1.03;margin:0 0 20px;text-wrap:balance;}
.hero .dek{font-size:20px;line-height:1.55;color:var(--muted);max-width:30em;margin:0 0 28px;}
.hero-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);padding:14px 26px;border-radius:8px;font-weight:500;font-size:15px;font-family:var(--sans);border:none;cursor:pointer;transition:background .15s ease;}
.btn:hover{background:var(--ink-deep);color:var(--paper);}
.btn.ghost{background:transparent;border:1px solid var(--line-dark);color:var(--on-dark-2);}
.btn.ghost:hover{background:var(--ink-deepest);color:var(--paper);}
.btn.gold{background:var(--accent);color:var(--ink-deep);}
.btn.gold:hover{filter:brightness(1.07);background:var(--accent);}
.read-meta{font-size:14px;color:var(--meta);}
.framed{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(28,58,68,0.4);}
.framed img{width:100%;height:100%;object-fit:cover;}
.hero-figure{height:470px;}
.img-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(to top,rgba(28,58,68,0.78),transparent);color:var(--paper);font-size:13px;letter-spacing:.02em;pointer-events:none;}

/* ---------- SECTION SCAFFOLD ---------- */
.band{padding:64px 0;}
.band.dark{background:var(--ink);color:var(--on-dark);}
.band.paper{background:var(--paper);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.section-head.ruled{border-top:1px solid var(--border-2);padding-top:26px;}
.section-head h2{font-size:32px;margin:0;}
.band.dark .section-head h2{color:var(--paper);}
.section-note{font-size:14px;color:var(--meta);}
.band.dark .section-note{color:var(--on-dark-3);}

/* ---------- BROWSE-BY-SUBJECT CARDS ---------- */
.subject-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.subject-card{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 22px 22px;color:var(--text);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.subject-card:hover{transform:translateY(-3px);border-color:#C9B583;box-shadow:0 18px 34px -22px rgba(28,58,68,0.45);}
.subject-card .ico{width:34px;height:34px;color:var(--accent);margin-bottom:14px;}
.subject-card h3{font-size:20px;margin:0 0 8px;font-weight:600;}
.subject-card p{font-size:14.5px;line-height:1.55;color:var(--muted-2);margin:0 0 16px;flex:1;}
.subject-card .go{font-size:13.5px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}

/* ---------- EXPLAINER (repository steps) ---------- */
.explainer-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:52px;align-items:center;}
.browser{border-radius:12px;overflow:hidden;border:1px solid var(--line-dark);box-shadow:0 30px 60px -30px rgba(0,0,0,0.5);}
.browser-bar{background:var(--ink-deep);padding:11px 14px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line-dark);}
.browser-bar .b{width:10px;height:10px;border-radius:50%;}
.browser-bar .addr{margin-left:12px;flex:1;background:var(--ink-deepest);border-radius:5px;padding:5px 12px;font-size:11.5px;color:var(--on-dark-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.browser .shot{height:330px;background:var(--ink-deepest);}
.browser .shot img{width:100%;height:100%;object-fit:cover;}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.steps li{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line-dark);}
.steps li:last-child{border-bottom:none;}
.step-n{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-family:var(--serif);font-size:17px;display:flex;align-items:center;justify-content:center;}
.steps h4{margin:3px 0 4px;font-size:17.5px;color:var(--paper);font-weight:600;}
.steps p{margin:0;font-size:15px;line-height:1.5;color:#B7C6CB;}
.explainer-foot{margin:38px 0 0;font-size:14px;color:var(--on-dark-3);}

/* ---------- ARTICLE CARD GRID (even-height) ---------- */
.card-grid{display:grid;gap:26px;grid-template-columns:repeat(3,1fr);}
.post-card{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--text);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.post-card:hover{transform:translateY(-3px);border-color:#C9B583;box-shadow:0 18px 34px -22px rgba(28,58,68,0.45);}
.post-card .thumb{aspect-ratio:16/10;background:var(--img-fill);overflow:hidden;}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;}
.post-card .body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;}
.cat-tag{font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:10px;}
.post-card h3{font-size:21px;line-height:1.18;margin:0 0 10px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post-card .excerpt{font-size:14.5px;line-height:1.55;color:var(--muted-2);margin:0 0 18px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.post-card .meta{font-size:13px;color:var(--meta);margin-top:auto;}

/* CSS-only "show more" for feed */
.more-toggle{display:none;}
.more-cards{display:none;}
.more-toggle:checked ~ .more-cards{display:grid;}
.more-label{display:inline-flex;align-items:center;gap:8px;margin:28px auto 0;cursor:pointer;font-weight:600;color:var(--accent);font-size:15px;border:1px solid var(--border-2);padding:11px 22px;border-radius:8px;background:var(--card);width:max-content;}
.more-label:hover{background:#F1E7CF;}
.more-toggle:checked ~ .feed-more-wrap .more-word{font-size:0;}
.more-toggle:checked ~ .feed-more-wrap .more-word::before{content:"Show fewer";font-size:15px;}
.feed-more-wrap{display:flex;justify-content:center;}

/* ---------- CREDIBILITY CHECKLIST ---------- */
.checklist-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:0.82fr 1.18fr;}
.checklist-aside{background:var(--ink-deep);color:var(--on-dark);padding:44px 40px;display:flex;flex-direction:column;}
.checklist-aside h2{font-size:38px;line-height:1.05;color:var(--paper);margin:12px 0 14px;}
.checklist-aside p.lead-sm{font-size:15.5px;line-height:1.6;color:var(--on-dark-2);margin:0 0 26px;}
.score-wrap{margin-top:auto;}
.score{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;}
.score .num{font-family:var(--serif);font-size:46px;color:var(--accent);line-height:1;}
.score .of{font-size:15px;color:var(--on-dark-3);}
.progress{height:8px;border-radius:5px;background:var(--ink-deepest);overflow:hidden;margin-bottom:14px;}
.progress>i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width .35s ease;}
.verdict{font-size:14.5px;line-height:1.45;margin:0 0 18px;font-weight:500;color:var(--v-neutral);}
.checklist-items{padding:28px 30px;display:flex;flex-direction:column;gap:4px;}
.check{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:14px;cursor:pointer;font:inherit;transition:background .15s ease,border-color .15s ease;}
.check:hover{background:#F7EFDD;}
.check .box{flex:none;width:26px;height:26px;border-radius:7px;border:1.5px solid #C9BB9C;background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;color:#fff;transition:all .15s ease;}
.check .box svg{width:15px;height:15px;opacity:0;transform:scale(.6);transition:all .15s ease;}
.check[aria-pressed="true"]{background:#F4ECD8;border-color:#E3D3AE;}
.check[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent);}
.check[aria-pressed="true"] .box svg{opacity:1;transform:scale(1);}
.check .q{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:2px;display:block;}
.check .h{font-size:13.5px;line-height:1.45;color:var(--meta);display:block;}

/* ---------- EDITOR'S NOTE ---------- */
.editor-note{max-width:900px;margin:0 auto;text-align:center;}
.editor-note blockquote{margin:20px auto 22px;max-width:24em;}
.editor-note blockquote p{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.42;color:var(--ink);margin:0;text-wrap:pretty;}
.editor-note .sig{font-size:14.5px;color:var(--meta);margin:0;}

/* ---------- SPONSORS (The stacks that keep the doors open) ---------- */
.supporters-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.supporter-feat{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;height:100%;}
.logo-plate{background:var(--ink-deepest);border-radius:9px;height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.logo-plate img{max-height:52px;width:auto;object-fit:contain;opacity:.95;}
.supporter-feat .sponsor-blurb{font-size:14px;line-height:1.5;color:var(--muted-2);min-height:1.5em;}
.supporters-roll{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:14px;}
.supporter-reg .logo-plate{height:66px;background:var(--ink-deep);}
.supporter-reg .logo-plate img{max-height:34px;}
.supporter-reg .sponsor-blurb{font-size:12px;color:var(--meta);margin-top:8px;display:block;line-height:1.4;}
.supporters-regulars{margin-top:46px;}

/* ---------- NEWSLETTER ---------- */
.newsletter{background:var(--ink);color:var(--on-dark);}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:60px 0;}
.newsletter h2{font-size:36px;line-height:1.08;color:var(--paper);margin:0 0 12px;}
.newsletter p{font-size:16px;line-height:1.6;color:var(--on-dark-2);margin:0;max-width:30em;}
.news-form{display:flex;gap:10px;max-width:460px;}
.news-form input{flex:1;padding:14px 16px;border-radius:8px;border:1px solid #35545E;background:var(--ink-deep);color:var(--paper);font-family:var(--sans);font-size:15px;}
.news-form input::placeholder{color:#7C949C;}
.news-fine{font-size:13px;color:var(--on-dark-3);margin:12px 0 0;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink-deep);color:#B7C6CB;}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding:54px 0 40px;}
.footer-cols .fbrand{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--paper);}
.footer-cols p{font-size:14px;line-height:1.6;color:#94AAB1;margin:12px 0 0;max-width:26em;}
.footer-cols h4{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#7C949C;margin:0 0 14px;font-family:var(--sans);font-weight:600;}
.footer-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer-cols ul a{color:#C7D3D8;font-size:14.5px;}
.footer-cols ul a:hover{color:var(--accent);}
.footer-legal{border-top:1px solid var(--line-dark);padding:22px 0 40px;font-size:13px;line-height:1.6;color:#7C949C;}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-hero{padding:56px 0 0;}
.crumb{font-size:14px;color:var(--meta);display:inline-flex;align-items:center;gap:7px;margin-bottom:26px;}
.article-head{max-width:900px;}
.article-head h1{font-size:52px;line-height:1.05;margin:0 0 20px;text-wrap:balance;}
.article-head .standfirst{font-size:22px;line-height:1.5;color:var(--muted);margin:0 0 26px;max-width:34ch;max-width:38ch;}
.byline{display:flex;align-items:center;gap:15px;font-size:14.5px;color:var(--meta);padding-bottom:32px;border-bottom:1px solid var(--border-2);flex-wrap:wrap;}
.lead-figure{margin:38px 0 0;}
.lead-figure .framed{height:440px;}

/* asymmetric article layout: main measure + margin rail */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:56px;align-items:start;padding:50px 0 0;}
.article-body{min-width:0;font-size:19px;line-height:1.75;color:#33302A;padding-inline:0;counter-reset:sec;}
.article-body>*{max-width:var(--measure);}
.article-body .full,.article-body figure.wide,.article-body .breakout{max-width:none;}
.article-body p{margin:0 0 24px;}
.article-body h2{font-size:30px;line-height:1.15;margin:52px 0 16px;counter-increment:sec;}
.article-body h2.numbered::before{content:counter(sec,decimal-leading-zero);display:block;font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:var(--accent);font-weight:600;margin-bottom:6px;}
.article-body h3{font-size:22px;margin:34px 0 10px;font-weight:600;}
.article-body>p:first-of-type::first-letter,.article-body .lead + p::first-letter{}
.dropcap::first-letter{font-family:var(--serif);float:left;font-size:74px;line-height:.82;font-weight:600;color:var(--accent);margin:8px 12px 0 0;}
.article-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1.5px;}
.article-body a:hover{color:var(--accent);}
.article-body a.gl-link{text-decoration:none;border-bottom:1px dotted var(--accent);color:inherit;}
.article-body a.gl-link:hover{color:var(--accent);border-bottom-style:solid;}
.article-body strong{color:var(--ink);font-weight:600;}
.article-body code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.9em;background:#EDE3CD;padding:2px 6px;border-radius:5px;}
.article-body ul,.article-body ol{margin:0 0 24px;padding:0;}
.article-body ul{list-style:none;}
.article-body ul li{position:relative;padding-left:30px;margin-bottom:12px;}
.article-body ul li::before{content:"";position:absolute;left:4px;top:12px;width:8px;height:8px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg);}
.article-body ol{counter-reset:li;list-style:none;}
.article-body ol li{position:relative;padding-left:34px;margin-bottom:12px;counter-increment:li;}
.article-body ol li::before{content:counter(li);position:absolute;left:0;top:1px;font-family:var(--serif);color:var(--accent);font-weight:600;}

/* margin rail */
.rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;}
.rail-head{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--meta);font-weight:600;}
.rail-card{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:13px 15px;}
.rail-card .rc-kind{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);font-weight:600;display:block;margin-bottom:3px;}
.rail-card .rc-name{font-size:15px;font-weight:600;color:var(--ink);font-family:var(--serif);display:block;margin-bottom:2px;}
.rail-card .rc-ctx{font-size:13px;line-height:1.4;color:var(--muted-2);}

.related{max-width:var(--wrap);margin:60px auto 0;border-top:1px solid var(--border-2);padding-top:44px;}
.related h2{font-size:28px;margin:0 0 24px;}
.related-links,.further-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.related-links li{margin:0;}
.related-links a,.further-grid a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;color:var(--text);transition:transform .16s ease,border-color .16s ease;}
.related-links a:hover,.further-grid a:hover{transform:translateY(-3px);border-color:#C9B583;}
.related-links .rl-cat{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:10px;}
.related-links .rl-title{font-family:var(--serif);font-size:19px;line-height:1.2;color:var(--ink);font-weight:600;}

/* ============================================================
   PALETTE COMPONENTS (article + styleguide)
   ============================================================ */
.lead{font-size:22px;line-height:1.55;color:var(--muted);font-family:var(--sans);margin:0 0 28px;}
.pullquote{margin:44px 0;padding:0 0 0 26px;border-left:3px solid var(--accent);}
.pullquote p{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.4;color:var(--ink);margin:0;}
.blockquote{margin:34px 0;padding:22px 26px;background:var(--card);border-radius:10px;border:1px solid var(--border);}
.blockquote p{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 10px;}
.blockquote cite{font-style:normal;font-size:14px;color:var(--meta);}
.callout{margin:34px 0;padding:22px 24px;background:#EFE6D2;border:1px solid var(--border);border-radius:12px;position:relative;}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent);border-radius:12px 0 0 12px;}
.callout p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-deep);}
.callout .co-head{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-warm);margin-bottom:8px;}
.callout .co-head svg{width:17px;height:17px;}
.note{margin:26px 0;padding:14px 16px 14px 44px;position:relative;font-size:15.5px;line-height:1.55;color:var(--muted);background:var(--card);border:1px dashed var(--border-2);border-radius:9px;}
.note::before{content:"";position:absolute;left:15px;top:16px;width:18px;height:18px;background:var(--accent);-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;}
.note svg{position:absolute;left:14px;top:15px;width:19px;height:19px;color:var(--accent);}

/* versus / compare */
.versus{width:100%;border-collapse:separate;border-spacing:0;margin:34px 0;font-family:var(--sans);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.versus th,.versus td{padding:14px 16px;text-align:left;font-size:15.5px;vertical-align:top;border-bottom:1px solid var(--border);}
.versus thead th{background:var(--ink);color:var(--paper);font-family:var(--serif);font-weight:600;font-size:16px;}
.versus tbody th{background:var(--card);color:var(--ink);font-weight:600;width:26%;}
.versus tr:last-child th,.versus tr:last-child td{border-bottom:none;}
.versus td{color:var(--muted);background:#FCFAF4;}

/* data table */
.datatable{width:100%;border-collapse:collapse;margin:34px 0;font-family:var(--sans);font-size:15.5px;}
.datatable caption{text-align:left;font-size:13px;color:var(--meta);margin-bottom:10px;font-style:italic;}
.datatable th,.datatable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);}
.datatable thead th{background:var(--ink);color:var(--paper);font-weight:600;font-family:var(--serif);}
.datatable tbody tr:nth-child(even){background:var(--card);}
.datatable td{color:var(--muted);}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:34px 0;}
.statblock{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:12px;padding:22px 20px;text-align:center;}
.stat-num{display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--ink);}
.stat-label{display:block;font-size:13.5px;line-height:1.4;color:var(--muted-2);margin-top:8px;}

/* timeline */
.timeline{list-style:none;margin:34px 0;padding:0;position:relative;}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border-2);}
.timeline li{position:relative;padding:0 0 22px 40px;}
.timeline li::before{content:"";position:absolute;left:3px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--border-2);}
.timeline .t-when{display:block;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--accent-warm);letter-spacing:.02em;margin-bottom:3px;}
.timeline .t-what{display:block;font-size:16px;line-height:1.5;color:var(--muted);}

/* charts */
.chart{margin:34px 0;}
.chart svg{width:100%;height:auto;display:block;overflow:visible;}
.chart figcaption{font-size:13.5px;color:var(--meta);margin-top:12px;font-style:italic;}
.chart .bar-rect{fill:var(--accent);}
.chart .bar-track{fill:#E7DCC4;}
.chart .bar-label{font-family:var(--sans);font-size:13px;fill:var(--muted);}
.chart .bar-val{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--ink);}
.chart .axis{stroke:var(--border-2);stroke-width:1;}
.chart .line-path{fill:none;stroke:var(--accent);stroke-width:2.5;}
.chart .line-dot{fill:var(--ink);}
.chart .grid-line{stroke:var(--border);stroke-width:1;}
.chart .tick-label{font-family:var(--sans);font-size:12px;fill:var(--meta);}

/* figures / gallery */
.article-figure{margin:38px 0;}
.article-figure img{width:100%;border-radius:12px;border:1px solid var(--border);}
.article-figure figcaption{font-size:13.5px;color:var(--meta);margin-top:10px;font-style:italic;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:38px 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--border);}
.gallery figcaption{font-size:12.5px;color:var(--meta);margin-top:7px;}

/* map figure */
.map-figure{margin:38px 0;}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--card) repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(176,131,58,0.06) 12px,rgba(176,131,58,0.06) 24px);border:1px dashed var(--border-2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--meta);font-size:14px;}
.map-figure figcaption{font-size:13.5px;color:var(--meta);margin-top:10px;font-style:italic;}

/* profile + org cards */
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:34px 0;}
.profile-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px;}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:14px;background:var(--img-fill);}
.profile-card.no-photo::before{content:"";display:block;width:64px;height:64px;border-radius:50%;background:var(--ink);margin-bottom:14px;-webkit-mask:no-repeat center/28px;mask:no-repeat center/28px;}
.profile-card h3{font-size:20px;margin:0 0 3px;font-weight:600;}
.profile-card .p-role{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-family:var(--sans);font-weight:600;}
.profile-card p{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 12px;}
.profile-card .p-links a{font-size:14px;color:var(--accent);text-decoration:none;margin-right:14px;}
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0;}
.org-card{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;color:var(--text);}
.org-card:hover{border-color:#C9B583;}
.org-logo{width:38px;height:38px;border-radius:8px;object-fit:contain;background:var(--ink-deepest);padding:5px;margin-bottom:8px;}
.org-card.no-logo .org-logo{background:var(--ink);}
.org-name{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);}
.org-host{font-size:13px;color:var(--meta);}
.entity-ref{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px;white-space:nowrap;}

/* ============================================================
   CATEGORY / INDEX / HUB PAGES
   ============================================================ */
.cat-hero{padding:60px 0 44px;}
.cat-hero .eyebrow{margin-bottom:14px;display:block;}
.cat-hero h1{font-size:50px;line-height:1.04;margin:0 0 18px;max-width:16ch;}
.cat-hero .intro{font-size:20px;line-height:1.55;color:var(--muted);max-width:60ch;margin:0;}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.cat-list li{margin:0;}
.cat-list a{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 22px;color:var(--text);transition:border-color .16s ease,transform .16s ease;}
.cat-list a:hover{border-color:#C9B583;transform:translateX(3px);}
.cat-list .ci-thumb{width:120px;height:78px;border-radius:8px;object-fit:cover;background:var(--img-fill);}
.cat-list .ci-title{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);margin:0 0 5px;}
.cat-list .ci-dek{font-size:15px;line-height:1.5;color:var(--muted-2);margin:0;}
.cat-list .ci-read{font-size:13px;color:var(--meta);white-space:nowrap;}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.hub-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:30px;display:flex;flex-direction:column;color:var(--text);}
.hub-card:hover{border-color:#C9B583;}
.hub-card .ico{width:38px;height:38px;color:var(--accent);margin-bottom:14px;}
.hub-card h2{font-size:26px;margin:0 0 8px;}
.hub-card p{font-size:15.5px;line-height:1.55;color:var(--muted-2);margin:0 0 16px;}
.hub-card .count{font-size:13px;color:var(--meta);margin-top:auto;}

/* generic simple page (about/contact/404) */
.page-body{max-width:760px;margin:0 auto;padding:56px 40px 0;}
.page-body h1{font-size:46px;line-height:1.05;margin:0 0 22px;}
.page-body h2{font-size:26px;margin:40px 0 12px;}
.page-body p{font-size:18px;line-height:1.7;color:#33302A;margin:0 0 20px;}
.page-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.contact-methods{list-style:none;margin:26px 0;padding:0;display:grid;gap:14px;}
.contact-methods li{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 18px;}
.contact-methods svg{width:22px;height:22px;color:var(--accent);flex:none;margin-top:2px;}
.contact-methods .cm-label{font-weight:600;color:var(--ink);display:block;}
.contact-methods .cm-val{font-size:15px;color:var(--muted);}
.error-hero{text-align:center;padding:100px 40px;}
.error-hero .code{font-family:var(--serif);font-size:120px;line-height:1;color:var(--accent);}
.error-hero h1{font-size:38px;margin:10px 0 16px;}
.error-hero p{font-size:18px;color:var(--muted);max-width:44ch;margin:0 auto 28px;}

/* styleguide */
.sg-section{padding:44px 0;border-top:1px solid var(--border-2);}
.sg-section>h2{font-size:30px;margin:0 0 6px;}
.sg-section>.sg-note{font-size:14px;color:var(--meta);margin:0 0 26px;}
.sg-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:30px 0 12px;}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.sw{border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.sw .chip{height:64px;}
.sw .cap{padding:8px 10px;font-size:12px;background:var(--card);color:var(--muted);}
.sg-type-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:12px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero h1{font-size:50px;}
  .subject-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid,.more-cards{grid-template-columns:repeat(2,1fr);}
  .supporters-roll{grid-template-columns:repeat(4,1fr);}
  .article-layout{grid-template-columns:1fr;gap:0;}
  .rail{position:static;flex-direction:row;flex-wrap:wrap;margin-top:36px;padding-top:28px;border-top:1px solid var(--border-2);}
  .rail-card{flex:1 1 220px;}
  .article-body>*{max-width:none;}
}
@media (max-width:1100px){
  .wrap{padding:0 24px;}
  .nav-toggle-label{display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;color:var(--paper);border:1px solid rgba(255,255,255,0.2);border-radius:8px;}
  .nav-toggle-label svg{width:24px;height:24px;}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:var(--ink-deep);border-bottom:3px solid var(--accent);max-height:0;overflow:hidden;transition:max-height .28s ease;}
  .nav-toggle:checked ~ .main-nav{max-height:85vh;overflow-y:auto;}
  .main-nav .nav-list{flex-direction:column;gap:0;padding:10px 24px 24px;}
  .main-nav .nav-list>li{display:block;}
  .main-nav .nav-list>li>a{padding:13px 6px;font-size:16px;border-radius:0;border-bottom:1px solid var(--line-dark);}
  .has-sub>a::after{margin-left:auto;}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;border-radius:0;padding:2px 0 10px 12px;min-width:0;}
  .nav-sub a{color:var(--on-dark-2);padding:8px 6px;}
  .nav-sub a:hover{background:transparent;color:var(--accent);}
  .nav-sub .sub-head{display:none;}
  .has-sub::after{display:none;}
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .hero-figure{height:300px;order:-1;}
  .hero h1{font-size:42px;}
  .explainer-grid{grid-template-columns:1fr;gap:32px;}
  .checklist-card{grid-template-columns:1fr;}
  .news-grid{grid-template-columns:1fr;gap:28px;padding:48px 0;}
  .footer-cols{grid-template-columns:1fr 1fr;gap:28px;}
  .profile-grid{grid-template-columns:1fr;}
  .related-links,.further-grid,.gallery,.org-grid{grid-template-columns:1fr;}
  .article-head h1{font-size:38px;}
  .article-head .standfirst{font-size:19px;}
  .lead-figure .framed,.article-hero+*  .framed{height:auto;}
  .lead-figure .framed{height:260px;}
  .cat-list a{grid-template-columns:1fr;gap:6px;}
  .cat-list .ci-thumb{width:100%;height:150px;}
  .cat-list .ci-read{margin-top:4px;}
  .hub-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .subject-grid,.card-grid,.more-cards,.supporters-featured,.supporters-roll{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .hero .dek{font-size:18px;}
  .section-head h2{font-size:26px;}
  .article-head h1{font-size:30px;}
  .article-body{font-size:18px;}
  .page-body,.article-hero .wrap{padding-left:18px;padding-right:18px;}
  .checklist-aside,.checklist-items{padding:28px 22px;}
  .checklist-aside h2{font-size:30px;}
  .error-hero .code{font-size:84px;}
  .rail{flex-direction:column;}
  .news-form{flex-wrap:wrap;}
  .news-form input{min-width:0;flex:1 1 100%;}
  .news-form .btn{flex:1 1 100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-blurb-link: money-link anchors in blurbs must inherit blurb colour (readable on dark OR light) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-plate-restore (repofringe): Design's original had DARK logo plates on LIGHT cream bands, but
   finalize's sponsor injection swapped the dark .logo-plate wrapper for a bare .sp-logo — so the
   light-polarity wordmarks (TUSHY/Icon Male/Blowpass) landed on nothing. Re-apply the exact .logo-plate
   treatment to .sp-logo. Bands stay light (Design's academic look); logos sit on dark plates. */
.supporter-feat .sp-logo{background:var(--ink-deepest);border-radius:9px;height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;}
.supporter-feat .sp-logo img{max-height:52px!important;height:auto!important;width:auto;object-fit:contain;opacity:.95;padding:0!important;}
.supporter-reg{display:flex;flex-direction:column;gap:8px;text-align:center;}
.supporter-reg .sp-logo{background:var(--ink-deep);border-radius:9px;height:66px;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;}
.supporter-reg .sp-logo img{max-height:38px!important;height:auto!important;width:auto;object-fit:contain;padding:0!important;}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.supporters-featured .sponsor.supporter-feat .sp-logo.sp-logo{padding:8px 13px!important;box-sizing:border-box!important;height:50px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.supporters-featured .sponsor.supporter-feat .sp-logo.sp-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.supporters-featured .sponsor.supporter-feat .sp-logo.sp-logo{display:block!important;width:100%!important}
.supporters-roll .sponsor.supporter-reg .sp-logo.sp-logo{padding:8px 12px!important;box-sizing:border-box!important;height:38px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.supporters-roll .sponsor.supporter-reg .sp-logo.sp-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.supporters-roll .sponsor.supporter-reg .sp-logo.sp-logo{display:block!important;width:100%!important}

/* op-roll-4up: operator: the bottom rows should use four items, not five. Design's own ladder
   already steps the roll to 4 at its next breakpoint, so only the widest step changes. */
@media (min-width:900px){
  .supporters-roll{grid-template-columns:repeat(4,1fr)}
}

/* op-roll-marks-bigger: operator: bigger logos in the bottom rows. With the roll at four columns
   instead of five the tile is 280px, and the plate was still the 66px/38px pair sized for the
   old five-across row. Plate 80px, artwork 46px — a clear step up while the featured tier above
   (96px plate, 52px artwork) stays the larger of the two. The cap has to be restated with
   !important because sp-plate-restore pins max-height:38px!important on these marks.
   ⚠️ AND the selector has to match sp-mark-frame's, which pins
   `.supporters-roll .sponsor.supporter-reg .sp-logo.sp-logo{height:38px!important}` — four
   classes. At two classes my first attempt measured no change at all: the plate stayed 38px with
   22px of artwork. The image there is height:100% of the plate, so the plate's height is the only
   number that matters. */
.supporters-roll .sponsor.supporter-reg .sp-logo.sp-logo{height:80px!important}
/* raising the roll to 80px left it LARGER than the featured tier, which sp-mark-frame had cut to
   a 50px plate — an inversion of Design's own 96/66 pair. The featured plate goes back to
   Design's 96px so the hierarchy reads correctly: 96 featured, 80 roll. */
.supporters-featured .sponsor.supporter-feat .sp-logo.sp-logo{height:96px!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2198px at 390, 20% of the whole page. Two columns bring it to
   1273px (42% shorter). Checked before writing: no new overflow, smallest mark still
   105px wide, longest blurb 3 lines, tile heights 183-250px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.supporters-featured, .supporters-roll), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .supporters-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .supporters-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .supporters-featured > * *{min-width:0!important;max-width:100%}
    .supporters-featured img,.supporters-featured svg{max-width:100%;height:auto}
  .supporters-roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .supporters-roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .supporters-roll > * *{min-width:0!important;max-width:100%}
    .supporters-roll img,.supporters-roll svg{max-width:100%;height:auto}
  .supporters-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .supporters-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .supporters-featured (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .supporters-featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — a.sp-domain reached
   150px in a 320px screen (+11px), inside
   div.sponsor.supporter-reg. Remedy: let the words break. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  a.sp-domain,a.sp-domain *{overflow-wrap:anywhere!important;min-width:0!important}
}
/* op-heading-levels */
h3:where(.rt-h4){font-family: var(--serif); color: var(--ink); letter-spacing: -0.01em; font-weight: 500;}
.steps h3:where(.rt-h4){margin: 3px 0px 4px; font-size: 17.5px; color: var(--paper); font-weight: 600;}
.footer-cols h3:where(.rt-h4){font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(124, 148, 156); margin: 0px 0px 14px; font-family: var(--sans); font-weight: 600;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:1101px) and (max-width:1299px){
  div.wrap.article-layout{padding-left:max(24px, 18px);padding-right:max(24px, 18px)}
  div.wrap.news-grid{padding-left:max(24px, 18px);padding-right:max(24px, 18px)}
}
@media (min-width:681px) and (max-width:1199px){
  div.wrap.news-grid > div{padding-left:max(24px, 18px);padding-right:max(24px, 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.post-card > div.thumb > img,
  div.browser > div.shot > img,
  div.hero-grid.wrap > figure.framed.hero-figure > img,
  figure.lead-figure > div.framed > img,
  li > a > img.ci-thumb){height:auto}
/* op-img-dims:end */
@media (min-width:621px) and (max-width:699px){.supporters-roll.supporters-roll{grid-template-columns:repeat(4,minmax(0,1fr))!important}.supporters-roll.supporters-roll > [data-partner]{min-width:0!important}.supporters-roll.supporters-roll .sp-domain{overflow-wrap:anywhere!important}}
@media (min-width:621px) and (max-width:699px){.supporters-roll.supporters-roll .sp-domain{font-size:15px!important}}