/* ============================================================
   Me-At-Home Art
   One hand-written stylesheet. Tokens are the approved design plan:
   plaster wall, moss, resin, and a single gleam of light.
   Nothing here is a framework and nothing is generated.
   ============================================================ */

/* ---- fonts, self hosted, Cyrillic and Latin subsets only ---- */

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/golos-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kurale';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kurale-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Kurale';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/kurale-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* The gleam angle has to be a registered property, otherwise it cannot
   interpolate and the signature element would jump instead of turning. */
@property --gleam-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 22deg;
}

/* ---- tokens ---- */

:root {
  --plaster: #EDEFE8;
  --paper: #F8F9F4;
  --ink: #16211B;
  --ink-soft: #4A574E;
  --moss: #4B6A49;
  --moss-dark: #3E5A3C;
  --resin: #124B50;
  --gleam: #C9B27A;

  --line: rgba(22, 33, 27, 0.14);
  --shadow-panel: 0 2px 6px rgba(22, 33, 27, 0.10), 0 26px 44px -14px rgba(22, 33, 27, 0.26);
  --shadow-card: 0 1px 3px rgba(22, 33, 27, 0.06), 0 18px 34px -20px rgba(22, 33, 27, 0.22);

  --font-display: 'Kurale', Georgia, 'Times New Roman', serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* One typeface and one size for every heading, large or small (the client's
     rule of 6 Sep 2026). Hierarchy comes from space and colour, not from size. */
  --h-size: clamp(1.5rem, 3.2vw, 2.15rem);
  /* Titles under a photograph or on a card are labels, not headings, and
     share one smaller size between them. */
  --title-size: 1.15rem;

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 20px;
  --step: clamp(3.5rem, 9vw, 7rem);
}

/* ---- reset, only what is needed ---- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

h1, h2, h3, h4, .h-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h-size);
  line-height: 1.22;
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--resin); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--moss-dark); }

button { font: inherit; }

/* ---- focus, visible everywhere ---- */

:focus-visible {
  outline: 2px solid var(--resin);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On top of a photograph a single ring can disappear, so double it. */
a:focus-visible .panel img,
button:focus-visible img {
  outline: 3px solid var(--paper);
  outline-offset: -7px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--plaster);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 12px 0;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---- layout ---- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; padding-bottom: var(--step); }

.band { padding-block: var(--step); }
.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.h-section--light { color: var(--paper); }

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}
.eyebrow a { color: inherit; }

.lede {
  font-size: clamp(1.05rem, 2.1vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38em;
}

.link-more {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}

.muted { color: var(--ink-soft); }

/* ---- header ---- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(237, 239, 232, 0.88);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
/* Her logo is a white line drawing on charcoal, so it keeps its own dark tile
   rather than being recoloured to sit on the plaster. */
.mark-tile {
  flex: none;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(22, 33, 27, 0.2);
  display: block;
}
.mark-text { display: flex; flex-direction: column; line-height: 1.1; }
.mark-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.mark-sub {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 0.15rem;
}

.site-nav ul { display: flex; gap: clamp(0.85rem, 2vw, 1.6rem); align-items: center; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.35rem 0;
  border-bottom: 1.5px solid transparent;
}
.site-nav a { transition: border-color 0.25s ease, color 0.25s ease; }
@media (min-width: 881px) {
  .site-nav li { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site-nav li:nth-child(2) { animation-delay: 0.08s; }
  .site-nav li:nth-child(3) { animation-delay: 0.16s; }
  .site-nav li:nth-child(4) { animation-delay: 0.24s; }
  .site-nav li:nth-child(5) { animation-delay: 0.32s; }
}
.site-nav a:hover { border-bottom-color: var(--moss); }
.site-nav a[aria-current='page'] { border-bottom-color: var(--gleam); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle-bars {
  width: 18px;
  height: 2px;
  background: var(--ink);
  position: relative;
  border-radius: 2px;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle-text {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  /* Only collapse the menu when JavaScript is there to reopen it. */
  .has-js .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    box-shadow: var(--shadow-card);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .has-js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
}

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease,
    transform 0.22s ease, box-shadow 0.22s ease;
}
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 35%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after { animation: sheen 0.7s ease-out forwards; }
@keyframes sheen { to { transform: translateX(460%) skewX(-18deg); } }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgba(22, 33, 27, 0.5); }
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: 0.08s; }
.btn--primary { background: var(--moss); color: #fff; }
.btn--primary:hover { background: var(--moss-dark); color: #fff; }
.btn--ghost { border-color: var(--moss); color: var(--moss); background: transparent; }
.btn--ghost:hover { background: rgba(75, 106, 73, 0.09); color: var(--moss-dark); }
.btn--gleam { background: var(--gleam); color: var(--ink); }
.btn--gleam:hover { background: #d8c48f; color: var(--ink); }
.btn--small { padding: 0.5rem 1rem; font-size: 0.75rem; }

/* ============================================================
   The signature element: the resin gleam.
   Every circular panel carries one crescent of light on its upper
   right rim. It is the only thing on this site that moves.
   ============================================================ */

.panel {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
  /* The shadow belongs to the mask, not the photo, now that the photo is
     scaled up inside it. */
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease;
}
/* A piece lifts off the wall under the pointer, the shadow deepens with it. */
.wall-item a:hover .panel,
.journal-item a:hover .panel {
  transform: translateY(-14px) rotate(-2deg) scale(1.02);
  box-shadow: 0 6px 14px rgba(22, 33, 27, 0.14), 0 48px 70px -18px rgba(22, 33, 27, 0.4);
}
.wall-item a:hover .wall-meta { transform: translateY(-4px); }
.wall-meta { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Her photographs frame the piece with a margin of pale wall around it and
     the piece sitting a little above centre. She wants the piece to fill the
     circle completely, so the photo is zoomed until the rim of the piece meets
     the edge of the mask and nudged down to recentre it. Measured on her three
     photographs; a tighter crop uploaded later simply shows a little more rim. */
  transform: scale(1.44) translateY(9%);
}
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from var(--gleam-angle),
    rgba(201, 178, 122, 0) 0deg,
    rgba(201, 178, 122, 0) 8deg,
    var(--gleam) 27deg,
    rgba(201, 178, 122, 0) 54deg,
    rgba(201, 178, 122, 0) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 3px));
  mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 3px));
  /* Not screen blending. Screen brightens, so against the pale wall in her
     photographs the crescent vanished completely. Gold at normal blending is a
     mid tone: it reads on the dark green of a mossy piece and on pale plaster
     alike, which is the only way this element survives real photography. */
  opacity: 0.85;
  pointer-events: none;
}
.panel--empty {
  background:
    radial-gradient(circle at 38% 30%, #6E8A5E 0%, #4B6A49 58%, #2F4A3A 100%);
  border-radius: 50%;
  box-shadow: var(--shadow-panel);
  width: 100%;
}

/* As the wall scrolls past, the light in the room moves with you. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel::after {
      animation: gleam-turn 1s linear both;
      animation-timeline: view();
    }
  }
}
@keyframes gleam-turn {
  from { --gleam-angle: 12deg; }
  to { --gleam-angle: 34deg; }
}

/* ---- hero ---- */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--step);
  position: relative;
  overflow: hidden;
}
/* Two soft pools of light drift slowly behind the hero, moss and resin, so the
   wall is never a flat colour even while nothing else is moving. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  /* Own layer: the blur is rasterized once and only the transform animates. */
  will-change: transform;
}
/* A phone gets the light but not the drift: the blur is expensive there. */
@media (max-width: 720px) {
  .hero::before, .hero::after { animation: none; filter: blur(40px); }
}
.hero::before {
  width: 42vw;
  height: 42vw;
  right: -8vw;
  top: -12vw;
  background: radial-gradient(circle, rgba(201, 178, 122, 0.55), rgba(201, 178, 122, 0) 70%);
  animation: drift-a 14s ease-in-out infinite alternate;
}
.hero::after {
  width: 36vw;
  height: 36vw;
  left: -10vw;
  bottom: -14vw;
  background: radial-gradient(circle, rgba(75, 106, 73, 0.4), rgba(18, 75, 80, 0) 70%);
  animation: drift-b 18s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-12vw, 10vw) scale(1.25); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(14vw, -8vw) scale(1.15); }
}
.hero-inner { position: relative; z-index: 1; }
.hero-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* The display face has no bold and every heading is one size, so hierarchy is
   colour and space. That makes the gap under the heading load bearing. */
