/* ============================================================
   Fab Academy docs — shared design system
   Grey and white palette, Open Sans + Ubuntu Condensed,
   monospace only for code. Fully responsive.
   ============================================================ */

:root{
  --bg:#f4f4f4;
  --panel:#ffffff;
  --ink:#262626;
  --muted:#5e5e5e;
  --faint:#8c8c8c;
  --line:#e3e3e3;
  --line2:#cccccc;
  --accent:#4a4a4a;
  --accent-ink:#ffffff;
  --maxw:60rem;
  --pad:clamp(1.1rem,4vw,2.4rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Open Sans',system-ui,sans-serif;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* thin accent rule at very top */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;background:var(--accent);z-index:50}

/* ---------- top bar ---------- */
header.bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--pad);
  background:rgba(244,244,244,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line2);
}
.bar .home{font-family:'Open Sans',system-ui,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
.bar .home span{color:var(--accent)}
.bar nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.bar nav a{font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bar nav a:hover{color:var(--accent);text-decoration:none}
@media(max-width:560px){.bar nav{gap:.9rem}.bar nav a{font-size:.66rem}}

/* ---------- layout ---------- */
.wrap,.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.container{margin-top:0 !important}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(1.5rem,4vw,2.5rem)}
.eyebrow,.kicker{
  font-family:'Open Sans',system-ui,sans-serif;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;
}
.hero h1,h1{
  font-family:'Open Sans',system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.3rem,6.5vw,4.4rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:1.1rem;
}
.hero p.intro,.intro{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:42rem}

/* spec / meta row */
.meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:2rem;
}
.meta div{background:var(--bg);padding:.8rem 1rem}
.meta .k{font-family:'Open Sans',system-ui,sans-serif;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:.2rem}
.meta .v{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;font-size:.95rem}

/* ---------- table of contents ---------- */
.toc{margin:2.2rem 0 .5rem;padding:1.1rem 1.3rem;background:var(--panel);border:1px solid var(--line)}
.toc h2{font-family:'Open Sans',system-ui,sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.7rem;border:0;padding:0}
.toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem}
.toc li{font-size:.95rem}
.toc a{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink)}
.toc a:hover{color:var(--accent);text-decoration:none}
.toc a .n{font-family:'Open Sans',system-ui,sans-serif;font-size:.78rem;color:var(--accent)}

/* ---------- sections ---------- */
section.tool,.doc-section{padding:clamp(2.2rem,5vw,3.4rem) 0;border-top:2px solid var(--ink)}
section.tool h2,h2{font-family:'Open Sans',system-ui,sans-serif;font-weight:700;font-size:clamp(1.6rem,3.5vw,2.2rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:.5rem}
h3{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;font-size:clamp(1.15rem,2.2vw,1.4rem);margin:1.8rem 0 .5rem}
.lead{color:var(--ink);font-size:1.06rem;margin:.5rem 0 1.2rem}
p{margin-bottom:1rem;max-width:46rem}
.muted{color:var(--muted)}
strong{font-weight:600}

ul,ol{margin:0 0 1.1rem 1.3rem}
li{margin-bottom:.4rem}

/* numbered steps */
ol.steps{list-style:none;counter-reset:s;margin:1rem 0 1.4rem}
ol.steps li{counter-increment:s;position:relative;padding-left:2.6rem;margin-bottom:.7rem}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.15rem;
  font-family:'Open Sans',system-ui,sans-serif;font-size:.8rem;font-weight:600;color:var(--accent);
}

/* ---------- image grid ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem;margin:1.4rem 0}
figure.shot{margin:0;background:var(--panel);border:1px solid var(--line);overflow:hidden}
figure.shot img{width:100%;height:11rem;object-fit:cover;background:#e8e8e8}
figure.shot figcaption{padding:.55rem .8rem;font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;color:var(--muted);line-height:1.45;border-top:1px solid var(--line)}
figure.wide{grid-column:1/-1}
figure.wide img{height:auto;max-height:34rem;object-fit:contain;padding:.4rem}
video.shot,video.media{width:100%;border:1px solid var(--line2);background:#000;margin:1.2rem 0}
img.media{width:100%;border:1px solid var(--line);margin:.6rem 0}

/* ---------- callout / note ---------- */
.note,.highlight-box{background:var(--panel);border-left:3px solid var(--accent);padding:1rem 1.2rem;margin:1.4rem 0;font-size:.98rem}
.note p,.highlight-box p{margin:0;max-width:none}

