/* CakeClub holding page; adapted from docs/DESIGN_SYSTEM.md and RoundedCta. */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/assets/fonts/PPNeueMontreal-Light.otf') format('opentype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/assets/fonts/PPNeueMontreal-LightItalic.otf') format('opentype');
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/assets/fonts/PPNeueMontreal-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --color-red: #c21524;
  --color-brown: #452313;
  --color-pink: #fcbedc;
  --color-cream: #fffbe9;
  --color-black: #000;
  --site-gutter: 14px;
  --surface-radius: 6px;
  --cta-height: 30px;
  --cta-radius: 50px;
  --motion-fast: 180ms;
  --motion-cta-fill: 500ms;
  --motion-easing-standard: cubic-bezier(.2, .7, .3, 1);
  --motion-easing-emphasized: cubic-bezier(.22, 1, .36, 1);
  --font-ui: 'PP Neue Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@media (min-width: 600px) { :root { --site-gutter: 20px; --surface-radius: 6px; } }
@media (min-width: 1024px) { :root { --site-gutter: 34px; --surface-radius: 8px; --cta-height: 34px; } }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--color-cream); color: var(--color-black); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 280px; font-family: var(--font-ui); font-size: 14px; font-weight: 300; font-synthesis: none; }
button, input, textarea { font: inherit; color: inherit; }
button, input, textarea, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }
::selection { background: var(--color-pink); }
.page { max-width: 100%; min-height: 100svh; padding: 27px var(--site-gutter) max(34px, env(safe-area-inset-bottom)); }
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand-logo { width: 255px; height: auto; }
.brand-line { margin: 12px 0 0; font-size: 18px; line-height: 1.25; letter-spacing: -.025em; }
.intro { max-width: 1240px; margin: 136px 0 31px; font-size: 34px; line-height: 1.22; font-weight: 300; letter-spacing: -.038em; }
.hero-image-wrap { border-radius: var(--surface-radius); overflow: hidden; }
.hero-image { width: 100%; height: clamp(230px, 40.2svh, 449px); object-fit: cover; object-position: center; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); column-gap: 40px; align-items: start; margin-top: 30px; }
.contact-info h2 { margin: 0 0 18px; font-size: 34px; font-weight: 300; line-height: 1.1; letter-spacing: -.035em; }
.contact-info p, .contact-info a { font-size: 14px; line-height: 1.35; font-style: italic; font-weight: 300; }
.contact-info p { margin: 0 0 12px; }
.text-link { display: inline-block; position: relative; }
.text-link::after { position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: currentColor; content: ''; transform: scaleX(0); transform-origin: right; transition: transform 250ms var(--motion-easing-standard); }
.text-link:is(:hover,:focus-visible)::after { transform: scaleX(1); transform-origin: left; }
.contact-form { min-width: 0; padding-top: 17px; }
.fields-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 50px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label { display: block; margin-bottom: 1px; font-size: 14px; line-height: 1.3; font-weight: 300; }
.field input, .field textarea { display: block; width: 100%; padding: 2px 0 4px; border: 0; border-bottom: 1px solid var(--color-black); border-radius: 0; outline: 0; background: transparent; font-size: 14px; line-height: 1.4; font-weight: 300; resize: vertical; transition: border-color var(--motion-fast); }
.field input { height: 21px; }
.field :is(input,textarea):focus { border-bottom: 2px solid var(--color-red); }
.field :is(input,textarea):focus-visible { outline: none; }
.optional { white-space: nowrap; }
.field-message { margin-top: 24px; }
.field-message textarea { min-height: 57px; resize: vertical; }
.submit-button { --cta-origin-x: 50%; --cta-origin-y: 50%; position: relative; isolation: isolate; display: inline-grid; place-items: center; min-width: 206px; height: var(--cta-height); margin-top: 24px; padding: 0 18px; overflow: hidden; border: 1px solid var(--color-cream); border-radius: var(--cta-radius); background: var(--color-black); color: var(--color-cream); font-size: 14px; font-weight: 400; line-height: 1; transition: color var(--motion-fast) var(--motion-easing-standard); }
.submit-button span { position: relative; z-index: 1; }
.submit-button::before { position: absolute; z-index: 0; top: var(--cta-origin-y); left: var(--cta-origin-x); width: 300%; aspect-ratio: 1; border-radius: 50%; background: var(--color-red); content: ''; transform: translate(-50%, -50%) scale(0); transition: transform var(--motion-cta-fill) var(--motion-easing-emphasized); }
.submit-button:is(:hover, :focus-visible):not(:disabled)::before { transform: translate(-50%, -50%) scale(1); }
.submit-button:disabled { opacity: .72; cursor: progress; }
.form-status { margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.form-status:empty { display: none; }
.form-status[data-state='error'] { color: var(--color-red); }
.form-status[data-state='success'] { color: var(--color-brown); }
.privacy-note { margin: 10px 0 0; color: #5e4d3f; font-size: 11px; line-height: 1.35; }
.spam-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-height: 1000px) and (min-width: 1024px) {
  .intro { margin-top: clamp(62px, 9svh, 110px); }
  .hero-image { height: clamp(230px, 38svh, 410px); }
}
@media (max-width: 1320px) and (min-width: 1024px) {
  .fields-row { column-gap: 26px; }
  .intro { max-width: 1100px; font-size: 30px; }
}
@media (max-width: 1023px) {
  .page { padding-top: 22px; }
  .brand-logo { width: 210px; }
  .brand-line { font-size: 16px; margin-top: 10px; }
  .intro { font-size: clamp(24px, 3.4vw, 30px); margin: 88px 0 23px; }
  .hero-image { height: clamp(280px, 43vw, 420px); }
  .contact-layout { grid-template-columns: 1fr; row-gap: 34px; margin-top: 26px; }
  .contact-info h2 { font-size: 30px; margin-bottom: 12px; }
  .contact-form { padding-top: 0; }
  .fields-row { column-gap: 20px; }
}
@media (max-width: 599px) {
  .page { padding-top: 22px; padding-bottom: 34px; }
  .brand-logo { width: 194px; }
  .brand-line { font-size: 14px; }
  .intro { margin-top: 70px; margin-bottom: 20px; font-size: 25px; line-height: 1.17; letter-spacing: -.038em; }
  .hero-image { height: 320px; object-position: 47% 50%; }
  .contact-layout { row-gap: 28px; margin-top: 24px; }
  .contact-info h2 { font-size: 28px; margin-bottom: 13px; }
  .contact-info p, .contact-info a { font-size: 13px; }
  .contact-info p { margin-bottom: 8px; }
  .fields-row { grid-template-columns: 1fr; row-gap: 23px; }
  .field input { height: 24px; }
  .field-message { margin-top: 23px; }
  .field-message textarea { min-height: 65px; }
  .submit-button { width: 100%; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .submit-button::before, .text-link::after, .field input, .field textarea { transition: none; }
}