.hero-copy h1 { margin-bottom: 1.15rem; max-width: 26em; }
.notfound h1 { margin-bottom: 1.15rem; }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.hero-facts li { display: flex; align-items: center; gap: 0.55rem; }
.hero-facts .icon { width: 22px; height: 22px; color: var(--moss); flex: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.hero-panel { position: relative; perspective: 1000px; }
/* Resin catches the light: on a desktop the hero piece tilts toward the
   pointer (site.js sets the transform), never on touch screens. */
.hero-panel .panel {
  transform-style: preserve-3d;
  will-change: transform;
  --sheen-x: 50%;
  --sheen-y: 50%;
}
/* A soft highlight that follows the pointer across the resin surface. */
.hero-panel .panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  background: radial-gradient(circle at var(--sheen-x) var(--sheen-y), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
  transition: background 0.15s linear;
}
/* And when nobody is touching it, the piece breathes: a slow rise and fall. */
.hero-link { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
/* The hero light also sweeps on its own, so the gleam is alive before any scroll. */
.hero-panel .panel::after { animation: gleam-sweep 9s ease-in-out infinite alternate; }
@keyframes gleam-sweep {
  from { --gleam-angle: 4deg; }
  to { --gleam-angle: 52deg; }
}

/* ---- motion: entrance and scroll reveal ----
   Everything below is decoration. Without JavaScript nothing is hidden, and
   under prefers-reduced-motion it is all switched off at the end of the file. */

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes bloom {
  from { opacity: 0; transform: scale(0.82) rotate(-6deg) translateY(30px); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.hero-copy > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.1s; }
.hero-copy > :nth-child(3) { animation-delay: 0.2s; }
.hero-copy > :nth-child(4) { animation-delay: 0.3s; }
.hero-copy > :nth-child(5) { animation-delay: 0.4s; }
.hero-panel { animation: bloom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }

/* Scroll reveal. The same selector list lives in site.js, which adds .is-in as
   each element enters the viewport. The delayed keyframe is a safety net: if
   the script never runs, everything is visible 2.5 seconds after load. */
@keyframes reveal-safety { to { opacity: 1; transform: none; } }
.has-js .what-item,
.has-js .wall-item > a,
.has-js .post-list > li,
.has-js .journal-item,
.has-js .steps-list > li,
.has-js .contact-card,
.has-js .band-head,
.has-js .band--what .h-section,
.has-js .commission-inner > *,
.has-js .cta-inner,
.has-js .product-desc > .h-section,
.has-js .inquiry-inner > .h-section,
.has-js .article-cover,
.has-js .article-video,
.has-js .closeup-note {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
  animation: reveal-safety 0.01s linear 2.5s forwards;
}
.has-js .closeup-note { transform: translateY(24px); }
/* Important, because the per-element rules above are more specific than this
   one and would otherwise keep a revealed element at opacity 0 forever. */
.has-js .is-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none;
}
.hero-link { display: block; text-decoration: none; color: inherit; }
.hero-caption {
  display: block;
  margin-top: 1.25rem;
  text-align: center;
}
.hero-caption-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--title-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-caption-meta {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
  .hero-panel { justify-self: end; width: min(100%, 33rem); }
}

/* ---- what is stabilized moss ---- */

.band--what { background: var(--paper); }
.what-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.what-item {
  background: var(--plaster);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease;
}
.what-item:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(22, 33, 27, 0.08), 0 32px 48px -20px rgba(22, 33, 27, 0.3); }
.what-item .detail { aspect-ratio: 3 / 2; }
.what-item:hover .detail img { transform: var(--crop-transform) scale(1.08); }
.what-item h3 { margin: 1.25rem 1.5rem 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.what-icon { width: 28px; height: 28px; color: var(--moss); flex: none; }
.what-item p { color: var(--ink-soft); margin: 0 1.5rem 1.5rem; }

/* ---- detail crops of her photographs ----
   The photograph is scaled up inside a fixed box, so a corner of the piece
   becomes a texture: water, moss, shore, rim. The transform is a variable so
   a hover can zoom a little further without knowing which crop it is. */
.detail {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.detail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: var(--crop-transform);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.crop-water { --crop-transform: scale(2.4) translate(-16%, -22%); }
.crop-moss  { --crop-transform: scale(2.6) translate(4%, 14%); }
.crop-shore { --crop-transform: scale(2.2) translate(14%, -6%); }
.crop-edge  { --crop-transform: scale(2.1) translate(12%, 10%); }

/* ---- the close-up strip: a slow, endless walk along the pieces ---- */

.band--closeup { background: var(--ink); color: var(--plaster); overflow: hidden; }
.band--closeup .h-section { color: var(--paper); }
.closeup-note { color: rgba(237, 239, 232, 0.72); max-width: 34em; margin: 0; }
.strip { overflow: hidden; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.strip-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
  animation: strip-walk 48s linear infinite;
}
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes strip-walk {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.strip-tile {
  display: block;
  width: clamp(14rem, 24vw, 22rem);
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.strip-tile .detail { aspect-ratio: 1; border-radius: 14px; }
.strip-tile:hover .detail img { transform: var(--crop-transform) scale(1.1); }
.strip-tile:focus-visible { outline-offset: 3px; }
@media (min-width: 760px) {
  .what-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   The hanging wall. Circles at varied heights, never boxed.
   ============================================================ */

.wall {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.wall-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wall-meta { display: block; margin-top: 1.1rem; text-align: center; }
/* Piece names are set in capitals, the way the client writes them. */
.wall-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-title { text-transform: uppercase; letter-spacing: 0.05em; }
.wall-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}
.wall-item a:hover .wall-title { color: var(--moss-dark); }

/* Phone: one column, with a small alternating nudge so the scroll has rhythm */
@media (max-width: 719px) {
  .wall-item { width: 82%; }
  .wall-item:nth-child(odd) { margin-inline: 0 auto; }
  .wall-item:nth-child(even) { margin-inline: auto 0; }
}

@media (min-width: 720px) {
  .wall { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .wall-item { grid-column: span 4; }
  /* Hand-hung, not gridded. Deterministic, so it never reflows oddly. */
  .wall-item:nth-child(3n + 2) { transform: translateY(-2.5rem); }
  .wall-item:nth-child(3n) { transform: translateY(1.4rem); }
}

/* ---- commissions band ---- */

.band--commission { background: var(--ink); color: var(--plaster); position: relative; overflow: hidden; }
.commission-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.32;
}
.commission-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
  transform: scale(1.05);
  will-change: transform;
  animation: kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.05) translate(0, 0); }
  to { transform: scale(1.22) translate(-3%, 3%); }
}
.commission-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 33, 27, 0.92) 0%, rgba(22, 33, 27, 0.55) 60%, rgba(22, 33, 27, 0.35) 100%);
}
.commission-inner { position: relative; z-index: 1; }
.band--commission p { color: rgba(237, 239, 232, 0.82); }
.commission-inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
.commission-inner > div > p:first-of-type { max-width: 38em; margin-top: 1rem; }
.commission-note {
  font-size: 0.9rem;
  color: var(--gleam) !important;
  border-left: 2px solid var(--gleam);
  padding-left: 1rem;
}
@media (min-width: 860px) {
  .commission-inner { grid-template-columns: 1.6fr 1fr; }
}

