/* Self-hosted fonts (latin) — replaces Google Fonts so the page is first-party / CSP-clean */
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/oswald-600.woff2) format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/oswald-700.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-mono-700.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-600.woff2) format('woff2');}

:root{
  --board-bg:#100e0b;
  --board-bg-2:#18140f;
  --board-slot:#1d1811;
  --amber:#ffb400;
  --amber-dim:#8a6a1f;
  --paper:#ece7da;
  --paper-dim:#a49c88;
  --red:#e2001a;
  --green:#3fae72;
  --line:#392f20;
  --line-soft:#241f16;

  --f-display:'Oswald',sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
  --f-body:'IBM Plex Sans',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important;}
}

body{
  font-family:var(--f-body);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% -10%, #23200f 0%, transparent 55%),
    var(--board-bg);
  color:var(--paper);
  padding:56px 40px 80px;
}

.container{max-width:1320px;margin:auto;position:relative;z-index:1;}

/* ---------- AMBIENT BACKGROUND ---------- */
/* faint German words + code tokens drift upward behind everything */

.bg-fx{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.bg-fx span{
  position:absolute;
  bottom:-12vh;
  display:block;
  opacity:0;
  color:var(--amber);
  animation:drift linear infinite;
}

.bg-fx svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px currentColor);
}

.bg-fx .t-de{ color:var(--amber); }
.bg-fx .t-dev{ color:#b79bff; }
.bg-fx .t-life{ color:#7fd6a4; }
.bg-fx .t-work{ color:#7fb2ff; }

/* the graphic floats up while gently spinning and pulsing in opacity */
@keyframes drift{
  0%{   transform:translateY(0) rotate(0deg) scale(.9); opacity:0; }
  15%{  opacity:.16; }
  50%{  transform:translateY(-60vh) rotate(calc(var(--spin,20deg) * .5)) scale(1.05); }
  85%{  opacity:.16; }
  100%{ transform:translateY(-122vh) rotate(var(--spin,20deg)) scale(.9); opacity:0; }
}

/* ---------- HEADER ---------- */

header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  border-bottom:3px solid var(--amber);
  padding-bottom:22px;
  margin-bottom:34px;
  flex-wrap:wrap;
}

.station-label{
  font-family:var(--f-mono);
  letter-spacing:.35em;
  font-size:12px;
  color:var(--amber-dim);
  text-transform:uppercase;
  margin-bottom:10px;
}

h1{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:.03em;
  font-size:44px;
  text-transform:uppercase;
  color:var(--paper);
}

h1 .accent{color:var(--amber);}

.now-serving{
  font-family:var(--f-mono);
  text-align:right;
  min-width:260px;
  max-width:360px;
}

.now-serving .tag{
  font-size:11px;
  letter-spacing:.25em;
  color:var(--paper-dim);
  text-transform:uppercase;
  margin-bottom:8px;
}

.flap-title{
  font-family:var(--f-display);
  font-size:18px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.03em;
  color:var(--amber);
  text-transform:uppercase;
  text-wrap:balance;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:8px 0;
  animation:flap-in .6s steps(6) both;
  animation-delay:.15s;
}

@keyframes flap-in{
  0%{ opacity:0; transform:translateY(-100%) scaleY(.4); filter:blur(1px); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) scaleY(1); filter:blur(0); }
}

/* ---------- STAT TILES ---------- */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:var(--line);
  border:2px solid var(--line);
  margin-bottom:44px;
}

.stat{
  background:var(--board-slot);
  padding:22px 24px;
  position:relative;
}

.stat .code{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--paper-dim);
  text-transform:uppercase;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}

.stat .code .icon{
  width:15px;
  height:15px;
  color:var(--amber);
}

.stat h2{
  font-family:var(--f-mono);
  font-weight:700;
  font-size:40px;
  color:var(--amber);
  letter-spacing:.02em;
}

.stat h2 sup{
  font-size:16px;
  font-weight:500;
  color:var(--paper-dim);
  margin-left:3px;
}

.stat .bar{
  height:3px;
  background:var(--line-soft);
  margin-top:16px;
}
.stat .bar span{display:block;height:100%;background:var(--amber);}

