/* ============================================================================
   COMPACT DENSITY LAYER
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css. It changes spacing and adds the section styles for
   the restructured page — no colour, no typeface. Comments mark which is which.

   Everything here is either safe at any width, or guarded by a media query so
   it cannot break the mobile re-flow.
   ============================================================================ */

:root{
  --gap: 14px;

  /* The shell. 1560 left the content 1472 wide, which on a 1512 window put the
     first tile at x=44 and the last at x=1468 — edge to edge, no side margin.
     The ad rows and the icon block then read as one wall spanning the page.
     1280 gives the content 1192 and a real margin either side. This is the one
     number to change if the page should be tighter or wider. */
  --shell: 1280px;
}

/* ============================================================ PART A — RHYTHM */

/* --- hero ---------------------------------------------------------------- */
.hero{ padding-top:58px; padding-bottom:82px; }
/* The subheadline is one sentence. Without a measure it runs the full width of
   the shell and stops reading as a sentence. */
.hero .lede{ max-width:62ch; }
.hero .eyebrow{ margin-bottom:16px; }
.hero .display{ font-size:clamp(32px, 4.6vw, 68px); margin-bottom:18px; }
.hero .lede{ font-size:clamp(14.5px, 1.1vw, 16.5px); }

/* --- proof strip -------------------------------------------------------- */
.proof-strip{ margin-top:0; }
.proof-cell{ padding:16px 20px 14px 0; }
.proof-cell + .proof-cell{ padding-left:20px; }
.proof-cell .val{ font-size:clamp(22px, 2.2vw, 32px); }

/* --- bands and section heads -------------------------------------------- */
.band{ padding-top:44px; padding-bottom:44px; }
.band-head{ padding-bottom:20px; margin-bottom:22px; }
.band-title{ gap:12px; }
.h2{ font-size:clamp(20px, 2vw, 28px); }
.band-note{ font-size:13.5px; }

/* --- 00 index ----------------------------------------------------------- */
.toc-row{ padding:13px 0 12px; }
.toc-name{ font-size:clamp(17px, 1.5vw, 21px); }
.toc-note{ font-size:12.5px; }

/* --- 01 results --------------------------------------------------------- */
.result-body{ padding:13px 17px 15px; gap:3px 20px; }
.result-stat{ font-size:clamp(18px, 1.7vw, 25px); }
.result-cap{ font-size:13px; }
.result-note{ font-size:12.5px; }

/* --- 05 WINNING AD ------------------------------------------------------ */

/* STATE A → STATE B. The two ends of the ad. The ad itself is what happens
   between them, and the bridge in the middle says so. */
.bd-shift{
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);
  align-items:stretch;
  border-top:1px solid var(--ink);
}
.bd-state{ padding:24px 0 26px; }
.bd-state .k{ display:block; margin-bottom:12px; color:var(--taupe); }
.bd-state .nm{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(17px, 1.5vw, 21px);
  letter-spacing:-.025em;
  margin-bottom:10px;
}
.bd-state .v{ font-size:14px; line-height:1.6; color:var(--ink-70); max-width:54ch; }
.bd-state-bridge{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 14px;
}
.bd-bridge-line{ flex:1; width:1px; background:var(--rule); }
.bd-bridge-label{ color:var(--ink-35); white-space:nowrap; }

/* The ad on the left, the teardown on the right. */
.bd-segments{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ink);
}
.bd-seg{ border-bottom:1px solid var(--rule); }
.bd-seg-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr) auto;
  align-items:baseline;
  gap:5px 16px;
  width:100%;
  padding:15px 0;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.bd-seg-n{ color:var(--ink-35); }
