/* 世界℃計 サイト（1ページ）の共通部分。2026-09-27
   ・サイトは1枚のページだけ（本人 9/27「一枚のページだけで収まるウェブの作りにしたい」）。
     上から：光の画面 → はじまり（主のコピーと地名の電光掲示板）→ 部屋の1枚と副のコピー・日本語 → 並び（3つ） → 2つの部屋 → BUY。文はほとんど英語。
   ・左上にマーク、右上は BUY のカプセルだけ（本人 9/27）、左下に文字のロゴ、右下にクレジット（本人 9/27）。どれも画面に固定し、隠さない（本人）。
     字とマークはすべて #111（本人 9/27）。ヘッダーにも下端にも色やぼかしを付けない（本人 9/27）。
   ・写真の規則は1つ（本人「写真の大きさや位置がバラバラなので私らしくない」）：節の右 2/3 に 3:2。左 1/3 に節の名前・文・仕様。
   ・書体は A1明朝（本人 9/27「海外のサイトの雰囲気で、A1明朝で。ミニマムに」）。欧文も A1明朝。字間は書体のまま（87）。
     斜体は使わない・文字は小さめ（9/27）＝本文 12px・小さな字 10px・大きな一文 20px。釦は枠を付けず下線の文字にする（右上の BUY のカプセルは本人の指定なので残す）。 */
