/* ============================================================
   ELAZAR FINE | Portfolio
   Design system and global styles
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

/* ---- Tokens ---- */
:root {
  --bg: #EAE9E5;
  --bg-card: #E3E2DD;
  --bg-deep: #1D1C1A;

  --ink: #1A1A1C;
  --ink-soft: #56565B;
  --ink-faint: #8E8D8D;

  --accent: #B23B30;
  --accent-soft: #C76A60;

  --rule: #C8C6C0;
  --rule-soft: #D8D6D1;

  --panel: rgba(18, 17, 15, 0.72);
  --panel-deep: rgba(18, 17, 15, 0.82);

  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;

  --max: 1280px;
  --gutter: clamp(20px, 4vw, 64px);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* ---- Page grain texture (subtle) ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 1;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(0,0,0,1) 0.5px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(0,0,0,1) 0.5px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
}

/* ============================================================
   Top Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), padding 0.3s var(--ease);
}

.nav__brand,
.nav__links {
  pointer-events: auto;
}

.nav__brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.9;
  mix-blend-mode: difference;
}

.nav__links {
  display: flex;
  gap: 36px;
}

.nav__link {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease);
  position: relative;
  mix-blend-mode: difference;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}

.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Once scrolled off the hero, the nav sits over light content where white
   links vanish. Give it a solid bar and dark links so it's always readable. */
.nav--scrolled {
  background: rgba(234, 233, 229, 0.94);
  box-shadow: 0 1px 0 rgba(26, 26, 28, 0.08);
  padding-top: 16px;
  padding-bottom: 16px;
}
.nav--scrolled .nav__brand,
.nav--scrolled .nav__link {
  color: var(--ink);
  mix-blend-mode: normal;
  opacity: 1;
}
.nav--scrolled .nav__link::after { background: var(--ink); }

/* Portfolio dropdown. The trigger is a normal nav link; the menu renders with
   its own solid panel (no blend) so it stays readable over anything. Opens on
   hover and on keyboard focus. */
.nav__dd {
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 14px; /* invisible bridge so the cursor can cross into the menu */
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.26s var(--ease-out),
              transform 0.26s var(--ease-out),
              visibility 0.26s;
  pointer-events: none;
}

.nav__dd:hover .nav__menu,
.nav__dd:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__menu-inner {
  display: flex;
  flex-direction: column;
  background: rgba(18, 17, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.nav__menu-link {
  display: block;
  padding: 9px 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.82);
  white-space: nowrap;
  border-radius: 3px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.nav__menu-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ============================================================
   Hero (homepage and case studies share this)
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 620px;
  max-height: 880px;
  overflow: hidden;
  background: var(--bg-deep);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 35%);
  pointer-events: none;
}

.hero__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 44%;
  min-width: 360px;
  max-width: 560px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(16, 15, 13, 0.74), rgba(16, 15, 13, 0.87));
  padding: 80px var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  color: #F4F2EE;
  border-left: 1px solid rgba(255,255,255,0.06);
}

.hero__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 250, 240, 0.75);
  margin-top: auto;
}

.hero__title {
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.025em;
  margin-top: 18px;
  color: #FAF7F2;
}

.hero__title--small {
  font-size: clamp(34px, 4.4vw, 56px);
}

.hero__desc {
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.88);
  margin-top: 22px;
  max-width: 420px;
}

.hero__scroll {
  margin-top: auto;
  padding-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero__scroll-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 250, 240, 0.65);
}

.hero__scroll-arrow {
  width: 28px;
  height: 28px;
  color: rgba(255, 250, 240, 0.85);
  animation: arrowBob 2.4s var(--ease) infinite;
}

@keyframes arrowBob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   Section frame
   ============================================================ */
.section {
  padding: clamp(80px, 11vw, 140px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

.section--tight { padding-top: clamp(60px, 8vw, 100px); padding-bottom: clamp(60px, 8vw, 100px); }

.section-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section-head__line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.section-head__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
}

.section-head__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.section-head--left .section-head__line { order: 2; }
.section-head--right .section-head__title { order: 2; }

/* ============================================================
   Featured Work tile (large, image + copy block side-by-side)
   ============================================================ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-bottom: clamp(80px, 10vw, 140px);
}

.feature__copy {
  max-width: 380px;
}

.feature__title {
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-bottom: 22px;
}

.feature__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.feature__media {
  position: relative;
  aspect-ratio: 17 / 10;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: 2px;
  transition: transform 0.6s var(--ease-out);
}

.feature__media img,
.feature__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

/* (Image hover-zoom removed: it replaced the per-image framing transform
   on the live site, snapping photos back to their unframed original.) */

.feature__caption {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Reverse layout */
.feature--reverse .feature__copy { order: 2; }
.feature--reverse .feature__media-wrap { order: 1; }

/* ============================================================
   Work grid (3 columns of smaller tiles)
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px);
}

.work-tile {
  display: block;
  cursor: pointer;
  position: relative;
}

.work-tile__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.work-tile__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 16px;
  transition: color 0.4s var(--ease);
}

.work-tile:hover .work-tile__title { color: var(--accent); }

.work-tile__media {
  position: relative;
  aspect-ratio: 17 / 10;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 18px;
}

.work-tile__media img,
.work-tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

/* (Tile image hover-zoom removed: same framing-transform conflict as above.
   The tile still has its title-color and overlay hover feedback.) */

/* Subtle arrow on hover */
.work-tile__media::after {
  content: '→';
  position: absolute;
  bottom: 14px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.5s var(--ease-out);
}

.work-tile:hover .work-tile__media::after {
  opacity: 1;
  transform: translateY(0);
}

.work-tile__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Variant: half-row tiles (2 columns) */
.work-grid--half { grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 5vw, 72px); max-width: 920px; margin: 0 auto; }

/* ============================================================
   Placeholder media (when assets are not yet added)
   ============================================================ */
.media-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.025) 12px 24px),
    var(--bg-card);
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}

