:root {
  /* --- UNIT CONTRACT ---
     dvh  — all vertical coordinates and spacing. Tracks real viewport
            height (excludes mobile browser chrome). Used in Y rows,
            gap, border, diagonal runs, and shape-outside polygons.
     vw   — all horizontal anchor points. X columns and shape-outside
            x-coordinates. Never use % inside shape-outside (resolves
            against the float's own box, not the viewport).
     %    — only for widths/positions that intentionally scale with
            a parent element (e.g. float widths, clip-path overflows
            like -2% and 102%).
  --- */

  /* === 1. MASTER GEOMETRY INPUT === */
  --angle:      58deg;
  --gap:        0.65dvh;
  --border:     0.65dvh;
  --inset-full: calc(var(--gap) + var(--border));

  /* === 1a. PANEL CONTENT SPACING (Gallery, Projects, Music) === */
  /* Applied as margins on .panel-heading / .panel-sub, NOT as padding on
     .panel-content — padding on the content box shifts floats and breaks
     shape-outside alignment. Also added to diagonal x-vertices in
     shape-outside polygons to buffer text from the diagonal edge. */
  --panel-pad-top:  3dvh;   /* margin-top on heading (desktop) */
  --panel-pad-side: 2dvh;   /* margin on text blocks */
  --float-pad-side: 0.25dvh;   /* extra buffer added to float widths + diagonal polygon x-vertices */

  /* === 2. DERIVED MULTIPLIERS === */
  /* Only --mult-shallow and --mult-notch are safe to convert via trig.
     --mult-corner and --mult-corner-v are compound miter offsets whose
     exact derivation is unverified — keep as numeric constants for now. */
  --mult-shallow:  calc(cos(var(--angle)));      /* was 0.5299 — horizontal component of diagonal normal */
  --mult-half:     0.5;                          /* stays constant — not angle-dependent */
  --mult-notch:    calc(1 / sin(var(--angle)));  /* was 1.179  — reciprocal of vertical diagonal component */
  --mult-corner:   1.917;                        /* compound miter: verify derivation before converting to trig */
  --mult-corner-v: 1.9088;                       /* Connect-panel variant miter: verify before converting to trig */

  /* === 2a. FLOAT-LOCAL OFFSET MULTIPLIERS === */
  /* When converting clip-path vertices from viewport to float-local coordinates,
     the vw terms cancel and these multiplier differences remain. Each is the
     difference between the multiplier at the source vertex and the multiplier
     at the float's content-box edge. */
  --mult-offset-cs: calc(var(--mult-corner)  - var(--mult-shallow));  /* ≈1.387 — Projects + all mobile floats */
  --mult-offset-nh: calc(var(--mult-notch)   - var(--mult-half));     /* ≈0.679 — Gallery/Music desktop notch shoulder */
  --mult-offset-ns: calc(var(--mult-notch)   - var(--mult-shallow));  /* ≈0.649 — Gallery/Music desktop notch bottom */

  /* === 3. DIAGONAL RUN === */
  --diag-run: 7.870dvh;   /* horizontal run across one row at 58° */

  /* === 4. DESKTOP GRID — Y ROWS (dvh) === */
  /* dvh matches .viewport height: 100dvh — avoids mobile browser-chrome drift */
  --y-row-1: 41.11dvh;   /* Gallery/About top */
  --y-row-2: 53.70dvh;   /* Projects/Music top; About bottom */
  --y-row-3: 78.89dvh;   /* Blog/Connect top; Gallery/Projects bottom */
  --y-row-4: 91.48dvh;   /* Blog/Connect/Music bottom */

  /* === 4a. DESKTOP ROW SPANS (dvh) === */
  /* Vertical distances between Y rows — used inside shape-outside polygons
     where the literal dvh difference was previously hardcoded. */
  --row-span-12: calc(var(--y-row-2) - var(--y-row-1));  /* ≈12.59dvh — Gallery notch height */
  --row-span-23: calc(var(--y-row-3) - var(--y-row-2));  /* ≈25.19dvh — Projects/Music band height */
  --row-span-13: calc(var(--y-row-3) - var(--y-row-1));  /* ≈37.78dvh — Gallery/Music full height */

  /* === 5. DESKTOP GRID — X ANCHORS (vw) === */
  /* Derived from SVG at 1920×1080 */
  --x-col-left:        31.51vw;    /* Gallery/Projects left-column right edge  (605/1920) */
  --x-col-right:       68.49vw;    /* About/Music/Projects right-column left edge (1315/1920) */
  --x-col-bc:          47.66vw;    /* Blog/Connect shared diagonal boundary top x (915/1920) */
  /* Midpoint between --x-col-bc and --x-col-right — used as Connect panel bowtie collapse guard */
  --x-col-connect-mid: calc((var(--x-col-bc) + var(--x-col-right)) / 2);

  /* === 6. GLOBAL === */
  --bg:                   #101112;
  --color-text:           #f8f9fa;
  --color-text-sub:       #b0b0b0;
  --ls-heading:           0.06em;
  --ls-sub:               0.15em;
  --transition-panel:     0.3s ease;
  --anim-dur:             0.17s;
  --anim-step:            0.07s;
  --anim-ease:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* --- Font-size clamps use vh, not dvh ---
     dvh changes when mobile browser chrome (address bar) shows/hides.
     Using vh keeps text size stable during that transition.
     All geometry (clip-paths, floats, positioning) still uses dvh.
  --- */
  --heading-size:         clamp(0.6rem, min(4vh, 6vw), 4rem);
  --subtext-size:         clamp(0.4rem, min(1.5vh, 2vw), 2rem);

  /* === 7. PANEL PALETTE === */
  --gallery-accent:  #E8001A;
  --gallery-bright:  #ff6359;

  --projects-accent: #00B0CF;
  --projects-bright: #57e6ff;

  --about-accent:    #6728AD;
  --about-bright:    #a468ed;

  --music-accent:    #FFB200;
  --music-bright:    #ffd45d;

  --blog-accent:     #FA6400;
  --blog-bright:     #ff9448; 

  --connect-accent:  #00b639;
  --connect-bright:  #53ce7a;
}

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

body {
  background: #000;
  overflow: hidden;
}

.viewport {
  position: relative;
  width: 100vw;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  z-index: 0; /* Floor so negative layers stay visible */
}

.panel {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: transparent;
  pointer-events: none; /* Full-viewport rect — pointer events delegated to ::before/::after clip regions */
  -webkit-tap-highlight-color: transparent; /* Suppress browser tap flash; ::before :active provides mobile feedback */
  outline: 2px solid transparent; /* Invisible normally; picked up in Windows High Contrast Mode */
}

