# Yoro Meat Online Store — Style Reference

> A generous Japanese butcher’s storefront, combining illustrated ceremony, quiet serif typography, and vivid orange ink.

**Website:** [Yoro Meat Online Store](https://www.hidagyu-yoromeat-honten.com/)
**Original URL:** https://www.hidagyu-yoromeat-honten.com/
**Final URL:** https://www.hidagyu-yoromeat-honten.com/
**Response:** HTTP 200; original and final URLs are identical.
**Theme:** light content surfaces, a warm illustrated opening, and a saturated orange footer.
**Inspected:** supplied capture record dated October 5, 2026, 06:06:32 JST / October 4, 2026, 21:06:32.317 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current store homepage, including its illustrated opening, whole-animal promotion, ranking, product lineup, gifts, journal, news, store links, newsletter, footer, and shipping notice. Visual captures cover the desktop opening, gift transition, and footer, plus the mobile opening and lower footer. Other sections are documented through supplied rendered DOM measurements and text. Linked pages and checkout were not inspected.

Yoro Meat gives a commercial catalog the character of an illustrated Japanese shop sign. A large figure holding a ceremonial fan fills the opening composition. Paper-like grain, orange floral clothing, muted plum fabric, pale mountains, and floating slices of meat create a warm, humorous identity. A red bull emblem and calligraphic wordmark anchor the interface.

The shopping content uses a quieter register: dark brown serif text, small English captions, vertical Japanese titles, plain product links, and unusually generous gaps between sections. Gift packaging becomes an editorial spread with two tall photographs surrounding a narrow central message. The footer then becomes a broad orange field containing navigation, service links, and a large black brand mark.

This is a full ecommerce homepage with editorial and store information. Its identity depends on the relationship between expressive artwork and restrained catalog structure. Product discovery, account access, cart access, prices, delivery information, and gift links remain part of that structure.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements are CSS pixels unless stated otherwise.
- **Derived** means arithmetic applied to those measurements, such as the gap between consecutive product positions.
- **Estimated** means a visual approximation from an original-page capture. Estimated colors were not sampled with a pixel tool.
- **Recommended** means a proposed implementation choice. Breakpoints, accessible interaction patterns, and unmeasured media ratios in the Quick Start belong to this category.
- Token names are descriptive aliases. The only supplied source custom property is `--vh`, recorded as `10px` on desktop and `8.44px` on mobile.
- Computed font-family stacks are available, but font files and actual glyph fallback resolution were not independently checked.
- Element bounds alone do not establish visibility, clipping, or interaction state. This is particularly important for the overlapping mobile product panels.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Main Ink | `#231815` | `--color-ink` | **Measured:** body and most content text, from `rgb(35, 24, 21)` |
| Header Brown | `#522e03` | `--color-header-ink` | **Measured:** desktop vertical navigation, from `rgb(82, 46, 3)` |
| Active Ivory | `#f7f3eb` | `--color-active` | **Measured:** selected desktop beef category background |
| White | `#ffffff` | `--color-white` | **Measured:** desktop English masthead and primary CTA text; also visually present in the catalog region |
| Black | `#000000` | `--color-black` | **Measured:** mobile English masthead, selected category text, newsletter button text, and some news titles |
| Hero Cream | approximately `#ffe6bc` | `--color-hero` | **Estimated:** the illustrated opening’s pale peach paper; texture creates many local variations |
| Gift Paper | approximately `#f7f1e1` | `--color-paper` | **Estimated:** the cream field behind the gift composition |
| Action Vermilion | approximately `#ef3300` | `--color-action` | **Estimated:** primary pill, menu disc, and small link dots |
| Footer Orange | approximately `#df4000` | `--color-footer` | **Estimated:** the broad orange footer, visually deeper than the hero action color |
| Plum Fabric | approximately `#ae6675` | `--color-art-plum` | **Estimated, artwork only:** fan and headwear |
| Mountain Ochre | approximately `#cfc16e` | `--color-art-ochre` | **Estimated, artwork only:** layered hills and related illustration accents |
| Dark Wash | `rgba(0, 0, 0, 0.1)` | `--color-wash` | **Measured:** newsletter registration button background |

The measured `body` and `footer` backgrounds are transparent. Their visible fills therefore cannot be attributed to those elements from this record. Use the estimated surface colors as practical approximations, not recovered source declarations.

The palette has distinct jobs: orange identifies actions and the final brand field; dark brown carries reading; cream supports imagery and gift presentation. Plum and ochre belong chiefly to the illustration. They do not establish additional interface status colors.

### Theme Presets

No theme selector or alternate color theme is evidenced. White catalog areas, cream gift areas, and the orange footer are different page surfaces within the same experience. The desktop-to-mobile masthead text-color change is an observed responsive/state difference, not evidence of a theme system.

## Tokens — Typography

### Japanese Serif — Commerce and Navigation

**Measured family stack:** `'Noto Serif JP', YuMincho, '游明朝', 'Times New Roman', 'Hiragino Mincho ProN', 'HGS明朝B', 'ＭＳ Ｐ明朝', serif`.

Most content uses weight `500`; navigation, major Japanese section titles, and primary actions commonly use `600`. Serif strokes and loose tracking give the catalog a printed, deliberate rhythm. Product titles remain modest in size, allowing imagery and spacing to carry the hierarchy.

Use vertical writing selectively for section titles, navigation, promotional copy, and desktop footer groups. The product descriptions and prices remain horizontally readable.

### Latin Serif — Captions and Editorial Labels

**Measured family stack:** `CarrigDC, YuMincho, '游明朝', 'Times New Roman', 'Hiragino Mincho ProN', 'HGS明朝B', 'ＭＳ Ｐ明朝', serif`.

CarrigDC is declared for the small English masthead, uppercase section captions, package labels, journal headings, dates, and social links. These roles span very small tracked capitals and larger editorial words. A production implementation needs an available, appropriately licensed font resource; this reference does not supply a font URL.

### Brush Lettering and Brand Artwork

The hero slogan, `目利きの力で、軍配があがる。`, has irregular brush-like strokes visible in the captures. Its font or asset implementation is not supplied. The bull emblem, Japanese wordmark, and `SINCE 1972` lockup also have their own drawn character. Preserve these as authorized artwork when available; do not assign them an invented font family.

### Type Scale

| Role | Desktop measurement | Mobile measurement | Weight / tracking |
| --- | --- | --- | --- |
| Root element | `10px` | `16.64px` | Root sizing only; not the body text size |
| Body | `16px / 16px` | `13.52px / 13.52px` | `500`; normal tracking |
| English masthead | `10px / 10px` | `9.36px / 18.2px` | `700`; desktop `2px`, mobile `0.936px` tracking |
| Desktop navigation | `15px / 42px` | Labels absent from the mobile opening | `600`; `3px` tracking |
| Primary CTA label | `24px / 15px` | `14.56px / 24.96px` | `600`; `0.1em` tracking |
| Main Japanese section title | `30px / 49.5px` | `18.72px / 28.08px` | `600`; `0.3em` tracking |
| English section caption | `14px / 14px` | `10.4px / 10.4px` | `500`; `0.16em` tracking |
| Product title | `16px / 26.08px` | `12.48px / 20.3424px` | `500`; desktop `3.2px`, mobile normal tracking |
| Price paragraph | `14px / 14px` | approximately `11.49px / 11.49px` | `500`; desktop `0.7px`, mobile normal tracking |
| Category label | `14px / 36px` | `12.48px / 52px` | `500`; desktop `1.4px`, mobile `2.496px` tracking |
| Text action | `24px / 24px` | Not supplied | `500`; normal tracking |
| Gift supporting copy | `18px / 32.04px` | Not supplied | `500`; `5.4px` tracking |
| Package side label | `16px / 16px` | Not supplied | CarrigDC, `400`; `1.6px` tracking |
| Large journal label | `42px / 42px` | Not supplied | CarrigDC, `400` |
| New Journal label | `40px / 50px` | Not supplied | CarrigDC, `400`; `2px` tracking |
| News title | `18px / 28px` | Not supplied | `500`; `1.8px` tracking |
| Social link | `32px / 36px` | Not supplied | CarrigDC, `400` |

The price values above describe the sampled paragraph, not every nested numeral span. Likewise, the CTA’s measured inline label is smaller than its painted pill. Do not calculate either component’s full height solely from its text line-height.

The source’s root size changes substantially across the two viewports while body text becomes smaller. Copying desktop `rem` values into a conventional 16px-root project would therefore distort the design. The Quick Start uses explicit semantic sizes instead.

## Tokens — Spacing & Shapes

**Density:** spacious at the page level, compact within utility controls and product metadata.

### Responsive Unit

The supplied `--vh` values equal one hundredth of each viewport height. No declaration showing how the site consumes that variable is included.

Many mobile measurements are multiples of `1.04`, including `26px`, `31.2px`, and `18.72px`. This is consistent with scaling a 375px design to 390px, but the original formula and media-query boundaries are not provided. Treat that relationship as an observation, not a recovered CSS rule.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header logo left inset | `70px` | `24.95px` | Measured |
| Header logo top inset | `46px` | `26px` | Measured |
| Ranking outer inset | `96px` at first item | `41.59px` | Measured |
| Pickup category left inset | `70px` | `26px` inner text inset | Measured |
| Desktop sidebar width | `236px` | Full-width `390px` category rows | Measured |
| Sidebar-to-products gap | `64px` | Sidebar relationship removed | Derived from desktop positions |
| Pickup product column gap | `30px` | approximately `15.59px` | Derived from title/card positions |
| Pickup product row gap | `80px` | Items share one horizontal row | Derived from desktop link bounds |
| Pickup section padding | `250px` top, `300px` bottom | `156px` top and bottom | Measured |
| Title-to-English-caption gap | `38px` | approximately `19.23px` | Derived from section heading bounds |
| Journal section top padding | `240px` | Not supplied | Measured |
| Footer horizontal content inset | `120px` | approximately `41px` in lower footer | Desktop measured; mobile estimated |
| Footer padding | `280px` top, `158px` bottom | Not supplied | Measured desktop |

This spacing system includes several distinct alignments. The header, ranking, product lineup, gift spread, and footer do not all sit on one identical left edge.

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Product and editorial content | Square, unboxed structure | Sampled links have `0px` radius; broad DOM geometry supports open layouts |
| Primary CTA | Full pill | Estimated desktop size approximately `257 × 80px`; mobile approximately `166 × 52px` |
| Menu control | Circular orange disc with pale rim | Estimated diameter approximately `54px` desktop and `42px` mobile |
| Hero scroll control | Tall capsule | Measured link bounds `55 × 74px`; rounded surface visible |
| Newsletter input and submit | Rectangular | Screenshot and measured submit radius `0px` |
| Shipping notice | Small rounded rectangle | Estimated radius approximately `10px` |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Document height | `11423.45px` | `10086.86px` |
| Header logo link | `96 × 152px` at `(70, 46)` | `47.83 × 76.39px` at `(24.95, 26)` |
| Cart icon link | `20 × 22.03px` | `16 × 18.14px` |
| Account icon link | `20 × 22.55px` | `16 × 18.14px` |
| Hero CTA text | `132 × 35px` at `(646.5, 894.5)` | `80.09 × 21px` at `(154.95, 674.92)` |
| Ranking item starts | `x = 96, 520, 944px`, same `y` | `x = 41.59px`, successive vertical positions |
| Pickup title columns | `x = 370, 700, 1030px`; `300px` wide | Product links `156px` wide, beginning at `x = 26, 197.59, 369.19px` |
| Gift spread | `1260px` between outer bounds `x = 90–1350px` | Geometry not supplied |
| Gift composition | `410px` left link, `440px` center, `410px` right link; `538px` section height | Not visually captured |
| Footer | Starts at document `y = 10073.77px`; height `1349.69px` | Lower portion visually captured; complete footer bounds not supplied |

Document coordinates explain the unusually long pacing. The desktop ranking starts at `y = 2606px`, well beyond the opening viewport. The first illustrated screen should not be mistaken for the entire introduction.

## Components

### Floating Brand and Utility Header

**Anatomy:** bull-and-wordmark home link at left; small centered English masthead; circular menu control at right; account and cart utilities; six vertical desktop navigation links.

At desktop width, the home link occupies `96 × 152px`. The English masthead is only `10px`, white over the illustration. Navigation begins around `x = 1055px`, with `42px` column widths and brown text. The menu label forms a separate vertical column below the orange disc.

The gift capture retains the logo, account, cart, and menu controls near the viewport top. The footer capture does not show that header. This supports a persistent content state, but the source positioning method and hide threshold are not supplied.

On mobile, the logo becomes approximately half size, the masthead turns black, and the vertical navigation labels disappear. The menu remains at the upper right, followed by cart and account icons in a vertical stack. The open menu was not captured.

### Illustrated Opening

**Anatomy:** full-bleed textured scene, a centrally dominant ceremonial figure, a brush-lettered slogan, brand overlay, primary category link, and a desktop scroll capsule.

The desktop composition crops tightly into the figure: the hat extends beyond the top edge, the face occupies the center, the fan fills much of the left, and the slogan sits in the open right-hand field. The orange pill is centered near the bottom of the viewport.

At 390px, the slogan moves above the figure. The whole hat, more of the torso, the hand, and a large cut of meat near the bottom become visible. The CTA appears around `y = 660px`, across the figure’s lower torso. This is substantial compositional adaptation, not a uniformly scaled desktop screenshot.

`商品を探す` links to `/category/`. The desktop capsule links to `/#banduke`. Its scrolling behavior was not exercised. The internal image layers and asset source URLs are unknown.

### Whole-Animal Promotion

**Anatomy:** vertical promotional label, adjacent short title, narrow multiline copy, and a second orange action.

The DOM identifies `WEB限定`, `一頭買いセット`, explanatory copy, and `売場に行く`, which links to `/yokozunaset/`. The desktop copy rectangle is `380 × 230px`, with `16px` text, `38px` line-height, and `1.6px` tracking. The mobile copy region becomes approximately `215 × 198px`, using `12.48px` text and `23.92px` line-height.

Its tall, narrow label and copy bounds are consistent with a vertical editorial arrangement. No supplied capture directly shows this section, so its background illustration and image placement are not specified here.

### Bilingual Section Heading

**Anatomy:** compact vertical Japanese title block, generous clearance, and a small horizontal English caption.

The pattern recurs in ranking, pickup, gifts, journal, news, and stores. Four-character titles occupy approximately `99 × 78px` on desktop, while the two-character gift title occupies `49.5 × 78px`. Desktop Japanese type is `30px`, weight `600`, with `9px` tracking. English captions sit `38px` below the measured title box.

For implementation, short vertical columns can be represented by separate spans inside a `writing-mode: vertical-rl` heading. That markup is a recommendation; the supplied evidence does not include the original writing-mode declaration.

### Ranking Product Entry

**Anatomy:** large upper media allocation, horizontally readable product title below, and a separate tax-inclusive price line.

Three entries sit across the desktop page. Their title regions begin `88px` inside each measured link’s left edge. On mobile, all three entries stack vertically within approximately `307px`-wide links; title regions are inset by approximately `66.55px`.

The media-to-title allocation is large: desktop titles begin `427px` below their link’s top; the first mobile title begins approximately `325.52px` below. These are measured offsets, not measured image heights. Exact media ratios and ranking decorations are absent from the supplied captures.

Keep the product title and price in one linked content group. The DOM supports detail-page navigation, not an observed add-to-cart interaction within these entries.

### Pickup Navigation and Product Collection

**Desktop anatomy:** a `236px` category sidebar, a `64px` separation, and a product area with three `300px` title columns. Six beef entries occupy two rows in the recorded state.

Category rows are `36px` high. The selected beef row has a measured `#f7f3eb` background. Other choices include pork, processed meat, seasonings, and named brands. Product titles use spacious `0.2em` tracking; prices sit below with their own vertical clearance.

**Mobile anatomy:** `52px` category rows and `156px` product links arranged horizontally at approximately `15.6px` intervals. The third product begins at `x ≈ 369px`, and later products extend well outside the viewport.

The mobile extraction contains several category panels whose child rectangles overlap later category rows and extend beyond the section’s measured bounds. This may involve clipping or disclosure state. It does not establish that every extracted product is simultaneously visible. Horizontal arrangement is verified; swipe handling, snapping, expansion behavior, and autoplay are not.

### Text Link with Accent Dot

**Anatomy:** plain serif action text followed by a small orange dot, without a filled container.

Examples include `牛肉一覧を見る` and `一覧を見る`. Desktop text is `24px`, weight `500`. The gift link measures `153px` overall while its text measures `120px`; the beef link measures `201px` overall with `168px` of text. Both leave `33px` for the trailing decoration and separation.

Use this quieter action style after product and editorial sections. The filled pill is reserved for stronger opening actions.

### Gift Packaging Spread

**Anatomy:** tall package photograph at each side; vertical English labels on the outside edges; a centered vertical Japanese heading, English caption, two-line description, and dot link; oversized pale `GIFT` lettering behind the middle.

The outer links are each `410px` wide. A `36px` caption allocation leaves approximately `374px` for each photograph. The center spans `440px`. The left label starts at the top, while the right label is positioned lower along its outside edge.

The photographed red box uses the bull logo; the pale box carries dark Japanese lettering. Both rest at an angle on neutral backgrounds with natural shadows. The photography supplies depth while the surrounding composition stays flat.

The left and right links target `/gift/#keshobako` and `/gift/#kiribako`. The central action targets `/gift/`. Mobile arrangement is unverified.

### Journal Feature and Recent Articles

**Anatomy from desktop DOM:** centered section heading, a large featured article area, a vertical English side label, date metadata, and a lower list of recent articles.

The featured link spans `1118px` from `x = 202px`, beside a `42px`-wide `Pick Up Journal` label at `x = 120px`. Below it, a `160px` editorial heading column sits to the left of three article rows approximately `854 × 173px` each. Dates use CarrigDC at `14px` with `0.7px` tracking.

This is a distinct editorial layout within the shop. The article image subjects are not visible in the supplied captures and should not be invented from their titles.

### News Columns and Store Links

The desktop news area contains three roughly `310px`-wide links. Each headline has a tall, narrow `56 × 294px` rectangle, consistent with vertical Japanese text, with a horizontal date below. The recorded titles concern business hours and seasonal delivery or store schedules.

The store area contains five `180px`-wide linked items, starting at `x = 120, 375, 630, 885, 1140px`. Labels use `16px / 29.76px` type. The approximately `190px` allocation above each label indicates media space, but the actual images are not included in the visible captures.

These modules continue the restrained type hierarchy and wide spacing. Their mobile geometry is not supplied.

### Newsletter and Social Links

**Anatomy:** vertical newsletter heading, short explanatory copy, rectangular email field, rectangular submit button, and a separate social column.

The desktop newsletter section occupies `632px`. The visible input is approximately `360 × 70px`; its adjacent submit button is measured at `140 × 70px`. The button uses a translucent black wash over the footer color, square corners, and `16px` serif text.

Social links are written out in CarrigDC at `32px`: Instagram, Twitter, and Facebook. They retain the labels shown by the current page. Form submission, validation, and success states were not tested.

### Orange Footer

**Anatomy:** newsletter/social region, thin horizontal divider, vertical shopping and editorial navigation, service links, a large black brand lockup, copyright, and a page-top control.

Desktop content spans `1200px` between `120px` side insets. Navigation reads in narrow vertical columns, while service links and copyright remain horizontal. A gourd-like outline with an upward arrow accompanies `PAGE TOP` near the right edge. The black logo occupies approximately `440px` of width near the lower right.

The mobile lower footer uses horizontal, stacked navigation text with a left inset around `41px`. Service links follow after a large gap. The brand lockup becomes centered at approximately `288px` wide, with copyright centered below. The page-top control is not visible in that mobile crop; its mobile behavior is unknown.

### Shipping Notice

A small cream notice is visible at the lower left of the desktop gift capture. Its approximate bounds are `312 × 103px`, inset roughly `18px` from the viewport’s left and bottom edges.

A vertical `出荷状況` label sits to the left of a fine divider, with a compact delivery message on the right and a small circular close affordance near the upper-right corner. The message describes the next possible shipment based on an order cutoff. Treat its date as live operational content, not fixed design copy.

The notice is not visible in the supplied opening and mobile captures. Its appearance timing, persistence, and dismissal behavior are unverified.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Element | Supplied declaration | What it establishes |
| --- | --- | --- |
| Header | `opacity 0.3s ease-out` | An opacity transition is configured; its trigger was not captured |
| English masthead | `color 0.5s, opacity 0.3s` | Color and opacity can transition; no full state sequence was supplied |
| Desktop navigation | `color 0.2s cubic-bezier(0.22, 1, 0.36, 1)` | Brief eased color feedback is configured |
| Category links | `background-color 0.3s` | Category background changes can transition |
| Text-action label | `color 0.3s ease-out` | The plain text action has an eased color transition |
| Newsletter submit | `opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1)` | Opacity feedback is configured |
| Social and some footer links | `color 0.2s cubic-bezier(0.22, 1, 0.36, 1)` | Consistent short color feedback |

These declarations are stronger evidence than a static screenshot, but they do not prove a particular hover color, click result, or scroll threshold. Entries recorded only as `transition: all` provide no usable duration in this evidence.

### Observed States and Limits

The capture process waited for document load, visible image decoding, finite animation readiness, and sampled layout/text stability. It included at least five seconds of initial observation. Perpetual animations were temporarily paused for readiness checks and resumed afterward.

The supplied artifacts are still images and computed-style snapshots, not a motion recording. No hero animation duration, blinking sequence, floating-meat movement, parallax, reveal choreography, or carousel behavior is established. Most sampled text elements report `animation: none`; that does not exclude animation on unmeasured image layers, wrappers, or pseudo-elements.

Scrolling produced opening, middle, and footer views. No menu opening, category activation, horizontal drag, product purchase, form submission, or shipping-notice dismissal was supplied. Retain the measured short transitions in an adaptation; treat additional motion as a new design decision.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Opening scene | Textured pale peach with layered illustration | Establishes the store’s character |
| Catalog region | White or very pale neutral field | Gives product names and prices reading clarity |
| Selected category | Measured ivory `#f7f3eb` | Marks the recorded desktop category state |
| Gift region | Cream field reached through a soft light transition | Frames packaging as an editorial feature |
| Package photographs | Neutral photographic backgrounds with real shadows | Makes the objects tangible without UI elevation |
| Footer | Flat saturated orange with dark text and logo | Creates a strong final brand field |
| Newsletter controls | Fine outline input and dark translucent submit fill | Provides functional contrast within the footer |
| Shipping notice | Pale cream panel with warm edge and rounded corners | Separates operational information from page content |

The visible system does not rely on repeated elevated cards. Large color fields, photography, whitespace, writing direction, and small accent dots provide most of the organization.

## Imagery

The opening illustration is the primary identity asset. The figure resembles a sumo referee holding a ceremonial fan, connecting directly to the homepage’s ranking vocabulary and the slogan’s reference to a raised fan. This describes the visible motif, not the identity of a real person.

The illustration combines softly modeled facial features with visibly textured areas of clothing and landscape. Orange floral fabric, plum headwear, olive cords, rolling ochre hills, and floating marbled-meat shapes belong to the same warm visual world. The grain should remain visible at the intended display size without becoming pixelated.

Photography has a separate role. The gift boxes are shown realistically on pale neutral grounds with directional shadows. Preserve accurate package color, printed lettering, and object proportions. The evidence does not support applying the hero’s grain treatment to every photograph.

### Observed Asset References

No original image `src` URLs, filenames, or intrinsic dimensions are included in the supplied evidence. The references below identify visible assets and their placement only.

| Asset | Visible characteristics | Placement / implementation guidance |
| --- | --- | --- |
| Primary illustration | Ceremonial figure, fan, floral robe, hills, floating meat | Full-bleed opening; requires separate desktop/mobile composition decisions |
| Header brand lockup | Vermilion bull, dark Japanese wordmark, small founding-year lettering | Tall, narrow home-link footprint |
| Footer brand lockup | Black bull and horizontal wordmark | Large desktop lower-right placement; centered mobile placement |
| Hero slogan | Two lines of irregular brush lettering | Right of the desktop figure; above the mobile figure |
| Red gift package | Angled red rectangular box with bull emblem | Left side of desktop gift spread |
| Pale gift package | Angled light-colored box with Japanese printing | Right side of desktop gift spread |
| Utility symbols | Fine brown account and basket outlines; white menu strokes | Small header controls; no icon-library identity verified |
| Page-top symbol | Gourd-like outline with upward arrow | Desktop footer utility |

Use authorized originals when available. For new artwork, preserve the composition, material warmth, and balance of detail without treating the original identity assets as interchangeable stock decoration.

## Layout & Responsive Behavior

### Desktop Structure

The page moves through a large illustrated introduction and promotion, three ranking entries, a sidebar-plus-products collection, a symmetrical gift spread, an editorial journal, vertically arranged news, five store links, and a substantial footer.

Several measured section separations reach `200–300px`. The gift screenshot includes a broad quiet interval between the product-list action and the package photographs. Preserve this deliberate pacing when space permits.

### Verified Mobile Changes

| Feature | Desktop | Mobile |
| --- | --- | --- |
| Header logo | `96px` wide | Approximately `47.83px` wide |
| Navigation | Six visible vertical links plus menu label | Text navigation absent from the opening |
| Utilities | Horizontal placement near upper-right corner | Cart and account stacked below menu |
| English masthead | White, `10px`, `2px` tracking | Black, `9.36px`, `0.936px` tracking |
| Hero composition | Tight central portrait crop; slogan at right | More complete figure; slogan above |
| Ranking | Three entries across | Three entries stacked vertically |
| Pickup collection | Three columns and two recorded rows | `156px`-wide items extending horizontally |
| Product typography | `16px`, widely tracked | `12.48px`, normal tracking |
| Footer navigation | Vertical columns | Horizontal text in a vertical list |
| Footer identity | Large lower-right logo | Smaller centered logo |

The mobile product layout is not a simple two-column grid: successive cards continue beyond the right edge at the same vertical position. A native horizontal scroller is a reasonable adaptation, but the original scrolling mechanism was not tested.

Mobile gift, journal, news, and store layout cannot be fully reconstructed from the provided element subset and endpoint captures. The text extraction confirms their content exists; it does not establish each section’s visual arrangement.

### Recommended Responsive Decisions

Choose a breakpoint based on when vertical navigation and the product sidebar stop fitting. The Quick Start uses `1024px` as a proposed breakpoint, not a measured source value. Use mobile-specific artwork framing, preserve useful tap targets, and keep the product rail’s overflow local to its component.

Do not hardcode the measured full document heights. They describe this content and state at inspection time. Prices, titles, article counts, shipping notices, and font availability can change the final height.

## Do’s and Don’ts

### Do

- Let the ceremonial illustration supply the opening’s scale and personality.
- Preserve the measured dark brown text and ivory selected-category color.
- Use orange consistently for strong actions, small navigation accents, and the footer field.
- Combine Japanese serif text with the declared Latin editorial stack where the font is available.
- Retain vertical writing for selected desktop navigation and title roles.
- Keep product names, units, prices, and tax notes legible as a connected group.
- Preserve the substantial desktop spacing between commercial and editorial sections.
- Give the gift photographs equal visual importance around the central copy.
- Art-direct the mobile opening independently, retaining the face, hat, fan, and primary action.
- Keep visible source measurements separate from proposed interaction behavior.

### Don’t

- Don’t reduce the homepage to a single campaign screen; it includes a catalog, editorial content, news, and store access.
- Don’t replace the illustration with a generic meat photograph and expect the identity to survive.
- Don’t put every content item inside a rounded, shadowed card.
- Don’t replace all serif text with a geometric sans-serif.
- Don’t make the small English masthead behave like an oversized marketing headline.
- Don’t scale the desktop hero uniformly into the mobile viewport.
- Don’t turn the measured mobile product rail into a two-column grid by assumption.
- Don’t interpret every mobile DOM rectangle as simultaneously visible content.
- Don’t invent parallax, autoplay, menu transitions, or hover endpoints from static captures.
- Don’t treat estimated orange and cream values as recovered source tokens.
- Don’t reuse shipping dates or current prices as permanent interface constants.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the original page:

- Give menu, cart, account, shipping close, and page-top controls explicit accessible names. Expand small visible icons into approximately `44px` touch targets.
- Implement menu opening with an explicit expanded state, predictable focus movement, Escape handling, and focus return.
- Use buttons and state attributes for in-place category switching. If panels behave as disclosures on mobile, expose their expanded state and relationship to the controlled region.
- Keep horizontal product rails keyboard-accessible. Provide a visible continuation cue and avoid requiring drag as the only navigation method.
- Provide a text equivalent for meaningful brush-lettered copy. Hide purely decorative meat shapes and landscape layers from assistive technology.
- Review the small mobile product and price sizes under text zoom. A readability-focused adaptation may increase them beyond the measured values.
- Test the final orange color against white CTA labels and dark footer text. Estimated screenshot colors are insufficient for a contrast guarantee.
- Give newsletter fields persistent labels, appropriate email semantics, and explicit validation and completion messages.
- Honor reduced-motion preferences if adding illustration or scroll animation. Essential content should be available without reveal timing.
- Load appropriately sized responsive artwork and reserve media dimensions to limit layout shifts. Keep product photography visually accurate.

## Agent Prompt Guide

### Quick Color Reference

- Main reading ink: measured `#231815`.
- Desktop navigation ink: measured `#522e03`.
- Selected category: measured `#f7f3eb`.
- Hero paper: estimated `#ffe6bc`.
- Gift paper: estimated `#f7f1e1`.
- Action orange: estimated `#ef3300`.
- Footer orange: estimated `#df4000`.
- Illustration accents: muted plum and ochre; avoid turning them into unrelated UI status colors.

### Overall Prompt

“Create a Japanese meat-store homepage with a warm ceremonial illustration as its opening identity. Use a large fan-holding figure, visible paper-like texture, orange floral clothing, muted plum and ochre accents, and pale peach surroundings. Overlay a narrow bull-and-wordmark identity at the upper left, a tiny centered English serif masthead, vertical Japanese navigation on desktop, and a circular orange menu control. Place a vermilion pill linking to product categories near the lower center. Continue into a spacious serif catalog with ranking, category navigation, product names and prices, paired gift-package photography, editorial journal entries, news, store links, and a saturated orange footer. Recompose the artwork for mobile, stack ranking entries, arrange pickup products in a horizontal rail, and convert footer navigation to horizontal text. Use supplied measurements where available and label any new interaction or breakpoint as an implementation choice.”

### Example Component Prompts

1. **Header:** “Build an overlay header with a 96 × 152px brand footprint at 70px left and 46px top on a 1440px viewport. Center a 10px tracked Latin serif title. Place six narrow vertical Japanese links near the right, with a circular orange menu control above its own vertical label. On a 390px viewport, reduce the brand to about 48 × 76px, remove the text navigation, and stack cart and account icons beneath the menu.”
2. **Section heading:** “Create a compact vertical Japanese section title in a Mincho-style serif: desktop 30px, weight 600, 0.3em tracking, and 1.65 line-height. Place a small uppercase Latin serif caption 38px below. Keep the surrounding section generous and the heading centered.”
3. **Product collection:** “Use a 236px desktop category column beside three 300px product title columns with approximately 30px gaps. Titles are 16px serif with 26.08px line-height and 0.2em tracking. Prices sit separately below. On mobile, show 156px product cards in a horizontal track with about 15.6px gaps and 26px starting inset. Keep unverified category-panel behavior explicit as a new implementation decision.”
4. **Gift spread:** “Compose two tall, square-cornered package photographs around a 440px central text region. Place vertical English package labels along the outside edges, a vertical Japanese title and small GIFT caption in the center, widely tracked two-line supporting copy, and a plain link ending in a tiny orange dot. Use cream surroundings and pale oversized GIFT lettering behind the copy.”
5. **Footer:** “Create a full-width orange footer with dark serif text, a rectangular newsletter form, large written social links, a fine divider, and vertical shopping navigation on desktop. Put a large black horizontal brand lockup near the lower right. On mobile, stack horizontal links with generous gaps and center the logo and copyright.”
6. **Shipping notice:** “Make a compact cream operational notice around 312 × 103px. Put a vertical status label at left, a thin divider, a short shipment-cutoff message at right, and a small close control. Keep the message data-driven and ensure the dismiss control has a usable touch target.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source CSS. Measured text colors and desktop type values are retained. Orange/cream fills are visual estimates. The `1024px` breakpoint, mobile gift layout, media aspect ratios, focus treatment, and native horizontal scrolling are recommendations.

Keep a conventional root font size. Load authorized artwork and available font resources separately; no asset paths are assumed. A hero `<picture>` should supply deliberately framed desktop and mobile imagery. If the slogan is baked into the image, omit the separate slogan layer and provide an appropriate text equivalent.

For the section title, use `.section-title__jp` with one span per short vertical column. The catalog scaffold shows one active product panel; accessible category/menu state management requires separate implementation.

```css
:root {
  /* Measured interface colors */
  --color-ink: #231815;
  --color-header-ink: #522e03;
  --color-active: #f7f3eb;
  --color-white: #fff;
  --color-black: #000;
  --color-wash: rgb(0 0 0 / 10%);

  /* Visual estimates: validate against approved assets */
  --color-hero: #ffe6bc;
  --color-paper: #f7f1e1;
  --color-action: #ef3300;
  --color-footer: #df4000;

  /* Families declared in the supplied computed styles */
  --font-jp: 'Noto Serif JP', YuMincho, '游明朝',
    'Times New Roman', 'Hiragino Mincho ProN',
    'HGS明朝B', 'ＭＳ Ｐ明朝', serif;
  --font-latin: CarrigDC, YuMincho, '游明朝',
    'Times New Roman', 'Hiragino Mincho ProN', serif;

  --text-body: 16px;
  --text-product: 16px;
  --text-price: 14px;
  --text-section: 30px;
  --text-caption: 14px;
  --text-action: 24px;
  --page-gutter: 70px;
  --product-gap: 30px;
  --section-space: 250px;
  --radius-pill: 999px;
  --ease-link: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }

.yoro-page {
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-jp);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.7; /* Recommended readable default */
}

.yoro-page a { color: inherit; }
.yoro-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 233px;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.masthead a, .masthead button { pointer-events: auto; }
/* Optional content state; determine its trigger separately. */
.masthead.is-floating { position: fixed; }

.brand-home {
  position: absolute;
  top: 46px;
  left: var(--page-gutter);
  width: 96px;
}
.brand-home img { width: 100%; height: auto; }

.masthead__title {
  position: absolute;
  inset: 66px 0 auto;
  margin: 0;
  color: var(--color-white);
  text-align: center;
  font: 700 10px/1 var(--font-latin);
  letter-spacing: 2px;
  transition: color 500ms, opacity 300ms;
}

.menu-toggle {
  position: absolute;
  top: 46px;
  right: 74px;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 3px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-action);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
}

.desktop-nav {
  position: absolute;
  top: 125px;
  right: 133px;
  display: flex;
}
.desktop-nav a {
  width: 42px;
  writing-mode: vertical-rl;
  color: var(--color-header-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 3px;
  transition: color 200ms var(--ease-link);
}

.utility-links {
  position: absolute;
  top: 51px;
  right: 145px;
  display: flex;
}
.utility-links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-header-ink);
}
.utility-links svg { width: 20px; height: 23px; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-hero);
}
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__slogan {
  position: absolute;
  top: 38%;
  right: 5.5%;
  width: 21%;
}
.hero__cta {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 257px;
  min-height: 80px;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-action);
  font-size: var(--text-action);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.yoro-page .pill { color: var(--color-white); }
.pill::after {
  content: '';
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: currentColor;
}

.section-title { text-align: center; }
.section-title__jp {
  display: inline-block;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.3em;
}
.section-title__jp span { display: block; }
.section-title__en {
  margin: 38px 0 0;
  font: 500 var(--text-caption)/1 var(--font-latin);
  letter-spacing: 0.16em;
}

.catalog-section { padding-block: 250px 300px; }
.catalog {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 64px;
  width: min(1300px, calc(100% - 140px));
  margin: 169px auto 0;
  padding-right: 40px;
}
.catalog__nav button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 300ms;
}
.catalog__nav button[aria-selected='true'] {
  color: var(--color-black);
  background: var(--color-active);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px var(--product-gap);
  min-width: 0;
}
.product-card { display: block; text-decoration: none; }
.product-card__media {
  width: 100%;
  aspect-ratio: 3 / 4; /* Proposed ratio; not measured */
  object-fit: contain;
}
.product-card__title {
  margin: 36px 0 0;
  font-size: var(--text-product);
  font-weight: 500;
  line-height: 1.63;
  letter-spacing: 0.2em;
}
.product-card__price {
  margin: 36px 0 0;
  font-size: var(--text-price);
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: calc(100% - 192px);
  margin: 168px auto 0;
}
.ranking-grid .product-card__media { aspect-ratio: 1; }
.ranking-grid .product-card__info { padding-left: 88px; }
.ranking-grid .product-card__title { margin-top: 27px; }
.ranking-grid .product-card__price { margin-top: 20px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-size: var(--text-action);
  line-height: 1;
  text-decoration: none;
  transition: color 300ms ease-out;
}
.text-link::after {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--color-action);
}

.gift-section {
  padding-block: 30px 200px;
  background: var(--color-paper);
}
.gift {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1.07317fr 1fr;
  align-items: center;
  width: min(1260px, calc(100% - 180px));
  margin-inline: auto;
}
.gift::before {
  content: 'GIFT';
  position: absolute;
  inset: 40% 0 auto;
  z-index: -1;
  color: rgb(255 255 255 / 55%);
  text-align: center;
  font: 400 200px/1 var(--font-latin);
  pointer-events: none;
}
.gift__package {
  display: flex;
  gap: 20px;
  min-width: 0;
  text-decoration: none;
}
.gift__package--right { flex-direction: row-reverse; }
.gift__label {
  margin: 0;
  writing-mode: vertical-rl;
  font: 400 16px/1 var(--font-latin);
  letter-spacing: 0.1em;
}
.gift__package--right .gift__label { align-self: flex-end; }
.gift__package img {
  width: calc(100% - 36px);
  height: auto;
}
.gift__copy { padding-inline: 20px; text-align: center; }
.gift__description {
  margin: 100px 0 86px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.3em;
}

.site-footer {
  padding: 280px 120px 158px;
  color: var(--color-ink);
  background: var(--color-footer);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 632px) 1fr;
  gap: 138px;
  padding-bottom: 45px;
  border-bottom: 1px solid rgb(35 24 21 / 25%);
}
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 360px) 140px;
  gap: 10px;
}
.newsletter-form input {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  padding-inline: 30px;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  background: transparent;
}
.newsletter-form button {
  min-height: 70px;
  border: 0;
  border-radius: 0;
  color: var(--color-black);
  background: var(--color-wash);
  cursor: pointer;
  transition: opacity 200ms var(--ease-link);
}
.footer-social a {
  display: block;
  margin-bottom: 20px;
  font: 400 32px/36px var(--font-latin);
  text-decoration: none;
}
.footer-nav {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 48px;
  margin-top: 120px;
}
.footer-nav__group {
  writing-mode: vertical-rl;
  font-size: 18px;
  letter-spacing: 0.1em;
}
.footer-nav__group a {
  display: block;
  margin-block: 0 16px;
  text-decoration: none;
}
.footer-brand {
  width: 440px;
  max-width: 100%;
  margin: 100px 0 0 auto;
}

/* Recommended breakpoint; original media queries were not supplied. */
@media (max-width: 1024px) {
  :root {
    --page-gutter: 26px;
    --text-body: 13.52px;
    --text-product: 12.48px;
    --text-price: 11.49px;
    --text-section: 18.72px;
    --text-caption: 10.4px;
    --text-action: 14.56px;
  }

  .masthead { height: 151px; }
  .brand-home { top: 26px; left: 25px; width: 47.83px; }
  .masthead__title {
    top: 36.39px;
    color: var(--color-black);
    font-size: 9.36px;
    line-height: 18.2px;
    letter-spacing: 0.936px;
  }
  .desktop-nav { display: none; }
  .menu-toggle {
    top: 26px;
    right: 25px;
    width: 44px;
    height: 44px;
  }
  .utility-links {
    top: 73px;
    right: 25px;
    flex-direction: column;
  }
  .utility-links svg { width: 16px; height: 18px; }
  .hero__slogan { top: 13.5%; left: 28%; right: auto; width: 45%; }
  .hero__cta { bottom: 15.6svh; }
  .pill { min-width: 166px; min-height: 52px; padding: 10px 22px; }
  .section-title__jp { line-height: 1.5; }
  .section-title__en { margin-top: 19.23px; }

  .catalog-section { padding-block: 156px; }
  .catalog { display: block; width: 100%; margin-top: 75px; padding: 0; }
  .catalog__nav button {
    min-height: 52px;
    padding-inline: 26px;
    font-size: 12.48px;
    letter-spacing: 0.2em;
  }
  .product-grid {
    display: flex;
    gap: 4vw;
    overflow-x: auto;
    padding: 16px 26px 28px;
    scroll-padding-inline: 26px;
  }
  .product-grid > .product-card { flex: 0 0 40vw; }
  .product-card__title { margin-top: 26px; letter-spacing: normal; }
  .product-card__price { margin-top: 25px; letter-spacing: normal; }
  .ranking-grid {
    grid-template-columns: 1fr;
    gap: 41.6px;
    width: calc(100% - 83.2px);
    margin-top: 94.6px;
  }
  .ranking-grid .product-card__info { padding-left: 66.55px; }
  .ranking-grid .product-card__title { margin-top: 18.72px; }

  /* Proposed mobile gift layout; not visually verified. */
  .gift-section { padding-block: 80px 120px; }
  .gift { width: calc(100% - 52px); grid-template-columns: 1fr 1fr; gap: 20px; }
  .gift::before { font-size: 28vw; }
  .gift__copy { grid-column: 1 / -1; grid-row: 1; }
  .gift__description { margin: 40px 0; font-size: 15px; }
  .gift__copy .text-link { margin-bottom: 40px; }
  .gift__package { gap: 8px; }
  .gift__label { font-size: 10px; }
  .gift__package img { width: calc(100% - 18px); }

  .site-footer { padding: 100px 41px 48px; }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .newsletter-form { grid-template-columns: minmax(0, 1fr) auto; }
  .newsletter-form input { padding-inline: 12px; }
  .newsletter-form button { padding-inline: 16px; }
  .footer-nav { flex-direction: column; gap: 28px; margin-top: 64px; }
  .footer-nav__group { writing-mode: horizontal-tb; font-size: 20px; }
  .footer-nav__group a { margin: 0 0 12px; }
  .footer-brand { width: 288px; margin: 64px auto 0; }
}

/* Recommended motion preference support for this scaffold. */
@media (prefers-reduced-motion: reduce) {
  .yoro-page *, .yoro-page *::before, .yoro-page *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
```

The scaffold intentionally leaves product filtering, menu state, shipping-notice timing, and header visibility triggers to the application. Use explicit state and accessible controls when adding those behaviors. Image proportions should be adjusted after the actual authorized assets are available.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This does not imply that the inspected website uses Tailwind.

```css
@theme inline {
  --color-yoro-ink: var(--color-ink);
  --color-yoro-header: var(--color-header-ink);
  --color-yoro-active: var(--color-active);
  --color-yoro-paper: var(--color-paper);
  --color-yoro-hero: var(--color-hero);
  --color-yoro-action: var(--color-action);
  --color-yoro-footer: var(--color-footer);

  --font-yoro-jp: var(--font-jp);
  --font-yoro-latin: var(--font-latin);

  --text-yoro-body: var(--text-body);
  --text-yoro-product: var(--text-product);
  --text-yoro-price: var(--text-price);
  --text-yoro-section: var(--text-section);
  --text-yoro-caption: var(--text-caption);
  --text-yoro-action: var(--text-action);

  --spacing-yoro-gutter: var(--page-gutter);
  --spacing-yoro-product: var(--product-gap);
  --radius-yoro-pill: var(--radius-pill);
}
```

## Sources & Evidence

- **Inspected original and final page:** [Yoro Meat Online Store](https://www.hidagyu-yoromeat-honten.com/). The supplied record reports HTTP 200 and an unchanged final URL.
- **Capture record:** `2026-10-04T21:06:32.317Z`, equivalent to October 5, 2026, 06:06:32.317 JST. Individual image timestamps were not supplied.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; original-page captures of the opening, product-to-gift transition, and footer; rendered text, link destinations, selected computed styles, and element rectangles. Measured document height was approximately `11423.45px`.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; original-page captures of the opening and lower footer; rendered text, links, and computed geometry principally covering the header, promotion, ranking, and product area. Measured document height was approximately `10086.86px`.
- **Inspection method supplied with the record:** initial observation of at least five seconds; finite animation, image-decoding, and layout/text readiness checks; intermediate scroll traversal; temporary pausing and subsequent resumption of perpetual animations. These checks do not establish that every delayed or interactive state was observed.
- **Interaction limits:** no supplied menu, hover, category-switching, horizontal-swipe, newsletter-submission, notice-dismissal, cart, or checkout test. Link targets establish destinations only; linked pages were not inspected.
- **Asset and style limits:** no original image resource URLs, font files, full stylesheet, media-query definitions, or hero animation timeline were supplied. Color estimates and proposed CSS are labeled accordingly.

This reference describes the current homepage represented by the supplied original-page evidence. Measurements apply to the recorded viewports and states; recommendations provide a practical starting point where the evidence ends.