/* formats/catalog/format.css - Quarrow Terrazzo, the catalog with filters. Brand truth: BRAND.md.
   Every selector is prefixed .fmt-catalog so two demos can never collide. Layout, rhythm, tiles,
   band, rows, chips and the assistant card come from shared.css; this file sets the brand hooks,
   the display face, and the parts only this format has: the filter table, the grid laid like a
   tile floor with grout lines, the band device, the questions grid, the still tile and the dialog.

   CLASS INVENTORY for the html agent (page order; [shared recipes] unchanged)
   body.fmt-catalog data-format="catalog"
   header.f-nav > .container.f-nav-in > a.f-brand (.f-mark holds the inline mark.svg) + nav.f-tabs + .f-nav-acts
   main#top
   section#catalog.hero-f.cat-hero (the hero) > .container
       .cat-head > .cat-head-copy (span.k + h1.h1#hero-h + .cat-head-row (p.lead + .row (a.pill.pill-ink.lg Start,
                   a.pill.pill-ghost.lg Open)) + p.micro.cat-claim) + figure.cat-film#cat-motion (picture + video.cat-motion)
       .cat-filters#cat-filters             the filters, one toolbar at a desktop width
         .cat-fgroup > p.cat-fq#fq-form + .chips[role=group aria-labelledby data-filter=form] > label.chip > input + span
         (three groups: form, grain, band)
         .cat-fbar > p.cat-count#cat-count[role=status aria-live=polite] + button.pill.pill-ghost.sm#cat-clear[hidden]
       p.cat-bandnote                       the band device on the accent tint, verbatim copy, small square before it
       ul.cat-grid#cat-grid > li.cat-cell[data-form data-grain data-band]
         > button.cat-item[data-name data-line data-detail]
           > span.cat-th > picture > img (1:1, first row eager)   + span.cat-body > span.cat-k.mono + span.cat-t + span.cat-m > b.cat-ex
       .cat-empty#cat-empty[hidden] > p
   section#works > .container > .two-col.cat-works
       .cat-works-copy > span.k + h2.h2 + p.lead + ul.rows.cat-people > li > b + span   + p.micro
       .grid.g-2.cat-notes > article.hcard > span.hcard-k + h3.hcard-t + p.hcard-p   (two)
     then figure.band.cat-band (direct child of .container) > picture > img (lazy) + figcaption.figcap > b + span
   section#questions.sec-tint > .container > .sec-h (span.k + h2.h2) + dl.cat-qa > div.cat-q > dt.cat-qq + dd.cat-qd (five)
   section#ask > .container > .two-col.cat-ask
       .cat-ask-copy > span.k + h2.h2 + p.lead + p.micro
       .tile.tile-4x5.cat-ask-tile > .shader-still (no data-palette-fixed) + .chat#cat-chat[data-chat=static]
                        > .chat-head (.dot + span + .chat-time.mono) + .chat-log#cat-log + .chat-foot > .typing#cat-typing
   dialog.cat-dialog#cat-dialog[aria-labelledby=cat-d-t] > .cat-d-in
       button.cat-d-x[data-close-dialog aria-label=Close] > svg
       .cat-d-th#cat-d-th > picture > img (4:3, set on open, width height decoding=async)
       .cat-d-body > p.cat-k.mono#cat-d-k + h2.cat-d-t#cat-d-t + p.cat-d-p#cat-d-p + span.cat-d-stone
                   + ul.rows.cat-d-rows > li > b + span (Form / Grain / Band) + p.micro + .row.cat-d-acts > button.pill.pill-ink#cat-ask
   footer.f-foot > .container.f-foot-in > a.f-brand + p */