/* --- BORDER RING LAYER ---
   ::before renders only the border ring via a "donut" clip-path (outer path clockwise,
   inner path counter-clockwise; the nonzero winding rule fills only the ring area).
   This is required because .panel has no clip-path — adding one would create a stacking
   context that isolates ::after's mix-blend-mode, preventing it from compositing against
   the .viewport background. The ring must therefore come from a pseudo-element's own
   clip rather than from .panel's background showing through.
--- */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: background-color var(--transition-panel);
  pointer-events: auto; /* Receives pointer events; hover bubbles up to parent .panel */
}

/* --- INTERIOR FILL LAYER ---
   mix-blend-mode: overlay composites against the .viewport background (--bg).
   This only works because .panel has no clip-path and therefore creates no stacking
   context. Changing that would trap the blend inside an isolated context.
--- */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel-accent);
  mix-blend-mode: overlay;
  pointer-events: auto; /* Receives pointer events; hover bubbles up to parent .panel */
}

.panel-content {
  position: absolute;
  z-index: 1;
  color: var(--color-text);
}

/* Float shims — hidden globally; re-enabled per-panel on both desktop and mobile */
.panel-edge {
  display: none;
  pointer-events: none; /* Float divs occupy layout space but must not intercept clicks */
}

/* --- TYPOGRAPHY --- */

.panel-heading {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: 1;
  font-size: var(--heading-size);
}

.panel-sub {
  font-family: 'Saira', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-sub);
  color: var(--color-text-sub);
  font-size: var(--subtext-size);
}

/* =============================================
   PANELS
   ============================================= */

/* --- GALLERY --- */
.panel--gallery {
  --gallery-band: var(--row-span-23);
  --square:       calc((var(--gallery-band) - var(--inset-full) - 1.5dvh) / 1.5);
  --panel-accent:        var(--gallery-accent);
  --panel-accent-bright: var(--gallery-bright);
  --panel-tx:    -110vw;
  --panel-delay: calc(0 * var(--anim-step));
}
.panel--gallery::before {
  background: var(--panel-accent);
  clip-path: polygon(
    /* Outer (Clockwise) */
    -2% calc(var(--y-row-1) + var(--gap)),
    calc(var(--x-col-left) - var(--mult-half) * var(--gap)) calc(var(--y-row-1) + var(--gap)),
    calc(var(--x-col-left) + var(--diag-run) - var(--mult-notch) * var(--gap)) var(--y-row-2),
    calc(var(--x-col-left) - var(--diag-run) - var(--mult-shallow) * var(--gap)) calc(var(--y-row-3) - var(--gap)),
    -2% calc(var(--y-row-3) - var(--gap)),
    /* Close Outer, Slice Inward */
    -2% calc(var(--y-row-1) + var(--gap)),
    -2% calc(var(--y-row-1) + var(--inset-full)),
    /* Inner Reversed */
    -2% calc(var(--y-row-3) - var(--inset-full)),
    calc(var(--x-col-left) - var(--diag-run) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-3) - var(--inset-full)),
    calc(var(--x-col-left) + var(--diag-run) - var(--mult-notch) * var(--inset-full)) var(--y-row-2),
    calc(var(--x-col-left) - var(--mult-half) * var(--inset-full)) calc(var(--y-row-1) + var(--inset-full)),
    /* Close Inner */
    -2% calc(var(--y-row-1) + var(--inset-full))
  );
}
.panel--gallery::after {
  clip-path: polygon(
    -2% calc(var(--y-row-1) + var(--inset-full)),
    calc(var(--x-col-left) - var(--mult-half) * var(--inset-full)) calc(var(--y-row-1) + var(--inset-full)),
    calc(var(--x-col-left) + var(--diag-run) - var(--mult-notch) * var(--inset-full)) var(--y-row-2),
    calc(var(--x-col-left) - var(--diag-run) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-3) - var(--inset-full)),
    -2% calc(var(--y-row-3) - var(--inset-full))
  );
}

.panel--gallery .panel-content {
  left: 0;
  top: calc(var(--y-row-1) + var(--inset-full));
  right: calc(100% - var(--x-col-left) - var(--diag-run) + var(--mult-notch) * var(--inset-full));
  bottom: calc(100% - var(--y-row-3) + var(--inset-full));
}

.panel--gallery .panel-heading {
  margin-top: var(--panel-pad-top);
  margin-left: var(--panel-pad-side);
}
.panel--gallery .panel-sub {
  margin-left: var(--panel-pad-side);
}
.gallery-icon {
  height: 0.8em;
  width: auto;
  fill: var(--panel-accent);
  vertical-align: -0.03em;
}

.panel--gallery .panel-edge--right {
  display: block;
  float: right;
  height: 100%;
  width: calc(2 * var(--diag-run) + var(--float-pad-side));
  shape-outside: polygon(
    calc(var(--diag-run) + var(--mult-offset-nh) * var(--inset-full))                   0dvh,
    calc(2 * var(--diag-run))                                                         calc(var(--row-span-12) - var(--inset-full)),
    calc(var(--mult-offset-ns) * var(--inset-full))                                   calc(var(--row-span-13) - 2 * var(--inset-full)),
    100%                                                                              calc(var(--row-span-13) - 2 * var(--inset-full)),
    100%                                                                              0dvh
  );
}

.gallery-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Intentional coupling: this clip-path must match .panel--gallery::after exactly.
     .panel--gallery cannot carry clip-path (would isolate ::after's mix-blend-mode),
     so the grid must self-clip. If Gallery's panel geometry changes, update both. */
  clip-path: polygon(
    -2% calc(var(--y-row-1) + var(--inset-full)),
    calc(var(--x-col-left) - var(--mult-half) * var(--inset-full)) calc(var(--y-row-1) + var(--inset-full)),
    calc(var(--x-col-left) + var(--diag-run) - var(--mult-notch) * var(--inset-full)) var(--y-row-2),
    calc(var(--x-col-left) - var(--diag-run) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-3) - var(--inset-full)),
    -2% calc(var(--y-row-3) - var(--inset-full))
  );
  pointer-events: none; /* Let the mouse ghost through the filmstrip */
}