/* ---- cta band: see the second pass block near the end of the file ---- */

/* ---- breadcrumbs ---- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumbs a:hover { color: var(--moss-dark); }
.crumbs-sep { opacity: 0.45; }

/* ---- page heads, catalogue chrome ---- */

.page-head { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem); }
.page-head h1 { max-width: 22em; }
.page-head .lede, .page-intro { margin-top: 1rem; }
.count {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--ink);
}
.chip:hover { border-color: var(--moss); color: var(--moss-dark); }
.chip.is-on { background: var(--moss); border-color: var(--moss); color: #fff; }

.sorter { display: flex; align-items: center; gap: 0.6rem; }
.sorter label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  font-weight: 600;
}
select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.pager {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: var(--step);
}
.pager a {
  min-width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.pager a:hover { border-color: var(--moss); }
.pager a.is-on { background: var(--ink); color: var(--plaster); border-color: var(--ink); }

.empty {
  padding: clamp(2rem, 6vw, 4rem);
  background: var(--paper);
  border-radius: var(--radius);
  text-align: center;
  color: var(--ink-soft);
}

/* ---- product ---- */

.product {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .product { grid-template-columns: 1fr 1fr; }
  .product-media { position: sticky; top: 6rem; }
}

/* Further photographs of the piece: plain squares under the circle, on the
   client's instruction. Each opens the full size file in a new tab. */
.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.photo {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.photo:hover img { transform: scale(1.04); }

/* A maker's dimension line, not a decorative rule. */
.dimension {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.dimension-line { flex: 1; height: 1px; background: currentColor; opacity: 0.4; position: relative; transform-origin: left; animation: draw 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dimension-line::before,
.dimension-line::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: currentColor;
}
.dimension-line::before { left: 0; }
.dimension-line::after { right: 0; }

.price {
  font-family: var(--font-display);
  font-size: var(--h-size);
  margin: 0.75rem 0 1.25rem;
}
.price-alt { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft); }

.specs {
  margin: 1.75rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1.5rem;
  font-size: 0.95rem;
}
.specs dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 600;
  padding-top: 0.15rem;
}
.specs dd { margin: 0; }

.product-actions { margin: 1.75rem 0 1rem; }
.delivery {
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 1rem 1.25rem;
  border-radius: 16px;
}

.product-desc { padding-block: var(--step) 0; max-width: 40em; }
.product-desc .rich { margin-top: 1.5rem; }

/* ---- rich text from the editor ---- */

.rich { max-width: 44em; }
.rich > *:first-child { margin-top: 0; }
.rich p { margin: 0 0 1.15rem; }
.rich h2 { margin: 2.25rem 0 0.85rem; }
.rich h3 { margin: 1.85rem 0 0.7rem; }
.rich ul, .rich ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.rich li { list-style: disc; margin-bottom: 0.4rem; }
.rich ol li { list-style: decimal; }
.rich blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--moss);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
}
.rich strong { font-weight: 600; }

