/* Definitions -- Modern CSS:  Custom Properties as Variables */
:root {
    /* == Colors == */
    --warm-beige: #dfd9c9;  /* slightly warm beige */
    --parchment: #ceb99c;  /* slightly darker */
    --dark-lavender: #65608b;
    --charcoal: #3f3b37;
    --charcoal-lighter: #4e4a45;
    --cloud-dancer: #f1f0ec;  /* or whitesmoke f5d5d5 */
    --rose: #996b68;

    /* Mid-century modern palette */
    --sharon-mauve:     #a599a0;
    --ivory:            #f7e8c6;
    --tangerine:        #e49e5a;
    --blue-horizon:     #d0e8ea;

    --turquoise-blue:   #3a838f;
    --champagne-beige:  #9c8e77;
    --empire-gold:      #f2b643;

    --coral-rose:       #e1755b;
    --zephyr-green:     #9cc7b9;
    --bermuda-pink:     #f0c3be;
    --pearl-gray:       #dbdcdb;

    /* == fonts == */
    --monospace-font: "Source Code Pro";

    /* == Text Shadow Definitions */
    /* -- material design shifted from t.l. shadows to centered -- */
    --standard-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
    --white-shadow: 0px 2px 4px rgba(1, 1, 1, 0.3);
    --deep-shadow:  /** two layers **/
        0 18px 26px rgba(0, 0, 0, 0.32),
        0 6px 10px rgba(0, 0, 0, 0.24);

    --link-color: #995400;
    --link-underline-color: color-mix(in srgb, var(--link-color) 90%, white);


    /* noise */
    --card-noise-url: url('/2025/noise128x128.png');
    --noise-opacity: 0.25;
    --noise-blur-radius: 1px;
}

/* In some cases we want to use italics always for ampersands */
@font-face {
    font-family: 'ItalicForAmpAlways';
    font-style: italic;
    font-weight: 400;
    font-display: fallback;
    src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSqn7B6D.woff2) format('woff2');
    unicode-range: U+0026; /* only ampersand */
}

/* Light_Musical_Symbols are good quality sharps and flats to use in place of default unicode */
/* accidentals, note shapes, etc.  There are a few others -- Myke made this. */
@font-face {
    font-family: 'Light_Musical_Symbols';
    font-style: normal;
    font-weight: 400;
    src: url('/2025/Light_Musical_Symbols.woff') format('woff');
    unicode-range: U+2669-266F, U+1D100-1D1EA;
}


/* overall page background */
body {
    background-color: var(--charcoal);
    margin: 0;
    padding: 1rem 0.5rem 0.5rem 0.5rem;
    font-family: "Light_Musical_Symbols", "Cormorant Garamond", "Garamond", serif;
    font-size: clamp(16px, 14px + 0.6vw, 22px);
}

a {
    color: var(--link-color, #f0f5d0);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--link-underline-color, red);
}




main {
    position: relative;
    background-color: var(--cloud-dancer);
    padding: 1rem 2rem 1rem 2rem;
    z-index: 2;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "ItalicForAmpAlways", "Light_Musical_Symbols", "Cormorant Garamond", "Garamond", serif;
    font-weight: normal;
    letter-spacing: 0.5px;
    text-shadow: var(--standard-shadow);
}

h1 {
    font-size: clamp(1.1rem, 0.9rem + 2vw, 2.1rem);
}


.noise {
    /* add noise without the full shadow-card drop shadows etc. -- uses the same ::after selector */
    position: relative;
    --noise-blur-radius: 0.5px;
}


/* ===== shadow card component ===== */
.shadow-card {
    /* ===== DEFAULTS (so nothing breaks if a section forgets to set vars) ===== */
    --card-base: #4e4a45;
    --card-accent: color-mix(in srgb, var(--card-base) 80%, white);  /* 20% lighter */
    --card-text-color: #ffffff;
    --link-color: #f0f5d0;
    --link-underline-color: color-mix(in srgb, var(--link-color) 70%, var(--card-base));

    position: relative;
    width: fit-content;
    padding: 2.5rem 3rem;

    line-height: 1.45;      /* slightly more comfortable line spacing */
    color: var(--card-text-color);

    border-radius: 6px; /* subtle modern curve */
    background: linear-gradient(var(--card-accent) 0px, var(--card-base) 50px);

    box-shadow: var(--deep-shadow);
    overflow: hidden; /* important so blurred noise doesn't spill out */
}

/* subtler/blurred noise layer */
:is(.shadow-card, .noise)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--card-noise-url);
    background-size: 128px 128px;

    opacity: var(--noise-opacity);           /* adjust: 0.08 = very subtle; 0.20 = stronger */
    filter: blur(var(--noise-blur-radius));      /* soften the noise */
    mix-blend-mode: soft-light; /* blend it into the card tones */

    pointer-events: none;
}

