/* =========================================================
   Creative Lab — Theme layout
   Type and color come from creative-lab-type.css and
   creative-lab-colors.css. This file only builds the layout,
   using their tokens. Flat: no shadows, no gradients.
   ========================================================= */

:root {
  /* Spacing scale, 8px base */
  --s-1: 0.5rem;   /* 8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --s-8: 8rem;     /* 128 */

  /* Circles: one scale, steps of 24px, set by the mouse circle.
     S 24  the mouse dot
     M 48  the mouse over a link · service numbers · the sale coin on a phone card
     L 72  every button (back to top, cart, the Work tools) · the mouse over a picture ("View")
           · the opening coin · the sale coin on a card
     XL 96 the sale coin on a product photo

     The circle rules, for every circle on both sites:
     1. Two kinds. A badge tells something and is not pressed (Sale, Few Left,
        Sold Out). A button does something (back to top, cart, See Before, sound).
     2. A circle turns only when it arrives or when something changes (a
        service opening, a piece turning to Before). Never as decoration.
     3. Pointing at a round button turns it yellow, with black text: yellow
        marks the one small thing you are pointing at, and it reads on any
        ground, white, color, or artwork. Badges never change. (Rectangular
        buttons keep their own rule: they turn black.)
     4. Pressing a button makes it give a little: 95%.
     5. Each button keeps the color of its role: green for getting around the
        site (back to top, the mouse circle), blue for the cart, black over
        artwork (it reads on any client color). Word circles start with a
        verb, on two lines (See / Before); a phrase takes one weight.
     6. Size follows kind, and what is inside follows the size, on web and phone alike.
        Every button is L 72 (back to top, cart, the Work tools). A badge sizes
        with the picture it sits on (M on a phone card, L on a card, XL on the
        product photo). Inside any circle: an icon is a third of it (24 in L),
        drawn in a 1.75 line; words are 22% of it (16 in L, 21 in XL, never
        under 14), in one weight, Medium. 22% is set by the longest word,
        "Before", so any word fits.
     7. Whatever sits in a circle sits in its optical middle, across and down.
        Words are trimmed to their capitals and centered by their ink, then
        moved halfway toward their ink's center of weight, across and down: a
        letter heavy on one side (the %, a capital B, the L), or a wide line
        under a narrow one (See / Before), is nudged by its own measure, in
        em, so it holds at every size. An
        icon's ink is centered, and an arrow sits a little low, since its
        head carries the weight up. Measured from the font, never by eye only. */
  --circle-s: 1.5rem;
  --circle-m: 3rem;
  --circle-l: 4.5rem;
  --circle-xl: 6rem;
  /* The pin: wherever the C sits in a circle (the opening coin, the hero), the
     C's own circle is 55% of the pin and shares its centre. One value, used
     everywhere, so the pin is drawn the same in every place. */
  --pin-c: 0.55;

  /* Page frame */
  --pad: clamp(1rem, 4vw, 3.5rem);           /* side gutter, 16 to 56px */
  --gap: clamp(1rem, 2vw, 1.5rem);           /* column gap, 16 to 24px */
  /* Spacing system, all from the scale above, in two steps (phone, then from
     900px). Inside a block the air is about twice its main heading; between
     blocks it is one step more, so sections always read as separate.
       --panel    inside every color panel, the footer, above a page title   48 / 96
       --section  between sections                                          64 / 128
     Phones take one step less: a short screen should not be half empty.
     Inside panels the space is measured from the letters, not the line box
     (see the trim below), so the number is what the eye sees. */
  --panel: var(--s-5);
  --section: var(--s-6);
  --header-h: 4.5rem;

  /* The video is shot on this light gray; the stage matches it so the
     edges of the clip disappear. It is part of the footage, not a brand color. */
  --cl-video-matte: #E7E6E9;

  --line: 1px solid var(--cl-black);

  /* The torn top edge of a note from the studio pad (On Our Desk, contact thanks) */
  --cl-torn: polygon(0.0% 2.3px, 2.94% 1.1px, 5.88% 4.6px, 8.82% 0.5px, 11.76% 3.8px, 14.71% 2.6px, 17.65% 0.4px, 20.59% 3.6px, 23.53% 0.3px, 26.47% 3.0px, 29.41% 0.5px, 32.35% 0.6px, 35.29% 3.0px, 38.24% 5.8px, 41.18% 0.9px, 44.12% 1.6px, 47.06% 4.4px, 50.0% 6.6px, 52.94% 4.0px, 55.88% 2.8px, 58.82% 6.8px, 61.76% 0.3px, 64.71% 6.0px, 67.65% 2.0px, 70.59% 1.0px, 73.53% 0.8px, 76.47% 2.2px, 79.41% 5.7px, 82.35% 1.3px, 85.29% 4.1px, 88.24% 4.5px, 91.18% 2.6px, 94.12% 3.8px, 97.06% 0.4px, 100.0% 1.2px, 100% 100%, 0% 100%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 900px) {
  :root { --panel: var(--s-7); --section: var(--s-8); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-3)); }
body { margin: 0; background: var(--cl-white); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
input, textarea, select, button { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
/* Selected text: the yellow marker behind black text, everywhere. Chrome and
   Safari fade a fully opaque selection color, which turns the yellow olive on
   black panels; a 0.99 alpha keeps the exact brand yellow on every surface. */
::selection { background: rgb(247 235 98 / 0.99); color: var(--cl-black); }
/* No gray flash when a link is tapped on a phone; links have their own states */
html { -webkit-tap-highlight-color: transparent; }
/* The page slides sideways during a page change; never let that make a sideways scroll */
html, body { overflow-x: clip; }

/* Checkboxes and radios, drawn flat in black instead of the system grays and blues */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.125rem; height: 1.125rem; margin: 0; vertical-align: -0.2em;
  border: 1px solid var(--cl-black); border-radius: 0; background: var(--cl-white);
  display: inline-grid; place-content: center; cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
input[type="radio"]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cl-black); transform: scale(0); transition: transform 0.15s var(--ease); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:checked { background: var(--cl-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--cl-ink-muted); cursor: not-allowed; }
input:focus-visible[type="checkbox"], input:focus-visible[type="radio"] { outline: 2px solid var(--cl-black); outline-offset: 2px; }
/* WooCommerce show-password eye: no gray box */
.show-password-input { background: transparent !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* Focus: visible, flat, on every interactive element */
:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 3px; }
.cl-on-black :focus-visible, .cl-footer :focus-visible { outline-color: var(--cl-white); }
.cl-main:focus { outline: none; }

.cl-skip {
  position: absolute; left: var(--pad); top: -100px; z-index: 100;
  background: var(--cl-black); color: var(--cl-white); padding: var(--s-1) var(--s-2); text-decoration: none;
}
.cl-skip:focus { top: var(--s-1); }

/* ---------- Links ---------- */
.cl-content a:not(.cl-button):not(.wp-block-button__link),
.cl-link {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.2s var(--ease);
}
.cl-content a:not(.cl-button):not(.wp-block-button__link):hover,
.cl-link:hover { text-decoration-thickness: 2px; }

.cl-arrow { display: inline-block; transition: transform 0.3s var(--ease); }
a:hover > .cl-arrow, a:focus-visible > .cl-arrow { transform: translateX(0.25em); }

/* ---------- Header ---------- */
.cl-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--cl-white);
  transition: transform 0.35s var(--ease);
}
.cl-header.is-hidden { transform: translateY(-100%); }
.cl-header__inner {
  height: var(--header-h);
  padding-inline: var(--pad);
  display: flex; align-items: center; gap: var(--s-4);
}
.cl-logo { display: block; color: var(--cl-black); flex: none; }
/* The C: it turns like the pin in the hero, flat, around its vertical axis */
.cl-logo { perspective: 400px; padding: 0.375rem; margin: -0.375rem; }
.cl-logo__c { display: block; transform-style: preserve-3d; }
.cl-logo svg { width: auto; height: 2.25rem; }  /* 36px */
@keyframes cl-turn-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } }
@keyframes cl-turn { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .js .cl-logo:not(.has-entered) .cl-logo__c { animation: cl-turn-in 0.9s var(--ease) 0.15s both; }
  .cl-logo.has-entered.is-turning .cl-logo__c { animation: cl-turn 1s var(--ease); }
}

