/* Built by scripts/build-assets.mjs. Do not edit this file: edit the sheet
   named above each part, and the build step joins them again. */

/* ==== fonts.css ==== */
/* Shivraj Singh V2 — the four typefaces, served from this site.

   They are kept here rather than fetched from a font service, so the page's
   content security policy can stay at font-src 'self' and a visitor in Mhow is
   not asked to reach a third server before the words appear. All four are
   under the SIL Open Font License 1.1.

   Inter          — the text, labels and buttons: a plain, even sans, as the
                    Mercedes-Benz pages set theirs
   Inter Tight    — kept for the chapter rail
   Instrument Serif — the narrow serif of the headlines and the italic ledes
   Pinyon Script  — one engraved initial at the head of each lede, after the
                    studio's own script wordmark
   Tiro Devanagari Hindi — the Hindi labels, a serif that sits with the rest */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiro Devanagari Hindi";
  src: url("../fonts/tiro-devanagari-hindi-devanagari-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* ==== base.css ==== */
/* Shivraj Singh Art Gallery — foundation
   The tokens below are the first draft's; v2.css remaps them to the black,
   white and grey of the gallery. Artwork supplies the colour; the page stays
   quiet. */

:root {
  --green-900: #0d241c;
  --green-800: #123328;
  --green-700: #1b4332;
  --green-600: #245c44;
  --green-050: #eef2ed;

  --gold-600: #9d7826;
  --gold-500: #b8912f;
  --gold-400: #c8a24a;
  --gold-300: #ddbd74;
  --gold-100: #f0e3c4;

  --ivory-000: #fdfbf6;
  --ivory-100: #f7f2e7;
  --ivory-200: #efe8d8;
  --ivory-300: #e3d9c4;

  --ink-900: #17140f;
  --ink-700: #3a352c;
  --ink-500: #6b6355;
  --ink-300: #9a9384;

  --black: #0a0a0a;
  --rule: rgba(23, 20, 15, 0.14);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Gill Sans MT", "Segoe UI", Corbel, system-ui, -apple-system, sans-serif;
  --deva: "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;

  --shell: 1220px;
  /* 16px on a phone, so the header tools sit close to the edge while still
     lining up with the page content below them. */
  --gut: clamp(16px, 4vw, 44px);

  /* One diameter for both round badges at the foot of the page — WhatsApp on
     the left, the studio desk on the right — so they always match. */
  --badge: clamp(56px, 4.6vw, 68px);

  --shadow-frame: 0 2px 4px rgba(23, 20, 15, 0.08), 0 18px 38px rgba(23, 20, 15, 0.14);
  --shadow-lift: 0 1px 2px rgba(23, 20, 15, 0.1), 0 10px 26px rgba(23, 20, 15, 0.1);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* The scrollbar gutter is always reserved, so a page that gains or loses its
   scrollbar never shifts sideways. Note that overflow is never taken off the
   document: doing so removes the scrollport the sticky header depends on. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ivory-100);
  color: var(--ink-900);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* A painting is never distorted. Where a box has a fixed height the canvas is
   contained inside it; thumbnails that deliberately crop set `cover` for
   themselves, which also preserves the ratio. */
img { object-fit: contain; }

a { color: var(--green-700); text-decoration-color: var(--gold-400); text-underline-offset: 3px; }
a:hover { color: var(--green-600); }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  line-height: 1.16;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

hr.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  margin: clamp(30px, 5vw, 56px) 0;
}

/* ---------- type helpers ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 0.9em;
  display: block;
}

.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.28rem);
  color: var(--ink-700);
  max-width: 60ch;
}

.meta {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.hi { font-family: var(--deva); font-size: 0.95em; }

.small { font-size: 0.86rem; color: var(--ink-500); }

.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- layout ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.shell--narrow { max-width: 820px; }

/* ---------- one scroll ----------
   The chapters stand one under the next in ordinary flow. Nothing hides them
   and nothing swaps them: wheeling down from the hero arrives at the commission
   counter of its own accord. The margin keeps a heading clear of the ribbon
   when a link is followed to it. */
.chapter {
  scroll-margin-top: calc(var(--hdr-h, 84px) + 6px);
}

/* Anything else worth linking to inside a chapter is held clear as well. */
.chapter [id] { scroll-margin-top: calc(var(--hdr-h, 84px) + 6px); }

/* Stages are given room to breathe. */
section { padding-block: clamp(64px, 8vw, 120px); }

.band-ivory { background: var(--ivory-000); }

.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .g3 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: 1.1em; }

/* ---------- draft notice ---------- */

.draftbar {
  background: repeating-linear-gradient(
    135deg, #3c2f10, #3c2f10 12px, #4a3a14 12px, #4a3a14 24px
  );
  color: var(--gold-100);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px var(--gut);
}

.draftbar strong { color: #fff; letter-spacing: 0.14em; }

/* ---------- sticky header ---------- */

/* ---------- the ribbon ----------
   Sticky, never fixed and never hidden: the scrollport is left alone, so the
   bar cannot be lost to an overflow rule on a parent. It crosses to its solid
   ground a short way down the page. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--green-900);
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.scrolled .masthead {
  background-color: var(--green-900);
  border-bottom-color: rgba(200, 162, 74, 0.34);
  box-shadow: 0 10px 30px rgba(8, 26, 20, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .masthead { transition: none; }
}

/* Three parts to the bar: the lockup at the left, the links in the middle, the
   tools hard against the right edge. The right gutter is tighter than the page
   gutter so the cluster reads as the end of the bar rather than floating in
   from it. */
/* The bar runs the whole window rather than the content shell, so the tools
   really do end at the right edge instead of stopping at the text column. */
.masthead__in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  max-width: none;
  padding-block: 10px;
  padding-left: clamp(14px, 2vw, 24px);
  padding-right: clamp(12px, 1.4vw, 16px);
}

.brandlock {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  flex: 0 0 auto;
  overflow: visible; /* nothing here may clip the marks */
}

/* Both marks are white artwork on black. Screen blending drops the black
   ground so they sit on the green band without a visible rectangle. */
.brandlock img.mono {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
  mix-blend-mode: screen;
}

/* The script wordmark is a file of its own, the owner's artwork, so it is
   shown whole rather than through a crop window that would clip its
   strokes. */
.wordmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible;
}

.wordmark img {
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

.brandlock__fallback {
  display: none;
  font-family: var(--serif);
  color: var(--ivory-000);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
}

.nav a {
  font-family: var(--sans);
  font-size: 0.83rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ivory-200);
  text-decoration: none;
  padding: 10px 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav a:hover { color: #fff; border-bottom-color: var(--gold-400); }
.nav a[aria-current="page"] { color: var(--gold-300); border-bottom-color: var(--gold-400); }

/* margin-left:auto at every width, so the cluster never comes to rest beside
   the lockup when the links are few or hidden. */
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 0;
}

/* WhatsApp is no longer an icon in the ribbon at any width: it is the round
   badge at the foot of the page, beside the studio desk. See `.wa-dock`. */

.navtoggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-radius: 2px;
  width: 44px;
  height: 44px;
  color: var(--ivory-000);
  font-size: 1.15rem;
  cursor: pointer;
}

@media (max-width: 1040px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--green-900);
    border-bottom: 1px solid rgba(200, 162, 74, 0.34);
    padding: 6px var(--gut) 16px;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .navtoggle { display: grid; place-items: center; order: 3; }
  .wordmark img { height: 30px; }

  /* The nav leaves the flow at this width; the cluster still claims the free
     space and sits flush against the right edge, and the open menu hangs from
     the bar itself rather than floating up inside it when the row is tall. */
  .masthead__in { gap: 10px; position: relative; }
}


@media (max-width: 520px) {
  .wordmark img { height: 24px; }
  .brandlock { gap: 9px; }
  .brandlock img.mono { width: 36px; height: 36px; }
}

/* Only on the narrowest phones is there genuinely no room for the script, and
   only there does the typed name stand in for it. */
@media (max-width: 400px) {
  .wordmark { display: none; }
  .brandlock__fallback { display: block; font-size: 1.05rem; }
}

/* ---------- footer ---------- */

.colophon {
  background: var(--black);
  color: #cfc9bd;
  padding-block: clamp(40px, 6vw, 68px) 26px;
  font-size: 0.94rem;
}

.colophon h3 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 0.9em;
}

.colophon a { color: #e6e0d4; text-decoration: none; }
.colophon a:hover { color: var(--gold-300); text-decoration: underline; }

.colophon__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

@media (max-width: 900px) { .colophon__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .colophon__top { grid-template-columns: 1fr; } }

/* The footer band is already black, so the full lockup — monogram, script and
   printed tagline — sits on it untouched. */
.colophon__mark { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.colophon__mark img.word { max-width: 280px; width: 100%; }
.colophon__mark img.mono { width: 56px; }

.colophon__links { list-style: none; margin: 0; padding: 0; }
.colophon__links li { margin-bottom: 7px; }

/* The foot of the page is given clearance so the two fixed docks cannot sit on
   the credits when you reach the very bottom. */
.colophon__base {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: 18px;
  padding-bottom: 62px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: #8f887c;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  background: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn--gold { background: var(--gold-500); color: #21180a; border-color: var(--gold-500); }
.btn--gold:hover { background: var(--gold-400); border-color: var(--gold-300); color: #21180a; }

.btn--green { background: var(--green-700); color: var(--ivory-000); border-color: var(--green-700); }
.btn--green:hover { background: var(--green-600); color: #fff; }

.btn--ghost { border-color: var(--ink-900); color: var(--ink-900); }
.btn--ghost:hover { background: var(--ink-900); color: var(--ivory-000); }

.btn--ghost-light { border-color: var(--gold-300); color: var(--gold-100); }
.btn--ghost-light:hover { background: var(--gold-300); color: #21180a; }

.btn--wa { background: #1d7a49; color: #fff; border-color: #1d7a49; }
.btn--wa:hover { background: #17633b; color: #fff; }

.btn--sm { min-height: 40px; padding: 9px 16px; font-size: 0.74rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn__hi { font-family: var(--deva); text-transform: none; letter-spacing: 0.02em; opacity: 0.85; }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- framed artwork ---------- */

.plate {
  background: var(--ivory-000);
  padding: clamp(10px, 1.4vw, 18px);
  border: 1px solid var(--ivory-300);
  box-shadow: var(--shadow-frame);
}

.plate img { width: 100%; height: auto; }

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--gold-500);
  color: var(--gold-600);
  border-radius: 2px;
  padding: 3px 7px;
  white-space: nowrap;
}

.tag--sample { background: #fff5d9; border-color: #c79a1f; color: #6d4f00; font-weight: 700; }

.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;
}

/* ==== components.css ==== */
/* Shivraj Singh Art Gallery — page components */

/* ---------- section heads ---------- */

.sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.sechead p { max-width: 58ch; }

/* ---------- forms ---------- */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(26px, 3.4vw, 40px);
  flex-wrap: wrap;
}

.tabs button {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-500);
  padding: 15px 20px;
  min-height: 48px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.tabs button .hi { font-family: var(--deva); text-transform: none; letter-spacing: 0; font-size: 0.86rem; }
.tabs button:hover { color: var(--green-700); }
.tabs button[aria-selected="true"] { color: var(--green-800); border-bottom-color: var(--gold-500); }

fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 clamp(22px, 3vw, 34px);
  padding: clamp(20px, 2.6vw, 28px) 0 0;
}

legend {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  padding: 0;
  margin-bottom: 4px;
}

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }

.field > label, .fieldlabel {
  font-family: var(--sans);
  font-size: 0.79rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.field > label .hi, .fieldlabel .hi { text-transform: none; letter-spacing: 0; color: var(--ink-500); }
.field .hint { font-family: var(--sans); font-size: 0.79rem; color: var(--ink-500); letter-spacing: 0.02em; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="password"], select, textarea {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: 2px;
  padding: 12px 13px;
  min-height: 48px;
  width: 100%;
}

textarea { min-height: 116px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus { border-color: var(--green-600); outline: 2px solid rgba(184, 145, 47, 0.35); outline-offset: 1px; }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #a3341f; background: #fff8f6; }

.err { font-family: var(--sans); font-size: 0.78rem; color: #94301c; min-height: 0; }

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.97rem;
  color: var(--ink-700);
  padding: 13px 15px;
  border: 1px solid var(--ivory-300);
  background: var(--ivory-000);
  cursor: pointer;
}

.check input { width: 20px; height: 20px; min-height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--green-700); }

.formcard {
  background: var(--ivory-000);
  border: 1px solid var(--ivory-300);
  box-shadow: var(--shadow-lift);
  padding: clamp(22px, 3.2vw, 40px);
}

.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } }

/* ---------- uploader ---------- */

.drop {
  border: 2px dashed var(--gold-400);
  background: #fffdf7;
  border-radius: 3px;
  padding: clamp(22px, 3vw, 34px);
  text-align: center;
  cursor: pointer;
}

.drop.over { background: #fff6e0; border-color: var(--gold-600); }
.drop strong { display: block; font-size: 1.06rem; margin-bottom: 5px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 13px; margin-top: 17px; }

.thumb { border: 1px solid var(--ivory-300); background: #fff; padding: 7px; position: relative; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ivory-200); }
.thumb.is-hero { border-color: var(--gold-500); box-shadow: inset 0 0 0 2px var(--gold-400); }

.thumb__name {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--ink-500);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb__bar { display: flex; gap: 5px; margin-top: 6px; }

.thumb__bar button {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ink-300);
  background: #fff;
  color: var(--ink-700);
  min-height: 32px;
  border-radius: 2px;
  cursor: pointer;
}

.thumb__bar button:hover { border-color: var(--green-700); color: var(--green-700); }
.thumb__bar button.on { background: var(--gold-500); border-color: var(--gold-500); color: #21180a; }

.herobadge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold-500);
  color: #21180a;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 6px;
}

/* ---------- summary rail ---------- */

.withrail { display: grid; grid-template-columns: 1.55fr 0.95fr; gap: clamp(24px, 3.4vw, 46px); align-items: start; }
@media (max-width: 900px) { .withrail { grid-template-columns: 1fr; } }

.rail {
  position: sticky;
  top: 96px;
  background: var(--green-800);
  color: var(--ivory-100);
  padding: clamp(20px, 2.6vw, 28px);
  border-top: 3px solid var(--gold-500);
}

.rail h3 { color: var(--ivory-000); font-size: 1.2rem; }
.rail dl { margin: 0; font-family: var(--sans); font-size: 0.87rem; }
.rail dt { color: var(--gold-300); letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.7rem; margin-top: 13px; }
.rail dd { margin: 3px 0 0; color: #e7e1d4; font-family: var(--serif); font-size: 1rem; }

.notice {
  border-left: 3px solid var(--gold-500);
  background: #fffaee;
  padding: 15px 18px;
  font-size: 0.95rem;
  color: var(--ink-700);
}

/* ---------- process / timeline ---------- */

.tl { list-style: none; margin: 0; padding: 0; counter-reset: s; }

.tl li {
  position: relative;
  padding: 0 0 clamp(26px, 3.4vw, 40px) clamp(52px, 6vw, 74px);
  border-left: 1px solid var(--rule);
  margin-left: 16px;
  counter-increment: s;
}

.tl li:last-child { border-left-color: transparent; padding-bottom: 0; }

.tl li::before {
  content: counter(s);
  position: absolute;
  left: -17px; top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ivory-000);
  border: 1px solid var(--gold-500);
  color: var(--gold-600);
  font-family: var(--sans);
  font-size: 0.82rem;
  display: grid; place-items: center;
}

.tl h3 { margin-bottom: 0.3em; }

/* ---------- visit ---------- */

.factlist { list-style: none; margin: 0; padding: 0; }
.factlist li { padding: 13px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.factlist dt, .factlist .k { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-500); padding-top: 3px; }
@media (max-width: 560px) { .factlist li { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- what families have said ----------
   Ivory cards on the green band, ruled in gold. Every card carries its own
   Sample tag, because none of these is a real customer yet. */

/* Large, quiet type rather than a boxed review card: a gold hairline over each
   column, the words set big enough to be read across a room. */
.tribute {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  margin: 0;
  padding: clamp(22px, 2.6vw, 34px) 0 0;
  border-top: 1px solid rgba(200, 162, 74, 0.42);
}

.tribute .tag { align-self: flex-start; }

.tribute blockquote { margin: 0; }

.tribute blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ivory-100);
}

.tribute figcaption {
  margin-top: auto;
  padding-top: 15px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.tribute figcaption span { color: #b6ae9d; }
/* Fixed spaces: ordinary ones collapse around generated content. */
.tribute figcaption span::before { content: "\00A0\00B7\00A0"; }

/* ---------- fixed docks ----------
   Two corners pinned to the viewport, both fixed so scrolling never moves
   them: the WhatsApp badge at bottom-left, the studio-desk launcher at
   bottom-right. Keeping them apart means neither can cover the other. */

/* ---- the row at the foot of every page ----
   Two stations on one baseline at every width: WhatsApp on the left, the
   studio desk on the right. The two round badges share a diameter, and the
   band is as tall as they are. */
.dock {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--badge);
  gap: 10px;
  pointer-events: none;
}

.dock--wa { left: var(--dock-gut, 16px); }
.dock--right { right: var(--dock-gut, 16px); justify-content: flex-end; }

.dock > * { pointer-events: auto; }

/* ---- the WhatsApp badge ----
   The studio's own number, as reachable as the desk and the same size as it,
   on the same baseline and clear of the home indicator. */
.wa-dock {
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1f8a4c;
  color: #fff;
  border: 1px solid rgba(200, 162, 74, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.wa-dock svg { width: 44%; height: 44%; fill: currentColor; display: block; }
.wa-dock:hover, .wa-dock:focus-visible { background: #22a05a; }

/* The row stands over the page, so the page is given a foot of its own: nothing
   at the end of the scroll is ever read from under it. */
body { padding-bottom: calc(var(--badge) + 46px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 380px) {
  .dock { --dock-gut: 10px; }
}

/* ---------- studio desk widget ---------- */

/* The launcher carries the studio's own mark and keeps a soft gold aura that
   breathes, so the family can find it without it shouting. */
/* A round badge rather than a bar of words: the studio's mark fills the circle,
   a small light shows the desk is manned, and the name only appears if you hover
   or tab to it. The accessible name lives on the button itself. */
.desk-launch {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  background: var(--green-900);
  color: var(--ivory-000);
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.79rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  /* The aura is cast by layered shadows, which paint outside the pill rather
     than over it: a close green halo and a wider gold bloom. */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 5px rgba(31, 92, 63, 0.34),
    0 0 20px 6px rgba(200, 162, 74, 0.22);
  animation: deskPulse 2s ease-in-out infinite;
  will-change: transform;
}

/* Held to one line: the label must never stack or turn on its side. */
/* The name, kept off the badge until it is wanted. */
.desk-launch__t {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  padding: 7px 13px;
  border-radius: 40px;
  background: var(--green-900);
  border: 1px solid rgba(200, 162, 74, 0.5);
  color: var(--ivory-100);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.desk-launch:hover .desk-launch__t,
.desk-launch:focus-visible .desk-launch__t { opacity: 1; }

/* The mark fills the badge. The ground is already transparent in the file, so
   nothing needs blending and no black tile can appear. */
.desk-launch__mark {
  width: 78%;
  height: 78%;
  display: grid;
  place-items: center;
}

/* The cut-out was made by reading brightness into alpha, so its mid-tones come
   out soft. Lifting them makes the mark read as ivory at badge size. */
.desk-launch__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.55) contrast(1.15);
}

/* The small light at the foot of the badge: the desk takes word at any hour. */
.desk-launch__dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #35c46f;
  border: 2px solid var(--green-900);
}

/* Under the pointer it settles, so the thing you are about to click is still. */
.desk-launch:hover,
.desk-launch:focus-visible {
  background: var(--green-700);
  animation-play-state: paused;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 6px rgba(31, 92, 63, 0.42),
    0 0 26px 9px rgba(200, 162, 74, 0.34);
}

@keyframes deskPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 0 4px rgba(31, 92, 63, 0.28),
      0 0 16px 4px rgba(200, 162, 74, 0.18);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 0 8px rgba(31, 92, 63, 0.42),
      0 0 30px 12px rgba(200, 162, 74, 0.38);
  }
}

/* A visitor who has asked for less movement keeps the aura, but it holds still. */
@media (prefers-reduced-motion: reduce) {
  .desk-launch {
    animation: none;
    transform: none;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.3),
      0 0 0 6px rgba(31, 92, 63, 0.38),
      0 0 24px 8px rgba(200, 162, 74, 0.3);
  }
}

/* Given a definite height so the transcript below can take the slack; a whole
   reply should be readable without scrolling. */
.desk {
  position: fixed;
  right: 18px;
  /* Clear of the row of badges, so the desk never covers its own launcher. */
  bottom: calc(var(--badge) + 26px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: min(520px, calc(100vw - 36px));
  height: clamp(420px, 70vh, 780px);
  max-height: calc(100vh - var(--badge) - 44px);
  padding: 0; /* the page's section padding must not apply to this panel */
  overscroll-behavior: contain; /* scrolling here never chains to the page */
  background: var(--ivory-000);
  border: 1px solid var(--green-700);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.desk.open { display: flex; }

.desk__hd { background: var(--green-800); color: var(--ivory-000); padding: 13px 15px; display: flex; gap: 11px; align-items: center; }
.desk__hd img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; mix-blend-mode: screen; }
.desk__hd strong { font-weight: 400; font-size: 1rem; display: block; line-height: 1.3; }
.desk__hd .st { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gold-300); }
.desk__x { background: none; border: 0; color: var(--ivory-200); font-size: 1.35rem; cursor: pointer; width: 40px; height: 40px; }
.desk__x:hover { color: #fff; }

/* Puts the thread back to a clean counter without closing the panel. */
.desk__clear {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-radius: 2px;
  color: var(--ivory-200);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  min-height: 40px;
  cursor: pointer;
}

.desk__clear .hi {
  font-family: var(--deva);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-300);
}

.desk__clear:hover { border-color: var(--gold-300); color: #fff; background: rgba(200, 162, 74, 0.14); }

.desk__stub {
  background: rgba(200, 162, 74, 0.17);
  border-bottom: 1px solid var(--ivory-300);
  padding: 8px 15px;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  color: #6d4f00;
  flex: 0 0 auto;
}

/* min-height:0 lets this shrink inside the flex column and scroll itself,
   instead of pushing the input off the panel. */
.desk__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ivory-100);
}

.desk__hd, .desk__chips, .desk__form { flex: 0 0 auto; }

/* A slim visible scrollbar in the two regions that scroll, so it is plain that
   the wheel belongs to them and not to the page behind. */
.desk__log, .desk__gate {
  scrollbar-width: thin;
  scrollbar-color: var(--green-600) var(--ivory-200);
}

.msg {
  max-width: 90%;
  padding: 12px 15px;
  font-size: 0.97rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.msg p { margin: 0 0 0.7em; }
.msg p:last-child { margin-bottom: 0; }
.msg--desk { background: #fff; border: 1px solid var(--ivory-300); border-left: 3px solid var(--green-600); align-self: flex-start; }
.msg--you { background: var(--green-700); color: var(--ivory-000); align-self: flex-end; }
.msg strong { font-weight: 400; color: var(--green-800); }
.msg--you strong { color: var(--gold-300); }
.msg .q { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); display: block; margin-bottom: 4px; }

.desk__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 15px 0; background: var(--ivory-100); }

.desk__chips button {
  font-family: var(--sans);
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  background: #fff;
  border: 1px solid var(--green-600);
  color: var(--green-700);
  border-radius: 20px;
  padding: 8px 13px;
  min-height: 44px;
  cursor: pointer;
}

.desk__chips button:hover { background: var(--green-700); color: #fff; }

.desk__form { display: flex; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--ivory-300); background: var(--ivory-000); }
.desk__form input { min-height: 44px; font-size: 0.95rem; }
.desk__form button { min-height: 44px; padding-inline: 15px; }

@media (max-width: 520px) {
  .dock { --dock-gut: 12px; }

  /* A near full-width sheet, lifted clear of the bottom row of badges so those
     links stay tappable while the desk is open. */
  .desk {
    left: 8px;
    right: 8px;
    bottom: calc(var(--badge) + 22px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    top: 8px;
    max-height: none;
  }
}

/* On a narrow phone the three stations would meet in the middle, so the badges
   and the capsule both come in rather than overlapping. */
@media (max-width: 400px) {
  .desk-launch__dot { width: 13px; height: 13px; }
}

/* ---------- who is at the counter ----------
   The card the studio fills in before it opens a thread or takes a commission.
   It is deliberately plain: three fields, one tick, one line about why. */

.idcard {
  background: var(--ivory-000);
  border: 1px solid var(--ivory-300);
  border-top: 3px solid var(--gold-500);
  padding: clamp(18px, 2.4vw, 28px);
}

.idcard__k {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 8px;
}

.idcard__h { font-size: clamp(1.15rem, 1.7vw, 1.5rem); margin: 0 0 0.5em; }
.idcard__h .hi { color: var(--ink-500); font-size: 0.72em; }
.idcard__lede { color: var(--ink-700); margin-bottom: 1.4em; }

.idcard__privacy {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-500);
  border-left: 2px solid var(--ivory-300);
  padding-left: 12px;
  margin: 1.2em 0;
}

.idcard__done {
  margin: 1.2em 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ivory-300);
  font-size: 0.92rem;
  color: var(--ink-700);
}

/* Inside the desk panel the card sits on the panel's own ground. */
/* The gate takes the room the transcript would have had, and scrolls itself so
   the button at its foot is always in the panel. */
.desk__gate {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ivory-100);
  display: flex;
  flex-direction: column;
}

