/* layout.css — page shell and chrome: content column, masthead, nav tabs,
   breadcrumb, per-page header, section labels. Cross-cutting responsive
   rules live at the end of pages.css so they win the cascade. */

#content {
	width: 100%;
	max-width: 1100px;
	box-sizing: border-box;
	margin: auto;
	background-color: rgba(8, 10, 9, 0.78);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding: 0px 10px 10px 10px;
	font-size: 9.5pt;
}

#header {
    height: 128px;
}

/* Left accent rule, mirroring .page-header on every tab, but carrying the ".ai"
   gradient instead of a flat accent colour. It is a pseudo-element, not a
   border: a border cannot take a gradient, and the glow has to be a filter on
   the rule alone or it would bleed onto the name. The 10px margin is
   .tab-pane's left padding, so this rule and the name land on the same x as
   each tab's accent rule and page title. */
#header #title {
    position: relative;
    margin-left: 10px;
    /* 26px = the rule's 3px + 23px of gap. 23 rather than .page-header's 16 on
       purpose: LRTOksana's J hooks ~9px left of its text origin, so a matching
       16 would leave the name looking half as far from the rule as every page
       title. This makes the *ink* line up. */
    padding: 22px 8px 0px 26px;
    font-family: var(--font-display);
    float: left;
}
/* Vertical, where the wordmark's is horizontal: on a 3px-wide rule a 90deg
   gradient would compress all three stops into nothing. */
#header #title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-stops));
    filter: drop-shadow(0 0 12px var(--brand-glow));
}

h1#name {
    margin: 0;
    font-size: 40pt;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.5px;
}

#header #title #subheader {
    font-size: 15pt;
    text-align: right;
    color: rgba(255, 255, 255, 0.85);
}

#header #location {
    padding: 18px 8px 0px 7px;
    float: right;
    font-family: var(--font-display);
    font-size: 13pt;
    text-align: right;
}

#body {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 12px;
}

/* Nav tabs: modern pill buttons (they are real <a> links now). */
.title {
    display: inline-block;
    padding: 7px 16px;
    margin: 0 8px 8px 0;
    font-family: var(--font-body);
    font-size: 11.5pt;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.07);
    color: white !important;
}

.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
                linear-gradient(180deg, var(--tab-c, #5fbf95) 0%, color-mix(in srgb, var(--tab-c, #5fbf95) 60%, #10201a) 100%);
    border-color: color-mix(in srgb, var(--tab-c, #5fbf95) 70%, transparent);
}

/* ---- Header: social buttons (GitHub / LinkedIn / Email) ---- */
#social-bubbles {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: flex-end;
    margin-top: 10px;
}
.bubble-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 27px;
    margin-right: 5px;
    border-radius: 7px;
    color: var(--accent);
    border: 1px solid var(--panel-edge);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}
.bubble-btn:last-child { margin-right: 0; }
.bubble-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bubble-btn svg { display: block; width: 17px; height: 17px; }

/* Nav tab bar: flex row that also sticks to the top on scroll. */
#tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 30;
    /* No background or backdrop-filter: the nav sits inside #content, which
       already blurs the photo behind it. A second (nested) backdrop-filter here
       renders as an opaque black bar in Chrome, so the pills float on the
       translucent panel instead. */
    background: transparent;
    padding: 10px 2px 6px;
}
#body .title {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#body .title:not(.active):hover { border-color: var(--tab-c, var(--accent)); }

/* ---- The "+" nav disclosure: Policy / Music / Education ----
   The plus spins on hover. Clicking it adds .is-open to the group and the three
   pills whiz out beside it, staggered so they arrive one after another. They
   are real links in the DOM the whole time (crawlable), collapsed to zero width
   rather than display:none, which is what lets them animate at all. max-width
   is animated instead of width so the open size comes from the label text
   rather than a magic pixel value. */
