body {
    margin: 0;
    padding: 0;
}

:root {
    --content-max-width: 64rem;
    --sidebar-width: 10.5rem;
    --layout-max-width: calc(var(--content-max-width) + 2 * var(--sidebar-width));
}

/* ── Dot-grid background canvas ── */
.dot-grid-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Page layout: sidebar + centered content ── */
.page-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, var(--content-max-width)) var(--sidebar-width);
    max-width: var(--layout-max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.page-layout::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 3rem;
    right: calc(var(--sidebar-width) / 2 - 0.75rem);
    width: 1.5rem;
    background:
        linear-gradient(rgba(57, 255, 20, 0.3), rgba(57, 255, 20, 0.3)) top center    / 1.5rem 1px no-repeat,
        linear-gradient(rgba(57, 255, 20, 0.3), rgba(57, 255, 20, 0.3)) bottom center / 1.5rem 1px no-repeat,
        linear-gradient(rgba(57, 255, 20, 0.3), rgba(57, 255, 20, 0.3)) center        / 1px 100%   no-repeat;
    pointer-events: none;
}

.main-content {
  grid-column: 2;
  padding: 0 2rem 1rem 2rem;
  max-width: 64rem;
}

a {
    color: #73d02f;
}

a:visited {
    color: #73d02f;
}

a:hover {
    color: #d8dd22;
}

a:active {
    color: #eab315;
}

::selection {
    /* background-color: #eab315; */
     background-color: #00AAff;
    /* color: #000; */
    color: #FFFFFF;
    /* text-shadow:
        0 0 4px grey,
        0 0 11px grey,
        0 0 19px grey,
        0 0 40px black; */
    text-shadow:
        0 0 4px #00AAff,
        0 0 12px #00AAff,
        0 0 24px #00AAff,
        0 0 48px #00AAff,
        0 0 80px #00AAffCC;
}

.navbar {
    padding: 5px 5px 5px 5px;
    border: .2rem solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    line-height: 1rem;
    font-family: 'Times', serif;
}

.text-things {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    line-height: 1rem;
    transform: scaleY(1.67);
}

