:root {
    --lava: #FF4500;
    --lava-deep: #C83200;
    --lava-hot: #FF6A00;
    --lava-glow: #FF8C00;
    --lava-ember: #FF2200;
    --obsidian: #0A0A0B;
    --obsidian-2: #111114;
    --obsidian-3: #18181C;
    --obsidian-4: #222228;
    --ash: #888894;
    --ash-light: #AAAAB8;
    --white: #F5F3EE;
    --white-dim: rgba(245, 243, 238, 0.7);
    --white-ghost: rgba(245, 243, 238, 0.1);
    --lava-alpha: rgba(255, 69, 0, 0.15);
    --lava-alpha-strong: rgba(255, 69, 0, 0.3);
    --mint: #22C55E;
    --mint-alpha: rgba(34, 197, 94, 0.15);
    --mint-alpha-strong: rgba(34, 197, 94, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--obsidian);
    color: var(--white);
    overflow-x: hidden;
}

/* Screen-reader-only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Custom cursor is opt-in via a JS-toggled class, not a blanket
   `cursor: none`, so a blocked/broken script.js never leaves the
   page with no visible cursor at all. */
body.cursor-ready {
    cursor: none;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--white-ghost);
    background: var(--obsidian-3);
    color: var(--lava);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, box-shadow 0.2s ease, border-color 0.2s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    border-color: var(--lava);
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.35);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 600px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* Custom cursor */
.cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    background: var(--lava);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s;
}

.cursor-trail {
    position: fixed;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 2px solid var(--lava);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--lava-alpha-strong);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.12s ease;
}

/* Ambient background: a static grain texture plus a soft lava-orange
   glow that tracks scroll position via --glow-y (set in script.js).
   Both layers sit fixed and behind all content, on top of the plain
   --obsidian base color painted on body. */
.bg-grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.08;
    --glow-y: 50vh;
    background: radial-gradient(60vmax 60vmax at 50% var(--glow-y), var(--lava) 0%, transparent 70%);
}

.ember-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Links/buttons show a pointer cursor by default — override to none
   on all of them so the custom cursor above stays visible, but only
   once cursor-ready confirms the custom cursor is actually running */
body.cursor-ready .lang-switch,
body.cursor-ready .btn-primary,
body.cursor-ready .btn-ghost,
body.cursor-ready .form-submit {
    cursor: none;
}

/* Keyboard focus — themed to match the lava accent instead of the
   browser default, since the custom cursor removes the usual mouse
   affordance entirely */
a:focus-visible,
button:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible {
    outline: 2px solid var(--lava);
    outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: var(--obsidian);
}

::-webkit-scrollbar-thumb {
    background: var(--lava);
    border-radius: 2px;
}

/* NAV */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.2rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--white-ghost);
}

.nav-logo img {
    width: 130px;
    height: auto;
    display: block;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

.nav-links a {
    font-size: 0.85rem;
    color: var(--ash-light);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--lava);
}

.lang-switch {
    background: transparent;
    border: 1px solid var(--white-ghost);
    color: var(--ash-light);
    padding: 0.4rem 0.8rem;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.lang-switch:hover {
    border-color: var(--lava);
    color: var(--white);
}

/* Hamburger toggle — hidden on desktop, shown only at the mobile
   breakpoint where .nav-links becomes a dropdown panel. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--white-ghost);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.nav-toggle:hover {
    border-color: var(--lava);
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--white);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* HERO */
.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0 5rem;
    gap: 4rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(255, 69, 0, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lava);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: var(--lava);
}

.hero-welcome {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 6.5vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.06em;
    margin-bottom: 1.5rem;
    color: var(--white);
}

/* The one deliberate serif accent on the page: DM Serif Display was
   already being downloaded (font import in <head>) but never used
   anywhere, so this breaks up the all-geometric-sans look for free
   instead of just being unused weight on the page. */
.hero-welcome .lava-word {
    color: var(--lava);
    position: relative;
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    letter-spacing: 0.01em;
}

.hero-welcome .letter {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-desc {
    font-size: 1.05rem;
    color: var(--ash-light);
    line-height: 1.7;
    max-width: 460px;
    margin-bottom: 2.5rem;
}

.hero-cta {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
}

.btn-primary {
    background: var(--lava);
    color: var(--white);
    padding: 0.85rem 2rem;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background 0.3s, transform 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--lava-hot);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--white);
    padding: 0.85rem 2rem;
    border: 1px solid var(--white-ghost);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-ghost:hover {
    border-color: var(--lava);
    color: var(--lava);
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--ash);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--lava), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

