/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · contrast: pass (40–41) */

/* Hallmark · macrostructure: Split Studio · tone: technical · anchor hue: red
 * genre: editorial · theme: Sport · nav: N6 · footer: Ft1 · enrichment: E8 supplied photography
 * audience: people looking for parts · use: find products and call the shop
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: var(--text-base)/1.6 var(--font-body);
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3, .brand {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: .98;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-title); text-transform: uppercase; }
h2 { font-size: var(--text-sub); }
h3 { font-size: var(--text-sub); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .23em; }
a:hover, a:active { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
[hidden] { display: none; }
.wrap { width: min(100%, var(--content-width)); margin-inline: auto; padding-inline: var(--gutter); }
.dark {
  background: var(--color-dark);
  color: var(--color-light);
}
.dark a:hover, .dark a:active { color: var(--color-signal); }
.dark :focus-visible { outline-color: var(--color-signal); }
.skip {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 2;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink);
}
.skip:not(:focus) { clip-path: inset(50%); }
.mast { background: var(--color-paper); }
.mast-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3) var(--space-2);
}
.mast-logo { display: block; width: clamp(6rem, 10vw, 8rem); }
.brand {
  display: inline-flex;
  align-items: baseline;
  width: fit-content;
  white-space: nowrap;
  font-size: clamp(2.3rem, 5vw, 3.1rem);
  text-decoration: none;
  letter-spacing: -.045em;
}
.brand strong { color: var(--color-accent); }
.head-phone, .nav a, .button, .foot-links a, .text-link { white-space: nowrap; }
.head-phone {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 700 var(--text-sm)/1 var(--font-data);
  font-variant-numeric: tabular-nums;
}
.nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.nav a[aria-current="page"] { color: var(--color-accent); text-decoration: underline; }
.home-hero { padding-block: var(--space-8) var(--space-12); }
.hero-grid, .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.hero-copy h1 { font-size: var(--text-hero); }
.hero-copy h1 span { display: block; color: var(--color-signal); }
.hero-copy p { max-width: 46ch; margin-block: var(--space-5) var(--space-6); font-size: var(--text-lead); color: var(--color-light-muted); }
.hero-photo img { width: 100%; aspect-ratio: 1.48; object-fit: cover; object-position: 56% 50%; }
.hero-photo figcaption {
  padding-block-start: var(--space-2);
  color: var(--color-light-muted);
  font: var(--text-sm)/1.4 var(--font-body);
}
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 48px;
  padding-inline: var(--space-4);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}
.button:is(:hover, :active), .dark .button:is(:hover, :active) { background: var(--color-signal); color: var(--color-dark); }
.button:active, .head-phone:active { transform: translateY(1px); }

.quick-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-block-start: var(--space-4);
  margin-block-start: var(--space-6);
  border-block-start: var(--rule-thin) solid var(--color-dark-rule);
}
.quick-info span { display: block; color: var(--color-light-muted); font-size: var(--text-sm); }
.quick-info a { display: inline-flex; min-height: 44px; align-items: center; }
.section { padding-block: var(--space-12); }
.section-head { display: grid; gap: var(--space-3); align-items: end; margin-block-end: var(--space-6); }
.section-head h2, .footer h2 { font-size: clamp(2.75rem, 6vw, 5rem); text-transform: uppercase; }
.section-head > p { color: var(--color-muted); }
.offer-list { margin: 0; padding: 0; list-style: none; border-block-start: var(--rule-thick) solid var(--color-ink); }
.offer-list li { border-block-end: var(--rule-thin) solid var(--color-rule); }
.offer-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  text-decoration: none;
}
.offer-list a:hover .offer-name, .news-row:hover h2 { text-decoration: underline; text-underline-offset: .15em; }
.offer-name { font: 700 var(--text-sub)/1.1 var(--font-display); white-space: nowrap; }
.offer-note { color: var(--color-muted); grid-row: 2; }
.offer-list .arrow { grid-column: 2; grid-row: 1 / 3; }
.split { padding-block: var(--space-8); }
.shop-section { background: var(--color-surface); }
.shop-section img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.split p { margin-block: var(--space-4); max-width: 46ch; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2); font-weight: 700; }
.page-head { padding-block: var(--space-10); }
.page-head p { margin-block-start: var(--space-4); max-width: 58ch; color: var(--color-light-muted); font-size: var(--text-lead); }
.page-head .text-link { margin-block-end: var(--space-4); }
.content { min-width: 0; }
.prose { max-width: 72ch; display: flow-root; }
.prose > * + * { margin-block-start: var(--space-5); }
.prose p, .prose li { overflow-wrap: anywhere; }
.prose ul { padding-inline-start: var(--space-6); }
.prose li + li { margin-block-start: var(--space-2); }
.prose img { max-height: 32rem; object-fit: contain; }
.prose .lead-photo { width: 100%; }
.prose img.alignright, .prose img.alignleft { margin-block-end: var(--space-2); }
.prose h2 { margin-block-start: var(--space-8); }
.notice { border-block-start: var(--rule-thin) solid var(--color-rule); padding-block-start: var(--space-4); color: var(--color-muted); }
.table-scroll { overflow-x: auto; background: var(--color-surface); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; text-align: start; }
table caption { padding: var(--space-3); text-align: start; font-weight: 700; color: var(--color-light); background: var(--color-dark); }
th, td { padding: var(--space-2) var(--space-3); text-align: start; border-block-end: var(--rule-thin) solid var(--color-rule); }
td { font-family: var(--font-data); white-space: nowrap; }
th { font-size: var(--text-sm); vertical-align: bottom; }
.contact-grid { display: grid; gap: var(--space-8); }
.contact-grid section { min-width: 0; border-block-start: var(--rule-thin) solid var(--color-rule); padding-block-start: var(--space-4); }
.contact-grid h2 { margin-block-end: var(--space-3); }
.contact-grid a { overflow-wrap: anywhere; }
address { font-style: normal; }
.bank { display: block; overflow-wrap: anywhere; font: var(--text-sm)/1.8 var(--font-data); }
.footer { border-block-start: var(--rule-thick) solid var(--color-signal); }
.footer-main {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-8);
}
.footer .brand strong { color: var(--color-signal); }
.footer address { color: var(--color-light-muted); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 38rem) {
  .quick-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-list a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; }
  .offer-note { grid-row: auto; }
  .offer-list .arrow { grid-column: 3; grid-row: 1; }
  .contact-grid, .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose img.alignleft { float: left; max-width: 45%; margin-inline-end: var(--space-5); }
  .prose img.alignright { float: right; max-width: 45%; margin-inline-start: var(--space-5); }
}
@media (min-width: 54rem) {
  .mast-inner { padding-block: var(--space-4) var(--space-2); }
  .nav { gap: var(--space-6); }
  .home-hero { padding-block: var(--space-10) var(--space-16); }
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: var(--space-10); }
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-16); }
  .section { padding-block: var(--space-20); }
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-head { padding-block: var(--space-16); }
}
@media (prefers-reduced-motion: reduce) {
  .button:active, .head-phone:active { transform: none; }
}