/* ========================================================================== SHIFT — Reset, typography, layout primitives ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Header is fixed — anchor jumps must clear it. */ scroll-padding-top: 7rem; } body { background: var(--c-base); color: var(--c-ink); font-family: var(--f-sans); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; min-height: 100dvh; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :target { scroll-margin-top: 7rem; } /* --- Focus: never removed, always visible in both themes ----------------- */ :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--radius); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--c-ink); color: var(--c-base); } /* ========================================================================== Bilingual layer Both languages ship in the HTML so each is crawlable and the page still reads correctly with JS disabled. decides which is shown. ========================================================================== */ [data-lang="ja"] :is(.en, [lang="en"].t) { display: none; } [data-lang="en"] :is(.ja, [lang="ja"].t) { display: none; } /* Japanese needs its own optical sizing. Every glyph is full-width, so at the Latin display size a headline runs three times as wide and wraps. These overrides bring the large sizes down and open the line-height back up. */ [data-lang="ja"] { --t-display: clamp(1.45rem, 0.75rem + 3.0vw, 3.4rem); --t-h1: clamp(1.75rem, 1.1rem + 2.3vw, 2.9rem); --t-h2: clamp(1.4rem, 1.1rem + 1.3vw, 2.15rem); } [data-lang="ja"] .t-display { letter-spacing: -0.02em; line-height: 1.24; } /* Japanese must wrap at word and phrase boundaries, never mid-word — a phone is where this shows, because the measure is narrow enough to force a break inside almost every long value. Two layers, because neither is enough alone: auto-phrase asks the browser to break on phrase boundaries. Chrome and Edge do; Safari ignores the value and falls back, which is why it cannot be the only measure. .nw is the guarantee. An inline-block cannot be broken internally, so any run wrapped in it moves to the next line whole. Used on the katakana runs and proper nouns, which are exactly what a browser splits worst — 所在地 was breaking as コ／ノトラビル and 代表社員 as ナシメン／ト. Keep each one short: a run wider than the column would overflow rather than wrap. */ .nw { display: inline-block; } [data-lang="ja"] :is(h1, h2, h3) { line-height: 1.42; letter-spacing: -0.01em; } [data-lang="ja"] body { letter-spacing: 0.01em; } /* Japanese wraps per character, but not anywhere: strict keeps small kana, long vowel marks and closing brackets off the start of a line. */ /* auto-phrase, not normal. This declaration is the one that counts — an earlier `word-break: auto-phrase` on this same selector was silently reset by the `normal` that used to be here, and computed back to normal. */ [data-lang="ja"] { line-break: strict; word-break: auto-phrase; overflow-wrap: normal; } .ja { line-break: strict; } .ja { font-feature-settings: "palt" 1; } /* ========================================================================== Type ========================================================================== */ h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-head); letter-spacing: var(--tr-tight); text-wrap: balance; } .t-display { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.04em; font-weight: 600; font-stretch: 92%; } .t-h1 { font-size: var(--t-h1); } .t-h2 { font-size: var(--t-h2); } .t-h3 { font-size: var(--t-h3); font-weight: 500; } .t-lead { font-size: var(--t-lead); line-height: 1.6; color: var(--c-ink-2); font-weight: 400; max-width: 34em; text-wrap: pretty; } .t-body { max-width: var(--maxw-text); text-wrap: pretty; } .t-small { font-size: var(--t-small); } /* The mono label layer — indices, eyebrows, meta. Reads as a spec sheet, and carries the accent so every section opens with a spot of colour. */ .label { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-accent); display: inline-flex; align-items: center; gap: var(--s-3); } .label--muted { color: var(--c-muted); } .label::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; flex: none; } .label--bare::before { display: none; } /* Headings run two-tone: the closing line takes the accent, so the eye is pulled through the sentence instead of hitting a wall of one colour. */ .reveal-lines > span:last-child:not(:only-child) { color: var(--c-accent); } /* Unless the headline names its own. The hero has to colour the word meaning "shift", which is the last line in Japanese but the middle one in English, so position cannot express it. A modifier class rather than :has(.hl), because a browser that does not know :has() drops the whole rule and would then colour both the named word AND the closing line. */ .reveal-lines--own-accent > span:last-child:not(:only-child) { color: inherit; } .reveal-lines .hl { color: var(--c-accent); } /* Bold is a real signal here, not decoration — it marks the phrase that carries the point of the paragraph. */ strong, b { font-weight: 700; color: var(--c-ink); } .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .muted { color: var(--c-muted); } .ink-2 { color: var(--c-ink-2); } .accent { color: var(--c-accent); } /* ========================================================================== Layout primitives ========================================================================== */ .wrap { width: 100%; max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section); padding-bottom: var(--section); position: relative; } /* Sections all share the page colour — no banding. */ .section--sunk { background: none; } .section--tight { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); } /* 12-column Swiss grid. Collapses to a single column below 768px. */ .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); } @media (max-width: 47.99em) { .grid { grid-template-columns: minmax(0, 1fr); } .grid > * { grid-column: auto !important; } } /* Span is set on the END edge, not with the shorthand. `grid-column: span N` writes to grid-column-START, so a later `grid-column-start` — which is what the .start-* utilities do — silently wiped the span and collapsed the element to a single column. */ .col-3 { grid-column-end: span 3; } .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; } .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; } .col-12 { grid-column-end: span 12; } .start-2 { grid-column-start: 2; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; } @media (min-width: 48em) and (max-width: 63.99em) { .col-3, .col-4 { grid-column-end: span 6; } .col-5, .col-6, .col-7, .col-8 { grid-column-end: span 12; } .start-2, .start-6, .start-7, .start-8, .start-9 { grid-column-start: auto; } } .stack { display: flex; flex-direction: column; } .stack > * + * { margin-top: var(--flow, var(--s-4)); } .flow-lg { --flow: var(--s-6); } .flow-sm { --flow: var(--s-2); } .row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .row--between { justify-content: space-between; } .rule { height: var(--hair); background: var(--c-line); border: 0; } /* Section heading block, used on every page for rhythm. */ .head { display: grid; gap: var(--s-4); } .head__title { max-width: 20ch; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 200; padding: var(--s-3) var(--s-4); background: var(--c-ink); color: var(--c-on-ink); transform: translateY(-200%); transition: transform var(--d-micro) var(--e-shift); } .skip:focus { transform: translateY(0); } /* ========================================================================== Print A company page gets printed and attached to things. Strip the interface, keep the content, and put link targets and the contact address on the paper where they are actually useful. ========================================================================== */ @media print { :root { --c-base: #fff; --c-paper: #fff; --c-sunk: #fff; --surface: #fff; --surface-lift: #fff; --surface-sunk: #fff; --c-ink: #000; --c-ink-2: #222; --c-muted: #555; --c-line: #bbb; --c-accent: #234; --c-accent-lo: #fff; } .header, .menu, .wipe, .machine, .marquee, .burger, .lang, .skip, .btn, .hero__fig { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } main { padding-top: 0; } .section, .phero { padding-top: 1.2rem; padding-bottom: 1.2rem; } /* Never split a boxed explanation across a page break. */ .scard, .card, .callout, .vrow, .profile__row { break-inside: avoid; page-break-inside: avoid; border: 1px solid #bbb; background: #fff; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000; } .scard__title, .card__title, .label { color: #234; } .badge { border: 1px solid #234; background: #fff; color: #234; } /* Reveal animations must never hide anything on paper. */ [data-reveal], .reveal-lines > span > span { opacity: 1 !important; transform: none !important; } /* A printed link is useless without its address. */ main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } main a[href^="mailto"]::after { content: ""; } .footer { background: #fff; color: #000; border-top: 1px solid #bbb; padding-top: 1rem; } .footer a, .footer__label, .footer__bottom { color: #000; opacity: 1; } }