/* ═══════════════════════════════════════════════════════════════
   PLATFORM DESIGN SYSTEM
   Premium editorial photography portfolio
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Tokens ─────────────────────────────────────────────────── */

:root {
  /* Palette */
  --c-bg:          #f8f8f6;
  --c-surface:     #ffffff;
  --c-text:        #141414;
  --c-muted:       #767676;
  --c-border:      #e4e4e0;
  --c-accent:      #141414;   /* Overridden per-artist from JSON */
  --c-overlay:     rgba(14, 14, 14, 0.36);
  --c-overlay-deep:rgba(14, 14, 14, 0.78);
  --c-white:       #ffffff;

  /* Typography */
  --f-display:     'Cormorant Garamond', 'Georgia', serif;
  --f-body:        'Inter', system-ui, sans-serif;

  --fs-2xs:   clamp(9px,  1.1vw,  10px);
  --fs-xs:    clamp(10px, 1.3vw,  11px);
  --fs-sm:    clamp(12px, 1.5vw,  13px);
  --fs-base:  clamp(14px, 1.7vw,  15px);
  --fs-md:    clamp(16px, 2vw,    18px);
  --fs-lg:    clamp(22px, 3.5vw,  32px);
  --fs-xl:    clamp(36px, 6vw,    64px);
  --fs-2xl:   clamp(52px, 8vw,    96px);

  --fw-light:  300;
  --fw-normal: 400;
  --lh-tight:  1.15;
  --lh-base:   1.7;
  --ls-wide:   0.12em;
  --ls-wider:  0.2em;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Layout */
  --nav-h:       60px;
  --max-w:       1280px;
  --gutter:      clamp(20px, 4vw, 60px);
  --grid-gap:    clamp(4px, 0.5vw, 8px);
  --radius:      0px;   /* Intentionally zero — editorial, not rounded */

  /* Motion */
  --t-fast:   0.18s ease;
  --t-base:   0.28s ease;
  --t-slow:   0.5s  ease;
  --t-reveal: 0.7s  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ───────────────────────────────────────────────────── */

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

html {
  font-size:       100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--c-bg);
}

/* Loading state: hide content flash */
html.is-loading body { visibility: hidden; }
html.is-ready  body  { visibility: visible; }

body {
  font-family:            var(--f-body);
  font-weight:            var(--fw-light);
  font-size:              var(--fs-base);
  color:                  var(--c-text);
  background:             var(--c-bg);
  line-height:            var(--lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x:             hidden;
}

body.nav-open,
body.lightbox-open {
  overflow: hidden;
}

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

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

ul, ol { list-style: none; }

button {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  font-size:   inherit;
  font-weight: inherit;
  color:       inherit;
  padding:     0;
}

input,
textarea {
  font-family: inherit;
  font-size:   inherit;
  font-weight: inherit;
  color:       inherit;
  background:  none;
  border:      none;
  outline:     none;
}

/* Focus ring — visible only on keyboard navigation */
:focus-visible {
  outline:        2px solid var(--c-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:      0.01ms !important;
    transition-duration:     0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Typography helpers ──────────────────────────────────────── */

.label {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-normal);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--c-muted);
}

/* ── Layout helpers ──────────────────────────────────────────── */

.container {
  width:     100%;
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--gutter);
}

/* ── Error state ─────────────────────────────────────────────── */

.error-state {
  min-height:    100vh;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  justify-content:center;
  gap:           var(--sp-4);
  padding:       var(--sp-8);
  text-align:    center;
}
.error-code    { font-family: var(--f-display); font-size: var(--fs-2xl); color: var(--c-border); }
.error-message { font-size: var(--fs-md); }
.error-hint    { font-size: var(--fs-sm); color: var(--c-muted); }
.error-hint code { font-family: monospace; background: var(--c-border); padding: 2px 6px; }

/* ══════════════════════════════════════════════════════════════
   HEADER & NAV
   ══════════════════════════════════════════════════════════════ */

#site-header {
  position:       fixed;
  top: 0; left: 0; right: 0;
  z-index:        200;
  height:         var(--nav-h);
  background:     var(--c-bg);
  border-bottom:  1px solid transparent;
  transition:     border-color var(--t-base), height var(--t-base), background var(--t-base);
}

