/* gorshkov.eu — stylesheet
   ------------------------------------------------------------------
   One grotesk (Schibsted Grotesk) for everything that is read.
   One mono (IBM Plex Mono) for everything that is metadata.
   Paper, ink, one signal colour. Rules instead of boxes.

   Grid: a label column and a body column, on every page.
   Spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72 · 112 (px)
   Type:    12 · 15 · 17 · 21 · 28 · 40 (px)
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/grotesk-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/grotesk-latin-ext-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f3f2ee;
  --paper-2: #e9e7e1;
  --ink: #141619;
  --ink-2: #4b4e55;
  --ink-3: #7b7d82;
  --rule: #141619;
  --hair: #d2d0c9;
  --accent: #d9401c;   /* signal orange */
  --blue: #1d4fa8;     /* technical blue, used once: the flag */

  --flag-blue: var(--blue);
  --flag-red: var(--accent);
  --flag-yellow: #f2c230;

  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --t-meta: 0.75rem;     /* 12 */
  --t-small: 0.9375rem;  /* 15 */
  --t-body: 1.0625rem;   /* 17 */
  --t-lead: 1.3125rem;   /* 21 */
  --t-h2: 1.75rem;       /* 28 */
  --t-h1: 2.5rem;        /* 40 */

  --label: 12.5rem;
  --gap: var(--s7);
  --measure: 36rem;
  --wrap: 74rem;
  --pad: clamp(22px, 5vw, 48px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121315;
    --paper-2: #1b1c1f;
    --ink: #e8e6e1;
    --ink-2: #aeaca6;
    --ink-3: #7c7b77;
    --rule: #e8e6e1;
    --hair: #2d2e32;
    --accent: #f0643c;
    --blue: #3d6fd0;
    color-scheme: dark;
  }
}
/* Night projects is always after dark. */
:root[data-page="night"] {
  --paper: #111214;
  --paper-2: #1a1b1e;
  --ink: #e8e6e1;
  --ink-2: #aeaca6;
  --ink-3: #7c7b77;
  --rule: #e8e6e1;
  --hair: #2a2b2f;
  --accent: #f0643c;
  --blue: #3d6fd0;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; }
p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mono {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--ink-3); }
.sep { color: var(--ink-3); margin-inline: 0.35em; }
.skip { position: absolute; left: var(--pad); top: -100px; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s3); z-index: 10; }
.skip:focus { top: var(--s2); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Masthead ---------- */
.masthead { border-top: 4px solid var(--rule); }
.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: -0.005em;
  text-decoration: none;
}
.name:hover { color: var(--ink); }
.flags { width: 31px; height: 10px; flex: none; display: block; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.nav a {
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--s1);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- The row: label column + body column ---------- */
main { flex: 1; padding-bottom: var(--s8); }
.row {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  column-gap: var(--gap);
}
.row-label { color: var(--ink-3); }
.row-label.mono, .row-label .mono { color: var(--ink-3); }
.row-body { min-width: 0; }
.doc-label span { display: block; }
.label-note { display: block; margin-top: var(--s1); color: var(--ink-3); opacity: 0.8; text-transform: none; letter-spacing: 0; }

.sec { margin-top: var(--s8); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.sub { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--hair); }
h2.row-label { font-weight: 400; }

/* Page heads */
.page-head, .intro { padding-top: var(--s8); }
.page-head h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.025em; font-weight: 650; margin-bottom: var(--s5); }
.page-head .row-label { padding-top: 10px; }
.page-head p:not(.lead):not(.more) { max-width: var(--measure); margin-top: var(--s4); color: var(--ink-2); }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 33em; letter-spacing: -0.005em; }

/* Home intro */
.intro .row-label { padding-top: 14px; }
.intro-name { font-size: var(--t-h1); line-height: 1.05; font-weight: 650; letter-spacing: -0.025em; }
.intro-meta { color: var(--ink-2); margin: var(--s2) 0 var(--s6); }

.more { margin-top: var(--s4); }
.more a { text-decoration: none; color: var(--ink); }
.more a:hover { color: var(--accent); }

/* ---------- Key/value index (Now, facts) ---------- */
.kv { border-top: 1px solid var(--hair); }
.kv-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hair);
}
.sec > .row-body > .kv:first-child, .sec > .row-body > .kv:first-child { border-top: 0; }
.kv-row dt { color: var(--ink-3); padding-top: 3px; }
.kv-row dd { max-width: var(--measure); }
.kv-row.is-pending dd { color: var(--ink-3); }
.kv-row.is-pending dd::after { content: " [pending]"; font-family: var(--mono); font-size: var(--t-meta); }
.dash li { position: relative; padding-left: 1.1em; }
.dash li + li { margin-top: var(--s1); }
.dash li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }

/* ---------- Project table (home) ---------- */
.ptable-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) 9.5rem;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.ptable-name { font-weight: 600; }
.ptable-name a { text-decoration: none; }
.ptable-desc { color: var(--ink-2); max-width: 34em; }
.ptable-status { color: var(--ink-3); text-align: right; }

/* ---------- Archive list (home, thoughts) ---------- */
.archive-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 6rem;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.archive-row time { color: var(--ink-3); }
.archive-title { font-weight: 500; text-decoration: none; }
.archive-title:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.ext { color: var(--ink-3); font-weight: 400; }
.archive-type { color: var(--ink-3); text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin-top: var(--s5); }
.legend div { display: flex; gap: var(--s2); }
.legend dt { color: var(--ink); }
.legend dd { color: var(--ink-3); text-transform: none; letter-spacing: 0; }

/* ---------- Prose ---------- */
.prose { max-width: var(--measure); }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p,
.prose blockquote + p, .prose p + blockquote, .prose pre + p, .prose p + pre { margin-top: 1em; }
.prose h2, .prose h3 { font-size: 1.1875rem; margin: 2em 0 0.6em; letter-spacing: -0.005em; }
.prose h3 { font-size: 1.0625rem; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.25em; }
.prose ul { list-style: none; padding-left: 1.1em; }
.prose ul li { position: relative; }
.prose ul li::before { content: "–"; position: absolute; left: -1.1em; color: var(--ink-3); }
.prose ol { list-style: decimal; }
.prose ol li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--ink-3); }
.prose li + li { margin-top: 0.35em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 2px solid var(--accent); color: var(--ink-2); }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--paper-2); padding: 0.1em 0.3em; }
.prose pre { font-family: var(--mono); font-size: 0.85rem; background: var(--paper-2); padding: var(--s4); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2em 0; }
.prose img { max-width: 100%; height: auto; display: block; }
.prose em { font-style: italic; }
.annotation { margin-top: var(--s3) !important; color: var(--ink-3); }