/* ---- steps, contact cards ---- */

.steps { padding-block: var(--step) 0; }
.steps-list { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, 4vw, 2.25rem); max-width: 44em; }
.steps-list li { display: flex; gap: 1rem; align-items: flex-start; }
.step-n {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--moss);
}
.step-n .icon { width: 22px; height: 22px; }
.steps-list li:hover .step-n { background: var(--moss); color: #fff; border-color: var(--moss); }
.step-n { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

.contact-cards {
  display: grid;
  gap: 1.25rem;
  padding-block: var(--step) 0;
}
.contact-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-card);
}
.contact-card h2 { margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.card-icon { width: 28px; height: 28px; color: var(--moss); flex: none; }
.spec-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 0.35rem; color: var(--moss); }
.contact-card p { color: var(--ink-soft); }
@media (min-width: 760px) {
  .contact-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---- journal ---- */

.journal { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.journal-item a {
  display: grid;
  gap: 1.25rem;
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.journal-body { display: block; }
.journal-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: 1.3;
  margin: 0.35rem 0 0.5rem;
}
@media (min-width: 720px) {
  .journal-item a { grid-template-columns: 12rem 1fr; gap: 2rem; }
}

.post-date {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.post-list { display: grid; gap: 1.25rem; }
.post-list a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-card);
  height: 100%;
}
.post-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: 1.3;
  margin: 0.35rem 0 0.5rem;
}
.post-list a { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease; }
.post-list a:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(22, 33, 27, 0.08), 0 32px 48px -20px rgba(22, 33, 27, 0.3); }
.post-art {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
.post-art img, .post-art svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-excerpt { display: block; color: var(--ink-soft); font-size: 0.95rem; }
@media (min-width: 760px) {
  .post-list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

.article { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.article-head { max-width: 40em; }
.article-head h1 { margin: 0.5rem 0 1rem; }
.article-cover { margin: clamp(2rem, 5vw, 3rem) 0; max-width: 26rem; }
.article-cover figcaption {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}
.article-body { padding-top: 0.5rem; }

/* ---- video: YouTube, 16:9, never wider than the column ---- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-card);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.article-video { margin: clamp(2rem, 5vw, 3rem) 0; max-width: 46rem; }
.rich .video { margin: 1.75rem 0; }

/* ---- forms ---- */

.inquiry { padding-block: var(--step); }
.inquiry-inner { max-width: 40rem; }
.inquiry-intro { color: var(--ink-soft); margin-top: 1rem; max-width: 34em; }
.inquiry-about {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.form {
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-card);
  margin-top: 1.75rem;
}
.field { margin-bottom: 1.25rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 620px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
.field label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.field .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='search'],
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; min-height: 8rem; }
input:focus, textarea:focus, select:focus {
  border-color: var(--resin);
  outline: 2px solid var(--resin);
  outline-offset: 1px;
}
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 1.5rem; }

/* The honeypot must be reachable by nothing and invisible to everyone. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- flash messages ---- */

.flash-wrap { padding-top: 1.25rem; }
.flash {
  margin: 0 0 0.75rem;
  padding: 0.9rem 1.25rem;
  border-radius: 14px;
  font-size: 0.95rem;
  background: var(--paper);
  border-left: 3px solid var(--moss);
}
.flash--error { border-left-color: #8C3B2E; }

/* ---- 404 ---- */

.notfound { padding-block: clamp(3rem, 8vw, 6rem) 0; }
.notfound .wall { margin-top: var(--step); }

/* ---- footer ---- */

.site-foot { background: var(--ink); color: rgba(237, 239, 232, 0.86); padding-block: var(--step) 2rem; }
.foot-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.foot-h {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--gleam);
  margin-bottom: 1rem;
}
.site-foot a { color: rgba(237, 239, 232, 0.86); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot li { margin-bottom: 0.6rem; font-size: 0.95rem; }
.foot-name { font-family: var(--font-display); font-size: 1.35rem; color: var(--plaster); margin-bottom: 0.5rem; }
.foot-tag { font-size: 0.95rem; max-width: 22em; }
.foot-social { display: flex; gap: 1rem; margin-top: 1rem; }
.foot-social a { border-bottom: 1px solid var(--gleam); }
.foot-note { font-size: 0.85rem; color: rgba(237, 239, 232, 0.65); margin-top: 0.75rem; }

.foot-news-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.foot-news-form input {
  flex: 1;
  min-width: 9rem;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid rgba(237, 239, 232, 0.3);
  background: rgba(237, 239, 232, 0.06);
  color: var(--plaster);
}
.foot-news-form input::placeholder { color: rgba(237, 239, 232, 0.5); }
.foot-news-form input:focus {
  outline: 2px solid var(--gleam);
  outline-offset: 1px;
  border-color: var(--gleam);
}
.foot-base {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 239, 232, 0.16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(237, 239, 232, 0.62);
}
.foot-base p { margin: 0; }
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; }
}

