/* ============================================================
   anish — personal site
   rustic: oxblood ground, silver type, spectral serif.
   left-aligned bio + interactive art gallery.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Spectral+SC:wght@400;500&display=swap');

:root {
    /* --- oxblood / silver (default) --- */
    --bg:      #1c080b;   /* deep dark red */
    --bg-2:    #290f14;   /* lifted panel / frame ground */
    --ink:     #cdc6cb;   /* silver body */
    --bright:  #ece6ec;   /* bright silver — headings */
    --muted:   #9c8a90;   /* mauve-silver — secondary */
    --faint:   #74616a;   /* faint captions */
    --accent:  #c15f55;   /* rusty red — links & labels */
    --rule:    rgba(205, 198, 203, 0.15);
    --frame:   rgba(205, 198, 203, 0.28);

    /* To go BLACK-based instead, swap the two lines below in:
       --bg: #0d0d0f;  --bg-2: #171417;  (keep the rest) */

    --serif: 'Spectral', Georgia, 'Times New Roman', serif;
    --sc:    'Spectral SC', 'Spectral', Georgia, serif;
    --mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    --frame-w: 7rem;    /* width reserved for the left/right sigil rails */
    --frame-h: 2.8rem;  /* height reserved for the top/bottom sigil bands */

    interpolate-size: allow-keywords;   /* lets height:auto animate */
}

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

/* proportional scaling: the whole layout is built in rem, so the root
   font size drives everything. tie it to min(vw, vh) so the composition
   scales to fill the screen at any size (identical on 16:9 laptops,
   1080p, 4k) without ever overflowing. a floor keeps small windows
   readable; NO ceiling, so big screens and 4k panels fill instead of
   floating a tiny layout in the middle. */
html { font-size: max(12px, min(1.05vw, 1.87vh)); }

/* hide scrollbars site-wide — content still scrolls (wheel/trackpad),
   there's just no visible bar, so a tall painting never adds one */
* { scrollbar-width: none; }              /* firefox */
::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* webkit / blink */

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 0.96rem;
    line-height: 1.58;
    text-transform: lowercase;
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;          /* page never scrolls; footer always visible */
    display: flex;
    flex-direction: column;
    padding: var(--frame-h) var(--frame-w);   /* reserve room for the sigil frame */
}

