/* =========================================================
   STICHFEST — handcrafted clothing
   Stylesheet
   ========================================================= */

/* -----  RESET  ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The browser hides [hidden] with display:none, but any class here that sets
   its own display silently outranks that and the element stays on screen.
   This keeps the attribute authoritative, whatever a class says. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* -----  ROOT TOKENS  ----- */
:root {
  /* Palette: warm grey ground, cobalt for everything that is "ink",
     one burnt-orange highlight. There is no black anywhere on the site. */
  --cream:          #d9d1ca;        /* page background */
  --cream-light:    #e4ddd6;        /* inputs, mobile menu */
  --paper:          #efe9e2;        /* cards, form, footer: one step lighter */
  --ink:            #0b369a;        /* cobalt: headings, text, stitches, buttons */
  --ink-soft:       #1b429e;        /* body copy   (6.0:1 on the ground) */
  --ink-muted:      #3455a4;        /* small labels (4.7:1) */
  --line:           #9fa6bd;
  --line-soft:      #bcbbc3;
  --clay:           #c34811;        /* highlight: accent words, hover, active */
  --clay-soft:      #d4683a;
  --error:          #b3261e;        /* only for form mistakes, 5.4:1 on paper */
  --ink-shadow:     rgba(11, 54, 154, 0.14);   /* offset frame shadows */
  --ink-frame:      rgba(255, 255, 255, 0.85);  /* dashed frames, drawn on top of photos */


  /* Typography — Quicksand is the only typeface on the site */
  --sans:  "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;


  /* Layout */
  --max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Motion: the springs make it feel handmade rather than mechanical */
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sew:    cubic-bezier(0.65, 0, 0.35, 1);

  /* the little sewing needle, drawn in the page itself, nothing downloaded */
  --needle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath d='M1.5 6c0-1.6 1.4-2.6 3.6-2.6L40.5 5.3c1.7.2 1.7 1.2 0 1.4L5.1 8.6C2.9 8.6 1.5 7.6 1.5 6z' fill='%230b369a'/%3E%3Cellipse cx='6.6' cy='6' rx='2.7' ry='.95' fill='%23efe9e2'/%3E%3C/svg%3E");
}

/* -----  BASE  ----- */
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* NOTE: no overflow-x here. It makes the body a scroll container and
     breaks the sticky header on mobile. Sections that need it clip their
     own overflow instead (see .hero). */
}

/* One typeface for headings: Quicksand, regular weight, tight tracking.
   The accent word inside a heading is the single exception: same typeface,
   one step heavier, in the highlight colour. */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}

h1 { font-size: clamp(2.8rem, 7.5vw, 6rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); letter-spacing: -0.02em; }
h4 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; }

p { color: var(--ink-soft); max-width: 62ch; }

/* accent words: same typeface as the text around them, a touch heavier, in
   the highlight colour. Colour does the work, not a second font. */
em { font-style: normal; font-family: inherit; font-weight: 500; color: var(--clay); }
/* inside a heading the accent word keeps the heading's own weight: only the
   colour marks it, never a heavier stroke */
h1 em, h2 em, h3 em, h4 em { font-weight: inherit; }
strong { font-weight: 600; color: var(--ink); }
/* where the brand name sits inside an accent word it stays the accent colour
   and simply gains the weight */
em strong, strong em { color: inherit; font-weight: 600; }

/* The small label above headings is switched off: the heading carries the
   emphasis itself now. The markup is kept so this is a one-line revert.
   The legal pages keep theirs, as a quiet context line. */
.eyebrow { display: none; }
/* A row whose only child is an eyebrow now holds nothing, so it collapses
   with it instead of leaving a gap above the product title. If the eyebrows
   are ever switched back on, revert this line together with the one above. */
.pd-stamp-row:has(> .eyebrow:only-child) { display: none; }
.legal .eyebrow {
  display: inline-flex;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* container */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(217, 209, 202, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(11, 54, 154, 0.06);
}
/* The seam under the header. A quiet running stitch, and as you read down
   the page a clay thread is sewn along it with the needle at its tip:
   how far you are, told the way a seamstress would. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 11px);
  opacity: 0.85;
}
.sew-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 1;
  pointer-events: none;
}
.sew-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right, var(--clay) 0 6px, transparent 6px 11px);
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
}
.sew-progress::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: calc(var(--p, 0) * 100%);
  width: 30px;
  height: 9px;
  margin-left: -5px;
  background: var(--needle) center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sew-progress.moving::after { opacity: 1; }


.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* "by marina", tucked under the start of the wordmark. Positioned absolutely
   so it sits in the header's existing bottom padding: the logo keeps its size
   and the header keeps its height.

   logo1.png carries transparent margin inside the file, 4.22% of its width on
   the left and 25.1% of its height at the bottom. So the picture's edges are
   not the letters' edges, and both offsets below are measured from the file:
     left  = 0.0422 x rendered width (40px tall renders 216.5px wide) = 9px
     the 10px of empty space under the letters is why margin-top is 0 here,
     which leaves an equal 10px above the text and 10px below it. */
.brand { position: relative; }
.brand-by {
  position: absolute;
  top: 100%;
  left: 9px;                    /* lines up with the 's' of 'studio' */
  margin-top: 0;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--ink-muted);
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* logo drops to 32px tall, so both offsets scale with it */
  .brand-by {
    left: 7px;
    margin-top: 2px;
    font-size: 0.55rem;
    letter-spacing: 0.14em;
  }
}
/* logos. flex-shrink: 0 matters: between the burger breakpoint and about
   1080px the German menu is wide enough that flexbox would otherwise squash
   the logo image narrower while keeping its height, which distorts it. */
.brand, .brand-logo { flex-shrink: 0; }
.brand-logo { height: 40px; width: auto; display: block; }

.footer-logo { width: 112px; max-width: 55%; height: auto; }
@media (max-width: 760px) { .brand-logo { height: 32px; } }

.nav-links {
  display: flex;
  gap: clamp(0.9rem, 2.2vw, 2.2rem);
  align-items: center;
}
/* German and Spanish labels are longer than the English ones, so never let a
   single item break onto two lines */
.nav-links a { white-space: nowrap; }
.nav-links a {
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.25s ease;
}
.nav-links a:hover { color: var(--clay); }

/* dashed "stitch" underline on hover & active */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--ink) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
/* the stitch under the current page, and under whatever is hovered, is the
   highlight colour, so the label and its underline always agree */
.nav-links a:hover::after,
.nav-links a.active::after {
  background-image: linear-gradient(to right, var(--clay) 50%, transparent 50%);
}
.nav-links a.active {
  color: var(--clay);
  font-weight: 700;
}