.desk .idcard {
  border: 0;
  border-top: 0;
  padding: 16px 16px 0;
  background: transparent;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.desk .idcard__lede { font-size: 0.92rem; }

/* The reason and Enter details rest on the sill of the panel when the card
   is shorter than it, and scroll with the card when it is longer, so they
   never lie over the field that has the focus. */
.desk .idcard__foot {
  margin: auto 0 0;
  padding: 10px 0 12px;
  background: var(--ivory-100);
  border-top: 1px solid var(--ivory-300);
}

.desk .idcard__privacy { margin: 0 0 10px; border-left: 0; padding-left: 0; }
.desk .idcard__foot .btn { width: 100%; }

.idcard .btnrow .btn { min-height: 44px; }

/* The identity step at the head of a commission pane. Three answers do not
   want the whole width of the pane. */
.idstep { margin-bottom: clamp(20px, 2.6vw, 32px); }
.idstep .idcard > .field,
.idstep .idcard > .check,
.idstep .idcard__lede,
.idstep .idcard__privacy,
.idstep .idcard__done { max-width: min(100%, 34rem); }
.idstep .idcard__foot { margin-top: 1.2em; }

/* ---------- the gate held over a page ----------
   A sheet, not a scroll lock: the page keeps its scrollport, so the sticky
   ribbon behind it never goes anywhere. */

.idsheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(8, 26, 20, 0.66);
}

.idsheet__box {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.idsheet__x {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-500);
  cursor: pointer;
  padding: 6px 8px;
}

.idsheet__x:hover { color: var(--ink-900); }

.hidden { display: none !important; }

/* ==== v2.css ==== */
/* Shivraj Singh V2 — black and white, after Mercedes-Benz India

   A layer over base.css and components.css. Every id, class and state the
   scripts rely on is left where it was; only the dress changes.

   The owner asked for the Mercedes-Benz India pages, as they look on a
   telephone, in black and white: a black bar of icons with the emblem at its
   centre; a photograph, then a black panel with a large condensed-serif line
   and one full-width pill; a white pill switch pinned at the top of the
   window; swipeable black cards with a round white arrow; light-grey tiles;
   and a black footer of plain lists. The studio's paintings, and the
   founder's portrait, keep their own colours. Nothing else here is coloured,
   except a red for a mistake in a form, the small green light that says the
   studio desk is manned, and one line of gilt lettering in the Studio
   chapter.

   The page is designed at telephone width first and widened from there. */

:root {
  --ink: #000;
  --paper: #fff;
  --g50: #f8f8f8;
  --g100: #f4f4f4;
  --g150: #ececec;
  --g200: #e0e0e0;
  --g300: #c8c8c8;
  --g500: #767676;
  --g600: #5c5c5c;
  --g700: #3c3c3c;
  --g800: #262626;
  --g900: #141414;
  --err: #c62828;
  --ok-dot: #2fbf5b;
  /* The gilt of the frames on the studio's oils. It dresses one line only,
     "A legacy of 75+ years" in the Studio chapter, and nothing else. */
  --legacy-gold: #c8a45a;

  --f-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-display: var(--f-sans);
  --f-deva: "Tiro Devanagari Hindi", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  --sans: var(--f-sans);
  --serif: var(--f-serif);
  --deva: var(--f-deva);

  --r-card: 12px;
  --r-tile: 8px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* The first draft's colours, pointed at black, white and grey, so any
     older component that still asks for "green" or "gold" is dressed in the
     new palette without being rewritten. */
  --green-900: #000;
  --green-800: #0d0d0d;
  --green-700: #1a1a1a;
  --green-600: #2a2a2a;
  --green-050: var(--g100);
  --gold-600: var(--g600);
  --gold-500: #000;
  --gold-400: #000;
  --gold-300: #fff;
  --gold-100: var(--g100);
  --ivory-000: #fff;
  --ivory-100: var(--g50);
  --ivory-200: var(--g100);
  --ivory-300: var(--g200);
  --ink-900: #000;
  --ink-700: var(--g700);
  --ink-500: var(--g500);
  --ink-300: #a8a8a8;
  --black: #000;
  --rule: rgba(0, 0, 0, 0.12);
  --night: #000;
  --night-2: var(--g900);
  --night-3: #1f1f1f;
  --panel: #fff;
  --paper-2: var(--g100);
  --sepia: var(--g500);
  --paper-tex: none;
  --night-tex: none;
  --shadow-frame: 0 2px 6px rgba(0, 0, 0, 0.08), 0 16px 34px rgba(0, 0, 0, 0.12);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);

  --rail-w: 0px;
  --hdr-h: 64px;
  --gut: 20px;
  --shell: 1240px;
}

@media (min-width: 768px) { :root { --gut: 32px; } }

/* The chapter rail takes the left column once there is room for it. */
@media (min-width: 1200px) { :root { --rail-w: 220px; } }

/* ---------- ground and type ---------- */

html { scroll-padding-top: 76px; }

/* A finger's press is answered in grey, not in the browser's own blue. */
html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12); }

body.v2 {
  background: #fff;
  color: #000;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: 0;
}

/* A page shorter than the window (the not-found page) stands its footer on
   the bottom edge rather than leave a white strip beneath it. */
body.v2.shortpage { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.v2.shortpage > main { flex: 1 0 auto; display: grid; align-content: center; }

/* Such a page does not scroll, so it keeps no empty scrollbar gutter beside
   its black bar and footer. */
html:has(> body.shortpage) { scrollbar-gutter: auto; }

.v2 h1, .v2 h2, .v2 h3, .v2 h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: inherit;
}

.v2 h2 { font-size: clamp(1.9rem, 5.6vw, 3rem); line-height: 1.08; }
.v2 h3 { font-size: clamp(1.35rem, 3.4vw, 1.75rem); line-height: 1.15; }

.v2 p { margin: 0 0 1em; }

.v2 a:not([class]) { color: inherit; text-decoration-color: rgba(0, 0, 0, 0.4); text-underline-offset: 3px; }
.v2 a:not([class]):hover { color: inherit; text-decoration-color: currentColor; }

.v2 .eyebrow {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--g600);
}

.v2 .lede {
  font-family: var(--f-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--g700);
  max-width: 62ch;
}

.v2 .meta, .v2 .small { font-family: var(--f-sans); color: var(--g600); }
.v2 .center .lede { margin-inline: auto; }
.v2 .hi { font-family: var(--f-deva); font-size: 0.94em; }

.v2 :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* "Skip to content": out of sight until the keyboard reaches it, the first
   stop on the page; then a white tab over the black bar. */
