/* The commission atelier: an atelier visit in four acts.
   Phone-first; every question wears its own garment. */

.atelier-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.atelier { max-width: 880px; min-width: 0; }
@media (max-width: 1000px) { .atelier-layout { display: block; } }

/* ---------- atmosphere column: the page dresses itself ---------- */
.atmosphere { position: sticky; top: 5.2rem; }
.atmosphere figure { margin: 0; padding: clamp(6px, 0.9vw, 14px); background: color-mix(in srgb, var(--bone) 55%, var(--paper)); outline: 1px solid var(--rule); }
.atmosphere img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 6%; transition: opacity 0.5s ease; }
.atmosphere img.swap { opacity: 0; }
.atmosphere figcaption { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 64%, transparent); }
@media (max-width: 1000px) { .atmosphere { display: none; } }

/* mobile atmosphere strips between acts */
.act-strip { display: none; }
@media (max-width: 1000px) {
  .act-strip { display: block; margin: 1.5rem calc(var(--gutter) * -1) 0; }
  /* a 5:2 strip is a severe crop, so hold the top of the frame */
  .act-strip img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; object-position: center 20%; }
}

/* ---------- acts open like rooms ---------- */
.act { position: relative; padding-block: clamp(2.4rem, 6vh, 4rem); border-top: 1px solid var(--rule); overflow: hidden; }
.act:first-of-type { border-top: 0; }
@media (max-width: 640px) { .act .ghost { display: none; } }
.act .ghost { position: absolute; right: -0.5rem; top: -1.2rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 14vw, 8rem); line-height: 1; color: color-mix(in srgb, var(--ink) 5%, transparent); user-select: none; pointer-events: none; }
.act-label { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.8rem; position: relative; }
.act-label .counter { color: var(--lacquer); }
.act-label h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.act-label .act-line { font-size: 0.95rem; color: color-mix(in srgb, var(--ink) 62%, transparent); font-style: italic; }

/* ---------- progress: words, not anonymous dashes ---------- */
.form-progress { position: static; background: color-mix(in srgb, var(--paper) 94%, transparent); padding-block: 0.7rem; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--rule); }
.form-progress .where { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lacquer); white-space: nowrap; }
.form-progress .bars { flex: 1; display: flex; gap: 0.5rem; }
.form-progress .bars span { flex: 1; height: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); transition: background 0.4s ease; }
.form-progress .bars span.done { background: var(--lacquer); }
@media (max-width: 700px) { .form-progress .bars { display: none; } }

/* ---------- commission types: image plates ---------- */
.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .plates { grid-template-columns: 1fr 1fr; } }
.plate { position: relative; }
.plate input { position: absolute; opacity: 0; pointer-events: none; }
.plate label {
  display: flex; flex-direction: column; gap: 0.55rem; height: 100%;
  padding: clamp(8px, 1vw, 12px);
  background: color-mix(in srgb, var(--bone) 55%, var(--paper));
  outline: 1px solid var(--rule);
  cursor: pointer;
  transition: outline-color 0.25s ease, transform 0.25s ease;
}
.plate label:hover { transform: translateY(-3px); }
.plate .plate-media { position: relative; }
.plate .plate-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 6%; filter: grayscale(1); transition: filter 0.4s ease; }
.plate .plate-badge { position: absolute; top: 0.55rem; right: 0.55rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; background: var(--paper); outline: 1px solid var(--rule); opacity: 0; transition: opacity 0.25s ease; }
.plate .plate-badge .star { width: 0.8rem; color: var(--lacquer); }
.plate .plate-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem 0.35rem 0.4rem; }
.plate .plate-name { font-family: var(--font-display); font-weight: 750; text-transform: uppercase; font-size: 1.02rem; }
.plate .plate-line { font-size: 0.83rem; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.plate .plate-turn { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lacquer); margin-top: auto; }
.plate input:checked + label { outline: 2px solid var(--lacquer); outline-offset: -2px; }
.plate input:checked + label .plate-media img { filter: grayscale(0); }
.plate input:checked + label .plate-badge { opacity: 1; }
.plate input:focus-visible + label { outline: 2px solid var(--lacquer); outline-offset: -2px; }
@media (max-width: 520px) { .plate .plate-line { display: none; } }

/* ---------- letter lines: numbered fields ---------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.6rem; }
.field > label, .field > .glabel { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; display: flex; gap: 0.7rem; align-items: baseline; }
.field .fno { color: var(--lacquer); }
.field .hint { font-size: 0.85rem; color: color-mix(in srgb, var(--ink) 64%, transparent); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); min-height: 48px;
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  padding: 0.7rem 0.4rem; border-radius: 0;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--lacquer); background: color-mix(in srgb, var(--bone) 45%, transparent); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.4rem 2rem; }

/* the brief: a letter sheet */
.letter-sheet { position: relative; background: color-mix(in srgb, var(--bone) 62%, var(--paper)); outline: 1px solid var(--rule); padding: clamp(1.2rem, 3vw, 2rem); }
.letter-sheet .star { position: absolute; right: 1rem; bottom: 1rem; width: 1.6rem; color: color-mix(in srgb, var(--ink) 12%, transparent); }
.letter-sheet textarea { width: 100%; min-height: 11rem; resize: vertical; line-height: 1.8; background: transparent; border: 0; font-size: 1.02rem; }
.letter-sheet textarea:focus { outline: none; background: transparent; border: 0; }

