/*
Theme Name: Cherry Pink — Maya Voss
Theme URI: https://example.com/
Author: Maya Voss
Description: One-page model portfolio: hero slideshow with clickable icons, About with Statistics and Favorites cards, Contact me pop-up with WhatsApp and QR code, Rates, editorial Gallery collage, Booking form with photo upload, Touring sign-up and footer. Every text, link, image, form field, colour and size is editable under Appearance → Customize → Maya Voss Theme. Form entries are saved in the dashboard and emailed to you.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cherrypink
*/

/* ---------- Design tokens ---------- */
:root {
  --color-ink: #111111;
  --color-paper: #F7F5F1;
  --color-canvas: #FFFFFF;
  --color-muted: #6B6B6B;
  --color-line: #E4E0D8;
  --color-accent: #8A6A3B;
  --color-accent-soft: #D8C6A6;
  --color-accent-mid: #B8935A;
  --color-overlay: rgba(10, 10, 10, 0.35);
  --color-error-bg: #FDECEC;
  --color-error-text: #B42318;
  --color-success-bg: #E6F4EA;
  --color-success-text: #1E7A34;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-title: 'Kaushan Script', cursive;

  --fs-body: 1.125rem;
  --fs-small: 0.875rem;
  /* Grey supporting text and the text inside form fields */
  --fs-secondary: 1rem;
  --fs-eyebrow: 0.75rem;
  --fs-h3: 1.875rem;
  --fs-h2: clamp(2.25rem, 5.5vw, 4rem);
  --fs-h1: clamp(2.5rem, 7vw, 5rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --content-width: 1200px;
  --radius: 6px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.1; }
p { margin: 0 0 var(--space-3); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font-family: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

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

/* ---------- Layout helpers ---------- */
.section {
  position: relative;
  z-index: 0;
  background: var(--color-paper);
  padding: var(--space-8) var(--space-4);
}
.section--muted {
  overflow: hidden;
  background: var(--color-canvas);
  background-image: radial-gradient(circle, rgba(138, 106, 59, 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
}
/* Faint couture fan-of-lines motif in opposite corners — a pleated,
   fashion-editorial line pattern, distinct from the shape-based motifs tried earlier. */
.section--muted::before,
.section--muted::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  max-width: 55vw;
  max-height: 55vw;
  pointer-events: none;
  opacity: 0.4;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%238A6A3B' stroke-width='1' stroke-linecap='round'%3E%3Cg transform='translate(390 10)'%3E%3Cline x1='0' y1='0' x2='-40' y2='190'/%3E%3Cline x1='0' y1='0' x2='-85' y2='175'/%3E%3Cline x1='0' y1='0' x2='-125' y2='150'/%3E%3Cline x1='0' y1='0' x2='-155' y2='115'/%3E%3Cline x1='0' y1='0' x2='-178' y2='75'/%3E%3Cline x1='0' y1='0' x2='-190' y2='30'/%3E%3Cline x1='0' y1='0' x2='-193' y2='-18'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.section--muted::before {
  top: 0;
  right: 0;
}
.section--muted::after {
  bottom: 0;
  left: 0;
  transform: rotate(180deg);
}
.hearts-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.heart-float {
  position: absolute;
  left: var(--heart-left-a);
  top: var(--heart-top-a);
  opacity: var(--heart-opacity);
  animation-name: heart-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes heart-float {
  0%   { left: var(--heart-left-a); top: var(--heart-top-a); transform: rotate(-5deg) scale(0.94); opacity: var(--heart-opacity); animation-timing-function: ease-in-out; }
  25%  { left: var(--heart-left-b); top: var(--heart-top-b); transform: rotate(4deg) scale(1.06); opacity: var(--heart-opacity); animation-timing-function: ease-in-out; }
  50%  { left: var(--heart-left-c); top: var(--heart-top-c); transform: rotate(-3deg) scale(0.97); opacity: calc(var(--heart-opacity) * 0.35); animation-timing-function: ease-in-out; }
  75%  { left: var(--heart-left-d); top: var(--heart-top-d); transform: rotate(5deg) scale(1.04); opacity: var(--heart-opacity); animation-timing-function: ease-in-out; }
  100% { left: var(--heart-left-e); top: var(--heart-top-e); transform: rotate(-4deg) scale(0.95); opacity: var(--heart-opacity); }
}
@media (prefers-reduced-motion: reduce) {
  .heart-float { animation: none; }
}
.section__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}
.section__inner--narrow {
  max-width: 720px;
}
.section__intro {
  color: var(--color-muted);
  font-size: var(--fs-secondary);
  max-width: 60ch;
}
#booking-intro {
  visibility: hidden;
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

h2 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.3;
  text-align: center;
  margin-bottom: var(--space-7);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.heading-pop {
  transform: scale(0.6);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.heading-pop.is-visible {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section dividers ---------- */
/* Sits at the very top edge of the section that follows it, so the glowing
   seam travels up with that section as it slides in and covers the one before it. */
.section-divider {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 0;
  pointer-events: none;
}
.section-divider__line {
  width: min(720px, 88vw);
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--color-accent-soft) 25%, var(--color-accent) 50%, var(--color-accent-soft) 75%, transparent);
  box-shadow: 0 0 14px rgba(138, 106, 59, 0.45);
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.section-divider.is-visible .section-divider__line {
  transform: scaleX(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .section-divider__line { transform: scaleX(1); opacity: 1; transition: none; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
}
.button--primary {
  background: var(--color-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-color: var(--color-accent-soft);
  box-shadow: 0 0 0 2px var(--color-accent-soft), 0 0 14px rgba(138, 106, 59, 0.3);
  animation: hero-button-glow 3.4s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.25s ease, border-color 0.25s ease;
}
.button--primary span {
  position: relative;
  z-index: 2;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .button--primary span {
    background: linear-gradient(100deg, #fff 35%, var(--color-accent-soft) 48%, var(--color-accent) 52%, #fff 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: hero-name-shimmer 3.2s ease-in-out infinite;
  }
}
.button--primary::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 244, 214, 0.75), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: button-shine-sweep 3.2s ease-in-out infinite;
}
.button--primary:hover {
  background: #2c2c2c;
  transform: translateY(-3px) scale(1.03);
  border-color: var(--color-accent);
  box-shadow: 0 0 22px rgba(138, 106, 59, 0.45);
}
.button--primary:hover::after {
  animation-duration: 0.7s;
}
.button--primary:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 0 10px rgba(138, 106, 59, 0.3);
}
.button:disabled { opacity: 0.6; cursor: not-allowed; }
.button--lg {
  padding: 1.1rem 2.75rem;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-accent-soft);
  box-shadow: 0 0 0 2px var(--color-accent-soft), 0 0 14px rgba(138, 106, 59, 0.3);
  opacity: 0;
  transform: translateY(28px) scale(0.86);
  animation:
    hero-button-bump 1.1s cubic-bezier(0.22, 1, 0.36, 1) both,
    hero-button-glow 3.4s ease-in-out 1.1s infinite;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.25s ease, border-color 0.25s ease;
}
@keyframes hero-button-bump {
  0% { opacity: 0; transform: translateY(28px) scale(0.86); }
  55% { opacity: 1; transform: translateY(-6px) scale(1.05); }
  75% { transform: translateY(2px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-button-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-accent-soft), 0 0 14px rgba(138, 106, 59, 0.3); }
  50% { box-shadow: 0 0 0 2px var(--color-accent), 0 0 20px rgba(216, 198, 166, 0.4); }
}
.button--lg span {
  position: relative;
  z-index: 2;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .button--lg span {
    background: linear-gradient(100deg, #fff 35%, var(--color-accent-soft) 48%, var(--color-accent) 52%, #fff 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: hero-name-shimmer 3.2s ease-in-out infinite;
  }
}
.button--lg::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 244, 214, 0.75), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: button-shine-sweep 3.2s ease-in-out infinite;
}
@keyframes button-shine-sweep {
  0%, 40% { left: -60%; }
  70%, 100% { left: 130%; }
}
.button--lg:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--color-accent);
  box-shadow: 0 0 22px rgba(138, 106, 59, 0.45);
}
.button--lg:hover::after {
  animation-duration: 0.7s;
}
.button--lg:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 0 10px rgba(138, 106, 59, 0.3);
}

