/* Etpaar Creative — secondary-page styles. Loaded after site.css on non-home pages. */

/* page hero — every inner page opens with one rehearsed entrance */
.phero{max-width:var(--shell);margin:0 auto;padding:clamp(160px,22vh,230px) var(--gutter) clamp(36px,5vh,60px);}
.peyebrow,.phero h1,.phero .pintro,
.proj-hero .peyebrow,.proj-hero h1,.proj-hero .ptag,.proj-hero .chips{
  opacity:1;}
html.js-ready body:not(.calm) :is(.peyebrow,.phero .pintro,.proj-hero .peyebrow,.proj-hero .ptag,.proj-hero .chips){
  opacity:0;animation:pgin .9s var(--e-expo) forwards;}
.peyebrow{animation-delay:.35s;}
.phero h1,.proj-hero h1{opacity:1;clip-path:none;transform:none;}
html.js-ready body:not(.calm) :is(.phero h1,.proj-hero h1):not(.type-entry){animation:pginh 1.2s var(--e-expo) .45s forwards;}
.phero .pintro,.proj-hero .ptag{animation-delay:.72s;}
.proj-hero .chips{animation-delay:.88s;}
@keyframes pgin{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
/* the headline is letterpressed in: it rises out of its own baseline clip
   with a slight skew that irons flat as it lands (load-time only, so the
   clipped state never has to intersect an observer) */
@keyframes pginh{
  from{opacity:1;clip-path:inset(-2% 0 98% 0);transform:translateY(0.42em) skewY(1.6deg);}
  to{opacity:1;clip-path:inset(-2% 0 -8% 0);transform:none;}}
.peyebrow .prule{transform:scaleX(1);transform-origin:left;}
html.js-ready body:not(.calm) .peyebrow .prule{transform:scaleX(0);animation:pruled .9s var(--e-expo) .5s forwards;}
@keyframes pruled{to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){
  .peyebrow,.phero h1,.phero .pintro,.proj-hero .peyebrow,.proj-hero h1,.proj-hero .ptag,.proj-hero .chips{
    animation:none;opacity:1;clip-path:none;transform:none;}
  .peyebrow .prule{animation:none;transform:scaleX(1);}
}
.peyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap;}
.peyebrow .num{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;color:var(--zone);}
.peyebrow .prule{width:44px;height:1px;background:var(--warm-gray);}
.peyebrow .lab{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm-gray);}
.phero h1{font-family:var(--ff-display);font-optical-sizing:auto;font-weight:400;font-variation-settings:var(--fx-d);font-size:clamp(2.8rem,8vw,6rem);line-height:0.98;letter-spacing:-0.03em;}
.phero h1 em{font-style:italic;color:var(--zone);font-variation-settings:var(--fx-i);}
.phero .pintro{margin-top:26px;font-size:1.3rem;line-height:1.55;color:var(--soft-ink);max-width:56ch;}

/* nav active state */
.nl a.active{color:var(--zone);} .nl a.active::after{transform:scaleX(1);background:var(--zone);}

/* filters */
.filters{display:flex;gap:9px;flex-wrap:wrap;max-width:var(--shell);margin:0 auto 40px;padding:0 var(--gutter);}
.filter{font-family:var(--ff-mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--soft-ink);border:1px solid rgba(20,18,31,0.22);border-radius:999px;padding:8px 15px;background:transparent;cursor:pointer;transition:background .35s var(--e-quart),color .35s var(--e-quart),border-color .35s var(--e-quart);}
.filter:hover{border-color:var(--ink);}
.filter.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* work grid */
.wkgrid{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter) clamp(80px,12vh,150px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);}
@media(max-width:820px){.wkgrid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.wkgrid{grid-template-columns:1fr;}}
.wkcard{text-decoration:none;color:inherit;display:block;}
/* The card grid needs one uniform ratio; 16:9 matches seven of nine emitted heroes and the other two within 0.06%. */
.wkcard .wkimg{position:relative;overflow:hidden;border-radius:6px;margin-bottom:14px;box-shadow:0 24px 46px -30px rgba(60,30,10,0.42);}
.wkcard .wkimg img{width:100%;height:auto;object-fit:contain;filter:sepia(0.22) saturate(0.92) contrast(1.05);transition:transform .9s var(--e-expo);}
.wkcard:hover .wkimg img{transform:none;}
.wkcard .wtag{position:absolute;left:12px;top:12px;background:rgba(20,18,31,0.72);color:var(--paper);border-radius:999px;padding:5px 11px;backdrop-filter:blur(4px);font-family:var(--ff-mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;}
.wkcard h3{font-family:var(--ff-display);font-weight:500;font-variation-settings:var(--fx-d);font-size:1.5rem;letter-spacing:-0.02em;margin-bottom:4px;}
.wkcard .cmeta{font-family:var(--ff-mono);font-size:0.625rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--warm-gray);}
.wkcard.hide{display:none;}

