/* =========================================================================
   Pat Ortiz — boudoir portfolio (immersive templates)
   Scoped under body.po-immersive so it never touches the rest of the site.
   ========================================================================= */

body.po-immersive{
  --po-ground:#0B0A0D; --po-bone:#ECE6DC; --po-muted:#a8a29a;
  --po-gold:#E8C79A; --po-gold-soft:rgba(232,199,154,.2);
  --po-serif:Georgia,"Times New Roman",serif;
  --po-sans:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --po-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  margin:0; background:var(--po-ground); color:var(--po-bone);
  font-family:var(--po-serif); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.po-immersive.po-lock{overflow:hidden}
body.po-immersive img{max-width:100%; display:block}

.po-grain{position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

/* chrome */
.po-brand{position:fixed; left:clamp(20px,4vw,44px); top:clamp(18px,3vh,34px); z-index:30;
  font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.3em; font-size:11px;
  color:var(--po-bone); mix-blend-mode:difference; text-decoration:none}
.po-nav{position:fixed; right:clamp(20px,4vw,44px); top:clamp(16px,3vh,32px); z-index:30; display:flex; gap:22px}
.po-nav a{font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.2em; font-size:11px;
  color:var(--po-bone); mix-blend-mode:difference; text-decoration:none; opacity:.9; transition:opacity .3s}
.po-nav a:hover{opacity:1}

/* shared type bits */
.po-eyebrow{font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.42em; font-size:11px; color:var(--po-gold)}
.po-h1{font-family:var(--po-serif); font-weight:400; font-size:clamp(3rem,11vw,8rem); line-height:.9;
  letter-spacing:-.015em; margin:.28em 0 .4em; color:var(--po-bone)}
.po-h1 em{font-style:italic; color:var(--po-gold)}
.po-lede{font-family:var(--po-sans); font-size:15px; letter-spacing:.02em; color:var(--po-muted);
  max-width:48ch; line-height:1.75; margin:0 auto; padding:0 24px}

/* ---- home: full-screen scroll ---- */
.po-hero-full{height:100vh; scroll-snap-align:start; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; position:relative}

.po-logo{max-width:min(70vw,420px)}
.po-logo img{max-width:100%; max-height:38vh; width:auto; height:auto; display:block; margin:0 auto}
.po-logo a{display:block}

.po-logo-spot{display:flex; align-items:center; justify-content:center; text-decoration:none;
  width:min(46vw,220px); aspect-ratio:1; border:1px dashed rgba(236,230,220,.28); border-radius:50%;
  transition:border-color .3s, background .3s}
.po-logo-spot:hover{border-color:var(--po-gold-soft); background:rgba(232,199,154,.04)}
.po-logo-spot span{font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.32em; font-size:11px; color:var(--po-muted)}

.po-cue{position:absolute; left:50%; bottom:6vh; transform:translateX(-50%); display:block;
  width:1px; height:44px; background:linear-gradient(var(--po-gold),transparent); text-decoration:none;
  animation:po-beam 2.4s ease-in-out infinite}
@keyframes po-beam{0%,100%{opacity:.25; transform:translateX(-50%) scaleY(.5)}50%{opacity:1; transform:translateX(-50%) scaleY(1)}}
.po-full{position:relative; height:100vh; scroll-snap-align:start; overflow:hidden; display:flex; align-items:flex-end}
.po-full-art{position:absolute; inset:-6%; background:var(--po-cover) center/cover no-repeat;
  transform:scale(1.06); transition:transform 1.2s ease}
.po-full:hover .po-full-art{transform:scale(1.1)}
.po-full-scrim{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,5,8,.7) 0%, rgba(6,5,8,.2) 34%, transparent 60%),
             radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.5) 100%)}
