/*
Theme Name: Surf Tatts
Theme URI: https://surftattstudio.wordpress.com/
Author: Surf Tatts
Description: Bespoke retro editorial one-page theme for Surf Tatts.
Version: 1.3.4
Requires at least: 6.5
Text Domain: surf-tatts
*/

@import url("https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Caveat:wght@500;600&family=Oswald:wght@400;500;600&family=Work+Sans:wght@400;500;600&display=swap");

:root {
  --orange: #b75c29;
  --pink: #e67585;
  --yellow: #eab04e;
  --olive: #5c6035;
  --soft-olive: #b6b76e;
  --turquoise: #8db5b4;
  --burgundy: #4b2b33;
  --cream: #f5e7c5;
  --paper: #f8edcf;
  --ink: #4b2b33;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Work Sans", sans-serif;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }

.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(75,43,51,.055) .7px, transparent .7px),
    linear-gradient(90deg, rgba(183,92,41,.035), transparent 40%, rgba(92,96,53,.035));
  background-size: 7px 7px, 100% 100%;
}
.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1580px;
  margin: auto;
  padding: 22px 3.8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { width: clamp(112px, 10vw, 166px); flex: 0 0 auto; }
.brand img, .footer-logo img { border-radius: 50%; mix-blend-mode: multiply; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 38px); font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; }
.nav::before { content: "✦"; color: var(--orange); font-size: 1.6rem; margin-right: auto; }
.nav a { position: relative; font-size: .95rem; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--orange); transition: right .2s; }
.nav a:hover::after { right: 0; }
.cart-button { cursor: pointer; border: 0; background: transparent; color: var(--burgundy); font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.cart-button span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-left: 4px; border-radius: 50%; background: var(--pink); color: var(--burgundy); }
.menu-button { display: none; background: none; border: 0; padding: 12px; }
.menu-button span { display: block; width: 28px; height: 2px; background: var(--burgundy); margin: 7px; }

.hero {
  position: relative;
  min-height: 900px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 49% 51%;
  align-items: center;
  padding: 165px 3.8vw 38px;
}
.hero::before { content: ""; position: absolute; left: 15%; right: 4%; top: 79px; height: 2px; background: var(--orange); opacity: .85; pointer-events: none; }
.hero::after {
  content: "";
  position: absolute;
  left: -72px;
  bottom: -110px;
  width: 310px;
  height: 300px;
  background: url("assets/fortuna.jpg") 18% 75% / 760px auto no-repeat;
  opacity: .17;
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
  filter: sepia(1) saturate(1.8) hue-rotate(315deg);
  border-radius: 44% 56% 42% 58%;
}
.hero-copy { position: relative; top: -82px; z-index: 3; max-width: 690px; padding-left: 3.2vw; }
.script { font-family: "Caveat", cursive; font-weight: 600; }
.eyebrow { color: var(--orange); font-size: clamp(1.45rem, 2vw, 2rem); margin: 0 0 10px 2.5rem; transform: rotate(-1deg); }
.eyebrow::after { content: ""; display: block; width: 340px; max-width: 70%; border-bottom: 3px solid var(--orange); margin-top: 2px; }
h1, h2, h3 { margin-top: 0; }
h1, h2 { font-family: "Bowlby One SC", "Arial Black", sans-serif; text-transform: uppercase; letter-spacing: -.045em; line-height: .92; }
h1 {
  position: relative;
  color: var(--burgundy);
  font-size: clamp(5rem, 6.9vw, 8.2rem);
  margin-bottom: 28px;
  padding: 8px 0 18px 24px;
  border-left: 5px solid var(--pink);
  border-bottom: 4px solid var(--orange);
  text-shadow: 1px 1px rgba(75,43,51,.13);
}
h1::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 12%;
  bottom: 4%;
  width: 3px;
  background: var(--pink);
  transform: rotate(1deg);
  opacity: .72;
}
h1::after {
  content: "•••";
  position: absolute;
  right: 3%;
  bottom: -17px;
  color: var(--orange);
  font: 700 1.15rem/1 "Work Sans", sans-serif;
  letter-spacing: .4em;
  background: var(--paper);
  padding-left: 12px;
}
h1 span { display: block; white-space: nowrap; }
.hero-intro { max-width: 560px; font-size: clamp(1.06rem, 1.4vw, 1.35rem); font-weight: 600; line-height: 1.55; }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  border: 2px solid var(--orange);
  border-radius: 3px;
  padding: 12px 24px;
  background: var(--orange);
  color: #fff7e6;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.button:hover { transform: translateY(-2px) rotate(-.3deg); box-shadow: 5px 5px 0 var(--burgundy); }