.more-projects {
    text-align: center;
    margin-top: 60px;
}

.more-projects .project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.more-projects .project-link:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.1);
}
/* HERO RIGHT */
.hero-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 100%;
}

.photo-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 420 / 540;
}

.photo-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid var(--lava-alpha-strong);
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a0800 0%, #2d0d00 40%, #1a0800 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    perspective: 1400px;
}

/* Cube shuffle: each photo is a face hinged at its own edge. At rest
   a photo sits rotated away on its right edge (invisible, edge-on) —
   .active swings it flat to face the viewer, which reads as the new
   photo turning in from the right. .prev swings the outgoing photo
   away on its left edge instead, so it turns off to the left. */
.photo-placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    transform-origin: right center;
    transform: rotateY(-90deg);
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 1;
}

.photo-placeholder img.active {
    transform: rotateY(0deg);
    z-index: 2;
}

.photo-placeholder img.prev {
    transform-origin: left center;
    transform: rotateY(90deg);
    z-index: 1;
}

/* Used only for one frame to snap an outgoing photo back to its
   resting pose without animating the reset back into view. */
.photo-placeholder img.no-transition {
    transition: none;
}

/* Fallback avatar for when every hero photo fails to load. Hidden by
   default (JS only reveals it if all photos error out) — real photos
   are always in the DOM, and leaving this visible let it show through
   during the crossfade whenever both slides were mid-transition. */
.photo-icon {
    display: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--lava-alpha);
    align-items: center;
    justify-content: center;
    border: 2px solid var(--lava-alpha-strong);
}

.photo-icon svg {
    width: 40px;
    height: 40px;
    fill: var(--lava);
    opacity: 0.7;
}

.photo-tag {
    position: absolute;
    bottom: 20px;
    left: -30px;
    background: var(--obsidian-3);
    border: 1px solid var(--lava-alpha-strong);
    padding: 0.75rem 1.25rem;
    z-index: 5;
}

.photo-tag-role {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lava);
    margin-bottom: 0.3rem;
}

.photo-tag-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
}

/* REPULSION TITLE */
.repulsion-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--white);
    position: relative;
    display: inline-block;
}

.repulsion-title .letter {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: default;
}

/* SECTION BASE */
section {
    padding: 7rem 5rem;
    position: relative;
}

.section-tag {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lava);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-tag::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--lava);
}

.section-divider {
    width: 100%;
    height: 1px;
    background: var(--white-ghost);
    margin: 0;
}

/* ABOUT */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
    margin-top: 3rem;
}

.about-bio {
    font-size: 1.05rem;
    color: var(--ash-light);
    line-height: 1.85;
    margin-top: 1.5rem;
}

.about-bio strong {
    color: var(--white);
}

/* ACADEMIC BACKGROUND — compact list, nested under the bio column */
.academics-block {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--white-ghost);
}

.academics-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.academics-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem;
}

.academics-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--white-ghost);
    transition: border-color 0.3s;
}

.academics-card:hover {
    border-color: var(--lava-alpha-strong);
}

.academics-year {
    flex: 0 0 auto;
    min-width: 4.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--lava);
    letter-spacing: 0.12em;
    line-height: 1.6;
}

.academics-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.academics-school {
    font-weight: 600;
    color: var(--white);
}

.academics-dept {
    font-size: 0.9rem;
    color: var(--ash);
    line-height: 1.6;
}

.jlpt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--mint-alpha-strong);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--mint);
}

.jlpt-icon {
    font-size: 1rem;
}

/* JOURNEY TIMELINE */
.journey-timeline {
    margin-top: 3.5rem;
    position: relative;
    padding-left: 2rem;
}

.journey-timeline::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--white-ghost);
}

.journey-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 2.5rem;
    position: relative;
}

.journey-item:last-child {
    padding-bottom: 0;
}

.journey-year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--lava);
    letter-spacing: 0.12em;
    line-height: 1;
}

.journey-content-title {
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.1rem;
}

.journey-content-desc {
    font-size: 0.9rem;
    color: var(--ash);
    line-height: 1.6;
}

.dot-marker {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 9px;
    height: 9px;
    background: var(--lava);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--lava);
    z-index: 2;
}

/* SKILLS */
.skills-bg {
    background: var(--obsidian-2);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1px;
    background: var(--white-ghost);
    margin-top: 3rem;
}

.skill-card {
    background: var(--obsidian-2);
    padding: 2rem;
    transition: background 0.3s;
    position: relative;
    overflow: hidden;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lava);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.skill-card:hover::before {
    transform: scaleX(1);
}

