/* ============================================================
   Your Quirky Birdie — site stylesheet
   Implements "Your Quirky Birdie.dc.html" on top of the vendored
   Quirky Birdie design system (styles/ds/).

   Everything here is page-level. Design-system tokens and base
   element styles live in styles/ds/ and are kept verbatim so the
   system can be re-synced without clobbering site work.
   ============================================================ */

/* ------------------------------------------------------------
   1. Page shell
   ------------------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  overflow-x: hidden;
}

/* Measured by scripts/site.js; the fallbacks match the design's own
   (64px on wide viewports, 84px once the nav wraps to its own row). */
:root { --header-h: 64px; }
@media (max-width: 760px) { :root { --header-h: 84px; } }

/* Faint paper grain over the whole page */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.page { position: relative; z-index: 1; }

.shell {
  max-width: 1160px;
  margin-inline: auto;
  width: 100%;
  padding-inline: clamp(18px, 5vw, 28px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-grotesk);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Visible focus for keyboard users, everywhere */
:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* [hidden] must beat any class that sets a display value */
[hidden] { display: none !important; }


/* ------------------------------------------------------------
   2. Design-system components
   Ported from the DS React bundle (Button, TextLink, IconButton,
   BirdieCard) into CSS so the page ships without a runtime.
   ------------------------------------------------------------ */

/* --- Button ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-grotesk);
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--text-sm); gap: 0.5rem; }
.btn--lg { padding: 1rem 2.1rem;  font-size: var(--text-md); gap: 0.7rem; }

.btn--primary {
  color: var(--white);
  background: var(--rose);
  border-color: var(--rose);
}
.btn--primary:hover { background: var(--rose-deep); color: var(--white); }

.btn--ink {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.btn--ink:hover { background: var(--warm-800); color: var(--paper); }

.btn--outline {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--panel); color: var(--ink); }

/* The design swaps small buttons up to medium once the layout narrows,
   so touch targets stay comfortable on phones. */
@media (max-width: 760px) {
  .btn--responsive { padding: 0.85rem 1.7rem; font-size: 0.92rem; gap: 0.6rem; }
}

/* --- TextLink ----------------------------------------------- */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-grotesk);
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--rose);
  padding: 0 0 2px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
.textlink:hover { color: var(--rose); }

/* --- IconButton --------------------------------------------- */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.iconbtn:hover { background: var(--panel); }
.iconbtn[aria-pressed="true"] {
  color: var(--rose);
  background: var(--wash-rose);
  border-color: var(--rose);
}
.iconbtn[aria-pressed="true"] svg { fill: currentColor; }

