/* Design options for Matthew's review. Option 1 of each = the default site (no attribute).
   Switch with URL params: ?hero=2&header=3&footer=2&btn=3&hf=2&bf=3 */

@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/opt/cormorant.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/opt/cormorant-italic.woff2") format("woff2-variations"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/opt/playfair.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/opt/playfair-italic.woff2") format("woff2-variations"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/opt/montserrat.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/opt/dm-sans.woff2") format("woff2-variations"); font-weight: 100 1000; font-display: swap; }

.header-mono { display: none; }

/* ---------------- Fonts ---------------- */
html[data-hf="2"] { --serif: "Cormorant Garamond", Georgia, serif; }
html[data-hf="2"] .display, html[data-hf="2"] .hero__title .rise, html[data-hf="2"] .acc__btn, html[data-hf="2"] .card__title, html[data-hf="2"] .client__name { font-weight: 500; }
html[data-hf="3"] { --serif: "Playfair Display", Georgia, serif; }
html[data-hf="3"] .hero__title .rise { letter-spacing: -.03em; }
html[data-bf="2"] { --sans: "Montserrat", system-ui, sans-serif; }
html[data-bf="2"] body { font-size: 15.5px; }
html[data-bf="3"] { --sans: "DM Sans", system-ui, sans-serif; }

/* ---------------- Buttons ---------------- */
/* 2: Monogram seal. Solid pill with their monogram set in a cream seal */
html[data-btn="2"] .btn { position: relative; padding-left: 58px; }
html[data-btn="2"] .btn--sm { padding-left: 46px; }
html[data-btn="2"] .btn::before { content: ""; position: absolute; left: 6px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 999px; background: var(--cream); transition: background-color .35s var(--ease); }
html[data-btn="2"] .btn--sm::before { width: 28px; height: 28px; margin-top: -14px; left: 5px; }
html[data-btn="2"] .btn::after { content: ""; position: absolute; left: 17px; top: 50%; width: 14px; height: 19px; margin-top: -9.5px; background: var(--terra); -webkit-mask: url("/img/monogram.svg?v=1") center / contain no-repeat; mask: url("/img/monogram.svg?v=1") center / contain no-repeat; transition: background-color .35s var(--ease); }
html[data-btn="2"] .btn--sm::after { left: 13px; width: 12px; height: 16px; margin-top: -8px; }
html[data-btn="2"] .btn:hover::after { background: var(--ink); }
html[data-btn="2"] .btn--ghost::before { background: var(--terra); }
html[data-btn="2"] .btn--ghost::after { background: var(--cream); }
html[data-btn="2"] .btn--ghost:hover::before { background: var(--cream); }
html[data-btn="2"] .btn--ghost:hover::after { background: var(--terra); }
html[data-btn="2"] .btn--cream::before { background: var(--terra); }
html[data-btn="2"] .btn--cream::after { background: var(--cream); }

/* 3: Frequency pill. Faint frequency lines flow through the solid pill on their own */
html[data-btn="3"] .btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23FBF6F1' stroke-opacity='.45' stroke-width='1'%3E%3Cpath d='M0 22 Q15 12 30 22 T60 22 T90 22 T120 22'/%3E%3Cpath d='M0 30 Q15 20 30 30 T60 30 T90 30 T120 30'/%3E%3Cpath d='M0 38 Q15 28 30 38 T60 38 T90 38 T120 38'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 50%; background-size: 120px 100%; animation: btnWave 4s linear infinite; }
html[data-btn="3"] .btn--ghost, html[data-btn="3"] .btn--cream { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23B4512D' stroke-opacity='.3' stroke-width='1'%3E%3Cpath d='M0 22 Q15 12 30 22 T60 22 T90 22 T120 22'/%3E%3Cpath d='M0 30 Q15 20 30 30 T60 30 T90 30 T120 30'/%3E%3Cpath d='M0 38 Q15 28 30 38 T60 38 T90 38 T120 38'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes btnWave { to { background-position: -120px 50%; } }

/* 4: Double ring. Solid pill with an inner hairline ring, like the monogram's double outline */
html[data-btn="4"] .btn { box-shadow: inset 0 0 0 4px var(--terra), inset 0 0 0 5px rgba(251, 246, 241, .75); padding: 18px 32px; }
html[data-btn="4"] .btn:hover { box-shadow: inset 0 0 0 4px var(--ember), inset 0 0 0 5px var(--ink); }
html[data-btn="4"] .btn--ghost { box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 5px var(--terra); }
html[data-btn="4"] .btn--ghost:hover { box-shadow: inset 0 0 0 4px var(--terra), inset 0 0 0 5px var(--cream); }
html[data-btn="4"] .btn--cream { box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 5px var(--terra); }
html[data-btn="4"] .btn--cream:hover { box-shadow: inset 0 0 0 4px var(--ember), inset 0 0 0 5px var(--ink); }
html[data-btn] .header-cta { padding-left: 20px; background-image: none; box-shadow: none; }
html[data-btn] .header-cta::before, html[data-btn] .header-cta::after { display: none; }

/* ---------------- Desktop header options ---------------- */
@media (min-width: 900px) {
  /* 2: centred monogram crest, nav left, text link right */
  html[data-header="2"] .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 4.5px)); display: flex; flex-direction: column; align-items: center; gap: 6px; }
  html[data-header="2"] .brand .logo-wordmark { width: clamp(280px, 26vw, 380px); }
  html[data-header="2"] .nav { position: static; transform: none; gap: 28px; }
  html[data-header="2"] .header-cta { position: relative; top: 2px; background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 6px 0; color: var(--terra); }
  html[data-header="2"] .header-cta:hover { color: var(--ember); background: none; }


  /* 3: floating sand capsule echoing the monogram outline */
  html[data-header="3"] .site-header { top: 16px; left: 50%; right: auto; width: min(1120px, calc(100% - 2 * var(--gutter))); height: 66px; transform: translate3d(-50%, 0, 0); border-radius: 999px; background: var(--sand); border: 1px solid var(--line); padding: 0 9px 0 26px; }
  html[data-header="3"] .brand { display: flex; align-items: center; gap: 12px; }
  html[data-header="3"] .header-mono { display: block; width: 18px; }
  html[data-header="3"] .brand .logo-wordmark { width: 176px; }
  html[data-header="3"] .nav { left: 50%; }
  html[data-header="3"] .hero { padding-top: 104px; }
}

