/* ============================================================
   Paula Bowers Design — design system
   A gallery-catalog identity: warm paper, deep ink, the studio's
   violet kept as the single jewel accent, cyan as a whisper.
   Type: Fraunces (display) + Source Serif 4 (text). All serif.
   ============================================================ */

:root {
  /* palette — carried from the original site, curated */
  --paper: #FBFAF7;
  --paper-2: #F4F2EE;
  --gold: #C19437;            /* Paula's own logo gold — brand metal */
  --gold-text: #8A671F;       /* AA-readable gold for small text     */
  --gold-line: rgba(193, 148, 55, 0.55);
  --violet: #745CF9;          /* original site accent, kept exact  */
  --violet-deep: #5343B8;     /* readable on paper for links/text  */
  --violet-wash: #F0EDFB;
  --cyan: #33C1F4;            /* original hover accent             */
  --ink: #17161E;
  --ink-soft: #4C4A57;
  --night: #0E1015;           /* original footer/nav dark          */
  --night-2: #15171E;
  --line: rgba(23, 22, 30, 0.16);
  --line-strong: rgba(23, 22, 30, 0.32);
  --line-light: rgba(251, 250, 247, 0.22);

  /* type */
  --font-display: "Fraunces", "Georgia", serif;
  --font-text: "Source Serif 4", "Georgia", serif;

  /* rhythm */
  --measure: 62ch;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --s-section: clamp(5rem, 11vw, 9rem);
  --s-block: clamp(2.5rem, 5vw, 4rem);

  /* motion */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 1s;

  /* frame */
  --shadow-frame: 0 1px 2px rgba(23,22,30,.06), 0 12px 40px -12px rgba(23,22,30,.22);
  --shadow-frame-hover: 0 2px 4px rgba(23,22,30,.07), 0 24px 64px -16px rgba(83,67,184,.30);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.1875rem;              /* 19px — generous, readable */
  line-height: 1.78;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violet-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #43348F; }
:is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--violet-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
.section-night :is(a, button):focus-visible, .site-footer :is(a, button):focus-visible,
.hero :is(a, button):focus-visible, .lightbox button:focus-visible {
  outline-color: var(--cyan);
}
p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--violet); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
.h-display { font-size: clamp(3.3rem, 9.4vw, 8rem); font-weight: 370; line-height: 0.98; }
h1, .h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2, .h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3, .h3 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.prose .lead { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.6; color: var(--ink); }
main { display: block; }

/* skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--night); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* eyebrow with thread line */
.eyebrow {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 560;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: ""; width: 44px; height: 1px;
  background: var(--gold); transform-origin: left;
}
.on-dark .eyebrow { color: var(--gold); }

/* stitched rule — the weaving motif */
.stitch {
  border: 0; height: 1px; margin: 0;
  background-image: linear-gradient(90deg, var(--gold-line) 55%, transparent 55%);
  background-size: 9px 1px;
}

/* italic display accent */
.disp-i { font-style: italic; font-weight: 360; }

/* oversized editorial numeral */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6.5vw, 5.4rem);
  font-weight: 340; line-height: 1;
  color: var(--gold); font-variant-numeric: lining-nums;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 560;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 1.05rem 2.1rem; min-width: 172px;
  border: 1px solid transparent; border-radius: 0;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-filled { background: var(--violet); color: #fff; border-color: var(--violet); }
.btn-filled:hover { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet-deep); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: #fff; color: var(--night); border-color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .45s var(--ease-out), box-shadow .45s var(--ease-out),
              border-color .45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; max-width: none; padding-inline: clamp(1.25rem, 3vw, 3rem);
}
.brand {
  font-family: var(--font-display); text-decoration: none;
  color: #fff; display: flex; align-items: center; gap: .9rem;
  transition: color .45s var(--ease-out);
}
.brand .brand-mark { height: 40px; width: auto; display: block; }
.brand .mark-gold { display: none; }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand .brand-name { font-size: 1.28rem; font-weight: 540; letter-spacing: .02em; }
.brand .brand-sub {
  font-size: .7rem; font-weight: 500; letter-spacing: .34em;
  text-transform: uppercase; opacity: .82; margin-top: .28em;
}
.site-header.is-solid .brand .mark-gold, .header-on-light .site-header:not(.is-solid) .brand .mark-gold { display: block; }
.site-header.is-solid .brand .mark-light, .header-on-light .site-header:not(.is-solid) .brand .mark-light { display: none; }
.site-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.6rem); }
.site-nav a {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 540; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; text-decoration: none; padding: .4rem 0; position: relative;
  transition: color .45s var(--ease-out);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current="page"]::after { background: var(--gold); }
