# Youth Portfolio — Style Reference

> Sculptural furniture, precise bilingual typography, and a broad blue wave around an unusually spacious award programme.

**Website:** [award.youthportfolio.or.jp](https://award.youthportfolio.or.jp/)
**Original URL:** https://award.youthportfolio.or.jp/
**Final URL:** https://award.youthportfolio.or.jp/
**Theme:** warm off-white with strong blue identity, green action accents, and a dark photographic opening.
**Inspected:** September 12, 2026, Japan Standard Time. The supplied retrieval timestamp is September 11, 2026 at 20:27:17.863 UTC, equivalent to September 12 at 05:27:17.863 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current award homepage: opening hero, concept narratives, news, 2026 application information, judging criteria, juror cards, profile content present in the DOM, process information, 2025 archive text and links, and contact footer. Visual captures cover the desktop hero, juror section, and footer, plus the mobile hero and footer. Other sections have rendered text and selected computed measurements rather than complete visual coverage.

Youth Portfolio presents a furniture design competition through the visual language of an exhibition and an editorial publication. A sculptural wire chair and its enlarged shadow fill the opening screen. A three-line English title sits against this photograph, while Japanese vertical text establishes a second reading direction. The composition is restrained: the furniture supplies the complexity, and the interface uses clear typography, thin rules, and small controls.

The rest of the homepage is a substantial information resource. It combines a concept statement, practical application guidance, people, and previous work. Blue headings and pale English subtitles organize the long document. A desktop section index, persistent header, and application banner help visitors navigate it. The closing blue field expands the curved brand motif to architectural scale.

## How to Read This Reference

- **Measured** means supplied DOM rectangles, computed styles, or named custom properties. Measurements below are CSS pixels, rounded where useful.
- **Visual estimate** means a dimension or treatment read from a supplied screenshot. It is not a recovered CSS declaration.
- **Calculated** means arithmetic based on measured values or supplied formulas.
- **Recommended** means implementation guidance for a new build. The starter CSS, unverified state handling, and accessibility improvements belong to this category.
- Custom properties beginning with `--yp-` are reusable aliases introduced here. They are not original source variable names.
- Desktop document width is measured at 1429px, and mobile document width at 379px. Both captures reserve an additional 11px within the nominal viewport. Do not reproduce that strip as an intentional page margin.
- Computed font-family lists establish the declared stack, not which font supplied every rendered glyph.
- Profile text and close controls appear in the DOM evidence, but no supplied screenshot shows an opened profile. DOM presence and nonzero geometry do not prove visibility.

## Tokens — Colors

### Default Palette

| Name | Value | Source or status | Role |
| --- | --- | --- | --- |
| Portfolio Blue | `#005EAE` | Source `--wp--preset--color--primary`; also measured on headings and names | Main identity, section emphasis, selected navigation, and the visually matching footer field |
| Warm Canvas | `#FEFEF9` | Source `--wp--preset--color--background`; measured body background | Main document surface and scrolled header appearance |
| Action Green | `#2ABE97` | Source `--wp--preset--color--secondary`; measured on links | LINE access and the application-guidelines button |
| White | `#FFFFFF` | Source white preset; measured text color | Hero typography, reversed information, and blue-field branding |
| Black | `#000000` | Measured body text and hero section background | Reading text and the surface beneath hero media |
| Quiet Blue | `rgb(0 94 174 / 30%)` | Measured on criteria and process translations | Deliberately subdued English secondary labels |
| Supporting Blue | `rgb(0 94 174 / 50%)` | Measured on juror romanizations | Secondary names beneath blue Japanese names |
| Reversed Secondary | `rgb(255 255 255 / 50%)` | Measured on benefit translations | Secondary labels in reversed content |
| Hero Control Wash | `rgb(255 255 255 / 10%)` | Measured on initial Instagram and Menu surfaces | Slight separation from photography without opaque boxes |

Quiet Blue and Supporting Blue are alpha colors. Their appearance depends on the surface behind them. Calculated over Warm Canvas, they are approximately `#B2CEE3` and `#7FAED4`, respectively; these are compositing approximations, not screenshot samples.

The source data includes numerous editor preset colors, gradients, and shadows. Their presence does not establish their use in the page. The visible identity is a small palette, and there is no evidence for a general gradient or shadow system.

### Color States

The header changes appearance between the opening and scrolled captures. Over photography, the logo, navigation, and utility text are white, with translucent Instagram and Menu backgrounds. Over the light document, the brand symbol becomes blue, the wordmark and text navigation appear black, and Instagram and Menu use blue fills. LINE remains green.

The application banner is blue with white information and a green link. It is visible in the scrolled captures but absent from the opening screenshots, although its DOM geometry is available. Its exact visibility threshold was not supplied.

No user-selectable theme is evidenced.

## Tokens — Typography

### Japanese Reading and Interface Stack

**Source family:** `dnp-shuei-gothic-gin-std`, followed by Japanese system fallbacks including Yu Gothic, Hiragino Kaku Gothic Pro, Meiryo, and MS PGothic, then `sans-serif`.

The measured body uses weight `600` and relatively generous tracking of `0.09em`. This gives short Japanese lines a deliberate, composed rhythm. Concept copy has especially open leading, while application instructions use a tighter reading setting.

Use a distinct compact paragraph style for practical information. Applying the broad concept leading to every instruction would make an already long page unnecessarily difficult to scan.

### English Display and Utility Stack

**Source family:** `neue-haas-grotesk-display`, followed by the supplied Japanese sans-serif fallbacks.

This stack is measured on the English hero title, its supporting line, desktop navigation links, News, Design to Furniture, juror romanizations, and profile names. Large titles use weight `400` or `500` and tracking of `-0.02em`. They feel broad and clear rather than heavy.

English subtitles and utility text commonly use `0.02em` tracking. The combination of tightly set large English titles and more openly tracked Japanese text is an important part of the hierarchy.

### Native Control Typography

Menu and Scroll for Details report Arial in their computed styles. Juror buttons also report Arial, including the Japanese-name paragraph, whose Japanese glyphs necessarily depend on fallback coverage. The romanized juror name explicitly returns to the grotesk stack.

Do not assume that every control inherits the body font, and do not treat the reported Arial family as proof of the Japanese glyph face.

### Declared Display Serif

The source declares `--font-family-display` beginning with `heisei-mincho-std`, followed by Japanese Mincho fallbacks. No sampled visible element establishes a role for it in the captured design. It should not become the default heading face in a reproduction.

### Type Scale

All entries in this table are measured unless otherwise noted. Desktop and mobile sizes reflect separate responsive settings.

| Role | Desktop | Mobile | Weight / tracking |
| --- | --- | --- | --- |
| Hero English title | `74.25px / 78.75px` | `44px / 44px` | `500`, `-0.02em` |
| Hero English supporting line | `20.25px / 43.61px` | `13px / 13px` | `500`, `0.02em` |
| Hero vertical Japanese | `20.25px / 33.74px` | `16px / 28.8px` | `600`, `0.22em` |
| Concept Japanese heading | `58.5px / 74.24px` | `30px / 38.07px` | `500`, `-0.02em` |
| Concept body | `15.75px / 42.75px` | `14px / 29.99px` | `600`, `0.09em` |
| News / Design to Furniture | `67.5px / 74.25px` | `32px / 35.2px` | `400`, `-0.02em` |
| Default body | `14.625px / 31.50px` | `13px / 28px` | `600`, `0.09em` |
| Compact instructions | `14.625px / 22.49px` | `13px / 19.99px` | `600`, `0.09em` |
| Application subsection heading | `18px / 27px` | `16px / 24px` | `600`, `0.09em` |
| Criteria label | `20.25px / 20.25px` | `16px / 16px` | `600`, `0.09em` |
| Juror Japanese name | `20.25px`, normal leading | `14px`, normal leading | `600`, `0.02em` |
| Juror romanization | `14.625px / 14.625px` | `13px / 13px` | `400`, `0.02em` |
| Profile name, DOM only | `45px / 74.25px` | `30px / 49.5px` | `500`, `-0.02em` |
| Desktop primary navigation | `13.5px / 29.08px` | Not visible | `400` |
| Application Period | `18px / 18px` | `15px / 15px` | `500`, `0.02em` |
| Banner dates / CTA | `11.25px` | `10px` | `600`; tracking differs by role |
| Scroll for Details | `12.375px` | `11px` | Arial, `400` |

**Section-heading caveat:** application H2 wrappers report `24px`, weight `700`, and `40.8px` leading at both viewports. Their child labels are not fully sampled. The desktop juror screenshot shows a blue Japanese title, approximately 28–32px visually, with a pale English subtitle beneath it. Copying the wrapper's black color as the final heading appearance would be incorrect.

## Tokens — Spacing & Shapes

### Responsive Unit

The source provides separate desktop and mobile fluid bases:

```css
/* Observed desktop values */
--fluid-base: 1280;
--fluid-cap: 1480px;
--font-size-base: min(13 / 1280 * 100vw, 13 / 1280 * 1480px);

/* Observed mobile values */
--fluid-base: 390;
--fluid-cap: 100vi;
--font-size-base: min(13 / 390 * 100vw, 13 / 390 * 100vi);
--gutter: calc(20 / 390 * 100vi);
```

For reuse, define **1u** as one scaled design pixel. At the supplied desktop viewport, `1u = 1.125px`; at the supplied mobile viewport, `1u = 1px`. This alias explains many measured dimensions, but it is not a source `rem` convention. The HTML root remains measured at 16px.

The global content-size preset evaluates to 873px at the desktop viewport. The actual application content column measures about 979px, so that preset is not the universal page container.

### Spacing Scale

| Use | Desktop measurement | Mobile measurement | Interpretation |
| --- | --- | --- | --- |
| Main outer gutter | `56.25px` | `20px` | Desktop corresponds to `50u`; mobile to `20u` |
| Header utility gap | `11.25px` | `10px` | Corresponds to `10u` |
| Desktop primary-link gap | About `28.125px` | Not visible | Calculated from neighboring link rectangles |
| Index number-to-label gap | `13.5px` | Index not visible | Measured grid gap |
| Index row pitch | About `47.28px` | Index not visible | Calculated top-to-top distance |
| Juror column gap | `33.75px` | `22px` | Calculated from card positions |
| Juror row gap | `56.25px` | `30px` | Calculated from card bounds |
| Section H2 child gap | `15.75px` | `10px` | Measured wrapper gap |
| Consecutive application-section clearance | About `160.36px` | About `71.61px` | Calculated for the sampled adjacent sections |
| News vertical padding | `281.25px` | `90px` | Measured |
| Award-information outer padding | `225px` top, `247.5px` bottom | `66px` top, `72px` bottom | Measured |

Large whitespace is structural. It separates narrative chapters and allows the dense application material to read as a distinct part of the experience. Mobile spacing is deliberately reduced rather than proportionally shrinking the entire desktop layout.

### Border Radius and Lines

| Element | Value / appearance | Evidence |
| --- | --- | --- |
| LINE, Instagram, Menu | `4px` radius | Computed |
| Application-guidelines link | `4px` radius | Computed |
| Juror button container | `0px` radius, transparent | Computed |
| Juror photograph | Approximately `4px` corner rounding | Screenshot estimate |
| Juror plus control | Small blue square with slight rounding | Screenshot estimate |
| Index number | Circular, approximately `30.375px` diameter | Anchor grid measurement plus screenshot |
| Header divider | Fine, low-contrast horizontal line | Screenshot observation; exact color not sampled |
| Profile close control | `0 0 0 4px` radius | Computed; open state unverified |
| Footer top edge | Broad asymmetric wave | Screenshot and source SVG-mask variables |

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Rendered document width | `1429px` | `379px` |
| Document height | About `20,335px` | About `15,239px` |
| Opening hero | `1429 × 1000px` | `379 × 844px` |
| Initial header height | `146.25px` | `73px` |
| Scrolled header height | About `106px`, visual estimate | About `76px`, visual estimate |
| Logo link box | `118.125 × 44px` | `77 × 32.27px` |
| LINE control | `63 × 37.125px` | `56 × 33px` |
| Instagram control | `45 × 37.125px` | `40 × 33px` |
| Menu control | `112.5 × 37.125px` | `100 × 33px` |
| Desktop section-index column | `303.81px` | Not visible |
| Application content column | `978.94px`, starting at x `393.81px` | `339px`, starting at x `20px` |
| Juror button | `303.81 × 480.67px` | `158.5 × 264.48px` |
| Footer brand artwork | About `354px` wide | About `243px` wide |
| Application banner | About `453 × 86px` | About `379 × 92px` in the footer capture |

Footer artwork and banner outer dimensions are visual estimates. Logo link bounds should not be confused with the smaller painted artwork inside them.

## Components

### Persistent Header

**Role:** identity, primary navigation, and social access throughout a long page.

The desktop header contains a brand link, a short vertical divider, three primary links, and a right-aligned utility group. The links are Concept, News, and Archives. Their destinations mix in-page anchors with a separate news index. The utility group contains LINE, an Instagram icon, and Menu with two thin horizontal strokes.

A fine rule spans the inner header width. The opening state is transparent over the photograph; scrolled captures show a warm light surface and darker navigation. The header is visibly persistent, but the supplied element data does not identify whether its positioning mechanism is fixed, sticky, or a combination.

At mobile width, the three text navigation links disappear from the visible evidence. The logo and all three utility controls remain in one row. This is a compact, practical header, not a centered logo with a solitary menu icon.

### Photographic Hero

**Role:** establish the award's relationship to experimental furniture and give the page an immediate visual identity.

The hero fills the supplied viewport at both sizes. It uses a gray photographic scene: a black wire-frame chair at the right, a pale wall, a dark floor, and a large shadow spreading to the left. The apparent darkening makes white text legible, but the underlying image treatment and overlay opacity are not supplied.

The H1 is explicitly split into three lines: Furniture, Design, Award. At desktop it begins at approximately x `401.75`, y `412.58`, with a measured layout width of `537.77px`. The visible text uses only part of that width. The supporting line sits below it, while three Japanese vertical columns occupy the right side of the composition.

The quoted Japanese copy is `デザインを学ぶ学生、 / 社会人のための / 家具デザインアワード`. The visual reading direction corresponds to vertical Japanese composition, with fine vertical rules reinforcing the columns. Implementing this with vertical writing is a recommendation consistent with the capture; the writing-mode property itself was not included in the sampled styles.

Mobile is recomposed. The Japanese block begins around x `279`, y `237.39`; the English title begins at x `20`, y `452.59`. The chair extends beyond the right edge. Preserve that assertive crop and the large quiet region above the English title.

### Scroll for Details Control

**Role:** invite continuation into the document.

A small outlined circle with a downward mark precedes a plain English label. It sits at the lower right of the hero, without a filled background. Its measured mobile position is x `248.92`, y `800`, with a `110.08 × 19px` box.

The DOM identifies it as a button. Its resulting scroll destination, easing, and keyboard behavior were not exercised in the supplied evidence.

### Application Banner

**Role:** keep the application information reachable during browsing.

The desktop banner is a compact blue rectangle at the lower right. Its left side contains Application Period and the displayed date range; its right side contains the green `応募要項はこちら` link and a small right arrow. That link resolves to `#guidelines`.

On mobile, the banner spans the rendered width at the bottom. The information column measures 202px, while the green link is `125 × 27.53px`. The footer capture shows the final date character wrapping onto an additional line. That is an observed narrow-layout limitation, not a desirable line-break rule.

The captured banner still displays May 1–September 4, 2026, although the inspection occurred after that range. Describe this as the displayed state; it does not establish that applications remain open.

### Concept Statement

**Role:** explain the award's purpose before the operational details.

The first concept section places a large blue Japanese heading to the left of a narrower text column on desktop. The heading has a measured width of about 573px, while the paragraphs occupy about 378px at x `814.08`.

On mobile, the heading and paragraphs share the 339px main content width. The heading drops from 58.5px to 30px, and the prose changes from approximately 42.75px leading to 30px. The document retains deliberate paragraph breaks instead of turning the statement into a dense block.

### Design to Furniture Chapter

**Role:** develop the relationship between an idea, craft knowledge, and a realized piece of furniture.

The DOM establishes white English heading and Japanese body text in a centered desktop column approximately 510px wide. The heading is `67.5px / 74.25px`; the prose is `15.75px / 42.75px`.

Mobile expands this reading column to approximately 351px, with 14px side offsets in the measured document, and reduces the heading to 32px. This is a specific exception to the more common 20px mobile gutter.

The supplied screenshots do not cover the chapter's backdrop. Its reversed text is verified; the precise background image, fill, and compositing are not.

### News Summary

**Role:** provide current notices without dominating the homepage.

On desktop, News is a large blue heading in a left column, with View All beneath it. The dated announcement is offset to the right. The observed entry is dated April 4, 2026 and links to the notice titled `Webサイト リニューアルのお知らせ`.

On mobile, News and View All share a top row, with the announcement beneath. The section's vertical padding reduces from 281.25px to 90px. Keep this as a restrained editorial list rather than inventing a news-card carousel.

### Application Section Index

**Role:** navigate seven substantial groups of award information.

The desktop index sits at the left of the application content. Each row combines an outlined numbered circle with a Japanese label and a smaller English translation. The destinations are Guidelines, How to Apply, Prizes and Benefits, Judging Criteria, Jury Members, Process, and Caution.

The selected treatment fills the number circle blue and changes the label emphasis to blue. In the supplied juror screenshot, item 04 remains highlighted while the Jury Members heading is visible. This establishes the captured state, not the exact rule used to track sections.

The index remains near the top of the supplied scrolled desktop capture. Its precise sticky boundary and active-section threshold are unverified. It is absent from the mobile visible-text and link lists.

### Bilingual Section Heading

**Role:** repeat a recognizable heading pattern across the information area.

The visible desktop juror heading starts with a small blue emblem related to the brand symbol. A strong blue Japanese label sits beside it; a pale English translation occupies the next line. The heading is followed by substantial breathing room before the content begins.

The source includes an inline SVG `--icon-logo` token. Use the supplied emblem when available instead of substituting a generic flag or triangle. Preserve the Japanese-first hierarchy; the page is bilingual in selected labels, not a fully parallel translation of every paragraph.

### Guidelines and Application Steps

**Role:** make eligibility, timing, submissions, and subsequent work understandable.

Guidelines uses subsection headings followed by text or lists for eligibility, theme, intended use scenarios, and the application period. How to Apply contains six numbered stages, from entry through manufacture and exhibition.

At desktop width, the step heading column measures approximately 316px, with explanatory text beginning at x `740.38`. Most explanation blocks are approximately 632px wide. The initial entry stage also includes a green square LINE-linked element measuring `123.75px` on each side; its internal artwork is not included in the evidence.

On mobile, headings and explanations stack at x `20` across 339px. A green text link labeled `LINE登録はこちら` replaces the desktop-only presentation of that entry affordance. The compact body style uses approximately 20px leading. Keep numbered stages and note paragraphs together when they reflow.

### Benefits, Criteria, and Process

**Role:** distinguish what the award offers, how work is assessed, and what participants should expect.

The benefits content comprises Scholarship and Production. White primary text and half-opacity white translations are measured. The two groups sit side by side on desktop and occupy separate vertical positions on mobile. Their parent surface is not sampled, so its exact fill and outline should not be claimed from the child text alone.

Judging Criteria contains five numbered items. Desktop measurements establish two columns; mobile measurements establish one. Each item has a blue Japanese title, a pale English subtitle, and compact black explanation text. The categories are Originality, Creativity, Feasibility, Social Impact, and Sustainability.

Process contains three groups arranged across desktop and stacked on mobile. Each combines a number, bilingual title, and explanatory paragraph. The measured desktop text interiors are approximately 224px wide; mobile interiors widen to 277px. These sections are informational content, with no verified accordion behavior.

### Juror Card Grid

**Role:** introduce the people assessing the work.

Six jurors occupy a three-column desktop grid, followed by a separately titled technical-director entry. The mobile grid has two columns, not one.

Each juror is a button containing a portrait, a small blue plus marker at the photograph's lower right, a blue Japanese name, and a lighter romanized name. The button itself is transparent and square-cornered. There is no visible surrounding card surface or shadow.

The desktop photographs are approximately `304 × 407px` in the screenshot, close to a 3:4 portrait ratio. Their light gray or cool blue-gray backgrounds provide consistency without erasing the natural color of clothing and skin. Portraits share a similar upper-body crop.

The card's total measured desktop height is 480.67px. On mobile it becomes 264.48px with a width of 158.5px. Names shrink independently from the portrait geometry, maintaining a 14px Japanese label and a 13px romanization.

The plus marker and button semantics indicate a detail affordance. They do not independently prove the exact presentation of the detail view.

### Profile Detail Structure — DOM Only

**Role:** provide a longer biography and affiliation for a selected person.

The evidence contains seven profile records with Profile, a prominent English name, Name and Affiliation fields, and Japanese biography text. The desktop profile text region begins at x `906.75` and measures `432.25px` wide. The mobile region begins at x `20` and measures `339px` wide, with Profile positioned below y `452px`.

These bounds are consistent with a desktop side-by-side composition and a vertically arranged mobile detail, but no open-state capture establishes the complete layout. A blue close control measures approximately 79.88px square on desktop and 57px on mobile; a close SVG token is also declared.

Opening, dismissal, backdrop treatment, focus trapping, scroll containment, and transition timing remain unverified. The Technical Director label refers to furniture realization in the programme text, not to website development.

### Archives and Presentation Content

**Role:** connect the current award to completed work and previous participants.

The rendered text establishes Archives 2025 with Grand Prize, Excellence Awards, and Selected Works groups. Entries use Product Title, Name, and School metadata. Cloud Chair, Lucro, and Tawayura have Interview links to individual archive pages. Five further selected works are named.

A Top 8 Presentation section follows, with explanatory text and a caption referring to the 2025 presentation. Playback controls, media technology, archive image crops, and archive grid dimensions are not covered by the supplied screenshots or sampled rectangles.

For reuse, preserve the award-category hierarchy and project metadata. Do not invent a particular archive carousel, player, or gallery arrangement as an observed feature.

### Contact Footer

**Role:** close the document with a strong brand impression and practical institutional information.

The desktop footer is dominated by a saturated blue field whose top edge follows a large asymmetric curve. The wave is broad and shallow toward the left and center, then descends strongly toward the right. It relates to the curved brand symbol without becoming a repeated decorative pattern.

A large white logo occupies the left, while Contact, the organization information, email, representatives, and Collaboration with occupy the right. In the screenshot, the logo is approximately 354px wide at x `248`; the contact column begins around x `844`. Copyright is small and subdued at the lower left.

The original footer identifies the operator as `一般社団法人ユースポートフォリオ` and shows `別注家具製作所` under Collaboration with. The programme independently describes the latter's furniture-production role. These are original-page organizational observations; no website-production team is identified by the inspected page evidence.

Mobile stacks the logo and contact content into a narrower column approximately 243px wide, beginning at x `68`. Copyright is centered lower down. The supplied mobile footer capture is already within the blue field; the top wave is not visible, so its absence from that image does not prove that it is removed at the mobile breakpoint.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| Header color change | `background-color 0.55s, color 0.55s` | A 550ms color transition is defined; screenshots establish two appearances |
| LINE and guidelines-link colors | `color 0.55s cubic-bezier(0.45, 0, 0.55, 1), background-color 0.55s cubic-bezier(0.45, 0, 0.55, 1)` | Duration and easing are measured; hover endpoint colors were not supplied |
| General easing | `--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1)` | Declared reusable source token |
| Outgoing easing | `--ease-out: cubic-bezier(0.61, 1, 0.88, 1)` | Declared token; use on a specific animation is not established |
| Application-banner visibility | Present in scrolled captures, absent in opening captures | State difference observed; trigger and animation unknown |
| Section index | Anchor links and one visible selected state | Navigation destinations established; scroll tracking algorithm unknown |
| Menu | Button plus menu text in the DOM | Closed affordance established; open appearance and behavior unknown |
| Juror details | Buttons, plus markers, biography content, close controls | Detail structure established; opening and closing not exercised |
| Footer wave | Screenshot silhouette and SVG mask variables | Shape evidence, not animation evidence |
| Hero media | Static captures of the photographic scene | No basis to specify video, slideshow, parallax, or autoplay |

Many sampled elements report `animation: none` and a generic `transition: all`. This does not provide a meaningful duration for every element and does not establish the absence of scripted or ancestor-driven motion.

The capture process waited for initial stability and visible finite animations. It temporarily paused perpetual animation during readiness checks, then resumed it. These procedures are not evidence that this particular page contains a perpetual animation. No frame sequence or click interaction log was supplied.

**Recommended motion approach:** retain the measured 550ms color transitions, keep any added panel movement restrained, and provide reduced-motion handling. Additional image zooms, parallax, or wave movement would be new design decisions.

## Surfaces

| Layer | Appearance | Structural role |
| --- | --- | --- |
| Opening | Dark, gray photographic field over a black section base | Furniture and white typography establish identity |
| Main document | Warm off-white with black reading text | Consistent background for a long information resource |
| Scrolled header | Light surface, blue symbol, dark navigation | Persistent orientation above content |
| Hero utility controls | White at 10% opacity | Small controls remain visible over the image |
| Juror cards | Photography directly above text on the page canvas | People are grouped by alignment and spacing |
| Blue footer | Large flat color field with a curved top boundary | Strong closing identity and reversed contact content |
| Application banner | Blue information surface with green action | Persistent access to guidelines |
| Profile and menu overlays | Complete appearance unverified | Require further inspection before faithful implementation |

The visible design does not rely on elevation. Separation comes from whitespace, color fields, type hierarchy, image edges, and thin rules.

## Imagery

Furniture photography is the opening's principal design asset. Its appeal comes from material and geometry: the chair's irregular black lattice, thin legs, the broad shadow, and the horizontal junction between wall and floor. The space around the object is as important as the object itself.

The mobile photograph uses a much tighter crop while preserving the chair's recognizable lattice and the large shadow. A faithful implementation needs art direction by viewport, not merely a smaller copy of the desktop text overlay.

Juror photography has a different purpose and treatment. The three visible portraits retain natural skin tones, dark blue clothing, and soft neutral backgrounds. Do not apply the hero's gray rendering indiscriminately to every image.

Brand graphics are clean and flat. The white or blue symbol has an angular left side and a flowing lower edge. The footer wave extends this curved vocabulary; Instagram, arrows, and close controls remain small supporting elements.

### Observed Asset References

No hero, portrait, or full-logo file URLs were included. Do not invent original asset paths.

| Asset | Evidence reference | Confirmed use / limitation |
| --- | --- | --- |
| Wire-frame chair scene | Desktop and mobile opening captures | Full-viewport photographic composition; file and media implementation unknown |
| Juror portraits | Desktop juror capture and button geometry | Consistent portrait treatment; image source URLs unknown |
| Brand wordmark and symbol | Header and footer captures | White and blue/dark variants; full asset path unknown |
| Small section emblem | Source `--icon-logo` SVG data URL | Brand-related heading marker |
| Instagram icon | Source `--icon-instagram` SVG data URL | Header social control |
| Small right arrow | Source `--icon-arrow-right` SVG data URL | Compact directional link detail |
| Close icon | Source `--icon-close` SVG data URL | Available close-control artwork; open detail not captured |
| Wave masks | `--mask-wave-top-right`, `--mask-wave-top-left`, `--mask-wave-bottom-right`, `--mask-wave-bottom-left` | Multiple SVG curve variants are declared; individual application is not fully sampled |

Use authorized original assets when available. The CSS below reconstructs a reusable shell; it does not supply the furniture photograph, portraits, or brand artwork.

## Layout & Responsive Behavior

### Desktop Composition

The homepage uses multiple coordinated widths. The header and award-information area have approximately 56px outer gutters. The application content is offset by a 304px index column and a 34px gap, producing a main content start near x `394`. Concept and news sections use different editorial alignments rather than inheriting this application grid.

The juror grid fills the 979px application column with three approximately 304px cards. Criteria uses two columns; Process uses three narrower information groups. The footer returns to a large two-column composition with substantial empty blue space.

### Mobile Composition

| Element | Observed change at 390 × 844 |
| --- | --- |
| Header | Text navigation disappears; logo, LINE, Instagram, and Menu remain |
| Hero | English moves to the lower left; vertical Japanese sits above it at the right |
| Main gutter | Generally 20px, producing a 339px content column |
| Concept | Heading and prose stack; spacing and leading reduce |
| News | Heading and View All share a row, followed by the announcement |
| Application index | Not visible |
| Application steps | Heading and explanation become a vertical sequence |
| LINE entry affordance | A labeled green text link is visible |
| Benefits | Two groups stack vertically |
| Criteria | Two desktop columns become one |
| Jurors | Three desktop columns become two, with a 22px column gap |
| Process | Three desktop groups become one vertical sequence |
| Footer | Brand and contact content stack within a narrower centered column |
| Application banner | Becomes a bottom strip spanning the rendered document width |

The exact breakpoint between these modes is not included. Do not derive a specific source media query from the two endpoint captures.

The mobile document is shorter overall despite having more stacked content. Smaller type, shorter photographs, and greatly reduced chapter spacing account for this; mobile is not a uniform scale transform of desktop.

### Implementation Boundaries

The opening title positions are measured at one desktop and one mobile aspect ratio. They do not establish a universal percentage-positioning formula. Short landscape screens, very narrow phones, enlarged text, and intermediate tablet widths remain untested.

The persistent banner needs layout clearance and wrapping that accommodates complete dates. The crowded mobile header also merits testing beyond the provided viewport. The starter uses a consistent right gutter as a recommended refinement; the measured mobile Menu control extends beyond the header's nominal inner gutter.

## Do’s and Don’ts

### Do

- Keep `#005EAE`, `#FEFEF9`, and `#2ABE97` as the primary color relationship.
- Give furniture photography enough scale and empty space to carry the opening.
- Preserve the three-line English hero title and separate vertical Japanese composition.
- Pair restrained English grotesk typography with more openly tracked Japanese text.
- Use generous spacing for narrative chapters and compact leading for instructions.
- Retain the desktop index and the mobile two-column juror grid.
- Present portraits directly on the page canvas, with small plus markers and bilingual names.
- Keep green concentrated in the actual entry and guidelines pathways.
- Use a broad asymmetric wave and large reversed brand artwork for the closing field.
- Label unobserved overlay and media behavior as implementation decisions.

### Don't

- Don't reduce the homepage to a hero and a single conversion section; its guidance and archive are substantial parts of the site.
- Don't replace the furniture photograph with a generic office interior.
- Don't center all mobile hero text or force the entire chair into view.
- Don't turn every content group into a raised, heavily rounded card.
- Don't apply a grayscale filter to the natural-color juror portraits.
- Don't treat every declared editor color, shadow, or serif family as active visual styling.
- Don't make the desktop section index a permanent narrow mobile sidebar.
- Don't promote the small green action treatment into a page-wide decorative color system.
- Don't infer animated waves, video backgrounds, smooth scrolling, or modal mechanics from static evidence.
- Don't preserve the banner's isolated final date character as an intentional mobile layout detail.

## Recommended Implementation Additions

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

- Give the brand, Instagram, plus affordances, and close controls explicit accessible names. A juror button should include the person's name and the purpose of opening a profile.
- If profiles or menus use modal dialogs, implement keyboard opening, Escape dismissal, focus containment, and focus return.
- Add visible focus indicators that work on both the cream surface and photography.
- Preserve the compact visual controls while providing adequate touch targets, especially for the 33px-high mobile header controls and smaller banner link.
- Check contrast for pale English subtitles and small white text on green. Essential information should not depend on a low-opacity caption.
- Keep full dates together and let the application banner grow or reflow. Reserve space so it does not cover the final content.
- Drive application messaging from maintained campaign data so the displayed state can change after the deadline.
- Offset anchor targets for the persistent header. If a section index is used, expose its selected state semantically.
- Load the licensed fonts deliberately and verify layout with fallback fonts. Use stable image dimensions and responsive crops to avoid shifts.
- Test reduced motion, text enlargement, narrow phones, and short landscape screens. Those conditions are outside the supplied inspection.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#FEFEF9`.
- Primary identity and headings: `#005EAE`.
- Main reading text: `#000000`.
- Hero and blue-field text: `#FFFFFF`.
- Entry and guidelines links: `#2ABE97`.
- Secondary English captions: blue at 30–50% opacity in the observed design; strengthen contrast where required.
- Hero utility surfaces: white at 10% opacity.
- Shape language: thin rules, 4px control corners, circular index numbers, and a broad footer wave.

### Overall Prompt

“Create an editorial furniture-award homepage inspired by Youth Portfolio. Use warm off-white `#FEFEF9`, clear blue `#005EAE`, black reading text, and green `#2ABE97` for entry-related links. Begin with a full-height, darkened furniture photograph featuring a sculptural wire chair and its shadow. Overlay a medium-weight English title split into Furniture, Design, Award, with a small English supporting line and a separate three-column vertical Japanese statement. Continue with spacious concept chapters, a restrained news list, detailed application information, a numbered desktop section index, juror portraits, and a past-work archive. Finish with a large blue field, an asymmetric wave edge, oversized white branding, and contact information. Recompose mobile deliberately: hide desktop text navigation and the section index, retain two portrait columns, and stack process and footer content.”

### Example Component Prompts

1. **Hero:** “A full-viewport photograph of an experimental black wire chair against a gray wall, with its large shadow spreading left. White, medium-weight grotesk title on three lines near the middle-left; vertical Japanese copy to its right. Small unfilled scroll control at the lower right. On mobile, move the English title to the lower left and the Japanese columns above it on the right.”
2. **Header:** “A restrained full-width header with a compact brand link, thin divider, Concept, News, and Archives links, followed by green LINE, Instagram, and a two-stroke Menu control. Use white details over photography and a warm-white surface with blue controls after the opening. Keep 4px corners and small labels.”
3. **Section index:** “Seven compact navigation rows on warm off-white. Each row has a thin blue numbered circle, a Japanese title, and a small muted English subtitle. Selected state fills the circle blue. Keep the index beside a broad content column on desktop; provide a different compact navigation treatment on mobile.”
4. **Juror grid:** “Three equal portrait columns on desktop and two on mobile. Cool neutral studio backgrounds, approximately 3:4 portraits, a small blue plus marker at each image's lower right, blue Japanese names, and lighter romanizations. Transparent card containers, no elevation.”
5. **Application banner:** “A compact blue information dock containing Application Period, a complete date range, and a small green guidelines link with an arrow. Float it at the lower right on desktop and make it a full-width bottom strip on mobile. Keep date units intact when wrapping and reserve content clearance.”
6. **Footer:** “A large flat blue closing field with a single asymmetric wave along its top edge. Place a large white brand mark on the left and contact information plus a collaboration mark on the right. Stack these into a narrower centered column on mobile; use small subdued copyright text.”
7. **Evidence-aware extension:** “Implement profile and menu behavior as explicitly new, accessible interactions. Preserve the observed typography and palette, but do not claim a particular original overlay layout, backdrop, or animation without an open-state reference.”

## Quick Start

### CSS Custom Properties

This is a **recommended adaptation**, not a recovered stylesheet. It keeps a conventional root font size and expresses the desktop fluid scale through `--yp-u`. The mobile breakpoint at 60rem is a starter choice; the original breakpoint is unknown. Hero positions are calibrated to the supplied compositions. The darkening overlay and footer curve are approximations.

Load authorized images and licensed font resources separately. The CSS does not implement menu or profile logic, active-section tracking, or banner visibility. Use explicit state attributes and keep hidden controls out of keyboard navigation.

```css
:root {
  /* Source-backed palette */
  --yp-paper: #fefef9;
  --yp-blue: #005eae;
  --yp-green: #2abe97;
  --yp-ink: #000;
  --yp-white: #fff;
  --yp-blue-quiet: rgb(0 94 174 / 30%);
  --yp-blue-support: rgb(0 94 174 / 50%);

  /* Declared source families; loading is a separate concern */
  --yp-font-jp: 'dnp-shuei-gothic-gin-std', 'Yu Gothic',
    YuGothic, 'Hiragino Kaku Gothic Pro', Meiryo,
    'MS PGothic', sans-serif;
  --yp-font-en: 'neue-haas-grotesk-display', 'Yu Gothic',
    YuGothic, 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;

  /* One scaled design pixel; the root remains conventional */
  --yp-u: min(0.078125vw, 1.15625px);
  --yp-gutter: calc(50 * var(--yp-u));
  --yp-gap: calc(30 * var(--yp-u));
  --yp-index-width: calc(270 * var(--yp-u));
  --yp-header-open: calc(130 * var(--yp-u));
  --yp-header-compact: calc(94 * var(--yp-u));
  --yp-body: calc(13 * var(--yp-u));
  --yp-hero-size: calc(66 * var(--yp-u));
  --yp-radius: 4px;

  /* Source-backed color transition */
  --yp-color-duration: 550ms;
  --yp-ease: cubic-bezier(0.45, 0, 0.55, 1);

  /* Recommended starting values, not measured source tokens */
  --yp-rule: rgb(0 0 0 / 10%);
  --yp-hero-shade: rgb(0 0 0 / 32%);
  --yp-dock-clearance: 140px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--yp-ink);
  background: var(--yp-paper);
  font-family: var(--yp-font-jp);
  font-size: var(--yp-body);
  font-weight: 600;
  line-height: 2.1538;
  letter-spacing: 0.09em;
}

img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

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

/* Recommended fixed implementation of the observed persistence */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--yp-header-compact);
  padding-inline: var(--yp-gutter);
  color: var(--yp-ink);
  background: var(--yp-paper);
  transition: background-color 550ms, color 550ms;
}

.site-header[data-surface='photo'] {
  height: var(--yp-header-open);
  color: var(--yp-white);
  background: transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  border-bottom: 1px solid var(--yp-rule);
}

.site-header[data-surface='photo'] .header-inner {
  border-color: rgb(255 255 255 / 12%);
}

.brand-link {
  flex: 0 0 calc(105 * var(--yp-u));
}

.brand-link img {
  width: calc(94 * var(--yp-u));
}

.primary-nav {
  display: flex;
  gap: calc(25 * var(--yp-u));
  margin-inline-start: calc(30 * var(--yp-u));
  padding-inline-start: calc(30 * var(--yp-u));
  border-inline-start: 1px solid rgb(128 128 128 / 20%);
  font: 400 calc(12 * var(--yp-u)) / 1.3 var(--yp-font-en);
  letter-spacing: 0.02em;
}

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

.header-actions {
  display: flex;
  gap: calc(10 * var(--yp-u));
  margin-inline-start: auto;
}

.utility {
  display: grid;
  place-items: center;
  height: calc(33 * var(--yp-u));
  border: 0;
  border-radius: var(--yp-radius);
  color: var(--yp-white);
  background: var(--yp-blue);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.utility-line {
  width: calc(56 * var(--yp-u));
  background: var(--yp-green);
  font-size: calc(11 * var(--yp-u));
}

.utility-instagram { width: calc(40 * var(--yp-u)); }

.utility-menu {
  grid-template-columns: 1fr 1fr;
  gap: calc(10 * var(--yp-u));
  width: calc(100 * var(--yp-u));
  padding-inline: calc(15 * var(--yp-u));
  font: 400 12px Arial, sans-serif;
}

.site-header[data-surface='photo'] .utility:not(.utility-line) {
  background: rgb(255 255 255 / 10%);
}

.color-action {
  transition:
    color var(--yp-color-duration) var(--yp-ease),
    background-color var(--yp-color-duration) var(--yp-ease);
}

/* Use authorized light and dark logo variants with header state */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  color: var(--yp-white);
  background: #000;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yp-hero-shade);
}

.hero-copy {
  position: absolute;
  top: 41.25%;
  left: calc(50% - 278 * var(--yp-u));
  width: calc(478 * var(--yp-u));
}

.hero-title {
  margin: 0;
  font-family: var(--yp-font-en);
  font-size: var(--yp-hero-size);
  font-weight: 500;
  line-height: 1.0606;
  letter-spacing: -0.02em;
}

.hero-title span { display: block; }

.hero-subtitle {
  margin: calc(6 * var(--yp-u)) 0 0;
  font: 500 calc(18 * var(--yp-u)) / 2.1538 var(--yp-font-en);
  letter-spacing: 0.02em;
}

.hero-jp {
  position: absolute;
  top: 42.38%;
  left: calc(50% + 194 * var(--yp-u));
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: calc(18 * var(--yp-u));
  line-height: 1.666;
  letter-spacing: 0.22em;
}

.hero-jp span {
  display: block;
  border-right: 1px solid rgb(255 255 255 / 55%);
}

.hero-scroll {
  position: absolute;
  right: var(--yp-gutter);
  bottom: var(--yp-gutter);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--yp-u));
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: 400 calc(11 * var(--yp-u)) Arial, sans-serif;
}

.hero-scroll-mark {
  display: grid;
  place-items: center;
  width: calc(18 * var(--yp-u));
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
}

/* Long-form content uses more than one reading density */
.concept-copy {
  font-size: calc(14 * var(--yp-u));
  line-height: 2.714;
}

.dense-copy { line-height: 1.538; }

.award-layout {
  display: grid;
  grid-template-columns: var(--yp-index-width) minmax(0, 1fr);
  gap: var(--yp-gap);
  margin-inline: var(--yp-gutter);
  padding-block: calc(200 * var(--yp-u));
}

.award-index {
  position: sticky;
  top: calc(var(--yp-header-compact) + 36px);
  align-self: start;
}

.award-index a {
  display: grid;
  grid-template-columns: calc(27 * var(--yp-u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(12 * var(--yp-u));
  margin-bottom: calc(15 * var(--yp-u));
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
}

.index-number {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--yp-blue-support);
  border-radius: 50%;
  color: var(--yp-blue);
  font-family: var(--yp-font-en);
  font-size: calc(11 * var(--yp-u));
}

.award-index a[aria-current='location'] {
  color: var(--yp-blue);
}

.award-index a[aria-current='location'] .index-number {
  color: var(--yp-white);
  background: var(--yp-blue);
}

.index-label small {
  display: block;
  margin-top: 4px;
  color: #707070;
  font-family: var(--yp-font-en);
  font-weight: 400;
  letter-spacing: 0;
}

.award-section + .award-section {
  margin-top: calc(142.5 * var(--yp-u));
}

.award-section {
  scroll-margin-top: calc(var(--yp-header-compact) + 32px);
}

.section-title {
  display: grid;
  gap: calc(14 * var(--yp-u));
  margin: 0 0 calc(60 * var(--yp-u));
  color: var(--yp-blue);
}

/* Visible child sizing is an approximation from the capture */
.section-title .jp {
  font-size: calc(28 * var(--yp-u));
  font-weight: 600;
  line-height: 1.3;
}

.section-title .en {
  color: var(--yp-blue-quiet);
  font: 400 calc(13 * var(--yp-u)) / 1 var(--yp-font-en);
  letter-spacing: 0.09em;
}

.application-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: calc(27 * var(--yp-u));
  margin-block: calc(60 * var(--yp-u));
}

.criteria-grid,
.process-grid,
.juror-grid {
  display: grid;
  gap: var(--yp-gap);
}

.criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.juror-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: calc(50 * var(--yp-u));
}

.juror-card {
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.juror-portrait {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--yp-radius);
}

.juror-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.juror-plus {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 33px;
  aspect-ratio: 1;
  border-radius: 2px;
  color: var(--yp-white);
  background: var(--yp-blue);
  font: 400 24px / 1 Arial, sans-serif;
}

.juror-name {
  display: block;
  margin-top: calc(20 * var(--yp-u));
  color: var(--yp-blue);
  font: 600 calc(18 * var(--yp-u)) / 1.5 Arial, sans-serif;
  letter-spacing: 0.02em;
}

.juror-name-en {
  display: block;
  margin-top: 7px;
  color: var(--yp-blue-support);
  font: 400 var(--yp-body) / 1 var(--yp-font-en);
  letter-spacing: 0.02em;
}

.application-dock {
  position: fixed;
  z-index: 40;
  right: calc(20 * var(--yp-u));
  bottom: calc(20 * var(--yp-u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(25 * var(--yp-u));
  width: min(calc(402 * var(--yp-u)), calc(100% - 32px));
  padding: calc(20 * var(--yp-u));
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--yp-radius);
  color: var(--yp-white);
  background: var(--yp-blue);
}

.dock-title {
  margin: 0;
  font: 500 calc(16 * var(--yp-u)) / 1 var(--yp-font-en);
  letter-spacing: 0.02em;
}

.dock-dates {
  display: block;
  margin-top: 4px;
  font-size: calc(10 * var(--yp-u));
  line-height: 1.8;
}

.dock-dates time { white-space: nowrap; }

.dock-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--yp-u));
  min-width: calc(125 * var(--yp-u));
  padding: calc(2 * var(--yp-u)) calc(10 * var(--yp-u));
  border-radius: var(--yp-radius);
  color: var(--yp-white);
  background: var(--yp-green);
  font-size: calc(10 * var(--yp-u));
  line-height: 2.15;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Approximate curve; substitute the authorized source mask if available */
.site-footer {
  position: relative;
  margin-top: min(18.3vw, 270px);
  padding: 120px var(--yp-gutter) var(--yp-dock-clearance);
  color: var(--yp-white);
  background: var(--yp-blue);
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: auto 0 calc(100% - 1px);
  height: min(18.3vw, 270px);
  background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1280 260%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23005eae%22 d=%22M0 24C260 80 380 10 640 30C940 50 1160 125 1280 260H0Z%22/%3E%3C/svg%3E') center / 100% 100% no-repeat;
}

.footer-inner {
  display: grid;
  grid-template-columns: calc(315 * var(--yp-u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(215 * var(--yp-u));
  width: min(100%, calc(830 * var(--yp-u)));
  margin-inline: auto;
}

.footer-contact { line-height: 1.55; }
.footer-contact a { color: inherit; overflow-wrap: anywhere; }
.footer-contact p + p { margin-top: 1.5em; }

.footer-caption {
  font-family: var(--yp-font-en);
  font-weight: 400;
  letter-spacing: 0;
}

.footer-copyright {
  margin-top: 120px;
  color: rgb(255 255 255 / 50%);
  font-size: 12px;
}

/* Recommended focus treatment */
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 60rem) {
  :root {
    --yp-u: 0.2564102564vi;
    --yp-gutter: calc(20 * var(--yp-u));
    --yp-gap: calc(22 * var(--yp-u));
    --yp-header-open: calc(73 * var(--yp-u));
    --yp-header-compact: calc(73 * var(--yp-u));
    --yp-hero-size: calc(44 * var(--yp-u));
  }

  .primary-nav { display: none; }
  .brand-link { flex-basis: calc(77 * var(--yp-u)); }
  .brand-link img { width: 100%; }

  .hero { min-height: max(720px, 100svh); }
  .hero-image { object-position: 60% center; }

  .hero-copy {
    top: 53.625%;
    left: var(--yp-gutter);
    width: calc(100% - 2 * var(--yp-gutter));
  }

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

  .hero-subtitle {
    margin-top: calc(18 * var(--yp-u));
    font-size: calc(13 * var(--yp-u));
    line-height: 1;
  }

  .hero-jp {
    top: 28.125%;
    right: calc(14 * var(--yp-u));
    left: auto;
    font-size: calc(16 * var(--yp-u));
    line-height: 1.8;
  }

  .hero-scroll { bottom: calc(25 * var(--yp-u)); }
  .concept-copy { line-height: 2.142; }

  .award-layout {
    display: block;
    padding-block: calc(66 * var(--yp-u));
  }

  .award-index { display: none; }
  .award-section + .award-section { margin-top: 72px; }
  .section-title { gap: 10px; margin-bottom: 40px; }
  .section-title .jp { font-size: 24px; }

  .application-step,
  .criteria-grid,
  .process-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .juror-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
  }

  .juror-name { margin-top: 11px; font-size: 14px; }
  .juror-plus { right: 8px; bottom: 8px; width: 28px; }

  .application-dock {
    inset: auto 0 0;
    width: auto;
    grid-template-columns: minmax(0, 1fr) 125px;
    align-items: start;
    gap: 20px;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 10px 10px 0 0;
  }

  .dock-title { font-size: 15px; }
  .dock-link { min-width: 0; }

  .footer-inner {
    width: min(100%, 243px);
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .site-footer { padding-top: 44px; }
  .footer-copyright { margin-top: 90px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .color-action {
    transition: none;
  }
}
```

**Markup and state contract:** `.hero-title` contains three block spans; `.hero-jp` contains the three Japanese lines in source reading order. `.juror-card` is a single button containing the portrait, decorative plus, and both names. Use `aria-hidden='true'` on the plus when the button already has a complete accessible name. Supply the actual image and logo assets without stretching them.

Set `data-surface='photo'` on the header for the opening treatment and switch the logo asset with that state. Keep the application dock `hidden` until its chosen reveal condition is met. The reveal condition and the 60rem breakpoint are implementation choices, not recovered original behavior. If the dock height changes through wrapping or text enlargement, update the reserved footer clearance accordingly.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-portfolio-paper: var(--yp-paper);
  --color-portfolio-blue: var(--yp-blue);
  --color-portfolio-green: var(--yp-green);
  --color-portfolio-ink: var(--yp-ink);
  --color-portfolio-blue-quiet: var(--yp-blue-quiet);
  --color-portfolio-blue-support: var(--yp-blue-support);

  --font-portfolio-jp: var(--yp-font-jp);
  --font-portfolio-en: var(--yp-font-en);

  --text-portfolio-body: var(--yp-body);
  --text-portfolio-hero: var(--yp-hero-size);

  --spacing-portfolio-unit: var(--yp-u);
  --spacing-portfolio-gutter: var(--yp-gutter);
  --spacing-portfolio-gap: var(--yp-gap);
  --radius-portfolio-control: var(--yp-radius);
}
```

## Sources & Evidence

- **Inspected original and final page:** [Youth Portfolio](https://award.youthportfolio.or.jp/). Both URLs are identical, and the supplied response status is HTTP 200.
- **Capture date:** supplied retrieval timestamp `2026-09-11T20:27:17.863Z`, equivalent to September 12, 2026 at 05:27:17.863 JST. Individual screenshots do not have separate timestamps in the provided evidence.
- **Desktop evidence:** 1440 × 1000 viewport; opening, juror-section, and footer screenshots; rendered document approximately 1429 × 20,335px; selected computed styles and element rectangles.
- **Mobile evidence:** 390 × 844 viewport; opening and footer screenshots; rendered document approximately 379 × 15,239px; selected computed styles establishing responsive changes throughout the information area.
- **In-page structure:** supplied original-page links include `#concept`, `#guidelines`, `#how-to-apply`, `#prizes`, `#criteria`, `#members`, `#process`, `#caution`, and `#archives`. News and archive-detail destinations were recorded but not independently inspected here.
- **Style evidence:** rendered font stacks, font sizes, tracking, line heights, colors, control dimensions, grid relationships, source custom properties, and two explicit 550ms color-transition declarations.
- **Interaction evidence:** supplied scrolling captures establish persistent header appearances, a visible application banner, and a selected desktop section-index state. No menu opening, juror-profile opening, hover outcome, submission, or media-playback sequence was supplied.
- **Inspection limits:** the browser process waited for loading, image decoding, and sampled layout stability within stated time limits. Delayed content and unexercised interaction states may remain unrepresented. SharedWorkers and service workers were disabled during inspection. No additional browsing, command execution, or file inspection was used to produce this reference.

This document describes the current page supported by those captures and measurements. Visual estimates, DOM-only structures, calculated values, and recommended implementation choices are distinguished throughout.