/* Editors Note — self-hosted */
@font-face{ font-family:"Editors Note"; src:url("assets/fonts/EditorsNote-Thin.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"Editors Note"; src:url("assets/fonts/EditorsNote-ThinItalic.otf") format("opentype"); font-weight:200; font-style:italic; font-display:swap; }
@font-face{ font-family:"Editors Note"; src:url("assets/fonts/EditorsNote-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Editors Note"; src:url("assets/fonts/EditorsNote-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"Editors Note"; src:url("assets/fonts/EditorsNote-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Editors Note"; src:url("assets/fonts/EditorsNote-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
/* ============================================================
   Soul on Grey — Project / Wedding Story page
   Dark, cinematic. Inherits type + palette from the site so it
   reads as one continuous editorial. Page-local code = .pr-*
   ============================================================ */

:root{
  /* dark "charcoal" theme is the default for this page */
  --bg:        #1a1714;
  --bg-2:      #221d18;
  --bg-3:      #2a2520;
  --ink:       #f0ebe3;
  --ink-soft:  #d8d2c8;
  --accent:    #c4b5a5;
  --muted:     #8a8278;
  --highlight: #d4b8a8;
  --rule:      rgba(240,235,227,0.12);

  --serif:  "Editors Note", "Cormorant Garamond", "Times New Roman", serif;
  --script: "Editors Note", "Cormorant Garamond", "Times New Roman", serif;
  --sans:   "Comfortaa", system-ui, -apple-system, sans-serif;

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --gap: 16px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .6s ease, color .6s ease;
}
img{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* shared bits */
.eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.rule{ height:1px; background: var(--rule); border:0; margin:0; }

/* serif/italic weight normalization — always render Editors Note Thin */
.serif, .pr-hero__names, .pr-hero__names .amp, .pr-detail__val,
.pr-lead, .pr-cap__big, .pr-nav__name, .pr-cta h2, .pr-cta h2 .em,
.footer__logo, .footer__logo .grey, .pr-section__title, .pr-section__title .em{
  font-weight: 100;
}

/* film grain — scoped to hero */
.grain{
  position: absolute; inset: -25%;
  width: 150%; height: 150%;
  pointer-events: none; z-index: 3;
  opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.92  0 0 0 0 0.89  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-5%,-3%)} 20%{transform:translate(-8%,2%)}
  30%{transform:translate(3%,-7%)} 40%{transform:translate(-2%,5%)} 50%{transform:translate(7%,-4%)}
  60%{transform:translate(-6%,3%)} 70%{transform:translate(4%,7%)} 80%{transform:translate(-3%,-2%)}
  90%{transform:translate(5%,4%)} 100%{transform:translate(0,0)}
}

/* ---------- NAV (dark, adapts to theme) ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
  color: var(--ink);
}
.nav.is-scrolled{
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding: 14px var(--gutter);
  border-bottom-color: var(--rule);
}
.nav__brand{ display:flex; align-items:center; gap:16px; }
.nav__brand__word{
  font-family: var(--serif);
  font-weight: 100; font-style: italic;
  font-size: clamp(26px, 2.1vw, 34px);
  letter-spacing: -0.01em; line-height: 1;
  color: currentColor; transform: translateY(1px);
}
.nav__brand__word .grey{ color: var(--accent); }
.nav__brand__logo{
  display:block; height:64px; width: calc(64px * 4 / 5);
  background-color: currentColor;
  -webkit-mask: url("assets/sog-watermark.png") center / contain no-repeat;
          mask: url("assets/sog-watermark.png") center / contain no-repeat;
  transition: height 500ms ease, width 500ms ease;
}
.nav.is-scrolled .nav__brand__logo{ height:52px; width: calc(52px * 4 / 5); }
.nav__links{
  display:flex; gap:28px;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color: var(--ink-soft);
}
.nav__links a{ position:relative; padding-bottom:4px; white-space:nowrap; transition: color .35s ease; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--accent); transform: scaleX(0); transform-origin:left; transition: transform .4s ease;
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform: scaleX(1); }
.nav__links a.is-active{ color: var(--ink); }
.nav__cta{
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  border:1px solid var(--rule); padding:10px 18px; color: var(--ink);
  transition: border-color .4s ease, color .4s ease;
}
.nav__cta:hover{ border-color: var(--accent); color: var(--highlight); }
@media (max-width:980px){ .nav__links{ display:none; } }

/* ---------- HERO ---------- */
.pr-hero{
  position: relative;
  height: 100vh; min-height: 660px; width: 100%;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.pr-hero__img{ position:absolute; inset:0; width:100%; height:100%; background:#14110f; }
.pr-hero__video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  display:none; pointer-events:none; background:#14110f;
}
.pr-hero.has-video .pr-hero__video{ display:block; }
/* hide poster slot interactions when a video is playing */
.pr-hero.has-video image-slot{ pointer-events:none; }
/* media control pill (add / remove hero video) */
.pr-hero__media{
  position:absolute; right: var(--gutter); bottom: 26px; z-index:6;
  display:flex; align-items:center; gap:10px;
  pointer-events:auto;
}
.pr-hero__media button{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--sans); font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:#f0ebe3; background: rgba(0,0,0,0.34);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(240,235,227,0.28); border-radius:999px;
  padding:11px 18px; cursor:pointer;
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.pr-hero__media button:hover{ border-color: var(--accent); color: var(--highlight); }
.pr-hero__media button .ico{
  width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center;
}
.pr-hero__media button .ico svg{ width:14px; height:14px; display:block; }
.pr-hero__media .pr-hero__remove{ display:none; }
.pr-hero.has-video .pr-hero__media .pr-hero__add{ display:none; }
.pr-hero.has-video .pr-hero__media .pr-hero__remove{ display:inline-flex; }
/* dragging a video file over the hero */
.pr-hero.drag-over::before{
  content:""; position:absolute; inset:14px; z-index:5; pointer-events:none;
  border:1px dashed var(--accent); border-radius:4px;
  background: rgba(20,17,15,0.35);
}
@media (max-width:820px){ .pr-hero__media{ right: 24px; bottom: 20px; } }
.pr-hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,17,15,0.55) 0%, rgba(20,17,15,0.12) 32%, rgba(20,17,15,0.55) 72%, rgba(20,17,15,0.96) 100%),
    radial-gradient(120% 80% at 50% 28%, transparent 0%, rgba(20,17,15,0.5) 100%);
}
.pr-hero__inner{
  position: relative; z-index: 4; width:100%;
  max-width: var(--maxw); margin:0 auto;
  padding: 0 var(--gutter) clamp(56px, 8vh, 104px);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 60px;
  pointer-events: none;
}
.pr-hero__inner a, .pr-hero__inner button{ pointer-events:auto; }
.pr-hero image-slot{ pointer-events:auto; z-index:1; }
.pr-hero__eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom: 30px; }
.pr-hero__eyebrow .line{ display:inline-block; width:48px; height:1px; background: var(--accent); }
.pr-hero__eyebrow span{ font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color: var(--accent); }
.pr-hero__names{
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.94; letter-spacing: -0.015em;
  margin: 0; color: var(--ink);
}
.pr-hero__names .amp{ font-style: italic; color: var(--highlight); padding: 0 0.06em; }
.pr-hero__sub{
  margin-top: 24px;
  font-family: var(--script); font-style: italic;
  font-size: clamp(24px, 3.2vw, 40px);
  color: var(--accent); line-height: 1.05;
}
.pr-hero__meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  color: var(--ink-soft); font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
  text-align:right; padding-bottom: 6px;
}
.pr-hero__meta .place{
  font-family: var(--serif); font-style:italic; font-weight:100;
  text-transform:none; letter-spacing:0; font-size: 24px; color: var(--accent);
}
.pr-hero__scroll{
  position:absolute; left: var(--gutter); bottom: 26px; z-index:4;
  font-size:10px; letter-spacing:0.4em; text-transform:uppercase; color: var(--muted);
  display:flex; align-items:center; gap:12px;
}
.pr-hero__scroll .l{ width:1px; height:38px; background: var(--accent); position:relative; overflow:hidden; }
.pr-hero__scroll .l::after{
  content:""; position:absolute; left:0; right:0; top:-38px; height:38px;
  background: var(--bg); animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{transform:translateY(0)} 100%{transform:translateY(76px)} }