.site-nav a { text-shadow: 0 1px 3px rgba(14,16,21,.45); }
.site-header.is-solid .site-nav a, .header-on-light .site-header:not(.is-solid) .site-nav a { text-shadow: none; }

.site-header.is-solid { background: rgba(251, 250, 247, .94); backdrop-filter: blur(14px); border-color: var(--line); }
.site-header.is-solid .brand, .site-header.is-solid .site-nav a { color: var(--ink); }
.site-header.is-solid .site-nav a[aria-current="page"] { color: var(--gold-text); }
.header-on-light .site-header:not(.is-solid) .brand,
.header-on-light .site-header:not(.is-solid) .site-nav a { color: var(--ink); }
.header-on-light .site-header:not(.is-solid) .site-nav a[aria-current="page"] { color: var(--gold-text); }

/* mobile nav */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .6rem;
  z-index: 120;
}
.nav-toggle .bar {
  display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0;
  transition: transform .4s var(--ease-out), opacity .3s, background-color .45s;
}
.site-header.is-solid .nav-toggle .bar, .header-on-light .site-header:not(.is-solid) .nav-toggle .bar { background: var(--ink); }
body.nav-open .nav-toggle .bar { background: #fff !important; }
body.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 0; z-index: 110;
    flex-direction: column; justify-content: center; gap: 2.2rem;
    background: var(--night);
    opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility .5s;
  }
  .site-nav a { color: #fff !important; font-size: 1.05rem; }
  body.nav-open .site-nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: -6% 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,16,21,.42) 0%, rgba(14,16,21,.16) 34%, rgba(14,16,21,.44) 62%, rgba(14,16,21,.78) 100%);
}
.hero .eyebrow, .hero-caption { text-shadow: 0 1px 3px rgba(14,16,21,.6), 0 2px 18px rgba(14,16,21,.45); }
.hero .eyebrow { font-size: .88rem; }
.hero-inner { width: 100%; padding-block: clamp(4rem, 9vh, 7rem) clamp(5.5rem, 11vh, 8.5rem); }
.hero .eyebrow { color: var(--paper); }
.hero .eyebrow::before { background: var(--gold); }
.hero-title { color: #fff; margin-bottom: 1.2rem; }
.hero-meta {
  font-family: var(--font-display); color: rgba(251,250,247,.88);
  font-size: .88rem; letter-spacing: .26em; text-transform: uppercase;
  margin: 0 0 .6rem;
  text-shadow: 0 1px 3px rgba(14,16,21,.6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem clamp(1.25rem, 3vw, 3rem);
  border-top: 1px solid rgba(251,250,247,.22);
  backdrop-filter: blur(2px);
}
.hero-caption {
  font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
  font-family: var(--font-display); opacity: .92; color: #fff;
}
.kenburns .hero-media img { animation: kenburns 18s var(--ease-out) both; }
@keyframes kenburns {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
.scroll-cue {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-display); font-size: .78rem;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(251,250,247,.85);
}
.scroll-cue::after {
  content: ""; width: 56px; height: 1px; background: rgba(251,250,247,.5);
  position: relative; overflow: hidden;
  background-image: linear-gradient(90deg, var(--gold), var(--gold));
  background-repeat: no-repeat; background-size: 40% 100%;
  animation: cue 2.6s var(--ease-out) infinite;
}
@keyframes cue { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
@media (max-width: 760px) {
  .scroll-cue { display: none; }
}

/* interior page hero (short) */
.page-head { padding: calc(84px + clamp(3.5rem, 8vw, 6rem)) 0 var(--s-block); }
.page-head .breadcrumb { margin-bottom: 2.2rem; }
.breadcrumb {
  font-family: var(--font-display); font-size: .84rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--violet-deep); }
.breadcrumb .sep { margin-inline: .6rem; color: var(--line-strong); }

/* ---------- sections ---------- */
.section { padding-block: var(--s-section); position: relative; }
.section-tint { background: var(--paper-2); }
.section-wash { background: var(--violet-wash); }
.section-night { background: var(--night); color: rgba(251,250,247,.92); }
.section-night h2, .section-night h3 { color: #fff; }

/* woven texture for dark sections */
.weave {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px);
}

/* statement — oversized editorial manifesto line */
.statement {
  position: relative; overflow: hidden;
}
.statement .statement-line {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.8vw, 4rem);
  font-weight: 400; line-height: 1.18; letter-spacing: -0.01em;
  max-width: 20ch; margin: 0;
  text-wrap: balance;
}
.statement .statement-line em { font-style: italic; font-weight: 360; color: var(--gold-text); }
.statement .watermark {
  position: absolute; right: -6%; top: 50%; translate: 0 -50%;
  width: clamp(280px, 34vw, 520px); opacity: .07; pointer-events: none;
  user-select: none;
}

/* featured work rows — editorial alternating features */
.feature-row {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center;
  padding-block: clamp(2.6rem, 6vw, 5rem);
}
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row .f-media { grid-column: span 7; }
.feature-row .f-text { grid-column: span 5; }
.feature-row.flip .f-media { order: 2; }
.feature-row.flip .f-text { order: 1; }
.feature-row .numeral { display: block; margin-bottom: 1.1rem; }
.feature-row h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 440;
  margin-bottom: .5rem;
}
.feature-row .f-meta { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.6rem; }
.f-link {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-size: .84rem; font-weight: 560;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: .45rem;
  transition: color .35s, border-color .35s;
}
.f-link .arrow { transition: transform .35s var(--ease-out); }
.f-link:hover { color: var(--gold-text); }
.f-link:hover .arrow { transform: translateX(5px); }
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row .f-media, .feature-row .f-text { grid-column: 1 / -1; order: initial !important; }
}

