/* --- tokens ---------------------------------------------------------------- */
:root {
  --walnut: #5a3826;
  --walnut-ink: #2a1e14;
  --walnut-soft: #845a40;
  --walnut-light: #7a4e34;

  --paper: #fbf7ef;
  --paper-warm: #f3ead4;
  --paper-block: #ece2cb;
  --rule: #c9b18d;
  --mute: #6b5540;

  --text: #1a1612;
  --on-dark: #fbf7ef;

  --f-sans: -apple-system, "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;

  /* scale 1.333 (perfect fourth), base 18px desktop / 17 mobile */
  --t-14: 0.875rem;
  --t-17: 1rem;
  --t-22: 1.333rem;
  --t-30: 1.777rem;
  --t-40: 2.369rem;
  --t-53: 3.157rem;

  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-56: 3.5rem;
  --sp-64: 4rem;
  --sp-96: 6rem;

  --gutter: 20px;
}

@media (min-width: 480px) { :root { --gutter: 24px; } }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1120px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 64px; } }
@media (min-width: 1920px) { :root { --gutter: 96px; } }

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-serif);
  line-height: 1.6;
  font-size: var(--t-17);
}

h1, h2, h3, .h2 {
  font-family: var(--f-sans);
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

p, ul, dl { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: var(--walnut); text-decoration: none; }
a:focus { outline: none; }

.shell {
  width: 100%;
  padding-inline: var(--gutter);
}

/* --- heading stamp: herringbone band over H2 ------------------------------- */
.stamp {
  display: block;
  position: relative;
  padding-top: 32px;
}
.stamp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 20px;
  background:
    linear-gradient(135deg, transparent 44%, var(--walnut) 44%, var(--walnut) 56%, transparent 56%) 0 0 / 20px 20px,
    linear-gradient( 45deg, transparent 44%, var(--walnut) 44%, var(--walnut) 56%, transparent 56%) 20px 0 / 20px 20px;
  background-repeat: repeat-x;
}

/* --- topband --------------------------------------------------------------- */
.topband {
  background: var(--walnut-ink);
  color: var(--on-dark);
}

.topband__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-block: var(--sp-16);
  min-height: 56px;
}

.topband__brand {
  color: var(--on-dark);
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  font-family: var(--f-sans);
}

.topband__name {
  font-size: clamp(0.95rem, 2.2vw + 0.55rem, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.topband__sub {
  font-size: var(--t-14);
  color: #d9c6a9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
}

/* --- pill (header + strip call CTA) ---------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--walnut-ink);
  font-family: var(--f-sans);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pill:hover,
.pill:focus-visible {
  background: #ffffff;
  color: var(--walnut-ink);
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.pill__short { display: inline; }
.pill__num { display: none; }
@media (min-width: 560px) {
  .pill__short { display: none; }
  .pill__num { display: inline; }
}

.pill--light {
  background: var(--paper);
  color: var(--walnut-ink);
}
.pill--light .pill__short { display: none; }
.pill--light .pill__num { display: inline; }

/* --- hero ------------------------------------------------------------------ */
.hero {
  padding-block: var(--sp-48) var(--sp-48);
  background: var(--paper);
}
@media (min-width: 768px) {
  .hero { padding-block: var(--sp-96) var(--sp-64); }
}

.hero__grid {
  display: grid;
  gap: var(--sp-48);
  grid-template-columns: 1fr;
  align-items: center;
}
/* Stay single-column until 1120 px: between 768 and 1120 the H1 "Surma-Parkett."
   at the previous clamp cap overlapped the plank. */
@media (min-width: 1120px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-64);
    align-items: center;
  }
}
@media (min-width: 1440px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-96);
  }
}

.kicker {
  font-family: var(--f-sans);
  color: var(--mute);
  font-size: var(--t-14);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-16);
}

.hero__title {
  font-size: clamp(2rem, 4vw + 0.5rem, 3.3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-24);
  text-wrap: balance;
  line-height: 1.02;
}
.hero__title-top {
  display: block;
  color: var(--text);
}
.hero__title-sub {
  display: block;
  font-family: var(--f-serif);
  font-weight: 400;
  color: #3a2f24;
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.45rem);
  letter-spacing: -0.005em;
  margin-top: var(--sp-16);
  line-height: 1.3;
  max-width: 28ch;
}

