/* ============================================================
   Samara Baidwan — portfolio ("Field Station")
   Dark navy by default; html[data-theme="light"] switches the
   tokens. Components use tokens only, never raw colors.
   ============================================================ */

:root{
  color-scheme:dark;
  --bg:#0b1a28;
  --card:#10243a;
  --card-2:#163050;
  --ink:#e8eef3;
  --ink-2:#c4d1dc;
  --ink-3:#a3b6c6;
  --border:rgba(232,238,243,.12);
  --border-2:rgba(232,238,243,.24);
  --hover:rgba(232,238,243,.07);
  --accent:#ff9a57;
  --accent-ink:#ff9a57;
  --accent-soft:#ffc39b;
  --accent-wash:rgba(255,154,87,.14);
  --on-accent:#0b1a28;
  --sea:#6fd3cb;
  --team-ink:#6fd3cb;
  --team-wash:rgba(111,211,203,.13);
  --scrim:rgba(5,12,20,.86);
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:none;
  --shadow:none;
  --shadow-lg:0 18px 40px -24px rgba(0,0,0,.6);
  --maxw:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Chivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#eef2f4;
  --card:#ffffff;
  --card-2:#f3f6f8;
  --ink:#0b1a28;
  --ink-2:#33475a;
  --ink-3:#4c5f70;
  --border:rgba(11,26,40,.11);
  --border-2:rgba(11,26,40,.22);
  --hover:rgba(11,26,40,.06);
  --accent:#b4440e;
  --accent-ink:#b4440e;
  --accent-soft:#e07a43;
  --accent-wash:rgba(180,68,14,.09);
  --on-accent:#ffffff;
  --sea:#0d6a64;
  --team-ink:#0d6a64;
  --team-wash:rgba(13,106,100,.1);
  --scrim:rgba(11,26,40,.8);
  --shadow-lg:0 18px 40px -26px rgba(11,26,40,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none !important}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
::selection{background:var(--accent-wash)}

.skip-link{position:absolute;left:-999px;top:0;z-index:2000;background:var(--accent);color:var(--on-accent);font-weight:700;padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,3.5vw,1.6rem);display:flex;align-items:center;gap:.3rem;min-height:68px}
.brand{display:flex;align-items:center;font-weight:800;font-size:1.08rem;letter-spacing:-.02em;margin-right:auto;padding:.4rem 0}
.brand-dot{color:var(--accent)}
.nav-links{display:flex;gap:.1rem;margin-right:.4rem}
.nav-links a{font-size:.93rem;font-weight:500;color:var(--ink-2);padding:.6rem .8rem;border-radius:8px;transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--ink);background:var(--hover)}
.nav-mail,.nav-ico,.theme-toggle{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:22px;
  color:var(--ink-2);background:none;border:0;cursor:pointer;transition:color .2s,background .2s;
}
.nav-mail:hover,.nav-ico:hover,.theme-toggle:hover{color:var(--ink);background:var(--hover)}
.theme-toggle{border:1px solid var(--border-2)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:block}
.theme-toggle .i-moon{display:none}
html[data-theme="light"] .theme-toggle .i-sun{display:none}
html[data-theme="light"] .theme-toggle .i-moon{display:block}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{max-width:var(--maxw);margin:0 auto;display:none;flex-direction:column;padding:.3rem clamp(1rem,3.5vw,1.6rem) .9rem}
.mobile-menu a{padding:.85rem .4rem;color:var(--ink-2);font-weight:500;border-top:1px solid var(--border)}
.mobile-menu a:hover,.mobile-menu a[aria-current="page"]{color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,3.5vw,1.6rem)}
.section{padding:clamp(3rem,6vw,4.8rem) 0}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;margin-bottom:clamp(1.4rem,3vw,2rem)}
.sec-label{order:2;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sea);margin:0}
.sec-title{font-size:clamp(1.9rem,4.4vw,2.6rem);margin:0}
.sec-title.big{font-size:clamp(2.2rem,5.6vw,3.4rem)}
.sec-sub{flex-basis:100%;color:var(--ink-2);max-width:60ch;margin:.2rem 0 0}

