/* === FONTS === */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

/* === TOKENS === */

:root {
    --bg: #050505;
    --fg: #ffffff;
    --muted: rgba(255, 255, 255, 0.6);
    --faint: rgba(255, 255, 255, 0.35);
    --line: rgba(255, 255, 255, 0.16);
    --panel: rgba(5, 5, 5, 0.92);
    --neon-violet: rgba(140, 110, 255, 0.55);
    --neon-cyan: rgba(90, 220, 255, 0.4);

    --font-display: 'Space Grotesk', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --font-body: 'Google Sans', sans-serif;
    --font-barcode: 'Libre Barcode 39', monospace;
}

/* === GLOBAL === */

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

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
}

p {
    font-family: var(--font-body);
}

h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2rem;
    letter-spacing: -0.01em;
}

h3 {
    font-family: var(--font-mono);
}

.section-note {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: -10px;
    margin-bottom: 20px;
}

.scroll-arrow {
    position: fixed;
    bottom: 24px;
    left: 50%;
    animation: bounce 1.5s infinite;
    color: var(--fg);
    opacity: 0.75;
    transition: opacity 0.4s ease;
    z-index: 90;
}

.scroll-arrow .material-symbols-outlined {
    font-size: 32px;
}

/* Background */
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./img/backgrounds/black_satin_sheets.jpeg');
    background-size: cover;
    filter: brightness(0.3) saturate(0.85);
    z-index: -1;
}

/* === HEADER === */

header {
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

header a {
    color: var(--fg);
    text-decoration: none;
}

header h1 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: opacity 0.2s ease;
}

.site-logo:hover h1 {
    opacity: 0.7;
}

/* Navigation */
nav ul {
    display: flex;
    list-style-type: none;
}

nav ul#menu {
    align-items: center;
    gap: 2px;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    padding: 10px 12px;
    display: inline-block;
}

.nav-item.current > a {
    border-bottom: 1px solid var(--fg);
}

.nav-caret {
    background: none;
    border: none;
    color: var(--faint);
    cursor: pointer;
    font-size: 0.55rem;
    padding: 0 6px 0 0;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.nav-caret .caret-icon {
    display: block;
}

.nav-item.open .nav-caret {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 6px 0;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown li a {
    display: block;
    padding: 9px 20px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.dropdown li a:hover {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.06);
}

.dropdown li a.pending {
    opacity: 0.5;
}

.soon-tag {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    border: 1px solid var(--faint);
    padding: 1px 5px;
    margin-left: 6px;
    text-transform: uppercase;
}

nav a:active {
    color: var(--muted);
}

/* === FOOTER === */

footer {
    width: 100%;
    padding: 0 4%;
    height: 46px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
}

.footer-credit {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer-links {
    display: flex;
    gap: 22px;
    list-style: none;
}

.footer-links a {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--muted);
}
/* the same links inside the phone menu (shown only in the PHONES block) */
.menu-footer-links {
    display: none;
}

/* === SCROLL-SPY LINE === */

.spy-line {
    position: fixed;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 90;
}

.spy-line::before {
    content: '';
    position: absolute;
    top: -22px;
    bottom: -22px;
    left: 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
    z-index: -1;
}

.spy-tick {
    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spy-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--faint);
    transition: all 0.25s ease;
}

.spy-tick.active .spy-dot {
    background: var(--fg);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.65);
}

.spy-line-compact {
    gap: 7px;
}

.spy-line-compact .spy-tick {
    width: 9px;
    height: 9px;
}

.spy-line-compact .spy-dot {
    width: 4px;
    height: 4px;
}

.spy-line-compact .spy-tick.active .spy-dot {
    width: 6px;
    height: 6px;
}

/* === EMBED PLACEHOLDER SLOTS === */

.embed-slot {
    border: 1px dashed var(--line);
    background: rgba(255, 255, 255, 0.03);
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.embed-slot h4 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
}

.embed-slot p {
    font-size: 0.82rem;
    color: var(--muted);
    max-width: 460px;
    line-height: 1.6;
}

.embed-fallback-link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--line);
    padding: 8px 18px;
    color: var(--fg);
    text-decoration: none;
}

.embed-fallback-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.embed-fallback-link[aria-disabled="true"] {
    opacity: 0.5;
}

.embed-grid {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin: 40px 0;
}

.embed-grid .embed-slot {
    flex: 1;
}

/* === LIVE SOCIAL / SITE EMBEDS === */

.social-embed {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    text-decoration: none;
    color: var(--fg);
    transition: background 0.3s ease, border-color 0.3s ease;
    width: fit-content;
}

.social-embed:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--fg);
}

