/* ═══════════════════════════════════════════════════════════════════════
   DEVMARK LIBRARY — app shell: navigation, hero, search, footer
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Navigation ──────────────────────────────────────────────────────────
   A full-width bar rather than the reference's floating pill. The pill is
   a nice object but it wastes the corners, and this library needs the top
   rule as a structural line that the page hangs from. It goes translucent
   only once the page has scrolled, so at rest it is simply part of the page. */
.nav {
  position: fixed; inset: 0 0 auto;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--d-ui) var(--e-out),
              border-color var(--d-ui) var(--e-out),
              backdrop-filter var(--d-ui) var(--e-out);
}
.nav[data-stuck="true"] {
  background: color-mix(in oklab, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--hair);
}
.nav__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}

/* ── The mark ────────────────────────────────────────────────────────────
   Devmark's identity is a dark rounded square holding the DV monogram, with
   DEV set solid and MARK set light. The wordmark is live text so it stays
   selectable and recolours with the theme; the monogram is the supplied
   artwork, because it is a lit, dimensional object rather than a flat shape.
   The box, its 26px size, its radius and the hover are all unchanged from
   the check that used to sit here — only what is inside the box moved. */
.mark { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.mark__glyph {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--paper);
  display: grid; place-items: center;
  flex: none;
  /* The artwork carries its own square edge; the radius above is what
     rounds it, so the corners have to be clipped rather than merely
     drawn. */
  overflow: hidden;
  transition: transform var(--d-ui) var(--e-spring-pop),
              background var(--d-ui) var(--e-out);
}
.mark__img {
  width: 100%; height: 100%;
  object-fit: cover;          /* square art in a square box: no distortion */
  display: block;
}
.mark:hover .mark__glyph { transform: rotate(-6deg) scale(1.06); background: var(--signal); }
.mark__word {
  font-family: var(--font-ui); font-weight: 900;
  font-size: 0.95rem; letter-spacing: -0.02em;
  color: var(--paper); white-space: nowrap;
}
.mark__word b { font-weight: 900; }
.mark__word span { font-weight: 500; color: var(--paper-3); }
.mark__sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.9rem; color: var(--paper-3);
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--hair-2);
}
@media (max-width: 940px) { .mark__sub { display: none; } }

.nav__links { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.nav__link {
  position: relative;
  font-size: var(--t-small); font-weight: 500; color: var(--paper-3);
  padding-block: 4px;
  transition: color var(--d-fast) var(--e-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--paper); }
/* The active rule is the one place the signal green appears in navigation. */
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-ui) var(--e-out);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* The inline nav collapses to the drawer below 940px.
   It used to be 720px, which was right when the bar held four links. Ideas,
   Paths and Compare take it to seven: measured, the bar needs about 885px for
   the mark, the links and the search button, so between 721 and 885 the search
   button was pushed off the right edge of the screen. The drawer already lists
   every destination, so the fix is to hand over to it sooner rather than to
   shrink type that the rest of the site depends on. */
@media (max-width: 940px) { .nav__links { display: none; } }

/* ⌘K affordance. Hidden on touch, where there is no keyboard to press. */
.nav__k {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--hair-2); border-radius: var(--r-pill);
  font-size: var(--t-small); color: var(--paper-3);
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.nav__k:hover { border-color: var(--hair-3); color: var(--paper); }
.nav__k kbd {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  padding: 2px 5px; border-radius: 4px;
  background: var(--ink-700); color: var(--paper-3);
  border: 1px solid var(--hair);
}
@media (hover: none) { .nav__k kbd { display: none; } }

/* Progress rule for the reading view — fills as the summary is read. */
.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left;
  background: var(--signal);
  transition: transform 120ms linear;
  pointer-events: none;
}

/* ── Mobile drawer ───────────────────────────────────────────────────── */
.burger { display: none; margin-left: auto; padding: 8px; }
.burger span {
  display: block; width: 19px; height: 1.5px; background: var(--paper);
  transition: transform var(--d-ui) var(--e-spring-snap), opacity var(--d-fast) var(--e-out);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 940px) { .burger { display: block; } }