/* ---------- hero ---------- */
.hero{padding:clamp(2.2rem,6vw,4.2rem) 0 clamp(2.6rem,5vw,3.6rem)}
.hero-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(1.4rem,3vw,2rem)}
.hero-main{flex:999 1 30rem;min-width:0;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sea);margin:0 0 1rem}
.hero-name{font-size:clamp(3rem,8vw,5.2rem);font-weight:800;line-height:.95;letter-spacing:-.035em;margin:0}
.hero-bio{font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.4;color:var(--ink);max-width:38ch;margin:1.3rem 0 0;text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:0 1.4rem;border-radius:24px;font-weight:700;font-size:.95rem;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-soft)}
.btn-ghost{border:1px solid var(--border-2);color:var(--ink);font-weight:500}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ---------- live wind panel ---------- */
.wind{flex:1 1 21rem;margin:0;padding:1.4rem;display:flex;flex-direction:column;gap:1rem;touch-action:pan-y}
.wind-head{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.wind-status{display:inline-flex;align-items:center;gap:.4rem;color:var(--sea)}
.wind-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.wind[data-state="loading"] .wind-status,.wind[data-state="offline"] .wind-status{color:var(--ink-3)}
.wind[data-state="cursor"] .wind-status{color:var(--accent-ink)}
.wind-instruments{display:flex;align-items:center;justify-content:center;gap:.6rem}
.wind-vane{width:min(100%,220px);height:auto}
.wind-cups{width:96px;height:96px;flex:none}
.wind-instruments .ring{fill:none;stroke:var(--border-2);stroke-width:1}
.wind-instruments .card-pt{font-family:var(--mono);font-size:13px;fill:var(--ink-3)}
.wind-instruments .arrow{fill:var(--accent)}
.wind-instruments .shaft,.wind-instruments .arm{fill:var(--ink);stroke:var(--ink)}
.wind-instruments .arm{stroke-width:3}
.wind-instruments .fin{fill:var(--sea)}
.wind-instruments .cup{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.wind-instruments .hub{fill:var(--card);stroke:var(--ink);stroke-width:3}
.wind-read{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:.8rem;margin:0;font-family:var(--mono)}
.wind-read dt{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wind-read dd{margin:.1rem 0 0;font-size:1.15rem;white-space:nowrap;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.wind-cap{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink-3)}
.wind-cap a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.wind-cap a:hover{color:var(--accent-ink)}

/* ---------- about ---------- */
.about-teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;padding:clamp(1.4rem,3vw,2rem)}
.about-teaser p{margin:0;max-width:44ch;font-size:clamp(1.15rem,2.4vw,1.4rem);font-weight:700;line-height:1.35;letter-spacing:-.01em}

/* the About page */
.a-page{padding:clamp(2.4rem,6vw,4rem) 0 clamp(3rem,6vw,4.5rem)}
.a-grid{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,3.5rem);align-items:flex-start}
.a-text{flex:999 1 30rem;min-width:0;max-width:42rem}
.a-title{font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 1.6rem}
.a-lead{font-size:1.25rem;line-height:1.55;color:var(--ink);margin:0 0 1.2rem}
.a-text p{margin:0 0 1.2rem;color:var(--ink-2)}
.a-side{flex:1 1 18rem;max-width:25rem;display:flex;flex-direction:column;gap:1.4rem}
.a-photo{margin:0}
.a-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}
.a-photo figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.a-cta{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- projects ---------- */
.projects{display:grid;gap:clamp(1.2rem,2.6vw,1.7rem)}
.project{
  padding:clamp(1.2rem,2.6vw,1.8rem);
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(1.1rem,2.4vw,1.9rem);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.project:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.project--text .p-body{flex:1 1 100%}
/* an older card that keeps its clip and CAD to the left of the write-up,
   sized like the focal media on the cards above */
.project--split .p-gallery{flex:1 1 36%;max-width:420px}
.project--split .p-body{flex:1 1 56%}
/* match the 4:3 focal media on the cards above */
.project--split .media img,.project--split .media video{aspect-ratio:4/3;object-fit:cover}
.now-card{border-color:var(--border-2)}
.p-top{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:1rem}
.date{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--ink-3)}
.chip{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;color:var(--accent-ink);background:var(--accent-wash)}
.chip-team{color:var(--team-ink);background:var(--team-wash)}
.project h3{font-size:clamp(1.2rem,2.4vw,1.55rem);margin:0 0 .6rem}
.one-liner{color:var(--ink);font-weight:600;font-size:1rem;margin:0 0 .85rem;max-width:70ch}
.desc{color:var(--ink-2);font-size:.95rem;margin:0 0 1.1rem;max-width:82ch}
.team{font-size:.85rem;color:var(--ink-2);margin:0 0 1.1rem}
.team span{font-weight:700;color:var(--ink)}
.result{font-size:.86rem;color:var(--ink-2);border-radius:12px;padding:.85rem 1.1rem;margin:0 0 1.2rem;max-width:82ch;background:var(--accent-wash)}
.result span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem;color:var(--accent-ink)}
/* what this person did, kept visually separate from what the team found so
   the two never read as the same claim */
