/* Ivan Benak — memorial site. Gentle homage to the late-90s personal homepage. */

:root {
  --desk: #e9dfc6;          /* table the page lies on */
  --paper: #fbf6e8;         /* the page */
  --paper-2: #f4ecd6;       /* inset panels */
  --ink: #2b2118;
  --ink-soft: #5d4f40;
  --rule: #cdbf9e;
  --link: #1f3f8f;          /* nod to his #3333FF */
  --link-visited: #5a3f86;
  --red: #9b2226;           /* Slavonian embroidery red */
  --red-soft: #c8575a;
  --hi: #fff2c2;            /* stanza highlight */
  --bevel-hi: #fffdf6;
  --bevel-lo: #a8987a;
}

* { box-sizing: border-box; }

html { background: var(--desk); }
body {
  margin: 0;
  padding: 18px 12px 40px;
  background: var(--desk);
  color: var(--ink);
  font: 17px/1.55 Georgia, "Times New Roman", Times, serif;
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--red); }

/* ---------- the page ---------- */
.page {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--paper);
  border: 3px ridge var(--bevel-lo);
  box-shadow: 4px 4px 0 rgba(90, 70, 40, .18);
}

/* ---------- header ---------- */
.masthead {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  padding: 18px 20px 12px;
  text-align: center;
}
.masthead img { image-rendering: auto; }
.masthead .name {
  margin: 0;
  font-size: 44px;
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: .06em;
  color: var(--red);
  line-height: 1.1;
}
.masthead .name a { color: inherit; text-decoration: none; }
.masthead .sub {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 16px;
}
.masthead .years { font-style: normal; letter-spacing: .04em; }

