@import url("https://fonts.googleapis.com/css?family=Cormorant%2C+serif&subset=all");  /* Colour-independent rules for this selector live in static/rsvp/styles/common.css */

	body, .page
	{
	background-color: #ffffff;background-image: url('https://s3-us-west-2.amazonaws.com/anrsvp/file59838891-6abe6000d1d56');background-position: 50% 0;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;color: #222;		font-size: 20px;
		font-family: Cormorant, serif;
		color: #650a0c;
	}

    #homeFace:before, #insideFace:before {
      background-color: #ffffff;background-image: linear-gradient(135deg, rgba(255,255,255,0.4) 0%,rgba(240,240,240,0.4) 21%,rgba(234,234,234,0.4) 49%,rgba(240,240,240,0.4) 80%,rgba(255,255,255,0.4) 100%), url('https://s3-us-west-2.amazonaws.com/anrsvp/file59838891-6abf9f69d5637');background-position: 50% 0;background-size: cover;background-repeat: no-repeat;color: #222;content: '';top: 0;left: 0;position: absolute;width: 100%;height: 100%;z-index: -1;filter: blur(3px);clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);    }

	
    @supports (-ms-ime-align:auto) {
	    #homeFace.noblur:before, #insideFace.noblur:before {
	      filter: none;
	    }
    }

	input.submit, .button, h2, button, form button.btn, input[type=radio]
	{
		font-size: 20px;
		font-family: Cormorant, serif;
	}

	input.text, select, input.party-text, textarea
	{
		font-size: 18px;
	}

	form input[type=text], form .input textarea, textarea
	{
		padding: 8.75px;
	}

	input.text, input.party-text, select
	{
		border: 1px solid #650a0c;
	}

	#homeFace h1,
	#homeFace h2,
	#homeFace h3,
	#homeFace h4,
	#homeFace h5,
	#insideFace h1,
	#insideFace h2,
	#insideFace h3,
	#insideFace h4,
	#insideFace h5,
	#thankWrapper h1,
	#thankWrapper h2,
	#thankWrapper h3,
	#thankWrapper h4,
	#thankWrapper h5,
	#homeFace p,
	#insideFace p,
	#thankWrapper p,
	#homeFace label,
	#insideFace label,
	#homeFace .input span,
	#insideFace .input span,
	#homeFace a,
	#insideFace a,
	#thankWrapper a,
	#thankWrapper .headerLight
	{
		color: #650a0c !important;
	}

	#homeFace a,
	#insideFace a,
	#thankWrapper a
	{
		border-bottom-color: #650a0c !important;
	}

	#homeFace h1,
	#insideFace h1
	{
		-webkit-text-fill-color: #650a0c !important;
	}

	/* Scoped to the classic card: the !important below would otherwise beat the
	   modern card's hairline `border-bottom: 1px solid rgba(fontColor, 0.4)` and
	   render a solid underline (see docs/modern-card.md). */
	.container:not(.card-modern) #homeFace input.text,
	.container:not(.card-modern) #homeFace input.party-text,
	.container:not(.card-modern) #homeFace select,
	.container:not(.card-modern) #homeFace form input[type=text],
	.container:not(.card-modern) #insideFace input.text,
	.container:not(.card-modern) #insideFace input.party-text,
	.container:not(.card-modern) #insideFace select,
	.container:not(.card-modern) #insideFace form input[type=text]
	{
		border-color: #650a0c !important;
	}

	/* Already-responded notice (issue #36): a translucent fill and hairline
	   derived from this occasion's own font colour — the same tokens as the
	   input focus background (0.12) and the input border (0.4) — so the notice
	   matches every theme instead of carrying one fixed colour into all of
	   them. Structure (width, padding, radius, centering) lives in common.css. */
	.already-responded-notice
	{
		background-color: rgba(101, 10, 12, 0.12);
		border: 1px solid rgba(101, 10, 12, 0.4);
	}

	h3
	{
		font-size: 27px;
		margin-top: 0.25em;
	}

	/* Colour-independent rules for this selector live in static/rsvp/styles/common.css */

	
