/* ------------------------------------------------------------------
   TEEARCH - PMC page

   Hand-written, loaded AFTER styles.css and only by pmc.html. It is not
   generated by Tailwind and Tailwind never needs to run for it.

   The palette, the type and the voice are the home page's. The FORM is
   its own: this page is a SITE RECORD. The home page is a bento of
   rounded tiles, the about page a ruled dossier, the services page a
   specification sheet - this one is the drawing set for the practice's
   own work. It opens on a dark record header (the only page on the site
   that does not open on paper), draws the appointment as a programme
   chart, splits duties on a matrix, lists the clearances as a board,
   prints the live schedule with a measured bar against every line, and
   closes inside a drawing title block instead of a panel or a band.

   Every value below reads a brand token that styles.css already
   publishes on :root, so the pages cannot drift apart.
------------------------------------------------------------------ */

/* -------------------------------------------------------- full bleed */

/* Escape the shell and run to both screen edges. body has overflow-x:
   clip, so 100vw cannot open a horizontal scrollbar. */
.bleed {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* ------------------------------------------------------------- type */

/* The masthead h1 uses the home page's own `text-display` size from
   styles.css, so all four heroes set at the same scale. This is the
   size below it, shared by every section heading. */
.head-md {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--color-ink);
}

/* The serif italic accent, same role as on the other three pages. */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-brass);
}

/* Type reversed out of ink. Held in two variables so the record header
   and any other dark block stay in step. */
.on-ink {
  --ink-line: rgba(250, 246, 238, 0.22);
  --ink-soft: rgba(250, 246, 238, 0.62);
  background: var(--color-ink);
  color: var(--color-paper);
}

/* The floating nav pill is 72% paper. On every other page it opens over
   paper, where that is invisible; this page opens over the ink record
   header, and at 72% the nav links land at about 3:1 against what shows
   through. Thickening it here - and only here - keeps the same pill and
   fixes the contrast. app.js still swaps in the solid fill on scroll. */
#hdr { background: color-mix(in srgb, var(--color-paper) 94%, transparent); }

/* ------------------------------------------------------- section ref */

/* This page's section marker: a drawing reference. The number, the
   name, then a hairline that runs off to the right edge of the shell.
   The home page centres an eyebrow, the about page sits one on a rule
   and the services page stamps it inside a keyline box; this one lets
   the rule carry it. */
