/* Block-built posts (Work, Journal). Loaded only by pages that render <Blocks>. Monochrome tokens from site.css; same column and radius tokens as the shared layer. */
.page-content { padding: 16px var(--ui-gutter) 6rem; }
/* same column as .ui-col: --ui-col wide, centred, --ui-gutter inset */
.page-content > * { width: min(100%, var(--ui-col)); margin-inline: max(0px, calc((100% - var(--ui-col)) / 2)) auto; }
/* (100vw includes a classic scrollbar, so the 2000px edge is ~half a scrollbar off: accepted) a full-bleed block's text sits at the column's left edge: the page gutter, or the centred 1600px column's edge on wide screens */
.page-content { --block-edge: max(var(--ui-gutter), (100vw - var(--ui-col)) / 2); }
[data-content] { counter-reset: ui-block-heading; --block-gap: clamp(32px, 4vw, 56px); }
[data-content] > * { margin-block: 0 var(--block-gap); }
[data-content] img { display: block; max-width: 100%; height: auto; }
/* Only nested figures (gallery items, before/after halves): a top-level figure keeps the block gap. */
[data-content] figure:not([data-content] > figure) { margin: 0; }
[data-content] figcaption { color: var(--muted); font-size: .85rem; line-height: 1.4; }
[data-content] figure > figcaption { margin-top: 8px; }
.ui-block-lead { max-width: 38rem; font-size: 16px; line-height: 1.55; }

/* hero */
.ui-block-hero { display: grid; gap: 1.2rem; }
.ui-block-hero h1 { max-width: 20ch; margin: 12px 0 16px; font-size: var(--h1-size); line-height: .96; letter-spacing: -.045em; overflow-wrap: anywhere; }
.ui-block-hero img, .ui-block-split > img { border-radius: var(--ui-r-card); }
.ui-block-hero--media-below .ui-block-hero-text { order: -1; }
.ui-block-hero--full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.ui-block-hero--full-bleed img { width: 100%; max-height: 80vh; object-fit: cover; }
.ui-block-hero--full-bleed .ui-block-hero-text { padding-inline: var(--block-edge); }

/* heading */
.ui-block-heading { max-width: 22ch; margin-top: calc(var(--block-gap) / 2); margin-bottom: 1rem; font-size: var(--ui-h2-size); overflow-wrap: anywhere; }
h3.ui-block-heading { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.ui-block-heading--numbered { counter-increment: ui-block-heading; }
.ui-block-heading small { display: block; margin-bottom: .5rem; color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
/* numbered: a big plain numeral (system font) above the heading */
.ui-block-heading--numbered::before { content: counter(ui-block-heading, decimal-leading-zero); display: block; margin-bottom: .6rem; color: var(--ui-ink-2); font-size: clamp(3rem, 2rem + 3.5vw, 5rem); font-weight: 700; line-height: .9; letter-spacing: -.06em; }

/* text */
.ui-block-text { max-width: 48rem; line-height: 1.55; }
/* prose measure = .content-sections p (48rem); the wide and two-column variants keep it and stay left-aligned */
@media (min-width: 900px) {
  .ui-block-text--two-col { columns: 1; }
}

/* image */
.ui-block-image img { width: 100%; border-radius: var(--ui-r-card); }
.ui-block-image a { display: block; }
.ui-block-image--full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.ui-block-image--full-bleed img, .ui-block-hero--full-bleed img { border-radius: 0; }
@media (min-width: 900px) {
  .ui-block-image--offset-left, .ui-block-image--offset-right { width: 70%; }
  .ui-block-image--offset-right { margin-left: auto; }
}
.ui-block-image--full-bleed figcaption { padding-inline: var(--block-edge); }

/* gallery */
.ui-block-gallery { display: grid; grid-template-columns: 1fr; gap: .75rem; padding: 0; list-style: none; }
.ui-block-gallery a { display: block; }
.ui-block-gallery figcaption { margin-top: .4rem; }
@media (min-width: 600px) {
  .ui-block-gallery--grid-2 { grid-template-columns: repeat(2, 1fr); }
  .ui-block-gallery--grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.ui-block-gallery--masonry { display: block; columns: 2; column-gap: .75rem; }
.ui-block-gallery--masonry li { break-inside: avoid; margin-bottom: .75rem; }
@media (min-width: 900px) { .ui-block-gallery--masonry { columns: 3; } }
.ui-block-gallery--masonry img { aspect-ratio: auto; }
.ui-block-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ui-r-card); }
.ui-block-gallery--strip { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ui-block-gallery--strip li { flex: 0 0 min(80vw, 28rem); scroll-snap-align: start; }

/* split */
.ui-block-split { display: grid; gap: 1.5rem; align-items: center; }
.ui-block-split-text h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
@media (min-width: 900px) {
  .ui-block-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .ui-block-split--media-right > img { order: 2; }
}

/* youtube */
.ui-block-youtube--contained { max-width: none; } /* owner: video spans the page column */
.ui-block-youtube--full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.ui-block-youtube--full-bleed figcaption { padding-inline: var(--block-edge); }
.ui-block-youtube-facade { position: relative; overflow: hidden; border-radius: var(--ui-r-card); display: block; aspect-ratio: 16 / 9; width: 100%; background: var(--ink); color: var(--paper); }
.ui-block-youtube-facade img { width: 100%; height: 100%; object-fit: cover; }
.ui-block-youtube-play { position: absolute; inset-inline: 0; bottom: 0; padding: 1rem; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.ui-block-youtube-frame { display: block; aspect-ratio: 16 / 9; width: 100%; border: 0; }

/* quote */
.ui-block-quote { max-width: 46rem; padding: 28px; }
.ui-block-quote p { margin: 0 0 .8rem; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.35; letter-spacing: -.02em; }
.ui-block-quote--large p { font-size: var(--ui-h2-size); line-height: 1.15; overflow-wrap: anywhere; }
.ui-block-quote cite { color: var(--muted); font-size: .9rem; font-style: normal; }

/* spec: grey tiles, the value leads (Stats look; values are text, so a smaller numeral) */
.ui-block-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 16px; }
.ui-block-spec > div { display: flex; flex-direction: column; min-height: 140px; padding: 24px; }
.ui-block-spec dd { order: 1; margin: 0; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; hyphens: auto; overflow-wrap: break-word; }
.ui-block-spec dt { order: 2; margin-top: auto; padding-top: 20px; color: var(--ui-ink-2); font-size: 15px; line-height: 1.35; }
.ui-block-spec--inline { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-block-spec--inline > div { display: block; min-height: 0; padding: 8px 16px; border-radius: 16px; }
.ui-block-spec--inline dt, .ui-block-spec--inline dd { display: inline; padding: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.ui-block-spec--inline dt::after { content: ": "; }

/* before / after: side by side; the slider variant overlays them once enhance.ts adds .is-compare */
.ui-block-before-after { display: grid; gap: .75rem; }
.ui-block-before-after img { width: 100%; border-radius: var(--ui-r-card); }
@media (min-width: 600px) { .ui-block-before-after { grid-template-columns: 1fr 1fr; } }
.ui-block-before-after.is-compare { position: relative; display: block; }
.ui-block-before-after.is-compare figure:first-child { position: relative; }
/* The second figure overlays the first; only its image is clipped, so both captions stay whole (left label left, right label right). */
.ui-block-before-after.is-compare figure:last-of-type { position: absolute; inset: 0; pointer-events: none; }
.ui-block-before-after.is-compare figure:last-of-type img { clip-path: inset(0 0 0 var(--compare, 50%)); }
.ui-block-before-after.is-compare figure:first-child figcaption { max-width: 50%; }
.ui-block-before-after.is-compare figure:last-of-type figcaption { max-width: 50%; margin-left: auto; text-align: right; }
.ui-block-before-after-range { position: absolute; z-index: 1; inset-inline: 0; top: 40%; width: 100%; height: 28px; margin: 0; background: transparent; appearance: none; cursor: ew-resize; }
.ui-block-before-after-range::-webkit-slider-runnable-track { height: 1px; background: var(--paper); }
.ui-block-before-after-range::-moz-range-track { height: 1px; background: var(--paper); }
.ui-block-before-after-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--paper); border-radius: 50%; background: var(--ink); }
.ui-block-before-after-range::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--paper); border-radius: 50%; background: var(--ink); }