/* language switcher (EN / DE / ES) */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.6rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}
.nav-links .nav-lang a.lang-link {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.45rem;
  color: var(--ink-muted);
  font-weight: 500;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-links .nav-lang a.lang-link::after { display: none; }   /* no stitch underline */
.nav-links .nav-lang a.lang-link:hover { color: var(--clay); }
.nav-links .nav-lang a.lang-on { color: var(--paper); background: var(--ink); }
.nav-links .nav-lang a.lang-on:hover { color: #fff; background: var(--clay); }

/* Between the burger breakpoint and about 1100px the six German labels do
   not fit beside the full-width logo at the normal size, so in that band the
   menu scales with the viewport. This block sits after the base .nav-links
   rules on purpose: at equal specificity the later rule wins. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-links { gap: clamp(0.5rem, 1.1vw, 0.9rem); }
  .nav-links a { font-size: clamp(0.64rem, 1.1vw, 0.76rem); letter-spacing: 0.07em; }
  .nav-lang { margin-left: 0.2rem; padding-left: 0.55rem; gap: 0.05rem; }
  .nav-links .nav-lang a.lang-link { font-size: 0.62rem; padding: 0.3rem 0.3rem; }
}

@media (max-width: 900px) {
  .nav-lang {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px dashed var(--line);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
    justify-content: center;
    gap: 0.5rem;
  }
  .nav-links .nav-lang a.lang-link { font-size: 0.95rem; letter-spacing: 0.16em; padding: 0.35rem 0.8rem; }
}

/* mobile nav toggle */
.nav-toggle {
  display: none;
  width: 28px;
  height: 28px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 8px; }
.nav-toggle span:nth-child(2) { top: 14px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* switch to the burger menu early enough that the longest language
   (German) still fits comfortably on one line before it collapses */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 72px;
    left: 0; right: 0;
    z-index: 90;
    background: var(--cream-light);
    border-bottom: 1px solid var(--line-soft);
    flex-direction: column;
    padding: 2rem var(--gutter) 2.5rem;
    gap: 1.25rem;
    /* hidden state: invisible AND non-interactive so it can't block taps */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links a { font-size: 1.15rem; letter-spacing: 0.18em; }
  .nav-links a.active {
    padding-left: 0.75rem;
    border-left: 2px solid var(--clay);
  }
  .nav-links a.active::after { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  /* half the old gap to the header, so the whole hero (headline, lead,
     buttons, fact cards and photo) is on screen when the page opens */
  padding: clamp(1.75rem, 4.5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* on a phone the photo leads, then the words */
  .hero-figure { order: -1; margin-bottom: 2.5rem; }
}
/* the two hero actions sit on one line with a generous gap, and simply wrap
   onto a second line, left-aligned, when the screen is too narrow */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
}

.hero h1 { margin-bottom: 1.5rem; }
/* German words are longer: at the English size "Von mir genäht." alone is
   wider than the column, which pushed the headline to four lines. A slightly
   smaller size puts it back to three, matching the English. */
html[lang="de"] .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.hero h1 em { color: var(--clay); }

.hero-lead {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 46ch;
}

/* The three facts, as three small cards. Each says one whole thing, so the
   eye reads a sentence rather than a row of statistics. On a phone the card
   nearest the middle of the screen takes the highlight while you scroll, the
   same rule the product cards follow (class .on, set in js/main.js). */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.5rem;
}
.htag {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  padding: 0.72rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition:
    transform  0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* each one sits at its own slight angle, like tags dropped on a table */
.htag:nth-child(1) { transform: rotate(-1.8deg); }
.htag:nth-child(2) { transform: rotate(1.2deg); }
.htag:nth-child(3) { transform: rotate(-0.9deg); }
.htag:hover, .htag.on {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 7px 8px 0 var(--clay);
}
/* On a phone they stack full width. Two of them side by side used to leave
   the scroll highlight flickering between near-equal candidates; one per row,
   with a taller gap, gives it a clear winner. */
@media (max-width: 760px) {
  .hero-tags {
    flex-direction: column;
    align-items: stretch;
    gap: 1.15rem;
    margin-top: 2.25rem;
  }
  .htag {
    width: 100%;
    padding: 0.95rem 1.1rem;
    font-size: 0.86rem;
  }
}

.hero-visual {
  display: block;                    /* it is an <a>, so it needs this */
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 16px 16px 0 var(--ink-shadow);
  transition: box-shadow 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
              transform  0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* It answers to the pointer, and on a phone (no hover) js/main.js gives it
   .on while it is the thing nearest the middle of the screen. Same lift and
   highlight colour as the product cards, so the whole site behaves alike. */
.hero-visual:hover,
.hero-visual:focus-visible,
.hero-visual.on {
  transform: translateY(-6px) rotate(-0.8deg);
  box-shadow: 16px 20px 0 var(--clay);
}
a.hero-visual:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; }
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed var(--ink-frame);
  border-radius: 5px;
  pointer-events: none;
}

/* =========================================================
   BUTTONS
   ========================================================= */
/* Solid cobalt pill. On hover it lifts, tilts a touch, turns the highlight
   colour and drops a hard cobalt shadow, like a sticker peeling off the page.
   The spring curve is what makes it feel playful rather than mechanical. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border: 0;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
  transition:
    transform   0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow  0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    background  0.3s ease;
}
.btn:hover {
  background: var(--clay);
  color: #fff;                      /* 4.4:1 on the orange; cream would be 3.3:1 */
  transform: translateY(-3px) rotate(-1.5deg) scale(1.03);
  box-shadow: 0 8px 0 var(--ink);
}
.btn:active {
  transform: translateY(-1px) rotate(-1.5deg);
  box-shadow: 0 3px 0 var(--ink);
}
.btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* kept for the HTML; every button is the same solid pill now */
.btn-primary { background: var(--ink); color: var(--cream); }

.btn-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px dashed var(--ink);
  padding-bottom: 0.3rem;
}
.btn-link:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* =========================================================
   SECTIONS
   ========================================================= */
section { padding: clamp(4rem, 8vw, 7rem) 0; }

.section-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--clay);
}
.section-head h2 { margin: 1rem 0 1rem; }
.section-head p { margin: 0 auto; }

/* stitch divider used between sections — a muted multi-colour "thread" */
.stitch-divider {
  height: 2px;
  background-image: repeating-linear-gradient(to right, var(--ink) 0 5px, transparent 5px 11px);
  margin: 0 var(--gutter);
}

/* =========================================================
   FEATURED / PRODUCTS GRID
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

/* Product card: a rounded paper tile. On hover (or, on a phone, when it is
   the card nearest the middle of the screen, which JS marks with .on) it
   lifts, tilts and throws a hard shadow in the highlight colour.
   Selectors are prefixed with .product-grid on purpose: the cards also carry
   .reveal, and this keeps the hover transform ahead of .reveal.in. */
.product {
  display: block;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 1rem 1rem 1.35rem;
}
.product-grid .product {
  transition:
    transform  0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity    0.9s ease;
}
.product-grid .product:hover,
.product-grid .product.on {
  transform: translateY(-8px) rotate(-1.4deg);
  box-shadow: 10px 12px 0 var(--clay);
}
.product-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-light);
  margin-bottom: 1rem;
  position: relative;
  border-radius: 14px;
}
/* a line of stitches sewn just inside the edge of each card; it turns clay
   with the card's highlight */
.product::after,
.pcard::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 15px;
  border: 1.5px dashed rgba(11, 54, 154, 0.2);
  pointer-events: none;
  transition: border-color 0.35s ease;
}
.product-grid .product:hover::after, .product-grid .product.on::after,
.product-grid .pcard:hover::after,   .product-grid .pcard.on::after { border-color: rgba(195, 72, 17, 0.7); }
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.product:hover .product-img img,
.product.on .product-img img { transform: scale(1.04); }

