/* ============================================================
   MADDIE BEE - site styles (multi-page)
   Built on tokens.css. Editorial: paper / ink / hot pink.
   ============================================================ */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; }
body{ margin: 0; background: var(--bg); color: var(--fg-1); }
img{ max-width: 100%; }
::selection{ background: var(--accent); color: var(--accent-ink); }

/* ---------------- LAYOUT HELPERS ---------------- */
.wrap{ width: 100%; padding-inline: clamp(20px, 4vw, 56px); }
.rule-ink{ border: 0; border-top: 1px solid var(--mb-ink); margin: 0; }
.fill{ flex: 1; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------------- HEADER ---------------- */
.hd{
  position: sticky; top: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 14px clamp(20px,4vw,56px);
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mb-ink);
}
.hd__brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; justify-self: start; }
.hd__brand img{ height: 30px; display: block; }
.hd__brand b{ font-family: var(--font-script); font-weight: 400; font-size: 30px; color: var(--mb-ink); line-height: 1; }
.hd__nav{ display: flex; gap: clamp(16px,2.4vw,34px); justify-self: end; }
.hd__link{
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--fg-1); text-decoration: none; padding: 6px 0; position: relative; white-space: nowrap;
}
.hd__link::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1.5px; background: var(--mb-pink-hot); transition: right .2s cubic-bezier(.2,.7,.2,1); }
.hd__link:hover, .hd__link.is-active{ color: var(--mb-pink-hot); }
.hd__link:hover::after, .hd__link.is-active::after{ right: 0; }
.hd__cta{ justify-self: end; }
.hd__menu{ display:none; }

/* ---------------- BUTTONS ---------------- */
.btn{
  height: 44px; padding: 0 22px; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn--primary{ background: var(--mb-ink); color: var(--mb-paper); }
.btn--primary:hover{ background: var(--mb-pink); color: var(--mb-ink); box-shadow: var(--shadow-pink); }
.btn--primary:active{ transform: scale(.98); }
.btn--outline{ background: transparent; color: var(--mb-ink); border: 1px solid var(--mb-ink); }
.btn--outline:hover{ background: var(--mb-ink); color: var(--mb-paper); }
.btn--ghost-light{ background: transparent; color: var(--mb-paper); border: 1px solid rgba(255,255,255,.5); }
.btn--ghost-light:hover{ background: var(--mb-paper); color: var(--mb-ink); }

/* ---------------- TYPE HELPERS ---------------- */
.eyebrow{ font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--fg-2); }
.tagm{ font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.script{ font-family: var(--font-script); color: var(--mb-pink); font-style: italic; line-height: .9; }
.display{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; }
.mono{ font-family: var(--font-mono); }

/* ---------------- MARQUEE ---------------- */
.marq{ overflow: hidden; background: var(--mb-ink); color: var(--mb-paper); border-block: 1px solid var(--mb-ink); }
.marq--pink{ background: var(--mb-pink); color: var(--mb-ink); border-color: var(--mb-ink); }
.marq__track{ display: flex; gap: 56px; white-space: nowrap; padding: 13px 0; width: max-content; animation: marq 42s linear infinite; }
.marq__track span{ display: inline-flex; align-items: center; gap: 56px; font-family: var(--font-display); font-size: 26px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; }
.marq__dot{ color: var(--mb-pink); }
.marq--pink .marq__dot{ color: var(--mb-ink); }
.marq__bee{ height: 28px; width: auto; flex: 0 0 auto; align-self: center; }
.marq .marq__bee{ filter: invert(1); }      /* white bee on ink banner */
.marq--pink .marq__bee{ filter: none; }      /* black bee on pink banner */
.marq__star{ flex: 0 0 auto; align-self: center; font-size: 22px; line-height: 1; color: var(--mb-pink); }
.marq--pink .marq__star{ color: var(--mb-ink); }
@keyframes marq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marq__track{ animation: none; } }

/* ---------------- FOOTER ---------------- */
.ft{ background: var(--mb-ink); color: var(--mb-paper); padding: clamp(48px,7vw,80px) clamp(20px,4vw,56px) 26px; }
.ft__top{ display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(32px,5vw,72px); align-items: start; }
.ft__mark{ display: flex; flex-direction: column; gap: 18px; }
.ft__mark img{ width: 84px; height: auto; filter: invert(1); }
.ft__mark .script{ color: var(--mb-pink); font-size: 56px; }
.ft__cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ft__col h4{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mb-fog); margin: 0 0 14px; font-weight: 700; }
.ft__col a, .ft__col p{ display: block; color: var(--mb-paper); text-decoration: none; font-size: 14px; margin: 0 0 9px; line-height: 1.4; }
.ft__col a{ width: max-content; }
.ft__col a:hover{ color: var(--mb-pink); }
.ft__rule{ height: 1px; background: var(--hairline-paper); margin: clamp(32px,5vw,56px) 0 18px; }
.ft__bottom{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ft__barcode{ display: flex; gap: 2px; align-items: flex-end; height: 46px; }
.ft__barcode i{ display: block; width: 2px; background: var(--mb-paper); height: 100%; }
.ft__legal{ font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-fog); }