#site-header.is-scrolled {
  border-bottom-color: var(--c-border);
  background: rgba(248, 248, 246, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav {
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--gutter);
}


.nav__left {
  justify-self:start;
}


.nav__brand-logo img {
  height:50px;
  width:auto;
  object-fit:contain;
}


.nav__artist-name {
  justify-self:center;
  font-family:var(--f-display);
  font-size:var(--fs-md);
  font-style:italic;
  font-weight:var(--fw-light);
  letter-spacing:.06em;
}


.nav__menu {
  justify-self:end;
}

.nav__logo {
  font-family:    var(--f-display);
  font-size:      var(--fs-md);
  font-weight:    var(--fw-light);
  letter-spacing: 0.06em;
  font-style:     italic;
  color:          var(--c-text);
  transition:     opacity var(--t-fast);
  flex-shrink:    0;
}
.nav__logo:hover { opacity: 0.6; }

.nav__menu {
  display:     flex;
  align-items: center;
  gap:         var(--sp-7);
}

.nav__link {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
  position:       relative;
  padding-bottom: var(--sp-1);
  transition:     color var(--t-fast);
}
.nav__link::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0;
  width:      0;
  height:     1px;
  background: var(--c-text);
  transition: width var(--t-base);
}
.nav__link:hover,
.nav__link.is-active {
  color: var(--c-text);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  width: 100%;
}

.nav__link--cta {
  color:   var(--c-text);
  padding: var(--sp-2) var(--sp-5);
  border:  1px solid var(--c-border);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover,
.nav__link--cta.is-active {
  background: var(--c-text);
  color:      var(--c-white);
  border-color: var(--c-text);
}

/* Dropdown */
.nav__item--dropdown { position: relative; }

.nav__dropdown {
  display:    none;
  position:   absolute;
  top:        calc(100% + var(--sp-4));
  left:       50%;
  transform:  translateX(-50%);
  background: var(--c-surface);
  border:     1px solid var(--c-border);
  min-width:  160px;
  padding:    var(--sp-2) 0;
  z-index:    300;
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  display: block;
}

.nav__dropdown__item {
  display:        block;
  padding:        var(--sp-3) var(--sp-5);
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
  transition:     color var(--t-fast), background var(--t-fast);
}
.nav__dropdown__item:hover {
  color:      var(--c-text);
  background: var(--c-bg);
}

/* Mobile toggle */
.nav__toggle {
  display:        none;
  flex-direction: column;
  gap:            6px;
  padding:        var(--sp-2);
}
.nav__toggle-bar {
  display:    block;
  width:      22px;
  height:     1px;
  background: var(--c-text);
  transition: transform var(--t-base), opacity var(--t-base);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════
   PAGE SHELL
   ══════════════════════════════════════════════════════════════ */

#app {
  padding-top: var(--nav-h);
  min-height:  calc(100vh - var(--nav-h));
}

/* Home: hero goes edge-to-edge — remove padding */
.page-home #app {
  padding-top: 0;
}

/* ══════════════════════════════════════════════════════════════
   HERO SLIDESHOW
   ══════════════════════════════════════════════════════════════ */

.hero {
  position:   relative;
  width:      100%;
  height:     100svh;
  overflow:   hidden;
  background: #111;
}

.hero__track {
  position: absolute;
  inset:    0;
}

