/* /builds/: the pinned Circlewise build as one row, then the three case cards.
   Page-local; tokens and theme.css classes only. Phone first (375), then 768 and 1100.
   The screen shell, .more and the figures row are home.css's rules; the case cards are the rules
   the previous home.css carried for them (git HEAD:site/home.css, "4. case cards"). */

/* Apple: a white page so the grey bands read as bands. candidate for look-apple.css (--paper: #ffffff) */
html[data-look="apple"] { --paper: #ffffff; }

.nw { white-space: nowrap; } /* candidate for theme.css (home.css has the same rule) */

/* Flags (spec §9): a client's name renders while data-client-ok is "pending" or "true" and hides at "false";
   .client-alt is the neutral wording shown in its place only when the name is hidden. candidate for theme.css */
[data-client-ok="false"] { display: none !important; }
.client-alt { display: none; }
[data-client-ok="false"] + .client-alt { display: inline; }

/* ---------- a standalone text link (candidate for theme.css; same as home.css) ---------- */
.more { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; }
html[data-look="editorial"] .more {
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-label);
  letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
}
html[data-look="editorial"] .more::after { content: '\00a0\2192' / ''; } /* decorative; silent for screen readers */
html[data-look="editorial"] .more:hover { text-decoration: underline; }
html[data-look="apple"] .more { font-size: 17px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule); }
html[data-look="apple"] .more:hover { text-decoration-color: currentColor; }

/* ---------- screen shell (same as home.css) ---------- */
.scr { padding-block: var(--band-pad); }
.scr__head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.scr__kick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-2); }
.scr__foot { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3); }
@media (min-width: 768px) { .scr__foot { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-3); } }
html[data-look="editorial"] .scr__kick { border-top: var(--rule-w) solid var(--rule); padding-top: var(--space-2); }
html[data-look="apple"] .scr__kick { justify-content: flex-start; gap: 0; }
html[data-look="apple"] .scr__kick > span + span::before { content: "\00a0·\00a0"; }
html[data-look="apple"] .scr__foot .caption { font-weight: 400; }
html[data-look="editorial"] .scr { padding-block: 48px; }
@media (min-width: 1100px) { html[data-look="editorial"] .scr { padding-block: 64px; } }
/* Apple: the pinned build and the cards share one grey band, so the seam between them gets one gap, not two */
html[data-look="apple"] .build { padding-block: var(--space-5) 0; }
#cards { padding-top: var(--space-5); }
html[data-look="editorial"] #cards { padding-top: var(--space-3); }

/* ---------- page head: kicker, title, one line ---------- */
.bld-head { padding-block: var(--space-4) var(--space-3); }
.bld-head .wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.bld-head .wrap > * { margin: 0; }
@media (min-width: 768px) { .bld-head { padding-block: var(--space-5) var(--space-4); } }
html[data-look="editorial"] .bld-head { padding-bottom: 0; }

/* ---------- pinned build: one line, three figures (home.css "2. one build, three numbers") ---------- */
.build__line { max-width: 22em; }
.figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.figs li { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-block: var(--space-3); border-top: var(--rule-w) solid var(--rule-soft); }
.figs li:first-child { border-top: 0; }
.figs b {
  align-self: flex-start; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-value); font-size: var(--fs-value);
  line-height: 1; letter-spacing: var(--track-display); color: var(--ink);
  background: var(--mark); border-radius: var(--radius-mark); padding: .06em .14em .04em;
}
.figs span { font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 22em; }
@media (min-width: 768px) {
  .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figs li { border-top: 0; border-left: var(--rule-w) solid var(--rule-soft); padding: var(--space-3); }
  .figs li:first-child { border-left: 0; }
  .figs b { font-size: 40px; }
}
@media (min-width: 1100px) { .figs b { font-size: 52px; } .figs span { font-size: 16px; } }
html[data-look="editorial"] .figs { border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); }
html[data-look="editorial"] .figs li { padding-inline: 0; }
@media (min-width: 768px) {
  html[data-look="editorial"] .figs li { padding-inline: var(--space-3); }
  html[data-look="editorial"] .figs li:first-child { padding-left: 0; }
}
/* Apple: the three figures share one white tile on the grey band */
html[data-look="apple"] .figs { background: var(--surface); border-radius: var(--radius-tile); box-shadow: var(--shadow-card); padding: 0 var(--space-3); }
@media (min-width: 768px) { html[data-look="apple"] .figs { padding: var(--space-2) 0; } html[data-look="apple"] .figs li { padding: var(--space-3) 28px; } }
@media (min-width: 1100px) { html[data-look="apple"] .figs li { padding: var(--space-4) 36px; } }

/* ---------- case cards (previous home.css "4. case cards") ---------- */
/* columns follow the number of visible cards (card 1 waits for a client OK) */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 1100px) { .cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; } }
.case { min-width: 0; }
.case .kick { min-height: 1.5em; }
.case__num {
  font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-h1);
  line-height: 1; letter-spacing: var(--track-display); color: var(--ink);
}
.case .h-2 { font-size: 20px; line-height: 1.25; margin-top: calc(-1 * var(--space-1)); }
/* the caveat sits under the headline, as body text in ink: it is what the heading promises */
.case__caveat { display: flex; flex-direction: column; gap: 4px; }
.case__caveat > p { margin: 0; }
.case__caveat > p:not(.kick) { font-size: 16px; line-height: 1.5; color: var(--ink); }
.case__lines { list-style: none; padding: 0; display: flex; flex-direction: column; }
.case__lines li { padding-block: 10px; border-top: var(--rule-w) solid var(--rule-soft); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.case__stack {
  margin-top: auto !important; padding-top: 12px; border-top: var(--rule-w) solid var(--rule-soft);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-3);
}
/* Editorial: no boxes; columns divided by hairlines */
html[data-look="editorial"] .case { border: 0; border-top: var(--rule-w) solid var(--rule); border-radius: 0; padding: var(--space-2) 0 var(--space-2); }
@media (min-width: 1100px) {
  html[data-look="editorial"] .cards { gap: 0; border-top: var(--rule-w) solid var(--rule); }
  html[data-look="editorial"] .case { border-top: 0; padding: var(--space-3) var(--space-3) 0; }
  html[data-look="editorial"] .case:not([data-client-ok="false"]) ~ .case { border-left: var(--rule-w) solid var(--rule-soft); }
  html[data-look="editorial"] .cards > .case:first-child,
  html[data-look="editorial"] .cards > [data-client-ok="false"] + .case { padding-left: 0; }
}
/* Apple: white rounded tiles on the grey band */
html[data-look="apple"] .case { padding: 28px 24px; }
html[data-look="apple"] .case__stack { font-family: var(--font-body); font-size: 13px; }
@media (min-width: 1100px) { html[data-look="apple"] .case { padding: var(--space-4) var(--space-3) var(--space-3); } }