.social-embed[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.social-embed-icon {
    width: 26px;
    height: 26px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
}

.social-embed-text h4 {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

.social-embed-text p {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-embed {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
}

.site-embed iframe {
    width: 100%;
    height: 460px;
    border: 0;
    display: block;
    background: #fff;
}

.site-embed-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.site-embed-caption a {
    color: var(--fg);
}

.site-embed video {
    width: 100%;
    display: block;
    background: #000;
}

/* === INTERACTIVE SLIDE VIEWER === */

.slide-viewer {
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    outline: none;
}

.slide-viewer-topbar {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.slide-viewer-body {
    padding: 30px;
    min-height: 320px;
    text-align: left;
}

.slide-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 16px;
}

.slide-images {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.slide-images img {
    max-width: 100%;
    max-height: 380px;
    border: 1px solid var(--line);
    object-fit: contain;
    background: #fff;
}

.slide-images.multi img {
    max-width: calc(50% - 6px);
    max-height: 260px;
}

.slide-text p {
    line-height: 1.7;
    margin-bottom: 10px;
    font-size: 0.92rem;
}

.slide-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    margin-bottom: 12px;
    font-size: 0.82rem;
}

.slide-table th,
.slide-table td {
    border: 1px solid var(--line);
    padding: 6px 10px;
    text-align: left;
}

.slide-table th {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.slide-viewer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px;
    border-top: 1px solid var(--line);
}

.slide-prev,
.slide-next {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    background: none;
    border: 1px solid var(--line);
    color: var(--fg);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

.slide-prev:hover:not(:disabled),
.slide-next:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.slide-prev:disabled,
.slide-next:disabled {
    opacity: 0.3;
    cursor: default;
}

.slide-viewer-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 320px;
    justify-content: center;
}

.slide-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--faint);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slide-dot.active {
    background: var(--fg);
    width: 9px;
    height: 9px;
}

.slide-viewer-wrap {
    margin: 0 auto 80px;
    text-align: center;
}

.embed-caption-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 12px;
    text-align: center;
}

.slide-viewer-download {
    display: inline-block;
    margin-top: 14px;
}

/* === NEON GALLERY ACCENT === */

.gallery-neon img {
    filter: grayscale(0.6) brightness(0.85) contrast(1.05);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.gallery-neon img:hover {
    filter: grayscale(0) saturate(1.4) brightness(1) contrast(1.1)
        drop-shadow(0 0 18px var(--neon-violet)) drop-shadow(0 0 10px var(--neon-cyan));
    transform: translateY(-4px);
}

/* === Introduction Page === */
.center_name {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center_name h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 5.5rem;
}

.about_me {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
    width: 70%;
    margin: 0 auto;
    margin-top: 120px;
}

.about_img img {
    width: 400px;
    height: 400px;
    border: 1px solid var(--line);
}

.about_txt h2 {
    margin-bottom: 15px;
}

.about_txt p {
    font-size: 15px;
    line-height: 1.7;
}

.about_txt .languages {
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.photoshoot {
    width: 70%;
    margin: 150px auto;
    text-align: center;
}

.photoshoot h2 {
    margin-bottom: 6px;
}

.photoshoot_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.photoshoot_grid img {
    width: 220px;
    height: 280px;
    object-fit: cover;
}

.upcoming_projects {
    width: 70%;
    margin: 150px auto;
    text-align: center;
}

.upcoming_projects h2 {
    margin-bottom: 40px;
}

.project1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.project1_txt {
    width: 450px;
    text-align: right;
}

.project1_txt h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.project1_txt p {
    font-size: 15px;
    line-height: 1.7;
}

.project1_img1 img {
    width: 450px;
    height: 250px;
    object-fit: cover;
}

/* === Education Page === */
.education .bg {
    background: url('./img/backgrounds/wavy_checkered_background.jpg');
    background-size: cover;
    filter: brightness(0.22) saturate(0.85);
}

.school {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 90px 5% 40px;
}

.school h2 {
    margin-bottom: 4px;
}

.school h3 {
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

.school_img {
    flex-shrink: 0;
}

.school_img img {
    width: 400px;
    height: 500px;
    object-fit: cover;
}

.school_info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.education p {
    line-height: 1.7;
    margin-top: 8px;
}

.course_section {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 120px;
}

.edu-tabs-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
}

.edu-tabs-buttons button {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: none;
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edu-tabs-buttons button.active {
    color: var(--fg);
    border-color: var(--fg);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.course_grp {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 80px;
}

.course_grp:last-child {
    margin-bottom: 0;
}

.course {
    flex: 1;
    max-width: 450px;
}

.course p {
    line-height: 1.7;
    margin-top: 8px;
}

.course_pics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 460px;
    height: 350px;
    overflow-y: scroll;
    scrollbar-width: none;
    flex-shrink: 0;
}

.course_pics img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin: 5px;
    box-sizing: border-box;
}

/* === Projects Page === */
.projects .bg {
    background: url('./img/backgrounds/curly_waves.jpeg');
    background-size: cover;
    filter: brightness(0.22) saturate(0.85);
}

.project_section {
    padding: 100px 5% 60px;
    max-width: 1100px;
    margin: 0 auto;
}

.projects h3 {
    font-weight: 400;
    line-height: 1.6;
}

.project_txt p {
    line-height: 1.75;
    max-width: 700px;
}

.project_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 40px;
}

.project_imggrp {
    text-align: center;
}

.project_imggrp img {
    display: inline-block;
    width: 240px;
    height: 240px;
    object-fit: cover;
    margin: 10px;
}

.video_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* four videos as a tidy 2 x 2 rather than three and a straggler */
.video_grid.two {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}
/* a row that is only partly filled keeps the same tile size instead of stretching across the page,
   and centres instead of hugging the left edge */
.video_grid.fill {
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
}
/* three per row, and a partial last row (e.g. 2 left over from 5) centres on its own line */
.video_grid.three {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.video_grid.three .video-slot {
    flex: 0 1 300px;
    max-width: 300px;
}
/* a recorded clip (not a YouTube frame) sits in the same 16:9 tile, with a small caption under it */
.video-slot video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
    object-fit: contain;
}
/* one phone video (9:16) shown on its own at a comfortable size */
.video_solo {
    max-width: 300px;
    margin: 0 auto;
}
.video_solo video {
    width: 100%;
    aspect-ratio: 9 / 16;
    display: block;
    background: #000;
    object-fit: contain;
}

.video-slot {
    width: 100%;
}

.video-slot iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

.video-slot.embed-slot {
    aspect-ratio: 16 / 9;
    justify-content: center;
}

.etsy-slot {
    margin-bottom: 40px;
}

/* === Volunteer Page === */
.volunteer .bg {
    background: url('./img/backgrounds/abstract_mountains.jpg');
    background-size: cover;
    filter: brightness(0.22) saturate(0.85);
}

.volunteer_sector {
    width: 70%;
    margin: 0 auto;
    padding-top: 60px;
    margin-bottom: 80px;
}

.volunteer_sector > h2 {
    text-align: center;
}

.volunteer_sector > p {
    margin-bottom: 50px;
}

.volunteer_sector > h3 {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 400;
}

.volunteer_sector > div:not(.event_intro) {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--line);
}

.volunteer_sector > div:last-of-type {
    border-bottom: none;
}

.event_intro {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 0 20px;
}

.event_intro h3 {
    font-weight: 400;
    line-height: 1.6;
}

.event_intro p {
    max-width: 700px;
    line-height: 1.2;
}

.event_name {
    text-align: left;
    margin-bottom: 8px;
    font-weight: 400;
}

.event_info {
    margin-bottom: 15px;
    text-align: left;
}

.event_pics {
    display: flex;
    flex-direction: row;
    gap: 15px;
    overflow-x: scroll;
    cursor: grab;
    scrollbar-width: none;
}

.event_pics img {
    height: 250px;
    width: 350px;
    object-fit: cover;
    flex-shrink: 0;
}

.volunteer_extras h2 {
    margin-bottom: 10px;
}

.volunteer_extras > p {
    text-align: center;
    margin-bottom: 30px;
}

.promo_gallery h3 {
    text-align: center;
    margin-bottom: 10px;
}

/* Sunflower field behind the Education content: keep the words readable */
body[data-bg="sunflowers"] .school_info,
body[data-bg="sunflowers"] .course_section {
    padding: 34px 40px;
    border-radius: 22px;
    background: rgba(3, 6, 6, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body[data-bg="sunflowers"] .course_section {
    margin-bottom: 80px;
    padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
    body[data-bg="sunflowers"] .school_info,
    body[data-bg="sunflowers"] .course_section {
        padding: 24px 16px;
        border-radius: 16px;
    }
}

/* === Work Experience Page === */
.work_experience .bg {
    background: url('./img/backgrounds/rain_puddles.jpeg');
    background-size: 110%;
    background-position: center;
    filter: brightness(0.22) saturate(0.85);
}

.experience {
    width: 70%;
    margin: 100px auto;
    text-align: center;
}

.experience img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.experience h2 {
    margin: 20px 0 8px 0;
}

.experience h3 {
    margin-bottom: 8px;
    font-weight: 400;
}

.experience p {
    margin-bottom: 20px;
}

.experience a {
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.experience ul {
    display: inline-block;
    max-width: 640px;
    text-align: left;
    font-family: var(--font-body);
    line-height: 1.7;
}

/* Storm behind the Work Experience content: keep the words readable */
body[data-bg="rain"] .experience {
    padding: 40px 44px 30px;
    border-radius: 20px;
    background: rgba(3, 5, 9, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
@media screen and (max-width: 768px) {
    body[data-bg="rain"] .experience {
        padding: 28px 18px 22px;
        width: 88%;
    }
}

.skills_section {
    width: 70%;
    margin: 60px auto 140px;
    text-align: center;
}

.skills_section h2 {
    margin-bottom: 30px;
}

.skill_grp {
    margin-bottom: 28px;
}

.skill_grp h4 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 12px;
}

.skill_tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.skill_tag {
    border: 1px solid var(--line);
    padding: 6px 16px;
    font-size: 0.8rem;
    border-radius: 999px;
}

body[data-bg="rain"] .skills_section {
    padding: 40px 44px;
    border-radius: 20px;
    background: rgba(3, 5, 9, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
@media screen and (max-width: 768px) {
    body[data-bg="rain"] .skills_section {
        padding: 28px 18px;
        width: 88%;
    }
}

.rain-hint,
.page-hint {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 62px;
    text-align: center;
    z-index: 40;
    padding: 0 16px;
    pointer-events: none;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.64rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--faint);
    color: var(--muted);
    text-shadow: 0 0 6px #000, 0 0 14px #000, 0 1px 2px #000;
    animation: rainHint 2.6s ease-in-out infinite;
    transition: opacity 0.8s ease;
}
@keyframes rainHint {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.75; }
}
.rain-hint.gone,
.page-hint.gone {
    opacity: 0;
    animation: none;
}

/* === Awards Page === */
.awards .bg {
    background: url('./img/backgrounds/paint_dots.jpg');
    background-size: cover;
    filter: brightness(0.22) saturate(0.85);
}

.award {
    min-height: 42vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 15%;
    gap: 22px;
    border-bottom: 1px solid var(--line);
}

.award:first-of-type {
    padding-top: 120px;
}

.award:last-of-type {
    border-bottom: none;
    padding-bottom: 100px;
}

.award_txt {
    max-width: 640px;
}

.award_txt h2 {
    margin-bottom: 10px;
}

.award h3 {
    margin-bottom: 15px;
    font-weight: 400;
}

.award p {
    line-height: 1.7;
    margin-bottom: 0;
}

.award_img {
    width: 100%;
    max-width: 340px;
}

.award_img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
}

/* Heartbeat behind the Awards content: keep the words readable without boxing them in */
body[data-bg="heartbeat"] .award_txt h2,
body[data-bg="heartbeat"] .award_txt h3,
body[data-bg="heartbeat"] .award_txt p {
    text-shadow: 0 0 6px #000, 0 0 16px #000, 0 2px 6px #000;
}

/* === MEDIA QUERIES === */
/* Not a priority this round — kept minimal so core nav/scroll functionality still works on small screens. */

.mobile-menu {
    display: none;
    color: var(--fg);
    font-size: 1.8rem;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .mobile-menu {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 300;
    }

    header {
        overflow: visible;
        position: fixed;
    }

    header nav {
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        gap: 10px;
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100%;
        background: rgba(5, 5, 5, 0.95);
        padding: 100px 20px;
        z-index: 200;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    header nav.show {
        display: flex;
        right: 0;
        z-index: 199;
    }

    header nav ul#menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        border: none;
        background: none;
        padding-left: 14px;
    }

    .nav-item.open .dropdown {
        display: flex;
    }

    footer {
        display: none;
    }

    .spy-line {
        display: none;
    }

    .scroll-arrow {
        bottom: 20px;
    }

    .center_name h2 {
        text-align: center;
        padding: 0 20px;
        font-size: 3rem;
    }

    .about_me {
        flex-direction: column;
        width: 90%;
        margin-top: 100px;
        text-align: center;
    }

    .about_img img {
        width: 250px;
        height: 250px;
    }

    .photoshoot {
        width: 90%;
    }

    .project1 {
        flex-direction: column;
        align-items: center;
    }

    .project1_txt {
        width: 90%;
        text-align: center;
        order: 2;
    }

    .project1_img1 {
        order: 1;
    }

    .project1_img1 img {
        width: 90vw;
        height: 200px;
    }

    .upcoming_projects {
        width: 90%;
    }

    .school {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 100px 5% 40px;
    }

    .school_img img {
        width: 90vw;
        height: 250px;
    }

    .course_section {
        width: 90%;
    }

    .course_grp {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 60px;
    }

    .course_pics {
        width: 90vw;
        height: 250px;
        justify-content: center;
    }

    .course_pics img {
        width: 140px;
        height: 140px;
    }

    .project_section {
        padding: 90px 5% 40px;
    }

    .video_grid,
    .embed-grid {
        flex-direction: column;
    }

    .experience ul {
        display: block;
        width: 80%;
        margin: 0 auto;
        padding-left: 20px;
        text-align: left;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    header {
        padding: 0 3%;
    }

    header h1 {
        font-size: 0.95rem;
    }

    .nav-item > a {
        padding: 10px 8px;
        font-size: 0.62rem;
    }

    .center_name h2 {
        font-size: 4.5rem;
    }

    .about_me {
        width: 85%;
        gap: 30px;
    }

    .about_img img {
        width: 300px;
        height: 300px;
    }

    .upcoming_projects,
    .photoshoot {
        width: 85%;
    }

    .project1 {
        gap: 30px;
    }

    .project1_txt {
        width: 40%;
    }

    .project1_img1 img {
        width: 400px;
        height: 220px;
    }

    .school {
        gap: 30px;
    }

    .school_img img {
        width: 300px;
        height: 400px;
    }

    .course_section {
        width: 90%;
    }

    .course_grp {
        gap: 30px;
    }

    .course_pics {
        width: 420px;
    }

    .course_pics img {
        width: 180px;
        height: 180px;
    }

    .volunteer_sector {
        width: 85%;
    }

    .experience {
        width: 85%;
    }

    .award {
        padding: 100px 10% 40px;
    }
}

/* === KEYFRAMES === */
#typewriter::after {
    content: "|";
    animation: blink 0.8s step-end infinite;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   PER-PAGE ANIMATED BACKGROUNDS
   ============================================================ */
body[data-bg] .bg {
    background: none;
    filter: none;
}
.bg-canvas {
    position: fixed;
    inset: 0;
    display: block;
}

/* ============================================================
   HOME HERO — BOARDING PASS (train theme)
   ============================================================ */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 130px 24px 90px;
}

.ticket {
    --glx: 50%;
    --gly: 50%;
    position: relative;
    display: flex;
    width: min(760px, 92vw);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16, 18, 24, 0.72), rgba(9, 10, 14, 0.66));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 45px 90px -35px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* soft light that flows under the cursor while it is over the pass */
.ticket-glare {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(circle at var(--glx) var(--gly),
        rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 42%);
}
.ticket.is-lit .ticket-glare {
    opacity: 1;
}

.ticket-main {
    flex: 1;
    min-width: 0;
    padding: 30px 34px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ticket-topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.tk-label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--faint);
}

.ticket-route {
    --city-h: 28px;
    --dot-m: 9px;
    --line-y: calc(var(--city-h) + var(--dot-m) + 3.5px);
    position: relative;
    height: 68px;
}

/* the line the plane flies along, running through the four stops */
.tk-track {
    position: absolute;
    left: 3.5px;
    right: 3.5px;
    top: 0;
    height: 100%;
    pointer-events: none;
}
.tk-line,
.tk-progress {
    position: absolute;
    left: 0;
    top: var(--line-y);
    height: 1px;
}
.tk-line {
    right: 0;
    background: repeating-linear-gradient(to right,
        rgba(255, 255, 255, 0.24) 0 5px, transparent 5px 11px);
}
.tk-progress {
    width: 0;
    background: rgba(255, 255, 255, 0.85);
    animation: tkFlyBar 12s ease-in-out infinite;
}
.tk-plane {
    position: absolute;
    left: 0;
    top: var(--line-y);
    z-index: 3;
    padding: 2px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--fg);
    background: rgba(11, 12, 17, 0.96);
    transform: translate(-50%, -50%) rotate(90deg);
    animation: tkFlyPlane 12s ease-in-out infinite;
}

/* One loop: rest at HKG, hop to LAX, TPE, then NYC, fade, start over. */
@keyframes tkFlyPlane {
    0%   { left: 0; opacity: 0; }
    4%   { left: 0; opacity: 1; }
    10%  { left: 0; }
    32%  { left: 33.333%; }
    38%  { left: 33.333%; }
    60%  { left: 66.666%; }
    66%  { left: 66.666%; }
    90%  { left: 100%; opacity: 1; }
    96%  { left: 100%; opacity: 0; }
    100% { left: 0; opacity: 0; }
}
@keyframes tkFlyBar {
    0%   { width: 0; opacity: 0; }
    4%   { width: 0; opacity: 1; }
    10%  { width: 0; }
    32%  { width: 33.333%; }
    38%  { width: 33.333%; }
    60%  { width: 66.666%; }
    66%  { width: 66.666%; }
    90%  { width: 100%; opacity: 1; }
    96%  { width: 100%; opacity: 0; }
    100% { width: 0; opacity: 0; }
}

.tk-stop {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
}
.tk-s1 { left: 0; align-items: flex-start; }
.tk-s2 { left: 33.333%; transform: translateX(-50%); align-items: center; text-align: center; }
.tk-s3 { left: 66.666%; transform: translateX(-50%); align-items: center; text-align: center; }
.tk-s4 { right: 0; align-items: flex-end; text-align: right; }

.tk-city {
    height: var(--city-h);
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: var(--city-h);
}
.tk-dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin: var(--dot-m) 0;
    border-radius: 50%;
    background: var(--fg);
    animation: tkPing 12s ease-out infinite;
}
/* each stop pings when the plane reaches it */
.tk-s1 .tk-dot { animation-delay: 0.4s; }
.tk-s2 .tk-dot { animation-delay: 3.84s; }
.tk-s3 .tk-dot { animation-delay: 7.2s; }
.tk-s4 .tk-dot { animation-delay: 10.8s; }
@keyframes tkPing {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
    8%   { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}
.tk-sub {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.tk-field-val {
    transition: text-shadow 0.3s ease;
}
.ticket-grid > div:hover .tk-field-val,
.ticket-program > div:hover .tk-field-val {
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}

.tk-terminal {
    font-size: 0.72rem;
    line-height: 1.4;
    max-width: 150px;
}

.tk-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tk-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fg);
    animation: tkLive 2s ease-in-out infinite;
}
@keyframes tkLive {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

.ticket-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tk-prog-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.tk-bar {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.tk-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), var(--fg));
    transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.tk-prog-foot {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}