/* services detail rows */
.svc{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter) clamp(40px,6vh,80px);}
.svc-row{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(28px,5vw,72px);padding:clamp(48px,8vh,88px) 0;border-top:1px solid rgba(20,18,31,0.14);align-items:start;}
@media(max-width:820px){.svc-row{grid-template-columns:1fr;gap:18px;}}
.svc-row .snum{font-family:var(--ff-mono);font-size:1.5rem;color:var(--sc);font-weight:500;border-top:2px solid var(--sc);padding-top:14px;display:inline-block;}
.svc-row h2{font-family:var(--ff-display);font-weight:400;font-variation-settings:var(--fx-d);font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-0.02em;margin:10px 0 0;}
.svc-row .sdesc{font-size:1.2rem;line-height:1.6;color:var(--soft-ink);margin-bottom:22px;max-width:54ch;}
.svc-row ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.svc-row li{font-family:var(--ff-mono);font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--soft-ink);border:1px solid rgba(20,18,31,0.2);border-radius:999px;padding:6px 12px;}

/* about / studio prose */
.about{max-width:720px;margin:0 auto;padding:clamp(20px,4vh,50px) var(--gutter) clamp(60px,9vh,110px);}
.about p{font-size:1.32rem;line-height:1.68;color:var(--soft-ink);margin-bottom:26px;}
.about p b{color:var(--ink);font-weight:600;}
.about h2{font-family:var(--ff-display);font-weight:400;font-variation-settings:var(--fx-d);font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-0.02em;margin:34px 0 16px;}
.about .abq{font-family:var(--ff-display);font-style:italic;font-variation-settings:var(--fx-i);font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.3;color:var(--ink);margin:38px 0;}

/* contact */
.contact-wrap{max-width:980px;margin:0 auto;padding:0 var(--gutter) clamp(80px,12vh,150px);display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(30px,5vw,70px);align-items:start;}
@media(max-width:760px){.contact-wrap{grid-template-columns:1fr;}}
.form label{display:block;font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--warm-gray);margin:0 0 7px 2px;}
.form input,.form textarea{width:100%;font-family:var(--ff-body);font-size:1.05rem;color:var(--ink);background:rgba(255,255,255,0.45);border:1px solid rgba(20,18,31,0.18);border-radius:8px;padding:12px 14px;margin-bottom:18px;transition:border-color .35s var(--e-quart),background .35s var(--e-quart);}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--zone);background:#fff;}
.form textarea{min-height:130px;resize:vertical;}
.form button{font-family:var(--ff-body);font-size:1.05rem;background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:14px 32px;cursor:pointer;transition:background .4s var(--e-quart),transform .5s var(--e-expo);}
.form button:hover{background:var(--vermilion);transform:translateY(-2px);}
.cinfo h3{font-family:var(--ff-display);font-weight:500;font-variation-settings:var(--fx-d);font-size:1.4rem;margin:0 0 8px;}
.cinfo p{color:var(--soft-ink);line-height:1.6;margin-bottom:20px;}
.cinfo a{color:var(--zone);text-decoration:none;border-bottom:1px solid currentColor;}
.cinfo .cmono{font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--warm-gray);}

/* page CTA band */
/* overflow-x:clip contains the translated .cta-line kinetic type, which
   otherwise paints a few px past the viewport on phones. */