@media (max-width:820px){
  .pr-hero__inner{ grid-template-columns: 1fr; }
  .pr-hero__meta{ display:none; }
  .pr-hero__scroll{ display:none; }
}

/* ---------- DETAILS strip ---------- */
.pr-details{ padding: clamp(64px,10vh,120px) 0 clamp(44px,7vh,80px); }
.pr-lead{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.3; letter-spacing: -0.005em;
  color: var(--ink); max-width: 26ch; margin: 0 0 clamp(48px,7vh,90px);
}
.pr-lead .em{ color: var(--highlight); }
.pr-detail-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.pr-detail{
  padding: 36px 32px 30px 32px; border-right: 1px solid var(--rule);
}
.pr-detail:first-child{ padding-left: 0; }
.pr-detail:last-child{ border-right: 0; padding-right: 0; }
.pr-detail__key{
  font-size:10px; letter-spacing:0.36em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.pr-detail__val{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; color: var(--ink);
}
.pr-detail__val .sub{
  display:block; font-family: var(--sans); font-style:normal;
  font-size:12px; letter-spacing:0.04em; color: var(--ink-soft); margin-top:8px; line-height:1.5;
}
@media (max-width:820px){
  .pr-detail-grid{ grid-template-columns: 1fr 1fr; }
  .pr-detail{ padding: 28px 20px 24px 20px; }
  .pr-detail:nth-child(2n+1){ padding-left: 0; }
  .pr-detail:nth-child(2n){ border-right:0; padding-right:0; }
  .pr-detail:nth-child(-n+2){ border-bottom:1px solid var(--rule); }
}
@media (max-width:520px){
  .pr-detail-grid{ grid-template-columns: 1fr; }
  .pr-detail{ border-right:0; padding: 24px 0; border-bottom:1px solid var(--rule); }
  .pr-detail:first-child{ padding-left: 0; }
  .pr-detail:last-child{ border-bottom:0; }
}

/* ---------- GALLERY ---------- */
.pr-gallery{ padding: clamp(40px,6vh,80px) 0 clamp(90px,14vh,170px); }
.pr-gallery__head{
  display:flex; align-items: baseline; justify-content: space-between;
  gap: 32px; margin-bottom: clamp(36px,5vh,64px);
}
.pr-section__title{
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.01em; margin: 8px 0 0;
}
.pr-section__title .em{ font-style: italic; color: var(--highlight); }
.pr-gallery__head .count{
  font-family: var(--serif); font-style: italic; font-weight:100;
  font-size: 18px; color: var(--accent); white-space: nowrap;
}

.pr-grid{ display: grid; gap: calc(var(--gap) * 2.4) var(--gap); align-items: start; }

/* cell */
.pr-cell{ position: relative; display:block; }
.pr-frame{
  position: relative; overflow: hidden; background: var(--bg-3);
  aspect-ratio: 4 / 5;
}
.pr-frame image-slot{ display:block; width:100%; height:100%; }
.pr-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 70px rgba(0,0,0,0.28);
}
.pr-frame image-slot, .pr-frame img, .pr-frame video{
  transition: transform 1.3s cubic-bezier(.2,.7,.2,1), filter .9s ease;
}
/* per-frame video layer */
.pr-frame__video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  display:none; background:#14110f;
}
.pr-frame.has-video .pr-frame__video{ display:block; }
.pr-frame.has-video image-slot{ pointer-events:none; opacity:0; }
/* small media affordance — add / remove video on a frame */
.pr-frame__media{
  position:absolute; right:10px; bottom:10px; z-index:4;
  display:flex; gap:7px; opacity:0; transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.pr-cell:hover .pr-frame__media,
.pr-frame.has-video .pr-frame__media{ opacity:1; transform:none; }
.pr-frame__media button{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--sans); font-size:9px; letter-spacing:0.22em; text-transform:uppercase;
  color:#f0ebe3; background: rgba(0,0,0,0.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(240,235,227,0.26); border-radius:999px;
  padding:7px 11px; cursor:pointer; line-height:1;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.pr-frame__media button:hover{ border-color: var(--accent); color: var(--highlight); background: rgba(0,0,0,0.6); }
.pr-frame__media button svg{ width:12px; height:12px; display:block; }
.pr-frame__media .pr-frame__rm{ display:none; }
.pr-frame.has-video .pr-frame__media .pr-frame__addv{ display:none; }
.pr-frame.has-video .pr-frame__media .pr-frame__rm{ display:inline-flex; }
.pr-frame.drag-over::before{
  content:""; position:absolute; inset:8px; z-index:5; pointer-events:none;
  border:1px dashed var(--accent); border-radius:3px; background: rgba(20,17,15,0.35);
}
/* hover modes */
[data-hover="zoom"] .pr-cell:hover .pr-frame image-slot,
[data-hover="zoom"] .pr-cell:hover .pr-frame img,
[data-hover="zoom"] .pr-cell:hover .pr-frame .pr-frame__video{ transform: scale(1.05); }
[data-hover="desaturate"] .pr-frame image-slot,
[data-hover="desaturate"] .pr-frame img,
[data-hover="desaturate"] .pr-frame .pr-frame__video{ filter: grayscale(0.9) brightness(0.9); }
[data-hover="desaturate"] .pr-cell:hover .pr-frame image-slot,
[data-hover="desaturate"] .pr-cell:hover .pr-frame img,
[data-hover="desaturate"] .pr-cell:hover .pr-frame .pr-frame__video{ filter: grayscale(0) brightness(1); }

/* caption under cell */
.pr-cap{
  margin-top: 16px; display:flex; align-items:baseline; gap: 14px;
  font-family: var(--sans); font-size: 11px; letter-spacing:0.04em; color: var(--ink-soft);
}
.pr-cap__num{ font-family: var(--serif); font-style:italic; font-weight:100; font-size:16px; color: var(--accent); }
.pr-cap__txt{ font-family: var(--script); font-style: italic; font-size: clamp(15px,1.1vw,18px); color: var(--ink-soft); letter-spacing:-0.005em; }

/* reel cell */
.pr-cell--reel .pr-frame{ aspect-ratio: 9 / 16; background:#14110f; }
.pr-cell--reel .pr-badge{
  position:absolute; top:14px; right:14px; z-index:3;
  font-family: var(--sans); font-size:9.5px; letter-spacing:0.3em; text-transform:uppercase;
  color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.34);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding:7px 11px; display:inline-flex; align-items:center; gap:8px; pointer-events:none;
}
.pr-cell--reel .pr-badge .dot{ width:5px; height:5px; border-radius:50%; background:#ff6b6b; box-shadow:0 0 8px rgba(255,107,107,0.6); }
.pr-cell--reel .pr-play{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); z-index:3;
  width: 64px; height: 64px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.18); backdrop-filter: blur(2px);
  pointer-events:none; transition: transform .5s cubic-bezier(.2,.7,.2,1), background .4s ease;
}
.pr-cell--reel:hover .pr-play{ transform: translate(-50%,-50%) scale(1.08); background: rgba(0,0,0,0.32); }
.pr-cell--reel .pr-frame.has-video .pr-play,
.pr-cell--reel .pr-frame.has-video .pr-badge{ display:none; }
.pr-cell--reel .pr-play::after{
  content:""; margin-left:4px;
  border-left: 14px solid rgba(255,255,255,0.92);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}

