:root{
    --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --text:#e2e8f0; --accent:#38bdf8; --chip:#1e293b; --border:#1f2937;
    --mx:50%; --my:50%; /* spotlight position (updated by JS) */
    --car-card-h: 460px;           /* carousel card height */
    --car-thumb-ratio: 16/10;      /* carousel media ratio */
}

/* === Base === */
html,body{
    margin:0; padding:0; background:var(--bg); color:var(--text);
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* === Layout / header === */
.wrap{max-width:1050px; margin:0 auto; padding:24px}
header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px}
.brand{display:flex; align-items:center; gap:14px}

/* Mobile nav toggle (hamburger) */
.menu-toggle{
    display:none;                   /* hidden on desktop */
    align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px;
    background:var(--chip); color:#cbd5e1;
    border:1px solid var(--border); cursor:pointer;
}
.menu-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Mobile menu panel */
@media (max-width: 860px){
    header{ position:relative; }
    .menu-toggle{ display:inline-flex; }      /* show hamburger */
    header nav{
        display:none;                           /* hidden until toggled */
        position:absolute; top:100%; right:0;
        background:var(--card); border:1px solid var(--border);
        border-radius:12px; padding:12px; min-width:220px;
        box-shadow:0 18px 40px rgba(2,132,199,.14);
        z-index:20; flex-direction:column;
    }
    header.nav-open nav{ display:flex; }      /* toggled open */
    header nav a{ margin:8px 0; display:block; }
    header nav a::after{ display:none; }      /* simpler on mobile */
}

