/* rico.bd sample B: circuit board. Solder mask, copper, silkscreen. */
:root{
  --mask:#0b3b2e; --mask-2:#0f4a3a; --mask-3:#072a20;
  --copper:#c9873b; --gold:#d4b15e; --silk:#edefe8; --silk-2:#b9c7bd;
  --chip:#15191a; --led:#7dff9a;
  --disp:"Oxanium",system-ui,sans-serif; --body:"Barlow",system-ui,sans-serif; --mono:"B612 Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scrollbar-color:var(--copper) var(--mask-3);background:var(--mask-3)}
body{background:var(--mask-3);color:var(--silk);font:400 1.0625rem/1.6 var(--body);padding:clamp(0px,1.5vw,18px)}
::selection{background:var(--gold);color:var(--mask-3)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{display:block;max-width:100%}
.ic{width:1.05em;height:1.05em;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--mask-3);padding:.5rem 1rem;z-index:9}
.skip:focus{left:8px}

/* the board itself, with faint traces */
.board{position:relative;max-width:1320px;margin:0 auto;background-color:var(--mask);border-radius:18px;overflow:hidden;
  background-image:
    linear-gradient(90deg,transparent 49.6%,rgba(201,135,59,.07) 49.6% 50.4%,transparent 50.4%),
    linear-gradient(0deg,transparent 49.6%,rgba(201,135,59,.05) 49.6% 50.4%,transparent 50.4%),
    radial-gradient(circle,rgba(212,177,94,.12) 2px,transparent 2.6px);
  background-size:240px 240px,240px 160px,40px 40px;background-position:0 0,0 0,20px 20px}
.hole{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--mask-3);box-shadow:0 0 0 5px var(--gold);z-index:2}
.tl{top:16px;left:16px}.tr{top:16px;right:16px}.bl{bottom:16px;left:16px}.br{bottom:16px;right:16px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem clamp(3.2rem,6vw,4.5rem)}
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:700 1.15rem var(--disp);letter-spacing:.08em}
.rev{font:400 .72rem var(--mono);color:var(--silk-2)}
.led{width:9px;height:9px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.bar nav{display:flex;gap:clamp(.75rem,2.5vw,2rem)}
.bar nav a{text-decoration:none;font:500 .95rem var(--disp)}
.bar nav a:hover{color:var(--gold)}

main{padding:0 clamp(1rem,5vw,4.5rem)}
section{padding:clamp(3rem,7vw,5.5rem) 0}
.sec-h{font:700 clamp(1.8rem,4vw,2.9rem)/1.05 var(--disp)}
.sec-p{margin-top:.5rem;color:var(--silk-2);max-width:60ch}

/* hero: a QFP chip with copper pins, and a camera module */
.hero{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-top:clamp(1.5rem,4vw,3rem)}
.cpu{position:relative;padding:22px}
.pins{position:absolute;--p:repeating-linear-gradient(90deg,var(--copper) 0 8px,transparent 8px 22px)}
.pins-t,.pins-b{left:46px;right:46px;height:22px;background:var(--p)}
.pins-t{top:0}.pins-b{bottom:0}
.pins-l,.pins-r{top:46px;bottom:46px;width:22px;background:repeating-linear-gradient(0deg,var(--copper) 0 8px,transparent 8px 22px)}
.pins-l{left:0}.pins-r{right:0}
.cpu-die{position:relative;background:var(--chip);border-radius:10px;padding:clamp(1.5rem,4vw,3rem);
  box-shadow:inset 0 0 0 1px rgba(237,239,232,.08)}
.cpu-die::before{content:"";position:absolute;top:16px;left:16px;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(237,239,232,.35)}
.cpu-ref{font:400 .78rem var(--mono);color:var(--silk-2);text-align:right}
.cpu h1{font:800 clamp(2.3rem,6vw,4.6rem)/.98 var(--disp);margin:.6rem 0 .8rem;letter-spacing:-.01em}
.role{font:600 1.1rem var(--disp);color:var(--gold)}
.intro{margin-top:.7rem;max-width:58ch;color:var(--silk-2)}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.2rem;border-radius:6px;font:600 1rem var(--disp);text-decoration:none;
  background:var(--gold);color:var(--mask-3);transition:background .2s}