/* ==========================================================================
   Modern card design
   ========================================================================== */
.card-modern #homeFace,
.card-modern #insideFace
{
  box-shadow: 0 2px 5px rgba(72, 48, 8, 0.10), 0 14px 32px rgba(72, 48, 8, 0.16);
}

.card-modern #homeFace:before,
.card-modern #insideFace:before
{
  clip-path: none;
  border-radius: 8px;
  border: 1px solid rgba(101, 10, 12, 0.25);
}

.card-modern #homeFace #rsvp
{
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1.0;
  text-shadow: none;
  border-bottom: none;
  position: relative;
  left: 0;
  margin-bottom: 30px;
}

.card-modern #homeFace #rsvp:after
{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: #650a0c;
  opacity: 0.55;
}

.card-modern #homeFace #eventName
{
  font-family: inherit;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: none;
  border-bottom: none;
  margin-bottom: 30px;
}

.card-modern #homeFace h2,
.card-modern #insideFace h2
{
  font-size: 17px;
  letter-spacing: 3px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  /* vFlip-card.css sets h2 width:80% on narrow screens; without width:auto the heading
     keeps that width and, with the margins below reset, sits left of centre. */
  width: auto;
  border-bottom: none;
  padding: 0;
  margin: 0 auto 22px auto;
}

.card-modern #homeFace h2:before,
.card-modern #homeFace h2:after,
.card-modern #insideFace h2:before,
.card-modern #insideFace h2:after
{
  content: none;
}

