/* Layout: white gallery wall; condensed lowercase titles; full-bleed horizontal project bands */
:root{
  --paper:#f6f6f4; --ink:#141414; --muted:#6c6c68; --line:#dcdcd8; --mint:#7ef0c4; --shade:rgba(10,10,10,.55);
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,5vw,72px); --max:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#121212;--ink:#efefec;--muted:#9a9a95;--line:#2c2c2a;--mint:#6fe0b6;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#121212;--ink:#efefec;--muted:#9a9a95;--line:#2c2c2a;--mint:#6fe0b6;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--mint);color:#111}

.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bar-name{font:700 20px/1 var(--display);text-decoration:none;letter-spacing:.01em}
.bar-nav{display:flex;gap:8px}
.bar-nav a{font:600 14px/1 var(--display);text-decoration:none;padding:7px 14px;background:var(--mint);color:#111;letter-spacing:.04em}
.bar-nav a:hover,.bar-nav a[aria-current]{background:var(--ink);color:var(--paper)}

/* hero */
.hero{padding:clamp(80px,16vh,180px) var(--gutter) clamp(56px,10vh,110px);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.hero-name{margin:0;font:700 clamp(64px,13vw,168px)/.86 var(--display);letter-spacing:-.01em;text-transform:lowercase}
.hero-name span{display:block}
.hero-name.small{font-size:clamp(48px,8vw,96px)}
.hero-role{margin:.9em 0 0;font:italic 500 15px/1.3 var(--body)}
.hero-intro{margin:2.4em 0 0;font:italic 400 16px/1.5 var(--body);color:var(--muted)}
.hero-intro a{color:var(--ink);text-underline-offset:3px}
.hero-arrows{display:inline-block;margin-top:2.4em;font:600 18px/1 var(--display);transform:rotate(90deg);transform-origin:left center;letter-spacing:.1em}

/* project bands */
.work{display:grid;gap:clamp(10px,1.4vw,18px);padding-bottom:clamp(40px,8vh,90px)}
.band{position:relative;display:block;aspect-ratio:21/8;min-height:220px;overflow:hidden;text-decoration:none;color:#fff;background:#222}
.band-media,.band-media img{position:absolute;inset:0;width:100%;height:100%}
.band-media img{object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--shade),transparent 62%);pointer-events:none}
.band-meta{position:absolute;z-index:1;left:var(--gutter);bottom:clamp(18px,4vw,44px);right:var(--gutter);display:grid;gap:10px}
.band-title{font:700 clamp(40px,7.4vw,104px)/.86 var(--display);text-transform:lowercase;letter-spacing:-.005em}
.band-title .t{display:block}
.band-client{font:italic 500 14px/1.2 var(--body);opacity:.92}
.band-go{position:absolute;z-index:1;right:var(--gutter);top:clamp(16px,3vw,32px);font:700 18px/1 var(--display);letter-spacing:.1em;background:var(--mint);color:#111;padding:8px 12px;opacity:0;transform:translateX(-10px);transition:.35s}
.band:hover .band-media img,.band:focus-visible .band-media img{transform:scale(1.04)}
.band:hover .band-go,.band:focus-visible .band-go{opacity:1;transform:none}
.band:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}

/* project page */
.project{padding-bottom:40px}
.p-head{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(40px,9vh,100px) var(--gutter) clamp(28px,5vh,56px)}
.back{display:inline-block;font:600 14px/1 var(--display);letter-spacing:.06em;text-decoration:none;margin-bottom:clamp(28px,6vh,60px)}
.back:hover{text-decoration:underline;text-underline-offset:4px}
.back.big{font-size:20px;margin:40px 0 0}
.p-title{margin:0;font:700 clamp(56px,11vw,150px)/.86 var(--display);text-transform:lowercase;text-wrap:balance}
.p-title .t{display:block}
.p-client{margin:.9em 0 0;font:italic 500 16px/1.3 var(--body)}
.p-kicker{margin:.3em 0 0;font:italic 400 15px/1.3 var(--body);color:var(--muted)}
.p-cover{margin:0;width:100%;max-height:78vh;overflow:hidden;background:#222}
.p-cover img{width:100%;height:100%;max-height:78vh;object-fit:cover}
.p-body{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(40px,8vh,80px) var(--gutter) 0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px)}
.p-text{min-width:0;max-width:62ch}
.p-text p{margin:0 0 1em;font:400 clamp(18px,1.7vw,22px)/1.5 var(--body)}
.p-text p:first-child{font-style:italic}
.p-awards{min-width:0;border-top:2px solid var(--ink);padding-top:12px}
.p-awards h2,.a-block h2{margin:0 0 10px;font:700 18px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.p-awards ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font:italic 400 14px/1.4 var(--body);color:var(--muted)}
.p-logos{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,48px);flex-wrap:wrap;padding:clamp(40px,8vh,80px) var(--gutter) 0}
.p-logos img{height:clamp(40px,6vw,84px);width:auto}
.p-logos span{font:700 22px/1 var(--display);letter-spacing:.1em}
.p-media{max-width:calc(1024px + 2*var(--gutter));margin:0 auto;padding:clamp(40px,8vh,80px) var(--gutter) 0;display:grid;gap:clamp(16px,3vw,40px)}
.p-media figure{margin:0}
.p-media img{width:100%;height:auto;background:var(--line)}
.video{position:relative;aspect-ratio:16/9;max-width:100%;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.trip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.5vw,18px)}