/* --- GALLERY TRACK ---
   Inner scrolling strip. 20 items + 20 duplicates (aria-hidden) for seamless loop.
   --scroll-distance = one full set width. Desktop: 10 cols (20 items / 2 rows).
   Mobile override: 20 cols (20 items / 1 row) using --mob-square.
   If item count per set changes, update the multiplier (items ÷ row count).
--- */
.gallery-track {
  display: grid;
  grid-template-rows: repeat(2, var(--square));
  grid-auto-columns: var(--square);
  grid-auto-flow: column;
  --grid-gap: round(0.5dvh, 1px);
  gap: var(--grid-gap);
  --scroll-distance: calc(-10 * (var(--square) + var(--grid-gap)));
  --scroll-dur: 30s;
  position: absolute;
  left: calc(-1 * (var(--square) + var(--grid-gap)) / 2);
  bottom: calc(100dvh - var(--y-row-3) + var(--inset-full) - var(--square) / 2);
  animation: gallery-scroll var(--scroll-dur) linear infinite;
}

.gallery-item {
  background: rgba(255, 0, 0, 0.35);
}

.gallery-item:nth-child(even) {
  transform: translateX(calc((var(--square) + var(--grid-gap)) / 2));
}

/* --- PROJECTS --- */
.panel--projects {
  --panel-accent:        var(--projects-accent);
  --panel-accent-bright: var(--projects-bright);
  --panel-tx:    -110vw;
  --panel-delay: calc(1 * var(--anim-step));
}
.panel--projects::before {
  background: var(--panel-accent);
  clip-path: polygon(
    /* Outer */
    calc(var(--x-col-left) + var(--diag-run) + var(--mult-shallow) * var(--gap)) calc(var(--y-row-2) + var(--gap)),
    calc(var(--x-col-left) - var(--diag-run) + var(--mult-corner) * var(--gap)) calc(var(--y-row-3) - var(--gap)),
    calc(var(--x-col-right) - var(--diag-run) - var(--mult-shallow) * var(--gap)) calc(var(--y-row-3) - var(--gap)),
    calc(var(--x-col-right) + var(--diag-run) - var(--mult-corner) * var(--gap)) calc(var(--y-row-2) + var(--gap)),
    /* Close Outer, Slice Inward */
    calc(var(--x-col-left) + var(--diag-run) + var(--mult-shallow) * var(--gap)) calc(var(--y-row-2) + var(--gap)),
    calc(var(--x-col-left) + var(--diag-run) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full)),
    /* Inner Reversed */
    calc(var(--x-col-right) + var(--diag-run) - var(--mult-corner) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full)),
    calc(var(--x-col-right) - var(--diag-run) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-3) - var(--inset-full)),
    calc(var(--x-col-left) - var(--diag-run) + var(--mult-corner) * var(--inset-full)) calc(var(--y-row-3) - var(--inset-full)),
    calc(var(--x-col-left) + var(--diag-run) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full))
  );
}
.panel--projects::after {
  clip-path: polygon(
    calc(var(--x-col-left) + var(--diag-run) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full)),
    calc(var(--x-col-left) - var(--diag-run) + var(--mult-corner) * var(--inset-full)) calc(var(--y-row-3) - var(--inset-full)),
    calc(var(--x-col-right) - var(--diag-run) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-3) - var(--inset-full)),
    calc(var(--x-col-right) + var(--diag-run) - var(--mult-corner) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full))
  );
}

.panel--projects .panel-content {
  left: calc(var(--x-col-left) - var(--diag-run) + var(--mult-corner) * var(--inset-full));
  top: calc(var(--y-row-2) + var(--inset-full));
  right: calc(100% - var(--x-col-right) - var(--diag-run) + var(--mult-corner) * var(--inset-full));
  bottom: calc(100% - var(--y-row-3) + var(--inset-full));
}

.panel--projects .panel-edge {
  display: block;
  height: 100%;
}
.panel--projects .panel-edge--left {
  float: left;
  width: calc(2 * var(--diag-run) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side));
  shape-outside: polygon(
    0%                                                                              0dvh,
    calc(2 * var(--diag-run) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side))   0dvh,
    var(--float-pad-side)                                                           calc(var(--row-span-23) - 2 * var(--inset-full)),
    0%                                                                              calc(var(--row-span-23) - 2 * var(--inset-full))
  );
}
.panel--projects .panel-edge--right {
  float: right;
  width: calc(2 * var(--diag-run) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side));
  shape-outside: polygon(
    calc(2 * var(--diag-run) - var(--mult-offset-cs) * var(--inset-full))            0dvh,
    100%                                                       0dvh,
    100%                                                       calc(var(--row-span-23) - 2 * var(--inset-full)),
    0%                                                         calc(var(--row-span-23) - 2 * var(--inset-full))
  );
}

.panel--projects .panel-heading,
.panel--projects .panel-sub {
  text-align: center;
}

.panel--projects .panel-heading {
  margin-top: var(--panel-pad-top);
}
.projects-icon {
  height: 0.9em;
  width: auto;
  fill: var(--panel-accent);
  vertical-align: -0.06em;
}

/* --- ABOUT --- */
.panel--about {
  --panel-accent:        var(--about-accent);
  --panel-accent-bright: var(--about-bright);
  --panel-tx:    110vw;
  --panel-delay: calc(2 * var(--anim-step));
}
.panel--about::before {
  background: var(--panel-accent);
  clip-path: polygon(
    /* Outer */
    calc(var(--x-col-right) + var(--mult-half) * var(--gap)) calc(var(--y-row-1) + var(--gap)),
    102% calc(var(--y-row-1) + var(--gap)),
    102% calc(var(--y-row-2) - var(--gap)),
    calc(var(--x-col-right) - var(--diag-run) + var(--mult-corner) * var(--gap)) calc(var(--y-row-2) - var(--gap)),
    /* Close Outer, Slice Inward */
    calc(var(--x-col-right) + var(--mult-half) * var(--gap)) calc(var(--y-row-1) + var(--gap)),
    calc(var(--x-col-right) + var(--mult-half) * var(--inset-full)) calc(var(--y-row-1) + var(--inset-full)),
    /* Inner Reversed */
    calc(var(--x-col-right) - var(--diag-run) + var(--mult-corner) * var(--inset-full)) calc(var(--y-row-2) - var(--inset-full)),
    102% calc(var(--y-row-2) - var(--inset-full)),
    102% calc(var(--y-row-1) + var(--inset-full)),
    calc(var(--x-col-right) + var(--mult-half) * var(--inset-full)) calc(var(--y-row-1) + var(--inset-full))
  );
}
.panel--about::after {
  clip-path: polygon(
    calc(var(--x-col-right) + var(--mult-half) * var(--inset-full)) calc(var(--y-row-1) + var(--inset-full)),
    102% calc(var(--y-row-1) + var(--inset-full)),
    102% calc(var(--y-row-2) - var(--inset-full)),
    calc(var(--x-col-right) - var(--diag-run) + var(--mult-corner) * var(--inset-full)) calc(var(--y-row-2) - var(--inset-full))
  );
}

