/* ATL-2026 Rev 2.0: classic view (screen) and datasheet view (print).
   Visual language from mockups/b-pcb.html: solder mask green board, gold copper,
   off-white silkscreen. Plain CSS, no build step.
   The 3D view is layered on top by assets/world/world.css (html.mode-3d). Classic
   only rules are scoped with :root:not(.mode-3d) so they never fight the overlay. */

:root {
  /* solder mask */
  --board-0: #06130e;
  --board-1: #0a1c15;
  --board-2: #0f271e;
  --board-3: #16362a;
  --trace-mask: #1d4a38;
  /* silkscreen */
  --silk: #f4f2e9;
  --silk-2: #c6d0c8;
  --silk-3: #93a69b;
  --line: rgba(244, 242, 233, .14);
  --line-2: rgba(244, 242, 233, .3);
  /* exposed copper, gold finish */
  --copper: #e0a94a;
  --copper-hi: #ffd482;
  --copper-lo: #8f6c2c;
  --ink: #1a1204;
  /* signals */
  --todo: #ff9a76;
  --led: #62e6a4;
  /* type */
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* geometry */
  --r-card: 14px;
  --wrap: 1240px;
  --pad-x: 16px;
  --gutter: 0px;
  --rail-x: -10px;
  --via-y: 8px;
  --bar-h: 104px;
  --ease: cubic-bezier(.6, .05, .2, 1);
}
@media (min-width: 600px) { :root { --pad-x: 24px; --rail-x: -14px; } }
@media (min-width: 960px) { :root { --pad-x: 40px; --gutter: 72px; --rail-x: 17px; --via-y: -5px; --bar-h: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--board-1);
}
body {
  margin: 0;
  color: var(--silk-2);
  font: 400 17px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 620px at 82% -60px, rgba(52, 132, 97, .26), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(244, 242, 233, .05) 1px, transparent 1.7px) 0 0 / 28px 28px,
    var(--board-1);
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
code { font: 500 .86em/1.4 var(--f-mono); color: var(--copper-hi); background: rgba(224, 169, 74, .08); border-radius: 4px; padding: .06em .3em; white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; background: var(--copper); color: var(--ink); font-weight: 600; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.print-contact { display: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }
.cq { container-type: inline-size; }

/* Text links inside the content */
main a { color: var(--copper-hi); text-decoration-color: rgba(255, 212, 130, .45); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .18s, text-decoration-color .18s; }
main a:hover { color: var(--silk); text-decoration-color: var(--silk); }
a.url { overflow-wrap: anywhere; }

/* Unpopulated field marker: stays visible on screen and in print */
.todo {
  font: 500 .8em/1.5 var(--f-mono);
  color: var(--todo);
  background: rgba(255, 154, 118, .09);
  border: 1px dashed rgba(255, 154, 118, .62);
  border-radius: 5px;
  padding: .12em .5em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Reference designators, silkscreen style */
.refdes, .des {
  font: 500 12px/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--silk);
}
.refdes {
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
  border: 1px solid var(--line-2); border-radius: 5px; background: var(--board-1);
  white-space: nowrap;
}
.des { color: var(--silk-3); }

/* ================= Loader: ring buffer =================
   Hidden without JS. With JS it fades out by itself after 1.6 s (CSS fallback);
   site.js adds .loader-js to take over and .loaded to hide it. */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background:
    radial-gradient(600px 400px at 50% 45%, rgba(52, 132, 97, .22), transparent 70%),
    var(--board-0);
  pointer-events: none;
  animation: loader-auto .45s ease 1.6s forwards;
}
.js.loader-seen .loader { animation: loader-auto .45s ease 1.6s forwards, loader-in .3s ease .6s backwards; }
.js.loader-js .loader { animation: none; }
.js.loader-js.loader-seen .loader { animation: loader-in .3s ease .6s backwards; }
.js.loader-js.loaded .loader { opacity: 0; visibility: hidden; animation: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.ring-svg { width: 132px; height: 132px; margin-bottom: 14px; }
.ring-svg .slot { fill: var(--board-2); stroke: var(--copper-lo); stroke-width: 1; animation: slot-fill .2s ease forwards; }
.ring-svg text { font: 500 11px var(--f-mono); fill: var(--silk-3); letter-spacing: .1em; }
.loader-part { font: 600 18px/1.2 var(--f-mono); letter-spacing: .08em; color: var(--silk); }
.loader-part span { color: var(--copper-hi); }
.loader-text { font: 400 13px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--silk-3); }
@keyframes slot-fill { to { fill: var(--copper); stroke: var(--copper-hi); } }
@keyframes loader-auto { to { opacity: 0; visibility: hidden; } }
@keyframes loader-in { from { opacity: 0; } }

