@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: rgb(201, 160, 95);background-image: url('https://static.anrsvp.com/images/background-images/gradient/background-brown.png');color: rgb(34, 34, 34);background-repeat: repeat-x;		font-size: 20px;
		font-family: Cormorant, serif;
		color: #624d04;
	}

    #homeFace:before, #insideFace:before {
      background-color: rgb(254, 252, 246);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://static.anrsvp.com/images/background-images/gradient/background-white.png');color: rgb(80, 16, 0);background-repeat: repeat-x;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 #624d04;
	}

	/* The modern card's typed fields speak the card's own typeface: left on the page default
	   they render in the body font inside a grey box, which reads as a foreign control sitting
	   on a serif card. The 0.9x size above still applies to them. The form-prefixed selectors
	   match the field rules in the card stylesheet, which are one element more specific than a
	   bare field name and would otherwise keep their hard-coded grey border. A chosen answer is
	   the one mark on the card the guest makes with the browser's own control, and left alone it
	   arrives in the operating system's selection blue on a card built entirely from the
	   occasion's colour. */
	.card-modern input.text,
	.card-modern input.party-text,
	.card-modern select,
	.card-modern textarea
	{
		font-family: Cormorant, serif;
	}

	.card-modern input.text,
	.card-modern input.party-text,
	.card-modern select,
	.card-modern textarea,
	.card-modern form input[type=text],
	.card-modern form textarea,
	.card-modern form .input textarea
	{
		border: 1px solid #624d04;
	}

	.card-modern input[type=radio]
	{
		accent-color: #624d04;
	}

	#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: #624d04 !important;
	}

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

	#homeFace h1,
	#insideFace h1
	{
		-webkit-text-fill-color: #624d04 !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: #624d04 !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(98, 77, 4, 0.12);
		border: 1px solid rgba(98, 77, 4, 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);
}

/* The inside face is narrower than the card it sits on, and it is pinned to the card's left
   edge, so its whole column of text lands left of the axis the front face is built on and
   the card reads as having more room on its right than on its left. Nudging it by half the
   difference puts both faces on one axis. */
.card-modern #insideFace
{
  left: 20px;
}

/* A face with no action footer — a guest whose name is not on the list — holds one paragraph
   and its own small button table. Left where the card puts them, at the top, they read as a
   note dropped into an empty room: the rest of the face is blank. With no footer to pin to the
   bottom edge, the face's content takes the middle of the card instead. Faces that do carry the
   action footer keep their content at the top so the footer stays pinned.

   Naming a display value here outranks the landing state on <body> that keeps every face hidden
   while the card drops in, which would put the inside face — still holding its loading
   placeholder — on screen beside the card that is landing. The centring waits for the landing to
   finish; the placeholder keeps its own purpose of filling the face when its content is slow. */
body:not(.start) .card-modern #insideFace:not(:has(table.button-table))
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The centring balances the block's margin box, and the content block carries a trailing
   margin that nothing below it absorbs here — left in, it lifts the visible block off the
   middle of the card by its own height. */
.card-modern #insideFace:not(:has(table.button-table)) #content2
{
  margin-bottom: 0;
}