/* two-column editorial split */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.split > .col-text { grid-column: span 5; }
.split > .col-media { grid-column: span 7; }
.split.flip > .col-text { order: 2; }
.split.flip > .col-media { order: 1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split > .col-text, .split > .col-media { grid-column: 1 / -1; order: initial !important; }
}

/* ---------- artwork frame + museum label ---------- */
.frame {
  background: #fff; padding: clamp(.8rem, 1.6vw, 1.3rem);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-frame);
}
.frame img { width: 100%; }
.plate { padding: 1.1rem .35rem 0; }
.plate .plate-title {
  font-family: var(--font-display); font-weight: 540;
  font-size: 1.06rem; letter-spacing: .01em; color: var(--ink);
}
.plate .plate-meta {
  font-size: .92rem; color: var(--ink-soft); margin-top: .2rem; line-height: 1.5;
}

/* ---------- work grid ---------- */
.work-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3rem) clamp(1.4rem, 2.6vw, 2.4rem);
}
@media (max-width: 980px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .work-grid { grid-template-columns: 1fr; } }

.work-card { text-decoration: none; color: inherit; display: block; }
.work-card .frame { transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
.work-card .media { overflow: hidden; aspect-ratio: 4 / 3; }
.work-card .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.work-card:hover .frame { box-shadow: var(--shadow-frame-hover); transform: translateY(-4px); }
.work-card:hover .media img { transform: scale(1.045); }
.work-card .plate-title { position: relative; display: inline-block; }
.work-card .plate-title::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--violet); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.work-card:hover .plate-title::after { transform: scaleX(1); transform-origin: left; }
.work-card .num {
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .18em;
  color: var(--gold-text); font-variant-numeric: lining-nums;
  display: block; margin-bottom: .2rem;
}

/* gallery filter */
.filters { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; margin: 2.6rem 0 3.2rem; }
.filters button {
  background: none; border: 0; cursor: pointer; padding: .5rem 0;
  font-family: var(--font-display); font-size: .82rem; font-weight: 540;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.filters button:hover { color: var(--violet-deep); }
.filters button.is-active { color: var(--violet-deep); border-color: var(--violet); }
.work-grid .work-card.is-hidden { display: none; }
.work-grid .work-card { animation: cardIn .7s var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px);} to { opacity: 1; transform: none;} }

