/* ══════════════════════════════════════════════════════════════════════════
   /tech — TEMPLATE LAYER (T-1149, 2026-08-14).

   Loaded AFTER css/tech-expertise.css and it only overrides. Nothing here
   changes the five demos' internals, the disclosure motion, or the hero.

   WHY IT EXISTS
   -------------
   Ethan, four times: "I NEED WHITE BACKGROUNDS", "sections with text use
   white backgrounds ... too hard to read so much of it", "with black shading
   and separations", "you cant read any of it, sections are too big and too
   dark".

   THE SYSTEM
   ----------
   1. Any section whose job is READING sits on --bone (#faf8f3) with --ink
      (#0a0a0a) type. That is .tdx-live, .tdx-dir and .tdx-build — three of
      the four body sections.
   2. BLACK is now shading and separation, not the page: the hero, the two
      .tdx-band separators between light sections, the .tdx-stage instrument
      slabs inside each open panel, the .tdx-build__note accent block, the
      handoff band and the closing CTA. Punctuation between white blocks.
   3. IMAGES ARE CONTAINED. The client photograph was 100vw x --band-lg; it
      is now a bounded figure (max 620px) with a chamfered edge and air
      around it. The third laptop photograph (bts-claude-code-desk-wide) is
      gone from the page entirely — see the note above .tdx-build__note.
   4. SHAPES, sharp against soft. Ethan's own bubble radii from
      unwrinkled-react/app/globals.css supply the SOFT half (blob-a
      63% 37% 55% 45% / 56% 50% 50% 44%, blob-b 40% 60% 56% 44% /
      55% 42% 58% 45%, arch 50% 50% 12% 12% / 34% 34% 8% 8%); the SHARP half
      is clip-path — chamfers, single-corner cuts, crossing diagonals. The
      rule that keeps it from becoming one repeated motif: structural blocks
      are cut with clip-path, decorative marks are bubbles.

   CONTRAST ON LIGHT GROUNDS
   -------------------------
   --red-text (#e8455a) is the token for small red type ON INK. It measures
   3.63:1 on --bone, so it FAILS AA for the 10px mono eyebrows. On every
   light ground here the red is --red (#c8102e), measured 5.53:1 on --bone.
   Do not swap it back.
   ══════════════════════════════════════════════════════════════════════════ */

.tdx-page {
  /* Ink-on-light equivalents of the file's --tdx-* ramp. Same roles, inverted
     ground: -line/-line-soft are rules, -dim is secondary copy, -mute is
     body copy. Both -dim (7.4:1) and -mute (9.6:1) clear AA on --bone. */
  --tl-line: rgba(10,10,10,.16);
  --tl-line-soft: rgba(10,10,10,.09);
  --tl-dim: rgba(10,10,10,.62);
  --tl-mute: rgba(10,10,10,.76);
  /* Deeper than site.css's --ivory (#f1ede4), which sat 2% off --bone and
     made the shaped blocks in §D read as nothing at all. */
  --tl-ivory: #ece5d7;
}

/* ── the light shell ──────────────────────────────────────────────────────
   Applied PER SECTION by class, never as a body flip: the hero, the bands,
   the CTA and the stage slabs all still need the ink ground underneath. */
.tdx-live,
.tdx-dir,
.tdx-build {
  background: var(--bone);
  border-top: 0;
  /* SAFETY NET. Everything in this page inherits --on-black from body, so any
     element without an explicit colour would paint #f5f1e8 on #faf8f3 —
     invisible. Setting the inherited colour on the light section means a
     missed selector degrades to readable ink instead of disappearing. The
     ink slabs below re-assert light-on-dark for their own subtrees. */
  color: var(--ink);
}
.tdx-dir .tdx-stage,
.tdx-build__note { color: var(--on-black); }

/* Hero: full-bleed cover, not intrinsic. The photo was sizing itself from its
   4:3 intrinsics under the height cap, which left a hard vertical seam of bare
   ink down the left third of the hero at >=1200px. Height cap (site.css
   T-1134) is untouched — this is width only. */
