/* The home page as a shop (pages/index.html; owner, 4 Oct 2026): flat like the product page (css/produs.css, which is not
   loaded here: its sticky bar rule is for product pages only), the site's tokens, rectangular buttons, no tinted panels
   except the price band. Loaded after site.css. */

/* hero: the words beside a photo of a printed book */
.hh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(8px, 2vw, 28px); }
.hh__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hh .h1 { font-size: clamp(34px, 3.7vw, 50px); }
.hh .hero__subtitle { margin-top: -6px; font-size: clamp(20px, 1.9vw, 26px); }
.hh .lead { font-size: 17px; }
.hh__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 4px 0 0; }
.hh__price b { font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 1; color: var(--navy); }
.hh__price span { font-size: 15px; font-weight: 600; color: var(--text-3); }
.hh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hh__cta, .shop__btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--navy); color: #fff; font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; transition: background-color 140ms ease; }
.hh__cta { height: 52px; padding: 0 34px; font-size: 16px; }
.hh__cta:hover { background: var(--navy-3); }
.hh__art { margin: 0; border-radius: 16px; overflow: hidden; background: var(--mist); box-shadow: 0 2px 6px rgba(60, 40, 20, 0.08), 0 18px 40px rgba(60, 40, 20, 0.12); }
.hh__art img { width: 100%; aspect-ratio: 1400 / 933; object-fit: cover; }

/* the books */
.shop__head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 36px; text-align: center; }
.shop__head .sub { max-width: 34em; }
.shop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: 0; padding: 0; list-style: none; }
.shop__card { display: flex; flex-direction: column; height: 100%; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 8px 24px rgba(20, 30, 60, 0.07); color: var(--navy); text-decoration: none; transition: box-shadow 160ms ease, transform 160ms ease; }
.shop__card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 30, 60, 0.08), 0 14px 32px rgba(20, 30, 60, 0.12); }
.shop__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.shop__body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 14px 16px; text-align: center; }
.shop__name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.shop__text { flex: 1; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.shop__price { margin-top: 6px; font-weight: 700; font-size: 15px; }
.shop__btn { align-self: stretch; height: 42px; margin-top: 10px; font-size: 14px; }
.shop__card:hover .shop__btn { background: var(--navy-3); }
.shop__all { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin: 32px 0 0; }

/* why: a printed page beside four short reasons */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.why__art { margin: 0; border-radius: 16px; overflow: hidden; }
.why__art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.why__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }

/* the one tinted band: the prices */
.home-band { padding-block: clamp(48px, 6vw, 80px); background: var(--mist); }
.home-band .head { margin-bottom: 36px; }

@media (max-width: 900px) {
  .hh, .why { grid-template-columns: 1fr; }
  .hh__art { max-width: 520px; order: -1; }
  .hh { padding-top: 16px; }
}
@media (max-width: 720px) {
  .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop__body { padding: 10px 10px 12px; }
  .shop__name { font-size: 15px; }
  .shop__text { font-size: 13px; }
  .shop__btn { height: 38px; font-size: 13px; }
  .hh__cta { align-self: stretch; }
  .hh__actions { width: 100%; flex-direction: column; align-items: stretch; text-align: center; }
  .traits { grid-template-columns: 1fr; }
}

/* the four steps, flat: one white card each, no tilt, no colours of their own (site.css .step is the old fan) */
.hsteps .steps { padding-bottom: 0; }
.hsteps .step, .hsteps .step:nth-child(n) { rotate: none; translate: none; background: var(--surface); color: var(--navy); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); }
.hsteps .step__icon, .hsteps .step:nth-child(n) .step__icon { width: 44px; height: 44px; background: none; box-shadow: inset 0 0 0 1.5px var(--navy); }
.hsteps .step__icon svg { width: 22px; height: 22px; }
.hsteps .step__n { font-size: 36px; opacity: 0.18; }
.hsteps .step__top { margin-bottom: 14px; }
.hsteps .step__title { font-size: 19px; font-weight: 600; }
.hsteps .step__text { font-size: 14.5px; color: var(--text-2); opacity: 1; }
@media (max-width: 720px) { .shop__all .more { text-align: center; } .hsteps .step__top { margin-bottom: 6px; } }

/* the hero on the site's one tint, ending in a soft wave instead of a hard line (owner, 5 Oct 2026) */
.hh { position: relative; isolation: isolate; padding-block: clamp(28px, 4vw, 60px) clamp(48px, 6vw, 88px); }
.hh::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--mist);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V22C1260 46 1080 6 900 20S540 46 360 26S120 8 0 24Z'/%3E%3C/svg%3E") bottom / 100% 48px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 46px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V22C1260 46 1080 6 900 20S540 46 360 26S120 8 0 24Z'/%3E%3C/svg%3E") bottom / 100% 48px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 46px) no-repeat; }