/* =============================================
   THE PETER PERSPECTIVE — main.css v2.0
   ============================================= */

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

:root {
  --ink:        #0d0c0a;
  --ink-2:      #161410;
  --ink-3:      #1e1b16;
  --paper:      #f0ebe0;
  --paper-dim:  #a89f8e;
  --gold:       #c8922a;
  --rule:       rgba(200,146,42,0.18);
  --faint:      rgba(240,235,224,0.07);
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── NAV ── */
.pp-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 3rem;
  border-bottom: 1px solid var(--rule);
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 300;
}
.pp-nav__logo { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--paper); text-decoration:none; }
.pp-nav__logo em { font-style:italic; color:var(--gold); }
.pp-nav__links { display:flex; gap:2.5rem; list-style:none; }
.pp-nav__links a { font-family:'Courier Prime',monospace; font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(240,235,224,0.45); text-decoration:none; transition:color 0.2s; }
.pp-nav__links a:hover,
.pp-nav__links .current-menu-item a { color:var(--gold); }
.pp-nav__socials { display:flex; gap:1.25rem; list-style:none; }
.pp-nav__socials a { font-family:'Courier Prime',monospace; font-size:0.62rem; letter-spacing:0.12em; color:rgba(240,235,224,0.28); text-decoration:none; transition:color 0.2s; }
.pp-nav__socials a:hover { color:var(--gold); }

/* Mobile burger */
.pp-nav__burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.pp-nav__burger span { display:block; width:22px; height:1.5px; background:var(--paper-dim); transition:all 0.3s; }
.pp-nav__drawer { display:none; position:fixed; inset:0; top:60px; background:var(--ink-2); z-index:299; padding:2rem 3rem; border-top:1px solid var(--rule); }
.pp-nav__drawer ul { list-style:none; display:flex; flex-direction:column; gap:1.5rem; }
.pp-nav__drawer a { font-family:'Courier Prime',monospace; font-size:1rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(240,235,224,0.6); text-decoration:none; transition:color 0.2s; }
.pp-nav__drawer a:hover { color:var(--gold); }
body.nav-open .pp-nav__drawer { display:block; }

/* ── SHARED ATOMS ── */
.pp-eyebrow { font-family:'Courier Prime',monospace; font-size:0.62rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:1.5rem; padding-left:0.85rem; border-left:2px solid var(--gold); }
.pp-rule { width:3rem; height:1px; background:var(--gold); margin-bottom:1.75rem; }
.pp-btn { display:inline-block; background:var(--gold); color:var(--ink); padding:0.75rem 1.75rem; font-family:'Courier Prime',monospace; font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; text-decoration:none; border-radius:1px; transition:background 0.2s; cursor:pointer; border:none; }
.pp-btn:hover { background:var(--paper); }
.pp-btn--ghost { background:transparent; color:rgba(240,235,224,0.5); border-bottom:1px solid rgba(240,235,224,0.25); padding:0.1rem 0; border-radius:0; }
.pp-btn--ghost:hover { background:transparent; color:var(--paper); border-color:var(--paper); }

/* ── HERO ── */
.pp-hero { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 64px); max-height:900px; }
.pp-hero__left { position:relative; overflow:hidden; border-right:1px solid var(--rule); }
.pp-hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.pp-hero__video-placeholder { position:absolute; inset:0; background:var(--ink-3); display:flex; align-items:center; justify-content:center; z-index:0; font-family:'Courier Prime',monospace; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(240,235,224,0.2); text-align:center; line-height:1.8; }
.pp-hero__overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(13,12,10,0.5) 0%,rgba(13,12,10,0.25) 40%,rgba(13,12,10,0.7) 100%),linear-gradient(to right,rgba(13,12,10,0.35),transparent 70%); z-index:1; pointer-events:none; }
.pp-hero__content { position:relative; z-index:2; padding:5rem 3rem; display:flex; flex-direction:column; justify-content:center; height:100%; }
.pp-hero__title { font-family:'Playfair Display',serif; font-size:clamp(3rem,6vw,6rem); font-weight:900; line-height:0.92; letter-spacing:-0.025em; color:var(--paper); margin-bottom:2rem; text-shadow:0 2px 20px rgba(13,12,10,0.5); }
.pp-hero__title em { font-style:italic; color:var(--gold); }
.pp-hero__bio { font-family:'Playfair Display',serif; font-style:italic; font-size:1rem; line-height:1.7; color:rgba(240,235,224,0.8); margin-bottom:2.5rem; max-width:420px; font-weight:400; }
.pp-hero__ctas { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; }

