/* ===========================================================================
   drawing-set.css

   An experiment, 30 August 2026. The site had four or five section shapes
   reused on every page, so every page read the same. This is a second
   vocabulary, built for /trades/roofing-contractors/ first and intended to be
   lifted onto the rest of the site if it earns it.

   THE IDEA, IN ONE SENTENCE
   The page is laid out as the drawing set a contractor already works from: a
   title block instead of a hero, numbered general notes, drawing callouts
   instead of a card grid, a site programme instead of a grid of moments,
   specification clauses instead of a definition list, a statutory site notice
   for the honest limits, an RFI register instead of an FAQ, and a tender
   return docket for the close.

   Every device here is a real document from UK construction. That is the whole
   point: it is not a style borrowed from software marketing and dropped on a
   roofing page, it is the paperwork the reader has handled for twenty years.

   WHY IT LOOKS BRITISH
   Drawing-office draughting, NBS specification conventions and the flat
   officialdom of a statutory notice, plus GOV.UK's plainness: rules and
   hairlines rather than boxes and shadows, type doing the hierarchy, one
   accent used sparingly. No rounded cards, no soft shadows, no gradients,
   which is also what the core design system already asks for.

   SCOPING
   Everything is under .dwg so it cannot leak into the shared components, and
   this sheet loads last. Reverting is: drop drawing-set.css from $page_css and
   restore the page from ~/backups/.
   =========================================================================== */

.dwg {
  --dwg-ink:      #0b0c0e;
  --dwg-ink-2:    #43474e;
  --dwg-mute:     #767b84;
  --dwg-paper:    #fcfcfa;          /* drawing paper, a shade off the site white */
  --dwg-line:     #c4c8cf;          /* the pen that draws the sheet */
  --dwg-line-2:   #e4e7ec;          /* hairlines inside a block */
  --dwg-grid:     #eef1f5;          /* the printed grid, barely there */
  --dwg-blue:     #1a72cc;          /* the site accent, unchanged */
  --dwg-nonrepro: #dcebf8;          /* non-repro blue: on a real sheet it does
                                       not photocopy, here it is the fill that
                                       must never carry meaning on its own */
  --dwg-red:      #c8102e;          /* revision red, used at most twice a page */

  /* Draughting labels. Small, wide, upper, and never larger than 12px: on a
     real drawing the annotation is always smaller than the thing annotated. */
  --dwg-label: 600 11px/1.2 var(--f-ui);
  --dwg-track: 0.13em;

  --dwg-gap: clamp(20px, 3.4vw, 48px);

  color: var(--dwg-ink);
  background: var(--dwg-paper);
}

/* A drawing is read by pointing at a grid reference, so the reference letters
   are decoration only and must never reach a screen reader. */
.dwg [data-refs] { user-select: none; }

.dwg-label {
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  text-transform: uppercase;
  color: var(--dwg-mute);
}

/* ── The sheet ──────────────────────────────────────────────────────────────
   The hero. A bordered sheet with grid references on two edges, the drawing
   itself top-left, a photographic record at the right, and a title block
   running along the bottom the way it does on an A1 sheet.

   The border is 2px and square. Everything inside is 1px. That single step in
   line weight does the work that a shadow would do elsewhere, and it is how
   drawings have always separated the sheet from its contents. */
.dwg-sheet { padding: clamp(18px, 3vw, 40px) 0 clamp(28px, 4vw, 56px); }

