/* A compact fashion-magazine index of photographic stories. */
.magazine { padding: 0; background: #020d1b; }
.magazine-inner { width: min(100% - 2 * var(--gutter), 1390px); margin: 0 auto; padding: 44px 0 120px; }
.magazine-topline {
  display: flex; justify-content: space-between; gap: 18px; padding: 15px 0;
  border-top: 1px solid rgba(241,222,224,.35); border-bottom: 1px solid rgba(241,222,224,.2);
  color: #d6cbcd; font-size: 11px; letter-spacing: .13em; line-height: 1.5;
}
.magazine-masthead { padding: 45px 0 36px; }
.magazine-kicker { margin: 0 0 8px; color: #d6b4bc; font-size: 11px; font-weight: 600; letter-spacing: .19em; }
.inner-page .magazine h1 {
  margin: 0; color: #f8f1ee; font-size: clamp(58px, 10vw, 142px);
  line-height: .94; letter-spacing: -.065em; text-transform: uppercase;
}
.magazine h1 span { color: #a82d4c; }
.magazine-deck { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-top: 27px; }
.magazine-deck p { margin: 0; color: #f4eae7; font-family: Georgia,serif; font-size: clamp(23px, 3.2vw, 43px); letter-spacing: -.035em; }
.magazine-deck p em { color: #e6bbc4; font-weight: 400; }
.magazine-deck > span { max-width: 330px; color: #ded4d4; font-size: 15px; line-height: 1.65; }
.magazine-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 25px;
  padding: 17px 0 26px; border-top: 1px solid rgba(241,222,224,.3);
}
.magazine-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.magazine-filters button {
  min-height: 42px; padding: 9px 16px; border: 1px solid rgba(240,221,224,.3); border-radius: 999px;
  background: transparent; color: #e5dadb; font: inherit; font-size: 13px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.magazine-filters button:hover { border-color: #ead0d4; color: #fff; }
.magazine-filters button[aria-pressed="true"] { background: #f0e3df; border-color: #f0e3df; color: #40101f; }
.magazine-count { color: #d5c5c8; font-size: 11px; letter-spacing: .13em; white-space: nowrap; }
.magazine .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 43px 18px; }
.magazine .portfolio-card { grid-column: auto; width: 100%; margin: 0; }
.magazine .portfolio-card[hidden] { display: none !important; }
.magazine .portfolio-grid[data-filter="all"] .portfolio-card:first-child { grid-column: span 2; }
.magazine .portfolio-card-image { aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: #122334; }
.magazine .portfolio-grid[data-filter="all"] .portfolio-card:first-child .portfolio-card-image { aspect-ratio: 8 / 5; }
.magazine .portfolio-card-image::after { content: none; }
.magazine .portfolio-card-image img { object-position: center 30%; transition: transform .6s ease, filter .3s ease; }
.magazine .portfolio-card:hover img { transform: scale(1.035); filter: brightness(.88); }
.folio-card-index {
  position: absolute; top: 14px; left: 14px; min-width: 49px; padding: 8px 10px; text-align: center;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(0,10,23,.72);
  color: #fff; font-size: 11px; letter-spacing: .1em;
}
.folio-card-open {
  position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px;
  background: rgba(0,10,23,.78); color: white; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  transition: background .2s;
}
.folio-card-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f2e6e3; color: #4c1023; font-size: 17px; }
.magazine .portfolio-card:hover .folio-card-open, .magazine .portfolio-card:focus-visible .folio-card-open { background: #68192f; }
.magazine .portfolio-card-meta { display: flex; align-items: start; gap: 15px; padding: 17px 0; border-bottom: 1px solid rgba(241,222,224,.26); }
.magazine .portfolio-card-title { color: #f8f1ee; font-size: clamp(25px, 2.5vw, 36px); letter-spacing: -.025em; line-height: 1.1; }
.folio-card-info { display: flex; flex: 0 0 auto; flex-direction: column; align-items: end; gap: 5px; max-width: 44%; }
.magazine .portfolio-card-sub, .folio-card-count { display: block; color: #d2c3c6; font-size: 10px; letter-spacing: .1em; line-height: 1.5; text-align: right; }
.folio-card-count { color: #bbaeb0; }
.magazine .notice { grid-column: 1 / -1; }
.gallery-dialog { background: #000b18; }
.gallery-header { padding-bottom: 14px; border-bottom: 1px solid rgba(244,239,234,.15); }
.gallery-kicker { color: #d4c9cb; }
.gallery-close, .gallery-arrow { background: rgba(0,12,25,.86); }
.gallery-thumb[aria-current="true"] { border-color: #e9c3cb; }
@media (max-width: 900px) {
  .magazine-inner { padding-top: 32px; padding-bottom: 85px; }
  .magazine .portfolio-grid { gap: 35px 14px; }
  .magazine .portfolio-card-title { font-size: 25px; }
  .magazine .portfolio-card-sub, .folio-card-count { font-size: 10px; }
}
@media (max-width: 650px) {
  .magazine-inner { padding-top: 24px; padding-bottom: 65px; }
  .magazine-topline { font-size: 10px; }
  .magazine-topline span:last-child { text-align: right; }
  .magazine-masthead { padding: 35px 0 28px; }
  .inner-page .magazine h1 { font-size: clamp(44px, 11.5vw, 76px); letter-spacing: -.055em; }
  .magazine-deck { align-items: start; flex-direction: column; gap: 14px; margin-top: 22px; }
  .magazine-deck p { font-size: 26px; }
  .magazine-deck > span { font-size: 15px; }
  .magazine-toolbar { align-items: start; flex-direction: column; gap: 14px; padding-bottom: 22px; }
  .magazine-filters { gap: 6px; }
  .magazine-filters button { padding: 8px 12px; font-size: 12px; }
  .magazine .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 29px 12px; }
  .magazine .portfolio-grid[data-filter="all"] .portfolio-card:first-child { grid-column: span 2; }
  .magazine .portfolio-grid[data-filter="all"] .portfolio-card:first-child .portfolio-card-image { aspect-ratio: 3 / 2; }
  .magazine .portfolio-card-title { font-size: 21px; }
  .magazine .portfolio-card-meta { flex-direction: column; gap: 6px; padding: 12px 0; }
  .folio-card-info { max-width: none; align-items: start; gap: 2px; }
  .magazine .portfolio-card-sub, .folio-card-count { display: block; text-align: left; }
  .folio-card-index { top: 9px; left: 9px; }
  .folio-card-open { right: 9px; bottom: 9px; padding-left: 8px; }
  .folio-card-open > span:first-child { display: none; }
  .folio-card-arrow { width: 34px; height: 34px; }
}
@media (max-width: 350px) {
  .inner-page .magazine h1 { font-size: 42px; }
  .magazine-filters button { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .magazine .portfolio-card-image img, .folio-card-open, .magazine-filters button { transition: none; }
}
.folio-card-open { padding: 10px 14px; font-size: 12px; letter-spacing: .02em; }
.gallery-arrow { width: auto; min-width: 78px; height: 44px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 600; }
@media (max-width: 700px) {
  .folio-card-open { padding: 9px 12px; }
  .gallery-arrow { width: auto; min-width: 68px; height: 44px; font-size: 11px; }
}