/* wide cell caption overlay */
.pr-cell--wide .pr-cap{
  position:absolute; left:24px; right:24px; bottom:22px; margin-top:0; z-index:3;
  color:#f0ebe3;
}
.pr-cell--wide .pr-cap::before{
  content:""; position:absolute; inset:-50px -24px -22px -24px; z-index:-1;
  background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
}
.pr-cell--wide .pr-cap__txt, .pr-cell--wide .pr-cap__num{ color:#f0ebe3; }

/* ---- LAYOUT: editorial (default) — hand-placed 12-col ---- */
[data-layout="editorial"] .pr-grid{ grid-template-columns: repeat(12, 1fr); }
[data-layout="editorial"] .pr-cell:nth-of-type(1){ grid-column: 1 / span 12; }
[data-layout="editorial"] .pr-cell:nth-of-type(1) .pr-frame{ aspect-ratio: 21 / 9; }
[data-layout="editorial"] .pr-cell:nth-of-type(2){ grid-column: 1 / span 4; }
[data-layout="editorial"] .pr-cell:nth-of-type(2) .pr-frame{ aspect-ratio: 4 / 5; }
[data-layout="editorial"] .pr-cell:nth-of-type(3){ grid-column: 5 / span 4; }
[data-layout="editorial"] .pr-cell:nth-of-type(4){ grid-column: 9 / span 4; margin-top: 56px; }
[data-layout="editorial"] .pr-cell:nth-of-type(4) .pr-frame{ aspect-ratio: 4 / 5; }
[data-layout="editorial"] .pr-cell:nth-of-type(5){ grid-column: 1 / span 7; }
[data-layout="editorial"] .pr-cell:nth-of-type(5) .pr-frame{ aspect-ratio: 3 / 2; }
[data-layout="editorial"] .pr-cell:nth-of-type(6){ grid-column: 8 / span 5; margin-top: 64px; }
[data-layout="editorial"] .pr-cell:nth-of-type(6) .pr-frame{ aspect-ratio: 4 / 5; }
[data-layout="editorial"] .pr-cell:nth-of-type(7){ grid-column: 1 / span 4; }
[data-layout="editorial"] .pr-cell:nth-of-type(8){ grid-column: 5 / span 8; }
[data-layout="editorial"] .pr-cell:nth-of-type(8) .pr-frame{ aspect-ratio: 16 / 9; }
[data-layout="editorial"] .pr-cell:nth-of-type(9){ grid-column: 1 / span 6; }
[data-layout="editorial"] .pr-cell:nth-of-type(9) .pr-frame{ aspect-ratio: 4 / 5; }
[data-layout="editorial"] .pr-cell:nth-of-type(10){ grid-column: 7 / span 6; margin-top: 48px; }
[data-layout="editorial"] .pr-cell:nth-of-type(10) .pr-frame{ aspect-ratio: 4 / 5; }
/* reels keep 9:16 in editorial regardless */
[data-layout="editorial"] .pr-cell--reel .pr-frame{ aspect-ratio: 9 / 16 !important; }

/* ---- LAYOUT: uniform — clean 3-col, all 4:5 ---- */
[data-layout="uniform"] .pr-grid{ grid-template-columns: repeat(3, 1fr); gap: calc(var(--gap)*2) var(--gap); }
[data-layout="uniform"] .pr-cell{ grid-column: auto !important; margin-top: 0 !important; }
[data-layout="uniform"] .pr-frame{ aspect-ratio: 4 / 5 !important; }
[data-layout="uniform"] .pr-cell--wide .pr-cap{ position:absolute; }

/* ---- LAYOUT: cinematic — single full-width column ---- */
[data-layout="cinematic"] .pr-grid{ grid-template-columns: 1fr; gap: clamp(40px,7vh,96px); max-width: 1100px; margin: 0 auto; }
[data-layout="cinematic"] .pr-cell{ grid-column: auto !important; margin-top: 0 !important; }
[data-layout="cinematic"] .pr-frame{ aspect-ratio: 16 / 10 !important; }
[data-layout="cinematic"] .pr-cell--reel{ max-width: 460px; margin-left:auto; margin-right:auto; }
[data-layout="cinematic"] .pr-cell--reel .pr-frame{ aspect-ratio: 9 / 16 !important; }
[data-layout="cinematic"] .pr-cap{ justify-content:center; }

@media (max-width: 820px){
  [data-layout="editorial"] .pr-grid,
  [data-layout="uniform"] .pr-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 32px 14px; }
  [data-layout="editorial"] .pr-cell{ grid-column: span 1 !important; margin-top: 0 !important; }
  [data-layout="editorial"] .pr-cell:nth-of-type(1){ grid-column: 1 / -1 !important; }
  [data-layout="editorial"] .pr-cell:nth-of-type(1) .pr-frame{ aspect-ratio: 16/9 !important; }
  [data-layout="editorial"] .pr-cell .pr-frame{ aspect-ratio: 4/5 !important; }
  [data-layout="editorial"] .pr-cell--reel .pr-frame{ aspect-ratio: 9/16 !important; }
}
@media (max-width: 520px){
  [data-layout="editorial"] .pr-grid,
  [data-layout="uniform"] .pr-grid{ grid-template-columns: 1fr !important; gap: 40px; }
  [data-layout="editorial"] .pr-cell:nth-of-type(1) .pr-frame{ aspect-ratio: 4/5 !important; }
}

