MAGASINN Inc.（株式会社マガザン）｜文化と事業をつなぐコーポレートサイト

# MAGASINN Inc. — Style Reference

> An editorial company portrait, with photographs tucked into oversized type and a conversation waiting at the end.

**Website:** [magasinn.xyz](https://magasinn.xyz/)
**Original URL:** https://magasinn.xyz/
**Final URL:** https://magasinn.xyz/
**Theme:** light gray main canvas, followed by a dark gray contact and footer region; no theme selector was observed.
**Inspected:** October 2, 2026, 06:12 JST — supplied retrieval timestamp: October 1, 2026, 21:12:49.422 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current corporate homepage: identity composition, company introduction, selected projects, services, external service links, news, stories, contact invitation, and footer. Visual coverage includes three desktop captures and two mobile captures. Intermediate sections are additionally documented by rendered DOM measurements.

MAGASINN presents its company through the language of an editorial spread. Large serif capitals sit beside plain sans-serif capitals. Small photographs interrupt the typography, while a hand-drawn mascot gives the composition a familiar, informal character. The surrounding interface is restrained: gray paper, dark text, small uppercase navigation, fine rules, and outlined pill links.

This is a substantial corporate and editorial homepage. Projects, operating services, event news, and interviews form the body of the page. Contact is one destination within that wider structure. The introduction explicitly identifies MAGASINN Inc. as 株式会社マガザン and describes its Kyoto base and work connecting culture, business, and everyday life.

The strongest reusable idea is the contrast in scale: very large display lettering, tiny photographic inserts, compact interface labels, and unusually generous empty space. Mobile preserves that contrast by recomposing the headline into additional lines and retaining distinct widths for introductions, articles, and service previews.

## How to Read This Reference

- **Measured** means a value explicitly present in the supplied rendered DOM or computed-style evidence. Measurements belong to the stated viewport and captured state.
- **Calculated** means arithmetic using those measurements, such as the distance between adjacent cards. It does not establish the original CSS formula.
- **Estimated** means a visual approximation from an original-page capture. Background colors, some display sizes, and several image radii fall into this category.
- **Recommended** means a proposed implementation choice. Breakpoints, accessible interaction improvements, and the Quick Start layout are adaptations rather than recovered source code.
- **Font stacks** are reported declarations. The evidence does not identify the actual rendered face for every glyph or include loaded-font diagnostics.
- **Coverage differs by section.** The hero, service-link rail, and footer have direct screenshot support. Projects, news, and stories have detailed DOM support, but their individual image crops are not all visible in the supplied captures.
- **Component bounds are not always glyph measurements.** Large headings contain descendants whose styles were not included. Their parent element's 18px or 14px font size is not the size of the visible display lettering.
- All custom-property names introduced below are implementation aliases, not original site variables.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Light Gray Paper | Approximately `#eae8e8` | `--m-paper` | Estimated from the broad background in the hero and service captures. The sampled body and sections have transparent computed backgrounds, so the actual background-bearing layer is not identified. |
| Editorial Ink | `#212121` | `--m-ink` | Measured as `rgb(33, 33, 33)` on body text, navigation, project headings, and other main-page elements. |
| Footer Gray | Approximately `#595959` | `--m-dark` | Estimated from the contact and footer captures. The sampled footer itself has a transparent background declaration. |
| Reversed White | `#ffffff` | `--m-white` | Measured on mobile footer text. Also visually matches the large contact disc and reversed illustrations. |
| Quiet Gray | `#c7c6c7` | `--m-muted` | Measured on secondary footer service links and the text inside the dark PICK UP badge. |
| Outline Gray | Approximately `#bcbaba` | `--m-outline` | Estimated from the narrow header capsule and section-index pills. |

The mascot's pale gray backing is visually close to Quiet Gray, but its fill was not independently measured. The wordmark and mascot linework also appear darker than some body text; their artwork colors should be preserved rather than recolored from an assumed text token.

Photography and service artwork supply the chromatic accents: river greens, warm interiors, illustrated blues, and small red details. There is no observed global bright accent color for buttons.

### Palette Boundaries

The supplied custom-property inventory contains numerous WordPress color, gradient, spacing, and shadow presets. Their presence does not show that these presets are used in the visible design. Do not add blue buttons, rainbow gradients, or preset shadows to this reference merely because those variables exist.

The dark footer is a section treatment within the same page. There is no evidence of a user-selectable dark mode.

## Tokens — Typography

### Japanese Body and Editorial Copy

**Measured stack begins:** `YakuHanJP, dnp-shuei-gothic-gin-std`, followed by Japanese system fallbacks including `Yu Gothic`, `YuGothic`, `Hiragino Kaku Gothic Pro`, `Hiragino Sans`, `Meiryo UI`, and `Meiryo`, ending in `sans-serif`.

The default body is regular weight. Japanese project and article titles use weight 700. Most measured Japanese text blocks use positive tracking of `0.02em`; body defaults may instead report normal tracking.

The introductory statement is deliberately more spacious than ordinary body text. Its desktop line height is 2.25 times the font size. On mobile, it remains 17px with a 34px line height even though the body default drops to 14px.

### English Navigation and Utility Text

**Measured stack begins:** `neue-haas-grotesk-text, dnp-shuei-gothic-gin-std`, followed by `Helvetica Neue`, Helvetica, Arial, Verdana, Roboto, Japanese fallbacks, and `sans-serif`.

This stack is confirmed for desktop navigation, the header contact link, the mobile menu, the WITH GOOD COMMUNITY caption, service counters, and footer navigation. Typical tracking is `-0.01em`. The utility typography is small, regular, and closely set.

### Confirmed Serif Roles

**Measured stack:** `Amiri, dnp-shuei-gothic-gin-std, serif`.

Amiri is explicitly declared for small service-navigation names, project numbers, news category links, and dates. These roles often use `-0.02em` tracking.

Large serif lettering is clearly visible in the hero, service-link names, marquee, and contact heading. However, the computed styles of those particular display descendants were not supplied. Their exact family cannot be confirmed from a parent element. Using Amiri for a new display implementation is a reasonable adaptation based on a confirmed site font, not a verified identification of every large heading.

### Wordmark and Display Composition

Preserve the supplied wordmark as artwork when an authorized asset is available. Its mix of bold and lighter letterforms, punctuation, and small Inc suffix is more specific than an ordinary text label.

The hero combines serif A, CULTURAL, and FIRM with a wide sans-serif PROJECT. The contact invitation repeats the same relationship: serif LET’S HAVE A followed by sans-serif CONVERSATION. The ribbon pairs serif LIFE IS with sans-serif EDITORIAL.

### Type Scale

Values below are measured unless explicitly marked as estimates.

| Role | Desktop | Mobile | Weight / tracking | Notes |
| --- | --- | --- | --- | --- |
| Body default | `18px / 32.4px` | `14px / 25.2px` | 400 / normal | Inherited baseline, not the size of every paragraph. |
| Company introduction | `18px / 40.5px` | `17px / 34px` | 400 / `0.02em` | Keep this unusually open leading. |
| Service description | `16px / 30.4px` | `16px / 30.4px` | 400 / `0.02em` | Mobile retains the same reading size. |
| Desktop primary navigation | `13px / 15.6px` | Replaced by MENU | 400 / `-0.01em` | Displayed in uppercase. |
| Header CONTACT / mobile MENU | `11px / 12.1px` | `11px / 12.1px` | 400 / `-0.01em` | Small outlined controls. |
| WITH GOOD COMMUNITY | `13px / 14.3px` | `10.3623px / 11.3986px` | 400 / `-0.01em` | Three compact lines. |
| Section eyebrow | `12px / 14.4px` | `12px / 14.4px` | 700 / `0.02em` | Small Japanese introduction to a chapter. |
| Project title | `36px / 43.2px` | `25px / 32.5px` | 700 / `0.02em` | Includes the featured project and numbered entries. |
| Project client / description | `15px / 22.5px` | `14px / 21px` | 700 client, 400 description | Client and project-role text remain distinct. |
| Featured news title | `34px / 41.48px` | `24px / 29.28px` | 700 / `0.02em` | Larger article tier. |
| Other news title | `24px / 29.28px` | `20px / 24.4px` | 700 / `0.02em` | Secondary article tier. |
| Story title | `30px / 36px` | `24px / 28.8px` | 700 / `0.02em` | Desktop value comes from the sampled logistics entry. |
| Story introductory label | `14px / 22.4px` | `13px / 20.8px` | 400 / `0.02em` | Interview or series context. |
| News category | `11px / 11px` | Same | 400 / `-0.02em` | Confirmed serif stack. |
| News date | `14px / 14px` | Same | 400 / `-0.02em` | Compact editorial metadata. |
| Section-index pill | `18px / 27px` | `15px / 22.5px` | 700 / `0.02em` | Examples include サービス一覧へ and ニュース一覧へ. |
| Footer navigation | Not independently sampled here | `13px / 18.2px` | 400 / `-0.01em` | Desktop appearance is similar. |
| Contact explanatory copy | Approximately `15px / 26px` | `11px / 19.25px` | Mobile 400 / `0.02em` | Desktop value is a screenshot estimate. |
| Hero display letters | Approximately `140–150px` | Approximately `68–72px` | Visually regular | Estimated visible display scale; descendant styles unavailable. |
| External service names | Approximately `44–48px` | Not visually measured | Visually regular serif | Desktop screenshot estimate. |
| Contact display letters | Approximately `90–96px` | Approximately `34–36px` | Visually regular | Estimate from the original contact captures. |

## Tokens — Spacing & Shapes

**Spacing character:** large chapter intervals, broad gutters, compact metadata, and local asymmetry. The evidence does not establish a single universal spacing grid.

### Measured Layout Anchors

| Element | Desktop at 1440px | Mobile at 390px | Interpretation |
| --- | --- | --- | --- |
| Header height | `100px` | `63px` | Compact identity bar above extensive empty space. |
| Header wordmark box | `180 × 20px` | `140 × 15.55px` | Mobile reduces the artwork proportionally. |
| Header wordmark origin | `x 42.34, y 40px` | `x 18.83, y 24px` | Header gutters are narrower than content gutters. |
| Main content gutter | `84.70px` | `28.25px` | About 5.88% and 7.24% of viewport width, respectively. These percentages are calculated, not recovered formulas. |
| Main content width | `1270.59px` | `333.5px` | Used by section labels and project content. |
| Introductory paragraph | `600px` wide at `x 624.70px` | `333.5px` wide at `x 28.25px` | The desktop paragraph sits toward the right. |
| Hero lettering parent | `y 240.28px`, height `544.42px` | `y 236.30px`, height `329.41px` | These are parent bounds; the mascot and caption have their own positions. |
| Section padding | `140px` top, `120px` bottom | `80px` top and bottom | Repeated on projects, services, news, and stories. |
| News reading width | Featured `423.53px`; secondary `338.81px` | `277px` | Mobile articles are narrower than the main content wrapper. |
| Mobile news gutter | — | `56.5px` | Twice the ordinary content gutter. |
| Service-link card width | `445.47px` | `302.16px` | The rail extends beyond the viewport. |
| Service-link card gap | `63.52px` | `18.83px` | Calculated from adjacent card positions. |
| Contact disc | Approximately `260px` diameter | `169.56px` diameter | Desktop is estimated; mobile is measured. |

### Local Spacing

| Relationship | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Section eyebrow to heading wrapper | `20px` | `14px` | Calculated from measured bounds. |
| Project section heading to featured item | `76px` | `38px` | Calculated from measured bounds. |
| News category to date | `14px` | `14px` | Calculated horizontal gap. |
| Numbered project row padding | `15px 0 63px 130px` | `15px 0 36px` | Computed padding. |
| Consecutive mobile news entries | — | `35px` | Measured through adjacent bounds. |
| Consecutive mobile stories | — | `50px` | Measured through adjacent bounds. |
| Standard index-pill padding | `10px 50px 9px 40px` | `10px 52px 8px 42px` | Computed padding; extra right space accommodates an arrow. |

### Shape Vocabulary

| Shape | Observed use | Reproduction guidance |
| --- | --- | --- |
| Narrow capsule | Header CONTACT, mobile MENU, section-index links | Thin gray outline, transparent interior, small directional or dot detail. |
| Full pill | PICK UP and project category labels | The source reports very large radii, such as 1188px and 1386px; treat these as fully rounded pills, not meaningful physical dimensions. |
| Arch | Small hero room photograph and contact sign photograph | Rounded upper silhouette with a flat lower edge. |
| Rounded rectangle | Hero secondary photograph and service preview imagery | Approximately 10–20px corner radii, depending on scale; estimated from captures. |
| Tilted oval | Mascot backing | Preserve the artwork's irregular, slightly tilted character. |
| Circle | Large contact destination | A substantial white disc rather than a conventional rectangular CTA. |
| Fine rule | Ribbon divider and footer separation | Approximately 1px in the captures. |

Several sampled links report `border-radius: 0` even though their visible frame is rounded. The visible contour therefore cannot be attributed to the anchor's own radius from this evidence. A pseudo-element or nested frame is a suitable adaptation, but its use in the original implementation is unverified.

## Components

### Site Header

**Role:** persistent identity, navigation, and a small contact destination.

The desktop header places the wordmark at the left, seven navigation links near the center, and a 140 × 28.09px contact capsule at the right. Navigation reads HOME, ABOUT, SERVICE, PROJECT, NEWS, STORY, CONTACT. A small dot beneath HOME marks the current page in the screenshot.

Navigation links have `10px 6px 15px 7px` padding. This produces approximately 40.59px-high link boxes despite the small 13px text. The contact capsule uses 11px text and an upper-right arrow detail.

At 390px, the navigation and separate CONTACT capsule are replaced by a MENU button with three dots. Its measured box is 84.48 × 24.09px, positioned 18.83px from the right edge. The menu's open state was not captured or exercised.

The header remains visible in the supplied opening and footer captures and appears subdued over the dark region. This supports a persistent-header appearance, but the evidence does not provide its positioning, opacity, or blend-mode declarations. Do not infer a particular scroll-hide or color-blending algorithm.

### Hero Typography Collage

**Role:** communicates the company's identity before introducing detailed copy.

Desktop has four principal text rows:

1. A with an arched interior photograph beside it.
2. CULTURAL in large serif capitals.
3. A small landscape photograph followed by sans-serif PROJECT.
4. Serif FIRM, the compact WITH GOOD COMMUNITY caption, and the mascot oval.

The arrangement is centered as a composition, but its internal pieces do not form a uniform centered text stack. Photographs function like oversized punctuation. The mascot overlaps the lower-right territory of the text rather than occupying a separate feature column.

Estimated desktop image sizes are approximately 154 × 110px for the arch and 210 × 110px for the rectangular insert. The mascot occupies approximately 170 × 160px. These are screenshot estimates rather than DOM image measurements.

Mobile intentionally breaks CULTURAL into CUL– and TURAL. PROJECT remains a complete, prominent line. The rectangular photo moves beside FIRM, while the three-line caption sits below and the mascot overlaps at the lower right. The arch is approximately 76 × 54px; the rectangular insert is approximately 111 × 56px.

The mobile arrangement is an authored composition. Implement an explicit breakpoint arrangement rather than relying on arbitrary word wrapping or shrinking the desktop block until it fits.

### Scroll Marker and Company Introduction

**Role:** bridges the typographic opening and the longer company narrative.

A small radial star-like mark acts as the visible scroll link. Its target is `#main-lead`. The measured hit box is 30 × 30px at desktop and 20 × 20px on mobile. Its rotation or other animation was not verified.

The introductory paragraph is a 600px-wide block positioned toward the right on desktop. On mobile, it returns to the main 333.5px content width. The captures show an inset first visible line; the exact indentation mechanism is not included in the computed sample.

The following MAGASINNについて link occupies a 100px-high flex row on desktop and 80px on mobile. Its label is separated from the row's leading area: 120px from the left edge on desktop and 94px on mobile. The supplied measurements establish this spacing, but not the exact appearance of every leading decoration.

### Chapter Heading

**Role:** gives a consistent editorial entrance to each major content section.

A small Japanese eyebrow precedes a large two-line English heading. Observed titles include SELECTED PROJECTS, OUR SERVICES, FEATURED NEWS, and OUR STORIES. The eyebrow uses 12px bold text with 0.02em tracking and an 18–20px leading inset.

Desktop heading wrappers are about 158px high; mobile wrappers are about 86.77px high. Their large child lettering is not covered by the supplied font-style sample. Use the established serif/sans relationship as an adaptation, while preserving the measured hierarchy and spacing.

### Featured Project

**Role:** gives one project more space and prominence than the numbered index beneath it.

The desktop featured-project link is a flex layout spanning from the left viewport edge to the main wrapper's right boundary. Its measured box is 1355.30 × 533.63px. Text begins at x 884.13px, in a 471.17px-wide column, leaving a broad leading media region.

The text anatomy is:

- A dark PICK UP capsule and a project-discipline label.
- A bold Japanese project title at 36px / 43.2px.
- A bold client line followed by a regular project-role description.
- A separate visual detail-link treatment labeled 詳しく見る.

The feature links to the THE BLUE CAMP project. Client names within project content are project metadata, not website production credits.

On mobile, the feature becomes a block within the 333.5px wrapper. Metadata and the 25px title follow the leading media region. The separate 詳しく見る text is absent from the supplied mobile rendered text, while the project link remains present.

### Numbered Project Index

**Role:** presents substantial project summaries with a clear sequence.

Entries are marked (01), (02), and (03). On desktop, the number remains at the wrapper's left edge while the content is inset by 130px. Titles occupy a 680px-wide region and use 36px bold Japanese text. The discipline pill sits above; client and assignment descriptions sit below.

On mobile, the title returns to the full wrapper width. The number and discipline label share the upper row, with the latter starting 110px to the right of the wrapper edge. Long category text wraps inside its pill. Preserve that wrapping rather than forcing a tiny one-line label.

The entire measured entry is linked. The section concludes with a centered outlined プロジェクト一覧へ pill, measured at 241.95 × 46px on desktop and 220.63 × 40.5px on mobile.

### Main Service Presentation

**Role:** introduces operating services with more narrative detail than the external-link rail.

The DOM contains presentations for CORNER MIX and MAGASINN KYOTO. Each has a Japanese descriptor, a large English name, a paragraph, and a detail link.

Desktop description blocks are 400px wide at x 520px, with 16px text and 30.4px leading. Mobile descriptions retain those type values and use 28.26px horizontal padding within a full-width paragraph box. Detail-link rows change from 100px to 80px high.

The two services share the same measured heading and paragraph origins. Counters show 02 / 02 in one desktop state and 01 / 02 in the mobile state. This is consistent with a shared presentation or slider, but its controls, autoplay, transition, and active-state semantics were not verified. Do not interpret both overlapping DOM entries as two simultaneously visible text blocks.

### Service Navigation Content — DOM Evidence Only

The desktop DOM also contains a compact service-navigation subtree with MAGASINN KYOTO, CORNER MIX, SHUTL, and 心拍. English names use the confirmed Amiri stack at 22px / 19.8px; small descriptions use 10px / 13px.

This content is distinct from the main service chapter. Although it has nonzero measured bounds, the supplied screenshots do not establish a visibly opened navigation panel. Its opening gesture, panel appearance, and keyboard behavior remain unknown.

### LIFE IS EDITORIAL Ribbon

**Role:** creates a recurring editorial refrain between larger content areas.

The visible ribbon alternates LIFE IS EDITORIAL with small photographic inserts. LIFE IS is serif; EDITORIAL is sans-serif. The desktop service capture shows approximately 38–40px lettering, estimated visually. Content continues beyond both viewport edges.

A fine horizontal rule sits beneath the light ribbon. The footer version reverses the lettering against the dark surface. Repeated text appears extensively in the DOM, supporting a repeated-track structure. The captures do not establish movement direction, speed, pause behavior, or a particular animation library.

### External Service-Link Rail

**Role:** connects visitors to three distinct services through visual previews.

The desktop rail begins at x 84.70px. Each link is 445.47px wide; the next starts 508.98px later. This leaves two full cards and a cropped portion of the third visible at the captured position.

Each card visually contains:

- A rounded landscape composite showing the service's visual identity and a browser-like website preview.
- A centered Japanese descriptor.
- A large regular serif name, generally arranged over two lines.

Observed names are MAGASINN KYOTO ONLINE STORE, MERRY LOGISTICS, and SANTA DELIVERY. Their original-page link targets are `https://magasinn.thebase.in/`, `https://merrylogi.thebase.in/`, and `https://santadeli.com/`. These destinations were not separately inspected.

The image region is approximately 445 × 277px, or about 1.61:1, estimated from the desktop capture. There is no separate raised card background around the caption. The composite image supplies the visual density.

At 390px, measured card width is 302.16px, the first card starts at x 44.27px, and the second starts at x 365.25px. This retains a narrow next-card preview. Horizontal continuation is verified; dragging, native scrolling, and autoplay are not.

A centered サービス一覧へ pill follows the rail. It measures 213.34 × 46px on desktop and 196.78 × 40.5px on mobile.

### Featured News

**Role:** presents company activity as an editorial selection with two levels of prominence.

Desktop measurements show a larger article column and smaller neighboring columns. The first large item is 423.53px wide; secondary items are 338.81px wide. A later large item moves to the right side, producing an alternating composition rather than one uniform card grid.

The content hierarchy is media, category link, date, and bold Japanese title. Categories use small serif text, dates use 14px serif text, and title scale distinguishes featured from secondary items.

Mobile uses a single 277px-wide column centered within the 390px viewport, leaving 56.5px on each side. Featured titles remain larger at 24px, while secondary titles use 20px. Entries are separated by approximately 35px.

The category links lead to filtered news URLs and are separate destinations from the article links. In a new implementation, keep these links as separate interactive elements rather than nesting one anchor inside another.

The supplied content order includes selected items from different dates. Do not assume the homepage is a strictly chronological feed.

### Stories

**Role:** gives people, interviews, and cultural projects room for longer editorial titles.

The desktop DOM contains repeated story sequences and offscreen horizontal positions, including a sampled 423.88px-wide entry at a negative x coordinate. This supports a repeated horizontal track structure, but its motion was not exercised.

A story combines a media region, optional series or interview label, bold title, and optional subject information. The sampled desktop logistics story includes a subject name and company role beneath the title. Those fields are content-specific and should not be forced onto every story.

The mobile evidence presents four stories vertically at approximately 276.97px wide, with 50px gaps. Titles are 24px / 28.8px. The desktop repetition is therefore not a safe model for the observed mobile layout. Exact content-selection logic is unknown.

### Contact Invitation

**Role:** makes the final contact destination feel like a continuation of the editorial identity.

The dark region repeats the opening composition at a smaller scale: serif LET’S HAVE A, sans-serif CONVERSATION, a small arched sign photograph, a rounded group photograph, and the mascot. White lettering and imagery surround a large white contact disc.

On desktop, the heading occupies the left side and the approximately 260px disc sits to the right. A thin curved arrow sweeps toward it. The explanatory paragraph starts beside the mascot rather than directly beneath the left edge of the title.

On mobile, the title occupies a measured 333.5 × 69.70px wrapper. Copy begins at x 103.59px and is 258.11px wide, leaving space for the small mascot at the left. The disc moves below, aligns with the right content boundary, and measures 169.56px square. The arrow bends downward through the empty space at the left.

The disc links to `/contact/` and displays お問い合わせへ. The DOM contains two copies of that label within the link. This may support a visual effect, but the supplied evidence does not establish its hover behavior. Expose one clear accessible name in a new implementation.

### Footer Navigation

**Role:** closes the page with a compact directory and social destinations.

A fine horizontal rule separates the contact invitation from the directory. Desktop places the wordmark at the left, two navigation groups toward the right, and Instagram, Spotify, and Facebook icons at the far right. Privacy, copyright, and BACK TO TOP occupy a lower row.

Mobile stacks the wordmark above two navigation columns. The left column includes ABOUT, SERVICE, and four service names. The right column contains PROJECT, NEWS, STORY, and CONTACT. Main links are white; subordinate service links use measured Quiet Gray.

Social icons move below the navigation and align left. Privacy and copyright follow on separate lines. BACK TO TOP is present in the desktop link evidence but absent from the mobile rendered text and link inventory.

The mobile footer wordmark box measures 160 × 17.59px. Its scale is larger than the 140px header wordmark, reinforcing the final identity without competing with the contact disc.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be carried forward |
| --- | --- | --- |
| Link and content transitions | Several logo, scroll, project, news, story, and footer elements report `0.8s cubic-bezier(0.16, 1, 0.3, 1)`. | The duration and easing are measured. The actual changing properties and visual endpoints are not established. |
| Numbered project transitions | Desktop text elements report the 800ms easing; corresponding mobile project elements often report only `all`. | Do not assume every desktop transition is retained on mobile. |
| Plain `transition: all` samples | Many elements report no positive duration in the provided serialization. | This is not sufficient evidence of an active animation. |
| Hero photographic differences | The rectangular insert shows a river scene on desktop and people indoors on mobile. | Different visible images are confirmed. Time-based rotation versus responsive asset selection is unresolved. |
| Repeated ribbon | Repeated text, small images, and clipped continuation appear in the evidence. | Preserve the visual track; animation speed and direction are unknown. |
| Service presentation | Shared bounds and different counter states suggest alternate service views. | Keep a coherent active-state model if implemented; its trigger is unverified. |
| External service rail | Cards extend horizontally beyond both inspected viewport widths. | Provide a way to reach all items in an adaptation; source interaction method is unknown. |
| Story track | Desktop repetition and offscreen positions; vertical mobile entries. | Support the measured responsive structures without inventing autoplay. |
| Scroll destinations | Links to `#main-lead` and desktop `#page-top` are recorded. | Destinations are verified; smooth-scroll timing is not. |
| Mobile menu | A real BUTTON element is present in the closed state. | An open panel, focus trap, and dismissal interactions were not tested. |

The capture process waited for document readiness, visible image decoding, sampled layout stability, and relevant finite animation completion within bounded time limits. It temporarily paused perpetual animations during readiness checks and resumed them afterward. This procedure does not provide a motion recording or establish the behavior of every interactive component.

A conservative reproduction can begin with static ribbons and accessible horizontal rails, then add motion only after obtaining direct behavioral evidence. The Quick Start follows that approach.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Flat light gray | Unifies the long page and emphasizes typography. |
| Project and editorial content | Mostly the same canvas | Hierarchy comes from scale, space, numbering, and imagery. |
| Service preview image | Rounded composite artwork | Contains visual detail without creating a separate elevated card. |
| Small navigation action | Transparent capsule with a thin gray outline | Quiet, repeatable link treatment. |
| PICK UP badge | Ink fill with Quiet Gray text | Local editorial emphasis. |
| Contact and footer | Flat dark gray with white and muted text | A strong closing change in tone. |
| Contact destination | Large white circle | The most prominent filled action shape. |

No general shadow or gradient system is visible in the supplied original-page captures. Small shadows within a service screenshot belong to that embedded artwork and should not automatically become surrounding interface elevation.

## Imagery

The photography is grounded in places, people, and everyday cultural activity. Small images show an interior, a river landscape, a group indoors, people outdoors, and a sign surrounded by greenery. Their irregular placement makes the page feel assembled rather than templated.

The scale contrast is essential. Hero photographs remain small relative to the words. The service rail then switches to large, information-rich composites. The footer returns to small inserts and a mascot, tying the end back to the opening.

Use natural photographic color and preserve the variety between images. There is no evidence of a uniform monochrome filter. Do not apply pixelated rendering: the original captures use ordinary photographic detail and clean type.

### Observed Asset References

The evidence does not include original image URLs, filenames, SVG markup, or intrinsic asset sizes. The following inventory identifies visible assets by role rather than inventing paths.

| Asset | Observed placement | Treatment |
| --- | --- | --- |
| MAGASINN wordmark | Header and footer | Preserve its custom lettering and proportions. |
| Interior photograph | Hero beside A | Arch-shaped crop with a flat base. |
| River photograph | Desktop hero before PROJECT | Small rounded landscape crop. |
| Indoor group photograph | Mobile hero beside FIRM | Rounded horizontal insert; its relationship to the desktop image sequence is unknown. |
| Dog-like mascot with rolled-page detail | Hero and contact region | Black line illustration on a pale or white oval. Preserve the drawing's character. |
| Three service composites | External service-link rail | Large rounded landscapes containing website previews and service artwork. |
| Assorted cultural photographs | LIFE IS EDITORIAL ribbons | Small inserts between repeated phrases. |
| Outdoor sign photograph | Contact heading | Small arch-shaped insert. |
| Outdoor group photograph | Contact heading | Rounded rectangular insert before CONVERSATION. |
| Curved directional arrow | Contact region | Thin, unfilled line pointing toward the circular link. |
| Social marks | Footer | Instagram, Spotify, and Facebook symbols in white. |

For a new brand, create original photography and illustration with equivalent compositional roles. For an authorized reproduction, obtain the actual wordmark and mascot assets; substituting a generic pet icon would lose a substantial part of the identity.

## Layout & Responsive Behavior

### Page Structure

The observed page is approximately 10,927px high on desktop and 12,100px on mobile. These are capture-state document measurements, not recommended fixed heights.

| Chapter | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Opening and introduction | `0 / 1472.50px` | `0 / 1313.86px` |
| Selected projects | `1472.50 / 2374.34px` | `1313.86 / 2015.64px` |
| Services | `3846.84 / 1978.13px` | `3329.50 / 1502.41px` |
| Featured news | `5824.97 / 2402.95px` | `4831.91 / 4050.05px` |
| Stories | `8227.92 / 1505.73px` | `8881.95 / 2178.97px` |
| Footer | Begins near `9733.66px` | Begins at `11060.92px`; height `1039.19px` |

News becomes substantially taller on mobile because its desktop composition turns into a single article column. Stories also change from a horizontal desktop structure to a vertical mobile selection. Other sections become shorter through reduced display scale and spacing.

### Responsive Decisions That Matter

- **Header:** the full desktop navigation becomes a compact MENU capsule. Do not squeeze seven links into a narrow screen.
- **Hero:** CULTURAL gains an intentional internal break, and photography moves between rows. Maintain separate arrangements rather than a single scaled block.
- **Opening space:** the headline parent begins near y 240px at both inspected sizes. Mobile retains a considerable blank interval below the header.
- **Introduction:** the right-side desktop paragraph becomes a full main-wrapper paragraph on mobile, with only a small font reduction.
- **Projects:** desktop's 130px text inset disappears from the title block on mobile. The number and discipline label keep a separate upper-row relationship.
- **Service rail:** card width and gap decrease while the next item remains partially visible.
- **News and stories:** mobile uses an extra-narrow reading column of about 277px, rather than filling the full 333.5px main wrapper.
- **Contact:** a desktop side-by-side invitation and disc becomes a stacked composition with a right-aligned disc.
- **Footer:** identity, two-column navigation, social links, and legal text become successive groups.

Only the two stated viewport sizes were inspected. The exact breakpoint, tablet composition, orientation behavior, safe-area handling, and browser-zoom behavior are unknown. The 900px breakpoint in the Quick Start is a recommended implementation starting point.

## Do’s and Don’ts

### Do

- Preserve the large difference between display lettering and utility text.
- Combine serif and sans-serif lettering within the same identity composition.
- Keep photographs small and purposeful inside the hero and contact headings.
- Recompose CULTURAL as CUL– / TURAL on the observed narrow layout.
- Use different widths for section wrappers, introductory copy, article columns, and service cards.
- Keep the introductory paragraph spacious: 18px / 40.5px desktop and 17px / 34px mobile are measured anchors.
- Use fine rules, small pills, and numbering to organize the page.
- Let service artwork and photography provide color against the neutral shell.
- Retain the large circular contact link and the curved arrow leading toward it.
- Keep projects, services, news, and stories as distinct content systems.
- Label inferred motion and estimated values when handing this reference to another implementer.

### Don’t

- Don’t reduce the whole homepage to one sales headline and repeated CTA cards.
- Don’t use one type family for every English display word.
- Don’t make the hero a full-width background photograph.
- Don’t shrink the desktop collage uniformly on mobile or let its word breaks happen accidentally.
- Don’t wrap every article in a white rounded panel with a shadow.
- Don’t turn the neutral palette into a set of colorful category badges.
- Don’t mistake a transparent computed background for the visible canvas color.
- Don’t treat WordPress preset variables as proof of visible colors or effects.
- Don’t use a heading parent's small inherited font size as the size of its large descendants.
- Don’t assume repeated DOM content proves a specific animation duration or interaction library.
- Don’t claim that the closed mobile menu establishes an inspected open-menu design.
- Don’t copy subdued footer-header contrast without checking readability in the new implementation.

## Recommended Implementation Additions

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

- Keep one meaningful accessible heading for the hero. Mark duplicated display words and decorative photographs as hidden from assistive technology when they repeat that heading.
- Give the wordmark link, scroll symbol, social icons, and contact disc explicit accessible names.
- Give MENU an expanded state and a relationship to its panel. Support keyboard opening, closing, and predictable focus return.
- Expand the effective touch targets around the small menu and scroll mark to approximately 44px without enlarging their visible artwork unnecessarily.
- Make horizontal service content reachable with native scrolling or labeled controls. Do not require dragging as the only navigation method.
- If ribbons or story tracks move automatically, provide pause behavior and honor reduced-motion preferences. Hide duplicated loop copies from the accessibility tree.
- Preserve independent article and category links without nesting anchors.
- Use a visible focus outline on both light and dark surfaces.
- Review the 11px mobile contact paragraph and low-contrast header state. Increasing small explanatory copy to 13–14px is a reasonable accessibility adaptation if the layout allows it.
- Reserve image dimensions to prevent layout shifts, while allowing natural article height when text wraps or fonts change.
- Verify the authored hero at intermediate widths and at 200% zoom. Shift composition before reducing important text to an unreadable size.

## Agent Prompt Guide

### Quick Color Reference

- Main text: measured `#212121`.
- Main paper: approximately `#eae8e8` from the captures.
- Footer surface: approximately `#595959` from the captures.
- Reversed text: measured `#ffffff`.
- Secondary footer text: measured `#c7c6c7`.
- Capsule outline: approximately `#bcbaba`.
- Accent color comes from photography and service artwork; do not introduce a global saturated CTA color.

### Overall Prompt

“Create an editorial corporate homepage for a cultural project company. Use a flat light gray canvas, dark ink text, expansive spacing, and a small wordmark with compact uppercase navigation. Build the opening as an authored typographic collage: large regular serif A, CULTURAL, and FIRM; wide sans-serif PROJECT; an arched room photograph; a rounded landscape insert; a small three-line community caption; and an original hand-drawn mascot on an oval. Continue with a right-positioned company introduction, numbered project summaries, narrative service presentations, a horizontal service-preview rail, varied news features, and interviews. Repeat a LIFE IS EDITORIAL ribbon with small photographic inserts. Close on dark gray with a mixed-font conversation heading, a thin curved arrow, and a large white circular contact link. At mobile widths, recompose the headline, replace navigation with MENU, and use narrow vertical article columns. Keep surfaces flat and distinguish measured source values from implementation choices.”

### Example Component Prompts

1. **Hero:** “Arrange A, CULTURAL, PROJECT, and FIRM as four large desktop rows, alternating serif and sans-serif lettering. Insert a small arched interior photo beside A and a rounded landscape photo before PROJECT. Place a three-line community caption and illustrated oval near FIRM. At 390px, break CULTURAL into CUL– and TURAL, move the secondary photo beside FIRM, and preserve generous space above the composition.”
2. **Project index:** “Create numbered editorial project links on a continuous gray canvas. Use a small serif number at the left, a compact discipline pill, a 36px bold Japanese title, and 15px client and assignment metadata. On mobile, remove the large title inset, use a 25px title with 1.3 leading, and let long category labels wrap.”
3. **Service rail:** “Place three service previews in a horizontal rail. At 1440px, use approximately 445px-wide cards with 64px gaps and show part of the third card. Each card has a rounded landscape composite, a centered Japanese descriptor, and a large two-line serif name. At 390px, use approximately 302px cards with 19px gaps and a next-card preview. Add an outlined service-index pill below.”
4. **News:** “Build an editorial news section with a larger featured article and smaller neighboring articles, followed by a later feature on the opposite side. Pair small serif categories and dates with bold Japanese titles. On mobile, use a centered 277px column, retaining larger titles for selected features.”
5. **Contact:** “On a flat dark gray surface, pair a large serif LET’S HAVE A with sans-serif CONVERSATION. Integrate small arch and rounded photo inserts, a hand-drawn mascot, explanatory copy, and a thin curved arrow. Put the contact label in a white circular link, about 260px across on desktop and 170px on mobile. Align the mobile circle to the right.”
6. **Footer:** “Separate the directory with a fine rule. On desktop, put the wordmark left and compact navigation groups and social icons right. On mobile, stack the wordmark above two navigation columns, then a left-aligned social row, privacy link, and copyright. Use white main links and pale gray subordinate service links.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation, not the original stylesheet. Ink colors, body text sizes, major spacing, and easing use measured evidence. Paper, footer, and outline colors are visual estimates. Display sizing, the hero grid, fixed-header positioning, hover feedback, and the 900px breakpoint are recommended choices.

Declare and load fonts separately when available. The serif display choice below uses the confirmed site family Amiri as an adaptation; its use on the original large hero lettering was not independently verified. No original image paths were supplied.

The hero grid expects children named `.hero-a`, `.hero-arch`, `.hero-cultural`, `.hero-photo`, `.hero-project`, `.hero-firm`, `.hero-note`, and `.hero-mascot`. Use image elements for the photographic and mascot slots. The responsive word break can be authored as:

```html
<span class='hero-cultural'>CUL<span class='hero-cut'>–<br></span>TURAL</span>
```

```css
:root {
  /* Measured text colors; estimated surface and outline colors. */
  --m-paper: #eae8e8;
  --m-ink: #212121;
  --m-dark: #595959;
  --m-white: #ffffff;
  --m-muted: #c7c6c7;
  --m-outline: #bcbaba;

  /* Shortened versions of observed stacks. */
  --m-jp: YakuHanJP, dnp-shuei-gothic-gin-std,
    'Yu Gothic', 'Hiragino Sans', Meiryo, sans-serif;
  --m-sans: neue-haas-grotesk-text, dnp-shuei-gothic-gin-std,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --m-serif: Amiri, dnp-shuei-gothic-gin-std, serif;

  /* Adapted proportions matching the inspected desktop width. */
  --m-gutter: 5.88235vw;
  --m-header-gutter: 2.94118vw;
  --m-section-before: 140px;
  --m-section-after: 120px;
  --m-media-radius: 20px;
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-duration: 800ms;
}

body { margin: 0; }
.magasinn, .magasinn * { box-sizing: border-box; }
.magasinn {
  color: var(--m-ink);
  background: var(--m-paper);
  font: 400 18px/1.8 var(--m-jp);
}
.magasinn :where(h1, h2, h3, p) { margin: 0; }
.magasinn a { color: inherit; text-decoration: none; }
.magasinn img { display: block; max-width: 100%; }
.m-wrap {
  width: calc(100% - 2 * var(--m-gutter));
  margin-inline: auto;
}
.m-section {
  padding-block: var(--m-section-before) var(--m-section-after);
}
.m-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Recommended persistent-header implementation. */
.m-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 100px;
  padding-inline: var(--m-header-gutter);
}
.m-logo { width: 180px; }
.m-nav { display: flex; }
.m-nav a {
  position: relative;
  padding: 10px 6px 15px 7px;
  font: 400 13px/1.2 var(--m-sans);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.m-nav [aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.m-header-contact { justify-self: end; }
.m-menu { display: none; }

/* A separate frame preserves the measured padding-based height. */
.m-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 50px 9px 40px;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: 700 18px/1.5 var(--m-jp);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.m-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--m-outline);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--m-duration) var(--m-ease);
}
.m-pill::after {
  content: '↗';
  position: absolute;
  right: 17px;
  top: 50%;
  font: 400 11px/1 var(--m-sans);
  transform: translateY(-50%);
}
.m-pill--small {
  width: 140px;
  padding: 8px 40px 8px 30px;
  font: 400 11px/1.1 var(--m-sans);
  letter-spacing: -0.01em;
}
.m-index-link { margin-top: 76px; text-align: center; }

/* Recommended collage geometry; display sizes are estimates. */
.m-hero-stage { padding-block: 240px 130px; }
.m-hero-type {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: min(900px, calc(100% - 2 * var(--m-gutter)));
  margin-inline: auto;
  font: 400 clamp(96px, 10.14vw, 146px)/0.9 var(--m-serif);
  letter-spacing: -0.02em;
}
.hero-a { grid-area: 1 / 5 / 2 / 7; text-align: center; }
.hero-arch {
  grid-area: 1 / 7 / 2 / 9;
  width: 154px;
  aspect-ratio: 1.4;
  object-fit: cover;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
}
.hero-cultural {
  grid-area: 2 / 2 / 3 / 13;
  text-align: center;
  white-space: nowrap;
}
.hero-cut { display: none; }
.hero-photo {
  grid-area: 3 / 1 / 4 / 4;
  width: 210px;
  aspect-ratio: 21 / 11;
  border-radius: 14px;
  object-fit: cover;
}
.hero-project {
  grid-area: 3 / 4 / 4 / 13;
  font-family: var(--m-sans);
  text-align: right;
}
.hero-firm { grid-area: 4 / 3 / 5 / 8; }
.hero-note {
  grid-area: 4 / 8 / 5 / 10;
  align-self: end;
  font: 400 13px/1.1 var(--m-sans);
  letter-spacing: -0.01em;
}
.hero-mascot {
  grid-area: 4 / 9 / 5 / 12;
  justify-self: center;
  width: 170px;
  object-fit: contain;
  transform: translateY(-25px);
}
.m-intro {
  width: min(600px, calc(100% - 2 * var(--m-gutter)));
  margin-left: 43.382vw;
  font-size: 18px;
  line-height: 2.25;
  letter-spacing: 0.02em;
}

.m-eyebrow {
  position: relative;
  padding-left: 20px;
  font: 700 12px/1.2 var(--m-jp);
  letter-spacing: 0.02em;
}
.m-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.m-project-row { position: relative; padding: 15px 0 63px 130px; }
.m-project-number {
  position: absolute;
  top: 14px;
  left: 0;
  font: 400 12px/1 var(--m-serif);
  letter-spacing: -0.02em;
}
.m-project-title {
  max-width: 680px;
  margin-block: 50px 22px;
  font: 700 36px/1.2 var(--m-jp);
  letter-spacing: 0.02em;
}
.m-project-meta { font-size: 15px; line-height: 1.5; }

/* Static ribbon baseline; no unverified autoplay is included. */
.m-ribbon { overflow: hidden; padding-block: 16px; }
.m-ribbon-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  font: 400 40px/1 var(--m-serif);
  white-space: nowrap;
}
.m-ribbon-track .sans { font-family: var(--m-sans); }
.m-ribbon-track img { width: 60px; height: 45px; object-fit: cover; }

/* Native scrolling is an accessibility-oriented adaptation. */
.m-service-rail {
  overflow-x: auto;
  padding-inline: var(--m-gutter);
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--m-gutter);
}
.m-service-track {
  display: flex;
  gap: 63.52px;
  width: max-content;
}
.m-service-card {
  flex: 0 0 clamp(302px, 30.935vw, 445.47px);
  text-align: center;
  scroll-snap-align: start;
}
.m-service-card img {
  width: 100%;
  aspect-ratio: 445 / 277;
  object-fit: cover;
  border-radius: var(--m-media-radius);
}
.m-service-caption { margin-top: 32px; font-size: 15px; font-weight: 700; }
.m-service-name {
  margin-top: 15px;
  font: 400 46px/0.88 var(--m-serif);
  letter-spacing: -0.02em;
}
.m-news-title { font: 700 34px/1.22 var(--m-jp); letter-spacing: 0.02em; }
.m-news-title--small { font-size: 24px; }
.m-story-title { font: 700 30px/1.2 var(--m-jp); letter-spacing: 0.02em; }

.m-footer { color: var(--m-white); background: var(--m-dark); }
.m-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 64px;
  padding-block: 140px 120px;
}
.m-contact-title { font: 400 clamp(42px, 6.53vw, 94px)/0.95 var(--m-serif); }
.m-contact-title .sans { font-family: var(--m-sans); }
.m-contact-copy {
  max-width: 650px;
  margin-top: 35px;
  padding-left: 130px;
  font-size: 15px;
  line-height: 1.75;
}
.m-contact-orb {
  display: grid;
  place-items: center;
  width: 260px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #707070;
  background: var(--m-white);
  font: 700 15px/1.5 var(--m-jp);
}
.m-footer-directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 190px 116px;
  gap: 20px;
  border-top: 1px solid var(--m-muted);
  padding-block: 60px 80px;
  font: 400 13px/1.4 var(--m-sans);
}
.m-footer-directory .secondary { color: var(--m-muted); }

/* Recommended feedback and keyboard visibility. */
@media (hover: hover) {
  .m-pill:hover::before { border-color: currentColor; }
}
.magasinn :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Recommended breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 900px) {
  :root {
    --m-gutter: 7.24638vw;
    --m-header-gutter: 4.83092vw;
    --m-section-before: 80px;
    --m-section-after: 80px;
  }
  .magasinn { font-size: 14px; }
  .m-header { grid-template-columns: 1fr auto; min-height: 63px; }
  .m-logo { width: 140px; }
  .m-nav, .m-header-contact { display: none; }
  .m-menu {
    display: inline-flex;
    width: 84.48px;
    padding: 6px 31px 6px 21px;
  }
  .m-menu::after { content: '···'; right: 10px; }
  .m-pill:not(.m-pill--small) {
    padding: 10px 52px 8px 42px;
    font-size: 15px;
  }
  .m-index-link { margin-top: 50px; }
  .m-hero-stage { padding-block: 236px 90px; }
  .m-hero-type {
    width: min(420px, calc(100% - 2 * var(--m-gutter)));
    font-size: clamp(56px, 18.46vw, 72px);
    line-height: 0.88;
  }
  .hero-a { grid-area: 1 / 4 / 2 / 7; }
  .hero-arch { grid-area: 1 / 7 / 2 / 10; width: 76px; }
  .hero-cultural { grid-area: 2 / 1 / 4 / 13; }
  .hero-cut { display: inline; }
  .hero-project { grid-area: 4 / 1 / 5 / 13; text-align: center; }
  .hero-photo { grid-area: 5 / 1 / 6 / 6; width: 111px; border-radius: 10px; }
  .hero-firm { grid-area: 5 / 6 / 6 / 13; }
  .hero-note { grid-area: 6 / 6 / 7 / 10; font-size: 10.3623px; }
  .hero-mascot {
    grid-area: 6 / 10 / 7 / 13;
    width: 84px;
    transform: translateY(-25px);
  }
  .m-intro { margin-inline: auto; font-size: 17px; line-height: 2; }
  .m-project-row { padding: 15px 0 36px; }
  .m-project-title { margin-top: 64px; font-size: 25px; line-height: 1.3; }
  .m-project-meta { font-size: 14px; }
  .m-service-rail { padding-inline: 11.35016vw; }
  .m-service-track { gap: 18.83px; }
  .m-service-card { flex-basis: min(302.16px, 78vw); }
  .m-service-name { font-size: 34px; }
  .m-reading-column { width: 71.02564%; margin-inline: auto; }
  .m-news-title { font-size: 24px; }
  .m-news-title--small { font-size: 20px; }
  .m-story-title { font-size: 24px; }
  .m-contact { grid-template-columns: 1fr; gap: 27px; padding-block: 80px 40px; }
  .m-contact-title { font-size: clamp(30px, 9.23vw, 40px); }
  .m-contact-copy { padding-left: 75.34px; font-size: 11px; }
  .m-contact-orb { width: 169.56px; justify-self: end; font-size: 12px; }
  .m-footer-directory { grid-template-columns: 1fr 1fr; padding-block: 40px 27px; }
  .m-footer-brand, .m-footer-socials, .m-footer-legal { grid-column: 1 / -1; }
  .m-footer-brand img { width: 160px; }
}

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

The snippet supplies the principal visual relationships. It does not implement an open menu, an alternate-service controller, a full article grid, automatic tracks, or the original curved-arrow artwork. Those require markup, assets, and behavior appropriate to the new site. Validate display line lengths against the actual loaded font; fallback metrics can materially change the collage.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--m-paper);
  --color-ink: var(--m-ink);
  --color-footer: var(--m-dark);
  --color-reversed: var(--m-white);
  --color-muted: var(--m-muted);
  --color-outline: var(--m-outline);

  --font-editorial: var(--m-serif);
  --font-utility: var(--m-sans);
  --font-body: var(--m-jp);

  --spacing-page: var(--m-gutter);
  --spacing-chapter-start: var(--m-section-before);
  --spacing-chapter-end: var(--m-section-after);
  --radius-media: var(--m-media-radius);
  --ease-editorial: var(--m-ease);
}
```

## Sources & Evidence

- **Original and final website:** [https://magasinn.xyz/](https://magasinn.xyz/). The supplied browser record reports HTTP 200 and identical original and final URLs.
- **Capture timestamp:** `2026-10-01T21:12:49.422Z`, corresponding to October 2, 2026, 06:12:49 JST.
- **Desktop evidence:** 1440 × 1000 viewport; opening composition, external service rail, and contact/footer captures; rendered text, link inventory, element rectangles, and computed-style samples. Reported document height: 10,927px.
- **Mobile evidence:** 390 × 844 viewport; opening and contact/footer captures; rendered text, link inventory, element rectangles, and computed-style samples. Reported document height: 12,100px.
- **Measured authority:** the supplied original-page DOM and computed styles establish text colors, declared font stacks, many type sizes, spacing, element geometry, link targets, and selected transition declarations. Screenshot estimates are labeled separately.
- **Inspection limitations:** no independent browsing or additional interactions were performed for this reference. Linked destination pages, open-menu behavior, form behavior, hover endpoints, carousel controls, animation direction and speed, keyboard support, and intermediate responsive widths were not inspected. Raw asset paths and large display-child font declarations were not provided.
- **Capture limitations:** readiness checks used bounded waits and sampled stability; they do not establish complete loading of every delayed feature. SharedWorkers and service workers were disabled during the supplied inspection.

This document describes the current homepage represented by the supplied original-page evidence. Measured capture geometry is a reference for relationships and hierarchy, not a requirement to hardcode the page's total height or every document coordinate.