.contribution{
  font-size:.92rem;color:var(--ink-2);max-width:82ch;
  margin:0 0 1.2rem;padding-left:1rem;border-left:3px solid var(--border-2);
}
.contribution span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem;color:var(--ink-3)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 0}
.tags li{font-size:.77rem;font-weight:500;color:var(--ink-2);background:var(--card-2);border:1px solid var(--border);padding:.3rem .68rem;border-radius:8px}

/* focal media */
.p-focal{
  flex:1 1 36%;max-width:420px;margin:0;
  border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--card-2);
}
.p-focal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.p-focal:hover img{transform:scale(1.03)}
.p-body{flex:1 1 56%;min-width:0}

/* cut-out renders carry their own transparent background, so no frame and
   no aspect-ratio crop — the whole model stays visible */
.p-focal--cutout{border:0;background:none;max-width:380px}
.p-focal--cutout img{aspect-ratio:auto;object-fit:contain}
.p-focal--cutout:hover img{transform:none}

/* a landscape render carrying its own generated background keeps that
   background and its own aspect ratio, so nothing in the model is cropped */
.p-focal--render{max-width:460px}
.p-focal--render img{aspect-ratio:1360/748;object-fit:cover}
.p-focal--render:hover img{transform:none}

/* media gallery (video + CAD renders) */
.p-gallery{display:flex;flex-wrap:wrap;gap:clamp(.9rem,2vw,1.2rem) clamp(1rem,2.4vw,2rem);align-items:flex-start}
.media{flex:1 1 20rem;min-width:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.media img,.media video{width:100%;border-radius:16px;border:1px solid var(--border);display:block}
.media img{background:var(--card-2)}
.media video{background:#061019}
.media figcaption{font-size:.78rem;color:var(--ink-3)}

/* a media column that holds a captioned focal image plus a reel beneath it */
.p-media-col{flex:1 1 36%;max-width:420px;display:flex;flex-direction:column;gap:clamp(.8rem,1.8vw,1.1rem)}
.p-focal--captioned{display:flex;flex-direction:column;gap:.5rem;border:0;background:none;overflow:visible}
.p-focal--captioned img{border-radius:16px;border:1px solid var(--border);background:var(--card-2)}
.p-focal--captioned figcaption{font-size:.78rem;color:var(--ink-3)}

/* slideshow */
/* pan-y keeps vertical page scrolling native while horizontal drags reach the
   swipe handler instead of being eaten by the scroller */
.slideshow{flex:0 0 auto;width:100%;touch-action:pan-y}
.slides{
  position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:var(--card-2);
}
/* stacked rather than display:none, so every slide is laid out and lazy-loads
   while the reel is still off-screen instead of popping in mid-rotation */
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;opacity:0;transition:opacity .5s var(--ease)}
.slide.is-active{opacity:1;z-index:1}
/* a reel of upright frames rather than the default landscape one */
.slideshow--tall .slides{aspect-ratio:3/4}
.slide--photo,.slide--video{display:block;margin:0}
.slide--photo img,.slide--video video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* the caption sits above the clip rather than below it, so it never collides
   with the playback controls */
.slide--video figcaption{
  position:absolute;left:0;right:0;top:0;padding:.5rem .75rem 2rem;
  font-size:.75rem;color:#fff;
  /* holds enough density under the text to stay legible over a bright frame */
  background:linear-gradient(rgba(5,12,20,.8) 0%,rgba(5,12,20,.62) 55%,transparent 100%);
}
.slide-dots{display:flex;gap:.1rem;margin-top:.35rem}
/* a caption set under the frame instead of over the picture */
.slideshow .slide-caption{font-size:.82rem;color:var(--ink-3);line-height:1.4;margin:.15rem 0 0}
.dot{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--border-2);transition:background .25s,transform .25s var(--ease)}
.dot.is-active::before{background:var(--accent);transform:scale(1.3)}