/* ---------- About ---------- */
.plate { margin-top: var(--s7); }
.plate .row-label { align-self: end; }
.fig-no { display: block; color: var(--ink); margin-bottom: var(--s1); }
.plate-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.plate-frame picture, .plate-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate-x { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-x line { stroke: var(--hair); stroke-width: 1; }
.plate-mark { position: absolute; left: var(--s3); bottom: var(--s2); color: var(--ink-3); }
.inline-flags { display: inline-block; vertical-align: 0.05em; margin-right: 0.25em; }
.inline-flags .flags { display: inline-block; }

/* ---------- Work ---------- */
.role-name { font-size: 1.1875rem; color: var(--ink); margin-bottom: var(--s2); }
.role-meta { color: var(--ink-3); }
.role-meta a { color: var(--ink-2); text-decoration: none; }
.role-meta a:hover { color: var(--accent); }

.fig { margin-top: var(--s7); max-width: 44rem; }
.fig figcaption { margin-top: var(--s3); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.fig figcaption span { color: var(--ink); margin-right: var(--s2); text-transform: uppercase; }
.matrix { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.matrix th, .matrix td { padding: 10px var(--s2); border-bottom: 1px solid var(--hair); text-align: center; font-weight: 400; }
.matrix thead th { border-bottom: 1px solid var(--rule); color: var(--ink-3); padding-top: 0; vertical-align: bottom; }
.matrix th[scope="row"], .matrix thead th:first-child { text-align: left; padding-left: 0; }
.matrix tbody th { color: var(--ink); }
.matrix .step { color: var(--ink-3); margin-right: var(--s2); }
.matrix .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.matrix .s { display: none; text-decoration: none; }
.matrix col { width: auto; }

.numbered {
  counter-reset: n;
  columns: 2 16rem;
  column-gap: var(--s7);
}
.numbered li {
  counter-increment: n;
  break-inside: avoid;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 2.25rem 1fr;
}
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-3);
  padding-top: 3px;
}

/* ---------- Night projects (workshop log) ---------- */
.log-head, .log-entry {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 11rem;
  gap: var(--s4);
}
.log-head { color: var(--ink-3); padding-bottom: var(--s2); border-bottom: 1px solid var(--hair); }
.log-head span:last-child { text-align: right; }
.log-entry { padding: var(--s5) 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.log-id { color: var(--ink-3); }
.log-name { font-size: 1.1875rem; margin-bottom: var(--s1); }
.log-name a { text-decoration: none; }
.log-summary { max-width: 34em; color: var(--ink-2); }
.log-detail { max-width: 34em; color: var(--ink-3); margin-top: var(--s2); }
.log-url { display: inline-block; margin-top: var(--s3); text-decoration: none; color: var(--ink-3); }
a.log-url:hover { color: var(--accent); }
.log-status { text-align: right; color: var(--ink-2); white-space: nowrap; }
.log-status::before { content: "□ "; color: var(--ink-3); }
.log-status[data-status="active"]::before { content: "■ "; color: var(--accent); }
.log-entry.is-featured { padding: var(--s6) 0 var(--s6); }
.log-entry.is-featured .log-name { font-size: var(--t-h2); letter-spacing: -0.02em; margin-bottom: var(--s2); }
.log-entry.is-featured .log-summary { font-size: var(--t-lead); line-height: 1.45; color: var(--ink); }
.log-entry.is-featured .log-detail { font-size: var(--t-body); color: var(--ink-2); }

/* ---------- Posts ---------- */
.post-head { padding-top: var(--s8); }
.post-head h1 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.022em; font-weight: 650; max-width: 20em; }
.post-head .lead { margin-top: var(--s4); color: var(--ink-2); }
.post-meta { padding-top: 12px; }
.post-meta > * { display: block; }
.post-meta > :first-child { color: var(--accent); }
.post-body { margin-top: var(--s6); font-size: 1.1875rem; line-height: 1.62; max-width: 34rem; }
.post-body a { text-decoration-color: var(--accent); }
.end { margin-top: var(--s7) !important; color: var(--ink-3); }
.post-foot { margin-top: var(--s7); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.post-foot .row-label a { text-decoration: none; color: var(--ink); }
.post-foot .row-label a:hover { color: var(--accent); }
.post-nav { margin-top: var(--s5); }

/* ---------- Colophon ---------- */
.colophon { margin-top: var(--s9); }
.colophon-grid {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  column-gap: var(--gap);
  padding: var(--s4) 0 var(--s6);
  border-top: 1px solid var(--rule);
}
.colophon-sign { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--s4); }
.colophon-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: var(--t-small); }
.colophon-links a { text-decoration: none; }
.colophon-links .mono { margin-left: var(--s1); }
.doc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) 0;
  padding: var(--s3) 0 var(--s6);
  border-top: 1px solid var(--hair);
  color: var(--ink-3);
}
.doc-strip span:not(:last-child)::after { content: "·"; margin-inline: 0.7em; }

@media (min-width: 56.01rem) {
  .colophon-sign { grid-column: 1; margin: 0; }
  .colophon-links { justify-content: flex-start; }
}