.product-meta { display: block; }
.product h3 {
  font-size: 1.25rem;
  font-weight: 400;
}
.product p {
  font-size: 0.92rem;
  margin-top: 0.6rem;
  color: var(--ink-muted);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.about-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  box-shadow: 16px 16px 0 var(--ink-shadow);
  transition: box-shadow 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
              transform  0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* It reacts like the hero photograph, but it is not a link: nothing to click,
   it just answers the pointer. On a phone js/main.js gives it .on while it is
   the thing nearest the middle of the screen. */
.about-img:hover,
.about-img.on {
  transform: translateY(-6px) rotate(-0.8deg);
  box-shadow: 16px 20px 0 var(--clay);
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-img::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed var(--ink-frame);
  border-radius: 5px;
  pointer-events: none;
}

/* About story — stacked: horizontal image on top, text below */
.about-story {
  display: block;
  max-width: 800px;
  margin-inline: auto;
}
.about-story .about-img { aspect-ratio: 16 / 9; }
/* the gap to the story text belongs to the whole figure, credit included */
.about-story .framed { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.about-story .about-text p { max-width: none; }

.about-text h2 { margin: 1rem 0 1.5rem; }
.about-text p + p { margin-top: 1.25rem; }

.about-signature {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--clay);
  margin-top: 2rem;
  display: inline-block;
}

/* ============================================================
   STEPS ("From idea to first wear"): 1 -> 2 -> 3
   Dashed arcs hop from one numbered badge to the next and draw
   themselves in order once the block scrolls into view (.in comes
   from the same observer as every .reveal). On a phone the three
   stack and the arcs become a dashed thread down the left, still
   drawn in order.
   ============================================================ */
.steps { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.step {
  position: relative;
  padding: 0 1.5rem 1rem;
  text-align: center;
}
.step-num {
  width: 44px;
  height: 44px;
  margin: 0 auto 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.step-num svg { width: 21px; height: 21px; }
/* the About page uses the same block with an icon in place of the number */
.steps--icons .step-num { width: 52px; height: 52px; }
.steps--icons .step-num svg { width: 24px; height: 24px; }
.step h4 { margin-bottom: 0.5rem; }
.step p { font-size: 0.95rem; margin-inline: auto; }

/* one thing at a time, at a pace you can actually watch */
.steps.in .step:nth-child(1) .step-num { animation: stepPop 0.9s 0.15s both; }
.steps.in .step:nth-child(2) .step-num { animation: stepPop 0.9s 2.15s both; }
.steps.in .step:nth-child(3) .step-num { animation: stepPop 0.9s 4.15s both; }
@keyframes lineDraw { to { clip-path: inset(0 0 0 0); } }

/* On a wide screen the thread runs straight through the row at badge height,
   so the badges read as beads on a string and there is no empty band above
   them. Each length is hidden by a clip that then opens left to right, and
   its arrowhead appears as it lands on the next badge. The phone keeps the
   vertical version further down. */
@media (min-width: 761px) {
  /* the line: 2px tall, centred on the 44px badge's middle (22px) */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    height: 2px;
    left: calc(50% + 30px);           /* clear of this badge */
    width: calc(100% - 60px);         /* to just short of the next one */
    background: repeating-linear-gradient(to right,
      var(--ink) 0 7px, transparent 7px 13px);
    clip-path: inset(0 100% 0 0);
  }
  /* the arrowhead: its own centre is pinned to that same 22px line by the
     translate, so it can never drift half a pixel off the dashes */
  .step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(150% - 36px);
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--ink);
    border-right: 2px solid var(--ink);
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
  }
  /* the About badges are 52px, so their centre line sits 4px lower */
  .steps--icons .step:not(:last-child)::after  { top: 25px; left: calc(50% + 34px); width: calc(100% - 68px); }
  .steps--icons .step:not(:last-child)::before { top: 26px; left: calc(150% - 40px); }

  .steps.in .step:nth-child(1)::after  { animation: lineDraw 1.4s 0.55s cubic-bezier(0.35, 0, 0.25, 1) forwards; }
  .steps.in .step:nth-child(1)::before { animation: headIn 0.3s 1.95s forwards; }
  .steps.in .step:nth-child(2)::after  { animation: lineDraw 1.4s 2.55s cubic-bezier(0.35, 0, 0.25, 1) forwards; }
  .steps.in .step:nth-child(2)::before { animation: headIn 0.3s 3.95s forwards; }
}
@keyframes headIn   { to { opacity: 1; } }
@keyframes stepPop {
  0%   { border-color: var(--ink);  background: var(--cream); color: var(--ink);  transform: none; }
  35%  { border-color: var(--clay); background: var(--clay);  color: #fff;        transform: scale(1.14); }
  100% { border-color: var(--clay); background: var(--cream); color: var(--clay); transform: none; }
}
/* the icon badges settle back to cobalt, so three orange discs do not compete
   with the accent words around them */
.steps--icons.in .step-num { animation-name: stepPopIcon !important; }
@keyframes stepPopIcon {
  0%   { border-color: var(--ink);  background: var(--cream); color: var(--ink); transform: none; }
  35%  { border-color: var(--clay); background: var(--clay);  color: #fff;       transform: scale(1.12) rotate(-3deg); }
  100% { border-color: var(--ink);  background: var(--cream); color: var(--ink); transform: none; }
}

@media (max-width: 760px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step {
    position: relative;
    text-align: left;
    padding: 0 0 2.25rem 3.6rem;
    border-right: 0;
  }
  .step-num { position: absolute; left: 0; top: 0; margin: 0; }
  .step p { margin-inline: 0; }
  /* dashed thread from this badge down to the next one, 2px wide so its
     centre falls on a whole pixel (badge centre = 22px) */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    width: 2px;
    top: 50px;
    bottom: 8px;
    background: repeating-linear-gradient(to bottom,
      var(--ink) 0 7px, transparent 7px 13px);
    clip-path: inset(0 0 100% 0);
  }
  /* the arrowhead, centred on that same 22px line by the translate */
  .step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 6px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
  }
  /* the About badges are 52px rather than 44px, so their thread and
     arrowheads shift by the 4px difference in radius to stay centred */
  .steps--icons .step { padding-left: 4.1rem; }
  .steps--icons .step:not(:last-child)::after  { left: 25px; top: 58px; }
  .steps--icons .step:not(:last-child)::before { left: 26px; }
  .steps.in .step:nth-child(1)::after  { animation: lineDraw 1.4s 0.55s cubic-bezier(0.35, 0, 0.25, 1) forwards; }
  .steps.in .step:nth-child(1)::before { animation: headIn 0.3s 1.95s forwards; }
  .steps.in .step:nth-child(2)::after  { animation: lineDraw 1.4s 2.55s cubic-bezier(0.35, 0, 0.25, 1) forwards; }
  .steps.in .step:nth-child(2)::before { animation: headIn 0.3s 3.95s forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .step::after  { clip-path: none !important; animation: none !important; }
  .step::before { opacity: 1 !important; animation: none !important; }
  .step-num { animation: none !important; }
}

/* =========================================================
   GALLERY (masonry-style)
   ========================================================= */
.gallery {
  column-count: 3;
  column-gap: 1rem;
}
@media (max-width: 860px) { .gallery { column-count: 2; } }
@media (max-width: 540px) { .gallery { column-count: 1; } }

.gallery-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 1rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border-radius: 12px;
}
.gallery-item {
  transition:
    transform  0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.gallery-item:hover, .gallery-item.on {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: 6px 7px 0 var(--clay);
}
.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.6s ease, filter 0.4s ease;
}
.gallery-item:hover img, .gallery-item.on img { transform: scale(1.03); filter: brightness(0.95); }
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--ink-frame);
  border-radius: 6px;
  opacity: 0.9;            /* always-on stitched frame (the site standard) */
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }

/* lightbox: the picture is shown as a print with a paper border, its
   description written underneath */
.lightbox {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(11, 54, 154, 0.35), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    rgba(7, 26, 74, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 200;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox.open { display: flex; animation: lbFade 0.3s ease; }
@keyframes lbFade { from { opacity: 0; } }
.lightbox img {
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  background: var(--paper);
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 20, 0.45);
  cursor: default;
}
.lightbox.open img { animation: lbPrint 0.55s var(--spring-soft); }
@keyframes lbPrint {
  from { opacity: 0; transform: translateY(24px) rotate(-3deg) scale(0.92); }
}
.lightbox-caption {
  margin-top: 1.1rem;
  max-width: 60ch;
  text-align: center;
  color: var(--paper);
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.88;
  min-height: 1.5em;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  color: var(--paper);
  font-size: 1.5rem;
  width: 44px; height: 44px;
  border: 1.5px dashed rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: transform 0.45s var(--spring), border-color 0.25s ease, background 0.25s ease;
}
.lightbox-close:hover { transform: rotate(90deg); background: var(--clay); border-color: var(--clay); }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  background: rgba(7, 26, 74, 0.5);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.4s var(--spring);
}
.lightbox-nav:hover { background: var(--clay); border-color: var(--clay); }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(3px); }
.lightbox-nav:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-count {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  opacity: 0.75;
  z-index: 3;
}
@media (max-width: 620px) {
  .lightbox { padding: 1rem; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox img { max-width: 94vw; padding: 6px; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info h2 { margin: 1rem 0 1.5rem; }
.contact-info .details { margin-top: 2.5rem; }
.contact-info .detail {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-info .detail:first-child { border-top: 1px solid var(--line-soft); }
.contact-info .detail-icon {
  color: var(--ink);
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
}
.contact-info .detail-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.15rem;
}
.contact-info .detail a { color: var(--ink); transition: color 0.25s ease; }
.contact-info .detail a:hover { color: var(--clay); }

/* form */
.form {
  background: var(--paper);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--ink);
  border-radius: 14px;
  position: relative;
}
.form::before {
  content: "";
  position: absolute;
  top: 14px; left: 14px;
  right: 14px; bottom: 14px;
  border: 1px dashed rgba(11, 54, 154, 0.3);
  border-radius: 6px;
  pointer-events: none;
}

.form-head { position: relative; z-index: 1; margin-bottom: 2rem; }
.form-head h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.form-head p {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
.form .req { color: var(--clay); font-style: normal; }

.form-row { margin-bottom: 1.5rem; position: relative; z-index: 1; }
.form-row.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 540px) { .form-row.split { grid-template-columns: 1fr; } }

.form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--cream-light);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form input::placeholder,
.form textarea::placeholder { color: var(--ink-muted); }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(195, 72, 17, 0.16);
}
.form textarea { resize: vertical; min-height: 130px; line-height: 1.55; }

