/* ============================================================
   BY RIDDZ — shared stylesheet
   Colours:  porcelain #F3F1EC · ink #171512 · antique gold #9C7C43
   Fonts:    Bodoni Moda (headings) · Jost (body)
   ============================================================ */

:root {
  --porcelain: #F3F1EC;
  --ink: #171512;
  --gold: #9C7C43;
  --grey-box: #DDD9D1;
  --hairline: rgba(23, 21, 18, 0.18);
  /* set from design.json via the Design sidebar */
  --font-heading: "Bodoni Moda";
  --font-body: "Jost";
  --heading-scale: 1;
  --body-size: 17px;
  --photo-corners: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-body), sans-serif;
  font-weight: 300;
  font-size: var(--body-size);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading), serif;
  font-weight: 500;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 6vw;
}

/* ---------- Announcement bar (Design panel) ---------- */

#rz-announce {
  background: var(--ink);
  color: var(--porcelain);
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
}

/* ---------- Hidden sections (eye toggle in Edit Mode) ---------- */

[data-rz-hidden] { display: none !important; }

body[data-rz-editing="1"] [data-rz-hidden] {
  display: block !important;
  opacity: 0.4;
}

/* ---------- Header / navigation ---------- */

.site-header {
  padding: 2.5rem 6vw 2rem;
  text-align: center;
}

.brand {
  font-family: var(--font-heading), serif;
  font-size: 2rem;
  letter-spacing: 0.45em;
  text-indent: 0.45em; /* balances the letter-spacing */
  text-transform: uppercase;
  display: block;
}

.brand-sub {
  display: none; /* "London Atelier" line retired at the owner's request */
  font-family: var(--font-body), sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.6rem;
}

.site-nav {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2.8rem;
}

.site-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- The menu button (sewing machine) ---------- */
/* On every screen size, the menu waits behind a little
   sewing-machine button in the top-right corner. */

.site-header { position: relative; }

.rz-menutoggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  background: none;
  border: none;
  padding: 0.45rem;
  color: var(--ink);
  cursor: pointer;
}

.rz-menutoggle:hover,
body.rz-menu-open .rz-menutoggle { color: var(--gold); }

.site-header .site-nav { display: none; }

body.rz-menu-open .site-header .site-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  padding-bottom: 0.6rem;
  animation: rz-menu-down 0.28s ease;
}

@keyframes rz-menu-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Common elements ---------- */

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.section {
  padding: 6rem 0;
}

.section + .section { padding-top: 0; }

.section-title {
  font-size: calc(clamp(2rem, 4vw, 3rem) * var(--heading-scale));
  margin-bottom: 1.2rem;
}

.lede {
  max-width: 34em;
  font-size: 1.05rem;
}

.centered { text-align: center; }
.centered .lede { margin-left: auto; margin-right: auto; }

