# LANWAY — Style Reference

> Oversized charcoal typography crossing orange bands, with quiet controls and photographs presented like loose prints.

**Original URL:** [https://lanway.jp/](https://lanway.jp/)
**Final URL:** [https://lanway.jp/](https://lanway.jp/)
**Page title:** LANWAY Inc.
**Theme:** a light gray main canvas, a dark Founder section, and a white contact/footer area.
**Inspected:** supplied browser evidence retrieved October 2, 2026 at 01:29:23.970 JST — October 1, 2026 at 16:29:23.970 UTC.
**Viewports:** desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px.
**Scope:** the current corporate homepage: navigation, opening statement, Intro, Founder, Career, News, business and recruitment contact routes, repeated closing statement, and utility footer. Screenshots show the opening, desktop Career section, and closing areas. Founder and News details are supported by rendered DOM measurements rather than dedicated screenshots. Linked destination pages and an open menu were not inspected.

LANWAY presents its corporate story through scale and pacing. The opening “RESULT IS KING.” statement is split into two offset lines, intersected by a broad orange band that fades toward the right. Dark text sits on a pale gray canvas with localized amber glows. Thin rules, small capsules, and modest navigation keep the surrounding interface quiet enough for the typography to dominate.

The long homepage moves from digital strategy to founder perspective, recruitment, news, and two contact routes. Desktop layouts repeatedly pair large headings on the left with narrower copy on the right. Photographs introduce people and working environments through thick white frames and slight rotations. Mobile retains the same visual language while stacking the content, reducing display sizes, and preserving substantial vertical space.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM, computed styles, or custom properties. Values are CSS pixels unless stated otherwise.
- **Visual estimate** means a dimension, angle, or treatment is approximated from the supplied current-page screenshots. It is not a recovered CSS declaration.
- **Recommended** means an implementation choice for a new project. The Quick Start uses these choices where the original rules were not supplied.
- Source custom-property names are identified explicitly. Other token names are descriptive aliases.
- A computed font-family declaration establishes the requested stack. It does not independently establish which font file rendered every glyph.
- Some heading wrappers have zero measured height despite visible lettering. Their descendant or animated layout is not fully represented in the element sample. Do not reproduce those zero-height boxes as ordinary heading geometry.
- Only two responsive widths were inspected. Breakpoints, intermediate scaling formulas, and behavior at other widths remain unverified.

## Tokens — Colors

### Core Palette

| Name | Value | Source token | Role and evidence |
| --- | --- | --- | --- |
| Canvas Gray | `#f1f1ef` | `--color-gray` | Measured body background; dominant surface in the opening and Career captures |
| Charcoal | `#2d2d2d` | `--color-black` | Measured body text and Founder section background; dominant display lettering |
| Corporate Orange | `#ffa400` | `--color-corporate` | Declared brand color, visually corresponding to the opening band, logo stroke, and Intro accent |
| White | `#ffffff` | `--color-white` | Measured footer background; visually used by the thick photo frames |
| Reverse Text | `#f3efea` | `--color-text-white` | Measured Founder copy and link color |
| Warm Beige | `#d3cec4` | `--color-beige` | Measured Founder heading color |
| Translucent Charcoal | `rgba(45,45,45,.2)` | `--color-black-20` | Declared low-contrast color; a useful reproduction token for the visible fine rules and capsule outlines, whose individual border colors were not sampled |

The orange has two distinct visual roles. The hero uses a substantial horizontal field behind the headline, while small labels and the wordmark use much narrower accents. The footer repeats the horizontal motif as a thin stripe running behind large text. Preserve that difference in thickness.

### Other Declared Colors

| Source token | Value | Evidence limit |
| --- | --- | --- |
| `--color-dark-gray` | `#3f3c39` | Declared; visually close to the compact dark menu capsule, but that capsule's painted background was not independently sampled |
| `--color-bg-gray` | `#b0b0b0` | Declared; a specific visible use was not established |
| `--color-middle-gray` | `#999999` | Declared; a specific visible use was not established |
| `--color-white-15` | `hsla(0,0%,100%,.15)` | Declared; potential translucent treatment, with no verified element assignment |
| `--color-white-20` | `hsla(0,0%,100%,.2)` | Declared; potential translucent treatment, with no verified element assignment |
| `--color-attention` | `#ea3f3f` | Declared; no attention or error state was shown |

Do not promote every declared utility color into a visible homepage accent.

### Gradients and Atmospheric Color

The opening screenshot shows a warm glow concentrated along the left edge. The Career screenshot also shows amber near the outer edges, particularly toward the lower right. These fields are soft and uneven enough to avoid looking like a simple full-page diagonal gradient.

The hero band has a long saturated orange portion before fading into the canvas on the right. Its estimated desktop bounds are `y ≈ 321–467px`; mobile bounds are `y ≈ 182–336px`. These are screenshot measurements, not recovered gradient stops.

**Recommended approximation:** combine a restrained amber radial gradient with a separate horizontal orange-to-transparent band. Exact opacity, texture assets, blend modes, and gradient stops were not supplied. Keep the white footer visually clean except for its orange statement stripe.

## Tokens — Typography

### TWK Everett — Large English Headings

- **Measured stack:** `'TWK Everett', 'Noto Sans JP', sans-serif`.
- **Measured weight:** `500`.
- **Measured roles:** Founder, Career, News, contact headings, news category labels, and footer utility links.
- **Large heading rhythm:** `line-height: .92` and `letter-spacing: -.04em` at both inspected widths.
- **Character:** compact, tightly spaced, and forceful without requiring an extreme weight.

The hero lettering has the same broad visual character, but its painted text descendants were not included in the font sample. Using this display stack for the hero is a sensible adaptation, not a separately verified hero declaration.

### Tazugane Gothic — Japanese Emphasis

- **Measured stack:** `'Tazugane Gothic', sans-serif`.
- **Measured weight:** `700`.
- **Measured roles:** the opening Japanese slogan, Founder statement, and news headlines.
- **Measured rhythm:** `line-height: 1.5`; tracking generally equals `.04em` for these sampled elements.

This face gives Japanese statements a firm, readable presence alongside the much larger English headings. It does not compete with the display typography through excessive size.

### Noto Sans JP — Base Text and Wrappers

- **Measured stack:** `'Noto Sans JP', sans-serif`.
- **Body defaults at both widths:** `16px`, weight `400`, `30.4px` line height, `0.64px` letter spacing.
- **Measured footer body override:** desktop `16px / 28px`; mobile `12px / 21px`.
- **Important:** a sampled link wrapper can inherit these defaults while its visible child label uses another treatment. Do not treat every wrapper's font size as a measurement of its painted lettering.

The HTML root's browser-serif default is not evidence of a visible serif design system.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Status |
| --- | --- | --- | --- | --- |
| Founder, Career, News headings | `144px / 132.48px` | `52px / 47.84px` | `500`, `-.04em` | Measured |
| Contact headings | `48px / 44.16px` | `40px / 36.8px` | `500`, `-.04em` | Measured |
| Founder statement | `24px / 36px` | `18px / 27px` | `700`, `.04em` | Measured |
| Hero Japanese slogan | `18px / 27px` | `14px / 21px` | `700`, `.04em` | Measured |
| News headline | `18px / 27px` | `16px / 24px` | `700`, `.04em` | Measured |
| Body default | `16px / 30.4px` | `16px / 30.4px` | `400`, `0.64px` | Measured; individual descendants may override |
| Contact paragraph | `16px / 28px` | `12px / 21px` | `400`, `0.64px` | Measured |
| Founder attribution wrapper | `16px / 30.4px` | `12px / 22.8px` | `400`, `0.64px` | Measured |
| News category | `12px / 11.04px` | `10px / 9.2px` | `500`, `-.04em` | Measured; centered inside a taller capsule |
| Security policy / Page Top | `14px / 12.88px` | `10px / 9.2px` | `500`, `-.04em` | Measured; controls include vertical padding |
| Hero English lettering | Approximately `144–152px` | Approximately `60px` | Tight tracking | Visual estimate |
| Intro Japanese heading | Approximately `30–32px` | Approximately `20px` | Bold | Visual estimate |
| Intro eyebrow | Approximately `14px` | Approximately `10px` | Small uppercase | Visual estimate |

Keep the manual line breaks in “RESULT / IS KING.” and “WITH / BUSINESS” or “WITH / CAREER.” The composition depends on those breaks rather than arbitrary wrapping.

## Tokens — Spacing & Shapes

There is no verified global spacing-unit formula. The measured design combines large section intervals with small, precise controls.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header horizontal inset | `40px` | `27px` | Measured |
| Main content inset | Approximately `160px` | `28.078px` | Measured |
| Broad divider inset | Approximately `80px` | Approximately `27–28px` | Visual estimate |
| Intro top padding | `93px` | `40px` | Measured |
| Intro, Founder, News bottom padding | `200px` | `100px` | Measured |
| Career / News heading start from section top | `200px` | `100px` | Measured heading coordinates |
| Footer contact-area top inset | `150px` | `88px` | Measured |
| Contact heading-to-paragraph gap | `48px` | `23px` | Calculated from measured bounds |
| Contact paragraph-to-link gap | `48px` | `32px` | Calculated from measured bounds |
| Gap between stacked contact blocks | Not stacked | `64px` | Calculated from measured bounds |
| Standard line-link vertical padding | `18px` | `13px` | Measured |

The desktop main inset is consistent with one ninth of the viewport, and the mobile inset is consistent with `7.2vw`. These are ratios derived from two measurements, not confirmed source formulas.

### Border Radius and Edges

| Element | Geometry | Status |
| --- | --- | --- |
| Menu / Contact capsule | `9999px` radius | Measured |
| News category capsule | `9999px` radius | Measured |
| Scroll control wrapper | Circular, `9999px` radius | Measured |
| Arrow capsule | Very shallow rounded pill | Visible; approximately `68 × 22px` desktop and `60 × 20px` mobile |
| Photo frame | Approximately `14–18px` outer radius | Visual estimate |
| Photo frame thickness | Approximately `8–10px` | Visual estimate |
| Section and link rules | Approximately `1px` | Visual estimate |

Rounded corners belong primarily to capsules and photo frames. Large content regions remain open, without enclosing cards or pronounced shadows.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Header height | `84px` | `60px` |
| Hero below header | `568px` | `428px` |
| Hero bottom / Intro start | `y = 652px` | `y = 488px` |
| Main content width | `1120px` | `333.844px` |
| Intro heading position | `x = 720px`, width `560px` | `x = 28.078px`, width `333.844px` |
| Standard detail link | `320 × 59px` | `333.844 × 46px` |
| Scroll-control wrapper | `140 × 140px` | `96 × 96px` |
| Menu capsule | `68 × 20px` in supplied DOM | `68 × 20px` |
| Header Contact capsule | `81.5 × 20px` | Contained in the unexercised menu DOM |
| Footer contact columns | Two `480px` columns, `160px` gap | One `333.844px` column |
| Footer contact paragraph width | `400px` | `333.844px` |
| News row width | `1120px` | `333.844px` |
| News row height | `106px` for each sampled item | `140px` for four items; `116px` for the shorter final item |
| Document height | Approximately `6584.73px` | Approximately `5138.80px` |

Document heights describe the captured content and state. They should not become fixed CSS heights.

## Components

### Global Header and Compact Navigation

**Role:** identify the company and expose its main site sections.

At the desktop opening, the wordmark sits at the left of an `84px` header with `40px` horizontal padding. A fine divider runs beneath the header content. Navigation is aligned to the right: We Do, Result, Career, News, Blog, Company, and a small outlined Contact capsule. The wordmark includes a narrow orange line through the lettering.

The sampled desktop navigation links use flex layout with `20px 15px` padding and an opacity transition. Contact is a much smaller visible capsule with `16px` horizontal padding and a `9999px` radius.

Later desktop screenshots show a compact corner wordmark and a dark capsule containing horizontal menu lines at the upper right. These controls remain near the top corners across the supplied scrolled views. The Career capture shows a light wordmark, while the footer capture shows a dark one. The exact positioning rule, color-switch trigger, and scroll threshold were not supplied.

At mobile width, the opening header is `60px` high. The logo begins around `x = 27px`; the outlined MENU capsule is at `x = 295px`, `y = 19px`, measuring `68 × 20px`. The full desktop navigation is absent from the visible header.

The DOM also contains a second navigation set, Home, and Close. Their presence does not establish an open-menu appearance. Do not display both navigation sets simultaneously based on the DOM extraction alone. Menu opening, keyboard behavior, focus management, and dismissal were not exercised.

### Opening Statement

**Role:** communicate the company's central position before introducing its services.

The hero is an asymmetric typographic composition rather than an image-led banner. On desktop, the first line starts near `x = 160px`; the second starts around `x = 450px`. A full-width orange band passes behind both lines. The Japanese slogan “どこまでも、成果にこだわる。” sits to the right of the first line at measured coordinates `x = 750px`, `y = 307px`.

The hero's supporting controls are deliberately small relative to the text. The circular scroll control occupies the upper-right part of the orange band. A long interval of pale canvas follows the headline before a divider introduces Intro.

On mobile, the first line starts around `x = 28px`, and the second is offset to approximately `x = 80px`. The slogan moves below the headline, with an additional `22px` inset relative to the content edge. The orange band becomes a deeper field behind the headline and slogan. The scroll circle moves toward the lower-right edge of that band.

**Preserve:** the two-line break, second-line indentation, full-width stripe, and open space beneath the composition. A large rectangular CTA would change the hierarchy.

### Circular Scroll Control

**Role:** invite movement into the page's content.

An outer ring of curved English lettering surrounds a charcoal disk with a thin white downward arrow. The measured button wrapper is `140px` square on desktop and `96px` square on mobile. The filled center is visually about `96px` and `68px` respectively.

The desktop wrapper is located at `x = 1140px`, `y = 251px`; the mobile wrapper is at approximately `x = 265.922px`, `y = 288px`. Its DOM label is “コンテンツへスクロール”.

The ring suggests motion, but continuous rotation was not demonstrated by the still captures. A transform transition is present on the button; its triggering state and click result were not recorded.

**Recommended anatomy:** one semantic link or button, a decorative SVG text ring, a circular inner surface, and an arrow SVG. Keep the decorative ring out of the accessible name.

### Intro: Digital Strategy

**Role:** connect the bold opening claim to the company's approach.

Intro begins with a long fine divider. On desktop, its heading occupies the right half of the main content area, starting at `x = 720px`. A small orange INTRO label is followed by a short horizontal orange rule. Below it, the Japanese heading reads “生活者第一の、デジタル戦略。”

The left side contains a slightly tilted photographic print with a thick white border. The opening screenshots show a woman writing on a transparent or light-colored surface. The image appears pale and nearly monochrome in this captured state. Large white “DIGITAL STRATEGY FOR CONSUMER” lettering extends beyond the viewport behind the content; the DOM contains repeated copies of that phrase.

The section also contains a Japanese explanatory paragraph and a WE DO line link to `/wedo/`. The desktop link is `320px` wide and aligned with the right-side content. Mobile makes it the full content width.

On mobile, the label and Japanese heading come first at the standard left inset. The framed image appears below, centered and approximately `220px` wide. The decorative white lettering remains oversized and clipped at the sides. Its duplication does not independently prove a running marquee.

### Founder Section

**Role:** introduce the founder's perspective and link to an interview.

The measured section reverses the palette to a `#2d2d2d` background with `#f3efea` copy and a `#d3cec4` display heading. This dark chapter provides the strongest tonal break in the homepage.

On desktop, the Founder heading wrapper begins around `x = 563px` and extends toward the right content edge. The statement occupies a `360px` column at `x = 920px`. It uses Tazugane Gothic at `24px / 36px`, followed by “CEO / FOUNDER” and the source name “片田 武利”. A separate MORE DETAIL link points to `/career/interview01/`.

At mobile width, the heading becomes `52px`, the statement becomes `18px / 27px`, and the attribution wrapper becomes `12px`. The statement and attribution are contained in a larger link measuring approximately `333.844 × 290.797px`, with `40px` vertical padding. The separate desktop detail-link label is absent from the mobile text extraction.

No dedicated Founder screenshot or image-element measurements were supplied. Its precise imagery, crop, and relationship to any animated layers cannot be established here.

### Career Editorial Section

**Role:** make recruitment part of the company's main story.

The desktop capture shows a huge CAREER heading toward the upper left, followed by substantial open space. A bold Japanese paragraph sits in the right half of the page, beginning around `x = 720px`. A `320px` MORE DETAIL line link sits beneath it and leads to `/career/`.

A row of loosely arranged photographic prints enters the bottom of the capture. White borders, rounded corners, and alternating slight rotations create an informal composition. The visible subjects include people working, desk details, and greenery. The center portrait is larger than the partially visible neighboring frames.

The measured section heading uses `144px / .92` type on desktop and `52px / .92` on mobile. The mobile detail link expands to the full content width. A dedicated mobile Career screenshot was not supplied, so the mobile arrangement of the photographic strip remains unverified.

Do not infer carousel controls, drag behavior, automatic sliding, or parallax from the row's visual arrangement.

### Underlined Action Link

**Role:** provide a consistent, restrained route into deeper content.

This recurring component combines an uppercase label at the left, a small outlined arrow capsule at the right, and a thin rule across the full bottom edge. There is no enclosing filled button surface.

Measured standard links are `320 × 59px` on desktop, with `18px` vertical padding. Mobile links are approximately `333.844 × 46px`, with `13px` vertical padding. Footer contact links grow to the full `480px` desktop column width. The ALL NEWS link is centered within the desktop content region at `x = 560px`.

The arrow capsule is visually around `68 × 22px` on desktop and `60 × 20px` on mobile. Its arrow is slender and horizontally centered. Exact arrow asset geometry was not supplied.

Use the entire row as the link target. The arrow capsule is a visual subcomponent, not a second independent control.

### News List and Category Capsule

**Role:** expose recent company activity in a compact editorial list.

The DOM contains five linked items, each with a category, date, and Japanese headline. Categories include NEWS and PRESS RELEASE. A large NEWS heading precedes the list, and ALL NEWS follows it.

Desktop item anchors span `1120px` and measure `106px` high. The category sits at the left edge, `x = 160px`. The anchor's padded content begins `208px` farther right, and the headline begins around `x = 527.828px`. These coordinates support a three-part category/date/headline layout, though the date element's own bounds were not supplied.

The NEWS capsule measures approximately `69.172 × 22px`; PRESS RELEASE measures `126.281 × 22px`. Both use `12px` display type, `14.4px` horizontal padding, and a fully rounded radius. Headlines use `18px / 27px` bold Tazugane Gothic.

On mobile, each row uses the full `333.844px` content width with `16px` top and `28px` bottom padding. Category labels shrink to `10px` inside `20px`-high capsules. Headlines occupy a separate full-width region below the metadata, using `16px / 24px`. Four two-line headlines produce `140px` rows; the final one-line headline produces a `116px` row.

The extracted word VIEW does not establish a custom pointer or hover preview. No dedicated News screenshot or hover state was supplied. Fine row separators are a reasonable implementation recommendation, rather than a measured border declaration.

### Business and Career Contact Blocks

**Role:** separate commercial enquiries from recruitment enquiries.

The white footer begins with two equal desktop columns. Each contains a two-line display heading, a Japanese paragraph, and a full-width CONTACT line link. The left heading is “WITH / BUSINESS”; the right is “WITH / CAREER”.

At 1440px, columns start at `x = 160px` and `x = 800px`. Each is `480px` wide, with `400px` paragraph widths. Contact headings use `48px / 44.16px`; paragraphs use `16px / 28px`. The contact area starts `150px` below the footer's top.

On mobile, the columns stack in business-then-career order with a `64px` gap between the first link's bottom and the second heading. Headings remain substantial at `40px / 36.8px`; paragraphs reduce to `12px / 21px`. The top inset becomes `88px`.

The recorded destinations preserve the enquiry distinction:

- Business: `/contact/?type=business`.
- Career: `/contact/?type=entry`.

These are verified link destinations, not inspected form behaviors.

### Repeated Footer Statement

**Role:** close the page by returning to the opening proposition.

Large repeated “RESULT IS KING.” text spans beyond the viewport, crossing a much thinner orange stripe than the hero's band. The desktop capture shows more than one phrase; mobile shows a cropped portion of the phrase across the screen width. White space above and below makes this a separate closing gesture.

The desktop DOM contains three repetitions; the mobile extraction contains two. Repetition and clipping are visible. Translation speed, direction, looping behavior, and whether the text moves continuously were not established.

**Recommended implementation:** use a clipped decorative track with repeated spans, retain one accessible statement, and keep the track static unless motion is deliberately implemented and validated.

### Utility Footer

**Role:** finish the page with ownership, policy, and return navigation.

A fine rule precedes a three-part horizontal row: “© LANWAY INC.” at the left, SECURITY POLICY in the center, and PAGE TOP at the right. The policy text is visibly underlined. The row remains horizontal on the supplied mobile screenshot.

Security Policy is a link to `/security_policy/`; Page Top is a button in the DOM. Measured utility type is `14px` on desktop and `10px` on mobile. The latter two controls include `20px 10px` padding, so their interactive bounds are substantially taller than their small lettering.

The PAGE TOP action itself was not exercised. The footer independently supports the displayed company identity; it does not provide production credits.

## Tokens — Motion & Interaction

### Declared Transitions

| Element | Supplied computed declaration | What can be concluded |
| --- | --- | --- |
| Desktop navigation link | `opacity 0.2s linear` | Opacity changes are configured; the target opacity and trigger were not captured |
| Contact / Menu / Close capsule | `background-color 0.2s linear` | Background changes are configured; endpoint colors and open-state behavior remain unverified |
| Scroll-control button | `transform 0.6s cubic-bezier(0.19,1,0.22,1) 0.6s` | A delayed transform transition is configured; the actual start/end transforms were not supplied |
| Desktop body | `color 0.2s linear 0.8s` | Text-color transition with an `800ms` delay in the sampled state |
| Mobile body | `color 0.2s linear` | Text-color transition without the sampled desktop delay |
| Founder, Career, News sections | `background-color 0.2s linear` | Surface-color transitions are configured; scroll coupling is not established |
| News category capsule | `border-color 0.2s linear` | Border-color changes are configured; the hovered appearance was not supplied |

Many other sampled nodes report `animation: none` or a generic transition value of `all`. Neither establishes a meaningful animation timeline. Children, pseudo-elements, SVG, and script-driven motion may behave differently.

### Observed States and Limits

The supplied screenshots establish expanded and compact-looking header states, desktop/mobile reflow, tilted photo frames, repeated decorative text, and distinct section palettes. They do not establish the timing or mechanism that connects these states.

No menu opening, pointer hover, click result, keyboard navigation, drag operation, or form interaction was recorded. Smooth scrolling, a rotating text ring, moving photo strips, and a running footer marquee must remain unverified.

The capture process waited for document loading, sampled stability, finite animation readiness, and visible image decoding within bounded time limits. Perpetual animations were paused during readiness checks and resumed afterward. These safeguards improve the usefulness of the screenshots but do not prove that every delayed or interactive state was observed.

**Recommended motion language:** short, restrained color or opacity changes for controls; limited transform motion for decorative elements. Any added continuous motion should have reduced-motion support. Timings beyond the declarations above are new implementation choices.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Pale gray with localized amber glows | Supports the editorial story without enclosing each section |
| Hero band | Saturated orange fading toward the right | Intersects and emphasizes the opening typography |
| Founder chapter | Charcoal with warm light text and beige heading | Provides a strong tonal chapter change |
| Photo frame | Thick white edge, rounded corners, slight rotation | Makes workplace imagery feel like individual prints |
| Link row | Transparent surface with a fine bottom rule | Provides consistent navigation with little visual mass |
| Capsule | Small outlined or dark rounded shape | Contains menu labels, categories, or arrows |
| Footer | Solid white | Separates contact and utility content from the main gray canvas |
| Closing stripe | Thin orange gradient behind giant text | Recalls the opening motif at a lighter visual weight |

There is no visible general-purpose elevation system. Hierarchy comes from scale, alignment, color fields, whitespace, and fine rules.

## Imagery

Photography grounds the typography in working life. The opening image shows a person writing; the Career capture includes a seated woman, desk-related details, and plants. Use authentic people, working gestures, and office context when adapting this direction.

The defining treatment is the print-like frame: a substantial white edge, a modest rounded corner, and a rotation of roughly `3–6°`. Desktop frames appear approximately `350–400px` wide in the visible Career arrangement. The opening Intro frame is around `400px` wide on desktop and approximately `220px` on mobile. These dimensions and angles are visual estimates.

The Intro image appears washed out and nearly grayscale in the supplied opening captures, while Career imagery retains natural color. The evidence does not establish whether Intro's appearance comes from the asset, an overlay, opacity, or a transitional state. Avoid applying a universal grayscale filter to all photography.

Large white background lettering belongs to the visual layering around the images. It may be clipped by the viewport, but essential body text should remain within readable content bounds.

### Observed Asset References

No image URLs, font-file URLs, SVG source paths, or original asset dimensions were supplied. The following are visual references rather than downloadable asset references.

| Visible asset | Established appearance | Unverified details |
| --- | --- | --- |
| LANWAY wordmark | Dark or light lettering with a narrow orange crossing line | File format, alternate asset paths, and color-switch implementation |
| Intro photograph | Pale image of a person writing, inside a tilted white frame | Original color treatment, image dimensions, asset URL |
| Career photographs | People and workplace details in loosely arranged white frames | Complete image set, responsive ordering, movement behavior |
| Circular scroll graphic | Curved text, charcoal disk, thin white arrow | SVG structure, ring animation, exact lettering path |
| Link arrows | Fine right-pointing arrows inside shallow capsules | SVG or CSS implementation and exact stroke geometry |

Use authorized brand and photo assets when available. Do not invent original-site asset paths or assume that a CSS approximation reproduces the wordmark.

## Layout & Responsive Behavior

The desktop page has three useful horizontal scales: `40px` header insets, approximately `80px` broad-rule insets, and approximately `160px` main-content insets. This gives the navigation and separators a wider reach than the editorial text. Mobile brings these alignments together around `27–28px`.

Desktop Intro and Career use a left/right relationship: imagery or display headings occupy the left, while copy begins near the viewport center. Founder moves its text farther right. News uses the main content width for structured rows. The footer switches to two balanced enquiry columns.

Mobile performs an explicit reflow. It hides the full header navigation, reduces the hero, moves the slogan below the title, stacks Intro, converts news entries into taller metadata-and-headline rows, and stacks the two contact routes. Footer utilities still share one row. Large decorative statements remain clipped at the screen edges.

### Measured Section Sequence

Positions below are document coordinates from the supplied DOM snapshot.

| Region | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Hero | `84 / 568px` | `60 / 428px` |
| Intro | `652 / 980.63px` | `488 / 788.08px` |
| Founder | `1632.63 / 1173.11px` | `1276.08 / 981.91px` |
| Career | `2805.73 / 1319.22px` | `2257.98 / 769.80px` |
| News | `4124.95 / 1319.47px` | `3027.78 / 1044.83px` |
| Footer | `5444.42 / 1140.31px` | `4072.61 / 1066.19px` |

These measurements show the pacing rather than prescribing fixed heights. Founder stays relatively tall on mobile; Career compresses more substantially; the stacked contact content keeps the footer close to its desktop height.

**Recommended responsive strategy:** use a conventional root font size, fluid outer gutters, one explicit small-screen layout switch, and content-driven section heights. A `48rem` breakpoint and `1120px` content cap are practical starting points used below; neither was recovered from the source. Test intermediate widths, especially the offset hero title and crowded desktop navigation.

## Do’s and Don’ts

### Do

- Keep the pale gray, charcoal, and corporate orange as the dominant relationship.
- Preserve the two-line hero and the deliberate indentation of its second line.
- Let orange cross behind typography rather than enclosing every action in orange.
- Use tightly tracked English display headings with the measured `.92` line-height rhythm where verified.
- Pair the large English headings with compact, firm Japanese statements.
- Retain broad desktop whitespace and clear differences between header, rule, and content insets.
- Use thick white photo frames with restrained rotations and natural workplace subjects.
- Repeat the underlined action row with a small arrow capsule across sections.
- Keep business and recruitment contact routes distinct.
- Reflow mobile content deliberately while preserving large headings and decorative overflow.
- Use the dark Founder chapter and white footer to organize the long page.

### Don't

- Don't replace the editorial sections with a uniform rounded-card grid.
- Don't turn the small arrow capsules into oversized filled buttons.
- Don't use orange for long body paragraphs or every secondary label.
- Don't remove the hero's second-line offset or allow accidental headline wrapping.
- Don't apply heavy drop shadows, glass blur, or glossy surfaces to the photo frames.
- Don't assume all photographs share the Intro image's pale treatment.
- Don't reproduce zero-height heading wrappers without understanding their original descendants.
- Don't expose duplicate navigation or decorative text copies as repeated accessible content.
- Don't claim a carousel, parallax system, rotating ring, or moving marquee from still images alone.
- Don't hardcode the captured document or section heights into the new page.

## Recommended Implementation Additions

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

- Preserve the small visible capsules while providing roughly `44px` touch targets through larger button or link wrappers.
- Give the menu an explicit expanded state, a controlled panel, keyboard operation, and predictable dismissal. Manage focus if it behaves as a modal overlay.
- Keep one semantic hero heading. Hide duplicated decorative lettering from assistive technology without hiding the meaningful heading.
- Implement the scroll invitation as an anchor to Intro when possible. Give Page Top a reliable target or button handler.
- Provide a high-contrast focus indicator using charcoal on light surfaces and light text color on dark surfaces.
- Consider increasing the original mobile contact-copy size from `12px` to `14px` when readability takes priority; allow the resulting section height to grow.
- Use `time` elements for news dates and meaningful link names for each headline.
- Reserve image dimensions or aspect ratios to reduce layout shifts. Load below-the-fold photos progressively.
- Confine horizontal clipping to decorative text and photo strips so body content and focus outlines remain reachable.
- Respect reduced-motion preferences in both CSS and JavaScript if continuous or scroll-linked effects are added.
- Load licensed fonts explicitly and verify fallback metrics before relying on the measured line breaks.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#f1f1ef`.
- Main ink and Founder background: `#2d2d2d`.
- Corporate accent: `#ffa400`.
- Footer and photo frames: `#ffffff`.
- Founder body text: `#f3efea`.
- Founder display heading: `#d3cec4`.
- Fine-rule approximation: `rgba(45,45,45,.2)`.
- Atmosphere: restrained amber glows, with a separate horizontal orange band.

### Overall Prompt

“Create a Japanese corporate homepage inspired by LANWAY's current visual system. Use a pale gray canvas, charcoal text, localized amber glows, and a saturated orange band fading to the right. Build an enormous two-line RESULT / IS KING. opening statement with the second line indented, a compact Japanese slogan, and a circular scroll invitation. Use tightly tracked English section headings, firm Japanese copy, broad desktop whitespace, and asymmetric editorial columns. Include a dark founder chapter, workplace photography in slightly rotated white frames, a structured news list, and a white footer with separate business and recruitment contact blocks. Actions are underlined rows with small outlined arrow capsules. On mobile, use a compact MENU control, approximately 28px gutters, stacked content, and full-width action rows. Treat motion as an explicit implementation choice, with a usable static state.”

### Example Component Prompts

1. **Hero:** “Compose a pale gray corporate hero with RESULT on the first line and IS KING. offset to the right beneath it. Pass a wide orange-to-transparent band behind the lettering. Place the Japanese copy ‘どこまでも、成果にこだわる。’ beside the heading on desktop and below it on mobile. Add a small dark circular scroll control with a thin white arrow and decorative curved text.”
2. **Editorial section:** “Use a very large uppercase CAREER heading at the left, a narrow bold Japanese paragraph in the right half, and a 320px underlined MORE DETAIL link. Bring a loose row of workplace photographs into the lower area, using thick white frames, modest corner radii, and slight alternating rotations.”
3. **Action row:** “Create a transparent navigation row with an uppercase label at the left, a shallow outlined arrow pill at the right, and a one-pixel bottom rule. Use a 59px desktop row and a 46px mobile row, with the mobile link spanning the content width. Make the entire row clickable.”
4. **News list:** “Create a full-width company news list with a small rounded category label, date, and bold Japanese headline. Use a category/date/headline arrangement on desktop. On mobile, put metadata above the full-width headline and allow row heights to grow with wrapping. Keep the visual treatment restrained and avoid image cards.”
5. **Contact footer:** “Build a white footer with equal desktop columns headed WITH / BUSINESS and WITH / CAREER in tightly tracked display type. Follow each with a short Japanese paragraph and a full-width CONTACT line link. Stack the blocks on mobile, then add a clipped giant RESULT IS KING. statement crossing a thin orange stripe and a quiet three-part utility footer.”

## Quick Start

### CSS Custom Properties

This is an appearance-oriented adaptation, not recovered source CSS. Exact colors and measured type pairs are retained. Hero type size, gradient stops, photo treatment, intermediate scaling, content cap, and breakpoint are explicitly recommended approximations. The code keeps decorative tracks static.

Load authorized fonts and imagery separately. Use `.content` for the main column, `.display-heading` for section titles, and `.line-link` with an `.arrow-pill` child for repeated navigation. The Intro grid expects `.intro-heading`, `.intro-photo`, and `.intro-copy` children. News rows expect category, date, and title children. Header state classes require application logic; the original trigger thresholds are unknown.

```css
:root {
  /* Observed source colors */
  --color-canvas: #f1f1ef;
  --color-ink: #2d2d2d;
  --color-orange: #ffa400;
  --color-white: #fff;
  --color-reverse: #f3efea;
  --color-beige: #d3cec4;
  --color-dark-gray: #3f3c39;
  --rule: rgba(45, 45, 45, .2);

  /* Observed font declarations; font files are not bundled */
  --font-display: 'TWK Everett', 'Noto Sans JP', sans-serif;
  --font-emphasis: 'Tazugane Gothic', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;

  /* Measured desktop values */
  --header-height: 84px;
  --header-gutter: 40px;
  --section-title-size: 144px;
  --contact-title-size: 48px;
  --section-space: 200px;
  --line-link-height: 59px;
  --radius-pill: 9999px;

  /* Recommended formulas and visual approximations */
  --content-max: 1120px;
  --gutter: 11.111111vw;
  --rule-gutter: 5.555556vw;
  --hero-size: clamp(72px, 10.555556vw, 152px);
  --photo-radius: 18px;
  --photo-border: 10px;
  --motion-control: 200ms linear;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .04em;
}

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

button {
  font: inherit;
}

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

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: var(--header-gutter);
  color: var(--color-ink);
}

.site-header::after {
  content: '';
  position: absolute;
  inset: auto var(--header-gutter) 0;
  height: 1px;
  background: var(--rule);
}

.brand img,
.brand svg {
  display: block;
  width: 136px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--motion-control);
}

.site-nav a:not(.pill) {
  padding: 20px 15px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding-inline: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: inherit;
  background: transparent;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -.04em;
}

/* A larger wrapper retains the small visible menu capsule. */
.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.menu-button .pill {
  width: 68px;
}

/* Recommended state hooks; no original scroll threshold is implied. */
.site-header.is-compact {
  height: 60px;
  padding-inline: 26px;
}

.site-header.is-compact::after,
.site-header.is-compact .site-nav {
  display: none;
}

.site-header.is-compact .brand img,
.site-header.is-compact .brand svg {
  width: 96px;
}

.site-header.is-compact .menu-button {
  display: inline-flex;
}

.site-header.is-compact .pill {
  color: var(--color-white);
  background: var(--color-dark-gray);
}

.site-header.is-dark {
  color: var(--color-reverse);
  --rule: hsla(0, 0%, 100%, .2);
}

.site-main {
  padding-top: var(--header-height);
  background:
    radial-gradient(
      ellipse 520px 650px at 0 380px,
      rgba(255, 164, 0, .25),
      transparent 74%
    ),
    var(--color-canvas);
}

.hero {
  position: relative;
  min-height: 568px;
  padding-top: 174px;
  isolation: isolate;
}

/* Screenshot-derived placement; gradient stops are an approximation. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 237px 0 auto;
  height: 146px;
  background: linear-gradient(
    90deg,
    var(--color-orange) 0%,
    var(--color-orange) 52%,
    rgba(255, 164, 0, 0) 100%
  );
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto var(--rule-gutter) 0;
  height: 1px;
  background: var(--rule);
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--hero-size);
  font-weight: 500;
  line-height: .87;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.hero-title > span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.hero-title > span + span {
  margin-left: min(20.138889vw, 290px);
}

.hero-tagline {
  position: absolute;
  top: 223px;
  left: calc(50% + 30px);
  margin: 0;
  font-family: var(--font-emphasis);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

.explore {
  position: absolute;
  top: 167px;
  right: var(--gutter);
  width: 140px;
  height: 140px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-ink);
  background: transparent;
  text-decoration: none;
}

.explore-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.explore-core {
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-ink);
}

.explore-core svg {
  width: 24px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.intro {
  padding-block: 93px var(--section-space);
  scroll-margin-top: 84px;
}

.intro-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'photo heading' 'photo copy';
  row-gap: 48px;
}

.intro-heading { grid-area: heading; }
.intro-photo { grid-area: photo; }
.intro-copy { grid-area: copy; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.eyebrow::after {
  content: '';
  width: 40px;
  height: 1px;
  background: currentColor;
}

.intro-title {
  margin: 32px 0 0;
  font-family: var(--font-emphasis);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
}

.photo-frame {
  display: block;
  width: min(400px, 100%);
  margin: 0;
  padding: var(--photo-border);
  border-radius: var(--photo-radius);
  background: var(--color-white);
  transform: rotate(-3.5deg);
}

.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.intro-photo {
  align-self: start;
  justify-self: center;
  margin-top: 40px;
}

.editorial-section {
  padding-block: var(--section-space);
}

.display-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--section-title-size);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.editorial-copy {
  width: 50%;
  margin-top: 96px;
  margin-left: auto;
}

.founder {
  color: var(--color-reverse);
  background: var(--color-ink);
  --rule: hsla(0, 0%, 100%, .2);
}

.founder .display-heading {
  color: var(--color-beige);
}

.career {
  background: radial-gradient(
    ellipse at 100% 90%,
    rgba(255, 164, 0, .2),
    transparent 48%
  );
}

.photo-strip {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  margin-top: 150px;
  padding-block: 24px;
  overflow: hidden;
}

.photo-strip .photo-frame {
  flex: 0 0 clamp(220px, 28vw, 400px);
}

.photo-strip .photo-frame:nth-child(even) {
  transform: rotate(5deg);
}

.line-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(320px, 100%);
  min-height: var(--line-link-height);
  padding-block: 18px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.arrow-pill {
  display: grid;
  flex: 0 0 68px;
  place-items: center;
  height: 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}

.news-list {
  margin-top: 100px;
}

/* Recommended grid matching the recorded desktop alignments. */
.news-row {
  display: grid;
  grid-template-columns: 208px 160px minmax(0, 1fr);
  align-items: center;
  min-height: 106px;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}

.news-category {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 22px;
  padding-inline: 14.4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.news-title {
  margin: 0;
  font-family: var(--font-emphasis);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

.all-news {
  margin: 94px auto 0;
}

.site-footer {
  background: var(--color-white);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(11.111111vw, 160px);
  padding-top: 150px;
}

.contact-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--contact-title-size);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.contact-title > span {
  display: block;
}

.contact-body {
  max-width: 400px;
  margin: 48px 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .64px;
}

.contact-grid .line-link {
  width: 100%;
}

.footer-ribbon {
  position: relative;
  margin-block: 200px;
  overflow: hidden;
  isolation: isolate;
}

.footer-ribbon::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 42% 0 auto;
  height: 22px;
  background: linear-gradient(
    90deg,
    var(--color-orange) 50%,
    rgba(255, 164, 0, 0)
  );
}

/* Static by default; continuous movement was not verified. */
.ribbon-track {
  display: flex;
  gap: 32px;
  width: max-content;
  font-family: var(--font-display);
  font-size: var(--hero-size);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.footer-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 119px;
  margin-inline: var(--rule-gutter);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.04em;
}

.footer-meta a,
.footer-meta button {
  padding: 20px 10px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.footer-meta > :last-child {
  justify-self: end;
}

/* Recommended focus treatment. */
.site-shell :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Recommended breakpoint, not a recovered source media query. */
@media (max-width: 48rem) {
  :root {
    --header-height: 60px;
    --header-gutter: 27px;
    --gutter: 7.2vw;
    --rule-gutter: 7.2vw;
    --hero-size: clamp(48px, 15.384615vw, 60px);
    --section-title-size: 52px;
    --contact-title-size: 40px;
    --section-space: 100px;
    --line-link-height: 46px;
    --photo-border: 8px;
    --photo-radius: 16px;
  }

  .brand img,
  .brand svg {
    width: 94px;
  }

  .site-nav {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }

  .hero {
    min-height: 428px;
    padding-top: 96px;
  }

  .hero::before {
    top: 122px;
    height: 154px;
  }

  .hero-title {
    line-height: .88;
  }

  .hero-title > span + span {
    margin-left: 13.333333vw;
  }

  .hero-tagline {
    top: 218.72px;
    left: calc(var(--gutter) + 22px);
    font-size: 14px;
  }

  .explore {
    top: 228px;
    width: 96px;
    height: 96px;
  }

  .explore-core {
    inset: 14px;
  }

  .intro {
    padding-top: 40px;
    scroll-margin-top: 60px;
  }

  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'heading' 'photo' 'copy';
    row-gap: 48px;
  }

  .eyebrow {
    font-size: 10px;
  }

  .eyebrow::after {
    width: 30px;
  }

  .intro-title {
    margin-top: 20px;
    font-size: 20px;
  }

  .intro-photo {
    width: 220px;
    margin-top: 0;
  }

  .editorial-copy {
    width: 100%;
    margin-top: 48px;
  }

  .line-link {
    width: 100%;
    padding-block: 13px;
    font-size: 14px;
    line-height: 19px;
  }

  .arrow-pill {
    flex-basis: 60px;
    height: 20px;
  }

  .news-list {
    margin-top: 40px;
  }

  .news-row {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 28px 16px;
    min-height: 116px;
    padding-block: 16px 28px;
  }

  .news-category {
    height: 20px;
    padding-inline: 12px;
    font-size: 10px;
  }

  .news-date {
    justify-self: end;
    font-size: 12px;
  }

  .news-title {
    grid-column: 1 / -1;
    font-size: 16px;
  }

  .all-news {
    margin-top: 35px;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    padding-top: 88px;
  }

  .contact-body {
    margin: 23px 0 32px;
    font-size: 12px;
    line-height: 1.75;
  }

  .footer-ribbon {
    margin-block: 128px;
  }

  .footer-ribbon::before {
    height: 8px;
  }

  .footer-meta {
    min-height: 118px;
    font-size: 10px;
  }
}

/* Recommended safeguard for any subsequently added effects. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-shell *,
  .site-shell *::before,
  .site-shell *::after {
    animation: none !important;
    transition: none !important;
  }
}
```

The CSS supplies the principal visual relationships. A production page still needs semantic HTML, actual content, authorized assets, menu behavior, and an accessible scroll/return implementation. Photo-strip behavior and Founder media layout should be designed from further evidence rather than inferred from this starter.

### Tailwind v4 Token Mapping

Optional aliases for projects already using Tailwind v4. This does not imply that the original site uses Tailwind. Define the responsive custom properties above first.

```css
@theme inline {
  --color-canvas: #f1f1ef;
  --color-ink: #2d2d2d;
  --color-corporate: #ffa400;
  --color-reverse: #f3efea;
  --color-beige: #d3cec4;

  --font-display: 'TWK Everett', 'Noto Sans JP', sans-serif;
  --font-emphasis: 'Tazugane Gothic', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;

  --text-section: var(--section-title-size);
  --text-contact: var(--contact-title-size);
  --text-hero: var(--hero-size);

  --spacing-content-gutter: var(--gutter);
  --spacing-section: var(--section-space);
  --radius-capsule: 9999px;
  --radius-photo: var(--photo-radius);
}
```

## Sources & Evidence

- [LANWAY — original and final homepage](https://lanway.jp/): supplied HTTP 200 result, page title, rendered text, link destinations, custom properties, and element/computed-style measurements. Original and final URLs are identical.
- **Inspection timestamp:** October 1, 2026 at `16:29:23.970 UTC`, equivalent to October 2 at `01:29:23.970 JST`. Individual screenshot timestamps were not separately supplied.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; opening, Career, and closing screenshots; supplied document height approximately `6584.73px`.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; opening and closing screenshots; supplied document height approximately `5138.80px`.
- **Observed page states:** opening and scrolled views, responsive layout differences, header appearance changes, section color changes, framed photography, decorative text clipping, and footer composition.
- **DOM-only details:** Founder and News anatomy, specified font stacks and transitions, category dimensions, link geometry, and destination URLs. Those destinations were recorded in the homepage DOM, not separately inspected.
- **Inspection limitations:** no open-menu capture, hover sequence, keyboard test, click result, motion recording, complete stylesheet, asset manifest, or confirmed font-file rendering report. Capture readiness used bounded waits; delayed content and unexercised states remain unverified. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the supplied current homepage evidence. Measurements, screenshot estimates, and recommended implementation choices are kept distinct throughout.