/* =============================================================================
   Ben.M — Atelier                                      assets/css/pages/atelier.css
   -----------------------------------------------------------------------------
   Personalisation & made to order (atelier.html):
     1  Page tokens            5  Made to order — the gold thread
     2  Hero                   6  Appointment form
     3  Section heads          7  FAQ
     4  Configurator           8  Closing band
        4a stage · 4b steps · 4c options · 4d initials · 4e summary
     9  RTL · reduced motion
   Tokens and theme slots from main.css only; logical properties throughout.
   ========================================================================== */


/* =============================================================================
   1  Page tokens
   ========================================================================== */
.page--atelier {
  /* data swatch — the silver foil (no silver exists in the house palette) */
  --at-silver: linear-gradient(105deg, #6E7377 0%, #C8CDD0 24%, #F3F5F6 42%, #9AA0A4 60%, #DCE0E3 78%, #7B8185 100%);
  --at-ease: var(--ease-out);
}


/* =============================================================================
   2  Hero — headline on the stage, the atelier photograph on the end side
   ========================================================================== */
.atelier-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
  overflow: clip;
}
.atelier-hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(44vw, 940px);
  z-index: -1;
}
.atelier-hero__frame { position: absolute; inset: 0; }
.atelier-hero__frame > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 66% 42%;
}
/* scrims: header legibility at the top, the photo melting into the stage at its start edge */
.atelier-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--c-green-950) 72%, transparent), transparent 24%),
    linear-gradient(to top, color-mix(in srgb, var(--c-green-950) 70%, transparent), transparent 30%),
    linear-gradient(to right, var(--c-green-950), color-mix(in srgb, var(--c-green-950) 40%, transparent) 22%, transparent 48%);
}
.atelier-hero__caption {
  position: absolute;
  inset-block-end: clamp(22px, 4.5vh, 44px);
  inset-inline-end: var(--gutter);
  color: var(--fg);
}

.atelier-hero__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 7vh, 96px);
  padding-block: calc(var(--header-h) + clamp(28px, 9vh, 120px)) clamp(28px, 5vh, 56px);
}
.atelier-hero__content { max-inline-size: min(62vw, 1040px); }
.atelier-hero__title {
  margin-block: clamp(18px, 3vh, 34px) clamp(20px, 3.4vh, 40px);
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: clamp(4rem, 12.2vw, 13.5rem);
  line-height: var(--lh-mega);
  letter-spacing: var(--ls-mega);
  color: var(--fg-strong);
}
/* "yours" — foil, indented so it steps into the photograph, one sheen when the page arrives */
.atelier-hero__title em {
  display: inline-block;
  margin-inline-start: .92em;
  padding-inline-end: .1em;
  margin-inline-end: -.1em;
  background-image: var(--g-sheen), var(--g-foil);
  background-size: 260% 100%, 100% 100%;
  background-position: 170% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.atelier-hero__title.is-sheen em { animation: atelier-sheen 2.6s var(--ease-inout) .9s 1 both; }
@keyframes atelier-sheen {
  from { background-position: 170% 0, 0 0; }
  to   { background-position: -70% 0, 0 0; }
}
.atelier-hero__lead {
  max-inline-size: 30em;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg);
  text-wrap: pretty;
}
.atelier-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-block-start: clamp(28px, 4.2vh, 46px);
}

.atelier-hero__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 3.2vw, 60px);
  max-inline-size: min(52vw, 860px);
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  border-block-start: 1px solid var(--line);
}
.atelier-hero__notes li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  text-transform: var(--tt-ui);
  color: var(--fg-strong);
}
.atelier-hero__num {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
}
:lang(ckb) .atelier-hero__title { font-size: clamp(3rem, 9vw, 10rem); }
:lang(ckb) .atelier-hero__title em { margin-inline-start: .6em; }