/* file attachment field */
.form input[type="file"] { padding: 0.7rem 0.9rem; cursor: pointer; font-size: 0.9rem; }
.form input[type="file"]::file-selector-button {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  margin-right: 0.9rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.form input[type="file"]::file-selector-button:hover { background: var(--clay); border-color: var(--clay); color: var(--cream); }
.form-hint { display: block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--ink-muted); }
.form-hint.error { color: var(--clay); }

.form button[type="submit"] {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
}

.form-note {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 0.5rem 0 1.5rem;
  text-align: left;
  position: relative;
  z-index: 1;
}

.form-feedback {
  margin-top: 1rem;
  padding: 1rem;
  font-size: 0.92rem;
  border-radius: 4px;
  display: none;
}
.form-feedback.success { display: block; background: rgba(11, 54, 154, 0.10); color: var(--ink); }
.form-feedback.error   { display: block; background: rgba(195, 72, 17, 0.14); color: var(--clay); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  padding: clamp(2rem, 4vw, 3rem) 0 1.25rem;
  margin-top: 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 1.25rem 2rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h4 {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.85rem;
}
/* menu + studio entries in caps (excludes the contact/email list) */
.footer-grid ul:not(.footer-contact-list) li,
.footer-grid ul:not(.footer-contact-list) a {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
}
.footer-grid ul li { margin-bottom: 0.4rem; }
.footer-grid a:hover { color: var(--clay); }
.footer-grid .footer-brand {
  font-family: var(--sans);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.footer-grid p { font-size: 0.84rem; max-width: 34ch; margin-top: 0.4rem; }

.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-craft { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-craft svg { color: var(--clay); }

/* footer "get in touch" column */
.footer-contact .footer-request {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 1.1rem;
  padding-bottom: 0.25rem;
  position: relative;
  transition: color 0.25s ease;
}
/* the dashed underline starts after the pencil (14px icon + the gap) */
.footer-contact .footer-request::after {
  content: "";
  position: absolute;
  left: calc(14px + 0.45rem);
  right: 0;
  bottom: 0;
  border-bottom: 1px dashed var(--line);
  transition: border-color 0.25s ease;
}
.footer-contact .footer-request svg { color: var(--ink-muted); transition: color 0.25s ease; }
.footer-contact .footer-request:hover,
.footer-contact .footer-request:hover svg { color: var(--clay); }
.footer-contact .footer-request:hover::after { border-bottom-color: var(--clay); }
.footer-contact-list { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  transition: color 0.25s ease;
}
.footer-contact-list svg { color: var(--ink-muted); flex-shrink: 0; transition: color 0.25s ease; }
.footer-contact-list a:hover,
.footer-contact-list a:hover svg { color: var(--clay); }

/* ============================================================
   DICTIONARY ENTRY (home)
   An index card from a dictionary drawer, held to the page with a strip
   of tape: a clay rule under the headword and faint blue rules under the
   text. Each paragraph carries its own rules, so they always sit under
   the lines whatever the screen width. The word types itself out when
   the card comes into view.
   ============================================================ */
.dict-card {
  --padX: clamp(1.35rem, 5.5vw, 3.6rem);
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  border-radius: 6px;
  padding: clamp(2.2rem, 5vw, 3rem) var(--padX) 0;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(11, 54, 154, 0.05), 0 24px 44px -26px rgba(11, 54, 154, 0.5);
  transform: rotate(-0.9deg);
}
.dict-card::before {                    /* the tape */
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 132px;
  height: 32px;
  margin-left: -66px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px),
    rgba(212, 104, 58, 0.5);
  transform: rotate(2.5deg);
  clip-path: polygon(3% 0, 97% 0, 100% 16%, 97% 33%, 100% 50%, 97% 67%, 100% 84%, 97% 100%, 3% 100%, 0 84%, 3% 67%, 0 50%, 3% 33%, 0 16%);
}
.dict-card::after {                     /* the punched hole of an index card */
  content: "";
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 2px 3px rgba(11, 54, 154, 0.25);
}
.dict-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.4rem 0.75rem;
  max-width: none;
  margin: 0 calc(-1 * var(--padX));
  padding: 0 var(--padX) 1.1rem;
  border-bottom: 1.5px solid rgba(195, 72, 17, 0.55);
}
.dict-word {
  position: relative;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  line-height: 1.05;
  color: var(--ink);
}
.dict-word .ch { opacity: 0; }
.dict-word .ch.on { opacity: 1; }
.dict-caret {
  position: absolute;
  top: 0.1em;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--clay);
  animation: caretBlink 0.9s steps(1) infinite;
  transition: left 0.08s linear;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.dict-card.typed .dict-caret { animation: caretBlink 0.9s steps(1) 3, caretGone 0.3s 2.7s forwards; }
@keyframes caretGone { to { opacity: 0; } }
.dict-phon {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink-muted);
}
.dict-pos {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clay);
  border: 1.5px solid var(--clay);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  line-height: 1.5;
  transform: rotate(-4deg);
}
/* the ruled lines: one faint rule per 2rem line, just under the letters */
.dict-def, .dict-kicker {
  max-width: none;
  margin: 0 calc(-1 * var(--padX));
  padding: 2rem var(--padX) 0;
  line-height: 2rem;
  background: linear-gradient(to bottom, transparent 1.56rem, rgba(11, 54, 154, 0.16) 1.56rem 1.64rem, transparent 1.64rem) 0 0 / 100% 2rem;
}
.dict-def {
  color: var(--ink-soft);
  font-size: 1.04rem;
}
.dict-kicker {
  padding-bottom: 4rem;                 /* two empty lines at the foot of the card */
  font-family: var(--sans);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--ink);
}
/* the typing sequence: the word, then its pronunciation, then the text.
   Only the words fade, the rules stay on the card the whole time. */
