/* Mert Ozince / Project Gallery V3 — breathing room, sector metadata, subtle motion.
   Scope: project detail pages only. Requires Minimal Gallery V2. */
.pf-shell{
  --pf-paper:#f4f1eb;
  --pf-muted:#a9a8a4;
  --pf-line:rgba(246,244,239,.17);
  --pf-accent:#d1b18a;
  background:#0b0c0d;
  color:var(--pf-paper);
}
.pf-shell :is(a,button):focus-visible{outline:2px solid var(--pf-accent);outline-offset:5px}
.pf-shell .pf-bar{height:105px;border-bottom-color:rgba(255,255,255,.09);background:#0b0c0d}
.pf-shell .pf-return{gap:20px;letter-spacing:.18em;transition:color .3s ease,transform .3s ease;white-space:nowrap}
.pf-shell .pf-return:hover{color:var(--pf-accent);transform:translateX(-5px);opacity:1}
.pf-shell .pf-hero{isolation:isolate;min-height:min(800px,calc(100svh - 105px));background:#131517}
.pf-shell .pf-hero__media{overflow:hidden}
.pf-shell .pf-hero__media>img,.pf-shell .pf-hero__media>video{
  transform:scale(1.025);
  transform-origin:center center;
  animation:pf-v3-hero-calm 12s cubic-bezier(.2,.65,.2,1) both;
}
.pf-shell .pf-hero__shade{
  background:linear-gradient(0deg,rgba(5,6,7,.88) 0%,rgba(7,8,9,.28) 55%,rgba(4,5,6,.26) 100%),
             linear-gradient(100deg,rgba(3,4,5,.28),transparent 65%);
}
.pf-shell .pf-hero__content{padding:0 clamp(28px,7vw,130px) clamp(64px,7vw,118px)}
.pf-shell .pf-hero__eyebrow{font-size:11px;letter-spacing:.19em;gap:18px;line-height:1.8;color:#f2e9da;text-transform:none!important}
.pf-shell .pf-dot{background:var(--pf-accent);width:5px;height:5px}
.pf-shell .pf-hero h1{
  font-size:clamp(54px,8.75vw,164px)!important;
  line-height:1.055!important;
  font-weight:730!important;
  letter-spacing:-.046em!important;
  text-transform:none!important;
  word-spacing:.105em!important;
  margin:clamp(28px,3.8vw,58px) 0 clamp(38px,5vw,80px)!important;
  max-width:1480px;
  text-wrap:balance;
}
.pf-shell .pf-hero__bottom{padding-top:27px;letter-spacing:.16em;line-height:1.6}
.pf-shell .pf-discover{gap:24px;transition:color .3s ease}
.pf-shell .pf-discover span{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pf-shell .pf-discover:hover{transform:none;color:var(--pf-accent)}
.pf-shell .pf-discover:hover span{transform:translateY(6px)}
/* Keep the project information as one editorial spread with a visible DB-driven sector. */
.pf-shell .pf-intro{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(100px,10vw,178px) clamp(28px,7vw,130px) clamp(115px,11vw,182px);
  grid-template-columns:minmax(0,1.2fr) minmax(250px,.82fr);
  align-items:center;
  column-gap:clamp(60px,7vw,140px);
  row-gap:60px;
}
.pf-shell .pf-intro::before{
  content:"";position:absolute;z-index:-1;left:-17%;top:5%;width:60%;height:100%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(171,140,103,.055),transparent 65%);
}
.pf-shell .pf-intro__identity>span{display:block;color:var(--pf-accent);font-size:11px;letter-spacing:.22em;line-height:1.7}
.pf-shell .pf-intro h2{
  font-size:clamp(48px,5vw,98px)!important;
  letter-spacing:-.042em!important;
  word-spacing:.095em!important;
  line-height:1.08!important;
  font-weight:720!important;
  text-transform:none!important;
  margin:clamp(28px,3.5vw,55px) 0 clamp(42px,4.5vw,78px)!important;
  text-wrap:balance;
}
.pf-shell .pf-intro__meta{display:flex;flex-wrap:wrap;column-gap:clamp(40px,5vw,90px);row-gap:28px}
.pf-shell .pf-intro__sector,.pf-shell .pf-intro__year{display:flex;flex-direction:column;gap:14px;min-width:95px}
.pf-shell .pf-intro__meta span{font-size:10px;letter-spacing:.22em;font-weight:700;color:#989997}
.pf-shell .pf-intro__meta strong{font-size:clamp(13px,1.05vw,17px);line-height:1.55;font-weight:500;letter-spacing:.035em;color:var(--pf-paper);overflow-wrap:anywhere}
.pf-shell .pf-intro__actions{align-self:center;min-width:0}
.pf-shell .pf-link{padding:33px 0;font-size:clamp(12px,1vw,15px);letter-spacing:.15em;transition:padding .35s ease,color .35s ease}
.pf-shell .pf-link strong{font-size:23px;transition:transform .35s ease}
.pf-shell .pf-link:hover{padding-left:8px;padding-right:8px;color:var(--pf-accent)}
.pf-shell .pf-link:hover strong{transform:translate(4px,-4px)}
.pf-shell .pf-intro__tag{padding-top:32px;line-height:1.6}
/* More space around section title and photographs; keep V2 layouts and media player. */
.pf-shell .pf-work{padding:clamp(125px,12vw,210px) clamp(24px,5.5vw,110px) clamp(120px,12vw,210px)}
.pf-shell .pf-section-head{
  display:grid;grid-template-columns:minmax(130px,1fr) auto minmax(110px,1fr);
  align-items:end;gap:35px;margin:0 0 clamp(55px,7vw,105px);
}
.pf-shell .pf-section-head>span{letter-spacing:.2em;line-height:1.7}
.pf-shell .pf-section-head>span:last-child{justify-self:end}
.pf-shell .pf-section-head h2{
  font-size:clamp(47px,5.8vw,103px)!important;
  line-height:1.04!important;
  letter-spacing:-.055em!important;
  word-spacing:.09em!important;
  font-weight:720!important;
  text-align:center;
}
.pf-shell .pf-section-head h2 em{letter-spacing:-.055em;font-style:normal;font-weight:400;color:#ccc4b8}
.pf-shell .pf-grid{gap:clamp(62px,7vw,124px) clamp(20px,2.4vw,48px)}
.pf-shell .pf-item__visual{border-radius:2px;background:#18191b}
.pf-shell .pf-item__visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.07));opacity:.65;transition:opacity .6s ease}
.pf-shell .pf-item:hover .pf-item__visual::after{opacity:0}
.pf-shell .pf-zoom img{transition:transform 1.1s cubic-bezier(.18,.7,.22,1),filter 1.1s ease}
.pf-shell .pf-zoom:hover img{transform:scale(1.042);filter:brightness(1.055)}
.pf-shell .pf-zoom__icon{width:52px;height:52px;background:rgba(10,11,12,.55);backdrop-filter:blur(7px);transition:background .35s ease,transform .35s ease,border-color .35s ease}
.pf-shell .pf-zoom:hover .pf-zoom__icon{background:rgba(184,148,111,.35);border-color:var(--pf-accent);transform:translate(2px,-2px)}
.pf-shell .pf-item figcaption{margin-top:21px;padding-top:20px;gap:28px}
.pf-shell .pf-item figcaption span{font-size:10px;letter-spacing:.2em;line-height:1.65}
.pf-shell .pf-item figcaption strong{font-size:13px;line-height:1.6;letter-spacing:.025em}
/* The next project is a cinematic typography moment, not a hard CTA. */
.pf-shell .pf-footer{position:relative;isolation:isolate;background:#141517;overflow:hidden}
.pf-shell .pf-footer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 80% 75%,rgba(190,153,113,.1),transparent 48%);opacity:.35;transition:opacity .6s ease}
.pf-shell .pf-footer:has(.pf-next:hover)::before{opacity:1}
.pf-shell .pf-footer__top{padding:55px 0 32px;letter-spacing:.18em}
.pf-shell .pf-next{padding:clamp(93px,11vw,190px) 0;gap:43px}
.pf-shell .pf-next>span{letter-spacing:.21em}
.pf-shell .pf-next>strong{font-size:clamp(58px,9.2vw,148px);letter-spacing:-.045em;word-spacing:.1em;line-height:1.06;transition:color .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),opacity .5s ease;text-transform:none!important}
.pf-shell .pf-next:hover>strong{opacity:1;color:#eee8df;transform:translateX(12px)}
.pf-shell .pf-footer__bottom{padding-top:32px;padding-bottom:10px;line-height:1.65}
/* Progressive, JS-enhanced motion. Without JS, all content remains visible. */
@keyframes pf-v3-hero-calm{from{transform:scale(1.085)}to{transform:scale(1.025)}}
@keyframes pf-v3-entry{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.pf-shell .pf-hero__eyebrow,.pf-shell .pf-hero h1,.pf-shell .pf-hero__bottom{animation:pf-v3-entry .9s cubic-bezier(.16,.76,.25,1) both}
.pf-shell .pf-hero__eyebrow{animation-delay:.08s}
.pf-shell .pf-hero h1{animation-delay:.21s}
.pf-shell .pf-hero__bottom{animation-delay:.38s}
.pf-v3-motion-ready .pf-shell .pf-v3-reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.pf-v3-motion-ready .pf-shell .pf-v3-reveal.pf-v3-inview{opacity:1;transform:translateY(0)}
.pf-v3-motion-ready .pf-shell .pf-item:nth-child(2n).pf-v3-reveal{transition-delay:.1s}
.pf-v3-progress{position:fixed;z-index:100;top:0;left:0;width:100%;height:2px;pointer-events:none;background:var(--pf-accent);transform:scaleX(0);transform-origin:left center;opacity:.8}
/* Narrow screens: generous spacing without oversized lines or horizontal overflow. */
@media(max-width:1060px){
  .pf-shell .pf-intro{grid-template-columns:1fr;gap:54px}
  .pf-shell .pf-section-head{grid-template-columns:1fr auto;align-items:start}
  .pf-shell .pf-section-head h2{grid-column:1/-1;grid-row:2;text-align:left}
}
@media(max-width:800px){
  .pf-shell .pf-bar{height:78px}
  .pf-shell .pf-hero{min-height:0}
  .pf-shell .pf-hero__content{padding:0 27px 56px}
  .pf-shell .pf-hero h1{font-size:clamp(52px,10.4vw,102px)!important;word-spacing:.06em!important;letter-spacing:-.038em!important}
  .pf-shell .pf-intro{padding:100px 28px 118px}
  .pf-shell .pf-intro h2{font-size:clamp(49px,8vw,90px)!important}
  .pf-shell .pf-work{padding:110px 25px 145px}
  .pf-shell .pf-section-head{gap:20px;margin-bottom:61px}
  .pf-shell .pf-section-head h2{font-size:clamp(51px,8.5vw,90px)!important}
  .pf-shell .pf-grid{gap:66px 22px}
}
@media(max-width:560px){
  .pf-shell .pf-bar{padding:0 22px}
  .pf-shell .pf-return{font-size:9px!important;letter-spacing:.1em;gap:8px}
  .pf-shell .pf-hero{height:clamp(485px,74svh,730px)}
  .pf-shell .pf-hero__content{padding:0 24px 43px}
  .pf-shell .pf-hero__eyebrow{font-size:9px;letter-spacing:.13em;gap:9px}
  .pf-shell .pf-hero h1{font-size:clamp(44px,10.5vw,70px)!important;line-height:1.08!important;letter-spacing:-.038em!important;word-spacing:.07em!important;margin:30px 0 41px!important}
  .pf-shell .pf-hero__bottom{padding-top:18px;font-size:9px;align-items:flex-end}
  .pf-shell .pf-discover{gap:10px;text-align:right}
  .pf-shell .pf-intro{padding:86px 24px 106px;gap:42px}
  .pf-shell .pf-intro h2{font-size:clamp(43px,10.3vw,65px)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:28px 0 41px!important}
  .pf-shell .pf-intro__meta{column-gap:38px;row-gap:25px}
  .pf-shell .pf-link{padding:27px 0}
  .pf-shell .pf-work{padding:92px 20px 119px}
  .pf-shell .pf-section-head{grid-template-columns:1fr auto;column-gap:8px;row-gap:18px;margin-bottom:45px}
  .pf-shell .pf-section-head>span{font-size:9px;letter-spacing:.12em}
  .pf-shell .pf-section-head h2{font-size:clamp(43px,10.2vw,65px)!important;line-height:1.08!important}
  .pf-shell .pf-grid{grid-template-columns:1fr;gap:55px}
  .pf-shell .pf-next{padding:95px 0;gap:31px}
  .pf-shell .pf-next>strong{font-size:clamp(47px,10.5vw,78px);letter-spacing:-.04em}
}
@media(prefers-reduced-motion:reduce){
  .pf-shell .pf-hero__media>img,.pf-shell .pf-hero__media>video,
  .pf-shell .pf-hero__eyebrow,.pf-shell .pf-hero h1,.pf-shell .pf-hero__bottom{animation:none!important;transform:none!important}
  .pf-v3-motion-ready .pf-shell .pf-v3-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .pf-v3-progress{display:none}
}

/* V3.1 HERO SIMPLIFY */
.pf-shell .pf-hero__content{
  display:none !important;
}

.pf-shell .pf-hero{
  min-height:clamp(340px, 62svh, 720px) !important;
  height:clamp(340px, 62svh, 720px) !important;
}

.pf-shell .pf-hero__media::after{
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.22) 100%
  ) !important;
}

@media (max-width: 560px){
  .pf-shell .pf-hero{
    min-height:clamp(260px, 42svh, 420px) !important;
    height:clamp(260px, 42svh, 420px) !important;
  }
}