.stk-hero__photo { width: 100%; object-position: 62% 42%; }
/* T-1134 put a max-height of clamp(360px,46vw,560px) on .stk-hero, but
   tech-stack-hero.css still asks for min-height:72svh — and min-height ALWAYS
   beats max-height, so the hero was measuring 648px at 1440x900 and the cap
   was doing nothing. Same cap expressed as a minimum, so the two agree. */
/* T-1245 — a min-height is a floor, not a cap, so this one cannot clip; it is
   left alone above 1024 and relaxed below it so the floor never exceeds what
   the content needs on a phone. */
.stk-hero { min-height: min(72svh, clamp(360px, 46vw, 560px)); }
@media (max-width: 1023px) { .stk-hero { min-height: 0; max-height: none; } }

/* Sections were too long. Every light section loses roughly a third of its
   block padding; the directory rows and the panels lose their own below. */
.tdx-live { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.tdx-dir  { padding-top: clamp(2.4rem, 4.2vw, 3.6rem); padding-bottom: 0; }
.tdx-build { padding-block: clamp(2.4rem, 4.4vw, 3.6rem); }

/* Shared type, re-pointed at ink. */
.tdx-live .tdx-eyebrow,
.tdx-dir .tdx-eyebrow,
.tdx-build .tdx-eyebrow { color: var(--red); }
.tdx-live .tdx-h2,
.tdx-dir .tdx-h2,
.tdx-build .tdx-h2 { color: var(--ink); }
.tdx-live .tdx-h2 em,
.tdx-dir .tdx-h2 em,
.tdx-build .tdx-h2 em { color: var(--red); }
.tdx-live .tdx-lede,
.tdx-dir .tdx-lede,
.tdx-build .tdx-lede { color: var(--tl-mute); }
.tdx-live .tdx-lede em,
.tdx-dir .tdx-lede em,
.tdx-build .tdx-lede em { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════
   §A · THE BLACK SEPARATOR BAND.

   Ethan: "with black shading and separations" and "more design creativity
   ... different patterns crisscross the site, more sharp". This is both —
   a short ink band between two light sections, carrying a crossing
   diagonal hatch and a sharp wedge cut off its bottom edge so the two
   whites do not meet at a flat line.

   68px tall. It is a rule, not a section: nothing reads inside it.
   ══════════════════════════════════════════════════════════════════════ */
.tdx-band {
  position: relative;
  height: 68px;
  background: var(--ink);
  overflow: hidden;
  /* sharp: the band's bottom edge steps once, right of centre */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 58% calc(100% - 14px), 0 calc(100% - 14px));
}
.tdx-band--flip {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 42% calc(100% - 14px), 38% 100%, 0 100%);
}
/* crossing diagonals, two directions, different pitch — the "crisscross" */
.tdx-band::before,
.tdx-band::after {
  content: ""; position: absolute; inset: -20px;
}
.tdx-band::before {
  background: repeating-linear-gradient(58deg,
    rgba(245,241,232,.13) 0 1px, transparent 1px 13px);
}
.tdx-band::after {
  background: repeating-linear-gradient(-58deg,
    rgba(200,16,46,.30) 0 1px, transparent 1px 34px);
}
.tdx-band__mark {
  position: absolute; right: var(--tdx-gut); top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--red);
  /* soft, against the sharp band: Ethan's blob-a radius */
  border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%;
}
.tdx-band--flip .tdx-band__mark {
  right: auto; left: var(--tdx-gut);
  background: none; box-shadow: inset 0 0 0 1px rgba(245,241,232,.55);
  /* sharp counterpart of the same mark */
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   §B · THE HANDOVER SECTION — contained photograph.

   Was: <figure> at 100vw x --band-lg (1440 x 503px), caption in a gradient
   burned over the bottom of the frame, one sentence underneath.
   Now: a bounded 620px figure with a chamfered edge and a soft bubble
   behind its shoulder, copy beside it on the bone, caption in ink under
   the frame where it is legible. Nothing touches a viewport border.
   ══════════════════════════════════════════════════════════════════════ */
.tdx-live__grid {
  display: grid;
  /* The copy column is a MEASURE, not a 1fr. At 1fr the column stretched to
     the right gutter while the type inside it stopped at ~40ch, so ~400px of
     bone read as a hole rather than as margin. Both columns are now sized to
     their content and the row is packed left, which puts the leftover space
     on the outside where it looks deliberate. */
  grid-template-columns: minmax(0, 620px) minmax(0, 30rem);
  justify-content: start;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
}
.tdx-live__figure {
  margin: 0;
  padding-inline: 0 !important;
  position: relative;
  isolation: isolate;
}
/* SOFT — the bubble sits behind the frame's top-right shoulder and is the
   only round thing in this section; the photograph itself is cut sharp. */
.tdx-live__figure::before {
  content: "";
  position: absolute; z-index: -1;
  top: -22px; right: -26px; width: 46%; aspect-ratio: 1 / .82;
  background: rgba(200,16,46,.16);
  border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%;
}
/* SHARP — opposing chamfers, top-right and bottom-left. */
.tdx-live__frame {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px));
  background: var(--ink);
}
.tdx-live__figure img {
  display: block; width: 100%;
  height: auto; aspect-ratio: 16 / 9;
  max-height: 350px;
  object-fit: cover; object-position: 50% 40%;
}
/* Caption out of the gradient and onto the bone. */
.tdx-live__cap {
  position: static;
  padding: .8rem 0 0;
  background: none;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tl-mute);   /* --tl-dim measured 4.53:1 here; no headroom */
  max-width: 46ch;
}
.tdx-live__line {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 1.75vw, 1.42rem);
  line-height: 1.32; letter-spacing: -.012em;
  color: var(--ink);
  max-width: 30ch;
}
.tdx-live__sub {
  margin: .9rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(.82rem, .9vw, .9rem); line-height: 1.68;
  color: var(--tl-mute); max-width: 40ch;
}
/* A red keyline down the copy, cut sharp at the foot — separation without
   another box. */