.dict-phon, .dict-pos { transition: opacity 0.6s ease, transform 0.7s var(--spring-soft); }
.dict-card .fade { transition: opacity 0.8s ease; }
.dict-card.typing .dict-phon,
.dict-card.typing .dict-pos { opacity: 0; transform: translateY(8px); }
.dict-card.typing .fade { opacity: 0; }
.dict-card.typed .dict-phon { transition-delay: 0.05s; }
.dict-card.typed .dict-pos  { transition-delay: 0.2s; }
.dict-card.typed .dict-def .fade    { transition-delay: 0.4s; }
.dict-card.typed .dict-kicker .fade { transition-delay: 0.75s; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   COLLABORATORS (products page)
   ============================================================ */
.collabs {
  background:
    repeating-linear-gradient(0deg, rgba(11, 54, 154, 0.025) 0 1px, transparent 1px 4px),
    var(--paper);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(11, 54, 154, 0.1), 0 24px 50px -36px rgba(11, 54, 154, 0.6);
}
.collab {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
}
.collab--reverse { grid-template-columns: 1fr 132px; }
.collab--reverse .collab-logo { order: 2; }
.collab-logo {
  aspect-ratio: 3 / 2;
  border: 1.5px dashed rgba(11, 54, 154, 0.4);
  border-radius: 12px;
  background: var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  padding: 0.6rem;
  transform: rotate(-2deg);
  transition: transform 0.6s var(--spring), border-color 0.3s ease;
}
.collab:hover .collab-logo { transform: rotate(2deg) scale(1.05); border-color: var(--clay); }
.collab-logo img { width: 100%; height: 100%; object-fit: contain; }
.collab-text h3 { margin-bottom: 0.15rem; }
.collab-role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.75rem;
}
.collab-text p { font-size: 0.92rem; line-height: 1.6; margin-bottom: 0.85rem; max-width: none; }
.collab-contact { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.collab-contact a, .collab-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.collab-contact a { transition: color 0.25s ease; }
.collab-contact a:hover { color: var(--clay); }
.collab-contact svg { color: var(--ink-muted); flex-shrink: 0; }
.collabs .stitch-divider { margin: clamp(1.35rem, 3vw, 1.9rem) 0; }

@media (max-width: 620px) {
  .collab, .collab--reverse { grid-template-columns: 1fr; text-align: center; }
  .collab--reverse .collab-logo { order: 0; }
  .collab-logo { width: 100%; max-width: 210px; margin: 0 auto; }
  .collab-text p { margin-inline: auto; }
  .collab-contact { justify-content: center; }
}

/* ============================================================
   PRODUCT CAROUSEL (roulette) + product cards
   ============================================================ */
.pcarousel {
  position: relative;
  overflow: hidden;
  background: var(--cream-light);
  /* 4:5 rather than 3:4: the card is ~45px shorter, so more of the row is
     on screen without touching the type below it */
  aspect-ratio: 4 / 5;
  border-radius: 14px;              /* sits inside a rounded product card */
  touch-action: pan-y;
}
/* the big one on a product page is a framed photo, not a card */
.pcarousel--lg {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  box-shadow: 14px 14px 0 var(--ink-shadow);
}
.pcarousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.pcarousel-track img {
  min-width: 100%;
  width: 100%;
  height: 100%;
  /* fills the frame, no empty bands. If one photo ever crops badly, give that
     single <img> a style like  object-position: top;  to shift what is kept. */
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;                  /* click a photo to see it full size */
}
/* on the Products page the photo opens the product page instead, so the
   cursor has to promise a link rather than a zoom */
.pcarousel-links .pcarousel-track img { cursor: pointer; }
/* when the viewer shows a single picture, hide its arrows and counter */
.lightbox-single .lightbox-nav,
.lightbox-single .lightbox-count { display: none; }

.pcarousel--lg::after {             /* dashed frame on the big photo only */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed var(--ink-frame);
  border-radius: 5px;
  pointer-events: none;
  z-index: 2;
}

.pcarousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(239, 233, 226, 0.92);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pcarousel:hover .pcarousel-arrow,
.pcarousel:focus-within .pcarousel-arrow { opacity: 1; }
.pcarousel-arrow:hover { color: var(--cream); background: var(--clay); border-color: var(--clay); }
.pcarousel-arrow:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; opacity: 1; }
.pcarousel-prev { left: 20px; }
.pcarousel-next { right: 20px; }
@media (hover: none) {              /* always show on touch devices */
  .pcarousel-arrow { opacity: 1; }
}

.pcarousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.pcarousel-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.pcarousel-dot.active { background: var(--clay); transform: scale(1.3); }
.pcarousel-single .pcarousel-arrow,
.pcarousel-single + .pcarousel-dots { display: none; }

/* ------------------------------------------------------------
   Product page: the big photo and its thumbnail strip together
   On a laptop the 4:5 photo was tall enough to push the strip off the
   bottom of the screen, so the other pictures were invisible until you
   scrolled. The photo is now capped by the height that is actually left
   once the header, the back link and the strip have taken their share,
   and because the height drives the width through the aspect ratio the
   picture shrinks whole instead of being cropped. It never grows past
   the size it has today, so a tall screen looks unchanged.
   ------------------------------------------------------------ */
@media (min-width: 861px) {
  .product-detail .pcarousel-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .pcarousel--lg {
    /* 324px = header + section padding + back link + the strip below, plus
       room to spare so a bookmarks bar or a taller font cannot clip it */
    height: min(675px, calc(100vh - 324px));
    width: auto;
    max-width: 100%;
  }
  .product-detail .pcarousel-thumbs { width: 100%; }
}

/* thumbnail strip (Amazon style, horizontal) */
.pcarousel-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
}
/* the big photo throws a 14px offset shadow, so its strip sits well below it */
.pcarousel--lg + .pcarousel-thumbs { margin-top: 1.4rem; }
.pcarousel-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--cream-light);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.pcarousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcarousel-thumb:hover { opacity: 1; transform: translateY(-2px); }
.pcarousel-thumb.active { opacity: 1; border-color: var(--clay); }
.pcarousel-thumb:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* "zero waste" badge for pieces made entirely from leftover fabric: a woven
   label in clay, its ends stitched down. It sits in the text flow rather
   than over the photo, so it never covers the piece it is describing. */
.zero-waste {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--clay);
  background-image:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px 4.5px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px 4.5px);
  background-size: 1.2px calc(100% - 8px), 1.2px calc(100% - 8px);
  background-position: 6px 4px, calc(100% - 6px) 4px;
  background-repeat: no-repeat;
  border-radius: 3px;
  padding: 0.42rem 1.05rem;
  transform: rotate(-1.5deg);
  white-space: nowrap;
  box-shadow: 0 6px 12px -8px rgba(195, 72, 17, 0.8);
}
/* on a product card, between the description and the details link */
.pcard .zero-waste { align-self: flex-start; margin: 0.15rem 0 1.1rem; }
/* on a product page, beside the category label at the top */
.pd-stamp-row .zero-waste { transform: rotate(-2deg); }
/* and again under the specs, where it carries a sentence */
.pd-waste {
  /* No rule of its own: the last spec row already draws one, and two lines
     with an empty gap between them read as a mistake. The badge sits on its
     own line so the text starts at the same left edge as every other
     paragraph on the page. */
  margin-top: 1.4rem;
}
.pd-waste .zero-waste { margin-bottom: 0.8rem; }
.pd-waste p { font-size: 0.92rem; margin: 0; }

/* product card on the Products page: same tile and lift as the home cards */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 1rem 1rem 1.35rem;
}
.product-grid .pcard {
  transition:
    transform  0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity    0.9s ease;
}
.product-grid .pcard:hover,
.product-grid .pcard.on {
  transform: translateY(-8px) rotate(-1.4deg);
  box-shadow: 10px 12px 0 var(--clay);
}
.pcard-meta { display: block; margin-top: 1.1rem; }
/* "The Boxy Sweater" is the longest of the three names: hold it on one line
   and let it shrink a little rather than wrap onto two */
.pcard-meta h3, .product-meta h3 { text-wrap: balance; }
.pcard-meta h3 { font-size: clamp(1.15rem, 1.55vw, 1.5rem); white-space: nowrap; }
/* all three names now carry an <em>, so the long one is marked explicitly */
.pcard-meta h3.is-long { white-space: normal; }
.pcard h3 { margin-bottom: 0; }
.pcard-hint { font-size: 0.92rem; margin: 0.6rem 0 1.1rem; }
.pcard-link {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.25rem;
  transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.pcard-link:hover { color: var(--clay); border-bottom-color: var(--clay); gap: 0.75rem; }

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* let the columns shrink: without this a long thumbnail strip widens the
   whole grid and pushes the page into horizontal scrolling */
.product-detail > * { min-width: 0; }
@media (max-width: 860px) { .product-detail { grid-template-columns: 1fr; } }
/* product name on the detail page: smaller, with a stitched underline that
   is exactly as wide as the name (fit-content), not a fixed length */
.pd-title {
  font-size: clamp(1.85rem, 3.2vw, 2.4rem);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.5rem;
}
.pd-title::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.5rem;
  background-image: repeating-linear-gradient(to right, var(--ink) 0 5px, transparent 5px 11px);
}
.pd-stamp-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.pd-body h2 { margin-bottom: 1rem; }
.pd-body p { margin-bottom: 1.1rem; }
.pd-lead { font-size: 1.05rem; }
.pd-note {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}
.pd-note strong { color: var(--ink); font-weight: 500; }
/* both info boxes react like the product cards, a size smaller. On a phone
   the one nearest the middle of the screen takes it (.on, set by JS). */