/* ================= Top bar ================= */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 19, 14, .9);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper) 14%, var(--copper) 30%, transparent 58%);
  opacity: .8; pointer-events: none;
}
.topbar-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark act" "nav nav";
  align-items: center; column-gap: 12px;
}
.mark { grid-area: mark; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; font: 600 15px/1 var(--f-mono); letter-spacing: .05em; color: var(--silk); text-decoration: none; white-space: nowrap; }
.mark svg { width: 24px; height: 24px; flex: none; }
.mark-rev { font-weight: 500; font-size: 12px; color: var(--copper-hi); letter-spacing: .08em; }
.ico { width: 44px; height: 44px; flex: none; fill: none; stroke: var(--silk-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico .cu, symbol .cu { stroke: var(--copper); }

.nav { grid-area: nav; margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.nav::-webkit-scrollbar { display: none; }
.nav ul { display: flex; align-items: center; gap: 2px; padding-right: 24px; }
.nav a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 9px; font: 500 14px/1 var(--f-body); color: var(--silk-2); text-decoration: none; white-space: nowrap; transition: color .18s; }
.nav li:first-child a { padding-left: 0; }
.nav a::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s var(--ease); }
.nav li:first-child a::after { left: 0; }
.nav a:hover, .nav a[aria-current] { color: var(--silk); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a:focus-visible { outline-offset: -2px; }

.topbar-act { grid-area: act; display: flex; align-items: center; gap: 8px; }
.nav-cv { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border: 1px solid var(--copper); border-radius: 999px; font: 600 14px/1 var(--f-body); color: var(--copper-hi); text-decoration: none; transition: background-color .18s, color .18s; }
.nav-cv:hover { background: var(--copper); color: var(--ink); }
/* a flex item drops its trailing space: keep the one between "Request" and "CV" */
.nav-cv-req { white-space: pre; }
/* phones show "CV"; the hidden word keeps the link's name "Request CV" */
@media (max-width: 439px) {
  .nav-cv-req { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.mode-toggle {
  display: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--board-2);
  font: 500 13px/1 var(--f-mono); letter-spacing: .04em; color: var(--silk); cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.mode-toggle::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 8px rgba(98, 230, 164, .8); }
.mode-toggle:hover { border-color: var(--copper); background: var(--board-3); }
.mode-toggle[hidden] { display: none; }
.has-world .mode-toggle { display: inline-flex; }

@media (min-width: 960px) {
  .topbar-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark nav act"; column-gap: 20px; height: 64px; }
  .nav { justify-self: end; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .nav ul { gap: clamp(0px, .8vw, 10px); padding-right: 0; }
  .nav li:first-child a { padding-left: 9px; }
  .nav li:first-child a::after { left: 9px; }
}
@media (max-width: 380px) {
  .mark-rev { display: none; }
  .mode-toggle { padding: 0 10px; }
}

/* Scroll position as a 16-bit register (site.js lights the cells) */
.scroll-reg { display: none; }
.anim .scroll-reg { display: flex; height: 3px; gap: 2px; padding: 0 2px; }
.scroll-reg span { flex: 1; background: transparent; transition: background-color .15s linear; }
.scroll-reg span.on { background: var(--copper); }
.mode-3d .scroll-reg { display: none; }

/* 3D world mount: hidden in the classic view; world.css shows it under html.mode-3d */
#world-root { display: none; }
/* Height of the fixed top bar (two rows below 960px: mark + actions, then the nav).
   world.css reads it to place the open card, the board map and toasts below the bar. */
:root { --topbar-h: 97px; }
@media (min-width: 960px) { :root { --topbar-h: 65px; } }
/* In the 3D overlay card the world floats its close button to the top right. Boxes that
   form their own formatting context (grid header, query container) would shrink beside
   the float for their whole height, so they start below it instead. */
html.mode-3d .is-open > .zone-head,
html.mode-3d .is-open > .cq { clear: both; }
/* Project modules are flex columns (the MOD designator line is ordered above the title).
   Keep that in the 3D card: the close button gets its own row at the top, then the
   designator line, then the title. */
html.mode-3d #content .project.is-open { display: flex !important; flex-direction: column; }
html.mode-3d #content .project.is-open > .world-close { order: -2; align-self: flex-end; margin: -6px -10px 4px 0; }
html.mode-3d #content .project.is-open > .mod-top { padding: 0; }
html.mode-3d #content .project.is-open > .fingers { flex: none; }

/* ================= Zones and the copper rail ================= */
.zone { position: relative; }
:root:not(.mode-3d) .zone {
  --sec-pt: clamp(56px, 8vw, 100px);
  padding: var(--sec-pt) 0 calc(var(--sec-pt) * .3) var(--gutter);
}
/* One trace runs down the board and taps every zone. */
:root:not(.mode-3d) .zone::before {
  content: ""; position: absolute; left: var(--rail-x); top: 0; bottom: 0; width: 2px;
  background: var(--copper); opacity: .62;
  transform-origin: 50% 0; transition: transform 1.1s var(--ease);
}
:root:not(.mode-3d) #about { --sec-pt: clamp(28px, 4vw, 46px); }
:root:not(.mode-3d) #about::before { top: calc(var(--sec-pt) + var(--via-y) + 8px); }
:root:not(.mode-3d) #contact::before { bottom: auto; height: calc(var(--sec-pt) + var(--via-y) + 8px); }

.zone-head { display: grid; gap: 16px; max-width: 780px; margin-bottom: clamp(28px, 4vw, 48px); }
.zone-head .des-row { order: -1; }
.zone-head h2 { font: 800 clamp(31px, 4.4vw, 52px)/1.04 var(--f-display); font-stretch: 118%; letter-spacing: -.022em; color: var(--silk); overflow-wrap: anywhere; }
.zone-note { max-width: 62ch; }

.des-row { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 26px; }
.des-meta { font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silk-3); }
/* small screens: a via on the rail, in the page margin */
:root:not(.mode-3d) .des-row::before {
  content: ""; position: absolute; left: calc(var(--rail-x) - 4px); top: 8px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--board-1); border: 2px solid var(--copper);
}
/* wide screens: a 45 degree tap from the rail to the designator (symbol #i-tap) */
.tap { display: none; position: absolute; left: calc(var(--gutter) * -1); top: -11px; width: 72px; height: 48px; overflow: visible; stroke: var(--copper); stroke-width: 2; stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease) .3s; }
#i-tap path { fill: none; stroke-dasharray: 1; }
#i-tap circle { fill: var(--board-1); }
@media (min-width: 960px) {
  :root:not(.mode-3d) .tap { display: block; }
  :root:not(.mode-3d) .des-row::before { display: none; }
}

.bundle { display: none; position: absolute; right: 0; top: calc(var(--sec-pt, 80px) - 6px); width: 360px; height: 100px; pointer-events: none; }
.zone:nth-of-type(odd) .bundle { transform: scaleY(-1); }
@media (min-width: 1180px) { :root:not(.mode-3d) .bundle { display: block; } }
.t-mask { fill: none; stroke: var(--trace-mask); stroke-width: 3.2; stroke-linejoin: round; }
.v-mask circle { fill: var(--board-1); stroke: var(--trace-mask); stroke-width: 3; }

/* ================= U1: about ================= */
.hero-grid { display: grid; gap: clamp(20px, 4vw, 48px); align-items: start; }
@container (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy .des-row { order: -1; margin-bottom: clamp(18px, 2.4vw, 24px); }
h1 { font: 800 clamp(52px, 7vw, 88px)/.92 var(--f-display); font-stretch: 125%; letter-spacing: -.038em; color: var(--silk); margin-bottom: clamp(16px, 2vw, 22px); }
h1 span { display: block; }
.role { font: 600 clamp(18px, 2vw, 22px)/1.32 var(--f-display); font-stretch: 108%; color: var(--copper-hi); margin-bottom: 14px; max-width: 30em; }
.lead { font-size: clamp(16.5px, 1.45vw, 18.5px); max-width: 54ch; margin-bottom: 20px; }
.status {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 10px 16px 10px 14px; margin-bottom: 16px;
  background: var(--board-2); border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; color: var(--silk);
}
.led { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 3px rgba(98, 230, 164, .16), 0 0 12px rgba(98, 230, 164, .75); }
.status-k { font-weight: 600; }
.status-v { color: var(--copper-hi); font-weight: 600; }
.now { font-size: 15.5px; max-width: 56ch; margin-bottom: 24px; color: var(--silk-2); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 20px 6px 16px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--board-2);
  color: var(--silk); font: 600 15px/1.2 var(--f-body); text-decoration: none;
  transition: background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}
main a.btn { color: var(--silk); text-decoration: none; }
.btn .ring { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 3.5px solid var(--copper); background: var(--board-0); transition: background-color .18s, border-color .18s; }
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { border-color: var(--copper); background: var(--board-3); }
.btn:hover .ring { background: var(--copper-hi); border-color: var(--copper-hi); }
main a.btn--primary, .btn--primary { background: var(--copper); border-color: var(--copper); color: var(--ink); padding-left: 18px; }
main a.btn--primary:hover { background: var(--copper-hi); border-color: var(--copper-hi); color: var(--ink); box-shadow: 0 0 0 4px rgba(224, 169, 74, .2); }
.btn .todo { font-size: 11.5px; }
button.btn { cursor: pointer; }
.x-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; color: var(--silk-2); font: 600 22px/1 var(--f-body); cursor: pointer;
  transition: border-color .18s, color .18s;
}
.x-btn:hover { border-color: var(--copper); color: var(--silk); }