.ref {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ref .no { color: var(--color-brass); }
.ref .nm { color: var(--color-muted-2); }
.ref::after {
  content: "";
  height: 1px;
  background: var(--color-line);
}
/* Brass is the accent on paper; on ink it goes muddy, so the reference
   takes amber there instead - fills only, exactly as the brand allows. */
.on-ink .ref .no { color: var(--color-amber); }
.on-ink .ref .nm { color: var(--ink-soft); }
.on-ink .ref::after { background: var(--ink-line); }

/* --------------------------------------------------- record header */

/* The page opens dark and full bleed, running up behind the floating
   nav. Padding, not margin, so the ink starts at the top of the page. */
.record {
  padding-block: 9rem 3.5rem;
}

@media (min-width: 768px) {
  .record { padding-block: 12rem 4.5rem; }
}

.record h1 { color: var(--color-paper); }
.record .accent { color: var(--color-amber); }
.record .lede { color: var(--ink-soft); }

/* Four figures on hairlines across the foot of the header. Ruled, not
   tiled - the home page's stat tiles are the thing this replaces. */
.figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 4rem;
  border-top: 1px solid var(--ink-line);
}
.figs > div {
  padding: 1.5rem 0 0;
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 1.5rem;
}
.figs > div + div { padding-left: 1.5rem; border-left: 1px solid var(--ink-line); }
.figs > div:nth-child(odd) { padding-left: 0; border-left: 0; }
.figs dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.figs dd {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-paper);
}
.figs .note {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .figs { grid-template-columns: repeat(4, 1fr); }
  .figs > div { padding-bottom: 2rem; }
  .figs > div + div { padding-left: 2.5rem; border-left: 1px solid var(--ink-line); }
  .figs > div:nth-child(odd) { padding-left: 2.5rem; border-left: 1px solid var(--ink-line); }
  .figs > div:first-child { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------- section base */

.sec { padding-block: 5.5rem; }
.sec-alt { background: var(--color-paper-2); }

@media (min-width: 768px) {
  .sec { padding-block: 7rem; }
}

/* Heading block: the ref, the heading, the standfirst. */
.sec-head { margin-top: 2.25rem; }
.sec-head p { margin-top: 1.5rem; }

/* ------------------------------------------------------------ matrix */

/* Who carries what. A responsibility matrix, filled squares against
   three columns - the one grid on the site that is read across rather
   than down. On a phone the columns collapse and each duty carries its
   holders as mono labels instead. */
.matrix {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.matrix th {
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-muted-2);
  vertical-align: bottom;
}
.matrix thead th + th { text-align: center; width: 7.5rem; }
.matrix td {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.matrix tbody th {
  padding: 1.1rem 1.5rem 1.1rem 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--color-ink);
  vertical-align: top;
}
.matrix td.mk { text-align: center; }

/* The marks sit a long way from the duty they belong to, so the row
   lights up under the cursor and the eye can carry across. */
.matrix tbody tr { transition: background-color 0.25s var(--ease-out-soft); }
.matrix tbody tr:hover { background: var(--color-paper-3); }

/* A filled square is ours, a hollow one is shared, nothing is theirs.
   The legend under the table says so in words as well. */
.mk i {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid var(--color-brass);
}
.mk i.on { background: var(--color-brass); }
.mk i.half { background: var(--color-amber); border-color: var(--color-amber); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend i {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border: 1px solid var(--color-line);
}
.legend i.on { background: var(--color-brass); border-color: var(--color-brass); }
.legend i.half { background: var(--color-amber); border-color: var(--color-amber); }

@media (max-width: 767px) {
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .matrix tbody th { display: block; border-bottom: 0; padding: 1.1rem 0 0.35rem; }
  .matrix tr { display: block; border-bottom: 1px solid var(--color-line); }
  .matrix td { display: none; }
  .matrix td.who {
    display: block;
    border-bottom: 0;
    padding: 0 0 1.1rem;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brass);
  }
  .legend { display: none; }
}

/* On a wide screen the split is carried by three columns of squares,
   which say nothing to a screen reader. The written version is not
   dropped there, only taken out of the picture: the cell collapses to
   nothing and its text stays in the accessibility tree. */
@media (min-width: 768px) {
  .matrix td.who { width: 0; padding: 0; }
  .matrix td.who span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------- programme */

/* The appointment drawn as a programme: five stages across, the work
   we carry down the side, an amber bar showing which stages each line
   runs through. Nothing here is dated - the stages are the project's,
   not a calendar's - so the chart states shape, not duration.

   Under 900px the chart becomes a list and each line prints its own
   span in mono, because eight bars on a phone-width track say nothing. */
.gantt { margin-top: 3rem; }

.g-head { display: none; }

.g-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.g-list > li {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--color-line);
}
.g-list .t {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}
.g-when {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass);
}

@media (min-width: 900px) {
  /* Same trick as the matrix: the bars are aria-hidden decoration, so
     the written span survives for anyone not looking at the chart. */
  .g-when {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .g-list {
    position: relative;
    border-top: 0;
  }
  /* The vertical rules are painted once, behind every row, over the bar
     track only - the label column is left clear. Five equal columns, so
     a repeating gradient at 20% does the whole job. */
  .g-list::before {
    content: "";
    position: absolute;
    inset: 0 0 0 17rem;
    border-right: 1px solid var(--color-line);
    background-image: repeating-linear-gradient(
      to right,
      var(--color-line) 0 1px,
      transparent 1px 20%
    );
    pointer-events: none;
  }

  .g-head {
    display: grid;
    grid-template-columns: 17rem repeat(5, 1fr);
    border-bottom: 1px solid var(--color-ink);
    padding-bottom: 0.75rem;
  }
  .g-head span {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted-2);
    text-align: center;
  }
  .g-head span:first-child { text-align: left; color: var(--color-ink); }

  .g-list > li {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 17rem repeat(5, 1fr);
    align-items: center;
    padding: 0;
    min-height: 3.25rem;
  }
  .g-list .t {
    grid-column: 1;
    padding-right: 1.5rem;
    font-size: 0.9375rem;
  }
  .g-bar {
    height: 0.5rem;
    background: var(--color-amber);
    margin: 0 0.5rem;
  }
  /* The one line that runs the whole appointment reads as a rule, not a
     block, so it does not shout down the eight stages above it. */
  .g-bar.thin { height: 3px; background: var(--color-brass); }
}

/* ------------------------------------------------------------ plate */

/* The one photograph on the page, set as a plate: the caption sits ON
   TOP of the image on its own rule, which is where a drawing puts it.
   (The services page hangs its caption in the gutter beside the band,
   the about page runs its images full bleed - neither is repeated.)

   The widest source in media/ is 900px, so the plate is held to the
   shell and kept shallow: a 3.4:1 crop of a 900px file never has to be
   blown up past the width it was cut at on a normal screen. */
.plate { margin: 3.5rem 0 0; }
.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.plate figcaption span:first-child { color: var(--color-brass); }
.plate-img {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  background: var(--color-paper-3);
  aspect-ratio: 16 / 9;
}
.plate-img img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .plate-img { aspect-ratio: 3.4 / 1; }
}

