/* Marek Mielnicki — portfolio 2026
   Gallery White / Ink / Deep Red · Zodiak (serif display) + Switzer + IBM Plex Mono */

:root{
  --paper:#F8F6F2;
  --ink:#1A1713;
  --mut:#6E675E;
  --line:#E3DED5;
  --card:#FFFFFF;
  --red:#0E9A46;
  --accent2:#0A6E31;
  --disp:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Manrope','Helvetica Neue',Arial,sans-serif;
  --gutter:48px;
}
@media(max-width:680px){:root{--gutter:22px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gutter);max-width:1400px;margin:0 auto}
.logo{font-family:var(--disp);font-weight:500;letter-spacing:-.005em;font-size:18px}
.logo span{color:var(--red)}
.nav-links{display:flex;gap:clamp(14px,2.5vw,34px);align-items:center;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.nav-links a{padding:4px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--red)}
.nav-cv{border:1px solid var(--ink);border-radius:999px;padding:7px 18px !important;transition:all .18s}
.nav-cv:hover{background:var(--red);border-color:var(--red);color:#fff !important}
@media(max-width:640px){
  .nav-in{flex-wrap:wrap;gap:6px 12px}
  .nav-links{width:100%;justify-content:flex-start;gap:18px;font-size:11px;letter-spacing:.12em}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(70px,12vh,150px) clamp(50px,8vh,90px);border-bottom:1px solid var(--ink)}
.hero h1{font-family:var(--disp);font-weight:500;font-size:clamp(34px,4.4vw,64px);line-height:1.05;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance;max-width:20em}
.hero h1 .accent{font-weight:500;font-style:normal;color:var(--red);background:linear-gradient(180deg,var(--red),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline}
.hero-claim{font-size:clamp(16px,1.6vw,19px);line-height:1.5;letter-spacing:0;max-width:34em;margin:0;color:var(--mut)}
.hero-meta{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.hero-meta b{color:var(--red);font-weight:500}

/* ---------- sections ---------- */
section{padding-block:clamp(70px,10vh,120px) 0}
.sec-head{margin-bottom:clamp(30px,4vh,52px)}
.sec-no{font-family:var(--mono);font-size:.36em;font-weight:500;color:var(--red);letter-spacing:.08em;vertical-align:super;margin-left:.5em}
.sec-head h2{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3vw,38px);letter-spacing:-.01em;line-height:1.08;margin:0;text-wrap:balance}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 18px;cursor:pointer;color:var(--ink);transition:all .15s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- work grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.tile{background:var(--card);border:1px solid var(--line);display:block;transition:border-color .18s}
.tile:hover{border-color:var(--ink)}
.tile .im{aspect-ratio:16/10;overflow:hidden;background:#EDE9E1;border-bottom:1px solid var(--line)}
.tile .im img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.tile:hover .im img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.tile .im img,.tile:hover .im img{transition:none;transform:none}}
.tile .cap{padding:18px 20px 20px}
.tile h3{font-family:var(--disp);font-weight:500;font-size:21px;letter-spacing:-.005em;margin:0 0 7px;line-height:1.2}
.tile:hover h3{color:var(--red)}
.tile .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);display:flex;flex-wrap:wrap;gap:4px 14px}
.tile .meta .ai{color:var(--red)}
.tile.hidden{display:none}
.tile .more{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--red);color:var(--red);padding-bottom:2px}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px)}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}
.about-lede{font-size:clamp(17px,1.8vw,21px);line-height:1.5;letter-spacing:-.005em;font-weight:500;margin:0 0 22px}
.about p{max-width:62ch}
.timeline{border-top:1px solid var(--ink);margin-top:8px}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.tl-row .yr{font-family:var(--mono);font-size:12.5px;color:var(--red);letter-spacing:.06em;padding-top:2px}
.tl-row b{display:block;letter-spacing:-.01em}
.tl-row span{color:var(--mut);font-size:14px}
.clients{margin-top:44px}
.clients h4,.about h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:500;margin:0 0 14px}
.client-list{display:flex;flex-wrap:wrap;gap:8px}
.client-list span{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px}

/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:1000px){.caps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.caps{grid-template-columns:1fr}}
.cap{background:var(--card);border:1px solid var(--line);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px}
.cap .n{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.1em}
.cap h3{font-family:var(--disp);font-weight:500;font-size:19px;letter-spacing:-.005em;margin:0;line-height:1.25}
.cap p{margin:0;font-size:14.5px;color:var(--mut)}

