/* ==========================================================================
   Applied Continuity, system
   No hex literals in this file. Every color comes from tokens.css.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset ---------------------------------------------------------------
   border-radius is normalised to 0 and never set to anything else anywhere in
   this project. Corners are cut, not rounded. P3. */

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }

/* --- Layout -------------------------------------------------------------- */

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections are full-bleed so their top rule runs edge to edge rather than
   stopping at a container. Vertical rhythm is generous outside, tight inside. P4. */
.section {
  position: relative;
  z-index: 1;
  border-top: var(--rule-w) solid var(--line);
  padding-block: var(--s7);
}
/* The first section already sits under the navigation rule, so it neither draws
   its own nor pays for top padding twice. */
.section:first-of-type { border-top: 0; padding-top: 0; }

.section__head {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s6);
  padding-left: var(--s5);
}

/* --- Type ---------------------------------------------------------------- */

.label {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--text-3);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  line-height: var(--lh-snug);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.display {
  font-size: var(--t-display);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
}

h2, .h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-tight);
}

h3, .h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-snug);
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); color: var(--text-2); }

/* --- Links and focus, P3, P6 -------------------------------------------
   No accent colour exists, so a link is marked by a permanent hairline
   underline at the system rule weight.

   Focus inverts rather than outlines. clip-path silently clips both outline
   and box-shadow, so any chamfered control given a conventional focus ring
   would have an invisible one. Inversion cannot be clipped, holds 18.73:1,
   and is a direct read of P6. Unclipped controls take the outline as well. */

a { color: inherit; }

.link {
  text-decoration: underline;
  text-decoration-thickness: var(--rule-w);
  text-underline-offset: 0.22em;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--dur) var(--ease);
}
.link:hover { text-decoration-color: var(--text); }

:focus-visible {
  outline: var(--rule-w) solid var(--text);
  outline-offset: 3px;
}

.link:focus-visible {
  background: var(--invert-bg);
  color: var(--invert-fg);
  text-decoration-color: var(--invert-fg);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: var(--s2) var(--s3);
  background: var(--invert-bg);
  color: var(--invert-fg);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.skip:focus { left: var(--gutter); top: var(--s2); }

/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: var(--rule-w) solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
}
.nav__mark { display: block; width: 116px; color: var(--text); }
.nav__list { display: flex; gap: var(--s4); flex-wrap: wrap; }

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--s1);
  text-decoration: none;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); }

/* A rule that draws. Interaction-triggered only: nothing on this site animates
   on scroll. P1. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rule-w);
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

/* --- Hero ---------------------------------------------------------------- */

/* Hero spacing is budgeted, not decorative. The mark, the display line, the
   thesis, and the name and discipline all have to land inside one viewport at
   both 390x812 and 1440x900, so the vertical rhythm tightens on small screens
   rather than pushing the identity below the fold. */

.hero { padding-block: var(--s5) 0; }
.hero__mark { width: min(215px, 55vw); color: var(--text); margin-bottom: var(--s4); }
.hero__display { margin-bottom: var(--s4); }
.hero__thesis { margin-bottom: var(--s3); }

.hero__who {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: var(--rule-w) solid var(--line);
  max-width: var(--measure);
}

.principle {
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: var(--rule-w) solid var(--line);
  max-width: var(--measure);
}

@media (min-width: 60rem) {
  .hero { padding-block: var(--s5) 0; }
  .hero__mark { width: 340px; margin-bottom: var(--s6); }
  .hero__display { margin-bottom: var(--s5); }
  .hero__thesis { margin-bottom: var(--s4); }
  .hero__who { padding-top: var(--s5); }
  .principle { margin-top: var(--s5); }
}

/* --- Chamfered surface, P3 ---------------------------------------------
   Two layers. The outer carries the line colour and the cut; the inner is
   inset by exactly one rule weight and carries the surface colour. The result
   is a true 45-degree chamfered hairline border, which a clip-path applied
   over a normal border cannot produce: it would cut the border away at the
   corners and leave them open. */

