/* 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; }

/* 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; }
}

/* 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", set as the studio's
   co-owner asked (a large figure with the words stacked beside it, as on the
   studio's own 75-years badge). Every gold here is drawn from --legacy-gold:
   a brushed gilt run, light at the top, deep through the middle, bright at
   the foot, clipped to the letters; where that cannot be drawn the flat gilt
   stands in. The whole is read once, 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 itself is drawn in the page (inline SVG): laurel, the figure,
   YEARS, Legacy in script, a gilt rule and sparks. Its golds are the frames'
   gilt, deepened and lit, as the studio's own 75-years badge is. */
.legacy__badge { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; overflow: visible; }

/* ---------- 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; }
}