/* ---------- Hero ---------- */
.hero {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero__slideshow {
  position: absolute;
  inset: 0;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__bg.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { transition: none; }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Light bronze wash (accent #8A6A3B) warms the photos to match the page */
    linear-gradient(135deg, rgba(216, 198, 166, calc(0.08 * var(--wash-hero, 1))), rgba(138, 106, 59, calc(0.14 * var(--wash-hero, 1)))),
    linear-gradient(rgba(247, 245, 241, 0.16), rgba(247, 245, 241, 0.16)),
    linear-gradient(180deg, rgba(10,10,10,0.15) 0%, var(--color-overlay) 70%, rgba(10,10,10,0.5) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-left: clamp(1.5rem, 7vw, 6rem);
  padding-right: var(--space-4);
  max-width: 900px;
  width: 100%;
}
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.3;
  padding: 0.12em 0;
  margin: var(--space-2) 0 var(--space-7);
  color: #fff;
  opacity: 0;
  letter-spacing: 0.35em;
  filter: blur(8px);
  transform: translateX(-32px);
  animation: hero-name-converge 1.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hero-name-converge {
  to { opacity: 1; letter-spacing: normal; filter: blur(0); transform: translateX(0); }
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 {
    background: linear-gradient(100deg, #fff 35%, var(--color-accent-soft) 48%, var(--color-accent) 52%, #fff 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation:
      hero-name-converge 1.7s cubic-bezier(0.16, 1, 0.3, 1) both,
      hero-name-shimmer 3.2s ease-in-out infinite;
  }
}
@keyframes hero-name-shimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.hero__hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero__hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Fades with its slide (same timing as .hero__bg) */
  transition: opacity 1.6s ease, visibility 0s linear 1.6s, box-shadow 0.3s ease, background 0.3s ease;
}
.hero__hotspot.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.6s ease, visibility 0s, box-shadow 0.3s ease, background 0.3s ease;
}
.hero__hotspot img {
  display: block;
  width: var(--icon-size, 52px);
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s ease;
}
.hero__hotspot:hover img,
.hero__hotspot:focus-visible img {
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .hero__hotspot,
  .hero__hotspot.is-active { transition: none; }
  .hero__hotspot img { transition: none; }
}
.hero__hotspot:hover,
.hero__hotspot:focus-visible {
  background: radial-gradient(circle, rgba(255, 244, 214, 0.22) 0%, transparent 70%);
  box-shadow: 0 0 24px rgba(216, 198, 166, 0.45);
}
.hero__hotspot:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}
.hero__hotspot[hidden] {
  display: none;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1.5px solid var(--color-accent-soft);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.25);
  backdrop-filter: blur(4px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(216, 198, 166, 0.35);
  animation: bob 2s ease-in-out infinite;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.hero__scroll:hover,
.hero__scroll:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-ink);
  box-shadow: 0 0 26px rgba(216, 198, 166, 0.6);
}
.hero__scroll-icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__scroll-icon path:first-child {
  opacity: 0.45;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

/* ---------- About ---------- */
#about .eyebrow {
  text-align: center;
}
.about__copy {
  max-width: 70ch;
  margin: 0 auto;
  font-size: var(--fs-body);
}
.about__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
/* Profile cards: framed like an editorial spec sheet, with the site's bronze accents */
.about-card,
.price-card,
.form-card {
  position: relative;
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 22px 44px -30px rgba(138, 106, 59, 0.45);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
/* Thin inner frame */
.about-card::before,
.price-card::before,
.form-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(216, 198, 166, 0.55);
  border-radius: 3px;
  pointer-events: none;
  transition: border-color 0.4s ease;
}
.about-card.is-visible:hover,
.price-card.is-visible:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-soft);
  box-shadow: 0 26px 50px -28px rgba(138, 106, 59, 0.55), 0 0 22px rgba(216, 198, 166, 0.35);
}
.about-card:hover::before,
.price-card:hover::before,
.form-card:hover::before {
  border-color: var(--color-accent-soft);
}
.about-card h3,
.price-card h3,
.form-card h3 {
  font-size: var(--fs-h3);
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 40px;
}
/* Short glowing bronze line under the title, echoing the section dividers */
.about-card h3::after,
.price-card h3::after,
.form-card h3::after {
  content: '';
  display: block;
  width: 72px;
  height: 1.5px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--color-accent-soft) 20%, var(--color-accent) 50%, var(--color-accent-soft) 80%, transparent);
  box-shadow: 0 0 10px rgba(138, 106, 59, 0.4);
}
.stats-strip {
  display: grid;
  margin: 0;
}
.stats-strip__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}
.stats-strip__item:last-child {
  border-bottom: 0;
}
.stats-strip__item dt {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.stats-strip__item dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: right;
}
@media (max-width: 700px) {
  .about__cards { grid-template-columns: 1fr; }
  .about-card,
  .price-card,
  .form-card { padding: var(--space-5) var(--space-4) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .about-card.is-visible:hover,
  .price-card.is-visible:hover { transform: none; }
}
.about__contact {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-8);
  /* Lands the hero's "Contact me" link with the button mid-screen, cards still in view above */
  scroll-margin-top: 45vh;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
}

