/*
Theme Name: LayerWalker
Theme URI: https://layerwalker.com/
Author: LayerWalker
Description: 3D printing troubleshooting, calibration and parts theme. Diagnostic-console homepage, dry technical components (print settings, filament specs, fitment tables, safety callouts), six reserved ad slots with zero layout shift, dark mode with no flash, and Amazon Associates compliance built in. No CDN, no build step.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
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: layerwalker
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, dark-mode, translation-ready
*/

/* ==========================================================================
   1. Design tokens

   Palette comes from the machine itself: molten orange is the hot end, cyan
   is the calibrated/cool side, and the neutral ramp is warm graphite so the
   orange never reads as a foreign accent dropped onto cold grey.

   Every number on this site is set in JetBrains Mono. That is the house
   signature — temperatures, millimetres, percentages, error codes.
   ========================================================================== */

:root {
  /* molten — hot end, brand */
  --o-300:#ffb183; --o-400:#ff8a4c; --o-500:#f2601a; --o-600:#d14a0c; --o-700:#a63a08;
  --o-soft:#fff1e9;
  /* cyan — calibrated, verified, cool */
  --c-300:#7be0ea; --c-400:#3ecedc; --c-500:#14aec0; --c-600:#0c8b9b; --c-700:#0a6e7b;
  --c-soft:#e4f8fa;

  /* warm graphite ramp */
  --g-50:#faf9f8;  --g-100:#f3f1ef; --g-200:#e6e3df; --g-300:#d2cdc7; --g-400:#a39c93;
  --g-500:#7a736a; --g-600:#5a544c; --g-700:#423d37; --g-800:#2b2723; --g-900:#1a1715;
  --g-950:#0f0d0c;

  /* difficulty / status — deliberately separate from the brand accent */
  --ok:#0e9f6e;      --ok-soft:#e6f6ef;
  --warn:#c77700;    --warn-soft:#fdf3e2;
  --hard:#d14a0c;    --hard-soft:#fdece3;
  --danger:#c42b1c;  --danger-soft:#fbe9e7;

  /* semantic — light */
  --bg:            var(--g-50);
  --bg-surface:    #ffffff;
  --bg-sunken:     var(--g-100);
  --bg-inverse:    var(--g-900);
  --text:          var(--g-700);
  --text-strong:   var(--g-950);
  --text-muted:    var(--g-500);
  --text-onbrand:  #ffffff;
  --border:        var(--g-200);
  --border-strong: var(--g-300);
  --accent:        var(--o-600);
  --accent-hover:  var(--o-500);
  --accent-soft:   var(--o-soft);
  --accent-2:      var(--c-600);
  --accent-2-soft: var(--c-soft);
  --rating:        var(--warn);

  --shadow-sm: 0 1px 2px rgba(26,23,21,.06);
  --shadow-md: 0 4px 14px rgba(26,23,21,.09);
  --shadow-lg: 0 12px 32px rgba(26,23,21,.14);

  --container: 80rem;
  --radius: .5rem;
  --radius-sm: .25rem;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* the layer-line motif: stacked hairlines, like deposited extrusions */
  --layers: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 4px);
}

html.dark {
  --bg:            var(--g-950);
  --bg-surface:    var(--g-900);
  --bg-sunken:     #14110f;
  --bg-inverse:    #000000;
  --text:          var(--g-300);
  --text-strong:   #ffffff;
  --text-muted:    var(--g-400);
  --border:        #322d28;
  --border-strong: #453f38;
  --accent:        var(--o-400);
  --accent-hover:  var(--o-300);
  --accent-soft:   rgba(242,96,26,.14);
  --accent-2:      var(--c-400);
  --accent-2-soft: rgba(20,174,192,.14);
  --rating:        #e0a44a;

  --ok:#34c98e;      --ok-soft:rgba(14,159,110,.14);
  --warn:#e0a44a;    --warn-soft:rgba(199,119,0,.16);
  --hard:#ff8a4c;    --hard-soft:rgba(209,74,12,.16);
  --danger:#f0705f;  --danger-soft:rgba(196,43,28,.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

/* Background is set on <html> as well as <body> so the iOS overscroll bounce
   does not expose a light strip in dark mode. color-scheme themes native
   scrollbars, form controls and the caret to match. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg);color-scheme:light}
html.dark{color-scheme:dark}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:var(--font-sans);font-size:1rem;line-height:1.62;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--text-strong);margin:0;line-height:1.16;font-weight:700;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g-300);border-radius:4px}
html.dark ::-webkit-scrollbar-thumb{background:var(--g-700)}

/* ==========================================================================
   3. Helpers
   ========================================================================== */

.lw-container{max-width:var(--container);margin-inline:auto;padding-inline:1rem}
@media (min-width:640px){.lw-container{padding-inline:1.5rem}}
@media (min-width:1024px){.lw-container{padding-inline:2rem}}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}
.lw-skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:.75rem 1.25rem;font-weight:700;border-radius:0 0 var(--radius-sm) 0
}
.lw-skip-link:focus{left:0}

.lw-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lw-clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.lw-icon{width:1em;height:1em;fill:currentColor;flex:none}

/* Every number on the site. */
.lw-num,.lw-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Layer-line rule — used instead of a plain <hr> between blocks. */
.lw-rule{height:10px;background:var(--layers);opacity:.9;margin-block:1.5rem}

.lw-label{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)
}

/* ==========================================================================
   4. Announcement bar
   ========================================================================== */

.lw-announce{background:var(--g-900);color:var(--g-200);font-size:.75rem;text-align:center;padding:.5rem 1rem}
html.dark .lw-announce{background:#000}
.lw-announce a{color:var(--o-400);font-weight:700}
.lw-announce a:hover{text-decoration:underline}

/* ==========================================================================
   5. Header
   ========================================================================== */

.lw-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg-surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)
}
html.dark .lw-header{background:var(--g-900)}
.lw-header__bar{display:flex;align-items:center;justify-content:space-between;height:4.5rem;gap:1rem}

