/* Die Seite ist ein Wörterbucheintrag über die volle Breite und passt auf
   eine Bildschirmhöhe. Alles Helle im Bild ist Metall, die Schrift bleibt
   stumpf, damit das Wortzeichen die einzige leuchtende Stelle ist.

   Die senkrechten Maße hängen an svh: die Seite schrumpft mit dem Fenster,
   statt zu scrollen. Das Wortzeichen nimmt die volle Spaltenbreite, solange
   seine Höhe im Budget bleibt — auf flachen Fenstern begrenzt --wm-hoehe. */

:root{
  --ink:#d6dae0;
  --ink-dim:#878e98;
  --ink-faint:#565d66;
  --rule:#1e2126;
  --bg:#08090a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --wm-hoehe:clamp(54px,40svh,400px);
  --wm-verhaeltnis:3.6;              /* nach dem Rastern exakt gesetzt */
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{height:100%;}

body{
  margin:0;
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(110% 80% at 50% -15%, #101318 0%, var(--bg) 60%),
    var(--bg);
  color:var(--ink);
  font:400 clamp(15px,1.7svh,17px)/1.6 var(--serif);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  display:flex;
}

main{
  margin:auto;
  width:100%;
  max-height:100svh;
  padding:clamp(16px,3.4svh,52px) clamp(22px,4.5vw,72px);
}

.entry{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(32px,6vw,96px);
  row-gap:clamp(14px,3.6svh,44px);
  grid-template-areas:
    "kopf  kopf"
    "sinn  apps"
    "fuss  fuss";
  align-items:start;
}

/* ---------- Kopf ---------- */

.head{grid-area:kopf;}

.wordmark{
  margin:0 0 clamp(6px,1.4svh,16px);
  width:min(100%, calc(var(--wm-hoehe) * var(--wm-verhaeltnis)));
  aspect-ratio:var(--wm-verhaeltnis);
  position:relative;
  line-height:0;
}
.wordmark canvas{display:block;width:100%;height:100%;}

/* Sichtbar, solange der Shader rechnet, und wenn WebGL fehlt. */
.fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;
  font-size:calc(var(--wm-hoehe) * .78);
  line-height:1;
  letter-spacing:-.02em;
  color:#20242a;
  transition:opacity .5s ease;
}
.wordmark.live .fallback{opacity:0;}

.phonetic{
  margin:0;
  color:var(--ink-faint);
  font-size:clamp(12px,1.5svh,15px);
  letter-spacing:.01em;
}
.phonetic em{font-style:italic;}

/* ---------- Bedeutungen ---------- */

.senses{
  grid-area:sinn;
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:sense;
  align-self:center;
}
.senses > li{
  counter-increment:sense;
  position:relative;
  padding-left:2.2rem;
}
.senses > li + li{margin-top:clamp(14px,3.4svh,40px);}
.senses > li::before{
  content:counter(sense);
  position:absolute;
  left:0;
  top:.24em;
  color:var(--ink-faint);
  font-size:clamp(12px,1.5svh,15px);
  font-variant-numeric:lining-nums;
}
.sense{
  margin:0;
  font-size:clamp(18px,calc(1.4svh + .9vw),30px);
  line-height:1.35;
  text-wrap:pretty;
  max-width:22ch;
}

/* ---------- Die vier Apps ---------- */

.apps{
  grid-area:apps;
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:app;
  border-top:1px solid var(--rule);
  align-self:center;
}
.apps li{
  counter-increment:app;
  display:grid;
  grid-template-columns:clamp(34px,6svh,60px) 6rem 1fr;
  align-items:center;
  gap:0 clamp(12px,1.6vw,20px);
  padding:clamp(5px,1.4svh,16px) 0;
  border-bottom:1px solid var(--rule);
}
.apps img,
.placeholder{
  width:clamp(34px,6svh,60px);
  aspect-ratio:1;
  height:auto;
  display:block;
}
.placeholder{
  border:1px dashed #23272d;
  border-radius:22%;
}
.apps b{
  font-weight:400;
  font-size:clamp(15px,2svh,21px);
  letter-spacing:-.005em;
  white-space:nowrap;
}
.apps b::before{
  content:counter(app,lower-alpha) ".";
  color:var(--ink-faint);
  font-size:.72em;
  margin-right:.5em;
}
.apps span{
  color:var(--ink-dim);
  font-size:clamp(13px,1.7svh,17px);
  font-style:italic;
}
.apps .unbuilt b,
.apps .unbuilt span{color:var(--ink-faint);}

/* ---------- Schluss ---------- */

.colophon{
  grid-area:fuss;
  margin:0;
  padding-top:clamp(10px,1.8svh,22px);
  border-top:1px solid var(--rule);
  color:var(--ink-faint);
  font-size:clamp(12px,1.4svh,14px);
  font-style:italic;
}

/* Eine Spalte, sobald zwei zu eng würden. */
@media (max-width:880px){
  .entry{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"kopf" "sinn" "apps" "fuss";
    row-gap:clamp(12px,2.8svh,32px);
  }
  .sense{max-width:none;}
}

@media (max-width:560px){
  .apps li{
    grid-template-columns:clamp(30px,4.8svh,44px) 1fr;
    gap:2px clamp(10px,3vw,14px);
  }
  .apps img,.placeholder{width:clamp(30px,4.8svh,44px);grid-row:span 2;}
  .apps b{align-self:end;}
  .apps span{align-self:start;}
  .senses > li{padding-left:1.7rem;}
}

/* Sehr flach: lieber scrollen als abschneiden. */
@media (max-height:520px){
  body{height:auto;min-height:100svh;overflow:auto;}
}

@media (prefers-reduced-motion:reduce){
  .fallback{transition:none;}
}