/* ================= The 3D view as the hallmark =================
   Invitation: only when the 3D view is available (html.has-world, set by the world
   script) but the page is classic: reduced motion, a slow load, or the visitor chose it.
   Without JS or WebGL the class never appears, so the invitation stays hidden. */
.invite-3d { display: none; }
html.has-world:not(.mode-3d):not(.invite-off) .invite-3d {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin: 22px 0 0 var(--gutter); padding: 14px 14px 14px 20px;
  border: 1px solid var(--copper); border-radius: 14px; background: var(--board-2);
}
.invite-3d p { flex: 1 1 320px; max-width: 64ch; font-size: 15.5px; color: var(--silk-2); }
.invite-3d strong { color: var(--silk); }

/* "The 3D board is ready": created by the world script when the board finished
   loading after the visitor had started reading the classic page. */
.ready-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  max-width: min(380px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 12px 12px 18px;
  border: 1px solid var(--copper); border-radius: 14px; background: var(--board-2);
  color: var(--silk); box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}
.ready-toast p { flex: 1 1 150px; font-weight: 600; }
html.mode-3d .ready-toast { display: none; }

/* Picture of the board for devices that cannot show the 3D view */
.board-shot { margin: 30px 0 0; }
.board-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 14px; }
.board-shot figcaption { margin-top: 10px; max-width: 70ch; font-size: 14.5px; color: var(--silk-3); }
html.has-world .board-shot { display: none; }

