/* Gui Fox · portfolio
   Palette: warm paper, deep rust accent, ink. Type: Bricolage Grotesque (display) + Public Sans (body).
   Motion: transform/opacity only; 150–300 ms feedback, 320–480 ms reveals; everything off under prefers-reduced-motion. */

:root{
  --bg:#f3f1ec; --surface:#ffffff; --fg:#1b1a17; --muted:#6a655c; --line:#dcd7cd; --soft:#e9e5dc;
  --accent:#8b1e1e; --accent-ink:#ffffff; --dark-card:#1f1d1a;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms; --t-base:240ms; --t-slow:420ms;
  --radius:8px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#15140f; --surface:#1f1d18; --fg:#f1ede4; --muted:#a39d91; --line:#36332c; --soft:#262320;
  --accent:#e0695a; --accent-ink:#1b1a17; --dark-card:#0f0e0b; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#15140f; --surface:#1f1d18; --fg:#f1ede4; --muted:#a39d91; --line:#36332c; --soft:#262320;
  --accent:#e0695a; --accent-ink:#1b1a17; --dark-card:#0f0e0b; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.8rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.015em}
h3{font-size:1.3rem;font-weight:700}
h4{font-size:1rem;font-weight:700}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:6px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--t-base) var(--ease-out)}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none}
.brand span{color:var(--accent)}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--muted);font-size:.9rem;padding:8px 10px;border-radius:999px;position:relative;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.nav a:hover{color:var(--fg);background:var(--soft)}
.nav a.active{color:var(--fg)}
.nav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--accent);border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:999px;padding:10px 16px;font-weight:600;font-size:.9rem;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.btn:hover{transform:translateY(-1px);border-color:var(--fg);box-shadow:0 6px 18px -10px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{border-color:var(--accent);filter:brightness(1.05)}
.btn svg{width:16px;height:16px}
.nav .btn{padding:8px 14px;margin-left:6px}
@media (max-width:760px){.nav a:not(.btn){display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,7vw,88px) 32px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero .lead{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:36em;margin-top:22px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero .meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:28px;font-size:.9rem;color:var(--muted)}
.hero .meta b{color:var(--fg);font-weight:600}
.h1-line{display:block;overflow:hidden}
.h1-line > span{display:inline-block;transition:transform 560ms var(--ease-out),opacity 400ms var(--ease-out)}
.js:not(.ready) .h1-line > span{transform:translateY(110%);opacity:0}
.ready .h1-line:nth-child(2) > span{transition-delay:70ms}
.ready .h1-line:nth-child(3) > span{transition-delay:140ms}
.js:not(.ready) .hero .lead,.js:not(.ready) .hero .cta,.js:not(.ready) .hero .meta,.js:not(.ready) .hero .eyebrow{opacity:0;transform:translateY(12px)}
.hero .lead,.hero .cta,.hero .meta,.hero .eyebrow{transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out)}
.ready .hero .eyebrow{opacity:1;transform:none}
.ready .hero .lead{opacity:1;transform:none;transition-delay:220ms}
.ready .hero .cta{opacity:1;transform:none;transition-delay:300ms}
.ready .hero .meta{opacity:1;transform:none;transition-delay:360ms}

/* collage: five tiles entering in sequence */
.collage{position:relative;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(0,1fr);gap:10px;aspect-ratio:1.05/1;min-width:0}
.js:not(.ready) .collage .tile{opacity:0;transform:translateY(18px) scale(.97)}
.collage .tile{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out)}
.collage .tile img{width:100%;height:100%;object-fit:cover;display:block}
.ready .collage .tile{opacity:1;transform:none}
.ready .collage .tile:nth-child(1){transition-delay:120ms}
.ready .collage .tile:nth-child(2){transition-delay:200ms}
.ready .collage .tile:nth-child(3){transition-delay:280ms}
.ready .collage .tile:nth-child(4){transition-delay:360ms}
.ready .collage .tile:nth-child(5){transition-delay:440ms}
.tile.a{grid-column:1/4;grid-row:1/4}
.tile.b{grid-column:4/7;grid-row:1/3}
.tile.c{grid-column:4/7;grid-row:3/5}
.tile.d{grid-column:1/3;grid-row:4/6}
.tile.e{grid-column:3/4;grid-row:4/6}
.tile.d,.tile.e{grid-row:4/7}
.tile.c{grid-row:3/7}
.tile .tag{position:absolute;left:8px;bottom:8px;font-size:.68rem;background:rgba(20,18,14,.72);color:#fff;padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.collage{aspect-ratio:1.4/1}}

/* ---------- sections ---------- */
section{padding-block:clamp(44px,6vw,72px);border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:18px 56px;margin-bottom:28px}
.sec-head p{color:var(--muted);max-width:62ch}
.sec-head .eyebrow{margin-bottom:10px}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* reveal on scroll */
.js .reveal:not(.in){opacity:0;transform:translateY(16px)}
.reveal{transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:70ms}.reveal[data-delay="2"]{transition-delay:140ms}.reveal[data-delay="3"]{transition-delay:210ms}

/* ---------- fit for the role ---------- */
.fit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fit a{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;min-width:0;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.fit a:hover{transform:translateY(-3px);border-color:var(--fg);box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.fit h3{font-size:1.02rem;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.fit h3 small{font-family:var(--display);color:var(--accent);font-weight:700;font-size:.8rem;letter-spacing:.04em}
.fit p{color:var(--muted);font-size:.9rem}
.fit .where{display:block;margin-top:10px;font-size:.8rem;color:var(--fg);font-weight:600}
.fit .where::after{content:" →";color:var(--accent)}
.facts-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:.84rem}
.pill b{font-weight:600}
@media (max-width:860px){.fit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fit{grid-template-columns:1fr}}

/* ---------- case studies ---------- */
.case{padding-block:clamp(48px,6vw,80px)}
.case .num{font-family:var(--display);font-weight:800;color:var(--accent);font-size:.85rem;letter-spacing:.06em}
.case-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px 56px;margin-bottom:26px;align-items:start}
.case-head h2{margin-top:8px}
.case-head .sub{color:var(--muted);margin-top:8px;font-size:1.02rem}
.card-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;margin-top:18px;font-size:.86rem}
.card-sheet div{min-width:0}
.card-sheet b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin-bottom:2px}
.story{display:grid;gap:14px}
.story h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:4px;font-family:var(--body);font-weight:700}
.story p{color:var(--fg);max-width:64ch}
.story .result{background:var(--soft);border-radius:var(--radius);padding:14px 16px}
@media (max-width:860px){.case-head{grid-template-columns:1fr}.card-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* galleries */
.grid{display:grid;gap:12px;grid-template-columns:repeat(12,minmax(0,1fr))}
.thumb{position:relative;margin:0;display:block;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);cursor:zoom-in;padding:0;width:100%;text-align:left;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.thumb:hover,.thumb:focus-visible{transform:translateY(-2px) scale(1.012);box-shadow:0 16px 34px -20px rgba(0,0,0,.45);border-color:var(--muted)}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ar,1/1);transition:transform 600ms var(--ease-out)}
.thumb:hover img{transform:scale(1.03)}
.thumb.contain img{object-fit:contain;padding:8%}
.thumb.dark{background:var(--dark-card);border-color:transparent}
.thumb figcaption{position:absolute;inset:auto 0 0 0;padding:10px 12px;font-size:.76rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transform:translateY(4px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.thumb:hover figcaption,.thumb:focus-visible figcaption{opacity:1;transform:none}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}.s8{grid-column:span 8}.s12{grid-column:span 12}
@media (max-width:860px){.s3,.s4{grid-column:span 6}.s6,.s8{grid-column:span 12}}
@media (max-width:480px){.grid{gap:10px}}

/* "What it says" translation drawer */
.says{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.says summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;font-weight:600;font-size:.92rem}
.says summary::-webkit-details-marker{display:none}
.says summary .ico{width:26px;height:26px;border-radius:999px;background:var(--soft);display:grid;place-items:center;flex:none;transition:transform var(--t-base) var(--ease-out)}
.says summary .ico svg{width:12px;height:12px}
.says[open] summary .ico{transform:rotate(45deg)}
.says summary .lang{margin-left:auto;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.says .body{padding:0 16px 16px;display:grid;gap:10px;color:var(--fg);font-size:.92rem}
.says .body div{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:4px 14px}
.says .body b{color:var(--muted);font-weight:600;font-size:.82rem}
.says .body p{max-width:70ch}
.says .note{color:var(--muted);font-size:.82rem;grid-template-columns:1fr}
@media (max-width:520px){.says .body div{grid-template-columns:1fr}}
.says .body{animation:drop var(--t-base) var(--ease-out)}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- more work ---------- */
.more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.more .proj{display:block;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;padding:0;min-width:0;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.more .proj:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(0,0,0,.45);border-color:var(--muted)}
.more .proj img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 600ms var(--ease-out)}
.more .proj.dark img{background:var(--dark-card);object-fit:contain;padding:10%}
.more .proj:hover img{transform:scale(1.03)}
.more .proj .t{padding:12px 14px 14px}
.more .proj h3{font-size:1rem;margin-bottom:3px}
.more .proj p{font-size:.84rem;color:var(--muted)}
.more .proj .n{display:inline-block;margin-top:8px;font-size:.74rem;color:var(--accent);font-weight:600}
@media (max-width:860px){.more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.more{grid-template-columns:1fr}}

/* ---------- video ---------- */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;max-width:760px}
.video-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.video-card video{display:block;width:100%;height:auto;background:#000;aspect-ratio:9/16}
.video-card .cap{padding:12px 14px;font-size:.9rem}
.video-card .cap b{display:block;font-weight:600}
.video-card .cap span{color:var(--muted);font-size:.84rem}
.videos.three{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.videos.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.videos,.videos.three{grid-template-columns:1fr}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;min-width:0}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{font-size:.9rem;color:var(--muted)}
.step small{display:block;font-family:var(--display);font-weight:800;color:var(--accent);margin-bottom:10px;letter-spacing:.04em}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* ---------- tools ---------- */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 40px}
.tools h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;font-family:var(--body);font-weight:700}
.tools p{font-size:.95rem}
@media (max-width:860px){.tools{grid-template-columns:1fr}}

