# Hitachi-no-kuni Long Trail — Style Reference

> A walking journey presented as an illustrated travel scroll, with forest-green lettering, blue mountain washes, and warm paper.

**Website:** [hlt.pref.ibaraki.jp](https://hlt.pref.ibaraki.jp/)
**Original URL:** https://hlt.pref.ibaraki.jp/
**Final URL:** https://hlt.pref.ibaraki.jp/
**Theme:** light paper surfaces with extensive landscape illustration
**Inspected:** September 17, 2026, 04:31 JST; supplied capture timestamp: `2026-09-16T19:31:33.278Z`
**Viewports:** desktop `1440 × 1000`; mobile `390 × 844`, in CSS pixels
**Scope:** the current Japanese homepage. Visual evidence covers the opening composition, the lower desktop story directory and its transition into the next chapter, and desktop/mobile footers. Rendered DOM and computed-style evidence additionally cover the introduction, movie collection, area map and story directory. Later itinerary, downloadable-map and access sections are represented primarily by extracted text and links. Linked pages and opened interaction states were not inspected.

The homepage introduces a regional walking route through landscape, local history, religious sites, and everyday rural life. Its structure is a substantial destination guide: an illustrated opening leads into explanatory prose, films, two ways to discover eleven areas, a three-day itinerary, map resources, travel information, and institutional contact details.

The strongest visual relationship is between monumental lettering and small human figures inside expansive scenery. The opening places a dark green Japanese/English wordmark over pale blue mountain ridges; a lone walker gives the rocky foreground scale. A village scene closes the page with rice fields, a red-roofed house, and a resident near the entrance. Warm paper and decorative clouds connect these landscapes to the information sections.

Typography alternates between vertical Japanese compositions and horizontal reading text. The story directory introduces another distinctive device: large colored phrases interspersed with small rounded photographs, followed by plain hashtags and a compact place-name block. The interface remains quiet enough for the illustrations and lettering to carry the experience.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed styles. Fractional rectangles are rounded for readability where appropriate.
- **Derived** means a calculation from measured values, such as the gap between adjacent movie items.
- **Estimated** means a visual approximation from the original-page screenshots. Estimated colors were not sampled with a pixel tool.
- **Recommended** means an implementation choice for a new project. It is not a claim about the original source.
- Token names below are descriptive aliases. Observed source font variables are identified separately.
- A wrapper's computed font does not necessarily describe its visible children or artwork. In particular, the empty-text H1 and several H2 wrappers should not be treated as proof of the large lettering's font or size.
- Screenshots establish settled appearance. They do not establish menu behavior, playback behavior, hover endpoints, parallax, or entrance sequences.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Warm Paper | `#ECE3D1` | `--color-paper` | Measured body background: `rgb(236, 227, 209)` at both viewports |
| Forest Ink | `#204637` | `--color-ink` | Measured corner slogan, menu characters, and mobile map-region button background |
| Warm Charcoal | `#37322E` | `--color-text` | Measured Japanese introduction, story hashtags, pronunciation labels, and area names |
| Black | `#000000` | `--color-black` | Measured English introduction and sampled section captions/subheadings |
| Utility Gray | `#979797` | `--color-muted` | Measured desktop language separator; the inactive language also appears gray in the screenshots |
| White | `#FFFFFF` | `--color-white` | Measured movie-item caption text; also visible in mobile text over scenery |
| Light Sheet | approximately `#FFFBEE` | `--color-sheet` | Estimated story-panel interior and desktop outbound-card surface |
| Fine Rule | approximately `#A59B8C` | `--color-rule` | Estimated thin separators across story rows |
| Patterned Gold | approximately `#CBB660` | `--color-frame` | Estimated patterned border around the desktop area-story panel |
| Mountain Blue | approximately `#7AAAC5` | `--color-mountain` | Estimated representative illustration color; not a measured interface fill |

The paper background is a measured flat color beneath a visibly textured result. Reproducing only the hex value will omit the grain and tonal variation. Likewise, the mountains contain many overlapping blues; Mountain Blue is a useful reference swatch, not a substitute for the artwork.

### Story Accents

The visible desktop rows use muted colors to distinguish their narrative headlines. Each row's narrow place-name divider echoes its headline color. Hashtags and place names retain dark neutral text.

| Visible area | Approximate accent | Application |
| --- | --- | --- |
| `竪破山` | `#9D9390` | Warm gray headline and divider |
| `花園` | `#BF565A` | Muted red headline and divider |
| `奥久慈` | `#4B6B90` | Slate blue headline and divider |
| `大子町中心商店街` | `#B85B90` | Dusty pink headline and divider |
| `高部宿` | `#AA8368` | Earth-brown headline and divider |
| `八溝山` | `#A7B55C` | Yellow-green headline and divider |

All six accent values are visual estimates. They describe the visible rows only; the evidence does not establish a complete eleven-area color system.

No theme selector is evidenced. The numerous transparent `--g-color-*` custom properties are generated styling infrastructure, not a useful visible palette to copy.

## Tokens — Typography

### Japanese Display — Shuei Shogo Mincho

- **Observed family:** `秀英初号明朝`.
- **Observed source variable:** `--s-font-8487dadf`.
- **Confirmed roles:** the small opening slogan, map/story subheadings, and area names.
- **Weights:** computed `600` for the corner slogan and `700` for sampled subheadings and place names.
- **Character:** sharp stroke contrast and emphatic triangular terminals reinforce the historic, printed atmosphere.
- **Recommended alias:** `--font-display: '秀英初号明朝', serif`.

The large trail wordmark has a custom graphic arrangement: oversized Japanese characters, smaller pronunciation text, an English lockup bounded by horizontal rules, and a second Japanese line. Its extracted H1 text is empty. Preserve it as a distinct artwork component; its appearance cannot be recreated by applying the H1 wrapper's generic `32px sans-serif` declaration.

### Japanese Reading Text — Shippori Antique

- **Observed family:** `Shippori Antique`.
- **Observed source variable:** `--s-font-7c80999d`.
- **Confirmed roles:** introductory paragraphs, menu characters, section descriptions, movie captions, hashtags, pronunciation labels, and area suffixes.
- **Treatment:** generous paragraph leading and tracking; much tighter line boxes for directory metadata.
- **Responsive change:** introductory prose reduces from `18px / 600` on desktop to `16px / 400` on mobile.

### Latin Display — Fraunces

- **Observed family:** `Fraunces`.
- **Observed source variable:** `--s-font-d893b5ad`.
- **Confirmed roles:** English introductory statement, English chapter captions such as `MOVIE` and `AREA STORY`, and the desktop language separator.
- **Weight:** sampled values use `400`.

The language labels look serif in the captures, but their supplied anchor wrappers report generic sans-serif. The precise child-font assignment for those two labels is not independently established.

### English Reading Text — Cabin

- **Observed family:** `Cabin`.
- **Observed source variable:** `--s-font-4e89d926`.
- **Confirmed role:** the desktop English explanatory paragraph.
- **Measured treatment:** `20px`, weight `400`, `39px` line height, and `0.2px` letter spacing.

The source also registers `Inter,'Noto Sans JP'`, `アンチックAN R`, and `アンチックAN M`. Their presence does not establish a visible role in the sampled components. Do not assign them to the wordmark or story artwork without further evidence.

### Type Scale

Values below describe the sampled text elements, not a universal heading scale.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Corner slogan | `18 / 21.06px` | `12 / 14.4px` | `600` | `0.12em` desktop; `0.06em` mobile |
| Vertical menu characters | `16 / 16.16px` | `14 / 14.14px` | `400` | Normal |
| Japanese introduction | `18 / 39.96px` | `16 / 35.52px` | `600 → 400` | `0.13em` |
| English introductory statement | `27 / 44.01px` | Not present in supplied mobile rendered text | `400` | `-0.01em` |
| English introductory paragraph | `20 / 39px` | Not present in supplied mobile rendered text | `400` | `0.01em` |
| English chapter caption | `19 / 24.13px` | `16 / 24px` | `400` | Normal |
| Japanese chapter description | `20 / 36px` | `16 / 25.6px` | `600` | `0.03em` |
| Map/story subheading | `32 / 32.32px` | `20 / 20.2px` | `700` | `0.3em → normal` |
| Story hashtags | `13 / 15.99px` | Same | `400` | `0.03em` |
| Place-name pronunciation | `10 / 15px` | `8 / 9.6px` | `400` | `0.03em` |
| Place name | `20 / 33px` | `18 / 21.96px` | `700` | Usually normal |
| Area suffix | `8 / 14.96px` | `11 / 12.98px` | `400` | `0.03em` |
| Movie hashtags | `16 / 30.08px` | `16 / 26.08px` | `400` | `0.03em` |

Two desktop place names, including the long shopping-street name, use `-1.6px` tracking. The corresponding mobile names use normal tracking. This is a local fit adjustment, not a recommendation to tighten every heading.

The colorful story phrases appear approximately `28–32px` high on desktop. Their font implementation is unresolved because those phrases are visible in the screenshot but absent from the supplied anchor text extraction.

## Tokens — Spacing & Shapes

**Density:** spacious scenic chapters surrounding compact information rows.
**Geometry:** mostly flat, square structures; slight rounding on small photographic fragments and outbound cards; circular controls in the movie/map regions.

### Spacing Scale

| Use | Value | Status |
| --- | --- | --- |
| Corner slogan line gap | `8px` desktop; `3px` mobile | Derived from text rectangles |
| Pronunciation-to-name gap | Usually `4px` | Derived from sampled rectangles |
| Horizontal hashtag gap | `12px` | Derived |
| Wrapped hashtag row gap | Usually `8px`, with a `9px` example | Derived on mobile |
| Story-row vertical padding | `11px / 12px` desktop; `15px / 16px` mobile | Measured; some final rows use equal top/bottom padding |
| Mobile story-list side inset | `16px` | Measured |
| Mobile introduction side inset | `20px` | Measured |
| Introduction paragraph gap | `28px` | Derived at both viewports |
| Movie-item gap | `60px` desktop; `36px` mobile | Derived from item positions and `269px` widths |
| Desktop story-section outer padding | `50px` each side | Measured |
| Desktop English paragraph left padding | `96px` | Measured |
| Desktop footer panel padding and column gaps | Approximately `40px` | Screenshot estimate |
| Mobile footer-card gap | Approximately `16px` | Screenshot estimate |

### Border Radius

| Element | Geometry | Evidence |
| --- | --- | --- |
| Story-row anchor | `0` | Measured |
| Movie-item button | `0` | Measured |
| Movie previous/next controls | `50%`, `60 × 60px` | Measured on desktop |
| Additional mobile map-region control | `50%`, `32 × 32px` | Measured; action unknown |
| Inline story photographs | Approximately `6–9px` radius | Visual estimate |
| Footer cards and desktop footer panel | Approximately `3–4px` radius | Visual estimate |
| Mobile language-switch surface | Approximately `2px` radius | Visual estimate |

### Layout Measurements

| Element | Desktop | Mobile | Interpretation |
| --- | --- | --- | --- |
| Document height | `15,934.05px` | `15,572.11px` | Recorded rendered document, not a target height |
| Opening section | `1440 × 1979px` | `390 × 1096px` | Extends beyond the first viewport |
| H1 wrapper | `y:206`, height `285px` | `y:216`, height `146.48px`, horizontal padding `40px` | Measures the artwork container |
| Corner slogan origin | `(60, 60)` | `(16, 24)` | Strong responsive inset change |
| Menu button | `(1330,135)`, `18 × 108px` | `(348,24)`, `22 × 90px` | Very narrow recorded button boxes |
| Language links | Near top-right at `y:59.92` | Two `61 × 23px` links at `y:803` | Mobile moves into a bottom-corner surface |
| Japanese introduction column | Width `479.67px`, left `220.05px` | Width `350px`, left `20px` | Desktop reading measure becomes nearly full-width |
| Movie item | `269 × 578.16px` | `269 × 570.16px` | Width is retained rather than scaled to the viewport |
| Story-row width | `984.48px`, left `262.25px` | `358px`, left `16px` | Broad row becomes a stacked entry |
| Ordinary story-row height | Mostly `85–86px` | Approximately `208–275px` | Mobile height varies with content |
| Long shopping-street row | `100px` | `272.97px` | Desktop pronunciation wraps to two lines |
| Footer panel | Approximately `1168 × 224px` | No common opaque panel visible | Screenshot estimate |
| Footer outbound card | Approximately `336 × 144px` | Width approximately `358px`; heights `112px` and `136px` | Screenshot estimate |

There is no evidence of one global modular spacing unit. Use the recurring component values without forcing the entire illustrated composition onto an eight-pixel grid.

## Components

### Opening Landscape and Wordmark

**Role:** establish the place and the feeling of walking through time.

The desktop first screen begins with a broad, lightly textured cream sky. Layered blue ridges enter around the lower edge of the wordmark. The foreground gradually becomes darker and more detailed, with green vegetation and angular rock faces. A small walker stands near the lower-left portion of the capture.

The central wordmark combines three scales: the large Japanese place name, a smaller English title bounded by fine rules, and the sweeping Japanese trail name below. A tiny pronunciation annotation sits above part of the main name. The visible ink occupies roughly `575px` of desktop width; the actual asset bounds were not supplied.

A short two-line slogan sits independently at the top-left: `タイムトリップしよう、` and `常陸国ロングトレイルで。`. The introductory vertical copy is lower and farther left than the central logo. It is dark over the pale desktop mountains and white over the darker mobile foreground.

At `390px`, the artwork is recomposed into a tall scene. Mountain ridges begin around `y:140`, the wordmark starts around `y:216`, and the walker is visible around the middle of the first screen. Vertical copy begins near `y:680` and continues below the screenshot. Preserve this extended composition; the original opening section is `1096px` tall at an `844px` viewport.

**Implementation guidance:** separate the background landscape, title artwork, corner slogan, and introductory text. Use independently adjustable mobile crops or artwork variants. A single centered background crop will not reliably preserve both the walker and the title's clear space.

### Persistent Index Control

**Role:** access to the page index, labeled `項目一覧`.

The visual mark is three slim vertical strokes, followed by four Japanese characters stacked downward. It sits directly over the page without a large filled button container. Its repeated position across the opening, middle and footer captures supports a persistent viewport utility.

Desktop places it at `y:135`; mobile raises it to `y:24`. The label decreases from `16px` to `14px`. The observed button is only `18px` wide on desktop and `22px` on mobile.

The menu was not opened. Its overlay, item arrangement, close affordance, focus behavior, and animation remain unverified. A new implementation should retain the slender visual mark while increasing its interactive width.

### Language Switch

**Role:** navigation between the Japanese root page and `/en`.

Desktop shows a quiet `JPN / ENG` line at the top-right, approximately `60px` from the top and right edges. The Japanese option appears dark green; the English option is muted.

Mobile presents a small white rectangle near the bottom-right, approximately `126 × 27px`, with a green dot beside `JPN` and a short vertical separator between options. Its two measured link boxes are each `61 × 23px`. The surface stays in the same position in the opening and footer captures.

These are navigation links. No in-place translation or language persistence behavior was tested.

### Introductory Editorial Block

**Role:** explain the route's scope and the connection between nature, history and daily life.

The Japanese explanation consists of three paragraphs. Its unusually generous `2.22` line-height and `0.13em` tracking make a relatively small text column feel deliberate and calm. The desktop text measure is approximately `480px`; mobile uses `350px` with `20px` side insets.

The introductory Japanese heading occupies a narrow composition at the left in the desktop measurements and moves to a centered block above the paragraphs on mobile. The mobile heading wrapper is approximately `107 × 224.64px`.

Desktop also includes an English statement in Fraunces and a longer Cabin paragraph, arranged side by side in the sampled rectangles. The right paragraph has `96px` of left padding. This English block is absent from the supplied mobile rendered text; the mechanism producing that difference was not established.

### Chapter Heading Group

**Role:** orient the visitor through the long page.

Repeated chapters pair a compact Japanese title with an uppercase English caption and a short explanatory sentence. Examples include `映像体験` / `MOVIE` and `郷土物語` / `AREA STORY`.

The sampled Japanese heading wrappers measure `100 × 108px` on desktop and `80 × 68.31px` on mobile. Their generic H2 font declarations should not be used as the visible glyph specification. The English caption is confirmed Fraunces at `19px` desktop and `16px` mobile.

The Movie description is one horizontal line on desktop and two centered lines on mobile. The Area Story description uses two lines in both supplied layouts. Keep English captions subordinate to the Japanese chapter identity.

### Movie Collection

**Role:** introduce different experiences along the trail through seven media entries.

The DOM records a horizontal sequence of tall `269px`-wide buttons with two-line white hashtag captions. Neighboring items extend outside the viewport. The fourth item is centered in both snapshots: its desktop left edge is `585.5px`, while its mobile left edge is `61px`.

The desktop item step is `329px`, giving a `60px` gap. Mobile uses a `305px` step and a `36px` gap. Item width stays constant. This creates room for several entries on desktop and a central entry with neighboring fragments on mobile.

Desktop previous/next buttons are circular `60px` controls, separated by `12px`. Those arrow buttons do not appear in the supplied mobile element sample. This does not prove which touch gestures are supported.

No movie-region screenshot or opened player was supplied. Poster imagery, play symbols, modal styling, autoplay, sound, and swipe behavior remain unverified. The measurements support the collection's geometry, not a complete player design.

### Area Discovery Map

**Role:** provide geographic entry points to the eleven area pages.

The headings `地図から探す` and `物語から探す` identify sequential subsections in the recorded layout. They are not evidenced as tabs.

On desktop these subheadings are vertical Mincho text at `32px` with `0.3em` tracking. On mobile they become centered horizontal headings at `20px` with normal tracking.

The map subsection contains eleven anchors leading to the same destinations as the story list. A supplied CSS excerpt uses percentage coordinates for map links; the first includes `top:52.95%`, `left:67.511%`, and `width:5.633%`. This supports placing the clickable regions in the same coordinate system as the map artwork.

Several mobile link boxes are only approximately `14–27px` wide. An additional `32px` green circular button appears near the map region, but its icon and action were not supplied. Do not label it as a zoom control without further inspection.

The desktop map anchors share an origin in the supplied rectangle sample. Those rectangles are insufficient to reconstruct the final geographic arrangement. Preserve a text directory as an alternative to the map and verify actual marker placement against the artwork in a new implementation.

### Illustrated Story Frame

**Role:** give the area directory the character of a mounted printed sheet.

The desktop screenshot shows a pale inner field enclosed by an approximately `40px` gold border. Small repeated mountain-like motifs texture the gold. Thin story rules remain visually lighter than the frame.

Cloud illustrations overlap the frame's lower edge and extend into the surrounding paper. Their cream bodies, blue-green lower edges, and irregular silhouettes conceal the hard boundary between the directory and the next chapter. The next Japanese chapter heading begins after a generous area of empty paper.

Treat the clouds as separate decorative layers with transparent backgrounds. Their overlap is a compositional device; no movement is demonstrated. The mobile middle section was not visually captured, so the exact mobile treatment of this frame and its clouds remains unverified.

### Story Directory Row

**Role:** make each destination discoverable through a narrative phrase, visual fragments, and themes.

Each desktop row is one anchor spanning approximately `984.48px`. Its anatomy is:

1. A large colored phrase with small rounded photographic fragments inserted between words.
2. A line of plain dark hashtags below the phrase.
3. A narrow colored vertical divider near the right edge.
4. A place-name block containing a small pronunciation line, a bold Mincho name, and a tiny vertical `エリア` suffix.
5. A fine neutral horizontal separator across the row boundary.

The left narrative region occupies roughly four fifths of the row. The name text starts at `x:1082.73px`; the long pronunciation label has a measured `164px` text width. The photographic fragments are visually about `45–85px` wide and `25–28px` high. Their cropped subjects include forests, shrines, waterfalls, streets, food, and mountain scenery.

The headline is the main visual link cue. Hashtags are supporting descriptors inside the row anchor; the evidence does not show them as independent filters. Avoid turning them into filled pill badges.

On mobile, the row becomes a taller composition. The narrative region comes first, hashtags wrap below it, and the place-name group follows underneath toward the left. Place names begin around `x:37px` within rows starting at `x:16px`. The suffix changes to horizontal text and increases to `11px`. Row heights vary from approximately `208px` to `275px`.

The visible decorative phrases are missing from the extracted anchor text. Whether they are image lettering or another rendering technique is unresolved. For a new implementation, use accessible live text where possible, or provide a text equivalent for authorized headline artwork.

### Three-Day Model Course

**Role:** turn the site's regional stories into an example journey.

The rendered text confirms three `DAY` groups with day numbers, a thematic title, a duration, a descriptive paragraph, and a sequence of named stops with travel times. The displayed day durations are `4`, `3.5`, and `5` hours.

This is a structured itinerary component. Preserve the relationship between each stop and its following travel segment. An ordered list is a suitable implementation foundation.

Only the beginning of this chapter's heading is visible in the supplied middle screenshot. Exact card layout, route-line styling, icons, photography, and responsive arrangement are not established. A vertical mobile timeline would be a recommendation, not an observed feature.

### Illustration Map Resources

**Role:** provide downloadable trail-area maps.

The DOM confirms a chapter labeled `周辺絵図` / `ILLUSTRATION MAP`, explanatory copy, and four document links for Japanese, English, French and Traditional Chinese. The links point to separate PDF resources.

The repeated labels in the extraction do not establish duplicate visible buttons or an animated text effect. The resource files were not opened, and no map-section screenshot was supplied. Keep the languages explicit and each document independently reachable in a new implementation.

### Access Information

**Role:** explain arrival by rail, highway bus and car.

The extracted content confirms rail access to Hitachi and Fukuroda stations, separate highway-bus directions, and a car-access subsection. It includes departure and arrival labels and approximate journey times.

No opened accordion or tab state is evidenced. Do not invent collapsible behavior from the transport headings alone. A new design can reuse the paper surface, clear type hierarchy and fine separators, while keeping route information readable as text.

### Village Footer and Outbound Cards

**Role:** conclude the scenic journey and provide practical next steps.

The full-width illustration shows a red-roofed rural house, yellow-green rice fields, dense vegetation and a winding path. A person near the doorway gives the scene the same human scale as the walker in the opening.

Desktop places a broad beige panel over the lower scene. At approximately `1168 × 224px`, it holds three columns: institutional contact information, an official-site card, and an Instagram card. The two cards are approximately `336 × 144px`, with about `40px` between columns.

Each outbound card contains a recognizable logo or service icon, a dark green title, a small external-link symbol at the top-right, a thin horizontal divider, and a compact explanatory line. The Instagram card adds the account handle. The official trail logo remains lime green, while the Instagram symbol retains its familiar multicolor treatment.

Mobile removes the common opaque backing visible on desktop. The two lightly translucent cards stack with approximately `16px` between them, followed by white contact text directly over the illustration. The official-site card has a one-line heading at this width; the Instagram title uses two lines. The contact heading also changes from two desktop lines to one mobile line.

The footer identifies `茨城県 県北振興局` and includes its postal address and email link. The outbound destinations recorded on the original page are [kenpokult.com](https://kenpokult.com/) and [the trail's Instagram account](https://www.instagram.com/hitachinokuni_longtrail/). Their destination pages were not inspected.

## Tokens — Motion & Interaction

### Stylesheet Evidence

| Element | Recorded declaration | What it establishes |
| --- | --- | --- |
| Body background | `background 0.5s cubic-bezier(0.4, 0.4, 0, 1)` | A half-second background transition is defined; trigger and alternate colors are unknown |
| Story-row anchors | `0.4s cubic-bezier(0.4, 0.4, 0, 1)` plus generated-property transitions | A transition duration and easing are defined; hover endpoint is not supplied |
| Desktop movie arrows | `0.4s cubic-bezier(0.4, 0.4, 0, 1)` | Control transitions are defined; the changed properties were not exercised |
| Area-map anchors | `1s cubic-bezier(0.4, 0.4, 0, 1)` plus generated-property transitions | A longer transition is defined; its visible effect is unverified |
| Many other sampled elements | Easing without a displayed nonzero duration | Insufficient evidence for a visible transition |
| Sampled animation fields | `none` | No named CSS animation on those sampled elements at capture time |

The screenshots show stable illustrations and persistent utility positions. They do not demonstrate a moving mountain scene, drifting clouds, scroll-linked parallax, or a loading reveal.

The DOM contains another pair of centrally positioned vertical slogan elements at `28px` desktop and `24px` mobile. They are not visibly present in the settled opening screenshots. Their bounds alone do not establish a splash screen or entrance animation.

The inspection process waited for loading, image decoding and layout stability, with bounded time limits. Perpetual animation was temporarily paused during readiness checks and resumed afterward. These precautions do not prove that every delayed state or interaction was captured.

**Recommended motion approach:** use the observed easing for restrained color or opacity feedback, keep navigation immediately usable, and add motion only when it supports the content. Any new hover endpoint, reveal animation, or reduced-motion behavior should be documented as an addition.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Warm beige with fine paper-like texture | Continuity between chapters |
| Scenic opening | Blue mountain washes and detailed green/gray foreground | Establish destination and scale |
| Story sheet | Pale cream interior, gold patterned frame | Contain the dense directory |
| Story rows | Flat surface with fine rules and local color accents | Organize many destinations without heavy boxes |
| Decorative transition | Cream clouds with blue-green edges | Blend framed content into surrounding paper |
| Desktop footer panel | Opaque beige field | Make three practical information groups readable |
| Outbound cards | Light cream desktop; lightly translucent mobile | Separate links from detailed scenery |
| Mobile language switch | Small white rectangle | Keep language navigation visible over changing imagery |

The supplied captures show no general elevation-shadow system. Depth comes from painted landscape layers, overlapping clouds, and the contrast between detailed scenery and quiet text surfaces. Translucency in the mobile footer is not evidence of backdrop blur.

## Imagery

The main landscapes combine watercolor-like washes with more detailed painted linework. Mountain ridges soften and lighten with distance. Rocks, leaves, timber and roof tiles become more specific in the foreground. Fine grain unifies sky, paper and scenery.

Human figures are deliberately small. They make the landscape feel inhabitable without turning the page into a portrait-led travel advertisement. The opening walker and closing resident also connect physical exploration with ordinary village life.

The directory uses actual photographic fragments at a much smaller scale. These narrow rounded crops function like visual punctuation inside a headline. Their rhythm is more important than a uniform thumbnail aspect ratio.

### Observed Asset References

| Asset or treatment | Evidence location | Implementation implication |
| --- | --- | --- |
| Mountain panorama with walker | Desktop and mobile opening captures | Provide independent crop control for each layout |
| Japanese/English trail wordmark | Opening captures and empty-text H1 wrapper | Use an authorized lockup with an accessible text equivalent |
| Paper grain | Opening sky and middle-section canvas | Keep texture subtle and avoid repeated visible seams |
| Gold border with repeated motifs | Desktop story-directory capture | Use a repeatable border texture or matching artwork |
| Overlapping clouds | Lower edge of desktop story frame | Use separate decorative assets, hidden from assistive technology |
| Inline destination photographs | Desktop story rows | Use small wide crops interleaved with the phrase |
| Village and rice-field illustration | Desktop and mobile footer captures | Preserve house/person landmarks when cropping |
| Trail logo and Instagram icon | Footer cards | Retain recognizable brand colors at small scale |
| Illustrated-map download resources | Rendered links | Four language-specific documents; their contents were not inspected |

Complete URLs for the landscape, wordmark, cloud and thumbnail assets are not present in the supplied evidence. Background-image URLs appear only in truncated CSS excerpts, so no guessed asset paths are provided here.

Use natural image interpolation for the painted landscapes. Pixelated rendering would change the supplied visual character. CSS can reproduce the frame, spacing and typography, but the scenic identity depends on suitable artwork.

## Layout & Responsive Behavior

### Desktop Composition

The page spans the browser width and alternates broad scenic fields with narrower reading and directory regions. The opening uses substantial sky around the title, while the story list concentrates information into an approximately `984px`-wide column inside its decorative frame.

The corner slogan and language links begin around `60px` from the viewport edges. The menu sits lower than the language control. The page has no conventional full-width navigation bar in the supplied captures.

### Mobile Composition

| Feature | Observed change at `390 × 844` |
| --- | --- |
| Opening | Tall crop brings the walker and foreground rocks into the first screen |
| Title | H1 begins at `216px`; its available inner width is `310px` after padding |
| Corner slogan | Moves to `16px` left and `24px` top; type reduces to `12px` |
| Index control | Moves to the top-right at `24px` from the top |
| Language switch | Relocates to a small bottom-right white surface |
| Hero introduction | White vertical copy appears over the dark foreground |
| Japanese prose | Uses `350px` width, `16px` type and regular weight |
| English introduction | Absent from the supplied mobile rendered text |
| Movie collection | Retains `269px` item width while reducing gaps to `36px` |
| Map/story subheadings | Change from vertical `32px` text to horizontal `20px` text |
| Story entries | Stack narrative, tags and area identity; retain `13px` hashtags |
| Footer | Outbound cards stack above contact details; the common beige backing is no longer visible |

The page does not simply scale down. Writing direction, positioning, content grouping, text color and footer order change independently.

### Breakpoints and Measurement Limits

A source excerpt confirms a `max-width:1260px` media query for line-break visibility. It does not establish the breakpoint responsible for every mobile change. The complete breakpoint system was not supplied.

The recorded introduction and movie-section rectangles overlap on desktop. These coordinates may include decorative or positioned layers and should not be converted directly into normal-flow section margins.

**Recommended implementation:** use content-driven breakpoints, with approximately `768px` as an initial adaptation point for the supplied CSS. This is a new implementation choice. Validate intermediate widths, long place names, font fallback, zoom, and landscape phones separately.

## Do’s and Don’ts

### Do

- Preserve the measured paper `#ECE3D1`, forest ink `#204637`, and warm charcoal `#37322E` as the interface foundation.
- Give the mountain and village scenes enough space to establish scale and atmosphere.
- Keep the trail wordmark as a carefully proportioned graphic lockup.
- Combine vertical Japanese display compositions with generous horizontal prose.
- Keep photographic fragments embedded in the story phrases.
- Let hashtags remain plain, compact metadata beneath the narrative.
- Use local story accents for headlines and matching dividers while keeping supporting text dark.
- Recompose the opening artwork for mobile so the walker remains visible.
- Move the area identity below the story content on narrow screens.
- Preserve the desktop/mobile difference in footer grouping and text contrast.
- Keep both the geographic map and the text directory available.

### Don’t

- Don't replace the illustrated opening with a generic photograph and oversized conversion button.
- Don't flatten the whole site into a card grid; it includes prose, media, geographic discovery and practical travel information.
- Don't infer the wordmark's typography from the generic H1 wrapper.
- Don't turn story hashtags into filters unless filtering is implemented as a new feature.
- Don't describe the map/story headings as tabs without evidence.
- Don't assign a zoom action to the unlabeled map-region button.
- Don't add large rounded containers, glossy gradients or elevation shadows throughout the page.
- Don't stretch the artwork or apply pixelated image rendering.
- Don't shrink `13px` hashtags proportionally with the desktop canvas.
- Don't claim parallax, autoplay, drifting clouds or menu transitions from static captures.
- Don't invent illustration filenames or production roles.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original-site features:

- Keep the slender index artwork but provide an interactive width of at least `44px`. Increase the mobile language links' touch height beyond the observed `23px`.
- Give the index button a clear accessible name and an expanded state. If it opens a modal panel, implement focus management and Escape behavior.
- Provide an accessible page heading for the graphic wordmark and text equivalents for any image-based story phrases.
- Label map hotspots with destination names. Keep the story list usable independently of the map.
- Treat decorative clouds, textures and redundant inline photographs as decorative images.
- Add visible focus indicators that remain distinguishable over cream surfaces and detailed scenery.
- Provide reduced-motion behavior for any added effects, and keep content visible without reveal scripts.
- Check contrast for muted story accents and white text against the exact image crop. A discreet backing surface can help where scenery becomes too variable.
- Use appropriately sized mobile artwork and explicit image dimensions. Prioritize the opening scene; defer lower-page images and media until needed.
- Keep itinerary stops and transport information readable as semantic text. Include document language and file type in map-link labels.

## Agent Prompt Guide

### Quick Color Reference

- Measured canvas: `#ECE3D1`.
- Measured brand/navigation ink: `#204637`.
- Measured Japanese reading text: `#37322E`.
- Estimated inner sheet: `#FFFBEE`.
- Estimated decorative frame: `#CBB660`.
- Estimated representative mountain blue: `#7AAAC5`.
- Story colors are muted regional accents; they do not replace the dark neutral metadata.
- White is used for selected text over scenery and media captions.

### Overall Prompt

“Create an editorial tourism homepage for a Japanese long-distance walking trail. Use warm textured paper `#ECE3D1`, forest-green identity `#204637`, warm charcoal reading text `#37322E`, and large painted landscapes. Open with layered blue mountains, a small walker on a rocky ridge, and a custom Japanese/English title lockup. Place a small two-line slogan at the upper-left, a slender vertical index control at the right, and language links in the upper-right. Organize the long page into introduction, films, geographic discovery, eleven area stories, an example itinerary, map resources and access information. Build story links as large colored phrases punctuated by tiny rounded photos, with plain hashtags below and a compact place-name block. End with a painted village and rice-field scene containing official-resource cards and contact details. On mobile, recompose the artwork, move language links to the bottom-right, stack story metadata and place resource cards above the contact block. Treat unobserved player and menu states as new implementation work.”

### Example Component Prompts

1. **Opening scene:** “Compose a cream-paper sky above layered blue mountain ridges and detailed green-gray rocks. Keep a small walker visible. Overlay a dark green bilingual title artwork near the upper-middle and a separate small slogan at the upper-left. Introduce a vertical Japanese paragraph lower in the scene. Produce a mobile composition with less sky and more foreground.”
2. **Story row:** “Create one flat destination link approximately 984px wide. Place a muted-color narrative phrase with several small rounded photographic fragments on the left, plain 13px hashtags below, and a pronunciation/name block on the right behind a matching vertical divider. Separate entries with a fine neutral rule. On mobile, use a 358px content width and move the name block below the tags.”
3. **Chapter transition:** “Frame a pale cream directory with a gold border containing tiny repeated mountain motifs. Overlap the lower border with irregular cream clouds shaded blue-green underneath. Leave generous warm-paper space before the next compact Japanese chapter title. Keep the decoration static unless motion is separately specified.”
4. **Footer:** “Place two light outbound-link cards over a detailed illustration of a red-roofed rural house and rice fields. Each card has a recognizable logo, dark green title, small external-link symbol, divider and compact supporting line. On desktop, group them with contact information in one beige three-column panel. On mobile, stack the cards and place white contact text directly below over the landscape.”
5. **Responsive refinement:** “Review at 1440×1000 and 390×844. Preserve the walker and wordmark, use 16px mobile story gutters, retain 13px hashtags, convert vertical subsection headings to horizontal text, and prevent fixed language controls from covering reachable content. Do not infer unsupported intermediate breakpoints from the two endpoints.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted source CSS. Exact measured colors and typography are retained where available; illustration colors, radii, hover treatment and the `768px` breakpoint are recommendations or estimates. The enlarged utility hit areas intentionally differ from the original measurements.

Supply project assets through `--paper-texture`, `--hero-art`, `--hero-art-mobile`, `--frame-texture`, and `--footer-art`, using authorized `url(...)` values. Without those assets, the CSS provides only the layout and flat surfaces. Font stacks name observed families but do not load font files.

Suggested structure: a `.trail-page` containing the utility controls, `.trail-hero`, chapter sections and `.trail-footer`. A `.story-row` is one anchor containing `.story-main` and `.story-area`; the main group contains `.story-headline` and `.story-tags`. The footer panel contains the contact group and two resource cards.

```css
:root {
  /* Measured interface colors */
  --color-paper: #ece3d1;
  --color-ink: #204637;
  --color-text: #37322e;
  --color-black: #000;
  --color-muted: #979797;
  --color-white: #fff;

  /* Visual estimates for reusable surfaces */
  --color-sheet: #fffbee;
  --color-rule: #a59b8c;
  --color-frame: #cbb660;
  --color-mountain: #7aaac5;

  /* Observed families with recommended generic fallbacks */
  --font-display: '秀英初号明朝', serif;
  --font-jp: 'Shippori Antique', sans-serif;
  --font-en-display: 'Fraunces', serif;
  --font-en-body: 'Cabin', sans-serif;

  --text-body: 18px;
  --text-tags: 13px;
  --text-area: 20px;
  --text-reading: 10px;
  --leading-body: 2.22;
  --tracking-body: 0.13em;
  --tracking-small: 0.03em;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-28: 28px;
  --space-40: 40px;
  --space-60: 60px;

  --story-width: 984.5px;
  --footer-width: 1168px;
  --movie-width: 269px;
  --movie-gap: 60px;
  --radius-card: 4px;
  --radius-photo: 8px;
  --ease-site: cubic-bezier(0.4, 0.4, 0, 1);
  --duration-control: 400ms;
}

* { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

.trail-page {
  color: var(--color-text);
  background-color: var(--color-paper);
  background-image: var(--paper-texture, none);
  font-family: var(--font-jp);
  transition: background-color 500ms var(--ease-site);
}

.site-slogan {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 60px;
  display: grid;
  gap: 8px;
  color: var(--color-ink);
  font: 600 18px / 1.17 var(--font-display);
  letter-spacing: 0.12em;
}

.site-slogan p { margin: 0; }

/* Wider target; narrow artwork remains centered. */
.index-toggle {
  position: fixed;
  z-index: 20;
  top: 135px;
  right: 79px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 44px;
  padding: 0;
  border: 0;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
}

.index-toggle__mark {
  display: flex;
  justify-content: space-between;
  width: 18px;
  height: 32px;
}

.index-toggle__mark span {
  width: 1.5px;
  height: 100%;
  background: currentColor;
}

.index-toggle__label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font: 400 16px / 1.01 var(--font-jp);
}

.language-switch {
  position: fixed;
  z-index: 20;
  top: 60px;
  right: 60px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--color-muted);
  font: 400 16px / 1.01 var(--font-en-display);
}

.language-switch a {
  color: inherit;
  text-decoration: none;
}

.language-switch a[aria-current='page'] {
  color: var(--color-ink);
}

/* Starting geometry for the supplied desktop viewport. */
.trail-hero {
  position: relative;
  isolation: isolate;
  min-height: 1979px;
  padding-top: 206px;
}

.trail-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--hero-art, none);
  background-size: cover;
  background-position: var(--hero-position, center top);
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero-wordmark {
  width: min(600px, calc(100% - 80px));
  margin: 0 auto;
}

.hero-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tune placement to the supplied artwork's clear areas. */
.hero-intro {
  width: max-content;
  max-width: calc(100% - 32px);
  height: 260px;
  margin: 96px 0 0 15%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 20px;
  line-height: 2.15;
  letter-spacing: 0.08em;
}

.intro-copy {
  width: min(480px, calc(100% - 40px));
  margin-inline: auto;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.intro-copy p { margin: 0; }
.intro-copy p + p { margin-top: 28px; }

.section-heading { text-align: center; }

.section-heading__mark {
  display: block;
  width: 100px;
  height: auto;
  margin-inline: auto;
}

.section-heading__en {
  margin: 19px 0 0;
  color: var(--color-black);
  font: 400 19px / 1.27 var(--font-en-display);
}

.section-heading__description {
  margin: 33px 0 0;
  color: var(--color-black);
  font: 600 20px / 1.8 var(--font-jp);
  letter-spacing: 0.03em;
}

.story-frame {
  position: relative;
  max-width: 1340px;
  margin-inline: auto;
  padding: 40px;
  background-color: var(--color-frame);
  background-image: var(--frame-texture, none);
}

.story-paper {
  padding: 80px 24px 120px;
  background: var(--color-sheet);
}

.story-list {
  width: min(var(--story-width), 100%);
  margin-inline: auto;
  border-top: 1px solid var(--color-rule);
}

.story-row {
  --area-accent: #4b6b90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  align-items: center;
  gap: 24px;
  min-height: 86px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration-control) var(--ease-site);
}

.story-main { min-width: 0; }

/* Live-text adaptation of the decorative phrase. */
.story-headline {
  margin: 0 0 8px;
  color: var(--area-accent);
  font: 700 clamp(22px, 2.1vw, 30px) / 1.45 var(--font-display);
}

.story-headline img {
  display: inline-block;
  width: var(--photo-width, 70px);
  height: 26px;
  margin-inline: 0.12em;
  border-radius: var(--radius-photo);
  object-fit: cover;
  vertical-align: baseline;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font: 400 13px / 1.23 var(--font-jp);
  letter-spacing: 0.03em;
}

.story-tags span { white-space: nowrap; }

.story-area {
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid var(--area-accent);
}

.area-reading {
  display: block;
  margin-bottom: 4px;
  font: 400 10px / 1.5 var(--font-jp);
  letter-spacing: 0.03em;
}

.area-name {
  font: 700 20px / 1.65 var(--font-display);
}

.area-suffix {
  display: inline-block;
  writing-mode: vertical-rl;
  font: 400 8px / 1.87 var(--font-jp);
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* Optional progressive-enhancement rail, not source behavior. */
.movie-rail {
  display: flex;
  gap: var(--movie-gap);
  overflow-x: auto;
  padding: 16px max(20px, calc((100% - var(--movie-width)) / 2));
  scroll-snap-type: x proximity;
}

.movie-item {
  flex: 0 0 var(--movie-width);
  scroll-snap-align: center;
}

.movie-caption {
  color: var(--color-white);
  font: 400 16px / 1.88 var(--font-jp);
  letter-spacing: 0.03em;
}

/* Scenic height is an adaptation, not a measured footer height. */
.trail-footer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100svh;
  padding: 320px 16px 80px;
  background-image: var(--footer-art, none);
  background-size: cover;
  background-position: var(--footer-position, center);
}

.footer-panel {
  display: grid;
  grid-template-areas: 'contact official social';
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
  width: min(var(--footer-width), 100%);
  padding: 40px;
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.footer-contact { grid-area: contact; }
.resource-card--official { grid-area: official; }
.resource-card--social { grid-area: social; }

.footer-contact h2 {
  margin: 0 0 16px;
  font: 500 24px / 1.3 var(--font-jp);
}

.footer-contact p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
}

.footer-contact a {
  color: inherit;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 144px;
  padding: 20px;
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background: var(--color-sheet);
  text-decoration: none;
}

.resource-card__top {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-right: 12px;
}

.resource-card__title {
  margin: 0;
  font: 700 15px / 1.5 var(--font-jp);
}

.resource-card__note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-rule);
  font: 600 12px / 1.6 var(--font-jp);
}

.resource-card__external {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
}

/* Recommended feedback; original hover endpoints are unknown. */
@media (hover: hover) {
  .story-row:hover { background-color: rgb(32 70 55 / 4%); }
  .resource-card:hover .resource-card__title {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.trail-page :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 767px) {
  :root {
    --text-body: 16px;
    --text-area: 18px;
    --text-reading: 8px;
    --movie-gap: 36px;
  }

  .site-slogan {
    top: 24px;
    left: 16px;
    gap: 3px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.06em;
  }

  .index-toggle { top: 24px; right: 9px; }
  .index-toggle__mark { width: 14px; height: 22px; }
  .index-toggle__label { font-size: 14px; }

  .language-switch {
    top: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    padding: 2px;
    border-radius: 2px;
    background: var(--color-white);
    font-size: 12px;
  }

  .language-switch a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 61px;
    min-height: 44px;
  }

  .language-switch a + a {
    border-left: 1px solid var(--color-paper);
  }

  .language-switch__separator { display: none; }

  .language-switch a[aria-current='page']::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
  }

  .trail-hero { min-height: 1096px; padding-top: 216px; }

  .trail-hero::before {
    background-image: var(--hero-art-mobile, var(--hero-art, none));
    background-position: var(--hero-mobile-position, center top);
  }

  .hero-intro {
    height: 300px;
    margin: 318px auto 0;
    color: var(--color-white);
    font-size: 18px;
    line-height: 1.9;
  }

  .intro-copy { font-weight: 400; }
  .section-heading__mark { width: 80px; }
  .section-heading__en { margin-top: 13px; font-size: 16px; line-height: 1.5; }
  .section-heading__description { font-size: 16px; line-height: 1.6; }

  /* Simplified mobile frame is a recommendation. */
  .story-frame { padding: 0; background: transparent; }
  .story-paper { padding: 64px 16px 100px; }

  .story-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 23px;
    padding: 15px 0 16px;
  }

  .story-headline { font-size: 24px; line-height: 1.75; }
  .story-area { padding-left: 19px; }
  .area-reading { font-size: 8px; line-height: 1.2; }
  .area-name { font-size: 18px; line-height: 1.22; }

  .area-suffix {
    margin-left: 4px;
    writing-mode: horizontal-tb;
    font-size: 11px;
    line-height: 1.18;
  }

  .movie-caption { line-height: 1.63; }

  .trail-footer {
    padding: 400px 16px 88px;
    background-position: var(--footer-mobile-position, center);
  }

  .footer-panel {
    grid-template-areas: 'official' 'social' 'contact';
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    background: transparent;
  }

  .resource-card {
    min-height: 112px;
    padding: 16px 14px;
    background: rgb(255 253 244 / 92%);
  }

  .resource-card__title { font-size: 16px; }
  .footer-contact { margin-top: 32px; color: var(--color-white); }
}

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

The hero text positioning assumes artwork with comparable clear areas and a similarly proportioned wordmark. Adjust those placements after supplying real assets. The CSS does not implement a menu, media player, map overlay or download interaction, and it was not browser-tested as part of this evidence-only reference.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: #ece3d1;
  --color-ink: #204637;
  --color-text: #37322e;
  --color-sheet: #fffbee;
  --color-frame: #cbb660;
  --color-rule: #a59b8c;

  --font-display: '秀英初号明朝', serif;
  --font-jp: 'Shippori Antique', sans-serif;
  --font-en-display: 'Fraunces', serif;
  --font-en-body: 'Cabin', sans-serif;

  --text-body: var(--text-body);
  --text-caption: 13px;
  --spacing-page-inset: 16px;
  --spacing-movie: 269px;
  --radius-card: 4px;
  --radius-photo: 8px;
}
```

## Sources & Evidence

- [Current Japanese homepage](https://hlt.pref.ibaraki.jp/): the supplied inspection records the same original and final URL with HTTP `200`.
- **Capture timestamp:** `2026-09-16T19:31:33.278Z`, equivalent to September 17, 2026, 04:31:33 JST.
- **Desktop evidence:** `1440 × 1000` opening, story-directory transition and footer captures; rendered document height approximately `15,934px`.
- **Mobile evidence:** `390 × 844` opening and footer captures; rendered document height approximately `15,572px`.
- **Rendered DOM/computed styles:** font families, sizes, weights, line heights, tracking, element rectangles, selected padding, custom properties, transition declarations, and homepage links. These support the measured tables and responsive comparisons.
- **Interaction evidence:** settled page states and scrolling captures only. Menu opening, movie playback, arrow activation, map-control activation, link destinations, hover states and keyboard behavior were not exercised in the supplied record.
- **Inspection limits:** readiness checks used bounded waits for load, finite animation, layout/text stability and visible image decoding. Perpetual animations were paused during checks and resumed afterward. SharedWorkers and service workers were disabled. Delayed content and unexercised states remain unverified.
- **Visual limits:** no screenshots of the movie region, map region, mobile story directory, complete itinerary, map-download section or access section were supplied. Their descriptions are limited to the corresponding DOM evidence.

This reference describes the current homepage evidenced by those captures. No additional browsing, linked-resource retrieval, command execution or local-file inspection was performed.