/* products.css. GENERATED by build-catalogue.py. Do not edit.

   The first half is lifted verbatim from site/order/index.html, so the masthead,
   the buttons and the footer on a catalogue page can never drift from the rest of
   the site. The second half is theme/catalogue.css. Edit one of those two, then
   re-run the script. */

@layer components {
h1,h2,h3{font-family:var(--font-display)}
.nav{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
          flex-wrap:wrap;
  max-width:var(--max-content);margin-inline:auto;padding:var(--sp-3) var(--margin)}
.wordmark{font-family:var(--font-display);font-size:var(--t-h4);letter-spacing:0.06em;
  text-decoration:none;text-transform:uppercase;color:inherit}
.wordmark span{color:var(--ink-3)}
.nav-links{display:none;gap:var(--sp-6)}
  @media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:var(--t-caption);letter-spacing:0.04em;color:var(--ink-2);
  text-decoration:none;padding-block:var(--sp-1);border-bottom:1px solid transparent;
  transition:border-color var(--dur-1) var(--ease-standard)}
.nav-links a:hover,.nav-links a[aria-current]{border-bottom-color:var(--accent)}
.btn{display:inline-flex;align-items:center;border:1px solid var(--ink);background:transparent;
  color:var(--ink);font:inherit;font-size:var(--t-caption);letter-spacing:0.06em;
  text-transform:uppercase;padding:calc(var(--sp-3) + 1px) var(--sp-5) var(--sp-3);
  text-decoration:none;transition:background var(--dur-1) var(--ease-standard),
  color var(--dur-1) var(--ease-standard)}
.btn:hover{background:var(--ink);color:var(--on-fill)}
.btn-primary{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.btn-primary:hover{background:var(--fill-h);border-color:var(--fill-h);color:var(--on-fill)}
.mono{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3)}
.wt{grid-column:1/-1;max-width:var(--max-text)}
.full{grid-column:1/-1}
.lede{margin-top:var(--sp-5);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
  color:var(--ink-2);max-width:46ch}
.hh{margin-top:var(--sp-10);max-width:24ch}
.p{margin-top:var(--sp-4);color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6);align-items:center}
.cta small{flex-basis:100%;font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3)}
.list{margin:var(--sp-6) 0 0;padding:0;list-style:none;max-width:var(--max-text)}
/* .marklist puts the hexagon in the inline start padding, and this rule sets
   that padding, so the room for it has to be given back here. */
.list.marklist li{padding-inline-start:1.9em}
/* .list li carries its own block padding, and the component pins the bullet to
   the top of the item, which lands it above the heading rather than beside it.
   Push it down by that padding. */
.list.marklist li::before{top:calc(var(--sp-4) + 0.34em)}
.list li{border-top:1px solid var(--rule);padding:var(--sp-4) 0;color:var(--ink-2);
  font-size:var(--t-caption);line-height:1.35rem}
.list li b{display:block;color:var(--ink);font-weight:var(--w-medium);
  font-size:var(--t-body);line-height:var(--lh-body);margin-bottom:var(--sp-2)}
.onward{grid-column:1/-1;display:grid;gap:var(--sp-5) var(--gutter);margin-top:var(--sp-10);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));border-top:1px solid var(--ink);
  padding-top:var(--sp-5)}
.onward a{text-decoration:none;color:inherit;display:block}
.onward a strong{display:block;font-family:var(--font-display);font-size:var(--t-h4);
  line-height:var(--lh-h4);font-weight:var(--w-medium)}
.onward a p{margin-top:var(--sp-2);font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3)}
.onward a:hover strong{color:var(--accent)}
.foot{background:var(--surface-2);border-top:1px solid var(--rule);margin-top:var(--sp-10)}
.foot-in{max-width:var(--max-content);margin-inline:auto;padding:var(--sp-8) var(--margin);
  display:flex;flex-wrap:wrap;gap:var(--sp-7);justify-content:space-between;
  font-size:var(--t-caption);line-height:1.35rem;color:var(--ink-2)}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{text-decoration:underline}
.srcs{grid-column:1/-1;columns:2 320px;column-gap:var(--gutter);margin-top:var(--sp-5);
  font-size:var(--t-caption);line-height:1.35rem}
.sources li{break-inside:avoid;color:var(--ink-2)}
.sources a{color:var(--ink);word-break:break-word}
.sources b{font-weight:var(--w-medium);color:var(--ink)}
.srcs-h{grid-column:1/-1;margin-top:var(--sp-10);border-top:1px solid var(--rule);
  padding-top:var(--sp-4)}
}

@layer components {
h1,h2,h3{font-family:var(--font-display);font-weight:var(--w-display);
  text-transform:uppercase;letter-spacing:0.01em}
h1{font-size:var(--t-h1);line-height:var(--lh-h1)}
h2{font-size:var(--t-h3);line-height:var(--lh-h3)}
.wordmark{font-family:var(--font-display);font-weight:var(--w-display)}
.lede{text-transform:none}
.sources li::before{color:var(--accent-ink)}
.sources a{color:var(--accent-ink)}
}