/* ---- reduced motion: the gleam holds still, nothing transitions ---- */

/* ============================================================
   FAQ chat widget. A predefined decision tree, not an AI chat -
   the bubble reuses the moss/gleam language of the panels so it
   reads as part of the site rather than a bolted-on plugin.
   ============================================================ */

.chat { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; }

.chat-bubble {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle at 38% 30%, var(--moss) 0%, var(--moss-dark) 70%, #2F4A3A 100%);
  box-shadow: var(--shadow-panel);
  display: grid;
  place-items: center;
  position: relative;
}
.chat-bubble:hover { filter: brightness(1.06); }
.chat-bubble-close {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: none;
}
.chat.is-open .chat-bubble svg { opacity: 0; }
.chat.is-open .chat-bubble-close { display: block; }
.chat.is-open .chat-bubble-close::before,
.chat.is-open .chat-bubble-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--plaster);
  border-radius: 2px;
}
.chat.is-open .chat-bubble-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.chat.is-open .chat-bubble-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(22rem, calc(100vw - 2.2rem));
  max-height: min(32rem, calc(100vh - 7rem));
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The [hidden] attribute and a class selector are equal specificity, and an
   author rule always beats the browser's own [hidden]{display:none}, so the
   panel above was rendering at all times regardless of the hidden attribute -
   it never actually closed, and it was visible with an empty body before the
   visitor had ever opened it. This rule forces the browser default back. */
.chat-panel[hidden] { display: none; }
.chat-head {
  background: var(--ink);
  color: var(--plaster);
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-close {
  background: none;
  border: none;
  color: var(--plaster);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.chat-search { padding: 0.75rem 0.85rem 0; }
.chat-search input {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
}
.chat-search input:focus { border-color: var(--resin); outline: 2px solid var(--resin); outline-offset: 1px; }

.chat-body { padding: 0.6rem 0.9rem 1rem; overflow-y: auto; flex: 1; }
.chat-node-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0.4rem 0 0.6rem;
}
.chat-subhead {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0.75rem 0 0.35rem;
}
.chat-options { display: grid; gap: 0.4rem; }
.chat-options button {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  cursor: pointer;
  color: var(--ink);
}
.chat-options button:hover { border-color: var(--moss); color: var(--moss-dark); }
.chat-back {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.5rem;
}
.chat-back:hover { color: var(--moss-dark); }
.chat-answer { font-size: 0.92rem; line-height: 1.55; }
.chat-answer a { color: var(--resin); }
.chat-empty { color: var(--ink-soft); font-size: 0.88rem; }
.chat-cta {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--moss);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.chat-cta:hover { background: var(--moss-dark); color: #fff; }
.chat-cta--ghost { background: none; border: 1.5px solid var(--moss); color: var(--moss); }
.chat-cta--ghost:hover { background: rgba(75, 106, 73, 0.08); color: var(--moss-dark); }

/* No mobile override needed: .chat-panel is already absolute within .chat,
   which is itself fixed, so "right: 0" and the min(22rem, 100vw - 2.2rem)
   width already sit correctly on a phone. A stray fixed-position override here
   previously broke it, because "bottom: calc(100% + ...)" resolves against the
   viewport once position is fixed rather than against the button. */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .panel::after { --gleam-angle: 22deg; }
  .has-js .what-item,
  .has-js .wall-item > a,
  .has-js .post-list > li,
  .has-js .journal-item,
  .has-js .steps-list > li,
  .has-js .contact-card,
  .has-js .band-head,
  .has-js .band--what .h-section,
  .has-js .commission-inner > *,
  .has-js .cta-inner,
  .has-js .product-desc > .h-section,
  .has-js .inquiry-inner > .h-section,
  .has-js .article-cover,
  .has-js .article-video,
  .has-js .closeup-note,
  .hero-copy > *,
  .hero-panel,
  .site-nav li { opacity: 1; transform: none; animation: none; }
  .hero::before, .hero::after, .hero-link, .strip-track, .commission-bg img, .hero-panel .panel::after { animation: none; }
  .btn:hover, .wall-item a:hover .panel, .journal-item a:hover .panel { transform: none; }
}


/* ============================================================
   Second motion and imagery pass (6 Sep 2026).
   Everything from here down is decoration and furniture. It is all switched
   off under prefers-reduced-motion at the very end of the file.
   ============================================================ */

/* ---- light on every piece, not only the hero ---- */

.panel {
  --tx: 0deg;
  --ty: 0deg;
  --tilt: 5;
  --sheen-x: 50%;
  --sheen-y: 50%;
  transform-style: preserve-3d;
}
.wall-item > a, .journal-item > a, .product-main, .hero-panel { perspective: 1000px; }
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  background: radial-gradient(circle at var(--sheen-x) var(--sheen-y), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 42%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.panel.is-lit::before { opacity: 1; }
.hero-panel .panel { --tilt: 9; transform: rotateX(var(--ty)) rotateY(var(--tx)); }
.hero-panel .panel::before { opacity: 1; }
.product-main .panel { --tilt: 4; transform: rotateX(var(--ty)) rotateY(var(--tx)); }
.wall-item a:hover .panel,
.journal-item a:hover .panel {
  transform: translateY(-14px) rotateX(var(--ty)) rotateY(var(--tx)) scale(1.02);
}

/* The wall pieces hang: a slow sway from the hook, each on its own rhythm. */
@keyframes sway {
  from { rotate: -0.9deg; }
  to { rotate: 0.9deg; }
}
.has-js .wall-item > a.is-in,
:root:not(.has-js) .wall-item > a {
  transform-origin: 50% -40%;
  animation: sway 7s ease-in-out infinite alternate;
}
.wall-item:nth-child(2) > a { animation-delay: -2.3s; }
.wall-item:nth-child(3) > a { animation-delay: -4.7s; }
.wall-item:nth-child(4) > a { animation-delay: -1.1s; }
.wall-item:nth-child(5) > a { animation-delay: -3.6s; }

/* ---- spotlight: a pool of light under the pointer on a card ---- */

.what-item, .post-list > li > a, .where-card > a, .contact-card, .fact, .process-step, .page-aside, .strip-tile {
  position: relative;
  --mx: 50%;
  --my: 50%;
}
.what-item::after, .post-list > li > a::after, .where-card > a::after, .contact-card::after, .fact::after, .process-step::after, .page-aside::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(201, 178, 122, 0.22), rgba(201, 178, 122, 0) 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 1;
}
.is-lit::after { opacity: 1; }

/* ---- icons draw their own lines ---- */

.icon [pathLength], .what-icon [pathLength], .fact-icon [pathLength], .process-icon [pathLength],
.where-icon [pathLength], .aside-icon [pathLength], .card-icon [pathLength], .spec-icon [pathLength], .drop-icon [pathLength] {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}
.has-js .pre:not(.is-in) svg [pathLength] { stroke-dashoffset: 100; }
@keyframes draw-stroke { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.hero-facts .icon [pathLength] { animation: draw-stroke 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
.hero-facts li:nth-child(2) .icon [pathLength] { animation-delay: 0.9s; }
.hero-facts li:nth-child(3) .icon [pathLength] { animation-delay: 1.1s; }

/* ---- spores: a few motes of light rising through the hero ---- */

.spores { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.spores i {
  position: absolute;
  bottom: -4%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 178, 122, 0.9), rgba(201, 178, 122, 0) 70%);
  opacity: 0;
  animation: spore 16s linear infinite;
  will-change: transform, opacity;
}
.spores i:nth-child(1) { left: 8%;  animation-duration: 19s; animation-delay: -3s; width: 5px; height: 5px; }
.spores i:nth-child(2) { left: 22%; animation-duration: 23s; animation-delay: -11s; }
.spores i:nth-child(3) { left: 37%; animation-duration: 17s; animation-delay: -6s; width: 8px; height: 8px; background: radial-gradient(circle, rgba(110, 138, 94, 0.8), rgba(110, 138, 94, 0) 70%); }
.spores i:nth-child(4) { left: 51%; animation-duration: 25s; animation-delay: -15s; width: 4px; height: 4px; }
.spores i:nth-child(5) { left: 64%; animation-duration: 21s; animation-delay: -9s; }
.spores i:nth-child(6) { left: 76%; animation-duration: 18s; animation-delay: -1s; width: 7px; height: 7px; background: radial-gradient(circle, rgba(110, 138, 94, 0.8), rgba(110, 138, 94, 0) 70%); }
.spores i:nth-child(7) { left: 88%; animation-duration: 24s; animation-delay: -18s; }
.spores i:nth-child(8) { left: 95%; animation-duration: 20s; animation-delay: -13s; width: 5px; height: 5px; }
@keyframes spore {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate(-18px, -55vh) scale(1); }
  90% { opacity: 0.6; }
  100% { transform: translate(14px, -110vh) scale(0.7); opacity: 0; }
}

/* ---- facts band with counters ---- */

.band--facts { padding-block: clamp(2rem, 4vw, 3rem); background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: var(--plaster);
  --reveal-delay: calc(var(--i, 0) * 110ms);
}
.fact-icon { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--moss); }
.fact-n { font-family: var(--font-display); font-size: var(--h-size); line-height: 1; color: var(--ink); }
.fact-text { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; margin-top: 0.25rem; }

