/* ============================================================================
   styles.css — every style for the site, in one file.
   ----------------------------------------------------------------------------
   Loaded once from index.html. Organised top-to-bottom as:

     1. Design tokens .......... colours & fonts (CSS variables)
     2. Reset & document ....... base element defaults
     3. Overlays ............... custom cursor + page-transition wash
     4. Layout shell ........... the sidebar + main two-column frame
     5. Sidebar ................ navigation tree + live widgets + music
     6. Main content ........... headings, prose, code blocks, badges
     7. Projects ............... the spacious project cards
     8. Image slots ............ placeholder boxes you swap real images into
     9. Responsive ............. phone / tablet tweaks

   The colour tokens are rewritten live by src/app.jsx whenever the theme or
   accent changes, so the values here are just the pre-React defaults.
   Class prefix note: classes start with `rm-` (the original name) or `pf-`
   (newer "portfolio" additions) — they're all part of this one design.
   ============================================================================ */

/* ── 1. Design tokens ──────────────────────────────────────────────────────
   Overwritten at runtime by app.jsx (see THEMES / ACCENTS there). */
:root {
  --ink:    #1c1a17;                 /* primary text / foreground            */
  --paper:  #f7f4ee;                 /* page background                      */
  --panel:  #ece8df;                 /* cards, code blocks, hover fills      */
  --rule:   rgba(28, 26, 23, .14);   /* hairline borders & dividers          */
  --muted:  rgba(28, 26, 23, .55);   /* secondary / de-emphasised text       */
  --accent: oklch(0.52 0.04 240);    /* the single accent colour             */
  --density: 1;                      /* reading-density multiplier           */

  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Fraunces", "IBM Plex Serif", Georgia, serif;
}

/* ── 2. Reset & document defaults ──────────────────────────────────────── */
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--paper); }

/* When the custom cursor is on we hide the OS cursor (app.jsx sets the attr). */
body[data-cursor="on"], body[data-cursor="on"] * { cursor: none !important; }

/* ── 3a. Page-transition wash ───────────────────────────────────────────────
   A panel that slides up to cover the page, swaps the content behind it, then
   slides away — used between "home" and "projects". Driven by useWash() in
   src/app.jsx, which toggles .on / .out. */
.px-wash {
  position: fixed; inset: 0; background: var(--ink); color: var(--paper);
  z-index: 2147483640; pointer-events: none;
  transform: translateY(100%);                       /* parked below screen  */
  transition: transform .55s cubic-bezier(.7, 0, .2, 1);
}
.px-wash.on  { transform: translateY(0%); }          /* covers the screen    */
.px-wash.out { transform: translateY(-100%); }       /* exits upward         */
.px-wash .lbl {
  position: absolute; left: 28px; bottom: 28px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; opacity: .8;
}

/* ── 3b. Custom cursor ───────────────────────────────────────────────────────
   The glyphs are rendered by CustomCursor in src/app.jsx; this positions and
   blends them. mix-blend-mode keeps the cursor legible on any background. */
.cur {
  position: fixed; left: 0; top: 0; pointer-events: none;
  z-index: 2147483641; mix-blend-mode: difference; color: #fff; will-change: transform;
}
.cur-ring {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid currentColor; margin-left: -14px; margin-top: -14px;
  transition: width .18s, height .18s, margin .18s, border-radius .18s;
}
.cur-ring[data-hot="1"] { width: 44px; height: 44px; margin-left: -22px; margin-top: -22px; border-radius: 4px; }
.cur-label {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2147483642;
  transform: translate(20px, 20px); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em; color: var(--ink); opacity: .8;
  padding: 3px 6px; background: var(--paper); border: .5px solid var(--rule);
}
.cur-label:empty { display: none; }

/* ── 4. Layout shell ───────────────────────────────────────────────────────
   The whole page is a two-column grid: sticky sidebar + scrolling main. */
