/* The Aviation Point: the shop (build/shop.py). Loaded by /shop/ and by the band at the bottom of /jobs/.
   Brand: brand/identity/README.md. Tokens come from styles.css; no glass, no gradients, no capsules, shadows short and
   soft (8px of blur at most). Pictures: build/shop_visuals.py, WebP with width and height, so nothing moves on load. */

/* hero: ink, the fuselage barrel of the home page, then a strip of what is in the shop */
.shop-hero { background: var(--ink); padding: 0 0 clamp(28px, 4vw, 48px); }
.shop-hero-top { position: relative; overflow: hidden; padding: clamp(48px, 6.5vw, 84px) 0 clamp(30px, 4vw, 44px); }
.shop-hero-top .container { position: relative; }
.shop-hero-copy { max-width: 760px; }
/* the fuselage barrel of the home page (assets/structure.js), beside the copy and never behind it */
.shop-hero-cv { position: absolute; top: 0; right: 0; width: 46%; height: 100%; display: block; }
@media (min-width: 761px) { .shop-hero-copy { max-width: min(760px, 54%); } }
@media (max-width: 760px) { .shop-hero-cv { display: none; } }
.shop-hero .kicker { color: var(--on-dark-muted); margin-bottom: 14px; }
.shop-hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 3.9rem); line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 20px; max-width: 15ch; color: #fff; }
.shop-hero h1 .brand-dot { width: 0.2em; height: 0.2em; margin-left: 0.04em; }
.shop-lead { margin: 0; max-width: 56ch; color: var(--on-dark); font-size: 1.0625rem; line-height: 1.55; }
.shop-routes { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; max-width: 760px; border-top: 1px solid var(--ink-3); }
.shop-routes li { border-bottom: 1px solid var(--ink-3); }
.shop-routes a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 13px 4px 13px 2px; color: #fff; font-weight: 600; font-size: 0.98rem; text-decoration: none; }
.shop-routes a > span { font: 500 0.72rem/1 var(--mono); color: var(--on-dark-muted); }
.shop-routes a::after { content: "\2193"; color: var(--accent); transition: transform .12s ease; }
.shop-routes a:hover { background: var(--ink-2); }
.shop-routes a:hover::after { transform: translateY(2px); }
.shop-hero :focus-visible { outline-color: var(--accent); }
.shop-state { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 22px 0 0; max-width: 56ch; color: var(--on-dark-muted); font-size: 0.9rem; line-height: 1.5; }
.shop-soon { display: inline-flex; align-items: center; gap: 8px; font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
.shop-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.shop-hero .shop-soon { color: #fff; }
.shop-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.shop-strip a { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-lg); background: var(--bg-2); color: var(--ink); text-decoration: none; overflow: hidden; }
.shop-strip a:hover { background: #fff; }
.shop-strip-img { display: flex; align-items: flex-end; justify-content: center; height: 150px; padding: 16px 12px 0; }
.shop-strip-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.shop-strip-cap { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 13px; }
.shop-strip-cap b { font-weight: 700; font-size: 0.92rem; line-height: 1.25; }
.shop-strip-cap small { font: 500 0.68rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* sections: the head across the top, the things below it */
.shop-sec { padding: clamp(44px, 6vw, 80px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 12px); }
.shop-hero + .shop-sec { border-top: 0; }
.shop-sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(24px, 3.2vw, 40px); }
.shop-n { display: block; font: 500 0.72rem/1.6 var(--mono); color: var(--muted); margin-bottom: 6px; }
.shop-sec-head h2, .shop-half h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; color: var(--ink); }
.shop-sec-head p { margin: 0; max-width: 58ch; color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* cards */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.shop-card { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 18px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--bg); scroll-margin-top: calc(var(--header-h) + 12px); }
.shop-kind { margin: 0 0 8px; font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.shop-card h3, .shop-book h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.shop-text { margin: 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }
.shop-more { margin: 10px 0 0; font-size: 0.9rem; }
.shop-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: auto; padding-top: 18px; }
.shop-price { font: 600 1.25rem/1.1 var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.shop-ghost { display: inline-flex; align-items: center; padding: 9px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); font-weight: 600; font-size: 0.9375rem; line-height: 1.2; }
.shop-free { background: var(--accent-soft); border-color: transparent; }
.shop-free .shop-ghost { border-color: var(--accent); color: var(--accent-ink); }
.shop-card.is-live, .shop-book.is-live { border-color: var(--ink); }

/* books: each one a paperback in three-quarter view, all at one scale, standing on the same line */
.shop-books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.shop-book { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 12px); }
.shop-book-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 360px; padding: 0 16px 14px; background: var(--bg-2); }
.shop-book-stage img { display: block; max-width: 100%; height: auto; }
.shop-tag { position: absolute; top: 14px; left: 14px; padding: 5px 9px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.shop-book-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px; border-top: 1px solid var(--line); }
.shop-book h3 { font-size: 1.15rem; }
.shop-book.is-school .shop-kind { color: var(--ink); }
.shop-book.is-school .shop-kind::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--accent); }
.shop-book h3 .shop-edition { display: block; margin-top: 5px; font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.shop-price-line { flex: 0 0 100%; margin: 0; color: var(--muted); }
.shop-price-note { font: 500 0.78rem/1.4 var(--mono); letter-spacing: -0.01em; color: var(--muted); }
/* 10-11: a book's launch price and the price it goes to after launch, both plain (never struck out) */
.shop-price-launch { font: 500 0.78rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.shop-price-after { font: 500 0.85rem/1.4 var(--mono); letter-spacing: -0.01em; color: var(--text-2); }
.shop-books-note { margin: 18px 0 0; max-width: 70ch; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

/* the advert inside a book's card (item "ad"): what the book holds; periwinkle fill, ink on it */
.shop-ad { margin: 16px 0 2px; padding: 16px 18px 18px; border-radius: var(--radius); background: var(--accent); color: var(--ink); }
.shop-ad-h { margin: 0 0 8px; font-size: clamp(1.35rem, 1rem + 1.3vw, 1.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
.shop-ad-t { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* the waiting list of a book that is not out: the button, then a short form under it */
.shop-notify-foot { padding-top: 16px; }
/* the home page: no price, one small link to the card of the book in /shop/ */
.shop-seeprice-foot { padding-top: 16px; }
.shop-seeprice { padding: 8px 14px; font-size: 0.875rem; }
.shop-notify-btn { white-space: normal; text-align: left; text-wrap: balance; }
.shop-notify-btn[hidden], .shop-notify[hidden] { display: none; }
.shop-notify { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.shop-notify-l { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.shop-notify-in { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; }
.shop-notify-in:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.shop-notify-consent { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.8rem; line-height: 1.45; color: var(--text-2); }
.shop-notify-consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); }
.shop-notify-consent a, .shop-notify-msg a { color: var(--accent-ink); }
.shop-notify-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.shop-notify-send { align-self: flex-start; }
.shop-notify-msg { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--text-2); }
.shop-notify-msg:empty { display: none; }
.shop-notify.is-sent > :not(.shop-notify-msg) { display: none; }

/* a wide book (item "wide") takes the whole row, the cover beside the words; the others come three to a row (two under 1100 px, one under 700 px) */
.shop-book.is-wide { grid-column: 1 / -1; flex-direction: row; }
.shop-book.is-wide .shop-book-stage { flex: none; width: 34%; height: auto; min-height: 340px; align-items: center; padding: 28px 16px; }
.shop-book.is-wide .shop-book-body { justify-content: center; padding: 28px clamp(24px, 4vw, 56px); border-top: 0; border-left: 1px solid var(--line); }

/* wall charts: framed on a wall, then free against printed */
.shop-wallband { padding: clamp(22px, 3.4vw, 44px) clamp(18px, 3.4vw, 44px) clamp(20px, 2.8vw, 34px); border-radius: var(--radius-xl); background: var(--bg-2); }
.shop-wall-h { margin: 0 0 clamp(16px, 2.4vw, 28px); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.shop-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.shop-wall a { display: block; color: var(--ink); text-decoration: none; }
.shop-frame { display: block; padding: 7%; border: 5px solid var(--ink); background: #fff; box-shadow: 0 2px 3px rgba(18, 20, 19, 0.14), 0 8px 8px -4px rgba(18, 20, 19, 0.22); transition: transform .15s ease; }
.shop-frame img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--line); }
.shop-wall a:hover .shop-frame { transform: translateY(-3px); }
.shop-wall-cap { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
.shop-wall-cap small { font: 500 0.68rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.shop-wall-cap b { font-weight: 700; font-size: 0.98rem; line-height: 1.25; }
.shop-wall a:hover b { color: var(--accent-ink); }
.shop-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.shop-sizes { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 16px; }
.shop-sizes svg { display: block; flex: none; max-width: 100%; height: auto; }
.shop-sizes ul { list-style: none; margin: 0; padding: 0; font: 500 0.74rem/1.7 var(--mono); color: var(--text-2); }

/* everything offline: the drawing and the pack */
.shop-offline { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.shop-offline-art { margin: 0; padding: clamp(10px, 2vw, 22px); border-radius: var(--radius-xl); background: var(--bg-2); }
.shop-offline-art img { display: block; width: 100%; height: auto; }

/* merch: the pointing T-shirt first, then the collection */
.shop-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 3vw, 44px); align-items: center; padding: clamp(16px, 2.6vw, 32px); border-radius: var(--radius-xl); background: var(--bg-2); }
.shop-feature-img img, .shop-feature-detail img { display: block; width: 100%; height: auto; }
.shop-feature-detail { margin-top: 18px; }
.shop-feature-detail img { border-radius: var(--radius); }
.shop-feature-copy h3 { margin: 0 0 12px; font-size: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
.shop-feature-copy p:not(.shop-kind) { margin: 0 0 10px; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.shop-merch { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.shop-mtile { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; }
.shop-mtile img { display: block; width: 100%; height: auto; }
.shop-mtile p { margin: 0; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.shop-mtile b { display: block; color: var(--ink); font-weight: 700; font-size: 0.9rem; line-height: 1.25; }
.shop-mtile span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.shop-card.shop-wide { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
.shop-wide > :not(.shop-foot) { grid-column: 1; }
.shop-wide .shop-foot { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; }

/* Premium and Support, side by side */
.shop-halves { border-top: 1px solid var(--line); }
.shop-halves-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.shop-half { padding: clamp(40px, 5vw, 64px) 0; border-top: 0; }
.shop-half .shop-icon { display: block; width: 56px; height: 56px; margin-bottom: 14px; }
.shop-half h2 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); margin-bottom: 8px; }
.shop-half-intro { margin: 0 0 18px; max-width: 48ch; color: var(--muted); font-size: 0.98rem; line-height: 1.55; }
.shop-half .shop-grid { grid-template-columns: minmax(0, 1fr); }

/* questions and notice */
.shop-faq { border-top: 1px solid var(--line); }
.shop-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.shop-faq .section-head { margin: 0; position: sticky; top: calc(var(--header-h) + 20px); }
.shop-notice { padding: 0 0 clamp(44px, 6vw, 72px); }
.shop-notice .container > * { max-width: 72ch; }
.shop-notice h2 { margin: 0 0 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 1rem; letter-spacing: 0; }
.shop-notice p { margin: 0 0 8px; font-size: 0.92rem; color: var(--muted); }
.shop-notice .shop-rev { margin-top: 14px; font: 500 0.72rem/1.6 var(--mono); }

/* the band at the bottom of /jobs/ */
.shop-band { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(24px, 3.4vw, 38px) 0; }
.shop-band-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; }
.shop-band-in > div { max-width: 74ch; }
.shop-band h2 { margin: 4px 0 6px; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
.shop-band p { margin: 0; color: var(--text-2); }
.shop-band .kicker { margin: 0; }

@media (max-width: 1100px) {
  .shop-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-book { grid-column: auto; }
  .shop-book.is-wide .shop-book-stage { width: 38%; min-height: 320px; }
  .shop-book.is-wide .shop-book-body { padding: 24px 28px; }
  .shop-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-strip li:nth-child(n+5) { display: none; }
  .shop-merch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shop-sec-head, .shop-offline, .shop-feature, .shop-faq-in, .shop-halves-in { grid-template-columns: minmax(0, 1fr); }
  .shop-faq .section-head { position: static; }
  .shop-half + .shop-half { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .shop-hero-top { padding: 40px 0 28px; }
  .shop-routes { grid-template-columns: minmax(0, 1fr); }
  .shop-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .shop-strip li:nth-child(n+4) { display: none; }
  .shop-strip-img { height: 108px; padding: 12px 8px 0; }
  .shop-strip-cap { padding: 8px 10px 10px; }
  .shop-strip-cap b { font-size: 0.8rem; }
  .shop-books { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shop-book { grid-column: auto; flex-direction: row; }
  .shop-book-stage { flex: none; width: 40%; height: auto; min-height: 0; align-items: center; padding: 34px 8px 14px; }
  .shop-book-stage img { zoom: 0.6; }
  .shop-tag { top: 8px; left: 8px; }
  .shop-book-body { padding: 14px; border-top: 0; border-left: 1px solid var(--line); justify-content: flex-start; }
  .shop-book.is-wide { flex-direction: column; }
  .shop-book.is-wide .shop-book-stage { width: auto; min-height: 0; padding: 40px 8px 18px; }
  .shop-book.is-wide .shop-book-stage img { zoom: 0.8; }
  .shop-book.is-wide .shop-book-body { padding: 14px; border-top: 1px solid var(--line); border-left: 0; justify-content: flex-start; }
  .shop-wallband { padding: 18px 16px 16px; }
  .shop-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .shop-plans, .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-merch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-card.shop-wide { display: flex; align-items: stretch; }
  .shop-wide .shop-foot { margin-top: auto; padding-top: 18px; }
  .shop-band-in { align-items: flex-start; }
}