/* SLK Reserve — static Cloudflare Pages site */

:root {
  --ink: #181714;
  --muted-ink: #504b44;
  --cream: #f5f0e8;
  --paper: #fbf8f3;
  --gold: #b4854e;
  --gold-light: #d1b184;
  --line: rgba(24, 23, 20, 0.38);
  --shadow: 0 18px 48px rgba(43, 35, 24, 0.12);
  --serif: Didot, "Bodoni MT", "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(
      circle at 75% 5%,
      rgba(255, 255, 255, 0.95),
      transparent 38rem
    ),
    linear-gradient(135deg, var(--paper), var(--cream));
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--ink);
  color: white;
  padding: 0.8rem 1rem;
}

.skip-link:focus {
  top: 1rem;
}

/* Hero */

.hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(340px, 1.03fr) minmax(430px, 0.97fr);
  position: relative;
  overflow: hidden;
  background: #f4eee5;
}

.hero-photo {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #f4eee5;

  /* Prevent a fine seam between the grid columns */
  margin-right: -2px;
}

.hero-photo img {
  width: calc(100% + 2px);
  height: 100%;
  min-height: 720px;
  object-fit: cover;
  object-position: 49% 42%;

  /*
   * Wider, more gradual fade.
   * The final transparency changes happen more gently.
   */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.99) 68%,
    rgba(0, 0, 0, 0.94) 74%,
    rgba(0, 0, 0, 0.82) 80%,
    rgba(0, 0, 0, 0.65) 85%,
    rgba(0, 0, 0, 0.46) 90%,
    rgba(0, 0, 0, 0.28) 94%,
    rgba(0, 0, 0, 0.14) 97%,
    rgba(0, 0, 0, 0.05) 99%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.99) 68%,
    rgba(0, 0, 0, 0.94) 74%,
    rgba(0, 0, 0, 0.82) 80%,
    rgba(0, 0, 0, 0.65) 85%,
    rgba(0, 0, 0, 0.46) 90%,
    rgba(0, 0, 0, 0.28) 94%,
    rgba(0, 0, 0, 0.14) 97%,
    rgba(0, 0, 0, 0.05) 99%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6.25rem);

  /*
   * Keeps the left edge exactly the same cream used underneath
   * the fading image.
   */
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 255, 255, 0.82),
      transparent 25rem
    ),
    linear-gradient(
      to right,
      #f4eee5 0%,
      #f4eee5 15%,
      #fbf8f3 100%
    );
}

.brand {
  text-align: center;
}

.brand h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(5.2rem, 9vw, 8.8rem);
  line-height: 0.78;
  letter-spacing: 0.04em;
}

.brand-subtitle {
  margin: 1.7rem 0 0;
  color: var(--gold);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.48em;
  transform: translateX(0.24em);
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 1.7rem auto 1.8rem;
  width: min(18rem, 80%);
  color: var(--gold);
}

.ornament span {
  height: 1px;
  flex: 1;
  background: var(--gold-light);
}

.ornament b {
  font-weight: 400;
  font-size: 1.5rem;
}

.tagline {
  max-width: 33rem;
  margin: 0 auto 2rem;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  line-height: 1.35;
}

/* Primary link buttons */

.primary-links {
  width: min(100%, 38rem);
  margin: 0 auto;
  display: grid;
  gap: 0.72rem;
}

.link-button {
  min-height: 4.35rem;
  display: grid;
  grid-template-columns: 2.6rem 1fr 2.6rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.91rem;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.link-button::after {
  content: "↗";
  opacity: 0;
  transform: translate(-0.4rem, 0.4rem);
  transition: 0.18s ease;
}

.link-button:hover,
.link-button:focus-visible {
  transform: translateY(-2px);
  background: white;
  box-shadow: 0 9px 20px rgba(24, 23, 20, 0.09);
}

.link-button:hover::after,
.link-button:focus-visible::after {
  opacity: 0.75;
  transform: translate(0, 0);
}

.link-button-primary {
  color: white;
  background: linear-gradient(100deg, #11110f, #22211e);
  border-color: var(--ink);
}

.link-button-primary:hover,
.link-button-primary:focus-visible {
  background: #292722;
}

.icon {
  justify-self: center;
  color: var(--gold);
  font-size: 1.65rem;
  line-height: 1;
}

.social-glyph {
  color: var(--ink);
}

/* Shared sections */

.section-shell {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
}

.collections {
  padding: 4rem 0 3.4rem;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.section-heading span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light));
}

.section-heading span:last-child {
  background: linear-gradient(90deg, var(--gold-light), transparent);
}

.section-heading h2 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
}

/* Featured collections */

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

