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

.duo-bio {
  max-width:650px;
  align-self:flex-end;
  font-size:clamp(18px,1.9vw,28px);
  line-height:1.35;
  letter-spacing:-.015em;
  font-weight:300;
  margin:0
}

.extras-label {
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  margin:0 0 10px
}

.editorial .image-trigger {
  text-decoration:underline;
  text-decoration-thickness:.025em;
  text-underline-offset:.1em;
  white-space:nowrap
}

.interaction-mark {
  display:inline-block;
  font-family:var(--sans);
  font-size:.24em;
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  vertical-align:super;
  margin-left:.14em;
  text-decoration:none
}

body:not(.separate-screen):not(.manifesto-screen) header nav {
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:0
}

.editorial p::first-line {
  line-height:1.8
}

.extra-links {
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:clamp(15px,3svh,30px)
}

.extra-links a {
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:baseline;
  gap:15px;
  border-top:1px solid #111;
  padding:15px 0;
  font-size:clamp(26px,3.8vw,60px);
  font-weight:300;
  letter-spacing:-.05em;
  transition:padding-left 160ms,color 100ms
}

.extra-links a:last-child {
  border-bottom:1px solid #111
}

.extra-links a>span {
  font:14px var(--sans);
  letter-spacing:0
}

.extra-links a>b {
  font-weight:300;
  text-align:right
}

.extra-links a:hover {
  text-decoration:none;
  padding-left:12px;
  color:var(--red)
}

body:not(.separate-screen):not(.manifesto-screen)>footer {
  height:auto;
  min-height:0;
  background:#fff;
  color:#111;
  border-top:1px solid #111;
  padding:24px 3% 28px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center
}

body:not(.separate-screen):not(.manifesto-screen)>footer>div {
  font:11px/1.4 var(--sans);
  justify-content:flex-start;
  gap:22px;
  flex-wrap:wrap
}

body:not(.separate-screen):not(.manifesto-screen)>footer>div:first-child {
  grid-column:1
}

body:not(.separate-screen):not(.manifesto-screen)>footer>p {
  grid-row:1/3;
  grid-column:2;
  font-size:32px;
  line-height:1;
  letter-spacing:-.05em;
  color:#111;
  margin-right:80px
}

body:not(.separate-screen):not(.manifesto-screen)>footer>p>span {
  font-size:9px
}

.separate-screen {
  overflow-x:clip
}

.separate-screen .font-editor {
  left:auto;
  right:3%
}

.separate-screen .font-controls {
  left:auto;
  right:0
}

.separate-screen header nav {
  font-family:var(--sans);
  letter-spacing:-.02em
}

.separate-screen nav [aria-current=page] {
  border-bottom:1px solid
}

.screen-main {
  padding:28px 3% 90px
}

.screen-heading {
  border-top:1px solid #111;
  padding-top:14px;
  margin-bottom:60px
}

.screen-heading>span {
  font-size:13px;
  letter-spacing:-.02em
}

.screen-heading h1 {
  margin:30px 0 0;
  font-size:clamp(65px,12vw,180px);
  line-height:.88;
  letter-spacing:-.075em;
  font-weight:250
}

.screen-heading h1>span,.screen-heading h1>strong {
  display:block;
  font-weight:inherit
}

.screen-heading h1>strong {
  font-weight:900
}

.music-screen .screen-heading h1>span {
  font-size:.65em;
  font-style:italic
}

.catalogue-layout {
  display:grid;
  grid-template-columns:25% 1fr;
  gap:5%
}

.screen-intro {
  position:sticky;
  top:calc(var(--header-height) + 28px);
  align-self:start
}

.screen-intro p {
  font-size:clamp(24px,2.6vw,42px);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.045em;
  max-width:240px;
  margin:0 0 32px
}

.screen-intro>span {
  display:block;
  font-size:11px;
  line-height:1.5;
  margin-bottom:22px
}

.screen-intro>a {
  font-size:14px;
  border-bottom:1px solid;
  padding-bottom:3px
}

.catalogue-content {
  min-width:0
}

.catalogue-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px 28px
}

.catalogue-card {
  min-width:0;
  --enter-x:70px
}

.catalogue-card:nth-child(even) {
  --enter-x:-70px
}

.card-image {
  aspect-ratio:4/3;
  background:#f2f2f2;
  overflow:hidden
}

.card-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 500ms cubic-bezier(.16,1,.3,1)
}

.gift-card:first-child .card-image img {
  object-fit:contain
}

.card-topline {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  border-top:1px solid;
  margin-top:14px;
  padding-top:10px
}

.catalogue-card h2 {
  font-weight:600;
  letter-spacing:-.05em;
  font-size:clamp(25px,2.7vw,40px);
  line-height:1.03;
  margin:12px 0 18px;
  overflow-wrap:anywhere
}

