# WIRED CONFERENCE 2022 / FUTURES/REALITIES — Style Reference

> An oversized conference poster unfolds into a pastel program, framed by black rules and compact editorial navigation.

**Original URL:** [wired.jp/article/futures-realities-2022/](https://wired.jp/article/futures-realities-2022/)
**Final URL:** [wired.jp/branded/futures-realities-2022/](https://wired.jp/branded/futures-realities-2022/)
**Theme:** light ivory canvas, with salmon and sage program sections.
**Inspected:** October 2, 2026, at 03:22:35 JST; supplied retrieval timestamp: October 1, 2026, at 18:22:35.186 UTC.
**Recorded viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the currently served conference page: desktop opening composition, a desktop Day 2 workshop state, desktop terms, mobile Q&A and terms, plus supplied rendered text, links, custom properties, and sampled computed styles. Other sections are documented only to the extent supported by their DOM evidence.

The page remains available after an identity-preserving redirect. Its 2022 event content is accompanied by current notices that ticket and archive-video sales have ended. This is an accessible conference page with a substantial program and information archive; an ended sales period does not mean the website is discontinued.

The identity comes from extreme differences in scale. Huge black FUTURES / REALITIES lettering dominates the opening, while navigation, Japanese descriptions, contributor names, and legal copy remain compact. A large illustration of colorful, geometric people supplies almost all of the opening's saturated color. Ivory space, fine black outlines, and elongated oval links keep the surrounding interface restrained.

Further down, the program becomes a sequence of broad colored panels. Salmon identifies Day 1; sage identifies Day 2. Vertical category rails, numbered workshop entries, large media rectangles, and carefully spaced text make the program feel like an unfolding exhibition guide. Mobile retains horizontal program arrangements in the supplied DOM, while Q&A and legal content use a conventional vertical reading column.

## How to Read This Reference

- **Measured** values come from the supplied computed-style records and element bounding boxes. Decimal measurements are rounded where practical.
- **Declared** values come from supplied CSS custom properties. A declaration alone does not prove visible use in a particular component.
- **Estimated** values describe geometry or appearance visible in the current-site screenshots without a corresponding computed measurement.
- **Recommended** values and behaviors are implementation choices for a new build. They are not attributed to the original page.
- All dimensions refer to CSS pixels unless explicitly described as screenshot estimates. Device pixel ratio and original asset dimensions were not supplied.
- Offscreen DOM coordinates reflect the captured scroll position and horizontal arrangements. They should not be copied as absolute placement values or interpreted automatically as overflow defects.
- The mobile record contains many offscreen program elements, but the supplied mobile images show only Q&A and terms. Mobile program measurements are therefore DOM observations, not visual confirmation of every state.
- No additional browsing, file access, or interaction testing informs this document. Asset URLs, full stylesheets, exact breakpoints, and JavaScript behavior were not supplied.

## Tokens — Colors

### Default Palette

| Name | Value | Source token or evidence | Role and confidence |
| --- | --- | --- | --- |
| Ivory | `#FFF7EC` | `--color-ivory`; computed body and header backgrounds | Measured primary canvas and masthead surface |
| Black | `#000000` | `--color-black: black`; computed text and tab backgrounds | Measured text, graphic lettering, dark navigation fields; visible rules and outlines |
| Salmon | `#FF9279` | `--color-salmon`; computed Day 1 backgrounds | Measured Day 1 program field and related navigation color |
| Sage | `#ACCCB7` | `--color-sage`; computed day-navigation color | Declared exact value, visually corroborated by the Day 2 program screenshot |
| Teal | `#379D9C` | `--color-green` | Declared accent; the opening REALITIES link visibly uses a teal treatment |
| White | `#FFFFFF` | `--color-white: white`; computed workshop eyebrows and detail text | Measured reversed text; also visible in media and icon surfaces |
| Gray | `#8D8D8D` | `--color-gray` | Declared supporting neutral; precise component assignments not established |
| Dark Gray | `#3F3F3F` | `--color-darkGray` | Declared supporting neutral; do not assume it equals every dark utility surface |
| Light Gray | `#D9D9D9` | `--color-lightGray` | Declared supporting neutral |
| Mobile Category Charcoal | `#3A3A3A` | Computed `rgb(58, 58, 58)` | Measured mobile WORKSHOP / TALK SESSION / MEETUP navigation background |

Ivory is a solid warm background, not a visible paper texture. Keep it flat. The text and structural linework use strong black, allowing the illustration and large program fields to carry the color.

### Additional Declared Colors

| Source token | Value | Evidence boundary |
| --- | --- | --- |
| `--color-workshop` | `#FFE8BD` | Present in both viewport records; visible assignment not established |
| `--color-talk` | `#E2E8D9` | Present in both viewport records; visible assignment not established |
| `--color-keynote` | `#FFD4C4` | Present in both viewport records; visible assignment not established |

These names suggest content categories, but the supplied active workshop screenshot uses the Day 2 sage field. Do not automatically replace program panels with the lighter category colors merely because the variables exist.

The source also declares `--swiper-theme-color: #007aff`. This is not evidence that bright blue belongs in the visible brand palette, nor does it establish which interactions use that library.

### Color Behavior

The two days are content identities, not selectable global light/dark themes. In the captured Day 2 view, DAY 2 sits on sage with black text, while DAY 1 appears on black with salmon text. The Day 1 DOM records show the corresponding salmon field and a black alternate-day link with sage text.

The illustration contains vivid pink, cyan, yellow, deep blue, pale pink, and black. Their exact asset colors were not extracted. Treat these as artwork colors rather than additional measured interface tokens.

## Tokens — Typography

### Interface Sans Serif

The computed body family begins with Helvetica Neue, Helvetica, and Arial, followed by Japanese system fonts including YuGothic, Yu Gothic Medium, Yu Gothic, Hiragino Kaku Gothic ProN, Hiragino Kaku Gothic Pro, and MS Gothic, then `sans-serif`. The full source stack contains both Japanese and English aliases for several families.

- **Measured regular weight:** `400` across navigation, program headings, and body text.
- **Measured emphasis weight:** `700` for selected message text, workshop contributor links, and talk-session contributor names.
- **Character:** compact, neutral, editorial. Large program titles often remain regular weight; the opening graphic lettering supplies the heavy display contrast.
- **Implementation alias:** `--font-interface` using a shortened version of the verified stack.

### Graphic Lettering Versus Live Text

The enormous FUTURES / REALITIES title should be treated as a graphic wordmark. Its exact font family and rendering element are not established by the supplied samples. The measured H1 is instead the small Japanese introduction, “手を動かし、いざ実装！ハンズオン型カンファレンス開催！”, at `16px / 25.6px` on desktop.

Do not assign the H1's measured size to the visible wordmark. Conversely, do not invent a heavyweight font name from the wordmark's appearance. Use the authorized graphic asset when available, or label any live-type substitute as an approximation.

### Declared but Unverified Typography

`--font-garamond: EB Garamond, serif` exists, but none of the supplied sampled elements establishes a visible use of that family. It should not become the default heading font in a reproduction.

`--font-beauty: rotate(0.05deg)` contains a transform value despite its name. It is not a font family. Slightly rotated element bounds are consistent with a tiny rendering adjustment, but the declaration does not justify visibly tilted typography throughout the design.

### Type Scale

| Role | Desktop | Mobile | Status and notes |
| --- | --- | --- | --- |
| HTML root | `16px` | `16px` | Measured; conventional root size |
| Body default | `16px / 18.4px` | `14.56px / 16.744px` | Measured defaults; content frequently overrides line height |
| Main navigation | `16px / 16px` | `12px / 12px` | Measured, weight 400, normal tracking |
| Japanese opening H1 | `16px / 25.6px` | Not established | Measured desktop; no corresponding mobile text sample |
| Message paragraphs | `16px / 27.2px` | `14.56px / 23.296px` | Measured |
| Message closing emphasis | `20px / 27.2px`, 700 | `20px / 32px`, 700 | Measured |
| INTRO heading | `50px / 50px` | `31.2px / 31.2px` | Measured, weight 400 |
| Intro descriptive copy | `14px / 22.4px` | `14px / 22.4px` | Measured; `0.7px` tracking |
| Day subtitle | `20px / 20px` | `16.64px / 23.296px` | Measured |
| Workshop eyebrow | `12px / 12px` | `10.4px / 10.4px` | Measured white text |
| Workshop Japanese title | `27px / 37.8px` | `16.64px / 23.296px` | Measured; tracking `1.35px` / `0.832px`, equivalent to `0.05em` |
| Workshop summary | `14px / 22.4px` | `11.44px / 18.304px` | Measured; `0.05em` tracking |
| Workshop READ MORE | `14px / 22.4px` | `11.44px / 18.304px` | Measured; follows summary scale |
| Workshop By and contributor | `10px / 16px` | `10px / 16px` | Measured; contributor link weight 700 |
| Talk English title | `40px / 40px` | `20.8px / 20.8px` | Measured; tracking `0.8px` / `0.728px` |
| Talk contributor | `11px / 16.5px`, 700 | `11px / 16.5px`, 700 | Measured |
| Talk MORE label | `12px / 12px` | `10.4px / 10.4px` | Measured |
| News text | `14px / 14px` | `14px / 14px` | Measured |
| Mobile Q&A copy | — | Approximately `14–15px / 22–24px` | Screenshot estimate; questions appear bold |
| Terms copy | Approximately `12–13px / 22px` | Approximately `12–13px / 20–21px` | Screenshot estimates |
| Opening wordmark | Approximately `130px` visible capital height per line | Not visually supplied | Screenshot estimate of artwork, not a CSS font size |

The measured mobile workshop summary is notably small. Preserve that fact in documentation, but consider a larger reading size in an adaptation. The site does not simply scale all desktop type by one universal ratio: some sizes remain constant while others change substantially.

## Tokens — Spacing & Shapes

### Spacing Scale

There is no supplied evidence of a single global spacing unit. The interface combines fixed desktop dimensions, viewport-dependent mobile measurements, and component-specific spacing.

| Use | Desktop value | Mobile value | Evidence |
| --- | --- | --- | --- |
| Main horizontal inset | `45px` | About `18.72px` | Measured header/content placement and mobile message inset |
| Navigation link padding | `14px 8px` | `0 6px` | Measured |
| Day-tab padding | `0 15px 0 40px` | Same sampled padding | Measured |
| Intro category heading inset | `30px` horizontally | `30px` horizontally | Measured |
| Workshop card block padding | `33.333px` | `0` in sampled card | Measured |
| Workshop card side padding | Not fully sampled as a single rule | `29.12px` left, `15.6px` right | Measured mobile |
| READ MORE top spacing | `12px` | `12px` | Measured |
| Q&A marker-to-text gap | — | About `20px` | Screenshot estimate |
| Q&A entry separation | — | About `20–25px` around content and rules | Screenshot estimate; varies with text height |

### Border Radius

| Element | Value or appearance | Evidence |
| --- | --- | --- |
| Main panels and content regions | Square, `0` radius in sampled elements | Measured and visually corroborated |
| Hero day links | `9999px` | Measured |
| Talk MORE links | `9999px` | Measured |
| Small circular talk links | `100%` | Measured |
| Q and A markers | Circular | Visual observation; approximately 36px diameter |
| Preference utility | Slightly rounded rectangle | Visual observation; separate utility treatment |

The principal shape contrast is square content versus elongated oval actions. Avoid applying rounded corners to every media panel or content block.

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Persistent masthead | `75px` high | `70px` high | Measured |
| WIRED logo link box | `99 × 19.72px` | `62 × 12.34px` | Measured anchor bounds, not intrinsic asset size |
| Main navigation link height | Approximately `44px` | Approximately `30px` | Measured; tiny rotations affect bounds |
| Hero day link | `200 × 80px` | `166.39 × 66.55px` | Measured |
| Day navigation | Two `720px` halves, `50px` high | Two `195px` halves; wrapper `50px` high | Measured |
| Mobile category navigation | Not this arrangement | Three approximately `130 × 34px` links | Measured |
| Program stage | `825px` high | `690px` high | Measured sampled sections |
| Desktop category rail | `115px` wide | Replaced by the horizontal category row in sampled markup | Measured |
| Day 1 opening panel | `1095px` wide | `738.44px` wide in the horizontal arrangement | Measured; width exceeds mobile viewport intentionally within the sequence |
| Workshop card | `982 × 425.78px` | `296.39 × 459.88px` | Measured sampled cards |
| Workshop copy column | `400px` wide | `250.69px` wide | Measured |
| Day 2 workshop media rectangle | Approximately `461 × 359px` | Not visually supplied | Desktop screenshot estimate |
| Talk title content width | `496px` | `264.17px` | Measured sampled title boxes |
| Talk MORE link | `297 × 122px` | `166.39 × 66.55px` | Measured |
| Terms reading region | Approximately `670px`, centered | Nearly full width with approximately `20px` outer clearance | Screenshot estimates |
| Bottom sales strip | Approximately `50px` high | Approximately `50px` high | Screenshot estimates |

The desktop stage height numerically equals `1000 − 75 − 50 − 50 = 825px`. The mobile stage height equals `844 − 70 − 50 − 34 = 690px`. These are useful geometric relationships, not verified source formulas. In particular, do not assume the mobile footer has been reserved outside the stage.

## Components

### Persistent Masthead

**Role:** continuous identity and access to the long page's major sections.

On desktop, an ivory strip spans the viewport. The WIRED logo begins at x = 45px, with a compact two-line FUTURES / REALITIES mark alongside it. The navigation begins around x = 410px and runs through eleven uppercase destinations. Its text is 16px regular sans serif; measured link boxes are approximately 44px high.

The header stays at the top in the supplied scrolled screenshots. Mobile DOM also places it at y = 0 while the document is substantially scrolled. The evidence establishes persistence, although the exact `fixed` versus `sticky` implementation was not supplied.

At mobile width, the header changes to two rows: a centered identity group in an approximately 40px ivory band, then a 30px black navigation strip with ivory labels. The menu continues beyond the right edge. Its offscreen link coordinates confirm an unwrapped horizontal sequence; the supplied evidence does not establish the exact scrolling gesture or overflow implementation.

### Opening Poster

**Role:** establish the event identity, date, location, and two program entry points.

The visible composition has five layers:

1. A small event line, WIRED CONFERENCE 2022, at upper left and the venue line at upper right.
2. Huge two-line black FUTURES / REALITIES lettering spanning almost the entire usable width.
3. A short Japanese introduction below the left edge of the lettering.
4. A large date line on the right: 2022.10.14 fri–15 sat, with smaller weekday suffixes.
5. A colorful group illustration across the lower left and center, balanced by two day links at lower right.

In the current desktop screenshot, the wordmark occupies approximately x = 45–1350px and y = 145–430px. The visible illustration spans roughly 960 × 515px, reaching close to the bottom of the viewport. The event line looks approximately 36px high in type, the date approximately 48px, and the venue approximately 20px with expanded tracking. These are visual estimates; their CSS typography was not sampled.

Keep the two-line title intact and preserve its overwhelming scale. The illustration is a complete composition with empty background around its figures, rather than a photograph cropped into a hero rectangle. The opening's text hierarchy depends on the oversized graphic and modest live copy coexisting.

### Hero Day Links

**Role:** direct entry to the two program days.

Each desktop row pairs a DAY 1 or DAY 2 label with a 200 × 80px outlined oval. The first oval carries FUTURES in salmon; the second carries REALITIES in teal. A small outlined circular downward arrow sits near the right end. A thin horizontal rule separates the rows.

The measured links point to `#day1Anchor` and `#day2`. Their source transition changes `background-color` over 300ms with `ease-in-out`; the resulting hover fill was not captured.

Mobile bounds place the two links side by side, both at the same y coordinate, with approximately 19.78px between them. Their measured size is 166.39 × 66.55px. The mobile opening artwork itself is outside the supplied visual scope.

### News Rail and Sales Strip

**Role:** communicate the current sales status without replacing the conference content.

The desktop opening has a narrow news rail near the right edge. A bold News label precedes repeated Japanese sales-ended text. The measured repeated text boxes are 14px wide and approximately 318.83px high, consistent with the vertical presentation.

Mobile news text boxes reverse that proportion to approximately 318.83 × 14px, forming a horizontal run. The computed animation is `20s linear infinite newsTicker` in both records.

At deeper positions, a black bottom strip repeats the sales-ended notice in small white text. A white BUY capsule remains visible near the right edge, partly covered by the preference utility in the screenshots. Its surrounding link points to `#tickets`. Treat the sales-ended wording as the current authoritative status; the remaining BUY label does not establish an available checkout.

The lower strip is absent from the supplied desktop opening screenshot and present in the deeper captures. Its appearance threshold and animation timing were not supplied.

### Supporter Band and Message

**Role:** move from the opening poster into event context.

The desktop DOM places a Supported by label and three linked supporter marks below the initial viewport. The label uses 16px text, while the logo links have measured 35px-high boxes and horizontal padding. On mobile, the support label occupies a full row and the linked marks occupy two columns, with the third on another row.

The message content uses generous paragraph spacing and a measured 1080px-wide desktop text container. Its body is 16px / 27.2px. Mobile narrows the container to approximately 352.56px with 14.56px / 23.296px body text. A closing sentence increases to 20px bold, wrapping to two lines in the mobile record.

The supplied screenshots do not show this section's full composition. These measurements describe its text and link structure without inventing illustration placement.

### Intro Sequence

**Role:** explain the event through TALK SESSION, WORKSHOP, and MEETUP.

The desktop DOM arranges an introductory block and three numbered category sections horizontally, all with a sampled height of 500px. The initial block is 460px wide, including substantial right padding. Subsequent blocks extend beyond the viewport.

A 50px INTRO heading introduces a narrow 315px descriptive column. Category headings have 30px horizontal padding and a fine boundary visible in their measured geometry. Descriptions remain compact at 14px / 22.4px with `0.05em` tracking.

Mobile preserves a horizontal sequence, with sampled sections approximately 314–397px wide and 504.39px high. The rendered text includes deliberate category line breaks such as TALK / SES / SION and WORK / SHOP. Do not infer a normal stacked feature-card layout from the mobile viewport width.

The Keep Scrolling cue exists in rendered text. Its animation, positioning, and precise relationship to horizontal movement were not supplied.

### Day Navigation and Category Rails

**Role:** organize the two days and expose the three program categories.

A 50px day-navigation bar divides the viewport into two equal halves. Each half contains its day label and a small oval arrow control toward the right. The active day's field continues into the program surface below.

Desktop category navigation becomes tall, 115px-wide rails. In the supplied Day 2 state, WORKSHOP sits at the left in white, while TALK SESSION and MEETUP remain as two black-lettered rails at the right. Thin vertical black rules separate them. Circular arrow controls appear above the rotated category lettering.

This produces an accordion-like visual arrangement: one broad content area with narrow neighboring category labels still visible. It is a description of the captured geometry, not proof that a particular click animation or accordion widget was tested.

On mobile, the categories appear in a separate three-column row. Each link is about 130 × 34px, with 12px type on `#3A3A3A`. The Day 1 sampled links use salmon text. The desktop vertical-rail arrangement should not be squeezed unchanged into a 390px viewport.

### Workshop Entry

**Role:** present a practical session with its image, summary, detail link, and contributors.

The desktop anatomy is unusually specific:

- A two-digit item number appears above a vertical entry rule.
- A large rectangular media area sits on the left.
- A 400px-wide text column sits to the right, centered within itself.
- A small white FUTURES or REALITIES eyebrow precedes the Japanese title.
- The title uses 27px / 37.8px regular sans serif with `0.05em` tracking.
- A 14px / 22.4px summary follows, then READ MORE with a dotted underline and small accompanying symbols.
- A small By label and bold underlined contributor links finish the entry.

The sampled desktop entry is 982px wide with 33.333px block padding. In the visible Day 2 third workshop, the media is a white rectangle containing a dark green Senspace mark. Its visible size is approximately 461 × 359px. The media-to-copy gap is approximately 50px. This is a content image, not evidence that Senspace produced the website.

The mobile sampled entries are approximately 296.39px wide. Their outer display changes from flex to block, and the content column narrows to approximately 250.69px. Image and text therefore occupy a vertical entry while entries themselves remain arranged horizontally. READ MORE aligns to the left edge in the mobile bounds; contributor links can occupy separate lines.

A fine horizontal track appears near the bottom of the desktop program screenshot. It is approximately 660px wide with dark and pale segments. Its exact progress semantics and drag behavior were not tested.

### Talk Session Entry

**Role:** give each discussion a strong editorial title and a separate detail affordance.

The sampled desktop content region is 496px wide. It contains a numbered top area, circular links, a 40px uppercase English title, Japanese supporting text, contributor names, and a large MORE oval. The MORE link is 297 × 122px, making it considerably larger than the opening day links despite its small 12px label.

Mobile reduces the English title to 20.8px and the main text box to approximately 264.17px. The MORE oval becomes 166.39 × 66.55px. Contributor names remain 11px bold.

These measurements come from offscreen DOM elements. The supplied screenshots do not establish portrait crops, the complete entry background treatment, or the appearance of an opened detail state.

### Detail Content and Speaker Entries

**Role:** provide extended descriptions and biographies without making every summary equally dense.

READ MORE, MORE, contributor links, and speaker VIEW labels are present in the rendered evidence. Workshop and talk links use content-specific fragment targets. Speaker entries have `#` links, suggesting behavior beyond ordinary destination navigation, but the implementation was not supplied.

Detail text and 27 × 27px Close buttons are mounted in the DOM. Sampled detail text is white, with desktop body copy at 14px / 22.4px and mobile detail copy at 12.48px / 22.4px. Workshop detail columns measure approximately 801px on desktop and 214.2px on mobile.

No opened detail screenshot or activation trace was supplied. Do not invent modal backdrops, panel transitions, focus behavior, or a fullscreen overlay based only on the presence of Close buttons and white text. The speaker section contains 22 named entries, but its visual grid and image treatment remain outside the supplied visual scope.

### Timetable, Tickets, and Information

**Role:** make the extensive event content actionable and searchable within the page.

| Section | Rendered content | Supported implementation reference |
| --- | --- | --- |
| Extra contents | Five numbered items: exhibition, NFT badge, coffee, beer, after party | Preserve the numbered editorial hierarchy; complete visual styling is not supplied |
| Timetable | Two days, time ranges, session types, bilingual titles, breaks, and parallel workshops | Keep time, category, and description as distinct information fields |
| Tickets | Three offline ticket categories and one archive category, with prices and eligibility copy | Preserve the distinction between category, explanation, and price; display the current sales-ended status |
| Information | Schedule, language, capacity, organizers, cooperation, venue | Use clear label/value groupings; exact visual geometry is unverified |
| Inquiries | Contact link and terms | Maintain ordinary readable text and explicit links |

The original Information text names WIRED JAPAN and CONDE NAST JAPAN as organizers. This does not identify the website's designer or developer. The page also includes a Photo by Keta Tamamura credit, but the supplied excerpt does not securely map it to a particular image.

### Q&A Rows

**Role:** answer practical attendance questions in a clear reading sequence.

The mobile screenshot shows answers already visible. There are no visible plus/minus controls or collapsed rows in this capture. Document this as an expanded Q&A list, not a verified accordion.

Each entry uses two rows. An outlined white Q circle precedes a bold question; a solid black A circle precedes the answer. The markers are approximately 36px in diameter. They sit in a narrow left column, with roughly 20px between the marker and text. Each marker is visually centered against its associated text block, including multiline answers.

At 390px width, the main rules run approximately from x = 21px to x = 369px. Text begins near x = 77px. Thin black horizontal lines separate entries, with about 20–25px of breathing room around the contents. There are no card backgrounds, shadows, or rounded containers.

Use content-dependent heights. The difference between a short question and a multi-line answer is part of the rhythm.

### Terms and Long-Form Utility Copy

**Role:** keep dense contractual content legible without introducing a separate visual system.

The desktop screenshot shows a centered reading region of roughly 670px, surrounded by broad ivory margins. Small black bullet points sit outside the text edge. Paragraphs use compact type with enough line height to separate dense Japanese text, and list items have clear vertical gaps.

On mobile, the reading region expands almost to the available width. Bullet markers sit near the left margin, while text begins around x = 33px. The privacy URL remains conventionally underlined. Preserve natural wrapping and allow long URLs to break safely.

The large empty ivory area below the final visible items is part of the captured end-of-content state. It should not be interpreted as a reusable fixed-height legal panel.

### Preference Utility

A dark gray Manage Preferences rectangle is visible near the bottom right across the supplied captures. It is approximately 157 × 37px and sits about 20px from the right edge. It overlaps the lower sales interface in several screenshots.

This is utility chrome, not a primary brand component. Its provider and activation behavior were not established. A new implementation should give it a reserved position above persistent controls instead of reproducing the overlap.

## Tokens — Motion & Interaction

### Verified Declarations

| Treatment | Supplied computed value | What is established |
| --- | --- | --- |
| Opening news repetitions | `20s linear infinite newsTicker` | A continuous animation is declared at both viewport sizes |
| Main navigation links | `color 0.3s ease-in-out, top 0.3s ease-in-out` | Color and position transitions are defined; endpoints were not captured |
| Hero day links | `background-color 0.3s ease-in-out` | Background transitions are defined |
| Desktop category links | `color 0.2s ease-in-out, background-color 0.2s ease-in-out` | Short color transitions are defined |
| Talk MORE links | `background-color 0.3s ease-in-out` | Background transitions are defined |

Many samples report `transition: all` without a useful duration in the supplied serialization. That alone is not evidence of a visible animated effect.

### Declared Easing Tokens

| Source token | Value | Evidence boundary |
| --- | --- | --- |
| `--ease-out` | `cubic-bezier(0.19, 1, 0.22, 1)` | Declared; component assignment unverified |
| `--ease-in` | `cubic-bezier(0.95, 0.05, 0.8, 0.04)` | Declared; component assignment unverified |
| `--ease-inOut` | `cubic-bezier(0.86, 0, 0.07, 1)` | Declared; component assignment unverified |
| `--ease-outCirc` | `cubic-bezier(0.08, 0.82, 0.17, 1)` | Declared; component assignment unverified |
| `--ease-outBack` | `cubic-bezier(0.65, 0.27, 0.34, 1.13)` | Declared; component assignment unverified |
| `--ease-inBack` | `cubic-bezier(0.27, -0.29, 1, 0.48)` | Declared; component assignment unverified |

### Interaction Boundaries

The supplied inspection traversed the page and produced a settled program view. Horizontal arrangements are supported by both the screenshot and element coordinates. The exact relationship between vertical scrolling, horizontal translation, category selection, and any snapping remains unverified.

The static captures do not establish whether the hero illustration animates. Do not infer frame rate, looping, parallax, or animation format from the artwork's visual style. The supplied readiness process waited for relevant finite motion and temporarily paused perpetual animation during checks, but this is not a complete interaction audit.

No hover endpoints, keyboard sequences, drag interactions, timetable switching, speaker detail opening, preference dialog, or purchase flow were demonstrated. For a new implementation, use real anchors for navigation, explicit buttons for state changes, and a readable fallback for horizontally arranged content.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Flat ivory | Opening, explanatory content, Q&A, terms |
| Masthead | Ivory with black identity; mobile adds a black menu strip | Persistent navigation |
| Day 1 program | Flat salmon | A continuous program environment |
| Day 2 program | Flat sage | Distinguishes the second day without changing the interface vocabulary |
| Alternate-day navigation | Black with day-colored text | Separates the other day's destination |
| Media region | Rectangular content image; white field in the visible Senspace example | Holds contributor or workshop artwork |
| Actions | Thin outlined ovals and circular arrow details | Navigation and further information |
| Reading divisions | Thin black rules | Separate rails, Q&A entries, and selected content groups |
| Sales notice | Black with white text | Persistent current status |
| Preference control | Small dark gray utility rectangle | Privacy-related utility access |

No general shadow or raised-card system is visible. Separation comes from scale, color fields, whitespace, rules, and image boundaries. Do not assign an overlay surface based solely on the white text found in unexercised detail content.

## Imagery

The opening illustration depicts a small group of abstract people assembled from broad geometric forms. Rounded limbs, tiny heads, oversized hands, cups, bags, and other objects create a playful human scale beneath the severe typography. Black and deep-blue areas contain visible grain and stippling; color transitions are part of the artwork rather than a page-wide gradient effect.

Preserve the composition's open background and full silhouettes. It should sit directly on ivory without a card, frame, drop shadow, or photographic crop. Use normal high-quality image scaling: visible grain does not establish intentionally pixelated rendering.

The program can contain logos or other editorial media rather than repeating the hero illustration in every entry. The visible Senspace image is a dark green mark on white, centered inside a broad rectangle. Its different visual character is allowed because the panel geometry supplies consistency.

### Observed Asset References

No original image URLs, filenames, intrinsic dimensions, or file formats were included in the evidence. The following are visual references, not downloadable asset paths.

| Asset or graphic | Observed use | Evidence and limitation |
| --- | --- | --- |
| WIRED masthead mark | Persistent header | Logo-link bounds measured at both sizes; asset URL unavailable |
| Compact FUTURES / REALITIES mark | Beside WIRED on desktop; centered identity group on mobile | Visible in current screenshots; asset URL unavailable |
| Large FUTURES / REALITIES wordmark | Opening poster | Two-line graphic lettering; exact font and rendering format unverified |
| Colorful people illustration | Lower opening composition | Approximately 960 × 515px visible desktop extent; intrinsic size and motion unverified |
| Senspace mark | Day 2 workshop 03 media | White rectangle, dark green symbol and lettering; approximately 461 × 359px on screen |
| Circular arrows and small link symbols | Day links, program rails, READ MORE | Thin linework is visible; SVG, font, or raster implementation not established |
| Supporter marks | Band below the opening | Three linked elements in DOM; complete visual treatment not supplied |

Use authorized original artwork when available. A generic illustration with similar colors will reproduce the palette but not this page's identity.

## Layout & Responsive Behavior

### Desktop

The opening spans almost the full viewport width. A 45px left gutter aligns the masthead, event line, graphic wordmark, and supporting copy. A narrow right-side news rail remains separate from the main poster composition.

The lower opening balances a broad illustration against a roughly 310px-wide day-link area. Large letters dominate the upper half; the illustration fills the lower half without becoming a full-bleed background.

Program regions combine a 50px day selector with a tall stage. Narrow category rails remain visible while one category occupies most of the width. Workshop entries use side-by-side media and centered copy. Intro and program elements extend horizontally beyond the viewport; they are not ordinary desktop card grids.

Q&A and legal sections return to vertical reading. The desktop terms column deliberately occupies less than half the screen width, providing a quiet finish after the large program fields.

### Mobile

The masthead changes structure instead of merely shrinking: centered identity above a black, unwrapped navigation row. Later navigation destinations remain offscreen in the measured sequence.

Hero day links move from a vertical pair to two adjacent ovals. Their widths and x coordinates are measured, but the mobile hero image composition was not visually supplied.

Program navigation changes from vertical desktop rails to a three-part horizontal category strip. Program entries themselves remain horizontally arranged in the DOM. Workshop entries change internally to a vertical composition, narrow to roughly 296px, and use smaller typography. Preserve the distinction between stacking content inside an entry and stacking all entries into a single vertical page.

The mobile Q&A uses nearly the full width, with a separate circular-marker column. Terms use an even simpler bullet list. The persistent sales strip and preference control occupy the lower edge and visibly overlap in the supplied captures.

### Responsive Implementation Limits

The records establish endpoint layouts, not the original breakpoint values. A repeated mobile scale factor is visible in several dimensions, but the underlying CSS formulas were not supplied. Any breakpoint or interpolation in the starter below is a recommendation.

The source records `--vh: 10px` on desktop and `8.44px` on mobile, corresponding to one percent of each recorded viewport height. By contrast, `--vw` contains the full width, `1440px` or `390px`. Do not assume the two variables use equivalent units.

Reported document heights are 33,909px on desktop and 30,024px on mobile. These describe the inspected documents and may include space associated with horizontal presentations. They are not target heights to hardcode into a new page.

## Do’s and Don’ts

### Do

- Keep ivory `#FFF7EC`, black, salmon `#FF9279`, and sage `#ACCCB7` as the principal structural colors.
- Make the opening wordmark substantially larger and heavier than the surrounding live text.
- Preserve the two-line FUTURES / REALITIES composition and the full group illustration.
- Use regular sans-serif program headings, small uppercase navigation, and compact Japanese descriptions.
- Separate content with fine rules and large flat fields.
- Keep oval actions visually distinct from square content and media regions.
- Preserve the desktop category rails and document their mobile replacement accurately.
- Retain horizontal program structure where implementing the reference experience, with an accessible fallback.
- Render the Q&A as visible question-and-answer pairs unless an alternative interaction is explicitly designed.
- Keep current sales-ended messaging clear wherever old purchase labels remain.
- Label screenshot estimates and implementation adaptations separately from measured source values.

### Don't

- Don't treat the identity-preserving redirect or ended ticket sales as a discontinued website.
- Don't turn every program entry into an elevated rounded card.
- Don't replace the giant graphic wordmark with an ordinary 48px marketing heading.
- Don't infer the wordmark's font from the measured 16px Japanese H1.
- Don't introduce EB Garamond as a visible heading family solely because its variable exists.
- Don't treat vivid artwork colors or default library variables as universal UI accents.
- Don't infer a working carousel, modal, swipe gesture, or parallax effect from static geometry alone.
- Don't call workshop contributors or sponsors the website's production team.
- Don't copy transformed offscreen x/y values into absolute positioning rules.
- Don't reproduce the overlapping preference and sales controls as a deliberate brand pattern.
- Don't replace source artwork with CSS gradients or apply pixelated rendering without evidence.

## Recommended Implementation Additions

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

- Give logo-only links, arrow controls, and graphic day links explicit accessible names. Keep the graphic wordmark accompanied by a meaningful text equivalent.
- Provide a visible focus indicator and preserve normal anchor behavior, including useful fragment URLs and browser history.
- Give horizontally arranged content keyboard access and an understandable scroll affordance. Offer a vertical or static alternative for reduced motion and constrained reading environments.
- Keep all navigation destinations reachable on mobile. A horizontally scrollable menu should reveal focused links and indicate that more content exists beyond the edge.
- Make the sales-ended status available as ordinary static text. Hide duplicated marquee content from assistive technology and provide pause behavior for optional continuous motion.
- If detail panels are implemented as dialogs, add focus management, Escape handling, a clearly named close control, and focus restoration. Do not assume the original already provides them.
- Increase the measured 11.44px mobile workshop copy for a new reading-focused implementation, preferably toward 14px or more, while preserving the hierarchy.
- Review white eyebrows on pastel fields and small teal or salmon labels on ivory for contrast. The source appearance can be retained for larger decorative graphics while essential text receives stronger contrast.
- Keep approximately 44px or larger interactive targets where possible, even when the visible arrow or Close graphic is smaller.
- Reserve space above the sales strip for the preference control and device safe areas.
- Keep the full program and legal content available without requiring successful animation or a particular horizontal position.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and desktop masthead: `#FFF7EC`.
- Text, outlines, and major graphic lettering: `#000000`.
- Day 1 program: `#FF9279`.
- Day 2 program: `#ACCCB7`.
- Secondary REALITIES accent: `#379D9C`.
- Reversed labels and selected media surfaces: `#FFFFFF`.
- Mobile category navigation: measured `#3A3A3A`.
- Vivid pink, cyan, yellow, and blue belong primarily to the supplied illustration; exact asset colors are unmeasured.

### Overall Prompt

“Create an editorial conference page inspired by the currently served WIRED FUTURES/REALITIES 2022 page. Use a flat ivory canvas `#FFF7EC`, black sans-serif interface text, an enormous two-line black graphic wordmark, and an authorized colorful geometric group illustration. Keep the header compact: identity at left and eleven uppercase section links on desktop; centered identity above a black horizontal menu on mobile. Divide the program into salmon `#FF9279` and sage `#ACCCB7` day environments. Use narrow vertical category rails on desktop, numbered workshop entries with broad media and compact copy, fine black rules, and long outlined oval actions. On mobile, replace category rails with a three-part navigation row and stack media above copy within horizontally arranged entries. Finish with open Q&A rows and a restrained legal reading column. Preserve current sales-ended messaging. Treat unverified animation and detail-panel behavior as explicit implementation decisions.”

### Example Component Prompts

1. **Opening poster:** “Build a wide ivory event poster with a small event line, a venue label, a huge two-line FUTURES / REALITIES graphic, a right-aligned date, and a grain-textured geometric people illustration across the lower left. Place two 200 × 80px outlined day-link ovals at lower right. Use no card surface or shadow around the illustration.”
2. **Workshop entry:** “Create a sage program entry with a two-digit number above a thin left rule, a roughly 461 × 359px media rectangle, and a 400px centered copy column. Use a 12px eyebrow, 27px Japanese title with 1.4 line height, 14px summary, dotted-underlined READ MORE, and 10px contributor links. Keep the entry square and flat.”
3. **Category navigation:** “On desktop, frame the active program with 115px-wide vertical category rails, thin black dividers, large rotated labels, and circular arrow details. On mobile, replace those rails with three equal links in a 34px charcoal navigation row. Do not infer or invent the original transition sequence.”
4. **Mobile Q&A:** “Create a 348px-wide ivory Q&A list with 36px circular Q and A markers in a left column. Use an outlined white Q marker, solid black A marker, bold question text, regular multiline answers, approximately 20px column gaps, and thin horizontal entry rules. Keep all answers visible.”
5. **Terms:** “Use a centered legal column about 670px wide on desktop and nearly full width on mobile. Keep small black bullets, generous line height, clear gaps between list items, underlined links, and a flat ivory background. Avoid cards, decorative icons, and artificial fixed heights.”

## Quick Start

### CSS Custom Properties

This is an implementation starter, not an extracted stylesheet. Exact palette values and selected dimensions follow the supplied measurements. The 1200px breakpoint, native horizontal scrolling, focus styling, hover endpoints, and mobile hero arrangement are recommended adaptations. The code does not reproduce an unverified scroll-to-horizontal animation system or detail-dialog behavior.

Supply authorized graphic assets through the image elements. No original asset URLs were provided. The starter has not been executed or browser-tested in this analysis.

```css
:root {
  /* Source palette */
  --color-ivory: #fff7ec;
  --color-black: #000;
  --color-white: #fff;
  --color-salmon: #ff9279;
  --color-sage: #acccb7;
  --color-green: #379d9c;
  --color-gray: #8d8d8d;
  --color-darkGray: #3f3f3f;
  --color-lightGray: #d9d9d9;
  --color-workshop: #ffe8bd;
  --color-talk: #e2e8d9;
  --color-keynote: #ffd4c4;
  --color-category-mobile: #3a3a3a;

  /* Shortened verified family stack */
  --font-interface: 'Helvetica Neue', Helvetica, Arial,
    YuGothic, 'Yu Gothic Medium', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro',
    'MS Gothic', sans-serif;

  /* Measured desktop dimensions */
  --header-height: 75px;
  --day-nav-height: 50px;
  --rail-width: 115px;
  --page-gutter: 45px;
  --pill-width: 200px;
  --pill-height: 80px;
  --radius-pill: 9999px;

  /* Visual estimates and implementation aliases */
  --rule: 1px solid var(--color-black);
  --legal-width: 42rem;
  --qa-marker: 36px;
  --ticket-height: 50px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Measured transition durations */
  --motion-color: 300ms ease-in-out;
  --motion-rail: 200ms ease-in-out;
}

* { box-sizing: border-box; }
body { margin: 0; }

.conference-page {
  color: var(--color-black);
  background: var(--color-ivory);
  font-family: var(--font-interface);
  font-size: 16px;
  font-weight: 400;
  padding-bottom: calc(var(--ticket-height) + var(--safe-bottom));
}

.conference-page a { color: inherit; }
.conference-page img { max-inline-size: 100%; }
.conference-page button { font: inherit; }

.conference-page section[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-height);
  padding-inline: var(--page-gutter);
  background: var(--color-ivory);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.brand-wired {
  display: block;
  inline-size: 99px;
  block-size: auto;
}

.brand-event {
  display: block;
  inline-size: 100px;
  block-size: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  white-space: nowrap;
}

.primary-nav a {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding: 14px 8px;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--motion-color);
}

.hero {
  position: relative;
  padding: 18px calc(var(--page-gutter) + 45px)
    34px var(--page-gutter);
}

.hero-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

/* These live-type sizes approximate unsampled poster text. */
.hero-event-line { margin: 0; font-size: 36px; font-weight: 700; }
.hero-venue { margin: 0; font-size: 20px; letter-spacing: 0.14em; }

.hero-wordmark {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin-block: 14px;
}

.hero-copy { margin: 0; font-size: 16px; line-height: 1.6; }
.hero-date { margin: 0; font-size: 48px; line-height: 1.1; }
.hero-date small { font-size: 0.55em; }

.hero-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: end;
  gap: 30px;
}

.hero-art {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.day-choice {
  display: grid;
  grid-template-columns: 90px 200px;
  align-items: center;
  gap: 20px;
  padding-block: 15px;
}

.day-choice + .day-choice { border-top: var(--rule); }
.day-choice-label { font-size: 20px; }

.pill-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  inline-size: var(--pill-width);
  block-size: var(--pill-height);
  border: var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  text-decoration: none;
  transition: background-color var(--motion-color);
}

.pill-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pill-link--futures .pill-label { color: var(--color-salmon); }
.pill-link--realities .pill-label { color: var(--color-green); }

.arrow-circle {
  display: grid;
  place-items: center;
  inline-size: 25px;
  block-size: 25px;
  border: var(--rule);
  border-radius: 50%;
}

.program--day1 { --day-color: var(--color-salmon); }
.program--day2 { --day-color: var(--color-sage); }
.program { background: var(--day-color); }

.day-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-block-size: var(--day-nav-height);
}

.day-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 40px 15px;
  background: var(--color-black);
  color: var(--tab-color, var(--day-color));
  text-decoration: none;
  text-transform: uppercase;
}

.day-nav a[aria-current='true'] {
  color: var(--color-black);
  background: var(--day-color);
}

/* Recommended static layout for an active workshop state. */
.program-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr)
    var(--rail-width) var(--rail-width);
  min-block-size: 825px;
}

.program-body {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-inline-size: 0;
}

.program-rail {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 35px;
  border-inline-start: var(--rule);
  writing-mode: vertical-rl;
  font-size: 60px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--motion-rail),
    background-color var(--motion-rail);
}

.program-rail[aria-current='true'] { color: var(--color-white); }
.program-subnav { display: none; }

/* Native scrolling is an adaptation, not a source behavior claim. */
.program-track {
  display: flex;
  align-items: center;
  gap: 0;
  min-inline-size: 0;
  overflow-x: auto;
  padding: 40px 45px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 45px;
}

.workshop-card {
  position: relative;
  flex: 0 0 982px;
  display: grid;
  grid-template-columns: minmax(0, 461px) minmax(0, 400px);
  align-items: center;
  gap: 50px;
  padding: 33.333px 30px 33.333px 40px;
  border-inline-start: var(--rule);
  scroll-snap-align: start;
}

.workshop-number {
  position: absolute;
  inset-block-start: -28px;
  inset-inline-start: 5px;
  font-size: 16px;
}

.workshop-media {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

.workshop-copy { min-inline-size: 0; text-align: center; }
.workshop-eyebrow {
  margin: 0 0 15px;
  color: var(--color-white);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.workshop-title {
  margin: 0 0 8px;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.workshop-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.read-more {
  display: inline-flex;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-decoration: underline dotted;
  text-underline-offset: 5px;
}

.workshop-by {
  margin-top: 28px;
  font-size: 10px;
  line-height: 16px;
}
.workshop-by a { font-weight: 700; }

.talk-title {
  margin: 0;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.talk-more {
  --pill-width: 297px;
  --pill-height: 122px;
  font-size: 12px;
}

.qa-list {
  inline-size: min(670px, calc(100% - 42px));
  margin-inline: auto;
}

.qa-item {
  padding-block: 20px 24px;
  border-bottom: var(--rule);
}

.qa-line {
  display: grid;
  grid-template-columns: var(--qa-marker) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 0;
  font-size: 14.56px;
  line-height: 1.6;
}

.qa-line + .qa-line { margin-top: 18px; }
.qa-line p { margin: 0; }
.qa-question { font-weight: 700; }

.qa-marker {
  display: grid;
  place-items: center;
  inline-size: var(--qa-marker);
  block-size: var(--qa-marker);
  border: var(--rule);
  border-radius: 50%;
  background: var(--color-white);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.qa-marker--answer {
  color: var(--color-white);
  background: var(--color-black);
}

.legal {
  inline-size: min(var(--legal-width),
    calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
  font-size: 13px;
  line-height: 1.75;
}

.legal ul { padding-inline-start: 20px; }
.legal li + li { margin-top: 18px; }
.legal a { text-decoration: underline; overflow-wrap: anywhere; }

/* Static, readable status is the default adaptation. */
.sales-status {
  position: fixed;
  z-index: 40;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  min-block-size: calc(var(--ticket-height) + var(--safe-bottom));
  padding: 10px 20px calc(10px + var(--safe-bottom));
  color: var(--color-white);
  background: var(--color-black);
  font-size: 12px;
  line-height: 1.4;
}

/* Recommended clearance above the persistent status strip. */
.preferences-trigger {
  position: fixed;
  z-index: 41;
  inset-inline-end: 20px;
  inset-block-end: calc(var(--ticket-height) + var(--safe-bottom) + 12px);
}

.conference-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (hover: hover) {
  /* Recommended hover endpoints; source endpoints were not supplied. */
  .primary-nav a:hover { color: var(--color-green); }
  .pill-link:hover { background: var(--color-white); }
}

@media (max-width: 1200px) {
  :root {
    --header-height: 70px;
    --page-gutter: 4.8vw;
    --pill-width: 166.39px;
    --pill-height: 66.55px;
  }

  .masthead { display: block; padding: 0; }
  .brand-lockup { justify-content: center; block-size: 40px; gap: 11px; }
  .brand-wired { inline-size: 62px; }
  .brand-event { inline-size: 62px; }

  .primary-nav {
    block-size: 30px;
    padding-inline: 15px;
    overflow-x: auto;
    color: var(--color-ivory);
    background: var(--color-black);
  }
  .primary-nav a {
    min-block-size: 30px;
    padding: 0 6px;
    font-size: 12px;
  }

  /* Mobile poster arrangement is a recommendation. */
  .hero { padding: 20px var(--page-gutter) 40px; }
  .hero-meta { flex-wrap: wrap; gap: 8px; }
  .hero-event-line { font-size: 20px; }
  .hero-venue { font-size: 12px; }
  .hero-date { font-size: 30px; }
  .hero-bottom { display: block; }
  .hero-day-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5.07vw;
    margin-top: 24px;
  }
  .day-choice { display: block; padding: 0; }
  .day-choice + .day-choice { border-top: 0; }
  .day-choice-label { display: block; margin-bottom: 10px; font-size: 14px; }
  .day-choice .pill-link { inline-size: 100%; }

  .program-stage { display: block; min-block-size: 690px; }
  .program-body { display: block; }
  .program-rail { display: none; }
  .program-subnav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--color-category-mobile);
  }
  .program-subnav a {
    display: grid;
    place-items: center;
    min-block-size: 34px;
    color: var(--day-color);
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
  }
  .program-track { padding-inline: var(--page-gutter); }
  .workshop-card {
    flex-basis: 296.39px;
    display: block;
    padding: 0 15.6px 0 29.12px;
  }
  .workshop-copy { margin-top: 16px; text-align: start; }
  .workshop-eyebrow { font-size: 10.4px; margin-bottom: 5.2px; }
  .workshop-title { font-size: 16.64px; }
  .workshop-summary, .read-more { font-size: 11.44px; }
  .workshop-by { margin-top: 10.4px; }
  .talk-title { font-size: 20.8px; letter-spacing: 0.035em; }
  .talk-more { --pill-width: 166.39px; --pill-height: 66.55px; }
  .legal { font-size: 12.48px; line-height: 1.65; }
  .legal ul { padding-inline-start: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .conference-page *,
  .conference-page *::before,
  .conference-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .program-track { scroll-snap-type: none; }
}
```

**Markup contract:** the masthead contains `.brand-lockup` and `.primary-nav`. Each day section combines `.program` with a day modifier, followed by `.day-nav`, the mobile `.program-subnav`, and `.program-stage`. The stage contains `.program-body` plus two desktop category rails; the body contains the active category rail and `.program-track`. Place complete workshop entries inside that track. Q&A can use a semantic description list, with each entry containing a question and answer row. Keep artwork alternatives, accessible names, and the sales-ended message in HTML rather than CSS-generated content.

For improved mobile reading, override `.workshop-summary` and `.read-more` to `14px` and allow taller entries. This intentionally departs from the measured 11.44px source text.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--color-ivory);
  --color-ink: var(--color-black);
  --color-futures: var(--color-salmon);
  --color-realities: var(--color-sage);
  --color-teal: var(--color-green);
  --color-category-nav: var(--color-category-mobile);

  --font-sans: var(--font-interface);
  --text-nav: 1rem;
  --text-caption: 0.75rem;
  --text-program-body: 0.875rem;
  --text-workshop-title: 1.6875rem;
  --text-talk-title: 2.5rem;

  --spacing-page: var(--page-gutter);
  --spacing-rail: var(--rail-width);
  --spacing-masthead: var(--header-height);
  --radius-pill: 9999px;
}
```

## Sources & Evidence

- [Requested original URL](https://wired.jp/article/futures-realities-2022/): supplied browser record reports an identity-preserving redirect to the branded conference path.
- [Currently served conference page](https://wired.jp/branded/futures-realities-2022/): supplied HTTP status 200, title, rendered text, fragment links, organizer text, photograph credit, computed styles, custom properties, and element bounds.
- **Capture time:** `2026-10-01T18:22:35.186Z`, equivalent to October 2, 2026, 03:22:35.186 JST.
- **Desktop evidence:** recorded 1440 × 1000 viewport; current opening screenshot, Day 2 workshop screenshot, and terms screenshot. Reported document height: 33,909px.
- **Mobile evidence:** recorded 390 × 844 viewport; current Q&A and terms screenshots, plus mobile DOM measurements of navigation, opening links, message, intro, and program content. Reported document height: 30,024px.
- **Computed-style scope:** sampled elements establish exact palette values, interface font stacks, selected type sizes, dimensions, padding, radii, transitions, and the news animation declaration. The provided element samples do not cover every later section.
- **Inspection procedure:** the supplied browser process observed the initial page for at least five seconds, checked layout and visible-image readiness, waited for relevant finite motion within stated limits, and traversed intermediate scroll positions. Perpetual animations were temporarily paused for readiness checks and then resumed. SharedWorkers and service workers were disabled.
- **Limitations:** no separate activation trace, hover-state screenshots, opened detail panels, asset manifest, complete stylesheet, JavaScript implementation, or breakpoint rules were supplied. Readiness checks do not establish semantic completeness or verify delayed and unexercised states.

This reference describes the current page served at the inspected URLs. Numerical estimates, recommended accessibility changes, and the CSS adaptation are explicitly separated from supplied measurements.