/* ---------- display face (verbatim from assets/fonts/BRANDS.md, declared here and nowhere else) ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/space-grotesk-display.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial');size-adjust:109.1%;ascent-override:90.2%;descent-override:26.8%;line-gap-override:0%}

/* ---------- brand hooks (BRAND.md palette; hairlines and control greys are ink mixed into the ground) ---------- */
.fmt-catalog{
  --b-ground:#F7F8F7;--b-ground2:#ECEEEC;--b-ink:#15181A;
  --b-accent:#B4462E;--b-accent-tint:#F7E7E0;--b-on-accent:#F7F8F7;
  --b-display:'Space Grotesk','Space Grotesk Fallback',Arial,sans-serif;--b-display-weight:500;
  --b-line:#DDE0E0;--b-line:color-mix(in srgb,var(--b-ink) 12%,var(--b-ground));
  --b-grout:#D6DAD9;--b-grout:color-mix(in srgb,var(--b-ink) 16%,var(--b-ground));
  --b-surface:var(--b-ground);
  --b-scrim:rgba(21,24,26,.78);
  --b-scrim-grad:linear-gradient(180deg,rgba(21,24,26,0) 34%,rgba(21,24,26,.7));
  --b-focus:var(--b-accent);
}
.fmt-catalog .f-nav,.fmt-catalog main,.fmt-catalog .f-foot,.fmt-catalog .cat-dialog{
  --text-2:#464C50;--text-3:#5F666B;
  --bg-3:#E0E2E1;   /* literal: a color-mix() here serialises as color(srgb ...) and misreads as near black */
  --line-control:#8A8F92;--line-control:color-mix(in srgb,var(--b-ink) 50%,var(--b-ground));
}
/* the dialog lives outside <main>, so it takes the same remap shared.css gives the canvas */
.fmt-catalog .cat-dialog{--ink:var(--b-ink);--bg:var(--b-ground);--bg-2:var(--b-ground2);--line:var(--b-line);--accent:var(--b-accent);--accent-tint:var(--b-accent-tint)}
.fmt-catalog main ::selection,.fmt-catalog .cat-dialog ::selection{background:var(--b-accent-tint);color:var(--b-ink)}

/* ---------- type: Space Grotesk on the canvas, sentence case, wght 500 plus 400 for item titles ---------- */
.fmt-catalog .f-brand{font-size:16px;letter-spacing:-.015em;gap:9px}
.fmt-catalog .f-brand .f-mark{width:20px;height:20px;border-radius:2px;overflow:hidden}
.fmt-catalog .f-foot .f-brand .f-mark{width:22px;height:22px}
.fmt-catalog main .h1{font-size:clamp(40px,5.6vw,76px);letter-spacing:-.03em;line-height:1.02;max-width:15ch}
.fmt-catalog main .h2{letter-spacing:-.02em;line-height:1.08}
.fmt-catalog .cat-t,.fmt-catalog .cat-d-t,.fmt-catalog .cat-count{font-family:var(--b-display)}
.fmt-catalog .cat-k{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.fmt-catalog .cat-fq{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0}
.fmt-catalog .f-tabs a.is-on::after{background:var(--ink)}

/* ---------- hero: the catalog is the hero ----------
   Product first. A short head (eyebrow, h1, the lead and the two actions on one line, the micro claim) with one
   film cell of water on a honed face beside it, then the filters as a single toolbar, the band device, and the grid
   at six across, so the first row of examples is inside the first screen at 1440. On a phone the film cell drops
   out and the chips wrap under the head. Each item face is a small bounded tile and the film cell is held under
   the h1's area, so the h1 is the largest paint at 1440 and 390. */
.fmt-catalog .cat-hero{padding-top:clamp(24px,3vw,44px);padding-bottom:var(--sec-sm)}
.fmt-catalog .cat-head{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,24vw,344px);gap:clamp(24px,4vw,64px);align-items:end;
  padding-bottom:clamp(18px,2vw,26px);margin-bottom:clamp(14px,1.6vw,20px);border-bottom:2px solid var(--accent);
  border-image:linear-gradient(90deg,var(--accent) 56px,var(--b-grout) 56px) 1}
.fmt-catalog .cat-head .k{display:block;margin-bottom:14px}
.fmt-catalog .cat-hero .h1{max-width:18ch;margin:0;font-size:clamp(40px,4.6vw,68px);line-height:1.02}
.fmt-catalog .cat-head-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(20px,3vw,40px);margin-top:clamp(16px,1.8vw,24px)}
.fmt-catalog .cat-head-row .lead{margin:0;max-width:44ch;font-size:clamp(16px,1.2vw,18px)}
.fmt-catalog .cat-claim{margin:12px 0 0}
.fmt-catalog .cat-film{position:relative;margin:0;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.fmt-catalog .cat-film picture,.fmt-catalog .cat-film img,.fmt-catalog .cat-film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.fmt-catalog .cat-film video{opacity:0;transition:opacity .9s var(--ease)}
.fmt-catalog .cat-film video.is-live{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .fmt-catalog .cat-film{animation:cat-film-in 1.1s var(--ease) .1s both}
  .fmt-catalog .cat-filters,.fmt-catalog .cat-bandnote{animation:cat-chip-in .7s var(--ease) .2s both}
}
@keyframes cat-film-in{from{clip-path:inset(0 0 0 100% round 10px)}to{clip-path:inset(0 0 0 0 round 10px)}}
@keyframes cat-chip-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .fmt-catalog .cat-head{grid-template-columns:minmax(0,1fr)}
  .fmt-catalog .cat-film{display:none}
  .fmt-catalog .cat-hero .h1{font-size:clamp(38px,10.4vw,56px)}
}

