/* ============================================================
   soobrosa — "dataroom" alternative: black on white, monospace,
   hairline cell grid. No colour, no radius, no shadow. Weight,
   rule and fill carry every distinction.
   Press T to invert.
   ============================================================ */

:root {
  --paper:#fff;
  --ink:#000;
  /* Micro-labels sit at 5.3:1 on paper. The reference runs them lighter,
     which lands near 3.4:1 and misses AA, so this is deliberately darker. */
  --muted:#6b6b6b;
  --edge:#111;        /* cell and control borders */
  --rule:#d4d4d4;     /* soft separators inside dense lists */
  --wash:#f5f5f5;     /* code blocks, hatch base */
  --veil:rgba(255,255,255,.88);  /* drops over mix artwork */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Inverted: same drawing, opposite polarity. */
:root[data-theme="invert"] {
  --paper:#000; --ink:#fff; --muted:#9a9a9a;
  --edge:#eee; --rule:#3a3a3a; --wash:#141414;
  --veil:rgba(0,0,0,.88);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.7;
  font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
}

.wrap { max-width:1000px; margin:0 auto; padding:26px 22px 80px; }
.narrow { max-width:760px; }

/* ---- shared atoms ---- */
/* The uppercase micro-label above every cell, list and section. */
.badge-line, .count, .socials, .card .ext, footer.foot,
.post .meta, .topnav a, .empty {
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
}

/* ---- nav: wordmark left, boxed links right ---- */
.topnav {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding-bottom:14px; margin-bottom:26px; border-bottom:1px solid var(--edge);
}
.topnav .brand {
  margin-right:auto; color:var(--ink); text-decoration:underline;
  text-underline-offset:3px; font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  border:0; padding:0;
}
.topnav .brand:hover { background:none; color:var(--ink); }
.topnav a {
  color:var(--ink); text-decoration:none; padding:5px 9px;
  border:1px solid var(--edge); line-height:1.2;
}
.topnav a:hover { background:var(--ink); color:var(--paper); }
.topnav a.active { background:var(--ink); color:var(--paper); }

/* ---- hero ---- */
h1.title {
  font-size:clamp(26px,5.4vw,42px); font-weight:700; line-height:1.08;
  letter-spacing:-.02em; margin-bottom:12px;
}
.blink { animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
.sub { font-size:15px; color:var(--ink); margin-bottom:18px; }
.badge-line { color:var(--muted); margin-bottom:22px; }

/* ---- panel: left-accent callout ---- */
.panel { border-left:3px solid var(--ink); padding:3px 0 3px 18px; margin-bottom:24px; }
.panel p { margin-bottom:12px; } .panel p:last-child { margin-bottom:0; }

/* ---- links ---- */
a.inline, .post a, .title-link, footer.foot a, ul.words .main a {
  color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px;
}
a.inline:hover, .post a:hover, .title-link:hover, footer.foot a:hover,
ul.words .main a:hover {
  background:var(--ink); color:var(--paper); text-decoration:none;
}

/* ---- socials: square controls ---- */
.socials { display:flex; flex-wrap:wrap; gap:6px; margin-top:24px; }
.socials a {
  color:var(--ink); text-decoration:none; padding:6px 9px;
  border:1px solid var(--edge); line-height:1.2;
}
.socials a:hover { background:var(--ink); color:var(--paper); }

/* ---- words: the stream ---- */
.hint { color:var(--ink); margin-bottom:18px; }
.hint b { font-weight:700; }
.count { color:var(--muted); margin:22px 0 8px; }

ul.words { list-style:none; border-top:1px solid var(--edge); }
ul.words li {
  display:flex; align-items:baseline; gap:14px;
  padding:9px 2px; border-bottom:1px solid var(--rule);
}
ul.words .date { color:var(--muted); min-width:46px; font-size:12px; }
/* Archive lists keep the original date wording ("Summer 2008, Cannes",
   "2018-2019"), so their date column needs room the year-only stream does not. */
ul.words.arch .date { min-width:132px; }
ul.words.arch .main a { margin-right:2px; }
ul.words .main { flex:1; }
/* Entry tags on the stream: "translation" or the short name of the site an
   entry links out to (pipeline, filmvilag, iv.hu, ...). */
ul.words .tags { display:inline-flex; gap:5px; margin-left:10px; vertical-align:1px; }
ul.words .tag {
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--rule); padding:0 5px; white-space:nowrap;
}
/* Used by the mixes page's error message. */
.empty { color:var(--ink); padding:20px 0; display:none; font-weight:700; }

/* ---- article ---- */
.back { display:inline-block; color:var(--muted); text-decoration:none; margin-bottom:18px; font-size:12px; }
.back:hover { color:var(--ink); text-decoration:underline; }
.post h1 { font-size:clamp(20px,3.4vw,28px); font-weight:700; line-height:1.2; letter-spacing:-.02em; margin-bottom:10px; }
.post .meta { color:var(--muted); padding-bottom:14px; margin-bottom:26px; border-bottom:1px solid var(--edge); }
.post h2 { font-size:16px; font-weight:700; margin:34px 0 12px; padding-bottom:5px; border-bottom:1px solid var(--rule); }
.post h3 { font-size:14px; font-weight:700; margin:24px 0 10px; }
.post p { font-size:15px; line-height:1.8; margin-bottom:16px; }
.post ul, .post ol { list-style:none; margin:0 0 16px 0; font-size:15px; }
.post ul li { padding-left:22px; position:relative; margin-bottom:8px; line-height:1.8; }
/* Box-drawing marker, echoing the reference's file tree. */
.post ul li::before { content:"\251C\2500"; position:absolute; left:0; color:var(--muted); }
.post ol { counter-reset:n; }
.post ol li { counter-increment:n; padding-left:30px; position:relative; margin-bottom:8px; line-height:1.8; }
.post ol li::before { content:counter(n,decimal-leading-zero); position:absolute; left:0; color:var(--muted); }
.post img { max-width:100%; height:auto; margin:16px 0; border:1px solid var(--edge); }
.post blockquote { border-left:3px solid var(--ink); padding:2px 0 2px 14px; color:var(--muted); margin:0 0 16px; }
.post pre {
  background:var(--wash); border-left:3px solid var(--ink); padding:14px 16px;
  overflow-x:auto; margin-bottom:18px; font-size:13px; line-height:1.6;
}
.post pre code { background:none; padding:0; }
.post code { font-family:var(--mono); font-size:13px; background:var(--wash); padding:1px 4px; }

/* ---- lab ---- */
.lab-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin-left:1px;  /* cancels the cards' -1px left margin */
}
/* Every card carries a full border and pulls 1px left and up, so shared edges
   collapse to one hairline. A nth-child border scheme instead breaks whenever
   the column count changes or the last row is short of cards. */
