:root {
  --bg: #F3EFE8;
  --bg-alt: #ffffff;
  --ink: #2A2926;
  --ink-soft: #6b6459;
  --border: #B8B0A5;
  --btn-dark: #222220;
  --btn-dark-text: #F7F4EF;
  --radius: 0;
  --max-width: 1440px;
  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  padding-bottom: 22px;
  gap: 24px;
  flex-wrap: wrap;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.logo-mark { display: block; flex-shrink: 0; }
.logo-text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.main-nav { display: flex; justify-content: flex-end; flex: 1; gap: 40px; }
.main-nav a {
  font-family: var(--font-body);
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--ink);
}
.main-nav a:hover, .main-nav a.active { color: var(--ink-soft); }
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
}

/* Mobile slide-in nav panel */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 41, 38, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 999;
}
.mobile-nav-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 62%;
  max-width: 320px;
  min-width: 240px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.06);
  padding: 28px 28px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  z-index: 1000;
}
.mobile-nav-panel.is-open { transform: translateX(0); }
.mobile-nav-close {
  align-self: flex-end;
  background: none;
  border: none;
  padding: 6px;
  margin-bottom: 40px;
  cursor: pointer;
}
.mobile-nav-links { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; gap: 36px; }
.mobile-nav-links a {
  font-family: var(--font-body);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}
.mobile-nav-links a:hover, .mobile-nav-links a.active { color: var(--ink-soft); }

body.nav-open { overflow: hidden; }

@media (min-width: 769px) {
  .mobile-nav-panel { display: none; }
  .mobile-nav-overlay { display: none; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 48px 0 32px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand .logo { margin-bottom: 16px; }
.footer-tagline {
  margin: 0;
  max-width: 320px;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col h4 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.footer-col a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { text-decoration: none; color: var(--ink-soft); }
.footer-legal a:hover { color: var(--ink); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-legal { gap: 28px; }
}

/* Hero (split: content aligned to the site container, photo full-bleed to the browser's right edge) */
.hero-split {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: stretch;
  min-height: 620px;
}
.hero-split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 24px;
  padding-left: max(24px, calc((100vw - 1440px) / 2 + 24px));
}
.hero-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
}
.hero-heading-main { font-size: clamp(2.6rem, 5vw, 4rem); margin-bottom: 8px; }
.hero-heading-sub { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 24px; }
.hero-divider { width: 90px; height: 1px; background: var(--border); margin-bottom: 24px; }
.hero-copy {
  max-width: 380px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 32px;
}
.hero-btn {
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  padding: 17px 34px;
}
.hero-split-media { position: relative; overflow: hidden; }
.hero-split-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}
.hero-placeholder {
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: repeating-linear-gradient(135deg, #e9e4da, #e9e4da 14px, #ddd6c9 14px, #ddd6c9 28px);
}

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
  .hero-split-content { padding: 40px 24px; }
  .hero-placeholder { min-height: 320px; }
}

/* About preview (mirrored hero: photo full-bleed to the browser's left edge, text aligned to the site container) */
.about-split {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 620px;
}
.about-split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 24px 48px 64px;
  padding-right: max(24px, calc((100vw - 1440px) / 2 + 24px));
}
.about-split-media { position: relative; overflow: hidden; }
.about-split-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; min-height: auto; }
  .about-split-content { padding: 40px 24px; text-align: right; }
  .about-split-content .hero-divider { margin-left: auto; }
  .about-split-content .hero-btn { align-self: flex-end; }
}

/* About preview, no photo set — text spans the full site content width instead of a narrow column. */
.about-plain { padding: 64px 0; }
.about-plain-content { max-width: none; }
.about-plain-content .hero-copy { max-width: 640px; }

/* Simple content-page intro (Contact, About): photo floats right, same height as the hero
   photo; long text simply wraps below the photo instead of stretching the section taller.
   When a photo IS set, the page's view renders this with the .page-hero-bleed modifier and
   places the section outside the normal .container, so the photo can reach the true browser
   edge exactly like the homepage hero. When no photo is set, the view keeps this inside the
   normal .container instead (see the page's own view) and this modifier is absent. */
