/* Christmas lunch.
 *
 * The page is the invite, carried on: its watercolour paper is the background,
 * its top and bottom borders frame the list, and its colours are sampled from
 * the painting. Gum leaf for anything you can press, wattle for focus and for
 * what is yours, gum blossom for warnings and allergens. The script face is
 * the invite's own heading and is kept to the invite's own words; everything
 * else is Atkinson Hyperlegible, made for readers with low vision, at 18px,
 * because grandparents will read this on phones.
 */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cookie";
  src: url("fonts/Cookie-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #efe6d6;        /* the invite's paper, measured beside its text panel */
  --paper-light: #f8f3e9;
  --paper-deep: #e2d5bd;
  --rule: #d3c3a6;
  --field-edge: #b3a283;
  --ink: #2f2a22;
  --ink-soft: #66584a;     /* gumnut */
  --gum: #3d6550;          /* gum leaf, deepened for contrast */
  --gum-deep: #2c4c3c;
  --sage: #9db394;
  --sage-pale: #dde6d3;
  --wattle: #dfa81a;
  --wattle-pale: #f6e2a4;
  --blossom: #ac2f3d;      /* flowering gum */
  --blossom-pale: #f4dad6;
  --measure: 40rem;
  --gutter: 1rem;
}

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  line-height: 1.5;
}
img { max-width: 100%; }
p { margin: 0 0 .75rem; }
a { color: var(--gum-deep); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--gum); }
:focus-visible { outline: 3px solid var(--wattle); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- the art */

.hero, .foot { max-width: var(--measure); margin: 0 auto; }
.band { display: block; width: 100%; height: auto; }
.band-top {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 99%);
}
.band-bottom {
  -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 100%);
          mask-image: linear-gradient(to top, #000 70%, transparent 100%);
}
/* Wider than the painting: soften its cut-off sides into the paper as well. */
@media (min-width: 41rem) {
  .band-top {
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 99%),
                        linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, #000 60%, transparent 99%),
                        linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-composite: intersect;
  }
  .band-bottom {
    -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 100%),
                        linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to top, #000 70%, transparent 100%),
                        linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-composite: intersect;
  }
}

/* The heading sits in the clearing where the invite had its text panel. */
.hero-text {
  position: relative;
  margin-top: -27%;
  padding: 0 var(--gutter);
  text-align: center;
}
.hero h1 {
  margin: 0 auto .35rem;
  max-width: 7.5em;
  font: 400 clamp(2.9rem, 12vw, 4.6rem)/.9 "Cookie", cursive;
  color: var(--gum-deep);
  text-wrap: balance;
}
.occasion { margin: 0; font-size: 1.05rem; }

.hero-small .band-top {
  aspect-ratio: 638 / 230;
  object-fit: cover;
  object-position: 50% 0;
}

/* ------------------------------------------------------------- the column */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 1rem;
  box-sizing: border-box;
}
.page-title {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--gum-deep);
}
h2 {
  margin: 0 0 .5rem;
  font: 400 2.6rem/1 "Cookie", cursive;
  color: var(--gum-deep);
}
h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; }

.you {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 .75rem;
  color: var(--ink-soft);
  text-align: center;
}
.you p, .you form { margin: 0; }

.coming, .menu, .drinks { margin-top: 2.5rem; }

.headcount { font-size: 1.1rem; }
.headcount strong { color: var(--gum-deep); }
.reply-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.reply-cta span { color: var(--ink-soft); }

details.who { margin: .75rem 0 1rem; }
details.who summary { cursor: pointer; color: var(--gum-deep); text-decoration: underline; text-underline-offset: .18em; }
details.who ul, .dietary ul { margin: .5rem 0 0; padding-left: 1.2rem; }
details.who li, .dietary li { margin-bottom: .25rem; }

.dietary {
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: var(--blossom-pale);
}
.dietary h3 { font-size: 1.05rem; color: var(--blossom); }

.lede { max-width: 34rem; }
.provided {
  margin: 1.25rem 0 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: var(--sage-pale);
}
.provided h3 { font-size: 1.05rem; color: var(--gum-deep); }
.provided ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.provided li { margin-bottom: .2rem; }
.kitchen { margin: .6rem 0 0; }
.provided h3 + .kitchen, .provided > .kitchen:first-child { margin-top: 0; }
.course-note { margin: 0 0 .5rem; color: var(--gum-deep); }
.my-dishes { margin: 1rem 0 0; }
.my-dishes a:not(.button) { font-weight: 700; }
.download { margin: .75rem 0 0; }

/* --------------------------------------------------------------- courses */

.course {
  padding: 1.5rem 0 .5rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 1rem;
}
.course:first-of-type { margin-top: 1.25rem; }
.blurb { margin: .1rem 0 .4rem; font-style: italic; color: var(--ink-soft); }

.feeds { margin: .3rem 0 .6rem; }
.feeds p { margin: 0 0 .35rem; font-size: .95rem; color: var(--ink-soft); }
.meter {
  display: block;
  max-width: 15rem;
  height: .45rem;
  border-radius: 999px;
  background: var(--paper-deep);
  overflow: hidden;
}
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--sage); }
.meter.full > span { background: var(--gum); }

