/* Blog — same palette, type and square buttons as the timeline (public/index.html, THEMES.dark). */
:root {
  --bg: #0a0a0a; --surface: #131313; --text: #f2f2f0; --hl: #b3261e;
  --n200: #e2e2e0; --n300: #c8c8c6; --n400: #a3a3a1; --n500: #7d7d7b; --n600: #5e5e5c; --n700: #3f3f3e; --n800: #262626;
  --divider: rgba(242, 242, 240, .14); --grid: rgba(242, 242, 240, .035);
  --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Inter', system-ui, sans-serif;
  --pad: clamp(20px, 6vw, 96px);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--hl); color: var(--text); }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
.bg { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 70% at 50% 40%, transparent 35%, var(--bg) 100%), repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc(100% / 12)); }
.app { position: relative; z-index: 1; min-height: 100vh; animation: in 420ms ease-out both; }
.app.swap { animation: none; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wave { 0%, 100% { transform: perspective(60px) rotateY(-16deg) skewY(-4deg); } 50% { transform: perspective(60px) rotateY(12deg) skewY(4deg); } }

.mono, .kicker, .crumbs, .meta { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.kicker { font-size: 11px; color: var(--n500); }
.meta { font-size: 11px; color: var(--n500); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.meta svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--divider);
  background: transparent; color: var(--text); font: 500 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; cursor: pointer; border-radius: 0; }
.btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { border-color: var(--text); }
.btn.on { border-color: var(--hl); }
.btn svg { width: 14px; height: 14px; }
.flag { width: 16px; height: 11px; display: inline-block; animation: wave 2.6s ease-in-out infinite; transform-origin: left center; }
/* EN · PT · DE side by side: the current one is lit, the others dimmed until hovered. */
.langs { display: flex; gap: 4px; }
.btn.lang { height: 30px; padding: 0 9px; gap: 7px; opacity: .5; transition: opacity 150ms, background-color 150ms; }
.btn.lang .flag { animation: none; }
.btn.lang:hover { opacity: 1; }
.btn.lang.cur { opacity: 1; border-color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); cursor: default; }
.btn.lang.cur .flag { animation: wave 2.6s ease-in-out infinite; }

/* top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px var(--pad) 0; max-width: calc(1180px + 2 * var(--pad)); margin: 0 auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--n500); }
.crumbs a { color: var(--n400); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); font-weight: 500; }

.wrap { padding: 0 var(--pad); max-width: calc(1180px + 2 * var(--pad)); margin: 0 auto; }
.hero { padding: 14vh 0 64px; display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.hero h1 { margin: 0; font-weight: 500; font-size: clamp(56px, 9vw, 128px); line-height: .92; letter-spacing: -0.045em; }
.hero p { margin: 0; font-size: 18px; color: var(--n300); max-width: 560px; text-wrap: pretty; }
.section { padding: 32px 0 72px; display: flex; flex-direction: column; gap: 20px; }
.rule { height: 1px; width: 120px; background: var(--n600); }

/* blog home: project cards */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.pcard { position: relative; display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--divider); background: color-mix(in srgb, var(--surface) 85%, transparent); transition: border-color 200ms; }
.pcard:hover { border-color: var(--n400); }
.pcard .img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--n800); }
.pcard .img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.85); transform: scale(1.01); transition: filter 500ms, transform 700ms cubic-bezier(.2, .8, .2, 1); }
.pcard:hover .img img { filter: grayscale(0) brightness(1); transform: scale(1.04); }
.pcard .body { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.pcard h2 { margin: 0; font-weight: 500; font-size: 30px; letter-spacing: -0.025em; }
.pcard p { margin: 0; color: var(--n300); font-size: 15px; text-wrap: pretty; }
.pcard .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.dot { width: 6px; height: 6px; display: inline-block; background: var(--text); margin-right: 8px; vertical-align: 1px; }

/* post lists */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.row { display: grid; grid-template-columns: 130px 110px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--divider); text-decoration: none; }
.row:hover .t { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.row .t { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.row .s { display: block; margin-top: 4px; color: var(--n400); font-size: 14px; text-wrap: pretty; }
.tag { display: inline-flex; padding: 3px 8px; box-shadow: inset 0 0 0 1px var(--n700); color: var(--n300); font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; justify-self: start; }

/* project page */
.entries { display: flex; flex-direction: column; }
.entry { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; padding: 40px 0; border-top: 1px solid var(--divider); text-decoration: none; }
.entry .side { display: flex; flex-direction: column; gap: 8px; }
.entry .idx { font: 500 11px/1 var(--mono); color: var(--n500); }
.entry .main { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.entry .cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--n800); margin-bottom: 8px; }
.entry .cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.85); transition: filter 500ms; }
.entry:hover .cover img { filter: none; }
.entry h2 { margin: 0; font-weight: 500; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.025em; line-height: 1.1; }
.entry:hover h2 { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: var(--n500); }
.entry p { margin: 0; color: var(--n300); text-wrap: pretty; }
.empty { padding: 40px 0; color: var(--n400); border-top: 1px solid var(--divider); }