.hero__lead {
  font-family: var(--f-serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  color: #2a2420;
  margin-bottom: var(--sp-32);
  max-width: 44ch;
}
.hero__lead .link { color: var(--walnut); }

.hero__cta { margin-bottom: var(--sp-16); }

.hero__fallback {
  font-family: var(--f-sans);
  font-size: var(--t-14);
  color: var(--mute);
  letter-spacing: 0.02em;
  max-width: 36ch;
}

/* --- btn (hero primary) ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 56px;
  padding: 14px 20px;
  border-radius: 6px;
  background: var(--walnut);
  color: var(--on-dark);
  font-family: var(--f-sans);
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.btn:hover,
.btn:focus-visible {
  background: var(--walnut-ink);
  color: var(--on-dark);
  outline: 2px solid var(--walnut);
  outline-offset: 3px;
}
.btn__body { display: inline-flex; flex-direction: column; align-items: flex-start; }
.btn__label {
  font-size: var(--t-14);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d9c6a9;
}
.btn__num {
  font-size: 1.125rem;
}

/* --- Verlegemuster (inline pattern list) --- */
.patterns {
  list-style: none;
  padding: 0;
  margin: 24px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-family: var(--f-sans);
  font-size: 1rem;
  color: var(--walnut-ink);
}
.patterns li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--paper-warm);
  border-left: 3px solid var(--walnut);
  font-weight: 500;
}
.patterns__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--walnut);
  flex-shrink: 0;
}
.patterns__foot {
  margin: 12px 0 0;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  color: var(--walnut);
  font-style: italic;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .patterns li { transition: border-left-width 220ms ease-out, padding-left 220ms ease-out; }
  .patterns li:hover,
  .patterns li:focus-within {
    border-left-width: 5px;
    padding-left: 12px;
  }
}

/* --- plank (hero right): a real herringbone surface with a paper nameplate -- */
/* --- hero photo + works photos -------------------------------------------- */
.hero__photo {
  margin: 0;
  position: relative;
  width: 100%;
  background: var(--walnut-ink);
}
.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
@media (min-width: 900px) {
  .hero__photo img { aspect-ratio: 3 / 4; max-height: 640px; }
}
.photo-caption {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--walnut);
  background: var(--paper-warm, #efe8d9);
  padding: 8px 14px;
  border-top: 1px solid var(--walnut-soft, #b3936f);
  line-height: 1.4;
}

.works {
  padding-block: var(--sp-48);
  border-top: 1px solid var(--walnut-soft, #b3936f);
}
.works__lead {
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--walnut-ink);
  line-height: 1.55;
  margin-bottom: var(--sp-24);
}
.works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-24);
}
@media (min-width: 768px) {
  .works__grid { grid-template-columns: 1fr 1fr; }
}
.work { margin: 0; background: var(--walnut-ink); border: 1px solid var(--walnut-soft, #b3936f); }
.work img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  max-height: 420px;
  object-fit: cover;
}

/* --- h2 section-title ------------------------------------------------------ */
.h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-32);
}

/* --- say section ----------------------------------------------------------- */
.say {
  padding-block: var(--sp-56);
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) { .say { padding-block: var(--sp-96); } }

