# Moshiyado — Style Reference

> A welcoming hospitality careers directory framed by cream, green curves, and photographs of people at work.

**Website:** [moshiyado.com](https://moshiyado.com/)
**Original URL:** https://moshiyado.com/
**Final URL:** https://moshiyado.com/
**Theme:** predominantly light, with a large green discovery region and a charcoal footer.
**Inspected:** September 22, 2026, at 14:29:32 UTC / 23:29:32 JST, using the supplied browser evidence.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Measured document widths were 1425px and 375px respectively.
**Scope:** the current homepage: navigation, four-state hero, condition links, search area, facility directory, pickup jobs, editorial and news content, footer, and mobile bottom navigation. Visual captures cover the desktop hero, pickup jobs, and footer, plus the mobile hero and footer. Rendered DOM evidence extends through the page.

Moshiyado is a recruitment and editorial website for hotel and ryokan careers. Its homepage supports several parallel journeys: searching by employment conditions, exploring a workplace, reading practical articles, and accessing an account. The design gives this substantial directory a friendly introduction without removing the detail needed to compare jobs.

Cream backgrounds, dark Japanese sans-serif text, forest green sections, and a restrained orange accent establish the visual system. A large pale-green loop passes behind the brand and photography; a shallow curved boundary leads into job discovery. Photographs emphasize staff, service, conversation, and kitchens. Small outlined benefit tags and compact location and salary rows turn those human stories into useful employment information.

The desktop layout is spacious at section level and dense within cards. Mobile deliberately changes both navigation and content organization: facilities become a vertical list, while pickup jobs occupy a horizontal row. Preserve these distinct behaviors when adapting the design.

## How to Read This Reference

- **Measured** values come from the supplied rendered element rectangles, computed styles, and custom properties. Dimensions are CSS pixels unless stated otherwise.
- **Calculated** values are arithmetic derived from measured rectangles, such as gaps between cards.
- **Estimated** values describe visible screenshot geometry or colors whose computed declarations were not supplied. They are explicitly identified.
- **Recommended** values and behaviors belong to the reusable implementation below. They are not claims about the original source.
- Source custom-property names are identified in tables. Other token and class names are implementation aliases.
- The measured document is 15px narrower than its configured viewport in both captures. Account for that capture gutter when comparing coordinates; do not hardcode a 375px mobile page.
- Rendered text includes inactive hero content and offscreen navigation. Presence in the DOM does not establish simultaneous visibility or a successfully tested interaction.

## Tokens — Colors

### Default Palette

| Name | Value | Source / suggested alias | Role and evidence |
| --- | --- | --- | --- |
| Cream canvas | `#F5F4EA` | Source `--color-background_header`; alias `--color-cream` | Declared source token; visually corresponds to the hero and surrounding cream canvas. |
| Main green | `#338751` | Source `--color-green_1`; alias `--color-green` | Computed active hero dot and employer-link color; visually matches the large green region and employer CTA. |
| Utility green | `#13913A` | Source `--color-green_2`; alias `--color-utility-green` | Computed fill of the mobile Menu button. Keep distinct from the main green. |
| Orange accent | `#EA7D3E` | Source `--color-orenge`; alias `--color-orange` | Computed login-panel fill and orange category labels. Preserve the source spelling when referencing its variable. |
| Main ink | `#2E2E2E` | Computed `rgb(46, 46, 46)`; alias `--color-ink` | Body text, headings, and most navigation. |
| Secondary text | `#666666` | Source `--color-gray_1`; alias `--color-muted` | Computed facility names and publication periods. |
| Muted account text | `#BABABA` | Computed `rgb(186, 186, 186)` | Bookmark and account utilities in the captured state; this appearance does not prove they are disabled. |
| White surface | `#FFFFFF` | Source `--color-white`; alias `--color-surface` | Computed pill buttons and keyword links; visible large search and pickup surfaces. |
| Pale olive | `#E8E7D1` | Source `--color-background_2` | Computed mobile condition-strip label background. Also part of the site's declared neutral family. |
| Light rule | `#E1E1D0` | Source `--color-line_1`; alias `--color-rule` | Declared source token; suitable approximation for the thin warm-gray rules visible around controls. Exact assignment varies by component. |
| Pale loop | Approximately `#DFEED0` | Recommended alias `--color-ribbon` | Visual approximation of the hero decoration. Its source color was not supplied. |
| Footer charcoal | Approximately `#2E2E2E` | Recommended alias `--color-footer` | Screenshot estimate. Reusing measured main ink reproduces the visible relationship, but the footer's computed fill was not included. |

### Supporting Source Colors

The supplied custom properties also declare `--color-background_6: #edecd7`, `--color-background_facility: #ebeada`, `--color-background_refine: #faf9f2`, `--color-background_4: #f2f2e9`, and `--color-tag_2: #e2e2c1`. These establish a family of cream and olive neutrals. Their exact assignments to unsampled wrappers and employment badges are not verified.

Hover-related variables are `--color-green_hover: #3fa661` and `--color-orenge_hover: #fc9856`. Their presence is measured; actual hovered states were not supplied.

Many `--bs-*` defaults are also present. Bootstrap blue, warning yellow, generic shadows, and gradient variables should not be promoted into the visible brand palette merely because they exist in the document.

## Tokens — Typography

### Primary Japanese Interface

- **Computed family:** `'Zen Kaku Gothic New', sans-serif`.
- **Weights:** `500` for body copy and metadata; `700` for navigation, headings, and major links.
- **Character:** clear, moderately soft Japanese Gothic with a substantial medium-weight body. The page is neither delicate nor heavily condensed.
- **Body baseline:** `16px / 24px` on the root and body at both inspected sizes. Individual mobile components reduce their text independently.
- **Suggested alias:** `--font-ui: 'Zen Kaku Gothic New', sans-serif`.

### Latin Utility Text

The `ENGLISH` link uses `'Public Sans', sans-serif`, weight `600`, at `11px / 14.3px` on desktop. Its offscreen mobile-menu counterpart is `13px / 16.9px`.

This confirms Public Sans for that utility. It does not establish that every date, price, or English section kicker uses the same family.

### Brand Artwork

The hero heading contains a graphical brand lockup with a roof-like symbol, expressive lettering, and the small Latin wordmark `moshiyado`. Its extracted H1 text is empty. Although the H1 computes to `40px` on desktop and `27.85px` on mobile, those values do not explain the visible lettering inside the artwork.

Use an authorized brand asset for faithful reproduction. Do not approximate the mark by typing the source phrase in the interface font.

### Type Scale

| Role | Desktop measured size / line height | Mobile measured size / line height | Weight / tracking |
| --- | --- | --- | --- |
| Root body | `16 / 24px` | `16 / 24px` | `500`, normal |
| Hero explanatory copy | `16 / 28.8px` | `14 / 22.4px` | `500`; desktop `0.96px`, mobile normal |
| Main header navigation | `14 / 21px` | Offscreen menu: `15 / 22.5px` | `700` |
| Hero pill action | `15 / 22.5px` | `14 / 21px` | `700` |
| Search heading | `30 / 45px` | `22 / 30.8px` | `700` |
| Facility-section heading | `30 / 42px` | `22 / 30.8px` | `700` |
| Pickup heading | `32 / 40px` | `24.71 / 32.71px` | `700`; kicker has separate styling |
| Card title | `20 / 30px` | `18 / 27px` | `700` |
| Facility name | `16 / 24px` | `15 / 22.5px` | `500`, secondary gray |
| Location, salary row, publication period | `12 / 18px` | `12 / 18px` | `500` on sampled row containers |
| Photo category badge | `12 / 12px` | `12 / 12px` | `500`, centered in a `20px` box |
| Search keyword link | `14 / 14px` | `14 / 14px` | `500`, centered in a `29px` box |
| Hero condition links | `13 / 19.5px` | `12 / 18px` | `500`; `0.06em` tracking |
| Hero condition caption | `12 / 16.8px` | `11 / 15.4px` | `700` |
| Mobile navigation caption | — | `10 / 12px` | `700` |

Do not scale the entire page from the root to reproduce mobile. The observed system retains small metadata sizes while changing headings, body copy, layout, and controls selectively.

## Tokens — Spacing & Shapes

### Spacing Scale

| Use | Value | Evidence |
| --- | --- | --- |
| Card text inset relative to image | `5px` per side | Measured title and card rectangles on both viewports |
| Category-label image inset | `10px` from top and left | Measured badge/card coordinates |
| Keyword-link gap | `8px` | Calculated from adjacent search links |
| Hero-dot gap | `8px` | Four `10px` buttons placed every `18px` |
| Desktop navigation gap | `24px` | Calculated between primary links |
| Mobile outer content inset | `20px` | Measured hero, search trigger, and section coordinates |
| Desktop hero copy-to-action gap | `32px` | Calculated from paragraph bottom to action top |
| Desktop pickup grid gap | `44px` | Calculated horizontally and between row bounds |
| Mobile facility-card vertical gap | `60px` | Calculated between successive card links |
| Desktop facility-card horizontal gap | `92px` | Calculated between `296px` links at x = `176.5`, `564.5`, and `952.5` |
| Desktop section breathing room | Approximately `80–100px` | Mixed measured section offsets and screenshot estimates; not one universal source token |

### Border Radius

| Element | Value | Status |
| --- | --- | --- |
| Desktop pill action | `24px` | Measured on a `48px`-high control |
| Mobile hero action | `26px` | Measured on a `46px`-high control |
| Mobile facility browse action | `26px` | Measured on a `52px`-high control |
| Category and keyword labels | `4px` | Measured |
| Mobile filter trigger | `4px` | Measured |
| Login block | `0 0 0 4px` | Measured desktop corner treatment |
| Hero photo | Approximately `8px` | Screenshot estimate |
| Large pickup panel | Approximately `16px` | Screenshot estimate |
| Job-card image and link | Square | Visible image corners; link radius measured `0` |
| Pagination dots and social outlines | Circular | Dots measured `50%`; social outlines visually circular |

### Layout Measurements

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Document height | `6410.875px` | `8209.406px` | Measured root rectangles |
| Header | `1425 × 92px`, left padding `40px` | Header rectangle has `0px` height | Measured; desktop navigation is not retained as a top row on mobile |
| Hero brand H1 box | x `92.5`, y `200`, `400 × 156.52px` | x `20`, y `60`, `335 × 73.36px`, right padding `30px` | Measured wrapper geometry |
| Hero copy | x `92.5`, y `398.52`, width `424px` | x `20`, y `149.36`, width `335px` | Measured |
| Hero photo | Approximately x `613`, y `168`, `700 × 460px` | Approximately x `20`, y `220`, `335 × 220px` | Screenshot estimates |
| Hero action | `216 × 48px`, y `488.11` | `192 × 46px`, y `464.28` | Measured |
| Hero pagination | y `652`, four `10px` dots | y `464.28`, four `10px` dots | Measured |
| Search heading | y `846.91` | y `690.28` | Measured document coordinates |
| Facility section | x `112.5`, width `1200px`, horizontal padding `40px` | width `375px`, horizontal padding `20px` | Measured |
| Facility card links | `296px` wide, three columns | `295px` wide at x `40`, one column | Measured |
| Pickup card links | `339px` wide, three columns | `315px` wide, horizontal sequence with `20px` gaps | Measured |
| Mobile navigation | Not visible | y `785`, five `75px` cells across `375px` | Measured; Menu box is `59px` high |

The desktop pickup panel is approximately `1265px` wide, inset `80px` from the document edges. Its cards occupy an inner span of `1105px`: `3 × 339 + 2 × 44`. This creates approximately `80px` of inner padding on each side, a major part of the panel's generous appearance.

## Components

### Desktop Header

**Role:** gives immediate access to search, facilities, editorial content, account tools, and employer information.

The header shares the cream hero field. A small bordered site-description plaque sits at the upper left. Four bold navigation links occupy the center-right region. Employer information and the English link form a smaller utility row above a bordered bookmark/account group. A `140 × 92px` orange login and registration block reaches the top-right edge.

The main navigation starts near x `613.5`, closely aligning with the hero photo below. This alignment is more distinctive than a generic centered navigation bar.

Bookmark and account labels are pale gray but retain link destinations in the evidence. Describe them as visually muted, not conclusively disabled. Header stickiness while scrolling was not established.

### Hero and Four-State Carousel

**Role:** introduces the service through the people and working environments it covers.

On desktop, place the large graphical brand above a short two-line paragraph, followed by a white outlined pill action. The photograph sits to the right and slightly above the brand. The pale-green loop runs behind both columns without reducing text contrast.

Four description/action pairs appear in the rendered evidence:

| Message purpose | Source action | Observed destination |
| --- | --- | --- |
| Introduce the service | `もし宿とは` | `/about` |
| Explain workplace reporting | `すべての施設を見る` | `/facility` |
| Explain selected employment conditions | `すべての求人を見る` | `/job` |
| Introduce practical editorial content | `コラムを見る` | `/column` |

Only one state is visually foregrounded at a time. The supplied desktop capture shows the second dot filled and a reception scene; the mobile capture shows the third dot filled and two staff members talking outdoors. The overlapping description rectangles are carousel content, not four paragraphs to stack in a reconstruction.

Each dot is a `10px` outlined circle, with an `8px` gap and a green fill for the current state. On desktop the dots align under the photograph at its right edge. On mobile they share the horizontal band beneath the photograph with the left-aligned action.

**Pill anatomy:** white fill, approximately `1px` dark outline, bold centered label, small right arrow, no shadow. The desktop version measures `216 × 48px`; the mobile hero version measures `192 × 46px`.

### Selected-Conditions Strip

**Role:** makes the site's job-selection criteria visible before the search area.

Desktop uses a small bold caption with an orange dot above a white clipped strip approximately `424px` wide and `40px` high. Compact condition links run horizontally through it.

Mobile places the caption in a fixed `60 × 36px` pale-olive segment at the left of the `335px`-wide strip. The links occupy the remaining white region. Their clipping and duplicated sequence suggest a looping track, but its speed and movement were not directly measured.

Condition links are real filtering destinations, such as `/job?kodawari_id[21]=21`. Keep this component distinct from the smaller benefit labels inside job cards.

### Curved Discovery Region and Search Panel

**Role:** transitions from brand introduction into practical job discovery.

The green field begins with a broad shallow convex curve. In the desktop screenshot its crest is around y `728`, with the edges around y `805`; on mobile the corresponding crest is around y `617`, with edges around y `636`. These are screenshot estimates, not an inspected path definition.

A white heading and an outlined document-and-magnifier illustration introduce the search area. Desktop places a large white rounded search surface beneath it, approximately `1120px` wide. The DOM establishes four filter groups: occupation, area, employment type, and facility type. Below them are keyword links and a separate search region. The supplied image shows only the top of this desktop panel, so exact field styling is incompletely evidenced.

Mobile exposes a `335 × 48px` white `条件から絞り込む` button with a plus sign. Keyword links remain laid out below it. The trigger's expanded state was not captured; do not invent a modal or an expanded-panel animation.

Search keywords use `14px` text in `29px`-high white bordered boxes with `4px` corners and approximately `8px` gaps. The visible mobile arrangement wraps into multiple rows rather than shrinking the text to fit.

### Facility Directory Cards

**Role:** presents a workplace as a story before asking the visitor to inspect individual vacancies.

The section starts with a white heading and explanatory copy on green. Each card link contains a photograph, a small category badge, a bold editorial title, the facility name, a location row, benefit labels, and a publication period. Salary is not part of the sampled facility-card anatomy.

Desktop has six entries arranged in three columns and two rows. The measured link widths are `296px`. Mobile retains approximately the same card width, `295px`, and stacks all six entries vertically with `60px` between links. This preserves readable story and metadata proportions while substantially increasing page length.

Titles use `20px / 30px` on desktop and `18px / 27px` on mobile. Facility names use secondary gray. Text is inset `5px` from the photo/link edge; category badges sit `10px` inside the photograph.

**Context-specific detail:** the sampled facility directory uses orange category badges even for entries labeled `旅館`. Do not impose the pickup section's green ryokan badge treatment on every directory card.

### Pickup Job Panel and Cards

**Role:** surfaces specific recommended jobs with comparable employment information.

On desktop, six cards sit inside one large white panel with rounded outer corners. Individual cards have no visible enclosing border or shadow. A green `PICK UP` kicker sits above the dark Japanese section heading. Introductory copy aligns beside the heading, a browse-all pill sits at the right, and a thin cream rule separates the header from the grid.

The three-column grid uses `339px` cards and `44px` gaps. Photographs appear approximately `3:2`, with square corners. Card anatomy is:

1. Photograph with a `20px`-high category label at its upper-left corner.
2. A small pale-olive rounded employment-type label below the image.
3. A bold multi-line job title.
4. Muted facility name.
5. Compact location row with a green pin icon.
6. Compact salary row with a green currency icon.
7. Wrapping outlined benefit labels.
8. A gray publication-period line.

The desktop example includes service staff, reception colleagues, and chefs. The location and salary rows remain modest; the job title carries the primary textual emphasis. A job can have more than one employment-type label.

Within this section, `リゾート／観光ホテル` uses orange and `旅館` uses green. This mapping is directly supported by the sampled pickup badges.

On mobile, the cards form a horizontal sequence: x positions `20`, `355`, `690`, and `1025`, all at the same y coordinate. Each card is `315px` wide with a `20px` gap. The geometry establishes the row, but swipe handling, snapping, and arrow controls were not tested.

Each sampled card is an encompassing link. Keep benefit labels as metadata within that link, or move independently interactive filter links outside it; do not nest anchors.

### Section Heading System

**Role:** distinguishes practical discovery from editorial collections.

Green-background discovery headings use white Japanese text and a small line illustration. White or cream editorial sections use a green English kicker above a larger dark Japanese heading. Desktop allows the heading, explanatory copy, and browse action to occupy one row. Mobile moves introductory copy below the title and places collection actions after the content in the extracted reading order.

This repeated hierarchy provides consistency without giving every section the same container or layout.

### Editorial and News Content

**Role:** supports career decisions beyond the immediate job search.

The rendered page includes five editorial entries with categories, titles, and publication dates. Subjects include workplace atmosphere, kitchen environments, interviews, relocation costs, and entering hospitality without prior experience. Some entries also include secondary topic labels.

The news region contains four dated announcements. A desktop footer capture shows its lower portion: a pale cream/olive field, a black line illustration of a person at a laptop, and a thin horizontal rule beneath a news item.

The complete editorial section was not supplied as a visual capture, and its component-level computed styles are absent from the excerpt. Do not claim an exact column grid, image treatment, or responsive carousel for that section. For a new implementation, reuse the established heading and metadata hierarchy while treating its detailed layout as a recommendation.

### Desktop Footer

**Role:** provides a comprehensive secondary directory and employer entry point.

A full-width charcoal field closes the page. At left, a white brand lockup sits above a small site-description label, a social row, and a wide green employer CTA. The social controls are thin circular outlines containing Instagram, Facebook, and X symbols.

The larger right region contains primary links, a keyword search field, and grouped links for occupation, region, employment type, facility type, and conditions. Group headings are bright; the many subordinate links are subdued gray. This is a dense sitemap with clear hierarchy, not a second collection of promotional cards.

A fine rule separates the bottom legal-navigation row from the sitemap. Copyright sits at the lower right. A small circular upward-chevron control is visible near the bottom-right edge; its click and scroll behavior were not supplied.

The screenshot suggests approximately `1280px` of centered footer content, with roughly `80px` top padding. These are visual estimates.

### Mobile Footer

**Role:** retains the footer's navigation while reducing its visible density.

The mobile capture begins with three full-width navigation rows and a fourth condition-search row. Thin gray dividers separate them. The first three rows show right chevrons; the condition row shows a plus sign. The detailed desktop taxonomy is not visible in this captured state, although its labels remain in the rendered evidence.

Below the rows, center the social heading and three circular controls, then a broad green employer pill. Legal links form a centered vertical list with generous separation. Copyright is centered near the bottom. The large desktop brand block and keyword field are not visible in this mobile capture.

The row affordances suggest disclosure/navigation behavior, but no expanded footer state was tested.

### Mobile Bottom Navigation

**Role:** keeps the most important destinations available throughout the long page.

Five equal cells span the document width: `メニュー`, `施設から探す`, `条件から探す`, `ログイン`, and `検討中リスト`. The first cell uses utility green with white icon and text; the others are white with dark line icons, except the muted bookmark item. Thin vertical rules divide the white cells.

The dock occupies the bottom `59px` of the supplied viewport and remains visible in both mobile top and footer captures. Captions measure `10px / 12px`. The four link boxes measure `48px` high within that bottom region, while the Menu button measures `59px` high.

Offscreen navigation links at negative x coordinates and a Close control appear in the DOM, suggesting a concealed mobile menu. Its opened appearance, focus behavior, and transition are unverified.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be carried forward |
| --- | --- | --- |
| Primary navigation links | `color 0.2s ease-out` | Short color feedback; final hover color was not captured. |
| Login block | `background-color 0.2s ease-out` | Brief fill transition; source declares an orange hover token. |
| Pill actions | Background, border, and color each use `0.2s ease-out` | Coordinated color feedback without evidence of movement or elevation. |
| Hero dots | `background-color 0.2s ease-out` | Filled current-state circle with a short color change. |
| Search keyword links | `border-color 0.3s` | Border emphasis; no hover-state screenshot supplied. |
| Card headings | `color 0.2s ease-out` | Text emphasis rather than an evidenced card-lift effect. |
| Small browse-more link | `opacity 0.2s ease-out` | Subtle opacity feedback. |
| Hero carousel | Four dots, four overlapping content states, different selected states across captures | Carousel structure is supported. Autoplay, interval, easing, and fade-versus-slide behavior are unknown. |
| Condition strip | Duplicated link sequence and clipped horizontal positions | A looping-track interpretation is plausible; speed, direction, and pause behavior are unverified. |
| Mobile pickup row | Equal-y cards extending horizontally beyond the viewport | Horizontal arrangement is measured; drag, swipe, and snapping behavior are not established. |
| Menu and filter disclosures | Buttons, plus signs, and offscreen menu content | Affordances are visible; activation results were not supplied. |
| Back-to-top control | Circular upward-chevron control in captures | Intended function is visually apparent; scroll duration is unknown. |

The inspection waited at least five seconds initially and used readiness checks around images, layout, and finite motion. Perpetual animations were temporarily paused during those checks and then resumed. This does not provide a motion recording or prove that every delayed state appeared.

Many sampled elements report `animation: none`. That does not rule out animation on a parent, pseudo-element, or script-controlled carousel. A transition field containing only `all` is not evidence of a nonzero transition duration.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Introductory canvas | Warm cream with a pale-green loop | Gives the graphical brand and people photography a calm setting. |
| Discovery region | Large green field with a curved upper boundary | Groups search and workplace discovery. |
| Search and pickup surfaces | White, with restrained corner rounding | Separates dense controls and job information from large color fields. |
| Individual pickup cards | Unboxed content, square photos, compact labels | Enables comparison without excessive visual containers. |
| Tags and utility controls | Fine warm-gray outlines or pale-olive fills | Adds structure at small scale. |
| Footer | Charcoal with white hierarchy, subdued links, and a green action | Accommodates a large secondary navigation directory. |

There is no prominent general shadow system in the supplied captures. Large color fields, spacing, rules, and image boundaries establish hierarchy. Do not introduce floating cards merely because shadow variables exist among framework defaults.

## Imagery

The photographs show hospitality as work performed by people. The desktop hero depicts a staff member welcoming a guest, with another colleague behind her. The mobile hero shows two staff members in different uniforms talking outdoors. Pickup photographs include serving drinks, discussing work at reception, and conversations between chefs in a real kitchen.

Keep faces, gestures, uniforms, and enough workplace context in each crop. Color remains natural: greenery, warm wood, navy uniforms, white shirts, and stainless-steel kitchens. The interface supplies the green identity; the photographs do not need a green overlay.

The hero uses a landscape crop near `1.52:1` with small rounded corners. Pickup images are approximately `3:2` with square corners. These ratios are visually estimated, since image-element rectangles were not included in the supplied sample.

Supporting illustrations use sparse linework: a document and magnifier for searching, and a black figure with a laptop near the news area. Utility symbols are small and functional. No icon-library name or illustrator identity is established by the original-page evidence.

### Observed Asset References

Exact image URLs and filenames were not supplied. The following references identify visible assets by location rather than inventing source paths.

| Asset | Evidence location | Treatment |
| --- | --- | --- |
| Large desktop brand lockup | Desktop hero | Roof-like symbol beside a tall Japanese phrase arrangement; black and green lettering. |
| Wide mobile brand lockup | Mobile hero | Compact horizontal composition fitted into the narrower heading region. |
| Pale-green loop | Desktop and mobile hero | Broad decorative stroke behind the content, cropped differently by viewport. |
| Reception photograph | Desktop hero | Approximately `700 × 460px`; foreground staff member and guest context. |
| Outdoor staff photograph | Mobile hero | Approximately `335 × 220px`; two colleagues in conversation. |
| Job photographs | Desktop pickup capture | Service, reception, and kitchen scenes in consistent landscape frames. |
| Search line illustration | Desktop and mobile search introduction | Light document outline combined with a magnifier. |
| Laptop figure | Top of desktop footer capture | Sparse black illustration on a pale background above the footer. |
| Reversed brand lockup | Desktop footer | White identity on charcoal. |

Use authorized original assets when available. If new photography is commissioned, match its workplace specificity and framing rather than replacing the people with generic hotel interiors.

## Layout & Responsive Behavior

### Desktop Composition

The page uses several nested widths rather than one universal container. The hero brand begins at x `92.5`; the facility section is a centered `1200px` wrapper; the pickup panel spans approximately `1265px`; the footer content spans approximately `1280px`.

The hero combines a roughly `424px` text column and `700px` image. Its broad spacing gives way to compact metadata within the directory. The green curved boundary and the large white pickup panel provide the strongest section-level shapes.

### Mobile Composition

| Region | Observed adaptation |
| --- | --- |
| Navigation | Desktop top navigation disappears from the visible flow; a five-cell bottom dock provides primary access. |
| Brand | Moves to x `20`, y `60`, in a compact wide arrangement; the descriptor plaque remains near the upper-right corner. |
| Hero | Brand, copy, photo, action/pagination, then condition strip. |
| Hero text | Reduces to `14px / 22.4px`, with normal tracking. |
| Photo | Fills the `335px` inner width of the measured `375px` document. |
| Search | Adds the visible `条件から絞り込む` trigger; keyword links wrap below. |
| Facilities | All six cards stack vertically, with `295px` links and `60px` gaps. |
| Pickup jobs | `315px` cards remain in a horizontal sequence with `20px` gaps. |
| Collection actions | Facility, pickup, and column browse-all actions follow their content in mobile reading order. |
| Footer | Dense sitemap becomes compact navigation/disclosure rows, followed by centered social and legal content. |

The two mobile card behaviors are essential. Making both sections horizontal would shorten the workplace storytelling; making both vertical would remove the pickup section's compact browsing pattern.

### Breakpoints and Limits

The evidence contains framework breakpoint variables including `992px`, `1200px`, and `1400px`, but not the actual media rules responsible for each component. The supplied `--vw` values are `14.4px` and `3.9px`, consistent with one percent of each configured viewport; no complete fluid-sizing formula was supplied.

The Quick Start uses `992px` as a recommended layout switch. This is an implementation choice, not a verified original breakpoint. Intermediate tablet widths, landscape phones, browser zoom, and safe-area devices were not inspected.

## Do’s and Don’ts

### Do

- Preserve the cream, main green, dark ink, and restrained orange relationship.
- Keep the brighter mobile Menu green distinct from the large-section green.
- Use the measured Zen Kaku Gothic New weights and component-specific mobile sizes.
- Treat the brand lettering as artwork with desktop and mobile compositions.
- Lead with people working, talking, and serving in recognizable hospitality settings.
- Preserve the shallow green curve and the pale loop as different decorative elements.
- Keep individual pickup cards unboxed within their shared white panel.
- Retain salary, location, benefits, and publication dates as separate readable layers.
- Stack facilities vertically on mobile while retaining the horizontal pickup-job arrangement.
- Preserve context-specific category-badge colors instead of assuming one universal mapping.

### Don’t

- Don't reduce the homepage to one promotional action; it supports search, workplace exploration, editorial reading, and account access.
- Don't replace the brand artwork with a large generic text heading.
- Don't apply orange to every action or use framework blue as a primary brand color.
- Don't add gradients, heavy shadows, glass effects, or oversized rounded corners to every card.
- Don't render all four hero descriptions simultaneously.
- Don't infer that pale-gray account links are disabled solely from their appearance.
- Don't hardcode the captured `375px` document width or reproduce its gutter as page padding.
- Don't invent carousel timings, drawer animations, or tested swipe behavior.
- Don't hide essential job metadata to make the cards look more spacious.
- Don't assume that every section shares the same mobile layout or desktop container width.

## Recommended Implementation Additions

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

- Give each hero dot a descriptive accessible name and current-state indication. Keep the visible dot small while enlarging its hit area.
- If the hero or condition track moves automatically, provide pause behavior and respect reduced-motion preferences. Make duplicated track content noninteractive and hidden from assistive technology.
- Implement the mobile menu and filter disclosure with explicit expanded states, keyboard operation, and appropriate focus handling. Concealed navigation should not remain keyboard-focusable.
- Add clear focus indicators to cards, pills, keyword links, and the bottom dock.
- Reserve bottom space for the dock and device safe area so the final content and focused controls remain reachable.
- Review the contrast of muted footer links, pale account text, and small white category labels. Preserve the hierarchy while adjusting colors where needed.
- Use descriptive image alternatives for meaningful workplace photographs; mark the loop and purely decorative illustrations as decorative.
- Keep job titles complete and allow natural card heights. Any truncation should preserve access to the full title.
- For a semantic adaptation, place card titles beneath their section heading at a consistent heading level, even though sampled source cards use H2 elements.

## Agent Prompt Guide

### Quick Color Reference

- Cream canvas: `#F5F4EA`.
- Main green: `#338751`.
- Mobile Menu fill: `#13913A`.
- Orange login and selected category accents: `#EA7D3E`.
- Main text: `#2E2E2E`; secondary text: `#666666`.
- White panels and pill controls: `#FFFFFF`.
- Mobile condition caption: `#E8E7D1`.
- Pale loop: approximately `#DFEED0`; footer: approximately `#2E2E2E`.

### Overall Prompt

“Create a Japanese hospitality careers homepage inspired by the observed Moshiyado design. Use cream `#F5F4EA`, forest green `#338751`, dark ink `#2E2E2E`, restrained orange `#EA7D3E`, and Zen Kaku Gothic New at weights 500 and 700. Introduce the service with supplied brand artwork, a broad pale-green loop, short copy, an outlined white pill action, and a landscape photograph of hospitality staff. Lead into a green discovery region through a shallow convex curve. Include practical condition links, workplace-story cards, a shared white pickup-job panel, editorial content, and a dense charcoal footer. On mobile, use 20px outer insets, a five-cell bottom dock, vertically stacked facility cards, and a horizontal row of pickup jobs. Keep metadata compact, photographs natural, and shadows absent.”

### Example Component Prompts

1. **Hero:** “Build a cream two-column desktop introduction with a 400px graphical brand, 16px explanatory copy, a 216 × 48px outlined pill, and an approximately 700 × 460px staff photograph. Add four small green pagination circles below the image. On mobile, reorder to brand, copy, image, action with dots, and conditions. Render one selected state; make animation a separate implementation decision.”
2. **Pickup job card:** “Create an unboxed job card with a square-cornered 3:2 staff photo, a small category badge inset 10px, a pale employment chip, a bold multi-line title, gray facility name, green location and salary icons, fine outlined benefits, and a gray publication period. Use 20px titles on desktop and 18px on mobile.”
3. **Facility collection:** “Create six workplace-story entries in three desktop columns. Each entry includes category, photo, editorial title, facility name, location, benefits, and publication period. Keep the sampled category badges orange. On mobile, stack approximately 295px-wide links with generous 60px gaps.”
4. **Search introduction:** “Use a broad green field with a shallow curved top, a white 30px desktop or 22px mobile heading, and a document-and-magnifier line illustration. Place filters on white surfaces and wrap compact outlined keyword links. Show a full-width mobile disclosure trigger with a plus sign.”
5. **Mobile dock:** “Create five equal bottom-navigation cells with line icons over 10px bold captions. Use brighter green `#13913A` for Menu and white for the remaining cells, with fine dividers. Reserve safe-area and content clearance. Do not infer disabled behavior from a muted bookmark appearance.”
6. **Footer:** “Create a charcoal desktop footer with a white brand block, circular social outlines, a green employer pill, a detailed job taxonomy, and a thin legal divider. On mobile, use separated navigation rows, a condition disclosure, centered social controls, and vertically arranged legal links.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted production CSS. Measured colors, typography, and key dimensions are preserved. The ribbon and photo radii, curved boundary, footer shades, breakpoint, hover endpoints, and scroll snapping are recommended approximations.

The hero CSS expects `.hero-copy` to contain `.hero-brand`, `.hero-intro`, `.hero-action`, and `.hero-conditions`; `.hero-media` contains `.hero-photo` and `.hero-dots`. On mobile, `display: contents` lets those children follow the observed order. Supply responsive brand artwork and authorized photography. No original asset paths are assumed.

```css
:root {
  /* Measured source colors and explicit visual approximations */
  --color-cream: #f5f4ea;
  --color-green: #338751;
  --color-utility-green: #13913a;
  --color-orange: #ea7d3e;
  --color-ink: #2e2e2e;
  --color-muted: #666;
  --color-surface: #fff;
  --color-olive: #e8e7d1;
  --color-rule: #e1e1d0;
  --color-ribbon: #dfeed0;
  --color-footer: #2e2e2e;
  --color-footer-muted: #b8b8b8;

  --font-ui: 'Zen Kaku Gothic New', sans-serif;
  --font-latin: 'Public Sans', sans-serif;
  --weight-body: 500;
  --weight-bold: 700;
  --text-body: 16px;
  --text-card: 20px;
  --text-meta: 12px;
  --text-section: 30px;

  --radius-small: 4px;
  --radius-photo: 8px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --space-mobile: 20px;
  --dock-height: 59px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --motion-color: 200ms ease-out;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-cream);
  font: var(--weight-body) var(--text-body)/1.5 var(--font-ui);
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; }

:where(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--color-green);
  outline-offset: 4px;
}

/* Supply the actual brand and decorative artwork as assets. */
.hero {
  position: relative;
  isolation: isolate;
  padding-bottom: 138px;
  background: var(--color-cream);
}

.hero-ribbon {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 424px) minmax(0, 700px);
  gap: 96px;
  width: min(1240px, calc(100% - 80px));
  margin-inline: auto;
  padding-top: 168px;
}

.hero-copy { padding-top: 32px; }
.hero-brand { width: min(100%, 400px); margin: 0; }
.hero-brand img { width: 100%; height: auto; }

.hero-intro {
  margin: 42px 0 32px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .06em;
}

.hero-photo {
  width: 100%;
  aspect-ratio: 35 / 23;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 216px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--motion-color),
    border-color var(--motion-color),
    background-color var(--motion-color);
}

.pill--employer {
  width: min(100%, 292px);
  min-height: 52px;
  border-color: var(--color-green);
  color: white;
  background: var(--color-green);
}

.hero-dots {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.hero-dot {
  position: relative;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--color-green);
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--motion-color);
}

/* Recommended larger hit area without changing visible geometry. */
.hero-dot::before {
  content: '';
  position: absolute;
  inset: -7px -4px;
}

.hero-dot[aria-current='true'] { background: var(--color-green); }
.hero-conditions { margin-top: 66px; }

.conditions-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.conditions-track {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  overflow-x: auto;
  white-space: nowrap;
  background: white;
  font-size: 13px;
  letter-spacing: .06em;
}

/* Static, reachable links are the default; no invented ticker timing. */
.conditions-track a { flex: none; text-decoration: none; }

.discovery-band {
  position: relative;
  padding: 40px 0 96px;
  background: var(--color-green);
}

/* Recommended approximation of the shallow curved boundary. */
.discovery-band::before {
  content: '';
  position: absolute;
  inset: -80px 0 auto;
  height: 80px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--color-green);
}

.discovery-title {
  margin: 0;
  color: white;
  text-align: center;
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.5;
}

.search-panel {
  width: min(1120px, calc(100% - 40px));
  margin: 40px auto 0;
  padding: 56px;
  border-radius: var(--radius-panel);
  background: white;
}

.filter-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.filter-fields label { display: grid; gap: 8px; }
.filter-fields select { width: 100%; min-height: 44px; }

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 3px 7px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-small);
  background: white;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 300ms;
}

.facility-section {
  width: min(1200px, calc(100% - 80px));
  margin: 100px auto 0;
  padding-inline: 40px;
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 92px;
  padding: 24px;
}

.pickup-panel {
  width: calc(100% - 160px);
  max-width: 1265px;
  margin-inline: auto;
  padding: 72px 80px;
  border-radius: var(--radius-panel);
  background: white;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 42px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-rule);
}

.section-header h2 { margin: 0; font-size: 32px; line-height: 1.25; }
.section-header p { margin: 0; }
.section-header .pill { flex-shrink: 0; margin-left: auto; }
.section-kicker { display: block; color: var(--color-green); font-size: 15px; }

.job-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 44px;
  margin-top: 40px;
}

.job-card, .facility-card {
  display: block;
  min-width: 0;
  color: var(--color-ink);
  text-decoration: none;
}

.card-media { position: relative; }
.card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.category-label {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding-inline: 10px;
  border-radius: 4px;
  color: white;
  background: var(--color-orange);
  font-size: 12px;
  line-height: 1;
}

/* Apply this variant to the relevant pickup cards, not all ryokan cards. */
.category-label--green { background: var(--color-green); }
.card-copy { padding-inline: 5px; }

.employment-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 18px 0 14px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-olive);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.5;
}

.card-title {
  margin: 0;
  font-size: var(--text-card);
  font-weight: 700;
  line-height: 1.5;
  transition: color var(--motion-color);
}

.card-facility { margin: 8px 0 0; color: var(--color-muted); }
.card-meta { display: flex; align-items: baseline; gap: 6px; margin: 9px 0 0; font-size: 12px; }
.card-meta svg { flex: none; width: 16px; height: 16px; color: var(--color-utility-green); }
.card-benefits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.card-benefits span { padding: 1px 6px; border: 1px solid var(--color-rule); border-radius: 3px; font-size: 12px; }
.card-period { margin: 16px 0 0; color: var(--color-muted); font-size: 12px; }

.site-footer { padding: 80px 0 40px; color: white; background: var(--color-footer); }
.footer-inner { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.footer-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 100px; }
.footer-links { color: var(--color-footer-muted); }
.footer-legal { margin-top: 60px; padding-top: 32px; border-top: 1px solid #555; }
.site-footer :focus-visible { outline-color: white; }
.mobile-dock { display: none; }

/* Recommended hover endpoints; only transition durations were measured. */
@media (hover: hover) {
  .pill:not(.pill--employer):hover { color: var(--color-green); border-color: var(--color-green); }
  .keyword:hover { border-color: var(--color-green); }
  .job-card:hover .card-title,
  .facility-card:hover .card-title { color: var(--color-green); }
}

/* Recommended breakpoint; the original component media rules are unknown. */
@media (max-width: 991px) {
  :root { --text-card: 18px; --text-section: 22px; }
  body { padding-bottom: calc(var(--dock-height) + var(--safe-bottom)); }
  html { scroll-padding-bottom: calc(var(--dock-height) + var(--safe-bottom) + 16px); }
  .desktop-header { display: none; }
  .hero { padding-bottom: 60px; }

  .hero-grid {
    width: calc(100% - 40px);
    padding-top: 60px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'brand brand'
      'intro intro'
      'photo photo'
      'action dots'
      'conditions conditions';
    gap: 0;
  }

  .hero-copy, .hero-media { display: contents; }
  .hero-brand { grid-area: brand; width: 100%; padding-right: 30px; }
  .hero-intro { grid-area: intro; margin: 16px 0 26px; font-size: 14px; line-height: 1.6; letter-spacing: normal; }
  .hero-photo { grid-area: photo; }
  .hero-action { grid-area: action; width: 192px; max-width: 100%; min-height: 46px; margin-top: 24px; font-size: 14px; }
  .hero-dots { grid-area: dots; align-self: start; margin-top: 24px; }
  .hero-conditions { grid-area: conditions; display: flex; min-width: 0; margin-top: 30px; }
  .conditions-label { display: grid; place-items: center; flex: 0 0 60px; margin: 0; border-radius: 4px 0 0 4px; background: var(--color-olive); font-size: 11px; }
  .conditions-track { flex: 1; min-width: 0; min-height: 36px; gap: 12px; font-size: 12px; }

  .discovery-band { padding-top: 54px; }
  .discovery-band::before { top: -20px; height: 20px; }
  .discovery-title { line-height: 1.4; }
  .search-panel { margin-top: 24px; padding: 20px; border-radius: 4px; }
  .filter-fields { grid-template-columns: 1fr; }

  .facility-section { width: 100%; margin-top: 48px; padding-inline: 20px; }
  .facility-grid { grid-template-columns: 1fr; gap: 60px; padding: 20px; }
  .pickup-panel { width: 100%; padding: 48px 0; border-radius: 0; }
  .section-header { display: block; margin-inline: 20px; }
  .section-header h2 { font-size: 25px; line-height: 1.32; }
  .section-header p { margin-top: 16px; font-size: 14px; line-height: 1.6; }
  .section-header .pill { margin-top: 24px; }

  /* Native scrolling and snapping are recommended mechanisms. */
  .job-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 60px);
    gap: 20px;
    margin-top: 24px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
  }
  .job-card { scroll-snap-align: start; }
  .card-facility { font-size: 15px; }

  .site-footer { padding: 0 20px 40px; }
  .footer-inner { width: 100%; }
  .footer-layout { display: block; }
  .footer-legal { text-align: center; }

  .mobile-dock {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(var(--dock-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: white;
  }

  .mobile-dock > :is(a, button) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: var(--dock-height);
    padding: 6px 2px;
    border: 0;
    border-left: 1px solid var(--color-rule);
    color: var(--color-ink);
    background: white;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
  }

  .mobile-dock > .dock-menu {
    border-left: 0;
    color: white;
    background: var(--color-utility-green);
  }
  .mobile-dock svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .hero-dot, .keyword, .card-title { transition: none; }
  .job-grid { scroll-snap-type: none; }
}
```

The CSS establishes the visual shell and card arrangements. Use a real disclosure controller or native disclosure element for mobile filters; do not merely hide form controls at the breakpoint. Place mobile collection actions after their collections in the markup. Carousel selection, menu focus management, filtering, and form submission require separate behavior. The supplied evidence does not justify choosing exact original animation timings for them.

The snippet has not been executed or browser-tested as part of this evidence-only reference. Font loading and image assets must be provided by the implementing project.

### Tailwind v4 Token Mapping

Optional mapping for a project that already uses Tailwind v4. These aliases do not imply that the original website uses Tailwind.

```css
@theme inline {
  --color-cream: #f5f4ea;
  --color-brand: #338751;
  --color-utility: #13913a;
  --color-accent: #ea7d3e;
  --color-ink: #2e2e2e;
  --color-muted: #666;
  --color-olive: #e8e7d1;
  --color-rule: #e1e1d0;

  --font-ui: 'Zen Kaku Gothic New', sans-serif;
  --font-latin: 'Public Sans', sans-serif;
  --text-card: 20px;
  --text-meta: 12px;
  --text-section: 30px;

  --radius-tag: 4px;
  --radius-photo: 8px;
  --radius-panel: 16px;
  --spacing-mobile-inset: 20px;
  --spacing-job-gap: 44px;
  --spacing-dock: 59px;
}
```

## Sources & Evidence

- **Inspected original and final website:** [https://moshiyado.com/](https://moshiyado.com/). The supplied browser record reports HTTP `200` and the same original and final URL.
- **Capture timestamp:** September 22, 2026, `2026-09-22T14:29:32.037Z`.
- **Desktop evidence:** configured viewport `1440 × 1000`; measured document width `1425px`; document height approximately `6411px`. Supplied visual captures show the opening hero, pickup-job section, and footer.
- **Mobile evidence:** configured viewport `390 × 844`; measured document width `375px`; document height approximately `8209px`. Supplied visual captures show the opening hero and footer with persistent bottom navigation.
- **Rendered evidence:** page title and text, link destinations, custom properties, computed font and transition values, and sampled element rectangles. Detailed style samples cover navigation, hero, conditions, facilities, and pickup jobs; later sections have more limited visual and textual evidence.
- **Observed destinations, not separately inspected pages:** `/job`, `/facility`, `/about`, `/column`, `/news`, account routes, and filter-query links were present in the homepage evidence. Their destination layouts and submission behavior are outside this reference's scope.
- **Interaction limits:** initial waiting and scroll-based collection were reported. No supplied click, hover, drawer-opening, filter-submission, or swipe test establishes those behaviors. Readiness checks do not prove semantic completeness or reveal every delayed state; shared workers and service workers were disabled during inspection.

This reference describes the current homepage represented by the supplied captures. Measured values, visual estimates, and recommended implementation choices remain explicitly separate.