/* ============================================================
   Gokul Rajan - portfolio redesign
   Light: "Zustandsgraph" as stacked sheets (Klein blue, graph vocabulary)
   Dark:  "Systemmonitor" terminal mode (own layout, injected by redesign.js)
   ============================================================ */

:root{
  --bg:#F7F8F7;
  --ink:#16181D;
  --mut:#5F6269;
  --faint:#a9acb2;
  --line:#E2E4E2;
  --card:#FCFCFB;
  --blue:#002FA7;
  --blue-ink:#B9C6F2;
  --green:#2E9E58;
  --stamp:#D0021B;

  --mbg:#0A0A0A;
  --ph:#EAEAEA;
  --mmut:#8a8a8a;
  --mdim:#6a6a6a;
  --mline:#2c2c2c;
  --mrow:#1e1e1e;
  --mred:#FF2A2A;
  --mgrn:#4AF626;

  --pad:max(28px, calc((100vw - 1160px)/2 + 28px));
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:16px; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.mono{ font-family:"JetBrains Mono",Menlo,monospace; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
::selection{ background:var(--blue); color:#fff; }

/* ============================================================
   SHEETS - each section is a full-screen sheet; the next slides
   over the previous, which sinks back (driven by redesign.js)
   ============================================================ */
/* Each sheet lives in a taller "stage": the sheet sticks while the stage's
   extra height provides dwell time - a stretch of scroll where the sheet
   rests fully visible before the next one begins sliding over. */
.stage{ position:relative; height:140vh; }
.stage:last-of-type{ height:100vh; }
.sheet{
  position:sticky; top:0;
  /* at least one screen tall; a sheet with more content grows, scrolls through,
     then pins at its bottom edge while the next one slides over (redesign.js) */
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  padding-left:var(--pad); padding-right:var(--pad);
  transform-origin:center top;
  overflow:hidden;
}
@media (max-width:920px){
  /* small screens: content can exceed one viewport - fall back to plain flow */
  .stage{ height:auto; }
  .stage:last-of-type{ height:auto; }
  .sheet{ position:relative; height:auto; min-height:100dvh; overflow:visible; }
}

/* mobile-only hero pieces (C2 terminal voice) - hidden on desktop */
.whoami, .mcur, .mpeek, .stage-mg, .termbtn{ display:none; }
.termbtn{ background:none; border:none; cursor:pointer; padding:2px; color:var(--mut); }
.termbtn svg{ width:17px; height:17px; display:block; }
.sheet .body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:76px 0 56px; }
.num{ font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px; opacity:.55; }
.sheet h2{
  font-family:"Space Grotesk",Inter,sans-serif; font-weight:700;
  letter-spacing:-.03em; line-height:1.1; font-size:clamp(1.6rem, 3vw, 2.4rem);
}

/* ---------- 00 · hero ---------- */
.s0{ background:var(--bg); }
.topbar{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:baseline; gap:32px; padding-top:30px;
}
.logo{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-weight:700; font-size:1.05rem; text-decoration:none; letter-spacing:-.01em;
}
.topbar nav{ display:flex; gap:30px; justify-self:center; align-items:center; }
.topbar .modes{ justify-self:end; display:flex; align-items:center; gap:16px; }
/* language switch (DE / EN): header, terminal mode (assets/i18n.js adds it) */
html.i18n-wait body{ visibility:hidden; }   /* only while an English page swaps in */
.langsw{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; letter-spacing:.1em; color:var(--mut); }
.langsw button{
  background:none; border:0; padding:4px 2px; cursor:pointer; color:inherit; font:inherit; letter-spacing:inherit;
  border-bottom:1.5px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.langsw button:hover{ color:var(--ink); }
.langsw button[aria-pressed="true"]{ color:var(--ink); font-weight:700; border-bottom-color:currentColor; }
.langsw button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.langsw span{ opacity:.45; }
body.night .langsw{ color:#8B96B4; }
body.night .langsw button:hover, body.night .langsw button[aria-pressed="true"]{ color:#EAEFFC; }
#monitor .mhead .langsw{ font-size:inherit; color:var(--mmut); }
#monitor .mhead .langsw button:hover, #monitor .mhead .langsw button[aria-pressed="true"]{ color:var(--ph); }
/* German running text: let long compounds hyphenate */
html[lang="de"] .sheet p, html[lang="de"] .det li, html[lang="de"] .s2 .r small{ -webkit-hyphens:auto; hyphens:auto; }
.moonbtn{
  position:relative; background:none; border:none; cursor:pointer; padding:2px;
  color:var(--mut); display:flex; transition:color .18s ease;
}
.moonbtn svg{
  width:17px; height:17px; display:block;
  transition:transform .22s cubic-bezier(.3,1.4,.4,1);
}
.moonbtn:hover{ color:var(--blue); }
.moonbtn:hover svg{ transform:rotate(-14deg); }   /* the moon tips back, settling in */
.moonbtn .tip{
  position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); opacity:0; transition:opacity .18s ease;
  white-space:nowrap; pointer-events:none;
}
.moonbtn:hover .tip,
.moonbtn:focus-visible .tip{ opacity:1; }
.topbar nav a{
  position:relative; display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--mut);
  transition:color .18s ease, transform .18s ease;
}
.topbar nav a svg{
  width:19px; height:19px; display:block; overflow:visible;
  transition:transform .22s cubic-bezier(.3,1.4,.4,1);
}
.topbar nav a.on{ color:var(--blue); }
.topbar nav a:hover{ color:var(--blue); }
/* each icon moves in character on hover */
.nav-home:hover svg{ transform:translateY(-2px); }                      /* the house lifts */
.nav-work:hover svg{ transform:rotate(-8deg); transform-origin:50% 20%; } /* the briefcase swings on its handle */
.nav-blog:hover svg{ transform:rotate(4deg) translateY(-1px); }          /* the page tilts, mid-read */
.nav-contact:hover svg{ transform:translate(2px,-2px) rotate(6deg); }    /* the plane takes off */
.nav-contact .trail{ opacity:0; transition:opacity .2s ease; }
.nav-contact:hover .trail{ opacity:1; }                                  /* motion dashes appear behind it */
.topbar nav a .tip{
  position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); opacity:0; transition:opacity .18s ease;
  white-space:nowrap; pointer-events:none;
}
.topbar nav a:hover .tip,
.topbar nav a:focus-visible .tip{ opacity:1; }
.toggle{
  background:none; border:none; cursor:pointer;
  color:var(--mut); font-size:.78rem; letter-spacing:.04em;
  padding:4px 2px; transition:color .18s ease;
}
.toggle:hover{ color:var(--blue); }
.toggle .blink{ animation:blink 1.1s steps(1) infinite; font-weight:700; }
@keyframes blink{ 50%{ opacity:0; } }

.s0 .hrow{ flex:1; display:flex; align-items:center; gap:48px; padding-bottom:40px; }
.hero-copy{ width:42%; min-width:300px; }
.s0 h1{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.18;
}
.s0 h1 .hl{
  padding:0 .12em; color:#fff;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.s0 h1 .hl.sap{ background:var(--ink); }
.s0 h1 .hl.ai{ background:var(--blue); }
.hero-graph{ flex:1; min-width:0; }
.hero-graph svg{ width:100%; height:auto; display:block; }

#careerGraph .node{ transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.2); }
#careerGraph .elabels text{ transition:opacity .6s ease; }
#careerGraph .arrows path{ transition:opacity .3s ease; }
#careerGraph.pre .node{ opacity:0; transform:translateY(6px); }
#careerGraph.pre .elabels text,
#careerGraph.pre .arrows path,
#careerGraph.pre .edge.dashed{ opacity:0; }

.scrollhint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); text-decoration:none;
  transition:color .18s ease;
}
.scrollhint:hover{ color:var(--blue); }
.scrollhint .edgeline{ width:10px; height:38px; display:block; }
.scrollhint .edgeline line{ animation:edgeflow 1.4s linear infinite; }
@keyframes edgeflow{ to{ stroke-dashoffset:-20; } }

/* ---------- 03 shipped nodes + 04 earlier nodes: index + detail ----------
   The sheet wears the selected project's own palette. Tokens live on
   [data-th]: the sheet carries the selected key (set by redesign.js), each
   pane carries its own (so stacked phone panes keep their colours). Where a
   raw brand accent fails 4.5:1 as text, --th-acct is a darker shade of it. */
.s1{ background:#FFFFFF; }
[data-th="IRV"]{ --th-bg:#070b12; --th-surface:#0f1a2e; --th-ink:#e8eef7; --th-mut:#8fa3c4; --th-line:rgba(232,238,247,.13); --th-acc:#4f8ff7; --th-acct:#4f8ff7; --th-award:#ff6b6b; --th-stamp:#ff6b6b; --th-silver:#8B939C; }
[data-th="MNV"]{ --th-bg:#6464f3; --th-surface:#7272f4; --th-ink:#ffffff; --th-mut:#ffffff; --th-line:rgba(255,255,255,.3); --th-acc:#ffffff; --th-acct:#ffffff; --th-award:#ffffff; --th-stamp:#ffffff; --th-silver:#ffffff; }
[data-th="KLB"]{ --th-bg:#f6f3fc; --th-surface:#ffffff; --th-ink:#1d1a3f; --th-mut:#5d5a78; --th-line:rgba(29,26,63,.12); --th-acc:#7b6fe0; --th-acct:#5e52c7; --th-award:#c8102e; --th-stamp:#D0021B; --th-silver:#8B939C; }
[data-th="SIB"]{ --th-bg:#f5e6d3; --th-surface:#fff8ef; --th-ink:#4a154b; --th-mut:#6e4a66; --th-line:rgba(74,21,75,.16); --th-acc:#ff6b6b; --th-acct:#b3372f; --th-award:#b3372f; --th-stamp:#D0021B; --th-silver:#8B939C; }
[data-th="SPC"]{ --th-bg:#fafafa; --th-surface:#ffffff; --th-ink:#262626; --th-mut:#6b6b6b; --th-line:#dbdbdb; --th-acc:#0095f6; --th-acct:#0074c2; --th-award:#c8102e; --th-stamp:#D0021B; --th-silver:#8B939C; }
[data-th="PMW"]{ --th-bg:#1c2a5a; --th-surface:#26356b; --th-ink:#ffffff; --th-mut:#b9c3e0; --th-line:rgba(255,255,255,.14); --th-acc:#e22718; --th-acct:#ff6b5e; --th-award:#ff6b5e; --th-stamp:#ff6b5e; --th-silver:#b9c3e0; }
[data-th="TCH"]{ --th-bg:#f6f4f3; --th-surface:#ffffff; --th-ink:#24282c; --th-mut:#5a5f64; --th-line:#e3dfdd; --th-acc:#a3322e; --th-acct:#a3322e; --th-award:#a3322e; --th-stamp:#D0021B; --th-silver:#8B939C; }
/* 04 earlier nodes: palettes drawn from each project's own hardware / brand */
[data-th="FND"]{ --th-bg:#1c1a27; --th-surface:#282538; --th-ink:#f3f1f8; --th-mut:#a9a4bf; --th-line:rgba(243,241,248,.12); --th-acc:#ea4b71; --th-acct:#ff7a98; --th-award:#ff7a98; --th-stamp:#ff7a98; --th-silver:#a9a4bf; }
[data-th="SIH"]{ --th-bg:#14245c; --th-surface:#1d3175; --th-ink:#f5f6fb; --th-mut:#b8c0dd; --th-line:rgba(255,255,255,.14); --th-acc:#f39c34; --th-acct:#f6a94d; --th-award:#f6a94d; --th-stamp:#f6a94d; --th-silver:#b8c0dd; }
[data-th="ADS"]{ --th-bg:#efe3cc; --th-surface:#fbf5ea; --th-ink:#2b1d10; --th-mut:#5f4a33; --th-line:rgba(43,29,16,.15); --th-acc:#1e56d6; --th-acct:#1a47b3; --th-award:#1a47b3; --th-stamp:#D0021B; --th-silver:#8B939C; }
[data-th="GLM"]{ --th-bg:#161616; --th-surface:#262626; --th-ink:#f4f4f4; --th-mut:#a8a8a8; --th-line:rgba(244,244,244,.12); --th-acc:#f1c21b; --th-acct:#f1c21b; --th-award:#f1c21b; --th-stamp:#ff6b6b; --th-silver:#a8a8a8; }
[data-th="MMA"]{ --th-bg:#ebe7c3; --th-surface:#f7f4dc; --th-ink:#23240f; --th-mut:#55563a; --th-line:rgba(35,36,15,.15); --th-acc:#b5651d; --th-acct:#8a4a12; --th-award:#8a4a12; --th-stamp:#D0021B; --th-silver:#8B939C; }
.sheet[data-th]{ background:var(--th-bg); color:var(--th-ink); transition:background-color .4s ease, color .4s ease; }
.sheet[data-th] .num{ color:var(--th-mut); opacity:1; }
.sheet[data-th] h2{ color:var(--th-ink); }

.md{ margin-top:28px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:28px; align-items:start; }
.mlist{ display:flex; flex-direction:column; border-top:1px solid var(--th-line); }
.mtab{
  all:unset; cursor:pointer;
  display:grid; grid-template-columns:64px 1fr; column-gap:12px;
  padding:13px 12px; border-bottom:1px solid var(--th-line); border-left:2px solid transparent;
  color:var(--th-ink); transition:background-color .4s, border-color .4s, color .4s;
}
.mtab:hover{ background:color-mix(in srgb, var(--th-ink) 5%, transparent); }
.mtab[aria-selected="true"]{ background:var(--th-surface); border-left-color:var(--th-acc); box-shadow:0 10px 24px -16px rgba(0,0,0,.45); }
.mtab:focus-visible{ outline:2px solid var(--th-acc); outline-offset:-2px; }
.mtab .lid{ grid-row:1 / span 2; align-self:center; font-size:.66rem; letter-spacing:.12em; color:var(--th-acct); }
.mtab .lt{ display:flex; align-items:center; font-family:"Space Grotesk",Inter,sans-serif; font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.mtab .aw{ margin-top:3px; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; }
.aw.award{ color:var(--th-award); } .aw.quiet{ color:var(--th-mut); } .aw.acc{ color:var(--th-acct); }

/* award stamp (Aktenzeichen ink), shrunk to sit beside the project name */
.mstamp{
  position:relative; flex:none; margin-left:9px;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; border:2px solid currentColor;
  color:var(--th-stamp); transform:rotate(-12deg);
  font-family:"JetBrains Mono",Menlo,monospace; font-weight:700;
}
.mstamp::before{ content:""; position:absolute; inset:2px; border-radius:50%; border:1px solid currentColor; opacity:.55; }
.mstamp .rank{ font-size:11px; line-height:1; }
.mstamp .rank sup{ font-size:5px; }
.mstamp.silver{ color:var(--th-silver); }

/* BMW M stripes streaking across the PMW sheet (redesign.js). Layer 1: above
   the sheet background, below the text and the screenshot (layer 2). */
.mstripes{ position:absolute; left:0; right:0; z-index:1; overflow:hidden; pointer-events:none; }
.mstripes .rail{ position:absolute; left:50%; top:50%; width:0; height:0; }
.mstripes .rail span{ position:absolute; left:0; height:22px; }
.sheet[data-th] .num, .sheet[data-th] h2, .md{ position:relative; z-index:2; }

.mdetail{ position:relative; }
.mpane{ display:none; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.mpane.on{ display:grid; animation:mpin .28s ease; }
@keyframes mpin{ from{ opacity:0; transform:translateY(6px); } }
/* image height follows the viewport so the sheet always fits (400px at 1440x900, 260px at 1280x720) */
.mpane .shot{ display:block; width:100%; height:clamp(150px, calc(100vh - 460px), 400px); overflow:hidden; border:1px solid var(--th-line); background:var(--th-surface); }
.mpane .shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:left top; }
.mpane .shot.phone img{ object-fit:contain; object-position:center top; }
.mpane .shot.center img{ object-position:center; }   /* keep a centred subject (Minerva's orb) in frame on short screens */
.mpane .shot.low img{ object-position:center 85%; }   /* keep a low subject (the ALCOHOL DETECTED LCD) in frame */
.mtext{ display:flex; flex-direction:column; }
.mtext .id{ margin-bottom:8px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--th-acct); }
.mtext .t{ margin-bottom:6px; font-family:"Space Grotesk",Inter,sans-serif; font-size:1.45rem; font-weight:700; letter-spacing:-.02em; color:var(--th-ink); }
.mtext p{ margin-bottom:16px; font-size:.88rem; line-height:1.6; color:var(--th-mut); }
.mtext .meta{
  display:flex; justify-content:space-between; gap:10px; padding-top:14px; border-top:2px solid var(--th-acc);
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--th-mut);
}
.mtext .meta > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mtext .go{ color:var(--th-acct); text-decoration:none; white-space:nowrap; }
.mtext .go:hover{ text-decoration:underline; }
.mtext .meta{ align-items:center; }
.mtext .meta .links{ flex:none; display:flex; align-items:center; gap:16px; }
/* the demo button: filled in each project's own colour (text >= 4.5:1, button >= 3:1 against its sheet) */
.mtext .go.btn{
  display:inline-flex; align-items:center; padding:9px 14px;
  background:var(--th-btn); color:var(--th-btn-ink); font-weight:700; letter-spacing:.12em;
  transition:transform .15s ease, box-shadow .15s ease;
}
.mtext .go.btn:hover{ text-decoration:none; transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(0,0,0,.55); }
.mtext .go.btn:focus-visible{ outline:2px solid var(--th-ink); outline-offset:3px; }
[data-th="IRV"]{ --th-btn:#4f8ff7; --th-btn-ink:#070b12; }
[data-th="MNV"]{ --th-btn:#ffffff; --th-btn-ink:#3b3bd6; }
[data-th="KLB"]{ --th-btn:#5e52c7; --th-btn-ink:#ffffff; }
[data-th="SIB"]{ --th-btn:#4a154b; --th-btn-ink:#ffffff; }
[data-th="SPC"]{ --th-btn:#0074c2; --th-btn-ink:#ffffff; }
[data-th="PMW"]{ --th-btn:#e22718; --th-btn-ink:#ffffff; }
[data-th="TCH"]{ --th-btn:#a3322e; --th-btn-ink:#ffffff; }
[data-th="FND"]{ --th-btn:#ea4b71; --th-btn-ink:#1c1a27; }
[data-th="SIH"]{ --th-btn:#f39c34; --th-btn-ink:#14245c; }
[data-th="ADS"]{ --th-btn:#1e56d6; --th-btn-ink:#ffffff; }
[data-th="GLM"]{ --th-btn:#f1c21b; --th-btn-ink:#161616; }
[data-th="MMA"]{ --th-btn:#8a4a12; --th-btn-ink:#ffffff; }
body.night [data-th]{ --th-btn:var(--th-acct); --th-btn-ink:#0D1330; }
.mtext .go2{ color:var(--th-mut); text-decoration:none; white-space:nowrap; }   /* GitHub: secondary to the prototype */
.mtext .go2:hover{ color:var(--th-ink); text-decoration:underline; }
.awm{ display:none; }   /* award line inside the pane: phones only, where the index is hidden */

/* 04 earlier nodes: paper ground until the themes take over */
.s1b{ background:var(--bg); }

/* ---------- 02 · state history (Klein blue) ---------- */
.s2{ background:var(--blue); color:#fff; }
.s2 .rows{ margin-top:22px; }
.s2 .xrow{
  display:grid; grid-template-columns:200px 1fr auto; gap:16px; align-items:baseline;
  border-top:1px solid rgba(255,255,255,.28); padding:11px 0;
}
.s2 .rows .xrow:last-child{ border-bottom:1px solid rgba(255,255,255,.28); }
.s2 .d{ font-size:.75rem; opacity:.65; }
.s2 .r{ font-family:"Space Grotesk",Inter,sans-serif; font-size:1.15rem; font-weight:700; letter-spacing:-.01em; }
.s2 .r small{
  display:block; font-family:Inter,sans-serif; font-size:.8rem; font-weight:400;
  opacity:.72; margin-top:4px; letter-spacing:0; line-height:1.5;
}
.s2 .inkhl{
  background:var(--ink); color:#fff; padding:0 .14em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.s2 .w{
  font-family:"JetBrains Mono",Menlo,monospace;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:5px 10px;
  justify-self:end; align-self:center; text-align:right;
}
.s2 .subhead{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; opacity:.6; margin-top:32px; }
/* live blip on the current-state row: radar ping (solid dot, sonar rings) */
.s2 .xrow .d{ display:flex; align-items:center; gap:10px; }
.s2 .blip{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  position:relative; flex:none;
  background:#3DF51B;
  box-shadow:0 0 4px 1px rgba(70,255,60,.7);
}
.s2 .blip::before,
.s2 .blip::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid #3DF51B; opacity:0;
  animation:ping 2.2s cubic-bezier(.2,.6,.35,1) infinite;
}
.s2 .blip::after{ animation-delay:1.1s; }
@keyframes ping{
  0%{ transform:scale(1); opacity:.9; }
  80%, 100%{ transform:scale(3.4); opacity:0; }
}
.s2 .det{ list-style:none; margin-top:7px; }
.s2 .det li{
  position:relative; padding-left:14px; margin-top:3px;
  font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.78);
}
.s2 .det li::before{ content:"–"; position:absolute; left:0; opacity:.7; }
.s2 .det b{ color:#fff; font-weight:700; }
.rwrap{ min-width:0; }

/* ---------- 03 · certifications ---------- */
.s2b{ background:var(--bg); }
.certgrid{ margin-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cert{
  position:relative; background:#fff; border:1px solid var(--line);
  padding:20px 20px 18px; display:flex; flex-direction:column; align-items:flex-start;
}
a.cert{
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a.cert:hover{ transform:translateY(-3px); border-color:var(--blue); box-shadow:0 12px 28px -14px rgba(22,24,29,.25); }
.cert .cid{
  display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin-bottom:9px;
}
.cert .t{
  display:block; font-family:"Space Grotesk",Inter,sans-serif;
  font-size:1.02rem; font-weight:700; letter-spacing:-.01em; line-height:1.25;
  padding-right:34px;
}
.cert .issuer{
  display:inline-block; margin-top:auto; padding:4px 9px;
  background:var(--ink); color:#fff;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
}
.cert .t + .issuer{ margin-top:14px; }
.cert .vmark{
  position:absolute; top:14px; right:14px;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--blue); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:.72rem;
}
@media (max-width:1060px){ .certgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .certgrid{ grid-template-columns:1fr; } }

/* ---------- 04 · instruction set ---------- */
.s3{ background:#FFFFFF; }
.skills{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.skg{ background:#fff; border:1px solid var(--line); padding:16px 18px; }
.skg h3{
  font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:10px;
}
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); padding:3px 9px; color:var(--mut); white-space:nowrap;
}
.vol{ margin-top:30px; }
.vol .vrow{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border-top:1px solid var(--line); padding:12px 0; font-size:.88rem;
}
.vol .d{ font-size:.72rem; color:var(--faint); }
.vol .org{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }

/* ---------- 04 · contact (terminal sheet) ---------- */
.s4{ background:var(--mbg); color:var(--ph); }
.s4::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.22) 2px, rgba(0,0,0,.22) 4px);
}
/* no z-index lift: the scanlines overlay runs across the text,
   the same horizontal-lines effect as [ Gokul Rajan ] in terminal mode */
.s4 .body{ position:relative; }
.s4 .num{ color:var(--mmut); opacity:1; }
.s4 h2{
  font-family:Inter,sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:-.045em;
}
.s4 .log{ margin-top:26px; font-size:.82rem; line-height:2.1; letter-spacing:.02em; }
.s4 .log .ts{ color:var(--mdim); }
.s4 .log .hl2{ color:var(--mred); }
.s4 .prompt{ border-top:1px solid var(--mline); margin-top:30px; padding-top:20px; font-size:.95rem; }
.s4 .prompt .u{ color:var(--mmut); }
.s4 .prompt a{ color:var(--ph); text-decoration:none; }
.s4 .prompt a:hover{ color:var(--mgrn); }
.s4 .cursor{
  display:inline-block; width:9px; height:17px; background:var(--ph);
  vertical-align:middle; margin-left:5px; animation:blink 1.1s steps(1) infinite;
}
.s4 .links{ margin-top:24px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mmut); }
.s4 .links a{ color:var(--mmut); text-decoration:none; }
.s4 .prompt a{ color:var(--mgrn); }          /* mail: terminal green */
.s4 .links .lgh{ color:var(--ph); }          /* github: phosphor */
.s4 .links .lli{ color:#58A6FF; }            /* linkedin: ansi cyan */
.s4 .links .lbl{ color:#FFB454; }            /* blog: ansi amber */
.s4 .links a:hover{ color:var(--mgrn); }
.s4 .statusline{
  margin-top:44px; display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mdim);
}
.s4 .statusline .live{ color:var(--ph); }
.s4 .statusline .live::before{ content:"● "; color:var(--mgrn); }
.s4 .enterterm{
  background:none; border:none; cursor:pointer; padding:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--mmut);
}
.s4 .enterterm:hover{ color:var(--mgrn); }

/* ============================================================
   TERMINAL MODE - dark mode is its own layout (Systemmonitor)
   ============================================================ */
body.monitor{ background:var(--mbg); }
body.monitor .site{ display:none; }
#monitor{ display:none; }
body.monitor #monitor{ display:block; }

#monitor{
  min-height:100vh; color:var(--ph);
  font-family:"JetBrains Mono",Menlo,monospace;
  position:relative; padding:34px 0 60px;
}
#monitor::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.22) 2px, rgba(0,0,0,.22) 4px);
}
#monitor .mwrap{ max-width:1160px; margin:0 auto; padding:0 28px; }
#monitor .mhead{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mmut);
  border-bottom:1px solid var(--mline); padding-bottom:14px;
}
#monitor .mhead .warn{ color:var(--mred); }
#monitor .mhead button{
  background:none; border:none; color:var(--mmut); cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit; padding:0;
}
#monitor .mhead button:hover{ color:var(--mgrn); }
#monitor .mhead button.exit{ color:var(--mred); font-weight:700; }
#monitor .mhead button.exit:hover{ color:#FF7070; }
#monitor h1{
  font-family:Inter,sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem, 7vw, 5rem); letter-spacing:-.045em; line-height:.95;
  margin:34px 0 10px;
}
#monitor .msub{
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mmut); margin-bottom:30px;
}
#monitor .msub b{ color:var(--ph); font-weight:500; }
#monitor .tscroll{ overflow-x:auto; }
#monitor table{ width:100%; border-collapse:collapse; font-size:.8rem; min-width:560px; }
#monitor th{
  text-align:left; font-weight:400; color:var(--mdim); letter-spacing:.14em; text-transform:uppercase;
  font-size:.68rem; border-top:1px solid var(--mline); border-bottom:1px solid var(--mline); padding:9px 8px;
}
#monitor td{ border-bottom:1px solid var(--mrow); padding:10px 8px; letter-spacing:.04em; text-transform:uppercase; }
#monitor td:first-child{ color:var(--mmut); }
#monitor td a{ color:inherit; text-decoration:none; }
#monitor td a:hover{ color:var(--mgrn); }
#monitor .red{ color:var(--mred); }
#monitor .grn{ color:var(--mgrn); }
#monitor .sechead{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mmut); margin:36px 0 14px;
}
#monitor .sechead::before{ content:"// "; color:var(--mred); }
#monitor .log{ font-size:.8rem; line-height:2.1; letter-spacing:.02em; }
#monitor .log .ts{ color:var(--mdim); }
#monitor .log .hl{ color:var(--mred); }
#monitor .prompt{ border-top:1px solid var(--mline); margin-top:36px; padding-top:20px; font-size:.9rem; }
#monitor .prompt .u{ color:var(--mmut); }
#monitor .prompt a{ color:var(--ph); text-decoration:none; }
#monitor .prompt a:hover{ color:var(--mgrn); }
#monitor .cursor{
  display:inline-block; width:9px; height:17px; background:var(--ph);
  vertical-align:middle; margin-left:5px; animation:blink 1.1s steps(1) infinite;
}
#monitor .mlinks{
  margin-top:26px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mdim);
}
#monitor .mlinks a{ color:var(--mmut); text-decoration:none; }
#monitor .mlinks a:hover{ color:var(--mgrn); }
body.monitor :focus-visible{ outline-color:var(--mgrn); }
body.monitor ::selection{ background:var(--mred); color:#000; }

/* ============================================================
   NIGHT MODE - real Nürnberg sky behind the site (22:00-04:00 auto)
   Scoped entirely to body.night; day and terminal modes untouched.
   ============================================================ */
#nightsky{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:none; }
body.night{
  background:linear-gradient(180deg,#070B1A 0%,#0B1026 45%,#141B33 80%,#1B2440 100%);
}
body.night #nightsky{ display:block; }
body.monitor #nightsky{ display:none; }
body.night .site{ position:relative; z-index:1; }

/* hero sheet turns transparent so the sky shows through */
body.night .s0{ background:transparent; color:#EAEFFC; }
body.night .logo{ color:#EAEFFC; }
body.night .topbar nav a{ color:#8B96B4; }
body.night .topbar nav a:hover, body.night .topbar nav a.on{ color:#7ea0ff; }
body.night .toggle{ color:#8B96B4; }
body.night .moonbtn{ color:#7ea0ff; }
body.night .s0 h1{ color:#EAEFFC; text-shadow:0 2px 24px rgba(7,11,26,.9); }
body.night .s0 h1 .hl{ text-shadow:none; } /* stamps carry their own contrast */
body.night .s0 h1 .hl.sap{ background:#EAEFFC; color:#0B1026; }
body.night .s0 h1 .hl.ai{ background:#B9CCF5; color:#08237A; }
body.night .scrollhint{ color:#8B96B4; }
body.night .hero-graph svg{ filter:drop-shadow(0 2px 18px rgba(7,11,26,.8)); }

/* graph re-inks itself via the same attributes it was drawn with */
body.night .cgraph .edges{ stroke:#8B96B4; }
body.night .cgraph .arrows{ fill:#8B96B4; }
body.night .cgraph .elabels{ fill:#8B96B4; }
body.night .cgraph .node rect[fill="#fff"]{ fill:rgba(11,16,38,.85); stroke:#EAEFFC; }
body.night .cgraph .node text[fill="#16181D"]{ fill:#EAEFFC; }
body.night .cgraph .node text[fill="#5F6269"]{ fill:#8B96B4; }
body.night .cgraph .node rect[fill="#16181D"]{ fill:#EAEFFC; }
body.night .cgraph .node text[fill="#A9ACB2"]{ fill:#5F6269; }
body.night .cgraph .node:not(.accent) text[fill="#fff"]{ fill:#0B1026; }
body.night .cgraph .node.accent rect{ fill:#B9CCF5; }
body.night .cgraph .node.accent text{ fill:#08237A; }

/* inner sheets go deep navy (opaque: they still stack over each other) */
body.night .s1, body.night .s1b, body.night .s2b, body.night .s3{ background:#0D1330; color:#EAEFFC; }
body.night .skg, body.night .cert{
  background:#121A3A; border-color:#252E55;
}
body.night .cert .t{ color:#EAEFFC; }
body.night .chip, body.night .vol .vrow{ color:#8B96B4; }
body.night .cert .cid, body.night .skg h3{ color:#7ea0ff; }
body.night a.cert:hover{ border-color:#7ea0ff; box-shadow:0 12px 28px -14px rgba(0,0,0,.6); }
body.night .chip{ border-color:#2A3358; }
body.night .vol .vrow{ border-color:#252E55; }
body.night .vol .org, body.night .vol .d{ color:#5F6C94; }
/* project themes at night: keep the night ground, let only each project's accent through */
body.night .sheet[data-th], body.night .mpane[data-th]{ --th-bg:#0D1330; --th-surface:#131B3A; --th-ink:#EAEFFC; --th-mut:#8B96B4; --th-line:#252E55; --th-award:#FF6060; --th-stamp:#FF6060; --th-silver:#9AA4B5; }
body.night [data-th="MNV"]{ --th-acc:#8f8fff; --th-acct:#8f8fff; }
body.night [data-th="KLB"]{ --th-acct:#a79ff0; }
body.night [data-th="SIB"]{ --th-acct:#ff8a8a; }
body.night [data-th="SPC"]{ --th-acct:#3fb0ff; }
body.night [data-th="TCH"]{ --th-acct:#f08a84; }
body.night [data-th="ADS"]{ --th-acct:#7aa2ff; }
body.night [data-th="MMA"]{ --th-acct:#e59a5a; }
body.night .cert .issuer{ background:#EAEFFC; color:#0B1026; }
body.night .cert .vmark{ border-color:#7ea0ff; color:#7ea0ff; }
/* the phone graph screen at night: stars keep showing through */
body.night .smg{ background:transparent; color:#EAEFFC; }
body.night .smg .gcorner{ color:#2A3358; }
body.night .smg .glabel{ color:#8B96B4; }
body.night .smg .gfig{ color:#8B96B4; }
body.night .whoami{ color:#8B96B4; }
body.night .whoami b{ color:#EAEFFC; }
body.night .mcur{ background:#EAEFFC; }
body.night .mpeek{ color:#8B96B4; border-color:rgba(139,150,180,.3); }

/* state history joins the night palette: deep navy, ink elements invert */
body.night .s2{ background:#0D1330; }
body.night .s2 .xrow{ border-color:rgba(139,150,180,.3); }
body.night .s2 .rows .xrow:last-child{ border-bottom-color:rgba(139,150,180,.3); }
body.night .s2 .w{ background:#EAEFFC; color:#0B1026; }
body.night .s2 .inkhl{ background:#EAEFFC; color:#0B1026; }
/* the terminal contact sheet already reads as night; it stays as designed */

/* ---------- responsive ---------- */
@media (max-width:1060px){
  /* 921-1060: narrower index and compact type so both project sheets still fit */
  .md{ grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr); }
  .mtab{ padding:9px 10px; grid-template-columns:54px minmax(0,1fr); column-gap:8px; }
  .mtab .lt{ font-size:.9rem; }
  .mtab .aw{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mtext .t{ font-size:1.25rem; }
  .mtext p{ font-size:.82rem; }
  .skills{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px){
  /* ---- screen 1: type-only hero in the terminal's voice (C2) ---- */
  .s0 .hrow{ flex-direction:column; align-items:flex-start; justify-content:center; gap:0; padding-bottom:0; }
  .hero-copy{ width:100%; }
  .hero-graph{ display:none; }             /* the landscape graph yields to screen 2 */
  .whoami{
    display:block; font-size:.74rem; color:var(--mut);
    letter-spacing:.02em; margin-bottom:16px;
  }
  .whoami b{ color:var(--ink); font-weight:500; }
  .s0 h1{ font-size:clamp(1.7rem, 7.2vw, 2.1rem); line-height:1.22; }
  .wnight{ display:block; }   /* "night." starts its own line on phones */
  .mcur{
    display:inline-block; width:10px; height:.9em; background:var(--ink);
    vertical-align:-2px; margin-left:6px;
    animation:blink 1.1s steps(1) infinite;
  }
  .scrollhint{ position:static; transform:none; margin:20px auto 14px; }
  .scrollhint .edgeline line{ animation:none; }  /* the cursor is the hero's only blink */
  .mpeek{
    display:flex; justify-content:space-between;
    border-top:1px solid var(--line); padding:10px 0 16px;
    font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  }

    .smg .body{ position:relative; padding:20px 0 18px; }
  .gcorner{ position:absolute; font-size:.8rem; color:#C9C7C0; }
  .glabel{
    text-align:center; font-size:.62rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--faint);
  }
  .gwrap{ flex:1; display:flex; align-items:center; justify-content:center; padding:12px 0; }
  .gwrap svg{ width:min(320px, 84vw); max-height:100%; height:auto; display:block; }
  .gfig{
    text-align:center; font-size:.66rem; letter-spacing:.04em; color:var(--mut);
  }
}
@media (max-width:640px){
  .topbar{ display:flex; flex-wrap:wrap; gap:14px 20px; }
  .topbar nav{ gap:18px; }
  .s4 .statusline{ flex-direction:column; align-items:flex-start; gap:10px; }
  .skills{ grid-template-columns:1fr; }
  .s2 .xrow{ grid-template-columns:1fr; gap:4px; }
  .s2 .w{ text-align:left; }
  .vol .vrow{ flex-direction:column; gap:4px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
  #careerGraph.pre .node,
  #careerGraph.pre .elabels text,
  #careerGraph.pre .arrows path,
  #careerGraph.pre .edge.dashed{ opacity:1; transform:none; }
}

/* ============================================================
   MOBILE SECTIONS (user-picked set: 1D · 2E-1a · 3-duo · 4C · 5C)
   Appended last so these win the cascade at phone widths.
   ============================================================ */
.ghyr, .bizcard{ display:none; }

/* 5C business card base styles (only shown on phones) */
.bizcard{
  flex-direction:column; align-items:center; text-align:center; gap:9px;
  margin:26px auto 6px; padding:26px 20px; width:100%; max-width:320px;
  border:1.5px solid var(--ph); background:#141414;
}
.bizcard .bnm{ font-family:Inter,sans-serif; font-weight:900; font-size:1.7rem; letter-spacing:-.045em; text-transform:uppercase; line-height:.95; }
.bizcard .brl{ font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mmut); }
.bizcard a{ text-decoration:none; font-size:.78rem; letter-spacing:.03em; }
.bizcard .bmail{ color:var(--mgrn); margin-top:10px; }
.bizcard .brow{ display:flex; gap:18px; margin-top:2px; }
.bizcard .bgh{ color:var(--ph); }      /* github: phosphor */
.bizcard .bli{ color:#58A6FF; }        /* linkedin: ansi cyan */
.bizcard .bbl{ color:#FFB454; }        /* blog: ansi amber */

@media (max-width:920px){
  /* ---- 03 + 04 project sheets: no index; each project stacks as a panel in its own colours ---- */
  .s1[data-th]{ background:#FFFFFF; color:var(--ink); }
  .s1b[data-th]{ background:var(--bg); color:var(--ink); }
  .sheet[data-th] .num{ color:inherit; opacity:.55; }
  .sheet[data-th] h2{ color:var(--ink); }
  body.night .sheet[data-th] h2{ color:#EAEFFC; }
  .md{ display:block; }
  .mlist{ display:none; }
  .mpane, .mpane.on{ display:grid; gap:10px; margin-bottom:26px; padding:14px; background:var(--th-bg); color:var(--th-ink); animation:none; }
  body.night .mpane{ border:1px solid var(--th-line); }
  .mpane .shot{ height:auto; aspect-ratio:16/9; }
  .awm{ display:flex; align-items:center; gap:8px; margin:-2px 0 10px; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--th-mut); }
  .awm .mstamp{ margin-left:0; }
  .mtext .meta{ flex-wrap:wrap; row-gap:8px; }
  .mtext .meta > span:first-child{ flex-basis:100%; }   /* stack on its own line; links below */

  /* ---- 02 state history: ghost years (2E-1a) ---- */
  .s2 .xrow{ position:relative; overflow:hidden; }
  .ghyr{
    display:block; position:absolute; right:-4px; top:12px;
    font-family:"Space Grotesk",Inter,sans-serif; font-weight:800;
    font-size:52px; letter-spacing:-.04em; line-height:1;
    color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.34);
    pointer-events:none;
  }

  /* ---- 03 certifications: duo grid ---- */
  .certgrid{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .cert{ padding:13px 12px; }
  .cert .t{ font-size:.86rem; padding-right:24px; }
  .cert .cid{ font-size:.62rem; margin-bottom:7px; }
  .cert .issuer{ font-size:.56rem; padding:3px 7px; }
  .cert .vmark{ width:20px; height:20px; top:10px; right:10px; font-size:.58rem; }

  /* ---- 04 instruction set: accordion groups (4C) ---- */
  .skills{ gap:0; margin-top:20px; }
  .skg{ background:transparent; border:none; border-top:1px solid var(--line); padding:0; }
  .skills .skg:last-child{ border-bottom:1px solid var(--line); }
  .skg h3{
    display:flex; justify-content:space-between; align-items:center;
    margin:0; padding:14px 2px; cursor:pointer; font-size:.72rem;
  }
  .skg h3::after{ content:"+"; font-family:"JetBrains Mono",Menlo,monospace; font-size:.95rem; color:var(--mut); }
  .skg.open h3::after{ content:"–"; }
  .skg .chips{ display:none; padding:0 2px 15px; }
  .skg.open .chips{ display:flex; }
  body.night .skg{ background:transparent; border-color:rgba(139,150,180,.3); }
  body.night .skg h3::after{ color:#8B96B4; }

  /* ---- 05 contact: business card (5C) ---- */
  .s4 h2, .s4 .prompt, .s4 .links{ display:none; }
  .bizcard{ display:flex; }
}

/* mobile section landing is velocity-aware, driven by ScrollTrigger snap
   in redesign.js (CSS snap cannot feel flick strength) */

/* mobile header (centered nav, icon-only modes) + page reorder */
@media (max-width:920px){
  .logo{ display:none; }
  .topbar{ display:flex; justify-content:center; align-items:center; position:relative; padding-top:26px; }
  .topbar nav{ gap:22px; }
  .topbar .modes{ position:absolute; right:0; top:26px; gap:14px; }
  .toggle{ display:none; }          /* the long text yields to the icon */
  .termbtn{ display:flex; }
  .nn{ display:none; }              /* section digits hide: mobile order differs */

  /* DOM order already reads hero, history, skills, projects, certs, contact */
  .site{ display:flex; flex-direction:column; }
}