.panel--about .panel-content {
  left: calc(var(--x-col-right) + var(--mult-half) * var(--inset-full));
  top: calc(var(--y-row-1) + var(--inset-full));
  right: 0;
  bottom: calc(100% - var(--y-row-2) + var(--inset-full));
  padding-right: var(--panel-pad-side);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.about-icon {
  height: 0.9em;
  width: auto;
  fill: var(--panel-accent);
  vertical-align: -0.05em;
}

/* --- MUSIC --- */
.panel--music {
  --panel-accent:        var(--music-accent);
  --panel-accent-bright: var(--music-bright);
  --panel-tx:    110vw;
  --panel-delay: calc(3 * var(--anim-step));
}
.panel--music::before {
  background: var(--panel-accent);
  clip-path: polygon(
    /* Outer */
    calc(var(--x-col-right) + var(--diag-run) + var(--mult-shallow) * var(--gap)) calc(var(--y-row-2) + var(--gap)),
    102% calc(var(--y-row-2) + var(--gap)),
    102% calc(var(--y-row-4) - var(--gap)),
    calc(var(--x-col-right) + var(--mult-half) * var(--gap)) calc(var(--y-row-4) - var(--gap)),
    calc(var(--x-col-right) - var(--diag-run) + var(--mult-notch) * var(--gap)) var(--y-row-3),
    /* Close Outer, Slice Inward */
    calc(var(--x-col-right) + var(--diag-run) + var(--mult-shallow) * var(--gap)) calc(var(--y-row-2) + var(--gap)),
    calc(var(--x-col-right) + var(--diag-run) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full)),
    /* Inner Reversed */
    calc(var(--x-col-right) - var(--diag-run) + var(--mult-notch) * var(--inset-full)) var(--y-row-3),
    calc(var(--x-col-right) + var(--mult-half) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full)),
    102% calc(var(--y-row-4) - var(--inset-full)),
    102% calc(var(--y-row-2) + var(--inset-full)),
    calc(var(--x-col-right) + var(--diag-run) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full))
  );
}
.panel--music::after {
  clip-path: polygon(
    calc(var(--x-col-right) + var(--diag-run) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-row-2) + var(--inset-full)),
    102% calc(var(--y-row-2) + var(--inset-full)),
    102% calc(var(--y-row-4) - var(--inset-full)),
    calc(var(--x-col-right) + var(--mult-half) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full)),
    calc(var(--x-col-right) - var(--diag-run) + var(--mult-notch) * var(--inset-full)) var(--y-row-3)
  );
}

.panel--music .panel-content {
  left: calc(var(--x-col-right) - var(--diag-run) + var(--mult-notch) * var(--inset-full));
  top: calc(var(--y-row-2) + var(--inset-full));
  right: 0;
  bottom: calc(100% - var(--y-row-4) + var(--inset-full));
  text-align: right;
}
.music-icon {
  height: 0.8em;
  width: auto;
  fill: var(--panel-accent);
  vertical-align: -0.02em;
}

.panel--music .panel-heading {
  margin-top: var(--panel-pad-top);
  margin-right: var(--panel-pad-side);
}
.panel--music .panel-sub {
  margin-right: var(--panel-pad-side);
}

.panel--music .panel-edge--left {
  display: block;
  float: left;
  height: 100%;
  width: calc(2 * var(--diag-run) + var(--float-pad-side));
  shape-outside: polygon(
    0%                                                                          0dvh,
    calc(2 * var(--diag-run) - var(--mult-offset-ns) * var(--inset-full) + var(--float-pad-side))    0dvh,
    var(--float-pad-side)                                                       calc(var(--row-span-23) - var(--inset-full)),
    calc(var(--diag-run) - var(--mult-offset-nh) * var(--inset-full) + var(--float-pad-side))        calc(var(--row-span-13) - 2 * var(--inset-full)),
    0%                                                                          calc(var(--row-span-13) - 2 * var(--inset-full))
  );
}

/* --- BLOG --- */
.panel--blog {
  --panel-accent:        var(--blog-accent);
  --panel-accent-bright: var(--blog-bright);
  --panel-tx:    -110vw;
  --panel-delay: calc(4 * var(--anim-step));
}
.panel--blog::before {
  background: var(--panel-accent);
  clip-path: polygon(
    /* Outer */
    -2% calc(var(--y-row-3) + var(--gap)),
    calc(var(--x-col-bc) - var(--mult-corner) * var(--gap)) calc(var(--y-row-3) + var(--gap)),
    calc(var(--x-col-bc) - var(--diag-run) - var(--mult-half) * var(--gap)) calc(var(--y-row-4) - var(--gap)),
    -2% calc(var(--y-row-4) - var(--gap)),
    /* Close Outer, Slice Inward */
    -2% calc(var(--y-row-3) + var(--gap)),
    -2% calc(var(--y-row-3) + var(--inset-full)),
    /* Inner Reversed */
    -2% calc(var(--y-row-4) - var(--inset-full)),
    calc(var(--x-col-bc) - var(--diag-run) - var(--mult-half) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full)),
    calc(var(--x-col-bc) - var(--mult-corner) * var(--inset-full)) calc(var(--y-row-3) + var(--inset-full)),
    -2% calc(var(--y-row-3) + var(--inset-full))
  );
}
.panel--blog::after {
  clip-path: polygon(
    -2% calc(var(--y-row-3) + var(--inset-full)),
    calc(var(--x-col-bc) - var(--mult-corner) * var(--inset-full)) calc(var(--y-row-3) + var(--inset-full)),
    calc(var(--x-col-bc) - var(--diag-run) - var(--mult-half) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full)),
    -2% calc(var(--y-row-4) - var(--inset-full))
  );
}

.panel--blog .panel-content {
  left: 0;
  top: calc(var(--y-row-3) + var(--inset-full));
  right: calc(100% - var(--x-col-bc) + var(--mult-corner) * var(--inset-full));
  bottom: calc(100% - var(--y-row-4) + var(--inset-full));
  padding-left: var(--panel-pad-side);
  display: flex;
  align-items: center;
  gap: 1.5dvh;
}

/* --- BLOG CONTENT ELEMENTS --- */
.blog-icon {
  height: 0.73em;
  width: auto;
  fill: var(--panel-accent);
}

.blog-divider {
  width: min(0.35dvh, 0.5vw);
  height: min(3.8dvh, 5.3vw);
  background: var(--panel-accent);
  flex-shrink: 0;
}

.blog-post-info {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.blog-post-title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: 1;
  font-size: clamp(0.5rem, min(2.5vh, 3vw), 2.5rem);
  color: var(--color-text);
}