.skiplink {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  padding: 10px 16px; background: #fff; color: #000;
  font-family: var(--f-sans); font-size: 15px; font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skiplink:focus, .skiplink:focus-visible { transform: none; outline: 2px solid #000; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .skiplink { transition: transform 150ms ease-out; } }

/* A heading that is handed the focus when a chapter link is followed is a
   place to carry on from, not a control: it shows no ring. */
.v2 :is(h1, h2)[tabindex="-1"]:focus { outline: none; }

.v2 .shell { max-width: var(--shell); padding-inline: var(--gut); }

/* ---------- the draft ribbon ---------- */

.v2 .draftbar {
  margin: 0;
  background: #000;
  color: #bdbdbd;
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px var(--gut);
  border-bottom: 1px solid #262626;
  line-height: 1.45;
}

.v2 .draftbar strong { color: #fff; letter-spacing: 0.06em; font-weight: 600; }

.draftbar__v1 {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* A small line of type, but a finger still finds it. */
.draftbar__v1::after { content: ""; position: absolute; inset: -14px -8px; }

/* On a telephone the link keeps a line of its own, so the ribbon is three
   lines there at every width and the opening panel can count on it. */
@media (min-width: 340px) and (max-width: 419px) {
  .draftbar__v1 { display: block; width: fit-content; margin-inline: auto; }
}

/* ---------- the bar ----------
   On a telephone: the menu at the left, the monogram dead centre, the heart
   and the visit pin at the right, all white on black. The cell beside the
   menu is left empty so that both sides weigh the same and the monogram
   keeps the middle. From 1280px the chapter links stand at the left and the
   two icons at the right. The bar scrolls away with the page, as the
   Mercedes-Benz bar does. */

.v2 .masthead,
.v2.scrolled .masthead,
.scrolled .v2 .masthead {
  position: sticky;
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: #000;
  border-bottom: 0;
  box-shadow: none;
  z-index: 80;
}

.v2 .masthead__in {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "menu brand here";
  align-items: center;
  gap: 4px;
  min-height: var(--hdr-h);
  max-width: none;
  padding: 10px max(10px, calc(var(--gut) - 10px));
  position: relative;
}

.v2 .here {
  grid-area: here;
  justify-self: end;
  margin: 0;
  max-width: 38vw;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2 .navtoggle { grid-area: menu; }
.v2 .brandlock { grid-area: brand; justify-self: center; }
.v2 .nav { grid-area: nav; }
.v2 .hdr-actions { display: none; }

.iconbtn,
a.iconbtn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.iconbtn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconbtn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.iconbtn:focus-visible { outline: 2px solid #fff; outline-offset: 0; }

.iconbtn__n {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff;
  color: #000;
  font-family: var(--f-sans);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: block;
}

.iconbtn__n[hidden] { display: none; }

.v2 .brandlock { gap: 10px; min-width: 44px; min-height: 44px; justify-content: center; text-decoration: none; }
.v2 .brandlock img.mono { width: 42px; height: 42px; mix-blend-mode: normal; }
.v2 .wordmark { display: none; }
.v2 .brandlock__fallback { display: none; }

.v2 .navtoggle {
  display: inline-grid;
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background: transparent;
  color: #fff;
}

/* The menu, on a telephone: the whole window, black, one chapter to a line. */
.v2 .nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 80;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 8px var(--gut) 28px;
  background: #000;
  border-top: 1px solid #262626;
  border-bottom: 0;
  min-height: calc(100svh - var(--hdr-h));
}

.v2 .nav.open { display: flex; }

.v2 .masthead:has(.nav.open) .hdr-actions {
  display: flex;
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  justify-content: center;
  gap: 8px;
}

.v2 .nav a {
  font-family: var(--f-serif);
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid #262626;
  min-height: 44px;
}

.v2 .nav a:hover,
.v2 .nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

@media (min-width: 768px) {
  .v2 .wordmark { display: flex; }
  .v2 .wordmark img { height: 30px; mix-blend-mode: normal; }
}

@media (min-width: 1280px) {
  .v2 .masthead,
  .v2.scrolled .masthead,
  .scrolled .v2 .masthead {
    position: relative;
    top: auto;
    padding-top: 0;
    z-index: 60;
  }
  .v2 .here { display: none; }
  .v2 .masthead__in {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "nav brand acts";
    padding: 12px 28px;
    min-height: 76px;
  }
  .v2 .navtoggle { display: none; }
  .v2 .hdr-actions {
    display: flex;
    grid-area: acts;
    justify-self: end;
    align-items: center;
    gap: 6px;
  }
  .v2 .nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 1.5vw, 26px);
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    justify-self: start;
  }
  .v2 .nav a {
    font-family: var(--f-sans);
    font-size: 0.9rem;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    min-height: 0;
    white-space: nowrap;
  }
  .v2 .nav a[aria-current="page"] { border-bottom-color: #fff; }
}

/* On a laptop the eight links and the full lockup do not both fit: the
   monogram stands alone at the centre, as on a telephone, and the links
   close up a little, so the last of them keeps clear of it. */
@media (min-width: 1280px) and (max-width: 1519px) {
  .v2 .wordmark { display: none; }
  .v2 .nav { gap: clamp(12px, 1.25vw, 18px); }
}

/* ---------- pills, round arrows, small marks ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: 1px solid #000;
  background: #000;
  color: #fff;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pill:hover { background: var(--g800); border-color: var(--g800); color: #fff; }

a.pill { color: #fff; }
.pill--light, a.pill--light { background: #fff; border-color: #fff; color: #000; }
.pill--light:hover { background: var(--g150); border-color: var(--g150); color: #000; }

.pill--ghost, a.pill--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.pill--ghost:hover { background: #fff; border-color: #fff; color: #000; }

.pill--ghost-dark, a.pill--ghost-dark { background: transparent; border-color: #000; color: #000; }
.pill--ghost-dark:hover { background: #000; border-color: #000; color: #fff; }

.pill--block { display: flex; width: 100%; }

.pill .btn__hi { font-family: var(--f-deva); font-weight: 400; opacity: 0.75; }

.v2 .pill:focus-visible { outline-offset: 3px; }

/* A filled control's ring is drawn outside it, so it takes the colour of the
   control and not of its lettering: white round a white pill on black, black
   round a black one on white. */
.v2 .pill--light:focus-visible,
.v2 .rail .btn--wa:focus-visible,
.v2 .brandlock:focus-visible { outline-color: #fff; }
.v2 .pill:not(.pill--light):not(.pill--ghost):not(.pill--ghost-dark):focus-visible,
.v2 .btn--gold:focus-visible,
.v2 .btn--green:focus-visible { outline-color: #000; }

.roundnav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--g200);
  background: #fff;
  color: #000;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: transform 0.18s ease;
}

.roundnav::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-2px) rotate(-45deg);
}

.roundnav--prev::before { transform: translateX(2px) rotate(135deg); }
.roundnav:hover { transform: scale(1.05); }
.roundnav[disabled] { opacity: 0.35; cursor: default; transform: none; }

.addon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: #000;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}

.addon-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.addon-badge--light { color: #fff; }

.tbc {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--g500);
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--g600);
  white-space: nowrap;
}

/* The first draft's rectangular buttons, still used inside the forms and on
   the other pages, are made pills in the same black and white. */
.v2 .btn {
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.v2 .btn--gold,
.v2 .btn--green { background: #000; border-color: #000; color: #fff; }
.v2 .btn--gold:hover,
.v2 .btn--green:hover { background: var(--g800); border-color: var(--g800); color: #fff; }
.v2 .btn--ghost { border-color: #000; color: #000; }
.v2 .btn--ghost:hover { background: #000; color: #fff; }
.v2 .btn--ghost-light { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.v2 .btn--ghost-light:hover { background: #fff; color: #000; }
.v2 .btn--wa { background: #fff; border-color: #000; color: #000; }
.v2 .btn--wa:hover { background: #000; color: #fff; }
.v2 .btn--sm { font-size: 0.85rem; }

.v2 .tag {
  font-family: var(--f-sans);
  border-radius: 3px;
  letter-spacing: 0.08em;
  border-color: var(--g300);
  color: var(--g700);
}

.v2 .tag--sample { background: #000; border-color: #000; color: #fff; font-weight: 600; }

/* ---------- the chapter rail (wide screens only) ---------- */

.edrail { display: none; }

/* One menu at a time. While the bar is in the window its links are the menu
   and the rail is out of sight (and out of the tab order); edition.js brings
   the rail in, with data-on, once the bar has scrolled away. */
@media (min-width: 1200px) {
  .edrail {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--rail-w);
    z-index: 40;
    pointer-events: none;
    color: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .edrail[data-on="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }

  .edrail a { pointer-events: auto; color: inherit; text-decoration: none; }

  .edrail__lock { transition: color 0.3s ease; }
  .edrail__lock[data-tone="light"] { color: #fff; }

  .edrail__lock {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-serif);
    font-size: 1.35rem;
    line-height: 1;
  }

  /* The studio's mark beside its name. The file is white line work, so on
     the white page it is turned to black. */
  .edrail__mark { flex: 0 0 36px; width: 36px; height: 36px; filter: invert(1); }
  .edrail__lock[data-tone="light"] .edrail__mark { filter: none; }

  .edrail__name { white-space: nowrap; }

  .edrail__name span {
    display: block;
    margin-top: 8px;
    font-family: var(--f-sans);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--g500);
  }

  .edrail__list {
    position: absolute;
    left: 24px;
    right: 18px;
    bottom: calc(var(--badge, 60px) + 44px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .v2 .edrail__list a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    font-family: var(--f-sans);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--g500);
    transition: color 0.2s ease;
  }

  .v2 .edrail__list a:hover,
  .v2 .edrail__list a[aria-current="true"] { color: #000; }

  /* Over the black opening panel the rail's words turn white, the chapter
     being read brightest. Each line is told by edition.js which ground it
     stands on. */
  .v2 .edrail__list a[data-tone="light"] { color: rgba(255, 255, 255, 0.55); }
  .v2 .edrail__list a[data-tone="light"]:hover,
  .v2 .edrail__list a[data-tone="light"][aria-current="true"] { color: #fff; }

  .edrail__t { flex: 0 0 auto; }

  .edrail__list a::after {
    content: "";
    order: 2;
    flex: 1 1 auto;
    align-self: center;
    height: 0;
    border-bottom: 1px dotted currentColor;
    opacity: 0;
    transform: translateY(3px);
  }

  .edrail__list a[aria-current="true"]::after { opacity: 0.7; }

  .edrail__n {
    order: 3;
    margin-left: auto;
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 0.85rem;
  }

  /* Everything stands to the right of the rail; the opening panel alone runs
     under it, edge to edge, as a showroom's first photograph does. */
  .v2 main { padding-left: var(--rail-w); }
  .v2 .edrail ~ .colophon { margin-left: var(--rail-w); }
  .v2 .mbhero { margin-left: calc(var(--rail-w) * -1); padding-left: var(--rail-w); }
}

/* ---------- the opening panel ----------
   The founder's portrait on black, then the black panel with the line and
   one pill. On a wide screen the words take the left and the portrait the
   right.

   The first screen is composed whole, and nothing in it lies under the two
   round buttons at the foot of the window. The portrait takes the height
   the window has left once the rest has its own:

     --hero-above  the ribbon and the bar, at their least;
     --hero-top    what stands above the frame: the ribbon, the bar and the
                   figure's own padding;
     --hero-cap    from the foot of the frame to the foot of its caption;
     --hero-head   from the foot of the frame to the foot of the headline:
                   the caption, the kicker and the two lines of the headline;
     --hero-tail   from there to the foot of the pill: the sentence and the
                   pill;
     --hero-foot   the ground the round buttons stand on.

   On a telephone the window cannot hold all of it round a portrait of any
   size, so the first screen is the frame, its caption and "Portraits made
   to be kept."; the ground under the headline is left clear for the round
   buttons, and the sentence and the pill begin just below the fold
   (--hero-gap). A window tall enough to hold the sentence and the pill as
   well, round a portrait still worth the name, holds them all, and the
   black panel runs down to the foot of the window under them. A window too
   short for the headline as well (a small telephone, or one held across)
   keeps the frame and its caption, and the words begin below the fold
   (--hero-lead). The ribbon and the caption are kept to a known number of
   lines at each width for this reason; if the ribbon goes, --hero-above and
   --hero-top lose its height. */

.v2 .mbhero {
  --hero-vh: 100vh;
  --hero-h1: clamp(2.6rem, 10.4vw, 5.4rem);
  --hero-above: 129px;
  --hero-top: 148px;
  --hero-cap: 48px;
  --hero-head: calc(106px + 2 * var(--hero-h1));
  --hero-tail: 180px;
  --hero-foot: calc(var(--badge) + 26px + env(safe-area-inset-bottom, 0px));
  --hero-art: clamp(220px, calc(var(--hero-vh) - var(--hero-top) - var(--hero-head) - var(--hero-foot)), 520px);
  --hero-gap: max(16px, calc(var(--hero-vh) - var(--hero-above) - 18px - var(--hero-art) - var(--hero-head) + 8px));
  padding-block: 0;
  background: #000;
  color: #fff;
}

@supports (height: 100svh) {
  .v2 .mbhero { --hero-vh: 100svh; }
}

/* From 420px the ribbon is two lines and the caption one; from 436px the
   sentence is three lines. From 700px the ribbon may be a single line, and
   from 800px it is sure to be. */
@media (min-width: 420px) { .v2 .mbhero { --hero-above: 113px; --hero-top: 132px; --hero-cap: 30px; --hero-head: calc(88px + 2 * var(--hero-h1)); } }
@media (min-width: 436px) { .v2 .mbhero { --hero-tail: 155px; } }
@media (min-width: 700px) { .v2 .mbhero { --hero-above: 97px; } }
@media (min-width: 800px) { .v2 .mbhero { --hero-top: 116px; } }

@media (max-width: 419px) and (min-height: 920px), (min-width: 420px) and (max-width: 599px) and (min-height: 900px), (min-width: 600px) and (max-width: 899px) and (min-height: 980px) {
  .v2 .mbhero {
    --hero-art: clamp(220px, calc(var(--hero-vh) - var(--hero-top) - var(--hero-head) - var(--hero-tail) - var(--hero-foot) - 12px), 520px);
    --hero-gap: 16px;
    min-height: calc(var(--hero-vh) - var(--hero-above));
  }
}

@media (max-width: 599px) and (max-height: 639px), (min-width: 600px) and (max-width: 899px) and (max-height: 695px) {
  .v2 .mbhero {
    --hero-art: clamp(140px, calc(var(--hero-vh) - var(--hero-top) - var(--hero-cap) - var(--hero-foot)), 520px);
    --hero-gap: 16px;
    --hero-lead: max(20px, calc(var(--hero-vh) - var(--hero-above) - 18px - var(--hero-art) - var(--hero-cap) + 8px));
  }
}

.mbhero__art {
  margin: 0;
  padding: 18px var(--gut) 8px;
  display: grid;
  justify-items: center;
  gap: 12px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, #262626 0%, #000 72%);
}

.mbhero__art img {
  width: auto;
  height: var(--hero-art, min(58vh, 520px));
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.7));
}

.mbhero__art figcaption {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9e9e9e;
  text-align: center;
  text-wrap: balance;
  max-width: 21em;
}

/* Two lines on a narrow telephone, "Founder · the late" over the name and
   the year, and one line wherever it is sure to fit. */
@media (min-width: 420px) { .mbhero__art figcaption { max-width: none; white-space: nowrap; } }

.mbhero__panel { padding: var(--hero-lead, 20px) var(--gut) 36px; }

.mbhero__k {
  font-family: var(--f-sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9e9e9e;
  margin: 0 0 12px;
}

.mbhero__k .hi { letter-spacing: 0; }

.v2 .mbhero h1 {
  font-family: var(--f-serif);
  font-size: var(--hero-h1);
  line-height: 1;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 0 var(--hero-gap, 16px);
  max-width: 12ch;
}

/* From a tablet up the pill is as wide as its words ask, not the window. */
@media (min-width: 600px) {
  .mbhero__panel .pill--block { display: inline-flex; width: auto; min-width: 280px; }
}

.mbhero__sub {
  color: #cfcfcf;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 46ch;
  text-wrap: pretty;
}

/* Side by side, the panel fills the window under the ribbon and the bar and
   stops there; the portrait and its caption stand whole inside it, the foot
   of the frame clear of the round button in the corner. Under 1200px only a
   window taller than a full-HD screen shows the next chapter under it. The
   words begin on the chapters' own left edge: the panel is half the page's
   width, so the shell's margin is that half less half the shell. */
@media (min-width: 1280px) { .v2 .mbhero { --hero-above: 109px; } }

@media (min-width: 900px) {
  .v2 .mbhero {
    --hero-h1: clamp(2.6rem, 6vw, 5.4rem);
    --hero-art: clamp(300px, calc(var(--hero-vh) - 272px), 660px);
    --hero-gap: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: min(calc(var(--hero-vh) - var(--hero-above)), 1000px);
  }
  .mbhero__panel { order: -1; padding: 60px 40px 60px max(var(--gut), calc(100% - var(--shell) / 2 + var(--gut))); }
  .mbhero__art { height: 100%; align-content: center; padding: 32px; }
}

/* Under the shorter bar the panel is 12px taller. They are given to the foot
   of the figure, and the figure keeps the corner button's width clear at its
   right, so that the caption, which reaches over that corner in the narrower
   columns, stands clear of the button rather than touching it. */
@media (min-width: 900px) and (max-width: 1279px) {
  .mbhero__art { padding-bottom: 44px; padding-right: 72px; }
}

/* Where the chapter rail has its column the panel fills the window however
   tall it is: while the bar is in view the rail is not, and a white chapter
   showing under the panel would stand beside an empty column. */
@media (min-width: 1200px) {
  .v2 .mbhero { min-height: calc(var(--hero-vh) - var(--hero-above)); }
}

/* ---------- the line switch, pinned ----------
   A white pill with the chosen kind of work in black, sticky a little below
   the top of the window across the whole page. Four kinds stand in it, each
   a tab at least 44px tall. On a telephone their names are short (Oil ·
   Pencil · Colour · Composition) and the pill takes the width of the page,
   so all four stand in one row without scrolling; from 600px the full names
   fit; from 768px the Hindi returns beneath each name, and from 1024px it
   stands beside it, as it did. The full name and the Hindi are always there
   for a screen reader (.lineswitch__full, and the Hindi out of sight between
   600 and 767px); the short name is for the eye.

   The same pill stands, unpinned and on grey, at the head of the Commission
   chapter (.lineswitch--inline), where its tabs are a tab list in the same
   state as this one. */

.lineswitch-slot {
  position: sticky;
  top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
  z-index: 55;
  display: flex;
  justify-content: center;
  padding: 16px var(--gut) 0;
  margin-bottom: -4px;
  pointer-events: none;
}

/* Over the Commission chapter, which carries the same four kinds at its head,
   the pinned capsule steps aside (edition.js sets data-aside on the slot). */
.lineswitch-slot[data-aside="true"] .lineswitch {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lineswitch {
  pointer-events: auto;
  display: flex;
  gap: 2px;
  transition: opacity 0.25s ease;
  width: 100%;
  max-width: 440px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--g200);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
}

.lineswitch button {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: #000;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Under a finger each tab answers across the whole height of the pill. */
.lineswitch button::after { content: ""; position: absolute; inset: -4px 0; }

/* The full name, with its Hindi, is kept for a screen reader at every width;
   on a telephone it is taken out of sight and the short name shown. */
.lineswitch__full {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lineswitch__short { display: inline; }

.lineswitch button .hi { font-weight: 400; color: var(--g600); }
.lineswitch button:hover { background: var(--g100); }
.lineswitch button[aria-pressed="true"],
.lineswitch button[aria-selected="true"] { background: #000; color: #fff; }
.lineswitch button[aria-pressed="true"] .hi,
.lineswitch button[aria-selected="true"] .hi { color: #bdbdbd; }
.lineswitch button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

@media (min-width: 1280px) {
  .lineswitch-slot { top: 12px; }
}

@media (min-width: 600px) {
  .lineswitch { width: auto; max-width: 100%; }
  .lineswitch button { flex: 0 1 auto; padding: 8px 14px; font-size: 0.88rem; }
  .lineswitch__full {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  .lineswitch__short { display: none; }
  /* The Hindi has no room beside the four full names yet: it is kept for a
     screen reader, out of sight, so the tabs are named the same at every
     width. */
  .lineswitch button .hi {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The Hindi beneath each name: two short lines, centred. */
@media (min-width: 768px) {
  .lineswitch button { padding: 6px 16px; font-size: 0.92rem; }
  .lineswitch button .hi {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    margin: 1px 0 0;
    font-size: 0.84rem;
    line-height: 1.25;
  }
}

/* And beside it once the row is wide enough for all four. */
@media (min-width: 1024px) {
  .lineswitch button { padding: 8px 18px; }
  .lineswitch button .hi { display: inline; margin: 0 0 0 5px; font-size: 0.94em; line-height: inherit; }
}

/* The same pill at the head of the Commission chapter: not pinned, resting
   on grey, the chosen kind black. It is as wide as its words ask once there
   is room, and the page's width on a telephone, as the pinned one is; and it
   stands on the pinned one's centre line, so that as the head scrolls up it
   passes exactly under the pill that stays. */
.lineswitch--inline {
  position: relative;
  margin: 0 auto 16px;
  background: var(--g100);
  border-color: transparent;
  box-shadow: none;
}

.lineswitch--inline button:hover { background: #fff; }
.lineswitch--inline button[aria-selected="true"]:hover { background: #000; }

@media (min-width: 600px) {
  .lineswitch--inline { display: flex; width: fit-content; max-width: 100%; margin-bottom: 20px; }
}

/* ---------- sections ---------- */

.v2 .mbsec,
.v2 section.mbsec {
  padding-block: clamp(44px, 9vw, 96px);
  background: #fff;
  color: #000;
}

.v2 .mbsec--tight,
.v2 section.mbsec--tight { padding-block: clamp(20px, 4vw, 40px); }

.mbh {
  font-family: var(--f-serif) !important;
  font-weight: 400;
  font-size: clamp(2rem, 7.4vw, 3.2rem) !important;
  line-height: 1.06 !important;
  margin: 0 0 0.45em;
  max-width: 22ch;
  text-wrap: balance;
}

.mbh--xl { font-size: clamp(2rem, 7.8vw, 3.6rem) !important; max-width: 24ch; }
.mbh--caps { text-transform: uppercase; letter-spacing: 0.005em; }
.mbh--sm {
  font-family: var(--f-sans) !important;
  font-weight: 700;
  font-size: 1.05rem !important;
  margin-bottom: 0.6em;
}

.mblede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--g700);
  max-width: 60ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.mbpills { display: grid; gap: 12px; max-width: 520px; }

@media (min-width: 768px) {
  .mbpills { grid-template-columns: 1fr 1fr; max-width: 640px; }
}

/* ---------- recommendations: the swipeable black cards ---------- */

.mbcar { position: relative; }

.mbcar__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  margin-inline: calc(var(--gut) * -1);
  padding: 4px var(--gut) 8px;
  scrollbar-width: none;
}

.mbcar__track::-webkit-scrollbar { display: none; }
.mbcar__track:focus-visible { outline: 2px solid #000; outline-offset: -2px; }

@media (min-width: 700px) { .mbcar__track { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (min-width: 1100px) { .mbcar__track { grid-auto-columns: calc((100% - 28px) / 3); } }

/* Once the column no longer reaches the window's edge, three cards fill it
   exactly: a fourth cut off in open white would read as a fault. The dots
   and the round arrow say there are more. */
@media (min-width: 1480px) { .mbcar__track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }

.mbcard {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 100%;
}

.mbcard__art {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #141414;
}

.mbcard__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* A card that carries one of the studio's works shows the whole of it, frame
   and all, hung on a dark wall with a little light behind it. Nothing of the
   work is cropped. */
.mbcard__art--work {
  background: radial-gradient(ellipse 72% 64% at 50% 44%, #303030 0%, #0d0d0d 76%);
}

.mbcard__art--work img {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.6));
}

.mbcard__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.v2 .mbcard__t {
  font-family: var(--f-serif);
  font-size: 1.75rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.mbcard__t .addon-badge { vertical-align: 0.3em; margin-left: 4px; }

.mbcard p { color: #c8c8c8; font-size: 0.95rem; margin: 0; }
.mbcard .pill { align-self: flex-start; margin-top: auto; }

.mbcar__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.mbcar__dots { display: flex; gap: 8px; margin-right: auto; }

.mbcar__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--g300);
  cursor: pointer;
}

.mbcar__dots button[aria-current="true"] { background: #000; transform: scale(1.3); }

/* Under a finger the dots only mark the place: at 8px they are no target,
   and the swipe and the round arrow move the row. */
@media (pointer: coarse) { .mbcar__dots button { pointer-events: none; } }

@media (max-width: 699px) {
  .mbcar__prev { display: none; }
}

/* ---------- the statement ---------- */

.v2 section.mbstatement { padding-top: 12px; }

/* ---------- works: grey category tiles ----------
   Five kinds of work. Up to a tablet the first lies across the row and the
   other four stand two by two beneath it; from 900px the five stand in one
   row. Each carries one whole work, floating on the grey, its name standing
   on the tile's foot however many lines it takes. */

.mtiles-cat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.cattile {
  --art-h: 118px;
  display: grid;
  grid-template-rows: var(--art-h) minmax(0, 1fr);
  align-items: end;
  gap: 14px;
  min-width: 0;
  padding: 18px 14px 14px;
  border: 0;
  border-radius: var(--r-tile);
  background: linear-gradient(160deg, #f7f7f7, #e9e9e9);
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.cattile__art {
  display: grid;
  place-items: center;
  height: var(--art-h);
  min-width: 0;
}

.cattile__art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--art-h);
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25));
  transition: transform 0.4s var(--ease-out);
}

.cattile__t {
  font-family: var(--f-serif);
  font-size: 1.35rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

@media (max-width: 899px) {
  .cattile:first-child {
    --art-h: 128px;
    grid-column: 1 / -1;
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    padding: 16px 18px;
  }
  .cattile:first-child .cattile__art { order: 2; }
  .cattile:first-child .cattile__t { font-size: 1.7rem; }
}

@media (min-width: 768px) {
  .cattile { --art-h: 136px; padding: 20px 14px 16px; }
}

@media (min-width: 900px) {
  .mtiles-cat { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .cattile { --art-h: 164px; padding: 24px 18px 18px; }
  .cattile__t { font-size: 1.5rem; }
}

.cattile:hover .cattile__art img { transform: translateY(-3px) scale(1.02); }
.cattile:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

/* ---------- works: the stage ---------- */

.v2 .wheelstage {
  background: #000;
  color: #fff;
  padding-block: clamp(28px, 5vw, 56px) clamp(32px, 5vw, 60px);
}

.v2 .wheel__tally { text-align: center; color: #9e9e9e; margin: 16px var(--gut) 0; font-size: 0.85rem; }

/* On a telephone the round WhatsApp and desk buttons sit in the bottom
   corners; the line under the wheel keeps clear of them. */
@media (max-width: 699px) {
  .v2 .wheel__tally { padding-inline: 56px; }
}

.v2 .notice,
.notice--v2 {
  background: var(--g100);
  border: 0;
  border-radius: var(--r-tile);
  color: var(--g800);
  font-family: var(--f-sans);
  font-size: 0.92rem;
  padding: 18px 20px;
  max-width: 72ch;
}

.notice--v2 p { text-wrap: pretty; }

/* ---------- your room: the grey "find" card ---------- */

.mbfind {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--g100);
  border-radius: var(--r-card);
  overflow: hidden;
}

.mbfind__art { aspect-ratio: 16 / 10; overflow: hidden; }
.mbfind__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.mbfind__body { padding: 22px 20px 24px; }
.mbfind__k { margin: 0 0 12px; }
/* On the narrowest telephones the long badge takes a second line rather
   than push the card wider than the window. */
.mbfind__k .addon-badge { white-space: normal; }
.mbfind__body .mbh { margin-bottom: 0.3em; }
.mbfind__body > p { color: var(--g700); }

.mbsteps {
  list-style: none;
  counter-reset: s;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mbsteps li {
  counter-increment: s;
  position: relative;
  padding-left: 36px;
  min-height: 24px;
  font-size: 0.95rem;
  color: var(--g800);
  text-wrap: pretty;
}

.mbsteps li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: counter(s);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.mbsteps .hi { color: var(--g600); font-size: 0.85em; }
.mbfind__fine { margin: 14px 0 0; color: var(--g600) !important; font-size: 0.8rem; max-width: 60ch; text-wrap: pretty; }

@media (min-width: 900px) {
  .mbfind { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
  .mbfind__art { aspect-ratio: auto; }
  .mbfind__body { padding: 40px 40px 36px; align-self: center; }
  .mbfind .pill--block { display: inline-flex; width: auto; min-width: 260px; }
}

/* ---------- commission: the chosen kind of work ----------
   Under the four kind tabs (.lineswitch--inline, above) stands one card for
   the kind chosen: its picture on the lit black the recommendations hang
   their works on, its name with its Hindi, its line, and the two ways to
   begin. All four kinds' pictures and words are laid out in the one place,
   stacked, and only the chosen kind's are shown, so the card is as tall as
   the tallest of them and never moves when the kind changes; a change is a
   short cross-fade. On a telephone the picture stands over the words, the
   two pills side by side beneath; from 600px the picture takes the left of
   the card and the words and the pills the right. */

.ccard {
  --art-h: 224px;
  --art-pad: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "art"
    "body"
    "acts";
  gap: 16px;
  min-width: 0;
  padding: 0 0 18px;
  border: 1px solid var(--g200);
  border-radius: var(--r-card);
  background: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* The words and the pills share one column from 600px; on a telephone they
   take their own rows of the card. */
.ccard__side { display: contents; }

.ccard__art {
  grid-area: art;
  display: grid;
  place-items: center;
  height: var(--art-h);
  padding: var(--art-pad);
  background: radial-gradient(ellipse 72% 64% at 50% 44%, #303030 0%, #0d0d0d 76%);
}

.ccard__art img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: calc(var(--art-h) - var(--art-pad) * 2);
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6));
}

/* A drawing on its own sheet is a white rectangle: it is hung with a soft
   shadow rather than a cut-out's, so it reads as paper on the wall. */
.ccard__art img.ccard__sheet { filter: none; box-shadow: 0 14px 22px rgba(0, 0, 0, 0.55); }

/* Every kind's picture, and every kind's words, in the same cell; the chosen
   one shown. A hidden one is out of the way of a screen reader as well. */
.ccard__art > .ccard__pick,
.ccard__body > .ccard__pick { grid-area: 1 / 1; }

.ccard__pick {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}

.ccard__pick.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.26s ease;
}

.ccard__body {
  grid-area: body;
  display: grid;
  align-items: start;
  min-width: 0;
  margin-inline: 18px;
}

.v2 .ccard__t {
  font-family: var(--f-serif);
  font-size: 1.75rem;
  line-height: 1.06;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.ccard__t .hi { display: block; margin-top: 4px; font-size: 0.95rem; color: var(--g600); }
.v2 .ccard__d { font-size: 0.95rem; line-height: 1.5; color: var(--g700); margin: 0; text-wrap: pretty; }

.ccard__acts {
  grid-area: acts;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-inline: 18px;
}

/* Side by side on a telephone, the longer of the two ("From a photograph")
   keeps to one line at every width: its type follows the width of the
   screen between 0.8rem and 0.9rem. */
.ccard__go { min-height: 48px; padding: 8px 6px; font-size: clamp(0.8rem, 3.6vw, 0.9rem); white-space: nowrap; }

@media (min-width: 600px) {
  .ccard {
    --art-h: 300px;
    --art-pad: 24px;
    grid-template-columns: minmax(240px, 5fr) minmax(0, 7fr);
    grid-template-areas: "art side";
    align-items: center;
    gap: 0;
    padding: 0;
  }

  .ccard__side {
    grid-area: side;
    display: grid;
    gap: 20px;
    padding: 28px 28px 28px 32px;
  }

  .ccard__art { height: 100%; min-height: var(--art-h); }
  .ccard__art img { max-width: 76%; }
  /* Inside the side column the words and the pills are rows of their own,
     not the named rows of the telephone's card. */
  .ccard__body,
  .ccard__acts { grid-area: auto; margin-inline: 0; }
  /* The side column is narrow until 700px: the two pills stand one above the
     other there, and side by side from then on. */
  .ccard__acts { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .ccard__go { padding: 8px 10px; font-size: 0.9rem; }
  .v2 .ccard__t { font-size: 2rem; }
}

@media (min-width: 700px) {
  .ccard__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .ccard {
    --art-h: 340px;
    --art-pad: 32px;
    grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr);
  }

  .ccard__side { padding: 36px 40px 36px 44px; }
  .v2 .ccard__t { font-size: 2.3rem; }
  .v2 .ccard__d { font-size: 1rem; max-width: 46ch; }
}

/* ---------- materials: grey service tiles ---------- */

.stiles {
  display: grid;
  gap: 12px;
}

@media (min-width: 600px) { .stiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .stiles { grid-template-columns: repeat(3, 1fr); } }

.stile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 26px 18px 22px;
  border: 0;
  border-radius: var(--r-tile);
  background: var(--g100);
  color: #000;
  text-align: center;
  text-decoration: none;
  font: inherit;
}

.stile__i {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #000;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  margin-bottom: 4px;
}

.v2 .stile__t {
  font-family: var(--f-sans);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.stile__d { font-size: 0.9rem; color: var(--g700); margin: 0; max-width: 32ch; text-wrap: pretty; }
.stile__m { font-size: 0.8rem; color: var(--g600); margin: 6px 0 0; }

.stile--link { cursor: pointer; transition: background-color 0.2s ease; }
.stile--link:hover { background: var(--g150); }
.stile--link:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.stile--link .stile__t .hi { font-weight: 400; color: var(--g600); }

/* The materials tiles carry the owner's own sentences and the makers he
   named, so they are set to be read: ranged left, in a comfortable measure,
   each maker's line in black under the sentence that leads to it. */
.materials .stile {
  justify-items: start;
  gap: 8px;
  padding: 24px 22px 26px;
  text-align: left;
}

.materials .stile__i { margin-bottom: 6px; }
.materials .stile__d { max-width: 44ch; margin: 0; font-size: 0.95rem; line-height: 1.55; }

.materials .stile__m {
  max-width: 44ch;
  margin: -4px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}

.materials .stile__m + .stile__d { margin-top: 8px; }

/* A maker's name is never broken across two lines, and the lines of names
   are kept near one length rather than leaving one name alone on the last. */
.maker { white-space: nowrap; }
.materials .stile__m { text-wrap: balance; }
.materials .stile__m--open { margin-top: 4px; font-size: 0.8rem; font-weight: 400; color: var(--g600); }

.v2 .stiles__note { max-width: 84ch; margin: 20px 0 0; text-wrap: pretty; }

/* ---------- process: the seven steps as a swipe on a telephone ---------- */

.v2 section.process-head { padding-bottom: 8px; }
.v2 #process .band-ivory { padding-top: 12px; }
.v2 #process .withrail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

.v2 .tl {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 4px var(--gut) 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  margin-inline: calc(var(--gut) * -1);
  scrollbar-width: none;
}

.v2 .tl::-webkit-scrollbar { display: none; }

.v2 .tl li {
  counter-increment: step;
  scroll-snap-align: start;
  background: var(--g100);
  border: 0;
  border-radius: var(--r-card);
  padding: 22px 20px 22px;
  margin: 0;
}

.v2 .tl li::before {
  content: counter(step, lower-roman);
  position: static;
  display: block;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  box-shadow: none;
  font-family: var(--f-serif);
  font-size: 1.5rem;
  color: #000;
  margin-bottom: 6px;
}

.v2 .tl li::after { display: none; }
.v2 .tl h3 { font-size: 1.55rem; margin-bottom: 0.4em; }
.v2 .tl p { color: var(--g700); font-size: 0.95rem; text-wrap: pretty; }
.v2 .tl a { color: #000; }

@media (min-width: 900px) {
  .v2 .tl {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
}

/* The black card stands beside the steps only once the shell, less the chapter
   rail's column, leaves each of the two-across cards a readable measure. */
@media (min-width: 1300px) {
  .v2 #process .withrail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
/* With ten answers (4 Nov 2026) the card is taller than a screen, so it
   scrolls with the page instead of pinning: a pinned card that tall would
   hide its last answers and its button until the steps ran out. */
.v2 #process .rail { position: static; }
.v2 .rail dl.faq dt { margin-top: 16px; }
.v2 .rail dl.faq dt:first-child { margin-top: 10px; }

/* The side cards ("Plain answers", "Reach the studio", the summary of a
   commission) are Mercedes black cards. */
.v2 .rail {
  background: #000;
  color: #d6d6d6;
  border: 0;
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 24px 22px;
}

.v2 .rail h3 { color: #fff; font-family: var(--f-serif); font-size: 1.7rem; }
.v2 .rail dt { color: #fff; font-family: var(--f-sans); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.v2 .rail dd { color: #bdbdbd; font-family: var(--f-sans); font-size: 0.95rem; text-wrap: pretty; }
.v2 .rail a { color: #fff; }
.v2 .rail .btn--ghost-light { border-color: rgba(255, 255, 255, 0.7); }
.v2 .rail .btn--wa { background: #fff; border-color: #fff; color: #000; }
.v2 .rail .btn--wa:hover { background: var(--g150); border-color: var(--g150); color: #000; }

/* On the narrowest telephones the pill keeps to one line by dropping its
   Hindi word, as the pinned switch does. */
@media (max-width: 380px), (min-width: 1100px) and (max-width: 1103px), (min-width: 1200px) and (max-width: 1321px) {
  .v2 .rail .btn--wa .btn__hi { display: none; }
}

.v2 .rail .rail__note { color: #bdbdbd; }

/* ---------- studio: defining portraits & paintings since 1947 ---------- */

.heritage-bw__in { display: grid; gap: 28px; align-items: center; }
.heritage-bw__in p { color: var(--g700); max-width: 60ch; text-wrap: pretty; }
/* The founder's and the sons' names in bold (the owner, 25 Oct). */
.heritage-bw__in p strong { color: var(--ink); font-weight: 600; }

.heritage-bw__seal {
  margin: 0;
  background: #000;
  border-radius: var(--r-card);
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 11;
}

.heritage-bw__seal img { width: 62%; height: auto; }

/* The studio's own mark is shown in the tile below, so the heritage card
   carries a painting instead: one of the full-length portraits, whole, on
   the same lit black as the founder's. */
.heritage-bw__seal--work {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: center;
  aspect-ratio: 4 / 5;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #262626 0%, #000 74%);
}

/* It says what it is, in the founder's caption's own type, in the black
   under the frame. */
.heritage-bw__seal--work figcaption {
  position: absolute;
  inset: auto 12px 7px;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9e9e9e;
  text-align: center;
}

.heritage-bw__seal--work img {
  position: absolute;
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.6));
}

@media (min-width: 900px) {
  .heritage-bw__in { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
  .heritage-bw__seal--work { max-width: none; }
}

.v2 #studio .band-ivory { padding-top: 0; }
.v2 #studio .grid.g3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media (min-width: 900px) {
  .v2 #studio .grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stutile {
  background: var(--g100);
  border-radius: var(--r-tile);
  padding: 24px 20px;
}

.v2 .stutile h3 { font-size: 1.55rem; }
.v2 .stutile p { text-wrap: pretty; }
.v2 .stutile > :last-child { margin-bottom: 0; }

/* Side by side the three tiles share one height: the room's words stand at
   the foot of theirs, as a caption stands under a plate. */
@media (min-width: 900px) {
  .stutile--room { display: flex; flex-direction: column; }
  .stutile--room h3 { margin-top: auto; }
}

.stutile--mark { background: #000; color: #bdbdbd; }
.v2 .stutile--mark .eyebrow { color: #9e9e9e; }
.v2 .stutile--mark .small { margin: 1em 0 0; color: #bdbdbd; }
.stutile--mark strong { color: #fff; }
.v2 .stutile--mark .plate { max-width: 230px; margin-inline: auto; padding: 0; border: 0; background: #000; box-shadow: none; }

/* The one gilt mark on the site: "75+ years legacy", the studio's own badge
   (laurel, 75+, YEARS, Legacy, Since 1947 · Mhow), as a picture since
   4 Nov 2026. It is read once, by its alt text, as "A legacy of 75+ years". */
.stutile--legacy {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 36px 20px;
  background: radial-gradient(ellipse 82% 72% at 50% 44%, #1c1c1c 0%, #000 78%);
}

.v2 .legacy { width: 100%; margin: 0; text-align: center; }

/* The badge is the studio's own picture (4 Nov 2026, replacing the copy drawn
   in SVG). Its dark ground is let go at the corners so it sits in the tile's
   black without a visible edge. */
.legacy__badge {
  display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
          mask-composite: intersect;
}
/* The picture brings its own glow, so the tile behind it is plain black. */
.stutile--legacy:has(.legacy__badge) { background: #000; }

/* ---------- visit ---------- */

.v2 .stiles--svc { margin-top: 4px; }

@media (min-width: 1000px) { .v2 .stiles--svc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.v2 #visit .band-ivory { padding-top: 8px; }
.v2 #visit .withrail { display: grid; gap: 28px; }

@media (min-width: 1100px) {
  .v2 #visit .withrail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}

.v2 #visit .stack p { max-width: 62ch; text-wrap: pretty; }

.v2 #visit h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.v2 .factlist li { border-color: var(--g150); }
.v2 .factlist .k { font-family: var(--f-sans); color: var(--g600); letter-spacing: 0.08em; }
.v2 hr.rule { background: var(--g200); height: 1px; }

/* ---------- voices ---------- */

.v2 .voices { background: var(--g100); }
.v2 .voices .sechead p { color: var(--g700); max-width: 62ch; }
.v2 .voices .eyebrow { color: var(--g600); }

/* While the sideways recommendations row scrolls it is a stop for the keyboard (site.js). */
.v2 .tl:focus-visible { outline: 2px solid #000; outline-offset: -2px; }

/* Until real words come from families (through the owner, with permission),
   the chapter carries one invitation card instead of sample sayings (25 Oct). */
.v2 .voices__ask {
  background: #fff;
  border-radius: var(--r-card);
  padding: 26px 22px 28px;
  max-width: 640px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.v2 .voices__q { font-family: var(--f-serif); font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem); line-height: 1.15; color: #000; text-wrap: pretty; margin: 0 0 10px; }
.v2 .voices__ask p:not(.voices__q) { color: var(--g700); max-width: 56ch; text-wrap: pretty; margin: 0; }
.v2 .voices__ask .btn { margin-top: 20px; }

@media (min-width: 900px) {
  .v2 .voices__ask { padding: 32px 32px 34px; }
}

.v2 .disclaimer { background: #fff; }
.v2 .disclaimer .small { max-width: 66ch; font-size: 0.78rem; line-height: 1.6; }

/* ---------- the plain bands ---------- */

.v2 .band-ivory { background: #fff; }

/* ---------- forms (the sheet refines these further) ---------- */

.v2 input[type="text"],
.v2 input[type="tel"],
.v2 input[type="email"],
.v2 input[type="number"],
.v2 input[type="password"],
.v2 select,
.v2 textarea {
  font-family: var(--f-sans);
  font-size: 16px;
  border-radius: var(--r-tile);
  border: 1px solid var(--g300);
  background: #fff;
  color: #000;
}

.v2 input:focus,
.v2 select:focus,
.v2 textarea:focus { border-color: #000; box-shadow: 0 0 0 1px #000; outline: 0; }

.v2 .field > label,
.v2 .fieldlabel { font-family: var(--f-sans); font-weight: 600; letter-spacing: 0.04em; color: #000; }

.v2 .err { color: var(--err); }
.v2 input[aria-invalid="true"],
.v2 select[aria-invalid="true"],
.v2 textarea[aria-invalid="true"] { border-color: var(--err); }

.v2 .formcard { background: #fff; border: 1px solid var(--g200); border-radius: var(--r-card); box-shadow: none; }
.v2 .drop { border-radius: var(--r-tile); border-color: var(--g300); background: var(--g50); }
.v2 .check { border-radius: var(--r-tile); border-color: var(--g200); background: #fff; }
.v2 legend { font-family: var(--f-sans); font-weight: 700; letter-spacing: 0.08em; color: #000; }

.prefill-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--r-tile);
  background: #000;
  color: #fff;
  font-size: 0.92rem;
}

.prefill-note img { width: 44px; height: 54px; object-fit: contain; border-radius: 4px; background: #1f1f1f; }
.prefill-note strong { color: #fff; font-weight: 700; }

.prefill-note button {
  margin-left: auto;
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  color: #bdbdbd;
  font-size: 1.3rem;
  cursor: pointer;
}

/* ---------- footer ---------- */

.v2 .colophon {
  background: #000;
  color: #bdbdbd;
  padding-block: 28px calc(var(--badge, 60px) + 40px + env(safe-area-inset-bottom, 0px));
  font-family: var(--f-sans);
}

.colophon__up {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: max-content;
  min-width: 44px;
  margin: 0 auto 28px;
  color: #fff !important;
  text-decoration: none;
  font-size: 0.8rem;
}

.colophon__up svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The owner's lockup carries a line of small lettering under the script, so
   it is given the width to be read: the whole column on a telephone, a row
   of its own on a tablet, and a wide first column beyond that. */
.v2 .colophon__top { gap: 28px; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 700px) {
  .v2 .colophon__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2 .colophon__mark { grid-column: 1 / -1; }
}

/* Four across, no list is ever narrower than its own longest line (the email
   is the longest), so no address or number is broken in two and nothing runs
   out of the window when the chapter rail takes its 220px at 1200. It is the
   lockup that gives way, a little; once there is room the three lists share
   what is left equally. */
@media (min-width: 1100px) {
  .v2 .colophon__top { grid-template-columns: minmax(0, 440px) repeat(3, minmax(max-content, 1fr)); gap: 28px clamp(28px, 2.78vw, 40px); }
  .v2 .colophon__mark { grid-column: auto; }
}

.v2 .colophon h3 {
  font-family: var(--f-sans);
  font-size: 1.02rem;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin-bottom: 14px;
}

.v2 .colophon a { color: #fff; text-decoration: none; }
.v2 .colophon a:hover { color: #fff; text-decoration: underline; }
.v2 .colophon a[href^="tel:"] { white-space: nowrap; }
.v2 .colophon__links li { margin-bottom: 14px; }
.v2 .colophon__mark img.word { width: 100%; max-width: 440px; height: auto; }
.colophon__addr { color: #bdbdbd !important; margin-bottom: 0.8em; }

.colophon__social {
  display: flex;
  gap: 14px;
  margin: 30px 0 4px;
  padding-top: 24px;
  border-top: 1px solid #262626;
}

.colophon__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; }
.colophon__social a:first-child { margin-left: -10px; }
.colophon__social svg { width: 24px; height: 24px; fill: #fff; }

.v2 .colophon__base {
  border-top-color: #262626;
  color: #8a8a8a;
  font-family: var(--f-sans);
  letter-spacing: 0.02em;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 0;
}

.v2 .colophon__base a { white-space: nowrap; }
.v2 .colophon__base span { text-wrap: pretty; }

@media (min-width: 900px) { .v2 .colophon__base { flex-direction: row; justify-content: flex-start; gap: 8px 28px; } }

/* Under a finger, the studio's numbers, its email and the footer's links
   each get a full 44px of their own, so two numbers stacked in one cell
   cannot be mistaken for each other. A mouse keeps the closer setting. */
@media (pointer: coarse) {
  .v2 .factlist a,
  .v2 .stiles--svc .stile__d a,
  .v2 #visit .rail dd a,
  .v2 .colophon__top p a,
  .v2 .colophon__base a,
  .v2 .colophon__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .v2 .colophon__links a { display: flex; }
  .v2 .colophon__links li { margin-bottom: 0; }

  /* The two links in the first Process step stand on lines 44px apart, each
     answering a thumb across that whole height, and neither breaks inside. */
  .v2 .tl .small { line-height: 2.9; }
  .v2 .tl .small a { display: inline-block; line-height: 1.55; padding: 10px 0; margin: -10px 0; }
}

/* ---------- the round buttons at the foot of the window ----------
   WhatsApp at the left and the studio desk at the right, both black with a
   white ring, as the Mercedes-Benz assistant sits. The social icons live in
   the footer. */

.v2 .wa-dock {
  background: #000;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.v2 .wa-dock:hover,
.v2 .wa-dock:focus-visible { background: #1f1f1f; }

.v2 .desk-launch,
.v2 .desk-launch:hover,
.v2 .desk-launch:focus-visible {
  background: #000;
  border: 2px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  animation: none;
}

/* Both stand over white pages and black panels alike, so their ring is
   white with a black one round it. */
.v2 .wa-dock:focus-visible,
.v2 .desk-launch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #000, 0 6px 20px rgba(0, 0, 0, 0.35); }

.v2 .desk-launch::before,
.v2 .desk-launch::after { display: none; }
.v2 .desk-launch__dot { background: var(--ok-dot); }
.v2 .desk-launch__t { background: #000; color: #fff; border-color: #fff; }

/* ---------- the studio desk and the identity card, in black and white ---------- */

.v2 .desk { border-radius: var(--r-card); border: 1px solid var(--g200); }
.v2 .desk__hd { background: #000; }
.v2 .desk__clear { min-height: 44px; border-color: rgba(255, 255, 255, 0.5); border-radius: var(--r-tile); }
.v2 .desk__x { width: 44px; height: 44px; }
.v2 .desk__clear:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); }
.v2 .desk__stub { background: var(--g150); border-bottom-color: var(--g200); color: var(--g700); }
.v2 .msg--desk { background: var(--g100); }
.v2 .msg .q { color: var(--g600); }
.v2 .msg--you { background: #000; color: #fff; }
.v2 .msg--you strong { color: #fff; }
.v2 .desk__chips { padding-bottom: 10px; }
.v2 .desk__chips button { border-color: #000; color: #000; background: #fff; border-radius: var(--r-pill); }
.v2 .desk__chips button:hover { background: #000; color: #fff; }

/* A telephone held across, or any window as short: the panel takes the
   window's whole height and the draft line keeps to one line, so the head,
   the transcript and the message box all stay in reach. Under a finger the
   questions stand in one row that is swiped sideways; a mouse, which cannot
   swipe, keeps them wrapped and all in sight. */
@media (min-width: 521px) and (max-height: 560px) {
  .v2 .desk { top: 8px; bottom: 8px; height: auto; max-height: none; width: min(520px, calc(100vw - var(--badge) - 52px)); }
  .v2 .desk__stub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v2 .desk__log { padding-block: 10px; }
}

@media (min-width: 521px) and (max-height: 560px) and (pointer: coarse) {
  .v2 .desk__chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .v2 .desk__chips button { flex: 0 0 auto; }
}
.v2 .idcard { border-radius: var(--r-card); }

/* On the desk's own grey the card's Hindi glosses and its privacy line
   take the darker grey, to be read; its kicker and its labels are set as the
   same card's are in the commission sheet, so the one card reads the same
   in both places. */
.v2 .desk .idcard :is(.idcard__h, .field > label) .hi,
.v2 .desk .idcard__privacy { color: var(--g600); }
.v2 .desk .idcard__k { font-size: 12px; letter-spacing: 0.08em; }
.v2 .desk .idcard .field > label { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #000; }
.v2 .idsheet { background: rgba(0, 0, 0, 0.66); }

/* ---------- a picture that does not arrive ----------
   In the room card its description stands in its place, in small type that
   keeps to the picture's own box rather than at reading size. */

.mbcard__art img,
.cattile__art img,
.ccard__art img,
.mbfind__art img { font-size: 0.75rem; line-height: 1.4; }

/* In the small tiles there is no room for a description, and on the lit
   black panels (the founder's portrait, the Studio plate) the browser's
   broken-picture mark would stand in white on the void: the picture is hidden
   and the panel stands quietly with its caption (site.js marks the picture). */
.v2 .mbhero__art img.is-missing,
.v2 .mbcard__art img.is-missing,
.v2 .cattile__art img.is-missing,
.v2 .ccard__art img.is-missing,
.v2 .heritage-bw__seal img.is-missing { visibility: hidden; }

/* ---------- with scripting off ----------
   The record, the counter and the room are built by script. Where they
   would stand, one line says so and gives the studio's number. */

.v2 .wheelstage .nojs { max-width: 60ch; margin: 0 auto; padding: 28px var(--gut); color: #fff; text-align: center; }
.v2 .wheelstage .nojs a { text-decoration-color: currentColor; }
.v2 .ccards-sec .nojs { margin: 20px 0 0; }

/* ---------- on paper ----------
   protect.css leaves the pictures out. What floats over the page on a screen
   (the round buttons, the pinned switch, the rail, the carousel's arrows) is
   left out as well, so it is not stamped across every sheet. */

@media print {
  .dock,
  .lineswitch-slot,
  .edrail,
  .navtoggle,
  .here,
  .hdr-actions,
  .mbcar__foot,
  .colophon__up { display: none !important; }
  .v2 main { padding-left: 0; }
  .v2 .edrail ~ .colophon { margin-left: 0; }
  .v2 .mbhero { margin-left: 0; padding-left: 0; }

  /* The black panels are printed black, so that their white lettering is
     not lost on white paper. */
  body.v2 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cattile__art img,
  .roundnav,
  .pill,
  .btn,
  .lineswitch,
  .lineswitch-slot[data-aside="true"] .lineswitch,
  .lineswitch button,
  .ccard__pick,
  .ccard__pick.is-on,
  .stile--link,
  .edrail,
  .edrail[data-on="true"],
  .edrail__lock,
  .v2 .edrail__list a,
  .desk-launch__t { transition: none; }
}

/* ==== wheel.css ==== */
/* The wheel of works — II · Works

   A showroom turntable for the studio record, dressed as Mercedes-Benz dress
   their own showroom: black and white, nothing else. The stage is black under
   a cool white spotlight; the plates stand round a ring, and the one at the
   front comes into a thin white frame whose edges run out across the stage as
   faint hairlines. The arrows are the round white Mercedes arrows; under the
   ring sits the Mercedes pager (the index, the dots, the count); and the
   caption is the black panel Mercedes put under a photograph — an upright
   serif headline in capitals, a line of plain sans, the heart, and full-width
   pills on a telephone. The only colour on the stage is the paintings' own.

   works.js sets the measurements it works out from the size of the stage as
   custom properties on .wheel: --pw and --ph (the plate in the frame), --cy
   (the height of the frame's centre in the stage) and --ring-r. */

.wheel {
  --pw: 300px;
  --ph: 360px;
  --cy: 260px;
  --w-gut: var(--gut, 20px);
  --w-line: rgba(255, 255, 255, 0.34);
  --w-faint: rgba(255, 255, 255, 0.085);
  --w-dim: var(--g500, #767676);
  --w-soft: var(--g300, #c8c8c8);
  --w-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  --w-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --w-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  position: relative;
  color: var(--paper, #fff);
  font-family: var(--w-sans);
  /* A telephone's own flash on a tap is a translucent blue box; nothing on
     the stage is coloured, so it is put out here for every control within,
     and each answers a press in black and white instead (below). */
  -webkit-tap-highlight-color: transparent;
}

/* On the black stage every focus ring is white, whatever the colour of the
   control it circles; on the white index sheet it is black. */
.wheel :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- the stage ---------- */

.wheel__view {
  position: relative;
  height: clamp(460px, calc(100svh - 330px), 700px);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
}

.wheel.is-dragging .wheel__view { cursor: grabbing; }

/* The most height the stage may take; works.js trims the stage to what the
   ring needs within it. */
.wheel__probe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: clamp(460px, calc(100svh - 330px), 700px);
  visibility: hidden;
  pointer-events: none;
}

/* The stage is one focusable region. Its focus ring is drawn on the frame
   the plates come into, closing the four corner ticks into one white line:
   a ring round the whole stage would run under the pager drawn up over its
   foot. */
.wheel .wheel__view:focus-visible { outline: none; }

.wheel .wheel__view:focus-visible .wheel__frame {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* The spotlight: a soft cone of white falling from above onto the frame,
   and a pale pool on the floor at its foot. Painted once; nothing here
   moves. */
.wheel__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse calc(var(--pw) * 1.25) calc(var(--ph) * 0.95) at 50% var(--cy),
      rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025) 55%, transparent 78%),
    radial-gradient(ellipse calc(var(--pw) * 1.9) calc(var(--ph) * 0.2) at 50% calc(var(--cy) + var(--ph) * 0.52),
      rgba(255, 255, 255, 0.1), transparent 72%);
}

.wheel__light::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60px;
  width: calc(var(--pw) * 2.4);
  height: calc(var(--cy) + var(--ph) * 0.62 + 60px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025) 55%, transparent 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%);
}

/* The frame's edges carried out to the sides and the top and bottom of the
   stage as faint hairlines, fading as they go. */
.wheel__guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wheel__guides::before,
.wheel__guides::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.wheel__guides::before {
  left: 0;
  right: 0;
  top: calc(var(--cy) - var(--ph) / 2 - 16px);
  height: calc(var(--ph) + 32px);
  border-top: 1px solid var(--w-faint);
  border-bottom: 1px solid var(--w-faint);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.wheel__guides::after {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--pw) / 2 - 16px);
  width: calc(var(--pw) + 32px);
  border-left: 1px solid var(--w-faint);
  border-right: 1px solid var(--w-faint);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
}

/* ---------- the ring ---------- */

.wheel__scene {
  position: absolute;
  inset: 0;
  transition: opacity 0.22s ease;
}

.wheel.is-changing .wheel__scene { opacity: 0; }

.wheel__ring {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.wheel__slot {
  position: absolute;
  left: calc(var(--pw) / -2);
  top: calc(var(--ph) / -2);
  width: var(--pw);
  height: var(--ph);
  cursor: pointer;
}

.wheel__slot.is-front { cursor: inherit; }

.wheel__plate {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each picture hangs on a leaf that works.js cuts to the picture's own shape
   inside the plate's box, from the record, before the picture has come: so
   it is never stretched and nothing shifts when it arrives. The reflection
   under the leaf is the polished showroom floor. */
.wheel__leaf {
  position: relative;
  flex: 0 0 auto;
  display: block;
  -webkit-box-reflect: below 3px linear-gradient(180deg, transparent 0%, transparent 76%, rgba(255, 255, 255, 0.15) 100%);
}

/* The face of the leaf carries the picture, and is what works.js dims as a
   plate goes round the ring. */
.wheel__face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* A picture that fills its leaf to the edges, a sheet of paper or a canvas
   photographed with its wall, stands on a black back. Dimmed, it darkens as
   a thing in shadow does, and hides what stands behind it; without the back
   it would thin to glass, and two drawings be seen one through the other. A
   cut-out is given none: its outline is its own, and a square of black
   behind it would show against the light on the stage. The back waits for
   the picture, and goes with it when the pictures are veiled (protect.css)
   or left out of a print, so no dark shape stands where a picture is not. */
.wheel__leaf--solid { background: #000; }

.wheel__leaf--solid.is-waiting,
html.srs-veil .wheel__leaf--solid { background: none; }

@media print {
  .wheel__leaf--solid { background: none; }
}

/* Until its picture has come, the face is a blank plate of the same shape:
   a faint panel inside a hairline. It fades as the picture fades in, and
   stays for as long as a picture will not come at all. */
.wheel__face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.wheel__leaf.is-waiting .wheel__face::before { opacity: 1; }

/* Only the plate in the frame says that its picture is missing; round the
   rest of the ring a blank plate is enough. */
.wheel__slot.is-front .wheel__leaf.is-missing::after,
.wheel__flat .wheel__leaf.is-missing::after {
  content: "This picture has not arrived yet.";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 14%;
  font-family: var(--w-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: #9e9e9e;
  pointer-events: none;
}

.wheel__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: auto;
}

.wheel__img.is-ready { opacity: 1; }

/* A framed painting is cut out and floats. A drawing on its own sheet is
   white to its edges, and on black would read as a hole cut in the stage, so
   it is given what a sheet of paper has under a lamp: a fine dark edge just
   inside it and a faint spill of light round it. Both are drawn on the
   picture itself, and come and go with it. */
.wheel__leaf--sheet .wheel__img {
  outline: 1px solid rgba(0, 0, 0, 0.2);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 36px rgba(255, 255, 255, 0.08);
}

/* The turntable the plates stand round: a faint disc on the floor with a
   rim of fine white ticks, turning with the ring. */
.wheel__floor {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02) 70%, transparent 92%);
}

.wheel__floor::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -0.3deg, rgba(255, 255, 255, 0.3) 0deg 0.6deg, transparent 0.6deg 7.5deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 95%, #000 95.5% 99%, transparent 99.5%);
  mask-image: radial-gradient(closest-side, transparent 95%, #000 95.5% 99%, transparent 99.5%);
}

/* ---------- the frame ---------- */

.wheel__frame {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: calc(var(--pw) + 32px);
  height: calc(var(--ph) + 32px);
  transform: translate(-50%, -50%);
  border: 1px solid var(--w-line);
  pointer-events: none;
  z-index: 2;
}

.wheel__tick {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid #fff;
  transition: transform 0.55s var(--w-ease), opacity 0.55s ease;
}

/* The corners open a little while the ring turns and close on the plate that
   comes to rest in the frame. */
.wheel.is-turning .wheel__tick { opacity: 0.5; transition-duration: 0.25s; }
.wheel.is-turning .wheel__tick--tl { transform: translate(-5px, -5px); }
.wheel.is-turning .wheel__tick--tr { transform: translate(5px, -5px); }
.wheel.is-turning .wheel__tick--bl { transform: translate(-5px, 5px); }
.wheel.is-turning .wheel__tick--br { transform: translate(5px, 5px); }

.wheel__tick--tl { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; }
.wheel__tick--tr { top: -7px; right: -7px; border-top-width: 2px; border-right-width: 2px; }
.wheel__tick--bl { bottom: -7px; left: -7px; border-bottom-width: 2px; border-left-width: 2px; }
.wheel__tick--br { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; }

.wheel__frameno {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  font-family: var(--w-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--w-soft);
  white-space: nowrap;
}

/* ---------- the flat presentation (reduced motion) ---------- */

.wheel__flat {
  display: none;
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: var(--pw);
  height: var(--ph);
  transform: translate(-50%, -50%);
}

.wheel__flatlayer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.wheel__flatlayer.is-on { opacity: 1; }

.wheel.is-still .wheel__flat { display: block; }
.wheel.is-still .wheel__scene { display: none; }
.wheel.is-still .wheel__view { cursor: default; }

/* ---------- the round arrows ---------- */

.wheel__nav {
  position: absolute;
  top: var(--cy);
  z-index: 3;
  margin-top: -26px;
}

.wheel__nav--prev { left: clamp(14px, 3vw, 40px); }
.wheel__nav--next { right: clamp(14px, 3vw, 40px); }

/* A set of one plate has nothing to turn to (works.js puts the arrows away). */
.wheel__nav[hidden] { display: none; }

/* The shared .roundnav draws the white circle and its chevron; on the black
   stage it is given a deeper shadow so it lifts off the plates behind it. */
.wheel .roundnav {
  width: 52px;
  height: 52px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.wheel .roundnav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- the pager: index, dots, count ---------- */

.wheel__pager {
  position: relative;
  z-index: 3;
  width: min(880px, calc(100% - 2 * var(--w-gut)));
  margin: -22px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.wheel__indexbtn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 18px 8px 15px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-family: var(--w-sans);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wheel__indexbtn[aria-expanded="true"] { background: #fff; border-color: #fff; color: #000; }

.wheel__gridglyph {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 7px 0 / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 7px / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 7px 7px / 5px 5px no-repeat;
}

/* The Mercedes dots: the plate in the frame a larger white dot, the others
   grey, the ends of the row smaller where the set runs on beyond them. Each
   dot keeps one place in the row and is only scaled within it, so the row
   never shifts as the wheel turns. */
.wheel__dots {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 14px;
}

.wheel__dots[hidden] { display: none; }

.wheel__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--w-dim);
  transform: scale(0.667);
  transition: transform 0.3s var(--w-ease), background-color 0.3s ease;
}

.wheel__dot[data-s="on"] { transform: none; background: #fff; }
.wheel__dot[data-s="sm"] { transform: scale(0.5); }
.wheel__dot[data-s="xs"] { transform: scale(0.333); }

.wheel .wheel__count {
  justify-self: end;
  margin: 0;
  font-family: var(--w-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--w-dim);
  white-space: nowrap;
}

.wheel__countn { color: #fff; font-weight: 600; }

/* ---------- the caption: the black panel ---------- */

.wheel__card {
  position: relative;
  z-index: 3;
  width: min(880px, calc(100% - 2 * var(--w-gut)));
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "text save"
    "acts acts";
  column-gap: 16px;
  row-gap: 26px;
  color: #fff;
}

.wheel__cardtext { grid-area: text; min-width: 0; }

.wheel__cardtext.is-new { animation: wheelWords 0.42s var(--w-ease) both; }

@keyframes wheelWords {
  from { opacity: 0.25; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* The plate's number in the record, set as the frame above sets it. It is
   the handle a patron gives the studio, so it stands first. */
.wheel .wheel__meta {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--w-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--w-soft);
}

/* The headline: the plate's medium, set as Mercedes set a card's title —
   the narrow serif, upright, in capitals. It is a card's title, not a
   chapter's, and steps below the chapter headings (.mbh) at every width. */
.wheel .wheel__medium {
  margin: 12px 0 0;
  font-family: var(--w-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
}

/* The kind of work and, where the record is certain of it, the size. The
   line keeps its height when a set has nothing to put on it, so the pills
   below never jump. */
.wheel .wheel__sub {
  margin: 10px 0 0;
  min-height: 1.5em;
  font-family: var(--w-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--w-soft);
}

/* The heart: an outline that fills white once the plate is saved. */
.wheel__save {
  grid-area: save;
  align-self: start;
  justify-self: end;
  width: 48px;
  height: 48px;
  margin: -11px -4px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.wheel__save[hidden] { display: none; }

.wheel__heart {
  width: 22px;
  height: 22px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  transition: fill 0.2s ease;
}

.wheel__save.is-saved { border-color: #fff; }
.wheel__save.is-saved .wheel__heart { fill: currentColor; }
.wheel__save.is-beat .wheel__heart { animation: wheelBeat 0.42s var(--w-ease); }

@keyframes wheelBeat {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* The pills come from the shared set: the plate's own action white, the
   room outlined. On a telephone each runs the full width of the panel. */
.wheel__acts {
  grid-area: acts;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wheel__acts .pill {
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  flex-wrap: wrap;
  row-gap: 4px;
  text-align: center;
  white-space: normal;
}

.wheel__room .addon-badge { margin-left: 2px; }
.wheel__room:hover .addon-badge { color: inherit; border-color: currentColor; background: transparent; }

/* ---------- the index: a white sheet of grey tiles ----------
   Opened over the whole wheel, the index is the Mercedes model range: a white
   panel, each plate on a light grey tile with its number in the serif. */

.wheel__index {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff);
  color: var(--ink, #000);
  border-radius: var(--r-card, 12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: wheelIndex 0.28s var(--w-ease) both;
}

.wheel__index[hidden] { display: none; }

.wheel__index :focus-visible { outline-color: #000; }

/* The white arrows would show over the sheet; while it is open they stand
   down altogether (works.js also takes them out of reach of the keyboard). */
.wheel.is-indexed .wheel__nav { visibility: hidden; }

@keyframes wheelIndex {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.wheel__indexhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(16px, 3vw, 36px) 14px;
}

.wheel .wheel__indextitle {
  margin: 0;
  font-family: var(--w-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1;
  color: #000;
}

.wheel__indexn {
  margin-left: 6px;
  font-family: var(--w-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--g500, #767676);
  vertical-align: 0.35em;
}

.wheel__indexclose {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--g100, #f4f4f4);
  color: #000;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.wheel__indexclose::before,
.wheel__indexclose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.wheel__indexclose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.wheel__indexgrid {
  list-style: none;
  margin: 0;
  padding: 4px clamp(16px, 3vw, 36px) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}

/* Every tile fills its place in the row, so a row's tiles end on one line
   whether or not each has a size under its picture. */
.wheel__thumb {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
  padding: 12px 12px 11px;
  border: 0;
  border-radius: var(--r-tile, 8px);
  background: var(--g100, #f4f4f4);
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.wheel__thumbpic {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}

/* works.js gives each picture its width within the square, so the box is the
   picture's own shape from the first and nothing shifts as they come in. */
.wheel__thumbpic img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* A drawing on a white sheet, on the pale tile: the edge and the faint
   shadow of a sheet of paper laid on it. */
.wheel__thumbpic img.is-sheet { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.14); }

/* A picture that will not come leaves the tile empty, with its number. */
.wheel__thumbpic img.is-missing { visibility: hidden; }

.wheel__thumb[aria-current="true"] { box-shadow: inset 0 0 0 2px #000; }

/* The number, and the size where there is one. A size too long to stand
   beside the number on a narrow tile drops under it. */
.wheel__thumbcap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 6px;
  font-family: var(--w-sans);
  font-size: 0.74rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--g600, #5c5c5c);
}

.wheel__thumbn {
  font-family: var(--w-serif);
  font-size: 1.35rem;
  line-height: 1;
  color: #000;
}

/* The line under the stage: what is on the ring, a shade lighter, and then
   how to turn it. On a wide screen the two run on as one line with a point
   between them. On a telephone each has a line of its own, the point is not
   needed, and the second is cut to "Swipe or use the arrows". Where a line
   must still break, it breaks evenly rather than leaving one word alone. */
.wheel__tally { text-wrap: balance; }
.wheel__tallyset { color: var(--g300, #c8c8c8); }

@media (max-width: 699px) {
  .wheel__tallyset,
  .wheel__tallyhow { display: block; }
  .wheel__tallyhow::first-letter { text-transform: uppercase; }
  .wheel__tallywide { display: none; }
}

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

/* ---------- hover and press ----------
   A control is lit on hover only where there is a pointer that can hover; on
   a telephone a tapped control would otherwise keep that look after the
   finger has gone, the heart grey, the white pill grey, the arrow enlarged.
   A press is answered everywhere by a short dip, in black and white. */

@media (hover: hover) {
  .wheel__indexbtn:hover { background: #fff; border-color: #fff; color: #000; }
  .wheel__save:hover { background: rgba(255, 255, 255, 0.1); }
  .wheel__save:not(.is-saved):hover { border-color: rgba(255, 255, 255, 0.6); }
  .wheel__indexclose:hover { background: var(--g200, #e0e0e0); }
  .wheel__thumb:hover { background: var(--g150, #ececec); }
}

@media (hover: none) {
  .wheel .roundnav:hover { transform: none; }
  .wheel__acts .pill--light:hover { background: #fff; border-color: #fff; color: #000; }
  .wheel__acts .pill--ghost:hover { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
}

.wheel__indexbtn:active,
.wheel__save:active,
.wheel__acts .pill:active,
.wheel__indexclose:active { opacity: 0.72; }
.wheel__thumb:active { background: var(--g200, #e0e0e0); }
.wheel .roundnav:active { transform: scale(0.94); }

/* ---------- wider screens ----------
   The panel keeps the order of a Mercedes card at every width (the words,
   then the pills); from a small tablet up the pills stand side by side at
   their own width rather than running across the whole panel. */

@media (min-width: 600px) {
  .wheel__acts { flex-direction: row; flex-wrap: wrap; }

  .wheel__acts .pill {
    width: auto;
    min-height: 50px;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
}

/* On a wide screen the pager is drawn up onto the faint end of the floor's
   reflection, so on a laptop the whole panel, pills and all, comes into view
   with the plate. */
@media (min-width: 900px) {
  .wheel__view,
  .wheel__probe { height: clamp(440px, calc(100svh - 340px), 700px); }
  .wheel__pager { margin-top: -38px; }
  .wheel__card { margin-top: 26px; row-gap: 24px; }
}

/* ---------- telephones ---------- */

@media (max-width: 699px) {
  .wheel__view,
  .wheel__probe { height: clamp(400px, 116vw, 540px); }

  .wheel__nav { margin-top: -24px; }
  .wheel .roundnav { width: 48px; height: 48px; }
  .wheel__nav--prev { left: 10px; }
  .wheel__nav--next { right: 10px; }

  .wheel__frame {
    width: calc(var(--pw) + 18px);
    height: calc(var(--ph) + 18px);
  }

  .wheel__tick { width: 14px; height: 14px; }
  .wheel__tick--tl, .wheel__tick--tr { top: -5px; }
  .wheel__tick--bl, .wheel__tick--br { bottom: -5px; }
  .wheel__tick--tl, .wheel__tick--bl { left: -5px; }
  .wheel__tick--tr, .wheel__tick--br { right: -5px; }

  .wheel .wheel__view:focus-visible .wheel__frame { outline-offset: 2px; }

  .wheel__guides::before { top: calc(var(--cy) - var(--ph) / 2 - 9px); height: calc(var(--ph) + 18px); }
  .wheel__guides::after { left: calc(50% - var(--pw) / 2 - 9px); width: calc(var(--pw) + 18px); }

  .wheel__frameno { bottom: calc(100% + 9px); }

  .wheel__pager { gap: 8px; }
  .wheel__indexbtn { padding-inline: 13px 15px; font-size: 0.84rem; }

  /* On a telephone the sheet runs to the foot of the window, where the page's
     two round badges stand over it. The list is given a foot of its own, so
     the number of its last plate is never read from under them. */
  .wheel__indexgrid {
    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
    gap: 8px;
    padding-bottom: calc(var(--badge, 56px) + 16px + env(safe-area-inset-bottom, 0px));
  }
  .wheel__thumb { padding: 8px 8px 9px; gap: 8px; }
  .wheel__thumbn { font-size: 1.15rem; }
  .wheel__thumbcap { font-size: 0.68rem; }
}

@media (max-width: 380px) {
  .wheel__dots { gap: 2px; }
  .wheel__indexbtn { padding-inline: 11px 13px; gap: 7px; }
  .wheel__acts .pill { padding-inline: 16px; }
  .wheel__room .addon-badge { margin-left: 0; }
}

/* A telephone turned on its side has little height to give. The stage is
   measured against the screen there, so the plate in the frame is not left
   below the fold with only the far side of the ring in view. */
@media (max-height: 560px) and (min-width: 560px) {
  .wheel__view,
  .wheel__probe { height: clamp(260px, calc(100svh - 92px), 460px); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel__img,
  .wheel__face::before,
  .wheel__scene,
  .wheel__tick,
  .wheel__dot { transition: none; }
  .wheel__cardtext.is-new { animation: none; }
  .wheel__index { animation: none; }
  .wheel__save.is-beat .wheel__heart { animation: none; }
}

/* ==== room.css ==== */
/* Imagine it in your room — the optional AI add-on.

   One full-screen dialog in black and white, dressed as the Mercedes-Benz
   pages dress a model: a black bar, the steps in the white segmented switch
   (the current one lit black), the room and the painting shown on a black
   showroom stage, and a white sheet beside it (or, on a telephone, rising
   over it) where the patron reads and chooses. Headlines and big numbers are
   in the narrow serif; everything else is in the plain sans. Black cards carry
   the offers and the actions, light-grey tiles the choices, and white spec
   cards the measurements. There is no colour of the site's own in here: the
   paintings, the rooms and the room's palette keep theirs.

   Everything here is scoped to .room, and every token is read with a
   fallback, so the dialog looks the same whether or not the V2 shell's
   stylesheet has defined it. The shell's tokens win wherever they exist.
   Each rule begins with ".room " for a second reason: the dialog hangs off
   body.v2, and the shell's element rules (".v2 p" and the like) would
   otherwise outrank a single class and put their margins and colours in. */

.room {
  --rm-ink: var(--ink, #000);
  --rm-paper: var(--paper, #fff);
  --rm-g50: var(--g50, #f8f8f8);
  --rm-g100: var(--g100, #f4f4f4);
  --rm-g150: var(--g150, #ececec);
  --rm-g200: var(--g200, #e0e0e0);
  --rm-g300: var(--g300, #c8c8c8);
  --rm-g500: var(--g500, #767676);
  --rm-g600: var(--g600, #5c5c5c);
  --rm-g700: var(--g700, #3c3c3c);
  --rm-g800: var(--g800, #262626);
  --rm-g900: var(--g900, #141414);
  --rm-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --rm-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  --rm-deva: var(--f-deva, "Tiro Devanagari Hindi", "Nirmala UI", sans-serif);
  --rm-card: var(--r-card, 12px);
  --rm-tile: var(--r-tile, 8px);
  --rm-pill: var(--r-pill, 999px);
  --rm-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  --rm-panel: clamp(380px, 31vw, 468px);
  /* The focus ring follows the ground it sits on: white on black, black on
     white. Each ground below sets its own. */
  --rm-focus: #fff;
}

/* While the dialog is open the page behind it stays where it was. The site
   normally reserves the scrollbar's gutter (base.css), and a desktop browser
   with classic scrollbars would go on reserving it here: a blank white strip
   down the right-hand edge, outside the dialog and its backdrop alike. The
   gutter is given up for as long as the dialog is open instead. The page
   behind reflows by the width of a scrollbar, but the dialog covers all of
   it, and it reflows back before it is seen again. */
html.room-lock {
  overflow: hidden;
  scrollbar-gutter: auto;
}

/* Sized to the whole window, scrollbar gutter included, so no strip of the
   page shows down the right-hand edge. */
dialog.room {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--rm-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

dialog.room[open] { display: block; animation: room-in 0.42s var(--rm-ease); }
dialog.room::backdrop { background: rgba(0, 0, 0, 0.82); }

@keyframes room-in {
  from { opacity: 0; transform: translateY(14px); }
}

.room *,
.room *::before,
.room *::after { box-sizing: border-box; }

/* The page's own stylesheets give sections generous padding and hidden
   things no special treatment; neither is wanted in here. */
.room [hidden] { display: none !important; }
.room li { margin: 0; }

.room .hi { font-family: var(--rm-deva); font-weight: 400; }

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

/* The file inputs are real and reachable by script, but never seen: the
   buttons in the panel speak for them. They are not display:none, which some
   telephones refuse to open. */
.room .room__file {
  position: absolute;
  top: 0;              /* inside the dialog, which would otherwise be a pixel too tall */
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.room button { font-family: inherit; }

.room :focus-visible {
  outline: 2px solid var(--rm-focus);
  outline-offset: 3px;
}

.room .room__shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

/* ---------- the black bar ---------- */

.room .room__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  height: 76px;
  padding: 0 16px 0 22px;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.room .room__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.room .room__mark {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.room .room__title {
  margin: 0;
  font: 600 15px/1.2 var(--rm-sans);
  letter-spacing: -0.006em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room .room__title .hi {
  margin-left: 8px;
  font-size: 14px;
  color: var(--rm-g300);
}

/* The site's add-on capsule, in its outline dress for the black bar. */
.room .addon-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--rm-pill);
  background: transparent;
  color: #fff;
  font: 500 11px/1 var(--rm-sans);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.room .addon-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* The steps, as the Mercedes brand switch: one white capsule with a hairline
   edge, the current segment lit black. Roman numerals in the serif. */
.room .room__steps {
  --rm-focus: #000;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 2px;
  list-style: none;
  border: 1px solid var(--rm-g300);
  border-radius: var(--rm-pill);
  background: #fff;
}

/* Where a step shows only its numeral (a tablet or a telephone held across)
   it is still a finger wide. */
.room .room__steps button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--rm-pill);
  background: transparent;
  color: #000;
  font: 500 13.5px/1 var(--rm-sans);
  letter-spacing: -0.003em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--rm-ease), color 0.25s var(--rm-ease);
}

.room .room__steps button:hover:not(:disabled):not([aria-current="step"]) { background: var(--rm-g100); }

.room .room__steps button:focus-visible {
  outline-offset: 1px;
  box-shadow: inset 0 0 0 2px #fff;
}

.room .room__rn {
  font: 400 18px/1 var(--rm-serif);
  letter-spacing: 0.02em;
}

.room .room__steps button[aria-current="step"] {
  background: var(--rm-g900);
  color: #fff;
}

/* In the lit segment a single "I" in the serif would read as a rule, so a
   point sets the numeral off from the step's name. It is not read aloud. */
.room .room__steps button[aria-current="step"] .room__rn::after {
  content: "\00b7";
  content: "\00b7" / "";
  margin-left: 7px;
  font: 500 13.5px/1 var(--rm-sans);
  color: var(--rm-g500);
}

.room .room__steps button:disabled { color: var(--rm-g300); cursor: default; }
.room .room__steps button[aria-current="step"]:disabled { background: var(--rm-g700); color: #fff; }

.room .room__close {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: transform 0.25s var(--rm-ease);
}

.room .room__close:hover { transform: rotate(90deg); }

.room .room__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ---------- the two halves ---------- */

.room .room__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rm-panel);
  min-height: 0;
}

/* ---------- the stage: showroom black under a cool white spot ---------- */

.room .room__stage {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(58% 52% at 50% 40%, rgba(255, 255, 255, 0.085), transparent 72%),
    radial-gradient(120% 70% at 50% 115%, rgba(0, 0, 0, 0.7), transparent 60%),
    #000;
}

.room .room__view {
  position: absolute;
  inset: 64px 36px 62px;
  display: grid;
  place-items: center;
}

/* I — the painting alone, in the spot, inside a white hairline */
.room .room__art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
}

.room .room__artbox {
  position: relative;
  display: block;
  line-height: 0;
}

.room .room__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 560px;          /* refined by the script to the stage's size */
  max-height: 60vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.7)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition: opacity 0.5s var(--rm-ease), transform 0.7s var(--rm-ease);
}

.room .room__art.is-in img { opacity: 1; transform: none; }

/* A picture that has not arrived leaves a line in its place, inside the same
   hairline. Elsewhere in the dialog a missing picture simply is not drawn. */
.room .room__artnone { display: none; }
.room img.is-missing { visibility: hidden; }
.room .room__art.is-missing img { display: none; }
.room .room__art.is-missing .room__artbox::after { content: none; }

.room .room__art.is-missing .room__artnone {
  display: block;
  width: min(250px, 58vw);
  padding: 46px 6px;
  font: 400 14px/1.5 var(--rm-sans);
  color: var(--rm-g300);
  text-align: center;
}

/* The floor under the spot, where the painting's shadow falls. */
.room .room__artbox::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -30px;
  height: 30px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent);
}

/* A grey hairline round the painting with white corners, as a gallery
   marks the place a work hangs. */
.room .room__gframe {
  position: absolute;
  inset: -34px -40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.room .room__gframe i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid #fff;
}

.room .room__gframe i:nth-child(1) { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.room .room__gframe i:nth-child(2) { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.room .room__gframe i:nth-child(3) { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.room .room__gframe i:nth-child(4) { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

/* II — no room yet */
.room .room__blank {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 440px;
  text-align: center;
  color: var(--rm-g300);
}

.room .room__blankfig {
  position: relative;
  display: block;
  width: min(380px, 78%);
}

.room .room__blankart {
  position: absolute;
  left: 39%;
  top: 13.5%;
  width: 22%;
  height: 31%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}

.room .room__blank svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room .room__blank .b-wall { stroke: rgba(255, 255, 255, 0.16); fill: rgba(255, 255, 255, 0.03); }
.room .room__blank .b-art { stroke: #fff; stroke-dasharray: 5 5; fill: rgba(255, 255, 255, 0.06); }
.room .room__blank .b-dim { stroke: #fff; stroke-width: 1.6; }

.room .room__blank p { margin: 0; font: 400 14px/1.5 var(--rm-sans); }

.room .room__blank strong {
  display: block;
  margin-bottom: 6px;
  font: 400 30px/1.05 var(--rm-serif);
  color: #fff;
}

/* III and IV — the room itself */
.room .room__scene {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  user-select: none;
  -webkit-user-select: none;
}

.room .room__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;             /* the box already has the photograph's proportions */
  pointer-events: none;
  -webkit-user-drag: none;
}

.room .room__ovl,
.room .room__marks {
  position: absolute;
  inset: 0;
}

.room .room__marks { pointer-events: none; }

.room .room__scene.is-manual { cursor: crosshair; touch-action: none; }

.room .room__piece {
  position: absolute;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 var(--sy, 6px) var(--sb, 12px) rgba(0, 0, 0, var(--sa, 0.4)));
}

.room .room__piece[hidden] { display: none; }
.room .room__piece canvas { display: block; width: 100%; height: 100%; }
.room .room__piece:focus { outline: none; }

/* White, black, white: a ring that shows on a pale wall and a dark one. */
.room .room__piece:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px #fff;
}

.room .room__scene.is-dragging .room__piece { cursor: grabbing; }
.room .room__piece.is-in { animation: room-hang 0.55s var(--rm-ease); }
/* The outline that marks the place of a picture not yet arrived casts no shadow. */
.room .room__piece.is-missing { filter: none; }

@keyframes room-hang {
  from { opacity: 0; transform: translateY(-8px); }
}

/* What the helper found: the open wall dashed in white, the furniture in a
   solid white line with a black edge. */
.room .room__box { position: absolute; border-radius: 3px; }

.room .room__box--wall {
  border: 1.5px dashed rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.room .room__box--anchor {
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.room .room__box span {
  position: absolute;
  padding: 5px 10px;
  border-radius: var(--rm-pill);
  font: 600 11px/1.2 var(--rm-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* The wall's label keeps inside its box, and so inside the photograph: on a
   small screen, or with the open wall near an edge, it takes a second line
   rather than running off the picture. */
.room .room__box--wall span {
  left: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
  border-radius: 14px;
  background: #fff;
  color: #000;
  white-space: normal;
  text-wrap: balance;
}
.room .room__box--anchor span { left: -2px; top: -8px; transform: translateY(-100%); background: #000; color: #fff; }

/* The measuring line, drawn in the photograph's own pixels. */
.room .room__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.room .room__line line {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.room .room__line:not(.is-live) line { stroke-dasharray: 6 5; }

.room .room__handle {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

/* A white disc with a black ring and a black centre: a target that reads on
   any wall. */
.room .room__handle i {
  width: 24px;
  height: 24px;
  border: 2px solid #000;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 3px, #fff 3.5px);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 3px 10px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s var(--rm-ease);
}

.room .room__handle:hover i,
.room .room__scene.is-dragging .room__handle i { transform: scale(1.15); }
.room .room__handle:focus-visible { outline: none; }
.room .room__handle:focus-visible i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000, 0 3px 10px rgba(0, 0, 0, 0.55); }

.room .room__linelabel {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  padding: 6px 12px;
  border-radius: var(--rm-pill);
  background: #000;
  color: #fff;
  font: 600 12.5px/1.2 var(--rm-sans);
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* The measuring pass: the room dims a shade and a band of white light
   travels down it, slowly. */
.room .room__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  transition: opacity 0.35s var(--rm-ease);
}

.room .room__scene.is-scanning .room__scan { opacity: 1; }

/* The band travels only while there is something being measured; the rest
   of the time it is held where it is (paused, not removed, so it does not
   jump back into view while the veil fades). */
.room .room__scene:not(.is-scanning) .room__scan i { animation-play-state: paused; }

.room .room__scan i {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14) 82%, rgba(255, 255, 255, 0.92) 99%, transparent);
  animation: room-scan 2.4s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

@keyframes room-scan {
  from { transform: translateY(-100%); }
  to { transform: translateY(290%); }
}

/* Caption, tools and scale on the stage */
.room .room__cap {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 500 12px/1.3 var(--rm-sans);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.66);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.room .room__capl:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.55);
}

/* The plate's own line is kept whole; a long note beside it gives way,
   wrapping to two lines at most, so it never climbs into the picture. */
.room .room__capl {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room .room__capr {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.room .room__tools {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.room .room__tools[hidden] { display: none; }

.room .room__tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--rm-pill);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 500 13px/1 var(--rm-sans);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.room .room__tool:hover { border-color: rgba(255, 255, 255, 0.7); }
.room .room__tool[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.room .room__tool[aria-pressed="true"]:focus-visible { outline-color: #fff; }

.room .room__tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.room .room__ruler {
  position: absolute;
  left: 36px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font: 500 11.5px/1 var(--rm-sans);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.room .room__ruler[hidden] { display: none; }

.room .room__ruler i {
  display: block;
  height: 8px;
  border: 1.5px solid #fff;
  border-top: 0;
}

/* ---------- the white sheet ---------- */

/* One column, exactly as wide as the sheet: the foot's two pills keep their
   words on one line, and without this a pair too long for a narrow sheet
   would widen the column and carry the whole sheet past the window's edge. */
.room .room__panel {
  --rm-focus: #000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  padding: 0;
  background: var(--rm-paper);
  color: var(--rm-ink);
}

.room .room__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px clamp(24px, 2.5vw, 36px) 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.room .room__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rm-g150);
  background: var(--rm-paper);
}

.room .room__foot .rbtn { white-space: nowrap; }

/* Head of each step: the numeral, a hairline, the Hindi name; then the
   serif headline and a plain lede under it. */
.room .room__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--rm-g600);
}

.room .room__eyrn { font: 400 18px/1 var(--rm-serif); color: #000; }

.room .room__lead {
  flex: 0 0 28px;
  height: 0;
  border-top: 1px solid var(--rm-g300);
}

.room .room__eyebrow .hi { font-size: 14px; color: var(--rm-g600); }

.room .room__h {
  margin: 0 0 12px;
  font: 400 clamp(40px, 3.3vw, 52px)/1.02 var(--rm-serif);
  letter-spacing: -0.005em;
  color: #000;
  outline: none;
}

.room .room__lede {
  margin: 0 0 26px;
  font: 400 15px/1.6 var(--rm-sans);
  color: var(--rm-g700);
}

.room .room__sub {
  margin: 30px 0 14px;
  font: 400 26px/1.1 var(--rm-serif);
  letter-spacing: 0;
  text-transform: none;
  color: #000;
}

.room .room__quiet { margin: 0 0 16px; color: var(--rm-g600); font: 400 14px/1.5 var(--rm-sans); }

/* Black cards on white, as the Mercedes pages set their offers. */
.room .room__card {
  margin: 0 0 18px;
  padding: 24px 22px 22px;
  border-radius: var(--rm-card);
}

.room .room__card--night {
  --rm-focus: #fff;
  background: #000;
  color: #fff;
}

.room .room__k {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font: 600 11px/1.2 var(--rm-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-g300);
}

.room .room__k svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* The card's title, as Mercedes titles its black cards: the serif in
   capitals. A sentence stays a sentence. */
.room .room__big {
  margin: 0 0 8px;
  font: 400 30px/1.02 var(--rm-serif);
  letter-spacing: 0.005em;
  color: #fff;
}

.room .room__card--night .room__big { text-transform: uppercase; }

.room .room__v {
  margin: 0;
  font: 400 14px/1.55 var(--rm-sans);
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- buttons: pills ---------- */

.room .rbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--rm-pill);
  font: 600 15px/1.1 var(--rm-sans);
  letter-spacing: -0.003em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--rm-ease), color 0.2s var(--rm-ease), border-color 0.2s var(--rm-ease), transform 0.2s var(--rm-ease);
}

.room .rbtn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room .rbtn:active:not(:disabled) { transform: scale(0.98); }
/* A pill that cannot be pressed yet goes quiet grey, as Mercedes greys an
   unavailable action, rather than fading its own colours. */
.room .rbtn:disabled {
  border-color: transparent;
  background: var(--rm-g150);
  color: var(--rm-g500);
  box-shadow: none;
  cursor: not-allowed;
}

.room .room__card--night .rbtn:disabled { background: var(--rm-g800); color: var(--rm-g500); }

/* The main action of a step: black on white, and white inside a black card. */
.room .rbtn--primary,
.room .rbtn--ink { background: #000; color: #fff; }
.room .rbtn--primary:hover:not(:disabled),
.room .rbtn--ink:hover:not(:disabled) { background: var(--rm-g800); }
.room .room__card--night .rbtn--primary { background: #fff; color: #000; }
.room .room__card--night .rbtn--primary:hover:not(:disabled) { background: var(--rm-g150); }
.room .rbtn--light { background: #fff; color: #000; }
.room .rbtn--light:hover { background: var(--rm-g150); }
.room .rbtn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: transparent; }
.room .rbtn--ghost:hover { border-color: #fff; }
.room .rbtn--line { border-color: var(--rm-g500); color: #000; background: #fff; }
.room .rbtn--line:hover:not(:disabled) { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.room .rbtn--wide { width: 100%; }

.room .room__link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: 600 14px/1.3 var(--rm-sans);
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.room .room__link:hover { text-decoration-thickness: 2px; }

.room .room__link--solo {
  display: block;
  min-height: 44px;
  margin: 2px auto 0;
  padding: 10px 8px;
}

.room .room__row { display: flex; flex-wrap: wrap; gap: 10px; }
.room .room__row > .rbtn { flex: 1 1 auto; }

/* ---------- I: choosing the painting ---------- */

/* The kind filter, as the segmented switch again, in small. */
.room .room__seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 18px;
  padding: 2px;
  border: 1px solid var(--rm-g300);
  border-radius: var(--rm-pill);
  background: #fff;
}

.room .room__seg button {
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--rm-pill);
  background: transparent;
  color: #000;
  font: 500 14px/1 var(--rm-sans);
  cursor: pointer;
}

.room .room__seg button:hover:not([aria-pressed="true"]) { background: var(--rm-g100); }
.room .room__seg button[aria-pressed="true"] { background: var(--rm-g900); color: #fff; }
.room .room__seg button:focus-visible { outline-offset: 1px; box-shadow: inset 0 0 0 2px #fff; }

/* The record as light-grey tiles, each with its picture. */
.room .room__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.room .room__thumbs button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5.3;
  padding: 8px 7px 22px;
  border: 0;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.25s var(--rm-ease);
}

.room .room__thumbs button:hover { background: var(--rm-g150); }

/* A framed oil arrives cut out of its background and a drawing as a white
   sheet: the soft shadow lifts both off the tile, and keeps the edge of a
   sheet in sight when its tile turns white. */
.room .room__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.26));
}

.room .room__thumbs button[aria-pressed="true"] {
  background: #fff;
  box-shadow: inset 0 0 0 2px #000;
}

.room .room__no {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  font: 600 10px/1 var(--rm-sans);
  letter-spacing: 0.06em;
  color: var(--rm-g600);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.room .room__thumbs button[aria-pressed="true"] .room__no { color: #000; }

/* A tile whose picture has not arrived keeps its number, set in the middle. */
.room .room__thumbs img.is-missing + .room__no {
  display: block;
  top: 50%;
  bottom: auto;
  font-size: 13px;
  transform: translateY(-50%);
}

.room .room__plate .room__big { font-size: 34px; }

.room .room__tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}

.room .room__tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--rm-pill);
  font: 600 10.5px/1 var(--rm-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.room .room__tagnote { font: 400 13px/1.4 var(--rm-sans); color: rgba(255, 255, 255, 0.66); }

/* ---------- II: the room ---------- */

.room .room__chosen {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 10px 14px 10px 10px;
  border-radius: var(--rm-card);
  background: var(--rm-g100);
}

.room .room__chosen img {
  width: 44px;
  height: 54px;
  flex: none;
  padding: 3px;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.room .room__chosen p { display: grid; flex: 1; min-width: 0; margin: 0; }
.room .room__chosen .room__k { margin: 0 0 4px; color: #000; }
.room .room__chosen .room__v { color: var(--rm-g700); font-size: 14px; }
.room .room__chosen .room__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

.room .room__upload { position: relative; transition: outline-color 0.2s; }
.room .room__upload.is-over { outline: 2px dashed #000; outline-offset: 4px; }

.room .room__upicon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
}

.room .room__upicon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.room .room__uprow { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* A telephone is offered its camera and its gallery; a desktop, one chooser. */
.room .room__onlytouch { display: none; }

@media (pointer: coarse) {
  .room .room__onlytouch { display: inline-flex; }
  .room .room__onlyfine { display: none; }
}

/* The sample rooms, as Mercedes shows its ranges: a light-grey tile, the
   picture above and a serif name under it. */
.room .room__samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.room .room__samples button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.room .room__samples button:hover { background: var(--rm-g150); }

.room .room__samples img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--rm-ease), opacity 0.3s;
}

.room .room__samples button:hover img { transform: scale(1.03); }

.room .room__samples button > span {
  display: block;
  padding: 10px 12px 12px;
  font: 400 20px/1.1 var(--rm-serif);
}

.room .room__samples .hi { display: block; margin-top: 3px; color: var(--rm-g600); font-size: 12.5px; line-height: 1.3; }
.room .room__samples button[aria-pressed="true"] { background: #fff; }

/* The chosen room is ringed in black over its picture as well as its name. */
.room .room__samples button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #000;
  border-radius: inherit;
  pointer-events: none;
}

.room .room__privacy,
.room .room__fine {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font: 400 13px/1.55 var(--rm-sans);
  color: var(--rm-g600);
}

.room .room__privacy svg,
.room .room__fine svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  fill: none;
  stroke: #000;
  stroke-width: 1.6;
}

.room .room__fine {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rm-g200);
  font-size: 12px;
}

/* A quiet note, on a light-grey tile. */
.room .room__aside {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  font: 500 13.5px/1.5 var(--rm-sans);
  color: #000;
}

.room .room__aside svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  fill: none;
  stroke: #000;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Something that needs reading before going on: a white card with a firm
   black edge and a round mark, as Mercedes sets its notices. */
.room .room__warn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 2px solid #000;
  border-radius: var(--rm-card);
  background: #fff;
  color: #000;
  font: 500 14px/1.5 var(--rm-sans);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.45);
}

.room .room__warn::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 700 12px/1 var(--rm-sans);
}

/* ---------- III: measuring ---------- */

.room .room__aicta .room__big { font-size: 25px; line-height: 1.12; margin-bottom: 20px; text-transform: none; }
.room .room__aicta .rbtn { margin-bottom: 16px; min-height: 52px; font-size: 15px; }

.room .room__bar2 {
  height: 2px;
  margin: 2px 0 22px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.room .room__bar2 i {
  display: block;
  width: 38%;
  height: 100%;
  background: #fff;
  animation: room-bar 1.5s var(--rm-ease) infinite;
}

@keyframes room-bar {
  from { transform: translateX(-100%); }
  to { transform: translateX(270%); }
}

.room .room__ticks {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  font: 500 14px/1.3 var(--rm-sans);
  color: #fff;
}

.room .room__ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.32;
  animation: room-tick 4.5s linear infinite;
}

.room .room__ticks li:nth-child(2) { animation-delay: 1.5s; }
.room .room__ticks li:nth-child(3) { animation-delay: 3s; }

.room .room__ticks li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

@keyframes room-tick {
  0% { opacity: 0.32; }
  8%, 34% { opacity: 1; }
  44%, 100% { opacity: 0.32; }
}

/* The measurement, as a white spec card. */
.room .room__card--night.room__result {
  --rm-focus: #000;
  border: 1px solid var(--rm-g200);
  background: #fff;
  color: #000;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.35);
}

.room .room__result .room__k { color: var(--rm-g600); }
.room .room__result .room__v { color: var(--rm-g700); }

.room .room__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 8px 0 16px;
}

.room .room__facts div { padding-top: 10px; border-top: 1px solid var(--rm-g200); }

.room .room__facts dt {
  font: 500 10.5px/1.2 var(--rm-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-g600);
}

.room .room__facts dd { margin: 5px 0 0; font: 400 23px/1.1 var(--rm-serif); color: #000; }

.room .room__palette {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font: 500 12.5px/1 var(--rm-sans);
  color: var(--rm-g600);
}

.room .room__palette i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.room .room__palette span { margin-left: 6px; }

.room .room__conf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 500 12.5px/1 var(--rm-sans);
  color: var(--rm-g600);
}

.room .room__conf b {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--rm-g150);
}

.room .room__conf b i { display: block; height: 100%; background: #000; }
.room .room__conf em { font-style: normal; color: #000; font-variant-numeric: tabular-nums; }

.room .room__how {
  margin: 0 0 18px;
  padding-left: 22px;
  font: 400 15px/1.55 var(--rm-sans);
  color: var(--rm-g700);
}

.room .room__how li { margin-bottom: 6px; padding-left: 4px; }
.room .room__how li::marker { font: 400 18px var(--rm-serif); color: #000; }
.room .room__how b { font-weight: 600; color: #000; }

/* What the line measures: light-grey tiles, the chosen one black. */
.room .room__presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.room .room__presets button {
  display: flex;
  align-items: baseline;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  min-height: 56px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--rm-tile);
  background: var(--rm-g100);
  color: #000;
  font: 500 14px/1.2 var(--rm-sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.room .room__presets button:hover { background: var(--rm-g150); }

.room .room__presets em {
  font: normal 400 18px/1 var(--rm-serif);
  color: var(--rm-g600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.room .room__presets button[aria-checked="true"] { background: #000; color: #fff; }
.room .room__presets button[aria-checked="true"] em { color: var(--rm-g300); }
.room .room__presets button[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

.room .room__custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 18px;
}

.room .room__custom label[for] { grid-column: 1 / -1; font: 600 13px/1.2 var(--rm-sans); color: #000; }

.room .room__custom input[type="number"] {
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rm-g500);
  border-radius: var(--rm-tile);
  background: #fff;
  color: #000;
  font: 500 18px/1 var(--rm-sans);
  font-variant-numeric: tabular-nums;
}

.room .room__custom input[type="number"]:hover { border-color: #000; }
.room .room__custom input[type="number"]:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-color: #000; }

.room .room__unit {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 3px;
  border: 1px solid var(--rm-g300);
  border-radius: var(--rm-pill);
}

.room .room__unit button {
  min-width: 52px;
  height: 44px;
  border: 0;
  border-radius: var(--rm-pill);
  background: transparent;
  color: #000;
  font: 600 14px/1 var(--rm-sans);
  cursor: pointer;
}

.room .room__unit button[aria-pressed="true"] { background: var(--rm-g900); color: #fff; }
.room .room__unit button:focus-visible { outline-offset: 1px; box-shadow: inset 0 0 0 2px #fff; }

.room .room__check {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 500 14px/1.3 var(--rm-sans);
  cursor: pointer;
}

.room .room__check input { width: 20px; height: 20px; margin: 0; accent-color: #000; }

/* ---------- IV: on the wall ---------- */

.room .room__advice { padding: 24px 22px 22px; }

.room .room__size {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0 14px;
  font: 400 64px/0.95 var(--rm-serif);
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.room .room__size small {
  font: 600 11px/1 var(--rm-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-g300);
}

.room .room__reason { margin: 0; font: 400 14.5px/1.6 var(--rm-sans); color: rgba(255, 255, 255, 0.84); }

/* The standard sizes, as white spec tiles; the one on the wall is black. */
.room .room__sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding-top: 10px;
}

.room .room__sizes button {
  position: relative;
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--rm-g200);
  border-radius: var(--rm-tile);
  background: #fff;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.room .room__sizes button:hover { border-color: #000; }

.room .room__sz {
  font: 400 23px/1 var(--rm-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* How a size fits is told by a word and a mark, never by colour alone:
   a full dot for ideal, a half dot for large, an open ring for small, and a
   struck ring with the size greyed for too large. */
.room .room__fit {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 10px/1 var(--rm-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rm-g600);
}

.room .room__fit i {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.room .room__sizes .fit--ideal .room__fit { color: #000; }
.room .room__sizes .fit--ideal .room__fit i { background: currentColor; }
.room .room__sizes .fit--large .room__fit i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.room .room__sizes .fit--too-large .room__fit { color: var(--rm-g500); }
.room .room__sizes .fit--too-large .room__fit i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1.5px;
  margin-left: -0.75px;
  background: currentColor;
  transform: rotate(45deg);
}
.room .room__sizes .fit--too-large .room__sz { color: var(--rm-g500); }

.room .room__sizes button[aria-checked="true"] { background: #000; border-color: #000; color: #fff; }
.room .room__sizes button[aria-checked="true"] .room__sz { color: #fff; }
.room .room__sizes button[aria-checked="true"] .room__fit { color: var(--rm-g300); }
.room .room__sizes button[aria-checked="true"].fit--ideal .room__fit { color: #fff; }
.room .room__sizes button[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

.room .room__sizes .is-best::after {
  content: "Suggested";
  position: absolute;
  top: -10px;
  right: 8px;
  padding: 4px 8px;
  border: 1px solid #000;
  border-radius: var(--rm-pill);
  background: #fff;
  color: #000;
  font: 700 9px/1 var(--rm-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.room .room__allow { margin: 0 0 22px; font: 400 12.5px/1.55 var(--rm-sans); color: var(--rm-g600); }

.room .room__acts { display: grid; gap: 10px; margin: 0 0 18px; }
.room .room__acts .rbtn--wide { min-height: 54px; font-size: 15.5px; }

.room .room__meas { margin: 0; font: 400 13px/1.6 var(--rm-sans); color: var(--rm-g600); }
/* The link inside the sentence is given a finger's height to be pressed in,
   the extra taken back by its margins so the line itself does not move. */
.room .room__meas .room__link {
  display: inline-block;
  padding: 14px 0;
  margin: -10px 0;
  font-size: 13px;
}

/* ---------- desktop: a little more room to breathe ---------- */

@media (min-width: 861px) {
  .room .room__foot .rbtn { min-width: 132px; }
}

/* Short of a wide desktop the bar has no room for two equal sides and a
   centre: the title keeps its own width at the left, whole, and the switch
   is centred in what remains. */
@media (min-width: 861px) and (max-width: 1439px) {
  .room .room__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .room .room__steps { justify-self: center; }
}

/* A small desktop or a tablet held across: the sheet is at its narrowest,
   so the title's Hindi stands down and the kind filter tightens. */
@media (min-width: 861px) and (max-width: 1199px) {
  .room .room__title .hi { display: none; }
  .room .room__steps button { padding: 0 16px; }
  .room .room__seg { flex-wrap: nowrap; }
  .room .room__seg button { padding: 0 13px; }
}

/* Short of 1024px the bar has no room for four named steps between the
   title and the close, so the switch names only the current step. The other
   names are kept in the page, out of sight, for a screen reader, which
   would otherwise hear those buttons as bare numerals. */
@media (max-width: 1023px) {
  .room .room__steps button:not([aria-current="step"]) .room__sl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* The way on fills the bar, as the full-width pill does on Mercedes; Back
   keeps to its own size beside it. */
.room .room__foot .rbtn[data-act="next"],
.room .room__foot .rbtn[data-act="close"] { flex: 1 1 auto; }

/* "Next: see it on the wall" gives way to Done in the very same place. A
   quick second tap meant for Next would otherwise land on Done and close the
   room just as the painting is hung, so Done waits half a second before it
   listens to a finger or a mouse. The keyboard is not held back. This is not
   movement, so it stays when motion is reduced. */
.room .room__foot .rbtn[data-act="close"] { animation: room-arm 0.5s; }

@keyframes room-arm {
  from, to { pointer-events: none; }
}

/* ---------- telephones: the room above, the white sheet over it ---------- */

@media (max-width: 860px) {
  .room .room__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 58px auto;
    row-gap: 0;
    height: auto;
    padding: 0 12px 12px 16px;
  }

  .room .room__brand { grid-column: 1; grid-row: 1; gap: 10px; }
  .room .room__mark { width: 28px; height: 28px; }
  .room .room__title { font-size: 15px; }
  .room .room__title .hi { display: none; }
  .room .addon-badge { height: 22px; padding: 0 9px; font-size: 10.5px; }

  .room .room__close { grid-column: 2; grid-row: 1; }

  .room .room__steps { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .room .room__steps li { flex: 1 1 0; min-width: 0; }
  .room .room__steps li:has([aria-current="step"]) { flex: 2.8 1 0; }

  .room .room__steps button {
    width: 100%;
    justify-content: center;
    gap: 7px;
    padding: 0 6px;
    font-size: 13.5px;
  }

  .room .room__rn { font-size: 18px; }

  .room .room__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(230px, 40%) minmax(0, 1fr);
  }

  .room .room__view { inset: 46px 16px 48px; }
  .room .room__stage[data-mode="art"] .room__view { inset: 28px 16px 46px; }

  .room .room__gframe { inset: -14px -18px; }
  .room .room__gframe i { width: 11px; height: 11px; }
  .room .room__blank { gap: 14px; padding: 0 12px; }
  .room .room__blankfig { width: min(260px, 70%); }
  .room .room__blank strong { font-size: 24px; }
  .room .room__blank p { font-size: 13px; }

  .room .room__cap { left: 20px; right: 20px; bottom: 30px; font-size: 11.5px; }
  .room .room__capr { display: none; }
  .room .room__tools { top: 8px; right: 12px; gap: 8px; }
  .room .room__tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .room .room__tool span { display: none; }
  .room .room__ruler { left: 20px; top: 18px; }

  .room .room__panel {
    position: relative;
    z-index: 1;
    margin-top: -16px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }

  .room .room__scroll { padding: 26px 20px 24px; }
  .room .room__h { font-size: 40px; margin-bottom: 10px; }
  .room .room__lede { font-size: 15px; margin-bottom: 22px; }
  .room .room__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .room .room__foot .rbtn { min-height: 48px; padding: 0 20px; }
  .room .room__card { padding: 22px 20px 20px; }
  .room .room__size { font-size: 56px; }
  .room .room__uprow .rbtn { flex: 1 1 100%; }
  .room .room__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .room .room__thumbs button { aspect-ratio: 4 / 5; padding: 6px 5px; }
  .room .room__no { display: none; }

  /* The stage takes the height each step needs: little while there is no
     room to show, most when the painting is on the wall. */
  .room[data-stage="blank"] .room__body { grid-template-rows: minmax(160px, 24%) minmax(0, 1fr); }
  .room[data-stage="scene"] .room__body { grid-template-rows: minmax(250px, 44%) minmax(0, 1fr); }
  .room[data-stage="scene"][data-step="3"] .room__body { grid-template-rows: minmax(270px, 50%) minmax(0, 1fr); }
  .room[data-stage="blank"] .room__view { inset: 14px 16px 36px; }
  .room[data-stage="blank"] .room__blank { gap: 8px; }
  .room[data-stage="blank"] .room__blankfig { width: min(150px, 40%); }
  .room[data-stage="blank"] .room__blank strong { font-size: 21px; margin: 0; }
  .room[data-stage="blank"] .room__blank p span { display: none; }
  .room[data-stage="blank"] .room__cap { display: none; }

  /* Measuring by hand shows no scale bar and no tools above the room, so
     the photograph takes that strip too: the ends of the line are dragged
     with a thumb, and every pixel of picture helps. */
  .room .room__stage:has(.room__scene.is-manual) .room__view { inset: 14px 16px 48px; }
}

/* The bar's first row holds the mark, the title, the add-on capsule and the
   close, and the title is never cut short to make room for the others: as
   the screen narrows the mark gives way first (here), then the capsule
   tightens (389px), and on the very smallest telephones the capsule too
   stands down (343px). Each width is where the row stops fitting, with a
   few pixels in hand. */
@media (max-width: 424px) {
  .room .room__mark { display: none; }
}

@media (max-width: 400px) {
  /* The chosen plate: "Change" moves up beside the plate's number, so the
     medium and size below it have the whole width and a size is never split
     ("24 × 20" on one line, "in" on the next). */
  .room .room__chosen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
  }
  .room .room__chosen img { grid-row: 1 / span 2; }
  .room .room__chosen p { display: contents; }
  .room .room__chosen .room__k { grid-column: 2; grid-row: 1; align-self: last baseline; margin: 0; }
  .room .room__chosen .room__v { grid-column: 2 / -1; grid-row: 2; align-self: start; }

  /* The link sits on the number's line in a box of its own size, so its
     focus ring rings the word and not the size beneath it; the finger's
     44px is an invisible margin round it. */
  .room .room__chosen .room__link {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    align-self: last baseline;
    min-height: 0;
    padding: 2px 4px;
  }
  .room .room__chosen .room__link::after {
    content: "";
    position: absolute;
    inset: -11px -6px;
  }
}

@media (max-width: 383px),
  (max-width: 860px) and (max-height: 520px) and (orientation: landscape),
  (min-width: 861px) and (max-width: 1439px) {
  /* Where the sheet is narrow (the narrowest telephones; a telephone, a
     tablet or a laptop whose sheet stands beside the room) Back becomes the
     round arrow of the Mercedes carousels, so the way on keeps its words on
     one line and inside the sheet: "Next: see it on the wall" beside a
     worded Back is wider than the sheet there. The word is still there for
     a screen reader. */
  .room .room__foot .rbtn[data-act="back"] {
    flex: none;
    width: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 50%;
  }

  .room .room__foot .rbtn[data-act="back"] span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 389px) {
  .room .room__bar { column-gap: 10px; }
  .room .room__brand { gap: 8px; }
  .room .room__title { font-size: 14px; }
  .room .addon-badge { padding: 0 8px; font-size: 10px; letter-spacing: 0.01em; }
  .room .addon-badge::before { display: none; }
}

@media (max-width: 343px) {
  .room .addon-badge { display: none; }
  .room .room__foot .rbtn { padding: 0 16px; }
}

@media (max-width: 380px) {
  .room .room__h { font-size: 36px; }
  .room .room__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room .room__sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room .room__presets button { padding: 8px 12px; }
  .room .room__seg button { padding: 0 13px; }
}

/* Short landscape screens: the room gets the height it needs. */
@media (max-width: 860px) and (max-height: 520px) and (orientation: landscape) {
  /* Side by side, one row, whatever the step: the per-step heights above
     are for a telephone held upright. */
  .room .room__body,
  .room[data-stage][data-step] .room__body {
    grid-template-columns: minmax(0, 1fr) minmax(332px, 46%);
    grid-template-rows: minmax(0, 1fr);
  }
  .room .room__panel { margin-top: 0; border-radius: 0; box-shadow: none; }

  /* Height is what is short, so the bar keeps to one row: the switch sits
     between the title and the close, naming only the current step. */
  .room .room__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 60px;
    column-gap: 14px;
    padding: 0 12px 0 16px;
  }
  .room .room__steps { grid-column: 2; grid-row: 1; width: auto; justify-self: center; }
  .room .room__steps li,
  .room .room__steps li:has([aria-current="step"]) { flex: none; }
  .room .room__steps button { width: auto; padding: 0 14px; }
  .room .room__close { grid-column: 3; }
}

/* On the smaller telephones held across, that one row has room for the
   title, the switch and the close, and for nothing more. */
@media (max-width: 740px) and (max-height: 520px) and (orientation: landscape) {
  .room .room__mark,
  .room .addon-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.room[open],
  .room .room__piece.is-in,
  .room .room__ticks li,
  .room .room__bar2 i { animation: none !important; }

  .room .room__ticks li { opacity: 1; }
  /* The painting neither fades nor rises: it is there when it has arrived,
     and the one before it is gone the moment another is chosen. */
  .room .room__art img { transition: none; transform: none; }
  .room .rbtn,
  .room .room__close,
  .room .room__thumbs button,
  .room .room__samples img { transition: none; }
  .room .room__close:hover,
  .room .room__samples button:hover img { transform: none; }

  /* The measuring pass holds still: a single white line across the room. */
  .room .room__scan i {
    top: 50%;
    height: 2px;
    background: #fff;
    animation: none;
  }
}

/* ==== csheet.css ==== */
/* Shivraj Singh V2 — the commission sheet, in black and white

   The counter is a sheet now, after the Mercedes-Benz India pages on a
   telephone: it rises from the foot of the window with a grab handle and
   rounded top corners, the paths are a white pill switch pinned under its
   header, the form is set in the plain sans on white with light-grey tiles,
   the commission is summed up in words on a black card at the end of the
   form, and the one action, Send on WhatsApp, sits in a bar held at the foot
   of the sheet while the form scrolls. On a wider window the same sheet
   stands as a panel in the middle, over a dimmed page.

   Everything is written under dialog.csheet, so the page's own form rules
   (base.css, components.css, v2.css) are refined here without being touched,
   and nothing here reaches outside the sheet. The lead's tokens are used,
   each with its value as a fallback. */

/* While the sheet is open the page behind it stays where it is, to the pixel.
   The site reserves the scrollbar's gutter (base.css) and the gutter is left
   reserved here: given up, the page behind grows wider by a scrollbar, and
   round a panel that does not cover it the page is seen to reflow and shift,
   its round buttons with it. */
html.csheet-lock {
  overflow: hidden;
}

/* The backdrop cannot reach into the gutter, so where a browser draws
   classic scrollbars (a desktop, with a mouse) the page's white ground would
   stand there undimmed. It is given the grey that white shows through the
   backdrop (black at 0.6) instead, and the dimmed page runs to the edge. */
@media (hover: hover) and (pointer: fine) {
  html.csheet-lock { background: #666; }
}

/* ---------- the sheet itself ---------- */

dialog.csheet {
  --cs-ink: var(--ink, #000);
  --cs-paper: var(--paper, #fff);
  --cs-g50: var(--g50, #f8f8f8);
  --cs-g100: var(--g100, #f4f4f4);
  --cs-g150: var(--g150, #ececec);
  --cs-g200: var(--g200, #e0e0e0);
  --cs-g300: var(--g300, #c8c8c8);
  --cs-g500: var(--g500, #767676);
  --cs-g600: var(--g600, #5c5c5c);
  --cs-g700: var(--g700, #3c3c3c);
  --cs-g800: var(--g800, #262626);
  --cs-err: var(--err, #c62828);
  --cs-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  --cs-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --cs-deva: var(--f-deva, "Tiro Devanagari Hindi", "Nirmala UI", sans-serif);
  --cs-tile: var(--r-tile, 8px);
  --cs-card: var(--r-card, 12px);
  --cs-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  --cs-pad: 20px;
  --cs-top: 70px;      /* the pinned switch, allowed for when a field is brought into view */
  --cs-foot: 84px;     /* the action bar, likewise */

  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  height: 92vh;
  height: 92svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: var(--cs-paper);
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.42s var(--cs-ease);
  -webkit-font-smoothing: antialiased;
}

dialog.csheet[open] {
  display: flex;
  flex-direction: column;
}

dialog.csheet.is-in { transform: none; }

/* While a finger holds the handle the sheet follows it exactly. */
dialog.csheet.is-dragging { transition: none; }

dialog.csheet::backdrop {
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.32s ease;
}

dialog.csheet.is-in::backdrop { opacity: 1; }

/* ---------- handle and header ---------- */

dialog.csheet .csheet__grab {
  flex: none;
  display: grid;
  place-items: center;
  height: 24px;
  cursor: grab;
  touch-action: none;
}

dialog.csheet .csheet__grab::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--cs-g300);
}

dialog.csheet .csheet__head {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  padding: 0 var(--cs-pad) 10px;
  touch-action: none;
}

/* The kicker says the path and the kind of work ("From a photograph · Oil
   painting") in small, spaced capitals in grey. It is set in two pieces: the
   longest ("From a photograph · Large composition") is wider than a
   telephone, and breaks between the two rather than inside either.

   The point between them stands at the head of the second piece, in a box
   as wide as the kicker reaches out to the left of its column, and the
   kicker is cut off at the column's edge. On one line the point sits
   between the two pieces; when the second piece begins a line of its own
   the point falls in the part cut off, and the two lines begin together. */
dialog.csheet .csheet__k {
  grid-column: 1;
  margin: 6px 0 6px -1.1em;
  clip-path: inset(0 0 0 1.1em);
  font-family: var(--cs-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-g600);
}

dialog.csheet .csheet__k > span {
  display: inline-block;
  white-space: nowrap;
}

dialog.csheet .csheet__k > span:first-child { margin-left: 1.1em; }

dialog.csheet .csheet__dot {
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

@media (max-width: 380px) {
  dialog.csheet .csheet__k { font-size: 11px; letter-spacing: 0.06em; }
}

dialog.csheet .csheet__head h2 {
  grid-column: 1;
  margin: 0;
  font-family: var(--cs-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--cs-ink);
}

dialog.csheet .csheet__head h2:focus { outline: none; }

dialog.csheet .csheet__x {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--cs-g100);
  color: var(--cs-ink);
  cursor: pointer;
  transition: background-color 0.16s ease;
}

dialog.csheet .csheet__x svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

dialog.csheet .csheet__x:hover { background: var(--cs-g200); color: var(--cs-ink); }
dialog.csheet .csheet__x:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 2px; }

/* ---------- the scrolling body ---------- */

dialog.csheet .csheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--cs-pad);
  scroll-padding-top: var(--cs-top);
  scroll-padding-bottom: var(--cs-foot);
}

/* Neither the scroller nor the panes keep any room at the foot: the action
   bar is the last thing in a pane, carries its own, and so comes to rest on
   the sheet's lower edge exactly where it was held while the form scrolled. */
dialog.csheet .csheet__body > [role="tabpanel"] {
  padding-bottom: 0;
}

/* The two paths: a white pill switch, the chosen one black, pinned at the
   top of the body as the Mercedes switch is pinned at the top of the page. */
dialog.csheet .csheet__switch {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 calc(-1 * var(--cs-pad));
  padding: 6px var(--cs-pad) 14px;
  background: var(--cs-paper);
}

/* A hairline under the switch once the form has moved beneath it. */
dialog.csheet .csheet__switch::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--cs-g200);
  opacity: 0;
  transition: opacity 0.2s ease;
}

dialog.csheet.is-scrolled .csheet__switch::after { opacity: 1; }

dialog.csheet .csheet__switch .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--cs-g300);
  border-radius: 999px;
  background: var(--cs-paper);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: visible;
  flex-wrap: nowrap;
}

dialog.csheet .csheet__switch .tabs button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

dialog.csheet .csheet__switch .tabs button::after { display: none; }
dialog.csheet .csheet__switch .tabs button:hover { background: var(--cs-g100); color: var(--cs-ink); }

dialog.csheet .csheet__switch .tabs button[aria-selected="true"] {
  background: var(--cs-ink);
  color: #fff;
}

dialog.csheet .csheet__switch .tabs button:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

dialog.csheet .tabs__t {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On the narrowest telephones "From a photograph" is wider than its half of
   the switch: there the names break on to two lines rather than be cut
   short, and the pill keeps its height. */
@media (max-width: 340px) {
  dialog.csheet .csheet__switch .tabs button {
    padding: 6px 8px;
    line-height: 1.15;
    white-space: normal;
  }

  dialog.csheet .tabs__t {
    overflow: visible;
    text-overflow: clip;
  }
}

/* "Path A —" and the Hindi name are kept for a screen reader; the telephone
   shows the plain name only, so each half stays on one line. */
dialog.csheet .csheet__switch .tabs__path,
dialog.csheet .csheet__switch .tabs .hi {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- the panes ----------
   A pane reads in one column: the note of where its settings came from,
   step one while it stands, the form, the summary of what has been asked
   for, the word about money, and the action. In the markup the summary
   comes after the form and its action, and the two share a box below the
   note and step one; both boxes are therefore dissolved, so that the pane
   itself sets its parts in the order they are read. The action bar is then
   held at the foot of the whole pane, step one included, and is never met
   half way into view at the foot of the sheet. */

dialog.csheet .csheet__body > [role="tabpanel"]:not(.hidden) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

dialog.csheet .withrail,
dialog.csheet .formcard {
  display: contents;
}

/* The switch already names the path; the pane's own heading is kept for a
   screen reader and as the place the focus lands when the path changes. */
dialog.csheet .formcard > h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

dialog.csheet .formcard > .lede {
  max-width: 62ch;
  margin: 2px 0 22px;
  font-family: var(--cs-sans);
  font-size: 15px;
  font-style: normal;
  line-height: 1.55;
  color: var(--cs-g700);
}

dialog.csheet .formcard > .lede::first-letter {
  font: inherit;
  color: inherit;
  float: none;
  margin: 0;
  padding: 0;
}

dialog.csheet fieldset {
  min-width: 0;
  margin: 0 0 6px;
  padding: 24px 0 14px;
  border: 0;
  border-top: 1px solid var(--cs-g200);
}

/* The legend is floated so it sits inside the section like any heading,
   rather than across the rule above it. */
dialog.csheet legend {
  float: left;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--cs-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-ink);
}

dialog.csheet legend + * { clear: both; }

dialog.csheet legend .hi {
  margin-left: 6px;
  font-family: var(--cs-deva);
  font-size: 15px;
  font-weight: 400;
  color: var(--cs-g500);
}

dialog.csheet legend .hint {
  font-size: 14px;
  font-weight: 400;
  color: var(--cs-g500);
}

dialog.csheet .formgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

dialog.csheet .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
}

dialog.csheet .field > label {
  font-family: var(--cs-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-ink);
}

dialog.csheet .field > label .hi {
  margin-left: 4px;
  font-family: var(--cs-deva);
  font-weight: 400;
  color: var(--cs-g500);
}

dialog.csheet .field > label .hint { font-size: 13px; font-weight: 400; color: var(--cs-g500); }

/* Broken so that no word is left on a line of its own. */
dialog.csheet .hint {
  font-family: var(--cs-sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cs-g600);
  text-wrap: pretty;
}

dialog.csheet .hint:empty { display: none; }

/* ---------- inputs ---------- */

dialog.csheet input[type="text"],
dialog.csheet input[type="tel"],
dialog.csheet input[type="email"],
dialog.csheet select,
dialog.csheet textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 14px;
  font-family: var(--cs-sans);
  font-size: 16px;          /* sixteen pixels, so a telephone does not zoom in */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--cs-ink);
  background: #fff;
  border: 1px solid var(--cs-g300);
  border-radius: var(--cs-tile);
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease;
}

dialog.csheet select {
  padding-right: 46px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  cursor: pointer;
}

/* The longest medium ("Oil on canvas — large composition") is given the few
   pixels it wants on the narrowest telephones. */
@media (max-width: 380px) {
  dialog.csheet select { padding-right: 38px; background-position: right 12px center; }
}

dialog.csheet textarea {
  min-height: 116px;
  resize: vertical;
  line-height: 1.5;
}

dialog.csheet input::placeholder,
dialog.csheet textarea::placeholder { color: var(--cs-g500); opacity: 1; }

dialog.csheet input[type="text"]:hover,
dialog.csheet input[type="tel"]:hover,
dialog.csheet input[type="email"]:hover,
dialog.csheet select:hover,
dialog.csheet textarea:hover { border-color: var(--cs-g500); }

dialog.csheet input[type="text"]:focus,
dialog.csheet input[type="tel"]:focus,
dialog.csheet input[type="email"]:focus,
dialog.csheet select:focus,
dialog.csheet textarea:focus {
  border-color: var(--cs-ink);
  box-shadow: 0 0 0 1px var(--cs-ink);
  outline: 0;
}

dialog.csheet input[aria-invalid="true"],
dialog.csheet select[aria-invalid="true"],
dialog.csheet textarea[aria-invalid="true"] {
  border-color: var(--cs-err);
  box-shadow: 0 0 0 1px var(--cs-err);
  background: #fff;
}

/* A field marked wanting still shows where the keyboard is: the black edge of
   any focused field, with the red kept outside it. */
dialog.csheet input[aria-invalid="true"]:focus,
dialog.csheet select[aria-invalid="true"]:focus,
dialog.csheet textarea[aria-invalid="true"]:focus {
  border-color: var(--cs-ink);
  box-shadow: 0 0 0 1px var(--cs-ink), 0 0 0 3px var(--cs-err);
}

dialog.csheet .err {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 2px 0 0;
  font-family: var(--cs-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cs-err);
}

dialog.csheet .err::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--cs-err);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

dialog.csheet .err:empty { display: none; }

/* ---------- the tick boxes ---------- */

dialog.csheet .check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 52px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cs-g200);
  border-radius: var(--cs-tile);
  background: #fff;
  font-family: var(--cs-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--cs-ink);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

dialog.csheet .check:hover { border-color: var(--cs-g500); }
dialog.csheet .check:has(input:checked) { border-color: var(--cs-ink); }
dialog.csheet .check:has(input[aria-invalid="true"]) { border-color: var(--cs-err); box-shadow: 0 0 0 1px var(--cs-err); }

dialog.csheet .check input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  border: 1.5px solid var(--cs-ink);
  border-radius: 4px;
  background: #fff center / 16px 16px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

dialog.csheet .check input[type="checkbox"]:checked {
  background-color: var(--cs-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

dialog.csheet .check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

dialog.csheet .check input[aria-invalid="true"] { border-color: var(--cs-err); }

dialog.csheet .check .hi { font-family: var(--cs-deva); color: var(--cs-g500); }

/* ---------- pictures ---------- */

/* The drop is a Mercedes service tile: light grey, an icon at its centre, a
   bold line and a grey one under it. */
dialog.csheet .drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 16px 20px;
  border: 1px dashed var(--cs-g300);
  border-radius: var(--cs-card);
  background: var(--cs-g100);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

dialog.csheet .drop::before {
  content: "";
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21.5V5.5M11 11.5l6-6 6 6'/%3E%3Cpath d='M5 19.5v6a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3v-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

dialog.csheet .drop strong {
  display: block;
  margin: 0;
  font-family: var(--cs-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cs-ink);
}

/* Balanced, so the last word of the line does not fall on its own. */
dialog.csheet .drop .hint { font-size: 14px; color: var(--cs-g600); text-wrap: balance; }

dialog.csheet .drop:hover { border-color: var(--cs-g500); background: var(--cs-g150); }

dialog.csheet .drop.over {
  border: 1px solid var(--cs-ink);
  background: var(--cs-g150);
}

dialog.csheet .drop:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

dialog.csheet .thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px 12px;
  margin: 14px 0 0;
}

dialog.csheet .thumbs:empty { display: none; }

dialog.csheet .thumb {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

dialog.csheet .thumb__pic {
  position: relative;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
}

dialog.csheet .thumb__pic img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
}

/* A file the browser cannot draw (an HEIC photograph, a damaged one) keeps
   its tile and its name, and says so in place of the broken-picture mark. */
dialog.csheet .thumb__pic.is-plain img { visibility: hidden; }

dialog.csheet .thumb__pic.is-plain::before {
  content: "No preview";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--cs-sans);
  font-size: 12px;
  color: var(--cs-g600);
}

dialog.csheet .thumb.is-hero .thumb__pic {
  outline: 2px solid var(--cs-ink);
  outline-offset: 2px;
}

dialog.csheet .herobadge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  top: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--cs-ink);
  color: #fff;
  font-family: var(--cs-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
}

dialog.csheet .thumb__x {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cs-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

/* A larger target round the small cross, for a thumb. */
dialog.csheet .thumb__x::after {
  content: "";
  position: absolute;
  inset: -6px;
}

dialog.csheet .thumb__x svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

dialog.csheet .thumb__x:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 2px; }

dialog.csheet .thumb__name {
  margin: 7px 0 0;
  font-family: var(--cs-sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--cs-g600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

dialog.csheet .thumb__bar {
  display: flex;
  margin: 6px 0 0;
}

dialog.csheet .thumb__bar button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--cs-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

dialog.csheet .thumb__bar button:hover { background: var(--cs-g100); color: var(--cs-ink); border-color: var(--cs-ink); }
dialog.csheet .thumb__bar button.on,
dialog.csheet .thumb__bar button.on:hover { background: var(--cs-ink); color: #fff; }
dialog.csheet .thumb__bar button:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }

/* ---------- notices ---------- */

dialog.csheet .notice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 8px 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cs-g700);
  text-wrap: balance;
}

dialog.csheet .notice::before {
  content: "";
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='8.25'/%3E%3Cpath d='M10 9v5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.3' r='.4' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The words keep to their own column beside the mark, whether the markup
   sets them bare or in a paragraph. */
dialog.csheet .notice > * { grid-column: 2; }
dialog.csheet .notice p { margin: 0; }

/* The word about money stands between the summary and the action. Its
   margins are set here whatever the markup gives it inline. */
dialog.csheet .formcard > .notice {
  order: 2;
  margin: 12px 0 0 !important;
}

/* ---------- the action, held at the foot of the sheet ----------
   Send on WhatsApp is the one thing a path ends in. It stays in the bar
   while the form scrolls past, and is still there at the end of it. */

dialog.csheet .formcard > .btnrow {
  order: 3;
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 20px calc(-1 * var(--cs-pad)) 0;
  padding: 12px var(--cs-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cs-paper);
  box-shadow: 0 -1px 0 var(--cs-g200);
}

dialog.csheet .formcard > .btnrow .btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--cs-ink);
  border-radius: 999px;
  font-family: var(--cs-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

dialog.csheet .formcard > .btnrow .btn--wa {
  background: var(--cs-ink);
  color: #fff;
}

dialog.csheet .formcard > .btnrow .btn--wa:hover {
  background: var(--cs-g800);
  border-color: var(--cs-g800);
  color: #fff;
}

/* The WhatsApp mark, drawn in the button's own colour. */
dialog.csheet .formcard > .btnrow .btn--wa::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.9-.92 1.08-.15.18-.3.2-.57.07-.27-.15-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.34-1.7-.15-.28-.02-.43.12-.58.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.68-1.63-.93-2.22-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37-.27.3-1.02 1-1.02 2.42s1.04 2.8 1.19 3c.15.2 2.05 3.13 4.96 4.27 2.42.95 2.91.76 3.44.71.53-.05 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.27-.2-.57-.35zM12.04 21.5h-.01a9.4 9.4 0 0 1-4.79-1.31l-.34-.2-3.56.93.95-3.47-.22-.36a9.38 9.38 0 0 1-1.44-5.01c0-5.18 4.22-9.4 9.42-9.4a9.34 9.34 0 0 1 6.65 2.76 9.32 9.32 0 0 1 2.76 6.65c0 5.19-4.23 9.41-9.42 9.41zM20.46 3.49A11.2 11.2 0 0 0 12.04 0C5.82 0 .76 5.06.76 11.28c0 1.99.52 3.93 1.5 5.64L.66 24l7.25-1.9a11.25 11.25 0 0 0 4.13.99h.01c6.22 0 11.28-5.06 11.28-11.28 0-3.01-1.17-5.85-3.3-7.98z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.9-.92 1.08-.15.18-.3.2-.57.07-.27-.15-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.34-1.7-.15-.28-.02-.43.12-.58.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.68-1.63-.93-2.22-.24-.58-.49-.5-.67-.5h-.57c-.2 0-.52.07-.79.37-.27.3-1.02 1-1.02 2.42s1.04 2.8 1.19 3c.15.2 2.05 3.13 4.96 4.27 2.42.95 2.91.76 3.44.71.53-.05 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.27-.2-.57-.35zM12.04 21.5h-.01a9.4 9.4 0 0 1-4.79-1.31l-.34-.2-3.56.93.95-3.47-.22-.36a9.38 9.38 0 0 1-1.44-5.01c0-5.18 4.22-9.4 9.42-9.4a9.34 9.34 0 0 1 6.65 2.76 9.32 9.32 0 0 1 2.76 6.65c0 5.19-4.23 9.41-9.42 9.41zM20.46 3.49A11.2 11.2 0 0 0 12.04 0C5.82 0 .76 5.06.76 11.28c0 1.99.52 3.93 1.5 5.64L.66 24l7.25-1.9a11.25 11.25 0 0 0 4.13.99h.01c6.22 0 11.28-5.06 11.28-11.28 0-3.01-1.17-5.85-3.3-7.98z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* While step one stands unanswered it is the one thing asked for: its own
   button is the black one, and Send on WhatsApp waits in white. */
dialog.csheet [role="tabpanel"]:has(.idstep:not(.hidden)) .formcard > .btnrow .btn--wa {
  background: var(--cs-paper);
  color: var(--cs-ink);
}

dialog.csheet [role="tabpanel"]:has(.idstep:not(.hidden)) .formcard > .btnrow .btn--wa:hover {
  background: var(--cs-g100);
  border-color: var(--cs-ink);
  color: var(--cs-ink);
}

dialog.csheet .formcard > .btnrow .btn:focus-visible {
  outline: 2px solid var(--cs-ink);
  outline-offset: 3px;
}

/* In the narrow bar the Hindi word gives way; it is still read out. */
dialog.csheet .formcard > .btnrow .btn__hi {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- step one: who is commissioning ---------- */

dialog.csheet .idstep {
  margin: 0 0 24px;
  scroll-margin-top: var(--cs-top);
}

dialog.csheet .idcard {
  position: relative;
  padding: 20px 18px 18px;
  border: 0;
  border-radius: var(--cs-card);
  background: var(--cs-g100);
}

dialog.csheet .idcard__k {
  margin: 0 0 8px;
  font-family: var(--cs-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-g600);
}

dialog.csheet .idcard__h {
  margin: 0 0 8px;
  font-family: var(--cs-serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.08;
  color: var(--cs-ink);
  text-wrap: balance;
}

/* On the card's grey ground the Hindi words take the darker of the two
   greys; the lighter one is kept for white. */
dialog.csheet .idcard__h .hi {
  display: block;
  margin-top: 6px;
  font-family: var(--cs-deva);
  font-size: 15px;
  color: var(--cs-g600);
}

dialog.csheet .idcard .field > label .hi { color: var(--cs-g600); }

dialog.csheet .idcard__lede {
  max-width: none;
  margin: 0 0 18px;
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cs-g700);
}

dialog.csheet .idstep .idcard > .field,
dialog.csheet .idstep .idcard > .check,
dialog.csheet .idstep .idcard__lede,
dialog.csheet .idstep .idcard__privacy,
dialog.csheet .idstep .idcard__done { max-width: none; }

dialog.csheet .idcard .check { margin-top: 2px; }

dialog.csheet .idcard__foot { margin: 16px 0 0; padding: 0; background: none; border: 0; }

dialog.csheet .idcard__privacy {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-family: var(--cs-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cs-g600);
}

dialog.csheet .idcard .btnrow { display: flex; margin: 0; }

dialog.csheet .idcard .btnrow .btn {
  flex: 1 1 auto;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid var(--cs-ink);
  border-radius: 999px;
  background: var(--cs-ink);
  color: #fff;
  font-family: var(--cs-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

dialog.csheet .idcard .btnrow .btn:hover { background: var(--cs-g800); border-color: var(--cs-g800); color: #fff; }
dialog.csheet .idcard .btnrow .btn:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 3px; }
dialog.csheet .idcard .btnrow .btn__hi { font-family: var(--cs-deva); font-weight: 400; opacity: 0.75; }

dialog.csheet .idcard__done {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--cs-ink);
  border-radius: var(--cs-tile);
  background: #fff;
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cs-ink);
}

/* Said when the actions are pressed before step one is answered. */
dialog.csheet .csheet__ask {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--cs-tile);
  background: var(--cs-ink);
  color: #fff;
  font-family: var(--cs-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

/* The card is ringed once as it is asked for: a line round it that widens
   and fades. */
dialog.csheet .idstep.is-asking .idcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: csheet-ask 1.1s ease 1;
}

@keyframes csheet-ask {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); }
}

/* ---------- a plate's settings, carried over ---------- */

dialog.csheet .prefill-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 10px 4px 10px 10px;
  border-radius: var(--cs-tile);
  background: var(--cs-g100);
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.45;
}

/* The plate is shown whole, small, on black: a framed oil floats there and
   a drawing reads as its own white sheet. */
dialog.csheet .prefill-note img {
  flex: none;
  width: 48px;
  height: 60px;
  padding: 4px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--cs-ink);
}

/* Where the settings came from stands on a line of its own, over what they
   are; the lines under it are broken so that no word is left alone. */
dialog.csheet .prefill-note span { min-width: 0; text-wrap: pretty; }
dialog.csheet .prefill-note strong { display: block; color: var(--cs-ink); font-weight: 700; }

/* "Change anything you like below." keeps together: where the caption's
   line has no room for it, it begins the next. */
dialog.csheet .prefill-note span > span { display: inline-block; }

dialog.csheet .prefill-note button {
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--cs-ink);
  cursor: pointer;
}

dialog.csheet .prefill-note button:hover { background: var(--cs-g200); }
dialog.csheet .prefill-note button:focus-visible { outline: 2px solid var(--cs-ink); outline-offset: 0; }

dialog.csheet .prefill-note button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ---------- the summary: a black card at the end of the form ----------
   What has been asked for, in words: the medium, the size, the people and
   the pictures. It names no amount; the line under its heading says who
   does. */

dialog.csheet .rail {
  order: 1;
  position: static;
  top: auto;
  margin: 22px 0 0;
  padding: 22px 20px 10px;
  border: 0;
  border-radius: var(--cs-card);
  background: #000;
  color: #fff;
  box-shadow: none;
}

dialog.csheet .rail h3 {
  margin: 0;
  font-family: var(--cs-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.04;
  color: #fff;
}

/* "The studio quotes each commission in person." */
dialog.csheet .rail__note {
  margin: 6px 0 0;
  font-family: var(--cs-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #bdbdbd;
  text-wrap: balance;
}

dialog.csheet .rail dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 16px 0 0;
  border-top: 1px solid #333;
}

dialog.csheet .rail dt,
dialog.csheet .rail dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid #333;
  font-family: var(--cs-sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

dialog.csheet .rail dt { padding-right: 16px; font-weight: 400; color: #bdbdbd; }
dialog.csheet .rail dd { font-weight: 600; color: #fff; text-align: right; text-wrap: balance; }

/* The last row closes the card without a rule under it. */
dialog.csheet .rail dt:last-of-type,
dialog.csheet .rail dd:last-of-type { border-bottom: 0; }

/* ---------- a short window: a telephone on its side ----------
   The sheet stays a sheet, and its head gives up some height to the form. */

@media (max-height: 559.98px) {
  dialog.csheet { height: 94vh; height: 94svh; }
  dialog.csheet .csheet__grab { height: 16px; }
  dialog.csheet .csheet__head { padding-bottom: 6px; }
  dialog.csheet .csheet__k { margin-top: 0; margin-bottom: 0; font-size: 12px; }
  dialog.csheet .csheet__head h2 { font-size: 24px; }
  dialog.csheet .csheet__x { width: 40px; height: 40px; grid-row: 1 / span 2; }
  dialog.csheet .csheet__switch { padding: 2px var(--cs-pad) 8px; }
  dialog.csheet .csheet__switch .tabs { max-width: 520px; }
  dialog.csheet .csheet__switch .tabs button { min-height: 40px; }
  dialog.csheet .formcard > .btnrow { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  dialog.csheet .formcard > .btnrow .btn { min-height: 44px; }
}

/* ---------- a wider window: a panel in the middle ---------- */

@media (min-width: 720px) and (min-height: 560px) {
  dialog.csheet {
    --cs-pad: 40px;
    --cs-top: 80px;
    --cs-foot: 90px;
    inset: 0;
    margin: auto;
    width: min(760px, calc(100% - 48px));
    height: min(900px, calc(100vh - 64px));
    height: min(900px, calc(100dvh - 64px));
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    transition: transform 0.38s var(--cs-ease), opacity 0.24s ease;
  }

  dialog.csheet.is-in { opacity: 1; transform: none; }

  dialog.csheet .csheet__grab { display: none; }

  dialog.csheet .csheet__head {
    padding: 32px var(--cs-pad) 14px;
    touch-action: auto;
  }

  dialog.csheet .csheet__k { font-size: 12.5px; }
  dialog.csheet .csheet__head h2 { font-size: 46px; }

  dialog.csheet .csheet__switch { padding: 6px var(--cs-pad) 18px; }

  dialog.csheet .csheet__switch .tabs {
    display: inline-grid;
    width: auto;
    grid-template-columns: auto auto;
  }

  dialog.csheet .csheet__switch .tabs button { padding: 8px 22px; font-size: 15px; }

  /* There is room for the Hindi name beside the English one. */
  dialog.csheet .csheet__switch .tabs .hi {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-family: var(--cs-deva);
    font-size: 14px;
    opacity: 0.7;
  }

  dialog.csheet .formgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  /* Where a set holds three fields (the kind of work, its size, its people)
     the first takes the whole row and the other two stand side by side
     under it, so that none is left alone beside an empty half. */
  dialog.csheet .formgrid > .field:first-child:nth-last-child(3) { grid-column: 1 / -1; }

  dialog.csheet .thumbs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

  dialog.csheet .formcard > .btnrow { justify-content: flex-end; }
  dialog.csheet .formcard > .btnrow .btn { flex: 0 1 auto; min-width: 240px; }

  dialog.csheet .formcard > .btnrow .btn__hi {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-family: var(--cs-deva);
    font-weight: 400;
    opacity: 0.75;
  }

  /* Step one in the panel is set as the kind of work is: the name on a row
     of its own, the mobile and the email side by side under it. The card
     then ends, button and all, above the foot of the panel. */
  dialog.csheet .idcard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    padding: 26px 28px 24px;
  }

  dialog.csheet .idcard > * { grid-column: 1 / -1; }
  dialog.csheet .idcard > .field ~ .field { grid-column: auto; }
  dialog.csheet .idcard .btnrow .btn { flex: 0 1 auto; }

  /* Two pairs to a row, in two equal halves, with air between them. */
  dialog.csheet .rail { padding: 28px 28px 14px; }
  dialog.csheet .rail dl { grid-template-columns: repeat(2, minmax(max-content, 1fr) minmax(0, 2fr)); column-gap: 0; }
  dialog.csheet .rail dl dd { padding-right: 32px; }
  dialog.csheet .rail dl dd:nth-of-type(2n) { padding-right: 0; }
  dialog.csheet .rail dt:nth-last-of-type(2),
  dialog.csheet .rail dd:nth-last-of-type(2) { border-bottom: 0; }
}

/* ---------- less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  dialog.csheet,
  dialog.csheet::backdrop,
  dialog.csheet *,
  dialog.csheet *::before,
  dialog.csheet *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ==== saved.css ==== */
/* Saved works — the sheet that holds the reader's own short list.

   Black on white, after the layers Mercedes-Benz India raises over its pages
   on a telephone: a white sheet with rounded top corners rising from the foot
   of the window, a small grey handle, a large condensed-serif title, and each
   saved plate as a white spec card — the picture on a light-grey tile, the
   plate's number in the serif, its medium, size and kind in plain sans, a
   plain link back to the wheel, and one outlined pill beneath. At the foot,
   always in view while there is a list, one black pill sends the list to the
   studio: the only solid button in the sheet. On a wide screen the same
   sheet stands as a panel at the right-hand side of the window.

   Every token is read with a fallback, so the sheet looks the same whether or
   not the shell's stylesheet has defined it; the shell's values win wherever
   they exist. The pills are the shell's own (.pill, .pill--ghost-dark,
   .pill--block), sized here for the cards. */

.ssheet {
  --ss-ink: var(--ink, #000);
  --ss-paper: var(--paper, #fff);
  --ss-g100: var(--g100, #f4f4f4);
  --ss-g150: var(--g150, #ececec);
  --ss-g200: var(--g200, #e0e0e0);
  --ss-g300: var(--g300, #c8c8c8);
  --ss-g500: var(--g500, #767676);
  --ss-g600: var(--g600, #5c5c5c);
  --ss-g700: var(--g700, #3c3c3c);
  --ss-g800: var(--g800, #262626);
  --ss-sans: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --ss-serif: var(--f-serif, "Instrument Serif", "Iowan Old Style", Georgia, serif);
  --ss-card: var(--r-card, 12px);
  --ss-tile: var(--r-tile, 8px);
  --ss-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* The dialog itself is the whole window, clear: the dimmed page is drawn by
   the scrim inside it, so the dim and the sheet can move together. */
dialog.ssheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--ss-ink);
  font-family: var(--ss-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

dialog.ssheet[open] { display: block; }
dialog.ssheet::backdrop { background: transparent; }
.ssheet [hidden] { display: none !important; }

/* Everything in the sheet stands on white, so every focus ring is black —
   the shell's ring takes the text colour, which is white on a black pill. */
.ssheet :focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 3px; }

.ssheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
  opacity: 0;
  transition: opacity 0.32s ease;
  cursor: pointer;
}

.ssheet.is-in .ssheet__scrim { opacity: 1; }

/* ---------- the sheet ---------- */

.ssheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--ss-paper);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.38s var(--ss-ease);
  will-change: transform;
}

.ssheet.is-in .ssheet__panel { transform: translate3d(0, 0, 0); }

.ssheet.is-dragging .ssheet__panel,
.ssheet.is-dragging .ssheet__scrim { transition: none; }

/* The handle is drawn small but held large: the whole strip across the top
   of the sheet answers a thumb, which tends to land a little above the bar
   it is aiming for. */
.ssheet__grab {
  flex: none;
  position: relative;
  height: 22px;
  touch-action: none;
  cursor: grab;
}

.ssheet__grab::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--ss-g300);
}

/* The heading doubles as the handle on a telephone: a finger drawn down it
   takes the sheet with it. */
.ssheet__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px max(14px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.ssheet.is-scrolled .ssheet__head { border-bottom-color: var(--ss-g150); }

.ssheet__hd { flex: 1 1 auto; min-width: 0; padding-top: 4px; }

.ssheet .ssheet__title {
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ss-ink);
}

.ssheet .ssheet__title:focus { outline: none; }

.ssheet .ssheet__sub {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ss-g600);
}

/* Read to a screen reader as the sheet's description, but not shown twice
   over the empty state that says the same. */
.ssheet .ssheet__sub.is-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ssheet__x {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-g100);
  color: var(--ss-ink);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.ssheet__x svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.ssheet__x:hover { background: var(--ss-g200); }

.ssheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    2px
    max(20px, env(safe-area-inset-right, 0px))
    calc(28px + env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
}

.ssheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- a saved plate: a white spec card ---------- */

.ssheet .scard {
  margin: 0 0 12px;
  padding: 12px;
  background: var(--ss-paper);
  border: 1px solid var(--ss-g150);
  border-radius: var(--ss-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px rgba(0, 0, 0, 0.06);
}

.scard__top {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* The picture hangs on a light-grey tile, whole and uncropped, with the
   faint shadow of a canvas on a wall. */
.scard__pic {
  position: relative;
  width: 108px;
  aspect-ratio: 4 / 5;
  background: var(--ss-g100);
  border-radius: var(--ss-tile);
  overflow: hidden;
  cursor: pointer;
}

/* Held inside the tile's margin whatever its shape, tall or wide. */
.scard__pic img {
  position: absolute;
  left: 10px;
  top: 10px;
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
  transition: transform 0.4s var(--ss-ease);
}

.scard__pic:hover img { transform: scale(1.03); }

.scard__pic img.is-missing { visibility: hidden; }

.scard__txt { min-width: 0; padding-top: 4px; }

.scard__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ssheet .scard__t {
  margin: 0;
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ss-ink);
}

.ssheet .scard__m {
  margin: 10px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ss-ink);
}

/* saved.js keeps a size on one line; one too long for the card is broken
   rather than let run out of it. */
.ssheet .scard__s {
  margin: 2px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ss-g700);
  overflow-wrap: anywhere;
}

.ssheet .scard__n {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ss-g500);
}

.scard__rm {
  flex: none;
  min-height: 44px;
  min-width: 44px;
  margin: -12px -6px 0 0;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ss-g600);
  font-family: var(--ss-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ss-g300);
  text-underline-offset: 4px;
  cursor: pointer;
}

.scard__rm:hover { color: var(--ss-ink); text-decoration-color: currentColor; }
.ssheet .scard__rm:focus-visible,
.ssheet .scard__go:focus-visible { outline-offset: -2px; border-radius: 6px; }

/* The way back to the wheel: a link in ink under the plate's lines, drawn
   small and held large as Remove is, its extra height let into the space
   round it. */
.scard__go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 -10px -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ss-ink);
  font-family: var(--ss-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ss-g300);
  text-underline-offset: 4px;
  cursor: pointer;
}

.scard__go:hover { text-decoration-color: currentColor; }

.scard__acts { margin-top: 14px; }

.ssheet .scard__acts .pill {
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
}

/* ---------- the foot: the list sent to the studio ----------
   One black pill under a hairline, standing still while the list scrolls
   above it, and under the pill one small line saying what pressing it does
   not do: the place to say it is where the thumb is. While the foot is there
   it keeps the sheet clear of the telephone's home bar, which the list does
   otherwise. */

.ssheet__foot {
  flex: none;
  padding:
    12px
    max(20px, env(safe-area-inset-right, 0px))
    calc(14px + env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  background: var(--ss-paper);
  border-top: 1px solid var(--ss-g150);
}

/* The last card's own margin is part of the space left above the hairline. */
.ssheet.has-foot .ssheet__body { padding-bottom: 8px; }

.ssheet .ssheet__send {
  min-height: 52px;
  padding: 10px 18px;
  text-wrap: balance;
}

.ssheet .ssheet__sent {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  color: var(--ss-g600);
}

/* ---------- nothing saved yet ---------- */

.ssheet__empty {
  padding: 18px 0 4px;
  text-align: center;
}

.ssheet__emptyicon {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ss-g100);
}

.ssheet__emptyicon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ss-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.ssheet .ssheet__emptyt {
  margin: 0 0 10px;
  font-family: var(--ss-serif);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.05;
}

.ssheet .ssheet__empty p {
  max-width: 30ch;
  margin: 0 auto 26px;
  text-wrap: balance;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ss-g600);
}

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

/* ---------- a wide screen: a panel at the right ---------- */

@media (min-width: 720px) {
  .ssheet__panel {
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: min(480px, 100%);
    max-height: none;
    border-radius: 0;
    box-shadow: -14px 0 48px rgba(0, 0, 0, 0.2);
    transform: translate3d(100%, 0, 0);
    transition-duration: 0.42s;
  }

  .ssheet__grab { display: none; }

  /* The right-hand edge of a telephone turned on its side may hold the
     camera's notch; the panel keeps its buttons clear of it. */
  .ssheet__head {
    padding: 30px max(24px, env(safe-area-inset-right, 0px)) 22px 32px;
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }

  .ssheet .ssheet__title { font-size: 2.625rem; }

  .ssheet__body {
    padding:
      4px
      max(32px, env(safe-area-inset-right, 0px))
      calc(36px + env(safe-area-inset-bottom, 0px))
      32px;
  }

  .ssheet .scard { padding: 14px; }

  .scard__top { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }

  .scard__pic { width: 120px; }

  .ssheet__foot {
    padding:
      16px
      max(32px, env(safe-area-inset-right, 0px))
      calc(20px + env(safe-area-inset-bottom, 0px))
      32px;
  }

  .ssheet.has-foot .ssheet__body { padding-bottom: 12px; }

  .ssheet__empty { padding-top: 48px; }

  .ssheet .ssheet__wheel { display: inline-flex; width: auto; min-width: 240px; }
}

/* A telephone on its side: wide enough for the panel, but short, so the
   heading gives more of the height to the list. */
@media (min-width: 720px) and (max-height: 520px) {
  .ssheet__head { padding-top: 16px; padding-bottom: 14px; }
  .ssheet .ssheet__title { font-size: 2.125rem; }
  .ssheet .ssheet__sub { margin-top: 4px; }
  .ssheet__empty { padding-top: 8px; }
  .ssheet__emptyicon { width: 60px; height: 60px; margin-bottom: 12px; }
}

/* ---------- the count on the heart in the bar ----------
   A small lift when a plate is saved, so the eye finds where it went. */

[data-saved-count].is-bumped { animation: ss-bump 0.5s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)); }

@keyframes ss-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---------- less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ssheet__panel,
  .ssheet__scrim,
  .scard__pic img { transition: none; }
  [data-saved-count].is-bumped { animation: none; }
}

/* ==== protect.css ==== */
/* Picture protection — the stylesheet's share of it.

   The works on this site belong to the people they were painted for. Three
   things are done for them here, and the script beside this file
   (assets/js/protect.js) and the Worker in front of the site do the rest.

   What counts as an artwork, here and in the script: an <img> whose address
   is under img/works/ or is the founder's portrait, and anything marked
   data-art (the room's canvases, which are drawn from those pictures).

   1. An artwork cannot be picked up: no long-press sheet on a telephone, no
      dragging it off the page, no sweeping it into a selection.
   2. The veil. While <html> carries .srs-veil the artworks are not painted.
      Each one is cleared where it stands, so the page keeps its exact
      shape, a sheet or dialog raised over the page is covered as well, and
      a screen reader still finds every picture and its description.
   3. Print. The artworks are left out of anything printed or saved as a PDF,
      and one line at the head of the first sheet says so.

   None of this can stop a screenshot, and nothing on the site says it can. */

img[src*="img/works/"],
img[src*="founder-portrait"],
[data-art] {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The veil comes down at once and lifts at once, whatever fade a picture has
   of its own: the wheel's plates take half a second to arrive, and a veil
   that took as long would be no veil. Only the length of a change is taken
   away, never the list of what may change, so a movement already under way
   elsewhere on the same element still runs to its end and still reports it.
   .srs-veil-lift is worn for the one instant in which the veil comes off. */
html.srs-veil img[src*="img/works/"],
html.srs-veil img[src*="founder-portrait"],
html.srs-veil [data-art] {
  opacity: 0 !important;
}

html.srs-veil img[src*="img/works/"],
html.srs-veil img[src*="founder-portrait"],
html.srs-veil [data-art],
html.srs-veil-lift img[src*="img/works/"],
html.srs-veil-lift img[src*="founder-portrait"],
html.srs-veil-lift [data-art] {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

@media print {
  /* Both, because a marked container may hold children that ask to be seen;
     and neither waits on a fade of the picture's own, because a sheet is laid
     out in a single instant. */
  img[src*="img/works/"],
  img[src*="founder-portrait"],
  [data-art] {
    opacity: 0 !important;
    visibility: hidden !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  body::before {
    content: "Pictures are not printed. \00a9  Shivraj Singh Art Gallery.";
    display: block;
    margin: 0;
    padding: 10pt 0;
    border-bottom: 0.5pt solid var(--g300, #c8c8c8);
    background: var(--paper, #fff);
    color: var(--ink, #000);
    font-family: var(--f-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
    font-size: 10pt;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-align: left;
  }

  /* A page with no artwork on it left nothing out, and says nothing. */
  @supports selector(:has(a)) {
    body:not(:has(img[src*="img/works/"], img[src*="founder-portrait"], [data-art]))::before {
      content: none;
    }
  }
}

/* ==== studio-chat.css ==== */
/* Studio chat widget — signed-in seats only. Sits at the bottom-right,
   just left of the Studio Desk badge when that badge is on the page. */

.sc-launch {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--badge, 56px);
  height: var(--badge, 56px);
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}
.sc-launch__mark {
  display: grid;
  place-items: center;
  width: 72%;
  height: 72%;
}
/* The mark's file is white line work; on this white button it is turned to
   black, which also tells the private thread apart from the studio desk. */
.sc-launch__mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: invert(1); }
.sc-launch__n {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.25em;
  height: 1.25em;
  padding: 0 5px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: 700 0.7rem/1.25em Inter, system-ui, sans-serif;
  text-align: center;
}
.sc-launch:hover { background: #ededed; }
.sc-launch:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.sc-panel {
  position: fixed;
  z-index: 92;
  right: var(--dock-gut, 16px);
  bottom: calc(var(--badge, 56px) + 26px + env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 24px));
  height: min(520px, calc(100vh - var(--badge, 56px) - 48px));
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #000;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
.sc-panel[hidden],
.sc-launch[hidden],
.sc[hidden] { display: none !important; }
body.sc-has-dock .sc-panel {
  right: calc(var(--dock-gut, 16px) + var(--badge, 56px) + 10px);
}
body.sc-solo .sc,
body.ib .sc {
  position: fixed;
  z-index: 92;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
body.sc-solo .sc-launch,
body.ib .sc-launch,
body.sc-solo .sc-panel,
body.ib .sc-panel { pointer-events: auto; }
body.sc-solo .sc-panel,
body.ib .sc-panel {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(380px, calc(100vw - 32px));
}

.sc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 8px 14px;
  background: #000;
  color: #fff;
}
.sc-title {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
}
.sc-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #bdbdbd;
}
.sc-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #767676;
}
.sc-live.is-live { color: #8fdf9e; }
.sc-live.is-live::before { background: #3dcc63; }
.sc-min {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.sc-min:hover { background: #fff; color: #000; }

.sc-people {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  border-bottom: 1px solid #ececec;
  background: #f8f8f8;
  font-size: 0.75rem;
}
.sc-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5c5c5c;
}
.sc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c8c8c8;
}
.sc-person.is-on { color: #000; font-weight: 600; }
.sc-person.is-on .sc-dot { background: #1b7a3a; }
.sc-person.is-you .sc-person__n::after { content: " · you"; font-weight: 500; color: #767676; }
.sc-person__l { color: #767676; font-weight: 500; }

.sc-log {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow: auto;
  background:
    linear-gradient(to right, #fff 0, #fff 10px, #ececec 10px, #ececec 11px, #fff 11px);
}
.sc-empty { padding: 22px 16px 22px 22px; color: #5c5c5c; font-size: 0.9rem; }
.sc-line {
  padding: 10px 14px 10px 22px;
  border-bottom: 1px solid #f0f0f0;
}
.sc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 3px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c5c5c;
}
.sc-who { color: #000; }
.sc-at { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sc-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.4; }
.sc-line.is-new { animation: sc-arrive 1s ease; }
@keyframes sc-arrive { from { background: #ececec; } to { background: transparent; } }

.sc-compose {
  display: grid;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid #e0e0e0;
  background: #fff;
}
.sc-ta {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  font: 1rem/1.4 Inter, system-ui, sans-serif;
  resize: none;
}
.sc-ta:focus { outline: 2px solid #000; border-color: #000; }
.sc-row { display: flex; align-items: center; gap: 10px; }
.sc-send {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.sc-send:hover { background: #262626; }
.sc-send[disabled] { opacity: 0.55; }
.sc-err { margin: 0; color: #c62828; font-size: 0.8rem; min-height: 1em; }
.sc-home {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 0.72rem;
  color: #767676;
}
.sc-home a { color: #5c5c5c; }
.sc-word-open {
  border: 0;
  padding: 0;
  background: none;
  color: #5c5c5c;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sc-word[hidden] { display: none !important; }
.sc-word {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
  border-top: 1px solid #ececec;
}
.sc-word__t { margin: 8px 0 0; font-weight: 700; font-size: 0.85rem; }
.sc-word__f { display: grid; gap: 3px; font-size: 0.78rem; font-weight: 600; }
.sc-word__hi { font-weight: 500; color: #767676; }
.sc-word__in {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  font: 0.95rem/1.3 Inter, system-ui, sans-serif;
}
.sc-word__hint { margin: 0; font-size: 0.72rem; color: #767676; }
.sc-word__err { margin: 0; color: #c62828; font-size: 0.8rem; min-height: 1em; }
.sc-word-cancel {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #c8c8c8;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 420px) {
  body.sc-has-dock .sc-panel { right: var(--dock-gut, 10px); width: calc(100vw - 20px); }
}