/* WHO IT'S FOR (2026-10-06). The route is the motif: the same seven stages everywhere, lit where this
   audience's work happens. Brand purple only on lit stops; everything else stays in the lifecycle's ink. */

.uc-head { max-width: 50rem; margin: 0 0 2.5rem; }
.uc-h1 { margin: .25rem 0 1rem; font-family: var(--display); font-size: clamp(2.25rem, 5.2vw, 4.25rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; max-width: 18ch; }
.uc-lede { margin: 0; font-size: var(--t-md); line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
.uc-h2 { margin: 0 0 .6rem; font-family: var(--display); font-size: var(--t-lg); font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.uc-h2 span { font: var(--t-xs) var(--mono); font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-inline-start: .5rem; }

/* The route line */
.uc-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* A seventh of the line each: labels scale with the viewport and may wrap, so the longest stage name
   never spills past its column at any width. */
.uc-route li { position: relative; min-width: 0; padding-top: 1.1rem; padding-inline-end: var(--s2); font: clamp(.75rem, 1.6vw, var(--t-sm))/1.2 var(--ui); color: var(--ink-3); overflow-wrap: anywhere; }
.uc-route li::before { content: ""; position: absolute; top: .35rem; left: 0; right: 0; height: 1px; background: var(--rule-firm); }
.uc-route li::after { content: ""; position: absolute; top: 0; left: 0; width: .75rem; height: .75rem; border: 1px solid var(--rule-firm); background: var(--paper); }
.uc-route li.is-on { color: var(--ink); font-weight: 650; }
.uc-route li.is-on::before { background: var(--brand); height: 2px; top: .3rem; }
.uc-route li.is-on::after { background: var(--brand); border-color: var(--brand); }
.uc-route a { color: inherit; text-decoration: none; display: inline-block; padding-block: .2rem; }
.uc-route a:hover { text-decoration: underline; text-underline-offset: .15em; }
.uc-fig { margin: 0 0 3.5rem; max-width: 60rem; }
.uc-fig figcaption { margin-top: .9rem; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); max-width: 60ch; }
.uc-route--mini li { padding-top: .7rem; }
.uc-route--mini li::after { width: .5rem; height: .5rem; }
.uc-route--mini li::before { top: .24rem; }
.uc-route--mini li.is-on::before { top: .2rem; }
.uc-route--mini li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Problem, then what goes wrong: two columns of prose, no cards. */
.uc-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin: 0 0 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule-firm); }
.uc-why p { margin: 0; color: var(--ink-2); line-height: 1.55; max-width: 52ch; }