.ticket-program {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ticket-program > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ticket-program .tk-field-val {
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.ticket-passenger {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tk-field-label {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--faint);
}
.tk-name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.2vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    min-height: 1.2em;
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.ticket-grid > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tk-field-val {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.ticket-barcode {
    font-family: var(--font-barcode);
    font-size: 2.7rem;
    line-height: 1;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.92;
}

/* perforation tear line + punch holes */
.ticket-perf {
    position: relative;
    width: 0;
    margin: 0 2px;
    border-left: 1px dashed rgba(255, 255, 255, 0.32);
}
.ticket-perf::before,
.ticket-perf::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(3, 4, 7, 0.92);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
}
.ticket-perf::before { top: 0; }
.ticket-perf::after { top: 100%; }

/* stub */
.ticket-stub {
    width: 184px;
    flex: none;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: center;
    background: linear-gradient(160deg, rgba(22, 24, 32, 0.5), rgba(10, 11, 16, 0.5));
}
.tk-stub-title {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}
.tk-stub-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tk-stub-fields > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
.tk-stub-barcode {
    font-family: var(--font-barcode);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--fg);
    opacity: 0.9;
}
.tk-stamp {
    position: relative;
    width: 108px;
    height: 108px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
.tk-stamp-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-mono);
    animation: stampSpin 26s linear infinite;
}
.tk-stamp-core {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-align: center;
    color: var(--fg);
}
@keyframes stampSpin {
    to { transform: rotate(360deg); }
}

.hero-hint {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--faint);
    animation: heroHint 2.4s ease-in-out infinite;
}
@keyframes heroHint {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50% { opacity: 0.7; transform: translateY(4px); }
}

@media screen and (max-width: 640px) {
    .ticket {
        flex-direction: column;
        width: min(420px, 94vw);
    }
    .ticket-main { padding: 26px 24px 22px; }
    .ticket-perf {
        width: auto;
        height: 0;
        margin: 2px 0;
        border-left: none;
        border-top: 1px dashed rgba(255, 255, 255, 0.32);
    }
    .ticket-perf::before { top: 50%; left: 0; }
    .ticket-perf::after { top: 50%; left: 100%; }
    .ticket-stub {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .ticket-grid { grid-template-columns: repeat(2, 1fr); }
    .ticket-barcode { font-size: 2.1rem; }
    .ticket-route { --city-h: 22px; --dot-m: 7px; height: 56px; }
    .tk-city { font-size: 1.15rem; }
    .tk-sub { font-size: 0.46rem; letter-spacing: 0.1em; }
    .tk-plane { font-size: 16px; }
    .tk-stub-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
    .tk-stub-fields > div { align-items: flex-start; }
    .tk-stub-fields .tk-field-val { white-space: nowrap; }
    .tk-stub-fields .tk-terminal { white-space: normal; }
    .tk-stub-title, .tk-stub-barcode { display: none; }
    .ticket-stub { padding: 20px 20px; gap: 14px; flex-wrap: nowrap; }
    .tk-stamp { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-plane, .tk-progress, .tk-dot, .tk-live, .hero-hint, .tk-stamp-ring { animation: none; }
    .tk-plane { left: 100%; }
    .tk-progress { width: 100%; }
    .tk-bar-fill { transition: none; }
}

/* ============================================================
   VOLUNTEER — PEEKING CATS (Melody's drawings, see js/backgrounds/cats.js)
   Each .cat is a clipping window pinned to a screen edge or corner; .cat-body
   slides inside it so the cat looks like it is coming in from off-screen.
   ============================================================ */
.cat-layer {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

.cat {
    position: absolute;
    overflow: hidden;
}

.cat-body {
    position: absolute;
    inset: 0;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
/* the drawing sits centred in the slide and can be turned a quarter turn */
.cat-spin {
    position: absolute;
    left: 50%;
    top: 50%;
}
.cat-spin svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pupil {
    transition: transform 0.4s ease-out;
}

/* blink: squash the eyes shut briefly; timing is randomised per cat in JS */
.cat-eyes {
    transform-box: fill-box;
    transform-origin: center;
    animation: catEyes var(--blink, 5.5s) var(--bd, 0s) infinite;
}
@keyframes catEyes {
    0%, 91%, 100% { transform: scaleY(1); }
    94% { transform: scaleY(0.08); }
}

@media (prefers-reduced-motion: reduce) {
    .cat-body, .pupil { transition: none; }
    .cat-eyes { animation: none; }
}

/* === SECTION ADDITIONS (award links, PDF embeds, entry cards, home extras) === */

/* PDFs drawn as page images (js/pdf-viewer.js): same width, same frame, stacked and centred */
.pdf-view {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.pdf-page {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
}
.pdf-note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}
.pdf-view-poster {
    flex: 0 0 460px;
    max-width: 460px;
    margin: 0;
}
.awards .award_img {
    max-width: 560px;
}

/* Pictures are for looking at, not carrying off */
img, canvas, video {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Volunteer: a certificate photo that was scanned sideways, turned upright */
.cert_embed {
    width: 100%;
    max-width: 420px;
    margin: 10px auto 0;
}
.cert_rotated {
    position: relative;
}
.cert_rotated::before {
    content: "";
    display: block;
    aspect-ratio: 896 / 1195;
}
.cert_rotated img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% * 1195 / 896);
    max-width: none;
    transform: translate(-50%, -50%) rotate(90deg);
    /* figcaption sits below via the wrapper padding */
}
.cert_rotated {
    margin-bottom: 44px;
}
.cert_embed figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -34px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: center;
}

/* Projects: creative practices sit closer together than the main projects */
.practices_head {
    padding-bottom: 0;
}
.project_section.practice {
    padding-top: 70px;
    border-top: 1px solid var(--line);
    margin-top: 30px;
}
.project_section.practices_head + .practice {
    border-top: 0;
    margin-top: 0;
}

/* Education: small cards for courses and activities */
.entry_group {
    margin-bottom: 56px;
}
.entry_group:last-child {
    margin-bottom: 0;
}
.grade_head {
    font-size: 0.78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 18px;
}
.entry_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.entry {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    padding: 22px 24px;
}
.entry h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.35;
}
.entry h5 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-top: 4px;
}
.education .entry p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--muted);
    margin-top: 10px;
}
.education .entry_group .skill_tags {
    justify-content: flex-start;
}

/* Home: more self pictures, letter, coming-soon rows */
.about_more {
    width: 70%;
    margin: 110px auto 0;
    text-align: center;
}
.about_more h2 {
    margin-bottom: 26px;
}
.about_more_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.about_more_grid img {
    width: 240px;
    height: 300px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.letter_section {
    width: 70%;
    margin: 110px auto 0;
    display: flex;
    justify-content: center;
}
.letter {
    max-width: 560px;
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    padding: 44px 48px 36px;
}
.letter p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}
.letter .letter-greeting {
    font-family: var(--font-display);
    font-size: 1.3rem;
}
.letter .letter-sign-off {
    margin-top: 26px;
    margin-bottom: 4px;
}
.signature-slot {
    height: 70px;
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    border-bottom: 1px dashed var(--line);
    margin-bottom: 8px;
}
.letter .letter-name {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0;
}

.project1 + .project1 {
    margin-top: 80px;
}
.project1_flip {
    flex-direction: row-reverse;
}
.project1_flip .project1_txt {
    text-align: left;
}

@media screen and (max-width: 768px) {
    .pdf-view-poster {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .about_more, .letter_section {
        width: 88%;
    }
    .about_more_grid img {
        width: 44%;
        height: 220px;
    }
    .letter {
        padding: 30px 22px 26px;
    }
    .project1,
    .project1_flip {
        flex-direction: column;
    }
    .project1_txt,
    .project1_flip .project1_txt {
        width: 100%;
        text-align: center;
    }
    .project1_img1 img {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .awards .award {
        padding-left: 6%;
        padding-right: 6%;
    }
}

/* === COURSEWORK, GALLERIES, MEDIA (added 2026-09) === */

/* A piece of work inside the Education Projects tab */
.work_block {
    padding: 64px 0 56px;
    border-top: 1px solid var(--line);
}
.work_block:first-child {
    padding-top: 0;
    border-top: 0;
}
.work_head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
}
.work_head h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.3;
}
.work_head .work_meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.work_head p {
    max-width: 680px;
    line-height: 1.75;
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0;
}
.sub_head {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    text-align: center;
    margin: 28px 0 14px;
}
.sub_head:first-child {
    margin-top: 0;
}
.work_note {
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 14px;
}

/* Photo / design grids. Click a picture to enlarge (js/main.js, initLightbox) */
.media_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.media_grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, 0.04);
    cursor: zoom-in;
}
/* A handful of photos (not a big set): sit close together and centred, not stretched
   across the row with empty space between them */
.media_grid.wide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.media_grid.wide img {
    flex: 0 1 300px;
    max-width: 300px;
    aspect-ratio: 3 / 2;
}
/* the whole photo, uncropped, rather than filling a fixed box */
.media_grid.wide.full img {
    aspect-ratio: auto;
    object-fit: contain;
    height: auto;
}
.media_grid.pages {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: start;
}
.media_grid.pages img {
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
}
.media_grid.logos {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.media_grid.logos img {
    aspect-ratio: 612 / 792;
    object-fit: contain;
    background: #fff;
}
.media_more {
    margin-top: 12px;
}
.media_more summary {
    list-style: none;
    cursor: pointer;
    width: fit-content;
    margin: 0 auto 18px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--line);
    padding: 9px 20px;
    color: var(--fg);
}
.media_more summary::-webkit-details-marker {
    display: none;
}
.media_more summary:hover {
    background: rgba(255, 255, 255, 0.08);
}
.media_more[open] summary .when_closed,
.media_more:not([open]) summary .when_open {
    display: none;
}

/* AP art: one finished piece with the process shots underneath */
.art_piece {
    margin-bottom: 44px;
}
.art_piece:last-child {
    margin-bottom: 0;
}
.art_piece .art_final {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 12px;
    cursor: zoom-in;
}
.art_process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 640px;
    margin: 0 auto;
}
.art_process img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.art_label {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

/* Audio / video */
.audio_list {
    display: grid;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
}
.audio_item {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 18px 16px;
}
.audio_item h4 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.audio_item audio {
    width: 100%;
    display: block;
}
.video_frame {
    max-width: 760px;
    margin: 0 auto;
}
.video_frame video {
    width: 100%;
    display: block;
    background: #000;
}
.video_frame + .video_frame {
    margin-top: 22px;
}
.video_caption {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-top: 8px;
}
.gif_row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}
.gif_row img {
    height: 200px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* Live embeds side by side (slides, sketches, sites) */
.embed_row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    align-items: start;
}
.embed_row.single {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
}
.slides-embed iframe,
.site-embed.ratio iframe {
    height: auto;
    aspect-ratio: 16 / 9;
}
/* A page that is drawn at a fixed size (p5.js sketches) scaled down to fit its frame; js/main.js sets the scale */
.scaled-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--w) / var(--h);
    overflow: hidden;
    background: #1b1b1b;
}
.scaled-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
    max-width: none;
    aspect-ratio: auto;
    transform-origin: 0 0;
    border: 0;
}
.doc-embed iframe {
    height: 520px;
}
.link_row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 22px;
}
.social-embed-icon.arrow {
    fill: none;
}

/* PDFs in a row: several one-page layouts side by side */
/* Documents/designs sit close together and centred, not stretched full-width with gaps
   between a small number of items (the old auto-fit/1fr columns did that). */
.pdf_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: start;
}
.pdf_grid > .pdf_item {
    flex: 0 1 340px;
    max-width: 340px;
}
@media screen and (max-width: 768px) {
    /* a long row of pages scrolls inside the card instead of stretching it past the screen edges */
    .pdf_grid > .pdf_item { min-width: 0; }
}
.pdf_grid .pdf-view {
    max-width: 460px;
}
.pdf_item h4 {
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}
details.pdf_more summary {
    list-style: none;
    cursor: pointer;
    width: fit-content;
    margin: 0 auto 22px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--line);
    padding: 9px 20px;
}
details.pdf_more summary::-webkit-details-marker {
    display: none;
}
details.pdf_more summary:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Certificates: a grid of framed scans, each with a caption */
.cert_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 30px 22px;
    align-items: start;
    margin: 34px 0 0;
    width: 100%;
    text-align: left;
}
.cert_grid figure {
    margin: 0;
}
.cert_grid figure > img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    cursor: zoom-in;
}
.cert_grid figcaption {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: center;
}
.cert_grid.two {
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
}
.cert_grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Awards with more than one picture */
.award_gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.award_gallery .award_img {
    flex: 1 1 280px;
    max-width: 400px;
}
.award_gallery .award_img.wide {
    flex-basis: 420px;
    max-width: 560px;
}
.award_img img {
    cursor: zoom-in;
}
.award_caption {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-top: 10px;
    text-shadow: 0 0 6px #000, 0 0 16px #000;
}

