/* ═══ SITE PALETTE — change these six values to re-skin the whole site ═══ */
:root{
  --ink:      #000000;   /* true black, as asked */
  --raised:   #0B0B0B;   /* barely-there lift for bands */
  --plinth:   #FAF9F6;   /* light mount for objects shot on white */
  --hairline: #241F1B;
  --marigold: #FCBB55;   /* from the logo */
  --paper:    #F2ECE2;
  --muted:    #8A7F75;
  --dim:      #4A423B;

  /* pulled straight out of his canvases */
  --crimson:  #9E140C;   /* the red grounds */
  --gold:     #E3A61F;   /* the flute, the ring */
  --viridian: #4E6B2E;   /* the green ground */

  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:15.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.shell{ max-width:1180px; margin:0 auto; padding-inline:var(--gut); }

/* ═══ Header ═══ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.topbar-in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:14px;
}
.brand img{ width:104px; height:auto; }
.nav{ display:flex; gap:clamp(16px,3vw,30px); }
.nav a{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  transition:color .18s ease;
}
.nav a:hover{ color:var(--marigold); }
@media (max-width:640px){
  /* nav is Work · Book · About · Press — drop only Press on narrow screens.
     Book must always survive: it is the QR destination. */
  .nav a:nth-child(4){ display:none; }
  .nav{ gap:15px; }
  .nav a{ font-size:10px; letter-spacing:.14em; }
  .brand img{ width:86px; }
}

/* ═══ Hero ═══ */
.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,5vw,54px);
  align-items:center;
  padding-block:clamp(40px,7vw,78px);
}
@media (min-width:860px){ .hero{ grid-template-columns:minmax(0,560px) 1fr; } }

/* a work "hung" — thin lit edge, deep shadow, never cropped */
.hung{ position:relative; }
.hung img{ width:100%; height:auto; }

.hero-copy h1{
  font-family:var(--display);
  font-size:clamp(2.7rem, 8vw, 4.4rem);
  font-weight:500; line-height:.98; letter-spacing:-.02em;
  margin:0 0 18px;
  text-wrap:balance;
}
.hero-copy .lead{
  margin:0 0 26px;
  font-size:clamp(15.5px,2vw,17.5px);
  color:var(--muted);
  max-width:38ch;
}
.hero-copy .lead em{ color:var(--paper); font-style:italic; font-family:var(--display); }
.place{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--marigold); margin:0 0 16px;
}

/* ═══ Section furniture ═══ */
section{ padding-block:clamp(44px,6vw,80px); }
.sec-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:clamp(24px,3.5vw,40px);
}
.sec-head h2{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  font-weight:500; margin:0; letter-spacing:-.01em;
  white-space:nowrap;
}
.sec-head::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.sec-head .count{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}

/* ═══ Selected works — column flow keeps every true aspect ratio ═══ */
.gallery{
  columns:1;
  column-gap:clamp(14px,2vw,26px);
}
@media (min-width:440px){ .gallery{ columns:2; } }
@media (min-width:900px){ .gallery{ columns:3; } }

.work{
  break-inside:avoid;
  margin:0 0 clamp(26px,4vw,58px);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.work img{ transition:filter .5s ease; }
.gallery:hover .work img{ filter:grayscale(.55) brightness(.65); }
.gallery .work:hover img{ filter:none; }
.work:hover{ transform:scale(1.015); }
.work img{ width:100%; height:auto; }
.work figcaption{
  margin-top:10px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}

/* ═══ Circular works — shown as circles, because they are circles ═══ */
.discs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(215px,1fr));
  gap:clamp(16px,2.6vw,32px);
}
.disc{ margin:0; transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.disc:hover{ transform:scale(1.03); }
.disc img{ width:100%; height:auto; }
.disc figcaption{
  margin-top:12px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}

/* ═══ Instruments — mounted on a light plinth, as in a vitrine ═══ */
.objects{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:clamp(14px,2vw,24px);
}
.object{ margin:0; }
.object .mount{
  background:var(--plinth);
  padding:clamp(14px,2vw,22px);
  display:flex; align-items:center; justify-content:center;
  height:clamp(230px,26vw,290px);
}
.object img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }
.object figcaption{
  margin-top:11px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}

