/* Thraed · The Rail
   A private fitting in four rooms. The engine (scrollcraft.css/js) pins the
   rooms; this file is the page: its own palette and type, not Thraed's app
   identity. Limestone and graphite by day, walnut and ivory in the fitting
   room, one claret accent. */

@font-face { font-family: "Cormorant"; src: url("/atelier/fonts/cormorant.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/atelier/fonts/cormorant-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/atelier/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --lime: #E3DED6;      /* limestone: the day rooms */
  --bone: #EFEBE4;      /* paper: tags, the table */
  --ink: #1B1A19;       /* graphite */
  --smoke: #5F5A54;
  --walnut: #110D0A;    /* the fitting room */
  --ivory: #EEE7DC;
  --ivory-soft: #A89F93;
  --claret: #74282F;
  --claret-lt: #D79C94;
  --bronze: linear-gradient(180deg, #CDB28A 0%, #8C6F4C 42%, #4B3927 100%);

  --sc-canvas: var(--lime);
  --sc-surface: var(--bone);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--smoke);
  --sc-accent: var(--claret);
  --sc-accent-ink: var(--bone);
  --sc-font-display: "Cormorant", Georgia, serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-r-sm: 0px;

  /* garment canvas: every cutout shares one 1000x1520 canvas, hook at top centre */
  --gh: 50svh;
  --gw: calc(var(--gh) * 0.65789);
  --rail-y: 43svh;
  --dgh: 34svh;
  --dgw: calc(var(--dgh) * 0.65789);
}

body { font-weight: 300; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: var(--bone); padding: .6rem .9rem; }

/* ------------------------------------------------------------ type -- */
.display {
  font-family: var(--sc-font-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
  font-feature-settings: "liga", "dlig";
}
.display--hero { font-size: min(clamp(2.6rem, 1rem + 3.6vw, 5.2rem), 8.6svh); max-width: 19ch; }
.display--line { font-size: clamp(1.9rem, 1.15rem + 2.3vw, 3.5rem); font-style: italic; max-width: 21ch; line-height: 1.04; }
.display--section { font-size: clamp(2.1rem, 1.3rem + 2.5vw, 3.9rem); max-width: 15ch; }
.lede { font-size: clamp(1rem, .95rem + .22vw, 1.14rem); line-height: 1.55; color: var(--smoke); max-width: 44ch; margin: 1.2rem 0 0; text-wrap: pretty; }
.body { font-size: clamp(.98rem, .95rem + .12vw, 1.06rem); line-height: 1.6; color: var(--smoke); max-width: 40ch; margin: 1.1rem 0 0; text-wrap: pretty; }
.label { font: 500 .75rem/1.2 var(--sc-font-text); letter-spacing: .18em; text-transform: uppercase; color: var(--smoke); margin: 0; }

.room { position: relative; }

/* ---------------------------------------------------------- ticket -- */
.ticket {
  position: fixed; top: 0; right: clamp(14px, 2.6vw, 40px); z-index: 60;
  width: 11.2rem; transform-origin: 50% 0;
  transition: opacity 320ms var(--sc-ease-out), visibility 0s linear 0s;
}
.ticket.is-away { opacity: 0; visibility: hidden; transition: opacity 320ms var(--sc-ease-out), visibility 0s linear 320ms; }
.ticket__string {
  position: absolute; left: 50%; top: 0; z-index: 2;
  width: 1px; height: calc(1.5rem + .95rem);
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  transition: background 320ms var(--sc-ease-out);
}
.ticket.on-dark .ticket__string { background: color-mix(in oklab, var(--ivory) 55%, transparent); }
.ticket__card {
  position: relative; isolation: isolate; margin-top: 1.5rem;
  padding: 1.55rem 1rem 1rem;
  filter: drop-shadow(0 10px 14px rgb(30 22 14 / .18)) drop-shadow(0 1px 2px rgb(30 22 14 / .14));
}
.ticket__card::before, .plate-tag__card::before, .tag::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bone);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
}
.ticket__eyelet {
  position: absolute; top: .62rem; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1.6px var(--claret), inset 0 1px 2px rgb(0 0 0 / .25);
}
.ticket__mark {
  display: block; text-align: center; text-decoration: none; color: var(--ink);
  font: 500 1.06rem/1 var(--sc-font-display); letter-spacing: .36em; padding-left: .36em; text-transform: uppercase;
  margin-bottom: .75rem;
}
.ticket__rooms { list-style: none; margin: 0; padding: .55rem 0; border-block: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); display: grid; gap: .1rem; }
.ticket__rooms a {
  display: flex; align-items: center; gap: .55rem; padding: .2rem 0;
  font-size: .76rem; color: var(--smoke); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.ticket__rooms a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 35%, transparent); flex: none; }