.bd-seg-name{
  font-family:var(--display);
  font-weight:600;
  font-size:15.5px;
  letter-spacing:-.015em;
}
.bd-seg-obj{ font-size:13px; line-height:1.45; color:var(--ink-50); }
.bd-seg-plus{
  font-size:16px;
  line-height:1;
  color:var(--ink-35);
  transition:transform .22s ease;
}
.bd-seg.is-open .bd-seg-plus{ transform:rotate(45deg); }
.bd-seg-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .26s ease;
}
.bd-seg.is-open .bd-seg-body{ grid-template-rows:1fr; }
.bd-seg-body > div{ min-height:0; overflow:hidden; }
.bd-seg-line{
  margin:0 0 10px;
  padding-left:14px;
  border-left:2px solid var(--blush);
  font-size:14px;
  line-height:1.62;
  color:var(--ink);
  max-width:80ch;
}
.bd-seg-extra{
  margin:0 0 18px;
  font-size:13.5px;
  line-height:1.62;
  color:var(--ink-70);
  max-width:80ch;
}

/* The whole ad as a chain of small states, each with the viewer's own thought
   underneath it. This is the part that shows the thinking, not the copy. */
.bd-chain-block{ margin-top:42px; padding-top:20px; border-top:1px solid var(--ink); }
.bd-chain-block .eyebrow{ margin-bottom:16px; }
/* Ten beats, ten columns, all visible at desktop. A rail that hides two beats
   defeats the point of showing the chain end to end. Below 1020 it scrolls. */
