/* Juan Torres, site styles.
   Stationery, not software: bone and eggshell stock, near-black ink, one steel accent kept for
   links and focus. Cormorant Garamond sets names and titles, Inter carries the text and the
   spaced small-caps labels, IBM Plex Mono holds dates and figures.
   Every page sits on one 12-column grid: labels in columns 1-3 (.key), content in 4-12 (.body).
   Page components are scoped under .page so they never leak into the full-width project
   pages, which bring their own classes. Spacing steps are multiples of 8.
   The Fruit Fly Dispatcher page carries its own copy of the neutrals and type tokens, so keep
   the two in step. Sections, in order: fonts, tokens, base, grid, nav, project bar, footer, page
   furniture, entries, raised stock, home, project log, writing and posts, the house TV board,
   print, then one block per page family (reefer, border, beef, YouTube, TV, résumé, projects, writing). */

/* ---------- fonts, served from here rather than Google ----------
   Latin subsets only (the same files Google would send a browser in the US), so one origin,
   no render-blocking third-party stylesheet, and the two above-the-fold faces are preloaded
   from head.html. The unicode-range matches Google's "latin" slice: anything outside it,
   arrows included, falls back exactly as it did before. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond.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: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500.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; }

:root {
  color-scheme: light;
  --ground: #eeebe3;   /* bone: the page */
  --stock: #f7f5ef;    /* eggshell: the card, raised surfaces */
  --silian: #e4e0d6;   /* Silian Rail: quiet fills */
  --ink: #0f0f0e;      /* titles, the rules that matter */
  --text: #2a2927;     /* body copy */
  --text-2: #55524c;   /* secondary copy */
  --muted: #66625a;    /* labels; 4.6:1 even on --silian */
  --rule: #d6d1c5;     /* hairlines */
  --accent: #3d5266;   /* steel slate, used sparingly */
  --on-ink: #f7f5ef;
  --shadow: rgba(46, 38, 20, 0.2);
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --measure: 1152px;
  --side: 48px;
  --gap: 24px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #121211; --stock: #1a1a19; --silian: #242422; --ink: #f4f1ea; --text: #dad6cc; --text-2: #aba69b;
    --muted: #8f8a80; --rule: #2f2e2b; --accent: #9db0c2; --on-ink: #121211; --shadow: rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121211; --stock: #1a1a19; --silian: #242422; --ink: #f4f1ea; --text: #dad6cc; --text-2: #aba69b;
  --muted: #8f8a80; --rule: #2f2e2b; --accent: #9db0c2; --on-ink: #121211; --shadow: rgba(0, 0, 0, 0.7);
}
/* Night stock: the dark tokens, pinned. Pages whose family is gamer or chill set `stock: night`
   in front matter and the layouts put this class on <body>, so they are dark whatever theme the
   reader picked (the theme switch has nothing to do there, so it hides). Same values as above. */
.stock-night {
  color-scheme: dark;
  --ground: #121211; --stock: #1a1a19; --silian: #242422; --ink: #f4f1ea; --text: #dad6cc; --text-2: #aba69b;
  --muted: #8f8a80; --rule: #2f2e2b; --accent: #9db0c2; --on-ink: #121211; --shadow: rgba(0, 0, 0, 0.7);
}
.stock-night .theme-btn { visibility: hidden; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  min-height: 100vh; display: flex; flex-direction: column; /* the footer sits at the bottom of short pages */
  font-family: var(--sans); font-size: 16px; line-height: 1.65; font-optical-sizing: auto;
  font-variant-numeric: lining-nums; /* Cormorant defaults to old-style figures: "10" reads as "1o" */
  font-feature-settings: "cv11" 1, "ss03" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--on-ink); }

/* Keyboard users land here first and can jump the nav. Invisible until focused.
   Fixed, not absolute: tabbing after a scroll should still bring it into view. */
.skip { position: fixed; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 12px 16px; font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.skip:focus { left: 0; }

/* ---------- shared type ---------- */
.page .label { font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.page .data { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.01em; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* The family a page belongs to (Work, Gamer, Chill…), above its title. See CLAUDE.md. */
.page .family { margin: 0 0 12px; font: 500 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.page .serif { font-family: var(--serif); font-weight: 500; font-variant-numeric: lining-nums; }

/* ---------- the container and the grid ---------- */
.frame { width: 100%; max-width: calc(var(--measure) + 2 * var(--side)); margin: 0 auto; padding: 0 var(--side); }
#main { flex: 1 0 auto; }
.page .row, .site-foot .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.page .row > .key, .site-foot .row > .key { grid-column: 1 / 4; }
.page .row > .body, .site-foot .row > .body { grid-column: 4 / 13; min-width: 0; }
@media (max-width: 860px) {
  :root { --side: 24px; }
  .page .row, .site-foot .row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .page .row > .key, .site-foot .row > .key, .page .row > .body, .site-foot .row > .body { grid-column: 1 / -1; }
}
@media (max-width: 520px) { :root { --side: 20px; } }

/* ---------- navigation ---------- */
.site-nav { border-bottom: 1px solid var(--rule); }
.site-nav .frame { height: 72px; display: flex; align-items: center; gap: 40px; }
.wordmark { margin-right: auto; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.wordmark .short { display: none; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: 0.08em; }
.site-nav .links { display: flex; gap: 32px; }
.site-nav .links a { text-decoration: none; font-size: 13px; color: var(--text-2); padding: 24px 0; transition: color 0.15s; } /* the whole bar height is tappable */
.site-nav .links a:hover { color: var(--ink); }
.site-nav .links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--accent); }
.theme-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; margin-right: -12px; background: none; border: 0; color: var(--text-2); cursor: pointer; transition: color 0.15s; }
.theme-btn:hover { color: var(--ink); }
.theme-btn svg { width: 14px; height: 14px; display: block; }
@media (max-width: 600px) {
  .site-nav .frame { height: 64px; gap: 16px; }
  .site-nav .links { gap: 20px; }
  .site-nav .links a { padding: 20px 0; }
  .wordmark .full { display: none; }
  .wordmark .short { display: inline; }
}
/* Five links don't fit beside the wordmark on a phone: they drop to a row of their own. */
@media (max-width: 480px) {
  .site-nav .frame { height: auto; flex-wrap: wrap; row-gap: 0; padding-top: 12px; }
  .site-nav .links { order: 3; width: 100%; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); }
  .site-nav .links a { padding: 14px 0; }
}

/* ---------- project bar: sits under the nav on project pages (see _includes/project-bar.html) ---------- */
.pbar { border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pbar-in { max-width: calc(var(--measure) + 2 * var(--side)); margin: 0 auto; padding: 14px var(--side); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pbar a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.pbar a:hover { color: var(--ink); }
.pbar-cur { color: var(--ink); }
.pbar-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; margin-left: 8px; }
.pbar-nav { margin-left: auto; display: flex; gap: 32px; }
@media (max-width: 520px) { .pbar-nav { margin-left: 0; width: 100%; gap: 24px; } }
@media (display-mode: standalone) { .pbar { display: none; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule); margin-top: 160px; }
.site-foot .row { padding: 32px 0 48px; align-items: baseline; row-gap: 16px; }
.site-foot .key { color: var(--muted); font-size: 13px; }
.site-foot nav { grid-column: 4 / 10; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; }
.site-foot nav a { text-decoration: none; color: var(--text-2); padding: 8px 0; margin: -8px 0; transition: color 0.15s; }
.site-foot nav a:hover { color: var(--ink); }
.site-foot .stamp { grid-column: 10 / 13; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .site-foot { margin-top: 112px; }
  .site-foot nav, .site-foot .stamp { grid-column: 1 / -1; text-align: left; }
}

/* ---------- page furniture ---------- */
.page p { margin: 0; }
.page h1, .page h2, .page h3 { margin: 0; font-weight: 500; text-wrap: balance; }

.page .phead { padding-top: 96px; }
.page .phead .key { padding-top: 14px; }
.page .phead h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.012em; color: var(--ink); font-variant-numeric: lining-nums; }
.page .lede { margin-top: 32px !important; font-size: 19px; line-height: 1.6; color: var(--text-2); max-width: 36em; }
@media (max-width: 860px) { .page .phead { padding-top: 64px; } .page .phead .key { padding-top: 0; } .page .lede { margin-top: 24px !important; font-size: 17px; } }

.page .sec { margin-top: 128px; }
.page .sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid var(--ink); padding-top: 16px; margin-bottom: 8px; }
.page .sec-head h2 { white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.page .sec-head a { text-decoration: none; transition: color 0.15s; }
.page .sec-head a:hover { color: var(--ink); }
@media (max-width: 860px) { .page .sec { margin-top: 96px; } }

.page .prose p { max-width: 38em; margin-bottom: 1.1em; font-size: 17px; line-height: 1.7; color: var(--text); }
.page .prose p:last-child { margin-bottom: 0; }
.page .prose a, .page .link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); transition: color 0.15s, text-decoration-color 0.15s; }
.page .prose a:hover, .page .link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.page .muted { color: var(--muted); }
.page .small { font-size: 14px; }
.page .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* buttons: rectangles, no radius, no fills except the one that matters */
.page .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.page .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.page .btn:hover { background: var(--ink); color: var(--on-ink); }
.page .btn.primary { background: var(--ink); color: var(--on-ink); }
.page .btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }

/* ---------- entries: the one list pattern, used for work, experience, writing ---------- */
.page .entries { border-top: 0; }
.page .entry { padding: 40px 0; border-bottom: 1px solid var(--rule); text-decoration: none; align-items: start; }
.page .entry:last-child { border-bottom: 0; }
.page .entry .key { padding-top: 10px; }
.page .entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.page .entry-title { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; font-variant-numeric: lining-nums; transition: color 0.15s; }
.page .entry-sub { margin-top: 6px !important; font-size: 15px; font-weight: 500; color: var(--ink); }
.page .entry-text { display: block; margin-top: 12px !important; max-width: 38em; font-size: 16px; color: var(--text-2); }
.page .entry .key .label, .page .entry .key .data { display: block; }
.page .entry .key .data { margin-top: 8px; }
.page .entry .go { font-size: 15px; color: var(--muted); transition: color 0.15s; }
a.entry:hover .entry-title { color: var(--accent); }
a.entry:hover .go { color: var(--accent); }
.page .entry .go.label { font-size: 11px; }
@media (max-width: 860px) {
  .page .entry { padding: 32px 0; }
  .page .entry .key { padding-top: 0; }
  .page .entry-title { font-size: 28px; }
  .page .entry-head { flex-wrap: wrap; gap: 4px 16px; }
  .page .entry-head > .label:not(.go) { flex-basis: 100%; }
}

/* ---------- raised stock ----------
   The business card, the résumé, the featured project and the writing letter: the edge of the
   stock, a sliver of thickness under it, then its shadow on the table. */
.page .card, .cv-card, .pj-lead, .wr-letter {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent),
    0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
    0 2px 0 color-mix(in srgb, var(--ink) 4%, transparent),
    0 36px 64px -36px var(--shadow);
}

/* ---------- home: the card ---------- */
.page .hero { padding: 112px 0 96px; display: grid; justify-items: center; }
.page .card {
  position: relative; width: min(100%, 700px); aspect-ratio: 7 / 4; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; padding: 6.5% 7.5%;
  background: var(--stock); color: var(--ink);
}
.page .card-mark { /* the watermark */
  position: absolute; right: -3%; top: 50%; transform: translateY(-52%);
  font-family: var(--serif); font-weight: 500; font-size: 380px; line-height: 1; letter-spacing: -0.06em;
  color: color-mix(in srgb, var(--ink) 2.6%, transparent); pointer-events: none; user-select: none;
}
.page .card-top, .page .card-bot { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.page .card .label { font-size: 9.5px; letter-spacing: 0.22em; color: var(--text-2); }
.page .card-mid { position: relative; align-self: center; text-align: center; }
.page .card-name { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 5.4vw, 42px); line-height: 1.1; letter-spacing: 0.2em; margin: 0 -0.2em 0 0 !important; text-transform: uppercase; color: var(--ink); }
.page .card-rule { display: block; width: 28px; height: 1px; background: var(--accent); margin: 20px auto 16px; }
.page .card-title { font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-2); }
.page .card-bot { align-items: end; }
.page .card-bot a, .page .card-bot span { text-decoration: none; font-family: var(--mono); font-size: 11px; color: var(--text-2); transition: color 0.15s; }
.page .card-bot a:hover { color: var(--accent); }
.page .card-bot .label { text-align: center; }

.page .hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; margin-top: 56px; }
.page .hero-links a, .page .hero-links button { padding: 4px 0; background: none; border: 0; border-bottom: 1px solid transparent; font: 500 11px/1.5 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.page .hero-links a:hover, .page .hero-links button:hover { border-bottom-color: var(--ink); }

/* On a phone the card turns upright, the way a vertical card is printed. */
@media (max-width: 600px) {
  .page .hero { padding: 48px 0 64px; }
  .page .card { width: min(100%, 312px); aspect-ratio: 4 / 7; padding: 36px 24px; }
  .page .card-mark { right: -18%; font-size: 300px; }
  .page .card-top, .page .card-bot { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .page .card-name { font-size: 30px; }
  .page .hero-links { gap: 12px 24px; margin-top: 40px; }
  .page .hero-links a, .page .hero-links button { letter-spacing: 0.14em; }
}

/* ---------- home: about ---------- */
.page .statement { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -0.008em; color: var(--ink); max-width: 17em; margin: 32px 0 40px !important; }

/* ---------- home: contact ---------- */
.page .contact { padding-top: 32px; }
.page .big-link { display: inline-block; font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 6px; transition: color 0.15s, border-color 0.15s; overflow-wrap: anywhere; }
.page .big-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.page .contact .entry-text { margin-top: 24px !important; }
.page .inline-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 32px; }
.page .inline-links a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); transition: border-color 0.15s; }
.page .inline-links a:hover { border-bottom-color: var(--ink); }

