@font-face{
  font-family:'Soria';
  src:url(../assets/fonts/soria.ttf) format('truetype');
  font-weight:400 800;
  font-display:swap;
}

:root{
  --beige:#EDE3CC;
  --beige-deep:#DECBA1;
  --paper:#F7F1E1;
  --ink:#231A12;
  --red:#E23B22;
  --red-deep:#8C2A1B;
  --red-dim:#B23A22;
  --night-1:#182642;
  --night-2:#0c1526;
  --night-3:#05070f;
  --night-ink:#0d1526;
  --line: rgba(35,26,18,.18);
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono: 'Courier New', Courier, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--beige);
  color:var(--ink);
  font-family:var(--serif);
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit; text-decoration:none; cursor:none;}
a:link, a:visited, a:hover, a:active{ cursor:none; }
img{display:block; max-width:100%;}
::selection{background:var(--red); color:var(--paper);}

/* ---------- custom cursor ---------- */
#cursor{
  position:fixed; top:0; left:0; width:44px; height:44px;
  background:url(../assets/img/cursor.png) center/contain no-repeat;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease, transform .2s ease;
}
#cursor.hover{
  background-image:url(../assets/img/cursor-hover.png);
  transform:translate(-50%,-50%) scale(1.1);
}
#cursor.hide{ opacity:0; }
@media (hover:none), (pointer:coarse){
  #cursor{display:none;}
  body, a, a:link, a:visited, a:hover, a:active{ cursor:auto; }
}

/* ---------- night sky: stars + soft constellation ---------- */
#stars{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:0; transition:opacity 1.4s ease;
}
#stars.ready{ opacity:1; }

/* ---------- mouse-reactive gradient glow ---------- */
#mouseGlow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(650px 650px at var(--mx,50%) var(--my,50%), rgba(76,102,178,.30), transparent 62%),
    radial-gradient(1000px 1000px at var(--mx,50%) var(--my,50%), rgba(120,140,210,.14), transparent 70%);
  opacity:0; transition:opacity 1s ease;
}
#mouseGlow.ready{ opacity:1; }
@media (hover:none), (pointer:coarse){
  #mouseGlow{ display:none; }
}

/* ---------- halation overlay (film-style warm glow) ---------- */
#halation{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  mix-blend-mode:screen; opacity:.55;
  background:
    radial-gradient(600px 400px at 85% 8%, rgba(255,120,70,.35), transparent 60%),
    radial-gradient(500px 350px at 6% 92%, rgba(255,90,60,.22), transparent 60%);
  animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-2%,2%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  #halation{animation:none;}
  #mouseGlow{ display:none; }
}
/* pause the halation overlay whenever the tab isn't visible */
body.tab-hidden #halation{ animation-play-state:paused; }
/* pause it while a project panel is open too: it renders above the panel
   (z-index 9997) but is fully hidden behind the modal's opaque backdrop,
   so keeping it animating just burns GPU for nothing visible */
body.panel-open #halation{ animation-play-state:paused; }
/* pause hero decorations once the hero has scrolled out of view */
.tw-hero.io-paused .tag,
.tw-hero.io-paused .h1-spark,
.tw-hero.io-paused .deco-line::after{ animation-play-state:paused; }

/* ---------- layout frame ---------- */
.frame{
  padding:14px;
}
.reel-edge{
  height:16px;
  background-image: radial-gradient(circle, var(--ink) 2.6px, transparent 2.7px);
  background-size: 26px 16px;
  background-position: center;
  opacity:.35;
}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
nav .logo{
  font-family:'Soria', var(--serif); font-size:1.05rem; letter-spacing:.05em; text-transform:none;
  mix-blend-mode:difference; color:#F7F1E1;
}
nav ul{ list-style:none; display:flex; gap:12px; align-items:center; }
nav ul a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:11px 24px; border-radius:999px; overflow:visible;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper);
  will-change:transform; isolation:isolate;
  border:1.5px solid rgba(247,241,225,.22);
  background:rgba(14,20,36,.42);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  transition:border-color .4s ease, box-shadow .4s ease;
}
nav ul a::before{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:-1;
  width:45%; height:55%; border-radius:50%;
  background:var(--nc1); filter:blur(18px); opacity:0; pointer-events:none;
  transition:width .5s ease, height .5s ease, opacity .5s ease, filter .5s ease;
}
nav ul a:hover::before, nav ul a.active::before{ width:95%; height:95%; opacity:.75; filter:blur(14px); }
nav ul a:hover, nav ul a.active{
  border-color:rgba(247,241,225,.45);
  box-shadow:
    0 0 26px 4px var(--nc-glow),
    0 0 50px 12px var(--nc-glow),
    inset 0 0 12px rgba(255,255,255,.12);
}
nav ul a.active{ color:var(--nc2); }
nav ul a.active::after{
  content:''; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:var(--nc2); box-shadow:0 0 8px var(--nc2);
}
nav ul li:nth-child(1) a{ --nc1:#7c5cff; --nc2:#a6c1ff; --nc-glow:rgba(124,92,255,.55); }
nav ul li:nth-child(2) a{ --nc1:#0fb8ae; --nc2:#6df3d8; --nc-glow:rgba(15,184,174,.55); }
nav ul li:nth-child(3) a{ --nc1:#9b6bff; --nc2:#c9b8ff; --nc-glow:rgba(155,107,255,.5); }
nav ul li:nth-child(4) a{ --nc1:#22d3ee; --nc2:#bff8ff; --nc-glow:rgba(34,211,238,.5); }
.nav-toggle{
  display:none;
  width:44px; height:44px; padding:0; margin:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:12px; cursor:none;
  color:var(--paper);
  background:rgba(14,20,36,.42);
  border:1.5px solid rgba(247,241,225,.22);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  z-index:502;
}
.nav-toggle span{
  display:block; width:16px; height:1.5px; border-radius:1px;
  background:currentColor; transition:transform .3s ease, opacity .3s ease;
}
nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }


/* ---------- hero ---------- */
.hero{
  position:relative;
  height:100vh; min-height:640px;
  padding:14px;
}
.hero-inner{
  position:relative;
  height:100%;
  border-radius:2px;
  overflow:hidden;
  background:#111 url(../assets/img/hero-bg.jpg) center 30%/cover no-repeat;
  filter:saturate(1.18) contrast(1.05);
}
.hero-inner::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,10,5,.05) 0%, rgba(20,10,5,.12) 45%, rgba(15,8,4,.75) 100%);
}
.hero-copy{
  position:absolute; left:6%; bottom:9%; z-index:2;
  max-width:780px;
}
.hero-copy .eyebrow{
  font-family:var(--mono); color:var(--paper); font-size:.72rem;
  letter-spacing:.25em; text-transform:uppercase; opacity:.85; margin-bottom:10px;
  display:block;
}
.hero h1{
  font-family:'Soria', var(--serif);
  font-weight:800;
  color:var(--red);
  font-size:clamp(3.4rem, 10vw, 8.4rem);
  line-height:.88;
  text-shadow:0 0 26px rgba(226,59,34,.35);
  letter-spacing:-.01em;
}
.hero h2{
  font-family:'Soria', var(--serif);
  color:var(--red-deep);
  font-weight:700;
  font-size:clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:10px;
}
.rec{
  position:absolute; left:6%; top:9%; z-index:2;
  font-family:var(--mono); color:var(--red); font-size:.78rem; letter-spacing:.08em;
  display:flex; align-items:center; gap:8px;
}
.rec .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); animation:blink 1.4s steps(2) infinite;}
@keyframes blink{ 50%{opacity:.15;} }
.timestamp{
  position:absolute; right:6%; top:9%; z-index:2;
  font-family:var(--mono); color:var(--paper); font-size:.72rem; opacity:.85; text-align:right;
}
.scroll-note{
  position:absolute; right:6%; bottom:8%; z-index:2;
  font-family:'Soria', var(--serif); font-style:italic; color:var(--red);
  font-size:1.05rem; transform:rotate(-4deg);
  display:flex; align-items:center; gap:10px;
}
.scroll-note svg{ width:26px; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* ---------- section shell ---------- */
section{ position:relative; padding:120px 8% 100px; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:56px;
  border-bottom:1px solid var(--line); padding-bottom:22px;
}
.section-head .tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red-deep);
}
.section-head h2{
  font-family:'Soria', var(--serif); font-weight:800;
  font-size:clamp(2.2rem,5vw,4rem); color:var(--ink);
}
.section-head p{
  font-family:var(--serif); max-width:340px; color:var(--ink); opacity:.72; font-size:.98rem;
}

