invisible choices — Style Reference

An expansive podcast editorial, set in rust-colored lettering on warm paper and interrupted by traces of erasure.

Original URL: invisible-choices.audio Final URL: invisible-choices.audio Theme: one observed light palette Inspected: September 13, 2026, 03:02:20 JST; supplied retrieval timestamp: September 12, 2026, 18:02:20.283 UTC Viewports: 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels Scope: supplied current-page desktop opening, guest-section, and footer captures; mobile opening and final episode/footer captures; rendered text, links, element bounds, and computed styles at both widths. The document contains six guest profiles and eleven observed pairs of Spotify and Apple Podcasts episode links.

invisible choices is the editorial home and listening index for a Japanese interview podcast about the decisions behind creative work. Its visual identity combines an enormous lowercase wordmark with unusually small navigation, narrow Japanese text columns, isolated artwork, and extensive uninterrupted space. The opening and ending repeat the same monumental lettering, giving the long document a recognizable frame.

The defining device is the word “choices,” crossed by a paper-colored horizontal strip containing tiny Japanese phrases and dotted connections. A white brush-like gesture introduces the visual idea of writing, erasing, and reconsidering. Guest sections translate this identity into an editorial system: portrait artwork, right-aligned names, descriptive copy, work images, large part numerals, and thin listening links connected with dots.

How to Read This Reference

Measured means a value explicitly supplied in the rendered DOM or computed-style evidence.
Calculated means arithmetic based on those measurements. A numerical relationship does not establish the original CSS formula.
Estimated means an approximate visual reading of an original-page screenshot. Image boundaries and graphic lettering were not supplied as measured DOM elements.
Recommended means an implementation choice for a new project. The Quick Start uses proposed selectors and layout rules, not recovered source code.
Positions in DOM tables refer to the document-top snapshot. Positions described within the middle and footer screenshots refer to those individual captures.
The visible Latin lettering cannot be identified from the generic font properties of its enclosing links. Preserve this distinction when choosing replacement fonts.

Tokens — Colors

Default Palette

Name	Value	Evidence	Suggested token	Role
Warm Paper	`#e7e4dd`	Measured: body background `rgb(231, 228, 221)` at both widths	`--color-paper`	Continuous page canvas, open space, and the apparent wordmark interruption strip
Japanese Text Rust	`#a9321c`	Measured: paragraph and guest-name color `rgb(169, 50, 28)`	`--color-ink`	Manifesto, guest names, honorifics, and descriptions
Graphic Rust	Approximately `#b1321b`	Visual estimate; graphic fill values were not supplied	`--color-display`	Large wordmark, small Latin lettering, dotted leaders, and platform symbols appear in this rust-red family
Portrait Orange	Approximately `#c75c36`	Visual estimate from the desktop guest portrait artwork	`--color-portrait`	The square artwork accompanying 小藥元; an asset-specific field, not a global surface color
Erasure White	Approximately `#ffffff`	Visual estimate	`--color-erasure`	Broad white gesture crossing the large lettering
Artwork Black	Approximately `#000000`	Visual estimate	`--color-art-mat`	Dark frames and letterboxing around several work images

The interface is mostly a paper-and-rust composition. Photography, posters, book covers, and portrait artwork retain their own colors. The orange portrait field belongs to the artwork; it does not establish an orange button or section-background system.

Computed wrapper colors require interpretation. Many links report color: rgb(51, 51, 51) and a transparent background, while their visible contents are rust-colored graphic lettering. The root also reports black text. Neither value should replace the visible rust palette in a recreation.

The supplied custom properties include transparent gradient stops and loading colors #222 and #e5e5e5. These declarations do not establish visible gradients or a specific loading-screen design. No such treatment is resolved in the supplied settled captures.

Theme Presets

Only the warm light appearance is evidenced. No theme selector, alternative palette, or dark-mode state was supplied. Keep additional themes outside the observed specification.

Tokens — Typography

Japanese Body and Guest Names

Measured family: "こぶりなゴシック W6 JIS2004".
Source custom property: --s-font-7c9f3425 contains that family name.
Measured CSS weight: 400, including guest names. The W6 designation is part of the family name; do not automatically change the CSS weight to 600 or 700.
Character: compact, substantial Japanese gothic lettering, with generous leading and modest tracking in prose.
Roles: manifesto, guest names, the smaller “さん” honorific, and episode descriptions.

Guest names align toward the right edge of their text column. The honorific follows at body size, with a measured 10px horizontal gap in the sampled name rows.

Latin Display Lettering

The enormous wordmark has extreme stroke contrast, fine hairlines, broad rounded counters, and long serif details. Its visual width and distinctive outlines carry more identity than an ordinary font-size token could reproduce.

The small Latin navigation, listening labels, credits, and part labels also have a distinctive serif appearance. Their exact typeface is unidentified. The supplied link records contain empty extracted text and generic sans-serif properties; these records do not establish the typography of the visible lettering inside them. The implementation mechanism—outlined artwork, images, or another nested representation—was not included.

Recommended: use approved wordmark artwork for fidelity. Use a licensed serif with suitable proportions for replacement utility text, and identify it as an adaptation. Do not present Times, Lato, or a guessed display family as the original Latin face.

Declared Families Without Confirmed Visible Roles