.button.outline { color: var(--burgundy); background: transparent; border-color: var(--burgundy); }
.button.compact { min-height: 46px; padding: 9px 18px; }
.button.pale { color: var(--burgundy); background: var(--cream); border-color: var(--cream); }
.hero-collage { position: relative; top: -76px; height: 800px; z-index: 2; margin-left: 0; }
.photo { background: #f4e7c7; padding: 12px; box-shadow: 0 9px 18px rgba(75,43,51,.22); }
.photo img { height: 100%; object-fit: cover; }
.photo-main { position: absolute; width: 72%; height: 710px; left: 3%; top: 24px; transform: rotate(-1deg); clip-path: polygon(1% 2%, 5% 1%, 10% 2%, 16% 0, 23% 1.5%, 31% .5%, 39% 2%, 47% .5%, 56% 1.5%, 64% 0, 73% 1.5%, 81% .5%, 89% 2%, 98% 1%, 99% 8%, 98% 16%, 100% 25%, 98% 34%, 99% 43%, 97.5% 53%, 99% 62%, 98% 72%, 100% 82%, 98% 91%, 99% 98%, 90% 99%, 82% 97.5%, 73% 99%, 64% 98%, 55% 100%, 46% 98%, 37% 99.5%, 28% 98%, 18% 100%, 9% 98%, 1% 99%, 2% 90%, 0 81%, 2% 72%, .5% 63%, 2% 53%, 0 44%, 1.5% 35%, 0 25%, 2% 16%); padding: 9px; }
.photo-main img { object-position: center center; }
.photo-beach { position: absolute; width: 31%; height: 270px; right: 2%; top: 330px; transform: rotate(5deg); z-index: 3; clip-path: polygon(2% 1%, 12% 2%, 23% 0, 35% 2%, 47% 1%, 59% 3%, 72% 0, 84% 2%, 99% 1%, 98% 14%, 100% 28%, 98% 42%, 99% 57%, 97% 72%, 99% 86%, 97% 99%, 84% 98%, 71% 100%, 57% 97%, 43% 99%, 29% 97%, 15% 99%, 1% 97%, 2% 84%, 0 70%, 2% 56%, 0 42%, 2% 27%, 0 13%); padding: 9px; }
.photo-flash { position: absolute; width: 43%; height: 245px; right: -2%; bottom: -6px; transform: rotate(4deg); z-index: 4; clip-path: polygon(1% 2%, 11% 0, 22% 2%, 34% .5%, 46% 2%, 58% 0, 70% 2%, 83% .5%, 99% 3%, 98% 16%, 100% 31%, 98% 47%, 99% 63%, 97% 79%, 98% 98%, 85% 97%, 71% 99%, 57% 97%, 43% 100%, 29% 97%, 15% 99%, 1% 96%, 2% 82%, 0 66%, 2% 50%, 0 34%, 2% 18%); padding: 8px; }
.botanical { position: absolute; color: var(--pink); font-size: 6rem; opacity: .58; z-index: 1; }
.botanical-one { top: 110px; right: 1.8%; transform: rotate(14deg); }
.botanical-two { bottom: 55px; left: 36%; color: var(--olive); font-size: 3rem; }
.hero-florals {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/fortuna.jpg");
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: sepia(1) saturate(1.65) hue-rotate(315deg);
}
.hero-florals-left {
  width: 310px;
  height: 245px;
  left: -95px;
  top: 185px;
  background-size: 720px auto;
  background-position: 4% 10%;
  opacity: .25;
  transform: rotate(-8deg);
  mask-image: radial-gradient(ellipse at 38% 40%, #000 20%, transparent 72%);
}
.hero-florals-right {
  width: 360px;
  height: 270px;
  right: -15px;
  top: 92px;
  background-size: 680px auto;
  background-position: 93% 24%;
  opacity: .24;
  transform: rotate(8deg);
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
}
.surf-silhouette {
  position: absolute;
  z-index: 1;
  left: 35%;
  bottom: 105px;
  width: clamp(210px, 18vw, 300px);
  height: 330px;
  background: url("assets/silhouette-transparent.png") center bottom / contain no-repeat;
  opacity: .5;
  mix-blend-mode: multiply;
  filter: saturate(.82) contrast(1.04);
  transform: rotate(-3deg);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 83%, transparent 100%);
}

.marquee {
  position: relative;
  overflow: hidden;
  padding: 17px 0 16px;
  background-color: var(--yellow);
  background-image:
    radial-gradient(circle at 9px 8px, rgba(230,117,133,.3) 0 3px, transparent 3.5px),
    radial-gradient(circle at 28px 27px, rgba(141,181,180,.28) 0 2px, transparent 2.5px),
    repeating-linear-gradient(-7deg, transparent 0 24px, rgba(248,237,207,.12) 25px 27px);
  background-size: 38px 38px, 45px 45px, auto;
  color: var(--burgundy);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .11em;
  white-space: nowrap;
  box-shadow: inset 0 3px rgba(248,237,207,.5), inset 0 -3px rgba(183,92,41,.25);
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(7vw, 90px);
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--yellow), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--yellow), transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: scroll 30s linear infinite; }
.marquee-track span { padding: 0 22px; font-size: 1.08rem; text-shadow: 1px 1px rgba(248,237,207,.5); }
.marquee-track b {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  color: var(--orange);
  font: 600 1.55rem/1 "Caveat", cursive;
  transform: rotate(-7deg);
}
.marquee-track b:nth-of-type(3n + 1) { color: var(--pink); }
.marquee-track b:nth-of-type(3n + 2) { color: var(--olive); transform: rotate(8deg); }
@keyframes scroll { to { transform: translateX(-50%); } }