/* Home: real signature on the letter (dark ink, turned light for the dark page) */
.signature {
    display: block;
    height: 64px;
    width: auto;
    max-width: 100%;
    filter: invert(1);
    opacity: 0.92;
    margin: 4px 0 6px -4px;
}

/* Interactive 3D model preview (js/stl-viewer.js) */
.stl-view {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: 560px;
    margin: 0 auto;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    cursor: grab;
    touch-action: pan-y;
}
.stl-view canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.stl-view .stl-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    pointer-events: none;
}
.two_up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    align-items: center;
}
.two_up .svg_panel {
    background: #fff;
    padding: 18px;
    border-radius: 6px;
}
.two_up .svg_panel img {
    width: 100%;
    height: auto;
    display: block;
}

/* Click-to-enlarge overlay */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.lightbox.show {
    opacity: 1;
}
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.lightbox-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

@media screen and (max-width: 768px) {
    .art_process {
        grid-template-columns: repeat(3, 1fr);
    }
    .media_grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    .media_grid.wide {
        grid-template-columns: 1fr 1fr;
    }
    .embed_row {
        grid-template-columns: 1fr;
    }
    .cert_grid {
        grid-template-columns: 1fr 1fr;
        gap: 22px 12px;
    }
    .doc-embed iframe {
        height: 420px;
    }
}
.tabs_center .edu-tabs-buttons {
    justify-content: center;
    flex-wrap: wrap;
}

/* === PLACEHOLDER BOXES ===
   A dashed box that says what will be filled in while there is nothing to show yet (no stand-in pictures,
   no bracketed text). Built on .embed-slot: .slot-text is for a description, .slot-tag for one missing
   detail such as a semester. Photos get no box of their own; the description says what is coming. */
.slot-text {
    padding: 16px 22px;
    gap: 6px;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    /* a darker, softly blurred fill keeps the box readable over the animated backgrounds */
    background: rgba(4, 6, 10, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.28);
}
.slot-text h4 {
    font-size: 0.66rem;
    color: var(--muted);
}
.slot-text p {
    font-size: 0.86rem;
    line-height: 1.6;
    max-width: none;
}
.slot-tag {
    display: inline-block;
    border: 1px dashed var(--line);
    padding: 1px 10px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Works in Progress: a short title and one line each, like the skill groups on the home page, three to a row */
.wip_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 34px;
    margin-top: 20px;
    text-align: center;
}
.wip_item h4 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 10px;
}
.wip_item p {
    font-size: 0.92rem;
    line-height: 1.65;
    max-width: 280px;
    margin: 0 auto;
}
@media screen and (max-width: 800px) {
    .wip_grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
    .wip_grid { grid-template-columns: 1fr; }
}

/* in cards and columns the box lines up with the text around it */
.entry .slot-text,
.education .entry .slot-text {
    margin: 12px 0 0;
    padding: 12px 16px;
    align-items: flex-start;
    text-align: left;
}
.education .entry .slot-text p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
}
/* a link button inside an entry card sits on its own line under the text */
.entry .embed-fallback-link {
    display: inline-block;
    margin-top: 14px;
}
/* Event cards that carry photos (Makerspace) get more width and small square thumbnails,
   larger when there are only one or two */
.entry_grid.wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.entry .media_grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 6px;
    margin-top: 14px;
}
.entry .media_grid.one {
    grid-template-columns: minmax(0, 300px);
}
.entry .media_grid.one img {
    aspect-ratio: 4 / 3;
}
.entry .media_grid.two {
    grid-template-columns: repeat(2, minmax(0, 220px));
}
.entry .media_more summary {
    margin: 14px 0 0;
}
.entry .media_more[open] summary {
    margin-bottom: 14px;
}
/* a big gallery (100+ photos): small square thumbnails, two across even on a phone */
.media_grid.tiles {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
}
/* short phone clips are shown in their own shape, several to a row (9:16 unless marked wide) */
.media_grid.clips {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    align-items: start;
}
.media_grid.clips.wide {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.media_grid.clips video {
    width: 100%;
    display: block;
    background: #000;
    aspect-ratio: 9 / 16;
    object-fit: contain;
}
.media_grid.clips.wide video {
    aspect-ratio: 16 / 9;
}
.about_txt .slot-text {
    margin: 16px 0 0;
    align-items: flex-start;
    text-align: left;
}
.letter .slot-text {
    margin: 0 0 16px;
    max-width: none;
}
.letter .slot-text p {
    margin: 0;
}
.work_head .slot-text {
    max-width: 680px;
}
.project_txt .slot-text,
.event_intro .slot-text {
    max-width: 700px;
}
.about_more .slot-text {
    margin-top: 6px;
}
.volunteer_sector .slot-text {
    margin-bottom: 18px;
}
.volunteer_sector > div .slot-text {
    max-width: none;
}
.volunteer_sector .event_intro .slot-text {
    margin-bottom: 0;
    max-width: 700px;
}

/* Coming Soon rows have no picture yet, so the text sits in the middle */
.project1_text_only {
    justify-content: center;
}
.project1_text_only .project1_txt,
.project1_flip.project1_text_only .project1_txt {
    width: 100%;
    max-width: 560px;
    text-align: center;
}
.project1_text_only .project1_txt .slot-text,
.project1_flip.project1_text_only .project1_txt .slot-text {
    margin: 0 auto;
    align-items: center;
    text-align: center;
}
.project1_text_only .project1_txt .slot-text p {
    font-size: 0.86rem;
    line-height: 1.6;
}

/* === SEARCH === */

.site-logo {
    margin-right: auto;
}

.search-toggle {
    width: 34px;
    height: 34px;
    margin-left: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--fg);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--line);
}

.search-toggle:focus-visible,
.search-input:focus-visible {
    outline: 1px solid var(--fg);
    outline-offset: 2px;
}

.search-panel {
    position: fixed;
    top: 68px;
    right: 4%;
    width: min(480px, 92vw);
    max-height: calc(100vh - 92px);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    z-index: 150;
}

.search-panel[hidden] {
    display: none;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.search-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.search-input::placeholder {
    color: var(--faint);
}

.search-kbd {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    border: 1px solid var(--line);
    padding: 2px 5px;
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.search-results li a {
    display: block;
    padding: 11px 16px;
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.search-results li:last-child a {
    border-bottom: none;
}

.search-results li.active a,
.search-results li a:hover {
    background: rgba(255, 255, 255, 0.07);
}

.sr-title {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
}

.sr-crumb {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

.sr-snip {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted);
}

.search-panel mark {
    background: var(--fg);
    color: var(--bg);
    padding: 0 2px;
}

.search-status {
    margin: 0;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--faint);
}

.search-results:not(:empty) + .search-status {
    border-top: 1px solid var(--line);
}

.search-hit {
    animation: searchHit 2.4s ease-out;
}

@keyframes searchHit {
    0%, 55% { box-shadow: 0 0 0 1px var(--fg), 0 0 28px rgba(255, 255, 255, 0.18); }
    100% { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; }
}

@media screen and (max-width: 768px) {
    .search-toggle {
        position: absolute;
        top: 13px;
        right: 3.4rem;
        margin: 0;
        z-index: 300;
    }

    .search-panel {
        right: 4%;
        left: 4%;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-hit { animation: none; box-shadow: 0 0 0 1px var(--fg); }
}

/* Link card under an award's text: centred, and solid enough that the heartbeat line doesn't run through it */
.award_txt .social-embed {
    margin: 22px auto 0;
    text-align: left;
    background: rgba(5, 5, 5, 0.82);
}

.award_txt .social-embed:hover {
    background: rgba(28, 28, 28, 0.92);
}

.award .social-embed-text p {
    line-height: 1.4;
}

/* Home: auto-advancing photo carousel next to My Story (no swiping; two dots pick a photo) */
.about_carousel {
    position: relative;
    flex: 0 0 auto;
    width: 400px;
}
.carousel_slides {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--line);
    overflow: hidden;
    touch-action: pan-y;
}
.about_img.about_carousel .carousel_slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: center 22%;
    opacity: 0;
    transition: opacity 0.9s ease;
    -webkit-user-drag: none;
    user-select: none;
}
.about_img.about_carousel .carousel_slide.is-active {
    opacity: 1;
}
.carousel_dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
.carousel_dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--muted);
    background: transparent;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}
.carousel_dot:hover { transform: scale(1.25); }
.carousel_dot.is-active { background: var(--fg); border-color: var(--fg); }
.carousel_dot:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.about_txt .signature { margin: 18px 0 4px -4px; }
@media screen and (max-width: 1100px) { .about_carousel { width: 300px; } }
@media screen and (max-width: 768px) { .about_carousel { width: 250px; } .about_txt .signature { margin-left: auto; margin-right: auto; } }

/* Home: works in progress (3 text-only cards in a row) */
.wip_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}
.wip_card {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    padding: 28px 26px 30px;
}
.wip_card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 12px;
}
.wip_card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}
@media screen and (max-width: 900px) {
    .wip_grid { grid-template-columns: 1fr; }
}

/* Home: Hobbies sits directly under Skills */
.skills_section--tight { margin-top: 220px; margin-bottom: 190px; }
.hobbies_section { margin-top: 0; margin-bottom: 40px; }
.hobbies_section h2 { margin-bottom: 36px; }
.hobbies_section .skill_tag { padding: 9px 22px; font-size: 0.9rem; }
.skills_section--tight .skill_grp { margin-bottom: 24px; }
/* main.js narrows each tag group so its lines are even; auto margins keep it centred */
#skills .skill_tags, #hobbies .skill_tags { margin-left: auto; margin-right: auto; }
@media screen and (max-width: 768px) {
    .skills_section--tight { margin-top: 140px; margin-bottom: 120px; }
}

/* Contact: footer text, copy toast, "Send a message" dialog */
.dropdown li a[data-compose] {
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.dropdown li a[data-copy] .soon-tag { opacity: 0.75; }

.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 70px;
    transform: translate(-50%, 12px);
    z-index: 400;
    max-width: 90vw;
    padding: 10px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

.msg-modal {
    position: fixed;
    inset: 0;
    z-index: 350;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.msg-modal[hidden] { display: none; }
body.msg-open { overflow: hidden; }
.msg-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 34px 32px 26px;
    background: var(--panel);
    border: 1px solid var(--line);
}
.msg-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: 18px;
}
.msg-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.msg-close:hover { color: var(--fg); }
.msg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.msg-chip {
    padding: 6px 14px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
}
.msg-chip:hover { border-color: var(--muted); }
.msg-chip.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
#msg-text {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--fg);
    border: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    resize: vertical;
}
#msg-text:focus { outline: 1px solid var(--muted); }
.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.msg-btn {
    padding: 9px 18px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--fg);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.msg-btn:hover { background: var(--fg); color: var(--bg); }
.msg-note {
    margin-top: 16px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--muted);
}
.contact-item .dropdown { left: auto; right: 0; }

/* Awards: more air between awards; ceremony photos as one small row under the main award */
.awards .award {
    min-height: 0;
    padding-top: 120px;
    padding-bottom: 120px;
}
.awards .award:first-of-type { padding-top: 140px; }
.awards .award:last-of-type { padding-bottom: 140px; }
.award_gallery .award_photos {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.award_photos .award_photo {
    flex: 0 1 96px;
    min-width: 0;
}
.award_photos .award_photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    cursor: zoom-in;
}