/* The plus and the pills are stacked in a single grid cell, so the cell is
   always as big as whichever is larger. That is what makes the plus "expand":
   the pills widen behind it (invisible at first), the cell grows to fit them,
   and the plus, being a stretched grid item, grows with it, wrapping to a
   second row too if the nav is narrow. No width has to be measured in JS. */
/* Every selector here is prefixed with #body, and deliberately so: the generic
   `#body .title { transition: background-color, border-color }` rule above is
   specificity (1,1,0) and would otherwise replace the transition lists below
   wholesale, leaving the whole sequence to snap with no animation at all. */
#body .more-group {
    display: inline-grid;
    grid-template-areas: "stack";
    /* stretch, not center: when the pills wrap to a second row the cell grows
       taller and the plus has to grow with it. */
    align-items: stretch;
}
#body .more-group > * { grid-area: stack; }

#body .tab-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Square-ish while closed, so the bare "+" sits in a circle rather than a
       stretched pill. min-width is what keeps the collapsed cell 34px wide;
       max-width is the clamp that the open state lifts. */
    min-width: 34px;
    max-width: 34px;
    padding-left: 0;
    padding-right: 0;
    font-size: 14pt;
    overflow: hidden;
    /* Above the pills, so it hides them while they widen underneath. */
    z-index: 2;
    transition: opacity 0.26s ease, visibility 0s linear 0s;
}
#body .tab-more .more-plus {
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.5, 1);
}
#body .tab-more:hover .more-plus,
#body .tab-more:focus-visible .more-plus { transform: rotate(360deg); }

/* Open: the clamp comes off so the plus stretches to the full pill area, keeps
   spinning as it grows, then fades out and is gone. visibility (delayed until
   the fade finishes) takes it out of the tab order and off the pointer, so
   nothing invisible sits on top of the pills. */
#body .more-group.is-open .tab-more {
    max-width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s ease 0.22s, visibility 0s linear 0.48s;
}
#body .more-group.is-open .tab-more .more-plus { transform: rotate(360deg) scale(1.15); }

#body .more-pills {
    display: inline-flex;
    align-items: center;
    /* Wrap rather than overflow on a narrow nav; the plus follows the taller
       cell, which is the "wordwrap down" case. */
    flex-wrap: wrap;
}
#body .more-pills .title {
    max-width: 0;
    /* Vertical padding stays so the row does not change height mid-animation;
       only the horizontal box collapses. */
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(-14px) scale(0.85);
    transition: max-width 0.34s ease, padding 0.34s ease, margin 0.34s ease,
                border-width 0.34s ease, opacity 0.26s ease,
                transform 0.34s cubic-bezier(0.34, 1.45, 0.5, 1);
}
#body .more-group.is-open .more-pills .title {
    max-width: 10em;
    padding-left: 16px;
    padding-right: 16px;
    margin-right: 8px;
    border-width: 1px;
    opacity: 1;
    transform: none;
}
/* The box widens immediately (that is what drives the plus expanding), but the
   pill itself only appears once the plus has grown and started fading, each one
   a beat after the last. Delays are per-property, in the order declared above:
   max-width, padding, margin, border-width, opacity, transform. */
#body .more-group.is-open .more-pills .title:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s, 0.30s, 0.30s; }
#body .more-group.is-open .more-pills .title:nth-child(2) { transition-delay: 0s, 0s, 0s, 0s, 0.37s, 0.37s; }
#body .more-group.is-open .more-pills .title:nth-child(3) { transition-delay: 0s, 0s, 0s, 0s, 0.44s, 0.44s; }

@media (prefers-reduced-motion: reduce) {
    #body .tab-more, #body .tab-more .more-plus,
    #body .more-pills .title { transition: none !important; transition-delay: 0s !important; }
    #body .tab-more:hover .more-plus,
    #body .tab-more:focus-visible .more-plus { transform: none; }
    #body .more-pills .title { transform: none; }
}