.card-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:1.2rem}
.conf-note{font-size:.85rem;font-weight:600;color:var(--accent-ink);margin:0}

/* outbound document link */
.link-out{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;font-size:.85rem;font-weight:600;color:var(--accent-ink);transition:color .2s}
.link-out span{font-weight:500;color:var(--ink-3)}
.link-out svg{flex:none}
.link-out:hover{color:var(--accent);text-decoration:underline}

/* ---------- makerspace ---------- */
.space-card{padding:clamp(1.6rem,3.4vw,2.6rem)}
.space-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.9rem}
.space-card h3{font-size:clamp(1.3rem,2.8vw,1.75rem);margin:0 0 .5rem}
.space-card .desc{max-width:82ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0 1.4rem}
.stat{background:var(--card-2);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.2rem}
.stat b{display:block;font-family:var(--mono);font-size:clamp(1.4rem,3.4vw,1.9rem);font-weight:500;letter-spacing:-.03em;color:var(--accent-ink);line-height:1.1}
.stat span{font-size:.82rem;color:var(--ink-2)}

/* ---------- interests ---------- */
.interests-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1rem,2.4vw,1.5rem);align-items:start}
.interests-grid>.card{padding:clamp(1.4rem,2.8vw,2rem)}
.subhead{font-size:1.05rem;margin:0 0 1.1rem}
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem}
.pill-list li{font-size:.86rem;font-weight:500;color:var(--ink);background:var(--card-2);border:1px solid var(--border);padding:.5rem .95rem;border-radius:999px;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.pill-list li:hover{border-color:var(--accent);background:var(--card);transform:translateY(-2px)}
.body-text{color:var(--ink-2);margin:0}

/* ---------- contact ---------- */
.section-contact{padding-bottom:clamp(4rem,8vw,6rem)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.5rem)}
.contact-card{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.35rem;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
a.contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.contact-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.contact-value{font-weight:700;font-size:1.02rem;color:var(--ink);word-break:break-word;letter-spacing:-.02em}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border);padding:1.8rem 0;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--ink-3);font-size:.85rem}
.footer a{color:var(--ink-2);font-weight:500;transition:color .2s}
.footer a:hover{color:var(--accent-ink)}

/* sections are never hidden on approach: an entrance fade means content is
   unreadable for as long as it runs, and the page has to work on a slow
   scroll and an anchor jump alike */
section[id]{scroll-margin-top:5rem}

/* ---------- project summary card ---------- */
/* The homepage card is a summary now: image, the label line, a hook, a few
   numbers, and a link out to the full write-up on its own page. */