.rm-root {
  min-height: 100vh; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans);
  font-size: calc(15.5px * var(--density, 1)); line-height: 1.65;
}
.rm-layout {
  display: grid; grid-template-columns: 288px 1fr;
  min-height: 100vh; max-width: 1520px; margin: 0 auto;
}

/* ── 5. Sidebar ──────────────────────────────────────────────────────────── */
.rm-side {
  border-right: 1px solid var(--rule); padding: 28px 24px 60px;
  font-family: var(--font-mono); font-size: 13px;
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
}
.rm-side .rm-menu-btn { display: none; }              /* mobile-only button   */

.rm-id { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.rm-av {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), var(--ink) 50%));
  display: grid; place-items: center;
  color: var(--paper); font-family: var(--font-serif); font-size: 18px; font-weight: 500;
}
.rm-id .who { line-height: 1.2; }
.rm-id .who b { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--ink); }
.rm-id .who span { color: var(--muted); font-size: 11px; letter-spacing: .02em; }

.rm-tree { margin-top: 8px; }
.rm-tree .group {
  color: var(--muted); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; margin: 18px 0 6px;
}
.rm-tree a, .rm-tree button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 4px 8px; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted); text-decoration: none;
  font: inherit; cursor: pointer; transition: color .12s, background .12s;
}
.rm-tree a:hover, .rm-tree button:hover { color: var(--ink); background: var(--panel); }
.rm-tree a[data-on="1"], .rm-tree button[data-on="1"] {
  color: var(--ink); background: var(--panel); box-shadow: inset 2px 0 0 var(--accent);
}
.rm-tree .icon { width: 14px; flex-shrink: 0; color: var(--rule); }
.rm-tree .icon.on { color: var(--accent); }
.rm-tree .nested { padding-left: 18px; }
.rm-tree .nested button span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rm-side-meta {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 11px; line-height: 1.7;
}
.rm-side-meta .row { display: flex; justify-content: space-between; gap: 12px; }
.rm-side-meta .row b { color: var(--ink); font-weight: 500; }

/* Live widgets block (clock, weather, music) */
.rm-extras {
  margin-top: 36px; padding: 14px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--paper); display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.45;
}
.rm-extras .city {
  display: flex; align-items: center; gap: 8px; color: var(--muted);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.rm-extras .city::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent); display: inline-block;
}
.rm-extras .time {
  font-family: var(--font-serif); font-size: 24px; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; margin: 2px 0;
}
.rm-extras .time small {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  margin-left: 6px; letter-spacing: .06em; text-transform: uppercase;
}
.rm-extras .weather { color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.rm-extras .weather .ic { font-size: 14px; }
.rm-extras .weather .t { font-variant-numeric: tabular-nums; }
.rm-extras .weather .l { color: var(--muted); }
.rm-extras .weather.loading { color: var(--muted); }

/* Tiny music player */
.rm-music {
  margin-top: 6px; padding: 10px 12px; background: var(--ink); color: var(--paper);
  border-radius: 6px; font-family: var(--font-mono); font-size: 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.rm-music .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rm-music .lbl { color: rgba(255,255,255,.4); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.rm-music .ctrl {
  appearance: none; border: 0; background: rgba(255,255,255,.08); color: var(--paper);
  width: 22px; height: 22px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: 10px; line-height: 1; padding: 0; transition: background .15s;
}
.rm-music .ctrl:hover { background: var(--accent); }
.rm-music .track { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.rm-music .bars { display: flex; align-items: end; gap: 2px; width: 14px; height: 14px; flex-shrink: 0; }
.rm-music .bars i { display: block; flex: 1; background: var(--accent); border-radius: 1px; height: 4px; transition: height .15s; }
.rm-music .bars[data-on="1"] i { animation: rmbars 0.9s ease-in-out infinite alternate; }
.rm-music .bars[data-on="1"] i:nth-child(2) { animation-delay: .15s; }
.rm-music .bars[data-on="1"] i:nth-child(3) { animation-delay: .3s; }
@keyframes rmbars { 0% { height: 3px; } 100% { height: 14px; } }
.rm-music .meta { flex: 1; min-width: 0; }
.rm-music .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); font-size: 11px; font-weight: 500; }
.rm-music .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.5); font-size: 10px; }
.rm-music .err { margin-top: 2px; color: rgba(255,255,255,.4); font-size: 10px; line-height: 1.4; }