/* --- Plate (BirdieCard) ------------------------------------- */
.plate {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plate__frame {
  position: relative;
  border: 0px solid var(--ink);
  background: var(--panel);
  padding: 0.9rem;
  box-shadow: var(--shadow-plate);
}

.plate__save {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
}

/* A <button>, so the painting can be opened by keyboard and announced as the
   control it is — hence the resets on the first three lines. */
.plate__well {
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  width: 100%;
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 5;
  background: radial-gradient(120% 120% at 50% 38%, var(--paper), var(--plate-wash, var(--wash-rose)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  overflow: hidden;
}

.plate__well:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Only a hint — the plate is deliberately still and the art should not move. */
.plate__well:hover img { transform: scale(1.02); }
.plate__well img { transition: transform var(--dur-slow, 0.4s) ease; }
.plate__well img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Each plate carries two values per pigment: the pale wash the well is painted
   with, and an ink dark enough to set type in.

   The raw pigments cannot be used for text. Measured against --panel, only
   rose comes close (4.28) and periwinkle, sage and honey land near 2-3:1 —
   the same shortfall the README records for --sage and --honey. These inks
   keep each pigment's hue and saturation and walk lightness down until they
   clear 4.6:1 against the panel, the paper AND their own wash, so the feeling
   word stays legible wherever a plate is drawn. They live here rather than in
   styles/ds/ because that directory is vendored byte-for-byte. */
.plate--rose,       .lightbox--rose       { --plate-wash: var(--wash-rose);       --plate-ink: #9D4F69; }
.plate--periwinkle, .lightbox--periwinkle { --plate-wash: var(--wash-periwinkle); --plate-ink: #556698; }
.plate--sage,       .lightbox--sage       { --plate-wash: var(--wash-sage);       --plate-ink: #5A6F55; }
.plate--honey,      .lightbox--honey      { --plate-wash: var(--wash-honey);      --plate-ink: #8C6021; }

/* The feeling word — the plate's classification, sat opposite the edition
   count so the caption reads like a field-guide label. The dot restates the
   pigment for anyone who can't separate the four inks by hue alone. */
.plate__feeling {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--plate-ink, var(--ink));
}

.plate__feeling::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--plate-ink, var(--ink));
}

/* Nothing to say when she hasn't named the feeling yet: the row collapses to
   the edition count alone rather than leaving a gap where a word should be. */
.plate__feeling:empty { display: none; }

.plate__caption {
  padding: 1rem 0.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.plate__meta {
  font-family: var(--font-grotesk);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.plate__title {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--ink);
}

.plate__edition {
  margin-top: auto;
  padding-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-grotesk);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.plate__edition > span { padding-top: 0.7rem; }

/* Keep the edition count hard right even when the feeling beside it is absent
   and space-between has only one child left to place. */
.plate__edition > span:last-child { margin-left: auto; }

/* ------------------------------------------------------------
   3. Shared editorial furniture
   ------------------------------------------------------------ */

/* Eyebrow: wide-tracked grotesk label with a leading rule.
   Colour is set per-section via --eyebrow-color. */
.eyebrow {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--sage));
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: none;
  background: currentColor;
}
.eyebrow--rose  { --eyebrow-color: var(--rose); }
.eyebrow--sage  { --eyebrow-color: var(--sage); }
.eyebrow--honey { --eyebrow-color: var(--honey); }

/* Section head: title block left, standfirst right, hairline under */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.section-head__title {
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.section-head__title em { font-style: italic; color: var(--rose); }
.section-head__standfirst {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 340px;
  margin: 0;
  text-align: right;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .section-head__standfirst { text-align: left; }
}

.section {
  padding-top: clamp(52px, 9vw, 84px);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ------------------------------------------------------------
   4. Masthead
   ------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(252, 250, 245, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink);
}

.masthead__inner {
  max-width: 1160px;
  margin-inline: auto;
  padding: 12px clamp(18px, 5vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
}

.masthead__wordmark {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.82rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: none;
}
.masthead__wordmark em { color: var(--rose); font-style: normal; }

.masthead__nav {
  order: 2;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px clamp(15px, 2.6vw, 24px);
  flex-wrap: wrap;
}
.masthead__nav a {
  flex: none;
  padding: 3px 0;
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.masthead__nav a:hover { color: var(--rose); }

.masthead__cta { order: 3; flex: none; }

/* Once it gets tight the nav drops to its own full-width row below the
   wordmark and CTA, and scrolls sideways rather than wrapping. */
@media (max-width: 760px) {
  .masthead__nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    /* The scrollbar is hidden, so without this there is nothing to say the
       row continues past the right edge and "The painter" is simply invisible.
       The mask fades the last few pixels while there is more to scroll to, and
       resolves to fully opaque at the end. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .masthead__nav[data-scroll-end] {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .masthead__nav::-webkit-scrollbar { display: none; }
  .masthead__cta { order: 2; }

  /* 0.68rem uppercase with 3px of padding is a ~17px tall target. These are
     the only way to reach three of the four sections on a phone, so give them
     something a thumb can actually land on. */
  .masthead__nav a { padding: 13px 0; }

  /* .btn--responsive already restores full size to the small buttons, but the
     text-link CTAs ("Ask about a print", "Ask about a spot") were never in
     that set and stayed thin lines at every width. */
  .textlink { padding-block: 11px; }
}

/* ------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------ */

.hero {
  padding-top: clamp(34px, 6vw, 56px);
  padding-bottom: clamp(30px, 5vw, 44px);
}

.hero__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__copy { flex: 1 1 380px; min-width: 0; }

.hero__eyebrow {
  font-size: 0.74rem;
  margin-bottom: 1.7rem;
}

.hero__headline {
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  margin: 0 0 1.9rem;
}

.hero__premise {
  display: block;
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  line-height: 1.18;
  color: var(--ink);
}

.hero__tired {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1em 0.7em;
  margin: 0.7rem 0 0.9rem;
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  color: var(--ink-faint);
}

/* The three worn-out words, struck through one after another */
.struck { position: relative; display: inline-block; }
.struck::after {
  content: "";
  position: absolute;
  left: -3%;
  top: 56%;
  width: 106%;
  height: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  animation: qb-strike 0.45s var(--strike-delay, 0.7s) forwards;
}
.struck:nth-child(1) { --strike-delay: 0.7s; }
.struck:nth-child(2) { --strike-delay: 1s; }
.struck:nth-child(3) { --strike-delay: 1.3s; }

.hero__payoff {
  display: block;
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--rose);
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  animation: qb-rise 1s 1.5s both;
}

.hero__lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 0 2.1rem;
}
.hero__lede em { color: var(--ink); }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  flex-wrap: wrap;
}

.hero__plate {
  flex: 0 1 320px;
  max-width: 360px;
  margin-inline: auto;
  width: 100%;
}

/* ------------------------------------------------------------
   6. Glossary marquee — "the sky" of feelings in between
   ------------------------------------------------------------ */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
  padding: 0.9rem 0;
  background: var(--paper);
}

/* The label sits flush to the viewport edge and pads itself in, so the
   drifting words are masked all the way to x=0 rather than peeking out
   to the left of the label. */
.marquee__label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: var(--paper);
  height: 34px;
  display: flex;
  align-items: center;
  padding-left: clamp(18px, 5vw, 28px);
  padding-right: 1.2rem;
  font-family: var(--font-grotesk);
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rose);
}

