/* ==========================================================================
   Portfolio 2026 — Adam Bogusiak
   Monochrome · PP Neue Montreal (Book 400 for text / Bold 700 for headings & large type)
   ========================================================================== */


:root{
  /* palette */
  --white:#ffffff;
  --grey:#f2f2f0;         /* light surface / image placeholders */
  --ink:#101010;          /* text on light */
  --black:#0b0b0b;        /* about section */
  --paper:#ecece9;        /* text on dark */

  /* live tone (driven by main.js on scroll) */
  --bg:var(--white);
  --fg:var(--ink);
  --fg-rgb:16,16,16;
  --surface:var(--grey);

  --muted:rgba(var(--fg-rgb),.52);
  --line:rgba(var(--fg-rgb),.075);
  --line-2:rgba(var(--fg-rgb),.18);

  --ff:"Montreal","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(16px,3.2vw,52px);
  --gap:clamp(12px,1.6vw,24px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-soft:cubic-bezier(.45,0,.2,1);

  --fs-xs:12px;
  --fs-s:14px;
  --fs-m:clamp(16px,1.15vw,19px);
  --fs-l:clamp(20px,1.9vw,30px);
  --fs-xl:clamp(30px,3.6vw,60px);
  --fs-hero:clamp(40px,6.3vw,118px);
  --fs-mega:clamp(52px,10vw,200px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;font-synthesis:weight;background:var(--bg);color:var(--fg);font-family:var(--ff);font-weight:400;font-size:var(--fs-m);
  line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
b,strong{font-weight:700}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

/* layout */
.wrap{padding-inline:var(--pad);max-width:1920px;margin-inline:auto;position:relative}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
main{position:relative;z-index:1}

.label{font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:400}
.muted{color:var(--muted)}
.small{font-size:var(--fs-s);line-height:1.55}

/* animated underline link */
.ln{position:relative;display:inline-flex;align-items:baseline;gap:.25em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .6s var(--ease),opacity .4s}
.ln:hover{background-size:100% 1px}
.arr{font-size:.85em;transition:transform .5s var(--ease)}
.ln:hover .arr{transform:translate(2px,-2px)}

/* chips (tags) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:99px;
  padding:5px 11px 4px;line-height:1.2;transition:background .4s,color .4s,border-color .4s}

/* ---------------------------------------------------------------- reveal / entry */
[data-reveal]{opacity:0;transform:translate3d(0,28px,0);filter:blur(8px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
[data-reveal].in{opacity:1;transform:none;filter:none}
[data-hero]{opacity:0;filter:blur(18px);transform:translate3d(0,18px,0);transition:opacity 1.6s var(--ease),filter 1.6s var(--ease),transform 1.6s var(--ease)}
[data-hero-sub]{opacity:0;transition:opacity 1.4s var(--ease) .55s}
.ready [data-hero]{opacity:1;filter:none;transform:none}
.ready [data-hero-sub]{opacity:1}
main{transition:opacity .5s var(--ease-soft)}
.is-leaving main{opacity:0}

/* wave text */
[data-warp]{position:relative}
.wave-on[data-hero]{filter:none;transform:none;transition:opacity .6s var(--ease)}
.wave-canvas{position:absolute;pointer-events:none;z-index:1}
.wave-on{color:transparent!important;-webkit-text-fill-color:transparent}
.wave-on *{color:transparent!important;-webkit-text-fill-color:transparent}

/* ================================================================= HOME */
.hero>.wrap,.case-hero>.wrap,.contact>.wrap{width:100%}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:var(--pad)}
.hero-grid{flex:1;align-content:center;row-gap:clamp(28px,4vw,56px);padding-top:8vh}
.hero-title{grid-column:1/span 11;font-weight:700;font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.hero-role{grid-column:7/span 4;font-size:var(--fs-s);line-height:1.4;display:flex;flex-direction:column;gap:14px}
.hero-role b{font-weight:700}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px;
  font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase}
.hero-social{display:flex;gap:24px;color:var(--muted)}
.hero-social .ln:hover{color:var(--fg)}
.scroll-cue{animation:cue 2.8s var(--ease-soft) infinite}
@keyframes cue{0%,100%{opacity:1}50%{opacity:.35}}

/* works */
.works{padding-block:clamp(80px,12vw,200px) clamp(120px,16vw,280px)}
.sec-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:clamp(56px,8vw,140px)}
.sec-title{font-weight:700;font-size:var(--fs-xl);line-height:1;letter-spacing:-.03em}
.count{font-size:var(--fs-xs);letter-spacing:.07em;color:var(--muted);margin-top:.3em}
.cards{--cgap:clamp(28px,7vw,150px);display:grid;column-gap:var(--cgap);row-gap:clamp(72px,9vw,170px);
  /* thumbnails 20% larger than the original 10-column layout, still left-aligned */
  grid-template-columns:repeat(2,minmax(0,calc((100% - 2 * ((100% - 11 * var(--gap)) / 12 + var(--gap)) - var(--cgap)) / 2 * 1.2)))}
.card{display:block}
.card-media{aspect-ratio:4/3;overflow:hidden;background:var(--surface);position:relative}
.card-media .card-img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);
  transition:transform 1.6s var(--ease),filter 1.2s var(--ease)}
.card-media.is-contain .card-img{object-fit:contain;padding:12%}
.card-meta{display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;row-gap:2px;margin-top:18px;align-items:baseline}
.card-n{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.card-title{font-weight:700;font-size:var(--fs-l);letter-spacing:-.015em;line-height:1.15;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease);justify-self:start}
.card:hover .card-title{background-size:100% 1px}
.card-scope{grid-column:2;font-size:var(--fs-s);color:var(--muted)}
.card-year{grid-column:3;grid-row:1;font-size:var(--fs-xs);color:var(--muted);letter-spacing:.05em}

/* about (dark) */
.about{padding-block:clamp(120px,14vw,240px) clamp(120px,14vw,240px);row-gap:0}
.about .grid{row-gap:clamp(40px,5vw,80px)}
.a-label{grid-column:1/-1}
.about-lead{grid-column:1/span 10;font-weight:700;font-size:var(--fs-xl);line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.about-text{grid-column:1/span 5;display:flex;flex-direction:column;gap:1.1em;font-size:var(--fs-m);line-height:1.6;max-width:56ch}
.about-side{grid-column:7/span 6;display:flex;flex-direction:column;gap:clamp(48px,5vw,80px)}
.tl .label{margin-bottom:14px}
.tl-list{border-top:1px solid var(--line-2)}
.tl-item{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gap);row-gap:2px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.tl-when{grid-row:span 2;font-size:var(--fs-s);color:var(--muted);font-variant-numeric:tabular-nums}
.tl-where{font-weight:700;font-size:var(--fs-s);letter-spacing:.01em}
.tl-what{font-size:var(--fs-s);color:var(--muted);line-height:1.5}
.tl-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase}
.tl-more summary::-webkit-details-marker{display:none}
.tl-more summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--line-2);border-radius:50%;
  font-size:14px;line-height:1;transition:transform .6s var(--ease)}
