/* Omnistra Protocol — Source（源）
 * プログラムが土台の、白・灰・黒だけのページ。書体は等幅の JetBrains Mono だけ（Refero の PlanetScale が主軸）。
 * 線は 1px の細い罫、角は丸めない、影もグラデーションもない（mono.frm.fm の罫と区切り）。
 * 和は「絵と動き」で出す（漢字は使わない）：浮世絵の場面を、コードの文字だけで墨一色の摺りのように描く
 * （js/source.js）。はじめは大波と富士、事業は五重塔・太鼓橋・枯山水、進め方は街道、結びは川の花火。
 * 章の区切りの一部は青海波の帯。会社情報には押せる印、結びに英語の俳句と ma。色は使わない。
 */
:root {
  --bg: #FAFAFA;
  --ink: #111111;
  --steel: #414141;
  --smoke: #737373;
  --stone: #C1C1C1;
  --hair: #E4E4E4;
  --grid: #ECECEC;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gx: clamp(18px, 4vw, 56px);
  --max: 1280px;
  --sec: clamp(88px, 13vh, 144px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --logo-icon: 1.57em;   /* ロゴのアイコンの大きさ（社名の文字の大きさに対して） */
  --logo-gap: 0.7em;     /* アイコンと社名の間（同じく文字の大きさに対して）。2026-10-26 オーナーが B に決定 */
  --logo-word: -0.22em;  /* 社名の「Omnistra」と「Protocol」の間を詰める（等幅の空白は1文字分あるため） */
  color-scheme: light;
}

/* ---------- 基本（タップのチラつき・ダブルタップ拡大を出さない：共通ルール §9.1-6・7） ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; margin: 0; overflow-x: clip; color: var(--ink); background: var(--bg); font-family: var(--mono); font-size: 16px; line-height: 1.6; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; }
a, button, canvas { -webkit-touch-callout: none; }
a, img, svg, canvas { -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
.head, .menu, .idx, .meta, .term, .log .h, .hanko, .foot-meta, .tap, .loader, canvas { -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
code, pre { font-family: var(--mono); }
pre { margin: 0; }
.nb { display: inline-block; }
.c { color: var(--smoke); }

/* ---------- ヘッダー ---------- */
.head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 18px var(--gx); }
.head::after { content: ""; position: absolute; left: var(--gx); right: var(--gx); bottom: 0; height: 1px; background: var(--hair); }
.brand { display: inline-flex; align-items: center; gap: var(--logo-gap); min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.mark { width: var(--logo-icon); height: var(--logo-icon); color: var(--ink); flex: none; }
.brand > span, .ld-name, .word .tw { word-spacing: var(--logo-word); }
.nav { display: flex; gap: 28px; }
.nav a, .menu-btn { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--steel); transition: color 0.2s; }
.nav a i { font-style: normal; color: var(--stone); margin-right: 8px; }
.menu-btn { display: none; }
/* メニュー（スマホ）：上から順に、細い罫で区切った行で並べる。開くと幕がすっと出て、行が上から順に現れる */
.menu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; padding: 0 var(--gx); background: var(--bg); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
.menu.open { opacity: 1; visibility: visible; transition: opacity 0.22s ease; }
.menu-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
/* 線はヘッダーと同じく帯の内側のいちばん下に引く（外に足すと1px下がり、開け閉めで線がずれる） */
.menu-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair); }
.menu-top .brand { display: inline-flex; align-items: center; gap: var(--logo-gap); min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.menu-close { min-height: 44px; padding: 0 2px; font-size: 13px; color: var(--steel); }
.menu-list { display: flex; flex-direction: column; }
.menu-list a { display: flex; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hair); font-size: clamp(24px, 7.2vw, 34px); line-height: 1.1; letter-spacing: -0.03em; opacity: 0; transform: translateY(6px); }
.menu-list a i { width: 2ch; font-size: 12px; font-style: normal; letter-spacing: 0; color: var(--stone); }
.menu.open .menu-list a { opacity: 1; transform: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.menu.open .menu-list a:nth-child(2) { transition-delay: 0.04s; } .menu.open .menu-list a:nth-child(3) { transition-delay: 0.08s; }
.menu.open .menu-list a:nth-child(4) { transition-delay: 0.12s; } .menu.open .menu-list a:nth-child(5) { transition-delay: 0.16s; }
html.menu-open { overflow: hidden; }

/* ---------- 共通 ---------- */
main, .foot { max-width: var(--max); margin: 0 auto; padding: 0 var(--gx); }
html.js .fade { opacity: 0; transform: translateY(12px); }
html.js .fade.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

/* ---------- はじめ ---------- */
.hero { padding: clamp(36px, 6vh, 72px) 0 clamp(40px, 6vh, 64px); }
.hero-text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: end; }
.hero-side { padding-bottom: 6px; }
.hero h1 { margin: 0; font-size: clamp(44px, 6.3vw, 92px); font-weight: 400; line-height: 0.98; letter-spacing: -0.055em; }
.hero h1 .ln { display: block; }
.caret { display: inline-block; width: 0.5em; height: 0.08em; margin-left: 0.06em; background: var(--ink); vertical-align: baseline; }
html.js .caret { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sub { margin: 0; max-width: 30em; font-size: 16px; color: var(--steel); text-wrap: pretty; }
.term { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 26px 0 0; font-size: 13px; color: var(--steel); }
.term b { font-weight: 400; color: var(--stone); margin-right: 4px; }
.term .out { color: var(--smoke); }
/* 文字が打たれていくように見せる（幅は最初から取ってあるので、表示はずれない） */
html.js .term .typed { clip-path: inset(0 100% 0 0); }
html.js.ready .term .typed { clip-path: inset(0 0 0 0); transition: clip-path 1.1s steps(16); transition-delay: 0.5s; }
html.js .term .out { opacity: 0; }
html.js.ready .term .out { opacity: 1; transition: opacity 0.01s 1.9s; }

/* 文字で描く浮世絵：入れ物の縦横比を CSS で決めておく（絵を描いても高さが変わらず、表示がずれない） */
.ab { position: relative; width: 100%; }
.ab canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-wave { aspect-ratio: 2 / 1; }
.ab-vig { aspect-ratio: 4 / 3; }
.ab-road { aspect-ratio: 4.2 / 1; margin-top: clamp(28px, 4vh, 44px); }
.ab-fire { aspect-ratio: 2.7 / 1; margin-top: clamp(40px, 7vh, 72px); }
.ab-wave canvas, .ab-fire canvas { cursor: pointer; }
.plate { margin: clamp(30px, 5vh, 56px) 0 0; padding: clamp(14px, 2vw, 24px); border: 1px solid var(--hair); }
.meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 14px; font-size: 12px; color: var(--smoke); font-variant-numeric: tabular-nums; }
.meta b { font-weight: 400; color: var(--ink); }
.meta .hint { color: var(--stone); }
.tap { display: block; margin-top: 8px; font-size: 11px; color: var(--stone); }