/* Logo: wordmark + a layer-stack mark. The descriptor line under it is a
   hard requirement, not decoration — "walker" alone reads as a mobility aid,
   which is a different niche entirely. */
.lw-brand{display:flex;align-items:center;gap:.625rem;min-width:0}
.lw-brandmark{
  width:1.75rem;height:1.75rem;flex:none;border-radius:3px;
  background:linear-gradient(to bottom,var(--o-500) 0 2px,transparent 2px 4px) 0 0/100% 4px repeat;
  box-shadow:inset 0 0 0 1px var(--border)
}
html.dark .lw-brandmark{box-shadow:inset 0 0 0 1px var(--g-700)}
.lw-brandtext{min-width:0}
.lw-logo{
  display:block;font-family:var(--font-head);font-size:1.375rem;font-weight:700;
  letter-spacing:-.03em;color:var(--text-strong);white-space:nowrap;line-height:1.1
}
.lw-logo span{color:var(--o-500)}
html.dark .lw-logo span{color:var(--o-400)}
.lw-logo img{max-height:2.5rem;width:auto}
.lw-descriptor{
  display:none;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;margin-top:.125rem
}
@media (min-width:480px){.lw-descriptor{display:block}}

.lw-nav{display:none;gap:1.75rem}
@media (min-width:900px){.lw-nav{display:flex}}
.lw-nav ul{display:flex;gap:1.75rem;list-style:none}
.lw-nav a{
  font-size:.9375rem;font-weight:500;color:var(--text);padding-block:.25rem;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s
}
.lw-nav a:hover{color:var(--accent)}
.lw-nav .current-menu-item>a,.lw-nav .current_page_item>a,.lw-nav .current-menu-ancestor>a{
  color:var(--accent);font-weight:600;border-bottom-color:var(--o-500)
}

.lw-header__actions{display:flex;align-items:center;gap:.75rem}
.lw-iconbtn{
  background:none;border:0;padding:.25rem;cursor:pointer;color:var(--text-muted);
  font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;transition:color .2s
}
.lw-iconbtn:hover{color:var(--accent)}
.lw-iconbtn--menu{font-size:1.5rem}
@media (min-width:900px){.lw-iconbtn--menu{display:none}}
.lw-iconbtn--search{display:none}
@media (min-width:640px){.lw-iconbtn--search{display:inline-flex}}

.lw-searchbar{display:none;border-top:1px solid var(--border);background:var(--bg-surface);padding:1rem 0}
.lw-searchbar.is-open{display:block}
.lw-searchform{display:flex;gap:.5rem}
.lw-searchform input[type=search]{
  flex:1;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:.625rem .875rem;font-size:.9375rem
}
.lw-searchform button{
  background:var(--g-900);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:.625rem 1.25rem;font-weight:700;cursor:pointer;transition:background .2s
}
.lw-searchform button:hover{background:var(--o-600)}
html.dark .lw-searchform button{background:var(--o-600)}
html.dark .lw-searchform button:hover{background:var(--o-500)}

.lw-mobilemenu{display:none;border-top:1px solid var(--border);background:var(--bg-surface);box-shadow:var(--shadow-lg)}
.lw-mobilemenu.is-open{display:block}
@media (min-width:900px){.lw-mobilemenu,.lw-mobilemenu.is-open{display:none}}
.lw-mobilemenu ul{list-style:none;padding:.5rem;display:flex;flex-direction:column;gap:.25rem}
.lw-mobilemenu a{display:block;padding:.625rem .75rem;border-radius:var(--radius-sm);font-weight:500;transition:background .2s,color .2s}
.lw-mobilemenu a:hover{color:var(--accent)}
.lw-mobilemenu .current-menu-item>a,.lw-mobilemenu .current_page_item>a{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* ==========================================================================
   6. Diagnostic console (homepage hero)

   Not a banner. Someone arrives here mid-failure with a ruined print on the
   bed — the first thing on the page has to be the symptom picker.
   ========================================================================== */

.lw-console{
  background:var(--g-950);color:var(--g-300);border-radius:var(--radius);
  border:1px solid var(--g-800);overflow:hidden;position:relative
}
.lw-console::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--o-500),var(--o-500) 30%,var(--c-500) 30%,var(--c-500) 45%,transparent 45%)
}
.lw-console__head{padding:1.75rem 1.5rem 1.25rem}
@media (min-width:768px){.lw-console__head{padding:2.25rem 2rem 1.5rem}}
.lw-console__eyebrow{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--o-400);margin-bottom:.625rem
}
.lw-console h1{
  color:#fff;font-size:1.625rem;line-height:1.1;margin-bottom:.5rem;text-wrap:balance
}
@media (min-width:768px){.lw-console h1{font-size:2.125rem}}
.lw-console__sub{color:var(--g-400);font-size:.9375rem;max-width:52ch}

.lw-console__filter{padding:0 1.5rem 1.25rem}
@media (min-width:768px){.lw-console__filter{padding:0 2rem 1.5rem}}
.lw-filter{position:relative;max-width:34rem}
.lw-filter input{
  width:100%;background:var(--g-900);border:1px solid var(--g-800);color:#fff;
  border-radius:var(--radius-sm);padding:.75rem 2.5rem .75rem .875rem;font-size:.9375rem
}
.lw-filter input::placeholder{color:var(--g-500)}
.lw-filter input:focus{outline:2px solid var(--o-500);outline-offset:0;border-color:transparent}
.lw-filter .lw-icon{
  position:absolute;right:.875rem;top:50%;transform:translateY(-50%);
  color:var(--g-500);font-size:1rem;pointer-events:none
}
.lw-filter__count{font-family:var(--font-mono);font-size:.75rem;color:var(--g-500);margin-top:.5rem}