/* ---------- PREV / NEXT project nav ---------- */
.pr-nav{ border-top: 1px solid var(--rule); }
.pr-nav__grid{ display:grid; grid-template-columns: 1fr 1fr; }
.pr-nav__item{
  position: relative; display:flex; flex-direction:column; gap: 14px;
  padding: clamp(48px,8vh,96px) var(--gutter);
  min-height: 320px; justify-content:center; overflow:hidden;
}
.pr-nav__item--prev{ border-right: 1px solid var(--rule); align-items:flex-start; text-align:left; }
.pr-nav__item--next{ align-items:flex-end; text-align:right; }
.pr-nav__bg{ position:absolute; inset:0; z-index:0; opacity: 0.28; transition: opacity .6s ease, transform 1.3s cubic-bezier(.2,.7,.2,1); }
.pr-nav__bg image-slot{ width:100%; height:100%; display:block; }
.pr-nav__item:hover .pr-nav__bg{ opacity: 0.42; transform: scale(1.04); }
.pr-nav__item::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent), color-mix(in srgb, var(--bg) 80%, transparent)); }
.pr-nav__item > *{ position:relative; z-index:2; }
.pr-nav__dir{ font-size:10px; letter-spacing:0.4em; text-transform:uppercase; color: var(--muted); }
.pr-nav__name{
  font-family: var(--serif); font-size: clamp(30px, 4vw, 56px); line-height:1.04; letter-spacing:-0.01em; color: var(--ink);
  transition: color .4s ease;
}
.pr-nav__name .amp{ font-style:italic; color: var(--highlight); }
.pr-nav__item:hover .pr-nav__name{ color: var(--highlight); }
.pr-nav__tag{ font-family: var(--script); font-style:italic; font-size: clamp(16px,1.3vw,20px); color: var(--accent); }
@media (max-width: 720px){
  .pr-nav__grid{ grid-template-columns: 1fr; }
  .pr-nav__item--prev{ border-right:0; border-bottom: 1px solid var(--rule); }
  .pr-nav__item{ min-height: 220px; }
}

