/* 続きを足す A案：ページ全体をチラシ表と同じ紙にする（2026-10-25）
   地＝チラシの4色グレー＋砂目。文字＝チラシと同じ扱い（題は極細・長体・詰め、副題は細字・開け、欧文と数字は平体130%）。
   スケールは clamp(px, vw, px) の一次式。動きは付けない */

:root{
  --ground:#585657;            /* チラシ表 C30M20Y20K70 を書き出して測った値 */
  --ink:#F1F0EC;               /* 白は少しだけ温める */
  --ink-2:rgba(241,240,236,.66);
  --ink-3:rgba(241,240,236,.46);
  --rule:rgba(241,240,236,.18);
  --green:#36B280;             /* 円の線の色 */
  --f:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --col:min(100% - 48px, 34rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--f); font-weight:300;
  font-size:clamp(14px, 3.7vw, 15px); line-height:1.95; letter-spacing:.06em;
  background:url(/tsuzuki/grain-soft.png) 0 0 / 256px 256px repeat;   /* 文字を読む所は粒を薄く（2026-10-25 本人：読みづらい）。地の色は html に任せる：body に色を敷くと、地の上に置いた水紋と会場の水面（z-index:-1）が隠れる（2026-10-28） */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
main{overflow-x:clip}   /* 中身が幅を超えても、ページ全体を横に広げない（固定の「音楽」ボタンや水紋がずれる原因になる） */
a{color:inherit;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:1px;text-underline-offset:.3em}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.soft{color:var(--ink-2)}

/* 平体：欧文と数字は Archivo の幅125%（可変フォントの幅軸）。transform で広げると後ろの字に重なる環境があった（2026-10-25） */
.h{font-family:"Archivo",var(--f);font-stretch:125%;font-weight:300;letter-spacing:.04em}

/* ---------- 表紙：チラシ表の構図。チラシと同じ濃さの粒はここだけ、下へ向かって薄い地に溶かす ---------- */
.cover{position:relative;isolation:isolate;
  min-height:100svh; display:grid; grid-template-rows:1fr auto; justify-items:center;
  padding:clamp(56px, 12vh, 120px) 24px clamp(48px, 9vh, 96px);
}
.cover::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/tsuzuki/grain.png) 0 0 / 256px 256px repeat;
  -webkit-mask-image:linear-gradient(#000 55%, transparent);mask-image:linear-gradient(#000 55%, transparent)}
.cover__circle{width:min(78vw, 520px, 56svh);aspect-ratio:1;align-self:center}
.cover__type{text-align:center;margin-top:clamp(40px, 7vh, 72px)}
.cover__title{
  margin:0; font-weight:200; font-size:clamp(30px, 8.4vw, 44px); line-height:1.3;
  letter-spacing:-.04em; transform:scaleX(.96);   /* チラシ：W1・長体96%・字間−78 */
}
.cover__sub{margin-top:.9em;font-size:clamp(14px, 3.9vw, 17px);line-height:2;letter-spacing:.24em;padding-left:.24em}
.cover__date{margin-top:1.4em;font-size:clamp(11px, 3vw, 12.5px);letter-spacing:.16em}

/* ---------- 開催概要：チラシ裏の表と同じ組み ---------- */
.info{width:var(--col);margin:0 auto;padding-block:clamp(48px, 10vh, 96px) 0;border-top:1px solid var(--rule)}
.info__dl{margin:0;display:grid;gap:1.1em}
.info__dl div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:0 1em}
.info__dl dt{color:var(--ink-3);font-size:.86em;letter-spacing:.14em;padding-top:.12em}
.info__dl dd{margin:0}
.info__note{margin-top:2.2em;font-size:.84em;color:var(--ink-2);line-height:1.9}

.pending{width:var(--col);margin:clamp(64px, 12vh, 120px) auto 0;color:var(--ink-2);font-size:.92em;text-align:center}

