# Hozantei — Style Reference

> A quiet mountain inn presented through dusk photography, vertical Japanese lettering, and generous intervals of pale, textured space.

**Website:** [hozantei.com](https://www.hozantei.com/)
**Original URL:** https://www.hozantei.com/
**Final URL:** https://www.hozantei.com/
**Theme:** a dark photographic opening followed by light editorial sections; no user-selectable theme was verified.
**Inspected:** October 2, 2026, Japan Standard Time. Supplied retrieval timestamp: October 1, 2026, 17:33:49.535 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current homepage, including its opening composition, persistent identity/navigation, introduction, rooms and cuisine sections, gallery structure, news, booking actions, and footer. Analysis uses the supplied captures and rendered DOM/computed-style evidence. Linked pages, an opened menu, booking flows, and gallery activation were not inspected.

Hozantei is a multi-page inn website whose homepage introduces the property and provides routes into accommodation, dining, bathing, practical information, and reservations. Its identity comes from the relationship between an immersive landscape and unusually light, widely spaced typography. The courtyard photograph supplies deep blue water, dark foliage, warm windows, and a diagonal stone bridge. White calligraphy and vertical copy sit within that scene without a separate text panel.

Below the opening, muted olive-gray text appears over a nearly white, softly textured background. Large photographs alternate with spacious editorial passages. Most controls are rectangular outlines, narrow vertical strips, or unboxed text links with fine chevrons. Desktop content deliberately favors the right side of the page to accommodate a persistent left navigation rail. Mobile removes that rail and rearranges the supporting grids and footer rather than simply shrinking the desktop layout.

## How to Read This Reference

- **Measured** values come from the supplied rendered element rectangles and computed styles. Coordinates refer to the initial document position unless a screenshot position is explicitly discussed. Fractional measurements are rounded for readability.
- **Observed** appearance comes from the five current-site captures: desktop opening, desktop middle section, desktop footer, mobile opening, and mobile footer.
- **Estimated** colors, glyph sizes, and decorative dimensions are visual approximations. They are not extracted stylesheet values or sampled image pixels.
- **Recommended** behavior and CSS are implementation guidance. They do not establish that the original site uses the same markup, breakpoint, accessibility behavior, or animation implementation.
- Token names in this document are descriptive aliases. The supplied custom properties include a viewport-height variable and many platform presets, but do not expose a complete bespoke design-token system.
- Computed font-family declarations identify the requested stack. They do not prove which font file supplied every rendered glyph.

## Tokens — Colors

### Interface Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Olive-gray ink | `#58574C` | `--ink` | **Measured:** `rgb(88, 87, 76)` on body text, editorial copy, footer text, and reservation-strip fills. The central interface color. |
| Reversed white | `#FFFFFF` | `--white` | **Measured:** hero copy, initial desktop navigation links, and text inside the filled reservation strips. |
| Source black | `#000000` | `--source-black` | **Measured:** some menu, gallery, and news anchor wrappers. This does not establish the visible color of their child images or pseudo-elements. |
| Pale canvas | Approximately `#F8F8F7` | `--paper` | **Estimated:** the light sections appear almost white with subtle gray variation. The measured body background is transparent, so this is a rendered-surface approximation. |
| Texture wash | Approximately `#ECECEB` | `--paper-wash` | **Estimated:** soft, low-contrast botanical or cloudlike shapes behind editorial content and the footer. |
| Quiet divider | Approximately `#DCDCD7` | `--rule` | **Estimated:** fine booking, footer, and utility rules. Their border colors were not included in the computed-style evidence. |

The interface is restrained, but its photographs are not monochrome. Do not reduce the cuisine image to the olive-gray palette or turn photographic colors into a collection of competing button colors.

### Photographic Color Reference

These are visual estimates for art direction, not exact image samples or source UI tokens.

| Color family | Approximation | Where it appears |
| --- | --- | --- |
| Dusk blue | `#233D50` | Sky, pond reflections, and the cooler parts of the opening image |
| Forest green | `#11291F` | Deep foliage around the courtyard |
| Window amber | `#C79350` | Interior lighting and its reflections |
| Food and seasonal color | Varies by photograph | Red shellfish and serving vessels, fresh green leaves, and colorful ceramics in the cuisine panel |

### Color Behavior

The opening uses white identity and navigation over a dark image. In the mobile footer capture, the logo and menu graphics appear dark over the pale background. The supplied evidence does not reveal the mechanism or exact trigger for this change.

The desktop scrolled captures retain white rail graphics and white navigation over very light areas. This produces visibly weak contrast. Record that as an observed state; a new implementation should explicitly manage foreground contrast instead of assuming the original solves it everywhere.

No visible use of the supplied platform gradient, shadow, or bright accent presets was established. Those variables should not be treated as the site's active palette.

## Tokens — Typography

### Japanese Editorial Stack

The measured body family is:

```css
font-family:
  "FOT-筑紫Aオールド明朝 Pr6 R",
  AGaramondPro-Regular,
  游ゴシック体,
  YuGothic,
  "游ゴシック Medium",
  "Yu Gothic Medium",
  游ゴシック,
  "Yu Gothic",
  メイリオ,
  Meiryo,
  sans-serif;
```

The opening and editorial text have a delicate Mincho character in the captures. Fine strokes, generous tracking, and tall line spacing establish the calm tone. Most measured text uses weight `400`; the introduction heading uses `700`.

The named Japanese face is a source declaration, not a freely bundled asset. Use it only when licensed and available. The supplied fallback stack eventually becomes sans-serif, so a failed font load can materially change the design. A separately selected Japanese serif fallback is a reasonable adaptation, but it should be identified as a replacement.

### Latin Dates and Copyright

`AGaramondPro-Regular` is explicitly measured on the opening news date and copyright line. The opening date has relatively modest `0.1em` tracking; the copyright inherits much wider spacing.

The English `GALLERY` and `NEWS` captions and news-card dates retain the general body stack in the supplied computed styles. Do not assume all Latin text has an independently assigned Garamond family.

### Calligraphic Identity

The logo is artwork: a vertical Japanese brush mark accompanied by a tiny, widely spaced `HOZANTEI` caption. Its measured heading container has no text content. The heading's computed font size therefore does not describe the logo lettering.

Preserve the proportions of the actual identity asset. Replacing the brush mark with typeset text would change a defining feature of the page.

### Measured Type Scale

Values below use `font size / line height`; tracking is shown separately.

| Role | Desktop | Mobile | Tracking: desktop → mobile |
| --- | --- | --- | --- |
| Body default | `16 / 32px` | `14 / 28px` | `4.8 → 4.2px` |
| Introduction heading, weight 700 | `24 / 52.8px` | `18 / 39.6px` | `9.6 → 7.2px` |
| Introduction paragraphs | `18 / 46.8px` | `14 / 36.4px` | `7.2 → 5.6px` |
| Rooms/cuisine section label | `16 / 19.2px` | `16 / 19.2px` | `4.8 → 4.2px` |
| Rooms/cuisine body | `16 / 38.4px` | `14 / 33.6px` | `4.8 → 4.2px` |
| Gallery/news heading | `28 / 33.6px` | `24 / 28.8px` | `4.8 → 4.2px` |
| English section caption | `13 / 26px` | `12 / 24px` | `4.8 → 4.2px` |
| Desktop rail link | `15 / 30px` | Hidden in the captured mobile header | `4.8px` |
| Vertical reservation strip | `15 / 30px` | Hidden in the captured mobile header | `2.25px` |
| Outlined section link | `15 / 18px` | `14 / 16.8px` | `3.75 → 3.5px` |
| Opening news date | `14 / 28px` | `12 / 24px` | `1.4 → 1.2px` |
| Opening news link | `14 / 28px` | `13 / 26px` | `4.8 → 4.2px` |
| News-card date | `13 / 26px` | `12 / 24px` | `4.8 → 4.2px` |
| News-card title | `15 / 30px` | `14 / 22.4px` | `4.8 → 4.2px` |
| Lower booking action | `20 / 40px` | `16 / 32px` | `4.8 → 4.2px` |
| Footer property name | `22 / 44px` | `16 / 32px` | `4.8 → 4.2px` |
| Footer address/contact | `14 / 28px` | `13 / 26px` | `4.8 → 4.2px` |
| Footer navigation | `15 / 30px` | `14 / 28px` | `4.8 → 4.2px` |
| Copyright | `14 / 28px` | `12 / 24px` | `4.8 → 4.2px` |

The source root size is `10px`. The Quick Start uses explicit pixel values and a conventional root, so copying it does not require adopting that root scale.

### Vertical Hero Copy

The visible phrase is “思う存分、非日常,” arranged in two vertical columns: the longer phrase on the right and the shorter phrase on the left.

The measured `H2` wrapper is `24 / 48px` on desktop and `21 / 42px` on mobile. The visible individual characters appear larger: approximately **48px desktop and 30px mobile**. Child-character styles were not supplied, so these larger values are estimates. Do not present the wrapper's computed font size as the final glyph measurement.

The phrase's placement and vertical rhythm matter more than making it a conventional large horizontal heading.

## Tokens — Spacing & Shapes

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Header container | `260 × 1000px` | `390 × 200px` | Measured |
| Logo container | `88 × 186px`, at `(86, 65)` | `70 × 148px`, at `(25, 25)` | Measured |
| Menu control | `70 × 65px`, at `(1310, 50)` | `50 × 50px`, at `(320, 30)` | Measured |
| Hero media wrapper | `1440 × 1050px` | `390 × 886.19px` | Measured empty media-associated element |
| Hero copy wrapper | `160 × 370px`, at `(1120, 510)` | `94 × 215px`, at `(246, 529)` | Measured |
| Main content start | Document `y = 1100px` | Document `y = 944px` | Measured |
| Intro section height | `1000px` | `844px` | Measured |
| Intro text width | `723.78px`, starting at `x = 463.11` | `350px`, starting at `x = 20` | Measured |
| Wide section bounds | `x = 30`, width `1380px` | `x = 20`, width `350px` | Measured |
| Common inner content alignment | `x = 260` to `1360`, width `1100px` | `x = 20` to `370`, width `350px` | Measured on gallery/news headings and supporting content |
| Rooms paragraph width | `460px` | `350px` | Measured |
| Cuisine paragraph width | `650px` | `350px` | Measured |
| Outlined section button | `250 × 60px`, left aligned | `240 × 50px`, centered at `x = 75` | Measured |
| Vertical booking strips | Two `40 × 170px` controls | Not shown in the mobile header | Measured |
| Lower reservation band | `1380 × 211px` | `350 × 241px` | Measured |
| Footer height | `383px` | `745px` | Measured |
| Total document height | Approximately `7358px` | Approximately `6245px` | Measured |

The media-wrapper heights are approximately `1.05 × viewport height` at both sizes. That relationship is calculated from the measurements; the exact CSS sizing rule was not supplied. The custom property `--vh` is `10px` on desktop and `8.44px` on mobile, matching one percent of each inspected viewport height.

### Spacing Rhythm

| Relationship | Desktop | Mobile |
| --- | --- | --- |
| Wide-section outside inset | `30px` | `20px` |
| Room section end to cuisine start | `150px` | `100px` |
| Cuisine end to gallery start | `200px` | `100px` |
| Gallery end to news section start | `180px` | `100px` |
| News section top padding | `190px` | `100px` |
| News section end to booking band | `250px` | `100px` |
| Footer vertical padding | `90px` top, `80px` bottom | Same measured values |
| Desktop rail link origin spacing | `42px` vertically | Not applicable |
| Space between booking strips | `20px` | Not applicable |

These are observed relationships, not evidence of a universal spacing scale. The design combines small utility intervals with very large pauses between sections.

### Shapes and Rules

- Buttons and measured section containers have `0px` border radius.
- Photos have square corners in the supplied captures.
- Outlined buttons use a visually thin border and a small right-facing chevron.
- Menu graphics comprise three long, fine horizontal strokes with a small `MENU` caption beneath.
- Footer navigation uses small line chevrons rather than filled arrow icons.
- There is no visible general-purpose card shadow or elevated-panel system.
- Rule thickness appears close to `1px`; exact border widths were not included in the supplied computed-style fields.

## Components

### Persistent Identity and Desktop Navigation Rail

**Role:** keep the property identity, information architecture, and reservation routes available while the homepage scrolls.

The desktop rail occupies a measured `260px`-wide header region. Its logo sits at `(86, 65)`. Seven navigation links begin around `x = 64`, with measured text rectangles at successive `42px` vertical intervals. Labels include “お部屋,” “お料理,” “お風呂,” “帆山亭について,” “施設紹介,” “アクセス,” and “よくある質問.”

Two olive-gray reservation strips sit near the bottom: one at `x = 80`, the other at `x = 140`, both beginning at `y = 760`. Each is `40 × 170px`, with white vertical text. The visible pair is “宿泊プラン” and “日時から空室検索.”

The rail remains at the same screen position in the supplied desktop scrolled captures, supporting a persistent overlay interpretation. Its underlying CSS `position` declaration was not included. Main editorial content starts farther right, but the large photographs extend behind the rail.

The plans link points to an external reservation service, while availability search points to `/search/`. Neither destination was exercised.

### Menu Control

**Role:** provide an additional navigation entry point, especially on mobile.

Desktop geometry is `70 × 65px`, inset `60px` from the right and `50px` from the top. Mobile geometry becomes `50 × 50px`, inset `20px` from the right and `30px` from the top.

The graphic has three thin horizontal lines and a tracked `MENU` label. Both `MENU` and `CLOSE` appear in the rendered text evidence, but only the closed visual state is supplied. An open panel's layout, background, focus handling, dismissal behavior, and animation cannot be documented from this evidence.

The mobile footer capture is a scrolled page state, not evidence of an opened navigation menu.

### Photographic Opening

**Role:** establish the setting before presenting detailed accommodation information.

A full-width courtyard scene fills the first viewport. Dark foliage occupies much of the left side, warm-lit buildings run across the middle and right, and the pond creates a large, calm foreground. A stone bridge enters diagonally from the lower right. The white logo, menu, news line, and vertical phrase occupy different parts of this image without opaque panels.

The desktop title wrapper ends `160px` from the right edge and `120px` above the viewport bottom. Mobile places it `50px` from the right and `100px` above the bottom. These relationships are calculated from measured rectangles.

Mobile uses a much narrower crop of the same courtyard subject. The photograph is not compressed to fit its desktop composition. The pond remains prominent, while architecture and the bridge become cropped edge elements.

No slideshow progression, video, zoom, or parallax was verified. The dark appearance alone does not establish whether a CSS scrim, image grading, or both produced it.

### Opening News Teaser

**Role:** surface a current notice without disrupting the image.

On desktop, the date begins at `x = 310`, near the bottom of the viewport. A small vertical divider separates it from the article link; a short horizontal line continues to the right. The measured link text is `14px`, while the date uses the explicit Garamond family and `0.1em` tracking.

At the inspected state, the teaser shows `2026.09.17` and “復興割は現在終了しております.” This is current content, not an evergreen decorative tagline.

On mobile, the date moves above the link. Both start at `x = 20`; the link's rectangle begins at `y = 795`. The trailing horizontal line remains a visual cue. Preserve this stacked relationship so the notice does not compete horizontally with the vertical headline.

### Introduction

**Role:** explain the inn's setting and atmosphere before the room and dining sections.

The introductory section occupies one measured viewport height at both sizes. On desktop, its text block is about `724px` wide and sits well to the right of the rail. On mobile, it uses the full `350px` content width.

A bold, widely tracked heading precedes two paragraphs. The copy discusses the mountain setting, seasonal scenery, and the nearby headwaters. Typography carries the hierarchy: there is no enclosing card or large colored label.

The introductory paragraphs use a particularly open `2.6` line-height ratio. The heading uses `2.2`. Retaining these intervals is more faithful than simply enlarging margins around compact text.

### Rooms Section and Property Map

**Role:** introduce the detached guest rooms and connect them to the site's room information.

The section begins with a large photographic panel and the small vertical label “特別室.” The label is measured at `20px` desktop and `14px` mobile. Below the image, the “お部屋” section label leads into an editorial headline, a room-description paragraph, a property map, and the outlined “お部屋について” link.

On desktop, the paragraph is `460px` wide at `x = 260`. The supplied middle capture shows a fine gray property map to its right. The map depicts buildings, paths, a pond, and named facilities using restrained linework.

On mobile, the description spans `350px`. The button appears substantially below the paragraph, consistent with a stacked supporting-illustration region between text and action. The map's mobile image rectangle was not supplied, so its exact size and placement remain unmeasured.

For a reusable implementation, a desktop copy/map grid that becomes copy → map → action on mobile is a reasonable adaptation. Keep that recommendation distinct from a recovered source markup structure.

### Cuisine Section

**Role:** introduce the seasonal dining experience through food photography and concise editorial copy.

The desktop image nearly spans the page, leaving `30px` side margins. The supplied photograph is deliberately abundant: red shellfish, multiple ceramic dishes, dark wooden display pieces, fresh leaves, and varied food colors fill the frame.

Below the photograph, content begins at `x = 260`. The paragraph is `650px` wide, wider than the rooms copy. A small “お料理” label, descriptive headline, paragraph, and outlined “お料理について” link form the text hierarchy.

On mobile, the section is `350px` wide and its action is centered at `240 × 50px`. Preserve the contrast between a dense, colorful image and the sparse text area that follows.

### Outlined Section Link

**Role:** provide a quiet route to a deeper page.

Desktop dimensions are `250 × 60px`; mobile dimensions are `240 × 50px`. The surface is transparent, the border is thin, and the label is centered with a small chevron toward the right edge.

Tracking is `0.25em` at both sizes: `3.75px` on `15px` text and `3.5px` on `14px` text. The original declares a `0.3s ease-in-out` transition, but the changed hover properties were not supplied.

Do not infer a filled hover state, sliding arrow, or animated border from the transition declaration alone.

### Gallery

**Role:** present additional views of the property.

The heading pairs “帆山亭の様子” with the smaller `GALLERY` caption. Eight image-associated links are present.

Their horizontal positions support a **four-column, two-row desktop arrangement**: link widths are approximately `269.5px` across an `1100px` inner region. Mobile becomes **two columns and four rows**, with `173.25px` link widths in a `350px` region.

The supplied anchor heights of `27px` desktop and `24px` mobile are inline link rectangles. They should not be mistaken for the heights of the photographs. Square image tiles are a plausible implementation approximation, but complete gallery image bounds and subjects were not provided.

Several gallery destinations are `#`. The evidence does not establish a working lightbox, carousel, social feed, or external photo destination.

### News Grid

**Role:** provide dated updates in a small editorial collection.

The desktop header uses “お知らせ,” a smaller `NEWS` caption, and the unboxed “一覧で見る” link on the right. Three news entries appear in one row. Each entry contains an image region, date, and a short title, with no colored card surface or shadow.

Each desktop anchor is approximately `239.8px` wide. Their starting positions are `x = 260`, `690.11`, and `1120.20`, producing unusually generous gaps of about `190.3px` between cards. Do not replace this with three cards that fill every available pixel.

Mobile changes to two columns of `166.25px` with a `17.5px` horizontal gap. The third entry occupies the left side of a second row. The news-list link moves below the grid and becomes a centered `240 × 50px` outlined action labeled “お知らせ一覧.”

The supplied mobile title rectangles are only about two lines tall. The evidence does not establish how substantially longer titles would be handled; avoid assuming an ellipsis or a fixed line-clamp rule.

### Reservation and Telephone Band

**Role:** collect practical actions after the editorial content.

On desktop, thin horizontal rules frame a `211px`-high band. Within the right-offset content region, a telephone area sits beside two reservation links. The action cells are approximately `348px` wide and `150px` tall, separated by fine vertical rules. Their labels use `20px` text.

On mobile, the band becomes three full-width rows, each `350 × 80px`: “電話をかける,” “宿泊プラン,” and “日時から空室検索.” The telephone action has the observed destination `tel:0967440059`.

This is a layout and interaction change, not merely a smaller telephone number. Preserve the direct call action in a mobile adaptation.

### Footer

**Role:** provide identity, contact details, a complete navigation index, and utility links.

Desktop uses two broad halves within the `1100px` inner region. The property name and address sit on the left. Nine navigation links are grouped into three columns on the right. An Instagram-shaped mark appears lower left; the copyright line is aligned toward the right.

The visible identity is “黒川温泉　源流の宿　帆山亭.” Its address and contact details are presented as ordinary text, with wide tracking and generous line height.

Mobile reorders the content: the two-column navigation comes first, followed by the property identity, address/contact details, social mark, and copyright. The navigation preserves the first two three-link groups side by side; access, news, and contact continue beneath them. Long contact text wraps across several lines, and copyright becomes two lines.

The social-shaped mark's supplied footer anchor points to `#`; a working Instagram destination was not verified. A vertical `Page Top` label with a fine rule appears near the lower right in the scrolled captures, but its activation and scroll behavior were not tested.

## Tokens — Motion & Interaction

### Recorded Animation and Transition Values

| Target | Recorded value | What the evidence establishes |
| --- | --- | --- |
| Header | `0.8s ease-in-out 6s forwards l-header` | An animation named `l-header`, with a six-second delay and forward fill |
| Hero heading wrapper | `0.8s ease-in-out 2.5s forwards blur` | An animation named `blur`, with a 2.5-second delay |
| Many mobile editorial elements | `1s ease-in-out 0.5s forwards blur` | A repeated animation declaration on headings, text, sections, and supporting elements |
| Later mobile intro paragraph | `1s ease-in-out 1s forwards blur` | A longer delay than the preceding intro content |
| Navigation, section buttons, news links, booking links | `0.3s ease-in-out` | Transition timing; changed properties and endpoint styles were not supplied |
| Menu anchor | `0.4s` | Transition duration; the opened state was not inspected |

The animation name `blur` suggests an intended soft reveal, but names are not keyframe definitions. Exact blur radii, opacity values, transforms, and trigger conditions remain unknown. Desktop elements reporting `animation: none` at a captured point do not prove that they never animate under another state.

The supplied capture process waited for finite animation and layout stability within bounded time limits. It traversed intermediate scroll positions. This supports analysis of settled states, but does not provide a frame-by-frame motion record or prove that all delayed content appeared.

### Verified Affordances and Limits

- Navigation and section links have observed destinations for rooms, cuisine, bathing, concept, facilities, access, FAQ, news, and contact.
- Availability search is linked internally; lodging plans use an external reservation URL. Their destination interfaces were not inspected.
- Mobile has a real `tel:` link.
- Persistent header placement is supported by the scrolled screenshots.
- Menu opening, hover appearance, gallery activation, focus behavior, and page-top scrolling were not exercised.
- No looping hero animation, autoplay slideshow, video, or scroll-scrubbed sequence was established.

For a new implementation, short opacity or contrast transitions fit the design. Do not add elaborate movement merely because an animation declaration exists. Essential navigation should remain usable while decorative entry effects run.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening scene | Dark, full-width courtyard photograph | Establishes place and atmosphere |
| Hero text and utilities | White text and fine graphics directly over the image | Preserves an uninterrupted photographic field |
| Editorial canvas | Almost white with soft gray texture | Creates a quiet transition from the dark opening |
| Body content | Olive-gray text without enclosing cards | Supports a slow editorial reading rhythm |
| Section action | Transparent rectangle with a fine border | Marks navigation without a strong color interruption |
| Rail reservation action | Solid olive-gray, white vertical text | Gives compact persistent access to booking |
| News item | Image and text on the shared canvas | Keeps updates visually part of the editorial page |
| Booking/footer structure | Shared pale surface divided by thin rules | Separates practical information without elevation |

No open-menu or modal surface can be specified from the supplied captures. Do not invent a glass overlay, dark drawer, or full-screen navigation design as an observed component.

## Imagery

### Art Direction

The opening photograph combines still water, traditional architecture, stone, foliage, and warm interior light at dusk. Its composition creates natural areas for text: dark foliage behind the identity rail and calm blue water around the vertical phrase. The bridge provides a strong diagonal without requiring decorative graphic shapes.

The cuisine image uses a different density. Dishes and serving pieces overlap, seasonal leaves cross the frame, and saturated colors remain visible. The site gains variety through its subjects rather than through changing the UI palette.

The property map is restrained line artwork. It belongs with the descriptive text and should remain legible as a spatial explanation, not be treated as a faint background watermark.

The pale background texture is visible behind the map, editorial content, booking band, and footer. It resembles soft botanical silhouettes or a misty wash. Its exact asset, rendering method, repeat behavior, and opacity were not supplied.

### Observed Asset References

No image `src`, background-image URL, logo filename, or font-file URL was included in the supplied evidence. The following is an asset inventory, not a list of recovered paths.

| Asset | Evidence | Implementation guidance |
| --- | --- | --- |
| Courtyard hero photograph | Desktop and mobile opening captures | Supply a high-resolution authorized image and control the crop per viewport |
| Calligraphic property identity | Desktop/mobile headers | Preserve the artwork and its approximately `1:2.11` width-to-height ratio |
| Rooms lead photograph | Section structure and its vertical room label | Obtain the actual asset before matching composition; the supplied current captures do not show it fully |
| Property map | Desktop middle capture | Keep fine labels readable and avoid excessive downscaling |
| Cuisine photograph | Desktop middle capture | Preserve the rich food and ceramic colors and square image boundary |
| Pale texture | Middle and footer captures | Use a low-contrast authorized texture; do not substitute prominent decorative grain |
| Gallery images | Eight image-associated links in the DOM | Subjects and exact crop rules remain unverified |
| News thumbnails | Desktop footer capture and news structure | Keep them secondary to the large editorial images |
| Social and utility graphics | Footer and menu captures | Retain their simple line character; verify destinations independently |

CSS can reproduce the spacing and control treatment. It cannot reproduce the identity of the inn's photographs, logo, or map without the corresponding assets.

## Layout & Responsive Behavior

### Desktop

The page has two overlapping horizontal systems. Large media panels use nearly the whole screen with `30px` side margins. Most text and utility content align to `x = 260`, leaving room for the navigation rail, and extend to `x = 1360`.

The introduction is narrower and more centered within the right-hand reading area. Rooms copy is narrower than cuisine copy. Gallery images form four columns; news uses three smaller columns distributed across the available width. The booking band and footer maintain the same inner alignment.

The left rail is visually transparent. It does not create a solid sidebar column that pushes every photograph to the right.

### Mobile

At `390 × 844`, the left navigation and vertical reservation strips are absent from the visible header. Identity remains at the top left and the menu remains at the top right, including in the footer capture.

The opening photograph fills the viewport with a narrow crop. The vertical headline retains its two-column arrangement, while the news teaser stacks its date above its link. Below the opening, content uses `20px` side margins and a `350px` usable width.

Major observed changes are:

| Component | Desktop | Mobile |
| --- | --- | --- |
| Header | Full-height left rail plus top-right menu | Wide, shallow header with logo and menu |
| Main navigation | Seven persistent visible links | Not visible until another navigation state, which was not inspected |
| Hero news | Date and link in one row | Date above link |
| Editorial type | Larger, widely spaced text | Smaller text with wide tracking retained |
| Section actions | Left aligned, `250 × 60px` | Centered, `240 × 50px` |
| Gallery | Four columns, two rows | Two columns, four rows |
| News | Three entries in one row | Two columns with a third entry below |
| News index link | Unboxed link near heading | Outlined button after entries |
| Booking band | Telephone and two actions side by side | Three `80px` rows |
| Footer | Identity left, navigation right | Navigation before identity and contact details |

Only these two viewport sizes were supplied. The exact media-query breakpoint, tablet behavior, landscape-phone layout, and browser-toolbar resizing behavior are unknown. A `1024px` breakpoint in the Quick Start is a recommendation, not a recovered source value.

## Do’s and Don’ts

### Do

- Build the page around the courtyard photograph, vertical phrase, calligraphic identity, and calm editorial spacing.
- Keep `#58574C` as the primary text and compact reservation color.
- Preserve the distinction between full-width photography and the narrower, right-offset desktop reading area.
- Retain wide Japanese tracking and generous paragraph line heights.
- Use the measured desktop/mobile type roles instead of scaling every element by one factor.
- Keep controls square, thinly outlined, and lightly marked with chevrons.
- Preserve the mobile gallery, news, booking, and footer rearrangements.
- Treat the map as useful content that needs legible labels.
- Verify foreground contrast as persistent graphics move across light and dark sections.
- Keep news dates, phone numbers, and reservation destinations as functional content.

### Don’t

- Don’t turn the homepage into a generic feature-card and conversion-banner layout.
- Don’t place every section inside a centered container of the same width.
- Don’t introduce rounded cards, floating shadows, colorful badges, or oversized filled buttons.
- Don’t replace the brush logo with ordinary display type.
- Don’t use the `H2` wrapper's computed font size as a verified measurement of the large hero characters.
- Don’t treat inherited black anchor colors as the visible color of all child graphics.
- Don’t infer a working social feed or lightbox from placeholder gallery links.
- Don’t describe the mobile footer as an opened menu.
- Don’t reproduce low-contrast white desktop navigation over pale sections without an explicit contrast strategy.
- Don’t invent image paths, loaded font files, animation keyframes, or hover states that the evidence does not provide.

## Recommended Implementation Additions

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

- Use a real button for the menu with an accessible name, `aria-expanded`, and an associated navigation region. Define focus and Escape-key behavior once the intended menu pattern is chosen.
- Preserve the hero phrase as one understandable accessible heading. If individual glyph spans are used for layout, hide the decorative duplication from assistive technology.
- Switch persistent foreground graphics according to the section behind them. A supplied `data-surface` state is one implementation option; its use is not established in the original.
- Increase the effective hit area around the visually `40px`-wide booking strips to at least `44px` without changing their apparent proportions.
- Provide visible keyboard focus for outlined controls, navigation, news entries, and utility links.
- Keep essential content visible if animation or JavaScript fails. Respect reduced-motion preferences and avoid delaying usable navigation for a decorative reveal.
- Add meaningful alternatives for property photographs and a text equivalent for important information in the map.
- Verify the actual social and gallery destinations before making those elements interactive.
- Test the footer at increased text size. Keep telephone and fax groups understandable when wrapping rather than letting individual digits split arbitrarily.
- Provide an appropriately sized hero image early; defer lower-page imagery and reserve its dimensions to reduce layout movement.

## Agent Prompt Guide

### Quick Color Reference

- Main ink and vertical booking fills: measured `#58574C`.
- Hero lettering and reversed labels: measured `#FFFFFF`.
- Light canvas: approximately `#F8F8F7`; texture wash approximately `#ECECEB`.
- Fine divider approximation: `#DCDCD7`.
- Photographic art direction: dusk blue, deep foliage, and warm windows; these are image colors rather than new action colors.
- Surface treatment: shared canvas and fine rules, with no general shadow system.

### Overall Prompt

“Create a Japanese mountain-inn homepage inspired by Hozantei's current composition. Use a full-viewport dusk courtyard photograph with a pond and warm-lit traditional buildings. Overlay a vertical calligraphic identity at upper left, a fine three-line menu at upper right, and two columns of white Japanese headline characters near the lower right. On desktop, retain a transparent 260px left navigation rail and two narrow olive-gray vertical reservation strips. Follow the image with pale, subtly textured editorial sections using muted olive-gray text, delicate Japanese Mincho typography, wide tracking, and very generous line spacing. Let photographs nearly span the screen while body text begins farther right. Include rooms and a fine property map, a rich cuisine photograph, a gallery, sparse dated news, a ruled reservation band, and a contact footer. On mobile, remove the visible rail, use 20px content margins, retain the vertical headline, change gallery and news to two columns, stack booking actions, and place footer navigation before the property details.”

### Example Component Prompts

1. **Opening:** “At 1440 × 1000, place an 88 × 186 identity mark at x86/y65 over a dark courtyard photograph. Put the menu 60px from the right and 50px from the top. Reserve a 160 × 370 region near the lower right for two vertical columns of delicate white copy. Keep the current news teaser low on the left side of the main reading area.”
2. **Rooms introduction:** “Use a wide, square-cornered photograph followed by an olive-gray editorial block. Give desktop room copy a 460px measure and place a fine property map alongside it. Use a small section label, spacious Japanese text, and a transparent 250 × 60 outlined detail link with a thin chevron.”
3. **Cuisine:** “Create a near-full-width food photograph filled with seasonal dishes, ceramics, red shellfish, and green leaves. Follow it with a calm 650px text block, substantial white space, and a modest outlined navigation link. Keep saturated color inside the image.”
4. **News:** “Arrange three approximately 240px news entries across an 1100px desktop inner region, leaving broad gaps. Each entry has an image, a small date, and a light Japanese title on the shared pale background. At 390px viewport width, use two 166.25px columns and move the news-list action below the grid.”
5. **Booking and footer:** “Use thin horizontal rules around a desktop telephone-and-reservation band. Below it, align property details left and three navigation groups right. On mobile, make three 80px action rows, then a two-column navigation index, property details, social mark, and widely tracked copyright.”
6. **Motion:** “Use restrained, short transitions and keep content usable immediately. The reference supplies 300ms link transitions and delayed reveal declarations, but no complete keyframes or open-menu behavior. Treat any new reveal or menu motion as a proposed implementation and include reduced-motion support.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not recovered source CSS. Exact ink, measured type values, and principal desktop/mobile dimensions are retained. Canvas colors, divider color, image ratios, hero glyph sizes, hover treatment, and the `1024px` breakpoint are explicitly approximations or recommendations.

Use authorized assets with an image element named `.hero__photo`, an image-based `.brand`, and ordinary image elements for photographs and the map. No asset URLs or font files are invented here. The optional scrim should only be applied if the supplied photograph needs it; do not darken an already graded image twice.

The hero heading expects two `.hero-title__column` elements, with the right-hand phrase first in document order. Each contains `.hero-title__glyph` spans. Give the heading a complete accessible label. Section content uses `.page-section > .section-inner`; room content can use the named copy/map/action grid areas. The `data-surface` attribute is an application-controlled contrast recommendation, not an observed source API.

```css
:root {
  /* Measured interface colors */
  --ink: #58574c;
  --white: #ffffff;

  /* Visual approximations */
  --paper: #f8f8f7;
  --paper-wash: #ececeb;
  --rule: #dcdcd7;
  --dusk: #233d50;
  --paper-texture: none;

  /* Observed family declaration; font files must be supplied legally */
  --font-jp: "FOT-筑紫Aオールド明朝 Pr6 R",
    AGaramondPro-Regular, 游ゴシック体, YuGothic,
    "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック,
    "Yu Gothic", メイリオ, Meiryo, sans-serif;
  --font-latin: AGaramondPro-Regular, serif;

  --body-size: 16px;
  --body-tracking: 4.8px;
  --rail-width: 260px;
  --edge: 30px;
  --section-button-width: 250px;
  --section-button-height: 60px;
  --link-motion: 300ms ease-in-out;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  font-family: var(--font-jp);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 2;
  letter-spacing: var(--body-tracking);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--rail-width);
  color: var(--white);
  pointer-events: none;
}
.site-header a,
.site-header button { pointer-events: auto; }
.site-header[data-surface='paper'] { color: var(--ink); }

.brand {
  position: absolute;
  top: 65px;
  left: 86px;
  width: 88px;
  height: 186px;
}
.brand img { width: 100%; height: 100%; object-fit: contain; }

.rail-nav {
  position: absolute;
  top: 350px;
  left: 64px;
  display: grid;
  gap: 12px;
}
.rail-nav a { font-size: 15px; line-height: 30px; }

.rail-booking {
  position: absolute;
  left: 80px;
  bottom: 70px;
  display: flex;
  gap: 20px;
}
.rail-booking a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 170px;
  color: var(--white);
  background: var(--ink);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 2.25px;
}

.menu-toggle {
  position: fixed;
  top: 50px;
  right: 60px;
  display: grid;
  align-content: start;
  gap: 12px;
  width: 70px;
  min-height: 65px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.menu-toggle__lines { display: grid; gap: 14px; }
.menu-toggle__line { height: 1px; background: currentColor; }
.menu-toggle__label {
  font-family: var(--font-latin);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 4.8px;
  text-align: center;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  background: var(--dusk);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 105%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* Optional contrast aid; its opacity is a recommendation. */
.hero--needs-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 22%);
  pointer-events: none;
}
.hero-title {
  position: absolute;
  z-index: 1;
  right: 160px;
  bottom: 120px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: flex-start;
  width: 160px;
  min-height: 370px;
  margin: 0;
  font-weight: 400;
}
.hero-title__column { display: flex; flex-direction: column; gap: 32px; }
.hero-title__glyph {
  /* Visual estimate, not the measured H2 wrapper size. */
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0;
}
.hero-news {
  position: absolute;
  z-index: 1;
  left: 310px;
  bottom: 70px;
  display: grid;
  grid-template-columns: 100px auto;
  align-items: center;
  max-width: calc(100% - 390px);
  font-size: 14px;
  line-height: 28px;
}
.hero-news time {
  font-family: var(--font-latin);
  letter-spacing: 1.4px;
}
.hero-news__link { border-left: 1px solid; padding-left: 20px; }
.hero-news__link::after {
  content: '';
  display: inline-block;
  width: 60px;
  margin-left: 20px;
  border-top: 1px solid;
  vertical-align: middle;
}

.main-content { padding-top: 100px; }
.page-section { margin-inline: var(--edge); }
.section-inner { margin-inline: calc(var(--rail-width) - var(--edge)) 50px; }
.intro {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 60px 50px 60px var(--rail-width);
}
.intro__inner { width: 100%; max-width: 724px; }
.intro h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 9.6px;
}
.intro p {
  margin: 50px 0 0;
  font-size: 18px;
  line-height: 2.6;
  letter-spacing: 7.2px;
}

.feature-section { margin-bottom: 150px; }
.feature-photo {
  width: 100%;
  aspect-ratio: 16 / 9; /* Recommended starting crop, not a measured image ratio. */
  object-fit: cover;
}
.feature-details { padding-top: 80px; }
.section-kicker {
  margin: 0 0 30px;
  padding-left: 50px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
.editorial-copy { margin: 0; line-height: 2.4; }
.rooms-layout {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  grid-template-areas: 'copy map' 'action map';
  gap: 40px 0;
}
.rooms-copy { grid-area: copy; }
.property-map { grid-area: map; width: 100%; height: auto; }
.rooms-action { grid-area: action; }
.cuisine-copy { max-width: 650px; }
.cuisine-copy .section-link { margin-top: 40px; }

.section-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, var(--section-button-width));
  min-height: var(--section-button-height);
  padding: 10px 35px;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .25em;
  text-align: center;
}
.section-link::after {
  content: '';
  position: absolute;
  right: 22px;
  width: 8px;
  height: 8px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
}

.section-heading { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.2; }
.section-caption { margin: 15px 0 0; font-size: 13px; line-height: 2; }
.gallery-section { margin-top: 200px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px .6667%;
  margin-top: 30px;
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 1; /* Approximation; verify against the actual assets. */
  object-fit: cover;
}
.news-section { margin-top: 180px; padding-top: 190px; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 21.8%);
  justify-content: space-between;
  row-gap: 30px;
  margin-top: 30px;
}
.news-card { display: block; min-width: 0; }
.news-card img { width: 100%; height: auto; }
.news-card time { display: block; margin-top: 20px; font-size: 13px; line-height: 26px; }
.news-card__title { margin: 10px 0 0; font-size: 15px; font-weight: 400; line-height: 30px; }

.booking-section {
  margin-top: 250px;
  border-block: 1px solid var(--rule);
}
.booking-grid {
  display: grid;
  grid-template-columns: 36.6% 31.7% 31.7%;
  padding-block: 30px;
}
.booking-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 20px;
  border-left: 1px solid var(--rule);
  font-size: 20px;
  line-height: 2;
  text-align: center;
}
.booking-cell:first-child { justify-content: flex-start; padding-left: 0; border-left: 0; }

.site-footer { padding-block: 90px 80px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'identity nav' 'social legal';
  row-gap: 70px;
}
.footer-identity { grid-area: identity; }
.footer-identity__name { margin: 0; font-size: 22px; line-height: 2; }
.footer-address { margin: 10px 0 0; font-size: 14px; line-height: 2; font-style: normal; }
.footer-nav { grid-area: nav; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-nav__group { display: grid; align-content: start; gap: 10px; }
.footer-nav a { position: relative; padding-left: 15px; font-size: 15px; line-height: 30px; }
.footer-nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
}
.footer-social { grid-area: social; }
.footer-legal {
  grid-area: legal;
  margin: 0;
  font-family: var(--font-latin);
  font-size: 14px;
  line-height: 28px;
  text-align: right;
}

/* Recommended feedback; hover endpoints were not supplied. */
a, button { transition: opacity var(--link-motion); }
@media (hover: hover) {
  a:hover, button:hover { opacity: .75; }
}
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

/* Recommended breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 1024px) {
  :root {
    --body-size: 14px;
    --body-tracking: 4.2px;
    --rail-width: 0px;
    --edge: 20px;
    --section-button-width: 240px;
    --section-button-height: 50px;
  }
  .site-header { inset: 0 0 auto; width: 100%; height: 200px; }
  .brand { top: 25px; left: 25px; width: 70px; height: 148px; }
  .rail-nav, .rail-booking { display: none; }
  .menu-toggle { top: 30px; right: 20px; width: 50px; min-height: 50px; gap: 7px; }
  .menu-toggle__lines { gap: 11px; }
  .menu-toggle__label { font-size: 10px; letter-spacing: 4.2px; }
  .hero-title { right: 50px; bottom: 100px; width: 94px; min-height: 215px; }
  .hero-title__column { gap: 16px; }
  .hero-title__glyph { font-size: 30px; }
  .hero-news { left: 20px; right: 20px; bottom: 20px; display: block; max-width: none; }
  .hero-news time { display: block; font-size: 12px; line-height: 24px; letter-spacing: 1.2px; }
  .hero-news__link { display: block; padding: 0; border: 0; font-size: 13px; line-height: 26px; }
  .hero-news__link::after { width: 40px; margin-left: 10px; }
  .section-inner { margin-inline: 0; }
  .intro { padding-inline: 20px; }
  .intro h2 { font-size: 18px; letter-spacing: 7.2px; }
  .intro p { margin-top: 35px; font-size: 14px; letter-spacing: 5.6px; }
  .feature-section { margin-bottom: 100px; }
  .feature-details { padding-top: 50px; }
  .section-kicker { margin-bottom: 20px; }
  .rooms-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'map' 'action'; }
  .section-link { margin-inline: auto; font-size: 14px; }
  .section-heading { font-size: 24px; }
  .section-caption { font-size: 12px; }
  .gallery-section { margin-top: 100px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5px 1%; }
  .news-section { margin-top: 100px; padding-top: 100px; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 5%; }
  .news-card time { margin-top: 10px; font-size: 12px; line-height: 24px; }
  .news-card__title { margin-top: 5px; font-size: 14px; line-height: 22.4px; }
  .booking-section { margin-top: 100px; }
  .booking-grid { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .booking-cell, .booking-cell:first-child {
    justify-content: center;
    min-height: 80px;
    padding: 15px;
    border-left: 0;
    font-size: 16px;
  }
  .booking-cell + .booking-cell { border-top: 1px solid var(--rule); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'nav' 'identity' 'social' 'legal'; row-gap: 60px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; }
  .footer-nav__group:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-nav a { font-size: 14px; line-height: 28px; }
  .footer-identity__name { font-size: 16px; }
  .footer-address { font-size: 13px; }
  .footer-legal { font-size: 12px; line-height: 24px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The starter deliberately leaves menu opening, section-aware logo asset swapping, gallery behavior, and page-top logic to explicit implementation. It also leaves content visible by default instead of reproducing unverified hidden entry states. Validate the resulting image crops, font rendering, and long-text behavior at the two recorded viewports before adding intermediate breakpoints.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not imply that the original site uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-ink: var(--ink);
  --color-paper: var(--paper);
  --color-paper-wash: var(--paper-wash);
  --color-rule: var(--rule);
  --color-dusk: var(--dusk);
  --font-editorial: var(--font-jp);
  --font-date: var(--font-latin);
  --text-body: var(--body-size);
  --spacing-page-edge: var(--edge);
  --spacing-navigation-rail: var(--rail-width);
  --spacing-section-button: var(--section-button-width);
  --radius-control: 0px;
}
```

## Sources & Evidence

- **Original and final page:** [Hozantei homepage](https://www.hozantei.com/). Both supplied URLs are identical; the recorded response status is `200`.
- **Capture time:** `2026-10-01T17:33:49.535Z`, equivalent to October 2, 2026, 02:33:49.535 JST.
- **Desktop evidence:** `1440 × 1000` viewport; approximately `7358px` document height; opening, middle-section, and footer captures; rendered text, links, element rectangles, font declarations, colors, and animation/transition values.
- **Mobile evidence:** `390 × 844` viewport; approximately `6245px` document height; opening and footer captures; corresponding rendered DOM measurements and computed styles for the rest of the homepage.
- **Observed page identity:** the original-page title and footer identify the property as “黒川温泉 源流の宿 帆山亭.” The footer provides its address and contact information. No separate legal operating company is inferred.
- **Inspection method supplied with the evidence:** initial observation of at least five seconds; bounded waits for document load, relevant finite animations, layout/text stability, and visible image decoding; intermediate scroll traversal. Perpetual animations were temporarily paused during readiness checks and resumed. SharedWorkers and service workers were disabled.
- **Limits:** no additional browsing or command execution was performed for this reference. No opened menu, booking completion, gallery activation, hover sequence, keyboard interaction, or intermediate viewport was supplied. Image source URLs, full animation keyframes, exact source breakpoints, and font-file loading details were unavailable.

This reference documents the supplied current homepage state. Measured values, visual estimates, and recommended adaptations are identified separately throughout.