/* group heading in gallery */
.group-head { display: flex; align-items: baseline; gap: 1.6rem; margin: var(--s-block) 0 2.2rem; }
.group-head h2 { margin: 0; }
.group-head .stitch { flex: 1; }

/* ---------- parallax band ---------- */
.band {
  position: relative; min-height: 62vh; overflow: hidden;
  display: flex; align-items: flex-end; color: #fff; isolation: isolate;
}
.band .band-media { position: absolute; inset: -14% 0; z-index: -2; }
.band .band-media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,16,21,.12), rgba(14,16,21,.5));
}
.band .band-caption {
  padding: 1.6rem clamp(1.25rem, 3vw, 3rem);
  font-family: var(--font-display); font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase; opacity: .9;
}

/* ---------- portfolio detail ---------- */
.work-hero { margin-top: 84px; padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.work-hero .numeral { font-size: clamp(2.6rem, 4.5vw, 3.8rem); display: block; margin-bottom: .8rem; }
.work-meta-plate {
  display: flex; flex-wrap: wrap; gap: .4rem 3rem;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--line);
  padding: 1.3rem 0; margin: 2.4rem 0 0;
}
.work-meta-plate .meta-item { font-size: .98rem; color: var(--ink-soft); }
.work-meta-plate .meta-item strong {
  display: block; font-family: var(--font-display); font-weight: 560;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: .3rem;
}
.award-badge {
  display: inline-flex; align-items: center; gap: .9rem;
  background: rgba(193, 148, 55, 0.08); border: 1px solid rgba(193, 148, 55, 0.4);
  padding: 1rem 1.5rem; margin: 2rem 0 0;
  font-size: .98rem; color: var(--ink);
}
.award-badge svg { flex: none; color: var(--gold-text); }

.ob-panels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); margin-top: var(--s-block); }
@media (max-width: 760px) { .ob-panels { grid-template-columns: 1fr; } }
.ob-panels .panel { border-top: 2px solid var(--gold); padding-top: 1.4rem; }
.ob-panels .panel h3 {
  font-size: .8rem; font-weight: 560; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: .9rem;
}

/* detail gallery */
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); }
@media (max-width: 900px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-grid a { display: block; cursor: zoom-in; }
.detail-grid .media { overflow: hidden; aspect-ratio: 1; }
.detail-grid .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.detail-grid a:hover .media img { transform: scale(1.05); }

/* prev / next */
.work-pagenav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  border-top: 1px solid var(--line);
}
.work-pagenav .mid {
  display: flex; align-items: center; padding-inline: 1.6rem;
  border-inline: 1px solid var(--line);
}
.work-pagenav .mid a { color: var(--ink-soft); text-decoration: none; font-size: .8rem; font-family: var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.work-pagenav .mid a:hover { color: var(--violet-deep); }
.pagenav-link {
  display: block; padding: clamp(1.8rem, 4vw, 3rem) 0; text-decoration: none; color: inherit;
}
.pagenav-link.next { text-align: right; }
.pagenav-link .dir {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: .5rem;
  transition: color .3s;
}
.pagenav-link .name {
  font-family: var(--font-display); font-weight: 480;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.15;
  transition: color .3s;
}
.pagenav-link:hover .name, .pagenav-link:hover .dir { color: var(--violet-deep); }

/* ---------- videos ---------- */
.video-figure { margin: 0 0 var(--s-block); }
.video-shell { background: var(--night); box-shadow: var(--shadow-frame); }
.video-shell iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.7rem; }
.field label {
  display: block; font-family: var(--font-display); font-size: .78rem; font-weight: 560;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .55rem;
}
.field input, .field textarea {
  width: 100%; background: #fff; color: var(--ink);
  border: 1px solid rgba(23, 22, 30, 0.52); border-radius: 0;
  font-family: var(--font-text); font-size: 1.05rem; line-height: 1.6;
  padding: .95rem 1.1rem;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--violet-deep);
  box-shadow: 0 0 0 3px rgba(116,92,249,.22);
}
.contact-aside .frame { margin-bottom: 1.6rem; }
.contact-line { font-size: 1.02rem; color: var(--ink-soft); }
.contact-line a { font-weight: 600; }

