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

:root {
  --paper:#fff;
  --ink:#121212;
  --red:#f13b21;
  --line:#c9c9c9;
  --sans:Arial,Helvetica,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --mono:'Courier New',monospace;
  --heading-weight:300;
  --tracking:0em;
  --header-height:72px;
  --page-height:calc(100svh - var(--header-height))
}

* {
  box-sizing:border-box
}

html {
  scroll-padding-top:var(--header-height)
}

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

body[data-font-pair=grotesk] {
  --sans:'Arial Black',Arial,sans-serif;
  --serif:'Times New Roman',Times,serif
}

body[data-font-pair=humanist] {
  --sans:'Trebuchet MS',Verdana,sans-serif;
  --serif:'Palatino Linotype','Book Antiqua',Palatino,serif
}

button,input,select,textarea {
  font:inherit
}

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

a:hover {
  text-decoration:underline
}

button {
  color:inherit
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px
}

header {
  height:var(--header-height);
  position:sticky;
  top:0;
  z-index:30;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3%;
  border-bottom:1px solid var(--ink)
}

.brand {
  font-size:22px;
  letter-spacing:-.04em;
  font-weight:400
}

nav {
  display:flex;
  gap:32px;
  font:15px var(--mono)
}

nav sup {
  font-size:10px;
  padding-left:3px
}

.page-section {
  height:var(--page-height);
  padding:24px 3% 76px;
  overflow:hidden;
  scroll-margin-top:0
}

.cover {
  background:var(--red);
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.issue {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font:16px/1.4 var(--mono)
}

.cover h1 {
  font-size:clamp(55px,10.4vw,180px);
  font-weight:var(--heading-weight);
  line-height:.94;
  letter-spacing:var(--tracking);
  margin:15px 0
}

.cover-italic {
  font-family:var(--serif);
  font-weight:var(--heading-weight);
  font-style:italic;
  font-size:.96em
}

.cover-bottom {
  display:flex;
  justify-content:space-between;
  font:17px/1.5 var(--mono);
  gap:30px
}

.cover-bottom p {
  margin:0 9% 0 0
}

.section-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--ink);
  padding:15px 0 22px;
  font:13px var(--mono);
  gap:20px
}

.section-label h2 {
  font:inherit;
  margin:0;
  text-transform:uppercase
}

.details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6%;
  align-content:center
}

.details>article {
  min-width:0;
  scroll-margin-top:calc(var(--header-height) + 24px)
}

.details h3 {
  font-size:clamp(36px,5.7vw,90px);
  font-weight:var(--heading-weight);
  letter-spacing:var(--tracking);
  line-height:1;
  margin:10px 0 24px
}

.details p {
  font-size:18px;
  line-height:1.45;
  margin:14px 0
}

.image-trigger {
  position:relative;
  border:0;
  background:none;
  padding:0;
  font:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  cursor:pointer;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none
}

.image-trigger:hover,.image-trigger:focus-visible {
  color:var(--red)
}

.villa-trigger {
  display:inline-block
}

.detail-links {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-top:24px
}

.detail-links a {
  font-size:clamp(22px,2.2vw,34px);
  letter-spacing:-.03em;
  border-bottom:1px solid var(--ink);
  padding:3px 0
}

.detail-links a:hover {
  text-decoration:none;
  border-color:var(--red);
  color:var(--red)
}

.programme {
  margin:18px 0
}

.programme h4 {
  font-size:clamp(19px,2vw,30px);
  font-weight:400;
  border-top:1px solid var(--line);
  padding:12px 0;
  margin:0;
  letter-spacing:-.03em
}

.programme h4 span {
  font:12px var(--mono);
  display:inline-block;
  width:32px;
  vertical-align:middle
}

.talents {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:24px
}

.editorial {
  text-align:center
}

.editorial p {
  font-size:clamp(27px,4.2vw,68px);
  line-height:1.12;
  letter-spacing:var(--tracking);
  font-weight:var(--heading-weight);
  margin:0
}

.editorial .image-trigger {
  color:var(--ink);
  border-bottom:1px solid
}

.editorial .image-trigger:hover {
  color:var(--red)
}

.talent-roster {
  min-height:0
}

.talent-roster .section-label {
  display:none
}

.models {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:900px;
  margin:0 auto
}

.portrait {
  height:clamp(140px,32svh,350px);
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  overflow:hidden;
  background:#eee
}

.coltrane {
  background:#dfdfdf
}

.portrait svg {
  fill:#141414;
  width:70%;
  height:95%
}

.portrait svg .eye {
  fill:none;
  stroke:#fff;
  stroke-width:3;
  stroke-linecap:round
}

.coltrane svg {
  transform:translateX(6%) rotate(-5deg)
}

.model-info {
  padding:12px 0;
  border-bottom:1px solid var(--line)
}

.model-info h3 {
  font-size:28px;
  letter-spacing:-.05em;
  font-weight:400;
  margin:0
}

.rsvp {
  display:flex;
  flex-direction:column;
  justify-content:center
}

.rsvp-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6%;
  min-height:0
}