/* ---------- 対：2章を左右で対比させる。右は少し下げて、見出しは外側へ寄せる（鏡写し） ---------- */
.pair{width:min(100% - 48px, 1240px);margin:clamp(96px, 16vh, 180px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px, 4vw, 64px);align-items:start}
.pair__item{margin:0}
.pair__item--r{margin-top:clamp(64px, 14vh, 160px)}
.pair figcaption{display:flex;align-items:baseline;gap:1em;margin-top:1.1em;letter-spacing:.14em}
.pair__item--r figcaption{justify-content:flex-end}
.pair__no{font-size:11px;color:var(--ink-3)}
.pair__title{font-weight:200;font-size:clamp(17px, 2vw, 22px);letter-spacing:.06em}
.pair__place{font-size:.84em;color:var(--ink-2);letter-spacing:.24em}
@media (max-width:699px){
  .pair{grid-template-columns:1fr;width:100%;gap:56px}
  .pair__item--l{margin-right:24px}
  .pair__item--r{margin:0 0 0 24px}
  .pair__item--l figcaption{padding-left:24px}
  .pair__item--r figcaption{padding-right:24px}
}

/* ---------- 章（会期から）：写真集のように ---------- */
.ch{margin-top:clamp(96px, 18vh, 200px)}
.ch__head,.ch__text{width:var(--col);margin-inline:auto}
.ch__no{font-size:12px;color:var(--ink-3);letter-spacing:.2em}
.ch__title{margin:.2em 0 0;font-weight:200;font-size:clamp(24px, 6.4vw, 32px);letter-spacing:.02em;line-height:1.4}
.ch__place{color:var(--ink-2);font-size:.86em;letter-spacing:.24em;margin-top:.3em}
.ch__text{margin-top:1.8em}
.ch__text p + p{margin-top:1em}
.ch__photos{display:grid;gap:clamp(56px, 12vh, 140px);margin-top:clamp(56px, 10vh, 112px);padding-inline:clamp(0px, 4vw, 48px)}
.ph{margin:0}
.ph img{box-shadow:0 1px 0 rgba(0,0,0,.08)}
.ph--h.ph--l{width:min(100%, 1100px);justify-self:center}
.ph--h.ph--s{width:min(72%, 640px)}
.ph--v.ph--l{width:min(86%, 620px);justify-self:center}
.ph--v.ph--s{width:min(58%, 440px)}
.ph--s.ph--l,.ph--s.ph--c{justify-self:center}
.ph--s.ph--r{justify-self:end}
.ph--s.ph--l:not(.ph--h):not(.ph--v){justify-self:start}
@media (max-width:699px){
  .ch__photos{padding-inline:0}
  .ph--h.ph--l{width:100%}
  .ph--h.ph--s{width:78%;margin-inline:24px}
  .ph--v.ph--l{width:calc(100% - 48px)}
  .ph--v.ph--s{width:64%;margin-inline:24px}
}

/* ---------- 会場 ---------- */
.venue{width:var(--col);margin:clamp(96px, 16vh, 180px) auto 0;padding-top:clamp(40px, 7vh, 64px);border-top:1px solid var(--rule)}
.venue__name,.music__name,.who__name{margin:0 0 1.1em;font-weight:200;font-size:clamp(22px, 6.2vw, 30px);line-height:1.4;letter-spacing:.12em}
.venue__ph{margin:0 0 clamp(28px, 5vh, 44px)}
.venue__ph img{display:block;width:100%;height:auto}
.venue p{color:var(--ink-2);font-size:.92em}
.venue p + p{margin-top:.8em}
.venue .venue__link{margin-top:1.4em;color:var(--ink);font-size:.88em}

/* ---------- 作者 ---------- */
.who{width:var(--col);margin:clamp(96px, 15vh, 168px) auto 0;padding-top:clamp(40px, 7vh, 64px);border-top:1px solid var(--rule)}
.who__name .h{margin-left:.3em}
.who p{color:var(--ink-2);font-size:.92em}
/* 楽器「蕩」の説明（ひの芽の案内の下） */
.music{width:var(--col);margin:clamp(96px, 15vh, 168px) auto 0;padding-top:clamp(40px, 7vh, 64px);border-top:1px solid var(--rule)}
.music p{color:var(--ink-2);font-size:.92em}
.music .music__link{margin-top:1.4em;color:var(--ink);font-size:.88em}