/* ---- procedural cybersigilism border rails ---- */
.frame-l, .frame-r {
    position: fixed;
    top: var(--frame-h);       /* tuck between the top and bottom bands */
    bottom: var(--frame-h);
    width: var(--frame-w);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.frame-l { left: 0; }
.frame-r { right: 0; }
.frame-l pre, .frame-r pre {
    position: absolute;
    top: 0;
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 7.5px;
    line-height: 1;
    white-space: pre;
    color: #b8935a;              /* bronze sepia */
    opacity: 0.72;
    text-shadow: 0 0 4px rgba(184, 147, 90, 0.3);
}
.frame-l pre { left: 0; }
.frame-r pre { right: 0; transform: scaleX(-1); transform-origin: center; }

/* top / bottom bands — run between the corner tiles */
.frame-t, .frame-b {
    position: fixed;
    left: var(--frame-w);
    right: var(--frame-w);
    height: var(--frame-h);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.frame-t { top: 0; }
.frame-b { bottom: 0; }

/* corner tiles — the sigil turns the corner, joining the bands to the rails */
.frame-corner {
    position: fixed;
    width: var(--frame-w);
    height: var(--frame-h);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.frame-corner pre {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 7.5px;
    line-height: 1;
    white-space: pre;
    color: #b8935a;
    opacity: 0.72;
    text-shadow: 0 0 4px rgba(184, 147, 90, 0.3);
}
.frame-corner.tl { top: 0; left: 0; }
.frame-corner.tr { top: 0; right: 0; transform: scaleX(-1); }
/* bottom corners are already text-mirrored (upright glyphs); only the
   right one needs a horizontal flip, never a vertical one */
.frame-corner.bl { bottom: 0; left: 0; }
.frame-corner.br { bottom: 0; right: 0; transform: scaleX(-1); }
.frame-t pre, .frame-b pre {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 7.5px;
    line-height: 1;
    white-space: pre;
    color: #b8935a;              /* bronze sepia */
    opacity: 0.72;
    text-shadow: 0 0 4px rgba(184, 147, 90, 0.3);
}
/* bottom band is text-mirrored, so no CSS flip (keeps glyphs upright) */

::selection { background: var(--accent); color: var(--bg); }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* ---- top / bottom chrome (left-aligned) ---- */
.top-nav {
    flex: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.8rem 2.5rem 0;
    font-family: var(--serif);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
.top-nav a { color: var(--muted); transition: color 0.3s ease; }
.top-nav a:hover { color: var(--accent); text-decoration: none; }
.top-nav a.here { color: var(--ink); text-decoration: none; }

/* silver underline that slides between the active nav items */
.nav-underline {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 1px;
    background: rgba(224, 221, 230, 0.85);
    transform: translateX(0);
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* ---- loading screen: a crow flapping on blood red, fading into the site ---- */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.85s ease;
}
#loader.hide { opacity: 0; pointer-events: none; }
.crow {
    width: 220px;
    height: 222px;
    background-image: url('assets/crow-sprite.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 1980px 222px;   /* 9 frames × 220px */
    animation: crow-fly 0.85s steps(9) infinite;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.55));
}
@keyframes crow-fly {
    from { background-position: 0 0; }
    to   { background-position: -1980px 0; }
}

.bottom-nav {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem 2.5rem 0.8rem;
    font-family: var(--serif);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
.bottom-nav a { color: var(--muted); }
.bottom-nav a:hover { color: var(--accent); text-decoration: none; }
.updated {
    margin-left: auto;
    align-self: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--faint);
}

/* ---- interactive nav tab: emoji-sized crow + drifting purple text ---- */
.nav-interactive {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.top-nav a.nav-interactive:hover { color: var(--muted); }   /* colour lives in the gradient span */
.crow-mini {
    width: 1.3em;
    height: 1.3em;
    flex: none;
    background-image: url('assets/crow-sprite.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 11.7em 1.3em;      /* 9 frames × 1.3em */
    animation: crow-mini-fly 0.85s steps(9) infinite;
    transform: translateY(0.06em);
}
@keyframes crow-mini-fly {
    from { background-position: 0 0; }
    to   { background-position: -11.7em 0; }
}
.rainbow {
    background-image: linear-gradient(100deg,
        #a970ff 0%, #7c3aed 16%, #d8b4fe 33%, #9333ea 50%,
        #c084fc 66%, #6d28d9 83%, #a970ff 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: rainbow-drift 4.5s linear infinite;
}
@keyframes rainbow-drift { to { background-position: 220% center; } }

/* ---- map view: scale bar (right) replaces "last updated"; a polite
       credit to ryan li, whose map this view adapts, sits on the left ---- */
.scalebar { display: none; }
.map-credit { display: none; }
body.map-view .updated { display: none; }
body.map-view .map-credit {
    display: inline;
    align-self: center;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--muted);
}
body.map-view .map-credit a { color: var(--accent); }
body.map-view .scalebar {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 0.5rem;
}
.scale-segs { display: flex; border: 1px solid var(--muted); }
.scale-segs i { width: var(--seg-px, 22px); height: 7px; background: var(--muted); }
.scale-segs i:nth-child(even) { background: transparent; }
.scale-lbl {
    font-family: var(--serif);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

/* legacy toggle (JS no longer injects it, but hide just in case) */
#theme-toggle, .blue-bracket { display: none; }

/* ============================================================
   LANDING (index) — bio left, gallery right
   ============================================================ */
/* single-page stage: sections stacked, one shown at a time */
.stage {
    position: relative;
    flex: 1;
    min-height: 0;
}
.page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.page.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s ease, visibility 0s;
}
/* the scroll container becomes the fragment target on nav — no focus ring */
.page:focus, .page:focus-visible { outline: none; }

.landing {
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.5rem, 3vw, 2.5rem) 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.bio { max-width: 42rem; }
.bio > * + * { margin-top: 0.6rem; }

h1 {
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.2;
    color: var(--bright);
    text-transform: none;      /* proper capitalisation, not forced case */
    letter-spacing: 0.01em;
}
.phonetic {
    font-style: italic;
    font-weight: 400;
    font-size: 0.62em;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.loc {
    color: var(--muted);
    font-style: italic;
    font-size: 0.95rem;
    margin-top: 0.35rem !important;
    line-height: 1.7;
}

/* live location tracker */
.tracker { display: inline-flex; align-items: center; white-space: nowrap; }
.ping {
    position: relative;
    width: 7px; height: 7px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
    box-shadow: 0 0 6px var(--accent);
}
.ping::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent);
    animation: ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(3.4); opacity: 0; }
}
.coords {
    font-style: normal;
    font-family: var(--serif);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--faint);
    white-space: nowrap;
}

.bio p { color: var(--ink); line-height: 1.58; }

.label {
    font-family: var(--serif);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--accent);
    margin-top: 1.15rem !important;
    margin-bottom: 0.15rem;
}

.clean-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.clean-list li { color: var(--ink); line-height: 1.6; padding-left: 1rem; text-indent: -1rem; }
.clean-list li::before { content: "· "; color: var(--accent); }

.inline-links a { color: var(--accent); }
.sep { color: var(--faint); margin: 0 0.5rem; }

/* fun-facts toggle (silver) */
.funfacts summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    font-family: var(--serif);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--bright);          /* silver */
    transition: color 0.2s ease;
}
.funfacts summary::-webkit-details-marker { display: none; }
.funfacts summary::before {
    content: "▸";
    font-size: 0.82em;
    color: var(--muted);
    transition: transform 0.2s ease, color 0.2s ease;
}
.funfacts[open] summary::before { transform: rotate(90deg); color: var(--accent); }
.funfacts summary:hover { color: var(--accent); }
.funfacts summary:hover::before { color: var(--accent); }
.funfacts p {
    margin-top: 0.55rem;
    color: var(--ink);
    line-height: 1.65;
    animation: ff-in 0.35s ease both;
}
@keyframes ff-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ============================================================
   GALLERY — painting fills the column; thin silver border; loops
   ============================================================ */