/* ---------- contact ---------- */
.contact{border-top:1px solid var(--ink);margin-top:clamp(70px,10vh,120px);padding-block:clamp(56px,9vh,100px) 90px}
.contact h2{font-family:var(--disp);font-weight:500;font-size:clamp(28px,4vw,52px);letter-spacing:-.015em;line-height:1.1;margin:0 0 30px;text-wrap:balance}
.contact h2 a{border-bottom:2px solid var(--red)}
.contact h2 a:hover{color:var(--red)}
.contact-meta{display:flex;flex-wrap:wrap;gap:12px 36px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.contact-meta a{border-bottom:1px solid var(--ink);padding-bottom:2px}
.contact-meta a:hover{color:var(--red);border-color:var(--red)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:26px 60px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- case study ---------- */
.case-hero{padding-block:clamp(60px,9vh,110px) clamp(36px,5vh,60px)}
.case-kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 20px}
.case-hero h1{font-family:var(--disp);font-weight:500;font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance;max-width:18em}
.case-lede{font-size:clamp(18px,2.2vw,24px);line-height:1.45;max-width:34em;margin:0}
.case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:clamp(36px,5vh,56px) 0}
@media(max-width:760px){.case-facts{grid-template-columns:1fr 1fr}}
.fact{background:var(--card);padding:18px 20px}
.fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.fact .v{font-size:15px;letter-spacing:-.01em;font-weight:500}
.case-body{max-width:820px}
.case-body h2{font-family:var(--disp);font-weight:500;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.005em;margin:clamp(40px,6vh,64px) 0 16px}
.case-body h2 .no{color:var(--red);font-family:var(--mono);font-size:.55em;vertical-align:.35em;letter-spacing:.08em;margin-right:12px;font-weight:400}
.case-body p{max-width:68ch;margin:0 0 16px}
.case-body ul{margin:0 0 16px;padding-left:20px}
.case-body li{margin-bottom:8px;max-width:64ch}
.shot{background:var(--card);border:1px solid var(--line);padding:clamp(10px,1.6vw,22px);margin:26px 0 10px}
.shot img{width:100%;border:1px solid var(--line)}
.shot-cap{font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.05em;margin:10px 0 26px}
.outcome{background:var(--card);border:1px solid var(--ink);padding:clamp(24px,3.5vw,40px);margin:34px 0}
.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
@media(max-width:640px){.outcome-grid{grid-template-columns:1fr}}
.outcome .big{font-family:var(--disp);font-weight:500;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.01em;line-height:1;color:var(--red)}
.outcome .lab{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-top:8px}
.case-next{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--ink);margin-top:clamp(50px,8vh,90px);padding-block:26px 80px;font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase}
.case-next a{border-bottom:1px solid var(--ink);padding-bottom:2px}
.case-next a:hover{color:var(--red);border-color:var(--red)}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

::selection{background:var(--red);color:#fff}

/* ---------- quick view drawer ---------- */
.qv-ov{position:fixed;inset:0;background:rgba(26,23,19,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.qv-ov.on{opacity:1;pointer-events:auto}
.qv{position:fixed;top:0;right:0;height:100dvh;width:min(760px,100vw);background:var(--paper);border-left:1px solid var(--ink);transform:translateX(102%);transition:transform .32s cubic-bezier(.25,.7,.25,1);z-index:100;overflow-y:auto;overscroll-behavior:contain}
.qv.on{transform:none}
@media (prefers-reduced-motion:reduce){.qv,.qv-ov{transition:none}}
.qv-head{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;z-index:2}
.qv-head .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.qv-close{background:none;border:1px solid var(--ink);border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;cursor:pointer;color:var(--ink)}
.qv-close:hover{background:var(--red);border-color:var(--red);color:#fff}
.qv-body{padding:28px 24px 30px}
.qv-body h2{font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em;margin:0 0 14px}
.qv-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 20px}
@media(max-width:560px){.qv-facts{grid-template-columns:1fr}}
.qv-fact{background:var(--card);padding:11px 14px}
.qv-fact .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.qv-fact .v{font-size:13.5px;font-weight:500}
.qv-body p{color:#3d3831;max-width:62ch;margin:0 0 16px}
.qv-gal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 4px}
@media(max-width:560px){.qv-gal{grid-template-columns:1fr}}
.qv-gal img{width:100%;display:block;border:1px solid var(--line);background:var(--card)}
.qv-gal img.wide{grid-column:1/-1}
.qv-nav{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:18px 24px 28px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.qv-nav button{background:none;border:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;color:var(--ink);border-bottom:1px solid var(--ink);padding:0 0 2px}
.qv-nav button:hover{color:var(--red);border-color:var(--red)}
body.qv-open{overflow:hidden}

/* ---------- pillars ---------- */
.pillars{border-top:1px solid var(--ink)}
.pillar{padding-block:clamp(28px,4.5vh,48px);border-bottom:1px solid var(--line)}
.pillar-roles{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.pillar h3{font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.8vw,32px);letter-spacing:-.01em;margin:0 0 12px;line-height:1.12}
.pillar p{max-width:64ch;margin:0 0 18px;color:#3d3831}
.pillar-proof{display:flex;flex-wrap:wrap;gap:9px 14px;align-items:baseline}
.pillar-proof .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pillar-proof a{font-size:14px;border-bottom:1px solid var(--line);padding-bottom:2px}
.pillar-proof a:hover{color:var(--red);border-color:var(--red)}
.pillar-note{margin-top:26px;max-width:72ch;font-size:15px;color:var(--mut)}
.pillar-note b{color:var(--ink);font-weight:500}