.media-placeholder span {
  max-width: 80%;
  line-height: 1.5;
}

.media-placeholder--dark {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.04) 12px 24px),
    #2A2926;
  color: rgba(255, 250, 240, 0.5);
}

/* ============================================================
   About section
   ============================================================ */
.about {
  padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(80px, 10vw, 120px);
  max-width: var(--max);
  margin: 0 auto;
}

.about__head {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 56px;
}

.about__head-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--ink);
}

.about__head-line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.about__body {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--ink);
}

.about__body p + p { margin-top: 18px; }

/* ============================================================
   Standalone About page + typeset resume
   ============================================================ */
.about-page {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(108px, 14vw, 168px) var(--gutter) clamp(72px, 9vw, 110px);
}

.about-page__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.about-page__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: 30px;
}

.about-page__bio {
  max-width: 680px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--ink);
}

.about-page__bio p + p { margin-top: 18px; }

.about-page__actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.resume-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 24px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.resume-download:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.resume-download svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Reusable outbound-link button (e.g. "visit the live page") */
.btn-out {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 22px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.btn-out:hover {
  background: var(--accent);
  transform: translateY(-1px);
}

.btn-out svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Resume body */
.resume {
  margin-top: clamp(56px, 8vw, 90px);
}

.resume__section + .resume__section {
  margin-top: clamp(42px, 5.5vw, 64px);
}

.resume__section-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}

.resume__section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
  white-space: nowrap;
}

.resume__section-line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.resume__job + .resume__job {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--rule-soft);
}

.resume__job-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.resume__job-org {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.resume__job-loc {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

.resume__job-dates {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.resume__job-role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--accent);
  margin: 5px 0 16px;
}

.resume__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.resume__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}

.resume__bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.resume__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.resume__skill {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  padding: 7px 14px;
  border-radius: 100px;
}

.resume__edu-school {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.resume__edu-detail {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 5px;
}

.about-page__back {
  display: inline-block;
  margin-top: clamp(48px, 7vw, 72px);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.about-page__back:hover {
  color: var(--accent);
}

@media (max-width: 600px) {
  .resume__job-dates {
    width: 100%;
    margin-top: 2px;
  }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  padding: clamp(40px, 6vw, 60px) var(--gutter) 36px;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

.footer::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--rule);
  margin-bottom: 40px;
}

.footer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer__email {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--ink);
  transition: opacity 0.3s var(--ease);
}

.footer__email:hover { opacity: 0.7; }

.footer__email-domain { color: var(--accent); }

.footer__copy {
  margin-top: 36px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   Case Study page styles
   ============================================================ */
.case-meta {
  padding: clamp(50px, 6vw, 80px) var(--gutter) clamp(20px, 3vw, 40px);
  max-width: var(--max);
  margin: 0 auto;
}

.case-meta__head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 36px;
}

.case-meta__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3vw, 34px);
}

.case-meta__title em { color: var(--accent); font-weight: 400; }

.case-meta__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-faint);
}

.case-meta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}

.case-meta__field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.case-meta__field-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* Case study brief / approach blocks */
.case-block {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter);
}

.case-block__head {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--ink);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.case-block__head em { color: var(--accent); }

.case-block__head-line {
  flex: 1;
  height: 1px;
  background: var(--rule);
  margin-left: 8px;
}

.case-block__text {
  max-width: 720px;
  margin-left: auto;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
}

.case-block__text p + p { margin-top: 14px; }

/* Two-column block (image + text) */
.case-twocol {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 56px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.case-twocol--reverse .case-twocol__media { order: 2; }

.case-twocol__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: 2px;
}

.case-twocol__media img,
.case-twocol__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-twocol__media--portrait { aspect-ratio: 3 / 4; }
.case-twocol__media--wide     { aspect-ratio: 16 / 10; }

.case-twocol__copy {
  padding-top: 12px;
}

.case-twocol__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.case-twocol__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.case-twocol__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ============================================================
   SITE COMPARE caption (Website case study)
   Pairs an image with a "label | value" caption underneath,
   styled as small caps for the editorial feel.
   ============================================================ */
.site-compare__col {
  /* When the right column of case-twocol is a frame + caption rather
     than just a frame, this wrapper lets the caption sit cleanly
     beneath the image without disrupting the parent grid alignment. */
  display: flex;
  flex-direction: column;
}

