/* Carl Fox portfolio. Design: Direction B ("Loud yellow"), approved Oct 2026. */
:root { --y:#F5C445; --n:#1D2236; --cream:#FFF6DC; --card:#2a3049; --ease:cubic-bezier(.2,.7,.2,1); }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--y); color:var(--n); font:400 18px/1.55 Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img, video { display:block; max-width:100%; }
.d { font-family:"Bricolage Grotesque", sans-serif; font-stretch:80%; font-weight:800; letter-spacing:-.02em; line-height:.88; text-transform:uppercase; }
.h { font-family:"Bricolage Grotesque", sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.label { font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:24px; display:inline-block; border-bottom:3px solid currentColor; }
.intro { font-size:clamp(20px, 1.8vw, 26px); max-width:40ch; margin-bottom:6vh; }
section { padding:12vh 4vw; }
.navy { background:var(--n); color:var(--cream); }
.navy .big-title { color:var(--y); }
.cream { background:var(--cream); }

/* "View" bubble over work */
#cur { position:fixed; left:0; top:0; width:96px; height:96px; border-radius:50%; background:var(--y); color:var(--n); pointer-events:none; z-index:99;
       transform:translate(-50%,-50%) scale(0); transition:transform .25s var(--ease); display:grid; place-items:center; font:700 15px Inter; }
#cur.on { transform:translate(-50%,-50%) scale(1); }
@media (hover:none) { #cur { display:none; } }

/* NAV */
nav.top { display:flex; justify-content:space-between; align-items:center; padding:22px 4vw; position:sticky; top:0; z-index:20; background:var(--y); }
nav.top .logo { font-family:"Bricolage Grotesque"; font-weight:800; font-size:24px; }
nav.top ul { display:flex; gap:10px; list-style:none; padding:0; }
nav.top ul a { border:2px solid var(--n); border-radius:999px; padding:6px 16px; font-weight:600; font-size:15px; transition:background .2s, color .2s; }
nav.top ul a:hover, nav.top ul a.on { background:var(--n); color:var(--y); }

/* HOME HERO */
.hero { padding:3vh 4vw 9vh; position:relative; }
.hero h1 { font-size:clamp(76px, 14.5vw, 232px); }
.hero .top { display:grid; grid-template-columns:1.15fr 1fr; gap:4vw; align-items:center; }
/* The photo sits centred over the intro paragraph: same 44ch width and font size as .hero p */
.hero .pic { width:100%; max-width:44ch; font-size:19px; display:flex; justify-content:center; }
.hero .sticker { width:clamp(200px, 27vw, 430px); aspect-ratio:1; object-fit:cover; transform:rotate(7deg); border-radius:50%; border:6px solid var(--n); box-shadow:10px 10px 0 var(--n); }
.hero .lead { display:grid; grid-template-columns:1.15fr 1fr; gap:4vw; margin-top:5vh; align-items:end; }
.rot { font-family:"Bricolage Grotesque"; font-weight:700; font-size:clamp(30px, 3.4vw, 52px); line-height:1.1; letter-spacing:-.02em; }
.slot { display:inline-block; vertical-align:bottom; background:var(--n); color:var(--y); border-radius:12px; padding:.02em .28em .08em; margin-left:.18em;
        overflow:hidden; white-space:nowrap; transition:width .45s var(--ease); height:1.2em; position:relative; }
.slot span { display:inline-block; transition:transform .45s var(--ease), opacity .3s; }
.slot span.out { transform:translateY(-110%); opacity:0; }
.slot span.in { transform:translateY(110%); opacity:0; }
#measure { position:absolute; visibility:hidden; white-space:nowrap; }
.hero p { font-size:19px; max-width:44ch; }

.marquee { background:var(--n); color:var(--y); overflow:hidden; white-space:nowrap; padding:18px 0; }
.marquee span { display:inline-block; animation:mq 34s linear infinite; font-family:"Bricolage Grotesque"; font-weight:800; font-size:34px; text-transform:uppercase; }
.marquee b { color:var(--cream); margin:0 28px; }
@keyframes mq { to { transform:translateX(-50%); } }

/* PRINCIPLES */
.row { display:grid; grid-template-columns:minmax(0, 1.7fr) 1fr; align-items:center; gap:4vw; border-top:3px solid var(--n); padding:2.2vh 0; }
.row h2 { font-size:clamp(46px, 7.4vw, 124px); white-space:nowrap; justify-self:start; padding:.06em .12em .02em; margin-left:-.12em; border-radius:14px;
          background:linear-gradient(var(--n), var(--n)) no-repeat left / 0% 100%; transition:background-size .45s var(--ease), color .3s; }
.row:hover h2 { background-size:100% 100%; color:var(--y); }
.row p { font-size:clamp(19px, 1.7vw, 24px); max-width:28ch; }

/* WORK CARDS */
.big-title { font-size:clamp(56px, 8.5vw, 136px); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:5vh 2.4vw; }
.card { display:block; }
.frame { aspect-ratio:16/10; border-radius:20px; overflow:hidden; background:var(--card); }
.frame img, .frame video { width:100%; height:100%; transition:transform .7s var(--ease); }
.card:hover img, .card:hover video { transform:scale(1.04); }
.cap { display:flex; justify-content:space-between; gap:24px; align-items:baseline; margin-top:18px; }
.cap small { display:block; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--y); margin-bottom:6px; }
.cap h3 { font-family:"Bricolage Grotesque"; font-weight:700; font-size:clamp(22px, 2vw, 30px); line-height:1.12; letter-spacing:-.01em; max-width:24ch; }
.cap .tags { font-size:13px; opacity:.75; text-align:right; white-space:nowrap; }
.cap .tags b { color:var(--y); font-weight:600; }
.soon { display:inline-block; margin-top:8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }

/* WHAT I'VE DONE */
.numbers { display:grid; grid-template-columns:repeat(4, 1fr); gap:3vw; margin-top:5vh; }
.numbers div { border-top:3px solid currentColor; padding-top:16px; font-size:17px; }
.numbers b { display:block; font-family:"Bricolage Grotesque"; font-stretch:75%; font-weight:800; font-size:clamp(56px, 7.5vw, 112px); line-height:.9; margin-bottom:10px; }
.navy .numbers div { border-color:var(--y); } .navy .numbers b { color:var(--y); }
.ways { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:8vh; }
.ways div { background:var(--cream); border:3px solid var(--n); border-radius:22px; padding:24px; box-shadow:6px 6px 0 var(--n); transition:transform .2s, box-shadow .2s; }
.ways div:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--n); }
.ways h4 { font-family:"Bricolage Grotesque"; font-size:24px; line-height:1.1; margin-bottom:10px; }
.ways p { font-size:16px; }

