/* ============================================================
   THE GLASS BOX — shared design system for ai-ronaghi.de (karo)
   Blueprint ink · dual-engine cyan + amber · self-monitored
   Ported from the live site (ai-ronaghi.de) as the new source of
   truth for palette, type and components. Served as one shared
   stylesheet for every page in this repo.
   ============================================================ */

:root{
  /* Palette — Color Hunt "1B3C53 / 234C6A / 456882 / D2C1B6" */
  --ink:        #16303F;   /* blueprint void */
  --ink-2:      #1B3C53;   /* base background */
  --panel:      #1E4258;   /* glass panel base */
  --panel-2:    #234C6A;   /* raised glass */
  --line:       rgba(210,193,182,0.10);
  --line-bright:rgba(210,193,182,0.22);

  --cyan:       #D2C1B6;   /* Engine 01 · Retrieval */
  --cyan-dim:   #A69686;
  --amber:      #456882;   /* Engine 02 · Metacognition */
  --amber-dim:  #35505F;
  --alert:      #FF5468;   /* failure / black-box (used sparingly) */

  --paper:      #F5F1EC;
  --paper-2:    #B7C3CC;
  --muted:      #7C8FA0;
  --muted-2:    #4D6478;

  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(210,193,182,0.07), transparent 60%),
    radial-gradient(1100px 800px at 5% 12%, rgba(69,104,130,0.06), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 22%, var(--ink-2) 100%);
  color:var(--paper);
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* faint engineering grid wash */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  opacity:.6;
}
.wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(210,193,182,0.28); color:#fff; }

/* ---------- Type ---------- */
.display{ font-family:"Archivo Expanded","Archivo",sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:1.02; }
.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; }
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.55; }
.eye-cyan{ color:var(--cyan); } .eye-amber{ color:var(--amber); } .eye-alert{ color:var(--alert); }

h2.sec-title{ font-family:"Archivo Expanded",sans-serif; font-weight:800; font-size:clamp(28px,4.2vw,46px); margin:.5rem 0 0; letter-spacing:-0.015em; line-height:1.05; }
.lede{ color:var(--paper-2); font-size:clamp(16px,1.6vw,19px); max-width:64ch; }

/* ---------- Header / nav ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(22,48,63,0.82), rgba(22,48,63,0.45));
  border-bottom:1px solid var(--line);
}
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:13px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.12em; color:var(--paper-2); }
.brand b{ color:var(--paper); font-weight:600; letter-spacing:.16em; }
.brand .dot{ width:9px; height:9px; border-radius:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); transform:rotate(45deg); }
.byline{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--muted);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.byline::before{ content:""; width:18px; height:1px; background:var(--line-bright); }
.byline b{ color:var(--paper-2); font-weight:600; }
@media(max-width:560px){ .byline::before{ display:none; } }
nav.links{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
nav.links a{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--muted);
  padding:7px 11px; border-radius:7px; transition:color .2s, background .2s;
}
nav.links a:hover, nav.links a:focus-visible{ color:var(--paper); background:rgba(255,255,255,0.05); }
nav.links a.active{ color:var(--cyan); background:rgba(210,193,182,0.08); }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }
@media(max-width:820px){ nav.links{ display:none; } }

/* Language switcher — German | US flag. Original to this repo, not ported: the
   live site is English-only. Borrows nav.links' cyan-active treatment so it
   reads as another nav control, not a bolted-on widget.
   Sits after nav.links in .nav-in; below 820px the nav wraps to its own row
   (order:3, width:100%) and this stays up top beside the brand, where
   .nav-in's space-between pins it right without an extra rule.
   The labels are flags, not text (changed 2026-08-07) — each anchor carries a
   title + aria-label naming the language, since the SVG is aria-hidden. The
   positive z-index keeps the control stacked above header.nav's own
   background/backdrop layers so the flags can never be painted over. */