.pd-note, .pd-care {
  transition:
    transform    0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow   0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    border-color 0.3s ease;
}
.pd-note:hover, .pd-note.on,
.pd-care:hover, .pd-care.on {
  transform: translateY(-4px) rotate(-0.8deg);
  box-shadow: 8px 9px 0 var(--clay);
  border-left-color: var(--clay);
}
.pd-specs {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.pd-specs li {
  display: flex;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
}
/* The value shares the row with its label and wraps inside its own column.
   Without this a long value (the fabric list) is pushed onto a line of its
   own and no longer lines up with the values above and below it. */
.pd-specs li > span + span { flex: 1 1 0; min-width: 0; }
@media (max-width: 560px) {
  /* too narrow for two columns: the label sits above its value */
  .pd-specs li { flex-wrap: wrap; }
  .pd-specs li > span + span { flex: 1 1 100%; }
}
.pd-specs li:first-child { border-top: 1px solid var(--line-soft); }
.pd-spec-label {
  flex: 0 0 9.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
/* care instructions: short, scannable lines under the specs */
.pd-care {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink-muted);
  border-radius: 10px;
  background: var(--paper);
  padding: 1rem 1.15rem;
  margin-bottom: 1.75rem;
}
.pd-care-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.pd-care ul { list-style: none; margin: 0; padding: 0; }
.pd-care li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 0.3rem;
  color: var(--ink-soft);
}
.pd-care li:last-child { margin-bottom: 0; }
.pd-care li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.pd-care p { font-size: 0.9rem; margin: 0; }

.pd-credit {
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 1.25rem;
}
/* product pages have no tall page header, so the content starts near the top */
.pd-section { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
  transition: color 0.25s ease, gap 0.25s ease;
}
.pd-back:hover { color: var(--clay); gap: 0.75rem; }

/* photo banner above the events list, same proportions as the About photo */
.events-banner {
  position: relative;
  max-width: 800px;
  margin: 0 auto 2rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  transform: rotate(0.8deg);
  box-shadow: 12px 12px 0 var(--ink-shadow);
  transition: transform 0.5s var(--spring-soft), box-shadow 0.5s var(--spring-soft);
}
.events-banner:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: 12px 16px 0 var(--clay); }
.events-banner img { width: 100%; height: 100%; object-fit: cover; }
.events-banner::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--ink-frame);
  border-radius: 6px;
  pointer-events: none;
}

/* ============================================================
   PHOTO CREDITS
   Who is in the picture, where, and when. A <figure class="framed">
   wraps the image box so the credit can sit underneath without
   becoming a grid item of its own and breaking the two-column
   layouts. The top margin clears the offset frame shadow.
   ============================================================ */
figure.framed { margin: 0; }

.photo-credit {
  margin: 1.75rem 0 0;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--ink-muted);
}
.photo-credit .pc-who { color: var(--ink-soft); }

/* The events banner is centred and narrower than the page. Note the selector
   is figure.events-figure, not .events-figure: it has to match the specificity
   of figure.framed above or the margin reset there wins and the banner loses
   both its centring and the gap before the list. */
figure.events-figure {
  max-width: 800px;
  margin: 0 auto clamp(2.75rem, 5vw, 3.75rem);
}
.events-figure .events-banner { max-width: none; margin: 0; }
/* this banner's shadow is 10px rather than 16px, so its credit sits closer */
.events-figure .photo-credit { margin-top: 1rem; }
/* this banner's shadow is 10px rather than 16px, so its credit sits closer */

/* ============================================================
   LEGAL PAGES (Impressum, Datenschutz) — text first, quieter
   ============================================================ */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal h3 {
  font-size: 1.15rem;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
  margin: 1.6rem 0 0.5rem;
}
.legal p, .legal li { font-size: 0.95rem; line-height: 1.75; max-width: none; }
.legal p { margin-bottom: 0.9rem; }
.legal ul { margin: 0 0 1rem 0; padding-left: 0; }
.legal ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.4rem;
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 5px; height: 1px;
  background: var(--ink);
}
.legal a { color: var(--ink); border-bottom: 1px solid var(--line); transition: color .25s ease, border-color .25s ease; }
.legal a:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* the address / contact block at the top of the Impressum */
.legal-facts {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.15rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink);
  border-radius: 10px;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
}
.legal-facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  padding: 0.45rem 0;
}
.legal-facts dd { margin: 0; padding: 0.45rem 0; font-size: 0.95rem; }
@media (max-width: 560px) {
  .legal-facts { grid-template-columns: 1fr; gap: 0; }
  .legal-facts dd { padding-top: 0; margin-bottom: 0.6rem; }
}

/* "still to fill in" marker, so nothing goes live half-finished by accident */
.legal-todo {
  background: rgba(195, 72, 17, 0.14);
  color: var(--clay);
  font-size: 0.82rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}
.legal-updated { font-size: 0.82rem; color: var(--ink-muted); margin-top: 2.5rem; }
/* the English and Spanish legal pages are translations for convenience;
   the German text is the one that counts for a German business */
.legal-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: rgba(11, 54, 154, 0.06);
  border-left: 3px solid var(--ink);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-top: 2rem;
}

/* footer legal row */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  align-items: center;
}
.footer-legal a {
  font-size: 0.8rem;
  color: var(--ink-muted);
  transition: color 0.25s ease;
}
.footer-legal a:hover { color: var(--clay); }

/* ============================================================
   EVENTS (markets & pop-ups)
   Each event is a ticket, with the punched half-circles down its sides.
   ============================================================ */
.events {
  max-width: 920px;
  margin: 0 auto;
}
.event {
  position: relative;
  background:
    radial-gradient(circle at 0 50%, transparent 13px, var(--paper) 13.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 13px, var(--paper) 13.5px) right / 51% 100% no-repeat;
  border-radius: 16px;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.75rem, 5vw, 3rem);
  filter: drop-shadow(0 14px 18px rgba(11, 54, 154, 0.12));
  transition: transform 0.5s var(--spring-soft), filter 0.5s ease;
}
.event:hover { transform: translateY(-4px) rotate(-0.4deg); filter: drop-shadow(8px 10px 0 rgba(195, 72, 17, 0.9)); }
.event > * { position: relative; z-index: 1; }
.event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.8rem;
}
.event-head h3 { margin: 0; }
.event-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.32rem 0.95rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  transform: rotate(2deg);
}
.event-tag--market {
  color: #fff;
  border-color: var(--clay);
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px 4.5px) 5px 4px / 1.2px calc(100% - 8px) no-repeat,
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px 4.5px) calc(100% - 5px) 4px / 1.2px calc(100% - 8px) no-repeat,
    var(--clay);
}
.event-tag--store  { color: var(--ink); }
.event-desc { font-size: 0.95rem; margin-bottom: 1.1rem; max-width: 62ch; }
.event-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.event-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
a.event-detail { transition: color 0.25s ease; }
a.event-detail:hover { color: var(--clay); }
.event-detail svg { color: var(--clay); flex-shrink: 0; }
.events .stitch-divider { margin: clamp(1.25rem, 3vw, 1.75rem) 22%; opacity: 0.6; }

/* the photo above the list is a print held up with a strip of tape */
.events-figure { position: relative; }
.events-figure::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -14px;
  width: 104px;
  height: 30px;
  z-index: 3;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px),
    rgba(11, 54, 154, 0.32);
  transform: rotate(-32deg);
  clip-path: polygon(3% 0, 97% 0, 100% 16%, 97% 33%, 100% 50%, 97% 67%, 100% 84%, 97% 100%, 3% 100%, 0 84%, 3% 67%, 0 50%, 3% 33%, 0 16%);
  pointer-events: none;
}

