/* Reilly + Juliette.
   A deliberately plain stylesheet: no gradients, no shadows, no cards, and
   one animation. Ordinary HTML elements doing their ordinary jobs, with the
   measure, spacing and colour looked after. */

/* Fonts are self-hosted so the site stays one binary with no external
   requests. Regenerate with tools/fonts.py if the families ever change. */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/dm-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/dm-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/dm-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/dm-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/source-serif-4-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/source-serif-4-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --paper:  #fdfcf7;
  --ink:    #1b1a17;
  --soft:   #565248;
  --link:   #1b44c8;
  --seen:   #6b3fa0;
  --red:    #b3271b;
  --green:  #1f6b3a;
  --rule:   #cfc9b8;
  --shade:  #f4f1e6;
  --field:  #ffffff;
  --mark:   #fff2a8;
  --warn:   #fdf3d2;
  --bad:    #fbe4de;
  --good:   #e2efd8;
  --photo:  none;

  --serif:  "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --mono:   "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* Dark mode is the same page with the paper turned down. Warm blacks rather
   than blue-greys, to match the daylight version. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #15140f;
    --ink:    #e9e4d7;
    --soft:   #a5a08f;
    --link:   #93baff;
    --seen:   #cbaaec;
    --red:    #ff9184;
    --green:  #86cd9a;
    --rule:   #3b382e;
    --shade:  #1e1c16;
    --field:  #100f0b;
    --mark:   #4a441e;
    --warn:   #3a3115;
    --bad:    #45211c;
    --good:   #1f3520;
    --photo:  brightness(.86) saturate(.94);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  max-width: 62rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  font-variation-settings: "opsz" 17;
}
body.narrow { max-width: 44rem; }
body.wide { max-width: 78rem; }

p { margin: 0 0 .75rem; }
a { color: var(--link); text-underline-offset: .16em; }
a:visited { color: var(--seen); }
a:hover { background: var(--mark); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

h1, h2, h3 { font-weight: 600; line-height: 1.18; }
h1 { margin: 0 0 .2rem; font-size: 2rem; letter-spacing: -.01em; }
h2 { margin: 1.9rem 0 .6rem; font-size: 1.25rem; }
h3 { margin: 1.1rem 0 .2rem; font-size: 1rem; }
hr { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--rule); }
small { font-size: .84rem; color: var(--soft); }
code, kbd { font-family: var(--mono); font-size: .9em; }
img { max-width: 100%; }

/* The small uppercase label, used for table headers and field labels. */
.eyebrow, .eyebrow--dark, .label {
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--soft);
  text-transform: uppercase;
}
.fine-print { color: var(--soft); font-size: .84rem; }

/* Neither of us gets to be permanently first. Both orders occupy the same
   grid cell, so the line never reflows as they cross-fade. */
.swap {
  display: inline-grid;
  grid-template-areas: "names";
  vertical-align: baseline;
}
.swap > span {
  grid-area: names;
  animation: swap-names 8s ease-in-out infinite;
}
.swap > span:last-child { animation-name: swap-names-alt; }
.swap--alternate > span { animation-delay: -4s; }

@keyframes swap-names {
  0%, 46% { opacity: 1; }
  50%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes swap-names-alt {
  0%, 46% { opacity: 0; }
  50%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

/* Deliberately kept running under reduced motion: nothing moves, scales or
   parallaxes — it is only a dissolve between two spellings of the same line. */

/* ---------- masthead ---------------------------------------------------- */
.top {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: .8rem;
}
.top nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.top a { white-space: nowrap; }
.top__home {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
}
.top__home:hover { background: none; color: var(--link); }
.top__home:hover .wordmark { text-decoration: underline; text-underline-offset: .2em; }
.top__home:visited { color: inherit; }

.subtitle { margin: 0 0 1.1rem; font-size: 1.1rem; color: var(--soft); }
.subtitle b { color: var(--ink); font-weight: 600; }

/* ---------- two columns on the home page, so the basics fit one screen -- */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2.25rem;
  align-items: start;
}

/* ---------- the facts, as an actual table ------------------------------ */
table.facts { width: 100%; border-collapse: collapse; }
table.facts th,
table.facts td {
  padding: .34rem .6rem .34rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}
table.facts th {
  width: 8.5rem;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--soft);
  text-transform: uppercase;
}
table.facts tr:last-child th,
table.facts tr:last-child td { border-bottom: 0; }
table.facts td small { display: block; }

/* ---------- boxes ------------------------------------------------------- */
.box {
  padding: .9rem 1rem;
  border: 1px solid var(--ink);
  background: var(--shade);
}
.box--strong { border-width: 2px; }
.box h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.box p:last-child { margin-bottom: 0; }
.box + .box, .box + figure, figure + .box, .box + form, form + .box { margin-top: 1.25rem; }

