/* ==========================================================================
   CATALOGUE  —  hr-catalogue.css   (needs hr-core.css AND hr-boat.css)

   The model page wears the BOAT page's chrome: a full-bleed photo band, an
   identity panel overlapping it, then alternating warm/deep sections. A model
   and a hull are the same kind of document — one subject, introduced and then
   explained — so everything shared (.bp-photo, .bp-id, .bp-facts, .bp-card,
   .bp-dl, .bp-grid, .bp-more-grid, .bp-pager) comes from hr-boat.css and only
   what is genuinely new lives here:

     .cat-credit    photo credit / attribution on the hero
     .cat-sheet     the yard's data sheet
     .cx-*          THE OWNER MAINTENANCE RECORD (the reason this page exists)
     .cat-sib       sister models
     .cix-*         the catalogue index (/hr-catalogue/)

   ARMOUR: every rule is nested inside #site { } so it out-ranks the tier-1
   reset and anything the theme writes without !important. See §7c.
   ========================================================================== */
#site {

  /* ==========================================================================
     THE MASTHEAD  —  a horizon, not a header bar

     Why this is not .bp-id: photo band + floating panel now MEANS "this belongs
     to a member" (every boat page and profile opens that way), so a catalogue
     page built the same way was indistinguishable above the fold.

     But the first attempt over-corrected into two flat rectangles meeting on a
     hard edge — a dark bar, then "here is the content" on paper. The rest of the
     site never does that: it does golden-hour GROUNDS, a horizon rule, and
     elements that cross a band edge instead of stopping at it.

     So: the model's identity lives in the dusk (eyebrow, name, the sentence),
     its numbers live on the paper below, and the photographic plate hangs across
     the horizon between them. One composition, read top to bottom, with the
     brand's own horizon line as the seam.
     ========================================================================== */
  .cat-dusk{position:relative;padding:calc(var(--nav-h) + 18px) 0 clamp(26px,3.2vw,40px);
      background:
        radial-gradient(120% 130% at 78% 6%, rgba(255,179,71,.15), rgba(255,179,71,0) 58%),
        radial-gradient(90% 120% at 12% 100%, rgba(194,112,63,.14), rgba(194,112,63,0) 62%),
        linear-gradient(180deg, color-mix(in oklab, var(--deep) 88%, #000) 0%, var(--deep) 46%, color-mix(in oklab, var(--ink) 72%, var(--deep)) 100%)}
  /* THE HORIZON — the site's own signature rule, and the reason the two grounds
     read as one composition rather than a cut. Deliberately the same left-to-right
     dusk it has in the footer: cool water, warm sun. */
  .cat-dusk:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
      background:linear-gradient(90deg, rgba(70,130,180,.9) 0%, rgba(120,120,140,.75) 26%, var(--rust) 58%, var(--accent) 84%, rgba(255,179,71,.55) 100%)}
  .cat-paper{position:relative;background:var(--warm);padding:clamp(26px,3.4vw,44px) 0 clamp(28px,3.4vw,44px)}

  .cat-mast-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4vw,58px);align-items:start}
  /* single column when there is no plate to hang: an empty reserved column is a
     void, and the crossing only reads as deliberate when something crosses */
  .cat-mast-grid.is-solo{grid-template-columns:1fr}
  .cat-run{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
  .cat-run a{color:rgba(245,242,236,.72);text-decoration:none;transition:color .2s}
  .cat-run a:hover{color:var(--accent)}
  .cat-run span{color:rgba(245,242,236,.34)}
  .cat-run .cat-run-now{color:var(--accent)}

  .cat-kicker{margin-top:clamp(26px,3.6vw,44px);font:700 10px/1 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
  .cat-h1{margin:16px 0 0;font-family:ui-serif,Georgia,'Times New Roman',serif;font-weight:600;font-size:clamp(38px,6vw,66px);line-height:1.02;color:var(--mist);
      text-shadow:0 1px 40px rgba(255,179,71,.14)}
  .cat-lede{margin:18px 0 0;max-width:50ch;font:400 clamp(15px,1.5vw,17px)/1.62 system-ui,sans-serif;color:rgba(245,242,236,.74);text-wrap:pretty}
  .cat-lede b{font-weight:600;color:var(--mist)}

  /* the abstract: the four measurements a reader recognises a boat by, ruled
     like a table and not boxed like a card */
  .cat-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));margin:0;border-bottom:1px solid rgba(11,42,63,.12)}
  /* label at the top, value at the bottom: when one label wraps to two lines (as
     "Length overall" does at most widths) its value must NOT drop a line below
     its neighbours — on a page claiming to be a ruled document, the headline
     measurement is the worst one to leave out of line. Subgrid, where it exists,
     shares the label row too, so labels align as well as numbers. */
  .cat-keys>div{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:2px clamp(10px,1.4vw,18px) 16px;border-left:1px solid rgba(11,42,63,.1)}
  @supports (grid-template-rows:subgrid){
    .cat-keys>div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  }
  .cat-keys>div:first-child{border-left:0;padding-left:0}
  .cat-keys dt{font:700 9px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(11,42,63,.5)}
  .cat-keys dd{margin:0;font-family:ui-serif,Georgia,serif;font-weight:600;font-size:19px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;align-self:end}
  .cat-keys dd small{font:600 11px/1 system-ui,sans-serif;color:rgba(11,42,63,.5);margin-left:3px}
  .cat-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(22px,2.8vw,30px)}
  /* ONE box for every control in the row — the same correction .bp-actions makes
     on the boat page (§5b), where Contact seller / PDF / Share are forced to one
     46px pill. The core's .cta is padding-sized (33px), so beside a fixed-height
     neighbour it sits small and low; re-box both together, never nudge padding. */
  .cat-acts .cta, .cat-ghost{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:46px;padding:0 22px;border-radius:99px;font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-indent:.1em;text-decoration:none}
  .cat-ghost{border:1px solid rgba(11,42,63,.26);background:none;cursor:pointer;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
  .cat-ghost:hover{border-color:var(--ink);background:rgba(11,42,63,.05)}

  /* THE PLATE — a figure in a reference book, hung ACROSS the horizon: its top
     half sits in the dusk, its bottom edge and caption land on the paper. That
     crossing is what makes the two grounds one composition, and it is the site's
     own move (the length staircase does it over the footer's horizon band).
     The negative margin is the whole trick, so keep it larger than the caption. */
  .cat-plate{position:relative;z-index:2;margin:clamp(26px,3.6vw,44px) 0 calc(-1 * clamp(96px,11vw,150px));display:flex;flex-direction:column}
  .cat-plate-frame{position:relative;flex:1;min-height:clamp(250px,27vw,360px);background:#0d2e44 center/cover no-repeat;
      border:1px solid rgba(255,255,255,.16);border-radius:4px;
      box-shadow:0 30px 70px rgba(4,14,23,.45), 0 2px 0 rgba(255,255,255,.06) inset}
  a.cat-plate-frame{display:block}
  .cat-plate-frame.is-empty{background:linear-gradient(150deg,#16466a,#0B2A3F)}
  .cat-plate-frame.is-empty .stripe{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 14px,transparent 14px 28px)}
  .cat-plate-frame.is-empty:after{content:'NO PHOTOGRAPH ON FILE';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 10px/1 system-ui,sans-serif;letter-spacing:.2em;color:rgba(245,242,236,.5)}
  /* the caption lands on PAPER, so it is inked — not a light-on-dark caption */
  .cat-plate-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:14px;font:600 10px/1.5 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,42,63,.5)}
  .cat-plate-cap b{font-weight:700;color:var(--rust);letter-spacing:.14em}
  /* the credit is a caption, not a call to action — no underline until hover */
  .cat-plate-cap a{color:rgba(11,42,63,.62);text-decoration:none;border-bottom:1px solid transparent}
  .cat-plate-cap a:hover{color:var(--ink);border-color:var(--ink)}

  /* ---- hero credit (only the ?hero=panel comparison build uses this) ------
     A member's photo standing in for a yard photo must say so, in the frame,
     without competing with the model name in the panel below. The right offset
     repeats the wrap's own gutter, the same correction hr-boat.css makes for
     .bp-forsale / .bp-photo-zoom (which are absolute inside .bp-abs-wrap and so
     miss it), and the bottom clamp clears the identity panel. It is one line:
     the box is absolute and shrink-to-fit, so without nowrap + a non-shrinking
     label the pill wraps to "MEMBER / PHOTO" and crosses the credit's baseline.
     label. `left` is set too, so the box has the band's width to shrink within. */
  .cat-credit{position:absolute;bottom:clamp(88px,calc(9vw + 18px),138px);left:clamp(20px,5vw,44px);right:clamp(20px,5vw,44px);z-index:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap;gap:8px;font:600 10px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,242,236,.72);text-shadow:0 1px 10px rgba(4,14,23,.85),0 1px 2px rgba(4,14,23,.7);pointer-events:none}
  .cat-credit>*{pointer-events:auto}
  .cat-credit a{color:rgba(245,242,236,.62);text-decoration:none;transition:color .2s}
  .cat-credit a:hover{color:var(--accent)}
  .cat-credit .cat-credit-lbl{flex:none;padding:4px 8px;border:1px solid rgba(255,255,255,.2);border-radius:4px;letter-spacing:.14em;color:rgba(245,242,236,.5)}
  /* the credit TEXT is the only part allowed to shrink — it may be an <a> or a
     <span> depending on whether the source has a link, so it carries its own class */
  .cat-credit .cat-credit-txt{min-width:0;overflow:hidden;text-overflow:ellipsis}

  /* ---- the data sheet ----------------------------------------------------
     Thirty catalogue-* fields, grouped into columns: measurements you look up,
     not facts you say. Tabular figures throughout, so a column of numbers reads
     as a column. No card chrome — a spec sheet is a list, and boxing seven of
     them would make the section shout. */
  .cat-sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(24px,3vw,44px) clamp(28px,4vw,64px);align-items:start}
  .cat-grp h3{margin:0 0 4px;padding:0 0 10px;font:700 10px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);border-bottom:1px solid rgba(11,42,63,.16)}
  .cat-grp dl{margin:0}
  .cat-grp dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(11,42,63,.09)}
  .cat-grp dt{font:500 13.5px/1.35 system-ui,sans-serif;color:rgba(11,42,63,.66)}
  .cat-grp dd{margin:0;font-family:ui-serif,Georgia,serif;font-weight:600;font-size:17.5px;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
  .cat-grp dd small{font:600 11px/1 system-ui,sans-serif;color:rgba(11,42,63,.5);margin-left:4px}
  .cat-src{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font:600 12px/1 system-ui,sans-serif;letter-spacing:.06em;color:var(--rust);text-decoration:none;border-bottom:1px solid rgba(194,112,63,.35);padding-bottom:5px;transition:color .2s,border-color .2s}
  .cat-src:hover{color:var(--ink);border-color:var(--ink)}
  .cat-src:after{content:'\2197';font-size:13px}

  /* ==========================================================================
     THE OWNER MAINTENANCE RECORD
     Neutral and factual on purpose: it reports what owners wrote down, and the
     copy never editorialises beyond that. Rows are ranked by SHARE OF HULLS, so
     the bar measures hulls — one diligent owner cannot make a model look
     fragile. Entry counts are secondary text, never the bar.

     Borrowed from the chart table (§7b): a system with nothing logged DIMS IN
     PLACE rather than disappearing. The gaps in the record are part of the
     record.
     ========================================================================== */
  .cx-note{max-width:64ch;margin:22px 0 0;font:400 clamp(14px,1.35vw,15.5px)/1.7 system-ui,sans-serif;color:rgba(245,242,236,.7);text-wrap:pretty}
  .cx-stats{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:26px}
  .cx-stat dt{font:700 9px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,236,.45)}
  .cx-stat dd{margin:8px 0 0;font-family:ui-serif,Georgia,serif;font-weight:600;font-size:24px;line-height:1;color:var(--mist);font-variant-numeric:tabular-nums}
  .cx-stat dd small{font:600 11px/1 system-ui,sans-serif;color:rgba(245,242,236,.5);margin-left:5px}

  .cx-rows{margin-top:clamp(30px,4vw,46px);border-top:1px solid rgba(255,255,255,.12)}
  .cx-row{border-bottom:1px solid rgba(255,255,255,.1)}
  /* five children, five tracks: system · bar · share · entries · chevron */
  .cx-head{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(120px,1.5fr) auto auto auto;align-items:center;gap:clamp(14px,2.4vw,32px);width:100%;padding:18px 2px;background:none;border:0;text-align:left;cursor:pointer;transition:background .2s}
  .cx-head:hover{background:rgba(255,255,255,.035)}
  .cx-sys{font:600 clamp(14px,1.5vw,16px)/1.3 system-ui,sans-serif;color:var(--mist)}
  .cx-bar{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
  .cx-bar span{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--rust),var(--accent));transition:width .5s cubic-bezier(.33,0,.2,1)}
  .cx-share{font:600 13px/1 system-ui,sans-serif;color:var(--mist);font-variant-numeric:tabular-nums;white-space:nowrap}
  .cx-share em{font-style:normal;color:rgba(245,242,236,.5)}
  .cx-ent{font:600 11px/1 system-ui,sans-serif;letter-spacing:.06em;color:rgba(245,242,236,.5);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:78px}
  .cx-chev{width:9px;height:9px;border-right:1.6px solid rgba(245,242,236,.55);border-bottom:1.6px solid rgba(245,242,236,.55);transform:rotate(45deg);transition:transform .25s,border-color .2s;justify-self:end}
  .cx-head.is-open .cx-chev{transform:rotate(-135deg);border-color:var(--accent)}
  /* nothing logged: dimmed in place, not removed, and not clickable */
  .cx-row.is-zero .cx-head{cursor:default;opacity:.42}
  .cx-row.is-zero .cx-head:hover{background:none}
  .cx-row.is-zero .cx-chev{display:none}
  .cx-row.is-zero .cx-ent{color:rgba(245,242,236,.4)}

  .cx-body{display:none;padding:2px 2px 24px}
  .cx-body.is-open{display:block}
  .cx-entry{display:grid;grid-template-columns:132px 1fr;gap:6px 22px;padding:14px 0;border-top:1px solid rgba(255,255,255,.07)}
  .cx-entry:first-child{border-top:0}
  .cx-when{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,242,236,.45);font-variant-numeric:tabular-nums}
  .cx-etitle{font:500 clamp(14.5px,1.5vw,16px)/1.5 system-ui,sans-serif;color:rgba(245,242,236,.92);text-wrap:pretty}
  .cx-emeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;grid-column:2}
  .cx-boat{font:600 12px/1 system-ui,sans-serif;color:var(--accent);text-decoration:none;transition:color .2s}
  .cx-boat:hover{color:var(--mist)}
  .cx-tag{font:600 9.5px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.5);padding:5px 8px;border:1px solid rgba(255,255,255,.16);border-radius:4px}
  /* On the ENGINE page an entry carries two tags: the sub-part and the type. The
     part is the informative one there (the reader already knows it is engine
     work), so it is inked and the type stays a hairline. */
  .cx-tag.is-part{color:var(--accent);border-color:rgba(255,179,71,.4);background:rgba(255,179,71,.07)}
  .cx-more{display:inline-block;margin-top:16px;font:600 12px/1 system-ui,sans-serif;letter-spacing:.06em;color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,179,71,.35);padding-bottom:4px}
  .cx-more:hover{color:var(--mist);border-color:var(--mist)}
  .cx-legend{max-width:62ch;margin:clamp(26px,3.4vw,38px) 0 0;font:400 13px/1.65 system-ui,sans-serif;color:rgba(245,242,236,.5);text-wrap:pretty}

  /* the invitation — what most of the 53 models show on day one */
  .cx-invite{margin-top:clamp(28px,3.6vw,40px);padding:clamp(24px,3.4vw,40px);border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.04);max-width:760px}
  .cx-invite h3{margin:0;font-family:ui-serif,Georgia,serif;font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.2;color:var(--mist)}
  .cx-invite p{margin:14px 0 0;font:400 clamp(14px,1.4vw,15.5px)/1.7 system-ui,sans-serif;color:rgba(245,242,236,.72);text-wrap:pretty}
  /* the invite's control is a BLOCK of its own: .btn-ghost is inline, so its
     padding bled up over the paragraph's last line instead of pushing it away */
  .cx-invite .cta, .cx-invite .btn-ghost{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:46px;padding:0 22px;border-radius:99px;font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-indent:.1em;text-decoration:none}
  .cx-invite .cta,.cx-invite .btn-ghost{margin-top:24px}
  /* ---- sister models ----------------------------------------------------- */
  .cat-sib{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:clamp(24px,3vw,34px)}
  .cat-sib a{display:block;padding:20px 22px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.035);text-decoration:none;transition:border-color .22s,transform .22s,background .22s}
  .cat-sib a:hover{border-color:rgba(255,179,71,.5);background:rgba(255,255,255,.06);transform:translateY(-3px)}
  .cat-sib .n{font-family:ui-serif,Georgia,serif;font-weight:600;font-size:19px;line-height:1.15;color:var(--mist)}
  .cat-sib a:hover .n{color:var(--accent)}
  .cat-sib .y{margin-top:8px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.08em;color:rgba(245,242,236,.5);font-variant-numeric:tabular-nums}
  .cat-sib .c{margin-top:12px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums}

  /* ==========================================================================
     THE CATALOGUE INDEX  (/hr-catalogue/)
     A table of contents: five length-class bands, every model in each. No
     filters — narrowing is /boats/'s job, and a reader here is looking up a
     name, not building a query.
     ========================================================================== */
  /* Same dusk ground and same horizon as the model page's masthead: the index
     and the model are one document, and a flat --deep bar with a hard cut to
     paper is the one composition the rest of the site never makes. No plate
     crosses here — there is no single subject to photograph — so the horizon
     does the joining on its own. */
  .cix-hero{position:relative;padding:calc(var(--nav-h) + clamp(30px,5vw,70px)) 0 clamp(46px,6vw,74px);overflow:hidden;
      background:
        radial-gradient(120% 130% at 78% 6%, rgba(255,179,71,.15), rgba(255,179,71,0) 58%),
        radial-gradient(90% 120% at 12% 100%, rgba(194,112,63,.14), rgba(194,112,63,0) 62%),
        linear-gradient(180deg, color-mix(in oklab, var(--deep) 88%, #000) 0%, var(--deep) 46%, color-mix(in oklab, var(--ink) 72%, var(--deep)) 100%)}
  .cix-hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
      background:linear-gradient(90deg, rgba(70,130,180,.9) 0%, rgba(120,120,140,.75) 26%, var(--rust) 58%, var(--accent) 84%, rgba(255,179,71,.55) 100%)}
  .cix-hero .cix-in{max-width:70ch}
  .cix-title{margin:16px 0 0;font-family:ui-serif,Georgia,'Times New Roman',serif;font-weight:600;font-size:clamp(38px,6vw,68px);line-height:1.02;color:var(--mist);text-shadow:0 1px 40px rgba(255,179,71,.14)}
  .cix-desc{margin:20px 0 0;font:400 clamp(15px,1.6vw,17.5px)/1.7 system-ui,sans-serif;color:rgba(245,242,236,.74);text-wrap:pretty}
  .cix-meta{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px}
  .cix-meta div{font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.55);font-variant-numeric:tabular-nums}
  .cix-meta b{color:var(--accent);font-weight:700}

  .cix-band{padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid rgba(11,42,63,.1)}
  .cix-band:last-of-type{border-bottom:0}
  .cix-bhead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:14px 26px}
  .cix-brange{font-family:ui-serif,Georgia,serif;font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1;color:var(--ink)}
  .cix-bn{font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,42,63,.5);font-variant-numeric:tabular-nums}
  .cix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px;margin-top:clamp(20px,2.6vw,30px)}
  .cix-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:132px;padding:20px 22px;background:#fff;border:1px solid rgba(11,42,63,.11);border-radius:14px;box-shadow:0 8px 20px rgba(11,42,63,.07);text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s}
  .cix-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(11,42,63,.14);border-color:rgba(194,112,63,.4)}
  .cix-name{font-family:ui-serif,Georgia,serif;font-weight:600;font-size:20px;line-height:1.15;color:var(--ink)}
  .cix-card:hover .cix-name{color:var(--rust)}
  .cix-years{margin-top:8px;font:600 11.5px/1 system-ui,sans-serif;letter-spacing:.06em;color:rgba(11,42,63,.55);font-variant-numeric:tabular-nums}
  .cix-count{font:600 10px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);font-variant-numeric:tabular-nums}
  .cix-count.is-none{color:rgba(11,42,63,.38)}

  /* ---- responsive --------------------------------------------------------
     The record row is placed EXPLICITLY on small screens. Auto-placement with
     five children in three tracks put the chevron on its own row; naming every
     cell means the layout cannot drift when a child is added. */
  @media (max-width:900px){
    .cx-head{grid-template-columns:1fr auto;row-gap:10px}
    .cx-sys{grid-column:1;grid-row:1}
    .cx-chev{grid-column:2;grid-row:1;align-self:center}
    .cx-bar{grid-column:1/-1;grid-row:2}
    .cx-share{grid-column:1;grid-row:3}
    .cx-ent{grid-column:2;grid-row:3;min-width:0}
    .cx-entry{grid-template-columns:1fr}
    .cx-emeta{grid-column:1}
  }
  @media (max-width:820px){
    .cat-mast-grid{grid-template-columns:1fr;align-items:start}
    .cat-plate-frame{min-height:0;aspect-ratio:4/3}
    /* THE CROSSING IS A TWO-COLUMN MOVE. Stacked, the paper band's own content
       is directly beneath the plate, so the overhang would print on the spec
       strip — the horizon simply passes above the plate instead. (.cat-plate's
       former order:2 went with this: the dusk grid now holds only the identity
       text and the plate, so there is nothing left to reorder.) */
    .cat-plate{margin-bottom:0}
    .cat-keys>div:first-child{padding-left:0}
  }
  @media (max-width:720px){
    .cix-hero{padding-top:calc(var(--nav-h) + 26px)}
    .cx-stats{gap:10px 24px}
  }
}