/* ========================================================================== TOP — EDITORIAL ART DIRECTION (Phase 1) LEFT = SILENCE / RIGHT = OBSERVATION Presentation only. No markup, copy, interaction, order or link changes. Loaded after home-hero.css on the home template. One master grid: a quiet left field (~--silence) holds only the section number / label; the headline, body and the visual all begin in the right editorial field. What happens in that right field is deliberately different per section, and the vertical density is deliberately uneven: HERO strong (frozen) 00 PERSPECTIVE very quiet — small inset figure, generous air 01 FIELD OF VIEW large figure — oversized, right-biased, right-cropped 02 KNOWLEDGE very large — text + Sphere read as one; Sphere from the right, well past the viewport, tilted left YOUR QUESTION dark / quiet — right-weighted on the black band 03 CASES structured — research index rows, denser than 00/01 04 JOURNAL dense archive — tight record grid, most information/least air ========================================================================== */ :root { --silence: 21%; } /* ---- master grid : label left, everything else in the right field ------- */ .home-manifesto, .page-section > .section-header, .page-section > .container > .section-header { display: grid; grid-template-columns: var(--silence) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } /* kill the old third "rail" column — the headline gets the whole right field */ .section-header { grid-template-columns: var(--silence) minmax(0, 1fr) !important; } .section-header > h2 { grid-column: 2; } .section-header > p { grid-column: 2; padding-left: 0; margin-top: clamp(0.75rem, 1.5vw, 1.25rem); max-width: 32rem; } /* the number / label : a quiet margin note, stacked, top-aligned */ .section-index { flex-direction: column; gap: 0.4rem; align-self: start; } /* right-field alignment for every section's main content block */ .manifesto-copy, .observation-figure, .kn-intro, .question-flow, .case-list, .journal-grid { margin-left: var(--silence); } /* ====================================================================== 00 OUR PERSPECTIVE — the quiet page after the cover ====================================================================== */ #perspective { padding-block: clamp(9rem, 20vh, 17rem); } #perspective .manifesto-copy { display: block; max-width: 52rem; } #perspective .manifesto-heading { max-width: none; /* keep the authored
line breaks — no mid-phrase wrap */ margin: 0; } #perspective .manifesto-visual { --kv-w: min(63rem, 135%); /* full size: 2.25× the original min(28rem, 60%) */ width: calc(var(--kv-w) * 0.85); /* 85% — shrinks toward the pinned left edge */ /* left edge pinned to where the full-size centred figure used to start */ margin: clamp(2.75rem, 7vh, 5.5rem) 0 0 calc(50% - var(--kv-w) / 2 + var(--page-gutter) / 2); } #perspective .manifesto-visual img { height: auto; aspect-ratio: 32 / 15; /* match the contact sheet (3200×1500) — no crop */ object-fit: fill; filter: none; /* this figure only — keep the source colour, no site-wide grayscale */ } /* ====================================================================== 01 FIELD OF VIEW — BIG + PARTIAL + FAINT : an oversized observation figure entering the right field and cropped by the viewport edge. Phase 1.2: the OBSERVATION centre sits ~70% across the figure, so the plate is sized against the viewport (not the container) to keep that centre near the right edge but never clipped off it, at every width. ====================================================================== */ #research { padding-block: clamp(6rem, 12vh, 10.5rem); overflow: clip; } #research .observation-figure { margin-left: calc(var(--silence) - 5%); /* the far ranges reach into the silence */ margin-right: calc(50% - 50vw); /* free the right side; section clips it */ margin-top: clamp(1.75rem, 4vw, 2.75rem); /* 1.69.7 — heading→rule gap matches §00 / §02 (their padding-bottom) */ width: auto; } #research .observation-figure__index { max-width: 46rem; /* the metadata line stays in the field */ } #research .observation-figure__plate { width: min(1440px, 88vw); /* OBSERVATION ~76-81% across; the 1-2 o'clock labels stay on-screen at every width */ margin-top: clamp(1rem, 3vh, 2.5rem); } #research .observation-figure__plate .ov--desktop { width: 100%; height: auto; } #research .observation-figure__caption { margin-left: 5%; /* pull the caption back into the field */ } /* ====================================================================== 02 KNOWLEDGE NETWORK — text + Sphere as ONE composition. Phase 2.1: the Sphere is a huge multi-layer knowledge object. It sits RIGHT (a big share of it is off the right / top / bottom of the viewport) with a quiet LEFT ~21% of editorial silence. The canvas is full-bleed so the renderer can place the patch at ~60% of the VIEWPORT and dissolve anything that would intrude on the silence — the left quiet comes from the sphere's POSITION, not from a framed box. ====================================================================== */ #knowledge-network { padding-block: clamp(6rem, 13vh, 12rem) clamp(4rem, 9vh, 8rem); overflow: clip; } /* drop the header's column-gap so the h2 starts on var(--silence) — flush with .kn-intro's own margin-left: var(--silence), not one gap further right */ #knowledge-network .section-header { column-gap: 0; } #knowledge-network .kn-intro { max-width: 38rem; position: relative; z-index: 2; /* copy stays above the Sphere */ } #knowledge-network .knowledge-world { margin-top: clamp(-7rem, -9vh, -3.5rem); /* canon v4.1.28 — tightened gap; the canvas' own empty top overlaps the whitespace */ margin-left: calc(50% - 50vw); /* full-bleed left … */ margin-right: calc(50% - 50vw - clamp(2rem, 7vw, 8rem)); /* … and well past the right edge */ width: auto; } #knowledge-network .knowledge-world.knowledge-world--on { min-height: clamp(30rem, 64vh, 50rem); /* canon v4.1.28 — a wide skim of the sphere surface below the copy */ } /* the live canvas fills the band without feeding its own size back into the wrapper's height (it measures the wrapper on resize) */ #knowledge-network .knowledge-world.knowledge-world--on .knowledge-world__canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; } /* fallback static figure keeps its own readable width if the canvas fails */ #knowledge-network .knowledge-world .knowledge-figure { margin-left: 0; margin-right: auto; } /* ====================================================================== YOUR QUESTION — DARK / QUIET, right-weighted. Grid memory kept on black. ====================================================================== */ .page-section.dark { padding-block: clamp(7rem, 14vh, 12.5rem); } .page-section.dark .question-flow { margin-left: var(--silence); max-width: 44rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); } /* ====================================================================== 03 CASES — research index. Denser than 00 / 01, still in the field. ====================================================================== */ #evidence { padding-block: clamp(5.5rem, 9vh, 8.5rem); } #evidence .case-list { margin-left: var(--silence); margin-top: clamp(2.5rem, 5vh, 4rem); max-width: 64rem; /* not spread full width */ } #evidence .case-study { gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.75rem, 3.2vh, 2.75rem) 0; } #evidence .case-study h3 { margin: 0.35rem 0 0; } #evidence .case-study ol { margin: 1.1rem 0 0; } /* TOP shows representative CASEs only — this is the way through to the full archive at /works/ */ #evidence .works-cta { margin-left: var(--silence); margin-top: clamp(2rem, 4vw, 3rem); } /* ====================================================================== 04 JOURNAL — the archive. Highest density, least air. ====================================================================== */ #journal { padding-block: clamp(4.5rem, 7.5vh, 7rem); } #journal .journal-grid { margin-left: var(--silence); margin-top: clamp(2rem, 4vh, 3rem); } #journal .journal-card { min-height: 12rem; /* note連携: excerpt廃止に伴うカード高さ（staging踏襲） */ padding: clamp(1.1rem, 2.2vh, 1.6rem); } #journal .journal-card h2 { font-size: clamp(1.2rem, 1.55vw, 1.65rem); line-height: 1.32; margin: var(--space-6) 0 var(--space-6); /* note連携: 日付→タイトル→リンクを1記事として詰める（staging踏襲） */ } #journal .journal-card p { font-size: 0.88rem; } #journal .journal-card a { margin-top: var(--space-4); padding-top: var(--space-3); } /* note連携: 04 JOURNAL 末尾の全記事リンク（READ ALL ON note）。既存 .text-link をそのまま使い、 右フィールドの左端（--silence）に揃える。gridが空のときも位置は変わらない。（staging踏襲） */ #journal .journal-cta { margin-left: var(--silence); margin-top: clamp(2.5rem, 5vh, 3.75rem); } #journal .journal-grid + .journal-cta { margin-top: clamp(2rem, 4vh, 3rem); } /* ====================================================================== MOBILE — keep the asymmetry: a modest left inset + content offset + the big visuals still cropped from the right. Not a plain 100%-width stack. ====================================================================== */ @media (max-width: 62rem) { :root { --silence: clamp(1.75rem, 9vw, 3.5rem); } .home-manifesto, .page-section > .section-header, .page-section > .container > .section-header, .section-header { grid-template-columns: 1fr !important; gap: clamp(1.5rem, 5vw, 2.5rem); } .section-header > h2, .section-header > p { grid-column: 1; /* no phantom 2nd column on the single-col mobile grid */ margin-left: var(--silence); /* keep the headline offset from the label */ } .section-index { flex-direction: row; gap: var(--space-4); } .manifesto-copy, .observation-figure, .kn-intro, .question-flow, .case-list, .journal-grid { margin-left: var(--silence); } #perspective { padding-block: clamp(5rem, 14vh, 9rem); } #perspective .manifesto-visual { --kv-w: min(45rem, 150%); } /* mobile full size; width / left-edge formula inherited from the base rule */ #research { padding-block: clamp(4rem, 10vh, 7rem); } /* mobile : the static figure must fit the column whole — no bleed, nothing clipped off the right (§22 / §23). */ #research .observation-figure { margin-left: var(--silence); margin-right: var(--silence); } #research .observation-figure__plate { width: 100%; } #knowledge-network { padding-block: clamp(4rem, 11vh, 8rem) clamp(3rem, 7vh, 6rem); } #knowledge-network .kn-intro { margin-left: var(--silence); } #knowledge-network .knowledge-world { margin-top: clamp(-9rem, -9vh, -4rem); margin-left: var(--silence); margin-right: calc(50% - 50vw); width: min(900px, 150%); } .page-section.dark { padding-block: clamp(5rem, 12vh, 9rem); } .page-section.dark .question-flow { margin-left: var(--silence); max-width: none; } #evidence { padding-block: clamp(4rem, 9vh, 6.5rem); } #evidence .case-list { margin-left: var(--silence); max-width: none; } #evidence .works-cta { margin-left: var(--silence); } #journal { padding-block: clamp(3.5rem, 7vh, 5.5rem); } #journal .journal-grid { grid-template-columns: 1fr; margin-left: var(--silence); } #journal .journal-card { min-height: 0; } #journal .journal-cta { margin-left: var(--silence); } /* note連携（staging踏襲） */ } /* ====================================================================== PHASE 1.1 / 1.2 — 01 FIELD OF VIEW : LEFT EDGE DISSOLVE The figure's container must not meet the left silence on a vertical line. A soft horizontal mask on the plate (paint only — it does NOT touch layout, the SVG CTM, pointer coordinates or the reveal radius) fades the figure to fully transparent toward the left. The terminus is transparent, not white: the page's own paper shows straight through, so there is no edge and no colour seam. Phase 1.2: the dissolve is now confined to the leftmost ~8% and reaches near-full opacity by ~15%, so the FAR ranges that live in the left silence (USER / VALUE / SOCIETY) keep their 2-5% trace instead of being masked away — "something is there, unrecognised", not "nothing is there". ====================================================================== */ #research .observation-figure__plate { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.06) 3%, rgba(0, 0, 0, 0.4) 8%, rgba(0, 0, 0, 0.78) 15%, #000 24%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.06) 3%, rgba(0, 0, 0, 0.4) 8%, rgba(0, 0, 0, 0.78) 15%, #000 24%, #000 100%); } @media (max-width: 62rem) { /* mobile never had the dark field — only prevent a container edge */ #research .observation-figure__plate { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 4%, #000 10%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 4%, #000 10%, #000 100%); } } /* ====================================================================== 1.69.5 — §00 / §02 : the thin ink rule between the heading copy and the figure, adopted from #research .observation-figure__index so all three editorial sections carry the same "text ends / figure begins" divider. Sits at the end of the reading column, its own width — no new markup, CSS only. ====================================================================== */ #perspective .manifesto-heading { border-bottom: 1px solid var(--color-ink); padding-bottom: clamp(1.75rem, 4vw, 2.75rem); } #knowledge-network .kn-intro { border-bottom: 1px solid var(--color-ink); padding-bottom: clamp(1.75rem, 4vw, 2.75rem); } /* ====================================================================== 1.69.8 — §00 / §02 : the figure-metadata line under the divider — the §01 "SCALE OF OBSERVATION / ONE SUBJECT · FOUR RANGES" equivalent, worded for each scene. Same mono two-part caption as #research .observation-figure__index, minus its border (the divider is already the heading's border-bottom above). ====================================================================== */ #perspective .manifesto-index, #knowledge-network .kn-index { color: var(--color-muted); display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; margin: 0; padding-top: var(--space-4); } #perspective .manifesto-index span:first-child, #knowledge-network .kn-index span:first-child { color: var(--color-ink); } #perspective .manifesto-index { max-width: 52rem; } #knowledge-network .kn-index { margin-left: var(--silence); /* 1.69.9 — align with .kn-intro; the left ~silence stays empty (§00's line is inside .manifesto-copy so it is already offset) */ max-width: 38rem; position: relative; z-index: 2; /* stay above the full-bleed canvas that follows */ } @media (max-width: 45rem) { #knowledge-network .kn-index { margin-left: 0; /* match .kn-intro going flush-left on phones */ } } /* §00 — the metadata line now occupies what was empty space above the contact sheet; give the figure back an equivalent gap so it doesn't ride up against the caption. */ #perspective .manifesto-visual { margin-top: clamp(4.5rem, 9vh, 7.25rem); }