.rsvp h3 {
  font-size:clamp(55px,7vw,115px);
  letter-spacing:var(--tracking);
  font-weight:var(--heading-weight);
  line-height:1;
  margin:20px 0
}

.rsvp-grid p {
  font-size:18px;
  line-height:1.5
}

.rsvp-open {
  font-size:26px;
  border-bottom:1px solid
}

.rsvp-open:hover {
  text-decoration:none;
  color:var(--red)
}

.rsvp-grid>div:last-child {
  overflow:auto;
  max-height:calc(var(--page-height) - 175px);
  padding:0 12px 12px 0;
  overscroll-behavior:contain;
  scrollbar-width:thin
}

.rsvp-grid .preview-note {
  font:13px/1.4 var(--mono);
  margin:15px 0
}

.rsvp details {
  border-top:1px solid
}

.rsvp summary {
  font-size:18px;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  padding:16px 0;
  list-style:none
}

.rsvp summary::-webkit-details-marker {
  display:none
}

.rsvp details[open] summary {
  border-bottom:1px solid var(--line);
  margin-bottom:15px
}

.demo-picker {
  background:#f2f2f2;
  padding:12px;
  margin-bottom:20px
}

.demo-picker label {
  font:13px var(--mono);
  display:block
}

.demo-picker p {
  font:12px/1.4 var(--mono);
  margin:0
}

form {
  display:grid;
  gap:10px
}

label,legend {
  font:14px var(--mono)
}

input:not([type=radio]),textarea,select {
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  border-radius:0;
  padding:10px 0;
  width:100%;
  color:var(--ink);
  margin-bottom:12px
}

textarea {
  resize:vertical
}

fieldset {
  border:0;
  padding:0;
  margin:0 0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:20px
}

legend {
  margin-bottom:15px
}

.radio {
  font:15px var(--sans);
  display:flex;
  gap:8px;
  align-items:center
}

input[type=radio] {
  accent-color:var(--ink)
}

.attendance-fields,.companion {
  display:grid;
  gap:10px
}

.attendance-fields[hidden] {
  display:none
}

.companion {
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:15px
}

.companion legend {
  padding-top:15px
}

.submit {
  background:#111;
  color:#fff;
  display:flex;
  justify-content:space-between;
  border:0;
  padding:16px;
  cursor:pointer
}

.submit:hover {
  background:var(--red)
}

#form-status {
  font-size:13px;
  margin:0;
  min-height:20px
}

footer {
  height:var(--page-height);
  background:#111;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px 3% 90px
}

footer>div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font:14px var(--mono)
}

footer p {
  font-size:clamp(100px,28vw,430px);
  font-weight:var(--heading-weight);
  letter-spacing:var(--tracking);
  line-height:1;
  margin:0;
  color:var(--red)
}

footer p span {
  font-size:30px;
  vertical-align:top;
  letter-spacing:0
}

.next-section {
  position:fixed;
  right:3%;
  bottom:24px;
  width:56px;
  height:56px;
  border:1px solid #111;
  border-radius:50%;
  background:#111;
  color:#fff;
  font:30px Arial;
  z-index:35;
  cursor:pointer;
  transition:background-color 100ms,color 100ms,border-color 100ms;
  display:grid;
  place-items:center
}

.next-section.on-red {
  background:#fff;
  border-color:#fff;
  color:#111
}

.next-section:hover {
  transform:translateY(2px)
}

.image-overlay {
  position:fixed;
  inset:var(--header-height) 0 0;
  z-index:25;
  display:grid;
  place-items:center;
  background:#ffffffc4;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 90ms,visibility 90ms
}

.image-overlay.visible {
  opacity:1;
  visibility:visible
}

.overlay-content {
  height:76%;
  width:min(76vw,900px);
  display:flex;
  align-items:center;
  justify-content:center
}

.overlay-content img {
  height:100%;
  max-width:100%;
  object-fit:contain
}

.overlay-content .portrait {
  height:100%;
  width:min(600px,100%)
}

