/* A journal of sorts, in the Czechoslovak Brussels style (Expo 58 and after): teak, mustard,
   brick and petrol on cream walls, kidney shapes and tapered legs. Blogger widgets still inside. */

:root {
  color-scheme: light;
  --wall: #eadcc0;
  --paper: #fbf6ea;
  --ink: #23201c;
  --muted: #7d7365;
  --rule: #ddd0b4;
  --teak: #a0612b;
  --teak-dark: #6d3f1c;
  --mustard: #e3a92b;
  --brick: #c8412b;
  --teal: #2f6f73;
  --navy: #26355a;
  --cream: #f6f1e6;
  --brass: #c9a24a;
  /* colours used as backgrounds (doors, buttons, tabs) stay the same in the evening */
  --teal-fill: #2f6f73;
  --brick-fill: #c8412b;
  --line: #23201c;      /* the black lines of the furniture, the same in both modes */
  --tint: #f3e8cf;      /* quote, footer and code backgrounds */
  --scene-wall: #efe3c8;
  /* type: one font per role (the dev-only font lab changes these) */
  --font-title: "Caprasimo", Georgia, serif;
  --font-heading: "Abril Fatface", Georgia, serif;
  --font-body: "Libron", Georgia, serif;
  --font-label: "Libron", Georgia, serif;   /* in small caps */
  --size-body: 16px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1l3 16 16 3-16 3-3 16-3-16-16-3 16-3z' fill='%23e3a92b'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23c8412b'/%3E%3C/svg%3E");
}

/* Evening: pull the lamp's cord (or have a dark system setting) and the room goes dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --wall: #2c241e;
  --paper: #2b2520;
  --ink: #eee3cc;
  --muted: #a8998a;
  --rule: #4d4339;
  --brick: #e46d52;
  --teal: #62b3b1;
  --tint: #3a3129;
  --scene-wall: #3d342c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 36px 16px 96px;
  /* ogee damask wallpaper, like in a Czechoslovak flat; one tile is drawn in wallpaper.svg */
  background: var(--grain), url("wallpaper.svg") 0 0 / 90px 126px, var(--wall);
  color: var(--ink);
  font: var(--size-body)/1.65 var(--font-body);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--grain), url("wallpaper-dark.svg") 0 0 / 90px 126px, #2c241e;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
:root[data-theme="dark"] body::before { opacity: 1; }

/* everything else fades between day and evening too */
#page, .post-footer, blockquote, .status-msg, .post-body code, .avatar, .brand h1 a, .post-title a {
  transition: background-color 0.8s ease, color 0.8s ease;
}
body { transition: color 0.8s ease; }

a { color: var(--brick); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

/* The page is a teak sideboard, standing on tapered legs with brass feet. */
#page {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  background: var(--grain), var(--paper);
  border: 8px solid var(--teak);
  border-width: 14px 8px;
  border-radius: 4px;
  box-shadow: 0 18px 30px -18px rgba(60, 35, 10, 0.55);
}
#page::before, #page::after {
  content: "";
  position: absolute;
  bottom: -62px;
  width: 18px;
  height: 48px;
  background: linear-gradient(var(--teak-dark) 82%, var(--brass) 82%);
}
#page::before { left: 48px; clip-path: polygon(30% 0, 100% 0, 34% 100%, 0 100%); }
#page::after { right: 48px; clip-path: polygon(0 0, 70% 0, 100% 100%, 66% 100%); }

/* ---------- masthead ---------- */

#masthead {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-bottom: 3px solid var(--line);
}
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
#masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  pointer-events: none;
}

.brand { position: absolute; left: 40px; top: 26px; z-index: 1; }
.brand h1 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 54px;
  font-weight: normal;
  line-height: 1;
}
.brand h1 a { color: var(--ink); text-decoration: none; }
.brand h1 a:hover { color: var(--brick); }
.brand p { margin: 8px 0 0 2px; font: italic 16px var(--font-label); color: var(--teal); }

/* ---------- the table lamp: the switch for evening mode ---------- */

.lamp-layer { pointer-events: none; }
.table-lamp { pointer-events: all; cursor: pointer; outline: none; }
.table-lamp .shade, .table-lamp .shade-top, .table-lamp .underside { transition: fill 0.4s ease; }
.table-lamp:focus-visible .shade { stroke: var(--brass); stroke-width: 2.5; }
.cord { transform-box: fill-box; transition: transform 0.2s ease; }
.table-lamp:hover .cord { transform: translateY(2px); }
.table-lamp.pull .cord { animation: tug 0.4s ease; }
@keyframes tug {
  40% { transform: translateY(6px); }
}

/* the light brightens what it falls on, rather than laying a haze over it */
.lamp-light { opacity: 0; mix-blend-mode: screen; transition: opacity 0.6s ease 0.15s; }
/* the darkness and the light are see-through to the mouse, so the cat underneath can still be hovered */
.night, .lamp-light { pointer-events: none; }
.night { opacity: 0; transition: opacity 0.8s ease; }