.dishes { list-style: none; margin: .5rem 0 .75rem; padding: 0; }
.dish {
  padding: .75rem .9rem;
  margin: 0 -.9rem;
  border-radius: 12px;
  scroll-margin-top: 1rem;
}
.dish + .dish { border-top: 1px dashed var(--rule); border-radius: 0 0 12px 12px; }
.dish.mine { box-shadow: inset 4px 0 0 var(--wattle); }
.dish p { margin: 0; }
.dish-name { font-size: 1.15rem; font-weight: 700; }
.dish-by { color: var(--ink-soft); }
.dish-notes { margin-top: .35rem !important; font-style: italic; }
.dish-actions { margin-top: .4rem !important; display: flex; gap: 1.25rem; }

.dish.just-changed { animation: settle 2.6s ease-out 1; }
@keyframes settle {
  from { background: var(--wattle-pale); }
  to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .dish.just-changed { animation: none; background: var(--wattle-pale); }
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 0; padding: 0; }
.chip {
  padding: .05rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1.6;
}
.chip.diet { background: var(--sage-pale); color: var(--gum-deep); }
.chip.allergen { background: var(--blossom-pale); color: var(--blossom); font-weight: 700; }
.chip.need { box-shadow: inset 0 0 0 1.5px var(--field-edge); color: var(--ink-soft); }

.empty { color: var(--ink-soft); }
.add { margin: 0 0 1rem; }
.add a { font-weight: 700; }

/* --------------------------------------------------------------- weather */

.weather { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.weather h3 { margin: 1.5rem 0 .5rem; }
.facts, .forecasts { margin: 0; padding-left: 1.2rem; }
.facts li, .forecasts li { margin-bottom: .5rem; }
.odds { border-collapse: collapse; margin: 0 0 1.25rem; min-width: min(100%, 20rem); }
.odds caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: .35rem; }
.odds th, .odds td { padding: .4rem 0; border-top: 1px dashed var(--rule); }
.odds th { text-align: left; font-weight: 400; padding-right: 2rem; }
.odds td { text-align: right; font-weight: 700; color: var(--gum-deep); font-variant-numeric: tabular-nums; }
.source { margin-top: 1.25rem; font-size: .85rem; color: var(--ink-soft); }

/* ----------------------------------------------------------------- forms */

.panel {
  padding: 1.25rem;
  margin: 0 calc(-1 * var(--gutter)) 1rem;
  background: var(--paper-light);
  border-radius: 14px;
}
@media (min-width: 41rem) { .panel { margin-left: 0; margin-right: 0; padding: 1.5rem 1.75rem; } }

.field { margin: 0 0 1.35rem; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { display: block; margin-bottom: .35rem; padding: 0; font-weight: 700; }
.hint { margin: -.1rem 0 .5rem; color: var(--ink-soft); font-size: .93rem; }
.error { margin: .4rem 0 0; color: var(--blossom); font-weight: 700; }

input[type="text"], input[type="email"], input[type="number"], select, textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.9rem;
  padding: .55rem .75rem;
  border: 2px solid var(--field-edge);
  border-radius: 10px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
}
textarea { min-height: 5.5rem; resize: vertical; }
input.narrow { max-width: 8rem; }
input.medium { max-width: 16rem; }
input.code { letter-spacing: .2em; font-size: 1.3rem; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--blossom); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--gum); }

.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choices.stacked { flex-direction: column; align-items: flex-start; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.6rem;
  padding: .3rem .9rem .3rem .65rem;
  box-sizing: border-box;
  border: 2px solid var(--rule);
  border-radius: 999px;
  background: #fffdf8;
  cursor: pointer;
}
.choice input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--gum); }
.choice:has(input:checked) { border-color: var(--gum); background: var(--sage-pale); }

.pair { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.pair label { display: flex; flex-direction: column; gap: .3rem; font-weight: 400; }

.already { margin: -.6rem 0 1.1rem; }
.already .hint { margin: 0 0 .25rem; }

.warn {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--wattle-pale);
}
.warn ul { margin: .25rem 0 .75rem; padding-left: 1.2rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: .5rem 1.4rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: var(--gum);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--gum-deep); color: #fff; }
.button.quiet { background: transparent; color: var(--gum-deep); box-shadow: inset 0 0 0 2px var(--gum); }
.button.quiet:hover { background: var(--sage-pale); }
.button.danger { background: var(--blossom); }
.button.danger:hover { background: #8e2532; }

button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gum-deep);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
button.link.danger { color: var(--blossom); }

.resend, .remove-reply { margin-top: .5rem; }
.back { margin-top: 1rem; }

/* ------------------------------------------------------------- the hosts */

.admin-block { margin-top: 2rem; }
.rows { list-style: none; margin: .5rem 0 0; padding: 0; }
.rows > li { padding: .6rem 0; border-top: 1px solid var(--rule); }
.rows > li p { margin: 0; }
.rows.compact > li { padding: .35rem 0; font-size: .93rem; }
.small { font-size: .93rem; }
.quiet { color: var(--ink-soft); }
.bad-text { color: var(--blossom); }

/* ---------------------------------------------------------------- footer */

.foot { margin-top: 2rem; text-align: center; }
.foot-text { padding: 0 var(--gutter); position: relative; z-index: 1; }
.sign-off { margin: 0; font: 400 2.5rem/1 "Cookie", cursive; color: var(--gum-deep); }
.contacts { margin: .4rem 0 0; color: var(--ink-soft); }
.foot picture { display: block; margin-top: -6%; }