/* ---- the process timeline ---- */

.band--process { background: var(--paper); }
.process {
  position: relative;
  display: grid;
  gap: 2rem 1.5rem;
  counter-reset: step;
}
@media (min-width: 720px) { .process { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .process { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } }
/* The line the steps hang from draws itself when the row comes into view. */
.process::before {
  content: '';
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  top: 1.4rem;
  height: 1.5px;
  background: linear-gradient(90deg, var(--moss), var(--gleam));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
  opacity: 0.6;
}
.process.is-in::before { transform: scaleX(1); }
@media (max-width: 999px) { .process::before { display: none; } }
.process-step {
  position: relative;
  padding: 0.25rem 0.5rem 0.75rem 0;
  --reveal-delay: calc(var(--i, 0) * 140ms);
  border-radius: 12px;
}
.process-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--plaster);
  border: 1.5px solid var(--line);
  color: var(--moss);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--paper);
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
.process-step:hover .process-dot { background: var(--moss); color: #fff; border-color: var(--moss); transform: scale(1.08); }
.process-icon { width: 24px; height: 24px; }
/* A soft pulse marks the current dot as the line reaches it. */
.process.is-in .process-step .process-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--gleam);
  opacity: 0;
  animation: dot-pulse 2.4s ease-out calc(0.3s + var(--i, 0) * 0.35s) 1;
}
@keyframes dot-pulse {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.process-n {
  display: block;
  margin-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--gleam);
  font-weight: 600;
}
.process-title { font-size: var(--title-size); margin: 0.3rem 0 0.45rem; line-height: 1.3; }
.process-step p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* ---- where a piece lives ---- */

