/* ============================================================
   SILA — jewellery from Bali
   Design source: Figma "Упаковка" / Frame 13 (1728 × 7006)

   The landing is authored at the 1728px reference width: 1rem == 10px there,
   and the root font-size shrinks with the viewport so the whole composition
   scales proportionally instead of reflowing. Below 900px a dedicated mobile
   layout takes over (see the responsive section).
   ============================================================ */

:root {
  --dark: #0d0d0d;               /* page background (Frame 13) */
  --cream: #fffdf4;
  --white: #ffffff;
  --light-band: #d9d9d9;         /* about section background */
  --ink: #1f1f1f;                /* text on the light band */
  --wordmark: #b1b1b1;
  --line-grey: #9e9e9e;
  --spec-line: rgba(255, 255, 255, 0.18);
  --card-veil: rgba(0, 0, 0, 0.7);

  --pad: 3.5rem;                 /* 35px outer gutter */
  --gap: 2rem;                   /* 20px column gap */
  --section-gap: 10rem;          /* 100px rhythm between sections */

  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Belleza", "Gill Sans", "Trebuchet MS", sans-serif;
}

html {
  font-size: min(10px, 100vw / 172.8);
  scroll-behavior: smooth;
}

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

body {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; transition: opacity 0.35s ease; }
a:hover { opacity: 0.55; }

ul { list-style: none; }

hr { border: 0; }

.shell {
  max-width: 172.8rem;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ============================== header ============================== */

.site-header { padding-top: 4.8rem; }

.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.main-nav a,
.nav-pending {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.09;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream);
}

/* the mark itself is the brand link, sitting at the left edge */
.brand { display: block; }

.logo-mark {
  width: 3.5rem;
  height: 3rem;
  margin-top: 0.2rem;
}

.main-nav { display: flex; align-items: flex-start; gap: 3.6rem; }

/* no link behind it yet — styled like the rest, just not clickable */
.nav-pending { cursor: default; }

/* ============================== hero ============================== */

.hero { margin-top: 5rem; }

/* 819 / 539 / 259 columns from the mockup, 20px gutters */
.hero-grid {
  display: grid;
  grid-template-columns: 81.9fr 53.9fr 25.9fr;
  grid-template-rows: 72.2rem auto;
  column-gap: var(--gap);
  row-gap: 2rem;
  align-items: start;
}

.hero-copy { grid-column: 1; grid-row: 1; }

.hero-rule {
  border-top: 1px solid var(--white);
  margin-bottom: 3.2rem;
}

.hero-copy p {
  font-size: 2.4rem;
  line-height: 1.167;
  color: var(--white);
  max-width: 81.9rem;
}

.hero-copy p + p { margin-top: 2.8rem; }   /* one blank line, as in the mockup */

.hero-main {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 72.2rem;
  object-fit: cover;
}

.hero-side {
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  height: 34.6rem;
  object-fit: cover;
}

.hero-wordmark {
  grid-column: 1;
  grid-row: 2;
  width: 81.8rem;
  height: 16.8rem;
}

.hero-small {
  grid-column: 2;
  grid-row: 2;
  width: 26rem;
  height: 16.6rem;
  object-fit: cover;
  align-self: end;
}

.hero-rule-end {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: end;               /* flush with the bottom of the wordmark row */
  justify-self: end;
  width: 54rem;
  border-top: 1px solid var(--white);
}

/* ============================== product cards ============================== */

.cards-section { margin-top: var(--section-gap); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.card {
  position: relative;
  aspect-ratio: 540 / 721;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

/* photo backdrop, dimmed to 70% black. The photos are greyscale in the mockup,
   so hovering only lifts the veil — there is no colour to bring back. */
.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* hovering also lifts the veil from 70% to 50%, as drawn on the signet card */
.card::before { transition: background-color 0.6s ease; }

.card:hover::before,
.card:focus-within::before { background: rgba(0, 0, 0, 0.5); }

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-veil);
  z-index: -1;
}

/* ring renders sit flush to the top; each has its own height from the mockup */
.card-ring {
  width: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* heights as a share of the 721px card, so they hold at any scale */
.card-ring--signet  { height: 63.52%; }
.card-ring--lattice { height: 67.68%; }
.card-ring--rhythm  { height: 69.21%; }

.card:hover .card-ring { transform: scale(1.04); }

.card-info {
  position: absolute;
  left: 8.89%;                   /* 48px of the 540px card */
  right: 8.89%;
  top: 56.59%;                   /* 408px of the 721px card */
}

.card-info h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.083;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream);
}