/* Video controls */
.pp-hero__controls { position:absolute; bottom:1.5rem; right:1.5rem; z-index:3; display:flex; align-items:center; gap:0.75rem; }
.pp-ctrl { width:36px; height:36px; border-radius:50%; border:1px solid rgba(200,146,42,0.5); background:rgba(13,12,10,0.6); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s,border-color 0.2s; }
.pp-ctrl:hover { background:var(--gold); border-color:var(--gold); }
.pp-ctrl svg { width:14px; height:14px; overflow:visible; }
.pp-ctrl svg path, .pp-ctrl svg polygon, .pp-ctrl svg rect { fill:var(--gold); transition:fill 0.2s; }
.pp-ctrl:hover svg path, .pp-ctrl:hover svg polygon, .pp-ctrl:hover svg rect { fill:var(--ink); }
.pp-ctrl__vol { display:flex; align-items:center; background:rgba(13,12,10,0.6); border:1px solid rgba(200,146,42,0.25); border-radius:20px; padding:0 0.75rem; height:36px; overflow:hidden; width:0; opacity:0; transition:width 0.3s,opacity 0.3s; }
.pp-ctrl__vol.visible { width:110px; opacity:1; }
.pp-ctrl__vol input[type=range] { -webkit-appearance:none; width:80px; height:3px; background:rgba(200,146,42,0.3); border-radius:2px; outline:none; cursor:pointer; }
.pp-ctrl__vol input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--gold); cursor:pointer; }

/* Hero right */
.pp-hero__right { position:relative; overflow:hidden; background:var(--ink-2); }
.pp-hero__right img { width:100%; height:100%; object-fit:cover; display:block; opacity:0.85; transition:opacity 0.3s; }
.pp-hero__right img:hover { opacity:1; }
.pp-hero__right-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(13,12,10,0.3),transparent 40%),linear-gradient(to top,rgba(13,12,10,0.55),transparent 50%); pointer-events:none; }
.pp-hero__tag { position:absolute; top:1.5rem; left:1.5rem; background:var(--gold); color:var(--ink); font-family:'Courier Prime',monospace; font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase; padding:0.22rem 0.65rem; font-weight:700; border-radius:1px; }
.pp-hero__caption { position:absolute; bottom:1.5rem; left:1.5rem; font-family:'Courier Prime',monospace; font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(240,235,224,0.45); }

/* ── INFO STRIP ── */
.pp-strip { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; grid-template-columns:repeat(3,1fr); }
.pp-strip__item { padding:2rem 3rem; border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:0.4rem; }
.pp-strip__item:last-child { border-right:none; }
.pp-strip__label { font-family:'Courier Prime',monospace; font-size:0.58rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); }
.pp-strip__value { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--paper); line-height:1.3; }
.pp-strip__value em { font-style:italic; font-weight:400; color:var(--paper-dim); }
.pp-strip__socials { display:flex; gap:1.25rem; }
.pp-strip__socials a { font-family:'Courier Prime',monospace; font-size:0.65rem; letter-spacing:0.15em; color:var(--paper-dim); text-decoration:none; transition:color 0.2s; }
.pp-strip__socials a:hover { color:var(--gold); }

/* ── SECTIONS ── */
.pp-section { padding:4rem 3rem; }
.pp-section--dark { background:var(--ink-2); border-top:1px solid var(--rule); }
.pp-section__header { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:1rem; border-bottom:1px solid var(--rule); margin-bottom:2.5rem; }
.pp-section__title { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; letter-spacing:-0.01em; color:var(--paper); }
.pp-section__title em { font-style:italic; color:var(--gold); }
.pp-section__link { font-family:'Courier Prime',monospace; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(240,235,224,0.3); text-decoration:none; transition:color 0.2s; }
.pp-section__link:hover { color:var(--gold); }

