/* ============================================================
   Petel Swimwear — style.css
   Palette: warm sand background, soft brown ink, raspberry accent
   ============================================================ */

:root {
  --bg: #faf6f0;          /* warm sand */
  --bg-alt: #f1e9de;      /* deeper sand for placeholders */
  --ink: #3a2e2a;         /* warm brown-charcoal */
  --muted: #9c8d83;
  --accent: #c04f6b;      /* raspberry */
  --accent-dark: #a53c56;
  --line: #e5dbcf;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Assistant", "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
}

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

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
figure { position: relative; }

.center { text-align: center; margin-top: 3rem; }
.muted { color: var(--muted); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  gap: 1rem;
}

.nav-links { display: flex; gap: 2rem; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }

.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.nav-links a:hover { border-color: var(--accent); }

/* The logo is the supplied brand lockup (see tools/make-logo.sh). The image
   is emitted at 3x, so it is sized here by width and stays crisp on retina. */
.logo { display: block; line-height: 0; }
.logo img { display: block; width: 114px; height: auto; }
.footer .logo img { width: 132px; }

/* Mobile nav */
.nav-toggle {
  display: none;
  justify-self: start;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); margin: 5px 0;
  transition: transform 0.25s, opacity 0.25s;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 1rem 1.5rem 1.5rem;
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a {
  padding: 0.7rem 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.mobile-menu.open { display: flex; }

/* ---------- Placeholder system ----------
   Every image slot is a .ph figure with a real <img> inside.
   Until the file exists, js/main.js adds .ph-empty and the
   styled placeholder shows. Drop the real photo into /images
   with the right filename and it appears automatically. */
.ph {
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(192, 79, 107, 0.16), transparent 60%),
    linear-gradient(160deg, var(--bg-alt) 0%, #e8dccb 55%, #e0cfba 100%);
}
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.ph-empty img { display: none; }
.ph.ph-empty::after {
  content: "Photo coming soon ✿";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(58, 46, 42, 0.45);
  letter-spacing: 0.05em;
}
.ph.ph-empty::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(58, 46, 42, 0.14);
  pointer-events: none;
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.ph-hero { height: min(88vh, 780px); }
.ph-hero.ph-empty::after { font-size: 1.3rem; }

/* Bottom-aligned, not centred. The hero photo is a three-portrait
   composition with faces across the middle — centred text lands straight on
   the central model's face. Sitting the copy in the lower third keeps all
   three faces clear, and the gradient is weighted to the bottom so the text
   has contrast without dimming the whole image. */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 2rem 2rem 3.2rem;
  color: #fdf9f3;
  background: linear-gradient(rgba(30, 20, 16, 0.05),
                              rgba(30, 20, 16, 0.14) 28%,
                              rgba(30, 20, 16, 0.46) 55%,
                              rgba(30, 20, 16, 0.78));
}
/* With no photo the fallback is plain sand, so recentre it. */
.hero:has(.ph-empty) .hero-content { justify-content: center; padding: 2rem; }
/* When the hero photo is still missing, keep the original dark-on-sand look */
.hero:has(.ph-empty) .hero-content { color: var(--ink); background: none; }
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero:has(.ph-empty) h1 { text-shadow: none; }
.hero-content .hero-kicker { color: #ffd9e2; }
.hero:has(.ph-empty) .hero-kicker { color: var(--accent); }
.hero-content .btn { background: #fdf9f3; color: var(--ink); border-color: #fdf9f3; }
.hero-content .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.hero-content .hero-kicker,
.hero-content .hero-offer { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.hero:has(.ph-empty) .hero-kicker,
.hero:has(.ph-empty) .hero-offer { text-shadow: none; }

.hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  font-weight: 500;
  margin-bottom: 1.1rem;
}

/* Sale line. Sits between the headline and the CTA; the price is the loud
   part, the qualifier stays quiet so the two do not compete. */
.hero-offer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.9rem;
  color: #fdf9f3;
}
.hero-offer-line {
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero-offer-price {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(253, 249, 243, 0.45);
}
/* Cormorant has no shekel glyph and Assistant's is far heavier than
   Cormorant's numerals, so setting them at the same size looks like a
   mistake. Treated as a currency mark instead: smaller, raised, in the sans. */
.hero-offer-price .cur {
  font-family: var(--sans);
  font-size: 0.58em;
  font-weight: 400;
  vertical-align: 0.22em;
  margin-right: 0.1em;
}
.hero:has(.ph-empty) .hero-offer { color: var(--ink); }
.hero:has(.ph-empty) .hero-offer-price { border-left-color: rgba(58, 46, 42, 0.3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.95rem 2.4rem;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
  background: var(--bg);
}
.marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  /* Duration is tied to track width, not taste: one half must be wider
     than the widest viewport or the loop shows a gap, and the duration
     scales with it to hold the scroll at roughly 50px/s. */
  animation: scroll 75s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  white-space: nowrap;
}
.marquee-track i { color: var(--accent); font-style: normal; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { max-width: 1200px; margin: 0 auto; padding: 6rem 1.5rem 4rem; }

.section-head { text-align: center; margin-bottom: 3.5rem; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.7rem; }
.section-head p { color: var(--muted); }

/* ---------- Product grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

.ph-product { aspect-ratio: 3 / 4; }
.card:hover .ph-product img { transform: scale(1.04); }
.ph-product img { transition: transform 0.5s ease; }

.tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  z-index: 2;
}

.card-info { padding: 1rem 0.2rem; text-align: center; }
.card-info h3 { font-size: 1.35rem; }
.card-info .muted { font-size: 0.85rem; }
.card-info .price { margin-top: 0.35rem; font-weight: 500; letter-spacing: 0.05em; }

/* ---------- Story ---------- */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 3rem 1.5rem;
  gap: 4rem;
}
.ph-story { aspect-ratio: 4 / 5; }
.story-text h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); margin-bottom: 1.2rem; }
.story-text p { margin-bottom: 1.2rem; max-width: 42ch; }
.story-text .btn-outline { margin-top: 0.5rem; }