.proj-label{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;color:var(--sea);margin:0 0 1rem}
.pcard-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  gap:1rem;margin:0 0 1.4rem;padding-top:1.15rem;border-top:1px solid var(--border);
}
.pcard-stats li{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pcard-stats b{font-family:var(--mono);font-size:1.15rem;font-weight:500;letter-spacing:0;line-height:1.15;color:var(--accent-ink)}
.pcard-stats span{font-size:.79rem;color:var(--ink-3);line-height:1.35}
.pcard-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:700;color:var(--accent-ink);transition:color .2s,gap .25s var(--ease)}
.pcard-link:hover{color:var(--accent);gap:.7rem}

/* ---------- single project page ---------- */
.p-page{padding:clamp(2.2rem,5vw,3.4rem) 0 clamp(3rem,6vw,4.5rem)}
/* a narrower measure than the homepage: this is a page of prose, and the
   side-by-side figures still have room at this width */
.p-wrap{max-width:900px}
.p-back{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--ink-3);margin-bottom:1.8rem;transition:color .2s,gap .25s var(--ease)}
.p-back:hover{color:var(--accent-ink);gap:.7rem}
.p-title{font-size:clamp(1.9rem,4.6vw,2.9rem);margin:0 0 1.3rem}
.p-lede{font-size:1.06rem;color:var(--ink-2);margin:0 0 2.2rem;max-width:68ch}
.p-figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2.4vw,1.5rem);margin:0 0 2.6rem}
.p-fig{display:flex;flex-direction:column;gap:.55rem;margin:0}
.p-fig img{width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card-2)}
/* a pair can be any two shapes, and a board diagram is not something that can
   be cropped, so the frame takes a fixed ratio and the drawing sits whole
   inside it. That also lines the two captions up whatever the sources are. */
.p-figs .p-fig img{aspect-ratio:4/3;object-fit:contain}
/* two diagrams already the same shape do not need that frame, and forcing one
   on them would only add bars down the sides */
.p-figs .p-fig--natural img{aspect-ratio:auto;object-fit:fill}
/* a figure that follows its text across the full measure rather than sitting beside it */
.p-fig--wide{margin:1.2rem 0 0}
/* diagrams open full size, as they did on the card */
.p-fig .zoom{display:block;cursor:zoom-in}
.p-fig .zoom:hover img{border-color:var(--accent)}
.p-fig figcaption{font-size:.79rem;color:var(--ink-3)}
/* a lone figure sits in the middle of the measure rather than stretching */
.p-fig--solo{max-width:520px;margin:2.2rem auto 0}
.p-sec{margin:0 0 2.4rem}
.p-sec h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:0 0 .95rem}
.p-sec p{color:var(--ink-2);margin:0 0 1.05rem;max-width:74ch}
.p-sec p:last-child{margin-bottom:0}
/* one section carries its own soft panel so it reads apart from the rest of
   the page without breaking the page's tone */
.p-sec--highlight{
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  background:var(--card);
}
.p-foot{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.p-tags{margin-bottom:1.7rem}
.p-next{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700;color:var(--accent-ink);transition:color .2s,gap .25s var(--ease)}
.p-next:hover{color:var(--accent);gap:.75rem}
.p-site{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;font-weight:700;color:var(--accent-ink);margin-bottom:1.6rem;transition:color .2s,gap .25s var(--ease)}
.p-site:hover{color:var(--accent);gap:.65rem}

/* the role, tools and testing summary under the masthead. the type is set to
   the size that keeps the whole line on one row at the reading measure, and
   the padding is trimmed to buy the width to do it. */
/* the poster, between the last section and the closing rule */
.p-poster{display:inline-flex;vertical-align:top;margin:0 0 .4rem}

.p-facts{
  font-family:var(--mono);font-size:.72rem;color:var(--ink-3);line-height:1.7;
  margin:0 0 2.2rem;padding:.8rem .6rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card-2);
}