.btn:hover{background:var(--copper)}
.btn.ghost{background:transparent;color:var(--silk);box-shadow:inset 0 0 0 1.5px var(--silk-2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
.cam{justify-self:center;text-align:center}
.cam-lens{display:block;width:min(340px,70vw);aspect-ratio:1;border-radius:22px;padding:18px;background:var(--chip);
  box-shadow:inset 0 0 0 1px rgba(237,239,232,.1),0 0 0 6px var(--mask-2),0 0 0 8px var(--copper)}
.photo{width:100%;height:100%;object-fit:cover;object-position:78% 30%;border-radius:50%;box-shadow:0 0 0 6px #23292a,0 0 0 9px #0a0d0d}
.cam figcaption{margin-top:1.1rem;font:400 .8rem var(--mono);color:var(--silk-2)}

/* modules: grow in place */
.modules{margin-top:2.25rem;display:grid;gap:16px;
  --c1:1fr;--c2:1fr;--c3:1fr;--c4:1fr;--r1:1fr;--r2:1fr;--r3:1fr;
  grid-template-columns:var(--c1) var(--c2) var(--c3) var(--c4);
  grid-template-rows:var(--r1) var(--r2) var(--r3);height:min(1080px,150vh);
  transition:grid-template-columns .5s var(--ease),grid-template-rows .5s var(--ease)}
.modules:has(>[data-c="1"]:is(:hover,:focus-visible)){--c1:2.3fr}
.modules:has(>[data-c="2"]:is(:hover,:focus-visible)){--c2:2.3fr}
.modules:has(>[data-c="3"]:is(:hover,:focus-visible)){--c3:2.3fr}
.modules:has(>[data-c="4"]:is(:hover,:focus-visible)){--c4:2.3fr}
.modules:has(>[data-r="1"]:is(:hover,:focus-visible)){--r1:1.9fr}
.modules:has(>[data-r="2"]:is(:hover,:focus-visible)){--r2:1.9fr}
.modules:has(>[data-r="3"]:is(:hover,:focus-visible)){--r3:1.9fr}

.module{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;text-decoration:none;
  background:var(--mask-3);border-radius:8px;padding:14px 14px 12px;
  box-shadow:inset 0 0 0 1px rgba(201,135,59,.45);transition:box-shadow .3s var(--ease)}
/* edge pins: the module's header row */
.module::before{content:"";position:absolute;top:-5px;left:24px;right:24px;height:5px;
  background:repeating-linear-gradient(90deg,var(--copper) 0 6px,transparent 6px 14px);opacity:.75}
.module:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1.5px var(--gold),0 0 22px rgba(212,177,94,.18)}
.md-ref{position:absolute;top:10px;right:12px;font:400 .72rem var(--mono);color:var(--silk-2);z-index:1}
.md-screen{flex:1 1 auto;min-height:0;border-radius:4px;background:#0a1210;overflow:hidden;display:grid;place-items:center;margin-top:16px}
.md-screen img{width:100%;height:100%;object-fit:contain}
.md-chip{background:transparent}
.chip-face{position:relative;display:grid;place-items:center;width:min(78%,240px);aspect-ratio:1.6;background:var(--chip);border-radius:6px;
  box-shadow:0 0 0 4px var(--mask-3),0 0 0 6px rgba(201,135,59,.55)}
.chip-name{font:700 clamp(.95rem,1.6vw,1.3rem)/1.1 var(--disp);text-align:center;padding:.5rem}
.chip-dot{position:absolute;top:8px;left:8px;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(237,239,232,.4)}
.md-body{flex:none;display:flex;flex-direction:column;gap:.1rem;padding-top:.7rem}
.md-name{font:700 1.12rem/1.15 var(--disp)}
.md-line{font-size:.92rem;color:var(--silk-2);line-height:1.35}
.md-desc,.md-pins{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .3s var(--ease)}
.md-desc{font-size:.9rem;line-height:1.45}
.md-pins{display:flex;flex-wrap:wrap;gap:.35rem}
.md-pins span{font:400 .72rem var(--mono);color:var(--gold);padding:.15rem .45rem;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(212,177,94,.5)}
.module:is(:hover,:focus-visible) .md-desc{max-height:8em;opacity:1;margin-top:.4rem}
.module:is(:hover,:focus-visible) .md-pins{max-height:4em;opacity:1;margin-top:.5rem}
.md-tag{position:absolute;top:10px;left:14px;font:400 .72rem var(--mono);color:var(--copper)}

/* story: a trace with test points */
.trace{list-style:none;padding:0;margin-top:2.25rem;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px;position:relative}
.trace li{position:relative;padding-top:1.6rem}
.trace li::before{content:"";position:absolute;top:6px;left:0;right:-16px;height:2px;background:var(--copper)}
.trace li::after{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--mask);box-shadow:inset 0 0 0 3px var(--gold)}
.tp{position:absolute;top:-2px;left:22px;font:400 .7rem var(--mono);color:var(--silk-2)}
.yr{font:700 1.5rem var(--disp);color:var(--gold)}
.trace h3{font:600 1.05rem var(--disp);margin:.15rem 0 .25rem}
.trace p{color:var(--silk-2);font-size:.95rem}

/* stack */
.banks{margin-top:2.25rem;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bank{background:var(--mask-3);border-radius:8px;padding:1rem 1.1rem;box-shadow:inset 0 0 0 1px rgba(201,135,59,.35)}
.bank h3{font:600 1rem var(--disp);color:var(--gold);margin-bottom:.5rem}
.bank ul{list-style:none;padding:0}
.bank li{font-size:.95rem;color:var(--silk-2);padding:.15rem 0}
.bank li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.55rem;background:var(--copper);border-radius:1px;vertical-align:middle}

/* contact */
.contact h2{font:800 clamp(2.2rem,6vw,4.2rem)/1 var(--disp)}
.contact>p{margin-top:.7rem;color:var(--silk-2)}
.ct{list-style:none;padding:0;margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ct a{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-radius:8px;text-decoration:none;background:var(--mask-3);
  box-shadow:inset 0 0 0 1px rgba(201,135,59,.35);transition:box-shadow .2s}
.ct a:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.ct-k{font:600 .95rem var(--disp);color:var(--gold);min-width:4.6rem}
.ct-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--silk-2);font-size:.92rem}
.foot{padding:1.5rem clamp(3.2rem,6vw,4.5rem) 2.6rem;color:var(--silk-2);font:400 .78rem var(--mono)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .cam{order:-1}
  .modules{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto;height:auto}
  .md-screen{aspect-ratio:16/10;flex:none}
  .md-desc{max-height:none;opacity:1;margin-top:.4rem}
  .trace{grid-template-columns:1fr 1fr}
  .banks{grid-template-columns:1fr 1fr}
  .ct{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{padding:0}.board{border-radius:0}
  .hole{display:none}
  .bar{padding:1rem}
  .bar nav a:not([href="#contact"]):not([href="#work"]){display:none}
  .modules,.trace,.banks,.ct{grid-template-columns:1fr}
  .foot{padding:1.5rem 1rem 2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}