@font-face {
  font-family: 'MS Cloudy';
  src: url('ms-cloudy.woff2') format('woff2'),
       url('ms-cloudy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Times New Roman', Times, serif;
  src: url('ms-cloudy.woff2') format('woff2'),
       url('ms-cloudy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Times New Roman', Times, serif;
  src: url('mrs-evans-roman.woff2') format('woff2'),
       url('mrs-evans-roman.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root{
  --ink: #2f4a66;         /* lighter blue text */         /* dark blue text */
  --paper: #fcf9f3;       /* warm paper */
  --paper2: #ffffff;
  --line: #d6d1c8;        /* warm grey line */
  --soft: #f7f4ee;        /* soft panel fill */
  --sage: #71746b;        /* muted green-grey */
  --sky: #c4cad8;         /* light blue-grey accent */
  --terracotta: #caa089;  /* sand-rose accent */  /* warm accent */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: 'Times New Roman', Times, serif;
  color:var(--ink);
  background:#fff;
  line-height:1.75;
  font-size:17px;
}

.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 52px 22px;
}

.hero{
  text-align:center;
  padding-top: 64px;
  padding-bottom: 44px;
}

.kicker{
  letter-spacing: 0.05em;
  text-transform: none;
  font-size: 24px;
  margin: 0 0 22px;
  opacity: 1;
  line-height: 1.5;
}
.names{
  font-family: 'Times New Roman', Times, serif;
  font-weight:500;
  letter-spacing:0.04em;
  font-size: clamp(44px, 6.2vw, 70px);
  margin: 0 0 10px;
}

.date{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}
.place{
  margin: 10px 0 0;
  font-size: 15px;
  opacity: 0.92;
}
.tagline{
  max-width: 720px;
  margin: 0 auto 26px;
  font-size: 18px;
}

.actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 13px;
  letter-spacing: 0.05em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: transform .06s ease, opacity .12s ease;
}
.btn:hover{ transform: translateY(-1px); opacity: .92; }

.btn.primary{
  background: var(--ink);
  color: #fff;
}

.divider{
  width: 78px;
  height: 1px;
  background: var(--line);
  margin: 34px auto 30px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 6px;
}

.card{
  grid-column: span 3;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 18px;
  text-align:left;
}

.card h2{
  font-family: 'Times New Roman', Times, serif;
  font-weight:500;
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.card p{ margin:0; font-size: 14px; }

.note{
  max-width: 860px;
  margin: 26px auto 0;
  font-size: 14px;
  opacity: .88;
}

.content{ padding-top: 14px; }

.section{ margin: 0 0 48px; }
.section-title{
  font-family: 'Times New Roman', Times, serif;
  font-weight:500;
  letter-spacing:0.03em;
  font-size: 30px;
  margin: 0 0 16px;
}

.timeline{
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow:hidden;
}

.tl-item{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 16px 18px;
  background:#fff;
}
.tl-item + .tl-item{ border-top: 1px solid var(--line); }

.tl-time{
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .9;
  padding-top: 2px;
}

.tl-title{
  font-weight:700;
  font-size: 15px;
}

.tl-sub{
  font-size: 14px;
  opacity: .9;
  margin-top: 2px;
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.panel{
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 18px;
}

.panel h3{
  font-family: 'Times New Roman', Times, serif;
  font-weight:500;
  margin: 0 0 6px;
  font-size: 20px;
}

.muted{ opacity: .88; margin-top: 0; }
.small{ font-size: 13px; }
.link{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.map{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--line);
  background:#fff;
  margin: 12px 0 10px;
}

.list{
  margin: 10px 0 0;
  padding-left: 18px;
}

.footer-divider{
  width: 78px;
  height: 1px;
  background: var(--line);
  margin: 28px auto 0;
}

.footer{
  padding-top: 22px;
  padding-bottom: 40px;
  text-align:center;
}

.footer-text{
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: .9;
}

/* Responsive */
@media (max-width: 980px){
  .card{ grid-column: span 6; }
}
@media (max-width: 780px){
  .grid-2{ grid-template-columns: 1fr; }
  .card{ grid-column: span 12; }
  .tl-item{ grid-template-columns: 1fr; gap: 6px; }
}

.date-block{
  display: inline-block;
  padding: 14px 18px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  margin: 14px 0 10px;
}

.rsvp-lines{
  margin: 10px 0 0;
  font-size: 15px;
}
.rsvp-label{
  display: inline-block;
  min-width: 74px;
  font-weight: 700;
}

.cloudy{
  font-family: 'Times New Roman', Times, serif;
}



/* --- Paper invitation look overrides --- */
body{
  background: linear-gradient(180deg, #fbf8f2 0%, #ffffff 55%, #fbf8f2 100%);
  font-size: 17px;
}

.wrap{
  max-width: 920px;
  padding: 64px 34px;
}

.hero.wrap{
  margin-top: 38px;
  margin-bottom: 26px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 28px;
}

.content.wrap{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 28px;
  margin-bottom: 30px;
}

.footer.wrap{
  padding-top: 10px;
  padding-bottom: 54px;
}

.names{
  line-height: 1.06;
  letter-spacing: 0.02em;
}

.names-and{
  font-size: 0.52em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-block;
  margin: 10px 0;
  opacity: .92;
}

.kicker{
  font-size: 20px;
  letter-spacing: 0.26em;
}

.date-block{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 22px 14px;
}

.divider, .footer-divider{
  width: 92px;
}

/* Navigation: less "button", more invitation-card tabs */
.btn{
  border-radius: 14px;
  padding: 11px 16px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.btn.primary{
  background: transparent;
  color: var(--ink);
  border-width: 2px;
}

/* Cards & panels: softer, more paper-like */
.card, .panel{
  background: #fff;
  border: 1px solid var(--line);
}

.cards{
  margin-top: 18px;
}

.timeline{
  background: #fff;
}

/* Section titles feel like calligraphy headings */
.section-title{
  font-size: 34px;
  margin-bottom: 18px;
}

/* Links slightly more refined */
.link{
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Mobile spacing */
@media (max-width: 780px){
  .wrap{ padding: 46px 18px; }
  .hero.wrap{ margin-top: 18px; }
  .section-title{ font-size: 30px; }
}

/* Force Hoefler Text everywhere */
h1, h2, h3, h4, h5, h6, p, a, li, span, div {
  font-family: 'Times New Roman', Times, serif;
}


/* Emphasized emotional statement */
.tagline.highlight{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 24px;
  margin-bottom: 34px;
}


/* Elegant script for couple names */
.names{
  font-family: 'Great Vibes', cursive !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(54px, 6.8vw, 86px);
}

/* Classic drop cap for the key statement */
.tagline.dropcap::first-letter{
  float: left;
  font-size: 3.2em;
  line-height: 0.85;
  padding-right: 10px;
  padding-top: 8px;
  font-weight: 700;
}

/* More vertical whitespace like fine stationery */
.wrap{
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}
.hero.wrap{
  padding-top: 92px !important;
  padding-bottom: 80px !important;
}
.section{
  margin-bottom: 74px !important;
}
.section-title{
  margin-bottom: 26px !important;
}

/* Fine typographic rules */
.divider,
.footer-divider{
  height: 1px !important;
  opacity: 0.95;
}

.kicker::after{
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  background: var(--line);
  margin: 22px auto 0;
}

.section-title::after{
  content: "";
  display: block;
  width: 92px;
  height: 1px;
  background: var(--line);
  margin-top: 14px;
}

/* Add subtle top rule to each main panel for print-like feel */
.panel{
  position: relative;
}
.panel::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  height: 1px;
  background: var(--line);
  opacity: 0.9;
}
.panel > *:first-child{
  margin-top: 14px;
}

/* Paper tone refinement */
body{
  background: linear-gradient(180deg, #fcf9f3 0%, #ffffff 50%, #fcf9f3 100%) !important;
}

/* Couple names in MS Cloudy (requires ms-cloudy.woff2/.woff in same folder) */
.names{
  font-family: 'MS Cloudy', 'Times New Roman', Times, serif !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(52px, 6.6vw, 84px);
}

/* Key family invitation statement – highly legible & prominent */
.callout{
  max-width: 860px;
  margin: 34px auto 0;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  position: relative;
}
.callout::before,
.callout::after{
  content:"";
  position:absolute;
  left: 26px;
  right: 26px;
  height: 1px;
  background: var(--line);
  opacity: .95;
}
.callout::before{ top: 14px; }
.callout::after{ bottom: 14px; }

.callout-text{
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 780px){
  .callout{ padding: 18px 18px; }
  .callout-text{ font-size: 18px; }
}

/* v9+ tweak: names slightly smaller for better hierarchy */
.names{
  font-size: clamp(46px, 5.6vw, 74px) !important;
}

/* v9+ tweak: date & place more prominent */
.date{
  font-size: 22px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
}
.place{
  font-size: 20px !important;
  letter-spacing: 0.10em !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  margin-top: 14px !important;
}

/* v9+ tweak: closing sentence */
.closing-line{
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Palette application */
body{
  color: var(--ink) !important;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper2) 55%, var(--paper) 100%) !important;
}

.card, .panel, .timeline, .callout, .date-block, .hero.wrap, .content.wrap{
  border-color: var(--line) !important;
}
.card, .panel{
  background: var(--soft) !important;
}

.link{ color: var(--ink) !important; }
.btn{ border-color: var(--ink) !important; }
.btn.primary{ border-color: var(--terracotta) !important; }

.kicker::after, .section-title::after, .callout::before, .callout::after{
  background: var(--line) !important;
}

/* Decorative images (no people) */
.hero-rings{
  width: min(320px, 78%);
  height: auto;
  display: block;
  margin: 18px auto 10px;
}
.hero-ornament{
  width: min(520px, 92%);
  height: auto;
  display: block;
  margin: 8px auto 18px;
  opacity: 0.95;
}
.section-ornament{
  width: min(520px, 92%);
  height: auto;
  display: block;
  margin: 0 auto 10px;
  opacity: 0.92;
}

/* Calendar note */
.calendar-note{
  margin: 6px auto 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: 0.95;
}

.hero-rings{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

/* v9 final tweaks: rings 40% smaller */
.hero-rings{
  width: min(192px, 60%) !important;
}

/* v9 final tweaks: names 25% smaller */
.names{
  font-size: clamp(34px, 4.2vw, 56px) !important;
}

/* Unterkunft list styling */
.lodgings{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 14px;
}
.lodgings li{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px;
}
.lodging-name{
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
}
.lodging-meta{
  margin-top: 4px;
  font-size: 15px;
  opacity: 0.95;
}
.lodging-note{
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.9;
  font-style: italic;
}
.lodging-links{
  margin-top: 8px;
  font-size: 14px;
}

/* Feinschliff: center key section titles */
.section-title{
  text-align: center;
}
.section-title::after{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Unterkunft Hinweis */
.lodging-hint{
  margin-top: 10px;
  font-size: 15px;
  font-style: italic;
  opacity: 0.95;
}

/* Feinschliff: Datum & Ort 40% größer */
.date{
  font-size: calc(22px * 1.4) !important;
}
.place{
  font-size: calc(20px * 1.4) !important;
}

/* Hero photo (harmonisch eingebettet) */
.hero-photo{
  width: min(920px, 100%);
  height: auto;
  display: block;
  margin: 22px auto 26px;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
@media (max-width: 780px){
  .hero-photo{
    border-radius: 16px;
    margin: 18px auto 22px;
  }
}

/* Final tweaks */
.names{
  font-size: clamp(29px, 3.6vw, 48px) !important; /* 15% smaller */
}
.date{
  font-size: calc(22px * 1.4 * 0.9) !important; /* 10% smaller */
}
.lodging-hint{
  font-size: calc(15px * 1.3) !important; /* 30% larger */
}