.reveal{ opacity:0; transform:translateY(28px) blur(2px); transition:opacity .9s ease, transform .9s ease, filter .9s ease; filter:blur(2px);}


.reveal.in{ opacity:1; transform:translateY(0) blur(0); filter:blur(0); }

/* ---------- about ---------- */
.about{ background:var(--paper); }
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.about-grid p{ font-size:1.08rem; line-height:1.75; margin-bottom:18px; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.tags span{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--ink); padding:7px 12px; border-radius:20px; opacity:.8;
}
.big-word{
  font-family:'Soria', var(--serif); font-weight:800; font-size:clamp(2.6rem,7vw,5.6rem);
  color:var(--red); line-height:.95;
}

/* ---------- work / contact sheet ---------- */
.sheet{
  column-count:3; column-gap:36px;
}
.frame-card{
  break-inside:avoid; margin-bottom:44px; cursor:none;
  display:inline-block; width:100%; position:relative;
}
.frame-card .art{
  position:relative; overflow:hidden; border-radius:14px;
  box-shadow:0 18px 34px rgba(35,26,18,.22);
  transition:transform .35s ease, box-shadow .35s ease;
}
.frame-card .art img{
  width:100%; display:block; border-radius:14px;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(1.08) contrast(1.03);
}
.frame-card:hover .art{ transform:translateY(-4px); box-shadow:0 26px 46px rgba(35,26,18,.3); }
.frame-card:hover .art img{ transform:scale(1.045); }
.frame-card .overlay{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:22px;
  background:linear-gradient(0deg, rgba(15,8,4,.72) 0%, transparent 45%);
  opacity:0; transition:opacity .4s ease;
}
.frame-card:hover .overlay{ opacity:1; }
.frame-card .overlay span{
  font-family:'Soria', var(--serif); color:var(--paper); font-size:1.15rem;
  text-align:center; letter-spacing:.02em;
}

/* slight intentional imperfection — subtle, not messy */
.frame-card:nth-child(3n+1) .art{ transform:rotate(-.35deg); }
.frame-card:nth-child(3n+2) .art{ transform:rotate(.3deg); margin-top:16px; }
.frame-card:nth-child(3n){ margin-top:6px; }
.frame-card:hover .art{ transform:rotate(0deg) translateY(-4px) !important; }

/* lightbox */
#lightbox{
  position:fixed; inset:0; z-index:9993;
  background:rgba(15,8,4,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
#lightbox.open{ opacity:1; pointer-events:auto; }
#lightbox img{
  max-width:88vw; max-height:86vh;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
#lightbox .lb-caption{
  position:absolute; bottom:34px; left:0; right:0; text-align:center;
  font-family:'Soria', var(--serif); color:var(--paper); font-size:1.2rem;
}
#lightbox .lb-close{
  position:absolute; top:28px; right:36px;
  font-family:var(--mono); color:var(--paper); font-size:.9rem; letter-spacing:.1em;
  cursor:none; opacity:.8;
}
#lightbox .lb-close:hover{ opacity:1; }

/* ---------- services ---------- */
.services{ background:var(--ink); color:var(--paper); }
.services .section-head h2{ color:var(--paper); }
.services .section-head .tag{ color:var(--red); }
.services .section-head p{ color:var(--paper); opacity:.65; }
.serv-list{ border-top:1px solid rgba(247,241,225,.2); }
.serv-item{
  display:grid; grid-template-columns:110px 1fr 1fr; gap:24px; align-items:center;
  padding:28px 0; border-bottom:1px solid rgba(247,241,225,.2);
  transition:background .3s ease;
}
.serv-item:hover{ background:rgba(226,59,34,.08); }
.serv-item .mark{ font-family:var(--mono); color:var(--red); font-size:.85rem; letter-spacing:.1em; }
.serv-item h3{ font-family:'Soria', var(--serif); font-size:1.5rem; font-weight:700; }
.serv-item p{ opacity:.72; font-size:.95rem; line-height:1.6; }

/* ---------- journal ---------- */
.journal{ background:var(--beige); }
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.journal-card{
  background:var(--paper); border:1px solid var(--line); padding:26px;
  transition:transform .4s ease, box-shadow .4s ease;
}
.journal-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(35,26,18,.15); }
.journal-card .date{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--red-deep); margin-bottom:14px; display:block;}
.journal-card h3{ font-family:'Soria', var(--serif); font-size:1.25rem; margin-bottom:10px; }
.journal-card p{ font-size:.92rem; line-height:1.6; opacity:.78; }

/* ---------- contact ---------- */
.contact{
  text-align:center; padding-top:140px; padding-bottom:140px;
}
.contact .tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red-deep); }
.contact h2{
  font-family:'Soria', var(--serif); font-weight:800; color:var(--red);
  font-size:clamp(2.6rem,9vw,7rem); line-height:.95; margin:18px 0 34px;
}
.contact-links{ display:flex; gap:34px; justify-content:center; flex-wrap:wrap; font-family:var(--mono); font-size:.85rem; letter-spacing:.05em;}
.contact-links a{ border-bottom:1px solid var(--ink); padding-bottom:3px; }
.contact-links a:hover{ color:var(--red); border-color:var(--red); }

/* .pf-footer styles live further down, near the rest of the trabajos.html-
   specific rules — see "site footer" section. */

@media (max-width:860px){
  nav{ padding:18px 22px; }
  nav ul{ gap:8px; }
  nav ul a{ padding:8px 14px; font-size:.58rem; }
  section{ padding:90px 6% 70px; }
  .about-grid{ grid-template-columns:1fr; gap:30px; }
  .sheet{ column-count:2; column-gap:20px; }
  .frame-card{ margin-bottom:26px; }
  .serv-item{ grid-template-columns:1fr; gap:8px; }
  .journal-grid{ grid-template-columns:1fr; }
  .hero-copy{ left:5%; right:5%; bottom:12%; }
  .rec, .timestamp{ display:none; }
}
body{
  background:linear-gradient(165deg, var(--night-1) 0%, var(--night-2) 45%, var(--night-3) 100%);
  color:var(--paper);
}
:root{ --rose:#E08D74; }

.tw-hero{ padding:170px 8% 20px; }
.tw-hero .tag{
  display:flex; align-items:center; gap:8px; width:fit-content;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:#5eead4;
  animation:tagGlow 2.6s ease-in-out infinite;
  margin-bottom:14px;
}
.tw-hero .tag svg{ width:12px; height:12px; fill:currentColor; }
@keyframes tagGlow{
  0%,100%{ text-shadow:0 0 6px rgba(94,234,212,.3); }
  50%{ text-shadow:0 0 16px rgba(94,234,212,.85); }
}
.tw-hero-title-row{
  display:flex; align-items:center; gap:clamp(14px,2.5vw,28px);
  flex-wrap:wrap; margin:14px 0 14px;
}
.tw-hero h1{
  position:relative; display:inline-block; margin:0;
  font-family:'Soria', var(--serif); font-weight:800; color:var(--paper);
  font-size:clamp(3.4rem,10vw,7.6rem); line-height:.9; margin:14px 0 14px;
}
.tw-hero h1 .h1-spark{
  position:absolute; top:2%; right:-2%;
  width:clamp(16px,2.4vw,30px); height:clamp(16px,2.4vw,30px);
  color:var(--paper); fill:currentColor;
  animation:sparkTwinkle 2.8s ease-in-out infinite;
}
@keyframes sparkTwinkle{
  0%,100%{ opacity:.35; transform:scale(.75) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.1) rotate(8deg); }
}
.tw-hero p{ max-width:520px; font-size:.98rem; opacity:.65; line-height:1.6; }
.tw-hero .deco-line{
  position:relative; width:70px; height:2px; margin-top:24px;
  border-radius:2px; overflow:hidden; background:rgba(247,241,225,.18);
}
.tw-hero .deco-line::after{
  content:''; position:absolute; inset:0; width:45%;
  background:linear-gradient(90deg, transparent, #5eead4, transparent);
  animation:decoShine 3.4s ease-in-out infinite;
}
@keyframes decoShine{
  0%{ transform:translateX(-140%); }
  100%{ transform:translateX(320%); }
}

/* two-column layout */
.tw-layout{
  display:grid; grid-template-columns:1.35fr 1fr; gap:70px;
  padding:60px 8% 130px; align-items:start;
}
.tw-col-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,210px) 56px 34px; align-items:center; gap:18px;
  padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid rgba(247,241,225,.25);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(247,241,225,.5);
}
.tw-col-head span:first-child{ text-align:left; }
.tw-col-head span:nth-child(2){ text-align:left; }

