/* The landing page (templates/home.html), in the look's own colours: a
   sample card standing beside what PrintCard does, what it costs and the
   way to make one; for an account that has ordered, its orders and the
   next card. The sample card never changes with the look. */

.home { max-width: 72rem; }
.home h1 {
  margin: 0;
  font: var(--display-weight) clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem)/1 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.home h2 {
  margin: 0;
  font: var(--display-weight) 1.4rem/1.15 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.015em;
}
.home h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.home p { margin: 0; }
.home-lede { font-size: 1.1875rem; line-height: 1.5; max-width: 34rem; color: var(--on); }
.home-hint, .home-meta { color: var(--on-soft); font-size: 0.9375rem; }
.home [hidden] { display: none !important; }

/* The one button to press, a size up. */
.home-cta[rst-btn] { min-height: 3.25rem; padding: 0.7rem 1.5rem; font-size: 1.125rem; font-weight: 700; }

/* Someone new: the card, and beside it what it is. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 27rem);
  grid-template-areas: "title title" "card text";
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(1.5rem, 4vw, 3rem);
}
.home-hero > h1 { grid-area: title; max-width: 18em; }
.home-hero > .home-sample { grid-area: card; }
/* Beside the words, the card a fifth larger, its sheet's empty edges
   spilling into the gap, and in view as the words go by. */
@media (min-width: 48.01rem) {
  .home-hero > .home-sample { position: sticky; top: 1.5rem; }
  .home-hero > .home-sample .sheet { width: 120%; margin-inline: -10%; }
}
.home-hero > .home-hero-text { grid-area: text; }
.home-hero-text { display: grid; gap: 1.25rem; justify-items: start; }
.home-hero-text > div { display: grid; gap: 0.75rem; justify-items: start; }

/* What it costs, on the tear strip: where the card leaves the page.
   The words and the choice of how many on the left, the adding machine
   standing beside them. */
.home-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1.25rem;
  align-items: start;
  max-width: 34rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--strip);
  color: var(--strip-ink);
  border: 1.5px dashed var(--strip-rule);
  border-radius: var(--radius);
}
.home-price-figure {
  margin: 0;
  font: var(--display-weight) 2.1rem/1 var(--display);
  font-stretch: var(--size-stretch);
  letter-spacing: -0.01em;
}
.home-price > :not(.calc) { grid-column: 1; }
.home-price p { margin: 0; }
.home-price-cta[rst-btn] { justify-self: start; }

/* How many: a segmented pair, the chosen filled as the cart's paper is.
   The radios need no form: home.css alone shows the sum chosen. */
.home-price-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 6.5rem));
  justify-self: start;
  border: 1.5px solid var(--strip-rule);
  border-radius: var(--radius);
}
.home-price-choice label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  white-space: nowrap;
  font-weight: 650;
  cursor: pointer;
}
.home-price-choice label + label { border-left: 1.5px solid var(--strip-rule); }
.home-price-choice input { position: absolute; opacity: 0; pointer-events: none; }
.home-price-choice label:hover { background: var(--strip-hover); }
.home-price-choice label:has(input:checked) { background: var(--chosen); color: var(--chosen-ink); }
.home-price-choice label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -1px; z-index: 1; }

/* The adding machine (calc.css) stands beside the words. One card's
   sum shows until ten are chosen; without :has the first stays, which
   is still true. */
.home-price .calc { --calc-w: 9.5rem; grid-column: 2; grid-row: 1 / span 4; align-self: end; }
.home-price [data-copies="10"] { display: none; }
.home-price:has(input[value="10"]:checked) [data-copies="10"] { display: revert; }
.home-price:has(input[value="10"]:checked) [data-copies="1"] { display: none; }
@media (max-width: 30rem) {
  .home-price { gap: 0.75rem; padding-inline: 0.75rem; }
  .home-price .calc { --calc-w: 8.5rem; }
  .home-price-figure { font-size: 1.75rem; }
}

[rst-page] .home-price a { color: var(--strip-ink); }

/* When the cards come, and the way to start, with the way to read
   more beside it. */
.home-for, .home-when { max-width: 34rem; color: var(--on-soft); }
.home-start { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }

/* Why PrintCard, under the hero: four short reasons, side by side. */
.home-reasons { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.home-reasons ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) 0 0;
  border-top: 1.5px solid var(--rule);
  list-style: none;
}
.home-reasons li { display: grid; gap: 0.35rem; align-content: start; }
.home-reasons p { color: var(--on-soft); line-height: 1.5; }

/* The sample card, standing as the card page's preview stands a card
   (/fold.css): its sheet is the card opened out flat, twice as wide as
   the card, so the card standing takes about half of it. Under it, the
   side showing, between the arrows that turn it (home-sample.js). */