.rule {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.gold-rule {
  width: 3.5rem;
  border: none;
  border-top: 1px solid var(--gold);
  margin: 2rem 0;
}

.centered .gold-rule { margin-left: auto; margin-right: auto; }

/* Buttons */

.btn {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 1.05rem 2.6rem;
  border: 1px solid var(--ink);
  border-radius: var(--btn-radius, 0);
  transition: all 0.35s ease;
}

.btn:hover {
  background: var(--ink);
  color: var(--porcelain);
}

.btn-gold {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-gold:hover {
  background: var(--gold);
  color: var(--porcelain);
}

.text-link {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.25rem;
}

/* ---------- Photo placeholders ---------- */

.photo-placeholder {
  background: var(--grey-box);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* zoomed photos stay inside their frame */
  border-radius: var(--photo-corners);
}

.photo-placeholder span {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(23, 21, 18, 0.4);
}

.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-landscape { aspect-ratio: 16 / 9; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-tall { aspect-ratio: 2 / 3; }

/* ---------- Collection category chooser ---------- */

#category-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--porcelain);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}

.cat-inner { text-align: center; max-width: 60rem; width: 100%; }

.cat-inner h2 {
  font-size: calc(clamp(1.8rem, 3.5vw, 2.6rem) * var(--heading-scale));
  margin-bottom: 3rem;
}

.cat-options {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cat-option {
  flex: 1 1 240px;
  max-width: 340px;
  border: 1px solid var(--ink);
  padding: 3.2rem 2rem;
  transition: all 0.35s ease;
}

.cat-option h3 {
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.cat-option p { font-size: 0.92rem; opacity: 0.75; }

.cat-option:hover { background: var(--ink); color: var(--porcelain); }
.cat-option:hover p { opacity: 0.85; }

/* Made to Order — temporarily locked / "Coming Soon" */
.cat-option.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}
.cat-option.is-locked:hover { background: none; color: inherit; }
.cat-option.is-locked:hover p { opacity: 0.75; }
.cat-badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 0.4em 0.85em;
  margin-bottom: 1.3rem;
}

.cat-all {
  display: inline-block;
  margin-top: 2.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.25rem;
}

.cat-viewing {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.cat-viewing .cat-switch {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  margin-left: 1.2rem;
  cursor: pointer;
}

/* ---------- Embed slots (Shopify / Calendly) ---------- */

.embed-slot {
  border: 1px dashed var(--gold);
  padding: 2.2rem 2rem;
  text-align: center;
  margin-top: 2rem;
}

.embed-slot p {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.embed-slot small {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(23, 21, 18, 0.55);
  text-transform: none;
}

/* ---------- Home: hero ---------- */

.hero {
  padding: 5rem 0 6rem;
  text-align: center;
}

.hero h1 {
  font-size: calc(clamp(2.6rem, 6vw, 4.6rem) * var(--heading-scale));
  font-weight: 400;
  max-width: 16em;
  margin: 0 auto 1.6rem;
}

.hero .lede { margin: 0 auto 3rem; }

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 4.5rem;
}

/* Full-width banner hero: the photo sits behind the words */

.hero-banner {
  position: relative;
  padding: 7rem 6vw;
  overflow: hidden;
}

.hero-banner .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-banner .hero-content {
  position: relative;
  z-index: 1;
}

.hero-banner .hero-actions { margin-bottom: 0; }

/* Banner height + text position (Design panel) */

.hero-banner.rz-banner-compact { padding: 3.5rem 6vw; }

.hero-banner.rz-banner-tall {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-banner.rz-banner-tall .hero-content { width: 100%; }

.hero-banner.rz-align-left .hero-content,
.hero-banner.rz-align-right .hero-content { text-align: left; }
.hero-banner.rz-align-right .hero-content { text-align: right; }

.hero-banner.rz-align-left .hero-content h1,
.hero-banner.rz-align-left .hero-content .lede { margin-left: 0; margin-right: auto; }
.hero-banner.rz-align-right .hero-content h1,
.hero-banner.rz-align-right .hero-content .lede { margin-right: 0; margin-left: auto; }

.hero-banner.rz-align-left .hero-actions { justify-content: flex-start; }
.hero-banner.rz-align-right .hero-actions { justify-content: flex-end; }

/* Once a photo fills the banner, the words turn porcelain and the
   buttons sit on smoked glass — black and gold, never lost in the
   photo. (With no photo, everything stays ink on porcelain.) */

.hero-banner.rz-has-photo .hero-content { color: var(--porcelain); }

.hero-banner.rz-has-photo .btn {
  background: rgba(23, 21, 18, 0.55);
  color: var(--porcelain);
}

.hero-banner.rz-has-photo .btn:hover {
  background: var(--ink);
  color: var(--porcelain);
}

.hero-banner.rz-has-photo .btn-gold {
  border-color: var(--gold);
  color: #D9B87A;
}

.hero-banner.rz-has-photo .btn-gold:hover {
  background: var(--gold);
  color: var(--porcelain);
}

/* ---------- Grids ---------- */

.grid-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 2.5rem;
  margin-top: 3.5rem;
}

/* three per row, centred whatever the count */
.grid-3 > * { flex: 0 1 calc((100% - 5rem) / 3); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 4rem;
  margin-top: 3.5rem;
}

.piece-card { text-align: center; }

.piece-card .photo-placeholder {
  transition: opacity 0.35s ease;
}

.piece-card:hover .photo-placeholder { opacity: 0.85; }

.piece-card h3 {
  font-size: calc(1.25rem * var(--heading-scale));
  margin-top: 1.6rem;
}

.piece-card .piece-meta {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.55rem;
}

/* ---------- Projects gallery wall ---------- */

.gallery-wall {
  columns: 3;
  column-gap: 1.6rem;
  margin-top: 3.5rem;
}

.gallery-wall .photo-placeholder {
  break-inside: avoid;
  margin-bottom: 1.6rem;
}

/* ---------- Product detail ---------- */

.product-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5rem;
  align-items: start;
  padding: 4rem 0 6rem;
}

.product-gallery {
  display: grid;
  gap: 1.5rem;
}

.product-gallery .thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.product-info h1 {
  font-size: calc(clamp(1.9rem, 3.4vw, 2.7rem) * var(--heading-scale));
  margin-bottom: 1rem;
}

.price {
  font-family: var(--font-heading), serif;
  font-size: 1.35rem;
  color: var(--gold);
  margin-bottom: 2rem;
}

.product-info .detail-list {
  list-style: none;
  margin: 2rem 0;
  border-top: 1px solid var(--hairline);
}

.product-info .detail-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.product-info .detail-list li span:first-child {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: rgba(23, 21, 18, 0.55);
  padding-top: 0.15rem;
  white-space: nowrap;
}

.back-link {
  display: inline-block;
  margin: 3rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.back-link:hover { color: var(--gold); }

/* ---------- Appointments ---------- */

.booking-block {
  border: 1px solid var(--hairline);
  padding: 3.5rem 3rem;
}

.booking-block h2 {
  font-size: calc(1.8rem * var(--heading-scale));
  margin-bottom: 1rem;
}

.booking-block .duration {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}

/* ---------- About ---------- */

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: start;
  padding: 4rem 0;
}

.about-layout .prose p + p { margin-top: 1.4rem; }

blockquote {
  font-family: var(--font-heading), serif;
  font-style: italic;
  font-size: calc(clamp(1.4rem, 2.6vw, 2rem) * var(--heading-scale));
  max-width: 26em;
  margin: 0 auto;
  padding: 5rem 0;
  text-align: center;
}

blockquote cite {
  display: block;
  font-family: var(--font-body), sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1.8rem;
}

/* ---------- Contact ---------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  padding: 4rem 0 6rem;
  align-items: start;
}

.contact-details p + p { margin-top: 1.3rem; }

.contact-details .label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

form .field { margin-bottom: 1.8rem; }

form label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

form input,
form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 0.7rem 0;
  font-family: var(--font-body), sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  border-radius: 0;
}

form input:focus,
form textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

form textarea { resize: vertical; min-height: 8rem; }

form button {
  cursor: pointer;
  background: transparent;
  font-family: var(--font-body), sans-serif;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--hairline);
  padding: 4rem 6vw 3rem;
  text-align: center;
}

.site-footer .brand { font-size: 1.1rem; }

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem 2.2rem;
  margin: 2rem 0;
}

.footer-nav a {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.footer-nav a:hover { color: var(--gold); }

.site-footer .fine {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(23, 21, 18, 0.5);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .grid-3 > * { flex-basis: calc((100% - 2.5rem) / 2); }
  .gallery-wall { columns: 2; column-gap: 1.2rem; }
  .gallery-wall .photo-placeholder { margin-bottom: 1.2rem; }
  .product-layout,
  .about-layout,
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid-3 > * { flex-basis: 100%; }
  .hero h1 { font-size: 2.1rem; padding: 0 0.6rem; }
  .hero-banner { padding: 4.5rem 6vw; }
  .brand { font-size: 1.5rem; }
  .site-nav { gap: 0.8rem 1.6rem; }
  .section { padding: 4rem 0; }
  .booking-block { padding: 2.5rem 1.8rem; }
}

/* On phones the hero VIDEO is shown pure: full width, edge to edge, at
   its own natural height, with NO crop, fade, blur or border. The
   banner stops being a fixed-height stage with the video behind the
   words — instead the video sits at the top and the words drop directly
   beneath it, so the collection below rises up to meet it and there is
   no empty space. Desktop is untouched; photos are unaffected. */
@media (max-width: 760px) {
  .hero-banner {
    /* !important beats the .rz-banner-compact / .rz-banner-tall design
       classes, which are more specific and would otherwise keep their
       6vw side padding — pushing the video off the screen edges. */
    padding: 0 !important;
    display: block;
    overflow: visible;
    min-height: 0;
  }
  .hero-banner .hero-bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    background: transparent;
  }
  .hero-banner .hero-bg .rz-video-main {
    position: static;
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* The words now sit below the video on the normal background, so put
     them back to readable ink-on-porcelain (not the porcelain-on-photo
     treatment used when they overlay a filled banner). */
  .hero-banner .hero-content {
    position: relative;
    z-index: 1;
    padding: 2.4rem 6vw 0.5rem;
  }
  .hero-banner.rz-has-photo .hero-content { color: var(--ink); }
  .hero-banner.rz-has-photo .btn {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
  }
  .hero-banner.rz-has-photo .btn:hover {
    background: var(--ink);
    color: var(--porcelain);
  }
  .hero-banner.rz-has-photo .btn-gold {
    border-color: var(--gold);
    color: var(--gold);
  }
  .hero-banner.rz-has-photo .btn-gold:hover {
    background: var(--gold);
    color: var(--porcelain);
  }
}