/* ---------- DEPARTURE BOARDS ---------- */

.boards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-bottom:48px;
  align-items:start;
}

.board{
  background:var(--board-bg-2);
  border:2px solid var(--line);
  transition:opacity .4s ease, box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}

/* the board matching today's day-of-week is lit; the others recede */
.board--active{
  border-color:var(--amber);
  box-shadow:0 0 0 1px var(--amber), 0 18px 50px -18px rgba(255,180,0,.45);
  transform:translateY(-2px);
}
.board--off{ opacity:.42; filter:saturate(.6); }

.board--active .board-head .platform{
  background:var(--amber);
  color:#100e0b;
  border-color:var(--amber);
  animation:badge-pulse 2.2s ease-in-out infinite;
}

.board-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:16px 22px;
  background:var(--line-soft);
  border-bottom:2px solid var(--amber);
}

.board-head h3{
  font-family:var(--f-display);
  font-size:18px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.2;
}

.board-head .platform{ flex-shrink:0; }

.board-head .platform{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.15em;
  color:var(--amber);
  border:1px solid var(--amber-dim);
  padding:4px 9px;
  text-transform:uppercase;
}

/* ---------- SECTION MARKERS INSIDE A BOARD ---------- */

.section-tag{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--amber-dim);
  padding:12px 22px 6px;
  border-bottom:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  gap:10px;
}
.section-tag::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.section-tag{ transition:color .4s ease; }
.section-tag.active{ color:var(--amber); }
.section-tag.active::after{ background:var(--amber); }

.row{
  display:grid;
  grid-template-columns:40px 84px 38px 1fr;
  gap:11px;
  align-items:start;
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
}

.row:last-child{border-bottom:none;}

.row.now{
  position:relative;
  z-index:1;
  border-left:5px solid var(--amber);
  border-bottom-color:transparent;
  border-radius:0 5px 5px 0;
  background:rgba(255,180,0,.12);
  animation:now-glow 1.8s ease-in-out infinite;
}
@keyframes now-glow{
  0%,100%{
    background:rgba(255,180,0,.10);
    box-shadow:inset 0 0 0 1px rgba(255,180,0,.30), 0 0 18px -8px rgba(255,180,0,.5);
  }
  50%{
    background:rgba(255,180,0,.18);
    box-shadow:inset 0 0 0 1px rgba(255,180,0,.60), 0 0 34px -4px rgba(255,180,0,.8);
  }
}