.dwg-frame {
  position: relative;
  border: 2px solid var(--dwg-ink);
  background:
    linear-gradient(to right, var(--dwg-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, var(--dwg-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--dwg-paper);
  padding: clamp(26px, 3.4vw, 44px) clamp(20px, 3vw, 40px) 0 clamp(34px, 3.6vw, 56px);
}

/* Grid references. Absolutely positioned so they sit on the sheet edge like
   printed marks rather than taking part in the layout. */
.dwg-refs {
  position: absolute;
  display: flex;
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  color: var(--dwg-mute);
  pointer-events: none;
}
.dwg-refs-x { top: 6px; left: 34px; right: 20px; justify-content: space-between; }
/* Held inside .dwg-sheet-main rather than the frame, so the letters stop at
   the drawing area and cannot land on top of the title block below it. The
   negative left pulls them back out through the frame's padding to the sheet
   edge, which is where a printed reference sits. */
.dwg-refs-y {
  left: calc(-1 * clamp(34px, 3.6vw, 56px) + 9px);
  top: 4px; bottom: 4px;
  flex-direction: column; justify-content: space-between;
}
.dwg-sheet-main { position: relative; }

.dwg-sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.dwg-kicker {
  display: inline-block;
  margin: 0 0 22px;
  padding: 5px 10px 4px;
  background: var(--dwg-ink);
  color: #fff;
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  text-transform: uppercase;
}

/* The one big typographic move on the page. Tight leading, tight tracking,
   and it is allowed to run to three lines: a drawing title is not a headline
   competing for attention, it is the name of the thing. */
.dwg-frame h1 {
  margin: 0;
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: clamp(38px, 5.3vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.dwg-sub {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: var(--fs-lg);
  line-height: 1.58;
  color: var(--dwg-ink-2);
  text-wrap: pretty;
}

.dwg-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* The photographic record. On a drawing set a photograph is never bled or
   rounded: it is pasted on square with a caption underneath saying what it is
   and when it was taken. */
.dwg-plate { margin: 0; }
.dwg-plate img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--dwg-ink);
  filter: grayscale(1) contrast(1.04);
}
.dwg-plate figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--dwg-line);
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  text-transform: uppercase;
  color: var(--dwg-mute);
}

/* Title block. Full width along the bottom of the sheet, cells divided by
   hairlines, each cell a label over a value. This is the device the whole
   page hangs off, so it is the one thing on the sheet drawn in full black. */
.dwg-title-block {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: clamp(28px, 3.6vw, 52px) calc(-1 * clamp(20px, 3vw, 40px)) 0 calc(-1 * clamp(34px, 3.6vw, 56px));
  border-top: 2px solid var(--dwg-ink);
}
.dwg-tb-cell {
  padding: 12px clamp(10px, 1.2vw, 18px) 14px;
  border-right: 1px solid var(--dwg-line);
}
.dwg-tb-cell:last-child { border-right: 0; }
.dwg-tb-cell dt {
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  text-transform: uppercase;
  color: var(--dwg-mute);
}
.dwg-tb-cell dd {
  margin: 5px 0 0;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dwg-ink);
}
.dwg-tb-cell dd .rev {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  background: var(--dwg-red);
  color: #fff;
  text-align: center;
}

@media (max-width: 1000px) {
  .dwg-sheet-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dwg-title-block { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dwg-tb-cell:nth-child(3) { border-right: 0; }
  .dwg-tb-cell:nth-child(-n+3) { border-bottom: 1px solid var(--dwg-line); }
  .dwg-refs-y { display: none; }
}
@media (max-width: 560px) {
  .dwg-title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwg-tb-cell:nth-child(even) { border-right: 0; }
  .dwg-tb-cell:nth-child(-n+4) { border-bottom: 1px solid var(--dwg-line); }
  .dwg-refs-x { display: none; }
}

/* ── Section headers ────────────────────────────────────────────────────────
   Every section below the sheet is a drawing in the set, so each one carries a
   number. The number is not decoration: it is how the sections cross-refer to
   each other, the way a detail on one sheet points at another. */
.dwg-sec { padding: clamp(48px, 6vw, 96px) 0; border-top: 1px solid var(--dwg-line); }

.dwg-hd {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 56px);
}
.dwg-hd-lab {
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  text-transform: uppercase;
  color: var(--dwg-ink);
  padding-top: 10px;
  border-top: 2px solid var(--dwg-ink);
}
.dwg-hd h2 {
  margin: 0;
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h1);
  line-height: 0.94;
  letter-spacing: var(--ls-hero);
  max-width: 18ch;
  text-wrap: balance;
}
.dwg-hd .dwg-lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: 1.58;
  color: var(--dwg-ink-2);
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .dwg-hd { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dwg-hd-lab { display: inline-block; padding-top: 8px; }
}

/* ── General notes ──────────────────────────────────────────────────────────
   Clause numbering with a hanging indent, exactly as a notes block on a
   drawing is set. Two notes, no more: on a real sheet the general notes are
   the things you must read before you read anything else, and a list of
   fourteen of them means nobody reads any. */