@media (max-width: 999.98px) {
  .atelier-hero { min-block-size: 0; }
  .atelier-hero__media {
    position: relative;
    inset: auto;
    inline-size: 100%;
    block-size: clamp(360px, 62svh, 760px);
  }
  .atelier-hero__frame > img { object-position: 64% 36%; }
  .atelier-hero__media::after {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--c-green-950) 70%, transparent), transparent 30%),
      linear-gradient(to top, var(--c-green-950), color-mix(in srgb, var(--c-green-950) 55%, transparent) 26%, transparent 55%);
  }
  .atelier-hero__caption { inset-block: calc(var(--header-h) + 14px) auto; }
  .atelier-hero__inner {
    position: relative;
    margin-block-start: calc(clamp(4rem, 12.2vw, 13.5rem) * -1.15);
    padding-block-start: 0;
  }
  :lang(ckb) .atelier-hero__inner { margin-block-start: calc(clamp(3rem, 9vw, 10rem) * -1.5); }
  .atelier-hero__content, .atelier-hero__notes { max-inline-size: none; }
  .atelier-hero__title em { margin-inline-start: .55em; }
}
@media (max-width: 559.98px) {
  .atelier-hero__actions .c-btn { flex: 1 1 100%; }
  .atelier-hero__notes { flex-direction: column; gap: 12px; }
  .atelier-hero__caption { display: none; }
}


/* =============================================================================
   3  Section heads — eyebrow + title, text on the end side (desktop)
   ========================================================================== */
.atelier-head {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  margin-block-end: clamp(48px, 7vw, 112px);
}
.atelier-head__title {
  margin-block-start: clamp(16px, 2vw, 28px);
  max-inline-size: 12em;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
}
.atelier-head__text {
  max-inline-size: 33em;
  color: var(--fg);
  text-wrap: pretty;
}
.atelier-head__aside { display: grid; justify-items: start; gap: 18px; max-inline-size: 33em; }
.atelier-head__note { font-size: var(--fs-small); color: var(--fg-muted); }
@media (min-width: 1000px) {
  .atelier-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(40px, 6vw, 120px);
  }
}


/* =============================================================================
   4  Configurator
   ========================================================================== */
.atelier-config { --stage-h: clamp(250px, 40svh, 440px); }
.atelier-config__grid { display: grid; grid-template-columns: minmax(0, 1fr); }

/* ---- 4a  Stage: the specimen table with the live tag -------------------- */
.atelier-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: clamp(16px, 2.2vw, 32px);
  background:
    radial-gradient(110% 80% at 50% 42%, color-mix(in srgb, var(--c-green-600) 46%, transparent), transparent 64%),
    radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--c-green-950) 80%, transparent), transparent 70%),
    var(--c-green-900);
  color: var(--fg);
  overflow: clip;
}
.atelier-stage__corners { --corners-inset: 10px; }
.atelier-stage__top,
.atelier-stage__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-inline-size: 0;
}
.atelier-stage__hint {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-muted);
  text-align: end;
}
@media (hover: none), (pointer: coarse) { .atelier-stage__hint { display: none; } }

.atelier-stage__area {
  position: relative;
  container-type: size;
  display: grid;
  place-items: center;
  min-block-size: 0;
}
.atelier-tag {
  --aspect: 1.3333;
  position: relative;
  inline-size: min(90cqw, calc(80cqh * var(--aspect)));
  aspect-ratio: var(--aspect);
}
.atelier-tag__ghost {                         /* invisible copy of the preview for the fly-to-bag ghost */
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
}
.atelier-stage__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--f-display);
  font-style: var(--fst-em);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.75rem);
  color: var(--c-ivory);
  text-shadow: 0 1px 14px color-mix(in srgb, var(--c-green-950) 70%, transparent);
  opacity: 0;
  transition: opacity .7s var(--at-ease);
}
.atelier-stage__empty > span { display: inline-flex; align-items: center; gap: 10px; opacity: .78; }
.atelier-stage__empty > span::after {          /* a gold caret, waiting */
  content: '';
  inline-size: 1px;
  block-size: 1.1em;
  background: var(--c-gold-400);
  animation: atelier-caret 1.1s steps(1) infinite;
}
@keyframes atelier-caret { 50% { opacity: 0; } }
.atelier-stage.is-empty .atelier-stage__empty { opacity: 1; }

