/* Trollspel workshop log — shared by /log/, /about/ and /desk/.
   Tokens follow the Trollspel design system; fonts are the same files
   style.css uses for the landing page. */

@font-face {
  font-family: "Garamontio";
  src: url("/Fonts/garamontio/variable/garamontio.woff2") format("woff2-variations"),
       url("/Fonts/garamontio/variable/garamontio.woff2") format("woff2"),
       url("/Fonts/garamontio/variable/garamontio.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garamontio";
  src: url("/Fonts/garamontio/variable/garamontio_it.woff2") format("woff2-variations"),
       url("/Fonts/garamontio/variable/garamontio_it.woff2") format("woff2"),
       url("/Fonts/garamontio/variable/garamontio_it.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face { font-family: "JetBrains Mono"; src: url("/Fonts/jetbrains-mono/webfonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/Fonts/jetbrains-mono/webfonts/JetBrainsMono-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face {
  font-family: "Garamontio Capo";
  src: url("/Fonts/garamontio_capo/font/Garamontio Capo.woff2") format("woff2"),
       url("/Fonts/garamontio_capo/font/Garamontio Capo.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --night-0: #000000; --night-1: #0d0b09; --night-2: #171411; --night-3: #24201b; --night-4: #3a342d;
  --chalk-0: #f2ede4; --chalk-1: #d6cfc3; --chalk-2: #aaa397; --chalk-3: #7d776d;
  --rye: #d9b56a; --moss: #8e9a5b; --ember: #e08a4a; --frost: #b7c8cc; --lingon: #c4503b; --heather: #a88aa6;
  --rye-deep: #a8833c; --moss-deep: #4f5a33; --ember-deep: #a5532a; --frost-deep: #6f8a91; --lingon-deep: #8a2f22;
  /* Tag dots — swapped for the deep tones on paper. */
  --dot-rye: var(--rye); --dot-moss: var(--moss); --dot-ember: var(--ember); --dot-frost: var(--frost);
  --dot-lingon: var(--lingon); --dot-heather: var(--heather);

  --bg-page: var(--night-0); --bg-raised: var(--night-1); --bg-sunken: var(--night-2); --bg-hover: var(--night-3);
  --text-body: var(--chalk-0); --text-muted: var(--chalk-2); --text-faint: var(--chalk-3); --text-inverse: var(--night-0);
  --line: var(--chalk-0); --line-soft: rgba(242, 237, 228, .22); --line-faint: rgba(242, 237, 228, .1);
  --link-hover: var(--rye); --focus-ring: var(--rye);
  --surface-overlay: rgba(0, 0, 0, .72);

  --font-body: "Garamontio", "EB Garamond", Garamond, serif;
  --font-capo: "Garamontio Capo", "Garamontio", serif;
  --fs-display: 64px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-lead: 22px;
  --fs-body: 19px; --fs-small: 16px; --fs-caption: 14px; --fs-label: 13px;
  --lh-body: 1.62; --tracking-label: .14em; --measure: 34em;

  --ease-drift: cubic-bezier(.33, 0, .2, 1);
  --dur-quick: 160ms; --dur-calm: 420ms;
  --content-max: 680px; --page-max: 1120px;

  /* Line drawings (troll, wordmark) are painted in the text's own ink. */
  --line-art: var(--text-body);
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Code colours — the nature tones, one set per look (below). */
  --code-key: #c9a862; --code-str: #98a265; --code-num: #a9b9bd; --code-fn: #cf8247; --code-type: #9d819b; --code-at: #ca6551;
}

/* Morgon: morning paper and bark ink. */
[data-theme="morgon"] {
  --bg-page: #f4eee3; --bg-raised: #ebe3d4; --bg-sunken: #dcd2bf; --bg-hover: #dcd2bf;
  --text-body: #1c1814; --text-muted: #4a4239; --text-faint: #7a7063; --text-inverse: #f4eee3;
  --line: #1c1814; --line-soft: rgba(28, 24, 20, .24); --line-faint: rgba(28, 24, 20, .1);
  --link-hover: var(--ember-deep); --focus-ring: var(--ember-deep);
  --surface-overlay: rgba(28, 24, 20, .5);
  --dot-rye: var(--rye-deep); --dot-moss: var(--moss-deep); --dot-ember: var(--ember-deep); --dot-frost: var(--frost-deep);
  --dot-lingon: var(--lingon-deep); --dot-heather: #7d5f7b;
  --code-key: #6c5220; --code-str: #4a5530; --code-num: #3a5157; --code-fn: #84431f; --code-type: #654a63; --code-at: #822c20;
  color-scheme: light;
}

/* Contrast: soft (the default) or sharp, on top of Natt/Morgon — four looks.
   Every property a Natt rule sets is set again in the matching Morgon rule,
   which is the more specific one. */
/* Natt · soft — "hearth": a warm, ember-tinted dark */
[data-contrast="soft"] {
  --bg-page: #17110c; --bg-raised: #201812; --bg-sunken: #281e17; --bg-hover: #30251c;
  --text-body: #d9ccb8; --text-muted: #aea28f; --text-faint: #908473;
  --line: #d9ccb8; --line-soft: rgba(217,204,184,.21); --line-faint: rgba(217,204,184,.095);
  --link-hover: #c9a862; --focus-ring: #c9a862;
  --dot-rye: #c9a862; --dot-moss: #879258; --dot-ember: #cf8247; --dot-frost: #a9b9bd; --dot-lingon: #b9533f; --dot-heather: #9d819b;
  --code-key: #c9a862; --code-str: #98a265; --code-num: #a9b9bd; --code-fn: #cf8247; --code-type: #9d819b; --code-at: #ca6551;
}
/* Morgon · soft — old paper: yellowed, quiet ink */
[data-theme="morgon"][data-contrast="soft"] {
  --bg-page: #ece3cf; --bg-raised: #e3d8c0; --bg-sunken: #d6c8ab; --bg-hover: #d6c8ab;
  --text-body: #3b342c; --text-muted: #5d5449; --text-faint: #675d51;
  --line: #3b342c; --line-soft: rgba(59,52,44,.19); --line-faint: rgba(59,52,44,.085);
  --link-hover: #924b26; --focus-ring: #924b26;
  --dot-rye: #a8833c; --dot-moss: #4f5a33; --dot-ember: #a5532a; --dot-frost: #6f8a91; --dot-lingon: #8a2f22; --dot-heather: #7d5f7b;
  --code-key: #6c5220; --code-str: #4a5530; --code-num: #3a5157; --code-fn: #84431f; --code-type: #654a63; --code-at: #822c20;
}
/* Natt · sharp */
[data-contrast="sharp"] {
  --text-body: #ffffff; --text-muted: #e4ded3; --text-faint: #bdb6aa;
  --line: #ffffff; --line-soft: rgba(255,255,255,.46); --line-faint: rgba(255,255,255,.26);
  --link-hover: #f0c978; --focus-ring: #f0c978;
  --dot-rye: #f0c978; --dot-moss: #b3c07a; --dot-ember: #f3a066; --dot-frost: #d6e4e7; --dot-lingon: #e8735c; --dot-heather: #c9a9c7;
  --bg-raised: #14110e;
  --code-key: #f0c978; --code-str: #b9c47f; --code-num: #d6e4e7; --code-fn: #f3a066; --code-type: #c9a9c7; --code-at: #e8735c;
}
/* Morgon · sharp */
[data-theme="morgon"][data-contrast="sharp"] {
  --bg-page: #fbf8f2; --bg-raised: #efe8db; --bg-sunken: #e2d8c5; --bg-hover: #e2d8c5;
  --text-body: #000000; --text-muted: #2a241e; --text-faint: #463e35;
  --line: #000000; --line-soft: rgba(0,0,0,.5); --line-faint: rgba(0,0,0,.28);
  --link-hover: #7f3a18; --focus-ring: #7f3a18;
  --dot-rye: #7a5c22; --dot-moss: #3d4727; --dot-ember: #7f3a18; --dot-frost: #3e565c; --dot-lingon: #6e2419; --dot-heather: #5e4560;
  --code-key: #5e4515; --code-str: #2f3a1c; --code-num: #2c4247; --code-fn: #6e3012; --code-type: #4e3650; --code-at: #5e1b12;
}

/* Line drawings are a mask painted in the theme's ink, so they follow every
   look exactly. Photos, pixel art and clips are never recoloured. */
.line-art {
  display: block;
  background-color: var(--line-art);
  -webkit-mask: var(--art) center / contain no-repeat;
          mask: var(--art) center / contain no-repeat;
  transition: background-color var(--dur-calm, 420ms) var(--ease-drift, ease);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
html { background: var(--bg-page); color-scheme: dark; }
[data-theme="morgon"] { color-scheme: light; }
/* Only the page itself fades between themes. */
html.theme-switching { transition: background-color var(--dur-calm) var(--ease-drift), color var(--dur-calm) var(--ease-drift); }
body { background: transparent; }
a {
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--line-soft);
  transition: color var(--dur-quick) var(--ease-drift), text-decoration-color var(--dur-quick) var(--ease-drift);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
::selection { background: var(--rye); color: #000; }
:focus-visible { outline: 1.5px solid var(--focus-ring); outline-offset: 3px; }
h1, h2, h3 { font-style: italic; font-weight: 400; line-height: 1.2; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shell ---------- */
.shell { max-width: var(--content-max); margin: 0 auto; padding: 0 24px 96px; }
.shell--wide { max-width: var(--page-max); padding-bottom: 120px; }
.page { animation: drift var(--dur-calm) var(--ease-drift) both; }
@keyframes drift { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .page { animation: none; } }

/* Room on the right for the fixed theme toggle. */
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 52px 20px 0; }
.site-nav__home { display: flex; align-items: center; text-decoration: none; }
.site-nav__mark { --art: url("/assets/wordmark-trollspel.png"); height: 40px; width: auto; aspect-ratio: 455 / 150; }
.site-nav__links { display: flex; align-items: center; gap: 28px; }
.site-nav__links a { font-size: 18px; font-style: italic; color: var(--text-muted); text-decoration: none; }
.site-nav__links a:hover { color: var(--link-hover); }
.site-nav__links a[aria-current] { color: var(--text-body); text-decoration: underline; text-decoration-color: var(--rye); }

.theme-toggle, .contrast-toggle {
  position: fixed; top: 20px; right: 20px; z-index: 50;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-quick) var(--ease-drift);
}
/* Contrast sits directly under the sun/moon. */
.contrast-toggle { top: 64px; }
.theme-toggle .icon, .contrast-toggle .icon { width: 20px; height: 20px; }
.theme-toggle:hover, .contrast-toggle:hover { color: var(--link-hover); }
.theme-toggle:focus-visible, .contrast-toggle:focus-visible { outline: 1.5px solid var(--focus-ring); outline-offset: 3px; }
html:not(.js) .theme-toggle, html:not(.js) .contrast-toggle { display: none; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--text-body);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; font-size: 18px;
  transition: color var(--dur-quick) var(--ease-drift), border-color var(--dur-quick) var(--ease-drift);
}
.icon-btn:hover { color: var(--link-hover); border-color: var(--link-hover); }
.icon-btn:disabled { opacity: .35; cursor: default; color: var(--text-body); border-color: var(--line); }

/* ---------- type helpers ---------- */
.label { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); line-height: 1.5; }
.label--faint { color: var(--text-faint); }
.label--body { color: var(--text-body); }
.muted { color: var(--text-muted); }
.plain-link { color: inherit; text-decoration: none; }
.warm { transition: color var(--dur-quick) var(--ease-drift); }
.warm:hover, a:hover .warm, a:hover.warm { color: var(--link-hover); }

/* ---------- primitives ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px 4px; border-radius: 999px; border: 1px solid var(--line-soft);
  color: var(--text-muted); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; line-height: 1.3; white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-muted); }
.dot--rye { background: var(--dot-rye); } .dot--moss { background: var(--dot-moss); } .dot--ember { background: var(--dot-ember); }
.dot--frost { background: var(--dot-frost); } .dot--lingon { background: var(--dot-lingon); } .dot--heather { background: var(--dot-heather); }

/* Filter chips — single choice, shown only with JS. */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 24px; }
html:not(.js) .chips { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 4px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: transparent; color: var(--text-muted); cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.3;
  transition: color var(--dur-quick) var(--ease-drift), border-color var(--dur-quick) var(--ease-drift);
}
.chip:hover { color: var(--link-hover); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { border: 1.5px solid var(--line); padding: 2.5px 10.5px 3.5px; background: var(--bg-raised); color: var(--text-body); }
.chip__count { letter-spacing: 0; color: var(--text-faint); }
/* Would show nothing: stays in place, so nothing jumps. */
.chip[aria-disabled="true"] { opacity: .4; cursor: default; }
.chip[aria-disabled="true"]:hover { color: var(--text-muted); }
/* /log/: kinds | tags | statuses in one wrapping row. */
.chips__group { display: contents; }
.chips__sep { width: 1px; height: 18px; background: var(--line-soft); align-self: center; margin: 0 4px; }
.filters-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.filters-empty .empty { margin-top: 0; }
/* Where a project stands: an italic word pencilled on, not a pill. */
.status-mark { display: inline-flex; align-items: center; gap: 7px; font-style: italic; font-size: 16px; color: var(--text-muted); }
.is-filtered-in { animation: fade var(--dur-quick) var(--ease-drift); }
@keyframes fade { from { opacity: 0; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none;
  padding: 9px 20px; font-family: var(--font-body); font-size: 17px; line-height: 1.2;
  border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: background var(--dur-quick) var(--ease-drift), color var(--dur-quick) var(--ease-drift), border-color var(--dur-quick) var(--ease-drift);
}
.btn--sm { padding: 6px 14px; font-size: 15px; }
.btn--primary { background: var(--text-body); color: var(--text-inverse); border: 1.5px solid var(--text-body); }
.btn--primary:hover { background: var(--rye); border-color: var(--rye); color: var(--text-inverse); }
.btn--secondary { background: transparent; color: var(--text-body); border: 1.5px solid var(--line); }
.btn--secondary:hover { background: var(--bg-hover); color: var(--text-body); }
.btn--ghost {
  background: transparent; color: var(--text-body); border: 1.5px solid transparent;
  font-style: italic; padding: 9px 4px; text-decoration: none; text-underline-offset: .2em;
}
.btn--ghost:hover { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 1px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn--primary:disabled { background: var(--text-body); border-color: var(--text-body); }
.btn--secondary:disabled { background: transparent; }
.btn--ghost:disabled { color: var(--text-body); text-decoration: none; }

.card { display: block; border: 1px solid var(--line-faint); border-radius: 2px; padding: 24px; background: transparent; }
.card--link {
  padding: 20px; color: inherit; text-decoration: none;
  transition: all var(--dur-calm) var(--ease-drift);
}
.card--link:hover { border-color: var(--line-soft); background: var(--bg-raised); color: inherit; }

.tabs { display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px solid var(--line-faint); }
.tab {
  background: none; border: 0; border-bottom: 1.5px solid transparent; padding: 8px 0 10px; margin-bottom: -1px;
  cursor: pointer; font-family: var(--font-body); font-style: italic; font-size: 19px; line-height: var(--lh-body);
  color: var(--text-faint); text-decoration: none; transition: color var(--dur-quick);
}
.tab:hover { color: var(--text-body); }
.tab[aria-selected="true"] { color: var(--text-body); border-bottom-color: var(--rye); }
.tab__count { font-style: normal; font-size: 13px; margin-left: 6px; color: var(--text-faint); }

/* Pictures are never cropped or upscaled: natural size, centred, at most the column. */
.figure { margin: 32px 0; }
.figure--flush { margin: 0; }
.figure > img, .figure > video { display: block; max-width: 100%; height: auto; margin: 0 auto; }
img.is-pixel, video.is-pixel { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.figure figcaption, .caption { margin-top: 10px; font-style: italic; font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }
.caption { margin-top: 0; }
.placeholder {
  aspect-ratio: 3 / 2; border: 1px dashed var(--line-soft); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px; color: var(--text-faint); font-style: italic; font-size: 15px; line-height: 1.3;
}

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.pullquote { margin: 48px 0; text-align: center; }
.pullquote blockquote { margin: 0; font-style: italic; font-size: 30px; line-height: 1.3; text-wrap: balance; }
.pullquote blockquote p { margin: 0; }

/* ---------- slider ---------- */
.slider__frame { position: relative; width: 100%; height: var(--slider-h); max-height: min(80vh, 680px); overflow: hidden; background: var(--bg-page); outline-offset: 3px; touch-action: pan-y; }
.slider__slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateX(4px); visibility: hidden;
  transition: opacity var(--dur-calm) var(--ease-drift), transform var(--dur-calm) var(--ease-drift), visibility 0s linear var(--dur-calm);
}
.slider__slide.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
/* Sized by their width/height attributes (the displayed size, whole-number scales for
   pixel art) — width:auto here would shrink pixel art back to its natural size. */
.slider__slide img, .slider__slide video { display: block; max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.slider__count { min-width: 4.5em; text-align: center; }
/* Without JS the pictures simply stack. */
html:not(.js) .slider__frame { height: auto; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
html:not(.js) .slider__slide { position: static; opacity: 1; transform: none; visibility: visible; }
html:not(.js) .slider__controls { display: none; }
@media (prefers-reduced-motion: reduce) { .slider__slide { transition: none; transform: none; } }

/* ---------- collage: justified rows, no cropping ---------- */
.collage { display: flex; flex-direction: column; gap: 8px; }
.collage__row { display: flex; gap: 8px; }
.collage__item { position: relative; flex: 1 1 0; min-width: 0; display: block; background: var(--bg-sunken); cursor: zoom-in; }
.collage__item img, .collage__item video { display: block; width: 100%; height: 100%; object-fit: contain; }
.collage figcaption { margin-top: 2px; }
/* A clip's corner mark (collage tiles, desk thumbs). */
.play-mark {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; padding: 3px; border-radius: 2px;
  background: rgba(0, 0, 0, .6); color: var(--chalk-0); pointer-events: none;
}
.play-mark .icon { width: 16px; height: 16px; }

/* ---------- lightbox ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--surface-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lightbox { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.lightbox img, .lightbox video { display: block; max-width: min(92vw, 1400px); max-height: 78vh; width: auto; height: auto; object-fit: contain; }
.lightbox__bar { display: flex; align-items: center; gap: 16px; }
.lightbox__caption { font-style: italic; font-size: var(--fs-caption); color: var(--text-body); text-align: center; max-width: 60ch; }
.lightbox .icon-btn { background: var(--bg-page); }

.divider { display: flex; align-items: center; gap: 18px; margin: 32px 0; color: var(--text-muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-faint); }
.divider span { font-size: 22px; line-height: 1; }

/* ---------- before / after ---------- */
.ba { display: flex; flex-direction: column; gap: 10px; }
.ba__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ba__slider {
  position: relative; aspect-ratio: 3 / 2; max-height: min(80vh, 680px); cursor: ew-resize; touch-action: none; user-select: none;
  -webkit-user-select: none; border: 1px solid var(--line-soft); overflow: hidden; background: var(--bg-raised);
  --pos: 50%;
}
.ba__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; background: var(--bg-page); }
.ba__layer--after { clip-path: inset(0 0 0 var(--pos)); }
/* The labels sit on the pictures, so they look the same in every theme (like .play-mark). */
.ba__tag {
  position: absolute; top: 12px; padding: 2px 8px 3px; border-radius: 2px;
  background: rgba(0,0,0,.62); color: #f2ede4;
  font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.3;
  text-shadow: none; pointer-events: none;
}
[data-contrast="sharp"] .ba__tag { background: rgba(0,0,0,.85); color: #fff; }
[data-contrast="soft"] .ba__tag { background: rgba(0,0,0,.56); color: #e8e1d5; }
[data-theme="morgon"][data-contrast="soft"] .ba__tag { background: rgba(0,0,0,.6); color: #f2ede4; }
.ba__side img, .ba__side video { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1.5px; margin-left: -.75px; background: var(--line); pointer-events: none; }
.ba__handle {
  position: absolute; top: 50%; left: var(--pos); width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg-page); color: var(--text-body);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 18px; line-height: 1;
  cursor: ew-resize;
}
html:not(.js) .ba__slider { display: none; }
html.js .ba__side { display: none; }

/* ---------- code ---------- */
.code { margin: 32px 0; border: 1px solid var(--line-faint); border-radius: 2px; background: var(--bg-raised); }
.code__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--line-faint); }
.code__copy { background: none; border: 0; padding: 2px 0; font: italic 15px var(--font-body); color: var(--text-muted); cursor: pointer; }
.code__copy:hover { color: var(--link-hover); }
/* JetBrains Mono runs larger than Garamontio: 14px sits with the body text. */
.code__pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 14px/1.6 var(--font-mono); tab-size: 4; color: var(--text-body); white-space: pre; }
.prose code:not(pre code), .entry-body code:not(pre code) { font: .86em var(--font-mono); padding: .05em .3em; background: var(--bg-raised); border: 1px solid var(--line-faint); border-radius: 2px; }
.row__body .code, .note .code { margin: 0; }
.token.keyword, .token.important { color: var(--code-key); }
/* GDScript node paths ($Wheel) are Prism "variable"s. */
.token.string, .token.char, .token.regex, .language-gdscript .token.variable { color: var(--code-str); }
.token.number, .token.boolean, .token.constant { color: var(--code-num); }
.token.function { color: var(--code-fn); }
.token.class-name, .token.builtin { color: var(--code-type); }
.token.annotation, .token.decorator { color: var(--code-at); }
.token.comment { color: var(--text-faint); font-style: italic; }
.token.punctuation, .token.operator { color: var(--text-muted); }

/* ---------- sound ---------- */
.sound { display: flex; flex-direction: column; }
.sound audio { display: block; width: 100%; }
.sound__ui { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line-faint); border-radius: 2px; }
.sound__ui[hidden] { display: none; }
.sound__play { flex: none; }
.sound__play .icon--play { margin-left: 2px; }
.sound__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sound__title { font-style: italic; font-size: 18px; line-height: 1.3; color: var(--text-body); transition: color var(--dur-quick) var(--ease-drift); }
.sound__ui:hover .sound__title { color: var(--link-hover); }
.sound__ui:hover .sound__play { color: var(--link-hover); border-color: var(--link-hover); }
.sound__time { flex: none; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
/* The track: a hairline, the played part a firmer line, a thumb only when touched. */
.sound__track { position: relative; height: 14px; }
.sound__seek {
  --played: 0%;
  display: block; width: 100%; height: 14px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.sound__seek:focus-visible { outline: 1.5px solid var(--focus-ring); outline-offset: 3px; }
.sound__seek::-webkit-slider-runnable-track {
  height: 1.5px; border: 0;
  background: linear-gradient(var(--text-body), var(--text-body)) 0 0 / var(--played) 100% no-repeat,
              linear-gradient(var(--line-soft), var(--line-soft)) 0 50% / 100% 1px no-repeat;
}
.sound__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -5.25px; border: 0; border-radius: 50%;
  background: var(--text-body); opacity: 0; transition: opacity var(--dur-quick) var(--ease-drift);
}
.sound__seek::-moz-range-track { height: 1px; border: 0; background: var(--line-soft); }
.sound__seek::-moz-range-progress { height: 1.5px; background: var(--text-body); }
.sound__seek::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text-body);
  opacity: 0; transition: opacity var(--dur-quick) var(--ease-drift);
}
.sound__seek:hover::-webkit-slider-thumb, .sound__seek:focus-visible::-webkit-slider-thumb, .sound__seek:active::-webkit-slider-thumb { opacity: 1; }
.sound__seek:hover::-moz-range-thumb, .sound__seek:focus-visible::-moz-range-thumb, .sound__seek:active::-moz-range-thumb { opacity: 1; }
.sound figcaption { margin-top: 10px; }
@media (max-width: 420px) {
  .sound__ui { flex-wrap: wrap; row-gap: 4px; }
  .sound__main { flex-basis: calc(100% - 52px); }
  .sound__time { margin-left: 52px; }
}

/* ---------- headers ---------- */
.page-header { margin: 56px 0 40px; }
.page-header h1 { font-size: var(--fs-h1); margin-top: 6px; }
.page-header p { color: var(--text-muted); margin-top: 12px; font-size: 20px; max-width: var(--measure); }

.back { margin-top: 32px; }
.project-header { margin: 20px 0 36px; }
.project-header h1 { font-size: var(--fs-display); line-height: 1.05; margin-top: 8px; }
.project-header .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); margin-top: 16px; }
.meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-header .meta-row { margin-top: 20px; }

/* ---------- overview ---------- */
.recent {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 16px 0; margin-bottom: 48px;
  border-top: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); color: inherit; text-decoration: none;
}
.recent:hover { color: inherit; }
.recent__text { flex: 1 1 280px; font-style: italic; color: var(--text-muted); font-size: 18px; transition: color var(--dur-quick) var(--ease-drift); }
.recent:hover .recent__text { color: var(--link-hover); }
.recent__project { font-style: normal; color: var(--text-faint); }

