/*
Theme Name: Matthew Kenney Portfolio
Theme URI: https://example.com
Author: Matthew Kenney
Author URI: https://example.com
Description: A custom lifestyle-magazine style portfolio theme for filmmaker/editor Matthew Kenney, featuring a bouncy Wii/3DS-style interaction layer, scroll reveals, channel-style page transitions, and an Instagram-style project lightbox. Includes a homepage, portfolio, about, and contact page template, plus a native contact-form mail handler (no plugin required).
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matthew-kenney

This stylesheet is the theme's required style.css (WordPress reads the header
comment above for theme metadata) followed by the site's full original CSS,
ported over unchanged from the static build.
*/

/* ==========================================================================
   MATTHEW KENNEY — PORTFOLIO
   A lifestyle-magazine layout with Wii/3DS-style bouncy interaction.
   Written as plain CSS so it ports cleanly into a WordPress theme
   (enqueue as-is, or split into template partials later).
   ========================================================================== */

:root{
  /* ---- palette: cream magazine stock + outdoor-Virginia accents ---- */
  --cream:        #F7F1E4;
  --cream-deep:   #EEE4CF;
  --card:         #FFFDF8;
  --ink:          #211E19;
  --ink-soft:     #5B564B;
  --ink-faint:    #948C7C;
  --line:         rgba(33,30,25,0.14);
  --line-soft:    rgba(33,30,25,0.08);

  --clay:         #C1592C;
  --clay-deep:    #9C4322;
  --clay-tint:    #F1D9C9;

  --sage:         #6E7C5A;
  --sage-deep:    #4E5A3E;
  --sage-tint:    #DEE3D2;

  --sky:          #3E7CB1;
  --sky-tint:     #D8E6F0;

  --gold:         #D6A649;

  /* ---- type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui:      "Nunito", "Segoe UI", sans-serif;

  /* ---- shape & motion ---- */
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 11px;
  --r-pill: 999px;

  --spring:      cubic-bezier(.34, 1.76, .64, 1);
  --spring-soft: cubic-bezier(.22, 1.4, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);

  --shadow-card: 0 1px 2px rgba(33,30,25,0.06), 0 10px 24px -12px rgba(33,30,25,0.22);
  --shadow-pop:  0 18px 34px -14px rgba(33,30,25,0.34);

  --nav-h: 84px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* subtle grained/paper texture overlay so the cream feels like stock, not flat CSS */
.paper-grain{
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   MASTHEAD BAR (top strip, like a magazine's cover kicker)
   ========================================================================== */
.masthead-bar{
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.masthead-bar .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
}
.masthead-bar strong{ color: var(--clay); font-weight: 800; }

/* ==========================================================================
   NAV — pill selector that glides like a 3DS home-menu highlight
   ========================================================================== */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(247,241,228,0.86);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

.brand{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand .word{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.brand .tagline{
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nav-links{
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--cream-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px;
}
.nav-links a{
  position: relative;
  z-index: 2;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  transition: color .25s var(--ease-out);
  white-space: nowrap;
}
.nav-links a.active,
.nav-links a:hover{ color: var(--card); }

.nav-highlight{
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 90px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: left .5s var(--spring), width .5s var(--spring);
}

.nav-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--clay);
  color: var(--card) !important;
  font-weight: 800;
  font-size: 13.5px;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 18px -8px rgba(193,89,44,0.55);
  transition: transform .35s var(--spring), box-shadow .3s var(--ease-out);
}
.nav-cta:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 22px -8px rgba(193,89,44,0.6); }
.nav-cta:active{ transform: scale(0.94); }

.nav-toggle{
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform .3s var(--spring), opacity .2s;
}
.nav-toggle span::before{ position: absolute; top: -6px; }
.nav-toggle span::after{ position: absolute; top: 6px; }

/* ==========================================================================
   BUTTONS & CHIPS — chunky, springy, Wii-channel-like
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  border: none;
  transition: transform .4s var(--spring), box-shadow .3s var(--ease-out);
}
.btn-primary{ background: var(--ink); color: var(--cream); box-shadow: var(--shadow-pop); }
.btn-primary:hover{ transform: translateY(-4px) scale(1.03) rotate(-0.5deg); }
.btn-outline{ background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-outline:hover{ transform: translateY(-4px) scale(1.03) rotate(0.5deg); background: var(--ink); color: var(--cream); }
.btn:active{ transform: scale(0.92) !important; }

.chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--sage-tint);
  color: var(--sage-deep);
}
.chip.clay{ background: var(--clay-tint); color: var(--clay-deep); }
.chip.sky{ background: var(--sky-tint); color: var(--sky); }
.chip.gold{ background: #F4E7C9; color: #8C6A1F; }

/* squish-on-press utility, applied via JS to any .press-able element */
.press{ transition: transform .18s var(--spring); }
.press:active{ transform: scale(0.93); }

/* ==========================================================================
   SECTION LABEL — small kicker like a magazine department header
   ========================================================================== */
.kicker{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 18px;
}
.kicker::before{
  content: "";
  width: 34px; height: 2px;
  background: var(--clay);
  border-radius: 2px;
}
.kicker .num{ color: var(--ink-faint); font-weight: 700; }

section{ padding: 96px 0; }
section.tight{ padding: 64px 0; }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero{
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line);
}
.hero-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hero-eyebrow{
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 320px;
}
.hero h1{
  font-size: clamp(52px, 9vw, 118px);
  text-align: center;
  width: 100%;
}
.hero h1 em{
  font-style: italic;
  color: var(--clay);
}
.hero-sub{
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 18px auto 0;
}

.hero-frame{
  position: relative;
  margin-top: 40px;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16/8.2;
  box-shadow: var(--shadow-pop);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(160deg, #4E5A3E 0%, #6E7C5A 32%, #C7B98C 62%, #9C4322 100%);
}
.hero-frame .ridge{
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(0,0,0,0.18) 41%, transparent 43%),
    linear-gradient(100deg, transparent 55%, rgba(0,0,0,0.14) 56%, transparent 59%);
}
.hero-frame .grain{ position:absolute; inset:0; background:inherit; opacity:.25; filter: blur(0); }
.hero-caption{
  position: absolute;
  left: 28px; bottom: 24px;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: rgba(20,18,14,0.4);
  backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: var(--r-pill);
}
.hero-play{
  position: absolute;
  right: 28px; bottom: 24px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  animation: floaty 3.2s ease-in-out infinite;
  cursor: pointer;
}
.hero-play::after{
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 4px;
}

@keyframes floaty{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.05); }
}