.dwg-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dwg-notes > li {
  display: block;
  padding: 22px 0;
  border-top: 1px solid var(--dwg-line-2);
}
.dwg-notes > li:first-child { border-top: 1px solid var(--dwg-line); }
.dwg-notes > li:last-child { border-bottom: 1px solid var(--dwg-line); }
.dwg-notes p {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--dwg-ink-2);
  max-width: 76ch;
  text-wrap: pretty;
}
.dwg-notes p b, .dwg-notes p strong { color: var(--dwg-ink); font-weight: 600; }

/* ── Hatch legend ───────────────────────────────────────────────────────────
   Replaces the scrolling ticker. A marquee of trade words is motion for its
   own sake and it says nothing; a legend is the strip on a drawing that tells
   you what the hatches mean, and it can carry the same vocabulary while
   actually being about roofing.

   Static, because a legend you cannot finish reading is not a legend. */
.dwg-legend {
  border-top: 1px solid var(--dwg-line);
  border-bottom: 1px solid var(--dwg-line);
  background: var(--dwg-paper);
  padding: 20px 0;
}
.dwg-legend-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px clamp(14px, 2vw, 28px);
}
.dwg-legend-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.dwg-legend-item svg { flex: 0 0 auto; border: 1px solid var(--dwg-ink); display: block; }
.dwg-legend-item span {
  font: var(--dwg-label); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--dwg-ink-2);
  line-height: 1.25;
}

/* ── Specification clauses ──────────────────────────────────────────────────
   The eight requirements, set the way a UK specification is set: a clause
   reference in the margin, a short clause title in caps, then the clause
   itself. NBS has looked like this for decades and every contractor has read
   one, which is the point.

   No cards, no icons. A specification earns its authority by being plain. */
