/* ===============================================================
   Archiveris homepage. Loaded by / alone, after site.css.

   The homepage makes an argument no other page makes, so it carries
   components no other page needs: the brand hero, the three
   foundations, and one worked "closer look" per product. Keeping them
   here keeps site.css about the rest of the site. Anything reused on a
   second page should move to site.css -- which is where .is-band and
   the featured .stripe went when /kebiki/ took them up.

   Several of these components began life in the positioning previews
   under /preview/, which still hold their own copies in preview.css.
   The two files are deliberately independent: changing the homepage
   must not silently restyle an archived version, or the reverse.
   =============================================================== */

/* A full-bleed photographic pause, cropped differently from the hero. */
.photo-band-full { height: 320px; background-image: url(photos/hero-cabin.jpg); background-size: cover; background-position: 85% 62%; }

@media (max-width: 900px) {
  .photo-band-full { height: 220px; }
}

/* The problems people arrive with, as rows rather than a card grid. */
.cases { display: grid; gap: 0; border-top: var(--border-hairline) solid var(--color-line); }
.case { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-5) var(--space-4); border-bottom: var(--border-hairline) solid var(--color-line); transition: background var(--motion-fast) var(--motion-ease); }
.case:hover { background: var(--color-surface); }
.case.is-featured { background: var(--product-accent-soft); }
.case.is-featured:hover { background: var(--product-accent-soft); }
.case h3 { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink); }
.case p { margin-top: var(--space-2); font: var(--type-small); color: var(--color-ink-secondary); max-width: 68ch; }
.case-meta { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.case-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.case .icon { color: var(--color-ink-muted); transition: transform var(--motion-fast) var(--motion-ease); }
.case:hover .icon { transform: translateX(2px); color: var(--color-ink); }

@media (max-width: 900px) {
  .case { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .case-meta { justify-content: space-between; }
  .case-tags { justify-content: flex-start; }
}

/* The three foundations, each led by the question it answers. */
.found-q { font: var(--type-title-1); letter-spacing: var(--type-title-1-tracking); color: var(--product-accent-ink); }

/* ===============================================================
   The opportunity, and the three foundations under it.
   =============================================================== */
.triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.triad > div { padding-top: var(--space-4); border-top: var(--border-strong) solid var(--color-line-strong); }
.triad .num { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink-muted); }
.triad h3 { margin-top: var(--space-3); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.triad p { margin-top: var(--space-3); color: var(--color-ink-secondary); }

.statement-pair { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--color-line); max-width: 60ch; }
.statement-pair p { font: var(--type-title-1); letter-spacing: var(--type-title-1-tracking); color: var(--color-ink); }
.statement-pair p + p { margin-top: var(--space-2); color: var(--product-accent-ink); }

.flowpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.flowpair > div { padding: var(--space-6); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); display: flex; flex-direction: column; }
.flowpair .tag { align-self: flex-start; padding: 2px var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-sunken); font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink-muted); }
.flowpair h3 { margin-top: var(--space-4); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); }
.flowpair p { margin-top: var(--space-3); color: var(--color-ink-secondary); }
.flowpair .line { margin-top: auto; padding-top: var(--space-5); font: var(--type-small); color: var(--color-ink-muted); }

@media (max-width: 900px) {
  .triad, .flowpair { grid-template-columns: minmax(0, 1fr); }
}

/* The secondary brand statement. One line, weighted below the headline
   but above body copy, with a rule to set it apart. */
.brand-line { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-strong) solid var(--color-line-strong); max-width: 24ch; font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-ink); }
/* A two-word headline needs the size a five-word one did not. */
.hero-photo.is-brand h1 { max-width: none; font-size: clamp(44px, 5.4vw, 76px); line-height: 1.05; }
.hero-photo.is-brand .lede { margin-top: var(--space-5); }
/* site.css caps the lede at 42ch for a hero whose headline sets the
   measure. This one does not, so the lede runs to the column. */
@media (max-width: 900px) {
  .hero-photo .lede { max-width: none; }
}
/* The question is the card's heading, so it carries the weight the
   proposition did on the product cards elsewhere. */
