# Hotel URO — Style Reference

> A hollow-tree illustration and monumental lettering introduce a quiet hotel through warm paper, dark rooms, and generous architectural photographs.

**Website:** [hotel-uro.jp](https://hotel-uro.jp/)
**Original URL:** https://hotel-uro.jp/
**Final URL:** https://hotel-uro.jp/
**Theme:** a light beige canvas with alternating charcoal content sections; no selectable theme was evidenced.
**Inspected:** September 12, 2026. Supplied evidence recorded at 14:48:04.264 UTC / 23:48:04.264 JST.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current hotel homepage, including its opening composition, introduction, room collection, terrace and lounge, soundscape, café and bar, FAQ preview, access information, and footer. Three desktop captures and two mobile captures accompany rendered DOM and computed-style samples. Linked pages, reservation checkout, and external destinations were not inspected.

Hotel URO uses two complementary visual languages. Its opening is an illustrated poster: a tall, intricate tree contains stairs, rooms, platforms, and tiny architectural details, while huge black serif lettering extends behind it. The surrounding controls occupy the corners and leave the center open. Further down, the page becomes an architectural editorial: tightly tracked sans-serif headings, small Japanese paragraphs, broad photographs, and alternating beige and charcoal chapters.

The site is a hotel homepage with both internal section links and separate information pages. Reservation remains available in the header and footer, but it appears as delicate parenthesized lettering rather than a filled promotional button. A clipped announcement, location clock, and changing desktop elevation readout make the viewport feel like an inhabited place.

The mobile evidence has an important limitation: the opening capture shows only a thin strip of the illustration near the upper quarter of the screen. The large headline and lower-left introductory artwork are not visibly rendered. This document records that incomplete state and does not infer a completed mobile hero from the desktop version.

## How to Read This Reference

- **Measured** values are transcribed from the supplied rendered DOM and computed styles. They describe the two inspected viewport states, not an independently retrieved stylesheet.
- **Derived** values are arithmetic relationships between measured bounds, such as the 23px room-item gap.
- **Estimated** values describe visible artwork, image crops, or shapes whose own computed styles were not included.
- **Recommended** values belong to the reusable implementation. The proposed breakpoint, static mobile hero, focus treatment, and CSS class names are recommendations.
- **Named tokens** are descriptive aliases created for this reference. No site-specific semantic color variables were supplied.
- DOM text includes offscreen navigation and duplicated room entries. Their presence does not establish that they were simultaneously visible.
- The raw HTML element declares `Times`, but visible body text has a different computed font stack. Empty text on graphical headings and links also prevents their inherited font declarations from identifying the lettering inside them.
- The captures and DOM samples cover more content than the five images show in detail. Photography outside the visible lounge and partial soundscape image has limited visual evidence.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Warm Paper | `#ecded4` | `--color-paper` | Measured body background, `rgb(236, 222, 212)`; also measured text color inside dark sections |
| Brown Ink | `#2f201b` | `--color-ink` | Measured body and footer text, `rgb(47, 32, 27)` |
| Charcoal | `#1f1f1f` | `--color-dark` | Measured Rooms, Sounds, and FAQ backgrounds, `rgb(31, 31, 31)` |
| Graphic Black | `#000000` | `--color-graphic` | Measured sound-button text; visually consistent with the opening lettering, logo, and linework |
| Reversed Paper | `#ecded4` | `--color-on-dark` | The same paper color used for headings and copy over charcoal |

The main canvas is a muted peach beige. Brown Ink gives ordinary paragraphs a softer appearance than the black opening graphic. Charcoal sections create the strongest changes of scene, while photographs introduce cool blue and teal tones without turning those colors into interface accents.

### Palette Behavior

The header samples report paper-colored text while the opening screenshots show dark lettering on beige. The evidence does not include enough descendant artwork, filter, or compositing information to identify the mechanism. Reproduce the visible contrast; do not copy a paper-colored header foreground directly onto the paper background.

Likewise, the FAQ button node reports Brown Ink, but its question paragraph reports Reversed Paper. Style the visible text node or an explicit component foreground rather than relying on an intermediate inherited color.

The supplied custom-property list contains generic publishing-system palettes, gradients, shadows, and a blue carousel-library token. These declarations do not establish visible brand colors, gradients, shadows, or blue carousel controls. The observed interface uses the restrained palette above.

## Tokens — Typography

### Main Interface and Editorial Text

**Measured stack:** `"Instrument Sans", "IBM Plex Sans JP", sans-serif`.

The computed stack is present on the body, navigation, section titles, room labels, and most content paragraphs. Instrument Sans is the first declared family; IBM Plex Sans JP provides the declared Japanese-capable companion. The evidence does not enumerate downloaded font files or prove the selected font for every glyph.

Use regular weight `400` for body copy and utility text, and medium `500` for the major content headings. The character comes from a strong size contrast and tight display tracking, rather than very heavy sans-serif weights.

### Footer Typography

**Measured stack:** `"IBM Plex Sans JP", sans-serif`.

The footer explicitly drops Instrument Sans from its computed family list. Its small headings, address, contact information, and navigation therefore have a subtly different rhythm. Desktop footer text generally retains `1.35px` tracking; several mobile footer blocks switch to normal tracking.

### Illustrated and Graphical Lettering

The opening headline is a high-contrast serif composition with very large thick strokes, fine hairlines, and prominent curves. The URO wordmark is extremely condensed and vertically emphatic. The reservation lettering is narrow, delicate, and enclosed in parentheses.

Their actual font families are **unverified**. The empty text values and zero-line-height wrappers associated with some visible graphics do not establish their file formats or font sources. Preserve authorized artwork where available. For a new identity, commission equivalent lettering or select and test an appropriate display face separately.

The desktop hero's Japanese caption also appears as graphical lettering with a serif character. Its wrapper's inherited sans-serif declaration should not be treated as the caption's own font.

### Type Scale

Values below are measured unless marked otherwise. Sizes and line heights are in CSS pixels.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Body copy | `13.5 / 22.005` | `13 / 21.19` | `400` | `1.35px` desktop; `0.65px` mobile |
| Main section heading | `67 / 67` | `28 / 28` | `500` | `-0.055em` |
| Feature heading | `46 / 46` | `22 / 22` | `500` | `-0.055em` |
| Introductory paragraph | `23 / 41.86` | `16 / 29.12` | `400` | Normal |
| Room title | `16 / 19.2` | `16 / 19.2` | `400` | `-0.01em` |
| Desktop navigation | `13 / 21.19` | Not visibly present | `400` | `-0.025em` |
| Offscreen menu links | `26 / 42.38` | `20 / 32.6` | `400` | `-0.025em` |
| Sound control | `13.5 / 22.005` | `13 / 21.19` | `400` | Normal |
| Location clock | `13.5 / 22.005` | `12 / 19.56` | `400` | Normal |
| FAQ section heading | `39 / 39` | `20 / 20` | `500` | `-0.055em` |
| FAQ category heading | `28 / 28` | `18 / 18` | `500` | `-0.035em` |
| FAQ question text | `13.5 / 22.005` | `13 / 21.19` | `400` | `0.05em` |
| Structure heading | `46 / 46` | `22 / 22` | `500` | `-0.055em` |
| Footer vision statement | `18 / 29.34` | `16 / 26.08` | `400` | `1.35px` desktop; normal mobile |
| Footer cityscape heading | `17 / 27.71` | `15 / 24.45` | `400` | `1.35px` desktop; normal mobile |
| Footer navigation | `16 / 26.08` | Not visibly present | `400` | `1.35px` |
| Footer contact label | `12 / 19.56` | `12 / 19.56` | `400` | `-0.3px` |
| Access map link | `17 / 27.71` | `15 / 24.45` | `400` | `-0.055em` |

**Derived relationships:** body line height is `1.63`; introductory copy uses `1.82`. Body tracking reduces from `0.1em` on desktop to `0.05em` on mobile. Major headings keep their negative tracking ratio at both sizes.

**Visual estimate:** the desktop hero lettering occupies an ink band roughly 190px high, including descenders. This is an artwork measurement estimate, not a measured CSS font size.

## Tokens — Spacing & Shapes

### Spacing Scale

The evidence shows recurring dimensions rather than a confirmed universal spacing unit.

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Initial header corner inset | `24px` | `20px` | Measured |
| Main content side inset | Usually `37px`; hero uses `36px` | `20px` | Measured |
| Standard section top/bottom padding | `65px` | `50px` | Measured |
| Rooms bottom padding | `130px` | `60px` | Measured |
| Main heading to first content row | `70px` | `30px` | Derived from measured bounds |
| Feature heading to paragraph | `20px` | `12px` | Derived from measured bounds |
| Desktop copy-to-media separation | `72px` right padding in the copy column | `0px` | Measured |
| Room-item gap | `23px` | `23px` | Derived from adjacent item positions |
| Terrace row separation | `60px` between desktop row bounds | Layout changes to stacked media and copy | Derived / observed |
| Introduction top padding | `141px` | `0px` | Measured |
| Introduction bottom padding | `217px` | `150px` | Measured |
| Footer top/bottom padding | `143px / 56px` | `50px / 50px` | Measured |

The introduction deliberately has more breathing room than the later editorial chapters. Avoid normalizing every section to one padding value.

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Dark chapter surfaces | `38px 38px 0 0` desktop | Measured on Rooms, Sounds, and FAQ |
| Dark chapter surfaces | `20px 20px 0 0` mobile | Measured on the same sections |
| Lounge photograph | Approximately `26px` | Estimated from the desktop capture; all four corners are rounded |
| Sound control | `500px` desktop; `422px` mobile | Measured values producing a pill |
| Small footer circle | Approximately `40 × 40px`, circular | Estimated from the mobile footer capture; function unverified |
| Text sections and footer canvas | `0` | Measured on sampled section containers |

The large section radii soften transitions into dark chapters. They do not imply a system of rounded cards around every paragraph.

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 |
| --- | --- | --- |
| Document height | Approximately `7801.19px` | Approximately `7575.73px` |
| Opening section | `1440 × 1000px`, starts at document y `20px` | `390 × 844px`, starts at document y `20px` |
| Initial logo link | `69 × 64.84px`, x/y `24/24` | `69 × 64.84px`, x/y `20/20` |
| Header descriptor graphic | `178 × 33.95px` | Not visible in the opening capture |
| Header reservation link | `138 × 28.16px` | `115 × 23.45px` |
| Introduction text column | `598px`, x `421px` | `350px`, x `20px` |
| Editorial copy wrapper | `583.28px`, including `72px` right padding | `350px`, no right padding |
| Actual editorial paragraph width | `511.28px` | `350px` |
| Room title/copy width | `495px` | `350px` |
| Standard View more link bounds | Approximately `148.08 × 24.44px` | Approximately `127.67 × 22.81px` |
| Sound button | Approximately `154.81 × 24px` | Approximately `149.92 × 23.19px` |
| Menu line-button box | `68 × 6px` in the initial sample | `58 × 6px` |
| Footer reservation graphic link | `138 × 28.59px` | `100 × 21.19px` |

The desktop editorial split begins at x `37px`. Its copy wrapper ends near x `620.28px`, where the visible lounge image begins. With a right inset near `37px`, the remaining media width is approximately `782.72px`. This gives a **derived** split of about `42.7% / 57.3%`; the 72px separation is inside the left column.

The lounge image is approximately `783 × 541px` in the supplied screenshot, a ratio near `1.45:1`. Its own DOM image bounds were not supplied, so treat the image measurement as an estimate.

## Components

### Persistent Header

**Role:** identity, section navigation, and reservation access.

The initial desktop state places the URO logo at the upper left, a small three-line hotel/location descriptor beneath it, and six links across the upper right: About, Rooms, Terrace, Cafe&Bar, Feature, and Access. The parenthesized reservation artwork sits below the navigation and aligns to the right edge.

The header is visually transparent and remains present over later sections. Scrolled desktop captures show a compact Menu label and two horizontal lines in place of the initial navigation row. The exact scroll threshold and transition sequence were not supplied.

Mobile begins in the compact state. The logo remains 69px wide at the initial viewport, while the reservation artwork narrows to 115px. The line graphic measures 58px wide and only 6px high; that visible geometry should not determine the recommended interactive target size.

The sampled HEADER bounds cover the viewport. This is evidence of the overlay's extent, not a solid full-screen header surface. A reusable implementation should keep empty overlay space transparent to pointer input.

### Reservation Link

**Role:** persistent access to the hotel's external reservation destination.

The label appears as slender serif artwork reading `(Reservation)`. Its parentheses, narrow proportions, and lack of a box distinguish it from ordinary navigation. It is repeated in the footer at a smaller mobile size.

The original-page link list contains an external hotel-property reservation URL. Its destination and booking flow were not exercised. The extracted link text is empty; accessible naming information for its graphical content was not provided.

Use an anchor with a meaningful accessible name and retain the artwork's intrinsic proportions. Do not infer the lettering's font from the inherited sans-serif style on the anchor.

### Opening Composition

**Role:** express the hotel's hollow-tree concept before presenting practical information.

The desktop composition contains four distinct layers:

1. A continuous Warm Paper canvas.
2. Very large black serif lettering, with the visible words “Slow” and “Light.” extending across almost the full width.
3. A central tree-and-building illustration that obscures the middle of the headline.
4. Corner information: identity and navigation above, bilingual caption and utility controls below.

The illustration's visible extent is approximately x `475–960px` and y `150–890px`, including its hatched ground shadow. These are screenshot estimates. It contains multiple stairs, windows, small rooms, tree bark, foliage, and tiny birds. Its narrow vertical form leaves substantial empty paper on both sides.

The headline sits behind the illustration rather than occupying a separate text column. Preserve that overlap and the difference between massive letterforms and minute drawing detail. Do not attempt to recover obscured wording from the visible fragments.

At the lower left, the caption reads `朝の光のように、穏やかに心が静まる時。`, followed by the English line “Enjoy a stay that will relax your mind and soul, just like the morning light.” The visible Japanese artwork measures approximately `265 × 44.94px`; the English graphic wrapper measures `270 × 22px` on desktop.

The mobile capture does not demonstrate this completed composition. Only a shallow treetop/roof strip appears around y `220–242px`. The cause, eventual reveal, and final mobile arrangement remain unverified.

### Ambient Viewport Information

**Role:** maintain a sense of location and passing time while browsing.

The lower edge carries a small copyright mark, a clipped repeated announcement, and a right-aligned location clock preceded by a pointed black marker. The announcement text is “August 1st Grand open.” Its clipping changes across the supplied captures, consistent with a moving ticker. No year or current opening status should be inferred from this text.

Desktop also shows `(Elevation377)` at the opening, `(Elevation188)` in the middle capture, and `(Elevation0)` at the footer. The values decrease with the captured scroll positions. Their formula and units are unknown; they should not be interpreted as verified physical elevation.

The clock advances across captures and labels the location as Nagasaki, Japan. Nothing in the evidence establishes device geolocation or a compass sensor. The pointed marker is a visual motif.

Mobile omits the elevation readout and visible opening copyright mark. The ticker and location line share the narrow bottom edge, so their available widths are tightly constrained.

### Sound Control

**Role:** expose the current website sound state.

The captured state is always `Sound OFF`. The control is a transparent, thin outlined pill, approximately 155 × 24px on desktop and 150 × 23px on mobile. Text is centered with asymmetric measured padding: `27px` left and `35px` right on desktop, leaving room for the small circular indicator toward the right end.

It sits above the location line in the opening capture. Sound playback, toggle feedback, persistence, and correspondence with the hotel's described sound installation were not tested.

For reuse, keep sound opt-in and preserve an explicit text state. The visible pill can remain small inside a larger keyboard- and touch-operable target.

### Offscreen Navigation

**Role:** house compact-menu destinations.

The DOM includes two columns of offscreen links. Desktop examples begin beyond the viewport at x `1557px`; mobile examples begin near x `499px`. The entries include the main navigation, FAQ, and Instagram.

Measured menu links use 26px type on desktop and 20px on mobile. The presence of these links supports a secondary navigation structure, but the open menu's full surface, entrance direction, focus behavior, and close interaction were not observed. Do not describe an opened drawer as visually verified.

### Introductory Statement

**Role:** explain the hotel as a small urban refuge.

After the opening, a narrow centered paragraph introduces the hollow-tree idea and the relationship between rooms, stairs, café, bar, and city life. The source copy begins `街の小さな樹洞(うろ)で会いましょう。`.

The desktop text column is 598px wide and uses 23px type with 41.86px line height. Mobile expands the column to the available 350px while reducing type to 16px with 29.12px line height. Both use normal tracking, making this passage more continuous and literary than the small tracked paragraphs below.

A graphical heading wrapper precedes the paragraph; its visible lettering is not separately established by the supplied screenshots. A View more link follows and points to the About page.

### View More Link

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

The visible footer example pairs a long, fine right-pointing arrow with an underlined `View more` label. The arrow sits before the wording with open space between them. This is a directional text link, with no filled background or enclosing card.

Standard measured link bounds are approximately 148 × 24px on desktop and 128 × 23px on mobile. The footer version occupies a wider layout wrapper, so its wrapper width does not equal the visible arrow-and-label width.

Use the same pattern for editorial destinations, and add accessible context where repeated labels would otherwise be ambiguous.

### Rooms Rail

**Role:** introduce four distinct accommodation types and link to their details.

Rooms occupies a charcoal section with rounded upper corners. A large heading precedes a horizontal collection. The four unique room types are Female Dormitory, Deluxe Double, Standard Double, and Mix Dormitory. Repeated extracted entries and offscreen x positions indicate duplicated content in a horizontal rail.

Each item has a small room title, a substantial intervening media region, descriptive Japanese copy, and a View more link. The item text width is 495px on desktop and 350px on mobile. Adjacent title positions are 518px apart on desktop and 373px apart on mobile, giving the same derived 23px gap.

At the measured desktop state, the central Standard Double title starts at x `472.5px`, with neighboring items partly outside the viewport. The mobile Standard Double title starts at x `20px`, while the next begins at x `393px`. This establishes a single principal item at the mobile width.

The room photographs' exact crops, radii, and controls are not visible in the supplied viewport images. Counters are present in the DOM, but their changing values do not establish autoplay, swipe behavior, or which item is active. Preserve four unique content entries in a static fallback.

### Terrace and Lounge Feature Rows

**Role:** connect descriptions of the hotel's spaces with architectural imagery.

The section uses a large `Terrace/Lounge` title and two numbered entries: `(01)FAAH Terrace` and `(02)FAAH Lounge`. Desktop places copy left and a larger photograph right. A small parenthesized index accompanies the feature title; its independent child font size was not sampled.

The left wrapper is approximately 583px wide, including 72px of right padding. Actual paragraph width is approximately 511px. Headings use 46px type and tight tracking; paragraphs use the small 13.5px body style.

The lounge capture shows a dim interior with nearly black walls, tables in the foreground, dark curtains, and a bright square window framing the city. The photograph has rounded corners and carries more visual weight than the text. Its upper edge aligns with the feature heading in the captured desktop row.

Mobile text blocks become 350px wide with 22px feature headings and no right padding. Large intervening regions before the text blocks are consistent with media moving above the copy. The mobile media itself is not shown in the supplied viewport captures, so its final crop remains unverified.

### Sounds Section

**Role:** present the hotel's soundscape as a distinct experience.

Sounds returns to a charcoal surface with rounded upper corners and paper-colored text. Its hierarchy is `Sounds`, the small parenthetical label `(Soundscape)`, the feature title `In stratum`, descriptive copy, and an artist profile.

Desktop repeats the editorial split used for the lounge. The visible image fragment is a close view of a pale blue perforated surface. The full photograph is outside the supplied capture.

Mobile moves the `(Soundscape)` label and `In stratum` heading above the intervening media region; the longer description follows below it. This differs from simply putting the entire desktop text column beneath a photograph.

The original-page text names 坂本豊 in the sound-artist profile. That establishes the attribution within this hotel experience section; the website audio's authorship and playback behavior remain unverified.

### Café and Bar Feature

**Role:** explain the two hospitality concepts and their practical schedules.

The light section begins with `Cafe&Bar`, followed by a feature block labeled `(Cafe&Bar)` and titled `FAAH/zzzzz`. It uses the same desktop copy width, feature-title scale, and mobile stacking pattern as the other editorial features.

The text moves from concept description to two compact information groups. The captured schedules read `Cafe FAAH — 8:00-17:00 Open Daily` and `Bar zzzzz — 17:00-22:30 Open on selected dates`, each with its own Instagram link. These are source content at capture time, not independently verified operating hours.

A counter with a total of three appears in the DOM, suggesting a media sequence. Its transitions and controls were not inspected. Keep business information readable independently of any image sequence.

### FAQ Preview

**Role:** answer a small set of reservation questions and route visitors to the full FAQ.

The FAQ is a charcoal chapter with a smaller section heading than Rooms or Sounds: 39px desktop and 20px mobile. A category heading pairs `(01)Reservation` with the Japanese label `予約について`.

Four question buttons follow. The first reads `予約はどのように行えばいいですか？`. Button boxes span the content width: 1366px desktop and 350px mobile. The visible question begins 40px inside the desktop button and 27px inside the mobile button, indicating a leading marker/control area whose artwork was not sampled.

Successive button top positions are 63px apart on desktop and approximately 46.19px apart on mobile. Their measured text-height boxes are only 22px and 21.19px respectively; these values do not establish the complete accessible hit area.

Answer content exists in the DOM, while the visible-text extraction contains only the questions. This supports a collapsed FAQ presentation. Expansion, icon changes, animation, keyboard handling, and whether multiple answers can remain open were not tested.

### Access Information

**Role:** explain arrival routes and provide map and contact access.

`Visit us` uses the main section-heading scale. Desktop places the heading and `(Access)` content in the familiar left editorial column, with a large right-side region associated with the access presentation. Only a pale rounded fragment of that region is visible at the top of the footer capture; map rendering and interaction are unverified.

On mobile, the `google map` link moves into the section-heading row, aligned right at approximately x `274.59px`. Access prose follows the intervening media region in a 350px column. It includes transit directions, a parking note, the address, and an email link.

The address is `850-0831 長崎県長崎市鍛冶屋町6-10`. Preserve the separation between practical access information and the more expressive introductory copy.

### Structure and Footer

**Role:** close with the building's regeneration story, then provide identity and practical links.

The desktop footer begins with three aligned areas: `Structure` at x `37px`; `(Vision)`, `What can we do.`, and View more at x `515.09px`; and a cityscape statement at x `932.39px`. The third area contains `Recreating the Cityscape`, an English subline, and a Japanese paragraph about retaining the area's stair and slope character while reusing a former karaoke venue.

A lower row places a larger URO wordmark at left, address and contact information in the middle, and navigation, Instagram, and reservation access at right. The background stays beige; grouping comes from alignment and space rather than rules or boxes.

Mobile stacks Structure, Vision, the cityscape statement, the wordmark, and address. Contact remains toward the left while Instagram and reservation occupy the right side of the lower area. The desktop footer navigation and small descriptor beneath the logo are not visibly present.

The mobile footer also shows an approximately 40px outlined circle near the lower right. Its function is unknown. The persistent header visibly overlaps the Structure area in the captured scroll position; do not treat that overlap as a desirable spacing rule for a new implementation.

## Tokens — Motion & Interaction

| Treatment | Evidence | Limit of the claim |
| --- | --- | --- |
| General links and several buttons | Computed transition `0.2s` | Triggered properties and visual hover states were not exercised |
| Header wrapper | Computed transition `0.2s` | Exact compact-state sequence is unknown |
| Logo heading wrapper | `0.4s cubic-bezier(0.33, 1, 0.68, 1)` | A transition is defined; animated properties were not supplied |
| Mobile introduction | `2s ease-in-out forwards mask-fade-in` | Animation name and timing are measured; keyframes and reveal geometry are unavailable |
| Sound button | Desktop transition `0.2s`; mobile `none` | Sound toggle behavior was not tested |
| Announcement | Repeated text and visibly shifted clipping across captures | Speed, direction, loop timing, and pause behavior are unverified |
| Location clock | Seconds advance across captures | Update implementation and announcement behavior are unverified |
| Elevation readout | Desktop values `377`, `188`, then `0` at later scroll positions | Scroll relationship is evident; formula and units are unknown |
| Room/media sequences | Repeated room content, offscreen positions, and counters | Autoplay, dragging, navigation buttons, and transition timing are unverified |
| Compact navigation | Desktop header differs between opening and scrolled captures | Exact breakpoint and scroll trigger are unknown |
| FAQ | Question buttons and answer content exist in the DOM | No expansion was exercised |

A computed value of `transition: all` without a nonzero duration is not evidence of a visible animation. Similarly, `animation: none` on a sampled section does not exclude animation on unsampled descendants or JavaScript-driven motion.

The capture procedure waited for document loading, visible-image decoding, and sampled layout stability within finite limits. Perpetual animations were temporarily paused for readiness checks and resumed afterward. These checks do not prove that delayed or masked content became semantically complete; the mobile hero is a concrete example of that limitation.

**Recommended motion direction:** use restrained fades and short control transitions, retaining the measured 200ms and 400ms timings where useful. Keep essential content visible without animation. A ticker, moving illustration, or scroll readout should enhance a stable document rather than gate access to it.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Solid Warm Paper | Continuous background through opening, editorial light sections, and footer |
| Dark chapters | Charcoal with rounded upper corners | Separate Rooms, Sounds, and FAQ from adjacent light content |
| Photographic media | Large images with soft corners in the visible lounge example | Convey atmosphere, materials, and spatial proportions |
| Header and utility overlay | Visually transparent surrounding space | Keep identity and controls near the viewport edges |
| Sound control | Transparent fill, thin black outline, pill shape | Expose a compact stateful control |
| Editorial links | Fine arrow and underlined wording | Signal onward navigation without a filled CTA |
| Footer | Same paper canvas, unboxed columns | Finish the story and collect contact destinations |

No general shadow or elevated-card system is visible in the supplied captures. Depth comes from photography, overlapping hero artwork, and changes between paper and charcoal.

## Imagery

The hero illustration is the most specific identity asset. Its tree is both an organic hollow and an architectural section: bark surrounds stairs and rooms, branches hold small structures, and fine hatch marks ground the composition. The drawing remains black against the paper canvas, with no visible colored illustration fills.

Preserve the entire vertical subject, its fine line density, and its relationship to the headline. A generic tree silhouette, stock forest photograph, or simplified line icon would lose the connection between refuge, building, and city.

The visible photography is quiet and architectural. The lounge image uses deep shadows, spare furniture, a bright square window, and cool color to emphasize the room's relationship to the city. The partial Sounds image introduces pale blue and a close material texture. Avoid bright lifestyle stock photography as a default substitute for this restrained spatial language.

### Observed Asset References

No original image URLs or asset filenames were included in the supplied evidence. The references below identify visible material without inventing paths or file formats.

| Material | Observed use | Evidence limits |
| --- | --- | --- |
| Condensed URO wordmark | Header and larger footer identity | Visible artwork; initial header link dimensions measured |
| Small hotel/location descriptor | Beneath the desktop wordmark | Graphical wrapper measured; file format unknown |
| Hollow-tree architectural drawing | Central desktop opening composition | Full desktop appearance visible; mobile only shows a thin fragment |
| Oversized serif headline | Behind the tree illustration | Lettering family and obscured full wording unverified |
| Parenthesized reservation artwork | Header and footer | Link dimensions measured; artwork format unknown |
| Japanese and English opening captions | Lower-left desktop composition | Visible graphics and wrapper bounds supplied |
| FAAH Lounge photograph | Right side of a desktop feature row | Full visible crop available in the middle capture |
| Pale blue perforated-surface photograph | Sounds section | Only the upper portion is visible |
| Thin arrows, line menu, pointed location marker | Navigation and utility motifs | Simple visible shapes; original SVG or image sources unavailable |

Use authorized original material where appropriate. A reusable layout can reproduce the spacing and hierarchy, but the hero's identity depends on its particular drawing and lettering.

## Layout & Responsive Behavior

The page is a long document with persistent edge controls. It moves through opening illustration, centered introduction, dark Rooms, light Terrace/Lounge, dark Sounds, light Cafe&Bar, dark FAQ, light Access, and a light footer. This alternating sequence is more important than reproducing every chapter at the same height.

| Relationship | Desktop evidence | Mobile evidence |
| --- | --- | --- |
| Main navigation | Six text links at the opening; compact Menu in scrolled captures | Compact Menu from the opening |
| Logo | 69px wide initially, descriptor beneath | Same initial logo width; descriptor absent |
| Hero | Complete central drawing over giant lettering | Only a shallow drawing fragment visible; final arrangement unknown |
| Introductory text | Centered 598px column | 350px column within 20px side insets |
| Room collection | 495px items; central item with neighboring content at edges | 350px items; one principal item fits the viewport |
| Editorial content | Copy left, larger media right | Text becomes full-width; media regions precede most descriptions |
| Main headings | 67px | 28px |
| Feature headings | 46px | 22px |
| Dark section radius | 38px upper corners | 20px upper corners |
| Access map link | Near the bottom of the text column | Beside Visit us in the heading row |
| Footer | Broad three-part alignment and secondary navigation | Stacked narrative; contact and social actions share the lower area |
| Ambient readout | Copyright, announcement, elevation, location clock | Announcement and location clock; elevation absent |

The mobile document remains roughly as long as the desktop document despite smaller type and tighter spacing. Several desktop side-by-side regions stack vertically, especially the Sounds section, whose measured height increases from approximately 848px to 1111px.

Only two viewport widths were sampled. A media-query breakpoint or continuous interpolation formula cannot be recovered from those endpoints. The Quick Start uses a recommended 960px switch between stacked and split layouts.

Safe-area handling, landscape behavior, zoom, opened navigation, and keyboard focus were not inspected. The visible collisions between persistent chrome and scrolled headings should be addressed with deliberate content clearance and scroll offsets in a new implementation.

## Do’s and Don’ts

### Do

- Use measured Warm Paper `#ecded4`, Brown Ink `#2f201b`, and Charcoal `#1f1f1f` as the structural palette.
- Keep the tree illustration detailed, vertically complete, and layered in front of the desktop headline.
- Preserve the distinction between graphical serif lettering and the measured sans-serif interface stack.
- Use medium-weight section headings with `-0.055em` tracking.
- Alternate open light chapters with charcoal sections that have rounded upper corners.
- Give architectural photography substantial width and preserve meaningful windows, furniture, and material details in crops.
- Retain the 23px room-item gap and clear separation between each room's title, media, copy, and detail link.
- Keep reservation access consistently discoverable in the header and footer.
- Treat the clock, announcement, and elevation as compact supporting information.
- Reorder mobile content deliberately, including the separate Sounds heading placement.
- Provide a complete static mobile opening when adapting the design.

### Don't

- Don't identify the hero or reservation font from the inherited font on an empty wrapper.
- Don't use generic publishing-system color presets as evidence of the visible brand palette.
- Don't place cream header text directly on cream merely because a sampled parent reports that foreground color.
- Don't convert all content into equal-sized rounded cards with shadows.
- Don't replace the tree drawing with a generic decorative plant graphic.
- Don't present the captured mobile hero's missing content as an intentional finished design.
- Don't claim autoplay, parallax, menu animation, audio behavior, or FAQ transitions that were not exercised.
- Don't interpret Elevation as a verified physical measurement or the location marker as a sensor-driven compass.
- Don't reproduce duplicated room content as eight distinct accommodation types.
- Don't turn the tiny visible menu lines or sound pill into equally tiny touch targets.
- Don't preserve header/content collisions as part of the visual identity.

## Recommended Implementation Additions

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

- Render the hero drawing and a readable headline in a complete default state. Apply masks or entrance effects only after the base content is available.
- Provide meaningful accessible names for the graphical home and reservation links. Empty extracted text alone does not establish whether the original already has such names.
- Put the small visual sound pill and menu strokes inside comfortably sized interactive targets. Maintain a clear paper/ink focus outline.
- Implement menu disclosure state, keyboard navigation, Escape dismissal where applicable, and reliable focus return.
- Give FAQ buttons `aria-expanded` and `aria-controls`, or use native disclosure elements. Keep answers accessible when animation is disabled.
- Give repeated View more links contextual accessible labels identifying the room or destination.
- Preserve a non-looping, horizontally scrollable room list as a fallback. Add slider behavior only with explicit controls and stable content order.
- Keep audio off until a deliberate user action. Expose its state in text and handle failed playback without hiding content.
- Offer a pause or static alternative for continuously moving announcements. Avoid announcing clock changes every second to assistive technology.
- Reserve clearance for persistent corner controls, including device safe areas and anchored section headings.
- Use plain email links for contact and keep address and arrival information available without an interactive map.
- Review the small body size under zoom and on real phones; increase it where readability requires while retaining the overall hierarchy.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#ecded4`.
- Paragraph and footer text: `#2f201b`.
- Dark chapters: `#1f1f1f` with `#ecded4` text.
- Opening artwork and outlined utility controls: black.
- Photography: cool, quiet architectural tones; blue and teal remain image content.
- Links: fine directional arrows and understated underlines.
- Reservation: narrow parenthesized lettering with a transparent background.

### Overall Prompt

“Create an editorial hotel homepage inspired by Hotel URO's observed visual relationships. Use warm beige `#ecded4`, brown text `#2f201b`, and alternating charcoal `#1f1f1f` chapters. Build a desktop opening around a detailed vertical architectural tree drawing placed in front of enormous high-contrast serif lettering. Keep a condensed identity mark upper left and quiet navigation plus parenthesized reservation artwork upper right. Use Instrument Sans with IBM Plex Sans JP for interface text, medium-weight 67px desktop section headings with tight tracking, small Japanese paragraphs, broad architectural photographs, and 38px rounded upper corners on dark chapters. Follow with an introduction, room rail, terrace and lounge stories, soundscape, café and bar, FAQ, access information, and a spacious footer. At phone width use 20px side insets, 28px section headings, stacked media and copy, and a complete static hero. Treat menu, sound, and slider behavior as separately implemented features.”

### Example Component Prompts

1. **Opening composition:** “A warm beige viewport with a tall black architectural tree drawing centered over oversized serif lettering. Fine branches, stairs, windows, and dense bark linework contrast with the headline's thick strokes. Keep small identity and navigation in the upper corners and bilingual caption artwork near the lower left. Use supplied authorized artwork; do not invent the original font.”
2. **Lounge feature:** “A spacious hotel editorial row with a 42.7% copy wrapper and 57.3% media area on desktop. Give the copy wrapper 72px right padding, a small parenthesized index, a 46px tightly tracked title, and 13.5px Japanese body text. Place a large rounded architectural photograph at right, showing a dim room with a bright square city-facing window.”
3. **Rooms collection:** “A full-width charcoal chapter with paper-colored text, 38px rounded top corners, and a 67px Rooms heading. Use horizontally arranged 495px items separated by 23px, each with a 16px room title, media, descriptive copy, and a fine arrow link. At 390px viewport width use 350px items and 20px side insets. Keep four unique room entries.”
4. **Viewport utilities:** “Small transparent controls along the lower edge of a beige hotel page: a clipped announcement at left and a location clock with a pointed black marker at right. Above the clock, place a thin outlined Sound OFF pill with a tiny circular indicator. Keep the visible control understated while providing a larger interactive target.”
5. **Footer:** “An unboxed beige footer beginning with Structure, a Vision statement and arrow link, and a cityscape regeneration paragraph in three aligned desktop areas. Below, place a large condensed wordmark, address and email, navigation, Instagram, and parenthesized reservation artwork. Stack the narrative on mobile while retaining a compact contact/social split.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation of measured endpoint values, not recovered source CSS. It keeps a conventional 16px root. The 960px breakpoint, intermediate layout behavior, generic serif fallback, image radius, and complete mobile hero are recommendations.

Load the declared sans-serif families separately when available. Supply authorized logo, reservation, and illustration assets with meaningful alternative text. The generic display stack below is only a fallback for newly typeset text; it does not identify the original graphical lettering.

The CSS provides a static room rail and visible content by default. Menu state, FAQ expansion, audio, clock updates, and any continuous animation require separate behavior. Apply `data-compact='true'` to the header only through an intentional state controller.

```css
:root {
  /* Measured palette */
  --color-paper: #ecded4;
  --color-ink: #2f201b;
  --color-dark: #1f1f1f;
  --color-on-dark: #ecded4;
  --color-graphic: #000000;

  /* Measured text stacks; display fallback is recommended */
  --font-ui: 'Instrument Sans', 'IBM Plex Sans JP', sans-serif;
  --font-footer: 'IBM Plex Sans JP', sans-serif;
  --font-display-fallback: Georgia, 'Times New Roman', serif;
  --weight-regular: 400;
  --weight-heading: 500;

  /* Mobile endpoint values */
  --text-body: 13px;
  --text-section: 28px;
  --text-feature: 22px;
  --text-intro: 16px;
  --text-room: 16px;
  --text-faq: 20px;
  --text-faq-category: 18px;
  --leading-body: 1.63;
  --leading-intro: 1.82;
  --tracking-body: 0.05em;
  --tracking-heading: -0.055em;

  --page-gutter: 20px;
  --chrome-inset: 20px;
  --section-pad: 50px;
  --section-heading-gap: 30px;
  --feature-heading-gap: 12px;
  --room-gap: 23px;
  --room-width: calc(100vw - 40px);
  --radius-section: 20px;
  --radius-media: 26px; /* Estimated from the desktop photo */
  --radius-pill: 999px;
  --rule-width: 1px; /* Visual approximation */

  --motion-control: 200ms;
  --motion-brand: 400ms cubic-bezier(0.33, 1, 0.68, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-padding-top: 110px; /* Recommended header clearance */
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
  text-underline-offset: 0.25em;
}

img {
  display: block;
  max-inline-size: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.page-container {
  margin-inline: var(--page-gutter);
}

/* Transparent space around the header does not intercept input. */
.site-header {
  position: fixed;
  inset: calc(var(--chrome-inset) + var(--safe-top))
    var(--chrome-inset) auto;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--color-graphic);
  pointer-events: none;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.brand {
  display: block;
  inline-size: 69px;
  line-height: 0;
  transition: transform var(--motion-brand);
}

.brand img {
  inline-size: 100%;
  block-size: auto;
}

.brand-description {
  display: none;
  inline-size: 178px;
  margin-block-start: 12px;
}

.header-tools {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.primary-nav {
  display: none;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  line-height: 1.63;
  letter-spacing: -0.025em;
}

.primary-nav a {
  text-decoration: none;
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  letter-spacing: normal;
  cursor: pointer;
}

.menu-lines {
  inline-size: 58px;
  block-size: 6px;
  border-block: var(--rule-width) solid currentColor;
}

.reservation {
  display: block;
  inline-size: 115px;
  line-height: 0;
}

.reservation img {
  inline-size: 100%;
  block-size: auto;
}

/* Recommended complete static hero, including on mobile. */
.hero {
  position: relative;
  isolation: isolate;
  min-block-size: 100svh;
  overflow: clip;
  color: var(--color-graphic);
}

.hero-headline {
  position: absolute;
  inset: 48% 20px auto;
  z-index: 0;
  margin: 0;
  transform: translateY(-50%);
  font-family: var(--font-display-fallback);
  font-size: clamp(42px, 14vw, 90px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.065em;
  text-align: center;
}

.hero-art {
  position: absolute;
  inset: 49% auto auto 50%;
  z-index: 1;
  inline-size: min(80vw, 46svh);
  block-size: 62svh;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.hero-caption {
  position: absolute;
  inset: auto auto 120px var(--chrome-inset);
  z-index: 2;
  max-inline-size: min(270px, calc(100% - 40px));
  letter-spacing: normal;
}

.hero-caption img {
  inline-size: 100%;
  block-size: auto;
}

.intro {
  padding-block: 0 150px;
}

.intro-inner {
  inline-size: min(598px, calc(100% - 40px));
  margin-inline: auto;
}

.intro-copy {
  margin-block: 24px 30px;
  font-size: var(--text-intro);
  line-height: var(--leading-intro);
  letter-spacing: normal;
}

.chapter {
  padding-block: var(--section-pad);
}

.chapter--dark {
  color: var(--color-on-dark);
  background: var(--color-dark);
  border-radius: var(--radius-section) var(--radius-section) 0 0;
}

.section-title {
  margin: 0 0 var(--section-heading-gap);
  font-size: var(--text-section);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.feature-title {
  margin: 0 0 var(--feature-heading-gap);
  font-size: var(--text-feature);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.eyebrow {
  margin: 0 0 4px;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.feature + .feature {
  margin-block-start: 40px;
}

.feature-media {
  grid-row: 1;
  margin: 0;
  min-inline-size: 0;
}

.feature-media img {
  inline-size: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.feature-copy {
  min-inline-size: 0;
}

.feature-copy p {
  margin-block: 0 1.25em;
}

/* Use a separate heading above media for the mobile Sounds layout. */
.sound-mobile-heading {
  margin-block-end: 24px;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-inline-size: 100%;
  text-decoration: none;
  letter-spacing: normal;
}

.more-link-label {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.more-arrow {
  position: relative;
  flex: 0 0 54px;
  block-size: 1px;
  background: currentColor;
}

.more-arrow::after {
  content: '';
  position: absolute;
  inset: -4px 0 auto auto;
  inline-size: 8px;
  block-size: 8px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
}

.rooms {
  padding-block-end: 60px;
}

/* Recommended native scrolling fallback; no duplicated entries needed. */
.room-track {
  --rail-inset: max(
    var(--page-gutter),
    calc((100vw - var(--room-width)) / 2)
  );
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--room-width);
  gap: var(--room-gap);
  overflow-x: auto;
  padding-inline: var(--rail-inset);
  padding-block-end: 12px;
  scroll-padding-inline: var(--rail-inset);
  scroll-snap-type: x proximity;
}

.room-item {
  min-inline-size: 0;
  scroll-snap-align: center;
}

.room-title {
  margin: 0 0 20px;
  font-size: var(--text-room);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.room-media {
  margin: 0 0 24px;
}

.room-media img {
  inline-size: 100%;
  block-size: auto;
}

.room-copy {
  margin: 0 0 24px;
}

.faq-title {
  font-size: var(--text-faq);
}

.faq-category {
  font-size: var(--text-faq-category);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.faq-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  inline-size: 100%;
  min-block-size: 44px; /* Recommended interactive height */
  padding: 10px 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.site-footer {
  padding: 50px var(--page-gutter)
    calc(80px + var(--safe-bottom));
  font-family: var(--font-footer);
  letter-spacing: normal;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.footer-grid + .footer-grid {
  margin-block-start: 80px;
}

.footer-nav {
  display: none;
}

.footer-contact-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.footer-reservation {
  inline-size: 100px;
  margin-block-start: 24px;
}

.ambient-chrome {
  position: fixed;
  inset: auto var(--chrome-inset)
    calc(var(--chrome-inset) + var(--safe-bottom));
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  color: var(--color-graphic);
  letter-spacing: normal;
  pointer-events: none;
}

.ambient-chrome a,
.ambient-chrome button {
  pointer-events: auto;
}

.news-window {
  max-inline-size: 235px;
  overflow: hidden;
  white-space: nowrap;
}

.ambient-right {
  display: grid;
  justify-items: end;
  gap: 8px;
}

/* The outline stays small inside a recommended 44px hit target. */
.sound-control {
  position: relative;
  min-block-size: 44px;
  inline-size: 150px;
  padding: 0 34px 0 26px;
  border: 0;
  color: inherit;
  background: transparent;
  letter-spacing: normal;
  cursor: pointer;
}

.sound-control::before {
  content: '';
  position: absolute;
  inset: 10px 0;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.sound-control::after {
  content: '';
  position: absolute;
  inset: calc(50% - 2px) 12px auto auto;
  inline-size: 4px;
  block-size: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.location-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}

.location-marker {
  inline-size: 24px;
  block-size: 10px;
  background: currentColor;
  clip-path: polygon(0 100%, 100% 0, 62% 100%);
}

.elevation {
  display: none;
}

@media (min-width: 60rem) {
  :root {
    --text-body: 13.5px;
    --text-section: 67px;
    --text-feature: 46px;
    --text-intro: 23px;
    --text-faq: 39px;
    --text-faq-category: 28px;
    --tracking-body: 0.1em;
    --page-gutter: 37px;
    --chrome-inset: 24px;
    --section-pad: 65px;
    --section-heading-gap: 70px;
    --feature-heading-gap: 20px;
    --room-width: 495px;
    --radius-section: 38px;
  }

  .brand-description,
  .primary-nav {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }

  .menu-lines {
    inline-size: 68px;
  }

  .reservation {
    inline-size: 138px;
  }

  .site-header[data-compact='true'] .primary-nav,
  .site-header[data-compact='true'] .brand-description {
    display: none;
  }

  .site-header[data-compact='true'] .menu-toggle {
    display: flex;
  }

  .hero-headline {
    inset: 50% 36px auto;
    font-size: clamp(100px, 14.6vw, 240px);
  }

  .hero-art {
    inset-block-start: 50%;
    inline-size: min(34vw, 49svh);
    block-size: 75svh;
    transform: translate(-50%, -47%);
  }

  .hero-caption {
    inset-block-end: 70px;
  }

  .intro {
    padding-block: 141px 217px;
  }

  .feature {
    grid-template-columns: minmax(0, 0.427fr) minmax(0, 0.573fr);
    gap: 0;
  }

  .feature + .feature {
    margin-block-start: 60px;
  }

  .feature-copy {
    grid-column: 1;
    grid-row: 1;
    padding-inline-end: 72px;
  }

  .feature-media {
    grid-column: 2;
    grid-row: 1;
  }

  .sound-mobile-heading {
    display: none;
  }

  .more-arrow {
    flex-basis: 62px;
  }

  .rooms {
    padding-block-end: 130px;
  }

  .site-footer {
    padding-block: 143px calc(56px + var(--safe-bottom));
    letter-spacing: 1.35px;
  }

  .footer-grid {
    grid-template-columns: 1.161fr 1fr 1.247fr;
    gap: 40px;
  }

  .footer-grid + .footer-grid {
    margin-block-start: 136px;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 32px;
    font-size: 16px;
  }

  .footer-reservation {
    inline-size: 138px;
  }

  .sound-control {
    inline-size: 155px;
  }

  .location-line {
    font-size: 13.5px;
  }

  .elevation {
    display: inline;
    margin-inline-end: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep content visible if optional reveal effects are added. */
  .hero-art,
  .hero-headline,
  .intro,
  .news-track {
    animation: none !important;
    opacity: 1 !important;
    mask-image: none !important;
    clip-path: none !important;
  }

  .brand,
  a,
  button {
    transition: none !important;
  }
}
```

Use `.feature` for the standard media-and-copy relationship. For Sounds, place its mobile heading before the media and its desktop heading inside the copy column, ensuring the inactive duplicate is hidden from both layout and accessibility exposure. The CSS's image ratio approximates the visible lounge photo; choose other crops from the actual supplied assets rather than imposing it on every photograph.

The header uses explicit black in this static adaptation. If it must cross dark imagery, provide an intentional contrasting state. The original compositing mechanism was not recovered.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: #ecded4;
  --color-ink: #2f201b;
  --color-charcoal: #1f1f1f;
  --color-graphic: #000000;

  --font-ui: 'Instrument Sans', 'IBM Plex Sans JP', sans-serif;
  --font-footer: 'IBM Plex Sans JP', sans-serif;

  --text-body: var(--text-body);
  --text-chapter: var(--text-section);
  --text-feature-title: var(--text-feature);
  --text-introduction: var(--text-intro);

  --spacing-page: var(--page-gutter);
  --spacing-chapter: var(--section-pad);
  --spacing-room-gap: 23px;

  --radius-chapter: var(--radius-section);
  --radius-photo: var(--radius-media);
}
```

For an actual Tailwind integration, avoid defining a theme token with a self-reference. Map the body size through a distinct alias, for example replace the body line above with `--text-copy: var(--text-body);` and use `text-copy`.

## Sources & Evidence

- [Hotel URO — current homepage](https://hotel-uro.jp/): original and final URL in the supplied browser observation, HTTP `200`, page title `Hotel URO｜Nagasaki`.
- **Capture date:** September 12, 2026. Original-page evidence recorded at `2026-09-12T14:48:04.264Z`, equivalent to `23:48:04.264 JST`. Visible capture clocks range from approximately `23:47:57` to `23:48:03`.
- **Desktop evidence:** three supplied 1440 × 1000 captures showing the opening, lounge-to-Sounds transition, and footer; rendered DOM text, links, element bounds, and computed styles at that viewport. Document height approximately `7801.19px`.
- **Mobile evidence:** two supplied 390 × 844 captures showing the incomplete opening and footer; rendered DOM text, links, element bounds, and computed styles at that viewport. Document height approximately `7575.73px`.
- **Observed state changes:** persistent corner controls across scroll positions, a compact header in scrolled desktop captures, advancing clock text, changing announcement clipping, and decreasing desktop elevation readouts.
- **Inspection limits:** no new browsing or commands were performed for this reference. Menu opening, FAQ expansion, room navigation, sound playback, reservation checkout, map interaction, hover, keyboard focus, and reduced-motion behavior were not exercised. Asset paths, graphical font names, full animation keyframes, and JavaScript timelines were not supplied.
- **Capture limitations:** readiness checks used finite waiting limits and temporarily paused perpetual animations. SharedWorkers and service workers were disabled. Delayed content and semantic completeness are not guaranteed, particularly for the visibly incomplete mobile hero.

This reference describes the current homepage represented by those captures and rendered measurements. Numerical estimates and implementation recommendations are identified separately from measured original-page values.