/* Special "Ask AI" nav pill — a gradient stand-out among the section tabs. */
.tab-ask {
    border: 0;
    background: linear-gradient(135deg, #22d3ee, #6366f1 55%, #a855f7);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}
.tab-ask:hover { filter: brightness(1.08); }
.tab-ask i { margin-right: 5px; }

.breadcrumb { margin: 4px 4px 2px; }
.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 10pt;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.6); }
.breadcrumb li + li::before { content: "/"; opacity: 0.4; }
.breadcrumb a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* "← All projects" link inside a project page's header intro. */
.crumb-back { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.crumb-back:hover { text-decoration: underline; }

/* Every content pane shares the same padding, so all pages start their header
   and content at the same place. This is what makes Work / Projects / Skills /
   AI line up with Home / Cloud / Policy / Community / Bio. (Cloud keeps its own
   #cloud-page rule with identical values.) */
.tab-pane { padding: 24px 10px 14px 10px; }

/* =====================  PAGE HEADER (every tab)  ===================== */
/* One consistent header at the top of each page: a display title with a left
   accent rule, above the content. Pages that used to carry their title inside
   the first glossy panel now use this instead, so every tab opens the same
   way. Zero horizontal margin so the accent rule lines up with the left edge
   of the panels and cards below it. */
.page-header {
    margin: 4px 0 22px 0;
    border-left: 3px solid var(--accent);
    padding-left: 16px;
}
.page-title {
    font-family: var(--font-display);
    font-size: 30pt;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.page-intro {
    font-family: var(--font-body);
    font-size: 12pt;
    color: var(--text-soft);
    margin: 8px 0 0;
    max-width: 72ch;
    line-height: 1.6;
}

/* =====================  SECTION LABELS  ===================== */
/* Lighter, uppercase accent labels that group cards (Projects, Community, and
   the Skills categories). Deliberately quieter than the page title so the two
   never read as competing headings. */
.section-title {
    font-family: var(--font-body);
    font-size: 11pt;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 22px 0 10px 0;
    padding: 0;
    border: 0;
}

/* ---- StashPop link in the header social row: a small labelled pill (the
        animated warp circle + "stashpop"), matching the bubble styling of the
        GitHub / LinkedIn / Email icons beside it ---- */
.stashpop-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 27px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 11pt;
    border: 1px solid var(--panel-edge);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}
.stashpop-link:hover {
    transform: translateY(-2px);
    color: #F7C146;
    border-color: #F7C146;
}
.stashpop-link .wp-classic { --size: 16px; flex: 0 0 auto; }
.stashpop-link:visited { color: var(--accent); }

/* musica.studio beside it: same pill, the pixel note from that site. scripts/note.js
   redraws the note's rects on a 60 bpm clock (the notes rise above the box). */
.musica-link { margin-left: 5px; }
.musica-link:hover { color: #7ed47f; border-color: #7ed47f; }
.musica-note { width: 14px; height: auto; flex: 0 0 auto; overflow: visible; }

/* The classic warp logo (flicker-free), lifted from the StashPop blog. */
.wp-classic {
    --c1: #995ECE; --c2: #F7C146; --dur: 2.4s;
    inline-size: var(--size, 60px); aspect-ratio: 1; border-radius: 50%;
    position: relative; overflow: hidden; display: inline-block;
    background: var(--c1); isolation: isolate;
}
.wp-classic::before, .wp-classic::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; transform: scale(0);
}
.wp-classic::before { background: var(--c2); z-index: 1; animation: wpk-classic-a var(--dur) linear infinite; }
.wp-classic::after  { background: var(--c1); z-index: 2; animation: wpk-classic-b var(--dur) linear infinite; }
@keyframes wpk-classic-a { 0%{transform:scale(0)} 50%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes wpk-classic-b { 0%,45%{transform:scale(0)} 95%{transform:scale(1)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) {
    .wp-classic::before, .wp-classic::after { animation: none !important; }
}