/* Awards listed inside a club / robotics / volunteer section */
.award_list {
    list-style: none;
    margin: 18px 0 4px;
    padding: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.award_list li {
    flex: 1 1 240px;
    max-width: 300px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}
.award_list li strong {
    display: block;
    margin-bottom: 8px;
    color: var(--fg);
    font-family: var(--font-display);
    font-weight: 500;
}
.award_list li span {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}
.pdf-view[hidden], .stl-view[hidden] { display: none !important; }

/* Home carousel: second photo sits higher in the frame so her head is in the upper part */
.about_img.about_carousel .carousel_slide:nth-child(2) { object-position: center 52%; }

/* Awards: no divider lines, wider gaps */
.awards .award,
.awards .award:last-of-type {
    border-bottom: 0;
}
.awards .award {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: 90px;
}
.awards .award:first-of-type { padding-top: 140px; }
.awards .award:last-of-type { padding-bottom: 140px; margin-bottom: 0; }

/* Awards: titles on one line (wraps only on narrow screens), roomier thumbnails */
.awards .award {
    padding-left: 4%;
    padding-right: 4%;
}
.awards .award_txt {
    max-width: none;
    width: 100%;
}
.awards .award_txt h2 {
    font-size: clamp(1.15rem, 2.05vw, 1.7rem);
}
.awards .award_txt p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (min-width: 900px) {
    .awards .award_txt h2 { white-space: nowrap; }
}
.award_gallery .award_photos {
    flex-direction: row;
    margin-top: -4px;
}
.award_photos .award_photo {
    flex: 0 1 138px;
}
.award_photos .award_photo img {
    aspect-ratio: 4 / 3;
}
@media screen and (max-width: 600px) {
    .award_gallery .award_photos { flex-wrap: wrap; }
    .award_photos .award_photo { flex-basis: 30%; }
}

/* TI competition: the two certificates side by side at the same height */
.award_gallery .award_img.pair {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.award_gallery .award_img.pair img {
    height: 400px;
    width: auto;
    max-width: 100%;
}
@media screen and (max-width: 700px) {
    .award_gallery .award_img.pair img { height: auto; width: 100%; }
    .award_gallery .award_img.pair { width: 100%; }
}

/* Work Experience: everything centred, evenly padded boxes, more room between the titles */
body[data-bg="rain"] .experience {
    padding: 56px 48px;
}
.experience > div {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.experience > div + div {
    margin-top: 44px;
}
.experience h2 {
    margin: 28px 0 14px;
    line-height: 1.25;
}
.experience h3 {
    margin-bottom: 14px;
}
.experience p {
    margin-bottom: 26px;
}
.experience ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 680px;
    text-align: center;
}
.experience li {
    margin-bottom: 12px;
}
.experience li:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 768px) {
    body[data-bg="rain"] .experience { padding: 36px 18px; }
}

/* NSRRC: the certificate is the headline image, the slides sit under it */
.experience .cert_grid.award_big {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}
.experience .cert_grid.award_big figure > img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.experience .cert_grid.award_big figcaption {
    text-align: center;
}

/* Physics TA: slide examples come after the description */
.experience .slides_after {
    margin-top: 48px;
    max-width: 100%;
}
.experience .embed_note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
}

/* Work Experience: content sits dead centre inside each box (no stray margin above the title or below the last line) */
.experience > div:first-child > h2:first-child { margin-top: 0; }
.experience > div:last-child > :last-child { margin-bottom: 0; }
.experience > div:last-child > ul:last-child li:last-child { margin-bottom: 0; }
.experience { box-sizing: border-box; }

/* Work Experience: sheerer boxes, storm shows through (text keeps a soft shadow so it stays readable) */
body[data-bg="rain"] .experience {
    background: rgba(3, 5, 9, 0.3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
body[data-bg="rain"] .experience h2,
body[data-bg="rain"] .experience h3,
body[data-bg="rain"] .experience p,
body[data-bg="rain"] .experience li {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Work Experience: compact, left-aligned bullet points (headings stay centred) */
.experience ul {
    list-style: disc;
    text-align: left;
    max-width: 620px;
    padding: 0 0 0 1.2em;
    margin: 0 auto;
}
.experience li {
    margin-bottom: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
    padding-left: 2px;
}
.experience li::marker {
    color: var(--muted);
}
.experience p {
    margin-bottom: 18px;
}

/* Volunteer: title, date, description, then the role line */
.event_intro .event_role {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.7;
}

/* === Scrolling (all pages) ===
   No scroll snapping anywhere: every page scrolls freely. The section dots still jump to each section,
   and the padding keeps a section's top clear of the fixed header when they do. */
html {
    scroll-padding-top: 56px;
}

/* Projects: each project gets its own screen, centred. */
.projects .project_section,
.projects .project_section.practice {
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 130px;
    padding-bottom: 130px;
    margin-top: 0;
}
/* Work Experience: each job is its own "page", centred in the window with lots of air around it */
.experience {
    min-height: 66vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 55vh auto;
}
.experience > div {
    width: 100%;
}
@media screen and (max-width: 768px) {
    .experience { min-height: 60vh; margin: 55vh auto; }
}

/* Work Experience: one job per screen. Gaps are wider than the space left around a centred box, so nothing
   from the neighbouring jobs shows above or below. */
.event_intro h2 + .event_role { margin: 4px 0 10px; }

/* Volunteer section titles: long, word-heavy names read tighter with less space between words */
.volunteer_sector .event_intro h2 {
    word-spacing: -0.12em;
    line-height: 1.15;
}

/* P.E. and Terra NYC STEM Fair: short sections with little else on the page, so the intro's title,
   role, date and description read as one loose cluster unless the gap between them is tightened */
#pe-equipment-room .event_intro,
#terra-nyc-stem-fair .event_intro {
    gap: 2px;
}
#pe-equipment-room .event_intro h2 + .event_role,
#terra-nyc-stem-fair .event_intro h2 + .event_role {
    margin: 0;
}
/* ...but the description still needs a little air from the date above and real space before
   the certificate image below */
#pe-equipment-room .event_intro > p:not(.event_role),
#terra-nyc-stem-fair .event_intro > p:not(.event_role) {
    margin-top: 10px;
    margin-bottom: 28px;
}
/* P.E.'s certificate sits lower than the rest thanks to the generic .cert_grid top margin;
   pull it back up about 1cm */
#pe-equipment-room .cert_grid {
    margin-top: -4px;
}

/* Instagram profile embeds (Instagram's own /embed/ page: header, follower count and the latest posts),
   framed like the website preview below so the two don't feel like one static box and one iframe */
.ig-embed {
    max-width: 440px;
    margin: 26px auto 0;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
}
.ig-embed iframe {
    display: block;
    width: 100%;
    height: 580px;
    border: 0;
}
.ig-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 5px 0 8px;
    border-radius: 50%;
    background: #3ecf6b;
    animation: igLive 1.8s ease-in-out infinite;
}
@keyframes igLive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* A club website shown page by page (pictures of the live site, in a browser-style frame) */
.site-preview {
    width: 100%;
    max-width: 860px;
    margin: 6px auto 0;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
}
.site-preview-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.site-preview-dots { display: inline-flex; gap: 6px; }
.site-preview-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); display: block; }
.site-preview-url { flex: 1; color: var(--muted); padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-preview-bar a { color: var(--fg); white-space: nowrap; }
.site-preview-tabs { flex-wrap: wrap; margin: 0; padding: 12px 14px; gap: 8px; border-bottom: 1px solid var(--line); }
.site-preview-tabs button { padding: 7px 14px; }
.site-preview-body { height: 560px; background: #e8e8e8; }
.site-preview-body img { display: block; width: 100%; height: auto; cursor: default; }

/* The six page screenshots auto-advance and crossfade (js/main.js), each scrollable on its own,
   so the preview reads as something alive instead of a flat, static screenshot */
.site-preview-body { position: relative; overflow: hidden; }
.site-preview-body .tab-panel {
    position: absolute;
    inset: 0;
    display: block;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease;
    pointer-events: none;
}
.site-preview-body .tab-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Volunteer: more air around Terra / STEP / Key / P.E. */
.volunteer_sector {
    padding-top: 110px;
    margin-bottom: 160px;
}
.volunteer_sector:first-of-type { padding-top: 140px; }

/* Titles read as one line, not stretched: less letter-spacing on long uppercase labels */
.sub_head, .pdf_item h4, details.pdf_more summary {
    letter-spacing: 0.04em;
}
.event_intro p, .event_intro .slot-text, .award_list {
    max-width: 760px;
}

/* Made-by-her credit line under a sub_head (design tabs, site preview) */
.made-by {
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted);
    margin: -8px 0 12px;
}

/* Club website preview: the picture itself opens the live, interactive site */
.site-preview-body {
    position: relative;
}
.site-preview-body a.site-preview-open {
    display: block;
    position: relative;
}
.site-preview-body a.site-preview-open::after {
    content: "Click to open the live, interactive site \2197";
    position: absolute;
    inset: auto 0 0 0;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.site-preview-body a.site-preview-open:hover::after,
.site-preview-body a.site-preview-open:focus-visible::after {
    opacity: 1;
}
.site-preview-body a.site-preview-open:hover img,
.site-preview-body a.site-preview-open:focus-visible img {
    filter: brightness(0.85);
}
.site-preview-body img { transition: filter 0.2s ease; }
/* one screenshot of a page that can't be embedded live (OpenSea, VEX Events block iframes) */
.site-preview.single {
    margin-bottom: 44px;
}
.site-preview.single .site-preview-body {
    height: auto;
}

/* A small set of photos kept to a single line, no scrolling (nail sets of 3-5) */
.media_grid.one_row {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.media_grid.one_row img {
    flex: 0 1 180px;
    min-width: 0;
}

/* Design tab: logos and flat art at a shared height, centred, no forced white card */
.media_grid.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 22px;
}
.media_grid.logos img {
    width: auto;
    height: 170px;
    max-width: 320px;
    aspect-ratio: auto;
    object-fit: contain;
    background: none;
    cursor: zoom-in;
}
@media screen and (max-width: 600px) {
    .media_grid.logos img { height: 130px; }
}

/* A document shown as a horizontally scrolling filmstrip of pages, no click needed to see it */
.pdf-view.filmstrip {
    flex-direction: row;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    justify-content: flex-start;
}
.pdf-view.filmstrip .pdf-page {
    flex: 0 0 auto;
    width: auto;
    height: 320px;
    scroll-snap-align: start;
}
@media screen and (max-width: 600px) {
    .pdf-view.filmstrip .pdf-page { height: 220px; }
}

/* Two items side by side at a consistent, tight gap regardless of each one's own aspect ratio
   (STEP's T-shirt backs, the last two officer proposals) */
.grid_2up {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 340px));
    justify-content: center;
    gap: 14px;
}
.grid_2up > .pdf_item {
    max-width: none;
    width: 100%;
}

/* The last two officer proposals: same idea as grid_2up, but sized up */
.grid_2up_lg {
    grid-template-columns: repeat(2, minmax(320px, 620px));
}
.grid_2up_lg .pdf-view.filmstrip .pdf-page {
    height: 520px;
}
@media screen and (max-width: 700px) {
    .grid_2up_lg .pdf-view.filmstrip .pdf-page { height: 320px; }
}
/* Phones: the columns never ask for more than the screen. Two small items still share a row; the sized-up
   ones stack, one per row, and their pages scroll sideways inside the card. */
@media screen and (max-width: 768px) {
    .grid_2up { grid-template-columns: repeat(2, minmax(0, 340px)); }
    .grid_2up_lg { grid-template-columns: minmax(0, 620px); row-gap: 28px; }
    .grid_2up > .pdf_item { min-width: 0; }
}

/* MUN designs: every tab's layouts on one line, centred, each item as wide as its own pages */
#mun-designs .pdf_grid {
    gap: 36px;
    justify-content: center;
}
#mun-designs .pdf_grid > .pdf_item {
    flex: 0 0 auto;
    max-width: none;
}
#mun-designs .pdf_grid .pdf-view {
    width: auto;
    justify-content: center;
    overflow: visible;
}
#mun-designs .pdf-view.filmstrip .pdf-page {
    height: 230px;
    aspect-ratio: 1 / 1.4142;
}
/* the Conference Issue tab is three single pages, so it has room to show them larger */
#mun-designs [data-tab-panel="conf"] .pdf-view.filmstrip .pdf-page {
    height: 330px;
}
@media screen and (max-width: 1100px) {
    #mun-designs .pdf-view.filmstrip .pdf-page { height: 190px; }
    #mun-designs [data-tab-panel="conf"] .pdf-view.filmstrip .pdf-page { height: 260px; }
}
@media screen and (max-width: 600px) {
    #mun-designs .pdf-view.filmstrip .pdf-page,
    #mun-designs [data-tab-panel="conf"] .pdf-view.filmstrip .pdf-page { height: 150px; }
}
/* Robotics certificates: unify to the same height, same treatment as Key's cert grid */
#ibsh-robotics .cert_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
#ibsh-robotics .cert_grid figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    max-width: 100%;
}
#ibsh-robotics .cert_grid figure > img {
    height: 260px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media screen and (max-width: 600px) {
    #ibsh-robotics .cert_grid figure > img { height: 200px; }
}

/* Photo sets: two rows, five columns, the rest reachable by scrolling sideways.
   A fixed px width, not a percentage: percentage-based grid-auto-columns rendered the first few
   columns at one width and every later column narrower once the row started overflowing. */