/* ---------------- SECTION HEADER ---------------- */
.sec-head{ display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: end; padding: clamp(48px,7vw,88px) clamp(20px,4vw,56px) 22px; border-bottom: 1px solid var(--mb-ink); }
.sec-head__num{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; align-self: start; padding-top: 8px; color: var(--fg-3); }
.sec-head__title{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .88; font-size: clamp(40px, 8vw, 120px); margin: 0; }

/* ---------------- FLOATING ASTERISK ---------------- */
.aster{ position: fixed; right: 28px; bottom: 24px; z-index: 60; color: var(--mb-pink); font-size: 64px; line-height: 1; font-weight: 700; pointer-events: none; mix-blend-mode: multiply; user-select: none; }

/* ---------------- ENTRANCE ---------------- */
.rise{ opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.rise.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; } }

/* ---------------- LIGHTBOX ---------------- */
.lb{ position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; opacity: 0; transition: opacity .3s ease; }
.lb.in{ opacity: 1; }
.lb__scrim{ position: absolute; inset: 0; background: rgba(10,10,10,.55); backdrop-filter: blur(2px); }
.lb__panel{ position: relative; width: min(680px, 100%); height: 100%; background: var(--mb-paper); overflow-y: auto; box-shadow: -20px 0 60px -20px rgba(10,10,10,.5); transform: translateX(24px); transition: transform .32s cubic-bezier(.2,.7,.2,1); padding: 26px clamp(20px,3vw,40px) 60px; }
.lb.in .lb__panel{ transform: none; }
.lb__close{ background: none; border: 0; cursor: pointer; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 8px 0; margin-bottom: 18px; }
.lb__close:hover{ color: var(--mb-pink-hot); }
.lb__cat{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--fg-3); text-transform: uppercase; margin-bottom: 12px; }
.lb__title{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-size: clamp(40px,7vw,72px); margin: 0; }
.lb__sub{ font-size: clamp(34px,5vw,54px); margin: -2px 0 18px; }
.lb__credits{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding: 18px 0; border-block: 1px solid var(--hairline-soft); margin-bottom: 18px; }
.lb__credits div{ font-size: 14px; }
.lb__credits span{ display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-bottom: 3px; }
.lb__blurb{ font-size: 16px; line-height: 1.55; color: var(--fg-2); max-width: 52ch; margin: 0 0 26px; }
.lb__strip{ display: grid; gap: 8px; }
.lb__strip img{ width: 100%; display: block; background: var(--mb-mist); }

/* ---- full-page project lightbox (default everywhere) ---- */
.lb{ justify-content: stretch; }
.lb__panel{ width: 100%; transform: translateY(24px); padding: 30px clamp(20px,6vw,96px) 96px; box-shadow: none; }
.lb.in .lb__panel{ transform: none; }
.lb__close{ max-width: 1120px; margin: 0 auto 18px; width: 100%; text-align: left; }
.lb__head{ max-width: 1120px; margin: 0 auto; }
.lb__credits{ grid-template-columns: repeat(3,1fr); max-width: 760px; }
.lb__strip{ max-width: 1120px; margin: 22px auto 0; grid-template-columns: repeat(2,1fr); gap: 14px; }
.lb__strip img{ height: 100%; object-fit: cover; }
@media(max-width:720px){
  .lb__strip{ grid-template-columns: 1fr; }
  .lb__credits{ grid-template-columns: 1fr 1fr; }
}

/* ---- discipline nav at the bottom of the project view ---- */
.lb-cats{ max-width: 1120px; margin: 64px auto 0; border-top: 1px solid var(--mb-ink); display: grid; grid-template-columns: repeat(3,1fr); }
.lb-cat{ display: flex; flex-direction: column; gap: 10px; padding: 30px 24px; text-decoration: none; color: var(--mb-ink); border-right: 1px solid var(--hairline-soft); transition: background .18s ease, color .15s ease; }
.lb-cat:first-child{ padding-left: 0; }
.lb-cat:last-child{ border-right: 0; padding-right: 0; }
.lb-cat__n{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--mb-stone); }
.lb-cat__t{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .96; font-size: clamp(19px,1.9vw,30px); }
.lb-cat__go{ font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-stone); margin-top: auto; }
.lb-cat:hover{ color: var(--mb-pink-hot); }
.lb-cat:hover .lb-cat__go{ color: var(--mb-pink-hot); }
.lb-cat.is-current .lb-cat__t{ color: var(--mb-pink-hot); }
@media(max-width:720px){
  .lb-cats{ grid-template-columns: 1fr; }
  .lb-cat,.lb-cat:first-child,.lb-cat:last-child{ padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--hairline-soft); }
  .lb-cat:last-child{ border-bottom: 0; }
}