/* reference links become chips */
.link-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.link-chips .chip { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; padding: 0.45rem 0.7rem; outline: 1px solid var(--rule); background: var(--paper); max-width: 100%; }
.link-chips .chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16em; }
.link-chips .chip button { border: 0; background: none; cursor: pointer; font-family: var(--font-mono); color: var(--lacquer); font-size: 0.8rem; padding: 0 0.1rem; }

/* ---------- garment tags for budget ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tag { position: relative; }
.tag input { position: absolute; opacity: 0; pointer-events: none; }
.tag { outline: 1px solid var(--rule); clip-path: polygon(0 50%, 0.85rem 0, 100% 0, 100% 100%, 0.85rem 100%); }
.tag:focus-within { outline: 2px solid var(--lacquer); outline-offset: -2px; }
.tag label {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px;
  padding: 0.6rem 1rem 0.6rem 1.4rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--bone) 62%, var(--paper));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tag label::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--paper); outline: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.tag input:checked + label { background: var(--ink); color: var(--paper); }
.tag input:checked + label::before { background: var(--ink); outline-color: var(--paper); }


/* ---------- fittings: three pictogram cards ---------- */
.fit-cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 0.8rem; }
@media (max-width: 560px) { .fit-cards { grid-template-columns: 1fr; } }
.fit-card { position: relative; }
.fit-card input { position: absolute; opacity: 0; pointer-events: none; }
.fit-card label { display: flex; flex-direction: column; gap: 0.5rem; min-height: 44px; padding: 1rem; outline: 1px solid var(--rule); background: color-mix(in srgb, var(--bone) 45%, var(--paper)); cursor: pointer; transition: outline-color 0.2s ease; }
.fit-card .pict { display: inline-flex; }
.fit-card .pict .star { width: 0.85rem; color: var(--lacquer); }
.fit-card .pict .star + .star { margin-left: 0.25rem; }
.fit-card .fit-name { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.fit-card .fit-note { font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.fit-card input:checked + label { outline: 2px solid var(--lacquer); outline-offset: -2px; background: var(--paper); }
.fit-card input:focus-visible + label { outline: 2px solid var(--lacquer); outline-offset: -2px; }

/* honeypot */
/* display none, not off-screen: off-screen labelled fields are exactly what
   password managers and autofill populate, which would silently discard a real
   brief as a bot (security review 2026-08-09, blocker 3) */
.hp-field { display: none; }

/* ---------- send ---------- */
.form-actions { padding-block: clamp(2rem, 5vh, 3rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.submit-btn {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: 1.15rem 2.2rem; cursor: pointer; min-height: 52px;
  display: inline-flex; align-items: center; gap: 0.8rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.submit-btn .star { width: 0.85rem; }
.submit-btn:hover { background: var(--lacquer); border-color: var(--lacquer); }
.submit-btn:disabled { opacity: 0.55; cursor: wait; }
@media (max-width: 700px) { .submit-btn { width: 100%; justify-content: center; } }
.form-note { font-size: 0.85rem; color: color-mix(in srgb, var(--ink) 64%, transparent); max-width: 34em; }

/* status + appointment card */
.form-status { display: none; padding: 1.2rem 1.4rem; outline: 1px solid var(--rule); max-width: 34em; }
.form-status.show { display: block; }
.form-status.ok { outline-color: var(--digital); }
.form-status.err { outline-color: var(--lacquer); }
.appointment { display: none; max-width: 30em; padding: clamp(1.6rem, 4vw, 2.4rem); background: color-mix(in srgb, var(--bone) 62%, var(--paper)); outline: 1px solid var(--ink); }
.appointment.show { display: block; }
.appointment .star { width: 1.1rem; color: var(--lacquer); }
.appointment h3 { font-family: var(--font-display); font-weight: 750; text-transform: uppercase; font-size: 1.2rem; margin-top: 0.8rem; }
.appointment p { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.8rem; line-height: 1.9; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { cursor: pointer; padding-block: 1rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.01em; list-style: none; display: flex; justify-content: space-between; align-items: baseline; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-mono); color: var(--lacquer); }
.faq-item[open] summary::after { content: '-'; }
.faq-item p { padding: 0 0 1.2rem; max-width: 40em; font-size: 0.95rem; color: color-mix(in srgb, var(--ink) 78%, transparent); }

/* invalid-submit affordances */
.plates.needs-attention { outline: 2px solid var(--lacquer); outline-offset: 6px; }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: var(--lacquer); }

/* the date field dresses like the atelier */
.field input[type="date"] {
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--bone) 45%, var(--paper));
  border: 1px solid var(--rule); border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  padding: 0.7rem 0.9rem; color: var(--ink);
}
.field input[type="date"]:focus { border-color: var(--lacquer); background: var(--paper); }
.field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; padding: 0.2rem; opacity: 0.85;
  filter: invert(23%) sepia(43%) saturate(1483%) hue-rotate(346deg) brightness(92%);
}
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper { color: var(--ink); }
.field input[type="date"]:invalid::-webkit-datetime-edit { color: color-mix(in srgb, var(--ink) 45%, transparent); }

/* friendly field notes */
.field-note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lacquer); }
/* thank-you film */
.appointment { position: relative; overflow: hidden; }
.appointment video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.appointment > *:not(video) { position: relative; }

