@layer reset, base, primitives;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100vh; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { text-decoration: none; color: inherit; }
  ul, ol { list-style: none; }
  h1, h2, h3, h4, h5, h6 { font-weight: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  table { border-collapse: collapse; border-spacing: 0; }
  blockquote, q { quotes: none; }
  blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --color-ink: #121212;
    --color-charcoal: #1E1E1E;
    --color-charcoal-soft: #2A2A2A;
    --color-bone: #F2EDE4;
    --color-bone-muted: #B8B0A4;
    --color-brass: #C6A15B;
    --color-brass-deep: #9E7B3C;
    --color-green-felt: #1F3A32;
    --color-green-felt-deep: #142822;
    --color-burgundy: #4A1F2A;
    --color-burgundy-deep: #32141C;
    --color-wood: #6B4A2F;
    --color-wood-light: #8C6844;
    --color-error: #D96B5B;

    --font-heading: 'Cormorant Garamond', 'Times New Roman', serif;
    --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    --text-display-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    --text-h1-size: clamp(2.125rem, 3.5vw + 0.75rem, 3.5rem);
    --text-h2-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
    --text-h3-size: clamp(1.5rem, 1.5vw + 0.5rem, 1.75rem);
    --text-h4-size: 1.25rem;
    --text-body-large-size: 1.125rem;
    --text-body-size: 1rem;
    --text-small-size: 0.875rem;
    --text-caption-size: 0.75rem;
    --text-button-size: 0.875rem;

    --text-display-line-height: 1.05;
    --text-h1-line-height: 1.1;
    --text-h2-line-height: 1.15;
    --text-h3-line-height: 1.2;
    --text-h4-line-height: 1.3;
    --text-body-large-line-height: 1.65;
    --text-body-line-height: 1.65;
    --text-small-line-height: 1.5;
    --text-caption-line-height: 1.4;
    --text-button-line-height: 1;

    --text-display-letter-spacing: -0.02em;
    --text-h1-letter-spacing: -0.015em;
    --text-h2-letter-spacing: -0.01em;
    --text-h3-letter-spacing: 0;
    --text-h4-letter-spacing: 0.01em;
    --text-body-large-letter-spacing: 0;
    --text-body-letter-spacing: 0;
    --text-small-letter-spacing: 0.01em;
    --text-caption-letter-spacing: 0.08em;
    --text-button-letter-spacing: 0.06em;

    --space-2: 0.125rem;
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --space-96: 6rem;
    --space-128: 8rem;
    --space-160: 10rem;

    --container-max: 1200px;
    --container-padding-mobile: 24px;
    --container-padding-tablet: 40px;
    --container-padding-desktop: 64px;

    --radius-card: 4px;
    --radius-button: 2px;
    --radius-input: 2px;
    --radius-tag: 2px;
    --radius-image-contained: 4px;

    --border-wood-40: 1px solid rgba(107, 74, 47, 0.4);
    --border-wood-50: 1px solid rgba(107, 74, 47, 0.5);
    --border-charcoal-soft: 1px solid #2A2A2A;
    --border-brass-30: 1px solid rgba(198, 161, 91, 0.3);
    --border-brass: 1px solid #C6A15B;

    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);

    --transition-fast: 180ms ease-out;
    --transition-drawer: 220ms ease-out;
    --transition-lightbox: 200ms ease-out;
    --transition-reveal: 300ms ease-out;

    --focus-outline: 2px solid #C6A15B;
    --focus-offset: 2px;
  }

  body {
    background-color: var(--color-ink);
    color: var(--color-bone);
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    font-weight: 400;
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-bone);
  }

  h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    letter-spacing: var(--text-h1-letter-spacing);
    font-weight: 500;
    margin-block-end: var(--space-24);
  }

  h2 {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    letter-spacing: var(--text-h2-letter-spacing);
    font-weight: 500;
    margin-block-end: var(--space-24);
  }

  h3 {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    letter-spacing: var(--text-h3-letter-spacing);
    font-weight: 600;
    margin-block-end: var(--space-16);
  }

  h4 {
    font-family: var(--font-body);
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
    letter-spacing: var(--text-h4-letter-spacing);
    font-weight: 600;
    margin-block-end: var(--space-12);
  }

  p {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
    margin-block-end: var(--space-16);
  }

  p:last-child { margin-block-end: 0; }

  .text-large {
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
    margin-block-end: var(--space-16);
  }

  .text-small {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
    margin-block-end: var(--space-12);
  }

  .caption {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line-height);
    letter-spacing: var(--text-caption-letter-spacing);
    font-weight: 500;
    text-transform: uppercase;
    margin-block-end: var(--space-8);
  }

  a {
    color: var(--color-bone);
    text-decoration: underline;
    text-decoration-color: var(--color-brass);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
  }

  a:hover {
    color: var(--color-bone);
    text-decoration-color: var(--color-brass-deep);
  }

  a:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-button);
  }

  ul, ol {
    margin-block-end: var(--space-16);
    padding-inline-start: var(--space-24);
  }

  ul { list-style: disc; }
  ol { list-style: decimal; }

  ul:last-child, ol:last-child { margin-block-end: 0; }

  blockquote {
    margin-block-end: var(--space-16);
    padding-inline-start: var(--space-24);
    border-inline-start: 2px solid var(--color-brass);
    color: var(--color-bone-muted);
    font-style: italic;
  }

  blockquote:last-child { margin-block-end: 0; }

  strong { font-weight: 600; }
  em { font-style: italic; }

  small {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
  }

  hr {
    border: none;
    border-top: 1px solid rgba(198, 161, 91, 0.3);
    margin-block: var(--space-32);
  }

  img {
    border-radius: 0;
  }

  img.contained {
    border-radius: var(--radius-image-contained);
  }

  figure {
    margin-block-end: var(--space-24);
  }

  figcaption {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line-height);
    letter-spacing: var(--text-caption-letter-spacing);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-bone-muted);
    margin-block-start: var(--space-8);
  }

  input, textarea, select {
    background-color: var(--color-charcoal-soft);
    border: 1px solid var(--color-wood);
    border-radius: var(--radius-input);
    color: var(--color-bone);
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
    padding: var(--space-12) var(--space-16);
    width: 100%;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
  }

  input::placeholder, textarea::placeholder {
    color: var(--color-bone-muted);
  }

  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-brass);
  }

  input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }

  input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--color-error);
  }

  label {
    display: block;
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
    color: var(--color-bone);
    margin-block-end: var(--space-8);
  }

  fieldset {
    border: none;
    margin-block-end: var(--space-24);
  }

  legend {
    font-family: var(--font-heading);
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
    letter-spacing: var(--text-h4-letter-spacing);
    font-weight: 600;
    color: var(--color-bone);
    margin-block-end: var(--space-12);
  }

  button {
    font-family: var(--font-body);
    font-size: var(--text-button-size);
    line-height: var(--text-button-line-height);
    letter-spacing: var(--text-button-letter-spacing);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-button);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  }

  button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }

  table {
    width: 100%;
    margin-block-end: var(--space-24);
  }

  th, td {
    padding: var(--space-12) var(--space-16);
    text-align: start;
    border-bottom: var(--border-charcoal-soft);
  }

  th {
    font-family: var(--font-body);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-bone-muted);
  }

  td {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
  }

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