.bd-chain{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.bd-chain::-webkit-scrollbar{ display:none; }
.bd-beat{
  display:flex;
  flex-direction:column;
  padding:14px 14px 15px;
  border:1px solid var(--rule);
}
.bd-beat-when{ margin-bottom:9px; color:var(--ink-35); }
.bd-beat-name{
  font-family:var(--display);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:-.015em;
  margin-bottom:7px;
}
.bd-beat-react{ font-size:12.5px; line-height:1.45; color:var(--ink-50); }
.bd-beat-react::before{ content:"\201C"; }
.bd-beat-react::after{ content:"\201D"; }

.bd-note{ margin-top:16px; color:var(--ink-35); }

/* --- 06 about -----------------------------------------------------------
   Portrait, then the labels, then the books. The traits are a single column:
   two columns of four short facts reads as a table and nobody scans a table
   for four facts. */
.about-lead .traits{ grid-template-columns:minmax(0,1fr); }
.about-books-col .eyebrow{ margin:0 0 14px; }

.books{ list-style:none; margin:0; padding:0; }
.books li{
  font-size:14px;
  line-height:1.45;
  padding:9px 0;
  border-bottom:1px solid var(--rule);
}
.books li:last-child{ border-bottom:0; }

/* --- 07 contact: the two handles ----------------------------------------
   These are the routes that reach him, so they get the weight the email
   address used to. Discord is a username, not a URL, so it copies. */
.contact-primary{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ch{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto;
  align-items:baseline;
  gap:16px;
  width:100%;
  max-width:440px;
  padding:14px 16px;
  border:1px solid var(--rule);
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.ch:hover{ border-color:var(--ink); background:rgba(22,19,15,.025); }
.ch-label{ color:var(--taupe); }
.ch-value{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(16px, 1.5vw, 20px);
  letter-spacing:-.02em;
}
.ch-act{ color:var(--ink-35); white-space:nowrap; }

/* --- 06 contact ---------------------------------------------------------
   The footer is gone and so is the right-hand column, so this is one block
   that ends the page. It needs to end the page rather than just stop. */
.contact{ padding-bottom:88px; }
/* One column. There is no "what to send" block to balance against any more. */
.contact-inner{ grid-template-columns:minmax(0,1fr); }
.contact-left .band-title{ margin-bottom:20px; }
.contact-left .display{ font-size:clamp(28px, 3.6vw, 52px); margin-bottom:18px; }
.contact-link{ padding:10px 0; }
.site-foot{ padding-top:14px; padding-bottom:18px; }

/* --- header ------------------------------------------------------------- */
.head-grid{ padding-top:11px; }
.site-nav{ padding:9px 0 8px; }
.wordmark{ font-size:23px; }

/* ============================================================ PART B — SECTIONS */

/* --- HERO: the words, nothing else --------------------------------------
   The constellation is gone, so there is no second column to make room for and
   no reason to hold the headline to half the page. */
@media (min-width:1021px){
  .hero{ padding-top:104px; padding-bottom:104px; }
  /* No width cap. The headline is one sentence; capping it to a handful of
     characters broke it a word per line. The display size sets the measure. */
}

/* --- 02 WORK: one flat wall -------------------------------------------------
   No category rows and no grid stretch. Twelve tiles, four across, in the order
   they sit in content.js. */
.work-wall{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--gap);
}

/* The hover affordance moves to the centre of the tile, because the bottom edge
   of every tile now belongs to the property pills. */
.tile-play{
  inset:0;
  justify-content:center;
  background:rgba(22,19,15,.30);
}

/* Property pills, riding the bottom edge of the media. This is the tile's
   caption: what the ad is and how long it runs, in the shape a database row
   would take. The strip carries its own top rule, so the media's bottom edge
   reads as a seam rather than as a caption sitting under a picture. */
.tile-pills{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:9px;
  border-top:1px solid rgba(22,19,15,.20);
  background:rgba(244,240,233,.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.pill{
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  padding:6px 9px 5px;
  border:1px solid rgba(22,19,15,.34);
  border-radius:999px;
  color:var(--ink);
  background:rgba(255,255,255,.78);
  white-space:nowrap;
}

/* The format is the tile's title, so it takes the solid chip and the runtime
   stays a supporting fact beside it. */
.pill.is-format{
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--ivory);
  background:var(--ink);
  border-color:var(--ink);
}

/* The ad's name, under the media. The pill says what kind of thing it is; this
   says which one. */
.tile-caption{ padding-top:9px; }
.tile-name{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:13.5px;
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--ink);
}

/* --- 01 RESULTS ---------------------------------------------------------
   A real screenshot keeps its own aspect ratio. The base stylesheet forces every
   result into a 16:9 box with object-fit:cover, which crops a wide account table
   and cuts the numbers off the sides. The numbers are the entire point, so a
   result that carries an image is allowed to run at its natural shape. */
.results-grid.is-single{ grid-template-columns:minmax(0,1fr); }

.result.has-image .result-media{
  display:block;
  position:relative;
  aspect-ratio:auto;
  background:var(--ivory);
}
.result.has-image .result-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* The small print in an account screenshot is the part a client wants to read,
   so the file opens at full size on click. */
.result-zoom{
  position:absolute;
  right:10px;
  bottom:10px;
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 10px 6px;
  border-radius:999px;
  color:var(--ivory);
  background:rgba(22,19,15,.64);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.result.has-image .result-media:hover .result-zoom,
.result.has-image .result-media:focus-visible .result-zoom{ opacity:1; }

/* Two lines under the screenshot: the claim, and one line of context. The base
   stylesheet lays this area out as a stat/caption grid, which is not what this
   card is any more, so it becomes a plain stack. */
.result.has-image .result-body{
  display:block;
  padding:20px 22px 22px;
}

/* The claim the screenshot is there to back. */
.result-title{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(19px, 1.9vw, 26px);
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--ink);
}

/* The line under the title. */
.result-sub{
  display:block;
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-70);
}

/* --- 03 AI SYSTEMS ------------------------------------------------------
   One screenshot per system. The screenshot is the evidence, so it gets the
   room and the title sits under it. Click opens the full-size file, because a
   dense dashboard reduced to card width is a mood, not a proof. */
.systems-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px;
}
.sys-card{
  display:block;
  border:1px solid var(--rule);
  background:var(--ivory);
  color:inherit;
  text-decoration:none;
  transition:border-color .2s ease;
}
.sys-card:hover{ border-color:var(--ink-35); }