.site-compare__frame {
  position: relative;
  /* The case-twocol__media classes set the aspect-ratio + background;
     this rule just keeps the frame as a positioned context for the
     media placeholder inside it. */
}

.site-compare__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 12px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-top: 1px solid var(--ink-faint);
  margin-top: 12px;
}

.site-compare__cap-label {
  color: var(--ink);
  font-weight: 700;
}

.site-compare__cap-value {
  color: var(--ink-soft);
  font-weight: 500;
}

/* Single hero shot inside a case study */
.case-shot {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) var(--gutter);
}

.case-shot__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: 2px;
}

.case-shot__media img,
.case-shot__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-shot__caption {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Outcome block - same as case-block but with bigger numbers */
.outcome {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--gutter);
}

.outcome__bar {
  margin: 36px auto;
  max-width: 760px;
}

.outcome__numbers {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-sans);
  margin-bottom: 14px;
}

.outcome__num {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--ink);
}

.outcome__num-label {
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.outcome__progress {
  height: 14px;
  background: rgba(178, 59, 48, 0.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.outcome__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 0;
  transition: width 1.8s var(--ease-out);
}

.outcome__text {
  max-width: 720px;
  margin: 32px auto 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
}

/* ============================================================
   Press page selected coverage
   ============================================================ */
.press-row {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 56px) var(--gutter);
}

.press-row__caption {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: right;
  margin-bottom: 14px;
}

.press-row__shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: 2px;
}

.press-row__shot img,
.press-row__shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) var(--gutter);
}

.press-pair__cap {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.press-pair__shot {
  aspect-ratio: 4 / 3;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: 2px;
}

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

/* ============================================================
   Photo gallery (Photography page)
   Row-based layout. Each row carries an explicit aspect-ratio
   that drives row height; items fill their grid cells. A drag
   handle sits between items as a fixed-width grid column. In
   Builder Mode, the handle is visible and can be dragged to
   re-proportion the row without changing its height (no
   negative space possible inside the row).
   ============================================================ */
.photo-gallery {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(60px, 8vw, 100px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 24px);
}

.pg-row {
  display: grid;
  --row-gap: clamp(14px, 1.8vw, 24px);
  gap: 0; /* the gap is provided by handle columns inside grid-template-columns */
  position: relative;
}

.pg-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
  height: 100%;
  min-height: 0;
}

.pg-item {
  position: relative;
  background: var(--bg-card);
  overflow: hidden;
  border-radius: 2px;
  min-width: 0;
  min-height: 0;
}

.pg-item .media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pg-item img,
.pg-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* (Gallery image hover-zoom removed: same framing conflict.) */

/* Subtle hover zoom-in to signal clickability. We scale the placeholder
   (clipped by its overflow:hidden wrapper) rather than the image, so the
   per-image framing transform / object-position is never disturbed. Off
   while the editor is active so it doesn't fight precise framing work. */
.media-placeholder {
  transition: transform 0.5s var(--ease-out);
}
body:not(.builder-active) .feature__media:hover .media-placeholder,
body:not(.builder-active) .work-tile:hover .media-placeholder,
body:not(.builder-active) .pg-item:hover .media-placeholder {
  transform: scale(1.035);
}

/* Row-level aspect-ratios. These drive row height. Items stretch to fit. */
.pg-row--full       { aspect-ratio: 16 / 9; }
.pg-row--wide       { aspect-ratio: 21 / 9; }
.pg-row--half-half  { aspect-ratio: 16 / 6; }
.pg-row--thirds     { aspect-ratio: 16 / 4; }
.pg-row--tall-wide  { aspect-ratio: 9 / 4; }
.pg-row--stack-tall { aspect-ratio: 2 / 1; }
.pg-row--wide-stack { aspect-ratio: 2 / 1; }

/* Grid templates. Multi-item rows use CSS variables so the renderer can
   adjust column proportions on resize. --row-gap is the visual gap. */
.pg-row--full,
.pg-row--wide {
  grid-template-columns: 1fr;
}

.pg-row--half-half {
  grid-template-columns: var(--col0, 1fr) var(--row-gap) var(--col1, 1fr);
}

.pg-row--thirds {
  grid-template-columns: var(--col0, 1fr) var(--row-gap) var(--col1, 1fr) var(--row-gap) var(--col2, 1fr);
}

.pg-row--tall-wide {
  grid-template-columns: var(--col0, 4fr) var(--row-gap) var(--col1, 8fr);
}

.pg-row--stack-tall {
  grid-template-columns: var(--col0, 4fr) var(--row-gap) var(--col1, 8fr);
}

.pg-row--wide-stack {
  grid-template-columns: var(--col0, 8fr) var(--row-gap) var(--col1, 4fr);
}

/* Handle between items. Sits in the grid as a column. Visible in Builder Mode. */
.pg-row__handle {
  background: transparent;
  position: relative;
  align-self: stretch;
}

.builder-active .pg-row__handle {
  cursor: col-resize;
}

.builder-active .pg-row__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 36%;
  background: var(--ink-faint);
  border-radius: 2px;
  transition: background 0.15s ease, height 0.15s ease, width 0.15s ease;
}

.builder-active .pg-row__handle:hover::before,
.builder-active .pg-row__handle.is-dragging::before {
  background: var(--ink);
  height: 70%;
  width: 4px;
}

