# studio.CBR — Style Reference

> Polished leather, warm paper, and quiet shopkeeping expressed through generous photography and compact buying tools.

**Website:** [www.studiocbr.jp](https://www.studiocbr.jp/)
**Original URL:** https://www.studiocbr.jp/
**Final URL:** https://www.studiocbr.jp/
**Theme:** a light storefront with warm neutral sections, burnt-orange actions, and a deep green footer.
**Inspected:** September 12, 2026, through supplied browser evidence retrieved at 11:32:10.775 UTC / 20:32:10.775 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current shop homepage: header, photographic hero, announcements, product collections, sale and brand rails, store information, favorites and history states, footer, and mobile navigation. Visual captures cover the desktop opening, accessories transition and footer, plus the mobile opening and footer. Rendered DOM and computed-style evidence cover additional homepage sections. Linked pages and opened control states were not inspected.

studio.CBR pairs an atmospheric introduction with a substantial working catalog. Dark shop interiors, amber leather, wooden stools, and soft foreground foliage give the opening its warmth. Cream margins and muted green Japanese typography keep that photographic density calm. Orange capsules provide consistent routes into shopping and selling.

The strongest structural signature is the asymmetric desktop hero: a broad photograph window, a narrow vertical-copy channel, and another photograph window reaching the right edge. Farther down, product information becomes deliberately practical—condition, size, detailed identification, price, stock status, and product number. The layout alternates generous section spacing with compact product text. On mobile, the introduction becomes horizontal, catalog grids become two columns, and shopping utilities move into a persistent orange bottom bar.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements use CSS pixels and are rounded where appropriate.
- **Calculated** means arithmetic derived from those measurements, such as a grid gap or width proportion. It does not establish the original CSS formula.
- **Estimated** means a visual approximation from the original-page captures. Photograph-window radii, footer details, and unsampled text sizes belong to this category.
- **Recommended** means an implementation choice for a new build. Breakpoints, accessible target sizes, and the starter class names are recommendations.
- Font-family evidence records the declared stack. It does not independently verify which font file supplied every glyph.
- A DOM rectangle can belong to a clipped, positioned, or duplicated element. It is not proof that the entire element was visible. This matters especially for the hero, carousels, and mobile new-arrivals section.

## Tokens — Colors

### Default Palette

The names and custom properties below are implementation aliases; the supplied source custom properties do not name this palette.

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Warm Paper | `#f5f3ed` | `--color-paper` | Measured body background and desktop header fill; also the mobile search capsule |
| Soft Sand | `#ede9e0` | `--color-sand` | Measured collection-section backgrounds, load-more surface, and mobile favorites/history sections |
| Forest Ink | `#44514b` | `--color-ink` | Measured body text, selling tab, and sale controls; the footer visually uses this same green |
| Burnt Orange | `#c06223` | `--color-accent` | Measured main actions, menu circle, buying tab, and full sale-section background |
| White | `#ffffff` | `--color-white` | Measured reversed action text; product-image mats appear white in the accessories capture |
| Muted Detail | approximately `#a0aaa5` | `--color-muted` | Estimated starting point for quiet heart outlines and dotted rules; not an extracted source color |

Orange has two scales of use: small navigation accents and one substantial sale section. Preserve both roles. Using orange only for buttons would miss a major change of rhythm in the long homepage.

The page uses solid interface fills. Highlights, gradients, and shadows inside leather photographs belong to the imagery. The pale organic wash near the desktop hero caption is also an image treatment, not evidence of a general translucent-interface system.

### Contrast Notes

Calculated from the measured solid colors, Forest Ink on Warm Paper is approximately **7.5:1**, while White on Burnt Orange is approximately **4.2:1**. For a new implementation using small white button text, an optional darker action color such as `#a14d1b` provides more contrast. This is a recommended accessibility variation, not the observed palette.

Some sampled parent backgrounds do not fully explain the visible section transitions. For example, the desktop women's section reports Sand while the visible outgoing product area appears closer to Paper. Match the rendered layers in the capture; do not assume every parent fill is the final visible surface.

## Tokens — Typography

### Declared Source Family

The body and sampled controls declare **YakuHanJP**, followed by **Zen Kaku Gothic Antique**, then Japanese system fallbacks including HiraKakuProN-W3, HiraKakuPro-W3, Meiryo, MS PGothic, and Osaka, followed by generic and Latin sans-serif alternatives.

The visual character is restrained Japanese Gothic: firm strokes, clear small labels, and modestly rounded forms. The observed body weight is `500`; sampled section headings and primary action labels use `700`. The logo should be treated as supplied identity artwork rather than recreated by typing its name in the body font.

A practical shortened alias is:

```css
--font-site: YakuHanJP, 'Zen Kaku Gothic Antique',
  HiraKakuProN-W3, HiraKakuPro-W3, Meiryo, sans-serif;
```

This declaration does not load the fonts. Supply appropriate font assets separately when available and permitted.

### Type Scale

| Role | Desktop | Mobile | Weight / leading | Evidence |
| --- | --- | --- | --- | --- |
| Body baseline | `14px` | `14px` | `500`; sampled body line height `14px` | Measured inheritance baseline, not a paragraph recommendation |
| Main collection heading | `32px` | `20px` | `700`; typically `1.4–1.5` | Measured |
| Accessories heading | `32px / 32px` | `20px / 20px` | `700` | Measured |
| Announcement heading | `18px / 18px` | `14px / 14px` | `700` | Measured |
| Hero location H1 | `12px / 18px` | `11px / 11px` | `700` | Measured |
| Large hero statement | approximately `28–30px` | approximately `24px` | Visually bold | Estimated; this prominent text was not separately sampled |
| Header filter buttons | `13.3333px` | Hidden in the top header | `700`; normal line height | Measured |
| Buy/sell labels | `16px / 60px` | Replaced by bottom navigation | `700` | Measured |
| Collection CTA | `16px / 16px` | `12px / 12px` | `700` | Measured |
| Store introduction | Not separately sampled | `20px / 30px` | `700` | Measured mobile H3 |
| Store paragraph | Not separately sampled | `14px / 24.92px` | `500` | Measured mobile paragraph |
| Address and opening details | Not separately sampled | `12px / 21.36px` | `500` | Measured mobile paragraphs |
| Product price numerals | approximately `20px` | Not separately sampled | Visually stronger than descriptions | Estimated from the desktop product tail |
| Footer links | approximately `14px` | approximately `12px` | Compact regular-to-medium text | Estimated |

The sampled body letter spacing is `0.42px`, equivalent to `0.03em` at 14px. Several larger elements inherit the same absolute spacing, so their effective tracking is tighter. Buttons can instead report normal tracking.

### Hierarchy and Writing Direction

The semantic H1 is the small location-and-shop descriptor. The largest opening statement is a separate visual element. Do not derive the type scale from heading tag names alone.

On desktop, the statement reads in three vertical columns, proceeding from right to left. On mobile, it becomes three horizontal lines:

> 中古革靴専門  
> だからこそ  
> １足、１足、大切に

Using `writing-mode: vertical-rl` on desktop and `horizontal-tb` on mobile is a recommended implementation of the observed treatment; the source writing-mode declaration was not included.

Oversized, very pale uppercase lettering crosses the accessories transition. A cropped “BAG & SH…” fragment is visible. Its apparent font size is roughly `190–210px` at desktop, but neither the exact size nor the complete text sequence was supplied. Treat it as decorative section-scale typography, not a readable navigation label.

## Tokens — Spacing & Shapes

**Density:** spacious section framing, moderately dense catalog information, and compact utilities.

**Source root:** the sampled HTML font size is `10px`. The starter below uses explicit pixel tokens with a conventional root; do not transfer unknown source rem values directly into a 16px-root project.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header logo left edge | `62.61px` | `23.41px` | Measured |
| Main catalog left edge | `125.22px` | `10px` for product grids | Measured |
| General text inset | Varies by section | `23.41px`, approximately `6vw` | Measured / calculated |
| New-arrivals column gap | approximately `62.6px` | `10px` | Calculated from card rectangles |
| Men's/women's column gap | approximately `31.3px` | `10px` | Calculated |
| Accessories card gap within a group | approximately `44.7px` | `10px` | Calculated |
| Gap between accessories groups | approximately `71.4px` | Groups stack | Calculated desktop |
| Accessories image-mat inset | approximately `25px` | Not visually established | Estimated desktop |
| Announcement section padding | `130px` top and bottom | `50px` top and bottom | Measured |
| Accessories section padding | `270px 0 90px` | `170px 0 40px` | Measured |
| Sale section padding | `160px` top and bottom | `50px` top, `80px` bottom | Measured |
| Store section padding | `140px` top and bottom | `40px` top, `50px` bottom | Measured |
| Common collection bottom clearance | `100px` | Often `60px` | Measured examples; not universal |

Use a small practical spacing vocabulary—10, 20, 25, 40, 50, 60, 100, 130, and 160px—while preserving the section-specific larger offsets. A universal equal-padding section component would flatten the original rhythm.

### Border Radius

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Search filters and main pills | `200px` | `200px` | Measured |
| Header menu control | `50%`, `60 × 60px` | Different bottom-bar treatment | Measured desktop |
| Buy/sell outer ends | `200px` | Not shown as tabs | Measured |
| New-arrivals upper-left corner | `120px` | `40px` | Measured section radius |
| Load-more surface | `10px` | `5px` | Measured |
| Brand cards | `10px` | `5px` | Measured anchor radius |
| Accessories white image mats | approximately `10px` | Not visually established | Estimated |
| Hero photograph windows | approximately `60px` at the inner corners | Visible top edge is square | Estimated from captures |

Rounding belongs to distinct layers. The product anchor itself reports a zero radius; its white image mat can still have rounded corners. Avoid rounding the entire image-and-description module into one filled card.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Initial header | `1440 × 171px` | `390 × 70.28px` |
| Logo link | `142 × 30px` | `96 × 20.28px` |
| Hero section | `1440 × 864px`, starts at `y=172` | `390 × 930px`, starts at `y=70.28` |
| Individual hero link box | `375.64 × 864px` | `273 × 930px` |
| Main desktop container | approximately `1189.56px` wide | General text container `343.19px` wide |
| Standard product link width | `250.42px` | `180px` |
| Accessories product link width | `257.17px` | `180px` |
| Main collection CTA | `240 × 54px` | `312 × 40px` |
| Small accessories CTA | `100 × 54px` | `80 × 40px` |
| Load-more control | `1189.56 × 140px` | `343.19 × 99px` |
| Sale card link | approximately `245.69px` wide | `175px` wide |
| Brand card link | `306.39 × 445.25px` | `227 × 329.88px` |

The desktop hero visually divides into approximately **52.2% photography / 21.7% copy / 26.1% photography**. A `12fr 5fr 6fr` grid is a useful approximation, not a recovered source rule.

### Runtime Values and Limits

The source exposes `--headerHeight`, `--wHeight`, `--wHeightPx`, `--wHeightFixedPx`, and `--scroll`. At the initial desktop sample, the header variable is `171px`; on mobile it is `70.2812px`.

The mobile sample updates `--wHeightPx` to `844px` but retains `--wHeightFixedPx: 1000px`. Therefore, these observations do not establish a clean `100vh` hero formula. Reproduce the visible composition deliberately rather than treating the retained runtime number as a universal design token.

## Components

### Desktop Header

**Anatomy:** logo → grouped search controls → cart → favorites → circular menu → separate buy/sell switch.

The initial header is a generous 171px paper band. The logo sits about 63px from the left edge. The search area is a pale capsule approximately 498 × 60px, containing an orange “商品を探す” badge followed by size, category/brand, and keyword buttons with small downward chevrons.

Cart and heart icons are unboxed green outlines, roughly 20px wide. The menu is a 60px orange circle with two short white horizontal strokes. At the right, “買う” and “売る” form two 85 × 60px halves of a single pill. The orange buying half has a small downward pointer identifying the current area.

The header remains at the top in the scrolled desktop captures and becomes approximately 101px tall. Persistence and compaction are visible; the positioning implementation, threshold, and transition timing are not supplied.

### Photographic Hero

**Anatomy:** two clipped photograph windows, a cream copy channel, vertical collection labels, and a small location descriptor over a pale image wash.

The left window occupies slightly more than half the desktop width. The narrow copy channel sits right of center, while the second photograph window reaches the right edge. Large rounded inner corners soften the otherwise uninterrupted photographic strips.

Each photograph shows a pair of leather shoes on a wooden stool in a dark interior. Brand names run vertically near the lower edges and link to corresponding collections. The cream column gives the statement a quiet, readable area without covering the shoes with a dark overlay.

On mobile, the logo is followed by a roughly 230px introductory text block. Photography starts at `y=300.28px`. Individual link boxes are 273px wide, exactly 70% of the inspected viewport, so one prominent image and part of the next remain visible. The desktop's second brand group is absent from the mobile rendered text.

The mobile hero link boxes extend below their section rectangle. The next section begins at `y=1000.28px`; do not add the full link height beneath the introduction as ordinary document flow. The starter uses a clipped image region to approximate this relationship.

### Announcement Block

A small heading, dates, and short stock-update messages bridge the photographic opening and the catalog. The observed messages concern September 2026 additions.

The heading is only 18px on desktop and 14px on mobile. Generous padding—130px vertically on desktop, 50px on mobile—keeps this utility content from competing with the hero. The DOM confirms the content and section geometry; individual row styling was not fully pictured.

### Product Module

**Anatomy:** square image mat → condition/stock badge → brand and size → detailed identification → price and tax notation → product number, with a separate favorite button.

The white mat frames the photograph; the accompanying text rests directly on the section background. In the accessories capture, a roughly 257px square mat surrounds a roughly 207px square photograph with about 25px of padding. The outer and inner corners are gently rounded. There is no visible drop shadow.

Condition labels remain small and neutral. Examples include “極上” and “ほぼ展示品程度”; unavailable items add “在庫なし”. Brand, size, model, material, and product ID are substantial parts of the content, not decorative filler. Prices are visually stronger than descriptions, while tax labels and item numbers are quieter.

Product links and heart buttons are separate elements in the supplied DOM. Some favorite-button rectangles extend below the sampled link rectangles, so the link height is not the complete module height. In a new implementation, use a containing article with a sibling favorite button; avoid nesting that button inside the product link.

### New Arrivals and Load More

The desktop section presents eight sampled products in a four-column arrangement. It begins with a large upper-left corner radius and a 32px heading. A broad Sand-colored “もっと見る” button closes the section.

On mobile, sampled product positions form two 180px columns with a 10px gutter. The heading drops to 20px, the section corner to 40px, and the load-more control becomes approximately 343 × 99px.

**Visibility limitation:** mobile product rectangles extend below the recorded section boundary and overlap the load-more area's document range. This is compatible with a clipped or collapsed collection, but the evidence does not establish its exact visible item count or reveal behavior. Do not infer that all eight products are initially visible, or that the control performs a network request.

### Men's and Women's Collections

Desktop collection layouts are deliberately asymmetric. The men's heading and three-column product grid begin around `x=501px`, with the collection CTA in the left-hand area. The women's grid begins around `x=125px`, with its CTA on the right.

Each sampled collection contains six product links. The grid width is about 814px, with 250px cards and 31px gaps. Preserve this offset relationship instead of centering every collection beneath an identical title.

On mobile, both become two-column grids with their main CTA below the products. The Japanese headings use two lines at 20px with 28px leading. The mobile women's section explicitly reports Paper, while the men's section reports Sand.

### Bags and Shoe Trees

Two parallel desktop groups each contain a heading, a small orange “一覧へ” pill, and two products. The groups share the same baseline and card dimensions. Large pale category lettering introduces the transition above them.

On mobile, Bags precedes Shoe Trees vertically. Each retains its own heading/action row and a pair of 180px product columns. This is a stacked pair of categories, not a single mixed four-product grid.

### Sale Rail

The sale section expands Burnt Orange into a full-width background. Its heading and product-link text are white; the collection CTA and two circular controls use Forest Ink.

Measured card positions form a horizontal rail with repeated product entries beyond both viewport edges. Desktop cards are about 246px wide; mobile cards are 175px wide with approximately 10px gaps. Circular controls measure 30px at both viewports.

On mobile, the title comes first, followed by the rail, centered controls, then a 312 × 40px collection CTA. Repetition supports a carousel structure, but the evidence does not establish autoplay, dragging, or the result of pressing either control.

### Brand Rail

A second horizontal sequence presents Japanese and Latin brand names. Its sampled cards have a stable portrait proportion: approximately 306 × 445px on desktop and 227 × 330px on mobile.

The desktop heading/control area is on the right; mobile puts the heading above the cards and controls below. The recorded mobile card centered near `x=82px` leaves partial neighboring cards visible on both sides.

The heading is computed white and the actions orange. The section itself reports a transparent background, and no dedicated capture shows its full backdrop. Do not invent a precise background or card-image composition from that parent value.

### Store Information and Calendar

The store section adds a slower editorial interval to the catalog. Its content introduces the Daikanyama shop, gives contact information, displays a September 2026 calendar, and explains opening hours and fitting reservations.

On mobile, the small orange section label is `12px / 18px`, the introduction is `20px / 30px`, and the main paragraph is `14px / 24.92px`. Contact details and operational notes use `12px / 21.36px`. The calendar's heading and explanatory text are inset farther than the main paragraph—about 49px from the viewport's left edge versus 23px.

A pill links to “店舗紹介・来店予約へ”. Its destination is known from the homepage; the reservation flow was not inspected. Calendar navigation and day-selection behavior are also unverified.

### Favorites and Recently Viewed

Both areas appear in the rendered homepage. The inspected session has empty states: “お気に入り商品はまだありません。” and “閲覧履歴はまだありません。”

The measured mobile sections are each 270px tall on Sand, with 20px headings and modest text messages. Favorites includes a compact list link. The quiet empty state is part of the observed experience; do not replace it with fabricated recommendations or assume a particular persistence mechanism.

### Footer

A broad Forest Ink field turns the catalog's text color into its final background. White text, a reversed logo, thin outlined actions, and a dotted separator establish hierarchy without boxed panels.

The desktop navigation groups are Size, Brand, Category, and Content. Brand links occupy two internal columns. Below the dotted rule, the company block, legal links, Instagram control, and shoe-buyback link form a second tier. Copyright and a small underlined back-to-top control sit near the bottom corners.

The rendered original page identifies the operator as **株式会社TKXコーポレーション**. This is footer business information, not a production credit.

The mobile capture retains two columns for the visible brand links and the Category/Content pair. Company details then stack with natural line wrapping. Instagram and the outlined buyback pill share a row. Keep the company block, legal links, and bottom navigation clear of one another.

### Mobile Bottom Navigation

**Anatomy:** two-line buyback link → paper search capsule → cart icon → divider → menu icon.

The orange bar stays at the viewport bottom in both mobile captures. It is approximately 65px high, starts at `y=779px`, and has rounded upper corners. The search button measures `205 × 45px` at `x=87.55px`, with the label “商品カテゴリー・検索”. The buyback link is white, `11px / 15.4px`, and uses two lines.

The top header is reduced to identity alone. The bottom bar carries the active utilities, including a direct link to the buyback subdomain. Its opened search and menu states were not supplied. The starter preserves this navigation architecture while recommending larger icon hit areas and safe-area clearance.

## Tokens — Motion & Interaction

| Element | Recorded evidence | What can be concluded |
| --- | --- | --- |
| Desktop logo link | `opacity 0.3s` | A 300ms opacity transition is declared; the target opacity was not supplied |
| Desktop menu circle | `background 0.2s` | A short background-color transition is declared |
| Desktop buy/sell links | `background 0.2s` | Color feedback is declared; no destination page was opened |
| Desktop load-more button | `background 0.2s, color 0.2s` | A 200ms visual transition is declared; loading/reveal behavior is unknown |
| Desktop sale/brand controls | `background 0.2s` | Small-control color transitions are declared |
| Hero strips | Repeated brand links and offscreen rectangles; photograph alignment differs between supplied DOM and capture | A translated or repeating strip is strongly suggested; timing and direction are unverified |
| Sale and brand rails | Repeated entries, offscreen positions, and previous/next controls | Carousel structure is supported; autoplay, swipe, wraparound, and easing are unverified |
| Desktop header | Present at the top of scrolled captures, visibly shorter | Persistent navigation and compaction are observed; threshold and timing are unknown |
| Mobile bottom bar | Same viewport-bottom position in opening and footer captures | Persistent bottom navigation is observed |
| Favorites, search, menu, back-to-top | Controls or links are present | Activation outcomes and focus behavior were not exercised |

Many samples report `transition: all` without a nonzero duration, and sampled elements report `animation: none`. Neither establishes the absence of motion in descendants, wrappers, pseudo-elements, or JavaScript-controlled rails.

For a new implementation, keep control feedback around 200–300ms. Choose carousel behavior separately, provide a static or paused option, and do not present an invented autoplay duration as an original token.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Warm Paper | Gives dark photography and compact text room to breathe |
| Collection field | Soft Sand or Paper, depending on section and viewport | Separates long catalog groups without heavy borders |
| Product image mat | White, small radius, generous inset | Frames real inventory photographs |
| Search grouping | Pale capsule containing compact controls | Makes several discovery methods read as one utility |
| Primary action | Burnt Orange pill with white text | Collection access and buying-related navigation |
| Sale field | Full Burnt Orange surface | Creates a substantial promotional interval |
| Footer | Forest Ink with reversed details | Houses dense navigation and business information |
| Mobile utilities | Burnt Orange bar with a Paper search capsule | Keeps shopping tools within reach |

There is no visible general elevation system. Structure comes from surface changes, whitespace, image framing, and restrained rules. The large hero corners and small product corners serve different scales and should remain distinct.

## Imagery

Photography carries the material identity of the site. The hero features paired leather shoes on simple wooden stools, photographed obliquely in a dark shop. Warm highlights reveal polished uppers, broguing, stitching, and shoe trees. Defocused green leaves soften the lower foreground. Preserve the contrast between dark surroundings and warm leather without crushing product detail.

Catalog imagery is more descriptive. The accessories capture shows structured bags against timber backgrounds and wooden shoe trees photographed from above on a stool with gray flooring around it. Their square frames keep different subjects comparable while retaining the shop's tactile setting.

Use two distinct crop policies:

- **Hero:** intentional tall crops, partial neighboring images, and edge-to-edge coverage inside the window.
- **Catalog:** protect the complete item's outline, handles, toes, and heels within a square presentation. Avoid applying the hero crop aggressively to inventory images.

The logo combines a small paired-shoe symbol with the studio.CBR wordmark. Utility icons use simple outlines; the menu uses two horizontal strokes. Do not infer a particular icon package from their appearance.

### Observed Asset References

No image `src` URLs or downloadable asset filenames were supplied. The references below identify the on-page content associated with visible imagery; they are page links, not image files, and their destinations were not inspected.

| Visible subject | Associated original-page link | Treatment |
| --- | --- | --- |
| Edward Green hero photograph | [Collection](https://www.studiocbr.jp/collections/edward-green/stock) | Tall shoe photograph with vertical brand label |
| Dark structured bag | [Product p298](https://www.studiocbr.jp/products/p298) | Square photograph inside a white mat |
| Burgundy structured bag | [Product p299](https://www.studiocbr.jp/products/p299) | Timber background, full bag silhouette |
| Wooden shoe trees | [Product p291](https://www.studiocbr.jp/products/p291) and [Product p249](https://www.studiocbr.jp/products/p249) | Overhead pairs, wood and concrete textures |

Use authorized product and brand assets when implementing this reference. Do not replace actual inventory photographs with generated approximations of an item's condition or identity.

## Layout & Responsive Behavior

The measured document heights are approximately **12,539.61px on desktop** and **12,611.16px on mobile**. This is a long storefront homepage with several shopping and information routes.

Its content sequence is: hero, announcements, new arrivals, men's shoes, women's shoes, bags and shoe trees, sale, brands, store information, favorites, recently viewed, supporting links, and footer navigation.

### Observed Changes

| Area | Desktop | Mobile |
| --- | --- | --- |
| Header | Full discovery tools and buy/sell switch | Logo only at the top |
| Persistent utilities | Compact header remains above scrolled content | Orange bar at the bottom |
| Hero statement | Vertical columns in an offset central channel | Three horizontal lines before photography |
| Hero media | Two visible windows around the copy | One strip with 70vw link widths |
| New arrivals | Four product columns | Two columns; initial clipping/reveal state uncertain |
| Men's/women's collections | Three-column grid offset to alternating sides | Two columns, collection CTA below |
| Bags/shoe trees | Two groups side by side | Two groups stacked, each with two products |
| Section headings | Usually 32px | Usually 20px |
| Collection links | Usually 240 × 54px | Usually 312 × 40px |
| Sale rail | Title/control area to the side | Title above; controls and list link below |
| Brand rail | Right-side heading/control area | Centered portrait card with partial neighbors |
| Footer | Four groups, including two internal brand columns | Visible link groups reorganized into two columns; business details stack |

### Reusable Layout Rules

The measured desktop catalog container occupies about 82.6% of the viewport; the header uses a wider inset. Mobile general text uses approximately 6% side margins, while product grids use only 10px. Keep these three gutter systems separate.

Do not impose one responsive card count on every section. New arrivals use four desktop columns; the men's and women's grids use three within a narrower area; accessories use two within each of two groups; sale and brands use horizontal rails.

Only two viewport widths were inspected. No exact breakpoint, tablet layout, landscape treatment, or intermediate fluid formula is established. The starter's 1100px navigation breakpoint and 768px content breakpoint are recommendations to test, not extracted media queries.

The desktop middle capture exposes section transitions and layered backgrounds that are not fully described by the sampled parent styles. The footer captures are also partial views of a longer region. Preserve known structure and label unpictured decorative details as implementation choices.

## Do’s and Don’ts

### Do

- Keep Paper `#f5f3ed`, Sand `#ede9e0`, Ink `#44514b`, and Orange `#c06223` as the core palette.
- Let the hero's shoe photography supply most of the visual drama.
- Preserve the offset desktop copy channel and the horizontal mobile introduction.
- Frame catalog photographs with white mats while leaving descriptions on the section surface.
- Keep condition, stock status, size, price, and product number explicit.
- Maintain distinct layouts for new arrivals, collections, accessories, and rails.
- Use capsules for actions and restrained outline utility icons.
- Retain the large orange sale interval and deep green footer.
- Keep mobile shopping utilities available at the bottom of the viewport.
- Allow Japanese product descriptions to wrap naturally without hiding important identification.

### Don't

- Don't reduce the homepage to a short promotional composition that omits the catalog and store utilities.
- Don't replace the material palette with pure black, cold gray, and a saturated unrelated accent.
- Don't add shadows to every product or enclose all metadata in white panels.
- Don't use the same corner radius at hero, section, image, and control scales.
- Don't stretch catalog photos into the hero's tall crop proportions.
- Don't shrink the desktop navigation into a crowded mobile header.
- Don't treat duplicated carousel links as additional unique inventory.
- Don't invent menu overlays, cart drawers, image zooms, or favorite persistence from visible icons alone.
- Don't hardcode the sampled September calendar, inventory, or runtime viewport values as permanent content.

## Recommended Implementation Additions

These recommendations describe a new implementation, not verified original behavior.

- Give every icon-only control an accessible name, and make favorite controls sibling buttons with a clear selected state.
- Expand small cart, heart, and carousel targets toward 44 × 44px while retaining compact visible glyphs.
- Provide explicit focus states and preserve text or symbols alongside color-based stock and calendar information.
- Consider the darker optional action color for small white labels while retaining the measured palette in the reference.
- Reserve space for the mobile bar and device safe area so footer links and focused content remain reachable.
- If menus open as dialogs, add focus management, Escape dismissal, and a return path to the triggering control.
- If rails move automatically, provide pause and reduced-motion behavior. Exclude decorative duplicate slides from keyboard navigation and repeated announcements.
- Keep all inventory details available when implementing a collapsed new-arrivals region; confirm its intended initial limit rather than copying ambiguous rectangles.
- Reserve image dimensions and load below-fold photography progressively. Keep the first visible hero image immediately available.
- For new long-form content, consider 16px body text while preserving the observed compact 14px catalog baseline.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#f5f3ed`.
- Alternate collection surface: `#ede9e0`.
- Main text, icons, selling tab, and footer: `#44514b`.
- Main actions and sale field: `#c06223`.
- Product image mats and reversed labels: `#ffffff`.
- Structure: flat fills, photographic depth, restrained dotted rules, and no routine card shadows.

### Overall Prompt

“Create a Japanese specialty resale storefront inspired by the observed studio.CBR homepage. Use warm paper `#f5f3ed`, sand `#ede9e0`, forest ink `#44514b`, and burnt orange `#c06223`. Use Zen Kaku Gothic Antique when available, with Japanese sans-serif fallbacks, medium body text, and bold compact headings. Build an asymmetric desktop hero with tall photographs of polished leather shoes on wooden stools, a narrow vertical Japanese statement channel right of center, and broad rounded inner corners. Follow it with a substantial catalog: four-column new arrivals, alternating three-column collection layouts, paired accessories groups, sale and brand rails, store information, and a deep green footer. Product photos sit in white square mats; condition, size, description, price, stock status, and item number sit below. On mobile, use horizontal hero copy, two-column product grids, stacked accessories groups, and a fixed orange bottom navigation bar. Treat unverified carousel and menu behavior as explicit implementation choices.”

### Example Component Prompts

1. **Desktop header:** “Create a warm-paper header with a small shoe-symbol wordmark at left, a sand search capsule containing a small orange search badge and three dropdown-style filters, green outline cart and heart icons, a 60px orange menu circle, and an orange/green buy-sell pill at right. Preserve the spacious alignment and small downward pointer under the buying half.”
2. **Hero:** “Arrange the desktop hero in approximate 12:5:6 columns: a broad shoe-photo window, a cream channel with three vertical Japanese copy columns, and a narrower photo window. Round the inner photograph corners by about 60px. On a 390px phone, move three horizontal copy lines above a strip of 70vw photograph panels.”
3. **Product module:** “Create a flat resale product module with a square white photo mat, small neutral condition and stock badge, brand and size, wrapping model/material description, strong price, quiet tax notation, and product number. Place the favorite button beside the lower information as a separate interactive element. Use no enclosing white card or drop shadow.”
4. **Accessories groups:** “Place Bags and Shoe Trees in two desktop groups, each with a bold heading, a small orange list pill, and two square product modules. Introduce the area with oversized pale cropped uppercase lettering. Stack the groups on mobile while retaining two products per row.”
5. **Mobile bar:** “Create a fixed orange bar with rounded top corners, a compact two-line buyback link, a large cream category/search capsule, and white cart and two-line menu icons. Aim for a 65px visual height before safe-area allowance. Keep icon hit areas usable and reserve document space below the content.”
6. **Footer:** “Build a deep forest-green footer with white size, brand, category, and content links; split brands into two columns. Separate the business details using a fine dotted rule. Add a reversed wordmark, compact legal links, a circular outlined Instagram control, an outlined buyback pill, and a quiet underlined back-to-top link.”

## Quick Start

### CSS Custom Properties

This is an adaptation, not copied source CSS. It uses measured colors and major dimensions, estimated image framing, and recommended breakpoints. It intentionally leaves rail autoplay and opened navigation states to application code.

Expected component structure:

- `.site-header > .header-inner` contains the logo, desktop tools, and buy/sell switch.
- `.hero` contains `.hero-window--left`, `.hero-copy`, and `.hero-window--right`. Each window contains a `.hero-track` of linked `.hero-card` elements.
- `.hero-statement` contains three block spans in reading order; `.hero-caption` holds the small descriptor.
- `.product-card` contains an `.product-main` anchor and a sibling `.favorite-button`. The link contains the image mat and product metadata.
- `.accessory-groups` contains two groups, each with a heading row and `.accessory-products`.
- `.footer-links` contains Size, Brand, Category, and Content groups; `.footer-brand-list` supplies the internal brand columns.

```css
:root {
  /* Measured source colors */
  --color-paper: #f5f3ed;
  --color-sand: #ede9e0;
  --color-ink: #44514b;
  --color-accent: #c06223;
  --color-white: #ffffff;

  /* Estimated detail color and optional contrast recommendation */
  --color-muted: #a0aaa5;
  --color-accent-accessible: #a14d1b;

  /* Observed family names; font loading is separate */
  --font-site: YakuHanJP, 'Zen Kaku Gothic Antique',
    HiraKakuProN-W3, HiraKakuPro-W3, Meiryo, sans-serif;
  --weight-body: 500;
  --weight-bold: 700;
  --text-body: 14px;
  --text-heading: 32px;
  --text-caption: 12px;
  --tracking-site: 0.42px;

  /* Width approximations derived from the desktop sample */
  --page-width: 82.6087%;
  --header-width: 91.3043%;
  --header-height: 171px;
  --hero-card-width: 26.087vw;
  --grid-gap: 4.3478vw;
  --collection-gap: 2.1739vw;

  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 40px;
  --space-lg: 60px;
  --space-section: 100px;
  --radius-image: 10px;
  --radius-pill: 200px;
  --radius-hero: 60px;
  --radius-section: 120px;
  --mobile-bar-height: 65px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-padding-top: 110px;
}

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

button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-inline-size: 100%; }

.container {
  inline-size: var(--page-width);
  margin-inline: auto;
}

.section-title {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  block-size: var(--header-height);
  background: var(--color-paper);
}

/* Recommended state hook; the source scroll threshold is unknown. */
.site-header.is-compact { --header-height: 101px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: var(--header-width);
  block-size: 100%;
  margin-inline: auto;
}

.site-logo {
  display: block;
  flex: 0 0 auto;
  inline-size: 142px;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-capsule {
  display: flex;
  align-items: center;
  gap: 2px;
  min-block-size: 60px;
  padding: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-sand);
}

.search-intro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 110px;
  min-block-size: 40px;
  margin-inline-end: 4px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.search-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 37px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: transparent;
  font-size: 13.3333px;
  font-weight: 700;
}

.utility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.menu-circle {
  display: grid;
  place-content: center;
  gap: 6px;
  inline-size: 60px;
  block-size: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  transition: background-color 200ms;
}

.menu-circle::before,
.menu-circle::after {
  content: '';
  inline-size: 15px;
  block-size: 1px;
  background: var(--color-white);
}

.buy-sell { display: flex; }

.buy-sell a {
  position: relative;
  inline-size: 85px;
  block-size: 60px;
  color: var(--color-white);
  background: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  transition: background-color 200ms;
}

.buy-sell a:first-child {
  border-radius: 200px 0 0 200px;
  background: var(--color-accent);
}

.buy-sell a:last-child { border-radius: 0 200px 200px 0; }

.buy-sell [aria-current='page']::after {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  border-inline: 7px solid transparent;
  border-block-start: 8px solid var(--color-accent);
  transform: translateX(-50%);
}

.hero {
  display: grid;
  grid-template-columns: 12fr 5fr 6fr;
  block-size: 60vw;
  overflow: hidden;
}

.hero-window { overflow: hidden; }
.hero-window--left { border-radius: 0 60px 60px 0; }
.hero-window--right { border-radius: 60px 0 0 60px; }

.hero-track {
  display: flex;
  block-size: 100%;
}

.hero-card {
  position: relative;
  flex: 0 0 var(--hero-card-width);
  block-size: 100%;
}

.hero-card img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero-brand {
  position: absolute;
  inset-inline-start: 25px;
  inset-block-end: 100px;
  color: var(--color-paper);
  font-size: 18px;
  font-weight: 700;
  writing-mode: vertical-rl;
}

.hero-copy {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 250px;
  min-inline-size: 0;
  background: var(--color-paper);
}

.hero-statement {
  align-self: start;
  justify-self: center;
  margin: 72px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.9;
  writing-mode: vertical-rl;
}

.hero-statement span { display: block; }

.hero-caption {
  display: grid;
  place-content: center;
  margin: 0;
  padding: 20px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  background-image: var(--hero-wash, none);
  background-size: cover;
}

.announcements { padding-block: 130px; }
.announcements .section-title { font-size: 18px; }

.new-arrivals {
  padding-block: 120px 100px;
  border-start-start-radius: var(--radius-section);
  background: var(--color-paper);
}

.product-grid,
.collection-products,
.accessory-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 60px var(--grid-gap);
  margin-block-start: 60px;
}

.product-card {
  position: relative;
  min-inline-size: 0;
  padding-block-end: 44px;
}

.product-main {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  text-decoration: none;
}

.product-media {
  aspect-ratio: 1;
  padding: 25px;
  border-radius: var(--radius-image);
  background: var(--color-white);
}

.product-media img {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 5px;
  object-fit: contain;
}

.product-condition {
  align-self: flex-start;
  margin-block-start: 25px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--color-sand);
  font-size: 12px;
  line-height: 1.4;
}

.product-name {
  margin-block: 10px 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.product-description {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.product-price {
  margin-block: auto 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.product-price small,
.product-sku { font-size: 11px; }
.product-sku { margin-block: 2px 0; }

/* Recommended enlarged target around the small heart glyph. */
.favorite-button {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  color: var(--color-muted);
  background: transparent;
}

.favorite-button svg { inline-size: 20px; }
.favorite-button[aria-pressed='true'] { color: var(--color-accent); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 240px;
  min-block-size: 54px;
  padding: 18px 24px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--color-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.pill--small { min-inline-size: 100px; }
.pill--ink { background: var(--color-ink); }

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 140px;
  margin-block-start: 100px;
  padding: 60px 20px;
  border: 0;
  border-radius: 10px;
  color: var(--color-ink);
  background: var(--color-sand);
  transition: background-color 200ms, color 200ms;
}

.category-section {
  padding-block: 270px 100px;
  background: var(--color-sand);
}

.category-layout {
  display: grid;
  grid-template-columns: 6fr 13fr;
}

.category-layout--reverse { grid-template-columns: 13fr 6fr; }
.category-layout--reverse .category-aside { order: 2; }
.category-aside { align-self: end; }
.collection-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px var(--collection-gap); }

.accessory-section {
  padding-block: 270px 90px;
  background: var(--color-sand);
}

.accessory-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.96vw;
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.accessory-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.105vw;
  margin-block-start: 40px;
}

.sale-section {
  padding-block: 160px;
  color: var(--color-white);
  background: var(--color-accent);
}

/* Static, manually scrollable fallback; autoplay is not assumed. */
.product-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 246px;
  gap: 36px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.product-rail > * { scroll-snap-align: start; }
.sale-section .product-condition { color: var(--color-ink); }

.site-footer {
  padding-block: 100px 45px;
  color: var(--color-white);
  background: var(--color-ink);
}

.footer-links {
  display: grid;
  grid-template-columns: 6fr 6fr 3fr 4fr;
  gap: 20px;
}

.footer-brand-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.footer-links ul { margin: 20px 0 0; padding: 0; list-style: none; }
.footer-links li { margin-block: 8px; }
.footer-links a { text-decoration: none; }

.footer-business {
  margin-block-start: 100px;
  padding-block-start: 100px;
  border-block-start: 2px dotted var(--color-muted);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-block-start: 150px;
  font-size: 12px;
}

.mobile-bar { display: none; }

/* Recommended focus and hover treatments. */
:where(a, button, input):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (hover: hover) {
  .site-logo:hover { opacity: 0.75; }
  .load-more:hover { color: var(--color-white); background: var(--color-ink); }
  .footer-links a:hover { text-decoration: underline; }
}

/* Recommended navigation breakpoint; not extracted from the source. */
@media (max-width: 1100px) {
  body { padding-block-end: calc(var(--mobile-bar-height) + var(--safe-bottom)); }
  html { scroll-padding-top: 80px; }
  .site-header,
  .site-header.is-compact { --header-height: 70.28px; position: relative; }
  .header-inner { inline-size: 88%; }
  .site-logo { inline-size: 96px; }
  .header-tools,
  .buy-sell { display: none; }

  .mobile-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 5px;
    min-block-size: calc(65px + var(--safe-bottom));
    padding: 10px 12px calc(10px + var(--safe-bottom));
    border-radius: 16px 16px 0 0;
    color: var(--color-white);
    background: var(--color-accent);
  }

  .mobile-buyback {
    font-size: 11px;
    font-weight: 700;
    line-height: 15.4px;
    text-decoration: none;
  }

  .mobile-search {
    min-inline-size: 0;
    block-size: 45px;
    padding-inline: 8px;
    border: 0;
    border-radius: 200px;
    color: var(--color-ink);
    background: var(--color-paper);
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-bar .utility-icon {
    inline-size: 44px;
    block-size: 45px;
  }

  .mobile-bar .utility-icon svg { inline-size: 18px; }
}

/* Recommended content breakpoint; validate intermediate widths. */
@media (max-width: 768px) {
  :root {
    --page-width: 88%;
    --text-heading: 20px;
    --hero-card-width: 70vw;
    --radius-section: 40px;
    --grid-gap: 10px;
  }

  .hero { grid-template-columns: 1fr; block-size: auto; }
  .hero-copy {
    order: -1;
    display: block;
    block-size: 230px;
    padding: 50px calc(6vw + 5px) 0;
  }
  .hero-statement {
    margin: 0;
    font-size: 24px;
    line-height: 36px;
    writing-mode: horizontal-tb;
  }
  .hero-caption {
    display: block;
    margin-block-start: 20px;
    padding: 0;
    font-size: 11px;
    line-height: 11px;
    background: none;
  }
  .hero-window--left { block-size: 700px; border-radius: 0; }
  .hero-window--right { display: none; }
  .hero-track { block-size: 930px; }

  .announcements { padding-block: 50px; }
  .announcements .section-title { font-size: 14px; }
  .new-arrivals { padding-block: 50px 60px; }

  .product-grid,
  .collection-products,
  .accessory-products {
    inline-size: calc(100vw - 20px);
    margin-inline: calc((100% - 100vw + 20px) / 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px 10px;
    margin-block-start: 35px;
  }
  .product-media { padding: 15px; }
  .product-condition { margin-block-start: 20px; }

  .pill { min-inline-size: 0; min-block-size: 40px; padding: 13px 20px 15px; font-size: 12px; }
  .pill--collection { display: flex; inline-size: 80vw; margin: 50px auto 0; }
  .pill--small { min-inline-size: 80px; }
  .load-more { min-block-size: 99px; margin-block-start: 50px; padding-block: 40px; border-radius: 5px; }

  .category-section { padding-block: 80px 60px; }
  .category-section--women { background: var(--color-paper); }
  .category-layout,
  .category-layout--reverse { display: flex; flex-direction: column; }
  .category-aside,
  .category-layout--reverse .category-aside { order: 2; align-self: stretch; }

  .accessory-section { padding-block: 170px 40px; }
  .accessory-groups { grid-template-columns: 1fr; gap: 60px; }
  .accessory-products { margin-block-start: 25px; }

  .sale-section { padding-block: 50px 80px; }
  .product-rail { grid-auto-columns: 175px; gap: 10px; }

  .site-footer { padding-block: 60px 40px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 20px; }
  .footer-size,
  .footer-brands { grid-column: 1 / -1; }
  .footer-links { font-size: 12px; }
  .footer-business { margin-block-start: 45px; padding-block-start: 50px; }
  .footer-bottom { margin-block-start: 55px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-logo,
  .menu-circle,
  .buy-sell a,
  .load-more { transition: none; }
  /* Application code should also pause any optional rail autoplay. */
}
```

The starter shows all product items in normal flow. Add any collapsed new-arrivals treatment only after deciding its intended accessible reveal behavior. The rail fallback uses native horizontal scrolling; it does not reproduce an unverified animation. Mobile footer placement above the visible crop and tablet composition are recommended adaptations.

### 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: #f5f3ed;
  --color-sand: #ede9e0;
  --color-ink: #44514b;
  --color-accent: #c06223;
  --font-site: YakuHanJP, 'Zen Kaku Gothic Antique',
    HiraKakuProN-W3, HiraKakuPro-W3, Meiryo, sans-serif;
  --text-section: var(--text-heading);
  --text-catalog: 14px;
  --text-caption: 12px;
  --radius-photo: 10px;
  --radius-pill: 200px;
  --radius-hero: 60px;
  --spacing-catalog-gap: var(--grid-gap);
}
```

## Sources & Evidence

- **Original and final website:** [https://www.studiocbr.jp/](https://www.studiocbr.jp/), reported HTTP 200 with unchanged URL and the title “高級中古革靴の買取販売店舗｜studio.CBR代官山”.
- **Capture record:** September 12, 2026; retrieval timestamp `2026-09-12T11:32:10.775Z`. The record supplies desktop 1440 × 1000 and mobile 390 × 844 viewports. Separate timestamps for individual images were not supplied.
- **Visual evidence:** three original-page desktop captures covering the opening, accessories transition, and footer; two original-page mobile captures covering the opening and footer.
- **Rendered evidence:** homepage text, actual link destinations, element rectangles, font stacks, sizes, weights, colors, backgrounds, padding, radii, transitions, and selected runtime custom properties.
- **Inspection process:** the supplied browser record reports an initial observation of at least five seconds, readiness checks for layout/text stability and image decoding, and traversal through intermediate scroll positions. Perpetual animations were paused during readiness checks and resumed afterward; service workers and SharedWorkers were disabled.
- **Limits:** no new browsing was performed for this reference. Search, menu, favorites, load-more, carousel controls, checkout, calendar actions, and linked destinations were not exercised. Font files, original asset URLs, exact breakpoints, complete animation rules, and several lower-page visual details remain unverified.

This reference describes the current homepage represented by the supplied evidence. Measurements, visual estimates, calculated proportions, and recommended implementation choices are identified separately.