.po-full-cap{position:absolute; left:clamp(28px,6vw,90px); bottom:clamp(56px,12vh,120px); z-index:3; text-decoration:none; color:var(--po-bone); max-width:min(80vw,520px)}
.po-full-t{font-family:var(--po-serif); font-style:italic; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1; text-wrap:balance}
.po-full-m{font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.22em; font-size:12px; color:var(--po-muted); margin-top:.7em}
.po-full-view{display:inline-block; margin-top:1.4em; font-family:var(--po-sans); text-transform:uppercase;
  letter-spacing:.24em; font-size:11px; color:var(--po-gold); border:1px solid var(--po-gold-soft); padding:12px 22px; transition:background .3s}
.po-full:hover .po-full-view{background:var(--po-gold-soft)}

/* ---- portfolio + single-shoot heading ---- */
.po-shoot-hero{text-align:center; padding:20vh 24px 5vh}
.po-note{font-family:var(--po-sans); font-size:12px; color:var(--po-muted); letter-spacing:.04em; margin-top:1em}
.po-empty{text-align:center; font-family:var(--po-sans); color:var(--po-muted); padding:14vh 24px}

/* ---- full-bleed mosaic ---- */
.po-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,21vh,240px);
  grid-auto-flow:dense; gap:4px; padding:0; width:100vw; max-width:100%; margin-inline:calc(50% - 50vw); margin-bottom:6px}
@media(max-width:900px){.po-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.po-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:34vw}}
.po-tile.s-feat{grid-column:span 2; grid-row:span 2}
.po-tile.s-wide{grid-column:span 2}
.po-tile.s-tall{grid-row:span 2}

.po-tile{position:relative; display:block; overflow:hidden; cursor:zoom-in; background:#0e0c12; text-decoration:none;
  opacity:0; animation:po-tileIn .7s cubic-bezier(.2,.8,.2,1) forwards}
a.po-tile{cursor:pointer}
@keyframes po-tileIn{from{opacity:0; transform:scale(.965)}to{opacity:1; transform:none}}
.po-art{position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.02); transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; filter:brightness(.82) saturate(.96)}
.po-tile:hover .po-art{transform:scale(1.08); filter:brightness(1.02) saturate(1)}
.po-tscrim{position:absolute; inset:0; background:linear-gradient(transparent 45%, rgba(6,5,8,.82)); opacity:.15; transition:opacity .4s}
.po-tile:hover .po-tscrim{opacity:1}
.po-tcap{position:absolute; left:16px; right:16px; bottom:14px; z-index:3; transform:translateY(10px); opacity:0; transition:.4s}
.po-tile:hover .po-tcap{transform:none; opacity:1}
.po-tt{font-family:var(--po-serif); font-style:italic; font-size:clamp(1.1rem,1.6vw,1.5rem); line-height:1.05; color:var(--po-bone); text-wrap:balance}
.po-ll{font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:var(--po-muted); margin-top:5px}

/* ---- footer ---- */
.po-footer{border-top:1px solid rgba(236,230,220,.1); padding:9vh 0 12vh; text-align:center; scroll-snap-align:start}
.po-footer p{font-family:var(--po-sans); letter-spacing:.24em; text-transform:uppercase; font-size:11px; color:var(--po-muted)}
.po-footer p span{color:var(--po-gold)}
.po-book{display:inline-block; margin-top:1.4em; font-family:var(--po-sans); text-transform:uppercase;
  letter-spacing:.24em; font-size:11px; color:var(--po-ground); background:var(--po-gold); padding:16px 30px; text-decoration:none; transition:filter .2s}
.po-book:hover{filter:brightness(1.08)}