.card-link {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #111;
  font-size:14px;
  padding:8px 0;
  transition:color 100ms
}

.card-link:hover {
  color:#c52d16;
  text-decoration:none
}

.card-link>span {
  transition:translate 180ms
}

.catalogue-card:hover .card-link>span {
  translate:3px -3px
}

.catalogue-card:hover .card-image img {
  transform:scale(1.025)
}

.gift-punchline {
  margin:90px 0 60px;
  padding-top:28px;
  border-top:1px solid;
  --enter-x:65px
}

.gift-punchline .punchline-lead {
  font-size:clamp(42px,5vw,76px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:850;
  margin:0 0 26px
}

.gift-punchline em {
  font-weight:250
}

.gift-punchline>p:last-child {
  font-size:clamp(23px,2.7vw,40px);
  letter-spacing:-.045em;
  line-height:1.14;
  font-weight:300
}

.gift-punchline strong {
  font-weight:850
}

.screen-end {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid;
  padding-top:14px;
  margin-top:60px;
  font-size:12px
}

.album-art {
  display:block;
  aspect-ratio:1;
  position:relative;
  overflow:hidden;
  background:#eee
}

.album-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform 850ms cubic-bezier(.45,0,.2,1)
}

.album-art:hover img {
  transform:scale(1.015)
}

.album-play {
  position:absolute;
  bottom:12px;
  right:12px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:28px;
  width:45px;
  height:45px;
  transition:rotate 180ms
}

.album-art:hover .album-play {
  rotate:45deg
}

.album-description {
  font-size:15px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-height:4.5em;
  margin:0 0 16px;
  letter-spacing:0
}

.album-card .card-topline>span:last-child {
  text-align:right
}

.album-card h2 {
  min-height:2.1em;
  margin-bottom:10px
}

@media(max-width:650px) {
  body:not(.separate-screen):not(.manifesto-screen) {
    --header-height:100px
  }
  body:not(.separate-screen):not(.manifesto-screen) header {
    flex-wrap:wrap;
    align-content:center;
    gap:10px
  }
  body:not(.separate-screen):not(.manifesto-screen) header nav {
    width:100%;
    justify-content:space-between;
    gap:10px;
    font-size:12px
  }
  body:not(.separate-screen):not(.manifesto-screen) header nav a {
    min-height:44px;
    display:flex;
    align-items:center;
    padding:6px 0
  }
  .separate-screen header nav a {
    min-height:44px;
    display:flex;
    align-items:center
  }
  .rsvp input,.rsvp select,.rsvp textarea {
    font-size:16px
  }
  .editorial p {
    font-size:8.25vw;
    line-height:1.15
  }
  .talents {
    gap:14px
  }
  .separate-screen {
    --header-height:94px
  }
  .separate-screen header {
    height:var(--header-height);
    flex-wrap:wrap;
    align-content:center;
    gap:12px
  }
  .separate-screen header nav {
    width:100%;
    justify-content:space-between
  }
  .duo-bio {
    font-size:17px;
    line-height:1.35
  }
  .extra-links a {
    grid-template-columns:25px 1fr 24px;
    gap:8px;
    font-size:30px;
    padding:16px 0
  }
  .extra-links a>span {
    font-size:11px
  }
  body:not(.separate-screen):not(.manifesto-screen)>footer {
    padding:20px 5% 24px;
    gap:15px
  }
  body:not(.separate-screen):not(.manifesto-screen)>footer>div {
    font-size:10px;
    gap:8px 15px
  }
  body:not(.separate-screen):not(.manifesto-screen)>footer>p {
    font-size:25px;
    margin-right:55px
  }
  .screen-main {
    padding:22px 5% 90px
  }
  .separate-screen nav {
    gap:12px;
    font-size:11px
  }
  .screen-heading {
    margin-bottom:35px
  }
  .screen-heading h1 {
    font-size:21vw;
    margin-top:24px
  }
  .music-screen .screen-heading h1>span {
    font-size:.65em
  }
  .catalogue-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .screen-intro {
    position:static;
    display:grid;
    grid-template-columns:1fr auto;
    gap:15px;
    align-items:start
  }
  .screen-intro p {
    font-size:25px;
    margin:0;
    max-width:210px;
    grid-row:span 2
  }
  .screen-intro>span {
    max-width:125px;
    font-size:10px;
    margin:0;
    text-align:right
  }
  .screen-intro>a {
    font-size:11px;
    justify-self:end
  }
  .catalogue-grid {
    gap:36px 16px
  }
  .gift-card {
    grid-column:1/-1
  }
  .catalogue-card h2 {
    font-size:27px
  }
  .album-card h2 {
    font-size:21px
  }
  .card-topline {
    font-size:11px
  }
  .album-card .card-topline {
    font-size:12px;
    line-height:1.35
  }
  .card-link {
    font-size:12px
  }
  .album-description {
    font-size:14px
  }
  .album-play {
    width:32px;
    height:32px;
    font-size:23px;
    bottom:8px;
    right:8px
  }
  .gift-punchline {
    margin:55px 0 35px
  }
  .screen-end {
    font-size:10px;
    flex-wrap:wrap;
    margin-top:35px
  }
}