/* ---------- contact / footer ---------- */
.contact{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,90px) 36px}
.contact .big{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contact .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.copy{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;font-size:.78rem;padding:4px 10px;cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.copy:hover{border-color:var(--fg)}
.copy:active{transform:scale(.96)}
.copy.done{border-color:var(--accent);color:var(--accent)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.86rem;margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(10,9,7,.94);display:none;align-items:center;justify-content:center;z-index:60;padding:max(16px,env(safe-area-inset-left,0px));opacity:0;transition:opacity var(--t-base) var(--ease-out)}
.lb.open{display:flex}
.lb.show{opacity:1}
.lb img{max-width:min(94vw,1400px);max-height:calc(100vh - 130px - env(safe-area-inset-bottom,0px));object-fit:contain;display:block;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:scale(.985);transition:transform var(--t-base) var(--ease-out)}
.lb.show img{transform:none}
.lb-close,.lb-prev,.lb-next{position:fixed;appearance:none;border:0;background:#fff;color:#1b1a17;border-radius:999px;width:42px;height:42px;font-size:20px;cursor:pointer;display:grid;place-items:center;transition:transform var(--t-fast) var(--ease-out)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{transform:scale(1.06)}
.lb-close{top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px))}
.lb-prev{left:calc(10px + env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb-next{right:calc(10px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}
.lb-prev[hidden],.lb-next[hidden]{display:none}
.lb-cap{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));text-align:center;color:#e9e4da;font-size:.86rem;padding:0 64px}
.lb-cap b{display:block;color:#fff;font-weight:600}
.lb-cap small{display:block;color:#a39d91;margin-top:2px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;transition-delay:0ms!important}
  .reveal,.h1-line > span,.hero .lead,.hero .cta,.hero .meta,.hero .eyebrow,.collage .tile{opacity:1;transform:none}
  .thumb:hover,.thumb:hover img,.more .proj:hover,.more .proj:hover img,.fit a:hover,.btn:hover{transform:none}
}