/* ---------- Contact me pop-up ---------- */
.contact-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.3);
}
.contact-dialog::backdrop {
  background: rgba(10, 10, 10, 0.55);
}
.contact-dialog[open] {
  animation: contact-dialog-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes contact-dialog-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-dialog[open] { animation: none; }
}
.contact-dialog__panel {
  position: relative;
  padding: var(--space-5);
}
.contact-dialog h3 {
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-accent);
  text-align: center;
  margin: 0 0 var(--space-4);
}
.contact-dialog__intro {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-secondary);
  color: var(--color-muted);
}
.contact-direct[hidden],
.contact-direct__app[hidden],
.contact-direct__preview[hidden] {
  display: none;
}
.contact-direct__preview {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-accent-soft);
  border-radius: var(--radius);
  font-size: var(--fs-eyebrow);
  color: var(--color-accent);
}
.contact-direct__app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.contact-direct__app .contact-direct__link {
  width: 100%;
}
.contact-direct__app.is-preview .contact-direct__link {
  cursor: default;
}
.contact-direct__qr {
  width: 132px;
  height: 132px;
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
}
.contact-direct__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-direct__app.is-preview .contact-direct__qr {
  opacity: 0.55;
}
.contact-direct__qr-caption {
  margin: 0;
  font-size: var(--fs-secondary);
  color: var(--color-muted);
}
/* Phones open the app from the button; QR codes are for scanning from a computer screen */
@media (max-width: 700px) {
  .contact-direct__qr,
  .contact-direct__qr-caption { display: none; }
}
.contact-direct__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-secondary);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.contact-direct__links {
  display: flex;
  justify-content: center;
}
.contact-direct__links .contact-direct__app {
  width: min(100%, 280px);
}
.contact-direct__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.contact-direct__link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.contact-direct__link--whatsapp svg { color: #25D366; }
.contact-direct__link:hover,
.contact-direct__link:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-paper);
}
.contact-direct__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  font-size: var(--fs-secondary);
  color: var(--color-muted);
}
.contact-direct__divider::before,
.contact-direct__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-line);
}
#contact-submit {
  display: block;
  margin: var(--space-2) auto 0;
}
#contact-status {
  text-align: center;
}
.contact-dialog__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.contact-dialog__close:hover,
.contact-dialog__close:focus-visible {
  color: var(--color-ink);
}
@media (max-width: 600px) {
  .contact-dialog__panel { padding: var(--space-4); }
}

