/* Luiza Pinto — portfolio v2. Source of truth: Paper file "Portfolio — Coffee pixel". */
:root{
  --ink:#141414; --mute:#5C5C5C; --soft:#8A8A8A; --line:#E4E4E4; --bg:#fff;
  --pad:clamp(20px,5vw,72px);
  --sans:"Inter Tight",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --cell:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.4;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.page{max-width:1920px;margin:0 auto;overflow-x:clip}

/* type */
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;line-height:14px;text-transform:uppercase}
.mute{color:var(--soft)}
.h-xl{font-weight:300;font-size:clamp(44px,6.2vw,88px);line-height:1.02;letter-spacing:-.035em;margin:0}
.h-l{font-weight:300;font-size:clamp(32px,3.9vw,56px);line-height:1.02;letter-spacing:-.035em;margin:0}
.h-m{font-weight:300;font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:-.03em;margin:0}
.lede{font-size:20px;line-height:28px;max-width:760px;margin:0}
p{margin:0}
.stack{display:flex;flex-direction:column;gap:16px}

/* nav + footer */
.bar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--ink)}
.bar.foot{border-bottom:0;border-top:1px solid var(--ink)}
.bar a:hover,.bar button:hover{text-decoration:underline;text-underline-offset:3px}
.copy{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;line-height:14px;text-transform:uppercase;min-width:17ch;text-align:right}
.copy:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 577 grid square */
.sq{position:absolute;width:577px;height:577px;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* home: about */
.about{position:relative;height:900px;border-bottom:1px solid var(--line)}
.about .intro{position:absolute;left:var(--pad);top:160px;display:flex;flex-direction:column;gap:20px}
.about .intro h1{font-weight:300;font-size:68px;line-height:68px;letter-spacing:-.035em;margin:0}
.frame{position:absolute;width:577px;height:577px}
.frame .sq{left:0;top:0}
.about .frame{left:calc(50% - 288px);top:218px}
.photo{position:absolute;left:144px;top:96px;width:288px;height:384px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about .bio{position:absolute;left:calc(50% + 360px);top:660px;width:300px;font-size:18px;line-height:23px}
.about .bio p{text-indent:48px}
.to-work{display:inline-block;margin-top:20px;text-indent:0}
.to-work:hover{text-decoration:underline;text-underline-offset:3px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* home: work list */
.work{padding:120px var(--pad) 140px;border-bottom:1px solid var(--line)}
.work-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px}
.work-row{display:grid;grid-template-columns:64px 1fr 340px 200px;gap:32px;align-items:center;padding:28px 0;border-top:1px solid var(--ink)}
.work-row:last-child{border-bottom:1px solid var(--ink)}
.work-row h3{font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.03em;margin:0}
.work-row .thumb{height:120px;border-radius:10px;overflow:hidden;background:#F4F4F4}
.work-row .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.work-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.work-row .arrow{transition:transform .2s ease}
.work-row:hover .arrow{transform:translateX(4px)}

/* home: coffee sections */
.cup{position:relative;height:900px;display:flex;flex-direction:column;justify-content:center;gap:40px;padding:0 var(--pad);border-bottom:1px solid var(--line)}
.cup .frame{left:calc(50% - 288px);top:162px}
.cup .tag{position:relative;display:flex;align-items:center;gap:22px}
.cup .tag img{width:56px;height:56px;object-fit:contain}
.cup .row{position:relative;display:flex;align-items:center}
.cup h2{flex:0 0 810px;font-weight:300;font-size:100px;line-height:.92;letter-spacing:-.045em;margin:0}
.cup .row p{flex:0 0 498px;margin-left:-30px;font-size:32px;line-height:42px;text-indent:48px}
.cup .row p a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* case pages */
.case-hero{display:flex;flex-direction:column;gap:40px;padding:120px var(--pad) 72px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;border-top:1px solid var(--ink);padding-top:20px}
.facts div{display:flex;flex-direction:column;gap:8px}
.facts span:last-child{font-size:16px;line-height:22px}
.sec{display:flex;flex-direction:column;gap:48px;padding:96px var(--pad);border-top:1px solid var(--ink)}
.sec-head{display:flex;justify-content:space-between;gap:80px}
.sec-head>.l{display:flex;flex-direction:column;gap:20px;max-width:720px}
.sec-head>.r{display:flex;flex-direction:column;gap:16px;width:420px;flex-shrink:0;padding-top:34px}
.big{font-weight:300;font-size:clamp(88px,14vw,200px);line-height:.9;letter-spacing:-.05em;margin:0}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.cols3 div,.cols2 div{display:flex;flex-direction:column;gap:8px}
.cols3 p,.cols2 p{font-size:16px;line-height:22px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px}
.note{color:var(--mute)}
.next{display:flex;justify-content:space-between;align-items:end;padding:72px var(--pad) 96px;border-top:1px solid var(--ink)}
.next a:hover .h-l{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}

/* media */
figure{margin:0;display:flex;flex-direction:column;gap:12px}
.shot{border:1px solid #E2E2E2;border-radius:12px;overflow:hidden}
.shot img{width:100%}
.phones{display:flex;gap:40px;align-items:flex-start}
.phones.spread{justify-content:space-between}
.phone{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}
.phone .dev{width:220px;height:476px;border:8px solid #1A1A1A;border-radius:34px;overflow:hidden;background:#fff}
.phone .dev img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone .raw{width:220px;height:450px;object-fit:contain}
.finding{display:flex;flex-direction:column;gap:12px;max-width:405px}
.finding .n{display:flex;align-items:baseline;gap:12px}
.finding .n strong{font-weight:300;font-size:32px;letter-spacing:-.03em}
.findings{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.swipe{display:none}

/* also brewed */
.brew-hero{display:flex;justify-content:space-between;align-items:end;gap:40px;padding:120px var(--pad) 72px}
.brew-hero p{max-width:440px}
.brew{display:flex;justify-content:space-between;gap:40px;padding:72px var(--pad);border-top:1px solid var(--ink)}
.brew .txt{display:flex;flex-direction:column;gap:16px;max-width:400px;justify-content:flex-end}
.brew .txt .icon{height:80px;width:auto;align-self:flex-start;margin-bottom:24px}
.brew .phones{gap:24px;align-items:flex-end}
.gif .dev{height:424px}

/* mobile */
@media (max-width:900px){
  .bar{flex-wrap:wrap;row-gap:10px;column-gap:16px}
  .copy{text-align:left;min-width:0}
  .work{padding:72px 20px 80px}
  .work-head{margin-bottom:28px}
  .work-row{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .work-row .thumb{height:180px;order:-1}
  .work-row .num{display:none}
  .case-hero,.brew-hero{padding:48px 20px 56px;gap:28px}
  .brew-hero{flex-direction:column;align-items:flex-start}
  .facts{grid-template-columns:1fr;gap:20px}
  .sec{padding:56px 20px;gap:28px}
  .sec-head{flex-direction:column;gap:20px}
  .sec-head>.r{width:auto;padding-top:0}
  .cols3,.cols2,.findings{grid-template-columns:1fr;gap:24px}
  .next{padding:48px 20px 56px;flex-direction:column;align-items:flex-start;gap:20px}
  .brew{flex-direction:column;padding:48px 20px 56px;gap:28px}
  .brew .txt{max-width:none}
  .brew .txt .icon{height:64px;margin-bottom:8px}
  /* sideways rows (spec: Paper "Spec — Menu + mobile behaviours") */
  .swipe{display:block}
  .scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px;scrollbar-width:none;justify-content:flex-start}
  .scroller::-webkit-scrollbar{display:none}
  .scroller>*{scroll-snap-align:start;flex-shrink:0}
  .scroller .shot{width:760px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* work page (Paper: page "work", artboard "Work — Rest (no hover)") */
.work-page{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);gap:clamp(32px,3.4vw,64px);padding:clamp(48px,4.7vw,80px) var(--pad) clamp(48px,5vw,80px);min-height:calc(100vh - 86px)}
.wl{display:flex;flex-direction:column;justify-content:center}
.cases{border-top:1px solid var(--line)}
.case-row{display:flex;gap:clamp(16px,1.8vw,30px);align-items:flex-start;padding:.2em 0 .14em;border-bottom:1px solid var(--line);font-size:clamp(44px,4.72vw,90px)}
.case-row .mono{padding-top:.24em;min-width:14px}
.case-row .t{font-weight:300;font-size:1em;line-height:1.05;letter-spacing:-.035em}
.small-head{display:flex;justify-content:space-between;margin:clamp(48px,5.5vw,96px) 0 14px}
.smalls{border-top:1px solid var(--line)}
.small-row{display:grid;grid-template-columns:clamp(32px,2.8vw,48px) 1fr auto;gap:12px;align-items:center;padding:clamp(10px,.85vw,16px) 0;border-bottom:1px solid var(--line)}
.small-row .t{font-weight:300;font-size:clamp(22px,1.95vw,37px);white-space:nowrap;letter-spacing:-.025em}
.case-row .t,.small-row .t{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.case-row:hover .t,.small-row:hover .t,.case-row:focus-visible .t,.small-row:focus-visible .t{transform:translateX(10px)}
.wr{display:flex;flex-direction:column}
.stage{position:relative;flex:1;min-height:clamp(420px,62vh,880px);container-type:size}
/* preview: wiped in by a line, like the home scroll */
.pv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.65,0,.35,1)}
.pv.on{clip-path:inset(0 0 0 0)}
@keyframes sweep{0%{top:0;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.pv .comp{transform:translateY(24px);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pv.on .comp{transform:none}
.pv-cap{margin:0;color:var(--mute);text-align:center}
.comp{position:relative;width:min(100cqw,640px);height:min(78cqh,560px)}
.ph{position:absolute;aspect-ratio:220/476;border:solid #1A1A1A;border-width:clamp(5px,1.4cqmin,8px);border-radius:clamp(22px,6cqmin,34px);overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.12)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.c-one{display:flex;align-items:center;justify-content:center}
.c-one .ph{position:relative;height:100%}
.c-one .moka{width:clamp(200px,38cqmin,300px)}
.c-fan .ph{height:88%;top:6%}
.c-fan .l{left:8%;transform:rotate(-7deg)}
.c-fan .m{left:50%;transform:translateX(-50%);z-index:2}
.c-fan .r{right:8%;transform:rotate(7deg)}
.c-pair .ph{height:90%}
.c-pair .a{left:16%;top:0}
.c-pair .b{right:16%;bottom:0}
.c-pair.raw img{position:absolute;height:92%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.12))}
.c-pair.raw .a{left:14%;top:0}
.c-pair.raw .b{right:14%;bottom:0}
.c-darwin .win{position:absolute;border:1px solid #E2E2E2;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.10)}
.c-darwin .win img{width:100%}
.c-darwin .w1{left:0;top:6%;width:88%}
.c-darwin .w2{right:0;bottom:6%;width:72%}
.wr-foot{display:flex;justify-content:space-between;padding-top:24px}
@media (max-width:900px){
  .work-page{grid-template-columns:1fr;padding:48px 20px 56px;min-height:0}
  .wr{display:none}
  .case-row{font-size:44px}
  .small-row{grid-template-columns:32px 1fr}
  .small-row .mute{grid-column:2;margin-top:4px}
  .small-head{margin-top:56px}
}
/* full-bleed bars on wide screens */
body{overflow-x:clip}
.page{overflow-x:visible}
.bar{margin-inline:calc(50% - 50vw);padding-inline:20px}

/* about photo: the sip is wiped in by the same line */
.photo .sip{opacity:0}
.photo:hover .sip,.photo.on .sip{opacity:1}
@media (prefers-reduced-motion:reduce){.pv{transition:none}.pv.on::after,.photo:hover::after{animation:none}}

/* ---- Home scroll effect (ref: dgrees.studio) ----
   Desktop only. Nothing moves except the line: every section's content is pinned in the
   same place (Editorial layout) and only shows inside its own section's band. Sections
   are 100vh spacers whose bottom border is the line, so as the line rises it wipes the
   old text and coffee out and the next ones in, in place. */
.inner{display:contents}
.fx-grid{display:none}
.fx .bar{position:fixed;left:0;right:0;z-index:20;background:#fff;margin:0}
.fx nav.bar{top:0}
.fx .bar.foot{bottom:0}
.fx .fx-grid{display:block;position:fixed;left:calc(50vw / var(--hz,1) - 288px);top:calc(50vh / var(--hz,1) - 288px);z-index:0}
.fx main{position:relative;z-index:1}
.fx .about,.fx .cup{height:100vh;min-height:720px;border-bottom:1px solid var(--ink);background:transparent;padding:0;display:block;position:relative;z-index:2}
.fx .inner{display:block;position:fixed;top:0;bottom:0;left:max(0px,calc(50vw - 960px));right:max(0px,calc(50vw - 960px));z-index:1}
.fx .cup .inner{display:flex;flex-direction:column;justify-content:center;gap:40px;padding:0 var(--pad)}
.fx .frame .sq{display:none}
.fx .about .intro{top:calc(50vh / var(--hz,1) - 346px)}
.fx .about .frame{top:calc(50vh / var(--hz,1) - 288px)}
.fx .about .bio{top:calc(50vh / var(--hz,1) + 154px)}
.fx .cup .frame{top:calc(50vh / var(--hz,1) - 288px)}

/* ---- Case pages: same line behaviour as the home (desktop) ----
   Sections stack: each one sticks in place (tall ones stick by their bottom edge) and
   the next section, with its top border as the line, rises over it. Above the line the
   old content stays still; below it the new content comes in. */
.lines .bar{position:fixed;left:0;right:0;margin:0;z-index:50;background:#fff}
.lines nav.bar{top:0}
.lines .bar.foot{bottom:0}
.lines main{padding:43px 0}
.lines main > *{position:sticky;background:#fff}
.lines .sec,.lines .next,.lines .brew{border-top-color:var(--ink)}
.ph.gif{aspect-ratio:220/424}
.ph.gif img{object-fit:fill}
/* short case sections get a full screen each, so they don't fly past */
.lines main > *{min-height:calc(100vh - 86px)}

/* ---- notebook-friendly scale (07/11): smaller titles and devices in the cases ---- */
:root{--pw:clamp(150px,12.5vw,220px)}
.h-xl{font-size:clamp(40px,4.4vw,76px)}
.h-l{font-size:clamp(28px,3vw,50px)}
.h-m{font-size:clamp(24px,2.2vw,36px)}
.big{font-size:clamp(72px,9.7vw,170px)}
.lede{font-size:clamp(17px,1.3vw,20px);line-height:1.45;max-width:700px}
.sec-head>.r p,.brew .txt p{font-size:clamp(16px,1.15vw,18px);line-height:1.45}
.case-hero{padding-top:clamp(64px,6vw,120px);padding-bottom:clamp(48px,4vw,72px);gap:clamp(24px,2.4vw,40px)}
.sec{padding-block:clamp(56px,5vw,96px);gap:clamp(28px,2.8vw,48px)}
.brew,.brew-hero{padding-block:clamp(48px,4vw,72px)}
.phone{width:var(--pw)}
.phone .dev{width:100%;height:auto;aspect-ratio:220/476;border-width:clamp(6px,.55vw,8px);border-radius:clamp(24px,2.4vw,34px)}
.phone .raw{width:100%;height:auto;aspect-ratio:220/450}
.phones{gap:clamp(24px,2.8vw,40px)}
.finding{max-width:none}
.scroller .shot{width:min(100%,1080px)}
.c-darwin,.c-fan,.c-pair{max-width:100%}
@media (max-width:900px){
  :root{--pw:220px}
  .scroller .shot{width:760px}
}
.zoom{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.96);display:none;align-items:center;justify-content:center;padding:56px;cursor:zoom-out}
.zoom.on{display:flex}
.zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.zoom button{all:unset;position:absolute;top:18px;right:20px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
/* each screen-tall section centres its content vertically (desktop cases) */
.lines .sec,.lines .case-hero{justify-content:center}
.lines .brew,.lines .brew-hero,.lines .next{align-items:center}

/* home: stacked layout on phones */
@media (max-width:900px){
  .sq{width:337px;height:337px}
  .about{height:auto;padding:40px 20px 72px;display:flex;flex-direction:column;gap:24px}
  .about .intro{position:static}
  .about .intro h1{font-size:52px;line-height:.92}
  .frame{position:relative;width:337px;height:337px}
  .about .frame{left:auto;top:auto;align-self:center}
  .photo{left:72px;top:24px;width:192px;height:264px}
  .about .bio{position:static;width:auto}
  .cup{height:auto;padding:72px 20px 80px;display:grid;grid-template-columns:1fr;gap:28px}
  .cup .frame{grid-row:2;grid-column:1;left:auto;top:auto;justify-self:center}
  .cup .row{display:contents}
  .cup .tag img{width:40px;height:40px}
  .cup .tag{gap:14px}
  .cup .tag{grid-row:1;grid-column:1}
  .cup h2{grid-row:2;grid-column:1;align-self:end;justify-self:center;width:337px;margin-bottom:24px;position:relative;font-size:52px;flex:none}
  .cup .row p{grid-row:3;grid-column:1;flex:none;margin:0;font-size:18px;line-height:26px;text-indent:32px}
  .about .bio,.cup .row p{max-width:640px}
}
/* home on smaller desktops/tablets: the whole Editorial layout scales down together
   (text, grid, photo), instead of breaking or cropping. --hz is set in main.js. */
.fx .inner,.fx .fx-grid{zoom:var(--hz,1)}