/* ============================================================
   REVIEWS: a single-slide carousel
   Each review is a patch sewn onto the page: paper, stitched round the
   edge, a big clay quotation mark worked into the corner. Under it a
   thread is sewn while the review rests, so you can see when the next
   one is coming.
   ============================================================ */
.review-carousel {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(0.4rem, 2vw, 1.1rem);
}
.rc-viewport {
  position: relative;
  /* every slide sits in the same grid cell, so the box is exactly as tall as
     the longest review. Adding a longer one later can no longer clip it. */
  display: grid;
  min-height: 200px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(11, 54, 154, 0.025) 0 1px, transparent 1px 4px),
    var(--paper);
  border-radius: 22px;
  padding: clamp(2.2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.75rem) clamp(2.4rem, 5vw, 3.1rem);
  box-shadow: inset 0 0 0 1px rgba(11, 54, 154, 0.1), 0 24px 44px -30px rgba(11, 54, 154, 0.55);
  transform: rotate(-0.6deg);
}
.rc-viewport::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px dashed rgba(11, 54, 154, 0.2);
  border-radius: 15px;
  pointer-events: none;
}
.rc-viewport::after {
  content: "\201C";
  position: absolute;
  top: -0.12em;
  left: 0.18em;
  font-size: 7.5rem;
  line-height: 1;
  font-weight: 600;
  color: var(--clay);
  opacity: 0.16;
  pointer-events: none;
}
.rc-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.5rem;
  opacity: 0;
  transform: translateX(45px) rotate(1.5deg);
  transition: transform 0.7s var(--spring-soft), opacity 0.5s ease;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.rc-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rc-slide.to-left  { opacity: 0; transform: translateX(-45px) rotate(-1.5deg); }
.rc-slide.to-right { opacity: 0; transform: translateX(45px) rotate(1.5deg); }

.rc-stars {
  color: var(--clay);
  letter-spacing: 0.18em;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.rc-stars .st { display: inline-block; }
.rc-slide.active .rc-stars .st { animation: starPop 0.6s var(--spring) both; }
.rc-slide.active .rc-stars .st:nth-child(2) { animation-delay: 0.07s; }
.rc-slide.active .rc-stars .st:nth-child(3) { animation-delay: 0.14s; }
.rc-slide.active .rc-stars .st:nth-child(4) { animation-delay: 0.21s; }
.rc-slide.active .rc-stars .st:nth-child(5) { animation-delay: 0.28s; }
@keyframes starPop {
  from { opacity: 0; transform: scale(0.2) rotate(-90deg); }
}
.rc-slide blockquote {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2.7vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 auto 1.25rem;
}
.rc-meta { display: flex; flex-direction: column; gap: 0.15rem; align-items: center; }
.rc-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.rc-item {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* the thread sewn along the bottom while a review rests */
.rc-progress {
  position: absolute;
  left: 2.25rem; right: 2.25rem; bottom: 1.25rem;
  height: 2px;
  z-index: 1;
  background: repeating-linear-gradient(to right, var(--clay) 0 6px, transparent 6px 11px) 0 0 / 0% 100% no-repeat;
}
.rc-progress.run { animation: seamSew var(--hold, 5s) linear forwards; }
.review-carousel:hover .rc-progress.run { animation-play-state: paused; }

.rc-arrow {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px dashed rgba(11, 54, 154, 0.4);
  background: var(--paper);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.45s var(--spring);
}
.rc-arrow:hover { color: #fff; background: var(--clay); border-color: var(--clay); border-style: solid; }
.rc-prev:hover { transform: translateX(-3px) rotate(-8deg); }
.rc-next:hover { transform: translateX(3px) rotate(8deg); }
.rc-arrow:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.rc-dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
}
.rc-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  background: var(--line);
  opacity: 0.6;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.35s var(--spring), opacity 0.25s ease;
}
.rc-dot.active { background: var(--clay); opacity: 1; width: 24px; }

@media (max-width: 620px) {
  .rc-arrow { width: 36px; height: 36px; }
  .review-carousel { column-gap: 0.35rem; }
  .rc-viewport { transform: none; }
}

@keyframes seamSew { to { background-size: 100% 100%; } }

/* ============================================================
   SEND BUTTON (contact form)
   Solid, full-width. Three states via data-state:
   idle → sending → sent
   ============================================================ */
.send-btn {
  position: relative;
  width: 100%;
  margin-top: 1.25rem;
  padding: 1.15rem 1.8rem;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 4px 14px rgba(11, 54, 154, 0.2);
  transition: background 0.3s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* clay wash that sweeps in from the left on hover */
.send-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.send-btn:hover::before { transform: scaleX(1); }
.send-btn:hover {
  transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: 0 8px 0 var(--ink);
}
.send-btn:active { transform: translateY(0); }
.send-btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* label + icon */
.send-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  transition: opacity 0.25s ease, transform 0.35s ease;
}
.send-btn-icon { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.send-btn:hover .send-btn-icon { transform: translate(3px, -3px) rotate(8deg); }

/* status overlay (sending / sent) sits on top, hidden until needed */
.send-btn-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.send-btn-sending,
.send-btn-sent {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.3s ease;
}

/* --- sending: label flies off, "Sending…" fades in --- */
.send-btn[data-state="sending"] { cursor: wait; }
.send-btn[data-state="sending"] .send-btn-label {
  opacity: 0;
  transform: translate(60px, -50px) rotate(12deg);
}
.send-btn[data-state="sending"] .send-btn-sending {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

/* --- sent: check mark, sage confirmation --- */
.send-btn[data-state="sent"] {
  background: #082b7a;
  cursor: default;
}
.send-btn[data-state="sent"]::before { transform: scaleX(0); }
.send-btn[data-state="sent"] .send-btn-label {
  opacity: 0;
  transform: translateY(-12px);
}
.send-btn[data-state="sent"] .send-btn-sent {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}
.send-btn[data-state="sent"]:hover { transform: none; box-shadow: 0 4px 14px rgba(11, 54, 154, 0.2); }

@media (prefers-reduced-motion: reduce) {
  .send-btn, .send-btn::before, .send-btn-label,
  .send-btn-icon, .send-btn-sending, .send-btn-sent { transition-duration: 0.01ms; }
  .send-btn[data-state="sending"] .send-btn-label { transform: none; }
}

/* ============================================================
   CONTACT FORM: mistakes, and the thank-you that stays
   ============================================================ */
/* a tip under the field it belongs to, never a popup */
.field-error {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--error);
  line-height: 1.4;
}
.field-error::before { content: "! "; font-weight: 600; }
.form input.has-error,
.form textarea.has-error,
.form select.has-error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

/* Once the message is away the form is replaced by this and stays replaced,
   so nobody sends the same enquiry twice. Reloading the page brings the form
   back. The stitch draws itself in, the same idea as the intro animation. */
.form-sent {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--clay);
  border-radius: 14px;
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  /* the panel stretches to the height of the column beside it, so centre
     the message inside rather than letting it sit at the top */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}
/* the closing stitch, so the message is fenced above and below */
.form-sent::after {
  content: "";
  display: block;
  width: min(260px, 72%);
  height: 2px;
  margin: 1.9rem auto 0;
  transform: scaleX(0);
  transform-origin: right center;
  background: repeating-linear-gradient(to right,
    var(--ink) 0 6px, transparent 6px 13px);
  animation: sentStitch 1.5s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards;
}
/* a line-drawn face, so it takes the cobalt and never turns into a yellow emoji */
.sent-smile {
  width: 1em; height: 1em;
  vertical-align: -0.09em;
  margin-left: 0.3em;
  color: var(--clay);
}
.form-sent-stitch {
  display: block;
  width: min(260px, 72%);
  height: 2px;
  margin: 0 auto 1.9rem;
  transform: scaleX(0);
  transform-origin: left center;
  background: repeating-linear-gradient(to right,
    var(--ink) 0 6px, transparent 6px 13px);
  animation: sentStitch 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}
@keyframes sentStitch { to { transform: scaleX(1); } }
.form-sent h3 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.85s both;
}
.form-sent p {
  max-width: 34ch;
  margin: 0 auto;
  opacity: 0;
  animation: fadeUp 0.7s ease 1.05s both;
}
@media (prefers-reduced-motion: reduce) {
  .form-sent-stitch, .form-sent::after { animation: none; transform: scaleX(1); }
  .form-sent h3, .form-sent p { animation: none; opacity: 1; }
}