.blog-post-meta {
  font-family: 'Saira', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-sub);
  line-height: 1;
  font-size: clamp(0.4rem, min(1.3vh, 1.8vw), 1.5rem);
  color: var(--color-text-sub);
}

/* --- CONNECT --- */
.panel--connect {
  --panel-accent:        var(--connect-accent);
  --panel-accent-bright: var(--connect-bright);
  --panel-ty:    25dvh;
  --panel-delay: calc(5 * var(--anim-step));
}
.panel--connect::before {
  background: var(--panel-accent);
  clip-path: polygon(
    /* Outer */
    min(calc(var(--x-col-bc) + var(--mult-shallow) * var(--gap)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--gap)),
    max(calc(var(--x-col-right) - var(--diag-run) - var(--mult-shallow) * var(--gap)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--gap)),
    calc(var(--x-col-right) - var(--mult-corner-v) * var(--gap)) calc(var(--y-row-4) - var(--gap)),
    calc(var(--x-col-bc) - var(--diag-run) + var(--mult-corner-v) * var(--gap)) calc(var(--y-row-4) - var(--gap)),
    /* Close Outer, Slice Inward */
    min(calc(var(--x-col-bc) + var(--mult-shallow) * var(--gap)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--gap)),
    min(calc(var(--x-col-bc) + var(--mult-shallow) * var(--inset-full)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--inset-full)),
    /* Inner Reversed */
    calc(var(--x-col-bc) - var(--diag-run) + var(--mult-corner-v) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full)),
    calc(var(--x-col-right) - var(--mult-corner-v) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full)),
    max(calc(var(--x-col-right) - var(--diag-run) - var(--mult-shallow) * var(--inset-full)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--inset-full)),
    min(calc(var(--x-col-bc) + var(--mult-shallow) * var(--inset-full)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--inset-full))
  );
}
.panel--connect::after {
  clip-path: polygon(
    min(calc(var(--x-col-bc) + var(--mult-shallow) * var(--inset-full)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--inset-full)),
    max(calc(var(--x-col-right) - var(--diag-run) - var(--mult-shallow) * var(--inset-full)), calc(var(--x-col-connect-mid) - var(--diag-run) / 2)) calc(var(--y-row-3) + var(--inset-full)),
    calc(var(--x-col-right) - var(--mult-corner-v) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full)),
    calc(var(--x-col-bc) - var(--diag-run) + var(--mult-corner-v) * var(--inset-full)) calc(var(--y-row-4) - var(--inset-full))
  );
}

.panel--connect .panel-content {
  left: calc(var(--x-col-bc) + var(--mult-shallow) * var(--inset-full));
  top: calc(var(--y-row-3) + var(--inset-full));
  right: calc(var(--x-col-left) + var(--diag-run) + var(--mult-shallow) * var(--inset-full));
  bottom: calc(100% - var(--y-row-4) + var(--inset-full));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8dvh;
  text-align: center;
}
.panel--connect .panel-heading {
  white-space: nowrap;
}
.connect-icon {
  height: 0.9em;
  width: auto;
  fill: var(--panel-accent);
  vertical-align: -0.08em;
}

/* =============================================
   SITE HEADER
   ============================================= */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--y-row-1);
  display: flex;
  align-items: stretch;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.header-zone--left {
  flex: 0 0 var(--x-col-left);
  pointer-events: auto;
}

.header-zone--right {
  flex: 0 0 calc(100% - var(--x-col-right));
  pointer-events: auto;
}

.header-zone--center {
  flex: 1;
  align-self: flex-start;
  height: var(--y-row-1);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.center-logo-upper,
.center-logo-lower {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-logo-upper {
  height: var(--y-row-1);
  padding-top: 2dvh;
}

.center-logo-lower {
  height: calc(var(--y-row-2) - var(--y-row-1));
  padding-left: 2dvh;
  padding-right: 2dvh;
}

.logo-mz,
.logo-wordmark {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.logo-wordmark {
  transition: filter 0.5s ease;
}

/* =============================================
   SITE FOOTER
   ============================================= */

.site-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100% - var(--y-row-4));
  z-index: 2;
  pointer-events: auto;
  display: flex;
  align-items: center;
  padding: 1.5dvh;
}

/* =============================================
   THEME TOGGLE
   =============================================
   Checkbox sibling hack — no JavaScript.
     <input id="theme-toggle">       ← sibling before .viewport
     <div class="viewport">
       <footer class="site-footer">
         <label for="theme-toggle">  ← inside footer, right-aligned via margin-left: auto
       </footer>
     </div>
   Clicking the label slides the current icon diagonally behind the
   divider bar and out of view while the other icon enters.
--- */

.theme-toggle-checkbox {
  display: none;
}

/* --- BUTTON CONTAINER --- */
.theme-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 4dvh;
  height: 4dvh;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Suppress blue flash on mobile tap */
  outline: 2px solid transparent; /* Invisible normally; visible in Windows High Contrast Mode */
}

.theme-btn__svg {
  width: 100%;
  height: 100%;
  fill: var(--color-text);
  transition: fill 0.5s ease;
}

/* --- ICONS --- */
.theme-btn__sun,
.theme-btn__moon {
  transition: transform 0.45s ease;
}

/* Default (dark): sun visible, moon hidden behind divider */
.theme-btn__moon {
  transform: translate(65px, 65px);
}

/* Checked (light): sun exits, moon enters */
.theme-toggle-checkbox:checked ~ .viewport .theme-btn__sun {
  transform: translate(65px, 65px);
}

.theme-toggle-checkbox:checked ~ .viewport .theme-btn__moon {
  transform: translate(0, 0);
}

/* --- THEME OVERRIDES --- */
.theme-toggle-checkbox:checked ~ .viewport {
  --bg: #f8f9fa;
  --color-text: #101112;
  --color-text-sub: #555;
}

.theme-toggle-checkbox:checked ~ .viewport .logo-wordmark {
  filter: invert(1);
}