.media_grid.scroll2 {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 165px;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
}
.media_grid.scroll2 img {
    scroll-snap-align: start;
}
@media screen and (max-width: 700px) {
    .media_grid.scroll2 { grid-auto-columns: 130px; }
}

/* Awards list at the bottom of a club section, centred like the rest of the intro */
.event_awards {
    text-align: center;
    margin-top: 50px;
}
.event_awards .award_list {
    margin-left: auto;
    margin-right: auto;
}

.more_note {
    font-size: 0.82rem;
    color: var(--faint);
    margin-top: 18px;
}

/* STEP certificates: the one landscape scan gets its own centred row at the bottom, captions read tighter */
.cert_grid figure.landscape {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 340px;
}
.cert_grid figcaption {
    margin-top: 6px;
    line-height: 1.4;
}

/* More air between a club's Instagram embed and its Photos/Videos/Design/Documents tabs */
.event_intro .ig-embed {
    margin-bottom: 70px;
}

/* Design tab: T-shirts, posters, and flyers all read at the same height, regardless of their own shape */
.pdf_grid.design_uniform .pdf_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    max-width: 100%;
}
.pdf_grid.design_uniform .pdf-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    max-width: 100%;
}
.pdf_grid.design_uniform .pdf-view .pdf-page,
.pdf_grid.design_uniform > .pdf_item > img.pdf-page {
    height: 400px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media screen and (max-width: 600px) {
    .pdf_grid.design_uniform .pdf-view,
    .pdf_grid.design_uniform .pdf-view .pdf-page,
    .pdf_grid.design_uniform > .pdf_item > img.pdf-page {
        height: 280px;
    }
}
/* Phones: when a picture is too wide to reach that height (a landscape slide, a poster in a half-width
   column), the card shrinks with it instead of filling the rest with white */
@media screen and (max-width: 768px) {
    .pdf_grid.design_uniform .pdf-view {
        height: auto;
    }
    /* a strip of slides starts at its first slide; centred, the first few hung off the left, out of reach */
    .pdf_grid.design_uniform .pdf-view.filmstrip {
        justify-content: flex-start;
    }
    .pdf_grid.design_uniform .pdf-view .pdf-page,
    .pdf_grid.design_uniform > .pdf_item > img.pdf-page {
        height: auto;
        max-height: 280px;
    }
}

/* Key's certificates: unify to the same height (their source scans have slightly different
   aspect ratios) and let the group sit centred and close together */
#international-key-club .cert_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
#international-key-club .cert_grid figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    max-width: 190px;
}
#international-key-club .cert_grid figure > img {
    height: 220px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media screen and (max-width: 600px) {
    #international-key-club .cert_grid figure > img { height: 180px; }
}

/* A document that's landscape (wider than tall) shown at a readable size on its own row,
   instead of being squeezed down to match the height of the portrait documents around it */
.pdf_grid.docs_wide {
    justify-content: center;
}
.pdf_grid.docs_wide .pdf_item {
    flex: 0 1 700px;
    max-width: 700px;
}
.pdf_grid.docs_wide .pdf-view.filmstrip .pdf-page {
    height: 480px;
}
@media screen and (max-width: 700px) {
    .pdf_grid.docs_wide .pdf-view.filmstrip .pdf-page { height: 320px; }
}

/* === Projects page additions (2026-09-28) === */
/* no dividing lines between projects: the space around each one separates them */
.projects .project_section.practice { border-top: 0; }

/* Robotics certificates: three on the first row, two centred on the second */
#ibsh-robotics .cert_grid.cert_3_2 .cert_break { flex-basis: 100%; height: 0; }

/* Robotics: official pages stacked; the winners list is a tall PDF page, so it scrolls inside its frame */
.official_pages { display: flex; flex-direction: column; gap: 30px; }
.official_pages .site-preview.single { margin: 0 auto; }
.site-preview.single.doc .site-preview-body { height: 560px; overflow-y: auto; background: #fff; }

/* Robotics tabs: the team photo leads the PAS-VEX tab */
.robotics_tabs .edu-tabs-buttons { flex-wrap: wrap; justify-content: center; }
.robotics_tabs .tab-panel .sub_head { margin-top: 44px; }
.team_feature { max-width: 640px; margin: 34px auto 0; text-align: center; }
.team_feature img { width: 100%; display: block; border-radius: 6px; cursor: zoom-in; }
.team_feature figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.55; letter-spacing: 0.04em; color: var(--muted); }

/* A row of phone and camera clips, each in its own shape, scrolling sideways when there are many */
.clip_strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    justify-content: safe center;
}
.clip_strip video {
    flex: 0 0 auto;
    height: 250px;
    aspect-ratio: 9 / 16;
    background: #000;
    object-fit: contain;
    scroll-snap-align: start;
}
.clip_strip video.wide { aspect-ratio: 16 / 9; }
@media screen and (max-width: 600px) { .clip_strip video { height: 240px; } }

/* one featured video, shown large and centred */
.video_grid.single_video { grid-template-columns: minmax(0, 680px); justify-content: center; }

/* documents: each page fills its card and you flip through them sideways */
.pdf_grid.docs > .pdf_item { flex: 0 1 300px; max-width: 300px; }
.pdf_grid.docs .pdf-view.filmstrip { gap: 10px; }
.pdf_grid.docs .pdf-view.filmstrip .pdf-page { flex: 0 0 100%; width: 100%; height: auto; }

/* Performances: "Someone You Loved" sits under the grid */
.video_solo.after_grid { margin: 34px auto 44px; }

