/* ---------------------------------------------------------------------------
   Shared styles for the project detail pages (project-01..05.html).
   Tokens, reset, nav, and the case-study layout. Loaded from /assets/ so font
   and image URLs are resolved one level up (../fonts, ../pf-assets).
--------------------------------------------------------------------------- */
@font-face{font-family:'Suisse Intl';src:url('../fonts/SuisseIntl-Light.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Suisse Intl';src:url('../fonts/SuisseIntl-SemiBold.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Suisse Intl';src:url('../fonts/SuisseIntl-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:oklch(0.962 0.004 250);--ink:oklch(0.175 0.02 265);--muted:oklch(0.52 0.015 265);
  --line:oklch(0.175 0.02 265 / 0.13);--accent:oklch(0.49 0.22 145);--nav-bg:oklch(0.962 0.004 250 / 0.8);
  --nav-h:56px;--display:'Suisse Intl','Helvetica Neue',Helvetica,Arial,sans-serif;--body:'Suisse Intl','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
:root[data-theme="dark"]{--bg:oklch(0.185 0.012 265);--ink:oklch(0.95 0.005 250);--muted:oklch(0.72 0.012 265);--line:oklch(0.95 0.005 250 / 0.16);--accent:oklch(0.68 0.21 145);--nav-bg:oklch(0.185 0.012 265 / 0.82)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:oklch(0.185 0.012 265);--ink:oklch(0.95 0.005 250);--muted:oklch(0.72 0.012 265);--line:oklch(0.95 0.005 250 / 0.16);--accent:oklch(0.68 0.21 145);--nav-bg:oklch(0.185 0.012 265 / 0.82)}}

html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s var(--ease-out),color .4s var(--ease-out)}
::selection{background:var(--accent);color:var(--bg)}

/* ── Nav ── */
body>nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;gap:1rem;padding:0 clamp(1rem,3vw,2rem);border-bottom:1px solid var(--line);background:var(--nav-bg);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);z-index:200}
.nav-back{font-family:var(--body);font-size:13px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.4em;padding:10px 6px;margin:-10px -6px;transition:color .18s var(--ease-out)}
.nav-back:hover{color:var(--accent)} .nav-back:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.nav-ttl{flex:1;text-align:center;font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);text-decoration:none;transition:color .18s var(--ease-out)}.nav-ttl:hover{color:var(--accent)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--muted);background:none;border:none;cursor:pointer}
.theme-toggle:hover{color:var(--accent)} .theme-toggle svg{width:16px;height:16px}
.theme-toggle .moon{display:none} :root[data-theme="dark"] .theme-toggle .sun{display:none} :root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme-toggle .sun{display:none}:root:not([data-theme]) .theme-toggle .moon{display:block}}

/* ── Header ── */
.head{max-width:1100px;margin:0 auto;padding:calc(var(--nav-h) + clamp(4rem,11vh,9rem)) clamp(1rem,3vw,2rem) clamp(2rem,5vh,3.5rem)}
.head .num{font-family:var(--display);font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.head h1{font-family:var(--display);font-size:clamp(40px,8vw,92px);font-weight:500;letter-spacing:-0.03em;line-height:0.92;margin:.4rem 0 1.6rem;text-wrap:balance}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.tag{font-size:12px;padding:.32em .72em;border-radius:999px;white-space:nowrap;color:var(--muted);background:transparent;border:1px solid var(--line)}
.intro{font-size:clamp(17px,2vw,21px);line-height:1.6;max-width:60ch;color:var(--ink);text-wrap:pretty}
.intro p+p{margin-top:1rem}

/* ── Overview metadata strip (Role / Year / Scope / ...) ── */
.overview{max-width:1100px;margin:0 auto;padding:clamp(1.5rem,4vh,2.5rem) clamp(1rem,3vw,2rem);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(1.2rem,3vw,2.4rem) clamp(1rem,3vw,2rem)}
.ov-item{display:flex;flex-direction:column;gap:.4rem}
.ov-k{font-size:12px;color:var(--muted);letter-spacing:.01em}
.ov-v{font-size:14px;color:var(--ink);line-height:1.45}

/* ── Case-study narrative ── */
.study{max-width:1100px;margin:0 auto;padding:clamp(2.2rem,5vh,3.4rem) clamp(1rem,3vw,2rem) 0}
.study + .study{padding-top:clamp(2rem,5vh,3.5rem)}
.study h2{font-family:var(--display);font-size:clamp(22px,3.4vw,32px);font-weight:500;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;text-wrap:balance}
.study p{font-size:clamp(16px,1.8vw,18px);line-height:1.7;color:var(--ink);max-width:65ch;text-wrap:pretty}
.study p+p{margin-top:1rem}
.study ul+p,.study ol+p,.study blockquote+p{margin-top:1.1rem}
.study .lead{color:var(--ink)}
.study h3{font-family:var(--display);font-size:clamp(16px,2vw,19px);font-weight:500;letter-spacing:-0.01em;line-height:1.3;margin:1.9rem 0 .55rem;color:var(--ink)}
.study h3:first-of-type{margin-top:1.1rem}
.study ul,.study ol{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:.7rem;max-width:65ch}
.study ol{counter-reset:n}
.study li{position:relative;font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--ink)}
.study ul li{padding-left:1.4rem}
.study ul li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.study ol li{counter-increment:n;padding-left:1.9rem}
.study ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--display);font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.75}
.study blockquote{margin:1.4rem 0;max-width:50ch}
.study blockquote p{font-family:var(--display);font-size:clamp(19px,2.6vw,26px);font-weight:500;line-height:1.32;letter-spacing:-0.01em;color:var(--ink)}
.study blockquote p::before{content:'';display:block;width:26px;height:2px;background:var(--accent);margin-bottom:.7rem}
.pullquote{max-width:1100px;margin:clamp(2.5rem,6vh,4.5rem) auto 0;padding:0 clamp(1rem,3vw,2rem)}
.pullquote p{font-family:var(--display);font-size:clamp(24px,4vw,40px);font-weight:500;letter-spacing:-0.02em;line-height:1.18;color:var(--ink);text-wrap:balance;max-width:24ch}
.pullquote p::before{content:'';display:block;width:34px;height:2px;background:var(--accent);margin-bottom:1.1rem}
.pullquote cite{display:block;margin-top:1rem;font-style:normal;font-size:13px;color:var(--muted)}