.collection-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: #ded7cd;
  box-shadow: var(--shadow);
  text-decoration: none;
  isolation: isolate;
}

.collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.68));
  z-index: 1;
  pointer-events: none;
}

.collection-card img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.collection-card:first-child img {
  object-position: 50% 38%;
}

.collection-card:nth-child(2) img {
  object-position: 50% 46%;
}

.collection-card:nth-child(3) img {
  object-position: 50% 41%;
}

.collection-card span {
  position: absolute;
  z-index: 2;
  bottom: 0;
  inset-inline: 0;
  padding: 1.25rem 0.8rem;
  color: white;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.92rem;
}

.collection-card:hover img,
.collection-card:focus-visible img {
  transform: scale(1.035);
}

/* Social and contact */

.connect {
  padding: 1rem 0 4.6rem;
  text-align: center;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

.social-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 1rem;
  text-decoration: none;
  border-right: 1px solid rgba(180, 133, 78, 0.25);
  transition: transform 0.18s ease;
}

.social-links a:last-child {
  border-right: 0;
}

.social-links a:hover,
.social-links a:focus-visible {
  transform: translateY(-3px);
}

.social-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.social-icon.bag {
  color: var(--gold);
}

.social-links strong {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  font-weight: 500;
}

.social-links small {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--muted-ink);
}

.collab-button {
  width: min(100%, 32rem);
  min-height: 4.2rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: white;
  background: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.9rem;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.collab-button span:first-child {
  color: var(--gold);
  font-size: 1.4rem;
}

.collab-button:hover,
.collab-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(24, 23, 20, 0.18);
}

.collab-copy {
  margin: 0.8rem 0 0;
  font-family: var(--serif);
  color: var(--muted-ink);
}

/* Footer */

footer {
  padding: 1.3rem 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.84);
  background: linear-gradient(100deg, #11110f, #23211e);
  font-family: var(--serif);
  font-size: 0.78rem;
  line-height: 1.55;
}

footer p {
  margin: 0.15rem 0;
}

/* Accessibility */

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Tablet */

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-photo {
    min-height: 70svh;
    max-height: 880px;
  }

  .hero-photo img {
    min-height: 70svh;
    max-height: 880px;
    object-position: 50% 38%;

    /*
     * On stacked layouts, fade the bottom of the image into
     * the content section rather than fading the right edge.
     */
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, 0.98) 82%,
      rgba(0, 0, 0, 0.84) 87%,
      rgba(0, 0, 0, 0.56) 92%,
      rgba(0, 0, 0, 0.25) 96%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, 0.98) 82%,
      rgba(0, 0, 0, 0.84) 87%,
      rgba(0, 0, 0, 0.56) 92%,
      rgba(0, 0, 0, 0.25) 96%,
      transparent 100%
    );
  }

  .hero-content {
    padding: 3.25rem max(1.25rem, 5vw) 3.75rem;
  }

  .brand h1 {
    font-size: clamp(5rem, 20vw, 8rem);
  }

  .collection-grid {
    grid-template-columns: 1fr 1fr;
  }

  .collection-card:last-child {
    grid-column: 1 / -1;
    min-height: 360px;
  }

  .collection-card:last-child img {
    min-height: 360px;
    object-position: 50% 38%;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .hero-photo {
    min-height: 59svh;
  }

  .hero-photo img {
    min-height: 59svh;
    object-position: 51% 36%;
  }

  .hero-content {
    padding-top: 2.7rem;
  }

  .brand-subtitle {
    letter-spacing: 0.34em;
  }

  .tagline {
    font-size: 1.55rem;
    max-width: 20rem;
  }

  .link-button {
    grid-template-columns: 2.25rem 1fr 1.2rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
  }

  .section-shell {
    width: min(100% - 1.5rem, 1180px);
  }

  .collections {
    padding-top: 2.8rem;
  }

  .section-heading {
    gap: 0.7rem;
  }

  .section-heading h2 {
    font-size: 0.76rem;
    letter-spacing: 0.22em;
  }

  .collection-grid {
    grid-template-columns: 1fr;
  }

  .collection-card,
  .collection-card:last-child {
    grid-column: auto;
    min-height: 410px;
  }

  .collection-card img,
  .collection-card:last-child img {
    min-height: 410px;
  }

  .social-links {
    grid-template-columns: 1fr;
    margin-bottom: 1.8rem;
  }

  .social-links a {
    display: grid;
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto auto;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid rgba(180, 133, 78, 0.25);
  }

  .social-links a:last-child {
    border-bottom: 0;
  }

  .social-icon {
    grid-row: 1 / 3;
    align-self: center;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}