.card-modern #homeFace:before,
.card-modern #insideFace:before
{
  clip-path: none;
  border-radius: 8px;
  border: 1px solid rgba(98, 77, 4, 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: #624d04;
  opacity: 0.55;
}

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

/* A centred heading that wraps leaves its last line short and off-centre — an event name
   ending in a single word, a question ending in one word of its own. Balance splits the
   lines evenly instead. Browsers without it keep today's wrapping. */
.card-modern #insideFace h3,
.card-modern #homeFace h2
{
  text-wrap: balance;
}

.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. The card stylesheet pads these paragraphs 5px on the
   left only, which shifts anything set inside them — an open-answer field spans the
   paragraph — 5px right of the centre the text itself sits on. */
.card-modern #insideFace #content2 p
{
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 5px;
}

/* The guest table splits the card into three fixed columns — the name, the answer group
   and the party control — so each keeps its own room whichever of them happens to be
   long. The name is centred in its column instead of stranded at the far left. Selection
   questions (menu-choices) keep their natural layout — their answer is a select that
   needs the remaining width, not a choice group. */
.card-modern #insideFace table.invited-guests:not(.menu-choices)
{
  table-layout: fixed;
}

/* A selection question's heading spans both of its columns, so it sits centred over them the
   way every other heading on this card does. The column widths are declared on the table's
   <colgroup> because a fixed layout reads widths from the table's first row, and this table's
   first row is that heading. The name column is the width the guest row gives the same name —
   whichever shape that row has — so a long name breaks in the same place in both tables, is
   centred in the same column, and the two names land on one vertical line down the face. */
.card-modern #insideFace table.menu-choices
{
  table-layout: fixed;
}

.card-modern #insideFace table.menu-choices th
{
  text-align: center;
}

@media only screen and (min-width: 771px)
{
  .card-modern #insideFace table.menu-choices td:first-child
  {
    text-align: center;
    padding-left: 0;
  }

  .card-modern #insideFace table.menu-choices col:first-child
  {
    width: 33%;
  }

  .card-modern #insideFace table.menu-choices:not(.menu-choices-party) col:first-child
  {
    width: 42%;
  }
}

/* A guest who is not choosing a party size gets a two-column row — the name and the
   answer group — and the answer group takes the room the party control would have used. */
.card-modern #insideFace table.invited-guests:not(.menu-choices) th:first-child:nth-last-child(2),
.card-modern #insideFace table.invited-guests:not(.menu-choices) td:first-child:nth-last-child(2)
{
  width: 42%;
  text-align: center;
  padding-left: 0;
}

.card-modern #insideFace table.invited-guests:not(.menu-choices) th:nth-child(2):nth-last-child(1),
.card-modern #insideFace table.invited-guests:not(.menu-choices) td:nth-child(2):nth-last-child(1)
{
  width: 58%;
  text-align: center;
  padding-right: 0;
}

.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: 33%;
  text-align: center;
  padding-left: 0;
}

.card-modern #insideFace table.invited-guests:not(.menu-choices) th:nth-child(2),
.card-modern #insideFace table.invited-guests:not(.menu-choices) td:nth-child(2)
{
  width: 50%;
  text-align: center;
  padding-right: 0;
}

.card-modern #insideFace table.invited-guests:not(.menu-choices) th:last-child,
.card-modern #insideFace table.invited-guests:not(.menu-choices) td:last-child
{
  width: 17%;
  text-align: center;
  padding-right: 0;
}

/* Each answer label holds its own option on one line, so the group can break between
   options. Held to nowrap as a whole it cannot: a three-option answer then runs out of
   its column and paints itself over the party control sitting in the next one. The
   column headings keep nowrap — they are short and must not break. */