@layer primitives {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
  }

  @media (min-width: 768px) {
    .container {
      padding-inline: var(--container-padding-tablet);
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-inline: var(--container-padding-desktop);
    }
  }

  .section {
    padding-block: var(--space-48);
  }

  @media (min-width: 768px) {
    .section {
      padding-block: var(--space-64);
    }
  }

  @media (min-width: 1024px) {
    .section {
      padding-block: var(--space-96);
    }
  }

  .card {
    background-color: var(--color-charcoal);
    border: var(--border-wood-40);
    border-radius: var(--radius-card);
    padding: var(--space-24);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
  }

  .card:hover {
    background-color: var(--color-charcoal-soft);
    border-color: var(--color-brass);
  }

  .card > :last-child { margin-block-end: 0; }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-24);
    border-radius: var(--radius-button);
    font-family: var(--font-body);
    font-size: var(--text-button-size);
    line-height: var(--text-button-line-height);
    letter-spacing: var(--text-button-letter-spacing);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    min-height: 44px;
  }

  .btn--primary {
    background-color: var(--color-brass);
    color: var(--color-ink);
    border: 1px solid var(--color-brass);
  }

  .btn--primary:hover {
    background-color: var(--color-brass-deep);
    border-color: var(--color-brass-deep);
    color: var(--color-ink);
  }

  .btn--secondary {
    background-color: transparent;
    color: var(--color-bone);
    border: 1px solid var(--color-brass);
  }

  .btn--secondary:hover {
    background-color: var(--color-charcoal-soft);
    border-color: var(--color-brass-deep);
    color: var(--color-bone);
  }

  .btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }

  .tag {
    display: inline-block;
    background-color: var(--color-green-felt);
    color: var(--color-bone);
    border-radius: var(--radius-tag);
    font-family: var(--font-body);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line-height);
    letter-spacing: var(--text-caption-letter-spacing);
    font-weight: 500;
    text-transform: uppercase;
    padding: var(--space-8) var(--space-12);
  }

  .divider {
    border: none;
    border-top: 1px solid rgba(198, 161, 91, 0.3);
    margin-block: var(--space-32);
  }

  .divider--wood {
    border-top: 1px solid rgba(107, 74, 47, 0.5);
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
  }

  .flex > * {
    min-width: 0;
    flex-shrink: 1;
  }

  .flex--align-center {
    align-items: center;
  }

  .flex--justify-between {
    justify-content: space-between;
  }

  .flex--justify-center {
    justify-content: center;
  }

  .flex--column {
    flex-direction: column;
  }

  .flex--nowrap {
    flex-wrap: nowrap;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-16);
    z-index: 1000;
    background-color: var(--color-brass);
    color: var(--color-ink);
    padding: var(--space-12) var(--space-24);
    border-radius: var(--radius-button);
    font-family: var(--font-body);
    font-size: var(--text-button-size);
    line-height: var(--text-button-line-height);
    letter-spacing: var(--text-button-letter-spacing);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: top var(--transition-fast);
  }

  .skip-link:focus {
    top: var(--space-16);
  }

  .overlay {
    background-color: rgba(18, 18, 18, 0.45);
  }

  .overlay--deep {
    background-color: rgba(18, 18, 18, 0.65);
  }

  .gradient-hero {
    background: linear-gradient(to top, var(--color-ink) 0%, transparent 100%);
  }

  .error-text {
    color: var(--color-error);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-letter-spacing);
    margin-block-start: var(--space-4);
  }
}