/* a plan drawn as a sequence of steps, left to right and then down on phones */
.p-steps{
  list-style:none;counter-reset:step;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem;
}
.p-steps li{
  counter-increment:step;position:relative;
  padding:1rem .85rem 1rem 2.7rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card-2);
  font-size:.87rem;line-height:1.4;color:var(--ink-2);
}
.p-steps li::before{
  content:counter(step);position:absolute;left:.85rem;top:1rem;
  width:1.3rem;height:1.3rem;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:800;
}
/* a finished step shows a check in place of its number */
.p-steps li.is-done::before{content:"✓";font-size:.8rem}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* two clips under the masthead */
.p-hero2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.6vw,1.6rem);margin:0 0 2.6rem}
.p-hero2 figure{display:flex;flex-direction:column;gap:.55rem;margin:0}
.p-hero2 video,.p-hero2 img{
  width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--card-2);display:block;
}
/* a clip letterboxes against dark; a photograph keeps the card tone, so no
   dark rim shows through the rounded corners */
.p-hero2 video{background:#061019}
.p-hero2 figcaption{font-size:.82rem;color:var(--ink-3);text-align:center}

/* text on one side, its media on the other, alternating down the page */
.mrow{display:grid;grid-template-columns:55fr 45fr;gap:clamp(1.4rem,3.4vw,2.6rem);align-items:start;margin:2rem 0 2.8rem}
.mrow:first-of-type{margin-top:2rem}
.mrow--flip{grid-template-columns:45fr 55fr}
.mrow--flip .mrow-text{grid-column:2;grid-row:1}
.mrow--flip .mrow-media{grid-column:1;grid-row:1}
.mrow-text h3{font-size:clamp(1.05rem,2.1vw,1.25rem);margin:0 0 .7rem}
/* a row heading sits in the outline at the same level as the section headings */
.mrow-text h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:0 0 .95rem}
/* a second heading in the same column, where one tall image spans both */
.mrow-text h2:not(:first-child){margin-top:2.2rem}
.mrow-media figure{display:flex;flex-direction:column;gap:.55rem;margin:0}
/* two pieces of media stacked in one column */
.mrow-media figure + figure{margin-top:1.1rem}
.mrow-media .slideshow + figure{margin-top:1.1rem}
.mrow-media .zoom{display:block;cursor:zoom-in}
.mrow-media .zoom:hover img{border-color:var(--accent)}

/* a short bulleted list of open questions inside a section */
.p-list{list-style:disc;padding-left:1.25rem;margin:0 0 1.05rem;max-width:74ch;color:var(--ink-2)}
.p-list li{margin-bottom:.35rem}
.p-list li::marker{color:var(--accent)}
.mrow-media img,.mrow-media video{
  width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--card-2);display:block;
}
.mrow-media video{background:#061019}
.mrow-media figcaption{font-size:.79rem;color:var(--ink-3)}
/* a summary set beside its picture rather than across the measure */
.mrow-text .p-lede{margin:0}

/* a process drawn as numbered steps, each with its name and one line of detail */
.methods{list-style:none;counter-reset:method;margin:0;padding:0}
.methods li{
  counter-increment:method;position:relative;padding-left:2.55rem;
  margin-bottom:1.05rem;font-size:.95rem;line-height:1.55;color:var(--ink-2);
}
.methods li:last-child{margin-bottom:0}
.methods li::before{
  content:counter(method);position:absolute;left:0;top:.05rem;
  width:1.55rem;height:1.55rem;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:800;
}
.methods strong{color:var(--ink);font-weight:700}

/* three photos stacked in the column beside the steps, each opening full
   size. on wide screens the stack is pinned to the text's own height, so it
   stops level with the list rather than running past it */
.gallery{display:flex;flex-direction:column;gap:.55rem;min-height:0}
.gal-item{display:flex;flex-direction:column;gap:.35rem;margin:0;min-height:0}
.gal-open{
  display:block;width:100%;padding:0;border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--card-2);
  cursor:zoom-in;transition:border-color .2s;min-height:0;
}
.gal-open:hover,.gal-open:focus-visible{border-color:var(--accent)}
.gal-open img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s var(--ease)}
/* the charge-prep photo has its subjects high in the frame, so a wide crop
   needs to sit towards the top rather than centre on the buckets */