/* A1明朝：手元に入っていればそれを、無ければサイトで使う字だけを抜き出したウェブ用の版（本人 9/27「A1明朝も同じようにして」・作り方は subset_a1m.py＝文を変えたら作り直す） */
@font-face { font-family: "WC A1M"; src: local("A P-OTF A1 Mincho StdN R"), local("A P-OTF A1明朝 StdN R"), local("PA1MinchoStdN-Regular"), url("assets/font/a1m-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* 展示の iMac（Retina 4K, 21.5インチ, 2019・学校の備品 25-319R＝既定の表示 2048×1152 相当）に合わせる（本人 9/27「展示で借りているiMacを調べて、それに最適化するレイアウトにして」）。
   組みの基準は 1440 幅（ノートで確かめてきた見え方）。幅は vw で広がるので、字・余白・マーク・ロゴの px も --u 倍して同じ比率で大きくする＝2048 幅で ×1.42。
   下限 1（1440 以下は今までどおり・スマホも変わらない）・上限 1.6（2304 幅まで）。線（1px）とカプセルの丸み（999px）は倍にしない */
:root { --u: clamp(1px, calc(100vw / 1440), 1.6px); }
:root { --bg: #fff;   /* 地＝真っ白（本人 9/28「トップのグラデーションより下の色は真っ白にして」・9/27 まではアプリの地 #e5e9ef） */
  --ink: #fff; --sub: rgb(255 255 255 / .6); --shade: 0 0 calc(14 * var(--u)) rgb(40 44 60 / .16); --m: clamp(20px, 3vw, calc(40 * var(--u))); --logo-h: clamp(calc(24 * var(--u)), 2.6vw, calc(36 * var(--u))); --ease: cubic-bezier(.7, 0, .2, 1);
  --edge: 3.472vw;      /* 左右の余白 50/1440 */
  --serif: "WC A1M", "Hiragino Mincho ProN", "Yu Mincho", serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--bg); color: #111; -webkit-font-smoothing: antialiased; font-family: var(--serif); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid currentColor; outline-offset: calc(4 * var(--u)); }

/* ── 固定の3つ（いつも出したまま） ── */
.mark, .nav, .type { transition: color .4s var(--ease), filter .4s var(--ease); }
.mark { position: fixed; top: var(--m); left: var(--m); z-index: 4; display: block; width: calc(44 * var(--u)); aspect-ratio: 249.631 / 55.48; }
.nav { position: fixed; top: var(--m); right: var(--m); z-index: 3; display: flex; align-items: center; gap: clamp(calc(16 * var(--u)), 2.2vw, calc(32 * var(--u))); margin-top: -7px;
  font: calc(12 * var(--u))/1 var(--serif); color: var(--ink); text-shadow: var(--shade); }
.nav a { padding: calc(6 * var(--u)) 0; transition: color .3s var(--ease); }
.nav a:hover { color: var(--sub); }
/* BUY だけカプセルで囲む（本人 9/26）。高さは他の項目と同じ行に収め、線は文字と同じ色 */
.nav .buy { padding: calc(5 * var(--u)) calc(14 * var(--u)); border: 1px solid currentColor; border-radius: 999px; transition: color .3s var(--ease), background-color .3s var(--ease); }
.nav .buy:hover { color: var(--ink); background: rgb(255 255 255 / .18); }
.type { position: fixed; left: var(--m); bottom: var(--m); z-index: 4; display: block; height: var(--logo-h); width: auto; aspect-ratio: 354.92 / 60.43; filter: brightness(0) invert(1); }
.nav.is-ink { --ink: #111; --sub: rgb(17 17 17 / .55); --shade: none; }
.nav.is-ink .buy { border-color: #111; }   /* 枠は字の色（currentColor）に連ねず #111 に固定。連ねると外した直後に枠だけ白に近い色になり、黒い地が一瞬小さく見えた（9/27） */
.nav.is-ink .buy:hover, .nav.is-ink .buy:focus-visible { background: #111; color: #fff; }   /* 載せると墨の地に白い字（本人 9/27・墨はサイトの字と同じ #111） */
.type.is-ink { filter: brightness(0) invert(.067); }   /* #111 */
/* クレジット：右下（文字のロゴと同じ下端）。本人が作った画像（assets/credit.svg・元は 00_logo/logo_credit.svg・本人 9/27）。
   大きさは、画像の中の「2026」が前の文字組み（A1明朝 11px の数字＝8.3px）と同じ高さになるよう 11.3px（数字は画像の高さの 0.732） */
.credit { position: fixed; right: var(--m); bottom: var(--m); z-index: 4; display: block; height: calc(11.3 * var(--u)); width: auto; }
@media (max-width: calc(640 * var(--u))) { .nav { gap: calc(14 * var(--u)); } .credit { height: calc(10.3 * var(--u)); } }

/* ── 節の型：線で区切る（本人 9/27「1（Santa & Cole）と9（Coil + Drift）のラインで区切っている感じがいい」）。1440px で Coil + Drift を実測して写した：
   ・節の境目に、画面の端から端まで 1px の線（墨 25%）。
   ・節の中の列は縦の 1px の線で分ける。縦の線は上下の横の線から 56px 離して止める。
   ・列の内側の余白は 70〜80px。
   同日の本人の直し：斜体は使わない・文字は小さめ（本文 12px・小さな字 10px・大きな一文 20px）・模倣のために無理に入れた節は外す（ABOUT の3枚・問い合わせの写真）。
   ・字間は足さない（87）。字の色は #111（9/27）。写真は 3:2（商品の並びだけ正方形）。 */
:root { --rule: rgb(17 17 17 / .25); --in: 3.889vw; /* 56/1440 */ --pad: 5.556vw; /* 80/1440 */ --cpad: 4.861vw; /* 70/1440 */
  --space: 11.111vw; /* 節の上下の余白 160/1440（本人 9/28「各エリア、上下のマージンをもっと広めに。世界観的にもっと広くあるべき」・それまでは 56〜107）＝どの節も同じ */ }
.page { padding: 0 0 calc(var(--m) * 2 + var(--logo-h)); }   /* 一番下の線がフッターの線になる：下まで送ると、線と文字のロゴの間＝ロゴと画面の下の間（どちらも --m）（本人 9/28） */
.band { position: relative; border-top: 1px solid var(--rule); scroll-margin-top: 0; }
.band:last-child { border-bottom: 1px solid var(--rule); }
.lead { margin: 0; font: 400 calc(12 * var(--u))/1.7 var(--serif); }
.txt { margin: 0; font: 400 calc(12 * var(--u))/1.7 var(--serif); }   /* 本文（.body は光の画面の筐体の層なので使わない） */
.photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #e8e8e7; margin: 0; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 筐体の名前のロゴ（assets/name-*.svg・縦の範囲は5つで共通）：高さをそろえて置く＝字の大きさがそろう */
.nm { margin: 0; line-height: 0; }
.nm .name { display: inline-block; width: auto; height: calc(8 * var(--u)); }

/* 1．はじまり：主のコピー「Same hour, different air.」（本人 9/27「かなりイけてる。これをメインにして」）と、その下に地名の電光掲示板（本人 9/28「このコピーの下に電光掲示板UIを置く」）。
   主だけ 24px（ほかの大きな一文は 20px）＝大きさの差は1段だけ。電光掲示板は節の幅いっぱいに流す */
.band.opening { padding: var(--space) 0; text-align: center; overflow: hidden; }
.band.opening h2 { margin: 0 auto; max-width: 34em; font: 400 calc(24 * var(--u))/1.3 var(--serif); text-wrap: balance; }
.band.opening .ja { margin: calc(4 * var(--u)) 0 0; font: 400 calc(12 * var(--u))/1.4 var(--serif); }   /* 主のコピーの日本語訳（本人 9/28・ブランドムービー A案の「同じ時刻の、ちがう空気。」） */
.band.opening .ticker { margin-top: calc(56 * var(--u)); }
/* 1b．部屋の中の縦長の1枚と、その横に副のコピーと日本語の本文（本人 9/28「下の画像を縦長にクリップして、その横に…を置く」）。
   左に文を上下の中央に・右に 2:3 の写真（高さは画面の 78% まで）。文と写真は1つの要素なので縦の線で区切らない（本人 9/28）。商品の節と同じ向き（写真を左に置くと、画面に固定した左下の文字ロゴと重なった）。
   副は展示パネル（260927_A2_panel）と同じ一文「The air where you are, lit for each other.」（2台で互いの場所を灯し合う＝作品の芯・印刷済みの文を一字も変えない）。
   日本語の本文（本人 9/28「日本語も入れないと和製のブランド感が出ない」）：文節の切れ目（wbr）でだけ折り返す・行送りは和文に合わせて広め */
.band.scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--space) 0; }
.scene .photo { order: 2; width: min(34vw, 78svh * 2 / 3); aspect-ratio: 2 / 3; margin: 0 var(--pad); }
.scene .text { order: 1; align-self: stretch; padding: 0 var(--pad); display: flex; flex-direction: column; justify-content: flex-start; }   /* 文は写真の上端にそろえる（本人 9/28） */
.scene .sub { margin: 0; font: 400 calc(20 * var(--u))/1.4 var(--serif); }
.scene .sub { margin-top: -.246em; }   /* 字の頭を写真の上端にそろえる引き上げ＝行の上の余白と字の上の空き（A1明朝 20px・行送り1.4で、いちばん高い字の上端が行の箱の 0.246 字下＝画素で実測 9/28） */
.scene .txt.ja { max-width: 30em; margin-top: calc(28 * var(--u)); line-height: 2; word-break: keep-all; overflow-wrap: anywhere; color: rgb(17 17 17 / .75); }
/* 左右をそろえた文の箱（本人 9/28「左揃えで右も綺麗に揃っているテキストボックスにして」）：和文は1字ずつ均等に詰め開きして右端をそろえる・最後の行は左寄せ。
   文節で折り返さない（keep-all だと語の間だけが開く）。行頭・行末の禁則は厳しめ。字間そのものは足さない（87） */
.box .half { margin-right: -.5em; }   /* 行末に枠の中で収まった句読点は半分の幅（chrome.js の fit） */
.box .hang { margin-right: -1em; }   /* 行末の句読点のぶら下げ＝右端の外へ1字ぶん出す（chrome.js の fit が行末のものだけ包む・本人 9/28） */
.scene .txt.ja.box { width: 26em; max-width: 100%; text-align: justify; text-justify: inter-character; text-align-last: left; word-break: normal; line-break: anywhere; overflow-wrap: normal; }   /* anywhere＝行頭の句読点は chrome.js がぶら下げで前の行へ出す */
/* 1c．2つの部屋を並べる（本人 9/28・副のコピー「lit for each other」を絵で）：2列・列の境に縦の線・どちらも 3:2 */
.band.pair { padding: var(--space) 0; }
.pair .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 0 var(--pad); }
/* 2枚は画面の両端（本人 9/28「画像の間をもっと広くとる、大胆に画面の横幅を使って」）・コピーはそのあいだの上下中央（本人 9/28「線を外して、そこの部分にコピーを下ろしてみて」） */
.pair .head { display: grid; justify-items: center; padding: 0 3.472vw; text-align: center; }
.pair .head h2 { margin: 0; font: 400 calc(20 * var(--u))/1.4 var(--serif); text-wrap: balance; }
.pair .head .txt.box { width: 26em; max-width: 100%; margin-top: calc(12 * var(--u)); font: 400 calc(12 * var(--u))/2 var(--serif); color: rgb(17 17 17 / .75);
  text-align: justify; text-justify: inter-character; text-align-last: left; line-break: anywhere; }
.pair .photo { aspect-ratio: 2 / 3; width: min(34vw, 78svh * 2 / 3); margin: 0; }   /* 縦長（本人 9/28「縦長にトリミング」）・高さは画面の 78% まで
/* 2．並び（本人 9/28「ラインナップは３つにして、縦長にトリミング」「画像はついている状態をデフォルトにして、ホバーで暗いバージョンに切り替え。タイトルと文章は画像の外に出す」）：
   3列・列の境に縦の線・2:3 の写真（明るい部屋・点灯 → 載せると暗い部屋・点灯）。写真の下に名前のロゴと日本語の特徴（公開サイトの日本語） */
.band.index { padding: var(--space) 0; }
.index ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.778vw; margin: 0; padding: 0 var(--pad); list-style: none; }   /* 列の境の線はなし・その代わり間を詰める（本人 9/28「３筐体、２筐体を区切るラインは削除、その代わり間を縮める」） */
.index li { padding: 0; }
.index .plate { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #e8e8e7; }
.index .plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.index .plate { cursor: pointer; }
.index .plate .on { opacity: 0; transition: opacity .25s cubic-bezier(.2, 0, 0, 1); }   /* 素早く替える（本人 9/28「ホバーの反応を素早くして、画像の切り替わりも早く」） */
.index .plate:hover .on, .index .plate.is-lit .on { opacity: 1; }   /* 写真の上だけで反応（本人 9/28「画像の上だけがホバーするように」） */
.index .nm { margin-top: calc(20 * var(--u)); }
.index .ja { margin: calc(12 * var(--u)) 0 0; font: 400 calc(12 * var(--u))/1.9 var(--serif); color: rgb(17 17 17 / .75); word-break: keep-all; overflow-wrap: anywhere; }
/* 地名の電光掲示板（はじまりの節の中）：左へ流し続ける（同じ列を2つ並べて半分だけ送る）。地名どうしは広めに離す（本人 9/28「それぞれの地名にマージンを取って」） */
.ticker { display: flex; width: max-content; min-height: calc(28 * var(--u)); animation: ticker 70s linear infinite; }   /* 高さは中身が来る前から取っておく（後から段がずれない）。速さは top.html が幅から決める */
.ticker[hidden] { display: flex; visibility: hidden; }
.ticker p { margin: 0; padding-right: 3em; white-space: nowrap; font: 400 calc(20 * var(--u))/1.4 var(--serif); }
.ticker span + span { margin-left: 3em; }
.ticker span small { font-size: .5em; margin-left: .5em; font-variant-numeric: tabular-nums; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } }
/* 7．結び：中央に 20px の見出し・小さな一文・リンク */
.band.closing { padding: var(--space) 0; text-align: center; }
.closing h2 { margin: 0; font: 400 calc(20 * var(--u))/1.3 var(--serif); }
/* 「Made to order」は釦のようにカプセルで囲む（本人 9/28）。右上の BUY と同じ形・載せると墨の地に白い字 */
.closing .cap { display: inline-block; padding: calc(12 * var(--u)) calc(34 * var(--u)); border: 1px solid #111; border-radius: 999px; cursor: pointer; transition: color .25s cubic-bezier(.2, 0, 0, 1), background-color .25s cubic-bezier(.2, 0, 0, 1); }
.closing .cap:hover { background: #111; color: #fff; }
.closing .lead { margin-top: calc(22 * var(--u)); }


@media (max-width: 640px) {
  :root { --in: 24px; --pad: 15px; --cpad: 15px; --space: 80px; }
  .band.opening, .band.closing { padding: var(--space) 15px; }
  .band.opening h2 { font-size: 20px; }
  .index ul { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 0 15px; }
  .band.scene { grid-template-columns: minmax(0, 1fr); padding: var(--space) 0; } .scene .photo { width: auto; margin: 0 15px; } .scene .photo { order: 1; } .scene .text { order: 2; padding: 24px 15px 0; }
  .pair .row { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 0 15px; } .pair .head { order: -1; padding: 0 0 24px; } .pair .photo { width: 100%; }
  .ticker p { font-size: 16px; }
}