/* šokački cross-stitch strip */
.vez {
  height: 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='%239b2226'%3E%3Crect x='12' y='1' width='4' height='2'/%3E%3Crect x='10' y='3' width='8' height='2'/%3E%3Crect x='8' y='5' width='4' height='4'/%3E%3Crect x='16' y='5' width='4' height='4'/%3E%3Crect x='10' y='9' width='8' height='2'/%3E%3Crect x='12' y='11' width='4' height='2'/%3E%3C/g%3E%3Cg fill='%232b2118'%3E%3Crect x='13' y='6' width='2' height='2'/%3E%3Crect x='0' y='6' width='3' height='2'/%3E%3Crect x='25' y='6' width='3' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

/* ---------- navigation: bevelled buttons ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  margin: 0;
  list-style: none;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.nav a {
  display: block;
  padding: 3px 11px 4px;
  font-size: 15px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 2px outset var(--bevel-hi);
  border-right-color: var(--bevel-lo);
  border-bottom-color: var(--bevel-lo);
}
.nav a small { display: block; font-size: 12px; font-style: italic; color: var(--ink-soft); }
.nav a:hover { background: var(--hi); }
.nav a:active, .nav a[aria-current="page"] {
  border-style: inset;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  background: #efe4c8;
}

main { padding: 8px 26px 20px; }

hr {
  border: 0;
  height: 2px;
  margin: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--bevel-hi);
}
hr.orn {
  height: auto;
  border: 0;
  text-align: center;
  color: var(--red-soft);
  letter-spacing: .6em;
  font-size: 14px;
}
hr.orn::after { content: "❦ ❦ ❦"; }

/* ---------- the mirror: HR left, EN right ---------- */
.lang-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0 4px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lang-bar span { padding: 2px 16px; }
.lang-bar span + span { border-left: 1px solid var(--rule); }

.m {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.m > .hr, .m > .en { padding: 4px 18px 6px; min-width: 0; }
.m > .en { border-left: 1px solid var(--rule); }
.m > .en { color: #33291f; }
.m.title > div { padding-top: 10px; }

h1, h2, h3, .h1-en { font-weight: normal; line-height: 1.2; }
h1, .h1-en { font-size: 30px; margin: 6px 0 4px; color: var(--red); }
h2 { font-size: 23px; margin: 10px 0 4px; color: var(--red); }
h3, h2.cat-h { font-size: 19px; margin: 8px 0 2px; color: var(--ink); }
.en h1, .en h2, .en h3, .en .h1-en { font-style: italic; }
p { margin: 0 0 .7em; }
.kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }

/* poems */
.poem .m.stanza > div { padding-top: 7px; padding-bottom: 9px; }
.poem .m.stanza:hover > div { background: var(--hi); }
.poem .m.stanza.lit > div { background: var(--hi); }
.stanza p { margin: 0; white-space: normal; }
.stanza .l { display: block; padding-left: 1.4em; text-indent: -1.4em; }
.poem-title { margin: 6px 0 0; }
.poem-meta { font-size: 14px; color: var(--ink-soft); font-style: italic; margin-top: 4px; }
.signature { font-style: italic; color: var(--ink-soft); font-size: 15px; margin-top: 10px; }
.note {
  font-size: 14.5px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  padding: 7px 10px;
  margin: 12px 0 4px;
}
.pending { color: var(--ink-soft); font-style: italic; }
abbr.g, span.g { text-decoration: underline dotted var(--ink-soft); text-underline-offset: 3px; cursor: help; }

.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 15px;
}
.pager .next { text-align: right; }
.pager .up { text-align: center; }

/* ---------- quote of the day ---------- */
.qotd {
  margin: 18px 0 8px;
  border: 3px double var(--red-soft);
  background: #fffaf0;
  padding: 6px 0 10px;
}
.qotd .kicker { text-align: center; color: var(--red); padding: 4px 0 2px; }
.qotd blockquote { margin: 0; font-size: 19px; line-height: 1.5; font-style: italic; }
.qotd .m > div { padding: 6px 22px; }
.qotd .src { font-size: 14px; font-style: normal; margin-top: 6px; color: var(--ink-soft); }

/* ---------- lists & tables ---------- */
.cats { list-style: none; padding: 0; margin: 0; }
.cats li { margin: 0 0 8px; }
.cats .count { color: var(--ink-soft); font-size: 14px; }

table.index { width: 100%; border-collapse: collapse; font-size: 16px; }
table.index td { padding: 3px 10px; border-bottom: 1px dotted var(--rule); vertical-align: top; }
table.index td + td { border-left: 1px solid var(--rule); font-style: italic; }
table.index tr:hover td { background: var(--hi); }
table.index .letter td { border-bottom: 1px solid var(--rule); font-style: normal; font-weight: bold; color: var(--red); padding-top: 14px; background: none; }

.letters { text-align: center; font-size: 15px; margin: 8px 0 14px; line-height: 2; }
.letters a { padding: 0 4px; }

/* ---------- figures, books, gallery ---------- */
.portrait { float: right; margin: 4px 0 10px 16px; border: 1px solid var(--rule); padding: 5px; background: #fff; }
.portrait img { display: block; max-width: 100%; height: auto; }
.cap { font-size: 13.5px; color: var(--ink-soft); font-style: italic; text-align: center; margin-top: 4px; }

.book {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: start;
}
.cover { border: 1px solid var(--rule); padding: 5px; background: #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.08); }
.cover img { display: block; width: 100%; height: auto; }
.book .m { grid-column: 2; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin: 8px 0 18px;
}
.gallery a { display: block; text-decoration: none; color: var(--ink-soft); }
.gallery .thumb {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 5px;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.gallery img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.gallery .cap { text-align: left; }
.big { text-align: center; }
.big img { max-width: 100%; height: auto; border: 1px solid var(--rule); padding: 6px; background: #fff; }

/* YouTube click-to-load */
.yt {
  position: relative;
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  margin: 8px auto;
  background: #000 center / cover no-repeat;
  border: 2px outset var(--bevel-hi);
  cursor: pointer;
  color: #fff;
  font: inherit;
  padding: 0;
}
.yt::after {
  content: "▶";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  background: rgba(0,0,0,.18);
}
.yt:hover::after { background: rgba(0,0,0,.05); }
.yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-player { cursor: auto; border-style: inset; }
.yt-player::after { display: none; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.song-credits { font-size: 15px; color: var(--ink-soft); }

/* ---------- footer ---------- */
.foot {
  margin-top: 18px;
  padding: 0 0 12px;
  border-top: 3px ridge var(--bevel-lo);
  background: var(--paper-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.foot .vez { margin: 0 0 12px; }
.foot p { margin: 4px 0; }
.foot [lang="en"] { font-style: italic; }
.foot-mem { text-align: center; font-size: 15px; color: var(--ink); padding: 0 16px; }
.foot-mem img { vertical-align: -5px; margin-right: 4px; }
.foot-mem small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.foot-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 12px 16px 6px; border: 1px solid var(--rule); background: var(--paper);
}
.foot-cols section { padding: 10px 14px 12px; }
.foot-cols section + section { border-left: 1px dotted var(--rule); }
.foot h2 {
  margin: 0 0 6px; font-size: 12.5px; font-weight: bold; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red);
}
.foot h2 i { text-transform: none; letter-spacing: 0; font-weight: normal; color: var(--ink-soft); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 2px 0; }
.foot li a::before { content: "\00BB\00A0"; color: var(--red-soft); }
.foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
  margin: 8px 16px 0 !important; padding-top: 8px; border-top: 1px dotted var(--rule); font-size: 12.5px;
}
.foot-bottom a { white-space: nowrap; }
/* both languages: English on its own line under longer texts, a middle dot between short labels */
.foot p > span[lang="en"], .foot-mem small > span[lang="en"], .foot-mem > span[lang="en"] { display: block; }
html.show-hr .foot p > span[lang="en"], html.show-hr .foot-mem small > span[lang="en"], html.show-hr .foot-mem > span[lang="en"] { display: none; }
html.show-both .foot a span[lang="en"]::before, html.show-both .foot h2 i::before,
html.show-both .foot .lbl span[lang="en"]::before, html.show-both .foot-bottom > span > span[lang="en"]::before { content: "· "; font-style: normal; }
.foot-bottom > span > span[lang="en"] { display: inline !important; }
@media (max-width: 760px) {
  .foot-cols { grid-template-columns: 1fr; }
  .foot-cols section + section { border-left: 0; border-top: 1px dotted var(--rule); }
  .foot-bottom { justify-content: center; text-align: center; }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  body { padding: 0; font-size: 17px; }
  .page { border: 0; box-shadow: none; }
  main { padding: 6px 16px 16px; }
  .masthead { grid-template-columns: 44px 1fr 44px; padding: 12px 10px 8px; }
  .masthead img { width: 40px; height: auto; }
  .masthead .name { font-size: 32px; }
  .nav a { padding: 2px 8px 3px; font-size: 14px; }



  .m, .lang-bar { grid-template-columns: 1fr; }
  .m > .en { border-left: 0; border-top: 1px dotted var(--rule); }
  .lang-bar span + span { border-left: 0; }
  .m > .hr, .m > .en { padding-left: 4px; padding-right: 4px; }

  .portrait { float: none; margin: 6px auto 12px; max-width: 260px; }
  .book { grid-template-columns: 1fr; }
  .book .m { grid-column: 1; }
  .cover { max-width: 180px; margin: 0 auto; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  table.index td { padding: 3px 5px; font-size: 15px; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager .up { grid-column: 1 / -1; order: 3; }
}


/* homepage portrait, centred above both columns */
.hero { text-align: center; margin: 4px 0 8px; }
.hero .portrait { float: none; display: inline-block; margin: 0 auto; }
.hero .portrait img { max-height: 340px; width: auto; }

/* book illustration on a poem page */
.ill { margin: 10px auto 6px; text-align: center; }
.ill img { max-width: min(100%, 420px); height: auto; mix-blend-mode: multiply; }

/* quote of the day: date label, links, calendar */
.qotd .qday { text-align: center; margin: 2px 0 6px; line-height: 1.35; }
.qotd .qd-date { display: block; font-size: 18px; color: var(--ink); }
.qotd .qd-date i { color: var(--ink-soft); }
.qotd .qd-occ { display: block; font-size: 15px; font-style: italic; color: var(--red); margin-top: 1px; }
.qotd .qd-occ i { color: #b3585b; }
.qotd .qd-sep { color: var(--rule); font-style: normal; }
.qnav { text-align: center; font-size: 14px; margin: 8px 0 2px; }
.qnav button {
  font: inherit; font-size: 14px; padding: 2px 10px; margin: 0 3px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  border: 2px outset var(--bevel-hi); border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.qnav button:active { border-style: inset; }
.calday > div { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px dotted var(--rule); }
.calday blockquote { margin: 4px 0 2px; font-style: italic; }
.calday .src { font-size: 13.5px; color: var(--ink-soft); margin: 2px 0 0; }
.calday .occ { color: var(--red); letter-spacing: .04em; }
.calday.today > div { background: var(--hi); }
.calday:target > div { background: var(--hi); }

/* ---------- find a poem ---------- */
.pform { margin: 14px 0 6px; text-align: center; }
.pform .kicker { display: block; margin-bottom: 6px; }
.pbox { display: flex; gap: 6px; max-width: 640px; margin: 0 auto; }
.pbox input {
  flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 6px 10px;
  background: #fffdf6; color: var(--ink); border: 2px inset var(--bevel-lo);
}
.pbox button, .pchips button {
  font: inherit; font-size: 15px; padding: 4px 12px; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 2px outset var(--bevel-hi);
  border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.pbox button:active, .pchips button:active { border-style: inset; }
.pchips { margin: 10px auto 0; max-width: 820px; line-height: 2.2; }
.pchips button { font-size: 14px; padding: 1px 9px; margin: 0 2px; }
.pchips button i { color: var(--ink-soft); font-size: 12.5px; }
.found { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 10px 0 4px; }
.chip-s { display: inline-block; padding: 0 7px; border: 1px solid var(--rule); background: var(--paper-2); margin: 2px; }
.presult > div { padding-top: 8px; padding-bottom: 10px; border-bottom: 1px dotted var(--rule); }
.presult h3 { margin: 2px 0 3px; }
.presult .sum { font-size: 15px; margin: 0 0 4px; }
.presult .first { font-size: 14.5px; font-style: italic; color: var(--ink-soft); margin: 0; }
.more { text-align: center; font-size: 14px; color: var(--ink-soft); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }

.pmapwrap { position: relative; margin: 8px 0; border: 3px ridge var(--bevel-lo); background: #fffdf4; }
#pmap { display: block; width: 100%; height: auto; }
#pmap .dot { stroke: #fff; stroke-width: 1; opacity: .9; transition: r .15s, opacity .15s; }
#pmap a:hover .dot, #pmap a:focus .dot { stroke: var(--ink); stroke-width: 2; opacity: 1; }
#pmap .dot.dim { opacity: .13; }
#pmap .dot.hit { stroke: var(--ink); stroke-width: 1.6; opacity: 1; }
#pmap .regions { pointer-events: none; }
#pmap .reg {
  font: italic bold 20px Georgia, serif; fill: #4a3b2c; letter-spacing: .02em;
  paint-order: stroke; stroke: #fffdf4; stroke-width: 6px; stroke-linejoin: round;
}
#pmap .reg-en { font-size: 15px; font-weight: normal; fill: #6d5d4b; }
#pmap.searching .reg { opacity: .45; }
.ptip {
  position: absolute; z-index: 3; width: 250px; padding: 6px 9px; font-size: 13.5px; line-height: 1.35;
  background: #fffaf0; border: 1px solid var(--bevel-lo); box-shadow: 2px 2px 0 rgba(0,0,0,.12); pointer-events: none;
}
.ptip .tip-s { margin-top: 4px; color: var(--ink-soft); }
.plegend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 13.5px; margin-bottom: 10px; }
.plegend i { color: var(--ink-soft); }
.pcount { text-align: center; font-size: 14.5px; margin: 12px 0 0; }
.pcount:empty { display: none; }
.pmore-p { text-align: center; margin: 14px 0 6px; }
.pmore-p .pmore {
  font: inherit; font-size: 15px; padding: 4px 14px; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 2px outset var(--bevel-hi);
  border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.pmore-p .pmore:active { border-style: inset; }
.pmore-p .pleft { font-size: 13.5px; color: var(--ink-soft); }
#pmap .regions .reg-b { pointer-events: auto; cursor: pointer; }
#pmap .reg-b:hover .reg, #pmap .reg-b.on .reg { fill: var(--link); }
#pmap .reg-b:focus { outline: none; }
#pmap .reg-b:focus-visible .reg { fill: var(--link); text-decoration: underline; }
#pmap.searching .reg-b.on .reg { opacity: 1; }
.ptip.tap { pointer-events: auto; }
.ptip .tip-go { display: inline-block; margin-top: 6px; padding: 4px 0; font-weight: bold; }
.pregion { margin: 4px 0 12px; padding: 6px 12px 8px; background: var(--paper-2); border: 1px solid var(--rule); }
.pregion-h { margin: 2px 0 6px; font-size: 15px; }
.pregion-x { float: right; font: inherit; font-size: 13.5px; padding: 1px 9px; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 2px outset var(--bevel-hi); border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo); }
.pregion ul { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 24px; font-size: 14.5px; line-height: 1.5; }
.pregion li { break-inside: avoid; padding: 1px 0; }
.pregion li i { color: var(--ink-soft); font-size: 13px; }
@media (max-width: 760px) {
  .pregion li { padding: 5px 0; }
  .pbox input { font-size: 16px; }
  #pmap .reg { font-size: 26px; }
  #pmap .reg-en { font-size: 20px; }
}

/* ---------- wall calendar ---------- */
.wcal { max-width: 560px; margin: 16px auto 6px; }
.wcal-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-bottom: 8px; }
.wcal-months button {
  font: inherit; font-size: 12.5px; line-height: 1.1; padding: 3px 0 2px; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
}
.wcal-months button small { display: block; font-size: 10px; font-style: italic; color: var(--ink-soft); }
.wcal-months button.on { background: var(--red); color: #fff; border-color: var(--red); }
.wcal-months button.on small { color: #f3d6d6; }
.wcal-sheet {
  position: relative; background: #fffdf6; border: 3px ridge var(--bevel-lo);
  box-shadow: 3px 4px 0 rgba(90, 70, 40, .15); padding: 0 0 8px;
}
.wcal-head {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  background: var(--red); color: #fff; padding: 12px 6px 9px;
  border-bottom: 4px solid #6d171a;
}
.wcal-title { text-align: center; font-size: 26px; font-variant: small-caps; letter-spacing: .06em; line-height: 1.1; }
.wcal-title .wcal-year { font-variant: normal; font-size: 18px; opacity: .85; }
.wcal-title small { display: block; font-size: 14px; font-style: italic; font-variant: normal; letter-spacing: .02em; opacity: .85; }
.wcal-nav {
  font: inherit; font-size: 16px; width: 38px; height: 34px; margin: 0 auto; cursor: pointer;
  color: #fff; background: transparent; border: 2px outset #d77a7c;
}
.wcal-nav:active { border-style: inset; }
.wcal-dow, .wcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 10px; }
.wcal-dow { margin: 8px 0 2px; }
.wcal-dow span { text-align: center; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.wcal-dow span small { display: block; font-size: 10px; letter-spacing: 0; text-transform: none; font-style: italic; }
.wcal-dow span:last-child { color: var(--red); }
.wcal-grid { gap: 3px; }
.wcal-day, .wcal-empty { aspect-ratio: 1 / 0.86; }
.wcal-day {
  position: relative; font: inherit; font-size: 18px; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 1px solid #e6dcc3;
}
.wcal-day:hover { background: var(--hi); border-color: var(--bevel-lo); }
.wcal-day.sun { color: var(--red); }
.wcal-day.now { box-shadow: inset 0 0 0 2px var(--link); }
.wcal-day.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.wcal-day .mark { position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; background: var(--red); transform: rotate(45deg); }
.wcal-day.sel .mark { background: #f0b3b5; }
.wcal-day .pen { position: absolute; right: 3px; top: 1px; font-size: 11px; font-style: normal; color: var(--ink-soft); }
.wcal-day.sel .pen { color: #ddd; }
.wcal-key { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 0; }
.wcal-key .k-occ { display: inline-block; width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); margin-right: 3px; }
@media (max-width: 760px) {
  .wcal-months { grid-template-columns: repeat(6, 1fr); }
  .wcal-day { font-size: 16px; }
  .wcal-title { font-size: 22px; }
}

/* ---------- grouped navigation ---------- */
.nav2 {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px;
  padding: 10px 12px 12px; background: var(--paper-2); border-bottom: 1px solid var(--rule);
}
.ng-home {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px; padding: 4px 10px; text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.2;
  background: var(--paper); border: 2px outset var(--bevel-hi);
  border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.ng-home img { margin-bottom: 2px; }
.ng-home small { font-size: 12px; font-style: italic; color: var(--ink-soft); }
.ng-home:hover { background: var(--hi); }
.ng-home[aria-current] { border-style: inset; background: #efe4c8; }
.ng { border: 2px groove var(--bevel-hi); background: var(--paper); padding: 0 6px 6px; }
.ng-label {
  margin: 0 -6px 6px; padding: 2px 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; text-align: center;
}
.ng-label i { text-transform: none; letter-spacing: .02em; opacity: .85; }
.ng-poet .ng-label { background: #5d6b3b; }      /* olive: the man */
.ng-poems .ng-label { background: var(--red); }   /* embroidery red: the poems */
.ng ul { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ng a {
  display: block; padding: 2px 9px 3px; font-size: 14.5px; line-height: 1.2; text-align: center;
  text-decoration: none; color: var(--ink); background: var(--paper-2);
  border: 2px outset var(--bevel-hi); border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.ng a small { display: block; font-size: 11.5px; font-style: italic; color: var(--ink-soft); }
.ng a:hover { background: var(--hi); }
.ng a[aria-current] { border-style: inset; border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo); background: #efe4c8; }
.ng-poet a[aria-current] { box-shadow: inset 0 -3px 0 #5d6b3b; }
.ng-poems a[aria-current] { box-shadow: inset 0 -3px 0 var(--red); }
@media (max-width: 760px) {
  .nav2 { gap: 6px; padding: 8px; }
  .ng-home { flex-direction: row; gap: 6px; width: 100%; min-width: 0; padding: 3px 8px; }
  html.show-both .ng-home small::before { content: "· "; }
  .ng-home img { width: 20px; height: 20px; margin: 0; }
  .ng { width: 100%; }
  .ng ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .ng a { font-size: 14px; }
}
/* tighter so Home + both groups fit on one line on desktop */
.nav2 { gap: 8px; padding: 9px 8px 10px; }
.ng { padding: 0 5px 5px; }
.ng ul { gap: 4px; }
.ng a { padding: 2px 7px 3px; font-size: 14px; }
.ng-home { min-width: 84px; padding: 4px 8px; font-size: 14.5px; }
/* phones: the menu folds behind a button only when JS is running (html.js, set in <head>) */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .js .nav-toggle {
    display: block; width: calc(100% - 16px); margin: 6px 8px; padding: 6px; font: inherit; font-size: 16px;
    color: var(--ink); cursor: pointer; background: var(--paper);
    border: 2px outset var(--bevel-hi); border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
  }
  .nav-toggle i { color: var(--ink-soft); font-size: 14px; }
  .js .nav2 { display: none; }
  .js body.nav-open .nav2 { display: flex; }
  .js body.nav-open .nav-toggle { border-style: inset; }
}

/* ---------- his birthday (29 July): a festive frame around the thought of the day ---------- */
.qotd.bday {
  position: relative; border: 0; padding: 14px 10px 14px;
  background:
    linear-gradient(#fffaf0, #fffaf0) padding-box,
    repeating-linear-gradient(45deg, var(--red) 0 10px, #fffaf0 10px 14px, #2b2118 14px 17px, #fffaf0 17px 21px) border-box;
  border: 9px solid transparent;
  box-shadow: 0 0 0 2px var(--red), 3px 4px 0 3px rgba(90, 70, 40, .18);
}
.bday-banner { text-align: center; margin: 0 0 4px; }
.bday-banner .bunting {
  display: block; height: 18px; margin: -6px 8px 8px;
  background:
    linear-gradient(135deg, transparent 50%, #fffaf0 50%) 0 0 / 24px 18px,
    linear-gradient(225deg, transparent 50%, #fffaf0 50%) 0 0 / 24px 18px,
    repeating-linear-gradient(90deg, var(--red) 0 24px, #1f3f8f 24px 48px, #d9a21b 48px 72px, #4f7a3a 72px 96px);
}
.bday-title { font-size: 24px; color: var(--red); margin: 0; font-variant: small-caps; letter-spacing: .04em; }
.bday-title i { display: block; font-size: 16px; font-variant: normal; color: var(--ink-soft); }
.bday-sub { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; font-style: italic; }
.qotd.bday blockquote { font-size: 18px; }
.qotd.bday::before, .qotd.bday::after {
  content: "\2665"; position: absolute; top: 8px; font-size: 26px; color: var(--red);
  animation: bday-beat 1.4s ease-in-out infinite;
}
.qotd.bday::before { left: 14px; }
.qotd.bday::after { right: 14px; animation-delay: .7s; }
@keyframes bday-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .qotd.bday::before, .qotd.bday::after { animation: none; } }
.wcal-day .cake { position: absolute; left: 50%; bottom: 2px; margin-left: -5px; font-size: 11px; font-style: normal; color: var(--red); }
.wcal-day.sel .cake { color: #f0b3b5; }

/* ---------- easter eggs ---------- */
.phone { cursor: pointer; border-radius: 2px; }
.phone:hover, .phone:focus { background: #fff0b8; }
.phone.ringing { animation: ring-shake .09s linear infinite; display: inline-block; background: #ffe08a; }
@keyframes ring-shake { 0% { transform: translateX(-1px) rotate(-1deg); } 50% { transform: translateX(1px) rotate(1deg); } 100% { transform: translateX(-1px); } }

.w95 {
  position: fixed; z-index: 60; left: 50%; top: 18%; transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px)); background: #c0c0c0; color: #000;
  border: 2px outset #fff; box-shadow: 2px 2px 0 #000, 6px 8px 18px rgba(0,0,0,.25);
  font: 15px/1.45 Georgia, serif;
}
.w95-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff;
  font: bold 13px Tahoma, Verdana, sans-serif; padding: 3px 3px 3px 7px;
}
.w95-bar button {
  font: bold 12px Tahoma, sans-serif; width: 20px; height: 18px; padding: 0; line-height: 14px;
  background: #c0c0c0; color: #000; border: 2px outset #fff; cursor: pointer;
}
.w95-bar button:active { border-style: inset; }
.w95-body { background: #fffdf6; margin: 4px; border: 2px inset #fff; padding: 10px 12px; max-height: 60vh; overflow: auto; }
.w95-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.w95-cols > div + div { border-left: 1px solid #ccc; padding-left: 12px; font-style: italic; }
.w95-cols p { margin: 4px 0 0; }
.w95-link { margin: 10px 0 0; font-size: 14px; text-align: right; }
.w95-small { font-size: 13px; color: #555; margin: 0 0 8px; }
.phone-hello { font-size: 20px; margin: 0 0 2px; color: #000080; }
.phone-hello i { font-size: 15px; color: #444; }
@media (max-width: 560px) { .w95-cols { grid-template-columns: 1fr; } .w95-cols > div + div { border: 0; padding: 0; } }

.heart-drop { position: fixed; top: -60px; z-index: 55; pointer-events: none; animation: heart-fall linear forwards; }
@keyframes heart-fall { to { transform: translateY(115vh) rotate(25deg); } }

.kitty { position: fixed; bottom: 6px; z-index: 58; width: 120px; transition: left 4s linear; pointer-events: none; }
.kitty.calm { transition: none; }
.kitty.walking svg { animation: kitty-bob .35s ease-in-out infinite alternate; }
.kitty.walking .l1 { animation: kitty-step .35s ease-in-out infinite alternate; transform-origin: top; }
.kitty.walking .l2 { animation: kitty-step .35s ease-in-out infinite alternate-reverse; transform-origin: top; }
.kitty .tail { animation: kitty-tail 1.2s ease-in-out infinite alternate; transform-origin: 20px 50px; }
@keyframes kitty-bob { to { transform: translateY(-2px); } }
@keyframes kitty-step { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes kitty-tail { to { transform: rotate(-14deg); } }
.kitty-say {
  position: absolute; bottom: 88px; left: 40px; width: 260px; pointer-events: auto;
  background: #fffdf6; border: 2px solid #3a3a3a; border-radius: 12px; padding: 8px 11px;
  font-size: 14px; line-height: 1.4; box-shadow: 2px 3px 0 rgba(0,0,0,.15);
}
.kitty-say::after { content: ""; position: absolute; bottom: -12px; left: 60px; border: 6px solid transparent; border-top-color: #3a3a3a; }
.kitty-say p { margin: 0 0 4px; }
.kitty-say a { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .kitty *, .kitty svg { animation: none !important; } .heart-drop { display: none; } }

/* the 2003 time machine: a faithful copy of his FrontPage homepage */
body.tm-on { overflow: hidden; }
#tm2003 {
  position: fixed; inset: 0; z-index: 70; overflow: auto; background: #99CCFF; color: #000;
  font-family: Arial, Helvetica, sans-serif; text-align: center; padding: 22px 12px 40px;
}
#tm2003 { padding-top: 0; }
#tm2003 .tm-banner {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 18px; margin: 0 -12px 22px; padding: 10px 14px;
  background: #fffbe0; border-bottom: 3px double #000080; box-shadow: 0 2px 6px rgba(0,0,0,.18);
  font: 17px Georgia, serif; color: #1b1b3a;
}
#tm2003 .tm-banner p { margin: 0; font-weight: bold; }
#tm2003 .tm-banner i { font-weight: normal; }
#tm2003 .tm-back {
  font: bold 16px Tahoma, Verdana, sans-serif; padding: 7px 16px; cursor: pointer; color: #fff;
  background: #9b2226; border: 3px outset #d77a7c; border-radius: 2px;
}
#tm2003 .tm-back i { font-weight: normal; }
#tm2003 .tm-back:hover { background: #b3292e; }
#tm2003 .tm-back:active { border-style: inset; }
.tm-marquee { overflow: hidden; width: min(422px, 90vw); margin: 0 auto 14px; white-space: nowrap; }
.tm-marquee span {
  display: inline-block; font: 900 30px "Arial Black", Arial, sans-serif; color: #0000CC;
  animation: tm-scroll 7s ease-in-out infinite alternate;
}
@keyframes tm-scroll { from { transform: translateX(0); } to { transform: translateX(calc(min(422px, 90vw) - 100%)); } }
.tm-icons { margin: 0 auto; border-collapse: collapse; }
.tm-icons td { padding: 4px 18px; vertical-align: bottom; }
.tm-icons b { color: #3333FF; font-size: 15px; }
.tm-icons img { border: 0; }
#tm2003 hr { max-width: 760px; border: 0; border-top: 2px groove #fff; margin: 16px auto; }
.tm-verse { font-size: 16px; line-height: 1.5; margin: 0 auto; }
.tm-by { font-size: 11px; color: #333; margin-top: 18px; font-style: italic; }
.tm-small { font-size: 11px; color: #334; }
.qotd .qsig { display: block; margin-top: 3px; font-style: italic; }

/* ---------- site-wide language switch (top-right) ---------- */
.topbar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 6px 10px 5px; background: var(--paper-2); border-bottom: 1px solid var(--rule);
}
.langsw { display: flex; align-items: center; gap: 3px; }
.langsw-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
.langsw-label i { text-transform: none; letter-spacing: .02em; }
.langsw button {
  font: inherit; cursor: pointer; color: var(--ink); background: var(--paper);
  padding: 3px 10px 2px; line-height: 1.1; text-align: center; min-width: 56px;
  border: 2px outset var(--bevel-hi); border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.langsw button b { display: block; font-size: 14px; letter-spacing: .04em; }
.langsw button small { display: block; font-size: 10.5px; font-style: italic; color: var(--ink-soft); }
.langsw button:hover { background: var(--hi); }
.langsw button[aria-pressed="true"] {
  background: var(--red); color: #fff; border-style: inset; border-color: #6d171a #d77a7c #d77a7c #6d171a;
}
.langsw button[aria-pressed="true"] small { color: #f3d6d6; }

/* one language only: a single, centred reading column */
html.show-hr .m, html.show-en .m, html.show-hr .lang-bar, html.show-en .lang-bar { grid-template-columns: 1fr; }
html.show-hr .m > .en, html.show-hr .lang-bar span + span { display: none; }
html.show-en .m > .hr, html.show-en .lang-bar span:first-child { display: none; }
html.show-hr .m > div, html.show-en .m > div { border-left: 0; border-top: 0; max-width: 720px; margin: 0 auto; width: 100%; }
html.show-hr .lang-bar span, html.show-en .lang-bar span { max-width: 720px; margin: 0 auto; width: 100%; border: 0 !important; }
html.show-en .poem .m.stanza > .en, html.show-hr .poem .m.stanza > .hr { padding-left: 18px; }

@media (max-width: 760px) {
  .topbar { justify-content: center; padding: 5px 6px; }
  .langsw { width: 100%; }
  .langsw-label { display: none; }
  .langsw button { flex: 1; }
  html.show-both .m > .en { color: var(--ink-soft); border-top: 1px dotted var(--rule); }
}

/* ---------- keyboard focus: one clear, period-friendly ring everywhere ---------- */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
a:focus-visible { outline-style: dotted; outline-width: 2px; background: var(--hi); border-radius: 1px; }
.ng a:focus-visible, .ng-home:focus-visible, .langsw button:focus-visible, .nav-toggle:focus-visible,
.qnav button:focus-visible, .wcal-months button:focus-visible, .yt:focus-visible, .w95-bar button:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px;
}
.langsw button[aria-pressed="true"]:focus-visible, .wcal-months button.on:focus-visible { outline-color: var(--ink); }
.wcal-day:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; z-index: 1; }
.wcal-day.sel:focus-visible { outline-color: var(--red); box-shadow: inset 0 0 0 2px #fff; }
.wcal-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.phone:focus-visible { outline: 2px dotted var(--red); outline-offset: 2px; }
.yt:focus-visible { outline-width: 3px; outline-offset: 3px; }
.w95:focus-visible, .kitty-say:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }
#tm2003:focus-visible { outline: 3px dotted #000080; outline-offset: -3px; }
#tm2003 .tm-back:focus-visible, #tm2003 a:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; background: transparent; }
#tm2003 .tm-back:focus-visible { background: #9b2226; }
/* dialogs focused programmatically to announce them: no ring for mouse users */
.w95:focus:not(:focus-visible), #tm2003:focus:not(:focus-visible), .kitty-say:focus:not(:focus-visible) { outline: none; }

/* ---------- reduced motion: no shaking, falling, walking, scrolling or fading ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .phone.ringing, .tm-marquee span { animation: none !important; }
}

/* one-line headings inside a poem: salutations, speakers, section titles */
.poem .m.stanza.subhead > div { padding-top: 12px; padding-bottom: 2px; }
.poem .m.stanza.subhead .l { font-variant: small-caps; letter-spacing: .06em; font-weight: bold; color: var(--red); text-indent: 0; padding-left: 0; text-transform: lowercase; }
@media (max-width: 760px) {           /* stacked: a name like BALTAZAR needs saying only once */
  html.show-both .poem .m.stanza.subhead.same > .en { display: none; }
}
.phone-note { margin: 2px 0 0; font-size: 13px; font-style: italic; color: var(--ink-soft); opacity: .8; }
.qotd .qnote { display: block; margin-top: 6px; padding-top: 5px; border-top: 1px dotted var(--rule); font-size: 14px; font-style: normal; }

/* ---------- another version of a poem (merged duplicates): a closed <details> under the poem ---------- */
details.variant { margin: 18px 0 6px; border: 1px dashed var(--rule); background: var(--paper-2); }
details.variant > summary { cursor: pointer; padding: 6px 12px; font-size: 15.5px; color: var(--ink-soft); list-style-position: inside; }
details.variant > summary:hover { background: var(--hi); }
details.variant > summary [lang="en"] { display: block; }
details.variant > summary [lang="en"] { font-style: italic; margin-left: 1.1em; }
details.variant > summary b { font-weight: normal; color: var(--ink); }
details.variant[open] > summary { border-bottom: 1px dotted var(--rule); }
details.variant .vlabel { font-size: 14.5px; font-style: italic; color: var(--ink-soft); margin: 4px 0 0; }
html.show-hr details.variant > summary [lang="en"], html.show-en details.variant > summary .vh { display: none; }
html.show-en details.variant > summary [lang="en"] { margin-left: 0; }
.related { font-size: 15px; margin-top: 14px; padding-top: 6px; border-top: 1px dotted var(--rule); }

/* ---------- long category pages: selected poems, jump list, subheadings ---------- */
.picks { border: 3px double var(--red-soft); background: #fffaf0; padding: 4px 8px 8px; margin: 12px 0 14px; }
.picks .kicker { text-align: center; color: var(--red); padding: 4px 0 4px; }
.picks table.index td { border-bottom: 0; }
.jump { font-size: 15px; line-height: 1.9; }
.jump .count, table.index .sg .count { color: var(--ink-soft); font-size: 13.5px; font-weight: normal; }
table.index .sg td + td { font-style: italic; font-weight: normal; }
table.index .sg .sg-top { float: right; font-style: normal; text-decoration: none; padding: 0 2px; }
table.index tr.lost td { color: var(--ink-soft); }
main.moved { max-width: 640px; margin: 40px auto; padding: 16px; }

/* ---------- skip link, screen-reader-only text ---------- */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 80; padding: 6px 12px; font-size: 15px;
  background: var(--paper); color: var(--link); border: 2px outset var(--bevel-hi);
}
.skip:focus { top: 8px; }
main:focus { outline: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- poem lists follow the language switch (one link per poem, see build.py index_row) ---------- */
html.show-hr table.index tr:not(.sg) > td[lang="en"] { display: none; }
html.show-en table.index tr:not(.sg) > td:first-child:not([colspan]) { display: none; }
html.show-en table.index td + td { border-left: 0; }
table.index .letter .sg-top { float: right; font-size: 13px; font-weight: normal; text-decoration: none; }
html.show-hr .t-sep, html.show-hr .t-en, html.show-en .t-sep, html.show-en .t-hr { display: none; }
.letters { position: relative; }

/* ---------- home page: three inviting boxes ---------- */
.discover { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 6px; }
.dbox {
  position: relative; padding: 10px 12px 12px 62px; background: var(--paper-2);
  border: 2px outset var(--bevel-hi); border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.dbox svg { position: absolute; left: 12px; top: 12px; }
.dbox-h { margin: 0 0 4px; font-size: 17px; line-height: 1.25; }
.dbox-h a { font-weight: bold; color: var(--red); text-decoration: none; }
.dbox-h a:hover { text-decoration: underline; }
.dbox-h a::after { content: " \2192"; }
.dbox-h a[lang="en"] { display: block; }
html.show-both .dbox-h a[lang="en"] { font-size: 14px; font-weight: normal; font-style: italic; color: var(--ink-soft); }
html.show-both .dbox-h a[lang="en"]::after { content: none; }
.dbox-t i { display: block; font-size: 14px; color: var(--ink-soft); }
.dbox-t { margin: 0; font-size: 14.5px; line-height: 1.4; }
.dbox-t i { margin-top: 2px; }
.dform { display: flex; gap: 4px; margin: 8px 0 0 -50px; }
.dform input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 3px 7px;
  background: #fffdf6; color: var(--ink); border: 2px inset var(--bevel-lo);
}
.dform button {
  font: inherit; font-size: 14px; padding: 2px 8px; cursor: pointer; color: var(--ink); background: var(--paper);
  border: 2px outset var(--bevel-hi); border-right-color: var(--bevel-lo); border-bottom-color: var(--bevel-lo);
}
.dform button i { font-size: 12px; color: var(--ink-soft); }
.dform button:active { border-style: inset; }
@media (max-width: 760px) {
  .discover { grid-template-columns: 1fr; gap: 8px; }
  .dform { margin-left: 0; }
  .dform input { font-size: 16px; }
}

/* ---------- "Podijelite uspomenu · Share a memory" ---------- */
.memory {
  position: relative; margin: 22px 0 8px; padding: 6px 0 8px 52px;
  background: #fffaf0; border: 2px inset var(--bevel-hi); border-top-color: var(--bevel-lo); border-left-color: var(--bevel-lo);
}
.memory > img { position: absolute; left: 12px; top: 14px; }
.memory h2 { font-size: 20px; margin-top: 4px; }
.memory p { font-size: 15.5px; }
.memory .mem-go { margin: 6px 0 2px; }
.memory .mem-go a { font-weight: bold; }
.memory .mem-go a::before { content: "\2709\00A0"; font-weight: normal; }
.memory .mem-addr { font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 760px) { .vids { padding: 0 4px; } .memory { padding-left: 44px; } .memory > img { left: 6px; width: 28px; height: auto; } }

/* ---------- songs: who recorded it, where it lives ---------- */
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 18px; padding: 0 18px; }
.vids .yt { margin: 8px auto 4px; }
.vcred { text-align: left; max-width: 480px; margin: 0 auto 8px; font-style: normal; }
.vcred b { display: block; font-weight: normal; font-style: italic; color: var(--ink); }
.vcred > span { display: block; overflow-wrap: anywhere; }
.song-rights { font-size: 13.5px; color: var(--ink-soft); font-style: italic; }

/* ---------- gallery: captions wrap in full and follow the language switch ---------- */
.gallery .cap { overflow-wrap: anywhere; hyphens: auto; }
.gallery .cap > span { display: block; }
h1.cap, .h1-en.cap { font-size: 17px; line-height: 1.4; color: var(--ink-soft); margin: 6px 0 4px; }

/* ---------- 404 ---------- */
.qotd.lost { margin-top: 10px; }
.lost-go { text-align: center; margin-top: 12px; }

/* ---------- print: the poem on white paper, nothing else ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; color: #000; }
  body { padding: 0; font: 11.5pt/1.45 Georgia, "Times New Roman", Times, serif; }
  .page { border: 0; box-shadow: none; max-width: none; background: #fff; }
  .skip, .topbar, .langsw, .nav, .nav2, .nav-toggle, .vez, .pager, .lang-bar, .masthead,
  .foot-cols, .foot-bottom, .discover, .memory, .qnav, .wcal, .pform, .pmapwrap, .plegend, .yt-wrap,
  .w95, .kitty, .heart-drop, #tm2003, .bday-banner, .sg-top, noscript { display: none !important; }
  main { padding: 0; }
  .foot { border: 0; background: none; margin-top: 10mm; padding: 0; font-size: 9pt; color: #444; }
  .foot-mem { font-size: 9pt; color: #444; text-align: left; padding: 0; border-top: 1px solid #999; padding-top: 2mm; }
  .foot-mem img { display: none; }
  .foot p.foot-mem small { display: inline; margin: 0; font-size: 9pt; }
  .foot p.foot-mem > span[lang="en"], .foot p.foot-mem small > span[lang="en"] { display: inline; }
  html.show-hr .foot p.foot-mem span[lang="en"] { display: none; }
  .foot p.foot-mem span[lang="en"]::before { content: " · "; font-style: normal; }
  .foot p.foot-mem small::before { content: " — "; }
  html.show-en .foot p.foot-mem span[lang="en"]::before { content: none; }
  a, a:visited, h1, h2, h3, .h1-en, .m > .en, .kicker, .poem-meta, .cap, .signature, .note, .qotd .kicker { color: #000 !important; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; word-break: break-all; }
  .qotd, .picks, .note, details.variant, .qotd.bday { border: 1px solid #999 !important; background: #fff !important; box-shadow: none !important; }
  .poem .m.stanza:hover > div, .poem .m.stanza.lit > div, table.index tr:hover td, .calday.today > div { background: none !important; }
  .m > .en { border-left-color: #999; }
  .m.stanza, .stanza p, .qotd, .calday, figure, table.index tr, .presult, details.variant > summary { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, .h1-en { break-after: avoid; page-break-after: avoid; }
  .portrait, .ill { float: none; text-align: center; }
  .portrait img, .hero .portrait img { max-height: 70mm; }
  details.variant > summary { list-style: none; }
  /* both languages side by side while there is room (A4 portrait fits two ~85 mm columns); one language: one column */
  html.show-both .m { grid-template-columns: 1fr 1fr; }
  html.show-both .m > .en { border-left: 1px solid #999; border-top: 0; color: #000; }
}
@media print and (max-width: 140mm) {      /* narrow paper: stacked */
  html.show-both .m { grid-template-columns: 1fr; }
  html.show-both .m > .en { border-left: 0; border-top: 1px dotted #999; }
}
/* 404: the barefoot centipede and its lost shoe */
.lost-art { margin: 6px auto 0; max-width: 560px; }
.lost-art svg { display: block; width: 100%; height: auto; }

/* ---------- "Izabrane pjesme": the turning frame of selected poems ---------- */
.topc h2 { margin-bottom: 4px; }
.topc-strip {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 4px 10px; margin: 6px 0 4px;
  border-top: 1px dotted var(--rule); border-bottom: 1px dotted var(--rule); scrollbar-width: thin;
}
.topc-chip {
  flex: 0 0 auto; scroll-snap-align: center; white-space: nowrap; font-size: 13.5px; text-decoration: none; color: var(--ink);
  padding: 3px 10px 3px 4px; border: 2px outset var(--bevel-hi); background: var(--paper-2); border-radius: 14px;
}
.topc-chip b {
  display: inline-block; min-width: 20px; height: 20px; line-height: 20px; margin-right: 4px; text-align: center; border-radius: 10px;
  font-size: 11.5px; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--rule);
}
.topc-chip .t-en { display: none; font-style: italic; }
html.show-en .topc-chip .t-hr { display: none; }
html.show-en .topc-chip .t-en { display: inline; }
.topc-chip:hover { background: var(--hi); }
.topc-chip.cur { background: var(--red); color: #fff; border-style: inset; border-color: #6d171a #d77a7c #d77a7c #6d171a; }
.topc-chip.cur b { background: #fff; color: var(--red); border-color: #fff; }
.topc-frame { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 6px; }
.topc-slides { min-height: 12em; padding: 6px 0 10px; border: 3px ridge var(--bevel-lo); background: #fffdf6; box-shadow: 3px 4px 0 rgba(90, 70, 40, .12); }
.topc-slide h3 { margin: 2px 0 8px; font-size: 22px; font-weight: normal; }
.topc-slide h3 a { color: var(--red); text-decoration: none; }
.topc-slide h3 a:hover { text-decoration: underline; }
.topc-slide blockquote { margin: 0 0 10px; font-style: italic; font-size: 18px; line-height: 1.6; }
.topc-tag { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.topc-go { margin: 0; font-size: 14.5px; }
.topc-prev, .topc-next {
  height: 64px; font-size: 34px; line-height: 1; color: var(--red); background: var(--paper-2); cursor: pointer;
  border: 2px outset var(--bevel-hi);
}
.topc-prev:active, .topc-next:active { border-style: inset; }
.topc-count { text-align: center; margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
/* without JS: no arrows, every poem listed one after another */
.topc:not(.on) .topc-prev, .topc:not(.on) .topc-next, .topc:not(.on) .topc-count { display: none; }
.topc:not(.on) .topc-frame { display: block; }
.topc:not(.on) .topc-slide + .topc-slide { border-top: 1px dotted var(--rule); }
@media (max-width: 760px) {
  .topc-frame { grid-template-columns: 30px 1fr 30px; gap: 3px; }
  .topc-prev, .topc-next { height: 52px; font-size: 26px; }
  .topc-slide blockquote { font-size: 16.5px; }
}
@media print { .topc-strip, .topc-prev, .topc-next, .topc-count { display: none; } .topc-slide[hidden] { display: block !important; } }
.topc.mini .topc-slides { min-height: 10em; }
.topc.mini .topc-count a { font-size: 14px; }

.topc-slide .m.stanza > div { padding-top: 5px; padding-bottom: 7px; }

/* ---------- Životna priča: photos between the paragraphs ---------- */
.story-sub { margin: 0 0 4px; font-style: italic; font-size: 18px; color: var(--ink-soft); }
.story-fig { max-width: 460px; margin: 10px auto 16px; text-align: center; }
.story-fig img { max-width: 100%; height: auto; border: 3px ridge var(--bevel-lo); background: #fffdf6; padding: 4px; box-shadow: 3px 4px 0 rgba(90, 70, 40, .12); }
.story-fig .cap { margin-top: 4px; }

/* ---------- one language means one language everywhere ----------
   Every UI string sits in an element marked lang="hr" or lang="en" (tools/build.py, and the scripts for what they
   build). A single-language mode hides every element of the other language; .t-sep (the " · ", " / " or line break
   between the two versions) is shown only when both are; .solo is a version shown only in its own single mode
   (both-mode shows the Croatian alone there). .keep-lang: the 2003 replica, shown as it was in every mode. */
html.show-hr body [lang="en"]:not(.keep-lang), html.show-en body [lang="hr"]:not(.keep-lang) { display: none !important; }
html.show-hr .t-sep, html.show-en .t-sep { display: none !important; }
html.show-both .solo { display: none !important; }
/* the English half of a pair is styled as the quieter second line; alone, it takes the main look */
html.show-en .ng a small, html.show-en .ng-home small { font-size: inherit; font-style: normal; color: inherit; }
html.show-en .ng-label i, html.show-en .langsw-label i { font-style: normal; text-transform: uppercase; letter-spacing: .12em; opacity: 1; }
html.show-en .langsw-label i { letter-spacing: .1em; }
html.show-en .nav-toggle i { font-size: inherit; font-style: normal; color: inherit; }
html.show-en .foot [lang="en"] { font-style: normal; }
html.show-en .foot h2 i { text-transform: uppercase; letter-spacing: .08em; font-weight: bold; color: var(--red); }
html.show-en .qotd .qd-date i { font-style: normal; color: var(--ink); }
html.show-en .qotd .qd-occ i { color: var(--red); }
html.show-en .bday-title i { display: inline; font-size: inherit; font-style: normal; font-variant: small-caps; color: var(--red); }
html.show-en .wcal-months button small { font-size: 12.5px; font-style: normal; color: inherit; }
html.show-en .wcal-dow span small { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
html.show-en .wcal-title { display: flex; justify-content: center; align-items: baseline; gap: .3em; }
html.show-en .wcal-title small { order: -1; font-size: inherit; font-style: normal; font-variant: small-caps; letter-spacing: .06em; opacity: 1; }
html.show-en .dbox-t i, html.show-en .dform button i, html.show-en .pchips button i, html.show-en .plegend i,
html.show-en .phone-hello i { font-size: inherit; font-style: normal; color: inherit; }
html.show-en #tm2003 .tm-banner i, html.show-en #tm2003 .tm-back i { font-weight: bold; font-style: normal; }
html.show-hr .w95-cols, html.show-en .w95-cols { grid-template-columns: 1fr; }
html.show-hr .w95-cols > div + div, html.show-en .w95-cols > div + div { border-left: 0; padding-left: 0; font-style: normal; }
html.show-en #pmap .reg-en { font-size: 20px; font-weight: bold; fill: #4a3b2c; }
@media (max-width: 760px) { html.show-en #pmap .reg-en { font-size: 26px; } }