.dwg-spec { display: grid; border-top: 1px solid var(--dwg-ink); }
.dwg-clause {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  padding: 22px 0;
  border-bottom: 1px solid var(--dwg-line-2);
}
.dwg-clause:last-child { border-bottom: 1px solid var(--dwg-ink); }
.dwg-clause h3 {
  margin: 0;
  padding-top: 2px;
  font-family: var(--f-ui);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dwg-ink);
}
.dwg-clause p { margin: 0; font-size: var(--fs-md); line-height: 1.62; color: var(--dwg-ink-2); max-width: 82ch; text-wrap: pretty; }
.dwg-clause a { color: var(--dwg-ink); text-decoration-color: var(--dwg-blue); text-underline-offset: 3px; }
.dwg-clause a:hover { color: var(--dwg-blue); }
@media (max-width: 700px) {
  .dwg-clause { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* The clause that closes a spec section. On a drawing this is the note in the
   box: the one line that governs everything above it. */
.dwg-govern {
  margin-top: 30px;
  border: 2px solid var(--dwg-ink);
  padding: 18px clamp(16px, 2.2vw, 28px);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
}
.dwg-govern .k { font: var(--dwg-label); letter-spacing: var(--dwg-track); text-transform: uppercase; color: var(--dwg-mute); }
.dwg-govern .v { font-family: var(--f-deck); font-weight: 700; font-size: clamp(17px, 1.9vw, 23px); line-height: 1.2; }
.dwg-govern .v b { border-bottom: 3px solid var(--dwg-blue); }

/* ── Site notice ────────────────────────────────────────────────────────────
   The honest-limits section, set as the notice that gets cable-tied to the
   hoarding. Heavy rule, black header bar, numbered items, flat officialdom.

   The tone is the reason for the form. This is the section that earns the
   rest of the page, so it should look like something posted rather than
   something marketed: no tint, no icon, no soft edge. */
.dwg-notice { border: 2px solid var(--dwg-ink); background: var(--dwg-paper); }
.dwg-notice-hd {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: baseline; justify-content: space-between;
  background: var(--dwg-ink); color: var(--dwg-paper);
  padding: 11px clamp(16px, 2.2vw, 28px) 12px;
}
.dwg-notice-hd b {
  font: var(--dwg-label); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.dwg-notice-hd span { font: var(--dwg-label); letter-spacing: var(--dwg-track); text-transform: uppercase; color: #9aa1ab; }
.dwg-notice-body { padding: clamp(22px, 3vw, 38px) clamp(16px, 2.2vw, 28px); }
.dwg-notice-body > h2 {
  margin: 0 0 16px;
  font-family: var(--f-deck); font-weight: var(--fw-deck);
  font-size: var(--fs-h1); line-height: 0.94;
  letter-spacing: var(--ls-hero); max-width: 16ch;
  text-wrap: balance;
}
.dwg-notice-body > .dwg-lede { margin: 0 0 26px; max-width: 62ch; font-size: var(--fs-lg); line-height: 1.55; color: var(--dwg-ink-2); }

.dwg-notice-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3.4vw, 52px); }
.dwg-notice-list > li { padding: 16px 0; border-top: 1px solid var(--dwg-line); }
.dwg-notice-list h3 {
  margin: 0 0 7px;
  font-family: var(--f-ui); font-size: 13px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.dwg-notice-list h3 i {
  font-style: normal; color: var(--dwg-red); margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.dwg-notice-list p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--dwg-ink-2); text-wrap: pretty; }
.dwg-notice-foot {
  margin-top: 26px; padding-top: 16px; border-top: 2px solid var(--dwg-ink);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
}
.dwg-notice-foot .k { font: var(--dwg-label); letter-spacing: var(--dwg-track); text-transform: uppercase; color: var(--dwg-mute); }
.dwg-notice-foot .v { font-family: var(--f-deck); font-weight: 700; font-size: clamp(16px, 1.8vw, 21px); }
@media (max-width: 780px) { .dwg-notice-list { grid-template-columns: minmax(0, 1fr); } }

/* ── Schedule ───────────────────────────────────────────────────────────────
   The materials table, set as a drawing schedule: a reference, the hatch key
   that identifies the material elsewhere on the sheet, then the entry.

   The hatch column is the reason this is not just a table with nicer borders.
   It ties this section to the legend strip further up the page, so the two
   read as one document rather than two blocks that happen to share a palette. */
.dwg-sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dwg-sched { width: 100%; border-collapse: collapse; min-width: 720px; }
.dwg-sched caption {
  text-align: left; padding-bottom: 12px;
  font: var(--dwg-label); letter-spacing: var(--dwg-track);
  text-transform: uppercase; color: var(--dwg-mute);
}
.dwg-sched thead th {
  text-align: left; vertical-align: bottom;
  padding: 0 16px 9px 0;
  border-bottom: 2px solid var(--dwg-ink);
  font: var(--dwg-label); letter-spacing: var(--dwg-track);
  text-transform: uppercase; color: var(--dwg-ink);
}
.dwg-sched tbody th, .dwg-sched tbody td {
  text-align: left; vertical-align: top;
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid var(--dwg-line-2);
  font-size: 14.5px; line-height: 1.52; color: var(--dwg-ink-2);
}
.dwg-sched tbody th {
  font-family: var(--f-ui); font-weight: 600; color: var(--dwg-ink);
  white-space: nowrap;
}
.dwg-sched .c-ref { width: 54px; font-variant-numeric: tabular-nums; color: var(--dwg-mute); font-weight: 500; }
.dwg-sched .c-key { width: 46px; padding-right: 10px; }
.dwg-sched .c-key svg { display: block; border: 1px solid var(--dwg-ink); }
.dwg-sched .c-quirk { color: var(--dwg-ink); }
.dwg-sched tbody tr:last-child th, .dwg-sched tbody tr:last-child td { border-bottom: 2px solid var(--dwg-ink); }

/* ── RFI register ───────────────────────────────────────────────────────────
   The FAQ, set as a request for information schedule. Construction already has
   a document for "somebody asked a question and somebody answered it on the
   record", and this is it, so the FAQ stops being a marketing accordion and
   becomes the thing a contractor raises every week.

   details/summary is kept exactly as it was: the site extracts FAQPage schema
   from details.faq-item, span.qtxt and div.body in includes/schema.php, and
   changing any of those three silently drops the structured data. */
.dwg-rfi { border-top: 2px solid var(--dwg-ink); }
.dwg-rfi .faq-item { border-bottom: 1px solid var(--dwg-line); }
.dwg-rfi .faq-q {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 34px;
  gap: clamp(12px, 2vw, 28px);
  align-items: baseline;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.dwg-rfi .faq-q::-webkit-details-marker { display: none; }
.dwg-rfi .dwg-rfi-topic {
  font: var(--dwg-label); letter-spacing: var(--dwg-track);
  text-transform: uppercase; color: var(--dwg-mute);
}
.dwg-rfi .qtxt {
  font-family: var(--f-deck); font-weight: 700;
  font-size: clamp(17px, 1.8vw, 21px); line-height: 1.26;
  letter-spacing: -0.012em; color: var(--dwg-ink);
}
.dwg-rfi .toggle {
  justify-self: end; align-self: start;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--dwg-line); color: var(--dwg-ink-2);
  font-family: var(--f-ui); font-size: 15px; line-height: 1;
}
.dwg-rfi details[open] .toggle { background: var(--dwg-ink); border-color: var(--dwg-ink); color: #fff; }
.dwg-rfi .faq-a { padding: 0 0 22px; }
.dwg-rfi .faq-a .body {
  margin-left: clamp(0px, 12vw, 150px);
  max-width: 78ch;
  padding-left: 18px;
  border-left: 2px solid var(--dwg-line);
  font-size: var(--fs-md); line-height: 1.62; color: var(--dwg-ink-2);
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .dwg-rfi .faq-q { grid-template-columns: minmax(0, 1fr) 26px; gap: 6px 10px; }
  .dwg-rfi .dwg-rfi-topic { grid-column: 1 / -1; }
  .dwg-rfi .faq-a .body { margin-left: 0; }
}

/* ── Docket ─────────────────────────────────────────────────────────────────
   The close, set as the return slip stapled to a tender: who it goes to, what
   to bring, by when. A form the reader recognises, rather than a third
   centred call to action. */
.dwg-docket {
  border: 2px solid var(--dwg-ink);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}
.dwg-docket-main { padding: clamp(24px, 3.4vw, 44px); border-right: 1px solid var(--dwg-ink); }
.dwg-docket-main h2 {
  margin: 14px 0 16px;
  font-family: var(--f-deck); font-weight: var(--fw-deck);
  font-size: var(--fs-h1); line-height: 0.94; letter-spacing: var(--ls-hero);
  max-width: 14ch;
  text-wrap: balance;
}
.dwg-docket-main p { margin: 0; max-width: 52ch; font-size: var(--fs-lg); line-height: 1.55; color: var(--dwg-ink-2); }
.dwg-docket-side { display: grid; align-content: start; }
.dwg-docket-field { padding: 14px clamp(16px, 2.2vw, 24px) 15px; border-bottom: 1px solid var(--dwg-line); }
.dwg-docket-field:last-child { border-bottom: 0; }
.dwg-docket-field dt { font: var(--dwg-label); letter-spacing: var(--dwg-track); text-transform: uppercase; color: var(--dwg-mute); }
.dwg-docket-field dd { margin: 5px 0 0; font-family: var(--f-ui); font-size: 15px; font-weight: 600; line-height: 1.3; }
.dwg-docket-field dd a { color: var(--dwg-ink); text-decoration-color: var(--dwg-blue); text-underline-offset: 3px; }
.dwg-docket-field dd a:hover { color: var(--dwg-blue); }
@media (max-width: 860px) {
  .dwg-docket { grid-template-columns: minmax(0, 1fr); }
  .dwg-docket-main { border-right: 0; border-bottom: 1px solid var(--dwg-ink); }
}

/* core.css rotates .toggle 45deg on open, which turns a + into a x. That works
   on a bare glyph; here the glyph sits in a square, and rotating the square
   makes a diamond that reads as a rendering fault. Cancel the rotation and
   swap the character instead, which is what the rotation was imitating. */
.dwg-rfi .faq-item[open] .toggle { transform: none; }
.dwg-rfi .toggle { font-size: 0; }
.dwg-rfi .toggle::before { content: '+'; font-size: 15px; line-height: 1; }
.dwg-rfi .faq-item[open] .toggle::before { content: '\2212'; }


/* The regulations reuse the materials schedule rather than inventing a third
   table style. Two columns, so it does not need the 720px floor the materials
   one has, and the regime name is the row header. */
.dwg-sched-reg { min-width: 0; }
.dwg-sched-reg tbody th { white-space: normal; width: 30%; padding-right: clamp(20px, 3vw, 48px); }

/* ── Requirement and provision ──────────────────────────────────────────────
   The six trade points, rebuilt 30 Aug 2026. They were six identical stacks of
   title, paragraph, eight hairline facts and a foot, on a full black band: one
   shape repeated six times, which is the fault this whole exercise exists to
   fix, and a wall of reversed text to read.

   The content was always a requirement and a provision, which in UK practice is
   Employer's Requirements against Contractor's Proposals, so it is set as that:
   the trade on the left, the platform on the right.

   The move that makes it work is that the provision cells do not gap. They butt
   into one continuous black column running the height of the section, so the
   answers read as a single spine you can follow on their own rather than as six
   boxes. That is also why this section no longer needs a dark background: the
   spine carries the tonal contrast the black band used to. */
.dwg-req { border-top: 2px solid var(--dwg-ink); }
.dwg-req-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  border-bottom: 1px solid var(--dwg-ink);
}
.dwg-req-head span {
  font: var(--dwg-label); letter-spacing: var(--dwg-track);
  text-transform: uppercase; color: var(--dwg-mute);
  padding: 9px 0;
}
.dwg-req-head span:last-child { padding-left: clamp(18px, 2.4vw, 34px); }

.dwg-req-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: stretch;
}
.dwg-req-need { padding: clamp(24px, 3vw, 38px) clamp(24px, 3.2vw, 48px) clamp(26px, 3vw, 40px) 0; }
.dwg-req-row + .dwg-req-row .dwg-req-need { border-top: 1px solid var(--dwg-line); }

.dwg-req-need h3 {
  margin: 0 0 12px;
  font-family: var(--f-deck); font-weight: 700;
  font-size: clamp(21px, 2.3vw, 30px); line-height: 1.12;
  letter-spacing: -0.016em; max-width: 20ch;
}
.dwg-req-need > p {
  margin: 0; max-width: 56ch;
  font-size: var(--fs-md); line-height: 1.6; color: var(--dwg-ink-2);
  text-wrap: pretty;
}
/* The supporting facts are supporting: quiet, tight, and no longer split into
   two columns, which had turned twenty four short lines into a grid of rules. */
.dwg-req-need ul { list-style: none; margin: 14px 0 0; padding: 0; }
.dwg-req-need ul li {
  padding: 3px 0;
  font-size: 14px; line-height: 1.5; color: var(--dwg-ink-2);
}
/* No rule between facts. Four supporting lines did not need four separators,
   and stacked against six rows that was twenty four hairlines in one section,
   which is what made the old version read as a grid. */

.dwg-req-prov {
  background: var(--dwg-ink); color: var(--dwg-paper);
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 34px) clamp(26px, 3vw, 40px);
}
.dwg-req-prov b {
  display: block; margin-bottom: 14px;
  font-family: var(--f-deck); font-weight: 700;
  font-size: clamp(21px, 2.3vw, 30px); line-height: 1.12;
  letter-spacing: -0.016em;
}
.dwg-req-prov p {
  margin: 0; max-width: 46ch;
  font-size: 14.5px; line-height: 1.62; color: #c2c7cf;
  text-wrap: pretty;
}
/* A hairline inside the spine keeps the six provisions legible as separate
   answers without breaking the column into cards. */
