/* Scoped to the ending; original portfolio styles are untouched. */
@font-face{font-family:Alex Mono;src:url('fonts/space-mono.woff2') format('woff2');font-display:swap}
@font-face{font-family:Alex Hand;src:url('fonts/caveat-bold.woff2') format('woff2');font-display:swap}

.portfolio-next{--paper:#f3eee4;--blue:#2b4fd8;--ink:#1b1c1a;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;position:relative}
.portfolio-next *{box-sizing:border-box}
.portfolio-next a{color:inherit;text-decoration:none}
.portfolio-next button{font:inherit;color:inherit;cursor:pointer}
.portfolio-next a:focus-visible,.portfolio-next button:focus-visible,.portfolio-next [tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.portfolio-next [hidden]{display:none!important}

/* ---------- watercolour contact ---------- */
.wc-contact{content-visibility:auto;contain-intrinsic-size:auto 1000px}
.wc-contact{position:relative;overflow:hidden;padding:34px clamp(20px,5vw,76px) 42px;
  background:url('paper-grain.svg'),radial-gradient(120% 90% at 70% 40%,#f8f4ec 0%,var(--paper) 55%,#ece5d6 100%)}
.wc-contact>*{position:relative;z-index:2}
/* Butterflies are pre-painted sprites (assets/wc, baked by scripts/watercolor-paint.js).
   Each one is a few layers moved only by transforms: flying and flapping
   never repaint, the compositor just moves pixels. --s is the half-span. */
.wc-contact>.wc-flock{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;contain:strict}
.wc-bf{position:absolute;left:0;top:0;width:0;height:0;--s:30px}
.wc-bf i{position:absolute;display:block;background:no-repeat 0 0/100% 100%;backface-visibility:hidden}
.wc-hind,.wc-fore{width:calc(var(--s)*1.4);height:calc(var(--s)*2.1);left:calc(var(--s)*-.2);top:calc(var(--s)*-1.02);transform-origin:calc(var(--s)*.2) calc(var(--s)*1.02)}
.wc-l{transform:scaleX(-1)}
.wc-body{width:calc(var(--s)*.5);height:calc(var(--s)*1.9);left:calc(var(--s)*-.25);top:calc(var(--s)*-.82)}
.wc-bf.is-live,.wc-bf.is-live .wc-hind,.wc-bf.is-live .wc-fore{will-change:transform}
.wc-bf-morpho{left:50%;top:50%;--s:min(190px,21vw)}
.wc-bf-morpho .wc-fore{background-image:url('wc/morpho-fore.webp')}
.wc-bf-morpho .wc-hind{background-image:url('wc/morpho-hind.webp')}
.wc-bf-morpho .wc-body{background-image:url('wc/morpho-body.webp')}
.wc-bf-small i{background-image:url('wc/flock.webp')}
.wc-topline{display:flex;justify-content:space-between;gap:16px;font:9px/1.5 'Alex Mono',monospace;letter-spacing:.05em;padding-bottom:20px;border-bottom:1px solid #1b1c1a40}
.wc-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(20px,4vw,60px);min-height:660px;padding:52px 0}
.wc-copy{position:relative}
.wc-kicker{font:22px 'Alex Hand',cursive;color:var(--blue);margin:0 0 32px;transform:rotate(-3deg);transform-origin:left}
.wc-contact h2{font:800 clamp(52px,6.8vw,112px)/.94 Arial,sans-serif;letter-spacing:-.075em;margin:0}
.wc-serif{font:italic 1.13em/.97 Georgia,serif;letter-spacing:-.08em}
.wc-hand{position:relative;display:inline-block;margin-top:10px;transform:rotate(-4deg)}
.wc-hand>span{position:relative;font:1.02em/1.1 'Alex Hand',cursive;color:var(--blue);letter-spacing:-.05em}
.wc-swipe{position:absolute;left:-4%;top:42%;width:108%;height:62%;pointer-events:none;opacity:.95}
.wc-intro{font-size:13px;line-height:1.7;margin:36px 0 20px;color:#4f514c}
.wc-start{display:inline-flex;align-items:center;gap:60px;font-size:19px;border-bottom:1px solid;padding:8px 0;min-width:170px;margin-top:34px}
.wc-start span{font-size:27px;transition:transform .2s}
.wc-start:hover span,.wc-start:focus-visible span{transform:translate(4px,-4px)}
.wc-margin{position:absolute;left:200px;bottom:2px;color:var(--blue);font:19px 'Alex Hand',cursive;transform:rotate(7deg);opacity:.8}

.wc-specimen{margin:0;display:grid;justify-items:center;gap:6px;position:relative}
.wc-pool{position:absolute;left:50%;top:42%;width:118%;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.wc-fig{position:absolute;left:4%;top:2%;font:22px 'Alex Hand',cursive;color:#1b1c1a99;transform:rotate(-6deg)}
.wc-morpho{position:relative;display:block;width:min(100%,520px);aspect-ratio:1.18;border:0;background:transparent;border-radius:40%;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
.wc-specimen figcaption{display:grid;justify-items:center;gap:6px;text-align:center}
.wc-latin{font:italic 15px Georgia,serif;color:#3d3f3a}
.wc-latin i{font-size:17px}
.wc-note{font:19px/1.05 'Alex Hand',cursive;color:var(--blue)}

.wc-bottom{border-top:1px solid #1b1c1a40;padding-top:27px;display:flex;align-items:end;justify-content:space-between;gap:25px}
.wc-label{font:9px/1.6 'Alex Mono',monospace;letter-spacing:.02em}
.wc-email-row{display:flex;align-items:center;gap:16px;margin-top:10px}
.wc-email{font-size:clamp(20px,2.65vw,40px);letter-spacing:-.05em}
.wc-copy-btn{border:1px solid #1b1c1a55;background:transparent;width:40px;height:40px;border-radius:50%;font-size:22px}
.wc-copy-btn:hover{background:#dbe3f6}
.wc-resume{display:flex;justify-content:space-between;gap:55px;font-size:22px}
.wc-resume small{display:block;font:8px 'Alex Mono',monospace;margin-top:7px}
.wc-resume>span:last-child{font-size:29px}

/* ---------- footer + toast ---------- */
.portfolio-next .next-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#191919;color:#fff;padding:15px 22px;font-size:13px;z-index:100005;max-width:90vw;text-align:center;transition:opacity .25s,transform .25s}
.portfolio-next .next-toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .wc-hero{grid-template-columns:1fr;min-height:0;padding:40px 0 20px}
  .wc-contact h2{font-size:clamp(46px,11vw,96px)}
  .wc-specimen{margin-top:20px}
  .wc-margin{display:none}
}
@media(max-width:580px){
  .wc-contact{padding-top:25px;padding-bottom:30px}
  .wc-topline{font-size:7px;gap:12px}
  .wc-topline span:last-child{max-width:102px;text-align:right}
  .wc-kicker{font-size:20px;margin-bottom:24px}
  .wc-intro{font-size:12px;margin-top:28px}
  .wc-bottom{display:block;padding-top:23px}
  .wc-email{font-size:clamp(18px,5.4vw,27px)}
  .wc-email-row{gap:10px}
  .wc-label{font-size:7px}
  .wc-copy-btn{width:35px;height:35px}
  .wc-resume{margin-top:25px;border-top:1px solid #1b1c1a33;padding-top:20px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){.portfolio-next *{transition:none!important;animation:none!important}}