.say__body {
  font-family: var(--f-serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  color: #26201a;
  max-width: 62ch;
  line-height: 1.55;
  margin-bottom: var(--sp-16);
}
.say__note {
  font-family: var(--f-serif);
  font-size: var(--t-17);
  color: var(--mute);
  max-width: 58ch;
  line-height: 1.55;
}

/* --- reach (contact) section ----------------------------------------------- */
.reach {
  padding-block: var(--sp-56) var(--sp-64);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) { .reach { padding-block: var(--sp-96); } }

.reach__row {
  display: grid;
  gap: var(--sp-48);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .reach__row { grid-template-columns: 1fr 1fr; gap: var(--sp-48); } }
@media (min-width: 1024px) { .reach__row { grid-template-columns: repeat(3, 1fr); gap: var(--sp-64); } }

.reach__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.reach__label {
  font-family: var(--f-sans);
  font-size: var(--t-14);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin: 0;
}

.reach__value {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
  font-weight: 500;
}

.reach__value--hours {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 4px var(--sp-12);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-weight: 500;
}
.reach__value--hours span { line-height: 1.35; }
.reach__dim { color: var(--mute); font-weight: 400; }

.reach__note {
  margin: 0;
  color: var(--mute);
  font-size: var(--t-14);
  font-family: var(--f-sans);
}

/* --- inline link with the herringbone/plank hover underline ---------------- */
/*
  A short walnut plank (two slanted strokes) slides in from the left on
  hover/focus, as if a parquet plank were being laid under the word.
  Reduced motion and no-hover devices get a plain, visible underline instead.
*/
.link {
  position: relative;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 6px;
  display: inline-block;
  line-height: 1.2;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background:
    linear-gradient(135deg, transparent 44%, var(--walnut) 44%, var(--walnut) 56%, transparent 56%) 0 0 / 6px 6px,
    linear-gradient( 45deg, transparent 44%, var(--walnut) 44%, var(--walnut) 56%, transparent 56%) 6px 0 / 6px 6px;
  background-repeat: repeat-x;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.9;
}

/* fallback: static underline on no-hover devices and when motion is reduced */
@media (hover: none) {
  .link { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .link::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .link { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .link::after { display: none; }
}

/* hover + focus twin; only on real hover devices and no reduced motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .link { transition: color 200ms ease-out; }
  .link::after { transition: transform 200ms ease-out; }
  .link:hover::after,
  .link:focus-visible::after {
    transform: scaleX(1);
  }
  .link:hover,
  .link:focus-visible {
    color: var(--walnut);
  }
  .link:focus-visible { outline: none; }
}

/* --- call strip ------------------------------------------------------------ */
.callstrip {
  background: var(--walnut);
  color: var(--on-dark);
  border-top: 1px solid var(--walnut-ink);
  position: relative;
}
/* a herringbone seam ribbon above the walnut band */
.callstrip::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(135deg, transparent 44%, var(--walnut) 44%, var(--walnut) 56%, transparent 56%) 0 0 / 10px 10px,
    linear-gradient( 45deg, transparent 44%, var(--walnut) 44%, var(--walnut) 56%, transparent 56%) 10px 0 / 10px 10px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.callstrip__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  padding-block: var(--sp-32);
}
@media (min-width: 640px) {
  .callstrip__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.callstrip__text {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--on-dark);
  max-width: 28ch;
  margin: 0;
  letter-spacing: -0.005em;
}

/* --- footer ---------------------------------------------------------------- */
.foot {
  background: var(--walnut-ink);
  color: var(--on-dark);
  padding-block: var(--sp-48) var(--sp-32);
}

.foot__grid {
  display: grid;
  gap: var(--sp-32);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-32) var(--sp-48); } }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: 1.1fr 1fr 1.2fr; } }

.foot__brand .foot__name {
  font-family: var(--f-sans);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--sp-8);
  letter-spacing: -0.005em;
}
.foot__label {
  font-family: var(--f-sans);
  font-size: var(--t-14);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a79470;
  margin-bottom: var(--sp-8);
  font-weight: 700;
}
.foot__body {
  font-family: var(--f-sans);
  font-size: var(--t-17);
  color: var(--on-dark);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.foot__ind { color: #c9b18d; font-weight: 500; letter-spacing: 0.02em; }

.foot__link {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: #a79470;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foot__link:hover,
.foot__link:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 2px;
  outline: none;
}

.foot__legal {
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  border-top: 1px solid #3a2a1c;
  font-family: var(--f-sans);
  font-size: var(--t-14);
  color: #c9b18d;
  letter-spacing: 0.01em;
}

/* --- focus rings ----------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--walnut);
  outline-offset: 3px;
}

/* --- motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .pill,
  .btn,
  .foot__link {
    transition: color 150ms ease-out, background-color 150ms ease-out, outline-color 150ms ease-out, text-decoration-color 150ms ease-out;
  }
}