/* Review directions for the home page (2026-10-14). Loaded only by the
   preview pages in dist/looks/ (/a/, /b/, /c/); production never links it.
   Whichever direction is chosen moves into site.css. */
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/space-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Extra grounds */
.band-paper { background: var(--paper); color: var(--ink); }
.band-mist { background: var(--mist); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink :focus-visible { outline-color: var(--paper); }

/* Approach on paper (B) undoes the dark-band treatment */
.band-paper .steps li { border-top-color: var(--rule); }
.band-paper .steps .n { color: var(--moss); }
.band-paper .steps p { color: var(--ink-2); }
@media (min-width: 768px) { .band-paper .steps li { border-top-color: var(--ink); } }
/* Approach on ink (C) */
.band-ink .steps .n { color: var(--sage); }

/* Industries on mist (B) */
.band-mist.industries { padding: 60px 0 56px; }
.band-mist .inds li { border-top-color: rgba(32, 37, 31, .22); }
@media (min-width: 768px) { .band-mist.industries { padding: 84px 0 76px; } }
.look-b .industries:not(.band-mist) { padding-bottom: 64px; }

/* B · Moss: header and hero on moss, the G mark large */
.look-b .mast, .look-b .hero-band { background: var(--moss); color: var(--paper); }
.look-b .mast { --mark-hook: var(--paper); }
.look-b .mast .lockup { color: var(--paper); }
.look-b .mast nav a:hover { text-decoration-color: rgba(243, 240, 232, .5); }
.look-b .mast :focus-visible, .look-b .hero-band :focus-visible { outline-color: var(--paper); }
.look-b .hero { padding-bottom: 56px; }
.look-b .hero .lede { color: var(--mist); }
.look-b .hero .cta { color: var(--paper); }
.look-b .hero .cta::after { background: var(--mist); }
.look-b .hero-art { --mark-c: var(--sage); --mark-hook: var(--mist); }
.look-b .hero-mark { width: 100%; height: auto; }
/* With a route logo (brand/identity.json): the lockup reversed on moss, the large mark tone on tone */
.look-b .mast .lk { --logo-fg: var(--paper); --logo-acc: var(--paper); --logo-bg: var(--moss); }
.look-b .hero-art .lk { --logo-fg: var(--sage); --logo-acc: var(--mist); --logo-bg: var(--moss); }
.look-b .areas { padding-top: 40px; }
@media (min-width: 1000px) { .look-b .hero { padding-bottom: 92px; } .look-b .areas { padding-top: 56px; } }

/* C · Institutional: an index beside the headline, mono labels, ink band */
.kick { margin-bottom: 14px; font: 400 12px/1.3 "Space Mono", ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.band-ink .kick { color: var(--sage); }
.look-c .mast nav ul { flex-wrap: wrap; column-gap: 22px; }
.look-c .areas { padding-top: 8px; }
.look-c .glance { display: grid; gap: 26px; align-content: start; }
.look-c .glance > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.look-c .glance .kick { margin-bottom: 4px; }
.look-c .glance li { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); font-size: 16px; }
.look-c .glance a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.look-c .glance a .arrow { width: 16px; height: 9px; flex: none; transition: transform .2s ease; }
.look-c .glance a:hover .arrow { transform: translateX(3px); }
@media (min-width: 700px) {
  .look-c .hero { grid-template-columns: minmax(0, 1fr); }
  .look-c .glance { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (min-width: 1000px) {
  .look-c .hero { grid-template-columns: minmax(0, 1fr) 320px; }
  .look-c .glance { grid-template-columns: 1fr; gap: 28px; margin-top: 6px; }
}