.hero__slide {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__slide.is-active {
  opacity: 1;
}

.hero__slide-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.hero__slide--placeholder {
  background: linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 50%, #1a1a1a 100%);
  display:    flex;
  align-items:center;
  justify-content:center;
}
.hero__slide-label {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          rgba(255,255,255,0.3);
}

/* Caption */
.hero__caption {
  position:       absolute;
  bottom:         var(--sp-7);
  left:           var(--gutter);
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          rgba(255,255,255,0.55);
  pointer-events: none;
}

/* Navigation arrows */
.hero__arrow {
  position:   absolute;
  top:        50%;
  transform:  translateY(-50%);
  padding:    var(--sp-4) var(--sp-5);
  color:      rgba(255,255,255,0.55);
  transition: color var(--t-fast);
  z-index:    10;
}
.hero__arrow:hover { color: var(--c-white); }
.hero__arrow svg   { width: 28px; height: 28px; display: block; }
.hero__arrow--prev { left:  var(--sp-3); }
.hero__arrow--next { right: var(--sp-3); }

/* Dots */
.hero__controls {
  position: absolute;
  bottom:   var(--sp-7);
  right:    var(--gutter);
  display:  flex;
  gap:      var(--sp-2);
  z-index:  10;
}
.hero__dot {
  width:        6px;
  height:       6px;
  border-radius:50%;
  background:   rgba(255,255,255,0.3);
  transition:   background var(--t-base), transform var(--t-base);
}
.hero__dot.is-active {
  background: var(--c-white);
  transform:  scale(1.4);
}

/* ══════════════════════════════════════════════════════════════
   HOME INTRO
   ══════════════════════════════════════════════════════════════ */

.intro {
  padding:     var(--sp-10) var(--gutter) var(--sp-8);
  border-bottom: 1px solid var(--c-border);
}
.intro__inner {
  max-width: 680px;
  margin:    0 auto;
  text-align:center;
}
.intro__name {
  font-family:    var(--f-display);
  font-size:      var(--fs-xl);
  font-weight:    var(--fw-light);
  letter-spacing: 0.02em;
  line-height:    var(--lh-tight);
  margin-bottom:  var(--sp-4);
}
.intro__tagline {
  font-family:    var(--f-display);
  font-size:      var(--fs-lg);
  font-weight:    var(--fw-light);
  font-style:     italic;
  color:          var(--c-muted);
  margin-bottom:  var(--sp-5);
  line-height:    var(--lh-tight);
}
.intro__text {
  font-size:   var(--fs-sm);
  color:       var(--c-muted);
  line-height: var(--lh-base);
  max-width:   480px;
  margin:      0 auto;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY STRIP
   ══════════════════════════════════════════════════════════════ */

.cat-strip {
  display:       flex;
  border-bottom: 1px solid var(--c-border);
}
.cat-strip__item {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--sp-6) var(--sp-4);
  border-right:    1px solid var(--c-border);
  transition:      background var(--t-fast);
  text-align:      center;
}
.cat-strip__item:last-child { border-right: none; }
.cat-strip__item:hover      { background: var(--c-surface); }

.cat-strip__label {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--c-muted);
  transition:     color var(--t-fast);
}
.cat-strip__item:hover .cat-strip__label { color: var(--c-text); }

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO PAGE
   ══════════════════════════════════════════════════════════════ */

/* Toolbar */
.portfolio-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--sp-4);
  padding:         var(--sp-7) var(--gutter) var(--sp-5);
  border-bottom:   1px solid var(--c-border);
}
.portfolio-toolbar__title {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-normal);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* Filter buttons */
#filter-root {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-2);
}
.filter-btn {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
  padding:        var(--sp-2) var(--sp-4);
  border:         1px solid var(--c-border);
  transition:     background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-btn:hover,
.filter-btn.is-active {
  background:   var(--c-text);
  color:        var(--c-white);
  border-color: var(--c-text);
}

/* Period tabs */
#period-root {
  display:     flex;
  border-bottom: 1px solid var(--c-border);
  overflow-x:  auto;
  padding:     0 var(--gutter);
  scrollbar-width: none;
}
#period-root::-webkit-scrollbar { display: none; }

.period-btn {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
  padding:        var(--sp-4) var(--sp-5);
  border-bottom:  2px solid transparent;
  white-space:    nowrap;
  transition:     color var(--t-fast), border-color var(--t-fast);
}
.period-btn:hover { color: var(--c-text); }
.period-btn.is-active {
  color:         var(--c-text);
  border-bottom-color: var(--c-text);
}

/* Info bar */
#info-root {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--sp-3) var(--gutter);
  border-bottom:   1px solid var(--c-border);
}
.portfolio-info__count,
.portfolio-info__meta {
  font-size:      var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
}

/* Photo Grid */
#grid-root {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:     var(--grid-gap);
  padding: var(--sp-6) var(--gutter);
}