@layer components {

/* ============================================================================
   The catalogue components. The same class names on all four sites, so a change
   to the shape of a slider or a product card is one edit per site rather than a
   rediscovery. The look is per brand and lives in the block at the foot of this
   file; everything above it is structure.

   Load order: this file is appended to the lifted page chrome to make
   theme/products.css for the generated catalogue pages, and it is linked on its
   own by the hand-written home page.
   ========================================================================= */

/* --- the showcase banner ---------------------------------------------------
   The thing in use, before anything is claimed about it. Video where there is
   one, the still where there is not, and a drawn scene until either exists. */
.showcase{border-bottom:1px solid var(--rule);padding-block:var(--sp-7) var(--sp-8)}
.showcase-in{max-width:var(--max-content);margin-inline:auto;padding-inline:var(--margin);
  display:grid;gap:var(--sp-5)}
@media(min-width:1024px){
  .showcase-in{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
    align-items:center}
  .showcase-in>.prod-slogan{grid-column:1/-1;grid-row:1}
  .showcase-media{grid-column:7/13;grid-row:2}
  .showcase-copy{grid-column:1/6;grid-row:2}
}
.showcase-media{display:grid;gap:var(--sp-3);margin:0}
.showcase-video,.showcase-img,.showcase-ph{display:block;width:100%;aspect-ratio:16/9;
  border:1px solid var(--rule);background:var(--surface-2)}
.showcase-video,.showcase-img{object-fit:cover;height:auto}
.showcase-ph{position:relative;overflow:hidden}
.showcase-ph-scene{margin:0;font-family:var(--font-mono);font-size:var(--t-caption);
  line-height:1.25rem;letter-spacing:0.04em;color:var(--ink-3);max-width:52ch}
.showcase-cap{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3);margin:0}

.prod-slogan{font-family:var(--font-display);font-size:var(--t-h4);line-height:var(--lh-h4);
  color:var(--ink);margin:0;display:flex;align-items:baseline;gap:var(--sp-3)}
.prod-slogan::before{content:"";flex:none;width:22px;height:2px;background:var(--accent);
  translate:0 -0.28em}
.showcase-copy .prod-eyebrow,.showcase-copy .prod-code{margin-bottom:var(--sp-3)}
.prod-h1{margin-top:var(--sp-2);max-width:20ch}
.prod-lede{margin-top:var(--sp-4);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
  color:var(--ink-2);max-width:44ch}
.prod-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.prod-eyebrow{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.prod-eyebrow a{color:inherit}
.prod-code{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0}

/* --- the media slider ------------------------------------------------------
   Without slider.js this is a grid and every frame is visible. With it, one
   frame at a time and a row of dots. Nothing here needs JavaScript to read. */
.slider{position:relative}
.slider-track{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.slider.is-on .slider-track{grid-template-columns:minmax(0,1fr);gap:0}
.slider.is-on .slider-slide{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-standard)}
.slider.is-on .slider-slide[data-active]{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.slider.is-on .slider-slide{transition:none}}
.slider-fig{margin:0;display:grid;gap:var(--sp-2)}
.slider-img,.slider-ph{display:block;width:100%;aspect-ratio:1/1;border:1px solid var(--rule);
  background:var(--surface-2)}
.slider-img{object-fit:cover;height:auto}
.slider-ph{position:relative;overflow:hidden;display:grid;align-content:end;padding:var(--sp-3)}
.slider-ph-tag{position:relative;z-index:1;font-family:var(--font-mono);font-size:10px;line-height:1rem;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3)}
.slider-cap{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-3);margin:0}
.slider-dots{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-3)}
.slider-dot{appearance:none;background:none;border:0;padding:0;width:22px;height:22px;
  cursor:pointer;position:relative}
.slider-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px solid var(--ink-3);background:transparent;
  transition:background var(--dur-1) var(--ease-standard)}
.slider-dot[aria-current]::after{background:var(--ink);border-color:var(--ink)}
.slider-dot:hover::after{border-color:var(--ink)}