.tdx-live__say { position: relative; padding-left: clamp(1rem, 1.6vw, 1.5rem); }
.tdx-live__say::before {
  content: ""; position: absolute; left: 0; top: .25rem; bottom: .25rem;
  width: 3px; background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
}
@media (max-width: 900px) {
  .tdx-live__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tdx-live__figure::before { top: -14px; right: -12px; }
  .tdx-live__frame {
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §C · THE DIRECTORY ON BONE.

   The five demos are instruments — a Postgres table, a Stripe state
   machine, a migration list, a 24h job clock. Those stay light-on-ink,
   because that is what they look like in real life and because inverting
   them would mean rewriting 400 lines of demo CSS. So the DIRECTORY goes
   light and each demo becomes a contained ink SLAB inside it: black as
   shading, exactly the role Ethan asked for.
   ══════════════════════════════════════════════════════════════════════ */
.tdx-dir__head { margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }

.tdx-dir .tdx-row { border-top-color: var(--tl-line); }
.tdx-dir .tdx-row:last-child { border-bottom-color: var(--tl-line); }
.tdx-dir .tdx-row__btn { padding-block: clamp(.95rem, 1.7vw, 1.3rem); }
.tdx-dir .tdx-row__num { color: var(--red); }
.tdx-dir .tdx-row__name { color: var(--ink); }
.tdx-dir .tdx-row__line { color: var(--tl-dim); }
.tdx-dir .tdx-row__mark::before,
.tdx-dir .tdx-row__mark::after { background: var(--ink); opacity: .5; }
.tdx-dir .tdx-row[data-open="1"] .tdx-row__mark::before,
.tdx-dir .tdx-row[data-open="1"] .tdx-row__mark::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .tdx-dir .tdx-row__btn:hover { background-color: rgba(10,10,10,.04); }
  .tdx-dir .tdx-row__btn:hover .tdx-row__name { color: var(--ink); }
  .tdx-dir .tdx-row__btn:hover .tdx-row__line { color: var(--tl-mute); }
}
.tdx-dir .tdx-row__btn:focus-visible { outline-color: var(--red); }
.tdx-dir .tdx-row[data-open="1"] { background: var(--tl-ivory); }

/* Panel body: demo slab left, spec column right. */
.tdx-dir .tdx-row__body { padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }

/* ── the ink instrument slab ─────────────────────────────────────────── */
.tdx-dir .tdx-stage {
  background: var(--ink);
  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.5rem);
  /* SHARP — one cut corner, bottom-right, plus a small notch top-left */
  clip-path: polygon(
    22px 0, 100% 0,
    100% calc(100% - 26px), calc(100% - 26px) 100%,
    0 100%, 0 22px);
}
.tdx-dir .tdx-stage__rail { padding-top: 0; }