.ticket__rooms a:hover { color: var(--ink); }
.ticket__rooms a.is-current { color: var(--ink); }
.ticket__rooms a.is-current::before { background: var(--claret); box-shadow: none; }
.ticket__cta {
  display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: .5rem; white-space: nowrap;
  font: 500 .8rem/1.3 var(--sc-font-text); letter-spacing: .01em;
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.ticket__cta:hover { color: var(--claret); }

/* --------------------------------------------------------- the rail -- */
.room--rail { background: var(--lime); }
.rail-stage { background: var(--lime); }
.rail-stage__wall, .door-stage__wall { position: absolute; inset: 0; overflow: hidden; }
.rail-stage__wall img, .door-stage__wall img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; will-change: transform; }
.rail-stage__wall img { transform: translate3d(-7.5%, 0, 0); }
.rail-stage__light {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, rgb(255 248 236 / .32) 0%, rgb(255 248 236 / .08) 34%, transparent 52%);
  mix-blend-mode: soft-light;
}

.rail-copy { position: absolute; z-index: 20; left: var(--sc-gutter); top: clamp(3.5rem, 7svh, 6.5rem); width: min(46rem, 52vw); }
.rail-copy__state { position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
@media (min-width: 1100px) {
  /* the copy column stops short of the label above the rod */
  .rail-copy { width: calc(58vw - var(--sc-gutter) - 12rem); }
}
/* the plaster is mottled; the lede needs more weight than smoke to hold 4.5:1 on its darker patches */
.rail-copy .lede { color: #3A3733; }

.rail { position: absolute; left: 0; right: 0; top: var(--rail-y); height: calc(var(--gh) + 6rem); z-index: 10; }
.rail__rod {
  position: absolute; left: -2%; right: -2%; top: calc(var(--gh) * 0.0185); height: max(4px, .48svh);
  background: var(--bronze); border-radius: 3px;
  box-shadow: 0 .9svh 1.3svh -.5svh rgb(38 28 18 / .38);
}
.rail__track { position: absolute; inset: 0; }

.piece { position: absolute; top: 0; left: 0; width: var(--gw); height: var(--gh); margin: 0; will-change: transform; outline: none; cursor: default; }
.piece { pointer-events: none; }
.piece__hit { position: absolute; top: 0; left: 0; width: 100px; transform-origin: 0 0; pointer-events: auto; z-index: 4; cursor: pointer; }
.piece__hang { position: absolute; inset: 0; transform-origin: 50% 1.4%; will-change: transform; }
.piece__side, .piece__front { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform-origin: 50% 0; backface-visibility: hidden; }
.piece__front { opacity: 0; will-change: transform, opacity; }

/* the rail label: clipped onto the rod above the piece at the focus line. It
   flips up once the rail comes to rest and writes itself. It takes no room on
   the rod, so nothing moves to make space for it. */
.tag {
  position: absolute; z-index: 3; left: 50%; bottom: calc(var(--gh) * 0.9815 + 16px); translate: -50% 0;
  width: 22.5rem; padding: .8rem 1.05rem 1.45rem;
  isolation: isolate; color: var(--ink);
  filter: drop-shadow(0 8px 12px rgb(40 30 20 / .16)) drop-shadow(0 1px 2px rgb(40 30 20 / .12));
  opacity: 0; transform: perspective(700px) rotateX(-78deg); transform-origin: 50% 100%;
  transition: opacity 220ms var(--sc-ease-out), transform 560ms var(--sc-ease-out);
  pointer-events: none;
}
.tag::after {
  content: ""; position: absolute; bottom: .55rem; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1.4px var(--claret);
}
/* the clip: from the eyelet down onto the rod */
.tag__thread {
  position: absolute; left: calc(50% - 1px); top: calc(100% - .55rem - 4px); width: 2px; height: calc(.55rem + 4px + 19px);
  background: linear-gradient(90deg, #C9AD84, #6B5238); z-index: 1;
}
.tag__name {
  display: block; font: italic 400 1.22rem/1.1 var(--sc-font-display); margin-bottom: .5rem;
  clip-path: inset(0 100% 0 0); transition: clip-path 620ms var(--sc-ease-out) 160ms;
}
.tag__fields { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem .9rem; font-size: .76rem; }
.tag__fields div {
  display: flex; flex-direction: column; gap: .05rem; padding-top: .3rem;
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  opacity: 0; transform: translateY(4px);
  transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
}
.tag__fields div:nth-child(1) { transition-delay: 220ms; }
.tag__fields div:nth-child(2) { transition-delay: 270ms; }
.tag__fields div:nth-child(3) { transition-delay: 320ms; }
.tag__fields div:nth-child(4) { transition-delay: 370ms; }
.tag__fields div:nth-child(5) { transition-delay: 420ms; }
.tag__fields div:nth-child(6) { transition-delay: 470ms; }
.tag__fields dt { color: var(--smoke); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.tag__fields dd { margin: 0; white-space: nowrap; }
.piece.is-open .tag { opacity: 1; transform: none; }
.piece.is-open .tag__name { clip-path: inset(0 0 0 0); }
.piece.is-open .tag__fields div { opacity: 1; transform: none; }
.piece:focus-visible .tag::before { outline: 1px solid var(--claret); }


/* -------------------------------------------------------- the table -- */
.room--table { background: var(--bone); }
.table-stage { background: var(--bone); }
.scan {
  position: absolute; margin: 0; left: max(var(--sc-gutter), 6vw); top: 12svh;
  height: 76svh; aspect-ratio: 1200 / 1607;
}
.scan img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.scan__cut { filter: drop-shadow(0 2.2svh 2.4svh rgb(40 30 20 / .22)); }
.scan__photo { clip-path: inset(var(--scan, -2%) 0 0 0); box-shadow: 0 1.4svh 3svh -1svh rgb(40 30 20 / .3); }
.scan__line {
  position: absolute; left: -4%; right: -4%; top: var(--scan, 0%); height: 1px;
  background: var(--ink); opacity: var(--line-o, 0);
}
.scan__line::before, .scan__line::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--ink); }
.scan__line::before { left: 0; } .scan__line::after { right: 0; }
.scan__corners { position: absolute; inset: 4%; opacity: var(--corners-o, 1); pointer-events: none; }
.scan__corners i { position: absolute; width: 9%; aspect-ratio: 1; border: 0 solid rgb(255 255 255 / .92); }
.scan__corners i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.scan__corners i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.scan__corners i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.scan__corners i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

.table-copy {
  position: absolute; z-index: 20; top: 50%; translate: 0 -50%;
  left: calc(max(var(--sc-gutter), 6vw) + 76svh * 0.7467 + clamp(2.5rem, 6vw, 7rem)); right: var(--sc-gutter);
}
.docket { margin-top: 2.6rem; max-width: 23rem; }
.docket__name { margin: 0 0 .7rem; font: italic 400 1.7rem/1.1 var(--sc-font-display); }
.docket__fields { margin: 0; display: grid; }
.docket__fields div { display: flex; justify-content: space-between; gap: 1rem; padding: .48rem 0; border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); font-size: .9rem; }
.docket__fields div:last-child { border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.docket__fields dt { color: var(--smoke); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; padding-top: .15rem; }
.docket__fields dd { margin: 0; }

/* ------------------------------------------------------ the fitting -- */
.room--fitting { background: var(--walnut); color: var(--ivory); }
.fit-stage { background: var(--walnut); }
.fit-stage__panel { position: absolute; inset: 0; }
.fit-stage__panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; max-width: none; }
.fit-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 30%, transparent 45%, rgb(8 6 4 / .7) 100%);
}