/* ---------- Narrow screens: a small publication ---------- */
@media (max-width: 56rem) {
  :root { --label: 9rem; --gap: var(--s5); }
  .ptable-row { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .ptable-status { grid-column: 2; text-align: left; margin-top: calc(-1 * var(--s3)); }
  .log-head, .log-entry { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .log-head span:last-child { display: none; }
  .log-status { grid-column: 2; grid-row: 1; text-align: left; margin-bottom: var(--s2); }
  .log-main { grid-column: 2; }
  .log-id { grid-row: 1 / span 2; }
}

@media (max-width: 40rem) {
  :root {
    --t-body: 1.03125rem;  /* 16.5 */
    --t-lead: 1.1875rem;   /* 19 */
    --t-h1: 2.125rem;      /* 34 */
    --t-h2: 1.5rem;
  }
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: var(--s3); padding-bottom: var(--s3); }
  .nav ul { gap: var(--s1) var(--s4); }

  .row { grid-template-columns: minmax(0, 1fr); }
  .row-label { margin-bottom: var(--s4); }
  .row-label:empty { display: none; }
  .page-head, .intro, .post-head { padding-top: var(--s7); }
  .page-head .row-label, .intro .row-label, .post-meta { padding-top: 0; margin-bottom: var(--s5); }
  /* On a phone the doc label sits on one line: EG-100 / ABOUT */
  .doc-label span { display: inline; }
  .doc-label span + span::before { content: "/"; margin-inline: 0.6em; color: var(--accent); }
  .post-meta { display: flex; flex-wrap: wrap; gap: 0 0.7em; }
  .post-meta > * { display: inline; }
  .post-head h1 { font-size: 1.875rem; }
  .post-body { margin-top: var(--s5); font-size: 1.125rem; }

  .sec { margin-top: var(--s7); }
  .kv-row { grid-template-columns: 6.75rem minmax(0, 1fr); gap: var(--s3); }

  .ptable-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); }
  .ptable-desc { grid-column: 1 / -1; font-size: var(--t-small); }
  .ptable-status { grid-column: 2; grid-row: 1; text-align: right; margin: 0; }

  .archive-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); }
  .archive-row time { grid-row: 1; grid-column: 1; }
  .archive-type { grid-row: 1; grid-column: 2; }
  .archive-title { grid-column: 1 / -1; }

  .log-head { display: none; }
  .log-entry, .log-entry.is-featured { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s5) 0; }
  .log-id { grid-row: 1; grid-column: 1; }
  .log-status { grid-row: 1; grid-column: 2; text-align: right; margin: 0; }
  .log-main { grid-column: 1 / -1; }
  .log-entry.is-featured .log-summary { font-size: var(--t-body); }

  .plate .row-label { order: 2; margin: var(--s3) 0 0; }
  .fig-no { display: inline; margin-right: var(--s2); }

  .matrix { font-size: 0.875rem; }
  .matrix .l { display: none; }
  .matrix .s { display: inline; }
  .matrix .step { display: block; margin: 0 0 2px; }

  .colophon { margin-top: var(--s8); }
  .colophon-grid { grid-template-columns: 1fr; }
  .colophon-links { grid-column: 1; flex-direction: column; gap: var(--s2); }
  .doc-strip { flex-direction: column; }
  .doc-strip span::after { content: none !important; }
}

@media print {
  .masthead nav, .skip, .doc-strip time { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- Conditions (footer) ---------- */
.conditions { padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--hair); }
.conditions[hidden] { display: none; }
.conditions h2.row-label { font-weight: 400; }
.conditions-table { border-collapse: collapse; font-size: var(--t-small); width: 100%; max-width: 44rem; }
.conditions-table th, .conditions-table td { text-align: left; font-weight: 400; padding: 5px var(--s4) 5px 0; vertical-align: baseline; }
.conditions-table th { white-space: nowrap; width: 13rem; }
.conditions-table .st-name { color: var(--ink); }
.conditions-table .st-temp { font-variant-numeric: tabular-nums; white-space: nowrap; width: 4.5rem; color: var(--ink); }
.conditions-table .st-sky { color: var(--ink-2); }
.conditions-table .st-wind { color: var(--ink-3); text-align: right; white-space: nowrap; padding-right: 0; }
.conditions-credit { color: inherit; text-decoration: none; }
.conditions-credit:hover { color: var(--accent); }
@media (max-width: 40rem) {
  .conditions-table, .conditions-table tbody { display: block; }
  .conditions-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--hair);
  }
  .conditions-table th, .conditions-table td { padding: 0; width: auto; }
  .conditions-table .st-temp { grid-column: 2; grid-row: 1; text-align: right; }
  .conditions-table .st-sky { grid-column: 1; }
  .conditions-table .st-wind { grid-column: 2; }
}

/* ---------- About: photo slider ---------- */
.slider-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track .slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.slider-track .slide picture, .slider-track .slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slider-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
  color: var(--ink-3);
}
.slider-controls[hidden] { display: none; }
.slider-controls button {
  appearance: none;
  background: none;
  border: 1px solid var(--hair);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}
.slider-controls button:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .slider-track { scroll-behavior: auto; } }
@media (max-width: 40rem) {
  .plate .row-label { order: 3; }
  .slider-controls { margin-top: var(--s2); }
}

/* ---------- Post photos ---------- */
.post-hero { margin-top: var(--s6); }
.post-hero .row-label { align-self: end; }
.post-hero-frame { aspect-ratio: 3 / 2; background: var(--paper-2); border: 1px solid var(--hair); overflow: hidden; }
.post-hero-frame picture, .post-hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 2em 0; }
.inline-fig { margin: 0; }
.inline-fig picture, .inline-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); background: var(--paper-2); }
.inline-fig figcaption { margin-top: var(--s2); color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.inline-fig figcaption span { color: var(--ink); text-transform: uppercase; margin-right: 0.4em; }
@media (max-width: 40rem) {
  .post-hero .row-label { order: 2; margin: var(--s3) 0 0; }
  .fig-pair { grid-template-columns: 1fr; gap: var(--s5); }
}