/* --- the category grid ---------------------------------------------------- */
.cat-grid{grid-column:1/-1;display:grid;gap:var(--sp-8) var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.cat-card{display:flex;flex-direction:column;gap:var(--sp-4)}
.cat-card-media{display:block;text-decoration:none;color:inherit}
.cat-card-h{font-size:var(--t-h4);line-height:var(--lh-h4);font-weight:var(--w-medium)}
.cat-card-h a{text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.cat-card-h a:hover{border-bottom-color:var(--accent)}
.cat-card-p{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.cat-card-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);
  font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.cat-card-list a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.cat-card-list a:hover{border-bottom-color:var(--ink)}
.cat-grid-teaser{display:grid;gap:var(--sp-5) var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.cat-teaser{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--ink);
  padding-top:var(--sp-3)}
.cat-teaser strong{display:block;font-family:var(--font-display);font-size:var(--t-h4);
  line-height:var(--lh-h4);font-weight:var(--w-medium)}
.cat-teaser p{margin-top:var(--sp-2);font-size:var(--t-caption);line-height:1.25rem;
  color:var(--ink-3)}
.cat-teaser:hover strong{color:var(--accent)}

/* --- the product list and one product ------------------------------------- */
.prod-list{grid-column:1/-1;display:grid;gap:var(--sp-8) var(--gutter);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.prod-item{display:flex;flex-direction:column;gap:var(--sp-4)}
.prod-item-media{display:block;text-decoration:none;color:inherit}
.prod-item-h{font-size:var(--t-h4);line-height:var(--lh-h4);font-weight:var(--w-medium);
  margin-top:var(--sp-2)}
.prod-item-h a{text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.prod-item-h a:hover{border-bottom-color:var(--accent)}
.prod-item-p{font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.prod-item-more{font-size:var(--t-caption);line-height:1.25rem}
.prod-item-more a{color:var(--ink)}

.prod-detail{grid-column:1/-1;display:grid;gap:var(--sp-7)}
@media(min-width:1024px){
  .prod-detail{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
    align-items:start}
  .prod-detail-media{grid-column:1/7}
  .prod-detail-spec{grid-column:8/13}
}
.prod-told{grid-column:1/-1;max-width:var(--max-text)}
.prod-body{margin-top:var(--sp-4);font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink-2)}
.prod-h2{margin-top:var(--sp-7);font-size:var(--t-h4);line-height:var(--lh-h4)}
.prod-use{margin:var(--sp-4) 0 0;padding:0;list-style:none;display:grid;gap:0}
.prod-use li{border-top:1px solid var(--rule);padding:var(--sp-3) 0;font-size:var(--t-caption);
  line-height:1.35rem;color:var(--ink-2)}
.prod-note{grid-column:1/-1;margin-top:var(--sp-5);font-size:var(--t-caption);line-height:1.25rem;
  color:var(--ink-3);max-width:var(--max-text)}

.prod-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
  gap:var(--sp-3) var(--sp-5);margin:var(--sp-4) 0 0}
.prod-spec>div{border-top:1px solid var(--rule);padding-top:var(--sp-2)}
.prod-spec dt{font-family:var(--font-mono);font-size:10px;line-height:1rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-3)}
.prod-spec dd{margin:0;font-size:var(--t-caption);line-height:1.25rem;color:var(--ink-2)}
.prod-spec-tight{grid-template-columns:minmax(0,1fr)}

.section-onward{padding-block:0 var(--section-y)}
.band-soft{background:var(--cat-band,var(--surface-2));border-block:1px solid var(--rule)}

/* --- make yours ------------------------------------------------------------ */
.makeyours{background:var(--cat-band,var(--surface-2));border-top:1px solid var(--ink)}
.makeyours-in{max-width:var(--max-content);margin-inline:auto;padding:var(--sp-8) var(--margin);
  display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--gutter);justify-content:space-between;
  align-items:flex-end}
.makeyours-h{margin-top:var(--sp-3);font-size:var(--t-h3);line-height:var(--lh-h3);max-width:22ch}
.makeyours-p{margin-top:var(--sp-3);font-size:var(--t-caption);line-height:1.35rem;
  color:var(--ink-2);max-width:46ch}
.makeyours-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

}

@layer components {
/* ---- VividMakery look -----------------------------------------------------
   Placeholder tiles borrow the home page's shot idiom: a machined grey form on a
   cool ground with the faint horizontal banding a printed surface has. */
.band-soft,.makeyours{--cat-band:var(--surface-band)}
.slider-ph::after,.showcase-ph::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(180deg,rgb(20 23 27 / .05) 0 1px,transparent 1px 5px),
  linear-gradient(103deg,#464B53 0 38%,#6A7078 38% 62%,#383D45 62% 100%) 50% 52%/74% 46% no-repeat,
  radial-gradient(58% 9% at 50% 78%,rgb(20 23 27 / .34),transparent 72%),
  radial-gradient(120% 90% at 22% 8%,#EDF0F4,#D3D9E0 62%,#BAC1CA 100%)}
.slider-ph-tag{color:#2A2F36}
.prod-h1,.makeyours-h,.cat-card-h,.prod-item-h{font-family:var(--font-display)}
}

@layer components {
.prod-h1,.makeyours-h,.cat-card-h,.prod-item-h,.prod-h2{text-transform:uppercase;
  letter-spacing:0.018em;font-weight:var(--w-display)}
.prod-slogan{text-transform:uppercase;letter-spacing:0.04em;font-weight:var(--w-display)}
}