:root[data-theme="dark"] .night { opacity: 0.58; }
:root[data-theme="dark"] .lamp-light { opacity: 1; }
:root[data-theme="dark"] .table-lamp .shade { fill: #ff5a37; }
:root[data-theme="dark"] .table-lamp .shade-top { fill: #ff8b6b; }
:root[data-theme="dark"] .table-lamp .underside { fill: #fff2c6; }

/* ---------- the cat: asleep in the lamplight, wakes when you hover ---------- */

.cat { pointer-events: all; }
.cat__body, .cat__head, .cat__eyes-open, .cat__tail-tip, .cat__zzz text { transform-box: fill-box; }

/* asleep: breathing, head down on its paws, z's drifting up */
.cat__body { transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.06); } }

.cat__head {
  transform-origin: 85% 85%;
  transform: rotate(-14deg) translateY(4px);
  transition: transform 1.1s ease-in-out;
}
.cat__eyes-open { opacity: 0; transform-origin: 50% 50%; transform: scaleY(0.1); transition: opacity 0.3s, transform 0.3s; }
.cat__eyes-shut { transition: opacity 0.3s; }

.cat__zzz { transition: opacity 0.3s; }
.cat__zzz text { font: bold 7px Georgia, serif; opacity: 0; animation: zzz 3.6s ease-out infinite; }
.cat__zzz text:nth-child(2) { animation-delay: 1.2s; }
.cat__zzz text:nth-child(3) { animation-delay: 2.4s; }
@keyframes zzz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-8px, -18px) scale(1.25); }
}

.cat__tail-tip { transform-origin: 100% 100%; }

/* awake: the head springs up, then the eyes open, the z's go and the tail starts to flick */
.cat:hover .cat__head, .cat.awake .cat__head {
  transform: rotate(8deg) translateY(-5px);  /* a curious head tilt */
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.cat:hover .cat__eyes-open, .cat.awake .cat__eyes-open { opacity: 1; transform: scaleY(1); transition-delay: 0.3s; }
.cat:hover .cat__eyes-shut, .cat.awake .cat__eyes-shut { opacity: 0; transition-delay: 0.3s; }
.cat:hover .cat__zzz, .cat.awake .cat__zzz { opacity: 0; }
.cat:hover .cat__tail-tip, .cat.awake .cat__tail-tip { animation: flick 1s ease-in-out 0.4s infinite; }
@keyframes flick { 50% { transform: rotate(-28deg); } }

/* ---------- nav: sideboard doors ---------- */

#nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 3px solid var(--line);
  font-family: var(--font-label);
}
#nav span { display: none; }
#nav a {
  position: relative;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 17px;
  color: var(--line);
  border-left: 3px solid var(--line);
}
#nav a:first-of-type { border-left: 0; }
#nav a:nth-of-type(1) { background: var(--mustard); }
#nav a:nth-of-type(2) { background: var(--cream); }
#nav a:nth-of-type(3) { background: var(--brick-fill); color: var(--cream); }
#nav a:nth-of-type(4) { background: var(--teal-fill); color: var(--cream); }
/* a little knob on each door */
#nav a::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--line);
}
#nav a:hover { filter: brightness(1.07); }
:root[data-theme="dark"] #nav a { filter: brightness(0.85); }
:root[data-theme="dark"] #nav a:hover { filter: brightness(0.95); }
#nav a.on { box-shadow: inset 0 -5px 0 rgba(35, 32, 28, 0.35); }

/* ---------- body ---------- */

#body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 48px;
  padding: 34px 40px 20px;
}

.date-header {
  margin: 0 0 6px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.date-header span::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 5px;
  margin: 0 10px 3px 0;
  border-radius: 3px;
  background: var(--mustard);
  vertical-align: middle;
}

.post { margin-bottom: 8px; }
.post-title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: normal;
  line-height: 1.12;
}
.post-title a { color: var(--ink); text-decoration: none; }
.post-title a:hover { color: var(--brick); }

/* contain the floated drop cap, even on a one-line post */
.post-body { display: flow-root; }
.post-body > :first-child { margin-top: 0; }