.page-hero {
  overflow: hidden;
  margin: 48px 0;
}
.page-hero.page-hero-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.page-hero-media {
  float: right;
  width: 52%;
  height: 620px;
  margin-left: 48px;
  margin-bottom: 24px;
  overflow: hidden;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-content { padding-top: 8px; }
.page-hero-bleed .page-hero-content {
  /* Both edges align to where the standard 1440px container would sit, not the raw 100vw
     section — so once long text wraps below the (fixed-height) photo and has the full row
     width available, it still tops out at the site's normal working-area width instead of
     stretching to the true browser edge. Photo still floats past this on the right, since
     .page-hero-media itself isn't bound by this padding. */
  padding-left: max(24px, calc((100vw - 1440px) / 2 + 24px));
  padding-right: max(24px, calc((100vw - 1440px) / 2 + 24px));
}
.page-hero-content .hero-heading-main { margin-bottom: 20px; }
.page-body { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.75; overflow-wrap: anywhere; }
.page-body p { margin: 0 0 16px; }
.page-body ul, .page-body ol { margin: 0 0 16px 20px; }
.page-body a { color: var(--ink); text-decoration: underline; }

@media (max-width: 900px) {
  .page-hero-media { float: none; width: 100%; height: 340px; margin: 0 0 24px; }
}

/* "Choose Your Format" category showcase */
.format-section { padding: 64px 0; }
.format-eyebrow {
  text-align: center;
  margin-bottom: 40px;
}
.format-eyebrow span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 12px;
}
.format-eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--border);
  margin: 0 auto;
}
.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.format-card { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 75%; margin: 0 auto; }
.format-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.3;
  overflow: hidden;
  border-radius: var(--radius);
}
.format-card-media img { width: 100%; height: 100%; object-fit: cover; }
.format-card-media .hero-placeholder { min-height: 0; border-radius: var(--radius); }
.format-btn {
  display: block;
  width: 50%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  padding: 18px 24px;
}

@media (max-width: 640px) {
  .format-grid { grid-template-columns: 1fr; }
  .format-btn { width: auto; max-width: 100%; white-space: nowrap; padding: 18px 20px; }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--btn-dark); color: var(--btn-dark-text); }
.btn-primary:hover { background: #3a3835; }
.btn-outline { border-color: var(--border); background: var(--bg-alt); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink-soft); }
.btn-block { display: block; width: 100%; text-align: center; }

/* Product grid */
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  margin: 48px 0 20px;
  letter-spacing: -0.01em;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.product-card {
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease;
}
.product-card:hover {
  transform: translateY(-2px);
}
.product-card .thumb {
  aspect-ratio: 1 / 1;
  background: #eee repeating-linear-gradient(45deg,#eee,#eee 10px,#e6e6e6 10px,#e6e6e6 20px);
  overflow: hidden;
  position: relative;
}
.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--btn-dark);
  color: var(--btn-dark-text);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  letter-spacing: 0.02em;
}
.discount-badge-inline { position: static; display: inline-block; vertical-align: middle; margin-left: 4px; }
.price-original {
  color: var(--ink-soft);
  text-decoration: line-through;
  font-weight: 500;
}
.price-current { color: var(--ink); margin-right: 20px; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .info { padding: 14px 0 16px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.product-card .category-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.product-card .title { font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.product-card .price { font-family: var(--font-body); margin-top: auto; font-weight: 700; color: var(--ink); }

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-soft);
}

/* Category chips */
.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 8px;
}
.category-nav a {
  padding: 7px 16px;
  border-radius: 0;
  border: 1px solid var(--border);
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--bg-alt);
}
.category-nav a.active, .category-nav a:hover { border-color: var(--ink); color: var(--ink); }

/* Filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 24px 0;
}
.filter-bar input[type=text], .filter-bar input[type=number], .filter-bar select {
  font-family: var(--font-body);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--ink);
}
.filter-bar .price-range { display: flex; align-items: center; gap: 6px; }
.filter-bar .price-range input { width: 90px; }

/* Collection page intro + tag-group pill filter */
.collection-description {
  max-width: 640px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.tag-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 48px;
}
.tag-pill {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
}
.tag-pill.active {
  background: var(--btn-dark);
  border-color: var(--btn-dark);
  color: var(--btn-dark-text);
}
.tag-pill:not(.active):hover { border-color: var(--ink); }
.tag-pill-group { position: relative; }
.tag-pill-group .tag-pill { width: 100%; }
.tag-pill-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 180px;
  /* No gap between the pill and this box — an actual margin/top-offset here would create a
     dead zone the cursor has to cross, and losing :hover there is what closed the dropdown
     before a checkbox could be reached. The 8px visual gap is padding-top instead, so the
     hoverable area stays unbroken all the way from the pill into the list. */
  padding-top: 8px;
}
.tag-pill-group:hover .tag-pill-dropdown,
.tag-pill-dropdown.open {
  display: block;
}
.tag-pill-dropdown-inner {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  padding: 8px;
}
.tag-pill-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.tag-pill-option:hover { background: var(--bg); }
.tag-pill-option input { width: auto; cursor: pointer; }

