/* Entwurf 1 – Schriftzug. System: design/1.md. Every value is a :root token. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-normal-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-normal-400-600.woff2") format("woff2");
}

:root {
  --c-ground: #e4e3df;
  --c-paper: #f3f2ef;
  --c-ink: #1a1a19;
  --c-ink-2: #4b4a47;
  --c-red: #c70204;
  --c-line: #a3a19b;
  --c-white: #ffffff;
  color-scheme: light;

  --font-sign: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  --fs--1: .797rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.417rem;
  --fs-2: 1.889rem;
  --fs-3: 2.518rem;
  --fs-4: clamp(2rem, 5vw, 3.357rem);
  --fs-5: clamp(2.518rem, 7vw, 5.968rem);
  --fs-mark: 24.3cqi;
  --fs-mark-sm: 47cqi;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;

  --gutter: 1.5rem;
  --margin: clamp(1rem, 4vw, 3rem);
  --max: 90rem;
  --radius: 2px;
  --track-mark: -.01em;
  --track-head: .005em;
  --rule: 1px;
  --focus: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-ground);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: var(--focus) solid var(--c-ink); outline-offset: var(--focus); }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.wrap { width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto; }

.skip {
  position: absolute; left: var(--s-3); top: calc(var(--s-9) * -1);
  padding: var(--s-2) var(--s-3); background: var(--c-ink); color: var(--c-white);
}
.skip:focus { top: var(--s-3); }

/* Top bar */
.top { border-bottom: var(--rule) solid var(--c-line); }
.top__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-3); }
.top__nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.top__nav a { text-decoration: none; display: inline-block; padding-block: var(--s-2); }
.top__nav ul a:hover { text-decoration: underline; }
.top__tel { font-weight: 600; white-space: nowrap; }
@media (max-width: 40rem) {
  .top__nav ul { display: none; }
}

/* Wordmark */
.hero { container-type: inline-size; padding-top: var(--s-6); }
.mark {
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: var(--fs-mark);
  line-height: .86;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-red);
}
.hero__row {
  display: grid; gap: var(--s-5) var(--gutter);
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: var(--rule) solid var(--c-ink);
}
.hero__lead {
  font-family: var(--font-sign);
  font-size: var(--fs-3);
  line-height: 1.05;
  letter-spacing: var(--track-head);
  margin-bottom: var(--s-3);
}
.hero__claim p:last-child { max-width: 40ch; font-size: var(--fs-1); line-height: 1.4; color: var(--c-ink-2); }
.hero__btns { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 64rem) {
  .hero__row { grid-template-columns: repeat(12, 1fr); }
  .hero__claim { grid-column: 1 / span 7; }
  .hero__act { grid-column: 8 / span 5; }
}

.status { display: flex; align-items: baseline; gap: var(--s-2); font-weight: 600; }
.status__dot {
  flex: none; width: .7em; height: .7em; border-radius: 50%;
  background: var(--c-ink-2);
}
[data-state="open"] .status__dot { background: var(--c-red); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--c-red);
  border-radius: var(--radius);
  font-weight: 600; text-decoration: none; line-height: 1.2;
}
.btn--red { background: var(--c-red); color: var(--c-white); }
.btn--red:hover { background: var(--c-ink); border-color: var(--c-ink); }
.btn--line { border-color: var(--c-ink); }
.btn--line:hover { background: var(--c-ink); color: var(--c-ground); }

/* Diagnosis feature: the one substantial idea below the sign */
.diag { padding-block: var(--s-9) var(--s-8); }
.diag__title {
  max-width: 16ch;
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: var(--fs-5);
  line-height: 1;
  letter-spacing: var(--track-head);
  color: var(--c-red);
  margin-bottom: var(--s-7);
}
.diag__cols { display: grid; gap: var(--s-5) var(--gutter); padding-top: var(--s-4); border-top: var(--rule) solid var(--c-ink); }
.diag h3 { font-size: var(--fs-1); font-weight: 600; line-height: 1.3; margin-bottom: var(--s-2); }
.diag p { color: var(--c-ink-2); max-width: 40ch; }
@media (min-width: 64rem) {
  .diag__cols { grid-template-columns: repeat(3, 1fr); }
}

