/* ==========================================================================
   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%; }

/* --- The continuity rail, P1, P5 ---------------------------------------
   One vertical hairline running the full height of the document, from under
   the navigation to the last rule of the footer. It passes behind every
   section boundary rather than stopping at one, and the full-bleed section
   rules cross it. Continuity as a layout behaviour, not as an illustration. */

.rail {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  margin-inline: auto;
  max-width: var(--max-width);
  pointer-events: none;
  z-index: 0;
}
.rail::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: var(--gutter);
  width: var(--rule-w);
  background: var(--line);
}

/* --- 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 and crosses the
   rail. 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) var(--s6); }
.hero__mark { width: min(215px, 55vw); color: var(--text); margin-bottom: var(--s4); }
.hero__display { margin-bottom: var(--s4); }
.hero__thesis { margin-bottom: var(--s4); }

.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) var(--s8); }
  .hero__mark { width: 340px; margin-bottom: var(--s6); }
  .hero__display { margin-bottom: var(--s5); }
  .hero__thesis { margin-bottom: var(--s5); }
  .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); }

/* --- The continuity diagram, P1 P2 P3 -----------------------------------
   The signature element, and the reason the hero needs no thesis paragraph.
   One continuous hairline that never lifts. Four times the ground beneath it
   falls away, and each time the line rises at exactly 45 degrees, carries over
   the gap, and comes back down. The breaks are named underneath. That is the
   whole argument of the business, drawn rather than written.

   Geometry: every diagonal is dx 60, dy -60. Nothing else is permitted. The
   gaps sit at 12.5 / 37.5 / 62.5 / 87.5 percent so the labels align to an even
   four-column grid rather than being nudged into place. */

.flow { margin: 0; }

.flow__svg { width: 100%; height: auto; display: block; color: var(--text); }

.flow__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  /* Holds the one system rule weight at every scale. Without this the stroke
     would thin as the viewBox scales down and break P2. */
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}

/* The banks of each gap. Without these the diagram reads as a wave rather than
   as a line crossing four breaks, and the labels lose their referent. Same
   single rule weight, in the rule colour so the carry stays dominant. */
.flow__cut {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.flow__labels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--s4);
  margin-top: var(--s3);
}
@media (min-width: 48rem) {
  .flow__labels { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
}
.flow__labels li { text-align: center; }

.flow__note { margin-top: var(--s5); color: var(--text-2); max-width: var(--measure); }

/* --- Brand tiles (index) -------------------------------------------------
   Even tiles. Each one leads with the child brand's own colour field carrying
   its wordmark, then a single line of purpose and a single line saying why it
   exists at all. The colour is the child's, never the parent's. */

.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%; }

/* The face carries no padding of its own: the colour field runs edge to edge
   inside the chamfer, and the body below supplies its own. */
.tile__face { display: flex; flex-direction: column; padding: 0; flex: 1; }

.tile__field {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: var(--s5) var(--s4);
  text-align: center;
  border-bottom: var(--rule-w) solid var(--line);
  background: var(--surface-fill);
  color: var(--text);
}
/* Sourced from each brand, never invented. See tokens.css. */
.tile__field[data-brand="knowledgebricks"] { background: var(--kb-indigo); color: var(--paper); }
.tile__field[data-brand="reparse"]         { background: var(--reparse-green); color: var(--paper); }
/* Highbay has no brand colour yet, so its field is the placeholder hatch
   rather than a colour I picked for it. TBC-18. */
.tile__field[data-brand="highbay"] {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    45deg,
    var(--line) 0 1px,
    transparent 1px 9px
  );
}

.tile__wordmark {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

.tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  flex: 1;
}
.tile__purpose { color: var(--text); }
.tile__because { color: var(--text-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(--text-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 tile body. The colour field is the child's identity and is
   left alone, so the indicator never misrepresents a brand's colour. */
.tile:focus-visible { outline: none; }
.tile:focus-visible .cut { background: var(--text); }
.tile:focus-visible .tile__body { background: var(--invert-bg); color: var(--invert-fg); }
.tile:focus-visible .tile__purpose,
.tile:focus-visible .tile__because,
.tile:focus-visible .tile__go { color: var(--invert-fg); }

/* --- 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); }
}

/* Placeholder note inside a brand field that has no colour yet. */
.tile__fieldnote { display: block; margin-top: var(--s3); }