# Snow Peak FIELD SUITE SPA HEADQUARTERS — Style Reference

> Forest and architecture at full scale, followed by a quiet editorial sequence of photographs, vertical headings, and generous white space.

**Website:** [Snow Peak FIELD SUITE SPA HEADQUARTERS](https://www.snowpeak.co.jp/fieldsuitespa/hq/)
**Original URL:** https://www.snowpeak.co.jp/fieldsuitespa/hq/
**Final URL:** https://www.snowpeak.co.jp/fieldsuitespa/hq/
**Theme:** a light editorial canvas with white identity elements over photographic sections.
**Inspected:** October 2, 2026, 04:24 JST; supplied retrieval timestamp: October 1, 2026, 19:24:25.695 UTC.
**Viewports:** desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px.
**Scope:** the current facility homepage, using supplied desktop hero, accommodation, and footer captures; mobile hero and footer captures; and rendered DOM measurements covering the homepage. Linked facility pages, booking services, and open-menu states were not inspected.

This is a resort and facility homepage with several distinct visitor journeys: bathing, dining, accommodation, outdoor experiences, news, and reservations. Its long-form presentation introduces those services while providing practical hours, contact information, and links to detailed pages.

The first screen gives almost all of its area to an aerial view of the building and surrounding forest. A centered white emblem and wordmark establish identity; a small Japanese statement supplies the proposition. After the hero, the design changes to an almost-white canvas. Large photographs, offset companion images, vertical Japanese section titles, small English labels, and fine link rules create an editorial rhythm. Color comes mainly from the landscape, timber, and tent fabric rather than from interface accents.

The defining relationship is between photographic scale and typographic restraint. Preserve the spacious image compositions and the separation between evocative content and practical information. The footer is a substantial service directory, not merely a copyright strip.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed-style records. Values are CSS pixels unless stated otherwise; some decimals are rounded for readability.
- **Visual estimates** come from the supplied current-page screenshots. They are identified explicitly and are not pixel-sampled or stylesheet-confirmed values.
- **Derived** values are calculations from measured geometry, such as the gap between two element boxes.
- **Recommendations** describe a reusable implementation. Proposed breakpoints, interaction feedback, accessibility improvements, and CSS selectors are not claims about the original implementation.
- The DOM includes additional navigation content that is absent from the closed-menu screenshots. Its measured boxes do not prove that it was visible to visitors in those states.
- Computed font-family declarations establish the requested font stacks. They do not independently establish which font file supplied every rendered glyph.
- The CSS below uses descriptive aliases. The only supplied source custom properties were WordPress font-size presets; those presets do not define the measured interface type scale.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Page White | `#fbfbfb` | `--surface-page` | Measured body background at both viewports; main editorial canvas |
| Charcoal Ink | `#1a1918` | `--ink-primary` | Measured body text, headings, detail links, and footer text |
| Reversed White | `#ffffff` | `--ink-inverse` | Measured hero statement, desktop hero navigation, awards links, and reservation text |
| Secondary Gray | `#4e4e4e` | `--ink-secondary` | Measured secondary links in additional navigation DOM; open-menu appearance was not captured |
| Muted Gray | `#7a7a7a` | `--ink-muted` | Measured legal and policy links in additional navigation DOM |
| Notice Ink | `#040404` | `--ink-notice` | Measured important-notice heading and article link beneath the hero |
| Reservation Charcoal | Approximately `#454545` | `--surface-reservation` | Visual estimate of the persistent booking tab on the light footer |
| Footer Gray | Approximately `#f6f6f6` | `--surface-footer` | Visual estimate of the footer surface; its wrapper background was not supplied |
| Hairline Gray | Approximately `#dddddd` | `--line-soft` | Visual estimate of footer separators and short rules |

The forest greens and warm browns are photographic colors, not demonstrated brand-color tokens. Do not convert the green landscape into a green button system or tint the entire editorial canvas beige.

Some sampled anchors have transparent computed backgrounds while appearing over a charcoal tab or photographic panel. Their own background declarations do not describe the complete rendered surface. The relevant surrounding layers were not measured.

No selectable themes or dark-mode control were evidenced. The dark appearance of the opening screen comes from its imagery and white foreground content.

## Tokens — Typography

### Japanese Display Typography

**Observed leading family:** `fot-tsukuaoldmin-pr6n`.

The declared stack continues through Japanese Mincho families, including YuMincho and Hiragino Mincho ProN, then serif fallbacks. The identifier above is preserved exactly; no additional font branding or font-file attribution is inferred.

This stack appears on primary navigation, Japanese section headings, the hero statement, accommodation names, the telephone number, and reservation buttons. Most display headings use weight `400`. Desktop primary navigation and the hero statement use `700`.

The same display stack also styles Latin accommodation names such as `Villa` and `Field Villa`. Do not assign every English word to the English-caption font.

### English Editorial Labels

**Observed leading family:** `EB Garamond`, followed by Mincho and serif fallbacks.

Roles include `Concept`, `Spa & Sauna`, `Restaurant`, `Stay`, `Experience`, `News & Topics`, `Reservation`, mobile `Menu`, news dates, and copyright. Section labels usually use `0.1em` tracking. Their modest scale creates an annotation layer alongside the larger Japanese headings.

### Body and Utility Text

**Observed leading stack:** YuGothic, Japanese aliases, Yu Gothic Medium, Yu Gothic, Hiragino Kaku Gothic ProN, Meiryo, MS PGothic, Arial, Helvetica, Verdana, sans-serif.

Use this Gothic stack for facility descriptions, utility navigation, news text, hours, and address information. The measured body is `15px / 30px` on desktop and `14px / 28px` on mobile.

### Narrative Serif and Detail Links

Concept prose, experience prose, many detail links, hours headings, and the outlined `CONTACT` label use a Mincho stack beginning with YuMincho or its Japanese alias, without the custom display family at the front.

This distinction matters: the page combines custom display typography, English editorial labels, Japanese reading serif, and practical Gothic text.

### Type Scale

| Role | Desktop measured size / line height | Mobile measured size / line height | Weight and tracking |
| --- | --- | --- | --- |
| Body and ordinary facility description | `15 / 30px` | `14 / 28px` | `400`; normal tracking |
| Desktop primary navigation | `18 / 30px` | Not shown as a horizontal header row | `700` |
| Hero statement | `20 / 38px` | `16 / 32px` | `700`; `1.2px` / `0.96px` tracking |
| Award links | `15 / 30px` | `12 / 28px` | `500`; `0.45px` / `0.36px` tracking |
| Concept heading | `36 / 50.4px` | `36 / 61.2px` | `400` |
| Main section heading | `34 / 47.6px` | `30 / 51px` | `400` |
| Standard English section label | `14 / 16.8px` | `13 / 15.6px` | `400`; `0.1em` tracking |
| Concept English label | `17 / 20.4px` | `17 / 20.4px` | `400`; `1.7px` tracking |
| Accommodation or restaurant title | `28 / 30px` | `28 / 28px` | `400` |
| Experience statement | `38 / 64.6px` | `32 / 54.4px` | `400` |
| Concept prose | `15 / 30px` | `15 / 30px` | `400`; `1.5px` tracking |
| Experience prose | `15 / 31.95px` | `15 / 31.95px` | `400` |
| Horizontal detail link | `14 / 30px` | `14 / 28px` | `500` |
| Vertical section detail link | `20 / 30px` | Changes to horizontal detail treatment | `500` |
| News title | `16 / 32px` | `16 / 32px` | `500` |
| News date | `14 / 19.6px` | `12 / 16.8px` | `400`; `0.1em` tracking |
| News excerpt | `13 / 26px` | `12 / 24px` | `400` |
| Reservation heading | `36 / 54px` | `28 / 42px` | `400` |
| Reservation panel button | `20 / 32px` | `18 / 28.8px` | `400` |
| Footer primary navigation | `24 / 30px` | `18 / 28px` | `400` |
| Footer hours heading | `18 / 36px` | `14 / 28px` | `400` |
| Footer hours text | `13 / 26px` | `13 / 26px` | `400` |
| Telephone number | `24 / 28.8px` | `24 / 28.8px` | `400` |
| CONTACT label | `12 / 16.8px` | `10 / 14px` | `400` |
| Copyright | `11 / 30px` | `11 / 28px` | `400`; `0.66px` tracking |

The source HTML root computes to `10px` at both viewports. The Quick Start retains explicit pixel sizes and does not require changing a project's root size.

The hero and footer wordmarks are graphical lockups. Their inherited heading font sizes do not describe the artwork. Use the actual authorized logo assets rather than rebuilding the wordmark with ordinary text.

## Tokens — Spacing & Shapes

### Spacing Scale

There is no demonstrated single spacing grid. Several distinct rhythms coexist: compact utility typography, approximately 20–30px text gaps, and much larger editorial separations.

| Use | Measured or derived value | Interpretation |
| --- | --- | --- |
| Desktop primary-nav padding | `27px 25px` | An `84px` high link box around an `18px` label |
| Desktop utility-nav padding | `32px 17px` | A `94px` high link box |
| Accommodation title to description | `20px` | Derived from adjacent element boxes |
| Accommodation description to detail link | `50px` desktop; `20px` mobile | Derived gap before the link box |
| Hero logo-wrapper to statement | `45px` desktop; `38px` mobile | Derived from measured wrapper boundaries |
| Standard horizontal detail-link padding | `10px 5px 10px 0` | Produces approximately `50px` desktop and `48px` mobile link heights |
| Desktop vertical detail-link padding | `0 10px` | Measured within a `50 × 125px` box |
| Desktop spa-card separation | Approximately `50.5px` | Derived horizontal gap between linked card boxes |
| Desktop spa-card stagger | `77px` | Second card starts below the first |
| Mobile spa-card separation | `22px` | Derived from `247px` card boxes starting at x=20 and x=289 |
| Desktop footer hours columns | `55px` gaps | Derived from successive column boundaries |
| Mobile main-content gutter | Usually `20px` | Produces a `350px` wide content column |
| Mobile header / awards gutter | `24px` / `25px` | Distinct from the main content gutter |
| Mobile footer gutter | `50px` | Produces a narrower `290px` practical-information column |

**Visual estimate:** the accommodation screenshot leaves roughly 150px between the preceding detail-link rule and the next large photograph. Preserve this kind of pause; do not compress every image block into a tightly packed list.

### Border Radius and Rules

| Element | Evidence | Reusable treatment |
| --- | --- | --- |
| Sampled links and buttons | Computed radius `0px` | Square corners |
| Large and inset photographs | Square in screenshots | No rounded image masks |
| Detail links | Thin underline and small chevron visible | Approximately `1px` rule; visual estimate |
| Vertical section link | Thin rule beside vertical text | Approximately `1px` rule; visual estimate |
| CONTACT control | Fine rectangular outline | Square outline, no filled accent |
| Footer divisions | Pale vertical and horizontal rules | Low-contrast structural lines |

No general shadow or raised-card system is visible. Image boundaries, white space, and rules provide structure.

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Document height | `10,675px` | `10,957px` | Measured for this captured content |
| Hero identity wrapper | `344.67 × 220.16px`, x=`547.66`, y=`348.42` | `275.84 × 158.28px`, x=`57.08`, y=`277.86` | DOM wrapper, not exact visible artwork bounds |
| Hero statement box | y=`613.58`, height=`38px` | y=`474.14`, height=`32px` | Measured |
| Header logo wrapper | `190 × 46px` | `120 × 29.05px` | DOM; visibility differs between hero and scrolled captures |
| Persistent reservation tab | `78.69 × 130px`, bottom right | `124.80 × 56.50px`, bottom left | Measured and visible |
| Accommodation copy | x=`186`, width=`918px` | x=`20`, width=`350px` | Measured |
| Desktop section title rail | Japanese title x=`1174.61`; English label x=`1237.20` | Heading returns to x=`20` in normal flow | Measured |
| Main accommodation photograph | Approximately `919px` wide | Not directly measured | Desktop screenshot estimate |
| Companion accommodation photograph | Approximately `260px` wide | Not directly measured | Desktop screenshot estimate |
| Footer content span | x=`152` to approximately `1288`; width approximately `1136px` | x=`50`, width=`290px` for primary content | Desktop derived; mobile measured |
| Footer identity wrapper | `225 × 161.88px` | `122 × 87.77px` | Measured |
| Booking-panel buttons | `225 × 54px` each | `350 × 42.80px` each | Measured |

These measurements describe the captured layouts, not universal fixed dimensions. In particular, the document heights depend on current content and should not be hardcoded.

## Components

### Overlay Header and Menu Trigger

**Role:** primary navigation without displacing the opening image.

On desktop, four Mincho links—`温浴`, `食事`, `宿泊`, and `過ごし方`—occupy the upper central area. Smaller Gothic news and contact links sit to their right. The far-right menu symbol consists of three thin, vertical strokes of unequal length, rather than a conventional horizontal hamburger.

The hero screenshot emphasizes the central identity instead of showing a prominent duplicate logo at the upper left. Scrolled screenshots show a compact horizontal logo at the upper left and the menu strokes at the upper right. No solid header bar is visually apparent in those captures.

On mobile, the horizontal navigation row disappears. A small `Menu` label accompanies the vertical-stroke symbol. The logo is visible in the scrolled footer capture, while the opening capture leaves the upper-left image unobstructed.

**Evidence limit:** the mobile Menu label's sampled color is white, while its supplied capture appears dark. The final compositing or state-specific styling is not established. Implement explicit contrast states in a new build rather than inferring an undocumented blending technique.

### Full-Viewport Hero

**Role:** establish the relationship between the resort and its landscape.

An aerial view fills the initial viewport. The desktop capture gives substantial area to forest, with the building near the upper part of the frame. The mobile capture keeps the building and tree canopy legible within a narrow portrait composition.

Foreground anatomy:

1. A centered white emblem.
2. The FIELD SUITE SPA wordmark and HEADQUARTERS line.
3. The smaller Snow Peak mark.
4. A separated Japanese statement: `浴・食・泊の自然を感じる複合型リゾート`.
5. Two small award-related links near the lower left.
6. A persistent accommodation-booking tab at a viewport edge.

The measured desktop identity wrapper plus statement occupies approximately y=348–652, centered around the viewport midpoint. On mobile the equivalent group occupies approximately y=278–506, with its center about 30px above the viewport midpoint.

The logo carries the visual identity; the statement is only `20px` desktop and `16px` mobile. Do not replace this balance with an oversized multi-line headline.

The supplied evidence does not establish whether the aerial media is a video, a slideshow, or a static image. Its playback, timing, sound, and controls remain unverified.

### Awards and Important Notice

**Role:** surface recognition and timely operational information at separate visual levels.

The two award links sit over the hero photograph in white Gothic text. Desktop measurements begin at x=52 and y=908; mobile measurements begin at x=25 and y=716. On mobile, their lower edge remains above the booking tab.

Immediately after the hero, a compact important-notice row pairs a bold label with a current article link. At desktop, the label and link share a horizontal arrangement. At mobile, they stack at x=25. The notice uses near-black text and small type rather than a colored alert card.

Recognition labels are page content. Their presence does not establish independent verification of the awards.

### Concept Introduction

**Role:** slow the reading pace and articulate the facility's relationship with nature.

Desktop geometry places the English `Concept` label and a two-column Japanese heading toward the right, with narrow-line prose extending leftward and a vertical detail link farther left. The heading's narrow, tall box and the prose geometry support a vertical editorial composition.

On mobile, the concept heading retains its vertical arrangement and `36px` size. The prose moves below it into a `350px` wide, `540px` high box with `15px / 30px` Mincho text and `1.5px` tracking. Its detail link becomes horizontal.

This is the main exception to the broader mobile rule that section titles become horizontal. Preserve the distinction rather than applying one writing-mode reset to every heading.

### Bilingual Section Rail

**Role:** label a large section while leaving most of its width available to imagery.

For spa, dining, accommodation, and experiences, the desktop section heading sits in a narrow rail to the right of the main composition. A Japanese title uses `34px` display type; a smaller English label occupies a neighboring vertical line. A vertical `詳しくみる` link appears beneath the Japanese heading, with a fine line and directional mark.

At mobile widths, ordinary section rails move before their content. The English label becomes a horizontal `13px` eyebrow, the Japanese heading becomes `30px / 51px`, and the detail link takes the horizontal underline treatment.

The news section uses a related desktop rail on the left. Do not force all section labels into one identical side position.

### Spa and Sauna Pair

**Role:** provide direct access to two distinct bathing experiences.

The desktop DOM records two tall linked boxes, each approximately `364.73 × 506.53px`. The second begins `77px` lower, creating a staggered pair. A descriptive line follows, then separate links for the lounge and bathing-area information.

On mobile, both linked boxes start at the same vertical position and remain `247px` wide. The second begins at x=289 and extends beyond the 390px viewport. This establishes a lateral sequence rather than a simple stacked pair.

**Evidence limit:** horizontal dragging, native scrolling, automatic advancement, and carousel controls were not exercised. A keyboard-accessible native horizontal scroller is a suitable recommendation, not a verified source behavior.

### Accommodation Photo Composition

**Role:** show a place as both an architectural whole and an intimate experience.

The accommodation screenshot shows a large villa-interior image with a smaller exterior photograph overlapping its upper-right region. Below it, the next composition reverses the emphasis: a large warm tent-interior photograph starts farther right, while a smaller outdoor tent image overlaps from the left.

The large photographs are approximately 919px wide; companion images are approximately 260px wide. The combined composition spans roughly x=55 to x=1104. Copy consistently starts around x=186, rather than aligning with every photograph's left edge.

Below each composition, use:

- A regular `28px` title such as `Villa` or `Field Villa`.
- A short Gothic description separated by 20px.
- A narrow underlined detail link, separated by a larger desktop pause.
- Generous empty canvas before the next composition.

These are open editorial arrangements, without enclosing card backgrounds, corner rounding, or shadows. The mobile DOM confirms a `350px` copy width, but does not establish the exact mobile image-overlap treatment.

### Restaurant Features

**Role:** distinguish dining experiences while sharing the accommodation section's spacious editorial language.

The rendered content includes `Restaurant 雪峰` and a separate casual-dining description. Some headings are image-bearing elements with empty text fields; their inherited font size should not be mistaken for the size of any logo artwork.

The measured text blocks use the same desktop x=186, width=918px alignment as the accommodation features. Mobile text returns to the standard x=20, width=350px column. Detail links lead to separate dining pages.

The supplied screenshots do not directly show the dining photographs. Their subjects, crop details, and any transitions should not be invented from the facility descriptions.

### Detail Link

**Role:** provide a quiet but consistent route to deeper information.

The horizontal form is approximately `130.59 × 50px` on desktop and `130.59 × 48px` on mobile. It pairs a small Mincho label with a fine right-facing chevron and a bottom rule. There is no surrounding filled button surface.

The desktop vertical form is `50 × 125px`, with `20px` type and a rule alongside the text. Use actual vertical writing for Japanese text in an adaptation, not a rotated image of the entire control.

For accessibility, retain the visible `詳しくみる` label while supplying context through surrounding headings or an accessible name that identifies the destination.

### Experience Statement

**Role:** introduce activities through an evocative editorial statement.

On desktop, a three-line `38px / 64.6px` heading occupies a roughly `330px` wide text column. The supporting Mincho paragraph uses `15px / 31.95px`. On mobile, the statement becomes `32px / 54.4px` within the `350px` main column.

The mobile detail link follows the paragraph. This is an actual structural change from the desktop section-rail link position. Preserve the relationship between statement, explanation, and action rather than keeping an empty desktop sidebar.

### News Entry

**Role:** present current information within the same restrained visual system.

A dated article entry combines an EB Garamond date, Gothic title, smaller excerpt, and a detail-link treatment. The measured desktop entry is approximately `772.47px` wide and uses flex layout; the mobile entry is `305px` wide and uses block layout.

The title remains `16px` on both viewports. The excerpt decreases from `13px / 26px` to `12px / 24px`. The captured article is dated September 7, 2026 and announces the October event calendar.

The article container itself is an anchor. Its internal detail label should not become a nested interactive link when rebuilding this anatomy.

### Reservation Panel

**Role:** gather the three booking routes after the editorial introduction.

The panel contains a small English label, a Japanese reservation heading, supporting text, and three destination groups: accommodation, restaurant, and group use. Each group has explanatory copy above an outlined button.

Desktop buttons measure `225 × 54px`, arranged at x=345, 607.5, and 870: a derived `37.5px` gap. Mobile buttons stack at x=20 and fill a `350px` column, with measured heights of approximately `42.8px`.

The desktop footer capture shows the lower part of this panel over subdued, gray-toned photography, with white text and white outlines. The exact overlay color, opacity, and full image composition were not measured.

The supplied link records establish three different external destinations: the Snow Peak accommodation reservation service, TableCheck for restaurant reservations, and a Microsoft form for group use. They do not establish what occurs after those links are activated.

### Persistent Accommodation Reservation Tab

**Role:** keep the main booking route reachable throughout a long page.

On desktop, a narrow charcoal tab is anchored to the bottom-right edge. It measures `78.69 × 130px`, with a small English caption and a vertical Japanese booking label.

On mobile, the same function becomes a short horizontal block at the bottom-left edge, measuring `124.80 × 56.50px`. The English caption sits above the Japanese label. This is a deliberate relocation and reorientation, not a scaled desktop tab.

The tab remains visible in the supplied hero and footer captures. Its recorded destination is the accommodation booking service. No booking modal was demonstrated.

### Footer Directory and Contact Block

**Role:** support practical decisions after the visual introduction.

Desktop anatomy has two main regions separated by a fine vertical rule:

- A wider left region with primary navigation, smaller utility navigation, and four hours columns.
- A right region with the stacked identity mark, facility name, address, phone number, outlined CONTACT control, social icons, and an award mark.

A horizontal rule separates these regions from the bottom legal links and copyright. Primary footer navigation uses `24px` display text; operational details use compact Gothic type.

The contact identity wrapper is `225px` wide on desktop. The telephone remains a prominent `24px`, paired with a small phone symbol. CONTACT is a restrained outline measuring approximately `93.39 × 26.80px`.

On mobile, navigation and legal links precede the hours. Hours become a single column within 50px side gutters. The identity and contact content then form a centered vertical sequence. The logo reduces to `122px` wide, but the phone remains `24px`; CONTACT moves beneath it. Social icons, award mark, and copyright each receive substantial vertical space.

The footer directly displays `© 2026 Snow Peak Inc.` and a corporate-site link. No production credit is established by the inspected page evidence.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can safely be concluded |
| --- | --- | --- |
| Ordinary anchors | Computed transition `0.2s` | A short transition is declared; its changed property and visible hover endpoint are not demonstrated |
| Hero identity heading | Computed transition `1s` | The wrapper has a longer transition; fade, movement, and trigger are not established |
| Sampled text and link nodes | Animation reported as `none` | No active CSS animation is recorded on these sampled nodes; this does not rule out media or JavaScript motion |
| Header during page traversal | Compact logo and menu appear in scrolled captures | Persistent header access is visible; exact switching threshold and mechanism are unverified |
| Reservation tab | Same viewport-edge placement across supplied captures at each size | Persistent booking access is visible |
| Mobile spa sequence | Second linked box extends beyond the viewport | Lateral content exists; its interaction mechanism remains unverified |
| Detail and booking links | Destination URLs are recorded | These are navigation affordances; destination behavior was not tested |
| Menu trigger | Closed-state symbol is visible; additional menu content is in DOM | Menu contents are present, but opening animation, focus behavior, and overlay geometry are unverified |
| Aerial hero | Static captured frames only | Playback, looping, audio, and scene transitions cannot be specified |

The capture process waited for document load, finite animations, layout and text stability, and visible image decoding within bounded time limits. Perpetual animations were temporarily paused for readiness checks and then resumed. That process improves capture stability but does not provide a motion recording or a complete interaction audit.

**Recommended adaptation:** use restrained 200ms opacity or color feedback for links. If a reveal is introduced, keep content visible without JavaScript and support reduced motion. Do not describe parallax, smooth scrolling, autoplay, or a particular easing curve as observed features.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Hero | Full-bleed aerial imagery with white foreground identity | Establish setting and brand |
| Main canvas | Measured `#fbfbfb` | Give images, vertical titles, and copy room to breathe |
| Editorial feature | Bare image and text on the page surface | Avoid separating each experience into a boxed card |
| Detail-link surface | Transparent, with a fine rule | Quiet navigation |
| Booking panel | Subdued photographic background and white outlines | Consolidate reservation choices |
| Persistent booking tab | Dark neutral rectangle; exact fill estimated | Remain legible over both imagery and light canvas |
| Footer | Visually pale gray with fine separators | Organize operational information |

Avoid adding gloss, glass blur, pill controls, or a generalized elevation system. The observed hierarchy is primarily spatial.

## Imagery

The current screenshots establish an architectural and landscape-led photographic language. The opening aerial view places the building within dense forest. The accommodation view combines a broad interior with a smaller exterior, then pairs a warm tent interior with an outdoor tent view. Materials include wood, upholstery, canvas, glass, and foliage.

The photographs feel specific to a place. They show the relationship between inside and outside, rather than isolated luxury objects. The large image provides atmosphere and spatial context; the smaller overlapping image supplies a second perspective.

Keep natural color variation. The warm tent photograph can be strongly amber while the hero remains predominantly green. Interface colors stay neutral so these changes feel coherent.

### Observed Asset References

The supplied evidence does not include image `src` values, SVG filenames, video URLs, or an asset manifest. The following are visual asset roles, not downloadable path references.

| Asset role | Observed in current captures | Implementation guidance |
| --- | --- | --- |
| White stacked brand lockup | Desktop and mobile hero | Use authorized artwork; preserve emblem, wordmark, subtitle, and Snow Peak mark |
| Compact horizontal logo | Scrolled desktop and mobile header | Preserve its separate proportions rather than shrinking the stacked hero logo |
| Dark stacked brand lockup | Footer | Use a dark version on the light surface |
| Aerial facility media | Hero | Keep both architecture and forest recognizable in each viewport |
| Villa interior and exterior pair | Desktop accommodation capture | Retain the primary/companion hierarchy and clean rectangular edges |
| Tent interior and exterior pair | Desktop accommodation capture | Preserve material warmth and the reversed overlap direction |
| Gray-toned reservation background | Partial desktop reservation-panel capture | Exact crop and treatment are not established |
| Phone, social, and award marks | Footer | Use authorized marks and appropriately named links |

For a new implementation, obtain actual asset dimensions before fixing aspect ratios. Do not invent original filenames or crop all images to an arbitrary shared ratio. CSS can reproduce the composition, but the place-specific photographs and identity artwork carry much of its character.

## Layout & Responsive Behavior

### Desktop Composition

The opening image occupies the entire first 1000px-high captured viewport. Below it, different alignment systems serve different tasks: roughly 52–55px outer anchors for header and hero notices, x=186 for feature copy, a right title rail around x=1175, and a centered footer span of approximately 1136px.

The accommodation photographs deliberately cross those copy alignments. One large image begins near x=55; the next begins near x=185. Smaller images overlap from the opposing edge. The copy maintains its own consistent x=186 alignment.

Concept, spa, restaurant, accommodation, experiences, news, reservations, and footer retain distinct internal compositions. The page is not a repeated sequence of identical two-column sections.

### Mobile Recomposition

The mobile layout is not uniformly scaled down:

- The header replaces its horizontal navigation with the Menu trigger.
- Ordinary content uses 20px side gutters; the footer uses 50px gutters.
- Standard section labels become horizontal and precede their content.
- The concept heading retains vertical typography at 36px.
- Accommodation titles remain 28px even as descriptions shrink to 14px.
- The spa pair forms a lateral sequence with partially offscreen content.
- Experience copy and its detail link become a sequential reading block.
- Reservation options stack into 350px-wide buttons.
- Legal navigation moves before the hours in the footer's content order.
- Contact information becomes centered; the phone number retains its 24px size.
- The persistent reservation tab moves from the lower right to the lower left and changes orientation.

The measured mobile hero identity is centered horizontally but placed above the viewport's vertical midpoint. Its awards remain near the bottom, clear of the booking tab.

### Responsive Limits

Only the 1440px and 390px widths were supplied. Exact media-query thresholds, tablet behavior, landscape-phone behavior, and intermediate image arrangements are unknown. A breakpoint near 768px is a practical starting recommendation, not a recovered source value.

The CSS starter preserves major observed proportions while allowing content to grow. It should be checked at intermediate widths, enlarged text, and narrow devices before production use.

## Do’s and Don’ts

### Do

- Keep the measured main canvas `#fbfbfb` and text `#1a1918` as the neutral foundation.
- Let the forest, architecture, and interior materials supply the color.
- Use the actual graphical identity lockups with their original proportions.
- Pair Mincho display headings with Gothic practical text and small EB Garamond labels.
- Preserve vertical section rails on desktop and the distinct vertical concept heading on mobile.
- Maintain separate image, copy, and footer alignments.
- Alternate the direction of large-image and companion-image overlaps.
- Leave generous space after copy and between photographic sequences.
- Keep detail links narrow, ruled, and unfilled.
- Recompose the booking tab for mobile rather than shrinking it.
- Treat hours, addresses, contact routes, and legal navigation as substantial content.
- Keep imagery and content visible when enhancement scripts are unavailable.

### Don’t

- Don't replace the page with a generic hotel landing-page template of identical feature cards.
- Don't introduce green CTA fills merely because the hero contains a forest.
- Don't make all typography sans-serif or apply EB Garamond to every Latin heading.
- Don't recreate logo lettering using a guessed font.
- Don't round the photographic corners or add floating-card shadows.
- Don't align every image edge to the same centered content column.
- Don't shrink all mobile headings proportionally; several measured sizes remain unchanged.
- Don't assume the offscreen spa content proves a particular carousel library or gesture.
- Don't claim video autoplay, parallax, menu animation, or hover endpoints without evidence.
- Don't copy DOM-only navigation coordinates as a verified open-menu design.
- Don't hardcode captured document heights or current operating hours into a reusable design system.

## Recommended Implementation Additions

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

- Make the menu trigger a real button with an accessible name, `aria-expanded`, and a relationship to its controlled navigation. Implement focus restoration and appropriate keyboard behavior for the chosen menu pattern.
- Keep decorative menu strokes and link chevrons out of the accessibility tree.
- Provide visible keyboard focus on all links. Enlarge the hit areas of small social icons and CONTACT controls without requiring larger visual symbols.
- Give repeated detail links destination-specific accessible context, and provide meaningful alternatives for photographs and identity artwork.
- Use a deliberate heading hierarchy. The supplied DOM contains several logo-bearing H1 elements; an adaptation can retain the visual hierarchy with one primary page heading.
- If the hero uses moving media, provide an effective pause mechanism where needed, a static fallback, and reduced-motion behavior. Preserve an intentional crop while media loads.
- Include safe-area padding in the mobile reservation tab and enough page-end clearance that it cannot cover essential content.
- Implement any lateral spa sequence with keyboard access and reachable content. Do not hide the second card without a usable navigation mechanism.
- Reserve image dimensions to reduce layout shifts, load below-fold images responsively, and prioritize the opening media appropriately.
- Preserve text wrapping under font fallback and text enlargement, especially in vertical headings and booking labels.
- Verify foreground contrast against all hero and reservation-panel frames rather than relying on one screenshot.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: measured `#fbfbfb`.
- Main text and headings: measured `#1a1918`.
- Reversed text: measured `#ffffff`.
- Secondary navigation: measured `#4e4e4e`.
- Muted navigation: measured `#7a7a7a`.
- Booking tab: approximately `#454545`, a visual estimate.
- Footer surface and fine dividers: approximately `#f6f6f6` and `#dddddd`, visual estimates.
- Forest green and tent amber belong to photographs, not a required UI accent palette.

### Overall Prompt

“Create a Japanese resort facility homepage inspired by the supplied Snow Peak FIELD SUITE SPA HEADQUARTERS reference. Begin with an aerial landscape image filling the first viewport, a centered authorized white brand lockup, a modest Japanese serif statement, small award links at the lower left, and a persistent charcoal accommodation-booking tab. Continue on an off-white `#fbfbfb` canvas with charcoal `#1a1918` text, large architectural photographs, smaller overlapping companion images, generous empty space, and narrow vertical Japanese section rails on desktop. Use the declared `fot-tsukuaoldmin-pr6n` display stack when available, EB Garamond for small English labels and dates, Mincho for narrative serif text, and Yu Gothic for practical copy. Use fine ruled detail links and square outlined booking controls. On mobile, move ordinary section headings above content, preserve the vertical concept heading, stack booking options and footer information, and move the booking tab to the lower left. Treat unverified animation and menu behavior as separate implementation decisions.”

### Example Component Prompts

1. **Hero:** “Build a full-viewport forest-and-architecture hero. Center a supplied white emblem and wordmark, then separate the `20px` Japanese statement from the logo by about `45px` on desktop. Place two modest white text links near the lower-left edge. On a 390px phone, use a smaller identity wrapper, a `16px / 32px` statement, and a composition centered slightly above the viewport midpoint. Do not invent a video requirement.”
2. **Accommodation feature:** “Place a large square-cornered villa photograph across most of a broad editorial image region. Overlap a smaller exterior image from the right. Start the `28px` title and short Gothic description on an inset copy alignment rather than the large photograph's outer edge. Add a narrow underlined `詳しくみる` link and leave a generous pause before the next composition, which reverses the overlap direction.”
3. **Section rail:** “Create a desktop heading rail with a `34px` vertical Japanese title, a neighboring `14px` EB Garamond English label with `0.1em` tracking, and a vertical detail link below. On mobile, reflow the English label, `30px` Japanese heading, and horizontal detail link above the section content.”
4. **Booking tab:** “Use a charcoal rectangular accommodation link at the bottom-right desktop edge, approximately `79 × 130px`, with vertical Japanese text and a small English caption. On mobile, reposition it to the bottom-left and change it to a horizontal block approximately `125 × 57px`. Preserve white text, square corners, and safe-area clearance.”
5. **Footer:** “Build a pale neutral footer with navigation and four operating-hours columns on the left, separated by a fine vertical rule from a stacked logo, address, `24px` phone number, outlined CONTACT link, social icons, and award mark on the right. On mobile, use a single column with 50px side gutters, place legal links before hours, and center the contact sequence.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted source CSS. It combines measured colors and typography with explicitly estimated surfaces. The 768px breakpoint, hover opacity, hero overlay, and mobile photo arrangement are recommendations.

Apply `.resort` to the page body or an equivalent page wrapper. Use semantic elements with the component classes below. `.editorial-body` and `.section-rail` are siblings; a rail contains `.rail-label`, `.rail-title`, and `.detail-link`. A feature contains `.photo-pair` and `.feature-copy`. Supply authorized media through image or video elements; no original asset URLs are assumed.

```css
:root {
  /* Measured colors */
  --surface-page: #fbfbfb;
  --ink-primary: #1a1918;
  --ink-inverse: #ffffff;
  --ink-secondary: #4e4e4e;
  --ink-muted: #7a7a7a;
  --ink-notice: #040404;

  /* Visual estimates, not recovered source declarations */
  --surface-footer: #f6f6f6;
  --surface-reservation: #454545;
  --line-soft: #dddddd;

  /* Condensed source stacks; font loading is separate */
  --font-display: fot-tsukuaoldmin-pr6n, YuMincho,
    'Hiragino Mincho ProN', serif;
  --font-serif: YuMincho, 'Hiragino Mincho ProN', serif;
  --font-english: 'EB Garamond', YuMincho, serif;
  --font-body: YuGothic, 'Yu Gothic Medium', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN', Meiryo, Arial, sans-serif;

  --text-body: 15px;
  --leading-body: 30px;
  --text-section: 34px;
  --leading-section: 47.6px;
  --text-feature: 28px;
  --text-label: 14px;
  --tracking-label: 0.1em;
  --rule: 1px;
  --radius: 0;

  /* Adaptation geometry anchored to the desktop capture */
  --editorial-width: 1330px;
  --media-width: 1050px;
  --rail-gap: 70px;
  --footer-width: 1136px;
  --section-space: 120px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Duration observed; easing chosen for this adaptation */
  --motion-link: 200ms ease;
}

.resort,
.resort * {
  box-sizing: border-box;
}

.resort {
  margin: 0;
  color: var(--ink-primary);
  background: var(--surface-page);
  font: 400 var(--text-body) / var(--leading-body) var(--font-body);
}

.resort img {
  display: block;
  max-width: 100%;
}

.resort a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--motion-link);
}

.resort :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Recommended feedback; the original hover endpoint is unknown. */
@media (hover: hover) {
  .resort a:hover {
    opacity: 0.72;
  }
}

.site-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  min-height: 94px;
  padding-inline: 55px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--ink-primary);
}

.header-brand {
  width: 190px;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}

.primary-nav,
.utility-nav {
  display: flex;
  align-items: center;
}

.primary-nav a {
  padding: 27px 25px;
  font: 700 18px / 30px var(--font-display);
}

.utility-nav a {
  padding: 32px 17px;
  font-size: 13px;
}

/* Drive this explicit state from the hero boundary in application code. */
.site-header[data-over-hero='true'] {
  color: var(--ink-inverse);
}

.site-header[data-over-hero='true'] .header-brand {
  visibility: hidden;
}

.site-header[data-over-hero='false'] .primary-nav,
.site-header[data-over-hero='false'] .utility-nav {
  visibility: hidden;
  pointer-events: none;
}

.menu-button {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.menu-label {
  display: none;
  font: 400 12px / 28px var(--font-english);
}

.menu-strokes {
  display: flex;
  gap: 9px;
  height: 34px;
}

.menu-strokes span {
  width: 1px;
  background: currentColor;
}

.menu-strokes span:nth-child(1) { height: 17px; }
.menu-strokes span:nth-child(2) { height: 26px; }
.menu-strokes span:nth-child(3) { height: 34px; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: var(--ink-inverse);
  background: var(--ink-primary);
}

.hero-media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Recommended contrast layer; tune against the actual media. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(0 0 0 / 20%);
}

.hero-identity {
  width: min(344.67px, calc(100% - 40px));
  text-align: center;
}

.hero-logo {
  width: 100%;
  height: 220.16px;
  object-fit: contain;
}

.hero-statement {
  margin: 45px 0 0;
  font: 700 20px / 38px var(--font-display);
  letter-spacing: 0.06em;
}

.hero-awards {
  position: absolute;
  left: 52px;
  right: 110px;
  bottom: 30px;
  font-size: 15px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.03em;
}

.hero-awards a {
  display: block;
  width: fit-content;
  padding-bottom: 1px;
}

.reservation-tab {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  width: 78.69px;
  height: 130px;
  padding: 29px 20px 37px 24px;
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
  background: var(--surface-reservation);
  color: var(--ink-inverse);
}

.reservation-tab .caption,
.reservation-tab .label {
  writing-mode: vertical-rl;
}

.reservation-tab .caption {
  font: 400 9px / 11px var(--font-english);
}

.reservation-tab .label {
  font: 400 16px / 19px var(--font-serif);
}

.editorial-section {
  width: min(var(--editorial-width), calc(100% - 110px));
  margin: var(--section-space) auto;
  display: grid;
  grid-template-columns: minmax(0, var(--media-width)) minmax(80px, 1fr);
  column-gap: var(--rail-gap);
  align-items: start;
}

.editorial-body {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.section-rail {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 48px 17px;
  column-gap: 15px;
  align-items: start;
}

.rail-label {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  writing-mode: vertical-rl;
  font: 400 var(--text-label) / 1.2 var(--font-english);
  letter-spacing: var(--tracking-label);
}

.rail-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  writing-mode: vertical-rl;
  font: 400 var(--text-section) / var(--leading-section) var(--font-display);
}

.detail-link {
  min-width: 130.59px;
  min-height: 50px;
  padding: 10px 5px 10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-bottom: var(--rule) solid currentColor;
  font: 500 14px / 30px var(--font-serif);
}

.detail-link::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-top: var(--rule) solid currentColor;
  border-right: var(--rule) solid currentColor;
  transform: rotate(45deg);
}

.section-rail .detail-link {
  grid-column: 1;
  grid-row: 2;
  margin-top: 66px;
  min-width: 0;
  width: 50px;
  height: 125px;
  padding: 0 10px;
  writing-mode: vertical-rl;
  border-bottom: 0;
  border-right: var(--rule) solid currentColor;
  font-size: 20px;
  gap: 12px;
}

.section-rail .detail-link::after {
  transform: rotate(135deg);
}

.photo-pair {
  position: relative;
  margin: 0;
}

.photo-main {
  width: 87.6%;
  height: auto;
}

.photo-inset {
  position: absolute;
  top: 20%;
  right: 0;
  width: 24.8%;
  height: auto;
}

.photo-pair.is-reversed .photo-main {
  margin-left: auto;
}

.photo-pair.is-reversed .photo-inset {
  right: auto;
  left: 0;
}

.feature-copy {
  width: 87.6%;
  margin: 30px 0 0 auto;
}

.feature-copy h3 {
  margin: 0 0 20px;
  font: 400 var(--text-feature) / 30px var(--font-display);
}

.feature-copy p {
  margin: 0;
}

.feature-copy .detail-link {
  margin-top: 50px;
}

.feature + .feature {
  margin-top: 150px;
}

.concept-heading {
  margin: 0;
  writing-mode: vertical-rl;
  font: 400 36px / 50.4px var(--font-display);
}

.concept-prose {
  font: 400 15px / 30px var(--font-serif);
  letter-spacing: 0.1em;
}

.spa-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50.5px;
}

.spa-card:nth-child(2) {
  margin-top: 77px;
}

.booking-panel {
  position: relative;
  isolation: isolate;
  padding: 90px 20px;
  background: var(--surface-reservation);
  color: var(--ink-inverse);
}

.booking-options {
  width: min(750px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 37.5px;
}

.booking-option p {
  font-family: var(--font-serif);
}

.booking-link {
  display: block;
  padding: 10px;
  border: var(--rule) solid currentColor;
  text-align: center;
  font: 400 20px / 32px var(--font-display);
}

.site-footer {
  padding: 66px 0 60px;
  background: var(--surface-footer);
}

.footer-grid {
  width: min(var(--footer-width), calc(100% - 100px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 64% 36%;
  grid-template-areas:
    'nav contact'
    'hours contact'
    'legal copyright';
  row-gap: 48px;
}

.footer-nav { grid-area: nav; }
.footer-hours { grid-area: hours; }
.footer-legal { grid-area: legal; }
.footer-copyright { grid-area: copyright; }

.footer-contact {
  grid-area: contact;
  padding-left: 108px;
  border-left: var(--rule) solid var(--line-soft);
}

.footer-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  font: 400 24px / 30px var(--font-display);
}

.hours-columns {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 55px;
  font-size: 13px;
  line-height: 26px;
}

.hours-columns h3 {
  font: 400 18px / 36px var(--font-serif);
}

.footer-logo {
  width: 225px;
  margin-inline: auto;
}

.footer-phone {
  display: inline-block;
  white-space: nowrap;
  font: 400 24px / 28.8px var(--font-display);
}

.contact-link {
  display: inline-block;
  padding: 4px 16px;
  border: var(--rule) solid currentColor;
  font: 400 12px / 16.8px var(--font-serif);
}

.footer-legal,
.footer-copyright {
  border-top: var(--rule) solid var(--line-soft);
  padding-top: 30px;
}

.footer-copyright {
  margin: 0;
  text-align: right;
  font: 400 11px / 30px var(--font-english);
  letter-spacing: 0.06em;
}

/* Recommended intermediate adjustment; no tablet capture was supplied. */
@media (min-width: 768px) and (max-width: 1199px) {
  .utility-nav { display: none; }
  .primary-nav a { padding-inline: 14px; }
  .editorial-section { column-gap: 32px; }
  .footer-contact { padding-left: 40px; }
  .hours-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Recommended breakpoint; mobile values reflect the 390px capture. */
@media (max-width: 767px) {
  .resort {
    --text-body: 14px;
    --leading-body: 28px;
    --text-section: 30px;
    --leading-section: 51px;
    --text-label: 13px;
    --section-space: 100px;
  }

  .site-header {
    min-height: 70px;
    padding-inline: 24px;
    grid-template-columns: 1fr auto;
  }

  .header-brand { width: 120px; }
  .primary-nav, .utility-nav { display: none; }
  .menu-label { display: block; }
  .menu-button { padding-inline: 0; }

  /* Explicit dark menu state matching the supplied mobile appearance. */
  .site-header[data-over-hero='true'] .menu-button {
    color: var(--ink-primary);
  }

  .menu-strokes { height: 27px; }
  .menu-strokes span:nth-child(1) { height: 12px; }
  .menu-strokes span:nth-child(2) { height: 20px; }
  .menu-strokes span:nth-child(3) { height: 27px; }

  .hero-identity {
    width: min(275.84px, calc(100% - 40px));
    transform: translateY(-30px);
  }

  .hero-logo { height: 158.28px; }

  .hero-statement {
    margin-top: 38px;
    font-size: 16px;
    line-height: 32px;
  }

  .hero-awards {
    left: 25px;
    right: 25px;
    bottom: calc(70px + var(--safe-bottom));
    font-size: 12px;
    line-height: 28px;
  }

  .reservation-tab {
    left: 0;
    right: auto;
    width: 124.8px;
    height: auto;
    min-height: 56.5px;
    padding: 12px 20px calc(12px + var(--safe-bottom));
    flex-direction: column;
    gap: 0;
  }

  .reservation-tab .caption,
  .reservation-tab .label {
    writing-mode: horizontal-tb;
  }

  .reservation-tab .caption { line-height: 10.5px; }
  .reservation-tab .label { line-height: 22px; }

  .editorial-section {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  .section-rail {
    order: -1;
    display: block;
    width: 100%;
  }

  .rail-label,
  .rail-title {
    writing-mode: horizontal-tb;
  }

  .rail-title { margin-top: 4px; }

  .detail-link {
    min-height: 48px;
    line-height: 28px;
  }

  .section-rail .detail-link {
    width: auto;
    min-width: 130.59px;
    height: auto;
    margin-top: 0;
    padding: 10px 5px 10px 0;
    writing-mode: horizontal-tb;
    border-right: 0;
    border-bottom: var(--rule) solid currentColor;
    font-size: 14px;
    gap: 32px;
  }

  .section-rail .detail-link::after {
    transform: rotate(45deg);
  }

  /* Recommended mobile imagery; exact source arrangement is unverified. */
  .photo-main { width: 100%; }
  .photo-inset {
    position: relative;
    top: auto;
    right: auto;
    width: 36%;
    margin: -32px 0 0 auto;
  }

  .photo-pair.is-reversed .photo-inset {
    margin-left: 0;
    margin-right: auto;
  }

  .feature-copy {
    width: 100%;
    margin-top: 30px;
  }

  .feature-copy h3 { line-height: 28px; }
  .feature-copy .detail-link { margin-top: 20px; }
  .feature + .feature { margin-top: 100px; }

  .concept-heading {
    margin-inline: auto;
    line-height: 61.2px;
  }

  /* Native scrolling is a recommendation, not verified source behavior. */
  .spa-track {
    display: flex;
    gap: 22px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 12px;
  }

  .spa-card {
    flex: 0 0 247px;
  }

  .spa-card:nth-child(2) { margin-top: 0; }

  .booking-options {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .booking-link {
    padding: 6px;
    font-size: 18px;
    line-height: 28.8px;
  }

  .site-footer {
    padding-bottom: calc(90px + var(--safe-bottom));
  }

  .footer-grid {
    width: calc(100% - 100px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'nav' 'legal' 'hours' 'contact' 'copyright';
    row-gap: 48px;
  }

  .footer-primary {
    gap: 26px;
    font-size: 18px;
    line-height: 28px;
  }

  .hours-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hours-columns h3 {
    font-size: 14px;
    line-height: 28px;
  }

  .footer-contact {
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }

  .footer-logo { width: 122px; }

  .contact-link {
    padding: 6px 16px;
    font-size: 10px;
    line-height: 14px;
  }

  .footer-legal,
  .footer-copyright {
    padding-top: 0;
    border-top: 0;
  }

  .footer-copyright {
    text-align: center;
    line-height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resort a {
    transition: none;
  }
}
```

The starter covers the principal visual relationships rather than every homepage section. Open-menu behavior, media playback, image selection, and header-state updates require their own implementation. Do not hide content while waiting for those enhancements.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-resort-page: var(--surface-page);
  --color-resort-footer: var(--surface-footer);
  --color-resort-booking: var(--surface-reservation);
  --color-resort-ink: var(--ink-primary);
  --color-resort-inverse: var(--ink-inverse);
  --color-resort-muted: var(--ink-muted);
  --color-resort-line: var(--line-soft);

  --font-resort-display: var(--font-display);
  --font-resort-body: var(--font-body);
  --font-resort-serif: var(--font-serif);
  --font-resort-english: var(--font-english);

  --text-resort-body: var(--text-body);
  --text-resort-section: var(--text-section);
  --text-resort-feature: var(--text-feature);
  --text-resort-label: var(--text-label);

  --spacing-resort-section: var(--section-space);
  --radius-resort: 0px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Snow Peak FIELD SUITE SPA HEADQUARTERS](https://www.snowpeak.co.jp/fieldsuitespa/hq/). The supplied browser record reports HTTP 200 and no change between the original and final URL.
- **Capture timestamp:** October 1, 2026, 19:24:25.695 UTC, equivalent to October 2, 2026, 04:24:25.695 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport, recorded document height 10,675px; supplied hero, accommodation, and footer screenshots; rendered text, links, element rectangles, and computed styles.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport, recorded document height 10,957px; supplied hero and footer screenshots; rendered text, links, element rectangles, and computed styles.
- **Identity evidence:** the original-page footer displays `© 2026 Snow Peak Inc.` and links to [the Snow Peak corporate site](https://www.snowpeak.co.jp/). The corporate destination was not separately inspected.
- **Interaction evidence:** supplied page-load and scrolling observations, plus recorded link destinations. No menu opening, hover sequence, keyboard sequence, horizontal spa navigation, booking flow, or media playback test was supplied.
- **Inspection limitations:** the analysis uses the supplied evidence only. No additional browsing, asset retrieval, stylesheet-file inspection, or command execution was performed. Exact image paths, mobile feature-image layouts, intermediate breakpoints, underlying media type, and animation triggers remain unverified.

This reference describes the current homepage represented by those captures. Measured values, screenshot estimates, and implementation recommendations are distinguished throughout.