.tw-col-head span:nth-child(3){ text-align:right; }

.tw-role-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.filter-pills{
  display:flex; gap:4px; flex-wrap:wrap;
}
.filter-pill{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; cursor:none;
  color:rgba(247,241,225,.55);
  background:rgba(247,241,225,.06);
  border:1px solid rgba(247,241,225,.14);
  transition:color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.filter-pill:hover{
  color:rgba(247,241,225,.9);
  border-color:rgba(247,241,225,.35);
}
.filter-pill.active{
  color:var(--paper);
  background:rgba(94,234,212,.14);
  border-color:rgba(94,234,212,.45);
  box-shadow:0 0 12px rgba(94,234,212,.2);
}
.proj-row.is-hidden{ display:none; }


@property --ring-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes ringSpin{ to{ --ring-ang:360deg; } }

.proj-row{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,210px) 56px 34px; align-items:center; gap:18px;
  padding:30px 0; border-bottom:1px solid rgba(247,241,225,.15);
  cursor:none;
}
.proj-row::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:2px -18px;
  border-radius:18px;
  background:conic-gradient(from var(--ring-ang), var(--red), #4f6ef7, #5eead4, #7c5cff, var(--red));
  opacity:0; transition:opacity .3s ease;
  animation:ringSpin 4s linear infinite paused;
}
.proj-row:hover::after{ opacity:1; animation-play-state:running; }
.proj-row::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  inset:4px -16px;
  border-radius:16px;
  background:
    linear-gradient(90deg, var(--red) 0 4px, transparent 4px),
    var(--paper);
  opacity:0; transform:scaleY(.92); transform-origin:center;
  transition:opacity .3s ease, transform .3s ease;
}
.proj-row:hover::before{ opacity:1; transform:scaleY(1); }
.proj-row > *{ position:relative; z-index:1; }
.proj-row .p-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.proj-row .p-name{
  font-family:'Soria', var(--serif); font-weight:800;
  font-size:clamp(1.55rem, 2.5vw, 2.2rem);
  line-height:1.15;
  flex:1; min-width:0;
  transition:color .35s ease, transform .35s ease;
  transform-origin:left center;
}
.proj-row:hover .p-name{ transform:translateX(6px); }
.proj-row[data-accent="red"]:hover .p-name{ color:var(--red); }
.proj-row[data-accent="rose"]:hover .p-name{ color:var(--rose); }
.proj-row .p-spark{
  width:13px; height:13px; fill:var(--paper); opacity:.5; flex-shrink:0;
  transition:fill .3s ease, opacity .3s ease, transform .3s ease;
}
.proj-row:hover .p-spark{ fill:var(--red); opacity:1; transform:scale(1.15) rotate(10deg); }

.proj-row .p-role{
  text-align:left; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.04em; text-transform:uppercase; opacity:.65;
  line-height:1.4; white-space:normal;
  transition:color .3s ease, opacity .3s ease;
}
.proj-row .p-year{
  text-align:right; font-family:var(--mono); font-size:.72rem; opacity:.5;
  transition:color .3s ease, opacity .3s ease;
}
.proj-row .p-num{
  font-family:var(--mono); font-size:.7rem; opacity:.45;
  transition:color .3s ease, opacity .3s ease;
}
.proj-row:hover .p-num,
.proj-row:hover .p-role,
.proj-row:hover .p-year{ color:var(--night-ink); opacity:.85; }

.proj-row .p-arrow{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid #6ea8ff; color:#6ea8ff;
  transition:color .3s ease, border-color .3s ease, transform .3s ease;
}
.proj-row .p-arrow svg{ width:15px; height:15px; }
.proj-row:hover .p-arrow{ color:var(--red); border-color:var(--red); transform:translateX(3px); }

.tw-note{
  display:flex; align-items:center; gap:14px;
  margin-top:32px; padding-top:26px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:rgba(247,241,225,.55);
}
.tw-note svg{ width:11px; height:11px; fill:var(--paper); opacity:.85; flex-shrink:0; }
.tw-note span:not(.tw-note-line){ white-space:nowrap; }
.tw-note-line{ flex:1; height:1px; background:rgba(247,241,225,.28); }

/* sticky preview */
.tw-col-preview{ position:sticky; top:130px; transition:transform .22s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.preview-frame{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:#0d0803; box-shadow:0 30px 60px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
.preview-frame.on{ opacity:1; pointer-events:auto; }

.preview-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:0; transition:opacity .55s ease, transform 8s ease;
  filter:saturate(1.1) contrast(1.05);
}
.preview-frame img.active{ opacity:1; transform:scale(1.045); }
.preview-frame::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(4,6,14,.7) 0%, transparent 100%);
}
.preview-frame::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 130px rgba(150,190,255,.4);
  mix-blend-mode:screen;
}
.preview-frame .cap{
  position:absolute; left:24px; bottom:20px; z-index:3;
  font-family:'Soria', var(--serif); color:var(--paper); font-size:1.15rem;
  opacity:0; transition:opacity .5s ease .1s;
}
.preview-frame .cap small{
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em;
  color:var(--red); text-transform:uppercase; margin-top:6px;
}
.preview-frame.on .cap{ opacity:1; }
.preview-frame .zoom-hint{
  position:absolute; right:22px; bottom:20px; z-index:3;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:rgba(247,241,225,.55);
  text-transform:uppercase; opacity:0; transition:opacity .5s ease .1s;
}
.preview-frame.on .zoom-hint{ opacity:1; }

@media (max-width:900px){
  .tw-layout{ grid-template-columns:1fr; gap:36px; padding:40px 6% 90px; }
  .tw-col-preview{ position:static; order:-1; }
  .tw-col-head{ grid-template-columns:minmax(0,1fr) minmax(100px,140px) 48px 0; gap:10px; }
  .proj-row{ grid-template-columns:minmax(0,1fr) minmax(100px,140px) 48px 34px; gap:10px; align-items:center; }
}