/* prev / next */
.pager{max-width:calc(var(--max) + 2*var(--gutter));margin:clamp(60px,12vh,140px) auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);border-top:1px solid var(--line);padding-top:clamp(28px,5vh,48px)}
.pager-item{display:grid;gap:8px;text-decoration:none;min-width:0}
.pager-item.next{text-align:right}
.pager-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--line)}
.pager-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;filter:grayscale(.35)}
.pager-item:hover .pager-thumb img,.pager-item:focus-visible .pager-thumb img{transform:scale(1.05);filter:none}
.pager-label{font:600 13px/1 var(--display);letter-spacing:.08em;color:var(--muted);margin-top:6px}
.pager-title{font:700 clamp(26px,3.6vw,46px)/.9 var(--display);text-transform:lowercase}
.pager-client{font:italic 400 14px/1.2 var(--body);color:var(--muted)}
.pager-item:hover .pager-label{color:var(--ink)}

/* about */
.about{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(48px,10vh,110px) var(--gutter) 40px}
.a-intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end}
.a-photo{width:clamp(120px,18vw,204px);height:auto;filter:grayscale(1)}
.a-lead{margin:1em 0 0;font:italic 400 clamp(18px,1.8vw,22px)/1.45 var(--body);max-width:40ch}
.a-block{margin-top:clamp(48px,9vh,96px);border-top:2px solid var(--ink);padding-top:12px}
.rows{list-style:none;margin:6px 0 0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:8px 24px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.r-a{font:600 19px/1.15 var(--display);letter-spacing:.02em}
.r-a em{font:italic 500 14px var(--body);color:var(--muted);margin-left:4px}
.r-b{font:400 15px/1.4 var(--body);color:var(--muted)}
.r-y{font:500 15px/1 var(--display);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.contact{margin:14px 0 0;font:700 clamp(26px,4vw,48px)/1.15 var(--display)}
.contact a{text-decoration:none}
.contact a:hover{text-decoration:underline;text-underline-offset:5px}

.foot{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding:28px var(--gutter);padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));font:italic 400 13px/1.3 var(--body);color:var(--muted);border-top:1px solid var(--line);margin-top:clamp(48px,8vh,96px)}
.foot a{text-decoration:none}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:.001;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media (max-width:760px){
  .band{aspect-ratio:4/3}
  .p-body{grid-template-columns:1fr}
  .rows li{grid-template-columns:1fr auto}
  .r-b{grid-column:1/-1;grid-row:2}
  .a-intro{grid-template-columns:1fr;align-items:start}
}
@media (max-width:480px){
  .pager{grid-template-columns:1fr}
  .pager-item.next{text-align:left}
  .trip{grid-template-columns:1fr}
  .bar-name{font-size:17px}
}
.draft-note{margin:0;padding:10px var(--gutter);background:var(--mint);color:#111;font:600 14px/1.3 var(--display);letter-spacing:.04em}

/* Espaço para letras que descem abaixo da linha (g, p, y) nos títulos grandes,
   para não encostarem no texto de baixo */
.hero-name span:last-child,
.p-title .t:last-child,
.band-title .t:last-child{padding-bottom:.16em}
.pager-title{padding-bottom:.1em}