@layer reset, tokens, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, figure { margin: 0; }
  ul { padding: 0; }
  img { display: block; max-inline-size: 100%; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --ink: #1f2b26;
    --ink-soft: #526059;
    --paper: #f6f2ea;
    --surface: #fffdf9;
    --surface-muted: #ece5d9;
    --forest: #24312b;
    --oak: #9a6038;
    --oak-dark: #744323;
    --line: #d9d0c3;
    --focus: #075fdf;
    --shadow: 0 1rem 3rem rgb(36 49 43 / 9%);
    --radius: 1.25rem;
    --max: 74rem;
    --header-height: 5.25rem;
  }
}

@layer base {
  html { scroll-padding-block-start: calc(var(--header-height) + 1rem); }

  body {
    min-inline-size: 20rem;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.15;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.04em; }
  h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -.025em; }
  h3 { font-size: 1.2rem; }
  p, li { text-wrap: pretty; }

  a {
    color: var(--oak-dark);
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
  }

  a:hover { color: var(--oak); }

  :where(a, button):focus-visible {
    border-radius: .35rem;
    outline: .2rem solid var(--focus);
    outline-offset: .2rem;
  }

  ::selection { background: #d8b493; color: var(--ink); }
}

@layer layout {
  .container {
    inline-size: min(calc(100% - 2.5rem), var(--max));
    margin-inline: auto;
  }

  .legal-main { padding-block-end: clamp(4rem, 8vw, 7rem); }

  .reference-main { padding-block-end: clamp(4rem, 8vw, 7rem); }

  .reference-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .legal-grid {
    display: grid;
    grid-template-columns: minmax(13rem, .35fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .legal-content { display: grid; gap: 1.25rem; }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 1000;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    translate: 0 -200%;
    border-radius: .5rem;
    background: var(--surface);
    color: var(--ink);
    padding: .75rem 1rem;
    box-shadow: var(--shadow);
    font-weight: 750;
  }

  .skip-link:focus { translate: 0; }

  .site-header {
    position: sticky;
    z-index: 100;
    inset-block-start: 0;
    border-block-end: 1px solid rgb(36 49 43 / 10%);
    background: rgb(246 242 234 / 92%);
    backdrop-filter: blur(1rem);
  }

  .header-inner {
    display: flex;
    min-block-size: var(--header-height);
    align-items: center;
    gap: 2rem;
  }

  .brand { display: block; flex: 0 0 auto; text-decoration: none; }
  .brand__art, .brand__image { display: block; }
  .brand__image { inline-size: clamp(14rem, 23vw, 20rem); block-size: auto; }

  .site-nav { margin-inline-start: auto; }
  .site-nav__list { display: flex; align-items: center; gap: clamp(.8rem, 1.8vw, 1.5rem); list-style: none; }
  .site-nav a { color: var(--ink); font-size: .94rem; font-weight: 720; text-decoration: none; }
  .site-nav a:hover { color: var(--oak-dark); }

  .button {
    display: inline-flex;
    min-block-size: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .7rem 1.2rem;
    background: var(--oak);
    color: #fff;
    font-weight: 760;
    line-height: 1.2;
    text-decoration: none;
  }

  .button:hover { background: var(--oak-dark); color: #fff; }
  .mobile-home { display: none; margin-inline-start: auto; }

  .legal-hero {
    position: relative;
    overflow: hidden;
    border-block-end: 1px solid rgb(36 49 43 / 8%);
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background:
      linear-gradient(90deg, rgb(246 242 234 / 94%), rgb(246 242 234 / 68%)),
      url("tischler-hobelbank-bei-der-arbeit.webp") center 55% / cover no-repeat;
  }

  .legal-hero::before {
    display: block;
    inline-size: 5rem;
    block-size: .3rem;
    margin-block-end: 1.5rem;
    border-radius: 999px;
    background: var(--oak);
    content: "";
  }

  .eyebrow {
    display: block;
    margin-block-end: .75rem;
    color: var(--oak-dark);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .legal-hero p { max-inline-size: 65ch; margin-block-start: 1.25rem; color: var(--ink-soft); font-size: 1.08rem; }

  .legal-section { padding-block-start: clamp(3rem, 6vw, 5rem); }

  .reference-section { padding-block-start: clamp(3rem, 6vw, 5rem); }

  .reference-intro {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(18rem, 1.2fr);
    gap: 1.5rem 3rem;
    align-items: end;
    margin-block-end: clamp(2rem, 5vw, 3.5rem);
  }

  .reference-intro p { color: var(--ink-soft); }

  .reference-card {
    overflow: hidden;
    border: 1px solid rgb(36 49 43 / 8%);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .reference-card__image {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .reference-card__body { padding: clamp(1.4rem, 3vw, 2rem); }
  .reference-card__body h2 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); }
  .reference-card__body h2 + p { margin-block-start: .75rem; }
  .reference-card__body p { color: var(--ink-soft); }

  .project-gallery-section {
    border-block-start: 1px solid var(--line);
    background: var(--surface-muted);
    padding: clamp(1.25rem, 3vw, 2rem);
  }

  .project-gallery-heading {
    margin-block-end: 1rem;
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  }

  .project-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 58rem;
    margin-inline: auto;
    gap: 1rem;
    align-items: start;
  }

  .project-gallery figure {
    overflow: hidden;
    border: 1px solid rgb(36 49 43 / 9%);
    border-radius: .9rem;
    background: var(--surface);
  }

  .project-gallery__image {
    overflow: hidden;
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    background: var(--surface);
  }

  .project-gallery__image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .project-gallery figcaption {
    padding: .8rem 1rem 1rem;
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.5;
  }

  .reference-category {
    display: block;
    margin-block-end: .55rem;
    color: var(--oak-dark);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .reference-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem 2rem;
    align-items: center;
    margin-block-start: clamp(2rem, 5vw, 3.5rem);
    border-radius: var(--radius);
    background: var(--forest);
    color: #fff;
    padding: clamp(1.75rem, 5vw, 3rem);
  }

  .reference-cta h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
  .reference-cta p { max-inline-size: 60ch; margin-block-start: .65rem; color: rgb(255 255 255 / 76%); }

  .legal-nav-card,
  .legal-card {
    border: 1px solid rgb(36 49 43 / 8%);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .legal-nav-card {
    position: sticky;
    inset-block-start: calc(var(--header-height) + 1.5rem);
    padding: 1.4rem;
  }

  .legal-nav-card strong { display: block; margin-block-end: .75rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
  .legal-nav-card ul { display: grid; gap: .5rem; list-style: none; }
  .legal-nav-card a { display: block; border-radius: .5rem; padding: .35rem .5rem; text-decoration: none; }
  .legal-nav-card a:hover { background: var(--surface-muted); }

  .legal-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
  .legal-card h2 + *, .legal-card h3 + * { margin-block-start: .9rem; }
  .legal-card p + p, .legal-card ul + p, .legal-card p + ul { margin-block-start: .9rem; }
  .legal-card ul { padding-inline-start: 1.2rem; }
  .legal-card li + li { margin-block-start: .45rem; }
  .legal-card address { margin-block-start: .9rem; font-style: normal; }
  .legal-card address span { display: block; }

  .notice {
    border-inline-start: .3rem solid var(--oak);
    background: var(--surface-muted);
    padding: 1rem 1.2rem;
  }

  .site-footer { background: #18211d; color: rgb(255 255 255 / 77%); padding-block: 3rem; }
  .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
  .footer-brand { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; }
  .footer-copy { max-inline-size: 46ch; margin-block-start: .5rem; }
  .footer-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; list-style: none; }
  .footer-nav a { color: #fff; }
  .footer-meta { grid-column: 1 / -1; border-block-start: 1px solid rgb(255 255 255 / 13%); padding-block-start: 1.25rem; font-size: .88rem; }
}

@layer responsive {
  @media (max-width: 58rem) {
    :root { --header-height: 4.6rem; }
    .brand__image { inline-size: clamp(8rem, 32vw, 10rem); }
    .site-nav, .header-cta { display: none; }
    .mobile-home { display: inline-flex; }
    .legal-grid { grid-template-columns: 1fr; }
    .reference-intro { grid-template-columns: 1fr; align-items: start; }
    .legal-nav-card { position: static; }
    .legal-nav-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 38rem) {
    .container { inline-size: min(calc(100% - 1.5rem), var(--max)); }
    .reference-cta { grid-template-columns: 1fr; align-items: start; }
    .reference-cta .button { inline-size: 100%; }
    .project-gallery { grid-template-columns: 1fr; }
    .mobile-home { min-block-size: 2.7rem; padding-inline: .9rem; font-size: .9rem; }
    .legal-nav-card ul { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; align-items: start; }
    .footer-meta { grid-column: auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  }
}