/* Symptom chips. Real links, rendered server-side, so they are crawlable —
   the JS only hides and shows them. */
.lw-symptoms{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--g-800);
  border-top:1px solid var(--g-800)
}
@media (min-width:560px){.lw-symptoms{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.lw-symptoms{grid-template-columns:repeat(3,1fr)}}
.lw-symptom{
  display:flex;align-items:flex-start;gap:.625rem;background:var(--g-950);
  padding:.875rem 1rem;transition:background .15s
}
.lw-symptom:hover{background:var(--g-900)}
.lw-symptom__dot{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--o-500);
  flex:none;margin-top:.5rem
}
.lw-symptom__name{color:var(--g-100);font-size:.9375rem;font-weight:500;line-height:1.35}
.lw-symptom:hover .lw-symptom__name{color:var(--o-400)}
.lw-symptom__note{display:block;font-size:.75rem;color:var(--g-500);margin-top:.125rem}
.lw-symptom[hidden]{display:none}
.lw-symptoms__empty{
  padding:1.5rem 1rem;text-align:center;color:var(--g-500);font-size:.875rem;
  grid-column:1/-1;background:var(--g-950)
}
.lw-console__foot{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;background:var(--g-900);border-top:1px solid var(--g-800);font-size:.8125rem
}
@media (min-width:768px){.lw-console__foot{padding:1rem 2rem}}
.lw-console__foot a{color:var(--c-400);font-weight:600}
.lw-console__foot a:hover{text-decoration:underline}

/* ==========================================================================
   7. Error-code lookup strip
   ========================================================================== */

.lw-codes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem
}
.lw-code{
  display:block;background:var(--bg-surface);border:1px solid var(--border);
  border-left:3px solid var(--c-500);border-radius:var(--radius-sm);
  padding:.625rem .75rem;transition:border-color .2s,box-shadow .2s
}
.lw-code:hover{box-shadow:var(--shadow-sm);border-left-color:var(--o-500)}
.lw-code__id{
  display:block;font-family:var(--font-mono);font-size:.8125rem;font-weight:600;
  color:var(--text-strong);letter-spacing:-.02em
}
.lw-code__what{display:block;font-size:.75rem;color:var(--text-muted);margin-top:.125rem}
.lw-code[hidden]{display:none}

/* ==========================================================================
   8. Intent-tier rail

   Six tiles, in funnel order. The number is information: it tells the reader
   (and the writer) where in the fix → part → buy path this section sits.
   ========================================================================== */

.lw-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media (min-width:768px){.lw-tiers{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.lw-tiers{grid-template-columns:repeat(6,1fr)}}
.lw-tier{
  display:flex;flex-direction:column;gap:.375rem;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.875rem .875rem 1rem;position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s
}
.lw-tier::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--tc,var(--o-500));
  opacity:.85;transition:height .2s
}
.lw-tier:hover{box-shadow:var(--shadow-md);border-color:var(--tc,var(--o-500))}
.lw-tier:hover::before{height:4px}
.lw-tier__n{font-family:var(--font-mono);font-size:.6875rem;font-weight:600;color:var(--tc,var(--o-500));letter-spacing:.08em}
.lw-tier__name{font-family:var(--font-head);font-size:.9375rem;font-weight:700;color:var(--text-strong);line-height:1.2}
.lw-tier__note{font-size:.75rem;color:var(--text-muted);line-height:1.4}
.lw-tier__count{margin-top:auto;padding-top:.375rem;font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted)}
.lw-tier--1{--tc:var(--o-500)}
.lw-tier--2{--tc:var(--c-500)}
.lw-tier--3{--tc:#7c5cd6}
.lw-tier--4{--tc:var(--ok)}
.lw-tier--5{--tc:var(--warn)}
.lw-tier--6{--tc:var(--g-500)}

/* ==========================================================================
   9. Ad slots

   Reserved from the first line of CSS, not retrofitted. Every slot has a
   min-height so an ad arriving late cannot shift the article under the
   reader's cursor. Empty slots collapse to nothing on the front end.
   ========================================================================== */

.lw-ad{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  margin-block:2rem;background:var(--bg-sunken);border:1px dashed var(--border);
  border-radius:var(--radius-sm);position:relative
}
.lw-ad::after{
  content:attr(data-slot);position:absolute;top:.25rem;left:.5rem;
  font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);opacity:.7
}
.lw-ad--leader{min-height:90px}
@media (min-width:768px){.lw-ad--leader{min-height:110px}}
.lw-ad--incontent{min-height:250px}
.lw-ad--rail{min-height:600px}
.lw-ad--footer{min-height:250px}
.lw-ad > *{max-width:100%}
/* A configured slot drops the placeholder chrome. */
.lw-ad.is-filled{background:none;border:0}
.lw-ad.is-filled::after{content:none}

/* ==========================================================================
   10. Layout: content + sidebar
   ========================================================================== */

.lw-layout{display:flex;flex-direction:column;gap:2rem}
@media (min-width:1024px){.lw-layout{flex-direction:row}}

/* Percentage widths that sum to 100% overflow once the gap is added, and
   flexbox then shrinks both columns to an even split. A fixed sidebar with a
   flexible content column keeps the intended proportion and a stable reading
   measure. min-width:0 lets the content column shrink below the intrinsic
   width of wide children (spec tables). */