/* --- SYSTEM LIGHT MODE ---
   When the device prefers light, the unchecked state IS light and the
   checked state overrides back to dark — the inverse of the default.
--- */
@media (prefers-color-scheme: light) {
  /* Unchecked = light (device default): apply light vars */
  .viewport {
    --bg: #f8f9fa;
    --color-text: #101112;
    --color-text-sub: #555;
  }

  .viewport .logo-wordmark {
    filter: invert(1);
  }

  /* Unchecked = light mode active: moon visible (tap to go dark), sun hidden */
  .theme-btn__moon {
    transform: translate(0, 0);
  }

  .theme-btn__sun {
    transform: translate(65px, 65px);
  }

  /* Checked = dark override: reset vars back to dark */
  .theme-toggle-checkbox:checked ~ .viewport {
    --bg: #101112;
    --color-text: #f8f9fa;
    --color-text-sub: #b0b0b0;
  }

  .theme-toggle-checkbox:checked ~ .viewport .logo-wordmark {
    filter: none;
  }

  /* Checked = dark mode active: sun visible (tap to go light), moon hidden */
  .theme-toggle-checkbox:checked ~ .viewport .theme-btn__sun {
    transform: translate(0, 0);
  }

  .theme-toggle-checkbox:checked ~ .viewport .theme-btn__moon {
    transform: translate(65px, 65px);
  }
}

.viewport {
  transition: background 0.5s ease;
}

.panel-content,
.panel-heading,
.panel-sub,
.blog-post-title,
.blog-post-meta {
  transition: color 0.5s ease;
}

/* =============================================
   PANEL ENTRANCE ANIMATION
   ============================================= */

@keyframes panel-slide {
  from { transform: translate(var(--panel-tx, 0vw), var(--panel-ty, 0dvh)); }
  to   { transform: translate(0, 0); }
}

@keyframes gallery-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--scroll-distance)); }
}

.panel::before,
.panel::after,
.panel-content,
.gallery-grid {
  animation: panel-slide var(--anim-dur) var(--anim-ease) var(--panel-delay, 0s) both;
}

/* =============================================
   MOBILE LAYOUT
   ============================================= */

