/* ==========================================================================
   work.css — the Work page only. Loaded third, after tokens.css and site.css.

   The page is a typographic index, not a gallery. CONTENT-FACTS.md's last
   hard content gap is project imagery: internal AI work has no public
   imagery and none exists. specs/03-work.md AC-W20 asks that the page still
   read as a portfolio with every image absent, which is the state at launch —
   and eighteen empty placeholder cards would read as exactly the list of
   empty cards that criterion forbids. So there are no image slots on the
   page at all, and the rhythm is carried by rules, numbers and type.

   AC-W23 says imagery must be addable without an item's text being rewritten.
   .item:has(> .item__inner > .liquid) below is that slot: drop a <figure
   class="liquid"> in as the first child of .item__inner and the row becomes a
   two-column row. Nothing else changes.

   Every duration, easing and colour is a token from tokens.css. No raw ms,
   no raw colour, and no html font-size — tokens.css owns the rem cascade.
   ========================================================================== */

/* --- Page head ------------------------------------------------------------ */
/* The fixed nav never covers the first line of the h1 (00-shared.md AC-5). */
.page-head {
  padding-top: calc(var(--nav-h) + 5rem);
  padding-bottom: calc(var(--section) * .5);
}
.page-head .shell { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }

/* One word, so it may be nowrap at every width. --fs-mega would be 23.7rem
   wide in Anton at four characters, which does not fit a 375px screen; the
   size steps up with the room to hold it. */
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  white-space: nowrap;
  margin-block: .5rem 1rem;
  --rv-dur: var(--t-name);
  --rv-stagger: var(--stagger-letter);
}
@media (min-width: 768px) { .page-title { font-size: var(--fs-display); line-height: var(--lh-display); } }
@media (min-width: 1024px) { .page-title { font-size: var(--fs-mega); line-height: var(--lh-mega); } }

.intro {
  max-width: 42rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  --rv-dur: var(--t-body);
}

.page-head__count {
  max-width: 42rem;
  color: var(--muted);
  --rv-dur: var(--t-body);
}

/* --- Group ---------------------------------------------------------------- */
.group {
  padding-block: calc(var(--section) * .66);
  border-top: 1px solid var(--line);
}

.group__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* The one marker that tells internal enablement and governance work from
   client delivery at a glance (AC-W17). It says which in words, so it never
   rests on colour. */
.group__kind, .outcomes__kind {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  padding: .4rem 1rem;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow-tight);
  color: var(--muted);
}

.group__kind-dot {
  flex: none;
  width: .4rem; height: .4rem;
  border-radius: 9999px;
  background: var(--accent);
}

.group__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  --rv-dur: var(--t-heading);
}
@media (min-width: 1024px) { .group__title { font-size: var(--fs-display); line-height: var(--lh-display); } }

/* Employer, title and period, in the block a visitor reads as one unit
   (00-shared.md AC-35). Every item below repeats the employer and the period
   for itself, because an item has to stand on its own (AC-W1). */
.group__meta {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-stat);
  color: var(--muted);
}

.group__context { max-width: 42rem; color: var(--muted); --rv-dur: var(--t-body); }

/* --- Items ---------------------------------------------------------------- */
/* An ordered list: the numbers are the index's spine. list-style is off
   site-wide, so the counter draws them instead — and restarts per group,
   because the group is what they belong to. */
.items {
  margin-top: 4rem;
  counter-reset: item;
  border-bottom: 1px solid var(--line);
}

/* Each item is its own reveal root rather than one root per group. A group of
   eleven items is taller than a viewport, so a single root would have fired
   long before the lower items were ever looked at. The .rv start state lives
   on .item__inner so the selector html.js [data-reveal] .rv still matches it
   as a descendant. */
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem 2rem;
  padding-block: 2.5rem;
  border-top: 1px solid var(--line);
  --rv-dur: var(--t-card);
}

.item::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--accent);
}

@media (min-width: 768px) {
  .item { grid-template-columns: 5rem minmax(0, 1fr); align-items: baseline; }
  .item::before { font-size: 1.5rem; }
}

.item__inner { display: flex; flex-direction: column; gap: 1.25rem; max-width: 58rem; }

/* AC-W23: the slot imagery lands in when it exists. Adding a <figure
   class="liquid"> as the first child of .item__inner makes the row a
   two-column row and rewrites none of the item's text. */
@media (min-width: 768px) {
  .item__inner:has(> .liquid) {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
    max-width: 76rem;
  }
  /* `1 / span 20` rather than `1 / -1`: with no explicit rows declared, -1
     resolves against the explicit grid and collapses to a single row, which
     drops the text back under the picture. Twenty is well past the four
     children any item has. 4:3 is the default for project imagery; an asset
     that is not landscape wants its own aspect-ratio here. */
  .item__inner:has(> .liquid) > .liquid { grid-row: 1 / span 20; aspect-ratio: 4 / 3; }
}

.item__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }

/* Where and when, and Role. Both are required of every item (AC-W1, AC-W2).
   There is no third row: an item with no outcome figure in the source states
   no outcome at all, rather than carrying an empty field or a hedge
   (AC-W4). The outcomes that do exist are sentences in the body. */
.item__facts {
  display: grid;
  gap: 1rem 3rem;
  padding-block: .25rem;
  border-left: 2px solid var(--line-strong);
  padding-left: 1.25rem;
}
@media (min-width: 640px) {
  .item__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50rem; }
}

.fact dt {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow-tight);
  color: var(--muted);
  margin-bottom: .45rem;
}
.fact dd { margin: 0; }

.item__inner > p { color: var(--muted); }

.item__list { display: flex; flex-direction: column; gap: .6rem; margin-top: -.5rem; }
.item__list li {
  padding-left: 1.25rem;
  position: relative;
  color: var(--muted);
}
.item__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * .5em);
  width: .45rem; height: 1px;
  background: var(--accent);
}

.item__tools {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-stat);
  color: var(--muted);
}

/* --- Commercial outcomes -------------------------------------------------- */
/* Closes the AI Competence Center group rather than sitting inside it as a
   twelfth item: copy/work.md gives it no h3, and it is the one client-facing
   block in an otherwise internal group. Set apart the way the study row is
   set apart on the home page, for the same reason — it is a different kind of
   thing in the same list. */
.outcomes {
  margin-top: 3.5rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  padding: 2.5rem 2rem;
  --rv-dur: var(--t-card);
}
@media (min-width: 768px) { .outcomes { padding: 3rem 2.5rem; } }

.outcomes__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 58rem; }
.outcomes__label { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.outcomes__inner > p:not(.outcomes__label):not(.outcomes__kind) { color: var(--muted); }

/* --- Onward --------------------------------------------------------------- */
.onward {
  padding-block: calc(var(--section) * .55);
  border-top: 1px solid var(--line);
}

.onward__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  --rv-dur: var(--t-list);
  --rv-stagger: 110ms;
}