/*
Theme Name: Muzic Fanatic
Description: A text-first music publication child theme for TwoStroke 1.0.1.
Version: 1.2.1
Template: twostroke
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: muzicfanatic
*/

/* Global gutters also protect inherited page and error templates. */
.wp-site-blocks { padding-inline: clamp(20px, 4vw, 48px); }
.wp-site-blocks > main { padding-top: clamp(16px, 3vw, 36px) !important; }
.wp-site-blocks :where(h1,h2,h3,p,a) { overflow-wrap: break-word; }
.mf-header { padding-block: 24px; border-bottom: 1px solid #30363c; display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 10px; max-width: 740px; margin-inline: auto; }
.mf-header > .wp-block-site-title { grid-column: 1; grid-row: 1; margin-inline: 0 !important; }
.mf-header > .mf-tagline { grid-column: 1 / -1; grid-row: 2; margin: 4px 0 0 !important; }
.mf-header > .wp-block-navigation { grid-column: 2; grid-row: 1; margin: 0 !important; justify-self: end; }
.mf-header > .wp-block-search { grid-column: 1 / -1; grid-row: 3; width: 100%; max-width: none; margin: 18px 0 0 !important; }
.mf-header .wp-block-site-title { margin: 0; font-size: clamp(23px, 3vw, 34px); line-height: 1; }
.mf-header .wp-block-site-title a { position: relative; display: inline-flex; align-items: center; color: #f4f4f2; font-style: italic; font-weight: 850; letter-spacing: .075em; text-decoration: none; text-shadow: 3px 3px 0 rgba(255,122,69,.14); }
.mf-header .wp-block-site-title a::before { content: ""; width: 5px; height: .9em; margin-right: 11px; background: #ff7a45; box-shadow: 8px -.18em 0 #ff7a45, 16px .14em 0 #ff7a45; transform: skew(-8deg); }
.mf-header .wp-block-site-title a::after { content: ""; position: absolute; left: 35px; bottom: -8px; width: 48px; height: 3px; background: #ff7a45; transform: skew(-24deg); }
.mf-header .wp-block-site-title a:hover { color: #ff8d60; }
.mf-tagline { margin-top: 12px !important; color: #b0b8bf; font-size: 14px; letter-spacing: .025em; }
.mf-header .wp-block-navigation { font-size: 14px; font-weight: 600; }
.mf-header .wp-block-navigation-item__content { padding-block: 10px; }
.mf-header .wp-block-navigation__container { gap: 8px 24px; }
.mf-header .wp-block-navigation__responsive-container.is-menu-open {
  background: #101214 !important; color: #f4f4f2 !important;
  padding: 24px;
}
.mf-header .wp-block-navigation__responsive-container-open,
.mf-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
.mf-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 20px; }
.mf-header .wp-block-search { max-width: none; }
.wp-block-search__input, .comment-form input:not([type=submit]), .comment-form textarea {
  background: #1b2025; color: #f4f4f2; border: 1px solid #56616b; border-radius: 0;
  padding: 10px 12px; font: inherit; max-width: 100%; box-sizing: border-box;
}
.wp-block-search__input { min-width: 0; }
.wp-block-search__button { margin-left: 8px; min-height: 44px; padding: 10px 14px; font-size: 14px; }
.mf-kicker { color: #ff7a45; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.mf-intro { margin-top: 0; font-size: clamp(28px, 4vw, 42px); }
.twostroke-card { padding: clamp(18px, 3vw, 28px); border-color: #30363c; border-left-color: #ff7a45; }
.wp-block-post-template { padding: 0; }
.wp-block-post-template > li { margin-bottom: 20px; }
.twostroke-card .wp-block-post-title { font-size: clamp(21px, 2.8vw, 28px); line-height: 1.25; letter-spacing: 0; text-transform: none; margin-top: 0; }
.twostroke-card .wp-block-post-title a { color: #f4f4f2; text-decoration: none; }
.twostroke-card .wp-block-post-title a:hover { color: #ff7a45; text-decoration: underline; text-underline-offset: 4px; }
.twostroke-card .wp-block-post-excerpt { color: #b0b8bf; font-size: 16px; line-height: 1.65; margin-top: 14px; }
.twostroke-card .wp-block-post-excerpt p { margin-block: 0; }
.twostroke-card .wp-block-group { gap: 8px 16px; margin-top: 12px; }
.home .wp-block-post-template > li:first-child .twostroke-card { background: #1b2025; }
.home .wp-block-post-template > li:first-child .wp-block-post-title { font-size: clamp(25px, 3.6vw, 36px); }
.single main > .wp-block-post-title { position: relative; font-size: clamp(30px, 4.5vw, 46px); text-transform: none; line-height: 1.15; letter-spacing: -.02em; padding-left: clamp(18px, 2.5vw, 28px); }
.single main > .wp-block-post-title::before { content: ""; position: absolute; inset: .12em auto .08em 0; width: 4px; background: #ff7a45; }
.mf-post-meta { width: 100%; max-width: 740px; gap: 8px; margin: clamp(20px, 3vw, 28px) auto 30px !important; padding: 0; box-sizing: border-box; border: 0; color: #b0b8bf; font-size: 11px; line-height: 1.3; letter-spacing: .065em; }
.mf-post-meta > * { display: inline-flex; align-items: center; margin: 0; min-height: 34px; padding: 6px 11px; background: #1b2025; border: 1px solid #394149; border-left: 3px solid #ff7a45; border-radius: 0; }
.mf-post-meta > * + *::before { content: none; }
.mf-post-meta .wp-block-shortcode { order: initial; margin: 0; padding: 0; border: 0; background: transparent; }
.mf-byline { display: inline-flex; align-items: center; gap: 5px; height: 34px; min-height: 34px; box-sizing: border-box; padding: 6px 11px; background: #1b2025; border: 1px solid #394149; border-left: 3px solid #ff7a45; border-radius: 0; }
.mf-byline > p:empty { display: none !important; margin: 0 !important; }
.mf-byline-avatar { display: none; }
.mf-byline-copy { display: flex; align-items: baseline; gap: 4px; font-size: 11px !important; font-weight: 400 !important; line-height: 1.3; letter-spacing: .065em; text-transform: uppercase; }
.mf-byline-copy span { color: #7f8992; font: inherit !important; letter-spacing: inherit; text-transform: inherit; }
.mf-byline-copy a { color: #f4f4f2; font: inherit !important; letter-spacing: inherit; text-decoration: none; text-transform: inherit; }
.mf-byline-copy a:hover { color: #ff7a45; }
.mf-post-meta .wp-block-post-date,
.mf-post-meta .wp-block-post-terms { min-height: 34px; padding: 6px 11px; border: 1px solid #394149; border-left: 3px solid #ff7a45; color: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-transform: uppercase; background: #1b2025; }
.mf-post-meta .wp-block-post-date::before { content: "Published"; margin-right: 7px; color: #7f8992; font-size: 11px; font-weight: 700; letter-spacing: .065em; }
.mf-post-meta .wp-block-post-terms::before { content: "Filed under"; margin-right: 7px; color: #7f8992; font-size: 11px; font-weight: 700; letter-spacing: .065em; }
.mf-post-meta .wp-block-post-terms a { color: #ff8d60; text-decoration: none; }
.wp-block-post-content { font-size: 18px; line-height: 1.8; }
.wp-block-post-content > * { margin-block-start: 0; margin-block-end: 1.15em; }
.wp-block-post-content :where(h2,h3,h4) { text-transform: none; letter-spacing: 0; line-height: 1.3; margin-top: 1.35em; margin-bottom: .55em; }
.wp-block-post-content :where(p,ul,ol,blockquote,.wp-block-table) + :where(h2,h3,h4) { margin-top: 1.35em; }
.wp-block-post-content h2 { font-size: clamp(24px, 3vw, 30px); }
.wp-block-post-content h3 { font-size: 22px; }
.wp-block-post-content a { text-underline-offset: 3px; }
.wp-block-post-content :where(ul,ol) { padding-left: 0; list-style: none; }
.wp-block-post-content :where(ul,ol) li { position: relative; margin: .65em 0; padding: .15em 0 .15em 2.1em; }
.wp-block-post-content ul > li::before {
  content: ""; position: absolute; left: .35em; top: .82em; width: 8px; height: 8px;
  background: #ff7a45; transform: rotate(45deg);
}
.wp-block-post-content ol { counter-reset: mf-list; }
.wp-block-post-content ol > li { counter-increment: mf-list; padding-left: 3em; }
.wp-block-post-content ol > li::before {
  content: counter(mf-list, decimal-leading-zero); position: absolute; left: 0; top: .05em;
  min-width: 2.15em; color: #ff7a45; font-size: .82em; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.wp-block-post-content li > :where(ul,ol) { margin: .55em 0 0; }
.wp-block-post-content li > :where(ul,ol) li { margin-block: .35em; }
.wp-block-post-content .wp-block-table { overflow-x: auto; margin-block: 1.6em; border: 1px solid #30363c; }
.wp-block-post-content .wp-block-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92em; line-height: 1.55; }
.wp-block-post-content .wp-block-table :where(th,td) { padding: 13px 16px; border: 0; border-bottom: 1px solid #30363c; text-align: left; vertical-align: top; }
.wp-block-post-content .wp-block-table th { color: #101214; background: #ff7a45; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; }
.wp-block-post-content .wp-block-table tbody tr:nth-child(even) { background: #1b2025; }
.wp-block-post-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-post-content .wp-block-table figcaption { margin: 0; padding: 10px 16px; color: #b0b8bf; border-top: 1px solid #30363c; font-size: .8em; text-align: left; }
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote { margin: 1.6em 0; padding: 18px 22px; background: #1b2025; border: 0; border-left: 4px solid #ff7a45; }
.wp-block-post-content blockquote p { margin: 0; font-size: 1.08em; line-height: 1.65; }
.wp-block-post-content blockquote cite { display: block; margin-top: 10px; color: #b0b8bf; font-size: .78em; font-style: normal; }
.wp-block-post-content :where(pre,.wp-block-code) { overflow-x: auto; padding: 18px; background: #1b2025; border: 1px solid #30363c; font-size: .88em; line-height: 1.65; }
.wp-block-post-content hr,
.wp-block-post-content .wp-block-separator { width: 80px; margin: 2em auto; border: 0; border-top: 3px solid #ff7a45; opacity: 1; }
.wp-block-post-content .wp-block-pullquote { margin-block: 1.8em; padding: 24px; border-block: 2px solid #ff7a45; }
.wp-block-post-content .wp-block-pullquote blockquote { margin: 0; padding: 0; background: transparent; border: 0; }
.wp-block-post-content :where(strong,b) { color: #fff; }
.wp-block-post-content mark { color: #101214; background: #ffb08f; padding: .05em .25em; }
.wp-block-post-content :where(kbd,.wp-block-code code) { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
.wp-block-post-content kbd { padding: 2px 6px; color: #f4f4f2; background: #1b2025; border: 1px solid #56616b; box-shadow: 0 2px 0 #30363c; font-size: .8em; }
.wp-block-post-content details { margin-block: 1.5em; padding: 16px 18px; background: #1b2025; border: 1px solid #30363c; border-left: 3px solid #ff7a45; }
.wp-block-post-content details summary { cursor: pointer; color: #f4f4f2; font-weight: 750; }
.wp-block-post-content details > :last-child { margin-bottom: 0; }
.mf-post-tags { margin-top: 42px; padding: 20px; background: #15191d; border: 1px solid #30363c; }
.mf-post-tags-label { margin: 0 0 10px; color: #b0b8bf; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.mf-post-tags .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 8px; color: transparent; font-size: 0; }
.mf-post-tags .wp-block-post-terms a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; color: #f4f4f2; background: #23292f; border: 1px solid #394149; border-left: 3px solid #ff7a45; border-radius: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.mf-post-tags .wp-block-post-terms a::before { content: ""; }
.mf-post-tags .wp-block-post-terms a:hover { color: #101214; background: #ff7a45; border-color: #ff7a45; }
.mf-post-tags .wp-block-post-terms a:hover::before { color: #101214; }
.mf-post-navigation { gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid #30363c; }
.mf-post-navigation .wp-block-post-navigation-link { flex: 1 1 240px; }
.mf-post-navigation a { display: block; min-height: 44px; padding: 13px 15px; color: #f4f4f2; background: #15191d; border: 1px solid #30363c; text-decoration: none; }
.mf-post-navigation a:hover { color: #ff7a45; border-color: #ff7a45; }
.mf-post-navigation .post-navigation-link-previous a::before,
.mf-post-navigation .post-navigation-link-next a::before { display: block; margin-bottom: 5px; color: #ff7a45; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mf-post-navigation .post-navigation-link-previous a::before { content: "Previous story"; }
.mf-post-navigation .post-navigation-link-next a::before { content: "Next story"; }
.wp-block-query-pagination { gap: 12px; padding-block: 20px; flex-wrap: wrap; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { display: inline-block; padding: 10px 12px; }
.wp-block-query-pagination .current { background: #1b2025; }
.wp-block-comments { margin-top: 48px; padding-top: 24px; border-top: 1px solid #30363c; }
.wp-site-blocks > footer { font-size: 14px; color: #b0b8bf; }
.mf-footer { max-width: 740px; margin-inline: auto; padding-block: 28px; border-top: 1px solid #30363c; }
.mf-footer p { margin: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #ff7a45; outline-offset: 4px; }
@media (max-width: 600px) {
  .mf-header { padding-block: 18px; }
  .mf-header .wp-block-site-title { font-size: clamp(19px, 5.5vw, 23px); }
  .mf-header .wp-block-site-title a { letter-spacing: .045em; text-shadow: 2px 2px 0 rgba(255,122,69,.14); }
  .mf-header .wp-block-site-title a::before { width: 4px; margin-right: 8px; box-shadow: 6px -.16em 0 #ff7a45, 12px .12em 0 #ff7a45; }
  .mf-header .wp-block-site-title a::after { left: 26px; bottom: -7px; width: 38px; height: 2px; }
  .mf-header .wp-block-navigation { margin-top: 12px; }
  .mf-header .wp-block-search { max-width: none; }
  .wp-block-post-content { font-size: 17px; line-height: 1.75; }
  .wp-block-post-content :where(h2,h3,h4) { margin-top: 1.2em; }
  .wp-block-post-content :where(ul,ol) li { padding-left: 1.85em; }
  .wp-block-post-content ol > li { padding-left: 2.65em; }
  .wp-block-post-content .wp-block-table { margin-inline: -4px; }
  .wp-block-post-terms { line-height: 1.7; }
  .single main > .wp-block-post-title { padding-left: 16px; }
  .mf-post-meta { margin-bottom: 24px; }
  .mf-post-tags { margin-top: 32px; padding: 16px; }
}
@media (max-width: 340px) {
  .mf-header { grid-template-columns: minmax(0, 1fr) 40px; column-gap: 6px; }
  .mf-header .wp-block-site-title { font-size: 18px; }
  .mf-header .wp-block-site-title a { letter-spacing: .025em; }
}