.skill-card:hover {
    background: var(--obsidian-3);
}

.skill-cat {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lava);
    margin-bottom: 0.5rem;
}

.skill-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1rem;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.skill-tag {
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
    background: var(--mint-alpha);
    color: var(--mint);
    letter-spacing: 0.05em;
}

.skill-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 1rem;
    stroke: var(--lava);
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skills-note {
    font-size: 0.9rem;
    color: var(--ash);
    margin-top: 0.75rem;
}

/* PROJECTS */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--white-ghost);
    margin-top: 3rem;
}

.project-card {
    background: var(--obsidian);
    padding: 2.5rem;
    position: relative;
    overflow: visible;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lava);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.project-card:hover::before {
    transform: scaleX(1);
}

.project-card:hover {
    background: var(--obsidian-3);
}

.project-card.featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: center;
}

.project-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ash);
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}

.project-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 0.75rem;
    letter-spacing: 0.03em;
    line-height: 1.15;
}

.project-desc {
    font-size: 0.92rem;
    color: var(--ash-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.project-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.stack-tag {
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--white-ghost);
    color: var(--ash);
    letter-spacing: 0.05em;
    transition: border-color 0.3s, color 0.3s;
}

.project-card:hover .stack-tag {
    border-color: var(--lava-alpha-strong);
    color: var(--white);
}

.project-link {
    font-size: 0.82rem;
    color: var(--lava);
    text-decoration: none;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s;
}

.project-link:hover {
    gap: 1rem;
}

.project-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.project-mockup {
    background: var(--obsidian-4);
    border: 1px solid var(--white-ghost);
    padding: 1.5rem;
    font-size: 0.88rem;
    font-family: monospace;
    color: var(--ash);
    line-height: 1.8;
    overflow-x: auto;
}

.code-line {
    margin: 0;
    white-space: nowrap;
}

.code-key {
    color: var(--lava-glow);
}

/* PROJECT DETAIL (extended write-ups on projextexp.html) */
.project-detail-list-wrap {
    margin-top: 3rem;
}

.project-detail {
    padding: 3.5rem 0;
}

.project-detail:first-of-type {
    padding-top: 0;
}

.project-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 1.5rem;
    align-items: start;
}

.project-detail-heading {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lava);
    margin: 1.5rem 0 0.75rem;
}

.project-detail-heading:first-child {
    margin-top: 0;
}

.project-detail-list {
    list-style: none;
}

.project-detail-list li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
    color: var(--ash-light);
    line-height: 1.6;
}

.project-detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    background: var(--lava);
    border-radius: 50%;
}

/* Always-visible scrollable code panel (projextexp.html project cards).
   Only .code-panel-body scrolls — the header stays put, and the panel's
   own height never grows the surrounding card. */
.code-panel {
    border: 1px solid var(--white-ghost);
    background: var(--obsidian-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.code-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--white-ghost);
    background: var(--obsidian-3);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ash-light);
    flex-shrink: 0;
}

.code-panel-header svg {
    width: 13px;
    height: 13px;
    stroke: var(--lava);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.code-panel-body {
    margin: 0;
    max-height: 230px;
    overflow-y: auto;
    overflow-x: auto;
    padding: 1rem 1.25rem;
}

.code-panel-body code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.65;
    background: transparent !important;
    white-space: pre;
}

.code-panel-body::-webkit-scrollbar {
    width: 8px;
}

.code-panel-body::-webkit-scrollbar-track {
    background: transparent;
}

.code-panel-body::-webkit-scrollbar-thumb {
    background: var(--lava-alpha-strong);
    border-radius: 4px;
}

/* Nudge highlight.js's atom-one-dark theme toward the site's lava accent */
.code-panel-body .hljs {
    background: transparent !important;
}

.code-panel-body .hljs-keyword,
.code-panel-body .hljs-built_in,
.code-panel-body .hljs-type {
    color: var(--lava-glow);
}

/* HABITS */
.habits-bg {
    background: var(--obsidian-2);
}

.habits-intro {
    font-size: 1.1rem;
    color: var(--ash-light);
    max-width: 600px;
    line-height: 1.7;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.habits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.habit-item {
    padding: 2rem;
    border: 1px solid var(--white-ghost);
    position: relative;
    transition: border-color 0.3s;
}

.habit-item:hover {
    border-color: var(--lava-alpha-strong);
}

.habit-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lava-alpha);
    margin-bottom: 1.25rem;
    color: var(--lava);
}

