Shared build brief for every homepage concept

You are building ONE fully working homepage concept for Play Away Cards (playawaycards.com), an American Mahjong lifestyle brand on Shopify Basic. The standard is Awwwards Site of the Day and a Webby in ecommerce, and it must convert on a phone. Read this whole file before writing code. Everything here is a hard requirement unless marked "guidance".

Source documents (read them, in this order): pac-redesign-brief.md (sections 3, 9, 10, 13 are non-negotiable), pac-homepage-concepts.md (C1 to C7 are the starting brief per section, not the ceiling), assets/INVENTORY.md (what photography exists and what does not).

Deliverable

• One self-contained file: concepts/0N-<slug>/index.html (N and slug are given in your task). Inline <style> and inline <script>. Vanilla JS only. No frameworks, no build step, no external dependencies except Google Fonts (<link rel="preconnect"> to fonts.googleapis.com and fonts.gstatic.com, then one stylesheet link with display=swap).
• Images come ONLY from ../shared/img/ (relative path from your index.html). Never link to assets/, never hotlink the Shopify CDN, never use stock or AI images, never ship a broken image.
• Also write concepts/0N-<slug>/NOTES.md: thesis, art-direction decisions, fonts and accent hex, the single motion moment, every assumption, anything you could not do honestly with the available photography and how you handled it.
• Do not share code, CSS, or copy structure with any other concept. You have not seen the other concepts. Build from scratch.

Page structure (fixed order, every section present, one job each)