/* 青海波の帯（章の区切り） */
.nami { max-width: calc(var(--max) - var(--gx) * 2); height: 30px; margin: 0 auto; width: calc(100% - var(--gx) * 2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='30' viewBox='0 0 40 30'%3E%3Cg fill='%23FAFAFA' stroke='%23C8C8C8' stroke-width='1'%3E%3Ccircle cx='0' cy='20' r='19'/%3E%3Ccircle cx='0' cy='20' r='13'/%3E%3Ccircle cx='0' cy='20' r='7'/%3E%3Ccircle cx='40' cy='20' r='19'/%3E%3Ccircle cx='40' cy='20' r='13'/%3E%3Ccircle cx='40' cy='20' r='7'/%3E%3Ccircle cx='20' cy='30' r='19'/%3E%3Ccircle cx='20' cy='30' r='13'/%3E%3Ccircle cx='20' cy='30' r='7'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 40px 30px; }

/* ---------- 章 ---------- */
.sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: var(--sec) 0; border-bottom: 1px solid var(--hair); }
.sec:last-child { border-bottom: 0; }
.idx { display: flex; align-items: baseline; gap: 10px; align-self: start; font-size: 13px; color: var(--smoke); }
.idx h2 { margin: 0 0 0 6px; font-size: 13px; font-weight: 400; color: var(--ink); }
.body { min-width: 0; }