/* ═══ The book ═══ */
.book-band{
  background:var(--raised);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.book-in{
  display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,48px);
  align-items:center;
  padding-block:clamp(40px,6vw,70px);
}
@media (min-width:760px){ .book-in{ grid-template-columns:320px 1fr; } }
.book-in .cover{
  box-shadow:0 26px 46px -22px rgba(0,0,0,.95);
  border-top:1px solid rgba(239,229,214,.2);
}
.book-in h2{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.5vw,2.7rem);
  font-weight:500; line-height:1.05; margin:0 0 12px;
}
.book-in .by{ margin:0 0 20px; color:var(--muted); font-size:14.5px; }
.book-in .by b{ color:var(--paper); font-weight:500; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 26px;
  background:var(--marigold); color:#1A1206;
  font-weight:600; font-size:14.5px; letter-spacing:.02em;
  text-decoration:none; border-radius:2px;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:#FFC96E; }
.btn:active{ transform:translateY(1px); }

/* ═══ About ═══ */
.about{ display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,44px); align-items:start; }
@media (min-width:720px){ .about{ grid-template-columns:180px 1fr; } }
.portrait{ border-radius:50%; width:150px; }
.about p{ margin:0 0 14px; max-width:58ch; color:var(--muted); font-size:16px; }
.about p:first-of-type{ color:var(--paper); }

/* ═══ Contact rows ═══ */
.links{ display:grid; grid-template-columns:1fr; gap:0; max-width:560px; }
.row{
  display:flex; align-items:center; gap:15px;
  min-height:62px; padding:10px 4px;
  border-bottom:1px solid var(--hairline);
  text-decoration:none; color:var(--paper);
  transition:padding-left .2s ease, color .2s ease;
}
.row:first-child{ border-top:1px solid var(--hairline); }
.row:hover{ padding-left:10px; color:var(--marigold); }
.row:hover .ic{ color:var(--marigold); border-color:var(--marigold); }
.row:hover .ar{ color:var(--marigold); transform:translateX(3px); }
.ic{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--hairline); border-radius:50%; color:var(--muted);
  transition:color .2s ease, border-color .2s ease;
}
.ic svg{ width:17px; height:17px; }
.rt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rl{ font-weight:500; }
.rm{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar{ margin-left:auto; color:var(--hairline); transition:color .2s ease, transform .2s ease; }

/* ═══ Footer ═══ */
footer{
  border-top:1px solid var(--hairline);
  padding-block:30px;
  text-align:center;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}

a:focus-visible{ outline:2px solid var(--marigold); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important; } }

/* ═══════════════════════════════════════════════════════════
   INTERIOR PAGES
   ═══════════════════════════════════════════════════════════ */

/* Page masthead */
.page-head{ padding-block:clamp(34px,5vw,64px) clamp(20px,3vw,32px); }
.page-head h1{
  font-family:var(--display);
  font-size:clamp(2.2rem,6vw,3.4rem);
  font-weight:500; line-height:1.02; letter-spacing:-.02em;
  margin:0 0 14px;
}
.page-head p{
  margin:0; max-width:52ch;
  color:var(--muted); font-size:16px;
}
.page-head .place{ margin-bottom:14px; }

/* Medium filter */
.filters{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-block:6px clamp(24px,3vw,36px);
  border-bottom:1px solid var(--hairline);
  margin-bottom:clamp(24px,3vw,36px);
}
.chip{
  appearance:none;
  font-family:var(--body);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.chip:hover{ color:var(--paper); border-color:var(--muted); }
.chip[aria-pressed="true"]{
  color:#1A1206; background:var(--marigold); border-color:var(--marigold);
}
.chip .n{ opacity:.6; margin-left:6px; font-variant-numeric:tabular-nums; }

.work[hidden]{ display:none !important; }
.tally{
  margin:0 0 clamp(18px,2.4vw,26px);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  font-variant-numeric:tabular-nums;
}

/* Press clippings */
.clippings{ columns:1; column-gap:clamp(14px,2vw,26px); }
@media (min-width:640px){ .clippings{ columns:2; } }
@media (min-width:1000px){ .clippings{ columns:3; } }
.clip{
  break-inside:avoid;
  margin:0 0 clamp(14px,2vw,26px);
  background:var(--plinth);
  padding:clamp(9px,1.2vw,13px);
}
.clip img{ width:100%; height:auto; }

/* About page */
.bio{ display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,54px); align-items:start; }
@media (min-width:820px){ .bio{ grid-template-columns:1fr 320px; } }
.bio .prose p{ margin:0 0 16px; max-width:60ch; font-size:16.5px; color:var(--muted); }
.bio .prose p:first-child{ color:var(--paper); font-size:19px; }
.bio .portrait-lg{ width:100%; max-width:300px; border-radius:4px; }