/* ── PAGE HEADER ── */
.pp-page-header { display:flex; justify-content:space-between; align-items:flex-end; padding:4rem 3rem 2rem; border-bottom:1px solid var(--rule); }
.pp-page-header__title { font-family:'Playfair Display',serif; font-size:clamp(2.5rem,5vw,4rem); font-weight:900; line-height:1; letter-spacing:-0.02em; color:var(--paper); margin-top:0.75rem; }
.pp-page-header__title em { font-style:italic; color:var(--gold); }
.pp-page-header__count { font-family:'Courier Prime',monospace; font-size:0.62rem; letter-spacing:0.25em; text-transform:uppercase; color:rgba(240,235,224,0.25); }

/* ── MASONRY ── */
.pp-masonry { columns:3; column-gap:14px; }
.pp-masonry--home { } /* same rules, can override if needed */
.pp-gallery-section { padding:3rem; }

.pp-masonry__item { break-inside:avoid; margin-bottom:14px; position:relative; overflow:hidden; border-radius:2px; cursor:pointer; background:var(--ink-3); }
.pp-masonry__item img { width:100%; height:auto; display:block; opacity:0.88; transition:transform 0.45s ease,opacity 0.3s; }
.pp-masonry__item:hover img { transform:scale(1.04); opacity:1; }
.pp-masonry__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(13,12,10,0.78) 0%,transparent 55%); opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:1rem; }
.pp-masonry__item:hover .pp-masonry__overlay { opacity:1; }
.pp-masonry__overlay span { font-family:'Courier Prime',monospace; font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(240,235,224,0.85); }

/* ── VIDEO GRID ── */
.pp-video-row { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.pp-video-section { padding:3rem; }
.pp-video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:2rem; }

.pp-video-card { cursor:pointer; }
.pp-video-card__thumb { width:100%; aspect-ratio:16/9; background:var(--ink-3); border-radius:2px; overflow:hidden; position:relative; transition:box-shadow 0.3s; display:block; }
.pp-video-card:hover .pp-video-card__thumb { box-shadow:0 0 0 1px var(--gold); }
.pp-video-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; opacity:0.75; transition:opacity 0.3s; }
.pp-video-card__thumb-placeholder { width:100%; height:100%; background:var(--ink-3); }
.pp-video-card:hover .pp-video-card__thumb img { opacity:1; }

/* Large cards on video page */
.pp-video-card--large .pp-video-card__thumb { aspect-ratio:16/9; }
.pp-video-card--large .pp-video-card__title { font-size:1.15rem; }
.pp-video-card--large .pp-video-card__excerpt { font-size:0.85rem; line-height:1.75; color:rgba(240,235,224,0.5); margin:0.5rem 0 0; font-weight:300; }

/* Play button */
.pp-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.pp-play__circle { width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(200,146,42,0.7); background:rgba(13,12,10,0.55); display:flex; align-items:center; justify-content:center; transition:background 0.2s,border-color 0.2s; }
.pp-video-card:hover .pp-play__circle { background:var(--gold); border-color:var(--gold); }
.pp-play__tri { width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:16px solid var(--gold); margin-left:3px; transition:border-left-color 0.2s; }
.pp-video-card:hover .pp-play__tri { border-left-color:var(--ink); }

.pp-video-card__info { padding:0.9rem 0 0; }
.pp-video-card__type { font-family:'Courier Prime',monospace; font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:0.35rem; }
.pp-video-card__title { font-family:'Playfair Display',serif; font-size:0.95rem; font-weight:700; line-height:1.3; color:var(--paper); margin-bottom:0.25rem; }
.pp-video-card__meta { font-family:'Courier Prime',monospace; font-size:0.58rem; letter-spacing:0.12em; color:rgba(240,235,224,0.25); text-transform:uppercase; }

/* ── VIDEO MODAL ── */
.pp-video-modal { display:none; position:fixed; inset:0; background:rgba(13,12,10,0.97); z-index:600; align-items:center; justify-content:center; padding:2rem; }
.pp-video-modal.open { display:flex; }
.pp-video-modal__inner { width:100%; max-width:960px; aspect-ratio:16/9; position:relative; }
.pp-video-modal__inner iframe { width:100%; height:100%; border-radius:2px; }