.p-product h3.found-q { margin-top: var(--space-5); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--product-accent-ink); }
.p-product h3.found-q + p { margin-top: var(--space-3); }
.p-product .text-link { margin-top: auto; padding-top: var(--space-5); }

/* ===============================================================
   "A closer look": one per product. A worked workflow
   from source material to a governed service, then the service
   answering. Themed per product via [data-product].
   =============================================================== */
/* Each closer look is tinted with its own product's soft accent, so the
   three read as three subjects rather than one long stretch. The tints
   are the design system's own, and they invert with the theme. */
.closer { background: var(--product-accent-soft); }

.closer-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; margin-bottom: var(--space-7); }
.closer-head h2 { margin-top: var(--space-6); }
.closer-lockup { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.closer-lockup img { width: 56px; height: 56px; flex: none; }
.closer-lockup .name { font: 400 26px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink); }
.closer-lockup .kind { display: block; margin-top: var(--space-2); font: var(--type-overline); letter-spacing: .22em; text-transform: uppercase; color: var(--product-accent-ink); }
.closer .body { margin-top: var(--space-5); }
.closer-statement { margin-top: var(--space-6); font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--product-accent-ink); }
.closer-statement span { display: block; }
.closer .btn-primary { margin-top: var(--space-6); background: var(--product-accent); border-color: var(--product-accent); color: var(--product-on-accent); }
.closer .btn-primary:hover { background: var(--product-accent-strong); border-color: var(--product-accent-strong); }

/* the workflow panel */
.wf { border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-5); }
.wf-label { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.wf-label b { color: var(--product-accent-ink); font-weight: 500; }
.wf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.wf-step { position: relative; }
.wf-step + .wf-step::before { content: ""; position: absolute; top: 24px; left: calc(var(--space-4) / -2); width: 7px; height: 7px; margin: -4px 0 0 -3px; border-top: 1.5px solid var(--color-line-strong); border-right: 1.5px solid var(--color-line-strong); transform: rotate(45deg); }
.wf-head { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-canvas); }
.wf-n { flex: none; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--product-accent); color: var(--product-on-accent); font: var(--type-small); font-weight: 600; display: grid; place-items: center; }
.wf-head strong { display: block; font: var(--type-small); font-weight: 600; color: var(--color-ink); }
.wf-head div span { display: block; margin-top: 2px; font: var(--type-small); color: var(--color-ink-muted); }
.wf-panel { margin-top: var(--space-3); padding: var(--space-4); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-canvas); }
.wf-panel .cap { font: var(--type-small); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-3); }
.wf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.wf-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-2); font: var(--type-small); color: var(--color-ink-secondary); }
.wf-list .icon-sm { width: 14px; height: 14px; color: var(--color-ink-muted); margin-top: 2px; }
.wf-list.is-check .icon-sm { color: var(--color-success); }
.wf-item { padding: var(--space-2) var(--space-3); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); font: var(--type-small); color: var(--color-ink-secondary); }
.wf-item + .wf-item { margin-top: var(--space-2); }
.wf-item.is-on { border-color: var(--product-accent); background: var(--product-accent-soft); color: var(--product-accent-ink); font-weight: 500; }
.wf-item strong { display: block; color: var(--color-ink); font: var(--type-small); font-weight: 600; }
.wf-item.is-on strong { color: var(--product-accent-ink); }
.wf-code { font: var(--type-code); font-feature-settings: var(--type-code-features); color: var(--color-ink-secondary); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; margin: 0; }
.wf-verb { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font: var(--type-code); }
.wf-verb b { padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--product-accent-soft); color: var(--product-accent-ink); font-weight: 600; }
.wf-foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--color-line); font: var(--type-small); color: var(--color-ink-muted); }
.wf-tag { padding: 1px var(--space-2); border-radius: var(--radius-full); font: var(--type-small); font-weight: 500; }
.wf-tag.ok { background: var(--color-success-soft); color: var(--color-success); }
.wf-tag.ver { background: var(--color-surface-sunken); color: var(--color-ink-secondary); font-family: var(--font-mono); }