.gallery { position: sticky; top: 2.5rem; }

/* the painting, with plain nav arrows just outside its edges */
.artframe { margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.art-stage { position: relative; display: inline-block; max-width: calc(100% - 2.8rem); line-height: 0; }

/* the painting, at its own proportions, with a thin silver border that
   extends into a soft fading halo */
.art-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    cursor: pointer;
    border: 1px solid rgba(224, 221, 230, 0.55);
    box-shadow:
        0 0 0 3px rgba(224, 221, 230, 0.06),
        0 0 22px 2px rgba(224, 221, 230, 0.12),
        0 26px 60px -34px rgba(0, 0, 0, 0.95);
    transition: opacity 0.28s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.art-img:hover, .art-img:focus-visible {
    outline: none;
    border-color: rgba(224, 221, 230, 0.8);
    box-shadow:
        0 0 0 3px rgba(224, 221, 230, 0.09),
        0 0 28px 3px rgba(224, 221, 230, 0.17),
        0 26px 60px -34px rgba(0, 0, 0, 0.95);
}

/* hover preview: the neighbouring painting overlaid on the current one */
.art-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.art-overlay.show { opacity: 1; }

/* plain left / right arrows, small so more of the image shows */
.art-arrow {
    flex: 0 0 auto;
    align-self: center;
    background: none;
    border: none;
    padding: 0 0.2rem;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 1.15rem;
    line-height: 1;
    color: var(--muted);
    transition: color 0.2s ease;
}
.art-arrow:hover { color: var(--accent); }

.art-caption {
    margin-top: 0.85rem;
    text-align: center;
    font-style: italic;
    color: var(--muted);
    font-size: 0.92rem;
    min-height: 1.4em;
}

.art-nav {
    display: flex;
    justify-content: center;
    gap: 1.7rem;
    margin-top: 0.3rem;
}
.nav-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--serif);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.3rem;
    transition: color 0.2s ease;
}
.nav-btn:hover { color: var(--accent); }

/* ============================================================
   SUB-PAGES (books / songs / movies / about / blog)
   reuse legacy classes, restyled to match.
   ============================================================ */
.grid-layout {
    width: 100%;
    max-width: 88rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.5rem, 3vw, 2.5rem) 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.content-block { display: flex; justify-content: flex-start; }
.text-group { display: flex; }
.bio-text {
    text-align: left;
    max-width: 42rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.bio-text h1 { margin-bottom: 0.2rem; }
.bio-text p { color: var(--ink); }

.section-title {
    font-family: var(--serif);
    font-size: 0.98rem;
    text-transform: none;      /* proper capitalisation */
    letter-spacing: 0.02em;
    color: var(--accent);
    margin-top: 1.5rem;
    margin-bottom: 0.35rem;
}
/* coursework header: title left, graduate-note right */
.section-title.coursework-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.grad-note {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--faint);
    white-space: nowrap;
}

