/* Willi Distel Diary - mobile-first styles */
:root{
  --ink:#242018; --muted:#575047; --accent:#7a4a1e; --accent-soft:#a06a34;
  --paper:#fbfaf7; --line:#e6e2d8; --card:#fff;
  --person:#f3ece0; --person-line:#e0d2bb; --person-ink:#5a3d1e;
  --place:#e7efe4; --place-line:#cbdcc3; --place-ink:#33502f;
  --hl:#ffe9a8; --hl-on:#ffcf3f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Georgia,'Liberation Serif',serif;
  margin:0 auto;max-width:820px;
  padding:.9rem .9rem 3rem;
  color:var(--ink);line-height:1.6;background:var(--paper);
  font-size:1.05rem;-webkit-font-smoothing:antialiased;
}

/* headings */
h1{font-size:1.5rem;line-height:1.2;margin:.5rem 0 .3rem}
h2{font-size:1.05rem;margin:1.8rem 0 .5rem;border-bottom:1px solid var(--line);padding-bottom:.25rem}

/* navigation - wraps with generous tap targets */
nav{margin:.6rem 0;color:#8a8272;font-size:1rem;line-height:2.2}
nav a{color:var(--accent);text-decoration:none;padding:.25rem .15rem;border-radius:4px}
nav a:hover,nav a:focus{text-decoration:underline;outline:none}

/* chapter + key-point summary */
.chapter{font-weight:bold;color:var(--accent);margin:.3rem 0;font-size:1rem}
.sub{
  color:var(--muted);font-style:italic;margin:.4rem 0 1rem;
  background:#fff;border-left:3px solid var(--accent-soft);
  padding:.55rem .8rem;border-radius:0 4px 4px 0;
}

/* scanned page image */
img{max-width:100%;height:auto;border:1px solid #ccc;background:#fff;border-radius:3px}

/* transcription / translation */
.text{
  white-space:pre-wrap;overflow-wrap:break-word;
  background:#fff;border:1px solid var(--line);
  padding:.9rem 1rem;border-radius:4px;font-size:1.02rem;line-height:1.7;
}

/* highlighted match inside the text */
mark.hl{background:var(--hl);color:inherit;border-radius:2px;padding:0 .06em}
mark.hl.on{background:var(--hl-on)}

/* tabbed English / Original text */
.tabs{margin:1.4rem 0 .2rem}
.tabbar{display:flex;gap:.2rem;border-bottom:2px solid var(--line)}
.tab{
  appearance:none;-webkit-appearance:none;background:none;border:none;cursor:pointer;
  font-family:'Liberation Sans',Arial,sans-serif;font-size:.98rem;font-weight:bold;
  color:var(--muted);padding:.6rem .85rem;margin-bottom:-2px;border-bottom:3px solid transparent;
  -webkit-tap-highlight-color:transparent;
}
.tab:hover,.tab:focus{color:var(--accent);outline:none}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.panel[hidden]{display:none}
.tabnote{
  font-family:'Liberation Sans',Arial,sans-serif;font-size:.78rem;color:#9a917f;
  margin:.6rem 0 .35rem;font-style:normal;
}

/* people & places as interactive chips */
.meta{margin:.7rem 0 0;font-size:.95rem;color:var(--muted);line-height:2.1}
.meta > b{
  display:inline-block;margin-right:.35rem;
  font-family:'Liberation Sans',Arial,sans-serif;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-soft);
}
.tag{
  display:inline-block;margin:.15rem .25rem .15rem 0;padding:.3rem .7rem;
  border-radius:999px;font-size:.92rem;line-height:1.25;cursor:pointer;min-height:1.9em;
  background:var(--person);border:1px solid var(--person-line);color:var(--person-ink);
  -webkit-tap-highlight-color:transparent;
  transition:background .12s ease,border-color .12s ease,transform .08s ease;
}
.tag:hover,.tag:focus{border-color:var(--accent-soft);outline:none}
.tag:active{transform:scale(.97)}
.tag.place{background:var(--place);border-color:var(--place-line);color:var(--place-ink)}
.tag.place:hover,.tag.place:focus{border-color:#8fb083}
.tag.active{background:var(--hl-on);border-color:#e0a800;color:#3a2c00;font-weight:bold}

/* one-line usage hint (injected by highlight.js) */
.hint{
  font-family:'Liberation Sans',Arial,sans-serif;font-size:.8rem;color:#9a917f;
  margin:.9rem 0 .2rem;font-style:normal;
}

/* misc */
.flag{color:#a33;font-size:.85rem}
.intro{color:#444}

/* table of contents (index) - page number as a tappable badge */
ul.toc{list-style:none;padding-left:0;margin:.4rem 0}
ul.toc li{padding:.6rem .1rem;border-bottom:1px solid #eee;line-height:1.5}
ul.toc a{
  display:inline-block;color:var(--accent);text-decoration:none;font-weight:bold;
  background:var(--person);border:1px solid var(--person-line);
  border-radius:6px;padding:.12rem .5rem;margin-right:.45rem;font-size:.85rem;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
ul.toc a:hover,ul.toc a:focus{border-color:var(--accent-soft);text-decoration:none;outline:none}

/* back-to-top button (injected by highlight.js) */
.to-top{
  position:fixed;right:.9rem;bottom:.9rem;z-index:50;
  font-family:'Liberation Sans',Arial,sans-serif;font-size:.82rem;letter-spacing:.04em;
  color:var(--accent);background:rgba(255,255,255,.94);
  border:1px solid var(--person-line);border-radius:999px;padding:.55rem .8rem;cursor:pointer;
  box-shadow:0 2px 10px rgba(90,60,20,.2);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease,border-color .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover,.to-top:focus{background:#fff;border-color:var(--accent-soft);outline:none}

/* age badge (top of a diary page) */
.age{
  display:inline-block;margin:.15rem 0 .5rem;padding:.22rem .7rem;
  font-family:'Liberation Sans',Arial,sans-serif;font-size:.82rem;letter-spacing:.02em;
  color:var(--accent);background:var(--person);border:1px solid var(--person-line);border-radius:999px;
}

/* interesting facts (bottom of a diary page) */
.context{margin:2rem 0 0;padding:1.1rem 1.1rem 1rem;background:#fff;border:1px solid var(--line);border-radius:6px}
.context h2{margin:.2rem 0 .6rem;border-bottom:none}
.context ul{margin:0;padding-left:1.2rem}
.context li{padding:.35rem 0;line-height:1.55}
.context li b{color:var(--accent)}

/* journey timeline page */
.tl-intro{color:var(--muted);margin:.4rem 0 1.4rem}
.mapfig{margin:1.2rem 0 1.8rem}
.mapfig a{display:block;line-height:0}
.mapfig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px;background:#d6e0e3}
.mapfig figcaption{font-size:.85rem;color:var(--muted);margin-top:.45rem;font-style:italic;line-height:1.45}
.timeline{position:relative;margin:1.2rem 0;padding-left:1.5rem;border-left:2px solid var(--line)}
.tl{position:relative;margin:0 0 1.4rem}
.tl::before{content:"";position:absolute;left:-1.5rem;top:.4rem;width:11px;height:11px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--paper);transform:translateX(-50%)}
.tl-when{font-family:'Liberation Sans',Arial,sans-serif;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-soft)}
.tl h2{border-bottom:none;margin:.05rem 0 .2rem;font-size:1.1rem;color:var(--accent)}
.tl h2 .tl-where{display:inline-block;font-family:'Liberation Sans',Arial,sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:normal}
.tl p{margin:.15rem 0;color:var(--muted)}
.tl a{color:var(--accent);text-decoration:none;font-weight:bold}
.tl a:hover,.tl a:focus{text-decoration:underline}

/* "Willi in love" thread page */
.rom-intro{color:var(--muted);margin:.4rem 0 1.2rem}
.rom{border-left:3px solid var(--accent-soft);padding:.2rem 0 .2rem 1rem;margin:1.4rem 0}
.rom h2{border-bottom:none;margin:.1rem 0 .3rem;font-size:1.15rem;color:var(--accent)}
.rom .where{
  display:inline-block;font-family:'Liberation Sans',Arial,sans-serif;font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent-soft);font-weight:normal;
}
.rom blockquote{margin:.4rem 0;font-style:italic}
.rom p{margin:.4rem 0;color:var(--muted)}
.rom a{color:var(--accent);text-decoration:none;font-weight:bold}
.rom a:hover,.rom a:focus{text-decoration:underline}
.rom-end{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-style:italic}

/* thread chip (on relevant diary pages) */
.thread{
  display:inline-block;margin:.15rem 0 .5rem;padding:.2rem .7rem;
  font-family:'Liberation Sans',Arial,sans-serif;font-size:.8rem;
  color:var(--accent);background:#fff;border:1px solid var(--accent-soft);border-radius:999px;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.thread:hover,.thread:focus{background:var(--person);outline:none}

/* thread call-out on the index */
.threadbox{margin:1.4rem 0;padding:.85rem 1.1rem;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent-soft);border-radius:0 6px 6px 0}
.threadbox a{color:var(--accent);font-weight:bold;text-decoration:none}
.threadbox a:hover,.threadbox a:focus{text-decoration:underline}
.threadbox p{margin:.15rem 0;color:var(--muted);font-size:.95rem}

/* open questions call-out (index) */
.questions{margin:2.6rem 0 0;padding:1.1rem 1.1rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:6px}
.questions h2{margin:.2rem 0 .5rem;border-bottom:none}
.questions h3{
  font-family:'Liberation Sans',Arial,sans-serif;font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-soft);margin:1.2rem 0 .3rem;
}
.questions p{color:var(--muted);margin:.4rem 0}
.questions ul{margin:.3rem 0 .6rem;padding-left:1.2rem}
.questions li{padding:.28rem 0;line-height:1.5}
.questions a{color:var(--accent);text-decoration:none;font-weight:bold}
.questions a:hover,.questions a:focus{text-decoration:underline}

/* larger screens */
@media (min-width:640px){
  body{padding:1.3rem 1.2rem 4rem}
  h1{font-size:1.9rem}
  h2{font-size:1.2rem}
  nav{line-height:1.8}
  ul.toc li{padding:.35rem .1rem}
}