@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* ONE type + spacing scale for the whole portfolio. Extracted from the Zonos page.
   Loaded after site.css on every page, including the index and About. */
:root{
--font-accent:'Instrument Serif',serif;
/* Display XL, project names */
--dxl-size:clamp(56px,9vw,150px);--dxl-weight:800;--dxl-track:-0.045em;--dxl-lead:0.9;
/* Display L, chapter statements and section headers */
--dl-size:clamp(34px,3.6vw,56px);--dl-weight:760;--dl-track:-0.04em;--dl-lead:1.02;
/* Body, one size, one leading, one measure */
--body-size:clamp(16px,1.1vw,19px);--body-weight:400;--body-leading:1.65;--measure:60ch;
/* Micro, every eyebrow, metadata label and caption */
--label-size:10px;--label-weight:600;--label-tracking:0.2em;
/* One gap between a label and its value */
--gap-label:9px;
/* DS display and header tokens re-pointed at the one scale */
--display-weight:var(--dxl-weight);--display-tracking:var(--dxl-track);--display-leading:var(--dxl-lead);
--h2-size:var(--dl-size);--h2-weight:var(--dl-weight);--h2-tracking:var(--dl-track);--h2-leading:var(--dl-lead);
}
.dt-body{font-size:var(--body-size);font-weight:var(--body-weight);line-height:var(--body-leading)}
.cs-title{font-size:var(--dxl-size);font-weight:var(--dxl-weight);letter-spacing:var(--dxl-track);line-height:var(--dxl-lead)}
.cs-hero .dt-body{max-width:var(--measure)}
.cs-meta .dt-label{display:block;margin-bottom:var(--gap-label)}
.dt-accent{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0;line-height:1.15}
figcaption{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;line-height:1.7;margin-top:var(--gap-label)}
.catalogue-grid{background:var(--bg-2);border-radius:var(--radius-media);box-shadow:var(--shadow-card);padding:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.catalogue-cell{aspect-ratio:3/5;display:flex;align-items:flex-end;justify-content:center}
.catalogue-cell img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:860px){.catalogue-grid{grid-template-columns:repeat(2,1fr);padding:28px;gap:20px}}
.retailer-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.retailer-marquee-track{display:flex;align-items:center;width:max-content;gap:96px;animation:retailer-scroll 28s linear infinite}
.retailer-marquee:hover .retailer-marquee-track{animation-play-state:paused}
.retailer-logo{height:56px;display:flex;align-items:center;flex:none}
.retailer-logo img{height:100%;width:auto;display:block;filter:grayscale(1) opacity(0.55);transition:filter 420ms cubic-bezier(0.22,1,0.36,1)}
.retailer-logo img:hover{filter:grayscale(0) opacity(1)}
.retailer-logo.tall img{height:78px}
@keyframes retailer-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:720px){.retailer-marquee-track{gap:48px}.retailer-logo{height:36px}.retailer-logo.tall img{height:50px}}