/* dannydanko.com: overrides on top of the Merinda vendor CSS (assets/vendor/css). Loaded last. */
:root { --green: #03a87c; --ink: rgba(0,0,0,.84); --ink-2: rgba(0,0,0,.54); --hair: rgba(0,0,0,.15); --paper: #fff; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: var(--paper); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
#wrapper { padding-top: 50px; }
@media (min-width: 992px) { #wrapper { padding-top: 0; } }
.container { max-width: 1140px; }

/* headings: no clamp on real page titles */
h1.entry-title, .entry-header h1 { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; font-weight: 700; line-height: 1.15; }
.entry-header { max-width: 760px; margin: 0 auto; padding-top: 1.5rem; }
.archive-header h1 { font-family: 'Lora', serif; font-weight: 700; }
.entry-wraper { max-width: 760px; margin: 0 auto; }
.entry-main-content { font-size: 1.15rem; }
.entry-main-content h2 { font-size: 1.6rem; font-weight: 700; margin: 2.2rem 0 1rem; font-family: 'Cabin', sans-serif; letter-spacing: -.3px; }
.entry-main-content h3 { font-size: 1.25rem; font-weight: 700; margin: 1.6rem 0 .8rem; font-family: 'Cabin', sans-serif; }
.entry-main-content ul, .entry-main-content ol { margin: 0 0 1.5rem 1.4rem; list-style-position: outside; }
.entry-main-content ol li { width: auto; }
.entry-main-content li { margin-bottom: .4rem; }
.entry-main-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-main-content code { font-family: 'B612 Mono', monospace; font-size: .85em; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 3px; }
.hub-intro { font-size: 1.1rem; margin-bottom: 2rem; }
.home-copy { font-size: 1.05rem; margin-bottom: 1rem; }
.home-copy p:last-child { margin-bottom: 0; }
.entry-wraper .excerpt { font-weight: 400; font-style: italic; color: var(--ink-2); font-size: 1.25rem; line-height: 1.5; }
.entry-meta a { color: inherit; }
.entry-meta a:hover { color: var(--green) !important; }
.dropcap p:first-child:first-letter { font-family: 'Lora', serif; font-size: 3.6em; margin-top: .1em; }
.dropcap .answer:first-child:first-letter, .dropcap table:first-child { font-size: inherit; }

/* answer blocks (first paragraph after a question H2) */
.entry-main-content p.answer, .entry-main-content .answer p { border-left: 3px solid var(--green); padding: .35rem 0 .35rem 1rem; background: rgba(3,168,124,.06); }

/* tables */
.entry-main-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.75rem; font-size: .95rem; font-family: 'Cabin', sans-serif; }
.entry-main-content th, .entry-main-content td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.entry-main-content th { border-bottom: 2px solid var(--ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-main-content tr:nth-child(even) td { background: rgba(0,0,0,.02); }
.spec th { width: 38%; }

/* figures */
.entry-main-content figure, .lead-photo { margin: 2rem 0; }
.lead-photo img, .entry-main-content figure img { width: 100%; height: auto; border-radius: 4px; }
figcaption { font-size: .85rem; color: var(--ink-2); margin-top: .5rem; font-family: 'Cabin', sans-serif; }
figcaption .credit { display: block; font-size: .78rem; }
figure.video { position: relative; }
.yt { display: block; position: relative; background: #000; border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .92; display: block; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; background: rgba(0,0,0,.72); border-radius: 12px; }
.yt-play::after { content: ""; position: absolute; left: 27px; top: 13px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.yt:hover .yt-play { background: #ff0000; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* breadcrumbs */
.crumbs { margin: 0 0 .75rem; letter-spacing: 0 !important; text-transform: none !important; font-size: .82rem !important; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: inherit; }
.crumbs li, .toc li, .plain-list li, .sources li, .numbered-list li { width: auto; }
.crumbs li { list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.crumbs a { color: inherit; }
.archive-header .crumbs ol { justify-content: center; }

/* TOC */
.toc { font-family: 'Cabin', sans-serif; font-size: .95rem; border: 1px solid var(--hair); border-radius: 4px; padding: .6rem 1rem; }
.toc summary { cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--ink-2); }
.toc ol { margin: .6rem 0 .2rem 1.2rem; }
.toc li { margin: .25rem 0; }

/* related, sources, tags */
.related-inline { border-top: 1px solid var(--hair); padding-top: 1.2rem; margin-top: 2.5rem; font-family: 'Cabin', sans-serif; font-size: 1rem; }
.related-inline ul { list-style: none; margin: 0; padding: 0; }
.related-inline li { padding: .3rem 0; border-bottom: 1px solid var(--hair); }
.sources { font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 1rem; margin-top: 2rem; font-family: 'Cabin', sans-serif; }
.sources ol { margin-left: 1.2rem; }
.related-posts .entry-title { font-size: 1.05rem; }
.tags-wrap a { text-transform: capitalize; }

/* cards + tiles */
.card { border: 0; background: transparent; position: relative; }
.card:not(.post-has-bg) { border-radius: 0; }
.card .entry-title a { color: var(--ink); }
.cards .card { padding-bottom: 1.5rem; border-bottom: 1px solid var(--hair); margin-bottom: 1.5rem !important; }
.cards .card:last-child { border-bottom: 0; }
.cards .card[hidden] { display: none !important; }
figure.tile { margin: 0; }
figure.tile a { display: block; aspect-ratio: 4/3; border-radius: 4px; background: linear-gradient(135deg, hsl(var(--h), 32%, 22%), hsl(calc(var(--h) + 24), 40%, 38%)); color: rgba(255,255,255,.92); position: relative; overflow: hidden; }
figure.tile a::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.18), transparent 45%), radial-gradient(circle at 15% 90%, rgba(0,0,0,.25), transparent 50%); }
figure.tile span { position: absolute; left: .6em; bottom: .3em; font-family: 'Lora', serif; font-weight: 700; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; letter-spacing: -.03em; }
.row > figure.tile { padding: 0; }
.row > figure.tile.col-md-3 { padding-left: 12px; padding-right: 12px; }
.post-has-bg figure.tile a { border-radius: 0; aspect-ratio: 1/1; }
.post-has-bg figure.tile span { font-size: 1.6rem; }
.related-posts figure.tile a, .col-md-5 figure.tile a { aspect-ratio: 1/1; }
.first figure img { width: 100%; border-radius: 4px; }
.first figure.tile a { aspect-ratio: 16/10; }
.first figure.tile span { font-size: clamp(3rem, 9vw, 5rem); }
.numbered-list { list-style: none; margin: 0; padding: 0; }
.numbered-list li { margin-bottom: 1.2rem; }
.numbered-list .entry-title { font-size: 1rem; }
.latest-tpl-4 .post-count { font-size: 2rem; font-weight: 700; color: rgba(0,0,0,.15); min-width: 3rem; line-height: 1; font-family: 'Cabin', sans-serif; }
.plain-list { margin-left: 1.2rem; font-family: 'Cabin', sans-serif; }
.plain-list li { margin-bottom: .35rem; }
.plain-list a { color: var(--ink); }

/* filter */
.filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter button { font: inherit; font-family: 'B612 Mono', monospace; font-size: .78rem; background: #fff; border: 1px solid var(--ink); padding: .3rem .8rem; border-radius: 3px; cursor: pointer; text-transform: capitalize; }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* home */
.home-hero { padding: 2.5rem 0 1rem; }
.home-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); letter-spacing: -.02em !important; }
.home-hero .excerpt { font-family: 'Lora', serif; font-size: 1.3rem; color: var(--ink-2); max-width: 34ch; }
.portrait img { width: 100%; border-radius: 6px; }
.btn-green { border: 1px solid var(--green); padding: .45rem 1.1rem; border-radius: 3px; font-family: 'Cabin', sans-serif; font-weight: 700; }
.btn-green:hover { background: var(--green); color: #fff !important; }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); padding: .45rem 1.1rem; border-radius: 3px; font-family: 'Cabin', sans-serif; font-weight: 700; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.about-strip .bgcover { min-height: 320px; border-radius: 0 4px 4px 0; }
.quotes { margin-top: 2rem; }
.quotes blockquote { font-family: 'Lora', serif; font-size: 1.05rem; font-style: italic; }
.quotes blockquote footer { font-style: normal; margin-top: .6rem; }
.quotes blockquote::before { background: var(--green); }
.book-card .book-cover { flex: 0 0 64px; margin-right: 14px; }
.book-card .book-cover img { width: 64px; height: auto; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.book-card .entry-title { font-size: .95rem; }
.book-cover-lg { width: 100%; border-radius: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.book h2 { font-size: 1.5rem; }
.link-green svg { fill: var(--green); vertical-align: middle; }

/* faq */
.faq details { border-bottom: 1px solid var(--hair); padding: .8rem 0; }
.faq summary { font-family: 'Cabin', sans-serif; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; position: relative; padding-right: 1.6rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--green); font-weight: 700; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: .6rem 0 0; color: var(--ink-2); }

/* forms */
.lead-box { margin: 2rem 0; }
.lead-box .h5 { font-family: 'Cabin', sans-serif; font-weight: 700; }
.lead-box .small-text { color: var(--ink-2); font-size: .9rem; }
.form-contact p { margin-bottom: .75rem; }
.form-contact input, .form-contact textarea { width: 100%; border: 1px solid rgba(0,0,0,.3); border-radius: 3px; padding: .6rem .8rem; font: inherit; font-family: 'Cabin', sans-serif; background: #fff; }
.form-contact input:focus, .form-contact textarea:focus { outline: 0; border-color: var(--green); }
.form-contact .btn-success { background: var(--green); border-color: var(--green); font-family: 'Cabin', sans-serif; font-weight: 700; }
.hp { position: absolute; left: -9999px; top: -9999px; }
.bg-lightblue { background: #e8f3ec !important; border-color: rgba(3,168,124,.3) !important; border-radius: 4px; }
.lead-box.newsletter, .lead-box.newsletter .h5, .lead-box.newsletter .small-text { color: rgba(0,0,0,.84); }

/* diagnostics: compare strip, provenance, letter, player */
.compare { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 2rem 0; font-family: 'Cabin', sans-serif; font-size: .95rem; }
.compare a { display: block; border: 1px solid var(--hair); border-radius: 4px; padding: .8rem 1rem; color: var(--ink); text-decoration: none; }
.compare a b { display: block; margin-bottom: .2rem; }
.compare a:hover { border-color: var(--green); }
.provenance { background: rgba(0,0,0,.04); border-left: 3px solid #b7791f; padding: .7rem 1rem; font-size: .95rem; margin-bottom: 1.5rem; font-family: 'Cabin', sans-serif; }
.authors-note { border: 1px solid var(--hair); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.letter { font-style: italic; border: 1px solid var(--hair); padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; border-radius: 4px; }
.letter .from { font-style: normal; font-family: 'Cabin', sans-serif; font-size: .9rem; color: var(--ink-2); margin: .5rem 0 0; }
.prevnext { display: flex; justify-content: space-between; font-family: 'Cabin', sans-serif; margin: 2rem 0; }
.player audio { width: 100%; }
.copyable { border: 1px dashed var(--hair); padding: .8rem 1rem; border-radius: 4px; }

/* header + nav behaviour (vanilla replacement for scrollToFixed) */
#main-menu.stick { position: sticky; top: 0; background: #fff; z-index: 998; transition: box-shadow .2s; }
#main-menu.stick.is-stuck { box-shadow: 0 2px 2px -2px rgba(0,0,0,.15); }
.menu-primary ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .2rem; list-style: none; margin: 0; padding: 0; }
.menu-primary li a { display: block; padding: .3rem .8rem; font-size: .82rem; letter-spacing: .3px; color: var(--ink); }
.menu-primary li.current-menu-item > a { color: var(--green) !important; }
.menu-primary > ul > span { display: none; }
.search-form { position: relative; }
.search-results { position: absolute; right: 0; top: 40px; width: 320px; max-width: 90vw; background: #fff; border: 1px solid var(--hair); border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.12); z-index: 1000; text-align: left; padding: .4rem 0; max-height: 60vh; overflow: auto; }
.mobi-menu .search-results { position: static; width: 80%; margin: .5rem auto 1rem; }
.search-results a { display: block; padding: .5rem .9rem; color: var(--ink); font-family: 'Cabin', sans-serif; font-size: .92rem; line-height: 1.3; }
.search-results a:hover { background: rgba(3,168,124,.08); }
.search-results a small { display: block; color: var(--ink-2); font-size: .78rem; }
.search-results .none { padding: .5rem .9rem; color: var(--ink-2); font-size: .9rem; }
.sticky-header .logo-small a { font-family: Georgia, serif; font-weight: 700; font-size: 1.4rem; color: var(--ink); }
.sticky-header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 999; box-shadow: 0 2px 2px -2px rgba(0,0,0,.15); }
.sticky-header .container { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; height: 50px; }
.sticky-header .logo-small { margin-right: auto; }
.sticky-header .social-network { display: none !important; }
@media (min-width: 480px) { .sticky-header .social-network { display: flex !important; } }
.mobi-menu { padding-top: 4rem; overflow: auto; }
.mobi-menu nav ul li a { display: block; padding: .6rem 0; font-size: 1.05rem; color: var(--ink); }
.mobi-menu .menu-search-form { width: 80%; margin: 0 auto 1rem; }
.mobi-menu .search_field { width: 100%; border: 1px solid var(--hair); border-radius: 50px; padding: .5rem 1rem; }
.back-to-top { background: #fff; border: 1px solid var(--hair); border-radius: 3px; padding: .2rem .6rem; color: var(--ink); }

/* footer */
footer { font-family: 'Cabin', sans-serif; font-size: .92rem; padding-bottom: 2rem; }
.footer-cta { font-family: 'Lora', serif; font-size: 1.05rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: .15rem 0; }
.footer-links a { color: var(--ink); }
.footer-links a:hover { color: var(--green) !important; }
.copyright { color: var(--ink-2); font-size: .85rem; }

/* dark mode additions for our elements */
body.dark-mode { --ink: rgba(255,255,255,.88); --ink-2: rgba(255,255,255,.6); --hair: rgba(255,255,255,.15); --paper: #1a1a1a; }
body.dark-mode, body.dark-mode .entry-title, body.dark-mode .entry-title a, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode .card .entry-title a, body.dark-mode .plain-list a, body.dark-mode .footer-links a, body.dark-mode .crumbs a, body.dark-mode .menu-primary li a, body.dark-mode .compare a, body.dark-mode .search-results a { color: var(--ink) !important; }
body.dark-mode a { color: #fff; }
body.dark-mode .entry-main-content a { color: var(--green) !important; }
body.dark-mode .entry-main-content th { border-bottom-color: rgba(255,255,255,.6); }
body.dark-mode .entry-main-content tr:nth-child(even) td { background: rgba(255,255,255,.03); }
body.dark-mode .entry-main-content p.answer, body.dark-mode .entry-main-content .answer p { background: rgba(3,168,124,.12); }
body.dark-mode #main-menu.stick, body.dark-mode .sticky-header, body.dark-mode .search-results, body.dark-mode .filter button, body.dark-mode .form-contact input, body.dark-mode .form-contact textarea, body.dark-mode .back-to-top { background: #1a1a1a; color: var(--ink); }
body.dark-mode .filter button[aria-pressed="true"] { background: #fff; color: #111; }
body.dark-mode .filter button, body.dark-mode .form-contact input, body.dark-mode .form-contact textarea, body.dark-mode .btn-outline, body.dark-mode .toc, body.dark-mode .letter, body.dark-mode .compare a, body.dark-mode .copyable { border-color: rgba(255,255,255,.3); }
body.dark-mode .btn-outline { color: var(--ink); }
body.dark-mode .provenance { background: rgba(255,255,255,.06); }
body.dark-mode .bg-lightblue { background: #1f2d27 !important; border-color: rgba(3,168,124,.45) !important; }
body.dark-mode .lead-box.newsletter, body.dark-mode .lead-box.newsletter .h5 { color: rgba(255,255,255,.9); }
body.dark-mode .lead-box.newsletter .small-text { color: rgba(255,255,255,.65); }
body.dark-mode .entry-main-content code { background: rgba(255,255,255,.1); }
body.dark-mode .archive-intro, body.dark-mode .excerpt, body.dark-mode figcaption, body.dark-mode .copyright, body.dark-mode .sources, body.dark-mode .toc summary, body.dark-mode .faq details p { color: var(--ink-2) !important; }
body.dark-mode .sticky-header .logo-small a, body.dark-mode .navbar-brand a { color: #fff; }
body.dark-mode .about-strip { background: #202020; }
body.dark-mode .box-author, body.dark-mode .post-has-bg { background: #202020; }
body.dark-mode .box-author a, body.dark-mode .box-author p { color: var(--ink) !important; }

/* misc */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-404 h1 { font-size: 3rem; }
@media (max-width: 767px) {
  .home-hero { padding-top: 1rem; }
  .home-hero .portrait { max-width: 280px; margin: 1.5rem auto 0; }
  .entry-main-content { font-size: 1.05rem; }
  .entry-left-col { display: none; }
  .row > figure.tile.col-md-3 { width: 100%; }
  .cards .card figure.tile a { aspect-ratio: 16/7; }
}
@media (min-width: 992px) { .entry-left-col { left: -80px; } }
@media (max-width: 991px) { .entry-left-col { display: none; } }

/* wordmark logo (Danny's graffiti mark, black on transparent; inverted in dark mode) */
.wordmark { height: 46px; width: auto; display: block; }
.sticky-header .wordmark { height: 28px; }
.mobi-menu__logo .wordmark { height: 44px; margin: 0 auto 1rem; }
.logo.navbar-brand { line-height: 1; }
body.dark-mode .wordmark { filter: invert(1); }
.section-logo { max-width: 320px; margin: 0 auto 1rem; }
.section-logo img { width: 100%; height: auto; }
body.dark-mode .section-logo .swap-dark { display: none; }
.logo-strip { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0 2rem; }
.logo-strip figure { margin: 0; width: 150px; text-align: center; }
.logo-strip img { width: 100%; height: auto; max-height: 80px; object-fit: contain; }
.logo-strip figcaption { font-size: .78rem; margin-top: .3rem; }
.player-box { display: flex; gap: 1.2rem; align-items: center; border: 1px solid var(--hair); border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.player-box .show-logo { flex: 0 0 120px; }
.player-box .show-logo img { width: 100%; height: auto; }
.player-box .player { flex: 1; margin: 0; }
@media (max-width: 575px) { .player-box { flex-direction: column; align-items: stretch; } .player-box .show-logo { margin: 0 auto; } }
.press-assets .card-asset { border: 1px solid var(--hair); border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem; background: #fff; }
.press-assets .card-asset img { width: 100%; height: 180px; object-fit: contain; }
body.dark-mode .press-assets .card-asset { background: #202020; }

body.dark-mode .footer-cta a { color: var(--green); }


/* =====================================================================
   THEME: MAGAZINE, BLACK INK (Bike's pick 9/10). Appended to site.css by render; wins by order.
   Black masthead, condensed heads, one red accent, thick rules, black footer.
   ===================================================================== */
:root { --ink: #111; --ink-2: rgba(0,0,0,.6); --hair: rgba(0,0,0,.18); --red: #d7261e; --green: #d7261e; --cond: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --bar: #111; }
body { color: var(--ink); }
h1, h2, h3, h4, h5, h6, .entry-title, .heading-font { font-family: var(--cond) !important; }
.entry-title, .entry-title a { letter-spacing: 0 !important; }

/* masthead */
#header, #main-menu.stick, .sticky-header { background: var(--bar) !important; box-shadow: none !important; }
#header { padding-top: .6rem; border-bottom: 1px solid rgba(255,255,255,.12); }
#main-menu.stick { padding: 0; border-bottom: 4px solid var(--red); }
#main-menu.stick.is-stuck { box-shadow: 0 4px 16px rgba(0,0,0,.35) !important; }
.menu-primary ul { justify-content: flex-start; gap: 0; }
.menu-primary li a { font-family: var(--cond); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: #fff !important; padding: .75rem 1rem; border-bottom: 4px solid transparent; margin-bottom: -4px; }
.menu-primary li a:hover, .menu-primary li.current-menu-item > a { color: #fff !important; border-bottom-color: #fff; }
.menu-primary li.current-menu-item > a { background: var(--red); }
.wordmark { filter: invert(1); height: 52px; }
.sticky-header .wordmark { height: 30px; }
.mobi-menu__logo .wordmark { filter: none; }
body.dark-mode .mobi-menu__logo .wordmark { filter: invert(1); }
#header .social-network a, .sticky-header .social-network a { color: #fff !important; border-color: rgba(255,255,255,.4); }
#header .social-network a svg path, .sticky-header .social-network a svg path { fill: #fff; }
#header .dark-light-toggle, .sticky-header .dark-light-toggle, #header .searh-toggle, #header .search-form { color: #fff !important; }
#header .top-menu a.btn { color: #fff; border-color: #fff; font-family: var(--cond); text-transform: uppercase; font-weight: 700; letter-spacing: .06em; font-size: 1rem; }
#header .top-menu a.btn:hover { background: var(--red); border-color: var(--red); }
#header .search-form.open-search { border-color: rgba(255,255,255,.5); }
#header .search-form input.search_field { color: #fff; }
.menu-toggle-icon > span, .menu-toggle-icon > span::before, .menu-toggle-icon > span::after { background-color: #fff !important; }
.top-scroll-bar { background: var(--red) !important; height: 3px; }
.mobi-menu nav ul li a { font-family: var(--cond); text-transform: uppercase; font-weight: 700; font-size: 1.4rem; letter-spacing: .04em; }
.mobi-menu nav ul li.current-menu-item a { color: var(--red) !important; }

/* section labels: thick rule + condensed caps + red block */
.spanborder { border-bottom: 0 !important; border-top: 4px solid var(--ink); padding-top: .55rem; margin-bottom: 1.4rem; font-family: var(--cond); text-transform: uppercase; letter-spacing: .04em; font-size: 1.5rem !important; font-weight: 800; }
.spanborder span { border-bottom: 0 !important; padding: 0; margin: 0; }
.spanborder span::before { content: ""; display: inline-block; width: .55em; height: .55em; background: var(--red); margin-right: .5em; vertical-align: 0; }
.spanborder.text-center { text-align: left !important; }
.capsSubtle, .crumbs, .entry-meta, .readingTime, .kicker { font-family: var(--cond) !important; text-transform: uppercase !important; letter-spacing: .08em !important; font-size: .8rem !important; }
.capsSubtle { color: var(--red) !important; font-weight: 700 !important; }
.entry-meta { color: var(--ink-2) !important; font-size: .82rem !important; letter-spacing: .04em !important; }

/* headlines */
h1.entry-title, .entry-header h1, .archive-header h1 { font-family: var(--cond) !important; font-weight: 800; text-transform: uppercase; line-height: .98; letter-spacing: -.01em !important; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.archive-header { text-align: left !important; }
.archive-header .crumbs ol { justify-content: flex-start; }
.archive-intro { margin: 0; max-width: 60ch; font-family: 'Lora', serif; font-size: 1.25rem; color: var(--ink-2) !important; }
.entry-main-content h2 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: 2rem; letter-spacing: .01em; border-top: 3px solid var(--ink); padding-top: .6rem; }
.entry-main-content h3 { font-family: var(--cond); font-weight: 700; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .02em; }
h3.entry-title { font-size: 1.7rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
h5.entry-title { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.entry-wraper .excerpt { font-family: 'Lora', serif; font-style: normal; font-size: 1.3rem; border-left: 6px solid var(--red); padding-left: 1rem; color: var(--ink) !important; }
.dropcap p:first-child:first-letter { font-family: var(--cond); font-weight: 800; font-size: 4.4em; margin-top: .05em; color: var(--ink); }

/* body links + blocks */
.entry-main-content a, .link-green, .copyright a { color: var(--red) !important; fill: var(--red) !important; }
.entry-main-content a { text-decoration-color: rgba(215,38,30,.5); }
.entry-main-content p.answer, .entry-main-content .answer p { border-left: 6px solid var(--red); background: #f4f4f4; padding: .6rem 1rem; }
.entry-main-content th { background: var(--ink); color: #fff; border-bottom: 0; font-family: var(--cond); font-size: .9rem; letter-spacing: .06em; }
.entry-main-content table { border: 2px solid var(--ink); }
.entry-main-content tr:nth-child(even) td { background: #f6f6f6; }
.entry-main-content blockquote::before, .quotes blockquote::before { background: var(--red); }
.quotes blockquote { font-size: 1.15rem; }
.toc { border: 2px solid var(--ink); border-radius: 0; }
.toc summary { color: var(--ink); font-family: var(--cond); font-size: .95rem; letter-spacing: .1em; }
.related-inline, .sources { border-top: 3px solid var(--ink); }
.related-inline .capsSubtle, .sources .capsSubtle { color: var(--ink) !important; }
.tags-wrap a { background: var(--ink); color: #fff !important; border-radius: 0; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.box-author { background: #f4f4f4; border-top: 4px solid var(--ink); }
.social-sticky a { border-color: var(--ink); color: var(--ink); }
.social-sticky a:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* cards + tiles */
.cards .card { border-bottom: 2px solid var(--ink); }
.card .entry-excerpt { font-family: 'Lora', serif; }
figure.tile a { background: var(--ink); border-radius: 0; }
figure.tile a::before { background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 60%); }
figure.tile a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--red); }
figure.tile span { color: #fff; font-family: var(--cond); font-weight: 800; font-size: clamp(2.6rem, 7vw, 4rem); letter-spacing: 0; bottom: .25em; }
.first figure.tile span { font-size: clamp(4rem, 12vw, 7rem); }
.post-has-bg { background: #f4f4f4; }
.latest-tpl-4 .post-count { color: var(--red); font-family: var(--cond); font-weight: 800; font-size: 2.4rem; min-width: 3.2rem; }
.numbered-list li { border-bottom: 1px solid var(--hair); padding-bottom: .9rem; }
.plain-list { font-family: 'Cabin', sans-serif; }
.filter button { border-radius: 0; border: 2px solid var(--ink); font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.filter button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.divider { border-bottom: 3px solid var(--ink); }

/* buttons */
.btn-green, .btn-outline, .form-contact .btn-success, .btn.btn-success { border-radius: 0 !important; font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 1.05rem; padding: .6rem 1.3rem; }
.btn-green, .form-contact .btn-success, .btn.btn-success { background: var(--red) !important; border: 2px solid var(--red) !important; color: #fff !important; }
.btn-green:hover, .form-contact .btn-success:hover { background: var(--ink) !important; border-color: var(--ink) !important; }
.btn-outline { border: 2px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.link-green svg { fill: var(--red); }

/* home hero: cover block */
.home-hero { background: var(--ink); color: #fff; margin: 1.5rem 0 0; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3rem) 0; position: relative; overflow: hidden; }
.home-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--red); }
.home-hero h1 { color: #fff !important; font-size: clamp(3.4rem, 9vw, 7.5rem); text-transform: uppercase; line-height: .9; margin: .2em 0 .3em; }
.home-hero .capsSubtle { color: var(--red) !important; font-size: .95rem !important; }
.home-hero .excerpt { color: rgba(255,255,255,.8); font-size: 1.35rem; max-width: 40ch; }
.home-hero .btn-outline { border-color: #fff; color: #fff; }
.home-hero .btn-outline:hover { background: #fff; color: var(--ink); }
.home-hero .portrait { margin: 0; }
.home-hero .portrait img { border-radius: 0; display: block; }
.home-hero > .col-md-7 { padding-bottom: 2.5rem; }
.home-hero > .col-md-5 { align-self: flex-end; }
.section-featured .divider { margin-top: 2.5rem; }
.about-strip { background: #f4f4f4; }
.about-strip .bgcover { border-radius: 0; filter: grayscale(1) contrast(1.1); }
.about-strip .capsSubtle { color: var(--red) !important; }
.book-card .book-cover img { border-radius: 0; box-shadow: 4px 4px 0 var(--ink); }
.book-cover-lg { border-radius: 0; box-shadow: 8px 8px 0 var(--ink); }
.faq summary { font-family: var(--cond); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em; }
.faq summary::after { color: var(--red); }
.faq details { border-bottom-color: var(--ink); }

/* forms + newsletter: black box */
.form-contact input, .form-contact textarea { border: 2px solid var(--ink); border-radius: 0; }
.bg-lightblue { background: var(--ink) !important; border: 0 !important; border-top: 8px solid var(--red) !important; border-radius: 0 !important; }
.lead-box.newsletter, .lead-box.newsletter .h5 { color: #fff; }
.lead-box.newsletter .h5 { font-family: var(--cond); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; }
.lead-box.newsletter .small-text { color: rgba(255,255,255,.7); }
.lead-box.newsletter .form-contact input { border-color: #fff; background: #fff; }
.compare a { border: 2px solid var(--ink); border-radius: 0; }
.compare a:hover { background: var(--ink); color: #fff; }
.compare a b { font-family: var(--cond); text-transform: uppercase; font-size: 1.1rem; }
.player-box { border: 2px solid var(--ink); border-radius: 0; }
.press-assets .card-asset { border: 2px solid var(--ink); border-radius: 0; }
.provenance { border-left-color: var(--red); background: #f4f4f4; }
.search-results { border-radius: 0; border: 2px solid var(--ink); }
.yt, .yt img, .lead-photo img, .entry-main-content figure img, .portrait img { border-radius: 0; }

/* footer: black */
footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 2.5rem 0 2rem; margin-top: 4rem !important; border-top: 8px solid var(--red); }
footer .divider { display: none; }
footer .footer-cta { color: #fff; font-size: 1.15rem; }
footer .footer-cta a { color: #fff !important; text-decoration: underline; text-decoration-color: var(--red); }
footer .footer-links a { color: #fff; }
footer .footer-links a:hover { color: var(--red) !important; }
footer .capsSubtle { color: var(--red) !important; }
footer .copyright { color: rgba(255,255,255,.55); }
.back-to-top { border-radius: 0; border: 2px solid var(--ink); font-family: var(--cond); text-transform: uppercase; }

/* dark mode under the ink theme */
body.dark-mode { --ink: rgba(255,255,255,.9); --ink-2: rgba(255,255,255,.6); --hair: rgba(255,255,255,.18); --paper: #0f0f0f; --bar: #000; background: #0f0f0f; }
body.dark-mode #header { border-bottom-color: rgba(255,255,255,.15); }
body.dark-mode .home-hero, body.dark-mode .bg-lightblue, body.dark-mode footer { background: #000 !important; }
body.dark-mode .about-strip, body.dark-mode .post-has-bg, body.dark-mode .box-author, body.dark-mode .entry-main-content p.answer, body.dark-mode .entry-main-content .answer p, body.dark-mode .provenance { background: #1c1c1c !important; }
body.dark-mode .entry-main-content th { background: #fff; color: #111; }
body.dark-mode .entry-main-content table { border-color: rgba(255,255,255,.6); }
body.dark-mode .entry-main-content tr:nth-child(even) td { background: #161616; }
body.dark-mode figure.tile a { background: #1c1c1c; }
body.dark-mode .tags-wrap a { background: #fff; color: #111 !important; }
body.dark-mode .btn-outline { border-color: #fff; color: #fff; }
body.dark-mode .btn-outline:hover { background: #fff; color: #111; }
body.dark-mode .filter button { background: #0f0f0f; color: #fff; border-color: #fff; }
body.dark-mode .filter button[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
body.dark-mode .form-contact input, body.dark-mode .form-contact textarea { background: #1c1c1c; color: #fff; border-color: rgba(255,255,255,.5); }
body.dark-mode .lead-box.newsletter .form-contact input { background: #fff; color: #111; }
body.dark-mode .entry-wraper .excerpt { color: var(--ink) !important; }
body.dark-mode .dropcap p:first-child:first-letter { color: #fff; }
body.dark-mode .entry-main-content h2 { border-top-color: rgba(255,255,255,.7); }
body.dark-mode .spanborder { border-top-color: rgba(255,255,255,.7); }
body.dark-mode .divider { border-bottom-color: rgba(255,255,255,.5); }
body.dark-mode .toc, body.dark-mode .compare a, body.dark-mode .player-box, body.dark-mode .press-assets .card-asset, body.dark-mode .search-results { border-color: rgba(255,255,255,.6); }
body.dark-mode .social-sticky a { border-color: rgba(255,255,255,.6); color: #fff; }
body.dark-mode .back-to-top { border-color: #fff; }
body.dark-mode .archive-intro { color: var(--ink-2) !important; }
@media (max-width: 767px) {
  .home-hero { padding: 1.5rem 1.2rem 0; }
  .home-hero h1 { font-size: clamp(3rem, 16vw, 4.6rem); }
  .home-hero .portrait { max-width: 100%; margin: 1rem -1.2rem 0; }
  .menu-primary li a { font-size: .95rem; padding: .6rem .7rem; }
}

/* fixes after first shots */
#main-menu .menu-primary { height: auto !important; overflow: visible; }
#main-menu .menu-primary ul { display: flex !important; flex-wrap: wrap; }
#main-menu .menu-primary ul > li { padding: 0 !important; display: block; }
#main-menu .menu-primary ul > li > a { display: block; font-size: 1.05rem; color: #fff !important; }
#main-menu.stick, .archive #main-menu.stick, .single #main-menu.stick, .home #main-menu.stick { padding: 0 !important; }
body.dark-mode article, body.dark-mode .entry-wraper, body.dark-mode .card { background: transparent !important; }
body.dark-mode .entry-main-content, body.dark-mode .entry-main-content p, body.dark-mode .entry-main-content li, body.dark-mode .entry-main-content td, body.dark-mode .hub-intro, body.dark-mode .home-copy { color: rgba(255,255,255,.88) !important; }
body.dark-mode .entry-main-content th { color: #111 !important; }
body.dark-mode .crumbs a, body.dark-mode .crumbs li { color: rgba(255,255,255,.7) !important; }
body.dark-mode .toc summary, body.dark-mode .toc a { color: #fff !important; }


/* ==============================================================
   DANNYDANKO.COM — MAGIC TOUCH
   Editorial polish layer. Deliberately separate from the core CSS
   so this pass is reversible and easy to iterate.
   ============================================================== */

:root {
  --dd-paper: #f4efe5;
  --dd-paper-2: #ebe3d4;
  --dd-ink: #101010;
  --dd-red: #d7261e;
  --dd-red-dark: #a91d17;
  --dd-muted: #6d675f;
  --dd-card: #fffdf8;
  --dd-shadow: 0 18px 45px rgba(20, 15, 10, .10);
  --dd-radius: 0px;
}

::selection { background: var(--dd-red); color: #fff; }

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(215, 38, 30, .045), transparent 24rem),
    linear-gradient(180deg, #f8f4ec 0, var(--dd-paper) 38rem, var(--dd-paper) 100%);
  color: var(--dd-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: .035;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}

.container { max-width: 1180px; }

/* -------------------- Masthead -------------------- */
#header {
  padding-top: .8rem;
  background: #0d0d0d !important;
}
#header .container { max-width: 1180px; }
#header .wordmark {
  height: 58px;
  width: auto;
  object-fit: contain;
}
#main-menu.stick {
  background: #0d0d0d !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.15) !important;
}
#main-menu .menu-primary {
  position: relative;
}
#main-menu .menu-primary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 7.5rem;
  height: 4px;
  background: var(--dd-red);
  pointer-events: none;
}
.menu-primary li a {
  padding: .82rem .92rem !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.menu-primary li a:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.menu-primary li.current-menu-item > a {
  background: var(--dd-red) !important;
}
#header .top-menu a.btn {
  background: var(--dd-red);
  border-color: var(--dd-red);
  padding: .45rem .9rem;
}
#header .top-menu a.btn:hover {
  background: #fff;
  border-color: #fff;
  color: #111 !important;
}

.sticky-header {
  background: #0d0d0d !important;
  border-bottom: 3px solid var(--dd-red);
}
.sticky-header .container { height: 56px; }
.sticky-header .wordmark { height: 31px; }

/* -------------------- Home hero -------------------- */
.home .section-featured { padding-top: 1.15rem; }

.home-hero {
  min-height: 560px;
  margin-top: 0 !important;
  padding: clamp(2rem, 5vw, 4.6rem) clamp(1.5rem, 5vw, 4.8rem) 0 !important;
  background:
    linear-gradient(115deg, #101010 0%, #101010 63%, #171717 63%, #171717 100%) !important;
  box-shadow: var(--dd-shadow);
  isolation: isolate;
}
.home-hero::before {
  width: 12px !important;
  background: var(--dd-red) !important;
  z-index: 2;
}
.home-hero::after {
  content: "DANKO";
  position: absolute;
  right: -1.8rem;
  top: 1.5rem;
  z-index: -1;
  font-family: var(--cond);
  font-size: clamp(8rem, 19vw, 17rem);
  line-height: .75;
  font-weight: 800;
  letter-spacing: -.045em;
  color: rgba(255,255,255,.035);
  transform: rotate(90deg) translateX(37%);
  transform-origin: top right;
  white-space: nowrap;
}
.home-hero h1 {
  max-width: 7ch;
  margin-top: .12em !important;
  margin-bottom: .2em !important;
  font-size: clamp(5rem, 10vw, 9rem) !important;
  letter-spacing: -.035em !important;
  line-height: .78 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
}
.home-hero .capsSubtle {
  display: inline-block;
  padding: .35rem .55rem .28rem;
  background: var(--dd-red);
  color: #fff !important;
  letter-spacing: .12em !important;
}
.home-hero .excerpt {
  max-width: 34ch !important;
  margin-top: 1.5rem;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem) !important;
  line-height: 1.42;
  color: rgba(255,255,255,.78) !important;
}
.home-hero .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-hero .btn-green {
  box-shadow: 5px 5px 0 #fff;
}
.home-hero .btn-green:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #fff;
}
.home-hero .portrait {
  position: relative;
  height: 100%;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
}
.home-hero .portrait::before {
  content: "";
  position: absolute;
  inset: 12% -4% 0 10%;
  border: 4px solid var(--dd-red);
  z-index: -1;
}
.home-hero .portrait img {
  width: 100%;
  max-height: 590px;
  object-fit: cover;
  object-position: 50% 16%;
  filter: saturate(.88) contrast(1.06);
  box-shadow: -14px 0 0 rgba(255,255,255,.04);
}

.proof-strip {
  margin: 0 0 3.2rem;
  background: var(--dd-red);
  color: #fff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: var(--dd-shadow);
}
.proof-strip__item {
  min-height: 74px;
  padding: 1rem 1.25rem .9rem;
  border-right: 1px solid rgba(255,255,255,.3);
  font-family: 'Cabin', sans-serif;
  font-size: .88rem;
  line-height: 1.25;
}
.proof-strip__item:last-child { border-right: 0; }
.proof-strip__item strong {
  display: block;
  margin-bottom: .12rem;
  font-family: var(--cond);
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .035em;
}

/* -------------------- Homepage editorial modules -------------------- */
.home .content-widget { padding: 1.25rem 0; }
.home .section-featured > .container > .divider:first-of-type { border-bottom: 0; }

.spanborder {
  border-top-width: 5px !important;
  padding-top: .72rem !important;
  margin-bottom: 1.65rem !important;
  font-size: 1.7rem !important;
}
.spanborder span::before {
  width: .4em !important;
  height: 1em !important;
  margin-right: .42em !important;
  vertical-align: -.08em !important;
}

.home .first.card,
.home .cards .card,
.home .post-has-bg.card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.home .first.card:hover,
.home .cards .card:hover {
  transform: translateY(-4px);
}
.home .first.card {
  background: var(--dd-card);
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(20,15,10,.08);
  border-bottom: 0 !important;
}
.home .first figure.tile {
  margin: -1rem -1rem 1.1rem !important;
}
.home figure.tile a {
  background:
    linear-gradient(145deg, #161616, #282828) !important;
}
.home figure.tile a::before {
  background:
    radial-gradient(circle at 78% 15%, rgba(215,38,30,.5), transparent 28%),
    linear-gradient(140deg, transparent 15%, rgba(255,255,255,.04)) !important;
}
.home figure.tile span {
  left: .22em !important;
  bottom: .08em !important;
  color: #f5efe3 !important;
  text-shadow: 4px 4px 0 rgba(215,38,30,.55);
}

.home .post-has-bg.card {
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,.18);
  padding-bottom: .8rem;
}
.home .post-has-bg.card:hover h5 a,
.home .first.card:hover h3 a { color: var(--dd-red) !important; }

.latest-tpl-4 {
  position: sticky;
  top: 84px;
}
.latest-tpl-4 .post-count {
  font-size: 3.1rem !important;
  line-height: .9;
  letter-spacing: -.04em;
  opacity: .95;
}

.about-strip {
  position: relative;
  overflow: hidden;
  background: #111 !important;
  color: #fff;
  box-shadow: var(--dd-shadow);
}
.about-strip::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -5rem;
  width: 18rem;
  height: 18rem;
  border: 3.5rem solid rgba(215,38,30,.85);
  border-radius: 50%;
  pointer-events: none;
}
.about-strip .entry-main-content,
.about-strip .home-copy,
.about-strip .home-copy p { color: rgba(255,255,255,.86) !important; }
.about-strip .entry-main-content a,
.about-strip .link-green { color: #fff !important; text-decoration-color: var(--dd-red) !important; }
.about-strip .link-green { font-weight: 700; }
.about-strip .bgcover {
  filter: grayscale(1) contrast(1.12) !important;
  mix-blend-mode: luminosity;
}

/* -------------------- Article / hub polish -------------------- */
.entry-header {
  max-width: 860px !important;
  padding-top: clamp(2rem, 6vw, 4.3rem) !important;
}
.entry-header h1,
.archive-header h1 {
  max-width: 15ch;
  font-size: clamp(3.5rem, 7vw, 6.4rem) !important;
  line-height: .88 !important;
  letter-spacing: -.025em !important;
}
.crumbs {
  color: var(--dd-red) !important;
  font-weight: 700;
}
.entry-wraper {
  max-width: 790px !important;
}
.entry-main-content {
  font-size: 1.16rem !important;
  line-height: 1.76;
}
.entry-main-content > p:first-of-type {
  font-size: 1.21rem;
}
.entry-main-content h2 {
  margin-top: 3.3rem !important;
  border-top-width: 4px !important;
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
}
.entry-main-content h3 { margin-top: 2rem !important; }

.entry-main-content p.answer,
.entry-main-content .answer p {
  background: #fffaf1 !important;
  border-left-width: 8px !important;
  box-shadow: 0 7px 22px rgba(20,15,10,.055);
}
.toc {
  background: rgba(255,255,255,.48);
  padding: .85rem 1.1rem !important;
}
.related-inline {
  padding-top: 1.45rem !important;
}
.related-inline li {
  padding: .5rem 0 !important;
}
.related-inline a:hover { color: var(--dd-red) !important; }

.card .entry-title a,
.entry-title a {
  transition: color .16s ease;
}
.card .entry-title a:hover,
.entry-title a:hover { color: var(--dd-red) !important; }

/* Better forms */
.form-contact input,
.form-contact textarea {
  background: #fffdf8 !important;
  padding: .78rem .9rem !important;
  transition: box-shadow .16s ease, border-color .16s ease;
}
.form-contact input:focus,
.form-contact textarea:focus {
  border-color: var(--dd-red) !important;
  box-shadow: 0 0 0 4px rgba(215,38,30,.11);
}

/* -------------------- Buttons + links -------------------- */
.btn-green,
.btn-outline,
.form-contact .btn-success,
.btn.btn-success {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.btn-green:hover,
.form-contact .btn-success:hover,
.btn.btn-success:hover {
  transform: translateY(-2px);
}
.link-green {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  text-decoration: none !important;
}
.link-green:hover { text-decoration: underline !important; }

/* -------------------- Footer -------------------- */
footer {
  position: relative;
  overflow: hidden;
  padding-top: 3.5rem !important;
  border-top-width: 10px !important;
}
footer::before {
  content: "DANNY DANKO";
  position: absolute;
  right: -1rem;
  bottom: -.18em;
  font-family: var(--cond);
  font-weight: 800;
  font-size: clamp(4.5rem, 12vw, 10rem);
  letter-spacing: -.045em;
  line-height: .75;
  color: rgba(255,255,255,.035);
  pointer-events: none;
}
footer .container { position: relative; z-index: 1; }

/* -------------------- Accessibility / motion -------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--dd-red) !important;
  outline-offset: 3px;
}

@media (max-width: 991px) {
  #wrapper { padding-top: 56px !important; }
  .latest-tpl-4 { position: static; }
  .home-hero { min-height: auto; }
  .home-hero h1 { font-size: clamp(4.5rem, 13vw, 7rem) !important; }
  .home-hero .portrait { min-height: 440px; }
}

@media (max-width: 767px) {
  body::before { display: none; }
  .home .section-featured { padding-top: .5rem; }
  .home-hero {
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 1.7rem 1.35rem 0 !important;
    box-shadow: none;
  }
  .home-hero::before { width: 7px !important; }
  .home-hero::after {
    top: 6rem;
    right: -2.8rem;
    font-size: 8rem;
  }
  .home-hero h1 {
    max-width: none;
    font-size: clamp(4rem, 22vw, 6.2rem) !important;
  }
  .home-hero .excerpt { font-size: 1.16rem !important; }
  .home-hero .btn { width: 100%; margin-right: 0 !important; }
  .home-hero .btn-green { box-shadow: 4px 4px 0 #fff; }
  .home-hero .portrait {
    min-height: 390px;
    margin-top: 1.8rem !important;
  }
  .home-hero .portrait::before { inset: 10% 0 0 12%; }
  .proof-strip {
    grid-template-columns: 1fr;
    margin-left: -12px;
    margin-right: -12px;
    box-shadow: none;
  }
  .proof-strip__item {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    padding: .85rem 1.35rem;
  }
  .proof-strip__item:last-child { border-bottom: 0; }
  .proof-strip__item strong { display: inline; margin-right: .35rem; font-size: 1.25rem; }
  .entry-header h1,
  .archive-header h1 {
    font-size: clamp(3.2rem, 14vw, 4.8rem) !important;
  }
  .entry-main-content { font-size: 1.08rem !important; }
  .about-strip { margin-left: 0 !important; margin-right: 0 !important; }
}

body.dark-mode {
  --dd-paper: #111;
  --dd-paper-2: #171717;
  --dd-card: #161616;
  background: #0f0f0f !important;
}
body.dark-mode::before { opacity: .02; mix-blend-mode: screen; }
body.dark-mode .home .first.card,
body.dark-mode .toc { background: #161616 !important; }
body.dark-mode .entry-main-content p.answer,
body.dark-mode .entry-main-content .answer p { background: #171717 !important; }
body.dark-mode .form-contact input,
body.dark-mode .form-contact textarea { background: #171717 !important; }
body.dark-mode .proof-strip { background: var(--dd-red); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==================== FIXES after Bike's review (9/10) ==================== */
/* 1. filter buttons: vendor button{color:#fff} made unpressed buttons unreadable */
.filter button { color: var(--dd-ink) !important; background: var(--dd-card) !important; }
.filter button[aria-pressed="true"] { color: #fff !important; background: var(--dd-red) !important; }
body.dark-mode .filter button { color: #fff !important; background: #161616 !important; }
body.dark-mode .filter button[aria-pressed="true"] { background: var(--dd-red) !important; }
/* 2. sidebar: the sticky "Most searched" list slid over the newsletter box on scroll */
.latest-tpl-4 { position: static !important; top: auto !important; }
/* 3. inner-page titles: cap the size so About / hub titles sit on one or two lines */
.entry-header h1, .archive-header h1, h1.entry-title { font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important; line-height: .96 !important; }
.archive-header h1 { max-width: 20ch; }
/* 4. hero portrait: fill the block, bottom-aligned, keep the red frame */
.home-hero > .col-md-5 { align-self: flex-end !important; display: flex; justify-content: flex-end; }
.home-hero .portrait { min-height: 0 !important; width: 100%; max-width: 420px; margin: 0 0 0 auto !important; }
.home-hero .portrait img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: cover; display: block; }
@media (min-width: 992px) { .home-hero { min-height: 620px; } .home-hero .portrait { max-width: 460px; } .home-hero .portrait img { min-height: 560px; object-fit: cover; } }
/* nav: drop the fixed red underline that sat under "Grow Guide" on every page; the current tab already carries the red */
#main-menu .menu-primary::after { display: none !important; }
.menu-primary li.current-menu-item > a { background: var(--dd-red) !important; color: #fff !important; }
/* round 2 */
.home-hero h1, .home-hero h1.entry-title { font-size: clamp(5rem, 10vw, 9rem) !important; line-height: .78 !important; max-width: 7ch; }
@media (max-width: 767px) { .home-hero h1, .home-hero h1.entry-title { font-size: clamp(4.2rem, 13vw, 6.5rem) !important; } }
.entry-header h1, .archive-header h1 { max-width: none !important; }
.entry-header { max-width: 820px; }
.home-hero .portrait { position: relative; overflow: visible; }
.home-hero .portrait::before { content: "" !important; position: absolute !important; inset: -16px -16px 16px 16px !important; border: 3px solid var(--dd-red) !important; background: none !important; z-index: 0 !important; box-shadow: none !important; transform: none !important; }
.home-hero .portrait img { position: relative; z-index: 1; }

/* breadcrumb + eyebrow on ONE line */
.kicker-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 0; margin: 0 0 1rem; }
.kicker-row .crumbs { margin: 0 !important; }
.kicker-row .crumbs ol { display: inline-flex; }
.kicker-row .eyebrow { margin: 0 !important; }
.kicker-row .crumbs + .eyebrow::before { content: "/"; margin: 0 .6rem; opacity: .5; font-weight: 400; }
.archive-header .kicker-row { justify-content: flex-start; }

/* quotes row: card per quote, no footer element inside */
.quotes { margin: 2rem 0 0; }
.quotes blockquote { position: relative; margin: 0 0 1.5rem; padding: 1.4rem 1.4rem 1.2rem 1.6rem; background: var(--dd-card); border-left: 6px solid var(--dd-red); box-shadow: 0 10px 30px rgba(20,15,10,.06); font-family: 'Lora', serif; font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--dd-ink); min-height: 100%; }
.quotes blockquote::before { display: none; }
.quotes blockquote p { margin: 0 0 1rem; }
.quotes .cite { margin: 0; font-style: normal; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; line-height: 1.25; color: var(--dd-red); }
.quotes .cite b { display: block; font-weight: 800; font-size: 1.05rem; }
.quotes .cite span { display: block; color: var(--dd-muted); font-size: .78rem; letter-spacing: .08em; }
.quotes > [class*="col-"] { display: flex; }
body.dark-mode .quotes blockquote { background: #161616; color: rgba(255,255,255,.9); box-shadow: none; }
body.dark-mode .quotes .cite span { color: rgba(255,255,255,.55); }
/* masthead right cluster: one flex row so the search icon sits level with the toggle, socials, button and avatar */
#header .header-right { float: none !important; width: auto !important; display: flex; align-items: center; justify-content: flex-end; gap: .25rem; margin-left: auto; }
#header .container > .align-items-center { display: flex; align-items: center; }
#header .header-right > .d-inline-flex { float: none !important; display: flex; align-items: center; }
#header .search-form { float: none !important; order: -1; display: flex; align-items: center; margin: 0 .35rem 0 0; padding: 0 .4rem; height: 32px; }
#header .searh-toggle { display: flex; align-items: center; height: 32px; line-height: 1; padding: 0 .3rem; }
#header .search-form input.search_field { height: 30px; }
#header .dark-light-toggle { display: flex; align-items: center; height: 32px; margin-right: .5rem; }
#header .social-network { margin: 0; }
#header .clearfix { display: none; }
/* card excerpts: darker so the deck reads on paper */
.entry-excerpt, .entry-excerpt p, .card .entry-excerpt { color: rgba(16,16,16,.82) !important; fill: rgba(16,16,16,.82) !important; font-size: 1.02rem; line-height: 1.5; }
.archive-intro, .entry-wraper .excerpt, .home-hero .excerpt { color: rgba(16,16,16,.82) !important; }
.home-hero .excerpt { color: rgba(255,255,255,.88) !important; }
body.dark-mode .entry-excerpt, body.dark-mode .entry-excerpt p, body.dark-mode .archive-intro, body.dark-mode .entry-wraper .excerpt { color: rgba(255,255,255,.8) !important; }
/* hub cards: the scaffold's .card{flex-direction:column} was stacking the tile under the text; rows stay rows */
article.card.row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start; }
article.card.row > .col-md-9 { flex: 0 0 auto; width: 75%; }
article.card.row > figure.tile.col-md-3 { flex: 0 0 auto; width: 25%; padding-left: 12px; padding-right: 12px; }
@media (max-width: 767px) { article.card.row > .col-md-9, article.card.row > figure.tile.col-md-3 { width: 100%; padding: 0; } }

/* Google Preferred Sources button (our styling; Google supplies the flow) */
.btn-prefsrc { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; border: 2px solid #fff; background: #fff; color: #111 !important; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; line-height: 1; text-decoration: none !important; }
.btn-prefsrc:hover { background: var(--dd-red); border-color: var(--dd-red); color: #fff !important; }
.btn-prefsrc svg { flex: 0 0 18px; }
.prefsrc-wrap { margin: 1rem 0 1.2rem; }
.btn-prefsrc.compact { border-color: var(--dd-ink); background: transparent; font-size: .9rem; padding: .45rem .8rem; margin: .4rem 0 .6rem; }
.btn-prefsrc.compact:hover { background: var(--dd-ink); border-color: var(--dd-ink); color: #fff !important; }
body.dark-mode .btn-prefsrc.compact { border-color: #fff; color: #fff !important; }
body.dark-mode .btn-prefsrc.compact:hover { background: #fff; color: #111 !important; }

/* ==================== PHOTO THUMBS (9/13): cards carry a photo instead of the numbered tile ==================== */
figure.thumb { margin: 0; }
figure.thumb a { display: block; position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: 0; background: #161616; }
figure.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
figure.thumb a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--red); }
.post-has-bg figure.thumb a, .related-posts figure.thumb a, .col-md-5 figure.thumb a { aspect-ratio: 1/1; }
.first figure.thumb a { aspect-ratio: 16/10; }
.home .first figure.thumb { margin: -1rem -1rem 1.1rem !important; }
.home .first figure.thumb a { border-radius: 0; }
.row > figure.thumb { padding: 0; }
.row > figure.thumb.col-md-3 { padding-left: 12px; padding-right: 12px; }
article.card.row > figure.thumb.col-md-3 { flex: 0 0 auto; width: 25%; }
@media (max-width: 767px) {
  article.card.row > figure.thumb.col-md-3 { width: 100%; padding: 0; }
  .cards .card figure.thumb a { aspect-ratio: 16/7; }
}
figure.thumb a:hover img { transform: scale(1.03); }
figure.thumb img { transition: transform .35s ease; }

/* ==================== MERCH CTA (9/13): Grow Bud Yourself Shopify store ==================== */
.shop-cta { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: center; background: #111; color: #fff; padding: 2.5rem 2.5rem 2.5rem 3rem; margin: 2.5rem 0; border-bottom: 8px solid var(--red); }
.shop-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--red); }
.shop-cta .shop-cta__kicker { color: var(--red) !important; margin: 0 0 .5rem; }
.shop-cta .shop-cta__title { font-family: var(--cond); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: 0; font-size: clamp(2.2rem, 4.2vw, 3.6rem); color: #fff; margin: 0 0 .9rem; }
.shop-cta .shop-cta__text { color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 36ch; }
.shop-cta .shop-cta__btn { display: inline-block; text-decoration: none !important; }
.shop-cta .shop-cta__btn:hover { background: #fff !important; border-color: #fff !important; color: #111 !important; }
.shop-cta__items { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.shop-cta__items li { background: #fff; aspect-ratio: 1/1; overflow: hidden; margin: 0 !important; padding: 0 !important; list-style: none; }
.shop-cta__items li::before { content: none !important; }
.shop-cta__items img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.shop-cta--compact { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem 1.5rem 1.75rem 2rem; margin: 2rem 0 0; }
.shop-cta--compact .shop-cta__title { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.shop-cta--compact .shop-cta__text { font-size: 1rem; margin-bottom: 1.1rem; }
.shop-cta--compact .shop-cta__items { grid-template-columns: repeat(2, minmax(0, 1fr)); order: -1; }
.entry-main-content .shop-cta--compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.entry-main-content .shop-cta--compact .shop-cta__items { order: 0; }
@media (max-width: 991px) { .shop-cta { grid-template-columns: 1fr; } .shop-cta__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .shop-cta { padding: 1.75rem 1.25rem 1.75rem 1.75rem; } .entry-main-content .shop-cta--compact { grid-template-columns: 1fr; } }
body.dark-mode .shop-cta { background: #1c1c1c; }
/* merch CTA inside article bodies: cancel the drop cap and the red article link color */
.dropcap .shop-cta p:first-child:first-letter, body.dark-mode .dropcap .shop-cta p:first-child:first-letter { float: none !important; font: inherit !important; font-size: inherit !important; margin: 0 !important; padding: 0 !important; color: inherit !important; line-height: inherit !important; }
html body .shop-cta a.shop-cta__btn { color: #fff !important; text-decoration: none !important; }
html body .shop-cta a.shop-cta__btn:hover { color: #111 !important; }
html body.dark-mode .shop-cta .shop-cta__kicker { color: var(--red) !important; }