/* Guide pages (/guides/<slug>/): long-form prose in the approved portfolio art direction. Tokens only.
   Layout: monumental head, a "your photo → the shot" pair hung like the home's wall, then the article
   with a sticky contents rail on wide screens. CTA inserts (.x-gcta) sit at fixed points in the body. */
.x-guide { padding-block: var(--ds-space-8) var(--ds-space-16, 8rem); }
.x-guide__head { padding-block: var(--ds-space-6) var(--ds-space-10); }
.x-guide .ds-breadcrumb { margin-block-end: var(--ds-space-8); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .04em; }
.x-guide__h1 { margin: 0; font-family: var(--ds-font-display); font-weight: 400; font-size: clamp(42px, 6.4vw, 104px); line-height: .95; letter-spacing: -.03em; color: var(--ds-ink); text-wrap: balance; max-inline-size: 18ch; }
.x-guide__h1 em { letter-spacing: -.015em; }
.x-guide__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-5); margin: var(--ds-space-6) 0 0; padding: 0; list-style: none; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-muted); }

/* the pair: your photo, small, beside the shot it became (as the home's opening wall) */
.x-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--ds-space-8); align-items: end; margin-block: 0 var(--ds-space-12); }
.x-pair figure { margin: 0; }
.x-pair img { display: block; inline-size: 100%; block-size: auto; background: var(--ds-surface-2); }
.x-pair__from img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 640px) { .x-pair { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--ds-space-4); } }

/* article + contents rail */
.x-guide__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-10); }
@media (min-width: 1100px) { .x-guide__grid { grid-template-columns: 15rem minmax(0, 46rem); justify-content: center; gap: var(--ds-space-16, 8rem); } }
.x-toc { display: none; }
@media (min-width: 1100px) {
  .x-toc { display: block; position: sticky; inset-block-start: calc(var(--_tb) + var(--ds-space-8)); align-self: start; }
  .x-toc__h { margin: 0 0 var(--ds-space-3); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-ink-muted); }
  .x-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); counter-reset: toc; }
  .x-toc li { counter-increment: toc; display: grid; grid-template-columns: 2.2em 1fr; font-size: var(--ds-text-sm); line-height: 1.35; }
  .x-toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-ink-faint); padding-block-start: .15em; }
  .x-toc a { color: var(--ds-ink-2); text-decoration: none; }
  .x-toc a:hover, .x-toc a:focus-visible { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 3px; }
}

.x-prose { font-size: var(--ds-text-md); line-height: var(--ds-lh-prose); color: var(--ds-ink-2); }
.x-prose > :first-child { margin-block-start: 0; }
.x-prose p, .x-prose ul, .x-prose ol { margin: 0 0 1.1em; max-inline-size: 68ch; text-wrap: pretty; }
.x-prose li { margin-block-end: .55em; padding-inline-start: .2em; }
.x-prose ul, .x-prose ol { padding-inline-start: 1.3em; }
.x-prose strong { color: var(--ds-ink); font-weight: 600; }
.x-prose a { color: var(--ds-ink-link); text-underline-offset: 3px; }
.x-prose h2 { margin: var(--ds-space-12) 0 var(--ds-space-4); padding-block-start: var(--ds-space-5); border-block-start: var(--ds-border-width) solid var(--ds-rule); font-family: var(--ds-font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -.015em; color: var(--ds-ink); text-wrap: balance; scroll-margin-top: calc(var(--_tb) + var(--ds-space-6)); }
.x-prose h3 { margin: var(--ds-space-8) 0 var(--ds-space-2); font-size: var(--ds-text-lg); font-weight: 600; color: var(--ds-ink); }

/* shots inside the article: the home's exhibition label, never cropped */
.x-shot { margin: var(--ds-space-10) 0; }
.x-shot img { display: block; inline-size: 100%; block-size: auto; background: var(--ds-surface-2); }
.x-shot--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-4); }
.x-shot--pair > figure { margin: 0; }
.x-shot--verdict .x-label__title { text-decoration: line-through; text-decoration-color: var(--ds-accent); text-decoration-thickness: 2px; }

/* CTA inserts: a hairline row, one filled primary per view */
.x-gcta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-4) var(--ds-space-8); align-items: center; margin: var(--ds-space-10) 0; padding: var(--ds-space-6) 0; border-block: var(--ds-border-width) solid var(--ds-rule); }
.x-gcta__k { margin: 0 0 var(--ds-space-1); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-ink-muted); display: flex; align-items: center; gap: var(--ds-space-2); }
.x-gcta__h { margin: 0; font-family: var(--ds-font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.01em; color: var(--ds-ink); }
.x-gcta__p { margin: var(--ds-space-2) 0 0; font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-inline-size: 52ch; }
@media (max-width: 640px) { .x-gcta { grid-template-columns: 1fr; } }

.x-guide__end { margin-block-start: var(--ds-space-16, 8rem); }
.x-guide__sources { margin-block-start: var(--ds-space-12); }
.x-guide .ds-cta-block { margin-block-start: var(--ds-space-12); }