.card-modern #insideFace table.invited-guests:not(.menu-choices) th:not(:first-child)
{
  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. Only while
   the row is a row — stacked, the answer sits under its question instead of beside a name. */
@media only screen and (min-width: 771px)
{
  .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;
}

/* With a picture the front face keeps the card's two-column layout: the picture holds the
   left column and the name entry holds the right one. The column is a fixed-height table
   cell when it holds a floated thumbnail, so the picture sits in the middle of its column,
   and the text column centres what it holds rather than packing it to one edge. */
.card-modern #homeFace:has(.imageCol > *) .imageCol
{
  text-align: center;
}

/* The picture keeps its own proportions and a bounded box. The card stylesheet halves the
   image's width attribute when it is revealed, and a cap alone lets that halving land before
   or after the cap depending on which paints first — the same picture renders two sizes on two
   loads. A height set here wins over the attribute whichever order the paint takes, and the
   height cap is what keeps a portrait picture from becoming taller than the card once the
   columns stack and the column is the whole card. */
.card-modern #homeFace:has(.imageCol > *) .imageCol img
{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 260px;
}

.card-modern #homeFace:has(.imageCol > *) #content
{
  text-align: center;
}

/* The picture is the one object on the card that arrives from the host, so it keeps the
   card's own object language: a hairline the colour of the card's ink around its edge and a
   shadow cast in that ink, rather than a neutral black drop. */
.card-modern .imageCol img
{
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(98, 77, 4, 0.25), 0 2px 16px rgba(98, 77, 4, 0.18);
}

.card-modern #homeFace form input[type=text],
.card-modern #insideFace input.party-text,
.card-modern #insideFace select
{
  background-color: rgba(98, 77, 4, 0.04);
  border: none;
  border-bottom: 1px solid rgba(98, 77, 4, 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: #624d04;
  -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;
}

/* Every hairline field on this card stands under a centred heading, so what the guest types
   sits on that heading's centre instead of at the far end of the line it is drawn on.
   Selection answers keep their own alignment: they answer a question rather than fill a
   labelled field, and their column is aligned by the question above them. */
.card-modern #homeFace form input[type=text],
.card-modern #insideFace table.invited-guests:not(.menu-choices) select,
.card-modern #insideFace input.party-text
{
  text-align: center;
}

/* The open-answer box is a field like every other one on this card: it takes the card's
   hairline and typeface instead of the browser's grey box, which reads as a foreign
   rectangle sitting on the card. Its width stays the one the card already gives it. Unlike
   the card's other fields it is a multi-line area, and a bottom rule alone leaves its whole
   height looking like empty card — the guest cannot see where to write. The area gets a
   hairline on all four sides and the faintest wash, so it reads as a space to write in while
   single-line fields keep their single rule. */
.card-modern #insideFace textarea
{
  background-color: rgba(98, 77, 4, 0.04);
  border: 1px solid rgba(98, 77, 4, 0.25);
  border-radius: 2px;
  padding: 12px 5px;
  min-height: 44px;
  box-sizing: border-box;
  font-family: Cormorant, serif;
  font-size: 18px;
  color: #624d04;

  /* The card stylesheet gives a textarea 95% of its column, which leaves this field's
     hairline inset from the column every other row on the face is measured against. Free
     resize would also let a guest drag the field past the card edge. */
  width: 100%;
  resize: vertical;
}

/* The party control is a field like the others on the card: a native select keeps its
   own grey box and rounded frame, which reads as a control borrowed from a form rather
   than part of the card. */
.card-modern #insideFace select.party-number
{
  background-color: rgba(98, 77, 4, 0.04);
  border: none;
  border-bottom: 1px solid rgba(98, 77, 4, 0.4);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 5px;
  box-sizing: border-box;
  font-family: Cormorant, serif;
  font-size: 18px;
  color: #624d04;
}

.card-modern #homeFace form input[type=text]:hover,
.card-modern #insideFace input.party-text:hover,
.card-modern #insideFace select:hover
{
  border-bottom: 1px solid #624d04;
  background-color: rgba(98, 77, 4, 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 #624d04;
  background-color: rgba(98, 77, 4, 0.12);
  outline: 2px solid rgba(98, 77, 4, 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: #624d04;
  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(98, 77, 4, 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(98, 77, 4, 0.45);
}

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

.card-modern #homeFace form button.btn:focus
{
  outline: 2px solid #624d04;
  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(98, 77, 4, 0.4);
  border-radius: 3px;
  color: #624d04;
  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: #624d04;
  background-color: rgba(98, 77, 4, 0.08);
}

.card-modern #insideFace input[type=submit].button
{
  background-color: #624d04;
  color: #fff;
  border: none;
  box-shadow: 0 3px 8px rgba(98, 77, 4, 0.18);
}

.card-modern #insideFace input[type=submit].button:hover
{
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(98, 77, 4, 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(98, 77, 4, 0.6);
  outline-offset: 3px;
}

/* The card's two footer controls read as a pair with a gap between them. Joined, an outlined
   control touching a filled one reads as one control with two halves, and the gap the stacked
   layout already gives them disappears at desktop. */
/* The footer row is pinned to the face at a fixed width, so its controls land wherever the
   table's own cells happen to fall rather than on the axis everything above them shares. At
   desktop it is let go of the table: the row shrinks to what it holds, centres itself between
   the face's padding, and the gap between the two controls is the same reading the stacked
   layout already gives them. Stacked, the card stylesheet sizes the row and each button fills
   its half, and that layout is left alone. */
@media only screen and (min-width: 771px)
{
  .card-modern #insideFace table.button-table
  {
    display: block;
    width: auto;
    left: 20px;
    right: 20px;
    text-align: center;
  }

  /* A table turned into a block keeps its row group, and the browser rebuilds table boxes
     around anything inline inside it, so the whole chain has to be released for the controls
     to sit in one centred line. */
  .card-modern #insideFace table.button-table tbody,
  .card-modern #insideFace table.button-table tr
  {
    display: block;
  }

  .card-modern #insideFace table.button-table td
  {
    display: inline;
    padding: 0;
  }

  .card-modern #insideFace table.button-table .button
  {
    margin-left: 6px;
    margin-right: 6px;
  }
}

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


/* ===== Radio buttons (RSVP answers) ===== */
.card-modern #insideFace input[type=radio]
{
  accent-color: #624d04;
  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(98, 77, 4, 0.08);
}

.card-modern #insideFace input[type=radio]:focus-visible
{
  outline: 2px solid rgba(98, 77, 4, 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 only screen and (max-width: 770px)
{
  /* Type sizes and the front face's narrow column are for a phone. The row layout below
     them is not: it is needed as soon as the card is narrower than the desktop row it
     replaces, which is the same width the card stylesheet already switches its own
     layout at. */
  @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;
    }
  }

  /* The guest row is three columns on the desktop card. Below the width the card itself
     switches at, the answer group and the party control together are wider than the card,
     so the row runs past the card's own edge and the page scrolls sideways. Stack it
     instead: the table itself becomes a block — cells left inside a table would be wrapped
     in anonymous table cells and shrink-wrapped to a fraction of the card — and each cell
     takes the full width. The column headings cannot travel with the cells they name, so
     each answer and party cell carries its own heading through the label attribute and
     repeats it above its control. Every cell is named by its position pair — including the
     single-cell companion row — because a bare `td` is out-specified by the desktop
     column-width rules and would leave that row a table cell among blocks. */
  .card-modern #insideFace table.invited-guests:not(.menu-choices)
  {
    display: block;
    table-layout: auto;
  }

  .card-modern #insideFace table.invited-guests:not(.menu-choices) tbody,
  .card-modern #insideFace table.invited-guests:not(.menu-choices) tr
  {
    display: block;
    width: 100%;
  }

  .card-modern #insideFace table.invited-guests:not(.menu-choices) td:first-child:nth-last-child(2),
  .card-modern #insideFace table.invited-guests:not(.menu-choices) td:nth-child(2):nth-last-child(1),
  .card-modern #insideFace table.invited-guests:not(.menu-choices) td:first-child:nth-last-child(3),
  .card-modern #insideFace table.invited-guests:not(.menu-choices) td:nth-child(2):nth-last-child(2),
  .card-modern #insideFace table.invited-guests:not(.menu-choices) td:nth-child(3):nth-last-child(1),
  .card-modern #insideFace table.invited-guests:not(.menu-choices) td:first-child:nth-last-child(1)
  {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }

  .card-modern #insideFace table.invited-guests:not(.menu-choices) th
  {
    display: none;
  }

  /* Stacked, the blocks butt against one another: a field's hairline sits directly above
     the next column heading, so the column has no rhythm of its own. Every block after the
     first takes the same gap — the companion rows are their own rows, so both the
     cell-after-cell and the row-after-row cases are named. */
  .card-modern #insideFace table.invited-guests:not(.menu-choices) td + td,
  .card-modern #insideFace table.invited-guests:not(.menu-choices) tr + tr > td
  {
    margin-top: 14px;
  }

  .card-modern #insideFace table.invited-guests:not(.menu-choices) td[data-label]:not([data-label=""])::before
  {
    content: attr(data-label);
    display: block;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 9px;
  }

  /* A selection question stacks with the card's own layout rather than this block's, and
     there its answer no longer shares a row with the name it belongs to: the desktop rule
     that pushes it to the right edge leaves it inset under a heading that is centred. Stacked,
     the question, the name and the answer all sit on the card's centre like every other block. */
  .card-modern #insideFace table.invited-guests.menu-choices th,
  .card-modern #insideFace table.invited-guests.menu-choices td,
  .card-modern #insideFace table.invited-guests.menu-choices td:not(:first-child)
  {
    text-align: center;
  }

  .card-modern #insideFace table.invited-guests.menu-choices select
  {
    text-align: center;
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }

  /* A selection question's row is name and select side by side at desktop. Stacked, the same
     row puts the name across the card and the select under it, as every other row does. The
     card's own script shows and hides this table and its rows with an inline display, so the
     release has to outrank it. */
  .card-modern #insideFace table.menu-choices,
  .card-modern #insideFace table.menu-choices tbody,
  .card-modern #insideFace table.menu-choices tr,
  .card-modern #insideFace table.menu-choices th,
  .card-modern #insideFace table.menu-choices td
  {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .card-modern #insideFace table.menu-choices td + td
  {
    margin-top: 14px;
  }

  .card-modern #insideFace table.menu-choices select
  {
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }

  /* The GO BACK / SUBMIT RSVP row is absolutely positioned and already sized by the card
     stylesheet (90% of the card at phone width, each button filling its half). Only its
     horizontal padding is restated here so the modern card's buttons keep their own
     letter-spaced shape instead of collapsing to the flat zero-padding default. */
  .card-modern #insideFace table.button-table .button
  {
    width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@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;
  }
}