.portrait { position: absolute; z-index: 20; margin: 0; left: 50%; top: 15svh; height: 72svh; aspect-ratio: 9 / 16; translate: -50% 0; }
.portrait__frame {
  position: absolute; inset: 0; overflow: hidden;
  border: max(5px, .62svh) solid transparent;
  background: linear-gradient(#1c1510, #1c1510) padding-box,
              linear-gradient(155deg, #A88B62 0%, #3B2D1F 38%, #9E8058 64%, #3F3021 100%) border-box;
  box-shadow: 0 2.6svh 4.4svh -1.6svh rgb(0 0 0 / .75), 0 .5svh 1.1svh rgb(0 0 0 / .45);
}
.portrait__f { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.portrait__f:not([data-f="0"]) { visibility: hidden; }
.portrait__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0);
  background: radial-gradient(90% 42% at 50% -6%, rgb(255 214 162 / .55), transparent 72%),
              linear-gradient(180deg, transparent 60%, rgb(20 12 6 / .35));
  mix-blend-mode: soft-light;
}
.portrait__dim { position: absolute; inset: 0; pointer-events: none; background: #0B0806; opacity: var(--dim, .86); }
.portrait__thread {
  position: absolute; left: 0; right: 0; top: var(--ty, 0%); height: 1px; z-index: 2;
  background: var(--claret-lt); opacity: var(--to, 0); pointer-events: none;
}

.valet { position: absolute; z-index: 30; left: 6vw; top: 22svh; width: 27vw; height: 60svh; }
.valet__bar { position: absolute; left: 0; right: 0; top: calc(44svh * 0.0185); height: max(4px, .44svh); background: var(--bronze); border-radius: 3px; }
.valet__bar::before, .valet__bar::after { content: ""; position: absolute; top: 0; width: 3px; height: 62svh; background: linear-gradient(90deg, #8C6F4C, #3E2F21); }
.valet__bar::before { left: 3%; } .valet__bar::after { right: 3%; }
.valet__g {
  position: absolute; top: 0; height: 44svh; width: auto; max-width: none;
  transform-origin: 50% 0; will-change: transform, opacity, filter;
}
.valet__g[data-step="1"] { left: -4%; }
.valet__g[data-step="2"] { left: 22%; }
.valet__g[data-step="3"] { left: 48%; }

.fit-scrim {
  display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 34svh; z-index: 22; pointer-events: none;
  background: linear-gradient(to top, rgb(17 13 10 / .96) 0%, rgb(17 13 10 / .82) 55%, transparent 100%);
}
.fit-card { position: absolute; z-index: 25; right: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(24rem, 27vw); }
.fit-card .display, .fit-card .label { color: var(--ivory); }
.fit-card .label { color: var(--ivory-soft); margin-bottom: 1.2rem; }
.fit-card__list { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.fit-card__list li { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0; border-top: 1px solid rgb(238 231 220 / .16); }
.fit-card__list li:last-child { border-bottom: 1px solid rgb(238 231 220 / .16); }
.fit-card__list span:first-child { font: 400 1.36rem/1.15 var(--sc-font-display); color: var(--ivory); }
.fit-card__list span:last-child { font-size: .78rem; color: var(--ivory-soft); }
.fit-card__end { margin-top: 1.8rem; }
.fit-card__end .display--line { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.5rem); }
.swap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: .45rem; margin-top: 1.2rem; }
.swap .label { grid-column: 1 / -1; margin: 0 0 .25rem; }
.swap button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: 0 .4rem;
  background: none; border: 1px solid rgb(238 231 220 / .24); color: var(--ivory);
  font: 400 .8rem/1 var(--sc-font-text); cursor: pointer;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.swap button i { width: 10px; height: 10px; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.swap button:hover { border-color: rgb(238 231 220 / .55); }
.swap button:active { transform: translateY(1px); }
.swap button[aria-pressed="true"] { border-color: var(--claret-lt); background: rgb(215 156 148 / .1); }
.swap button:focus-visible { outline-color: var(--claret-lt); }

/* -------------------------------------------------------- the proof -- */
.room--proof { background: var(--lime); padding-block: clamp(5rem, 11vw, 10rem); }
.proof {
  max-width: 78rem; margin: 0 auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
/* the result leads: the try-on is the product, so it takes the tall column at
   its sharp limit (872px natural = 2x at 436px), and the photo and the look
   it was made from stack small beside it */
.proof__plates {
  display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 27.25rem); grid-template-rows: auto auto;
  gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1rem, 2vw, 1.8rem); justify-content: start; align-items: end;
}
.plate { margin: 0; }
.plate img { width: 100%; height: auto; box-shadow: 0 1.6rem 2.4rem -1.4rem rgb(40 30 20 / .4), 0 2px 5px rgb(40 30 20 / .12); }
.plate figcaption { margin-top: .75rem; font: 500 .75rem/1.2 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); }
.plate--you { grid-column: 1; grid-row: 1; }
.plate--look { grid-column: 1; grid-row: 2; }
.plate--result { grid-column: 2; grid-row: 1 / span 2; }
.plate--result figcaption { color: var(--ink); }

/* --------------------------------------------------------- the door -- */
.room--door { background: var(--lime); }
.door-stage { background: var(--lime); --door-top: 14svh; --door-drop: 3svh; }
.door-stage__wall img { left: 50%; translate: -50% 0; }
.door-rail { position: absolute; left: 0; right: 0; top: var(--door-top); height: var(--dgh); z-index: 10; }
.door-rail .rail__rod { top: calc(var(--dgh) * 0.0185); height: max(3px, .36svh); }
.door-rail__track { position: absolute; inset: 0; }
.dpiece { position: absolute; top: 0; left: 0; width: var(--dgw); height: var(--dgh); will-change: transform; }
.dpiece img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform-origin: 50% 0; }
.dpiece .piece__front { opacity: 0; }

/* the tag hangs from the rod on a thread. The thread runs behind the garments
   (z 9, under the rail at 10) so it never crosses a coat; only the last stub,
   through the eyelet, sits on the card. */
.door-string {
  position: absolute; z-index: 9; left: calc(50% - 1px); width: 2px;
  top: calc(var(--door-top) + var(--dgh) * 0.0185); height: calc(var(--dgh) * 0.9815 + var(--door-drop));
  background: linear-gradient(90deg, #C9AD84, #6B5238);
}
.plate-tag { position: absolute; z-index: 12; left: 50%; translate: -50% 0; top: calc(var(--door-top) + var(--dgh) + var(--door-drop)); width: min(31rem, calc(100vw - 2 * var(--sc-gutter))); }
.plate-tag__string {
  position: absolute; left: calc(50% - 1px); bottom: calc(100% - 1.45rem); width: 2px;
  height: 1.45rem; background: linear-gradient(90deg, #C9AD84, #6B5238); z-index: 2;
}
.plate-tag__card {
  position: relative; isolation: isolate; text-align: center;
  padding: 2.3rem clamp(1.4rem, 3vw, 2.4rem) 2rem;
  filter: drop-shadow(0 18px 22px rgb(40 30 20 / .2)) drop-shadow(0 2px 3px rgb(40 30 20 / .14));
}
.plate-tag__card .display { margin-inline: auto; }
.plate-tag__card .body { margin-inline: auto; }
.plate-tag__mark { margin: 0 0 1rem; font: 500 1rem/1 var(--sc-font-display); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; }
.button {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1.5rem;
  min-height: 48px; padding: 0 1.7rem; background: var(--ink); color: var(--bone); text-decoration: none;
  font: 500 .8rem/1 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.button:hover { background: var(--claret); }
.button:active { transform: translateY(1px); }

.foot {
  position: absolute; z-index: 12; left: var(--sc-gutter); right: var(--sc-gutter); bottom: max(1.2rem, 2.4svh);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink);
}
.foot p { margin: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; }
.foot a { color: var(--ink); text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); }

/* Below 1100px there is no room above the rod beside the copy: the label
   sits under the garment instead, kept inside the screen by --mx. */
@media (max-width: 1099px) {
  .tag {
    bottom: auto; top: calc(var(--gh) * var(--b, .9) + .6rem); translate: calc(-50% + var(--mx, 0px)) 0;
    width: min(86vw, 22rem); padding: 1.3rem .9rem .7rem; text-align: center;
    transform: translateY(6px); transform-origin: 50% 0;
  }
  .tag::after { bottom: auto; top: .6rem; }
  .piece.is-open .tag { transform: none; }
  .tag__thread { display: none; }
  .tag__name { font-size: 1.05rem; margin-bottom: .3rem; }
  .tag__fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .45rem; }
  .tag__fields div { border: 0; padding: 0; flex-direction: row; }
  .tag__fields div + div::before { content: "·"; color: var(--smoke); margin-right: .45rem; }
  .tag__fields dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ------------------------------------------------------------ phone -- */
@media (max-width: 860px) {
  :root { --gh: 38svh; --rail-y: 46svh; --dgh: 25svh; }
  .ticket { width: 10.2rem; }
  .ticket__card { padding: 1.35rem .7rem .3rem; }
  .ticket__mark { position: relative; font-size: .9rem; margin-bottom: .85rem; }
  /* the wordmark stays small; its tap area grows to 44px without moving anything */
  .ticket__mark::after { content: ""; position: absolute; inset: -.85rem -.7rem; }
  .ticket__rooms { display: none; }
  .ticket__cta { min-height: 44px; margin-top: 0; }

  .rail-copy { top: 8.6rem; width: auto; right: var(--sc-gutter); }
  .display--hero { font-size: clamp(2rem, 1.3rem + 3vw, 2.6rem); max-width: 13ch; }
  .display--line { font-size: clamp(1.65rem, 1.2rem + 2.2vw, 2.2rem); }
  .lede { margin-top: .8rem; font-size: .94rem; line-height: 1.5; }
  .rail-copy__state--hero .lede { max-width: 30ch; }


  .scan { left: 50%; translate: -50% 0; top: 8svh; height: 48svh; }
  .table-copy { top: auto; bottom: 3svh; translate: none; left: var(--sc-gutter); right: var(--sc-gutter); }
  .table-copy .display--section { font-size: 2rem; max-width: none; }
  .table-copy .body { margin-top: .5rem; font-size: .92rem; }
  .docket { margin-top: 1rem; max-width: none; }
  .docket__name { font-size: 1.25rem; margin-bottom: .3rem; }
  .docket__fields { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
  .docket__fields div { padding: .3rem 0; font-size: .8rem; }
  .docket__fields div:nth-last-child(2) { border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }

  .portrait { top: 22svh; height: 52svh; }
  .valet { left: 4vw; top: 6.5svh; width: 52vw; height: 15svh; }
  .valet__bar { top: calc(14svh * 0.0185); }
  .valet__bar::before, .valet__bar::after { height: 15svh; }
  .valet__g { height: 14svh; }
  .valet__g[data-step="1"] { left: 0; } .valet__g[data-step="2"] { left: 30%; } .valet__g[data-step="3"] { left: 60%; }
  .fit-scrim { display: block; }
  .fit-card { top: auto; bottom: 2.4svh; translate: none; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; min-height: 20svh; }
  .fit-card__a, .fit-card__end { position: absolute; left: 0; right: 0; bottom: 0; }
  .fit-card__a { transition: opacity 280ms var(--sc-ease-out); }
  .fit-done .fit-card__a { opacity: 0; visibility: hidden; transition: opacity 280ms var(--sc-ease-out), visibility 0s linear 280ms; }
  .fit-card .label { margin-bottom: .5rem; }
  .fit-card .display--section { font-size: 1.75rem; }
  .fit-card__list { display: flex; flex-wrap: wrap; gap: 0 .9rem; margin-top: .6rem; }
  .fit-card__list li { border: 0 !important; padding: 0; }
  .fit-card__list span:first-child { font-size: 1.02rem; }
  .fit-card__list span:last-child { display: none; }
  .fit-card__end .display--line { font-size: 1.45rem; }
  .swap { margin-top: .7rem; gap: .35rem; }
  .swap .label { display: none; }
  .swap button { font-size: .76rem; }

  .proof { grid-template-columns: 1fr; }
  .proof__plates { grid-template-columns: 1fr 1fr; grid-template-rows: auto; justify-content: stretch; gap: 1.2rem 1rem; }
  .plate--you { grid-column: 1; grid-row: 1; }
  .plate--look { grid-column: 2; grid-row: 1; }
  .plate--result { grid-column: 1 / -1; grid-row: 2; }

  .door-stage { --door-top: 11svh; --door-drop: 2svh; }
  .plate-tag__card { padding: 2rem 1.2rem 1.6rem; }
  .plate-tag__card .display--section { font-size: 2rem; }
  .foot { flex-direction: column; align-items: flex-start; gap: 0; font-size: .8rem; }
  .foot ul { gap: .3rem; margin-left: -.4rem; }
  .foot a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .4rem; }
}

@media (max-height: 760px) and (min-width: 861px) {
  :root { --dgh: 30svh; --rail-y: 46svh; --gh: 46svh; }
  .rail-copy { top: 2.6rem; }
  .plate-tag__card { padding-block: 1.6rem 1.4rem; }
  .plate-tag__card .display--section { font-size: 2.4rem; }
}

/* small desktops put the label under the garment: shorter garments leave
   room for it under the longest coat */
@media (min-width: 861px) and (max-width: 1099px) {
  :root { --gh: 42svh; --rail-y: 46svh; }
}

/* -------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .tag, .tag__name, .tag__fields div { transition-duration: 160ms; transition-delay: 0ms !important; }
}