.marquee__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: qb-drift var(--dur-drift) linear infinite;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink);
}

/* Two identical runs; the track slides exactly one run-width and loops. */
.marquee__run { display: flex; }

/* Mirrors the label on the opposite edge, masking the words as they leave. */
.marquee__pause {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  height: 34px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-inline: clamp(12px, 4vw, 20px);
  border: none;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.marquee__pause:hover { color: var(--ink); }
.marquee__pause:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }

/* One button, two states: pressed means the glossary is stopped. */
.marquee__pause .marquee__icon-play,
.marquee__pause[aria-pressed="true"] .marquee__icon-pause { display: none; }
.marquee__pause[aria-pressed="true"] .marquee__icon-play { display: block; }

.marquee[data-paused] .marquee__track { animation-play-state: paused; }

.marquee__word { padding: 0 1.1rem; opacity: 0.85; }
.marquee__word::after {
  content: "·";
  color: var(--rose);
  font-style: normal;
  margin-left: 2.2rem;
}

/* The reduced-motion block near the end of this file kills every animation,
   which parks the track at translateX(0) — a clipped row of the first six or
   seven words, with the rest cut off past the edge. The hero promises "a whole
   sky of feelings in between" and those readers would see a sliver of it.
   So: stop scrolling it and start wrapping it, and show every word. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 0.9rem clamp(18px, 5vw, 28px);
  }

  .marquee__label {
    position: static;
    transform: none;
    height: auto;
    padding: 0 0.8rem 0 0;
    background: none;
  }

  /* Nothing is moving, so there is nothing to pause. */
  .marquee__pause { display: none; }

  .marquee__track { width: auto; white-space: normal; flex-wrap: wrap; }
  .marquee__run { flex-wrap: wrap; }

  /* The second run exists only to make the loop seamless. */
  .marquee__run[aria-hidden="true"] { display: none; }

  .marquee__word { padding: 0 0.5rem; }
  .marquee__word::after { margin-left: 0.7rem; }
}