/* Chip graphic */
.hero-fig { position: relative; width: 100%; }
.chip { display: block; width: 100%; height: auto; max-width: 600px; margin: 0 auto; }
.hero-fig figcaption { margin-top: 4px; text-align: center; font: 400 12px/1.5 var(--f-mono); letter-spacing: .04em; color: var(--silk-3); }
.chip text { font-family: var(--f-mono); }
.silk-mark { fill: none; stroke: var(--silk); stroke-width: 1.6; opacity: .8; }
.silk-t { fill: var(--silk); font-weight: 500; letter-spacing: .12em; }
.silk-t.dim { fill: var(--silk-3); }
.pins { stroke: #b4beb7; stroke-width: 16; stroke-dasharray: 6 6; fill: none; }
.pkg { fill: url(#pkg); stroke: #333d38; stroke-width: 1.5; }
.pkg-in { fill: none; stroke: rgba(255, 255, 255, .06); }
.pin1 { fill: #2d3833; stroke: #414d47; }
.pkg-name { font: 800 30px var(--f-display) !important; font-stretch: 120%; fill: var(--silk); letter-spacing: .01em; }
.pkg-sub { font-size: 13px; fill: var(--silk-3); letter-spacing: .1em; }
.pin-n { font-size: 9px; fill: #8c9a92; }
.pin-n.lk { font-size: 10.5px; fill: var(--copper); font-weight: 600; }
.pl { cursor: pointer; outline: none; }
.pl-hit { fill: transparent; stroke: transparent; stroke-width: 2; stroke-dasharray: 7 5; }
.pl-trace { fill: none; stroke: var(--copper); stroke-width: 3.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .18s, stroke-width .18s; animation: draw 1s var(--ease) backwards; animation-delay: var(--d, 0s); }
.pl-pin { fill: var(--copper); transition: fill .18s; }
.pl-pad { fill: var(--board-0); stroke: var(--copper); stroke-width: 6; transition: fill .18s, stroke .18s; }
.pl-name { font-size: 24px; font-weight: 600; fill: var(--silk); letter-spacing: .06em; transition: fill .18s; }
.pl-sub { font-size: 15px; font-weight: 500; fill: var(--silk-3); letter-spacing: .04em; }
.pl-sub.is-todo { fill: var(--todo); }
.pl-pad, .pl-name, .pl-sub { animation: pop .5s ease backwards; animation-delay: calc(var(--d, 0s) + .75s); }
.pl:hover .pl-trace, .pl:focus-visible .pl-trace { stroke: var(--copper-hi); stroke-width: 5.5; }
.pl:hover .pl-pin, .pl:focus-visible .pl-pin { fill: var(--copper-hi); }
.pl:hover .pl-pad, .pl:focus-visible .pl-pad { fill: var(--copper-hi); stroke: var(--copper-hi); }
.pl:hover .pl-name, .pl:focus-visible .pl-name { fill: var(--copper-hi); }
.pl:hover .pl-hit { fill: rgba(224, 169, 74, .07); }
.pl:focus-visible .pl-hit { stroke: var(--silk); fill: rgba(224, 169, 74, .07); }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes pop { from { opacity: 0; } }

/* ================= U2 to U7: skills as footprint cards ================= */
.skills { display: grid; gap: 22px; }
@container (min-width: 560px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp--wide { grid-column: span 2; } }
@container (min-width: 1000px) { .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--board-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px 26px 24px;
  transition: border-color .2s, background-color .2s;
}
/* SMD pads along both long edges */
.fp::before, .fp::after {
  content: ""; position: absolute; top: 26px; bottom: 17px; width: 9px; border-radius: 2px;
  background-image: linear-gradient(to bottom, var(--pad-c, var(--copper-lo)) 0 5px, transparent 5px);
  background-size: 100% 14px; background-repeat: no-repeat space;
}
.fp::before { left: -5px; }
.fp::after { right: -5px; }
.fp:hover { --pad-c: var(--copper-hi); border-color: rgba(224, 169, 74, .55); }
.fp-top { order: -1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fp-top .des { display: inline-flex; align-items: center; gap: 8px; padding-top: 4px; }
.fp-top .des::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--silk); opacity: .85; }
.fp h3 { font: 700 21px/1.2 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; color: var(--silk); }
.fp--wide h3 { font-size: clamp(23px, 2.6vw, 30px); }
.fp p { font-size: 16px; line-height: 1.55; }
.nets { display: flex; flex-wrap: wrap; gap: 8px; }
.nets li { font: 500 12.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--copper-hi); padding: 7px 10px; border: 1px solid var(--copper-lo); border-radius: 5px; background: rgba(224, 169, 74, .07); }
.ev { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px !important; }
.ev-k, .ev-pins dt { font: 500 11.5px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silk-3); }
.ev-k { display: block; margin-bottom: 4px; }
.ev-pins { margin-top: 2px; border-top: 1px solid var(--line); }
.ev-pins > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.ev-pins > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ev-pins dt { margin: 0; color: var(--silk); font-weight: 600; padding-top: 2px; }

/* ================= RKT1: experience ================= */
.xp { max-width: 900px; padding: 24px clamp(18px, 3vw, 32px) 4px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--board-2); }
.xp-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.xp-role { font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--f-display); font-stretch: 110%; letter-spacing: -.01em; color: var(--silk); overflow-wrap: anywhere; }
.xp-when { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--copper-hi); }
.xp-org { margin: 8px 0 16px; font-size: clamp(16.5px, 1.4vw, 18px); color: var(--silk-2); }