.cl-nav { margin-left: auto; }
.cl-menu { display: flex; gap: var(--s-4); }
.cl-menu a {
  display: inline-block; padding: 0.25rem 0.375rem; margin-inline: -0.375rem;
  text-decoration: none; color: var(--cl-black);
}
.cl-menu a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* The page you are on: its name in coral */
.cl-menu .is-current > a,
.cl-menu .current-menu-item > a { color: var(--cl-coral); }

.cl-header__end { display: flex; align-items: center; gap: var(--s-3); }

.cl-menu-toggle {
  display: none; width: 2.75rem; height: 2.75rem; margin-right: -0.625rem;
  background: none; border: 0; padding: 0; position: relative;
}
.cl-menu-toggle__lines,
.cl-menu-toggle__lines::before {
  position: absolute; left: 0.625rem; right: 0.625rem; height: 2px; background: var(--cl-black);
  transition: transform 0.3s var(--ease);
}
.cl-menu-toggle__lines { top: calc(50% - 4px); }
.cl-menu-toggle__lines::before { content: ""; left: 0; right: 0; top: 7px; }
.cl-menu-toggle[aria-expanded="true"] .cl-menu-toggle__lines { transform: translateY(3.5px) rotate(45deg); }
.cl-menu-toggle[aria-expanded="true"] .cl-menu-toggle__lines::before { transform: translateY(-7px) rotate(-90deg); }

@media (max-width: 767px) {
  .cl-header__end { margin-left: auto; }
  .cl-menu-toggle { display: block; }
  .cl-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 47;
    background: var(--cl-white);
    padding: var(--s-4) var(--pad);
    visibility: hidden; opacity: 0;
    transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .cl-nav.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s var(--ease); }
  .cl-menu { flex-direction: column; gap: var(--s-2); }
  .cl-menu a {
    font-size: var(--cl-size-headline); line-height: var(--cl-lead-headline);
    letter-spacing: var(--cl-track-headline);
    font-variation-settings: "opsz" var(--cl-opsz-display);
  }
  body.cl-menu-open { overflow: hidden; }
}

/* ---------- Page frame ---------- */
.cl-main { flex: 1; }
.cl-page-head {
  padding: var(--panel) var(--pad) var(--s-4);
}
@media (min-width: 900px) { .cl-page-head { padding-bottom: var(--s-6); } }
.cl-content > * { padding-inline: var(--pad); }
.cl-content > * + * { margin-top: var(--section); }
.cl-content > :last-child { margin-bottom: var(--section); }

/* Full-bleed blocks keep their own inner padding */
.cl-content > .cl-hero,
.cl-content > [class*="is-style-panel-"],
.cl-content > .wp-block-image.alignfull,
.cl-content > .wp-block-cover { padding-inline: 0; }

/* Blocks that sit next to each other without a big gap */
.cl-content > .is-tight { margin-top: var(--s-5); }

/* ---------- Block styles (registered in inc/setup.php) ---------- */
.is-style-lead {
  font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead);
  letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display);
  text-wrap: pretty;
}
.is-style-label {
  font-size: var(--cl-size-label); font-weight: var(--cl-medium);
  line-height: var(--cl-lead-label); letter-spacing: var(--cl-track-label);
}
.is-style-statement,
p.is-style-statement {
  font-size: var(--cl-size-headline); font-weight: var(--cl-medium);
  line-height: 1.15; letter-spacing: var(--cl-track-headline);
  font-variation-settings: "opsz" var(--cl-opsz-display);
  max-width: 24em; text-wrap: pretty;
}
.is-style-display {
  font-size: var(--cl-size-display); font-weight: var(--cl-medium);
  line-height: var(--cl-lead-display); letter-spacing: var(--cl-track-display);
  font-variation-settings: "opsz" var(--cl-opsz-display);
}
/* A section name: Subhead role */
.is-style-section {
  font-size: var(--cl-size-subhead); font-weight: var(--cl-semibold);
  line-height: var(--cl-lead-subhead); letter-spacing: var(--cl-track-subhead);
  font-variation-settings: "opsz" var(--cl-opsz-display);
}
.is-style-section a, .is-style-display a { text-decoration: none !important; }
.is-style-section a:hover, .is-style-display a:hover { text-decoration: underline !important; text-decoration-thickness: 2px !important; }

/* Panels: flat brand surfaces, text always black (white only on black) */
[class*="is-style-panel-"] { padding-block: var(--panel); }
/* The first line starts at its capitals and the last ends at its baseline, so
   a big headline does not bring extra air of its own */
/* (The trim cannot pass through a grid, so it is set down to the first text
   inside the panel sections and features, which are grids.) */
[class*="is-style-panel-"] > :first-child,
[class*="is-style-panel-"] > :first-child > :first-child,
[class*="is-style-panel-"] > :first-child > :first-child > :first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
[class*="is-style-panel-"] > :last-child,
[class*="is-style-panel-"] > :last-child > :last-child,
[class*="is-style-panel-"] > :last-child > :last-child > :last-child { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
[class*="is-style-panel-"] > :only-child,
[class*="is-style-panel-"] > :only-child > :only-child { text-box-trim: trim-both; }
[class*="is-style-panel-"] > * { padding-inline: var(--pad); }
.is-style-panel-green { background: var(--cl-green); color: var(--cl-black); }
.is-style-panel-tint  { background: var(--cl-green-tint); color: var(--cl-black); }
.is-style-panel-coral { background: var(--cl-coral); color: var(--cl-black); }
.is-style-panel-black { background: var(--cl-black); color: var(--cl-white); }
/* Panels sit flush against each other and against the footer */
.cl-content > [class*="is-style-panel-"] + [class*="is-style-panel-"] { margin-top: 0; }
.cl-content > [class*="is-style-panel-"]:last-child { margin-bottom: 0; }

/* ---------- Section: name on the left, content on the right ---------- */
/* Markup: .cl-section > heading.is-style-section + .cl-section__body */
.cl-section {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--s-3);
  align-items: start;
}
.cl-section > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .cl-section > .is-style-section { grid-column: 1 / span 4; }
  .cl-section > .cl-section__body { grid-column: 5 / -1; }
  /* Stacked: the name sits above full-width content */
  .cl-section--stack > .cl-section__body { grid-column: 1 / -1; }
}
.cl-section--stack { row-gap: var(--s-4); }
.cl-section__body > * + * { margin-top: var(--s-3); }
.cl-section__body > * + .cl-work-grid,
.cl-section__body > * + .cl-product-row,
.cl-section__body > * + .cl-lab-row,
.cl-section__body > * + .cl-services { margin-top: var(--s-5); }

/* A thin rule above a section, the Swiss way */
.cl-section.has-rule { border-top: var(--line); padding-top: var(--s-3); }

/* ---------- Hero: the 3D element ---------- */
.cl-hero {
  background: var(--cl-video-matte);   /* only until the first frame shows */
  overflow: hidden;
}
/* The clip is wide, with its own background carried to the edges, so it fills
   the stage edge to edge and no seam can show. On narrow screens it crops to a
   square around the centre. */
.cl-hero .wp-block-video { margin: 0; }
.cl-hero video {
  display: block; width: 100%;
  aspect-ratio: 16 / 9 !important; /* WordPress sets the file's ratio inline */
  max-height: calc(100svh - var(--header-h));
  object-fit: cover;
  /* Some browsers draw a dark row on the outermost pixels of a video; scale
     just past the edges so the stage clips them. */
  transform: scale(1.012);
}
@media (max-width: 767px) {
  .cl-hero video { aspect-ratio: 1 / 1 !important; }
}
.cl-content > .cl-hero:first-child + * { margin-top: var(--section); }

/* ---------- Media ---------- */
.cl-content .wp-block-image img { width: 100%; height: auto; }
.cl-content figcaption { font-size: var(--cl-size-label); color: var(--cl-ink-muted); margin-top: var(--s-1); }
.cl-media-pair {
  display: grid; gap: var(--gap); grid-template-columns: 1fr;
}
@media (min-width: 768px) { .cl-media-pair { grid-template-columns: 5fr 7fr; align-items: end; } }
.cl-media-pair .wp-block-image { margin: 0; }

/* ---------- Services ---------- */
.cl-services { display: grid; grid-template-columns: 1fr; column-gap: var(--gap); }
.cl-service {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  border-top: var(--line); padding-block: var(--s-3) var(--s-4);
}
/* Each row opens with a line; the last one is not closed with another, so a
   line, white, then the black footer never stack up. On the Services page the
   list ends the page: the last row sits right on the footer, whose black edge
   closes the list, and opening that row carries the footer down with it. */