/* top highlight strip */
.shadow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    border-radius: inherit;

    background: linear-gradient(
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0)
    );
    pointer-events: none;
}


.shadow-card ul {
    /* remove marker -- draw with before -- to get shadows */
    list-style: none;
    padding-left: 0.5em;
}
.shadow-card li {
    position: relative;
    margin-bottom: 1.2em;   /* big spacing between items */
}

.shadow-card li::before {
    content: "•";
    font-size: 1.2em;
    color: var(--link-underline-color);
    position: absolute;
    top: -0.2em;
    left: -0.5em;

    /* all this for shadow */
    text-shadow: var(--standard-shadow);
}

.shadow-card h1 {
    margin: 0;
    text-align: center;
}

.shadow-card h2 {
    margin: 0;
}

.shadow-card.charcoal {
    --card-base: var(--charcoal);      /* warm charcoal */
    --card-accent: var(--charcoal-lighter);
}

.shadow-card.beige {
    --card-base: var(--warm-beige, #ffffff);
    --card-text-color: #202020;
    --link-color: #404020;
}

.shadow-card.lavender {
    --card-base: var(--dark-lavender);
}

.shadow-card.rose {
    --card-base: var(--rose);
}


.title-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--parchment);
    width: clamp(345px, 50vw, 450px);
    height: clamp(20px, 10vh, 40px);
    margin: 0 0 0 2rem;  /* just left margin */
    text-align: center;
    text-shadow: var(--white-shadow);
    font-size: clamp(20px * 0.7, 10vh * 0.7, 40px * 0.7);  /* use 70% of space */
    z-index: 1;
    box-shadow:
        0 18px 26px rgba(0, 0, 0, 0.32),  /* big ambient shadow */
        0 6px 10px rgba(0, 0, 0, 0.24);  /* tight close shadow */
}


/* === Intro - layout === */

.intro-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 800px) {
    .intro-layout {
        flex-direction: column;
        align-items: flex-end;
    }
}

.biography {
    flex: 1 1 auto;
    margin-top: 1rem;
    padding-top: 1rem;
    --card-base: #545c8c;
}

.paperclip {
    flex: 0 0 auto;
    position: relative;
    width: clamp(100px, 28vw, 150px);
    margin: -15px 20px 1.5rem 2rem;
    z-index: 3;
}

.paperclip img {
    display: block;
    transform: rotate(-6deg);
    transform-origin: top center;
    width: 100%;
    height: auto;
    box-shadow: var(--deep-shadow);
}

.paperclip::after {
    content: '';
    position: absolute;
    top: -15px;
    right: 60px;
    width: 96px;
    aspect-ratio: 1 / 1;
    background-image: url('/2025/paperclip_transparent_128.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
}

/* == Publications section == */
.pubs-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

@media (max-width: 800px) {
    .pubs-section {
        flex-direction: column;
        align-items: flex-end;
    }
}

.pubs-section-holder {
    margin-bottom: 2rem;
}



.pubs-section .section-card {
    flex: 1 1 auto;
}

.w-auto {
    width: auto;
}

.w-100 {
    width: 100%;
}

.d-none {
    display: none;
}

.m21 {
    font-family: var(--monospace-font), monospace;
    font-size: 0.75em;
}



/* PhotoSwipe Light Box */
.pswp img {
    max-width: none;
    object-fit: contain;
}
.pswp__img--placeholder--blank{
    display: none !important;
}