.logo {
    width: 4rem;
    height: auto;
    filter: drop-shadow(0 0 8px #FFFFFF)
            drop-shadow(0 0 20px #FFFFFF);
}

.landing-page{
    text-align: center;
}

.landing-page p {
    text-indent: 0rem;
}

.image-gallery {
    text-align: center;
    margin: 3rem 0;
}

iframe {
    display: block;
    margin: 3rem auto;
}

.gallery-image {
    max-width: 40rem;
    text-align: center;
    margin: auto;
    border: .7rem solid rgb(12, 14, 16); 
}
.games {
    align-items: center;
    text-align: center;
}
.landing-page p {
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left
}
h1 {
    text-align: left;
    padding-left: 0%
}
.portfolio {
    /* color: #39FF14; /* super saturated */
    /* color: #a8ff98; very unsaturated */
    color: #83ff6e; /* in the middle, more readable than pure green, more character than white */
    font-family: 'Chakra Petch', sans-serif;
    background-color: #000;
    text-shadow:
        0 0 3px #39FF14DD,
        0 0 10px #39FF1499,
        0 0 30px #39FF1433;
}

.portfolio .page-section > pre:first-of-type {
    text-shadow:
        0 0 4px #39FF14,
        0 0 12px #39FF14,
        0 0 24px #39FF14,
        0 0 48px #39FF14DD,
        0 0 80px #0fa00f;
    border-bottom: 1px solid rgba(57, 255, 20, 0.25);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.4rem;
}

.contact-block {
    font-family: inherit;
    font-size: inherit;
    line-height: 2.5;
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    column-gap: 0.5rem;
    align-items: center;
    margin: 0;
}

.contact-block .contact-icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    align-self: center;
    filter:
        drop-shadow(0 0 3px #39FF14DD)
        drop-shadow(0 0 8px #39FF1499);
}

.contact-block .contact-label {
    text-align: left;
    align-self: center;
}

.contact-block .contact-label::after {
    content: ' :';
}

.contact-block .contact-value {
    display: flex;
    flex-direction: column;
}

#contact {
    margin-top: 6rem;
}

.portfolio a {
    color: #00AAff;
    text-shadow:
        0 0 4px #00AAffAA,
        0 0 11px #00AAffAA,
        0 0 19px #00AAffAA,
        0 0 40px #00AAffAA;
}

.portfolio a:hover {
    text-shadow:
        0 0 4px #66ccffAA,
        0 0 11px #66ccffAA,
        0 0 19px #66ccffAA,
        0 0 40px #66ccffAA;
}
.portfolio a:active {
    text-shadow:
        0 0 4px #ffffffAA,
        0 0 11px #ffffffAA,
        0 0 19px #ffffffAA,
        0 0 40px #ffffffAA;
}

.portfolio::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    /* Horizontal scanlines: 1px dark + 1px transparent, tiled every 2px */
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    /* RGB subpixel: 3px-wide R/G/B tint columns */
    linear-gradient(90deg, rgba(255, 0, 0, 0.08), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ── Site header (sticky top bar) ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    padding: 0.75rem 2rem 0.75rem 5px;
    align-items: center;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.header-logo {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    padding: 0.4rem;
    align-self: center;
    cursor: pointer;
}

.triskelion-glow {
    display: inline-block;
    line-height: 0;
    transform: translate(3%, 2%); /* visual recentering within corner-bracket frame */
    filter:
        drop-shadow(0 0 3px rgba(57, 255, 20, 0.5))
        drop-shadow(0 0 8px rgba(57, 255, 20, 0.5))
        drop-shadow(0 0 18px rgba(57, 255, 20, 0.35))
        drop-shadow(0 0 40px rgba(57, 255, 20, 0.2));
}

.triskelion {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    background-color: #83ff6e;
    -webkit-mask: url('/images/logos/triskele.svg') center / contain no-repeat;
    mask: url('/images/logos/triskele.svg') center / contain no-repeat;
    transform-origin: 50% 50%;
}

@keyframes triskele-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes triskele-spin-fast {
    from { transform: rotate(0deg); }
    to   { transform: rotate(1440deg); }
}

/* Hover-spin handled in JS for friction-stop on mouseleave */

.triskelion.spinning,
.header-logo:hover .triskelion.spinning {
    animation: triskele-spin-fast 2.4s cubic-bezier(0.12, 0.7, 0.25, 1);
}

/* Corner brackets framing the logo, matching .project-section::before */
.header-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.8;
    background:
        linear-gradient(to right,  #39FF14, #39FF14) top left     / 14px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) top left     / 2px 14px no-repeat,
        linear-gradient(to right,  #39FF14, #39FF14) top right    / 14px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) top right    / 2px 14px no-repeat,
        linear-gradient(to right,  #39FF14, #39FF14) bottom left  / 14px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) bottom left  / 2px 14px no-repeat,
        linear-gradient(to right,  #39FF14, #39FF14) bottom right / 14px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) bottom right / 2px 14px no-repeat;
    filter:
        drop-shadow(0 0 3px #39FF14)
        drop-shadow(0 0 8px rgba(57, 255, 20, 0.7));
    transition: top 220ms ease-out, right 220ms ease-out, bottom 220ms ease-out, left 220ms ease-out;
}
.header-logo:hover::before {
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
}
@media (prefers-reduced-motion: reduce) {
    .header-logo::before { transition: none; }
    .header-logo:hover::before { top: 0; right: 0; bottom: 0; left: 0; }
}

.header-name-row {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 0 0.5rem 0;
}

.header-name-row::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #39FF14;
    filter:
        drop-shadow(0 0 2px #39FF14)
        drop-shadow(0 0 5px #39FF14)
        drop-shadow(0 0 10px rgba(57, 255, 20, 0.6));
}

.header-name {
    margin: 0;
    font-family: 'Xanh Mono', 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-align: left;
    padding-left: 0;
}

.header-contacts {
    display: flex;
    gap: 0.85rem;
    font-size: 0.95rem;
}

.header-contacts a {
    text-decoration: none;
}

.header-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    font-family: 'JetBrains Mono', monospace;
}

.status-available {
    display: inline-flex;
    align-items: center;
    color: #83ff6e;
    letter-spacing: 0.05em;
}

.status-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: #00AAff;
    margin-right: 0.45rem;
    box-shadow:
        0 0 4px #00AAff,
        0 0 8px rgba(0, 170, 255, 0.7);
    animation: status-pulse 2.4s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% {
        box-shadow:
            0 0 4px #00AAff,
            0 0 8px rgba(0, 170, 255, 0.7);
    }
    50% {
        box-shadow:
            0 0 6px #00AAff,
            0 0 14px rgba(0, 170, 255, 0.9),
            0 0 22px rgba(0, 170, 255, 0.4);
    }
}

.status-location {
    display: inline-flex;
    align-items: center;
    color: #83ff6e;
    letter-spacing: 0.05em;
}

.status-pin {
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.35rem;
    color: #FFB000;
    filter:
        drop-shadow(0 0 3px #FFB000)
        drop-shadow(0 0 6px rgba(255, 176, 0, 0.6));
}

.blog-link {
    text-decoration: none;
}

.header-subtitle-row {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0.35rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.header-subtitle {
    font-size: 1rem;
    opacity: 0.85;
    letter-spacing: 0.02em;
    font-family: 'JetBrains Mono', monospace;
    font-style: italic;
}

/* ── Page footer (text sits at very bottom of page; #bottom-buffer above
   handles the dynamic spacing that makes Contact scroll to top of viewport) ── */
.page-footer {
    grid-column: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 1.5rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    opacity: 0.55;
}

/* Bottom buffer: dynamic-height spacer that lets #contact scroll to the
   top of the viewport at max scroll. Height set by JS. */
#bottom-buffer {
    grid-column: 2;
}

.page-footer p {
    margin: 0;
}

/* ── Sidebar tabs (vertical, Dust-514-inspired) ── */
.sidebar-tabs {
    grid-column: 1;
    justify-self: end;
    position: sticky;
    top: 7rem;
    align-self: start;
    width: var(--sidebar-width);
    padding: 0 0 0 5px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-shadow: none;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    box-sizing: border-box;
}

.sidebar-tab {
    display: block;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(57, 255, 20, 0.35);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: #000;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
    position: relative;
}

.sidebar-tab:hover {
    border-color: rgba(57, 255, 20, 0.7);
}

.sidebar-tab.active {
    border-color: #39FF14;
    border-right: none;
    box-shadow:
        inset 0 0 12px rgba(57, 255, 20, 0.12),
        -2px 0 10px rgba(57, 255, 20, 0.18);
}

/* Override .portfolio a styling for sidebar tabs (no blue, no big text-shadow) */
.portfolio .sidebar-tab {
    color: rgba(131, 255, 110, 0.5);
    text-shadow: none;
}

.portfolio .sidebar-tab:hover {
    color: #a8ff98;
    text-shadow: none;
}

.portfolio .sidebar-tab.active {
    color: #83ff6e;
}

.portfolio .sidebar-tab:active {
    text-shadow: none;
}

/* ── Section anchors: offset for sticky header ── */
.project-section,
.page-section {
    scroll-margin-top: 7rem;
}

.page-section + .page-section {
    margin-top: 5rem;
}

/* .page-section:not(:last-child) {
    border-bottom: 1px solid rgba(57, 255, 20, 0.25);
    padding-bottom: 1rem;
} */


.project-section,
.skills-section,
.contact-block,
.bio-block,
.education-entry,
.experience-entry {
    position: relative;
    padding: 2rem;
}

.project-section,
.skills-section,
.contact-block,
.bio-block,
.education-entry,
.experience-entry {
    border: 1px solid rgba(57, 255, 20, 0.22);
    box-shadow:
        inset 0 0 18px rgba(57, 255, 20, 0.04),
        0 0 6px rgba(57, 255, 20, 0.12);
}

.project-section + .project-section,
.education-entry + .education-entry,
.experience-entry + .experience-entry {
    margin-top: 1.5rem;
}

/* ── Title glitch on hover ── */
.project-section > h2:hover {
    animation: title-glitch 280ms steps(5, end);
}
@keyframes title-glitch {
    0%, 100% {
        text-shadow:
            0 0 3px #39FF14DD,
            0 0 10px #39FF1499,
            0 0 30px #39FF1433;
    }
    20% {
        text-shadow:
            -2px 0 0 #ff0040,
            2px 0 0 #00e6ff,
            0 0 3px #39FF14DD,
            0 0 10px #39FF1499;
    }
    40% {
        text-shadow:
            2px 0 0 #ff0040,
            -2px 0 0 #00e6ff,
            0 0 3px #39FF14DD,
            0 0 10px #39FF1499;
    }
    60% {
        text-shadow:
            -1px 0 1px #ff0040,
            1px 0 1px #00e6ff,
            0 0 3px #39FF14DD;
    }
    80% {
        text-shadow:
            1px 0 0 #ff0040,
            -1px 0 0 #00e6ff,
            0 0 3px #39FF14DD,
            0 0 10px #39FF1499;
    }
}
@media (prefers-reduced-motion: reduce) {
    .project-section > h2:hover { animation: none; }
}

.project-section::before,
.skills-section::before,
.contact-block::before,
.bio-block::before,
.education-entry::before,
.experience-entry::before {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    opacity: 0.8;
    background:
        linear-gradient(to right,  #39FF14, #39FF14) top left     / 28px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) top left     / 2px 28px no-repeat,
        linear-gradient(to right,  #39FF14, #39FF14) top right    / 28px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) top right    / 2px 28px no-repeat,
        linear-gradient(to right,  #39FF14, #39FF14) bottom left  / 28px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) bottom left  / 2px 28px no-repeat,
        linear-gradient(to right,  #39FF14, #39FF14) bottom right / 28px 2px no-repeat,
        linear-gradient(to bottom, #39FF14, #39FF14) bottom right / 2px 28px no-repeat;
    filter:
        drop-shadow(0 0 3px #39FF14)
        drop-shadow(0 0 8px rgba(57, 255, 20, 0.7));
}

.project-section::before,
.skills-section::before,
.contact-block::before,
.bio-block::before,
.education-entry::before,
.experience-entry::before {
    transition: top 220ms ease-out, right 220ms ease-out, bottom 220ms ease-out, left 220ms ease-out;
}
.project-section:hover::before,
.skills-section:hover::before,
.contact-block:hover::before,
.bio-block:hover::before,
.education-entry:hover::before,
.experience-entry:hover::before {
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
}
@media (prefers-reduced-motion: reduce) {
    .project-section::before,
    .skills-section::before,
    .contact-block::before,
    .bio-block::before,
    .education-entry::before,
    .experience-entry::before { transition: none; }
    .project-section:hover::before,
    .skills-section:hover::before,
    .contact-block:hover::before,
    .bio-block:hover::before,
    .education-entry:hover::before,
    .experience-entry:hover::before { top: -1px; right: -1px; bottom: -1px; left: -1px; }
}

/* ── Static glassy sheen on hovered cards + active sidebar tab ── */
.project-section::after,
.skills-section::after,
.contact-block::after,
.bio-block::after,
.education-entry::after,
.experience-entry::after,
.sidebar-tab::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(200, 255, 190, 0.09) 0%,
        rgba(200, 255, 190, 0.035) 28%,
        transparent 55%,
        rgba(0, 0, 0, 0.04) 100%
    );
    box-shadow: inset 0 1px 0 rgba(220, 255, 220, 0.20);
    opacity: 0;
    transition: opacity 220ms ease-out;
}
.project-section:hover::after,
.skills-section:hover::after,
.contact-block:hover::after,
.bio-block:hover::after,
.education-entry:hover::after,
.experience-entry:hover::after,
.sidebar-tab.active::after {
    opacity: 1;
}
/* Stronger sheen on sidebar tabs */
.sidebar-tab::after {
    background: linear-gradient(
        to bottom,
        rgba(200, 255, 190, 0.18) 0%,
        rgba(200, 255, 190, 0.095) 40%,
        rgba(200, 255, 190, 0.02) 70%,
        rgba(0, 0, 0, 0.06) 100%
    );
    box-shadow: inset 0 1px 0 rgba(220, 255, 220, 0.55);
}
@media (prefers-reduced-motion: reduce) {
    .project-section::after,
    .skills-section::after,
    .contact-block::after,
    .bio-block::after,
    .education-entry::after,
    .experience-entry::after,
    .sidebar-tab::after { transition: none; }
}

/* ── Saira override for prose body text ── */
#bio p,
#contact > p,
.project-body p,
#experience ul li {
    font-family: 'Saira', sans-serif;
}

/* ── Education entry layout ── */
.education-entry {
    display: flex;
    flex-direction: row-reverse;
    gap: 2rem;
    align-items: flex-start;
}

.education-seal {
    flex: 0 0 auto;
    text-align: center;
}

.berkeley-seal {
    width: 140px;
    height: auto;
    display: block;
}

.bcc-seal {
    width: 140px;
    height: auto;
    display: block;
}

/* ── Experience entry layout (mirrors education) ── */
.experience-entry {
    display: flex;
    flex-direction: row-reverse;
    gap: 2rem;
    align-items: flex-start;
}

.experience-seal {
    flex: 0 0 auto;
    text-align: center;
}

.experience-body {
    flex: 1 1 auto;
    min-width: 0;
}

.mm-seal,
.bcc-ee-club-seal,
.nersc-seal,
.dataannotation-seal {
    width: 140px;
    height: auto;
    display: block;
}

.seal-caption {
    margin: 0.6rem 0 0 0;
    font-style: italic;
    text-align: center;
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    color: #f5c83a;
    text-shadow:
        0 0 4px rgba(245, 200, 58, 1),
        0 0 12px rgba(245, 200, 58, 0.85),
        0 0 28px rgba(245, 200, 58, 0.55),
        0 0 60px rgba(234, 179, 21, 0.3);
}

.education-body {
    flex: 1 1 auto;
}

/* ── Bio expand/collapse ── */
.bio-block {
    padding-bottom: 3.2rem;
}

.bio-block::before {
    filter:
        drop-shadow(0 0 3px #39FF14)
        drop-shadow(0 0 8px rgba(57, 255, 20, 0.7))
        drop-shadow(0 0 22px rgba(57, 255, 20, 0.3));
}

/* Bottom-anchored fade applied in both states so toggling collapse doesn't
   snap a mask in/out (mask-image isn't smoothly transitionable). In the
   collapsed state this masks the cropped text; in the expanded state it
   gives the bio a soft ending into the page bg. */
.bio-content {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 5em);
            mask-image: linear-gradient(to top, transparent 0, #000 5em);
}

.bio-block.bio-collapsed .bio-content {
    max-height: 14em;
    overflow: hidden;
    transition: max-height 450ms ease;
}

.bio-block:not(.bio-collapsed) .bio-content {
    max-height: 200em;
    transition: max-height 600ms ease;
}

.bio-fade {
    display: none;
}

.bio-expand {
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(57, 255, 20, 0.35);
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    color: #83ff6e;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-shadow:
        0 0 3px #39FF14DD,
        0 0 10px #39FF1499,
        0 0 30px #39FF1433;
    padding: 0.35rem 0.9rem;
    transition: color 180ms ease, text-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.bio-expand:hover {
    color: #a8ff98;
    border-color: rgba(131, 255, 110, 0.65);
    background-color: rgba(57, 255, 20, 0.06);
    text-shadow:
        0 0 4px #83ff6eFF,
        0 0 12px #83ff6eAA,
        0 0 36px #83ff6e55;
}

@media (prefers-reduced-motion: reduce) {
    .bio-block.bio-collapsed .bio-content,
    .bio-block:not(.bio-collapsed) .bio-content {
        transition: none;
    }
}

/* ── Coursework lists (multi-column for compactness) ── */
.coursework-label {
    margin: 0.6rem 0 0.3rem 0;
    opacity: 0.85;
}

.coursework-list {
    column-count: 2;
    column-gap: 2rem;
    margin: 0;
    padding-left: 1.2rem;
    list-style-type: disc;
}

.coursework-list li {
    break-inside: avoid;
    margin: 0 0 0.15rem 0;
}

@media (max-width: 700px) {
    .coursework-list { column-count: 1; }
}


/* ── Project row layout ── */
.project-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
    margin: 2rem 0;
}
.project-row .project-media { grid-column: 1; grid-row: 1; }
.project-row .project-body  { grid-column: 2; grid-row: 1; }
.project-row.flip .project-media { grid-column: 2; grid-row: 1; }
.project-row.flip .project-body  { grid-column: 1; grid-row: 1; }

/* ── Wrap variant: media floats to one side, body text flows beside AND
   underneath it. Use when the body is taller than the media and the column
   under the media would otherwise be empty. Opt-in per row via class. ── */
.project-row.project-row--wrap {
    display: block;
}
.project-row.project-row--wrap::after {
    content: '';
    display: block;
    clear: both;
}
.project-row.project-row--wrap .project-media {
    float: left;
    width: calc(50% - 1.25rem);
    margin: 0 2.5rem 1rem 0;
}
.project-row.project-row--wrap.flip .project-media {
    float: right;
    margin: 0 0 1rem 2.5rem;
}
/* Per-media-type bottom-margin tuning for wrap variant.
   Video has no player chrome, so under-wrap text needs more breathing room.
   Iframe (YouTube) has player chin that already adds visual buffer below the
   real video content, so less margin keeps it balanced with video sections. */
.project-row.project-row--wrap .project-media:has(video) {
    margin-bottom: 2rem;
}
.project-row.project-row--wrap .project-media:has(iframe) {
    margin-bottom: 0.25rem;
}
.project-row.project-row--wrap .project-body {
    display: block;
}
.project-row.project-row--wrap .project-body > * + * {
    margin-top: 1rem;
}

.project-media img,
.project-media video,
.project-media iframe {
    width: 100%;
    display: block;
    box-sizing: border-box;
    outline: 1px solid rgba(57, 255, 20, 0.5);
    box-shadow:
        0 0 6px rgba(57, 255, 20, 0.45),
        0 0 16px rgba(57, 255, 20, 0.25),
        0 0 36px rgba(57, 255, 20, 0.10);
}
.project-media img,
.project-media video {
    height: auto;
}
.project-media iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.project-body {
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 1rem;
}

.project-media {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.media-caption {
    margin: -0.5rem 0 0 0;
    align-self: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    color: #83ff6e;
    opacity: 0.65;
    letter-spacing: 0.05em;
}

/* ── DreadReign banner (wordmark inside project-media; no outline/glow frame) ── */
.project-media img.dreadreign-banner {
    outline: none;
    box-shadow: none;
}

/* ── Metadata key-value block ── */
.project-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1.25rem;
    font-size: 0.9rem;
    margin: 0;
}
.project-meta .k {
    color: #83ff6e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.project-meta .k::after { content: ':'; }

/* ── Project hook line ── */
.project-hook {
    margin: 0.25rem 0 1rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
    font-style: italic;
    color: #83ff6e;
    letter-spacing: 0.02em;
    text-shadow:
        0 0 4px rgba(57, 255, 20, 0.45),
        0 0 12px rgba(57, 255, 20, 0.2);
}

/* ── Project links (sits inside .project-meta) ── */
.project-links-v {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.action-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-decoration: none;
}

/* ── Project tags ── */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0 0;
}
.project-tags .tag {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border: 1px solid #eab315;
    color: #eab315;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    cursor: default;
    text-shadow:
        0 0 3px rgba(234, 179, 21, 0.6),
        0 0 8px rgba(234, 179, 21, 0.35);
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        text-shadow 180ms ease,
        box-shadow 180ms ease;
}
.project-tags .tag.cross-highlight {
    color: #ffd84a;
    border-color: #ffd84a;
    background-color: rgba(234, 179, 21, 0.12);
    text-shadow:
        0 0 4px #eab315,
        0 0 10px rgba(234, 179, 21, 0.85),
        0 0 18px rgba(234, 179, 21, 0.5);
    box-shadow:
        0 0 4px rgba(234, 179, 21, 0.5),
        0 0 10px rgba(234, 179, 21, 0.3);
}

/* ── Skills grid: 3 columns side-by-side, collapses on narrow screens ── */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
}

/* ── Skills list ── */
.skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0.75rem 0 1.5rem 0;
    list-style: none;
}
.skill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
}
.skill-logo {
    display: inline-block;
    width: 1.7em;
    height: 1.7em;
    background-color: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
    flex-shrink: 0;
    filter:
        drop-shadow(0 0 3px #39FF14DD)
        drop-shadow(0 0 8px #39FF1499);
}

/* ── Seal click toast ── */
.seal-toast {
    position: fixed;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: #FFB000;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow:
        0 0 4px #FFB000,
        0 0 10px rgba(255, 176, 0, 0.7),
        0 0 22px rgba(255, 176, 0, 0.35);
    z-index: 1000;
    animation: seal-toast-float 1000ms ease-out forwards;
}

@keyframes seal-toast-float {
    0%   { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, calc(-100% - 80px)); }
}

/* ── Terminal line + blinking cursor ── */
.terminal-line {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    color: #83ff6e;
    font-size: 1.33rem;
    line-height: 1;
    margin: 3rem 0 2rem 0;
    text-shadow:
        0 0 3px #39FF14DD,
        0 0 10px #39FF1499,
        0 0 30px #39FF1433;
    user-select: none;
}

.terminal-text {
    white-space: pre;
}

.terminal-cursor {
    animation: cursor-blink 1.06s infinite;
}

.terminal-cursor.solid {
    animation: none;
    opacity: 1;
}

@keyframes cursor-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .header-logo:hover .triskelion,
    .triskelion.spinning,
    .terminal-cursor,
    .status-dot {
        animation: none;
    }
    .terminal-cursor { opacity: 1; }
    .seal-toast { animation: seal-toast-float-static 700ms ease-out forwards; }
}

@keyframes seal-toast-float-static {
    0%   { opacity: 0; transform: translate(-50%, calc(-100% - 12px)); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, calc(-100% - 12px)); }
}

/* ── Nova orbital stack (hover-animated rings) ──
   All layer PNGs share the same canvas dimensions and content is positioned
   in Procreate (rings centered, ships at their orbital position with pivot
   built in). Stack them all at the same size = aligned automatically. Each
   .layer rotates around its own center; ship classes pair speed+direction
   with the ring they sit on so they appear to travel together. */
.nova-orbit-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    outline: 1px solid rgba(57, 255, 20, 0.5);
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.45);
    overflow: hidden;
}
.nova-orbit-stack .layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    box-shadow: none;
    transform-origin: 50% 50%;
}
.nova-orbit-stack .layer[class*="orbit-"] {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    will-change: transform;
}
.nova-orbit-stack .spin-cw  { animation-name: nova-spin-cw;  }
.nova-orbit-stack .spin-ccw { animation-name: nova-spin-ccw; }
/* Inner orbits rotate faster than outer (Kepler-ish). To tune, change one
   duration here - class is shared by the ring AND the ship(s) on that ring. */
.nova-orbit-stack .orbit-1 { animation-duration: 12s; }
.nova-orbit-stack .orbit-2 { animation-duration: 20s; }
.nova-orbit-stack .orbit-3 { animation-duration: 32s; }
.nova-orbit-stack .orbit-4 { animation-duration: 48s; }

/* Hover trigger */
.project-media:hover .nova-orbit-stack .layer[class*="orbit-"] {
    animation-play-state: running;
}

.nova-hover-hint {
    align-self: center;
    width: max-content;
    margin: 0.4rem 0 0;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: rgba(57, 255, 20, 0.55);
    transition: color 220ms ease, opacity 220ms ease;
}

.project-media:hover .nova-hover-hint {
    opacity: 0;
}

/* Hide hint on touch (already auto-spinning) and reduced-motion (no animation) */
@media (hover: none) {
    .nova-hover-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nova-hover-hint { display: none; }
}

/* Touch (no hover): keep them gently rotating always, slowed 2× */
@media (hover: none) {
    .nova-orbit-stack .layer[class*="orbit-"] { animation-play-state: running; }
    .nova-orbit-stack .orbit-1 { animation-duration: 24s; }
    .nova-orbit-stack .orbit-2 { animation-duration: 40s; }
    .nova-orbit-stack .orbit-3 { animation-duration: 64s; }
    .nova-orbit-stack .orbit-4 { animation-duration: 96s; }
}

/* Reduced motion: never animate */
@media (prefers-reduced-motion: reduce) {
    .nova-orbit-stack .layer { animation: none !important; }
}

@keyframes nova-spin-cw  { to { transform: rotate( 360deg); } }
@keyframes nova-spin-ccw { to { transform: rotate(-360deg); } }

/* ── Responsive: ~960px (half-1080p, common recruiter narrow case) ──
   At this width 2-col project-rows squeeze videos too tight, and 3-col skills
   feel cramped. Stack rows, flip skills grid (rows of subsections, items wrap
   within), and float experience/education seals so text wraps around them. */
@media (max-width: 1024px) {
    .project-row,
    .project-row.flip {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .project-row .project-media,
    .project-row.flip .project-media,
    .project-row .project-body,
    .project-row.flip .project-body {
        grid-column: 1;
    }
    .project-row.project-row--wrap .project-media,
    .project-row.project-row--wrap.flip .project-media {
        float: none;
        width: 100%;
        margin: 0 0 1rem 0;
    }
    .skills-grid {
        grid-template-columns: 1fr;
    }
    .skills-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }
    .education-entry,
    .experience-entry {
        display: block;
    }
    .education-seal,
    .experience-seal {
        float: right;
        margin: 0 0 1rem 1.5rem;
    }
}

/* ── Responsive: stack on narrow screens ── */
@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;
    }
    .sidebar-tabs {
        display: none;
    }
    .main-content {
        grid-column: 1;
        max-width: 100%;
    }
}