/* Picture this photograph */

/* Archivo variable font (SIL Open Font License), Latin subset, self-hosted. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-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 {
  --ink: #1d3147; /* text, and the deep navy of a school-photo backdrop */
  --ink-soft: #4e5f72;
  --backdrop: #2b4866;
  --lightbox: #e9eef2; /* the table the prints are laid out on */
  --paper: #ffffff;
  --kraft: #cba772; /* photo envelope */
  --kraft-pale: #f3e8d4;
  --red: #d0212b; /* from Kevin's flyer; used for actions */
  --red-deep: #a8141d;
  --line: #cdd6df;
  --field: #8796a5;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --condensed: 72%;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.2vw, 3rem);
  --step-5: clamp(2.625rem, 1.7rem + 3.8vw, 4.5rem);
  --step-6: clamp(3.25rem, 1.6rem + 6.4vw, 6.25rem);

  --gutter: clamp(1rem, 4vw, 2rem);
  --maxw: 75rem;
  --header-h: 4.25rem;
  --shadow-paper: 0 1px 1px rgb(29 49 71 / 0.08), 0 12px 26px -12px rgb(29 49 71 / 0.38);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: light;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--lightbox);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  font-stretch: var(--condensed);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-6);
}

h2 {
  font-size: var(--step-5);
}

h3 {
  font-size: var(--step-3);
  line-height: 1;
}

strong {
  font-weight: 650;
}

:focus-visible {
  outline: 3px solid var(--focus, var(--ink));
  outline-offset: 3px;
}

