/* Editorial refinements from Angelina's annotated review. */
:root {
  --photo-tone: saturate(0.94) contrast(1.025);
}
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  top: 0;
}
.hero-image img,
.about-image img,
.contact-image img {
  filter: var(--photo-tone);
}
.hero-location {
  max-width: 450px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 28px;
}
.hero-note {
  padding-top: 22px;
}
.hero .button {
  max-width: 100%;
  text-align: center;
}
.about {
  padding-top: 90px;
  padding-bottom: 70px;
}
.about-image img {
  height: auto;
  max-height: none;
  object-fit: contain;
}
.editorial .section-heading {
  align-items: flex-start;
  margin-bottom: 60px;
}
.editorial .editorial-statement {
  font-size: 16px;
  max-width: 490px;
  line-height: 1.8;
}
.editorial-triptych {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center;
  gap: 24px;
  margin: 0 0 70px;
}
.editorial-triptych .photo-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: var(--photo-tone);
}
.triptych-2 {
  grid-template-columns: 1fr 1.35fr 1fr;
}
.triptych-3 {
  grid-template-columns: 1fr 1.1fr 1fr;
}
.photo-tile:hover img {
  filter: var(--photo-tone);
}
.photo-tile {
  transition: opacity 0.25s ease;
}
.photo-tile:hover {
  opacity: 0.9;
}
.more-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10%;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 60px;
}
.look-slideshow {
  min-width: 0;
  max-width: 490px;
  width: 100%;
}
.slideshow-stage {
  position: relative;
  aspect-ratio: 3/4;
  background: transparent;
}
.slideshow-stage .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease;
  filter: var(--photo-tone);
}
.slideshow-stage .slide.active {
  opacity: 1;
}
.slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
}
.slideshow-controls button,
.gallery-controls button {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 44px;
  padding: 8px 13px;
  cursor: pointer;
  font-size: 14px;
}
.slideshow-controls button:hover,
.gallery-controls button:hover {
  border-color: var(--ink);
}
.slideshow-controls span {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.more-story-copy h3 {
  font-size: clamp(30px, 3.6vw, 50px);
  margin: 0 0 30px;
}
.everyday-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 55px;
  align-items: start;
}
.everyday-gallery[hidden],
.more-looks-toggle[hidden],
.gallery-controls[hidden] {
  display: none;
}
.everyday-gallery .photo-tile img {
  height: auto;
  width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  filter: var(--photo-tone);
}
.additional {
  margin-top: 55px;
}
.album-grid {
  max-width: 1320px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 28px;
}
.album-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.album-open > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: var(--photo-tone);
}
.album-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 0 0;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.35;
}
.album-action {
  font-size: 14px;
  border-bottom: 1px solid var(--muted);
  padding-bottom: 4px;
}
.album-open:hover .album-action {
  border-color: var(--ink);
}
.style-map {
  grid-template-columns: 1.25fr 1fr;
  gap: 7%;
  align-items: center;
}
.style-map p {
  font-size: 16px;
  line-height: 1.8;
}
.style-map strong {
  font-weight: 500;
}
.style-video {
  max-width: 480px;
  width: 100%;
  justify-self: center;
}
.style-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1320/2468;
  background: #181714;
}
.contact-location {
  max-width: 540px;
  line-height: 1.8;
  font-size: 14px;
}
.contact-image {
  max-height: none;
  align-self: center;
}
.contact-image img {
  height: auto;
  object-fit: contain;
}
#lightbox {
  width: min(1320px, 96vw);
  padding: 60px 22px 22px;
}
#lightbox img {
  max-height: 67dvh;
}
#lightbox-image.photo-toned {
  filter: var(--photo-tone);
}
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 16px;
}
.gallery-count {
  min-width: 60px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.gallery-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  overflow: auto;
  padding: 4px;
}
.gallery-thumbs:empty {
  display: none;
}
.gallery-thumbs button {
  border: 1px solid transparent;
  background: none;
  padding: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.gallery-thumbs button[aria-current="true"] {
  border-color: var(--ink);
}
.gallery-thumbs img {
  width: 86px;
  height: 58px;
  object-fit: contain;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > h1 {
    animation: editorial-enter 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) both;
  }
  .hero-copy > .intro {
    animation: editorial-enter 0.9s 0.1s cubic-bezier(0.2, 0.65, 0.25, 1) both;
  }
  .hero-image {
    animation: editorial-enter 1.1s 0.12s cubic-bezier(0.2, 0.65, 0.25, 1) both;
  }
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.85s ease,
      transform 0.85s cubic-bezier(0.2, 0.65, 0.25, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  @keyframes editorial-enter {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (max-width: 1000px) {
  .editorial-triptych {
    gap: 16px;
    margin-bottom: 45px;
  }
  .more-story {
    gap: 6%;
  }
  .album-grid {
    gap: 35px 22px;
  }
  .style-map {
    gap: 5%;
  }
}
@media (max-width: 760px) {
  .hero-location {
    font-size: 13px;
    margin-bottom: 0;
  }
  .about {
    padding-top: 64px;
  }
  .editorial .section-heading {
    margin-bottom: 35px;
  }
  .editorial .editorial-statement {
    max-width: none;
  }
  .editorial-triptych {
    gap: 8px;
    margin-bottom: 30px;
  }
  .more-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 35px;
  }
  .look-slideshow {
    max-width: 460px;
    margin: auto;
  }
  .more-story-copy {
    text-align: center;
  }
  .more-story-copy .eyebrow {
    margin-bottom: 12px;
  }
  .more-story-copy h3 {
    font-size: 30px;
    margin-bottom: 22px;
  }
  .everyday-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
  }
  .album-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .album-label {
    gap: 8px;
    padding-top: 16px;
  }
  .style-map {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .style-video {
    max-width: 430px;
  }
  .contact-image {
    height: auto;
  }
  #lightbox {
    padding-left: 10px;
    padding-right: 10px;
  }
  #lightbox img {
    max-height: 61dvh;
  }
  .gallery-thumbs {
    justify-content: flex-start;
  }
  .gallery-thumbs img {
    width: 68px;
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}