.band-note { color: var(--ink-soft); max-width: 30em; margin: 0; font-size: 0.95rem; }
.where { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .where { grid-template-columns: repeat(3, 1fr); } }
.where-card { --reveal-delay: calc(var(--i, 0) * 120ms); }
.where-card > a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease;
}
.where-card > a:hover { transform: translateY(-8px); box-shadow: 0 4px 10px rgba(22, 33, 27, 0.08), 0 36px 52px -20px rgba(22, 33, 27, 0.32); }
.where-card .detail { aspect-ratio: 4 / 3; }
.where-card > a:hover .detail img { transform: var(--crop-transform) scale(1.1); }
.where-body { display: block; padding: 1.25rem 1.5rem 1.5rem; }
.where-icon { width: 28px; height: 28px; color: var(--moss); display: block; margin-bottom: 0.5rem; }
.where-title { display: block; font-family: var(--font-display); font-size: var(--title-size); margin-bottom: 0.4rem; }
.where-text { display: block; color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0.9rem; }

/* ---- static pages: text beside a visual aside ---- */

.page-cols { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  .page-cols { grid-template-columns: minmax(0, 46em) minmax(18rem, 1fr); }
  .page-aside { position: sticky; top: 6rem; }
}
.page-aside {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.aside-photo { display: block; position: relative; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; }
.aside-photo .detail { aspect-ratio: 4 / 3; border-radius: 14px; }
.aside-photo:hover .detail img { transform: var(--crop-transform) scale(1.08); }
.aside-photo-cap {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(22, 33, 27, 0.72);
  color: var(--plaster);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.cap-icon { width: 14px; height: 14px; transition: transform 0.3s ease; }
.aside-photo:hover .cap-icon { transform: translateX(4px); }
.aside-facts { margin: 1.25rem 0; display: grid; gap: 0.85rem; }
.aside-facts li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); }
.aside-facts strong { color: var(--ink); font-weight: 600; }
.aside-icon { width: 24px; height: 24px; color: var(--moss); flex: none; margin-top: 0.1rem; }
.aside-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0.75rem 0 0; text-align: center; }
.btn--block { display: flex; width: 100%; }

/* ---- the inquiry form: photographs ---- */

.field--files input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.field--files { position: relative; }
.dropzone {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border: 1.5px dashed rgba(22, 33, 27, 0.28);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--moss); background: rgba(75, 106, 73, 0.05); }
.dropzone.is-over { transform: scale(1.01); }
.field--files input:focus-visible + .dropzone { outline: 2px solid var(--resin); outline-offset: 2px; }
.drop-icon { width: 32px; height: 32px; color: var(--moss); grid-row: 1 / 3; }
.drop-text strong { color: var(--ink); font-weight: 600; }
.drop-sub { font-size: 0.78rem; color: var(--ink-soft); }
.file-previews { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.85rem; }
.file-previews[hidden] { display: none; }
.file-previews li {
  display: grid;
  gap: 0.35rem;
  width: 7.5rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.file-previews img { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow-card); display: block; background: var(--plaster); }
.file-previews li.is-bad img { outline: 2px solid #8C3B2E; }
.file-previews li.is-bad span { color: #8C3B2E; }
.file-previews li.is-note { width: 100%; color: #8C3B2E; }
.file-previews span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- small parts elsewhere ---- */

.link-more { transition: letter-spacing 0.35s ease, color 0.25s ease; }
.link-more:hover { letter-spacing: 0.15em; color: var(--moss-dark); }
.mark-tile { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease; }
.mark:hover .mark-tile { transform: rotate(-6deg) scale(1.06); box-shadow: 0 6px 16px rgba(22, 33, 27, 0.3); }
.chat-bubble::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--gleam);
  opacity: 0;
  animation: ring 7s ease-out infinite;
  pointer-events: none;
}
@keyframes ring {
  0%, 70% { transform: scale(0.9); opacity: 0; }
  75% { opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.steps-list li { --reveal-delay: calc(var(--i, 0) * 100ms); }
.steps-list li:nth-child(2) { --i: 1; }
.steps-list li:nth-child(3) { --i: 2; }
.steps-list li:nth-child(4) { --i: 3; }
.contact-card { --reveal-delay: calc(var(--i, 0) * 100ms); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease; }
.contact-card:hover { transform: translateY(-6px); }
.contact-card:nth-child(2) { --i: 1; }
.contact-card:nth-child(3) { --i: 2; }
.contact-card:nth-child(4) { --i: 3; }
.contact-card:nth-child(5) { --i: 4; }
@media (min-width: 760px) { .contact-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.what-item { --reveal-delay: calc(var(--i, 0) * 120ms); }
.what-item:nth-child(2) { --i: 1; }
.what-item:nth-child(3) { --i: 2; }

/* ---- reduced motion: the second pass holds still too ---- */

@media (prefers-reduced-motion: reduce) {
  .spores, .chat-bubble::before { display: none; }
  .has-js .wall-item > a.is-in, .wall-item > a, .process.is-in .process-dot::after,
  .hero-facts .icon [pathLength], .file-previews li { animation: none; }
  .process::before { transform: none; transition: none; }
  .has-js .pre:not(.is-in) svg [pathLength] { stroke-dashoffset: 0; }
  .hero-panel .panel, .product-main .panel { transform: none; }
  .panel::before, .is-lit::after { display: none; }
  .has-js .fact, .has-js .process, .has-js .process-step, .has-js .where-card, .has-js .page-aside, .has-js .band-note { opacity: 1; transform: none; animation: none; }
}

/* The new furniture joins the scroll reveal (same list as site.js). */
.has-js .fact, .has-js .process, .has-js .process-step, .has-js .where-card, .has-js .page-aside, .has-js .band-note,
.has-js .manifesto, .has-js .mosaic > li, .has-js .inquiry-side, .has-js .cta-card {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
  animation: reveal-safety 0.01s linear 2.5s forwards;
}
.has-js .process { transform: none; }


/* ============================================================
   Third pass (6 Sep 2026): nothing left empty, a real closing card,
   and the cookie notice.
   ============================================================ */

/* ---- under a short page text: manifesto line and a mosaic of close-ups ---- */

.page-main { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); align-content: start; }
.page-extras { display: grid; gap: 1.25rem; }
.manifesto {
  margin: 0;
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--plaster);
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
/* The same gleam as on a piece, sweeping across the dark card. */
.manifesto::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from var(--gleam-angle), rgba(201, 178, 122, 0) 0deg, rgba(201, 178, 122, 0.22) 30deg, rgba(201, 178, 122, 0) 70deg);
  animation: gleam-sweep 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.manifesto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(201, 178, 122, 0.18), rgba(201, 178, 122, 0) 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.manifesto.is-lit::after { opacity: 1; }
.manifesto-line {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--h-size);
  line-height: 1.2;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.manifesto-icon { width: 30px; height: 30px; color: var(--gleam); flex: none; }
.manifesto-sub { position: relative; margin: 0; color: rgba(237, 239, 232, 0.78); font-size: 0.95rem; max-width: 34em; }

.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
@media (min-width: 560px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }
.mosaic li { --reveal-delay: calc(var(--i, 0) * 90ms); }
.mosaic a { display: block; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease; }
.mosaic a:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(22, 33, 27, 0.08), 0 30px 44px -20px rgba(22, 33, 27, 0.3); }
.mosaic .detail { aspect-ratio: 1; }
.mosaic a:hover .detail img { transform: var(--crop-transform) scale(1.1); }
/* Every other tile sits a little lower, like frames hung by hand. */
@media (min-width: 560px) { .mosaic li:nth-child(even) { transform: translateY(0.9rem); } .has-js .mosaic > li.is-in:nth-child(even) { transform: translateY(0.9rem) !important; } }

/* ---- the form with its companion ---- */

.inquiry-cols { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 1.75rem; }
@media (min-width: 900px) { .inquiry-cols { grid-template-columns: minmax(0, 44rem) minmax(18rem, 1fr); } }
.inquiry-cols .form { margin-top: 0; }
.inquiry-side {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  --mx: 50%;
  --my: 50%;
}
.inquiry-side::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(201, 178, 122, 0.22), rgba(201, 178, 122, 0) 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.inquiry-side.is-lit::after { opacity: 1; }
.side-title { font-size: var(--title-size); margin: 1.25rem 0 0.25rem; line-height: 1.3; }
.side-next {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--plaster);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
@media (min-width: 900px) { .inquiry-side { position: sticky; top: 6rem; } }

/* ---- the closing card ---- */

.band--cta { padding-block: clamp(2rem, 5vw, 3.5rem) var(--step); }
.cta-card {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 5vw, 4rem);
  border-radius: calc(var(--radius) + 8px);
  background: var(--ink);
  color: var(--plaster);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(22, 33, 27, 0.6);
}
@media (min-width: 860px) { .cta-card { grid-template-columns: 1.4fr 1fr; } }
.cta-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.35; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; transform: scale(1.06); will-change: transform; animation: kenburns 26s ease-in-out infinite alternate; }
.cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(22, 33, 27, 0.94) 0%, rgba(22, 33, 27, 0.7) 55%, rgba(22, 33, 27, 0.4) 100%);
}
.cta-copy { position: relative; z-index: 1; }
.cta-copy p { color: rgba(237, 239, 232, 0.82); max-width: 34em; }
.eyebrow--light { color: var(--gleam); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.btn--ghost-light { border-color: rgba(237, 239, 232, 0.5); color: var(--plaster); }
.btn--ghost-light:hover { border-color: var(--plaster); background: rgba(237, 239, 232, 0.1); color: #fff; }
.cta-facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1.75rem; font-size: 0.85rem; color: rgba(237, 239, 232, 0.75); }
.cta-facts li { display: flex; align-items: center; gap: 0.5rem; }
.cta-facts .icon { width: 20px; height: 20px; color: var(--gleam); flex: none; }
.cta-piece { position: relative; z-index: 1; display: block; text-decoration: none; color: inherit; width: min(100%, 18rem); margin-inline: auto; perspective: 900px; }
.cta-piece .panel { --tilt: 7; transform: rotateX(var(--ty)) rotateY(var(--tx)); animation: breathe 8s ease-in-out infinite; }
.cta-piece-cap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gleam);
  justify-content: center;
  width: 100%;
}
.cta-piece:hover .cap-icon { transform: translateX(4px); }

/* ---- cookie notice ---- */

.consent {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 70;
  width: min(24rem, calc(100vw - 2.2rem));
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
  padding: 1.1rem 1.25rem 1.25rem;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease;
}
.consent.is-open { transform: none; opacity: 1; }
.consent[hidden] { display: none; }
.consent-title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--title-size); margin: 0 0 0.5rem; }
.consent-icon { width: 22px; height: 22px; color: var(--moss); }
.consent-text { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 1rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* On a phone the notice takes the bottom, so the chat bubble steps aside until a choice is made. */
@media (max-width: 720px) {
  .consent-open .chat { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto::before, .cta-bg img, .cta-piece .panel { animation: none; }
  .consent { transition: none; transform: none; opacity: 1; }
  .has-js .manifesto, .has-js .mosaic > li, .has-js .inquiry-side, .has-js .cta-card { opacity: 1; transform: none; animation: none; }
}

/* ---- figures and calls to action inside articles ---- */

.rich .rich-figure { margin: 1.75rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--ink); }
.rich .rich-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transform: var(--crop-transform, none); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rich .rich-figure:hover img { transform: var(--crop-transform, none) scale(1.04); }
.rich .rich-figure figcaption { padding: 0.7rem 1rem; font-size: 0.82rem; color: var(--ink-soft); background: var(--paper); }
.rich .rich-cta { margin: 2rem 0 0; }