.habit-icon svg,
.contact-item-icon svg,
.jlpt-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.habit-icon svg {
    width: 20px;
    height: 20px;
}

.contact-item-icon svg {
    width: 18px;
    height: 18px;
}

.jlpt-icon svg {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

.habit-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.6rem;
}

.habit-desc {
    font-size: 0.88rem;
    color: var(--ash);
    line-height: 1.7;
}

.habit-freq {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mint);
    margin-top: 1rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--mint-alpha-strong);
}

/* CONTACT */
.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    margin-top: 3rem;
    align-items: start;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--white-ghost);
    text-decoration: none;
    transition: border-color 0.3s;
}

.contact-item:hover {
    border-color: var(--lava);
}

.contact-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lava-alpha);
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--lava);
}

.contact-item-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ash);
    margin-bottom: 0.2rem;
}

.contact-item-val {
    font-size: 0.92rem;
    color: var(--white);
}

/* FORM */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ash);
}

.form-input,
.form-textarea {
    background: var(--obsidian-3);
    border: 1px solid var(--white-ghost);
    color: var(--white);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
    transition: border-color 0.3s;
    outline: none;
    resize: none;
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--lava);
}

.form-textarea {
    height: 130px;
}

/* Honeypot: off-screen and out of the accessibility tree (aria-hidden
   on the wrapper, tabindex="-1" on the input) so real users — including
   screen-reader users — never encounter it, but bots that blind-fill
   every input still trip it. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-submit {
    background: var(--lava);
    color: var(--white);
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    transition: background 0.3s;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-submit:hover {
    background: var(--lava-hot);
}

.form-submit svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

/* FOOTER — three-column grid: logo pinned left, thank-you text
   truly centered on the bar, location pinned right. */
footer {
    padding: 2rem 5rem;
    border-top: 1px solid var(--white-ghost);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: 0.8rem;
    color: var(--ash);
    letter-spacing: 0.05em;
    gap: 1rem;
}

.footer-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    color: var(--lava);
    justify-self: start;
}

.footer-center {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.footer-greeting {
    font-size: 0.75rem;
    color: var(--lava);
    opacity: 0.8;
}

.footer-location {
    grid-column: 3;
    justify-self: end;
    text-align: right;
}

.lava-glow-text {
    text-shadow: 0 0 30px rgba(255, 69, 0, 0.4);
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Lava crack accent */
.crack-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--lava) 30%, var(--lava-hot) 50%, var(--lava) 70%, transparent 100%);
    opacity: 0.4;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    nav {
        padding: 1.2rem 2rem;
    }

    .nav-right {
        gap: 1.5rem;
    }

    .nav-links {
        gap: 1.5rem;
    }

    section {
        padding: 5rem 2rem;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-top: 8rem;
        min-height: auto;
    }

    .hero-right {
        justify-content: center;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .project-card.featured {
        grid-template-columns: 1fr;
    }

    .project-detail-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .habits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .form-submit {
        width: 100%;
        justify-content: center;
    }

    footer {
        padding: 2rem;
    }
}

/* Narrow screens and touch devices both lose the custom cursor —
   there's no mouse to track, so fall back to the normal one */
@media (max-width: 768px), (pointer: coarse) {
    body,
    .btn-primary,
    .btn-ghost,
    .form-submit,
    .lang-switch {
        cursor: default;
    }

    .cursor,
    .cursor-trail {
        display: none;
    }
}

@media (max-width: 768px) {
    nav {
        padding: 1rem 1.25rem;
    }

    .nav-logo img {
        width: 95px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-right {
        gap: 0.75rem;
    }

    /* nav stays position:fixed (set in the base rule), which makes it
       the containing block this dropdown panel positions against. */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--obsidian-2);
        border-bottom: 1px solid var(--white-ghost);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-links.open {
        max-height: 320px;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li:not(:last-child) a {
        border-bottom: 1px solid var(--white-ghost);
    }

    .nav-links a {
        display: block;
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }

    .hero {
        padding-top: 2rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .habits-grid {
        grid-template-columns: 1fr;
    }

    .academics-card {
        flex-direction: column;
        gap: 0.4rem;
    }
}

/* Respect OS-level motion preference: kill the auto-advancing hero
   carousel, the infinite glow/scroll pulses, letter-repulsion
   transitions, and scroll-reveal animation, and disable smooth
   anchor scrolling. Carousel autoplay is also gated in script.js. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .cursor,
    .cursor-trail {
        display: none;
    }

    .ember-canvas {
        display: none;
    }

    .project-card {
        transform: none !important;
    }
}