/* Fonts loaded via in each page (faster than @import). */ :root { --ink: #0b0a08; --ink-2: #110d0a; --cream: #ece3d3; --cream-dim: rgba(236, 227, 211, 0.72); --cream-faint: rgba(236, 227, 211, 0.58); --gold: #c4a35c; --oxblood: #7d2f27; --rule: rgba(236, 227, 211, 0.14); --rule-strong: rgba(236, 227, 211, 0.26); --disp: "Fraunces", "Cormorant Garamond", Georgia, serif; --px: 0px; --py: 0px; } * { box-sizing: border-box; } html { background: var(--ink); } body { margin: 0; min-height: 100svh; color: var(--cream); font-family: var(--disp); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(120% 90% at 8% -10%, rgba(125, 47, 39, 0.34), transparent 46%), radial-gradient(90% 80% at 100% 108%, rgba(196, 163, 92, 0.12), transparent 55%), linear-gradient(150deg, #070605 0%, var(--ink-2) 54%, #060504 100%); overflow-x: hidden; } ::selection { color: var(--ink); background: var(--gold); } /* ---------- atmosphere ---------- */ .grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 7s steps(6) infinite; } .warmth, .halo { position: fixed; pointer-events: none; border-radius: 50%; } .warmth { inset: 0; z-index: 0; background: radial-gradient(closest-side, rgba(125, 47, 39, 0.16), transparent 70%); width: 70vmax; height: 70vmax; top: -28vmax; left: -22vmax; filter: blur(40px); } /* cursor-following ember */ .halo { z-index: 0; width: 38vmax; height: 38vmax; left: var(--px); top: var(--py); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(196, 163, 92, 0.1), transparent 70%); filter: blur(30px); transition: opacity 0.6s ease; opacity: 0; } body.has-pointer .halo { opacity: 1; } /* ---------- page frame ---------- */ .page { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: clamp(2rem, 5vw, 6rem); min-height: 100svh; max-width: 1500px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 6rem) clamp(1.6rem, 6vw, 7rem); } .rule-top { position: absolute; top: clamp(1.5rem, 3.4vw, 3rem); left: clamp(1.6rem, 6vw, 7rem); right: clamp(1.6rem, 6vw, 7rem); height: 1px; background: var(--rule); } .rule-top::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--gold); animation: drawRule 1.6s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } /* ---------- masthead ---------- */ .masthead { max-width: 36rem; } .kicker { margin: 0 0 clamp(1.4rem, 2.6vw, 2.2rem); color: var(--cream-dim); font-size: clamp(0.7rem, 0.95vw, 0.82rem); font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0; animation: rise 1s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .kicker-mark { color: var(--gold); margin-right: 0.5em; font-size: 0.85em; } .wordmark { margin: 0; font-weight: 360; font-size: clamp(3.4rem, 8.2vw, 7.2rem); line-height: 0.82; letter-spacing: -0.018em; font-variation-settings: "opsz" 144; } .wordmark .line { display: block; overflow: hidden; } .wordmark .line-inner { display: block; transform: translateY(105%); animation: reveal 1.15s cubic-bezier(0.16, 0.8, 0.24, 1) forwards; } .wordmark .line:nth-child(1) .line-inner { animation-delay: 0.34s; } .wordmark .line:nth-child(2) .line-inner { animation-delay: 0.46s; color: transparent; background: linear-gradient(180deg, var(--cream) 58%, var(--gold) 130%); -webkit-background-clip: text; background-clip: text; font-style: italic; font-weight: 340; } .lede { max-width: 30rem; margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; color: var(--cream-dim); font-size: clamp(1.02rem, 1.4vw, 1.3rem); font-style: italic; font-weight: 330; line-height: 1.55; opacity: 0; animation: rise 1.1s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } /* ---------- specimen index ---------- */ .specimen { justify-self: end; width: min(100%, 30rem); opacity: 0; animation: rise 1.1s 0.8s ease forwards; } .specimen-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 clamp(0.6rem, 1.4vw, 1rem); padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); color: var(--cream-faint); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; } .specimen-label .count { color: var(--gold); font-style: italic; letter-spacing: 0.1em; text-transform: lowercase; } .tongues { margin: 0; padding: 0; list-style: none; } .tongue { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: clamp(0.7rem, 1.5vw, 1.05rem) 0; border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(0.8rem); animation: rise 0.85s calc(0.95s + var(--i) * 0.1s) cubic-bezier(0.2, 0.7, 0.2, 1) forwards; transition: padding-left 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } .tongue.has-link { cursor: pointer; } .tongue-overlay { position: absolute; inset: 0; z-index: 1; color: inherit; text-decoration: none; } .tongue.has-link .native, .tongue.has-link .meta { position: relative; z-index: 2; pointer-events: none; } .tongue-overlay:focus-visible { outline: 1px solid var(--gold); outline-offset: 0.35rem; } /* gold marker that grows on hover */ .tongue::before { content: ""; position: absolute; left: -0.1rem; top: 50%; width: 0; height: 1px; background: var(--gold); transform: translateY(-50%); transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } .native { font-size: clamp(1.7rem, 2.7vw, 2.5rem); font-weight: 500; line-height: 1; letter-spacing: 0.01em; transition: color 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } .native[lang="ja"] { font-family: "Noto Serif JP", var(--disp); } .native[lang="zh"] { font-family: "Noto Serif TC", var(--disp); } .native[lang="ko"] { font-family: "Noto Serif KR", var(--disp); } .native[lang="he"] { font-family: "Noto Serif Hebrew", var(--disp); } .native[lang="ru"] { font-family: "Noto Serif", var(--disp); font-style: italic; } .meta { text-align: right; line-height: 1.25; } .rom { display: block; color: var(--cream); font-size: clamp(0.92rem, 1.15vw, 1.05rem); font-style: italic; font-weight: 360; } .en { display: block; margin-top: 0.15rem; color: var(--cream-faint); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; } @media (hover: hover) { .tongue:hover { padding-left: 1.5rem; } .tongue:hover::before { width: 0.9rem; } .tongue:hover .native { color: var(--gold); } .tongue:hover .rom { color: var(--cream); } } /* ---------- study pages ---------- */ .study-page { position: relative; z-index: 2; min-height: 100svh; max-width: 1500px; margin: 0 auto; padding: clamp(5rem, 8vw, 7rem) clamp(1.6rem, 6vw, 7rem) clamp(3rem, 6vw, 5rem); } .study-nav, .study-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--cream-faint); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; } .study-nav { justify-content: flex-start; margin-bottom: clamp(3.5rem, 8vw, 7rem); } .study-nav a, .study-footer a { color: var(--cream-dim); text-decoration: none; transition: color 0.25s ease; } .study-nav a:hover, .study-footer a:hover { color: var(--gold); } .study-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.62fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(3rem, 7vw, 6rem); } .study-title { display: grid; gap: 0.45rem; margin: 0; font-size: clamp(4.2rem, 11vw, 10rem); font-weight: 360; letter-spacing: -0.018em; line-height: 0.84; } .study-title span:first-child { color: var(--gold); font-family: "Noto Serif KR", var(--disp); font-size: 0.62em; letter-spacing: 0; } .study-title span:last-child { font-style: italic; } .study-lede { margin: 0; color: var(--cream-dim); font-size: clamp(1.05rem, 1.45vw, 1.35rem); font-style: italic; font-weight: 330; line-height: 1.6; } .study-section { border-top: 1px solid var(--rule); padding: clamp(2rem, 5vw, 4rem) 0; } .intro-grid, .split-section { display: grid; grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 0.78fr); gap: clamp(1.5rem, 5vw, 5rem); } .section-label { margin: 0 0 0.85rem; color: var(--gold); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .study-section h2 { max-width: 28rem; margin: 0; color: var(--cream); font-size: clamp(1.9rem, 4vw, 3.6rem); font-weight: 360; line-height: 1; letter-spacing: -0.01em; } .prose { max-width: 52rem; color: var(--cream-dim); font-size: clamp(1rem, 1.16vw, 1.13rem); line-height: 1.72; } .prose p, .definition-list p { margin: 0; } .prose p + p, .definition-list p + p { margin-top: 1rem; } .metric-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0; background: var(--rule); } .metric { min-height: 9rem; padding: clamp(1.2rem, 2.4vw, 1.8rem); background: rgba(11, 10, 8, 0.72); } .metric-number { display: block; color: var(--cream); font-size: clamp(2.2rem, 4.8vw, 4.6rem); font-style: italic; font-weight: 340; line-height: 0.95; } .metric-label { display: block; max-width: 12rem; margin-top: 0.9rem; color: var(--cream-faint); font-size: 0.74rem; letter-spacing: 0.16em; line-height: 1.45; text-transform: uppercase; } .definition-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; color: var(--cream-dim); font-size: clamp(0.98rem, 1.12vw, 1.08rem); line-height: 1.65; } .definition-list strong { color: var(--cream); font-weight: 500; } .table-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.4rem; } .table-note { max-width: 24rem; margin: 0; color: var(--cream-faint); font-size: 0.74rem; letter-spacing: 0.08em; line-height: 1.5; } .table-wrap { overflow-x: auto; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); } .table-wrap table { width: 100%; border-collapse: collapse; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.45; } .table-wrap th { color: var(--cream); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-align: left; text-transform: uppercase; } .table-wrap th, .table-wrap td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; } .table-wrap tbody tr:hover { background: rgba(196, 163, 92, 0.045); } .compact-table table { min-width: 44rem; } .word-table table { min-width: 68rem; } .rank { color: var(--gold); font-style: italic; white-space: nowrap; } .ko-word { color: var(--cream); font-family: "Noto Serif KR", var(--disp); font-size: 1.2rem; white-space: nowrap; } .japanese-study .study-title span:first-child, .jp-term, .jp-reading { font-family: "Noto Serif JP", var(--disp); } .jp-term { color: var(--cream); font-size: 1.2rem; white-space: nowrap; } .chinese-study .study-title span:first-child, .zh-trad, .zh-simp { font-family: "Noto Serif TC", "Noto Serif JP", var(--disp); } .zh-trad { color: var(--cream); font-size: 1.24rem; white-space: nowrap; } .zh-simp { color: rgba(236, 227, 211, 0.78); font-size: 1.12rem; white-space: nowrap; } .pinyin { color: rgba(236, 227, 211, 0.78); font-style: italic; white-space: nowrap; } .russian-study .study-title span:first-child, .ru-word { font-family: "Noto Serif", var(--disp); } .russian-study .study-title span:first-child { font-style: italic; } .ru-word { color: var(--cream); font-size: 1.2rem; white-space: nowrap; } .part-of-speech { color: rgba(236, 227, 211, 0.72); } .hebrew-study .study-title span:first-child, .hebrew-lemma, .hebrew-vocalized { font-family: "Noto Serif Hebrew", var(--disp); } .hebrew-lemma, .hebrew-vocalized { color: var(--cream); font-size: 1.22rem; text-align: right; white-space: nowrap; } .hebrew-vocalized { color: rgba(236, 227, 211, 0.78); } .jp-reading { color: rgba(236, 227, 211, 0.78); white-space: nowrap; } .hanja { color: rgba(236, 227, 211, 0.78); font-family: "Noto Serif TC", "Noto Serif JP", var(--disp); white-space: nowrap; } .study-footer { margin-top: clamp(1rem, 3vw, 2rem); padding-top: 1.4rem; border-top: 1px solid var(--rule); } /* ---------- colophon ---------- */ .colophon { position: absolute; left: clamp(1.6rem, 6vw, 7rem); right: clamp(1.6rem, 6vw, 7rem); bottom: clamp(1.5rem, 3vw, 2.6rem); display: flex; justify-content: space-between; color: var(--cream-faint); font-size: clamp(0.7rem, 0.9vw, 0.8rem); font-weight: 400; letter-spacing: 0.1em; opacity: 0; animation: rise 1s 1.5s ease forwards; } .colophon-mark { letter-spacing: 0.22em; } /* ---------- keyframes ---------- */ @keyframes reveal { to { transform: translateY(0); } } @keyframes rise { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: translateY(0); } } @keyframes drawRule { to { width: 100%; } } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -2%); } 60% { transform: translate(-2%, -3%); } 80% { transform: translate(2%, 4%); } } /* ---------- responsive ---------- */ @media (max-width: 880px) { .page { grid-template-columns: 1fr; align-content: center; gap: clamp(2.4rem, 8vw, 3.5rem); padding-top: clamp(5rem, 16vw, 7rem); padding-bottom: clamp(5rem, 14vw, 7rem); } .specimen { justify-self: stretch; width: 100%; } .tongue { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .lede { max-width: 28rem; } .study-hero, .intro-grid, .split-section { grid-template-columns: 1fr; } .study-nav { margin-bottom: 3.5rem; } .metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .definition-list { grid-template-columns: 1fr; } .table-heading { align-items: start; flex-direction: column; } } @media (max-width: 460px) { .wordmark { font-size: clamp(3.1rem, 17vw, 4.6rem); } .native { font-size: clamp(1.55rem, 8vw, 2rem); } .tongue { gap: 1rem; } .en { letter-spacing: 0.14em; } .study-page { padding-right: 1.25rem; padding-left: 1.25rem; } .study-title { font-size: clamp(3.3rem, 16vw, 4.8rem); } .metric-band { grid-template-columns: 1fr; } .table-wrap th, .table-wrap td { padding: 0.75rem 0.8rem; } .study-footer { align-items: flex-start; flex-direction: column; } } @media (max-width: 700px) { .word-table { overflow: visible; } .word-table table, .word-table tbody, .word-table tr, .word-table td { display: block; min-width: 0; width: 100%; } .word-table thead { display: none; } .word-table tr { position: relative; padding: 1.05rem 0 1.15rem 3.1rem; border-bottom: 1px solid var(--rule); } .word-table td { border-bottom: 0; padding: 0; } .word-table .rank { position: absolute; top: 1.18rem; left: 0.1rem; width: 2rem; color: var(--gold); font-size: 0.92rem; text-align: left; } .word-table .ko-word { margin-bottom: 0.3rem; font-size: 2rem; line-height: 1.05; } .word-table td:nth-child(3) { color: var(--cream); font-size: 0.92rem; font-style: italic; } .word-table td:nth-child(4), .word-table td:nth-child(5), .word-table td:nth-child(6) { margin-top: 0.65rem; } .word-table td:nth-child(4)::before, .word-table td:nth-child(5)::before, .word-table td:nth-child(6)::before { display: block; margin-bottom: 0.18rem; color: var(--cream-faint); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .word-table td:nth-child(4)::before { content: "Meaning"; } .word-table td:nth-child(5)::before { content: "Characters"; } .word-table td:nth-child(6)::before { content: "Note"; } .japanese-word-table td:nth-child(3)::before, .japanese-word-table td:nth-child(4)::before, .japanese-word-table td:nth-child(5)::before { display: block; margin-bottom: 0.18rem; color: var(--cream-faint); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .japanese-word-table td:nth-child(3)::before { content: "Reading"; } .japanese-word-table td:nth-child(4)::before { content: "Romanization"; } .japanese-word-table td:nth-child(5)::before { content: "Meaning"; } .japanese-word-table td:nth-child(5) { margin-top: 0.65rem; } .japanese-word-table .jp-term { margin-bottom: 0.3rem; font-size: 2rem; line-height: 1.05; } .japanese-word-table .jp-reading { margin-top: 0.65rem; } .chinese-word-table td:nth-child(3)::before, .chinese-word-table td:nth-child(4)::before, .chinese-word-table td:nth-child(5)::before { display: block; margin-bottom: 0.18rem; color: var(--cream-faint); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .chinese-word-table td:nth-child(3)::before { content: "Simplified"; } .chinese-word-table td:nth-child(4)::before { content: "Pinyin"; } .chinese-word-table td:nth-child(5)::before { content: "Meaning"; } .chinese-word-table td:nth-child(5) { margin-top: 0.65rem; } .chinese-word-table .zh-trad { margin-bottom: 0.3rem; font-size: 2rem; line-height: 1.05; } .chinese-word-table .zh-simp { margin-top: 0.65rem; } .russian-word-table td:nth-child(3)::before, .russian-word-table td:nth-child(4)::before, .russian-word-table td:nth-child(5)::before { display: block; margin-bottom: 0.18rem; color: var(--cream-faint); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .russian-word-table td:nth-child(3)::before { content: "Romanization"; } .russian-word-table td:nth-child(4)::before { content: "POS"; } .russian-word-table td:nth-child(5)::before { content: "Meaning"; } .russian-word-table td:nth-child(5) { margin-top: 0.65rem; } .russian-word-table .ru-word { margin-bottom: 0.3rem; font-size: 2rem; line-height: 1.05; } .hebrew-word-table td:nth-child(3)::before, .hebrew-word-table td:nth-child(4)::before, .hebrew-word-table td:nth-child(5)::before, .hebrew-word-table td:nth-child(6)::before { display: block; margin-bottom: 0.18rem; color: var(--cream-faint); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .hebrew-word-table td:nth-child(3)::before { content: "Vocalized"; } .hebrew-word-table td:nth-child(4)::before { content: "Transliteration"; } .hebrew-word-table td:nth-child(5)::before { content: "Type"; } .hebrew-word-table td:nth-child(6)::before { content: "Meaning"; } .hebrew-word-table td:nth-child(6) { margin-top: 0.65rem; } .hebrew-word-table .hebrew-lemma { margin-bottom: 0.3rem; font-size: 2.05rem; line-height: 1.05; text-align: left; } .hebrew-word-table .hebrew-vocalized { margin-top: 0.65rem; text-align: left; } } @media (prefers-reduced-motion: reduce) { .grain { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; } .wordmark .line-inner, .kicker, .lede, .specimen, .tongue, .colophon { opacity: 1 !important; transform: none !important; } .rule-top::before { width: 100%; } } /* ---------- study: language switcher ---------- */ .study-nav { flex-wrap: wrap; row-gap: 1rem; } .lang-switch { display: flex; flex-wrap: wrap; gap: 0.35rem 0.95rem; margin-left: auto; text-transform: none; letter-spacing: 0; } .lang-chip { color: var(--cream-faint); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1; text-decoration: none; transition: color 0.25s ease; } .lang-chip:hover { color: var(--cream); } .lang-chip.is-current { color: var(--gold); } .lang-chip[lang="ja"] { font-family: "Noto Serif JP", var(--disp); } .lang-chip[lang="zh"] { font-family: "Noto Serif TC", var(--disp); } .lang-chip[lang="ko"] { font-family: "Noto Serif KR", var(--disp); } .lang-chip[lang="he"] { font-family: "Noto Serif Hebrew", var(--disp); } .lang-chip[lang="ru"] { font-family: "Noto Serif", var(--disp); font-style: italic; } .lang-chip:focus-visible { outline: 1px solid var(--gold); outline-offset: 0.3rem; } /* ---------- study: live search / filter ---------- */ .study-search { position: sticky; top: 0; z-index: 5; margin: 0 0 -1px; padding: 0.8rem 0; background: linear-gradient(180deg, rgba(8, 7, 5, 0.97) 60%, rgba(8, 7, 5, 0.78)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); } .study-search-inner { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .study-search-input { flex: 1 1 20rem; min-width: 0; padding: 0.72rem 0.95rem; color: var(--cream); font-family: var(--disp); font-size: 1rem; background: rgba(236, 227, 211, 0.04); border: 1px solid var(--rule-strong); border-radius: 2px; transition: border-color 0.25s ease, background 0.25s ease; } .study-search-input::placeholder { color: var(--cream-faint); } .study-search-input:focus { outline: 1px solid var(--gold); outline-offset: 1px; border-color: var(--gold); background: rgba(236, 227, 211, 0.06); } .study-search-clear { padding: 0.58rem 0.95rem; color: var(--cream-dim); font-family: var(--disp); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; background: transparent; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .study-search-clear:hover { color: var(--gold); border-color: var(--gold); } .study-search-count { color: var(--cream-faint); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .word-table tr.is-filtered { display: none !important; } @media (max-width: 880px) { .lang-switch { width: 100%; margin-left: 0; } } /* ---------- homepage: quiet notify ---------- */ .masthead-note { margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; color: var(--cream-faint); font-size: clamp(0.78rem, 1vw, 0.9rem); font-style: italic; font-weight: 330; opacity: 0; animation: rise 1.1s 0.95s ease forwards; } .masthead-note a { color: var(--cream-dim); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 1px; transition: color 0.25s ease, border-color 0.25s ease; } .masthead-note a:hover { color: var(--gold); border-color: var(--gold); } /* ---------- study: provenance + next-steps ---------- */ .provenance-meta { margin-top: 1.3rem !important; color: var(--cream-faint); font-size: 0.74rem; letter-spacing: 0.1em; } .prose a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: color 0.25s ease, border-color 0.25s ease; } .prose a:hover { color: var(--gold); border-color: var(--gold); } .next-langs { display: flex; flex-wrap: wrap; gap: 0.7rem 1.8rem; margin-top: 1.6rem; } .next-langs a { display: inline-flex; align-items: baseline; gap: 0.55rem; color: var(--cream-dim); text-decoration: none; border: 0; transition: color 0.25s ease; } .next-langs a:hover { color: var(--gold); } .nl-native { font-size: 1.25rem; line-height: 1; } .next-langs a[lang="ja"] .nl-native { font-family: "Noto Serif JP", var(--disp); } .next-langs a[lang="zh"] .nl-native { font-family: "Noto Serif TC", var(--disp); } .next-langs a[lang="ko"] .nl-native { font-family: "Noto Serif KR", var(--disp); } .next-langs a[lang="he"] .nl-native { font-family: "Noto Serif Hebrew", var(--disp); } .next-langs a[lang="ru"] .nl-native { font-family: "Noto Serif", var(--disp); font-style: italic; } .nl-en { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); } /* ---------- study: visualization engine ---------- */ #fi-viz { border-top: 1px solid var(--rule); padding: clamp(2rem, 5vw, 4rem) 0; } .viz-head { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); } .viz-head h2 { max-width: 30rem; margin: 0; color: var(--cream); font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 360; line-height: 1; letter-spacing: -0.01em; } .viz-note { max-width: 34rem; margin: 0.9rem 0 0; color: var(--cream-dim); font-size: clamp(0.95rem, 1.1vw, 1.06rem); line-height: 1.6; } .viz-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .viz-donut-wrap { display: grid; gap: 1.4rem; } .viz-svg { width: min(100%, 16rem); height: auto; display: block; overflow: visible; } .viz-slice { cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: 110px 110px; } .viz-slice:hover { opacity: 0.85; } .viz-slice.dim { opacity: 0.22; } .viz-slice:focus-visible { outline: 1px solid var(--gold); } .viz-center-n { fill: var(--cream); font-family: var(--disp); font-size: 2.1rem; font-style: italic; font-weight: 340; } .viz-center-l { fill: var(--cream-faint); font-family: var(--disp); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; } .viz-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1.2rem; } .viz-leg { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.25rem 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--cream-dim); font-family: var(--disp); font-size: 0.92rem; transition: color 0.2s ease; } .viz-leg:hover { color: var(--cream); } .viz-leg.on { color: var(--gold); } .viz-dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; flex: none; transform: translateY(0.05rem); } .viz-leg-name { flex: 1; } .viz-leg-n { color: var(--cream-faint); font-style: italic; } .viz-sub { margin: 0 0 0.9rem; color: var(--cream); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.04em; } .viz-sub-faint { color: var(--cream-faint); font-weight: 400; font-style: italic; letter-spacing: 0; } .viz-heat { display: grid; gap: 4px; } .viz-heat-row { display: grid; grid-template-columns: 5.5rem repeat(4, 1fr); gap: 4px; align-items: stretch; } .viz-heat-head .viz-heat-cell-h { color: var(--cream-faint); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding-bottom: 0.2rem; } .viz-heat-cat { color: var(--cream-dim); font-size: 0.78rem; line-height: 1; align-self: center; } .viz-heat-cell { position: relative; min-height: 2.3rem; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; display: grid; place-items: center; transition: outline 0.2s ease, opacity 0.25s ease; } .viz-heat-cell:hover { outline: 1px solid var(--gold); } .viz-heat-cell.on { outline: 1.5px solid var(--gold); } .viz-heat-cell.dim { opacity: 0.4; } .viz-heat-n { color: var(--cream); font-family: "DM Mono", var(--ff-mono, monospace); font-size: 0.74rem; } .viz-chip { margin-top: 1.6rem; color: var(--cream-dim); font-size: 0.92rem; font-style: italic; } .viz-chip strong { color: var(--gold); font-style: normal; } #viz-clear { margin-left: 0.6rem; padding: 0.25rem 0.6rem; color: var(--cream-dim); font-family: var(--disp); font-size: 0.8rem; font-style: normal; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } #viz-clear:hover { color: var(--gold); border-color: var(--gold); } .word-table tr.viz-off { display: none !important; } @media (max-width: 820px) { .viz-grid { grid-template-columns: 1fr; } .viz-svg { width: min(70%, 14rem); margin: 0 auto; } .viz-heat-row { grid-template-columns: 5rem repeat(4, 1fr); } } /* ---------- study: root constellation (scripts/viz-roots.js) ---------- */ #fi-roots-viz { border-top: 1px solid var(--rule); padding: clamp(2rem, 5vw, 4rem) 0; } .rootviz-stage { margin-top: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--rule); border-radius: 3px; background: radial-gradient(120% 90% at 50% 38%, rgba(196, 163, 92, 0.05), transparent 70%), linear-gradient(180deg, rgba(17, 13, 10, 0.55), rgba(7, 6, 5, 0.35)); overflow: hidden; } .rootviz-svg { width: 100%; height: auto; display: block; overflow: visible; } .rootviz-link { stroke: var(--rule-strong); stroke-width: 1; opacity: 0.5; transition: stroke 0.25s ease, opacity 0.25s ease; } .rootviz-sat { fill: var(--cream-faint); transition: fill 0.25s ease, r 0.2s ease, opacity 0.25s ease; } .rootviz-core { fill: rgba(196, 163, 92, 0.1); stroke: var(--gold); stroke-width: 1.1; transition: fill 0.25s ease, stroke 0.25s ease; } .rootviz-label { fill: var(--cream); font-family: "Noto Serif Hebrew", var(--disp); font-size: 1.05rem; font-weight: 600; pointer-events: none; } .rootviz-count { fill: var(--cream-faint); font-family: "DM Mono", var(--ff-mono, monospace); font-size: 0.62rem; letter-spacing: 0.04em; pointer-events: none; } .rootviz-node { cursor: pointer; transition: opacity 0.25s ease; } .rootviz-node:hover .rootviz-core { fill: rgba(196, 163, 92, 0.2); } .rootviz-node:hover .rootviz-sat { fill: var(--cream-dim); } .rootviz-node:focus-visible { outline: none; } .rootviz-node:focus-visible .rootviz-core { stroke: var(--cream); stroke-width: 1.8; } .rootviz-node.dim { opacity: 0.32; } .rootviz-node.on .rootviz-core { fill: var(--gold); stroke: var(--gold); } .rootviz-node.on .rootviz-label { fill: var(--ink); } .rootviz-node.on .rootviz-sat { fill: var(--gold); } .rootviz-node.on .rootviz-link { stroke: var(--gold); opacity: 0.85; } .rootviz-node.on .rootviz-count { fill: var(--gold); } #rootviz-clear { margin-left: 0.6rem; padding: 0.25rem 0.6rem; color: var(--cream-dim); font-family: var(--disp); font-size: 0.8rem; font-style: normal; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } #rootviz-clear:hover { color: var(--gold); border-color: var(--gold); } /* highlighted lemma rows when a root is selected */ .word-table tr.root-hit td { background: rgba(196, 163, 92, 0.09); } .word-table tr.root-hit .rank { color: var(--gold); } .word-table tr.root-hit .hebrew-lemma { color: var(--gold); } @media (prefers-reduced-motion: reduce) { .rootviz-link, .rootviz-sat, .rootviz-core, .rootviz-node { transition: none; } } @media (max-width: 820px) { .rootviz-label { font-size: 0.92rem; } } /* ---------- study: frequency river (scripts/viz-river.js) ---------- */ .river-section { margin-top: clamp(2rem, 5vw, 4rem); } .river-readout { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.9rem; min-height: 1.6rem; } .river-readout-num { color: var(--gold); font-family: "DM Mono", var(--ff-mono, monospace); font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .river-readout-lab { color: var(--cream-dim); font-style: italic; font-size: clamp(0.9rem, 1.1vw, 1rem); } .river-svg { width: 100%; height: clamp(46px, 7vw, 64px); display: block; border: 1px solid var(--rule); border-radius: 2px; background: rgba(236, 227, 211, 0.02); } .river-rect { cursor: pointer; outline: none; transition: opacity 0.18s ease; } .river-svg:hover .river-rect:not(.on), .river-svg:focus-within .river-rect:not(.on) { opacity: 0.5; } .river-rect.on { opacity: 1; stroke: var(--cream); stroke-width: 1.2; paint-order: stroke; } .river-axis { position: relative; height: 1.2rem; margin-top: 0.4rem; } .river-tick { position: absolute; transform: translateX(-50%); color: var(--cream-faint); font-family: "DM Mono", var(--ff-mono, monospace); font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .word-table tr.river-hl > td { background: rgba(196, 163, 92, 0.12); } .word-table tr.river-hl > td:first-child { box-shadow: inset 2px 0 0 var(--gold); } @media (prefers-reduced-motion: reduce) { .river-rect { transition: none; } } /* ---------- study: local-time dateline ---------- */ .study-hero { position: relative; } .study-clock { position: absolute; top: clamp(0.1rem, 0.8vw, 0.6rem); left: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; pointer-events: none; } .clock-citywrap { position: relative; display: inline-block; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.05; } .clock-en { position: absolute; left: -0.03em; bottom: -0.04em; z-index: 0; font-family: var(--disp); font-size: 1.7em; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(236, 227, 211, 0.08); white-space: nowrap; pointer-events: none; } .clock-native { position: relative; z-index: 1; display: block; color: var(--cream); font-size: 1em; line-height: 1.05; } .clock-native[lang="ja"] { font-family: "Noto Serif JP", var(--disp); } .clock-native[lang="zh"] { font-family: "Noto Serif TC", var(--disp); } .clock-native[lang="ko"] { font-family: "Noto Serif KR", var(--disp); } .clock-native[lang="he"] { font-family: "Noto Serif Hebrew", var(--disp); } .clock-native[lang="ru"] { font-family: "Noto Serif", var(--disp); font-style: italic; } .clock-time { margin-top: 0.5rem; color: var(--gold); font-style: italic; font-size: clamp(0.95rem, 1.5vw, 1.25rem); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; white-space: nowrap; } @media (max-width: 820px) { .study-clock { position: static; align-items: flex-start; margin: 0 0 1.6rem; } .clock-citywrap { font-size: 1.55rem; } } /* ---------- Hangul syllable-decomposition widget (scripts/viz-hangul.js) ---------- */ #fi-hangul { display: block; } .hj-grid { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; } .hj-input-wrap { display: flex; flex-direction: column; gap: 0.7rem; } .hj-input-label { color: var(--gold); font-family: "DM Mono", var(--ff-mono, monospace); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; } .hj-input { width: 100%; padding: 0.55rem 0.7rem; color: var(--cream); font-family: "Noto Serif KR", var(--disp); font-size: 2.4rem; line-height: 1; text-align: center; background: rgba(236, 227, 211, 0.04); border: 1px solid var(--rule-strong); border-radius: 4px; transition: border-color 0.2s ease; } .hj-input:focus { outline: 1px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } .hj-samples { display: flex; flex-wrap: wrap; gap: 0.4rem; } .hj-sample { min-width: 2.2rem; padding: 0.3rem 0.45rem; color: var(--cream-dim); font-family: "Noto Serif KR", var(--disp); font-size: 1.15rem; line-height: 1; background: transparent; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .hj-sample:hover, .hj-sample:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; } .hj-block-wrap { min-width: 0; } .hj-svg { width: 100%; height: auto; max-width: 560px; display: block; } .hj-empty-text { fill: var(--cream-faint); font-family: var(--disp); font-style: italic; font-size: 15px; } .hj-block-box { fill: rgba(196, 163, 92, 0.06); stroke: var(--gold); stroke-width: 1; } .hj-block-glyph { fill: var(--cream); font-family: "Noto Serif KR", var(--disp); font-size: 74px; } .hj-block-cap { fill: var(--cream-faint); font-family: "DM Mono", var(--ff-mono, monospace); font-size: 11px; letter-spacing: 0.06em; } .hj-arrow { stroke: var(--rule-strong); stroke-width: 1.4; } .hj-arrow-head { fill: var(--rule-strong); } .hj-card { cursor: pointer; } .hj-card-box { fill: rgba(236, 227, 211, 0.035); stroke: var(--rule-strong); stroke-width: 1; transition: stroke 0.18s ease, fill 0.18s ease; } .hj-card-role { fill: var(--gold); font-family: "DM Mono", var(--ff-mono, monospace); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; } .hj-card-glyph { fill: var(--cream); font-family: "Noto Serif KR", var(--disp); font-size: 46px; transition: fill 0.18s ease; } .hj-card-rom { fill: var(--cream-dim); font-family: var(--disp); font-style: italic; font-size: 13px; } .hj-card:hover .hj-card-box, .hj-card:focus-visible .hj-card-box { stroke: var(--gold); fill: rgba(196, 163, 92, 0.08); } .hj-card:focus-visible { outline: none; } .hj-card.on .hj-card-box { stroke: var(--gold); stroke-width: 1.6; fill: rgba(196, 163, 92, 0.14); } .hj-card.on .hj-card-glyph { fill: var(--gold); } #hj-clear { margin-left: 0.6rem; padding: 0.25rem 0.6rem; color: var(--cream-dim); font-family: var(--disp); font-size: 0.8rem; font-style: normal; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } #hj-clear:hover { color: var(--gold); border-color: var(--gold); } /* our hide class — independent of is-filtered (search) and viz-off (category) */ .word-table tr.hj-off { display: none !important; } @media (max-width: 720px) { .hj-grid { grid-template-columns: 1fr; } } /* ---------- study page: related sub-pages ---------- */ .study-related{display:flex;flex-wrap:wrap;gap:0.8rem;margin:1.5rem 0 0;} .related-card{flex:1 1 12rem;min-width:10.5rem;display:flex;flex-direction:column;gap:0.1rem;padding:0.9rem 1.05rem; background:rgba(236,227,211,0.03);border:1px solid rgba(236,227,211,0.12);border-radius:4px;text-decoration:none; transition:border-color .2s ease,background .2s ease,transform .15s ease;} .related-card:hover{border-color:var(--gold,#c4a35c);background:rgba(196,163,92,0.07);transform:translateY(-2px);} .rc-native{font-family:"Noto Serif JP","Noto Serif Hebrew","Noto Serif KR","Noto Serif TC",var(--ff-disp,Georgia),serif; font-size:1.55rem;line-height:1;color:var(--gold,#c4a35c);} .rc-label{margin-top:0.35rem;color:var(--cream,#ece3d3);font-family:var(--ff-disp,Georgia),serif;font-size:1.02rem;} .rc-sub{color:var(--cream,#ece3d3);opacity:0.5;font-size:0.77rem;line-height:1.4;} @media (max-width:600px){.study-related{flex-direction:column}.related-card{flex:1 1 auto}} /* ── Compact 300-list rows on mobile: narrow by default, tap a word to expand ── Restores the slim row form-factor; secondary fields stay hidden until the user taps the row (.is-open), then the full detail unfolds. Desktop keeps the normal table. Driven by scripts/row-detail.js. */ @media (max-width: 700px) { .word-table tr { cursor: pointer; padding-right: 1.7rem; } .word-table tbody tr::after { content: "\203A"; position: absolute; right: 0.45rem; top: 1.1rem; color: var(--gold); font-size: 1.15rem; line-height: 1; opacity: 0.6; transition: transform 0.22s ease, opacity 0.2s; } .word-table tbody tr:hover::after { opacity: 1; } .word-table tbody tr.is-open::after { transform: rotate(90deg); opacity: 1; } /* secondary fields collapsed until the row is opened */ .japanese-word-table td:nth-child(4), .chinese-word-table td:nth-child(3), .korean-word-table td:nth-child(5), .korean-word-table td:nth-child(6), .russian-word-table td:nth-child(5), .russian-word-table td:nth-child(6), .hebrew-word-table td:nth-child(5), .hebrew-word-table td:nth-child(6) { display: none; } .word-table tbody tr.is-open td { display: block; } .word-table tbody tr.is-open td:nth-child(4), .word-table tbody tr.is-open td:nth-child(5), .word-table tbody tr.is-open td:nth-child(6) { margin-top: 0.65rem; } } /* ───────────────── Homepage: living-index sections (2026-05-31) ───────────── */ /* real anchors on the language list (no empty overlay ghosts) */ .tongue-link { display: contents; color: inherit; text-decoration: none; } .tongue.has-link .native, .tongue.has-link .meta { pointer-events: auto; } /* script + character rails */ .home-rail { margin: clamp(2.4rem, 6vw, 4rem) 0 0; } .rail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem; margin-top: 1rem; } .rail-grid-2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .rail-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.1rem 1.15rem 1.25rem; text-decoration: none; background: rgba(236,227,211,0.025); border: 1px solid var(--rule); border-radius: 6px; transition: transform 0.18s ease, border-color 0.18s, background 0.18s; } .rail-card:hover, .rail-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); background: rgba(196,163,92,0.06); outline: none; } .rail-glyph { font-size: 2.1rem; line-height: 1; color: var(--cream); margin-bottom: 0.2rem; } .rail-card:hover .rail-glyph { color: var(--gold); } .rail-name { font-family: var(--disp, Georgia), serif; font-size: 1.15rem; color: var(--cream); } .rail-sub { font-size: 0.76rem; color: var(--cream-faint, #847e76); line-height: 1.45; } .rail-foot { margin: 0.9rem 0 0; } .rail-foot a { color: var(--gold); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.02em; } .rail-foot a:hover { border-bottom: 1px solid var(--gold); } /* sound / under-construction copy bands */ .home-note-band, .notify-band { margin: clamp(2.2rem, 5vw, 3.4rem) 0 0; } .band-copy { max-width: 44rem; margin: 0.7rem 0 0; color: var(--cream); opacity: 0.82; font-size: 0.98rem; line-height: 1.62; } /* email capture */ .notify-form { display: flex; gap: 0.55rem; margin-top: 1.1rem; max-width: 30rem; flex-wrap: wrap; } .notify-form input { flex: 1 1 14rem; min-width: 0; padding: 0.7rem 0.9rem; background: rgba(236,227,211,0.04); border: 1px solid var(--rule-strong, rgba(236,227,211,0.2)); border-radius: 5px; color: var(--cream); font-family: inherit; font-size: 0.95rem; } .notify-form input:focus { outline: 1px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } .notify-form button { padding: 0.7rem 1.25rem; border: 1px solid var(--gold); border-radius: 5px; background: rgba(196,163,92,0.12); color: var(--cream); font-family: inherit; font-size: 0.9rem; letter-spacing: 0.02em; cursor: pointer; transition: background 0.18s, transform 0.12s; } .notify-form button:hover { background: rgba(196,163,92,0.24); } .notify-form button:disabled { opacity: 0.5; cursor: default; } .notify-status { margin: 0.6rem 0 0; font-size: 0.84rem; min-height: 1.1em; color: var(--cream-faint, #847e76); } .notify-status.is-ok { color: var(--gold); } .notify-status.is-err { color: #c98b78; } /* ───────────── Chinese-300: Tones & pinyin primer ───────────── */ .zh-tones-section { display: block; } .zh-tones-head { max-width: 48rem; } .zh-tones-lede { margin: 0.6rem 0 0; color: var(--cream); opacity: 0.84; line-height: 1.6; font-size: 0.98rem; } .zh-tones-lede strong { color: var(--gold); font-weight: 500; letter-spacing: 0.03em; } .zh-tone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.7rem; margin: 1.3rem 0 0; } .zh-tone { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.1rem 0.8rem 1.2rem; text-align: center; background: rgba(236,227,211,0.025); border: 1px solid var(--rule); border-radius: 6px; transition: border-color 0.18s, transform 0.18s, background 0.18s; } .zh-tone:hover { border-color: var(--gold); transform: translateY(-2px); background: rgba(196,163,92,0.05); } .zh-tone-num { font-family: var(--ff-mono, monospace); font-size: 0.7rem; color: var(--gold); border: 1px solid var(--rule-strong, rgba(236,227,211,0.2)); border-radius: 50%; width: 1.5rem; height: 1.5rem; line-height: 1.42rem; } .zh-tone-curve { width: 44px; height: 28px; } .zh-tone-curve path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .zh-tone-curve circle { fill: var(--gold); } .zh-tone-py { font-size: 1.5rem; color: var(--cream); line-height: 1; margin-top: 0.15rem; } .zh-tone-char { font-family: "Noto Serif TC", var(--disp), serif; font-size: 1.7rem; color: var(--cream); line-height: 1.05; } .zh-tone-gloss { font-size: 0.82rem; color: var(--cream); opacity: 0.78; } .zh-tone-name { font-family: var(--ff-mono, monospace); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-faint, #847e76); } .zh-pinyin-note { max-width: 52rem; margin: 1.3rem 0 0; } .zh-pinyin-note p { color: var(--cream); opacity: 0.82; line-height: 1.62; font-size: 0.94rem; } .zh-pinyin-note strong { color: var(--gold); font-weight: 500; } .zh-pinyin-note span[lang="zh"] { color: var(--cream); opacity: 1; font-style: normal; } /* ───────────── Korean-300: Particles (조사) primer ───────────── */ .ko-particles-head { max-width: 48rem; } .ko-particles-lede { margin: 0.6rem 0 0; color: var(--cream); opacity: 0.84; line-height: 1.6; font-size: 0.98rem; } .ko-particles-lede strong { color: var(--gold); font-weight: 500; } .ko-particle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.7rem; margin: 1.3rem 0 0; } .ko-particle { display: flex; flex-direction: column; gap: 0.22rem; padding: 0.95rem 1rem 1.05rem; background: rgba(236,227,211,0.025); border: 1px solid var(--rule); border-radius: 6px; transition: border-color 0.18s, transform 0.18s, background 0.18s; } .ko-particle:hover { border-color: var(--gold); transform: translateY(-2px); background: rgba(196,163,92,0.05); } .ko-p-form { font-family: "Noto Serif KR", var(--disp), serif; font-size: 1.5rem; color: var(--cream); line-height: 1; } .ko-p-rom { font-family: var(--ff-mono, monospace); font-size: 0.72rem; color: var(--gold); opacity: 0.9; } .ko-p-fn { font-size: 0.8rem; color: var(--cream); opacity: 0.78; } .ko-p-ex { font-family: "Noto Serif KR", var(--disp), serif; font-size: 0.92rem; color: var(--cream); opacity: 0.92; margin-top: 0.15rem; } .ko-p-ex b { color: var(--gold); font-weight: 600; } /* ============================================================ HOME — Tanakh feature band (flagship: spoken reader) ============================================================ */ .home-tanakh { margin: 2.4rem 0 0; } .tanakh-feature { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.8rem); padding: clamp(1.3rem, 3.5vw, 2rem) clamp(1.3rem, 4vw, 2.4rem); border: 1px solid var(--rule-strong); border-radius: 14px; background: radial-gradient(120% 140% at 92% 0%, rgba(196,163,92,0.10), transparent 60%), linear-gradient(180deg, rgba(20,18,16,0.6), rgba(11,10,8,0.6)); text-decoration: none; color: inherit; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .tanakh-feature:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 14px 40px -22px rgba(196,163,92,0.55); } .tanakh-feature .tk-glyph { font-family: "Noto Serif Hebrew", serif; direction: rtl; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; color: var(--gold); flex: none; } .tanakh-feature .tk-text { display: flex; flex-direction: column; gap: 0.3rem; } .tanakh-feature .tk-name { font-family: var(--disp), serif; font-size: clamp(1.15rem, 3.4vw, 1.5rem); font-weight: 600; color: var(--cream); } .tanakh-feature .tk-sub { font-size: clamp(0.85rem, 2.4vw, 0.96rem); line-height: 1.5; color: var(--cream); opacity: 0.74; max-width: 52ch; } .tanakh-feature .tk-go { margin-left: auto; flex: none; color: var(--gold); font-size: 1.5rem; transition: transform 0.25s; } .tanakh-feature:hover .tk-go { transform: translateX(4px); } @media (max-width: 560px) { .tanakh-feature { flex-wrap: wrap; } .tanakh-feature .tk-go { display: none; } } /* Inline call-to-action link inside prose (e.g. Hebrew-300 → Tanakh invite) */ .prose-cta { display: inline-block; margin-top: 0.4rem; font-family: var(--disp), serif; font-size: 1.05rem; font-weight: 600; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--rule-strong); transition: color 0.2s, border-color 0.2s; } .prose-cta:hover { color: var(--cream); border-color: var(--gold); }