.pron { margin: 26px 0 0; font-size: 13px; color: var(--smoke); }
.pron i { font-style: italic; }
.name { margin: 18px 0 0; border-top: 1px solid var(--ink); }
.name div { display: grid; grid-template-columns: clamp(120px, 11vw, 160px) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.name dt { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.03em; }
.name dd { margin: 0; font-size: 15px; color: var(--steel); text-wrap: balance; }
.mission { margin: 26px 0 0; max-width: 34em; font-size: 16px; color: var(--steel); text-wrap: pretty; }
.poem { margin: 0; max-width: 21em; font-size: clamp(26px, 3.3vw, 46px); line-height: 1.22; letter-spacing: -0.04em; text-wrap: balance; }

/* 事業：関数の形で */
.fns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
/* 3列の中身の幅をそろえる（絵の高さがそろい、案内と説明の行がそろう）。列の区切りの線は間に引く */
.fns li { position: relative; padding: 22px 0 8px; }
.fns li + li::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 1px; background: var(--hair); }
.fns code { font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.04em; }
.fns .ab { margin-top: 20px; }
.fns p { margin: 18px 0 0; font-size: 15px; color: var(--steel); text-wrap: balance; }

/* 考え方：一行のコードと、その読み */
.rules { margin: 0; border-top: 1px solid var(--ink); }
.rules div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.rules dt code { font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.04em; }
.rules dd { margin: 0; font-size: 15px; color: var(--steel); }

/* 進め方：コミットの履歴 */
.lead { margin: 0; font-size: clamp(26px, 3.3vw, 46px); line-height: 1.2; letter-spacing: -0.04em; }
.log { position: relative; margin: 44px 0 0; padding: 0; list-style: none; }
.log::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: var(--ink); transform-origin: top; }
html.js .log::before { transform: scaleY(0); }
html.js .log.in::before { transform: scaleY(1); transition: transform 1.6s var(--ease); }
.log li { position: relative; display: grid; grid-template-columns: 9px 8ch 9ch auto minmax(0, 1fr); gap: 0 22px; align-items: baseline; padding: 14px 0; font-size: 15px; }
.log .dot { width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--ink); align-self: center; }
.log li:last-child .dot { background: var(--ink); }
.log .h { font-size: 13px; color: var(--stone); transition: color 0.4s; }
.log .h.busy { color: var(--ink); transition: none; }
.log b { font-weight: 500; }
.log .msg { color: var(--steel); }
.log .tag { justify-self: start; padding: 1px 8px; border: 1px solid var(--ink); font-size: 12px; }
html.js .log li { opacity: 0; transform: translateX(-8px); }
html.js .log.in li { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.js .log.in li:nth-child(2) { transition-delay: 0.25s; } html.js .log.in li:nth-child(3) { transition-delay: 0.5s; }
html.js .log.in li:nth-child(4) { transition-delay: 0.75s; } html.js .log.in li:nth-child(5) { transition-delay: 1s; }

/* 会社：設定ファイルの形で。右下の枠に印を押せる */
.yaml { position: relative; border: 1px solid var(--ink); }
.file { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--smoke); }
.yaml dl { margin: 0; padding: 18px 18px 22px; }
.yaml dl div { display: grid; grid-template-columns: 15ch minmax(0, 1fr); gap: 16px; padding: 7px 0; font-size: 15px; }
.yaml dt { color: var(--smoke); }
.yaml dd { margin: 0; text-wrap: balance; }
.hanko { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 64px; height: 64px; border: 1px dashed var(--stone); }
.hanko .slot { width: 26px; height: 26px; color: var(--hair); }
.hanko .seal { position: absolute; width: 44px; height: 44px; color: var(--ink); }
.hanko .seal rect { stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: square; opacity: 0; }
.hanko .seal circle { transform-origin: 10px 10px; transform: scale(0); }
.hanko .slot { transition: opacity 0.2s; }
.yaml.signed .hanko { border-color: transparent; }
.yaml.signed .hanko .slot { opacity: 0; }
.yaml.signed .hanko .seal rect { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.yaml.signed .hanko .seal circle { transform: scale(1); transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s; }

/* ---------- 結び ---------- */
.foot { padding-top: var(--sec); text-align: center; }
.haiku { font-size: 14px; line-height: 1.7; color: var(--steel); text-align: left; }
.word { margin: clamp(56px, 10vh, 112px) 0 0; white-space: nowrap; font-size: clamp(44px, 6.3vw, 92px); line-height: 0.98; letter-spacing: -0.055em; }
.tagline { margin: 18px 0 0; font-size: 15px; color: var(--steel); }
.foot-meta { margin: clamp(48px, 8vh, 88px) 0 0; padding: 20px 0 30px; border-top: 1px solid var(--hair); text-align: center; font-size: 12px; color: var(--smoke); }
html.js .word .ch { visibility: hidden; }
html.js .word .ch.on { visibility: visible; }
.word .caret { height: 0.07em; margin-right: -0.56em; }   /* カーソルの幅を差し引き、社名がちょうど真ん中に来るように */

/* ---------- はじめの読み込み（固定の幕。中の文字は高さを決めてあるので、打ち込んでも位置が動かない） ---------- */
.loader { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--bg); }
html.js .loader { display: flex; animation: ld-safe 0.6s 5s forwards; }
html.ld-skip .loader { display: none !important; }
html.ld-done .loader { transform: translateY(-100%); transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1); }
.ld-row { display: flex; align-items: center; gap: var(--logo-gap); margin: 0; font-size: clamp(18px, 2vw, 26px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: pre; }
.ld-mark circle { transform-origin: 10px 10px; transform: scale(0); }
html.js .ld-mark circle { animation: ld-dot 0.36s steps(3) 0.12s forwards; }
@keyframes ld-dot { from { transform: scale(1.6); } to { transform: scale(1); } }
.ld-hash { width: 19ch; margin: 0; text-align: center; font-size: 12px; letter-spacing: 0.02em; color: var(--stone); font-variant-numeric: tabular-nums; }
@keyframes ld-safe { to { opacity: 0; visibility: hidden; } }

/* ---------- マウスのときだけ（スマホでは :hover が残ってチラつくので書かない） ---------- */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--ink); }
  .hanko:hover { border-color: var(--ink); }
  .hanko:hover .slot { color: var(--ink); }
}