/* ── LIGHTBOX ── */
.pp-lightbox { display:none; position:fixed; inset:0; background:rgba(13,12,10,0.97); z-index:500; align-items:center; justify-content:center; flex-direction:column; padding:2rem; }
.pp-lightbox.open { display:flex; }
.pp-lightbox img { max-width:90vw; max-height:82vh; object-fit:contain; border-radius:2px; }
.pp-lightbox-close { position:absolute; top:1.5rem; right:2rem; font-family:'Courier Prime',monospace; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(240,235,224,0.4); cursor:pointer; background:none; border:none; transition:color 0.2s; }
.pp-lightbox-close:hover { color:var(--gold); }
.pp-lightbox-caption { margin-top:1rem; font-family:'Courier Prime',monospace; font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:rgba(240,235,224,0.35); }

/* ── EMPTY STATES ── */
.pp-empty { font-family:'Courier Prime',monospace; font-size:0.8rem; letter-spacing:0.1em; color:rgba(240,235,224,0.25); padding:2rem 0; }
.pp-empty strong { color:rgba(240,235,224,0.4); }
.pp-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.25rem; padding:6rem 2rem; text-align:center; }
.pp-empty-state__title { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:rgba(240,235,224,0.3); }
.pp-empty-state__sub { font-family:'DM Sans',sans-serif; font-size:0.875rem; line-height:1.8; color:rgba(240,235,224,0.22); max-width:400px; }
.pp-empty-state__sub strong { color:rgba(240,235,224,0.4); font-weight:500; }

/* ── FOOTER ── */
.pp-footer { border-top:1px solid var(--rule); padding:2.5rem 3rem; display:grid; grid-template-columns:1fr auto auto; gap:2rem 4rem; align-items:start; background:var(--ink-2); }
.pp-footer__name { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--paper); }
.pp-footer__name em { font-style:italic; color:var(--gold); }
.pp-footer__tagline { font-family:'Courier Prime',monospace; font-size:0.58rem; letter-spacing:0.28em; text-transform:uppercase; color:rgba(240,235,224,0.22); margin-top:0.3rem; }
.pp-footer__links { display:flex; flex-direction:column; gap:0.5rem; list-style:none; }
.pp-footer__links a { font-family:'Courier Prime',monospace; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color:rgba(240,235,224,0.3); text-decoration:none; transition:color 0.2s; }
.pp-footer__links a:hover { color:var(--gold); }
.pp-footer__socials { display:flex; flex-direction:column; gap:0.5rem; list-style:none; }
.pp-footer__socials a { font-family:'Courier Prime',monospace; font-size:0.62rem; letter-spacing:0.15em; color:rgba(240,235,224,0.3); text-decoration:none; transition:color 0.2s; }
.pp-footer__socials a:hover { color:var(--gold); }
.pp-footer__copy { grid-column:1/-1; font-family:'Courier Prime',monospace; font-size:0.58rem; letter-spacing:0.1em; color:rgba(240,235,224,0.18); text-transform:uppercase; border-top:1px solid var(--rule); padding-top:1.25rem; margin-top:0.5rem; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .pp-video-row { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .pp-nav { padding:1.2rem 1.5rem; }
  .pp-nav__links, .pp-nav__socials { display:none; }
  .pp-nav__burger { display:flex; }

  .pp-hero { grid-template-columns:1fr; min-height:auto; max-height:none; }
  .pp-hero__left { min-height:75vw; border-right:none; border-bottom:1px solid var(--rule); }
  .pp-hero__right { height:60vw; min-height:240px; }

  .pp-strip { grid-template-columns:1fr; }
  .pp-strip__item { border-right:none; border-bottom:1px solid var(--rule); padding:1.5rem; }
  .pp-strip__item:last-child { border-bottom:none; }

  .pp-section, .pp-gallery-section, .pp-video-section { padding:2.5rem 1.5rem; }
  .pp-page-header { padding:3rem 1.5rem 1.5rem; flex-direction:column; gap:0.5rem; align-items:flex-start; }

  .pp-masonry { columns:2; }
  .pp-video-row, .pp-video-grid { grid-template-columns:1fr; }

  .pp-footer { grid-template-columns:1fr; padding:2rem 1.5rem; }
}

@media (max-width:500px) {
  .pp-masonry { columns:1; }
}