/* ════════════════════════════════════════════════════════════
   TNAADO — /technology S.05 "CITADEL"
   2026-08-13. Added at Ethan's instruction ("actually you can give it
   its own feature for that!!") after an earlier pass left Citadel off
   the page entirely.

   WHY THIS SECTION IS SHAPED DIFFERENTLY FROM EVERYTHING AROUND IT.
   The hero above is copy-left / device-right. S.04 is a linked ledger.
   If this were a third variation on a text-and-picture row it would
   read as more of the same and the page would flatten. So it is the one
   stacked composition on the page: a narrow column of copy, then the
   interface full-bleed underneath at the width of the viewport. That is
   also the honest shape for the material — the capture is 2560px of
   real, dense UI, and the argument is that it is finished, which you
   can only see at size.

   NO PADDED BOX. The figure deliberately breaks out of .inner and runs
   edge to edge. Site convention, and the reason the <figure> sits
   outside .inner in the markup rather than being negative-margined out
   of it.

   CONTRAST, MEASURED (composited, not eyeballed), on --ink #0a0a0a:
     .ctd__state  rgba(245,241,232,.72)  9.18:1
     .ctd__cap    rgba(245,241,232,.56)  5.85:1
     .ctd__dot    rgba(245,241,232,.55) border — decoration, not text
   .sv-h2 and .sv-lede use --on-black / --on-black-mute, both already
   audited in site.css and unchanged here.

   TOKENS ONLY. No new colour, spacing or radius values invented.
   ════════════════════════════════════════════════════════════ */

/* SIZE, 2026-08-13 (second pass). Ethan: the Citadel section "must be
   reduced significantly in size". It was the tallest band on the page —
   ~1470px at a 1440 viewport, of which 922px was the screenshot alone,
   rendered at its native 1600x1025 across the full width. That is more
   room than any client engagement on /case-studies gets, for one
   unreleased internal app.

   Three cuts, no content removed: the top padding is roughly halved, the
   figure is cropped to a 2.8:1 band instead of running at native aspect,
   and the gap above it is tightened. Net ~1470px -> ~940px at 1440.
   The section keeps its own S.05 slot, its heading, its state line and
   the real capture; it just stops dominating the page. */
.ctd {
  position: relative;
  padding: clamp(3.4rem, 6vw, 5rem) 0 0;
  background: var(--ink);
  overflow: hidden;
}

.ctd__head { max-width: 56ch; }

/* The icon is an identifier next to the name, NOT a stand-in for a
   screenshot — the real interface is directly below it. Small, aligned
   to the cap height of the heading, and it never appears alone. */
.ctd__title {
  display: flex; align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  margin-bottom: 1.2rem;
}
.ctd__icon {
  flex: 0 0 auto;
  width: clamp(38px, 5vw, 52px); height: auto;
  border-radius: 22%;
  border: 1px solid var(--rule-on-black);
}
.ctd__title .sv-h2 { margin: 0; }

/* The state line. Three plain facts, mono, no badge chrome — a pill
   would make it look like a status widget and invite the reader to
   click it. */
.ctd__state {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .55rem;
  margin: 0;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,241,232,.72);
}
/* Hollow, like the carousel's in-release marker and for the same
   reason: a filled dot is the universal "live" signal and this is not
   live. The two marks agree with each other on purpose. */
.ctd__dot {
  width: 6px; height: 6px;
  border: 1px solid rgba(245,241,232,.55);
  flex: 0 0 auto;
}

/* ── THE INTERFACE, EDGE TO EDGE ────────────────────────────── */
.ctd__shot {
  margin: clamp(1.6rem, 3.4vw, 2.6rem) 0 0;
  padding: 0;
  position: relative;
}
/* Still edge to edge — the width is the whole viewport, as before. What
   changed is the HEIGHT: a 2.8:1 band rather than the capture's native
   1.56:1, which is where most of the section's bulk was. Anchored top
   left so the crop keeps the sidebar and the first row of agent cards,
   the part that reads as a finished application. */
/* T-1095: 2.8/1 still measured 514px on a 740px window. 3.6/1 at the same
   top-left anchor holds the sidebar and the first row of agent cards — the
   part that reads as a finished application — at 400px / 54% instead. The
   capture is 1600px wide, so at 1440 it renders at 0.9x and at 1920 at 1.2x:
   both legible, which is the test a screenshot has to pass. */
.ctd__shot img {
  display: block;
  /* T-1141: was aspect-ratio 3.6/1 against a 1600x1025 (1.56:1) capture,
     which cropped away 57% of the screen - the "half cut off" Ethan
     reported. The capture now shows whole, contained rather than bled. */
  width: min(100%, 980px);
  margin-inline: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border: 1px solid var(--rule-on-black);
  border-radius: 3px;
}
/* A short fade into the section below so the capture ends on the page
   rather than being guillotined by the next band. */
.ctd__shot::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: clamp(28px, 4vw, 56px);
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
}
.ctd__cap {
  max-width: 1140px;
  margin: 0 auto;
  padding: .9rem clamp(1rem, 4vw, 2.5rem) 0;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em;
  color: rgba(245,241,232,.56);
}