/* 写真講座：告知画像と同じ組み（右上にはみ出す二重丸、大きな題、副題、日付）。2026-10-28 */
.koza{position:relative;isolation:isolate;width:var(--col);margin:clamp(96px, 15vh, 168px) auto 0;padding-top:clamp(40px, 7vh, 64px);border-top:1px solid var(--rule)}
/* 二重丸：スマホでは文字の後ろに薄く敷く。広い画面では列の左に並べる（2026-10-28 本人：告知画像の位置に合わせなくていい） */
.koza__ring{position:absolute;z-index:-1;top:clamp(-20px, -4vw, 0px);right:calc((100vw - 100%) / -2 - 26vw);width:min(96vw, 460px);max-width:none;opacity:.32;pointer-events:none}
.koza__title{margin:0;font-weight:200;font-size:clamp(22px, 6.2vw, 30px);line-height:1.4;letter-spacing:.12em}   /* 見出しはほかの区画と同じ大きさ（2026-10-28 本人） */
.koza__sub{margin-top:.7em;font-size:clamp(13px, 3.6vw, 15px);letter-spacing:.16em;text-indent:-.5em;color:var(--ink-2)}
.koza__date{margin-top:clamp(24px, 5vw, 32px);padding-top:clamp(20px, 4.4vw, 28px);border-top:1px solid var(--rule);font-size:clamp(17px, 4.6vw, 21px);line-height:1.5}
.koza__date .h{font-weight:250;letter-spacing:.01em}
.koza__dow{font-size:.5em;margin:0 .7em 0 .1em;vertical-align:.25em}
.koza__dl{margin:1.4em 0 0;display:grid;gap:.5em;font-size:.92em}
.koza__dl div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:0 1em}
.koza__dl dt{color:var(--ink-3);font-size:.94em;letter-spacing:.14em}
.koza__dl dd{margin:0}
.koza__body{margin-top:2.2em}
.koza__body p{color:var(--ink-2);font-size:.92em}
.koza__body p + p{margin-top:.8em}
.koza .koza__link{margin-top:1.6em;color:var(--ink);font-size:.92em}

.map{width:var(--col);margin:clamp(64px, 10vh, 120px) auto 0;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ground)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(1) hue-rotate(180deg) saturate(.25) brightness(1.5) contrast(.78)}
.map::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ground);opacity:.35;mix-blend-mode:color}

/* 音楽が鳴っているあいだ、高い「シャーン」という音が鳴るたびに画面の中央から水紋が広がる（2026-10-25 本人）。描くのは a.js（canvas） */
.ripples{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}   /* 地の上・写真や文字の下（2026-10-25 本人） */

/* 会場の水面（2026-10-28 本人）。右下の、地の上・写真や文字の下に、会場の画面と同じ並びでロゴを置く（枠は付けない。背景にそのまま乗る）。
   会場の音が流れているあいだは、粒（緑の丸）と水紋（緑の輪）を会場と同じ位置に a.js が canvas に描き、ロゴも少しはっきりさせる。
   この機能の説明はロゴのすぐ上に添える */
