/* ==========================================================================
   Shared Page Styles (Story, Shipping, Contact, Discovery Set)
   ========================================================================== */

/* --- Page Hero --- */
.page-hero {
  position: relative; min-height: 65vh;
  display: flex; align-items: flex-end; justify-content: center;
  text-align: center; overflow: hidden; padding-bottom: 5rem;
}
.page-hero--short {
  min-height: 40vh; padding-top: 8rem;
  background: var(--ink-warm);
  border-bottom: 1px solid var(--cream-faint);
}
.page-hero__image {
  position: absolute; inset: 0; z-index: 0;
}
.page-hero__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8,8,13,0.3) 0%, rgba(8,8,13,0.5) 50%, var(--ink) 100%);
}
.page-hero__content {
  position: relative; z-index: 2; padding: 0 2rem;
}
.page-hero__content h1 {
  font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300; font-style: italic; line-height: 1.2;
  opacity: 0; animation: fadeUp 1s var(--ease) 0.3s forwards;
}
.page-hero__content p {
  font-size: 1rem; color: var(--cream-dim); margin-top: 1rem;
  opacity: 0; animation: fadeUp 1s var(--ease) 0.6s forwards;
}

/* --- Page Body --- */
.page-body {
  padding: 4rem 0 6rem;
}

/* --- Story Content --- */
.story-content {
  padding: 2rem 0;
}
.story-lead {
  font-family: var(--serif); font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-style: italic; line-height: 1.8;
  color: var(--cream); margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--cream-faint);
}
.story-content h2 {
  font-family: var(--serif); font-size: 1.8rem; font-weight: 300;
  margin: 3rem 0 1rem; color: var(--gold);
}
.story-content p {
  font-size: 0.95rem; color: var(--cream-dim); line-height: 1.9;
  margin-bottom: 1rem;
}
.story-cta {
  text-align: center; padding-top: 3rem; margin-top: 3rem;
  border-top: 1px solid var(--cream-faint);
}

/* --- Text Content (Shipping etc) --- */
.text-content {
  padding: 2rem 0;
}
.text-content h2 {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 300;
  color: var(--gold); margin: 3rem 0 1rem;
}
.text-content h2:first-child { margin-top: 0; }
.text-content p {
  font-size: 0.92rem; color: var(--cream-dim); line-height: 1.9;
  margin-bottom: 1rem;
}
.text-content ul {
  list-style: none; margin: 1rem 0 1.5rem; padding: 0;
}
.text-content ul li {
  font-size: 0.92rem; color: var(--cream-dim); line-height: 1.9;
  padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem;
}
.text-content ul li::before {
  content: ''; position: absolute; left: 0; top: 0.75rem;
  width: 6px; height: 1px; background: var(--gold);
}
.text-content strong { color: var(--cream); font-weight: 400; }

/* --- Contact --- */
.contact-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem); padding: 2rem 0;
}
.contact-detail {
  margin-bottom: 2rem;
}
.contact-detail h3 {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gold); margin-bottom: 0.5rem;
}
.contact-detail a {
  font-size: 0.95rem; color: var(--cream); transition: color 0.3s;
}
.contact-detail a:hover { color: var(--gold); }
.contact-detail p {
  font-size: 0.92rem; color: var(--cream-dim); line-height: 1.6;
}

/* Contact Form */
.contact-form {
  display: flex; flex-direction: column; gap: 1.5rem;
}
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--cream-dim);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: transparent; border: 1px solid var(--cream-faint);
  color: var(--cream); font-family: var(--sans); font-size: 0.9rem;
  font-weight: 300; padding: 0.9rem 1rem; outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
}
.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f0e6d0' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-group select option {
  background: var(--ink); color: var(--cream);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .page-hero { min-height: 50vh; }
  .page-hero--short { min-height: 30vh; }
  .contact-layout { grid-template-columns: 1fr; }
}