/* ---------- picture placeholder ---------- */
.photo-ph{
  border:2px dashed var(--line2);
  background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 14px,#ececec 14px,#ececec 28px);
  padding:1.8rem 1.4rem;margin:1.4rem 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
}
.photo-ph-tag{font-family:'Open Sans',system-ui,sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:.3rem .75rem;font-weight:600}
.photo-ph-title{color:var(--ink);font-size:.95rem;max-width:34rem;line-height:1.5;margin:0}
.photo-ph-title b{color:var(--accent)}

/* ---------- code ---------- */
.code-block{background:#ededed;border:1px solid var(--line2);margin:1.1rem 0;overflow:hidden}
.code-block .code-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .9rem;background:#e0e0e0;border-bottom:1px solid var(--line2);font-family:'Open Sans',system-ui,sans-serif;font-size:.7rem;letter-spacing:.05em;color:#666}
.code-block pre{margin:0;padding:1rem 1.1rem;overflow-x:auto}
.code-block code{font-family:'Open Sans',system-ui,sans-serif;font-size:.82rem;line-height:1.6;color:#1f1f1f;white-space:pre}
p > code,li > code{font-family:'Open Sans',system-ui,sans-serif;font-size:.85em;background:var(--panel);border:1px solid var(--line);padding:.05rem .3rem;color:var(--accent)}

/* ---------- files / downloads ---------- */
.files{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0}
.files a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ededed;border:1px solid var(--line2);font-family:'Open Sans',system-ui,sans-serif;font-size:.82rem;color:var(--ink)}
.files a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;margin:1rem 0}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
th{font-family:'Open Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--panel)}

/* ---------- prev / next ---------- */
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:2rem 0;border-top:2px solid var(--ink)}
.pager a{font-family:'Open Sans',system-ui,sans-serif;font-size:.8rem;color:var(--muted)}

/* ---------- footer ---------- */
footer{padding:clamp(2rem,5vw,3rem) var(--pad) 4rem;border-top:1px solid var(--line2);color:var(--muted);font-size:.85rem;font-family:'Open Sans',system-ui,sans-serif}
footer .wrap{padding-inline:0}
footer a{color:var(--muted)}

/* hide leftover dark-theme widgets if a page still has them */
.cursor,.cursor-ring,.mobile-nav,.marquee-strip,.page-hero-grid{display:none !important}

/* ============================================================
   Compatibility layer — restyles the original rich pages
   (page-hero, steps, cards, placeholders) into the new theme
   ============================================================ */
.reveal{opacity:1 !important;transform:none !important}
.marquee-strip,.page-hero-grid,.page-hero-bg,.hero-noise{display:none !important}

.page-hero{position:relative;padding:clamp(2rem,6vw,4rem) 0;border-bottom:2px solid var(--ink)}
.page-hero-content{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;font-family:'Open Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.breadcrumb a{color:var(--muted)} .breadcrumb .current{color:var(--accent)} .breadcrumb .sep{color:var(--line2)}
.week-badge{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line2);padding:.3rem .8rem;margin-bottom:1.1rem;background:var(--panel)}
.week-badge-num,.week-badge-label{font-family:'Open Sans',system-ui,sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.week-badge-dot{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.page-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(2.2rem,6vw,4rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:1rem}
.page-title .accent{color:var(--accent)}
.page-subtitle{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:42rem;margin-bottom:1.6rem}
.hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.hero-meta .meta-item{background:var(--bg);padding:.7rem .9rem;display:flex;flex-direction:column;gap:.2rem}
.meta-label{font-family:'Open Sans',system-ui,sans-serif;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.meta-value{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;font-size:.9rem;color:var(--ink)}

.page-body{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);padding-bottom:4rem}
.sec-label{font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.sec-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:700;font-size:clamp(1.6rem,3.5vw,2.2rem);line-height:1.1;margin-bottom:.8rem}
.body-text{color:var(--ink);max-width:46rem;margin-bottom:1rem}

.cards,.card-grid,.info-grid,.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem;margin:1.4rem 0}
.card{background:var(--panel);border:1px solid var(--line);padding:1.2rem}
.card-icon{font-size:1.4rem;margin-bottom:.5rem}
.card-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;margin-bottom:.4rem}
.card-body{color:var(--muted);font-size:.92rem}

