/*
 * Gallery: the storefront theme every new house starts with (src/themes/gallery.ts).
 *
 * The layout and craft of the Gliubich theme (a centred logo with the menu
 * below it, a tall hero with a soft veil, catalogue lot cards, square
 * imagery, thin rules, a dark banded footer, generous white space, 17 px
 * text), painted with each house's OWN colours instead of Gliubich's: the
 * --house-* variables (src/themes/house-colours.ts) carry the house's accent
 * (its secondary colour), ink and footer, with ink where it chose none, and
 * the header keeps the house's header colours (--brand-primary,
 * --brand-header-text). No wordmark: the header and footer show the house's
 * logo, or its name in the display face.
 *
 * Loaded ONLY on the storefront (and the sign-in page) of a house whose
 * AuctionHouse.storefrontTheme is "gallery". Every rule is scoped to
 * [data-house-theme="gallery"]. Fonts are not named here:
 * --theme-font-heading and --theme-font-body come from the registry entry
 * (Gilda Display and Libre Franklin, both SIL Open Font Licence).
 *
 * Every --house-* variable has a fallback here, so the sign-in page, which
 * carries the theme without the house's colours, still draws in ink.
 */

[data-house-theme="gallery"] {
  --ga-ink: var(--house-ink, #181818);
  --ga-ink-soft: color-mix(in srgb, var(--ga-ink) 82%, #ffffff);
  --ga-accent: var(--house-accent, var(--ga-ink)); /* rules, borders, the bands */
  --ga-accent-text: var(--house-accent-text, var(--ga-ink)); /* the accent as text, 4.5:1 */
  --ga-accent-on: var(--house-accent-on, #ffffff); /* text on an accent fill */
  --ga-paper: var(--house-paper, #f5f5f5); /* quiet surfaces: a light tint of the accent */
  --ga-footer: var(--house-footer, var(--ga-ink));
  --ga-footer-text: var(--house-footer-text, #ffffff);
  --ga-footer-accent: var(--house-footer-accent, var(--ga-footer-text));
  --ga-grey: #f3f3f3;
  --ga-hair: color-mix(in srgb, var(--ga-ink) 14%, transparent);
  --ga-header-hair: color-mix(in srgb, var(--brand-header-text, #181818) 16%, transparent);
  --ga-display: var(--theme-font-heading, Georgia, serif);
  --ga-sans: var(--theme-font-body, "Helvetica Neue", Arial, sans-serif);
  --ga-measure: 68ch;

  /* The brand variables the shared components read. */
  --brand-primary-readable: var(--ga-accent-text);
  --cms-rich-text-link: var(--ga-accent-text);
  /* The platform's own tokens (globals.css), for the storefront widgets that
     use them (the bid panel's buttons, borders, muted text). */
  --primary: var(--ga-ink);
  --primary-foreground: #ffffff;
  --accent: var(--ga-accent-text);
  --border: var(--ga-hair);
  --muted: var(--ga-grey);
  --muted-foreground: #5c5c5c;

  font-family: var(--ga-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ga-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------ type scale */

[data-house-theme="gallery"] :is(h1, h2, h3, h4) {
  font-family: var(--ga-display);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ga-ink);
}
[data-house-theme="gallery"] :is(h1, h2, h3, h4).font-bold,
[data-house-theme="gallery"] :is(h1, h2, h3, h4).font-semibold {
  font-weight: 400;
}
[data-house-theme="gallery"] h1 {
  line-height: 1.12;
}
[data-house-theme="gallery"] h2 {
  line-height: 1.2;
}

/* Section headings: centred display face over a short accent rule. */
[data-house-theme="gallery"] main section > h2.text-2xl,
[data-house-theme="gallery"] main section > h2.text-xl {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  text-align: center;
  margin-bottom: 2.25rem;
}
[data-house-theme="gallery"] main section > h2.text-2xl::after,
[data-house-theme="gallery"] main section > h2.text-xl::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin: 0.85rem auto 0;
  background: var(--ga-accent);
}

/* Small headings (panel titles such as "Description", "Bid history"): tracked
   sans capitals, not a tiny display serif. */
[data-house-theme="gallery"] main :is(h2, h3, h4):is(.text-xs, .text-sm, .text-base) {
  font-family: var(--ga-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ga-ink);
}

/* Small print readable: Tailwind's 12 and 14 px become 13 and 15 px. */
[data-house-theme="gallery"] .text-xs {
  font-size: 0.8125rem;
  line-height: 1.5;
}
[data-house-theme="gallery"] .text-sm {
  font-size: 0.9375rem;
  line-height: 1.55;
}
[data-house-theme="gallery"] .text-base {
  font-size: 1.0625rem;
}

/* Running text: a comfortable measure and line height. */
[data-house-theme="gallery"] .cms-rich-text {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: var(--ga-measure);
}
[data-house-theme="gallery"] .cms-rich-text :is(h2, h3, h4) {
  font-family: var(--ga-display);
  font-weight: 400;
}
[data-house-theme="gallery"] .cms-rich-text h2 {
  font-size: 1.75em;
}
[data-house-theme="gallery"] .cms-rich-text a {
  color: var(--ga-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Links tinted with the brand colour use the readable accent. */
[data-house-theme="gallery"] [style*="--brand-primary-readable"] {
  color: var(--ga-accent-text);
}

/* --------------------------------------------------------------- shapes */

/* Quiet luxury: square corners on cards, images, panels and buttons. */
[data-house-theme="gallery"] main :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl),
[data-house-theme="gallery"] footer :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl) {
  border-radius: 0;
}
[data-house-theme="gallery"] main .shadow-sm,
[data-house-theme="gallery"] main .hover\:shadow-md:hover,
[data-house-theme="gallery"] main .hover\:shadow-lg:hover {
  box-shadow: none;
}

/* Buttons: ink rectangles with tracked capitals; secondary ones outlined. */
[data-house-theme="gallery"] main a[style*="--brand-cta"],
[data-house-theme="gallery"] main button[style*="--brand-cta"] {
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ga-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95rem 1.75rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-house-theme="gallery"] main a[style*="--brand-cta"]:hover,
[data-house-theme="gallery"] main button[style*="--brand-cta"]:hover {
  background: var(--ga-accent) !important;
  color: var(--ga-accent-on) !important;
}

/* ------------------------------------------------------- focus, a11y */

/* Phone and e-mail links are tap targets of at least 24 px (WCAG 2.5.8). */
[data-house-theme="gallery"] :is(main, footer) a:is([href^="tel:"], [href^="mailto:"]) {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

[data-house-theme="gallery"] :focus-visible {
  outline: 2px solid var(--ga-accent-text) !important;
  outline-offset: 3px !important;
  border-radius: 0;
}
[data-house-theme="gallery"] footer :focus-visible {
  outline-color: var(--ga-footer-accent) !important;
}
[data-house-theme="gallery"] [data-theme-part="hero"] :focus-visible,
[data-house-theme="gallery"] [data-theme-part="tile"] :focus-visible {
  outline-color: #ffffff !important;
}
[data-house-theme="gallery"] ::selection {
  background: color-mix(in srgb, var(--ga-accent) 30%, transparent);
}

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

[data-house-theme="gallery"] [data-theme-part="header"] {
  border-bottom: 1px solid var(--ga-header-hair) !important;
  position: relative;
  z-index: 30;
}
[data-house-theme="gallery"] [data-theme-part="header-top"] {
  padding-top: 1.35rem;
  padding-bottom: 1.1rem;
}
/* The house's logo, a little larger than the basic header's; a house
   without one gets its name in the display face. */
[data-house-theme="gallery"] [data-theme-part="header-top"] [data-theme-part="wordmark"] {
  height: 3.5rem;
  max-width: 260px;
  display: block;
}
[data-house-theme="gallery"] [data-header-logo] > span {
  font-family: var(--ga-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
[data-house-theme="gallery"] [data-theme-part="header-top"] > div {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-house-theme="gallery"] [data-theme-part="header-top"] a {
  color: inherit;
  text-decoration: none;
}
[data-house-theme="gallery"] [data-theme-part="header-top"] > div a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ga-accent);
  text-underline-offset: 4px;
}
[data-house-theme="gallery"] [data-theme-part="header-top"] select {
  letter-spacing: 0.12em;
  font-weight: 500;
  padding: 0.35rem 0.25rem;
}

/* The menu row: the display face, sentence case, an accent underline for the hover. */
[data-house-theme="gallery"] [data-theme-part="header-nav"] {
  border-top: 1px solid var(--ga-header-hair);
  font-family: var(--ga-display);
  font-size: 1.1875rem;
  padding-top: 0.95rem;
  padding-bottom: 1rem;
}
[data-house-theme="gallery"] [data-theme-part="header-nav"] > a,
[data-house-theme="gallery"] [data-theme-part="header-nav"] > div > button {
  color: inherit;
  text-decoration: none;
  padding: 0.2rem 0;
  background-image: linear-gradient(var(--ga-accent), var(--ga-accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  transition: background-size 0.25s ease;
}
[data-house-theme="gallery"] [data-theme-part="header-nav"] > a:hover,
[data-house-theme="gallery"] [data-theme-part="header-nav"] > div > button:hover,
[data-house-theme="gallery"] [data-theme-part="header-nav"] > div > button[aria-expanded="true"] {
  text-decoration: none;
  background-size: 100% 1px;
}
[data-house-theme="gallery"] [data-theme-part="header-nav"] > div > button svg {
  width: 0.8rem;
  height: 0.8rem;
  opacity: 0.6;
}
/* Dropdowns: a white panel with an accent top rule, sans links. */
[data-house-theme="gallery"] [data-theme-part="header-nav"] [role="menu"] {
  border-radius: 0;
  border: 1px solid var(--ga-hair);
  border-top: 2px solid var(--ga-accent);
  box-shadow: 0 18px 40px rgba(24, 24, 24, 0.08);
  min-width: 260px;
  padding: 0.6rem 0;
  font-family: var(--ga-sans);
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1rem;
}
[data-house-theme="gallery"] [data-theme-part="header-nav"] [role="menuitem"] {
  font-size: 0.9375rem;
  padding: 0.55rem 1.4rem;
  color: var(--ga-ink);
}
[data-house-theme="gallery"] [data-theme-part="header-nav"] [role="menuitem"]:hover {
  background: var(--ga-paper);
  color: var(--ga-accent-text);
}

/* Phone and tablet: one compact row, the logo centred. */
[data-house-theme="gallery"] [data-theme-part="header-compact"] {
  min-height: 64px;
}
[data-house-theme="gallery"] [data-theme-part="header-compact"] [data-theme-part="wordmark"] {
  height: 2.75rem;
  max-width: 180px;
  display: block;
}
[data-house-theme="gallery"] [data-theme-part="header-compact"] button,
[data-house-theme="gallery"] [data-theme-part="header-compact"] > a:last-child {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

/* The phone menu: full screen, the display face for the sections, sans links. */
[data-house-theme="gallery"] [role="dialog"] > div {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  color: var(--ga-ink) !important;
  box-shadow: none;
}
[data-house-theme="gallery"] [role="dialog"] nav {
  padding: 1.25rem 1.5rem;
}
[data-house-theme="gallery"] [role="dialog"] nav > a {
  font-family: var(--ga-display);
  font-size: 1.5rem;
  border-bottom: 1px solid var(--ga-hair);
  border-radius: 0;
  padding: 0.85rem 0.25rem;
}
[data-house-theme="gallery"] [role="dialog"] nav > div > div:first-child {
  font-family: var(--ga-display);
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 1;
  padding: 1rem 0.25rem 0.35rem;
  color: var(--ga-ink);
}
[data-house-theme="gallery"] [role="dialog"] nav > div > a {
  font-size: 1rem;
  padding: 0.55rem 0.5rem 0.55rem 1rem;
  border-radius: 0;
}
[data-house-theme="gallery"] [role="dialog"] nav > div {
  border-bottom: 1px solid var(--ga-hair);
  padding-bottom: 0.75rem;
}
[data-house-theme="gallery"] [role="dialog"] > div > div:last-child a {
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ----------------------------------------------------------------- hero */

[data-house-theme="gallery"] [data-theme-part="hero"] h1 {
  font-family: var(--ga-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem);
  line-height: 1.08;
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
  color: #ffffff;
}
[data-house-theme="gallery"] [data-theme-part="hero"] h1 + p {
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  margin-top: 1.25rem;
  color: #ffffff;
  opacity: 1;
}
[data-house-theme="gallery"] [data-theme-part="hero"] h1 + p::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  background: var(--ga-accent);
  margin: 0 auto 1.1rem;
}
[data-house-theme="gallery"] [data-theme-part="hero"] a[style*="--brand-cta"] {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.85);
  margin-top: 2rem;
}
[data-house-theme="gallery"] [data-theme-part="hero"] a[style*="--brand-cta"]:hover {
  background: #ffffff !important;
  color: var(--ga-ink) !important;
}
/* Slide dots: larger targets, the accent for the current one. */
[data-house-theme="gallery"] [data-theme-part="hero"] button[aria-current] {
  height: 3px;
  border-radius: 0;
  width: 2rem;
  background: rgba(255, 255, 255, 0.55);
  position: relative;
}
[data-house-theme="gallery"] [data-theme-part="hero"] button[aria-current]::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}
[data-house-theme="gallery"] [data-theme-part="hero"] button[aria-current="true"] {
  width: 3rem;
  background: var(--ga-accent);
}
/* Prev/next: thin circles instead of frosted pucks. */
[data-house-theme="gallery"] [data-theme-part="hero"] > button {
  background: transparent !important;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
[data-house-theme="gallery"] [data-theme-part="hero"] > button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Phones: swipe-free dots only; the arrows would cover the title. */
@media (max-width: 767px) {
  [data-house-theme="gallery"] [data-theme-part="hero"] > button {
    display: none;
  }
}

/* A thick accent band under the hero. */
[data-house-theme="gallery"] [data-theme-part="hero"] {
  border-bottom: 14px solid var(--ga-accent);
}

/* --------------------------------------------------------- image tiles */

[data-house-theme="gallery"] [data-theme-part="tiles-overlay"] {
  gap: 1.25rem;
}
[data-house-theme="gallery"] [data-theme-part="tile"] figcaption {
  font-family: var(--ga-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.15;
  padding: 6rem 1.75rem 1.75rem;
}
[data-house-theme="gallery"] [data-theme-part="tile"] figcaption::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  background: var(--ga-accent);
  margin-top: 0.9rem;
  transition: width 0.35s ease;
}
[data-house-theme="gallery"] a:hover [data-theme-part="tile"] figcaption::after,
[data-house-theme="gallery"] a:focus-visible [data-theme-part="tile"] figcaption::after {
  width: 5rem;
}

/* --------------------------------------------------------- lot cards */

[data-house-theme="gallery"] [data-theme-part="lot-card-media"] {
  background: #ffffff;
  border: 1px solid var(--ga-hair);
  transition: border-color 0.2s ease;
}
[data-house-theme="gallery"] [data-theme-part="lot-card"]:hover [data-theme-part="lot-card-media"] {
  border-color: var(--ga-accent);
}
/* A clean white field around the object, as in studio photography: no
   blurred copy of the photo behind it. */
[data-house-theme="gallery"] [data-theme-part="lot-card-media"] img.blur-xl {
  display: none;
}
[data-house-theme="gallery"] [data-theme-part="lot-card-media"] img.object-contain {
  padding: 6%;
}
[data-house-theme="gallery"] [data-theme-part="lot-number"] {
  color: var(--ga-accent-text);
  font-weight: 600;
}
[data-house-theme="gallery"] [data-theme-part="lot-title"] {
  font-family: var(--ga-display);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.28;
  color: var(--ga-ink);
}
[data-house-theme="gallery"] [data-theme-part="lot-card"]:hover [data-theme-part="lot-title"] {
  text-decoration: underline;
  text-decoration-color: var(--ga-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
[data-house-theme="gallery"] [data-theme-part="lot-estimate"] > span:first-child,
[data-house-theme="gallery"] [data-theme-part="lot-price"] > span:first-child {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
[data-house-theme="gallery"] [data-theme-part="lot-price"] > span:first-child {
  font-weight: 500;
  color: var(--ga-ink-soft);
}

/* Lot grids: more air between cards. */
[data-house-theme="gallery"] main .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 {
  column-gap: 1.75rem;
  row-gap: 2.75rem;
}
@media (max-width: 639px) {
  [data-house-theme="gallery"] main .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-4 {
    column-gap: 1rem;
    row-gap: 2rem;
  }
  [data-house-theme="gallery"] [data-theme-part="lot-title"] {
    font-size: 1.0625rem;
  }
  [data-house-theme="gallery"] [data-theme-part="lot-card-media"] img.object-contain {
    padding: 4%;
  }
}

/* The card's photo dots: the lot page shows every photograph, so the card
   shows one (as a printed catalogue does), and no 6 px tap targets. */
[data-house-theme="gallery"] [data-theme-part="lot-card-media"] > div.absolute.bottom-1\.5 {
  display: none;
}

/* The time-left badge on a lot card: a small ink label, square. */
[data-house-theme="gallery"] [data-theme-part="lot-card-media"] > span.absolute.top-2 {
  background: var(--ga-ink) !important;
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.55rem;
}

/* ------------------------------------------------------- auction cards */

[data-house-theme="gallery"] main a.group.block.border:has(> .aspect-square),
[data-house-theme="gallery"] main a.group.block.border:has(> .aspect-\[4\/3\]) {
  border: 0 !important;
  background: transparent;
}
[data-house-theme="gallery"] main a.group.block.border > :is(.aspect-square, .aspect-\[4\/3\]) {
  border: 1px solid var(--ga-hair);
  background: #ffffff;
}
[data-house-theme="gallery"] main a.group.block.border > :is(.aspect-square, .aspect-\[4\/3\]) img {
  object-fit: contain;
  padding: 5%;
  transition: transform 0.5s ease;
}
[data-house-theme="gallery"] main a.group.block.border > :is(.aspect-square, .aspect-\[4\/3\]) > span {
  background: var(--ga-ink) !important;
  color: #ffffff !important;
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
}
[data-house-theme="gallery"] main a.group.block.border > .p-4 {
  padding: 1.1rem 0 0;
}
[data-house-theme="gallery"] main a.group.block.border > .p-4 > h3 {
  font-family: var(--ga-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
}
/* A sale without photographs yet (an announced sale): a paper field
   instead of an empty white frame. */
[data-house-theme="gallery"] main a.group.block.border > :is(.aspect-square, .aspect-\[4\/3\]):not(:has(img)) {
  background: var(--ga-paper);
}

/* One sale in a row: a wide feature card (image beside the text) instead of a
   lone card in a three-column grid. */
@media (min-width: 768px) {
  [data-house-theme="gallery"] main .grid.lg\:grid-cols-3:has(> a:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-house-theme="gallery"] main .grid.lg\:grid-cols-3 > a.group.block.border:only-child {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    column-gap: 3.5rem;
  }
  [data-house-theme="gallery"] main .grid.lg\:grid-cols-3 > a.group.block.border:only-child > .p-4 {
    padding: 0;
  }
  [data-house-theme="gallery"] main .grid.lg\:grid-cols-3 > a.group.block.border:only-child > .p-4 > h3 {
    font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  }
}

[data-house-theme="gallery"] main a.group.block.border > .p-4 > h3::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--ga-accent);
  margin-top: 0.75rem;
}

/* ------------------------------------------------------- catalogue */

/* The sale heading on a catalogue: the display face, generous, a measure. */
[data-house-theme="gallery"] main > div.max-w-6xl > h1.text-3xl {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  line-height: 1.1;
  max-width: 30ch;
}
[data-house-theme="gallery"] main > div.max-w-6xl > h1.text-3xl + p {
  font-size: 1.0625rem;
  max-width: var(--ga-measure);
  margin-top: 0.85rem;
  color: var(--ga-ink-soft);
  opacity: 1;
}

/* Form fields: hairline, square, readable. */
[data-house-theme="gallery"] main :is(input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea),
[data-house-theme="gallery"] footer :is(input[type="email"], input[type="text"]) {
  border-radius: 0 !important;
  font-size: 1rem;
}
[data-house-theme="gallery"] main :is(input, select, textarea):focus {
  border-color: var(--ga-accent-text) !important;
}

/* Pagination: the active page in white on ink, square. */
[data-house-theme="gallery"] main nav[aria-label] a[aria-current="page"],
[data-house-theme="gallery"] main nav[aria-label] span[aria-current="page"] {
  background: var(--ga-ink) !important;
  color: #ffffff !important;
  border-color: var(--ga-ink) !important;
}

/* Phones: the first lot on the first screen. The sale text is clamped to
   three lines (the full text stays in the page for search engines and
   screen readers), the page's top padding shrinks. */
@media (max-width: 639px) {
  [data-house-theme="gallery"] main > div.max-w-6xl.py-12 {
    padding-top: 1.25rem;
  }
  [data-house-theme="gallery"] main > div.max-w-6xl > h1.text-3xl {
    font-size: 1.65rem;
  }
  [data-house-theme="gallery"] main > div.max-w-6xl > h1.text-3xl + p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
  }
  [data-house-theme="gallery"] main section#catalogue,
  [data-house-theme="gallery"] main section[id].mt-8 {
    margin-top: 1rem;
  }
}

/* ------------------------------------------------------------ lot page */

/* Description and catalogue rows: book-like, readable. */
[data-house-theme="gallery"] main p.whitespace-pre-line {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: var(--ga-measure);
  color: var(--ga-ink);
  opacity: 1;
}
[data-house-theme="gallery"] main h1.text-3xl.flex-1 {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1.15;
}
/* The lot number above the lot title: accent capitals, as in a printed catalogue. */
[data-house-theme="gallery"] main .space-y-6 > div > .text-xs.font-semibold.uppercase.tracking-wide:first-child {
  color: var(--ga-accent-text);
  opacity: 1;
  letter-spacing: 0.14em;
}

/* Starting price and estimate under the lot title: full ink, a size up. */
[data-house-theme="gallery"] main h1.text-3xl.flex-1 ~ * .space-y-1.text-sm,
[data-house-theme="gallery"] main div.mt-2.space-y-1.text-sm.opacity-80 {
  font-size: 1.0625rem;
  opacity: 1;
  color: var(--ga-ink);
}

/* The bid panel: a paper surface with an accent top rule. */
[data-house-theme="gallery"] main .rounded-lg.border.p-5 {
  background: var(--ga-paper);
  border: 0 !important;
  border-top: 2px solid var(--ga-accent) !important;
}
[data-house-theme="gallery"] main .rounded-lg.border.p-5 .text-3xl {
  font-family: var(--ga-sans);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
[data-house-theme="gallery"] main .rounded-lg.border.p-4 {
  border-color: var(--ga-hair) !important;
}

/* Breadcrumbs: small tracked capitals. */
[data-house-theme="gallery"] main > nav[aria-label] ol,
[data-house-theme="gallery"] main nav[aria-label] > ol.flex {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------- content page title */

[data-house-theme="gallery"] [data-cms-page-title] {
  background: var(--ga-paper);
  text-align: center;
  margin-bottom: 1rem;
}
[data-house-theme="gallery"] [data-cms-page-title] > div {
  padding-top: 3rem;
  padding-bottom: 2.75rem;
}
[data-house-theme="gallery"] [data-cms-page-title] h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}
[data-house-theme="gallery"] [data-cms-page-title] h1::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  background: var(--ga-accent);
  margin: 1rem auto 0;
}
/* Fixed pages (about, terms, privacy): the same feeling on their h1. */
[data-house-theme="gallery"] main > article.max-w-3xl > h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
  margin-bottom: 2.5rem;
}
[data-house-theme="gallery"] main > article.max-w-3xl > h1::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  background: var(--ga-accent);
  margin: 1rem auto 0;
}
[data-house-theme="gallery"] main > article.max-w-3xl {
  max-width: 52rem;
}

/* Block backgrounds: the paper instead of the generic tint (BlockFrame's
   "Subtle tint" is an inline colour-mix of the text and page colours). */
[data-house-theme="gallery"] main div[style*="var(--brand-text) 5%"] {
  background: var(--ga-paper) !important;
}

/* The About us block's eyebrow: accent tracked capitals. */
[data-house-theme="gallery"] main p.text-sm.font-semibold.uppercase.tracking-wide.opacity-75 {
  color: var(--ga-accent-text);
  opacity: 1;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
}

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

[data-house-theme="gallery"] [data-theme-part="footer"] {
  background: var(--ga-footer) !important;
  color: color-mix(in srgb, var(--ga-footer-text) 88%, transparent) !important;
  border-top: 26px solid var(--ga-accent);
  margin-top: 6rem;
  font-size: 0.9375rem;
}
/* The footer logo (Settings > Design), or the house's name in the display face. */
[data-house-theme="gallery"] [data-theme-part="footer-wordmark"] img {
  max-height: 4.5rem;
  width: auto;
}
[data-house-theme="gallery"] [data-theme-part="footer-wordmark"] > div {
  font-family: var(--ga-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ga-footer-text);
}
[data-house-theme="gallery"] [data-theme-part="footer"] .font-semibold {
  font-weight: 600;
  color: var(--ga-footer-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 0.85rem;
}
[data-house-theme="gallery"] [data-theme-part="footer"] a {
  color: color-mix(in srgb, var(--ga-footer-text) 88%, transparent);
  text-decoration: none;
}
[data-house-theme="gallery"] [data-theme-part="footer"] a:hover {
  color: var(--ga-footer-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-house-theme="gallery"] [data-theme-part="footer"] nav {
  gap: 0.45rem;
}
[data-house-theme="gallery"] [data-theme-part="footer-social"] a {
  text-decoration: underline;
  text-decoration-color: var(--ga-footer-accent);
  text-underline-offset: 4px;
}
[data-house-theme="gallery"] [data-theme-part="footer-legal"] {
  opacity: 1;
  color: color-mix(in srgb, var(--ga-footer-text) 76%, transparent);
  border-color: color-mix(in srgb, var(--ga-footer-text) 22%, transparent) !important;
}
[data-house-theme="gallery"] [data-theme-part="footer-community"] button {
  border-radius: 0;
  background: var(--ga-accent) !important;
  color: var(--ga-accent-on) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------------------------------------------------------- sign-in */

[data-house-theme="gallery"] > div.min-h-screen {
  background: var(--ga-paper) !important;
}
[data-house-theme="gallery"] > div.min-h-screen h1 {
  font-family: var(--ga-display);
  font-weight: 400;
}

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

@media (prefers-reduced-motion: reduce) {
  [data-house-theme="gallery"] *,
  [data-house-theme="gallery"] *::before,
  [data-house-theme="gallery"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}