.tl-more[open] summary::before{transform:rotate(45deg)}
.tl-more .sum-close,.tl-more[open] .sum-open{display:none}
.tl-more[open] .sum-close{display:inline}
.tl-more-body{overflow:hidden}
.tl-more-body .tl-list{border-top:0}
.about-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.about-cols .label{margin-bottom:12px}

/* contact */
.contact{padding-top:clamp(120px,14vw,240px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
.contact .grid{row-gap:clamp(32px,4vw,64px)}
.c-label{grid-column:1/-1}
.contact-title{grid-column:1/-1;font-weight:700;font-size:var(--fs-mega);line-height:.95;letter-spacing:-.04em;width:max-content;max-width:100%}
.contact-links{grid-column:1/span 5}
.contact-links .links{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-l);letter-spacing:-.01em}
.contact-note{grid-column:8/span 4;font-size:var(--fs-s);color:var(--muted);max-width:36ch;align-self:end}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:clamp(48px,6vw,96px) var(--pad);
  font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.foot .ln:hover{color:var(--fg)}

/* ================================================================= CASE */
.case-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-block:var(--pad)}
.case-top{display:flex;justify-content:space-between;font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase}
.case-grid{flex:1;align-content:center;row-gap:clamp(28px,3.6vw,52px);padding-block:10vh 4vh}
.case-title{grid-column:1/-1;font-weight:700;font-size:var(--fs-mega);line-height:.95;letter-spacing:-.04em;width:max-content;max-width:100%;text-wrap:balance}
.case-intro{grid-column:1/span 6;font-size:var(--fs-l);line-height:1.3;letter-spacing:-.012em;font-weight:400;text-wrap:pretty}
.case-meta{grid-column:9/span 4;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-s);align-self:end}
.meta-item{display:grid;grid-template-columns:110px 1fr;gap:var(--gap);border-top:1px solid var(--line-2);padding-top:10px}
.case-tags{grid-column:1/span 8}
.case-hero .hero-foot{justify-content:flex-start}