.post-body h2 {
  clear: both;
  margin: 30px 0 8px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: normal;
  line-height: 1.2;
}
.post-body h3 {
  margin: 24px 0 6px;
  font-family: var(--font-label);
  font-size: 16px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.post-body img { max-width: 100%; height: auto; border: 3px solid var(--line); }
.post-body code { font-size: 0.88em; background: var(--tint); padding: 1px 5px; border-radius: 3px; }
.post-body pre { overflow-x: auto; padding: 14px 18px; background: var(--line); color: var(--cream); border-radius: 4px; }
.post-body pre code { padding: 0; background: none; color: inherit; }

/* drop cap in a brick-red block */
.post-body > p:first-child::first-letter {
  float: left;
  margin: 5px 10px 0 0;
  padding: 6px 10px 6px;
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1;
  color: var(--cream);
  background: var(--brick-fill);
  border-radius: 4px;
}

blockquote {
  margin: 24px 0;
  padding: 14px 22px;
  border-left: 8px solid var(--mustard);
  border-radius: 0 6px 6px 0;
  background: var(--tint);
  font-size: 20px;
  font-style: italic;
  line-height: 1.45;
}
blockquote p { margin: 0; }
blockquote p + p { margin-top: 6px; }
blockquote cite { font-family: var(--font-label); font-size: 14px; font-style: normal; font-variant: small-caps; letter-spacing: 0.06em; color: var(--muted); }

.jump-link { margin: 6px 0 0; }
.jump-link a, .post-body .button {
  display: inline-block;
  padding: 3px 16px 4px;
  border-radius: 999px;
  background: var(--teal-fill);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
.jump-link a:hover, .post-body .button:hover { background: var(--brick-fill); color: var(--cream); }

/* "Posted by ... Labels: ..." */
.post-footer {
  margin: 18px 0 0;
  padding: 8px 14px;
  border-left: 6px solid var(--teak);
  border-radius: 0 4px 4px 0;
  background: var(--tint);
  font-family: var(--font-label);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

/* an atomic star between posts */
.fleuron {
  height: 26px;
  margin: 22px 0;
  font-size: 0;
  background: var(--star) center / 26px no-repeat;
}

/* Newer Posts / Home / Older Posts */
.blog-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  margin: 40px 0 10px;
  padding-top: 14px;
  border-top: 3px solid var(--rule);
  font-family: var(--font-label);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
.blog-pager span:last-child { text-align: right; }

.status-msg {
  margin: 0 0 26px;
  padding: 8px 14px;
  border-left: 6px solid var(--mustard);
  background: var(--tint);
  font-size: 15px;
}

/* ---------- sidebar ---------- */

.widget { margin-bottom: 30px; font-size: 15px; }
/* headings are pill-shaped tabs in the four sideboard colours */
.widget h3 {
  width: fit-content;
  margin: 0 0 10px;
  padding: 2px 18px 3px 10px;
  border-radius: 0 999px 999px 0;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--cream);
  background: var(--teal-fill);
}
.widget:nth-child(4n + 1) h3 { background: var(--mustard); color: var(--line); }
.widget:nth-child(4n + 2) h3 { background: var(--teal-fill); }
.widget:nth-child(4n + 3) h3 { background: var(--brick-fill); }
.widget:nth-child(4n + 4) h3 { background: var(--navy); }
.widget p { margin: 0 0 6px; }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { padding: 2px 0; }
.bullets li::before { content: "\2726\00a0"; color: var(--mustard); font-size: 0.8em; }
.widget small { color: var(--muted); }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }

/* "About Me": a round portrait in a teak frame */
.avatar {
  float: left;
  width: 66px;
  height: 66px;
  margin: 2px 12px 4px 0;
  border: 3px solid var(--teak);
  border-radius: 50%;
  object-fit: cover;
}
/* the same, larger, on the About page */
.post-body .portrait {
  float: right;
  width: 160px;
  height: 160px;
  margin: 4px 0 12px 24px;
  border: 5px solid var(--teak);
  border-radius: 50%;
  object-fit: cover;
}
.profile::after { content: ""; display: block; clear: both; }

/* Blog Archive tree: ▼ 2026 (2) ▼ October (1) */
.archive summary {
  cursor: pointer;
  list-style: none;
}
.archive summary::-webkit-details-marker { display: none; }
.archive summary::before {
  content: "\25BA";
  display: inline-block;
  width: 16px;
  font-size: 9px;
  color: var(--brick);
}
.archive details[open] > summary::before { content: "\25BC"; }
.archive ul { padding-left: 16px; }
.archive .titles li::before { content: "\00bb\00a0"; color: var(--rule); }

/* ---------- footer: a strip of mosaic tiles ---------- */

footer {
  padding: 30px 40px 26px;
  background:
    repeating-linear-gradient(90deg, var(--mustard) 0 32px, var(--brick) 32px 64px, var(--teal) 64px 96px, var(--navy) 96px 128px, var(--cream) 128px 160px)
    top / 100% 12px no-repeat;
  border-top: 3px solid var(--line);
  font-family: var(--font-label);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 760px) {
  body { padding: 0; }
  #page { border-width: 10px 0; border-radius: 0; }
  #page::before, #page::after { display: none; }
  #masthead { height: 250px; background: var(--scene-wall); transition: background-color 0.8s ease; }
  .scene { top: auto; height: 180px; }
  .brand { left: 16px; top: 18px; }
  .brand h1 { font-size: 38px; }
  #nav { grid-template-columns: repeat(2, 1fr); }
  #nav a:nth-of-type(3) { border-left: 0; }
  #nav a:nth-of-type(n + 3) { border-top: 3px solid var(--line); }
  footer { padding-left: 16px; padding-right: 16px; }
  #body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 16px 8px; }
  .post-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .table-lamp.pull .cord { animation: none; }
  .cat__body, .cat:hover .cat__tail-tip, .cat.awake .cat__tail-tip { animation: none; }
  .cat__zzz { display: none; }
  .cat__head, .cat__eyes-open, .cat__eyes-shut { transition: none !important; }
  body::before, .night, .lamp-light { transition: none; }
}