/* /portfolio/ only: everything here is scoped to this page. Header, footer, tokens and the hornero's keyframes come from style.css. */
.pf-page{position:relative}
nav a[aria-current=page],.footer-links a[aria-current=page]{color:var(--cyan)}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The sky: one canvas a little taller than the screen rides along the page (currents.js); the horneros sit above it. */
.pf-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pf-sky canvas{position:absolute;left:0;top:0;width:100%;height:0;will-change:transform}
.pf-bird{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;transform:translate(46px,-120px) rotate(12deg);transition:transform 1.3s cubic-bezier(.22,.65,.3,1),opacity .55s}
.pf-bird svg{display:block;width:100%;height:auto;overflow:visible}
/* Drawn small, the footer's hairlines would vanish: keep them about a pixel wide. */
.pf-bird path{stroke-width:var(--stroke,.6)}
.pf-bird .perch-wing{transform-origin:45px 38px;transform:rotate(-35deg);transition:transform .5s}
.pf-bird.is-landed{opacity:1;transform:none}
.pf-bird.is-landed .perch-wing{transform:rotate(0deg)}
.pf-bird.is-flying .perch-wing{animation:perch-flap .22s ease-in-out 5 alternate}
.pf-bird.is-visible.is-landed .perch-current,.pf-bird.is-visible.is-flying .perch-current{animation-play-state:running}
.pf-bird.is-landed .perch-current{animation-name:perch-current-rest}