.atelier-stage__foot {
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
}
.atelier-stage__spec {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-muted);
}
.atelier-stage__total {
  flex: none;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--accent-soft);
}

@media (min-width: 1000px) {
  .atelier-config__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 104px);
    align-items: start;
  }
  .atelier-stage {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    block-size: clamp(520px, calc(100svh - var(--header-h) - 40px), 900px);
  }
  .atelier-steps :is(input, button, a, select) { scroll-margin-block: calc(var(--header-h) + 24px) 24px; }
}
@media (max-width: 999.98px) {
  .atelier-stage {
    position: sticky;
    top: 0;
    z-index: 3;
    block-size: var(--stage-h);
    margin-inline: calc(var(--gutter) * -1);
    padding: 14px var(--gutter) 12px;
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--c-green-950) 80%, transparent);
  }
  .atelier-stage__corners { display: none; }
  .atelier-stage__total { font-size: 1.15rem; }
  .atelier-tag { inline-size: min(80cqw, calc(82cqh * var(--aspect))); }
  .atelier-steps { padding-block-start: clamp(32px, 7vw, 56px); }
  .atelier-steps :is(input, button, a, select) { scroll-margin-block: calc(var(--stage-h) + 24px) 24px; }
}
/* phones on their side: the stage scrolls with the page */
@media (max-width: 999.98px) and (max-height: 540px) {
  .atelier-stage { position: relative; block-size: 78svh; }
  .atelier-steps :is(input, button, a, select) { scroll-margin-block: calc(var(--header-h) + 16px) 16px; }
}

/* ---- 4b  Steps ---------------------------------------------------------- */
.atelier-steps {
  display: grid;
  gap: clamp(40px, 4.6vw, 60px);
  max-inline-size: 640px;
  min-inline-size: 0;
}
.atelier-step { min-inline-size: 0; }
.atelier-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 18px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--line);
}
.atelier-step__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--f-display);
  font-weight: calc(var(--fw-display) + 100);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: 0;
  color: var(--fg-strong);
}
.atelier-step__num {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  color: var(--accent);
}
.atelier-step__value {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-muted);
}
.atelier-step__count { font-variant-numeric: tabular-nums; }
.atelier-step__count.is-full { color: var(--accent); }