.section { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 145px) 6vw; }
.section > *:not(.section-art) { position: relative; z-index: 1; }
.section-art { position: absolute; pointer-events: none; z-index: 0; opacity: .14; mix-blend-mode: multiply; background-repeat: no-repeat; }
.section-heading { max-width: 800px; margin-bottom: 55px; }
.kicker { color: var(--orange); font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
h2 { font-size: clamp(3.2rem, 6vw, 7rem); }
.section-heading h2 { margin-bottom: 25px; }
.section-heading h2 .script { color: var(--orange); font-size: .67em; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.section-heading > p:last-child, .split-heading > p { font-size: 1.15rem; line-height: 1.7; max-width: 680px; }
.services { background: var(--cream); color: var(--burgundy); }
.services .kicker { color: var(--orange); }
.services .section-heading h2 .script { color: var(--orange); }
.service-art { width: 470px; height: 470px; right: -95px; top: 45px; background: url("assets/silhouette-transparent.png") center bottom / contain no-repeat; filter: saturate(.72) contrast(1.08); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(75,43,51,.28); border: 1px solid rgba(75,43,51,.28); }
.service-card { padding: 35px 28px 45px; background: var(--soft-olive); color: var(--burgundy); min-height: 330px; }
.service-card span { font-family: "Caveat", cursive; color: var(--orange); font-size: 2rem; }
.service-card h3, .journey-grid h3 { font-family: "Oswald", sans-serif; font-size: 1.65rem; text-transform: uppercase; margin: 48px 0 20px; }
.service-card p, .journey-grid p { line-height: 1.7; }
.section-cta { display: flex; justify-content: center; margin-top: 52px; }

.library { background: var(--cream); }
.library-art { width: 520px; height: 390px; left: -110px; bottom: 25px; background: url("assets/fortuna.jpg") 20% 58% / 820px auto no-repeat; filter: sepia(1) saturate(1.5) hue-rotate(315deg); mask-image: radial-gradient(ellipse, #000 20%, transparent 72%); }
.split-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; max-width: none; align-items: end; }
.split-heading p { margin-bottom: 20px; }
.design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.design-card { margin: 0; cursor: pointer; transition: transform .25s; }
.design-card:nth-child(2n) { transform: rotate(1deg); }
.design-card:nth-child(3n) { transform: rotate(-1deg); }
.design-card:hover { transform: translateY(-6px) rotate(0); }
.design-card img { aspect-ratio: 4/5; object-fit: cover; border: 11px solid #f8efdb; box-shadow: 3px 5px 13px rgba(75,43,51,.18); filter: saturate(.88) contrast(.96); }
.design-card figcaption { display: flex; justify-content: space-between; padding: 12px 4px; font-family: "Oswald", sans-serif; text-transform: uppercase; }
.design-card figcaption span:last-child { color: var(--orange); font-size: .8rem; }
.library-note { text-align: center; color: var(--orange); font-size: clamp(1.8rem, 3vw, 3rem); margin: 70px 0 0; }

.shop { background: var(--yellow); }
.shop::after { content: "✿"; position: absolute; right: -35px; top: 35px; color: var(--pink); font: 160px/1 "Caveat", cursive; opacity: .42; transform: rotate(13deg); }
.shop-heading { display: grid; grid-template-columns: 1.05fr .75fr; align-items: end; gap: 8vw; margin-bottom: 60px; }
.shop-heading h2 { margin-bottom: 0; }
.shop-intro { max-width: 620px; font-size: 1.1rem; line-height: 1.7; }
.shop-intro .script { color: var(--orange); font-size: clamp(1.6rem, 2.5vw, 2.5rem); line-height: 1.15; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.product-card { background: var(--paper); padding: 14px 14px 20px; box-shadow: 5px 7px 0 rgba(75,43,51,.18); }
.product-card:nth-child(2n) { transform: rotate(.5deg); }
.product-image { overflow: hidden; background: var(--cream); }
.product-image img { aspect-ratio: 1/1; object-fit: cover; transition: transform .3s; }
.product-card:hover .product-image img { transform: scale(1.035); }
.product-collection { margin: 17px 0 5px; color: var(--orange); font: 600 .75rem/1.2 "Oswald", sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.product-card h3 { margin: 0 0 18px; font: 600 1.75rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.product-options { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; border-top: 1px solid rgba(75,43,51,.2); padding-top: 15px; }
.product-options label { font-size: .8rem; }
select { width: 100%; border: 1px solid rgba(75,43,51,.35); background: #fffaf0; color: var(--burgundy); padding: 10px; }
.product-buy { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; }
.product-buy strong { font: 600 1.45rem/1 "Oswald", sans-serif; }
.product-buy .button { min-height: 45px; }
.shop-note { max-width: 780px; display: flex; align-items: center; gap: 18px; margin: 55px auto 0; text-align: center; }
.shop-note span { color: var(--orange); font-size: 3rem; }
.shop-note p { line-height: 1.6; }

.image-break { position: relative; height: 460px; overflow: hidden; background: var(--pink); }
.image-break img { position: absolute; left: 50%; bottom: -30%; width: min(920px, 88vw); height: auto; transform: translateX(-50%); opacity: .42; mix-blend-mode: multiply; filter: saturate(.78); }
.image-break p { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--cream); font: 600 clamp(3rem, 8vw, 8rem)/1 "Bowlby One SC", sans-serif; text-transform: uppercase; letter-spacing: -.04em; text-align: center; text-shadow: 3px 3px var(--burgundy); }

.proof { background: var(--soft-olive); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.proof-art { width: 430px; height: 430px; right: -115px; top: 55px; background: url("assets/nosara.jpg") 76% 45% / 720px auto no-repeat; filter: sepia(1) saturate(1.2); mask-image: radial-gradient(circle, #000 12%, transparent 68%); }
.proof-images { min-height: 650px; position: relative; }
.proof-large { position: absolute; width: 75%; height: 590px; left: 0; top: 0; transform: rotate(-3deg); }
.proof-small { position: absolute; width: 48%; height: 390px; right: 0; bottom: 0; transform: rotate(5deg); }
.proof-copy h2 { color: var(--burgundy); }
.proof-copy > p { max-width: 610px; line-height: 1.75; font-size: 1.07rem; }
.text-link { cursor: pointer; border: 0; background: transparent; color: var(--burgundy); padding: 10px 0; font-weight: 600; border-bottom: 2px solid var(--orange); }

.bottle-showcase { background: #f2c94f; display: grid; grid-template-columns: .82fr 1.18fr; gap: 8vw; align-items: center; }
.bottle-showcase::before {
  content: "";
  position: absolute;
  width: 410px;
  height: 410px;
  left: -150px;
  bottom: -165px;
  border: 3px solid rgba(183,92,41,.24);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(234,176,78,.08);
}
.bottle-copy h2 { font-size: clamp(3.2rem, 5.3vw, 6.6rem); }
.bottle-copy > p:not(.kicker):not(.script) { max-width: 610px; line-height: 1.75; font-size: 1.07rem; }
.bottle-copy .script { color: var(--orange); font-size: clamp(1.55rem, 2.4vw, 2.45rem); line-height: 1.2; }
.bottle-images { position: relative; min-height: 720px; }
.bottle-photo { position: absolute; margin: 0; background: #f8efdb; }
.bottle-photo img { object-fit: cover; object-position: center; }
.bottle-photo figcaption { padding: 12px 4px 2px; color: var(--orange); font: 600 .88rem/1.25 "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.bottle-front { width: 58%; height: 680px; left: 1%; top: 0; transform: rotate(-3deg); }
.bottle-back { width: 52%; height: 610px; right: 0; bottom: 0; transform: rotate(4deg); }
.bottle-front img, .bottle-back img { height: calc(100% - 38px); }

.events { background: var(--orange); color: var(--cream); display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.events .kicker { color: var(--yellow); }
.events-copy p { font-size: 1.1rem; line-height: 1.75; max-width: 600px; }
.events-cta { grid-column: 1 / -1; margin-top: 18px; }
.event-stamp { border: 3px solid var(--cream); border-radius: 50%; min-height: 500px; display: grid; place-items: center; padding: 70px; transform: rotate(3deg); box-shadow: inset 0 0 0 12px var(--orange), inset 0 0 0 14px var(--cream); }
.event-stamp span { font: 600 clamp(1.5rem, 2.3vw, 2.5rem)/1 "Caveat", cursive; transform: rotate(-3deg); }

.journey { background: var(--paper); }
.journey-art { width: 620px; height: 320px; right: -90px; top: -30px; background: url("assets/silhouette-transparent.png") center bottom / contain no-repeat; opacity: .1; mask-image: linear-gradient(90deg, transparent, #000 42%, #000); }
.journey-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--burgundy); }
.journey-grid article { padding: 30px 24px; border-right: 1px solid rgba(75,43,51,.25); }
.journey-grid article:last-child { border-right: 0; }
.journey-grid span { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pink); font-family: "Oswald", sans-serif; font-weight: 600; }
.journey-grid h3 { margin-top: 35px; }

.carrie { background: var(--turquoise); display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: center; }
.carrie-art { width: 420px; height: 420px; right: -110px; bottom: 25px; background: url("assets/montezuma.jpg") 68% 42% / 690px auto no-repeat; filter: sepia(1) saturate(1.35) hue-rotate(315deg); mask-image: radial-gradient(circle, #000 10%, transparent 68%); }
.carrie-photo { transform: rotate(-2deg); padding: 16px; }
.carrie-photo img { aspect-ratio: 4/5; object-position: center; }
.carrie-copy .script { color: var(--orange); font-size: clamp(1.7rem, 3vw, 2.8rem); }
.carrie-copy > p:not(.kicker):not(.script) { max-width: 650px; line-height: 1.75; font-size: 1.08rem; }

.final-cta { background: var(--burgundy); color: var(--cream); text-align: center; }
.final-art { inset: 0; width: auto; height: auto; background: url("assets/silhouette-transparent.png") center bottom / min(900px, 82vw) auto no-repeat; opacity: .1; filter: grayscale(1); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.final-cta .script { color: var(--pink); font-size: clamp(1.6rem, 3vw, 2.8rem); }
.final-cta h2 { font-size: clamp(4rem, 9vw, 10rem); margin-bottom: 45px; }
.final-cta .button { margin: auto; }
.final-cta > span { display: block; margin-top: 18px; opacity: .8; }
footer { padding: 45px 6vw; background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.footer-logo { width: 120px; }
footer > div { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
footer button { border: 0; background: transparent; color: var(--orange); cursor: pointer; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(75,43,51,.82); display: none; place-items: center; padding: 20px; overflow-y: auto; }
.modal-backdrop.is-open { display: grid; }
.cart-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(75,43,51,.7); }
.cart-drawer { position: absolute; top: 0; right: 0; width: min(500px, 100%); height: 100%; overflow-y: auto; background: var(--paper); padding: 55px 35px 35px; box-shadow: -10px 0 0 var(--orange); }
.cart-drawer h2 { font-size: clamp(3.5rem, 7vw, 5.5rem); }
.empty-cart { border-top: 1px solid rgba(75,43,51,.25); padding-top: 28px; }
.cart-items { border-top: 1px solid rgba(75,43,51,.25); }
.cart-item { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(75,43,51,.2); }
.cart-item img { width: 100px; height: 100px; object-fit: cover; }
.cart-item h3 { margin: 0 0 6px; font: 600 1.2rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.cart-item p { margin: 0 0 12px; }
.quantity { display: inline-flex; align-items: center; border: 1px solid rgba(75,43,51,.3); }
.quantity button { cursor: pointer; width: 32px; height: 30px; border: 0; background: transparent; color: var(--burgundy); }
.quantity span { min-width: 28px; text-align: center; }
.cart-total, .checkout-summary { display: flex; justify-content: space-between; align-items: center; padding: 22px 0 8px; font: 600 1.25rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.shipping-note { margin: 8px 0 24px; font-size: .85rem; opacity: .75; }
.checkout-button { width: 100%; }
.checkout-summary { border-top: 2px solid var(--burgundy); margin-top: 8px; }
.booking-modal { position: relative; width: min(720px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--paper); padding: clamp(34px, 6vw, 70px); box-shadow: 14px 14px 0 var(--orange); }
.booking-modal h2 { font-size: clamp(2.6rem, 5vw, 4.8rem); margin-bottom: 20px; }
.booking-modal > p { line-height: 1.6; }
.modal-close { position: absolute; top: 12px; right: 18px; border: 0; background: none; color: var(--burgundy); font-size: 2.5rem; cursor: pointer; }
form { display: grid; gap: 18px; margin-top: 28px; }
label { display: grid; gap: 7px; font-family: "Oswald", sans-serif; text-transform: uppercase; font-weight: 600; }
input, textarea { width: 100%; border: 1px solid rgba(75,43,51,.45); border-radius: 0; background: #fffaf0; padding: 13px; color: var(--burgundy); font-family: "Work Sans", sans-serif; text-transform: none; }
input:focus, textarea:focus { outline: 3px solid rgba(183,92,41,.3); border-color: var(--orange); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form small { line-height: 1.5; }
.form-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.consent-label { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; font-family: "Work Sans", sans-serif; font-size: .9rem; line-height: 1.45; text-transform: none; font-weight: 400; }
.consent-label input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); }
.form-status { min-height: 1.5em; margin: 0; line-height: 1.5; }
.form-status.is-error { color: #9a2635; font-weight: 600; }
.booking-form.is-sending { opacity: .72; pointer-events: none; }
.confirmation { text-align: center; padding: 20px 0; }
.confirmation > span { color: var(--orange); font-size: 4rem; }
.confirmation p:not(.kicker) { line-height: 1.7; margin-bottom: 30px; }

/* Client showcase — v1.3 */
.showcase-inline-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.showcase-library-link { margin: 34px 0 0; text-align: center; }
.showcase-page { min-height: 100vh; background: var(--paper); }
.showcase-page .site-header { position: relative; }
.showcase-hero { position: relative; overflow: hidden; padding: clamp(65px, 7vw, 105px) 7vw clamp(75px, 8vw, 120px); background: var(--yellow); color: var(--burgundy); }
.showcase-hero::before, .showcase-hero::after { content: "✿"; position: absolute; color: rgba(183,92,41,.25); font-size: clamp(150px, 25vw, 380px); line-height: 1; }
.showcase-hero::before { top: -90px; right: -55px; transform: rotate(16deg); }
.showcase-hero::after { bottom: -175px; left: 28%; transform: rotate(-18deg); }
.showcase-hero > * { position: relative; z-index: 1; }
.showcase-hero .kicker { margin: 0 0 clamp(38px, 5vw, 72px); }
.showcase-hero-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: clamp(45px, 6vw, 105px); align-items: center; }
.showcase-hero h1 { min-width: 0; margin: 0; font-size: clamp(4.8rem, 8.1vw, 9rem); line-height: .82; letter-spacing: -.055em; color: var(--burgundy); }
.showcase-hero-intro { max-width: 520px; }
.showcase-hero .script { margin: 0 0 30px; font-size: clamp(2rem, 2.7vw, 3.4rem); line-height: 1.08; color: var(--orange); }
.showcase-hero-intro > p:last-child { margin: 0; max-width: 510px; font-size: 1.08rem; line-height: 1.75; }
.showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(45px, 7vw, 100px) clamp(28px, 5vw, 75px); padding: clamp(75px, 10vw, 150px) 7vw; background: var(--paper); }
.showcase-card a { display: block; color: inherit; }
.showcase-card figure { position: relative; height: min(62vw, 680px); max-height: 680px; overflow: hidden; margin: 0 0 26px; background: var(--soft-olive); clip-path: polygon(1% 2%, 98% 0, 100% 97%, 2% 100%, 0 52%); }
.showcase-card:nth-child(even) figure { clip-path: polygon(0 0, 99% 2%, 97% 100%, 1% 98%); transform: rotate(1deg); }
.showcase-card figure::after { content: "View"; position: absolute; inset: auto 18px 18px auto; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--orange); color: var(--paper); font: 600 .82rem/1 "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase; transform: scale(.9); transition: transform .2s; }
.showcase-card a:hover figure::after { transform: scale(1); }
.showcase-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.showcase-card a:hover img { transform: scale(1.035); }
.showcase-card h2 { margin: 7px 0 13px; font-size: clamp(2.3rem, 4.1vw, 4.8rem); line-height: .95; }
.showcase-view { color: var(--orange); font: 600 1rem/1 "Oswald", sans-serif; text-transform: uppercase; }
.showcase-card:nth-child(3n+2) { margin-top: 70px; }
.showcase-empty { grid-column: 1 / -1; padding: 80px 0; text-align: center; font-size: 1.2rem; }
.showcase-cta { min-height: 600px; }

.showcase-viewer { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--burgundy); color: var(--paper); }
.admin-bar .showcase-viewer { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
.viewer-bar { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 22px clamp(20px, 4vw, 60px); background: var(--burgundy); }
.viewer-bar h1 { margin: 3px 0 0; max-width: 72vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); font: 600 clamp(1.45rem, 2.7vw, 3rem)/1 "Oswald", sans-serif; letter-spacing: .01em; }
.viewer-bar .kicker { margin: 0; color: var(--yellow); }
.viewer-actions { display: flex; align-items: center; gap: 22px; }
.viewer-count { white-space: nowrap; font: 600 1rem/1 "Oswald", sans-serif; }
.viewer-close { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: var(--paper); font-size: 2.4rem; line-height: 1; }
.viewer-stage { position: relative; min-height: 0; overflow: hidden; background: #24161a; touch-action: pan-y; }
.viewer-slide { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .28s; }
.viewer-slide.is-active { opacity: 1; visibility: visible; }
.viewer-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; }
.viewer-slide img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
.viewer-arrow { position: absolute; z-index: 3; top: 50%; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(75,43,51,.82); box-shadow: 0 4px 18px rgba(0,0,0,.28); color: #fff; font-size: 1.8rem; cursor: pointer; transform: translateY(-50%); }
.viewer-prev { left: clamp(12px, 2vw, 28px); }
.viewer-next { right: clamp(12px, 2vw, 28px); }
.viewer-dots { display: flex; justify-content: center; gap: 9px; padding: 14px 20px; background: var(--burgundy); }
.viewer-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--paper); border-radius: 50%; background: transparent; cursor: pointer; }
.viewer-dots button.is-active { background: var(--yellow); border-color: var(--yellow); }
.viewer-caption { max-height: 90px; overflow-y: auto; padding: 0 6vw 18px; text-align: center; line-height: 1.5; background: var(--burgundy); }
.viewer-caption p { margin: 0; }

@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .nav a { display: none; }
  .nav .cart-button { display: none; }
  .hero { grid-template-columns: 49% 51%; min-height: 820px; }
  .hero-collage { top: -52px; height: 680px; }
  .photo-main { height: 560px; }
  .photo-beach { height: 245px; }
  .photo-flash { height: 300px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .journey-grid { grid-template-columns: repeat(3, 1fr); }
  .journey-grid article { border-bottom: 1px solid rgba(75,43,51,.25); }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.35rem, 12.5vw, 3rem) !important; padding-right: 0; }
  .site-header { position: absolute; padding: 14px 18px; }
  .brand { width: 100px; }
  .menu-button { display: block; position: relative; z-index: 22; }
  .nav { display: none; position: fixed; inset: 0; z-index: 21; background: var(--paper); padding: 110px 30px 40px; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .nav.open { display: flex; }
  .nav a { display: block; font-size: 1.5rem; padding: 10px 0; }
  .hero { display: block; min-height: auto; padding: 145px 22px 70px; }
  .hero::before { left: 118px; right: 72px; top: 65px; }
  .hero-copy { top: 0; padding-left: 0; }
  .hero-copy { text-align: left; }
  .eyebrow { margin-left: 0; }
  h1 { max-width: 100%; font-size: clamp(2.75rem, 14vw, 5.25rem); padding-left: 14px; border-left-width: 4px; }
  .hero-intro { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-collage { top: 0; margin: 50px 0 0; height: 580px; }
  .photo-main { left: 0; width: 84%; height: 520px; }
  .photo-beach { width: 40%; height: 205px; top: 250px; }
  .photo-flash { width: 51%; height: 210px; bottom: 0; }
  .surf-silhouette {
    left: auto;
    right: -48px;
    bottom: 535px;
    width: 165px;
    height: 230px;
    opacity: .3;
    transform: rotate(-4deg);
  }
  .hero-florals-left {
    width: 180px;
    height: 160px;
    left: -72px;
    top: 365px;
    opacity: .17;
  }
  .hero-florals-right {
    width: 170px;
    height: 150px;
    right: -72px;
    top: 675px;
    opacity: .16;
  }
  .botanical-one { top: 555px; right: -18px; font-size: 4rem; opacity: .35; }
  .botanical-two { left: 8px; bottom: 30px; font-size: 2.2rem; opacity: .35; }
  .hero::after { width: 175px; height: 170px; left: -88px; bottom: -55px; opacity: .12; }
  .marquee { padding: 13px 0 12px; }
  .marquee-track span { padding: 0 14px; font-size: .92rem; }
  .marquee-track b { min-width: 27px; font-size: 1.3rem; }
  .section { padding: 75px 22px; }
  .section-art { opacity: .09; }
  .service-art { width: 210px; height: 210px; right: -105px; top: 205px; }
  .library-art { width: 210px; height: 180px; left: -105px; bottom: 10px; }
  .proof-art { width: 190px; height: 190px; right: -100px; top: 235px; }
  .journey-art { width: 210px; height: 140px; right: -95px; top: 170px; }
  .carrie-art { width: 190px; height: 190px; right: -95px; bottom: 30px; }
  .final-art { opacity: .07; }
  h2 {
    max-width: 100%;
    font-size: clamp(2.5rem, 11.5vw, 4.5rem);
    letter-spacing: -.06em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  .bottle-copy h2 { font-size: clamp(2.35rem, 10.6vw, 4.2rem); }
  .final-cta h2 { font-size: clamp(3rem, 13.5vw, 5rem); }
  .section-heading h2 .script { white-space: normal; }
  .service-grid, .design-grid, .split-heading, .shop-heading, .product-grid, .proof, .bottle-showcase, .events, .carrie { grid-template-columns: 1fr; }
  .shop-heading { gap: 25px; }
  .shop::after { right: -55px; top: 140px; font-size: 120px; }
  .product-card:nth-child(n) { transform: none; }
  .service-card { min-height: 280px; }
  .design-grid { gap: 40px; }
  .design-card:nth-child(n) { transform: none; }
  .image-break { height: 320px; }
  .image-break img { bottom: -12%; width: 145vw; opacity: .32; }
  .proof { gap: 60px; }
  .proof-images { min-height: 520px; }
  .proof-large { height: 480px; }
  .proof-small { height: 280px; }
  .bottle-showcase { gap: 55px; }
  .bottle-showcase::before { width: 210px; height: 210px; left: -125px; bottom: -90px; }
  .bottle-images { min-height: 600px; }
  .bottle-front { width: 69%; height: 560px; left: 0; }
  .bottle-back { width: 59%; height: 500px; right: 0; }
  .events { gap: 70px; }
  .event-stamp { min-height: 360px; padding: 50px; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid article { border-right: 0; }
  .carrie-photo { max-width: 520px; }
  footer, footer > div { align-items: flex-start; flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .booking-modal { padding-top: 58px; box-shadow: 7px 7px 0 var(--orange); }
  .showcase-inline-links { gap: 16px; }
  .showcase-hero { padding: 105px 22px 75px; }
  .showcase-hero .kicker { margin-bottom: 32px; }
  .showcase-hero-layout { display: block; }
  .showcase-hero h1 { max-width: 100%; font-size: clamp(2.55rem, 13.3vw, 5.8rem); line-height: .86; letter-spacing: -.065em; overflow-wrap: normal; }
  .showcase-hero-intro { max-width: 100%; }
  .showcase-hero .script { margin: 42px 0 24px; font-size: clamp(1.9rem, 8vw, 3rem); }
  .showcase-hero-intro > p:last-child { font-size: 1rem; line-height: 1.7; }
  .showcase-grid { grid-template-columns: 1fr; padding: 75px 22px; }
  .showcase-card:nth-child(n) { margin-top: 0; }
  .showcase-card figure { height: 122vw; max-height: 620px; }
  .showcase-card h2 { font-size: clamp(2.65rem, 12vw, 4.5rem); }
  .showcase-cta { min-height: 520px; }
  .viewer-bar { padding: 12px 14px; }
  .viewer-bar .kicker { display: none; }
  .viewer-bar h1 { max-width: 58vw; font-size: 1.25rem; }
  .viewer-actions { gap: 11px; }
  .viewer-close { width: 43px; height: 43px; font-size: 2rem; }
  .viewer-arrow { width: 44px; height: 44px; font-size: 1.4rem; }
  .viewer-caption { max-height: 100px; padding: 0 20px 14px; font-size: .88rem; }
}

@media (max-width: 782px) {
  .admin-bar .showcase-viewer { height: calc(100vh - 46px); height: calc(100dvh - 46px); }
}

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