/* ── right column, ink type on bone ───────────────────────────────────── */
.tdx-dir .tdx-spec li {
  color: var(--tl-mute);
  border-bottom-color: var(--tl-line-soft);
}
.tdx-dir .tdx-spec li b { color: var(--ink); }
.tdx-dir .tdx-proofline { color: var(--tl-mute); }
.tdx-dir .tdx-proofline em { color: var(--ink); }
.tdx-dir .tdx-caveat { color: var(--tl-mute); }   /* --tl-dim measured 4.22:1 on --tl-ivory */
.tdx-dir .tdx-openable li { border-top-color: var(--tl-line-soft); }
.tdx-dir .tdx-openable a { color: var(--ink); }
.tdx-dir .tdx-openable a b { border-bottom-color: rgba(200,16,46,.5); }
.tdx-dir .tdx-openable a span { color: var(--tl-dim); }
.tdx-dir .tdx-openable a::after { color: var(--red); }
/* T-1182 — INK ON INK, MEASURED 1.00:1, EIGHT BLOCKS OF INVISIBLE TEXT.
   This whole expanded panel is NOT on a light ground. `.tdx-row__clip` is
   `background: var(--ink)` (css/tech-readable.css), so every rule in this
   §D block that hands out --tl-mute / --tl-dim / --ink is painting for a
   bone ground that is not there. The rest of the column survives because
   css/tnaado-rail.css forces its descendants back to bone with
   `.tdx-row__clip :where(h1,h2,h3,h4,p,li,dt,dd,span,figcaption,a,b,strong,code)`
   — and that list has no `em` in it. So this one declaration was the only
   thing still resolving to ink, and it did it on all four capability rows
   at both 1440 and 390: the two-to-four-line description under every
   shoot.tnaado.ca / admin.tnaado.ca link rendered as a blank gap.
   Fixed here rather than by adding `em` to the rail's list, because that
   list is !important and would also flatten the red <em> in .tdx-proofline
   and the red <i>auth.uid()</i> in the RLS console, which are correct. */
.tdx-dir .tdx-openable em { color: rgba(245,241,232,.72); }
@media (hover: hover) and (pointer: fine) {
  .tdx-dir .tdx-openable a:hover { color: var(--red); }
  .tdx-dir .tdx-openable a:hover b { border-bottom-color: var(--red); }
}
.tdx-dir .tdx-openable a:focus-visible { outline-color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════
   §D · HOW WE BUILD — three shaped blocks on bone, then an ink block.

   THE PHOTOGRAPH THAT USED TO CLOSE THIS SECTION IS GONE.
   bts-claude-code-desk-wide.jpg was the third laptop-at-a-desk frame on
   this one page (hero backdrop, the client band, and this). Ethan: one
   workstation photo per page. The hero backdrop and the client band are
   the two that carry people or the room; this one carried a screen nobody
   can read at --band-md, so it is the one that went. Its slot is now a
   designed ink block, which is what the section actually needed — the
   closing paragraph had been floating unattached under a photo.
   Do not reintroduce a photograph here.
   ══════════════════════════════════════════════════════════════════════ */
.tdx-build__cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.3rem, 2.4vw, 1.9rem);
  border-top: 0;
}
.tdx-build__col {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.1rem, 1.9vw, 1.6rem) clamp(1.3rem, 2.2vw, 1.7rem);
  background: var(--tl-ivory);
}
/* SHARP · SOFT · SHARP across the row, so the three do not read as one
   repeated card. 1 and 3 are cut; 2 is Ethan's arch radius, upright. */
.tdx-build__col:nth-child(1) {
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
}
.tdx-build__col:nth-child(2) {
  border-radius: 46% 46% 10% 10% / 22% 22% 6% 6%;
  padding-top: clamp(2.4rem, 4vw, 3.1rem);
}
.tdx-build__col:nth-child(3) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.tdx-build__col h3 { color: var(--ink); }
.tdx-build__col p { color: var(--tl-mute); }