/* ================= MOD1 to MOD3: projects as plug-in modules ================= */
.mods { display: grid; gap: 30px; }
.mod {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px clamp(18px, 3vw, 34px) 0;
  /* two mounting holes on the top edge, then the board surface */
  background:
    radial-gradient(circle at 16px 16px, var(--board-0) 0 3.5px, var(--copper-lo) 4px 6.5px, transparent 7px),
    radial-gradient(circle at calc(100% - 16px) 16px, var(--board-0) 0 3.5px, var(--copper-lo) 4px 6.5px, transparent 7px),
    var(--board-2);
  transition: border-color .2s;
}
.mod:target { border-color: var(--copper); }
.mod-top { order: -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; padding: 0 14px; }
.mod-state { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silk-3); }
.mod h3 { font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--f-display); font-stretch: 110%; letter-spacing: -.01em; color: var(--silk); margin-bottom: 12px; overflow-wrap: anywhere; }
.mod-what { font-size: clamp(16.5px, 1.4vw, 18px); color: var(--silk); max-width: 70ch; margin-bottom: 18px; }

.fields > div { display: grid; gap: 6px 24px; padding: 15px 0; border-top: 1px solid var(--line); align-content: start; }
.fields dt { font: 500 12px/1.5 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--silk-3); }
.fields dd { font-size: 16px; line-height: 1.6; max-width: 76ch; min-width: 0; }
.fields .nets { margin-top: 12px; }
@container (min-width: 600px) {
  .fields > div { grid-template-columns: 170px minmax(0, 1fr); align-items: baseline; }
}
@container (min-width: 900px) {
  .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 40px; }
  .fields > div { grid-template-columns: minmax(0, 1fr); }
  .fields > .f-wide { grid-column: 1 / -1; }
  .fields > .f-wide .ticks { columns: 2; column-gap: 40px; }
}
.ticks li { position: relative; padding-left: 20px; margin-bottom: 6px; break-inside: avoid; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--copper); }

/* card-edge connector */
.fingers {
  height: 22px; margin-top: 18px;
  background-image: linear-gradient(90deg, var(--copper) 0 12px, transparent 12px);
  background-size: 21px 100%; background-repeat: space no-repeat;
  opacity: .92;
}

/* ================= Tables (scroll inside their own wrapper) ================= */
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--board-1); }
.table-wrap:focus-visible { outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; padding: 12px 16px 10px; font: 500 12px/1.5 var(--f-mono); letter-spacing: .06em; color: var(--silk-3); border-bottom: 1px solid var(--line); }
th, td { padding: 10px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
thead th { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silk-3); white-space: nowrap; }
td { color: var(--silk); }
td.num { white-space: nowrap; font-family: var(--f-mono); font-size: .93em; }
table.cfg { min-width: 520px; }
.kind { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--led); border: 1px solid rgba(98, 230, 164, .45); border-radius: 4px; padding: 4px 6px; white-space: nowrap; }
/* Work the owner has started or planned but not published yet. */
.kind--wip { color: var(--copper); border-color: rgba(224, 169, 74, .5); }

