/* ============================================================
   Harshit Gindra — portfolio stylesheet
   Single source of truth. index.html must not inline styles.
   ============================================================ */

/* ---------- Design tokens: light (default) ---------- */
:root {
    --bg: #ffffff;
    --bg-alt: #f7f8fa;
    --bg-card: #ffffff;
    --bg-tint: #f3f5f9;
    --text: #16202e;
    --text-light: #5a6675;
    --text-muted: #8b95a3;
    --accent: #1d4ed8;
    --accent-light: #eaf0ff;
    --accent-contrast: #ffffff;
    --border: #e4e7ec;
    --border-strong: #d3d8e0;
    --timeline-line: #dfe3e9;
    --timeline-dot: #1d4ed8;
    --link: #1d4ed8;
    --nav-bg: rgba(255, 255, 255, 0.82);
    --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --card-shadow-hover: 0 10px 28px rgba(16, 24, 40, 0.1);
    --grid-line: rgba(22, 32, 46, 0.045);
    --hero-glow: rgba(29, 78, 216, 0.09);
    --focus-ring: #1d4ed8;

    --maxw: 940px;
    --nav-h: 62px;
    --radius: 12px;
    --radius-sm: 8px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Design tokens: dark ---------- */
[data-theme="dark"] {
    --bg: #0d1320;
    --bg-alt: #141c2b;
    --bg-card: #141c2b;
    --bg-tint: #1a2334;
    --text: #eef2f7;
    --text-light: #a8b3c2;
    --text-muted: #6f7d8e;
    --accent: #74a4fb;
    --accent-light: #1a2b47;
    --accent-contrast: #0d1320;
    --border: #26303f;
    --border-strong: #33404f;
    --timeline-line: #2b3648;
    --timeline-dot: #74a4fb;
    --link: #74a4fb;
    --nav-bg: rgba(13, 19, 32, 0.82);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.5);
    --grid-line: rgba(238, 242, 247, 0.045);
    --hero-glow: rgba(116, 164, 251, 0.11);
    --focus-ring: #74a4fb;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Offset anchor targets so headings clear the fixed nav */
    scroll-padding-top: calc(var(--nav-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: 16.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.25s ease, color 0.25s ease;
}

img { max-width: 100%; display: block; }
a { color: var(--link); }

/* Visible focus for keyboard users only */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip link — first tab stop */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 200;
    background: var(--accent);
    color: var(--accent-contrast);
    padding: 0.6rem 1rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; }

/* ============================================================
   Navigation
   ============================================================ */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    z-index: 100;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Border appears only once the page is scrolled (set by main.js) */
nav.scrolled { border-bottom-color: var(--border); }

.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 2rem;
    height: var(--nav-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.nav-name {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.nav-links { display: flex; gap: 1.4rem; align-items: center; }

.nav-links a {
    position: relative;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.2rem 0;
    transition: color 0.18s ease;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.2s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after,
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-links a[aria-current="true"] { color: var(--text); }

/* Theme toggle — inline SVG, inherits currentColor */
.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.theme-btn:hover { color: var(--accent); border-color: var(--border-strong); background: var(--bg-alt); }
.theme-btn svg { width: 16px; height: 16px; }
/* JS toggles which icon is shown; default state assumes light theme */
.theme-btn .icon-sun { display: none; }
[data-theme="dark"] .theme-btn .icon-sun { display: block; }
[data-theme="dark"] .theme-btn .icon-moon { display: none; }

/* Hamburger — mobile only */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    /* 44x44 minimum tap target, WCAG 2.5.5 */
    width: 44px; height: 44px;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: var(--text);
}
.hamburger span {
    display: block;
    width: 21px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    padding: 0.85rem 2rem;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease, color 0.15s ease;
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { background: var(--bg-alt); color: var(--accent); }

.mobile-drawer-theme {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 2rem;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    color: var(--text-light);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.mobile-drawer-theme:hover { background: var(--bg-alt); color: var(--accent); }
.mobile-drawer-theme svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   Hero
   ============================================================ */
.hero-wrapper {
    position: relative;
    overflow: hidden;
    /* 88svh leaves the fold full without stranding content in dead space
       on tall desktop displays; svh avoids the iOS Safari toolbar jump. */
    min-height: 88vh;
    min-height: 88svh;
    display: flex;
    align-items: center;
}

/* The hero's .container is a flex item, so without an explicit width it
   shrinks to fit its content and sits inboard of every other section's
   container. Force it to fill so all sections share one left edge. */
.hero-wrapper > .container { width: 100%; }

/* Subtle grid + one soft glow, replacing the animated blob decor */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    /* Fade the grid out toward the bottom so it does not fight the content */
    mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, #000 20%, transparent 100%);
}
.hero-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 70% 50% at 25% 30%, var(--hero-glow) 0%, transparent 70%);
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: calc(var(--nav-h) + 4rem) 0 4rem;
    width: 100%;
}

.hero-photo {
    flex-shrink: 0;
    width: 152px; height: 152px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-text h1 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(2.1rem, 5vw, 2.9rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 0.35rem;
}

.hero-role {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.9rem;
}

.hero-text .subtitle {
    font-size: 1.08rem;
    color: var(--text-light);
    max-width: 540px;
    margin-bottom: 1.6rem;
}

.hero-links { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.hero-links a {
    color: var(--link);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: opacity 0.18s ease;
}
.hero-links a:hover { opacity: 0.72; text-decoration: underline; }

.btn-resume {
    background: var(--accent);
    color: var(--accent-contrast) !important;
    padding: 0.5rem 1.05rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
.btn-resume:hover { opacity: 0.88; text-decoration: none !important; }

/* Stat strip — quantified credibility, straight from the resume */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
    margin-top: 2.25rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border);
    max-width: 560px;
}
/* Source order is <dt> label then <dd> value, which a <dl> requires.
   column-reverse shows the value above the label without breaking validity. */
.hero-stats > div { display: flex; flex-direction: column-reverse; }

.stat-value {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}
.stat-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 1;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: color 0.18s ease;
}
.scroll-cue:hover { color: var(--accent); }
.scroll-cue svg { width: 14px; height: 14px; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   Sections
   ============================================================ */
section { padding: 5rem 0; border-top: 1px solid var(--border); }

.section-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.section-heading {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.45rem, 3.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}

.section-sub {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 2.75rem;
    max-width: 620px;
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: '';
    position: absolute;
    left: 5px; top: 10px; bottom: 4px;
    width: 1.5px;
    background: var(--timeline-line);
}

.timeline-entry { position: relative; margin-bottom: 2.75rem; }
.timeline-entry:last-child { margin-bottom: 0; }

.timeline-entry::before {
    content: '';
    position: absolute;
    left: -2rem; top: 9px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bg);
    border: 2.5px solid var(--timeline-dot);
}
.timeline-entry.current::before {
    background: var(--timeline-dot);
    animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 5px var(--accent-light); }
}

.entry-date {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.entry-title { font-size: 1.08rem; font-weight: 700; color: var(--text); margin: 0.15rem 0 0.1rem; }
.entry-org { font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.7rem; }

.entry-desc ul { list-style: none; padding: 0; }
.entry-desc li {
    position: relative;
    padding-left: 1.05rem;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.65;
}
.entry-desc li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.72em;
    width: 5px; height: 1.5px;
    background: var(--border-strong);
}
.entry-desc strong { color: var(--text); font-weight: 600; }

/* ============================================================
   Projects
   ============================================================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.4rem;
}

.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    box-shadow: var(--card-shadow);
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.2s ease;
}
.project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--border-strong);
}

/* Real app icon on a tinted plate, replacing emoji artwork */
.project-icon-wrap {
    height: 108px;
    background: var(--bg-tint);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-icon {
    width: 62px; height: 62px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16);
    transition: transform 0.28s var(--ease);
}
.project-card:hover .project-icon { transform: scale(1.06); }

.project-card-body {
    padding: 1.35rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.project-card-body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
}
.project-card-body p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1.1rem;
    flex-grow: 1;
}

