/*
Theme Name: Matchline
Theme URI: https://example.com/matchline
Author: Matchline Studio
Author URI: https://example.com
Description: Editorial Data Desk — a light, sticky-sidebar reading theme built for long-form analysis content (tennis betting strategy pillar/cluster content package). Serif headlines, grotesk body, mono data accents, zero-radius editorial cards, optional dark mode. All SEO logic (meta, canonical, JSON-LD, breadcrumbs, TOC, FAQ, related content, sitemap hygiene) lives inside the theme — no page builder, no SEO plugin required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: matchline
Tags: blog, one-column, custom-logo, custom-menu, featured-images, translation-ready, editor-style

Design card
------------
Composition   : content column + sticky right-hand sidebar (auto Table of Contents) on
                page.php/single.php; the front page keeps its own PILLAR hero/layout
                untouched, since that markup and its <style> ship with the content.
Header        : 3 selectable variants — classic (logo left / nav right / hairline),
                centered (logo centered, nav centered below) and minimal
                (logo left, burger-only, slide-in drawer). Chosen in functions.php.
Palette       : Editorial Data Desk — warm paper background, near-black ink, a single
                deep teal accent. Optional dark variant (graphite/ink) toggled via
                MTL_THEME_VARIANT.
Typography    : "Newsreader" (serif) for headings, "Inter" (grotesk) for body copy,
                "IBM Plex Mono" for bylines, labels, numerals and the reading-time /
                view-count strip. Fluid scale via clamp().
Cards         : flat, thin 1px rule, zero border-radius, no drop shadow at rest —
                an accent-teal left rule appears on hover/focus instead of a shadow.
Details       : radius 0 everywhere, dividers as hairlines (not boxes/backgrounds),
                hover/focus states shift the accent rule and underline, never scale.
Density       : airy — generous line-height and vertical rhythm, one column of
                chrome, no more than one accent colour on screen at a time.

Compatibility notes (read before editing selectors)
----------------------------------------------------
The imported PILLAR page ships its own <style> block (element selectors: body, h1,
h2, h3, p, ul, a[href], figure, blockquote, table, plus content classes such as
.hero, .toc, .card-grid, .site-header, .site-footer, .header-meta, etc.) and that
block is printed by the theme on EVERY page via #pillar-custom-styles (see
inc/pillar-integration.php), positioned in <head> AFTER this stylesheet on purpose,
so content wins any tie on shared selectors. Two consequences drive how this file
is written:

  1. Every class here is prefixed "mtl-" — never a bare/generic name like
     .container, .card, .header, .footer, .hero, .toc (those belong to content).
  2. Chrome that must survive the content stylesheet's low-specificity element
     rules (nav links, sidebar, cards, footer fallback, buttons) is scoped under a
     stable ID (#mtl-shell, #mtl-site-header, #mtl-sidebar, #mtl-site-footer,
     #mtl-related, #mtl-articles-grid, #main-content, ...). An ID always outranks
     "a[href]" / "h1" / ".some-content-class" without ever resorting to
     !important, which the brief explicitly forbids for fighting content styles.
*/

/* ============================================================
   1) FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   2) DESIGN TOKENS (all prefixed --mtl-)
   ============================================================ */
:root{
  --mtl-bg:#f6f4ee;
  --mtl-surface:#ffffff;
  --mtl-surface-raised:#fbfaf6;
  --mtl-ink:#15181b;
  --mtl-ink-muted:#5a6067;
  --mtl-ink-faint:#8a8f94;
  --mtl-border:#dcd8cc;
  --mtl-border-strong:#c7c2b3;
  --mtl-accent:#0b6e64;
  --mtl-accent-ink:#ffffff;
  --mtl-accent-wash:#e7f1ee;
  --mtl-danger:#a83a2c;

  --mtl-font-head:"Newsreader",Georgia,"Times New Roman",serif;
  --mtl-font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mtl-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --mtl-shell-width:1220px;
  --mtl-read-width:760px;
  --mtl-radius:0px;
  --mtl-gap:1.5rem;
  --mtl-shadow-sm:0 1px 3px rgba(21,24,27,.06);
}

/* Dark-variant token overrides live in assets/css/theme-dark.css, enqueued
   conditionally (only when MTL_THEME_VARIANT === 'dark', see functions.php)
   so a light-only install never downloads them. */