@media(max-width:360px) {
  .separate-screen .brand {
    font-size:14px
  }
  .separate-screen nav {
    gap:8px;
    font-size:10px
  }
  .album-card h2 {
    font-size:19px
  }
  .screen-intro p {
    font-size:22px
  }
}

@media(prefers-reduced-motion:no-preference) {
  .separate-screen .screen-main {
    animation:screen-enter 620ms cubic-bezier(.16,1,.3,1) both
  }
  .reveal-ready [data-reveal] {
    opacity:0;
    transform:translateX(var(--enter-x));
    transition:opacity 380ms,transform 650ms cubic-bezier(.16,1,.3,1)
  }
  .reveal-ready [data-reveal].is-visible {
    opacity:1;
    transform:translateX(0)
  }
  body.screen-leaving main {
    translate:-35px 0;
    opacity:0;
    transition:translate 220ms cubic-bezier(.7,0,.9,.4),opacity 180ms
  }
  @keyframes screen-enter {
    from {
      opacity:0;
      translate:80px 0
    }
    to {
      opacity:1;
      translate:0 0
    }
  }
}

@media(prefers-reduced-motion:reduce) {
  .album-art img {
    transition:transform 240ms ease-in-out!important
  }
  .album-art:hover img {
    transform:scale(1.008)
  }
}

@media(max-height:600px) {
  .page-section {
    height:auto;
    min-height:var(--page-height);
    overflow:visible
  }
  .rsvp-grid>div:last-child {
    max-height:none;
    overflow:visible
  }
}

@media(max-width:360px) {
  body:not(.manifesto-screen) {
    --header-height:142px!important
  }
  body:not(.manifesto-screen) header nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 12px!important
  }
  body:not(.manifesto-screen) header nav a:nth-child(even) {
    justify-content:flex-end
  }
}

/* Shared footer and navigation */
.rsvp-grid>div:first-child>.rsvp-invitation {
  max-width:none;
  font-size:clamp(13px,1.5vw,23px);
  line-height:1.3
}
.rsvp-invitation>span { white-space:nowrap }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.companion-slider { position:relative; margin:8px 0 20px }
.companion-dots { position:absolute; top:18px; left:5px; right:5px; display:flex; justify-content:space-between; pointer-events:none }
.companion-dots i { width:8px; height:8px; border:1px solid #111; border-radius:50%; background:#fff }
.companion-slider input[type=range] {
  position:relative; appearance:none; width:100%; height:44px; margin:0; padding:0; border:0;
  cursor:ew-resize; touch-action:pan-y;
  background:linear-gradient(#111,#111) center / calc(100% - 16px) 2px no-repeat
}
.companion-slider input::-webkit-slider-runnable-track { height:2px; margin:0 8px }
.companion-slider input::-webkit-slider-thumb { appearance:none; width:18px; height:18px; margin-top:-8px; border-radius:50%; background:#111; border:2px solid #fff; outline:1px solid #111 }
.companion-slider input::-moz-range-track { height:2px; background:#111 }
.companion-slider input::-moz-range-thumb { width:16px; height:16px; border:2px solid #fff; border-radius:50%; background:#111 }
.companion-stops { display:flex; justify-content:space-between; padding:0 4px; font-size:12px }
.companion-note { font-size:13px!important; line-height:1.4!important; margin:12px 0; color:#555 }
@media(max-width:650px) { .rsvp-grid>div:first-child>.rsvp-invitation { font-size:clamp(12px,3.6vw,19px) } }
header { gap:20px }
header nav { margin-left:auto }
.extras-bottom { padding:24px 3% 70px; background:#fff; color:#111 }
.extras-bottom .extra-links { margin:0 }
@media(max-width:650px) {
 .extras-bottom { padding:24px 5% 75px }
 :root { --header-height:100px }
 header { height:var(--header-height); flex-wrap:wrap; align-content:center; gap:5px 10px }
 header nav { width:100%; margin:0; flex-wrap:wrap; gap:0 12px }
 header nav a { min-height:36px; display:flex; align-items:center }
 .manifesto-screen { --header-height:84px }
 .manifesto-screen header { height:84px }
 .manifesto-screen header .manifesto-label { display:none }
 .manifesto-home { max-width:90vw; gap:10px; line-height:1.3 }
}