.home-sample { display: grid; gap: 0.75rem; justify-items: center; width: 100%; max-width: 36rem; margin: 0; justify-self: center; }
.home-sample .sheet {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4286;
  container-type: inline-size;
}
.home-sample figcaption { width: 100%; }
.home-sample-turn { display: flex; gap: 0.75rem; align-items: center; justify-content: center; color: var(--on-soft); font-size: 0.9375rem; }
.home-sample-side { min-width: 6.5em; font-weight: 700; color: var(--on); text-align: center; }
.home-sample-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--ground);
  color: var(--on);
  cursor: pointer;
}
.home-sample-arrow:hover { border-color: var(--on); }
.home-sample-arrow:focus-visible { outline: 2px solid var(--on); outline-offset: 2px; }
.home-sample-arrow .icon { width: 1.25rem; height: 1.25rem; }

.home-delete h2 {
  margin-bottom: 0.25rem;
  font: var(--display-weight) 1.6rem/1.15 var(--display);
  font-stretch: var(--display-stretch);
}

/* Sections, ruled off. */
.home-section { padding: 2rem 0 0; border-top: 1px solid var(--rule); margin-top: 1rem; }
.home-section + .home-section { margin-top: 2.5rem; }
.home-section-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; }

/* An account that has ordered: welcome, and the next card. */
.home-welcome {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  align-items: flex-end; justify-content: space-between;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0 2rem;
}
.home-welcome-head { display: grid; gap: 0.6rem; }
.home-next { display: grid; justify-items: start; }

/* Its orders, each with its card and where it has got to. */
.home-orders, .home-kept { list-style: none; margin: 0; padding: 0; }
.home-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; }
.home-order {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.25rem; align-items: start;
  padding: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius);
}
.home-order .card-preview.portrait, .home-order-blank.portrait { width: 6.5rem; }
.home-order .card-preview.landscape, .home-order-blank.landscape { width: 6.5rem; }
.home-order-blank { display: block; aspect-ratio: 5 / 7; border: 1px dashed var(--rule); }
.home-order-blank.landscape { aspect-ratio: 7 / 5; }
.home-order-text { display: grid; gap: 0.5rem; min-width: 0; }
.home-order h3 { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.home-links { font-size: 0.9375rem; }

/* Ordered, printing, posted: each named, and those reached ticked. */
.home-track { list-style: none; margin: 0.25rem 0; padding: 0; display: flex; gap: 0; font-size: 0.875rem; font-weight: 650; }
.home-track li {
  flex: 1; position: relative;
  padding-top: 1.35rem;
  color: var(--on-soft);
}
.home-track li::before {
  content: ""; position: absolute; left: 0; top: 0.2rem;
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  border: 2px solid var(--on-soft); background: var(--ground);
  box-sizing: border-box; z-index: 1;
}
.home-track li + li::after {
  content: ""; position: absolute; top: 0.6rem; right: calc(100% - 0.2rem); width: calc(100% - 1rem);
  height: 2px; background: var(--on-soft); opacity: 0.5;
}
.home-track li.done { color: var(--on); }
.home-track li.done::before { content: "✓"; display: grid; place-items: center; font-size: 0.6rem; line-height: 1; color: var(--chosen-ink); background: var(--on); border-color: var(--on); }
.home-track li.done::after { background: var(--on); opacity: 1; }
.home-track li.now { color: var(--on); }
.home-track li.now::before { border-color: var(--on); box-shadow: inset 0 0 0 2px var(--ground), inset 0 0 0 5px var(--on); }
.home-track li[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* The account's balance, and what a card costs, at the foot. */
.home-foot {
  display: grid; gap: 0.35rem;
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--on-soft); font-size: 0.9375rem;
}

/* Kept cards, to order again. */
.home-kept { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: end; }
.home-kept li { display: grid; gap: 0.5rem; justify-items: start; max-width: 12rem; }
.home-kept .card-preview.portrait { width: 8rem; }
.home-kept .card-preview.landscape { width: 11rem; }
.home-kept-title { font-weight: 650; overflow-wrap: anywhere; }
.home-kept .home-links { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

@media (max-width: 48rem) {
  .home-hero { grid-template-columns: 1fr; grid-template-areas: "title" "card" "text"; }
  .home-sample { max-width: 28rem; }
}
@media (max-width: 30rem) {
  .home-order { grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 0.9rem; }
  .home-order .card-preview.portrait, .home-order .card-preview.landscape, .home-order-blank { width: 4.5rem !important; }
}

/* Order again, beside See the order: a form, so a button, looking as
   the link beside it does. */
.home-again { display: inline; }
.home-link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }