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

	
	#thankWrapper h1,
	#thankWrapper h2,
	#thankWrapper h3,
	#thankWrapper h4,
	#thankWrapper h5,
	#thankWrapper p,
	#thankWrapper a,
	#thankWrapper .headerLight
	{
		text-shadow: none;
	}

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

/* The dash under the title is one em of the title's own type, so it keeps its proportion at every
   width the card renders at — the offset below the title is already expressed that way. */
.card-modern #homeFace #rsvp:after
{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.33em;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 1em;
  height: 1px;
  background: #624d04;
  opacity: 0.55;
}

/* The couple's name is one object shown on both faces of the card, and both faces speak it the same
   way: italic serif, a step below the title and a step above the labels. On the front face the name
   sits between 'R.S.V.P.' and 'INVITED:' — two tracked-caps lines of near-equal weight divided only
   by the guest list — so sharing their voice would make the name read as a sibling of the label under
   it rather than the person the card is for. */
.card-modern #homeFace #eventName
{
  font-family: inherit;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
  font-style: italic;
  text-transform: none;
  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 mirroring above assumes the 5px the card stylesheet puts on these paragraphs. The
   already-responded notice carries its own 18px on both sides, so mirroring 5px onto it leaves the
   block 13px wider on the left and drops its text 7px right of the centre every other block on this
   face is built on. It gets its own right side back. */
.card-modern #insideFace #content2 p.already-responded-notice
{
  padding-right: 18px;
}

/* 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 selection question and its rows leave the card when nobody is coming to that event. The card's
   script writes that as an inline display, and the stacked layout further down releases these
   elements to display:block so it can restack a row it is showing — a release that outranks an
   inline hide. The same hide carried as a class outranks the release, so a guest who is not coming
   has no meal choice on the card at any width. */
.card-modern #insideFace table.menu-choices.menu-choice-hidden,
.card-modern #insideFace table.menu-choices .menu-choice-hidden
{
  display: none !important;
}

/* 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;
}

/* A native select paints its own grey chevron, the one mark on this card drawn in the browser's
   colour rather than the couple's. The control stays a select — the picker, the keyboard behaviour
   and the mobile wheel are what a guest expects — only its chrome is drawn by the card. The room on
   the right keeps the option text out from under the mark. */
.card-modern #insideFace select
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2212%22%20height=%228%22%3E%3Cpath%20d=%22M1%201l5%205%205-5%22%20fill=%22none%22%20stroke=%22%23624d04%22%20stroke-width=%221.5%22/%3E%3C/svg%3E);
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

/* A centred field keeps its value on the heading's centre even with the mark taking room on the
   right, so the left side gives up the same width. */
.card-modern #insideFace table.invited-guests:not(.menu-choices) select
{
  padding-left: 28px;
}

/* 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;
}

/* An open question opens with a separator, and the browser draws that as a grey inset rule
   that matches no other line on the card. It takes the card's own hairline instead. On a
   continued page the heading above already drew a hairline, so the separator is a second
   rule 31px below the first and is dropped. The scope is the answers block: a host who types
   a rule into the guest-not-found message is writing copy, not asking a question. */
.card-modern #insideFace .page-answers hr
{
  border: 0;
  border-top: 1px solid rgba(98, 77, 4, 0.25);
  height: 0;
}

.card-modern #insideFace .page-answers h3 + div > hr:first-child
{
  display: none;
}

/* The page heading's rule comes from the card stylesheet's generic heading, which folds a 4px
   flag at each end of the line. Every other line on this face is a plain hairline, so the flags
   read as two stray grey triangles — one sitting above the rule's left end, one hanging 9px
   below its right end — and the rule itself is the only line on the card drawn in neutral black
   instead of the occasion's own hairline. */
.card-modern .page-answers h3
{
  border-bottom: 1px solid rgba(98, 77, 4, 0.25);
}

.card-modern .page-answers h3::before,
.card-modern .page-answers h3::after
{
  display: none;
}

/* 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 28px;
  box-sizing: border-box;
  font-family: Cormorant, serif;
  font-size: 18px;
  color: #624d04;
}

/* A companion row is a row of the guest table, so it reads as the row above it: the label
   takes the name column — centred on the same centre the guest names sit on — and the field
   takes the answer columns, ending on the same right edge every select on the face ends on.
   The line is a row, not a paragraph: it steps out of the 560px measure the face gives its
   prose (and the auto margins that centre a paragraph inside it), so the row spans the table
   the way the guest row above it does. The label column matches the name column's 33%; the
   field is already capped at 450px, which is the room the answer columns leave. */
.card-modern #insideFace #content2 td.party p.line
{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
}

.card-modern #insideFace table.invited-guests td.party p.line
{
  display: flex;
  align-items: center;
}

.card-modern #insideFace table.invited-guests td.party p.line .party-label
{
  flex: 0 0 33%;
  text-align: center;
}

/* In a question table the guest's name is an index, not the subject — printed at the same size and
   the same ink as the question heading above it, it competes with the question for the eye, and on
   a group of one the same name repeats down the column. It steps back to the card's secondary size
   and ink — and the ink stops at 0.85 of the card's own, because a lighter mix of this colour over
   this card's background falls under 4.5:1. A companion row's first cell holds the choice control
   rather than a name, so it is left alone. */
.card-modern #insideFace .menu-choices td[class*='menuChoiceName']:not(:has(select))
{
  font-size: 17px;
  color: rgba(98, 77, 4, 0.85);
}

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

/* The answers block is centred in the space the face gives it, so a face with few answers
   splits its slack above and below the questions instead of pooling it all above the footer.
   Free space is what auto-centring distributes, so a face whose answers fill it lays out the
   same way it did. The stacked layout — narrow width or a short window — has no slack to
   distribute, so it keeps its block flow. The card stylesheet hides both faces while the card
   is landing (`.start .face`), and an id-bearing selector here would out-weigh that rule and
   show the inside face mid-landing, so the centring waits until the card has landed. */
@media only screen and (min-width: 771px) and (min-height: 581px)
{
  body:not(.start) .card-modern #insideFace
  {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.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.

   The row is pinned to its face's bottom edge, and a face whose content is short keeps the card
   stylesheet's fixed height — 40px short of the card box. The front face's button sits 63px above
   the card box, so 23px above the face bottom puts the two buttons on one line across the flip;
   a face that grows with a long guest list carries its row with it, as it always has. */
@media only screen and (min-width: 771px)
{
  .card-modern #insideFace table.button-table
  {
    display: block;
    width: auto;
    left: 20px;
    right: 20px;
    bottom: 23px;
    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 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;
  }

  /* Stacked, a companion row drops its side-by-side split — a 33% label column is too
     narrow for the label's own words at phone width — and the label takes the card's centre
     above the field, like every other stacked block. */
  .card-modern #insideFace table.invited-guests td.party p.line
  {
    display: block;
  }

  .card-modern #insideFace table.invited-guests td.party p.line .party-label
  {
    display: block;
    text-align: center;
  }

  .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; the hidden state is carried as a class above this block, which
     outranks the release. */
  .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;
  }
}