/* ouzzane.com: design E (editorial look, timeline for Work, workshop grid for Lab). Dark first. */
:root {
  --bg:#121417; --fg:#e7e5df; --mute:#9a9890; --line:#2a2d31; --tile:#181b1f; --acc:#d9a35b;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  color-scheme: dark;
}
[data-theme=light] { --bg:#f7f5f0; --fg:#1d1c1a; --mute:#6b6862; --line:#dedad2; --tile:#ffffff; --acc:#a66a1f; color-scheme: light; }

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
.serif { font-family:var(--serif); }
.wrap { max-width:1080px; margin:0 auto; padding:0 1.5rem; }

nav.top { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; font-size:.9rem; color:var(--mute); }
nav.top a { text-decoration:none; } nav.top a:hover { color:var(--acc); }
nav.top .home { font-family:var(--serif); color:var(--fg); }
nav.top .links { display:flex; gap:1.6rem; align-items:center; }
#theme { background:none; border:1px solid var(--line); color:var(--mute); border-radius:999px; width:2rem; height:2rem; cursor:pointer; font-size:1rem; }
#theme:hover { color:var(--acc); border-color:var(--acc); }

.hero { padding:4rem 0 3rem; display:grid; grid-template-columns:1fr 180px; gap:2.5rem; align-items:end; border-bottom:1px solid var(--line); }
.hero h1 { font-size:3.2rem; font-weight:500; line-height:1.05; }
.lede { font-size:1.25rem; line-height:1.6; color:var(--mute); margin-top:1.2rem; max-width:44ch; }
.lede b { color:var(--fg); font-weight:500; }
.hero img { width:180px; height:200px; object-fit:cover; border-radius:4px; }

section, article { padding:3.2rem 0; border-bottom:1px solid var(--line); scroll-margin-top:1rem; }
h2 { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:.5rem; font-weight:600; }
.intro { color:var(--mute); margin-bottom:2rem; font-size:1.05rem; max-width:62ch; }

/* Work: timeline */
.tl { position:relative; padding-left:2rem; max-width:760px; }
.tl::before { content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:linear-gradient(var(--acc), var(--line)); }
.ev { position:relative; padding-bottom:2.2rem; }
.ev::before { content:""; position:absolute; left:-2rem; top:.45rem; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--acc); }
.ev .y { font-size:.82rem; color:var(--mute); }
.ev h3 { font-size:1.4rem; font-weight:500; margin:.2rem 0 .4rem; }
.ev p { color:var(--mute); line-height:1.65; max-width:62ch; }
.num { color:var(--fg); font-weight:600; }

/* Lab: code font + graph paper */
.labzone { position:relative; font-family:var(--mono); }
.labzone::before { content:""; position:absolute; inset:0 calc(50% - 50vw); z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px; background-position:-1px -1px; }
.labzone .intro { font-size:.95rem; }
.lab { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(140px,auto); gap:12px; }
.t { display:flex; flex-direction:column; background:var(--tile); border:1px solid var(--line); border-radius:10px; padding:1.1rem; text-decoration:none; transition:border-color .15s, transform .15s; overflow:hidden; }
.t:hover { border-color:var(--acc); transform:translateY(-2px); }
.k { font-size:.7rem; color:var(--acc); letter-spacing:.06em; text-transform:uppercase; }
.t h3 { font-size:1rem; font-weight:600; margin:.45rem 0 .35rem; }
.t p { color:var(--mute); font-size:.82rem; line-height:1.5; }
.t .cover { margin-top:auto; padding-top:.9rem; width:100%; max-height:220px; object-fit:cover; object-position:top; border-radius:6px; }
.w2 { grid-column:span 2; } .h2 { grid-row:span 2; }
.ph-slot { margin-top:auto; height:150px; border-radius:6px; border:1px dashed var(--line); display:grid; place-items:center; color:var(--mute); font-size:.8rem; }

/* Lab project page */
.project h1 { font-size:2rem; margin:.4rem 0 .6rem; letter-spacing:-.01em; }
.project .back { font-size:.85rem; color:var(--mute); text-decoration:none; display:inline-block; margin-bottom:1.5rem; }
.project .back:hover { color:var(--acc); }
.project .body { max-width:68ch; font-size:.92rem; line-height:1.75; color:var(--fg); }
.project .body p, .project .body ul { margin-bottom:1rem; }
.project .body ul { padding-left:1.2rem; }
.project .body strong { color:var(--acc); font-weight:600; }
.shots { display:grid; gap:1.5rem; margin-top:2rem; }
.shots figure { background:var(--tile); border:1px solid var(--line); border-radius:10px; padding:.8rem; }
.shots img { border-radius:6px; margin:0 auto; max-height:80vh; }
.shots figcaption { color:var(--mute); font-size:.8rem; margin-top:.6rem; }
.repo { margin-top:2rem; font-size:.9rem; } .repo a { color:var(--acc); }