/* 2026-10-28 本人：右下の固定はやめ、楽器「蕩」の区画の文の横に置く */
.music{position:relative;isolation:isolate}
.music__row{display:block}
/* 蕩のロゴ（と会場の水面）を、写真講座の二重丸と同じく大きく。狭い画面では文字の後ろに薄く、広い画面では列の左に（2026-10-28 本人） */
.live{position:absolute;z-index:-1;pointer-events:none;top:clamp(-40px, -8vw, -16px);right:calc((100vw - 100%) / -2 - 18vw);opacity:.9}
.live__pane{width:min(62vw, 300px)}
.live__note{margin:0 0 6px;max-width:15.5em;font-size:11px;line-height:1.85;letter-spacing:.06em;color:var(--ink-2)}
.live__pane{position:relative;aspect-ratio:9/19.5}
.live__pane img{position:absolute;left:7%;top:11%;width:86%;height:auto;opacity:.85;transition:opacity 1.6s ease}   /* 2026-10-28 本人：ふだんから見えるように濃く */
.live.is-on .live__pane img{opacity:1}
.live__pane canvas{position:absolute;inset:0;width:100%;height:100%}
.live__note{transition:opacity 1s ease}
.live.is-away .live__note{opacity:0}
/* スマホの幅（2026-10-28 本人）：右下のロゴは出さず、表紙のチラシの円そのものを会場の水面にする。
   粒と水紋は円の上に白い線で描く（a.js が .cover__water の canvas を円に重ねる）。説明文は日付の下に小さく */
.cover__note{display:none}
.cover__water{position:absolute;pointer-events:none}
@media (max-width: 699px){
  .cover__note{display:block;margin:1.9em auto 0;max-width:19em;font-size:11px;line-height:1.9;letter-spacing:.06em;color:var(--ink-2)}
}

.bgm{position:fixed;z-index:10;right:max(20px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));
  padding:.4em .2em;border:0;background:none;cursor:pointer;
  font:inherit;font-size:12px;letter-spacing:.2em;color:var(--ink-2);text-shadow:0 0 12px rgba(0,0,0,.35)}
.bgm:hover{color:var(--ink)}
.bgm.is-on{color:var(--ink)}
/* 会場の「蕩」が動いているとき：緑の点。会場の音を鳴らしているあいだは明滅（2026-10-28） */
.bgm.is-venue::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.7em;border-radius:50%;background:var(--green);vertical-align:.15em;box-shadow:0 0 8px rgba(54,178,128,.6)}
.bgm.is-live::before{animation:bgm-pulse 2.4s ease-in-out infinite}
@keyframes bgm-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.bgm.is-live::before{animation:none}}

.foot{width:var(--col);margin:clamp(72px, 12vh, 120px) auto 0;padding-bottom:max(88px, env(safe-area-inset-bottom));font-size:12px;color:var(--ink-3)}
.foot p{display:flex;gap:2em}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* 広い画面：ひの芽の案内から下は列を右へ寄せ、左に図を置く。ほかの指定に負けないよう最後に置く */
@media (min-width:1100px){
  .venue,.music,.koza,.who,.foot{margin-left:calc((100% - var(--col)) / 2 + min(12vw, 200px));margin-right:auto}
  /* 蕩のロゴ（枠の幅の86%）と二重丸を同じ大きさにし、本文から64pxの位置で右端をそろえる */
  .music{--lw:min(30.2vw, 442px);min-height:calc(clamp(40px, 7vh, 64px) + var(--lw) * .86)}   /* ロゴのぶんの高さを取って、下の二重丸と重ねない */
  .live{top:calc(clamp(40px, 7vh, 64px) - var(--lw) * .238);right:auto;left:calc(-.93 * var(--lw) - 64px);opacity:1}   /* ロゴの上端（枠の11%の位置）を見出しにそろえる */
  .live__pane{width:var(--lw)}
  .koza__ring{top:clamp(40px, 7vh, 64px);right:auto;left:calc(-1 * min(26vw, 380px) - 64px);width:min(26vw, 380px);opacity:.7}
  .venue{position:relative;min-height:calc(clamp(40px, 7vh, 64px) + min(26vw, 380px) * 2 / 3)}   /* 2026-11-04 本人：カフェの写真は蕩・写真講座と同じく列の左に */
  .venue__ph{position:absolute;top:clamp(40px, 7vh, 64px);left:calc(-1 * min(26vw, 380px) - 64px);width:min(26vw, 380px);margin:0}
}