/* Opening: a large title on the left, the nest drawn in the open space to its right. */
.pf-hero{position:relative;padding:calc(var(--head) + clamp(12px,4vh,44px)) var(--pad-x) clamp(24px,4.5vh,52px)}
.pf-intro{position:relative;z-index:1;width:fit-content;max-width:100%}
.pf-eyebrow{width:fit-content;margin:0 0 clamp(14px,2.6vh,26px);font:var(--label)/1.4 monospace;letter-spacing:.34em;color:#9c7cf8}
.pf-title{margin:0;font-size:clamp(50px,min(7vw,11.4vh),136px);font-weight:500;line-height:.98;letter-spacing:-.055em}
.pf-line{display:block;width:fit-content}
.pf-accent{color:var(--cyan)}
.pf-lead{margin:clamp(16px,3vh,30px) 0 0;width:fit-content;font-size:clamp(16px,1.4vw,22px);font-weight:300;line-height:1.5;color:#c9cfdc}
/* Where currents.js draws each nest: the box the dome sits in, its base on the bottom edge. */
.pf-nest{position:absolute;aspect-ratio:2.4/1.75;pointer-events:none}
.pf-nest-hero{width:clamp(250px,26vw,440px);left:calc(68% - clamp(125px,13vw,220px));bottom:clamp(88px,15vh,150px)}
@keyframes pf-settle{from{opacity:.35;transform:translateY(.3em)}}
.pf-js:not(.pf-settled) :is(.pf-eyebrow,.pf-line,.pf-lead){animation:pf-settle 1s cubic-bezier(.2,.7,.2,1) backwards}
.pf-js:not(.pf-settled) .pf-line:nth-child(2){animation-delay:.08s}
.pf-js:not(.pf-settled) .pf-line:nth-child(3){animation-delay:.16s}
.pf-js:not(.pf-settled) .pf-lead{animation-delay:.26s}

/* Works: a twelve-column frame to align against, filled differently by every row. */
.pf-works{position:relative;padding:0 var(--pad-x)}
.pf-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);align-items:start}
.pf-row+.pf-row{margin-top:clamp(110px,13vw,200px)}
.pf-work{position:relative;min-width:0}
.pf-shots{position:relative}
/* Screens float on the shared sky: a thin bezel and a deep, soft shadow, no panel behind them. */
.pf-screen{position:relative;margin:0;padding:clamp(4px,.42vw,7px);border-radius:clamp(10px,1vw,15px);background:linear-gradient(155deg,#252d41,#0c111d 52%,#141b2d);border:1px solid #ffffff1f;box-shadow:0 60px 110px -50px #000,0 26px 50px -26px #000d}
.pf-phone{position:absolute;z-index:1;margin:0;padding:clamp(3px,.3vw,5px);border-radius:clamp(15px,1.7vw,26px);background:#0a0e19;border:1px solid #ffffff2b;box-shadow:0 34px 60px -24px #000,0 10px 24px -12px #000c}
.pf-screen img,.pf-screen .pf-pending{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:clamp(6px,.62vw,10px)}
.pf-phone img,.pf-phone .pf-pending{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:clamp(12px,1.45vw,22px)}
/* A slot waiting for its screenshots keeps the size and framing of a real one. */
.pf-screen .pf-pending,.pf-phone .pf-pending{display:grid;place-content:center;gap:10px;padding:8%;text-align:center;font:var(--label)/1.5 monospace;letter-spacing:.18em;text-transform:uppercase;color:#a9b3c8;background:repeating-radial-gradient(ellipse at 112% 128%,transparent 0 26px,#8b5cf61c 27px,transparent 28.5px),repeating-radial-gradient(ellipse at -18% -30%,transparent 0 34px,#22d3ee14 35px,transparent 36.5px),radial-gradient(110% 90% at 75% 15%,#2b2152,transparent 62%),#090e1a}
.pf-pending small{display:block;font-size:.86em;letter-spacing:.12em;color:#66728c}
.pf-phone .pf-pending{gap:6px;padding:12%;font-size:8px;letter-spacing:.12em}
.pf-info{position:relative;z-index:1}
.pf-info>*{width:fit-content;max-width:100%}
.pf-num{margin:0 0 14px;font:var(--label)/1.4 monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.pf-name{margin:0;font-size:clamp(28px,2.7vw,44px);font-weight:500;line-height:1.04;letter-spacing:-.035em}
.pf-row-featured .pf-name,.pf-row-wide .pf-name{font-size:clamp(34px,3.5vw,58px)}
.pf-meta{margin:12px 0 0;font-size:14px;letter-spacing:.03em;color:#99a3b9}
.pf-desc{margin:12px 0 0;max-width:min(100%,29em)!important;font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:#bcc4d5}
.pf-services{margin:12px 0 0;font:var(--label)/1.6 monospace;letter-spacing:.1em;text-transform:uppercase;color:#7f8aa3}
.pf-visit{display:flex;align-items:center;gap:9px;margin-top:20px;padding-bottom:7px;border-bottom:1px solid #22d3ee80;color:var(--cyan);font-size:14px;font-weight:500;letter-spacing:.04em;transition:gap .35s,border-color .35s}
.pf-visit:hover{gap:14px;border-color:var(--cyan)}
.is-placeholder .pf-num,.is-placeholder .pf-name{color:#8792ab}

/* Entrance: a short rise as each project reaches the screen. The copy is never hidden. */
.pf-screen,.pf-phone{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pf-js .pf-work .pf-screen{opacity:0;translate:0 26px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.pf-js .pf-work .pf-phone{opacity:0;translate:0 40px;transition:opacity .8s ease .14s,translate 1.15s cubic-bezier(.2,.7,.2,1) .14s,transform .7s cubic-bezier(.2,.7,.2,1)}
.pf-js .pf-work.is-in .pf-screen,.pf-js .pf-work.is-in .pf-phone{opacity:1;translate:0 0}
@media(hover:hover){
 .pf-work:hover .pf-screen,.pf-work:focus-within .pf-screen{transform:translateY(-6px)}
 .pf-work:hover .pf-phone,.pf-work:focus-within .pf-phone{transform:translateY(-11px)}
}

/* Wide screens */
@media(min-width:1100px){
 /* 01 rises into the opening: text on the left, the phone bridging it to a large screen. */
 .pf-row-featured{margin-top:clamp(-110px,-6.5vw,-56px)}
 .pf-row-featured .pf-work,.pf-row-wide .pf-work{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
 .pf-row-featured .pf-info{grid-column:1/4;grid-row:1;padding-right:13%}
 .pf-row-featured .pf-shots{grid-column:4/11;grid-row:1}
 .pf-row-featured .pf-phone{left:-6%;bottom:-8%;width:18%}
 /* 04 mirrors it at a larger scale: the screen leads from the left, the copy closes on the right. */
 .pf-row-wide .pf-shots{grid-column:1/9;grid-row:1}
 .pf-row-wide .pf-info{grid-column:10/13;grid-row:1}
 .pf-row-wide .pf-phone{right:-8%;bottom:-10%;width:16.5%}
 /* Pairs: two pieces of different size, offset in height. Three variants alternate down the page. */
 .pf-row-pair .pf-info{margin-top:clamp(36px,3.4vw,48px)}
 .pf-row-pair .pf-info>*:not(.pf-visit){max-width:min(100%,32em)}
 .pf-row-pair .pf-phone{right:-4%;bottom:-13%;width:21%}
 .pf-row-pair .pf-work .pf-info{max-width:76%}
 .pf-row-a>.pf-work:nth-child(1){grid-column:1/8}
 .pf-row-a>.pf-work:nth-child(2){grid-column:9/13;margin-top:clamp(120px,13vw,210px)}
 .pf-row-b>.pf-work:nth-child(1){grid-column:2/6;margin-top:clamp(10px,2vw,30px)}
 .pf-row-b>.pf-work:nth-child(2){grid-column:7/13;margin-top:clamp(150px,16vw,260px)}
 .pf-row-b>.pf-work:nth-child(1) .pf-phone{right:auto;left:-7%}
 .pf-row-b>.pf-work:nth-child(1) .pf-info{margin-left:auto}
 .pf-row-c>.pf-work:nth-child(1){grid-column:1/7;margin-top:clamp(110px,12vw,190px)}
 .pf-row-c>.pf-work:nth-child(2){grid-column:8/12}
 .pf-row-solo>.pf-work:nth-child(1){grid-column:3/10;margin-top:0}
}

/* Tablets and phones: one column, but every project keeps its own side, width and offset. The phone sits low on the
   bottom-right corner, where these screenshots show imagery rather than headlines. */
@media(max-width:1099px){
 .pf-row{display:block}
 .pf-row+.pf-row,.pf-work+.pf-work{margin-top:clamp(84px,14vw,128px)}
 .pf-shots{width:88%}
 .pf-phone{bottom:-17%;width:22%;right:-3%}
 .pf-info{margin-top:clamp(56px,10vw,86px);max-width:72%}
 .pf-work[data-side=r] .pf-shots,.pf-work[data-side=r] .pf-info{margin-left:auto}
 .pf-row-featured .pf-shots,.pf-row-wide .pf-shots{width:100%}
 .pf-row-featured .pf-phone{bottom:-16%;width:23%}
 .pf-row-featured .pf-info{margin-left:12%}
}
@media(max-width:699px){
 /* The nest takes the band above the title, on the right, so the two never meet. */
 .pf-hero{padding-top:calc(var(--head) + 136px);padding-bottom:40px}
 .pf-title{font-size:clamp(40px,13.2vw,60px);line-height:1}
 .pf-lead{font-size:16px}
 .pf-nest-hero{width:min(46vw,200px);left:auto;right:calc(var(--pad-x) - 4px);bottom:auto;top:calc(var(--head) + 40px)}
 .pf-row+.pf-row,.pf-work+.pf-work{margin-top:92px}
 .pf-shots{width:94%}
 .pf-phone{width:26%;bottom:-22%;right:-2%}
 .pf-info{margin-top:56px;max-width:74%}
 .pf-row-featured .pf-shots,.pf-row-wide .pf-shots{width:100%}
 .pf-row-featured .pf-phone{width:27%;bottom:-20%}
 .pf-row-featured .pf-info{margin-left:0;max-width:74%}
 .pf-name,.pf-row-featured .pf-name,.pf-row-wide .pf-name{font-size:clamp(30px,9vw,40px)}
 .pf-meta{font-size:13px}
 .pf-desc{font-size:15px}
}

/* Closing: the currents meet in a smaller nest beside the invitation. */
.pf-close{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);align-items:center;padding:clamp(150px,17vw,260px) var(--pad-x) clamp(110px,13vw,190px)}
.pf-nest-close{position:relative;grid-column:2/5;width:100%;max-width:300px;justify-self:center}
.pf-close-copy{position:relative;z-index:1;grid-column:6/12}
.pf-close h2{margin:0;font-size:clamp(40px,4.7vw,74px);font-weight:500;line-height:1.02;letter-spacing:-.045em}
.pf-close h2 span{color:var(--cyan)}
.pf-cta{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,38px);padding:15px 24px;border-radius:40px;background:var(--violet);color:#fff;font-size:15px;font-weight:500;letter-spacing:.01em;transition:background .3s,gap .3s}
.pf-cta:hover{background:#9b74f6;gap:20px}
@media(max-width:1099px){
 .pf-close{grid-template-columns:1fr;justify-items:start;padding-top:clamp(120px,18vw,170px)}
 .pf-nest-close{grid-column:1;width:min(46vw,250px);margin:0 0 28px 6%}
 .pf-close-copy{grid-column:1}
}

@media(prefers-reduced-motion:reduce){
 .pf-js .pf-work .pf-screen,.pf-js .pf-work .pf-phone{opacity:1;translate:none}
 .pf-bird{transition:none;transform:none}
 .pf-bird .perch-wing{transition:none;animation:none!important;transform:rotate(0deg)}
}