/* ---------- project panel (expanded case study) ---------- */
.proj-panel{
  position:fixed; inset:0; z-index:9991;
  display:flex; align-items:flex-start; justify-content:center;
  padding:60px 20px;
  background:rgba(5,3,3,.9);
  backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
  overflow-y:auto;
}
/* backdrop-filter:blur() over the full viewport is one of the most
   expensive things a mobile GPU can be asked to do every frame — and here
   it sits behind other blurred/animated layers too. On touch devices swap
   it for a slightly darker solid background: visually almost identical
   (you barely see the page behind a modal anyway) but effectively free. */
@media (hover:none), (pointer:coarse){
  .proj-panel{
    background:rgba(4,2,2,.97);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
.proj-panel.open{ opacity:1; pointer-events:auto; }

.pp-close{
  position:fixed; top:28px; right:36px; z-index:5;
  width:46px; height:46px; padding:0; margin:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1.05rem; color:var(--paper);
  background:rgba(14,8,7,.42);
  border:1.5px solid rgba(247,241,225,.26);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  cursor:none; opacity:0; isolation:isolate; overflow:visible;
  transition:opacity .3s ease .1s, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .5s ease;
}
.proj-panel.open .pp-close{ opacity:.85; }
/* ---- glow-button effect (per codepen.io/ol-ivier/pen/VYPzYJo) ---- */
.pp-close::before{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:-1;
  width:45%; height:45%; border-radius:50%;
  background:var(--accent, var(--red)); filter:blur(18px); opacity:0;
  transition:width .5s ease, height .5s ease, opacity .5s ease, filter .5s ease;
  pointer-events:none;
}
.pp-close:hover{
  opacity:1; background:rgba(var(--accent-rgb,226,59,34),.3); border-color:var(--accent, var(--red)); transform:scale(1.07);
  box-shadow:0 0 26px 4px rgba(var(--accent-rgb,226,59,34),.55), 0 0 50px 12px rgba(var(--accent-rgb,226,59,34),.3),
             inset 0 0 12px rgba(255,255,255,.12);
}
.pp-close:hover::before{ width:95%; height:95%; opacity:.75; filter:blur(14px); }

/* ---------- animated gradient border (frame around the panel) ---------- */
@property --pp-x0{ syntax:'<percentage>'; inherits:false; initial-value:6%; }
@property --pp-y0{ syntax:'<percentage>'; inherits:false; initial-value:10%; }
@property --pp-x1{ syntax:'<percentage>'; inherits:false; initial-value:92%; }
@property --pp-y1{ syntax:'<percentage>'; inherits:false; initial-value:88%; }
@property --pp-c0{ syntax:'<color>'; inherits:false; initial-value:hsla(9,74%,51%,1); }
@property --pp-c1{ syntax:'<color>'; inherits:false; initial-value:hsla(14,68%,67%,1); }
@property --pp-blur{ syntax:'<length>'; inherits:false; initial-value:0px; }

@keyframes pp-border-flow{
  0%{
    --pp-x0:6%; --pp-y0:10%; --pp-c0:hsla(9,74%,51%,1);
    --pp-x1:92%; --pp-y1:88%; --pp-c1:hsla(14,68%,67%,1);
    --pp-blur:0px;
  }
  50%{
    --pp-x0:94%; --pp-y0:90%; --pp-c0:hsla(38,55%,78%,1);
    --pp-x1:8%; --pp-y1:12%; --pp-c1:hsla(9,67%,33%,1);
    --pp-blur:16px;
  }
  100%{
    --pp-x0:6%; --pp-y0:10%; --pp-c0:hsla(9,74%,51%,1);
    --pp-x1:92%; --pp-y1:88%; --pp-c1:hsla(14,68%,67%,1);
    --pp-blur:0px;
  }
}

.pp-frame{
  position:relative; z-index:1;
  width:min(1080px, 100%); margin:0 auto;
  border-radius:20px; padding:2px; overflow:hidden;
  transform:translateY(50px) scale(.97); opacity:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.proj-panel.open .pp-frame{ transform:translateY(0) scale(1); opacity:1; }
.pp-frame::after{
  content:''; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at var(--pp-x0) var(--pp-y0), var(--pp-c0) 10%, transparent 45%),
    radial-gradient(circle at var(--pp-x1) var(--pp-y1), var(--pp-c1) 10%, transparent 45%);
  filter:blur(var(--pp-blur)) hue-rotate(var(--pp-hue, 0deg));
  animation:pp-border-flow 9s ease-in-out infinite;
  animation-play-state:paused;
  will-change:filter;
}
.proj-panel.open .pp-frame::after{ animation-play-state:running; }
@media (prefers-reduced-motion: reduce){
  .pp-frame::after{ animation:none; }
}
/* animating the `filter:blur()` amount every frame forces the browser to
   re-rasterize a huge (inset:-20%) blurred layer continuously — this is
   the priciest single effect in the panel. On touch devices, freeze it:
   the two glow blobs stay put (still visible, still colorful) but stop
   cycling, so there's nothing left to repaint once the open transition
   settles. */
@media (hover:none), (pointer:coarse){
  .pp-frame::after{ animation:none; filter:none; }
}

.proj-panel-inner{
  position:relative; z-index:1; overflow:hidden;
  background:
    linear-gradient(165deg,
      rgba(var(--accent-rgb,226,59,34),.13) 0%,
      rgba(var(--accent-rgb,226,59,34),.05) 45%,
      transparent 100%),
    color-mix(in srgb, rgb(var(--accent-rgb,226,59,34)) 6%, #04050d);
  border-radius:18px;
  padding:clamp(28px,4vw,56px);
  box-shadow:0 50px 100px rgba(0,0,0,.6);
}
.proj-panel-inner::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(700px 420px at 12% -8%, rgba(var(--accent-rgb,226,59,34),.22), transparent 60%),
    radial-gradient(600px 420px at 105% 115%, rgba(var(--accent-rgb,224,141,116),.14), transparent 65%);
}
.proj-panel-inner > *{ position:relative; z-index:1; }
.pp-rain-canvas{
  position:absolute !important; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; opacity:.62; mix-blend-mode:screen;
}
/* mix-blend-mode forces the browser to keep re-blending this canvas with
   every layer underneath it (including the backdrop-filter'd panel and
   the animated border glow) on every single canvas frame. Dropping the
   blend mode on touch — and compensating with slightly lower opacity —
   keeps the rain effect but lets the canvas repaint on its own layer. */
@media (hover:none), (pointer:coarse){
  .pp-rain-canvas{ mix-blend-mode:normal; opacity:.4; }
}
.proj-panel-inner .pp-spot{
  z-index:0;
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(420px 420px at var(--sx,50%) var(--sy,50%), rgba(var(--accent-rgb,226,59,34),.4), transparent 65%);
  opacity:0; transition:opacity .5s ease;
}
.proj-panel-inner:hover .pp-spot{ opacity:1; }

.pp-media-wrap{
  position:relative;
  margin-bottom:clamp(28px,4vw,44px);
  opacity:0; transform:scale(.98); transition:opacity .7s ease .1s, transform .7s ease .1s;
}
.proj-panel.open .pp-media-wrap{ opacity:1; transform:scale(1); }
.pp-media-wrap::before{
  content:''; position:absolute; inset:-22px; z-index:0; pointer-events:none;
  background:radial-gradient(60% 65% at 50% 50%, rgba(var(--accent-rgb,226,59,34),.45), transparent 72%);
  filter:blur(28px); opacity:.8;
}
.pp-media{
  position:relative;
  z-index:1;
  width:100%;
  max-width:100%;
  margin:0 auto;
  /* fallback until JS sets the real ratio — prevents collapse */
  aspect-ratio:16 / 9;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  background:#000;
  transition:max-width .35s ease, width .35s ease;
}
/* vertical / square → compact centered frame */
.pp-media.is-portrait{
  width:min(464px, 51vw); /* +22% vs 380px / 42vw */
  max-width:100%;
}
.pp-media-wrap.is-portrait{
  display:flex;
  justify-content:center;
}
@media (max-width:640px){
  .pp-media.is-portrait{ width:min(342px, 85vw); } /* +22% vs 280px */
}

.pp-video{
  width:100%;
  height:100%;
  display:block;
  background:#000;
  object-fit:contain;
}

/* ---------- video.js glass skin ---------- */
/* player fills .pp-media; aspect ratio lives on the container */
.pp-media .video-js,
.vjs-glass{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  padding-top:0 !important; /* kill fluid padding-top hack if present */
  background:#000;
  border-radius:14px;
  overflow:hidden !important;
}
.vjs-glass .vjs-tech,
.vjs-glass video{
  object-fit:contain !important;
  width:100% !important;
  height:100% !important;
  background:#000;
}
.vjs-glass .vjs-poster{
  background-size:contain !important;
  background-position:center center !important;
  background-color:#000;
  border-radius:14px;
}
.vjs-glass .vjs-control-bar{
  background:rgba(10,6,5,.48);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid rgba(247,241,225,.14);
  height:3.2em;
  left:0; right:0; width:100%;
  padding:0 10px;
  display:flex;
  align-items:center;
  border-radius:0 0 14px 14px;
  box-sizing:border-box;
}
.vjs-glass .vjs-button > .vjs-icon-placeholder:before{ line-height:2.1; }
.vjs-glass .vjs-play-control,
.vjs-glass .vjs-mute-control,
.vjs-glass .vjs-fullscreen-control,
.vjs-glass .vjs-picture-in-picture-control{
  color:var(--paper);
}
.vjs-glass .vjs-play-control:hover,
.vjs-glass .vjs-mute-control:hover,
.vjs-glass .vjs-fullscreen-control:hover{ color:var(--accent, var(--red)); }
.vjs-glass .vjs-progress-control{
  height:1em;
  align-items:center;
}
.vjs-glass .vjs-progress-holder{
  background:rgba(247,241,225,.2); border-radius:4px; height:.35em;
  margin:0 8px;
}
.vjs-glass .vjs-play-progress{ background:var(--accent, var(--red)); border-radius:4px; }
.vjs-glass .vjs-play-progress:before{
  color:var(--accent, var(--red));
  text-shadow:0 0 6px rgba(var(--accent-rgb,226,59,34),.7);
}
.vjs-glass .vjs-load-progress,
.vjs-glass .vjs-load-progress div{ background:rgba(247,241,225,.15); border-radius:4px; }
.vjs-glass .vjs-volume-level{ background:var(--accent, var(--red)); }
.vjs-glass .vjs-volume-bar{ background:rgba(247,241,225,.2); }
.vjs-glass .vjs-time-control{
  color:var(--paper); opacity:.75;
  font-family:var(--mono); font-size:.85em;
  line-height:3.2em; min-width:0; padding:0 4px;
}
.vjs-glass .vjs-remaining-time{ display:none; }
.vjs-glass .vjs-big-play-button{
  width:76px; height:76px; line-height:74px; border-radius:50%;
  background:rgba(10,6,5,.45);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1.5px solid rgba(247,241,225,.3);
  top:50%; left:50%; transform:translate(-50%,-50%); margin:0;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.vjs-glass .vjs-big-play-button:hover{
  background:rgba(var(--accent-rgb,226,59,34),.32);
  border-color:var(--accent, var(--red));
  transform:translate(-50%,-50%) scale(1.06);
}
.vjs-glass .vjs-big-play-button .vjs-icon-placeholder:before{ line-height:74px; }
.vjs-glass:hover .vjs-big-play-button,
.vjs-glass .vjs-big-play-button:focus{ background:rgba(10,6,5,.45); }
.vjs-glass .vjs-loading-spinner{ border-color:rgba(247,241,225,.7); }
.vjs-glass .vjs-slider:focus{ box-shadow:0 0 0 2px rgba(var(--accent-rgb,226,59,34),.5); }

/* keep rounded corners when video.js injects its wrapper */
.pp-media .video-js,
.pp-media .vjs-tech,
.pp-media .vjs-poster{ border-radius:inherit; }

.pp-reel{
  display:inline-block; margin-bottom:16px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); opacity:.6;
}

.pp-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  flex-wrap:wrap; margin-bottom:clamp(32px,4vw,50px);
  padding-bottom:28px; border-bottom:1px solid rgba(247,241,225,.14);
  opacity:0; transform:translateY(16px); transition:opacity .7s ease .2s, transform .7s ease .2s;
}
.proj-panel.open .pp-head{ opacity:1; transform:translateY(0); }
.pp-head-left{ max-width:600px; }
.pp-title{
  font-family:'Soria', var(--serif); font-weight:800; color:var(--paper);
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.08;
  margin-bottom:16px;
  padding-top:0.14em; /* room for gradient-text ascenders */
  overflow:visible;
}
.pp-desc{ font-size:1rem; line-height:1.7; color:var(--paper); opacity:.68; max-width:520px; }
.pp-post{
  display:block; margin-top:16px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); opacity:.45;
}
.pp-head-right{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  text-align:left; min-width:200px; padding-left:22px;
}
.pp-head-right::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1.5px;
  background:linear-gradient(180deg, var(--accent, var(--red)), rgba(var(--accent-rgb,226,59,34),0) 92%);
}
.pp-meta-block{ display:flex; flex-direction:column; gap:7px; }
.pp-meta-label{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); opacity:.42;
}
.pp-year{ font-family:'Soria', var(--serif); font-weight:700; color:var(--accent, var(--red)); font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.12; padding-top:0.08em; overflow:visible; }
.pp-role{
  font-family:var(--serif); font-size:1rem; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--paper); opacity:.92; max-width:240px; line-height:1.4;
}

