/* Sports Daily File (child of Magazine), measured from sportsdailyfile.com (SmartMag) */
:root {
  --accent: #dd0017;
  --ink: #161616;
  --text: #444;
  --muted: #8a8a8a;
  --ex: #505050;
  --line: #e8e8e8;
  --dots: rgba(0,0,0,.8);
  --page: #fff;
  --serif: "Lexend", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sans: "Lexend", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --label: "Lexend", system-ui, sans-serif;
  --reading: "Lexend", system-ui, sans-serif;
}
body { background: #fff; color: var(--text); font: 14px/1.5 var(--sans); }
.site-main { padding: 0 0 60px; }
.k-home .site-main { padding-bottom: 110px; }
.sdf-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) and (max-width: 940px) { .sdf-wrap { max-width: 720px; } }
@media (max-width: 767px) { .sdf-wrap { padding: 0 25px; } }
@media (max-width: 575px) { .sdf-wrap { padding: 0 20px; } }

/* ---------- Header ---------- */
.sdf-head { position: relative; z-index: 40; background: var(--header); }
.sdf-ib { display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0; background: none; border: 0; color: #161616; cursor: pointer; }
.sdf-top-in { display: flex; align-items: center; justify-content: space-between; height: 35px; }
.sdf-top-l, .sdf-top-r, .sdf-top-links, .sdf-top-social { display: flex; align-items: center; }
.sdf-top-l { gap: 16px; }
.sdf-top-l a { display: inline-flex; align-items: center; gap: 5px; font: 400 13px/19.5px var(--sans); color: #333; }
.sdf-top-l a.sdf-live { color: #ea580a; }
.sdf-top-l a:hover { color: var(--accent); }
.sdf-top-links a { padding: 0 13px; font: 400 13px/35px var(--sans); color: #161616; }
.sdf-top-links a:hover { color: var(--accent); }
.sdf-top-social { margin-left: 10px; }
.sdf-top-social a { width: 26px; height: 35px; display: inline-flex; align-items: center; justify-content: center; color: #333; }
.sdf-top-social a:hover { color: var(--accent); }
.sdf-mid-in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 70px; }
.sdf-tools { display: flex; align-items: center; gap: 20px; }
.sdf-burger { width: 18px; }
.sdf-dark-btn .i-sun, html.sdf-dark .sdf-dark-btn .i-moon, .sdf-m-dark .i-sun, html.sdf-dark .sdf-m-dark .i-moon { display: none; }
html.sdf-dark .sdf-dark-btn .i-sun, html.sdf-dark .sdf-m-dark .i-sun { display: inline-flex; color: var(--accent); }
.sdf-ib span { display: inline-flex; }
.sdf-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 5px)); }
.sdf-logo img { width: 362px; max-width: none; height: auto; }
.sdf-logo .logo-text { font: 700 34px/1 var(--sans); color: var(--ink); }
.sdf-logo-l { display: none; }
html.sdf-dark .sdf-logo-d { display: none; }
html.sdf-dark .sdf-logo-l { display: block; }
.sdf-logo-d, .sdf-logo-l { line-height: 0; }
.sdf-whiten { filter: brightness(0) invert(1); }
.sdf-mid-r { display: flex; align-items: center; gap: 14px; }
.sdf-news-btn { display: inline-flex; align-items: center; height: 27px; padding: 0 17px; border-radius: 5px; background: var(--button); color: #fff; font: 600 12px/27px var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.sdf-news-btn:hover { filter: brightness(1.12); }
.sdf-m-search, .sdf-m-dark { display: none; }
.sdf-nav { background: #0a0a0a; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #dedede; }
.sdf-nav-in { display: flex; justify-content: center; max-width: 1320px; margin: 0 auto; }
.sdf-nav-in > li { position: relative; }
.sdf-nav-in > li > a { display: block; padding: 0 16px; font: 600 17px/48px var(--sans); color: #f0f0f0; white-space: nowrap; }
.sdf-nav-in > li > a:hover, .sdf-nav-in > li.active > a { color: #fff; opacity: .8; }
.sdf-nav .sub { position: absolute; left: 0; top: 100%; min-width: 210px; background: #0a0a0a; padding: 8px 0; opacity: 0; visibility: hidden; z-index: 30; }
.sdf-nav .has-sub:hover .sub { opacity: 1; visibility: visible; }
.sdf-nav .sub a { display: block; padding: 8px 18px; font: 500 14px/1.4 var(--sans); color: #f0f0f0; }

@media (max-width: 1240px) { .sdf-nav-in > li > a { padding: 0 11px; font-size: 16px; } }
@media (max-width: 1060px) { .sdf-nav-in > li > a { padding: 0 8px; font-size: 15px; } }

/* Mobile header (940 and below): logo row and a scrolling black nav, reappearing on scroll up */
@media (max-width: 940px) {
  .sdf-head { position: sticky; top: 0; transition: transform .3s ease; }
  .sdf-head.is-up { transform: translateY(-100%); }
  .sdf-top { display: none; }
  .sdf-mid .sdf-wrap { max-width: none; padding: 0 30px; }
  .sdf-mid-in { height: 65px; }
  .sdf-tools .sdf-dark-btn, .sdf-tools .sdf-search-btn, .sdf-news-btn { display: none; }
  .sdf-burger { width: 26px; }
  .sdf-burger svg { width: 24px; height: 24px; }
  .sdf-m-search, .sdf-m-dark { display: inline-flex; }
  .sdf-m-search svg { width: 20px; height: 20px; }
  .sdf-m-dark svg { width: 22px; height: 22px; }
  .sdf-mid-r { gap: 16px; }
  .sdf-logo { transform: translate(-50%, -46%); }
  .sdf-logo img { width: 410px; }
  .sdf-nav { background: #000; border: 0; border-top: 1px solid #1f1f1f; }
  .sdf-nav-in { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sdf-nav-in::-webkit-scrollbar { display: none; }
  .sdf-nav-in > li > a { padding: 0 14px; font: 600 13px/39px var(--sans); letter-spacing: .07em; text-transform: uppercase; }
  .sdf-nav .sub { display: none; }
}
@media (max-width: 767px) {
  .sdf-mid .sdf-wrap { padding: 0 20px; }
  .sdf-logo { position: static; transform: none; margin: 0 auto 0 30px; }
  .sdf-logo img { width: 219px; }
}
@media (max-width: 359px) { .sdf-logo { margin-left: 14px; } .sdf-logo img { width: 180px; } }

/* Off-canvas menu */
.sdf-oc .offcanvas-panel { width: 370px; max-width: 86vw; background: #000; padding: 38px 25px 40px; }
@media (max-width: 767px) { .sdf-oc .offcanvas-panel { width: 320px; } }
.sdf-oc-close { position: absolute; top: 0; right: 0; width: 29px; height: 26px; display: flex; align-items: center; justify-content: center; background: #333; border: 0; color: #fff; cursor: pointer; }
.sdf-oc-close svg { width: 13px; height: 13px; }
.sdf-oc-logo { display: block; width: 236px; margin-bottom: 36px; }
.sdf-oc-logo img { width: 236px; height: auto; }
.sdf-oc-nav > li > a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.13); font: 700 15px/22.5px var(--sans); color: #f0f0f0; }
.sdf-oc-nav > li > a:hover { color: var(--accent); }
.sdf-oc-nav ul a { display: block; padding: 8px 0 8px 14px; font: 500 14px/1.4 var(--sans); color: rgba(255,255,255,.7); }
.sdf-oc-trend { margin-top: 45px; }
.sdf-oc-trend h3 { font: 700 22px/26.4px var(--sans); color: #fff; margin-bottom: 28px; }
.sdf-small { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 18px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dotted rgba(255,255,255,.13); }
.sdf-small .sdf-img { aspect-ratio: 75 / 68; border-radius: 0; }
.sdf-small .sdf-t { font: 600 14px/20px var(--sans); letter-spacing: -.35px; color: #ececec; margin: 2px 0 5px; }
.sdf-small .date { font: 400 11px/16.5px var(--sans); color: rgba(255,255,255,.65); }
.sdf-oc-social { display: flex; gap: 8px; margin-top: 30px; }
.sdf-oc-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sdf-oc-social a:hover { background: var(--accent); }

/* Search overlay */
.sdf-search::before { background: rgba(0,0,0,.88); }
.sdf-search-form { position: relative; top: 42vh; transform: translateY(-50%); width: min(690px, calc(100% - 50px)); margin: 0 auto; opacity: 0; transition: opacity .2s; }
.sdf-search.open .sdf-search-form { opacity: 1; }
.sdf-search-form input { display: block; width: 100%; padding: 0 0 8px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); outline: 0; border-radius: 0; font: 700 60px/1.3 var(--sans); color: #ececec; -webkit-appearance: none; appearance: none; }
.sdf-search-form input::placeholder { color: #ececec; }
.sdf-search-form input::-webkit-search-cancel-button { display: none; }
.sdf-search-form p { margin-top: 26px; font: 400 18px/1.4 var(--sans); color: #ececec; }
.sdf-search-close { position: absolute; top: 25px; right: 30px; z-index: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; }
.sdf-search-close svg { width: 30px; height: 30px; }
@media (max-width: 767px) { .sdf-search-form input { font-size: 34px; } .sdf-search-form p { font-size: 14px; } }

/* Newsletter pop-up (header button) */
.sdf-modal { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; padding: 20px; }
.sdf-modal:target { display: flex; }
.sdf-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.sdf-modal-box { position: relative; width: 100%; max-width: 480px; padding: 40px 36px 34px; background: #fff; border-radius: 5px; text-align: center; }
.sdf-modal-x { position: absolute; top: 12px; right: 12px; color: #999; }
.sdf-modal h3 { font: 700 26px/1.3 var(--sans); color: var(--ink); }
.sdf-modal p { margin: 10px 0 22px; font: 400 14px/1.6 var(--sans); color: var(--ex); }
.sdf-sub-row { display: flex; gap: 8px; }
.sdf-sub-row input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid #ddd; border-radius: 3px; font: 400 14px var(--sans); }
.sdf-sub-row button { height: 42px; padding: 0 18px; border: 0; border-radius: 5px; background: var(--button); color: #fff; font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.sdf-consent { display: flex; gap: 8px; margin-top: 14px; text-align: left; font: 400 12px/1.6 var(--sans); color: #666; }
.sdf-consent a { color: var(--ink); text-decoration: underline; }
.sdf-modal .sdf-sub-msg { margin: 14px 0 0; font-weight: 600; color: #1a7f4b; }
.sdf-modal .sdf-sub-msg.err { color: var(--accent); }

/* ---------- Shared post bits ---------- */
.sdf-img { position: relative; display: block; overflow: hidden; border-radius: 5px; background: #f2f2f2; }
.sdf-img img { width: 100%; height: 100%; object-fit: cover; }
.sdf-img .ph { display: block; width: 100%; height: 100%; }
.sdf-t { font-family: var(--sans); font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.sdf-t a:hover { color: var(--accent); }
.sdf-meta { display: flex; flex-wrap: wrap; align-items: center; font: 400 11px/16.5px var(--sans); color: var(--muted); }
.sdf-meta .date { font: inherit; color: inherit; }
.sdf-cat { font: 600 11px/16.5px var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.sdf-sep { margin: 0 7px; color: var(--muted); }
.sdf-ex { font: 400 13px/20.8px var(--sans); color: var(--ex); }
.sdf-post { padding-bottom: 15px; border-bottom: 1px dotted var(--dots); min-width: 0; }
.sdf-post .sdf-img { aspect-ratio: 4 / 3; }
.sdf-post > .sdf-t { font-size: 16px; line-height: 21.76px; letter-spacing: -.4px; margin: 13px 0 8px; }
.sdf-post.no-img > .sdf-t { margin-top: 0; }
.sdf-post .sdf-ex { margin-top: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Block headings */
.sdf-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 28px; }
.sdf-bh h2 { font: 700 30px/36px var(--sans); color: var(--ink); text-transform: capitalize; }
.sdf-view { flex-shrink: 0; font: 500 13px/19.5px var(--sans); color: #999; }
.sdf-view:hover { color: var(--accent); }
.sdf-wh { margin-bottom: 28px; }
.sdf-wh h3 { font: 700 22px/26.4px var(--sans); color: var(--ink); text-transform: capitalize; }

/* ---------- Home rows ---------- */
.sdf-row { margin-top: 30px; }
.k-home .site-main > div.sdf-row:first-of-type { margin-top: 23px; }
.sdf-row > .sdf-blk > .sdf-bh:first-child { margin-top: 56px; }
.sdf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 27.8%; align-items: start; }
.sdf-layout.no-side { grid-template-columns: minmax(0, 1fr); }
.sdf-aside { align-self: stretch; margin-left: 26px; padding-left: 25px; border-left: 1px solid var(--line); }
.sdf-aside-in { position: sticky; top: 20px; display: grid; gap: 55px; }
.sdf-ad { text-align: center; line-height: 0; }
.sdf-ad img { display: inline-block; max-width: 100%; height: auto; }

/* Lead story: image left, text right, headline links under the excerpt */
.sdf-lead { margin-bottom: 35px; }
.sdf-lead-post { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); gap: 25px; }
.sdf-lead-post .sdf-img { aspect-ratio: 4 / 3; align-self: start; }
.sdf-lead-post .sdf-t { font-size: 25px; line-height: 34px; letter-spacing: -.625px; margin: 5px 0 8px; }
.sdf-lead-post .sdf-ex { margin-top: 13px; font-size: 14px; line-height: 22.4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sdf-lead-body { display: flex; flex-direction: column; min-width: 0; }
.sdf-heads { margin-top: auto; padding-top: 20px; }
.sdf-heads li { padding: 2px 0 7px; margin-bottom: 8px; border-bottom: 1px dotted var(--dots); }
.sdf-heads li:last-child { border-bottom: 0; margin-bottom: 0; }
.sdf-heads a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14px/20px var(--sans); letter-spacing: -.35px; color: var(--ink); }
.sdf-heads a:hover { color: var(--accent); }

/* Text grid */
.sdf-textgrid { margin-bottom: 31px; }
.sdf-tg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.sdf-tg .sdf-t { font-size: 16px; line-height: 21.76px; letter-spacing: -.4px; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Image grids: 3 columns in the main column, 4 at full width */
.sdf-gr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 18px; }
.sdf-main .sdf-gr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 37px 18px; }
.sdf-allnews .sdf-more-wrap { margin-top: 50px; }
.sdf-more-wrap { display: flex; justify-content: center; margin-top: 45px; }
.sdf-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 384px; max-width: 100%; height: 39px; border: 1px solid var(--line); border-radius: 2px; font: 700 13px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: #333; }
.sdf-more:hover { border-color: #ccc; color: var(--accent); }
.sdf-more.is-loading { opacity: .5; pointer-events: none; }

/* Black full-width bands */
.sdf-band { margin: 30px 0; padding: 73px 0 55px; background: #000; }
.sdf-band + .sdf-band { margin-top: -30px; }
.sdf-band .sdf-t { color: #ececec; }
.sdf-band .sdf-t a:hover { color: #fff; opacity: .85; }
.sdf-band .sdf-meta .date, .sdf-band .sdf-sep { color: rgba(255,255,255,.65); }
.sdf-band .sdf-ex { color: #ccc; }
.sdf-band .sdf-post { border-bottom-color: rgba(255,255,255,.13); }
.sdf-band .sdf-img { background: #111; }
.sdf-band .sdf-bh h2 { color: #ececec; }
.sdf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.sdf-split-l .sdf-post > .sdf-t { font-size: 22px; line-height: 29.92px; letter-spacing: -.55px; margin-top: 12px; }
.sdf-split-l .sdf-ex { font-size: 14px; line-height: 22.4px; -webkit-line-clamp: 3; }
.sdf-split-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 18px; align-content: start; }

/* Overlay grid: one large and four small */
.sdf-ov-grid { display: grid; grid-template-columns: minmax(0, 625fr) minmax(0, 313fr) minmax(0, 313fr); gap: 15px; }
.sdf-ov { position: relative; min-width: 0; }
.sdf-ov .sdf-img { border-radius: 12px; aspect-ratio: 313 / 194; height: 100%; }
.sdf-ov.is-big { grid-row: span 2; }
.sdf-ov.is-big .sdf-img { aspect-ratio: auto; }
.sdf-ov .sdf-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72)); pointer-events: none; }
.sdf-ov-cap { position: absolute; left: 18px; right: 18px; bottom: 22px; pointer-events: none; }
.sdf-ov-cap a { pointer-events: auto; }
.sdf-ov .sdf-t { font-size: 17px; line-height: 21.76px; letter-spacing: -.425px; color: #fff; margin-bottom: 9px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sdf-ov .sdf-t a:hover { color: #fff; opacity: .85; }
.sdf-ov.is-big .sdf-ov-cap { left: 24px; right: 24px; bottom: 24px; max-width: 480px; }
.sdf-ov.is-big .sdf-t { font-size: 20px; line-height: 24px; letter-spacing: -.5px; }
.sdf-ov .sdf-cat, .sdf-ov .sdf-meta, .sdf-ov .sdf-sep { color: #efefef; }

/* Editor's picks (sidebar) */
.sdf-pick-lead .sdf-img { aspect-ratio: 16 / 9; }
.sdf-pick-lead > .sdf-t { font-size: 18px; line-height: 24.48px; letter-spacing: -.45px; margin-top: 14px; }
.sdf-pick-list { margin-top: 26px; }
.sdf-pick-list li { position: relative; padding-left: 20px; margin-bottom: 12px; }
.sdf-pick-list svg { position: absolute; left: 0; top: 4px; color: var(--accent); }
.sdf-pick-list a { font: 600 14px/20px var(--sans); letter-spacing: -.35px; color: var(--ink); }
.sdf-pick-list a:hover { color: var(--accent); }

/* ---------- Home: tablets and phones ---------- */
@media (max-width: 1024px) {
  .sdf-layout { grid-template-columns: minmax(0, 1fr); }
  .sdf-aside { margin: 45px 0 0; padding: 0; border: 0; }
  .sdf-aside-in { position: static; }
}
@media (max-width: 940px) {
  .sdf-tg, .sdf-gr, .sdf-main .sdf-gr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdf-tg { gap: 30px 14px; }
  .sdf-ov-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sdf-ov.is-big { grid-column: 1 / -1; grid-row: auto; height: 450px; }
  .sdf-split-l .sdf-post > .sdf-t { font-size: 20px; line-height: 27px; }
}
@media (max-width: 767px) {
  .sdf-lead { margin-bottom: 30px; }
  .k-home .site-main > div.sdf-row:first-of-type { margin-top: 15px; }
  .sdf-lead-post { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 15px; border-bottom: 1px dotted var(--dots); }
  .sdf-lead-post .sdf-img { aspect-ratio: 16 / 9; border-radius: 0; }
  .sdf-lead-post .sdf-t { font-size: 18px; line-height: 24.48px; letter-spacing: -.45px; margin: 16px 0 8px; }
  .sdf-heads { display: none; }
  .sdf-tg, .sdf-gr, .sdf-main .sdf-gr, .sdf-split, .sdf-split-r { grid-template-columns: minmax(0, 1fr); }
  .sdf-tg { gap: 30px; }
  .sdf-gr, .sdf-main .sdf-gr, .sdf-split-r { gap: 30px; }
  .sdf-split { gap: 30px; }
  .sdf-ov-grid { gap: 14px; }
  .sdf-ov .sdf-img { aspect-ratio: 168 / 190; }
  .sdf-ov .sdf-t { font-size: 15px; line-height: 19px; }
  .sdf-ov-cap { left: 14px; right: 14px; bottom: 16px; }
  .sdf-band { padding: 50px 0 40px; }
  .sdf-bh h2 { font-size: 26px; line-height: 32px; }
}

/* ---------- Article ---------- */
.sdf-crumbs { display: flex; flex-wrap: wrap; gap: 6px 9px; margin: 20px 0; font: 400 12px/12px var(--sans); color: #999; }
.sdf-crumbs a { color: #999; }
.sdf-crumbs a:hover { color: var(--accent); }
.sdf-crumbs .sep { color: #bbb; font-size: 11px; }
.sdf-art-head { padding-top: 13px; }
.sdf-art-head > .sdf-cat { display: inline-block; margin-bottom: 11px; }
.sdf-art-title { max-width: 1050px; font: 600 40px/52px var(--sans); letter-spacing: -1px; color: var(--ink); margin: 0 0 16px; }
.sdf-art-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid var(--line); }
.sdf-art-by { display: flex; flex-wrap: wrap; align-items: center; font: 400 12px/18px var(--sans); color: #565656; }
.sdf-art-by b { font-weight: 600; color: var(--ink); }
.sdf-art-by .sdf-sep { margin: 0 4px; }
.sdf-avatar { width: 32px; height: 30px; margin-right: 11px; overflow: hidden; border-radius: 50%; }
.sdf-avatar img { width: auto; max-width: none; height: 30px; object-fit: cover; object-position: left center; }
html.sdf-dark .sdf-avatar { background: #fff; }
.sdf-share-top { display: flex; align-items: center; gap: 2px; }
.sdf-share-top a { width: 30px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.sdf-share-top svg { width: 18px; height: 18px; }
.sdf-share-top .fb { color: #1a6dd4; } .sdf-share-top .x { color: #55acef; } .sdf-share-top .wa { color: #23c761; }
.sdf-share-top .tg { color: #0088cc; } .sdf-share-top .em { color: #000; }
.sdf-share-top .more { width: 32px; height: 32px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 50%; background: none; color: #bbb; cursor: pointer; }
.sdf-share-top .more svg { width: 13px; height: 13px; }
.sdf-art-image { margin: 28px 0 32px; }
.sdf-art-image img { width: 100%; aspect-ratio: 1280 / 612; object-fit: cover; }
.sdf-art-col { max-width: 850px; margin: 0 auto; }
.is-page .sdf-art-col { margin-top: 30px; }
.sdf-listen { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 8px 15px; margin-bottom: 30px; border: 0; border-radius: 4px; background: #000; color: #fff; font: 600 18px/1 var(--sans); cursor: pointer; }
.sdf-listen[aria-pressed="true"] { background: var(--accent); }
.sdf-body { font: 400 17px/28.9px var(--sans); color: #000; }
.sdf-body > *, .sdf-body > div > * { margin: 0 0 26.18px; }
.sdf-body a { color: var(--accent); text-decoration: none; }
.sdf-body a:hover { text-decoration: underline; }
.sdf-body h2 { font: 700 26px/1.3 var(--sans); color: var(--ink); }
.sdf-body h3 { font: 700 21px/1.35 var(--sans); color: var(--ink); }
.sdf-body blockquote { padding: 0 0 0 15px; border-left: 3px solid var(--accent); font-style: normal; color: #000; }
.sdf-body .oe-source { margin-top: 26px; padding-top: 0; border-top: 0; font: 400 17px/28.9px var(--sans); color: #000; }
.sdf-body .oe-source a { color: var(--accent); letter-spacing: 0; }
.sdf-art-foot { max-width: 864px; margin: 38px auto 0; }
.sdf-share-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sdf-share-bar > span { font: 700 11px/1 var(--sans); text-transform: uppercase; color: var(--ink); }
.sdf-share-bar > div { display: flex; gap: 4px; }
.sdf-share-bar a { width: 70px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; color: #fff; }
.sdf-share-bar a:hover { filter: brightness(1.1); }
.sdf-share-bar .fb { background: #1a6dd4; } .sdf-share-bar .x { background: #55acef; } .sdf-share-bar .pin { background: #e4223e; }
.sdf-share-bar .in { background: #02669a; } .sdf-share-bar .em { background: #000; } .sdf-share-bar .tg { background: #0088cc; } .sdf-share-bar .wa { background: #23c761; }
.sdf-related { margin: 46px 0; }
.sdf-rh { padding: 11px 0; margin-bottom: 15px; border-top: 2px solid var(--ink); font: 800 22px/1.2 var(--sans); letter-spacing: .03em; color: var(--ink); }
.sdf-rh em { font-style: normal; color: var(--accent); }
.sdf-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 36px; }
.sdf-related-grid .sdf-img { aspect-ratio: 16 / 9; border-radius: 0; }
.sdf-related-grid .sdf-post { border-bottom: 0; padding-bottom: 0; }

/* Contact form in pages */
.sdf-body .oe-contact label { font: 400 15px/26px var(--sans); color: #000; }
.sdf-body .oe-contact button { background: var(--accent); border-radius: 5px; }

@media (max-width: 940px) {
  .sdf-art-title { font-size: 34.5px; line-height: 44.85px; }
  .sdf-art-meta { display: block; }
  .sdf-share-top { margin-top: 14px; }
  .sdf-art-col { max-width: none; }
  .sdf-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sdf-art-title { font-size: 29px; line-height: 37.7px; letter-spacing: -.7px; }
  .sdf-share-bar > span { display: none; }
  .sdf-share-bar > div { flex: 1; }
  .sdf-share-bar a { flex: 1; width: auto; }
  .sdf-related-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) { .sdf-article, .sdf-archive { padding: 0 25px; } }
@media (max-width: 767px) { .sdf-arch-grid .sdf-img { border-radius: 0; } }

/* ---------- Section, search and not-found pages ---------- */
.sdf-arch-title { margin: 32px 0 40px; padding-left: 14px; border-left: 3px solid var(--accent); font: 600 19px/38px var(--sans); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.sdf-arch-desc { margin: -24px 0 34px; color: #666; }
.sdf-arch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 35px; }
.sdf-arch-grid .sdf-post > .sdf-t { font-size: 18px; line-height: 24.48px; letter-spacing: -.45px; margin-top: 14px; }
.sdf-arch-grid .sdf-ex { font-size: 14px; line-height: 22.4px; -webkit-line-clamp: 3; }
.sdf-arch-grid.sdf-gr4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 18px; }
.sdf-arch-grid.sdf-gr4 .sdf-post > .sdf-t { font-size: 16px; line-height: 21.76px; }
.sdf-archive .sdf-more-wrap { margin-top: 50px; }
.sdf-search-inline { display: flex; gap: 6px; max-width: 560px; margin: -14px 0 40px; }
.sdf-search-inline input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid #ddd; border-radius: 3px; font: 400 14px var(--sans); }
.sdf-search-inline button { height: 42px; padding: 0 20px; border: 0; border-radius: 5px; background: var(--accent); color: #fff; font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.sdf-empty { margin: 0 0 30px; color: #666; }
.sdf-404 { padding-top: 30px; padding-bottom: 50px; }
.sdf-404-title { margin: 0 0 55px; text-align: center; font: 700 30px/1.3 var(--sans); color: var(--ink); }
.sdf-404-in { display: flex; gap: 105px; max-width: 1100px; margin: 0 0 30px 75px; }
.sdf-404-code { flex-shrink: 0; margin: 10px 0 0; font: 400 92px/1 Georgia, "Times New Roman", serif; color: var(--accent); letter-spacing: -2px; }
.sdf-404-text { max-width: 800px; }
.sdf-404-text > p { font: 400 15px/1.8 var(--sans); color: #333; }
.sdf-404-text ul { margin: 18px 0 20px 18px; list-style: disc; }
.sdf-404-text li { margin-bottom: 6px; font: 400 15px/1.6 var(--sans); }
.sdf-404-text li a { color: var(--accent); }
.sdf-404 .sdf-search-inline { margin: 0; max-width: 460px; }
.sdf-404 .sdf-search-inline input, .sdf-404 .sdf-search-inline button { height: 36px; border-radius: 0; }
@media (max-width: 940px) { .sdf-404-in { margin-left: 0; gap: 40px; } }
@media (max-width: 767px) { .sdf-404-in { display: block; } .sdf-404-code { margin-bottom: 20px; text-align: center; } }
html.sdf-dark .sdf-404-text > p { color: #d1d1d1; }
@media (max-width: 940px) { .sdf-arch-grid, .sdf-arch-grid.sdf-gr4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; } }
@media (max-width: 767px) { .sdf-arch-grid, .sdf-arch-grid.sdf-gr4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.sdf-foot { background: #212121; color: #ababab; padding: 60px 0 40px; }
.sdf-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.19); margin-bottom: 20px; }
.sdf-foot-logo img { width: 415px; max-width: 100%; height: auto; }
.sdf-foot-logo .logo-text { font: 700 34px/1 var(--sans); color: #fff; }
.sdf-foot-social { display: flex; align-items: center; }
.sdf-foot-social a { width: 58px; height: 69px; display: inline-flex; align-items: center; justify-content: center; color: #efefef; }
.sdf-foot-social a:hover { color: var(--accent); }
.sdf-foot-social svg { width: 40px; height: 40px; }
.sdf-foot-bot { display: flex; align-items: center; justify-content: space-between; gap: 12px 30px; }
.sdf-copy { font: 400 13px/19.5px var(--sans); color: #ababab; }
.sdf-foot-links { display: flex; flex-wrap: wrap; align-items: center; }
.sdf-foot-links a { position: relative; padding: 0 15px; font: 400 13px/19.5px var(--sans); color: #d3d3d3; }
.sdf-foot-links a:last-child { padding-right: 0; }
.sdf-foot-links a + a::before { content: ""; position: absolute; left: 0; top: 4px; height: 12px; border-left: 1px solid rgba(255,255,255,.25); }
.sdf-foot-links a:hover { color: #fff; }
@media (max-width: 940px) {
  .sdf-foot-bot { display: block; }
  .sdf-foot-links { margin-top: 12px; }
  .sdf-foot-links a:first-child { padding-left: 0; }
}
@media (max-width: 767px) {
  .sdf-foot { padding: 40px 0 50px; }
  .sdf-foot-top { display: block; }
  .sdf-foot-logo img { width: 350px; }
  .sdf-foot-social { margin-top: 12px; }
  .sdf-foot-social a { width: 25px; height: 26px; margin-right: 12px; }
  .sdf-foot-social svg { width: 18px; height: 18px; }
  .sdf-foot-links { gap: 8px 0; }
}

/* ---------- Dark mode (the moon button) ---------- */
html.sdf-dark body { background: #151516; color: #d1d1d1; }
html.sdf-dark .sdf-head, html.sdf-dark .sdf-top, html.sdf-dark .sdf-mid { background: #000; }
html.sdf-dark .sdf-nav { background: #0a0a0a; border-color: #2a2a2a; }
html.sdf-dark .sdf-ib, html.sdf-dark .sdf-top-l a:not(.sdf-live), html.sdf-dark .sdf-top-links a, html.sdf-dark .sdf-top-social a { color: #e0e0e0; }
html.sdf-dark .sdf-t, html.sdf-dark .sdf-bh h2, html.sdf-dark .sdf-wh h3, html.sdf-dark .sdf-heads a, html.sdf-dark .sdf-pick-list a,
html.sdf-dark .sdf-art-title, html.sdf-dark .sdf-arch-title, html.sdf-dark .sdf-rh, html.sdf-dark .sdf-art-by b, html.sdf-dark .sdf-share-bar > span, html.sdf-dark .sdf-404-title { color: #ececec; }
html.sdf-dark .sdf-ex { color: #b5b5b5; }
html.sdf-dark .sdf-body, html.sdf-dark .sdf-body .oe-source, html.sdf-dark .sdf-body .oe-contact label { color: #d1d1d1; }
html.sdf-dark .sdf-post, html.sdf-dark .sdf-heads li, html.sdf-dark .sdf-lead-post { border-color: rgba(255,255,255,.13); }
html.sdf-dark .sdf-aside, html.sdf-dark .sdf-art-meta { border-color: #2a2a2a; }
html.sdf-dark .sdf-rh { border-color: #ececec; }
html.sdf-dark .sdf-img { background: #222; }
html.sdf-dark .sdf-more { border-color: #333; color: #ddd; }
html.sdf-dark .sdf-share-top .em { color: #eee; }
html.sdf-dark .sdf-band { background: #000; }
.sdf-art-by .date { font: inherit; color: inherit; }
.sdf-share-top svg { width: 20px; height: 20px; }
.sdf-listen svg { width: 20px; height: 20px; }
.sdf-arch-grid:not(.sdf-gr4) .sdf-img { aspect-ratio: 403 / 226; }
@media (max-width: 767px) { .sdf-foot-links { gap: 8px 22px; } .sdf-foot-links a { padding: 0; } .sdf-foot-links a + a::before { display: none; } }