/* Product detail */
.product-detail { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: 48px; margin: 40px 0; }
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }
.gallery { display: flex; gap: 16px; }
.gallery-main-col { flex: 1; min-width: 0; }
.gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #eee;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;
}
.gallery-track {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
  cursor: grab;
}
.gallery-track.dragging { cursor: grabbing; }
.gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.gallery-zoom-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--bg-alt);
  border: none;
  color: var(--ink);
  cursor: pointer;
}
.gallery-zoom-btn:hover { background: var(--btn-dark); color: var(--btn-dark-text); }

/* Full-screen photo lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(20, 18, 16, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-close {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(247, 244, 239, 0.4);
  color: var(--btn-dark-text);
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(247, 244, 239, 0.12); }

body.lightbox-open { overflow: hidden; }
.gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  width: 72px;
}
.gallery-thumbs img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.gallery-thumbs img.active { opacity: 1; }

@media (max-width: 500px) {
  .gallery { flex-direction: column-reverse; }
  .gallery-thumbs { flex-direction: row; width: auto; flex-wrap: wrap; }
}

.gallery-dots { display: none; justify-content: center; gap: 8px; margin-top: 16px; }
.gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); padding: 0; border: none; cursor: pointer; }
.gallery-dot.active { background: var(--ink); }

/* Mobile product page: hide thumbnail rail (dots take over navigation), bleed the main
   photo to the viewport edges, and remove the top gap so it sits flush against the header. */
@media (max-width: 768px) {
  .product-detail { margin-top: 0; }
  .gallery { flex-direction: column; }
  .gallery-thumbs { display: none; }
  .gallery-main-col { margin-left: -24px; margin-right: -24px; width: calc(100% + 48px); }
  .gallery-main { border-radius: 0; }
  .gallery-dots { display: flex; }
}

.product-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.product-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.product-feature img { width: 44px; height: 44px; }
.product-feature span {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 500px) {
  .product-features { gap: 12px; }
  .product-feature img { width: 34px; height: 34px; }
  .product-feature span { font-size: 0.72rem; }
}

@media (max-width: 768px) {
  .product-features { display: none; }
}
.product-meta .category-tag { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.product-meta h1 { font-family: var(--font-display); font-weight: 500; margin: 8px 0 12px; font-size: 2.1rem; }
.product-meta .price { font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.product-meta .description { color: var(--ink-soft); margin-top: 24px; white-space: pre-line; }
.digital-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  background: var(--border);
}
.digital-notice-icon { flex-shrink: 0; margin-top: 2px; color: var(--ink); }
.digital-notice-title {
  margin: 0 0 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--ink);
}
.digital-notice-body p { margin: 0; }
.digital-notice-body p:not(.digital-notice-title) { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
.tag-list { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 40px 0; }
.pagination a, .pagination span {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; font-size: 0.9rem; color: var(--ink-soft);
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .current { background: var(--btn-dark); color: var(--btn-dark-text); border-color: var(--btn-dark); }

/* Forms */
.form-page { max-width: 560px; margin: 40px auto; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.95rem; font-family: var(--font-body); background: var(--bg-alt);
  color: var(--ink);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.honeypot-field { position: absolute; left: -9999px; }

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.92rem; }
.alert-success { background: #e5f3e1; color: #2c5c22; border: 1px solid #b8dda9; }
.alert-error { background: #fbe8e4; color: #8c2c1a; border: 1px solid #f0bcb0; }

.prose { max-width: 720px; margin: 40px 0; color: var(--ink-soft); }
.prose h1 { font-family: var(--font-display); font-weight: 500; color: var(--ink); }