/* ── 6. Main content ───────────────────────────────────────────────────────── */
.rm-main { padding: 40px 72px 96px; max-width: 1180px; }

.rm-crumbs {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  margin-bottom: 28px; display: flex; gap: 6px; align-items: center;
}
.rm-crumbs b { color: var(--ink); font-weight: 500; }
.rm-crumbs .sep { color: var(--rule); }

.rm-h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(40px, 5.5vw, 64px); letter-spacing: -.02em;
  line-height: 1.05; text-wrap: balance;
  /* Breathing room under the title + a short accent rule (::after) so the
     heading doesn't crowd the text beneath it. */
  position: relative; margin: 0 0 32px; padding-bottom: 22px;
}
.rm-h1::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 52px; height: 2px; background: var(--accent); border-radius: 2px;
}
.rm-h1 .hash { color: var(--rule); margin-right: 14px; font-weight: 300; }
.rm-h2 {
  font-family: var(--font-serif); font-weight: 400; font-size: 30px; letter-spacing: -.01em;
  margin: 48px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.rm-h2 .hash { color: var(--rule); margin-right: 10px; font-weight: 300; }
.rm-h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; margin: 28px 0 10px; }
.rm-h3 .hash { color: var(--rule); margin-right: 8px; font-weight: 300; }

.rm-prose p { margin: 0 0 14px; max-width: 66ch; text-wrap: pretty; }
.rm-prose strong { font-weight: 600; }
.rm-prose em { font-style: italic; }
.rm-prose a.link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.rm-prose a.link:hover { color: var(--accent); }
.rm-prose code, .rm-code-inline {
  font-family: var(--font-mono); font-size: 0.88em; padding: 1px 6px;
  background: var(--panel); border-radius: 4px; border: 1px solid var(--rule);
}
.rm-block {
  font-family: var(--font-mono); font-size: 13px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px;
  margin: 12px 0 20px; overflow-x: auto; line-height: 1.6;
}
.rm-block .cm { color: var(--muted); }
.rm-block .kw { color: var(--accent); }
.rm-block .str { color: color-mix(in oklab, var(--accent), var(--ink) 30%); }
.rm-block .lbl { color: var(--muted); user-select: none; padding-right: 16px; }

.rm-ul { margin: 0 0 18px; padding: 0; list-style: none; }
.rm-ul li { padding: 4px 0 4px 22px; position: relative; max-width: 70ch; }
.rm-ul li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

/* "Pinned" cards on the home page */
.rm-pin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0 28px; }
.rm-pin {
  border: 1px solid var(--rule); border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px; background: var(--paper);
  transition: border-color .15s, transform .15s; cursor: pointer; text-decoration: none;
}
.rm-pin:hover { border-color: var(--accent); transform: translateY(-1px); }
.rm-pin .head { display: flex; align-items: center; gap: 8px; }
.rm-pin .head svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.rm-pin .name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent); }
.rm-pin .desc { color: var(--ink); font-size: 14px; margin: 0; line-height: 1.5; }
.rm-pin .foot {
  display: flex; gap: 14px; margin-top: auto; font-family: var(--font-mono);
  font-size: 11px; color: var(--muted); align-items: center;
}
.rm-pin .lang { display: inline-flex; align-items: center; gap: 6px; }
.rm-pin .lang::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); }

/* GitHub contribution strip */
.rm-contrib-real {
  margin: 12px 0 24px; padding: 14px; border: 1px solid var(--rule);
  border-radius: 6px; background: var(--paper); overflow: hidden;
}
.rm-contrib-real img { width: 100%; display: block; height: auto; color: transparent; }
.rm-contrib-real .hint { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.rm-contrib-real .hint code { font-size: 0.9em; padding: 1px 5px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); }