.lang-switch{
  position:relative; z-index:2;
  display:flex; align-items:center; flex:0 0 auto;
  border:1px solid var(--line-bright); border-radius:8px; overflow:hidden;
}
.lang-switch a{
  position:relative; z-index:2;
  display:flex; align-items:center;
  padding:6px 9px; transition:background .2s;
}
.lang-switch a + a{ border-left:1px solid var(--line); }
.lang-switch a:hover, .lang-switch a:focus-visible{ background:rgba(255,255,255,0.05); }
.lang-switch a.active{ background:rgba(210,193,182,0.10); }
/* Inactive flags sit back; the current language reads at full colour. */
.lang-switch .flag{
  display:block; width:22px; height:14px; border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,0.35);
  opacity:.55; filter:grayscale(.6); transition:opacity .2s, filter .2s;
}
.lang-switch a:hover .flag, .lang-switch a:focus-visible .flag,
.lang-switch a.active .flag{ opacity:1; filter:none; }

/* persistent site controls — stay visible on mobile */
.nav-site{ display:flex; align-items:center; gap:10px; }
.home-link{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; color:var(--paper-2);
  padding:7px 12px; border-radius:7px; border:1px solid var(--line-bright);
  background:rgba(210,193,182,0.06); white-space:nowrap;
  transition:color .2s, background .2s, border-color .2s;
}
.home-link:hover, .home-link:focus-visible{ color:var(--ink); background:var(--cyan); border-color:var(--cyan); }
.lang-sw{ display:flex; align-items:center; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; color:var(--muted); }
.lang-sw a{ padding:4px 5px; border-radius:5px; color:var(--muted); transition:color .2s; }
.lang-sw a.active{ color:var(--cyan); }
.lang-sw a:hover, .lang-sw a:focus-visible{ color:var(--paper); }
.lang-sw .sep{ opacity:.5; }
@media(max-width:700px){ .byline{ display:none; } }

/* ---------- Glass panel primitive ---------- */
.glass{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 40%, rgba(22,48,63,0.2));
  border:1px solid var(--line-bright);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 50px -30px rgba(0,0,0,0.9);
}
.glass::before, .glass::after{ content:""; position:absolute; width:14px; height:14px; opacity:.7; pointer-events:none; }
.glass::before{ top:9px; left:9px; border-top:1.5px solid var(--line-bright); border-left:1.5px solid var(--line-bright); }
.glass::after{ bottom:9px; right:9px; border-bottom:1.5px solid var(--line-bright); border-right:1.5px solid var(--line-bright); }
.tint-cyan{ border-color:rgba(210,193,182,0.32); box-shadow:inset 0 1px 0 rgba(210,193,182,0.18), 0 0 0 1px rgba(210,193,182,0.04), 0 30px 60px -34px rgba(210,193,182,0.25); }
.tint-amber{ border-color:rgba(69,104,130,0.34); box-shadow:inset 0 1px 0 rgba(69,104,130,0.20), 0 0 0 1px rgba(69,104,130,0.05), 0 30px 60px -34px rgba(69,104,130,0.25); }
.tint-alert{ border-color:rgba(255,84,104,0.32); box-shadow:inset 0 1px 0 rgba(255,84,104,0.16), 0 30px 60px -34px rgba(255,84,104,0.22); }

/* ---------- Section spacing (single source of truth) ---------- */
.section{ padding:clamp(64px,9vh,118px) 0; position:relative; }
.section .head{ margin-bottom:42px; }
.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--line-bright), transparent); }