.gal-open img.gal-top{object-position:50% 15%}
.gal-open:hover img{transform:scale(1.05)}
.gal-item figcaption{font-size:.72rem;color:var(--ink-3);line-height:1.35}
@media (min-width:761px){
  .mrow--balanced{align-items:stretch}
  .mrow--balanced .mrow-media{position:relative;min-height:0}
  .mrow--balanced .gallery{position:absolute;inset:0}
  .mrow--balanced .gal-item{flex:1}
  .mrow--balanced .gal-open{flex:1;min-height:0}
  .mrow--balanced .gal-open img{height:100%;object-fit:cover}
}

/* the viewer a thumbnail opens into */
.lightbox{
  max-width:min(92vw,860px);max-height:88vh;padding:0;
  border:0;border-radius:var(--radius-sm);background:var(--card);
  color:var(--ink);overflow:hidden;
}
.lightbox::backdrop{background:var(--scrim)}
.lightbox img{display:block;width:100%;max-height:74vh;object-fit:contain;background:#061019}
.lightbox-cap{margin:0;padding:.75rem .9rem;font-size:.84rem;color:var(--ink-2)}
.lightbox-close{
  position:absolute;top:.55rem;right:.55rem;z-index:2;
  width:34px;height:34px;padding:0;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(5,12,20,.66);transition:background .2s;
}
.lightbox-close:hover{background:rgba(5,12,20,.9)}
.lightbox-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* upright media is capped rather than allowed to run the height of the row.
   the two selectors are scoped so they outrank the width:100% above. */
.p-hero2 .upright,.mrow-media .upright{width:auto;max-width:100%;max-height:420px;margin:0 auto}

/* small openings onto a document that opens full size */
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.9rem;align-items:start}
.thumb{display:flex;flex-direction:column;gap:.35rem;cursor:zoom-in}
.thumb img{width:100%;border-radius:10px;border:1px solid var(--border);background:var(--card-2);transition:border-color .2s}
.thumb span{font-size:.75rem;color:var(--ink-3);line-height:1.45}
.thumb:hover img{border-color:var(--accent)}

/* a clip and the control that stops it */
.clip{position:relative;display:block}
/* hugs an upright clip so the control lands on the picture, not beside it */
.clip--tight{width:fit-content;max-width:100%;margin:0 auto}
.clip-toggle{
  position:absolute;right:.55rem;bottom:.55rem;z-index:2;
  width:36px;height:36px;padding:0;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(5,12,20,.6);transition:background .2s;
}
.clip-toggle:hover{background:rgba(5,12,20,.85)}
.clip-toggle svg{width:15px;height:15px;fill:currentColor}
.clip-toggle .i-play{display:none}
.clip-toggle[data-state="paused"] .i-play{display:block}
.clip-toggle[data-state="paused"] .i-pause{display:none}

/* a clip on a summary card takes the same frame the photos get */
.p-focal video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#061019}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links,.nav-mail,.nav-ico{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:flex}
  .interests-grid,.contact-grid{grid-template-columns:1fr}
  .p-focal,.p-media-col{flex:1 1 100%;max-width:none}
  .stats{grid-template-columns:1fr;gap:.7rem}
}
/* two board renders side by side stop being readable well before the phone
   breakpoint, so they stack while there is still width to split */
@media (max-width:700px){
  .p-figs,.p-hero2{grid-template-columns:1fr}
  .p-steps{grid-template-columns:1fr}
}
/* a media row stacks with the text first, then the media it belongs to */
@media (max-width:760px){
  .mrow,.mrow--flip{grid-template-columns:1fr;gap:1.3rem}
  .mrow--flip .mrow-text{grid-column:1;grid-row:1}
  .mrow--flip .mrow-media{grid-column:1;grid-row:2}
  /* the older cards put the write-up first once they stack */
  .project--split .p-gallery,.project--split .p-body{flex:1 1 100%}
  .project--split .p-gallery{order:2}
}
@media (min-width:901px){.mobile-menu{display:none !important}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* links inside running prose need to look like links */
.a-text p a,.p-sec p a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.a-text p a:hover,.p-sec p a:hover{text-decoration-thickness:2px}