.card-price {
  margin-top: 2.5rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.09;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream);
}

.card-rule {
  margin-top: 2.9rem;
  border-top: 1px solid var(--line-grey);
  width: 44.4rem;
  max-width: 100%;
}

.card-desc {
  margin-top: 2.5rem;
  width: 34.8rem;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.0625;
  color: rgba(255, 255, 255, 0.5);
}

.card-explore {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44.4rem;
  max-width: 100%;
  height: 5.8rem;
  margin-top: 3.1rem;
  border: 1px solid var(--line-grey);
  background: transparent;
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.0625;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* hovering the card (or the button itself) fills it, as drawn on the signet card */
.card:hover .card-explore,
.card:focus-within .card-explore,
.card-explore:hover {
  background: var(--white);
  color: #000000;
}

.card-explore:focus-visible { outline: 1px solid var(--white); outline-offset: 0.4rem; }

/* ============================== about (light band) ============================== */

.about {
  margin-top: var(--section-gap);
  padding: 8rem 0 8rem;
  background: var(--light-band);
  color: var(--ink);
}

.meta-row {
  display: grid;
  grid-template-columns: 45rem 47.7rem auto;
  align-items: start;
  font-size: 2.6rem;
  line-height: 1.154;
  padding-left: 28rem;
}

/* the three notes step up slightly towards the right, as drawn */
.meta-row li:nth-child(1) { margin-top: 1.2rem; }
.meta-row li:nth-child(2) { margin-top: 0.6rem; }

.about-grid {
  margin-top: 8.6rem;
  display: grid;
  grid-template-columns: 67.9fr 81.9fr;
  column-gap: 16rem;
  align-items: start;
}

.about-photo {
  width: 100%;
  aspect-ratio: 679 / 771;
  object-fit: cover;
}

.about-rule {
  margin-top: 0.4rem;
  border-top: 1px solid var(--ink);
  margin-bottom: 11.7rem;
}

.about-copy h2 {
  font-weight: 400;
  font-size: 6rem;
  line-height: 0.917;
  max-width: 42.3rem;            /* keeps the three-line break from the mockup */
}

.about-copy .prose {
  margin-top: 11.8rem;
  font-size: 2.4rem;
  line-height: 1.167;
}

.prose p + p { margin-top: 2.8rem; }

/* ============================== lifestyle rows ============================== */

.photo-row {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.photo-row img {
  width: 100%;
  aspect-ratio: 540 / 722;
  object-fit: cover;
}

/* ============================== facts ============================== */

.facts { margin-top: var(--section-gap); }

.fact {
  display: grid;
  grid-template-columns: 53.8fr 26fr 81.5fr;
  column-gap: var(--gap);
  align-items: start;
}

.fact-label {
  font-size: 2.7rem;
  line-height: 1.148;
  color: var(--white);
}

.fact-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: fill;              /* squashed fill, as in the mockup */
}

.fact-text {
  font-size: 2.4rem;
  line-height: 1.167;
  color: var(--white);
}

.fact-text p + p { margin-top: 2.8rem; }

.fact-divider {
  margin: 5rem 0 5rem;
  width: 81.7rem;
  max-width: 100%;
  border-top: 1px solid var(--white);
}

/* ============================== payment & delivery ============================== */

.info-cols-section { margin-top: var(--section-gap); }

/* the mockup leaves a slightly larger gap before the repeated cards */
.info-cols-section + .cards-section { margin-top: 11rem; }

.info-cols {
  display: grid;
  grid-template-columns: 55.9fr 56.2fr;
  column-gap: 25.7rem;
  padding-inline: 17.5rem;       /* .shell's 35 + the mockup's 140 → columns at 175 / 991 */
}

.info-col h4 {
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.167;
  margin-bottom: 2.8rem;         /* blank line between heading and body */
  color: var(--cream);
}

.info-col p {
  font-size: 2.2rem;
  line-height: 1.182;
  color: var(--cream);
}

/* ============================== footer ============================== */

.site-footer { padding-bottom: 8.4rem; }

.footer-rule {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--white);
}

.footer-logo {
  width: 25.5rem;
  height: 5.2rem;
  margin: 10.1rem auto 0;
}

/* the three links sit in a 540px group centred under the wordmark */
.footer-links {
  margin: 5.4rem auto 0;
  width: 54rem;
  max-width: 100%;
  display: grid;
  grid-template-columns: 21.6rem 23.3rem auto;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  line-height: 1.111;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream);
}