.lw-content{width:100%;min-width:0;display:flex;flex-direction:column;gap:2.75rem}
.lw-sidebar{width:100%;min-width:0;display:flex;flex-direction:column;gap:1.5rem}
@media (min-width:1024px){
  .lw-content{flex:1 1 auto;width:auto}
  .lw-sidebar{flex:0 0 20rem;width:20rem}
}
@media (min-width:1280px){.lw-sidebar{flex-basis:22rem;width:22rem}}

.lw-sectionhead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-bottom:1.125rem;padding-bottom:.625rem;border-bottom:1px solid var(--border);position:relative
}
.lw-sectionhead::after{
  content:"";position:absolute;left:0;bottom:-1px;width:3rem;height:2px;background:var(--sc,var(--o-500))
}
.lw-sectionhead__t{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.lw-sectionhead h2{font-size:1.375rem}
.lw-sectionhead--sm h2{font-size:1.125rem}
.lw-sectionhead__more{font-size:.8125rem;font-weight:600;color:var(--accent);white-space:nowrap;padding-bottom:.125rem}
.lw-sectionhead__more:hover{text-decoration:underline}

/* ==========================================================================
   11. Cards

   Deliberately light on imagery. Stock renders of printers are the fastest
   way to lose a technical reader, so the default card leads with the symptom
   text and treats a photo as optional.
   ========================================================================== */

.lw-grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){.lw-grid-2{grid-template-columns:repeat(2,1fr)}}
.lw-stack{display:flex;flex-direction:column;gap:.75rem}
.lw-split{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:768px){.lw-split{grid-template-columns:repeat(2,1fr)}}

/* defect card — text first, layer-stripe accent instead of a photo */
.lw-defect{
  display:flex;flex-direction:column;gap:.5rem;position:relative;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem 1rem 1rem 1.25rem;transition:border-color .2s,box-shadow .2s
}
.lw-defect::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius) 0 0 var(--radius);
  background:repeating-linear-gradient(to bottom,var(--o-500) 0 3px,transparent 3px 6px);opacity:.7
}
.lw-defect:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.lw-defect:hover::before{opacity:1}
.lw-defect__title{font-size:1.0625rem;line-height:1.25}
.lw-defect:hover .lw-defect__title{color:var(--accent)}
.lw-defect__excerpt{font-size:.875rem;color:var(--text-muted);line-height:1.55}
.lw-defect__meta{
  display:flex;flex-wrap:wrap;gap:.5rem .875rem;margin-top:auto;padding-top:.25rem;
  font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted)
}

/* standard card with optional media */
.lw-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  transition:box-shadow .2s,border-color .2s
}
.lw-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.lw-card__media{display:block;position:relative;overflow:hidden;height:11rem;background:var(--bg-sunken)}
.lw-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lw-card:hover .lw-card__media img{transform:scale(1.04)}
.lw-card__body{padding:1rem 1.125rem 1.125rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.lw-card__title{font-size:1.0625rem;line-height:1.25;transition:color .2s}
.lw-card:hover .lw-card__title{color:var(--accent)}
.lw-card__excerpt{font-size:.875rem;color:var(--text-muted)}
.lw-card__meta{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted);margin-top:auto}

.lw-card--row{flex-direction:column}
@media (min-width:640px){
  .lw-card--row{flex-direction:row}
  .lw-card--row .lw-card__media{width:34%;height:auto;flex:none}
  .lw-card--row .lw-card__body{width:66%;justify-content:center}
}
.lw-card--row .lw-card__media{height:10rem}

/* When a post has no featured image the card must still hold its shape. */
.lw-ph{
  position:absolute;inset:0;background:
    repeating-linear-gradient(to bottom,var(--border-strong) 0 1px,transparent 1px 6px),
    linear-gradient(135deg,var(--bg-sunken),var(--bg-surface))
}
.lw-ph::after{
  content:"";position:absolute;left:50%;top:50%;width:2.25rem;height:2.25rem;
  transform:translate(-50%,-50%);border:1px solid var(--border-strong);border-radius:2px;
  background:repeating-linear-gradient(to bottom,var(--o-500) 0 2px,transparent 2px 5px);
  opacity:.4
}

.lw-readmore{display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:600;color:var(--accent)}
.lw-readmore:hover{text-decoration:underline}
.lw-readmore .lw-icon{font-size:.625rem}

/* compact list row — the densest unit, used for parts and slicer settings */
.lw-row{
  display:flex;align-items:baseline;gap:.75rem;padding:.625rem .25rem;
  border-bottom:1px solid var(--border)
}
.lw-row:last-child{border-bottom:0}
.lw-row__idx{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted);flex:none;min-width:1.5rem}
.lw-row__title{font-size:.9375rem;font-weight:500;line-height:1.35}
.lw-row:hover .lw-row__title{color:var(--accent)}
.lw-row__meta{margin-left:auto;font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted);white-space:nowrap;flex:none}

.lw-mini{display:flex;gap:.875rem;align-items:center}
.lw-mini__media{width:4.5rem;height:4.5rem;flex:none;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-sunken);position:relative}
.lw-mini__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.lw-mini:hover .lw-mini__media img{transform:scale(1.08)}
.lw-mini__title{font-family:var(--font-sans);font-size:.875rem;font-weight:600;line-height:1.3;margin-bottom:.125rem;transition:color .2s}
.lw-mini:hover .lw-mini__title{color:var(--accent)}
.lw-mini__meta{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted)}