.dwg-req-row + .dwg-req-row .dwg-req-prov {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (max-width: 880px) {
  .dwg-req-head { display: none; }
  .dwg-req-row { grid-template-columns: minmax(0, 1fr); }
  .dwg-req-need { padding-right: 0; padding-bottom: clamp(18px, 3vw, 26px); }
  .dwg-req-prov { margin-bottom: 4px; }
  .dwg-req-row + .dwg-req-row .dwg-req-prov { box-shadow: none; }
}

/* The provision cell is as tall as the requirement beside it, and the answer
   alone did not fill it. Rather than padding the copy, the foot of each cell
   names the modules that actually do the work, pushed to the bottom with auto
   margin so the spine ends in somewhere to go. */
.dwg-req-prov { display: flex; flex-direction: column; }
.dwg-req-mods {
  margin-top: auto; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
}
.dwg-req-mods span {
  font: var(--dwg-label); letter-spacing: var(--dwg-track);
  text-transform: uppercase; color: #868d97;
}
.dwg-req-mods a {
  font-family: var(--f-ui); font-size: 13.5px; font-weight: 600;
  color: var(--dwg-paper); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  padding-bottom: 2px;
}
.dwg-req-mods a:hover, .dwg-req-mods a:focus-visible { border-bottom-color: var(--dwg-paper); }
@media (max-width: 880px) { .dwg-req-mods { padding-top: 16px; } }

/* ── Day book ───────────────────────────────────────────────────────────────
   The week. Rebuilt 30 Aug 2026, having first been drawn as a Gantt programme,
   which was wrong and wrong in front of the one audience that would notice.

   A programme bar means an activity runs from one date to another. Those bars
   sat in a single cell each, to say something the row already said in words,
   and the axis ran Monday to Friday and then to year eleven, which is days and
   years on one linear scale. No programme behaves like that, and contractors
   read programmes every week. It looked like their world without meaning
   anything in it.

   A site diary is the honest form: these entries are dated log lines, a diary
   runs from a Monday morning to eleven years later without needing a scale,
   and the platform actually produces one, so the device is the thing rather
   than a picture of the thing.

   The continuous rule down the left is the margin line of a bound day book.
   It is the only decoration here and it carries no data, which is the point:
   the previous version dressed decoration up as data. */
.dwg-day {
  border-top: 2px solid var(--dwg-ink);
  border-bottom: 2px solid var(--dwg-ink);
}
.dwg-day-row {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--dwg-line-2);
}
.dwg-day-row:first-child { border-top: 0; }

