/* Stuart Partridge — folio 2026 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:root{
  --bg:#f2f0ec;--ink:#1b1b19;--muted:#6b6b64;--faint:#a9a69d;
  --card:#ffffff;--navy:#2a4157;--maxw:1140px}
@media (prefers-color-scheme:dark){:root{
  --bg:#121210;--ink:#e9e7e0;--muted:#9a978c;--faint:#5f5c53;
  --card:#1d1c19;--navy:#95bcd4}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,5vw,72px) clamp(20px,5vw,64px)}

.masthead{margin-bottom:clamp(40px,6vw,64px)}
h1{font-size:clamp(2rem,6.3vw,3.25rem);font-weight:700;letter-spacing:-.021em;margin:0;line-height:1.12;color:var(--navy)}
.role{color:var(--navy);font-weight:500;font-size:clamp(1.05rem,2.4vw,1.4rem);margin:.5em 0 0}
.lead{font-size:clamp(1rem,1.7vw,1.14rem);max-width:62ch;margin:1.15em 0 0;line-height:1.62}
.meta{display:flex;flex-wrap:wrap;color:var(--muted);font-size:.82rem;font-weight:500;margin:1.7em 0 0}
.meta>*{white-space:nowrap}
.meta>*:not(:last-child)::after{content:"\00b7";margin:0 .7em;color:var(--faint)}
.meta a{text-decoration:none}
.meta a:hover{text-decoration:underline}

.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:clamp(20px,3vw,34px);
  margin-top:clamp(34px,5vw,58px)}
.caps h2{font-size:.9rem;font-weight:600;margin:0 0 .5em}
.caps p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.5}

/* big subheading, e.g. "Selected commercial work 2014-2026" — sits tight under the H1 inside .masthead */
.section-title{font-size:clamp(1.6rem,4.2vw,2.25rem);font-weight:600;color:var(--navy);
  letter-spacing:0;line-height:1.2;margin:0}
.masthead .section-title{margin-top:.2em}

/* small tracked eyebrow label, e.g. "MOST RECENT · FEATURED", "PREVIOUS WORK" */
.section-label{font-size:.6875rem;font-weight:600;letter-spacing:.094rem;color:var(--navy);
  margin:clamp(46px,6vw,72px) 0 clamp(18px,2.5vw,26px)}
.section-label.loose{font-size:.8125rem;letter-spacing:0}
.section-label.tight{margin-bottom:clamp(12px,1.8vw,18px)}

hr.divider{border:0;border-top:1px dotted var(--faint);margin:clamp(30px,4.5vw,46px) 0 0}

/* standard project card */
.project{display:flex;gap:clamp(26px,4vw,48px);align-items:center;background:var(--card);
  border-radius:6px;padding:clamp(22px,3vw,38px);margin-bottom:clamp(16px,2vw,22px)}
.project .body{flex:1 1 55%;min-width:0;order:1}
.project .shot{flex:1 1 45%;order:2;display:flex;justify-content:center;align-items:center}
.project .shot img{max-width:100%;max-height:460px;width:auto;height:auto;border-radius:3px}
.project h3{font-size:1.3rem;font-weight:700;margin:0;letter-spacing:-.01em}
.tenure{color:var(--muted);font-size:.82rem;font-weight:500;margin:.55em 0 0}
.ctx{font-size:1rem;margin:.95em 0 0;line-height:1.55;max-width:62ch}
.project ul,.feature ul{margin:1em 0 0;padding:0;list-style:none;max-width:62ch}
.project li,.feature li{position:relative;padding-left:1.15em;margin:.45em 0;font-size:.94rem;line-height:1.5}
.project li::before,.feature li::before{content:"\2022";position:absolute;left:0;color:var(--muted)}
.impact-label{font-size:.78rem;color:var(--muted);margin:1.15em 0 0}
.metrics{font-size:.86rem;color:var(--ink);margin:.4em 0 0;line-height:1.65}
.metrics span:not(:last-child)::after{content:"\00b7";margin:0 .55em;color:var(--faint)}

/* featured project (Linkt) */
.feature{background:var(--card);border-radius:6px;padding:clamp(24px,3.5vw,46px);margin-bottom:clamp(16px,2vw,22px)}
.eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.094rem;color:var(--navy);margin:0 0 1em}
.feature h3{font-size:clamp(1.45rem,3vw,2rem);font-weight:700;letter-spacing:-.015em;margin:0}
.feature .ctx{font-size:clamp(1rem,1.55vw,1.1rem);max-width:66ch}
.strip{display:flex;gap:16px;overflow-x:auto;margin:clamp(22px,3vw,32px) 0 0;
  padding-bottom:10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.strip img{height:clamp(300px,44vw,392px);width:auto;flex:0 0 auto;border-radius:4px;
  background:#f0eee9;scroll-snap-align:start}
.more-link{display:inline-block;margin-top:1.5em;font-weight:600;font-size:.95rem;
  color:var(--navy);text-decoration:none}
.more-link::after{content:" \2192"}
.more-link:hover{text-decoration:underline}

/* also grid — 3 columns x 2 rows on desktop, matching the Figma grid */
.also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:760px){.also-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.also-grid{grid-template-columns:1fr}}
.also-grid>div{background:var(--card);border-radius:6px;padding:clamp(17px,2vw,24px)}
.also-grid h3{font-size:.95rem;font-weight:600;margin:0 0 .45em}
.also-grid p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.5}

footer{margin-top:clamp(46px,6vw,68px)}
footer p{margin:.35em 0;font-size:.9rem;color:var(--muted)}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* --- Linkt deep-dive page --- */
.backlink{display:inline-block;font-size:.85rem;font-weight:500;color:var(--muted);
  text-decoration:none;margin-bottom:clamp(26px,4vw,44px)}
.backlink:hover{color:var(--ink)}
.backlink::before{content:"\2190  "}
.deepdive section{margin-bottom:clamp(20px,3vw,30px)}
.deepdive .section-label{margin-bottom:.4em}
.deepdive .ctx{margin:0 0 0;max-width:68ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(18px,2.5vw,28px)}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;border-radius:4px;background:#f0eee9}
.gallery figcaption{font-size:.78rem;color:var(--muted);margin-top:.55em;line-height:1.4}
.gallery--solo{grid-template-columns:minmax(0,300px)}
.impact-block .metrics{font-size:.92rem}

@media (max-width:820px){
  .project{flex-direction:column;align-items:stretch;gap:20px}
  .project .shot{order:2}
  .project .shot img{max-height:none;width:100%}
}