/* ---------- CTA ---------- */
.pr-cta{
  text-align:center; position:relative; overflow:hidden;
  padding: clamp(100px,16vh,200px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.pr-cta__watermark{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: min(680px, 88vw); height:auto; opacity: 0.10; object-fit:contain; pointer-events:none;
  filter: brightness(0) invert(1); z-index:0;
}
.pr-cta > *:not(.pr-cta__watermark){ position:relative; z-index:1; }
.pr-cta .eyebrow{ display:inline-block; margin-bottom: 22px; }
.pr-cta h2{
  font-family: var(--serif); font-size: clamp(38px, 6vw, 88px);
  line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 36px;
}
.pr-cta h2 .em{ font-style: italic; color: var(--highlight); }
.pr-cta__btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family: var(--sans); font-size:12px; letter-spacing:0.36em; text-transform:uppercase;
  border: 1px solid var(--accent); padding: 18px 34px;
  transition: background .4s ease, color .4s ease;
}
.pr-cta__btn:hover{ background: var(--accent); color: var(--bg); }

/* ---------- FOOTER (mirrors site) ---------- */
.footer{ background:#14110f; color:#f0ebe3; padding: 80px var(--gutter) 36px; border-top:1px solid rgba(240,235,227,0.08); }
.footer__inner{ max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:60px; align-items:start; }
.footer__brand{ display:flex; flex-direction:column; gap:22px; }
.footer__logo{ font-family: var(--serif); font-style:italic; font-size:32px; color:#f0ebe3; line-height:1; }
.footer__logo .grey{ color:#c4b5a5; font-style:italic; }
.footer__tag{ font-family: var(--serif); font-style:italic; font-size:20px; color:#c4b5a5; }
.footer__about{ font-size:13px; line-height:1.7; color:#d8d2c8; margin:0; max-width:38ch; }
.footer__social{ display:flex; gap:14px; margin-top:6px; }
.footer__social a{ width:36px; height:36px; border:1px solid rgba(240,235,227,0.18); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#d8d2c8; transition: border-color .35s ease, color .35s ease; }
.footer__social a:hover{ border-color:#c4b5a5; color:#f0ebe3; }
.footer__social svg{ width:14px; height:14px; }
.footer__col h4{ font-family: var(--sans); font-size:11px; letter-spacing:0.36em; text-transform:uppercase; color:#c4b5a5; margin:0 0 22px; font-weight:400; }
.footer__col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.footer__col a{ color:#d8d2c8; font-size:14px; }
.footer__col a:hover{ color:#f0ebe3; }
.footer__col .small{ color:#8a8278; font-size:12px; line-height:1.6; }
.footer__bottom{ max-width: var(--maxw); margin: 64px auto 0; padding-top:24px; border-top:1px solid rgba(240,235,227,0.08); display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:#8a8278; }
.footer__bottom .right{ display:flex; gap:28px; }
@media (max-width:820px){ .footer__inner{ grid-template-columns: 1fr 1fr; gap:40px; } .footer__brand{ grid-column:1 / -1; } .footer__bottom{ flex-direction:column; gap:16px; text-align:center; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delay,0ms); will-change: opacity, transform; }
.reveal.is-in{ opacity:1; transform: translateY(0); }
.reveal--img{ transform: translateY(36px) scale(1.02); }
.reveal--img.is-in{ transform: translateY(0) scale(1); }
.pr-hero .reveal{ transform: translateY(40px); transition-duration: 1.4s; }
body.no-reveal .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

::selection{ background: var(--highlight); color: var(--bg); }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--accent); border-radius:4px; }

/* ============================================================
   Tweaks panel (vanilla — dark card to match this page)
   ============================================================ */
.pr-tweaks{
  position: fixed; right:24px; bottom:24px; width: 300px;
  max-height: calc(100vh - 48px); overflow-y:auto;
  background:#1f1a16; color:#f0ebe3;
  border:1px solid rgba(240,235,227,0.14); border-radius:12px;
  box-shadow: 0 18px 60px -20px rgba(0,0,0,0.6);
  font-family:"Comfortaa", system-ui, sans-serif; z-index:9999;
  padding: 18px 18px 16px; display:none;
}
.pr-tweaks.is-open{ display:block; }
.pr-tweaks__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.pr-tweaks h4{ margin:0; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:#c4b5a5; font-weight:500; }
.pr-tweaks .x{ background:none; border:0; cursor:pointer; color:#d8d2c8; font-size:16px; line-height:1; padding:4px; }
.pr-tweaks .section-title{ font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:#8a8278; margin:18px 0 10px; font-weight:500; }
.pr-tweaks .seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid rgba(240,235,227,0.16); border-radius:6px; overflow:hidden; }
.pr-tweaks .seg button{ padding:8px 4px; font-family:inherit; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#d8d2c8; background:transparent; border:0; border-right:1px solid rgba(240,235,227,0.1); cursor:pointer; transition: background .25s ease, color .25s ease; }
.pr-tweaks .seg button:last-child{ border-right:0; }
.pr-tweaks .seg button.is-on{ background:#c4b5a5; color:#1a1714; }
.pr-tweaks .seg button:hover:not(.is-on){ background: rgba(240,235,227,0.06); }
.pr-tweaks .swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.pr-tweaks .swatch{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(240,235,227,0.2); position:relative; cursor:pointer; padding:0; transition: transform .25s ease; }
.pr-tweaks .swatch:hover{ transform: scale(1.08); }
.pr-tweaks .swatch.is-on::after{ content:""; position:absolute; inset:-4px; border:1px solid #c4b5a5; border-radius:50%; }
.pr-tweaks .slider-row{ display:flex; flex-direction:column; gap:8px; }
.pr-tweaks .slider-row .label-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:#d8d2c8; }
.pr-tweaks .slider-row .val{ font-variant-numeric: tabular-nums; color:#f0ebe3; font-weight:500; font-size:11px; }
.pr-tweaks .slider-row input[type=range]{ width:100%; accent-color:#c4b5a5; margin:0; }

/* === SHARED MOBILE NAV CSS === */
.nav__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; position:relative; z-index:1010; cursor:pointer; color:currentColor; background:transparent; border:0; margin:-10px; padding:0; }
.nav__burger .b{ display:block; width:22px; height:1px; background:currentColor; position:relative; transition: transform .35s ease, opacity .25s ease, top .35s ease; }
.nav__burger .b::before, .nav__burger .b::after{ content:""; position:absolute; left:0; width:22px; height:1px; background:currentColor; transition: transform .35s ease, top .35s ease, opacity .25s ease; }
.nav__burger .b::before{ top:-7px; }
.nav__burger .b::after{ top:7px; }
body.is-menu-open .nav__burger .b{ background:transparent; }
body.is-menu-open .nav__burger .b::before{ top:0; transform: rotate(45deg); }
body.is-menu-open .nav__burger .b::after{ top:0; transform: rotate(-45deg); }
.nav__overlay{ position:fixed; inset:0; z-index:1000; background:#1a1714; color:#f0ebe3; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; padding:96px 28px 40px; opacity:0; visibility:hidden; transform:translateY(-8px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1), visibility .55s; overflow-y:auto; }
body.is-menu-open .nav__overlay{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__overlay__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(8px,2vh,18px); flex:1; justify-content:center; }
.nav__overlay__links li{ opacity:0; transform:translateY(14px); transition: opacity .6s ease, transform .6s ease; }
body.is-menu-open .nav__overlay__links li{ opacity:1; transform:translateY(0); }
body.is-menu-open .nav__overlay__links li:nth-child(1){ transition-delay:120ms; }
body.is-menu-open .nav__overlay__links li:nth-child(2){ transition-delay:200ms; }
body.is-menu-open .nav__overlay__links li:nth-child(3){ transition-delay:280ms; }
body.is-menu-open .nav__overlay__links li:nth-child(4){ transition-delay:360ms; }
.nav__overlay__links a{ display:inline-block; font-family:var(--serif); font-weight:100; font-style:italic; font-size:clamp(48px,12vw,88px); line-height:1.04; letter-spacing:-0.015em; color:#f0ebe3; text-decoration:none; transition: color .3s ease; }
.nav__overlay__links a:hover, .nav__overlay__links a.is-active{ color:#c4b5a5; }
.nav__overlay__foot{ display:flex; flex-direction:column; gap:12px; padding-top:24px; border-top:1px solid rgba(240,235,227,0.14); opacity:0; transition: opacity .6s ease; transition-delay:480ms; }
body.is-menu-open .nav__overlay__foot{ opacity:1; }
.nav__overlay__foot a{ font-family:var(--sans); font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:#c4b5a5; }
.nav__overlay__foot small{ font-size:10px; letter-spacing:0.36em; text-transform:uppercase; color:#8a8278; }
body.is-menu-open{ overflow:hidden; }
@media (max-width:820px){
  .nav__burger{ display:inline-flex; }
  .nav__cta{ display:none; }
  .nav__links{ display:none !important; }
  .nav__brand__logo{ height:48px !important; width: calc(48px*4/5) !important; }
  .nav__brand__word{ font-size:22px !important; }
  .nav{ padding-top:16px !important; padding-bottom:16px !important; }
}

/* === MOBILE FINISHING === */
@media (max-width: 720px){
  .pr-hero__names{ font-size: clamp(52px, 16vw, 88px) !important; }
  .pr-hero__sub{ font-size: 20px !important; }
  .pr-hero__inner{ padding: 0 24px 56px !important; }
  .pr-details{ padding-left:24px; padding-right:24px; }
  .pr-gallery{ padding-left:24px; padding-right:24px; }
  .pr-tweaks{ right:12px !important; bottom:12px !important; left:12px !important; width:auto !important; max-height:70vh !important; }
  .footer{ padding:56px 24px 28px; }
  .footer__inner{ grid-template-columns:1fr !important; gap:40px; }
  .footer__brand{ grid-column:1 !important; }
  .footer__bottom{ flex-direction:column !important; gap:12px !important; text-align:center !important; }
}