*,*::before,*::after{box-sizing:border-box;}

/* ============================================================
   3) SHELL — everything the theme owns lives inside #mtl-shell so
      content's global body{background/color/font} rule (printed
      after this file) cannot repaint the theme's own chrome.
   ============================================================ */
#mtl-shell{
  background:var(--mtl-bg);
  color:var(--mtl-ink);
  font-family:var(--mtl-font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
#mtl-shell img{max-width:100%;height:auto;}
#mtl-shell :focus-visible{outline:3px solid var(--mtl-accent);outline-offset:2px;}

.mtl-skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:9999;
  background:var(--mtl-accent);
  color:var(--mtl-accent-ink);
  padding:.8em 1.2em;
  font-family:var(--mtl-font-mono);
  font-size:.85rem;
  text-decoration:none;
}
.mtl-skip-link:focus{left:1rem;top:1rem;}

.mtl-visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ============================================================
   4) HEADER (#mtl-site-header) — 3 selectable layouts
   ============================================================ */
#mtl-site-header{
  border-bottom:1px solid var(--mtl-border);
  background:var(--mtl-surface);
  position:sticky;
  top:0;
  z-index:40;
}
#mtl-site-header .mtl-header-row{
  max-width:var(--mtl-shell-width);
  margin:0 auto;
  padding:1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
#mtl-site-header .mtl-brand{
  display:inline-flex;
  align-items:baseline;
  gap:.5rem;
  text-decoration:none;
  color:var(--mtl-ink);
}
#mtl-site-header .mtl-brand img{display:block;height:38px;width:auto;}
#mtl-site-header .mtl-brand .mtl-brand-name{
  font-family:var(--mtl-font-head);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:-.01em;
}
#mtl-site-header .mtl-brand .mtl-brand-strap{
  font-family:var(--mtl-font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mtl-ink-muted);
}

#mtl-site-header .mtl-nav{display:flex;}
#mtl-site-header .mtl-nav ul{
  list-style:none;
  display:flex;
  gap:1.75rem;
  margin:0;
  padding:0;
}
#mtl-site-header .mtl-nav .mtl-nav__link{
  font-family:var(--mtl-font-body);
  font-weight:600;
  font-size:.92rem;
  color:var(--mtl-ink);
  text-decoration:none;
  padding:.35em 0;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease,color .15s ease;
}
#mtl-site-header .mtl-nav .mtl-nav__link:hover,
#mtl-site-header .mtl-nav .mtl-nav__link:focus-visible{
  color:var(--mtl-accent);
  border-bottom-color:var(--mtl-accent);
}
#mtl-site-header .mtl-nav .sub-menu{
  list-style:none;
  margin:0;padding:0;
  position:absolute;
  background:var(--mtl-surface);
  border:1px solid var(--mtl-border);
  min-width:200px;
  padding:.4rem 0;
  display:none;
  flex-direction:column;
  gap:0;
}
#mtl-site-header .mtl-nav li{position:relative;}
#mtl-site-header .mtl-nav li:hover > .sub-menu,
#mtl-site-header .mtl-nav li:focus-within > .sub-menu{display:flex;}
#mtl-site-header .mtl-nav .sub-menu .mtl-nav__link{padding:.5em 1rem;display:block;border:none;}
#mtl-site-header .mtl-nav .sub-menu .mtl-nav__link:hover{background:var(--mtl-accent-wash);}

#mtl-site-header .mtl-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border:1px solid var(--mtl-border);
  background:transparent;
  cursor:pointer;
  padding:0;
}
#mtl-site-header .mtl-burger span,
#mtl-site-header .mtl-burger::before,
#mtl-site-header .mtl-burger::after{
  content:"";
  display:block;
  width:20px;height:2px;
  background:var(--mtl-ink);
  position:relative;
}
#mtl-site-header .mtl-burger{flex-direction:column;gap:5px;}

/* header variant: classic (default) — nothing extra needed */

/* header variant: centered */
#mtl-site-header.mtl-header--centered .mtl-header-row{flex-direction:column;gap:.75rem;padding-top:1.3rem;}
#mtl-site-header.mtl-header--centered .mtl-nav ul{justify-content:center;}
#mtl-site-header.mtl-header--centered .mtl-header-aside{position:absolute;right:1.5rem;top:1.3rem;}