.grid-item {
  position:   relative;
  overflow:   hidden;
  background: var(--c-border);
  cursor:     pointer;
  opacity:    0;
  transform:  translateY(12px);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
}
.grid-item.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* 4:3 */
.grid-item--r43::before {
  content:     '';
  display:     block;
  padding-top: 75%;
}
/* 3:2 */
.grid-item--r32::before {
  content:     '';
  display:     block;
  padding-top: 66.67%;
}

.grid-item__img,
.grid-item__placeholder {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.grid-item__placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--fs-xs);
  letter-spacing:  var(--ls-wider);
  text-transform:  uppercase;
  color:           rgba(20,20,20,0.25);
  background:      var(--c-border);
}

.grid-item:hover .grid-item__img,
.grid-item:hover .grid-item__placeholder {
  transform: scale(1.04);
}

.grid-item__overlay {
  position:       absolute;
  inset:          0;
  background:     var(--c-overlay);
  opacity:        0;
  display:        flex;
  align-items:    center;
  justify-content:center;
  transition:     opacity var(--t-base);
}
.grid-item:hover .grid-item__overlay,
.grid-item:focus-visible .grid-item__overlay {
  opacity: 1;
}
.grid-item__view {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--c-white);
}

.grid-empty {
  grid-column: 1 / -1;
  text-align:  center;
  padding:     var(--sp-10);
  color:       var(--c-muted);
  font-size:   var(--fs-sm);
}

/* Pagination */
#pagination-root {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         var(--sp-8) var(--gutter);
  border-top:      1px solid var(--c-border);
}
.page-btn {
  width:          36px;
  height:         36px;
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-normal);
  color:          var(--c-muted);
  border:         1px solid var(--c-border);
  transition:     background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.page-btn:hover:not(:disabled),
.page-btn.is-active {
  background:   var(--c-text);
  color:        var(--c-white);
  border-color: var(--c-text);
}
.page-btn:disabled { opacity: 0.3; cursor: default; }
.page-btn--arrow svg { width: 16px; height: 16px; }
.page-ellipsis {
  width:      36px;
  text-align: center;
  color:      var(--c-muted);
  font-size:  var(--fs-sm);
  line-height:36px;
}

/* ══════════════════════════════════════════════════════════════
   BIO PAGE
   ══════════════════════════════════════════════════════════════ */

.bio-page {
  padding-bottom: var(--sp-10);
}

.bio-header {
  display:     grid;
  grid-template-columns: 320px 1fr;
  gap:         var(--sp-9);
  align-items: start;
  padding:     var(--sp-9) var(--gutter) var(--sp-8);
  border-bottom: 1px solid var(--c-border);
  max-width:   var(--max-w);
  margin:      0 auto;
}
.bio-header__portrait-wrap {
  position: relative;
}
.bio-header__portrait {
  width:       100%;
  aspect-ratio:4/5;
  object-fit:  cover;
}
.bio-header__portrait-placeholder {
  width:       100%;
  aspect-ratio:4/5;
  background:  var(--c-border);
}
.bio-header__info {
  padding-top: var(--sp-5);
}
.bio-header__name {
  font-family:    var(--f-display);
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-light);
  line-height:    var(--lh-tight);
  margin-bottom:  var(--sp-3);
  letter-spacing: -0.01em;
}
.bio-header__subtitle,
.bio-header__location {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--c-muted);
  margin-bottom:  var(--sp-2);
}
.bio-header__tagline {
  margin-top:  var(--sp-5);
  font-family: var(--f-display);
  font-size:   var(--fs-lg);
  font-style:  italic;
  font-weight: var(--fw-light);
  line-height: 1.3;
  color:       var(--c-text);
  max-width:   500px;
}

.bio-text {
  max-width: 680px;
  margin:    0 auto;
  padding:   var(--sp-8) var(--gutter);
}
.bio-text__p {
  font-size:    var(--fs-base);
  line-height:  var(--lh-base);
  color:        #444;
  margin-bottom:var(--sp-5);
}

.bio-section {
  max-width: 680px;
  margin:    0 auto;
  padding:   var(--sp-7) var(--gutter);
  border-top:1px solid var(--c-border);
}
.bio-section__heading {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-normal);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--c-muted);
  margin-bottom:  var(--sp-6);
}