/* right column art on sub-pages */
.saturn-container {
    position: sticky;
    top: 2.5rem;
    display: flex;
    flex-direction: column;
}
.feature-image {
    width: 100%;
    max-height: 62vh;
    object-fit: cover;
    border: 1px solid var(--frame);
    background: var(--bg-2);
    box-shadow: 0 18px 45px -25px rgba(0, 0, 0, 0.9);
}
.image-caption {
    margin-top: 0.7rem;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--faint);
    text-align: left;
}

/* ---- academics: single-column course list ---- */
.content-block.academics { grid-column: 1 / -1; }
.content-block.academics .bio-text { max-width: 55rem; }
.note {
    font-style: italic;
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 1.5rem;
}
.courses { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.course { line-height: 1.5; }
.course > summary {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    cursor: pointer;
    list-style: none;
    padding: 0.05rem 0;
}
.course > summary::-webkit-details-marker { display: none; }
.course > summary::marker { content: ''; }
.course > summary:hover .cname { color: var(--bright); }
.course .code {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    flex: none;
    width: 5.75rem;
    color: var(--bright);
}
/* course-code colour keyed to level */
.course .code.lvl2 { color: #7fb06b; }   /* 200-level */
.course .code.lvl3 { color: #7793d8; }   /* 300-level */
.course .code.lvl4 { color: #d3a24e; }   /* 400-level */
.course .code.lvl5 { color: #cf5f54; }   /* graduate   */
.course .cname { color: var(--muted); transition: color 0.2s ease; }
.course .cname em { color: var(--faint); font-size: 0.92em; }
.course[open] > summary .cname { color: var(--ink); }
/* smooth open / close (progressive enhancement in supporting browsers) */
.course::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 0.32s ease, opacity 0.3s ease, content-visibility 0.32s allow-discrete;
}
.course[open]::details-content {
    block-size: auto;
    opacity: 1;
}
.course-detail {
    margin: 0.3rem 0 0.4rem;
    padding-left: 6.65rem;      /* aligns under the course name */
    max-width: 46rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}
.course-detail .textbook { color: var(--faint); font-style: italic; margin-top: 0.25rem; }
.section-title .hint {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--faint);
    letter-spacing: 0;
}

/* ---- experience: entry list (abhiw-style) ---- */
.content-block.experience { grid-column: 1 / -1; }
.content-block.experience .bio-text { max-width: 54rem; }
.jobs { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 0.85rem; }
.job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.job-co {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--bright);
    text-transform: none;       /* capitalised bullet headings */
}
.job-co a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(205, 198, 203, 0.35);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.job-co a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}
.job-co .logo {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 3px;
    background-color: var(--bg-2);
    background-size: cover;         /* logo supplied via inline background-image */
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--rule);
    flex: none;
    display: inline-block;
    overflow: hidden;
}
.job-meta {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
}
.job-meta.ph { color: var(--faint); }   /* placeholder until real city/year given */
.job-role {
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--muted);
    margin-top: 0.2rem;
}
.job-desc { color: var(--ink); margin-top: 0.45rem; }
.pub-entry { margin-top: 0.55rem; }
.pub-title { color: var(--bright); font-weight: 600; font-size: 1.02rem; line-height: 1.4; text-transform: none; }
.pub-title:hover { color: var(--accent); text-decoration: none; }
.pub-meta { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; text-transform: none; }
.pub-meta strong { font-weight: 600; color: var(--ink); }
.pub-doi { font-family: var(--mono); font-size: 0.73rem; color: var(--muted); margin-top: 0.12rem; }
.pub-doi a { color: var(--accent); }

/* ============================================================
   BLOG — index of posts, each opening a single readable column
   ============================================================ */
.blog-index {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.5rem, 3vw, 2.5rem) 2rem;
}
.blog-sub { color: var(--muted); margin-top: 0.35rem; margin-bottom: 1.6rem; }
.post-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.post-list li { display: block; }
/* each post is a full-width clickable card */
.post-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--rule);
    padding: 0.9rem 0.2rem;
    cursor: pointer;
    font-family: var(--serif);
    transition: padding-left 0.2s ease;
}
.post-list li:last-child .post-link { border-bottom: 1px solid var(--rule); }
.post-link:hover { padding-left: 0.6rem; }
.post-link-title {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--bright);
    transition: color 0.2s ease;
}
.post-link:hover .post-link-title { color: var(--accent); }
.post-link-meta {
    font-style: italic;
    font-size: 0.86rem;
    color: var(--faint);
}

