/* =========================================================================
   Skin B: Cyberpunk. Heywood (light) and Arasaka (dark).
   Loaded after site.css and only on the B version, so A is untouched.
   ========================================================================= */
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Heywood: overcast daylight, concrete, pink and teal neon still buzzing */
:root[data-skin="b"], :root[data-skin="b"][data-theme="hero"] {
  --bg: #DDE5E8;
  --surface: #F5F9FA;
  --ink: #0F141B;
  --muted: #485763;
  --primary: #D0136B;
  --on-primary: #FFFFFF;
  --accent: #00A3A6;
  --edge: #0F141B;
  --hi: #C0105F;
  --rule: rgba(15, 20, 27, .16);
  --dot: rgba(0, 163, 166, .16);
  --frame: #B9C6CC;
  --sky-top: #A6C3CC;
  --sky-bot: #F1C8D6;
  --tower-far: #A2B5BF;
  --tower-mid: #7E95A3;
  --tower-near: #536977;
  --lit-1: #FFE45C;
  --lit-2: #8AF4EF;
  --sign-1: #FF3E9A;
  --sign-2: #00C2C7;
  --sign-3: #F2CF14;
  --sil: #2E3D49;
  --rain: rgba(50, 80, 100, .42);
  --glow: 0 0 0 transparent;
  --split-a: #FF3E9A;
  --split-b: #00B7BA;
}
/* Arasaka: corporate black, neon red, ice cyan */
:root[data-skin="b"][data-theme="villain"] {
  --bg: #08080D;
  --surface: #111119;
  --ink: #EDEBF5;
  --muted: #9C99B0;
  --primary: #FF2E44;
  --on-primary: #FFFFFF;
  --accent: #00E5FF;
  --edge: #2B2B3C;
  --hi: #FF4F61;
  --rule: rgba(237, 235, 245, .12);
  --dot: rgba(255, 46, 68, .2);
  --frame: #1A1A26;
  --sky-top: #030306;
  --sky-bot: #2E0711;
  --tower-far: #1C0C13;
  --tower-mid: #12090F;
  --tower-near: #0A090E;
  --lit-1: #FF2E44;
  --lit-2: #00E5FF;
  --sign-1: #FF2E44;
  --sign-2: #00E5FF;
  --sign-3: #F5E663;
  --sil: #050508;
  --rain: rgba(195, 220, 255, .32);
  --glow: 0 0 22px -4px var(--primary);
  --split-a: #FF2E44;
  --split-b: #00E5FF;
}

[data-skin="b"] body { background: var(--sky-bot); }
[data-skin="b"] .display,
[data-skin="b"] .card h3, [data-skin="b"] .row h3, [data-skin="b"] .repo h3, [data-skin="b"] .lang h3,
[data-skin="b"] .place h3, [data-skin="b"] .foot__name, [data-skin="b"] .bar__name, [data-skin="b"] .align,
[data-skin="b"] .dock__bubble, [data-skin="b"] .avatar__blank, [data-skin="b"] .dock__blank, [data-skin="b"] .lang__native {
  font-family: "Chakra Petch", "Saira XC", system-ui, sans-serif; letter-spacing: 0;
}
[data-skin="b"] main, [data-skin="b"] .foot { position: relative; z-index: 1; }