.cl-content > .cl-services--full:last-child { margin-bottom: 0; }
.cl-service__num {
  grid-column: 1 / span 2;
  font-size: var(--cl-size-label); font-weight: var(--cl-medium); letter-spacing: var(--cl-track-label);
  font-variant-numeric: tabular-nums; padding-top: 0.35em;
}
.cl-service__name { grid-column: 3 / span 10; }
.cl-service__list { grid-column: 3 / span 10; margin-top: var(--s-2); }
.cl-service__list li { padding-block: 0.125rem; }
@media (min-width: 900px) {
  .cl-service__num { grid-column: 1 / span 1; }
  .cl-service__name { grid-column: 2 / span 5; }
  .cl-service__list { grid-column: 7 / span 6; margin-top: 0; }
}
/* Services page: names in the headline role */
.cl-services--full .cl-service__name {
  font-size: var(--cl-size-headline); font-weight: var(--cl-medium);
  line-height: var(--cl-lead-headline); letter-spacing: var(--cl-track-headline);
}
.cl-services--full .cl-service__num { padding-top: 0.9em; }
.cl-services--full .cl-service__list { font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead); font-variation-settings: "opsz" var(--cl-opsz-display); letter-spacing: var(--cl-track-lead); }
@media (min-width: 900px) { .cl-services--full .cl-service__list { padding-top: 0.5em; } }

/* Home: a compact grid */
@media (min-width: 640px) {
  .cl-services--compact .cl-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cl-services--compact .cl-services { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-4); }
}
.cl-services--compact .cl-service { display: block; padding-block: var(--s-2) var(--s-3); }
.cl-services--compact .cl-service__num { padding: 0 0 var(--s-1); }
.cl-services--compact .cl-service__name { font-size: var(--cl-size-subhead); }
.cl-services--compact .cl-service__list { margin-top: var(--s-1); color: var(--cl-ink-muted); }

/* ---------- Work grid ---------- */
.cl-work-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5) var(--gap);
}
@media (min-width: 768px) {
  .cl-work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* A calm rhythm: wide, narrow, narrow, wide */
  .cl-work-grid > .cl-tile:nth-child(4n+1),
  .cl-work-grid > .cl-tile:nth-child(4n+4) { grid-column: span 7; }
  .cl-work-grid > .cl-tile:nth-child(4n+2),
  .cl-work-grid > .cl-tile:nth-child(4n+3) { grid-column: span 5; }
  .cl-work-grid > .cl-tile:nth-child(4n+2) .cl-tile__media,
  .cl-work-grid > .cl-tile:nth-child(4n+3) .cl-tile__media { aspect-ratio: 4 / 5; }
}
.cl-tile__link { display: block; text-decoration: none !important; color: inherit; }
.cl-tile__media {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--cl-green-tint);
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.cl-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.cl-tile__link:hover img { transform: scale(1.02); }
.cl-tile__title { margin-top: var(--s-2); }
.cl-tile__link:hover .cl-tile__title { text-decoration: underline; text-underline-offset: 0.2em; }
.cl-tile__meta { margin-top: 0.25rem; }
/* Placeholders follow the palette order: green tint, pink, blue */
.cl-tile--empty .cl-tile__media { padding: var(--s-2); }
.cl-tile--empty:nth-child(3n+2) .cl-tile__media { background: var(--cl-pink); }
.cl-tile--empty:nth-child(3n+3) .cl-tile__media { background: var(--cl-blue); }

/* ---------- Work: the lab ----------
   A wall of samples, straight from the studio. Every piece is post size
   (4:5), with its words right under it, like a post and its caption: one
   across on a phone, two on a tablet, three on a wide screen. A piece still in
   progress carries a small yellow note, torn from the same pad as On Our Desk. */
.cl-lab { display: grid; gap: var(--section) var(--gap); align-items: start; }
@media (min-width: 600px) { .cl-lab { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cl-lab { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cl-entry__media video, .cl-entry__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
}
.cl-entry__media { position: relative; }
/* Tools on a piece: black circles side by side in the bottom corner, from
   the same family as the coins (L, 72px). Next to the speaker, which everyone
   knows to press, "See Before" reads as something to press too. It turns the
   piece over like a coin to show the old version, and "See After" turns it
   back; every word circle says the action it does (See Before, Flip It, Lights On); the speaker turns the film's sound on and off. White only on black. */
.cl-entry__face img.cl-entry__before { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.cl-entry__face [hidden] { display: none !important; }
/* A close look in motion: the film zooms in its own frame */
.cl-entry__face { position: relative; overflow: hidden; }
/* Lights: one film holds both versions side by side; the frame shows the left half
   (lights off), and the right half while the lights are on, at once, no fade (site.js) */
video.cl-film--pair { object-fit: cover; object-position: 0% 50%; }
.cl-entry__face.is-lit video.cl-film--pair { object-position: 100% 50%; }
/* Safari draws a faint hairline round a film on a white ground (Bird Palace); the same
   edge fix as the store images: the film's own edge sits just outside the frame.
   Films that zoom (data-zoom) carry the same fix in their own transform (site.js). */
.cl-entry__face video:not([style*="transform-origin"]) { transform: scale(1.01); backface-visibility: hidden; }
/* Flip: the ambigram's last frame on its own flat ground; only the mark turns */
.cl-entry__flip { position: absolute; inset: 0; overflow: hidden; }
.cl-entry__flip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-entry__tools {
  position: absolute; right: var(--s-2); bottom: var(--s-2);
  display: flex; gap: var(--s-1);
}
.cl-tool {
  width: var(--circle-l); height: var(--circle-l); border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--cl-black); color: var(--cl-white); cursor: pointer;
  transition: transform 160ms var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cl-tool:active { transform: scale(0.95); }
.js .cl-tool { visibility: hidden; }
.js .cl-tool.is-stuck { visibility: visible; animation: cl-coin-in 0.7s var(--ease) backwards; }
.cl-tool--word { place-content: center; justify-items: center; row-gap: calc(var(--circle-l) * 0.07); }
/* Two lines like the coins ("20% / Off"); one phrase, so one weight */
.cl-tool--word > span {
  display: block; line-height: 1; letter-spacing: 0; text-box: trim-both cap alphabetic;
  font-size: calc(var(--circle-l) * 0.22); font-weight: var(--cl-medium); font-variation-settings: "opsz" var(--cl-opsz-display);
}
/* Optical middle (circle rule 7): the capital carries a word's weight to the
   left, so "Before" and "After" step right a touch */
.cl-tool--see-before[data-state="new"] [data-before-word] { transform: translateX(0.05em); }
.cl-tool--see-before[data-state="old"] [data-before-word] { transform: translateX(0.03em); }
/* and down: the wide second line and the small letters carry the weight low,
   so the pair steps up (Before more than After, it is wider) */
.cl-tool--see-before[data-state="new"] > span { translate: 0 -0.1em; }
.cl-tool--see-before[data-state="old"] > span { translate: 0 -0.05em; }
.cl-tool--see-detail > span { translate: 0 -0.08em; }   /* "See / Detail" and "See / Scene" weigh low alike (measured) */
.cl-tool--flip > span { translate: 0 0.1em; }   /* "Flip" over "It": the wide top line carries the weight high, so the pair steps down */
/* The sound sits on the Kind line, off the artwork: a black icon on the site
   white, so it reads whatever the client colors are. The icon is 24 (a third
   of L), the press area M 48. It is an icon, not a round button: no yellow
   circle (one would stick out past the piece's edge); a press makes it give
   to 95%, like every button. The icon's ink lines up with the column's right edge. */
.cl-entry__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 1lh; }
.cl-sound {
  width: var(--circle-m); height: var(--circle-m); border-radius: 50%; border: 0; padding: 0;
  margin: calc((var(--circle-m) - 1rem) / -2) -0.8125rem calc((var(--circle-m) - 1rem) / -2) auto;
  display: grid; place-items: center; flex: none;
  background: var(--cl-white); color: var(--cl-black); cursor: pointer;
  transition: transform 160ms var(--ease), background-color 0.2s var(--ease);
}
.cl-sound:active { transform: scale(0.95); }
.cl-sound:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 3px; }
.cl-sound svg { width: calc(var(--circle-l) / 3); height: calc(var(--circle-l) / 3); overflow: visible; }
.cl-sound__body { fill: currentColor; }
.cl-sound__on, .cl-sound__off { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.cl-sound[aria-pressed="false"] .cl-sound__on,
.cl-sound[aria-pressed="true"] .cl-sound__off { display: none; }
.cl-entry__text { margin-top: var(--s-3); }
/* The card under a piece. Spaces are measured from the letters (each line
   trimmed to its capitals and baseline): the Kind first, right under the
   piece; the client a step below (24), "Client" close to the name it labels
   (16), then the caption (16). All in the site type, black: the color on the
   wall is the work itself (client work in its own colors). */
.cl-entry__client, .cl-entry__title, .cl-entry__kind { text-box: trim-both cap alphabetic; }
.cl-entry__kind { margin: 0; }
.cl-entry__client { margin: var(--s-3) 0 0; }
.cl-entry__title { margin: var(--s-2) 0 0; }
.cl-entry__body { margin-top: var(--s-2); max-width: 32rem; }
.cl-entry__body > * { margin: 0; }
.cl-entry__body > * + * { margin-top: var(--s-2); }
/* The note's words sit on the same left edge as the text above; the paper
   itself hangs out into the gutter by its own padding. */
.cl-entry__note {
  --hang: var(--s-3);   /* the paper hangs 24px into the gutter, so its words line up with the text */
  margin: var(--s-4) 0 0 calc(-1 * var(--hang)); max-width: 21rem;
  background: var(--cl-yellow); color: var(--cl-black);
  padding: calc(var(--s-2) + 0.5rem) var(--s-3) var(--s-3) var(--hang);
  clip-path: var(--cl-torn); transform: rotate(-1.5deg); transform-origin: var(--hang) 50%;
}
/* Phones: the side gutter is only 16px, too narrow to hang into without
   touching the screen edge. The paper sits inside the column instead, with
   its own margin all round, clear of the edge. */
@media (max-width: 599px) {
  .cl-entry__note { --hang: 0px; margin-left: 0; padding-left: var(--s-3); transform-origin: 50% 50%; }
}
.cl-entry__note > p { margin: 0; }
.cl-entry__note > p + p { margin-top: var(--s-1); }

/* ---------- Work countdown (temporary, until the first projects) ----------
   A calm block in the middle of the page: the numbers alone, each named below
   with a small dot of a brand color, in the palette order (coral kept for
   actions). The dot is half the smallest circle on the circle scale. The date
   above leads. A new number rises into place from below. */
.cl-countdown-wrap { max-width: 56rem; margin-inline: auto; }
.cl-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
/* the date leads; its optical edge is set with all large type (inc/setup.php) */
.cl-countdown__lead { margin: var(--s-2) 0 var(--s-5); }
.cl-countdown__num {
  position: relative; display: block; overflow: hidden;
  padding-block: 0.12em;   /* room for the round digits, which dip just past the baseline */
  font-size: var(--cl-size-headline); font-weight: var(--cl-medium);
  line-height: 1; letter-spacing: var(--cl-track-headline); color: var(--cl-black);
  font-variation-settings: "opsz" var(--cl-opsz-display); font-variant-numeric: tabular-nums;
}
.cl-countdown__num > span { display: block; }
.cl-countdown__num > span + span { position: absolute; left: 0; top: 0.12em; }
.cl-countdown__label { margin-top: var(--s-2); display: flex; align-items: center; gap: var(--s-1); }
.cl-countdown__label::before {
  content: ""; flex: none; width: calc(var(--circle-s) / 2); height: calc(var(--circle-s) / 2); border-radius: 50%;
}
/* The same turn of colors as the hero pin, the preloader coin, and the lettering:
   coral, green, blue, yellow (then pink, which the four units do not reach) */
.cl-countdown__unit:nth-child(1) .cl-countdown__label::before { background: var(--cl-coral); }
.cl-countdown__unit:nth-child(2) .cl-countdown__label::before { background: var(--cl-green); }
.cl-countdown__unit:nth-child(3) .cl-countdown__label::before { background: var(--cl-blue); }
.cl-countdown__unit:nth-child(4) .cl-countdown__label::before { background: var(--cl-yellow); }
@media (max-width: 767px) {
  .cl-countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }
}

/* ---------- Project page ---------- */
.cl-project__head { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .cl-project__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .cl-project__head h1 { grid-column: 1 / span 7; }
  .cl-project__intro { grid-column: 8 / -1; }
}
.cl-project__services { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); }
.cl-project__cover { padding-inline: var(--pad); margin-bottom: var(--section); }
.cl-project__cover img { width: 100%; }
.cl-project__next { padding: 0 var(--pad) var(--section); }
.cl-project__next a { text-decoration: none; }
.cl-project__next a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }

/* ---------- Store preview (home) ---------- */
.cl-product-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gap); }
@media (min-width: 900px) { .cl-product-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cl-product-row a { display: block; text-decoration: none !important; }
.cl-product-row img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.8s var(--ease); }
.cl-product-row__media { display: block; position: relative; overflow: hidden; }
.cl-product-row__alt { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 0.45s var(--ease); }
@media (hover: hover) {
  .cl-product-row a:hover .cl-product-row__alt,
  .cl-product-row a:focus-visible .cl-product-row__alt { opacity: 1; }
}
@media (hover: none) { .cl-product-row__alt { display: none; } }
.cl-product-row a:hover .cl-product-row__name { text-decoration: underline; text-underline-offset: 0.2em; }
.cl-product-row__name { display: block; margin-top: var(--s-2); }
.cl-product-row__price { display: block; margin-top: 0.25rem; }

/* A glimpse of the lab on the home page: a row like the store row, each film
   with the lab card under it (Kind, Client, name), spaced as in the lab */
.cl-lab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gap); list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .cl-lab-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cl-lab-row a { display: block; color: inherit; text-decoration: none !important; }
.cl-lab-row__media { display: block; }
.cl-lab-row__media video, .cl-lab-row__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.cl-lab-row__kind, .cl-lab-row__client, .cl-lab-row__name { display: block; text-box: trim-both cap alphabetic; }
.cl-lab-row__kind { margin-top: var(--s-3); }
.cl-lab-row__client { margin-top: var(--s-3); }
.cl-lab-row__name { margin-top: var(--s-2); }
.cl-lab-row a:hover .cl-lab-row__name { text-decoration: underline; text-underline-offset: 0.2em; }
.cl-entry { scroll-margin-top: var(--s-7); }   /* opened from the home page: clear of the header */

/* ---------- Quick view ----------
   A flat white sheet over the page, shared by the store (a product) and the
   home page (a lab entry): the picture on the left, the words on the right.
   Square corners, a black line, no shadow. */
.cl-qv { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: var(--pad); }
.cl-qv[hidden] { display: none; }
.cl-qv__scrim { position: absolute; inset: 0; background: var(--cl-white); opacity: 0; transition: opacity 0.35s var(--ease); }
.cl-qv.is-open .cl-qv__scrim { opacity: 1; }   /* solid white: no ghosted store behind */
.cl-qv__panel {
  position: relative; width: min(60rem, 100%); max-height: calc(100vh - 2 * var(--pad));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--cl-white); border: var(--line);
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
.cl-qv.is-open .cl-qv__panel { opacity: 1; transform: none; }
.cl-qv__panel:focus { outline: none; }
body.cl-qv-open { overflow: hidden; }
.cl-qv[aria-busy="true"] .cl-qv__body { min-height: 24rem; }

.cl-qv__close { position: absolute; top: var(--s-1); right: var(--s-1); z-index: 2; width: 2.75rem; height: 2.75rem; background: var(--cl-white); border: 0; padding: 0; }
.cl-qv__close:hover { background: var(--cl-black); }
.cl-qv__close:hover .cl-cart__x::before, .cl-qv__close:hover .cl-cart__x::after { background: var(--cl-white); }

.cl-cart__x::before, .cl-cart__x::after {
  content: ""; position: absolute; left: 0.875rem; right: 0.875rem; top: calc(50% - 1px); height: 2px;
  background: var(--cl-black); transform: rotate(45deg);
}
.cl-cart__x::after { transform: rotate(-45deg); }

