/* Homepage: one painted screen. The sky is an oil painting in assets/sky-*.webp, made by background-src/paint.html.
   The text is laid over it like a thin glaze: it multiplies with the paint beneath, so the brush
   strokes show through the letters, and SVG filters in index.html wear its edges a little. */
:root {
    --ink: #17233f;
    --paint: #1d2f66;
    --ink-soft: #2c3a5c;
    --paper: #faf7ee;
    --sun: #9a4a0b;
    --halo: 0 0 10px rgba(250, 247, 238, .35);
    --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --display: 'Fraunces', Georgia, serif;
    --gutter: clamp(20px, 4.5vw, 4.5rem);
}

* { box-sizing: border-box; }
.paint-defs { position: absolute; }
/* On big windows the type grows with the page, like the flower. 1rem is 16px up to 1440 x 900. */
html { color-scheme: light; background: #8fb6db; font-size: clamp(100%, min(1.111vw, 1.778vh), 250%); }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--ink);
    font-family: var(--text);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    background: #8fb6db url("assets/sky-wide.webp?v=20261110-wind") center 75% / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) {
    body { background-image: url("assets/sky-tall.webp?v=20261110-wind"); background-position: center bottom; }
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sun); }
a:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; border-radius: 2px; }
::selection { background: #f1b928; color: var(--ink); }

.home {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(14px, 2.4vw, 2rem) var(--gutter) max(clamp(16px, 3vh, 2.25rem), env(safe-area-inset-bottom));
    overflow: hidden;
}

/* Safari on iOS can only fill the areas behind its status bar and toolbar with one flat colour,
   which it takes from a fixed element touching that edge. These strips give it the painting's
   sky for the top and its grass for the bottom. Other browsers never show them. */
.edge { display: none; position: fixed; left: 0; right: 0; height: 6px; z-index: 3; pointer-events: none; }
@supports (-webkit-touch-callout: none) {
    .edge { display: block; }
    .edge-top { top: 0; background: #7ba0d0; }
    .edge-bottom { bottom: 0; background: #638848; }
}

/* The clouds are their own layer over the sky so sunflower.js can let them drift, and the meadow
   canvas is that script's layer of moving grass blades. Without the script both simply sit still. */
.clouds {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("assets/clouds-wide.webp?v=20261110-wind") center 75% / cover repeat-x;
    will-change: transform;
}
@media (max-aspect-ratio: 4/5) {
    .clouds { background-image: url("assets/clouds-tall.webp?v=20261110-wind"); background-position: center bottom; }
}
.meadow { position: absolute; left: 0; z-index: 0; display: block; pointer-events: none; }
.meadow-near { z-index: 1; }   /* the blades in front of the flower's foot */

.topbar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.mark { display: inline-flex; padding: 8px; margin: -8px; }
.mark svg { width: clamp(30px, 2.6vw, 2.375rem); height: auto; filter: url(#paint-text); }
.nav { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav a {
    padding-block: 10px;
    font-size: 1.125rem;   /* the same setting as the lines under the name */
    text-shadow: var(--halo);
}

.intro { position: relative; z-index: 2; align-self: start; padding-top: clamp(28px, 9vh, 6.875rem); max-width: 34rem; }
.name {
    margin: 0 0 0 -.04em;
    font-family: var(--display);
    font-style: italic;
    font-weight: 600;
    font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
    font-size: clamp(3.4rem, 7.4vw, 7rem);
    line-height: .95;
    letter-spacing: -.012em;
    color: #1d2f66;
    filter: url(#paint-name);
}
.roles { list-style: none; margin: clamp(18px, 3.4vh, 2.125rem) 0 0; padding: 0; font-size: 1.125rem; }
.roles li + li { margin-top: .15rem; }
.roles a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; text-shadow: var(--halo); }
.at { color: var(--ink-soft); font-weight: 500; }
.brand {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    background: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
    filter: drop-shadow(0 0 5px rgba(250, 247, 238, .8));
}
.brand-comma { --logo: url("assets/comma-logo.png"); }
.brand-sculptor { --logo: url("assets/sculptor-logo.png"); }
.brand-purdue { --logo: url("assets/purdue-logo.png"); width: 1.5em; }
.resume {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    margin-top: .45rem;
    padding-block: .5rem;
    font-size: 1rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-shadow: var(--halo);
}
.resume-format { color: var(--ink-soft); font-size: .8125rem; font-weight: 500; }

.links { position: relative; z-index: 2; display: flex; gap: .375rem; margin-left: -.75rem; }
.links a { position: relative; display: inline-grid; place-items: center; width: 2.875rem; height: 2.875rem; border-radius: 50%; }
.links a::before {
    content: "";
    position: absolute;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 50%;
    background: radial-gradient(rgba(250, 247, 238, .6), rgba(250, 247, 238, 0) 70%);
    z-index: -1;
}
.links svg { width: 1.375rem; height: 1.375rem; }

/* Where the sunflower grows. Its base sits in the grass, its head about level with the name. */
.sunflower {
    position: absolute;
    z-index: 1;
    right: clamp(24px, 11vw, 220px);
    bottom: clamp(6px, 2.5vh, 30px);
    width: min(30vw, 40vh);
    height: min(60vw, 78vh);
    pointer-events: none;
}
.sunflower canvas { display: block; width: 100%; height: 100%; }
.sunflower-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sunflower-placeholder .sway { transform-origin: 152px 600px; animation: sway 5.5s ease-in-out infinite; }
.sunflower-placeholder .leaf { transform-box: fill-box; animation: flutter 2.6s ease-in-out infinite; }
.sunflower-placeholder .leaf-a { transform-origin: 100% 50%; }
.sunflower-placeholder .leaf-b { transform-origin: 0 50%; animation-delay: -.9s; }
.sunflower-placeholder .leaf-c { transform-origin: 0 50%; animation-delay: -1.7s; }
@keyframes sway {
    0%, 100% { transform: rotate(-1.2deg); }
    35% { transform: rotate(2.6deg); }
    55% { transform: rotate(1.4deg); }
    75% { transform: rotate(3deg); }
}
@keyframes flutter {
    0%, 100% { transform: rotate(0deg) scaleY(1); }
    50% { transform: rotate(4deg) scaleY(.94); }
}

@media (max-width: 700px) {
    body { font-size: .9375rem; }
    .nav a { font-size: 1rem; }
    .intro { padding-top: clamp(20px, 6vh, 56px); }
    .name { font-size: clamp(3rem, 14vw, 4.5rem); }
    .roles { font-size: 1rem; }
    .sunflower { right: -2vw; bottom: 1vh; width: 50vw; height: min(100vw, 54vh); }
}
@media (max-height: 560px) and (min-aspect-ratio: 4/5) {
    .intro { padding-top: 16px; }
    .name { font-size: clamp(2.6rem, 12vh, 4.25rem); }
}
@media (prefers-reduced-motion: reduce) {
    .sunflower-placeholder .sway, .sunflower-placeholder .leaf { animation: none; }
}

/* Glaze the text into the painting where the browser can blend it. The colours are lighter
   because they darken whatever paint lies under them. */
@supports (mix-blend-mode: multiply) {
    :root { --ink: #3c4a74; --ink-soft: #5a6892; --paint: #5d70a6; --sun: #a8642a; }
    /* The name is thick paint and stays solid; .intro gives up its stacking context so the
       lines under it can blend with the page. */
    .intro { z-index: auto; }
    .topbar, .roles, .resume { mix-blend-mode: multiply; }
}