.note, .form-message, .admin-flash, .email-warning {
  margin: 0 0 1.25rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--green);
  background: var(--shade);
}
.note--error, .form-message--error, .email-warning { border-left-color: var(--red); }
.note p:last-child, .form-message p:last-child { margin-bottom: 0; }

/* ---------- forms ------------------------------------------------------- */
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  padding: .35rem .45rem;
  border: 1px solid var(--soft);
  border-radius: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .95rem;
}
textarea { width: 100%; font-family: var(--serif); font-size: 1rem; resize: vertical; }
select { font-family: var(--serif); }
label { display: inline-block; }

.field, .stack { display: block; margin: 0 0 .9rem; }
.field > span, .stack > span { display: block; margin-bottom: .15rem; }
.field > span, .stack > span:first-child {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--soft);
  text-transform: uppercase;
}
.field input, .field select, .field textarea,
.stack input, .stack select { width: 100%; }
.field small { display: block; margin-top: .25rem; }

button, .button, .danger-button {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .85rem;
  text-decoration: none;
}
button:hover, .button:hover, .danger-button:hover {
  background: var(--link);
  border-color: var(--link);
  color: var(--paper);
}
.button:visited { color: var(--paper); }
button:disabled, .button:disabled { cursor: not-allowed; opacity: .5; }
button:disabled:hover { background: var(--ink); border-color: var(--ink); }

.button--outline, button.outline {
  background: transparent;
  color: var(--ink);
}
.button--outline:visited { color: var(--ink); }
.button--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

button.plain, .table-button, .change-file {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font-family: var(--mono);
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: .16em;
}
button.plain:hover, .table-button:hover, .change-file:hover {
  background: var(--mark);
  border: 0;
  color: var(--link);
}
.danger-button { border-color: var(--red); background: transparent; color: var(--red); }
.danger-button:visited { color: var(--red); }
.danger-button:hover { background: var(--red); border-color: var(--red); color: var(--paper); }

form.code { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .5rem; }
form.code input[type=text] { flex: 1 1 7rem; min-width: 0; text-transform: uppercase; }
form.code--big input[type=text] { font-size: 1.3rem; letter-spacing: .06em; padding: .5rem .6rem; }
form.code--big button { font-size: 1rem; padding: .5rem 1.1rem; }

/* ---------- the guest table on the invitation page --------------------- */
table.guests { width: 100%; border-collapse: collapse; margin-bottom: .3rem; }
table.guests th,
table.guests td {
  padding: .5rem .6rem .5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
table.guests thead th {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--soft);
  text-transform: uppercase;
}
table.guests tbody th { width: 12rem; font-weight: 600; }
table.guests tbody th small { display: block; font-weight: 400; }
table.guests td.answer { width: 9rem; white-space: nowrap; }
table.guests label { margin-right: .7rem; font-size: .95rem; }
table.guests input[type=radio] { margin-right: .2rem; accent-color: var(--link); }
table.guests input[type=text] { width: 100%; }
table.guests tr.optional th { font-weight: 400; color: var(--soft); }

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: .9rem;
  border-top: 2px solid var(--ink);
}
.tally b { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; }
.tally span { font-family: var(--mono); font-size: .85rem; color: var(--soft); }
.tally button { margin-left: auto; }

/* ---------- questions: every answer visible, no accordions ------------- */
dl.qa { margin: 0; }
dl.qa dt { margin-top: .9rem; font-weight: 600; }
dl.qa dt:first-child { margin-top: 0; }
dl.qa dd { margin: .1rem 0 0; color: var(--soft); }

/* ---------- pictures --------------------------------------------------- */
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); filter: var(--photo); }
figure figcaption { margin-top: .3rem; font-size: .8rem; color: var(--soft); }

/* The large dome uses separate artwork for light and dark colour schemes. */
.sketch { display: block; width: 150px; margin: .2rem auto .7rem; }
.sketch svg { display: block; width: 100%; height: auto; }
.dome-face { fill: none; stroke: none; }
.dome-edge { stroke: var(--ink); stroke-width: 3.4; }
.dome-ghost { display: none; }
.sketch--venue { width: 210px; }
.sketch--venue .dome-edge { stroke: var(--soft); stroke-width: 3.8; }
.dome--dark { display: none !important; }
.dome-light {
  transform-box: fill-box;
  transform-origin: center;
  animation: dome-twinkle 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -145ms);
}
.dome--light .dome-light { filter: drop-shadow(0 0 3px currentColor); }
.dome--light .dome-light--0 { fill: #d72e48; color: #d72e48; }
.dome--light .dome-light--1 { fill: #005bd8; color: #005bd8; }
.dome--light .dome-light--2 { fill: #00865f; color: #00865f; }
.dome--light .dome-light--3 { fill: #b86e00; color: #b86e00; }
.dome--light .dome-light--4 { fill: #7b42b3; color: #7b42b3; }
@keyframes dome-twinkle {
  0%, 43%, 100% { opacity: .35; transform: scale(.76); }
  54% { opacity: 1; transform: scale(1.2); }
  66% { opacity: .48; transform: scale(.88); }
}
@media (prefers-color-scheme: dark) {
  .dome--light { display: none !important; }
  .dome--dark { display: block !important; }
  .dome--dark .dome-light { filter: drop-shadow(0 0 14px currentColor); }
  .dome--dark .dome-light--0 { fill: #ff7183; color: #ff5269; }
  .dome--dark .dome-light--1 { fill: #72b1ff; color: #4597ff; }
  .dome--dark .dome-light--2 { fill: #61dba7; color: #35ca8c; }
  .dome--dark .dome-light--3 { fill: #ffd56a; color: #ffb62d; }
  .dome--dark .dome-light--4 { fill: #c996ff; color: #ad69f4; }
}
/* At 26px a 1000-unit viewBox needs a heavy stroke to survive rounding. */
.sketch--mark { display: inline-block; width: 26px; margin: 0; vertical-align: -6px; }
.sketch--mark .dome-edge { stroke-width: 16; }

footer {
  margin-top: 2.5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--soft);
}
footer p { margin: 0 0 .2rem; }

/* ---------- admin ------------------------------------------------------ */
/* The guest dashboard keeps its existing markup and takes the same plain
   treatment: hairline tables, mono labels, no chrome. */
.admin-title {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.admin-title h1 { margin: 0; }
.admin-title p { margin: 0; }
.admin-title--narrow { display: block; }
.admin-title--narrow p:last-child { margin-top: .35rem; color: var(--soft); }
.admin-title__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  margin-bottom: 1.75rem;
  border: 1px solid var(--rule);
}
.stat-grid article {
  padding: .7rem .9rem;
  border-right: 1px solid var(--rule);
}
.stat-grid article:last-child { border-right: 0; }
.stat-grid article > span { font-family: var(--mono); font-size: 1.7rem; font-weight: 500; }
.stat-grid article p {
  margin: .1rem 0 0;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--soft);
  text-transform: uppercase;
}
.stat-grid__attention { background: var(--warn); }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th, .admin-table td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.admin-table th {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--soft);
  text-transform: uppercase;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td:first-child { min-width: 14rem; white-space: normal; }
.admin-table td small { display: block; color: var(--soft); }
.admin-table em { color: var(--soft); font-style: italic; }
.admin-edit-link { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.admin-edit-link span { font-family: var(--mono); font-size: .72rem; color: var(--soft); text-transform: uppercase; }
.table-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.table-actions form { display: inline; margin: 0; }

.status {
  display: inline-block;
  padding: .05rem .4rem;
  background: var(--shade);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .72rem;
  font-style: normal;
  text-transform: lowercase;
}
.status--waiting, .status--not_delivered, .status--not_sent { background: var(--bad); }
.status--partial { background: var(--warn); }
.status--sent, .status--delivered_other { background: var(--good); }

.contact-address { display: block; }

.event-stage, .send-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: .8rem .9rem;
  border: 1px solid var(--ink);
  background: var(--shade);
}
.event-stage h2 { margin: 0; }
.event-stage p, .send-strip p { margin: .15rem 0 0; }
.event-stage form, .send-strip form { margin: 0; }
.send-strip { border-color: var(--link); }

.empty-state { padding: 1.25rem; border: 1px solid var(--rule); background: var(--shade); }
.empty-state h2 { margin-top: 0; }

.upload-panel, .import-workspace, .email-layout, .admin-edit-form { margin: 0; }
.upload-drop {
  display: flex;
  min-height: 11rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border: 1px dashed var(--soft);
  background: var(--shade);
  cursor: pointer;
  text-align: center;
}
.upload-drop strong { font-size: 1.1rem; }
.upload-panel input[type=file], .change-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-panel__icon { font-family: var(--mono); font-size: 1.6rem; }

.import-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: .8rem; }
.import-meta h2 { margin: 0; }
.import-meta p:last-child { margin: 0; color: var(--soft); font-size: .84rem; }
.import-meta--preview { margin-top: 2rem; }

.mapping-grid, .preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
}
.mapping-grid label, .preview-grid article {
  min-width: 0;
  padding: .7rem .8rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.mapping-grid label { display: flex; flex-direction: column; }
.mapping-grid label > span { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mapping-grid label > small { overflow: hidden; margin: .1rem 0 .5rem; font-family: var(--mono); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.mapping-grid select { margin-top: auto; }
.preview-grid h3 { margin: 0 0 .15rem; font-size: 1rem; }
.preview-grid p, .preview-grid small, .preview-grid span { display: block; overflow: hidden; margin: 0; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.preview-grid small { color: var(--soft); }
.preview-grid span { margin-top: .4rem; font-family: var(--mono); font-size: .74rem; }
.preview-grid .preview-change { position: relative; }
.preview-grid .preview-change .status { display: inline-block; float: right; margin: 0 0 .3rem .5rem; }
.preview-grid .preview-change small { clear: both; white-space: normal; }
.import-warnings {
  margin-bottom: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid #b86e00;
  background: var(--warn);
}
.import-warnings ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.import-warnings li { margin: .15rem 0; }
.import-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding: .8rem .9rem;
  border: 1px solid var(--ink);
  background: var(--shade);
}
.import-confirm p { max-width: 46ch; margin: 0; font-size: .9rem; }

.email-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; align-items: start; }
.email-composer { display: block; }
.email-preview { padding: .9rem 1rem; border: 1px solid var(--rule); background: var(--shade); }
.email-preview h2 { margin-top: 0; font-size: 1.1rem; }
.email-preview hr { margin: .8rem 0; }
.save-date-editor {
  margin-bottom: 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ink);
  background: var(--shade);
}
.save-date-editor > header { max-width: 48rem; margin-bottom: 1rem; }
.save-date-editor > header h2 { margin: 0; }
.save-date-editor > header p:last-child { margin: .25rem 0 0; }
.email-layout--save-date { margin-top: 1rem; }
.email-preview__subject {
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--soft);
}
.email-preview__message { white-space: pre-line; }
.email-preview__signoff { margin: 1.25rem 0 0; }
.save-date-sendbar {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.save-date-sendbar p, .save-date-sendbar form { margin: 0; }

.save-date-note {
  margin-top: 1.5rem;
  padding: 1.1rem 1.2rem;
  border: 2px solid var(--ink);
  background: var(--shade);
}
.save-date-note h2 { margin-top: 0; font-size: 1.5rem; }
.save-date-note .button { margin-top: .5rem; }

.admin-form-card { margin-bottom: 1.5rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); }
.admin-form-card h2 { margin-top: 0; }
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.field--wide { grid-column: 1 / -1; }

.admin-guest-list { border: 1px solid var(--rule); }
.admin-guest-row {
  display: grid;
  grid-template-columns: minmax(9rem, .8fr) minmax(14rem, 1.4fr) auto;
  gap: .7rem;
  align-items: start;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--rule);
}
.admin-guest-list .admin-guest-row:last-child { border-bottom: 0; }
.admin-guest-row--new { grid-template-columns: 1fr; }
.admin-guest-row .field { margin-bottom: 0; }
.admin-guest-response { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: .5rem; align-items: start; }
.admin-guest-response small { color: var(--soft); font-size: .78rem; }
.delete-check {
  color: var(--red);
  font-family: var(--mono);
  font-size: .76rem;
  white-space: nowrap;
}
.delete-check input { width: auto; accent-color: var(--red); }

.admin-form-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.danger-zone {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding: .8rem .9rem;
  border: 1px solid var(--red);
  background: var(--bad);
}
.danger-zone h2 { margin: 0; font-size: 1rem; }
.danger-zone p { margin: 0; color: var(--soft); font-size: .84rem; }
.danger-zone--reset { border-color: var(--rule); background: var(--shade); }
.danger-zone--reset .danger-button { border-color: var(--ink); color: var(--ink); }
.danger-zone--reset .danger-button:hover { background: var(--ink); color: var(--paper); }

body.admin-login { max-width: 30rem; }
.admin-login__shell { display: block; }
.admin-login__card { padding: 1.25rem; border: 1px solid var(--ink); background: var(--shade); }
.admin-login__card h1 { margin-bottom: 1rem; }
.admin-login__form { display: block; }

@media (max-width: 760px) {
  .columns, .email-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  table.facts th { width: 6rem; font-size: .72rem; }
  table.guests thead { display: none; }
  table.guests tbody tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
  table.guests tbody th,
  table.guests tbody td { display: block; width: auto; padding: 0 0 .35rem; border-bottom: 0; }
  .tally button { margin-left: 0; }
  .stat-grid article { border-right: 0; border-bottom: 1px solid var(--rule); }
  .admin-guest-row { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
}

/* Printing the details is a reasonable thing to want to do. */
@media print {
  body { max-width: none; font-size: 11pt; color: #000; background: #fff; }
  .top nav, .box--strong, footer, .sketch, button, .button { display: none; }
  .columns { display: block; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}