.cut {
  display: block;
  clip-path: var(--cut);
  background: var(--line);
  padding: var(--rule-w);
  transition: background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cut__face {
  clip-path: var(--cut);
  background: var(--surface);
  height: 100%;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.cut--lg { clip-path: var(--cut-lg); }
.cut--lg > .cut__face { clip-path: var(--cut-lg); }

/* --- Brand tiles ---------------------------------------------------------
   Two bands. A light plate carrying the brand's own logo, identical on all
   three so the logos are what differ, and a dark body carrying the words.

   No title band: every logo is a lockup that already contains the name, so
   printing it again would say it twice. The name lives in the image alt text
   instead, which keeps it available to a screen reader and to a crawler.

   Equal heights come from the body flexing to fill, so the plates line up
   across all three no matter how long the copy runs. */

.tiles {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 60rem) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
.tiles > li { display: flex; }

.tile { display: flex; text-decoration: none; width: 100%; }
.tile > .cut { display: flex; flex-direction: column; width: 100%; }
.tile__face { display: flex; flex-direction: column; padding: 0; flex: 1; }

/* The plate is deliberately the same on every tile: paper, with the system's
   one diagonal at low contrast so it reads as drafting stock rather than as a
   blank box. Raw --paper and --ink, not the surface aliases, so a brand tile
   looks the same on the inverted direction as on the primary. */
.tile__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 148px;
  padding: var(--s4) var(--s5);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    45deg,
    var(--mist) 0 1px,
    transparent 1px 11px
  );
  border-bottom: var(--rule-w) solid var(--line);
}

/* All three lockups are exported at one canvas width with their brand names
   scaled to a common cap height, so fitting them to the same width is what
   makes them read at equal size. Constraining by height would undo that. */
.tile__logo {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.tile__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5) var(--s4);
  background: var(--ink);
  color: var(--paper);
}
.tile__purpose { color: var(--paper); }
.tile__because { color: var(--on-ink-2); flex: 1; }

.tile__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  color: var(--on-ink-3);
}
.tile__arrow { width: 14px; height: 14px; color: currentColor; flex: none; }

/* Hover translates along the only permitted diagonal. P3. */
.tile:hover .cut { background: var(--text); transform: translate(var(--slide), calc(var(--slide) * -1)); }

/* Focus inverts the plate rather than the body, because the body is already
   ink and inverting it would read as no change at all. */
.tile:focus-visible { outline: none; }
.tile:focus-visible .cut { background: var(--text); }
.tile:focus-visible .tile__body { background: var(--paper); color: var(--ink); }
.tile:focus-visible .tile__purpose { color: var(--ink); }
.tile:focus-visible .tile__because { color: var(--graphite); }
.tile:focus-visible .tile__go { color: var(--steel); }

/* --- Work entries (kyle-nadler) ------------------------------------------
   border-top only, never border-bottom, so adjacent entries literally share
   one line. Two forms sharing one path where they meet. P5.
   Horizontal rows, never a card grid. P4. */

.work { border-bottom: var(--rule-w) solid var(--line); }