@media (max-width: 768px) and (orientation: portrait) {

  :root {
    --heading-size: clamp(0.6rem, min(2.5vh, 5vw), 2rem);
    --subtext-size: clamp(0.4rem, min(1vh, 2vw), 1.5rem);

    --y-mob-about-top: 43.401dvh;
    --y-mob-r1:        52.558dvh;
    --y-mob-r2:        72.640dvh;
    --y-mob-r3:        81.799dvh;
    --y-mob-r4:        90.957dvh;

    --x-mob-col-left:  calc(50vw + 0.5 * var(--mob-diag-lg) - 19.706vw);
    --x-mob-col-right: calc(50vw + 0.5 * var(--mob-diag-lg) + 19.706vw);

    --x-mob-ab:     60vw;
    --x-mob-blog-r: 85vw;
    --x-mob-con-r:  50.000vw;

    --mob-diag-lg: 12.551dvh;
    --mob-diag-sm:  5.724dvh;

    --mob-gap:    0.5dvh;
    --mob-border: 0.4dvh;
    --inset-full: calc(var(--mob-gap) + var(--mob-border));

    --mob-row-span: calc(var(--y-mob-r2) - var(--y-mob-r1));
    --mob-square: 10dvh;
    --mob-panel-pad-top:  2.35dvh;
    --mob-panel-pad-side: 1dvh;
  }

  .site-header {
    height: var(--y-mob-about-top);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    overflow: hidden;
  }

  .header-zone--center {
    display: block;
    height: 100%;
    width: 100%;
  }

  .center-logo-upper {
    height: calc(0.766 * var(--y-mob-about-top));
    width: 100%;
  }

  .center-logo-lower {
    height: calc(0.234 * var(--y-mob-about-top));
    width: 100%;
  }

  .logo-mz,
  .logo-wordmark {
    max-height: 100%;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .header-zone--left,
  .header-zone--right { display: none; }

  .panel-edge { display: none; }

  .gallery-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    clip-path: polygon(
      -2% calc(var(--y-mob-r1) + var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mob-diag-lg) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      -2% calc(var(--y-mob-r2) - var(--inset-full))
    );
    pointer-events: none;
  }

  .gallery-track {
    grid-template-rows: var(--mob-square);
    grid-auto-columns: var(--mob-square);
    /* Mobile: 1 row, so all 20 items = 20 columns per set */
    --scroll-distance: calc(-20 * (var(--mob-square) + var(--grid-gap)));
    left: 0.5dvh;
    bottom: calc(100dvh - var(--y-mob-r2) + var(--inset-full) + 0.5dvh);
    animation-duration: calc(2 * var(--scroll-dur));
  }

  .gallery-item:nth-child(even) {
    transform: none;
  }

  /* --- GALLERY (mobile) --- */
  .panel--gallery::before {
    clip-path: polygon(
      /* Outer */
      -2% calc(var(--y-mob-r1) + var(--mob-gap)),
      calc(var(--x-mob-col-left) - var(--mult-corner) * var(--mob-gap)) calc(var(--y-mob-r1) + var(--mob-gap)),
      calc(var(--x-mob-col-left) - var(--mob-diag-lg) - var(--mult-shallow) * var(--mob-gap)) calc(var(--y-mob-r2) - var(--mob-gap)),
      -2% calc(var(--y-mob-r2) - var(--mob-gap)),
      /* Close Outer, Slice Inward */
      -2% calc(var(--y-mob-r1) + var(--mob-gap)),
      -2% calc(var(--y-mob-r1) + var(--inset-full)),
      /* Inner Reversed */
      -2% calc(var(--y-mob-r2) - var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mob-diag-lg) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      /* Close Inner */
      -2% calc(var(--y-mob-r1) + var(--inset-full))
    );
  }
  .panel--gallery::after {
    clip-path: polygon(
      -2% calc(var(--y-mob-r1) + var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mob-diag-lg) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      -2% calc(var(--y-mob-r2) - var(--inset-full))
    );
  }

  /* --- PROJECTS (mobile) --- */
  .panel--projects::before {
    clip-path: polygon(
      /* Outer */
      calc(var(--x-mob-col-left) + var(--mult-shallow) * var(--mob-gap)) calc(var(--y-mob-r1) + var(--mob-gap)),
      calc(var(--x-mob-col-left) - var(--mob-diag-lg) + var(--mult-corner) * var(--mob-gap)) calc(var(--y-mob-r2) - var(--mob-gap)),
      calc(var(--x-mob-col-right) - var(--mob-diag-lg) - var(--mult-shallow) * var(--mob-gap)) calc(var(--y-mob-r2) - var(--mob-gap)),
      calc(var(--x-mob-col-right) - var(--mult-corner) * var(--mob-gap)) calc(var(--y-mob-r1) + var(--mob-gap)),
      /* Close Outer, Slice Inward */
      calc(var(--x-mob-col-left) + var(--mult-shallow) * var(--mob-gap)) calc(var(--y-mob-r1) + var(--mob-gap)),
      calc(var(--x-mob-col-left) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      /* Inner Reversed */
      calc(var(--x-mob-col-right) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      calc(var(--x-mob-col-right) - var(--mob-diag-lg) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mob-diag-lg) + var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      calc(var(--x-mob-col-left) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full))
    );
  }
  .panel--projects::after {
    clip-path: polygon(
      calc(var(--x-mob-col-left) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      calc(var(--x-mob-col-left) - var(--mob-diag-lg) + var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      calc(var(--x-mob-col-right) - var(--mob-diag-lg) - var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      calc(var(--x-mob-col-right) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full))
    );
  }

  /* --- ABOUT (mobile) --- */
  .panel--about::before {
    clip-path: polygon(
      /* Outer */
      calc(var(--x-mob-ab) + var(--mob-diag-sm) + var(--mult-half) * var(--mob-gap)) calc(var(--y-mob-about-top) + var(--mob-gap)),
      102% calc(var(--y-mob-about-top) + var(--mob-gap)),
      102% calc(var(--y-mob-r1) - var(--mob-gap)),
      calc(var(--x-mob-ab) + var(--mult-corner) * var(--mob-gap)) calc(var(--y-mob-r1) - var(--mob-gap)),
      /* Close Outer, Slice Inward */
      calc(var(--x-mob-ab) + var(--mob-diag-sm) + var(--mult-half) * var(--mob-gap)) calc(var(--y-mob-about-top) + var(--mob-gap)),
      calc(var(--x-mob-ab) + var(--mob-diag-sm) + var(--mult-half) * var(--inset-full)) calc(var(--y-mob-about-top) + var(--inset-full)),
      /* Inner Reversed */
      calc(var(--x-mob-ab) + var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r1) - var(--inset-full)),
      102% calc(var(--y-mob-r1) - var(--inset-full)),
      102% calc(var(--y-mob-about-top) + var(--inset-full)),
      calc(var(--x-mob-ab) + var(--mob-diag-sm) + var(--mult-half) * var(--inset-full)) calc(var(--y-mob-about-top) + var(--inset-full))
    );
  }
  .panel--about::after {
    clip-path: polygon(
      calc(var(--x-mob-ab) + var(--mob-diag-sm) + var(--mult-half) * var(--inset-full)) calc(var(--y-mob-about-top) + var(--inset-full)),
      102% calc(var(--y-mob-about-top) + var(--inset-full)),
      102% calc(var(--y-mob-r1) - var(--inset-full)),
      calc(var(--x-mob-ab) + var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r1) - var(--inset-full))
    );
  }

  /* --- MUSIC (mobile) --- */
  .panel--music::before {
    clip-path: polygon(
      /* Outer */
      calc(var(--x-mob-col-right) + var(--mult-shallow) * var(--mob-gap)) calc(var(--y-mob-r1) + var(--mob-gap)),
      102% calc(var(--y-mob-r1) + var(--mob-gap)),
      102% calc(var(--y-mob-r2) - var(--mob-gap)),
      calc(var(--x-mob-col-right) - var(--mob-diag-lg) + var(--mult-corner) * var(--mob-gap)) calc(var(--y-mob-r2) - var(--mob-gap)),
      /* Close Outer, Slice Inward */
      calc(var(--x-mob-col-right) + var(--mult-shallow) * var(--mob-gap)) calc(var(--y-mob-r1) + var(--mob-gap)),
      calc(var(--x-mob-col-right) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      /* Inner Reversed */
      calc(var(--x-mob-col-right) - var(--mob-diag-lg) + var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full)),
      102% calc(var(--y-mob-r2) - var(--inset-full)),
      102% calc(var(--y-mob-r1) + var(--inset-full)),
      calc(var(--x-mob-col-right) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full))
    );
  }
  .panel--music::after {
    clip-path: polygon(
      calc(var(--x-mob-col-right) + var(--mult-shallow) * var(--inset-full)) calc(var(--y-mob-r1) + var(--inset-full)),
      102% calc(var(--y-mob-r1) + var(--inset-full)),
      102% calc(var(--y-mob-r2) - var(--inset-full)),
      calc(var(--x-mob-col-right) - var(--mob-diag-lg) + var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r2) - var(--inset-full))
    );
  }

  /* --- BLOG (mobile) --- */
  .panel--blog::before {
    clip-path: polygon(
      /* Outer */
      -2% calc(var(--y-mob-r2) + var(--mob-gap)),
      calc(var(--x-mob-blog-r) - var(--mult-corner) * var(--mob-gap)) calc(var(--y-mob-r2) + var(--mob-gap)),
      calc(var(--x-mob-blog-r) - var(--mob-diag-sm) - var(--mult-half) * var(--mob-gap)) calc(var(--y-mob-r3) - var(--mob-gap)),
      -2% calc(var(--y-mob-r3) - var(--mob-gap)),
      /* Close Outer, Slice Inward */
      -2% calc(var(--y-mob-r2) + var(--mob-gap)),
      -2% calc(var(--y-mob-r2) + var(--inset-full)),
      /* Inner Reversed */
      -2% calc(var(--y-mob-r3) - var(--inset-full)),
      calc(var(--x-mob-blog-r) - var(--mob-diag-sm) - var(--mult-half) * var(--inset-full)) calc(var(--y-mob-r3) - var(--inset-full)),
      calc(var(--x-mob-blog-r) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r2) + var(--inset-full)),
      -2% calc(var(--y-mob-r2) + var(--inset-full))
    );
  }
  .panel--blog::after {
    clip-path: polygon(
      -2% calc(var(--y-mob-r2) + var(--inset-full)),
      calc(var(--x-mob-blog-r) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r2) + var(--inset-full)),
      calc(var(--x-mob-blog-r) - var(--mob-diag-sm) - var(--mult-half) * var(--inset-full)) calc(var(--y-mob-r3) - var(--inset-full)),
      -2% calc(var(--y-mob-r3) - var(--inset-full))
    );
  }

  /* --- CONNECT (mobile) --- */
  .panel--connect::before {
    clip-path: polygon(
      /* Outer */
      -2% calc(var(--y-mob-r3) + var(--mob-gap)),
      calc(var(--x-mob-con-r) - var(--mult-corner) * var(--mob-gap)) calc(var(--y-mob-r3) + var(--mob-gap)),
      calc(var(--x-mob-con-r) - var(--mob-diag-sm) - var(--mult-half) * var(--mob-gap)) calc(var(--y-mob-r4) - var(--mob-gap)),
      -2% calc(var(--y-mob-r4) - var(--mob-gap)),
      /* Close Outer, Slice Inward */
      -2% calc(var(--y-mob-r3) + var(--mob-gap)),
      -2% calc(var(--y-mob-r3) + var(--inset-full)),
      /* Inner Reversed */
      -2% calc(var(--y-mob-r4) - var(--inset-full)),
      calc(var(--x-mob-con-r) - var(--mob-diag-sm) - var(--mult-half) * var(--inset-full)) calc(var(--y-mob-r4) - var(--inset-full)),
      calc(var(--x-mob-con-r) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r3) + var(--inset-full)),
      -2% calc(var(--y-mob-r3) + var(--inset-full))
    );
  }
  .panel--connect::after {
    clip-path: polygon(
      -2% calc(var(--y-mob-r3) + var(--inset-full)),
      calc(var(--x-mob-con-r) - var(--mult-corner) * var(--inset-full)) calc(var(--y-mob-r3) + var(--inset-full)),
      calc(var(--x-mob-con-r) - var(--mob-diag-sm) - var(--mult-half) * var(--inset-full)) calc(var(--y-mob-r4) - var(--inset-full)),
      -2% calc(var(--y-mob-r4) - var(--inset-full))
    );
  }

  .panel--gallery .panel-content {
    left: 0;
    top: calc(var(--y-mob-r1) + var(--inset-full));
    right: calc(100% - var(--x-mob-col-left) + var(--mult-corner) * var(--inset-full));
    bottom: calc(100% - var(--y-mob-r2) + var(--inset-full));
  }
  .panel--gallery .panel-content > * { width: auto; }
  .panel--gallery .panel-heading {
    margin-top: var(--mob-panel-pad-top);
    margin-left: var(--mob-panel-pad-side);
  }
  .panel--gallery .panel-sub {
    margin-left: var(--mob-panel-pad-side);
  }

  .panel--gallery .panel-edge--right { display: block; }
  .panel--projects .panel-edge { display: block; }
  .panel--music .panel-edge--left { display: block; }

  .panel--projects .panel-edge--left {
    width: calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side));
    shape-outside: polygon(
      0% 0dvh,
      calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side)) 0dvh,
      var(--float-pad-side) calc(var(--mob-row-span) - 2 * var(--inset-full)),
      0% calc(var(--mob-row-span) - 2 * var(--inset-full))
    );
  }

  .panel--projects .panel-edge--right {
    width: calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side));
    shape-outside: polygon(
      calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full)) 0dvh,
      100% 0dvh,
      100% calc(var(--mob-row-span) - 2 * var(--inset-full)),
      0% calc(var(--mob-row-span) - 2 * var(--inset-full))
    );
  }

  .panel--gallery .panel-edge--right {
    width: calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side));
    shape-outside: polygon(
      calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full)) 0dvh,
      100% 0dvh,
      100% calc(var(--mob-row-span) - 2 * var(--inset-full)),
      0% calc(var(--mob-row-span) - 2 * var(--inset-full))
    );
  }

  .panel--music .panel-edge--left {
    width: calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side));
    shape-outside: polygon(
      0% 0dvh,
      calc(var(--mob-diag-lg) - var(--mult-offset-cs) * var(--inset-full) + var(--float-pad-side)) 0dvh,
      var(--float-pad-side) calc(var(--mob-row-span) - 2 * var(--inset-full)),
      0% calc(var(--mob-row-span) - 2 * var(--inset-full))
    );
  }

  .panel--projects .panel-content {
    left: calc(var(--x-mob-col-left) - var(--mob-diag-lg) + var(--mult-corner) * var(--inset-full));
    top: calc(var(--y-mob-r1) + var(--inset-full));
    right: calc(100% - var(--x-mob-col-right) + var(--mult-corner) * var(--inset-full));
    bottom: calc(100% - var(--y-mob-r2) + var(--inset-full));
  }
  .panel--projects .panel-heading {
    margin-top: var(--mob-panel-pad-top);
  }

  .panel--about .panel-content {
    left: calc(var(--x-mob-ab) + var(--mob-diag-sm) + var(--inset-full));
    top: calc(var(--y-mob-about-top) + var(--inset-full));
    right: 0;
    bottom: calc(100% - var(--y-mob-r1) + var(--inset-full));
    padding-right: var(--mob-panel-pad-side);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    gap: 0.5em;
  }

  .panel--music .panel-content {
    left: calc(var(--x-mob-col-right) - var(--mob-diag-lg) + var(--mult-corner) * var(--inset-full));
    top: calc(var(--y-mob-r1) + var(--inset-full));
    right: 0;
    bottom: calc(100% - var(--y-mob-r2) + var(--inset-full));
    text-align: right;
  }
  .panel--music .panel-heading {
    margin-top: var(--mob-panel-pad-top);
    margin-right: var(--mob-panel-pad-side);
  }
  .panel--music .panel-sub { margin-right: var(--mob-panel-pad-side); }

  .panel--blog .panel-content {
    left: 0;
    top: calc(var(--y-mob-r2) + var(--inset-full));
    right: calc(100% - var(--x-mob-blog-r) + var(--mob-diag-sm) + var(--inset-full));
    bottom: calc(100% - var(--y-mob-r3) + var(--inset-full));
    padding-left: var(--mob-panel-pad-side);
    display: flex;
    align-items: center;
    gap: 0.6em;
  }

  .panel--connect .panel-content {
    left: 0;
    top: calc(var(--y-mob-r3) + var(--inset-full));
    right: calc(100% - var(--x-mob-con-r) + var(--mob-diag-sm) + var(--inset-full));
    bottom: calc(100% - var(--y-mob-r4) + var(--inset-full));
    padding: var(--mob-panel-pad-side);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .panel--connect {
    --panel-tx: -110vw;
    --panel-ty: 0dvh;
  }
  .panel--connect .panel-heading {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25em;
  }

  .site-footer {
    height: calc(100% - var(--y-mob-r4));
  }

  .theme-btn {
    bottom: 1dvh;
    right: 1dvh;
  }

} /* ============= END MOBILE LAYOUT ============= */

/* =============================================
   ACCESSIBILITY
   ============================================= */

.panel:hover::before,
.panel:focus-visible::before,
.panel:active::before {
  background: var(--panel-accent-bright);
}

@media (prefers-reduced-motion: reduce) {
  .panel::before {
    transition: none;
  }
  .panel::before,
  .panel::after,
  .panel-content,
  .gallery-grid,
  .gallery-track {
    animation: none;
  }
  .theme-btn__sun,
  .theme-btn__moon {
    transition: none;
  }
  .viewport,
  .panel-content,
  .panel-heading,
  .panel-sub,
  .blog-post-title,
  .blog-post-meta {
    transition: none;
  }
}