/* single feature block, kept for material and slicer sections */
.lw-feature{display:grid;grid-template-columns:1fr;gap:.75rem}
@media (min-width:768px){.lw-feature{grid-template-columns:repeat(12,1fr)}}
.lw-feature__main{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--g-900);min-height:260px}
@media (min-width:768px){.lw-feature__main{grid-column:span 7}}
.lw-feature__side{display:flex;flex-direction:column;gap:.75rem}
@media (min-width:768px){.lw-feature__side{grid-column:span 5}}
.lw-feature__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .6s,transform .6s}
.lw-feature__main:hover img{opacity:.95;transform:scale(1.04)}
.lw-feature__scrim{position:absolute;inset:0;z-index:10;background:linear-gradient(to top,var(--g-950),rgba(15,13,12,.55) 55%,transparent)}
.lw-feature__body{position:absolute;inset-inline:0;bottom:0;z-index:20;padding:1.25rem}
.lw-feature__title{color:#fff;font-size:1.25rem;line-height:1.2;margin-bottom:.375rem}
.lw-feature__main:hover .lw-feature__title{color:var(--o-400)}
.lw-feature__excerpt{color:var(--g-300);font-size:.875rem;max-width:40ch}

.lw-eyebrow{
  display:inline-block;width:fit-content;font-family:var(--font-mono);
  background:var(--o-500);color:#fff;font-size:.625rem;text-transform:uppercase;
  font-weight:600;letter-spacing:.08em;padding:.1875rem .4375rem;border-radius:2px;margin-bottom:.5rem
}
.lw-eyebrow--cool{background:var(--c-600)}
.lw-eyebrow--quiet{background:rgba(255,255,255,.14);color:var(--g-200)}

/* ==========================================================================
   12. Sidebar widgets
   ========================================================================== */

.lw-widget{
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.25rem
}
.lw-widget__title{
  font-size:1rem;margin-bottom:.875rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);
  position:relative
}
.lw-widget__title::after{content:"";position:absolute;left:0;bottom:-1px;width:2rem;height:2px;background:var(--o-500)}
.lw-widget ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.lw-widget li a:hover{color:var(--accent)}
.lw-widget--sticky{position:sticky;top:5.5rem}

/* quick-reference temperature table — the most-used thing on the page */
.lw-quickref{width:100%;border-collapse:collapse;font-size:.8125rem}
.lw-quickref th,.lw-quickref td{padding:.4375rem .5rem;border-bottom:1px solid var(--border);text-align:left}
.lw-quickref thead th{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);font-weight:600
}
.lw-quickref tbody tr:last-child td{border-bottom:0}
.lw-quickref td:first-child{font-weight:600;color:var(--text-strong)}
.lw-quickref td+td{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text)}
.lw-quickref__note{font-size:.6875rem;color:var(--text-muted);margin-top:.625rem;line-height:1.5}

/* Ask the print doctor */
.lw-ask{background:var(--g-950);color:var(--g-300);border-color:var(--g-800);position:relative;overflow:hidden}
.lw-ask::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--o-500),var(--c-500))
}
.lw-ask__title{color:#fff;font-size:1rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem}
.lw-ask__title .lw-icon{color:var(--o-400)}
.lw-ask__hint{font-size:.75rem;color:var(--g-500);margin-bottom:.875rem}
.lw-ask textarea{
  width:100%;background:var(--g-900);border:1px solid var(--g-800);color:#fff;
  border-radius:var(--radius-sm);padding:.625rem .75rem;font-size:.875rem;resize:none
}
.lw-ask textarea::placeholder{color:var(--g-600)}
.lw-ask textarea:focus{outline:2px solid var(--o-500);outline-offset:0;border-color:transparent}
.lw-ask__submit{
  margin-top:.5rem;width:100%;background:var(--o-600);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:.5rem;font-weight:700;font-size:.875rem;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:.5rem;transition:background .2s
}
.lw-ask__submit:hover:not(:disabled){background:var(--o-500)}
.lw-ask__submit:disabled{opacity:.65;cursor:not-allowed}
.lw-ask__out{
  margin-top:.875rem;padding:.75rem;background:var(--g-900);border-left:2px solid var(--c-500);
  border-radius:var(--radius-sm);font-size:.875rem;color:var(--g-300);line-height:1.55
}
.lw-ask__out p+p{margin-top:.625rem}
.lw-ask__out[hidden]{display:none}
.lw-ask__disclaimer{margin-top:.75rem;font-size:.6875rem;color:var(--g-600);line-height:1.5}
.lw-spin{animation:lw-spin 1s linear infinite}
@keyframes lw-spin{to{transform:rotate(360deg)}}

/* Disclosure */
.lw-disclosure{
  background:var(--bg-sunken);border:1px solid var(--border);border-left:3px solid var(--warn);
  color:var(--text);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.875rem 1rem;font-size:.75rem;line-height:1.6
}
.lw-disclosure__head{
  display:flex;align-items:center;gap:.4375rem;margin-bottom:.3125rem;
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warn)
}
.lw-disclosure--inline{margin-bottom:1.5rem}

/* Newsletter */
.lw-newsletter{background:var(--accent-2-soft);border-color:var(--c-300)}
html.dark .lw-newsletter{border-color:rgba(20,174,192,.35)}
.lw-newsletter .lw-icon{font-size:1.5rem;color:var(--accent-2);margin-bottom:.5rem}
.lw-newsletter h3{font-size:1rem;margin-bottom:.375rem}
.lw-newsletter p{font-size:.75rem;color:var(--text-muted);margin-bottom:.875rem}
.lw-newsletter form{display:flex;flex-direction:column;gap:.5rem}
.lw-newsletter input{
  width:100%;background:var(--bg-surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.5rem .75rem;font-size:.875rem
}
.lw-newsletter button{
  width:100%;background:var(--c-600);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:.5rem;font-weight:700;font-size:.875rem;cursor:pointer;transition:background .2s
}
.lw-newsletter button:hover:not(:disabled){background:var(--c-500)}
.lw-newsletter button:disabled{opacity:.6;cursor:not-allowed}

.lw-toplist{display:flex;flex-direction:column;gap:.75rem}
.lw-toplist__item{display:flex;align-items:flex-start;gap:.75rem}
.lw-toplist__n{
  font-family:var(--font-mono);font-size:.75rem;font-weight:600;color:var(--o-500);
  flex:none;width:1.25rem;padding-top:.0625rem
}
.lw-toplist__title{font-size:.875rem;font-weight:500;line-height:1.35;color:var(--text-strong)}
.lw-toplist__item:hover .lw-toplist__title{color:var(--accent)}
.lw-toplist__meta{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted);margin-top:.125rem}