.project-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
    background: var(--bg-alt);
    color: var(--text-light);
    padding: 0.18rem 0.55rem;
    border-radius: 5px;
    font-size: 0.71rem;
    font-weight: 500;
    border: 1px solid var(--border);
}

.project-link-row {
    padding: 0.8rem 1.35rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.project-link-row .arrow { transition: transform 0.2s var(--ease); }
.project-card:hover .project-link-row .arrow { transform: translateX(3px); }

/* ============================================================
   Skills
   ============================================================ */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 1rem;
}
.skill-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.2rem 1.4rem;
}
.skill-card h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.skill-card p { font-size: 0.89rem; color: var(--text-light); line-height: 1.6; }

/* ============================================================
   Education & Certifications
   ============================================================ */
.subsection-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.subsection-heading + .edu-grid { margin-bottom: 2.5rem; }

.edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.15rem;
}
.edu-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.4rem;
}
.edu-card h4 { font-size: 0.98rem; font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.edu-card p { font-size: 0.88rem; color: var(--text-light); }
.edu-card .edu-year { font-size: 0.79rem; color: var(--text-muted); margin-top: 0.35rem; }

/* Certification card: link out to the verifying issuer */
.cert-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.95rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
/* Official issuer badge art. flex-shrink:0 keeps it square while the text column
   absorbs the narrowing; min-width:0 on the body lets long titles wrap instead
   of forcing the card past the viewport edge. */
.cert-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.cert-body { min-width: 0; flex: 1; }
a.cert-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.cert-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.35rem;
}
/* Without min-width:0 the heading refuses to shrink and pushes the card
   wider than the viewport on small phones. */