.projects { display: flex; flex-direction: column; gap: 16px; }
.project-card { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.project-card__cover { flex: 0 0 168px; }
.project-card__cover img { display: block; }
.project-card__cover img, .project-card__cover .placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Pixel-art covers are shown whole and sharp. */
.project-card__cover img.is-pixel { object-fit: contain; background: var(--bg-sunken); }
.project-card__text { flex: 1 1 260px; min-width: 0; }
.project-card h2 { font-size: 28px; margin: 10px 0 6px; }
.project-card p { color: var(--text-muted); font-size: 18px; line-height: 1.5; }
.project-card__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.project-header .meta-row .status-mark { margin-left: auto; }
.empty { margin-top: 40px; font-style: italic; color: var(--text-muted); }

/* ---------- log rows ---------- */
.row { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 32px 0; border-bottom: 1px solid var(--line-faint); }
.row__meta { flex: 0 0 112px; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.row__body { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.row__body .figure { margin: 0; }
.row-link { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.row-link:hover { color: inherit; }
.row-link h3 { font-size: 30px; line-height: 1.15; transition: color var(--dur-quick) var(--ease-drift); }
/* Entries are "pages": title, excerpt and a small preview picture on the right. */
.row-link__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row-link--thumb { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 24px; align-items: start; }
.row-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.row-thumb.is-pixel { object-fit: contain; background: var(--bg-sunken); }
.row-link:hover h3 { color: var(--link-hover); }
.row-link--question { gap: 10px; }
.row-link--question h3 { font-size: 26px; line-height: 1.2; }
.excerpt { color: var(--text-muted); font-size: 18px; line-height: 1.55; }
.read-on { font-style: italic; font-size: 17px; transition: color var(--dur-quick) var(--ease-drift); }
.row-link:hover .read-on { color: var(--link-hover); }
.read-on .label { margin-left: 8px; font-style: normal; color: var(--text-faint); }
.version-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.version-line .v { font-size: 30px; font-style: italic; line-height: 1.1; }
.version-line .summary { font-style: italic; color: var(--text-muted); font-size: 18px; }
.arrow-link { font-style: italic; font-size: 17px; color: var(--text-body); text-decoration: none; align-self: flex-start; }
.arrow-link--muted { color: var(--text-muted); }
.log-end { margin-top: 40px; text-align: center; font-style: italic; color: var(--text-faint); }

/* tabs as progressive enhancement: without JS every section shows, stacked */
.tab-heading { font-size: var(--fs-h2); margin-top: 56px; }
html.js .tab-heading { display: none; }
html.js .tab-panel:not(.is-active) { display: none; }
/* The first .row already has 32px of top padding. */
.tab-panel > .chips { margin: 24px 0 8px; }

/* changelog */
.row--version .row__meta { padding-top: 0; gap: 2px; }
.row--version .v { font-size: 34px; font-style: italic; line-height: 1.1; }
.row--version .row__body { gap: 14px; }
.row--version .summary { font-style: italic; font-size: 20px; }
.changes { display: grid; grid-template-columns: minmax(104px, max-content) minmax(0, 1fr); gap: 10px 14px; align-items: baseline; }
.change { display: contents; }
.change__text { min-width: 0; font-size: 18px; line-height: 1.5; }

/* questions */
.questions-intro { margin: 32px 0 8px; color: var(--text-muted); font-size: 18px; max-width: var(--measure); }
.question { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--line-faint); }
.question h3 { font-size: 26px; line-height: 1.2; }
.question .context { color: var(--text-muted); font-size: 18px; line-height: 1.55; }
.question .resolution { font-style: italic; font-size: 18px; }

/* ---------- rendered Markdown ---------- */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 2px 0; }
.prose li > p { margin: 0; }
.prose .indent { padding-left: 1.6em; }
.prose h2 { font-size: var(--fs-h2); margin: 40px 0 12px; }
.prose h3 { font-size: var(--fs-h3); margin: 32px 0 10px; }
/* Notes are "jottings": no title, so the first words open in small caps. */
.note { font-size: 18px; line-height: 1.55; }
.lead-in { font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-body); }
.note .pullquote { margin: 24px 0; }
.note .pullquote blockquote { font-size: 24px; }

/* ---------- entry page ---------- */
.entry-body > p, .entry-body > ul, .entry-body > ol, .entry-body > .indent { margin: 0 0 24px; }
.entry-body > p.first { font-size: var(--fs-lead); line-height: 1.55; }
.entry-body > p.first::after { content: ""; display: table; clear: both; }
.entry-body > .figure { margin: 32px 0; }
.dropcap { float: left; font-family: var(--font-capo); font-style: normal; font-size: 96px; line-height: .86; margin: 6px 14px 0 0; }

.entry-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.entry-cards .card { display: flex; flex-direction: column; gap: 12px; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card__head a { font-style: italic; font-size: 16px; color: var(--text-muted); text-decoration: none; }
.card__head a:hover { color: var(--link-hover); }
.card--thinking { gap: 8px !important; }
.card--thinking h3 { font-size: 24px; line-height: 1.25; }
.card--thinking p { color: var(--text-muted); font-size: 17px; line-height: 1.55; }
.signoff { text-align: center; font-style: italic; color: var(--text-muted); }
.prevnext {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  margin-top: 48px; border-top: 1px solid var(--line-faint); padding-top: 24px;
}
.prevnext > * { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.prevnext > :last-child { text-align: right; }
.prevnext .t { font-style: italic; font-size: 20px; transition: color var(--dur-quick) var(--ease-drift); }
.prevnext a:hover { color: inherit; }
.prevnext a:hover .t { color: var(--link-hover); }

/* ---------- about ---------- */
.about { display: flex; flex-direction: column; gap: 20px; margin-top: 56px; }
.about h1 { font-size: var(--fs-h1); }

@media (max-width: 520px) {
  .project-header h1 { font-size: 48px; }
  .page-header h1 { font-size: 38px; }
  .row-link--thumb { grid-template-columns: minmax(0, 1fr) 96px; }
}