/* header variant: minimal — burger + drawer only, no inline desktop nav */
#mtl-site-header.mtl-header--minimal .mtl-nav{display:none;}
#mtl-site-header.mtl-header--minimal .mtl-burger{display:inline-flex;}

#mtl-site-header .mtl-header-aside{
  display:flex;
  align-items:center;
  gap:1rem;
}
#mtl-site-header .mtl-search-hint{
  font-family:var(--mtl-font-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--mtl-ink-faint);
}

/* mobile drawer (shared by all 3 variants below breakpoint) */
#mtl-mobile-drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:min(84vw,340px);
  background:var(--mtl-surface);
  border-left:1px solid var(--mtl-border);
  transform:translateX(100%);
  transition:transform .28s ease;
  z-index:60;
  padding:1.25rem 1.5rem;
  overflow-y:auto;
}
#mtl-mobile-drawer.mtl-is-open{transform:translateX(0);}
#mtl-mobile-drawer ul{list-style:none;margin:0;padding:0;}
#mtl-mobile-drawer li{border-bottom:1px solid var(--mtl-border);}
#mtl-mobile-drawer .mtl-nav__link{
  display:block;
  padding:.85em 0;
  font-family:var(--mtl-font-body);
  font-weight:600;
  color:var(--mtl-ink);
  text-decoration:none;
}
#mtl-mobile-drawer .mtl-drawer-close{
  border:1px solid var(--mtl-border);
  background:none;
  width:36px;height:36px;
  font-size:1.1rem;
  cursor:pointer;
  margin-bottom:1rem;
}
#mtl-drawer-overlay{
  position:fixed;inset:0;
  background:rgba(21,24,27,.4);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  z-index:55;
}
#mtl-drawer-overlay.mtl-is-open{opacity:1;pointer-events:auto;}

@media (max-width:900px){
  #mtl-site-header .mtl-nav{display:none;}
  #mtl-site-header .mtl-burger{display:inline-flex;}
  #mtl-site-header.mtl-header--centered .mtl-header-aside{position:static;}
}

/* ============================================================
   5) LAYOUT — main content grid with sticky sidebar
   ============================================================ */
#main-content{max-width:var(--mtl-shell-width);margin:0 auto;padding:2.5rem 1.5rem 4rem;width:100%;flex:1;}

#mtl-page-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:3rem;
  align-items:start;
}
#mtl-page-grid.mtl-no-sidebar{grid-template-columns:minmax(0,1fr);}
#mtl-page-grid .mtl-primary{min-width:0;}

#mtl-sidebar{
  position:sticky;
  top:5.5rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
#mtl-sidebar .mtl-sidebar-box{
  border:1px solid var(--mtl-border);
  padding:1.25rem 1.35rem;
  background:var(--mtl-surface);
}
#mtl-sidebar .mtl-sidebar-title{
  font-family:var(--mtl-font-mono);
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mtl-ink-muted);
  margin:0 0 .9em;
  padding-bottom:.6em;
  border-bottom:1px solid var(--mtl-border);
}
/* Portable TOC component — .mtl-toc + two-class children only, so it keeps
   priority over content's element-level rules (a[href], h2...) whether it's
   dropped in #mtl-sidebar (page.php/single.php) or standalone in
   #mtl-front-toc (front page, replacing the manual [data-content="toc"]
   block — see inc/table-of-contents.php). Two classes = specificity (0,2,0),
   which beats a[href]'s (0,1,1) without an ID wrapper or !important. */
.mtl-toc .mtl-toc__title{
  font-family:var(--mtl-font-mono);
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mtl-ink-muted);
  margin:0 0 .9em;
  padding-bottom:.6em;
  border-bottom:1px solid var(--mtl-border);
}
.mtl-toc .mtl-toc__list,
.mtl-toc .mtl-toc__list ol{list-style:none;margin:0;padding:0;}
.mtl-toc .mtl-toc__list li{margin:0;}
.mtl-toc .mtl-toc__link{
  display:block;
  padding:.4em 0;
  font-size:.88rem;
  line-height:1.35;
  color:var(--mtl-ink-muted);
  text-decoration:none;
  border-left:2px solid transparent;
  padding-left:.6em;
  margin-left:-.6em;
}
.mtl-toc .mtl-toc__link:hover,
.mtl-toc .mtl-toc__link:focus-visible,
.mtl-toc .mtl-toc__link.mtl-is-active{
  color:var(--mtl-ink);
  border-left-color:var(--mtl-accent);
}
#mtl-front-toc{
  max-width:var(--mtl-read-width);
  margin:1.6rem auto;
  border:1px solid var(--mtl-border);
  background:var(--mtl-surface);
  padding:1.3rem 1.5rem;
}
#mtl-sidebar .mtl-toc{display:block;}

