/* THE WHITE ROSE RAVEN — V2.7 portfolio page on the living hero scene (raven, lake, mist) */
.portfolio-page{background:#07090d}
.pf-veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(4,6,10,.80) 0%,rgba(4,6,10,.55) 45%,rgba(4,6,10,.25) 75%,rgba(4,6,10,.15) 100%),
  linear-gradient(180deg,rgba(4,6,10,.35) 0%,transparent 25%,rgba(4,6,10,.45) 100%)}
.pf-main{padding:128px 0 80px}
.pf-shell{max-width:1320px}
.portfolio-page .ab-head h1{margin-bottom:14px}
.pf-lead{max-width:760px;margin:0 0 30px;font-family:"Cormorant Garamond",serif;font-size:19px;line-height:1.5;color:rgba(246,238,228,.8);text-shadow:0 2px 14px rgba(0,0,0,.7)}
.pf-lead strong{color:#f3e6d2;font-weight:600}
.pf-hint{display:block;margin-top:6px;font-style:italic;color:var(--gold-2)}

.pf-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:26px;padding:14px 16px;border-radius:14px;
  background:rgba(8,9,13,.55);border:1px solid rgba(228,203,166,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pf-controls .tabs,.pf-controls .filters{display:flex;flex-wrap:wrap;gap:8px}
.pf-controls .tabs{padding-right:22px;border-right:1px solid rgba(228,203,166,.14)}
.pf-controls .pill{padding:9px 16px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid rgba(228,203,166,.2);color:rgba(246,238,228,.72);
  font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:all .25s ease}
.pf-controls .pill:hover{border-color:rgba(228,203,166,.5);color:#f3e6d2}
.pf-controls .tabs .pill[aria-selected="true"]{background:linear-gradient(135deg,#dfc197,#b99362);border-color:transparent;color:#16110d;box-shadow:0 8px 24px rgba(151,100,52,.25)}
.pf-controls .filters .pill.active{border-color:rgba(228,203,166,.65);color:var(--gold-2);background:rgba(200,167,120,.08)}

/* ---------- V3.5 film-frame grid: perforation lit by the projector, warm light leaking between frames ---------- */
.media-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.media-grid>.p{color:rgba(246,238,228,.6);font-family:"Cormorant Garamond",serif;font-size:18px}
/* projector glow living in the gaps between the frames */
.media-grid::before{
  content:"";position:absolute;inset:-40px -30px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(22% 30% at 33.5% 50%,rgba(255,138,48,.20),transparent 70%),
    radial-gradient(22% 30% at 66.5% 50%,rgba(255,150,60,.18),transparent 70%),
    radial-gradient(40% 8% at 50% 50%,rgba(255,140,50,.14),transparent 70%),
    radial-gradient(10% 40% at 0% 50%,rgba(255,120,40,.12),transparent 70%),
    radial-gradient(10% 40% at 100% 50%,rgba(255,120,40,.12),transparent 70%);
  filter:blur(6px);animation:pfProjector 7s ease-in-out infinite;
}
@keyframes pfProjector{0%,100%{opacity:.75}38%{opacity:1}52%{opacity:.82}64%{opacity:.98}}

.pf-frame{
  --glow:255,148,62;
  position:relative;cursor:pointer;outline:none;
  padding:30px 30px 14px;border-radius:10px;
  background:
    linear-gradient(180deg,rgba(255,170,90,.05),transparent 22%,transparent 80%,rgba(255,150,70,.05)),
    linear-gradient(180deg,#1b120e,#120c0a 60%,#170f0b);
  border:1px solid rgba(var(--glow),.22);
  box-shadow:0 22px 50px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.5),inset 0 0 24px rgba(0,0,0,.6);
  transition:transform .55s cubic-bezier(.2,.75,.15,1),border-color .4s ease,box-shadow .5s ease;
  animation:pfIn .8s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes pfIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.pf-frame:hover,.pf-frame:focus-visible{transform:translateY(-6px);border-color:rgba(var(--glow),.48);
  box-shadow:0 32px 70px rgba(0,0,0,.6),0 0 46px rgba(var(--glow),.16),inset 0 0 0 1px rgba(0,0,0,.5)}
.pf-frame:focus-visible{outline:1px solid rgba(var(--glow),.8);outline-offset:3px}

/* edge print: frame number, arrows, film stock */
.pf-edge{position:absolute;left:44px;right:44px;top:8px;display:flex;align-items:center;gap:10px;
  font:600 9px/1 var(--sans);letter-spacing:.22em;color:rgba(255,190,130,.38);pointer-events:none}
.pf-edge b{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.04em;color:#f0b26e;text-shadow:0 0 12px rgba(var(--glow),.45)}
.pf-edge em{font-style:normal;font-size:10px;letter-spacing:-.1em;color:rgba(240,170,100,.55)}
.pf-edge small{margin-left:auto;font-size:9px;letter-spacing:.26em}

/* perforation */
.pf-perf{position:absolute;top:12px;bottom:12px;width:16px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.pf-perf-l{left:7px}.pf-perf-r{right:7px}
.pf-perf i{display:block;width:16px;height:12px;border-radius:3px;
  background:#070504;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 0 0 1px rgba(var(--glow),.12)}
.pf-perf i.lit{background:radial-gradient(70% 80% at 50% 50%,#ffd9a0,#ff9a3c 55%,#c2541a);
  box-shadow:0 0 10px rgba(var(--glow),.85),0 0 22px rgba(var(--glow),.45),0 0 0 1px rgba(255,200,140,.3);
  animation:pfHole var(--du,4s) ease-in-out var(--d,0s) infinite}
@keyframes pfHole{0%,100%{opacity:1}12%{opacity:.55}16%{opacity:1}46%{opacity:.8}70%{opacity:.35}78%{opacity:.95}}
.pf-frame:hover .pf-perf i:not(.lit){background:#1d0f07;box-shadow:inset 0 0 6px rgba(var(--glow),.35),0 0 0 1px rgba(var(--glow),.2)}

/* light leak burning in from the frame edge */
.pf-leak{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(14% 40% at 0% var(--ly,30%),rgba(255,130,40,.35),transparent 70%),
    radial-gradient(14% 40% at 100% var(--ry,70%),rgba(255,150,60,.30),transparent 70%);
  animation:pfLeak 9s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.7s)}
@keyframes pfLeak{0%,100%{--ly:22%;--ry:72%;opacity:.45}50%{--ly:64%;--ry:30%;opacity:.8}}
@property --ly{syntax:"<percentage>";inherits:false;initial-value:30%}
@property --ry{syntax:"<percentage>";inherits:false;initial-value:70%}
.pf-frame:hover .pf-leak{opacity:.95}

/* picture */
.pf-frame .thumb-img{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:8px;background:#0b0807;
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.6)}
.pf-frame .thumb-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.75,.15,1),filter .6s ease;
  filter:brightness(.86) contrast(1.04) saturate(.95) sepia(.08)}
.pf-frame:hover .thumb-img img{transform:scale(1.06);filter:brightness(1) contrast(1.04) saturate(1.02) sepia(.04)}
.pf-frame .thumb-img::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg,rgba(8,6,5,.15) 0%,transparent 30%,transparent 50%,rgba(8,6,5,.88) 100%),
    radial-gradient(120% 100% at 50% 45%,transparent 60%,rgba(0,0,0,.45) 100%),
    linear-gradient(105deg,transparent 40%,rgba(255,226,190,.14) 49%,transparent 58%) no-repeat;
  background-size:100% 100%,100% 100%,260% 100%;background-position:0 0,0 0,130% 0;
  transition:background-position 1.1s cubic-bezier(.3,.6,.2,1)}
.pf-frame:hover .thumb-img::after{background-position:0 0,0 0,-30% 0}
.pf-frame .thumb-img::before{display:none}
.pf-frame .badge{position:absolute;left:12px;top:12px;z-index:3;padding:7px 12px;border-radius:999px;background:rgba(10,7,6,.72);
  border:1px solid rgba(240,200,150,.55);color:#f6e7d2;font:700 8.5px/1 var(--sans);letter-spacing:.18em}
.pf-play{position:absolute;left:50%;top:44%;z-index:3;width:62px;height:62px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.8);opacity:0;transition:all .45s cubic-bezier(.2,.75,.15,1);
  background:rgba(12,8,6,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23f6e7d2'/%3E%3C/svg%3E") 54% 50%/24px no-repeat;
  border:1px solid rgba(240,200,150,.7);box-shadow:0 0 24px rgba(var(--glow),.25);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pf-frame:hover .pf-play,.pf-frame:focus-visible .pf-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pf-frame .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 16px 14px}
.pf-frame .meta b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(19px,1.75vw,24px);line-height:1.15;color:#f8eee2;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.pf-frame .meta span{display:block;margin-top:6px;font:600 10px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#e6b77c}

.pf-intl{margin:40px 0 0;text-align:center;font-size:11px;letter-spacing:.08em;color:rgba(246,238,228,.6)}
.pf-intl a{color:var(--gold-2);text-decoration:underline;text-underline-offset:4px}

/* ---------- Viewer modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,4,6,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modal.open{display:flex;animation:pfFade .35s ease}
@keyframes pfFade{from{opacity:0}to{opacity:1}}
body.modal-open{overflow:hidden}
.modal-inner{width:min(1100px,100%)}
.viewer{border-radius:16px;overflow:hidden;background:#0b0a0d;border:1px solid rgba(228,203,166,.2);box-shadow:0 40px 120px rgba(0,0,0,.7)}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(228,203,166,.12)}
.viewer-meta{display:flex;flex-direction:column;gap:3px}
#viewerTitle{font-family:var(--display);font-size:20px;color:#f3ebe0}
#viewerSub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
#modalClose{width:38px;height:38px;border-radius:50%;cursor:pointer;background:transparent;border:1px solid rgba(228,203,166,.3);color:#f3ebe0;font-size:14px}
#modalClose:hover{border-color:var(--gold);color:var(--gold-2)}
.viewer-body{position:relative;background:#000}
.viewer-media{display:grid;place-items:center;min-height:300px}
.viewer-media video,.viewer-media img,.viewer-media iframe{display:block;width:100%;max-height:78vh;object-fit:contain;border:0}
.viewer-media iframe{aspect-ratio:16/9;height:auto}
.viewer-media .p{color:rgba(246,238,228,.7);padding:40px}
.navbtn{position:absolute;top:50%;z-index:3;width:46px;height:46px;border-radius:50%;transform:translateY(-50%);cursor:pointer;
  background:rgba(8,8,11,.55);border:1px solid rgba(228,203,166,.3);color:#f3ebe0;font-size:22px;line-height:1;transition:all .25s ease}
.navbtn:hover{background:rgba(200,167,120,.18);border-color:var(--gold)}
.navbtn.prev{left:14px}.navbtn.next{right:14px}
.navbtn[disabled],.navbtn.is-disabled{opacity:.3;pointer-events:none}

@media (max-width:980px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-grid::before{background:radial-gradient(20% 30% at 50% 30%,rgba(255,138,48,.18),transparent 70%),radial-gradient(20% 30% at 50% 70%,rgba(255,138,48,.16),transparent 70%)}.pf-controls .tabs{border-right:0;padding-right:0}}
@media (max-width:600px){.media-grid{grid-template-columns:1fr}.pf-main{padding-top:108px}.pf-veil{background:linear-gradient(180deg,rgba(4,6,10,.7),rgba(4,6,10,.55))}}
@media (max-width:600px){.pf-frame{padding:28px 26px 12px}.pf-perf{width:13px}.pf-perf i{width:13px;height:10px}.pf-perf-l{left:6px}.pf-perf-r{right:6px}.pf-edge{left:36px;right:36px}}
@media (prefers-reduced-motion:reduce){.thumb,.pf-frame,.pf-perf i.lit,.pf-leak,.media-grid::before{animation:none}}