/* Import a clean sans-serif font */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");

:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --muted-text: #666666;
    --accent-color: #3b82f6;
}

.reveal {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Base text sizing */
.reveal section {
    font-size: 32px;
    line-height: 1.4;
    text-align: left;
    padding: 80px;
}

/* Headings */
.reveal h1,
.reveal h2,
.reveal h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.4em;
}

.reveal h1 {
    font-size: 3em;
}

.reveal h2 {
    font-size: 2.2em;
}

.reveal h3 {
    font-size: 1.4em;
}

/* Paragraphs */
.reveal p {
    color: var(--muted-text);
    max-width: 900px;
}

/* Title slide */
.title-slide {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.title-slide h1 {
    margin-bottom: 0.2em;
}

.title-slide .subtitle {
    font-size: 1.1em;
    color: var(--muted-text);
}

/* Columns layout */
.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

/* Links */
.reveal a {
    color: var(--accent-color);
    text-decoration: none;
}

.reveal a:hover {
    text-decoration: underline;
}

/* Remove default Reveal chrome */
.reveal .controls,
.reveal .progress {
    display: none !important;
}

/* ==============================
   Dense / text-heavy adjustments
   Add at the end of minimal.css
   ============================== */

/* 1) Use more of the slide canvas */
.reveal section {
    /* was: padding: 80px; */
    padding: 24px;
    /* was: font-size: 32px; */
    font-size: 22px;
    line-height: 1.32;
}

/* 2) Make headings smaller and tighter */
.reveal h1 {
    font-size: 2.4em;
    margin: 0 0 0.25em 0;
}
.reveal h2 {
    font-size: 1.8em;
    margin: 0 0 0.35em 0;
}
.reveal h3 {
    font-size: 1.25em;
    margin: 0 0 0.35em 0;
}

/* 3) Reduce default spacing between blocks */
.reveal p,
.reveal ul,
.reveal ol {
    margin: 0 0 0.6em 0;
}

/* 4) Allow wider text blocks (less artificial whitespace) */
.reveal p,
.reveal ul,
.reveal ol {
    /* was: max-width: 900px; */
    max-width: 1100px;
}

/* 5) Denser lists */
.reveal li {
    margin: 0.15em 0;
}

/* 6) Code blocks: shrink a bit so they don’t dominate */
.reveal pre code {
    font-size: 0.75em;
    line-height: 1.25;
}

/* 7) Two-column layout: reduce gap to fit more content */
.columns {
    /* was: gap: 80px; */
    gap: 40px;
}

/* 8) Optional: slightly reduce slide scaling effect */
.reveal .slides {
    /* helps keep more content visible before Reveal scales down */
    text-rendering: optimizeLegibility;
}

/* ==============================
   Two-column layout (text-heavy)
   ============================== */

.twocol {
    display: grid;
    grid-template-columns: 1fr 1.15fr; /* give text a bit more room */
    gap: 36px;
    align-items: start;
    width: 100%;
}

/* Column base */
.twocol .col {
    min-width: 0; /* critical for preventing overflow */
}

/* Slightly denser typography inside columns */
.twocol p,
.twocol li {
    font-size: 0.85em;
    line-height: 1.35;
}

/* Lists: tighter spacing */
.twocol ul {
    margin: 0.4em 0 0 0;
    padding-left: 1.1em;
}

.twocol li {
    margin: 0.25em 0;
}

/* Headings inside columns */
.twocol h4 {
    font-size: 1.05em;
    margin: 0 0 0.4em 0;
}

/* Images: constrain height, not width */
.twocol img {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
    display: block;
}

/* Optional: vertically center image column */
.twocol .col:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Optional: right column nudged slightly inward */
.twocol .col.right {
    padding-left: 8px;
}

section.dense .twocol p,
section.dense .twocol li {
    font-size: 0.8em;
    line-height: 1.3;
}

/* =========================
   Two-column slide with
   height-aware image
   ========================= */

/* Make twocol fill the usable slide height */
.twocol {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 36px;
    align-items: stretch;
    height: 100%;
}

/* Left column: stack image + caption vertically */
.twocol .col {
    min-width: 0;
}

.twocol .col:first-child {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The image: scale by height, not width */
.twocol .col:first-child img {
    max-height: 65vh; /* key line: prevents overflow */
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 0.6em auto;
    flex-shrink: 1;
}

/* Caption under image */
.twocol .col:first-child > div {
    font-size: 0.75em;
    color: #666;
    line-height: 1.25;
    text-align: center;
}

/* Right column: slightly denser text */
.twocol .col.right {
    font-size: 0.85em;
    line-height: 1.35;
}

/* Optional: tighter list spacing */
.twocol .col.right ul {
    margin-top: 0.4em;
}

.twocol .col.right li {
    margin: 0.25em 0;
}

<style>
/* Outer 2-col layout */
.twocol {
    display: grid;
    grid-template-columns: 1.05fr 1fr; /* left a bit wider */
    gap: 1.2rem;
    align-items: start;
}

/* Left column contains two figures stacked */
.leftfigs {
    display: grid;
    grid-template-rows: 1fr 1fr; /* equal height slots */
    gap: 0.8rem;
}

/* Each figure */
.leftfigs figure {
    margin: 0;
}

/* Make images scale to the column width */
.leftfigs img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Optional: cap image height so two fit vertically.
   Adjust 28vh based on your theme / slide size. */
.reveal section .leftfigs img {
    max-height: 28vh;
    object-fit: contain;
}

/* Simple caption styling */
.leftfigs figcaption {
    font-size: 0.6em;
    opacity: 0.85;
    margin-top: 0.25rem;
}

/* Right column “text box” */
.rightbox {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08); /* looks good on dark themes */
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* If you're on a light theme, you may prefer:
.rightbox{ background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); }
*/
</style>

/* Only the title slide */
#sec-title-slide {
    position: relative;
    overflow: hidden;
}