/* Phones: the sheet fills the screen */
@media (max-width: 599px) {
  .cl-qv { padding: 0; align-items: stretch; }
  .cl-qv__panel { max-height: none; height: 100%; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .cl-qv__panel { transition: opacity 0.2s linear; transform: none; } }
/* A Work entry in the quick view sheet: the piece on the left, its card,
   caption, and tools as on the Work page; no link out (the user's call) */
.cl-lab-qv .cl-qv__panel { width: min(64rem, 100%); }
.cl-lab-qv .cl-entry { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .cl-lab-qv .cl-entry { grid-template-columns: 1fr 1fr; align-items: start; } }
.cl-lab-qv .cl-entry__media { margin: var(--s-2); }
.cl-lab-qv .cl-entry__text { margin: 0; padding: var(--s-3) var(--s-4) var(--s-4); }
@media (min-width: 800px) { .cl-lab-qv .cl-entry__text { padding: var(--s-6) var(--s-4) var(--s-4) var(--s-2); } }
.cl-lab-qv .cl-entry__note { --hang: 0px; margin-left: 0; padding-left: var(--s-3); }   /* no gutter to hang into here: the paper stays in its column */

/* ---------- Call to action (coral, once per screen) ---------- */
.cl-cta .is-style-display a { display: inline-block; }
.cl-cta > * + * { margin-top: var(--s-4); }

/* ---------- Buttons ---------- */
.cl-button,
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  border: 1px solid var(--cl-black); border-radius: 0;
  background: var(--cl-black); color: var(--cl-white);
  font-size: var(--cl-size-ui); font-weight: var(--cl-medium); line-height: var(--cl-lead-ui);
  letter-spacing: var(--cl-track-ui); font-variation-settings: "opsz" var(--cl-opsz-text);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cl-button:hover, .wp-block-button__link:hover { background: var(--cl-white); color: var(--cl-black); }
.cl-button--coral { background: var(--cl-coral); color: var(--cl-black); border-color: var(--cl-coral); }
.cl-button--coral:hover { background: var(--cl-black); color: var(--cl-white); border-color: var(--cl-black); }
.cl-button--outline { background: transparent; color: var(--cl-black); }
.cl-button--outline:hover { background: var(--cl-black); color: var(--cl-white); }

/* ---------- Forms ---------- */
.cl-form { display: grid; gap: var(--s-3); max-width: 40rem; }
.cl-field { display: grid; gap: var(--s-1); }
.cl-field input, .cl-field textarea,
.cl-input {
  width: 100%; min-height: 3rem;
  font-size: max(1rem, var(--cl-size-body)); /* 16px+ so phones do not zoom */
  font-variation-settings: "opsz" var(--cl-opsz-text);
  padding: 0.75rem 0; border: 0; border-bottom: var(--line); border-radius: 0;
  background: transparent; color: var(--cl-black);
  transition: border-color 0.2s var(--ease);
}
.cl-field textarea { resize: vertical; min-height: 8rem; line-height: var(--cl-lead-body); }
.cl-field input:focus, .cl-field textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: calc(0.75rem - 1px); }
.cl-field input:focus-visible, .cl-field textarea:focus-visible { outline: none; }
.cl-form .cl-button { justify-self: start; margin-top: var(--s-2); }
.cl-hp { position: absolute !important; left: -9999px; }
.cl-form-error { background: var(--cl-yellow); display: inline-block; padding: 0.25rem 0.5rem; margin-bottom: var(--s-3); }
.cl-form-thanks:focus { outline: none; }

/* Contact page: details and form side by side */
.cl-contact { display: grid; gap: var(--s-6) var(--gap); }
@media (min-width: 900px) {
  .cl-contact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cl-contact > :first-child { grid-column: 1 / span 5; }
  .cl-contact > :last-child { grid-column: 7 / -1; }
}
.cl-contact > :first-child > * + * { margin-top: var(--s-5); }
.cl-details { display: grid; gap: var(--s-3); margin: 0; }
.cl-details dd { margin: 0.25rem 0 0; font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead); letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display); }
.cl-details a { text-decoration: none !important; }
.cl-details a:hover { text-decoration: underline !important; text-underline-offset: 0.18em; }

/* ---------- Footer ---------- */
.cl-footer {
  padding: var(--panel) var(--pad) var(--pad);
  display: grid; gap: var(--panel);   /* the footer's own rhythm: 48 / 96, from the scale */
}
.cl-footer__grid { display: grid; gap: var(--s-4) var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cl-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cl-footer__grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.cl-footer__label { margin-bottom: var(--s-1); }
.cl-footer a { text-decoration: none; }
.cl-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cl-footer__logo { display: block; color: var(--cl-white); }
.cl-footer__logo svg { width: 100%; height: auto; }

/* ---------- Reveal on scroll: one calm, flat fade ---------- */
.js .cl-reveal,
.js .cl-content > :not(.cl-hero),
.js .cl-page-head,
.js .cl-service { opacity: 0; transform: translateY(2.5rem); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .cl-reveal.is-visible,
.js .cl-content > .is-visible,
.js .cl-page-head.is-visible,
.js .cl-service.is-visible,
.js.cl-reveal-all .cl-reveal,
.js.cl-reveal-all .cl-content > *,
.js.cl-reveal-all .cl-page-head,
.js.cl-reveal-all .cl-service { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cl-reveal, .js .cl-content > *, .js .cl-page-head, .js .cl-service { opacity: 1; transform: none; }
}

/* ---------- Pagination ---------- */
.navigation.pagination { margin-top: var(--s-6); }
.nav-links { display: flex; gap: var(--s-2); }
.nav-links .current { background: var(--cl-yellow); padding-inline: 0.25rem; }

/* A portrait image sits in the content column, not full width */
.cl-content > .cl-image-portrait img { width: 100%; }
@media (min-width: 900px) {
  .cl-content > .cl-image-portrait {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  }
  .cl-content > .cl-image-portrait img { grid-column: 5 / span 5; }
}

/* ---------- Office clocks, right under the hero ---------- */
.cl-clocks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.cl-clock { display: grid; gap: 0.25rem; max-width: none; }
.cl-clock__time {
  font-size: var(--cl-size-lead); line-height: var(--cl-lead-lead);
  letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display);
}
.cl-content > .cl-hero + .cl-clocks { margin-top: var(--s-4); }

/* Policy links under the footer logo */
.cl-footer { row-gap: var(--s-4); }
.cl-footer__logo { margin-top: clamp(1rem, 4vw, 3rem); }
.cl-footer__policies { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }

/* WordPress adds a 24px gap between blocks in a flow layout. Inside our own
   grids the gap comes from the grid, so items keep no outer margin. */
.cl-services > *,
.cl-section > *,
.cl-contact > *,
.cl-media-pair > * { margin-block: 0; }

/* A section name and the first line of its text share one baseline */
@media (min-width: 900px) {
  .cl-section:not(.cl-section--stack) { align-items: baseline; }
}

/* ---------- Services page: open and close with + ---------- */
.cl-services--full .cl-service.is-collapsible {
  align-items: baseline;
  padding-block: 0;
  transition: background-color 0.3s var(--ease);
}
.cl-services--full .is-collapsible .cl-service__num { padding-top: 0; transition: background-color 0.3s var(--ease); justify-self: start; padding-inline: 0.25rem; margin-inline: -0.25rem; }
.cl-services--full .is-collapsible .cl-service__name,
.cl-services--full .is-collapsible .cl-service__panel { margin: 0; }   /* no WordPress block gap: the row stays balanced */
.cl-services--full .is-collapsible .cl-service__name { grid-column: 3 / -1; }
/* The name box is trimmed to its capitals, so the number circle and the + sit
   on the middle of the letters as the eye reads them, not of the line box */
.cl-service__label { text-box: trim-both cap alphabetic; }
@media (min-width: 900px) {
  .cl-services--full .is-collapsible .cl-service__name { grid-column: 2 / -1; }
}
/* Air above and below each service name, and below an open list: about twice
   the name, 64px on phones (rows a finger taps keep their room), 96px wider */
.cl-services--full { --row-air: var(--s-6); }
@media (min-width: 900px) { .cl-services--full { --row-air: var(--s-7); } }
.cl-service__toggle {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; padding-block: var(--row-air);   /* the same air above and below the name */
  font: inherit; letter-spacing: inherit; color: inherit;
}
.cl-service__toggle:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 4px; }

/* The +: two flat lines; the vertical one turns flat when open */
.cl-plus { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.cl-plus::before, .cl-plus::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px;
  background: var(--cl-black); transition: transform 0.35s var(--ease);
}
.cl-plus::after { transform: rotate(90deg); }
.is-open .cl-plus::after { transform: rotate(0deg); }