/* step five: the service answering */
.wf-run { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-hairline) solid var(--color-line); }
.wf-run-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.wf-run-head .t { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--color-ink); }
.wf-run-head .s { font: var(--type-overline); letter-spacing: var(--type-overline-tracking); text-transform: uppercase; color: var(--product-accent-ink); }
.wf-run-head .ms { margin-left: auto; font: var(--type-small); color: var(--color-ink-muted); }
.wf-run-grid { display: grid; grid-template-columns: minmax(0, .85fr) 20px minmax(0, 1.15fr); gap: var(--space-4); align-items: start; }
.wf-arrow { display: grid; place-items: center; color: var(--color-line-strong); padding-top: var(--space-6); }
.wf-req { padding: var(--space-4); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-canvas); }
.wf-req dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font: var(--type-small); }
.wf-req dt { color: var(--color-ink-muted); }
.wf-req dd { color: var(--color-ink); text-align: right; }
.wf-res { padding: var(--space-4); border: var(--border-hairline) solid var(--color-success); border-radius: var(--radius-md); background: var(--color-success-soft); }
.wf-res-top { display: flex; gap: var(--space-3); align-items: flex-start; }
.wf-res-top .icon { color: var(--color-success); flex: none; }
.wf-res h4 { font: var(--type-title-2); letter-spacing: var(--type-title-2-tracking); color: var(--color-success); }
.wf-res-top p { margin-top: var(--space-2); font: var(--type-small); color: var(--color-ink-secondary); }
.wf-res dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); font: var(--type-small); }
.wf-res dt { color: var(--color-ink-muted); }
.wf-res dd { color: var(--color-ink); }
.wf-res .why { margin-top: var(--space-4); }
.wf-res .why strong { font: var(--type-small); font-weight: 600; color: var(--color-ink); }
.wf-res .why ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.wf-res .why li { list-style: disc; font: var(--type-small); color: var(--color-ink-secondary); }
.wf-res .why li::marker { color: var(--color-success); }
.wf-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-hairline) solid rgba(0,0,0,.08); }
.wf-chips span { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface); font: var(--type-small); color: var(--color-ink-secondary); }
.wf-note { margin-top: var(--space-4); font: var(--type-small); color: var(--color-ink-muted); }

@media (max-width: 1100px) {
  .closer-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
/* Four dense columns need about a thousand pixels; below that they
   pair up, and below that they stack. */
@media (max-width: 1040px) {
  .wf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .wf-step + .wf-step::before { display: none; }
}
@media (max-width: 760px) {
  .wf-steps { grid-template-columns: minmax(0, 1fr); }
  .wf-run-grid { grid-template-columns: minmax(0, 1fr); }
  .wf-arrow { transform: rotate(90deg); padding: 0; }
  .wf-res dl { grid-template-columns: auto 1fr; }
}

/* Teban's closer look: context in, a set of affordances out. */
.aff-ctx { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.aff-ctx li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-2); font: var(--type-small); }
.aff-ctx .icon-sm { width: 14px; height: 14px; color: var(--color-ink-muted); margin-top: 3px; }
.aff-ctx strong { display: block; font: var(--type-small); font-weight: 600; color: var(--color-ink); }
.aff-ctx span { display: block; color: var(--color-ink-muted); }
.aff-ui { border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.aff-ui-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--color-line); font: var(--type-body-strong); }
.aff-act { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--color-line); font: var(--type-small); color: var(--color-ink); }
.aff-act:last-child { border-bottom: 0; }
.aff-act .chev { color: var(--color-line-strong); }
.aff-act.is-off { color: var(--color-ink-muted); background: var(--color-surface-sunken); }
.aff-act em { display: block; font-style: normal; font: var(--type-small); color: var(--color-ink-muted); }
.yn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; white-space: nowrap; }
.yn.y { color: var(--color-success); }
.yn.n { color: var(--color-danger); }
.aff-row-off th, .aff-row-off td { color: var(--color-ink-muted); }