/* post */
.post { max-width: 760px; padding: 12vh 0 40px; display: flex; flex-direction: column; gap: 18px; }
.post h1 { margin: 0; font-weight: 500; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.post .lead { margin: 0; font-size: 19px; color: var(--n300); text-wrap: pretty; }
.post-cover { max-width: 1040px; margin: 16px 0 40px; }
.post-cover img { width: 100%; }
.prose { max-width: 720px; font-size: 17px; line-height: 1.75; color: var(--n200); }
.prose p { margin: 0 0 1.2em; text-wrap: pretty; }
.prose h2 { margin: 1.8em 0 .6em; font-weight: 500; font-size: 26px; letter-spacing: -0.02em; color: var(--text); }
.prose h3 { margin: 1.6em 0 .5em; font-weight: 500; font-size: 20px; color: var(--text); }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--n500); }
.prose a:hover { text-decoration-color: var(--text); }
.prose ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.prose li { margin: .3em 0; }
.prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; box-shadow: inset 1px 0 0 var(--n600); color: var(--n300); font-style: italic; }
.prose code { font: 400 .88em var(--mono); background: var(--n800); padding: 1px 5px; }
.prose pre { font: 400 13px/1.6 var(--mono); background: var(--surface); padding: 16px; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--n800); }
.prose pre code { background: none; padding: 0; }
.prose figure { margin: 2em 0; }
.prose figure img, .prose figure video { width: 100%; background: var(--n800); }
figcaption { margin-top: 10px; font: 500 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n400); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 28px 0; margin-top: 16px; border-top: 1px solid var(--divider); max-width: 720px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; padding: 8px 0 48px; }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--divider); text-decoration: none; }
.pager a:hover { border-color: var(--n400); }
.pager a.next { text-align: right; grid-column: 2; }
.pager span:last-child { font-size: 15px; font-weight: 500; }