/* ---------------- TABS ---------------- */
.tabs{ display: flex; gap: 8px; flex-wrap: wrap; padding: 22px clamp(20px,4vw,56px); border-bottom: 1px solid var(--mb-ink); position: sticky; top: 57px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); z-index: 40; }
.tab{ background: transparent; border: 1px solid var(--mb-ink); cursor: pointer; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mb-ink); transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 8px; }
.tab b{ font-family: var(--font-mono); font-weight: 400; opacity: .6; }
.tab.is-on{ background: var(--mb-ink); color: var(--mb-paper); }
.tab.is-on b{ color: var(--mb-pink); opacity: 1; }
.tab:hover:not(.is-on){ background: var(--mb-pink-blush); }

/* ---------------- SCATTER GALLERY (the favorite) ---------------- */
.stage{ position: relative; background:
    radial-gradient(120% 90% at 50% 0%, #FFD7F0 0%, #F9A8DD 32%, #F583D5 60%, #E96BC5 100%);
  overflow: hidden; border-bottom: 1px solid var(--mb-ink); }
.stage__sheen{ position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(60% 40% at 30% 12%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(50% 30% at 80% 88%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); mix-blend-mode: screen; }
.stage__hint{ position: absolute; left: clamp(20px,4vw,56px); bottom: 22px; z-index: 6; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--mb-ink); display: flex; align-items: center; gap: 10px; opacity: .8; }
.stage__hint .ln{ width: 46px; height: 1px; background: var(--mb-ink); display: inline-block; }
.scroller{ position: relative; height: clamp(560px, 78vh, 780px); overflow-x: auto; overflow-y: hidden; cursor: grab; perspective: 1600px; scrollbar-width: none; }
.scroller::-webkit-scrollbar{ display: none; }
.scroller.drag{ cursor: grabbing; }
.track{ position: relative; height: 100%; display: flex; align-items: center; gap: clamp(26px,3.4vw,56px); padding-inline: clamp(40px,12vw,260px); width: max-content; transform-style: preserve-3d; }
.card{ position: relative; flex: 0 0 auto; display: block; background: none; border: 0; padding: 0; cursor: pointer; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.card__frame{ position: relative; display: block; overflow: hidden; background: var(--mb-mist); box-shadow: 0 24px 50px -22px rgba(10,10,10,.5), 0 6px 16px -8px rgba(10,10,10,.35); }
.card__frame img{ display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.18) contrast(1.04); transition: filter .3s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover{ transform: translateZ(60px) translateY(-6px) rotate(0deg) !important; z-index: 5; }
.card:hover .card__frame img{ filter: grayscale(0) contrast(1); transform: scale(1.05); }
.card__tag{ position: absolute; left: 0; bottom: 0; right: 0; padding: 12px 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; color: #fff; background: linear-gradient(to top, rgba(10,10,10,.72), rgba(10,10,10,0)); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.card:hover .card__tag{ opacity: 1; transform: none; }
.card__tag b{ font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.card__tag span{ font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.card__num{ position: absolute; top: 12px; left: 13px; font-family: var(--font-mono); font-size: 11px; color: #fff; mix-blend-mode: difference; letter-spacing: .08em; z-index: 2; }
.card__count{ position: absolute; top: 12px; right: 13px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color:#fff; mix-blend-mode: difference; z-index: 2; }

/* ---------------- EDITORIAL GRID (variation) ---------------- */
.grid-wrap{ padding: clamp(36px,5vw,64px) clamp(20px,4vw,56px) clamp(64px,8vw,110px); }
.egrid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px,1.4vw,20px); }
.gcell{ position: relative; overflow: hidden; background: var(--mb-mist); cursor: pointer; border: 0; padding: 0; display: block; }
.gcell img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .3s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.gcell:hover img{ filter: grayscale(0) contrast(1); transform: scale(1.04); }
.gcell__meta{ position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 14px; color: #fff; background: linear-gradient(to top, rgba(10,10,10,.7), rgba(10,10,10,0)); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.gcell:hover .gcell__meta{ opacity: 1; transform: none; }
.gcell__meta b{ font-size: 15px; font-weight: 700; }
.gcell__meta span{ font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gcell__num{ position: absolute; top: 12px; left: 13px; z-index: 2; font-family: var(--font-mono); font-size: 11px; color: #fff; mix-blend-mode: difference; }
/* asymmetric spans */
.gcell.s-tall{ grid-column: span 4; aspect-ratio: 4/5; }
.gcell.s-wide{ grid-column: span 8; aspect-ratio: 16/10; }
.gcell.s-half{ grid-column: span 6; aspect-ratio: 3/4; }
.gcell.s-third{ grid-column: span 4; aspect-ratio: 3/4; }
.gcell.s-big{ grid-column: span 6; aspect-ratio: 4/5; }
@media (max-width: 760px){
  .gcell.s-tall,.gcell.s-wide,.gcell.s-half,.gcell.s-third,.gcell.s-big{ grid-column: span 12; aspect-ratio: 4/5; }
}

/* ---------------- PLACEHOLDERS + VIDEO ---------------- */
.gcell__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: repeating-linear-gradient(45deg, var(--mb-mist) 0 11px, #E3DFD6 11px 22px); }
.gcell__ph b{ font-size: 26px; line-height:1; color: var(--mb-ink); }
.gcell__ph i{ font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--mb-stone); }
.gcell__play{ position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; border-radius:50%; background: var(--mb-pink); color: var(--mb-ink); display:flex; align-items:center; justify-content:center; font-size:12px; padding-left:2px; box-shadow: var(--shadow-pink); }
.gcell:hover .gcell__play{ background: var(--mb-pink-hot); }

.lb__media{ width:100%; background:#000; }
.lb__media--vid{ position:relative; display:flex; justify-content:center; align-items:center; background:#000; }
.lb__media--vid .lb__ph{ position:absolute; inset:0; }
.lb__media--vid:has(video) .lb__ph{ display:none; }
.lb__media--vid video{ position:relative; z-index:2; width:auto; max-width:100%; margin:0 auto; }
.lb__media video{ display:block; max-height:72vh; background:#000; }
.lb__ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; aspect-ratio:4/5; width:100%; text-align:center;
  background: repeating-linear-gradient(45deg, var(--mb-mist) 0 13px, #E3DFD6 13px 26px); }
.lb__ph-ic{ font-size: 34px; line-height:1; color: var(--mb-pink-hot); }
.lb__ph p{ margin:0; font-weight:700; font-size:15px; letter-spacing:.02em; color: var(--mb-ink); }
.lb__ph-sub{ font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--mb-stone); }

/* ---------------- RESPONSIVE NAV ---------------- */
@media (max-width: 860px){
  .hd{ grid-template-columns: 1fr auto; }
  .hd__nav{ position: fixed; inset: 56px 0 auto 0; background: var(--mb-paper); border-bottom: 1px solid var(--mb-ink); flex-direction: column; align-items: center; gap: 20px; padding: 28px 0; transform: translateY(-120%); transition: transform .25s cubic-bezier(.2,.7,.2,1); justify-self: stretch; }
  .hd.open .hd__nav{ transform: none; }
  .hd__cta{ display: none; }
  .hd__menu{ display: inline-flex; justify-self: end; background: none; border: 0; cursor: pointer; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
  .ft__top{ grid-template-columns: 1fr; }
  .ft__cols{ grid-template-columns: 1fr 1fr; }
}

/* ================ PROJECT DETAIL PAGE ================ */
/* hero */
.pp-hero{ position: relative; height: calc(100vh - 57px); min-height: 560px; overflow: hidden; border-bottom: 1px solid var(--mb-ink); background: var(--mb-ink); }
.pp-hero > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.08); }
.pp-hero__scrim{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.86) 0%, rgba(10,10,10,.08) 44%, rgba(10,10,10,.4) 100%); }
.pp-hero__pink{ position: absolute; inset: 0; background: var(--mb-pink); mix-blend-mode: multiply; opacity: .1; }
.pp-hero--ph{ background: repeating-linear-gradient(45deg, var(--mb-soot) 0 16px, #141414 16px 32px); }
.pp-hero__ph{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(80px,16vw,200px); color: var(--mb-pink); }
.pp-back{ position: absolute; top: 18px; left: clamp(20px,4vw,56px); z-index: 4; color: var(--mb-paper); font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .9; }
.pp-back:hover{ color: var(--mb-pink); }
.pp-hero__top{ position: absolute; top: 18px; left: 0; right: 0; z-index: 3; display: flex; justify-content: flex-end; gap: 16px; padding: 0 clamp(20px,4vw,56px); color: var(--mb-paper); font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.pp-hero__top > span:first-child{ display: none; }
.pp-hero__body{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(24px,4vw,52px); color: var(--mb-paper); }
.pp-hero__script{ font-family: var(--font-script); font-style: italic; color: var(--mb-pink); font-size: clamp(34px,5.5vw,84px); line-height: .82; display: block; margin-bottom: -.02em; }
.pp-hero__name{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; line-height: .82; font-size: clamp(48px,11vw,168px); margin: 0; }

/* intro: description + credits */
.pp-intro{ display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px,5vw,80px); padding: clamp(44px,7vw,104px) clamp(20px,4vw,56px); border-bottom: 1px solid var(--mb-ink); }
.pp-intro__ey{ font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); margin-bottom: 22px; }
.pp-intro__blurb{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; line-height: 1.0; font-size: clamp(24px,3.4vw,46px); margin: 0; max-width: 18ch; }
.pp-intro__blurb::first-letter{ color: var(--mb-pink); }
.pp-intro__credits{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; align-content: start; padding-top: 8px; }
.pp-cred{ font-size: 15px; line-height: 1.4; color: var(--mb-ink); border-top: 1px solid var(--hairline-soft); padding-top: 10px; }
.pp-cred span{ display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-bottom: 5px; }

/* gallery */
.pp-work{ padding: clamp(8px,1.4vw,16px); }
.pp-gallery{ columns: 2; column-gap: clamp(8px,1.4vw,16px); }
.pp-shot{ position: relative; margin: 0 0 clamp(8px,1.4vw,16px); break-inside: avoid; overflow: hidden; background: var(--mb-mist); }
@media (prefers-reduced-motion: no-preference){
  body.pp-anim .pp-shot{ opacity: 0; transform: translateY(10px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
  body.pp-anim .pp-shot.in{ opacity: 1; transform: none; }
}
.pp-shot img{ width: 100%; display: block; filter: grayscale(.18) contrast(1.04); transition: filter .35s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.pp-shot:hover img{ filter: grayscale(0) contrast(1); transform: scale(1.02); }
.pp-shot__n{ position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--mb-paper); mix-blend-mode: difference; }
.pp-video{ background:#000; }
.pp-video video{ width: 100%; display: block; max-height: 86vh; background: #000; }
.pp-soon{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 16/7; text-align: center; background: repeating-linear-gradient(45deg, var(--mb-mist) 0 14px, #E3DFD6 14px 28px); }
.pp-soon span{ font-size: 40px; color: var(--mb-pink-hot); }
.pp-soon b{ font-weight: 700; font-size: 16px; }
.pp-soon i{ font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-stone); }

/* prev / next */
.pp-nav{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--mb-ink); }
.pp-jump{ display: flex; flex-direction: column; gap: 4px; padding: clamp(28px,4vw,52px) clamp(20px,4vw,56px); text-decoration: none; color: var(--mb-ink); transition: background .2s ease; min-width: 0; }
.pp-jump--next{ text-align: right; align-items: flex-end; }
.pp-jump:hover{ background: var(--mb-ink); color: var(--mb-paper); }
.pp-jump__dir{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.pp-jump:hover .pp-jump__dir{ color: var(--mb-pink); }
.pp-jump__cl{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; font-size: clamp(22px,2.8vw,40px); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.pp-jump__ti{ font-size: 12px; letter-spacing: .04em; color: var(--fg-2); }
.pp-jump:hover .pp-jump__ti{ color: var(--mb-mist); }
.pp-nav__all{ align-self: stretch; display: flex; align-items: center; padding: 0 clamp(16px,2vw,28px); border-inline: 1px solid var(--mb-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--mb-ink); white-space: nowrap; }
.pp-nav__all:hover{ background: var(--mb-pink); }

/* 404 */
.pp-miss{ min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 80px 24px; }
.pp-miss__n{ font-family: var(--font-display); font-weight: 800; font-size: clamp(64px,14vw,180px); line-height: 1; color: var(--mb-pink); }
.pp-miss h1{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(24px,4vw,44px); margin: 0; }
.pp-miss p{ color: var(--fg-2); max-width: 36ch; margin: 0 0 12px; }

@media (max-width: 760px){
  .pp-intro{ grid-template-columns: 1fr; }
  .pp-gallery{ columns: 1; }
  .pp-nav{ grid-template-columns: 1fr; }
  .pp-nav__all{ border-inline: 0; border-block: 1px solid var(--mb-ink); justify-content: center; padding: 16px; }
  .pp-jump--next{ text-align: left; align-items: flex-start; }
}