/* magazine.css — editable source. See docs/ARCHITECTURE.md for cascade order. */

@font-face {
  font-family:Inter;
  src:url('assets/fonts/inter.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Inter;
  src:url('assets/fonts/inter-italic.ttf') format('truetype');
  font-weight:100 900;
  font-style:italic;
  font-display:swap
}

:root {
  --heading-weight:300;
  --tracking:0em
}

body[data-font-pair=studio] {
  --sans:Inter,Arial,sans-serif;
  --display:Inter,Arial,sans-serif;
  --serif:Inter,Arial,sans-serif
}

.cover {
  position:relative
}

.cover h1 {
  color:white;
  text-align:center;
  font-size:clamp(45px,9.4vw,170px);
  line-height:.88;
  margin:auto 0;
  letter-spacing:var(--tracking)
}

.cover-line {
  display:block;
  width:fit-content;
  margin:auto
}

.cover-emphasis {
  font-weight:900;
  letter-spacing:-.065em;
  transform:translateX(5%)
}

.cover h1 .cover-italic {
  font-weight:300;
  transform:translateX(-4%);
  font-size:1.02em
}

.issue,.cover-bottom {
  font-family:var(--sans);
  font-weight:400
}

.issue {
  font-size:15px;
  letter-spacing:-.035em
}

.cover-bottom {
  font-size:18px;
  line-height:1.25
}

.cover-bottom {
  margin-bottom:26px
}

.cover-bottom p {
  text-align:right;
  margin-right:0
}

.details {
  gap:8%;
  align-content:center
}

.details>article:first-child {
  padding-top:25px
}

.details>article:last-child {
  padding-bottom:25px
}

.section-label {
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.02em
}

.section-label span {
  font-style:italic;
  font-weight:300
}

.details h3 {
  font-size:clamp(35px,6.2vw,98px);
  line-height:.92
}

.details .wedding-date {
  font-weight:850
}

.details .wedding-date span:last-child {
  font-weight:250;
  font-style:italic
}

.detail-links a {
  font-weight:600;
  letter-spacing:-.055em;
  transition:transform 140ms,color 100ms
}

.detail-links a:hover {
  transform:translateX(5px)
}

.programme h4 {
  font-weight:300
}

.programme h4:nth-child(even) {
  font-style:italic;
  font-weight:600
}

.programme h4 {
  display:grid;
  grid-template-columns:25px 1fr auto;
  gap:7px;
  align-items:baseline
}

.programme h4 .programme-name {
  font:inherit;
  width:auto
}

.programme h4 small {
  font-size:14px;
  font-style:normal;
  font-weight:400;
  letter-spacing:-.02em
}

.age-toggle {
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 0
}

.age-toggle input[type=checkbox] {
  width:18px;
  height:18px;
  margin:0;
  accent-color:#111
}

.rsvp-grid .party-count {
  font-size:14px;
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:10px
}

.companion [hidden] {
  display:none
}

.editorial {
  text-align:left
}

.editorial p {
  font-size:clamp(35px,6vw,95px);
  line-height:1;
  letter-spacing:-.055em
}

.editorial p::first-line {
  font-size:.4em;
  font-style:italic;
  line-height:1.8
}

.editorial .image-trigger {
  font-weight:900;
  border:0
}

.talents {
  gap:18px
}

.models {
  width:60%;
  margin-left:auto;
  margin-right:6%;
  gap:8%
}

.models article:first-child {
  transform:rotate(-3deg) translateY(-8px)
}

.models article:last-child {
  transform:rotate(3deg) translateY(8px)
}

.models .portrait {
  height:clamp(110px,25svh,260px)
}

.model-info h3 {
  font-family:var(--serif);
  font-size:24px;
  font-style:italic;
  font-weight:300
}

.rsvp h3 {
  font-weight:850;
  line-height:.9
}

.rsvp-grid>div:first-child>p {
  max-width:280px;
  font-style:italic;
  font-size:23px;
  line-height:1.15;
  font-weight:300
}

footer p {
  font-weight:900
}

@media(max-width:650px) {
  .cover h1 {
    font-size:14vw;
    line-height:.96
  }
  .cover-emphasis {
    transform:translateX(2%)
  }
  .cover h1 .cover-italic {
    transform:none;
    font-size:1em
  }
  .issue {
    font-size:12px
  }
  .cover-bottom {
    font-size:15px
  }
  .details {
    gap:16px
  }
  .details>article:first-child,.details>article:last-child {
    padding:0
  }
  .details h3 {
    font-size:clamp(30px,8vw,43px)
  }
  .details .section-label {
    font-size:11px
  }
  .programme h4 {
    grid-template-columns:20px 1fr;
    gap:3px
  }
  .programme h4 small {
    grid-column:2;
    font-size:12px
  }
  nav {
    gap:12px;
    font-family:var(--sans);
    font-size:12px
  }
  .details .wedding-date {
    display:flex;
    flex-wrap:wrap;
    gap:.2em
  }
  .details .wedding-date span {
    display:inline
  }
  .editorial p {
    font-size:9.1vw
  }
  .models {
    width:88%;
    margin:30px auto 0;
    gap:10%
  }
  .models .portrait {
    height:26svh
  }
  .rsvp-grid>div:first-child>p {
    font-size:18px;
    max-width:none
  }
  .rsvp h3 {
    font-size:58px
  }
  .section-label {
    font-size:12px
  }
}

@media(max-height:650px) {
  .cover h1 {
    font-size:min(9.4vw,18svh)
  }
  .details h3 {
    font-size:clamp(27px,4vw,54px)
  }
  .editorial p {
    font-size:6vw
  }
  .models .portrait {
    height:22svh
  }
  .rsvp h3 {
    font-size:42px
  }
}

@media(max-width:650px) and (max-height:740px) {
  .details {
    gap:12px
  }
  .details h3 {
    font-size:30px
  }
  .editorial p {
    font-size:8.8vw
  }
  .models {
    margin-top:15px
  }
  .cover h1 {
    font-size:14vw
  }
}

@media(prefers-reduced-motion:no-preference) {
  .cover-line {
    animation:cover-entry 650ms cubic-bezier(.16,1,.3,1) both
  }
  .cover-emphasis {
    animation-delay:65ms
  }
  .cover-italic {
    animation-delay:120ms
  }
  @keyframes cover-entry {
    from {
      opacity:0;
      translate:0 28px
    }
    to {
      opacity:1;
      translate:0 0
    }
  }
}