/* Twin Star Catering
   Palette sampled directly from the brand's own materials: the wax seal
   (forest green, antique gold), the estimate sheet (parchment) and the
   walnut board in the photography. */

:root {
  /* brand constants -- identical in both themes */
  --forest:      #1a2a1c;
  --forest-lift: #26382a;
  --gold:        #b08d45;
  --gold-bright: #d9be7c;
  --gold-deep:   #7a5e22;
  --parchment:   #f4ead1;
  --walnut:      #4a2e16;

  /* light theme roles */
  --ground:   #fbf5e6;
  --ground-2: #f4ead1;
  --ink:      #1a2a1c;
  --ink-soft: #4a5a49;
  --accent:   var(--gold-deep);
  --hairline: rgba(26, 42, 28, 0.16);
  --card:     #fffdf6;
  --card-edge: rgba(26, 42, 28, 0.12);

  --measure: 34rem;
  --step: clamp(3rem, 7vw, 5.5rem);
}

:root:not([data-theme="light"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #16221a;
    --ground-2: #1a2a1c;
    --ink:      #f2e8d2;
    --ink-soft: #b9c4b2;
    --accent:   var(--gold-bright);
    --hairline: rgba(217, 190, 124, 0.24);
    --card:     #1e2e21;
    --card-edge: rgba(217, 190, 124, 0.18);
  }
}

:root[data-theme="dark"] {
  --ground:   #16221a;
  --ground-2: #1a2a1c;
  --ink:      #f2e8d2;
  --ink-soft: #b9c4b2;
  --accent:   var(--gold-bright);
  --hairline: rgba(217, 190, 124, 0.24);
  --card:     #1e2e21;
  --card-edge: rgba(217, 190, 124, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* the full-bleed .flame band is sized in vw, which counts the scrollbar */
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.075rem, 0.55vw + 0.95rem, 1.25rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--parchment);
  color: var(--forest);
  padding: 0.6rem 1rem;
  border-radius: 2px;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- hero
   The hero stays forest green in both themes. The seal is the brand's
   only real mark, so it leads rather than a headline. */

.hero {
  background: radial-gradient(ellipse at 50% 32%, var(--forest-lift), var(--forest) 68%);
  color: var(--parchment);
  padding: clamp(3.5rem, 9vw, 6.5rem) 1.5rem clamp(3rem, 7vw, 5rem);
  text-align: center;
  border-bottom: 1px solid rgba(217, 190, 124, 0.28);
}

.hero-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  max-width: 46rem;
  margin: 0 auto;
}

.seal {
  width: clamp(160px, 30vw, 260px);
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}

.wordmark {
  font-family: Cinzel, Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 7.5vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  margin: 0;
  text-wrap: balance;
  color: var(--parchment);
}
.wordmark span {
  display: block;
  font-size: 0.44em;
  letter-spacing: 0.42em;
  margin-top: 0.7em;
  margin-left: 0.42em; /* optical: absorbs the trailing letter-space */
  color: var(--gold-bright);
}

/* the hairline echoes the seal's inner ring */
.rule {
  width: min(15rem, 60%);
  height: 1px;
  margin: 0.35rem 0 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.tagline {
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--parchment);
  margin: 0;
}

.eyebrow {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0;
  text-wrap: balance;
}

.cta {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--forest);
  background: var(--gold-bright);
  padding: 0.85rem 1.75rem;
  margin-top: 0.9rem;
  border-radius: 1px;
  transition: background 160ms ease, transform 160ms ease;
}
.cta:hover {
  background: var(--parchment);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta:hover { transform: none; }
}

/* --------------------------------------------------------------- band */

.band {
  margin: 0;
  background: var(--forest);
  overflow: hidden;
}
.band img {
  display: block;
  width: 100%;
  height: clamp(200px, 34vw, 380px);
  object-fit: cover;
  object-position: center 42%;
}

/* --------------------------------------------------------------- body */

main {
  display: flex;
  flex-direction: column;
  gap: var(--step);
  padding: var(--step) 1.5rem;
  max-width: 62rem;
  margin: 0 auto;
}

section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h2 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  letter-spacing: 0.05em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-family: Cinzel, Georgia, serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

p { margin: 0; }

