/* ==========================================================
   ByteCave — software page only.
   Loads on top of styles.css; everything shared lives there.
   ========================================================== */

/* ---------- page header (home control + crest + title) ---------- */

.pagehead{ margin-bottom:clamp(24px,4vw,42px) }

/* Title block and crest share the top row — no dead space above the heading.
   The crest doubles as a route home; the explicit "ByteCave Home" link
   lives in the rail. */
.pagehead-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,4vw,52px);
  margin-bottom:clamp(12px,2vw,20px);
}
.pagehead-txt{ flex:1 1 auto; min-width:0 }
.pagehead-txt h1{ margin-bottom:0 }

.pagehead-crest{
  flex:none;
  display:block; text-decoration:none; text-shadow:none;
  transition:transform .25s cubic-bezier(.22,.8,.3,1), filter .25s ease;
}
.pagehead-crest img{
  display:block; width:auto; height:clamp(80px,11vw,128px);
  aspect-ratio:16 / 9; object-fit:fill;
  filter:drop-shadow(0 5px 16px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(140,240,64,.22));
}
.pagehead-crest:hover,.pagehead-crest:focus-visible{
  transform:translateY(-3px);
  filter:drop-shadow(0 0 30px rgba(140,240,64,.4));
  outline:none;
}

/* 80ch rather than the usual ~62 so this one-sentence lede sits on a single
   line at desktop instead of orphaning "FREE." — it still wraps normally
   once the column narrows. */
.lede{
  margin:.65em 0 0; max-width:80ch;
  font-size:1.08rem; color:var(--text-dim);
}

/* ---------- source / download plates ----------
   Same language as the ByteLord portal's link plates, but shorter and
   without the hostname line — the label already says where it goes. */

.plate-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(290px,1fr));
  margin:clamp(16px,2.4vw,22px) 0 0;
}

.plate{
  position:relative; display:block; padding:1.6px;
  text-decoration:none; text-shadow:none;
  clip-path:polygon(var(--bev) 0, 100% 0, 100% calc(100% - var(--bev)), calc(100% - var(--bev)) 100%, 0 100%, 0 var(--bev));
  background:linear-gradient(135deg, rgba(140,240,64,.45), rgba(214,231,206,.20) 48%, rgba(140,240,64,.10));
  transition:transform .22s cubic-bezier(.22,.8,.3,1), background .22s ease, filter .22s ease;
}
.plate-in{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:13px;
  padding:11px 14px;
  clip-path:polygon(var(--bev) 0, 100% 0, 100% calc(100% - var(--bev)), calc(100% - var(--bev)) 100%, 0 100%, 0 var(--bev));
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(30,58,18,.55), transparent 62%),
    linear-gradient(158deg, rgba(11,22,12,.94), rgba(5,10,6,.97));
}
.plate-in::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(140,240,64,.16) 48%, rgba(214,231,206,.10) 54%, transparent 70%);
  transform:translateX(-115%);
  transition:transform .62s ease;
}
.plate:hover,.plate:focus-visible{
  transform:translateY(-3px);
  background:linear-gradient(135deg, var(--green), var(--stone) 52%, var(--green-dim));
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(140,240,64,.34));
  outline:none;
}
.plate:hover .plate-in::after,.plate:focus-visible .plate-in::after{ transform:translateX(115%) }
/* clip-path eats a normal outline, so the focus ring lives on the inner face */
.plate:focus-visible .plate-in{ box-shadow:inset 0 0 0 2px var(--stone) }
.plate:focus-visible .plate-name{ text-decoration:underline; text-decoration-color:var(--stone) }
.plate:active{ transform:translateY(-1px) }

.plate .glyph{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, rgba(140,240,64,.20), rgba(4,9,5,.95) 72%);
  border:1.5px solid rgba(140,240,64,.36);
  box-shadow:inset 0 0 14px rgba(140,240,64,.10), 0 0 0 3px rgba(140,240,64,.05);
  transition:border-color .22s ease, box-shadow .22s ease, transform .3s cubic-bezier(.22,.8,.3,1);
}
.plate .glyph img{
  width:24px; height:24px; object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.8));
  transition:transform .3s cubic-bezier(.22,.8,.3,1);
}
.plate:hover .glyph,.plate:focus-visible .glyph{
  border-color:var(--stone);
  box-shadow:inset 0 0 18px rgba(140,240,64,.18), 0 0 16px rgba(214,231,206,.26), 0 0 0 3px rgba(214,231,206,.08);
  transform:rotate(-4deg);
}
.plate:hover .glyph img,.plate:focus-visible .glyph img{ transform:scale(1.1) rotate(4deg) }

.plate-name{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-head); font-weight:600;
  font-size:.97rem; line-height:1.3; letter-spacing:.02em;
  color:#eaf6dc;
}
.plate .chev{
  flex:none; width:8px; height:8px; margin-right:2px;
  border-top:2px solid var(--stone); border-right:2px solid var(--stone);
  transform:rotate(45deg); opacity:.45;
  transition:opacity .22s ease, transform .22s ease;
}
.plate:hover .chev,.plate:focus-visible .chev{ opacity:1; transform:rotate(45deg) translate(3px,-3px) }

/* ---------- pull quote (the BIS "Note" paragraph) ---------- */