.entry {
  position: relative;
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
  padding: var(--s6) var(--s5);
  border-top: var(--rule-w) solid var(--line);
  transition: transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.entry:hover { background: var(--surface-fill); }

@media (min-width: 60rem) {
  .entry { grid-template-columns: 6rem 1fr 16rem; gap: var(--s5); }
}

.entry__index {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
}
@media (min-width: 60rem) {
  .entry__index { flex-direction: column; justify-content: flex-start; }
}

.entry__client { margin-bottom: var(--s2); }
.entry__scope { margin-bottom: var(--s4); }
.entry__scale { margin-bottom: var(--s2); }
.entry__discipline { color: var(--text-3); font-size: var(--t-meta); }
.entry__outcome { color: var(--text-2); }

/* Denser variant. Same markup, one class on the list, holds 20 entries without
   redesign. Ships off by default because the honest count today is 1 to 3. */
.work--dense .entry { padding-block: var(--s4); }
.work--dense .entry__scope { margin-bottom: var(--s2); }
.work--dense .entry__client { font-size: var(--t-meta); }

/* --- [TBC] placeholders --------------------------------------------------
   Deliberately unfinished. A 45-degree hatch and a dashed hairline at the
   system rule weight, so a placeholder can never be mistaken for finished copy
   or shipped by accident. The hatch angle is the only diagonal in the system. */

.tbc {
  display: inline-block;
  font-family: var(--font-mono);
  /* Inherits its slot's size on purpose. A placeholder set at one small size
     everywhere would flatten the entry and hide whether the component reads
     correctly once filled. This way the hierarchy is legible and the content is
     still unmistakably missing. */
  font-size: inherit;
  font-weight: var(--w-regular);
  line-height: 1.35;
  letter-spacing: var(--tr-meta);
  color: var(--text-3);
  padding: 0.15em 0.45em;
  border: var(--rule-w) dashed var(--line);
  background-image: repeating-linear-gradient(
    45deg,
    var(--surface-fill) 0 5px,
    transparent 5px 10px
  );
  white-space: nowrap;
}

/* --- Definition rows (credentials, discipline) --------------------------- */

.rows { border-top: var(--rule-w) solid var(--line); }
.row {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-bottom: var(--rule-w) solid var(--line);
}
@media (min-width: 48rem) {
  .row { grid-template-columns: 16rem 1fr; gap: var(--s5); align-items: baseline; }
}

/* --- Contact ------------------------------------------------------------- */

.contact { display: grid; gap: var(--s5); padding-left: var(--s5); }
@media (min-width: 48rem) {
  .contact { grid-template-columns: repeat(2, minmax(0, 22rem)); }
}
.contact__item { display: grid; gap: var(--s2); }
.contact__value { font-size: var(--t-h3); letter-spacing: var(--tr-h3); }

/* --- Footer -------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 1;
  border-top: var(--rule-w) solid var(--line);
  padding-block: var(--s5);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
}

/* --- Alternate direction notes (review artifacts only) ------------------- */

.altnote {
  position: relative;
  z-index: 1;
  border-top: var(--rule-w) solid var(--line);
  padding-block: var(--s5);
  background: var(--surface-fill);
}
.altnote p { max-width: var(--measure); color: var(--text-2); }

/* --- Motion policy -------------------------------------------------------
   Everything above is under 300ms, mechanical, and interaction-triggered.
   Under a reduced-motion preference none of it runs. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tile:hover .cut,
  .tile:hover.cut { transform: none; }
  .nav__link::after { transform: scaleX(1); opacity: 0; }
  .nav__link:hover::after,
  .nav__link:focus-visible::after { opacity: 1; }
}

/* --- Utilities ----------------------------------------------------------- */

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero__eyebrow { margin-bottom: var(--s4); }

/* The operating principle is a statement, not a label. Uppercase wide tracking
   is reserved for navigation, labels and section markers, so the statement is
   set in body type and only its own marker carries the label style. */
.principle > p + p { margin-top: var(--s2); color: var(--text-2); }

/* Below 640px the navigation must stay on one line. A wrapped nav costs about
   52px, which is exactly what pushes the name and discipline out of the first
   viewport at 390x812. The identity stays above the fold; the nav gives up
   width instead. */
@media (max-width: 40rem) {
  .nav__mark { width: 84px; }
  .nav__inner { gap: var(--s3); }
  .nav__list { gap: var(--s3); }
}


/* --- Title block ---------------------------------------------------------
   A drawing sheet identifies itself in a title block rather than in a footer
   sentence. Same information, in the vernacular of the discipline the work
   comes from. Cells are divided by the one system rule weight. */
.titleblock { display: grid; grid-template-columns: repeat(1, 1fr); margin: 0; }
@media (min-width: 48rem) { .titleblock { grid-template-columns: repeat(3, 1fr); } }
.titleblock > div {
  padding: var(--s3) var(--s4);
  border-left: var(--rule-w) solid var(--line);
}
.titleblock > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 47.99rem) {
  .titleblock > div { border-left: 0; padding-left: 0; }
  .titleblock > div + div { border-top: var(--rule-w) solid var(--line); }
}
.titleblock dd { margin: var(--s2) 0 0; font-family: var(--font-mono); font-size: var(--t-meta); }

