:root {
  --ink: #243f38;
  --green: #3f7666;
  --mint: #edf7f2;
  --peach: #e78a65;
  --yellow: #f4c654;
  --cream: #fff8eb;
  --line: rgba(36, 63, 56, 0.28);
}

:root[data-theme="berry"] {
  --ink: #42283b;
  --green: #743e62;
  --mint: #f7e9ef;
  --peach: #dc6f62;
  --yellow: #f2cd68;
  --cream: #fff8ee;
  --line: rgba(66, 40, 59, 0.26);
}

:root[data-theme="coast"] {
  --ink: #213e4b;
  --green: #397780;
  --mint: #e7f3f2;
  --peach: #ed886e;
  --yellow: #f2c85c;
  --cream: #fff9ee;
  --line: rgba(33, 62, 75, 0.26);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--mint); font-family: "Nunito Sans", sans-serif; }
a { color: inherit; text-decoration: none; }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 20; padding: 10px 14px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }

.announcement {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 20px;
  background: var(--peach);
  color: var(--cream);
  font: 400 16px/1.2 "Bree Serif", serif;
  text-align: center;
}

.site-header {
  height: 92px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 36px;
  padding: 0 clamp(24px, 4vw, 64px);
  background: var(--green);
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.wordmark { display: grid; width: max-content; line-height: 1; }
.wordmark strong { font: 400 clamp(23px, 2.2vw, 31px) "Bree Serif", serif; }
.wordmark span { margin-top: 7px; font-size: 8px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #dceee6; }

.site-header nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.site-header nav a { padding: 8px 0 5px; border-bottom: 2px solid transparent; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.site-header nav a:hover, .site-header nav a:focus-visible { border-color: var(--yellow); }
.site-header nav .icon-link { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 19px; }
.site-header nav .icon-link:hover, .site-header nav .icon-link:focus-visible { border-color: var(--yellow); color: var(--yellow); }

.theme-switcher { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid rgba(255,255,255,.46); border-radius: 999px; }
.theme-choice { width: 20px; height: 20px; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.theme-choice span { display: block; width: 100%; height: 100%; border-radius: inherit; }
.theme-garden span { background: linear-gradient(135deg, #3f7666 0 50%, #f4c654 50%); }
.theme-berry span { background: linear-gradient(135deg, #743e62 0 50%, #dc6f62 50%); }
.theme-coast span { background: linear-gradient(135deg, #397780 0 50%, #f2c85c 50%); }
.theme-choice[aria-pressed="true"] { border-color: white; box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
.theme-choice:hover, .theme-choice:focus-visible { transform: scale(1.12); outline: 2px solid var(--yellow); outline-offset: 2px; }

.announcement, .site-header, .portrait-panel, .summary, .cakes-section, .cake-mark, .events-section, .event-list, .voice-section, .contact-section, footer { transition: background-color .22s ease, color .22s ease; }

.hero {
  min-height: calc(100vh - 134px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr);
}

.portrait-panel {
  min-height: 620px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--yellow);
}

.portrait-panel img {
  width: min(91%, 760px);
  max-height: calc(100vh - 152px);
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(18px 12px 0 rgba(231, 138, 101, 0.45));
}

.summary {
  --side-pad: clamp(42px, 6vw, 96px);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 6vw, 96px) var(--side-pad) 0;
  background: var(--mint);
}

.eyebrow { margin: 0 0 24px; display: flex; align-items: center; gap: 9px; color: var(--peach); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow i { font-size: 12px; }
h1 { margin: 0; color: var(--peach); font: 400 clamp(54px, 6vw, 88px)/.96 "Bree Serif", serif; letter-spacing: -.025em; }
.tagline { margin: 30px 0 0; font: 400 clamp(25px, 2.6vw, 38px)/1.13 "Bree Serif", serif; }
.introduction { max-width: 650px; margin: 26px 0 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; }

.actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.primary-action { padding: 16px 24px; background: var(--peach); color: white; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.primary-action:hover, .primary-action:focus-visible { background: var(--ink); }
.text-action { padding: 10px 0 6px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.text-action span { margin-left: 12px; }

.work-links {
  margin: auto calc(0px - var(--side-pad)) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.work-links a { min-width: 0; min-height: 126px; padding: 20px 18px; display: grid; align-content: center; border-right: 1px solid var(--line); }
.work-links a:last-child { border-right: 0; }
.work-links a:hover, .work-links a:focus-visible { background: var(--cream); }
.work-links span { font-size: 8px; font-weight: 800; }
.work-links strong { margin-top: 8px; font: 400 25px/1 "Bree Serif", serif; }
.work-links small { margin-top: 8px; overflow: hidden; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.feature-section {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  scroll-margin-top: 92px;
}

.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 8vw, 128px);
}

.section-number { margin: 0 0 24px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.feature-copy h2, .voice-heading h2, .contact-section h2 { margin: 0; font: 400 clamp(48px, 5.5vw, 82px)/.98 "Bree Serif", serif; letter-spacing: -.025em; }
.feature-copy > p:not(.section-number) { max-width: 610px; margin: 30px 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; }
.feature-copy > p.detail-note { margin-top: 18px; font-size: clamp(15px, 1.25vw, 18px); }
.section-link { width: max-content; margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.section-link i { font-size: 18px; }

.cakes-section { background: var(--cream); }
.cakes-section .feature-copy { color: var(--ink); }
.cakes-section h2 { color: var(--peach); }
.cake-mark { display: grid; place-items: center; padding: clamp(50px, 7vw, 110px); background: #f4b8a0; }
.cake-mark img { width: min(72%, 480px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 18px 18px 0 var(--cream); }

.events-section { background: var(--green); color: white; }
.event-list { display: grid; align-content: center; padding: clamp(50px, 6vw, 92px); background: var(--yellow); color: var(--ink); }
.event-list span { padding: 13px 0; border-bottom: 2px solid var(--ink); font: 400 clamp(46px, 5vw, 78px)/.95 "Bree Serif", serif; white-space: nowrap; }
.event-list span:last-child { border-bottom: 0; }
.events-section .section-number { color: var(--yellow); }
.events-section h2 { color: var(--cream); }

.voice-section {
  padding: clamp(72px, 8vw, 126px) clamp(24px, 6vw, 92px);
  scroll-margin-top: 92px;
  background: var(--peach);
  color: var(--cream);
}

.voice-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(40px, 8vw, 130px); align-items: end; }
.voice-heading .section-number { color: var(--yellow); }
.voice-heading h2 { max-width: 820px; }
.voice-heading > p { margin: 0 0 5px; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.55; }
.voice-samples { margin-top: clamp(54px, 6vw, 88px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 46px); }
.voice-card { background: var(--cream); color: var(--ink); }
.voice-card video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; background: var(--ink); }
.voice-caption { padding: 26px 28px 30px; }
.voice-caption span { color: var(--peach); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.voice-caption h3 { margin: 9px 0 0; font: 400 clamp(30px, 3vw, 44px)/1 "Bree Serif", serif; }
.voice-caption p { margin: 12px 0 0; font-size: 14px; }

.contact-section {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr);
  gap: clamp(52px, 8vw, 140px);
  align-items: center;
  padding: clamp(72px, 8vw, 126px) clamp(24px, 6vw, 92px);
  scroll-margin-top: 92px;
  background: var(--mint);
}

.contact-section .section-number { color: var(--peach); }
.contact-section h2 { color: var(--green); }
.contact-intro > p:not(.section-number) { max-width: 560px; margin: 26px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.contact-email { width: max-content; max-width: 100%; margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.contact-email:hover, .contact-email:focus-visible { color: var(--peach); }
.contact-email i { font-size: 17px; }

.contact-form { position: relative; display: grid; gap: 22px; padding: clamp(28px, 4vw, 50px); background: var(--cream); box-shadow: 14px 14px 0 var(--yellow); }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-form label { display: grid; gap: 8px; }
.contact-form label > span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 0; padding: 13px 14px; background: white; color: var(--ink); font: 600 16px/1.35 "Nunito Sans", sans-serif; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--peach); outline: 3px solid color-mix(in srgb, var(--peach) 24%, transparent); }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.cf-turnstile { min-height: 65px; }
.form-submit { display: flex; align-items: center; gap: 20px; }
.form-submit button { border: 0; padding: 15px 21px; display: inline-flex; align-items: center; gap: 12px; background: var(--peach); color: white; font: 800 11px/1 "Nunito Sans", sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.form-submit button:hover, .form-submit button:focus-visible { background: var(--ink); }
.form-submit button:disabled { cursor: wait; opacity: .65; }
.form-status { margin: 0; font-size: 13px; line-height: 1.4; }
.form-status.is-error { color: #a12f2f; }
.form-status.is-success { color: var(--green); font-weight: 800; }

footer { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px clamp(24px, 5vw, 76px); background: var(--ink); color: white; }
footer strong { font: 400 23px "Bree Serif", serif; }
footer span { font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #cde2d8; }

@media (max-width: 1060px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav a:not(.icon-link) { display: none; }
  .hero { grid-template-columns: 1fr 1fr; }
  .summary { --side-pad: 42px; }
  .feature-copy { padding: 68px 48px; }
  .voice-heading { grid-template-columns: 1fr; gap: 26px; }
  .voice-heading > p { max-width: 620px; }
  .contact-section { grid-template-columns: 1fr; }
  .contact-intro { max-width: 700px; }
}

@media (max-width: 760px) {
  .announcement { min-height: 38px; font-size: 14px; }
  .site-header { height: 78px; padding: 0 20px; }
  #summary, .feature-section, .voice-section, .contact-section { scroll-margin-top: 78px; }
  .wordmark strong { font-size: 23px; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .portrait-panel { min-height: 480px; order: 2; }
  .portrait-panel img { width: min(96%, 620px); max-height: 520px; }
  .summary { --side-pad: 24px; min-height: auto; order: 1; padding-top: 62px; }
  h1 { font-size: 58px; }
  .tagline { font-size: 28px; }
  .work-links { margin-top: 58px; }
  .work-links a { min-height: 112px; padding: 16px 12px; }
  .work-links strong { font-size: 20px; }
  .work-links small { font-size: 7px; }
  .feature-section { min-height: auto; grid-template-columns: 1fr; }
  .feature-copy { min-height: 540px; padding: 72px 28px; }
  .cake-mark { min-height: 500px; }
  .events-section .event-list { min-height: 520px; order: 2; padding: 60px 28px; }
  .events-section .feature-copy { order: 1; }
  .voice-samples { grid-template-columns: 1fr; }
  .contact-section { padding-block: 72px; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
  .announcement { padding-inline: 12px; font-size: 12px; }
  .site-header { gap: 12px; }
  .wordmark strong { font-size: 20px; }
  .wordmark span { display: none; }
  .site-header nav { gap: 10px; }
  .theme-switcher { gap: 4px; padding: 4px; }
  .theme-choice { width: 18px; height: 18px; }
  .site-header nav .icon-link { width: 34px; height: 34px; }
  h1 { font-size: 50px; }
  .actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .work-links { grid-template-columns: 1fr; }
  .work-links a { min-height: 92px; border-right: 0; border-bottom: 1px solid var(--line); }
  .work-links a:last-child { border-bottom: 0; }
  .portrait-panel { min-height: 410px; }
  .cake-mark { min-height: 390px; }
  .cake-mark img { width: 82%; box-shadow: 12px 12px 0 var(--cream); }
  .voice-section { padding: 66px 18px; }
  .voice-caption { padding: 22px 20px 25px; }
  .contact-form { padding: 26px 20px; box-shadow: 10px 10px 0 var(--yellow); }
  .form-pair { grid-template-columns: 1fr; }
  .form-submit { align-items: flex-start; flex-direction: column; gap: 12px; }
  .contact-email { font-size: 10px; letter-spacing: .02em; text-transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}