/* =====================================================================
   nielsdalgaard.com — /assets/funnel.css

   Two components, one path: the book card funnel.js draws under a tool's
   result, and the line it writes at the top of a book page for a reader
   who arrived through one.

   Both have to sit inside pages that do not share a stylesheet. The
   generated tools are styled by analyzer.css; each of the six book pages
   carries its own palette in an inline <style>. What they do agree on is
   the set of custom properties — --bg2, --panel, --cream, --line and the
   rest — so everything here is written in those, with a literal fallback
   in case a page that has not defined one ever loads this file.

   Nothing here styles a heading or a paragraph in general. Both
   components are scoped to their own class, because they land in the
   middle of documents that have already made those decisions.
   ===================================================================== */

/* ---------------------------------------------------------- the card */

/* Sits under the results, inside whatever wrapper the tool used, so it
   inherits the column width rather than declaring one. The left border
   rather than a full box: a full-bordered panel directly under a
   full-bordered results table reads as another result. */
.nd-next{
  display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;
  margin:26px 0 6px;padding:20px 22px;
  background:var(--panel, #151517);
  border:1px solid var(--line, rgba(241,238,232,.10));
  border-left:3px solid var(--pewter, var(--muted, #b9b4aa));
  border-radius:10px;
}
.nd-next[hidden]{display:none}

.nd-next-cover{display:block;line-height:0}
.nd-next-cover img{
  width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center top;
  border-radius:4px;border:1px solid var(--line, rgba(241,238,232,.10));
}

.nd-next-body{min-width:0}

/* Oswald and uppercase, which is what every kicker on this site is. */
.nd-next-k{
  font-family:'Oswald',sans-serif;font-size:10px;font-weight:500;
  letter-spacing:1.9px;text-transform:uppercase;
  color:var(--muted2, #76736d);margin:0 0 7px;
}
.nd-next h3{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;
  letter-spacing:.4px;line-height:1.15;margin:0 0 9px;
  color:var(--cream, #f1eee8);
}
.nd-next h3 a{color:inherit;text-decoration:none}
.nd-next h3 a:hover{text-decoration:underline}
.nd-next-why{
  margin:0 0 16px;font-size:14.5px;line-height:1.6;
  color:var(--muted, #a3a099);
}
.nd-next-go{margin:0}

/* The cover is decoration next to a title that is already a link, and a
   96px column of it is not worth a line of its own on a phone. */
@media (max-width:560px){
  .nd-next{grid-template-columns:1fr;gap:0;padding:18px}
  .nd-next-cover{display:none}
}

/* --------------------------------------------- the three-book section */

/* Written into the page by relatedSection() in _build/build.js, and no
   longer at the foot of it — placeBooks() puts it directly under the
   tool, which is why it is styled as a section of the page rather than
   as a panel bolted to the end of one.

   Three columns that collapse to one, not auto-fill: the set is always
   three books, and a grid that reflows to two-plus-one strands the third
   under the lead and makes the lead look like a heading for it. */
.nd-books-intro{
  max-width:76ch;margin:0 0 22px;
  font-size:15.5px;line-height:1.65;
  color:var(--muted, #a3a099);
}
/* Capped, and left-aligned under the intro paragraph rather than
   stretched across the column. Two reasons, and they agree:

   Across a full 1130px wrap the three covers draw at about 330px each,
   which is larger than the book pages show them and turns a block that
   is meant to sit inside a tool page into a shop window. And the
   thumbnails are 360px wide — at 330px displayed that is 1.1x, soft on
   any retina screen, and the fix of shipping bigger files is the thing
   this section was just rebuilt to avoid.

   At 760px the covers land near 200px, which is 1.8x against the
   thumbnail and the size the strip on the book pages uses. */
.nd-books{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;max-width:760px;
}

/* One card: cover, project number, title, subtitle, in that order and
   nothing pushed anywhere. The row is kept level by reserving two lines
   for the number and two for the title — see below — rather than by
   bottom-aligning, which only levels the last line and leaves the ones
   above it staggered. */
.nd-book{
  position:relative;
  display:flex;flex-direction:column;
  padding:16px;border-radius:10px;text-decoration:none;
  background:var(--panel, #151517);
  border:1px solid var(--line, rgba(241,238,232,.10));
  transition:.18s;
}
.nd-book:hover{border-color:var(--pewter, var(--muted, #b9b4aa));transform:translateY(-3px)}

/* The covers were drawn for different trim sizes — the roadmap is
   noticeably wider than the rest — so at their natural heights the row
   turns into a staircase with every title starting on a different line.
   A fixed box and object-fit:cover trims a few pixels off the long edge
   and buys a straight row; declaring the ratio in CSS also reserves the
   space before the image lands, so nothing jumps. */
.nd-book img{
  width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center top;
  border-radius:5px;display:block;margin-bottom:13px;
  border:1px solid var(--line, rgba(241,238,232,.10));
}

/* The book the page's argument is actually about. A tag rather than a
   louder border: the other two are recommendations, not runners-up, and
   dimming them would say something the page does not mean.

   Laid over the cover rather than stacked above the title, because only
   one of the three carries it — in the flow it pushed that card's title
   a line lower than its neighbours' and broke the row the min-heights
   below exist to keep straight. */
.nd-book.lead{border-color:var(--pewter, var(--muted, #b9b4aa))}
.nd-book-tag{
  position:absolute;top:26px;left:26px;
  font-family:'Oswald',sans-serif;font-size:9px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;
  padding:4px 8px;border-radius:3px;
  color:var(--bg, #0b0b0c);background:var(--pewter, var(--muted, #b9b4aa));
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* "Project 01 · All instruments" wraps to two lines where "Project 03 ·
   Harmony" takes one, and the titles underneath would then start at
   different heights across the row. Reserving both lines keeps them
   level. */
.nd-book-num{
  font-family:'Oswald',sans-serif;font-size:9.5px;font-weight:500;
  letter-spacing:1.6px;line-height:1.4;min-height:2.8em;
  text-transform:uppercase;color:var(--muted2, #76736d);margin-bottom:5px;
}
.nd-book h3{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.4px;text-transform:uppercase;line-height:1.2;
  min-height:2.4em;margin:0 0 7px;color:var(--cream, #f1eee8);
}
.nd-book-line{
  font-size:13px;line-height:1.5;color:var(--muted, #a3a099);
}

/* Three covers side by side on a phone are three thumbnails nobody can
   read. One card per row, cover on the left, text beside it.

   A float rather than a two-column grid: the text is four sibling
   elements with no wrapper around them, so a grid has to be told which
   column each one belongs in and how many rows the cover spans — and the
   lead card has one child more than the other two, so no single span is
   right for all three. A float needs none of that. The card establishes
   a block formatting context so it grows to contain the cover even when
   the text beside it is shorter. */
@media (max-width:700px){
  .nd-books{grid-template-columns:1fr;gap:14px;max-width:none}
  .nd-book{display:block;overflow:hidden;padding:14px}
  .nd-book:hover{transform:none}
  .nd-book img{
    float:left;width:84px;margin:0 16px 0 0;
    border-radius:4px;
  }
  /* The number, the tag and the subtitle are spans, and the flex column
     above is what was giving each of them a line of its own. In a block
     card they run together, so they say so themselves. */
  .nd-book-num,.nd-book-line{display:block}
  .nd-book-num{min-height:0;margin-bottom:4px}
  .nd-book h3{min-height:0;font-size:14px}
  /* Still over the cover, just smaller and tucked into the card's own
     padding. Putting it back in the flow was tried and is worse: beside
     a float, a block box that shrinks to its content lands under the
     cover rather than beside it, which drops the lead card's title below
     its own artwork and makes that card a different shape from the two
     under it. At 7.5px it fits inside the 84px cover. */
  .nd-book-tag{top:18px;left:18px;font-size:7.5px;padding:3px 6px;letter-spacing:1.2px}
}

/* ------------------------------------------------ the arrival line */

/* Directly under the navigation, above everything the page says for
   itself. Tinted rather than bordered all round: it is a note about
   where the reader came from, not a section of the page. */
.nd-fromline{
  background:var(--bg2, #101012);
  border-bottom:1px solid var(--line, rgba(241,238,232,.10));
}
.nd-fromline p{
  margin:0;padding:14px 0;
  font-size:14.5px;line-height:1.6;
  color:var(--muted, #a3a099);
  border-left:2px solid var(--pewter, var(--muted, #b9b4aa));
  padding-left:16px;
}
@media (max-width:560px){
  .nd-fromline p{font-size:13.5px;padding-top:12px;padding-bottom:12px}
}

/* Neither of these is worth toner. The printed sheet the tools build
   carries the books properly; a plain Ctrl+P on a book page is somebody
   saving the contents, not the marketing around it. */
@media print{
  .nd-next,.nd-fromline,.nd-books{display:none !important}
}