.bio-timeline {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
}
.bio-timeline__row {
  display:  grid;
  grid-template-columns: 56px 1fr;
  gap:      var(--sp-5);
  align-items: baseline;
}
.bio-timeline__year {
  font-size:  var(--fs-xs);
  color:      var(--c-muted);
  flex-shrink:0;
}
.bio-timeline__title {
  font-size:   var(--fs-sm);
  line-height: 1.6;
  color:       var(--c-text);
}
.bio-timeline__desc {
  color: var(--c-muted);
}

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════ */

.contact-page {
  max-width: 720px;
  margin:    0 auto;
  padding:   var(--sp-9) var(--gutter) var(--sp-10);
}

.contact-header {
  margin-bottom: var(--sp-8);
  padding-bottom:var(--sp-8);
  border-bottom: 1px solid var(--c-border);
}
.contact-header__title {
  font-family:    var(--f-display);
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-light);
  line-height:    var(--lh-tight);
  margin-bottom:  var(--sp-5);
}
.contact-header__intro {
  font-size:   var(--fs-base);
  color:       var(--c-muted);
  line-height: var(--lh-base);
  max-width:   480px;
  margin-bottom:var(--sp-5);
}
.contact-header__email {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: lowercase;
  color:          var(--c-text);
  border-bottom:  1px solid var(--c-border);
  padding-bottom: var(--sp-1);
  transition:     border-color var(--t-fast);
}
.contact-header__email:hover { border-bottom-color: var(--c-text); }

/* Form */
#contact-form {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-5);
  margin-bottom: var(--sp-8);
}
.form-field {
  display:       flex;
  flex-direction:column;
  gap:           var(--sp-2);
}
.form-field label {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          var(--c-muted);
}
.form-field input,
.form-field textarea {
  width:        100%;
  padding:      var(--sp-3) 0;
  border-bottom:1px solid var(--c-border);
  font-size:    var(--fs-base);
  transition:   border-color var(--t-fast);
  background:   transparent;
}
.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--c-text);
  outline: none;
}
.form-field textarea {
  height:  140px;
  resize:  vertical;
  padding-top: var(--sp-3);
}
.form-submit {
  align-self:     flex-start;
  padding:        var(--sp-4) var(--sp-7);
  background:     var(--c-text);
  color:          var(--c-white);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-normal);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  border:         1px solid var(--c-text);
  transition:     background var(--t-fast), color var(--t-fast);
}
.form-submit:hover:not(:disabled) {
  background: transparent;
  color:      var(--c-text);
}
.form-submit:disabled { opacity: 0.5; cursor: default; }

/* Social cards */
.contact-social {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-3);
  padding-top:var(--sp-7);
  border-top: 1px solid var(--c-border);
}
.social-card {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding:     var(--sp-3) var(--sp-5);
  border:      1px solid var(--c-border);
  transition:  background var(--t-fast), border-color var(--t-fast);
}
.social-card:hover {
  background:   var(--c-text);
  border-color: var(--c-text);
}
.social-card:hover .social-card__label,
.social-card:hover .social-card__icon { color: var(--c-white); }
.social-card__icon {
  width:  18px;
  height: 18px;
  color:  var(--c-muted);
  transition: color var(--t-fast);
}
.social-card__icon svg {
  width:  100%;
  height: 100%;
}
.social-card__label {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
  transition:     color var(--t-fast);
}

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX
   ══════════════════════════════════════════════════════════════ */