--s-font-868d9c24 declares Lato, but none of the supplied sampled text elements establishes its visible role. The HTML and body report Times at 16px as a default. These declarations are not evidence that the wordmark or navigation uses either family.

Type Scale

Role	Desktop measurement	Mobile measurement	Leading and tracking	Status
Manifesto	`16.992px`	`11.7px`	`2.2`; tracking `0.06em`	Measured
Guest description	`16.992px`	`11.7px`	Desktop `2`; mobile `1.7`; tracking `0.05em`	Measured
Guest name	`33.696px`	`21.45px`	`1`; normal tracking	Measured
Honorific	`16.992px`	`11.7px`	Approximately `1.17`; normal tracking	Measured
Link wrapper	`16px`	`16px`	`16px` line height	Measured wrapper only; not a reliable visible-label size
Small navigation lettering	Approximately 14–18px apparent size	Approximately 12–15px apparent size	Compact vertical stacking	Visual estimate; actual font size unknown
Part labels and listening lettering	Approximately 14–16px apparent size	Approximately 10–12px apparent size	Mostly one line	Visual estimate
Large part numeral	Approximately 100px visible height	Approximately 54px visible height	Baseline aligned with a much smaller part label	Visual estimate; not a measured font size
Main wordmark	Approximately 400px artwork height	Approximately 104px artwork height	Single full-width graphic	Visual estimate; not ordinary live-text sizing

Calculated relationships: desktop body size equals 1.18vw at 1440px, and the guest name equals 2.34vw. At 390px, the corresponding values equal 3vw and 5.5vw. These are endpoint equivalences, not verified source formulas.

The hierarchy depends on a large jump between graphic lettering and reading text. Preserve that jump without copying the original mobile body size uncritically: 11.7px is a measured characteristic, while a larger reading minimum is a recommended improvement.

Tokens — Spacing & Shapes

Density: extremely sparse at page scale, compact within navigation and listening controls. Underlying rhythm: narrow edge insets, carefully offset columns, long vertical pauses, and repeated horizontal alignments.

Spacing Scale

Use	Desktop	Mobile	Evidence
Header outer inset	`10px`	`10px`	Measured link positions
Gap between desktop section-navigation link boxes	`5px`	Section navigation absent	Calculated from measured bounds
Gap between header social-link boxes	`5px`	Approximately `7px`	Calculated from measured bounds
Name-to-honorific gap	`10px`	`10px`	Calculated from measured bounds
Guest name row to description	`40px`	`30px`	Calculated from sampled bounds
Listening-link vertical padding	`10px 0`	Usually `10px 0`	Measured; some mobile Apple rows omit bottom padding
Episode artwork outer inset	Approximately `30px`	Approximately `10px`	Desktop screenshot estimate; mobile screenshot and text/link bounds
Gap between stacked work frames in the desktop guest capture	Approximately `14px`	Varies by part grouping	Visual estimate

Do not force every gap onto a conventional 8px scale. The observed 5px, 10px, 30px, and 40px values coexist with much larger composition-driven distances.

Border Radius

Element	Appearance	Evidence
Page and text sections	Square, unboxed	Screenshots; sampled text/link radius is `0px`
Square portrait artwork	Square corners	Desktop screenshot
Small opening work frame	Approximately 5–6px desktop radius; nearly square on mobile	Visual estimate
Larger desktop work frame	Approximately 10px radius	Visual estimate
Mobile work frames	Approximately 1–3px radius	Visual estimate
White erasure gesture	Broad rounded stroke ends	Visual observation; asset geometry unknown

The soft corners belong to selected artwork frames. There is no general rounded-card language.

Layout Measurements

Element	Desktop, 1440 × 1000	Mobile, 390 × 844	Evidence
Document height	`12158.34px`	`6758.64px`, reported rounded as 6759px	Measured
Home-logo anchor	`(10, 10)`, `710 × 44.95px`	`(10, 10)`, `185 × 39.53px`	Measured anchor; visible logo is much narrower
Newsletter anchor	`(1330.61, 10)`, `99.39 × 12.72px`	`(296.75, 10)`, `83.25 × 11.58px`	Measured
Opening section navigation	Starts at `(365, 407.56)`; link width `106.5px`	Not in the supplied rendered link list or capture	Measured/observed
First manifesto block	`(664.38, 1817.36)`, `271.63px` wide	`(54.73, 693.34)`, `187.06px` wide	Measured
Second manifesto block	`(936, 2285.67)`, `286.88px` wide	`(159.91, 1032.16)`, `197.55px` wide	Measured
Center-lane guest description	`x: 361.20`, width `496.80px`	`x: 10`, width `204.23px`	Measured
Right-lane guest description	`x: 916.66`, width `493.34px`	`x: 175.77`, width `204.23px`	Measured
Listening-link lane	`x: 361.20` or `913.20`, width `496.80px`	`x: 10`, width `370px`	Measured
Spotify link height	`36.80px`	`32.52px`	Measured
Apple Podcasts link height	`41.05px`	Usually `35.67px`; some `25.67px`	Measured
Main wordmark width	Approximately `1420px`	Approximately `370px`	Visual estimate, consistent with 10px edge insets
Portrait artwork in the desktop guest capture	Approximately `483 × 483px`, at `x: 927px`	No corresponding detailed portrait capture supplied	Visual estimate
Work frame in the desktop guest capture	Approximately `276 × 324px`, at `x: 30px`	Final book frame approximately `74 × 88px`	Visual estimate

