/* ============================================================
   Today, this — styles
   Dark, image-first. The photo carries the colour; the UI is quiet.
   ============================================================ */

:root{
  --ink:#1A1A17;          /* brand ink — page background */
  --paper:#F5F3EE;        /* text on dark, light surfaces */
  --slate:#6B6960;        /* muted text */
  --mist:#E4E1D8;         /* hairlines */
  --klein:#002FA7;        /* accent — the comma */
  --klein-bright:#3D63E0; /* accent for links on dark (kept legible) */
}

@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces.woff') format('woff');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-semibold.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%;}

/* ---------- Homepage stage ---------- */
.stage{position:fixed; inset:0; overflow:hidden; background:#16181a;}
.stage__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.veil{position:absolute; inset:0; background:rgba(10,11,12,.44); transition:background .3s ease;}
.stage:hover .veil{background:rgba(10,11,12,.5);}

/* the whole image is the link out */
.hit{position:absolute; inset:0; z-index:1;}

.brand{
  position:absolute; top:24px; left:0; right:0; z-index:2; pointer-events:none;
  text-align:center; font-size:clamp(15px, 1.5vw, 17px); letter-spacing:.11em; text-transform:uppercase;
  color:rgba(245,243,238,.66);
}
.brand .comma{color:var(--klein);}

.menu-btn{
  position:absolute; top:15px; right:16px; z-index:5;
  background:none; border:0; cursor:pointer; padding:9px; line-height:0;
  color:rgba(245,243,238,.72);
}
.menu-btn:hover{color:var(--paper);}
.menu-btn svg{width:22px; height:22px; display:block;}

.panel{
  position:absolute; top:52px; right:16px; z-index:6; width:250px;
  background:#232527; border:.5px solid rgba(245,243,238,.14); border-radius:12px;
  padding:14px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.panel.open{opacity:1; visibility:visible; transform:none;}
.panel .navlink{display:block; color:rgba(245,243,238,.85); text-decoration:none; font-size:14px; padding:7px 4px;}
.panel .navlink:hover{color:#fff;}
.panel .sep{border-top:.5px solid rgba(245,243,238,.14); margin:8px 0;}
.panel .sublabel{color:rgba(245,243,238,.55); font-size:12px; padding:2px 4px 8px;}
.signup{display:flex; align-items:center; gap:6px; padding:0 4px;}
.signup input{
  flex:1; min-width:0; background:none; border:0; border-bottom:.5px solid rgba(245,243,238,.3);
  color:var(--paper); font-family:'Inter'; font-size:13px; padding:6px 2px;
}
.signup input::placeholder{color:rgba(245,243,238,.45);}
.signup input:focus{outline:none; border-bottom-color:rgba(245,243,238,.8);}
.signup button{background:none; border:0; cursor:pointer; padding:4px; line-height:0; color:rgba(245,243,238,.7);}
.signup button:hover{color:#fff;}
.signup svg{width:16px; height:16px; display:block;}

.center{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 32px;
}
.title{
  font-family:'Fraunces'; font-weight:500; font-size:clamp(26px, 4.6vw, 42px);
  line-height:1.22; color:var(--paper); max-width:640px; text-decoration:none;
  pointer-events:auto; transition:transform .3s ease; transform-origin:center;
  text-shadow:0 1px 20px rgba(0,0,0,.35);
}
.title:hover{transform:scale(1.05);}
.note{
  margin-top:16px; font-size:clamp(14px, 1.6vw, 16px); line-height:1.55;
  color:rgba(245,243,238,.82); max-width:520px; text-shadow:0 1px 16px rgba(0,0,0,.3);
}
.mark{
  font-family:'Fraunces'; font-weight:500; color:var(--klein);
  font-size:clamp(72px, 12vw, 132px); line-height:0; height:.34em;
  margin-top:34px; user-select:none;
  text-shadow:0 0 30px rgba(0,47,167,.6), 0 2px 12px rgba(0,0,0,.45);
}
.date{
  position:absolute; bottom:24px; left:0; right:0; z-index:2; pointer-events:none;
  text-align:center; font-size:12px; color:rgba(245,243,238,.5);
}

/* ---------- Inner pages (About, Impressum) ---------- */
.page{max-width:640px; margin:0 auto; padding:72px 28px 120px;}
.page__nav{display:flex; justify-content:space-between; align-items:center; margin-bottom:60px;}
.wordmark{font-family:'Fraunces'; font-weight:500; font-size:22px; color:var(--paper); text-decoration:none;}
.wordmark .comma{color:var(--klein);}
.back{font-size:13px; color:var(--slate); text-decoration:none;}
.back:hover{color:var(--paper);}
.page h1{font-family:'Fraunces'; font-weight:500; font-size:clamp(28px, 5vw, 36px); line-height:1.2; margin-bottom:26px;}
.page p{font-size:16px; line-height:1.75; color:rgba(245,243,238,.85); margin-bottom:18px;}
.page a.link{color:var(--klein-bright); text-decoration:underline; text-underline-offset:2px;}
.page .rows{margin-top:6px;}
.page .row{display:flex; gap:14px; padding:9px 0; border-top:.5px solid rgba(245,243,238,.12); font-size:15px;}
.page .row .k{width:150px; flex:none; color:var(--slate);}
.page .row .v{color:rgba(245,243,238,.9);}
.page .muted{color:var(--slate); font-size:13px; margin-top:28px;}

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--klein-bright); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  .title, .panel, .veil{transition:none;}
  .title:hover{transform:none;}
}