/* ------------------------------------------------------------
   7. Body order
   The design ships three editorial orderings; "story" (the painter
   first) is its default. Change data-order on .body-order to switch.
   ------------------------------------------------------------ */

.body-order { display: flex; flex-direction: column; }

.body-order[data-order="shop"]   #originals { order: 1; }
.body-order[data-order="shop"]   #prints    { order: 2; }
.body-order[data-order="shop"]   #events    { order: 3; }
.body-order[data-order="shop"]   #painter   { order: 4; }

.body-order[data-order="story"]  #painter   { order: 1; }
.body-order[data-order="story"]  #originals { order: 2; }
.body-order[data-order="story"]  #prints    { order: 3; }
.body-order[data-order="story"]  #events    { order: 4; }

.body-order[data-order="events"] #events    { order: 1; }
.body-order[data-order="events"] #originals { order: 2; }
.body-order[data-order="events"] #prints    { order: 3; }
.body-order[data-order="events"] #painter   { order: 4; }

/* ------------------------------------------------------------
   8. Originals & Prints — the card grids
   ------------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(26px, 4vw, 30px);
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.card-grid > li { display: flex; flex-direction: column; }

/* --- Originals --------------------------------------------- */

.original__plate {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.original--sold .original__plate { opacity: 0.58; }

.original__badge {
  position: absolute;
  top: 22px;
  left: 22px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
}

.original__footer {
  margin-top: auto;
  padding-top: 14px;
  min-height: 58px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.original__price {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.original--sold .original__price { color: var(--ink-faint); }

/* --- Prints ------------------------------------------------- */

.print__frame {
  border: 1px solid var(--ink);
  background: var(--panel);
  padding: 0.9rem;
  box-shadow: var(--shadow-plate);
}

.print__well {
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 5;
  background: radial-gradient(120% 120% at 50% 38%, var(--paper), var(--plate-wash, var(--wash-rose)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
}
.print--periwinkle { --plate-wash: var(--wash-periwinkle); }
.print--sage       { --plate-wash: var(--wash-sage); }
.print--rose       { --plate-wash: var(--wash-rose); }

.print__caption {
  padding: 1rem 0.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.print__kind {
  font-family: var(--font-grotesk);
  font-size: 0.62rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.print__name {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ink);
}

.print__blurb {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.print__footer {
  margin-top: auto;
  padding-top: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid var(--rule);
}

.print__price {
  font-family: var(--font-grotesk);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Mock-up: the emotions chart print */
.chart {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px 12px;
}
.chart__title {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.56rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  margin: 0 0 9px;
  letter-spacing: 0.16em;
}
/* One column per pigment, filled from scripts/feelings.js. It used to be a
   3×3 of nine words whose colours cycled in reading order, which looked like a
   chart without being one — the whole point is that a column IS a pigment. */
.chart__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.chart__cell {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-medium);
  font-size: 0.5rem;
  text-align: center;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 6px 2px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cell-wash);
}

/* Mock-up: the sticker sheet */
.stickers {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.stickers span {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--cell-wash);
}
.stickers img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Mock-up: the bookmarks */
.bookmarks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.bookmark {
  width: 27%;
  aspect-ratio: 1 / 3.4;
  border: 1px solid var(--ink);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 9px;
  background: var(--cell-wash);
}
.bookmark span {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.5rem;
  color: var(--ink);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.bookmark--left  { transform: rotate(-4deg); }
.bookmark--right { transform: rotate(3deg); }

/* ------------------------------------------------------------
   9. Workshops
   ------------------------------------------------------------ */

#events {
  margin-top: clamp(58px, 9vw, 92px);
  background: var(--panel);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-top: 0;
}

.events__inner {
  padding-top: clamp(50px, 8vw, 80px);
  padding-bottom: clamp(50px, 8vw, 80px);
}

/* On the panel background the section rule is drawn in full ink */
.events__inner .section-head { border-bottom-color: var(--ink); }

.events__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.event {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.event__when { flex: 0 0 auto; min-width: 104px; }
.event__month {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 6px;
}
.event__day {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: 2.6rem;
  line-height: 0.9;
  color: var(--ink);
  margin: 0 0 10px;
}
.event__time {
  font-family: var(--font-grotesk);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.event__body { flex: 1 1 280px; min-width: 0; }
.event__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.14;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: normal;
}
.event__venue {
  font-family: var(--font-grotesk);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.event__blurb {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34rem;
}

/* Price · length · spots left. --ink, not --ink-soft: these are the facts
   someone is looking for, so they should not be the quietest thing in the
   card. Collapses when she has filled none of them in. */
.event__terms {
  margin: 12px 0 0;
  font-family: var(--font-grotesk);
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.event__terms:empty { display: none; }

.event__photo {
  flex: 1 1 200px;
  max-width: 260px;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 0.5rem;
}
.event__photo > div {
  border: 1px solid var(--rule);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.event__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event__book {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.event__status {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}

.events__past { margin-top: 44px; }
.events__past-label {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.64rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.events__past ol { margin: 0; padding: 0; list-style: none; }
.event-past {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(1.2rem, 3vw, 2.6rem);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.event-past__date {
  flex: 0 0 auto;
  min-width: 104px;
  font-family: var(--font-grotesk);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.event-past__title {
  flex: 1 1 200px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.event-past__venue {
  font-family: var(--font-grotesk);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------
   10. The painter
   ------------------------------------------------------------ */

#painter { padding-top: clamp(54px, 9vw, 88px); }

.painter__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.painter__portrait {
  flex: 1 1 300px;
  border: 1px solid var(--ink);
  background: var(--panel);
  padding: 0.9rem;
  box-shadow: var(--shadow-md);
}
.painter__portrait > div { border: 1px solid var(--rule); overflow: hidden; }
.painter__portrait img { width: 100%; height: auto; }

.painter__copy { flex: 1 1 380px; min-width: 0; }
.painter__copy .eyebrow { margin-bottom: 16px; }

.painter__title {
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin: 0 0 24px;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
}
.painter__title em { font-style: italic; color: var(--rose); }

.painter__copy p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 480px;
}
.painter__copy p:first-of-type { margin: 0 0 18px; }
.painter__copy p:last-of-type  { margin: 0 0 32px; }

.painter__facts {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-bottom: 30px;
  padding: 0;
}
.painter__facts > div {
  padding: 18px 28px 0 0;
  border-right: 1px solid var(--rule);
  margin-right: 28px;
}
.painter__facts > div:last-child {
  padding-right: 0;
  border-right: none;
  margin-right: 0;
}
.painter__facts dt {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 1.7rem;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.painter__facts dd {
  font-family: var(--font-grotesk);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 8px 0 0;
}

/* ------------------------------------------------------------
   11. Mailing list
   ------------------------------------------------------------ */

.list-section {
  margin-top: clamp(58px, 9vw, 92px);
  background: var(--wash-rose);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.list-section__inner {
  padding-top: clamp(48px, 8vw, 76px);
  padding-bottom: clamp(48px, 8vw, 76px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.list-section__copy { flex: 1 1 360px; min-width: 0; }
.list-section__copy .eyebrow { margin-bottom: 16px; }

.list-section__title {
  font-weight: var(--fw-regular);
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin: 0 0 18px;
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
}
.list-section__title em { font-style: italic; color: var(--rose); }

.list-section__blurb {
  font-size: 1.1rem;
  line-height: 1.64;
  color: var(--ink-soft);
  margin: 0 0 30px;
  max-width: 440px;
}

.subscribe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 440px;
}
.subscribe__input {
  font-family: var(--font-serif);
  font-size: 1rem;
  padding: 12px 15px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  outline: none;
  color: var(--ink);
  flex: 1;
  min-width: 220px;
}
.subscribe__input::placeholder { color: var(--ink-faint); }
.subscribe__input:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.subscribe__error {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-grotesk);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-danger);
}

/* The honeypot. Positioned off-screen rather than display:none, because some
   bots skip fields they can tell are hidden — the whole point is that this one
   looks ordinary to them. aria-hidden and tabindex="-1" in the markup keep it
   away from anyone using the page for real. */
.subscribe__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------
   The enquiry panel.

   Deliberately not a hand-off. Both the mail app and the Instagram DM link
   silently do nothing when they aren't set up, and a button that appears to
   do nothing is the worst thing that can happen at the moment someone decides
   to buy. So the address and the message are here as text, and the two links
   are offered underneath rather than depended on.
   ------------------------------------------------------------ */

.enquiry {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-plate);
}

.enquiry::backdrop {
  background: rgba(58, 44, 56, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.enquiry__inner {
  position: relative;
  padding: clamp(24px, 4vw, 34px);
  padding-top: clamp(58px, 7vw, 68px); /* clears the close button */
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.enquiry__eyebrow {
  margin: 0;
  font-family: var(--font-grotesk);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--rose);
}

.enquiry__title {
  margin: -8px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.2;
  color: var(--ink);
}

.enquiry__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.enquiry__label {
  font-family: var(--font-grotesk);
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.enquiry__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.enquiry__row--stack { align-items: flex-start; flex-direction: column; }

/* Selectable, so copying by hand always works even if the clipboard API is
   blocked or the button is missed. */
.enquiry__email {
  font-family: var(--font-grotesk);
  font-size: 0.95rem;
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}

.enquiry__message {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  width: 100%;
  user-select: all;
}

.enquiry__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.enquiry__actions .btn { flex: 1 1 auto; justify-content: center; }

.enquiry__note {
  margin: 0;
  font-family: var(--font-grotesk);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Plate detail — the "see it properly" view.

   Native <dialog>, so Escape, focus trapping and inertness are the browser's
   job rather than ours. The backdrop matches the admin's editor sheet
   (admin.css) — --ink at 40% — so the two surfaces feel like one product.
   ------------------------------------------------------------ */

.lightbox {
  width: min(940px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-plate);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(58, 44, 56, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.lightbox__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 40px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-grotesk);
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.lightbox__close:hover { background: var(--panel); }

/* The same radial wash as the plate it opened from, so the painting stays in
   the colour of its own feeling. */
.lightbox__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 44px);
  background: radial-gradient(120% 120% at 50% 38%, var(--paper), var(--plate-wash, var(--wash-rose)));
  border-right: 1px solid var(--rule);
}

.lightbox__art img {
  max-width: 100%;
  max-height: min(70dvh, 620px);
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.lightbox__meta {
  padding: clamp(24px, 3.5vw, 40px);
  padding-top: clamp(56px, 6vw, 68px); /* clears the close button */
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel);
}

.lightbox__eyebrow {
  margin: 0;
  font-family: var(--font-grotesk);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lightbox__title {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink);
}

.lightbox__feeling {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-grotesk);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--plate-ink, var(--ink));
}
.lightbox__feeling::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--plate-ink, var(--ink));
}
.lightbox__feeling:empty { display: none; }

.lightbox__facts {
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.lightbox__facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.lightbox__facts dt {
  font-family: var(--font-grotesk);
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lightbox__facts dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--ink);
  text-align: right;
}

.lightbox__price {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--ink);
}

.lightbox__cta { margin-top: 6px; }
.lightbox__cta .btn { width: 100%; justify-content: center; }

/* The art stacks above the details rather than beside them; the image gets a
   capped height so the enquiry button is never below the fold on a phone. */
@media (max-width: 760px) {
  .lightbox__inner { grid-template-columns: 1fr; }
  .lightbox__art {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 28px 20px;
  }
  .lightbox__art img { max-height: 42dvh; }
  .lightbox__meta { padding-top: clamp(20px, 5vw, 28px); }
  .lightbox__close {
    top: 8px;
    right: 8px;
    background: var(--paper);
  }
}

/* ------------------------------------------------------------
   The list, second copy — directly under the Originals grid.

   Paper with a hairline rather than a rose wash: the footer block already
   uses --wash-rose, and --ink-soft on that measures 4.03:1 (see the table in
   README.md). Repeating it here would repeat the shortfall, and the plates
   above are hairline-framed anyway, so this matches them.
   ------------------------------------------------------------ */

.list-inline {
  margin-top: 40px;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.list-inline__copy { flex: 1 1 260px; min-width: 0; }

.list-inline__title {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
}

.list-inline__blurb {
  margin: 0;
  font-family: var(--font-grotesk);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.list-inline .subscribe-block { flex: 1 1 340px; }
.list-inline .subscribe { max-width: none; }
.list-inline .subscribe__done { font-size: 1.1rem; }

/* The sold cards link here, so it should be obvious what arrived when the
   page jumps. */
.list-inline:target {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--wash-rose);
}

.subscribe__done {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.subscribe__tick {
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-section__photo {
  flex: 1 1 260px;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 0.9rem;
  box-shadow: var(--shadow-md);
}
.list-section__photo > div { border: 1px solid var(--rule); overflow: hidden; }
.list-section__photo img { width: 100%; height: auto; }

/* ------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------ */

.footer { background: var(--paper); }

.footer__inner {
  padding-top: clamp(40px, 7vw, 56px);
  padding-bottom: 40px;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer__brand { max-width: 360px; }
.footer__wordmark {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  font-size: 0.82rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.footer__wordmark em { color: var(--rose); font-style: normal; }
.footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.footer__cols {
  display: flex;
  gap: 28px clamp(28px, 6vw, 56px);
  flex-wrap: wrap;
}
.footer__col-title {
  font-family: var(--font-grotesk);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 0.64rem;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer__col a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-grotesk);
  font-weight: var(--fw-medium);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border: none;
}
.footer__col a:hover { color: var(--rose); }
.footer__col svg { flex: none; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.footer__legal {
  font-family: var(--font-grotesk);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.footer__sign {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rose);
  margin: 0;
}

/* ------------------------------------------------------------
   13. Motion
   ------------------------------------------------------------ */

@keyframes qb-strike {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes qb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes qb-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* The strike-through carries meaning — the three tired words have to
     read as crossed out even when their animation never runs. */
  .struck::after { transform: scaleX(1); }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------
   14. Managed content — loading, empty and new states
   The paintings, prints and workshops sections are fetched from
   /api/content, so they need a shape to hold before data lands.
   ------------------------------------------------------------ */

/* Skeletons mirror the real card proportions so nothing shifts when the
   content swaps in: a 4/5 well inside a framed plate, plus the caption. */
.card-skeleton,
.plate-skeleton {
  border: 1px solid var(--rule);
  background: var(--panel);
  aspect-ratio: 4 / 5.65;
  animation: qb-pulse 1.6s var(--ease-soft) infinite;
}

.card-skeleton { list-style: none; }

.event-skeleton {
  height: 168px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  animation: qb-pulse 1.6s var(--ease-soft) infinite;
}

@keyframes qb-pulse {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.55; }
}

/* Nothing to show. An empty shop is a normal state for a one-of-one artist,
   not an error, so it keeps the editorial voice rather than warning. */
.section-empty {
  grid-column: 1 / -1;
  margin: 32px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

/* A real photograph of a print, replacing the drawn mock-up */
.print__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.print__well:has(.print__photo) { padding: 0; }

/* ------------------------------------------------------------
   15. Instagram hand-off
   ------------------------------------------------------------ */

.hero__aside {
  margin: 1.1rem 0 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--ink-faint);
}
.hero__aside a {
  color: var(--ink-soft);
  border-bottom-width: 1px;
}
.hero__aside a:hover { color: var(--rose); }

/* Confirms the painting reference reached the clipboard before the visitor
   lands in Instagram, where there is no way to prefill a message. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  transform: translate(-50%, 12px);
  opacity: 0;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-grotesk);
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-align: center;
  transition:
    opacity var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft);
}
.toast--in {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .card-skeleton,
  .plate-skeleton,
  .event-skeleton { opacity: 0.4; }
  .toast { transition: none; }
}