Components

Corner Identity and External Links

Role: identify the program and provide newsletter/social destinations without a conventional navigation bar.

The tiny stacked identity reads visually as “in / visible / choices” in the upper-left corner. Newsletter, Instagram, and X form a right-aligned stack in the opposite corner. Both groups sit about 10px from the top and outside edges. They share the paper background with the rest of the page; there is no enclosing header surface, bottom border, or filled button.

The measured home anchor spans half the inset desktop canvas, although the visible logo occupies only a small part of it. Keep visible artwork size separate from clickable-element dimensions.

Observed destinations are the site root, its Substack profile, Instagram profile, and X profile. Their presence is verified through hrefs. Click outcomes, new-tab behavior, and hover feedback were not exercised. The top-corner controls are not visible in the supplied middle and footer captures, so persistent fixed positioning is not established.

Desktop Section Navigation

Role: navigate the long page through Home, About, Episode, and Credit anchors.

A small four-line stack sits at the quarter-width alignment rather than beside the corner logo. On desktop it begins at x: 365px, around y: 408px in the opening. The footer repeats the stack at the same horizontal alignment.

Each item is a transparent flex link with a measured 5px vertical gap to the next item. There are no button boxes or active-state badges in the captured appearance. The hrefs point to #home, #about, #episode, and #credit.

Both stacks are absent from the supplied mobile capture and rendered link list. No replacement hamburger menu is visible. Anchor scrolling behavior, focus movement, and active-section tracking remain unverified.

Opening Composition

Role: introduce the program through visual atmosphere before the explanatory text begins.

The desktop opening leaves a very large paper field between the corner controls and the oversized wordmark. A small, black-framed work image sits high toward the right, approximately (898, 10) with a 177 × 208px frame. Another work image enters at the lower-right edge of the capture.

On mobile, the opening retains the empty upper field and the small high image, now approximately 56 × 65px at (195, 10). The main wordmark begins around y: 307px. Below it, several small works form an irregular sequence: a film image at right, a warm light photograph at left, a narrow dark image near the right, and a small cover image closer to the center. They have different sizes and are not arranged as a gallery grid.

Treat these as positioned visual references to creative work. The captures do not establish drag behavior, clickable image targets, automatic floating, or parallax.

Interrupted Wordmark

Role: the dominant identity device, repeated at the opening and near the end.

The lowercase “choices” nearly fills the inset viewport width. Its outer proportions are approximately 3.55:1: about 1420 × 400px on desktop and 370 × 104px on mobile. A paper-colored horizontal band interrupts the letters near their middle.

The band contains four small Japanese phrases: “（クリエイションが）”, “（完成するまでの）”, “（見えない選択と）”, and “（その物語）”. Fine dotted lines connect the phrases across the width. In the desktop opening capture, the band occupies roughly y: 789–840px; on mobile, it occupies roughly y: 359–373px. These are screenshot estimates.

A broad white gesture crosses the central area in the desktop opening and footer, and in the mobile footer. Its form is visible, but its animation mechanism and timing are unknown. It is not clearly resolved in the sampled mobile opening state.

Recommended anatomy: one accessible identity label, scalable lettering artwork, a paper interruption strip with decorative leaders, and an independently decorative gesture if separate assets are available. A supplied composite artwork can also preserve the whole composition. Avoid rendering both a baked-in strip and a second CSS strip over it.

Manifesto

Role: explain the podcast through the rhythm of creative revision.

Two narrow Japanese blocks proceed diagonally down the page. The first begins with “書いては、消して。” and develops through short, deliberately broken lines. The second addresses the listener and describes tracing the choices behind finished work.

These are not a centered full-width introduction. Desktop positions move from x: 664.38px to 936px; mobile positions move from 54.73px to 159.91px. The first mobile block is only about 187px wide. Short lines align toward the right side of their narrow region in the supplied opening capture.

Use the measured 2.2 leading and 0.06em tracking to preserve its slow pace. The gap between the first block's measured bottom and the second block's top is 20px on desktop and 30px on mobile. Much of the apparent spaciousness comes from line height and page positioning, rather than enormous paragraph margins alone.

Guest Editorial Section

Role: connect a creator, a particular work, and the available conversations about its process.

The supplied document contains, in order, profiles for 大橋謙譲, 河井冬穂, 小藥元, 常盤司郎, 相楽賢太郎, and 三島邦彦. Each has a name, small honorific, Japanese description, and external listening links. Part counts vary; the supplied links show one pair for 河井冬穂 and two pairs for each other profile.

In the desktop capture of 小藥元, a large square portrait artwork occupies the right side. The Japanese name and description occupy the middle lane, aligned near the bottom of that square. Work imagery starts in the far-left lane below the introductory row, while listening information remains in the middle lane.

The description is about 497px wide, uses approximately 17px type with 34px leading, and begins 40px below the name row. The name and honorific align right; the prose reads as a conventional left-aligned block.

DOM measurements confirm that subsequent text and listening lanes alternate between the middle and right side. The opposite portrait arrangement is not shown in the supplied detailed screenshot, so a fully mirrored image layout should be treated as an implementation proposal.

Portrait Artwork

Role: introduce the guest as part of the program's graphic identity.