/* ---------------- Hero options ---------------- */
/* 2: Arch Portal. Text column + a full-height arch window of the panorama */
@media (min-width: 900px) {
  html[data-hero="2"] .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: end; column-gap: clamp(24px, 4vw, 64px); min-height: 100svh; padding-inline: var(--gutter); padding-bottom: 0; }
  html[data-hero="2"] .hero > .wrap { max-width: none; margin: 0; padding: 0; }
  html[data-hero="2"] .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "t1" "t2" "side"; align-self: center; padding-bottom: 6svh; }
  html[data-hero="2"] .hero__title .rise { font-size: min(7.2vw, 14svh, 132px); white-space: nowrap; }
  html[data-hero="2"] .hero__title .rise--l2 { padding-left: .6em; }
  html[data-hero="2"] .hero__grid { position: static; }
  html[data-hero="2"] .hero__side { padding: 26px 0 0; }
  html[data-hero="2"] .hero__arch { top: auto; right: auto; bottom: 0; left: calc(52% - clamp(70px, 7vw, 110px)); width: clamp(140px, min(13vw, 26svh), 210px); }
  html[data-hero="2"] .hero__band { margin: 0; }
  html[data-hero="2"] .band { height: calc(100svh - var(--header-h) - 20px); border-radius: 999px 999px 0 0; }
  html[data-hero="2"] .band__img img { object-position: 38% 60%; }
  html[data-hero="2"] .band__script { left: 10%; bottom: 9%; width: 80%; }
  html[data-hero="2"] .band::after { background: linear-gradient(0deg, rgba(58,20,17,.45), rgba(58,20,17,0) 50%); }
}
html.js[data-hero="2"] .band { animation-name: archRise; }
@keyframes archRise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 3: Frequency Field. Full-bleed panorama, cream type over it */
html[data-hero="3"] .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(28px, 6svh, 72px); color: var(--cream); }
html[data-hero="3"] .hero__band { position: absolute; inset: 0; margin: 0; padding: 0; max-width: none; z-index: 0; }
html[data-hero="3"] .band { height: 100%; border-radius: 0; }
/* intro: the field "tunes in" like a signal coming into focus. No wipe, never shows cream. */
html[data-hero="3"] .hero { background: var(--ink); }
html.js[data-hero="3"] .band { animation: none; clip-path: none; }
html.js[data-hero="3"] .band__img img { animation: fieldTune 2.4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes fieldTune { from { opacity: 0; transform: scale(1.14); filter: blur(14px) brightness(.55) saturate(.7); } 55% { opacity: 1; } to { opacity: 1; transform: none; filter: none; } }
html.js[data-hero="3"] .band .waves path { stroke-dasharray: 2200; animation: waveDraw 3.2s cubic-bezier(.22, 1, .36, 1) .5s both; }
@keyframes waveDraw { from { stroke-dashoffset: 2200; } to { stroke-dashoffset: 0; } }
html.js[data-hero="3"] .band__script { animation: scriptIn 1.8s cubic-bezier(.22, 1, .36, 1) 1s both; }
@keyframes scriptIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: .95; clip-path: inset(0 0 0 0); } }
html.js[data-hero="3"] .rise--l1 > span { animation-delay: .7s; }
html.js[data-hero="3"] .rise--l2 > span { animation-delay: .85s; }
html.js[data-hero="3"] .hero__eyebrow .rise > span { animation-delay: .6s; }
html.js[data-hero="3"] .hero__side { animation-delay: 1.1s; }
html.js[data-hero="3"] .hero__arch { animation-delay: 1.2s; }
html[data-hero="3"] .band::after { background: linear-gradient(0deg, rgba(58,20,17,.92) 0%, rgba(58,20,17,.55) 38%, rgba(58,20,17,.12) 75%), linear-gradient(90deg, rgba(58,20,17,.4), rgba(58,20,17,0) 60%); }
html[data-hero="3"] .band .waves { opacity: .9; mix-blend-mode: normal; }
html[data-hero="3"] .band .waves path { stroke: rgba(251, 246, 241, .28); }
html[data-hero="3"] .hero__grid { position: relative; z-index: 2; }
html[data-hero="3"] .hero__eyebrow, html[data-hero="3"] .hero__side .label { color: var(--cream); }
html[data-hero="3"] .hero__title .rise--l1, html[data-hero="3"] .hero__dm { color: var(--cream); }
html[data-hero="3"] .hero__title .rise--l2 { color: var(--mist); }
html[data-hero="3"][data-iw="2"] .hero__title .rise--l2 { color: #F6C9AE; }
html[data-hero="3"][data-iw="3"] .hero__title .rise--l2 { color: transparent; -webkit-text-stroke: 1.4px var(--cream); }
html[data-hero="3"][data-iw="4"] .hero__title .rise--l2 { color: var(--cream); }
html[data-hero="3"] .band__script { left: auto; right: 6%; top: 18%; bottom: auto; width: min(36%, 460px); opacity: .95; }
html[data-hero="3"] .hero__arch { border-color: rgba(251, 246, 241, .9); top: auto; bottom: 0; }
@media (min-width: 900px) {
  html[data-hero="3"] .hero__grid { grid-template-areas:
    "eye eye eye eye eye eye . . . . arch arch"
    "t1 t1 t1 t1 t1 t1 t1 t1 t1 . arch arch"
    "side side side side t2 t2 t2 t2 t2 t2 arch arch"; }
  html[data-hero="3"] .site-header { color: var(--cream); }
  html[data-hero="3"] .site-header .brand, html[data-hero="3"] .site-header .nav a { color: var(--cream); }
  html[data-hero="3"] .header-cta { background: var(--cream); border-color: var(--cream); color: var(--terra); }
  html[data-hero="3"][data-header="2"] .header-cta { background: none; border-color: var(--cream); color: var(--cream); }
  html[data-hero="3"][data-header="2"] .header-cta:hover { color: var(--ember); border-color: var(--ember); background: none; }
  html[data-hero="3"][data-header="3"] .site-header .brand, html[data-hero="3"][data-header="3"] .site-header .nav a { color: var(--terra); }
  html[data-hero="3"][data-header="3"] .site-header .nav a { color: var(--ink); }
}

/* phone versions of hero 2 and 3 */
@media (max-width: 899px) {
  html[data-hero="2"] .hero__grid { grid-template-areas: "eye eye" "t1 t1" "t2 t2" "side side"; }
  html[data-hero="2"] .hero__arch { position: absolute; grid-area: auto; right: calc(var(--gutter) + 8px); left: auto; top: auto; bottom: clamp(28px, 5svh, 64px); z-index: 4; max-width: 110px; }
  html[data-hero="2"] .hero__grid { position: static; }
  html[data-hero="2"] .band { height: 68svh; border-radius: 999px 999px 0 0; }
  html[data-hero="2"] .band__img img { object-position: 30% 60%; }
  html[data-hero="2"] .hero__side { padding-bottom: 26px; }
  html[data-hero="2"] .band__script { left: auto; right: 8%; width: 66%; bottom: 8%; }

  html[data-hero="3"] .hero { padding-top: calc(var(--header-h) + 24px); }
  html[data-hero="3"] .hero__grid { grid-template-areas: "arch arch" "eye eye" "t1 t1" "t2 t2" "side side"; }
  html[data-hero="3"] .hero__arch { justify-self: end; max-width: 120px; margin-bottom: 18px; }
  html[data-hero="3"] .band__img img { object-position: 40% 50%; }
  html[data-hero="3"] .band__script { top: calc(var(--header-h) + 30px); left: var(--gutter); right: auto; width: 54%; }
  html[data-hero="3"] .hero__side .btn { background: var(--cream); color: var(--terra); border-color: var(--cream); }
}

/* ---------------- Desktop footer options ---------------- */
/* 2: Arch footer, centred around the monogram */
html[data-footer="2"] .footer { border-radius: 50% 50% 0 0 / clamp(90px, 12vw, 240px) clamp(90px, 12vw, 240px) 0 0; padding-top: clamp(90px, 11vw, 180px); text-align: center; margin-top: 0; }
html[data-footer="2"] .footer::before { content: ""; display: block; width: 54px; aspect-ratio: 1500 / 2006; margin: 0 auto 28px; background: var(--ember); -webkit-mask: url("/img/monogram.svg?v=1") center / contain no-repeat; mask: url("/img/monogram.svg?v=1") center / contain no-repeat; }
html[data-footer="2"] .footer__tune { grid-template-columns: minmax(0, 1fr); justify-items: center; }
html[data-footer="2"] .footer__news { max-width: 560px; }
html[data-footer="2"] .news { justify-content: center; }
html[data-footer="2"] .footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
html[data-footer="2"] .footer__cols > div:nth-child(2) { order: 0; }
html[data-footer="2"] .footer__cols ul { justify-items: center; }
html[data-footer="2"] .footer__social { justify-content: center; }
html[data-footer="2"] .footer__mark .logo-wordmark { display: none; }
html[data-footer="2"] .footer__mark { padding-top: clamp(20px, 2.4vw, 32px); }
html[data-footer="2"] .footer { padding-bottom: 0; }
html[data-footer="2"] .footer__giant { display: block; padding: clamp(28px, 4vw, 64px) 1.4vw 1.2vw; line-height: 0; }
html[data-footer="2"] .footer__giant .logo-wordmark { width: 100%; color: var(--ember); }
html[data-footer="2"] .footer__base { justify-content: center; }
@media (max-width: 899px) { html[data-footer="2"] .footer__cols { grid-template-columns: minmax(0, 1fr); } }

/* 3: Light editorial footer, giant wordmark on top */
html[data-footer="3"] .footer { background: var(--sand); color: var(--ink-soft); border-top: 1px solid var(--line); }
html[data-footer="3"] .footer .wrap { display: flex; flex-direction: column; }
html[data-footer="3"] .footer__mark { order: -1; border-top: 0; padding-top: 0; padding-bottom: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); margin-bottom: clamp(28px, 4vw, 56px); }
html[data-footer="3"] .footer__mark .logo-wordmark { color: var(--terra); }
html[data-footer="3"] .footer__tag { color: var(--ink); }
html[data-footer="3"] .footer__tune { border-bottom-color: var(--line); }
html[data-footer="3"] .footer__tunein { color: var(--ink); }
html[data-footer="3"] .footer__h { color: var(--terra); }
html[data-footer="3"] .footer__soft { color: var(--ink); }
html[data-footer="3"] .footer a:hover { color: var(--terra); }
html[data-footer="3"] .footer__respects p { color: var(--ink-soft); }
html[data-footer="3"] .news input { color: var(--ink); border-bottom-color: rgba(58,20,17,.45); }
html[data-footer="3"] .news input::placeholder { color: var(--ink-soft); }
html[data-footer="3"] .news__ok { color: var(--terra); }
html[data-footer="3"] .footer .btn--cream { background: var(--terra); border-color: var(--terra); color: var(--cream); }
html[data-footer="3"] .footer .btn--cream:hover { background: var(--ember); border-color: var(--ember); color: var(--ink); }
html[data-footer="3"][data-btn="2"] .footer .btn--cream, html[data-footer="3"][data-btn="3"] .footer .btn--cream { background: none; color: var(--terra); }
html[data-footer="3"] .footer__base { color: var(--ink-soft); }
html[data-footer="3"] .footer .credit { color: var(--terra); }
html[data-footer="3"] .footer .credit:hover { color: var(--ink); }
html[data-footer="3"] .footer__cols { padding-top: clamp(32px, 4vw, 56px); }