.pp-gallery{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.6vw,18px); margin-bottom:clamp(36px,5vw,56px);
}
.pp-shot{
  position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  cursor:none; border:1.5px solid transparent;
  /* dimmed, low-alpha ring instead of the fully-saturated hues: quiet by default */
  background-image:
    linear-gradient(#050303,#050303),
    conic-gradient(from var(--ring-ang), rgba(var(--accent-rgb,226,59,34),.4), rgba(140,42,27,.32), rgba(var(--accent-rgb,224,141,116),.28), rgba(var(--accent-rgb,226,59,34),.4));
  background-origin:border-box; background-clip:padding-box, border-box;
  animation:ringSpin 6s linear infinite; animation-play-state:paused;
  opacity:0; transform:translateY(24px) scale(.96); filter:blur(6px);
  /* subtle accent glow sitting BEHIND the frame (box-shadow ignores overflow:hidden) */
  box-shadow:0 0 22px 2px rgba(var(--accent-rgb,226,59,34),.12), 0 0 44px 8px rgba(var(--accent-rgb,226,59,34),.06);
  transition:box-shadow .5s ease, border-color .5s ease;
}
.pp-shot:hover{
  background-image:
    linear-gradient(#050303,#050303),
    conic-gradient(from var(--ring-ang), rgba(var(--accent-rgb,226,59,34),.72), rgba(140,42,27,.6), rgba(var(--accent-rgb,224,141,116),.5), rgba(var(--accent-rgb,226,59,34),.72));
  box-shadow:0 0 26px 3px rgba(var(--accent-rgb,226,59,34),.2), 0 0 50px 10px rgba(var(--accent-rgb,226,59,34),.1);
}
.proj-panel.open .pp-shot{
  animation:ppShotIn .8s cubic-bezier(.2,.7,.2,1) forwards, ringSpin 6s linear infinite;
  animation-play-state:running;
}
/* the conic-gradient border-spin can't be composited on its own — the
   browser has to repaint the gradient itself every frame. With 6 shots
   spinning at once, indefinitely, for as long as the panel stays open,
   this is the other big mobile cost. Keep the entrance animation (the
   fade/slide-in look stays identical) but drop the infinite spin on touch. */
@media (hover:none), (pointer:coarse){
  .proj-panel.open .pp-shot{
    animation:ppShotIn .8s cubic-bezier(.2,.7,.2,1) forwards;
  }
}
.proj-panel.open .pp-shot:nth-child(1){ animation-delay:.05s; }
.proj-panel.open .pp-shot:nth-child(2){ animation-delay:.12s; }
.proj-panel.open .pp-shot:nth-child(3){ animation-delay:.19s; }
.proj-panel.open .pp-shot:nth-child(4){ animation-delay:.26s; }
.proj-panel.open .pp-shot:nth-child(5){ animation-delay:.33s; }
.proj-panel.open .pp-shot:nth-child(6){ animation-delay:.4s; }
@keyframes ppShotIn{ to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
.pp-shot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.08) contrast(1.03);
  transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.pp-shot:hover img{ transform:scale(1.09); filter:saturate(1.22) contrast(1.08); }
.pp-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(5,3,3,.6) 0%, transparent 42%);
  opacity:0; transition:opacity .4s ease;
}
.pp-shot:hover::after{ opacity:1; }
.pp-shot-num, .pp-shot-zoom{
  position:absolute; bottom:10px; z-index:2;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease;
}
.pp-shot-num{ left:12px; color:var(--paper); }
.pp-shot-zoom{ right:12px; color:rgba(247,241,225,.8); }
.pp-shot:hover .pp-shot-num, .pp-shot:hover .pp-shot-zoom{ opacity:.9; transform:translateY(0); }