/* everything in the live row leans amber and bold so it reads instantly */
.row.now .time{ color:var(--amber); font-weight:700; }
.row.now .info .title{ color:#ffd166; font-weight:700; }
.row.now .info .desc{ color:var(--paper); }
.row.now .icon-badge{ filter:brightness(1.25) drop-shadow(0 0 8px currentColor); }

.row.now .info .title::after{
  content:"● LIVE NOW";
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  color:#100e0b;
  background:var(--amber);
  margin-left:10px;
  padding:3px 9px;
  border-radius:3px;
  vertical-align:middle;
  box-shadow:0 0 14px -2px var(--amber);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* during a gap, the next upcoming activity is marked instead of going blank */
.row.next{
  border-left:3px solid var(--amber-dim);
  background:linear-gradient(90deg, rgba(255,180,0,.04), transparent 72%);
}
.row.next .info .title::after{
  content:"UP NEXT";
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--amber);
  border:1px solid var(--amber-dim);
  margin-left:10px;
  padding:1px 6px;
  border-radius:2px;
  vertical-align:middle;
}

.icon{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
  filter:drop-shadow(0 0 4px currentColor);
}

.icon-badge{
  width:40px;
  height:40px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:visible;
}

.icon-badge.work{background:rgba(59,130,246,.16); color:#8fbdff; border:1px solid #3b82f680;}
.icon-badge.dev{background:rgba(139,92,246,.16); color:#c3abff; border:1px solid #8b5cf680;}
.icon-badge.de{background:rgba(255,180,0,.16); color:var(--amber); border:1px solid var(--amber);}
.icon-badge.life{background:rgba(63,174,114,.16); color:#8ee1b3; border:1px solid #3fae7280;}

/* the badge itself gives a soft breathing pulse so the color block draws the eye */
.icon-badge{ animation:badge-pulse 2.8s ease-in-out infinite; }
@keyframes badge-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow:0 0 14px -2px currentColor; }
}

/* ---------- ICON MOTION ---------- */
/* each icon performs a small looping gesture true to the activity it represents */

/* the sun climbs, brightens and flares — unmistakably a sunrise */
.anim-sunrise{ transform-origin:50% 80%; animation:m-sunrise 2.6s ease-in-out infinite; }
@keyframes m-sunrise{
  0%,100%{ transform:translateY(6px) scale(.9); opacity:.55; }
  50%{ transform:translateY(-4px) scale(1.08); opacity:1; }
}

/* the dumbbell lifts and pumps side to side like a rep */
.anim-dumbbell{ transform-origin:50% 50%; animation:m-dumbbell 0.7s ease-in-out infinite; }
@keyframes m-dumbbell{
  0%,100%{ transform:rotate(-24deg) translateY(2px); }
  50%{ transform:rotate(24deg) translateY(-2px); }
}

/* the fork & knife rock back and forth as if cutting food */
.anim-utensils{ transform-origin:50% 10%; animation:m-utensils 1.1s ease-in-out infinite; }
@keyframes m-utensils{
  0%,100%{ transform:rotate(-16deg); }
  50%{ transform:rotate(16deg); }
}

/* the briefcase bounces along as if being carried to work */
.anim-briefcase{ transform-origin:50% 50%; animation:m-briefcase 1s ease-in-out infinite; }
@keyframes m-briefcase{
  0%,100%{ transform:translateY(3px) rotate(-4deg); }
  50%{ transform:translateY(-4px) rotate(4deg); }
}

/* the book opens and closes its pages */
.anim-book{ transform-origin:50% 50%; animation:m-book 1.6s ease-in-out infinite; }
@keyframes m-book{
  0%,100%{ transform:scaleX(1) rotate(0deg); }
  50%{ transform:scaleX(.55) rotate(-3deg); }
}

/* the graduation cap gets tossed high and spins */
.anim-cap{ transform-origin:50% 60%; animation:m-cap 1.5s ease-in-out infinite; }
@keyframes m-cap{
  0%,100%{ transform:translateY(4px) rotate(0deg); }
  35%{ transform:translateY(-9px) rotate(-16deg); }
  60%{ transform:translateY(-10px) rotate(14deg); }
}

/* the checklist snaps with a confident pop */
.anim-check{ transform-origin:50% 50%; animation:m-check 1.3s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes m-check{
  0%,55%,100%{ transform:scale(1) rotate(0deg); }
  70%{ transform:scale(1.4) rotate(-6deg); }
  85%{ transform:scale(1.15) rotate(4deg); }
}

/* the code brackets stretch wide apart and snap back, typing rhythm */
.anim-code{ transform-origin:50% 50%; animation:m-code 0.9s ease-in-out infinite; }
@keyframes m-code{
  0%,100%{ transform:scaleX(.8); }
  50%{ transform:scaleX(1.35); }
}

/* the moon rocks and glows for night-time rest */
.anim-moon{ transform-origin:50% 50%; animation:m-moon 3s ease-in-out infinite; }
@keyframes m-moon{
  0%,100%{ opacity:.5; transform:rotate(-18deg) scale(.92); }
  50%{ opacity:1; transform:rotate(14deg) scale(1.06); }
}

/* the heart beats twice — a real pulse */
.anim-heart{ transform-origin:50% 50%; animation:m-heart 1s ease-in-out infinite; }
@keyframes m-heart{
  0%,45%,100%{ transform:scale(1); }
  15%{ transform:scale(1.35); }
  30%{ transform:scale(1.1); }
}

/* the coffee cup steams and lifts as if for a sip */
.anim-coffee{ transform-origin:50% 90%; animation:m-coffee 1.4s ease-in-out infinite; }
@keyframes m-coffee{
  0%,100%{ transform:translateY(2px) rotate(-4deg); }
  50%{ transform:translateY(-4px) rotate(4deg); }
}

/* the walker strides with a bigger swing */
.anim-walk{ transform-origin:50% 90%; animation:m-walk 0.6s ease-in-out infinite; }
@keyframes m-walk{
  0%,100%{ transform:rotate(-12deg) translateY(1px); }
  50%{ transform:rotate(12deg) translateY(-2px); }
}

.row .time{
  font-family:var(--f-mono);
  font-weight:600;
  font-size:12px;
  line-height:1.7;
  color:var(--paper);
  white-space:nowrap;
  letter-spacing:-.01em;
}

.row .time .dash{ color:var(--paper-dim); margin:0 1px; }

.row .track{
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  padding:3px 0;
  text-align:center;
  height:fit-content;
  border-radius:2px;
  margin-top:2px;
}

.track.work{background:rgba(59,130,246,.12); color:#7fb2ff; border:1px solid #3b82f655;}
.track.dev{background:rgba(139,92,246,.12); color:#b79bff; border:1px solid #8b5cf655;}
.track.de{background:rgba(255,180,0,.12); color:var(--amber); border:1px solid var(--amber-dim);}
.track.life{background:rgba(63,174,114,.12); color:#7fd6a4; border:1px solid #3fae7255;}

.row .info{ min-width:0; }

.row .info .title{
  font-family:var(--f-body);
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  color:var(--paper);
  text-wrap:pretty;
}

.row .info .desc{
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.4;
  color:var(--paper-dim);
  margin-top:3px;
  letter-spacing:.01em;
  text-wrap:pretty;
}

.row .info .dur{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--amber-dim);
  border:1px solid var(--line);
  border-radius:2px;
  padding:1px 5px;
  margin-top:6px;
}

/* ---------- GOALS ---------- */

.goals{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
  border:2px solid var(--line);
  margin-bottom:40px;
}

.goal{
  background:var(--board-slot);
  padding:26px 26px 24px;
}

.goal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.goal-head .label{
  display:flex;
  align-items:center;
  gap:10px;
}

.goal-head .icon{
  width:19px;
  height:19px;
  color:var(--amber);
}

.goal h3{
  font-family:var(--f-display);
  font-size:18px;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:600;
}

.goal .pct{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--amber);
}

.progress{
  height:6px;
  background:var(--line-soft);
  margin-bottom:20px;
  position:relative;
}
.progress span{display:block;height:100%;}
.blue span,.blue{background:#3b82f6;}
.orange span,.orange{background:var(--amber);}
.green span,.green{background:var(--green);}
.progress .blue{width:80%;}
.progress .orange{width:65%;}
.progress .green{width:90%;}

ul{list-style:none;}

li{
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--paper-dim);
  padding:6px 0;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px dashed var(--line);
}
li:last-child{border-bottom:none;}
li::before{
  content:"✓";
  color:var(--green);
  font-weight:700;
  font-size:12px;
}

/* ---------- FOOTER ---------- */

footer{
  text-align:center;
  padding-top:26px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--amber-dim);
}

/* mid-size screens: drop from 3 boards to 2 so text keeps breathing room */
@media(max-width:1180px){
  .boards{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .boards{grid-template-columns:1fr;}
  .goals{grid-template-columns:1fr;}
  body{padding:30px 18px 60px;}
  header{flex-direction:column;align-items:flex-start;}
  .now-serving{text-align:left;max-width:none;}
  h1{font-size:34px;}
  .row{grid-template-columns:40px 84px 1fr; row-gap:4px; column-gap:12px;}
  .row .track{grid-row:2; grid-column:2; justify-self:start;}
  .row .info{grid-row:2; grid-column:3;}
}

/* moved out of inline style="" attributes so the strict CSP (style-src 'self') is satisfied */
.svg-defs{position:absolute;}
.stat .bar span.fill-100{width:100%;}
.stat .bar span.fill-70{width:70%;}
.stat .bar span.fill-55{width:55%;}
footer a{color:var(--amber);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
footer a:hover{color:var(--paper);border-color:var(--amber);}