.note{
  position:relative;
  margin:clamp(18px,2.6vw,26px) 0;
  padding:20px 22px 20px 30px;
  border-left:3px solid var(--green);
  border-radius:0 3px 3px 0;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(40,74,24,.5), transparent 62%),
    linear-gradient(158deg, rgba(14,28,14,.85), rgba(6,12,7,.9));
  box-shadow:-6px 0 22px -10px rgba(140,240,64,.55);
  font-size:.99rem;
}
.note::before{                      /* oversized decorative quote mark */
  content:'\201C';
  position:absolute; left:12px; top:-6px;
  font-family:var(--font-display); font-weight:900;
  font-size:4.2rem; line-height:1;
  color:rgba(140,240,64,.18);
  pointer-events:none;
}
.note-label{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 8px;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--green);
}
.note-label::before{
  content:''; width:16px; height:1px; background:var(--green);
  box-shadow:0 0 8px rgba(140,240,64,.8);
}
.note p{ margin:0; position:relative }

/* ---------- screenshots ---------- */

.shots{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  margin:clamp(18px,2.6vw,24px) 0 0;
}
.shots.one{ grid-template-columns:1fr; max-width:640px }

.shot{ margin:0 }
.shot a{
  display:block; padding:1.6px;
  text-decoration:none; text-shadow:none;
  clip-path:polygon(var(--bev) 0, 100% 0, 100% calc(100% - var(--bev)), calc(100% - var(--bev)) 100%, 0 100%, 0 var(--bev));
  background:linear-gradient(140deg, rgba(140,240,64,.4), rgba(214,231,206,.16) 48%, rgba(140,240,64,.08));
  transition:transform .22s cubic-bezier(.22,.8,.3,1), background .22s ease, filter .22s ease;
}
.shot a:hover,.shot a:focus-visible{
  transform:translateY(-3px);
  background:linear-gradient(140deg, var(--green), var(--stone) 55%, var(--green-dim));
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(140,240,64,.3));
  outline:none;
}
.shot img{
  display:block; width:100%; height:auto;
  clip-path:polygon(var(--bev) 0, 100% 0, 100% calc(100% - var(--bev)), calc(100% - var(--bev)) 100%, 0 100%, 0 var(--bev));
}
.shot figcaption{
  margin-top:8px;
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.1em; color:var(--text-dim);
}

/* ---------- sub-heading inside a panel (e.g. "Older Version") ---------- */

.subsec{
  display:flex; align-items:center; gap:12px;
  margin:clamp(26px,3.6vw,36px) 0 clamp(10px,1.6vw,14px);
  font-family:var(--font-head); font-weight:700;
  font-size:1.02rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green);
}
.subsec::after{
  content:''; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, rgba(140,240,64,.5), transparent);
}

/* The Links and Contact rail is gone, so the copy uses the full shell. */
.layout{ grid-template-columns:1fr }
.shell{ width:min(1280px, 94vw) }

.home-btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:16px; padding:9px 14px;
  text-decoration:none; text-shadow:none; color:var(--text);
  font-family:var(--font-head); font-weight:600; font-size:.94rem; letter-spacing:.04em;
  background:linear-gradient(158deg, rgba(20,36,18,.7), rgba(8,15,9,.7));
  border:1px solid rgba(140,240,64,.20);
  border-radius:3px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}
.home-btn img{ flex:none; width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 0 5px rgba(0,0,0,.75)) }
.home-btn:hover,.home-btn:focus-visible{
  color:var(--green-hot);
  border-color:var(--green);
  background:linear-gradient(158deg, rgba(32,58,24,.85), rgba(12,22,12,.85));
  transform:translateX(3px);
  outline:none;
  animation:boxPulse 1.3s ease-in-out infinite;
}

/* ---------- footer spacing ----------
   This page ends on a screenshot rather than a sign-off line, so the shared
   footer gap trails off. Halve it: drop the last panel's own bottom margin
   and take the footer's margin down to match. Scoped here so the home page
   (which does have a sign-off) keeps its original rhythm. */

main > .panel:last-child{ margin-bottom:0 }
.foot{ margin-top:clamp(23px,3.4vw,40px) }

/* ---------- responsive ---------- */

@media (max-width:720px){
  /* not enough width for side-by-side: stack, brand first */
  .pagehead-top{ flex-direction:column; align-items:flex-start; gap:16px }
  .pagehead-crest{ order:-1 }
  .plate-grid,.shots{ grid-template-columns:1fr }
  .plate-in{ padding:10px 12px; gap:11px }
  .plate .glyph{ width:40px; height:40px }
  .plate .glyph img{ width:22px; height:22px }
  .note{ padding:18px 16px 18px 24px }
}

@media (prefers-reduced-motion:reduce){
  .plate:hover,.plate:focus-visible,
  .shot a:hover,.shot a:focus-visible,
  .pagehead-crest:hover,.pagehead-crest:focus-visible,
  .home-btn:hover,.home-btn:focus-visible{ transform:none }
  .plate-in::after{ display:none }
  .plate:hover .glyph,.plate:focus-visible .glyph{ transform:none }
  .plate:hover .glyph img,.plate:focus-visible .glyph img{ transform:none }
}

@media print{
  .plate,.shot a{ background:none }
  .plate-in{ background:none; border:1px solid #999 }
  .note{ background:none; border-left:3px solid #666 }
}