@media (max-width:1000px){
  #mtl-page-grid{grid-template-columns:minmax(0,1fr);}
  #mtl-sidebar{position:static;}
}

/* ============================================================
   6) BREADCRUMBS
   ============================================================ */
#mtl-breadcrumbs{max-width:var(--mtl-shell-width);margin:0 auto;padding:1.1rem 1.5rem 0;}
#mtl-breadcrumbs .mtl-crumbs{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.4em;
  margin:0;padding:0;
  font-family:var(--mtl-font-mono);
  font-size:.76rem;
  color:var(--mtl-ink-faint);
}
#mtl-breadcrumbs .mtl-crumbs li:not(:last-child)::after{content:"/";margin-left:.4em;color:var(--mtl-border-strong);}
#mtl-breadcrumbs .mtl-crumbs a{color:var(--mtl-ink-muted);text-decoration:none;}
#mtl-breadcrumbs .mtl-crumbs a:hover{color:var(--mtl-accent);text-decoration:underline;}
#mtl-breadcrumbs .mtl-crumbs [aria-current="page"]{color:var(--mtl-ink);}

/* ============================================================
   7) ENTRY HEADER (page.php / single.php)
   ============================================================ */
#mtl-entry-header{max-width:var(--mtl-read-width);margin:1.4rem 0 1.6rem;}
#mtl-entry-header .mtl-eyebrow{
  display:inline-block;
  font-family:var(--mtl-font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--mtl-accent);
  margin-bottom:.6em;
}
#mtl-entry-header .mtl-entry-title{
  font-family:var(--mtl-font-head);
  font-weight:600;
  font-size:clamp(2rem,4.4vw,3rem);
  line-height:1.14;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  color:var(--mtl-ink);
}
.mtl-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:1.1em;
  font-family:var(--mtl-font-mono);
  font-size:.78rem;
  color:var(--mtl-ink-muted);
  padding-top:.9em;
  border-top:1px solid var(--mtl-border);
}
.mtl-meta-row .mtl-meta-item{display:inline-flex;align-items:center;gap:.4em;}
.mtl-meta-row a{color:var(--mtl-ink-muted);text-decoration:none;}
.mtl-meta-row a:hover{color:var(--mtl-accent);text-decoration:underline;}

#mtl-featured-figure{margin:0 0 2rem;max-width:var(--mtl-shell-width);}
#mtl-featured-figure img{width:100%;height:auto;display:block;border:1px solid var(--mtl-border);}

/* ============================================================
   8) ENTRY CONTENT — keep specificity low here on purpose: the
      imported article HTML (h2/p/ul/figure/table/[data-content]
      blocks) must be styled by the content's own <style>, not by
      this file. We only constrain width via the wrapper below.
   ============================================================ */
.mtl-entry-content{max-width:var(--mtl-read-width);}
.mtl-entry-content table{width:100%;}
.mtl-table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;margin:1.5em 0;}
.mtl-table-responsive table{min-width:520px;margin:0;}

/* ============================================================
   9) CARDS — flat, thin rule, zero radius, accent rule on hover
   ============================================================ */
.mtl-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--mtl-border);
  border-left:3px solid transparent;
  background:var(--mtl-surface);
  transition:border-color .15s ease;
}
.mtl-card:hover,.mtl-card:focus-within{border-left-color:var(--mtl-accent);}
.mtl-card .mtl-card__media{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--mtl-border);}
.mtl-card .mtl-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.mtl-card .mtl-card__body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.mtl-card .mtl-card__eyebrow{font-family:var(--mtl-font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mtl-accent);}
.mtl-card .mtl-card__title{font-family:var(--mtl-font-head);font-weight:600;font-size:1.15rem;line-height:1.3;margin:0;}
.mtl-card .mtl-card__title a{color:var(--mtl-ink);text-decoration:none;}
.mtl-card .mtl-card__title a::after{content:"";position:absolute;inset:0;}
.mtl-card .mtl-card__title{position:relative;}
.mtl-card .mtl-card__excerpt{font-size:.92rem;line-height:1.55;color:var(--mtl-ink-muted);margin:0;}
.mtl-card .mtl-card__foot{margin-top:auto;font-family:var(--mtl-font-mono);font-size:.72rem;color:var(--mtl-ink-faint);display:flex;gap:.9em;}