/* Modern underline nav (desktop/default) */
nav a{ position:relative; margin-left:18px; font-weight:600; color:#cbd5e1 }
nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:linear-gradient(90deg,var(--accent),transparent);
    transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
nav a:hover::after, nav a:focus-visible::after{ transform:scaleX(1); }

/* === Hero: two columns desktop, stack on mobile === */
.hero{
    display:grid; align-items:center;
    grid-template-columns:1.2fr .8fr;
    gap:28px; margin:40px 0;
}
.hero > .avatar{
    justify-self:end;               /* push image to the right */
    margin-left:0;                  /* cancel generic avatar margin */
}
@media (max-width: 860px){
    .hero{ grid-template-columns:1fr; }
    .hero > .avatar{ justify-self:center; }
}

/* === Sections / type === */
section{margin:36px 0}
h1{font-size:clamp(28px,3.2vw,44px); line-height:1.1; margin:0 0 10px}
h2{margin:.25rem 0 .5rem}
.kicker{letter-spacing:.12em; text-transform:uppercase; color:#7dd3fc; font-weight:800; font-size:12px}
.muted{color:var(--muted)}
footer{margin:56px 0 22px; color:#64748b; text-align:center}

/* === Cards / chips / buttons === */
.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border:1px solid var(--border); border-radius:16px; padding:18px;
    transition:border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover{ border-color:#334155; transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,132,199,.14); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.chip{ background:var(--chip); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:13px; color:#cbd5e1 }

.btn{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; gap:8px;
    background:#0891b2; border:1px solid #0ea5e9; color:#03131a;
    padding:10px 14px; border-radius:10px; font-weight:700; transition:transform .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn::after{
    content:""; position:absolute; inset:0; transform:translateX(-120%) skewX(-20deg);
    background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 35%, rgba(255,255,255,0) 60%);
    transition:transform .6s ease;
}
.btn:hover::after{ transform:translateX(120%) skewX(-20deg); }
.btn.secondary{ background:transparent; border-color:#334155; color:#cbd5e1 }

/* === Grid helpers === */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-12{grid-column:span 12}
@media (max-width: 860px){
    .col-4,.col-5,.col-6,.col-7,.col-12{ grid-column:1/-1 }
}
.two-col{ columns:2; column-gap:28px }
@media (max-width: 760px){ .two-col{ columns:1 } }

/* === Avatar + animated gold ring === */
.avatar{
    position:relative; width:300px; height:300px; flex-shrink:0; margin-left:2rem;
    border-radius:50%; display:block;
}
.avatar::before{
    content:""; position:absolute; inset:-8px; border-radius:50%;
    background:conic-gradient(#d4af37, #f7e7a1, #d4af37);
    filter:saturate(105%); animation:ring-spin 24s linear infinite; z-index:0;
}
.avatar::after{
    content:""; position:absolute; inset:-18px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(212,175,55,.22), transparent 70%);
    filter:blur(6px); z-index:0;
}
@keyframes ring-spin{ to{ transform:rotate(360deg) } }
.avatar img{
    position:relative; z-index:1; width:100%; height:100%;
    object-fit:cover; border-radius:50%; display:block;
    box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .15s ease;
}
@media (max-width:600px){
    .avatar{ width:220px; height:220px; margin:12px auto 0; }
}

/* === Background: diagonal sweep + interactive spotlight === */
.bg-aurora{
    background:
            linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.28) 14%, rgba(0,0,0,0) 34%),
            linear-gradient(140deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 50%, rgba(0,0,0,0) 70%),
            linear-gradient(135deg, rgba(14,165,233,.12), transparent 60%),
            linear-gradient(315deg, rgba(34,211,238,.10), transparent 65%),
            var(--bg);
    background-attachment: fixed;
}
body.bg-aurora::after{
    content:""; position:fixed; inset:-12vmax; pointer-events:none;
    background:radial-gradient(40vmax 28vmax at var(--mx) var(--my), rgba(56,189,248,.11), transparent 60%);
    mix-blend-mode:screen; opacity:.6; transition:opacity .25s ease;
}

/* === Scroll reveal === */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s cubic-bezier(.2,.65,.3,1), transform .6s cubic-bezier(.2,.65,.3,1); }
.reveal.visible{ opacity:1; transform:none; }
.hidden{ display:none !important }

/* === Featured Carousel (home) === */
.featured-head{ display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:8px }

.carousel{ position:relative; overflow:visible; }
.car-viewport{
    display:grid; grid-auto-flow:column; gap:16px; align-items:start;
    grid-auto-columns:min(85vw, 340px);
    overflow-x:auto; overflow-y:visible;
    scroll-snap-type:x mandatory; scroll-snap-stop:always;
    padding:6px 46px 18px;                     /* extra bottom padding so content isn’t cut */
    overscroll-behavior-x:contain; -ms-overflow-style:none; scrollbar-width:none;
}
.car-viewport::-webkit-scrollbar{ display:none }

.slide{ scroll-snap-align:start }
.slide .card{ display:flex; flex-direction:column; gap:10px; height:auto; }
.thumb{ aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#0a1324; display:block; border:1px solid var(--border) }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s }
.slide .card:hover .thumb img{ transform:scale(1.04) }
.slide small{ color:#94a3b8 }
.slide .links a{ margin-right:8px }

/* Uniform height & content flow for carousel cards */
.carousel .slide .card{
    height:var(--car-card-h);
    display:flex; flex-direction:column;
}
.carousel .thumb{
    aspect-ratio:var(--car-thumb-ratio);
    flex:0 0 auto;                               /* fixed media region */
}
.carousel .slide h3{
    margin:8px 0 2px; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.carousel .slide .muted{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.carousel .slide .links{ margin-top:auto; }     /* pin links to bottom */

@media (max-width:600px){
    :root{ --car-card-h:420px; }
}

/* Carousel controls */
.car-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:999px;
    background:var(--chip); border:1px solid var(--border); color:#cbd5e1;
    display:grid; place-items:center; cursor:pointer; z-index:5;
}
.car-btn[disabled]{ opacity:.4; cursor:default }
.car-prev{ left:2px } .car-next{ right:2px }
.car-btn:focus-visible{ outline:2px solid #38bdf8; outline-offset:2px }

.car-dots{ display:flex; justify-content:center; gap:8px; margin:10px 0 0 }
.car-dot{ width:7px; height:7px; border-radius:999px; background:#334155; border:1px solid var(--border) }
.car-dot[aria-current="true"]{ background:#7dd3fc; border-color:#38bdf8; transform:scale(1.15) }

/* === Projects grid (projects.html) === */
.projects-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.projects-grid>article{ grid-column:span 4; display:flex; flex-direction:column; gap:10px }
@media (max-width:860px){ .projects-grid>article{ grid-column:1/-1 } }
.tags{ display:flex; flex-wrap:wrap; gap:6px }
.tag{ background:var(--chip); border:1px solid var(--border); color:#cbd5e1; border-radius:999px; padding:4px 8px; font-size:12px }

/* Projects filter chips (projects.html) */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 16px }
.filter-btn{
    background:var(--chip); border:1px solid var(--border);
    padding:8px 12px; border-radius:999px;
    font-weight:600; color:#cbd5e1; cursor:pointer;
}
.filter-btn[aria-pressed="true"]{ outline:2px solid #22d3ee; color:#e2e8f0 }

/* === Project detail (gallery + pager) === */
.hero-proj{ margin:18px 0 26px }
.cover{
    width:100%; aspect-ratio:21/9; border-radius:16px; overflow:hidden; background:#0a1324; position:relative;
    border:1px solid var(--border);
}
.cover img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(105%) contrast(102%) }
.cover::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 40%);
}
.meta{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0 }
.meta .pill{ background:var(--chip); border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:13px; color:#cbd5e1 }

.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.g-6{ grid-column:span 6 } .g-12{ grid-column:span 12 }
@media (max-width:900px){ .g-6,.g-12{ grid-column:1/-1 } }
.shot{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#0a1324 }
.shot img{ width:100%; height:100%; object-fit:cover; display:block }

.pager { display:flex; justify-content:left; margin-top:24px; }


/* === Accessibility / motion === */
@media (prefers-reduced-motion: reduce){
    .btn::after, .avatar::before{ animation:none }
    .reveal{ opacity:1; transform:none }
    body.bg-aurora::after{ display:none }
}

/* === Small-screen touch-ups === */
@media (max-width:600px){
    .wrap{ padding:18px }
    .btn{ font-size:.95rem }
    .car-viewport{ grid-auto-columns:82vw }
}
/* === Lightbox (image viewer) === */
.lb{
    position:fixed; inset:0; z-index:9999;
    display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.75);
    backdrop-filter:saturate(120%) blur(2px);
}
.lb.open{ display:flex; }
.lb img{
    max-width:min(92vw, 1400px);
    max-height:92vh;
    border-radius:12px;
    border:1px solid var(--border);
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

/* controls */
.lb-close, .lb-prev, .lb-next{
    position:absolute; display:grid; place-items:center;
    width:44px; height:44px; border-radius:12px;
    background:var(--chip); color:#e2e8f0;
    border:1px solid var(--border); cursor:pointer;
}
.lb-close{ top:20px; right:20px; font-size:28px; line-height:1; }
.lb-prev{ left:24px; top:50%; transform:translateY(-50%); font-size:28px; }
.lb-next{ right:24px; top:50%; transform:translateY(-50%); font-size:28px; }

.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
}
@media (max-width:700px){
    .lb-prev, .lb-next{ width:40px; height:40px; font-size:24px; }
}

.grid[style*="--cols"] {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
@media (max-width: 800px) {
    .grid[style*="--cols"] { grid-template-columns: 1fr; }
}

#lightbox.open img {
    max-height: none;
    width: auto;
}
/* === Tall screenshot support in Lightbox (additions) === */

/* Let the overlay itself scroll for very tall images */
#lightbox.open{
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    align-items: flex-start;           /* start at top so users see the header of a tall page */
    padding: 24px 0;                   /* breathing room above/below */
}

/* Allow tall images to exceed the viewport height and be scrollable */
#lightbox.open img{
    max-height: none;                  /* override the 92vh cap */
    height: auto;
    max-width: min(96vw, 1400px);      /* keep a sensible max width */
    width: auto;
    margin: 0 auto;                    /* center the image on scroll */
}

/* Optional: a helper class for small “tall screenshot” thumbnails.
   If you add class="ba-thumb" to the <img> in your Before card,
   you won’t need inline styles. Safe no-op elsewhere. */
.ba-thumb{
    display: block;
    max-height: 160px;
    width: auto;
    margin-inline: auto;
}


/* === Comparison (cmp) — self-contained === */
.cmp{ --cmp-h:520px; --cmp-bg:#0b1220; --cmp-card:#0f172a; --cmp-bd:var(--border);
    --cmp-radius:16px; --cmp-z:90%; --cmp-gap:16px; position:relative; }
.cmp-head{ display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cmp-head h2{ margin:0; }
.cmp-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cmp-toggle{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; }
.cmp-zoom{ display:inline-flex; align-items:center; gap:6px; background:var(--chip);
    border:1px solid var(--cmp-bd); padding:6px 8px; border-radius:999px; }
.cmp-zoom-btn{ background:transparent; border:1px solid var(--cmp-bd); border-radius:8px; width:30px; height:30px; color:#cbd5e1; cursor:pointer; }
.cmp-zoom-range{ width:120px; accent-color:#38bdf8; }
.cmp-full{ background:#0891b2; border:1px solid #0ea5e9; color:#03131a; padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer; }

.cmp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--cmp-gap); }
@media (max-width:900px){ .cmp-grid{ grid-template-columns:1fr; } }

.cmp-pane{ background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border:1px solid var(--cmp-bd); border-radius:var(--cmp-radius); overflow:hidden; }
.cmp-caption{ text-align:center; color:var(--muted); padding:10px 12px 6px; }
.cmp-caption .cmp-sub{ opacity:.85; font-size:.95em; margin-left:6px; }
.cmp-chrome{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:#0a1324; border-top:1px solid #0b1528; border-bottom:1px solid #0b1528; }
.cmp-chrome span{ width:10px; height:10px; border-radius:999px; background:#ef4444; display:inline-block }
.cmp-chrome span:nth-child(2){ background:#f59e0b }
.cmp-chrome span:nth-child(3){ background:#22c55e }
.cmp-chrome em{ color:#94a3b8; font-style:normal; margin-left:6px; font-size:12px; }

.cmp-viewport{ height:var(--cmp-h); overflow:auto; background:#0a1324; border-top:1px solid var(--cmp-bd); }
.cmp-viewport img{ width:var(--cmp-z); height:auto; display:block; margin:0 auto; image-rendering:-webkit-optimize-contrast; }

.cmp-notes{ margin-top:10px; }
.cmp-notes ul{ margin:0; padding:0 0 0 18px; color:var(--muted); }

/* Fullscreen mode */
.cmp.is-full{
    position:fixed; inset:12px; z-index:9990; background:radial-gradient(1200px 700px at 40% 15%, rgba(56,189,248,.08), transparent 60%), rgba(0,0,0,.55);
    backdrop-filter:saturate(120%) blur(2px); padding:16px; border-radius:18px;
}
.cmp.is-full .cmp-viewport{ --cmp-h: calc(100vh - 160px); }
.cmp.is-full .cmp-full{ background:#0f172a; color:#e2e8f0; border-color:#334155; }
.cmp.is-full .cmp-head{ position:sticky; top:0; padding-top:6px; z-index:2; background:transparent; }

/* Friendly scrollbars (optional) */
.cmp-viewport::-webkit-scrollbar{ width:10px }
.cmp-viewport::-webkit-scrollbar-thumb{ background:#1f2937; border-radius:10px }
.cmp-viewport{ scrollbar-color:#1f2937 transparent; scrollbar-width:thin }

/* Reduce motion safe */
@media (prefers-reduced-motion:reduce){
    .cmp{ scroll-behavior:auto; }
}

/* === Lightbox: scoped tall-screenshot mode === */
/* Default: center everything (restores original behavior) */
#lightbox.open { display:flex; align-items:center; }

/* Scrolly mode: applied ONLY when JS adds .lb--scrolly */
#lightbox.lb--scrolly.open{
    align-items:flex-start;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:24px 0;
}
#lightbox.lb--scrolly.open img{
    max-height:none;           /* allow tall images */
    height:auto;
    width:auto;
    max-width:min(96vw, 1400px);
    margin:0 auto;
}

/* Keep controls visible even when the overlay scrolls */
#lightbox.lb--scrolly .lb-close,
#lightbox.lb--scrolly .lb-prev,
#lightbox.lb--scrolly .lb-next{
    position:fixed;
}
#lightbox.lb--scrolly .lb-close{ top:16px; right:16px; }
#lightbox.lb--scrolly .lb-prev { left:16px; top:50%; transform:translateY(-50%); }
#lightbox.lb--scrolly .lb-next { right:16px; top:50%; transform:translateY(-50%); }

/* Optional: thumbnail helper so you can drop inline styles */
.ba-thumb{ display:block; max-height:160px; width:auto; margin-inline:auto; }


/* === cmp preview vs read =============================== */

/* Use fit-all preview inside the card (no cropping) */
.cmp .cmp-thumb{
    position:relative;
    display:block;
    height: var(--cmp-h);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:#0a1324;
}
.cmp .cmp-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;     /* <-- shows the entire page inside the card */
    display:block;
    image-rendering:-webkit-optimize-contrast;
}
/* Soft helper text */
.cmp .cmp-hint{
    position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
    background:rgba(3,13,24,.6); padding:4px 8px; border-radius:8px;
    border:1px solid rgba(148,163,184,.25); color:#cbd5e1; font-size:12px;
    pointer-events:none;
    opacity:.85;
}

/* When "Read mode" is ON, hide preview, show scrollable viewport */
.cmp.is-read .cmp-thumb{ display:none; }
.cmp.is-read .cmp-viewport[hidden]{ display:block; } /* respect our toggle without removing [hidden] elsewhere */

/* In read mode we use the zoom variable like before */
.cmp.is-read .cmp-viewport img{ width: var(--cmp-z); height:auto; display:block; margin:0 auto; }

/* Disable zoom/sync controls when not in read mode (clean UX) */
.cmp:not(.is-read) .cmp-zoom,
.cmp:not(.is-read) #cmp-sync{
    opacity:.5; pointer-events:none; filter:grayscale(.2);
}

.cmp-mode{ background:transparent; border-color:#334155; color:#cbd5e1 }

/* Make sure the global .thumb aspect ratio doesn't win inside cmp */
.cmp .thumb{ aspect-ratio:auto; }

/* === cmp: unify Read + Fullscreen buttons ===================== */
.cmp-actions .cmp-mode,
.cmp-actions .cmp-full{
    display:inline-flex; align-items:center; gap:6px;
    background:#0891b2; border:1px solid #0ea5e9; color:#03131a;
    padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer;
}
.cmp-actions .cmp-mode:focus-visible,
.cmp-actions .cmp-full:focus-visible{
    outline:2px solid #38bdf8; outline-offset:2px;
}

/* Active states */
.cmp.is-read .cmp-actions .cmp-mode,
.cmp.is-full .cmp-actions .cmp-full{
    background:#0f172a; color:#e2e8f0; border-color:#334155;
}

/* === cmp: fullscreen close button ============================= */
.cmp-exit{
    display:none; position:fixed; right:16px; top:16px; z-index:10000;
    width:44px; height:44px; border-radius:12px;
    background:var(--chip); color:#e2e8f0; border:1px solid var(--border);
    font-size:28px; line-height:1; place-items:center; cursor:pointer;
}
.cmp-exit:focus-visible{ outline:2px solid #38bdf8; outline-offset:2px; }
.cmp.is-full .cmp-exit{ display:grid; }
@media (max-width:700px){
    .cmp-exit{ width:40px; height:40px; font-size:24px; }
}