/* DIY index — card grid (scoped, mirrors the projects gallery approach) */
  .diy-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:18px;
    margin-top:6px;
  }
  .diy-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--bg-alt);
    border:1px solid var(--border);
    border-left:2px solid var(--border-glow);
    padding:18px;
    transition:border-color .15s steps(3), transform .15s steps(3);
  }
  .diy-card:hover{ border-left-color:var(--pink); transform:translateY(-2px); }
  .diy-card a.card-link{
    position:absolute; inset:0; z-index:2;
    text-indent:-9999px; overflow:hidden;
  }
  .diy-card .meta{
    font-family:var(--font-mono);
    font-size:.68rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
  }
  .diy-card .badge{
    border:1px solid rgba(255,91,200,0.35);
    color:var(--pink);
    padding:.15rem .45rem;
  }
  .diy-card .badge.mine{
    border-color:rgba(0,255,204,0.35);
    color:var(--accent);
  }
  .diy-card h3{
    margin:0 0 8px;
    font-family:var(--font-mono);
    font-size:1.05rem;
    line-height:1.25;
    color:var(--text);
  }
  .diy-card p{ margin:0 0 12px; font-size:14px; color:var(--ink-dim); }
  .diy-card .by{
    margin-top:auto;
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--ink-soft);
  }
  .diy-card .go{
    position:relative; z-index:3;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--accent);
    margin-top:12px;
  }

  /* Tutorial-article layout - scoped to this mirror page */
  .tut{ max-width:820px; }
  .tut .lede{ color:var(--ink-dim); font-size:16px; }
  .tut p{ margin:0 0 18px; }
  .tut figure{
    position:relative;
    width:fit-content;
    max-width:100%;
    margin:20px auto;
  }
  .tut figure img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:min(46vh,360px);
    filter:none;
    opacity:1;
    image-rendering:auto;
    background:#000;
    border:1px solid var(--border);
    border-left:2px solid var(--border-glow);
    cursor:zoom-in;
  }
  .tut figure img:hover{ border-left-color:var(--pink); }
  /* "click to enlarge" affordance in the image corner */
  .tut figure::after{
    content:"⤢ Click to enlarge";
    position:absolute; top:8px; right:8px;
    font-family:var(--font-mono);
    font-size:.6rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--accent);
    background:rgba(8,0,12,0.78);
    border:1px solid rgba(0,255,204,0.30);
    padding:.2rem .45rem;
    opacity:0;
    transition:opacity .15s steps(3);
    pointer-events:none;
  }
  .tut figure:hover::after{ opacity:1; }
  @media (hover:none){ .tut figure::after{ opacity:.9; } }

  /* Click-to-zoom lightbox */
  .lb-overlay{
    position:fixed; inset:0; z-index:2000;
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
    background:rgba(4,0,7,0.92);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    cursor:zoom-out;
    overflow:auto;
  }
  .lb-overlay.open{ display:flex; }
  .lb-overlay img{
    max-width:100%;
    max-height:100%;
    filter:none;
    border:1px solid var(--border-glow);
    box-shadow:0 0 40px rgba(0,0,0,0.6);
  }
  .lb-close{
    position:fixed; top:14px; right:18px;
    font-family:var(--font-mono);
    font-size:.8rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--accent);
    background:rgba(8,0,12,0.7);
    border:1px solid rgba(0,255,204,0.35);
    padding:.4rem .7rem;
    cursor:pointer;
  }
  .lb-hint{
    position:fixed; bottom:16px; left:0; right:0;
    text-align:center;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:1px;
    color:var(--ink-soft);
    pointer-events:none;
  }
  .tut figcaption{
    margin-top:8px;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.4px;
    color:var(--ink-soft);
  }
  .tut .bom{
    margin:0 0 18px;
    padding-left:22px;
    color:var(--ink-dim);
  }
  .tut .bom li{ margin:4px 0; }
  .tut .disclaimer{
    font-style:italic;
    color:var(--ink-soft);
    border-left:2px solid var(--pink);
    padding:2px 0 2px 14px;
  }

  /* Data tables inside a tutorial (e.g. resistance vs sample-rate charts).
     Scrolls horizontally on narrow screens instead of blowing out the layout. */
  .tut .tut-table{
    display:block;
    width:100%;
    overflow-x:auto;
    border-collapse:collapse;
    margin:0 0 8px;
    font-family:var(--font-mono);
    font-size:.82rem;
    color:var(--ink-dim);
  }
  .tut .tut-table thead th{
    text-align:left;
    color:var(--ink-soft);
    letter-spacing:.4px;
    border-bottom:1px solid var(--border-glow);
    padding:6px 18px 6px 0;
    white-space:nowrap;
  }
  .tut .tut-table td{
    border-bottom:1px solid var(--border);
    padding:6px 18px 6px 0;
    white-space:nowrap;
  }
  .tut .tut-table tbody tr:last-child td{ border-bottom:0; }
  .tut .figcaption-lead{
    margin:0 0 18px;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:.4px;
    color:var(--ink-soft);
  }

  /* Mirror pages: article + sticky attribution rail, side by side.
     Keeps the "not my work" notice on screen and eye-catching without
     sitting on top of the tutorial itself. */
  .tut-layout{
    display:flex;
    align-items:flex-start;
    gap:32px;
    max-width:1180px;
  }
  .tut-layout .tut{ flex:1 1 auto; min-width:0; }
  .mirror-rail{
    flex:0 0 300px;
    position:sticky;
    top:24px;
  }
  @media (max-width:900px){
    .tut-layout{ flex-direction:column; gap:0; }
    .mirror-rail{
      order:-1;              /* on narrow screens, show the notice first, still prominent */
      position:static;
      flex:0 0 auto;
      width:100%;
      margin-bottom:22px;
    }
  }

  /* Attribution callout */
  .mirror-note{
    border:1px solid rgba(0,255,204,0.30);
    border-left:2px solid var(--accent);
    background:rgba(0,255,204,0.05);
    padding:16px 18px;
    margin:0;
  }
  .mirror-note .tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--accent);
    background:rgba(0,255,204,0.08);
    border:1px solid rgba(0,255,204,0.30);
    padding:.25rem .55rem;
    margin-bottom:10px;
  }
  .mirror-note p{ margin:0 0 10px; font-size:15px; }
  .mirror-note p:last-child{ margin-bottom:0; }

  /* "More guides" tag-cloud nav - lives in the right rail. On mirrored guides it
     rests above the .mirror-note; on first-party guides it's the whole rail.
     Reusable across every DIY guide page. */
  .guides-nav{
    border:1px solid var(--border);
    border-left:2px solid var(--border-glow);
    background:var(--bg-alt);
    padding:14px 16px;
    margin:0 0 18px;
  }
  .guides-nav .rail-title{
    display:block;
    font-family:var(--font-mono);
    font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:12px;
  }
  .tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .tag-cloud a{
    display:inline-block;
    font-family:var(--font-mono);
    line-height:1.15;
    padding:4px 9px;
    border:1px solid var(--border);
    color:var(--ink-dim);
    text-decoration:none;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .tag-cloud a:hover,
  .tag-cloud a:focus-visible{ border-color:var(--accent); color:var(--accent); }
  .tag-cloud a[aria-current="page"]{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(0,255,204,0.08);
  }
  .tag-cloud a.t-lg{ font-size:.9rem; }
  .tag-cloud a.t-sm{ font-size:.72rem; color:var(--ink-soft); padding:3px 7px; }
  .tag-cloud a.t-sm:hover,
  .tag-cloud a.t-sm:focus-visible{ color:var(--accent); }

  .back-link{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:.76rem;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .colophon{
    margin-top:28px;
    padding-top:16px;
    border-top:1px solid var(--border);
    font-family:var(--font-mono);
    font-size:.8rem;
    color:var(--ink-soft);
  }


/* ===== DIY index page (moved from its inline <style>) ===== */
/* DIY index - three shelves (mine / mirrored / MFOS legacy) */
  #diy-mine, #diy-mirrors, #diy-mfos{ margin-top:38px; }
  #diy-mine h2, #diy-mirrors h2, #diy-mfos h2{ margin-bottom:6px; }
  .section-note{ color:var(--ink-dim); margin:0 0 18px; max-width:72ch; }
  .empty-note{
    border:1px dashed var(--border);
    border-left:2px solid var(--border-glow);
    background:var(--bg-alt);
    padding:20px 22px;
    color:var(--ink-soft);
    font-size:15px;
  }


/* ===== Card background photos =====
   Guides that have a real build photo get it as a card background, so a
   finished-and-documented build is visually distinct from one that's still
   text-only. The photo sits under a heavy scrim (matching --bg-alt) so body
   text keeps full contrast; it lifts slightly on hover. Purely decorative —
   the image carries no information that isn't already in the card text. */
/* The photo gets its own band across the top of the card rather than sitting
   behind the copy. Nothing overlaps the text, so the build shows at full
   brightness AND body text keeps its full contrast — a scrimmed background
   could only ever manage one or the other. Decorative: the card text already
   says what the build is, so the band carries no information of its own. */
.diy-card .card-photo{
  margin:-18px -18px 14px;            /* bleed past the card's 18px padding */
  height:130px;
  background-image:
    linear-gradient(to bottom, rgba(18,0,22,0) 72%, rgba(18,0,22,0.90) 100%),
    var(--card-bg, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--hairline);
}
/* The band is a wide crop of a square photo — it shows roughly the middle
   third — so nudge the focal point where the subject doesn't sit dead centre. */
.diy-card.bg-battery-pack .card-photo{ background-position:center 58%; }
.diy-card.bg-series-parallel .card-photo{ background-position:center 45%; }

/* Per-guide artwork. Filenames match each guide's title. */
.diy-card.bg-mosquito{        --card-bg:url("/assets/img/cards/dead-bug-mosquito.webp"); }
.diy-card.bg-hive{           --card-bg:url("/assets/img/cards/dead-bug-hive.webp"); }
.diy-card.bg-series-parallel{ --card-bg:url("/assets/img/cards/series-parallel.webp"); }
.diy-card.bg-battery-pack{    --card-bg:url("/assets/img/cards/battery-pack.webp"); }
.diy-card.bg-isd1820{      --card-bg:url("/assets/img/cards/isd1820-module.webp"); }