.steps{margin:1.2rem 0}
.step,.step-item{padding:1.3rem 0;border-top:1px solid var(--line)}
.step-num{display:inline-block;font-family:'Open Sans',system-ui,sans-serif;font-size:.75rem;font-weight:600;color:var(--accent);margin-bottom:.35rem}
.step-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;font-size:1.1rem;margin-bottom:.4rem}
.step-body,.step-desc{color:var(--ink);max-width:46rem}
.step-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0}
.tag{font-family:'Open Sans',system-ui,sans-serif;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);padding:.2rem .5rem}

.fig-placeholder{border:2px dashed var(--line2);background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 14px,#ececec 14px,#ececec 28px);min-height:9rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.4rem;text-align:center;margin:1rem 0}
.ph-icon{font-size:1.6rem;opacity:.55}
.ph-label{font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}

.conclusion-card{background:var(--panel);border:1px solid var(--line);padding:1.4rem;margin-top:1rem}
.tag-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:1rem 0}
.spec-item{background:var(--bg);padding:.7rem .9rem}
.spec-label{font-family:'Open Sans',system-ui,sans-serif;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.spec-value{font-family:'Open Sans',system-ui,sans-serif;font-weight:600}
.spec-value .unit{color:var(--muted);font-weight:400;font-size:.8em;margin-left:.2rem}
.caption{font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;color:var(--muted);margin-top:.4rem}
.vid-wrap{margin:1rem 0}
.dl-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ededed;border:1px solid var(--line2);font-family:'Open Sans',system-ui,sans-serif;font-size:.8rem;color:var(--ink)}
.phase-banner{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-top:2px solid var(--ink);margin-top:1.6rem}
.phase-num{font-family:'Open Sans',system-ui,sans-serif;color:var(--accent);font-size:.8rem}
.phase-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:700;font-size:1.2rem}
.phase-sub{color:var(--muted);font-size:.9rem}

.network-diagram{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch;margin:1.4rem 0}
.node-box{background:var(--panel);border:1px solid var(--line2);padding:1rem;flex:1 1 13rem}
.node-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:600}
.node-role,.node-sub{color:var(--muted);font-size:.85rem}
.node-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.node-arrow,.arrow-line,.arrow-label{color:var(--accent);font-family:'Open Sans',system-ui,sans-serif;font-size:.8rem;align-self:center}
.reading-bar{height:8px;background:var(--line);border:1px solid var(--line2)}

