/* Landing page (server/site/home.ts). Tokens and rack parts come from theme.css; header, footer, rack, FAQ from site.css. */
.section { padding: 88px 0; }
.section-title + * { margin-top: 30px; }
.section-title + .section-lead { margin-top: 14px; }
.section-lead + * { margin-top: 28px; }

/* ---------- hero: a header card and a rack of five products, all wearing one name ---------- */
.hero { padding: 36px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr); gap: 44px; align-items: start; }
.hero-sign .header-card { padding: 52px 38px 34px; }
.hero h1 { font-size: clamp(46px, 4.7vw, 70px); line-height: 0.9; }
.hero-sub { margin-top: 20px; max-width: 48ch; font-size: 19px; line-height: 1.45; font-weight: 500; color: #2a2c30; }
.hero-form { margin-top: 28px; display: flex; gap: 8px; padding: 7px; border-radius: 14px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 0.12), inset 0 0 0 1.5px #121316; }
.hero-form input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0 14px; font-size: 19px; font-weight: 650; color: #121316; }
.hero-form input::placeholder { color: #6b717b; font-weight: 500; }
.hero-form input:focus { outline: none; }
.hero-form:focus-within { box-shadow: 0 1px 1px rgb(0 0 0 / 0.12), inset 0 0 0 2px #121316, 0 0 0 4px rgb(255 255 255 / 0.65); }
.hero-form .button { height: 52px; }

.hero-rack { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 20px; }
.hero-rack > li { grid-column: span 2; }
.hero-rack > li:nth-child(4) { grid-column: 2 / span 2; }
.hero-rack .product-img { aspect-ratio: 6 / 5; }
.hero-rack .product-body { padding: 10px 16px 16px; }
.hero-rack .product-body h2 { font-size: 16.5px; }
.hero-rack .hang.is-loading .product-img img { opacity: 0.55; filter: blur(2px); }
.hero-rack .product-img img { transition: opacity 220ms ease, filter 220ms ease; }
/* First visit: the products are hung one after another and settle on their pegs. */
@media (prefers-reduced-motion: no-preference) {
  .hero-rack > li { animation: hang-on 760ms var(--ease-out) both; animation-delay: calc(140ms + var(--i) * 70ms); }
  .hero-sign { animation: hang-on 700ms var(--ease-out) both; --swing: 1.2deg; transform-origin: 50% 16px; }
}
@keyframes hang-on {
  0% { opacity: 0; transform: translateY(-14px) rotate(0); }
  30% { opacity: 1; transform: translateY(0) rotate(var(--swing, 2.2deg)); }
  58% { transform: rotate(calc(var(--swing, 2.2deg) * -0.5)); }
  80% { transform: rotate(calc(var(--swing, 2.2deg) * 0.18)); }
  100% { opacity: 1; transform: none; }
}

/* ---------- from the message to the printer: the instructions on the back of the pack ---------- */
.how-card { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 36px 0 0; counter-reset: how; }
.how-card li { display: flex; flex-direction: column; gap: 10px; padding: 8px 32px 32px; counter-increment: how; }
.how-card li + li { border-left: 1.5px dashed var(--line); }
.how-img { display: block; aspect-ratio: 3 / 2; margin-bottom: 10px; border-radius: 3px; overflow: hidden; background: var(--card-2); }
.how-img img { width: 100%; height: 100%; object-fit: contain; }
.how-img.photo img { object-fit: cover; }
.how-card h3 { font-size: 24px; font-stretch: 80%; font-weight: 850; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.how-card h3::before { content: counter(how); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); font-size: 16px; font-stretch: 75%; }
.how-card p { color: var(--ink-2); max-width: 40ch; }

/* ---------- aisles: five category tags, two big and three small ---------- */
.aisle-rack { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 22px; }
.aisle-card { grid-column: span 2; }
.aisle-card.big { grid-column: span 3; }
.aisle-card .tag { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.aisle-img { display: grid; place-items: center; aspect-ratio: 6 / 5; padding: 0 12px; }
.aisle-card.big .aisle-img { aspect-ratio: 16 / 10; }
.aisle-img img { width: 100%; height: 100%; object-fit: contain; }
.aisle-img.photo { padding: 0 12px; }
.aisle-img.photo img { object-fit: cover; border-radius: 3px; }
.aisle-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.aisle-body h3 { font-size: 26px; font-stretch: 78%; font-weight: 850; text-transform: uppercase; line-height: 0.95; }
.aisle-body > span { color: var(--muted); font-size: 15px; }
.aisle-body .aisle-count { color: var(--ink); font-weight: 700; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .aisle-card:hover { animation: swing 900ms var(--ease-out); --swing: 1.1deg; } .aisle-card:hover h3 { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 5px; } }
.see-all { margin-top: 36px; }

/* ---------- bulk: a class list beside its rack of tags ---------- */
.bulk-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.bulk-copy > p { margin-top: 16px; max-width: 42ch; font-size: 18px; color: var(--board-muted); }
.list-hang { margin-top: 30px; max-width: 320px; transform-origin: 50% 15px; transform: rotate(-1.5deg); }
.class-list { padding: 34px 26px 22px; }
.class-list-head { font-weight: 800; font-size: 15px; padding-bottom: 10px; border-bottom: 1.5px dashed var(--line); }
.class-list ol { margin: 10px 0 0; padding-left: 1.6em; font-size: 18px; font-weight: 600; line-height: 1.75; font-variant-numeric: tabular-nums; }
.class-list li::marker { color: var(--muted); font-weight: 500; font-size: 15px; }
.bulk-rack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; }
.bulk-tag { display: flex; flex-direction: column; padding-top: 28px; padding-bottom: 10px; }
.bulk-tag img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.bulk-tag span { padding: 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- channels: photos as prints on the board ---------- */
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; }
.channel.wide { grid-column: span 2; }
.channel-tag { display: flex; flex-direction: column; height: 100%; }
.channel.wide .channel-tag { flex-direction: row; align-items: stretch; padding-top: 0; }
.channel.wide .channel-tag { padding: 30px 0 0; }
.channel-img { display: block; aspect-ratio: 3 / 2; margin: 0 12px; border-radius: 3px; overflow: hidden; }
.channel.wide .channel-img { flex: 1.3; aspect-ratio: auto; min-height: 300px; margin: 0 0 12px 12px; }
.channel-img img { width: 100%; height: 100%; object-fit: cover; }
.channel-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 22px 24px; }
.channel-copy h3 { font-size: 24px; font-stretch: 80%; font-weight: 850; text-transform: uppercase; line-height: 0.98; }
.channel-copy p { color: var(--ink-2); }

/* ---------- pricing: two tags, the plan on yellow card stock ---------- */
.plans { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; max-width: 940px; align-items: start; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 44px 34px 32px; }
.plan h3 { font-size: 34px; }
.plan-price { font-size: 16px; font-weight: 600; color: var(--muted); }
.plan.featured .plan-price { color: #2a2c30; }
.plan-price .sign { display: inline-block; margin-right: 6px; font-size: 74px; color: var(--ink); vertical-align: -0.12em; font-variant-numeric: tabular-nums; }
.plan-note { color: var(--ink-2); }
.plan.featured .plan-note { color: #2a2c30; }
.plan ul { list-style: none; padding: 16px 0 0; margin: 6px 0 14px; display: flex; flex-direction: column; gap: 11px; border-top: 1.5px dashed var(--line); }
.plan.featured ul { border-top-color: rgb(18 19 22 / 0.3); }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-weight: 550; }
.plan li svg { flex: none; margin-top: 3px; }
.plan .button:not(.primary) { border-color: var(--ink); }
.plan-hang:nth-child(2) { margin-top: 28px; }

/* ---------- blog teaser ---------- */
.teaser-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.teaser-lead .tag { display: flex; flex-direction: column; text-decoration: none; }
.teaser-img { display: block; aspect-ratio: 15 / 8; margin: 0 12px; border-radius: 3px; overflow: hidden; background: var(--card-2); }
.teaser-img img { width: 100%; height: 100%; object-fit: contain; }
.teaser-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 24px 24px; }
.teaser-body h3 { font-size: 26px; font-stretch: 85%; font-weight: 800; line-height: 1.08; }
.teaser-body > span:not(.meta) { color: var(--ink-2); }
.teaser-list { list-style: none; margin: 0; padding: 4px 24px; border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: 0 1px 1px rgb(0 0 0 / 0.12); }
.teaser-list li + li { border-top: 1.5px dashed var(--line); }
.teaser-list a:not(.button) { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; text-decoration: none; }
.teaser-list h3 { font-size: 19px; font-weight: 720; line-height: 1.25; }
.teaser-list a:not(.button):hover h3 { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.teaser-all { padding: 18px 0 20px; }
@media (hover: hover) and (pointer: fine) { .teaser-lead:hover { animation: swing 900ms var(--ease-out); --swing: 1deg; } }

/* ---------- FAQ: heading beside the answers ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.faq-grid .section-title + * { margin-top: 0; }

/* ---------- final call to action ---------- */
.final { padding-top: 24px; }
.final-hang { width: fit-content; max-width: 100%; }
.final-card { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 64px 52px 52px; }
.final-card h2 { font-size: clamp(40px, 5.4vw, 80px); max-width: 15ch; }

/* ---------- reveal on scroll: hung in place, not slid in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- small screens: single column, racks scroll sideways ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-sign { max-width: 680px; }
  .bulk-grid, .faq-grid, .teaser-grid { grid-template-columns: 1fr; gap: 32px; }
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .plan-hang:nth-child(2) { margin-top: 0; }
}
@media (max-width: 860px) {
  .hero-rack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; gap: 16px; margin: 0 -24px; padding: 26px 24px 18px; scrollbar-width: none; }
  .hero-rack > li { flex: 0 0 min(230px, 62vw); scroll-snap-align: start; }
  .how-card { grid-template-columns: 1fr; }
  .how-card li + li { border-left: none; border-top: 1.5px dashed var(--line); padding-top: 26px; }
  .aisle-rack { grid-template-columns: 1fr 1fr; }
  .aisle-card, .aisle-card.big { grid-column: auto; }
  .aisle-card.big:first-child { grid-column: 1 / -1; }
  .channel-grid { grid-template-columns: 1fr; }
  .channel.wide { grid-column: auto; }
  .channel.wide .channel-tag { flex-direction: column; padding-top: 30px; }
  .channel.wide .channel-img { margin: 0 12px; aspect-ratio: 3 / 2; min-height: 0; flex: none; }
  .bulk-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .hero { padding-top: 22px; }
  .hero-sign .header-card { padding: 42px 22px 24px; }
  .hero h1 { font-size: clamp(42px, 12.5vw, 60px); }
  .hero-sub { font-size: 17px; }
  .hero-form { flex-direction: column; }
  .hero-form input { height: 50px; }
  .hero-form .button { width: 100%; }
  .hero-rack { margin: 0 -16px; padding: 26px 16px 18px; scroll-padding-inline: 16px; }
  .hero-rack > li { flex-basis: 58vw; }
  .how-img { aspect-ratio: 16 / 9; }
  .aisle-rack { grid-template-columns: 1fr; }
  .aisle-card.big:first-child { grid-column: auto; }
  .final-card { padding: 48px 24px 28px; }
  .plan { padding: 40px 24px 26px; }
  .plan-price .sign { font-size: 60px; }
}

/* At rest, a rack is never perfectly square: a couple of cards hang a degree off true. */
@media (min-width: 861px) {
  .hero-rack > li:nth-child(2) { rotate: 1.4deg; }
  .hero-rack > li:nth-child(4) { rotate: -1.1deg; }
  .bulk-rack > li:nth-child(3n + 2) { rotate: -1.2deg; }
  .aisle-card:nth-child(4) { rotate: 0.8deg; }
}