/* social icons */
.social { display: flex; gap: 1.1rem; margin-top: 1.4rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--ink-soft); transition: color .35s, border-color .35s, transform .35s var(--ease-out);
}
.social a:hover { color: var(--violet-deep); border-color: var(--violet); transform: translateY(-3px); }
.social svg { width: 17px; height: 17px; }
.on-dark .social a { border-color: var(--line-light); color: rgba(251,250,247,.75); }
.on-dark .social a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: rgba(251,250,247,.78); }
.footer-word {
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(3.2rem, 7vw, 5.5rem) 0 0;
}
.footer-word img { height: clamp(52px, 7vw, 96px); width: auto; }
.footer-word .word {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.6vw, 4.6rem); font-weight: 380;
  line-height: 1; color: #fff; letter-spacing: -0.01em;
  text-decoration: none; text-wrap: balance;
}
.footer-word .word em { font-style: italic; font-weight: 340; color: var(--gold); }
.footer-word .word:hover em { color: var(--cyan); }
.site-footer .footer-main {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
@media (max-width: 860px) { .site-footer .footer-main { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: #fff; font-size: .8rem; font-weight: 560; letter-spacing: .24em;
  text-transform: uppercase; margin-bottom: 1.3rem;
}
.site-footer .footer-brand {
  font-family: var(--font-display); color: #fff; font-size: 1.5rem; font-weight: 480;
  text-decoration: none;
}
.site-footer .footer-tag { font-size: .95rem; margin-top: .8rem; max-width: 34ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .65rem; }
.site-footer a { color: rgba(251,250,247,.78); text-decoration: none; }
.site-footer a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid rgba(251,250,247,.12);
  padding: 1.5rem 0; font-size: .88rem;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 11, 16, .96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(92vw, 1400px); max-height: 84vh; object-fit: contain;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  transform: scale(.97); transition: transform .45s var(--ease-out);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox .lb-caption {
  position: absolute; bottom: 1.6rem; left: 50%; translate: -50% 0;
  color: rgba(251,250,247,.85); font-family: var(--font-display);
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  text-align: center; padding-inline: 1rem;
}
.lightbox button {
  position: absolute; background: none; border: 0; color: rgba(251,250,247,.8);
  cursor: pointer; padding: 1rem; transition: color .3s;
}
.lightbox button:hover { color: var(--cyan); }
.lightbox .lb-close { top: 1rem; right: 1.2rem; }
.lightbox .lb-prev { left: .6rem; top: 50%; translate: 0 -50%; }
.lightbox .lb-next { right: .6rem; top: 50%; translate: 0 -50%; }
.lightbox svg { width: 30px; height: 30px; }

/* ---------- reveal motion ----------
   Hidden initial states are gated behind html.js so content is always
   visible when JavaScript is unavailable. */
.reveal.is-in, .reveal-img.is-in { will-change: auto; }
html.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-img { overflow: hidden; }
html.js .reveal-img > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js .reveal-img.is-in > * { clip-path: inset(0 0 0 0); }

/* hero title line mask reveal */
.mask-lines .line { display: block; overflow: hidden; }
html.js .mask-lines .line > span {
  display: block; transform: translateY(112%);
  transition: transform 1.15s var(--ease-out);
}
html.js .mask-lines.is-in .line:nth-child(1) > span { transition-delay: .1s; }
html.js .mask-lines.is-in .line:nth-child(2) > span { transition-delay: .24s; }
html.js .mask-lines.is-in .line > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-img > *, .mask-lines .line > span,
  .work-card .media img, .kenburns .hero-media img {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .scroll-cue { display: none; }
  [data-parallax] > * { transform: none !important; }
}

/* misc */
.center { text-align: center; }
.mt-block { margin-top: var(--s-block); }
.section-cta { margin-top: 2.6rem; }
figure { margin: 0; }
figcaption { font-size: .92rem; color: var(--ink-soft); padding-top: .8rem; }