/* Exhibition record — the one place a list belongs */
.record-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--hairline); }
.record-list li{
  display:grid; grid-template-columns:66px 1fr; gap:18px;
  padding:15px 2px;
  border-bottom:1px solid var(--hairline);
  font-size:14.5px;
}
.record-list .yr{
  font-family:var(--display); font-size:16px; color:var(--marigold);
  font-variant-numeric:tabular-nums;
}
.record-list .ev{ color:var(--paper); }
.record-list .ev span{ display:block; color:var(--muted); font-size:13px; margin-top:2px; }

/* Cross-page footer nav */
.endnav{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  padding-block:clamp(30px,4vw,52px);
  border-top:1px solid var(--hairline);
}
.endnav a{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color .18s ease;
}
.endnav a:hover{ color:var(--marigold); }

/* ═══════════════════════════════════════════════════════════
   THE EXHIBITION — homepage, built to be looked at
   ═══════════════════════════════════════════════════════════ */

.bleed{ width:100%; }

/* ── Hero: the name at architectural scale, the painting behind it ── */
.stage{
  position:relative;
  padding-block:clamp(28px,5vw,70px) clamp(50px,9vw,130px);
  overflow:clip;
}
.stage-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-items:end;
}
.stage-art{
  grid-column:5 / 13;
  grid-row:1;
  position:relative;
  z-index:1;
  animation:settle 1.4s cubic-bezier(.2,.7,.3,1) both;
}
.stage-art img{ width:100%; height:auto; }
@keyframes settle{ from{ transform:scale(1.05); } to{ transform:scale(1); } }

.stage-name{
  grid-column:1 / 9;
  grid-row:1;
  position:relative;
  z-index:2;
  margin:0 0 clamp(10px,3vw,54px);
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(3.2rem, 15vw, 12.5rem);
  line-height:.80;
  letter-spacing:-.035em;
  color:var(--paper);
  text-shadow:0 0 70px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.7);
}
.stage-name span{ display:block; }
.stage-name .two{ padding-left:.26em; }

.stage-foot{
  display:grid; grid-template-columns:repeat(12,1fr);
  margin-top:clamp(22px,3.5vw,44px);
  gap:20px;
}
.stage-foot .lede{
  grid-column:1 / 8;
  margin:0;
  font-size:clamp(16px,2.2vw,21px);
  line-height:1.5;
  color:var(--paper);
  max-width:30ch;
}
.stage-foot .lede em{ font-family:var(--display); font-style:italic; color:var(--gold); }
.stage-foot .meta{
  grid-column:10 / 13;
  margin:0;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  align-self:end;
}