.lw-rating{display:flex;align-items:center;gap:.125rem;font-size:.75rem;color:var(--rating);margin-top:.25rem}
.lw-rating__label{color:var(--text-muted);margin-left:.375rem;font-size:.6875rem;font-family:var(--font-mono)}

/* ==========================================================================
   13. In-content components

   The buy button is deliberately dry. This audience reads "BEST CHOICE ⭐"
   as an advertisement and stops trusting the numbers next to it, so the CTA
   is a plain dark button and the persuasion lives in the spec tables.
   ========================================================================== */

.lw-btn-buy{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--g-900);color:#fff;font-weight:600;font-size:.875rem;
  padding:.625rem 1.125rem;border-radius:var(--radius-sm);
  border:1px solid var(--g-900);transition:background .2s,border-color .2s,color .2s
}
.lw-btn-buy:hover{background:var(--o-600);border-color:var(--o-600);color:#fff}
.lw-btn-buy .lw-icon{font-size:.75rem;opacity:.7}
html.dark .lw-btn-buy{background:var(--g-200);color:var(--g-950);border-color:var(--g-200)}
html.dark .lw-btn-buy:hover{background:var(--o-400);border-color:var(--o-400);color:var(--g-950)}
.lw-btn-buy--block{display:flex;width:100%}
.lw-btn-buy--sm{padding:.375rem .75rem;font-size:.75rem}

/* print settings block — the single most reused component on the site */
.lw-settings{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);
  margin-block:1.75rem;overflow:hidden
}
.lw-settings__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.75rem 1rem;background:var(--bg-sunken);border-bottom:1px solid var(--border)
}
.lw-settings__title{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted)
}
.lw-settings__for{font-family:var(--font-mono);font-size:.75rem;color:var(--text-strong);font-weight:600}
.lw-settings__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border)
}
@media (min-width:560px){.lw-settings__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.lw-settings__grid{grid-template-columns:repeat(4,1fr)}}
.lw-setting{background:var(--bg-surface);padding:.75rem 1rem}
.lw-setting__k{display:block;font-size:.6875rem;color:var(--text-muted);margin-bottom:.1875rem;line-height:1.3}
.lw-setting__v{
  display:block;font-family:var(--font-mono);font-size:1rem;font-weight:600;
  color:var(--text-strong);font-variant-numeric:tabular-nums;letter-spacing:-.02em
}
.lw-settings__note{padding:.625rem 1rem;font-size:.75rem;color:var(--text-muted);border-top:1px solid var(--border);line-height:1.55}

/* symptom → cause → fix */
.lw-fix{
  border:1px solid var(--border);border-left:3px solid var(--o-500);border-radius:0 var(--radius) var(--radius) 0;
  background:var(--bg-surface);margin-block:1.75rem;padding:1.125rem 1.25rem
}
.lw-fix__row+.lw-fix__row{margin-top:.875rem;padding-top:.875rem;border-top:1px solid var(--border)}
.lw-fix__k{
  font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:.25rem
}
.lw-fix__v{font-size:.9375rem;line-height:1.6}
.lw-fix__v strong{color:var(--text-strong)}
.lw-fix__steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:.5rem}
.lw-fix__steps li{counter-increment:s;position:relative;padding-left:1.75rem;font-size:.9375rem;line-height:1.55}
.lw-fix__steps li::before{
  content:counter(s);position:absolute;left:0;top:.0625rem;width:1.25rem;height:1.25rem;
  display:grid;place-items:center;border-radius:2px;background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600
}

/* safety callout — mandatory on teardown, mains power and resin content */
.lw-safety{
  border:1px solid var(--danger);border-left-width:3px;background:var(--danger-soft);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.875rem 1.125rem;margin-block:1.5rem
}
.lw-safety__head{
  display:flex;align-items:center;gap:.4375rem;margin-bottom:.3125rem;
  font-family:var(--font-mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--danger)
}
.lw-safety p{font-size:.875rem;line-height:1.6;color:var(--text)}

/* difficulty / time / cost strip */
.lw-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.25rem}
.lw-fact{
  display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .625rem;
  border:1px solid var(--border);border-radius:9999px;font-size:.75rem;background:var(--bg-surface)
}
.lw-fact b{font-family:var(--font-mono);font-weight:600;color:var(--text-strong)}
.lw-fact--easy{border-color:var(--ok);color:var(--ok)}
.lw-fact--moderate{border-color:var(--warn);color:var(--warn)}
.lw-fact--advanced{border-color:var(--hard);color:var(--hard)}