.pp-love-card{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,3vw,40px);
  padding:20px clamp(20px,4vw,40px);
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb,226,59,34),.28);
  background:linear-gradient(180deg, rgba(24,10,9,.55), rgba(8,4,4,.68));
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 24px 55px rgba(0,0,0,.4), inset 0 0 40px rgba(var(--accent-rgb,226,59,34),.05);
  opacity:0; transform:translateY(14px); transition:opacity .8s ease .5s, transform .8s ease .5s;
}
.proj-panel.open .pp-love-card{ opacity:1; transform:translateY(0); }

/* subtle red glow sitting BEHIND the whole bar */
.pp-love-card::before{
  content:''; position:absolute; inset:-30px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 140% at 50% 50%, rgba(var(--accent-rgb,226,59,34),.22), transparent 72%);
  filter:blur(24px); opacity:.85;
}

.pp-social-group{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); }

/* ---- glow-link effect (per codepen.io/ol-ivier/pen/VYPzYJo) ---- */
.pp-social-item{
  position:relative; isolation:isolate; overflow:visible;
  display:flex; align-items:center; gap:10px;
  padding:6px 8px; border-radius:14px;
  color:var(--paper);
  transition:transform .4s ease;
}
.pp-social-item::before{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:-1;
  width:45%; height:55%; border-radius:50%;
  background:var(--accent, var(--red)); filter:blur(18px); opacity:0;
  transition:width .5s ease, height .5s ease, opacity .5s ease, filter .5s ease;
  pointer-events:none;
}
.pp-social-item:hover{ transform:translateY(-1px); }
.pp-social-item:hover::before{ width:100%; height:110%; opacity:.55; filter:blur(15px); }
.pp-social-item:hover .pp-social-icon{
  border-color:var(--accent, var(--red)); color:var(--accent, var(--red));
  box-shadow:0 0 22px 4px rgba(var(--accent-rgb,226,59,34),.6), 0 0 46px 12px rgba(var(--accent-rgb,226,59,34),.3),
             inset 0 0 10px rgba(255,255,255,.12);
}
.pp-social-item:hover .pp-social-text strong{ color:var(--accent, var(--red)); }

.pp-social-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(var(--accent-rgb,226,59,34),.45); color:rgba(247,241,225,.85);
  font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:0;
  transition:border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.pp-social-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }

.pp-social-text{ display:flex; flex-direction:column; gap:2px; font-family:var(--mono); white-space:nowrap; }
.pp-social-text strong{
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--paper); transition:color .35s ease;
}
.pp-social-text small{ font-size:.66rem; letter-spacing:.02em; color:var(--paper); opacity:.55; }

.pp-love-left{ justify-content:flex-start; }
.pp-love-right{ justify-content:flex-end; }

.pp-love-center{ display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; }
.pp-love-text{
  font-family:'Arial Narrow', 'Oswald', 'Helvetica Neue', Impact, sans-serif;
  font-weight:700; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent, var(--red)); opacity:1; white-space:nowrap;
  text-shadow:0 0 10px rgba(var(--accent-rgb,226,59,34),.55), 0 0 24px rgba(var(--accent-rgb,226,59,34),.3);
}
.pp-heart{
  background:none; border:none; padding:0; margin:0; cursor:none;
  width:32px; height:32px; color:var(--accent, var(--red));
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb,226,59,34),.55));
  transition:color .3s ease, filter .3s ease;
}
.pp-heart svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.pp-heart.liked{ color:var(--accent, var(--red)); filter:drop-shadow(0 0 12px rgba(var(--accent-rgb,226,59,34),.8)); }
.pp-heart.liked svg{ fill:var(--accent, var(--red)); }
.pp-heart.pop{ animation:heartPop .6s cubic-bezier(.17,.89,.32,1.4); }
@keyframes heartPop{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.5); }
  55%{ transform:scale(.82); }
  80%{ transform:scale(1.14); }
  100%{ transform:scale(1); }
}

@media (max-width:640px){
  .pp-love-card{ flex-direction:column; border-radius:22px; gap:22px; }
  .pp-social-group{ justify-content:center; flex-wrap:wrap; gap:16px; }
  .pp-social-text small{ display:none; }
}