/* ---------- 画面の幅ごと ---------- */
@media (max-width: 980px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-text { grid-template-columns: minmax(0, 1fr); }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  :root { --sec: 72px; }
  .hero h1 { font-size: 15vw; }
  .ab-wave { aspect-ratio: 1 / 1.15; }
  .ab-vig { aspect-ratio: 16 / 10; }
  .ab-road { aspect-ratio: 1.8 / 1; }
  .ab-fire { aspect-ratio: 1 / 0.8; }
  .plate { padding: 10px; }
  .word { white-space: normal; font-size: 15vw; line-height: 0.98; }
  .fns { grid-template-columns: minmax(0, 1fr); }
  .fns li, .fns li + li { padding: 22px 0 26px; border-bottom: 1px solid var(--hair); }
  .fns li + li::before { display: none; }
  .rules div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .log li { grid-template-columns: 9px 7ch minmax(0, 1fr); gap: 2px 14px; }
  .log .msg { grid-column: 3; }
  .log .tag { grid-column: 3; justify-self: start; margin-top: 6px; }
  .yaml dl { padding-bottom: 22px; }
  .hanko { top: 3px; bottom: auto; right: 8px; width: 34px; height: 34px; }
  .hanko .slot { width: 16px; height: 16px; }
  .hanko .seal { width: 28px; height: 28px; }
  .yaml dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .name div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* 動きを減らす設定では、最初から出しておく */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .fade, html.js .log li { opacity: 1 !important; transform: none !important; }
  html.js .log::before { transform: none !important; }
  html.js .term .typed { clip-path: none !important; }
  html.js .term .out { opacity: 1 !important; }
}