.page-cta{text-align:center;padding:clamp(84px,15vh,190px) var(--gutter) clamp(80px,13vh,150px);max-width:1040px;margin:0 auto;overflow-x:clip;}
.page-cta .peyebrow{margin-bottom:26px;}
.page-cta h2{font-family:var(--ff-display);font-weight:500;font-variation-settings:var(--fx-d);font-size:clamp(2.7rem,7.6vw,5.4rem);line-height:1.02;letter-spacing:-0.03em;margin-bottom:40px;text-wrap:balance;}
.page-cta h2 em{font-style:italic;color:var(--zone);font-variation-settings:var(--fx-i);padding-right:0.12em;}
.page-cta .bigcta{font-size:1.22rem;padding:19px 46px;}
.page-cta .bigcta:hover{background:var(--zone);}

/* project prev/next — "more work" */
.proj-nav .sechead{margin-bottom:26px;}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,44px);}
@media(max-width:640px){.pnav{grid-template-columns:1fr;gap:26px;}}
.pnav-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:13px;}
.pnav-card.prev{text-align:left;align-items:flex-start;}
.pnav-card.next{text-align:right;align-items:flex-end;}
.pnav-dir{font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--zone);}
.pnav-thumb{width:100%;overflow:hidden;border-radius:8px;box-shadow:0 22px 44px -32px rgba(60,30,10,0.42);}
.pnav-thumb img{width:100%;height:auto;object-fit:contain;filter:sepia(0.2) saturate(0.92) contrast(1.04);transition:transform .9s var(--e-expo);}
.pnav-card:hover .pnav-thumb img{transform:none;}
.pnav-name{font-weight:500;font-variation-settings:var(--fx-d);font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-0.02em;transition:color .35s var(--e-quart);}
.pnav-card:hover .pnav-name{color:var(--zone);}

/* project detail page */
.proj-hero{max-width:var(--shell);margin:0 auto;padding:clamp(160px,22vh,230px) var(--gutter) clamp(24px,4vh,44px);}
.proj-hero h1{font-family:var(--ff-display);font-optical-sizing:auto;font-weight:400;font-variation-settings:var(--fx-d);font-size:clamp(2.8rem,8vw,6rem);line-height:0.98;letter-spacing:-0.03em;}
.proj-hero .ptag{font-family:var(--ff-display);font-style:italic;font-variation-settings:var(--fx-i);font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.25;color:var(--soft-ink);margin-top:16px;max-width:26ch;}
.proj-hero .chips{margin-top:22px;}
.proj-banner{max-width:1400px;margin:clamp(6px,1.5vh,18px) auto clamp(12px,2.5vh,36px);padding:0 var(--gutter);}
.proj-banner .irx{display:block;border-radius:8px;box-shadow:0 34px 66px -36px rgba(60,30,10,0.42);}
/* height:auto is load-bearing. The intrinsic width/height attributes (added for CLS)
   act as presentational hints — width:100% overrides the width hint, but without
   height:auto the HEIGHT hint survives as a definite px height, aspect-ratio is
   ignored, and object-fit:cover then crops the 16:9 hero into a near-square box
   (measured: a 1272x715 plate became 1272x1350, losing ~47% of its width). The
   heroes are already 16:9, so let the image's own ratio stand. */
.proj-banner img{width:100%;height:auto;object-fit:contain;border-radius:8px;filter:none;display:block;}
.proj-sec{max-width:var(--shell);margin:0 auto;padding:clamp(38px,6vh,72px) var(--gutter);}
.proj-sec .sechead{margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid rgba(20,18,31,0.14);}
.proj-sec .sechead .mono{color:var(--zone);letter-spacing:0.18em;}
.proj-sec .lede+.lede{margin-top:16px;}
.palette{display:flex;flex-wrap:wrap;gap:14px;}
.swatch{width:118px;}
.swatch .schip{height:72px;border-radius:8px;border:1px solid rgba(20,18,31,0.08);margin-bottom:9px;}
.swatch .sname{font-size:0.95rem;color:var(--ink);}
.swatch .shex{color:var(--warm-gray);margin-top:1px;}
.gallery{columns:3 300px;column-gap:clamp(14px,1.6vw,22px);}
@media(max-width:620px){.gallery{columns:2 150px;column-gap:14px;}}
.gallery img{width:100%;height:auto;display:block;border-radius:6px;margin-bottom:clamp(14px,1.6vw,22px);break-inside:avoid;filter:none;box-shadow:0 22px 44px -32px rgba(60,30,10,0.42);
  transition:opacity .85s var(--e-expo) var(--gd,0ms),transform .5s var(--e-expo),box-shadow .5s var(--e-quart);}