.footer-bottom,.footer-copy{color:var(--muted)}
.footer-nav{display:flex;flex-wrap:wrap;gap:1rem}
.footer-nav a{color:var(--muted)}
.accent{color:var(--accent)} .gold{color:var(--accent)} .green{color:#2c7a4b} .orange{color:var(--accent)}

/* fixes for converted rich pages */
.reading-bar{display:none !important}
.page-hero,.hero{margin-top:0 !important}
.grid-bg,.hero-noise,.back-link.dummy{display:none}
.two-col,.three-col,.specs-layout,.proto-grid,.stagger{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.1rem;margin:1.2rem 0}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chip,.badge,.card-type{font-family:'Open Sans',system-ui,sans-serif;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip{border:1px solid var(--line2);padding:.25rem .6rem}
.card-type{color:var(--accent);margin-bottom:.4rem;display:block}
.badge{display:inline-block;border:1px solid var(--line2);padding:.25rem .7rem;margin-bottom:1rem;background:var(--panel)}
.hero-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(2.3rem,6.5vw,4.4rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:1rem}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-sub,.esp-desc,.proto-desc,.card-body{color:var(--muted)}
.proto-item,.side-card,.esp-img,.info-card{background:var(--panel);border:1px solid var(--line);padding:1rem}
.proto-name,.esp-name{font-family:'Open Sans',system-ui,sans-serif;color:var(--accent)}
.spec-table td,.tools-table td{border:1px solid var(--line);padding:.5rem .7rem}
.task-list{list-style:none;margin-left:0}
.task-list li{padding-left:1.2rem;position:relative}
.task-list li::before{content:"–";position:absolute;left:0;color:var(--accent)}
.task-list li.extra{color:var(--muted)}
.back-link{font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;color:var(--muted)}
.img-wrap,.esp-img{margin:.7rem 0}
.steps-list .step-item{display:flex;gap:1rem}
.steps-list .step-num{color:var(--accent);font-family:'Open Sans',system-ui,sans-serif;font-weight:600}

/* ===== remove heavy divider lines (keep spacing) ===== */
section.tool,.doc-section,.phase-banner,.pager{border-top:none !important}
.page-hero{border-bottom:none !important}
.doc-section{padding-top:clamp(1.4rem,3vw,2rem)}

/* ===== week dropdown in the top bar ===== */
.topnav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.topnav > a{font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.topnav > a:hover{color:var(--accent);text-decoration:none}
details.weeks{position:relative}
details.weeks > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
details.weeks > summary::-webkit-details-marker{display:none}
details.weeks > summary::after{content:"▾";font-size:.7em}
details.weeks[open] > summary{color:var(--accent)}
.weeks-menu{position:absolute;right:0;top:calc(100% + .65rem);background:var(--panel);border:1px solid var(--line2);min-width:17rem;max-height:74vh;overflow-y:auto;z-index:60;box-shadow:0 14px 34px rgba(0,0,0,.14)}
.weeks-menu a{display:block;padding:.55rem .95rem;font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap}
.weeks-menu a:last-child{border-bottom:none}
.weeks-menu a:hover{background:var(--bg);color:var(--accent);text-decoration:none}
@media(max-width:560px){.weeks-menu{position:fixed;left:0;right:0;top:auto;min-width:0}}

/* ============================================================
   Home page (index.html) layout
   ============================================================ */
.home-wrap{width:100%;max-width:64rem;margin-inline:auto;padding-inline:var(--pad)}
.home-hero{padding:clamp(3rem,9vw,6rem) 0 clamp(2rem,5vw,3.5rem)}
.home-hero .eyebrow{margin-bottom:1.1rem}
.home-hero h1{font-family:'Open Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(3rem,12vw,8rem);line-height:.92;letter-spacing:-.03em;margin-bottom:1.4rem}
.home-hero h1 .o{color:var(--accent)}
.home-hero .sub{font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--muted);max-width:38rem;margin-bottom:2rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;font-family:'Open Sans',system-ui,sans-serif;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);text-decoration:none}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:clamp(2.5rem,6vw,4rem) 0 1.4rem;padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--line)}
.sec-head h2{font-family:'Open Sans',system-ui,sans-serif;font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.01em}
.sec-head .tag{font-family:'Open Sans',system-ui,sans-serif;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.weeks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.week-card{background:var(--bg);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;min-height:7rem;transition:background .15s}
.week-card:hover{background:var(--panel);text-decoration:none}
.week-card .num{font-family:'Open Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.week-card .name{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.25}
.week-card .go{margin-top:auto;font-family:'Open Sans',system-ui,sans-serif;font-size:.9rem;color:var(--muted)}
.week-card:hover .go{color:var(--accent)}
.project{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
@media(max-width:760px){.project{grid-template-columns:1fr}}
.project img{width:100%;border:1px solid var(--line);background:var(--panel)}
.project h3{font-family:'Open Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:1rem;letter-spacing:-.01em}
.project p{color:var(--muted);margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0}
.chips span{font-family:'Open Sans',system-ui,sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line2);padding:.25rem .6rem}
.about{display:grid;grid-template-columns:.85fr 1.3fr;gap:2.6rem;align-items:start}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.about-photo{width:100%;border:1px solid var(--line2);filter:grayscale(15%)}
.about h3{font-family:'Open Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2rem);margin-bottom:1rem}
.about p{color:var(--muted);margin-bottom:1rem}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.badges span{font-family:'Open Sans',system-ui,sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:.25rem .6rem}
.timeline{margin-top:1.8rem;border-left:2px solid var(--accent);padding-left:1.3rem;display:flex;flex-direction:column;gap:1.3rem}
.t-year{font-family:'Open Sans',system-ui,sans-serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.t-title{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;font-size:1.05rem;margin:.15rem 0 .25rem}
.t-desc{color:var(--muted);font-size:.92rem}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.contact-card{background:var(--panel);border:1px solid var(--line2);padding:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.contact-card:hover{border-color:var(--accent);text-decoration:none}
.contact-card .ct{font-family:'Open Sans',system-ui,sans-serif;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.contact-card .cv{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;color:var(--ink)}
.home-foot{border-top:1px solid var(--line2);margin-top:clamp(3rem,7vw,5rem);padding:2.5rem 0 4rem;color:var(--muted);font-family:'Open Sans',system-ui,sans-serif;font-size:.8rem}

/* keep code blocks monospace even though the UI font is Open Sans */
.code-block code,.code-block pre,pre,p > code,li > code{font-family:Consolas,'SF Mono',ui-monospace,'Courier New',monospace}

/* Ubuntu Condensed for headings/display, Open Sans for body */
.bar .home,.hero h1,h1,.meta .v,section.tool h2,h2,h3,.page-title,.meta-value,.sec-title,.card-title,.step-title,.spec-value,.phase-title,.node-title,.hero-title,.home-hero h1,.sec-head h2,.week-card .name,.project h3,.about h3,.t-title,.contact-card .cv{font-family:'Ubuntu Condensed','Arial Narrow',sans-serif}

/* make every video fit the container width on any screen */
video{max-width:100%;height:auto;display:block}

/* output device comparison cards — clean key/value findings list */
.output-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem;margin:1.4rem 0}
.output-card{background:var(--panel);border:1px solid var(--line)}
.output-card-head{padding:.7rem .9rem;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:.2rem}
.output-badge{font-family:'Open Sans',system-ui,sans-serif;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.output-card-title{font-family:'Ubuntu Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink)}
.output-card-body{padding:.3rem .9rem .6rem}
.output-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.output-row:last-child{border-bottom:none}
.output-row-label{color:var(--muted);font-size:.88rem}
.output-row-value{color:var(--ink);font-weight:600;font-size:.88rem;text-align:right}

/* replaceable placeholder image figures */
.ph-figure{margin:1.4rem 0;border:1px solid var(--line2);background:var(--panel)}
.ph-figure img{width:100%;height:auto;display:block}
.ph-figure figcaption{padding:.5rem .8rem;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);line-height:1.45}
.img-grid .ph-figure,.shots .ph-figure{margin:0}

/* copy-code link */
.code-block{position:relative}
.code-head .copy-trigger{cursor:pointer;user-select:none;transition:color .15s}
.code-head .copy-trigger:hover{color:var(--accent)}
.copy-btn{position:absolute;top:.4rem;right:.5rem;cursor:pointer;background:#e0e0e0;border:1px solid var(--line2);font-family:'Open Sans',system-ui,sans-serif;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:#666;padding:.2rem .55rem}
.copy-btn:hover{color:var(--accent);border-color:var(--accent)}

/* sensor / tool comparison cards — clean aligned key/value rows */
.sensor-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem;margin:1.4rem 0}
.sensor-card{background:var(--panel);border:1px solid var(--line)}
.sensor-card-head{padding:.7rem .9rem;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:.25rem}
.sensor-badge{font-family:'Open Sans',system-ui,sans-serif;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sensor-card-title{font-family:'Ubuntu Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink);line-height:1.2}
.sensor-card-body{padding:.3rem .9rem .6rem}
.sensor-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.sensor-row:last-child{border-bottom:none}
.sensor-row-label{color:var(--muted);font-size:.85rem}
.sensor-row-value{color:var(--ink);font-weight:600;font-size:.85rem;text-align:right}

/* tool logo cards -> responsive columns */
.containe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1rem;margin:1.2rem 0}
.containe .card{background:var(--panel);border:1px solid var(--line);overflow:hidden}
.containe .card a{display:block;color:var(--ink);text-decoration:none}
.containe .card img{width:100%;height:8rem;object-fit:contain;padding:1.1rem;background:#fff}
.containe .card p{padding:.6rem;text-align:center;font-weight:600;border-top:1px solid var(--line)}
.containe .card:hover{border-color:var(--accent)}

/* font awesome decorative icons */
.card-icon,.ph-icon{color:var(--accent)}
.contact-icon i,.card-icon i,.ph-icon i{color:var(--accent)}