#sec-title-slide .title-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 28px 48px;
}

#sec-title-slide .title-bg img {
    width: min(1100px, 92%);
    height: auto;
    opacity: 0.42;
    filter: grayscale(1) contrast(1.35) brightness(0.85);
    mix-blend-mode: multiply;
}

#sec-title-slide > *:not(.title-bg) {
    position: relative;
    z-index: 1;
}
/* =========================
   Skill overview slide
   ========================= */

.skill-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: start;
    width: 100%;
    max-width: 1200px;
}

/* Each category block */
.skill-cat {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.skill-cat-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 10px 0;
    color: #111;
    font-size: 0.95em;
}

/* Row layout */
.skill-row {
    display: grid;
    grid-template-columns: 1.6fr 0.75fr 110px 2.1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    margin: 10px 0;
}

.skill-name {
    font-weight: 600;
    color: #111;
    font-size: 0.82em;
    line-height: 1.25;
}

.skill-meta {
    font-size: 0.78em;
    color: #666;
    white-space: nowrap;
}

.skill-note {
    font-size: 0.78em;
    color: #666;
    line-height: 1.25;
}

/* Level bar (5 steps) */
.skill-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.skill-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    width: 0%;
}

/* map data-level="1..5" to width */
.skill-bar[data-level="1"] > span {
    width: 20%;
}
.skill-bar[data-level="2"] > span {
    width: 40%;
}
.skill-bar[data-level="3"] > span {
    width: 60%;
}
.skill-bar[data-level="4"] > span {
    width: 80%;
}
.skill-bar[data-level="5"] > span {
    width: 100%;
}

/* Make it behave nicely on dense slides */
section.dense .skill-matrix {
    gap: 34px;
}
section.dense .skill-row {
    margin: 8px 0;
}
section.dense .skill-name,
section.dense .skill-meta,
section.dense .skill-note {
    font-size: 0.76em;
}

/* =========================
   Two images left + text box right
   (height-safe)
   ========================= */

/* Use one definitive twocol rule (overrides earlier duplicates) */
.reveal section .twocol {
    display: grid;
    grid-template-columns: 1.05fr 1fr; /* left slightly wider */
    gap: 36px;
    align-items: start;
    width: 100%;
    height: 100%;
}

/* Base column safety */
.reveal section .twocol .col {
    min-width: 0;
}

/* Left column: two stacked figures with a fixed height budget */
.reveal section .twocol .leftfigs {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.8rem;

    /* Key: constrain the whole left stack so captions stay visible.
     Tune this number if needed (70–78vh is typical). */
    max-height: 45vh;
}

/* Each figure: image gets remaining space, caption is auto height */
.reveal section .twocol .leftfigs figure {
    margin: 0;
    min-height: 0; /* allows grid item to shrink */
    display: grid;
    grid-template-rows: 1fr auto; /* image area + caption */
    gap: 0.25rem;
}

/* Make image fill the figure’s image area */
.reveal section .twocol .leftfigs img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}

/* Captions */
.reveal section .twocol .leftfigs figcaption {
    font-size: 0.6em;
    line-height: 1.15;
    color: var(--muted-text);
    opacity: 0.9;
    margin: 0;
    text-align: center;
}