.gallery img:hover{transform:none;box-shadow:0 30px 56px -30px rgba(60,30,10,0.55);}
.swatch .schip{transition:transform .5s var(--e-expo),box-shadow .5s var(--e-quart);}
.swatch:hover .schip{transform:translateY(-4px);box-shadow:0 16px 28px -16px rgba(60,30,10,0.35);}
.svc-row li{transition:border-color .35s var(--e-quart),color .35s var(--e-quart),transform .4s var(--e-expo);}
.svc-row li:hover{border-color:var(--sc,var(--ink));color:var(--ink);transform:translateY(-2px);}
/* reveal (fade, staggered) + hover lift share the element: reveal is
   fade-only here so the lift never inherits the stagger delay */
.wkcard.gr,.gallery img.gr{transform:none;}
.wkcard{transition:opacity .85s var(--e-expo) var(--gd,0ms),transform .55s var(--e-expo);}
.wkcard:hover{transform:translateY(-6px);}
.cinfo a{transition:color .3s var(--e-quart);}
.cinfo a:hover{color:var(--vermilion);}

/* journal */
.journal{max-width:820px;margin:0 auto;padding:clamp(20px,4vh,50px) var(--gutter) clamp(60px,9vh,110px);}
.jentry{display:block;text-decoration:none;color:inherit;padding:30px 0;border-top:1px solid rgba(20,18,31,0.12);transition:padding-left .45s var(--e-expo);}
.jentry:hover{padding-left:12px;}
.jentry .jmeta{font-family:var(--ff-mono);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--zone);margin-bottom:9px;}
.jentry h2{font-family:var(--ff-display);font-weight:400;font-variation-settings:var(--fx-d);font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-0.02em;margin-bottom:8px;transition:color .35s var(--e-quart);}
.jentry:hover h2{color:var(--zone);}
.jentry p{font-size:1.1rem;line-height:1.55;color:var(--soft-ink);max-width:60ch;}
.jsoon{font-family:var(--ff-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--warm-gray);text-align:center;padding:44px 0;border-top:1px solid rgba(20,18,31,0.12);}

/* ===== press-pass entrances on inner pages =====
   project gallery plates live inside .irx clip frames: the frame carries the
   radius/shadow/hover-lift so the roller reveal and the hover never fight
   (and pages.css loads after site.css, so the entrance transitions are
   restated here to win the cascade over .gallery img). */
/* the plate is the column item, so IT must not break across a column —
   without this a tall figure splits at a column boundary and the image is
   sliced in half mid-gallery. */
.pxgal figure.irx{margin:0 0 clamp(14px,1.6vw,22px);border-radius:6px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  box-shadow:0 22px 44px -32px rgba(60,30,10,0.42);
  transition:transform .5s var(--e-expo),box-shadow .5s var(--e-quart);}
.pxgal figure.irx:hover{transform:translateY(-4px);box-shadow:0 30px 56px -30px rgba(60,30,10,0.55);}
.pxgal .irx img,.proj-banner .irx img,.pnav-thumb.irx img{opacity:1;transform:none;
  margin:0;box-shadow:none;border-radius:0;
  transition:opacity .8s var(--e-quart) var(--gd,0s),transform 1s var(--e-expo) var(--gd,0s);}
html.js-ready body:not(.calm) :is(.pxgal .irx:not(.go) img,.proj-banner .irx:not(.go) img,.pnav-thumb.irx:not(.go) img){opacity:0;transform:translateY(18px) scale(1.03);}
.irx.go img{opacity:1;transform:none;}
.irx.done img{transition:transform .7s var(--e-quart);}
.pxgal .irx.done img:hover{transform:none;}
@media (prefers-reduced-motion: reduce){
  .irx img{opacity:1 !important;transform:none !important;transition:none !important;}
  .irx::after{display:none !important;}
  .mrx .mri{transform:none !important;transition:none !important;}
}

/* Live-site CTA on case studies (projects with a `link` field) */
.pxlive{display:inline-flex;margin-top:clamp(22px,3vw,36px)}
.pxm-live{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.pxm-live:hover{opacity:.75}