/* ---------- project log ---------- */
.page .repo-list { margin-top: 48px; border-top: 1px solid var(--rule); }
.page .repo { padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; align-items: baseline; }
.page .repo .name { font-family: var(--mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; transition: color 0.15s; }
.page .repo .desc { margin-left: 16px; font-size: 14px; color: var(--text-2); }
.page .repo:hover .name { color: var(--accent); }
.page .log { margin-top: 64px; border-top: 1px solid var(--rule); }
.page .log-day { padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.page .log-items { display: grid; gap: 8px; }
.page .log-item { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; text-decoration: none; }
.page .log-item .msg { font-size: 15px; color: var(--text); transition: color 0.15s; }
.page .log-item:hover .msg { color: var(--accent); }
.page .log-item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.page .log-item .label.accent { color: var(--accent); }
.page .log-note { color: var(--muted); font-size: 14px; padding: 16px 0; }
@media (max-width: 860px) {
  .page .repo .desc { display: block; margin: 2px 0 0; }
  .page .log-item { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
  .page .log-item .label { grid-column: 1 / -1; }
}

/* ---------- writing and posts ---------- */
.page .post .back { text-decoration: none; }
.page .post .back:hover { color: var(--ink); }
.page .post .meta { margin-top: 24px !important; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.page .post .prose { margin-top: 56px; }
.page .prose h2, .page .prose h3 { font-family: var(--serif); color: var(--ink); margin: 1.6em 0 0.5em; line-height: 1.15; }
.page .prose h2 { font-size: 30px; }
.page .prose h3 { font-size: 24px; }
.page .prose ul, .page .prose ol { max-width: 38em; padding-left: 1.4em; margin: 0 0 1.1em; font-size: 17px; line-height: 1.7; }
.page .prose li + li { margin-top: 0.3em; }
.page .prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 1px solid var(--ink); color: var(--text-2); max-width: 38em; }
.page .prose img { max-width: 100%; height: auto; display: block; margin: 1.6em 0; }
.page .prose figure { margin: 2em 0; max-width: 100%; }
.page .prose figure img { margin: 0; border: 1px solid var(--rule); }
.page .prose figcaption { margin-top: 10px; }
.page .prose ol li strong, .page .prose ul li strong { color: var(--ink); font-weight: 500; }
.page .prose pre { max-width: 100%; overflow: auto; padding: 16px 20px; margin: 0 0 1.4em; background: var(--silian); font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.page .prose code { font-family: var(--mono); font-size: 0.92em; }
.page .prose :not(pre) > code { background: var(--silian); padding: 1px 5px; }
.page .prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.page .prose table { display: block; max-width: 38em; overflow-x: auto; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.page .prose th, .page .prose td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: bottom; }
.page .prose thead th { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
.page .prose th + th { white-space: nowrap; }
.page .prose td + td { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.page .prose td strong { color: var(--ink); font-weight: 500; }
.page .post-nav { margin-top: 96px; border-top: 1px solid var(--ink); padding-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.page .post-nav a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.page .post-nav a:hover .entry-title { color: var(--accent); }
.page .post-nav .entry-title { font-size: 24px; line-height: 1.2; }
.page .post-nav .next { text-align: right; grid-column: 2; }
@media (max-width: 520px) { .page .post-nav { grid-template-columns: minmax(0, 1fr); } .page .post-nav .next { text-align: left; grid-column: auto; } }

/* ---------- what we're watching ---------- */
.page .art { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--silian); }
.page .art.fallback { display: grid; place-items: center; border: 1px solid var(--rule); font-family: var(--serif); font-size: 28px; color: var(--muted); }
.page .np-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px 0; text-decoration: none; }
.page .np-card:hover .np-title { color: var(--accent); }
.page .live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 1px; }
.page .live.off { background: var(--muted); }   /* stopped, not playing */
.page .np-title { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; color: var(--ink); margin: 12px 0 4px !important; transition: color 0.15s; }
.page .np-sub { color: var(--text-2); font-size: 15px; }
.page .bar { height: 1px; background: var(--rule); margin: 24px 0 12px; }
.page .bar span { display: block; height: 100%; background: var(--ink); }
.page .np-empty { padding: 48px 0; }
.page .np-empty .big { font-family: var(--serif); font-size: 32px; color: var(--ink); }
.page .np-empty .sub { color: var(--muted); font-size: 15px; margin-top: 4px !important; }
.page .setup { padding: 32px 0; }
.page .setup h3 { font-family: var(--serif); font-size: 28px; color: var(--ink); }
.page .setup ol { margin: 16px 0 0; padding-left: 20px; color: var(--text-2); font-size: 15px; }
.page .setup li { margin-bottom: 8px; }
.page .setup .sub { color: var(--muted); font-size: 14px; margin-top: 16px !important; }
.page .tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-top: 24px; }
.page .tile { border-top: 1px solid var(--rule); padding-top: 16px; display: grid; gap: 8px; }
.page .tile .n { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.page .deck { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); padding-top: 24px; }
.page .deck-item { display: grid; gap: 10px; align-content: start; text-decoration: none; }
.page .deck-item .deck-t { font-size: 13px; line-height: 1.35; color: var(--text-2); }
.page .deck-item:hover .deck-t { color: var(--ink); }
@media (max-width: 860px) { .page .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .page .deck { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .page .np-card { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; } .page .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- breadcrumbs: the data pages' trail (_includes/crumbs.html), on ordinary and app pages ---------- */
.crumbs { margin: 16px 0 24px; }
.app-stage > .crumbs { margin-top: 0; }
.crumbs-frame .crumbs { margin-bottom: 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 11px/1.5 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: "›"; padding: 0 8px; color: var(--rule); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--muted); }

/* ---------- embeds: the iframe chart pages (_layouts/embed.html) and the snippet box on the boards ---------- */
.embed-body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--sans); }
.embed { padding: 12px 16px 8px; }
.embed .rb-block { margin-top: 0; }
.embed-credit { margin: 8px 0 0; font: 12px/1.5 var(--mono); color: var(--text-2); }
.embed-credit a { color: var(--accent); }
.embed-box { margin-top: 32px; }
.embed-code { display: block; width: 100%; margin: 12px 0; padding: 12px; font: 12px/1.5 var(--mono); color: var(--text); background: var(--stock); border: 1px solid var(--rule); resize: vertical; }

/* ---------- /data/: the catalog of every published CSV (a work page) ---------- */
.page .dc .sec { margin-top: 80px; }
.page .dc-text { max-width: 44em; margin: 16px 0 0; color: var(--text); }
.page .dc-es { color: var(--text-2); }
.page .dc-unit { color: var(--muted); }
.page .dc-files { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.page .dc-scroll { overflow-x: auto; margin-top: 24px; }
.page .dc-table { width: 100%; border-collapse: collapse; font: 12px/1.5 var(--mono); color: var(--text); }
.page .dc-table th, .page .dc-table td { text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; font-weight: 400; }
.page .dc-table thead th { font: 500 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.page .dc code { font: 12px var(--mono); }
.dc-link { color: var(--text-2); }

/* ---------- print: the résumé page is the reason, but every page prints cleanly ---------- */
@media print {
  :root { --ground: #fff; --stock: #fff; --silian: #f2f2f2; --ink: #000; --text: #111; --text-2: #333; --muted: #555; --rule: #bbb; --accent: #000; --shadow: transparent; }
  html { scroll-behavior: auto; }
  body { font-size: 11pt; line-height: 1.5; min-height: 0; display: block; }
  .site-nav, .site-foot, .skip, .theme-btn, .pbar, .page .actions, .page .hero-links, .page .sec-head a, .page .entry .go, .page .repo-list, .page .log, .page #log { display: none !important; }
  .frame { max-width: none; padding: 0; }
  .page .phead { padding-top: 0; }
  .page .phead h1 { font-size: 30pt; }
  .page .lede { margin-top: 12pt !important; font-size: 12pt; }
  .page .row { grid-template-columns: 9em minmax(0, 1fr); column-gap: 24pt; }
  .page .row > .key { grid-column: 1; }
  .page .row > .body { grid-column: 2; }
  .page .sec { margin-top: 28pt; break-inside: avoid; }
  .page .sec-head { padding-top: 6pt; margin-bottom: 0; }
  .page .entry { padding: 12pt 0; break-inside: avoid; }
  .page .entry .key { padding-top: 4pt; }
  .page .entry-title { font-size: 17pt; }
  .page .entry-text { font-size: 10.5pt; }
  .page .card { box-shadow: none; border: 1px solid var(--ink); }
  .page .card-mark { display: none; }
  .page .hero { padding: 0 0 24pt; }
  .page .statement { font-size: 20pt; margin: 12pt 0 16pt !important; }
  .page .big-link { font-size: 20pt; border: 0; }
  .page .big-link::after, .page .inline-links a::after, .page .prose a::after { content: " (" attr(href) ")"; font-family: var(--mono); font-size: 9pt; color: var(--muted); }
  .page .inline-links a[href^="mailto"]::after, .page .big-link[href^="mailto"]::after { content: none; }
  .page .inline-links a, .page .prose a { border: 0; text-decoration: none; }
}

/* ---------- the reefer rate board (/reefer-rates/ and its lane pages) ----------
   A "work" page, built for use first: plain sections, big readable type, tables that wrap rather
   than cut anything off, and controls at least 44px tall. Everything is scoped under .rb. */
.rb { padding-top: 48px; font-size: 17px; line-height: 1.6; }
.rb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 2px solid var(--ink); padding-bottom: 24px; }
.rb-title { flex: 1 1 520px; min-width: 0; }
.rb-family { margin: 0 0 12px !important; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.rb h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.rb-sub { margin: 16px 0 0 !important; max-width: 46em; font-size: 17px; line-height: 1.6; color: var(--text-2); }
/* the hairlines between boxes are the ink showing through a 1px gap, so they stay right when the boxes wrap */
.rb-stamp { display: flex; flex-wrap: wrap; gap: 1px; margin: 0; border: 1px solid var(--ink); background: var(--ink); }
.rb-stamp > div { flex: 1 1 auto; padding: 12px 20px; background: var(--ground); }
.rb-stamp dt, .rb-facts dt { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rb-stamp dd { margin: 4px 0 0; font-family: var(--mono); font-size: 17px; color: var(--ink); white-space: nowrap; }
.rb-stamp dd span { color: var(--text-2); }
.wu-sched td { font-family: var(--sans); font-size: 15px; white-space: normal !important; }
.wu-sched th { width: 22%; }
/* The MMA card shop (/mma-cards/): a stamp-like row of figures, the cards for sale as a grid of photos, past finds. */
.mc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; margin: 16px 0 24px; border: 1px solid var(--rule); background: var(--rule); }
.mc-stats > div { padding: 12px 16px; background: var(--ground); }
.mc-stats dt { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mc-stats dd { margin: 4px 0 0; font-family: var(--mono); font-size: 17px; color: var(--ink); }
.mc-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.mc-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--rule); background: var(--stock); }
.mc-card img, .mc-nophoto { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; background: var(--silian); }
.mc-name { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.mc-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.mc-tags span { font: 500 11px var(--mono); padding: 0 4px; border: 1px solid var(--rule); color: var(--text-2); }
.mc-tags:empty { display: none; }
.mc-price { margin: auto 0 0; font: 500 16px var(--mono); color: var(--ink); }
.mc-h3 { margin: 32px 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.mc-finds { list-style: none; margin: 0; padding: 0; }
.mc-finds li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.mc-finds img { width: 72px; height: 72px; object-fit: cover; background: var(--silian); }
.mc-finds p { margin: 0 0 4px; }
.mc-how { font-size: 13px; color: var(--text-2); }
.rb-update { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.rb-update[hidden] { display: none; }
.rb-update p { flex: 1 1 280px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rb-update .rb-chip { margin: 0; }
.rb-update .rb-chip:disabled { opacity: 0.45; cursor: default; }
.rb-update .rb-chip:disabled:hover { background: transparent; color: var(--ink); }

.rb-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.rb-jump a, .rb-btn, .rb-chip, .rb-views button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rb-jump a:hover, .rb-btn:hover, .rb-chip:hover, .rb-views button:hover { background: var(--ink); color: var(--on-ink); }
.rb-btn { background: var(--ink); color: var(--on-ink); }
.rb-btn:hover { background: var(--accent); border-color: var(--accent); }

.rb-sec { margin-top: 72px; scroll-margin-top: 16px; }
.rb-sec > h2 { margin: 0 0 12px; padding-top: 16px; border-top: 2px solid var(--ink); font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; color: var(--ink); }
.rb-sec h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 600; color: var(--ink); }
.rb-sec > p, .rb-sec p { max-width: 48em; margin: 0 0 16px !important; color: var(--text); }
.rb-big { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 28px) !important; line-height: 1.4 !important; color: var(--ink) !important; }
.rb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 8px 32px; }

/* ordinary tables: full width, words wrap, numbers don't */
.rb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rb-t { width: 100%; border-collapse: collapse; background: var(--stock); border: 1px solid var(--ink); font-size: 16px; }
.rb-t th, .rb-t td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.rb-t thead th { background: var(--silian); border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
.rb-t tbody th { font-weight: 500; color: var(--ink); }
.rb-t td { font-family: var(--mono); font-size: 15px; color: var(--text); }
.rb-wrap td:last-child { font-family: var(--sans); font-size: 15px; }
.rb-t td:nth-child(2) { white-space: nowrap; }
.rb-t a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.rb-t a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.rb-t .rb-hot th, .rb-t .rb-hot td { background: var(--silian); }
.rb-narrow { max-width: 480px; }
.rb-barcol { width: 24%; }
.rb-bar { display: block; height: 10px; margin-top: 7px; background: var(--silian); }
.rb-bar span { display: block; height: 100%; background: var(--accent); }

/* the lookup */
.rb-look { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 16px; }
.rb-look[hidden] { display: none; }
.rb-look label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; max-width: 360px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rb-look select { min-height: 52px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--stock); color: var(--ink); font: 400 18px var(--sans); }
.rb-look select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.rb-look input { min-height: 52px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--stock); color: var(--ink); font: 400 18px var(--mono); width: 100%; }
.rb-look input::placeholder { color: var(--muted); font-family: var(--sans); font-size: 16px; }
.rb-look input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.rb-answer { padding: 24px; border: 2px solid var(--ink); background: var(--stock); }
.rb-answer h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 32px; font-weight: 500; }
.rb-price { margin: 0 0 16px !important; font-family: var(--mono); font-size: clamp(28px, 4vw, 40px); color: var(--ink) !important; }
.rb-price span { font-family: var(--sans); font-size: 16px; color: var(--text-2); }
.rb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 24px; margin: 0 0 16px; border-top: 1px solid var(--rule); }
.rb-facts > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.rb-facts dd { margin: 4px 0 0; font-size: 17px; color: var(--ink); }
.rb-meter { position: relative; height: 14px; margin: 8px 0 4px; background: var(--silian); border: 1px solid var(--ink); }
.rb-meter span { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: var(--accent); }
.rb-meter-k { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted) !important; }
.rb-chip { min-height: 40px; margin: 4px 4px 0 0; }

.rb-city[hidden] { display: none; }
.rb-seasons .rb-m { width: 2.4em; padding-left: 2px; padding-right: 2px; text-align: center; font-family: var(--sans); }
.rb-dot { color: var(--accent); font-size: 18px; line-height: 1; }
.rb-nodot { color: var(--rule); }
.rb-also { margin: 0 0 16px; padding-left: 20px; font-size: 15px; color: var(--text-2); }
.rb-also li { margin-bottom: 4px; }
.rb-index { columns: 3 220px; column-gap: 32px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.rb-index li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.rb-index a { color: var(--text); text-decoration: none; }
.rb-index a:hover { color: var(--accent); text-decoration: underline; }

/* the full sheet: area names stay pinned while it scrolls sideways */
.rb-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.rb-views button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.rb-scroll-hint { display: none; font-size: 14px !important; color: var(--text-2) !important; }
.rb-sheet { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ink); background: var(--stock); font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.rb-sheet th, .rb-sheet td { border-bottom: 1px solid var(--rule); }
.rb-sheet thead th { padding: 10px 8px; background: var(--silian); border-bottom-color: var(--ink); text-align: right; font: 600 13px var(--sans); color: var(--ink); }
.rb-sheet thead th abbr { text-decoration: none; cursor: help; }
.rb-sheet tbody th, .rb-sheet .rb-corner { position: sticky; left: 0; z-index: 1; padding: 10px 12px; text-align: left; background: var(--stock); border-right: 1px solid var(--ink); font: 500 15px var(--sans); color: var(--ink); white-space: nowrap; }
.rb-sheet .rb-corner { background: var(--silian); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rb-sheet td { padding: 0; text-align: right; white-space: nowrap; border-left: 1px solid var(--rule); }
.rb-sheet td > a, .rb-sheet td > span { display: block; padding: 10px 8px; color: inherit; text-decoration: none; }
.rb-sheet td > a:hover { color: var(--accent); text-decoration: underline; }
.rb-sheet td > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rb-sheet .rb-big-move { background: var(--silian); color: var(--ink); font-weight: 500; }
.rb-sheet .rb-none { color: var(--rule); }
.rb-sheet.rb-words td { white-space: normal; min-width: 7.5em; font-family: var(--sans); font-size: 13px; text-align: left; }
.rb-empty { margin-top: 32px !important; color: var(--muted); }
@media (max-width: 860px) {
  .rb { padding-top: 32px; }
  .rb-stamp { width: 100%; }
  .rb-scroll-hint { display: block; }
  .rb-sheet tbody th { white-space: normal; min-width: 6.5em; max-width: 8.5em; font-size: 14px; line-height: 1.3; }
  .rb-sec { margin-top: 56px; }
}
@media (max-width: 600px) {
  .rb-stamp dd { white-space: normal; }   /* a long value ("9:00 AM CDT · 3 h ago, old reading") wraps instead of running off a phone */
  .rb-barcol { display: none; }
  .rb-t th, .rb-t td { padding: 8px 8px; }
  .rb-t td { font-size: 14px; }
  .rb-look label { max-width: none; }
  .rb-answer { padding: 16px; }
  /* on a phone, these tables become one small card per row, labels on the left */
  .rb-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rb-stack, .rb-stack tbody, .rb-stack tr { display: block; width: 100%; }
  .rb-stack tr { padding: 8px 0; border-bottom: 1px solid var(--ink); }
  .rb-stack tbody th { display: block; padding: 4px 12px; border: 0; font-size: 17px; }
  .rb-stack td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 12px; border: 0; white-space: normal !important; text-align: right; }
  .rb-stack td::before { content: attr(data-label); flex: none; font: 600 14px var(--sans); color: var(--muted); text-align: left; }
  .rb-stack td.rb-barcol { display: none; }
  .bw .rb-stack td.bw-nolane { display: none; }   /* a lane the crossing doesn't have: no empty line on its card */
}

/* lane pages: the same sheet, one lane at a time */
.rb-note { margin: 16px 0 0 !important; max-width: 48em; font-size: 16px; color: var(--text-2); }
.rb-judge { margin-top: 32px; padding: 20px 24px; border: 2px solid var(--ink); background: var(--stock); max-width: 760px; }
.rb-judge .rb-tag { margin: 0 0 4px !important; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.rb-judge .rb-say { margin: 0 !important; font-family: var(--serif); font-size: 26px; line-height: 1.3; color: var(--ink); }
.rb-lane-back { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.rb-lane-back:hover { color: var(--ink); }
.rb-block { margin-top: 48px; }
.rb-block > h2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--ink); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.rb-block > h2 span { font-weight: 400; color: var(--muted); }
.rb-lede { margin: 16px 0 0 !important; max-width: 46em; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.rb-lede strong { color: var(--ink); font-weight: 500; }
.rb-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); background: var(--stock); }
.rb-table th, .rb-table td { padding: 9px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.rb-table thead th { background: var(--silian); border-bottom-color: var(--ink); font: 500 10px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rb-table tbody th { font: 400 13px var(--sans); color: var(--ink); }
.rb-table a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.rb-table a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.rb-table .rb-here > * { color: var(--accent); font-weight: 500; }
.rb-chart { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; border: 1px solid var(--ink); background: var(--stock); }
.rb-chart svg { width: 100%; height: 240px; display: block; border-bottom: 1px solid var(--ink); }
.rb-chart .band { fill: var(--silian); }
.rb-chart .line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rb-chart figcaption { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.rb-cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.rb-cols > * { flex: 1 1 360px; min-width: 0; }
@media (max-width: 600px) { .rb-chart svg { height: 180px; } }
/* ---------- Border waits (/border-waits/ and its crossing pages) ----------
   The reefer board's components (.rb) plus the heat map of the usual wait by day and hour. The
   five steps are the accent at rising strength, so they follow the theme. Scoped under .bw. */
.bw .rb-stamp dd span { font-family: var(--sans); font-size: 14px; }
.bw-heat { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 2px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.bw-heat th { padding: 4px 8px; font: 500 12px var(--sans); color: var(--muted); text-align: center; }
.bw-heat tbody th { text-align: right; white-space: nowrap; }
.bw-heat thead abbr { text-decoration: none; }
.bw-heat td { height: 30px; text-align: center; color: var(--ink); }
.bw-l0 { background: var(--silian); }
.bw-l1 { background: color-mix(in srgb, var(--accent) 25%, var(--silian)); }
.bw-l2 { background: color-mix(in srgb, var(--accent) 50%, var(--silian)); }
.bw-l3 { background: color-mix(in srgb, var(--accent) 75%, var(--silian)); color: var(--on-ink) !important; }
.bw-l4 { background: var(--accent); color: var(--on-ink) !important; }
.bw-heat .bw-none { color: var(--rule); }
.bw-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.bw-key li { display: flex; align-items: center; gap: 8px; }
.bw-key span { display: inline-block; width: 16px; height: 16px; }
.bw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bw-hours .rb-table td:nth-child(2) { width: 6em; }
.bw-stale { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid currentColor; font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bw-copy { margin-top: 12px !important; font-size: 14px; }
.bw-quick { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 0 !important; max-width: none !important; font-size: 15px; }
.bw-quick span { font-weight: 600; color: var(--ink); }
.bw-quick a { color: var(--text); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.bw-quick a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.bw-near td { white-space: nowrap; }
.bw-lang { margin: 12px 0 0 !important; font-size: 15px; font-weight: 500; }
.bw-lang a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.bw-lang a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.bw-alias { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); }
.bw-faq { max-width: 48em; }
.bw-faq h3 { margin: 24px 0 6px; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.bw-faq p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.bw-faq .rb-note { margin-top: 24px !important; }
@media (max-width: 520px) { .bw-near th:nth-child(4), .bw-near td:nth-child(4) { display: none; } .bw-near th, .bw-near td { padding-left: 8px; padding-right: 8px; } }
/* ---------- Beef prices (/beef-prices/ and its cut pages) ----------
   The reefer board's components (.rb) plus a second chart line (Select, dashed in the secondary
   ink), the year-by-month grids and the seasonal strip. Scoped under .bf. */
.bf .rb-block > h3, .bf .bf-h3, .bw .bf-h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--ink); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.bf .rb-block > h3 span, .bf .bf-h3 span, .bw .bf-h3 span { font-weight: 400; color: var(--muted); }
.bf .bf-h3, .bw .bf-h3 { margin-top: 32px; }
.bf .rb-chart .line2 { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.bf-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.bf-key li { display: flex; align-items: center; gap: 8px; }
.bf-swatch { display: inline-block; width: 24px; height: 0; border-top: 2px solid var(--accent); }
.bf-swatch2 { border-top: 2px dashed var(--text-2); }
.bf-sw-line2 { border-top: 2px dashed var(--text-2); }
.bf-sw-line3 { border-top: 2px dotted var(--ink); }
.bf-sw-line4 { border-top: 1px solid var(--muted); }
.bf .rb-chart .line3 { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bf .rb-chart .line4 { fill: none; stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ub-list li strong { font-weight: 500; color: var(--ink); }
.ub-why { margin: 0; padding-left: 20px; max-width: 760px; }
.ub-why li { margin: 0 0 12px; line-height: 1.6; }
.ub-why strong { font-weight: 500; color: var(--ink); }
.bf-tag, .bf-code { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--rule); font: 500 11px/1.6 var(--sans); letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.bf-code { font-family: var(--mono); letter-spacing: 0; }
.bf-was { font-family: var(--sans); font-size: 13px; color: var(--muted); white-space: nowrap; }
.bf-cuts td:nth-child(2) { color: var(--muted); }
.bf-grid { min-width: 720px; }
.bf-grid th, .bf-grid td { padding: 8px 6px; text-align: right; }
.bf-grid th:first-child, .bf-grid tbody th { text-align: left; }
.bf-grid td:last-child, .bf-grid th:last-child { border-left: 1px solid var(--ink); }
.bf-season { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--ink); background: var(--ink); }
.bf-season li { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; background: var(--stock); font: 400 13px var(--mono); text-align: center; color: var(--text); }
.bf-season li span { font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bf-season .bf-hi { background: color-mix(in srgb, var(--accent) 25%, var(--stock)); color: var(--ink); font-weight: 500; }
.bf-season .bf-lo { background: var(--silian); color: var(--ink); }
.bf-dict code { font-family: var(--mono); font-size: 14px; }
.bf-live { padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--stock); color: var(--ink) !important; }
/* the tools: find a cut on the board, check a price and the trim cost on a cut page (beef-prices/tools.js) */
.bf tr[hidden], .bf .bf-group[hidden], .bf section[hidden], .bf-tools[hidden], .bf-find[hidden], .bf-find-n[hidden] { display: none !important; }
/* The boards' tools (data-js-show) are hidden in the HTML so a reader without JavaScript never sees a form that does
   nothing. With JavaScript (head.html sets .has-js before the first paint) they take their place from the start, rather
   than being shown by their script a moment later and pushing the page down (layout shift). */
.has-js [data-js-show][hidden] { display: block !important; }
.has-js .rb-look[data-js-show][hidden] { display: flex !important; }
/* "Update now" waits on the Worker's answer: its space is kept, invisible, until then. */
.has-js .rb-update[data-js-show][hidden] { display: flex !important; visibility: hidden; }
.bf-find { margin-top: 16px; }
.bf-find label { max-width: 520px; flex-basis: 100%; }
.bf-px { display: inline-block; }
.bf-cwt { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.bf-cuts strong, .rb-t .bf-px strong { font-weight: 500; color: var(--ink); }
.bf-also { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.bf-tools .rb-answer { max-width: 760px; }
.bf-tools .rb-tag { margin: 0 0 4px !important; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bf-calc label { flex: 1 1 180px; }
.rb-look .bf-btn-label { flex: 0 0 auto; }
.rb-look select { width: 100%; max-width: 100%; }   /* a long option (a cut and its price) never widens the page */
#pl-near .rb-table th, #bg-out .rb-table th { white-space: normal; }   /* long bridge and cut names wrap */
.rb-look .bf-btn-label .rb-btn { min-height: 52px; }
.bf-tools .rb-answer .rb-table { margin: 8px 0 12px; }
.bw-plan { max-width: 520px; margin-top: 12px; }
.bw-plan .bw-plan-bar { width: 45%; }
.bw-plan-bar span { display: block; height: 10px; background: var(--accent); min-width: 2px; }
.bf-tools .rb-price span { display: block; margin-top: 4px; line-height: 1.5; }   /* the sentence under a big figure, not beside it */
.bf-live[hidden] { display: none; }
.bf-dict td:nth-child(2), .bf-fat td:nth-child(2) { white-space: normal; }   /* words, not figures */
.bf-dict tbody th { font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.bf-fat { margin: 8px 0 16px; max-width: 560px; }
.bf-fat tbody th { width: 9em; font-family: var(--mono); }
@media (max-width: 600px) {
  .bf-season { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bf .rb-stack td.bf-empty { display: none; }   /* a cut with no Select sale that day: no empty lines on its card */
  .bf-dict tbody th { white-space: normal; }
}
/* ---------- YouTube (/youtube/) ----------
   A "gamer" page on night stock: HUD frames (2px), uppercase mono labels, square thumbnails.
   Scoped under .yt. */
.yt { padding-top: 56px; display: flex; flex-direction: column; gap: 48px; }
.yt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 32px; }
.yt-title { flex: 1 1 520px; min-width: 0; }
.yt h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5.5vw, 68px); line-height: 1; color: var(--ink); }
.yt-lede { margin: 16px 0 0 !important; max-width: 40em; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.yt-sub { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px; background: var(--accent); color: var(--on-ink); font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background 0.15s; }
.yt-sub:hover { background: var(--ink); }
.yt-sub svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.yt-hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--rule); border: 2px solid var(--rule); }
.yt-stat { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--stock); }
.yt-stat .l, .yt-block > h2, .yt-meta, .yt-len, .yt-chip, .yt-row .d, .yt-row .k, .yt-row .m { font-family: var(--mono); }
.yt-stat .l { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.yt-stat .n { font-family: var(--mono); font-size: clamp(26px, 4vw, 34px); line-height: 1; color: var(--ink); }
.yt-stat.hot .n { color: var(--accent); }
.yt-note { margin: 0 !important; padding: 16px 0; font-size: 14px; color: var(--muted); }
.yt-pair { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.yt-pair > :first-child { flex: 999 1 520px; min-width: 0; }
.yt-pair > :last-child { flex: 1 1 340px; min-width: 0; }
.yt-block > h2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.yt-block > h2 span { font-weight: 400; color: var(--muted); letter-spacing: 0.08em; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--silian); }
.yt-thumb.tall { aspect-ratio: 9 / 16; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-len { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; background: var(--ground); font-size: 12px; color: var(--ink); }
.yt-feature { display: flex; flex-direction: column; border: 2px solid var(--rule); background: var(--stock); text-decoration: none; transition: border-color 0.15s; }
.yt-feature:hover { border-color: var(--accent); }
.yt-feature-t { padding: 16px 18px 0; font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.yt-meta { padding: 8px 18px 16px; font-size: 12px; color: var(--muted); }
.yt-shorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.yt-short { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.yt-short .yt-thumb { border: 2px solid var(--rule); transition: border-color 0.15s; }
.yt-short:hover .yt-thumb { border-color: var(--accent); }
.yt-short-t { font-size: 13px; line-height: 1.35; color: var(--text); }
.yt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.yt-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--rule); background: var(--stock); font-size: 12px; color: var(--text); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.yt-chip:hover { border-color: var(--accent); color: var(--ink); }
.yt-log { border-top: 2px solid var(--rule); }
.yt-row { display: grid; grid-template-columns: 136px 56px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.yt-row:not(:has(.k)) { grid-template-columns: 136px minmax(0, 1fr); }
.yt-row .d { font-size: 12px; color: var(--muted); }
.yt-row .k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.yt-row .t { font-size: 15px; color: var(--text); transition: color 0.15s; }
a.yt-row:hover .t { color: var(--accent); }
.yt-row .m { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 860px) { .yt { padding-top: 32px; } }
@media (max-width: 600px) {
  .yt-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .yt-row .d { grid-column: 1; } .yt-row .k { grid-column: 2; text-align: right; } .yt-row .t { grid-column: 1 / -1; } .yt-row .m { grid-column: 1 / -1; }
  .yt-row:not(:has(.k)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the house TV (/watching/) ----------
   A "chill" page on night stock: softer contrast, italic serif, big poster, lots of air. It
   reuses the board components above and only restyles them here, under .tv. */
.tv { padding-top: 80px; }
.tv-head { max-width: 46em; }
.tv h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(56px, 8vw, 104px); line-height: 0.92; color: var(--ink); }
.tv-lede { margin: 24px 0 0 !important; font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--text-2); }
.tv .sec { margin-top: 112px; }
.tv .sec-head { border-top-color: var(--rule); }
.tv .sec-head h2 { font-family: var(--serif); font-style: italic; font-size: 34px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
.tv .np-card { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); padding: 40px 0 0; }
.tv .np-title { font-style: italic; font-size: clamp(56px, 8vw, 104px); line-height: 0.92; margin: 16px 0 8px !important; }
.tv .np-sub { font-family: var(--serif); font-size: 22px; }
.tv .np-meta { margin-top: 16px !important; font-size: 13px; }
.tv .bar { height: 2px; max-width: 420px; background: var(--silian); }
.tv .bar span { background: var(--accent); }
.tv .tile .n { font-style: italic; }
.tv .log { margin-top: 24px; border-top: 0; }
.tv .log-day { padding: 20px 0; border-bottom-color: var(--silian); }
.tv .log-item { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; }
.tv .log-item .msg { order: -1; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--text); }
.tv .log-item .label { grid-column: 2; grid-row: 1; align-self: center; color: var(--muted); }
.tv .log-item .data { grid-column: 1 / -1; }
.tv .deck { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 32px 24px; }
.tv .deck-item .deck-t { font-family: var(--serif); font-size: 18px; line-height: 1.25; }
@media (max-width: 860px) { .tv { padding-top: 48px; } .tv .sec { margin-top: 80px; } }
@media (max-width: 520px) { .tv .np-card { grid-template-columns: minmax(0, 1fr); } .tv .np-art { max-width: 220px; } }

/* ---------- the résumé (/resume/) ----------
   A "professional" page: one raised eggshell card on the bone page, like the home page's
   business card. Scoped under .cv; the print rules at the end make it a plain sheet. */
.cv { padding-top: 48px; }
.cv-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.cv-bar .family { margin: 0 !important; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-card { margin-top: 24px; padding: clamp(28px, 5vw, 64px); background: var(--stock); }
.cv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.cv h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6vw, 68px); line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.cv-tag { margin: 14px 0 0 !important; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.cv-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--text-2); }
.cv-contact a { color: var(--text-2); text-decoration: none; }
.cv-contact a:hover { color: var(--accent); }
.cv-profile { margin: 28px 0 0 !important; max-width: 46em; font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--text); }
.cv-cols { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 40px; }
.cv-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.cv-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding-left: 32px; border-left: 1px solid var(--rule); }
.cv h2 { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.cv-side h2 { margin-bottom: 12px; }
.cv-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--rule); }
.cv-when { margin: 6px 0 0 !important; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.cv h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--ink); }
.cv-role { margin: 4px 0 0 !important; font-size: 14px; font-weight: 500; color: var(--ink); }
.cv-role span { font-weight: 400; color: var(--text-2); }
.cv-roles { margin: 10px 0 0; padding: 0; list-style: none; }
.cv-roles li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 4px 0; font-size: 13px; color: var(--text-2); }
.cv-roles li span:last-child { font-family: var(--mono); font-size: 12px; }
.cv-points { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.65; color: var(--text); }
.cv-points li + li { margin-top: 4px; }
.cv-note { margin: 6px 0 0 !important; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.cv-courses { margin: 6px 0 0 !important; font-size: 13px; color: var(--text-2); }
.cv-list { font-size: 14px; line-height: 1.8; color: var(--text); }
.cv-side-t { margin-top: 10px !important; font-size: 14px; color: var(--text); }
.cv-side-t:first-of-type { margin-top: 0 !important; }
.cv-side-d { margin-top: 2px !important; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.cv-side-n { margin-top: 6px !important; font-size: 13px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 860px) { .cv { padding-top: 32px; } .cv-side { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); } .cv-contact { align-items: flex-start; } }
@media (max-width: 520px) { .cv-item { grid-template-columns: minmax(0, 1fr); gap: 4px; } .cv-profile { font-size: 19px; } }
@media print {
  .cv { padding-top: 0; }
  .cv-bar { display: none; }
  .cv-card { margin: 0; padding: 0; box-shadow: none; }
  .cv h1 { font-size: 30pt; }
  .cv-profile { font-size: 13pt; }
  .cv-cols { gap: 24pt; margin-top: 20pt; }
  .cv-item { padding: 10pt 0; break-inside: avoid; }
  .cv-points, .cv-list { font-size: 10pt; }
}

/* ---------- Projects (/projects/) ----------
   A "professional" page: a catalog of cards, the first one featured. A card takes its project's
   stock (a Gamer card carries .stock-night, so its tokens are the dark ones). Scoped under .pj. */
.pj { padding-top: 56px; }
.pj-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pj h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 7vw, 80px); line-height: 0.98; color: var(--ink); }
.pj-lede { margin: 20px 0 0 !important; max-width: 36em; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.pj-filter { display: flex; flex-wrap: wrap; border: 1px solid var(--ink); }
.pj-filter a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-left: 1px solid var(--ink); color: var(--ink); font: 500 11px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.pj-filter a:first-child { border-left: 0; }
.pj-filter a:hover, .pj-filter a:focus-visible { background: var(--ink); color: var(--on-ink); }
/* One section per group (projects.yml `group`): a heading and a line, then its cards. */
.pj-group { margin-top: 72px; scroll-margin-top: 24px; }
.pj-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; padding-top: 16px; border-top: 1px solid var(--ink); }
.pj-group-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4vw, 40px); line-height: 1.1; color: var(--ink); }
.pj-group-head p { margin: 0; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.pj-card { display: flex; flex-direction: column; background: var(--stock); color: var(--text); border-top: 2px solid var(--ink); }
.pj-card.stock-night { border-top-color: var(--accent); outline: 1px solid var(--rule); outline-offset: -1px; }
.pj-card[hidden] { display: none; }
.pj-lead { margin-top: 40px; border-top: 0; }
.pj-link { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 24px; text-decoration: none; }
.pj-lead .pj-link { padding: clamp(24px, 4vw, 48px); }
.pj-top { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.stock-night .pj-top { font-family: var(--mono); font-weight: 400; letter-spacing: 0.12em; }
.pj-fam { color: var(--accent); }
.pj-body { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.pj-lead .pj-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.pj-text { display: flex; flex-direction: column; gap: 12px; }
.pj-title { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--ink); transition: color 0.15s; text-wrap: balance; }
.pj-lead .pj-title { font-size: clamp(40px, 5vw, 56px); }
.pj-link:hover .pj-title { color: var(--accent); }
.pj-short { font-size: 15px; line-height: 1.55; color: var(--text); }
.pj-lead .pj-short { font-size: 17px; line-height: 1.6; }
.pj-metric { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.pj-art { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; display: block; margin-top: auto; border: 1px solid var(--rule); }
.pj-more { align-self: flex-start; margin: 0 24px 24px; font-size: 13px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.pj-lead .pj-more { margin: 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 40px); }
.pj-more:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (max-width: 860px) { .pj { padding-top: 32px; } .pj-lead .pj-body { grid-template-columns: minmax(0, 1fr); } .pj-group { margin-top: 56px; } }
@media (max-width: 520px) { .pj-filter { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .pj-filter a { border-left: 0; border-top: 1px solid var(--ink); padding: 10px 12px; } .pj-filter a:nth-child(-n+2) { border-top: 0; } .pj-filter a:nth-child(even) { border-left: 1px solid var(--ink); } }
@media (max-width: 400px) { .pj-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Writing (/blog/) ----------
   A "personal" page: a letter on an eggshell card, then the contents in one narrow serif column
   with the dates in the margin. Restyles the shared .entry markup under .wr. */
.wr { max-width: 760px; margin: 0 auto; padding-top: 72px; }
.wr-letter { padding: clamp(28px, 5vw, 56px); background: var(--stock); }
.wr h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(40px, 6vw, 60px); line-height: 1.02; color: var(--ink); }
.wr-lede { margin: 20px 0 0 !important; font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--text); }
.wr-letter .actions { margin-top: 32px; }
.wr .sec { margin-top: 72px; }
.wr .sec-head h2 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.wr .sec-head { border-top: 0; padding-top: 0; }
.wr .entry { grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; padding: 28px 0; border-bottom: 0; border-top: 1px solid var(--rule); }
.wr .entry > .key { grid-column: 1; padding-top: 8px; }
.wr .entry > .body { grid-column: 2; }
.wr .entry-head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.wr .entry .go { font-size: 10px; }
.wr .entry-title { font-size: 28px; line-height: 1.15; }
.wr .entry-text { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--text-2); }
.wr .entry:hover .entry-title { color: var(--accent); }
@media (max-width: 860px) { .wr { padding-top: 40px; } }
@media (max-width: 520px) { .wr .entry { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .wr .entry > .key, .wr .entry > .body { grid-column: 1; } }