/* =========================================================
   PAGE-HEADER (used on subpages)
   ========================================================= */
.page-header {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
}
.page-header h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
}
.page-header h1 em { color: var(--clay); }
.page-header .eyebrow { justify-content: center; margin-bottom: 1rem; }
.page-header .eyebrow::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--clay);
}
.page-header p { margin: 1.5rem auto 0; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* page-load stagger */
/* Every element in the hero has to be listed here, or it skips the entrance
   and is simply present when the page loads, which reads as a glitch. */
.hero .eyebrow, .hero h1, .hero-lead, .hero .btn, .hero .btn-link,
.hero-tags, .hero-figure {
  animation: fadeUp 1s ease both;
}
/* every page that is not Home opens on a .page-header, which had no
   entrance at all and so simply appeared. Same fade-up, same stagger. */
.page-header h1, .page-header p { animation: fadeUp 1s ease both; }
.page-header p  { animation-delay: 0.14s; }
.hero-lead      { animation-delay: 0.1s; }
.hero .btn      { animation-delay: 0.2s; }
.hero .btn-link { animation-delay: 0.28s; }
.hero-tags      { animation-delay: 0.35s; }
.hero-figure    { animation-delay: 0.15s; }

/* =========================================================
   INTRO SPLASH
   Shown once per browser session, on the first page the visitor opens.
   The <html> element gets .splash-on from a tiny script in the <head>,
   so this paints immediately with no flash of the page underneath.
   ========================================================= */
.splash { display: none; }

html.splash-on { overflow: hidden; }           /* no scrolling while it shows */
html.splash-on .splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cream);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.1rem;
  /* timing: logo draws to 2.4s, stitch to 2.5s, holds until 3.3s, gone by 4.0s */
  animation: splashOut 0.7s ease 3.3s forwards;
}

/* the wordmark is uncovered left to right, like a seam being sewn */
html.splash-on .splash img {
  width: min(46vw, 420px);
  height: auto;
  opacity: 0;
  animation: splashDraw 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}
@keyframes splashDraw {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(0.97); }
  12%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0);    transform: scale(1); }
}

/* a coloured running stitch drawn underneath, same palette as the dividers */
html.splash-on .splash-stitch {
  width: min(46vw, 420px);
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background-image: repeating-linear-gradient(to right, var(--ink) 0 5px, transparent 5px 11px);
  animation: splashStitch 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.9s forwards;
}
@keyframes splashStitch { to { transform: scaleX(1); } }

@keyframes splashOut {
  to { opacity: 0; visibility: hidden; }
}

/* hold the hero's entrance until the splash has lifted, so it is not
   played out of sight behind the overlay */
html.splash-on .hero .eyebrow,
html.splash-on .hero h1,
html.splash-on .hero-lead,
html.splash-on .hero .btn,
html.splash-on .hero .btn-link,
html.splash-on .hero-tags,
html.splash-on .hero-figure,
html.splash-on .page-header h1,
html.splash-on .page-header p { animation-play-state: paused; }

/* someone who prefers less motion gets a short, still logo */
@media (prefers-reduced-motion: reduce) {
  html.splash-on .splash img {
    animation: splashFadeIn 0.3s ease forwards;
    clip-path: none;
  }
  html.splash-on .splash-stitch { animation: none; transform: scaleX(1); }
  html.splash-on .splash { animation-delay: 1.8s; }
  @keyframes splashFadeIn { to { opacity: 1; transform: none; } }
}

/* The Products page leads with a heading, a paragraph and a divider before
   the first card. Trimming that run-up (and only there) lifts the cards a
   long way up the screen without changing any text. */
body[data-page="products"] .page-header { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
body[data-page="products"] .page-header + .stitch-divider + section { padding-top: clamp(2rem, 4vw, 3rem); }

/* ============================================================
   PROMO BAND
   The cobalt ribbon still runs the next market across the page, and now
   it crosses a tape measure running the other way. Both go a little
   faster while you scroll. The tape is drawn by js/main.js.
   To retire the band, delete the <a class="promo-band"> block from the
   three index.html files. Nothing else refers to it.
   ============================================================ */
.promo-wrap {
  overflow: hidden;
  padding: 40px 0;
  position: relative;
  z-index: 1;
  margin-top:    clamp(-2.5rem, -2.2vw, -0.9rem);
  margin-bottom: clamp(-6rem,   -5.6vw, -2.2rem);
}
.promo-band {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding: 0.9rem 0;
  width: 108%;
  margin-left: -4%;
  transform: rotate(-1.8deg);
  text-decoration: none;
  box-shadow: 0 12px 24px -14px rgba(11, 54, 154, 0.7);
}
/* a stitched hem along both edges of the ribbon */
.promo-band::before, .promo-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: repeating-linear-gradient(to right, rgba(239, 233, 226, 0.55) 0 6px, transparent 6px 11px);
  pointer-events: none;
}
.promo-band::before { top: 5px; }
.promo-band::after  { bottom: 5px; }
.promo-band:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }
.promo-track {
  display: flex;
  width: max-content;
  animation: promoRoll 42s linear infinite;
}
.promo-track.js-roll, .tape-track.js-roll { animation: none; }
.promo-track span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.promo-track b { font-weight: 600; }
.promo-track i {
  font-style: normal;
  color: var(--clay-soft);
  padding: 0 1.4rem;
  display: inline-block;
  animation: starSpin 6s linear infinite;
}
@keyframes starSpin { to { transform: rotate(360deg); } }
@keyframes promoRoll { to { transform: translateX(-50%); } }

/* the tape measure */
.tape {
  position: absolute;
  z-index: 1;
  left: -4%;
  width: 108%;
  top: 50%;
  height: 30px;
  margin-top: -15px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(11, 54, 154, 0.14), 0 8px 16px -10px rgba(11, 54, 154, 0.5);
  transform: rotate(2.4deg);
  pointer-events: none;
}
.tape-track {
  display: flex;
  height: 100%;
  width: max-content;
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(11, 54, 154, 0.55) 0 1px, transparent 1px 6.5px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(11, 54, 154, 0.55) 0 1px, transparent 1px 6.5px);
  background-size: 100% 8px, 100% 4px, 100% 8px, 100% 4px;
  background-position: 0 0, 0 0, 0 100%, 0 100%;
  background-repeat: no-repeat;
  animation: promoRoll 60s linear infinite reverse;
}
.tape-track span {
  flex: 0 0 26px;
  margin-left: -13px;
  margin-right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.tape-track span:nth-child(5n) { color: var(--clay); font-size: 0.68rem; }

@media (max-width: 620px) {
  .promo-track span { font-size: 0.85rem; }
  .promo-track i { padding: 0 1rem; }
  .promo-track { animation-duration: 20s; }
  .promo-wrap { padding: 46px 0; }
  .tape { height: 26px; margin-top: -13px; transform: translateY(20px) rotate(5deg); }
  .promo-band { transform: rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-track, .tape-track { animation: none !important; }
  .promo-track span:nth-child(2) { display: none; }
  .promo-track { width: 100%; justify-content: center; }
  .tape { display: none; }
  .promo-band { width: 100%; margin-left: 0; transform: none; }
  .promo-wrap { padding: 0; }
  .promo-track i { animation: none; }
}

/* =========================================================
   UTILITY
   ========================================================= */
.text-center { text-align: center; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2.5rem; }

/* selection */
::selection { background: var(--clay); color: var(--cream); }

/* someone who prefers less motion gets these pieces standing still */
@media (prefers-reduced-motion: reduce) {
  .sew-progress::after, .dict-caret, .rc-progress { display: none !important; }
  .dict-word .ch { opacity: 1 !important; }
  .rc-slide, .rc-stars .st, .lightbox.open, .lightbox.open img { animation: none !important; transition-duration: 0.01ms !important; }
}