/* ============================================================================
   judemakes build log — "The Ledger"

   A single-author log doesn't need an avatar on every row; repeating the same
   face is noise. Time is the information that actually separates one entry
   from the next, so on desktop time gets its own column and the hairline
   between that column and the text becomes the spine of the page.

   Mobile-first. Desktop overrides live in the two media blocks at the very
   bottom so they win against the base rules at equal specificity.
   ========================================================================= */

@font-face {
  font-family: 'Clash Display';
  src: url('fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Three faces, three jobs: the wordmark, the reading, the record. */
  --display: 'Clash Display', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --body: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Contrast against --paper, measured not guessed:
     ink 16.8:1 · muted 6.2:1 · faint 4.7:1 · accent 5.0:1 */
  --paper: #fbf8f7;
  --surface: #ffffff;
  --ink: #17181c;
  --muted: #585e68;
  --faint: #69707b;
  --accent: #c22f2f;
  --accent-deep: #9c2424;
  --hairline: #17181c1f;
  --hairline-soft: #17181c12;
  --hover: #17181c08;
  --focus: #c22f2f;

  --gutter: 104px;
  --spine-gap: 32px;
  --radius: 12px;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1013;
    --surface: #16181c;
    --ink: #f2efee;
    --muted: #a2a8b2;
    --faint: #868d97;
    --accent: #f08585;
    --accent-deep: #f5a3a3;
    --hairline: #f2efee24;
    --hairline-soft: #f2efee14;
    --hover: #f2efee0a;
    --focus: #f08585;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- shell -- */

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* --------------------------------------------------------------- sidebar -- */

.sidebar {
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
}

.identity {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  flex: none;
  /* Half the mark is near-black; on the dark theme that half would dissolve
     into the page, so a hairline ring keeps the circle readable in both. */
  box-shadow: 0 0 0 1px var(--hairline);
}

.identity-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.identity-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.identity-handle {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
}

.sidebar-bio {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 46ch;
}

.sidebar-nav {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
}

.sidebar-nav a {
  color: var(--muted);
  text-decoration: none;
}
.sidebar-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.sidebar-meta {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------------ log -- */

.log-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.log-standfirst {
  margin: 0 0 40px;
  color: var(--muted);
  font-size: 16px;
  max-width: var(--measure);
}

.month {
  margin-bottom: 8px;
}

.month-label {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry {
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--hairline-soft);
}

.entry:last-child {
  border-bottom: 0;
}

.entry-time {
  margin-bottom: 10px;
}

.entry-time a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  /* 12px type would leave a tap target under the 24px minimum. */
  min-height: 24px;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
}
.entry-time a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Stack the date over the clock explicitly. Relying on the gutter width to
   wrap them looked right only as long as the markup happened to contain a
   space in the right place. */
.entry-time time {
  display: inline-flex;
  gap: 6px;
}

.entry-time .clock {
  color: var(--faint);
  opacity: 0.75;
}

.entry-edited {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------- prose -- */

.prose {
  max-width: var(--measure);
  overflow-wrap: anywhere;
}

.prose p {
  margin: 0 0 0.85em;
  white-space: pre-wrap;
}
.prose p:last-child {
  margin-bottom: 0;
}

.prose a {
  color: var(--accent);
}

.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--hairline-soft);
  padding: 0.12em 0.36em;
  border-radius: 4px;
}

.prose pre {
  margin: 0 0 0.85em;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow-x: auto;
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}

/* ----------------------------------------------------------------- media -- */

.media {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  border-radius: var(--radius);
  overflow: hidden;
}

.media.count-1 {
  grid-template-columns: 1fr;
}
.media.count-2,
.media.count-3,
.media.count-4 {
  grid-template-columns: 1fr 1fr;
}
.media.count-3 > :first-child {
  grid-row: span 2;
}

.frame {
  position: relative;
  display: block;
  min-width: 0;
  background: var(--hairline-soft);
  overflow: hidden;
}

.frame img,
.frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media.count-1 .frame {
  max-height: 640px;
}
.media.count-1 .frame img,
.media.count-1 .frame video {
  object-fit: contain;
}

.media:not(.count-1) .frame {
  aspect-ratio: 1 / 1 !important;
}

/* The lead cell of a three-up spans both rows, so it must stretch to the
   row pair rather than hold the square ratio the others use. */
.media.count-3 > .frame:first-child {
  aspect-ratio: auto !important;
  height: 100%;
}

.frame video {
  background: #000;
}

.alt-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border-radius: 4px;
  background: #000000b8;
  color: #fff;
}

.files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  max-width: var(--measure);
}

.file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease-out;
}
.file:hover {
  border-color: var(--accent);
}

.file-name {
  font-weight: 500;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}

/* ----------------------------------------------------------------- misc -- */

.more {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 10px 20px;
  background: none;
  cursor: pointer;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.more:hover {
  border-color: var(--accent);
  background: var(--hover);
}

.empty {
  padding: 64px 0;
  color: var(--faint);
  max-width: var(--measure);
}

.backlink {
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.backlink:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================ desktop ==== */

/* From 720px the ledger appears: time moves into its own column and the
   hairline between the columns runs as one continuous spine. */
@media (min-width: 720px) {
  .entry {
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    padding: 0;
    border-bottom: 0;
  }

  .entry-time {
    margin: 0;
    padding: 24px 20px 0 0;
    text-align: right;
  }

  .entry-time a {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .entry-time time {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .entry-body {
    border-left: 1px solid var(--hairline);
    padding: 24px 0 40px var(--spine-gap);
    transition: background 150ms ease-out;
  }

  .entry:hover .entry-body {
    background: var(--hover);
  }

  .month-label {
    padding: 12px 0 12px calc(var(--gutter) + var(--spine-gap));
  }

  .log-title {
    font-size: 31px;
  }
}

/* From 1080px the identity block becomes a sticky rail, so the log keeps a
   comfortable measure instead of stretching across the window. */
@media (min-width: 1080px) {
  .shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 64px;
    padding-top: 72px;
    align-items: start;
  }

  .sidebar {
    position: sticky;
    top: 72px;
    padding: 0;
    margin: 0;
    border-bottom: 0;
  }

  .identity {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .mark {
    width: 64px;
    height: 64px;
  }

  .identity-name {
    font-size: 25px;
  }

  .sidebar-nav {
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
  }

  .sidebar-meta {
    margin-top: 28px;
  }

  .log {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}