/* ----------------------------------------------------------- phases */

/* Four numbered phases, each with the scope on the left and what the
   client is handed on the right. The numeral is outlined, not filled -
   it belongs to the sheet, not to the sentence. */
.phase {
  display: grid;
  gap: 1.75rem;
  padding: 2.75rem 0;
  border-top: 1px solid var(--color-line);
}
.phase:first-of-type { border-top: 1px solid var(--color-ink); }
.phase:last-of-type { border-bottom: 1px solid var(--color-line); }

.phase .no {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.85;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-line);
}
@supports not (-webkit-text-stroke: 1px red) {
  .phase .no { color: var(--color-line); }
}

.phase h3 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.phase h3 + p {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* The right column of a phase: what the phase is there to stop from
   happening. Hung off a brass keyline so it reads as a margin note
   against the scope, not as a second paragraph of it. */
.prevent {
  margin: 0;
  border-left: 2px solid var(--color-brass);
  padding-left: 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* Square amber markers, because the site's bullet is a round amber dot
   and these are lines on a schedule. */
.duty {
  list-style: none;
  margin: 0;
  padding: 0;
}
.duty > li {
  display: grid;
  grid-template-columns: 0.5rem 1fr;
  gap: 0.875rem;
  padding: 0.6rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.duty > li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em;
  background: var(--color-amber);
}
/* The label that sits above a deliverables list. It is a sibling of the
   list, not a child of it. */
.cap {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}

@media (min-width: 900px) {
  .phase {
    grid-template-columns: 6rem 1fr 20rem;
    gap: 3rem;
    align-items: start;
    padding: 3.25rem 0;
  }
  .phase .no { grid-row: 1; }
}

/* ------------------------------------------------------------ board */

/* The clearance board. Every consent a Mumbai project has to carry,
   with the body that issues it, as cells on a hairline grid - the gaps
   ARE the rules, drawn by the grid's own background. */
.board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.board > div {
  background: var(--color-paper);
  padding: 1.5rem 1.25rem;
}
.board .code {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  color: var(--color-brass);
}
.board h3 {
  margin: 0.9rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}
.board p {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-muted-2);
}
.sec-alt .board > div { background: var(--color-paper-2); }

@media (min-width: 700px) {
  .board { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .board { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------- schedule */

/* The live book of work. The home page keeps this inside a rounded
   tile with a scrollbar; here it is the reason for the page, so it runs
   the full width of the shell with a measured bar against every line.
   The bar is scaled to the largest project IN ITS OWN column, which the
   caption says out loud - ongoing and completed are not comparable. */
.tabs {
  display: flex;
  gap: 0;
  margin-top: 2.5rem;
  border: 1px solid var(--color-ink);
  width: fit-content;
}
.rec-tab {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--color-ink);
  background: transparent;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out-soft), color 0.3s var(--ease-out-soft);
}
.rec-tab:last-child { border-right: 0; }
.rec-tab:hover { background: var(--color-paper-3); color: var(--color-ink); }
.rec-tab[aria-selected="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.sched {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.75rem;
  text-align: left;
}
.sched th {
  padding: 0 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-muted-2);
}
.sched td {
  padding: 0.85rem 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 0.9375rem;
  color: var(--color-muted);
  vertical-align: middle;
}
.sched tbody tr { transition: background-color 0.25s var(--ease-out-soft); }
.sched tbody tr:hover { background: var(--color-paper-3); }
.sched .idx {
  width: 3rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
}
.sched .nm { font-weight: 600; color: var(--color-ink); }
.sched .nm span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-2);
  margin-top: 0.25rem;
}
.sched .ar {
  width: 9rem;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  padding-right: 0;
}
.sched .mg { width: 34%; padding-right: 0; padding-left: 1.75rem; }
.sched .mg i {
  display: block;
  height: 6px;
  min-width: 2px;
  background: var(--color-brass);
  transform-origin: left;
}
/* border-collapse resolves a tie between two 1px borders in favour of
   the cell above, which would hand the total rule to the last project
   row's soft hairline. Drop that one so the ink rule is the only border
   on the join. */