/* ---------- the city outside ---------- */
.bk { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bk__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 100%, color-mix(in srgb, var(--sign-1) 22%, transparent), transparent 70%),
    linear-gradient(var(--sky-top), var(--sky-bot));
}
.bk__layer { position: absolute; left: 0; top: 0; width: 100%; height: 150vh; will-change: transform; }
.bk__layer--far .bk__towers { fill: var(--tower-far); }
.bk__layer--mid .bk__towers { fill: var(--tower-mid); }
.bk__layer--near .bk__towers { fill: var(--tower-near); }
.bk__lit { fill: var(--lit-1); }
.bk__lit--alt { fill: var(--lit-2); }
.bk__off { fill: var(--tower-near); }
.bk__windows { opacity: .38; }
.bk__sign--1 { fill: var(--sign-1); }
.bk__sign--2 { fill: var(--sign-2); }
.bk__sign--3 { fill: var(--sign-3); }
.bk__layer--mid .bk__signs { opacity: .6; }
[data-theme="villain"] .bk__signs { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sign-1) 70%, transparent)); }
.bk__sign--flicker { animation: flicker 7s steps(1) infinite; }
@keyframes flicker { 0%, 61%, 64%, 66%, 100% { opacity: 1; } 62%, 65% { opacity: .15; } }
.bk__rain { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- walls: full width, opaque, cover the city ---------- */
[data-skin="b"] .block {
  max-width: none; background: var(--bg);
  padding-left: max(clamp(16px, 4vw, 40px), calc((100% - 1120px) / 2 + 40px));
  padding-right: max(clamp(16px, 4vw, 40px), calc((100% - 1120px) / 2 + 40px));
}
[data-skin="b"] .foot { background: var(--bg); }

/* ---------- windows between floors ---------- */
.pane {
  position: relative; display: grid; height: 46vh; min-height: 260px;
  grid-template-columns: minmax(16px, 1fr) repeat(3, minmax(0, 340px)) minmax(16px, 1fr);
  border-top: 22px solid var(--bg); border-bottom: 22px solid var(--bg);
}
.pane::before, .pane::after { content: ""; background: var(--bg); }
.pane::before { grid-column: 1; grid-row: 1; }
.pane::after { grid-column: 5; grid-row: 1; }
.pane__glass {
  grid-row: 1; border: 7px solid var(--frame);
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, .10) 30% 34%, transparent 34% 52%, rgba(255, 255, 255, .06) 52% 60%, transparent 60%),
    linear-gradient(color-mix(in srgb, var(--sky-top) 12%, transparent), transparent 40%);
}
.pane__floor {
  position: absolute; right: max(16px, calc((100% - 1020px) / 2)); bottom: -19px;
  font: 600 .8rem/1 "Chakra Petch", sans-serif; color: var(--muted); letter-spacing: .06em;
}
.pane__floor::before { content: "▾ "; color: var(--primary); }

/* ---------- top bar + switch ---------- */
[data-skin="b"] .align { border-radius: 4px; box-shadow: 3px 3px 0 var(--primary); font-weight: 700; font-size: .95rem; }
[data-theme="villain"][data-skin="b"] .align { box-shadow: 0 0 0 1px var(--primary), var(--glow); }
[data-skin="b"] .align__track { border-radius: 2px; }
[data-skin="b"] .align__knob { border-radius: 1px; }
[data-skin="b"] .bar__name { margin-left: calc(var(--dock, 0) * 60px); font-weight: 700; font-size: 1.25rem; }

/* ---------- hero: a penthouse window ---------- */
[data-skin="b"] .hero__burst, [data-skin="b"] .hero__band { display: none; }
[data-skin="b"] .hero__stage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 52%, color-mix(in srgb, var(--bg) 72%, transparent), transparent 75%);
}
[data-skin="b"] .hero__name {
  position: relative; font-weight: 700; font-size: clamp(3.2rem, 12.5vw, 10rem); line-height: .95;
  color: var(--ink);
  text-shadow: .04em 0 0 var(--split-a), -.04em 0 0 var(--split-b);
}
[data-theme="villain"][data-skin="b"] .hero__name {
  text-shadow: .035em 0 0 var(--split-a), -.035em 0 0 var(--split-b), 0 0 .3em color-mix(in srgb, var(--primary) 55%, transparent);
}
/* glitch: two slices of the name jump sideways for a split second every few seconds */
[data-skin="b"]:not(.editing) .hero__name::before,
[data-skin="b"]:not(.editing) .hero__name::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; text-shadow: none;
}
[data-skin="b"]:not(.editing) .hero__name::before { color: var(--split-a); clip-path: inset(18% 0 58% 0); animation: glitch-a 5.5s infinite steps(1); opacity: 0; }
[data-skin="b"]:not(.editing) .hero__name::after { color: var(--split-b); clip-path: inset(62% 0 14% 0); animation: glitch-b 5.5s infinite steps(1); opacity: 0; }
@keyframes glitch-a { 0%, 91%, 100% { opacity: 0; transform: none; } 92% { opacity: .9; transform: translateX(.06em); } 94% { opacity: .9; transform: translateX(-.04em); } 96% { opacity: 0; } }
@keyframes glitch-b { 0%, 92%, 100% { opacity: 0; transform: none; } 93% { opacity: .9; transform: translateX(-.07em); } 95% { opacity: .9; transform: translateX(.03em); } 97% { opacity: 0; } }

