/* ===========================================================================
   Body Karate — "NEON DOJO"
   80s synthwave sunset, comic-book ink, crypto gold.

   THE SCENE IS DRAWN IN CSS, NOT IN THE ART.
   The sun, the horizon grid, the halftone and the scanlines are all generated
   here, so the site is complete with zero image files. Art from ART-PROMPTS.md
   layers on top through the --bk-* custom properties set by bk-chrome.php.
   Deleting every PNG must never break the layout — only make it plainer.

   Palette is inherited from the portfolio table on purpose (gold / cyan /
   magenta / laser green), so the data page and the chrome read as one site.
   =========================================================================== */

:root{
  color-scheme: dark;

  --ink:      #07030a;
  --ink-2:    #150a1c;
  --ink-3:    #1e0f28;
  --wine:     #2a0010;
  --paper:    #e9e3f2;
  --mute:     #9d8fb0;

  --gold:     #ffd700;
  --cyan:     #00e5ff;
  --mag:      #ff44cc;
  --green:    #39ff14;
  --red:      #ff4d4d;
  --orange:   #ffb000;

  --flame:    linear-gradient(180deg,#fff6c2 0%,#ffd700 32%,#ff8a00 66%,#ff2d00 100%);

  --ink-line: 3px solid #000;
  --pop:      6px 6px 0 #000;             /* comic hard shadow */
  --pop-sm:   4px 4px 0 #000;

  --nav-h:    64px;
  --pad:      clamp(14px, 3.2vw, 34px);

  --display:  "Arial Black", "Arial Bold", Impact, Haettenschweiler, sans-serif;
  --mono:     "Courier New", ui-monospace, monospace;
}

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

html,body{ height:100%; }

body.bk-body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--display);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* --- the scene -----------------------------------------------------------
   Fixed behind everything, never scrolls, never intercepts a click. */
.bk-scene{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* Base wash: a bruise-purple horizon fading to black overhead. */
.bk-scene::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 50% 108%, rgba(255,68,204,.42) 0%, rgba(120,20,90,.20) 38%, transparent 68%),
    radial-gradient(90% 60% at 50% 100%, rgba(255,176,0,.22) 0%, transparent 60%),
    linear-gradient(180deg,#05020a 0%, #0d0518 42%, #1b0a24 74%, #2a0d2e 100%);
}

/* The sun. Sliced by a repeating gradient, the way every synthwave poster is. */
.bk-sun{
  position:absolute; left:50%; bottom:20vh; translate:-50% 0;
  width:min(62vw,560px); aspect-ratio:1; border-radius:50%;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 62%,
      rgba(7,3,10,.92) 62% 64%,
      transparent 64% 70%,
      rgba(7,3,10,.92) 70% 73%,
      transparent 73% 78%,
      rgba(7,3,10,.92) 78% 82%,
      transparent 82% 86%,
      rgba(7,3,10,.94) 86% 91%,
      transparent 91% 94%,
      rgba(7,3,10,.96) 94% 100%),
    linear-gradient(180deg,#fff2a8 0%,var(--gold) 26%,#ff7a00 58%,var(--mag) 100%);
  filter:blur(.4px) saturate(1.15);
  opacity:.62;
}
.bk-sun::after{                       /* atmospheric bloom around it */
  content:''; position:absolute; inset:-32%;
  background:radial-gradient(circle,rgba(255,140,0,.30),transparent 62%);
}

/* Horizon grid. Perspective floor, drifting toward the viewer. */
.bk-grid{
  position:absolute; left:-50%; right:-50%; bottom:-2vh; height:52vh;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,229,255,.55) 0 2px, transparent 2px 84px),
    repeating-linear-gradient(0deg,  rgba(255,68,204,.50) 0 2px, transparent 2px 68px);
  transform:perspective(320px) rotateX(72deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 100%);
  opacity:.5;
  animation:bk-drift 6s linear infinite;
}
@keyframes bk-drift{ to{ background-position:0 68px, 0 68px; } }

/* Optional AI backdrop. Screened over the scene so it glows instead of muddying. */
.bk-art{
  position:absolute; inset:0;
  background-image:var(--bk-bg-desktop,none);
  background-size:cover; background-position:center;
  mix-blend-mode:screen; opacity:.34;
}
body:not(.has-art) .bk-art{ display:none; }

