/* Shared styles for all project pages (projects/*.html). Per-project colour: <body style="--bar: gradient"> */
:root{--ink:#15151a;--muted:#62626b;--navy:#14203f;
  --font:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --sans:"Space Grotesk",system-ui,sans-serif;--mono:var(--sans)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:linear-gradient(180deg,#fbfbf9,#efefea);color:var(--ink);font-family:var(--sans)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(20,20,25,.2) 1px,transparent 1.4px);background-size:24px 24px}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.col{max-width:760px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2rem)}

.nav{display:flex;align-items:center;justify-content:space-between;padding:1.25rem clamp(1.25rem,4vw,3rem);background:#fff;color:#000;border-bottom:1px solid #e6e6ea}
.name{font:500 1.9rem var(--sans);letter-spacing:-.01em;text-decoration:none}
.btn{display:inline-block;background:var(--ink);color:#fff;font:500 1rem var(--sans);padding:.6rem 1.4rem;border-radius:999px;text-decoration:none;transition:transform .2s}
.btn:hover{transform:scale(1.05)}
.nav .btn{background:#000;color:#fff}
.btn:focus-visible,.name:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* Banner (same image as the home card) with the short descriptor on it */
.banner{position:relative;aspect-ratio:21/9;max-height:62vh;width:100%;overflow:hidden;background:var(--bar)}
.banner::before{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.6))}
.banner-info{position:absolute;z-index:2;left:clamp(1.25rem,4vw,3rem);right:1.25rem;bottom:clamp(1rem,3vw,2rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;color:#fff}
.pname{font:400 clamp(2.6rem,8vw,6rem)/.9 var(--font);margin:0}
.pname i{font-style:normal;font-weight:300;margin-right:.2em}
.cats{display:flex;flex-wrap:wrap;gap:0 .8rem;font:300 clamp(1.4rem,3.6vw,2.6rem)/1 var(--font);padding-bottom:.25em}
.cats::before{content:"\2013"}
.cats span:not(:last-child)::after{content:"\00b7";margin-left:.8rem}
.sheet{max-width:840px;margin:0 auto;background:#fff;padding:0;box-shadow:0 0 0 1px rgba(20,20,25,.06)}
.sheet-in{padding:0 clamp(1.25rem,4vw,3rem) 1.5rem}
.meta-row{display:flex;align-items:center;gap:1.2rem}
.swatch{flex:none;width:clamp(150px,32vw,280px);height:28px;background:var(--bar)}

/* Title, colour bar and tags */
.head{padding-top:clamp(2rem,5vw,3.5rem)}
.cat{font:400 .9rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
h1{font:300 clamp(2.2rem,5.5vw,3.6rem)/1.05 var(--font);color:var(--navy)}
.bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.5rem}
.bar{width:clamp(140px,28vw,240px);height:36px;border-radius:0;background:var(--bar)}
.tags{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.tags span{font:400 1.05rem var(--sans);color:var(--ink)}
.tags span:not(:last-child)::after{content:"\00b7";margin-left:1.2rem;color:#a0a0a8}

/* Content: one column */
.content{padding:clamp(1.5rem,4vw,2.5rem) 0 1rem}
section.sec{margin-bottom:clamp(2rem,5vw,3.5rem)}
.content h2{font:300 clamp(2.2rem,5vw,3.2rem)/1 var(--font);color:var(--navy);margin-bottom:1rem}
.content p{font-size:1.05rem;line-height:1.7;margin-bottom:1rem;color:#26262c}
figure.fig{margin:1.75rem 0}
.media{position:relative;aspect-ratio:3/2;border-radius:3px;overflow:hidden;display:grid;place-items:center;background:#ececf0}
.media::after{content:attr(data-name);font:400 .8rem var(--sans);color:var(--muted)}
.media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--img) center/cover no-repeat}
figcaption{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;font-size:.9rem;color:var(--muted)}
figcaption::before{content:"";flex:none;width:56px;height:6px;border-radius:0;background:var(--bar)}
.cta{margin:1rem 0 2rem}
.cta .btn{font-size:1.1rem;padding:.8rem 1.8rem}

/* Logo bar: companies worked with */
.bottom{background:
  radial-gradient(60% 90% at 12% 0%, rgba(255,255,255,.85), transparent 60%),
  radial-gradient(55% 80% at 92% 100%, rgba(208, 234, 255, 0.874), transparent 65%),
  linear-gradient(135deg,#eceef3 0%,#f6f8ff 50%,#fff6ff 100%)}
.logos{margin-top:0;}
.logos .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem 3.5rem;padding-top:2.5rem;padding-bottom:2.5rem}
.logos-label{flex-basis:100%;text-align:center;font:400 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.logo{position:relative;min-width:200px;height:80px;display:grid;place-items:center;font-size:.85rem;color:transparent}
.logo::before{content:"";position:absolute;inset:0;background:var(--img) center/contain no-repeat}

/* Next project */
.next{padding:clamp(2rem,5vw,4rem) 0}
.next-card{display:grid;grid-template-columns:1.2fr 1fr;border-radius:3px;overflow:hidden;background:#000;color:#fff;text-decoration:none;transition:transform .3s,box-shadow .3s}
.next-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(0,0,0,.5)}
.next-card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.next-thumb{position:relative;min-height:240px;background:var(--next-bar)}
.next-thumb::before{content:"";position:absolute;inset:0;background:var(--img) center/cover no-repeat}
.next-card .info{padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:.8rem}
.eyebrow{font:400 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#9a9aa0}
.next-card h3{font:300 clamp(2.4rem,5vw,3.8rem)/1 var(--font)}
.next-card .meta{color:#bdbdc2;font-size:.95rem}
.go{font:500 1rem var(--sans)}
@media(max-width:760px){.next-card{grid-template-columns:1fr}}