:root { --bg:#0b0f1a; --fg:#e8f0ff; --accent:#8ef; }
* { box-sizing: border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:Inter,system-ui,Segoe UI,Roboto,Arial; }
.wrap { max-width: 860px; margin: 8vh auto; padding: 0 20px; }
h1 { font-size: clamp(32px, 6vw, 64px); line-height: 1.05; }
.btn { display:inline-block; background:linear-gradient(150deg,var(--accent),#b4e1ff); color:#021; padding:12px 16px; border-radius:14px; font-weight:700; text-decoration:none; }

/* =========================
   SKILLS DECK (canonical)
   ========================= */

/* Palette & knobs */
:root{
  --frame:#0b1020;

  --blue-acc:#60a5fa;   /* systems */
  --green-acc:#86efac;  /* soft skills */
  --red-acc:#fca5a5;    /* accomplishments */

  /* Textured center image (tiny tile) */
  --bone-tex: url("assets/bluebone-114x23.png");

  /* Colored ring between outer & inner borders */
  --ring-color:#2fa9dad8;       /* change this for theme (e.g., #c9a635 for gold) */
  --ring-width:9px;          /* thickness of the ring */
}

/* Page heading tint on the skills page only */
.skills .card-group > h2 { color: #e2e8f0; }

/* Layout + stacking so flips aren’t clipped by the next row */
.skills .card-group{
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;
  position:relative; margin: 1.25rem 0 40px;   /* extra bottom clearance */
  overflow:visible;
}
.skills .card{
  width:240px; height:340px; margin:0;
  perspective:1200px; position:relative; z-index:0;
  border:4px solid #000; border-radius:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.25);
  transition: height .25s ease; /* <— add this */
}

/* Flip wrapper + face sizing (keeps front/back identical) */
.skills .card, 
.skills .card-inner, 
.skills .card-front, 
.skills .card-back { box-sizing:border-box; }
.skills .card-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transform-origin:center center;
  transition:transform .7s ease;
}
.skills .card:hover .card-inner{ transform: rotateY(180deg); }

/* Faces (shared) */
.skills .card-front, .skills .card-back{
  position:absolute; inset:0; padding:16px; border-radius:12px;
  border:1px solid rgba(17,24,39,.2);
  display:flex; flex-direction:column; gap:.5rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

/* FRONT — blue-bone textured center + colored outer ring + inner black frame */
.skills .card-front{
  /* center texture */
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    radial-gradient(140% 120% at 30% 15%, rgba(110,160,201,.8) 0%, rgba(39,77,115,.8) 45%, rgba(11,26,42,.95) 85%),
    var(--bone-tex);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: cover, cover, 220px auto;
  background-blend-mode: overlay, multiply, normal;

  color:#fff; /* readable text */
}

/* COLORED RING — band between outer and inner borders */
.skills .card-front::after{
  content:"";
  position:absolute; inset:0; border-radius:12px;
  box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
  pointer-events:none;
}

/* INNER BLACK FRAME (no fill, lets texture show) */
.skills .card-front::before{
  content:""; position:absolute; inset:8px; border-radius:10px;
  border:3px solid #000;                 /* pure black inner line */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
  background: transparent;               /* IMPORTANT: no fill */
  pointer-events:none;
}

/* Brand: RGB triangle Venn (isolated blend), 240×112 */
.skills .brand-wrap{
  height:112px; margin-bottom:6px;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}
.skills .brand-svg{ width:240px; height:112px; display:block; }
.skills .brand-word{
  font-weight:900; letter-spacing:.5px;
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
  fill:#fff; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:1.5px;
}

/* Front text */
.skills .card-front .card-title{ font-size:1rem; font-weight:700; margin-top:.25rem; }
.skills .type-line{ font-size:.8rem; opacity:.85; margin-top:.15rem; color:#e8eef7; }

/* BACK — dark frame with tinted underlayer + inner accent border */
.skills .card-back{
  background:#0f172a; color:#f8fafc; border-color:#334155;
  transform: rotateY(180deg);
  position:relative;
  display:flex; flex-direction:column;     /* allow body scrolling if tall */
}
.skills .card-back::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  opacity:.25; pointer-events:none; background: var(--back-tint, none);
}
.skills .card-back::after{
  content:""; position:absolute; inset:10px; border-radius:10px;
  border:2px solid var(--accent, #94a3b8); opacity:.85; pointer-events:none;
}
.skills .card-back .card-title{ position:relative; z-index:1; }
.skills .back-subtitle{ font-size:.9rem; opacity:.9; margin-bottom:.35rem; position:relative; z-index:1; }
.skills .card-back .card-body{
  position:relative; z-index:1;
  margin-top:.25rem;
  overflow: visible;  /* no inner scroll */
  max-height: none;
}

/* Category bindings (set on section) */
.skills .card-group.systems  .card-back{ --accent:var(--blue-acc);  --back-tint:radial-gradient(100% 80% at 50% 0%, #1e40af 0%, transparent 70%); }
.skills .card-group.soft     .card-back{ --accent:var(--green-acc); --back-tint:radial-gradient(100% 80% at 50% 0%, #166534 0%, transparent 70%); }
.skills .card-group.accomp   .card-back{ --accent:var(--red-acc);   --back-tint:radial-gradient(100% 80% at 50% 0%, #7f1d1d 0%, transparent 70%); }

/* Art panel (back face) */
.skills .back-art{
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 8px;
  margin: 4px 0 8px 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background-color: #0f172a;
}
.skills .back-art img{
  width: 100%; height: 100%; display:block;
  object-fit: contain; object-position:center;
}
.skills .back-art::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px);
  pointer-events:none;
}
.skills .back-art::after{
  content:""; position:absolute; inset:-40%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,0) 22%);
  transform: rotate(10deg); animation: foilSweep 4.5s linear infinite;
  mix-blend-mode: screen; opacity:.45; pointer-events:none;
}

@keyframes foilSweep{
  0%{ transform: translateX(-40%) rotate(10deg); }
  100%{ transform: translateX(40%) rotate(10deg); }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .skills .card-inner{ transition:none; }
}

/* ===== Navbar (shared) ===== */
.site-nav{
  position: sticky; top: 0; z-index: 2000;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; margin: 0 0 10px;
  background: rgba(5,9,16,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-nav .brand{
  font-weight:800; letter-spacing:.3px; color:#e8f0ff; text-decoration:none;
}
.site-nav .links a{
  color:#c8d3ea; text-decoration:none; margin-left:16px; padding:6px 10px;
  border-radius:8px; transition:background .15s ease, color .15s ease;
}
.site-nav .links a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.site-nav .links a.active{ background:rgba(142,239,255,.15); color:#fff; }

/* ===== Page title with separator line ===== */
.page-title{
  margin: 20px 0 8px;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05;
}
.page-title::after{
  content:"";
  display:block;
  height:2px;
  margin-top:10px;
  background: linear-gradient(90deg, rgba(142,239,255,.9), rgba(142,239,255,.2) 60%, transparent);
  border-radius:2px;
}

/* ===== Section headings above each row ===== */
.card-section{ margin: 22px 0 6px; }
.section-title{
  font-size:1.25rem;
  font-weight:700;
  color:#e2e8f0;
  margin: 0 0 8px;
}

/* ===== Horizontal carousel rows (no clipping, edge-hover arrows) ===== */

/* wrapper that holds the row + arrows */
.carousel-wrap{
  position: relative;
  overflow: visible;                       /* never clip cards or arrows */
}

/* the scrolling row */
.card-group.carousel{
  display:flex;
  flex-wrap: nowrap;                       /* single horizontal row */
  gap:24px;

  /* horizontal scroll only */
  overflow-x: auto;
  overflow-y: visible;                     /* show flip/shadows below */

  /* give extra bottom space so back-face/shadows never look cut */
  padding: 14px 56px 48px;                 /* L/R for arrows + bottom for flip */

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* hide native bars so arrows are the UI */
  scrollbar-width: none;                   /* Firefox */
}
.card-group.carousel::-webkit-scrollbar{ display:none; } /* WebKit */


/* ensure parent sections + page container never clip the flip */
.card-section{ overflow: visible; }
.wrap{ overflow: visible; }

/* ---- Arrows ---- */
.caro-btn{
  position:absolute; top:0; bottom:0;
  width:48px;                               /* wider = easier hover */
  display:flex; align-items:center; justify-content:center;
  border:none; outline:none;
  color:#e8f0ff; font-size:26px; font-weight:800; line-height:1;
  background: transparent;
  cursor:pointer;
  z-index: 60;                              /* above cards */
  pointer-events: auto;
  opacity: 0;                               /* reveal on hover/focus */
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.caro-btn.left{
  left:0;
  border-top-left-radius:12px; border-bottom-left-radius:12px;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  transform: translateX(-10px);
}
.caro-btn.right{
  right:0;
  border-top-right-radius:12px; border-bottom-right-radius:12px;
  background: linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  transform: translateX(10px);
}

/* reveal arrows when interacting */
.carousel-wrap:hover .caro-btn,
.carousel-wrap:focus-within .caro-btn{
  opacity: 1;
  transform: translateX(0);
}
.caro-btn:hover{ background-color: rgba(255,255,255,.06); }

/* ----- Back face content: no inner scrollbar (flip can overlap) ----- */
.skills .card-back .card-body{
  position:relative; z-index:1;
  margin-top:.25rem;
  overflow: visible;  /* no inner scroll */
  max-height: none;
}

.about-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.about-text {
  flex: 2 1 300px;
}

.about-photo img {
  border-radius: 50%;
  max-width: 250px;
  height: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Brand emoji (larger + aligned) */
.site-nav .brand-emoji {
  font-size: 1.8rem;     /* tweak size as needed */
  line-height: 1;
  margin-right: 8px;
  display: inline-block;
  transform: translateY(2px); /* nudge down for alignment */
}

/* Animated "BH" on subpages */
.site-nav .brand-text.brand-anim {
  animation: brandColors 10s linear infinite;
  font-weight: 800;
}

/* Color cycle for animated BH */
@keyframes brandColors {
  0%   { color:#ff6b6b; }   /* coral */
  20%  { color:#ffd166; }   /* sunflower */
  40%  { color:#06d6a0; }   /* mint */
  60%  { color:#118ab2; }   /* teal-blue */
  80%  { color:#c77dff; }   /* violet */
  100% { color:#ff6b6b; }
}

/* Vars used by the button (add if missing) */
:root{
  --accent2: #b4e1ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Resume button — unified high-contrast, readable style */
.site-nav .links a.btn,
.site-nav .links a.btn:visited {
  background: linear-gradient(150deg, var(--accent), var(--accent2));
  color: #001a26 !important;   /* dark navy text */
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  box-shadow: var(--shadow);
  opacity: 1 !important;       /* ensure full opacity */
  mix-blend-mode: normal;      /* prevent blending fade */
  transition: all .15s ease;
}

.site-nav .links a.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Final-say: nav resume button stays dark on every state */
nav.site-nav .links a.btn:link,
nav.site-nav .links a.btn:visited,
nav.site-nav .links a.btn:hover,
nav.site-nav .links a.btn:active,
nav.site-nav .links a.btn:focus {
  color: #001a26 !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}

.linkedin-icon {
  height: 30px;           /* size, tweak if too small/large */
  width: auto;
  border-radius: 6px;     /* smooth corners */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); /* always-visible fade */
  display: block;         /* prevents stray whitespace under image */
}