/* --- Header lockup -------------------------------------------------------
   Mark plus wordmark, divided by the one system rule weight. The mark alone
   was carrying the name, which meant the entity was never actually spelled out
   above the fold. */
.nav__home {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--text);
}
.nav__wordmark {
  display: none;
  padding-left: var(--s3);
  border-left: var(--rule-w) solid var(--line);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 48rem) { .nav__wordmark { display: inline-block; } }

/* Four nav items plus the mark do not fit 390px at full label size, and a
   wrapped navigation costs about 52px, which is what pushes the identity out
   of the first viewport. The labels give up size instead. */
@media (max-width: 47.99rem) {
  .nav__list { gap: var(--s2); }
  .nav__link.label { font-size: 0.625rem; letter-spacing: 0.08em; }
}

/* --- Reveal control ------------------------------------------------------
   Email and phone are assembled in the browser rather than written into the
   markup, so a harvester reading the HTML finds nothing to take. Styled as a
   text control with the system underline rather than a chamfered box, because
   clip-path would cut the corners off a border this small. */
.reveal {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  color: var(--text-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: var(--rule-w);
  text-underline-offset: 0.22em;
  text-decoration-color: var(--line);
  transition: color var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease);
}
.reveal:hover { color: var(--text); text-decoration-color: var(--text); }
.reveal:focus-visible {
  background: var(--invert-bg);
  color: var(--invert-fg);
  text-decoration-color: var(--invert-fg);
  outline-offset: 2px;
}

.contact__note { color: var(--text-3); }
.contact__addr { font-style: normal; color: var(--text-2); }

/* --- Brand tile patterns -------------------------------------------------
   A technical texture per product, drawn in the field's own foreground colour
   so no new colour enters the system. Opacity is set by contrast, not taste:
   at 0.10 the reversed wordmark still measures 4.80:1 over indigo and 4.55:1
   over green, and both clear AA. At 0.18 indigo fell to 4.09:1 and failed. */


/* Three contact items, not two. */
@media (min-width: 48rem) {
  .contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact__note { margin-top: var(--s5); max-width: var(--measure); }

/* --- Thesis --------------------------------------------------------------
   The argument, in prose, wrapped around one drawing. */

/* The cut band owns the space on both sides of itself. */
.thesis { padding-top: 0; }

/* The hinge of the whole brand. It is literally true of conveyor and
   metaphorically true of knowledge, projects and careers, which is the only
   reason the four things on this site are one thing. It gets its own size. */
.thesis__hinge {
  font-size: var(--t-h2);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-tight);
  max-width: 22ch;
  margin: 0 0 var(--s4);
  padding-left: var(--s4);
  border-left: var(--rule-w) solid var(--line);
}
.thesis__body + .thesis__body { margin-top: var(--s4); }

/* --- Drawing -------------------------------------------------------------
   A retrofit section. Existing to remain, limit of removal, new work tying in
   outside the removal, and a datum both sides reference. Drawn once and marked
   TYP. OF 4, because a set draws a condition once at large scale rather than
   four times at small. */

.dwg { margin: var(--s5) 0 var(--s6); color: var(--text); }
.dwg__svg { display: block; width: 100%; height: auto; }

/* One rule weight, non-scaling so it holds 1px at any viewport. */
.dwg-grid, .dwg-thin, .dwg-leader, .dwg-limit, .dwg-dim path,
.dwg-exist, .dwg-new, .dwg-datum {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.dwg-grid, .dwg-thin, .dwg-leader, .dwg-dim path { stroke: var(--line); }
.dwg-limit { stroke: var(--text); }
/* Record documents are incomplete, so existing is dashed. */
.dwg-exist { stroke: var(--text-2); stroke-dasharray: 10 6; }
.dwg-new, .dwg-datum { stroke: var(--text); }
.dwg-hatchfill { fill: url(#dwg-hatch); color: var(--text-3); stroke: none; }

.dwg-tag {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--w-medium);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: var(--text-3);
}
.dwg-tag--mid { text-anchor: middle; }
.dwg-tag--end { text-anchor: end; }
.dwg-num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--w-medium);
  text-anchor: middle;
  fill: var(--text-2);
}