/* What each area covers: slides open */
.cl-services--full .is-collapsible .cl-service__panel {
  grid-column: 3 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
@media (min-width: 900px) {
  .cl-services--full .is-collapsible .cl-service__panel { grid-column: 2 / -1; }
}
.cl-services--full .is-collapsible .cl-service__panel > .cl-service__list {
  overflow: hidden; min-height: 0; margin: 0; padding: 0;
  color: var(--cl-ink-muted);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cl-services--full .is-open .cl-service__panel { grid-template-rows: 1fr; }
/* Open, the row keeps the same air at both ends: 48px from the top line to the
   capitals of the name, and 48px from the last line of the list (trimmed to its
   baseline) to the next line */
.cl-services--full .is-open .cl-service__panel > .cl-service__list { opacity: 1; padding-bottom: var(--row-air); text-box: trim-end cap alphabetic; }
.cl-services--full .cl-service__list li:last-child { padding-bottom: 0; }   /* lets the trim reach the last line */
/* The list hangs close under its name (24px), not a full row of air below it */
.cl-services--full .is-collapsible .cl-service__panel { transition-property: grid-template-rows, margin-top; }
.cl-services--full .is-open .cl-service__panel { margin-top: calc(var(--s-3) - var(--row-air)); }

/* Green comes in on hover and stays while open; the number is marked in yellow */
@media (hover: hover) {
  .cl-services--full .is-collapsible:hover { background: var(--cl-green-tint); }
}
.cl-services--full .is-collapsible.is-open { background: var(--cl-green-tint); }
.cl-services--full .is-open .cl-service__num { background: var(--cl-yellow); }
.cl-services--full .is-collapsible { margin-inline: calc(var(--s-2) * -1); padding-inline: var(--s-2); }
.cl-services--full .is-collapsible .cl-service__panel > .cl-service__list { grid-column: auto; }

/* ---------- Service numbers: small pink circles, like the pin ----------
   Pink is an accent for small shapes (Color System). Yellow stays the one
   marker, for the open service; green is kept for the Store panel below. */
.cl-services .cl-service__num,
.cl-services--full .is-collapsible .cl-service__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--circle-m); height: var(--circle-m); padding: 0; margin: 0;
  border-radius: 50%;
  background: var(--cl-pink); color: var(--cl-black);
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: background-color 0.3s var(--ease), transform 0.5s var(--ease);
}
.cl-services--compact .cl-service__num { margin-bottom: var(--s-2); }
.cl-services--full .is-collapsible .cl-service__num { align-self: center; justify-self: start; }
.cl-services--full .cl-service.is-collapsible { align-items: center; }
/* Open: the circle turns once, like the C, and is marked in yellow */
.cl-services--full .is-open .cl-service__num { background: var(--cl-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .cl-services--full .is-open .cl-service__num { transform: rotateY(360deg); }
}

/* ---------- The circle that follows the mouse (site.js) ----------
   Two sizes, on the circle scale (24px and 72px):
     dot   24px   follows the mouse
     view  72px   over an image that opens something: says "View"
   Over links, buttons and fields it steps aside.
   The C lives in the header and the first-visit coin only. */
.cl-pin {
  --pin-dot: var(--circle-s); --pin-view: var(--circle-l);
  --d: var(--pin-dot);
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.cl-pin.is-on { opacity: 1; }
.cl-pin[data-state="view"] { --d: var(--pin-view); }
/* Over links, buttons and fields the circle shrinks away: each has its own
   hover (an underline, or black), and a circle on top would cover or tint it */
.cl-pin[data-state="hide"] { --d: 0px; }
.cl-pin__face {
  position: absolute; left: 0; top: 0;
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; background: var(--cl-green);
  display: flex; align-items: center; justify-content: center;
  transition-property: width, height, margin, background-color, transform;
  transition-duration: 0.4s, 0.4s, 0.4s, 0.3s, 0.2s;
  transition-timing-function: var(--ease);
}

/* On color panels the circle changes so it stays visible, in palette colors only */
.cl-pin[data-tone="green"] .cl-pin__face { background: var(--cl-pink); }
.cl-pin[data-tone="coral"] .cl-pin__face { background: var(--cl-black); }

/* View: green with "View" in black (pink on the green panel, white on coral) */
.cl-pin[data-state="view"] .cl-pin__face { background: var(--cl-green); }
.cl-pin[data-state="view"][data-tone="green"] .cl-pin__face { background: var(--cl-pink); }
.cl-pin[data-state="view"][data-tone="coral"] .cl-pin__face { background: var(--cl-white); }
.cl-pin__label {
  position: absolute; opacity: 0;
  font-size: calc(var(--pin-view) * 0.22); font-weight: var(--cl-medium); line-height: 1;
  letter-spacing: 0; color: var(--cl-black);   /* circle rule 6 */
  font-variation-settings: "opsz" var(--cl-opsz-display);
  transition: opacity 0.25s var(--ease);
}
.cl-pin[data-state="view"] .cl-pin__label { opacity: 1; transition-delay: 0.12s; }

.cl-pin.is-down .cl-pin__face { transform: scale(0.85); }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cl-pin { display: none; }
}

/* ---------- On Our Desk: a sticky note torn from the studio pad ----------
   Brand yellow paper with black text only (yellow is a fill behind black
   text, and this is the one yellow note on the page), a torn top edge cut
   with clip-path, and a slight tilt, like a note left on the desk. */
.cl-desk {
  position: fixed; left: var(--pad); bottom: var(--pad); z-index: 60;
  width: min(21rem, calc(100vw - 2 * var(--pad)));
  background: var(--cl-yellow); color: var(--cl-black);
  padding: calc(var(--s-3) + 0.5rem) var(--s-3) var(--s-3);
  display: grid; gap: var(--s-2);
  clip-path: var(--cl-torn);
  transform-origin: 20% 100%;
  /* It slides up from below the screen, solid all the way: no fade, so the
     yellow never turns olive over a dark section */
  transform: translateY(calc(100% + var(--pad) + 2rem)) rotate(-1.5deg);
  transition: transform 0.7s var(--ease);
}
.cl-desk.is-in { transform: rotate(-1.5deg); }
.cl-desk[hidden] { display: none; }
.cl-desk__head { display: flex; align-items: center; gap: var(--s-1); }
.cl-desk__title { margin: 0; }
.cl-desk__close {
  margin-left: auto; width: 2.75rem; height: 2.75rem; margin-right: -0.75rem; margin-block: -0.75rem;
  background: none; border: 0; padding: 0; position: relative;
}
.cl-desk__x::before, .cl-desk__x::after {
  content: ""; position: absolute; left: 0.875rem; right: 0.875rem; top: calc(50% - 1px); height: 2px;
  background: var(--cl-black); transform: rotate(45deg);
}
.cl-desk__x::after { transform: rotate(-45deg); }
.cl-desk__lines { display: grid; gap: var(--s-2); margin: 0; }
.cl-desk__lines div { display: grid; gap: 0.125rem; }
.cl-desk__lines dd { margin: 0; }
.cl-desk__lines a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* A ruled line before the note, like the lines on a pad */
.cl-desk__note { border-top: var(--line); padding-top: var(--s-2); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .cl-desk, .cl-desk.is-in { transform: rotate(-1.5deg); transition: none; }
}

/* Phones: a slim note that floats inside the side gutters and above the
   bottom edge, clear of the rounded screen corners and the browser bar
   (the home indicator too, where the phone reports one) */
@media (max-width: 599px) {
  .cl-desk {
    left: var(--pad); right: var(--pad); width: auto;
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));   /* 32px: room for Safari's floating bar */
    padding: calc(var(--s-2) + 0.5rem) var(--s-2) var(--s-2);
  }
  .cl-desk { transform: translateY(calc(100% + var(--s-4) + 2rem + env(safe-area-inset-bottom, 0px))) rotate(-1deg); }
  .cl-desk.is-in { transform: rotate(-1deg); }
  .cl-desk__lines { display: none; }
  .cl-desk__note { border: 0; padding: 0; }
}
/* Text on a brand color is always black, labels included */
.cl-desk .cl-muted { color: var(--cl-black); }

/* Footer base: copyright, then the policies */
/* Footer base: the legal name and CR together on the left, policies on the right,
   both on the logo's edges. On phones: policies first, legal line last. */
