# Hyogo Field Pavilion / Travelogue — Style Reference

> A leisurely travel diary assembled from portrait imagery, handwritten notes, and soft fields of color.

**Website:** [Hyogo Field Pavilion — Travelogue](https://expo2025-hyogo-fieldpavilion.jp/travelogue/)
**Original URL:** https://expo2025-hyogo-fieldpavilion.jp/travelogue/
**Final URL:** https://expo2025-hyogo-fieldpavilion.jp/travelogue/
**Theme:** light, with blue, cream, and green story sections and a charcoal footer.
**Inspected:** supplied browser inspection retrieved September 23, 2026, at 02:47:23.236 JST / September 22, 2026, at 17:47:23.236 UTC.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current long-form travelogue: opening composition, repeated topic navigation, introduction, three story links, FIND/EAT/SPEND chapters, contributor links, related editorial feature, nine-program index, scenic closing statement, and government footer. Visual captures cover the desktop opening, part of the food chapter, and closing/footer, plus the mobile opening and closing/footer. Rendered DOM evidence extends across the document. Program-detail blocks are present in the DOM, but their interactive presentation was not verified.

This page introduces Hyogo through personal accounts of making, eating, exploring, and spending time with local people. Its structure is an editorial journey: three substantial narratives lead into additional experiences and an invitation to the wider Field Pavilion website. The reading experience, contributor presence, and sense of place are central to the design.

A narrow portrait image anchors the desktop opening while handwritten Japanese lettering crosses its left edge. A slender strip of portraits, objects, and vertical labels provides topic navigation. Below, pastel chapter backgrounds support a collage of rectangular photographs, isolated people, food objects, and speech bubbles. Widely spaced Mincho headings give the stories a reflective tone; restrained sans-serif prose keeps them readable. Rounded buttons appear mainly at contributor and destination links.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed styles. Measurements describe the recorded viewport, not an inferred universal CSS rule.
- **Visual estimate** means a dimension or treatment is apparent in the current-page screenshots but lacks a corresponding computed value.
- **Derived** means arithmetic based on recorded dimensions, such as a media aspect ratio or column gap.
- **Recommended** means implementation guidance for a new version. Breakpoints, accessibility improvements, fallback behavior, and starter CSS are recommendations unless explicitly identified otherwise.
- Token names are descriptive implementation aliases. The only exported source custom properties concern Swiper; no semantic source palette variables were supplied.
- Screenshots and DOM samples can reflect different moments during the inspection. Some desktop image wrappers have unusually short sampled heights despite imagery appearing in later captures. Those wrapper heights are not reliable intrinsic image dimensions.
- No additional browsing, commands, file inspection, or interaction testing was performed for this reference.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Observed role |
| --- | --- | --- | --- |
| Light canvas | `#f5f5f5` | `--canvas` | Body background, desktop opening margins, and exposed space between content regions |
| White | `#ffffff` | `--paper` | Introduction, program section, destination-link surface, and footer text |
| Main ink | `#333333` | `--ink` | Body text, headings, navigation, and button text |
| FIND blue | `#dfeef5` | `--find` | Full-width background of the first travel chapter |
| EAT cream | `#fdefcd` | `--eat` | Full-width background of the food chapter |
| SPEND green | `#d4ebd0` | `--spend` | Full-width background of the island chapter |
| Link blue | `#deeef5` | `--button-fill` | Contributor buttons, related-article button, and oversized program lettering |
| Footer charcoal | `#3e3e3e` | `--footer` | Full-width footer background |

All values above are measured. FIND blue and Link blue differ by one red-channel value; retain the distinction when reproducing the sampled palette precisely.

The photographs supply saturated sea blues, foliage greens, warm wood, and food colors. These are image content, not additional interface accent tokens. The multicolored Field Pavilion logo also remains an identity asset rather than a palette for general controls.

The handwriting looks close to black in the opening capture. Its artwork color was not extracted, so do not treat `#000000` as a measured interface token. Thin dark borders around buttons and the destination banner are visible; their exact computed color was not included.

### Chapter Color Assignment

| Chapter | Source navigation label | Anchor | Background |
| --- | --- | --- | --- |
| FIND | `五感で見つける` | `#life` | `#dfeef5` |
| EAT | `こだわりの食を味わう` | `#food` | `#fdefcd` |
| SPEND | `暮らすように過ごす` | `#story` | `#d4ebd0` |

These colors identify long reading environments. They do not represent selectable themes, hover states, or changing application modes.

The exported `--swiper-theme-color: #007aff` and `--swiper-navigation-size: 44px` are dependency-level values. There is insufficient visual evidence to adopt that blue as a page accent or to describe a visible 44px navigation control.

## Tokens — Typography

### Japanese Sans Serif — Narrative and Utility Text

**Measured desktop stack:** `YuGothic, 'Yu Gothic', Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif`.

**Measured mobile family:** `'Noto Sans JP'`.

Desktop body text generally uses weight `500`; the mobile body changes to `400`. Narrative introductions, program titles, contributor names, and buttons use stronger weights. This is a real family and weight change between the supplied viewports, not simply a smaller rendering of the desktop page.

### Japanese Mincho — Reflective Headings and Closing Copy

**Measured desktop stack:** `YakuHanMP, 游明朝, 'Yu Mincho', 游明朝体, YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', HiraMinProN-W3, HGS明朝E, 'ＭＳ Ｐ明朝', 'MS PMincho', serif, sans-serif`.

**Measured mobile stack:** `YakuHanMP, 'Noto Serif JP'`.

These declarations establish the intended font stacks; they do not prove which individual fallback rendered every glyph. Keep YakuHanMP separate from the primary text family in implementation planning.

Mincho appears in the introduction, chapter headlines, place labels, topic descriptions, and closing statement. Desktop headings have generous tracking and approximately double line spacing. Mobile headlines reduce tracking considerably to preserve usable line lengths.

### Outfit — English Identity and Supporting Labels

**Measured family:** `Outfit`.

It appears in the opening identity, English introduction, vertical chapter labels, decorative `PROGRAM LIST` lettering, and copyright. Recorded weight is generally `500` on desktop and `400` on mobile. Some visual emphasis within the opening identity is heavier.

### Handwritten Title Artwork

The opening phrase `兵庫の日常へ旅しよう。` is visibly drawn lettering. The sampled H1 has no extracted text and a large artwork-sized rectangle. Its inherited 14px desktop font size does not describe the visible lettering.

Preserve this title as artwork when authorized assets are available. No handwriting font name, vector format, or image URL was supplied. A generic script font would not reproduce the strokes, irregular spacing, or long diagonal marks.

### Type Scale

Sizes and line heights below are measured CSS pixels. Tracking expressed in `em` is derived from the recorded pixel values.

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking |
| --- | --- | --- | --- |
| General body | `14 / 22.4` | `14.56 / 23.296` | `500 → 400`; approximately `0.008em` |
| Opening English identity | `18 / 28.8` | `9.36 / 14.976` | Outfit, `500 → 400` |
| Opening English description | `12 / 19.2` | `6.24 / 9.984` | Outfit, `500 → 400` |
| Introduction heading | `28 / 56` | `24.96 / 49.92` | Mincho, `400`, `0.25em` |
| Introduction paragraph | `18 / 45` | `16.64 / 41.6` | Mincho, `400`, `0.2em` |
| Topic-index label | `16 / 25.6` | `14.56 / 23.296` | Mincho, `400`; `0.3em → 0.18em` |
| Desktop topic description | `18 / 36` | Not present in mobile visible-text extraction | Mincho, `400`, `0.25em` |
| Chapter headline | `30 / 60` | `18.72 / 43.056` | Mincho, `400`; `0.25em → 0.1em` |
| Chapter place label | `14 / 22.4` | `13.52 / 21.632` | Mincho, `400` |
| English chapter side label | `14 / 22.4` | `10.4 / 16.64` | Outfit; `0.09em` |
| Narrative lead | `16 / 35.2` | `14.56 / 29.12` | Sans serif, `700`, `0.15em` |
| Narrative body | `14 / 30.8` | `14.56 / 29.12` | Sans serif, `500 → 400`, `0.15em` |
| Contributor and article buttons | `16 / 25.6` | `16.64 / 26.624` | Sans serif, `700` |
| Related-article heading | `20 / 36` | `18.72 / 33.696` | Sans serif, `700` |
| Decorative program lettering | `154 / 107.8` | `72.8 / 50.96` | Outfit, `500 → 400` |
| Program section heading | `24 / 38.4` | `18.72 / 29.952` | Sans serif, `700` |
| Program title | `16 / 25.6` | `14.56 / 23.296` | Sans serif, `700` |
| Closing statement | `18 / 43.2` | `14.56 / 34.944` | Mincho, `400`; `0.15em → 0.03em` |
| Footer identity | `30 / 48` | `24.96 / 39.936` | Sans serif, `700` |
| Footer links | `13 / 13` | `13.52 / 13.52` | Sans serif, `700` |
| Copyright | `12 / 19.2` | `12.48 / 19.968` | Outfit, `500 → 400` |

The food-chapter subheading visible in the screenshot is approximately 20–22px, bold, and split across two lines. This is a visual estimate; the corresponding computed heading entry was not included.

The extremely small mobile English hero text is an observed fidelity detail, not a recommended minimum. For a new implementation, increase essential explanatory text to a readable size and adjust its placement accordingly.

## Tokens — Spacing & Shapes

**Density:** spacious editorial sections around a narrow reading column, with small navigation and attribution details.

**Source root sizes:** `10px` on desktop and `10.4px` on mobile. Several mobile dimensions are consistent with a 1.04 multiplier, but the underlying root formula and breakpoint were not supplied. Many roles also change their base size or layout. Do not infer that every desktop dimension scales by 1.04.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main horizontal gutter | `80px` | approximately `20.8px` | Measured content rectangles |
| Narrow supporting-image inset | Varies by collage | approximately `41.6px` | Measured mobile image wrappers |
| Chapter top padding | `150px` | `83.2px` | Computed section padding |
| Chapter bottom padding | `120px` | `83.2px` | Computed section padding |
| Contributor button padding | `15px` | `10.4px` | Computed |
| Gap between two contributor buttons | approximately `15px` | approximately `10.4px` | Derived from rectangles |
| Program-section padding | `180px 0 160px` | `104px 0 72.8px` | Computed |
| Program-title padding | `20px 18px 0` | `15.6px 15.6px 0` | Computed |
| Closing-section padding | `160px 0 195px` | `72.8px 0 145.6px` | Computed |
| Destination-link padding | `20px` | `20.8px` | Computed |
| Footer padding | `80px 0 30px` | `31.2px 0` | Computed |

### Border Radius and Edge Treatment

| Element | Value or treatment | Evidence |
| --- | --- | --- |
| Contributor and article buttons | `100px` desktop; `104px` mobile | Measured; visually pill-shaped |
| Destination banner | `10px` desktop; `10.4px` mobile | Measured |
| Contributor portraits | Circular | Visible in the desktop food capture |
| Main and supporting photographs | Square corners | Visible in supplied captures |
| Speech bubbles | White outlined bubble with a small tail | Visible; exact radius not recorded |
| Button and destination-banner border | Approximately `2px`, dark | Visual estimate; button box arithmetic is also consistent with 2px per edge |
| Topic-ribbon separator | Approximately `1px` | Visual estimate |

Rounded geometry is concentrated in controls, portraits, and speech bubbles. The large photographs and section boundaries remain straight. There is no visible general-purpose shadow elevation system in the supplied captures.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Entire document | `12658.98px` high | `17092.69px` high |
| Opening section | `1440 × 1000px` | `390 × 844px` |
| Opening portrait media | Approximately `563 × 1000px`, centered | Approximately `390 × 693px`, full width |
| Opening H1 wrapper | `375 × 265px`, at approximately `(160, 333.3)` | `249.59 × 162.22px`, at approximately `(31.19, 151.91)` |
| Standard inner container | `1280px`, starting at `x = 80` | `348.41px`, starting at `x = 20.80` |
| Main chapter image wrapper | `600 × 800px`, starting at `x = 470` | `369.20 × 492.27px`, starting at `x = 20.80` |
| Narrative text column | `440px`, starting at `x = 470` | `348.41px`, starting at `x = 20.80` |
| Contributor button | `210 × 59.59px` | `176.81 × 51.41px` |
| Program summary width | Approximately `373.33px` | Approximately `348.41px` |
| Closing destination link | `600 × 132px` | `348.41 × 116.94px` |
| Footer height | `385.19px` | `282.59px` |

Opening media dimensions are screenshot estimates. Their approximately 9:16 ratio is derived, not a recovered source CSS rule. Main chapter wrappers have a measured 3:4 ratio at both viewports.

## Components

### Opening Composition

**Role:** establish a personal, observational approach to travel.

The desktop opening fills one viewport. Portrait media sits in the horizontal center, leaving very broad light-gray margins. In the supplied desktop frame, warm wooden food trays fill the portrait strip. The handwritten title begins in the left margin and crosses into the image. The English identity and two-line description sit beneath and within the lower part of this title grouping.

The title wrapper starts at `x = 160px`; the English identity starts at `x = 217px`. The 57px offset is also the recorded left padding on the English description. This stagger is a useful compositional detail: the small text is inset from the expressive strokes rather than aligned to their farthest edge.

On mobile, the portrait media fills the width and occupies approximately 693px of the 844px opening section. The title moves over the image near the upper-left area. The current mobile scene shows a traveler on steps overlooking the sea. The horizontal topic strip follows the image, with additional light canvas below it before the next section.

No conventional top navigation bar is visible in these opening captures. Playback controls, sound settings, and the media element type were not recorded.

### Repeating Topic Ribbon

**Role:** provide compact navigation to the three narrative chapters.

Each topic combines a circular person portrait, a short Japanese label, and a small isolated object. The visible objects include a ceramic cup, food on skewers, and a cat image. Small drawn marks above some portraits add a conversational tone.

On desktop, the ribbon runs vertically near the left edge, separated from the opening by a thin vertical rule. Sampled links are 50px wide with `10px 0` padding and vertical labels. Their heights vary with label length, approximately 258–300px. The screenshot shows the sequence clipped at the viewport boundaries.

On mobile, the composition rotates into a horizontal row under the portrait media. Links use a flex layout, `0 10.4px` padding, and measured content heights of approximately 64.47px. Including surrounding space and the separator, the visible band is approximately 76px high. Labels are horizontal, and neighboring items are partially clipped.

The DOM contains four repetitions of the three links, which is consistent with a looping ribbon. Its timing, direction, and input behavior are unverified. The confirmed destinations are `#life`, `#food`, and `#story`. Do not describe the ribbon as fixed throughout the document; persistence beyond the opening was not demonstrated.

### Introductory Statement

**Role:** introduce the travelogue before the individual destinations.

A white section carries a two-line Mincho heading and a short, generously spaced paragraph. At desktop, the sampled text begins at `x = 270px`, with a width of approximately 338.5px. The heading uses `28px / 56px` with 7px tracking; the paragraph uses `18px / 45px` with 3.6px tracking.

At mobile, this becomes a 348.4px-wide text region inside the standard 20.8px gutters. The section grows from 624px to approximately 783px high. The supplied current screenshots do not document its complete imagery arrangement, so preserve the measured text treatment without inventing additional illustration details.

### Three-Story Index

**Role:** offer a direct choice among the three travel themes.

The desktop section has three equal 480px tracks and no grid gap. Each sampled link is 385px wide. White heading-art wrappers overlap their surrounding composition, and Mincho topic labels and two-line descriptions provide the editorial hierarchy.

On mobile, the index becomes three full-width rows, each approximately 150.16px tall with 20.8px padding. The longer descriptions remain in link text data but are absent from the mobile visible-text extraction. Preserve the compact mobile treatment while retaining clear accessible link names.

These are chapter links, not filters: every destination is an anchor within the same long document.

### Chapter Opening

**Role:** introduce a destination, its contributor, and the experience being described.

Each chapter shares this content anatomy:

1. A Japanese theme heading.
2. A portrait-format main image region.
3. A narrow English side label such as `HYOGO FIELD PAVILION - FIND`.
4. A Mincho narrative headline and a smaller place label.
5. A contributor cutout or associated image, a short speech bubble, and a compact `-PEOPLE` label.

On desktop, the main image wrapper starts at `x = 470px` and measures 600 × 800px. The theme heading sits toward the left, and the headline starts at `x = 80px`. Headline widths vary with the chapter, approximately 461–549px. This creates intentional overlap between the text side of the composition and the image region.

The English label sits just to the right of the main media at approximately `x = 1082.6px`. On mobile it moves into a narrow strip at the left edge, while the image starts at `x = 20.8px` and extends to the right viewport edge. The resulting 369.2px image is slightly wider than the normal reading column.

The chapter palette is stable: FIND blue, EAT cream, and SPEND green. Chapter boundaries are full-width color changes, with no rounded section containers.

### Narrative Column and Supporting Collage

**Role:** combine an uninterrupted first-person account with small moments of visual discovery.

Desktop narrative text occupies a consistent 440px column beginning at `x = 470px`. The opening paragraph is bold at `16px / 35.2px`; subsequent text uses `14px / 30.8px`. Both use `0.15em` tracking. Short bold subheadings divide each account into episodes.

Supporting photographs occupy the outer areas of the page. Their alignment is intentionally irregular: some touch a viewport edge, while others sit beside a paragraph or below a speech bubble. In the food capture, a person cutout and a brand-related speech bubble sit left of the reading column. A rectangular workshop photograph and isolated food objects sit to the right.

The collage has no common card shell. Photographs, transparent cutouts, and caption artwork retain different silhouettes. Keep a dependable text column while allowing these secondary assets to vary in size and position.

On mobile, prose spans the 348.4px inner container. Side imagery moves into the vertical reading sequence. The mobile DOM places the tuk-tuk, food-brand, and cat callouts between narrative passages that they flank on desktop. Supporting image groups also appear later in the chapter. This is a substantial rearrangement, not a scaled desktop canvas.

### Speech Bubbles and Isolated Objects

**Role:** give each visit a personal voice and connect text to a specific moment.

The desktop food capture shows a white, dark-outlined speech bubble with a small pointed tail above the traveler cutout. Its text is short and bold. The corresponding sampled wrapper is approximately 192 × 82.8px. Mobile callout wrappers are approximately 145.6–156px wide and 66–67px high.

Food objects and other cutouts overlap the surrounding pastel field without a box or shadow. They should remain supplementary to the narrative. Do not turn every photograph into a sticker or assign the same rotation to all assets.

### Contributor Profile

**Role:** identify the featured traveler and link to their public channels.

The food capture shows a circular portrait approximately 180px in diameter, a tilted white handwritten note crossing its upper edge, and a right-hand stack containing a small role label, a bold name, and a social button. The profile sits directly on the chapter background.

The portrait begins around `x = 470px`; the button begins at `x = 700px`, with a measured width of 210px. The visible arrangement therefore reads as a 180px portrait, roughly 50px of separation, and a 210px information column.

The page identifies three featured creators: くつざわ, ウラリエ, and セミ. Their recorded links vary by person: X and Instagram, Instagram alone, or TikTok and Instagram. These are editorial participants. Their presence does not establish website design or development credits.

Mobile buttons remain beside the contributor area in the supplied geometry, beginning at approximately `x = 192.4px` and measuring 176.8px wide. Do not automatically assume every profile becomes a full-width button stack.

### Pill Link

**Role:** provide an unmistakable destination within an otherwise quiet editorial layout.

Use a pale blue fill, dark text, a dark outline, and fully rounded ends. The contributor buttons are approximately 60px high on desktop and 51px on mobile. The desktop food capture shows a simple right-pointing chevron at the trailing edge of the Instagram button.

The same family appears in the related-article link, with a desktop width of 240px. Program-detail links recorded elsewhere in the DOM use a white fill and wider dimensions.

Computed transitions specify `background 0.3s, color 0.3s`. The actual hovered colors were not supplied. A dark-fill inversion is a reasonable implementation option, but it is not an observed hover state.

### Related Editorial Feature

**Role:** introduce an additional Noh-related article after the three travel accounts.

The source identifies オモコロライター ヨッピー and provides a title, explanatory paragraph, and `詳しく見る` link to an external article. On desktop, the sampled text region begins at `x = 510px` and is 610px wide. The heading uses bold sans serif at `20px / 36px`.

On mobile, text uses a narrower 306.8px region with 41.6px side insets, distinguishing this module from the main story column. Its section height increases from approximately 599px to 1033px. The complete visual arrangement of this feature is not present in the supplied screenshots; use the measured text and spacing without inventing a particular image treatment.

### Program Index

**Role:** broaden discovery from personal travel accounts to nine additional experiences.

The section switches to white. Oversized pale-blue Outfit lettering repeats `PROGRAM LIST` across a clipped horizontal region. The measured type is 154px on desktop and 72.8px on mobile, with a compact `0.7` line-height ratio. A smaller dark Japanese heading provides the actual section title.

The nine program summaries form three desktop columns. Each is approximately 373.33px wide; their recorded x positions imply 80px column gaps within the 1280px container. On mobile they form one column, approximately 348.4px wide.

Each summary contains a region label and a bold title beneath its image area. Titles have 20px top and 18px horizontal padding on desktop, changing to 15.6px on mobile. Region text is white; the containing badge color was not captured in the supplied styles.

Do not infer an activated card state or a particular click transition from the summary geometry alone.

### Program Detail Blocks — DOM Evidence Only

The exported DOM contains additional program headings, vertical English labels, and `くわしく見る` links in horizontally displaced blocks, including repeated entries. Swiper custom properties are also present.

Recorded detail headings use `30px / 66px` on desktop and `15.6px / 40.56px` on mobile. White pill links measure approximately 340 × 59.6px on desktop and 249.6 × 61.8px on mobile.

This supports the existence of a separate detail presentation. It does not establish how it opens, whether it is a modal, which controls are visible, whether dragging is enabled, or how focus and closing work. Keep these states outside a claimed faithful reconstruction until separately tested. A direct-link program index is a recommended functional baseline for a new implementation.

### Scenic Closing Statement

**Role:** return from individual activities to the overall promise of experiencing everyday Hyogo.

Centered Mincho text sits against a blue-sky and green-mountain photograph. The lower landscape creates a natural boundary before the dark footer. The desktop copy uses `18px / 43.2px` with 2.7px tracking. Mobile changes to `14.56px / 34.944px` with only 0.4368px tracking and shorter lines.

A large white outlined link below the statement contains the multicolored Field Pavilion logo and an external-link symbol near the lower-right corner. Its measured dimensions are 600 × 132px on desktop and 348.4 × 116.9px on mobile. The destination is the main Field Pavilion website.

Keep the logo as identity artwork. The link is a visual signpost to the wider project, not a text-only sales CTA.

### Government Footer

**Role:** provide institutional identity, policy/contact links, and official social channels.

A charcoal field contains centered white content: `兵庫県`, two text links separated by a narrow vertical divider, X and Instagram icons, and a small Outfit copyright line. The inspected page names Hyogo Prefectural Government in the copyright notice and links to its official contact page.

Desktop padding is generous at 80px above and 30px below, producing an approximately 385px footer. On mobile, padding becomes 31.2px vertically and the footer is approximately 283px high. The copyright changes from one line to two. Both views retain centered alignment.

## Tokens — Motion & Interaction

| Treatment | Recorded value or evidence | What can be concluded |
| --- | --- | --- |
| Opening English text reveal | `transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 3.2s, opacity 0.3s 3.2s` | Delayed transform and opacity transitions are defined |
| Chapter heading and selected cutout reveals | `transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s` | Shared reveal timing is defined; starting transform is unknown |
| Primary speech bubbles | Same transitions with `0.5s` delay | A staggered sequence is defined |
| Additional callouts | Delays of `0.5s` or `0.8s` | Some supporting elements enter later |
| Closing statement | Shared reveal with `2s` delay | A delayed closing-text reveal is defined |
| Closing destination banner | Shared reveal with `2.5s` delay | Banner follows the closing text in the defined timing |
| Ordinary links | `opacity 0.3s` | An opacity transition is available; endpoint is unverified |
| Pill links | `background 0.3s, color 0.3s` | Color transitions are available; endpoints are unverified |
| Topic ribbon | Repeated links and clipped vertical/horizontal sequences | Looping is suggested; direction, speed, and pause behavior are unknown |
| Portrait opening media | Different scenes in current desktop and mobile captures | Media presentation is established; playback, looping, audio, and file type are unverified |
| Program detail presentation | Displaced repeated blocks and Swiper properties | A slide-oriented implementation is suggested; interaction behavior is unverified |

The inspection waited at least five seconds initially and traversed intermediate scroll positions. Its readiness process temporarily paused perpetual animations and awaited finite motion conservatively. Those checks help obtain readable captures but do not document complete timelines or user-triggered states.

Many sampled elements report `animation: none`; this does not prove that ancestors, pseudo-elements, scripts, or media are static. Likewise, a generic `transition: all` entry without a supplied duration is not evidence of a specific animated effect.

For an adaptation, retain the gentle stagger and long transform easing where appropriate. Keep essential content visible without JavaScript, and do not introduce an invented ticker duration as if it were recovered from the source.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | Light gray with large empty margins | Frames the portrait media and handwriting |
| Introductory surface | White | Creates a quiet transition into the stories |
| Chapter surface | Flat blue, cream, or green | Groups each long account without enclosing it in a card |
| Narrative imagery | Rectangular photos and transparent cutouts | Supplies place, activity, and personality |
| Annotation | White speech bubbles and tilted notes | Adds conversational emphasis |
| Action surface | Pale-blue outlined pill | Makes contributor and editorial links recognizable |
| Program surface | White with large pale-blue lettering | Separates the discovery index from the narratives |
| Closing surface | Scenic sky and mountain photograph | Creates a reflective conclusion |
| Destination banner | White, dark outline, small corner radius | Frames the official project logo |
| Footer | Solid charcoal with white content | Provides a clear institutional ending |

Separation comes from full-width color fields, whitespace, image edges, and outlines. Avoid adding a card shadow to every content group.

## Imagery

The current captures combine everyday travel photography with deliberately informal collage. The desktop opening shows stacked wooden trays; the mobile opening shows a traveler on coastal steps. The food chapter shows hands-on preparation in a workshop, a traveler cutout, a circular profile photograph, and isolated food objects. The closing uses a broad mountain landscape under an open sky.

Preserve natural photographic color and recognizable local details. The visual warmth comes from people participating in activities and from objects associated with those experiences. Heavy duotone processing, artificial film grain, or a universal color overlay is not evidenced.

Use different image treatments for different jobs:

- Portrait media establishes immersion in the opening.
- Measured 3:4 chapter images provide a repeatable structural anchor.
- Supporting photographs retain varied rectangular proportions.
- Transparent people and objects create the collage edges.
- Circular portraits identify contributors.
- Handwritten title and note artwork provide expressive lettering.
- The landscape creates a continuous closing environment.

### Observed Asset References

No image, video, SVG, or font-file URLs were included in the supplied asset evidence. The following inventory identifies visible assets without inventing filenames.

| Asset | Evidence | Implementation guidance |
| --- | --- | --- |
| Handwritten opening title | Desktop and mobile opening captures | Obtain authorized artwork; preserve its uneven stroke geometry |
| Portrait opening scene | Current desktop and mobile captures | Use a roughly 9:16 presentation; media technology remains unverified |
| Topic portraits and objects | Opening ribbon in both viewports | Maintain circular faces and distinct object silhouettes |
| Food-workshop photograph | Desktop food-chapter capture | Preserve rectangular edges and natural color |
| Traveler cutout and food objects | Desktop food-chapter capture | Use transparent assets instead of rectangular crops |
| Contributor portrait and tilted note | Desktop food-chapter capture | Keep the round portrait separate from the note artwork |
| Mountain and sky image | Desktop and mobile closing captures | Art-direct the crop so mountains remain visible above the footer |
| Field Pavilion logo | Closing destination banner | Preserve the supplied brand proportions and colors |
| X, Instagram, chevron, external-link symbols | Current captures | Match the visible simple outline treatment |

## Layout & Responsive Behavior

### Document Structure

| Section | Desktop height | Mobile height |
| --- | --- | --- |
| Opening | `1000px` | `844px` |
| Introduction | `624px` | `782.97px` |
| Three-story index | `454.66px` | `450.47px` |
| FIND chapter | `2327.66px` | `3291.66px` |
| EAT chapter | `2221.88px` | `3069.94px` |
| SPEND chapter | `2490.42px` | `3400.5px` |
| Related article | `599.38px` | `1033.13px` |
| Program index | `1576.94px` | `3066.19px` |
| Closing statement | `978.88px` | `871.25px` |
| Footer | `385.19px` | `282.59px` |

These are inspection measurements, not recommended fixed section heights. Let prose and imagery establish height in an implementation.

### Desktop Composition

The 1280px container leaves 80px margins at the inspected width. The opening portrait media is centered independently of the left-side title and navigation. Within the chapters, image and prose share a left edge at `x = 470px`, while the prose is 160px narrower than the main image. This alignment gives the page continuity even when the surrounding collage changes.

Use desktop whitespace as an active part of the composition. Filling every margin with text or centering all chapter content into a symmetrical stack would lose the observed editorial balance.

### Mobile Rearrangement

The mobile version changes more than column count:

- The opening image becomes full width, and the title moves onto it.
- The vertical topic ribbon becomes horizontal below the image.
- The story index becomes three short stacked rows.
- Main story imagery keeps its 3:4 ratio and reaches the right viewport edge.
- English chapter labels move from the right of the image to a narrow strip at the left.
- Supporting callouts enter the reading sequence instead of remaining in outer desktop areas.
- Narrative text uses 20.8px gutters, while some secondary groups use 41.6px insets.
- The program index becomes a single column.
- Closing copy has shorter lines and much less tracking.
- Footer copyright wraps to two lines.

The mobile chapter body is slightly larger in CSS pixels than desktop body copy, despite the smaller viewport. Preserve this readable relationship rather than shrinking every role proportionally.

### Breakpoint and Overflow Limits

The exact responsive breakpoint and behavior between 390px and 1440px were not supplied. A breakpoint around 1024px is a recommendation for the starter, not a source measurement. Test intermediate widths, landscape phones, zoomed text, and long contributor names.

Clipping belongs to specific media and decorative tracks. Avoid hiding horizontal overflow on the entire page to conceal misplaced prose or focus targets. The offscreen program-detail rectangles should not be mistaken for evidence that the ordinary document intentionally scrolls sideways.

## Do’s and Don’ts

### Do

- Preserve the three long narrative chapters and their blue, cream, and green fields.
- Keep the desktop opening image narrow and portrait-oriented, with substantial light margins.
- Let the handwritten title overlap the image boundary on desktop and sit over the image on mobile.
- Use Mincho for reflective headlines and the closing statement, sans serif for narrative reading, and Outfit for English support text.
- Keep the measured 440px desktop reading column distinct from the 600px main chapter image.
- Combine ordinary rectangular photographs with a limited number of transparent cutouts and handwritten annotations.
- Use pale-blue outlined pills for contributor and editorial links.
- Recompose the mobile page around reading order and full-width imagery.
- Preserve the scenic closing, official logo banner, and centered charcoal footer.
- Treat featured travelers as content participants unless separate production-credit evidence exists.

### Don't

- Don't replace the travelogue with a generic sequence of feature cards and conversion banners.
- Don't use a generic handwriting font as a substitute for the title artwork.
- Don't apply rounded corners and shadows to every photograph.
- Don't flatten all Japanese typography into one family across both viewports.
- Don't scale the desktop collage down as a single fixed canvas on mobile.
- Don't promote the exported Swiper blue into the site's visible palette without evidence.
- Don't invent hero playback controls, sound behavior, ticker speed, or modal transitions.
- Don't treat inherited heading font sizes as measurements of lettering embedded in artwork.
- Don't copy collapsed image-wrapper heights into a reconstructed layout.
- Don't rely on delayed reveals to make essential prose or links available.

## Recommended Implementation Additions

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

- Provide a real accessible H1 for the handwritten title. When the artwork is decorative alongside that heading, avoid announcing the same phrase twice.
- Increase essential mobile hero microcopy above the measured 6.24px and 9.36px sizes. Reposition it onto a suitable surface if the background makes it hard to read.
- Give icon-only social and external-destination links accessible names. Maintain a visible keyboard focus indicator and adequate hit areas.
- If the topic ribbon loops, provide pause behavior and prevent duplicate visual sequences from becoming repeated keyboard stops or repeated screen-reader content.
- Provide meaningful alternative text for documentary photographs and empty alternatives for purely decorative cutouts.
- If opening media is video, provide a poster, reduced-motion behavior, and an appropriate pause control. Playback and audio requirements must be established separately.
- Keep all chapter text available without reveal scripts. Apply entrance effects as progressive enhancement.
- If the program details use an overlay, separately implement and verify focus entry, Escape, closing, focus return, and background interaction management.
- Reserve media dimensions before loading. Load below-the-fold imagery progressively while prioritizing the opening composition.
- Preserve natural document scrolling and test internal chapter links after responsive reflow.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#f5f5f5`.
- White sections and destination banner: `#ffffff`.
- Main text: `#333333`.
- FIND chapter: `#dfeef5`.
- EAT chapter: `#fdefcd`.
- SPEND chapter: `#d4ebd0`.
- Pill links and decorative program lettering: `#deeef5`.
- Footer: `#3e3e3e` with white content.
- Edge treatment: thin dark outlines, square photographs, circular portraits, rounded link pills.

### Overall Prompt

“Create a Japanese regional travelogue for Hyogo Field Pavilion. Use a light-gray opening with a centered portrait image, expressive handwritten Japanese title artwork overlapping its left edge, small Outfit identity text, and a narrow topic ribbon containing circular portraits and isolated objects. Build three substantial editorial chapters on pale blue, cream, and green backgrounds. Pair large 3:4 destination images with widely tracked Mincho headlines, a narrow sans-serif reading column, traveler cutouts, white speech bubbles, and varied supporting photographs. Add contributor profiles with pale-blue outlined pill links, a nine-program index, and a scenic mountain closing with an official-logo banner above a charcoal footer. On mobile, move the title over full-width portrait imagery, turn the topic ribbon horizontal, and rearrange the collage into a readable sequence. Keep unverified media and detail interactions outside the fidelity claim.”

### Example Component Prompts

1. **Opening:** “At a 1440 × 1000 viewport, center an approximately 563px-wide portrait image on a `#f5f5f5` canvas. Place authorized handwritten title artwork in a roughly 375 × 265px region beginning near x=160 and y=333, crossing the image edge. Add a 50px-wide portrait-and-object topic sequence near the left margin. Keep small English text inset from the lettering.”
2. **Food chapter:** “Create a long editorial section on `#fdefcd`. Use a 600 × 800px main image, a 30px Mincho headline with generous spacing, and a 440px narrative column. Place a traveler cutout and white speech bubble to one side, with a workshop photograph and isolated food objects to the other. Avoid enclosing the collage in cards.”
3. **Contributor:** “Place an approximately 180px circular portrait on the chapter background. Cross its top edge with a tilted white handwritten note. To the right, stack a small role label, bold name, and 210 × 60px pale-blue outlined Instagram pill with a trailing chevron.”
4. **Program index:** “Use a white section with oversized pale-blue Outfit `PROGRAM LIST` lettering behind a compact dark heading. Arrange nine experience summaries in three columns within a 1280px desktop container, using approximately 373px columns and 80px gaps. Switch to one column on mobile. Do not invent a modal interaction.”
5. **Closing:** “Center reflective Mincho copy over a bright sky-and-mountain landscape. Below it, place a white 600 × 132px outlined banner containing the official Field Pavilion logo and a small external-link symbol. Finish with a charcoal footer containing centered government identity, two utility links, social icons, and copyright.”

## Quick Start

### CSS Custom Properties

This is an implementation starter, not recovered source CSS. It keeps a conventional root size and expresses the recorded desktop/mobile tokens in pixels. The 1024px breakpoint, program-image aspect ratio, fallback fonts, focus styling, and optional hover inversion are recommendations. Content-specific collage positioning and program-detail behavior require additional implementation.

Use `.container` inside each section; place `.story-media`, `.story-copy`, and `.creator` within that container. The starter aligns the desktop image and reading column while allowing mobile media to reach the right edge. Supply authorized artwork and font assets separately; no asset filenames are implied.

```css
:root {
  /* Measured palette */
  --canvas: #f5f5f5;
  --paper: #ffffff;
  --ink: #333333;
  --find: #dfeef5;
  --eat: #fdefcd;
  --spend: #d4ebd0;
  --button-fill: #deeef5;
  --footer: #3e3e3e;

  /* Source-aligned families with practical fallbacks */
  --font-body: YuGothic, 'Yu Gothic', Meiryo, sans-serif;
  --font-editorial: YakuHanMP, 'Yu Mincho', YuMincho, serif;
  --font-latin: Outfit, sans-serif;
  --body-weight: 500;

  /* Measured desktop dimensions */
  --gutter: 80px;
  --container: 1280px;
  --reading-width: 440px;
  --chapter-image-width: 600px;
  --body-size: 14px;
  --body-leading: 2.2;
  --headline-size: 30px;
  --headline-leading: 2;
  --headline-tracking: 0.25em;
  --chapter-top: 150px;
  --chapter-bottom: 120px;
  --button-width: 210px;
  --button-padding: 15px;
  --button-size: 16px;
  --button-radius: 100px;
  --banner-radius: 10px;

  /* Border width is a visual approximation */
  --outline: 2px solid var(--ink);

  /* Measured transition timing */
  --reveal-duration: 1.3s;
  --reveal-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
  --fade-duration: 0.3s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.container {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.hero {
  position: relative;
  min-height: 100svh;
  background: var(--canvas);
}

/* The 9:16 rule approximates the photographed opening geometry. */
.hero-media {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: min(100%, calc(100svh * 9 / 16));
  height: 100svh;
  transform: translateX(-50%);
  overflow: hidden;
}

.hero-media > :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-copy {
  position: absolute;
  z-index: 1;
  top: 33.333%;
  left: clamp(90px, 11.111vw, 160px);
  width: 375px;
}

.hero-title { margin: 0; }
.hero-title-art { width: 100%; height: 265px; object-fit: contain; }

.hero-brand {
  position: absolute;
  top: 236.2px;
  left: 57px;
  margin: 0;
  font: 500 18px/1.6 var(--font-latin);
}

.hero-summary {
  margin: 30px 0 0;
  padding-left: 57px;
  font: 500 12px/1.6 var(--font-latin);
}

/* Static, scrollable navigation baseline; no invented loop timing. */
.hero-ribbon {
  position: absolute;
  inset-block: 0;
  left: max(0px, calc((100% - 1280px) / 2));
  width: 60px;
  overflow: auto;
  border-right: 1px solid #777;
  background: var(--canvas);
}

.topic-track { display: flex; flex-direction: column; }
.topic-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 50px;
  margin-inline: auto;
  padding: 10px 0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.topic-label { writing-mode: vertical-rl; }
.topic-portrait { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.topic-object { width: 42px; height: 44px; object-fit: contain; }

.story {
  padding-block: var(--chapter-top) var(--chapter-bottom);
  scroll-margin-top: 24px;
}
.story--find { background: var(--find); }
.story--eat { background: var(--eat); }
.story--spend { background: var(--spend); }

.story-media {
  width: min(var(--chapter-image-width), 46.875%);
  aspect-ratio: 3 / 4;
  margin-inline-start: 30.46875%;
  object-fit: cover;
}

.story-headline {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--headline-size);
  font-weight: 400;
  line-height: var(--headline-leading);
  letter-spacing: var(--headline-tracking);
}

.story-copy {
  width: min(var(--reading-width), 69.53125%);
  margin: 80px 0 0 30.46875%;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  letter-spacing: 0.15em;
}
.story-copy p { margin: 0 0 1.8em; }
.story-copy .lead { font-size: 16px; font-weight: 700; line-height: 2.2; }

.creator {
  display: grid;
  grid-template-columns: 180px 210px;
  align-items: center;
  gap: 50px;
  width: 440px;
  max-width: 100%;
  margin: 60px 0 0 30.46875%;
  letter-spacing: normal;
}
.creator-portrait { width: 180px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.creator-links { display: grid; gap: 15px; }

.pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  max-width: 100%;
  min-height: 59.6px;
  padding: var(--button-padding);
  border: var(--outline);
  border-radius: var(--button-radius);
  background: var(--button-fill);
  color: var(--ink);
  font-size: var(--button-size);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.pill-chevron { position: absolute; right: 18px; width: 12px; height: 20px; }

.programs { padding-block: 180px 160px; background: var(--paper); }
.program-marquee {
  overflow: hidden;
  margin: 0 0 80px;
  color: var(--button-fill);
  font: 500 154px/0.7 var(--font-latin);
  white-space: nowrap;
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
}
.program-card { min-width: 0; }
/* Recommended placeholder ratio; original image ratio was not supplied. */
.program-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.program-title { margin: 0; padding: 20px 18px 0; font-size: 16px; line-height: 1.6; }

.closing {
  position: relative;
  isolation: isolate;
  padding-block: 160px 195px;
  text-align: center;
  background: var(--paper);
}
.closing-scenery {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.closing-copy {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 18px;
  line-height: 2.4;
  letter-spacing: 0.15em;
}
.portal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(600px, 100%);
  min-height: 132px;
  margin: 60px auto 0;
  padding: 20px;
  border: var(--outline);
  border-radius: var(--banner-radius);
  background: var(--paper);
}
.portal-logo { width: min(296px, 80%); height: auto; }
.portal-icon { position: absolute; right: 20px; bottom: 20px; width: 20px; height: 20px; }

.site-footer {
  min-height: 385.2px;
  padding-block: 80px 30px;
  background: var(--footer);
  color: var(--paper);
  text-align: center;
}
.footer-brand { margin: 0; font-size: 30px; line-height: 1.6; }
.footer-links { display: flex; justify-content: center; gap: 40px; margin: 40px 0 30px; }
.footer-links a { font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; }
.footer-socials { display: flex; justify-content: center; gap: 30px; }
.copyright { margin: 80px 0 0; font: 500 12px/1.6 var(--font-latin); }

/* Recommended focus and hover behavior, not recovered source states. */
a:focus-visible, button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}
@media (hover: hover) {
  .pill:hover { background: var(--ink); color: var(--paper); }
}

/* Recommended breakpoint; values target the inspected 390px layout. */
@media (max-width: 1023px) {
  :root {
    --font-body: 'Noto Sans JP', sans-serif;
    --font-editorial: YakuHanMP, 'Noto Serif JP', serif;
    --body-weight: 400;
    --gutter: 20.8px;
    --body-size: 14.56px;
    --body-leading: 2;
    --headline-size: 18.72px;
    --headline-leading: 2.3;
    --headline-tracking: 0.1em;
    --chapter-top: 83.2px;
    --chapter-bottom: 83.2px;
    --button-width: 176.8px;
    --button-padding: 10.4px;
    --button-size: 16.64px;
    --button-radius: 104px;
    --banner-radius: 10.4px;
  }

  .hero-media { position: relative; left: auto; width: 100%; height: auto; aspect-ratio: 9 / 16; transform: none; }
  .hero-copy { top: 18svh; left: 8%; width: 64%; }
  .hero-title-art { height: 41.6vw; }
  .hero-brand { top: 40.42vw; left: 10.667vw; font-size: 9.36px; font-weight: 400; }
  /* Measured microcopy size; increase for essential production text. */
  .hero-summary { margin-top: 26px; padding-left: 10.667vw; font-size: 6.24px; font-weight: 400; }
  .hero-ribbon { position: relative; inset: auto; width: 100%; height: 76px; border-right: 0; border-bottom: 1px solid #777; }
  .topic-track { flex-direction: row; width: max-content; }
  .topic-link { flex-direction: row; flex: none; width: auto; height: 75px; gap: 10.4px; padding: 0 10.4px; font-size: 14.56px; font-weight: 400; }
  .topic-label { writing-mode: horizontal-tb; white-space: nowrap; }

  .story-media { width: calc(100% + var(--gutter)); max-width: none; margin-inline-start: 0; }
  .story-copy { width: 100%; margin: 52px 0 0; }
  .story-copy .lead { font-size: 14.56px; line-height: 2; }
  .creator { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 176.8px); gap: 20.8px; margin: 52px 0 0; }
  .creator-portrait { width: 100%; }
  .creator-links { gap: 10.4px; }
  .pill { min-height: 51.4px; }

  .programs { padding-block: 104px 72.8px; }
  .program-marquee { margin-bottom: 64px; font-size: 72.8px; font-weight: 400; }
  .program-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .program-title { padding: 15.6px 15.6px 0; font-size: 14.56px; }

  .closing { padding-block: 72.8px 145.6px; }
  .closing-copy { font-size: 14.56px; letter-spacing: 0.03em; }
  .portal { min-height: 116.94px; margin-top: 46.8px; padding: 20.8px; }
  .site-footer { min-height: 282.6px; padding-block: 31.2px; }
  .footer-brand { font-size: 24.96px; }
  .footer-links { flex-wrap: wrap; gap: 20px; margin-block: 31.2px; }
  .footer-links a { font-size: 13.52px; }
  .copyright { margin-top: 26px; font-size: 12.48px; font-weight: 400; }
}

/* Content is visible by default; JavaScript must not be required to read. */
.reveal {
  opacity: 1;
  transform: none;
  transition:
    transform var(--reveal-duration) var(--reveal-easing),
    opacity var(--fade-duration);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .pill, .topic-link, .portal {
    transition: none;
    animation: none;
    transform: none;
    opacity: 1;
  }
}
```

The starter intentionally leaves collage cutouts, handwritten notes, and speech bubbles to content-specific positioning. Their image bounds and transparent margins matter; one universal absolute-position rule would not reproduce the three different chapters. CSS reduced-motion rules also do not pause video playback; a media implementation must handle that separately.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: var(--canvas);
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-find: var(--find);
  --color-eat: var(--eat);
  --color-spend: var(--spend);
  --color-link-blue: var(--button-fill);
  --color-footer: var(--footer);

  --font-japanese: var(--font-body);
  --font-literary: var(--font-editorial);
  --font-english: var(--font-latin);

  --text-narrative: var(--body-size);
  --text-chapter: var(--headline-size);
  --spacing-page-gutter: var(--gutter);
  --radius-pill: var(--button-radius);
  --radius-portal: var(--banner-radius);
}
```

## Sources & Evidence

- **Inspected original and final page:** [Hyogo Field Pavilion — Travelogue](https://expo2025-hyogo-fieldpavilion.jp/travelogue/). The supplied response reports HTTP 200, identical original/final URLs, and the title `兵庫の日常へ旅しよう。`.
- **Capture timestamp:** `2026-09-22T17:47:23.236Z`, equivalent to September 23, 2026, at 02:47:23.236 JST. This is the supplied inspection timestamp, not a claim of a separate live visit.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; document height approximately 12659px; current-page captures of the opening, food-chapter excerpt, and closing/footer.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; document height approximately 17093px; current-page captures of the opening and closing/footer.
- **Rendered DOM and computed styles:** page text, anchor destinations, element rectangles, font stacks, type sizes, line heights, tracking, colors, padding, radii, grid columns, and transition declarations at both viewports.
- **Navigation evidence:** the original page contains links to its three chapter anchors, contributor social profiles, an external related article, program pages, the main Field Pavilion website, official contact information, privacy policy, and official social channels. Link destinations were recorded; destination pages were not inspected for this reference.
- **Operator evidence:** the inspected footer visibly names `兵庫県` and includes the Hyogo Prefectural Government copyright notice. No website production credits were established by the inspected page.
- **Inspection limitations:** initial observation and scrolling were supplied, but no verified click, hover, keyboard, program-overlay, or media-control sequence was provided. Exact breakpoints, asset URLs, video settings, ticker timing, reveal starting transforms, and hidden-state behavior remain unknown. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current page represented by those captures and measurements. The implementation examples distinguish source measurements from visual estimates and recommended additions.