The resolved example is a square orange composition. A photograph of 小藥元 appears through several overlapping, slanted, rounded brush-like openings. Pale serif lettering identifies “Gen Kogusuri” with a smaller “Copywriter” label. A miniature stacked program logo sits toward the lower-left.

The mask creates a connection to the white erasure gesture without turning the portrait into a circular avatar. Preserve the artwork's square proportions, internal lettering, crop, and flat color field. The source evidence does not reveal whether the clipping is baked into an image or assembled in the browser.

Work Image Frame

Role: show the creation being discussed.

Work imagery includes posters, covers, film imagery, and photographic fragments. Several items sit within black frames that retain visible margins or letterboxing. In the desktop guest capture, the Michael Jackson poster appears inside a tall frame approximately 276px wide, with slight corner rounding.

The mobile final section shows a small book cover within a black frame approximately 74px wide. The frame keeps the book recognizable as an object even at that scale.

Retain each work's intended crop and internal typography. Do not normalize every image to a square or enlarge all media to the width of its surrounding listening row.

Episode Part Heading

Role: distinguish the conversations within a guest section.

A small parenthesized label such as “(Part One)” sits at the left of the listening lane. A large thin-serif numeral sits at the far right. Their baselines are approximately aligned, producing a strong size contrast with almost no chrome.

On mobile, the numbered heading spans the full 370px inner width beneath its small work image. The numeral remains conspicuous even though the image and labels shrink. The visible “1” and “2” are part divisions; do not automatically equate them with the podcast's global episode numbers.

Platform Listening Row

Role: take the listener to a particular episode on an external service.

The row has three visual parts: a platform silhouette at left, a flexible dotted leader, and an underlined label at right. Observed labels are “Listen on Spotify” and “Listen on Apple Podcasts.” Both rows use the site's rust color instead of adopting each platform's full brand-color palette.

The leader is a line of separated, tiny round dots. It connects the symbol and label along their horizontal center region; it is not a full-width divider beneath a card. The outer anchor covers the whole measured lane, with 10px vertical padding.

Desktop rows are approximately 497px wide. Mobile rows expand to 370px despite the adjacent descriptions remaining only about 204px wide. This is a key responsive distinction.

No embedded player, seek track, playback state, or in-page audio control appears in the supplied evidence. Treat these rows as external links. Do not infer autoplay or inline playback from the presence of platform symbols.

Credits and Closing Composition

Role: finish the editorial sequence with attribution and a return to the program identity.

Two fine credit rows place roles at left, names at right, and dotted leaders between them. The current original-page footer visibly lists:

Visible role	Visible name
Produce / Creative Direction / Interview	Kamada
Art Direction / Design	Katsuaki Utsunomiya

These are the roles printed by the page. They do not independently identify a legal operator or a separate website developer.

On desktop, the credit rows occupy the top of the supplied final capture, followed by a broad empty field, the repeated section navigation, and the enormous wordmark. On mobile, the credits are followed by roughly 90px of space before the visible wordmark begins; the desktop section-navigation stack is absent.

The final utility row places X and Instagram at left, Newsletter near the quarter-width alignment, and a copyright statement at right. The measured newsletter x-position is 365px on desktop and 102.5px on mobile. The closing surface remains the same paper color as the document.

Tokens — Motion & Interaction

Treatment	Supplied evidence	What can be concluded
Body background transition	`background 0.5s cubic-bezier(0.4, 0.4, 0, 1)`	A 500ms background transition is declared; no actual palette change was demonstrated
Common link and text transitions	`0.3s cubic-bezier(0.4, 0.4, 0, 1)`, plus transitions on gradient-related custom properties	A common 300ms easing vocabulary is declared; the properties changed by a user action are not established
Sampled CSS animations	`animation: none` on supplied elements	Those sampled elements do not report a CSS animation; this does not exclude motion in artwork, descendants, pseudo-elements, or scripts
White gesture	Different visible forms across separate original-page locations	Its appearance is evidenced; a temporal sequence, morph duration, or pointer response is not
Work-image positioning	Isolated images at different positions and scales	Asymmetric composition is established; floating, dragging, and parallax are unverified
Internal navigation	Desktop hash-link destinations supplied	Anchor targets are established; smooth scrolling and active-state logic are unverified
Listening and social links	External hrefs supplied	Destinations are established; click outcomes and hover states are unverified

The capture process waited for document loading, visible image decoding, and sampled layout/text stability. Initial observation lasted at least five seconds. Perpetual animations were paused during readiness checks and then resumed. This procedure supports analysis of the settled composition, but it is not a recording of the complete motion design.

Recommended motion vocabulary: retain the supplied cubic Bézier curve for restrained feedback where needed. Begin with a static, readable composition. Add gesture animation or image movement only as an explicitly designed enhancement, with reduced-motion behavior and no dependency on animation for accessing content.

Surfaces

Layer	Appearance	Purpose
Page canvas	Solid warm paper	Holds the entire editorial sequence together
Text and listening areas	Transparent, rust-colored content	Establish structure through alignment and typography
Wordmark band	Paper-colored interruption with tiny text and dots	Cuts through the large lettering without adding a new panel color
Work frame	Flat black, subtly rounded in some examples	Preserves artwork proportions and creates small dense visual anchors
Portrait artwork	Flat orange field in the resolved example	Introduces guest identity through a designed image
Erasure gesture	Opaque white stroke	Adds a handmade interruption to precise lettering