/* ---------- Pricing ---------- */
.price-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.price-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-list .price-row:last-child {
  border-bottom: 0;
}
@media (max-width: 900px) {
  .price-cards { grid-template-columns: 1fr; }
}
.price-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
}
.price-row__hours {
  flex: 1;
  font-size: var(--fs-body);
  color: var(--color-ink);
}
.price-row__cta {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--color-accent-soft);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  color: var(--color-ink);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(138, 106, 59, 0.3);
  animation: hero-button-glow 3.4s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.25s ease;
}
.price-row__cta span {
  position: relative;
  z-index: 2;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .price-row__cta span {
    background: linear-gradient(100deg, var(--color-ink) 35%, var(--color-accent-soft) 48%, var(--color-accent) 52%, var(--color-ink) 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: hero-name-shimmer 3.2s ease-in-out infinite;
  }
}
.price-row__cta::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 244, 214, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.price-row__cta:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--color-accent);
  box-shadow: 0 0 22px rgba(138, 106, 59, 0.45);
}
.price-row__cta:hover::after {
  left: 130%;
}
.price-row__cta:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 0 10px rgba(138, 106, 59, 0.3);
}
.price-row__amount {
  flex: 0 0 auto;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-accent);
}
.pricing-disclaimer {
  margin-top: var(--space-5);
  font-size: var(--fs-secondary);
  color: var(--color-muted);
  visibility: hidden;
}
@media (max-width: 700px) {
  .price-row {
    flex-wrap: wrap;
  }
  .price-row__hours {
    flex-basis: 100%;
    order: -1;
  }
  .price-row__amount {
    margin-left: auto;
  }
}