.dwg-day-when {
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  text-transform: uppercase;
  color: var(--dwg-ink);
  padding-top: 4px;
  padding-left: 18px;
  position: relative;
}
/* The margin rule. Drawn on the label so it repeats down every entry and reads
   as one continuous line through the section. */
.dwg-day-when::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(-1 * clamp(20px, 2.6vw, 30px) - 1px);
  bottom: calc(-1 * clamp(20px, 2.6vw, 30px) - 1px);
  width: 2px;
  background: var(--dwg-line);
}
.dwg-day-row:first-child .dwg-day-when::before { top: 0; }
.dwg-day-row:last-child .dwg-day-when::before { bottom: 0; }

.dwg-day-body > p {
  margin: 0;
  max-width: 68ch;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--dwg-ink-2);
  text-wrap: pretty;
}
.dwg-day-out {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--dwg-ink);
  border-bottom: 2px solid var(--dwg-blue);
  padding-bottom: 2px;
}

/* Stacked, the label is only one line tall, so a rule drawn on it breaks into
   six short segments. Below this width the margin line moves onto the row,
   where it stays continuous down the whole entry. */
@media (max-width: 760px) {
  .dwg-day-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    position: relative;
    padding-left: 18px;
  }
  .dwg-day-when { padding-left: 0; }
  .dwg-day-when::before { display: none; }
  .dwg-day-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--dwg-line);
  }
}