.card {
  display:block; text-decoration:none; color:var(--ink); padding:16px 18px 18px;
  border:1px solid var(--edge); margin:0 0 -1px -1px;
}
.card:hover { background:var(--wash); }
.card h2 { font-size:15px; font-weight:700; margin-bottom:8px; line-height:1.35; text-decoration:underline; text-underline-offset:3px; }
.card p { font-size:13px; line-height:1.65; margin-bottom:12px; }
.card .ext { display:block; color:var(--muted); margin-bottom:5px; }
.card .techs { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; }
.card .techs span { color:var(--muted); }
.card .techs span::before { content:"#"; }

/* ---- footer ---- */
footer.foot {
  color:var(--muted); margin-top:52px; padding-top:14px;
  border-top:1px solid var(--edge); line-height:1.8;
}

/* ---- narrow screens ---- */
@media (max-width:640px) {
  .wrap { padding:20px 14px 56px; }
  .topnav { gap:5px; }
  .topnav .brand { width:100%; margin-right:0; margin-bottom:6px; }
  ul.words li { flex-wrap:wrap; gap:8px; }
  ul.words .main { flex-basis:100%; }
  .lab-grid { grid-template-columns:1fr; }
  .post p, .post ul, .post ol { font-size:14px; }
}

/* ---- print ---- */
@media print {
  @page { margin:18mm; }
  .topnav, .back, .socials, .hint, .count, .empty { display:none !important; }
  body { font-size:11pt; line-height:1.55; }
  .wrap { max-width:none; padding:0; }
  .lab-grid, .card { border-color:#000; }
  .post a, a.inline { text-decoration:underline; }
  .post a::after { content:" (" attr(href) ")"; font-size:9pt; color:#444; word-break:break-all; }
}