/* ---------- Gallery: editorial collage ---------- */
.gallery-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.gallery-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  cursor: pointer;
}
.gallery-filter input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.collage-card.is-filtered-out {
  display: none;
}
.collage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.collage-card {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.10);
}
.collage-card:hover,
.collage-card:focus-within {
  box-shadow: 0 16px 32px rgba(17, 17, 17, 0.18);
}
.collage-card__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: var(--color-ink);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius);
}
.collage-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(70%) contrast(1.02);
  transform: scale(1) rotate(0deg);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}
.collage-card__frame:hover img,
.collage-card__frame:focus-visible img {
  filter: grayscale(0%) contrast(1.05);
  transform: scale(1.08) rotate(-0.6deg);
}
/* Always-on bottom scrim for label legibility, deepens on hover */
.collage-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,0.55) 100%);
  opacity: 0.55;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.collage-card__frame:hover .collage-card__scrim,
.collage-card__frame:focus-visible .collage-card__scrim {
  opacity: 0.8;
}
/* Light bronze wash (accent #8A6A3B) over each photo; eases off on hover so the true colours show */
.collage-card__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(216, 198, 166, calc(0.22 * var(--wash-gallery, 1))), rgba(138, 106, 59, calc(0.3 * var(--wash-gallery, 1))));
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.collage-card__frame:hover::after,
.collage-card__frame:focus-visible::after {
  opacity: 0.35;
}
/* Viewfinder-style corner marks */
.collage-card__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-accent-soft);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
}
.collage-card__corner--tl {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
  transform: translate(-6px, -6px);
}
.collage-card__corner--br {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
  transform: translate(6px, 6px);
}
.collage-card__frame:hover .collage-card__corner,
.collage-card__frame:focus-visible .collage-card__corner {
  opacity: 1;
  transform: translate(0, 0);
}
/* Editorial plate-number label, bottom-left */
.collage-card__index {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
}
.collage-card__frame:hover .collage-card__index,
.collage-card__frame:focus-visible .collage-card__index {
  opacity: 1;
  transform: translateY(0);
}
/* Minimal square expand affordance, top-right */
.collage-card__zoom {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.collage-card__frame:hover .collage-card__zoom,
.collage-card__frame:focus-visible .collage-card__zoom {
  opacity: 1;
  transform: scale(1);
}

/* Scroll-triggered "zoom out into place" entrance: cards start slightly
   zoomed in and faded out, then ease down to their resting size. Reuses
   the .reveal / .is-visible toggle already driven by main.js. */
.reveal-zoom {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}
.collage-card:nth-child(1) { transition-delay: 0ms; }
.collage-card:nth-child(2) { transition-delay: 60ms; }
.collage-card:nth-child(3) { transition-delay: 120ms; }
.collage-card:nth-child(4) { transition-delay: 180ms; }
.collage-card:nth-child(5) { transition-delay: 240ms; }
.collage-card:nth-child(6) { transition-delay: 300ms; }
.collage-card:nth-child(7) { transition-delay: 360ms; }
.collage-card:nth-child(8) { transition-delay: 420ms; }
.collage-card:nth-child(9) { transition-delay: 480ms; }
.collage-card:nth-child(10) { transition-delay: 540ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-zoom { opacity: 1; transform: none; transition: none; }
  .collage-card:hover,
  .collage-card:focus-within { transform: none; }
  .collage-card__frame:hover img,
  .collage-card__frame:focus-visible img { transform: none; filter: none; }
}
/* Editorial collage: frames of different shapes and sizes. Each group of five photos
   is one big portrait plus tall, wide and square frames; the second group mirrors the first. */
@media (min-width: 861px) {
  .collage-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(110px, 11vw, 170px);
  }
  .collage-card { aspect-ratio: auto; }
  .collage-card:nth-child(1)  { grid-column: 1 / 3; grid-row: 1 / 5; }
  .collage-card:nth-child(2)  { grid-column: 3 / 4; grid-row: 1 / 3; }
  .collage-card:nth-child(3)  { grid-column: 4 / 7; grid-row: 1 / 3; }
  .collage-card:nth-child(4)  { grid-column: 3 / 5; grid-row: 3 / 5; }
  .collage-card:nth-child(5)  { grid-column: 5 / 7; grid-row: 3 / 5; }
  .collage-card:nth-child(6)  { grid-column: 5 / 7; grid-row: 5 / 9; }
  .collage-card:nth-child(7)  { grid-column: 1 / 4; grid-row: 5 / 7; }
  .collage-card:nth-child(8)  { grid-column: 4 / 5; grid-row: 5 / 7; }
  .collage-card:nth-child(9)  { grid-column: 1 / 3; grid-row: 7 / 9; }
  .collage-card:nth-child(10) { grid-column: 3 / 5; grid-row: 7 / 9; }
  /* Keep faces in frame when a portrait is cropped into a wide shape */
  .collage-card__frame img { object-position: center 25%; }
  /* This photo's face sits low in the frame */
  .collage-card:nth-child(5) .collage-card__frame img { object-position: center 70%; }
}
/* Tablets and phones: two columns, a wide frame then two staggered columns of tall and short frames */
@media (max-width: 860px) {
  .collage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(90px, 22vw, 150px);
    grid-auto-flow: dense;
  }
  .collage-card { aspect-ratio: auto; grid-row: span 2; }
  .collage-card:nth-child(5n + 1) { grid-column: span 2; }
  .collage-card:nth-child(5n + 3),
  .collage-card:nth-child(5n + 4) { grid-row: span 3; }
  .collage-card__frame img { object-position: center 25%; }
}
@media (max-width: 340px) {
  .collage-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .collage-card,
  .collage-card:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  border: none;
  padding: 0;
  background: rgba(10, 10, 10, 0.95);
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox[open] {
  display: flex;
}
.lightbox::backdrop {
  background: rgba(10, 10, 10, 0.95);
}
.lightbox img {
  max-width: min(90vw, 900px);
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255,255,255,0.25);
}
.lightbox__close { top: var(--space-4); right: var(--space-4); }
.lightbox__nav--prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox__close, .lightbox__nav { width: 40px; height: 40px; }
}