/* ============ HERO ============ */
.hero{ padding:clamp(46px,7vh,84px) 0 clamp(56px,8vh,96px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.hero-grid > *{ min-width:0; }
@media(max-width:920px){ .hero-grid{ grid-template-columns:1fr; gap:30px; } }
.hero h1{
  font-family:"Archivo Expanded",sans-serif; font-weight:900;
  font-size:clamp(36px,6.3vw,76px); line-height:0.98; letter-spacing:-0.02em; margin:18px 0 0;
}
.hero h1 .ghost{
  display:block; color:transparent;
  background:linear-gradient(180deg,#fff, #E7D9CA 55%, var(--cyan));
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 0 60px rgba(210,193,182,0.25);
}
.hero h1 small{ display:block; font-size:clamp(15px,2vw,21px); font-weight:600; letter-spacing:.02em; color:var(--paper-2); font-family:"Inter",sans-serif; margin-top:18px; max-width:30ch; line-height:1.4; }
.stack-row{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em;
  padding:8px 13px; border-radius:8px; border:1px solid var(--line-bright);
  background:rgba(255,255,255,0.03); color:var(--paper-2);
}
.chip b{ color:var(--cyan); font-weight:600; }
.stack-tight{ gap:8px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.stack-tight .chip{ font-size:11px; letter-spacing:.05em; padding:7px 10px; white-space:nowrap; flex:none; }

/* ============ generic grids ============ */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:860px){ .two,.three{ grid-template-columns:1fr; } }
.pad{ padding:26px 26px 28px; }
.card-k{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.card-h{ font-family:"Archivo Expanded",sans-serif; font-weight:700; font-size:21px; margin:10px 0 12px; letter-spacing:-0.01em; }
ul.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
ul.ticks li{ position:relative; padding-left:26px; color:var(--paper-2); font-size:15.5px; }
ul.ticks li::before{ content:""; position:absolute; left:2px; top:9px; width:9px; height:9px; transform:rotate(45deg); background:var(--cyan); box-shadow:0 0 9px var(--cyan); }
ul.ticks.amber li::before{ background:var(--amber); box-shadow:0 0 9px var(--amber); }
ul.ticks.alert li::before{ background:var(--alert); box-shadow:0 0 9px var(--alert); }

footer.ft{ border-top:1px solid var(--line); padding:34px 0 56px; color:var(--muted); }
.ft-in{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; }
.ft-in a:hover{ color:var(--paper); }

/* ---------- reveal (dormant: no JS in this repo toggles .in) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   SITE COMPONENTS — reused across the six content pages,
   built only from the tokens + primitives above.
   ============================================================ */

/* Typed role line on the home hero (static text — no JS typewriter in this repo) */
.typed-line{ margin-top:20px; font-family:"IBM Plex Mono",monospace; font-size:clamp(14px,1.6vw,16px); letter-spacing:.04em; color:var(--paper-2); }
.typed-line .prompt{ color:var(--cyan); }
.typed-cursor{ display:inline-block; width:9px; height:1.05em; vertical-align:-2px; margin-left:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:caret 1s step-end infinite; }
@keyframes caret{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .typed-cursor{ animation:none; } }

/* Circular portrait — home + about */
.portrait{ position:relative; width:100%; max-width:342px; aspect-ratio:1/1; margin-inline:auto; }
@media(min-width:921px){ .portrait{ transform:translate(-20px,-28px); } }
.portrait img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center top; display:block; border:1px solid var(--line-bright); }
.portrait::before{
  content:""; position:absolute; inset:-14px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, var(--cyan), transparent 55%, transparent 78%, var(--amber));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 100%);
          mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 100%);
  opacity:.8; animation:spin 22s linear infinite;
}
.portrait::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 50px rgba(210,193,182,0.18), inset 0 0 40px rgba(210,193,182,0.10); pointer-events:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .portrait::before{ animation:none; } }

/* Stats band (home + about facts) */
.stats-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:860px){ .stats-band{ grid-template-columns:1fr; } }
.stat-cell{ padding:28px 26px; }
.stat-num{ font-family:"Archivo Expanded",sans-serif; font-weight:900; font-size:clamp(38px,5vw,56px); line-height:1; color:var(--cyan); text-shadow:0 0 34px rgba(210,193,182,0.3); }
.stat-num sup{ font-size:.5em; color:var(--amber); }
.stat-num .count{ font-variant-numeric:tabular-nums; }
.stat-label{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:12px; }