/* Skills as inline badges */
.rm-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 18px; }
.rm-badges span {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 3px;
  background: var(--panel); border: 1px solid var(--rule); color: var(--ink);
}

/* Experience / education entries */
.rm-xp { padding: 16px 0; border-top: 1px solid var(--rule); }
.rm-xp:first-child { border-top: 0; padding-top: 6px; }
.rm-xp .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rm-xp h4 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 19px; }
.rm-xp .pd { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.rm-xp .org { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin: 2px 0 8px; }
.rm-xp p { margin: 6px 0 8px; max-width: 70ch; }

/* ── 7. Projects ─────────────────────────────────────────────────────────────
   Each project is its own roomy card. The big `gap` and card borders give the
   clear separation between projects that the cramped old list was missing. */
.pf-projects {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; margin: 28px 0 0;
}
.pf-project {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--paper); scroll-margin-top: 24px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pf-project:hover {
  border-color: color-mix(in oklab, var(--accent), var(--rule) 40%);
  box-shadow: 0 10px 40px -24px color-mix(in oklab, var(--accent), transparent 30%);
  transform: translateY(-2px);
}
.pf-project .cover { border-bottom: 1px solid var(--rule); min-height: 200px; aspect-ratio: 16 / 9; }
.pf-project .body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 0; flex: 1; }

/* index number + title row */
.pf-project .idx {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  letter-spacing: .08em;
}
.pf-project h2.pf-name {
  font-family: var(--font-serif); font-weight: 500; font-size: 27px;
  letter-spacing: -.01em; margin: 6px 0 0; line-height: 1.1;
}
.pf-project .meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.pf-project .meta b { color: var(--ink); font-weight: 500; }
.pf-project .sum { margin: 12px 0 16px; max-width: 60ch; text-wrap: pretty; }
.pf-project .links {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: auto; padding-top: 8px;
  font-family: var(--font-mono); font-size: 12px;
}
.pf-project .links a {
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--accent); padding-bottom: 1px;
}
.pf-project .links a:hover { color: var(--accent); }

/* compact index of project names at the very top of the page */
.pf-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.pf-index a {
  font-family: var(--font-mono); font-size: 12px; text-decoration: none;
  color: var(--muted); padding: 4px 10px; border: 1px solid var(--rule);
  border-radius: 999px; transition: color .12s, border-color .12s;
}
.pf-index a:hover { color: var(--ink); border-color: var(--accent); }

/* ── 8. Image slots ──────────────────────────────────────────────────────────
   Drop-in placeholder for a real image. Until you set the `image` field in
   data.js it shows a hatched box with a hint; once set it shows the photo.
   Used by project covers (sections/projects.jsx) and the gallery. */