#mtl-articles-grid,#mtl-related-grid,#mtl-news-grid,#mtl-predictions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--mtl-gap);
  margin:1.5rem 0;
}
#mtl-related{max-width:var(--mtl-read-width);margin:3rem auto 0;padding-top:2rem;border-top:1px solid var(--mtl-border);}
#mtl-related .mtl-section-title{
  font-family:var(--mtl-font-head);
  font-weight:600;
  font-size:1.4rem;
  margin:0 0 1.2rem;
}

/* featured/hero card used at top of page-news.php */
.mtl-card--feature{grid-column:1/-1;flex-direction:row;}
.mtl-card--feature .mtl-card__media{border-bottom:none;border-right:1px solid var(--mtl-border);flex:0 0 46%;aspect-ratio:auto;}
.mtl-card--feature .mtl-card__body{flex:1;justify-content:center;padding:1.6rem 1.8rem;}
.mtl-card--feature .mtl-card__title{font-size:1.6rem;}
@media (max-width:700px){
  .mtl-card--feature{flex-direction:column;}
  .mtl-card--feature .mtl-card__media{border-right:none;border-bottom:1px solid var(--mtl-border);flex:none;aspect-ratio:16/10;}
}

/* ============================================================
   9b) FAQ accordion — output of the [faq] shortcode (inc/faq.php).
       Two-class selectors again, so it isn't clobbered by content's
       generic details/summary rules on pages where both appear.
   ============================================================ */
.mtl-faq{display:flex;flex-direction:column;gap:.7rem;margin:1.8em 0;max-width:var(--mtl-read-width);}
.mtl-faq .mtl-faq__item{border:1px solid var(--mtl-border);background:var(--mtl-surface);}
.mtl-faq .mtl-faq__summary{
  list-style:none;
  cursor:pointer;
  padding:1em 1.2em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
}
.mtl-faq .mtl-faq__summary::-webkit-details-marker{display:none;}
.mtl-faq .mtl-faq__summary::after{
  content:"+";
  font-family:var(--mtl-font-mono);
  flex-shrink:0;
  color:var(--mtl-accent);
  font-size:1.2rem;
}
.mtl-faq .mtl-faq__item[open] .mtl-faq__summary::after{content:"\2212";}
.mtl-faq .mtl-faq__question{
  font-family:var(--mtl-font-head);
  font-weight:600;
  font-size:1.02rem;
  margin:0;
  color:var(--mtl-ink);
}
.mtl-faq .mtl-faq__answer{padding:0 1.2em 1.1em;color:var(--mtl-ink-muted);font-size:.95rem;line-height:1.6;}
.mtl-faq .mtl-faq__answer p{margin:0;}

/* ============================================================
   10) PAGINATION / PREV-NEXT
   ============================================================ */
.mtl-pagination{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:2.5rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--mtl-border);
  font-family:var(--mtl-font-mono);
  font-size:.85rem;
}
.mtl-pagination a,.mtl-pagination span{
  color:var(--mtl-ink);
  text-decoration:none;
  padding:.5em .9em;
  border:1px solid var(--mtl-border);
}
.mtl-pagination a:hover{border-color:var(--mtl-accent);color:var(--mtl-accent);}
.mtl-pagination .mtl-pagination__disabled{color:var(--mtl-ink-faint);}

/* ============================================================
   11) AUTHOR BIO / FALLBACK MESSAGE
   ============================================================ */
.mtl-author-bio{
  display:flex;
  gap:1rem;
  align-items:center;
  max-width:var(--mtl-read-width);
  margin:2.5rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--mtl-border);
  font-size:.85rem;
  color:var(--mtl-ink-muted);
}
.mtl-empty-notice{
  border:1px dashed var(--mtl-border-strong);
  padding:2rem;
  text-align:center;
  font-family:var(--mtl-font-mono);
  font-size:.9rem;
  color:var(--mtl-ink-muted);
  margin:1.5rem 0;
}