.cert-top h4 { min-width: 0; }
.cert-verify {
    margin-top: 0.7rem;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--accent);
}

/* Status pill — states an in-progress cert honestly rather than implying it is earned */
.pill {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    background: var(--bg-alt);
}
.pill-progress { color: var(--accent); background: var(--accent-light); border-color: transparent; }

/* ============================================================
   Footer
   ============================================================ */
footer {
    padding: 2.75rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}
footer a { color: var(--text-light); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

.hero-animate { animation: heroIn 0.75s var(--ease) forwards; opacity: 0; }
.hero-animate-d1 { animation-delay: 0.1s; }
.hero-animate-d2 { animation-delay: 0.2s; }
.hero-animate-d3 { animation-delay: 0.3s; }
.hero-animate-d4 { animation-delay: 0.4s; }
@keyframes heroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }

    .hero-content {
        flex-direction: column;
        text-align: center;
        padding: calc(var(--nav-h) + 2.5rem) 0 3rem;
        gap: 1.5rem;
    }
    .hero-photo { width: 118px; height: 118px; }
    .hero-text .subtitle { margin-left: auto; margin-right: auto; }
    .hero-links { justify-content: center; }
    .hero-stats { justify-content: center; gap: 1.75rem; margin-left: auto; margin-right: auto; }
    .scroll-cue { display: none; }

    .projects-grid, .skills-grid, .edu-grid { grid-template-columns: 1fr; }
    section { padding: 3.5rem 0; }
}

@media (max-width: 380px) {
    .container, .nav-inner { padding: 0 1.15rem; }
    .mobile-menu a, .mobile-drawer-theme { padding-left: 1.15rem; padding-right: 1.15rem; }
    .hero-stats { gap: 1.25rem; }
    .timeline { padding-left: 1.5rem; }
    .timeline-entry::before { left: -1.5rem; }
}

/* ============================================================
   Reduced motion — honour the OS accessibility preference
   ============================================================ */
@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; }
    .hero-animate { opacity: 1; animation: none !important; }
    .scroll-cue svg { animation: none !important; }
    .timeline-entry.current::before { animation: none !important; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
    nav, .mobile-menu, .scroll-cue, .theme-btn, .hamburger, .btn-resume { display: none !important; }
    .reveal, .hero-animate { opacity: 1 !important; transform: none !important; }
    .hero-wrapper { min-height: auto; }
    body { font-size: 11pt; }
    a { color: inherit; text-decoration: none; }
    section { break-inside: avoid; }
}