/* AI */
.ai .intro { margin:4vh 0 7vh; max-width:46ch; }
.pillars { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.pillars div { border:3px solid var(--y); border-radius:22px; padding:28px; }
.pillars b { font-family:"Bricolage Grotesque"; font-size:clamp(26px, 2.4vw, 36px); line-height:1.05; color:var(--y); display:block; margin-bottom:12px; }
.proof { margin-top:8vh; }
.proof h4 { font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; color:var(--y); }
.proof ul { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.proof li { background:#262c45; border-radius:18px; padding:22px; }
.proof li strong { display:block; font-family:"Bricolage Grotesque"; font-size:22px; margin-bottom:6px; color:var(--cream); }
.proof li span { font-size:16px; opacity:.8; }

/* BEYOND */
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:6vh; }
.facts div { background:var(--y); border:3px solid var(--n); border-radius:22px; padding:28px; font-family:"Bricolage Grotesque"; font-weight:700; font-size:28px; line-height:1.15; min-height:220px; display:flex; flex-direction:column; justify-content:space-between; }
.facts div:nth-child(2) { transform:rotate(-2deg); background:var(--n); color:var(--y); } .facts div:nth-child(3) { transform:rotate(1.5deg); }
.facts small { display:block; font-family:Inter; font-weight:500; font-size:15px; margin-top:16px; }
.facts .ico { font-size:40px; line-height:1; }

.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:4vh; }
.chips a, .chips span, .chips button { border:3px solid var(--n); border-radius:999px; padding:8px 18px; font:600 16px Inter; background:transparent; color:inherit; cursor:pointer; transition:background .2s, color .2s; }
.chips a:hover, .chips button:hover, .chips button.on { background:var(--n); color:var(--y); }

/* FOOTER */
footer { background:var(--n); color:var(--y); padding:14vh 4vw 5vh; }
footer .closing { font-family:"Bricolage Grotesque"; font-weight:700; font-size:clamp(22px,2.2vw,32px); max-width:34ch; color:var(--cream); margin-bottom:6vh; }
footer h2 { font-size:clamp(90px, 18vw, 300px); }
footer .links { display:flex; gap:12px; flex-wrap:wrap; margin-top:6vh; }
footer .links a { background:var(--y); color:var(--n); border-radius:999px; padding:14px 26px; font-weight:700; font-size:20px; }
footer .links a:hover { background:var(--cream); }
footer small { display:block; margin-top:10vh; color:#9aa0b5; }

/* WORK PAGE */
.page-head { padding:4vh 4vw 6vh; }
.page-head h1 { font-size:clamp(84px, 16vw, 260px); }
.page-head p { font-size:clamp(20px, 1.8vw, 26px); max-width:42ch; margin-top:3vh; }
.filters { position:sticky; top:74px; z-index:10; background:var(--cream); padding:16px 4vw; border-block:3px solid var(--n); }
.filters .chips { margin:0; }
.more-list { padding-top:4vh; }
.entry { display:grid; grid-template-columns:minmax(260px, 1fr) 2fr; gap:4vw; padding:8vh 0; border-top:3px solid var(--n); scroll-margin-top:150px; }
.entry .meta { position:sticky; top:170px; align-self:start; }
.entry .meta small { display:block; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.entry .meta h3 { font-family:"Bricolage Grotesque"; font-weight:700; font-size:clamp(28px, 2.6vw, 40px); line-height:1.08; letter-spacing:-.01em; }
.entry .meta .role { font-weight:600; margin:14px 0 6px; } .entry .meta .tags { font-size:14px; opacity:.7; }
.entry .meta p { margin-top:18px; font-size:17px; max-width:40ch; }
.entry .media { display:grid; gap:16px; }
.entry .media figure { margin:0; border-radius:20px; overflow:hidden; }
.entry.hide { display:none; }

/* CASE STUDY */
.case-hero { padding:0 4vw; }
.back { display:inline-block; font-weight:600; font-size:15px; margin:3vh 0 4vh; } .back:hover { text-decoration:underline; }
.kicker { font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; }
.case-hero h1 { font-size:clamp(64px, 11vw, 184px); margin:14px 0 4vh; max-width:12ch; }
.meta-row { display:grid; grid-template-columns:repeat(4, auto); justify-content:start; gap:12px 5vw; padding:3vh 0 6vh; border-top:3px solid var(--n); }
.meta-row span { display:block; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-bottom:4px; }
.meta-row b { font-weight:600; font-size:17px; }
.bleed { margin:0 4vw; border-radius:24px; overflow:hidden; }
.bleed img, .bleed video { width:100%; height:auto; }
.standfirst { padding:12vh 4vw 10vh; display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:start; }
.standfirst .big { font-size:clamp(28px, 3vw, 44px); }
.standfirst p { max-width:46ch; }
.chapter { padding:10vh 4vw; }
.chapter .num { display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px; }
.chapter .num i { font-style:normal; background:var(--n); color:var(--y); border-radius:999px; width:34px; height:34px; display:grid; place-items:center; letter-spacing:0; }
.navy .num i { background:var(--y); color:var(--n); }
.chapter h2 { font-size:clamp(48px, 7vw, 112px); max-width:14ch; }
.navy.chapter h2 { color:var(--y); }
.text { display:grid; grid-template-columns:1fr 1fr; gap:6vw; margin-top:5vh; }
.text p { max-width:48ch; } .text .lead { font-size:clamp(22px, 2vw, 28px); }
.chapter .chips span { font-family:"Bricolage Grotesque"; font-weight:700; font-size:clamp(17px, 1.5vw, 22px); cursor:default; border-color:currentColor; }
.chapter .chips span:hover { background:transparent; color:inherit; }
.g { display:grid; gap:16px; margin-top:7vh; }
.g figure { margin:0; border-radius:20px; overflow:hidden; position:relative; align-self:start; }
.g img, .g video { width:100%; height:auto; transition:transform .8s var(--ease); }
.g figure:hover img { transform:scale(1.03); }
figcaption { position:absolute; left:14px; bottom:14px; background:var(--y); color:var(--n); font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; }
.g-1 { grid-template-columns:1fr; } .g-2 { grid-template-columns:1fr 1fr; } .g-3 { grid-template-columns:repeat(3, 1fr); }
.results { display:grid; grid-template-columns:repeat(var(--n-results, 3), 1fr); gap:3vw; margin-top:6vh; }
.results div { border-top:3px solid var(--y); padding-top:16px; }
.results b { display:block; font-family:"Bricolage Grotesque"; font-stretch:75%; font-weight:800; font-size:clamp(52px, 7vw, 108px); line-height:.9; color:var(--y); margin-bottom:10px; }
.next { display:block; background:var(--n); color:var(--y); padding:12vh 4vw; }
.next > span { font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); }
.next h2 { font-size:clamp(56px, 10vw, 170px); margin-top:16px; }
.next:hover h2 span { background:var(--y); color:var(--n); border-radius:16px; padding:0 .12em; }
.draft-note { padding:10vh 4vw; font-size:clamp(22px, 2vw, 28px); max-width:40ch; }

@media (max-width: 860px) {
  .hero .lead, .row, .standfirst, .text, .entry { grid-template-columns:1fr; }
  .hero .top { grid-template-columns:1fr; gap:0; }
  .hero .pic { order:-1; justify-content:flex-start; }
  .hero .sticker { width:140px; margin-bottom:16px; }
  .grid, .g-2, .g-3 { grid-template-columns:1fr; } .cap { flex-direction:column; gap:6px; } .cap .tags { text-align:left; }
  .numbers, .ways, .results { grid-template-columns:1fr 1fr; } .facts, .pillars, .proof ul { grid-template-columns:1fr; }
  .row h2 { font-size:clamp(40px, 11.5vw, 80px); }
  .meta-row { grid-template-columns:1fr 1fr; }
  .entry .meta { position:static; } .filters { top:66px; }
  nav.top ul a { padding:4px 10px; font-size:13px; }
}
.hide { display:none !important; }
.g-4 { grid-template-columns:repeat(4, 1fr); } @media (max-width: 860px) { .g-4 { grid-template-columns:1fr 1fr; } }
.g figure:has(video) figcaption, .entry figure:has(video) figcaption { top:14px; bottom:auto; }
/* More work: media column. Items flagged "half" (e.g. vertical films) sit two-up */
.entry .media { grid-template-columns:1fr 1fr; }
.entry .media figure { grid-column:span 2; }
.entry .media figure.half { grid-column:span 1; }
.entry .media img, .entry .media video { width:100%; height:auto; }
/* Phones: the four "what I've done" cards stack, so long words never push the page wider than the screen */
@media (max-width: 560px) { .ways { grid-template-columns:1fr; } }