/* Hallmark · macrostructure: Catalogue, retained at owner's request · main body: sampled #B25253
 * variants: Logo red / Paper labels / Ink gallery · source: Instagram profile-wordmark.jpg
 * graphic typography and case-shape browsing retained from the selected Shape Index.
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
.index-theme, .studio-themes {
  --font-graphic: Helvetica, Arial, sans-serif;
  --font-body: Helvetica, Arial, sans-serif;
  --color-paper: var(--color-logo-red);
  --color-ink: var(--color-logo-cream);
  --color-muted: var(--color-logo-cream);
  --color-rule: var(--color-logo-rule);
  --color-accent: var(--color-logo-black);
  --color-accent-ink: var(--color-logo-cream);
  --color-focus: var(--color-logo-cream);
  background: var(--color-logo-red);
  color: var(--color-logo-cream);
  position: relative;
  isolation: isolate;
}
/* Original grain, clipped by the SVG pattern. Darken preserves the text contrast. */
.brand-paper { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.brand-wordmark { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: normal; line-height: 1; white-space: nowrap; }
.index-theme .index-rail-brand { display: flex; align-items: center; font-size: 21.4px; min-height: 44px; }
.index-theme .index-masthead h1 { margin: 30px 0 0; font-size: 22.65cqw; line-height: 1; letter-spacing: normal; }
.index-theme .index-masthead .brand-wordmark { line-height: .85; }
.index-theme .index-masthead > p { margin-top: 28px; }
.index-theme .index-filters button:not([aria-pressed="true"]) { background: transparent; }
.index-theme .draft-home .brand-wordmark { display: block; font-size: 14.5px; }
.studio-themes .studio-top .wordmark { display: flex; align-items: center; font-size: 27.3px; min-height: 44px; }
.index-theme .index-number,
.index-theme .index-caption .index-status,
.index-theme .index-nav a:first-child { color: var(--color-ink); }
.index-theme .index-status { font-weight: 500; }
.index-theme :is(a, button):focus-visible { outline-color: var(--color-focus); }
.index-theme .index-filters button[aria-pressed="true"]:focus-visible { outline-color: var(--color-logo-cream); }
.index-theme .index-about { border-top-color: var(--color-rule); }
.index-theme .index-enquire:hover { color: var(--color-ink); border-color: var(--color-ink); }
.index-theme .index-photo { background: var(--color-logo-black); }
.index-theme .draft-nav { --color-ink: var(--color-logo-cream); --color-muted: var(--color-logo-cream); }

/* Example 1: earlier dusty-pink reference, with a white page. */
.theme-logo {
  --color-salmon: #ac5153;
  --color-paper: #fff;
  --color-ink: var(--color-logo-black);
  --color-muted: var(--color-logo-black);
  --color-rule: #e5e5e5;
  --color-accent: var(--color-salmon);
  --color-accent-ink: var(--color-paper);
  --color-focus: var(--color-salmon);
  background: var(--color-paper);
  color: var(--color-ink);
}
.theme-logo .index-layout { grid-template-columns: 224px minmax(0, 1fr); background: var(--color-salmon); }
.theme-logo .index-main { background: var(--color-paper); }
.theme-logo .index-rail {
  --color-logo-red: var(--color-salmon);
  --color-ink: #fff;
  --color-muted: #fff;
  --color-focus: #fff;
  background: var(--color-salmon);
  color: var(--color-ink);
  border-color: var(--color-salmon);
  isolation: isolate;
}
.theme-logo .index-rail .brand-paper { opacity: .35; }
.theme-logo .index-masthead h1,
.theme-logo .index-rail-brand { color: var(--color-logo-black); }
.theme-logo .index-about h2 { color: var(--color-accent); }
.theme-logo .draft-nav { --color-ink: var(--color-logo-black); --color-muted: var(--color-logo-black); }
.theme-logo .draft-nav [aria-current] { background: var(--color-accent); color: var(--color-paper); }
.theme-logo .index-filters button[aria-pressed="true"]:focus-visible { outline-color: var(--color-focus); }
@media (min-width: 761px) and (max-width: 1100px) {
  .theme-logo .index-layout { grid-template-columns: 184px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .theme-logo .index-rail { position: relative; }
}

/* Parchment mounts introduce a print reference while keeping the canvas red. */
.theme-paper { --color-accent: var(--color-logo-cream); --color-accent-ink: var(--color-logo-black); }
.theme-paper .index-rail,
.theme-paper .index-piece {
  --color-paper: var(--color-logo-cream);
  --color-ink: var(--color-logo-black);
  --color-muted: var(--color-logo-black);
  --color-accent: var(--color-logo-black);
  --color-focus: var(--color-logo-black);
  color: var(--color-ink);
  background: var(--color-paper);
}
.theme-paper .index-rail { border-color: var(--color-logo-cream); }
.theme-paper .index-piece { padding: 12px; }
.theme-paper .index-caption { padding: 20px 4px 12px; }

/* A dark rail and caption strips recall the leather beneath the watches. */
.theme-ink { --color-accent: var(--color-logo-cream); --color-accent-ink: var(--color-logo-black); }
.theme-ink .index-rail,
.theme-ink .index-caption {
  --color-ink: var(--color-logo-cream);
  --color-muted: var(--color-logo-cream);
  --color-accent: var(--color-logo-cream);
  --color-focus: var(--color-logo-cream);
  color: var(--color-ink);
  background: var(--color-logo-wine);
}
.theme-ink .index-rail { border-color: var(--color-logo-wine); }
.theme-ink .index-caption { min-height: 128px; padding: 20px 16px; }
.theme-ink .index-piece > a { height: 100%; background: var(--color-logo-wine); }
.theme-ink .index-piece .index-caption h2 { font-size: clamp(16px, 1.45vw, 22px); }
.theme-ink .index-about h2 { color: var(--color-logo-black); }
.theme-ink .draft-nav { --color-paper: var(--color-logo-wine); }

/* The comparison uses the same sampled body colour as the proposed sites. */
.studio-themes .studio-top .wordmark,
.studio-themes .studio-intro h1 { color: var(--color-logo-black); }
.studio-themes .concept-title > span { color: var(--color-ink); }
.studio-themes .studio-intro h1 { font-family: var(--font-graphic); font-weight: 500; font-size: clamp(44px, 5vw, 72px); letter-spacing: -.055em; }
.studio-themes .concept h2 { font-family: var(--font-graphic); font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
.palette-source { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-size: 12px; }
.palette-source img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--color-rule); }
.studio-archive { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; white-space: nowrap; margin-top: 12px; }
@media (max-width: 760px) {
  .theme-paper .index-caption { padding-top: 16px; }
  .theme-ink .index-caption { min-height: 128px; padding: 16px 12px; }
}
@media (max-width: 430px) {
  .theme-paper .index-piece { padding: 12px; }
  .theme-ink .index-caption { min-height: 108px; }
  .theme-ink .index-piece .index-caption h2 { font-size: 23px; }
}