.lightbox {
  position:       fixed;
  inset:          0;
  z-index:        1000;
  background:     rgba(10, 10, 10, 0.96);
  display:        flex;
  align-items:    center;
  justify-content:center;
}
.lightbox__backdrop {
  position: absolute;
  inset:    0;
}
.lightbox__stage {
  position:        relative;
  z-index:         1;
  max-width:       90vw;
  max-height:      90vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.lightbox__figure {
  position: relative;
}
.lightbox__img {
  max-width:      90vw;
  max-height:     88vh;
  object-fit:     contain;
  transition:     opacity 0.3s ease;
  display:        block;
}
.lightbox__caption {
  position:       absolute;
  bottom:         calc(-1 * var(--sp-7));
  left:           0;
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          rgba(255,255,255,0.4);
  white-space:    nowrap;
}
.lightbox__btn {
  position:  absolute;
  color:     rgba(255,255,255,0.6);
  padding:   var(--sp-4);
  z-index:   2;
  transition:color var(--t-fast);
}
.lightbox__btn:hover { color: var(--c-white); }
.lightbox__btn svg   { width: 24px; height: 24px; display: block; }
.lightbox__btn--close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__btn--prev  { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__counter {
  position:       absolute;
  top:            var(--sp-5);
  left:           50%;
  transform:      translateX(-50%);
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color:          rgba(255,255,255,0.4);
}

.lightbox[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */

.footer {
  border-top: 1px solid var(--c-border);
  padding:    var(--sp-7) var(--gutter);
}
.footer__inner {
  max-width:   var(--max-w);
  margin:      0 auto;
  display:     grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap:         var(--sp-7);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__name  {
  font-family:    var(--f-display);
  font-size:      var(--fs-md);
  font-weight:    var(--fw-light);
  font-style:     italic;
  transition:     opacity var(--t-fast);
}
.footer__name:hover { opacity: 0.6; }
.footer__location {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
}
.footer__nav {
  display: flex;
  gap:     var(--sp-5);
}
.footer__link {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
  transition:     color var(--t-fast);
}
.footer__link:hover { color: var(--c-text); }
.footer__social {
  display: flex;
  gap:     var(--sp-4);
}
.footer__social-link {
  font-size:      var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--c-muted);
  transition:     color var(--t-fast);
}
.footer__social-link:hover { color: var(--c-text); }
.footer__copy {
  font-size:  var(--fs-xs);
  color:      var(--c-muted);
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Large desktop (≥ 1600px) */
@media (min-width: 1600px) {
  #grid-root { grid-template-columns: repeat(5, 1fr); }
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .bio-header {
    grid-template-columns: 240px 1fr;
    gap: var(--sp-7);
  }
  #grid-root { grid-template-columns: repeat(3, 1fr); }
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-5);
  }
  .footer__copy { grid-column: 1 / -1; }
}

/* Mobile (≤ 680px) */
@media (max-width: 680px) {
  :root { --nav-h: 56px; }

  /* Nav mobile */
  .nav__toggle { display: flex; }
  .nav__menu {
    display:        none;
    position:       fixed;
    top:            var(--nav-h);
    left:  0; right: 0;
    background:     var(--c-bg);
    border-bottom:  1px solid var(--c-border);
    flex-direction: column;
    align-items:    flex-start;
    gap:            0;
    padding:        var(--sp-4) 0;
  }
  .nav__menu.is-open { display: flex; }
  .nav__item { width: 100%; }
  .nav__link {
    display: block;
    padding: var(--sp-4) var(--gutter);
    width:   100%;
  }
  .nav__link::after    { display: none; }
  .nav__link--cta      { border: none; padding: var(--sp-4) var(--gutter); }
  .nav__item--dropdown { position: static; }
  .nav__dropdown {
    position: static;
    display:  block;
    transform:none;
    border:   none;
    border-top:1px solid var(--c-border);
    padding:  var(--sp-2) 0 var(--sp-2) var(--sp-7);
  }

  /* Hero */
  .hero__caption { display: none; }
  .hero__arrow   { padding: var(--sp-3); }

  /* Category strip */
  .cat-strip { flex-wrap: wrap; }
  .cat-strip__item {
    flex:        0 0 50%;
    padding:     var(--sp-5) var(--sp-4);
    border-bottom:1px solid var(--c-border);
  }

  /* Portfolio toolbar */
  .portfolio-toolbar { flex-direction: column; align-items: flex-start; }
  #grid-root         { grid-template-columns: 1fr 1fr; padding: var(--sp-4) var(--gutter); }

  /* Bio header */
  .bio-header {
    grid-template-columns: 1fr;
    gap:     var(--sp-6);
    padding: var(--sp-7) var(--gutter) var(--sp-6);
  }
  .bio-header__portrait { max-width: 200px; }
  .bio-header__name     { font-size: var(--fs-xl); }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .footer__nav,
  .footer__social { flex-wrap: wrap; }
}

/* Ultra-narrow (≤ 360px) */
@media (max-width: 360px) {
  #grid-root { grid-template-columns: 1fr; }
}