/* The condition above each requirement. Small, upper, and set in the accent so
   the eye can run down the left edge and pick up why each row exists without
   reading a word of the body. */
.dwg-req-cause {
  display: block;
  margin-bottom: 10px;
  font: var(--dwg-label);
  letter-spacing: var(--dwg-track);
  text-transform: uppercase;
  color: var(--dwg-blue);
}

/* The black column now starts at the column head rather than below it, so the
   spine runs the full height of the table instead of beginning one row late. */
.dwg-req-head span:last-child {
  background: var(--dwg-ink);
  color: #9aa1ab;
  padding-left: clamp(20px, 2.6vw, 34px);
  padding-right: clamp(20px, 2.6vw, 34px);
}

/* One piece of proof, closing the section. Real counts from the live
   deployment, framed the way every other figure on the site is framed. */
.dwg-req-proof {
  margin-top: clamp(22px, 3vw, 34px);
  padding-top: 16px;
  border-top: 1px solid var(--dwg-line);
}
/* The rule runs the full width of the table it closes; the sentence keeps a
   readable measure inside it. */
.dwg-req-proof p {
  margin: 0;
  max-width: 92ch;
  font-size: 14.5px; line-height: 1.6; color: var(--dwg-ink-2);
  text-wrap: pretty;
}
.dwg-req-proof b { color: var(--dwg-ink); font-weight: 600; }

@media (max-width: 880px) {
  .dwg-req-head span:last-child { background: none; }
}