.cl-footer__base { display: flex; flex-direction: column-reverse; gap: var(--s-3); }
.cl-footer__base p, .cl-footer__base li { margin: 0; font: inherit; letter-spacing: inherit; }  /* one size: the label role */
.cl-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }  /* same rhythm as the policy links */
@media (min-width: 640px) {
  .cl-footer__base { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .cl-footer__policies { justify-content: flex-end; }
}

/* ---------- Contact: the thank-you, on a yellow note ---------- */
.cl-note {
  background: var(--cl-yellow); color: var(--cl-black);
  padding: calc(var(--s-4) + 0.5rem) var(--s-4) var(--s-4);
  clip-path: var(--cl-torn);
  max-width: 30rem;
  transform: rotate(-1.5deg); transform-origin: 20% 100%;
  display: grid; gap: var(--s-2);
}
.cl-note p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cl-note { animation: cl-note-in 0.7s var(--ease) both; }
}
@keyframes cl-note-in {
  from { opacity: 0; transform: translateY(-1.5rem) rotate(2deg); }
  to { opacity: 1; transform: rotate(-1.5deg); }
}

/* ---------- 404: a yellow note on the studio door ----------
   Brand yellow behind black text only, the one yellow thing on the page. */
.cl-404 { padding: var(--panel) var(--pad) var(--section); }
.cl-404__door { display: grid; gap: var(--s-6); justify-items: start; }
.cl-note--door {
  max-width: 34rem; width: 100%;
  padding: calc(var(--s-5) + 0.75rem) var(--s-5) var(--s-5);
  gap: var(--s-3);
}
.cl-note--door h1 { margin: 0; }
.cl-404__after > * + * { margin-top: var(--s-3); }
.cl-404__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.cl-404__links a { text-decoration: none; }
.cl-404__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Smooth scrolling (GSAP ScrollSmoother) ----------
   The header and anything fixed sit outside the smooth wrapper. Without
   scripts, the wrappers are plain blocks and the page scrolls natively. */
#smooth-content { display: flex; flex-direction: column; min-height: 100vh; }
#smooth-content > .cl-main { flex: 1; padding-top: var(--header-h); }

/* ---------- The coin: the first-visit preloader ----------
   A white curtain with the pin turning like a coin. At each edge-on moment
   its face changes, in the brand order, like the 3D element in the hero. */
.cl-curtain {
  position: fixed; inset: 0; z-index: 200;
  background: var(--cl-white);
  display: flex; align-items: center; justify-content: center;
  perspective: 600px;
  visibility: hidden; pointer-events: none;
}
html.cl-preload .cl-curtain,
.cl-curtain.is-on { visibility: visible; pointer-events: auto; }
.cl-coin {
  width: var(--circle-l); height: var(--circle-l); border-radius: 50%;
  background: var(--cl-coral); color: var(--cl-black);   /* the hero video opens on coral */
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.cl-coin svg { width: calc(var(--circle-l) * var(--pin-c)); height: auto; }   /* the pin's C, see --pin-c */
@media (prefers-reduced-motion: reduce) { .cl-curtain { display: none; } }

/* With GSAP, reveals are tweened by script; no CSS transition in the way.
   The selectors mirror the hiding rule above one for one (same weight, later
   in the file), or that rule would keep its transition and fight the script. */
.has-gsap .cl-reveal,
.has-gsap .cl-content > :not(.cl-hero),
.has-gsap .cl-page-head,
.has-gsap .cl-service { transition: none; }
.has-gsap .cl-services--full .cl-service.is-collapsible { transition: background-color 0.3s var(--ease); }

/* ---------- Page transitions: a flat yellow sheet ----------
   Brand yellow with straight, sharp edges wipes in from the left when you
   leave and carries on to the right when the next page opens, the way we read. The coin stays for
   the first visit only. */
/* The sheet runs under the header (z 50), so the white header with the logo
   and menu stays put and the top edge of the window is always white. Safari 26
   tints its toolbar with whatever fixed color sits at that edge; a yellow sheet
   there made the toolbar snap back to white, upward and sideways alike. */
.cl-sheet {
  position: fixed; inset: 0; z-index: 49;
  background: var(--cl-yellow);
  visibility: hidden; pointer-events: none;
  will-change: transform;
}
/* The sheet never takes pointer events, even while it shows. Safari 26 tints
   its toolbar with the color of a fixed element it finds at the top edge, by
   hit testing; a sheet that takes pointer events turns the toolbar yellow, then
   it snaps back to white once the sheet leaves. Without pointer events Safari
   keeps reading the white header. Clicks during the wipe are guarded in JS. */
html.cl-arrive .cl-sheet,
.cl-sheet.is-on { visibility: visible; }
/* While the page changes, the header stays in view and the desk note steps aside */
html.cl-leaving .cl-header, html.cl-arrive .cl-header { transform: none !important; }
html.cl-leaving .cl-desk { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cl-sheet { display: none; } }


/* Contact form: the privacy line under Send */
.cl-form__privacy { margin: 0; }
.cl-form__privacy a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Same edge fix for the store row on the home page and work tiles */
.cl-product-row__media img { transform: scale(1.01); backface-visibility: hidden; }
.cl-tile__media img { backface-visibility: hidden; transform: scale(1.01); }
.cl-tile__link:hover .cl-tile__media img { transform: scale(1.03); }

/* ---------- Home feature: caption left, lettering right ----------
   The whole feature sits on a black panel, as on Instagram: the lettering's fine
   lines are cut out of the letters, so they need a dark surface, and the caption
   shares it so the two read as one block. White on black is the one place white
   is allowed; the letters can also take any brand color. */
.cl-feature {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5) var(--gap); align-items: center;
}
@media (min-width: 900px) {
  .cl-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cl-feature > .cl-feature__copy { grid-column: 1 / span 6; }
  .cl-feature > .cl-lettering { grid-column: 7 / -1; }
}
.cl-feature > * { margin-block: 0; }
.cl-feature__text { max-width: 22em; }
.cl-feature__copy > * + * { margin-top: var(--s-2); }
/* The label is a touch bigger than other labels: the header menu size, 16px */
.cl-feature__copy > .is-style-label {
  /* Green on the black panel: the brand color, the one label on the site that
     carries color. */
  color: var(--cl-green);
  /* The Lead role (20 to 24px, Regular), the same as the clock times above it
     and the line under the Store headline: larger, but still light */
  font-size: var(--cl-size-lead); font-weight: var(--cl-regular); line-height: var(--cl-lead-lead);
  letter-spacing: var(--cl-track-lead); font-variation-settings: "opsz" var(--cl-opsz-display);
}

/* The lettering takes the same 6 columns as the caption, edge to edge, so the
   two halves mirror each other; its height follows the artwork's own shape. */
.cl-lettering {
  margin: 0; background: var(--cl-black); color: var(--cl-white);
  transition: color 0.45s var(--ease);
}
.cl-lettering svg { display: block; width: 100%; height: auto; }
/* Revealed right to left, the way Arabic is read */
.js .cl-lettering svg { clip-path: inset(0 0 0 100%); }
.js .cl-lettering.is-drawn svg { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .cl-lettering svg { clip-path: none; } }



/* ---------- Sale: a coin and a crossed-out price ----------
   A yellow coin in the corner of the photo, "20%" over "Off": the shape of
   our pin and of the coin that opens the site, and it turns in the same way
   when it comes into view. Pointing at the piece spins it once. The old price
   is crossed out with a thin coral line. Flat colors, no fades. */
.cl-card__media, .cl-product-row__media, .cl-gallery, .cl-qv__main { position: relative; }
.cl-sale {
  --coin: var(--circle-l);
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2;
  width: var(--coin); height: var(--coin); border-radius: 50%;
  display: grid; place-content: center; justify-items: center; row-gap: 0.15em;
  text-align: center;
  background: var(--cl-yellow); color: var(--cl-black);
  pointer-events: none;
}
.cl-gallery > .cl-sale, .cl-qv__main > .cl-sale { --coin: var(--circle-xl); top: var(--s-3); right: var(--s-3); }
/* Phones: cards sit two across, so the card coin steps down one size (L to M);
   the text never goes under 14px */
@media (max-width: 599px) {
  .cl-card__media > .cl-sale, .cl-product-row__media > .cl-sale { --coin: var(--circle-m); top: var(--s-1); right: var(--s-1); }
}
/* "20%" over "Off", one size and one weight, both on the same
   center line. No letter-spacing (it adds space after the last letter and
   pulls a word off center), and each line is trimmed to its cap height so the
   pair sits in the optical middle of the coin, not the middle of line boxes. */