/* ==========================================================================
   TILE GRID — bouncy "channel" cards
   ========================================================================== */
.tile-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tile{
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--spring), box-shadow .35s var(--ease-out), border-color .3s;
  cursor: pointer;
}
.tile:hover{
  transform: translateY(-8px) rotate(-0.6deg) scale(1.015);
  box-shadow: var(--shadow-pop);
  border-color: transparent;
}
.tile:active{ transform: scale(0.96) rotate(0deg); }
.tile .tile-icon{
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  font-size: 22px;
  transition: transform .5s var(--spring);
}
.tile:hover .tile-icon{ transform: rotate(-8deg) scale(1.1); }
.tile h3{ font-size: 21px; margin-bottom: 8px; }
.tile p{ color: var(--ink-soft); font-size: 14.5px; }
.tile .tile-arrow{
  position: absolute; top: 24px; right: 24px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform .4s var(--spring), background .3s, color .3s;
}
.tile:hover .tile-arrow{ background: var(--ink); color: var(--cream); transform: rotate(45deg); }

.tile-icon.clay{ background: var(--clay-tint); color: var(--clay-deep); }
.tile-icon.sage{ background: var(--sage-tint); color: var(--sage-deep); }
.tile-icon.sky{ background: var(--sky-tint); color: var(--sky); }
.tile-icon.gold{ background: #F4E7C9; color: #8C6A1F; }

/* ==========================================================================
   PROJECT CARDS (portfolio grid)
   ========================================================================== */
.project-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.project-card{
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .45s var(--spring), box-shadow .35s var(--ease-out);
}
.project-card:hover{ transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-pop); }
.project-card:active{ transform: translateY(-2px) scale(0.98); }
.project-thumb{
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}
.project-thumb::after{
  content: attr(data-mark);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
}
.project-thumb .year-badge{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  font-weight: 800;
  font-size: 11px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
}
.project-expand-hint{
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
  transition: opacity .35s var(--spring), transform .45s var(--spring);
}
.project-card:hover .project-expand-hint{ opacity: 1; transform: scale(1) rotate(0deg); }
.project-body{ padding: 20px 22px 24px; }
.project-body h4{ font-size: 17px; margin-bottom: 6px; }
.project-role{ font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.project-tags{ display: flex; flex-wrap: wrap; gap: 6px; }

/* gradient "thumbnail" palette so every placeholder still feels art-directed */
.g1{ background: linear-gradient(150deg,#4E5A3E,#6E7C5A 60%,#C7B98C); }
.g2{ background: linear-gradient(150deg,#9C4322,#C1592C 55%,#E8C79B); }
.g3{ background: linear-gradient(150deg,#2F4B5E,#3E7CB1 55%,#B9D3E3); }
.g4{ background: linear-gradient(150deg,#3A3630,#5B564B 55%,#B7AE9A); }
.g5{ background: linear-gradient(150deg,#7C5A2E,#D6A649 60%,#F1E0B4); }
.g6{ background: linear-gradient(150deg,#5E3A4B,#9C4B6A 55%,#E3B9C9); }

/* per-shot filter variety so 5 "screenshots" of one gradient don't look identical */
.shot-v1{ filter: none; }
.shot-v2{ filter: hue-rotate(-14deg) saturate(1.12) brightness(1.04); }
.shot-v3{ filter: hue-rotate(10deg) saturate(0.92) brightness(0.96); }
.shot-v4{ filter: grayscale(0.35) brightness(1.05) contrast(1.08); }
.shot-v5{ filter: hue-rotate(-6deg) saturate(1.2) brightness(0.92); }

/* ==========================================================================
   PROJECT LIGHTBOX — Instagram-style expand, sprung open in the site's own
   bouncy, magazine-y voice.
   ========================================================================== */
.modal-overlay{
  position: fixed; inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(27,26,23,0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.modal-overlay.open{ opacity: 1; pointer-events: auto; }

.modal-shell{
  position: relative;
  width: 100%;
  max-width: 1040px;
  max-height: 88vh;
  /* No CSS transform anywhere in the open sequence — deliberately. Chrome
     can momentarily mis-render a rounded overflow:hidden corner whenever a
     transform is animating anywhere in that box's ancestry OR among its
     own children (it briefly flattens into a compositing layer and the
     rounded clip mask can lag a frame or two behind). Two earlier attempts
     narrowed down *which* element carried the transform, but the flash
     kept resurfacing somewhere else in the same subtree. The only fully
     reliable fix is to not animate `transform` on or inside the clipped
     box at all — so the entrance is a plain opacity + margin fade, both of
     which are ordinary layout/paint properties that never trigger that
     compositor-clip mismatch. See the matching note on .modal-shot below,
     which had the same issue on shot-to-shot crossfades. */
  opacity: 0;
  margin-top: 22px;
  transition: opacity .4s var(--ease-out), margin-top .45s var(--ease-out);
}
.modal-overlay.open .modal-shell{
  opacity: 1;
  margin-top: 0;
}
.modal-card{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  width: 100%;
  max-height: 88vh;
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}

.modal-close{
  position: absolute;
  top: -18px; right: -18px;
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transform: scale(0) rotate(-45deg);
  transition: transform .5s var(--spring);
}
.modal-overlay.open .modal-close{ transform: scale(1) rotate(0deg); transition-delay: .12s; }
.modal-close:hover{ transform: scale(1.12) rotate(90deg); }
.modal-close:active{ transform: scale(0.85) rotate(90deg); }

.modal-media{
  position: relative;
  background: var(--ink);
  overflow: hidden;
  min-height: 320px;
  /* Rounds its own outer (left-hand) corners in addition to relying on
     .modal-card's clip — belt-and-suspenders so the image reads as
     correctly rounded even if a parent clip ever hiccups. */
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.modal-shot{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  /* Crossfade only — no transform. A scale animation here was the other,
     less obvious source of the square-corner flash described above: this
     element sits INSIDE the rounded, overflow:hidden .modal-media/.modal-card,
     so animating its transform ran into the exact same Chrome clip bug even
     after the outer entrance animation was fixed. Plain opacity avoids it. */
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.modal-shot.active{ opacity: 1; pointer-events: auto; }
.modal-shot .shot-label{
  position: absolute; left: 20px; bottom: 20px;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
}
.modal-counter{
  position: absolute; top: 18px; left: 18px; z-index: 3;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.modal-nav-btn{
  position: absolute; top: 50%; z-index: 4;
  width: 44px; height: 44px;
  margin-top: -22px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.45));
  transition: transform .35s var(--spring), filter .25s var(--ease-out);
}
.modal-nav-btn svg{ width: 24px; height: 24px; display: block; }
.modal-nav-btn path{
  fill: #fff;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.modal-nav-btn:hover{ transform: scale(1.2); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)); }
.modal-nav-btn:hover path{ fill: var(--gold); stroke: var(--gold); }
.modal-nav-btn:active{ transform: scale(0.8); }
.modal-nav-btn.prev{ left: 14px; }
.modal-nav-btn.next{ right: 14px; }

.modal-dots{
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 7px;
  padding: 8px 10px;
  background: rgba(20,18,14,0.35);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
.modal-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: transform .35s var(--spring), width .35s var(--spring), background .25s;
}
.modal-dot.active{ background: #fff; width: 22px; border-radius: var(--r-pill); }
.modal-dot:hover{ transform: scale(1.3); }

.modal-body{
  padding: 40px 40px 32px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Same belt-and-suspenders rounding as .modal-media, mirrored to the
     right-hand corners this side of the card owns. */
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.modal-kicker{ margin-bottom: 16px; }
.modal-title{ font-size: 30px; margin-bottom: 8px; }
.modal-role{ font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; }
.modal-desc{ font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 24px; }
.modal-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.modal-cta{ margin-top: auto; align-self: flex-start; }

@media (max-width: 820px){
  .modal-card{ grid-template-columns: 1fr; overflow-y: auto; }
  .modal-media{ aspect-ratio: 4/3; min-height: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-body{ border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .modal-shell{ max-height: 92vh; }
}

/* ==========================================================================
   TABLE OF CONTENTS (portfolio index)
   ========================================================================== */
.toc{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.toc a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 14.5px;
  transition: transform .35s var(--spring), background .3s, color .3s;
}
.toc a:hover{ transform: translateX(6px) scale(1.02); background: var(--ink); color: var(--cream); }
.toc a .n{ color: var(--clay); font-family: var(--font-display); font-style: italic; margin-right: 10px; }
.toc a:hover .n{ color: var(--gold); }

/* ==========================================================================
   ABOUT / PROFILE SPREAD
   ========================================================================== */
.spread{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
}
.portrait-frame{
  position: static;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-pop);
  background: linear-gradient(160deg,#3A3630,#5B564B 50%,#B7AE9A);
  transition: transform .5s var(--spring);
}
.portrait-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-frame:hover{ transform: rotate(-1.2deg) scale(1.015); }
.portrait-caption{
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
}

.fact-card{
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
}
.fact-card h5{
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.fact-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.dropcap::first-letter{
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin: 8px 8px 0 0;
  color: var(--clay);
}

.pull-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: var(--ink);
  border-left: 4px solid var(--clay);
  padding: 4px 0 4px 26px;
  margin: 40px 0;
}

.timeline{ margin-top: 8px; }
.timeline-row{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
}
.timeline-row:first-child{ border-top: none; }
.timeline-year{ font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--clay); }
.timeline-row h4{ font-size: 16.5px; margin-bottom: 4px; }
.timeline-row p{ font-size: 13.5px; color: var(--ink-soft); }

.award-box{
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: 34px;
  margin-top: 40px;
}
.award-box h5{
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.award-row{
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.award-row:first-of-type{ border-top: none; }
.award-row .medal{ font-size: 20px; }
.award-row strong{ font-weight: 800; font-size: 14.5px; }
.award-row span{ display:block; font-size: 12.5px; color: rgba(247,241,228,0.6); }

/* skills grid on about page */
.skills-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.skill-pill{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-weight: 800;
  font-size: 13.5px;
  text-align: center;
  transition: transform .4s var(--spring), background .3s, color .3s;
}
.skill-pill:hover{
  transform: translateY(-5px) scale(1.05);
  background: var(--clay);
  color: #fff;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-hero{
  text-align: center;
  padding-bottom: 8px;
}
.contact-hero h1{ font-size: clamp(42px, 7vw, 84px); }
.contact-links{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 40px 0 8px;
}
.contact-pill{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 16px 26px;
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--spring), box-shadow .3s;
}
.contact-pill:hover{ transform: translateY(-5px) scale(1.05) rotate(-1deg); box-shadow: var(--shadow-pop); }
.contact-pill .ico{
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--clay-tint); color: var(--clay-deep);
  font-size: 16px;
}

.form-card{
  max-width: 640px;
  margin: 56px auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
}
.field{ margin-bottom: 20px; }
.field label{
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.field input, .field textarea{
  width: 100%;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  background: var(--cream);
  color: var(--ink);
  transition: border-color .3s, transform .3s var(--spring);
}
.field input:focus, .field textarea:focus{
  outline: none;
  border-color: var(--clay);
  transform: scale(1.01);
}
.form-card .btn{ width: 100%; justify-content: center; }

.social-row{
  display: flex; justify-content: center; gap: 14px;
  margin-top: 48px;
}
.social-btn{
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: transform .4s var(--spring), background .3s, color .3s;
}
.social-btn:hover{ transform: translateY(-6px) rotate(-8deg) scale(1.08); background: var(--ink); color: var(--cream); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  margin-top: 40px;
}
.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.footer-word{ font-family: var(--font-display); font-size: 28px; }
.footer-links{ display: flex; gap: 28px; font-weight: 800; font-size: 13.5px; }
.footer-bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-size: 12px; color: var(--ink-faint);
  flex-wrap: wrap; gap: 10px;
}

/* ==========================================================================
   PAGE TRANSITIONS — the "channel launch" fade
   ========================================================================== */
/* fill-mode "backwards" (not "both"): applies the pre-animation state so there's
   no flash-of-unstyled-content, but drops the transform once the animation ends
   instead of leaving it on <body> forever. A lingering transform on any ancestor
   — even a visually-identical translateY(0) — hijacks position:fixed children
   (like the project-lightbox overlay) into centering on the document instead of
   the viewport, so this must stay "backwards", not "both". */
body{ animation: page-in .6s var(--ease-out) backwards; }
@keyframes page-in{
  from{ opacity: 0; transform: translateY(14px) scale(0.99); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
body.page-out{
  animation: page-out .38s var(--spring-soft) both;
  pointer-events: none;
}
@keyframes page-out{
  to{ opacity: 0; transform: translateY(-10px) scale(0.985); }
}

/* scroll-reveal utility (JS adds .in-view) */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--spring-soft); }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* stagger children of a revealed group */
.reveal-group.in-view .reveal-child{ opacity: 1; transform: translateY(0); }
.reveal-child{ opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--spring-soft); }

/* custom bouncy cursor dot — nods to the Wii pointer without being literal */
.cursor-dot{
  position: fixed;
  z-index: 3000;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--clay);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .25s var(--spring), height .25s var(--spring), background .25s;
  mix-blend-mode: multiply;
  display: none;
}
@media (hover:hover) and (pointer:fine){
  .cursor-dot{ display: block; }
}
.cursor-dot.grow{ width: 34px; height: 34px; background: var(--sage); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .tile-grid, .project-grid{ grid-template-columns: repeat(2,1fr); }
  .toc{ grid-template-columns: 1fr 1fr; }
  .spread{ grid-template-columns: 1fr; }
  .portrait-frame{ position: static; max-width: 320px; margin: 0 auto; }
  .skills-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 720px){
  .wrap{ padding: 0 20px; }
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
  .tile-grid, .project-grid, .toc{ grid-template-columns: 1fr; }
  .skills-grid{ grid-template-columns: repeat(2,1fr); }
  section{ padding: 64px 0; }
  .footer-top{ flex-direction: column; align-items: flex-start; }
}