/* ===== Case study pages ===== */
:root{
  --bg:#ffffff;--card:#f8fafc;--ink:#0f172a;--sub:#334155;--muted:#64748b;
  --border:#e2e8f0;--accent:#2563eb;--accent-ink:#0b2a6f;--accent-soft:rgba(37,99,235,.08);
  --header-bg:rgba(255,255,255,.86);--shadow:rgba(15,23,42,.08);--measure:66ch;
}
:root[data-theme="dark"]{
  --bg:#0b1220;--card:#131c2e;--ink:#e6edf7;--sub:#a3b1c6;--muted:#6b7a90;
  --border:#22304a;--accent:#7cb0ff;--accent-ink:#c7dcff;--accent-soft:rgba(124,176,255,.12);
  --header-bg:rgba(11,18,32,.86);--shadow:rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:clamp(1rem,.94rem + .3vw,1.0625rem)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}

/* Layout */
.wrap{max-width:900px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.back{display:inline-block;padding:1.25rem 0 0;font-size:.875rem;font-weight:600;color:var(--muted)}
.back:hover{color:var(--ink);text-decoration:none}

/* ===== Site header (shared with the main pages) ===== */
.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header .wrap{max-width:1120px;padding:0 clamp(16px,4vw,40px)}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:60px}
.brand{font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:1rem;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--accent)}
.brand small{color:var(--muted);font-weight:500;margin-left:.5rem;display:none}
@media(min-width:720px){.brand small{display:inline}}
nav.primary{margin-left:auto}
nav.primary ul{display:flex;gap:.15rem;list-style:none}
nav.primary a{display:inline-block;padding:.4rem .6rem;border-radius:8px;color:var(--sub);font-weight:600;font-size:.88rem}
nav.primary a:hover{background:var(--card);color:var(--ink);text-decoration:none}
nav.primary a.active{color:var(--accent);background:var(--accent-soft)}
.site-tools{display:flex;align-items:center;gap:.4rem}
.site-tools select{padding:.3rem .4rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--ink);font-size:.78rem;font-weight:600;cursor:pointer}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink);font-size:1.05rem;cursor:pointer;line-height:1;padding:0}
.theme-toggle:hover{background:var(--accent);color:var(--bg)}

/* ===== Hero ===== */
.eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.project-hero{padding:clamp(1.5rem,4vw,3rem) 0 1.5rem;border-bottom:1px solid var(--border)}
.project-hero h1{font-size:clamp(1.9rem,1.4rem + 2.6vw,3rem);font-weight:800;line-height:1.08;margin:0;max-width:22ch}
.project-hero>p{color:var(--sub);margin:.9rem 0 0;max-width:var(--measure);font-size:clamp(1.02rem,.98rem + .3vw,1.15rem)}
.project-hero .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin:1.4rem 0 0;font-size:.88rem;color:var(--sub);list-style:none}
.project-hero .meta span{display:block;padding:.6rem .8rem;background:var(--card);border:1px solid var(--border);border-radius:10px;line-height:1.45}
.project-hero .meta strong{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.15rem}

/* Cover image */
.cover-img{width:100%;max-height:440px;object-fit:cover;object-position:top;border-radius:12px;margin-bottom:1.5rem;border:1px solid var(--border)}

/* Version bar */
.version-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:50;background:var(--bg)}
.version-bar label{font-weight:700;font-size:.85rem;color:var(--muted)}
.version-bar select{padding:.45rem .65rem;border:1px solid var(--border);border-radius:8px;font-weight:600;font-size:.875rem;background:var(--card);color:var(--ink);max-width:100%}
.version-bar .btn{display:inline-block;padding:.45rem .85rem;border-radius:8px;background:var(--ink);color:var(--bg);font-weight:700;font-size:.85rem;border:1px solid var(--ink)}
.version-bar .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}
.version-bar .btn-alt{background:transparent;color:var(--ink)}
.version-bar .btn-alt:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ===== Content ===== */
.content{padding:2rem 0 3rem}
.content h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);font-weight:750;margin:2.4rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--border);counter-increment:sec}
.content h2:first-child{border-top:0;padding-top:0;margin-top:0}
.content{counter-reset:sec}
.content>h2::before{content:counter(sec,decimal-leading-zero);display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-right:.75rem;vertical-align:.25em}
.content h3{font-size:1.1rem;font-weight:700;margin:1.4rem 0 .4rem}
.content p{margin:0 0 .85rem;max-width:var(--measure);color:var(--sub)}
.content ul,.content ol{padding-left:1.25rem;margin:0 0 1rem}
.content li{margin:.3rem 0;max-width:var(--measure);color:var(--sub)}
.content li::marker{color:var(--muted)}
.content strong{color:var(--ink)}