.case-body{padding-block:clamp(40px,6vw,100px) clamp(100px,12vw,200px)}
.case-body .grid{align-items:start}
.visuals{grid-column:1/span 8;display:flex;flex-direction:column;gap:clamp(28px,4.4vw,80px)}
.notes{grid-column:10/span 3;display:flex;flex-direction:column;gap:clamp(36px,3.4vw,56px);will-change:transform;font-size:var(--fs-m);line-height:1.6;font-weight:500}
.note h3{font-size:var(--fs-m);letter-spacing:-.005em;font-weight:700;margin-bottom:10px}
.no-notes .visuals{grid-column:1/span 8}
.case-intro p+p{margin-top:.7em}
.note p+p{margin-top:.9em}
.note p{color:rgba(var(--fg-rgb),.82)}
.vrow-items{display:flex;gap:clamp(10px,1.2vw,20px);align-items:flex-start;justify-content:flex-start}
.vitem{min-width:0;background:var(--surface)}
.vitem .vmedia{width:100%;height:auto}
.vrow-phones .vrow-items{justify-content:center;gap:clamp(10px,2vw,32px);padding:clamp(24px,5vw,80px) clamp(16px,4vw,64px);background:var(--surface)}
.vrow-phones .vitem{max-width:220px;background:transparent}
.frame{position:relative;overflow:hidden}
.frame-phone{border-radius:clamp(10px,1.2vw,18px);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.frame .frame-img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;will-change:transform}
.tile-dark{background:#0b0b0b;aspect-ratio:1;display:grid;place-items:center}
.tile-dark .vmedia{width:auto;max-width:100%}
.vpin{position:relative}
.vpin>.vrow{position:sticky;top:var(--pin-top,10vh)}
.vcap{margin-top:12px;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

.next{padding-block:clamp(60px,8vw,140px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.next>.wrap{width:100%}
.next-link{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:20px;align-items:end;
  border-top:1px solid var(--line-2);padding-top:24px}
.next-link .label{grid-column:1/-1}
.next-title{grid-column:1/span 8;font-weight:700;font-size:var(--fs-mega);line-height:.95;letter-spacing:-.04em;width:max-content;max-width:100%}
.next-media{grid-column:10/span 3;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.next-media .card-img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}

/* floating "back to home" (case pages) */
.fab-home{position:fixed;right:var(--pad);bottom:var(--pad);z-index:40;display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px 11px 14px;border-radius:99px;font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg);background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 0 0 1px rgba(var(--fg-rgb),.08),0 8px 30px rgba(0,0,0,.06);
  opacity:0;transform:translate3d(0,12px,0);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease),background .4s,box-shadow .4s}
.fab-home.is-visible{opacity:1;transform:none;pointer-events:auto}
.fab-home:hover{background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 0 0 1px rgba(var(--fg-rgb),.14),0 10px 36px rgba(0,0,0,.09)}
.fab-arr{display:inline-block;transition:transform .5s var(--ease)}
.fab-home:hover .fab-arr{transform:translateX(-3px)}

/* hover warp (assets/js/hover-warp.js) */
.hover-warp-canvas{pointer-events:none;z-index:2;display:block}
.hw-hide,.hw-hide *{-webkit-text-fill-color:transparent}

/* password lock */
.lock{position:fixed;inset:0;z-index:50;background:var(--white);color:var(--ink);display:grid;place-items:center;padding:var(--pad);
  transition:opacity .8s var(--ease-soft),visibility .8s}
.lock.is-open{opacity:0;visibility:hidden}
.is-locked{overflow:hidden}
.lock-form{width:min(440px,100%);display:flex;flex-direction:column;gap:18px}
.lock-form h2{font-weight:700;font-size:var(--fs-xl);letter-spacing:-.03em;line-height:1}
.lock-form .muted{font-size:var(--fs-s)}
.lock-row{display:flex;border-bottom:1px solid rgba(16,16,16,.3);margin-top:12px}
.lock-row input{flex:1;border:0;background:transparent;font:inherit;font-size:var(--fs-l);padding:10px 0;outline:none;color:inherit;min-width:0}
.lock-row button{border:0;background:transparent;font:inherit;font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;padding:0 0 0 16px;color:inherit}
.lock-err{font-size:var(--fs-s)}
.lock-form.shake{animation:shake .5s var(--ease)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lock .back{font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;align-self:flex-start;margin-top:24px;color:rgba(16,16,16,.55)}

/* ================================================================= responsive */
@media (max-width:1100px){
  .hero-role{grid-column:7/span 6}
  .about-text{grid-column:1/span 6}
  .about-side{grid-column:8/span 5}
  .about-cols{grid-template-columns:1fr 1fr}
  .visuals{grid-column:1/span 8}
  .notes{grid-column:9/span 4}
}
@media (max-width:820px){
  .hero-title,.hero-role{grid-column:1/-1}
  .cards{grid-template-columns:1fr}
  .about-lead,.about-text,.about-side{grid-column:1/-1}
  .about-cols{grid-template-columns:1fr 1fr}
  .contact-links,.contact-note{grid-column:1/-1}
  .case-intro,.case-meta,.case-tags{grid-column:1/-1}
  .visuals,.notes,.no-notes .visuals{grid-column:1/-1}
  .notes{order:-1;margin-bottom:56px;transform:none!important}
  .next-title{grid-column:1/-1}
  .next-media{grid-column:1/span 8}
  .vrow-items{flex-wrap:wrap}
  .vrow:not(.vrow-phones) .vrow-items>.vitem{flex-basis:100%!important}
  .vrow-phones .vitem{flex-basis:calc(50% - 10px)!important}
  .vrow[style*="--n:3"]:not(.vrow-phones) .vrow-items>.vitem,
  .vrow[style*="--n:4"]:not(.vrow-phones) .vrow-items>.vitem{flex-basis:calc(50% - 10px)!important}
}
@media (max-width:480px){
  .about-cols{grid-template-columns:1fr}
  .meta-item{grid-template-columns:90px 1fr}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-hero],[data-hero-sub]{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .scroll-cue{animation:none}
  *{scroll-behavior:auto!important}
}