/* Hebrew story block. Cormorant carries no Hebrew glyphs, so a Hebrew heading
   set in it falls back to whatever serif the device happens to have — which
   differs on every machine. Assistant carries the whole block: it is already
   loaded and was picked partly because it supports Hebrew. */
.story-he { direction: rtl; text-align: right; }
.story-he h2 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1.4rem;
}
.story-he p { max-width: 46ch; line-height: 1.8; }
.story-sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--accent);
  margin-top: 1.6rem;
}

/* ---------- Lookbook ---------- */
.lookbook {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 1.5rem;
  align-items: end;
}
.ph-look { aspect-ratio: 3 / 4; }
.ph-look.tall { aspect-ratio: 3 / 4.6; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--bg-alt);
  text-align: center;
  padding: 5rem 1.5rem;
  margin-top: 4rem;
}
.newsletter h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 0.8rem; }
.newsletter p { color: var(--muted); margin-bottom: 2rem; }
.newsletter strong { color: var(--accent); font-weight: 600; }

.newsletter form {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.newsletter input {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--ink);
  background: var(--bg);
  min-width: 280px;
  outline: none;
}
.newsletter input:focus { border-color: var(--accent); }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 4rem 1.5rem 2.5rem;
}
.footer .logo { display: inline-block; margin-bottom: 1.5rem; }
.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-links a:hover { color: var(--accent); }
.footer .muted { font-size: 0.8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .story { grid-template-columns: 1fr; gap: 2.5rem; }
  .lookbook { grid-template-columns: 1fr 1fr; }
  .ph-look.tall { display: none; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .logo img { width: 96px; }
  .ph-hero { height: 70vh; }
  .grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 4rem 1rem 3rem; }
  .lookbook { grid-template-columns: 1fr; }
}


/* ---------- Accessibility & motion ----------
   Added alongside the social-card work: visible focus rings for keyboard
   users, a skip link, and an opt-out for the marquee. */

/* Visually hidden but still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 0.7rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 0.2s;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* The newsletter input previously set `outline: none` with nothing in its
   place, which left keyboard users with no visible focus at all. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.newsletter input:focus-visible { outline-offset: 1px; }

/* Honeypot — off-screen rather than display:none, which bots detect. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-msg {
  min-height: 1.5rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.form-msg a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}
.form-msg.is-ok { color: var(--accent); }
.form-msg.is-err { color: #b3261e; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .marquee { text-align: center; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Product cards as buttons ----------
   The whole card opens the gallery, so it is a real <button>: keyboard and
   screen-reader support come for free. These rules just undo button chrome. */
.card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.card-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Product gallery ---------- */
.gallery { position: fixed; inset: 0; z-index: 100; display: flex;
           align-items: center; justify-content: center; padding: 1.5rem; }
.gallery[hidden] { display: none; }

.gallery-backdrop { position: absolute; inset: 0; background: rgba(30, 20, 16, 0.62); }

.gallery-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  max-height: min(92vh, 900px);
  background: var(--bg);
  padding: 2rem 2rem 1.5rem;
}

.gallery-close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.gallery-close svg { width: 22px; height: 22px; }
.gallery-close:hover { color: var(--accent); }

.gallery-head { text-align: center; margin-bottom: 1.2rem; padding-right: 2rem; }
.gallery-head h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.gallery-sub { font-size: 0.85rem; letter-spacing: 0.06em; }

.gallery-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
}
/* The shoot mixes square and 3:4 frames, so the image is contained rather
   than cropped — a fixed ratio here would cut the garment out of half of them. */
.gallery-img {
  max-width: 100%;
  max-height: 58vh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

.gallery-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(250, 246, 240, 0.9);
  border: 0; cursor: pointer; color: var(--ink);
}
.gallery-nav:hover { background: var(--accent); color: #fff; }
.gallery-nav svg { width: 22px; height: 22px; }
.gallery-nav.prev { left: 0.6rem; }
.gallery-nav.next { right: 0.6rem; }
.gallery-nav[disabled] { opacity: 0.3; cursor: default; }
.gallery-nav[disabled]:hover { background: rgba(250, 246, 240, 0.9); color: var(--ink); }

.gallery-count {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0.9rem 0 0.7rem;
}

.gallery-thumbs {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: auto;
}
.gallery-thumbs button {
  width: 58px; height: 58px;
  padding: 0; border: 1px solid transparent; background: none; cursor: pointer;
  flex: 0 0 auto;
}
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--accent); }

body.gallery-open { overflow: hidden; }

@media (max-width: 640px) {
  .gallery { padding: 0; }
  .gallery-panel { width: 100%; max-height: 100vh; height: 100%; padding: 1.5rem 1rem 1rem; }
  .gallery-img { max-height: 52vh; }
  .gallery-thumbs { flex-wrap: nowrap; justify-content: flex-start; }
}