No general elevation, shadow, glass, or outlined-card system is visible. Depth comes from overlap and contrast. Keep content sections on the same canvas instead of assigning each one a separate surface.

Imagery

The imagery represents creative artifacts and their makers. Dark posters, a turquoise-and-white book cover, film imagery, portrait photography, and small fragments of light and color punctuate the paper field. Most of the screen remains empty; the images act as carefully placed points of attention.

There are two different treatments to preserve. Work images retain their own visual identity and often sit within dark frames. Guest artwork combines photography with the program's graphic treatment, including a colored field, irregular clipping, and serif lettering.

The white gesture and portrait cutout share broad, rounded, diagonal forms. This repetition provides a visual relationship between the main identity and individual guests. It does not justify applying the same clipping effect to every poster or book cover.

Observed Asset References

No image URLs, filenames, intrinsic dimensions, or SVG markup were supplied. The references below identify visible assets without inventing paths.

Asset	Original-page evidence	Reuse guidance
Stacked program identity	Desktop and mobile opening captures	Preserve its three-line proportions; provide an accessible name
Large “choices” composition	Opening and footer captures at both widths	Use scalable approved artwork; retain the interruption strip
White gesture	Desktop opening/footer and mobile footer	Treat as decorative; exact path and motion remain unknown
Dark blue work image in a black frame	Desktop and mobile opening captures	Preserve its small scale and letterboxing
Orange guest portrait composition	Desktop capture featuring 小藥元	Keep the square canvas, clipped photograph, and internal lettering
Michael Jackson poster	Desktop guest capture	Preserve the poster's typography and portrait proportion
Film artwork and photographic fragments	Mobile opening capture	Maintain varied sizes and irregular placement
Book cover within a black frame	Mobile final episode capture	Retain the small object scale and black surrounding field
Spotify and Apple silhouettes	Guest listening rows	Use approved platform assets with accessible link text

Use authorized original assets where available. CSS can reproduce spacing, leaders, alignment, and surface treatment, but it cannot reproduce the distinctive lettering or guest artwork through a generic font substitution alone.

Layout & Responsive Behavior

Desktop Composition

The page uses the whole viewport width with very small perimeter insets. It is not organized inside one centered article container. Major alignments recur around the quarter-width position and farther toward the right.

The supplied guest capture can be approximated by a 1380px-wide composition between 30px side margins: a 276px work lane, 55.2px gap, 496.8px text lane, 69px gap, and 483px portrait lane. These dimensions correspond to a calculated 20 : 4 : 36 : 5 : 35 division. This is a useful reconstruction grid, not an observed CSS Grid declaration; the supplied sampled elements are mostly flex containers.

The introductory manifesto begins far below the initial desktop viewport. The first measured guest name starts around document y=3526px. Large empty spaces are integral to the page's pacing.

Mobile Composition

The 390px version preserves an unusually editorial arrangement rather than making every element full width:

The header retains 10px side insets and opposite-corner placement.
Desktop section-navigation stacks disappear from the supplied rendered state.
The oversized wordmark scales down to the 370px inner width while retaining its proportions.
The scattered work imagery is recomposed below the wordmark.
Manifesto blocks remain narrow and staggered horizontally.
Guest descriptions alternate between left and right alignment zones, each about 204.23px wide—approximately 55.2% of the inner width.
Listening rows expand to the entire 370px inner width.
Work images can remain as small as approximately 74px wide above their associated part information.
The closing wordmark and three utility groups remain present.

The document is about 6.76k pixels tall on mobile versus 12.16k pixels on desktop. This reduction is not simple uniform scaling: reading sizes, leading, navigation visibility, whitespace, and action widths change independently.

Breakpoint Evidence and Limits

The supplied HTML excerpt includes a max-width: 840px media query controlling responsive line-break visibility. It does not establish that every layout change occurs at 840px. No tablet screenshot or complete stylesheet was supplied.

The Quick Start uses 840px as a recommended consolidation breakpoint, with additional readable fallbacks. Intermediate widths, landscape layouts, browser zoom, safe-area behavior, and text expansion were not visually tested.

Do’s and Don’ts

Do

Preserve the measured paper #e7e4dd and Japanese text rust #a9321c.
Let the oversized lettering and broad empty areas establish the identity.
Repeat the wordmark near the beginning and end of the document.
Keep Japanese prose narrow, deliberate, and generously spaced.
Preserve the small honorific beside the larger guest name.
Use dotted leaders to connect platform symbols, labels, and credit pairs.
Keep listening links full width on mobile while retaining offset descriptive columns where readable.
Preserve the distinct proportions of portraits, posters, book covers, and opening fragments.
Separate measured wrapper properties from the appearance of graphic lettering.
Keep episode-part counts and destinations driven by actual content.

Don’t

Do not replace the editorial sequence with a generic feature grid or conversion-button hierarchy.
Do not turn every guest or episode into a filled rounded card.
Do not use platform brand colors as competing interface accents.
Do not identify the Latin typeface from the root Times default or the unused Lato declaration.
Do not equate a 710px logo anchor with a 710px visible logo.
Do not crop all artwork into uniform squares.
Do not remove the long pauses that give the desktop layout its character.
Do not infer hover effects, parallax, audio playback, or animation timing from static captures.
Do not treat the portrait's orange field as a global alternate theme.
Do not shrink essential reading text indefinitely to preserve one screenshot's line breaks.