/* ============ LIGHTBOX (image only) ============ */
.po-show{position:fixed; inset:0; z-index:40; background:rgba(8,7,10,.97);
  display:flex; align-items:center; justify-content:center; padding:clamp(18px,4vw,60px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s .35s}
.po-show.po-open{opacity:1; visibility:visible; transition:opacity .35s ease}
.po-lb-stage{position:relative; max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center; cursor:zoom-in}
.po-lb-stage.po-zoom{cursor:zoom-out; overflow:hidden}
.po-lb-img{max-width:min(94vw,1400px); max-height:86vh; width:auto; height:auto; object-fit:contain;
  border:10px solid #100e13; border-radius:2px; box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  opacity:0; transform:scale(.985); transition:opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); transform-origin:center}
.po-show.po-open .po-lb-img{opacity:1; transform:none}
.po-lb-stage.po-zoom .po-lb-img{max-width:none; max-height:none; transition:transform .12s ease}
.po-lb-count{position:fixed; left:clamp(20px,4vw,44px); bottom:clamp(22px,4vh,40px); z-index:60;
  font-family:var(--po-mono); font-size:12px; letter-spacing:.1em; color:var(--po-muted); display:none}
.po-lb-count.po-vis{display:block}
.po-specs{display:grid; grid-template-columns:auto 1fr; gap:11px 20px; font-family:var(--po-sans); font-size:13px; margin:14px 0 4px}
.po-specs dt{color:var(--po-muted); text-transform:uppercase; letter-spacing:.16em; font-size:11px}
.po-specs dd{color:var(--po-bone); text-align:right; letter-spacing:.02em; margin:0}
/* single-shoot session info — shown once, above the grid */
.po-shoot-meta{max-width:640px; margin:0 auto; padding:0 24px 7vh; text-align:center}
.po-shoot-story{font-family:var(--po-serif); font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.85; color:#d9d3c9}
.po-shoot-story p{margin:0 0 1em}
.po-shoot-meta .po-specs{max-width:420px; margin:24px auto 0; text-align:left}
.po-shoot-price{font-family:var(--po-serif); font-size:1.15rem; color:var(--po-gold); margin-top:1.5em}
.po-shoot-meta .po-book{margin-top:1.6em}
.po-enquire{font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.22em; font-size:11px; color:var(--po-ground);
  background:var(--po-gold); border:none; padding:16px 28px; cursor:pointer; text-decoration:none; transition:.2s}
.po-enquire:hover{filter:brightness(1.08)}
.po-sclose{position:fixed; top:clamp(18px,3vh,32px); right:clamp(20px,4vw,40px); z-index:60; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(236,230,220,.25); background:rgba(10,9,12,.5); color:var(--po-bone); font-size:18px; cursor:pointer; transition:.3s; display:none}
.po-sclose.po-vis{display:block} .po-sclose:hover{border-color:var(--po-gold); color:var(--po-gold); transform:rotate(90deg)}
.po-snav{position:fixed; bottom:clamp(20px,4vh,38px); right:clamp(20px,4vw,40px); z-index:60; display:none; gap:10px}
.po-snav.po-vis{display:flex}
.po-snav button{width:46px; height:46px; border-radius:50%; border:1px solid rgba(236,230,220,.2); background:rgba(10,9,12,.5); color:var(--po-bone); cursor:pointer; font-size:16px; transition:.3s}
.po-snav button:hover{border-color:var(--po-gold); color:var(--po-gold)}

@keyframes po-rise{to{opacity:1; transform:translateY(0)}}

/* ---- about ---- */
.po-editorial{max-width:1000px; margin:0 auto; padding:0 clamp(24px,5vw,40px) 14vh;
  display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
@media(max-width:820px){.po-editorial{grid-template-columns:1fr; gap:32px}}
.po-portrait{position:relative; aspect-ratio:4/5; overflow:hidden; border:12px solid #100e13; border-radius:2px;
  background:linear-gradient(155deg,#1a1013,#4a2a28 45%,#9c6b52 80%,#d6a985) center/cover;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.po-prose p{font-family:var(--po-serif); font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.85; color:#d9d3c9; margin:0 0 1.1em}
.po-prose p:first-child{font-size:clamp(1.15rem,1.5vw,1.35rem); color:var(--po-bone)}
.po-prose .po-book{margin-top:1em}

/* ---- book / packages ---- */
.po-pkgs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1120px; margin:0 auto; padding:0 24px 6vh; align-items:stretch}
@media(max-width:820px){.po-pkgs{grid-template-columns:1fr; max-width:460px}}
.po-pkg{position:relative; border:1px solid rgba(236,230,220,.14); border-radius:4px; padding:34px 28px 30px;
  background:rgba(255,255,255,.015); display:flex; flex-direction:column}
.po-pkg-feat{border-color:var(--po-gold-soft); background:rgba(232,199,154,.05)}
.po-pkg-tag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--po-gold); color:var(--po-ground);
  font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.18em; font-size:9px; padding:5px 14px; border-radius:40px}
.po-pkg-name{font-family:var(--po-serif); font-style:italic; font-size:1.5rem; color:var(--po-bone); margin:0 0 .3em; font-weight:400}
.po-pkg-amt{font-family:var(--po-serif); font-size:2.4rem; color:var(--po-gold); margin-bottom:1em}
.po-pkg-list{list-style:none; margin:0 0 1.6em; padding:0; flex:1}
.po-pkg-list li{font-family:var(--po-sans); font-size:13.5px; color:var(--po-muted); line-height:1.6; padding:9px 0 9px 22px; position:relative; border-top:1px solid rgba(236,230,220,.07)}
.po-pkg-list li:before{content:""; position:absolute; left:0; top:15px; width:9px; height:9px; border-radius:50%; border:1px solid var(--po-gold)}
.po-pkg-cta{display:block; text-align:center; font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.2em; font-size:11px;
  color:var(--po-bone); text-decoration:none; border:1px solid var(--po-gold-soft); padding:14px; transition:background .3s,color .3s}
.po-pkg-cta:hover{background:var(--po-gold); color:var(--po-ground)}
.po-pkg-feat .po-pkg-cta{background:var(--po-gold); color:var(--po-ground)}
.po-pkg-feat .po-pkg-cta:hover{filter:brightness(1.08)}
.po-book-note{text-align:center; padding:2vh 24px 14vh}
.po-book-note p{font-family:var(--po-sans); font-size:13px; color:var(--po-muted); letter-spacing:.02em}
.po-book-note a{color:var(--po-gold); text-decoration:none; border-bottom:1px solid var(--po-gold-soft)}

/* ---- contact form ---- */
.po-form{max-width:640px; margin:0 auto; padding:0 24px 14vh; display:flex; flex-direction:column; gap:18px}
.po-field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:560px){.po-field-row{grid-template-columns:1fr}}
.po-field{display:flex; flex-direction:column; gap:8px}
.po-field > span{font-family:var(--po-sans); text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--po-muted)}
.po-field > span em{font-style:normal; text-transform:none; letter-spacing:0; opacity:.7}
.po-form input, .po-form select, .po-form textarea{
  font-family:var(--po-sans); font-size:15px; color:var(--po-bone); background:rgba(255,255,255,.03);
  border:1px solid rgba(236,230,220,.16); border-radius:3px; padding:13px 14px; width:100%; transition:border-color .3s}
.po-form textarea{resize:vertical}
.po-form input:focus, .po-form select:focus, .po-form textarea:focus{outline:none; border-color:var(--po-gold)}
.po-form select option{background:#141117; color:var(--po-bone)}
.po-form .po-enquire{margin-top:6px; align-self:flex-start}
.po-form-fine{font-family:var(--po-sans); font-size:12px; color:var(--po-muted); letter-spacing:.02em; margin:0}
.po-form-error{max-width:640px; margin:0 auto 18px; text-align:center; font-family:var(--po-sans); font-size:13px; color:#e0a0a0}
.po-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.po-sent{max-width:560px; margin:0 auto; text-align:center; padding:2vh 24px 16vh}
.po-sent p{font-family:var(--po-serif); font-size:1.3rem; color:var(--po-bone); line-height:1.7; margin-bottom:1.6em}

@media(prefers-reduced-motion:reduce){
  .po-tile{opacity:1; animation:none}
  .po-art{transition:filter .3s}
  .po-canvas{transition:opacity .3s}
}