/* The path: stage name as the heading of each step, what you make underneath. */
.uc-path { margin: 0 0 3.5rem; }
.uc-steps { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.uc-steps li { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: .25rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.uc-step__h { margin: 0; grid-row: span 2; font-family: var(--display); font-size: var(--t-md); font-weight: 750; letter-spacing: -.015em; }
.uc-step__h a { color: var(--ink); }
.uc-step__h i, .uc-arts i { font: normal var(--t-xs) var(--mono); color: var(--ink-3); margin-inline-start: .35rem; }
.uc-step__d { margin: 0; color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
.uc-step__out { margin: .35rem 0 0; font-size: var(--t-sm); color: var(--ink); }
.uc-step__out span { font: var(--t-xs) var(--mono); color: var(--ink-3); margin-inline-end: .4rem; }
.uc-steps li.is-later .uc-step__h a { color: var(--ink-3); }

.uc-made { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; margin: 0 0 3rem; }
.uc-arts, .uc-leave, .uc-res { list-style: none; margin: 0; padding: 0; }
.uc-arts li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.uc-arts b { font-weight: 650; }
.uc-arts span { display: block; font-size: var(--t-sm); color: var(--ink-2); }
.uc-arts li.is-later b { color: var(--ink-3); }
.uc-leave li { padding: .45rem 0 .45rem 1.1rem; position: relative; color: var(--ink-2); line-height: 1.45; }
.uc-leave li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .45rem; height: 2px; background: var(--brand); }
.uc-res li { padding: .3rem 0; }
.uc-res span { font: var(--t-xs) var(--mono); color: var(--ink-3); margin-inline-start: .4rem; }
.uc-more { margin: .6rem 0 0; font-size: var(--t-sm); }

.uc-future { margin: 3rem 0; padding: 1.25rem 1.4rem; border: 1px dashed var(--rule-firm); max-width: 50rem; }
.uc-future ul { list-style: none; margin: 0; padding: 0; }
.uc-future li { padding: .35rem 0; color: var(--ink-2); line-height: 1.5; }
.uc-future b { color: var(--ink); font-weight: 650; margin-inline-end: .3rem; }

.uc-proposal { margin: 3rem 0; padding: 1.4rem 1.5rem; border-inline-start: 3px solid var(--rule-firm); background: var(--paper-deep); max-width: 50rem; }
.uc-proposal__k { margin: 0 0 .4rem; font: var(--t-xs) var(--mono); color: var(--ink-3); text-transform: none; }
.uc-proposal p:last-child { margin: 0; color: var(--ink-2); line-height: 1.55; }

.uc-faq { margin: 3rem 0; max-width: 50rem; }
.uc-faq details { border-bottom: 1px solid var(--rule); padding: .8rem 0; }
.uc-faq summary { cursor: pointer; font-weight: 650; }
.uc-faq details p { margin: .5rem 0 0; color: var(--ink-2); line-height: 1.55; }

.uc-cta { margin: 3rem 0 2.5rem; }
.uc-cta a { font-family: var(--display); font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em; }
.uc-others { padding-top: 1.5rem; border-top: 1px solid var(--rule-firm); }
.uc-others ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.uc-others a { display: inline-block; padding-block: .25rem; }

/* Index and homepage tiles: the audience, its line, its route fingerprint. */
.uc-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.uc-index > li { background: var(--paper); }
.uc-tile { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: 1.4rem 1.4rem 1.5rem; text-decoration: none; color: var(--ink); }
.uc-tile:hover { background: var(--paper-3); }
.uc-tile__a { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.uc-tile__t { margin: 0 0 .5rem; font-family: var(--display); font-size: var(--t-md); font-weight: 750; line-height: 1.2; letter-spacing: -.015em; max-width: 34ch; }
.uc-tile .uc-route { margin-top: auto; }
.uc-band { margin: 0 0 4rem; }
.uc-band__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .3rem 2rem; margin-bottom: 1.1rem; }
.uc-band__head h2 { margin: 0; }
.uc-band__head p { grid-column: 1; margin: 0; color: var(--ink-2); max-width: 52ch; }
.uc-band__head a { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-weight: 650; white-space: nowrap; }
.uc-index--band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uc-index--band .uc-tile { padding: 1.1rem 1.1rem 1.2rem; }
.uc-index--band .uc-tile__t { font-size: var(--t-base); }

@media (max-width: 64rem) { .uc-index--band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .uc-why, .uc-made { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .uc-steps li { grid-template-columns: minmax(0, 1fr); }
  .uc-step__h { grid-row: auto; }
  .uc-index { grid-template-columns: minmax(0, 1fr); }
  .uc-band__head { grid-template-columns: minmax(0, 1fr); }
  .uc-band__head a { grid-column: 1; grid-row: auto; }
}
/* On a phone the seven labels can't share the width: the dots stay, the lit stages read in one line below. */
.uc-route__lit { display: none; margin: .6rem 0 0; font-size: var(--t-sm); font-weight: 650; color: var(--ink); }
@media (max-width: 36rem) {
  .uc-fig .uc-route li a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .uc-route__lit { display: block; }
}
@media (max-width: 30rem) { .uc-index--band { grid-template-columns: minmax(0, 1fr); } }

/* The job, in one sentence (Annie, 2026-10-07): what Aesthetary does for this reader, before the route. */
.uc-job { max-width: 46rem; margin: 0 0 2rem; padding: 1rem 0 0; border-top: 3px solid var(--ink); font-family: var(--display); font-size: var(--t-md); font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.uc-job span { display: block; margin-bottom: .35rem; font: var(--t-xs) var(--mono); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.uc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* WHO IT'S FOR GALLERY (founder, 2026-10-08). One photograph per audience; the whole card is the link.
   Four across on a wide screen, two on a tablet, one on a phone. No hover zoom, no shadow: the photograph does the work. */
.uc-gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 37.5rem) { .uc-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68.75rem) { .uc-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.uc-gal > li { display: grid; }
.uc-card { display: grid; grid-template-rows: auto 1fr; background: var(--paper-deep); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.uc-card:hover { border-color: var(--rule-firm); }
.uc-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.uc-card__img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 339; object-fit: cover; background: var(--paper-3); }
.uc-card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.15rem; }
.uc-card__name { margin: 0; font-family: var(--display); font-size: var(--t-md); font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
.uc-card__line { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.uc-card__go { margin-top: auto; padding-top: .6rem; color: var(--brand); font-size: var(--t-sm); font-weight: 600; }
.uc-card:hover .uc-card__go { text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) { .uc-card { transition: none; } }

/* THE REFERENCE LAYOUT (founder brief 2026-10-08; docs/visual/WHO-ITS-FOR-ART-DIRECTION.md). */
.ucx-hero { display: grid; gap: 2rem; align-items: center; margin: 0 0 3.5rem; }
@media (min-width: 62rem) { .ucx-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; } }
.ucx-hero__text .uc-lede { margin-bottom: 1.5rem; }
.ucx-hero__cta { margin: 0; }
.ucx-hero__img { margin: 0; }
.ucx-hero__img img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 339; object-fit: cover; }
.ucx-challenge { display: grid; gap: 2rem; margin: 0 0 4rem; }
@media (min-width: 62rem) { .ucx-challenge { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; } }
.ucx-challenge__text p { color: var(--ink-2); margin: 0 0 1.75rem; max-width: 56ch; }
.ucx-challenge__fig { margin: 0; }
/* The Example workflow: a paper trail. Captions in the margin, documents at full width, one thread joining them. */
.ucx-example { margin: 4.5rem 0; }
.ucx-example__h { margin: 0 0 .75rem; font-family: var(--display); font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; max-width: 24ch; }
.ucx-example__intro { margin: 0 0 2.5rem; color: var(--ink-2); max-width: 60ch; }
.ucx-trail { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule-firm); }
.ucx-step { display: grid; gap: 1.25rem; padding: 0 0 3rem 1.5rem; position: relative; }
.ucx-step:last-child { padding-bottom: 0; }
@media (min-width: 62rem) { .ucx-step { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; padding-left: 2rem; } }
.ucx-step__m p { margin: 0 0 .75rem; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.ucx-step__n { position: absolute; left: -.85rem; top: 0; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; background: var(--paper); border: 1px solid var(--rule-firm); font: var(--t-xs)/1 var(--mono); color: var(--ink-2); }
.ucx-step__h { margin: 0 0 .5rem; font-family: var(--display); font-size: var(--t-md); font-weight: 700; line-height: 1.2; }
.ucx-step__docs { display: grid; gap: 1rem; min-width: 0; }
/* Side by side only when each document keeps its columns intact; tabular files wrap badly below this. */
@media (min-width: 100rem) { .ucx-step__docs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Who it's for index (founder, 2026-10-17): no sentence under the title, the gallery says it */
.uc-head--bare { margin-bottom: var(--s5); }
.uc-head--bare .uc-h1 { margin-bottom: 0; }