/* ── T-1120: BELOW 1200px THIS STOPPED BEING A SCREENSHOT ──────────
   Measured, not eyeballed. The capture is 1600x1025. `object-fit: cover`
   can only ever scale the image to COVER the box, so the rendered scale
   was pinned to the box width:

     1440 →  0.90x   legible, and why this looked fine in review
      768 →  0.48x   the card titles are 3px tall
      390 →  0.26x   pure texture; you cannot tell it is software

   Widening it is not available — it is already the full viewport. So the
   fix is the other half of the rule: CROP to the meaningful region and
   show that region at ~1:1. `object-fit: none` draws the capture at its
   intrinsic size and `object-position` slides the window over it, so the
   scale stops being a function of the viewport entirely.

   The window is aimed at the "All Agents" heading and the agent cards —
   the part that reads as a finished application. Offsets are measured off
   the file: the card grid starts at x=630, the heading baseline at y=245.
   Do not re-anchor these without opening the image; they are pixel
   coordinates in citadel-agents.webp, not proportions. */
@media (max-width: 1199px) {
  .ctd__shot { overflow: hidden; }
  .ctd__shot img {
    aspect-ratio: 5 / 2;
    object-fit: none;
    object-position: -560px -200px;
  }
}
@media (max-width: 720px) {
  /* Same 1:1 window, aimed tighter: at 390 the box only holds 390px of
     source, so it takes the heading plus one whole agent card rather than
     a slice of two. */
  .ctd__shot img {
    aspect-ratio: 3 / 2;
    object-fit: none;
    object-position: -628px -228px;
  }
}

/* ════════════════════════════════════════════════════════════
   T-1149 — CITADEL ON A LIGHT GROUND
   2026-08-14. The section now carries .tp-lite (css/tech-proof.css),
   which re-pins --on-black* and --red-text for bone, so .sv-h2 /
   .sv-lede / .eyebrow come across for free. What has to be handled
   here is the three rules that hard-code cream literals rather than
   reading a token.

   THE LIGHT-MODE CAPTURE ETHAN ASKED FOR DOES NOT EXIST. Every
   Citadel image in ~/Projects/secure-ai and in this repo is either
   the icon or the one dark "All Agents" capture. Making one means
   launching the Electron app, switching its theme and re-capturing
   over CDP, which is not something to start mid-presentation. So the
   dark capture stays, and instead of sitting ON a dark page it is now
   a dark OBJECT on a light page — matted in a bone frame with a
   chamfered corner, which is the treatment a screenshot should have
   had anyway. Flagged as unfinished; the asset is the blocker, not
   the CSS.

   CONTRAST ON BONE, computed (sRGB relative luminance):
     .ctd__state rgba(10,10,10,.78) on #faf8f3 -> 11.9:1
     .ctd__cap   rgba(10,10,10,.62) on #faf8f3 ->  7.0:1
   ════════════════════════════════════════════════════════════ */
.ctd.tp-lite { background: var(--bone); }
.ctd.tp-lite { padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2.2rem, 4vw, 3.2rem); }
.ctd.tp-lite .ctd__state { color: rgba(10,10,10,.78); }
.ctd.tp-lite .ctd__dot   { border-color: rgba(10,10,10,.6); }
.ctd.tp-lite .ctd__icon  { border-color: rgba(10,10,10,.18); }
.ctd.tp-lite .ctd__cap   { color: rgba(10,10,10,.62); }

/* The capture, matted. It was already width-capped at 980px by
   T-1141, so it is not edge to edge; what is added is a real mat
   around it and the chamfer, so it reads as a placed object. */
.ctd.tp-lite .ctd__shot {
  max-width: 1140px;
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
/* HUGGING THE HEIGHT CAP, NOT LETTERBOXING INSIDE IT.
   Measured on the rendered page: site.css caps this capture at
   clamp(280px,34vw,440px) tall, which is 440px at 1440. The previous
   rule left the img BOX at its 980px width, so object-fit:contain
   letterboxed the 1600x1025 capture to 687px inside it and painted two
   bone bars inside a visible border — which reads as a broken frame,
   and the overflow:hidden on .ctd then guillotined the bottom edge.
   Width now follows the height, so the border hugs the pixels: the
   capture renders 687x440 with nothing cropped and nothing bled.
   The cap is a hard site rule and is NOT raised here. */
.ctd.tp-lite .ctd__shot img {
  width: auto;
  max-width: min(100%, 980px);
  height: clamp(280px, 34vw, 440px);
  object-fit: contain;
  margin-inline: auto;
  border: 1px solid rgba(10,10,10,.16);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
  box-shadow: 0 24px 60px -34px rgba(10,10,10,.55);
}
/* overflow:hidden on .ctd was there to contain a full-bleed capture.
   The capture is contained now, so the only thing it still does is clip
   anything that reaches the section's bottom edge. */
.ctd.tp-lite { overflow: visible; }
/* The fade-into-ink at the foot of the capture was there to seat a
   full-bleed image against a dark page. The image is contained and
   the page is light, so it would now paint a bone smear over the
   bottom of the screenshot. Off. */
.ctd.tp-lite .ctd__shot::after { content: none; }
.ctd.tp-lite .ctd__cap {
  max-width: none; margin: 0;
  padding: .8rem clamp(1rem, 4vw, 2.5rem) 0;
  /* The capture is centred and its width follows the height cap, so a
     rail-aligned caption sat 150px to the left of the frame it labels.
     Centred, it stays under its own image at every width. */
  text-align: center;
}
@media (max-width: 620px) {
  .ctd.tp-lite .ctd__shot img {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  }
}