/* At a glance (formerly TL;DR) */
.tldr{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:clamp(16px,2.5vw,24px);margin:0 0 1.75rem}
.tldr h2{border:0;padding:0;margin:0 0 .9rem;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);counter-increment:none}
.tldr h2::before{content:none}
.tldr dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem 1.4rem;margin:0;font-size:.93rem}
.tldr dt{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.15rem}
.tldr dd{margin:0 0 .4rem;color:var(--ink);line-height:1.5}

/* Preview embed */
.preview{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:1rem 0 1.5rem;background:var(--card)}
.preview iframe{width:100%;height:420px;border:0;display:block;background:#fff}
.preview-label{font-size:.8rem;color:var(--muted);padding:.5rem .75rem;border-top:1px solid var(--border);font-weight:600}
.preview-tall iframe{height:520px}

/* Doc link / links row */
.doc-link{display:inline-block;margin:1rem 0;padding:.5rem 1rem;border-radius:8px;background:var(--ink);color:var(--bg);font-weight:700;font-size:.9rem;border:1px solid var(--ink)}
.doc-link:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}
.links{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.links a{display:inline-block;padding:.45rem .85rem;border-radius:8px;background:var(--ink);color:var(--bg);font-weight:700;font-size:.875rem;border:1px solid var(--ink)}
.links a:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}

/* Module phases (physical computing / interactive prototype) */
.phase{margin:2.5rem 0 0;padding:2rem 0 0;border-top:2px solid var(--border)!important}
.phase-label{display:inline-block;padding:.2rem .6rem;border-radius:6px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
:root[data-theme="dark"] .phase-label--p1{background:#1e3a8a;color:#bfdbfe}
:root[data-theme="dark"] .phase-label--p2{background:#78350f;color:#fde68a}
:root[data-theme="dark"] .phase-label--p3{background:#064e3b;color:#a7f3d0}
.phase h2{counter-increment:none!important}
.phase h2::before{content:none!important}

/* ===== Pager: previous / next case study ===== */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.5rem 0 2.5rem;border-top:1px solid var(--border)}
.pager a{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--ink);transition:border-color .15s,transform .15s}
.pager a:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px)}
.pager a.next{text-align:right;align-items:flex-end}
.pager small{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pager b{font-size:1rem;font-weight:750;line-height:1.3}
.pager-all{display:block;text-align:center;font-weight:600;color:var(--muted);font-size:.9rem;padding-bottom:2rem}
.pager-all:hover{color:var(--accent);text-decoration:none}
.nav-back{padding:2rem 0;border-top:1px solid var(--border);text-align:center}
.nav-back a{font-weight:600;color:var(--muted);font-size:.9rem}
.nav-back a:hover{color:var(--ink)}

@media(max-width:640px){
  .header-inner{flex-wrap:wrap;row-gap:0;padding:.35rem 0}
  .brand{flex:1}
  .site-tools{margin-left:auto}
  nav.primary{order:3;flex-basis:100%;margin-left:0;margin-top:-.15rem;padding-bottom:.35rem}
  nav.primary ul{justify-content:flex-start;margin-left:-.45rem}
}

/* ===== Accessibility ===== */
:focus-visible{outline:3px solid #94a3b8;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:600px){
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left;align-items:flex-start}
  .version-bar{position:static}
  .preview iframe{height:340px}
}