/* ---------- animated sunset gradient text (title / year) ---------- */
@property --gy{ syntax:'<percentage>'; inherits:false; initial-value:50%; }
@keyframes ppGradientFlow{
  0%{ --gy:135%; }
  50%{ --gy:-25%; }
  100%{ --gy:135%; }
}
.gradient-text{
  /* no "transparent" stop: keeps every glyph fully opaque at all animation
     phases, so ascenders (like the "P" in Piscilago) never fade out */
  background-image:radial-gradient(circle at 50% var(--gy),
    var(--paper) 0%,
    var(--accent, var(--red)) 55%,
    var(--accent-deep, var(--red-deep)) 100%);
  background-clip:text; -webkit-background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
  animation:ppGradientFlow 7s ease-in-out infinite;
  animation-play-state:paused;
  /* prevent top/bottom glyph clipping with tight line-boxes */
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.proj-panel.open .gradient-text{ animation-play-state:running; }
.pp-title.gradient-text{ animation-duration:8s; }
.pp-year.gradient-text{ animation-duration:6s; animation-delay:-2s; }

@media (max-width:640px){
  .pp-gallery{ grid-template-columns:repeat(2,1fr); }
  .pp-head-right{ padding-left:18px; }
}

/* language toggle — sits next to "Proyectos" */
.lang-toggle{
  flex-shrink:0;
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:9px 16px; border-radius:999px; cursor:none;
  color:var(--paper);
  background:rgba(14,20,36,.42);
  border:1.5px solid rgba(247,241,225,.22);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  transition:border-color .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
  align-self:center;
  margin-top:0.35em; /* optical align with large title baseline */
}
.lang-toggle:hover{
  border-color:rgba(94,234,212,.55);
  color:#5eead4;
  box-shadow:0 0 20px rgba(94,234,212,.25);
}
@media (max-width:860px){
  .lang-toggle{ padding:8px 12px; font-size:.6rem; margin-top:0.2em; }
}

/* credits accordion in panels — glow style (codepen.io/ol-ivier/pen/VYPzYJo) */
.pp-credits{
  margin: -8px 0 clamp(28px,4vw,40px);
  opacity:0; transform:translateY(12px);
  transition:opacity .7s ease .35s, transform .7s ease .35s;
}
.proj-panel.open .pp-credits{ opacity:1; transform:translateY(0); }

.pp-credits-toggle{
  position:relative; isolation:isolate; overflow:visible;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); cursor:none;
  background:rgba(14,20,36,.35);
  border:1.5px solid rgba(var(--accent-rgb,226,59,34),.35);
  border-radius:999px;
  padding:8px 16px 8px 12px;
  margin:0 0 14px;
  transition:border-color .4s ease, box-shadow .4s ease, color .35s ease, transform .35s ease;
}
.pp-credits-toggle::before{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:-1;
  width:45%; height:55%; border-radius:50%;
  background:var(--accent, var(--red)); filter:blur(18px); opacity:0;
  transition:width .5s ease, height .5s ease, opacity .5s ease, filter .5s ease;
  pointer-events:none;
}
.pp-credits-toggle:hover,
.pp-credits-toggle[aria-expanded="true"]{
  border-color:var(--accent, var(--red));
  color:var(--accent, var(--red));
  box-shadow:
    0 0 22px 4px rgba(var(--accent-rgb,226,59,34),.45),
    0 0 46px 10px rgba(var(--accent-rgb,226,59,34),.22),
    inset 0 0 10px rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.pp-credits-toggle:hover::before,
.pp-credits-toggle[aria-expanded="true"]::before{
  width:110%; height:120%; opacity:.55; filter:blur(15px);
}
.pp-credits-spark{
  width:14px; height:14px; fill:currentColor; opacity:.9; flex-shrink:0;
  transition:fill .3s ease, opacity .3s ease, transform .35s ease;
}
.pp-credits-toggle:hover .pp-credits-spark,
.pp-credits-toggle[aria-expanded="true"] .pp-credits-spark{
  opacity:1; transform:scale(1.12) rotate(10deg);
}
.pp-credits-toggle .pp-credits-chevron{
  display:inline-block; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .3s ease;
  margin-top:-3px; opacity:.7; margin-left:2px;
}
.pp-credits-toggle[aria-expanded="true"] .pp-credits-chevron{
  transform:rotate(-135deg); margin-top:2px;
}

.pp-credits-list{
  display:none; flex-direction:column; gap:0;
  padding:6px 4px 10px;
  border-radius:14px;
  border:1px solid rgba(247,241,225,.1);
  background:
    linear-gradient(165deg, rgba(var(--accent-rgb,226,59,34),.08), transparent 55%),
    rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.pp-credits-list.open{ display:flex; }

.pp-credit-row{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:rgba(247,241,225,.78); line-height:1.45;
  padding:9px 14px;
  border-bottom:1px solid rgba(247,241,225,.06);
  opacity:0;
  transform:translateY(8px);
}
.pp-credit-row:last-child{ border-bottom:none; }
.pp-credits-list.open .pp-credit-row{
  animation:creditRowIn .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.pp-credits-list.open .pp-credit-row:nth-child(1){ animation-delay:.03s; }
.pp-credits-list.open .pp-credit-row:nth-child(2){ animation-delay:.06s; }
.pp-credits-list.open .pp-credit-row:nth-child(3){ animation-delay:.09s; }
.pp-credits-list.open .pp-credit-row:nth-child(4){ animation-delay:.12s; }
.pp-credits-list.open .pp-credit-row:nth-child(5){ animation-delay:.15s; }
.pp-credits-list.open .pp-credit-row:nth-child(6){ animation-delay:.18s; }
.pp-credits-list.open .pp-credit-row:nth-child(7){ animation-delay:.21s; }
.pp-credits-list.open .pp-credit-row:nth-child(8){ animation-delay:.24s; }
.pp-credits-list.open .pp-credit-row:nth-child(9){ animation-delay:.27s; }
.pp-credits-list.open .pp-credit-row:nth-child(10){ animation-delay:.3s; }
.pp-credits-list.open .pp-credit-row:nth-child(n+11){ animation-delay:.33s; }
@keyframes creditRowIn{
  to{ opacity:1; transform:translateY(0); }
}
.pp-credit-row a{
  color:var(--accent, var(--red));
  text-decoration:none;
  transition:opacity .25s ease, text-shadow .25s ease;
}
.pp-credit-row a:hover{
  opacity:.85;
  text-shadow:0 0 12px rgba(var(--accent-rgb,226,59,34),.55);
}
.pp-credits-empty{
  font-family:var(--mono); font-size:.68rem; opacity:.4;
  letter-spacing:.04em; padding:10px 14px;
}

/* easter egg targets — look identical, still clickable */
.easter-copy{
  cursor:none;
  display:inline;
}
#heroSpark{ cursor:none; }


.easter-note-star{ cursor:none; }


/* ---------- skeleton loading ---------- */
.proj-skeleton{ display:flex; flex-direction:column; gap:0; }
.skel-row{
  height:72px; margin:8px 0;
  border-radius:12px;
  background:linear-gradient(
    90deg,
    rgba(247,241,225,.04) 0%,
    rgba(247,241,225,.10) 45%,
    rgba(247,241,225,.04) 90%
  );
  background-size:200% 100%;
  animation:skelShimmer 1.2s ease-in-out infinite;
  border-bottom:1px solid rgba(247,241,225,.06);
}
@keyframes skelShimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}
body.is-ready .proj-skeleton{ display:none; }
.proj-skeleton.is-error{
  display:flex; align-items:center; min-height:72px; margin:8px 0;
}
.tw-load-error{
  margin:0; padding:18px 8px;
  font-family:inherit; font-size:14px; letter-spacing:.04em;
  color:rgba(247,241,225,.55);
}

/* ---------- scroll reveal on project rows ---------- */
.proj-row{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .55s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1),
    border-color .3s ease;
}
.proj-row.is-visible{
  opacity:1;
  transform:translateY(0);
}
.proj-row.is-hidden{
  display:none !important;
  opacity:0;
  transform:none;
}

/* ---------- micro-interactions (press / click) ---------- */
.proj-row:active{
  transform:translateY(0) scale(.992);
}
.proj-row.is-visible:active{
  transform:translateY(0) scale(.992);
}
.proj-row.clicked{
  animation:rowClickFlash .45s ease;
}
@keyframes rowClickFlash{
  0%{ filter:brightness(1); }
  35%{ filter:brightness(1.18); }
  100%{ filter:brightness(1); }
}
.filter-pill{
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease !important;
}
.filter-pill:active{
  transform:scale(.94);
}
.lang-toggle:active{
  transform:scale(.95);
}
.pp-credits-toggle:active{
  transform:translateY(0) scale(.97);
}
.pp-close:active{
  transform:scale(.9);
}
.pp-shot:active img{
  transform:scale(1.02);
}

/* preview img fade-in when lazy-loaded */
.preview-frame img{
  transition:opacity .45s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.preview-frame img:not([src]),
.preview-frame img[data-src]:not([src]){
  opacity:0;
}


/* ═══════════════════════════════════════════════
   Responsive breakpoints — tablet / mobile
   ═══════════════════════════════════════════════ */

@media (max-width:900px){
  .tw-col-preview{ display:none; } /* hover preview is desktop-only */
  .tw-layout{ grid-template-columns:1fr; gap:24px; padding:28px 6% 90px; }
  .tw-hero{ padding:132px 6% 12px; }
}

@media (max-width:860px){
  nav{
    padding:12px 16px;
    padding-top:max(12px, env(safe-area-inset-top));
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .nav-toggle{ display:flex; cursor:pointer; }
  nav ul{
    display:none;
    position:fixed;
    top:calc(64px + env(safe-area-inset-top, 0px));
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    flex-direction:column;
    gap:8px;
    padding:14px;
    border-radius:18px;
    background:rgba(8,12,22,.94);
    border:1.5px solid rgba(247,241,225,.16);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 24px 50px rgba(0,0,0,.45);
    z-index:501;
  }
  nav.is-open ul{ display:flex; }
  nav ul a{
    width:100%;
    min-height:44px;
    padding:12px 18px;
    font-size:.68rem;
    justify-content:center;
  }
  body.nav-open{ overflow:hidden; }
  .filter-pill, .lang-toggle, .pp-credits-toggle, .pp-close, .nav-toggle{
    cursor:pointer;
  }
}

@media (max-width:640px){
  .tw-hero{ padding:118px 5% 8px; }
  .tw-hero p{ font-size:.92rem; }
  .tw-layout{ padding:18px 5% 72px; gap:18px; }

  .tw-col-head{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
    padding-bottom:12px;
  }
  .tw-role-head{
    order:-1; width:100%;
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:10px;
  }
  .filter-pills{ gap:6px; }
  .filter-pill{
    min-height:36px; padding:8px 13px; font-size:.62rem; cursor:pointer;
  }

  .proj-row{
    grid-template-columns:minmax(0,1fr) 48px 40px;
    gap:8px;
    padding:16px 2px;
    min-height:56px;
  }
  .proj-row .p-role{ display:none; }
  .proj-row .p-name{ font-size:clamp(1.28rem, 6.4vw, 1.8rem); }
  .proj-row .p-arrow{ width:40px; height:40px; }
  .proj-row .p-num{ font-size:.62rem; }
  .proj-row:hover .p-name{ transform:none; }

  .tw-note{ gap:10px; margin-top:22px; padding-top:18px; font-size:.64rem; }
  .tw-note span:not(.tw-note-line){ white-space:normal; }

  .proj-panel{
    padding:12px 10px 28px;
    padding-top:max(12px, env(safe-area-inset-top));
    padding-bottom:max(28px, env(safe-area-inset-bottom));
  }
  .pp-close{
    top:max(12px, env(safe-area-inset-top));
    right:max(12px, env(safe-area-inset-right));
    width:44px; height:44px;
    cursor:pointer;
  }
  .pp-head{ gap:18px; }
  .pp-head-right{ min-width:0; padding-left:16px; }
  .pp-title{ font-size:clamp(2rem, 11vw, 3.2rem); }
  .pp-desc{ font-size:.95rem; }
  .pp-credits-toggle{ min-height:40px; cursor:pointer; }
  .pp-gallery{ grid-template-columns:repeat(2,1fr); gap:8px; }
}

@media (max-width:480px){
  .tw-hero-title-row{ gap:10px; }
  .lang-toggle{ padding:8px 12px; min-height:36px; }
  .proj-row .p-num{ display:none; }
  .pp-gallery{ grid-template-columns:1fr 1fr; }
  .pp-love-card{ padding:18px 14px; }
  .pp-social-item{ min-height:44px; }
}

@media (hover:none), (pointer:coarse){
  .nav-toggle, .filter-pill, .lang-toggle, .pp-close, .pp-credits-toggle,
  .proj-row, a{ cursor:pointer; }
  .proj-row::after{ display:none; } /* skip spinning hover ring on touch */
}

/* ═══════════════════════════════════════════════
   Site footer — one glass panel, brand + links
   ═══════════════════════════════════════════════ */
.pf-footer{
  position:relative;
  isolation:isolate;
  padding:48px 8% 40px;
  padding-bottom:max(40px, env(safe-area-inset-bottom));
  font-family:var(--mono);
}
.pf-footer::before{
  content:''; position:absolute; inset:-100px 0 0; z-index:-2; pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,7,15,0) 0%,
    rgba(5,7,15,.45) 40%,
    var(--night-3) 100%
  );
}
.pf-backdrop{
  position:absolute; inset:-100px 0 0; z-index:-1; pointer-events:none;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,1) 58%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,1) 58%);
}
@media (hover:none), (pointer:coarse){
  .pf-backdrop{ backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); }
}