/* Below 960px the annotation is smaller than reading size, so it comes off and
   the schedule below carries the same information as text. The drawing keeps
   its geometry. This is how an enlarged partial detail behaves on a real set. */
@media (max-width: 59.99rem) {
  .dwg-tag, .dwg-leader, .dwg-dim, .dwg-num, .dwg-thin { display: none; }
}

.dwg__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: var(--rule-w) solid var(--line);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.dwg__no {
  display: inline-block;
  padding: var(--s1) var(--s2);
  clip-path: var(--cut);
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.dwg__name { color: var(--text); }
.dwg__meta { margin-left: auto; font-family: var(--font-mono); letter-spacing: var(--tr-meta); }

/* --- Schedule ------------------------------------------------------------
   The four conditions live here as text rather than as four redundant
   drawings. This is also what makes the drawing safe to hide labels on. */

.sched { width: 100%; border-collapse: collapse; margin-top: var(--s6); text-align: left; }
.sched caption { text-align: left; padding-bottom: var(--s3); }
.sched th, .sched td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-top: var(--rule-w) solid var(--line);
  vertical-align: baseline;
}
.sched thead th {
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.sched tbody th {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  color: var(--text-3);
  width: 4rem;
}
.sched tbody td { color: var(--text-2); }
.sched tbody td:first-of-type { color: var(--text); }

/* Equipment tags read as bright as the drawing's own annotation, because they
   are annotation: each one has a row in the legend below. */
.dwg-equip .dwg-num { fill: var(--text); }

/* The legend sits tight under the drawing it explains, not floating as its own
   section. Marks and tags in it are the same tags drawn on the sheet. */
.dwg + .sched { margin-top: var(--s5); }
.sched__tag {
  display: inline-block;
  min-width: 2.4em;
  margin-right: var(--s2);
  padding: 0.1em 0.35em;
  clip-path: var(--cut);
  background: var(--invert-bg);
  color: var(--invert-fg);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-align: center;
}
.sched td:last-child { white-space: nowrap; }

/* Four columns will not hold at 390px, so each row becomes a block and the
   column headings reappear per cell. The thead is clipped rather than removed,
   so its scope associations survive for a screen reader. */
@media (max-width: 47.99rem) {
  .sched thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sched tbody tr { display: block; border-top: var(--rule-w) solid var(--line); padding: var(--s4) 0 var(--s3); }
  .sched tbody th, .sched tbody td { display: block; border: 0; padding: 0 0 var(--s3); width: auto; }
  .sched tbody td::before {
    content: attr(data-l);
    display: block;
    margin-bottom: var(--s1);
    font-family: var(--font-sans);
    font-size: var(--t-label);
    font-weight: var(--w-medium);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--text-3);
  }
  .sched td:last-child { white-space: normal; }
}



/* --- Section cut band ----------------------------------------------------
   Hatch between two limit lines is the drafting sign for material cut through.
   Used here as the break between the intro and the argument, so the divider is
   a convention rather than an ornament, and it previews the drawing's own
   vocabulary without repeating the drawing.

   Content width, not full-bleed. The section rules run edge to edge because
   they are section boundaries; this is not one, it is a piece of content, and
   running it past the text it separates made it read as unrelated furniture on
   a wide screen. 45 degrees, one rule weight, no colour. */
.cutband {
  height: 30px;
  margin-block: var(--s5);
  border-top: var(--rule-w) solid var(--line);
  border-bottom: var(--rule-w) solid var(--line);
  background-image: repeating-linear-gradient(
    45deg,
    var(--line) 0 1px,
    transparent 1px 12px
  );
}