.footer-copy {
  margin-top: 5.4rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  line-height: 1.071;
  letter-spacing: 0.05em;
  color: var(--cream);
}

/* ============================== reveal animations ============================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-ring { transition: none; }
}

/* ============================== responsive ============================== */

@media (max-width: 900px) {
  html { font-size: 10px; }      /* back to real pixels for the mobile layout */

  :root {
    --pad: 16px;
    --gap: 12px;
    --section-gap: 64px;
  }

  .shell { max-width: none; }

  .site-header { padding-top: 24px; }
  .logo-mark { width: 26px; height: 22px; }
  .main-nav a { font-size: 15px; }
  .main-nav { gap: 18px; }

  .hero { margin-top: 32px; }

  /* single flow column — every hero item gets its own auto row */
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    row-gap: 12px;
  }
  .hero-grid > * { grid-row: auto; }

  .hero-copy { grid-column: 1 / -1; }
  .hero-rule { margin-bottom: 24px; }
  .hero-copy p { font-size: 18px; max-width: none; }

  .hero-main {
    grid-column: 1 / -1;
    height: auto;
    aspect-ratio: 539 / 722;
  }
  .hero-side {
    grid-column: 1;
    height: auto;
    aspect-ratio: 259 / 346;
  }
  .hero-small {
    grid-column: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 260 / 166;
    align-self: start;
  }
  .hero-wordmark {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    aspect-ratio: 818 / 168;
  }
  .hero-rule-end { display: none; }

  .cards { grid-template-columns: 1fr; gap: 24px; }
  .card { max-width: 520px; margin-inline: auto; width: 100%; }
  /* the block is taller here (the button joins it), so it starts higher up */
  .card-info { top: 48%; }
  .card-info h3 { font-size: 26px; }
  .card-explore {
    margin-top: 20px;
    width: 100%;
    height: 46px;
    font-size: 13px;
  }
  .card-price { margin-top: 10px; font-size: 16px; }
  .card-rule { margin-top: 12px; width: auto; }
  .card-desc { margin-top: 14px; width: auto; font-size: 13px; }

  .about { padding: 48px 0; }
  .meta-row {
    padding-left: 0;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 17px;
  }
  .meta-row li { padding-top: 0 !important; }

  .about-grid { margin-top: 32px; grid-template-columns: 1fr; row-gap: 28px; }
  .about-rule { margin-bottom: 24px; }
  .about-copy h2 { font-size: 34px; }
  .about-copy .prose { margin-top: 28px; font-size: 18px; }

  .photo-row { grid-template-columns: 1fr; }

  .fact { grid-template-columns: 1fr; row-gap: 16px; }
  .fact-label, .fact-text { font-size: 18px; }
  .fact-img { width: min(250px, 60%); }
  .fact-divider { margin: 40px 0; width: auto; }

  .info-cols { grid-template-columns: 1fr; gap: 32px; padding-inline: var(--pad); }
  .info-col h4 { font-size: 22px; margin-bottom: 16px; }
  .info-col p { font-size: 17px; }

  .footer-logo {
    width: 180px;
    height: auto;
    aspect-ratio: 255 / 52;      /* the SVG has no intrinsic size of its own */
    margin-top: 48px;
  }
  .footer-links {
    margin-top: 32px;
    width: 100%;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    font-size: 14px;
  }
  .footer-copy { margin-top: 28px; font-size: 12px; }
}

@media (max-width: 480px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side, .hero-small { grid-column: 1; }
  .footer-links { font-size: 13px; }
}
/* ===================== product modal (Frame 14) ===================== */

