/* Wedding website visual prototype. Replace images with originals using same filenames. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600&family=EB+Garamond:wght@400;500&family=Pinyon+Script&display=swap');

/* Once supplied, put your licensed Burgues font at fonts/BurguesScript.woff2. */
@font-face {
  font-family: 'Burgues Script';
  src: url('./fonts/BurguesScript.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --terracotta: #C1755A;
  --olivegold: #937D4F;
  --line: rgba(147, 125, 79, .48);
  --paper: #f3e1b8;
  --script: 'Burgues Script', 'Pinyon Script', 'URW Chancery L', cursive;
  --cinzel: 'Cinzel', 'Times New Roman', serif;
  --eb: 'EB Garamond', Georgia, serif;
  --cormorant: 'Cormorant Garamond', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; height: 100%; overflow: hidden; }
body {
  width: 100%; height: 100%; height: 100dvh;
  padding: 0; margin: 0; overflow: hidden;
  background: var(--paper) url('assets/BG1.png') center / cover no-repeat;
  color: var(--olivegold);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; }
.frame {
  height: 100%; height: 100dvh; width: 100vw;
  position: relative; isolation: isolate; overflow: hidden;
}
/* Corner art is independent of the center, so no scrolling can move it. */
.corner { position: absolute; width: clamp(150px, min(27vw, 33dvh), 360px); height: auto; pointer-events: none; z-index: 1; object-fit: contain; }
.corner--tl { top: 0; left: 0; }
.corner--tr { top: 0; right: 0; }
.corner--bl { bottom: 0; left: 0; }
.corner--br { bottom: 0; right: 0; }
.frame:before { content: ''; position:absolute; inset: clamp(18px, 2.1vw, 35px); border: 1px solid rgba(147,125,79,.11); pointer-events: none; z-index:0; }
/* Both swords are ornaments anchored to the PAGE frame, not the text. */
.side-swords {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.side-sword {
  position: absolute;
  top: 50%;
  width: clamp(100px, min(14vw, 20dvh), 190px);
  height: auto;
  opacity: .95;
  transform: translateY(-50%);
}
.side-sword--left { left: 0; }
.side-sword--right {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}

.frame-center {
  position:absolute;
  inset: clamp(116px, 15dvh, 176px) 28px clamp(104px, 12dvh, 152px);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.fit-content {
  text-align:center; width:min(100%, 760px);
  flex: 0 0 auto; transform-origin: center center;
}
.top-spark { display:block; margin:0 auto 10px; width:22px; height:auto; opacity:.85; }
.intro { font-family:var(--script); color:var(--olivegold); font-size:clamp(25px,2.55vw,37px); line-height:1.12; margin:0 0 19px; font-weight:400; }
.name { color:var(--terracotta); font: 500 clamp(26px,3vw,41px)/1.17 var(--cinzel); letter-spacing:.055em; text-transform:uppercase; margin:0; }
.ampersand { width:clamp(84px, 9.7dvh, 121px); display:block; margin:0 auto -1px; }
.name--second { margin-bottom:22px; }
.separator { display:flex; gap:13px; align-items:center; justify-content:center; margin:0 auto 15px; width:min(210px,60%); }
.separator::before, .separator::after { content:''; flex:1; height:1px; background:var(--line); }
.separator img { width:18px; }
.when { color:var(--olivegold); font:400 clamp(28px,2.9vw,40px)/1.02 var(--script); margin:0 0 6px; }
.date-line { color:var(--olivegold); font:500 clamp(16px,1.6vw,23px)/1.2 var(--cormorant); letter-spacing:.04em; margin:0 0 19px; }
.location { color:var(--olivegold); font:500 clamp(15px,1.3vw,20px)/1.34 var(--eb); margin:0; }
.location strong { font-weight:500; }

.page-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:28px; }
.page-nav a, .page-nav button {
  display:inline-flex; min-width:124px; align-items:center; justify-content:center; text-decoration:none;
  border:1px solid rgba(147,125,79,.7); color:var(--terracotta); background:rgba(255,245,221,.16);
  padding:10px 16px 9px; font:500 13px/1.1 var(--cinzel); letter-spacing:.12em; transition:background .2s,border-color .2s;
  cursor:pointer;
}
.page-nav a:hover, .page-nav button:hover, .backlink:hover {background:rgba(255,245,221,.52); border-color:var(--terracotta)}
.page-nav button:focus-visible,.page-nav a:focus-visible,.backlink:focus-visible {outline:2px solid var(--terracotta);outline-offset:3px;}
.backlink { position:absolute; top: min(5dvh, 48px); left:50%; transform:translateX(-50%); z-index:3; text-decoration:none; color:var(--olivegold); border:1px solid var(--line); padding:7px 15px; background:rgba(255,246,221,.33); font:500 11px/1.2 var(--cinzel); letter-spacing:.14em; white-space:nowrap; }
.notice { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(255,248,228,.95); color:var(--olivegold); border:1px solid var(--line); padding:8px 14px; font:16px var(--eb); box-shadow:0 6px 30px #5b472526; z-index:5; text-align:center; width:max-content; max-width:calc(100% - 30px); }
.notice[hidden] {display:none;}
/* Shared details and RSVP typography */
.section-title { font:500 clamp(29px,3.2vw,42px)/1.1 var(--cinzel); letter-spacing:.11em; text-transform:uppercase; color:var(--terracotta); margin:0 0 25px; }
.detail-stack { display:grid; grid-template-columns:1fr 1fr; gap:20px 34px; width:min(660px,100%); margin:auto; }
.detail { padding:0 8px; }
.detail h2 { font:400 clamp(26px,2.75vw,36px)/1 var(--script); margin:0 0 8px; color:var(--olivegold); }
.detail p { font:500 19px/1.4 var(--eb); margin:0; }
.detail--full { grid-column: 1 / -1; }
.page-note {font:italic 17px/1.28 var(--eb); margin:22px auto 0; max-width:440px;}
.page-nav--small { margin-top:26px; }
.rsvp-form { display:grid; gap:14px; width:min(450px,100%); margin:0 auto; text-align:left; }
.form-row { display:grid; gap:4px; }
.form-row label,.form-legend {font:500 15px/1.2 var(--cinzel);letter-spacing:.04em;color:var(--olivegold);}
.form-row input,.form-row select { width:100%; padding:9px 10px; background:rgba(255,248,227,.46); border:1px solid var(--line); border-radius:0; color:#62522f; font:18px var(--eb); }
.form-row input:focus-visible,.form-row select:focus-visible {outline:2px solid var(--terracotta); outline-offset:1px;}
.radio-row {display:flex;justify-content:center;gap:25px;align-items:center;margin:2px auto 0;}
.radio-row label { display:flex; align-items:center; gap:7px; font:19px var(--eb); }
.radio-row input { accent-color:var(--terracotta); }
.rsvp-btn {width:100%; margin-top:2px;}
.rsvp-caption { text-align:center; font:italic 16px/1.2 var(--eb); margin:9px auto 0; }
@media (max-width: 700px) {
  .corner { width:clamp(113px,36vw,180px); }
  .frame:before {inset:13px;}
  .frame-center {inset:clamp(117px,17dvh,178px) 17px clamp(105px,12dvh,155px);}
  .intro {font-size:32px;margin-bottom:15px;}
  .name {font-size:clamp(23px,6vw,30px);letter-spacing:.025em;}
  .ampersand {width:86px;}
  .name--second{margin-bottom:16px;}
  .separator{margin-bottom:12px;}
  .when{font-size:33px;}
  .date-line{font-size:18px;margin-bottom:13px;}
  .location {font-size:17px;}
  /* Keep the swords at the outer edges on narrow screens. */
  .side-sword { width: clamp(64px, 16vw, 95px); }
  .side-sword--left { left: -17px; }
  .side-sword--right { right: -17px; }
  .page-nav{gap:9px;margin-top:22px;}
  .page-nav a,.page-nav button{min-width:94px;padding:10px 9px;font-size:11px;letter-spacing:.06em;}
  .detail-stack {gap:15px; grid-template-columns:1fr;}
  .detail--full{grid-column:auto;}
  .section-title{margin-bottom:22px;}
  .detail h2{font-size:28px;margin-bottom:3px;}
  .detail p{font-size:18px;}
  .page-note{font-size:15px;margin-top:14px;}
  .backlink{top:22px;}
  .rsvp-form {gap:9px;}
  .form-row label,.form-legend{font-size:12px;}
  .form-row input,.form-row select{padding:7px 8px;font-size:17px;}
  .rsvp-caption{font-size:14px;}
}
@media (max-height: 660px) {
  .corner{width: min(23vw, 28dvh);}
  .frame-center{inset:clamp(70px,13dvh,110px) 17px clamp(63px,10dvh,90px);}
  .intro{margin-bottom:9px;}
  .ampersand{width:60px;}
  .name--second{margin-bottom:8px;}
  .separator{margin-bottom:6px;}
  .date-line{margin-bottom:9px;}
  .page-nav{margin-top:14px;}
  .section-title{margin-bottom:14px;}
}
@media (prefers-reduced-motion: reduce) { .page-nav a,.page-nav button {transition:none;} }

/* Sword horizontal positioning adjustments */

/* Desktop: move swords closer to the outside edges */
@media (min-width: 701px) {
  .side-sword--left {
    left: -18px;
  }

  .side-sword--right {
    right: -18px;
  }
}

/* Mobile sword positioning */
@media (max-width: 700px) {
  .side-sword--left {
    left: -8px;
  }

  .side-sword--right {
    right: -8px;
  }
}

/* Stars centered on the outer horizontal page borders */

.frame-spark {
  position: absolute;
  left: 50%;
  width: 24px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.frame-spark--top {
  top: clamp(18px, 2.1vw, 35px);
}

.frame-spark--bottom {
  top: auto;
  bottom: clamp(18px, 2.1vw, 35px);
  transform: translate(-50%, 50%);
}

/* Mobile border alignment */

@media (max-width: 700px) {
  .frame-spark {
    width: 20px;
  }

  .frame-spark--top {
    top: 13px;
  }

  .frame-spark--bottom {
    bottom: 13px;
  }
}