/* Headings */
.h2 {
  font-family: var(--font-sign);
  font-weight: 400;
  font-size: var(--fs-3);
  line-height: 1.05;
  letter-spacing: var(--track-head);
  margin-bottom: var(--s-5);
}

/* Service index: the shop sign's list of trades */
.more { display: grid; gap: var(--s-3) var(--gutter); padding-bottom: var(--s-8); }
.index { border-top: var(--rule) solid var(--c-ink); }
.index li {
  display: grid; gap: var(--s-1) var(--gutter); align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: var(--rule) solid var(--c-line);
}
.index__name {
  font-family: var(--font-sign);
  font-size: var(--fs-3);
  line-height: 1.05;
  letter-spacing: var(--track-head);
  color: var(--c-red);
}
.index__text { color: var(--c-ink-2); max-width: 46ch; }
@media (min-width: 48rem) {
  .index li { grid-template-columns: minmax(12rem, 5fr) 7fr; }
}
@media (min-width: 64rem) {
  .more { grid-template-columns: repeat(12, 1fr); }
  .more .h2 { grid-column: 1 / span 3; max-width: 9ch; }
  .index { grid-column: 4 / span 9; }
}

/* About */
.about { padding-block: var(--s-8); border-top: var(--rule) solid var(--c-ink); display: grid; gap: var(--s-3) var(--gutter); }
.about .h2 { max-width: 14ch; }
.about__text { display: grid; gap: var(--s-3); max-width: 60ch; }
.about__lead { font-size: var(--fs-1); line-height: 1.4; font-weight: 600; }
@media (min-width: 64rem) {
  .about { grid-template-columns: repeat(12, 1fr); }
  .about .h2 { grid-column: 1 / span 5; }
  .about__text { grid-column: 7 / span 6; }
}

/* Hours + contact */
.visit { display: grid; gap: var(--gutter); padding-bottom: var(--s-8); }
.hours, .contact { padding: var(--s-5); background: var(--c-paper); }
.hours .status { margin-bottom: var(--s-4); }
.hours dl { display: grid; gap: var(--s-1) var(--s-4); font-variant-numeric: tabular-nums; }
.hours dt { font-weight: 600; }
.hours dd { color: var(--c-ink-2); margin-bottom: var(--s-2); }
.contact > p:first-of-type { color: var(--c-ink-2); margin-bottom: var(--s-3); }
.contact address { display: grid; gap: var(--s-1); font-style: normal; }
.contact__big { font-family: var(--font-sign); font-size: var(--fs-3); line-height: 1.1; text-decoration: none; color: var(--c-red); }
.contact__big:hover { text-decoration: underline; }
@media (min-width: 48rem) {
  .visit { grid-template-columns: 1fr 1fr; }
  .hours dl { grid-template-columns: max-content 1fr; }
  .hours dd { margin-bottom: 0; }
}

/* Footer */
.foot { background: var(--c-ink); color: var(--c-ground); container-type: inline-size; padding-top: var(--s-7); overflow: hidden; }
.foot .wrap { container-type: inline-size; }
.foot a:focus-visible { outline-color: var(--c-ground); }
.imp h2 { font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-2); letter-spacing: var(--track-head); margin-bottom: var(--s-4); }
.imp dl { display: grid; gap: var(--s-1) var(--s-4); font-size: var(--fs--1); }
.imp dt { font-weight: 600; }
.imp dd { margin-bottom: var(--s-2); overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .imp dl { grid-template-columns: max-content 1fr; max-width: 60rem; }
  .imp dd { margin-bottom: 0; }
}
.foot__note { margin-top: var(--s-5); font-size: var(--fs--1); max-width: 70ch; }
.mark--foot { color: var(--c-ground); margin-top: var(--s-7); padding-bottom: var(--s-3); }
@media (max-width: 40rem) {
  .mark { font-size: var(--fs-mark-sm); }
  .mark span { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}