/* ── Gallery ── */
.gallery{display:flex;flex-direction:column;gap:clamp(.6rem,1.5vw,1.2rem);padding:clamp(2.5rem,6vh,4.5rem) clamp(.6rem,1.5vw,1.2rem) 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;display:block;border-radius:3px;background:oklch(0.5 0.01 265 / 0.06)}
.gallery figcaption{font-size:13px;color:var(--muted);margin-top:.7rem;padding:0 .2rem;max-width:70ch}
html.js .gallery figure,html.js .gallery img{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js .gallery figure.in,html.js .gallery img.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .gallery figure,html.js .gallery img{opacity:1;transform:none}}

/* ── Next / jump ── */
.next{border-top:1px solid var(--line);margin-top:clamp(3rem,7vh,6rem);padding:clamp(2.5rem,6vh,5rem) clamp(1rem,3vw,2rem)}
.next .ey{font-size:12px;color:var(--muted);margin-bottom:.6rem}
.next a.big{font-family:var(--display);font-size:clamp(34px,7vw,76px);font-weight:500;letter-spacing:-0.03em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;gap:.4em;line-height:1;transition:color .25s var(--ease-out)}
.next a.big:hover{color:var(--accent)} .next a.big .ar{font-size:.5em}
.jump{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.jump a{font-size:13px;color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;padding:8px 0;transition:color .18s var(--ease-out)}
.jump a:hover{color:var(--accent)} .jump a[aria-current]{color:var(--ink)}
.jump a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:1rem;top:-4rem;z-index:999;background:var(--accent);color:var(--bg);font-family:var(--body);font-size:13px;font-weight:500;padding:.6rem 1rem;border-radius:8px;text-decoration:none;transition:top .2s var(--ease-out)}.skip-link:focus{top:.7rem;outline:2px solid var(--ink);outline-offset:2px}

/* ── Legal / text pages ── */
.legal{max-width:700px;margin:0 auto;padding:calc(var(--nav-h) + clamp(3rem,8vh,6rem)) clamp(1rem,3vw,2rem) clamp(2.5rem,7vh,4.5rem)}
.legal .eyebrow{font-size:12px;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.8rem}
.legal h1{font-family:var(--display);font-size:clamp(32px,6vw,54px);font-weight:500;letter-spacing:-0.03em;line-height:1.02;text-wrap:balance}
.legal .updated{font-size:13px;color:var(--muted);margin:.8rem 0 2.6rem}
.legal h2{font-family:var(--display);font-size:clamp(18px,2.4vw,22px);font-weight:500;letter-spacing:-0.01em;margin:2.4rem 0 .7rem}
.legal p{font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:1rem;max-width:62ch;text-wrap:pretty}
.legal ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:.2rem 0 1.2rem;max-width:62ch}
.legal li{position:relative;padding-left:1.3rem;font-size:16px;line-height:1.6;color:var(--ink)}
.legal li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.legal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px;transition:color .18s var(--ease-out)}
.legal a:hover{color:var(--accent)} .legal a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ── Site footer (legal) ── */
.site-footer{border-top:1px solid var(--line);padding:1.4rem clamp(1rem,3vw,2rem);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:12px;color:var(--muted)}
.site-footer nav{display:flex;gap:clamp(1rem,2.5vw,1.6rem);flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:none;transition:color .18s var(--ease-out)}
.site-footer a:hover{color:var(--accent)} .site-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}