/* ---------- notify-mode: a single room, a single ask ---------- */
.notify-mode .act[data-act="1"], .notify-mode .act[data-act="2"], .notify-mode .act[data-act="3"], .notify-mode .act-strip { display: none; }
#notify-line[hidden], #notify-consent[hidden] { display: none; }
.notify-line { margin-top: 1rem; }

/* the atelier card as a working object (founder direction 2026-08-09):
   one plate that turns over, beside the actions a printed card implies.
   Bone plate, lacquer accents, mono captions, tokens only. */
.card-desk { display: grid; grid-template-columns: minmax(260px, 480px) minmax(240px, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: 1.4rem; max-width: 900px; align-items: start; }
@media (max-width: 700px) { .card-desk { grid-template-columns: 1fr; } }
.card-flip { cursor: pointer; }
.card-flip:focus-visible { outline: 2px solid var(--lacquer); outline-offset: 4px; }
.card-faces { position: relative; perspective: 1200px; }
.card-face { margin: 0; padding: clamp(6px, 0.9vw, 14px); background: color-mix(in srgb, var(--bone) 55%, var(--paper)); outline: 1px solid var(--rule); backface-visibility: hidden; transform: rotateY(0deg); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.card-face img { width: 100%; height: auto; display: block; }
.card-face-back { position: absolute; inset: 0; display: flex; align-items: center; transform: rotateY(180deg); }
.card-flip.turned .card-face { transform: rotateY(-180deg); }
.card-flip.turned .card-face-back { transform: rotateY(0deg); }
@media (prefers-reduced-motion: reduce) {
  .card-face { transition: none; }
}
.card-hint { margin-top: 0.7rem; color: color-mix(in srgb, var(--ink) 64%, transparent); }
.card-lede { font-size: 0.98rem; max-width: 26em; }
.card-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.card-action { border: none; background: none; cursor: pointer; padding: 0; color: var(--ink); border-bottom: 1px solid var(--lacquer); padding-bottom: 0.2rem; }
.card-action:hover { color: var(--lacquer); }
.card-action:focus-visible { outline: 2px solid var(--lacquer); outline-offset: 3px; }
.card-action.copied { color: var(--lacquer); }

/* The card, drawn rather than photographed. It used to be two JPEGs with the
   address baked in, which is how an old gmail survived on a printed-looking
   object long after the atelier address existed, and why the proportions were
   a 2.57 wide crop instead of a card. Real text is correct, selectable,
   translatable and weighs nothing. 85 by 55 is the standard card. */
.card-art {
  aspect-ratio: 85 / 55; background: #F1F0EE; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(0.9rem, 2.2vw, 1.6rem);
}
.card-art-front .card-name {
  font-family: var(--font-display); font-weight: 800; line-height: 1.02;
  font-size: clamp(0.95rem, 2.3vw, 1.35rem); letter-spacing: 0.01em; color: var(--ink);
}
.card-art-front .card-name .star { width: 0.5em; margin-left: 0.3em; vertical-align: super; }
.card-art-front .card-role {
  font-style: italic; font-size: clamp(0.62rem, 1.5vw, 0.82rem); line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.card-art-back { align-items: center; justify-content: center; gap: clamp(0.8rem, 3vw, 2rem); }
.card-art-back .card-mono {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(1.8rem, 6vw, 3.4rem); letter-spacing: -0.01em; line-height: 1;
}
.card-art-back .card-line {
  font-family: var(--font-mono); font-size: clamp(0.5rem, 1.35vw, 0.72rem);
  letter-spacing: 0.04em; color: color-mix(in srgb, var(--ink) 72%, transparent);
  text-align: center; overflow-wrap: anywhere;
}
.card-art-back .card-dot {
  position: absolute; top: clamp(0.8rem, 2vw, 1.4rem); right: clamp(0.8rem, 2vw, 1.4rem);
  width: clamp(0.5rem, 1.6vw, 0.9rem); aspect-ratio: 1; border-radius: 50%; background: var(--sky);
}