/* ── Scatter: works at deliberately unequal scale ── */
.scatter{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(16px,2.6vw,40px);
  row-gap:clamp(40px,7vw,110px);
  align-items:start;
}
.scatter figure{ margin:0; }
.scatter img{ width:100%; height:auto; transition:filter .55s ease; }
.scatter figcaption{
  margin-top:12px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.scatter:hover img{ filter:grayscale(.6) brightness(.6); }
.scatter figure:hover img{ filter:none; }

.s1{ grid-column:1 / 7; }
.s2{ grid-column:8 / 13; margin-top:clamp(0px,9vw,130px); }
.s3{ grid-column:3 / 9; }
.s4{ grid-column:10 / 13; margin-top:clamp(0px,4vw,60px); }
.s5{ grid-column:1 / 5; margin-top:clamp(0px,6vw,90px); }
.s6{ grid-column:6 / 12; }
.s7{ grid-column:2 / 7; margin-top:clamp(0px,3vw,44px); }
.s8{ grid-column:8 / 13; }
.s9{ grid-column:1 / 9; }

@media (max-width:760px){
  .stage-grid{ display:block; }
  /* no overlap on narrow screens — there isn't room for it to read.
     (a negative bottom margin here dragged the intro up behind the painting) */
  .stage-art{ margin:0 0 clamp(24px,6vw,40px); }
  .stage-name{ font-size:clamp(3rem,17vw,6rem); margin:0 0 clamp(16px,4vw,28px); }
  .stage-foot{ display:block; }
  .stage-foot .meta{ margin-top:18px; }
  .scatter{ display:flex; flex-direction:column; gap:44px; }
  .scatter figure{ margin-top:0 !important; }
}

/* ── Colour field, taken from the canvases ── */
.field{
  background:var(--crimson);
  padding-block:clamp(60px,11vw,170px);
  margin-block:clamp(50px,8vw,120px);
}
.field blockquote{
  margin:0 auto;
  max-width:16ch;
  font-family:var(--display);
  font-size:clamp(2.1rem,6.6vw,5rem);
  font-weight:400;
  line-height:1.0;
  letter-spacing:-.02em;
  color:#F6E9D8;
  text-align:center;
  text-wrap:balance;
}
.field .attrib{
  margin:clamp(22px,3vw,40px) 0 0;
  text-align:center;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(246,233,216,.62);
}

/* ── Groove: the record, as a structural mark ── */
.groove-head{ position:relative; }
.groove-head::before{
  content:"";
  position:absolute;
  right:-6%; top:50%;
  transform:translateY(-50%);
  width:min(380px,46vw); aspect-ratio:1;
  border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(252,187,85,.16) 0 1px, transparent 1px 9px);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);
          mask-image:radial-gradient(circle,#000 30%,transparent 70%);
  animation:turn 90s linear infinite;
  pointer-events:none;
}
@keyframes turn{ to{ transform:translateY(-50%) rotate(360deg); } }

/* ── Big section headings ── */
.sec-head h2{ font-size:clamp(1.9rem,5vw,3.2rem); }