/* ================= DS1 to DS3: GitHub readout ================= */
.gh-status { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1.5 var(--f-mono); color: var(--silk-3); margin-bottom: 18px; }
.gh-status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--silk-3); }
[data-gh-state="loading"] .gh-status::before { background: var(--copper); animation: blink 1s steps(2, start) infinite; }
[data-gh-state="ready"] .gh-status::before { background: var(--led); box-shadow: 0 0 8px rgba(98, 230, 164, .8); }
[data-gh-state="error"] .gh-status::before { background: var(--todo); }
@keyframes blink { to { visibility: hidden; } }
.gh-body[hidden] { display: none; }
.ro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); margin-bottom: 26px; }
.ro-cell {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px;
  padding: clamp(12px, 2vw, 20px) clamp(12px, 2vw, 22px);
  background: var(--board-0); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: inset 0 0 0 3px rgba(6, 19, 14, .9), inset 0 0 0 4px var(--line);
}
.ro-cell dt { font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--silk-2); overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .ro-cell { padding: 12px 10px; }
  .ro-cell dt { font-size: 10.5px; letter-spacing: .02em; }
}
.ro-cell dt .des { display: block; margin-bottom: 4px; }
.ro-val { display: inline-grid; justify-items: end; align-self: flex-start; font: 600 clamp(34px, 6vw, 64px)/1 var(--f-mono); letter-spacing: .06em; color: var(--led); text-shadow: 0 0 14px rgba(98, 230, 164, .5); font-variant-numeric: tabular-nums; }
.ro-val > span { grid-area: 1 / 1; }
.ro-ghost { color: rgba(98, 230, 164, .08); text-shadow: none; }
.gh-cols { display: grid; gap: 22px; align-items: start; }
@container (min-width: 780px) { .gh-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.gh-panel { background: var(--board-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px clamp(16px, 2.4vw, 26px); }
.gh-panel h3 { font: 700 18px/1.3 var(--f-display); font-stretch: 108%; color: var(--silk); margin-bottom: 14px; }
.langs li { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 0; font-size: 15px; }
.lang-name { color: var(--silk); overflow-wrap: anywhere; }
.lang-bar { height: 12px; border-radius: 2px; background: var(--board-0); overflow: hidden; }
.lang-bar span {
  display: block; height: 100%; width: calc(var(--n, 0) * 100%);
  background: repeating-linear-gradient(90deg, var(--copper) 0 calc(100% / var(--count, 1) - 3px), transparent 0 calc(100% / var(--count, 1)));
}
.lang-count { font: 500 12.5px/1 var(--f-mono); color: var(--silk-3); white-space: nowrap; }
.gh-foot { margin-top: 12px; font-size: 13.5px; color: var(--silk-3); }
.latest li { padding: 11px 0; border-top: 1px solid var(--line); }
.latest li:first-child { border-top: 0; padding-top: 0; }
.latest a { font: 600 15px/1.4 var(--f-mono); overflow-wrap: anywhere; }
.lt-meta { display: block; margin-top: 2px; font: 500 12px/1.5 var(--f-mono); letter-spacing: .05em; color: var(--silk-3); }
.lt-desc { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.lt-abs { display: none; } /* print-only absolute date, see @media print */
.gh-fallback { margin-top: 18px; font-size: 15.5px; }

/* ================= Y1: timeline ================= */
.tl { max-width: 900px; }
.tl li { position: relative; display: grid; gap: 4px 28px; padding: 0 0 28px 38px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: -4px; width: 2px; background: var(--copper); }
.tl li:last-child::before { bottom: 0; background: repeating-linear-gradient(to bottom, var(--copper) 0 6px, transparent 6px 12px); }
.tl li::after { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--board-1); border: 4px solid var(--copper); }
.tl li.tl-now::after { background: var(--led); border-color: var(--led); box-shadow: 0 0 12px rgba(98, 230, 164, .6); }
.tl-date { font: 600 13px/1.9 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--copper-hi); }
.tl-text { color: var(--silk); max-width: 60ch; }
.tl-src { font: 400 12px/1.6 var(--f-mono); letter-spacing: .04em; color: var(--silk-3); margin-top: 2px; }
@media (min-width: 720px) {
  .tl li { grid-template-columns: 9.5rem minmax(0, 1fr); padding-left: 44px; }
}

/* ================= F1: absolute maximum ratings ================= */
table.amr { min-width: 0; }
@media (max-width: 520px) { table.amr th, table.amr td { padding: 9px 10px; } table.amr { font-size: 14px; } }
.sym { font-family: var(--f-mono); font-style: italic; white-space: nowrap; color: var(--copper-hi); }
.sym sub { font-style: normal; font-size: .72em; letter-spacing: .04em; }

/* ================= J1: contact ================= */
.contact-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@container (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.contact-copy p { margin-bottom: 18px; }
main a.mail-big { display: inline-block; padding: 8px 0; font: 700 clamp(21px, 3vw, 34px)/1.2 var(--f-display); font-stretch: 108%; letter-spacing: -.01em; color: var(--silk); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 7px; overflow-wrap: anywhere; }
main a.mail-big:hover { color: var(--copper-hi); }
.contact-copy .cta { margin-top: 26px; }
.contact-copy .contact-note { margin: 22px 0 0; font-size: 15px; color: var(--silk-3); }
.contact-chip { align-self: center; }
.contact-chip .chip { max-width: 540px; }

/* ================= Footer ================= */
.foot { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); background: var(--board-0); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-top: 22px; padding-bottom: 22px; font: 500 13px/1.4 var(--f-mono); letter-spacing: .08em; color: var(--silk-3); }
.foot-part { display: inline-flex; align-items: center; gap: 12px; color: var(--silk); }
.foot-part::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--copper); background: var(--board-0); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--silk-2); }
.foot a:hover { color: var(--copper-hi); }

/* ================= Zones open as they scroll in =================
   site.js adds .anim to <html> and .in to each zone and project. Content is only
   hidden under .anim, so a missing script never hides anything; the 3D view
   (.mode-3d) is excluded because it shows zones as overlay cards. */