/* ---- 4c  Options (native radios, visually replaced) --------------------- */
.atelier-opt {
  position: relative;
  display: grid;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.atelier-opt__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.atelier-opt:has(.atelier-opt__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.atelier-opt__name {
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: calc(var(--ls-ui) * .8);
  text-transform: var(--tt-ui);
  color: var(--fg-strong);
}
.atelier-opt__text { font-size: .8125rem; line-height: 1.5; color: var(--fg-muted); }

/* items */
.atelier-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.atelier-item {
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-block: 10px;
  padding-inline: 10px 12px;
  border: 1px solid var(--line);
  transition: border-color .45s var(--at-ease), background-color .45s var(--at-ease);
}
.atelier-item:hover { border-color: var(--accent-soft); }
.atelier-item:has(.atelier-opt__input:checked) {
  border-color: var(--fg-strong);
  background-color: var(--surface);
}
.atelier-item__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}
.atelier-item__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--at-ease);
}
.atelier-item:hover .atelier-item__media img { transform: scale(1.07); }
.atelier-item__body { display: grid; gap: 3px; min-inline-size: 0; }
.atelier-item__type {
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--accent);
}
.atelier-item__name {
  font-family: var(--f-display);
  font-weight: calc(var(--fw-display) + 100);
  font-size: 1.22rem;
  line-height: 1.15;
  color: var(--fg-strong);
}
.atelier-item__price { font-size: var(--fs-small); color: var(--fg-muted); }
.atelier-item__check {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--fg-strong);
  color: var(--bg);
  transform: scale(0);
  transition: transform .55s var(--at-ease);
}
.atelier-item__check .c-icon { --icon-size: 12px; }
.atelier-item:has(.atelier-opt__input:checked) .atelier-item__check { transform: scale(1); }
@media (max-width: 559.98px) {
  .atelier-item { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .atelier-item__name { font-size: 1.02rem; }
  .atelier-item__check { inset-block-end: 8px; inset-inline-end: 8px; inline-size: 16px; block-size: 16px; }
}

/* leathers */
.atelier-leathers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 8px;
}
.atelier-leather {
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding-block: 4px;
  text-align: center;
}
.atelier-leather__chip {
  position: relative;
  display: block;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c-white) 24%, transparent), transparent 56%),
    var(--swatch, var(--c-green-700));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 12%, transparent), 0 0 0 1px var(--line);
  transition: box-shadow .45s var(--at-ease), transform .45s var(--at-ease), opacity .45s;
}
.atelier-leather__chip img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s var(--at-ease);
}
.atelier-leather__chip img.is-loaded { opacity: 1; }
.atelier-leather:hover .atelier-leather__chip { transform: scale(1.06); }
.atelier-leather:has(.atelier-opt__input:checked) .atelier-leather__chip {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 12%, transparent), 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-soft);
}
.atelier-leather__name {
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-strong);
}
.atelier-leather.is-off { cursor: not-allowed; }
.atelier-leather.is-off .atelier-leather__chip { transform: none; box-shadow: 0 0 0 1px var(--line); }
.atelier-leather.is-off .atelier-leather__chip::before {     /* veiled with the paper colour … */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--bg) 66%, transparent);
}
.atelier-leather.is-off .atelier-leather__chip::after {      /* … and struck through, like a sold-out size */
  content: '';
  position: absolute;
  z-index: 2;
  inset-inline: -10%;
  inset-block-start: 50%;
  block-size: 1px;
  background: var(--fg-muted);
  transform: rotate(-45deg);
}
.atelier-leather.is-off .atelier-leather__name { color: var(--fg-muted); opacity: .6; }
.atelier-leather-info {
  display: grid;
  gap: 6px;
  margin-block-start: 22px;
  min-block-size: 4.2em;
}
.atelier-leather-info__text {
  font-family: var(--f-display);
  font-style: var(--fst-em);
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--fg-strong);
  text-wrap: pretty;
}
.atelier-leather-info__note { font-size: .8125rem; color: var(--fg-muted); }
.atelier-leather-info__note.is-switch { color: var(--accent); }
@media (max-width: 379.98px) { .atelier-leather__chip { inline-size: 48px; block-size: 48px; } }