@media(max-width:650px) {
  :root {
    --header-height:62px
  }
  header {
    padding:0 5%
  }
  .brand {
    font-size:17px
  }
  nav {
    gap:15px;
    font-size:12px
  }
  nav sup {
    display:none
  }
  .page-section {
    padding:20px 5% 76px
  }
  .issue {
    font-size:12px
  }
  .issue>span:last-child {
    max-width:90px;
    text-align:right
  }
  .cover h1 {
    font-size:10.7vw
  }
  .cover-bottom {
    font-size:14px;
    gap:14px
  }
  .cover-bottom p {
    margin:0 0 0 auto
  }
  .details {
    grid-template-columns:1fr;
    gap:22px;
    align-content:center
  }
  .section-label {
    font-size:11px;
    padding:10px 0 12px
  }
  .details h3 {
    font-size:clamp(31px,7.5vw,43px);
    margin:3px 0 10px
  }
  .details p {
    font-size:14px;
    margin:8px 0;
    line-height:1.4
  }
  .detail-links {
    margin-top:12px;
    gap:7px
  }
  .detail-links a {
    font-size:22px
  }
  .programme {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px;
    margin:12px 0
  }
  .programme h4 {
    font-size:19px;
    padding:8px 0
  }
  .programme h4 span {
    font-size:10px;
    width:22px
  }
  .talents {
    gap:30px
  }
  .editorial p {
    font-size:7vw
  }
  .models {
    gap:15px
  }
  .portrait {
    height:33svh
  }
  .portrait svg {
    width:100%
  }
  .model-info h3 {
    font-size:24px
  }
  .rsvp-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .rsvp h3 {
    font-size:58px;
    margin:8px 0
  }
  .rsvp-grid p {
    font-size:15px;
    margin:8px 0
  }
  .rsvp-open {
    font-size:22px
  }
  .rsvp-grid>div:last-child {
    max-height:calc(var(--page-height) - 300px)
  }
  .next-section {
    right:5%;
    bottom:20px;
    width:48px;
    height:48px;
    font-size:26px
  }

  .overlay-content {
    width:86vw;
    height:76%
  }
  footer {
    padding:24px 5% 85px
  }
  footer>div {
    font-size:11px;
    flex-wrap:wrap
  }
  footer p {
    font-size:29vw
  }
  footer p span {
    font-size:20px
  }
}

@media(max-height:650px) {
  .page-section {
    padding-top:12px;
    padding-bottom:62px
  }
  .details h3 {
    font-size:clamp(27px,4vw,54px);
    margin-bottom:10px
  }
  .details p {
    font-size:13px
  }
  .section-label {
    padding:8px 0
  }
  .programme {
    margin:8px 0
  }
  .programme h4 {
    padding:6px 0;
    font-size:17px
  }
  .detail-links {
    margin-top:10px;
    gap:4px
  }
  .detail-links a {
    font-size:19px
  }
  .cover-bottom {
    font-size:13px
  }
  .issue {
    font-size:12px
  }
  .talents {
    gap:12px
  }
  .editorial p {
    font-size:clamp(23px,3.4vw,46px)
  }
  .portrait {
    height:29svh
  }
  .rsvp h3 {
    font-size:42px;
    margin:6px 0
  }
  .rsvp-grid p {
    font-size:13px
  }
  .rsvp-grid>div:last-child {
    max-height:calc(var(--page-height) - 130px)
  }
}

@media(max-width:650px) and (max-height:740px) {
  .details {
    gap:12px
  }
  .details h3 {
    font-size:30px
  }
  .details p {
    font-size:12px
  }
  .detail-links a {
    font-size:19px
  }
  .programme h4 {
    font-size:16px;
    padding:5px 0
  }
  .section-label {
    padding:7px 0;
    font-size:10px
  }
  .details .detail-links {
    margin-top:7px
  }
  .rsvp-grid>div:last-child {
    max-height:calc(var(--page-height) - 260px)
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important
  }
}

:root {
  --display:var(--sans)
}

body[data-font-pair=grotesk] {
  --sans:Arial,Helvetica,sans-serif;
  --display:'Arial Black',Arial,sans-serif
}

.cover h1,.details h3,.editorial p,.rsvp h3,footer p {
  font-family:var(--display)
}

.cover h1 .cover-italic {
  font-family:var(--serif)
}

.page-section {
  padding-bottom:64px
}

.programme h4 {
  padding-top:10px;
  padding-bottom:10px
}

@media(max-width:650px) {
  .page-section {
    padding-bottom:76px
  }
  .programme h4 {
    padding-top:8px;
    padding-bottom:8px
  }
}

@media(max-width:650px) and (max-height:740px) {
  .programme h4 {
    padding-top:5px;
    padding-bottom:5px
  }
}

body {
  --display:var(--sans)
}

.wedding-date span {
  display:block
}

@media(max-width:650px) and (max-height:740px) {
  .wedding-date {
    display:flex;
    flex-wrap:wrap;
    gap:0 .2em
  }
}

@media(max-width:360px) {
  .brand {
    font-size:14px
  }
  nav {
    font-size:11px;
    gap:10px
  }
  .cover-bottom {
    font-size:12px
  }
  .issue {
    font-size:11px
  }
}

.image-overlay {
  display:flex;
  align-items:center;
  justify-content:center
}

.overlay-content {
  height:calc(76svh - 54px);
  min-height:0;
  max-height:calc(100svh - var(--header-height) - 36px)
}

.overlay-content img {
  display:block;
  min-height:0;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain
}

.attendance-fields:disabled {
  opacity:.42;
  filter:grayscale(1)
}

.attendance-fields {
  transition:opacity 100ms
}

.attendance-fields:disabled input,.attendance-fields:disabled select {
  cursor:not-allowed
}

.image-overlay {
  background:transparent
}

/* Portrait overlay controls */
.overlay-close {
  position:absolute;
  right:3%;
  top:16px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  pointer-events:auto;
  background:#fff;
  color:#111;
  border:1px solid #111;
  border-radius:50%;
  font:30px/1 Arial,sans-serif;
  cursor:pointer
}

.overlay-close[hidden] {
  display:none
}

.overlay-close:focus-visible {
  outline:3px solid #111;
  outline-offset:4px
}