/* Embroidery: silent looping clips, centred */
.media_grid.clips.silent_clips { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.media_grid.clips.silent_clips video { width: 180px; }

/* 3D printing: artwork, finished plate and the print in progress, same height, side by side */
.plate_row { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.plate_row figure { margin: 0; flex: 0 1 280px; text-align: center; }
.plate_row img { width: 100%; height: 280px; object-fit: cover; display: block; border-radius: 6px; cursor: zoom-in; }
.plate_row .svg_panel { background: #fff; border-radius: 6px; height: 280px; display: flex; align-items: center; padding: 14px; box-sizing: border-box; }
.plate_row .svg_panel img { height: 100%; object-fit: contain; border-radius: 0; }
.plate_row figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.plate_model { max-width: 560px; margin: 34px auto 0; }
.site-preview.single.doc .doc_highlight { border-bottom: 1px solid #ddd; }
.site-preview.single.doc .doc_note { color: #555; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 10px 0; border-bottom: 1px solid #ddd; }
.wip_item, .wip_item h4, .wip_item p { text-align: center; }

/* === Projects page, second pass (2026-09-28) === */
/* Makerspace (moved here from Education): machine chips under the intro, event cards below */
#makerspace .skill_tags { max-width: 760px; margin-top: 6px; }
#makerspace .maker_events { width: 100%; }
#makerspace .entry { background: rgba(4, 10, 24, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Musical Theater: the first show sits close under the years, the two shows get room between them */
#musical-theater .project_txt { margin-bottom: 18px; }
#musical-theater .project_txt + .sub_head { margin-top: 0; }
#musical-theater .video_grid + .sub_head { margin-top: 90px; }

/* Robotics: award moments lead, small and even; competition details come after */
.award_moments { display: flex; flex-wrap: nowrap; justify-content: center; gap: 20px; margin-bottom: 50px; }
.award_moments figure { margin: 0; flex: 0 1 280px; min-width: 0; text-align: center; }
.award_moments img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin: 0 auto; border-radius: 6px; cursor: zoom-in; }
.award_moments figcaption { margin: 8px auto 0; font-family: var(--font-mono); font-size: 0.64rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--muted); }
#ibsh-robotics .cert_grid { margin-bottom: 50px; }
/* the winners list: only our team's row, no long page to scroll */
.site-preview.single.doc.snippet { max-width: 760px; }
.site-preview.single.doc.snippet .site-preview-body { height: auto; overflow: visible; }
.site-preview.single.doc.snippet .doc_highlight { border-bottom: 0; width: 100%; display: block; }
#ibsh-robotics .official_pages .site-preview.single { width: 100%; max-width: 760px; }
#ibsh-robotics .official_pages .site-preview.single:not(.doc) .site-preview-body { max-height: 380px; overflow: hidden; }
#ibsh-robotics .ig-embed { margin-top: 50px; margin-bottom: 50px; }
/* inside each competition tab: no labels, just breathing room between the pieces */
.robotics_tabs .tab-panel { padding-top: 34px; }
.robotics_tabs .tab-panel > * + * { margin-top: 40px; }
/* photos: one short row of small squares, scroll sideways for more */
.media_grid.scroll2.comp_photos { --scroll-col: 182px; grid-template-rows: repeat(2, 182px); gap: 4px; justify-content: safe center; }
.media_grid.scroll2.comp_photos img { width: 182px; height: 182px; aspect-ratio: 1; object-fit: cover; }
/* videos: a lot smaller */
#ibsh-robotics .clip_strip video { height: 150px; }
#ibsh-robotics .video_grid.fill.single_video { grid-template-columns: minmax(0, 400px); }
#ibsh-robotics .video_grid.fill { grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); }
/* FLL posters: each on its own, side by side */
.poster_row { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.poster_row figure { margin: 0; flex: 0 1 230px; text-align: center; }
.poster_row img { width: 100%; display: block; border-radius: 4px; cursor: zoom-in; }
.poster_row figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--muted); }
#ibsh-robotics .event_awards { margin-top: 40px; }

/* Performances: smaller videos, each named by its song */
#performances .video_solo { max-width: 200px; margin: 44px auto 0; }
#performances .perf_grid .video-slot { flex: 0 1 250px; max-width: 250px; }
#performances .work_note { font-size: 0.78rem; margin-top: 8px; line-height: 1.45; }

/* Emcee: photos and clips at one height */
#emcee .emcee_row img { flex: 0 1 auto; width: auto; max-width: none; height: 170px; aspect-ratio: 4 / 3; }
#emcee .small_clips { margin-top: 10px; }
#emcee .small_clips video { height: 200px; }
#emcee .emcee_row + .sub_head, #emcee .clip_strip + .sub_head { margin-top: 60px; }

/* Embroidery: photos and the three looping clips in one centred row, all the same height */
.craft_row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.craft_row img, .craft_row video { height: 200px; width: auto; display: block; background: #000; object-fit: cover; }
.craft_row img { aspect-ratio: 4 / 3; cursor: zoom-in; }
.craft_row video { aspect-ratio: 9 / 16; }
@media screen and (max-width: 1000px) { .craft_row img, .craft_row video { height: 150px; } }
@media screen and (max-width: 700px) { .craft_row img, .craft_row video { height: 110px; } .craft_row { gap: 6px; } }

/* 3D printing: just three in a row; the artwork and the model sit on white */
.plate_row { flex-wrap: nowrap; }
.plate_row figure { flex: 1 1 0; max-width: 280px; }
.plate_model .stl-view { background: #fff; }
@media screen and (max-width: 600px) { .plate_row img, .plate_row .svg_panel { height: 150px; } .plate_row { gap: 8px; } }

/* Still on My Workbench: one box each, like the home page */
.wip_grid.wip_boxes { grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; margin-top: 10px; }
@media screen and (max-width: 900px) { .wip_grid.wip_boxes { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 560px) { .wip_grid.wip_boxes { grid-template-columns: 1fr; } }
.wip_grid.wip_boxes .wip_card { background: rgba(4, 10, 24, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* === Projects, third pass (2026-09-28) === */
/* Makerspace: each card's photos and clips in one sideways strip, three tiles showing at a time */
.maker_strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 18px) / 3.25); gap: 6px; margin-top: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.maker_strip img, .maker_strip video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #000; scroll-snap-align: start; }
.maker_strip img { cursor: zoom-in; }
/* Emcee: Winter Concert as two rows */
#emcee .emcee_row.second_row { margin-top: 10px; }
/* Robotics photos: a little smaller on phones */
@media screen and (max-width: 700px) {
    .media_grid.scroll2.comp_photos { --scroll-col: 130px; grid-template-rows: repeat(2, 130px); }
    .media_grid.scroll2.comp_photos img { width: 130px; height: 130px; }
    .award_moments { gap: 8px; }
}
/* Type a touch smaller everywhere */
html { font-size: 93.75%; }
/* Section elevator: hover a dot to see where it goes */
.spy-tick { position: relative; }
.spy-tick::after {
    content: attr(data-label);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.85);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--fg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.spy-tick:hover::after, .spy-tick:focus-visible::after { opacity: 1; }
.spy-line-compact { gap: 9px; }
.spy-line-compact .spy-tick { width: 14px; height: 12px; }

/* === Projects, fourth pass (2026-09-28) === */
/* Robotics: documents that sit together in one row at their usual size */
.pdf_grid.docs.docs_row { flex-wrap: nowrap; justify-content: center; }
/* Inspire photos: one line, scroll sideways */
.media_grid.scroll2.comp_photos.single_line { --scroll-rows: 1; grid-template-rows: 182px; }
@media screen and (max-width: 700px) { .media_grid.scroll2.comp_photos.single_line { grid-template-rows: 130px; } }
/* Club slide decks: three together, each showing a slide and a quarter so it's clear they scroll */
.pdf_grid.docs.slides_row { flex-wrap: nowrap; justify-content: center; }
.pdf_grid.docs.slides_row .pdf-view.filmstrip .pdf-page { flex: 0 0 80%; width: 80%; }
.pdf_grid.docs.slides_row .pdf-view.filmstrip .pdf-page:only-child { flex-basis: 100%; width: 100%; }
@media screen and (max-width: 700px) { .pdf_grid.docs.docs_row, .pdf_grid.docs.slides_row { flex-wrap: wrap; gap: 20px; } }

/* === EDUCATION LAYOUT (2026-09-28): University first, no tabs, each course holds its own work === */
.school_link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.school_link:hover,
.school_link:focus-visible {
    border-bottom-color: currentColor;
}
.school_link span {
    font-size: 0.7em;
    color: var(--muted);
}
.block_title {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg);
    text-align: center;
    padding-bottom: 18px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--line);
}
.block_title + .work_block {
    padding-top: 0;
    border-top: 0;
}
.work_block + .entry_group {
    padding-top: 56px;
    border-top: 1px solid var(--line);
}
/* a course with work to show takes the whole row */
.entry.entry_full {
    grid-column: 1 / -1;
    padding: 28px 30px 32px;
}
.entry_full > h4:not(.sub_head) {
    font-size: 1.35rem;
}
/* headings that belong to the work inside a course card keep their own look, not the card title's */
.entry h4.sub_head,
.entry .pdf_item h4 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.72rem;
    line-height: 1.5;
}
.entry .audio_item h4 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.78rem;
}
.entry .social-embed-text h4 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.85rem;
}
.education .entry_full > p {
    max-width: 820px;
}
.entry_full > .media_grid,
.entry_full > .embed_row,
.entry_full > .link_row,
.entry_full > .video_frame,
.entry_full > .pdf-view,
.entry_full > .pdf_grid,
.entry_full > .gif_row,
.entry_full > .zoomable,
.entry_full > .audio_list,
.entry_full > details {
    margin-top: 24px;
}
.entry_full > .sub_head {
    margin: 34px 0 14px;
}
.entry_full > .sub_head + * {
    margin-top: 0;
}
.entry_full .pdf-view.filmstrip {
    max-width: none;
}
.entry_full .pdf-view.filmstrip .pdf-page {
    height: 300px;
}
.entry_full .pdf_grid .pdf-view.filmstrip .pdf-page {
    height: 380px;
}
.entry_full > .zoomable {
    display: block;
    max-width: 760px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.entry_full .embed_row .video_frame {
    max-width: none;
}
.media_grid.wide.sq img {
    flex-basis: 200px;
    max-width: 200px;
    aspect-ratio: 1;
}
@media screen and (max-width: 600px) {
    .entry.entry_full { padding: 20px 16px 24px; }
    .entry_full .pdf-view.filmstrip .pdf-page { height: 200px; }
    .entry_full .pdf_grid .pdf-view.filmstrip .pdf-page { height: 260px; }
}
/* whole pictures side by side at one height (artwork of mixed shapes: nothing cropped) */
.media_grid.wide.hrow img {
    flex: 0 0 auto;
    height: 230px;
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
}
@media screen and (max-width: 600px) {
    .media_grid.wide.hrow img { height: 150px; }
}

/* === Projects, fifth pass (2026-09-28) === */
/* 2023 VEX photos: two rows with about half a centimetre between them */
.media_grid.scroll2.comp_photos.spaced { gap: 19px; }
/* documents in a row share one height; each keeps its own width (--ar = the page's width / height, set in the HTML) */
.pdf_grid.docs.docs_row, .pdf_grid.docs.slides_row { flex-wrap: wrap; gap: 20px; }
.pdf_grid.docs.docs_row > .pdf_item { flex: 0 0 auto; max-width: none; width: calc(var(--doc-h) * var(--ar)); }
.pdf_grid.docs.docs_row .pdf-view.filmstrip .pdf-page { flex: 0 0 100%; width: 100%; height: var(--doc-h); object-fit: cover; }
[data-tab-panel="pasvex"] .pdf_grid.docs_row { --doc-h: min(388px, calc((88vw - 60px) / 2.3)); }
[data-tab-panel="club"] .pdf_grid.docs_row { --doc-h: 400px; }
/* phones: titles that wrap onto more lines sit just above their document, so the documents in a row still line up */
@media screen and (max-width: 768px) {
    .pdf_grid.docs.docs_row { align-items: stretch; }
    .pdf_grid.docs.docs_row > .pdf_item { display: flex; flex-direction: column; }
    .pdf_grid.docs.docs_row > .pdf_item > h4 { flex: 1 0 auto; display: flex; align-items: flex-end; justify-content: center; }
}
/* club slide decks: one row across the full width. A deck with more slides gets 1.25x the room and shows
   a slide and a quarter, so every slide ends up the same width, and so the same height. */
.pdf_grid.docs.slides_row { flex-wrap: nowrap; width: min(1200px, 92vw); margin-left: calc((100% - min(1200px, 92vw)) / 2); }
.pdf_grid.docs.slides_row > .pdf_item { flex: 1 1 0; min-width: 0; max-width: none; width: auto; }
.pdf_grid.docs.slides_row > .pdf_item.multi { flex-grow: 1.25; }
.pdf_grid.docs.slides_row .pdf-view.filmstrip .pdf-page { flex: 0 0 80%; width: 80%; height: auto; }
.pdf_grid.docs.slides_row .pdf-view.filmstrip .pdf-page:only-child { flex-basis: 100%; width: 100%; }
@media screen and (max-width: 700px) { .pdf_grid.docs.slides_row { flex-wrap: wrap; } .pdf_grid.docs.slides_row > .pdf_item { flex: 1 1 100%; } }
/* Emcee: the event names sit close above their photos */
#emcee .sub_head { margin-bottom: 6px; }

/* Education, second pass (2026-09-28) */
.education .grade_head {
    text-align: center;
}
.education .entry_group .skill_tags {
    justify-content: center;
}
.block_title_next {
    margin-top: 80px;
}
/* a course shown fully centred (Visual Foundation Studio) */
.entry.centered {
    text-align: center;
}
.education .entry.centered > p {
    margin-left: auto;
    margin-right: auto;
}
.entry.centered .media_grid.logos,
.entry.centered .media_grid.pages {
    justify-content: center;
}
.pdf-view.landscape {
    max-width: 760px;
}
/* a handful of photos: one centred line, never wrapping */
.media_grid.wide.oneline {
    flex-wrap: nowrap;
}
.media_grid.wide.oneline img {
    flex: 1 1 0;
    min-width: 0;
    max-width: 260px;
}
/* the four square sketches: two by two */
.embed_row.sketch_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 600px) {
    .embed_row.sketch_grid { grid-template-columns: 1fr; }
}
.entry.centered .media_grid.pages {
    display: flex;
    flex-wrap: wrap;
}
.entry.centered .media_grid.pages img {
    flex: 0 1 240px;
    width: 240px;
}
.entry_group > .pdf-view.filmstrip {
    max-width: none;
}
/* Home: My Story is two short paragraphs */
.about_txt p + p { margin-top: 14px; }
/* rows that split evenly (15 = 8 + 7, 12 = 6 + 6), the last row centred, never one left on its own */
.media_grid.balanced {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.media_grid.balanced img,
.entry.centered .media_grid.pages.balanced img {
    flex: 0 0 calc((100% - (var(--cols) - 1) * 10px) / var(--cols));
    width: calc((100% - (var(--cols) - 1) * 10px) / var(--cols));
    height: auto;
}
.media_grid.logos.balanced {
    gap: 10px;
}
.media_grid.logos.balanced img {
    height: auto;
}
@media screen and (max-width: 600px) {
    .media_grid.logos.balanced img { flex-basis: calc((100% - 30px) / 4); width: calc((100% - 30px) / 4); }
    .media_grid.pages.balanced img { flex-basis: calc((100% - 10px) / 2); width: calc((100% - 10px) / 2); }
}
/* logo drafts: every tile the size of an 8-across tile, so drafts with fewer per row don't blow up */
.media_grid.logos.balanced {
    max-width: calc((100% - 70px) / 8 * var(--cols) + (var(--cols) - 1) * 10px);
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 600px) {
    .media_grid.logos.balanced { max-width: none; }
}

/* Education, third pass: wider course cards, every row centred (a lone card sits in the middle) */
.education .entry_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}
.education .entry {
    flex: 1 1 400px;
    max-width: 520px;
    text-align: center;
}
.education .entry.entry_full {
    flex-basis: 100%;
    max-width: none;
}
.education .entry > p {
    margin-left: auto;
    margin-right: auto;
}
/* the two exchanges, each with its own side */
.education .entry_grid.exchange_pair .entry {
    max-width: none;
    flex-basis: 380px;
}
.exchange_embed {
    margin-top: 20px;
}
.exchange_embed.embed_row.single {
    grid-template-columns: minmax(0, 1fr);
}
/* two clips side by side */
.media_grid.clips.pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin: 18px auto 0;
}
.media_grid.clips.pair video {
    aspect-ratio: 16 / 9;
}
@media screen and (max-width: 600px) {
    .media_grid.clips.pair { grid-template-columns: 1fr; }
}