/* foils + lettering */
.atelier-foils,
.atelier-styles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.atelier-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atelier-foil,
.atelier-style {
  align-content: start;
  gap: 6px;
  padding: 12px 12px 16px;
  border: 1px solid var(--line);
  transition: border-color .45s var(--at-ease), background-color .45s var(--at-ease);
}
.atelier-foil:hover, .atelier-style:hover { border-color: var(--accent-soft); }
.atelier-foil:has(.atelier-opt__input:checked),
.atelier-style:has(.atelier-opt__input:checked) {
  border-color: var(--fg-strong);
  background-color: var(--surface);
}
.atelier-foil__chip {                       /* a scrap of the chosen leather with the letters pressed in */
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-block-end: 8px;
  background:
    radial-gradient(90% 80% at 30% 20%, color-mix(in srgb, var(--c-white) 16%, transparent), transparent 60%),
    var(--chip, var(--c-green-700));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 18%, transparent), inset 0 -10px 18px -12px color-mix(in srgb, var(--c-ink) 60%, transparent);
  transition: background-color .6s;
}
.atelier-foil__sample,
.atelier-style__sample {
  font-family: var(--f-serif-latin);
  font-style: italic;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .02em;
  white-space: nowrap;
}
.atelier-foil__sample {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--c-ink) 55%, transparent));
}
.atelier-foils.is-roman .atelier-foil__sample,
.atelier-style--roman .atelier-style__sample {
  font-style: normal;
  font-weight: 600;
  letter-spacing: .14em;
  margin-inline-end: -.14em;
  text-transform: uppercase;
}
.atelier-foil--gold .atelier-foil__sample,
.atelier-foil--silver .atelier-foil__sample {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.atelier-foil--gold .atelier-foil__sample { background-image: var(--g-foil); }
.atelier-foil--silver .atelier-foil__sample { background-image: var(--at-silver); }
.atelier-foil--blind .atelier-foil__sample {
  color: color-mix(in srgb, var(--chip, var(--c-green-700)) 68%, var(--c-ink));
  text-shadow: 0 1px 0 color-mix(in srgb, var(--c-white) 16%, transparent), 0 -1px 0 color-mix(in srgb, var(--c-ink) 50%, transparent);
  filter: none;
}
.atelier-style__sample {
  display: block;
  margin-block-end: 6px;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  color: var(--fg-strong);
}
@media (max-width: 559.98px) {
  .atelier-foils { gap: 8px; }
  .atelier-foil { padding: 8px 8px 12px; }
  .atelier-foil .atelier-opt__text { display: none; }
}

/* ---- 4d  Initials ------------------------------------------------------- */
.atelier-initials .c-field__input {
  min-block-size: 68px;
  padding-block: 10px 8px;
  font-family: var(--f-serif-latin);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.2vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.atelier-initials .c-field__label { inset-block-start: 44px; }
.atelier-initials .c-field__input:focus + .c-field__label,
.atelier-initials .c-field__input:not(:placeholder-shown) + .c-field__label { transform: translateY(-38px) scale(.72); }
.atelier-initials.is-invalid .c-field__input { border-block-end-color: var(--error); }
.atelier-initials.is-invalid .c-field__line { background: var(--error); transform: scaleX(1); }
.atelier-initials__hint { margin-block-start: 10px; }
.atelier-initials__msg {
  min-block-size: 1.5em;                      /* reserved: messages never push the page around */
  margin-block-start: 4px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--error);
}
.atelier-initials__msg.is-info { color: var(--accent); }

/* ---- 4e  Summary -------------------------------------------------------- */
.atelier-summary {
  position: relative;
  padding: clamp(26px, 3.2vw, 44px);
  background: var(--surface);
}
.atelier-summary__corners { --corners-inset: 10px; }
.atelier-summary__title {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-strong);
}
.atelier-summary__list { margin-block: 18px 6px; }
.atelier-summary__list > div,
.atelier-summary__prices > p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-block: 11px;
  border-block-end: 1px solid var(--line);
}
.atelier-summary__list dt {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: var(--tt-ui);
  color: var(--fg-muted);
}
.atelier-summary__list dd {
  margin: 0;
  min-inline-size: 0;
  font-family: var(--f-display);
  font-weight: calc(var(--fw-display) + 100);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--fg-strong);
  text-align: end;
}
.atelier-summary__list dd.is-none { font-family: var(--f-sans); font-size: var(--fs-small); color: var(--fg-muted); }
.atelier-summary__initials {
  font-family: var(--f-serif-latin);
  font-style: italic;
  letter-spacing: .12em;
}
.atelier-summary__initials.is-roman { font-style: normal; font-weight: 600; }
.atelier-summary__prices { margin-block-start: 18px; }
.atelier-summary__prices > p { font-size: var(--fs-small); color: var(--fg); border-block-end-style: dotted; }
.atelier-summary__prices > p.atelier-summary__total {
  align-items: center;
  padding-block: 16px 0;
  border: 0;
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: var(--ls-ui);
  text-transform: var(--tt-ui);
  color: var(--fg-strong);
}
.atelier-summary__total .c-price {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  letter-spacing: 0;
  text-transform: none;
}
.atelier-summary__actions { display: grid; gap: 10px; margin-block-start: 24px; }
.atelier-add { justify-content: space-between; }
.atelier-add__price { font-size: .8125rem; letter-spacing: .04em; opacity: .85; }
.atelier-summary__note { margin-block-start: 18px; font-size: .8125rem; color: var(--fg-muted); }
.atelier-summary__inperson {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-block-start: 14px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--fg);
}