Recommended Implementation Additions

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

Use semantic headings for the program, guest profiles, and episode parts. The supplied guest-name samples are paragraph elements.
Give graphic identity links and platform links reliable accessible names. Empty extracted link text alone does not establish whether the original accessible names are missing.
Include the guest and part in each listening link's accessible context so repeated platform labels remain distinguishable.
Keep dotted leaders and white gestures out of the accessibility tree.
Raise mobile reading text from the observed 11.7px to a practical minimum, such as 14px, and allow section heights to grow.
Increase mobile listening targets to at least 44px high. The observed rows are approximately 26–36px high.
Provide a visible rust-colored focus outline and a keyboard-accessible route to the episode index.
Preserve real text for navigation and credits where practical, even if the principal wordmark remains artwork.
Offer text equivalents or transcripts for podcast material when available.
Reserve image dimensions to avoid layout shifts; load lower-page artwork progressively while keeping the opening identity available promptly.
Maintain a static alternative for any subsequently implemented decorative motion.

Agent Prompt Guide

Quick Color Reference

Page canvas: measured #e7e4dd.
Japanese reading text and names: measured #a9321c.
Graphic lettering: rust red, approximately #b1321b; exact asset fill unverified.
White gesture: approximately #ffffff.
Work-image surrounds: approximately black.
Orange portrait field: approximately #c75c36, confined to the resolved portrait artwork.
Actions: underlined rust lettering with dotted leaders, without a filled CTA surface.

Overall Prompt

“Create an editorial website for a Japanese interview podcast about creative decisions, inspired by invisible choices. Use warm paper #e7e4dd and rust-colored text #a9321c. Place a tiny stacked identity at the upper left and a compact right-aligned newsletter/social stack at the upper right. Build a spacious opening around an enormous high-contrast lowercase serif wordmark, interrupted by a paper strip of tiny phrases and dotted leaders. Add a white brush-like gesture and a few isolated work images at different sizes. Follow with narrow, staggered Japanese manifesto blocks and alternating guest sections containing portrait artwork, right-aligned names, descriptive copy, small work images, oversized part numerals, and dotted Spotify/Apple listening rows. Repeat the wordmark before the final social and copyright row. Keep mobile descriptions offset while expanding listening rows to the inner width. Use approved identity assets and distinguish proposed motion from observed behavior.”

Example Component Prompts

Opening: “A warm paper canvas with tiny rust corner links, extensive empty space, and a viewport-wide lowercase serif identity near the lower portion. Cross the letters with a narrow paper strip and dotted microcopy. Place a small dark framed work image high toward the right. No enclosing navigation bar or card surfaces.”
Guest section: “An asymmetric podcast profile with a square designed portrait toward the right, a roughly 500px Japanese text lane in the middle, and a smaller work-image lane at the far left. Right-align the guest name and small honorific, then use rust body text with double leading. Keep the canvas continuous.”
Listening row: “An unboxed rust-colored external episode link: platform silhouette at left, a flexible line of tiny separated dots, and an underlined serif platform label at right. Pair Spotify and Apple rows. Use the full inner width on mobile and provide accessible context for the guest and episode part.”
Part heading: “Place a small parenthesized part label at the left and a very large fine-serif numeral at the right, approximately sharing a baseline. Keep the heading on the paper background, above two dotted listening rows.”
Footer: “Two small credit rows joined by dotted leaders, followed by generous paper space and a repeated oversized interrupted wordmark. End with social links at left, newsletter near the quarter-width alignment, and copyright at right. Omit the desktop section-navigation stack in the compact layout.”

Quick Start

CSS Custom Properties

This is a proposed CSS scaffold. It preserves measured colors and desktop reading sizes, uses a reconstruction grid derived from the supplied coordinates, and introduces a recommended 14px mobile reading minimum and 44px listening targets. The original mobile readings remain documented in the tables above.

The opening positions are fitted approximations for the two supplied compositions, not recovered source formulas. Artwork must be supplied separately. .choices-art expects a composite wordmark that already contains its interruption strip; no fictitious asset paths are included.

Suggested structure: an .opening contains .site-header, .section-nav, .opening-wordmark, and optional .floating-work figures. Each .episode contains .episode-head and repeated .episode-part sections. Each part contains .part-work and .part-content; the latter contains .part-heading and .listen-links. Each .listen-link contains a platform icon, decorative leader, and visible label in that order.

:root {
  /* Measured colors */
  --color-paper: #e7e4dd;
  --color-ink: #a9321c;

  /* Visual approximations for artwork-related colors */
  --color-display: #b1321b;
  --color-erasure: #ffffff;
  --color-art-mat: #000000;

  /* Source family; requires an appropriate licensed font setup */
  --font-japanese: 'こぶりなゴシック W6 JIS2004', sans-serif;

  /* Adaptation only: the original Latin face is unidentified */
  --font-editorial: serif;
  --text-body: 16.992px;
  --text-name: 33.696px;
  --text-utility: 16px;
  --text-credit: 14px;
  --text-number: 110px;
  --leading-body: 2;
  --leading-manifesto: 2.2;
  --tracking-body: 0.05em;
  --tracking-manifesto: 0.06em;

  --inset: 10px;
  --episode-inset: 20px;
  --space-small: 5px;
  --space-medium: 10px;
  --space-section-row: 30px;
  --space-name-copy: 40px;
  --radius-work: 10px;
  --rule-dot: 1px;

  /* Observed easing; application to focus/hover is recommended */
  --ease-editorial: cubic-bezier(0.4, 0.4, 0, 1);
  --motion-feedback: 300ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-japanese);
  font-size: var(--text-body);
  font-weight: 400;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
}