/* ---------- Forms ---------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
/* Booking form parts side by side; no hover lift so the form stays still while typing */
.form-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
/* Roomier photo box in the booking card */
.form-card .form-field input[type="file"] {
  padding: var(--space-5) var(--space-4);
  border-style: dashed;
  border-color: var(--color-accent-soft);
  background: var(--color-paper);
}
/* Screening heading sits as close to the field above as the other field labels do */
.form-card .form-field--checkbox-group {
  margin-top: calc(-1 * var(--space-3));
}
/* Project details box sized so both booking cards end level (it still grows when dragged) */
.form-card .form-field textarea {
  height: 205px;
}
/* Screening choices run across the card instead of down it, keeping both cards a similar height */
.form-card .checkbox-list {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-3) var(--space-4);
  margin-left: 0;
  /* Space between the screening notes and the choices */
  margin-top: var(--space-3);
}
/* Touring has one card */
.form-cards--single {
  grid-template-columns: 1fr;
}
@media (max-width: 1000px) {
  .form-cards { grid-template-columns: 1fr; }
}
/* Side by side, the cards are half width: name / last name / email go two per row */
@media (min-width: 1001px) {
  .form-card .form-row--3 { grid-template-columns: 1fr 1fr; }
  .form-card .form-row--3 > :last-child { grid-column: 1 / -1; }
}
.form-field {
  margin-bottom: var(--space-4);
}
.form-field label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-body);
  margin-bottom: var(--space-2);
}
.form-field .optional {
  font-size: var(--fs-secondary);
  font-weight: 400;
  color: var(--color-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-secondary);
  background: var(--color-canvas);
  min-height: 44px;
}
.form-field textarea { min-height: 120px; resize: vertical; }
/* Phone: country code picker in front of the number */
.phone-input {
  display: flex;
  gap: var(--space-2);
}
.form-field .phone-input select {
  flex: 0 0 auto;
  width: auto;
  min-width: 7.5rem;
}
.form-field .phone-input input {
  flex: 1;
  min-width: 0;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-error-text);
}
.form-field input[type="file"] {
  padding: 0.55rem 0.85rem;
  font-size: var(--fs-secondary);
  cursor: pointer;
}
.form-field input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.form-field input[type="file"]::file-selector-button:hover {
  background: var(--color-accent);
  color: #fff;
}
.form-field input[type="file"][aria-invalid="true"] {
  border-color: var(--color-error-text);
}
.form-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-secondary);
  color: var(--color-muted);
}
.form-notice {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-secondary);
  color: var(--color-muted);
}
.form-field--checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.form-field--checkbox-group legend {
  display: block;
  padding: 0;
  margin-bottom: var(--space-3);
  font-weight: 600;
  font-size: var(--fs-body);
}
.checkbox-group__notes {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-secondary);
  color: var(--color-muted);
}
.checkbox-group__notes li + li {
  margin-top: var(--space-1);
}
.checkbox-group__notes li::before {
  content: '- ';
}
.checkbox-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  margin-left: auto;
}
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
}
.checkbox-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--color-accent-soft);
  border-radius: 50%;
  background: var(--color-canvas);
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 10px rgba(138, 106, 59, 0.3);
  animation: hero-button-glow 3.4s ease-in-out infinite;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.checkbox-option input[type="checkbox"]:checked {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0 14px rgba(138, 106, 59, 0.5);
}
.checkbox-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.checkbox-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#booking-submit,
#tour-submit {
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.form-error {
  color: var(--color-error-text);
  font-size: var(--fs-small);
  margin: var(--space-1) 0 0;
  min-height: 1.2em;
}
.form-status {
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: var(--fs-small);
}
.form-status.is-success { color: var(--color-success-text); }
.form-status.is-error { color: var(--color-error-text); }
@media (max-width: 600px) {
  .form-row,
  .form-row--3 { grid-template-columns: 1fr; }
  .form-row--keep { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}
@media (max-width: 860px) and (min-width: 601px) {
  .form-row--3 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: var(--space-6) var(--space-8);
  /* Same bronze dot texture as the Rates and Booking sections, with a soft glow from the top */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(216, 198, 166, 0.28), transparent 65%),
    radial-gradient(circle, rgba(138, 106, 59, 0.16) 1px, transparent 1px),
    var(--color-canvas);
  background-size: auto, 26px 26px, auto;
  color: var(--color-muted);
  font-size: var(--fs-small);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.site-footer__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-title);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-ink);
}
.site-footer__copyright {
  margin: 0;
  font-size: var(--fs-body);
}
.site-footer__follow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-body);
}
.site-footer__follow span {
  margin-right: var(--space-3);
}
.site-footer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent-soft);
  background: var(--color-canvas);
  box-shadow: 0 0 14px rgba(138, 106, 59, 0.25);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-footer__icon img {
  display: block;
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}
.site-footer__icon:hover,
.site-footer__icon:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-paper);
  box-shadow: 0 0 22px rgba(138, 106, 59, 0.4);
}
.site-footer__icon:hover img,
.site-footer__icon:focus-visible img {
  transform: scale(1.1);
}
.site-footer__icon:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__icon img { transition: none; }
}
/* Phones: stack and centre */
@media (max-width: 860px) {
  .site-footer { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (max-width: 600px) {
  .site-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .site-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}


/* ---------- WordPress ---------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
/* Pages other than the front page (e.g. a privacy policy) */
.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}
.page-content h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  text-align: center;
  margin-bottom: var(--space-6);
}
.page-content a { color: var(--color-accent); }
/* In the Customizer preview, sections re-rendered while editing show at once */
.customize-partial-edit-shortcuts-shown .reveal,
.customize-partial-edit-shortcuts-shown .reveal-zoom { opacity: 1; transform: none; }