/* =============================================================================
   5  Made to order — five steps on one stitched gold thread
   ========================================================================== */
.atelier-mto__track { position: relative; }
.atelier-mto__steps {
  display: grid;
  gap: clamp(48px, 8vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.atelier-mto__line {
  position: absolute;
  pointer-events: none;
  background: color-mix(in srgb, var(--c-gold-500) 16%, transparent);
}
.atelier-mto__thread {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 5px, var(--c-gold-500) 5px 7.5px, transparent 7.5px 11px);
  transform: scaleX(0);
  transform-origin: left center;
}
.atelier-mto__mark { position: relative; display: flex; align-items: center; block-size: 24px; }
.atelier-mto__node {
  inline-size: 11px;
  block-size: 11px;
  margin-inline-start: 6px;
  background: var(--bg);
  border: 1px solid var(--accent-soft);
  transform: rotate(45deg);
  transition: background-color .7s var(--at-ease), box-shadow .7s var(--at-ease);
}
.atelier-mto__num {
  display: block;
  margin-block: 22px 20px;
  font-family: var(--f-serif-latin);
  font-weight: 300;
  font-size: clamp(3rem, 4.6vw, 5.2rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-soft);
  transition: color 1s var(--at-ease);
}
.atelier-mto__step.is-lit .atelier-mto__node {
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-gold-500) 14%, transparent);
}
.atelier-mto__step.is-lit .atelier-mto__num { color: var(--accent); }
.atelier-mto__media { aspect-ratio: 4 / 5; margin-block-end: 22px; }
.atelier-mto__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.atelier-mto__step:nth-child(1) .atelier-mto__media img { object-position: 40% 50%; }
.atelier-mto__step:nth-child(2) .atelier-mto__media img { object-position: 52% 50%; }
.atelier-mto__step:nth-child(5) .atelier-mto__media img { object-position: 54% 50%; }
.atelier-mto__title {
  font-family: var(--f-display);
  font-weight: calc(var(--fw-display) + 100);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: 0;
  color: var(--fg-strong);
}
.atelier-mto__text {
  margin-block-start: 10px;
  max-inline-size: 26em;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--fg);
  text-wrap: pretty;
}

/* horizontal: one row, the thread runs through the nodes */
@media (min-width: 1100px) {
  .atelier-mto__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(20px, 2.2vw, 40px);
  }
  .atelier-mto__line { inset-inline: 0; inset-block-start: 10.5px; block-size: 3px; }
  .atelier-mto__step:nth-child(even) .atelier-mto__body { padding-block-start: clamp(48px, 5vw, 88px); }
}
/* vertical: the thread runs down the inline-start edge */
@media (max-width: 1099.98px) {
  .atelier-mto__steps { padding-inline-start: 48px; }
  .atelier-mto__line { inset-block: 12px 0; inset-inline-start: 11px; inline-size: 3px; }
  .atelier-mto__thread {
    background: repeating-linear-gradient(25deg, transparent 0 5px, var(--c-gold-500) 5px 7.5px, transparent 7.5px 11px);
    transform: scaleY(0);
    transform-origin: center top;
  }
  .atelier-mto__step { position: relative; }
  .atelier-mto__mark { position: absolute; inset-block-start: 0; inset-inline-start: -48px; inline-size: 24px; justify-content: center; }
  .atelier-mto__node { margin: 0; }
  .atelier-mto__num { margin-block: -6px 18px; font-size: clamp(2.6rem, 8vw, 4rem); }
  .atelier-mto__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .atelier-mto__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "num media" "title media" "text media";
    grid-template-rows: auto auto 1fr;
    align-content: start;
    column-gap: clamp(28px, 4vw, 56px);
  }
  .atelier-mto__num { grid-area: num; }
  .atelier-mto__media { grid-area: media; margin: 0; aspect-ratio: 4 / 3; }
  .atelier-mto__title { grid-area: title; }
  .atelier-mto__text { grid-area: text; }
}
.atelier-mto__track.is-drawn .atelier-mto__thread { transform: none; }