.page {
  padding-inline: var(--inset);
}

/* Fitted opening geometry; validate against the chosen artwork */
.opening {
  position: relative;
  min-height: 126vw;
}

.site-header {
  position: absolute;
  inset: 10px 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 2;
}

.brand-link {
  display: block;
  width: 50%;
}

.brand-art {
  width: 57px;
  height: auto;
}

.external-nav,
.section-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  font-family: var(--font-editorial);
  font-size: var(--text-utility);
  line-height: 1;
}

.external-nav {
  align-items: flex-end;
  text-align: right;
}

.section-nav {
  position: absolute;
  top: 28.3vw;
  left: 25%;
  align-items: flex-start;
}

.opening-wordmark {
  position: absolute;
  top: 40.6vw;
  inset-inline: 0;
}

.choices-art {
  width: 100%;
  height: auto;
}

/* Set these variables per image; no motion is implied */
.floating-work {
  position: absolute;
  left: var(--work-x, 62.5%);
  top: var(--work-y, 10px);
  width: var(--work-width, 12.5%);
}

.work-frame {
  overflow: hidden;
  background: var(--color-art-mat);
  border-radius: var(--radius-work);
}

.work-frame img {
  width: 100%;
  height: auto;
}

.manifesto {
  padding-bottom: clamp(140px, 25vw, 360px);
}

.manifesto p {
  width: min(100%, 17em);
  margin: 0;
  line-height: var(--leading-manifesto);
  letter-spacing: var(--tracking-manifesto);
  text-align: right;
}

.manifesto p:first-child {
  margin-left: 46%;
}

.manifesto p + p {
  margin-top: 20px;
  margin-left: 65%;
}

/* Calculated desktop reconstruction, not a source grid declaration */
.episode {
  --episode-columns: 20fr 4fr 36fr 5fr 35fr;
  --copy-column: 3;
  --portrait-column: 5;
  margin-inline: var(--episode-inset);
  margin-bottom: clamp(130px, 16vw, 230px);
}

.episode--right {
  --episode-columns: 20fr 4fr 35fr 5fr 36fr;
  --copy-column: 5;
  --portrait-column: 3;
}

.episode-head,
.episode-part {
  display: grid;
  grid-template-columns: var(--episode-columns);
}

.episode-intro {
  grid-column: var(--copy-column);
  grid-row: 1;
  align-self: end;
  min-width: 0;
}

.guest-name {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 var(--space-name-copy);
  font-size: var(--text-name);
  font-weight: 400;
  line-height: 1;
}

.guest-honorific {
  font-size: var(--text-body);
  line-height: 1.17;
}

.guest-description {
  margin: 0;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  overflow-wrap: anywhere;
}

.portrait-art {
  grid-column: var(--portrait-column);
  grid-row: 1;
  align-self: start;
}

.portrait-art img {
  width: 100%;
  height: auto;
}

.episode-part {
  margin-top: var(--space-section-row);
  align-items: start;
}

.episode-part + .episode-part {
  margin-top: 14px;
}

.part-work {
  grid-column: 1;
  display: grid;
  gap: 14px;
}

.part-content {
  grid-column: var(--copy-column);
  min-width: 0;
  padding-top: 120px;
}

.part-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-editorial);
}

.part-label {
  font-size: 14px;
}

.part-number {
  font-size: var(--text-number);
  font-weight: 400;
  line-height: 1;
}

.listen-links {
  margin-top: 20px;
}

.listen-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-block: 10px;
  font-family: var(--font-editorial);
  font-size: var(--text-utility);
  line-height: 1;
  text-decoration: none;
}

.platform-icon {
  flex: 0 0 16.8px;
  width: 16.8px;
  height: 16.8px;
  object-fit: contain;
}

.platform-icon--apple {
  height: 21.05px;
}

.dot-leader {
  flex: 1 1 auto;
  min-width: 12px;
  height: 2px;
  background-image: radial-gradient(
    circle,
    currentColor var(--rule-dot),
    transparent var(--rule-dot)
  );
  background-size: 8px 2px;
  background-repeat: repeat-x;
}

