/* Design layer for the guest pages (Anton 2026-10-25), drawn from the
   printed invitation: olive frame, cream paper, thin gold lines and
   ornaments, plum accents, Great Vibes script and Cormorant Garamond.

   Loaded after style.css on the front page and Tilmelding only (the admin
   pages keep the plain look). Removing the <link> to this file returns a page
   to the plain design; see ../DESIGN-BACKUP.md for the full way back. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Great Vibes"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/great-vibes-latin-400-normal.woff2") format("woff2"); }

body.designed {
  --olive: #4c5a3a;
  --olive-dark: #3d4930;
  --paper: #f6f1e6;
  --paper-light: #fbf8f1;
  --gold: #b39555;
  --gold-light: #d3bd86;
  --plum: #7a3d55;
  --ink: #3b3a2f;
  --soft: #8a826c;
  /* the plain design's names, mapped onto the palette */
  --bg: var(--olive);
  --surface: var(--paper-light);
  --text: var(--ink);
  --muted: var(--soft);
  --line: #ddd2b8;
  --accent: var(--olive);
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", "Brush Script MT", cursive;

  background: var(--olive);
  color: var(--ink);
  font: 500 19px/1.6 var(--serif);
}

/* ---------- header: tabs on the green ---------- */

.designed .site-header { background: transparent; border: 0; padding: 1rem 16px 0.4rem; }
.designed .couple { margin: 0 0 0.35rem; color: #f3ecda; font: 400 clamp(2rem, 6vw, 2.6rem)/1.1 var(--script); }
.designed .couple .amp { color: var(--gold-light); }
.designed .tabs { gap: 1.5rem; }
.designed .tabs a {
  color: #e8e0cc;
  font: 500 0.82rem/1 var(--serif);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid transparent;
}
.designed .tabs a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold-light); }

/* ---------- the paper card with its gold frame ---------- */

.designed main.paper {
  position: relative;
  /* wide screens get a wide page (Anton 2026-10-25) */
  max-width: min(1240px, 92vw);
  margin: 0.6rem auto 1.5rem;
  padding: 2.2rem clamp(18px, 5vw, 64px) 3rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.55), transparent 60%),
    var(--paper);
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: -9px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}
@media (max-width: 600px) {
  /* phones: full width with equal green on both sides (the 92vw cap is for
     wider screens only; here it left more green on the right) */
  .designed main.paper { margin: 0.3rem 12px 1rem; width: auto; max-width: none; outline-offset: -6px; padding-top: 1.6rem; }
}

.corner { position: absolute; width: 74px; height: 74px; background: url("/img/corner.svg") no-repeat center / contain; pointer-events: none; z-index: 1; }
.corner.tl { top: 3px; left: 3px; }
.corner.tr { top: 3px; right: 3px; transform: scaleX(-1); }
.corner.bl { bottom: 3px; left: 3px; transform: scaleY(-1); }
.corner.br { bottom: 3px; right: 3px; transform: scale(-1, -1); }
@media (max-width: 600px) { .corner { width: 46px; height: 46px; } }

/* ---------- photo row: fades into the paper, like the invitation ---------- */

.designed .showcase { margin: -0.6rem calc(-1 * clamp(18px, 5vw, 64px) + 12px) 0; }
/* Strong fade at the bottom; a slight one at the sides and top, so the
   row's edges blend into the paper too (Anton 2026-10-25). */