.anim .zone > *, .anim .project, .anim .skills > li {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.anim .zone > :nth-child(2) { transition-delay: .08s; }
.anim .zone > :nth-child(3) { transition-delay: .16s; }
.anim .zone > :nth-child(4) { transition-delay: .24s; }
.anim .skills > li:nth-child(2) { transition-delay: .2s; }
.anim .skills > li:nth-child(3) { transition-delay: .28s; }
.anim .skills > li:nth-child(4) { transition-delay: .36s; }
.anim .skills > li:nth-child(5) { transition-delay: .44s; }
.anim .skills > li:nth-child(6) { transition-delay: .52s; }
.anim:not(.mode-3d) .zone:not(.in) > :not(.mods):not(.bundle) { opacity: 0; transform: translateY(22px); }
.anim:not(.mode-3d) .zone:not(.in) .skills > li { opacity: 0; transform: translateY(26px) scale(.98); }
.anim:not(.mode-3d) .project:not(.in) { opacity: 0; transform: translateY(34px); }
.anim:not(.mode-3d) .project:not(.in) .fingers { transform: scaleX(.2); }
.anim .fingers { transform-origin: 50% 100%; transition: transform .8s var(--ease) .25s; }
.anim:not(.mode-3d) .zone:not(.in)::before { transform: scaleY(0); }
.anim:not(.mode-3d) .zone:not(.in) .tap { stroke-dashoffset: 1; }

/* ================= Reduced motion: no movement at all ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .loader { display: none; }
  .anim .zone > *, .anim .project, .anim .skills > li, .anim .fingers { opacity: 1 !important; transform: none !important; }
  .anim .zone::before { transform: none !important; }
  .anim .tap { stroke-dashoffset: 0 !important; }
}

/* Windows High Contrast */
@media (forced-colors: active) {
  .todo { border: 1px dashed CanvasText; }
  .fp, .mod, .gh-panel, .ro-cell, .table-wrap { border: 1px solid CanvasText; }
}

/* ================= Print: A4 datasheet, doubles as the CV ================= */
@page {
  size: A4;
  margin: 17mm 15mm 18mm;
  @top-left { content: "ATL-2026 Rev 2.0"; font: 600 8pt "IBM Plex Mono", monospace; color: #000; }
  @top-right { content: "Atilla Basut / embedded systems"; font: 400 8pt "IBM Plex Sans", Arial, sans-serif; color: #000; }
  @bottom-left { content: "ATL-2026 Rev 2.0"; font: 400 8pt "IBM Plex Mono", monospace; color: #000; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 400 8pt "IBM Plex Mono", monospace; color: #000; }
}

@media print {
  :root {
    --board-0: #fff; --board-1: #fff; --board-2: #fff; --board-3: #fff; --trace-mask: #fff;
    --silk: #000; --silk-2: #000; --silk-3: #333;
    --line: #9a9a9a; --line-2: #666;
    --copper: #000; --copper-hi: #000; --copper-lo: #666;
    --todo: #000; --led: #000;
    --gutter: 0px; --pad-x: 0px;
  }
  html, body { background: #fff !important; color: #000; }
  html { scroll-behavior: auto; }
  body { font-size: 9.8pt; line-height: 1.45; }

  /* screen-only parts */
  .loader, .topbar, #world-root, .skip, .no-print, .bundle, .tap, .scroll-reg, #mode-toggle, #map-toggle,
  .zone-close, .world-close, [data-world-ui], .hud, .world-hud, .zone::before, .des-row::before, .fp::before, .fp::after, .fingers,
  .invite-3d, .ready-toast, .board-shot { display: none !important; }

  /* every zone printed in order, whatever view (classic or 3D) was active */
  main#content { display: block !important; position: static !important; max-width: none; padding: 0; transform: none !important; }
  .zone, .project {
    display: block !important; position: static !important; inset: auto !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    width: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important;
    box-shadow: none !important; z-index: auto !important; animation: none !important;
  }
  .zone { padding: 0 !important; margin: 0 0 7mm !important; border: 0 !important; background: none !important; }
  .project.mod { display: flex !important; }
  .anim .zone > *, .anim .skills > li { opacity: 1 !important; transform: none !important; }

  a { color: #000 !important; text-decoration: none !important; }
  main a[href^="http"]:not(.url)::after { content: " (" attr(href) ")"; font: 400 8pt var(--f-mono); overflow-wrap: anywhere; }
  code { background: none; color: #000; padding: 0; }

  .todo { color: #000; background: none; border: 1px dashed #000; font-weight: 600; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* header block = datasheet title */
  #about { margin-bottom: 5mm !important; padding-bottom: 3mm !important; border-bottom: 1.5pt solid #000 !important; }
  .hero-grid { display: block; }
  .hero-copy .des-row { margin-bottom: 3mm; }
  h1 { font-size: 28pt; line-height: 1; margin-bottom: 2.5mm; letter-spacing: -.02em; }
  h1 span { display: inline; }
  .role { font-size: 12.5pt; margin-bottom: 2mm; }
  .lead, .now { font-size: 10pt; margin-bottom: 2mm; max-width: none; }
  .status { padding: 0; border: 0; margin-bottom: 2mm; font-size: 10pt; }
  .led { display: none; }
  .print-contact { display: block; font: 500 9pt/1.6 var(--f-mono); }
  .refdes { border-color: #000; height: auto; padding: 1pt 4pt; }

  .zone-head { margin-bottom: 4mm; gap: 2mm; max-width: none; }
  .zone-head h2 { font-size: 16pt; letter-spacing: -.01em; padding-top: 2mm; border-top: 1pt solid #000; }
  .zone-note { font-size: 9.5pt; max-width: none; }
  h2, h3, .zone-head, .mod-top { break-after: avoid; page-break-after: avoid; }

  .fp, .mod, .gh-panel, .ro-cell, .table-wrap { background: none !important; border: .75pt solid #888; box-shadow: none; }
  .fp, .gh-panel, .ro, table, .table-wrap, .tl li, .fields > div, .ev-pins > div, .contact-copy { break-inside: avoid; page-break-inside: avoid; }
  .mod { break-inside: auto; }
  .mod-what { break-after: avoid; page-break-after: avoid; }
  .skills { gap: 3mm; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fp--wide { grid-column: span 2; }
  .gh-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4mm; }
  .contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6mm; }
  .fields > div { grid-template-columns: 30mm minmax(0, 1fr); }
  .fp { padding: 3mm 4mm; gap: 1.5mm; }
  .fp h3 { font-size: 11.5pt; }
  .fp--wide h3 { font-size: 12.5pt; }
  .fp p, .ev, .ev-pins > div { font-size: 9.3pt !important; }
  .fp-top .ico { display: none; }
  .fp-top { margin-bottom: -1mm; }
  .ev { padding-top: 1.5mm; }
  .ev-k { display: inline; margin-right: 1.5mm; }
  .ev-pins > div { padding: 1.2mm 0; }
  .nets li { color: #000; border-color: #888; background: none; padding: 2pt 4pt; font-size: 8pt; }

  .xp { max-width: none; padding: 3mm 5mm 1mm; background: none; border: .75pt solid #888; break-inside: avoid; page-break-inside: avoid; }
  .xp-role { font-size: 13pt; }
  .xp-when { font-size: 8.5pt; color: #000; }
  .xp-org { margin: 1mm 0 2mm; font-size: 10pt; }

  .mods { gap: 5mm; }
  .mod { padding: 4mm 5mm 3mm; background: none; }
  .mod h3 { font-size: 13pt; margin-bottom: 1.5mm; }
  .mod-top { padding: 0; margin-bottom: 1mm; }
  .mod-what { font-size: 10pt; margin-bottom: 2mm; }
  .fields > div { padding: 2mm 0; }
  .fields dd { font-size: 9.5pt; max-width: none; }
  .ticks li { margin-bottom: 1mm; }
  .ticks li::before { background: #000; }
  /* Marks drawn with a background (list bullets, designator dots, the timeline trace
     and its "now" dot) print even with Chrome's default "Background graphics" off. */
  .ticks li::before, .fp-top .des::before, .tl li::before, .tl li::after {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .table-wrap { overflow: visible; }
  table.cfg, table.amr { min-width: 0; }
  table { font-size: 9pt; }
  th, td { padding: 1.5mm 3mm; }
  caption { padding: 1.5mm 3mm; }
  .kind { color: #000; border-color: #000; }

  .ro { gap: 3mm; margin-bottom: 4mm; }
  .ro-cell { padding: 2mm 3mm; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 3mm; }
  .ro-cell dt .des { display: inline; margin: 0 1mm 0 0; }
  .ro-cell dt { font-size: 8pt; }
  .ro-val { font-size: 16pt; color: #000; text-shadow: none; }
  .gh-panel { padding: 3mm 4mm; }
  .gh-panel h3 { font-size: 11pt; margin-bottom: 2mm; }
  .langs li { padding: 1mm 0; font-size: 9pt; }
  .latest li { padding: 1.5mm 0; }
  .latest a { font-size: 9pt; }
  .lt-desc { font-size: 8.8pt; }
  .gh-foot, .gh-fallback { font-size: 8.5pt; margin-top: 2mm; }
  .ro-ghost { display: none; }
  .gh-status::before { display: none; }
  .gh-status { margin-bottom: 3mm; font-size: 8.5pt; }
  [data-gh-state="error"] .gh-status { display: none; }
  /* live data printed: the fallback line is not needed (the profile URL is in the header) */
  [data-gh-state="ready"] .gh-fallback { display: none; }
  /* a printed "2 days ago" goes stale: print the date instead */
  .lt-rel { display: none; }
  .lt-abs { display: inline; }
  .lang-bar { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lang-bar span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .tl li { padding-bottom: 3mm; }
  .tl li::after { background: #fff; border-color: #000; box-shadow: none; }
  .tl li.tl-now::after { background: #000; }
  .tl-src { font-size: 7.5pt; }

  main a.mail-big { font-size: 15pt; text-decoration: underline !important; }
  .contact-copy .contact-note { margin-top: 2mm; font-size: 9pt; }

  .foot { margin-top: 6mm; border-top: 1.5pt solid #000; background: none; }
  .foot-in { padding: 2mm 0 0; color: #000; }
  .foot a { min-height: 0; color: #000; }
  .foot-part::before { display: none; }
}