/* ============================================================
   v3 additions. v2.css is unchanged and loads first.

   The layout vocabulary is deliberately small, because the site
   is nine pages and cohesion matters more than variety:

     .wrap        the measure. One container width, everywhere.
     .sec         a section, with the vertical rhythm tuned once.
     .sec--split  copy left, figure right. The default for an
                  argument that has something to show.
     .sec--full   one column at full measure. For runs, grids
                  and anything the eye should scan rather than
                  read line by line.
     .claim       the flat closing sentence, full width.

   The rule for which is which: a section that ARGUES gets two
   columns, so the figure carries the argument alongside the
   prose. A section that ENUMERATES gets full width, so the
   items line up and can be compared. A section that LANDS gets
   one line across the measure and nothing else.

   Vertical rhythm is tighter than v2's single-page cadence: a
   nine-page site is read, not scrolled through, and v2's 12vh
   section padding left the inner pages looking empty.
   ============================================================ */

:root { --rule-ink: rgba(31, 27, 46, 0.16); }

/* a focus target for the skip link that takes no space */
.sr-anchor {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* ============================================================
   HEADER · the Work disclosure
   ============================================================ */

.work-disclosure { position: relative; display: flex; align-items: center; }

.work-btn {
  font-family: inherit; font-size: 0.88rem; font-weight: 500;
  color: var(--fg-soft); background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 0.3s;
}
.work-btn:hover, .work-btn[aria-expanded="true"], .work-btn.active { color: var(--fg); }
.work-caret {
  width: 0.4rem; height: 0.4rem; margin-top: -0.2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.3s ease;
}
.work-btn[aria-expanded="true"] .work-caret { transform: rotate(-135deg) translate(-0.1rem, -0.1rem); }

.work-panel {
  position: absolute; top: calc(100% + 0.9rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content; min-width: 21rem; max-width: 25rem; z-index: 40;
  padding: 0.55rem;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: rgba(var(--ground), 0.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 54px rgba(20, 12, 40, 0.28);
  opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease;
}
.work-panel.open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* a small pointer, so the panel reads as belonging to the Work item
   rather than floating loose under the nav */
.work-panel::before {
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 10px; height: 10px; margin-left: -5px;
  background: rgba(var(--ground), 0.96);
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  transform: rotate(45deg);
}

.wp-tag {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-soft); padding: 0.5rem 0.75rem 0.55rem;
}

.work-panel ul { list-style: none; }
.work-panel li + li { border-top: 1px solid var(--rule); }

/* Explicit areas. The previous version left the byline to auto-placement,
   which put it in the column beside the name instead of underneath it. */
.work-panel a {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  grid-template-areas:
    "icon name go"
    "icon line go";
  align-items: center;
  column-gap: 0.75rem; row-gap: 0.1rem;
  padding: 0.7rem 0.75rem;
  border-radius: 9px;
  text-decoration: none; color: var(--fg);
  transition: background 0.2s ease;
}
.work-panel a:hover, .work-panel a:focus-visible {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.wp-icon { grid-area: icon; width: 1.6rem; height: 1.6rem; color: var(--bridge); }
.wp-name {
  grid-area: name; font-size: 0.92rem; font-weight: 600; line-height: 1.25;
  display: flex; align-items: baseline; gap: 0.55rem; white-space: nowrap;
}
.wp-num {
  font-family: var(--serif); font-style: italic; font-size: 0.82rem; font-weight: 400;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  flex: 0 0 auto;
}
.wp-label { flex: 0 1 auto; }
.wp-line {
  grid-area: line; font-size: 0.82rem; line-height: 1.35;
  color: var(--fg-soft); white-space: nowrap;
}
.wp-go {
  grid-area: go; color: var(--fg-soft);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.work-panel a:hover .wp-go, .work-panel a:focus-visible .wp-go {
  opacity: 1; transform: none; color: var(--magenta);
}

@media (max-width: 900px) {
  /* the phone gets the three inside the full-screen menu instead */
  .work-disclosure { display: none; }
}

/* ============================================================
   THE MEASURE · one container, one rhythm
   ============================================================ */

.wrap { width: 100%; max-width: 74rem; margin-inline: auto; }

.sec {
  position: relative; z-index: 5;
  background: var(--paper); color: var(--ink);
  padding: clamp(3.6rem, 7vh, 5.4rem) clamp(1.4rem, 5vw, 4rem);
}
.sec--tint { background: var(--surface); }

/* copy that argues, beside the thing it is arguing about */
.sec--split .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
/* is-flipped swaps the two COLUMNS only. Anything after them - a claim,
   a card row spanning both - has to stay below, so it is ordered
   explicitly rather than left on the default 0, which sorted it above
   the heading. */
.sec--split.is-flipped .wrap > :first-child { order: 2; }
.sec--split.is-flipped .wrap > :nth-child(2) { order: 1; }
.sec--split.is-flipped .wrap > :nth-child(n + 3) { order: 3; }

.sec-figure { position: relative; }
.sec-figure > svg { width: 100%; height: auto; display: block; }

@media (max-width: 899px) {
  /* stacked, the copy leads and the figure follows it, always */
  .sec--split .wrap { grid-template-columns: 1fr; gap: 2.4rem; }
  .sec--split.is-flipped .wrap > * { order: 0; }
}

/* ---------- section heads ---------- */
.sec-tag {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bridge); margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.55rem;
}
.sec-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1;
  color: var(--ink); margin-bottom: 1.1rem; text-wrap: balance;
}
.sec-title em { font-style: italic; color: var(--purple); }
.sec-lede { color: var(--muted); font-size: var(--t-body); max-width: 38rem; text-wrap: pretty; }
.sec-head { margin-bottom: 2.2rem; }
.sec--split .sec-head { margin-bottom: 1.4rem; }

.prose > p { color: var(--muted); font-size: var(--t-body); text-wrap: pretty; }
.prose > p + p { margin-top: 1.05rem; }

/* the flat claim a section lands on */
.claim {
  margin-top: 2.2rem;
  border-top: 1px solid var(--rule-ink); padding-top: 1.2rem;
  font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.3; color: var(--ink); text-wrap: pretty; max-width: 46rem;
}
.sec--split .claim { grid-column: 1 / -1; }

/* ============================================================
   ICONS · a light line set, stroke only
   ============================================================ */

.ico {
  width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
  stroke: currentColor; fill: none;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { width: 1.3rem; height: 1.3rem; stroke-width: 1.45; }
.sec-tag .ico, .entry-tag .ico { width: 1.2rem; height: 1.2rem; stroke-width: 1.5; }

/* ============================================================
   RUNS AND GRIDS · things that enumerate
   ============================================================ */

.run { list-style: none; display: grid; gap: 1.6rem 2.6rem; }
.run--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.run--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.run-item { border-top: 1px solid var(--rule-ink); padding-top: 1.1rem; }
.run-top {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 0.6rem; color: var(--bridge);
}
.run-num {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.run-item h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem;
  line-height: 1.25; color: var(--ink); margin-bottom: 0.45rem;
}
.run-item p { color: var(--muted); font-size: 0.95rem; text-wrap: pretty; }

/* a hairline run with an icon: the four walls, both sides */
.tiles { list-style: none; display: grid; gap: 1.2rem 2.6rem; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: 1rem;
  border-top: 1px solid var(--rule-ink); padding-top: 0.95rem;
  color: var(--muted); font-size: 0.96rem; text-wrap: pretty;
}
.tile .ico { color: var(--bridge); margin-top: -0.1rem; }
.tile strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 0.2rem; }

.list-label {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bridge); margin: 2rem 0 1rem;
}
.list-label:first-child { margin-top: 0; }

@media (max-width: 860px) {
  .run--2, .run--3, .tiles--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   CARDS · the three offerings, and the corridors
   ============================================================ */

.cards {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  align-items: stretch;
}
.cards > li { display: flex; }
.cards > li > .card { flex: 1; }
.card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(var(--ground), 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  text-decoration: none; color: inherit;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
  overflow: hidden;
}
.card:hover, .card:focus-visible, .card.is-active {
  border-color: color-mix(in srgb, var(--magenta) 55%, transparent);
  background: rgba(var(--ground), 0.86);
}
.card:hover, .card:focus-visible { transform: translateY(-3px); }

/* the substance already shows which card is live; this rail is the
   version of that a reader with no canvas still gets */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease;
}
.card.is-active::after { transform: scaleX(1); }

.card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; color: var(--fg-soft);
}
.card-num { font-family: var(--serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.04em; }
.card-icon { color: var(--magenta); width: 2.1rem; height: 2.1rem; }
.card-name {
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-soft); margin-bottom: 0.6rem;
}
.card-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.15;
  color: var(--fg); margin-bottom: 0.7rem; text-wrap: balance;
}
.card-body {
  color: var(--fg-soft); font-size: 0.94rem; line-height: 1.6;
  margin-bottom: 1.2rem; text-wrap: pretty;
}
.card-cta {
  margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--fg);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 0.3s ease;
}
.card:hover .card-cta, .card.is-active .card-cta { color: var(--magenta); }