/* Comic halftone. The image tile if one exists, otherwise real dots. */
.bk-halftone{
  position:absolute; inset:0;
  background-image:var(--bk-tile, radial-gradient(rgba(255,255,255,.5) .8px, transparent .9px));
  background-size:auto, 5px 5px;
  opacity:.055;
}
/* CRT scanlines — barely there, but they sell the era. */
.bk-scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px);
  opacity:.30;
}

/* --- nav ----------------------------------------------------------------- */
.bk-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  min-height:var(--nav-h);
  padding:8px var(--pad);
  background:linear-gradient(180deg, rgba(7,3,10,.94), rgba(7,3,10,.74));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -12px #000;
}
.bk-nav::after{                       /* flame rule under the bar */
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--mag),var(--gold) 32%,var(--orange) 56%,var(--cyan));
  box-shadow:0 0 14px rgba(255,140,0,.6);
}

.bk-brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.bk-brand img{ height:clamp(30px,4.4vw,44px); width:auto; display:block;
               filter:drop-shadow(0 3px 0 #000); }
.bk-brand-txt{ font-size:clamp(17px,2.6vw,24px); letter-spacing:.04em; line-height:1;
               display:flex; gap:.32em; align-items:baseline; }
.bk-brand-txt b{
  background:var(--flame); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.85);
  filter:drop-shadow(0 0 10px rgba(255,120,0,.55));
}
.bk-brand-txt i{ font-style:italic; color:var(--gold); -webkit-text-stroke:1px #000;
                 text-shadow:2px 2px 0 #000; }

.bk-links{ margin-left:auto; display:flex; gap:clamp(6px,1.4vw,12px); }
.bk-tab{
  display:flex; align-items:center; gap:.5em;
  padding:9px clamp(11px,1.8vw,20px);
  font-size:clamp(11px,1.5vw,14px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); text-decoration:none; white-space:nowrap;
  background:rgba(20,8,28,.72);
  border:2px solid rgba(255,255,255,.14);
  transform:skewX(-9deg);
  transition:transform .14s, color .14s, border-color .14s, box-shadow .14s, background .14s;
}
.bk-tab > *{ transform:skewX(9deg); }   /* un-skew the label */
.bk-tab .g{ font-size:1.15em; line-height:1; filter:saturate(0) brightness(1.7); }
.bk-tab:hover{ color:var(--cyan); border-color:var(--cyan); background:rgba(0,229,255,.10);
               box-shadow:0 0 18px -3px var(--cyan); transform:skewX(-9deg) translateY(-2px); }
.bk-tab.on{
  color:#120018; border-color:#000; background:var(--flame);
  box-shadow:var(--pop-sm), 0 0 22px -4px var(--orange);
}
.bk-tab.on .g{ filter:none; }

/* --- main / footer -------------------------------------------------------- */
.bk-main{
  position:relative; z-index:1; flex:1 1 auto;
  width:100%; max-width:1560px; margin:0 auto;
  padding:clamp(16px,3vw,34px) var(--pad);
}
.bk-foot{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7em;
  padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:#6b5c7d;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
}
.bk-foot-mark{ color:var(--gold); }
.bk-foot-sep{ color:var(--mag); }
/* Admin door. Deliberately quiet — present for the owner, uninteresting to
   everyone else. It is not what keeps strangers out; the password is. */
.bk-foot .bk-adminlink{
  color:#3d3350; text-decoration:none; font-size:14px; line-height:1;
  transition:color .15s, transform .3s;
}
.bk-foot .bk-adminlink:hover{ color:var(--gold); transform:rotate(90deg); }

/* --- reusable comic parts ------------------------------------------------- */
.bk-panel{
  position:relative;
  background:linear-gradient(180deg, rgba(21,10,28,.90), rgba(10,4,16,.94));
  border:var(--ink-line);
  outline:1px solid rgba(255,215,0,.30); outline-offset:-6px;
  box-shadow:var(--pop), 0 0 40px -18px var(--mag);
  padding:clamp(14px,2.4vw,26px);
}
.bk-title{
  margin:0 0 .5em;
  font-size:clamp(19px,3vw,30px); letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold); -webkit-text-stroke:1px #000; text-shadow:3px 3px 0 #000;
}
.bk-eyebrow{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(10px,1.4vw,13px); letter-spacing:.42em; text-transform:uppercase;
  color:var(--cyan); text-shadow:0 0 12px rgba(0,229,255,.65);
}
.bk-btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:12px clamp(16px,2.4vw,26px);
  font-family:var(--display); font-size:clamp(12px,1.6vw,15px);
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:#160018; background:var(--flame);
  border:var(--ink-line); box-shadow:var(--pop-sm);
  transform:skewX(-9deg); cursor:pointer;
  transition:transform .14s, box-shadow .14s, filter .14s;
}
.bk-btn > *{ transform:skewX(9deg); }
.bk-btn:hover{ transform:skewX(-9deg) translate(-2px,-2px); box-shadow:7px 7px 0 #000; filter:brightness(1.08); }
.bk-btn:active{ transform:skewX(-9deg) translate(2px,2px); box-shadow:2px 2px 0 #000; }
.bk-btn.ghost{ color:var(--cyan); background:rgba(0,229,255,.07); border-color:var(--cyan); }
.bk-btn.ghost:hover{ background:rgba(0,229,255,.16); }
.bk-btn.danger{ color:#fff; background:linear-gradient(180deg,#ff6b6b,#a30000); }
.bk-btn.small{ padding:7px 13px; font-size:11px; box-shadow:2px 2px 0 #000; }

/* Live value plate — monospace so it reads as instrumentation, not marketing. */
.bk-value{
  display:inline-flex; flex-direction:column; gap:3px;
  padding:10px 20px;
  font-family:var(--mono); font-weight:700;
  background:rgba(0,0,0,.55); border:2px solid rgba(57,255,20,.45);
  box-shadow:0 0 30px -8px var(--green), inset 0 0 30px -18px var(--green);
}
.bk-value .k{ font-size:10px; letter-spacing:.32em; color:var(--mute); text-transform:uppercase; }
.bk-value .v{ font-size:clamp(24px,4.4vw,40px); color:var(--green); line-height:1;
              text-shadow:0 0 20px rgba(57,255,20,.55); }
.bk-value .s{ font-size:10px; letter-spacing:.16em; color:#6b5c7d; text-transform:uppercase; }

.bk-note{ font-family:var(--mono); font-size:13px; font-weight:700; line-height:1.55; color:var(--mute); }
.bk-note a{ color:var(--cyan); }
.bk-note code, .bk-field code{
  padding:1px 5px; font-family:var(--mono); font-size:.94em;
  color:var(--gold); background:rgba(255,215,0,.10); border:1px solid rgba(255,215,0,.28);
}

/* ===========================================================================
   HOME
   Built to sit inside one screen. Everything scales with clamp() rather than
   wrapping, and .fit pins the shell to the viewport on pointer devices.
   Mobile deliberately opts out — cramming a phone screen is worse than a scroll.
   =========================================================================== */
/* The min-height guard matters: on a short laptop window, pinning the shell to
   100dvh would cut the tiles off rather than shrink them. Below that height the
   page simply behaves normally. overflow:auto (not hidden) on .bk-main is the
   second belt — if the content still will not fit, it scrolls inside the frame
   instead of being clipped. */
@media (min-width:961px) and (min-height:660px){
  body.fit{ height:100dvh; overflow:hidden; }
  body.fit .bk-main{ display:grid; align-content:center; overflow:auto; }
}

.bk-hero{
  display:grid; gap:clamp(18px,3vw,44px); align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
.bk-hero:not(.has-mascot){ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
.bk-hero:not(.has-mascot) .bk-hero-cta{ justify-content:center; }
.bk-hero:not(.has-mascot) .bk-tiles{ max-width:900px; }

.bk-hero-copy{ display:flex; flex-direction:column; gap:clamp(10px,1.6vw,18px); min-width:0; }

/* The wordmark. Two lines, hard comic ink, flame fill on the first word. */
.bk-wordmark{
  margin:0; line-height:.88; letter-spacing:.01em; text-transform:uppercase;
  font-size:clamp(46px,9vw,116px);
}
.bk-wordmark span{ display:block; }
.bk-wordmark .a{
  background:var(--flame); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:2px #000;
  filter:drop-shadow(4px 4px 0 #000) drop-shadow(0 0 26px rgba(255,120,0,.5));
}
.bk-wordmark .b{
  color:var(--gold); font-style:italic;
  -webkit-text-stroke:2px #000; text-shadow:5px 5px 0 #000, 0 0 30px rgba(255,215,0,.35);
  margin-left:.06em;
}
.bk-tagline{
  margin:0; font-family:var(--mono); font-weight:700;
  font-size:clamp(13px,1.7vw,17px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper);
}
.bk-tagline b{ color:var(--mag); }

.bk-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* Mascot column. Stands on a neon disc so it never floats in the void. */
.bk-mascot{ position:relative; display:grid; place-items:end center; min-width:0; }
.bk-mascot img{
  position:relative; z-index:1;
  width:100%; max-width:min(46vw,560px);
  max-height:min(72dvh,760px); object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.75)) drop-shadow(0 0 46px rgba(255,68,204,.30));
  animation:bk-hover 5.5s ease-in-out infinite;
}
@keyframes bk-hover{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.bk-mascot::after{
  content:''; position:absolute; bottom:2%; left:50%; translate:-50% 0;
  width:74%; height:52px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,229,255,.55), transparent 72%);
  filter:blur(7px);
}

/* Nav tiles. The site's three doors, as comic panels. */
.bk-tiles{ display:grid; gap:clamp(10px,1.6vw,18px); grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
.bk-tile{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:clamp(12px,1.8vw,20px);
  text-decoration:none; color:var(--paper); overflow:hidden;
  background:linear-gradient(120deg, rgba(24,10,34,.92), rgba(9,4,14,.92));
  border:var(--ink-line); box-shadow:var(--pop-sm);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.bk-tile:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 #000; }
.bk-tile .ic{
  flex:0 0 auto; width:clamp(48px,6vw,72px); height:clamp(48px,6vw,72px);
  display:grid; place-items:center; font-size:clamp(24px,3.4vw,36px);
  background:rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.16);
}
.bk-tile .ic img{ width:100%; height:100%; object-fit:cover; }
.bk-tile .tx{ min-width:0; }
.bk-tile h3{ margin:0 0 3px; font-size:clamp(15px,2vw,21px); letter-spacing:.08em; text-transform:uppercase; }
.bk-tile p{ margin:0; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--mute); line-height:1.45; }
.bk-tile .go{ margin-left:auto; font-size:22px; color:var(--gold); transition:transform .16s; }
.bk-tile:hover .go{ transform:translateX(5px); }
.bk-tile.t-portfolio:hover{ border-color:var(--green); }
.bk-tile.t-portfolio h3{ color:var(--green); }
.bk-tile.t-links:hover{ border-color:var(--cyan); }
.bk-tile.t-links h3{ color:var(--cyan); }
/* Coloured wash bleeding in from the right edge of each tile. */
.bk-tile::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(80% 120% at 108% 50%, var(--tint,rgba(255,215,0,.25)), transparent 62%);
}
.bk-tile.t-portfolio{ --tint:rgba(57,255,20,.22); }
.bk-tile.t-links{ --tint:rgba(0,229,255,.22); }

/* ===========================================================================
   PAGE HEADERS (portfolio / links / admin)
   =========================================================================== */
.bk-pagehead{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(10px,2vw,24px);
  margin-bottom:clamp(14px,2.4vw,26px);
}
.bk-pagehead .h{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bk-pagehead h1{
  margin:0; font-size:clamp(28px,5.2vw,58px); line-height:.92;
  letter-spacing:.02em; text-transform:uppercase; color:var(--gold);
  -webkit-text-stroke:2px #000; text-shadow:4px 4px 0 #000;
}
.bk-pagehead .aside{ margin-left:auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ===========================================================================
   LINKS
   =========================================================================== */
.bk-linkgrid{
  display:grid; gap:clamp(12px,1.8vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.bk-link{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:14px; text-decoration:none; color:var(--paper);
  background:linear-gradient(180deg, rgba(24,10,34,.90), rgba(9,4,14,.94));
  border:var(--ink-line); box-shadow:var(--pop-sm);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.bk-link:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 #000; border-color:var(--cyan); }
.bk-link .shot{
  aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(255,68,204,.20), rgba(0,0,0,.55) 70%);
  border:1px solid rgba(255,255,255,.14);
}
.bk-link .shot img{ width:100%; height:100%; object-fit:contain; }
/* No image? Draw a monogram from the link's initials — never an empty box. */
.bk-link .mono{
  font-size:38px; letter-spacing:.06em; color:var(--gold);
  -webkit-text-stroke:1px #000; text-shadow:3px 3px 0 #000;
}
.bk-link h3{ margin:0; font-size:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.bk-link p{ margin:0; font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--mute); line-height:1.5; }
.bk-link .host{
  margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--cyan); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bk-empty{
  padding:clamp(30px,7vw,70px) 20px; text-align:center;
  font-family:var(--mono); font-weight:700; color:var(--mute);
  border:2px dashed rgba(255,255,255,.16);
}

/* ===========================================================================
   ADMIN
   Plain, dense and obvious. It is a control room, not a shop window.
   =========================================================================== */
.bk-admin{ display:grid; gap:clamp(14px,2.2vw,24px); }
.bk-login{ max-width:430px; margin:clamp(20px,8vh,90px) auto; }
.bk-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; min-width:0; }
.bk-field label{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
}
.bk-field input[type=text],
.bk-field input[type=url],
.bk-field input[type=password],
.bk-field input[type=file],
.bk-field textarea{
  width:100%; padding:10px 12px;
  font-family:var(--mono); font-size:14px; font-weight:700;
  color:var(--paper); background:rgba(0,0,0,.55);
  border:2px solid rgba(255,255,255,.18); border-radius:0;
}
.bk-field textarea{ resize:vertical; min-height:64px; }
.bk-field input:focus, .bk-field textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.16);
}
.bk-field .hint{ font-family:var(--mono); font-size:11px; font-weight:700; color:#6b5c7d; }

.bk-flash{
  padding:11px 14px; margin-bottom:14px;
  font-family:var(--mono); font-size:13px; font-weight:700;
  border:2px solid; background:rgba(0,0,0,.5);
}
.bk-flash.ok{  color:var(--green); border-color:rgba(57,255,20,.5); }
.bk-flash.err{ color:var(--red);   border-color:rgba(255,77,77,.5); }

.bk-rows{ display:flex; flex-direction:column; gap:10px; }
.bk-row{
  display:grid; gap:12px; align-items:center;
  grid-template-columns:60px minmax(0,1fr) auto;
  padding:10px; background:rgba(0,0,0,.42); border:2px solid rgba(255,255,255,.13);
}
.bk-row .thumb{
  width:60px; height:44px; display:grid; place-items:center; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  font-size:17px; color:var(--gold);
}
.bk-row .thumb img{ width:100%; height:100%; object-fit:contain; }
.bk-row .meta{ min-width:0; }
.bk-row .meta b{ display:block; font-size:14px; letter-spacing:.05em; color:var(--gold);
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-row .meta span{ display:block; font-family:var(--mono); font-size:11.5px; font-weight:700;
                    color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-row .ops{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.bk-row form{ display:inline; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:960px){
  .bk-hero{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
  .bk-hero-cta{ justify-content:center; }
  .bk-mascot{ order:-1; }
  .bk-mascot img{ max-width:min(72vw,420px); max-height:38dvh; }
  .bk-tiles{ grid-template-columns:minmax(0,1fr); }
  .bk-pagehead .aside{ margin-left:0; width:100%; }
}

@media (max-width:640px){
  :root{ --nav-h:56px; --pop:4px 4px 0 #000; --pop-sm:3px 3px 0 #000; }
  /* Three tabs still fit a phone once the words go and the glyphs stay. */
  .bk-tab{ padding:9px 12px; }
  .bk-tab .t{ display:none; }
  .bk-tab .g{ font-size:19px; }
  .bk-brand-txt{ font-size:16px; }
  .bk-sun{ bottom:26vh; width:88vw; }
  .bk-art{ background-image:var(--bk-bg-mobile, var(--bk-bg-desktop, none)); }
  .bk-linkgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .bk-link{ padding:10px; }
  .bk-link h3{ font-size:13.5px; }
  .bk-link p{ display:none; }        /* keep the phone grid to art + name + host */
  .bk-row{ grid-template-columns:48px minmax(0,1fr); }
  .bk-row .ops{ grid-column:1 / -1; justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  .bk-grid{ animation:none; }
  .bk-mascot img{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ===========================================================================
   PORTFOLIO PAGE
   The table itself is styled by portfolio.php (namespaced .pvfolio) and is
   deliberately left alone here — this only seats it in the page.
   =========================================================================== */
.bk-headmascot{
  height:clamp(60px,10vw,120px); width:auto; display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(0,229,255,.28));
}
.p-portfolio .pvfolio{
  padding:clamp(10px,1.8vw,20px);
  background:linear-gradient(180deg, rgba(12,5,18,.80), rgba(5,2,8,.88));
  border:var(--ink-line);
  box-shadow:var(--pop), 0 0 60px -26px var(--mag);
}