/* Directory / link cards (home explore · teaching · projects) */
.dir-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(max-width:860px){ .dir-grid{ grid-template-columns:1fr; } }
.link-card{ display:block; padding:26px 26px 60px; position:relative; color:inherit; transition:transform .3s var(--ease), border-color .3s; overflow:hidden; }
.link-card .lc-wash{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(210,193,182,0.12), transparent 60%); }
.link-card:hover{ transform:translateY(-5px); border-color:rgba(210,193,182,0.5); }
.link-card:hover .lc-wash{ opacity:1; }
.lc-ico{ font-size:30px; line-height:1; display:block; margin-bottom:16px; }
.lc-k{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.lc-h{ font-family:"Archivo Expanded",sans-serif; font-weight:700; font-size:21px; margin:10px 0 10px; letter-spacing:-0.01em; }
.lc-p{ margin:0; color:var(--paper-2); font-size:14.5px; line-height:1.65; }
.lc-tags{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; color:var(--muted); margin-top:14px; }
.lc-arrow{ position:absolute; left:26px; bottom:24px; color:var(--cyan); font-family:"IBM Plex Mono",monospace; transition:transform .3s; }
.link-card:hover .lc-arrow{ transform:translateX(8px); }

/* About prose */
.prose{ padding:34px 36px; }
.prose p{ margin:0 0 18px; color:var(--paper-2); }
.prose p:last-child{ margin-bottom:0; }
.prose .lead::first-letter{ float:left; font-family:"Archivo Expanded",sans-serif; font-weight:900; font-size:62px; line-height:0.8; color:var(--cyan); padding:6px 14px 0 0; text-shadow:0 0 30px rgba(210,193,182,0.3); }
.pullquote{ padding:30px 32px; }
.pullquote blockquote{ margin:0; font-family:"Archivo Expanded",sans-serif; font-weight:700; font-size:clamp(19px,2.2vw,24px); line-height:1.3; color:var(--paper); }
.pullquote cite{ display:block; font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-top:16px; }
.about-grid{ display:grid; grid-template-columns:1.4fr 0.9fr; gap:36px; align-items:start; }
@media(max-width:920px){ .about-grid{ grid-template-columns:1fr; gap:28px; } }
.about-aside{ display:grid; gap:24px; position:sticky; top:90px; }
@media(max-width:920px){ .about-aside{ position:static; } }

/* Expertise ledger */
.ledger{ display:grid; gap:0; border-top:1px solid var(--line); }
.ledger-row{
  display:grid; grid-template-columns:54px 40px 230px 1fr auto; gap:24px; align-items:center;
  padding:22px 12px; border-bottom:1px solid var(--line); position:relative; transition:background .3s;
}
.ledger-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); transform:scaleY(0); transform-origin:top; transition:transform .35s; }
.ledger-row:hover{ background:rgba(210,193,182,0.04); }
.ledger-row:hover::before{ transform:scaleY(1); }
.lr-idx{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em; color:var(--muted); }
.lr-ico{ font-size:22px; }
.lr-name{ font-family:"Archivo Expanded",sans-serif; font-weight:700; font-size:19px; color:var(--paper); }
.lr-desc{ font-size:14.5px; color:var(--paper-2); line-height:1.6; }
.lr-meta{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.skill-dot{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.skill-dot::before{ content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.skill-tag{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); background:rgba(69,104,130,0.08); border:1px solid rgba(69,104,130,0.3); padding:3px 10px; border-radius:6px; white-space:nowrap; }
@media(max-width:1040px){ .ledger-row{ grid-template-columns:40px 1fr auto; } .lr-idx, .lr-desc{ display:none; } }
@media(max-width:640px){
  .ledger-row{ grid-template-columns:32px 1fr; column-gap:16px; row-gap:12px; }
  .lr-meta{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; }
  .skill-dot, .skill-tag{ white-space:normal; }
}

/* Contact panel */
.contact-wrap{ display:grid; place-items:center; padding:clamp(60px,10vh,120px) 0; }
.contact-card{ width:100%; max-width:620px; padding:46px 44px; }
.contact-card h1{ font-family:"Archivo Expanded",sans-serif; font-weight:900; font-size:clamp(32px,5vw,52px); line-height:1.04; letter-spacing:-0.015em; margin:14px 0 0; }
.contact-card .sub{ color:var(--paper-2); margin:22px 0 32px; max-width:46ch; }
.contact-rows{ display:grid; gap:16px; border-top:1px solid var(--line); padding-top:30px; }
.contact-row{ display:flex; align-items:center; gap:16px; }
.contact-row .ic{ width:42px; height:42px; flex:none; border-radius:9px; display:grid; place-items:center; border:1px solid var(--line-bright); background:rgba(210,193,182,0.06); color:var(--cyan); }
.contact-row .tx{ font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--paper); }
.contact-row .tx small{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.contact-row .tx a{ color:var(--cyan); }
.contact-row .tx a:hover{ text-decoration:underline; }

/* Page header block for inner pages */
.page-head{ padding-top:clamp(46px,7vh,80px); }

/* Primary site nav stays usable on small screens (base nav.links hides <820px) */
@media(max-width:820px){
  .nav-in:has(.links.site){ flex-wrap:wrap; }
  nav.links.site{ display:flex; order:3; width:100%; margin-left:0; justify-content:flex-start; gap:4px 6px; }
  nav.links.site a{ padding:6px 9px; font-size:11px; letter-spacing:.06em; }
  /* The nav takes its own row here, so .nav-in's space-between no longer pins
     the switcher right — and once the brand alone fills the top row (~≤430px)
     the switcher wraps onto a row of its own, where it would otherwise sit
     stranded on the left. An auto margin keeps it right-aligned in both cases. */
  .lang-switch{ margin-left:auto; }
}

/* ============================================================
   MY RESEARCHES — under-construction page (pages/researches.html)
   Reads as a technical drawing that has been drafted but not yet
   manufactured: the headline draws itself stroke-first onto the
   blueprint grid, a mechanical roll cycles the subject areas, and
   a real drawing title block records the sheet's status.

   CSS-only — no JS module backs this page. Every animated property
   is DECLARED at its finished value and rewound inside the keyframes,
   because the global prefers-reduced-motion rule above kills all
   animation with !important; motion-off must therefore land on a
   complete, readable page rather than an invisible one.
   ============================================================ */
:root{ --uc-roll-h: 2.6rem; }

/* --- Signature: the headline drafts itself --- */
.uc-draw{ display:block; width:100%; max-width:820px; height:auto; margin:26px 0 0; overflow:visible; }
/* font-size is picked so "CONSTRUCTION" fills the measure at its natural
   width — textLength then pins the exact figure without stretching the
   tracking, so the two lines set as a solid left-aligned slab. */
.uc-draw text{
  font-family:"Archivo Expanded","Archivo",sans-serif; font-weight:900; font-size:122px;
  fill:var(--paper); fill-opacity:1;
  stroke:var(--cyan); stroke-width:1.4; stroke-linejoin:round;
  /* A dash pattern on SVG text restarts on every glyph contour, so all the
     letters trace in parallel rather than left to right. The seed therefore
     only needs to clear the LONGEST single contour (~400 units at this size);
     measured in-browser — much larger and the tail of the draw sits idle. */
  --uc-dash:560; stroke-dasharray:560; stroke-dashoffset:0;
}
/* German headline ("SEITE / IN BEARBEITUNG"): the longer line 2 fills the same
   972-unit measure at 113px rather than 122px (k≈0.926). Glyph contours scale
   linearly with font-size, so --uc-dash scales by the same k. The page's
   viewBox height and both baselines are scaled by k too (see researches.html).
   The wording was picked for this: "SEITE / IM AUFBAU" is the more literal
   translation but only 9 characters, which would need 174px to fill the measure
   — a 43% jump in type size that made the headline lurch when switching
   languages. If the copy ever changes, re-measure with getComputedTextLength()
   and re-derive all of these; don't just bump textLength, which tracks the
   letters apart instead of resizing them. */
.uc-draw.uc-de text{ font-size:113px; --uc-dash:520; stroke-dasharray:520; }
.uc-l1{ animation:ucDraw 1.5s var(--ease) both, ucFill .8s var(--ease) 1.25s both; }
.uc-l2{ animation:ucDraw 1.5s var(--ease) .35s both, ucFill .8s var(--ease) 1.65s both; }
@keyframes ucDraw{ from{ stroke-dashoffset:var(--uc-dash); } to{ stroke-dashoffset:0; } }
@keyframes ucFill{ from{ fill-opacity:0; } to{ fill-opacity:1; } }

.uc-lede{ color:var(--paper-2); font-size:clamp(16px,1.6vw,19px); max-width:52ch; margin:30px 0 0; }

/* --- Subject roll: a mechanical counter, not a second typewriter --- */
.uc-roll{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:36px; }
.uc-roll-label{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); flex:none;
}
.uc-roll-win{ display:block; height:var(--uc-roll-h); overflow:hidden; border-left:2px solid var(--amber); padding-left:16px; min-width:0; }
.uc-roll-list{ display:block; transform:translateY(0); animation:ucRoll 15s var(--ease) infinite; }
.uc-roll-list > span{
  display:block; height:var(--uc-roll-h); line-height:var(--uc-roll-h); white-space:nowrap;
  font-family:"Archivo Expanded",sans-serif; font-weight:700; font-size:clamp(15px,2vw,20px);
  letter-spacing:-0.01em; color:var(--paper);
}
@keyframes ucRoll{
    0%,14%{ transform:translateY(0); }
   20%,34%{ transform:translateY(calc(var(--uc-roll-h) * -1)); }
   40%,54%{ transform:translateY(calc(var(--uc-roll-h) * -2)); }
   60%,74%{ transform:translateY(calc(var(--uc-roll-h) * -3)); }
   80%,94%{ transform:translateY(calc(var(--uc-roll-h) * -4)); }
      100%{ transform:translateY(calc(var(--uc-roll-h) * -5)); }
}

.uc-cta{ margin-top:38px; display:flex; gap:12px; flex-wrap:wrap; }

/* --- Drawing title block --- */
.uc-block{ margin-top:clamp(46px,7vh,80px); display:grid; grid-template-columns:repeat(5,1fr); overflow:hidden; }
@media(max-width:900px){ .uc-block{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .uc-block{ grid-template-columns:1fr; } }
/* Separators as box-shadows rather than borders: the parent's
   overflow:hidden clips the outer-edge ones, so the same rule
   works at every column count without double lines. */
.uc-field{ padding:20px 22px; display:grid; gap:7px; box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line); }
.uc-field span{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.uc-field b{
  font-family:"IBM Plex Mono",monospace; font-size:13.5px; font-weight:500;
  letter-spacing:.04em; color:var(--paper);
}
.uc-field b.uc-status{ display:flex; align-items:center; gap:9px; color:var(--amber); }
.uc-field b.uc-status::before{
  content:""; flex:none; width:7px; height:7px; transform:rotate(45deg);
  background:var(--amber); box-shadow:0 0 9px var(--amber);
}

/* ============================================================
   KARO CHAT WIDGET — floating assistant, present on every page
   (markup injected by js/karo.js). Deliberately breaks from the
   cyan/amber system into dark red/gold so it reads as a distinct,
   attention-grabbing control rather than another site section.
   ============================================================ */
:root{
  --karo-red:       #7A1B2E;
  --karo-gold:      #A67C1E;
  --karo-hint-bg:   #F2C230;
  --karo-hint-text: #241505;
}

.karo-widget{ position:fixed; right:22px; bottom:22px; z-index:400; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }

.karo-fab{
  width:60px; height:60px; border-radius:50%; border:1px solid rgba(255,255,255,0.18);
  background:radial-gradient(circle at 32% 28%, var(--karo-gold), var(--karo-red) 72%);
  box-shadow:0 14px 34px -12px rgba(122,27,46,0.65), inset 0 0 0 1px rgba(255,255,255,0.06);
  cursor:pointer; display:grid; place-items:center; padding:0;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.karo-fab:hover, .karo-fab:focus-visible{ transform:translateY(-3px); box-shadow:0 18px 40px -12px rgba(122,27,46,0.75), inset 0 0 0 1px rgba(255,255,255,0.08); }
.karo-fab-mark{ font-family:"Archivo Expanded",sans-serif; font-weight:900; font-size:22px; color:#FFF3DE; letter-spacing:-0.02em; text-shadow:0 1px 3px rgba(0,0,0,0.35); }

.karo-fab.is-pulsing{ animation:karoPulse 1.8s var(--ease) infinite; }
@keyframes karoPulse{
  0%{ box-shadow:0 14px 34px -12px rgba(122,27,46,0.65), 0 0 0 0 rgba(242,194,48,0.55); }
  70%{ box-shadow:0 14px 34px -12px rgba(122,27,46,0.65), 0 0 0 16px rgba(242,194,48,0); }
  100%{ box-shadow:0 14px 34px -12px rgba(122,27,46,0.65), 0 0 0 0 rgba(242,194,48,0); }
}

/* Hint bubble — solid yellow so it reads as a call-out, not a glass panel */
.karo-hint{
  max-width:220px; padding:12px 34px 12px 14px; border-radius:12px;
  background:var(--karo-hint-bg); color:var(--karo-hint-text);
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.02em; line-height:1.45;
  box-shadow:0 16px 34px -14px rgba(0,0,0,0.55);
  position:relative;
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.karo-hint.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.karo-hint p{ margin:0; font-weight:600; }
.karo-hint::after{
  content:""; position:absolute; right:22px; bottom:-6px; width:12px; height:12px;
  background:var(--karo-hint-bg); transform:rotate(45deg); border-radius:2px;
}
.karo-hint-close{
  position:absolute; top:6px; right:8px; width:20px; height:20px; border:0; border-radius:50%;
  background:rgba(36,21,5,0.12); color:var(--karo-hint-text); font-size:14px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.karo-hint-close:hover{ background:rgba(36,21,5,0.22); }

/* Panel — reuses .glass for its border/corner-marks, but overrides the
   background to near-opaque: .glass's default translucency is tuned for
   sitting over the page's flat gradient backdrop, and reads poorly here
   since the widget can float over bright content (e.g. the hero portrait). */
.karo-panel{
  position:fixed; right:22px; bottom:94px; width:min(360px, calc(100vw - 44px));
  height:min(520px, calc(100vh - 140px));
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(165deg, rgba(30,66,88,0.97), rgba(22,48,63,0.98));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.karo-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }

.karo-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); flex:none; }
.karo-panel-title{ font-family:"Archivo Expanded",sans-serif; font-weight:800; font-size:16px; color:var(--paper); }
.karo-panel-sub{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--muted); margin-top:2px; }
.karo-panel-close{ border:0; background:transparent; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:4px 6px; border-radius:6px; }
.karo-panel-close:hover{ color:var(--paper); background:rgba(255,255,255,0.06); }

.karo-messages{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.karo-msg{ display:flex; }
.karo-msg-user{ justify-content:flex-end; }
.karo-msg-model{ justify-content:flex-start; }
.karo-bubble{
  max-width:82%; padding:10px 13px; border-radius:12px; font-size:14px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
}
.karo-msg-user .karo-bubble{ background:linear-gradient(135deg, var(--karo-gold), var(--karo-red)); color:#FFF6E7; border-bottom-right-radius:4px; }
.karo-msg-model .karo-bubble{ background:rgba(255,255,255,0.06); border:1px solid var(--line-bright); color:var(--paper-2); border-bottom-left-radius:4px; }

.karo-typing{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.karo-typing span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:karoTyping 1.1s ease-in-out infinite; }
.karo-typing span:nth-child(2){ animation-delay:.15s; }
.karo-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes karoTyping{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.karo-input-row{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--line); flex:none; }
.karo-input{
  flex:1; resize:none; max-height:120px; min-height:20px;
  background:rgba(255,255,255,0.04); border:1px solid var(--line-bright); border-radius:10px;
  color:var(--paper); font-family:"Inter",sans-serif; font-size:14px; line-height:1.4;
  padding:10px 12px;
}
.karo-input:focus-visible{ outline:2px solid var(--karo-gold); outline-offset:1px; }
.karo-input::placeholder{ color:var(--muted); }
.karo-send{
  flex:none; width:38px; height:38px; border-radius:10px; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--karo-gold), var(--karo-red)); color:#FFF6E7; font-size:15px;
  display:grid; place-items:center; transition:opacity .2s, transform .2s;
}
.karo-send:hover{ transform:translateY(-1px); }
.karo-send:disabled{ opacity:.5; cursor:default; transform:none; }

@media(max-width:480px){
  .karo-widget{ right:14px; bottom:14px; }
  .karo-panel{ right:14px; left:14px; width:auto; bottom:88px; }
}