/* Bottom-edge handle for dragging row height. Hidden until Builder Mode.
   Absolutely positioned so it stays out of the column grid. */
.pg-row__vhandle {
  display: none;
}
.builder-active .pg-row__vhandle {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 12px;
  cursor: ns-resize;
  z-index: 7;
}
.builder-active .pg-row__vhandle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  height: 3px;
  background: var(--ink-faint);
  border-radius: 2px;
  transition: background 0.15s ease, height 0.15s ease, width 0.15s ease;
}
.builder-active .pg-row__vhandle:hover::before,
.builder-active .pg-row__vhandle.is-dragging::before {
  background: var(--ink);
  height: 4px;
  width: 50%;
}

/* Hide the per-item corner resize handle inside the photo gallery — the
   row-level horizontal handle is the resize affordance here. */
.photo-gallery .placeholder-resize {
  display: none !important;
}

/* Override site-adjustments.css for photography items.
   Old per-item transforms (computed for the previous fixed-grid layout)
   no longer match the new row-based container shapes, so the saved
   "translate + scale" left photos at the wrong size and created gaps
   inside each row. Force cover-fit with no transform; the row's
   aspect-ratio determines the slot shape and the image fills it cleanly.
   Selector specificity (.photo-gallery .pg-item img = 0,2,1) beats
   site-adjustments.css's [data-asset-name="X"] > img (0,1,1), so
   no !important is needed for object-fit. Transform needs !important
   because the exported CSS sets one explicitly. */
.photo-gallery .pg-item img,
.photo-gallery .pg-item video {
  object-fit: cover;
  /* Framing comes from site-adjustments.css: object-position (shift) plus an
     optional scale (zoom, never below 1). No transform pinned here, so the
     exported scale can take effect. Re-export after changing the gallery so
     stale rules from older exports are replaced. */
}

/* (Stale per-item aspect-ratio overrides still get neutralized below.) */

/* The exported site-adjustments.css can also carry per-item aspect-ratio
   overrides (from older edits) as *:has(> [data-asset-name]) rules. On the
   gallery those land on .pg-item and fight the row-driven height, throwing
   off the spacing between rows. The row owns the height on desktop, so pin
   gallery items back to auto. Scoped to >600px so the phone layout, which
   intentionally gives each item its own aspect-ratio, is left alone. */
@media (min-width: 601px) {
  .photo-gallery .pg-item { aspect-ratio: auto !important; }
}

/* Gallery photos support shift (drag) and zoom-in (buttons + wheel). All
   per-frame controls stay visible. Zoom can't go below the fill point, so
   no gap is possible. */
.builder-active .photo-gallery .pg-item.has-media img,
.builder-active .photo-gallery .pg-item.has-media video {
  cursor: grab;
}

/* ============================================================
   GALLERY LAYOUT EDITOR (photography page)
   Hover controls on each row, "Add row" button at the bottom.
   Hidden until .builder-active is on body.
   ============================================================ */

.pg-row {
  position: relative;
}

.pg-row-ctrl {
  position: absolute;
  top: -12px;
  right: 0;
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--bg);
  padding: 4px 6px 4px 10px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  z-index: 8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%);
}

.builder-active .pg-row-ctrl {
  display: inline-flex;
}

.pg-row-ctrl__btn {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
}

.pg-row-ctrl__btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.pg-row-ctrl__btn--danger:hover {
  background: var(--accent);
}

.pg-row-ctrl__btn svg { display: block; }

.pg-row-ctrl__label {
  font-size: 10.5px;
  font-weight: 500;
}

/* "Add row" button at the bottom of the gallery */
.pg-add-row {
  display: none;
  margin-top: clamp(20px, 3vw, 32px);
  text-align: center;
}

.builder-active .pg-add-row {
  display: block;
}

.pg-add-row__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: transparent;
  color: var(--ink);
  border: 1.5px dashed var(--ink-faint);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.pg-add-row__btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.pg-add-row__btn svg { display: block; }

/* Row-type picker modal */
.pg-type-modal__card {
  max-width: 720px;
}

.pg-type-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.pg-type-choice {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pg-type-choice:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--ink-faint);
}

.pg-type-choice.is-current {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.pg-type-choice__icon {
  width: 56px;
  height: 40px;
  color: var(--ink);
}

.pg-type-choice.is-current .pg-type-choice__icon {
  color: var(--bg);
}

.pg-type-choice__label {
  font-size: 13px;
  font-weight: 600;
}

.pg-type-choice__count {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pg-type-choice.is-current .pg-type-choice__count {
  color: rgba(234, 233, 229, 0.7);
}

@media (max-width: 600px) {
  .pg-type-choices { grid-template-columns: 1fr; }
}

/* ============================================================
   Credits grid (X Production page)
   ============================================================ */
.credits {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
}

.credits__col h4 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 24px;
  color: var(--ink);
}

.credits__group { margin-bottom: 22px; }

.credits__group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

.credits__group-list {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================================
   Page intro for case study (the "Case Study" label + line)
   ============================================================ */
.case-intro {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 7vw, 90px) var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.case-intro__line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.case-intro__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 30px);
  white-space: nowrap;
}

