/*
  CROSSES BY LORNA — WEBSITE STYLES
  ====================================
  Start with the :root settings below for quick site-wide changes.
  Each rule is expanded to make individual properties easy to find.
  Responsive tablet and phone adjustments are near the bottom.
  Save this file next to index.html. No build tools are required.
*/

/* 01. QUICK EDITS — colors, fonts, page width, and gallery spacing */
:root {
  --paper: #faf7f2;
  --ink: #302338;
  --muted: #766e76;
  --gold: #9b7a47;
  --line: #ddd4ca;
  --accent: #87647b;
  --font-body: Arial,sans-serif;
  --page-width: 1280px;
  --page-gutter: 88%;
  --gallery-gap: 23px;
  --logo-width: 280px; /* Desktop logo width. */
  --serif: Georgia,'Times New Roman',serif
}

/* 02. BASE STYLES */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body)
}

button,a {
  -webkit-tap-highlight-color: transparent
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer
}

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

/* 03. PAGE CONTAINER & HEADER */
.wrap {
  width: min(var(--page-width),var(--page-gutter));
  margin: auto
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  gap: 24px
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px
}

.logo-area {
  width: 52px;
  height: 52px;
  border: 1px solid #bba780;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 29px var(--serif);
  color: var(--gold)
}

.brand-name {
  font: 22px var(--serif);
  letter-spacing: .02em
}

.brand small {
  display: block;
  font: 9px Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin-top: 7px
}

nav {
  display: flex;
  gap: 32px;
  font-size: 12px
}

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

/* 04. HERO & FEATURED CROSS */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  align-items: center;
  padding: 68px 0 76px
}

.eyebrow {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  line-height: 1.8
}

.hero h1 {
  font: clamp(52px,5.5vw,82px)/1.06 var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
  margin: 23px 0
}

.hero h1 em {
  font-weight: 400;
  color: var(--accent)
}

.hero p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 390px
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  background: var(--ink);
  color: white;
  padding: 18px 23px;
  font-size: 12px;
  margin-top: 19px
}

.cta:hover {
  background: #59405d
}

.hero-note {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .05em
}

.hero-note:before {
  content: '';
  width: 35px;
  height: 1px;
  background: var(--gold)
}

.hero-art {
  position: relative;
  padding: 0 30px
}

.featured {
  background: #ece7ec;
  border-radius: 49% 49% 4px 4px;
  overflow: hidden;
  position: relative;
  aspect-ratio: .91
}

.featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
  mix-blend-mode: multiply;
  display: block
}

.hero-art:before {
  content: '';
  position: absolute;
  inset: -15px 12px 50px;
  border: 1px solid #d2c3b3;
  border-radius: 49% 49% 0 0;
  pointer-events: none
}

.feature-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 20px
}

.feature-label span {
  color: var(--muted);
  font-size: 10px
}

.swatches {
  display: flex;
  gap: 10px;
  margin-top: 16px
}

.swatch {
  border: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
  position: relative;
  background: var(--swatch)
}

.swatch[aria-pressed="true"]:after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--gold);
  border-radius: 50%
}

/* 05. INSPIRATION STRIP */
.band {
  background: #eee8df;
  border-block: 1px solid #e5ddd2;
  padding: 22px 6%;
  display: flex;
  justify-content: center;
  gap: 70px;
  color: #756355;
  font: italic 18px var(--serif)
}

.band span+span:before {
  content: '✧';
  margin-right: 70px;
  font-style: normal;
  color: #ac946d
}

/* 06. COLLECTION & CROSS CARDS */
.collection {
  padding: 82px 0
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 34px
}

h2 {
  font: 43px/1.15 var(--serif);
  font-weight: 400;
  letter-spacing: -.025em;
  margin: 12px 0
}

.section-heading p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 310px
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 34px var(--gallery-gap)
}

.card {
  min-width: 0
}

.photo-button {
  display: block;
  padding: 0;
  border: 0;
  width: 100%;
  background: var(--tint);
  overflow: hidden;
  position: relative;
  aspect-ratio: .88
}

.photo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
  mix-blend-mode: multiply;
  display: block;
  transition: transform .45s
}

.photo-button:hover img {
  transform: scale(1.045)
}

.zoom {
  position: absolute;
  bottom: 13px;
  right: 13px;
  background: #fffffff0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 19px;
  transition: background .2s
}

.photo-button:hover .zoom {
  background: white
}

.card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 17px
}

.card h3 {
  font: 22px var(--serif);
  margin: 0
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--swatch)
}

.card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  margin: 8px 0 0
}

.gallery-note {
  background: #eee7dd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  align-self: stretch
}

.gallery-note .star {
  font: 32px var(--serif);
  color: var(--gold);
  margin-bottom: 18px
}

.gallery-note h3 {
  font: 28px/1.2 var(--serif);
  margin: 0 0 15px
}

.gallery-note p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted)
}

.gallery-note a {
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 5px;
  margin-top: 10px
}