.card-modern #homeFace p.line
{
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* The inside face centres its text on the same centre as its buttons: the greeting and
   the guest-not-found paragraph. 560px keeps the paragraph's line measure readable
   inside the 675px content area. */
.card-modern #insideFace #content2 p
{
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* The question row spans the full content width. The name column absorbs the slack so
   every answer column shrinks to its content and sits at the right edge; the name is
   centred in its column instead of stranded at the far left, and each question heading
   centres over its own choices. Selection questions (menu-choices) keep their natural
   layout — their answer is a select that needs the remaining width, not a choice group
   that shrinks to content. */
.card-modern #insideFace table.invited-guests:not(.menu-choices) th:first-child,
.card-modern #insideFace table.invited-guests:not(.menu-choices) td:first-child
{
  width: 100%;
  text-align: center;
  padding-left: 0;
}

.card-modern #insideFace table.invited-guests:not(.menu-choices) th:not(:first-child),
.card-modern #insideFace table.invited-guests:not(.menu-choices) td:not(:first-child)
{
  text-align: center;
  padding-right: 0;
  white-space: nowrap;
}

/* A selection answer is a select, not a choice group: it keeps the column's natural
   width but anchors its right edge on the same line every other answer ends on. */
.card-modern #insideFace table.invited-guests.menu-choices td:not(:first-child)
{
  text-align: right;
  padding-right: 0;
}

/* The radio labels carry a 10px right margin as inter-option spacing; on the last label
   that margin extends the line box past its ink, so right-aligning the line leaves the
   choices 10px short of the column edge the question heading sits on. */
.card-modern #insideFace table.invited-guests td label:last-of-type
{
  margin-right: 0;
}

.card-modern #homeFace label
{
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 9px;
}

/* The classic guest layout left-packs two floated columns inside the card: a 110px
   .imageCol (+40px margin-right) then a 380px #content. With no occasion picture the
   image column is an empty float, so the text column ends up ~5px right of the card's
   centre (670px of content area, 530px of floated columns, 140px of trailing slack).
   Take that empty float out of the flow and let the content column centre itself.

   Two deliberate details: ':not(:has(> *))' instead of ':empty', because the template
   leaves whitespace inside the column and :empty would not match a div holding only a
   newline; and the centring is scoped to the .face, not the card, because each face has
   its own image column and an occasion with a picture on one face must keep the
   two-column float layout on that face. A browser without :has() keeps the old layout. */
.card-modern .imageCol:not(:has(> *))
{
  display: none;
}

.card-modern .face:not(:has(.imageCol > *)) #content
{
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.card-modern .imageCol img
{
  border: none;
  border-radius: 2px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

.card-modern #homeFace form input[type=text],
.card-modern #insideFace input.party-text,
.card-modern #insideFace select
{
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(101, 10, 12, 0.4);
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  padding: 12px 5px;
  min-height: 44px;
  box-sizing: border-box;
  font-family: Cormorant, serif;
  font-size: 18px;
  color: #650a0c;
  -webkit-transition: border-color 0.25s ease, background-color 0.2s ease;
  -moz-transition: border-color 0.25s ease, background-color 0.2s ease;
  -o-transition: border-color 0.25s ease, background-color 0.2s ease;
  transition: border-color 0.25s ease, background-color 0.2s ease;
}

.card-modern #insideFace input.party-text,
.card-modern #insideFace select
{
  max-width: 450px;
}

.card-modern #homeFace form input[type=text]:hover,
.card-modern #insideFace input.party-text:hover,
.card-modern #insideFace select:hover
{
  border-bottom: 1px solid #650a0c;
  background-color: rgba(101, 10, 12, 0.08);
}

.card-modern #homeFace form input[type=text]:focus,
.card-modern #insideFace input.party-text:focus,
.card-modern #insideFace select:focus
{
  border-bottom: 2px solid #650a0c;
  background-color: rgba(101, 10, 12, 0.12);
  outline: 2px solid rgba(101, 10, 12, 0.6);
  outline-offset: 3px;
}

.card-modern #homeFace form
{
  width: min(100%, 360px);
  margin-left: auto;
  margin-right: auto;
}

.card-modern #homeFace form button.btn
{
  float: none;
  clear: both;
  display: block;
  width: 100%;
  margin: 24px auto 0 auto;
  padding: 14px 40px;
  min-height: 48px;
  box-sizing: border-box;
  background-color: #650a0c;
  background-image: none;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 3px 8px rgba(101, 10, 12, 0.18);
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease, box-shadow 0.2s ease;
  -moz-transition: opacity 0.2s ease, box-shadow 0.2s ease;
  -o-transition: opacity 0.2s ease, box-shadow 0.2s ease;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.card-modern #homeFace form button.btn:hover
{
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(101, 10, 12, 0.45);
}

.card-modern #homeFace form button.btn:active
{
  transform: translateY(1px);
}

.card-modern #homeFace form button.btn:focus
{
  outline: 2px solid #650a0c;
  outline-offset: 3px;
}

.card-modern #insideFace select
{
  cursor: pointer;
}

.card-modern #insideFace input.button
{
  float: none;
  display: inline-block;
  margin: 0 auto;
  padding: 14px 40px;
  min-height: 48px;
  box-sizing: border-box;
  background-color: transparent;
  background-image: none;
  border: 1px solid rgba(101, 10, 12, 0.4);
  border-radius: 3px;
  color: #650a0c;
  font-family: Cormorant, serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  -moz-transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  -o-transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.card-modern #insideFace input.button:hover
{
  border-color: #650a0c;
  background-color: rgba(101, 10, 12, 0.08);
}

.card-modern #insideFace input[type=submit].button
{
  background-color: #650a0c;
  color: #fff;
  border: none;
  box-shadow: 0 3px 8px rgba(101, 10, 12, 0.18);
}

.card-modern #insideFace input[type=submit].button:hover
{
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(101, 10, 12, 0.45);
}

.card-modern #insideFace input[type=submit].button:active
{
  transform: translateY(1px);
}

/* Secondary & submit buttons: on-palette focus ring (keyboard-only, see below) */
.card-modern #insideFace input.button:focus,
.card-modern #insideFace input[type=submit].button:focus
{
  outline: 2px solid rgba(101, 10, 12, 0.6);
  outline-offset: 3px;
}

.card-modern .button-table2 tr + tr td
{
  padding-top: 12px;
}


/* ===== Radio buttons (RSVP answers) ===== */
.card-modern #insideFace input[type=radio]
{
  accent-color: #650a0c;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  position: relative;
  top: -2px;
  cursor: pointer;
  flex-shrink: 0;
}

.card-modern #insideFace label
{
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 14px;
  margin: 6px 10px 6px 0;
  transition: background-color 0.2s ease;
}

.card-modern #insideFace label:hover
{
  background-color: rgba(101, 10, 12, 0.08);
}

.card-modern #insideFace input[type=radio]:focus-visible
{
  outline: 2px solid rgba(101, 10, 12, 0.6);
  outline-offset: 3px;
}

/* Keyboard-only focus ring: suppress the outline for mouse/touch activation in
   browsers that support :focus-visible. Older browsers ignore :focus-visible,
   so this rule is discarded and the ring stays visible on every focus. */
.card-modern #homeFace form input[type=text]:focus:not(:focus-visible),
.card-modern #homeFace form button.btn:focus:not(:focus-visible),
.card-modern #insideFace input.party-text:focus:not(:focus-visible),
.card-modern #insideFace select:focus:not(:focus-visible),
.card-modern #insideFace input.button:focus:not(:focus-visible),
.card-modern #insideFace input[type=submit].button:focus:not(:focus-visible),
.card-modern #insideFace input[type=radio]:focus:not(:focus-visible)
{
  outline: none;
}

@media only screen and (min-width: 771px) and (min-height: 581px)
{
  /* The desktop card puts the guest names in a 380px column beside the card picture.
     Both boxes take the column width and centre their text on it, so the label, the names
     and the Next button share the column's centre — the same centred language the rest of
     the card speaks. */
  .card-modern #homeFace p.line,
  .card-modern #homeFace #submit
  {
    width: auto;
    text-align: center;
  }

  /* A card with no uploaded image has nothing beside the 380px column, so the text in the
     column centres on the card instead of holding a left edge. Both boxes take the column
     width first: a narrower box centres its text inside itself, not on the card. */
  .card-modern #homeFace.no-card-image #content p,
  .card-modern #homeFace.no-card-image #submit
  {
    width: auto;
    text-align: center;
  }

  /* The guest list is the block that grows on the group card, so let it hold the card's lower
     half: with room to spare the Next button lands on the line the inside face's GO BACK /
     SUBMIT RSVP row sits on, and a list long enough to fill the card pushes it down instead of
     being covered by the button. 5.25em is the reservation measured to land the button on that
     line with the event name heading sitting above the column; a longer list overrides it.
     Only the desktop card has a fixed height for the reservation to fill — the narrow card is
     sized by its content, so reserving there would make the card taller without moving the
     button. */
  .card-modern #homeFace #submit
  {
    min-height: 5.25em;
  }
}

@media (max-width: 600px)
{
  .card-modern #homeFace #rsvp
  {
    font-size: 34px;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }

  .card-modern #homeFace #rsvp:after
  {
    width: 40px;
    bottom: -12px;
  }

  .card-modern #homeFace h2,
  .card-modern #insideFace h2
  {
    font-size: 16px;
    letter-spacing: 1px;
    margin: 0 auto 18px auto;
  }

  .card-modern #homeFace form button.btn
  {
    min-height: 48px;
    max-width: none;
  }

  .card-modern #content
  {
    width: min(100%, 300px);
    margin-left: auto;
    margin-right: auto;
  }

  .card-modern #homeFace form
  {
    width: 100%;
  }

  .card-modern #homeFace form .input
  {
    width: 100%;
    max-width: none;
  }
}

@media only screen and (max-width: 770px), only screen and (max-height: 580px)
{
  body:has(> .container.card-modern)
  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }

  .container.card-modern
  {
    margin: 0 auto;
    top: 0;
  }
}