.intro {
  max-width: var(--measure);
  align-self: center;
  text-align: center;
  gap: 1.1rem;
}
.lead {
  font-size: 1.2em;
  line-height: 1.55;
}

.section-note {
  color: var(--ink-soft);
  max-width: var(--measure);
  font-style: italic;
}

/* ----------------------------------------------------------- services
   Four service lines, photograph first. The picture carries most of the
   argument here -- the copy just names it. */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.75rem;
  margin-top: 0.75rem;
}

.svc {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-edge);
  overflow: hidden;
}

.svc img {
  display: block;
  width: 100%;
  height: clamp(190px, 26vw, 250px);
  object-fit: cover;
  background: var(--ground-2);
}

.svc-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem 1.5rem 1.6rem;
}

.svc h3 {
  font-size: 1.2rem;
  letter-spacing: 0.07em;
  text-transform: none;
  color: var(--ink);
}

/* ------------------------------------------------------- recent work
   Column layout rather than a grid, so portrait and landscape frames keep
   their own proportions instead of being cropped to a common box. */

.grid {
  columns: 3 15rem;
  column-gap: 0.9rem;
  margin-top: 0.75rem;
}

.grid img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.9rem;
  break-inside: avoid;
  border: 1px solid var(--card-edge);
  background: var(--ground-2);
}

/* -------------------------------------------------------------- flame
   The torch sear. Full-bleed out of the body column, because a 960px clip
   boxed inside a text measure looks like an afterthought. */

.flame {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #0d1410;
  color: var(--parchment);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  border-block: 1px solid rgba(217, 190, 124, 0.28);
}

.flame > * { min-width: 0; }

.flame-media {
  max-width: 46rem;
  justify-self: end;
  width: 100%;
}

.flame video,
.flame-still {
  display: block;
  width: 100%;
  height: auto;
  background: #0d1410;
}

/* The still is the reduced-motion substitute; normally the video shows. */
.flame-still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .flame video { display: none; }
  .flame-still { display: block; }
}

.flame-copy {
  max-width: 30rem;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.flame-copy h2 { color: var(--parchment); }
.flame-note {
  font-style: italic;
  color: var(--gold-bright);
}

/* -------------------------------------------------------------- tiers */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 0.75rem;
}

.tier {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-top: 3px solid var(--accent);
  padding: 1.6rem 1.5rem;
}
.tier.featured {
  border-top-color: var(--gold-bright);
  box-shadow: 0 6px 22px rgba(26, 42, 28, 0.09);
}

.tier-name {
  font-family: Cinzel, Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.09em;
}
.tier-size {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.tier-blurb {
  font-style: italic;
  color: var(--ink-soft);
}

.tier ul,
.sel-col ul,
.addon-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tier li,
.sel-col li,
.addon-list li {
  padding-left: 1.15rem;
  position: relative;
  line-height: 1.45;
}
.tier li::before,
.sel-col li::before,
.addon-list li::before {
  content: "\2726"; /* four-pointed star, echoing the seal */
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--accent);
  font-size: 0.72em;
}

.planning {
  border-top: 1px solid var(--hairline);
  padding-top: 1.1rem;
  margin-top: 0.5rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.planning strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------- selection */

.sel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 0.75rem;
}
.sel-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ------------------------------------------------------------ add-ons */

.addons {
  background: var(--ground-2);
  border: 1px solid var(--hairline);
  padding: 1.75rem;
}
.addon-list { gap: 0.65rem; }

/* ------------------------------------------------------------ contact */

.contact {
  align-self: center;
  text-align: center;
  max-width: var(--measure);
  gap: 1rem;
}
.phone {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  letter-spacing: 0.06em;
}
.phone a {
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.1em;
}
.where {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- footer */

footer {
  background: var(--forest);
  color: var(--parchment);
  text-align: center;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  border-top: 1px solid rgba(217, 190, 124, 0.28);
}
.footer-seal {
  width: 76px;
  height: auto;
  opacity: 0.92;
}
.footer-tag {
  font-style: italic;
  color: var(--gold-bright);
}
.footer-line,
.footer-meta {
  font-size: 0.9rem;
  color: rgba(242, 232, 210, 0.78);
}
.footer-meta a { color: var(--gold-bright); }