.cl-sale__num, .cl-sale__off { display: block; line-height: 1; letter-spacing: 0; text-box: trim-both cap alphabetic; }
.cl-sale { row-gap: calc(var(--coin) * 0.07); }
/* Optical center: the % sign is light on its right, so "20%" carries its
   weight about 0.07em left of its box (measured on the glyphs); move it right
   by that much so it lines up with "Off" by eye, not just by box. */
/* Coin type, one rule for every coin (circle rule 6): both lines at 22% of
   the coin, never under 14px, in one weight, Medium. Same size coin, same size type. */
.cl-sale__num, .cl-cart-coin__num,
.cl-sale__off, .cl-cart-coin__label { font-size: max(0.875rem, calc(var(--coin) * 0.22)); font-weight: var(--cl-medium); font-variation-settings: "opsz" var(--cl-opsz-display); }
.cl-sale__num { transform: translateX(0.04em); }   /* optical: the % sign is light on its right */
/* Sold out: the same coin in black with white words (white sits only on black);
   words, not a number, so no optical shift */
.cl-sale--out { background: var(--cl-black); color: var(--cl-white); }
/* Few left: the same coin in pink, a soft accent, with black words. Not coral:
   the product page already has its one coral surface, the Add to Cart button */
.cl-sale--few { background: var(--cl-pink); color: var(--cl-black); }
.cl-sale--out .cl-sale__num, .cl-sale--few .cl-sale__num { transform: none; }
.cl-sale--few .cl-sale__off { transform: translateX(-0.03em); }   /* optical: "Left" is heavy on its left stem */
/* and down: "20%" is the wide, heavy line on top, so the pair steps down a touch */
.cl-sale:not(.cl-sale--out):not(.cl-sale--few) > .cl-sale__num,
.cl-sale:not(.cl-sale--out):not(.cl-sale--few) > .cl-sale__off { translate: 0 0.04em; }
.js .cl-sale { visibility: hidden; }
.js .cl-sale.is-stuck { visibility: visible; animation: cl-coin-in 0.7s var(--ease) both; }
@keyframes cl-coin-in {
  0%   { transform: perspective(400px) rotateY(90deg); }
  100% { transform: perspective(400px) rotateY(0deg); }
}
/* Badges turn in once when they arrive, and stay still after: a turn means
   something arrived or changed, never decoration (see the circle rules). */

/* The old price in coral, crossed out by a thin coral line that stays exactly
   on the text (the browser's own line-through, so it sits on the numbers).
   Coral on white is light (2.2:1), which suits a price that no longer counts;
   screen readers hear "Original price was" from WooCommerce. */
.price del, .cl-product-row__price del {
  color: var(--cl-coral); margin-right: 0.4em;
  text-decoration: line-through; text-decoration-color: var(--cl-coral);
  text-decoration-thickness: 1.5px;
}
/* On a brand color, text is black: the old price is crossed out in black */
.is-style-panel-green .cl-product-row__price del { color: var(--cl-black); text-decoration-color: var(--cl-black); }
.price ins { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cl-sale, .js .cl-tool { visibility: visible; animation: none !important; }
}

/* ---------- Back to top ----------
   Near the end of a long page, a green coin turns in at the bottom right, the
   same coin as the pin and the mouse circle, with a black arrow. One click
   takes you to the top. It sits on the right, clear of the On Our Desk note. */
/* One fixed place on every page. Its center sits on the same vertical line as
   the cart coin above it (the coin is a step larger), so the two stack neatly. */
.cl-top {
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: 61;
  width: var(--circle-l); height: var(--circle-l); border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--cl-green); color: var(--cl-black); cursor: pointer;
  font-size: var(--cl-size-subhead); font-weight: var(--cl-medium); line-height: 1;
  font-variation-settings: "opsz" var(--cl-opsz-display);
  transform: perspective(400px) rotateY(90deg);
  transition: transform 0.45s var(--ease), background-color 0.2s var(--ease);
}
.cl-top[hidden] { display: none; }
.cl-top.is-in { transform: perspective(400px) rotateY(0deg); }
.cl-top.is-in:active { transform: perspective(400px) rotateY(0deg) scale(0.95); }   /* a button gives a little when pressed */
.cl-top.is-on-green { background: var(--cl-black); color: var(--cl-white); }
.cl-top__arrow { display: block; width: calc(var(--circle-l) / 3); height: calc(var(--circle-l) / 3); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.cl-top:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 3px; }
/* On pages long enough to have the button, the footer keeps a row of room
   under its last line, so the coin never sits on the policy links. */
html.has-top .cl-footer { padding-bottom: calc(var(--pad) + var(--circle-l) + var(--s-3)); }
/* On phones the On Our Desk note runs along the bottom: the coin sits above it
   (same breakpoint as the note's phone layout) */
@media (max-width: 599px) {
  .cl-top { transition: transform 0.45s var(--ease), background-color 0.2s var(--ease), bottom 0.4s var(--ease); }
  html.desk-open .cl-top { bottom: calc(var(--desk-h, 0px) + var(--s-2)); }
}
@media (prefers-reduced-motion: reduce) { .cl-top { transition: none; } }

/* ---------- The cart coin (store only) ----------
   A blue coin in the bottom right: the L circle, the same size as the sale
   coin on a card, with the number of pieces over the word Cart, set with the
   same coin type. Blue is the cart's own color, shown only when it holds
   something, "now and then" as the Color System asks of blue. It shows once a piece is in
   the cart, turns in like the opening coin (again each time the cart changes),
   and opens the cart note. The header bar stays the same as the site's. */
.cl-cart-coin {
  --coin: var(--circle-l);
  position: fixed; right: var(--pad); bottom: calc(var(--pad) + var(--circle-l) + var(--s-2)); z-index: 62;   /* always above the back-to-top place */
  width: var(--coin); height: var(--coin); border-radius: 50%; border: 0; padding: 0;
  display: grid; place-content: center; justify-items: center; row-gap: calc(var(--coin) * 0.07);
  background: var(--cl-blue); color: var(--cl-black); cursor: pointer;
  animation: cl-coin-in 0.7s var(--ease) backwards;   /* backwards: once in, the press can scale it */
  transition: transform 160ms var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cl-cart-coin[hidden] { display: none; }
.cl-cart-coin:active { transform: scale(0.95); }
.cl-cart-coin:focus-visible { outline: 2px solid var(--cl-black); outline-offset: 3px; }
.cl-cart-coin__num, .cl-cart-coin__label { display: block; line-height: 1; letter-spacing: 0; text-box: trim-both cap alphabetic; translate: 0 -0.12em; }   /* optical: the wide "Cart" under a narrow figure carries the weight low */
/* With the cart coin showing, the footer keeps room under its last line for both coins */
html.has-cart-coin .cl-footer { padding-bottom: calc(var(--pad) + var(--circle-l) + var(--s-2) + var(--circle-l) + var(--s-3)); }
html.cl-leaving .cl-cart-coin { visibility: hidden; }
/* Yellow on every round button (circle rule 3), the same on web and phone.
   With a mouse: yellow while pointed at. On a touch screen there is no pointing,
   and a hover would stick after the tap, so there it is yellow only while the
   finger is down, together with the 95% press. One list, so no button is left out. */
/* Yellow is a flat color, so it never fades: a fade from yellow to black or
   blue runs through muddy in-between colors that are not on the palette
   (measured: olive and brown for 0.7s, and the full yellow showed for one
   frame only on a tap). It switches at once, both ways.
   Web: yellow for as long as the mouse points at it.
   Phone, the same: yellow the moment the finger lands, gone the moment it
   lifts (a very quick tap still shows it 0.15s). The class comes from
   site.js, since the browser's own :active arrives late on a touch screen. */
.cl-cart-coin, .cl-tool { transition: transform 160ms var(--ease); }
.cl-top { transition: transform 0.45s var(--ease), bottom 0.4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cl-top:hover, .cl-cart-coin:hover, .cl-tool:hover { background: var(--cl-yellow); color: var(--cl-black); }
  .cl-top:hover .cl-top__arrow { transform: translateY(-0.15em); }
}
.cl-top.is-pressed, .cl-cart-coin.is-pressed, .cl-tool.is-pressed { background: var(--cl-yellow); color: var(--cl-black); }
.cl-cart-coin.is-pressed, .cl-tool.is-pressed { transform: scale(0.95); }
.cl-top.is-in.is-pressed { transform: perspective(400px) rotateY(0deg) scale(0.95); }
@media (prefers-reduced-motion: reduce) { .cl-cart-coin { animation: none; } }