.drawer {
  position: fixed; inset: var(--nav-h) 0 auto; z-index: calc(var(--z-nav) - 1);
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  padding: var(--s-5) var(--gutter) var(--s-6);
  display: grid; gap: var(--s-2);
  /* clip-path rather than height so the panel does not animate layout. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-ui) var(--e-out);
}
.drawer[data-open="true"] { clip-path: inset(0 0 0 0); }
.drawer a {
  font-family: var(--font-display); font-size: 1.35rem; color: var(--paper);
  padding-block: 9px; border-bottom: 1px solid var(--hair);
}
.drawer a:last-child { border-bottom: 0; }

/* ── Hero ────────────────────────────────────────────────────────────────
   The reference types its headline out character by character behind a
   blinking caret. It is a familiar effect and it delays the one piece of
   text the page exists to deliver. Ours arrives by line, out of a mask,
   and is fully readable the moment it lands. */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 104px));
  padding-bottom: clamp(24px, 4vw, 48px);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
/* The measure must be set on the element that actually carries the display
   font: `ch` resolves against the element's own font, so putting it on the
   wrapper (which inherits the 16px UI face) yields a ~176px column and
   breaks the headline to one word per line. */
.hero__head { max-width: min(100%, 1100px); }
.hero__display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--paper);
  margin-block: var(--s-5) var(--s-5);
  text-wrap: balance;
  max-width: 13ch;
  /* A single long word at 100px must never push the page sideways. */
  overflow-wrap: break-word;
}
.hero__display em {
  font-style: italic; font-weight: 400;
  /* Oxblood, not the signal green: see --display-accent. The mark keeps the
     green, because there it is a FILL with dark ink on top and reads exactly
     as Devmark intends. As display TEXT on cream it vanished. */
  color: var(--display-accent);
}
.hero__lead { max-width: 52ch; color: var(--paper-2); font-size: var(--t-lead); }

/* Live counts, drawn from the dataset at build time — never invented. */
.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair);
}
.stat__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1;
  color: var(--paper); font-variant-numeric: tabular-nums;
}
.stat__l {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); margin-top: 7px;
}

/* ── Search ──────────────────────────────────────────────────────────────
   A rule and a caret, not a box. The reference gets this right and it is
   worth keeping: an input that looks like a text field competes with the
   cards, and an input that looks like a line of writing does not. */
.search {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--hair-2);
  transition: border-color var(--d-ui) var(--e-out);
  max-width: 560px;
}
.search:focus-within { border-bottom-color: var(--accent); }
.search__icon { width: 16px; height: 16px; color: var(--paper-4); flex: none; transition: color var(--d-fast) var(--e-out); }
.search:focus-within .search__icon { color: var(--accent); }
.search__input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--paper);
}
.search__input::placeholder { color: var(--paper-4); font-style: italic; }
.search__clear {
  color: var(--paper-4); padding: 4px; line-height: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.search__clear[data-show="true"] { opacity: 1; pointer-events: auto; }
.search__clear:hover { color: var(--paper); }

/* ── Command palette ─────────────────────────────────────────────────────
   The ⌘K surface. `dialog` gives focus trapping, Esc, and inertness of the
   page behind it without any of that being reimplemented in JS. */
.palette {
  width: min(680px, calc(100vw - 32px));
  max-height: min(70vh, 620px);
  padding: 0; border: 1px solid var(--hair-2);
  border-radius: var(--r-4);
  background: var(--ink-850);
  color: var(--paper-2);
  box-shadow: var(--lift-4);
  margin-top: 12vh;
  overflow: hidden;
}
.palette::backdrop {
  background: rgba(4,5,7,.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.palette[open] { animation: palette-in var(--d-ui) var(--e-spring-snap) both; }
.palette[open]::backdrop { animation: fade-in var(--d-fast) var(--e-out) both; }
@keyframes palette-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .palette[open], .palette[open]::backdrop { animation: none; }
}
.palette__head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--hair); }
.palette__results { overflow-y: auto; max-height: min(52vh, 440px); padding: var(--s-2); }
.palette__item {
  display: grid; grid-template-columns: 34px 1fr auto;
  gap: var(--s-3); align-items: center;
  width: 100%; text-align: left;
  padding: 9px 10px; border-radius: var(--r-2);
  transition: background var(--d-micro) var(--e-out);
}
.palette__item[aria-selected="true"] { background: var(--ink-700); }
.palette__item mark,
.palette__idea mark { background: var(--accent-soft); color: var(--accent); border-radius: 2px; }
.palette__thumb {
  aspect-ratio: 2/3; border-radius: 2px; overflow: hidden;
  background: var(--raised); position: relative;
}
.palette__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.palette__t { font-family: var(--font-display); font-weight: 700; color: var(--paper); font-size: 0.94rem; line-height: 1.2; }
.palette__s { font-size: var(--t-small); color: var(--paper-3); }
.palette__shelf { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--paper-4); }
.palette__foot {
  display: flex; gap: var(--s-5); padding: 10px var(--s-5);
  border-top: 1px solid var(--hair);
  font-size: var(--t-micro); color: var(--paper-4);
}