.sys-media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--stone);
  border-bottom:1px solid var(--rule);
}
.sys-media img{ display:block; width:100%; height:auto; }
.sys-zoom{
  position:absolute;
  right:10px;
  bottom:10px;
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 10px 6px;
  border-radius:999px;
  color:var(--ivory);
  background:rgba(22,19,15,.66);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.sys-card:hover .sys-zoom{ opacity:1; }

.sys-name{
  display:block;
  padding:14px 16px 16px;
  font-family:var(--display);
  font-weight:600;
  font-size:15.5px;
  line-height:1.3;
  letter-spacing:-.02em;
}

/* --- 04 SKILLS: icon tiles --------------------------------------------- */
/* Label in a left column, tiles to the right of it in a FIXED-width row. Fixed,
   not 1fr: a fractional grid stretches to the full column, and a stretched row
   of icon tiles is exactly what made this section read as a wall across the
   page. 5 x 132px + gutters = 700px, so the block stops well short of the
   right edge and the empty space beside it is deliberate. */
.icon-groups{ display:flex; flex-direction:column; gap:24px; }
.icon-group{
  display:grid;
  grid-template-columns:186px minmax(0,1fr);
  gap:12px 30px;
  align-items:start;
  padding-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.icon-group:last-child{ padding-bottom:0; border-bottom:0; }
.icon-group-name{ margin:0; padding-top:14px; color:var(--ink); }
.icon-grid{
  display:grid;
  grid-template-columns:repeat(5, 132px);
  gap:10px;
  justify-content:start;
}
.icon-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:104px;
  padding:16px 8px 14px;
  border:1px solid var(--rule);
  transition:border-color .2s ease;
}
.icon-tile:hover{ border-color:var(--ink-35); }
.icon-tile img{ width:24px; height:24px; display:block; opacity:.82; }
.icon-tile .mono{
  font-family:var(--display);
  font-weight:700;
  font-size:21px;
  line-height:26px;
  height:26px;
  letter-spacing:-.03em;
  color:var(--ink-70);
}
.icon-tile .nm{
  font-size:11.5px;
  line-height:1.3;
  text-align:center;
  color:var(--ink-50);
}

/* --- desktop-only column counts and blocks ------------------------------ */
@media (min-width:1021px){
  .breakdown-grid{ grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:40px; }
  .about-top{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:56px;
    align-items:start;
    margin-bottom:0;
  }
  .contact-inner{ gap:40px; }
}

/* ============================================================ PART C — SMALL SCREENS */

@media (max-width:1020px){
  .work-wall{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .systems-list{ grid-template-columns:1fr; gap:18px; }
  .about-top{ grid-template-columns:1fr; gap:32px; }

  .icon-group{ grid-template-columns:1fr; gap:12px; }
  .icon-group-name{ padding-top:0; }
  .icon-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }

  .bd-shift{ grid-template-columns:1fr; }
  .bd-state-bridge{ flex-direction:row; padding:0; }
  .bd-bridge-line{ flex:1; width:auto; height:1px; }
  .bd-seg-head{ grid-template-columns:auto minmax(0,1fr) auto; }
  .bd-seg-obj{ grid-column:2 / 3; }
}

@media (max-width:760px){
  .hero{ padding-top:34px; padding-bottom:38px; }
  .band{ padding-top:34px; padding-bottom:34px; }
  .band-head{ padding-bottom:18px; margin-bottom:20px; }
  .proof-strip{ margin-top:0; }
  /* Two long stat labels wrap to three lines in a half-width cell at 390px.
     Tighten the tracking so they hold at two. */
  .proof-cell .micro{ font-size:9.5px; letter-spacing:.13em; }

  .work-wall{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .pill{ font-size:9px; padding:4px 7px 3px; }
  .tile-pills{ padding:7px; gap:5px; }
  .icon-grid{ grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:10px; }
  .icon-tile{ min-height:100px; padding:15px 8px 12px; }
  .icon-tile img{ width:22px; height:22px; }
  .bd-state{ padding:18px 0 20px; }
  /* Narrow: back to a rail, two-and-a-bit beats showing. */
  .bd-chain{
    grid-auto-columns:minmax(164px, 1fr);
    gap:var(--gap);
    padding-bottom:4px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .bd-chain::-webkit-scrollbar{ display:none; }
  .bd-seg-name{ font-size:14.5px; }

  .about-mid{ padding-top:24px; }
  .toolkit{ margin-top:28px; padding-top:20px; }
}