[data-skin="b"] .hero__tag {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-left: 3px solid var(--primary); border-radius: 2px; padding: 6px 14px;
}
[data-skin="b"] .facts { color: var(--ink); }
[data-skin="b"] .facts li { background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 2px 8px; border-radius: 2px; }
[data-skin="b"] .facts li::before { content: "▸"; color: var(--accent); }
[data-skin="b"] .cue { border-radius: 4px; border-color: var(--ink); }

/* avatar: neon ring and a slowly turning HUD ring */
[data-skin="b"] .avatar { border: 3px solid var(--primary); box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px var(--accent), var(--glow); }
[data-skin="b"] .hero__badge::before {
  content: ""; position: absolute; inset: -20px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 80%, transparent);
  animation: spin 24s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
[data-skin="b"] .avatar__blank { color: var(--primary); }

/* ---------- section titles ---------- */
[data-skin="b"] .block__title {
  font-weight: 700; font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1;
  text-shadow: 2px 0 0 color-mix(in srgb, var(--split-a) 70%, transparent), -2px 0 0 color-mix(in srgb, var(--split-b) 70%, transparent);
}
[data-skin="b"] .block__title::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 14px; background: var(--primary);
  box-shadow: 72px 0 0 var(--accent);
}
[data-skin="b"] .statement .w { color: var(--ink); }

/* ---------- panels: cut corner, neon edge ---------- */
[data-skin="b"] .card, [data-skin="b"] .repo, [data-skin="b"] .lang {
  position: relative; border-radius: 2px; border: 1px solid var(--edge); border-top: 3px solid var(--primary);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
[data-theme="villain"][data-skin="b"] .card, [data-theme="villain"][data-skin="b"] .repo, [data-theme="villain"][data-skin="b"] .lang { box-shadow: var(--glow); }
[data-skin="b"] .card::after, [data-skin="b"] .repo::after {
  content: ""; position: absolute; top: -3px; right: -1px; width: 20px; height: 20px; pointer-events: none;
  background: linear-gradient(225deg, var(--bg) 0 50%, var(--primary) 50% calc(50% + 2px), transparent calc(50% + 2px));
}
[data-skin="b"] .card:nth-child(3n + 2) { box-shadow: 4px 4px 0 color-mix(in srgb, var(--primary) 60%, transparent); }
[data-theme="villain"][data-skin="b"] .card:nth-child(3n + 2) { box-shadow: var(--glow); }
[data-skin="b"] .card h3 { font-size: 1.45rem; font-weight: 700; }
[data-skin="b"] .rows { border-top-color: var(--primary); }
[data-skin="b"] .row h3 { font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 3rem); }
[data-skin="b"] .repo h3 { font-size: 1.4rem; font-weight: 700; }
[data-skin="b"] .repo:hover { transform: translate(-2px, -2px); box-shadow: 0 0 0 1px var(--primary), 4px 4px 0 var(--accent); }
[data-theme="villain"][data-skin="b"] .repo:hover { box-shadow: 0 0 0 1px var(--primary), 0 0 28px -4px var(--primary); }
[data-skin="b"] .repo--pinned { border-color: var(--accent); }
[data-skin="b"] .repo__pin { right: 26px; }

/* languages keep the pop-out, with a chromatic split on hover */
[data-skin="b"] .lang { min-height: 280px; }
[data-skin="b"] .lang:nth-child(2n) { border: 1px solid var(--edge); border-top: 3px solid var(--accent); }
[data-skin="b"] .lang__native { font-weight: 700; font-size: clamp(4rem, 10vw, 7rem); }
[data-skin="b"] .lang:hover, [data-skin="b"] .lang:focus-within { box-shadow: 10px 12px 0 var(--accent); }
[data-skin="b"] .lang:nth-child(2n):hover, [data-skin="b"] .lang:nth-child(2n):focus-within { box-shadow: 10px 12px 0 var(--primary); }
[data-theme="villain"][data-skin="b"] .lang:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 36px -6px var(--accent); }
[data-theme="villain"][data-skin="b"] .lang:nth-child(2n):hover { box-shadow: 0 0 0 1px var(--primary), 0 0 36px -6px var(--primary); }
[data-skin="b"] .lang:hover .lang__native { text-shadow: 3px 0 0 var(--split-b), -3px 0 0 var(--split-a); }