@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* corridors and other cards that sit on paper */
.card--paper {
  background: var(--surface); border-color: var(--rule-ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card--paper .card-title { color: var(--ink); }
.card--paper .card-body { color: var(--muted); margin-bottom: 0; }
.card--paper .card-top { color: var(--bridge); }
.card--paper::after { display: none; }

/* ============================================================
   FIGURES · the drawn arguments
   ============================================================ */

.fig { --f-ink: #1F1B2E; --f-soft: rgba(31, 27, 46, 0.30); }
.fig svg { width: 100%; height: auto; overflow: visible; }
.f-line { stroke: var(--f-soft); stroke-width: 1.1; fill: none; }
.f-line--solid { stroke: var(--f-ink); stroke-opacity: 0.5; stroke-width: 1.1; fill: none; }
.f-dash { stroke: var(--f-soft); stroke-width: 1.1; fill: none; stroke-dasharray: 4 4; }
.f-fill { fill: rgba(31, 27, 46, 0.05); stroke: none; }
.f-node { fill: url(#v3grad); stroke: none; }
.f-node--ghost { fill: none; stroke: var(--f-soft); stroke-width: 1.1; }
.f-accent { stroke: var(--magenta); stroke-width: 1.4; fill: none; }
.f-label {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  fill: #6B6675; stroke: none;
}
.f-label--key { fill: #A0237A; }

/* The figures live inside .sec, which is paper on every page, so they
   are inked for paper regardless of the body theme. Keying them off
   [data-theme] was wrong and made every stroke invisible on the dark
   pages, whose paper sections are still paper. .fig--onstage is the
   modifier for a figure placed over the canvas itself. */
.fig--onstage { --f-ink: #F4F1F9; --f-soft: rgba(244, 241, 249, 0.34); }
.fig--onstage .f-fill { fill: rgba(244, 241, 249, 0.05); }
.fig--onstage .f-label { fill: var(--fg-soft); }
.fig--onstage .f-label--key { fill: #d9a8d0; }

/* a figure over the canvas needs its own ground, as copy does */
.fig--onstage { position: relative; z-index: 2; }
.fig--onstage::before {
  content: ""; position: absolute; inset: -10%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(var(--ground), 0.82) 0%, rgba(var(--ground), 0.5) 62%, rgba(var(--ground), 0) 100%);
}

/* ============================================================
   GL-BACKED SECTIONS · the canvas is behind these
   ============================================================ */

.hero--inner { min-height: 100svh; }
.hero--inner .hero-copy { max-width: 40rem; }
.hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-thesis); line-height: 1.1; color: var(--fg);
  margin-bottom: 1.4rem;
}

/* Home's work section: one screen, three cards, the substance behind.
   The three offerings used to be three full-height scroll bands; the
   card row puts them in one view and takes roughly 250vh off Home. */
.work {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding: 8rem clamp(1.4rem, 5vw, 4rem) 5rem;
}
.work-head { position: relative; z-index: 2; max-width: 34rem; }
.work-head::before {
  content: "";
  position: absolute; inset: -2.5rem -4rem -2.5rem -6vw; z-index: -1;
  background: linear-gradient(95deg,
    rgba(var(--ground), 0.92) 0%,
    rgba(var(--ground), 0.72) 65%,
    rgba(var(--ground), 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.work-head .sec-tag { color: var(--fg-soft); }
.work-head .sec-title { color: var(--fg); }
.work-head .sec-lede { color: var(--fg-soft); }
.work .cards { position: relative; z-index: 2; }

.gl-claim {
  position: relative; z-index: 2;
  min-height: 56vh; display: flex; align-items: center;
  padding: 0 clamp(1.4rem, 5vw, 4rem);
}
.gl-claim p {
  position: relative; z-index: 2;
  font-family: var(--serif); font-size: var(--t-thesis); line-height: 1.15;
  max-width: 26rem;
}

@media (max-width: 900px) {
  .work { min-height: 0; padding: 7rem clamp(1.4rem, 5vw, 4rem) 4rem; }
  .work-head::before {
    inset: -2rem -6vw -2rem -6vw;
    background: linear-gradient(0deg,
      rgba(var(--ground), 0.94) 0%,
      rgba(var(--ground), 0.8) 65%,
      rgba(var(--ground), 0) 100%);
  }
}

/* ============================================================
   ONWARD · no page ends without a next step
   ============================================================ */

.onward { background: var(--surface); }
.onward-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.6rem 2.6rem; }
.onward-item { border-top: 1px solid var(--rule-ink); padding-top: 1.1rem; }
.onward-item p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.5rem; text-wrap: pretty; }
.onward-item a {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  color: var(--ink); text-decoration: none; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color 0.25s ease;
}
.onward-item a:hover { color: var(--bridge); }

/* the reach line that replaced the availability badge (D-05) */
.reach {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.85rem; letter-spacing: 0.04em; color: var(--muted);
  margin-bottom: 1.6rem;
}
.reach-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: 0 0 auto; }

/* writing entries */
.entries { display: grid; gap: 1.6rem 2.6rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.entry { border-top: 1px solid var(--rule-ink); padding-top: 1.2rem; display: flex; flex-direction: column; }
.entry-tag {
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--bridge); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem;
}
.entry h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--ink); line-height: 1.2; margin-bottom: 0.5rem;
}
.entry p { color: var(--muted); font-size: 0.95rem; }
.entry-cta {
  margin-top: auto; padding-top: 0.9rem;
  color: var(--bridge); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.entry-cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   FOOTER · the full flat map
   ============================================================ */

/* .site-footer is background: var(--ink) on every page, dark regardless
   of the body theme. So its type is set in fixed values: --fg on a
   light-theme page resolves to dark ink, which made these links vanish
   against the footer the moment they were hovered. */
/* v2's footer was auto-fit minmax(240px), which with the identity column
   removed left a dead zone in the middle and wrapped "Business
   Transformation" across two lines. Explicit tracks instead, sized to
   the content, with the closing row spanning the full width. */
.footer-inner {
  align-items: start;
  grid-template-columns: auto auto auto 1fr;
  gap: 2.4rem clamp(2rem, 4vw, 4rem);
}
.footer-inner > .world-clocks { justify-self: end; }

.footer-map {
  display: grid; grid-template-columns: repeat(2, max-content);
  gap: 0.5rem 2rem; margin: 0;
}
.footer-map a, .footer-side a {
  color: #CFC9DC; text-decoration: none; font-size: 0.85rem;
  transition: color 0.25s ease;
}
.footer-map a:hover, .footer-side a:hover { color: #fff; }
.footer-map a[aria-current="page"] { color: #fff; font-weight: 600; }

.footer-side { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-side a { border-bottom: 1px solid rgba(207, 201, 220, 0.28); padding-bottom: 2px; width: fit-content; }
.footer-side a:hover { border-color: var(--magenta); }

@media (max-width: 560px) { .footer-map { grid-template-columns: 1fr; } }

/* ============================================================
   /transformation · the thesis page over the canvas

   The page arrived with an approved SVG figure in its hero (the
   org chart dissolving into orbit rings, with a full alt
   description). It is argument-carrying content and it stays.
   The lattice sits behind it as ground, which is what the
   quieter `lattice-held` art-direction row is for.

   Legibility is not negotiable: every text block sits on an
   editorial band of the current world colour, so contrast never
   depends on where the particles happen to be. The thesis hero
   uses its own markup, so it needs its own band.
   ============================================================ */

.tpage .hero--thesis { position: relative; z-index: 2; background: none; }
.tpage .hero--thesis .hero-text { position: relative; z-index: 2; }
.tpage .hero--thesis .hero-text::before {
  content: "";
  position: absolute; inset: -3.5rem -4.5rem -3.5rem -6vw; z-index: -1;
  background: linear-gradient(90deg,
    rgba(250, 248, 244, 0.94) 0%,
    rgba(250, 248, 244, 0.84) 62%,
    rgba(250, 248, 244, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.tpage .hero--thesis .thesis-figure { position: relative; z-index: 2; }
.tpage .hero--thesis .thesis-figure::before {
  content: "";
  position: absolute; inset: -8%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(250, 248, 244, 0.86) 0%, rgba(250, 248, 244, 0.55) 60%, rgba(250, 248, 244, 0) 100%);
}
@media (max-width: 899px) {
  .tpage .hero--thesis .hero-text::before {
    inset: -2.4rem -6vw -3rem -6vw;
    background: linear-gradient(0deg,
      rgba(250, 248, 244, 0.95) 0%,
      rgba(250, 248, 244, 0.88) 62%,
      rgba(250, 248, 244, 0) 100%);
  }
}

/* ============================================================
   RESPONSIVE CORRECTIONS
   Found by ../v3-lab/responsive.mjs across twelve real device
   widths. All of it lives here rather than in v2.css, which
   stays byte-identical so the /journey engine regression keeps
   comparing like with like.
   ============================================================ */

/* ---- 1. the navigation handover ----
   v2.css swaps .site-nav for .menu-btn at 760px. The Work
   disclosure was hiding at 900px, so between 761 and 900 - iPad
   portrait, and most Android tablets - the nav was still on
   screen, the menu button was not, and Work was hidden: the
   three offering pages could not be reached from the header at
   all. The two breakpoints have to be the same number. */
@media (max-width: 900px) and (min-width: 761px) {
  .work-disclosure { display: flex; }
  .site-nav { gap: 1.1rem; }
  .work-panel { min-width: 20rem; }
}
@media (max-width: 760px) {
  .work-disclosure { display: none; }
}

/* ---- 2. tap targets ----
   Nav links were 27px tall and the Work trigger 17px, against a
   44px minimum. The header row height does not change: the links
   grow into padding they already had room for. */
/* The child combinator matters. `.site-nav a` also matched the links
   INSIDE the Work panel, and because this block sits later in the file
   than the panel's own rule, its display:inline-flex silently won and
   the panel links were never grids at all - which is why the byline
   rendered beside the name instead of under it. Only the top-level nav
   items need the tap target. */
.site-nav > a, .work-btn {
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.card-cta, .entry-cta, .onward-item a { min-height: 44px; }
.onward-item a { align-items: center; }
@media (hover: none) {
  /* on touch, the inline text links in a run need real height too */
  .entry-cta, .card-cta { padding-block: 0.35rem; }
}

/* ---- 3. type that had fallen below readable ----
   The projected city labels were rendering at 9.9px and the
   menu section labels at 10.9px. 12px is the floor. */
.city-label { font-size: 0.78rem; letter-spacing: 0.14em; }
.city-label--major { font-size: 0.84rem; }
.menu-tag, .mb-label { font-size: 0.78rem; }
.wc-city { font-size: 0.76rem; }
.scroll-cue { font-size: 0.76rem; }
.entry-tag, .card-name { font-size: 0.78rem; }
/* the scoped thesis CSS declares these inside its own media queries, so
   the override has to be at least as specific to win */
.tpage .track-tag, .tpage .pub-tag, .tpage .contact-card-label,
.tpage .dim-label, .tpage .layer-num, .tpage .connects-label,
.tpage .track-receive-label, .tpage .trap-label { font-size: 0.78rem !important; }

/* ---- 4. the three cards on a tablet ----
   768px was dropping straight from three columns to one, which
   wastes half the width and makes the work section scroll for no
   reason. Two across between 700 and 980. */
@media (max-width: 980px) and (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > li:last-child { grid-column: 1 / -1; }
  .cards > li:last-child .card { max-width: none; }
}
@media (max-width: 699px) { .cards { grid-template-columns: 1fr; } }

/* ---- 5. a numbered run of three is cramped below ~1100px ---- */
@media (max-width: 1100px) and (min-width: 861px) {
  .run--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 6. ultrawide: hold the measure, do not let it drift ---- */
@media (min-width: 1700px) {
  .sec { padding-inline: clamp(4rem, 8vw, 10rem); }
}

/* the journey chapter rail was setting its labels at 10.6px */
.rail-label { font-size: 0.78rem; }

/* v2 hid the hero's second CTA below 640px, which was right when it
   pointed at a secondary page. In v3 it is a real route on every page
   that has one - #method, /bridge/network, #work - so it stays, stacked
   under the primary at full width where a thumb can reach it. */
@media (max-width: 640px) {
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .hero-ctas .btn-ghost { display: inline-flex; justify-content: center; align-items: center; }
  .hero-ctas .btn-primary { justify-content: center; text-align: center; }
}

/* the closing line is a row across the foot, not a fourth column */
.footer-end {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6rem 1.6rem;
  margin-top: 0.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(207, 201, 220, 0.16);
}
.footer-end p { margin: 0; }
.footer-end .toTop { margin: 0 0 0 auto; }

@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: auto auto; }
  .footer-inner > .world-clocks { justify-self: start; grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-end .toTop { margin-left: 0; }
}