.pf-imgslot {
  position: relative; overflow: hidden; background: var(--panel);
  display: block; width: 100%; height: 100%;
}
.pf-imgslot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-imgslot.empty {
  background:
    repeating-linear-gradient(45deg, var(--rule) 0 1px, transparent 1px 14px),
    var(--panel);
  display: grid; place-items: center;
}
.pf-imgslot.empty .note {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  color: var(--muted); text-align: center; padding: 12px; max-width: 90%;
}
.pf-imgslot.empty .note b { color: var(--ink); font-weight: 500; }
.pf-imgslot .cap {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--paper);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Gallery — masonry of natural-ratio photos, no captions. */
.rm-pho-grid { column-count: 3; column-gap: 14px; margin: 16px 0 28px; }
.rm-pho {
  break-inside: avoid; margin: 0 0 14px; padding: 0;
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  background: var(--panel); cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.rm-pho img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
.rm-pho:hover {
  border-color: color-mix(in oklab, var(--accent), var(--rule) 40%);
  box-shadow: 0 14px 44px -26px color-mix(in oklab, var(--accent), transparent 20%);
  transform: translateY(-2px);
}
.rm-pho:hover img { transform: scale(1.035); }

/* ── 9. Responsive ───────────────────────────────────────────────────────────
   Desktop is the two-column grid above. On tablets/phones the sidebar becomes
   a sticky top bar with a collapsible drawer, and type/grids tighten. */
/* Between phone and full desktop: single-column projects so cards stay roomy. */
@media (max-width: 1180px) and (min-width: 881px) {
  .pf-projects { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .rm-layout { grid-template-columns: 1fr; }

  .rm-side {
    position: sticky; top: 0; z-index: 50; padding: 14px 18px;
    border-right: 0; border-bottom: 1px solid var(--rule);
    background: color-mix(in oklab, var(--paper), transparent 8%);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    max-height: none; overflow: visible;
  }
  .rm-id { margin-bottom: 0; justify-content: space-between; }
  .rm-side .rm-menu-btn {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    appearance: none; cursor: pointer; border: 1px solid var(--rule);
    border-radius: 8px; background: var(--paper); color: var(--ink);
  }
  .rm-side .rm-menu-btn:active { background: var(--panel); }
  .rm-side .rm-menu-btn svg { width: 16px; height: 16px; }
  .rm-side-content {
    display: none; overflow-y: auto; margin: 14px -18px 0; padding: 14px 18px 18px;
    border-top: 1px solid var(--rule); max-height: calc(100vh - 80px);
  }
  .rm-side[data-open="1"] .rm-side-content { display: block; }

  .rm-main { padding: 24px 20px 64px; }
  .rm-h1 { font-size: clamp(32px, 8vw, 44px); margin-bottom: 26px; padding-bottom: 18px; }
  .rm-h1 .hash { margin-right: 10px; }
  .rm-h2 { font-size: 22px; margin: 36px 0 12px; }
  .rm-h3 { font-size: 18px; margin: 22px 0 8px; }
  .rm-prose p { font-size: 15px; }
  .rm-crumbs { margin-bottom: 22px; }
  .rm-pin-grid { grid-template-columns: 1fr; gap: 12px; }

  /* project cards stack: image on top, text below */
  .pf-projects { grid-template-columns: 1fr; gap: 20px; }
  .pf-project .cover { border-right: 0; border-bottom: 1px solid var(--rule); min-height: 180px; }
  .pf-project .body { padding: 22px 22px 24px; }
  .pf-project h2.pf-name { font-size: 23px; }

  .rm-block { font-size: 12px; padding: 12px 14px; }
  .rm-block .lbl { padding-right: 10px; }
  .rm-xp .hd { gap: 6px; }
  .rm-badges span { font-size: 10.5px; padding: 2px 7px; }
  .rm-contrib-real { padding: 10px; }
  .rm-pho-grid { column-count: 2; column-gap: 12px; }
  .rm-pho { margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .rm-root { font-size: calc(14.5px * var(--density, 1)); }
  .rm-main { padding: 20px 16px 56px; }
  .rm-h1 { font-size: 28px; line-height: 1.1; margin-bottom: 22px; padding-bottom: 16px; }
  .rm-h1 .hash { margin-right: 6px; }
  .rm-h2 { font-size: 20px; }
  .rm-h3 { font-size: 17px; }
  .rm-prose p { font-size: 14.5px; }
  .rm-crumbs { font-size: 11px; }
  .rm-side { padding: 12px 14px; }
  .rm-side-content { margin: 12px -14px 0; padding: 12px 14px 16px; }
  .rm-id .who b { font-size: 13px; }
  .rm-id .who span { font-size: 10px; }
  .rm-av { width: 36px; height: 36px; font-size: 16px; }
  .rm-extras .time { font-size: 20px; }
  .pf-project .body { padding: 20px 18px 22px; }
  .pf-project h2.pf-name { font-size: 21px; }
}