/* cta: the shared CtaBand (.ui-cta in components.css/site.css) */

[data-content] > .ui-cta { margin-block: 0 var(--block-gap); }

/* divider */
.ui-block-divider { border: 0; border-top: 1px solid var(--line); }
.ui-block-divider--line { border-top-color: var(--ink); }
.ui-block-divider--space { border-top-color: transparent; margin-block: 0 clamp(2rem, 6vw, 5rem); }

/* zoomable images: the tile is a link to the full image; enhance.ts opens it in the lightbox */
.ui-block-gallery a, .ui-block-image a { cursor: zoom-in; }
.ui-block-gallery img, .ui-block-image img { transition: opacity .2s; }
.ui-block-gallery a:hover img, .ui-block-image a:hover img { opacity: .85; }
.ui-block-gallery a:focus-visible, .ui-block-image a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ui-block-gallery img, .ui-block-image img { transition: none; } }

/* lightbox (dialog created by enhance.ts) */
.ui-lightbox { max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; padding: 3.5rem 1rem 1rem; border: 0; background: var(--ink); color: var(--paper); }
.ui-lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; }
.ui-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.ui-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--ui-r-card); }
.ui-lightbox p { margin: .6rem 0 0; font-size: .9rem; }
.ui-lightbox button { position: absolute; width: 2.75rem; height: 2.75rem; border: 1px solid var(--paper); border-radius: var(--ui-radius); background: transparent; color: var(--paper); font-size: 1.4rem; cursor: pointer; }
.ui-lightbox button:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.ui-lightbox-close { top: .5rem; right: .5rem; }
.ui-lightbox-prev { top: 50%; left: .5rem; }
.ui-lightbox-next { top: 50%; right: .5rem; }

/* scroll reveal: only where supported and motion is allowed */
@keyframes content-reveal { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-content] > * { animation: content-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

/* post date and pager (list cards are MediaCard, components.css) */
.post-date { margin: 0 0 1.5rem; color: var(--muted); font-size: 13px; }
.post-card .post-date { margin-bottom: 0; }
.post-pager { display: flex; margin-top: 64px; gap: 1rem; align-items: center; justify-content: center; font-size: 15px; }
/* a closing band ends the post: full width again (the page column and gutter above constrain direct children) */
.page-content > .ui-band { width: auto; margin-inline: calc(-1 * var(--ui-gutter)); }