/* Creative Coding: midterm and final side by side, each waits for a click before it runs */
.embed_row.sketch_projects { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: 28px; }
.sketch-start {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 0; cursor: pointer; color: #fff; text-align: center;
    background: rgba(10, 10, 10, 0.78);
    font-family: var(--font-mono); letter-spacing: 0.04em;
}
.sketch-start strong { font-size: 0.95rem; font-weight: 500; }
.sketch-start span { font-size: 0.66rem; color: var(--muted); }
.sketch-start:hover { background: rgba(10, 10, 10, 0.62); }
.sketch-start[hidden] { display: none; }
.sketch-replay {
    white-space: nowrap; flex: none;
    border: 0; background: none; padding: 0; cursor: pointer;
    color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.sketch_note { margin-top: 10px; font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
.sketch_note b { color: var(--fg); font-weight: 500; }

/* Education, fourth pass: cards reach the panel edges (two, or three, per row), nothing pushes past the page */
.education .entry {
    flex: 0 0 calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
    min-width: 0;
}
.education .entry_grid.cols3 .entry {
    flex-basis: calc((100% - 36px) / 3);
    max-width: calc((100% - 36px) / 3);
}
.education .entry.entry_full,
.education .entry_grid.cols3 .entry.entry_full {
    flex-basis: 100%;
    max-width: 100%;
}
.education .entry_grid.exchange_pair .entry {
    flex-basis: calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
}
.entry_full > *,
.entry_full .embed_row > * {
    min-width: 0;
}
.embed_row > .video_frame + .video_frame {
    margin-top: 0;
}
.pdf-view.filmstrip .pdf-page {
    cursor: zoom-in;
}
@media screen and (max-width: 760px) {
    .education .entry,
    .education .entry_grid.cols3 .entry,
    .education .entry_grid.exchange_pair .entry {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Education, fifth pass */
/* each project inside a course gets real breathing room before it starts */
.entry_full > .sub_head.proj_head {
    margin-top: 72px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--fg);
    letter-spacing: 0.14em;
}
.entry_full > p + .sub_head.proj_head {
    margin-top: 40px;
    padding-top: 0;
    border-top: 0;
}
.entry_full > .sub_head.proj_head + .sub_head {
    margin-top: 18px;
}
/* the conference mockup lines up with the draft pages above it */
.entry_full > .zoomable {
    max-width: none;
    margin-top: 10px;
}
/* ink paintings: one row at one height, sideways scroll when it doesn't fit */
.media_grid.wide.hrow.scrollrow {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: safe center;
    padding-bottom: 6px;
}

/* cards in a row share one height; their words sit in the middle of it, top to bottom */
.education .entry:not(.entry_full) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Intro to Web Development: the GitHub repo browsed in place (js/repo-viewer.js).
   Folder tree on the left, the chosen file's code or picture on the right. */
.entry_full > .repo-view { margin-top: 24px; }
.repo-view {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
}
.repo-view > .link_row { margin: 0; padding: 22px; }
.repo-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.repo-icon {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
}
.repo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-owner { color: var(--muted); }
.repo-name strong { font-weight: 400; }
.repo-branch {
    margin-left: auto;
    flex: none;
    padding: 2px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.66rem;
    color: var(--muted);
}
.repo-body {
    display: grid;
    grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
    height: 520px;
}
.repo-body.is-empty { grid-template-columns: minmax(0, 1fr); height: auto; }
.repo-tree {
    position: relative;
    overflow: auto;
    border-right: 1px solid var(--line);
    padding: 8px 0;
    overscroll-behavior: contain;
}
.repo-list { list-style: none; margin: 0; padding: 0; }
.repo-list[hidden] { display: none; }
.repo-item {
    display: block;
    width: 100%;
    padding: 5px 14px 5px calc(14px + var(--depth, 0) * 14px);
    border: 0;
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.repo-item::before {
    display: inline-block;
    width: 1.1em;
    color: var(--faint);
}
.repo-item.is-dir { color: var(--fg); }
.repo-item.is-dir::before { content: '▸'; transition: transform 0.15s ease; }
.repo-item.is-dir[aria-expanded="true"]::before { transform: rotate(90deg); }
.repo-item.is-file::before { content: ''; }
.repo-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.repo-item.is-current { background: rgba(255, 255, 255, 0.12); color: var(--fg); }
.repo-file {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.repo-path {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.repo-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, 0.35);
}
.repo-code {
    margin: 0;
    padding: 12px 0;
    counter-reset: repo-line;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.6;
    tab-size: 2;
    white-space: pre;
    width: max-content;
    min-width: 100%;
    color: rgba(255, 255, 255, 0.86);
}
.repo-line { counter-increment: repo-line; padding-right: 20px; }
.repo-line::before {
    content: counter(repo-line);
    display: inline-block;
    width: 3.2em;
    margin-right: 16px;
    padding-right: 10px;
    text-align: right;
    color: var(--faint);
    border-right: 1px solid var(--line);
    user-select: none;
}
.repo-code a { color: var(--fg); }
.repo-image {
    display: block;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    margin: 16px auto;
    object-fit: contain;
}
.repo-note {
    padding: 22px 18px;
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}
.repo-note a { color: var(--fg); }
.repo-view .site-embed-caption span { color: var(--muted); }

/* ============================================================
   PHONES (2026-09-28). Everything below is inside max-width: 768px,
   so the desktop layout is untouched.
   ============================================================ */
@media screen and (max-width: 768px) {

    /* --- Header + slide-in menu ---
       The header's blur moves onto a ::before layer: a backdrop-filter on the header itself
       turns it into the frame for its fixed children, which squeezed the menu into the 60px bar. */
    header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: none;
    }
    header::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(5, 5, 5, 0.6);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .mobile-menu {
        top: 0;
        right: 0.6rem;
        width: 44px;
        height: 60px;
        padding: 0;
        border: 0;
        background: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        font-size: 0;
    }
    .mobile-menu span {
        display: block;
        width: 20px;
        height: 1.5px;
        border-radius: 1px;
        background: var(--fg);
        transition: transform 0.3s ease, opacity 0.2s ease;
    }
    .mobile-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .mobile-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .mobile-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .search-toggle {
        top: 13px;
        right: 3.6rem;
    }

    /* a sheer panel down the full right side of the screen */
    header nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: max(38vw, 190px);
        height: 100vh;
        height: 100dvh;
        padding: 84px 22px 40px;
        box-sizing: border-box;
        background: rgba(12, 12, 14, 0.32);
        -webkit-backdrop-filter: blur(10px) saturate(1.1);
        backdrop-filter: blur(10px) saturate(1.1);
        border-left: 1px solid var(--line);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
        z-index: 200;
    }
    header nav.show {
        right: 0;
        transform: none;
        visibility: visible;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }
    header nav ul#menu {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    header nav .nav-item > a {
        display: block;
        padding: 11px 0;
        font-size: 0.74rem;
        line-height: 1.4;
        white-space: normal;
    }
    header nav .nav-item.current > a {
        border-bottom: 0;
        text-decoration: underline;
        text-underline-offset: 5px;
    }
    /* each page's arrow opens its list of sections right under it */
    header nav .nav-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    header nav .nav-item > a {
        flex: 1;
        min-width: 0;
    }
    header nav .nav-caret {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-right: -10px;
        padding: 0;
        color: var(--muted);
    }
    header nav .nav-caret .caret-icon {
        width: 11px;
        height: 7px;
    }
    header nav .dropdown {
        flex-basis: 100%;
        min-width: 0;
        padding: 0 0 8px 12px;
        border-left: 1px solid var(--line);
        margin-left: 2px;
    }
    header nav .nav-item.open .dropdown {
        display: flex;
    }
    header nav .dropdown li a {
        padding: 7px 0;
        font-size: 0.78rem;
        line-height: 1.35;
        white-space: normal;
        background: none;
    }
    header nav .contact-item .dropdown {
        left: 0;
        right: auto;
    }
    /* the footer is hidden on phones, so its Email / Phone / Resume links sit at the bottom of the menu */
    header nav.show {
        display: flex;
        flex-direction: column;
    }
    header nav .menu-footer-links {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        list-style: none;
    }
    header nav.show ul#menu {
        margin-bottom: 28px; /* at least this much room above the links when the menu is long */
    }
    header nav .menu-footer-links a {
        font-family: var(--font-mono);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--fg);
        text-decoration: none;
    }

    /* --- The hint line along the bottom of each page sits close to the bottom edge --- */
    .rain-hint,
    .page-hint {
        bottom: 14px;
        padding: 0 20px;
        line-height: 1.6;
        letter-spacing: 0.22em;
    }

    /* --- Spacing: every section is its own "page" ---
       On phones each project, award, job, school and home section gets at least a full screen with
       its content centred, so one item never shares the screen with the next. Taller ones scroll. */
    .center_name {
        height: 100vh;
        height: 100svh;
    }

    /* Home */
    .hero ~ .about_me,
    .hero ~ .skills_section,
    .hero ~ .upcoming_projects {
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 76px;
        padding-bottom: 48px;
    }
    .about_me { gap: 28px; }
    .skills_section h2 { margin-bottom: 22px; }

    /* Education: each school opens on its own screen, then its courses follow */
    .school {
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100svh;
        justify-content: center;
        padding: 76px 5% 48px;
    }
    .course_section,
    body[data-bg="sunflowers"] .course_section {
        margin-bottom: 96px;
        padding-bottom: 28px;
    }
    .entry_group { margin-bottom: 120px; }
    .education .entry_group > .entry_grid { row-gap: 28px; }
    /* the main categories (Courses, Activities & Projects) each get a screen of their own,
       like a chapter page, before their courses begin */
    .education .block_title,
    .education .block_title_next {
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin: 0;
        padding: 0;
        border-bottom: 0;
        font-size: 1rem;
        letter-spacing: 0.24em;
    }
    .education .block_title::after {
        content: '';
        width: 44px;
        height: 1px;
        background: var(--line);
    }
    .entry_full > .sub_head.proj_head { margin-top: 48px; padding-top: 24px; }

    /* Education on the sunflower field: no single long panel. Each chapter screen, the AP art block and
       each year group is its own dark box, with the flowers showing between them and down the sides. */
    body[data-bg="sunflowers"] .school {
        padding-left: 6%;
        padding-right: 6%;
    }
    body[data-bg="sunflowers"] .course_section {
        width: 88%;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body[data-bg="sunflowers"] .course_section > .block_title,
    body[data-bg="sunflowers"] .course_section > .work_block,
    body[data-bg="sunflowers"] .course_section > .entry_group {
        box-sizing: border-box;
        margin-bottom: 40px;
        border: 0;
        border-radius: 16px;
        background: rgba(3, 6, 6, 0.8);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    body[data-bg="sunflowers"] .course_section > .work_block,
    body[data-bg="sunflowers"] .course_section > .entry_group {
        padding: 28px 18px 30px;
    }
    body[data-bg="sunflowers"] .course_section > .entry_group:last-child {
        margin-bottom: 0;
    }

    /* Projects */
    .projects .project_section,
    .projects .project_section.practice {
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100svh;
        justify-content: center;
        padding-top: 76px;
        padding-bottom: 56px;
    }

    /* a little more air between a project's title, its section labels and its videos */
    .projects .project_txt + .sub_head,
    #musical-theater .project_txt + .sub_head { margin-top: 26px; }
    .projects .sub_head { margin-bottom: 20px; }
    .projects .video_grid { gap: 32px; }

    /* video rows stack on phones; each tile is only as tall as its video (the desktop row width
       was being read as a height once the row turned into a column) */
    .video_grid.three {
        align-items: center;
    }
    .video_grid.three .video-slot,
    #performances .perf_grid .video-slot {
        flex: none;
        max-width: 340px;
    }

    /* Volunteer */
    .volunteer_sector,
    .volunteer_sector:first-of-type {
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 76px;
        padding-bottom: 48px;
        margin-bottom: 0;
    }
    .volunteer_sector > div:not(.event_intro) {
        margin-bottom: 48px;
        padding-bottom: 48px;
    }
    .event_intro { min-height: 0; }
    .event_intro .ig-embed { margin-bottom: 40px; }
    .event_awards { margin-top: 36px; }

    /* Work Experience: a good stretch of storm between jobs, so each one reads on its own */
    .experience {
        min-height: 0;
        margin: 30vh auto;
        margin: 30svh auto;
    }
    .center_name + .experience { margin-top: 8svh; }
    /* a job's picture or live site sits close above its title, not a big gap apart */
    .experience > div + div { margin-top: 26px; }
    .experience > div + div > h2:first-child { margin-top: 0; }

    /* Awards */
    .awards .award,
    .awards .award:first-of-type,
    .awards .award:last-of-type {
        box-sizing: border-box;
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 76px;
        padding-bottom: 48px;
        margin-bottom: 0;
    }
    /* more room down the sides: the words sit in from the edges, the pictures a little further in */
    .awards .award {
        padding-left: 8%;
        padding-right: 8%;
    }
    .awards .award_gallery {
        width: 86%;
        margin-left: auto;
        margin-right: auto;
    }
    /* Intro to Web Development repo: file list on top, the file underneath */
    .repo-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 190px 360px; height: auto; }
    .repo-body.is-empty { grid-template-rows: auto; }
    .repo-tree { border-right: 0; border-bottom: 1px solid var(--line); }
    .repo-item { padding-top: 7px; padding-bottom: 7px; }
    .repo-code { font-size: 0.68rem; }
}

/* ============================================================
   TABLETS (iPad and similar, 2026-09-29): 769-1180px wide, or a touch screen up to 1366px
   (iPad Pro in landscape). Phones use the 768px block above; full-size desktop is untouched.
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1180px),
       screen and (min-width: 769px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    /* Volunteer: the last section fills the space between the header and the footer with its
       content centred, so it sits in the middle of the screen once you reach the end of the page */
    .volunteer_sector:last-of-type {
        box-sizing: border-box;
        min-height: calc(100vh - 56px - 46px);
        min-height: calc(100svh - 56px - 46px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 32px;
        padding-bottom: 32px;
        margin-bottom: 46px;
    }
    .volunteer_sector:last-of-type .event_intro {
        min-height: 0;
    }

    /* Awards: each award gets the screen to itself, content centred, with room around it */
    .awards .award,
    .awards .award:first-of-type,
    .awards .award:last-of-type {
        box-sizing: border-box;
        min-height: calc(100vh - 56px);
        min-height: calc(100svh - 56px);
        padding-top: 80px;
        padding-bottom: 80px;
        margin-bottom: 0;
    }

    /* Work Experience: no big box per job. Only the words get a soft panel, sized to the words;
       pictures and live sites sit outside it. Each job still locks into the centre of the screen. */
    body[data-bg="rain"] .experience {
        min-height: 0;
        padding: 0;
        margin: 50vh auto;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-radius: 0;
    }
    body[data-bg="rain"] .experience > div:has(> h2) {
        box-sizing: border-box;
        padding: 36px 40px;
        border-radius: 18px;
        background: rgba(3, 5, 9, 0.66);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    .experience > div + div { margin-top: 28px; }
    .experience > div + div > h2:first-child { margin-top: 0; }
}