/* ── Footer ──────────────────────────────────────────────────────────────
   The Devmark signature. One line, set properly, at the end of the work —
   the agency credit a studio would actually use, rather than a banner. */
.foot {
  border-top: 1px solid var(--hair);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--section-y);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
.foot__say {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.32; color: var(--paper); max-width: 26ch; margin-top: var(--s-4);
}
.foot__say em { font-style: italic; color: var(--paper-3); }
.foot__col h2 {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
  margin-bottom: var(--s-4);
}
.foot__col a, .foot__col li { display: block; font-size: var(--t-small); color: var(--paper-3); padding-block: 5px; }
.foot__col a:hover { color: var(--paper); }
.foot__base {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--hair);
  font-size: var(--t-micro); color: var(--paper-4);
}
.foot__base a { color: var(--paper-3); }
.foot__base a:hover { color: var(--paper); }

/* ── Toolbar: view switch + filters ──────────────────────────────────── */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-4);
  position: sticky; top: var(--nav-h); z-index: 20;
  background: color-mix(in oklab, var(--ink-900) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.toolbar__count {
  font-size: var(--t-small); color: var(--paper-3);
  font-variant-numeric: tabular-nums; margin-right: auto;
}
.toolbar__count b { color: var(--paper); font-weight: 700; }

.segmented {
  display: inline-flex; padding: 3px;
  border: 1px solid var(--hair-2); border-radius: var(--r-pill);
  position: relative;
}
.segmented button {
  position: relative; z-index: 1;
  padding: 6px 15px; border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 700; color: var(--paper-3);
  transition: color var(--d-fast) var(--e-out);
}
.segmented button[aria-pressed="true"] { color: var(--ink-900); }
/* The thumb slides between segments instead of each button toggling. */
.segmented__thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px;
  background: var(--paper); border-radius: var(--r-pill);
  transition: transform var(--d-ui) var(--e-spring-snap), width var(--d-ui) var(--e-spring-snap);
}

/* Filter row scrolls horizontally on small screens rather than wrapping to
   four lines and pushing the grid off the fold. */
.filters {
  display: flex; gap: var(--s-2); overflow-x: auto;
  scrollbar-width: none; padding-block: 2px;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.filters::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

/* Concept matches in the command palette. A separate section above the books,
   visibly a different kind of result: these navigate to an idea page rather
   than to a book, and they take no part in the keyboard selection that moves
   through the book results. */
.palette__ideas {
  padding: var(--s-3) 0 var(--s-2);
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--s-2);
}
.palette__gh {
  font-size: var(--t-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--paper-4); font-weight: 700;
  padding: 0 var(--s-5) var(--s-2);
}
.palette__idea {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding: 8px var(--s-5);
  font-size: var(--t-body); color: var(--paper-2);
}
.palette__idea:hover { background: var(--ground); color: var(--paper); }
.palette__ideac { font-size: var(--t-small); color: var(--paper-4); flex: 0 0 auto; }