/* ============================================================
   12) FOOTER FALLBACK (#mtl-site-footer) — only rendered when
       _pillar_custom_footer is not available yet (pre-import).
   ============================================================ */
#mtl-site-footer{
  margin-top:auto;
  background:#14171a;
  color:#b7bcc0;
  border-top:1px solid #262b30;
}
#mtl-site-footer .mtl-footer-row{
  max-width:var(--mtl-shell-width);
  margin:0 auto;
  padding:3rem 1.5rem 2rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
}
#mtl-site-footer .mtl-footer-title{
  font-family:var(--mtl-font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#eef0ee;
  margin:0 0 .8em;
}
#mtl-site-footer p{color:#b7bcc0;font-size:.82rem;line-height:1.6;margin:0 0 .6em;}
#mtl-site-footer ul{list-style:none;margin:0;padding:0;}
#mtl-site-footer li{margin:.35em 0;}
#mtl-site-footer a{color:#cdd1c8;text-decoration:none;font-size:.85rem;}
#mtl-site-footer a:hover{color:var(--mtl-accent);text-decoration:underline;}
#mtl-site-footer .mtl-footer-bottom{
  max-width:var(--mtl-shell-width);
  margin:0 auto;
  padding:1.1rem 1.5rem 2rem;
  border-top:1px solid #262b30;
  font-family:var(--mtl-font-mono);
  font-size:.72rem;
  color:#7d8388;
}
@media (max-width:800px){#mtl-site-footer .mtl-footer-row{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){#mtl-site-footer .mtl-footer-row{grid-template-columns:1fr;}}

/* ============================================================
   13) BACK TO TOP
   ============================================================ */
#mtl-back-to-top{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  width:44px;height:44px;
  border:1px solid var(--mtl-border-strong);
  background:var(--mtl-surface);
  color:var(--mtl-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,border-color .2s ease;
  z-index:45;
}
#mtl-back-to-top.mtl-is-visible{opacity:1;visibility:visible;transform:translateY(0);}
#mtl-back-to-top:hover{border-color:var(--mtl-accent);color:var(--mtl-accent);}

/* ============================================================
   14) 404
   ============================================================ */
#mtl-404{max-width:var(--mtl-read-width);margin:3rem auto;text-align:center;}
#mtl-404 .mtl-404-code{
  font-family:var(--mtl-font-mono);
  font-size:.85rem;
  letter-spacing:.2em;
  color:var(--mtl-accent);
}
#mtl-404 h1{font-family:var(--mtl-font-head);font-size:clamp(2rem,5vw,2.8rem);margin:.3em 0;}
#mtl-404 .mtl-404-subtitle{
  font-family:var(--mtl-font-mono);
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mtl-ink-muted);
  margin:2rem 0 0;
}
#mtl-404 .mtl-404-list{list-style:none;margin:.8rem 0 0;padding:0;text-align:left;display:inline-block;}
#mtl-404 .mtl-404-list li{border-bottom:1px solid var(--mtl-border);}
#mtl-404 .mtl-404-list a{display:block;padding:.7em 0;color:var(--mtl-ink);text-decoration:none;font-family:var(--mtl-font-body);}
#mtl-404 .mtl-404-list a:hover{color:var(--mtl-accent);}

/* ============================================================
   15) SITEMAP TEMPLATE
   ============================================================ */
.mtl-sitemap-tree{max-width:var(--mtl-read-width);}
.mtl-sitemap-tree ul{list-style:none;margin:0 0 0 1.1rem;padding:0;border-left:1px solid var(--mtl-border);}
.mtl-sitemap-tree > ul{margin-left:0;border-left:none;}
.mtl-sitemap-tree li{margin:.15em 0;padding-left:1rem;}
.mtl-sitemap-tree a{color:var(--mtl-ink);text-decoration:none;font-size:.95rem;}
.mtl-sitemap-tree a:hover{color:var(--mtl-accent);text-decoration:underline;}
.mtl-sitemap-section-title{font-family:var(--mtl-font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:var(--mtl-ink-muted);margin:2rem 0 .6rem;}
.mtl-sitemap-section-title:first-child{margin-top:0;}

/* ============================================================
   16) PRINT
   ============================================================ */
@media print{
  #mtl-site-header,#mtl-sidebar,#mtl-back-to-top,#mtl-mobile-drawer,#mtl-drawer-overlay,#mtl-site-footer{display:none!important;}
}