/* product block — dry spec layout, no award ribbon */
.lw-product{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);
  padding:1.125rem;margin-block:1.75rem;display:grid;grid-template-columns:1fr;gap:1.125rem
}
@media (min-width:640px){.lw-product{grid-template-columns:160px 1fr;align-items:start}}
.lw-product__media{border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-sunken)}
.lw-product__role{
  display:inline-block;font-family:var(--font-mono);font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2);
  border:1px solid var(--accent-2);padding:.125rem .4375rem;border-radius:2px;margin-bottom:.5rem
}
.lw-product__name{font-size:1.125rem;margin-bottom:.375rem}
.lw-product__cols{display:grid;grid-template-columns:1fr;gap:.875rem;margin-block:.875rem}
@media (min-width:640px){.lw-product__cols{grid-template-columns:repeat(2,1fr)}}
.lw-product__cols h4{
  font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:.3125rem;font-weight:600
}
.lw-pros h4{color:var(--ok)}
.lw-cons h4{color:var(--hard)}
.lw-product ul{list-style:none;display:flex;flex-direction:column;gap:.25rem;font-size:.875rem}
.lw-product li{padding-left:1.125rem;position:relative;line-height:1.5}
.lw-pros li::before{content:"+";position:absolute;left:0;color:var(--ok);font-weight:700;font-family:var(--font-mono)}
.lw-cons li::before{content:"−";position:absolute;left:0;color:var(--hard);font-weight:700;font-family:var(--font-mono)}

/* spec + comparison + fitment tables all share one shell */
.lw-table-wrap{overflow-x:auto;margin-block:1.75rem;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius)}
.lw-table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:32rem}
.lw-table caption{
  caption-side:top;text-align:left;padding:.625rem .875rem;background:var(--bg-sunken);
  border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.6875rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)
}
.lw-table th,.lw-table td{padding:.625rem .875rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
.lw-table thead th{
  background:var(--bg-sunken);font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);font-weight:600
}
.lw-table tbody tr:last-child td{border-bottom:0}
.lw-table tbody tr:hover{background:var(--bg-sunken)}
.lw-table td.is-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.lw-table td:first-child{font-weight:600;color:var(--text-strong)}

/* fitment verdicts. "Not verified" is its own state on purpose — telling a
   reader a part does not fit when we simply have not checked is worse than
   saying nothing. */
.lw-fit{
  display:inline-flex;align-items:center;gap:.3125rem;font-family:var(--font-mono);
  font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:.1875rem .5rem;border-radius:2px
}
.lw-fit--yes{background:var(--ok-soft);color:var(--ok)}
.lw-fit--no{background:var(--danger-soft);color:var(--danger)}
.lw-fit--mod{background:var(--warn-soft);color:var(--warn)}
.lw-fit--unknown{background:var(--bg-sunken);color:var(--text-muted)}

/* ==========================================================================
   14. Single post / page
   ========================================================================== */

.lw-breadcrumb{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted);margin-bottom:.875rem;letter-spacing:.02em}
.lw-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
.lw-breadcrumb a:hover{color:var(--accent);text-decoration:underline}
.lw-breadcrumb li+li::before{content:"/";margin-right:.375rem;color:var(--border-strong)}

.lw-article{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
@media (min-width:768px){.lw-article{padding:2.25rem}}
.lw-article__title{font-size:1.75rem;line-height:1.13;margin-bottom:.625rem}
@media (min-width:768px){.lw-article__title{font-size:2.25rem}}
.lw-article__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;font-family:var(--font-mono);
  font-size:.6875rem;color:var(--text-muted);margin-bottom:1.25rem;letter-spacing:.02em
}
.lw-article__meta strong{color:var(--text-strong);font-weight:600}
.lw-article__thumb{border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem}

/* Quick answer — the featured-snippet bait. First thing under the title. */
.lw-quick{
  background:var(--accent-soft);border:1px solid var(--o-300);border-radius:var(--radius);
  padding:1rem 1.125rem;margin-bottom:1.5rem
}
html.dark .lw-quick{border-color:rgba(242,96,26,.4)}
.lw-quick__k{
  font-family:var(--font-mono);font-size:.625rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.3125rem
}
.lw-quick p{font-size:1rem;line-height:1.6;color:var(--text-strong)}

.lw-prose{font-size:1.0625rem;line-height:1.72}
.lw-prose > * + *{margin-top:1.25rem}
.lw-prose h2{font-size:1.5rem;margin-top:2.25rem;scroll-margin-top:5.5rem}
.lw-prose h3{font-size:1.1875rem;margin-top:1.75rem;scroll-margin-top:5.5rem}
.lw-prose h4{font-size:1.0625rem;margin-top:1.5rem}
.lw-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.lw-prose a:hover{color:var(--accent-hover)}
.lw-prose ul,.lw-prose ol{padding-left:1.5rem;display:flex;flex-direction:column;gap:.4375rem}
.lw-prose ul{list-style:disc}
.lw-prose ol{list-style:decimal}
.lw-prose img{border-radius:var(--radius);margin-inline:auto}
.lw-prose figure{margin:1.75rem 0}
.lw-prose figcaption{font-size:.8125rem;color:var(--text-muted);text-align:center;margin-top:.5rem}
.lw-prose blockquote{
  border-left:3px solid var(--c-500);background:var(--bg-sunken);
  padding:.875rem 1.125rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0
}
.lw-prose code{font-family:var(--font-mono);background:var(--bg-sunken);padding:.125rem .375rem;border-radius:2px;font-size:.875em}
.lw-prose pre{font-family:var(--font-mono);background:var(--g-950);color:var(--g-200);padding:1rem;border-radius:var(--radius);overflow-x:auto;font-size:.875rem}
.lw-prose pre code{background:none;padding:0}
.lw-prose table{width:100%;border-collapse:collapse;font-size:.9375rem}
.lw-prose th,.lw-prose td{border:1px solid var(--border);padding:.5625rem}
.lw-prose th{background:var(--bg-sunken);font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}

.lw-toc{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius);padding:1.125rem;margin-block:1.75rem}
.lw-toc__title{
  font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:.625rem;color:var(--text-muted)
}
.lw-toc ol{list-style:decimal;padding-left:1.25rem;display:flex;flex-direction:column;gap:.3125rem;font-size:.9375rem}
.lw-toc a:hover{color:var(--accent);text-decoration:underline}