.blog-post {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(1.2rem, 3vh, 2rem) clamp(1.5rem, 3vw, 2.5rem) 3rem;
}
/* back to the index */
.post-back {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.2rem;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 0.9rem;
    color: var(--muted);
    transition: color 0.2s ease;
}
.post-back:hover { color: var(--accent); }
.post-head { margin-bottom: 1.4rem; }
.post-title {
    font-weight: 600;
    font-size: 1.85rem;
    line-height: 1.22;
    color: var(--bright);
    text-transform: none;      /* keep the title exactly as written */
    letter-spacing: 0.01em;
}
.post-meta {
    margin-top: 0.4rem;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--faint);
}
.blog-post p {
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.78;
}
.blog-post p + p { margin-top: 1.05rem; }
.post-close { color: var(--muted) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
    body { font-size: 16px; padding: 0; }
    .frame-l, .frame-r, .frame-t, .frame-b, .frame-corner { display: none; }
    .top-nav, .bottom-nav { padding-left: 1.5rem; padding-right: 1.5rem; }

    .landing, .grid-layout {
        grid-template-columns: 1fr;
        padding: 1.5rem 1.5rem 2.5rem;
        gap: 2.5rem;
    }
    /* art below the text on mobile */
    .gallery, .saturn-container { position: static; order: 2; }
    .bio, .content-block { order: 1; }
    .bio, .bio-text { max-width: none; }
    .art-img { max-height: 60vh; }
    .feature-image { max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
    .art-img { transition: none; }
    .ping::before { animation: none; }
    .funfacts p { animation: none; }
}

/* ============================================================
   INTERACTIVE — greater seattle topographic survey
   adapted with permission from ryan li's coast mountains map
   (github.com/rli8145/rli-personal-website-v2); fonts swapped
   to spectral, geography moved to seattle. the map fills the
   stage between our own top nav and footer.
   ============================================================ */
.map-page {
    /* fill the stage edge-to-edge; no scroll, no gutter */
    overflow: hidden;
    scrollbar-gutter: auto;
    /* map furniture palette (ryan's hypsometric chrome, kept) */
    --ink: #071a1f;
    --bone: #e9efe4;
    --bone-dim: #a8b5a6;
    --flag: #f2762e;
    --line: rgba(233, 239, 228, 0.28);
    --panel: rgba(7, 21, 25, 0.88);
}
.map {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: crosshair;
    background: var(--ink);
    color: var(--bone);
    border: 1px solid rgba(233, 239, 228, 0.16);
}
.map canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
#clouds { pointer-events: none; }

.graticule {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,  var(--line) 0 1px, transparent 1px 12.5%),
        repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 16.6667%);
    opacity: 0.14;
}

/* trail + walker */
.map .trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: map-fade 0.4s steps(3) both;
    animation-delay: 1.9s;
}
.trail-line { fill: none; stroke: none; visibility: hidden; }
.walker { filter: drop-shadow(1px 1px 0 rgba(7, 26, 31, 0.8)); }

/* water & region labels — spectral italic for the cartographic hand */
.map-labels { position: absolute; inset: 0; pointer-events: none; text-transform: none; }
.lbl {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: rotate(var(--r, 0deg));
    transform-origin: left center;
    white-space: nowrap;
}
.lbl-water {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    letter-spacing: 0.10em;
    color: rgba(233, 244, 244, 0.62);
    text-shadow: 0 1px 0 rgba(7, 26, 31, 0.6);
}
.lbl-region {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(233, 239, 228, 0.34);
}
.lbl-city {
    font-family: var(--serif);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(233, 239, 228, 0.5);
}
.lbl-city-sm {
    font-size: 0.56rem;
    letter-spacing: 0.24em;
    color: rgba(233, 239, 228, 0.42);
}

/* survey stations (map navigation) */
.stations { position: absolute; inset: 0; }
.peak {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 8px;
    animation: station-in 0.5s steps(4) both;
    animation-delay: var(--in-delay, 1.5s);
}
.peak-plate {
    position: absolute;
    top: calc(50% + var(--plate-dy, 0px));
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: var(--panel);
    border: 2px solid var(--bone);
    box-shadow: 3px 3px 0 rgba(7, 26, 31, 0.65);
    padding: 4px 10px 5px;
    transition: transform 0.12s steps(2);
}
.peak-role {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--bone);
}
.peak-name {
    font-family: var(--serif);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bone-dim);
}
.peak:hover .peak-plate,
.peak:focus-visible .peak-plate { border-color: var(--flag); }
.peak:hover .peak-role,
.peak:focus-visible .peak-role { color: var(--flag); }
.peak[aria-expanded="true"] .peak-plate { border-color: var(--flag); }
.peak[aria-expanded="true"] .peak-role { color: var(--flag); }
.peak.pressed .peak-plate { transform: translate(-50%, -50%) translateY(2px); }