/* =============================================================================
   6  Appointment
   ========================================================================== */
.atelier-appt__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
.atelier-appt__title { max-inline-size: 9em; }
.atelier-appt__text { margin-block-start: clamp(18px, 2vw, 26px); max-inline-size: 30em; color: var(--fg); }
.atelier-appt__figure {
  max-inline-size: 520px;
  margin-block-start: clamp(36px, 4.5vw, 64px);
  margin-inline-end: 14px;                    /* room for the offset hairline */
}
.atelier-appt__figure .c-frame { --frame-offset: 14px; }
.atelier-appt__media { aspect-ratio: 4 / 3; }
.atelier-appt__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.atelier-appt__figure .c-caption { margin-block-start: 26px; }
.atelier-appt__contact {
  margin-block-start: clamp(36px, 4vw, 52px);
  padding-block-start: clamp(24px, 3vw, 32px);
  border-block-start: 1px solid var(--line);
}
.atelier-appt__contact-title {
  margin-block-end: 10px;
  font-family: var(--f-display);
  font-style: var(--fst-em);
  font-size: 1.3rem;
  color: var(--fg-strong);
}
.atelier-appt__methods { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.atelier-appt__methods a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-block-size: 44px;
  color: var(--fg-strong);
  text-decoration: none;
  transition: color .3s;
}
.atelier-appt__methods a:hover { color: var(--accent); }
.atelier-appt__methods .c-icon { --icon-size: 18px; color: var(--accent); }
.atelier-appt__methods bdi { font-size: var(--fs-small); letter-spacing: .02em; }
.atelier-appt__panel {
  position: relative;
  padding: clamp(26px, 4.4vw, 72px);
  background: var(--surface);
}
.atelier-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-block-start: 8px;
}
.atelier-form__note { max-inline-size: 22em; font-size: .8125rem; color: var(--fg-muted); }
.atelier-form textarea.c-field__input { min-block-size: 120px; }
.atelier-success {
  justify-items: start;
  gap: 14px;
  padding: clamp(8px, 1vw, 16px) 0 0;
  border: 0;
  background: none;
}
.atelier-success:focus { outline: none; }
.atelier-success__seal {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  margin-block-end: 8px;
  border-radius: 50%;
  border: 1px solid var(--accent-soft);
  color: var(--accent);
}
.atelier-success__seal .c-icon { --icon-size: 26px; }
.c-form-success__title.atelier-success__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-h3);
}
.atelier-success__text { max-inline-size: 34em; font-size: 1rem; line-height: var(--lh-body); color: var(--fg); }
.atelier-success__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-block: 14px 8px; }
.atelier-success__again { margin-block-start: 6px; }
@media (min-width: 1000px) {
  .atelier-appt__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
  .atelier-appt__panel { margin-block-start: clamp(40px, 7vw, 120px); }
}
@media (max-width: 559.98px) {
  .atelier-form__foot .c-btn, .atelier-success__actions .c-btn { flex: 1 1 100%; --btn-pad: 18px; gap: 12px; }
  .atelier-form__foot .c-btn__arrow { display: none; }
}
@media (max-width: 419.98px) {
  .atelier-summary .c-btn { --btn-pad: 18px; gap: 10px; }
  .atelier-hero__actions .c-btn { --btn-pad: 20px; }
}


/* =============================================================================
   7  FAQ
   ========================================================================== */
.atelier-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
.atelier-faq__head { display: grid; justify-items: start; align-content: start; gap: 0; }
.atelier-faq__text { margin-block: clamp(18px, 2vw, 26px) 26px; max-inline-size: 28em; color: var(--fg); }
.atelier-faq__list .c-accordion__content p { max-inline-size: 40em; }
@media (min-width: 1000px) {
  .atelier-faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 120px); }
  .atelier-faq__head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}