.case-intro__label em { color: var(--accent); font-weight: 400; }

.case-intro__dot {
  width: 4px; height: 4px;
  background: var(--ink-faint);
  border-radius: 50%;
}

/* ============================================================
   Quote / pull text used on some case studies
   ============================================================ */
.pullquote {
  max-width: 880px;
  margin: clamp(40px, 6vw, 72px) auto;
  padding: 0 var(--gutter);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ============================================================
   Page transition + scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* Hero entrance. This works now because the page forces its first paint on
   load (the scroll nudge in script.js), so these animated layers are actually
   rasterized and the motion is visible, instead of silently failing until a
   scroll. Reduced-motion users get everything shown instantly (see below). */
.hero__panel {
  animation: heroPanelIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroPanelIn {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero__label,
.hero__title,
.hero__desc {
  opacity: 0;
  animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero__label { animation-delay: 0.18s; }
.hero__title { animation-delay: 0.30s; }
.hero__desc  { animation-delay: 0.44s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .feature--reverse .feature__copy { order: 1; }
  .feature--reverse .feature__media-wrap { order: 2; }

  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-grid--half { grid-template-columns: 1fr; }

  .case-twocol { grid-template-columns: 1fr; gap: 28px; }
  .case-twocol--reverse .case-twocol__media { order: 1; }

  .press-pair { grid-template-columns: 1fr; }

  .credits { grid-template-columns: 1fr; gap: 36px; }

  .hero__panel {
    width: 88%;
    min-width: unset;
  }
}

@media (max-width: 600px) {
  .nav { padding: 16px var(--gutter); }
  .nav__brand { font-size: 16px; }
  .nav__links { gap: 16px; }
  .nav__link { font-size: 13px; }

  .hero { height: 68vh; min-height: 420px; max-height: 620px; }
  .hero__panel {
    width: 100%;
    justify-content: flex-end;
    padding: 0 var(--gutter) 44px;
    background: linear-gradient(180deg,
      rgba(16, 15, 13, 0) 20%,
      rgba(16, 15, 13, 0.5) 52%,
      rgba(16, 15, 13, 0.9) 100%);
    border-left: none;
  }
  .hero__title { font-size: 44px; }
  .hero__scroll { margin-top: 28px; }

  .work-grid { grid-template-columns: 1fr; }

  .case-meta__grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Photography gallery: collapse to single column on phones.
     Row-level aspect-ratios get dropped; each item carries its own. */
  .pg-row--full,
  .pg-row--wide,
  .pg-row--stack-tall,
  .pg-row--tall-wide,
  .pg-row--half-half,
  .pg-row--thirds,
  .pg-row--wide-stack {
    grid-template-columns: 1fr;
    /* !important so a desktop inline row-height override (set by dragging
       the row's bottom edge) doesn't force a fixed aspect on phones. */
    aspect-ratio: auto !important;
  }
  .pg-row__handle { display: none; }
  .pg-row__vhandle { display: none !important; }
  .pg-stack {
    grid-template-rows: auto auto;
    height: auto;
  }
  /* Phone aspect-ratios applied per item since rows no longer drive height */
  .pg-row--full > .pg-item,
  .pg-row--wide > .pg-item,
  .pg-row--half-half > .pg-item,
  .pg-row--thirds > .pg-item,
  .pg-row--stack-tall > .pg-item,
  .pg-row--wide-stack > .pg-item,
  .pg-stack > .pg-item {
    aspect-ratio: 4 / 3;
  }
  .pg-row--full > .pg-item,
  .pg-row--wide > .pg-item {
    aspect-ratio: 16 / 9;
  }
  .pg-row--tall-wide > .pg-item:first-child { aspect-ratio: 4 / 5; }
  .pg-row--tall-wide > .pg-item:last-child  { aspect-ratio: 3 / 2; }

  /* On phones the gallery relayouts to its own per-item aspect-ratios, so the
     desktop pixel pan/zoom would be wrong here. Drop it and just cover-fill;
     this also guarantees no gap regardless of the saved framing. */
  .photo-gallery .pg-item img,
  .photo-gallery .pg-item video {
    transform: none !important;
    object-position: center !important;
  }

  .footer__row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 420px) {
  .hero__title { font-size: 38px; }
  .footer__email { font-size: 28px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html .hero__panel,
  html .hero__label,
  html .hero__title,
  html .hero__desc {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   BUILDER MODE
   Drag-and-drop UI for swapping placeholders with real assets.
   Hidden until the user enables it.
   ============================================================ */

.builder-toolbar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  padding: 8px;
  border-radius: 100px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.15);
  font-family: var(--font-sans);
}

.builder-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.builder-btn:hover {
  background: rgba(234, 233, 229, 0.08);
}

.builder-btn--primary {
  background: rgba(234, 233, 229, 0.06);
  border-color: rgba(234, 233, 229, 0.18);
}

.builder-btn--primary:hover {
  background: rgba(234, 233, 229, 0.14);
}

.builder-btn--ghost {
  padding: 8px 12px;
  font-size: 10px;
  opacity: 0.7;
}

.builder-btn--ghost:hover {
  opacity: 1;
}

.builder-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(234, 233, 229, 0.3);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.builder-dot.is-on {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(178, 59, 48, 0.25);
}

.builder-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}

.builder-actions[hidden] { display: none; }

.builder-count {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  padding: 0 10px;
  white-space: nowrap;
}

/* Dropzone visual states (only visible when builder mode is on) */

.builder-active [data-asset-name] {
  position: relative;
  cursor: copy;
  outline: 1px dashed rgba(178, 59, 48, 0.5);
  outline-offset: -1px;
  transition: outline-color 0.15s ease, outline-width 0.15s ease;
}

.builder-active [data-asset-name]:hover {
  outline-color: rgba(178, 59, 48, 0.9);
}

.builder-active [data-asset-name].is-dragover {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.builder-active [data-asset-name]::before {
  content: attr(data-asset-name);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  background: var(--ink);
  color: var(--bg);
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-active [data-asset-name].has-media::before {
  background: var(--accent);
  content: attr(data-asset-name) " ✓";
}

.builder-active [data-asset-name].is-dragover::before {
  background: var(--accent);
  content: "Drop to load";
}

/* When media is loaded, hide the placeholder stripe pattern and the label span,
   then show the inserted img/video at full size */

.media-placeholder.has-media {
  background: var(--ink);
}

.media-placeholder.has-media > span {
  display: none;
}

.media-placeholder > img,
.media-placeholder > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Toast for builder feedback */

.builder-toast {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 1001;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.builder-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Help modal */

.builder-modal {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.builder-modal[hidden] { display: none; }

.builder-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 17, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.builder-modal__card {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  padding: 40px 44px 36px;
  border-radius: 8px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  font-family: var(--font-sans);
  line-height: 1.55;
}

.builder-modal__card h2 {
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.builder-modal__card h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 22px 0 8px;
  color: var(--ink-soft);
  font-weight: 500;
}

.builder-modal__card p,
.builder-modal__card li {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 10px;
}

.builder-modal__card ul {
  padding-left: 18px;
  margin: 0 0 10px;
}

.builder-modal__card code {
  background: rgba(18, 17, 15, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

.builder-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 10px;
}

.builder-modal__close:hover { color: var(--ink); }

/* Mobile tweaks */

@media (max-width: 600px) {
  .builder-toolbar {
    bottom: 16px;
    right: 12px;
    left: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .builder-count { padding: 0 4px; font-size: 10px; }
  .builder-btn { padding: 7px 12px; font-size: 10px; }
}

/* ============================================================
   PER-FRAME ADJUSTMENT CONTROLS
   Inline buttons that appear on each loaded frame in Builder Mode.
   ============================================================ */

.placeholder-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;
  display: none;
  gap: 4px;
  background: rgba(18, 17, 15, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px;
  border-radius: 100px;
  pointer-events: auto;
}

.builder-active .has-media .placeholder-controls {
  display: inline-flex;
}

.ph-ctrl {
  background: transparent;
  border: none;
  color: var(--bg);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}

.ph-ctrl:hover {
  background: rgba(234, 233, 229, 0.18);
}

.ph-ctrl--danger:hover {
  background: var(--accent);
}

.ph-ctrl svg {
  display: block;
}

/* Cursor states inside builder mode */

.builder-active [data-asset-name]:not(.has-media) {
  cursor: copy;
}

.builder-active .has-media > img,
.builder-active .has-media > video {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Disable the scroll-animations on inner media so the transform isn't fought */

.media-placeholder > img,
.media-placeholder > video {
  will-change: transform;
}

/* The data-asset-name label moves slightly so it doesn't fight the controls */

.builder-active [data-asset-name].has-media::before {
  max-width: calc(100% - 160px);
}

/* ============================================================
   VIDEO PLAY OVERLAY
   Big circular play button shown on top of with-audio videos
   before the first play. Visible on both Builder Mode and live.
   Backdrop has pointer-events:none so panning still works in
   Builder Mode; only the button itself captures clicks.
   ============================================================ */

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.video-play-overlay.is-gone {
  opacity: 0;
  pointer-events: none !important;
}

.video-play-btn {
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  transition: transform 0.18s ease;
}

.video-play-btn:hover {
  transform: scale(1.08);
}

.video-play-btn:active {
  transform: scale(0.96);
}

.video-play-btn svg {
  display: block;
}

/* Active-state styling for the poster control button (when a thumbnail is set) */
.ph-ctrl--active {
  background: rgba(234, 233, 229, 0.28);
}
.ph-ctrl--active:hover {
  background: rgba(234, 233, 229, 0.38);
}

/* ============================================================
   FRAME SPECS BADGE
   Small "1600 x 900 · 16:9" hint shown on empty placeholders
   while Builder Mode is active.
   ============================================================ */

.placeholder-specs {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.builder-active [data-asset-name]:not(.has-media) > .placeholder-specs {
  display: block;
}

.media-placeholder--dark .placeholder-specs {
  background: rgba(255, 255, 255, 0.18);
  color: var(--bg);
  box-shadow: none;
}

/* On very small tiles, the badge sits in the corner instead of overlapping the label */

.builder-active [data-asset-name]:not(.has-media) > .placeholder-specs {
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   AUDIO PROMPT (shown on video drop)
   ============================================================ */

.builder-prompt__card {
  max-width: 540px;
}

.builder-prompt__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 540px) {
  .builder-prompt__choices { grid-template-columns: 1fr; }
}

.builder-prompt__choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(18, 17, 15, 0.18);
  border-radius: 6px;
  padding: 16px 18px;
  font-family: var(--font-sans);
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.builder-prompt__choice:hover {
  background: rgba(18, 17, 15, 0.04);
  border-color: rgba(18, 17, 15, 0.4);
}

.builder-prompt__choice--primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.builder-prompt__choice--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.builder-prompt__label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.builder-prompt__detail {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.75;
}

/* Icon-only toolbar buttons (undo/redo) */
.builder-btn--icon {
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.builder-btn--icon svg { display: block; }

.builder-btn[disabled],
.builder-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   FRAME RESIZE HANDLE
   Bottom-right corner handle, visible only in Builder Mode,
   lets the user drag to adjust the frame's aspect ratio.
   ============================================================ */

.placeholder-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  z-index: 6;
  cursor: nwse-resize;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 5px;
  color: var(--bg);
  background: rgba(18, 17, 15, 0.78);
  border-top-left-radius: 8px;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
  touch-action: none;
}

.builder-active .placeholder-resize {
  display: inline-flex;
}

.placeholder-resize:hover {
  opacity: 1;
  background: var(--accent);
}

.placeholder-resize svg { display: block; }

/* While dragging, hint the user with a contrast outline on the parent */
.is-resizing { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ============================================================
   HERO PLACEHOLDERS — controls bar repositioning
   Heroes have a dark panel covering the right side of the frame,
   which would bury the controls bar (top-right) and resize handle
   (bottom-right). Move the controls to the bottom-left and hide
   the resize handle (which has no effect on heroes anyway).
   ============================================================ */

.builder-active .media-placeholder--dark .placeholder-controls {
  top: auto;
  right: auto;
  bottom: 14px;
  left: 14px;
  z-index: 50;
}

.media-placeholder--dark .placeholder-resize {
  display: none !important;
}

/* Make the controls float above anything that might overlay them */
.placeholder-controls {
  z-index: 50;
}

/* Bump up the X button's visual presence so it reads as the primary
   destructive action at a glance, not just another generic icon. */
.ph-ctrl--danger {
  background: rgba(178, 59, 48, 0.18);
}

.ph-ctrl--danger:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ============================================================
   HGGW EDITORIAL LAYOUT
   Three-block magazine layout for the Giving Week Selected Work:
     Block 1 — wide spotlight (16:9) + caption side-by-side
     Block 2 — three tall items staggered (reel, landing, reel)
     Block 3 — mirror of block 1 (caption + spotlight)
   ============================================================ */

.hggw-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(60px, 8vw, 100px);
  display: flex;
  flex-direction: column;
  gap: clamp(70px, 9vw, 120px);
}

.hggw-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 3vw, 36px);
  row-gap: 20px;
  align-items: start;
}

.hggw-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: 2px;
}

.hggw-media .media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* YouTube/Vimeo embeds fill their 16:9 container the same way media does. */
.yt-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hggw-aspect-1609   { aspect-ratio: 16 / 9; }
.hggw-aspect-916    { aspect-ratio: 9 / 16; }
.hggw-aspect-landing{ aspect-ratio: 1200 / 1954; }

.hggw-cap {
  font-family: var(--font-sans);
  padding-top: 4px;
}

.hggw-cap-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}

.hggw-cap p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 38em;
}

/* BLOCK 1: spotlight (8 cols) left, caption (4 cols) right, centered vertically */
.hggw-block--spotlight-left > .hggw-media {
  grid-column: 1 / span 8;
}
.hggw-block--spotlight-left > .hggw-cap {
  grid-column: 9 / span 4;
  align-self: center;
  padding-left: 8px;
}

/* BLOCK 2: three tall items with intentional top-offsets to stagger */
.hggw-block--three-tall .hggw-tall {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.hggw-block--three-tall > .hggw-tall:nth-child(1) {
  grid-column: 1 / span 4;
  margin-top: 0;
}
.hggw-block--three-tall > .hggw-tall:nth-child(2) {
  grid-column: 5 / span 4;
  margin-top: clamp(40px, 6vw, 80px);
}
.hggw-block--three-tall > .hggw-tall:nth-child(3) {
  grid-column: 9 / span 4;
  margin-top: clamp(80px, 11vw, 140px);
}

/* BLOCK 3: caption (4 cols) left, spotlight (8 cols) right, mirror of block 1 */
.hggw-block--spotlight-right > .hggw-cap {
  grid-column: 1 / span 4;
  align-self: center;
  padding-right: 8px;
}
.hggw-block--spotlight-right > .hggw-media {
  grid-column: 5 / span 8;
}

/* Responsive: stack everything single-column below 900px */
@media (max-width: 900px) {
  .hggw-block {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .hggw-block--spotlight-left > .hggw-media,
  .hggw-block--spotlight-left > .hggw-cap,
  .hggw-block--spotlight-right > .hggw-cap,
  .hggw-block--spotlight-right > .hggw-media,
  .hggw-block--three-tall > .hggw-tall:nth-child(1),
  .hggw-block--three-tall > .hggw-tall:nth-child(2),
  .hggw-block--three-tall > .hggw-tall:nth-child(3) {
    grid-column: 1;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .hggw-block--three-tall { row-gap: 40px; }
  /* On mobile, ensure block 3 captions appear above the media in DOM order
     (caption-then-media in block 3) so reading flow stays consistent. */
}

/* ============================================================
   Contact page
   ============================================================ */

/* Pages with no dark hero (e.g. Contact) keep the nav solid and dark
   from the very top, so the links never sit invisible over light bg. */
.page-solid-nav .nav {
  background: rgba(234, 233, 229, 0.94);
  box-shadow: 0 1px 0 rgba(26, 26, 28, 0.08);
  padding-top: 16px;
  padding-bottom: 16px;
}
.page-solid-nav .nav__brand,
.page-solid-nav .nav__link {
  color: var(--ink);
  mix-blend-mode: normal;
  opacity: 1;
}
.page-solid-nav .nav__link::after { background: var(--ink); }
.nav__link--current { opacity: 1; }
.nav__link--current::after { transform: scaleX(1); transform-origin: left; }

.contact-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 180px var(--gutter) 120px;
}
.contact-hero__inner {
  max-width: 640px;
}
.contact-hero__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
.contact-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 500;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 28px;
}
.contact-hero__note {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto 48px;
  max-width: 460px;
}
.contact-hero__email {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s var(--ease);
  border-bottom: 1px solid rgba(26, 26, 28, 0.18);
  padding-bottom: 4px;
}
.contact-hero__email:hover { color: var(--accent); border-bottom-color: var(--accent); }
.contact-hero__email-domain { color: var(--ink-faint); }
.contact-hero__email:hover .contact-hero__email-domain { color: var(--accent); }
.contact-hero__back {
  display: block;
  margin-top: 64px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.contact-hero__back:hover { color: var(--ink); }

/* Clickable media overlay (links set in Builder Mode) */
.asset-link { cursor: pointer; display: block; }

/* Contact form */
.contact-form {
  margin: 8px auto 0;
  max-width: 480px;
  text-align: left;
}
.contact-form__hp { position: absolute; left: -9999px; }
.contact-form__field { margin-bottom: 22px; }
.contact-form__field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid rgba(26, 26, 28, 0.14);
  border-radius: 4px;
  padding: 13px 15px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form__submit {
  display: inline-block;
  margin-top: 4px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  border-radius: 4px;
  padding: 14px 32px;
  font: inherit;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
}
.contact-form__submit:hover { background: var(--accent); }
.contact-form__submit:active { transform: translateY(1px); }
.contact-hero__alt {
  margin-top: 32px;
  font-size: 0.95rem;
  color: var(--ink-faint);
}
.contact-hero__alt a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.contact-hero__alt a:hover { color: var(--accent); }

.contact-hero__social {
  margin-top: 10px;
  font-size: 0.95rem;
}
.contact-hero__social a {
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(26, 26, 28, 0.18);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact-hero__social a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   Touch devices: the Portfolio hover dropdown can't open on a
   touchscreen, so hide it and let "Portfolio" act as a direct
   link to the work grid. (Desktop with a mouse keeps the menu.)
   ============================================================ */
@media (hover: none) {
  .nav__menu { display: none !important; }
}

/* ============================================================
   Phone framing
   Your custom framing now applies on phones too (positions are
   resolution-independent, and every tile frame keeps a fixed shape
   across screens, so what you set shows identically everywhere).
   Only the hero is forced to fill-and-center on phones, because its
   mobile shape (tall) differs from desktop; set a mobile crop on the
   hero if you want to control that. A per-slot mobile crop, when set,
   still overrides everything below via the exported rules.
   ============================================================ */
@media (max-width: 600px) {
  .hero__media img,
  .hero__media video {
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* Touch: Portfolio menu opens on tap (toggled by script.js) */
@media (hover: none) {
  .nav__dd--open .nav__menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    left: auto;
    right: 0;
  }
}

/* ============================================================
   Mobile crop modal (Builder Mode only)
   ============================================================ */
.mcrop-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 11, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mcrop-panel {
  background: var(--bg);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 92vw;
}
.mcrop-title {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
}
.mcrop-stage { display: flex; justify-content: center; }
.mcrop-frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15), 0 0 0 6px rgba(0,0,0,0.06);
  touch-action: none;
}
.mcrop-tools { display: flex; gap: 8px; }
.mcrop-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid rgba(26,26,28,0.2);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  min-width: 44px;
}
.mcrop-btn:hover { border-color: var(--ink); }
.mcrop-actions { display: flex; gap: 10px; margin-top: 2px; }
.mcrop-cancel, .mcrop-save {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}
.mcrop-cancel { background: transparent; border-color: rgba(26,26,28,0.2); color: var(--ink); }
.mcrop-cancel:hover { border-color: var(--ink); }
.mcrop-save { background: var(--ink); color: var(--bg); border: none; }
.mcrop-save:hover { background: var(--accent); }