/* ============================================================
Bean & Stone — 石の帳 (Fable experimental build)
Design system: washi ground / sumi ink / vermilion & indigo
Register encoding (2026-07-10 形状化): form = register — 4 quad shapes
(joy = leaf, legend = four-petal blossom, sorrow = drop, shadow = moon;
night-map parity geometry, viewBox 0 0 24 24), hue = register — 4 quad
colours, same palette as the Stone Map's day markers.
No gradients. No cards. No shadows. Hairlines and type.
============================================================ */
:root {
--paper: #f1ede2;
--ink: #29261e;
--ink-2: #575246;
--ink-3: #6e6959; /* 2026-07-09 darkened from #8a8375 for AA contrast on small notes */
--hair: #ddd6c6;
--hair-2: #c9c1ac;
--shu: #a13a28; /* vermilion — bright memory */
--shu-deep: #872f1f;
--ai: #3c5266; /* indigo — darkened memory */
--ai-deep: #2f4254;
--q-joy: #6a7f3c;
--q-legend: #c2557a;
--q-sorrow: #3b5a73; /* 2026-07-12 FB改修③: 青寄せ (旧 #3a5566) */
--q-shadow: #6b3d63;
--serif-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
--serif-en: "EB Garamond", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--serif-jp);
font-weight: 400;
line-height: 1.9;
font-kerning: normal;
transition: background-color .6s ease;
}
::selection { background: rgba(161, 58, 40, .16); }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--hair-2);
text-decoration-thickness: 1px;
text-underline-offset: .24em;
transition: color .2s ease, text-decoration-color .2s ease;
}
a:hover { color: var(--shu); text-decoration-color: currentColor; }
.wrap {
max-width: 41rem;
margin: 0 auto;
padding: 0 clamp(1.25rem, 5vw, 2.5rem) 4rem;
/* mood-layer (below) is position:fixed at z-index:0 — keep page content above it */
position: relative;
z-index: 1;
}
.en { font-family: var(--serif-en); }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: .02em; }
.hairline { border: 0; border-top: 1px solid var(--hair); margin: 1.4rem 0; }
/* ---- register marks (気配印) — 4 quad shapes × 4 quad colours
(2026-07-10 形状化, night-map parity geometry on a 24×24 viewBox):
joy = leaf, legend = four-petal blossom, sorrow = drop, shadow = moon.
CSS-mask method: background = quad colour, mask = data-URI SVG shape. ---- */
.mk {
display: inline-block;
width: .62em; height: .62em;
margin-right: .5em;
vertical-align: -.02em;
flex: none;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.mk-joy {
background: var(--q-joy);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C17.5 7 17.5 15 12 22 C6.5 15 6.5 7 12 2 Z' transform='rotate(30 12 12)'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C17.5 7 17.5 15 12 22 C6.5 15 6.5 7 12 2 Z' transform='rotate(30 12 12)'/%3E%3C/svg%3E");
}
.mk-legend {
background: var(--q-legend);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4.6'/%3E%3Ccircle cx='17' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='17' r='4.6'/%3E%3Ccircle cx='7' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4.6'/%3E%3Ccircle cx='17' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='17' r='4.6'/%3E%3Ccircle cx='7' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E");
}
.mk-sorrow {
background: var(--q-sorrow);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C12 2 18.6 10.4 18.6 14.6 C18.6 18.6 15.6 21.6 12 21.6 C8.4 21.6 5.4 18.6 5.4 14.6 C5.4 10.4 12 2 12 2 Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C12 2 18.6 10.4 18.6 14.6 C18.6 18.6 15.6 21.6 12 21.6 C8.4 21.6 5.4 18.6 5.4 14.6 C5.4 10.4 12 2 12 2 Z'/%3E%3C/svg%3E");
}
.mk-shadow {
background: var(--q-shadow);
/* 2026-07-12 FB改修④: 太い三日月（マップ側と共通ジオメトリ） */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 2.5 Q2.5 12 15.5 21.5 Q11.6 12 15.5 2.5 Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 2.5 Q2.5 12 15.5 21.5 Q11.6 12 15.5 2.5 Z'/%3E%3C/svg%3E");
}
/* unscored — keep the quiet outlined diamond (no mask) */
.mk-none {
background: transparent;
border: 1px solid var(--hair-2);
width: .52em; height: .52em;
transform: rotate(45deg);
vertical-align: .05em;
}
/* ---- seal (豆石印) ------------------------------------------- */
.seal { display: inline-flex; text-decoration: none; }
.seal svg { display: block; transform: rotate(-1.2deg); }
.seal:hover svg { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
.seal svg { transition: transform .3s ease; }
}
/* ---- page header (subpages) ---------------------------------- */
.crumb {
display: flex;
align-items: center;
gap: .8rem;
padding: 1.3rem 0 .4rem;
}
.crumb .wordmark {
font-family: var(--serif-en);
font-variant-caps: all-small-caps;
letter-spacing: .22em;
font-size: .95rem;
color: var(--ink-2);
text-decoration: none;
}
.crumb .wordmark:hover { color: var(--shu); }
/* ---- LP: cover ------------------------------------------------ */
.cover {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(1.5rem, 6vw, 3.5rem);
padding-top: clamp(2.5rem, 8vh, 5rem);
align-items: start;
}
.tate {
writing-mode: vertical-rl;
font-size: clamp(1.5rem, 4.6vw, 2.05rem);
font-weight: 500;
line-height: 2.05;
letter-spacing: .14em;
margin: .2rem 0 0;
color: var(--ink);
}
.brand {
display: flex;
align-items: center;
gap: .85rem;
margin: 0 0 1.6rem;
font-weight: 400; /* 2026-07-13 SEO改修: JP cover now renders
(UA default is bold/margin) — EN's
is
unaffected (already normal weight). */
}
.brand .wordmark {
font-family: var(--serif-en);
font-variant-caps: all-small-caps;
letter-spacing: .26em;
font-size: 1.05rem;
color: var(--ink-2);
}
.cover-en {
font-family: var(--serif-en);
font-style: italic;
font-size: 1.02rem;
color: var(--ink-2);
margin: 0 0 1.5rem;
line-height: 1.6;
}
.cover-lead {
font-size: .98rem;
line-height: 2.15;
margin: 0;
max-width: 34em;
color: var(--ink);
}
/* ---- LP: table of contents ------------------------------------ */
.toc { margin-top: clamp(3rem, 9vh, 5rem); }
.toc-h {
font-size: .88rem;
font-weight: 500;
letter-spacing: .55em;
color: var(--ink-3);
margin: 0 0 .3rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-top: 1px solid var(--hair); }
.toc li:last-child { border-bottom: 1px solid var(--hair); }
.toc a {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.1rem;
align-items: baseline;
padding: 1.15rem .2rem;
text-decoration: none;
}
.toc .no {
font-size: .95rem;
color: var(--ink-3);
font-weight: 500;
}
.toc .ttl {
font-size: 1.26rem;
font-weight: 500;
letter-spacing: .06em;
line-height: 1.5;
}
.toc .ttl-en {
font-family: var(--serif-en);
font-style: italic;
font-weight: 400;
font-size: .88rem;
color: var(--ink-3);
margin-left: .8em;
letter-spacing: .02em;
}
.toc .desc {
grid-column: 2;
font-size: .88rem;
color: var(--ink-2);
line-height: 1.7;
}
.toc .arw {
grid-row: 1;
grid-column: 3;
color: var(--ink-3);
transition: transform .25s ease, color .2s ease;
}
.toc a:hover .ttl { color: var(--shu-deep); }
.toc a:hover .arw { color: var(--shu); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.toc a:hover .arw { transform: none; }
}
/* sub-name (readings / qualifiers in parentheses) */
.s-sub {
font-size: .72em;
font-weight: 400;
color: var(--ink-2);
letter-spacing: .02em;
}
.d-name .s-sub { font-size: .55em; color: var(--ink-2); }
/* ---- footer ---------------------------------------------------- */
.foot {
margin-top: clamp(3.5rem, 10vh, 6rem);
padding-top: 1.4rem;
border-top: 1px solid var(--hair);
font-size: .84rem;
color: var(--ink-2);
}
.foot p { margin: .45rem 0; }
.foot-tag {
font-family: var(--serif-en);
font-style: italic;
color: var(--ink-2);
}
.foot-nav a { margin-right: 1.1em; }
.foot-nav .here { color: var(--ink-3); margin-right: 1.1em; }
.foot-note { font-size: .76rem; color: var(--ink-3); }
.foot-note .mono { font-size: .95em; white-space: nowrap; }
/* ---- Today's Stone --------------------------------------------- */
.daily { padding-top: clamp(1.5rem, 6vh, 3.5rem); }
.eyebrow {
font-size: .82rem;
letter-spacing: .5em;
color: var(--ink-3);
margin: 0 0 1.1rem;
font-weight: 500;
}
.eyebrow .en {
font-variant-caps: all-small-caps;
letter-spacing: .28em;
font-style: normal;
margin-left: .6em;
}
.d-date {
font-size: clamp(2rem, 7vw, 2.5rem);
font-weight: 500;
letter-spacing: .08em;
line-height: 1.3;
margin: 0;
}
.d-date .wd {
font-size: .45em;
color: var(--ink-2);
letter-spacing: .1em;
margin-left: .7em;
font-weight: 400;
}
.d-iso {
font-family: var(--mono);
font-size: .78rem;
color: var(--ink-3);
letter-spacing: .12em;
margin: .4rem 0 0;
}
.d-page { margin-top: clamp(2.2rem, 7vh, 3.5rem); }
.d-reg {
font-size: .88rem;
color: var(--ink-2);
margin: 0 0 .9rem;
}
.d-reg .sep { color: var(--hair-2); margin: 0 .55em; }
.d-name {
font-size: clamp(1.55rem, 5.5vw, 1.9rem);
font-weight: 500;
letter-spacing: .04em;
line-height: 1.55;
margin: 0;
}
.d-name-en {
font-family: var(--serif-en);
font-style: italic;
font-size: 1rem;
color: var(--ink-2);
margin: .35rem 0 0;
line-height: 1.5;
}
.d-body {
font-size: 1.07rem;
line-height: 2.15;
margin: 1.7rem 0 0;
max-width: 36em;
}
.d-body-en {
font-family: var(--serif-en);
font-size: 1.02rem;
line-height: 1.8;
color: var(--ink-2);
margin: 1.3rem 0 0;
max-width: 40em;
}
.d-coffee {
font-size: .9rem;
color: var(--ink-2);
margin: 1.6rem 0 0;
}
.d-links { font-size: .92rem; margin: 1.9rem 0 0; }
.d-links a { margin-right: 1.6em; }
.d-morrow {
margin-top: clamp(2.8rem, 8vh, 4rem);
padding-top: 1.2rem;
border-top: 1px solid var(--hair);
font-size: .86rem;
color: var(--ink-2);
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.d-morrow .yst { color: var(--ink-2); }
/* the page develops like a rubbing — once, quietly */
@media (prefers-reduced-motion: no-preference) {
.rise { opacity: 0; transform: translateY(7px); animation: rise .7s ease .12s forwards; }
.rise2 { opacity: 0; transform: translateY(7px); animation: rise .7s ease .28s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
}
/* ---- Stone Index ------------------------------------------------ */
.idx-head { padding-top: clamp(1.2rem, 5vh, 2.6rem); }
.idx-h {
font-size: clamp(1.5rem, 5.5vw, 1.8rem);
font-weight: 500;
letter-spacing: .12em;
margin: 0;
}
.idx-h .en {
display: block;
font-style: italic;
font-weight: 400;
font-size: .95rem;
letter-spacing: .04em;
color: var(--ink-3);
margin-top: .3rem;
}
.idx-lead {
font-size: .95rem;
line-height: 2.1;
color: var(--ink);
max-width: 36em;
margin: 1.3rem 0 0;
}
.idx-lead .en-line {
display: block;
font-family: var(--serif-en);
font-style: italic;
font-size: .88rem;
color: var(--ink-3);
margin-top: .2rem;
}
.firstpick {
font-size: .88rem;
color: var(--ink-2);
line-height: 2.2;
max-width: 40em;
margin: 1.2rem 0 0;
}
/* filter bar
2026-07-12 FB改修③: 下地の透明化 — 裏の moodエフェクト（mood-layer/canvas）を
透かす。position:sticky のため完全透明だとスクロール時に行テキストと重なり
判読性が壊れる（スクリーンショット実測）→ backdrop-filter: blur(4px) を併用。
blur 単独で判読性が保てたため rgba の薄敷きは不採用（透け感を優先）。
同改修: 4チップ＋マークが 390px（375px）幅で1行に収まるよう縮小
（旧 font-size .85rem / padding .28rem .52rem / gap .38rem .42rem）。 */
.filterbar {
position: sticky;
top: 0;
z-index: 6;
display: flex;
flex-wrap: wrap;
gap: .3rem;
padding: .85rem 0 .8rem;
margin-top: 1.8rem;
background: transparent;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-bottom: 1px solid var(--hair);
}
.filterbar button {
font-family: var(--serif-jp);
font-size: .78rem;
letter-spacing: .02em;
color: var(--ink-2);
background: transparent;
border: 1px solid var(--hair-2);
border-radius: 2px;
padding: .22rem .4rem;
cursor: pointer;
transition: border-color .2s ease, color .2s ease;
}
.filterbar button .mk { margin-right: .25em; }
@media (min-width: 30rem) {
.filterbar { gap: .45rem .5rem; }
.filterbar button { font-size: .87rem; padding: .3rem .62rem; letter-spacing: .04em; }
.filterbar button .mk { margin-right: .32em; }
}
.filterbar button:hover { color: var(--ink); border-color: var(--ink-3); }
.filterbar button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.filterbar button[data-q="joy"][aria-pressed="true"],
.filterbar button[data-q="legend"][aria-pressed="true"] { border-color: var(--shu); }
.filterbar button[data-q="sorrow"][aria-pressed="true"],
.filterbar button[data-q="shadow"][aria-pressed="true"] { border-color: var(--ai); }
.filterdesc {
font-size: .84rem;
color: var(--ink-2);
line-height: 1.9;
margin: .9rem 0 0;
min-height: 1.9em;
}
.filterdesc .en { font-style: italic; color: var(--ink-3); }
.zonenav {
font-size: .84rem;
color: var(--ink-2);
margin: .7rem 0 0;
letter-spacing: .04em;
}
.zonenav a { text-decoration: none; margin-right: 1.15em; white-space: nowrap; }
.zonenav a:hover { color: var(--shu); }
.zonenav .zc { font-family: var(--mono); font-size: .78em; color: var(--ink-3); margin-left: .35em; }
.zonenav a.z0 { opacity: .45; }
.zonenav a.z0:hover { color: var(--ink-2); }
/* zone sections */
.zone { margin-top: 2.7rem; }
.z-h {
font-size: 1.02rem;
font-weight: 500;
letter-spacing: .5em;
margin: 0 0 .2rem;
padding-bottom: .45rem;
border-bottom: 1px solid var(--hair-2);
display: flex;
align-items: baseline;
}
.z-h .z-rom {
font-family: var(--serif-en);
font-style: italic;
font-weight: 400;
font-size: .8rem;
letter-spacing: .05em;
color: var(--ink-3);
margin-left: .4em;
}
.z-h .z-count {
margin-left: auto;
font-family: var(--mono);
font-size: .78rem;
font-weight: 400;
letter-spacing: 0;
color: var(--ink-3);
}
/* stone entries — one-line hook rows (2026-07-09 UI改修, replaces the old
accordion: no expand/collapse, no anecdote/coffee/
nearby/meta here — those live on the individual stone page only) */
.stone-row {
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: .1rem;
row-gap: .2rem;
align-items: baseline;
padding: .85rem .2rem;
border-bottom: 1px solid var(--hair);
text-decoration: none;
color: inherit;
transition: background-color 1.6s ease;
}
/* 2026-07-09 バグ修正: UA stylesheet の [hidden]{display:none} は
`.stone-row{display:grid}` より詳細度が同じため後勝ちで上書きされ、
フィルタ/検索で hidden=true になった行が display:grid のまま可視化
していた（shadowフィルタ後、hidden付き118行がcomputed display:gridで
表示される実測バグ）。!important で確実に非表示化する。
section.zone[hidden] にも同じ理由で保険を掛ける。 */
.stone-row[hidden] { display: none !important; }
section.zone[hidden] { display: none !important; }
.stone-row .mk { grid-row: 1; }
.stone-row .s-name {
grid-row: 1;
grid-column: 2;
min-width: 0;
font-size: .98rem;
font-weight: 500;
letter-spacing: .03em;
line-height: 1.6;
transition: color .2s ease;
}
.stone-row .s-area {
grid-row: 1;
grid-column: 3;
font-size: .78rem;
color: var(--ink-3);
margin-left: 1rem;
white-space: nowrap;
}
.stone-row .s-hook {
grid-row: 2;
grid-column: 2 / -1;
font-size: .86rem;
letter-spacing: .01em;
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stone-row:hover .s-name { color: var(--shu-deep); }
.stone-row[data-q="sorrow"]:hover .s-name,
.stone-row[data-q="shadow"]:hover .s-name { color: var(--ai-deep); }
/* #S### deep-link highlight — a brief wash, then fades */
.stone-row.hl { animation: hl-fade 1.6s ease; }
@keyframes hl-fade {
from { background-color: rgba(41, 38, 30, .05); }
to { background-color: transparent; }
}
/* quad-filter staggered reveal (mood on, see mood-layer section below) */
.stone-row.reveal {
animation: card-reveal .46s cubic-bezier(.2, .75, .2, 1) both;
animation-delay: var(--card-delay, 0ms);
}
@keyframes card-reveal {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.empty {
text-align: center;
font-size: .92rem;
color: var(--ink-2);
padding: 3.5rem 0;
margin: 0;
}
/* staggered section reveal — once, like turning to a page */
@media (prefers-reduced-motion: no-preference) {
.rev { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.rev.on { opacity: 1; transform: none; }
}
/* narrow screens */
@media (max-width: 30rem) {
.s-area { display: none; }
.toc .ttl-en { display: block; margin-left: 0; margin-top: .1rem; }
.d-links a { display: inline-block; margin-right: 1.2em; }
.brand { gap: .6rem; }
.brand .wordmark { white-space: nowrap; letter-spacing: .16em; font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
.rise, .rise2 { opacity: 1; transform: none; }
.rev { opacity: 1; transform: none; }
.mood-canvas { display: none !important; }
}
/* ============================================================
Language link (JP ⇄ EN, header right)
============================================================ */
.langlink {
margin-left: auto;
font-size: .86rem;
color: var(--ink-2);
text-decoration: none;
}
.langlink:hover { color: var(--shu); }
html[lang="ja"] .langlink {
font-family: var(--serif-en);
font-variant-caps: all-small-caps;
letter-spacing: .16em;
}
html[lang="en"] .langlink {
font-family: var(--serif-jp);
font-size: .8rem;
letter-spacing: .1em;
}
/* ============================================================
EN edition — English-first typography (html[lang="en"])
EB Garamond primary · oldstyle figures · small-caps furniture
Measures in ch · ragged right · hyphenation on body copy
============================================================ */
html[lang="en"] body {
font-family: var(--serif-en);
line-height: 1.72;
font-feature-settings: "onum" 1;
}
html[lang="en"] .mono { font-feature-settings: "onum" 0; font-size: .82em; }
/* cover */
html[lang="en"] .cover { grid-template-columns: 1fr; }
.cover-epi {
font-family: var(--serif-en);
font-size: clamp(2.05rem, 6.5vw, 2.7rem);
font-weight: 400;
line-height: 1.22;
letter-spacing: .005em;
margin: 0 0 1.5rem;
}
html[lang="en"] .cover-lead {
font-size: 1.04rem;
line-height: 1.78;
max-width: 56ch;
hyphens: auto;
}
/* contents */
html[lang="en"] .toc-h {
font-variant-caps: all-small-caps;
letter-spacing: .34em;
font-size: 1.02rem;
}
html[lang="en"] .toc .ttl { font-size: 1.32rem; letter-spacing: .01em; }
html[lang="en"] .toc .no { font-size: .92rem; }
html[lang="en"] .toc .desc { font-size: .92rem; line-height: 1.62; max-width: 52ch; }
/* today's stone */
html[lang="en"] .eyebrow {
font-variant-caps: all-small-caps;
letter-spacing: .32em;
font-size: .98rem;
}
html[lang="en"] .d-date { font-weight: 400; letter-spacing: .01em; }
html[lang="en"] .d-name { letter-spacing: .01em; line-height: 1.3; }
html[lang="en"] .d-name .s-sub { font-size: .6em; }
html[lang="en"] .d-body {
font-size: 1.09rem;
line-height: 1.74;
max-width: 60ch;
hyphens: auto;
}
html[lang="en"] .d-reg, html[lang="en"] .d-coffee,
html[lang="en"] .d-links, html[lang="en"] .d-morrow { letter-spacing: .01em; }
/* index */
html[lang="en"] .idx-h { letter-spacing: .02em; }
html[lang="en"] .idx-lead { font-size: 1rem; line-height: 1.72; max-width: 58ch; }
html[lang="en"] .firstpick { font-size: .92rem; line-height: 1.9; max-width: 60ch; }
/* 2026-07-12 FB改修③: EN表記 (JOY/LEGEND/SORROW/SHADOW) は長いので、
狭幅では詰めて4チップ1行を確保し、30rem以上で従来の余裕に戻す。 */
html[lang="en"] .filterbar button {
font-family: var(--serif-en);
font-variant-caps: all-small-caps;
letter-spacing: .06em;
font-size: .82rem;
padding: .22rem .4rem;
}
@media (min-width: 30rem) {
html[lang="en"] .filterbar button {
letter-spacing: .16em;
font-size: .98rem;
padding: .2rem .62rem;
}
}
html[lang="en"] .filterdesc { font-size: .86rem; letter-spacing: .01em; }
html[lang="en"] .zonenav {
letter-spacing: .02em;
display: flex;
flex-wrap: wrap;
gap: .15em 1.15em;
}
html[lang="en"] .zonenav a { margin-right: 0; }
html[lang="en"] .z-h {
font-variant-caps: all-small-caps;
letter-spacing: .2em;
font-size: 1.14rem;
}
html[lang="en"] .z-h .z-rom { font-variant-caps: normal; letter-spacing: .02em; }
html[lang="en"] .z-h .z-count { font-variant-caps: normal; letter-spacing: 0; }
html[lang="en"] .s-name { font-size: 1.02rem; letter-spacing: .01em; }
html[lang="en"] .s-hook { font-size: .9rem; letter-spacing: .01em; }
/* footer */
html[lang="en"] .foot { letter-spacing: .01em; }
html[lang="en"] .foot-note { font-size: .78rem; }
/* ============================================================
2026-07-09 adoption polish — quiet CTA, search, chips,
stone pages, tap targets
============================================================ */
/* LP: restrained bordered action */
.qcta {
display: inline-block;
border: 1px solid var(--hair-2);
border-radius: 2px;
padding: .52rem 1.05rem;
text-decoration: none;
font-size: .92rem;
letter-spacing: .05em;
color: var(--ink);
white-space: nowrap; /* 2026-07-09 バグ修正: 末尾の「→」が狭幅で折り返し2行になるのを防ぐ */
transition: border-color .2s ease, color .2s ease;
}
.qcta:hover { border-color: var(--shu); color: var(--shu-deep); }
html[lang="en"] .qcta { font-size: .95rem; letter-spacing: .03em; }
/* subdued vermilion accent for the one "lead" action per context — the
Substack-primary CTA on the EN cover, and the map CTA on stone pages.
hover still converges on var(--shu) via the base .qcta:hover rule above. */
.qcta-primary, .qcta-map { border-color: rgba(161, 58, 40, .5); }
/* (2026-07-12 FB改修②: LP followセクション削除 — .follow / .follow-lead /
.follow-cta のCSSを撤去。Substack導線は toc 四項目め「石の物語」に移設。) */
/* LP: contents rows read as actions */
.toc a:hover { background: rgba(41, 38, 30, .028); }
.toc .arw { color: var(--ink-2); }
/* index: search box */
.filterbar { align-items: center; }
.sq {
flex: 1 1 100%;
font-family: inherit;
font-size: .92rem;
color: var(--ink);
background: transparent;
border: 1px solid var(--hair-2);
border-radius: 2px;
padding: .45rem .6rem;
margin-bottom: .25rem;
letter-spacing: .02em;
}
.sq::placeholder { color: var(--ink-3); opacity: 1; }
.sq:focus { outline: none; border-color: var(--ink-3); }
.sq:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }
.chips { display: contents; }
/* index: unmistakable active chip */
.filterbar button[aria-pressed="true"] {
color: var(--ink);
border-color: var(--ink);
background: rgba(41, 38, 30, .05);
}
/* stone pages */
.stonepage { padding-top: clamp(1.2rem, 5vh, 2.4rem); }
.backlink { font-size: .88rem; margin: 0 0 1.6rem; }
.backlink a { text-decoration: none; color: var(--ink-2); }
.backlink a:hover { color: var(--shu); }
.stonepage .d-reg { margin-bottom: .7rem; }
.stonepage .d-name { font-size: clamp(1.6rem, 5.5vw, 2rem); margin: 0 0 1.2rem; }
.stonepage .d-body { margin-top: 0; }
.s-sec { margin-top: 2.1rem; }
.s-sec-h {
font-size: .85rem;
font-weight: 500;
letter-spacing: .3em;
color: var(--ink-3);
margin: 0 0 .5rem;
border-bottom: 1px solid var(--hair);
padding-bottom: .35rem;
}
html[lang="en"] .s-sec-h {
font-variant-caps: all-small-caps;
letter-spacing: .2em;
font-size: .95rem;
}
.s-cof {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: baseline;
font-size: .95rem;
margin: .5rem 0 0;
}
.s-cof .dist { color: var(--ink-3); font-size: .82rem; white-space: nowrap; }
/* 近くの石 — one per line (2026-07-09 UI改修, replaces the old inline .s-near paragraph) */
.s-near-list {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
line-height: 2.1;
font-size: .95rem;
}
.s-near-list li { margin: 0; }
.s-near-list a { text-decoration: none; }
.s-near-list a:hover { color: var(--shu); }
.stonepage .d-links { margin-top: 2.2rem; }
/* stone-actions: the two d-links buttons (map / about) replace the old plain-text links */
.stone-actions.d-links { margin-top: 2.2rem; }
.stone-actions a { margin-right: .8em; }
.stone-actions a:last-child { margin-right: 0; }
.qcta-map:hover { border-color: var(--shu); color: var(--shu-deep); }
.s-note { margin-top: 2.2rem; }
/* ============================================================
mood-layer (2026-07-09 UI改修; canvas移植 2026-07-09b) — ported from the
Codex reference (0_codex_workspace/output/changed-files/stones/S035.html),
dialled back to a washi-quiet register: CSS gradients at roughly 60% of
the Codex build's opacities, PLUS a