/* ---------- catalog: the filter table, the band device, the grid as a tile floor, the empty state ---------- */
.fmt-catalog #catalog .sec-h{margin-bottom:clamp(20px,2.4vw,28px)}
.fmt-catalog #catalog .sec-h .lead{margin-bottom:0}
.fmt-catalog .cat-filters{display:grid;border-top:1px solid var(--b-grout);border-bottom:1px solid var(--b-grout);margin-bottom:16px}
.fmt-catalog .cat-fgroup{display:grid;gap:10px;align-items:center;padding:clamp(14px,1.6vw,18px) 0}
.fmt-catalog .cat-fgroup + .cat-fgroup,.fmt-catalog .cat-fbar{border-top:1px solid var(--b-grout)}
@media (min-width:720px){
  .fmt-catalog .cat-fgroup{grid-template-columns:96px minmax(0,1fr);gap:16px}
}
/* the filter transition: a pick fills the chip with terracotta in one wipe from the left, a press sinks it */
.fmt-catalog .cat-filters .chip span{background-color:var(--b-surface);background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 100%;background-position:0 50%;
  border-color:var(--b-grout);padding:8px 15px;
  transition:background-size .32s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.fmt-catalog .cat-filters .chip:hover span{border-color:var(--accent);transform:translateY(-1px)}
.fmt-catalog .cat-filters .chip:active span{transform:scale(.98)}
.fmt-catalog .cat-filters .chip input:checked + span{background-size:100% 100%;color:var(--b-on-accent);border-color:var(--accent)}
.fmt-catalog .cat-filters .chip input:focus-visible + span{outline-color:var(--accent)}
.fmt-catalog .cat-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:clamp(14px,1.6vw,18px) 0}
.fmt-catalog .cat-count{font-size:clamp(17px,1.3vw,19px);font-weight:500;letter-spacing:-.01em;color:var(--ink);margin:0}
.fmt-catalog .cat-fbar .pill{margin-left:auto}
/* the band device: verbatim, on the tint; terracotta stays a mark, the sentence stays grey */
.fmt-catalog .cat-bandnote{
  display:flex;gap:14px;align-items:baseline;margin:0 0 clamp(24px,3vw,32px);
  background:var(--accent-tint);border-radius:12px;padding:13px clamp(16px,2vw,20px);
  font-size:15px;line-height:1.45;color:var(--text-2);
}
.fmt-catalog .cat-bandnote::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:var(--accent);transform:translateY(-1px)}
.fmt-catalog .cat-bandnote .micro{margin:0;font-size:inherit;color:inherit}

/* the grid is laid like a floor: cells on the page ground, one pixel of grout between them */
.fmt-catalog .cat-grid{
  position:relative;list-style:none;margin:0;padding:0;
  display:grid;gap:1px;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--b-grout);border:1px solid var(--b-grout);border-radius:var(--r-card);overflow:hidden;
}
@media (min-width:640px){.fmt-catalog .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.fmt-catalog .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.fmt-catalog .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.fmt-catalog .cat-item{gap:12px;padding:12px}.fmt-catalog .cat-t{font-size:16px}}
.fmt-catalog .cat-cell{min-width:0;background:var(--b-surface)}
.fmt-catalog .cat-item{
  appearance:none;-webkit-appearance:none;width:100%;height:100%;text-align:left;cursor:pointer;margin:0;
  background:var(--b-surface);border:0;padding:clamp(12px,1.4vw,18px);
  display:grid;gap:14px;align-content:start;color:var(--ink);
  box-shadow:inset 0 0 0 0 var(--accent);transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.fmt-catalog .cat-item:hover{box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-1px)}