/* Right column “text box” styled for your light theme */
.reveal section .twocol .rightbox {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Optional: ensure right column doesn’t overflow the slide */
.reveal section .twocol .rightbox {
    max-height: 74vh;
    overflow: auto;
}

/* IMPORTANT: neutralize older twocol image max-height rules
   so stacked images aren’t capped incorrectly by earlier selectors */
.reveal section .twocol img {
    max-height: none;
}

/* =========================
   Tighten heading-to-content spacing in the right column
   ========================= */

.reveal section .twocol .rightbox h4 {
    margin: 0.6em 0 0.15em 0; /* top | right | bottom | left */
}

/* First heading in the box shouldn't have extra top space */
.reveal section .twocol .rightbox h4:first-child {
    margin-top: 0;
}

/* Remove the "gap" contributed by the element after the heading */
.reveal section .twocol .rightbox h4 + p,
.reveal section .twocol .rightbox h4 + ul,
.reveal section .twocol .rightbox h4 + ol {
    margin-top: 0;
}

/* Optional: tighten list spacing a bit more under headings */
.reveal section .twocol .rightbox ul,
.reveal section .twocol .rightbox ol {
    margin-bottom: 0.5em;
}

/* =========================
   Right column: heading → content spacing
   Works for Org-exported headings
   ========================= */

.reveal section .twocol .rightbox h1,
.reveal section .twocol .rightbox h2,
.reveal section .twocol .rightbox h3,
.reveal section .twocol .rightbox h4,
.reveal section .twocol .rightbox h5 {
    margin: 0.7em 0 0.15em 0;
    font-weight: 600;
}

/* First heading should not float down */
.reveal section .twocol .rightbox h1:first-child,
.reveal section .twocol .rightbox h2:first-child,
.reveal section .twocol .rightbox h3:first-child,
.reveal section .twocol .rightbox h4:first-child {
    margin-top: 0;
}

/* Kill extra gap between heading and its content */
.reveal section .twocol .rightbox h1 + p,
h2 + p,
h3 + p,
h4 + p,
h1 + ul,
h2 + ul,
h3 + ul,
h4 + ul {
    margin-top: 0;
}

.reveal section .twocol .rightbox h3 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95em;
    color: #111;
}

/* =========================
   Timeline + supervisor gallery
   ========================= */

.twocol.edu {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* timeline wider, gallery narrower */
    gap: 36px;
    align-items: start;
    width: 100%;
}

/* Left column: make definition/timeline lists look nice */
.twocol.edu .timeline {
    min-width: 0;
}

.twocol.edu .timeline dl {
    margin: 0;
}
.twocol.edu .timeline dt {
    font-weight: 600;
    margin-top: 0.75em;
}
.twocol.edu .timeline dt:first-child {
    margin-top: 0;
}
.twocol.edu .timeline dd {
    margin: 0.15em 0 0.35em 0;
    color: var(--muted-text);
}

/* =========================
   Supervisor gallery (5 cards) — improved fit & balance
   ========================= */

.twocol.edu .supervisors {
    min-width: 0;

    display: grid;
    /* 3 columns makes 5 items fit as 3 + 2 without a giant last card */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    /* Budget the vertical space on the slide */
    max-height: 72vh;

    /* Keep cards similar height */
    grid-auto-rows: 1fr;

    align-content: start;
}

/* Card */
.twocol.edu .supervisors .sup {
    margin: 0;
    padding: 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.035);
    border: 1px solid rgba(0, 0, 0, 0.08);

    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;

    min-height: 0; /* important for grid shrink */
}

/* Photo frame: controls aspect & clipping */
.twocol.edu .supervisors .sup .photo {
    border-radius: 10px;
    overflow: hidden;

    /* Pick a portrait-friendly ratio that keeps heads big but not huge */
    aspect-ratio: 4 / 3;

    /* Let it shrink inside the card row */
    min-height: 0;
}

/* Image fills the frame */
.twocol.edu .supervisors .sup .photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* use 'contain' if you prefer no cropping */
}

/* Caption */
.twocol.edu .supervisors .sup figcaption {
    margin: 0;
    font-size: 0.58em;
    line-height: 1.15;
}

.twocol.edu .supervisors .sup figcaption .name {
    display: block;
    font-weight: 600;
    color: var(--text-color);
}

.twocol.edu .supervisors .sup figcaption .role {
    display: block;
    margin-top: 2px;
    color: var(--muted-text);
}

/* Dense slide tweak */
section.dense .twocol.edu .supervisors {
    max-height: 68vh;
    gap: 10px;
}

section.dense .twocol.edu .supervisors .sup {
    padding: 7px;
    gap: 6px;
}

section.dense .twocol.edu .supervisors .sup figcaption {
    font-size: 0.55em;
}

.twocol.edu .supervisors .sup .photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 35%; /* default focus a bit higher */
}