/* ---------- places: a glass wall, each card a window onto that city ---------- */
[data-skin="b"] .places__pin .block__title { display: inline-block; background: var(--bg); padding: .1em .35em .25em; }
[data-skin="b"] .places__pin .block__title::after { display: none; }
[data-skin="b"] .place {
  border-radius: 3px; border: 6px solid var(--frame);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--sky-bot) 25%, transparent) 0 61%, var(--surface) 61%);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--primary) 70%, transparent);
}
[data-skin="b"] .place:nth-child(2n) { box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent) 70%, transparent); }
[data-theme="villain"][data-skin="b"] .place, [data-theme="villain"][data-skin="b"] .place:nth-child(2n) { box-shadow: var(--glow); }
[data-skin="b"] .place::before { display: none; }
[data-skin="b"] .sky__back { fill: var(--sil); opacity: .45; }
[data-skin="b"] .sky__front, [data-skin="b"] .sky__sails { fill: var(--sil); }
[data-skin="b"] .sky__ground { fill: var(--primary); }
[data-skin="b"] .sky__sun { fill: var(--sign-1); opacity: .35; filter: blur(6px); }
[data-skin="b"] .sky__ring { stroke: var(--accent); opacity: .5; stroke-dasharray: 2 6; }
[data-skin="b"] .place--photo { background: none; }
[data-skin="b"] .place__flag { filter: none; }
[data-skin="b"] .place__coords { font-family: "Chakra Petch", sans-serif; opacity: .75; }

/* ---------- docked picture ---------- */
[data-skin="b"] .dock__face { border: 2px solid var(--primary); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent), var(--glow); }
[data-skin="b"] .dock__bubble { border-radius: 2px; box-shadow: 3px 3px 0 var(--primary); font-weight: 700; font-size: 1rem; }

/* ---------- footer ---------- */
[data-skin="b"] .foot { border-top: 3px solid var(--primary); }

/* ---------- reduced motion: no glitch, no spin ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-skin="b"] .hero__name::before, [data-skin="b"] .hero__name::after { display: none; }
  [data-skin="b"] .hero__badge::before, .bk__sign--flicker { animation: none; }
}

/* Arasaka: give each city window its own red-lit sky and a neon rim so the silhouette reads */
[data-theme="villain"][data-skin="b"] .place:not(.place--photo) {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--sky-top) 70%, transparent) 0%, color-mix(in srgb, #7A0E22 70%, transparent) 61%, var(--surface) 61%);
}
[data-theme="villain"][data-skin="b"] .sky__front,
[data-theme="villain"][data-skin="b"] .sky__sails { stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; }
[data-theme="villain"][data-skin="b"] .sky__back { fill: #3A0A16; opacity: .9; }
[data-theme="villain"][data-skin="b"] .sky__sun { fill: var(--accent); opacity: .55; }

/* tiles in skin B */
[data-skin="b"] .tile {
  border-radius: 2px; border: 1px solid var(--edge); border-left: 3px solid var(--primary);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%);
}
[data-skin="b"] .tile:nth-child(2n) { border-left-color: var(--accent); }
[data-skin="b"] .tile h3 { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1.45rem; line-height: 1.05; }
[data-skin="b"] .tile:hover { box-shadow: 6px 7px 0 color-mix(in srgb, var(--accent) 80%, transparent); }
[data-skin="b"] .tile:nth-child(2n):hover { box-shadow: 6px 7px 0 color-mix(in srgb, var(--primary) 80%, transparent); }
[data-theme="villain"][data-skin="b"] .tile:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 28px -6px var(--accent); }
[data-theme="villain"][data-skin="b"] .tile:nth-child(2n):hover { box-shadow: 0 0 0 1px var(--primary), 0 0 28px -6px var(--primary); }