.sched tbody tr:last-child td { border-bottom: 0; }

.sched tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--color-ink);
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.sched tfoot .ar { font-size: 0.9375rem; letter-spacing: 0; }

.sched-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}

@media (max-width: 899px) {
  .sched .lc,
  .sched .mg,
  .sched .idx { display: none; }
  .sched .ar { width: auto; }
}

@media (min-width: 900px) {
  .sched .nm span { display: none; }
}

/* ------------------------------------------------------- empanelment */

/* Four institutions, named in type. The about page already keeps the
   partner logos as a still register, so this page does not repeat them -
   it prints what the empanelment actually buys the client. */
.panels {
  display: grid;
  gap: 1px;
  margin-top: 3rem;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.panels > div {
  background: var(--color-paper-2);
  padding: 2rem 1.5rem;
}
.panels h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.panels .role {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brass);
}
.panels p.txt {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

@media (min-width: 640px) {
  .panels { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .panels { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------- title block */

/* The closing. The home page ends on a rounded ink panel, the about
   page on a full-bleed ink band and the services page on an amber one -
   so this page ends where a drawing ends, in a title block: one ruled
   rectangle, every cell labelled, the sheet reference along the foot. */
.tblock {
  margin-top: 3rem;
  border: 1px solid var(--color-ink);
}
.tb-top { padding: 2.5rem 1.75rem; }
.tb-top h2 { margin: 0; }
.tb-top p {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--color-muted);
}
.tb-act { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* What to put in the first email, hung off a rule in the right half of
   the block so the cell is not half empty on a wide screen. */
.tb-ask { margin-top: 3rem; }

@media (min-width: 900px) {
  .tb-top {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: start;
  }
  .tb-ask {
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-ink);
    padding-top: 1.25rem;
  }
}

.tb-cells {
  display: grid;
  border-top: 1px solid var(--color-ink);
}
.tb-cells > div {
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--color-line);
}
.tb-cells > div:last-child { border-bottom: 0; }
.tb-cells dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.tb-cells dd {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--color-ink);
}
.tb-cells a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: border-color 0.3s var(--ease-out-soft), color 0.3s var(--ease-out-soft);
}
.tb-cells a:hover { color: var(--color-brass); border-bottom-color: var(--color-brass); }

.tb-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  border-top: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.9rem 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .tb-top { padding: 3.5rem 2.5rem; }
  .tb-cells { grid-template-columns: repeat(4, 1fr); }
  .tb-cells > div {
    padding: 1.5rem 2.5rem;
    border-bottom: 0;
    border-left: 1px solid var(--color-line);
  }
  .tb-cells > div:first-child { border-left: 0; }
  .tb-foot { padding: 1rem 2.5rem; }
}

/* Reveals reuse the home page's .reveal contract - app.js adds .is-in. */