# A Lighthouse Called Kanata — Style Reference

> Contemporary art presented through darkness, architectural scale, and fine serif lettering.

**Website / original URL:** [lighthouse-kanata.com](https://lighthouse-kanata.com/)
**Final URL:** [https://lighthouse-kanata.com/](https://lighthouse-kanata.com/)
**Theme:** black canvas with white foreground text and muted gray supporting information.
**Inspected:** October 5, 2026, 06:33 JST; supplied retrieval timestamp: October 4, 2026, 21:33:03.215 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in reported CSS pixels.
**Scope:** the current Japanese gallery homepage. Visual evidence covers the exhibition hero, an additional angular artwork state, and the footer. Rendered DOM and computed styles also describe AboutUs, Artists, Works, Exhibitions, News, and Contact Us. The middle sections are not fully documented by screenshots. Linked detail pages were not inspected.

A Lighthouse Called Kanata uses the black page as a setting for art rather than as a decorative theme. The opening photograph fills the screen with concrete, glass, warm stone, and illuminated artworks. Small identity and navigation elements occupy the perimeter, leaving the center to a restrained exhibition announcement. The desktop footer returns to almost uninterrupted black, with widely separated columns and low-emphasis gray text.

The typography changes scale dramatically across the homepage. Navigation remains small and tracked, while section headings reach a measured 153px on desktop. Cormorant Garamond and a Japanese Mincho family supply the fine strokes and literary character. Circular outlines, thin rules, and a triangular lighthouse mark provide the interface geometry. Color comes primarily from the photographed architecture and artworks.

This is a gallery homepage with artist, collection, exhibition, news, and contact destinations. Its structure should retain that breadth when reused.

## How to Read This Reference

- **Measured values** come from the supplied rendered element rectangles and computed-style fields. They describe the captured state, including any transforms affecting bounding boxes.
- **Visual estimates** come from the supplied current-page screenshots. Hero text sizes, circular control diameters, and hairline opacity were not individually exposed in the computed-style sample.
- **Recommendations** describe a new implementation. The CSS breakpoint, accessible control sizing, image scrim, and intermediate responsive interpolation below are recommendations.
- **Named tokens** are descriptive aliases. The supplied custom-property extraction was empty; these are not claimed to be original CSS variables.
- **Font evidence** identifies declared computed families and weights. Font files, loading success, and the exact face used for each glyph were not separately recorded.
- **DOM text is not equivalent to visible text.** Several headings appear twice in the extraction, multiple slide links share coordinates, and some items extend outside the viewport. Do not reproduce those raw results as a static layout.
- **Inherited sizes need context.** Many outer links report 10px because they inherit the body size. Their child titles can be much larger; the outer link value does not establish the size of every label inside it.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Gallery Black | `#000000` | `--gallery-bg` | Measured body and footer background; the principal canvas |
| Foreground White | `#ffffff` | `--gallery-ink` | Measured body, headings, hero link wrappers, and header links |
| Supporting Gray | `#909090` | `--gallery-muted` | Measured footer navigation, social links, map link, telephone link, and privacy link |
| Fine White Outline | `rgba(255,255,255,0.30)` | `--gallery-line` | Recommended approximation for the faint circles and rules visible in screenshots; original opacity is unknown |

The footer's measured gray is a computed color, not a guarantee that every captured pixel equals `#909090`. Antialiasing, opacity, and compositing can change the final appearance; those additional values were not supplied.

There is no evidenced interface accent color. Warm brown stone, pale pink painting, and the green, cream, blue, and red of the floral artwork belong to the images. Keep those colors content-dependent rather than assigning them to navigation or action buttons.

The evidence establishes one dark presentation. No alternate theme or theme selector was inspected.

## Tokens — Typography

### Cormorant Garamond — English Display and Navigation

- **Measured family declaration:** `cormorant-garamond, yu-mincho-pr6n, sans-serif`.
- **Measured large-heading weight:** `100`.
- **Measured navigation and text-link weight:** `400`.
- **Character:** narrow, high-contrast serif forms with fine strokes; uppercase utility text and much larger mixed-case section headings.
- **Role:** connects the gallery's navigation, exhibition announcements, section titles, and footer.

The computed weight of 100 is an observed CSS request. It does not establish that a distinct 100-weight font file was delivered.

### Japanese Mincho — Exhibition and Visit Information

The main stack includes `yu-mincho-pr6n`. The footer map and telephone links explicitly report `yu-mincho-pr6n, sans-serif`.

Japanese exhibition text appears more compact than the English display heading. Footer visit information uses small type and generous line separation. Preserve the contrast between the large English navigation language and the quieter Japanese information without reducing the latter to unreadable decoration.

### Measured Type Scale

Sizes and tracking below are computed values, except where a row explicitly says otherwise.

| Role | Desktop | Mobile | Weight / tracking |
| --- | --- | --- | --- |
| Root font size | 10px | 10px | Root declaration; not the universal reading size |
| Body default | 10px / 20px | 10px / 20px | 400 |
| Main section heading | 153px / 153px | 75px / 75px | 100; `-0.03em` |
| Art Fairs heading | 108px / 108px | 50px / 50px | 100; `-0.02em` |
| Exhibitions/Projects heading | 108px / 97.2px | 50px / 45px | 100; normal tracking |
| View All Artists / Works | 46px / 92px | 23px / 46px | 400; normal desktop tracking, `0.05em` mobile |
| Read More / smaller View All | 24px / 48px | 16px / 32px | 400; `0.05em` desktop, `0.10em` mobile |
| Header navigation | 14px / 30.8px | Not visibly expanded | 400; `0.08em` |
| Header En link | 14px / 14px | 14px / 14px | 400; normal tracking |
| Footer navigation | 24px / 36px | 16px / 28.8px | 400; `0.12em` desktop, `0.03em` mobile |
| Footer social links | 12px / 24px | 12px / 19.2px | 400; `0.20em` |
| Footer Google MAP link | 12px / 24px | 12px / 24px | 400; 2px tracking |
| Footer telephone link | 12px / 24px | 12px / 19.8px | 400; 2px desktop, 0.6px mobile tracking |
| Footer En link | 14px / 28px | 12px / 24px | 400; 2px tracking |
| Privacy Policy | 12px / 24px | 10px / 20px | 400; 2.4px desktop, normal mobile tracking |

### Hero Type Estimates

The hero's child text styles were not included in the element sample. Use these as starting points, not measured source declarations:

| Role | Desktop estimate | Mobile estimate | Treatment |
| --- | --- | --- | --- |
| EXHIBITIONS | Approximately 60px | Approximately 35px | Regular-looking serif capitals, moderate tracking |
| Exhibition name | Approximately 20px | Approximately 14px | Centered Japanese title |
| Exhibition dates | Approximately 16px | Approximately 12px | Widely tracked Latin text and numerals |
| Slide number above heading | Approximately 24px | Approximately 14px | Small centered index |

The measured desktop hero link bounds are about 400 × 224px; mobile bounds are about 233 × 127px. These are link rectangles, not independently measured heading dimensions.

## Tokens — Spacing & Shapes

**Spacing character:** sparse perimeter controls, substantial section-specific vertical gaps, and large typography. The evidence does not establish a universal spacing unit.

### Measured Spacing

| Use | Desktop | Mobile | Interpretation |
| --- | --- | --- | --- |
| Header brand position | x 100px, y 95px | x 28px, y 36px | Measured heading-container origin |
| Header brand container | 47.5 × 48.5px | 26.5 × 30.125px | Container dimensions; not an intrinsic asset ratio |
| Main exhibition content width | 1200px | 340px | Shared reported link width within exhibition groups |
| Main exhibition side inset | 120px for unshifted items | 25px for unshifted items | Other items have offset/transformed bounds |
| AboutUs top padding | 553px | 157px | Deliberate opening space after the hero |
| Artists top padding | 142px | 151px | Does not scale proportionally with width |
| Works top padding | 302px | 188px | Section-specific pacing |
| Exhibitions top padding | 371px | 190px | Section-specific pacing |
| News top padding | 220px | 183px | Section-specific pacing |
| Footer top padding | 100px | 50px | Measured footer declaration |
| Footer height | 887px | Approximately 717.33px | Measured element height in the recorded state |

At 1440px, a 100px outer inset is approximately 6.94% of the viewport width. At 390px, the 25–28px margins occupy approximately 6.4–7.2%. This supports a similar proportional edge rhythm at the two inspected sizes, but it does not establish a source `vw` formula.

### Shapes and Rules

| Element | Appearance | Evidence level |
| --- | --- | --- |
| Menu control | Thin circular outline containing a small dot matrix | Screenshot observation |
| Menu circle | Approximately 35–36px on both viewports | Visual estimate |
| Hero arrow and scroll circles | Approximately 35–36px desktop, 26–28px mobile | Visual estimate |
| Pagination line | Approximately 116px desktop, 78px mobile | Visual estimate |
| Fine outlines | Approximately 1px, subdued white | Visual estimate |
| Main content wrappers | Square geometry; sampled radius 0 | Computed sample |
| Angular artwork mask | Large straight diagonal boundaries | Additional desktop capture |

The circle is a small control motif, not the basis of a rounded-card system. The screenshots establish no general shadow or elevated-panel treatment.

## Components

### Persistent Utility Frame

**Role:** identity, menu access, language selection, and desktop section navigation.

The white triangular lighthouse mark sits at the upper left. At the upper right, `MENU` sits beside a fine outlined circle containing a small matrix of dots. `Ja / En` appears beneath it. The measured `En` destination is `/en/`.

A right-aligned list contains HOME, ABOUT US, ARTISTS, WORKS, EXHIBITIONS, NEWS, and CONTACT. It is visible in the additional desktop artwork capture and present in the desktop DOM. It is not visible in the first desktop hero capture. The supplied evidence does not record which action or timing changed its visibility.

At 390px, the visible header retains the small logo, menu control, and language links. The expanded link list is absent from the visible capture and rendered text extraction. Its opened mobile state was not supplied.

The menu and language controls remain visible in the footer captures. The exact positioning mechanism was not extracted; fixed positioning is a practical implementation choice, not a measured declaration.

### Full-Screen Exhibition Hero

**Role:** announce an exhibition and provide a direct link to its detail page.

The first screen is occupied by a gallery-architecture photograph. A large concrete overhang creates a dark upper field; black frames and glass divide illuminated stone interiors below. The artwork on the right provides pale pink color without becoming an interface accent.

The text group is centered horizontally and contains:

1. The index `01`.
2. The large uppercase category `EXHIBITIONS`.
3. The title `移転1周年記念展 アルス・ロンガ`.
4. The date `2026 10/14 (Wed) – 30 (Fri)`.

The entire recorded text group links to `/exhibitions/ars-longa-vita-brevis/`.

On desktop, its measured rectangle begins at x 519.90, y 375.5 and ends near y 599.5. Its center is therefore at approximately 48.75% of viewport height. On mobile, the corresponding rectangle begins at x 78.27, y 251.44 and ends near y 378.44: its center is approximately 37.3% of viewport height.

The mobile layout deliberately moves the text above the screen midpoint. It also crops the architecture into a narrow vertical view: the glazing and stone remain prominent, while the painting visible on the desktop right edge is outside the shown crop. Cover-style image fitting is a reasonable implementation, but `object-fit` itself was not measured.

### Exhibition Pagination

**Role:** communicate the selected exhibition and provide directional controls.

The visible anatomy is a left circular arrow, current two-digit index, fine horizontal line, total count `02`, and a right circular arrow. The desktop group sits near y 890; the mobile group sits near y 606, independently of the bottom social and scroll controls.

The additional desktop frame shows the current counter at `02`. The DOM contains two exhibition destinations, including `/exhibitions/scents-infused-ayane-mikagi-solo-exhibition/`.

This supports a two-item exhibition presentation. It does not establish autoplay, swipe support, drag behavior, looping, arrow-click results, or whether the line is an animated progress indicator.

### Angular Artwork State

**Role:** an observed alternate visual state within the opening presentation.

The second desktop capture exposes a floral painting through large triangular regions. A broad black polygon covers the upper-right portion of the screen, with a strong diagonal descending across the artwork. Another diagonal boundary crosses the lower image. The right-side navigation is visible against black.

The angular cuts visually echo the triangular identity mark. However, a still frame cannot establish whether this is a complete composition, a transition frame, or a scroll-dependent state. Its motion mechanism, duration, and easing are unverified. Preserve it as evidence of angular image masking without making the captured mask permanently obscure all hero content.

### Social Links and Scroll Cues

**Role:** peripheral navigation without competing with the exhibition.

Four small icons sit at the lower left: Instagram, Facebook, WeChat, and YouTube. Their recorded link widths are approximately 16–19px. On desktop the first anchor begins at x 101, y 882; on mobile it begins at x 25, y 779. Inline anchor rectangles do not establish the complete clickable area.

`SCROLL DOWN` sits at the lower right beside a thin circle. In the footer capture, a vertical `TOP PAGE` label accompanies the corresponding circular motif. These labels indicate intended navigation, but their activated scroll behavior was not recorded.

### Large Editorial Section Heading

**Role:** establish the next gallery subject through typography and space.

AboutUs, Artists, Works, Exhibitions, News, and Contact Us use the same measured 153px desktop / 75px mobile scale, weight 100, unit line height, and `-0.03em` tracking.

The captured desktop positions vary substantially: AboutUs begins near x 123, Artists near x 512, Works near x 172, and News near x 1045. Exhibitions has a negative reported x position. These are snapshot coordinates, potentially affected by staged positioning or transforms; they should not become hardcoded final coordinates in a new layout.

Most mobile headings begin near x 22–26, while News remains right-positioned at x 214. The DOM repeats several heading strings. That may support layered effects, but the screenshot evidence does not establish that two complete words should be visible simultaneously. Use one semantic heading and hide any decorative duplicate from assistive technology.

### AboutUs Introduction

**Role:** introduce the gallery's purpose before the artist and work selections.

The rendered structure contains a large AboutUs heading, a four-line Japanese statement, a `Read More` link, and repeated `A LIGHTHOUSE CALLED KANATA` text.

The section starts immediately after the first viewport: y 1000 on desktop and y 844 on mobile. Its substantial top padding delays the heading and creates a pause after the hero. The `Read More` anchor begins at x 782 on desktop and x 256 on mobile, giving the action a rightward emphasis.

A moving marquee is not verified by the repeated brand text alone. The middle-section imagery and final visual overlap were not supplied.

### Artists Selection

**Role:** introduce five represented artists with direct profile links.

Each recorded entry combines a two-digit index, English name, and Japanese name. The entries are Ken Mihara, Sueharu Fukami, Niyoko Ikuta, Takafumi Asakura, and Satoru Ozaki. The mobile text extraction breaks their English names over separate lines.

The entry anchors have a measured one-second transform transition. Their rectangles vary in size and extend beyond their section or viewport. This indicates that static bounding boxes are insufficient to reconstruct the intended presentation.

A large `View All Artists` link provides a stable collection-level destination. Preserve the numbered bilingual hierarchy; the precise relationship between artwork, artist labels, hovering, and movement requires further evidence.

### Works Selection

**Role:** provide direct access to individual artworks and the full collection.

Three work links are present, each containing a title with year and an artist name. Examples include `森の文 (2025年)` by `尾崎悟` and `Enignum Forma – Reflections I (2025年)` by Joseph Walsh.

All three desktop link wrappers report the same x position and width, approximately x 441 and 558px. Mobile bounds spread across the horizontal axis, with later entries extending outside the viewport. These measurements support a staged presentation but do not establish a conventional three-column grid or verified carousel gesture.

The collection action uses the same 46px desktop / 23px mobile scale as the Artists action. Actual artwork proportions, image assets, and caption child styles are not available in the supplied sample.

### Exhibition Groups

**Role:** distinguish international art-fair participation from gallery exhibitions and projects.

The hierarchy is:

- A large Exhibitions section heading.
- An Art Fairs subheading, category-specific `View All`, and three linked records.
- An Exhibitions/Projects subheading, its own `View All`, and three linked records.

Each record contains a status, city, title, and date range. The supplied statuses include PAST, CURRENT, and UPCOMING. These are rendered source labels; their correctness relative to the inspection date was not independently established.

The category links carry explicit query parameters for art fairs and exhibitions/projects. Retain those distinct browsing destinations in an implementation.

The measured subgroup headings are 108px on desktop and 50px on mobile. Exhibitions/Projects uses a tighter 0.9 line height for its two-line label. Recorded entry wrappers are 1200px wide on desktop and 340px on mobile, with varying offsets and heights. Do not treat these large inline bounds as confirmed image sizes.

### News Selection

**Role:** present press coverage and operational announcements.

Three linked records contain a date, Japanese title, and `NEWS` category text. The extracted desktop rectangles begin at progressively greater x and y positions, with y offsets of 100px between the first three entries. Mobile entries alternate between a left position near x 27 and a right position near x 218.

These measurements suggest a staggered composition. The middle-section screenshots needed to confirm image treatment, separators, and final card boundaries were not supplied. A new implementation can retain the staggered rhythm while ensuring reading order follows the DOM.

### Contact Us Invitation

**Role:** provide a prominent route to the contact page.

The section contains a centered `Contact Us` heading using the main display scale. Its measured width is approximately 632.5px on desktop and 310.1px on mobile. The recorded section height is 752px desktop and 352px mobile.

A contact destination exists, but its sampled anchor text is empty. The exact image/link relationship and accessible name require verification. This homepage evidence does not establish an embedded contact form.

### Footer Directory and Visit Information

**Role:** consolidate navigation, social accounts, gallery access, language choice, and legal information.

The black footer is directly identified by the rendered DOM and is visually documented at both viewports.

On desktop, the three principal x positions are:

- Brand mark: x 100.
- Navigation and social links: x 424.
- Address, opening information, and language: x 968.

The larger footer logo has a recorded link width of 64px. Navigation uses 24px serif capitals with a 36px line height and 2.88px tracking. A separate SNS block beneath it lists Instagram, Facebook, Wechat, and Youtube in much smaller, more widely tracked type.

The visit column contains the postal address, an underlined `Google MAP` link with an outward arrow, opening days and hours, closure information, and the linked telephone number. The supplied address is `〒150-0001 東京都渋谷区神宮前3-5-7`. The map destination is `https://g.page/lighthousekanata?share`; the telephone destination is `tel:+81-3-5411-2900`.

On mobile, the logo moves into a row above the information columns and its recorded link width becomes 46px. Navigation begins at x 26 and visit information at x 195. The layout retains two columns rather than collapsing everything into one list. Footer navigation decreases to 16px, its tracking tightens to 0.48px, and opening information wraps onto additional lines.

The bottom line contains `© a Division of East Meets West, Inc.` and Privacy Policy. The copyright wraps on mobile. The footer has generous unused black space and a vertical top-page cue at the far right.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Element | Computed transition | What is established |
| --- | --- | --- |
| Header brand heading | `opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1)` | A one-second opacity transition is declared |
| Language links | `opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)` | A short opacity transition is declared |
| Artists heading | `opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)` | A half-second opacity transition is declared |
| Artist entry links | `transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)` | A one-second transform transition is declared |
| Footer links | `color 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)` | A brief color transition is declared |

The target values and activation triggers were not supplied. For example, the footer declaration does not by itself prove the hover color.

### Visual and Behavioral Limits

- Two current desktop hero states show different imagery, counter values, navigation visibility, and angular masking. Their exact transition sequence is unverified.
- The capture process includes scrolling, and the supplied images document the hero and footer. It does not provide activated results for MENU, pagination arrows, SCROLL DOWN, or TOP PAGE.
- Many sampled elements report `animation: none`. This does not exclude JavaScript-driven transforms, animations on unsampled children, or effects outside the extracted properties.
- A computed transition summarized as `all` does not establish a positive animation duration.
- Autoplay interval, pause behavior, touch gestures, scroll easing, audio, and reduced-motion behavior are unknown.

For an adaptation, use the evidenced opacity, transform, and color durations as a restrained starting vocabulary. Any new image wipe or automatic carousel should have explicitly chosen behavior and an accessible static alternative.

## Surfaces

| Layer | Appearance | Purpose and certainty |
| --- | --- | --- |
| Page canvas | Solid black | Measured body background |
| Hero media | Full-bleed gallery photography or artwork | Visually observed |
| Hero lettering | White directly over imagery | Visually observed; wrappers compute white |
| Utility controls | Fine circles and small text | Visually observed; exact outline opacity unknown |
| Angular covering regions | Opaque-looking black polygons | Visible in one additional desktop state |
| Editorial sections | White text over the black body canvas | Supported by computed styles; complete image composition unverified |
| Footer | Black with muted gray information | Both measured and visually observed |

The interface obtains separation from space, scale, image boundaries, and fine outlines. The supplied views do not establish tinted panels, glass blur, filled promotional buttons, or a general elevation system.

## Imagery

The current hero combines architecture and art. The first photograph is composed around a broad concrete ceiling, a deeply shadowed horizontal band, repeated black window frames, stone surfaces, and softly illuminated sculptures and painting. Its strong horizontal and vertical structure contrasts with the fine serif lettering.

The additional artwork frame uses dense floral imagery with pale petals, dark foliage, small saturated colors, and painterly texture. The image retains its color; the surrounding black controls its visual weight. The angular covering shapes reveal it selectively.

The mobile architecture view is a crop with its own composition, not a scaled-down full desktop image. Keep enough architectural detail to identify the setting while protecting the title's dark reading area.

### Observed Asset References

The supplied evidence does not expose image `src`, background-image URLs, logo filenames, or font-file paths. Do not invent asset paths.

| Asset | Observed evidence | Reuse guidance |
| --- | --- | --- |
| Lighthouse identity mark | Small white triangular mark in header and footer | Use the authorized identity asset; its internal details are not reproduced by a generic triangle |
| Gallery architecture photograph | First desktop and mobile hero captures | Use an appropriate licensed image with responsive cropping |
| Floral artwork | Additional desktop hero state | Preserve painterly texture and content color |
| Social symbols | Four compact symbols at the lower left | Use recognizable brand assets with accessible link names |
| Middle-section artwork | Section and link data only | Verify assets and proportions before prescribing image crops |

Use normal photographic rendering. The evidence does not support pixelation, duotone processing, or uniform desaturation of all artworks.

## Layout & Responsive Behavior

### Observed Endpoint Changes

| Feature | 1440 × 1000 | 390 × 844 |
| --- | --- | --- |
| Opening section | Occupies first 1000px | Occupies first 844px |
| Hero text center | Approximately 48.75% of height | Approximately 37.3% of height |
| Main section heading | 153px | 75px |
| Exhibition subgroup heading | 108px | 50px |
| Header brand container width | 47.5px | 26.5px |
| Expanded header links | Visible in one supplied desktop state | Not visible in supplied mobile states |
| Pagination center | Approximately y 890 | Approximately y 606 |
| Social icon anchor y | 882px | 779px |
| Footer navigation | Central column, 24px | Left column, 16px |
| Footer visit column | x 968 | x 195 |
| Footer brand | Left of navigation | Above navigation and visit columns |

The mobile hero separates the pagination from the bottom utilities. Its higher text position and mid-lower pager are substantial layout changes, not uniform scaling.

The footer preserves a directory-like two-column arrangement on mobile. Compact information, careful wrapping, and reduced tracking allow the address and navigation to coexist. A production implementation should also test narrower screens and larger text settings; only the two listed widths are evidenced.

### Scroll and Measurement Caveats

The desktop report gives a document height of 1000px and zero-height HTML/body rectangles while the main element extends to approximately 12,885px. The mobile document reports 12,514px while the main element measures approximately 9,513.55px. These values cannot all be interpreted as ordinary static document length.

The mismatch is consistent with a managed or transformed layout, but the scrolling implementation was not supplied. Do not infer a specific library or copy these totals into fixed-height containers. The Quick Start uses native document flow and does not reconstruct the original scroll engine.

The actual media-query breakpoint and intermediate interpolation rules are unknown. The CSS below uses 48rem as a recommended adaptation breakpoint.

## Do’s and Don’ts

### Do

- Keep black, white, and measured supporting gray as the interface palette.
- Let the architecture and artworks provide color and visual density.
- Preserve the small perimeter controls around a large, uninterrupted hero image.
- Use the evidenced Cormorant Garamond and Japanese Mincho family declarations when the appropriate font licenses and files are available.
- Retain the contrast between tiny tracked utilities and very large section headings.
- Keep exhibition category, title, dates, and index in a clear hierarchy.
- Adjust the hero crop, text height, and pager position separately for mobile.
- Preserve the footer's desktop column spacing and mobile two-column directory.
- Treat transformed bounds and duplicate DOM text as inspection evidence requiring interpretation.
- Keep gallery, artist, artwork, exhibition, news, and contact navigation distinct.

### Don't

- Don't replace the gallery structure with a generic conversion funnel and repeated filled buttons.
- Don't turn supporting image colors into an invented brand palette.
- Don't apply rounded cards, heavy outlines, or shadows throughout the page.
- Don't replace all typography with a modern sans-serif.
- Don't use the 10px inherited link-wrapper size for every child title.
- Don't render duplicate extracted headings as repeated visible content.
- Don't hardcode negative or offscreen snapshot coordinates as permanent layout rules.
- Don't describe the angular frame as a verified animation sequence or assign it an invented duration.
- Don't assume carousel autoplay, menu behavior, or hover destinations were tested.
- Don't force the full desktop photograph into a phone without revisiting its crop.

## Recommended Implementation Additions

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

- Use semantic links for destinations and buttons for menu, pagination, and scrolling actions. Give every icon-only control an accessible name.
- If MENU opens an overlay, implement `aria-expanded`, appropriate focus handling, Escape dismissal, and an accessible close action. The original opened state remains unverified.
- Enlarge small controls to approximately 44px targets where space permits. Keep neighboring targets from overlapping.
- If slides advance automatically, provide pause behavior, avoid unexpected focus changes, and keep inactive slides out of the keyboard sequence.
- Provide visible focus indicators and verify text contrast over each image crop. A subtle local scrim is an implementation option, not a measured source effect.
- Keep essential visit information readable under browser zoom and text enlargement; the original's smallest utility type is not a required accessibility target.
- Honor reduced motion with static image changes and native scrolling. Do not leave content hidden when animation is disabled.
- Give meaningful artwork images useful alternatives. Mark decorative duplicates and purely ornamental masks appropriately.
- Use responsive image sources and intentional focal points. Prioritize the initial hero asset and defer lower-page media without hiding textual navigation.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and footer: `#000000`.
- Primary text and identity: `#ffffff`.
- Supporting footer links: `#909090`.
- Fine rules and circles: subdued white; `rgba(255,255,255,0.30)` is an adaptation estimate.
- Image colors: retain the individual artwork and architectural palette.
- Primary destination treatment: a text-led link or exhibition announcement, with no evidenced filled brand-color button.

### Overall Prompt

“Create a contemporary-art gallery homepage inspired by the current A Lighthouse Called Kanata presentation. Use a black canvas, white Cormorant Garamond-style English typography, Japanese Mincho text, and muted gray footer information. Fill the opening viewport with a gallery-architecture photograph, a tiny triangular identity mark at upper left, and MENU plus a circular dot control and Ja / En at upper right. Center an exhibition index, EXHIBITIONS heading, Japanese exhibition title, and tracked date line over the image. Add fine circular pagination, compact social links, and a quiet scroll cue. Continue with oversized editorial headings for AboutUs, Artists, Works, Exhibitions, News, and Contact Us. Finish with a widely spaced directory footer. On mobile, move the hero text upward, place pagination above the bottom utilities, and retain two footer information columns. Use supplied artwork rather than invented brand imagery.”

### Example Component Prompts

1. **Exhibition hero:** “Build a viewport-height gallery photograph with a centered serif exhibition announcement. Keep header controls small and distant from the title. At 390 × 844, place the text center near 37% of screen height and the pager near 72%; crop the architecture deliberately. Hero type sizes of approximately 60px desktop and 35px mobile are starting estimates.”
2. **Editorial heading:** “Use a 153px desktop and 75px mobile serif section title with unit line height, computed weight 100, and -0.03em tracking. Give each section its own generous spacing. Maintain a single semantic heading even if decorative layers are added.”
3. **Artist selection:** “Create five numbered bilingual artist links with an English name and Japanese name, followed by a large View All Artists link. Preserve readable source order. The original has one-second transform declarations, but its final motion path is unverified; begin with an accessible static arrangement.”
4. **Footer:** “Create an all-black gallery directory with a small white logo, gray uppercase navigation, a smaller tracked SNS list, and Japanese visit details. Use desktop content origins near x 100, 424, and 968 at 1440px. On a 390px phone, move the logo above two columns beginning near x 26 and 195. Keep the copyright and privacy link small and separated by generous black space.”
5. **Angular image treatment:** “Explore a straight-edged triangular mask over a colorful floral artwork, visually related to a lighthouse mark. Treat this as an optional interpretation of a captured state. Keep content accessible and provide a static reduced-motion alternative; no original transition timing is established.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not extracted source CSS. It uses measured palette and type values, estimated hero geometry, a recommended 48rem breakpoint, and native document flow. Load appropriately licensed fonts separately; the family declarations do not load them.

Expected structure: a `.site-header` with `.header-brand` and `.header-tools`; a `.hero` containing media, an exhibition link, pager, social links, and scroll cue; ordinary editorial sections; and a `.site-footer` with the named grid areas. Wire actual menu and pagination behavior separately. Image assets are intentionally not assigned invented URLs.

```css
:root {
  /* Measured colors and family declarations */
  --gallery-bg: #000000;
  --gallery-ink: #ffffff;
  --gallery-muted: #909090;
  --font-gallery: 'cormorant-garamond', 'yu-mincho-pr6n', sans-serif;
  --font-japanese: 'yu-mincho-pr6n', sans-serif;

  /* Measured desktop typography */
  --section-size: 153px;
  --subsection-size: 108px;
  --collection-link-size: 46px;
  --text-link-size: 24px;
  --footer-nav-size: 24px;
  --footer-nav-leading: 36px;
  --footer-nav-tracking: 0.12em;

  /* Estimated hero and outline values */
  --hero-title-size: 60px;
  --gallery-line: rgba(255, 255, 255, 0.30);
  --hero-scrim: rgba(0, 0, 0, 0.12);
  --ring-size: 36px;

  /* Recommended interpolation between inspected endpoints */
  --edge: clamp(25px, 6.9444vw, 100px);
  --content-edge: 120px;

  /* Measured timing vocabulary */
  --ease-reveal: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-artists: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--gallery-ink);
  background: var(--gallery-bg);
  font-family: var(--font-gallery);
  /* Recommended readable default; source body default is 10px. */
  font-size: 16px;
  font-weight: 400;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

img {
  max-width: 100%;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  pointer-events: none;
}

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

.header-brand {
  position: absolute;
  top: 95px;
  left: var(--edge);
  width: 47.5px;
  transition: opacity 1s var(--ease-reveal);
}

.header-brand img,
.footer-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.header-tools {
  position: absolute;
  top: 96px;
  right: var(--edge);
  display: grid;
  justify-items: end;
  gap: 24px;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 27px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 14px;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.ring {
  display: grid;
  place-items: center;
  width: var(--ring-size);
  height: var(--ring-size);
  border: 1px solid var(--gallery-line);
  border-radius: 50%;
}

.menu-dots {
  width: 12px;
  height: 12px;
  background-image: radial-gradient(currentColor 0.6px, transparent 0.8px);
  background-size: 4px 4px;
}

.language-links {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  line-height: 14px;
}

.language-links a {
  text-decoration: none;
  transition: opacity 0.4s var(--ease-reveal);
}

.header-nav {
  margin-top: 20px;
  text-align: right;
  font-size: 14px;
  line-height: 30.8px;
  letter-spacing: 0.08em;
}

.header-nav ul,
.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a,
.footer-nav a {
  text-decoration: none;
}

.hero {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--gallery-bg);
}

.hero-media,
.hero-media img,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: var(--hero-focus, 50% 50%);
}

.hero-scrim {
  /* Optional adaptation; original darkening method is unknown. */
  background: var(--hero-scrim);
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 2;
  top: 48.75%;
  left: 50%;
  width: min(680px, calc(100% - 2 * var(--edge)));
  transform: translate(-50%, -50%);
  text-align: center;
  text-decoration: none;
}

.hero-index {
  display: block;
  margin-bottom: 28px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.20em;
}

.hero-title {
  margin: 0 0 30px;
  font-size: var(--hero-title-size);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.hero-exhibition {
  margin: 0;
  font-family: var(--font-japanese);
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.hero-dates {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.24em;
}

.hero-pager {
  position: absolute;
  z-index: 3;
  bottom: 88px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 34px;
  transform: translateX(-50%);
  font-size: 16px;
  letter-spacing: 0.16em;
}

.circle-button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.pager-line {
  width: 116px;
  height: 1px;
  background: var(--gallery-line);
}

.hero-socials {
  position: absolute;
  z-index: 3;
  left: var(--edge);
  bottom: 102px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero-socials img,
.hero-socials svg {
  display: block;
  width: 16px;
  height: 16px;
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  right: var(--edge);
  bottom: 92px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.editorial-section {
  padding-inline: var(--content-edge);
}

.section-heading {
  margin: 0;
  font-size: var(--section-size);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.03em;
}

.subsection-heading {
  margin: 0;
  font-size: var(--subsection-size);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.02em;
}

.subsection-heading.is-multiline {
  line-height: 0.9;
  letter-spacing: normal;
}

.text-link {
  font-size: var(--text-link-size);
  line-height: 2;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.collection-link {
  font-size: var(--collection-link-size);
  line-height: 2;
  text-decoration: none;
}

.site-footer {
  position: relative;
  padding: 100px var(--edge);
  color: var(--gallery-muted);
  background: var(--gallery-bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 26.13% 43.87% 30%;
  grid-template-areas:
    'brand nav visit'
    '. socials language'
    '. legal legal';
  row-gap: 56px;
}

.footer-brand {
  grid-area: brand;
  width: 64px;
}

.footer-nav {
  grid-area: nav;
  font-size: var(--footer-nav-size);
  line-height: var(--footer-nav-leading);
  letter-spacing: var(--footer-nav-tracking);
}

.footer-visit {
  grid-area: visit;
  min-width: 0;
  font-family: var(--font-japanese);
  font-size: 12px;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 2px;
}

.footer-visit p {
  margin: 0 0 48px;
}

.footer-socials {
  grid-area: socials;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.20em;
}

.footer-socials p {
  margin: 0 0 20px;
  letter-spacing: normal;
}

.footer-socials a {
  display: block;
  width: fit-content;
  text-decoration: none;
}

.footer-language {
  grid-area: language;
  align-self: end;
  color: var(--gallery-ink);
}

.footer-legal {
  grid-area: legal;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px 120px;
  margin-top: 180px;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.20em;
}

.site-footer a {
  transition: color 0.2s var(--ease-reveal);
}

/* Recommended feedback; the original target color is unverified. */
@media (hover: hover) {
  .site-footer a:hover {
    color: var(--gallery-ink);
  }
}

:where(a, button):focus-visible {
  outline: 2px solid var(--gallery-ink);
  outline-offset: 5px;
}

/* Recommended breakpoint, not an extracted source breakpoint. */
@media (max-width: 48rem) {
  :root {
    --edge: 26px;
    --content-edge: 25px;
    --section-size: 75px;
    --subsection-size: 50px;
    --collection-link-size: 23px;
    --text-link-size: 16px;
    --footer-nav-size: 16px;
    --footer-nav-leading: 28.8px;
    --footer-nav-tracking: 0.03em;
    --hero-title-size: 35px;
    --ring-size: 27px;
  }

  .header-brand {
    top: 36px;
    left: 28px;
    width: 26.5px;
  }

  .header-tools {
    top: 23px;
    right: 24px;
    gap: 12px;
  }

  .menu-trigger {
    gap: 10px;
    font-size: 12px;
  }

  .menu-trigger .ring {
    width: 36px;
    height: 36px;
  }

  .header-nav {
    display: none;
  }

  .hero-copy {
    top: 37.3%;
  }

  .hero-index {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .hero-title {
    margin-bottom: 12px;
  }

  .hero-exhibition {
    font-size: 14px;
    line-height: 1.8;
  }

  .hero-dates {
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .hero-pager {
    top: 71.8%;
    bottom: auto;
    gap: 12px;
    transform: translate(-50%, -50%);
    font-size: 14px;
  }

  .pager-line {
    width: 78px;
  }

  .hero-socials {
    bottom: 48px;
    gap: 16px;
  }

  .scroll-cue {
    bottom: 43px;
    gap: 14px;
    font-size: 11px;
  }

  .text-link {
    letter-spacing: 0.10em;
  }

  .collection-link {
    letter-spacing: 0.05em;
  }

  .site-footer {
    padding: 50px var(--edge) 80px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'brand brand'
      'nav visit'
      'socials language'
      'legal legal';
    row-gap: 0;
  }

  .footer-brand {
    width: 46px;
    margin-bottom: 72px;
  }

  .footer-visit {
    line-height: 19.8px;
    letter-spacing: 0.6px;
  }

  .footer-visit p {
    margin-bottom: 36px;
  }

  .footer-socials,
  .footer-language {
    margin-top: 48px;
  }

  .footer-socials {
    line-height: 19.2px;
  }

  .footer-language {
    font-size: 12px;
  }

  .footer-legal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 80px;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: normal;
  }
}

/* Recommended reduced-motion behavior for this scaffold. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .header-brand,
  .language-links a,
  .site-footer a {
    transition: none;
  }
}
```

The scaffold deliberately leaves artwork masking, artist transforms, inactive-slide management, and custom scroll behavior to a separately verified interaction layer. The larger pagination targets slightly change the original visual spacing. Small social links still need a considered hit-area treatment in the final markup.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-gallery-canvas: var(--gallery-bg);
  --color-gallery-foreground: var(--gallery-ink);
  --color-gallery-secondary: var(--gallery-muted);
  --color-gallery-outline: var(--gallery-line);

  --font-display: var(--font-gallery);
  --font-japanese-copy: var(--font-japanese);

  --text-gallery-section: var(--section-size);
  --text-gallery-subsection: var(--subsection-size);
  --text-gallery-hero: var(--hero-title-size);
  --text-gallery-collection: var(--collection-link-size);
  --text-gallery-link: var(--text-link-size);

  --spacing-gallery-edge: var(--edge);
  --spacing-gallery-content: var(--content-edge);
  --ease-gallery-reveal: var(--ease-reveal);
}
```

## Sources & Evidence

- **Inspected original and final website:** [A Lighthouse Called Kanata](https://lighthouse-kanata.com/). Both supplied URLs are identical; reported HTTP status is 200. The recorded document title is `A Lighthouse called Kanata - Contemporary Art`.
- **Capture timestamp:** `2026-10-04T21:33:03.215Z`, equivalent to October 5, 2026, 06:33:03.215 JST. This is the supplied retrieval timestamp, not a new browser visit performed for this document.
- **Desktop evidence:** 1440 × 1000 viewport, current architecture hero, additional angular floral-artwork state, footer capture, rendered text, link destinations, element rectangles, and computed styles.
- **Mobile evidence:** 390 × 844 viewport, current architecture hero and footer captures, rendered text, link destinations, element rectangles, and computed styles.
- **Inspection procedure supplied with the evidence:** at least five seconds of initial observation, bounded waits for visible image decoding and finite animation/layout stability, and traversal of intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and resumed afterward. These checks do not establish complete interaction behavior or all delayed content.
- **Limits:** no direct click, hover, drag, keyboard, or touch-result log; no source stylesheet files, font binaries, image asset URLs, or complete middle-section screenshot sequence. Custom-property extraction was empty. Child-page destinations were recorded but were not separately inspected.

This reference describes the current homepage evidence at the stated date and viewports. Measured declarations, screenshot estimates, and implementation recommendations are identified separately throughout.