.pf-panel{
  position:relative; z-index:1;
  display:flex; align-items:stretch; justify-content:space-between; gap:clamp(28px,5vw,56px);
  padding:clamp(24px,3.2vw,36px) clamp(24px,3.6vw,40px);
  border-radius:24px;
  background:
    linear-gradient(165deg, rgba(247,241,225,.06) 0%, rgba(247,241,225,.02) 42%, transparent 100%),
    rgba(14,20,36,.42);
  border:1.5px solid rgba(247,241,225,.16);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(247,241,225,.12),
    0 18px 48px rgba(0,0,0,.28);
}
.pf-panel::after{
  content:''; position:absolute; left:10%; right:10%; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(94,234,212,.28), transparent);
  pointer-events:none;
}

.pf-col{ position:relative; z-index:1; }
.pf-col-brand{ flex:1 1 240px; max-width:380px; }
.pf-brand{
  position:relative; display:inline-block;
  font-family:'Soria', var(--serif); font-weight:800;
  font-size:clamp(1.6rem,3vw,2.1rem); color:var(--paper);
  margin-bottom:12px;
}
.pf-brand-spark{
  position:absolute; top:.12em; right:-1.05em;
  width:.42em; height:.42em; fill:#5eead4;
  animation:sparkTwinkle 2.8s ease-in-out infinite;
}
.pf-madewith{
  font-size:.74rem; letter-spacing:.04em; color:var(--paper); opacity:.75;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-bottom:16px;
}
.pf-heart{ color:var(--red); font-size:.85em; }

.pf-social{ display:flex; gap:10px; margin-bottom:20px; }
.pf-social-link{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(247,241,225,.75);
  background:rgba(247,241,225,.06);
  border:1.5px solid rgba(247,241,225,.16);
  transition:color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pf-social-link svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.pf-social-link:hover{
  color:var(--paper); border-color:var(--red); background:rgba(226,59,34,.16);
  transform:translateY(-2px);
  box-shadow:0 0 18px 2px rgba(226,59,34,.3);
}

.pf-copy{ font-size:.68rem; letter-spacing:.08em; opacity:.55; color:var(--paper); margin-bottom:4px; }
.pf-shot-on{ font-size:.68rem; letter-spacing:.08em; opacity:.45; color:var(--paper); }

.pf-col-nav{
  display:flex; flex-direction:column; justify-content:center; gap:13px;
  min-width:180px;
  padding-left:clamp(22px,3vw,36px);
  border-left:1px solid rgba(247,241,225,.12);
}
.pf-link{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(247,241,225,.72);
  transition:color .25s ease, transform .25s ease, opacity .25s ease;
  width:fit-content;
  display:inline-flex; align-items:center; gap:8px;
}
.pf-link:hover{ color:var(--paper); transform:translateX(4px); }
.pf-link-discord{ color:rgba(247,241,225,.88); }
.pf-discord-ico{
  width:15px; height:15px; fill:currentColor; flex-shrink:0; opacity:.85;
}

@media (max-width:640px){
  .pf-footer{ padding:36px 5% 28px; }
  .pf-panel{
    flex-direction:column; gap:22px;
    padding:22px 20px 24px;
    border-radius:20px;
  }
  .pf-col-brand{ max-width:none; }
  .pf-col-nav{
    flex-direction:row; flex-wrap:wrap; gap:10px 18px;
    padding-left:0; padding-top:18px;
    border-left:none;
    border-top:1px solid rgba(247,241,225,.12);
    min-width:0;
  }
  .pf-link{ min-height:36px; }
  .pf-link:hover{ transform:none; }
}
@media (max-width:480px){
  .pf-footer{ padding:28px 5% 24px; }
  .pf-social-link{ width:44px; height:44px; }
}
@media (prefers-reduced-motion: reduce){
  .pf-brand-spark{ animation:none; }
  .pf-social-link, .pf-link{ transition:none; }
}