/* ==========================================================================
   Studio Nordhaus — custom component styles (loaded after the Tailwind CDN).
   Plain CSS only (no @apply, since there is no build step). Solid colors only.
   ========================================================================== */

:root {
  --ink: #16181D;
  --paper: #FAF9F6;
  --sand: #EFEBE4;
  --line: #E2DDD3;
  --muted: #6B6A64;
  --accent: #B4451F;
  --accent-dark: #8F3617;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Section helpers ---------------------------------------------------------- */
.section-eyebrow {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--accent);
}
.section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.65rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: .5rem;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.link-arrow:hover { color: var(--accent); border-color: currentColor; }

/* Rich-text content (blog posts, pages) ------------------------------------ */
.content { color: #2c2e34; line-height: 1.75; font-size: 1.0625rem; }
.content > * + * { margin-top: 1.15rem; }
.content h2 { font-family: 'Fraunces', serif; font-size: 1.6rem; line-height: 1.2; margin-top: 2.2rem; color: var(--ink); }
.content h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; margin-top: 1.8rem; color: var(--ink); }
.content p { margin-top: 1.1rem; }
.content ul, .content ol { margin: 1.1rem 0 1.1rem 1.25rem; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content li { margin-top: .4rem; padding-left: .25rem; }
.content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.content a:hover { color: var(--accent-dark); }
.content blockquote {
  border-left: 3px solid var(--accent);
  padding: .25rem 0 .25rem 1.25rem;
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  color: var(--ink);
}
.content img { width: 100%; height: auto; margin: 1.6rem 0; }
.content strong { color: var(--ink); font-weight: 600; }

/* Forms -------------------------------------------------------------------- */
.field-label { display:block; font-size:.8rem; font-weight:600; color: var(--ink); margin-bottom:.4rem; }
.field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  padding: .7rem .85rem;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .15s;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field::placeholder { color: #a8a59d; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6A64' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right .75rem center; padding-right: 2.2rem; }

/* Flash toasts ------------------------------------------------------------- */
.flash-item { animation: flashIn .3s ease-out; }
.flash-item.hide { animation: flashOut .3s ease-in forwards; }
@keyframes flashIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes flashOut { to { opacity: 0; transform: translateX(12px); } }

/* Utilities ---------------------------------------------------------------- */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}