footer { padding:2.5rem 0 4rem; color:var(--mute); font-size:.95rem; }
footer p + p { margin-top:.3rem; }
footer a:hover { color:var(--acc); }

@media (max-width:820px) {
  .hero { grid-template-columns:1fr; padding-top:2.5rem; }
  .hero h1 { font-size:2.4rem; }
  .lab { grid-template-columns:1fr 1fr; }
  .w2 { grid-column:span 2; } .h2 { grid-row:auto; }
  nav.top .links { gap:1rem; }
}
@media (max-width:480px) { .lab { grid-template-columns:1fr; } .w2 { grid-column:auto; } }

/* Work: case studies */
.cases-links { margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.88rem; }
.cases-links a, .more a { color:var(--acc); text-decoration:none; } .cases-links a:hover, .more a:hover { text-decoration:underline; }
.more { margin-top:.5rem; font-size:.95rem; color:var(--mute); }
.cases { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.case { display:block; border:1px solid var(--line); border-radius:10px; padding:1.3rem; text-decoration:none; transition:border-color .15s; }
.case:hover { border-color:var(--acc); }
.meta { font-size:.8rem; color:var(--mute); }
.case h3 { font-size:1.3rem; font-weight:500; margin:.3rem 0 .4rem; }
.case p { color:var(--mute); font-size:.95rem; }
.metric { margin-top:.8rem; font-size:1.3rem; font-weight:600; color:var(--fg); }
.metric small { font-size:.8rem; font-weight:400; color:var(--mute); }
.case-page h1 { font-size:2.4rem; font-weight:500; margin:.3rem 0 .6rem; line-height:1.15; }
.facts { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.5rem 0 2rem; max-width:760px; }
.facts div { border-left:2px solid var(--acc); padding-left:.8rem; font-size:.95rem; }
.facts span { display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:.2rem; }
.facts b { font-size:1.15rem; }
.case-page .body { max-width:68ch; font-size:1.08rem; line-height:1.75; }
.case-page .body h2 { margin:2rem 0 .7rem; font-family:var(--sans); }
.case-page .body p, .case-page .body ul { margin-bottom:1rem; } .case-page .body ul { padding-left:1.2rem; }
.case-page .body li { margin-bottom:.4rem; } .case-page .body strong { font-weight:600; }
.stack { margin-top:2rem; font-family:var(--mono); font-size:.8rem; color:var(--mute); max-width:760px; }
.pn { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9rem; }
.pn a { color:var(--acc); text-decoration:none; }
@media (max-width:820px) { .cases, .facts { grid-template-columns:1fr; } }

/* Résumé */
.resume .r-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.resume h1 { font-size:2.4rem; font-weight:500; }
.r-title { color:var(--acc); margin-top:.3rem; }
.r-contact { color:var(--mute); font-size:.9rem; margin-top:.3rem; }
.dl { border:1px solid var(--acc); color:var(--acc); text-decoration:none; padding:.55rem 1rem; border-radius:8px; font-size:.9rem; }
.dl:hover { background:var(--acc); color:var(--bg); }
.resume .body { max-width:78ch; font-size:1rem; line-height:1.6; }
.resume .body h2 { margin:2rem 0 .8rem; font-family:var(--sans); }
.resume .body h3 { font-size:1.15rem; font-weight:600; margin:1.4rem 0 .3rem; font-family:var(--sans); }
.resume .body p, .resume .body ul { margin-bottom:.8rem; } .resume .body ul { padding-left:1.2rem; } .resume .body li { margin-bottom:.35rem; }
.resume .body strong { font-weight:600; }

@media print {
  :root, [data-theme] { --bg:#fff; --fg:#111; --mute:#444; --line:#ddd; --acc:#8a5a14; }
  @page { size: Letter; margin: 14mm 15mm; }
  body { font-size:10pt; }
  nav.top, footer, .dl, .back { display:none !important; }
  .page, section, article { border:0; padding:0; }
  .resume h1 { font-size:20pt; }
  .resume .body { max-width:none; font-size:9.6pt; line-height:1.42; }
  .resume .body h2 { margin:10pt 0 4pt; font-size:8pt; }
  .resume .body h3 { margin:7pt 0 2pt; font-size:10.5pt; page-break-after:avoid; }
  .resume .body li { margin-bottom:1.5pt; }
  a { text-decoration:none; }
}

/* Hero links */
.social { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.4rem; font-size:.92rem; }
.social a { display:inline-flex; align-items:center; gap:.45rem; color:var(--mute); text-decoration:none; }
.social a:hover { color:var(--acc); }
.social svg { width:16px; height:16px; fill:currentColor; }

/* Lab: builds, specs, circuit diagrams, gallery + lightbox */
.build { padding:2.4rem 0 0; border:0; }
.build h2 { margin-bottom:1rem; }
.specs { max-width:72ch; padding-left:1.2rem; font-size:.88rem; line-height:1.7; margin-bottom:1.4rem; }
.specs strong { color:var(--acc); font-weight:600; }
.diagram { background:var(--tile); border:1px solid var(--line); border-radius:10px; padding:1rem; margin-bottom:1.2rem; overflow-x:auto; }
.circuit { display:block; width:100%; min-width:760px; height:auto; font-family:var(--mono); }
.circuit rect { fill:var(--bg); stroke:var(--line); stroke-width:1.5; }
.circuit rect.pu { stroke:var(--mute); }
.circuit rect.sw { stroke:var(--acc); stroke-dasharray:4 3; }
.circuit rect.hl { stroke:var(--acc); stroke-width:2; }
.circuit text { text-anchor:middle; }
.circuit .t { fill:var(--fg); font-size:15px; font-weight:600; }
.circuit .d { fill:var(--mute); font-size:12px; }
.circuit .mt { text-anchor:start; }
.circuit .w path { stroke:var(--acc); stroke-width:1.8; fill:none; }
.circuit .mod { stroke:var(--acc); stroke-width:1.5; stroke-dasharray:6 4; fill:none; }
.circuit .ah { fill:var(--acc); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.gallery a { display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; aspect-ratio:3/4; background:var(--tile); }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.gallery a:hover img { transform:scale(1.04); }
#lb { border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh; margin:auto; overflow:visible; }
#lb::backdrop { background:rgba(0,0,0,.85); }
#lb img { max-width:92vw; max-height:84vh; border-radius:8px; margin:0 auto; }
#lb p { color:#ddd; text-align:center; font-family:var(--mono); font-size:.85rem; margin-top:.7rem; }
#lb button { position:fixed; background:rgba(0,0,0,.5); color:#fff; border:0; font-size:2rem; width:3rem; height:3rem; border-radius:50%; cursor:pointer; }
.lb-close { top:1rem; right:1rem; } .lb-prev { left:1rem; top:50%; } .lb-next { right:1rem; top:50%; }

/* Lab grid v2: fixed row height, covers fill the rest of each tile, no holes */
.lab { grid-auto-rows:270px; grid-auto-flow:dense; }
.t .cover { flex:1 1 0; min-height:0; max-height:none; height:auto; margin-top:.9rem; padding-top:0; }
@media (max-width:820px) { .lab { grid-auto-rows:240px; } .h2 { grid-row:span 1; } }
@media (max-width:480px) { .lab { grid-auto-rows:260px; } }

/* Tech map */
.tech .tf { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin-bottom:1rem; }
.tech input[type=search] { background:var(--tile); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:.45rem .7rem; font:inherit; font-size:.85rem; width:240px; }
.tech .tplaces, .tech .tview { display:flex; flex-wrap:wrap; gap:.35rem; }
.tech .tview { margin-left:auto; }
.tech .tf button { background:none; border:1px solid var(--line); color:var(--mute); border-radius:999px; padding:.28rem .75rem; cursor:pointer; font:inherit; font-size:.75rem; }
.tech .tf button.on, .tech .tf button:hover { border-color:var(--acc); color:var(--acc); }
.tlegend { display:flex; gap:1.2rem; color:var(--mute); font-size:.75rem; margin-bottom:1.4rem; }
.lw { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.4rem; vertical-align:-1px; }
.lw.work { background:color-mix(in srgb, var(--acc) 40%, transparent); border:1px solid var(--acc); }
.lw.lab { border:1px solid var(--acc2, #8fb3d9); } .lw.learn { border:1px dashed var(--mute); }
.atlas { columns:3 300px; column-gap:1.1rem; }
.atlas .cat { break-inside:avoid; background:var(--tile); border:1px solid var(--line); border-radius:10px; padding:1rem; margin-bottom:1.1rem; }
.atlas h3 { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-bottom:.7rem; display:flex; justify-content:space-between; font-weight:600; }
.atlas h3 span { color:var(--mute); }
.chip { display:inline-block; margin:0 .3rem .4rem 0; padding:.26rem .55rem; border-radius:6px; border:1px solid var(--line); background:none; color:var(--fg); font:inherit; font-size:.76rem; cursor:pointer; text-align:left; transition:opacity .12s, border-color .12s; }
.chip.work { background:color-mix(in srgb, var(--acc) 16%, transparent); border-color:color-mix(in srgb, var(--acc) 55%, transparent); }
.chip.lab { border-color:var(--acc2, #8fb3d9); } .chip.learn { color:var(--mute); border-style:dashed; }
.chip.off { opacity:.12; } .chip:hover { border-color:var(--acc); }
.matrix { overflow-x:auto; }
.matrix table { width:100%; border-collapse:collapse; font-size:.78rem; }
.matrix th { color:var(--mute); font-weight:400; font-size:.68rem; text-align:center; padding:.5rem .3rem; border-bottom:1px solid var(--line); }
.matrix th:first-child, .matrix td:first-child { text-align:left; }
.matrix td { padding:.28rem .3rem; border-bottom:1px solid color-mix(in srgb, var(--line) 50%, transparent); text-align:center; }
.matrix tr:not(.cg) { cursor:pointer; } .matrix tr:not(.cg):hover td { background:color-mix(in srgb, var(--acc) 6%, transparent); }
.matrix tr.cg td { color:var(--acc); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding-top:1rem; border-bottom:1px solid var(--line); cursor:default; }
.m { display:inline-block; width:10px; height:10px; border-radius:50%; }
.m.work { background:var(--acc); } .m.lab { border:1.5px solid var(--acc2, #8fb3d9); } .m.learn { border:1.5px dashed var(--mute); }
#tpop { position:fixed; z-index:20; background:var(--tile); border:1px solid var(--acc); border-radius:8px; padding:.7rem .9rem; font-size:.78rem; max-width:280px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
#tpop b { display:block; margin-bottom:.25rem; } #tpop .c { color:var(--mute); } #tpop .w { margin-top:.45rem; }
:root { --acc2:#8fb3d9; } [data-theme=light] { --acc2:#3d6a99; }
@media (max-width:820px) { .tech .tview { margin-left:0; } }

/* Home: tech teaser */
.techteaser .tt-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.tt-card { display:block; background:var(--tile); border:1px solid var(--line); border-radius:10px; padding:.9rem; text-decoration:none; transition:border-color .15s; }
.tt-card:hover { border-color:var(--acc); }
.tt-card h3 { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-bottom:.6rem; font-weight:600; }
.tt-card .chip { cursor:inherit; font-size:.72rem; }
.techteaser .more { margin-top:1.1rem; font-size:.9rem; }
.techteaser .more a { color:var(--acc); text-decoration:none; } .techteaser .more a:hover { text-decoration:underline; }
@media (max-width:820px) { .techteaser .tt-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .techteaser .tt-grid { grid-template-columns:1fr; } }

/* Tech teaser in the Work style (serif intro, no graph paper); cards keep the code font */
.techteaser .tt-card { font-family:var(--mono); }
.techteaser .more { font-family:var(--sans); }
#work { border-bottom:0; }
/* Separator between the professional part (Work, Tech) and the Lab */
.divider { position:relative; height:1px; margin:3.5rem 0 0; background:linear-gradient(90deg, transparent, var(--acc) 20%, var(--acc) 80%, transparent); }
.divider span { position:absolute; left:50%; top:50%; width:11px; height:11px; transform:translate(-50%,-50%) rotate(45deg); background:var(--bg); border:1.5px solid var(--acc); }
.techteaser { border-bottom:0; }

/* Tech page in the Work style: sans controls, serif intro, no graph paper; boxes keep the code font */
.tech .atlas, .tech .matrix, .tech .chip, .tech #tpop { font-family:var(--mono); }
.tech .tf button { font-family:var(--sans); font-size:.8rem; }
.tech input[type=search] { font-family:var(--sans); }
.tech .tlegend { font-family:var(--sans); font-size:.8rem; }