.lw-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.lw-tags a{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;background:var(--bg-sunken);
  border:1px solid var(--border);padding:.25rem .5625rem;border-radius:2px;color:var(--text-muted)
}
.lw-tags a:hover{color:var(--accent);border-color:var(--accent)}

.lw-authorbox{
  display:flex;gap:1rem;align-items:flex-start;margin-top:1.75rem;padding:1.125rem;
  background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius)
}
.lw-authorbox img{border-radius:9999px;flex:none}
.lw-authorbox h3{font-size:.9375rem;margin-bottom:.1875rem}
.lw-authorbox p{font-size:.875rem;color:var(--text-muted);line-height:1.55}

.lw-postnav{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:1.75rem}
@media (min-width:640px){.lw-postnav{grid-template-columns:repeat(2,1fr)}}
.lw-postnav a{
  display:block;padding:.875rem 1rem;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius);transition:border-color .2s
}
.lw-postnav a:hover{border-color:var(--accent)}
.lw-postnav span{
  display:block;font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-muted);margin-bottom:.1875rem
}
.lw-postnav strong{font-family:var(--font-head);font-size:.9375rem;color:var(--text-strong);line-height:1.3}
.lw-postnav .is-next{text-align:right}

.lw-related{margin-top:2.5rem}

/* ==========================================================================
   15. Archive / pagination / 404
   ========================================================================== */

.lw-pagehead{margin-bottom:1.75rem}
.lw-pagehead h1{font-size:1.875rem;margin-bottom:.375rem}
@media (min-width:768px){.lw-pagehead h1{font-size:2.25rem}}
.lw-pagehead p{color:var(--text-muted)}

.lw-pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.25rem}
.lw-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;
  padding-inline:.75rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-surface);font-family:var(--font-mono);font-weight:600;font-size:.8125rem;
  transition:border-color .2s,background .2s
}
.lw-pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.lw-pagination .page-numbers.current{background:var(--o-600);border-color:var(--o-600);color:#fff}
.lw-pagination .dots{border-color:transparent;background:none}

.lw-empty{text-align:center;padding:3.5rem 1rem}
.lw-empty h1{font-family:var(--font-mono);font-size:3rem;color:var(--o-500);margin-bottom:.5rem}
.lw-empty p{color:var(--text-muted);margin-bottom:1.25rem}

/* ==========================================================================
   16. Comments
   ========================================================================== */

.lw-comments{margin-top:2.5rem}
.lw-comments ol{list-style:none}
.lw-comments .children{list-style:none;padding-left:1.5rem;margin-top:1rem}
.lw-comments li{margin-bottom:1.125rem}
.lw-comments .comment-body{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.lw-comments .comment-meta{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-muted);margin-bottom:.5rem}
.lw-comments .comment-author img{border-radius:9999px;display:inline-block;vertical-align:middle;margin-right:.5rem}
.lw-comments input[type=text],.lw-comments input[type=email],.lw-comments input[type=url],.lw-comments textarea{
  width:100%;background:var(--bg-surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.625rem .75rem;font-size:.9375rem;margin-top:.25rem
}
.lw-comments .submit{
  background:var(--g-900);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:.625rem 1.25rem;font-weight:600;cursor:pointer
}
.lw-comments .submit:hover{background:var(--o-600)}
html.dark .lw-comments .submit{background:var(--o-600)}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.lw-footer{margin-top:auto;background:var(--g-950);color:var(--g-400);border-top:3px solid var(--g-900)}
.lw-footer::before{content:"";display:block;height:8px;background:repeating-linear-gradient(to bottom,rgba(242,96,26,.35) 0 1px,transparent 1px 4px)}
.lw-footer__grid{display:grid;grid-template-columns:1fr;gap:2rem;padding-block:2.5rem}
@media (min-width:768px){.lw-footer__grid{grid-template-columns:repeat(4,1fr)}}
.lw-footer__brand{grid-column:span 1}
@media (min-width:768px){.lw-footer__brand{grid-column:span 2}}
.lw-footer .lw-logo{color:#fff}
.lw-footer .lw-logo span{color:var(--o-400)}
.lw-footer .lw-descriptor{display:block;color:var(--g-600)}
.lw-footer__about{font-size:.875rem;color:var(--g-500);max-width:24rem;margin:.875rem 0 1.25rem;line-height:1.6}
.lw-social{display:flex;gap:.75rem}
.lw-social a{
  width:2rem;height:2rem;border-radius:var(--radius-sm);background:var(--g-900);
  display:flex;align-items:center;justify-content:center;font-size:.875rem;transition:background .2s,color .2s
}
.lw-social a:hover{background:var(--o-600);color:#fff}
.lw-footer h4{
  color:#fff;font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:.875rem;font-weight:600
}
.lw-footer ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.lw-footer a:hover{color:var(--o-400)}
.lw-footer__bottom{
  border-top:1px solid var(--g-900);padding-block:1.25rem;font-size:.75rem;color:var(--g-600);
  display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;line-height:1.6
}
@media (min-width:768px){
  .lw-footer__bottom{flex-direction:row;justify-content:space-between;text-align:left}
  .lw-footer__bottom p:last-child{text-align:right;max-width:42rem}
}

/* ==========================================================================
   18. WordPress core classes
   ========================================================================== */

.alignleft{float:left;margin:.5rem 1.5rem 1rem 0}
.alignright{float:right;margin:.5rem 0 1rem 1.5rem}
.aligncenter{display:block;margin-inline:auto}
.alignwide{max-width:min(100%,60rem)}
.alignfull{max-width:100%}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.8125rem;color:var(--text-muted);text-align:center;margin-top:.5rem}
.sticky .lw-card__title::before,.sticky .lw-defect__title::before{content:"★ ";color:var(--o-500)}
.bypostauthor{}
.gallery-caption{}