::selection {
  background: var(--red);
  color: #fff;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

.band {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.band--paper {
  background: var(--paper);
}

.band--backdrop {
  --focus: #fff;
  color: #fff;
  background:
    radial-gradient(90% 70% at 12% 0%, rgb(255 255 255 / 0.13), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgb(0 0 0 / 0.3), transparent 65%),
    var(--backdrop);
}

.section-head {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.section-head p {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: var(--step-0);
  font-weight: 650;
  font-stretch: 92%;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn--primary {
  background: var(--red);
  color: #fff;
}

.btn--primary:hover {
  background: var(--red-deep);
}

.btn--ghost {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: #fff;
}

.btn--small {
  min-height: 2.5rem;
  padding: 0.5rem 1.05rem;
  font-size: 0.9375rem;
}

.btn--large {
  min-height: 3.5rem;
  padding-inline: 1.75rem;
  font-size: 1.125rem;
}

.btn--block {
  width: 100%;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: rgb(233 238 242 / 0.97);
  transition: border-color 0.2s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  text-decoration: none;
}

/* Kevin's logo: a white badge with an orange and yellow outline. */
.brand__logo {
  width: auto;
  height: 3rem;
}

.brand__logo--footer {
  height: 3.5rem;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
}

.site-nav a {
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.menu-toggle {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 63.99em) {
  .menu-toggle {
    display: grid;
  }

  .site-header__cta {
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    border-bottom: 1px solid var(--line);
    background: var(--lightbox);
  }

  .site-header.is-open .site-nav {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    width: min(100% - 2 * var(--gutter), var(--maxw));
    margin: 0 auto;
    padding-block: 0.5rem 1rem;
  }

  .site-nav a {
    display: block;
    padding: 0.875rem 0;
    border-top: 1px solid var(--line);
    font-size: var(--step-1);
    font-weight: 650;
    font-stretch: 85%;
  }
}

/* On phones the logo and "Order" button share the bar with the menu. */
@media (max-width: 30em) {
  .site-header__inner {
    gap: 0.75rem;
  }

  .site-header .brand__logo {
    height: 2.375rem;
  }

  .site-header__cta-more {
    display: none;
  }
}

@media (max-width: 23.5em) {
  .site-header .brand__logo {
    height: 2.1rem;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem);
  overflow-x: clip;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 64em) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

.hero__lead {
  max-width: 40ch;
  margin-top: 1.5rem;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

.hero__points {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
  list-style: none;
}

.hero__points li {
  position: relative;
  max-width: 44ch;
  padding-left: 1.5rem;
  font-weight: 550;
  line-height: 1.4;
}

.hero__points li::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0.15rem;
  width: 0.5rem;
  height: 0.65rem;
  border-radius: 1px;
  background: var(--red);
  rotate: -8deg;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (max-width: 30em) {
  .hero__actions .btn {
    width: 100%;
  }
}

.paywith {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin-top: 2rem;
}

.paywith__label {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
}

.pills li {
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

/* The three sheets dealt onto the lightbox. */
.spread {
  position: relative;
  aspect-ratio: 6 / 5;
}

@media (min-width: 64em) {
  .spread {
    margin-right: calc(-1 * var(--gutter));
  }
}

.spread__sheet {
  position: absolute;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  rotate: var(--r, 0deg);
}

.spread__sheet--group {
  --r: 3.5deg;
  top: 2%;
  left: 31%;
  width: 66%;
}

.spread__sheet--portrait {
  --r: -5deg;
  top: 11%;
  left: 3%;
  width: 41%;
  z-index: 1;
}

.spread__sheet--multi {
  --r: 6deg;
  top: 31%;
  left: 49%;
  width: 38%;
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .spread__sheet {
    animation: deal 0.9s var(--ease-out) both;
  }

  .spread__sheet--group {
    animation-delay: 0.1s;
  }

  .spread__sheet--portrait {
    animation-delay: 0.28s;
  }

  .spread__sheet--multi {
    animation-delay: 0.46s;
  }
}

@keyframes deal {
  from {
    opacity: 0;
    translate: 4% -14%;
    rotate: calc(var(--r) * 3);
  }
}

/* ---------- How ordering works ---------- */

.steps {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  list-style: none;
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-content: start;
  column-gap: 1rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}

@media (min-width: 48em) {
  .step {
    grid-template-columns: 1fr;
  }
}

.step__n {
  grid-row: span 2;
  font-size: 3.5rem;
  font-weight: 800;
  font-stretch: var(--condensed);
  line-height: 0.8;
  color: var(--red);
}

@media (min-width: 48em) {
  .step__n {
    grid-row: auto;
    margin-bottom: 1.25rem;
    font-size: 4.5rem;
  }
}

.step h3 {
  font-size: var(--step-2);
}

.step p {
  max-width: 34ch;
  margin-top: 0.5rem;
  color: var(--ink-soft);
}

.steps__outro {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.35;
}

/* ---------- Packages ---------- */

.shop {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* Photo day tabs: the first choice parents make. */
.daypicker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (min-width: 48em) {
  .daypicker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

html:not(.js) .daypicker {
  display: none;
}

.daypicker__tab {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.3rem;
  min-height: 4.75rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.daypicker__tab:hover {
  border-color: var(--field);
}

.daypicker__tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.daypicker__name {
  font-size: var(--step-2);
  font-weight: 800;
  font-stretch: var(--condensed);
  line-height: 1;
}

.daypicker__from {
  font-size: var(--step--1);
  line-height: 1.2;
  color: var(--ink-soft);
}

.daypicker__tab[aria-selected="true"] .daypicker__from {
  color: rgb(255 255 255 / 0.78);
}

/* A notch under the chosen tab, pointing at its packages. */
@media (min-width: 48em) {
  .daypicker__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    bottom: -0.55rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 2px;
    background: var(--ink);
    rotate: 45deg;
  }
}

.shop-panel {
  --panel-gap: clamp(3.5rem, 8vw, 6rem);
  display: grid;
  gap: var(--panel-gap);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.shop-panel__head {
  margin-bottom: calc(clamp(1.5rem, 4vw, 2.5rem) - var(--panel-gap));
}

html.js .shop-panel:not(.is-active) {
  display: none;
}

html:not(.js) .shop-panel + .shop-panel {
  margin-top: clamp(5rem, 10vw, 8rem);
}

.shop-panel__title {
  font-size: var(--step-4);
}

/* With tabs, the tab names the panel, so its heading is for screen readers only. */
html.js .shop-panel__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shop-panel__intro {
  max-width: 44ch;
  color: var(--ink-soft);
}

html:not(.js) .shop-panel__intro {
  margin-top: 0.75rem;
}

/* Choosing a photo day deals its packs onto the table. */
@media (prefers-reduced-motion: no-preference) {
  html.js .shop-panel.is-active .product--featured .pack__sheet:not(.pile) {
    animation: deal 0.7s var(--ease-out) backwards;
  }

  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(2) { animation-delay: 0.05s; }
  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(3) { animation-delay: 0.1s; }
  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(4) { animation-delay: 0.15s; }
  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(5) { animation-delay: 0.2s; }
  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(6) { animation-delay: 0.25s; }
  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(7) { animation-delay: 0.3s; }
  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(8) { animation-delay: 0.35s; }
  html.js .shop-panel.is-active .product--featured .pack__sheet:nth-child(n + 9) { animation-delay: 0.4s; }
}

.product__name {
  font-size: var(--step-3);
  line-height: 0.95;
}

.product--featured .product__name {
  font-size: var(--step-4);
}

.product__summary {
  max-width: 42ch;
  margin-top: 0.75rem;
  color: var(--ink-soft);
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 1.25rem;
}

.price__amount {
  font-size: 3.5rem;
  font-weight: 800;
  font-stretch: var(--condensed);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.price__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.btn--order {
  margin-top: 1.25rem;
}

.product--featured {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.product--featured .btn--order {
  width: 100%;
}

@media (min-width: 60em) {
  .product--featured {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .product--reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .product--reverse .product__visual {
    order: 2;
  }
}

.choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.choice--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice__opt {
  position: relative;
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s;
}

.choice__opt:hover {
  border-color: var(--field);
}

.choice__opt:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.choice__opt:has(input:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice__label {
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.25;
}

.choice__price {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* Number of sheets: one tap per count. The floated legend joins the grid. */
.choice--count {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 30em) {
  .choice--count {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.choice__legend {
  float: left;
  grid-column: 1 / -1;
  width: 100%;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 650;
}

.choice--count .choice__opt {
  place-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 0;
  border-radius: 8px;
}

.choice--count .choice__label {
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.choice--count .choice__opt:has(input:checked) {
  background: var(--ink);
  color: #fff;
}

.contents {
  columns: 2;
  column-gap: 1.5rem;
  margin-top: 1.75rem;
  list-style: none;
  font-size: 0.9375rem;
}

.contents li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.25rem;
  border-top: 1px solid var(--line);
  break-inside: avoid;
}

/* A tiny print as the bullet. */
.contents li::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0.05rem;
  width: 0.45rem;
  height: 0.6rem;
  border-radius: 1px;
  background: var(--red);
  rotate: -8deg;
}

.contents--short {
  columns: 1;
}

/* Smaller packs. On phones and tablets they read like a price list: picture on
   the left, details on the right. From 64em they stand as cards in a row. */
.shop__row {
  display: grid;
  gap: 1.25rem 2rem;
}

.product--compact .product__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.product--compact .price,
.product--compact .btn--order {
  margin-top: 0;
}

/* If the button wraps under a long price, it stays on the right. */
.product--compact .btn--order {
  margin-left: auto;
}

.product--compact .price__amount {
  font-size: 2.75rem;
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .shop__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 63.99em) {
  .product--compact {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
  }

  .product--compact .product__name {
    font-size: var(--step-2);
  }

  .product--compact .product__summary {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .product--compact .product__buy {
    margin-top: 0.875rem;
  }

  .product--compact .price__amount {
    font-size: 2.25rem;
  }

  .product--compact .btn--order {
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
  }
}

@media (min-width: 64em) {
  .shop__row {
    --col-gap: 4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem var(--col-gap);
  }

  .shop__row--4 {
    --col-gap: 3rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Each pack is its own column: equal heights, prices lined up along the
     bottom, and a hairline between neighbours so prices and buttons don't run
     into the next pack. */
  .product--compact {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .product--compact .product__body {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .product--compact .product__buy {
    margin-top: auto;
    padding-top: 1.25rem;
  }

  .product--compact + .product--compact::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--col-gap) / -2);
    border-left: 1px solid var(--line);
  }

  .product--compact .product__visual {
    margin-bottom: 1.5rem;
  }

  .shop__row--4 .product__name {
    font-size: var(--step-2);
  }

  .shop__row--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop__row--1 .product--compact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    max-width: 52rem;
  }

  .shop__row--1 .product__visual {
    margin-bottom: 0;
  }

  .shop__row--1 .product__buy {
    justify-content: flex-start;
    gap: 1rem 2rem;
  }
}

/* Package visuals: sheets laid out on the lightbox. */
.pack {
  position: relative;
  aspect-ratio: 4 / 3;
}

.product--compact .pack {
  aspect-ratio: 5 / 4;
}

.pack__sheet {
  position: absolute;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  rotate: var(--r, 0deg);
}

.pack__phone {
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px rgb(29 49 71 / 0.3));
  opacity: 0;
  translate: 12% 10%;
  transition: opacity 0.35s, translate 0.5s var(--ease-out), rotate 0.5s var(--ease-out);
}

.is-digital .pack__phone,
.pack__phone.is-on {
  opacity: 1;
  translate: 0 0;
}

.pack--full .s1 { --r: 3deg; top: 1%; left: 37%; width: 60%; }
.pack--full .s2 { --r: -10deg; top: 13%; left: 3%; width: 27%; }
.pack--full .s3 { --r: -5deg; top: 20%; left: 18%; width: 27%; }
.pack--full .s4 { --r: 1deg; top: 27%; left: 35%; width: 27%; }
.pack--full .s5 { --r: 6deg; top: 33%; left: 52%; width: 27%; }
.pack--full .s6 { --r: 8deg; top: 42%; left: 79%; width: 15%; }

.pack--four .s1 { --r: -9deg; top: 10%; left: 4%; width: 30%; }
.pack--four .s2 { --r: -3deg; top: 6%; left: 23%; width: 30%; }
.pack--four .s3 { --r: 3deg; top: 9%; left: 42%; width: 30%; }
.pack--four .s4 { --r: 8deg; top: 13%; left: 61%; width: 30%; }
.pack--four .s5 { --r: 8deg; top: 42%; left: 80%; width: 15%; }

.pack--two .s1 { --r: -6deg; top: 6%; left: 13%; width: 40%; }
.pack--two .s2 { --r: 5deg; top: 11%; left: 46%; width: 40%; }

.pack--one .s1 { --r: -3deg; top: 6%; left: 28%; width: 43%; }

.pack--group .s1 { --r: -3deg; top: 15%; left: 8%; width: 84%; }

.pack--digital .s1 { --r: -7deg; top: 10%; left: 16%; width: 37%; }
.pack--digital .s2 { --r: 5deg; top: 8%; left: 50%; width: 27%; }

.pack--family .s1 { --r: -9deg; top: 3%; left: 3%; width: 25%; }
.pack--family .s2 { --r: -3deg; top: 9%; left: 15%; width: 25%; }
.pack--family .s3 { --r: 4deg; top: 3%; left: 58%; width: 25%; }
.pack--family .s4 { --r: 9deg; top: 9%; left: 70%; width: 25%; }
.pack--family .s5 { --r: -1.5deg; top: 38%; left: 22%; width: 54%; }
.pack--family .s6 { --r: 7deg; top: 46%; left: 77%; width: 14%; }

.pack--family3 .s1 { --r: -9deg; top: 3%; left: 1%; width: 21%; }
.pack--family3 .s2 { --r: -4deg; top: 9%; left: 11%; width: 21%; }
.pack--family3 .s3 { --r: -1deg; top: 1%; left: 37%; width: 21%; }
.pack--family3 .s4 { --r: 3deg; top: 7%; left: 47%; width: 21%; }
.pack--family3 .s5 { --r: 6deg; top: 3%; left: 69%; width: 21%; }
.pack--family3 .s6 { --r: 10deg; top: 9%; left: 78%; width: 21%; }
.pack--family3 .s7 { --r: -1.5deg; top: 40%; left: 20%; width: 56%; }
.pack--family3 .s8 { --r: 7deg; top: 47%; left: 78%; width: 14%; }

.pack--family4 .s1 { --r: -10deg; top: 4%; left: 0; width: 18%; }
.pack--family4 .s2 { --r: -5deg; top: 10%; left: 8%; width: 18%; }
.pack--family4 .s3 { --r: -3deg; top: 1%; left: 25%; width: 18%; }
.pack--family4 .s4 { --r: 1deg; top: 7%; left: 33%; width: 18%; }
.pack--family4 .s5 { --r: 3deg; top: 2%; left: 50%; width: 18%; }
.pack--family4 .s6 { --r: 6deg; top: 8%; left: 58%; width: 18%; }
.pack--family4 .s7 { --r: 8deg; top: 4%; left: 74%; width: 18%; }
.pack--family4 .s8 { --r: 11deg; top: 10%; left: 82%; width: 18%; }
.pack--family4 .s9 { --r: -1.5deg; top: 40%; left: 20%; width: 56%; }
.pack--family4 .s10 { --r: 7deg; top: 47%; left: 78%; width: 14%; }

/* Nine sheets fanned out in front of the class group photo. */
.pack--nine .s1 { --r: 3deg; top: 0; left: 38%; width: 58%; }
.pack--nine .c1 { --r: -10deg; top: 16%; left: 1%; width: 21%; }
.pack--nine .c2 { --r: -7.4deg; top: 19.6%; left: 10.4%; width: 21%; }
.pack--nine .c3 { --r: -4.8deg; top: 23.2%; left: 19.8%; width: 21%; }
.pack--nine .c4 { --r: -2.2deg; top: 26.8%; left: 29.2%; width: 21%; }
.pack--nine .c5 { --r: 0.4deg; top: 30.4%; left: 38.6%; width: 21%; }
.pack--nine .c6 { --r: 3deg; top: 34%; left: 48%; width: 21%; }
.pack--nine .c7 { --r: 5.6deg; top: 37.6%; left: 57.4%; width: 21%; }
.pack--nine .c8 { --r: 8.2deg; top: 41.2%; left: 66.8%; width: 21%; }
.pack--nine .s10 { --r: 8deg; top: 44%; left: 83%; width: 13%; }

.pack--five .s1 { --r: 3deg; top: 2%; left: 34%; width: 62%; }
.pack--five .s2 { --r: -10deg; top: 18%; left: 2%; width: 28%; }
.pack--five .s3 { --r: -5deg; top: 26%; left: 18%; width: 28%; }
.pack--five .s4 { --r: 1deg; top: 34%; left: 35%; width: 28%; }
.pack--five .s5 { --r: 6deg; top: 40%; left: 53%; width: 28%; }

.pack--grad .s1 { --r: -8deg; top: 8%; left: 5%; width: 31%; }
.pack--grad .s2 { --r: -1deg; top: 12%; left: 29%; width: 31%; }
.pack--grad .s3 { --r: 5deg; top: 5%; left: 53%; width: 33%; }
.pack--grad .s4 { --r: 9deg; top: 40%; left: 81%; width: 14%; }

.pack--grad-one .s1 { --r: -3deg; top: 6%; left: 28%; width: 43%; }

.pack--grad-digital .s1 { --r: -7deg; top: 10%; left: 16%; width: 37%; }
.pack--grad-digital .s2 { --r: 5deg; top: 8%; left: 50%; width: 27%; }

.pack--family-digital .s1 { --r: -4deg; top: 18%; left: 3%; width: 64%; }
.pack--family-digital .s2 { --r: 6deg; top: 6%; left: 61%; width: 27%; }

/* Family portraits: the pile grows as more sheets are chosen. Each print has its
   own offset and angle (--x, --y, --r) from the build. */
.pack--stack .pile {
  top: 21%;
  left: 17%;
  width: 66%;
  opacity: 0;
  translate: var(--x) calc(var(--y) - 35%);
  rotate: calc(var(--r) * 2.5);
}

.pack--stack .pile.is-in {
  opacity: 1;
  translate: var(--x) var(--y);
  rotate: var(--r);
}

@media (prefers-reduced-motion: no-preference) {
  .pack--stack .pile {
    transition: opacity 0.25s, translate 0.45s var(--ease-out), rotate 0.45s var(--ease-out);
  }
}

/* ---------- DSC number ---------- */

.dsc {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 60em) {
  .dsc {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 5rem;
  }
}

.dsc__copy p {
  max-width: 38ch;
  margin-top: 1.25rem;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

.dsc__copy strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.dsc__figure img {
  width: 100%;
  border-radius: 6px;
}

.dsc__figure figcaption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---------- For centres ---------- */

.centres {
  display: grid;
  gap: 3rem;
}

@media (min-width: 60em) {
  .centres {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    gap: 5rem;
  }
}

.centres__lead {
  max-width: 40ch;
  margin-top: 1.25rem;
  font-size: var(--step-1);
  line-height: 1.45;
  color: rgb(255 255 255 / 0.85);
}

.benefits {
  margin-top: 2rem;
  list-style: none;
}

.benefits li {
  position: relative;
  max-width: 46ch;
  padding: 1rem 0 1rem 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

.benefits li::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 0.2rem;
  width: 0.55rem;
  height: 0.75rem;
  border-radius: 1px;
  background: var(--kraft);
  rotate: -8deg;
}

.enquiry {
  --focus: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
}

.enquiry h3 {
  margin-bottom: 0.5rem;
}

.field-row {
  display: grid;
  column-gap: 1rem;
}

@media (min-width: 30em) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Suburb, state and postcode share a line where there's room. */
  .field-row--address {
    grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem;
  }
}

.field {
  display: grid;
  gap: 0.375rem;
  margin-top: 1rem;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 650;
}

.field__opt {
  font-weight: 400;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--field);
  border-radius: 8px;
  background: var(--paper);
  font-size: 1rem;
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink);
  outline: 3px solid rgb(29 49 71 / 0.25);
  outline-offset: 0;
}

.field ::placeholder {
  color: #6b7a89;
}

.field__req {
  margin-left: 0.15em;
  color: var(--red-deep);
}

/* A required field that was missed or is wrong: red edge and a message under it.
   The first one also gets a shake, so it's easy to spot on a phone. */
.field.is-invalid :is(input, select, textarea),
.field.is-invalid :is(input, select, textarea):focus-visible {
  border-color: var(--red-deep);
}

.field.is-invalid :is(input, select, textarea):focus-visible {
  outline-color: rgb(168 20 29 / 0.25);
}

.field__error {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--red-deep);
}

@keyframes field-shake {
  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

.field.is-shaking {
  animation: field-shake 0.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .field.is-shaking {
    animation: none;
  }
}

/* Address suggestions from Google, under the street address box. */
.suggest {
  border: 1.5px solid var(--field);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.suggest__list {
  list-style: none;
}

.suggest__opt {
  display: grid;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.suggest__opt:first-child {
  border-top: 0;
}

.suggest__opt span {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.suggest__opt:hover,
.suggest__opt[aria-selected="true"] {
  background: var(--lightbox);
}

/* Google's attribution for the suggestions, in the style it asks for. */
.suggest__by {
  padding: 0.3rem 0.85rem;
  border-top: 1px solid var(--line);
  font-family: Roboto, Arial, sans-serif;
  font-size: 0.75rem;
  color: #5e5e5e;
  text-align: right;
}

.enquiry .btn {
  margin-top: 1.5rem;
}

.enquiry__note {
  margin-top: 0.875rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60em) {
  .faq {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 5rem;
  }

  .faq h2 {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }
}

.qa {
  border-top: 1px solid var(--line);
}

.qa:last-child {
  border-bottom: 1px solid var(--line);
}

.qa summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.35rem;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
  transition: rotate 0.2s;
}

.qa[open] summary::after {
  rotate: 45deg;
}

.qa__a {
  max-width: 60ch;
  padding-bottom: 1.5rem;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */

.site-footer {
  --focus: #fff;
  padding-block: 4rem 2rem;
  background: var(--ink);
  color: rgb(255 255 255 / 0.85);
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer__about p {
  max-width: 30ch;
  margin-top: 1rem;
}

.site-footer__links {
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.68);
}

/* ---------- Order drawer ---------- */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(30rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -24px 0 60px -24px rgb(29 49 71 / 0.5);
}

.drawer[open] {
  display: flex;
  flex-direction: column;
}

.drawer::backdrop {
  background: rgb(18 30 44 / 0.55);
}

@media (max-width: 40em) {
  .drawer {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .drawer,
  .drawer::backdrop {
    transition: translate 0.35s var(--ease-out), opacity 0.35s, overlay 0.35s allow-discrete, display 0.35s allow-discrete;
  }

  .drawer:not([open]) {
    translate: 100% 0;
  }

  .drawer:not([open])::backdrop {
    opacity: 0;
  }

  @starting-style {
    .drawer[open] {
      translate: 100% 0;
    }

    .drawer[open]::backdrop {
      opacity: 0;
    }
  }

  @media (max-width: 40em) {
    .drawer:not([open]) {
      translate: 0 100%;
    }

    @starting-style {
      .drawer[open] {
        translate: 0 100%;
      }
    }
  }
}

/* The header is the order envelope: kraft paper with its flap. */
.drawer__envelope {
  position: relative;
  padding: 2.75rem 1.5rem 1.5rem;
  background: var(--kraft);
}

.drawer__envelope::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1.75rem;
  background: rgb(0 0 0 / 0.08);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.drawer__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  cursor: pointer;
}

.drawer__close:hover {
  background: #fff;
}

.drawer__title {
  font-size: var(--step-4);
  padding-right: 2.5rem;
}

.drawer__title:focus {
  outline: none;
}

.drawer__option {
  margin-top: 0.35rem;
  font-weight: 600;
}

.drawer__price {
  margin-top: 0.75rem;
  font-size: 2.75rem;
  font-weight: 800;
  font-stretch: var(--condensed);
  line-height: 1;
}

/* Posted orders: the package, postage and total on a receipt slip, so parents see
   the full price before they start. */
.drawer__receipt {
  display: grid;
  gap: 0.15rem;
  max-width: 20rem;
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.9rem 0.65rem;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(29 49 71 / 0.18);
  font-variant-numeric: tabular-nums;
}

.drawer__receipt div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.drawer__receipt dt {
  color: var(--ink-soft);
}

.drawer__receipt dd {
  margin: 0;
  font-weight: 650;
}

/* The total, below a dashed tear line. */
.drawer__receipt div:last-child {
  margin-top: 0.3rem;
  padding-top: 0.4rem;
  border-top: 1.5px dashed var(--field);
}

.drawer__receipt div:last-child dt {
  font-weight: 800;
  color: var(--ink);
}

.drawer__receipt div:last-child dd {
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: var(--condensed);
  line-height: 1;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.5rem 1.5rem;
  overscroll-behavior: contain;
}

.drawer__step {
  margin-top: 1.5rem;
}

.drawer__step h3 {
  font-size: var(--step-2);
}

.fauxselect {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.fauxselect__label {
  font-size: var(--step--1);
  font-weight: 650;
}

.fauxselect__value {
  position: relative;
  padding: 0.75rem 2.5rem 0.75rem 0.875rem;
  border: 1.5px solid var(--field);
  border-radius: 8px;
  background: var(--lightbox);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.fauxselect__value::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  rotate: 45deg;
  translate: 0 -70%;
}

.formlines {
  margin-top: 0.5rem;
  list-style: none;
}

.formlines li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.7rem;
}

.formlines li::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 2rem;
  border-bottom: 1.5px dashed var(--field);
}

.formlines__label {
  order: 0;
  font-weight: 550;
}

.formlines__help {
  order: 2;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--red-deep);
}

.drawer__note {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--kraft);
  background: var(--kraft-pale);
  font-size: 0.9375rem;
}

.drawer__aside {
  margin-top: 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.drawer__foot {
  padding: 1rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.drawer__foot p {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- On-site checkout ---------- */

/* Shown on the sandbox preview only. */
.testbar {
  padding: 0.5rem var(--gutter);
  background: var(--kraft);
  font-size: var(--step--1);
  font-weight: 650;
  text-align: center;
}

.checkout {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.checkout .drawer__step h3 {
  margin-bottom: 0.25rem;
}

.field__help {
  margin-left: 0.4rem;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--red-deep);
}

.field__hint {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.checkout__test {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--red);
  background: #fbe9ea;
  font-size: 0.9375rem;
}

/* The payment step while the details step is showing: laid out at full width but
   invisible and taking no space, so Square's card form loads behind it. */
.checkout__step[data-parked] {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.checkout__card {
  min-height: 5.5rem;
  margin-top: 0.875rem;
}

.checkout__loading {
  padding-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.checkout__wallets {
  display: grid;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.checkout__applepay {
  width: 100%;
  height: 3rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
}

#checkout-googlepay {
  height: 3rem;
}

.checkout__or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.checkout__or::before,
.checkout__or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.checkout__error {
  margin-bottom: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #fbe9ea;
  color: var(--red-deep);
  font-size: 0.9375rem;
  font-weight: 550;
  text-align: left;
}

.checkout .drawer__foot .btn:disabled {
  background: var(--field);
  cursor: progress;
}

.checkout__done {
  display: grid;
  align-content: start;
  gap: 1rem;
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
}

.checkout__done h3 {
  font-size: var(--step-3);
}

.checkout__done h3:focus {
  outline: none;
}

.checkout__receipt {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;
  border: 1.5px dashed var(--field);
  border-radius: 10px;
}

.checkout__receipt div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.checkout__receipt dt {
  color: var(--ink-soft);
}

.checkout__receipt dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.checkout__next {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---------- Payment step summary ---------- */

.checkout__required {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.checkout__summary {
  display: grid;
  gap: 0.35rem;
  margin: 0.875rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: var(--lightbox);
  font-size: 0.9375rem;
}

.checkout__summary div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.checkout__summary dt {
  color: var(--ink-soft);
}

.checkout__summary dd {
  margin: 0;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

.checkout__edit {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-deep);
  font-size: var(--step--1);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* ---------- Photo day pages (for QR codes; no links back to the homepage) ---------- */

.site-header--plain {
  position: static;
  border-bottom: 1px solid var(--line);
}

.dayhero {
  padding-block: clamp(2rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.dayhero h1 {
  font-size: var(--step-5);
}

.dayhero__lead {
  max-width: 40ch;
  margin-top: 1rem;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

.daysteps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 1.5rem;
  list-style: none;
  font-weight: 600;
}

.daysteps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.daysteps__n {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-stretch: var(--condensed);
  font-size: 1.05rem;
}

.band--day {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.daypage .shop,
.daypage .shop-panel {
  margin-top: 0;
}

.site-footer--plain {
  padding-block: 0 2rem;
}

.site-footer--plain .site-footer__base {
  margin-top: 0;
}

/* ---------- Admin ---------- */

.adminpage {
  background: var(--lightbox);
}

.admin {
  padding-block: clamp(2rem, 5vw, 3.5rem) 4rem;
}

.admin h1 {
  font-size: var(--step-5);
}

.admin__loading {
  margin-top: 1.5rem;
  color: var(--ink-soft);
}

.admin__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* On phones the header only has room for the logo and Sign out. */
@media (max-width: 40em) {
  .admin__who [data-email] {
    display: none;
  }
}

.admin__panel,
.admin__block {
  max-width: 60rem;
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
}

.admin__panel {
  max-width: 34rem;
}

.admin__panel h2,
.admin__block h2 {
  font-size: var(--step-3);
}

.admin__panel > p,
.admin__block > p {
  max-width: 60ch;
  margin-top: 0.5rem;
  color: var(--ink-soft);
}

.admin__form .btn {
  margin-top: 1.25rem;
}

/* Switches the dashboard between links for collected orders and posted reorders.
   Kraft, like the envelope the reorder goes out in. */
.admin__switch {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 60rem;
  margin-top: 2rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--kraft);
  border-radius: 6px;
  background: var(--kraft-pale);
  color: var(--ink-soft);
  cursor: pointer;
}

.admin__switch input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15rem;
  accent-color: var(--red);
}

.admin__switch strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: var(--step-1);
  color: var(--ink);
}

/* Password box with a Show/Hide button inside its right edge. */
.password {
  position: relative;
}

.field .password input {
  padding-right: 6rem;
}

/* Edge adds its own reveal button; this one replaces it. */
.password input::-ms-reveal {
  display: none;
}

.password__toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: none;
  color: var(--red-deep);
  font-size: 0.9375rem;
  font-weight: 650;
  cursor: pointer;
}

.password__toggle:focus-visible {
  outline-offset: -3px;
}

.admin__forgot {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.admin__status {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.admin__url {
  font-size: var(--step--1);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.admin__cards {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  list-style: none;
}

@media (min-width: 48em) {
  .admin__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin__card,
.admin__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.admin__card h3 {
  font-size: var(--step-2);
}

.admin__group {
  margin-top: 1.75rem;
  font-size: var(--step-2);
}

.admin__rows {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
  list-style: none;
}

.admin__name {
  font-weight: 650;
}

.admin__name span {
  font-weight: 450;
  color: var(--ink-soft);
}

.admin__name strong {
  margin-left: 0.35rem;
}

.admin__qr {
  flex: none;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: zoom-in;
}

.admin__qr:hover {
  border-color: var(--field);
}

.admin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.35rem;
  font-size: var(--step--1);
  font-weight: 650;
}

.admin__actions a,
.admin__actions button,
.admin__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-deep);
  font-size: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.admin__link {
  font-size: var(--step--1);
}

.admin__dialog {
  width: min(100% - 2rem, 26rem);
  padding: 1.5rem;
  border: 0;
  border-radius: 8px;
  text-align: center;
}

.admin__dialog::backdrop {
  background: rgb(18 30 44 / 0.6);
}

.admin__dialog h2 {
  font-size: var(--step-3);
}

.admin__dialog img {
  width: 100%;
  height: auto;
  margin: 1rem 0 0.75rem;
}

.admin__dialog .admin__actions {
  justify-content: center;
  margin-top: 1rem;
}

/* ---------- 404 ---------- */

.notfound__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 48em) {
  .notfound__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 4rem;
  }
}

.notfound__sheet {
  width: min(16rem, 70%);
  margin-inline: auto;
  rotate: -4deg;
  box-shadow: var(--shadow-paper);
}

.notfound h1 {
  font-size: var(--step-5);
}

.notfound p {
  max-width: 40ch;
  margin-top: 1.25rem;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ---------- Poster ---------- */

.poster-page {
  padding: 1.5rem 1rem 3rem;
}

.poster-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
  text-align: center;
}

.poster-tools__days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  width: 100%;
}

.poster-tools__days ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
}

.poster {
  display: flex;
  flex-direction: column;
  gap: 12mm;
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin-inline: auto;
  padding: 16mm 16mm 14mm;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.poster__logo {
  width: 78mm;
  height: auto;
}

.poster__title {
  font-size: 58pt;
  line-height: 0.92;
  color: var(--red);
}

.poster__scan {
  display: grid;
  grid-template-columns: 78mm 1fr;
  align-items: center;
  gap: 10mm;
  font-size: 14pt;
}

.poster__qr {
  width: 78mm;
  height: 78mm;
}

.poster__scan-title {
  margin-bottom: 3mm;
  font-size: 24pt;
  font-weight: 800;
  font-stretch: var(--condensed);
  line-height: 1;
}

.poster__url {
  margin-top: 4mm;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.poster__steps {
  display: grid;
  gap: 5mm;
  list-style: none;
  font-size: 16pt;
  line-height: 1.3;
}

.poster__steps li {
  display: grid;
  grid-template-columns: 14mm 1fr;
  align-items: center;
  padding-top: 4mm;
  border-top: 2px solid var(--ink);
}

.poster__steps .step__n {
  grid-row: auto;
  font-size: 34pt;
}

.poster__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3mm 5mm;
  margin-top: auto;
  font-size: 12pt;
  color: var(--ink-soft);
}

.poster__pay .pills li {
  font-size: 11pt;
}

@media (max-width: 40em) {
  .poster {
    padding: 8mm;
  }

  .poster__title {
    font-size: 36pt;
  }

  .poster__scan {
    grid-template-columns: 1fr;
  }
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .poster-page {
    padding: 0;
    background: #fff;
  }

  .poster-tools {
    display: none;
  }

  .poster {
    width: 210mm;
    height: 297mm;
    min-height: 0;
    margin: 0;
    box-shadow: none;
    overflow: hidden;
  }
}