.listen-label {
  flex: 0 1 auto;
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.credits {
  display: grid;
  gap: 10px;
  font-family: var(--font-editorial);
  font-size: var(--text-credit);
}

.credit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.credit-name {
  text-align: right;
}

.footer-stage {
  position: relative;
  padding-top: clamp(100px, 34vw, 490px);
}

.footer-stage .section-nav {
  top: auto;
  bottom: 92%;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  font-family: var(--font-editorial);
  font-size: var(--text-utility);
}

.footer-social {
  display: grid;
  justify-items: start;
  gap: 5px;
}

.footer-copyright {
  grid-column: 3 / -1;
  margin: 0;
  text-align: right;
}

/* Recommended focus and restrained feedback */
a:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

.listen-label {
  transition: text-underline-offset
    var(--motion-feedback) var(--ease-editorial);
}

@media (hover: hover) {
  .listen-link:hover .listen-label {
    text-underline-offset: 4px;
  }
}

/* Proposed breakpoint; only two viewport states were supplied */
@media (max-width: 840px) {
  :root {
    --text-body: 14px; /* Recommended; observed value was 11.7px */
    --text-name: 21.45px;
    --text-utility: 12px;
    --text-credit: 12px;
    --text-number: 74px;
    --leading-body: 1.7;
    --episode-inset: 0px;
    --space-name-copy: 30px;
    --radius-work: 2px;
  }

  .opening {
    min-height: 178vw;
  }

  .brand-art {
    width: 50px;
  }

  .external-nav {
    gap: 7px;
    font-size: 14px;
  }

  .section-nav {
    display: none;
  }

  .opening-wordmark {
    top: 78.7vw;
  }

  .floating-work {
    left: var(--work-x-mobile, 50%);
    top: var(--work-y-mobile, 10px);
    width: var(--work-width-mobile, 15%);
  }

  .manifesto {
    padding-bottom: 150px;
  }

  .manifesto p:first-child {
    width: 64%;
    margin-left: 8%;
  }

  .manifesto p + p {
    width: 68%;
    margin-top: 30px;
    margin-left: auto;
  }

  /* Proposed portrait arrangement; mobile portrait bounds are unknown */
  .episode {
    --episode-columns: 55.2fr 4.8fr 40fr;
    --copy-column: 1;
    --portrait-column: 3;
    margin-bottom: 130px;
  }

  .episode--right {
    --episode-columns: 40fr 4.8fr 55.2fr;
    --copy-column: 3;
    --portrait-column: 1;
  }

  .episode-part {
    display: block;
  }

  .episode-part + .episode-part {
    margin-top: 40px;
  }

  .part-work {
    width: 20%;
  }

  .part-content {
    padding-top: 0;
  }

  .part-label {
    font-size: 12px;
  }

  .listen-link {
    min-height: 44px; /* Recommended touch target */
  }

  .platform-icon {
    flex-basis: 13px;
    width: 13px;
    height: 13px;
  }

  .platform-icon--apple {
    height: 16px;
  }

  .footer-stage {
    padding-top: 90px;
  }

  .footer-links {
    font-size: 11px;
  }
}

/* Recommended reading fallback for narrower or enlarged layouts */
@media (max-width: 360px) {
  .episode-head {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .episode-intro {
    width: 100%;
  }

  .portrait-art {
    width: 55%;
    align-self: flex-end;
  }

  .manifesto p:first-child,
  .manifesto p + p {
    width: 85%;
    margin-left: auto;
  }

  .credit-row {
    flex-wrap: wrap;
  }

  .credit-row .dot-leader {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-label {
    transition: none;
  }
}

Keep the work frames' internal mats in their supplied imagery when already present. If a raw image needs separate letterboxing, add an explicitly sized media wrapper and object-fit: contain; do not invent a universal crop for all works.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not identify the original site's styling framework. The typography aliases inherit the responsive values defined above.

@theme inline {
  --color-paper: #e7e4dd;
  --color-ink: #a9321c;
  --color-display-rust: #b1321b;
  --color-erasure: #ffffff;
  --color-art-mat: #000000;

  --font-jp: var(--font-japanese);
  --font-editorial-fallback: var(--font-editorial);

  --text-reading: var(--text-body);
  --text-guest: var(--text-name);
  --text-navigation: var(--text-utility);
  --text-part-numeral: var(--text-number);

  --spacing-page-inset: 10px;
  --spacing-name-copy: var(--space-name-copy);
  --radius-artwork: var(--radius-work);
  --ease-editorial: cubic-bezier(0.4, 0.4, 0, 1);
}

Sources & Evidence

Original and final page: invisible choices. The supplied browser record reports HTTP 200 and no URL change.
Capture time: 2026-09-12T18:02:20.283Z, equivalent to September 13, 2026, 03:02:20.283 JST.
Desktop evidence: 1440 × 1000 opening, guest-section, and footer captures; rendered document height approximately 12158.34px; computed styles and bounds for the two manifesto blocks, six guest profiles, navigation, and external listening links.
Mobile evidence: 390 × 844 opening and final episode/footer captures; rendered document height approximately 6758.64px; computed text sizes, alternating description positions, and full-width listening-link bounds.
Current-page attribution evidence: the visible credit rows in the original-page desktop and mobile footer captures. Their printed roles are transcribed without inferring an operator or additional development credits.
Interaction scope: supplied loading and scrolling observations, plus href inspection. No independently demonstrated clicks, hover states, audio playback, gesture sequence, or animation timings beyond computed transition declarations.
Limitations: only two viewport widths were supplied. Full stylesheets, image source paths, internal artwork structure, accessibility-tree output, and detailed mobile portrait captures were not included. SharedWorkers and service workers were disabled during the supplied inspection. No additional browsing or file access was performed for this reference.

This reference describes the current page evidenced by those captures and measurements. Estimated visual values and recommended implementation choices are identified separately from measured source values.

invisible choices｜創作の選択をたどるポッドキャスト

design.md