*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--tissa-white);
  color: var(--tissa-carbon);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

a:hover { color: var(--tissa-carbon); }

:focus-visible {
  outline: 2px solid var(--tissa-carbon);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--tissa-carbon);
  letter-spacing: -0.01em;
}

/* H1 — matches production: Playfair Display italic 700, text-4xl md:text-5xl lg:text-6xl, leading-[1.1] */
h1 {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 2.25rem;    /* 36px — mobile (text-4xl) */
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px)  { h1 { font-size: 3rem; } }     /* 48px — md:text-5xl */
@media (min-width: 1024px) { h1 { font-size: 3.75rem; } }  /* 60px — lg:text-6xl */

/* H2 — same editorial italic, slightly smaller scale */
h2 {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.875rem;   /* 30px — mobile (text-3xl) */
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 768px)  { h2 { font-size: 2.25rem; } }  /* 36px — md:text-4xl */
@media (min-width: 1024px) { h2 { font-size: 3rem; } }     /* 48px — lg:text-5xl */

/* H3 / H4 — upright, used in cards and labels (must stay legible) */
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; }
h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; letter-spacing: 0; }

p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--tissa-carbon); }
.lead { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--tissa-carbon-muted); }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tissa-carbon-muted);
  display: inline-block;
}

code, kbd, samp {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  background: var(--tissa-white);
  border: 1px solid var(--tissa-border);
  padding: 2px 6px;
  border-radius: 2px;
}

.display-xl {
  font-family: var(--ff-display);
  font-size: var(--fs-display-xl);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-m);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--container-pad-t); }
}

@media (min-width: 1024px) {
  .container { padding: 0 var(--container-pad-d); }
}

.container--narrow { max-width: var(--container-narrow); }
.container--text { max-width: var(--container-text); }

.section { padding: var(--space-8) 0; }
.section--tight { padding: var(--space-6) 0; }
.section--bone { background: var(--tissa-white); }
.section--ink { background: var(--tissa-carbon); color: var(--tissa-offwhite); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4, .section--ink p { color: var(--tissa-offwhite); }
.section--ink .eyebrow { color: var(--tissa-border); }

.center { text-align: center; }
.flow > * + * { margin-top: var(--space-3); }
.flow-lg > * + * { margin-top: var(--space-4); }

.divider {
  height: 1px;
  background: var(--tissa-border);
  border: 0;
  width: 100%;
}

.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;
}

/* Brand script wordmark (placeholder for official logo) */
.brand__script {
  font-family: var(--ff-script);
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  color: var(--tissa-carbon);
  letter-spacing: 0;
  padding: 4px 0;
  display: inline-block;
}

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