1. Announcement bar: two messages max, static (no rotation, no animation). Messages: "Free shipping on orders over $85" and "The fall sweater drop ships October 1".
2. Header: logo (use the real roundel or arched wordmark from the working set), six nav items: Sweaters & Apparel (/collections/apparel), Mahjong Cards (/collections/mahjong-cards), Bundles & Gifts (/collections/bundles-gifts), Accessories (/collections/accessories), Learn to Play (/blogs/news), About (/pages/about-us). Search and cart icons with a count. Mobile: a full-screen drawer with the six items at 48px tap height and a "Shop the sweater" tile at the top. Sticky on mobile is allowed but keep announcement plus header under 112px total on a 375px screen.
3. Hero: static. The MAHJ Knit Sweater is the first product visible. One H1 (the only H1 on the page), one supporting line, one primary CTA to /collections/apparel or /products/mahj-knit-sweater, one secondary text link to /collections/mahjong-cards. No carousel, no slideshow, no video.
4. Shop by category: four tiles (Sweaters, Cards, Bundles & Gifts, Accessories), real photography, one line of copy each, linking to the collections above.
5. The sweater colorway wall: all seven live colorways. Each tile deep-links to /products/mahj-knit-sweater?variant=<id> using the real ids below. Show "From $95" and "Sizes S to XXL". One CTA. This is where the page spends its boldness.
6. Complete your table (bundle ladder): three tiers visible at once as a price ladder, Complete Set is the default/highlighted: Cards only $62.95; Complete Set (cards, four racks, rack bag) $85 to $100 labelled "Most tables"; Table Set $165 labelled "The gift", compare-at $199.90 (component total, struck through). Include a plain "what's in the box" list for the Complete Set and Table Set. One CTA per tier. On mobile the tiers may be a horizontal snap row with the middle tier landing first, or stacked; either way all three prices are visible without hunting.
7. Choose your edition: five editions in this order: Beach, Classic, Modern, Texas, Summit. Horizontal scroll on mobile with a partial next item visible (peek), no arrows. Each at $62.95 with one positioning line. Use the consistent open-tray set (*-edition-open-tray.webp) or the box set (*-edition-box.webp) so the row reads as one series. Beach line: "The one Etsy can't keep in stock".
8. Cards, not tiles plus Learn to play: an H2 comparison (Play Away Cards vs a tile set) with rows: weight (12 oz vs 8 to 10 lb), setup (deal a hand vs build four walls), fits in (a purse vs a suitcase), price (from $62.95 vs $150 to $400), readability (large corner indices vs small engravings). Keep the three original benefits as H3 microcopy in the voice: "Easy to read", "Easy to learn", "Easy to take". Directly beneath: two Learn to play cards, "Traditional" (/blogs/news/how-to-play-traditional-american-mahjong, "12 min read") and "Quick Play" (/blogs/news/how-to-play-quick-play-format, "4 min read"). Not three icons in a row with a sentence each.
9. Social proof: the six placeholder reviews below, each element carrying data-placeholder="review". Mix in real customer-style photos from the working set (the travel fan series, the floral table, the kitchen table). No carousel. Section header may show "4.9 from 212 reviews" with data-placeholder="aggregate".
10. Email capture: above the footer, with the incentive "Get first access to the fall sweater drop". One email field (labelled), one button. Trust strip beneath: "Ships from Texas", "Ships gift-ready", "30-day returns".
11. Footer: Shop (the six categories plus Gift cards /products/play-away-cards-gift-card), Help (Contact /pages/contact, Returns /pages/returns-exchanges, Shipping /pages/shipping, FAQ /pages/faq), Wholesale (/pages/wholesale), social (Instagram https://instagram.com/playawaycards), a second small newsletter field, payment icons once (simple inline SVG or text list). No raw URLs printed as text.

The Needlepoint Hat does not appear anywhere.

Hard constraints (violating any one fails the concept)

• Mobile first. Design at 375px, then adapt to 1440px. Test both.
• Exactly one <h1>. Sections are <h2>, children <h3>. No skipped levels.
• No carousels, slideshows, auto-advancing or auto-rotating anything. Horizontal scroll rows driven by the user's thumb are fine.
• Typography: exactly one display face with personality plus one workhorse sans (your task names them). Sentence case everywhere. No all-caps labels (no text-transform: uppercase on any text). Line length under 80 characters.
• Palette derived from the sweater colorways: blush #F3CFCB, navy #17264A, baby blue #6BABFF / #B9D4F5, green #387D5A / #2F6B4F, lavender #C9B7F2 / #6B4FBB, hot pink #E13086, sweater pink #E8A0BF. One accent color, used on CTAs (buttons and primary links) and nowhere else. Body text is a warm near-black or navy, never the accent. Page background is warm white (#FBF8F3 to #FFFDF9), never grey, never cream-plus-terracotta.
• Exactly one motion moment on the whole page (your task names it). Nothing else animates on scroll. No per-section fade-ins, no IntersectionObserver reveal choreography. Hover transitions on buttons are not "motion moments" but keep them under 150ms. Respect prefers-reduced-motion (disable the motion moment).
• Text over images passes 4.5:1. Tap targets at least 44x44px. No hover-dependent interactions (anything revealed on hover must also be visible or tappable).
• Copy voice: playful and warm in headlines and microcopy ("Bird Bam cheers-ing"), plain and scannable in product details (names, prices, what's in the box).

Banned patterns (delete and retry if you catch yourself)

Centered headline over a darkened stock photo. Three icons in a row with a sentence each. Cream background with terracotta buttons. Rounded-corner cards with drop shadows on everything. Gradient blobs. Glassmorphism. Bento grids. Marquee text. Anything that looks like Shopify Dawn with the colors changed. Uppercase eyebrow labels. Generic "Shop now" as the only CTA copy.

Content (identical across concepts)

Brand line candidates for the H1 (pick one or write a better one in the voice): "Mahjong, made portable." / "Dress for the table." / "Game night, anywhere."

Sweater: MAHJ Knit Sweater, from $95, sizes S to XXL, cotton knit with "MAHJ" intarsia across the chest. Seven live colorways with real variant ids (size M; use these in the deep links):

Sweater deep-link format: /products/mahj-knit-sweater?variant=44455893565492.

Editions (all $62.95, product handles are real): Beach /products/play-away-mahjong-cards-beach-edition, Classic /products/play-away-mahjong-cards-classic-edition, Modern /products/play-away-mahjong-cards-modern-edition, Texas /products/play-away-mahjong-cards-texas-edition, Summit /products/play-away-mahjong-cards-summit-edition. Each deck: 162 cards, Traditional and Quick Play guides, fits four NMJL line cards, 350gsm linen-finish paper, about 12 oz. Positioning lines: Beach "The one Etsy can't keep in stock"; Classic "The original, the one your aunt has"; Modern "Fresh lines, same game"; Texas "Boots, bluebonnets and big skies"; Summit "Skis and bears for the lodge".

Bundle ladder: Cards only $62.95 (link to the edition PDP). Complete Set $85 to $100: any edition plus four wooden racks plus canvas rack bag (link /collections/bundles-gifts). Table Set $165, compare-at $199.90: any edition, four racks, rack bag, First Lines set of four, gift wrap (link /products/table-set, a new SKU, mark the link with data-placeholder="sku"). Racks $35 (/products/wooden-card-rack-set-of-4), Rack Bag $8 (/products/canvas-drawstring-bag-for-racks), First Lines $20 (/products/first-lines-card-set-of-4).

Free shipping over $85. Ships from Texas.

Placeholder reviews (each carries data-placeholder="review"; do not invent more):

1. Caroline M., Beach Edition, 5 stars: "We brought the Beach deck to the lake house and taught three people in one night. Nobody missed the tiles."
2. Dana R., MAHJ Knit Sweater in Navy, 5 stars: "The softest thing I own, and I get stopped in the grocery store about it."
3. Priya K., Complete Set, 5 stars: "Racks were the upgrade I didn't know I needed. Cards stay put, hands stay secret."
4. Jess T., Texas Edition, 5 stars: "Bought it for my mom's group. They play every Tuesday now and text me photos."
5. Morgan L., Classic Edition, 5 stars: "Fits in my purse. I've played in an airport, on a boat, and at a wedding weekend."
6. Elena S., Modern Edition, 4 stars: "Quick Play got us going in ten minutes. The full rules came later, at our own pace."

Working set (all in concepts/shared/img/, WebP; every file also has -800.webp and -400.webp twins)

Use srcset="name-400.webp 400w, name-800.webp 800w, name.webp 1600w" with a real sizes attribute (the 400 twin is for tiles, swatches and logos rendered under about 300px), width and height attributes to prevent layout shift, real alt text describing the photo, loading="lazy" on everything below the fold, fetchpriority="high" on the hero image only (and no loading="lazy" on it). Prefer the -800 twin as the only source for small tiles (under 400px rendered). Budget: under 1.2 MB of images loaded at 375px on first paint plus lazy loads; Lighthouse mobile performance must be above 90.

Logos and graphics: logo-roundel-primary (blue ring, pink field, "PLAY AWAY MAHJONG CARDS"), logo-roundel-blue, logo-roundel-pink, logo-roundel-mahjong-cards, logo-roundel-outline (line-art roundel, good as a watermark), logo-wordmark-arch (arched "PLAY AWAY" with stars, blue on transparent), logo-wordmark-arch-ring, logo-edition-beach, logo-edition-classic, logo-edition-modern, logo-edition-texas (edition roundels), pattern-classic and pattern-texas / pattern-texas-bright (the real box patterns, 1600x900 tiles), guide-classic-suits-chart, guide-texas-suits-chart, guide-quick-play-text.

Sweater: the seven colorway files above plus mahj-knit-sweater-on-model-pair-booth (two women in green and cream sweaters at a trade-show booth; the only on-model shot in assets), mahj-knit-sweater-on-model-white-blue-storefront (one woman in the white sweater outside a shop, portrait 3:4), mahj-knit-sweater-green-sleeve-hand-fan-beach (green knit sleeve holding a card fan at the beach, portrait), mahj-knit-sweater-pink-white-folded-tile (pink sweater folded on a blue tile pattern, portrait), mahj-knit-sweater-hot-pink-blush-flat-asset (1088px alt).

Editions (all square unless noted): beach-edition-box, beach-edition-open-tray, beach-edition-cards-wicker, beach-edition-cards-scatter (4:5), beach-edition-box-green-cloth (3:4), beach-edition-suit-grid (4:5); classic-edition-box, classic-edition-open-tray, classic-edition-cards-scatter (4:5), classic-edition-cards-scatter-wood (3:4), classic-edition-card-backs-fan (4:5), classic-edition-dots-grid (4:5), classic-edition-hand-fan-ski-lodge (3:4), classic-edition-fan-floral-cloth (3:4), classic-edition-box-blue-wicker (3:4), classic-edition-open-box-with-guides (3:4); modern-edition-box, modern-edition-open-tray, modern-edition-card-stacks, modern-edition-cards-in-rack (4:5); texas-edition-box, texas-edition-open-tray, texas-edition-hand-fan-sky (3:4), texas-edition-cards-scatter (4:5), texas-edition-cards-scatter-wood (3:4), texas-edition-card-backs-fan (4:5), texas-edition-dots-grid (4:5), texas-edition-box-in-hand (4:5), texas-edition-boxes-floral-cloth, texas-edition-open-box-with-guides (3:4); summit-edition-box (1000px only), summit-edition-open-tray, summit-edition-cards-scatter.

Racks, accessories, bundle: racks-set-of-four-with-bag (4:5), rack-bag-canvas, racks-with-cards-overhead, racks-with-cards-angled, racks-stacked, racks-and-bag, rack-with-cards-linen (3:4), racks-in-play-burl-table (portrait, 1170px), racks-in-play-green-tablecloth (3:4), first-lines-fanned, first-lines-in-hand, first-lines-with-rack-and-cards, first-lines-on-blue-linen, complete-set-gift-box-thank-you (Classic in a kraft gift box with a thank-you card), two-editions-gift-box (3:4), how-to-play-box-coffee-table (3:4).

People and places: lifestyle-woman-with-rack-kitchen-table (3:4, woman smiling with a rack), lifestyle-hands-navy-table-racks (hands, racks, 1170px), lifestyle-hands-floral-tablecloth-overhead (overhead, hands dealing on floral cloth), lifestyle-flat-lay-floral-candle, lifestyle-cards-cocktails, lifestyle-racks-floral-table-hands, lifestyle-child-hands-texas-cards (3:4), lifestyle-hand-picking-card, founders-portrait, lifestyle-retail-stockist-team (3:4), lifestyle-retail-display (3:4), hero-hand-fan-scatter-wide (16:9 landscape, hand fanning cards over a scatter). Travel fan series, all 3:4 portrait, same gesture in different places: lifestyle-hand-fan-boat-ocean, lifestyle-hand-fan-boardwalk, lifestyle-hand-fan-italy-bar, lifestyle-hand-fan-philadelphia, lifestyle-hand-fan-texas-oceanfront, lifestyle-hand-fan-white-wall-vines, lifestyle-hand-fan-texas-linen, lifestyle-hand-fan-racks-linen-overhead, texas-edition-hand-fan-sky, classic-edition-hand-fan-ski-lodge.

Card faces (cards/, 1600x2489 and 800x1244, flat digital renders of real cards): texas-dot-1..9, texas-bam-1..9, texas-crack-1..9, texas-dragon-dot|bam|crack, texas-flower-1..8, texas-wind-east|west|north|south, texas-joker, texas-blank, texas-back, and the same set prefixed classic- plus classic-back. Tile SVGs for the Modern Edition in tiles/ (bam-1.svg ... see tiles/skin.json). Use card art as a graphic system if your thesis calls for it, not as wallpaper.

Known gaps (design around them, never fake them): no sweater worn at a table; no Summit lifestyle shot; no exploded Table Set or all-components shot; no First Lines in assets (CDN shots provided); no knit texture close-up. If a slot truly has no honest image, use an inline SVG placeholder in the correct aspect ratio and palette, labelled with what the photo should be, with data-placeholder="photo".

Interactions

Every action that would call Shopify in production (add to cart, variant select, colorway swap that would change the cart, email submit, newsletter submit) must console.log a descriptive line and show a small non-blocking toast (aria-live="polite") for about two seconds. Do not navigate away. Links to collections and products stay real hrefs. The mobile menu must open, close, trap focus, close on Escape.

Accessibility and semantics

<html lang="en">, a skip link to #main, landmarks (header, nav with aria-label, main, footer), visible focus states (:focus-visible with a 3px outline in the accent), form inputs with <label>, buttons that are <button>, icon-only controls with aria-label, images with meaningful alt (decorative ones alt=""), colour contrast at 4.5:1 for all text, heading outline that reads as a table of contents.

Guidance (not rules)

Baggu treats colorway as identity, Our Place shows product in use and sets first, Caraway anchors bundles, Glossier and Graza lean on real customers, Jones Road guides the choice, Aesop shows restraint. The Mahjong Line owns maximal tile color: be unmistakably not that. The homepage should read like a game night unfolding: sit down, dress for it, set the table, pick your deck, cards not tiles, table talk, join the table.

Before you finish

Open your file mentally at 375px and 1440px. Check: one H1; no uppercase; no carousel; sweater is first; all seven colorways deep-link; ladder shows three prices with Complete Set highlighted; Beach leads the edition row with a peek; six reviews marked placeholder; email above footer; hat absent; one motion moment; accent only on CTAs; every image resolves to ../shared/img/; every <img> has srcset, alt, width, height; below-fold images lazy; hero fetchpriority high. Then write NOTES.md.