@media (prefers-reduced-motion:reduce){
  .stage-art, .groove-head::before{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════
   HORIZONTAL RAILS  — scroll-snap, same mechanism as Glazonoid
   ═══════════════════════════════════════════════════════════ */
.rail{
  display:flex;
  gap:clamp(14px,2.2vw,30px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  /* run off the right edge so it reads as "there is more" */
  margin-right:calc(-1 * var(--gut));
  padding:0 var(--gut) 20px 0;
  scrollbar-width:thin;
  scrollbar-color:var(--hairline) transparent;
}
.rail::-webkit-scrollbar{ height:3px; }
.rail::-webkit-scrollbar-track{ background:var(--hairline); }
.rail::-webkit-scrollbar-thumb{ background:var(--marigold); }

.rail > figure{
  flex:0 0 auto;
  width:clamp(210px, 27vw, 360px);
  scroll-snap-align:start;
  margin:0;
}
.rail > figure img{ width:100%; height:auto; transition:filter .5s ease; }
.rail:hover img{ filter:grayscale(.6) brightness(.62); }
.rail > figure:hover img{ filter:none; }
.rail figcaption{
  margin-top:11px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
/* instruments sit on a light mount inside the rail */
.rail > figure.obj .mount{
  background:var(--plinth);
  height:clamp(210px,24vw,280px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,2vw,22px);
}
.rail > figure.obj img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }

.rail-hint{
  display:flex; align-items:center; gap:10px;
  margin:0 0 clamp(16px,2vw,24px);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.rail-hint::after{
  content:""; width:46px; height:1px; background:var(--hairline);
}

/* ═══════════════════════════════════════════════════════════
   INTERLUDES — text between the pictures
   ═══════════════════════════════════════════════════════════ */
.interlude{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,3vw,40px);
  padding-block:clamp(56px,9vw,140px);
}
.interlude .mark{
  grid-column:1 / 3;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--marigold);
  padding-top:.7em;
  border-top:1px solid var(--marigold);
  align-self:start;
}
.interlude .say{
  grid-column:4 / 11;
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.4rem,3.2vw,2.5rem);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.012em;
  color:var(--paper);
  text-wrap:balance;
}
.interlude .say + .after{
  grid-column:4 / 10;
  margin:clamp(18px,2.4vw,30px) 0 0;
  font-size:15.5px; line-height:1.65; color:var(--muted);
}
@media (max-width:760px){
  .interlude{ display:block; }
  .interlude .mark{ display:inline-block; margin-bottom:20px; }
}

/* ═══════════════════════════════════════════════════════════
   MOTION LAYER
   All of it is opt-in via JS, so the page works fully without it.
   ═══════════════════════════════════════════════════════════ */

/* progress rule */
.scrollbar-rule{
  position:fixed; top:0; left:0; z-index:100;
  width:100%; height:2px;
  background:var(--marigold);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* reveal (class applied by JS only — no JS means always visible) */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{ opacity:1; transform:none; }
.rail > figure.reveal{ transform:translateY(14px); }

/* custom cursor */
.has-cursor, .has-cursor a, .has-cursor button{ cursor:none; }
.cursor-dot{
  position:fixed; top:0; left:0; z-index:120;
  width:10px; height:10px; border-radius:50%;
  background:var(--marigold);
  pointer-events:none;
  transition:width .25s cubic-bezier(.2,.7,.3,1), height .25s cubic-bezier(.2,.7,.3,1);
}
/* just the dot — a touch larger over something clickable, nothing more */
.cursor-dot.on-link{ width:16px; height:16px; }
@media (hover:none){ .cursor-dot{ display:none; } }

/* nav hover rule */
.nav a{ position:relative; padding-bottom:3px; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--marigold);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav a[aria-current="page"]{ color:var(--paper); }

/* ═══════════════════════════════════════════════════════════
   MARQUEE — the exhibition record, running
   ═══════════════════════════════════════════════════════════ */
.ticker{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding-block:clamp(18px,2.4vw,30px);
  overflow:hidden;
  display:flex;
  user-select:none;
}
.ticker-run{
  display:flex; flex:0 0 auto; gap:clamp(28px,4vw,60px);
  padding-right:clamp(28px,4vw,60px);
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-run{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-100%); } }
.ticker i{
  font-style:normal;
  font-family:var(--display);
  font-size:clamp(1rem,2.1vw,1.5rem);
  color:var(--muted);
  white-space:nowrap;
  display:flex; align-items:center; gap:clamp(28px,4vw,60px);
}
.ticker i::after{ content:"—"; color:var(--marigold); }
.ticker i b{ color:var(--paper); font-weight:500; }
@media (prefers-reduced-motion:reduce){
  .ticker-run{ animation:none; }
  .ticker{ overflow-x:auto; }
}

/* ═══════════════════════════════════════════════════════════
   FEATURE + ACCORDION
   A long vertical list of works, folded into one screen.
   ═══════════════════════════════════════════════════════════ */

/* one large painting, shown whole, edge to edge of the column */
.feature{ margin:0 0 clamp(30px,5vw,64px); }
.feature img{ width:100%; height:auto; }
.feature figcaption{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.feature figcaption b{ color:var(--marigold); font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   RESOLUTION CEILING
   Every source photograph is 650px wide. Displaying one wider than
   that upscales it — soft on screen, and enormously tall. Cap them.
   ═══════════════════════════════════════════════════════════ */
.features{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,3.4vw,44px);
  margin-bottom:clamp(32px,5vw,64px);
}
@media (min-width:700px){ .features{ grid-template-columns:1fr 1fr; align-items:start; } }
.feature{ margin:0; max-width:640px; }

/* the installation plate, at its true resolution */
.hung{ max-width:660px; }

/* ═══════════════════════════════════════════════════════════
   WHATSAPP FAB — a plain circle. It does not expand.
   ═══════════════════════════════════════════════════════════ */
.wa-fab{
  position:fixed;
  right:clamp(16px,2.4vw,28px);
  bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom));
  z-index:95;
  display:grid; place-items:center;
  width:54px; height:54px;
  border-radius:50%;
  background:#25D366;
  color:#06231A;
  text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.85);
  transition:background .2s ease, transform .2s ease;
}
.wa-fab svg{ width:28px; height:28px; }
.wa-fab:hover{ background:#2EE578; }
.wa-fab:active{ transform:scale(.94); }
.wa-fab:focus-visible{ outline:2px solid var(--marigold); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .wa-fab{ transition:none; } }