/* The index marks: diamond, bubble, chamfer — one of each. */
.tdx-build__k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: .8rem;
  font-size: .56rem; letter-spacing: .1em;
  color: var(--bone); background: var(--ink);
}
.tdx-build__col:nth-child(1) .tdx-build__k {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 38px; height: 38px;
}
.tdx-build__col:nth-child(2) .tdx-build__k {
  background: var(--red);
  border-radius: 63% 37% 55% 45% / 56% 50% 50% 44%;
}
.tdx-build__col:nth-child(3) .tdx-build__k {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

@media (max-width: 820px) {
  .tdx-build__cols { grid-template-columns: 1fr; gap: .9rem; }
  .tdx-build__col { border-bottom: 0; padding-bottom: clamp(1.3rem, 2.2vw, 1.7rem); }
  .tdx-build__col:nth-child(2) { border-radius: 30% 30% 8% 8% / 12% 12% 4% 4%; }
}

/* The ink accent block that replaced the photograph. Black as punctuation:
   one paragraph, high contrast, cut on the diagonal at its foot, with the
   same crossing hatch the separator bands use so the two read as one
   system. */
.tdx-build__note {
  position: relative;
  margin-top: clamp(1.4rem, 2.6vw, 2.1rem);
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.4vw, 2rem);
  background: var(--ink);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 46px 100%, 0 calc(100% - 46px));
}
.tdx-build__note::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-58deg,
    rgba(200,16,46,.26) 0 1px, transparent 1px 30px);
  pointer-events: none;
}
.tdx-build__note p {
  position: relative;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.88rem, 1vw, 1rem); line-height: 1.66;
  color: var(--on-black); max-width: 66ch;
}
.tdx-build__note p b { color: #fff; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   §E · HANDOFF BAND — stays ink, so the page closes on separation rather
   than a third white slab. Shortened and given the same hatch.
   ══════════════════════════════════════════════════════════════════════ */
.tdx-handoff {
  position: relative;
  padding-block: clamp(1.8rem, 3.2vw, 2.6rem);
  border-top: 0;
  overflow: hidden;
}
.tdx-handoff::before {
  content: ""; position: absolute; inset: -20px;
  background: repeating-linear-gradient(58deg,
    rgba(245,241,232,.055) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.tdx-handoff > * { position: relative; }
/* Was space-between across the full 1440, which threw the red link to the far
   right edge with 700px of nothing between it and the sentence it belongs to.
   The link now sits directly after its own sentence. */
/* The inline gutter here was already lost before this change: .tdx-sec > *
   sets padding-inline, but .tdx-more's own `padding: 1.2rem 0` shorthand
   comes later at equal specificity and zeroes it, so the handoff copy sat
   flush against the left edge of the screen at every width. Restated as a
   full shorthand so both axes are explicit. */
.tdx-more {
  padding: .95rem var(--tdx-gut);
  justify-content: flex-start;
  gap: .6rem clamp(1.2rem, 3vw, 2.6rem);
}
.tdx-more p { max-width: 58ch; color: var(--tdx-mute); }
/* T-1182 — THE GROUND UNDER THIS LINK IS NOT INK ANY MORE.
   The comment that was here read: "--red-text measured 4.43:1 against --ink
   at 10.5px on real painted pixels. Two points lighter clears AA with
   headroom." Both halves were true when the handoff sat on ink. It sits on
   bone now (measured painted background rgb(250,248,243)), where #f0596d is
   3.11:1 at 10.48px / weight 400 — an AA failure on the two closing links
   of the page, "The firm →" and "Case studies →", at 1440 and 390 alike.

   css/tech-readable.css line 264 already corrected this to #0a0a0a for the
   light ground; this file loads after it and put the dark-ground red back.
   #a4132c is the on-light red site.css already uses for eyebrows on bone —
   7.31:1 here, and still unmistakably the red. */
.tdx-handoff .tdx-link { color: #a4132c; border-bottom-color: rgba(164,19,44,.45); }
.tdx-handoff .tdx-link:hover, .tdx-handoff .tdx-link:focus-visible { border-bottom-color: #a4132c; }

/* ══════════════════════════════════════════════════════════════════════
   §F · REDUCED MOTION — nothing in this file animates, so there is
   nothing to kill. Recorded so the next editor does not go looking.
   ══════════════════════════════════════════════════════════════════════ */