/* =============================================================================
   8  Closing band — two doors: the collection, the boutiques
   ========================================================================== */
.atelier-next__grid { display: grid; }
.atelier-next__link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-block-size: clamp(440px, 72svh, 780px);
  padding: clamp(28px, 4.4vw, 72px);
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
}
.atelier-next__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 1.6s var(--at-ease);
}
.atelier-next__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.atelier-next__link:nth-child(1) .atelier-next__media img { object-position: 50% 62%; }
.atelier-next__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--c-green-950), color-mix(in srgb, var(--c-green-950) 62%, transparent) 38%, color-mix(in srgb, var(--c-green-950) 20%, transparent) 72%),
    color-mix(in srgb, var(--c-green-950) 22%, transparent);
  transition: opacity .8s var(--at-ease);
}
.atelier-next__link:hover .atelier-next__media { transform: scale(1.045); }
.atelier-next__link:focus-visible { outline-offset: -6px; }
.atelier-next__body { display: grid; justify-items: start; gap: 16px; max-inline-size: 30em; }
.atelier-next__title {
  display: block;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
  text-wrap: balance;
}
.atelier-next__title em { font-style: var(--fst-em); }
:lang(ckb) .atelier-next__title em { color: var(--em); }
.atelier-next__text { max-inline-size: 26em; color: var(--fg); }
.atelier-next__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-block-start: 8px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--accent-soft);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: var(--ls-ui);
  text-transform: var(--tt-ui);
  color: var(--accent);
}
.atelier-next__arrow { display: inline-flex; transition: translate .7s var(--at-ease); }
.atelier-next__link:hover .atelier-next__arrow { translate: 8px 0; }
@media (min-width: 800px) {
  .atelier-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atelier-next__link + .atelier-next__link { border-inline-start: 1px solid var(--line); }
}
@media (max-width: 799.98px) {
  .atelier-next__link { min-block-size: clamp(400px, 64svh, 620px); }
  .atelier-next__link + .atelier-next__link { border-block-start: 1px solid var(--line); }
}


/* =============================================================================
   9  RTL · reduced motion
   ========================================================================== */
[dir="rtl"] .atelier-hero__media::after {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--c-green-950) 72%, transparent), transparent 24%),
    linear-gradient(to top, color-mix(in srgb, var(--c-green-950) 70%, transparent), transparent 30%),
    linear-gradient(to left, var(--c-green-950), color-mix(in srgb, var(--c-green-950) 40%, transparent) 22%, transparent 48%);
}
@media (max-width: 999.98px) {
  [dir="rtl"] .atelier-hero__media::after {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--c-green-950) 70%, transparent), transparent 30%),
      linear-gradient(to top, var(--c-green-950), color-mix(in srgb, var(--c-green-950) 55%, transparent) 26%, transparent 55%);
  }
}
[dir="rtl"] .atelier-initials .c-field__input { text-align: right; }   /* typed Latin letters sit where the label is */
[dir="rtl"] .atelier-mto__thread {
  background: repeating-linear-gradient(65deg, transparent 0 5px, var(--c-gold-500) 5px 7.5px, transparent 7.5px 11px);
  transform-origin: right center;
}
@media (max-width: 1099.98px) {
  [dir="rtl"] .atelier-mto__thread {
    background: repeating-linear-gradient(-25deg, transparent 0 5px, var(--c-gold-500) 5px 7.5px, transparent 7.5px 11px);
    transform-origin: center top;
  }
}
[dir="rtl"] .atelier-next__link:hover .atelier-next__arrow { translate: -8px 0; }

@media (prefers-reduced-motion: reduce) {
  .atelier-mto__thread { transform: none; }
  .atelier-stage__empty > span::after { animation: none; }
  .atelier-next__media, .atelier-item__media img { transition: none; }
}