/* 07. STORY SECTION */
.story {
  border-top: 1px solid var(--line);
  padding: 66px 0 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: center
}

.story p {
  font: 15px/1.9 Arial,sans-serif;
  color: var(--muted);
  margin: 0
}

/* 08. FOOTER */
footer {
  background: var(--ink);
  color: #f5f0e9;
  padding: 30px 0
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px
}

footer p {
  font-size: 10px;
  color: #c8bdcb
}

footer a {
  font-size: 11px
}

/* 09. ENLARGED PHOTO VIEWER */
dialog {
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  width: min(820px,92vw);
  max-height: 92dvh;
  overflow: auto
}

dialog: :backdrop {
  background: #211826d9;
  backdrop-filter: blur(5px)
}

.modal-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center
}

.modal-photo {
  background: #ece7eb
}

.modal-photo img {
  display: block;
  width: 100%;
  max-height: 82dvh;
  object-fit: contain
}

.modal-info {
  padding: 40px 30px
}

.modal-info h2 {
  font-size: 38px
}

.modal-info p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted)
}

.close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px
}

.modal-nav {
  display: flex;
  gap: 12px;
  margin-top: 30px
}

.modal-nav button {
  border: 1px solid var(--line);
  background: transparent;
  padding: 10px 15px;
  font-size: 12px
}

.modal-nav button:hover {
  background: #eee7dd
}

.count {
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--gold)
}

/* 10. LARGE SCREENS */
@media(min-width:1550px) {
  .hero {
    padding-block: 80px
  }

  .featured {
    max-height: 610px
  }

}

/* 11. TABLET LAYOUT */
@media(max-width:850px) {
  .hero {
    gap: 4%;
    padding-block: 50px
  }

  .hero-art {
    padding: 0 16px
  }

  .hero h1 {
    font-size: 56px
  }

  .gallery {
    grid-template-columns: repeat(2,1fr)
  }

  .band {
    gap: 25px;
    font-size: 16px
  }

  .band span+span:before {
    margin-right: 25px
  }

  .brand-name {
    font-size: 18px
  }

  nav {
    gap: 19px
  }

}

/* 12. PHONE LAYOUT */
@media(max-width:580px) {
  .wrap {
    width: 88%
  }

  header {
    padding-block: 20px
  }

  .logo-area {
    width: 42px;
    height: 42px;
    font-size: 24px
  }

  .brand-name {
    font-size: 17px
  }

  .brand small {
    font-size: 8px
  }

  nav a:last-child {
    display: none
  }

  nav {
    font-size: 11px
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 42px;
    gap: 45px
  }

  .hero h1 {
    font-size: 60px;
    margin-block: 18px
  }

  .hero p {
    font-size: 14px
  }

  .hero-note {
    margin-top: 25px
  }

  .hero-art {
    width: 100%;
    padding: 0 18px
  }

  .featured {
    aspect-ratio: 1
  }

  .hero-art:before {
    bottom: 52px
  }

  .band {
    gap: 20px;
    font-size: 15px;
    padding: 20px 5%
  }

  .band span+span:before {
    display: none
  }

  .band span:last-child {
    display: none
  }

  .section-heading {
    display: block
  }

  .section-heading p {
    max-width: 100%
  }

  h2 {
    font-size: 36px
  }

  .collection {
    padding-block: 55px
  }

  .gallery {
    gap: 26px 14px
  }

  .card h3 {
    font-size: 20px
  }

  .card p {
    font-size: 11px
  }

  .gallery-note {
    padding: 20px
  }

  .gallery-note h3 {
    font-size: 24px
  }

  .gallery-note p {
    font-size: 11px
  }

  .gallery-note .star {
    margin-bottom: 12px
  }

  .story {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 45px
  }

  .story p {
    font-size: 14px
  }

  .footer-inner {
    align-items: start
  }

  .footer-inner p {
    max-width: 165px;
    line-height: 1.7
  }

  .modal-content {
    grid-template-columns: 1fr
  }

  .modal-photo img {
    max-height: 54dvh;
    margin: auto;
    width: auto;
    max-width: 100%
  }

  .modal-info {
    padding: 24px
  }

  .modal-info h2 {
    font-size: 30px;
    margin-block: 8px
  }

  .modal-info p {
    font-size: 12px
  }

  .modal-nav {
    margin-top: 18px
  }

}

/* 13. REDUCED MOTION */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  * {
    transition: none!important
  }

}

.footer-brand {
  font: 20px var(--serif);
}

/* 14. CROSSES BY LORNA LOGO
   Change --logo-width in :root to resize the desktop logo.
   Keep height: auto to preserve the original proportions. */
.site-logo {
  display: block;
  width: var(--logo-width);
  max-width: 100%;
  height: auto;
}

header {
  padding-top: 14px;
  padding-bottom: 14px;
}

@media (max-width: 580px) {
  .site-logo {
    width: 205px;
  }

  .brand {
    min-width: 0;
    flex-shrink: 1;
  }

  header nav {
    flex-shrink: 0;
  }
}