.designed .slides {
  --side-fade: clamp(14px, 3vw, 40px);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 14px, #000 72%, transparent),
    linear-gradient(to right, transparent 0, #000 var(--side-fade), #000 calc(100% - var(--side-fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 14px, #000 72%, transparent),
    linear-gradient(to right, transparent 0, #000 var(--side-fade), #000 calc(100% - var(--side-fade)), transparent);
  mask-composite: intersect;
}
.designed .slides img { border-radius: 2px; }

/* ---------- intro and sections (the website layout, Anton 2026-10-25) ---------- */

.designed .ornament { display: block; margin: 0 auto; }
.designed .ornament.moon { width: 110px; height: auto; }
.designed .names {
  margin: 0.1rem 0 0.4rem;
  color: var(--olive);
  font: 400 clamp(3rem, 9vw, 5rem)/1.15 var(--script);
}
.designed .names.small { font-size: clamp(2.6rem, 8vw, 3.8rem); }
/* The front page heading: romantic but calm — the serif in italics rather
   than the script (Anton 2026-10-25). */
.designed .intro-title {
  margin: 0.3rem 0 0.3rem;
  color: var(--olive);
  font: italic 400 clamp(2.4rem, 7vw, 3.3rem)/1.15 var(--serif);
  letter-spacing: 0.01em;
}
.designed .kicker { margin: 0.8rem 0 0; color: var(--soft); font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; }

.designed .block { border: 0; border-bottom: 1px solid var(--line); padding: 2.2rem 0; }
.designed .block:last-child { border-bottom: 0; padding-bottom: 0.5rem; }
.designed .block > p, .designed .block > h1 + p { max-width: 42rem; }
.designed .intro { text-align: center; padding-top: 1.4rem; }
.designed .intro > p { margin-left: auto; margin-right: auto; }
.designed .intro .date { color: var(--plum); font-size: 1.15rem; letter-spacing: 0.06em; margin-top: 0; }

.designed h2 { color: var(--olive); font: 600 1.7rem/1.2 var(--serif); margin: 0 0 1.4rem; }
.designed h2::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 0.55rem; background: var(--gold); }

/* ---------- buttons ---------- */

.designed .button {
  background: var(--olive);
  color: #f6f1e6;
  border: 1px solid var(--olive);
  border-radius: 2px;
  padding: 0.75rem 1.8rem;
  font: 500 0.85rem/1.2 var(--serif);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px var(--olive), inset 0 0 0 4px var(--gold-light);
  transition: background 0.2s;
}
.designed .button:hover { background: var(--olive-dark); box-shadow: inset 0 0 0 3px var(--olive-dark), inset 0 0 0 4px var(--gold-light); }
.designed .button.secondary { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }

/* ---------- small capital labels (Kirken, Festen, Tidsplan, Dresscode) ---------- */

.designed .label {
  margin: 0 0 0.6rem;
  color: var(--plum);
  font: 600 0.9rem/1.2 var(--serif);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- places ---------- */

.designed .place-photo { border-radius: 2px; border: 1px solid var(--gold-light); padding: 5px; background: var(--paper-light); }
.designed .place-text .label { margin-bottom: 0.4rem; }
.designed .place-text p { margin: 0.15rem 0; }
.designed .place .time { color: var(--soft); font-style: italic; }
.designed a { color: var(--plum); text-decoration-color: var(--gold-light); text-underline-offset: 3px; }

/* ---------- programme ---------- */

.designed .block h3.label { margin-top: 1.6rem; }
.designed .block h2 + h3.label { margin-top: 0; }
.designed .schedule { gap: 0.4rem 1.4rem; margin: 0.4rem 0 0; font-size: 1.08rem; }
.designed .schedule dt { color: #9a7d40; font-weight: 600; }

/* ---------- footer: on the green, gold-framed QR ---------- */

.designed .site-footer { padding-left: max(16px, calc((100% - min(1240px, 92vw)) / 2 + 24px)); padding-right: max(16px, calc((100% - min(1240px, 92vw)) / 2 + 24px)); }
@media (max-width: 599px) { .designed .site-footer { padding-left: 16px; padding-right: 16px; } }
.designed .site-footer { background: var(--olive-dark); color: #e8e0cc; border-top: 1px solid rgb(211 189 134 / 0.5); box-shadow: 0 -4px 18px rgb(0 0 0 / 0.2); }
.designed .site-footer a { color: #f6f1e6; text-decoration-color: rgb(211 189 134 / 0.6); }
.designed .contact-name, .designed .wishlist-title a { color: var(--gold-light); font-family: var(--serif); font-weight: 600; letter-spacing: 0.04em; }
.designed .wishlist img { background: #fff; padding: 5px; border: 1px solid var(--gold-light); }
.designed .footer-toggle { color: var(--gold-light); letter-spacing: 0.12em; }

/* ---------- Tilmelding ---------- */

.designed .rsvp-block { text-align: left; }
.designed .rsvp-block > .ornament, .designed .rsvp-block > .kicker, .designed .rsvp-block > .names { text-align: center; }
.designed .rsvp-block > .names { margin-bottom: 1.4rem; }
.designed #deadline-note { text-align: center; color: var(--soft); font-style: italic; }
.designed .guest { background: rgb(255 255 255 / 0.45); border: 1px solid var(--gold-light); border-radius: 2px; }
.designed .guest legend { color: var(--olive); font: 400 1.9rem/1 var(--script); padding: 0 0.5rem; }
.designed .field > span:first-child { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
.designed input:not([type="radio"]):not([type="checkbox"]), .designed select, .designed textarea {
  background: var(--paper-light);
  border: 1px solid #d8cdb3;
  border-radius: 2px;
  font: 500 1.05rem/1.4 var(--serif);
  color: var(--ink);
}
.designed input:focus, .designed select:focus, .designed textarea:focus { outline: 2px solid rgb(76 90 58 / 0.35); outline-offset: 1px; border-color: var(--olive); }
.designed input[type="radio"], .designed input[type="checkbox"] { accent-color: var(--olive); }
.designed #rsvp button[type="submit"] { display: block; margin: 0.6rem auto 0; }
.designed .notice { background: var(--paper-light); border-color: var(--gold-light); text-align: center; }
.designed dialog { background: var(--paper); border: 1px solid var(--gold); font-family: var(--serif); }