.fmt-catalog .cat-item:active{transform:scale(.98)}
.fmt-catalog .cat-item:focus-visible{outline-offset:-4px;border-radius:0}
.fmt-catalog .cat-th{position:relative;display:block;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--bg-2);transform:translateZ(0)}
.fmt-catalog .cat-th picture,.fmt-catalog .cat-th img{position:absolute;inset:0;width:100%;height:100%;display:block}
.fmt-catalog .cat-th img{object-fit:cover;transition:transform .6s var(--ease)}
.fmt-catalog .cat-item:hover .cat-th img{transform:scale(1.03)}
.fmt-catalog .cat-body{display:grid;gap:5px;padding:0 2px 4px}
.fmt-catalog .cat-t{font-weight:400;font-size:clamp(17px,1.3vw,19px);letter-spacing:-.01em;line-height:1.22;color:var(--ink)}
.fmt-catalog .cat-m{font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.fmt-catalog .cat-ex{display:inline-block;font-weight:500;font-size:11px;line-height:1.4;color:var(--text-3);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px}
.fmt-catalog .cat-empty{
  display:grid;justify-items:center;gap:12px;text-align:center;
  background:var(--b-surface);border:1px solid var(--b-grout);border-radius:var(--r-card);
  padding:clamp(32px,5vw,64px) 24px;color:var(--text-2);font-size:15px;
}

/* the toolbar: the three groups and the count on one line at a desktop width */
@media (min-width:1100px){
  .fmt-catalog .cat-filters{display:flex;flex-wrap:wrap;align-items:center;gap:0;border-top:0;margin-bottom:12px}
  .fmt-catalog .cat-fgroup{display:flex;align-items:center;gap:10px;padding:8px 22px 8px 0;margin-right:22px;border-right:1px solid var(--b-grout)}
  .fmt-catalog .cat-fgroup + .cat-fgroup{border-top:0}
  .fmt-catalog .cat-fq{margin:0}
  .fmt-catalog .cat-fbar{flex:1 1 auto;border-top:0;padding:8px 0;justify-content:flex-end}
  .fmt-catalog .cat-fbar .pill{margin-left:0}
  .fmt-catalog .cat-count{font-size:15px;color:var(--text-2)}
}
/* a phone: each group is one line, label then chips, so the first examples reach the first screen */
@media (max-width:719px){
  .fmt-catalog .cat-fgroup{display:flex;align-items:center;gap:10px;padding:9px 0}
  .fmt-catalog .cat-fq{flex:none;width:52px;margin:0}
  .fmt-catalog .cat-fgroup .chips{flex-wrap:nowrap;gap:6px}
  .fmt-catalog .cat-filters .chip span{padding:7px 12px;font-size:14px}
  .fmt-catalog .cat-fbar{padding:10px 0}
  .fmt-catalog .cat-count{font-size:15px}
}

/* ---------- works: copy and people beside the sample room, two photo notes, three floors in use, then the saw band ---------- */
.fmt-catalog .cat-works{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.fmt-catalog .cat-works .lead{margin-bottom:clamp(20px,2.4vw,28px)}
.fmt-catalog .cat-people{margin-bottom:16px}
.fmt-catalog .cat-people li{border-color:var(--b-grout)}
.fmt-catalog .cat-works-fig{width:100%;max-width:460px;justify-self:end;margin:0;box-shadow:0 1px 0 var(--line),0 32px 64px -44px rgba(21,24,26,.5)}
.fmt-catalog .cat-works-fig picture,.fmt-catalog .cat-works-fig img,
.fmt-catalog .cat-floor-fig .tile picture,.fmt-catalog .cat-floor-fig .tile img{position:absolute;inset:0;width:100%;height:100%;display:block}
.fmt-catalog .cat-works-fig img,.fmt-catalog .cat-floor-fig .tile img{object-fit:cover;transition:transform .8s var(--ease)}
.fmt-catalog .cat-works-fig:hover img,.fmt-catalog .cat-floor-fig:hover .tile img{transform:scale(1.03)}
@media (max-width:900px){.fmt-catalog .cat-works-fig{max-width:none;justify-self:stretch}}
.fmt-catalog .cat-notes{margin-top:clamp(28px,3.5vw,48px)}
.fmt-catalog .cat-notes .hcard{--hp:clamp(20px,2.2vw,28px);background:var(--bg-2);border-color:transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fmt-catalog .cat-notes .hcard:hover{transform:translateY(-1px);box-shadow:0 18px 36px -28px rgba(21,24,26,.45)}
.fmt-catalog .cat-notes .hcard:active{transform:scale(.98)}
.fmt-catalog .cat-notes .hcard-fig>picture{border-bottom:0;background:var(--bg-3);overflow:hidden}
.fmt-catalog .cat-notes .hcard-fig>picture>img{transition:transform .8s var(--ease)}
.fmt-catalog .cat-notes .hcard:hover>picture>img{transform:scale(1.03)}
.fmt-catalog .cat-notes .hcard-t{font-size:clamp(19px,1.6vw,22px);margin-top:2px}
/* three floors in use: named from the bible, captioned as examples, on the page ground */
.fmt-catalog .cat-floors{margin-top:clamp(40px,5vw,64px)}
.fmt-catalog .cat-floors-k{margin:0 0 14px;display:flex;align-items:center;gap:9px}
.fmt-catalog .cat-floors-k::before{content:"";flex:none;width:16px;height:1px;background:var(--accent)}
.fmt-catalog .cat-floors-grid{list-style:none;margin:0;padding:0}
.fmt-catalog .cat-floor-fig figure{margin:0}
.fmt-catalog .cat-floor-fig .tile{display:block;border-radius:var(--r-card);background:var(--bg-3)}
.fmt-catalog .cat-floor-fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:12px;font-size:14px;line-height:1.45;color:var(--text-3)}
.fmt-catalog .cat-floor-fig figcaption>b:first-child{flex-basis:100%;font-weight:500;font-size:15px;color:var(--ink)}
.fmt-catalog .cat-floor-fig figcaption>span{color:var(--text-2)}
@media (max-width:900px){.fmt-catalog .cat-floors-grid{gap:20px}}
.fmt-catalog .cat-band{margin-top:clamp(56px,7vw,96px);background:var(--bg-3)}
.fmt-catalog .cat-band>picture,.fmt-catalog .cat-band>img{max-height:min(56vh,640px)}
.fmt-catalog .cat-band .figcap{margin-top:14px;padding:0}
.fmt-catalog .cat-band .figcap b{font-size:16px}

/* ---------- questions: five pairs on a hairline grid, everything visible, no accordion ---------- */
.fmt-catalog #questions .sec-h{margin-bottom:clamp(20px,2.4vw,28px)}
.fmt-catalog .cat-qa{margin:0;display:grid;border-top:1px solid var(--b-grout)}
/* each rule under a pair is a drawn line: it draws from the left as the pair arrives, then stays */
.fmt-catalog .cat-q{position:relative;display:grid;gap:8px clamp(24px,4vw,64px);padding:clamp(18px,2.2vw,28px) 0}
.fmt-catalog .cat-q::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--b-grout);transform-origin:0 50%;transition:transform .9s var(--ease) .15s}
.fmt-reveal .fmt-catalog .cat-q:not(.is-in)::after{transform:scaleX(0)}
.fmt-catalog .cat-qq{font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em;line-height:1.3;color:var(--ink);max-width:30ch}
.fmt-catalog .cat-qd{margin:0;font-size:16px;line-height:1.5;color:var(--text-2);max-width:60ch}
@media (min-width:900px){
  .fmt-catalog .cat-q{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
}

/* ---------- ask: copy left, the still tile right with the assistant card inside it ---------- */
.fmt-catalog .cat-ask{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.fmt-catalog .cat-ask .lead{margin-bottom:clamp(20px,2.4vw,28px)}
.fmt-catalog .cat-ask-tile{width:100%;max-width:500px;margin-left:auto;box-shadow:0 1px 0 var(--line),0 32px 64px -44px rgba(21,24,26,.5)}
.fmt-catalog .cat-ask-tile>.shader-still{position:absolute;inset:0;z-index:0}
.fmt-catalog .cat-ask-tile .chat{transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.fmt-catalog .cat-ask-tile .chat.is-hit{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
@media (max-width:900px){
  .fmt-catalog .cat-ask{grid-template-columns:1fr}
  .fmt-catalog .cat-ask-tile{max-width:none;margin-left:0}
}
/* the one element that follows ?palette=: the shared .shader-still recipe, cool by default, retinted by
   the [data-palette] variants shared.css stamps on any still without data-palette-fixed. Nothing here
   overrides those stops; this only makes sure the layer fills its tile. */

/* ---------- detail dialog: one panel reused by all twelve, photograph left, copy right ---------- */
.fmt-catalog .cat-dialog{border:0;padding:0;margin:auto;background:transparent;color:var(--ink);max-width:min(960px,calc(100vw - 32px));width:100%}
.fmt-catalog .cat-dialog::backdrop{background:rgba(21,24,26,.52)}
.fmt-catalog .cat-d-in{
  position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-tile);
  overflow:auto;max-height:calc(100dvh - 32px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
}
.fmt-catalog .cat-d-th{position:relative;min-height:340px;background:var(--bg-2);overflow:hidden}
.fmt-catalog .cat-d-th picture,.fmt-catalog .cat-d-th img{position:absolute;inset:0;width:100%;height:100%;display:block}
.fmt-catalog .cat-d-th img{object-fit:cover}
.fmt-catalog .cat-d-body{padding:clamp(22px,3vw,40px);display:grid;gap:10px;align-content:start}
.fmt-catalog .cat-d-t{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0;max-width:16ch}
.fmt-catalog .cat-d-t:focus{outline:0}
.fmt-catalog .cat-d-p{font-size:16px;color:var(--text-2);line-height:1.45;max-width:46ch}
.fmt-catalog .cat-d-stone{justify-self:start;font-size:13px;line-height:1.4;color:var(--ink);background:var(--accent-tint);border-radius:var(--r-pill);padding:4px 12px}
.fmt-catalog .cat-d-rows{margin-top:8px}
.fmt-catalog .cat-d-rows li{border-color:var(--b-grout)}
.fmt-catalog .cat-d-rows b{font-weight:500}
.fmt-catalog .cat-d-body .micro{margin-top:4px}
.fmt-catalog .cat-d-acts{margin-top:10px}
.fmt-catalog .cat-d-x{
  position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:50%;
  transition:border-color .2s var(--ease),transform .15s var(--ease);
}
.fmt-catalog .cat-d-x:hover{border-color:var(--accent);transform:translateY(-1px)}
.fmt-catalog .cat-d-x:active{transform:scale(.98)}
/* the panel settles up as it opens, the backdrop fades; the close is instant */
@keyframes cat-dlg-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cat-fade{from{opacity:0}to{opacity:1}}
.fmt-catalog .cat-dialog[open] .cat-d-in{animation:cat-dlg-in .45s var(--ease) both}
.fmt-catalog .cat-dialog[open]::backdrop{animation:cat-fade .3s ease both}
/* pills and cards on the canvas lift a pixel under the pointer and sink under a press */
.fmt-catalog main .pill:hover,.fmt-catalog .cat-dialog .pill:hover{transform:translateY(-1px)}
.fmt-catalog main .pill:active,.fmt-catalog .cat-dialog .pill:active{transform:scale(.98)}
/* a line of copy that has just changed (the count, the plate) steps up into place once */
@keyframes cat-tick{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fmt-catalog .is-tick{animation:cat-tick .45s var(--ease) both}
@media (max-width:760px){
  .fmt-catalog .cat-d-in{grid-template-columns:1fr}
  .fmt-catalog .cat-d-th{min-height:0;aspect-ratio:4/3}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fmt-catalog .cat-item,.fmt-catalog .cat-th img,.fmt-catalog .cat-d-x,.fmt-catalog .cat-ask-tile .chat,
  .fmt-catalog .cat-filters .chip span,.fmt-catalog .cat-notes .hcard,.fmt-catalog .cat-notes .hcard-fig>picture>img,
  .fmt-catalog .cat-works-fig img,.fmt-catalog .cat-floor-fig .tile img,.fmt-catalog .cat-q::after{transition:none}
  .fmt-catalog .cat-item:hover .cat-th img,.fmt-catalog .cat-item:hover,.fmt-catalog .cat-notes .hcard:hover,
  .fmt-catalog .cat-notes .hcard:hover>picture>img,.fmt-catalog .cat-works-fig:hover img,.fmt-catalog .cat-floor-fig:hover .tile img,
  .fmt-catalog .cat-filters .chip:hover span,.fmt-catalog main .pill:hover,.fmt-catalog .cat-dialog .pill:hover,.fmt-catalog .cat-d-x:hover{transform:none}
  .fmt-catalog .cat-dialog[open] .cat-d-in,.fmt-catalog .cat-dialog[open]::backdrop,.fmt-catalog .is-tick{animation:none}
  /* the film cell stays a still: the video is hidden and the poster under it shows; format.js also pauses it */
  .fmt-catalog .cat-film video{display:none}
}