@keyframes station-in {
    from { opacity: 0; transform: translate(-50%, -30%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes map-fade { from { opacity: 0; } to { opacity: 1; } }

/* cursor readout (GIS-style), pinned inside the map */
.readout {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    gap: 14px;
    padding: 6px 11px;
    background: var(--panel);
    border: 2px solid var(--bone);
    box-shadow: 4px 4px 0 rgba(7, 26, 31, 0.65);
    font-family: var(--serif);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    z-index: 3;
    animation: map-fade 0.4s steps(3) both;
    animation-delay: 1.7s;
}
#ro-elev { color: var(--flag); min-width: 70px; text-align: right; }

/* field report drawer */
.drawer {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: min(400px, calc(100% - 28px));
    max-height: min(58%, 440px);   /* leaves the top-row stations clickable */
    background: rgba(7, 21, 25, 0.95);
    backdrop-filter: blur(3px);
    border: 2px solid var(--bone);
    box-shadow: 4px 4px 0 rgba(7, 26, 31, 0.65);
    z-index: 5;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: none;
    opacity: 0;
    transform: translateY(14px);
    transition: transform 0.22s steps(6), opacity 0.22s steps(6);
    text-transform: none;
}
.drawer[hidden] { display: none; }
.drawer:not(.open) { pointer-events: none; }
.drawer.open { opacity: 1; transform: translateY(0); }
.drawer-head {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 10px;
    border-bottom: 2px solid var(--line);
    background: rgba(7, 21, 25, 0.97);
    z-index: 1;
}
.drawer-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.2;
    text-transform: none;
    color: var(--bone);
}
.drawer-close {
    background: none;
    border: 2px solid var(--bone);
    color: var(--bone);
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1;
    width: 30px;
    height: 30px;
    cursor: pointer;
    flex: none;
}
.drawer-close:hover { border-color: var(--flag); color: var(--flag); }

.map-page .panel { display: none; padding: 16px 20px 24px; }
.map-page .panel.active { display: block; }
.panel-intro {
    font-family: var(--serif);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone-dim);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.map-page .entry { padding: 13px 0; border-bottom: 1px solid var(--line); }
.map-page .entry:first-of-type { padding-top: 4px; }
.map-page .entry:last-child { border-bottom: none; }
.map-page .entry h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
    text-transform: none;
    color: var(--bone);
    margin-bottom: 4px;
}
.map-page .entry h3 a { color: var(--bone); text-decoration: none; border-bottom: 2px solid var(--flag); }
.map-page .entry h3 a:hover { color: var(--flag); }
.map-page .entry p { font-size: 0.86rem; color: var(--bone-dim); line-height: 1.5; }
.map-page .entry p a { color: var(--bone); text-decoration-color: var(--flag); }
.map-page .entry p a:hover { color: var(--flag); }
.map-page .entry p + p { margin-top: 5px; }
.interests-list {
    list-style: none;
    margin: 8px 0;
    display: grid;
    gap: 4px;
}
.interests-list li {
    position: relative;
    padding-left: 16px;
    font-size: 0.86rem;
    color: var(--bone-dim);
}
.interests-list li::before { content: "▸"; position: absolute; left: 0; color: var(--flag); }

/* compact coursework: two tight columns of code + short name */
.course-chips {
    list-style: none;
    margin: 8px 0 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 18px;
}
.course-chips li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--bone-dim);
    white-space: nowrap;
}
.course-chips .cc {
    font-family: var(--serif);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--bone);
    flex: none;
}
.course-chips em { color: var(--flag); font-style: normal; }
.map-page .entry-meta {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(168, 181, 166, 0.8);
}

/* keep the sigil rails clear of the map furniture on wide screens */
@media (max-width: 760px) {
    .map { border: none; }
    .readout { display: none; }
    .lbl-city-sm, .lbl-region { display: none; }
    .drawer { right: 10px; bottom: 10px; width: calc(100% - 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .peak, .readout, .map .trail { animation: none; }
    .drawer, .peak-plate { transition: none; }
    .crow-mini, .rainbow { animation: none; }
}