/* comments */
.comments { max-width: 720px; display: flex; flex-direction: column; gap: 20px; padding: 24px 0 96px; }
.comments h3 { margin: 0; font-weight: 500; font-size: 22px; }
.cnone { margin: 0; color: var(--n400); font-size: 15px; }
.clist { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.clist[hidden], .cnone[hidden] { display: none; }
.thread { border-bottom: 1px solid var(--divider); padding: 18px 0; display: flex; flex-direction: column; gap: 14px; }
.replies { display: flex; flex-direction: column; gap: 14px; margin-left: 54px; }
.replies:empty { display: none; }
.rslot { margin-left: 54px; }
.rslot:empty { display: none; }
.c { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; align-items: start; border-radius: 2px; transition: background-color 1.2s; }
.c.fresh { background: color-mix(in srgb, var(--text) 6%, transparent); }
.c .av { grid-row: span 3; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.c.r { grid-template-columns: 28px minmax(0, 1fr); gap: 3px 12px; }
.c.r .av { width: 28px; height: 28px; }
.c .at { font-weight: 600; }
.cact { display: flex; gap: 16px; align-items: center; margin-top: 2px; }
.cact button, .cact .cl { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 2px 0; color: var(--n500); cursor: pointer;
  font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cact button:hover { color: var(--text); }
.cact svg { width: 13px; height: 13px; }
.cact .cl.on { color: var(--n200); cursor: default; }
.form.reply { padding: 14px; }
.form.reply textarea { min-height: 80px; }
.form .btns { display: flex; gap: 8px; }
.c .av svg { display: block; width: 100%; height: 100%; }
.c .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 2px; }
.c .who b { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.c .who > span { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; color: var(--n500); }
/* Erich's own comments: red is reserved for him (everyone else's colour stays between 25° and 325°). */
:root { --dev: #ff4b42; }
.av.dev { background: hsl(3 55% 17%); color: var(--dev); }
.devname { font: 600 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dev); text-shadow: 0 0 10px color-mix(in srgb, var(--dev) 45%, transparent); }
.devname span { display: inline-block; animation: hop 3.4s ease-in-out infinite; }
@keyframes hop { 0%, 14%, 100% { transform: translateY(0); } 5% { transform: translateY(-3px); } 9% { transform: translateY(1px); } }
.c .who > .devtag, .devtag { font: 600 11px/1.2 var(--mono); letter-spacing: .14em; animation: rgb 3s linear infinite; }
@keyframes rgb {
  0%, 100% { color: #ff3b3b; text-shadow: 0 0 6px #ff3b3b, 0 0 12px #ff3b3b80; }
  17% { color: #ff9f1c; text-shadow: 0 0 6px #ff9f1c, 0 0 12px #ff9f1c80; }
  33% { color: #ffe14d; text-shadow: 0 0 6px #ffe14d, 0 0 12px #ffe14d80; }
  50% { color: #3ddc84; text-shadow: 0 0 6px #3ddc84, 0 0 12px #3ddc8480; }
  67% { color: #2ec5ff; text-shadow: 0 0 6px #2ec5ff, 0 0 12px #2ec5ff80; }
  83% { color: #b46bff; text-shadow: 0 0 6px #b46bff, 0 0 12px #b46bff80; }
}
.form.asdev .who { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .devname span, .devtag { animation: none; } .devtag { color: #ff3b3b; } }
.c .txt { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--n200); font-size: 15px; line-height: 1.6; }
.form { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--divider); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.form[hidden] { display: none; }
.form label { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n400); display: flex; justify-content: space-between; }
.form input, .form textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--n700); border-radius: 0; padding: 10px 12px; font: 400 15px/1.5 var(--sans); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--n400); }
.form textarea { min-height: 120px; resize: vertical; }
.form .row2 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.form .note { font-size: 13px; color: var(--n500); }
.form .err { font-size: 13px; color: #e5534b; }
.form .ok { font-size: 15px; color: var(--n200); }
.ts { min-height: 65px; }

.pagefoot { max-width: calc(1180px + 2 * var(--pad)); margin: 0 auto; padding: 32px var(--pad) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--n600); }
.pagefoot a { color: var(--n400); text-decoration: none; }
.notfound { padding: 20vh 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.notfound h1 { margin: 0; font-weight: 500; font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.04em; }

/* language wipe, same reveal as the timeline */
.wipe { position: fixed; inset: 0; z-index: 50; pointer-events: none; clip-path: circle(0% at var(--x, 50%) var(--y, 0)); transition: clip-path 700ms cubic-bezier(.7, 0, .2, 1); }
.wipe.on { clip-path: circle(150% at var(--x, 50%) var(--y, 0)); pointer-events: auto; }
.wipe span { position: absolute; right: -2vw; bottom: -6vh; font: 500 clamp(200px, 30vw, 520px)/.8 var(--sans); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px var(--ink, #fff); }

@media (max-width: 760px) {
  .top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .row .d { grid-column: 1; } .row .tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .row .ti { grid-column: 1 / -1; } .row .meta { grid-column: 1 / -1; }
  .entry { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .entry .side { flex-direction: row; gap: 14px; }
  .hero { padding-top: 10vh; }
  .post { padding-top: 8vh; }
}
@media (prefers-reduced-motion: reduce) { .app, .flag { animation: none; } .wipe { transition: none; } }