/* Authored on a 1429 x 1427 sheet; scaled down to fit any viewport and centred. */
.pd {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pd[hidden] { display: none; }

.pd-backdrop {
  position: fixed;
  inset: 0;
  background: var(--cream);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* full-screen sheet; the 1429px content block is centred inside it */
.pd-dialog {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 55px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.pd-inner {
  width: 1265px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 660fr 540fr;
  column-gap: 65px;
  align-items: start;
}

.pd.is-open .pd-backdrop { opacity: 1; }
.pd.is-open .pd-dialog { opacity: 1; transform: none; }

.pd-close {
  position: fixed;
  top: 38px;
  right: 72px;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.35s ease;
}

.pd-close:hover { opacity: 0.55; }
.pd-close:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- left column: gallery + note ---------- */

.pd-left { display: flex; flex-direction: column; align-self: start; }

.pd-hero {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.pd-hero, .pd-thumb { background: #f4f2ea; }

.pd-hero img,
.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-thumbs {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pd-thumb {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  opacity: 0.75;
  transition: opacity 0.35s ease;
}

.pd-thumb:hover,
.pd-thumb.is-active { opacity: 1; }

.pd-note {
  margin-top: 116px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--line-grey);
}

.pd-note p + p { margin-top: 1.2em; }

/* ---------- right column: details + order form ---------- */

.pd-right { display: flex; flex-direction: column; align-self: start; }

.pd-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0.0375em;
  text-transform: uppercase;
}

.pd-price {
  margin-top: 24px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.09;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pd-rule {
  margin-top: 34px;
  border: 0;
  border-top: 1px solid var(--ink);
}

.pd-specs { margin-top: 33px; }

.pd-specs div {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e3da;
  font-size: 18px;
}

.pd-specs dt { color: var(--line-grey); }
.pd-specs dd { color: var(--ink); }

.pd-desc {
  margin-top: 44px;
  font-size: 20px;
  line-height: 1.15;
}

.pd-form { padding-top: 225px; }

.pd-row {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pd-row + .pd-row { margin-top: 16px; }

.pd-label { font-size: 18px; }

.pd-select { position: relative; width: 270px; }

.pd-select::after {
  content: "\25BE";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 18px;
}

.pd-size,
.pd-field {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  appearance: none;
}

.pd-size:invalid,
.pd-field::placeholder { color: var(--line-grey); }

.pd-field { margin-top: 16px; }
.pd-field:first-of-type { margin-top: 100px; }
.pd-field.is-missing { border-color: #b4534f; }

.pd-stepper { display: flex; }

.pd-step,
.pd-count {
  height: 56px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-step { width: 44px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.pd-step:hover { background: var(--ink); color: var(--cream); }
.pd-count { width: 182px; border-inline: 0; }

.pd-confirm {
  margin-top: 16px;
  width: 100%;
  height: 60px;
  border: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.35s ease;
}

.pd-confirm:hover { opacity: 0.85; }

.pd-thanks {
  margin-top: 16px;
  text-align: center;
  font-size: 18px;
  color: var(--ink);
}

/* ===================== full-screen image viewer ===================== */

.lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }

.lb-img {
  max-width: min(720px, 92vw);
  max-height: 72vh;
  object-fit: contain;
}

.lb-controls { display: flex; gap: 12px; }

.lb-btn {
  width: 50px;
  height: 50px;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  background: #ffffff;
  color: #1f1f1f;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.lb-btn:hover { background: #1f1f1f; color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .pd-backdrop, .pd-dialog, .lb { transition: none; }
  .pd-dialog { transform: none; }
}

/* the sheet is authored at 1429px — below that it scales with the viewport */
@media (max-width: 1477px) {
  .pd-dialog { padding: 3.7vw; }
  .pd-inner { column-gap: 4.4vw; }
  .pd-close { top: 2.7vw; right: 4vw; }
}

@media (max-width: 900px) {
  .pd { padding: 0; }

  .pd-dialog { padding: 56px 16px 40px; align-items: flex-start; }
  .pd-inner { grid-template-columns: 1fr; row-gap: 32px; }

  /* the delivery note drops below the order form on a phone */
  .pd-left { display: contents; }
  .pd-hero { order: 1; }
  .pd-thumbs { order: 2; gap: 6px; margin-top: 6px; }
  .pd-right { order: 3; }
  .pd-note { order: 4; margin-top: 0; font-size: 15px; }

  .pd-close { top: 12px; right: 10px; font-size: 30px; }

  .pd-title { font-size: 32px; }
  .pd-price { margin-top: 14px; font-size: 17px; }
  .pd-rule { margin-top: 22px; }
  .pd-specs { margin-top: 20px; }
  .pd-specs div { height: 44px; font-size: 15px; }
  .pd-desc { margin-top: 24px; font-size: 16px; }
  .pd-form { padding-top: 28px; }
  .pd-select { width: 60%; }
  .pd-label { font-size: 16px; }

  .lb { gap: 24px; padding: 20px; }
  .lb-img { max-height: 66vh; }
}

html.pd-lock { overflow: hidden; }
html.pd-lock body { position: fixed; left: 0; right: 0; width: 100%; }