@font-face {
font-family: "Pretendard Variable";
font-style: normal;
font-weight: 45 920;
font-display: swap;
src: url("/assets/fonts/PretendardVariable.woff2") format("woff2");
}
@font-face {
font-family: "MaruBuri";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/MaruBuri-Regular.woff2") format("woff2");
}
@font-face {
font-family: "MaruBuri";
font-style: normal;
font-weight: 700 900;
font-display: swap;
src: url("/assets/fonts/MaruBuri-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Pretendard Fallback";
src: local("Malgun Gothic"), local("Apple SD Gothic Neo");
size-adjust: 86.4%;
ascent-override: 110.16%;
descent-override: 27.91%;
line-gap-override: 0%;
}
@font-face {
font-family: "MaruBuri Fallback";
src: local("Batang"), local("AppleMyungjo");
size-adjust: 97%;
ascent-override: 99.48%;
descent-override: 37.22%;
line-gap-override: 9.28%;
}
:root {
--gb-bg: #ffffff;
--gb-paper: #ffffff;
--gb-paper-soft: #f6f8f7;
--gb-ink: #1a2a2e;
--gb-text: #2c3b3f;
--gb-muted: #5a6b6e;
--gb-faint: #5f7475;
--gb-line: #dce3e1;
--gb-line-strong: #c2cec9;
--gb-brand: #1e6b6b;
--gb-brand-dark: #0f4747;
--gb-brand-soft: #e3eeec;
--gb-brand-ring: rgba(30, 107, 107, .22);
--gb-blue: #2f7e7a;
--gb-blue-dark: #155555;
--gb-blue-soft: #e1edeb;
--gb-chip: #eef3f1;
--gb-chip-hover: #e1ebe8;
--gb-coral: #c0863c;
--gb-coral-soft: #f5ecdb;
--gb-gold: #9a7a3e;
--gb-gold-soft: #f3ecdc;
--gb-violet: #5f6699;
--gb-violet-soft: #ebecf5;
--gb-amber: #c99a4e;
--gb-amber-soft: #f5ecda;
--gb-slate: #0e2024;
--gb-focus: #1e6b6b;
--gb-radius: 12px;
--gb-radius-sm: 8px;
--gb-gap-chip: 8px;
--gb-gap-metric: 12px;
--gb-gap-card: 16px;
--gb-pad-card: 24px;
--gb-pad-card-compact: 18px;
--gb-shell: 1320px;
--gb-content: 1320px;
--gb-gutter: 20px;
--gb-header-h: 74px;
--gb-shadow: 0 24px 60px -46px rgba(15, 47, 47, 0.42);
--gb-shadow-soft: 0 14px 32px -26px rgba(15, 47, 47, 0.22);
--gb-shadow-hover: 0 22px 44px -32px rgba(15, 47, 47, 0.3);
--gb-card-surface: rgba(255, 255, 255, .97);
--gb-card-border: rgba(180, 194, 189, .92);
--gb-current: rgba(30, 107, 107, .28);
--gb-ui: "Pretendard Variable", Pretendard, "Pretendard Fallback", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--gb-serif: "MaruBuri", "MaruBuri Fallback", "Nanum Myeongjo", "Noto Serif KR", "AppleMyungjo", "Batang", serif;
--gb-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
color-scheme: light;
}
* { box-sizing: border-box; }
html { min-width: 0; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: calc(var(--gb-header-h) + 20px); scrollbar-gutter: stable; }
body {
margin: 0;
min-width: 0;
padding-top: var(--gb-header-h);
overflow-x: hidden;
background: var(--gb-bg);
color: var(--gb-ink);
font-family: var(--gb-ui);
font-size: 16px;
line-height: 1.72;
letter-spacing: 0;
word-break: keep-all;
overflow-wrap: anywhere;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; text-underline-offset: 3px; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; min-width: 0; max-width: 100%; }
button { letter-spacing: 0; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
img, video, canvas, iframe { max-width: 100%; }
iframe { border: 0; }
.adsbygoogle { display: block; max-width: 100%; overflow: hidden; }
p, li, blockquote { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: rgba(30,107,107,.16); }
html[data-theme="dark"] ::selection { background: rgba(111,202,184,.30); }
::highlight(gb-tts) { background-color: rgba(30,107,107,.18); }
html[data-theme="dark"] ::highlight(gb-tts) { background-color: rgba(111,202,184,.28); }
:focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 3px; }
.icon {
width: 18px;
height: 18px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.type-icon {
width: 30px;
height: 30px;
flex: none;
display: inline-grid;
place-items: center;
border: 1px solid rgba(30,107,107,.12);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.18)), var(--gb-blue-soft);
color: var(--gb-blue-dark);
box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 20px -18px currentColor;
}
.type-icon .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.type-icon-quote {
border-color: rgba(30,107,107,.2);
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.16)), var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
.type-icon-goodtext {
border-color: rgba(192,134,60,.22);
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.14)), var(--gb-coral-soft);
color: var(--gb-coral);
}
.type-icon-emotion {
border-color: rgba(201,154,78,.24);
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.14)), var(--gb-amber-soft);
color: color-mix(in srgb, var(--gb-amber) 62%, var(--gb-ink));
}
.type-icon-greeting {
border-color: rgba(154,122,62,.24);
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.14)), var(--gb-gold-soft);
color: var(--gb-gold);
}
.type-icon-idiom {
border-color: rgba(95,102,153,.22);
background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.16)), var(--gb-violet-soft);
color: var(--gb-violet);
}
.type-icon-proverb {
border-color: rgba(30,107,107,.2);
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.12)), var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
.type-icon-en_quote {
border-color: rgba(47,126,122,.2);
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.14)), var(--gb-blue-soft);
color: var(--gb-blue);
}
.skip,
.gb-skip {
position: fixed;
left: 50%;
top: -64px;
z-index: 100;
transform: translateX(-50%);
border-radius: 0 0 var(--gb-radius) var(--gb-radius);
background: var(--gb-brand);
color: #fff;
font-weight: 900;
padding: 10px 16px;
}
.skip:focus,
.gb-skip:focus { top: 0; }
#content { scroll-margin-top: calc(var(--gb-header-h) + 20px); }
.top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
width: 100%;
min-height: var(--gb-header-h);
display: flex;
align-items: center;
gap: clamp(10px, 1.2vw, 16px);
border-bottom: 1px solid var(--gb-line);
background: rgba(255,255,255,.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 12px 28px -30px rgba(15,47,47,.38);
padding: 0 max(var(--gb-gutter), calc((100% - var(--gb-shell)) / 2));
}
.brand {
flex: none;
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
font-weight: 950;
}
.brand > span:first-child,
.brand-mark {
width: 38px;
height: 38px;
flex: none;
border: 0;
border-radius: 11px;
display: grid;
place-items: center;
background: transparent;
color: #fff;
box-shadow: none;
overflow: hidden;
}
.brand > span:last-child { min-width: 0; }
.brand img,
.brand-mark img {
width: 38px;
height: 38px;
border-radius: 12px;
box-shadow: 0 15px 24px -19px rgba(15,47,47,.55);
}
.brand-copy { display: block; min-width: 0; }
.brand strong {
display: block;
font-family: var(--gb-serif);
font-size: 18px;
font-weight: 700;
line-height: 1;
letter-spacing: -.04em;
white-space: nowrap;
}
.brand small { display: block; color: var(--gb-muted); font-size: 11px; font-weight: 800; line-height: 1.15; margin-top: 3px; }
.top nav {
flex: 1;
display: flex;
justify-content: flex-start;
gap: 3px;
min-width: 0;
}
.top nav a,
.nav-link {
position: relative;
border-radius: 10px;
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 900;
min-height: 40px;
padding: 5px 9px 5px 7px;
white-space: nowrap;
transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.top nav a svg,
.nav-link svg {
width: 16px;
height: 16px;
box-sizing: content-box;
flex: none;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: #526c70;
padding: 4px;
box-shadow: none;
transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.top nav a:hover,
.nav-link:hover,
.nav-menu[open] > .nav-link {
background: rgba(30,107,107,.035);
color: var(--gb-brand-dark);
}
.top nav a:hover svg,
.nav-link:hover svg,
.nav-menu[open] > .nav-link svg {
border-color: rgba(30,107,107,.1);
background: rgba(30,107,107,.07);
color: var(--gb-brand-dark);
box-shadow: none;
}
.top nav a[aria-current="page"],
.nav-link[aria-current="page"] {
background: transparent;
color: var(--gb-brand-dark);
font-weight: 900;
}
.top nav a[aria-current="page"]::after,
.nav-link[aria-current="page"]::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 2px;
height: 2px;
border-radius: 999px;
background: var(--gb-brand);
}
.top nav a[aria-current="page"] svg,
.nav-link[aria-current="page"] svg {
border-color: rgba(15,71,71,.18);
background: var(--gb-brand);
color: #fff;
box-shadow: 0 9px 18px -14px rgba(15,71,71,.65);
}
.nav-menu { position: relative; display: inline-flex; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary.nav-link {
padding-right: 6px;
}
.nav-menu > summary .icon:last-child {
position: absolute;
right: -2px;
top: 50%;
width: 10px;
height: 10px;
background: transparent;
padding: 0;
color: var(--gb-faint);
transform: translateY(-50%);
transition: transform .18s ease;
}
.nav-menu[open] > summary .icon:last-child { transform: translateY(-50%) rotate(180deg); }
.nav-menu-panel {
position: absolute;
top: calc(100% + 9px);
left: 0;
z-index: 60;
min-width: 220px;
max-width: calc(100vw - 24px);
display: grid;
gap: 2px;
padding: 8px;
border: 1px solid var(--gb-card-border);
border-radius: 14px;
background: var(--gb-paper);
box-shadow: 0 18px 42px -28px rgba(15,47,47,.36);
}
.nav-menu:not([open]) > .nav-menu-panel,
.bottom-menu:not([open]) > .bottom-menu-panel {
display: none;
}
.nav-menu-title {
display: block;
padding: 5px 10px 2px;
color: var(--gb-faint);
font-size: 11px;
font-weight: 950;
line-height: 1.2;
text-transform: uppercase;
}
.nav-menu-title-more {
border-top: 1px solid var(--gb-line);
margin-top: 4px;
padding-top: 10px;
}
.nav-menu-panel a {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: var(--gb-radius-sm);
color: var(--gb-text);
font-size: 14px;
font-weight: 800;
min-height: 40px;
padding: 8px 10px;
white-space: nowrap;
transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-menu-panel a:hover {
background: rgba(30,107,107,.045);
color: var(--gb-brand-dark);
transform: translateX(1px);
}
.nav-menu-panel .type-icon { width: 24px; height: 24px; }
.nav-menu-panel a > .icon {
width: 14px;
height: 14px;
box-sizing: content-box;
border: 1px solid rgba(30,107,107,.12);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-brand-dark);
padding: 4px;
}
.nav-menu-panel a:hover > .icon {
border-color: rgba(30,107,107,.18);
background: rgba(30,107,107,.06);
}
.nav-menu-all {
margin-top: 0;
padding-top: 8px !important;
}
.nav-menu-all .icon { width: 14px; height: 14px; }
.lang {
flex: none;
display: inline-flex;
align-items: center;
gap: 2px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: rgba(255,255,255,.76);
padding: 3px;
}
.lang a {
min-width: 28px;
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--gb-muted);
font-size: 11px;
font-weight: 950;
line-height: 1;
padding: 6px 8px;
text-align: center;
white-space: nowrap;
transition: background .16s ease, color .16s ease;
}
.lang a:not([aria-current="true"]):hover {
background: rgba(255,255,255,.92);
color: var(--gb-brand-dark);
}
.lang a.lang-home,
.lang a.lang-en-quote { min-width: 64px; }
.lang a[aria-current="true"] {
background: var(--gb-blue-dark);
color: #fff;
box-shadow: 0 10px 18px -14px rgba(38,60,79,.86);
}
.theme-toggle {
flex: none;
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: rgba(255,255,255,.82);
color: var(--gb-brand-dark);
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.theme-toggle:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip);
transform: translateY(-1px);
}
}
.theme-toggle .icon {
grid-area: 1 / 1;
width: 17px;
height: 17px;
}
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
.mobile-search-link {
flex: none;
width: 38px;
height: 38px;
display: none;
place-items: center;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-brand-dark);
}
.mobile-search-link .icon { width: 17px; height: 17px; }
main,
.main {
width: min(var(--gb-content), calc(100% - var(--gb-gutter) * 2));
margin: 0 auto;
}
.hero {
margin: 14px 0 12px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
align-items: start;
gap: 16px;
}
.hero-copy,
.hero-visual,
.live-board,
.section,
.page-hero,
.article,
.footer,
.guide-band,
.static-layout { min-width: 0; }
.hero-copy {
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
var(--gb-paper);
box-shadow: 0 18px 42px -36px rgba(15,47,47,.3);
padding: clamp(26px, 3vw, 38px);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.hero-focused {
grid-template-columns: minmax(0, 1fr);
}
.hero-focused .hero-copy { width: 100%; }
.home-hero-copy {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
align-items: center;
gap: clamp(32px, 4vw, 64px);
}
.home-hero-intro,
.home-hero-search { min-width: 0; }
.home-hero-intro .lead { max-width: 660px; }
.home-hero-intro .hero-current {
max-width: none;
margin-bottom: 0;
}
.home-hero-search {
border-left: 1px solid var(--gb-line);
padding-left: clamp(28px, 3vw, 48px);
}
.home-hero-search-label {
margin: 0;
color: var(--gb-muted);
font-size: 14px;
font-weight: 850;
line-height: 1.5;
}
.home-hero-search .search {
width: 100%;
margin-top: 12px;
}
.page-home .hero { margin-bottom: 0; }
.page-home .section { padding-block: 26px; }
.eyebrow {
margin: 0 0 10px;
color: var(--gb-blue-dark);
font-size: 12px;
font-weight: 950;
letter-spacing: .04em;
text-transform: uppercase;
}
.hero h1,
.page-hero h1,
.article h1 {
max-width: 920px;
margin: 0;
color: var(--gb-ink);
font-size: clamp(36px, 4vw, 48px);
font-weight: 850;
line-height: 1.1;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.hero h1 {
font-family: var(--gb-serif);
font-size: clamp(36px, 3.9vw, 48px);
font-weight: 700;
letter-spacing: -.035em;
}
.page-hero h1,
.article h1 { font-size: clamp(32px, 3.4vw, 42px); }
.article h1 { max-width: 100%; }
.article[data-type="quote"] h1,
.article[data-type="en_quote"] h1 {
max-width: 920px;
font-family: var(--gb-serif);
font-size: 34px;
font-weight: 700;
line-height: 1.22;
}
.article[data-type="en_quote"] h1 {
font-size: 32px;
line-height: 1.24;
}
.lead,
.hero-text,
.page-hero p {
max-width: 720px;
margin: 18px 0 0;
color: var(--gb-text);
font-size: 17px;
line-height: 1.78;
font-family: var(--gb-serif);
}
.hero .hero-text {
max-width: 680px;
margin-top: 14px;
font-size: 16px;
line-height: 1.68;
}
.search {
width: min(100%, 700px);
min-height: 54px;
margin-top: 18px;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border: 1px solid rgba(171, 185, 202, .86);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.96)),
var(--gb-paper);
box-shadow: 0 18px 42px -34px rgba(15,23,42,.46);
padding: 6px;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.search:focus-within {
border-color: rgba(53,105,134,.72);
box-shadow:
0 0 0 4px rgba(53,105,134,.12),
0 22px 48px -34px rgba(15,23,42,.5);
transform: translateY(-1px);
}
.search label {
min-width: 0;
display: block;
}
.search label span,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
.search input {
width: 100%;
height: 40px;
border: 0;
outline: 0;
background: transparent;
color: var(--gb-ink);
font-size: 16px;
padding: 0 14px;
text-overflow: ellipsis;
}
.search input::placeholder { color: var(--gb-faint); }
.search button,
.button,
.primary-link {
min-height: 40px;
min-width: 96px;
border: 0;
border-radius: var(--gb-radius);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
var(--gb-brand);
color: #fff;
cursor: pointer;
font-weight: 950;
padding: 0 17px;
white-space: nowrap;
box-shadow: 0 16px 28px -22px rgba(21,128,98,.92);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.search button svg,
.button svg,
.primary-link svg,
.secondary-link svg,
.text-link svg,
.card-link svg {
flex: none;
stroke-width: 2.25;
}
.search button .icon { width: 16px; height: 16px; }
.search button:hover,
.button:hover,
.primary-link:hover {
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
var(--gb-brand-dark);
box-shadow: 0 18px 32px -22px rgba(21,128,98,.92);
transform: translateY(-1px);
}
.search button:active,
.button:active,
.primary-link:active {
transform: translateY(1px);
box-shadow: 0 8px 16px -14px rgba(21,128,98,.92);
}
.search-suggest-panel[hidden] { display: none; }
.search-suggest-panel {
position: absolute;
z-index: 45;
top: calc(100% + 8px);
left: 0;
right: 0;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.98);
box-shadow: 0 18px 36px -28px rgba(15,23,42,.42);
display: grid;
gap: 10px;
padding: 12px;
}
.search-suggest-panel strong {
color: var(--gb-faint);
font-size: 12px;
font-weight: 950;
line-height: 1;
}
.search-suggest-panel div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.search-suggest-panel a {
min-height: 32px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-brand-dark);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 850;
line-height: 1.2;
padding: 7px 10px;
}
.search-suggest-panel a:hover,
.search-suggest-panel a.is-active {
border-color: var(--gb-line-strong);
background: var(--gb-chip-hover);
}
.search-suggest-panel a.is-active {
outline: 2px solid var(--gb-focus);
outline-offset: 1px;
}
.search-suggest-panel a .icon { width: 14px; height: 14px; }
.search-suggest-panel.is-empty::after {
content: "추천어가 없습니다";
color: var(--gb-muted);
font-size: 13px;
font-weight: 800;
}
html[lang="en"] .search-suggest-panel.is-empty::after { content: "No suggestions"; }
.chips,
.chip-row {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
max-width: 100%;
gap: var(--gb-gap-chip);
}
.chips a:not(.primary-link):not(.secondary-link),
.chips > span,
.chip-row a:not(.primary-link):not(.secondary-link),
.category-card a {
min-width: 0;
max-width: 100%;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 850;
line-height: 1.2;
padding: 8px 12px;
overflow-wrap: anywhere;
white-space: normal;
transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.chips a:not(.primary-link):not(.secondary-link):hover,
.chip-row a:not(.primary-link):not(.secondary-link):hover,
.category-card a:hover {
border-color: var(--gb-line-strong);
color: var(--gb-blue-dark);
background: var(--gb-chip-hover);
box-shadow: 0 12px 24px -22px rgba(15,23,42,.34);
}
.connection-trail {
max-width: 820px;
margin-top: 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.connection-trail > span {
color: var(--gb-faint);
font-size: 12px;
font-weight: 950;
line-height: 1.2;
}
.connection-trail a {
min-height: 34px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: rgba(255,255,255,.76);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 850;
line-height: 1.2;
padding: 7px 11px;
transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.connection-trail a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip-hover);
color: var(--gb-brand-dark);
box-shadow: 0 12px 24px -22px rgba(15,23,42,.32);
}
.connection-trail .icon {
width: 15px;
height: 15px;
color: var(--gb-brand);
}
.hub-index-chips a small {
margin-left: 2px;
color: var(--gb-faint);
font-size: 11px;
font-weight: 900;
}
.hub-index-chips {
align-items: flex-start;
gap: 8px;
}
.hub-index-chips a {
min-height: 36px;
padding: 8px 11px;
}
.hub-group {
border-top: 1px solid var(--gb-line);
padding: 24px 0;
}
.hub-group:first-of-type {
border-top: 0;
}
.hub-group .section-head {
margin-bottom: 12px;
}
.hub-group .section-head h2 {
font-size: 22px;
line-height: 1.25;
}
.hub-more {
margin-top: 12px;
border-top: 1px dashed var(--gb-line);
padding-top: 12px;
}
.hub-more summary {
width: fit-content;
min-height: 40px;
border: 1px solid var(--gb-line);
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--gb-chip);
color: var(--gb-blue-dark);
cursor: pointer;
list-style: none;
padding: 8px 12px;
font-size: 13px;
font-weight: 900;
}
.hub-more summary::-webkit-details-marker { display: none; }
.hub-more summary .icon { width: 14px; height: 14px; transition: transform .18s ease; }
.hub-more[open] summary .icon { transform: rotate(180deg); }
.hub-more .hub-index-chips {
margin-top: 12px;
padding: 14px;
border-radius: 16px;
background: rgba(244,247,250,.72);
}
.top-search { display: none; }
@media (min-width: 1025px) {
.top-search {
flex: none;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
width: clamp(220px, 22vw, 292px);
max-width: 100%;
min-height: 42px;
border: 1px solid rgba(30,107,107,.18);
border-radius: 999px;
background: rgba(255,255,255,.92);
box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
padding: 3px 3px 3px 16px;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.top-search:focus-within {
border-color: rgba(30,107,107,.58);
background: #fff;
box-shadow: 0 0 0 3px rgba(30,107,107,.1);
}
.top-search input {
min-width: 0;
height: 34px;
border: 0;
background: transparent;
color: var(--gb-ink);
font-size: 16px;
font-weight: 700;
}
.top-search input::placeholder { color: var(--gb-faint); font-weight: 700; opacity: .82; }
.top-search input:focus-visible { outline: none; }
.top-search input::-webkit-search-decoration,
.top-search input::-webkit-search-cancel-button,
.top-search input::-webkit-search-results-button,
.top-search input::-webkit-search-results-decoration { display: none; }
.top-search button {
width: 36px;
height: 36px;
flex: none;
display: grid;
place-items: center;
border: 0;
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
var(--gb-brand);
color: #fff;
cursor: pointer;
box-shadow: 0 10px 18px -15px rgba(15,71,71,.75);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.top-search button:hover {
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
var(--gb-brand-dark);
box-shadow: 0 12px 20px -15px rgba(15,71,71,.82);
transform: translateY(-1px);
}
.top-search button .icon { width: 16px; height: 16px; }
.top-search .search-suggest-panel {
min-width: 280px;
top: calc(100% + 10px);
}
}
@media (min-width: 1025px) and (max-width: 1280px) {
.top {
gap: 10px;
}
.top nav {
justify-content: flex-start;
gap: 2px;
}
.top nav a,
.nav-link {
gap: 5px;
font-size: 13.5px;
padding: 5px 7px 5px 6px;
}
.top nav a svg,
.nav-link svg {
padding: 4px;
}
.top-search {
width: clamp(232px, 20vw, 260px);
padding-left: 14px;
}
.lang a { min-width: 26px; }
.theme-toggle {
width: 36px;
height: 36px;
}
}
.builder-toolbar {
width: min(100%, 700px);
margin-top: 18px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border: 1px solid rgba(30,107,107,.16);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.82);
padding: 6px;
box-shadow: var(--gb-shadow-soft);
}
.builder-toolbar label {
min-width: 0;
display: block;
}
.builder-toolbar label span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
.builder-toolbar input {
width: 100%;
height: 40px;
border: 0;
outline: 0;
background: transparent;
color: var(--gb-ink);
font-size: 16px;
padding: 0 12px;
}
.builder-toolbar button {
min-height: 40px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background: var(--gb-paper);
color: var(--gb-brand-dark);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 13px;
font-weight: 900;
padding: 0 14px;
}
.builder-toolbar button:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip);
}
.builder-toolbar .icon { width: 15px; height: 15px; }
.builder-occasion-picker {
width: min(100%, 700px);
margin-top: 10px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
}
.builder-occasion-picker label {
color: var(--gb-muted);
font-size: 13px;
font-weight: 900;
}
.builder-occasion-picker select,
.builder-occasion-picker button {
min-width: 0;
min-height: 40px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background: var(--gb-paper);
color: var(--gb-ink);
font: inherit;
}
.builder-occasion-picker select {
width: 100%;
padding: 0 36px 0 12px;
}
.builder-occasion-picker button {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--gb-brand-dark);
font-size: 13px;
font-weight: 900;
padding: 0 14px;
}
.builder-occasion-picker button:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip);
}
.builder-occasion-picker .icon { width: 15px; height: 15px; }
.builder-recent {
margin: 0 0 14px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: var(--gb-paper-soft);
padding: 14px;
}
.builder-recent-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.builder-recent-head strong {
color: var(--gb-ink);
font-size: 14px;
font-weight: 930;
}
.builder-recent-head button {
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-muted);
cursor: pointer;
font-size: 12px;
font-weight: 900;
padding: 5px 10px;
}
.builder-recent-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.builder-recent-list .copy-btn {
max-width: 100%;
white-space: normal;
text-align: left;
}
.builder-filter-empty { margin-bottom: 14px; }
.filter-bar {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
gap: var(--gb-gap-chip);
}
.filter-bar a {
min-width: 0;
max-width: 100%;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 900;
line-height: 1;
padding: 9px 12px;
overflow-wrap: anywhere;
transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.filter-bar .type-icon {
width: 22px;
height: 22px;
border-radius: 999px;
}
.filter-bar .icon { width: 14px; height: 14px; }
.filter-bar a:hover {
border-color: rgba(30,107,107,.34);
background: var(--gb-blue-soft);
color: var(--gb-blue-dark);
box-shadow: 0 12px 24px -22px rgba(15,47,47,.34);
transform: translateY(-1px);
}
.filter-bar a[aria-current="true"] {
border-color: rgba(30,107,107,.6);
background: var(--gb-blue-dark);
color: #fff;
box-shadow: 0 12px 24px -20px rgba(15,47,47,.5);
}
.search-sort {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
color: var(--gb-muted);
font-size: 13px;
font-weight: 900;
}
.search-sort > span {
color: var(--gb-faint);
font-size: 12px;
font-weight: 950;
}
.search-sort > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.search-sort a {
min-height: 32px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: rgba(255,255,255,.78);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
line-height: 1;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.search-sort .icon {
width: 14px;
height: 14px;
}
.search-sort a:hover {
border-color: rgba(30,107,107,.24);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
.search-sort a[aria-current="true"] {
border-color: transparent;
background: var(--gb-brand);
color: #fff;
}
.scroll-hint {
display: none;
margin: 5px 0 0;
color: var(--gb-faint);
font-size: 12px;
font-weight: 850;
}
.search-status {
width: min(100%, 700px);
margin-top: 14px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.78);
color: var(--gb-muted);
padding: 12px 14px;
}
.search-status > span {
width: 34px;
height: 34px;
flex: none;
display: grid;
place-items: center;
border: 1px solid rgba(30,107,107,.14);
border-radius: 999px;
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
.search-status .icon { width: 16px; height: 16px; }
.search-status strong {
display: block;
color: var(--gb-ink);
font-size: 15px;
font-weight: 930;
line-height: 1.3;
}
.search-status p {
margin: 2px 0 0;
font-size: 13px;
line-height: 1.45;
}
.search-assist {
width: min(100%, 820px);
margin-top: 14px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.search-discovery-section .chips {
margin-top: 0;
}
.search-discovery-section .connection-trail {
margin-top: 14px;
}
.assist-card {
min-width: 0;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.76);
display: grid;
gap: 8px;
padding: 14px;
}
.assist-card h3 {
margin: 0;
color: var(--gb-ink);
font-size: 15px;
font-weight: 930;
line-height: 1.35;
}
.assist-card p {
margin: 0;
color: var(--gb-muted);
font-size: 13px;
line-height: 1.55;
}
.hero-metrics {
width: min(100%, 620px);
margin-top: 14px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.hero-metrics div {
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background: rgba(255,255,255,.78);
padding: 10px 12px;
}
.hero-metrics strong {
display: block;
color: var(--gb-blue-dark);
font-size: 21px;
font-weight: 950;
line-height: 1;
}
.hero-metrics span {
display: block;
margin-top: 6px;
color: var(--gb-muted);
font-size: 12px;
font-weight: 900;
}
.hero-visual,
.live-board {
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,249,.92)),
var(--gb-paper);
color: var(--gb-ink);
overflow: hidden;
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
box-shadow: 0 18px 42px -36px rgba(15,47,47,.28);
}
.live-board {
grid-template-rows: auto auto auto;
align-content: start;
gap: 14px;
min-height: 0;
padding: clamp(18px, 2.4vw, 22px);
}
.live-board .board-head,
.live-board .board-list {
padding: 0;
}
.live-board .note {
margin: 0;
}
.content-preview-page {
padding-bottom: 36px;
}
.content-preview-hero {
margin-top: 18px;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(300px, .62fr);
gap: 16px;
align-items: stretch;
}
.content-preview-visual {
position: relative;
min-height: clamp(430px, 44vw, 560px);
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
overflow: hidden;
background: var(--gb-paper);
box-shadow: 0 18px 42px -36px rgba(15,47,47,.3);
}
.content-preview-visual > img {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
filter: saturate(.96) contrast(.96);
}
.content-preview-copy {
position: absolute;
left: clamp(18px, 3vw, 34px);
bottom: clamp(18px, 3vw, 34px);
width: min(560px, calc(100% - 36px));
border: 1px solid rgba(255,255,255,.74);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.82);
backdrop-filter: blur(14px);
box-shadow: 0 22px 40px -34px rgba(15,47,47,.42);
padding: clamp(20px, 2.4vw, 30px);
}
.content-preview-copy h1 {
max-width: 520px;
margin: 0;
color: var(--gb-ink);
font-size: clamp(35px, 4vw, 52px);
font-weight: 950;
line-height: 1.08;
}
.content-preview-copy p:not(.eyebrow) {
margin: 14px 0 0;
color: var(--gb-text);
font-family: var(--gb-serif);
font-size: 16px;
line-height: 1.7;
}
.content-preview-side {
display: grid;
gap: 16px;
}
.content-preview-side .live-board {
min-height: auto;
}
.content-preview-image-card {
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: var(--gb-card-surface);
overflow: hidden;
box-shadow: 0 18px 42px -36px rgba(15,47,47,.24);
}
.content-preview-image-card img {
width: 100%;
aspect-ratio: 1200 / 630;
object-fit: cover;
}
.content-preview-image-card div {
padding: 16px 18px 18px;
}
.content-preview-image-card strong {
display: block;
color: var(--gb-ink);
font-size: 18px;
font-weight: 950;
line-height: 1.35;
}
.content-preview-image-card p {
margin: 6px 0 0;
color: var(--gb-muted);
font-size: 14px;
line-height: 1.65;
}
.preview-card-image {
width: 100%;
aspect-ratio: 1200 / 630;
border-radius: calc(var(--gb-radius) - 2px);
object-fit: cover;
margin-bottom: 16px;
}
.content-preview-detail {
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(280px, .28fr);
gap: 18px;
align-items: start;
}
.content-preview-article {
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: var(--gb-card-surface);
box-shadow: 0 18px 42px -36px rgba(15,47,47,.28);
overflow: hidden;
}
.content-preview-article img {
width: 100%;
aspect-ratio: 1200 / 450;
object-fit: cover;
}
.content-preview-article > div {
padding: clamp(22px, 3vw, 34px);
}
.content-preview-article h2 {
max-width: 720px;
margin: 0;
color: var(--gb-ink);
font-size: clamp(28px, 3vw, 40px);
font-weight: 950;
line-height: 1.18;
}
.content-preview-article p {
max-width: 720px;
color: var(--gb-text);
font-size: 16px;
line-height: 1.78;
}
.content-preview-aside {
display: grid;
gap: 12px;
}
.content-preview-og-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.content-preview-og {
position: relative;
min-height: 330px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
overflow: hidden;
background: var(--gb-paper);
box-shadow: 0 18px 42px -36px rgba(15,47,47,.28);
}
.content-preview-og img {
width: 100%;
height: 100%;
min-height: 330px;
object-fit: cover;
}
.content-preview-og > div {
position: absolute;
inset: 28px auto 28px 28px;
width: min(420px, calc(100% - 56px));
border: 1px solid rgba(255,255,255,.72);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.84);
backdrop-filter: blur(12px);
padding: 22px;
}
.content-preview-og h3 {
margin: 10px 0;
color: var(--gb-ink);
font-size: clamp(25px, 3vw, 36px);
font-weight: 950;
line-height: 1.14;
}
.content-preview-og p {
margin: 0;
color: var(--gb-muted);
font-size: 15px;
line-height: 1.55;
}
.content-preview-og small {
color: var(--gb-brand-dark);
font-size: 12px;
font-weight: 950;
letter-spacing: 0;
}
@media (max-width: 900px) {
.content-preview-hero,
.content-preview-detail,
.content-preview-og-grid {
grid-template-columns: 1fr;
}
.content-preview-visual {
min-height: 430px;
}
.content-preview-copy {
position: relative;
left: auto;
bottom: auto;
width: auto;
margin: -96px 14px 14px;
}
.content-preview-copy h1 {
font-size: clamp(30px, 9vw, 40px);
}
.content-preview-og > div {
inset: auto 14px 14px;
width: auto;
}
}
.board-head {
padding: 22px 22px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.board-head span {
color: var(--gb-brand-dark);
font-size: 12px;
font-weight: 950;
letter-spacing: 0;
text-transform: uppercase;
}
.board-head strong { color: var(--gb-ink); font-size: 18px; line-height: 1.3; }
.board-list { display: grid; align-content: start; gap: 10px; padding: 18px 22px 22px; }
.board-item {
position: relative;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.78);
padding: 13px 14px 13px 17px;
overflow: hidden;
box-shadow: 0 12px 26px -24px rgba(15,47,47,.26);
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.board-item::before {
content: "";
position: absolute;
inset: 12px auto 12px 0;
width: 3px;
border-radius: 999px;
background: var(--gb-brand);
}
.board-item:hover {
border-color: var(--gb-line-strong);
background: #fff;
box-shadow: 0 16px 34px -28px rgba(15,47,47,.32);
transform: translateY(-1px);
}
.board-item small {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
max-width: 100%;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
font-size: 12px;
font-weight: 900;
line-height: 1;
margin-bottom: 6px;
min-height: 30px;
padding: 4px 9px 4px 5px;
white-space: nowrap;
}
.board-item small .type-icon {
width: 22px;
height: 22px;
border-radius: 999px;
}
.board-item small .type-icon .icon {
width: 13px;
height: 13px;
}
.board-item strong {
display: block;
color: var(--gb-ink);
font-size: 16px;
line-height: 1.38;
overflow-wrap: anywhere;
}
.board-item p {
margin: 7px 0 0;
color: var(--gb-muted);
display: -webkit-box;
font-size: 13px;
line-height: 1.56;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.note {
border: 1px solid rgba(30,107,107,.18);
border-radius: var(--gb-radius);
background:
linear-gradient(135deg, rgba(30,107,107,.1), rgba(255,255,255,0)),
var(--gb-brand-soft);
margin: 0 22px 22px;
padding: 13px 14px;
}
.note p { margin: 0; color: var(--gb-brand-dark); font-size: 15px; font-weight: 900; line-height: 1.5; }
.note span { display: inline-flex; margin-top: 9px; color: var(--gb-muted); font-size: 12px; font-weight: 950; }
.section { padding: 34px 0; }
.for-you-note { margin: -4px 0 16px; color: var(--gb-muted); font-size: 13px; font-weight: 700; }
.current {
display: block;
width: 100%;
height: 24px;
color: var(--gb-brand);
overflow: visible;
}
.current path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.current path:nth-of-type(1) { opacity: .85; }
.current path:nth-of-type(2) { opacity: .5; }
.current path:nth-of-type(3) { opacity: .28; }
.current .dot { fill: none; stroke: var(--gb-amber); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 1; }
.hero-current { height: 24px; margin: 16px 0 2px; max-width: 440px; }
.section-current { height: 20px; margin: 0 0 10px; color: var(--gb-line-strong); opacity: .85; }
.related-current { color: var(--gb-current); }
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.section h2,
.guide-band h2,
.compact-section h2 {
margin: 0;
font-size: 24px;
font-weight: 850;
line-height: 1.25;
letter-spacing: 0;
}
.text-link,
.secondary-link {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.84);
color: var(--gb-ink);
font-size: 14px;
font-weight: 850;
min-height: 40px;
padding: 8px 12px;
cursor: pointer;
white-space: nowrap;
transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.text-link:hover,
.secondary-link:hover {
border-color: var(--gb-line-strong);
background: var(--gb-paper);
color: var(--gb-blue-dark);
box-shadow: 0 14px 28px -24px rgba(15,23,42,.36);
transform: translateY(-1px);
}
.grid,
.category-grid,
.usecase-grid {
display: grid;
grid-template-columns: repeat(3, minmax(min(250px, 100%), 1fr));
align-items: stretch;
gap: var(--gb-gap-card);
}
.type-directory { grid-template-columns: repeat(4, minmax(min(190px, 100%), 1fr)); }
.grid.compact { grid-template-columns: repeat(2, minmax(min(280px, 100%), 1fr)); }
.grid-featured .card:first-child { grid-column: span 2; min-height: 210px; }
.grid-featured .card:first-child h2,
.grid-featured .card:first-child h3 { font-size: 20px; }
.daily-card-section { padding-top: 14px; }
.daily-card-layout {
display: grid;
grid-template-columns: minmax(300px, 520px) minmax(0, 1fr);
align-items: center;
gap: clamp(22px, 4vw, 48px);
}
.daily-card-frame {
min-width: 0;
margin: 0;
border: 1px solid var(--gb-line);
border-radius: calc(var(--gb-radius) + 8px);
background: var(--gb-paper);
box-shadow: 0 28px 58px -42px rgba(15,23,42,.58);
overflow: hidden;
}
.daily-card-frame > a {
display: block;
background: var(--gb-chip);
}
.daily-card-frame img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.daily-card-frame figcaption {
border-top: 1px solid var(--gb-line);
color: var(--gb-muted);
font-size: 12px;
font-weight: 850;
line-height: 1.4;
padding: 11px 14px;
text-align: center;
}
.daily-card-copy {
min-width: 0;
border: 1px solid var(--gb-line);
border-radius: calc(var(--gb-radius) + 4px);
background: var(--gb-paper);
box-shadow: 0 22px 48px -42px rgba(15,23,42,.48);
padding: clamp(22px, 4vw, 38px);
}
.daily-card-copy h2 {
margin: 7px 0 12px;
color: var(--gb-ink);
font-size: clamp(24px, 3vw, 34px);
line-height: 1.28;
}
.daily-card-copy > p:not(.eyebrow):not(.daily-card-note) {
margin: 0;
color: var(--gb-muted);
font-size: 16px;
line-height: 1.75;
}
.daily-card-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 22px;
}
.daily-card-actions .button,
.daily-card-actions .secondary-link { min-height: 42px; text-decoration: none; }
.daily-card-transcript {
margin-top: 20px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: var(--gb-chip);
overflow: hidden;
}
.daily-card-transcript summary {
color: var(--gb-brand-dark);
cursor: pointer;
font-size: 14px;
font-weight: 900;
padding: 13px 15px;
}
.daily-card-transcript > div {
border-top: 1px solid var(--gb-line);
padding: 14px 15px;
}
.daily-card-transcript p {
margin: 0;
color: var(--gb-ink);
font-size: 14px;
line-height: 1.8;
}
.daily-card-transcript p + p { margin-top: 10px; }
.daily-card-note {
margin: 14px 0 0;
color: var(--gb-faint);
font-size: 12px;
font-weight: 750;
line-height: 1.6;
}
@media (max-width: 900px) {
.daily-card-layout { grid-template-columns: 1fr; }
.daily-card-frame { width: min(100%, 520px); margin-inline: auto; }
}
@media (max-width: 520px) {
.daily-card-actions { display: grid; grid-template-columns: 1fr; }
.daily-card-actions .button,
.daily-card-actions .secondary-link { width: 100%; }
.daily-card-copy { padding: 20px; }
}
.recent-reads[hidden] { display: none; }
.section-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.recent-clear {
appearance: none;
font: inherit;
}
.recent-read-card {
min-height: 150px;
}
.local-library {
display: grid;
gap: 16px;
}
.local-library-empty[hidden] { display: none; }
.local-library-grid:empty { display: none; }
.local-library .section-head {
margin-bottom: 0;
}
.card,
.empty,
.static-card,
.usecase-card,
.category-card,
.today-card,
.text-block p {
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: calc(var(--gb-radius) + 4px);
background: var(--gb-card-surface);
box-shadow: none;
padding: var(--gb-pad-card);
}
.card,
.today-card {
--card-accent: var(--gb-blue);
--card-accent-soft: var(--gb-blue-soft);
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 168px;
overflow: hidden;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.empty-rich {
display: grid;
gap: 12px;
align-content: start;
}
.empty-rich strong {
color: var(--gb-ink);
font-size: 18px;
font-weight: 950;
line-height: 1.35;
}
.empty-rich p {
margin: 0;
color: var(--gb-muted);
}
.empty-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.empty-links a {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-brand-dark);
font-size: 13px;
font-weight: 900;
padding: 7px 11px;
}
.empty-links a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip-hover);
}
.empty-links .icon { width: 14px; height: 14px; }
.card::before,
.today-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 2px;
background: var(--card-accent);
}
.card:hover,
.today-card:hover {
border-color: rgba(148,163,184,.74);
box-shadow: var(--gb-shadow-hover);
transform: translateY(-1px);
}
.card-clickable { cursor: pointer; }
.card-clickable:focus-within {
border-color: var(--gb-line-strong);
box-shadow: 0 0 0 3px var(--gb-brand-ring), var(--gb-shadow-hover);
}
.today-card {
min-height: 214px;
padding-top: 20px;
background:
linear-gradient(135deg, var(--card-accent-soft), rgba(255,255,255,0) 44%),
linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,247,.92)),
var(--gb-card-surface);
}
.today-card::after {
content: "";
position: absolute;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background:
linear-gradient(var(--card-accent-soft), var(--card-accent-soft)),
linear-gradient(180deg, #fff, rgba(255,255,255,.72));
box-shadow: inset 0 -10px 18px -16px rgba(20,28,33,.34);
z-index: 0;
}
.today-card > * {
position: relative;
z-index: 1;
}
.static-card,
.usecase-card,
.category-card {
position: relative;
isolation: isolate;
overflow: hidden;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.static-card:hover,
.usecase-card:hover,
.category-card:hover {
border-color: rgba(148,163,184,.74);
box-shadow: var(--gb-shadow-hover);
transform: translateY(-1px);
}
.category-card::before {
content: "";
display: block;
width: 38px;
height: 4px;
margin-bottom: 14px;
border-radius: 999px;
background: linear-gradient(90deg, var(--gb-blue), rgba(53,105,134,.08));
}
.usecase-card::before,
.static-card::before {
content: "";
display: block;
width: 34px;
height: 34px;
margin-bottom: 14px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background:
linear-gradient(135deg, rgba(53,105,134,.18), rgba(255,255,255,0) 55%),
linear-gradient(180deg, #fff, var(--gb-chip));
box-shadow: inset 0 -10px 18px -16px rgba(15,23,42,.32);
}
.card-goodtext { --card-accent: var(--gb-coral); --card-accent-soft: var(--gb-coral-soft); }
.card-emotion { --card-accent: var(--gb-amber); --card-accent-soft: var(--gb-amber-soft); }
.card-greeting { --card-accent: var(--gb-gold); --card-accent-soft: var(--gb-gold-soft); }
.card-idiom { --card-accent: var(--gb-violet); --card-accent-soft: var(--gb-violet-soft); }
.card-proverb { --card-accent: var(--gb-brand-dark); --card-accent-soft: var(--gb-brand-soft); }
.card-warm { --card-accent: var(--gb-amber); --card-accent-soft: var(--gb-amber-soft); }
.card-deep { --card-accent: var(--gb-blue-dark); --card-accent-soft: var(--gb-blue-soft); }
.card-calm { --card-accent: var(--gb-blue); --card-accent-soft: var(--gb-blue-soft); }
.card-kicker {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--gb-muted);
font-size: 12px;
font-weight: 950;
min-width: 0;
}
.card-kicker span {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--card-accent);
color: color-mix(in srgb, var(--card-accent) 55%, var(--gb-ink));
line-height: 1;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-kicker span .type-icon {
width: 22px;
height: 22px;
border-radius: 999px;
border-color: color-mix(in srgb, var(--card-accent) 24%, transparent);
background: #fff;
color: color-mix(in srgb, var(--card-accent) 55%, var(--gb-ink));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 18%, transparent);
}
.card-kicker span .type-icon .icon {
width: 13px;
height: 13px;
}
.card-kicker time { flex: none; }
.category-icon { margin-bottom: 12px; }
.category-icon .type-icon {
width: 42px;
height: 42px;
border-radius: var(--gb-radius);
}
.card h2,
.card h3,
.today-card h2,
.today-card h3,
.category-card h3,
.usecase-card h3,
.static-card h2 {
margin: 9px 0 9px;
font-size: 18px;
font-weight: 900;
line-height: 1.38;
min-width: 0;
color: var(--gb-ink);
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card:not(.builder-card) h2 > a::after,
.card:not(.builder-card) h3 > a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
cursor: pointer;
}
.card a,
.card button {
position: relative;
z-index: 2;
}
.card:not(.builder-card) h2 > a,
.card:not(.builder-card) h3 > a {
position: static;
}
.today-card h2,
.today-card h3 {
max-width: calc(100% - 42px);
margin-top: 12px;
}
.card p,
.today-card p,
.category-card p,
.usecase-card p,
.static-card p,
.guide-band p,
.compact-section p { margin: 0; color: var(--gb-muted); }
.card p,
.today-card p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.68;
}
.card .related-reason {
font-size: 13px;
font-weight: 760;
line-height: 1.6;
-webkit-line-clamp: 2;
}
.card-note {
margin-top: 12px;
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
font-size: 12px;
font-weight: 900;
line-height: 1;
padding: 8px 10px;
width: fit-content;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.more-card-details {
margin-top: 16px;
}
.more-card-details summary {
width: fit-content;
min-height: 42px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-brand-dark);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 930;
list-style: none;
padding: 9px 14px;
box-shadow: 0 12px 24px -24px rgba(15,47,47,.24);
}
.more-card-details summary::-webkit-details-marker { display: none; }
.more-card-details summary .icon {
width: 16px;
height: 16px;
}
.more-card-details[open] summary {
margin-bottom: 14px;
}
.more-card-cta {
margin-top: 16px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.82);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px;
}
.more-card-cta p {
margin: 0;
color: var(--gb-muted);
font-size: 14px;
font-weight: 820;
line-height: 1.55;
}
.more-card-cta > div {
flex: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.more-card-cta .button,
.more-card-cta .secondary-link {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.cluster-notice {
margin: 12px 0 16px;
border: 1px solid rgba(32,132,132,.18);
border-left: 4px solid var(--gb-brand);
border-radius: var(--gb-radius);
background: rgba(236,247,245,.72);
color: var(--gb-muted);
padding: 13px 14px;
}
.cluster-notice strong {
display: block;
color: var(--gb-brand-dark);
font-size: 13px;
font-weight: 950;
line-height: 1.25;
margin-bottom: 5px;
}
.cluster-notice p {
margin: 0;
font-size: 13px;
font-weight: 760;
line-height: 1.62;
}
.cluster-notice .chips {
margin-top: 10px;
}
.card-meta-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.card-meta-row span {
min-height: 26px;
display: inline-flex;
align-items: center;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: rgba(255,255,255,.72);
color: var(--gb-muted);
font-size: 12px;
font-weight: 850;
line-height: 1;
padding: 5px 9px;
}
.card-link {
margin-top: auto;
width: fit-content;
max-width: 100%;
min-height: 32px;
padding-top: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--gb-blue-dark);
font-size: 13px;
font-weight: 900;
overflow-wrap: anywhere;
}
.card-link:hover { color: var(--gb-blue); }
.card-link .icon,
.category-card a .icon { width: 15px; height: 15px; }
.card-actions {
margin-top: auto;
padding-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.card-actions .card-link {
margin-top: 0;
padding-top: 0;
}
.card-action-buttons {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.card-share-btn {
flex: none;
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-muted);
cursor: pointer;
font-size: 12px;
font-weight: 900;
line-height: 1;
padding: 7px 10px;
transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.card-bookmark-btn {
flex: none;
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-muted);
cursor: pointer;
font-size: 12px;
font-weight: 900;
line-height: 1;
padding: 7px 10px;
transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.card-bookmark-btn.is-saved,
.card-bookmark-btn[aria-pressed="true"] {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
@media (hover: hover) and (pointer: fine) {
.card-bookmark-btn:hover {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
transform: translateY(-1px);
}
}
.card-bookmark-btn .icon { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
.card-share-btn:hover {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
transform: translateY(-1px);
}
}
.card-share-btn .icon { width: 13px; height: 13px; }
.person-grid,
.person-quote-grid {
grid-template-columns: repeat(3, minmax(min(260px, 100%), 1fr));
}
.person-card-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.person-card-stats span {
min-width: 0;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background: var(--gb-paper-soft);
color: var(--gb-muted);
font-size: 12px;
font-weight: 900;
line-height: 1.25;
padding: 8px 9px;
}
.person-card-stats strong {
display: block;
color: var(--gb-brand-dark);
font-size: 18px;
font-weight: 950;
line-height: 1;
margin-bottom: 4px;
}
.quote-archive-card blockquote {
position: relative;
margin: 8px 0 4px;
border: 0;
border-radius: var(--gb-radius-sm);
background: var(--gb-brand-soft);
color: var(--gb-ink);
font-family: var(--gb-serif);
font-size: 18px;
font-weight: 800;
line-height: 1.55;
padding: 16px 16px 16px 18px;
}
.quote-archive-card blockquote::before {
content: "";
position: absolute;
inset: 14px auto 14px 0;
width: 3px;
border-radius: 999px;
background: var(--card-accent);
}
.quote-card-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 4px;
}
.quote-card-meta a,
.quote-card-meta span {
min-width: 0;
max-width: 100%;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 900;
line-height: 1.2;
padding: 7px 10px;
}
.quote-card-meta a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip-hover);
color: var(--gb-brand-dark);
}
.quote-card-meta .icon { width: 14px; height: 14px; }
.quote-card-interpretation {
margin-top: 8px !important;
-webkit-line-clamp: 2 !important;
}
.person-filter-section {
display: grid;
gap: 14px;
}
.person-filter-group {
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.72);
padding: 14px;
box-shadow: var(--gb-shadow-soft);
}
.person-filter-group > strong {
display: block;
color: var(--gb-ink);
font-size: 14px;
font-weight: 930;
line-height: 1.3;
}
.person-filter-bar {
margin-top: 10px;
}
.person-filter-bar a small {
color: var(--gb-faint);
font-size: 11px;
font-weight: 950;
}
.person-source-note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: start;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(135deg, rgba(30,107,107,.08), rgba(255,255,255,0) 54%),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
padding: 18px;
}
.person-source-note h2 {
margin: 0 0 6px;
color: var(--gb-ink);
font-size: 20px;
font-weight: 950;
line-height: 1.28;
}
.person-source-note p,
.person-hub-description {
margin: 0;
color: var(--gb-muted);
line-height: 1.68;
}
.today-summary,
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--gb-gap-metric);
margin-bottom: 18px;
}
.today-summary div,
.metric-grid div,
.metric {
position: relative;
overflow: hidden;
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,247,.92)),
var(--gb-paper);
padding: 18px;
box-shadow: var(--gb-shadow-soft);
}
.today-summary div::before,
.metric-grid div::before,
.metric::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--gb-blue);
}
.today-summary div::after,
.metric-grid div::after,
.metric::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
border: 1px solid rgba(53,105,134,.16);
border-radius: var(--gb-radius-sm);
background: var(--gb-blue-soft);
}
.today-summary span,
.metric-grid span,
.metric strong {
display: block;
max-width: calc(100% - 38px);
color: var(--gb-blue-dark);
font-size: 25px;
font-weight: 950;
line-height: 1.08;
overflow-wrap: anywhere;
}
.today-summary p,
.metric-grid p,
.metric span {
display: block;
max-width: calc(100% - 32px);
margin: 7px 0 0;
color: var(--gb-muted);
font-size: 13px;
font-weight: 850;
line-height: 1.42;
overflow-wrap: anywhere;
}
.daily-spotlights {
display: grid;
grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr);
gap: var(--gb-gap-card);
align-items: stretch;
margin: 16px 0 18px;
}
.daily-spotlight-copy,
.spotlight-card {
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,247,.92)),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
}
.daily-spotlight-copy {
padding: 18px;
}
.daily-spotlight-copy h2 {
margin: 0;
color: var(--gb-ink);
font-size: 23px;
font-weight: 930;
line-height: 1.25;
}
.daily-spotlight-copy p:last-child {
margin: 9px 0 0;
color: var(--gb-muted);
}
.spotlight-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gb-gap-metric);
}
.spotlight-card {
--card-accent: var(--gb-blue);
position: relative;
overflow: hidden;
display: grid;
gap: 9px;
padding: 16px;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.spotlight-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--card-accent);
}
.spotlight-card:hover {
border-color: rgba(148,163,184,.74);
box-shadow: var(--gb-shadow-hover);
transform: translateY(-1px);
}
.spotlight-card > span {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gb-muted);
font-size: 12px;
font-weight: 950;
}
.spotlight-card strong {
color: var(--gb-ink);
font-size: 17px;
font-weight: 920;
line-height: 1.38;
overflow-wrap: anywhere;
}
.spotlight-card em {
color: var(--gb-muted);
font-size: 12px;
font-style: normal;
font-weight: 850;
line-height: 1.45;
}
.today-card > span {
width: fit-content;
max-width: calc(100% - 46px);
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 950;
line-height: 1;
padding: 6px 9px;
overflow-wrap: anywhere;
}
[class^="quality-"],
[class*=" quality-"],
[class^="coverage-"],
[class*=" coverage-"],
[class^="daily-"],
[class*=" daily-"],
[class^="status-"],
[class*=" status-"] {
min-width: 0;
overflow-wrap: anywhere;
}
.quality-grid,
.coverage-grid,
.daily-grid,
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: var(--gb-gap-card);
}
.quality-list,
.coverage-list,
.daily-list,
.status-list {
display: grid;
gap: var(--gb-gap-metric);
margin: var(--gb-gap-card) 0 0;
padding: 0;
list-style: none;
}
.quality-card,
.quality-panel,
.quality-item,
.coverage-card,
.coverage-panel,
.coverage-item,
.daily-card,
.daily-panel,
.daily-item,
.status-card,
.status-panel,
.status-item {
--gb-state-accent: var(--gb-blue);
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,247,.92)),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
color: var(--gb-ink);
overflow: hidden;
padding: var(--gb-pad-card);
}
.quality-card,
.coverage-card,
.daily-card,
.status-card,
.quality-item,
.coverage-item,
.daily-item,
.status-item {
position: relative;
}
.quality-card::before,
.coverage-card::before,
.daily-card::before,
.status-card::before,
.quality-item::before,
.coverage-item::before,
.daily-item::before,
.status-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--gb-state-accent);
}
.quality-head,
.coverage-head,
.daily-head,
.status-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gb-gap-metric);
min-width: 0;
}
.quality-title,
.coverage-title,
.daily-title,
.status-title {
margin: 0;
color: var(--gb-ink);
font-size: 18px;
font-weight: 920;
line-height: 1.35;
}
.quality-copy,
.coverage-copy,
.daily-copy,
.status-copy {
margin: 8px 0 0;
color: var(--gb-muted);
font-size: 14px;
line-height: 1.62;
}
.quality-metrics,
.coverage-metrics,
.daily-metrics,
.status-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
gap: var(--gb-gap-metric);
}
.quality-metric,
.coverage-metric,
.daily-metric,
.status-metric {
--gb-state-accent: var(--gb-blue);
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,247,.92)),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
padding: var(--gb-pad-card-compact);
}
.quality-metric::before,
.coverage-metric::before,
.daily-metric::before,
.status-metric::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--gb-state-accent);
}
.quality-score,
.quality-value,
.coverage-score,
.coverage-value,
.daily-count,
.daily-value,
.status-count,
.status-value {
display: block;
color: var(--gb-blue-dark);
font-size: 24px;
font-weight: 950;
line-height: 1.08;
}
.quality-label,
.coverage-label,
.daily-label,
.status-label {
display: block;
margin-top: 7px;
color: var(--gb-muted);
font-size: 13px;
font-weight: 850;
line-height: 1.35;
}
.quality-chip,
.quality-badge,
.coverage-chip,
.coverage-badge,
.daily-chip,
.daily-badge,
.status-chip,
.status-badge,
.status-pill {
--gb-state-bg: var(--gb-chip);
--gb-state-text: var(--gb-muted);
width: fit-content;
max-width: 100%;
min-height: 30px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-state-bg);
color: var(--gb-state-text);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 950;
line-height: 1.2;
padding: 6px 10px;
white-space: normal;
}
.quality-row,
.coverage-row,
.daily-row,
.status-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--gb-gap-metric);
}
.status-ok,
.status-good,
.status-ready,
.status-active,
.quality-high,
.quality-good,
.coverage-full,
.coverage-complete {
--gb-state-accent: var(--gb-blue);
--gb-state-bg: var(--gb-blue-soft);
--gb-state-text: var(--gb-blue-dark);
}
.status-pending,
.status-neutral,
.quality-medium,
.coverage-partial,
.daily-muted {
--gb-state-accent: #64748b;
--gb-state-bg: #eef2f6;
--gb-state-text: #475569;
}
.status-low,
.status-gap,
.status-missing,
.status-error,
.quality-low,
.quality-gap,
.coverage-low,
.coverage-gap {
--gb-state-accent: #526274;
--gb-state-bg: #f1f4f7;
--gb-state-text: #3f4f61;
}
.guide-band {
margin: 20px 0 40px;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(90deg, rgba(47,126,122,.1), rgba(255,255,255,0) 50%),
rgba(255,255,255,.88);
box-shadow: var(--gb-shadow-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px;
}
.intent-guide-detail .section-head p {
max-width: 760px;
margin: 8px 0 0;
color: var(--gb-muted);
line-height: 1.72;
}
.intent-guide-grid-compact {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.intent-guide-grid-compact .trust-card { padding: 20px; }
.intent-guide-grid-compact ul {
margin: 10px 0 0;
padding-left: 18px;
color: var(--gb-text);
line-height: 1.72;
}
.intent-guide-grid-compact li + li { margin-top: 6px; }
.intent-difference {
max-width: 860px;
margin: 14px 0 0;
border-left: 3px solid var(--gb-blue);
background: var(--gb-chip);
color: var(--gb-text);
line-height: 1.72;
padding: 14px 16px;
}
.intent-difference strong {
display: block;
margin-bottom: 3px;
color: var(--gb-ink);
}
.page-hero {
position: relative;
padding: 32px 0 18px;
max-width: none;
}
.page-hero-collection {
max-width: none;
}
.page-hero::before {
content: "";
display: block;
width: 46px;
height: 4px;
margin-bottom: 18px;
border-radius: 999px;
background: var(--gb-blue);
}
.text-block {
max-width: 860px;
display: grid;
gap: 12px;
}
.text-block p {
position: relative;
margin: 0;
color: var(--gb-text);
line-height: 1.78;
}
.text-block p::before {
content: "";
position: absolute;
left: -1px;
top: 18px;
bottom: 18px;
width: 3px;
border-radius: 999px;
background: rgba(30,107,107,.28);
}
.text-block p:first-child {
border-color: rgba(30,107,107,.3);
background:
linear-gradient(135deg, rgba(30,107,107,.08), rgba(255,255,255,0) 54%),
var(--gb-card-surface);
}
.text-block p:first-child::before { background: var(--gb-brand); }
.static-layout {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 18px;
padding: 18px 0 40px;
}
.static-layout aside {
align-self: start;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,247,.92)),
var(--gb-paper);
color: var(--gb-ink);
display: flex;
align-items: center;
gap: 10px;
font-weight: 900;
padding: 16px;
box-shadow: var(--gb-shadow-soft);
}
.static-layout aside svg {
width: 24px;
height: 24px;
box-sizing: content-box;
flex: none;
border: 1px solid var(--gb-line-strong);
border-radius: var(--gb-radius);
background: var(--gb-blue-soft);
color: var(--gb-blue-dark);
padding: 8px;
}
.static-sections { display: grid; gap: 12px; }
.trust-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.trust-card {
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,247,.92)),
var(--gb-card-surface);
display: grid;
align-content: start;
gap: 10px;
padding: 18px;
box-shadow: var(--gb-shadow-soft);
}
.trust-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid rgba(30,107,107,.14);
border-radius: var(--gb-radius-sm);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
.trust-icon .icon { width: 18px; height: 18px; }
.trust-card h3 {
margin: 0;
color: var(--gb-ink);
font-size: 17px;
font-weight: 930;
line-height: 1.32;
}
.trust-card p {
margin: 0;
color: var(--gb-text);
font-size: 14px;
line-height: 1.68;
}
.trust-card .text-link { width: fit-content; margin-top: 2px; }
.article { width: 100%; max-width: none; margin-inline: auto; padding: 18px 0 44px; }
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
gap: clamp(28px, 3vw, 44px);
align-items: start;
}
.article-main {
min-width: 0;
max-width: none;
}
.article-layout-reading {
max-width: none;
margin: 0;
}
.article-layout-reading .article-main {
max-width: none;
}
.article-sidebar {
position: sticky;
top: calc(var(--gb-header-h) + 18px);
display: grid;
gap: 14px;
min-width: 0;
}
.article-side-card {
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.9)),
var(--gb-card-surface);
box-shadow: var(--gb-shadow-soft);
padding: 16px;
}
.article-side-card .eyebrow {
margin-bottom: 9px;
}
.article-side-summary strong {
display: block;
color: var(--gb-ink);
font-size: 17px;
font-weight: 950;
line-height: 1.38;
}
.article-side-facts {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.article-side-facts span {
min-height: 26px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 900;
line-height: 1;
padding: 5px 9px;
}
.article-side-outline,
.article-side-next,
.article-side-links,
.article-side-policies,
.article-side-trust,
.article-side-tools {
display: grid;
gap: 8px;
}
.article-side-outline a,
.article-side-next a,
.article-side-links a,
.article-side-policies a {
min-width: 0;
min-height: 34px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 900;
line-height: 1.2;
padding: 7px 10px;
}
.article-side-outline a {
border-radius: var(--gb-radius-sm);
justify-content: flex-start;
}
@media (min-width: 1101px) {
.article-main > .article-outline { display: none; }
}
.article-side-next a {
border-radius: var(--gb-radius-sm);
display: grid;
gap: 3px;
padding: 10px 11px;
}
.article-side-next a small {
color: var(--gb-faint);
font-size: 11px;
font-weight: 950;
line-height: 1.15;
}
.article-side-next a span {
min-width: 0;
color: var(--gb-ink);
font-size: 13px;
font-weight: 900;
line-height: 1.38;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-side-links a span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-side-policies a span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-side-links .icon,
.article-side-policies .icon {
width: 14px;
height: 14px;
}
.article-side-outline a:hover,
.article-side-next a:hover,
.article-side-links a:hover,
.article-side-policies a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
.article-side-next a:hover span { color: var(--gb-brand-dark); }
.article-side-trust ul {
display: grid;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.article-side-trust li {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 8px;
color: var(--gb-muted);
font-size: 13px;
font-weight: 850;
line-height: 1.45;
}
.article-side-trust .icon {
width: 15px;
height: 15px;
margin-top: 2px;
color: var(--gb-brand);
}
.article-side-tools > button {
width: 100%;
justify-content: center;
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gb-muted); font-size: 14px; }
.breadcrumb a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 4px 6px;
margin: -4px -6px;
border-radius: 8px;
}
.breadcrumb a:hover { color: var(--gb-blue-dark); text-decoration: underline; }
.article-head { padding: 14px 0 22px; }
.article .lead { margin-top: 14px; line-height: 1.72; }
.article-meta {
margin: 16px 0 0;
color: var(--gb-muted);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 900;
}
.article-meta span {
max-width: 100%;
min-height: 24px;
display: inline-flex;
align-items: center;
line-height: 1.25;
padding: 0;
}
.article-meta span + span::before { content: "·"; margin-right: 8px; color: var(--gb-faint); }
.article-meta a,
.article-meta time {
color: inherit;
}
.article-meta a:hover {
color: var(--gb-blue-dark);
text-decoration: underline;
}
.index-page .index-group,
.index-page .index-letter-group,
.article-section { scroll-margin-top: calc(var(--gb-header-h) + 20px); }
.hub-chips {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gb-gap-chip);
}
.hub-chips > span {
color: var(--gb-muted);
font-size: 12px;
font-weight: 950;
}
.hub-chips a {
min-width: 0;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 900;
line-height: 1.2;
padding: 7px 10px;
}
.hub-chips a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-blue-soft);
color: var(--gb-blue-dark);
}
.hub-chips .icon { width: 15px; height: 15px; }
.article-outline {
margin: 0 0 22px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,252,.9)),
var(--gb-paper-soft);
display: grid;
gap: 10px;
padding: 14px 16px;
}
.article-outline strong {
color: var(--gb-ink);
font-size: 13px;
font-weight: 950;
}
.article-outline ol {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.article-outline a {
display: inline-flex;
align-items: center;
min-height: 30px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-muted);
font-size: 13px;
font-weight: 850;
line-height: 1.2;
padding: 6px 10px;
}
.article-outline a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip);
color: var(--gb-brand-dark);
}
.article-discovery {
border-top-color: transparent;
}
.article-discovery-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.article-discovery-head h2 {
margin-bottom: 6px;
}
.article-discovery-head h2::before {
display: none;
}
.article-discovery-head p {
max-width: 620px;
margin: 0;
color: var(--gb-muted);
font-size: 15px;
line-height: 1.62;
}
.discovery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gb-gap-metric);
}
.discovery-card {
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,247,.92)),
var(--gb-card-surface);
display: grid;
align-content: start;
gap: 10px;
padding: 18px;
box-shadow: var(--gb-shadow-soft);
}
.discovery-card h3 {
margin: 0;
color: var(--gb-ink);
font-size: 17px;
font-weight: 930;
line-height: 1.35;
}
.discovery-card p {
margin: 0;
color: var(--gb-muted);
font-size: 14px;
line-height: 1.62;
}
.discovery-chips {
margin-top: 0;
}
.quote-connection-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gb-gap-metric);
}
.quote-connection-card {
min-width: 0;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,247,.92)),
var(--gb-card-surface);
display: grid;
align-content: start;
gap: 9px;
padding: 18px;
box-shadow: var(--gb-shadow-soft);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.quote-connection-card:hover {
border-color: rgba(148,163,184,.74);
box-shadow: var(--gb-shadow-hover);
transform: translateY(-1px);
}
.quote-connection-card strong {
color: var(--gb-ink);
font-size: 16px;
font-weight: 930;
line-height: 1.35;
}
.quote-connection-card p {
margin: 0;
color: var(--gb-muted);
font-size: 13px;
line-height: 1.58;
}
.quote-connection-card em {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--gb-brand-dark);
font-size: 12px;
font-style: normal;
font-weight: 950;
line-height: 1;
}
.quote-connection-card em .icon {
width: 13px;
height: 13px;
}
.article-next-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gb-gap-metric);
}
.article-next-card {
min-width: 0;
min-height: 126px;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,247,.92)),
var(--gb-card-surface);
display: grid;
align-content: start;
gap: 9px;
padding: 18px;
box-shadow: var(--gb-shadow-soft);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.article-next-card:hover {
border-color: rgba(148,163,184,.74);
box-shadow: var(--gb-shadow-hover);
transform: translateY(-1px);
}
.article-next-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gb-brand-dark);
font-size: 12px;
font-weight: 950;
line-height: 1;
}
.article-next-kicker .icon {
width: 14px;
height: 14px;
}
.article-next-card-previous .article-next-kicker .icon {
transform: rotate(180deg);
}
.article-next-kicker em {
font-style: normal;
}
.article-next-card strong {
color: var(--gb-ink);
font-size: 17px;
font-weight: 930;
line-height: 1.4;
overflow-wrap: anywhere;
}
.article-next-card small {
color: var(--gb-muted);
font-size: 13px;
font-weight: 850;
line-height: 1.35;
}
.article blockquote {
position: relative;
margin: 28px 0;
padding: 30px 28px 30px 34px;
border-left: 3px solid var(--gb-brand);
border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
background:
linear-gradient(90deg, var(--gb-brand-soft), rgba(255,255,255,0) 70%),
var(--gb-paper-soft);
color: var(--gb-ink);
font-size: clamp(20px, 2.1vw, 26px);
font-weight: 800;
line-height: 1.56;
letter-spacing: 0;
font-family: var(--gb-serif);
overflow-wrap: anywhere;
}
.article blockquote::before {
content: "\201C";
position: absolute;
top: 2px;
left: 14px;
color: var(--gb-current);
font-family: var(--gb-serif);
font-size: 44px;
line-height: 1;
pointer-events: none;
}
.article-spotlight {
margin: 0 0 24px;
border: 1px solid var(--gb-card-border);
border-radius: calc(var(--gb-radius) + 4px);
background:
linear-gradient(145deg, var(--gb-brand-soft), transparent 62%),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
padding: clamp(22px, 4vw, 34px);
}
.article-spotlight-label {
margin: 0 0 14px;
color: var(--gb-brand-dark);
font-size: 13px;
font-weight: 950;
letter-spacing: .02em;
}
.article .article-primary-text {
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
color: var(--gb-ink);
font-size: clamp(24px, 3.2vw, 34px);
font-weight: 780;
line-height: 1.58;
letter-spacing: -.018em;
}
.article .article-primary-text::before { display: none; }
.article-primary-text p { margin: 0; }
.article-primary-text footer {
margin-top: 14px;
color: var(--gb-muted);
font-family: var(--gb-ui);
font-size: 14px;
font-weight: 850;
line-height: 1.45;
}
.article-term {
display: grid;
gap: 13px;
}
.article-term strong {
color: var(--gb-ink);
font-family: var(--gb-serif);
font-size: clamp(30px, 4vw, 44px);
font-weight: 900;
line-height: 1.3;
letter-spacing: -.025em;
}
.article-term p {
margin: 0;
color: var(--gb-text);
font-family: var(--gb-serif);
font-size: 18px;
line-height: 1.75;
}
.article-spotlight-context {
margin: 20px 0 0;
border-top: 1px solid var(--gb-line);
display: grid;
gap: 5px;
padding-top: 16px;
}
.article-spotlight-context strong {
color: var(--gb-muted);
font-size: 12px;
font-weight: 950;
}
.article-spotlight-context span {
color: var(--gb-text);
font-size: 15px;
line-height: 1.65;
}
.article-primary-actions {
margin-top: 20px;
}
.article-primary-actions > * {
min-height: 38px;
}
.article-opening-copy {
width: min(100%, 100ch);
margin: 0 0 28px;
padding: 0;
}
.article-opening-copy p {
margin: 0 0 16px;
color: var(--gb-text);
font-family: var(--gb-serif);
font-size: 18px;
line-height: 1.9;
}
.article-opening-copy p:last-child { margin-bottom: 0; }
.article-support-meta {
margin: 22px 0 0;
border-top: 1px solid var(--gb-line);
padding: 16px 0;
}
.article-support-meta > .article-meta:first-child { margin-top: 0; }
.article-reading-tools {
margin: 18px 0 22px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background: var(--gb-paper-soft);
padding: 0 13px;
}
.article-reading-tools summary {
min-height: 42px;
display: flex;
align-items: center;
gap: 8px;
color: var(--gb-muted);
cursor: pointer;
font-size: 13px;
font-weight: 900;
list-style: none;
}
.article-reading-tools summary::-webkit-details-marker { display: none; }
.article-reading-tools summary::after {
content: "+";
margin-left: auto;
color: var(--gb-faint);
font-size: 18px;
font-weight: 700;
}
.article-reading-tools[open] summary::after { content: "–"; }
.article-reading-tools summary .icon { width: 16px; height: 16px; }
.article-reading-tools .article-tool-actions {
margin: 0;
padding: 11px 0 13px;
}
.quote-original {
margin: 0 0 4px;
padding: 14px 18px;
border-left: 2px solid var(--gb-line-strong);
background: var(--gb-paper-soft);
border-radius: 0 var(--gb-radius-sm) var(--gb-radius-sm) 0;
}
.quote-original figcaption {
color: var(--gb-faint);
font-size: 12px;
font-weight: 950;
letter-spacing: .02em;
text-transform: uppercase;
}
.quote-original p {
margin: 6px 0 0;
color: var(--gb-text);
font-family: var(--gb-serif);
font-size: 18px;
line-height: 1.6;
}
.hanja-breakdown {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hanja-char {
display: grid;
justify-items: center;
gap: 4px;
min-width: 64px;
padding: 12px 10px;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background: var(--gb-paper-soft);
}
.hanja-char strong {
color: var(--gb-brand-dark);
font-family: var(--gb-serif);
font-size: 30px;
line-height: 1;
}
.hanja-char small { color: var(--gb-muted); font-size: 12px; font-weight: 850; }
.variant-note { margin: 0 0 12px; color: var(--gb-muted); font-size: 14px; }
.variant-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.variant-item {
position: relative;
display: grid;
gap: 8px;
padding: 16px 16px 14px;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background: var(--gb-paper-soft);
}
.variant-label {
width: fit-content;
border-radius: 999px;
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
font-size: 12px;
font-weight: 950;
line-height: 1;
padding: 6px 10px;
}
.variant-text {
margin: 0;
color: var(--gb-ink);
font-family: var(--gb-serif);
font-size: 17px;
line-height: 1.62;
overflow-wrap: anywhere;
}
.copy-btn {
width: fit-content;
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-brand-dark);
cursor: pointer;
font-size: 13px;
font-weight: 900;
padding: 6px 13px;
transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.copy-btn:hover { border-color: var(--gb-brand); background: var(--gb-brand-soft); transform: translateY(-1px); }
.copy-btn .icon { width: 14px; height: 14px; }
.copy-btn.is-copied { border-color: var(--gb-brand); background: var(--gb-brand); color: #fff; }
.article-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.article-actions > * {
flex: 0 1 auto;
}
.share-btn {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-brand-dark);
cursor: pointer;
font-size: 13px;
font-weight: 900;
padding: 6px 13px;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.share-btn:hover { border-color: var(--gb-brand); background: var(--gb-brand-soft); transform: translateY(-1px); }
.share-btn .icon { width: 14px; height: 14px; }
.share-btn.is-copied { border-color: var(--gb-brand); background: var(--gb-brand); color: #fff; }
.share-btn-primary {
border-color: transparent;
background: var(--gb-brand);
color: #fff;
box-shadow: 0 12px 26px -20px rgba(15,71,71,.75);
}
.share-btn-primary:hover {
border-color: transparent;
background: var(--gb-brand-dark);
color: #fff;
}
.share-card-btn {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-brand-dark);
cursor: pointer;
font-size: 13px;
font-weight: 900;
padding: 6px 13px;
text-decoration: none;
transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.share-card-btn:hover {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
transform: translateY(-1px);
}
.share-card-btn .icon { width: 14px; height: 14px; }
.article-tool-actions {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--gb-line) 80%, transparent);
}
.share-panel[hidden] { display: none; }
.share-panel {
max-width: 720px;
margin-top: 12px;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,249,.94)),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
padding: 16px;
}
.share-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.share-panel-head strong {
color: var(--gb-ink);
font-size: 15px;
font-weight: 950;
}
.share-panel-head button {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.share-panel p {
margin: 0 0 12px;
color: var(--gb-muted);
font-size: 14px;
line-height: 1.5;
}
.share-panel-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
gap: 8px;
}
.share-panel-actions button,
.share-panel-actions a {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-brand-dark);
cursor: pointer;
font-size: 13px;
font-weight: 900;
padding: 8px 12px;
text-decoration: none;
transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.share-panel-actions button:hover,
.share-panel-actions a:hover {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
transform: translateY(-1px);
}
.share-panel-actions .icon { width: 14px; height: 14px; }
.article-sticky-share { display: none; }
.article-share-block {
margin: 34px 0 10px;
padding: 20px;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(135deg, rgba(236,248,244,.9), rgba(255,255,255,.96)),
var(--gb-paper);
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
box-shadow: var(--gb-shadow-soft);
}
.article-share-block h2 {
margin: 4px 0 7px;
color: var(--gb-ink);
font-size: 22px;
font-weight: 950;
line-height: 1.28;
}
.article-share-block p {
margin: 0;
color: var(--gb-muted);
line-height: 1.6;
}
.article-share-block .article-actions {
margin-top: 0;
flex: none;
justify-content: flex-end;
}
.article-related-more {
margin-top: 14px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background:
linear-gradient(135deg, rgba(236,248,244,.72), rgba(255,255,255,.9)),
var(--gb-paper);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
}
.article-related-more p {
margin: 0;
color: var(--gb-muted);
font-size: 14px;
font-weight: 820;
line-height: 1.55;
}
.article-related-more > div {
flex: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.article-related-more .primary-link,
.article-related-more .secondary-link {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.gb-toast {
position: fixed;
left: 50%;
bottom: calc(86px + env(safe-area-inset-bottom, 0px));
z-index: 120;
transform: translate(-50%, 12px);
max-width: min(86vw, 360px);
border-radius: 999px;
background: var(--gb-ink);
color: #fff;
font-size: 14px;
font-weight: 850;
line-height: 1.3;
padding: 11px 18px;
box-shadow: 0 18px 40px -22px rgba(15, 47, 47, 0.6);
opacity: 0;
pointer-events: none;
display: inline-flex;
align-items: center;
gap: 6px 14px;
transition: opacity .2s ease, transform .2s ease;
}
.gb-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.gb-toast-action {
flex: none;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.16);
color: #fff;
font-size: 13px;
font-weight: 900;
padding: 5px 12px;
margin: -3px -6px -3px 0;
cursor: pointer;
transition: background .16s ease;
}
.gb-toast-action:hover { background: rgba(255,255,255,.28); }
.gb-toast-action:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
body.gb-scroll-locked { overflow: hidden; }
[data-share-download-card][aria-busy="true"] {
pointer-events: none;
opacity: .62;
cursor: progress;
}
@media (min-width: 761px) { .gb-toast { bottom: 28px; } }
.tool-btn {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-muted);
cursor: pointer;
font-size: 13px;
font-weight: 900;
padding: 6px 13px;
transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
@media (hover: hover) and (pointer: fine) {
.tool-btn:hover { border-color: var(--gb-line-strong); color: var(--gb-brand-dark); transform: translateY(-1px); }
}
.tool-btn .icon { width: 14px; height: 14px; }
.tool-btn[aria-pressed="true"] {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
.gb-reading-settings {
margin-top: 16px;
padding: 16px;
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,247,.92)),
var(--gb-paper-soft);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
box-shadow: var(--gb-shadow-soft);
}
.gb-reading-settings strong {
display: block;
margin-bottom: 8px;
color: var(--gb-ink);
font-size: 13px;
font-weight: 950;
}
.reading-setting-row {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.reading-setting-row button {
min-height: 34px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
color: var(--gb-muted);
cursor: pointer;
font-size: 13px;
font-weight: 900;
padding: 6px 11px;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.reading-setting-row button[aria-pressed="true"] {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
@media (hover: hover) and (pointer: fine) {
.reading-setting-row button:hover {
border-color: var(--gb-brand);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
}
}
.reading-setting-wide { grid-column: 1 / -1; }
.reading-setting-wide .secondary-link {
width: fit-content;
min-height: 36px;
cursor: pointer;
}
body.gb-size-small .article-copy p,
body.gb-size-small .article-section > p { font-size: 16px; line-height: 1.78; }
body.gb-size-small .article blockquote { font-size: clamp(19px, 2vw, 24px); }
body.gb-size-large .article-copy p,
body.gb-size-large .article-section > p { font-size: 18.5px; line-height: 1.9; }
body.gb-size-large .article blockquote { font-size: clamp(22px, 2.4vw, 29px); }
body.gb-size-xlarge .article-copy p,
body.gb-size-xlarge .article-section > p { font-size: 20px; line-height: 1.96; }
body.gb-size-xlarge .article blockquote { font-size: clamp(24px, 2.6vw, 31px); }
body.gb-line-tight .article-copy p,
body.gb-line-tight .article-section > p { line-height: 1.62; }
body.gb-line-wide .article-copy p,
body.gb-line-wide .article-section > p { line-height: 2.04; }
body.gb-width-narrow .article-main { max-width: 780px; }
body.gb-width-wide .article-main { max-width: 1040px; }
body.gb-font-serif .article-copy p,
body.gb-font-serif .article-section > p,
body.gb-font-serif .article blockquote {
font-family: var(--gb-serif);
}
body.gb-tone-soft { background: #f7faf9; }
body.gb-tone-soft .article blockquote,
body.gb-tone-soft .article-outline,
body.gb-tone-soft .article-section,
body.gb-tone-soft .gb-reading-settings { background-color: rgba(247,250,249,.92); }
body.gb-tone-warm { background: #fbfaf5; }
body.gb-tone-warm .article blockquote,
body.gb-tone-warm .article-outline,
body.gb-tone-warm .article-section,
body.gb-tone-warm .gb-reading-settings { background-color: rgba(251,250,245,.94); }
body.gb-reading .top,
body.gb-reading .footer,
body.gb-reading .bottom-nav,
body.gb-reading .breadcrumb,
body.gb-reading .hub-chips,
body.gb-reading .article-sidebar,
body.gb-reading .article-related,
body.gb-reading .article-source-section { display: none; }
body.gb-reading { background: var(--gb-paper); }
body.gb-reading .article { max-width: 720px; padding-top: 32px; }
body.gb-reading .article-layout { display: block; }
body.gb-reading .article-main { max-width: 720px; }
body.gb-reading .article-copy p,
body.gb-reading .article-section > p { font-size: 18px; line-height: 1.94; }
body.gb-reading .article blockquote { font-size: clamp(21px, 2.3vw, 27px); }
.index-page .index-group h2 {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
}
.index-page .index-group h2 small {
color: var(--gb-muted);
font-size: 14px;
font-weight: 850;
}
.index-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: 4px 18px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.index-list a {
display: block;
padding: 8px 10px;
border-radius: var(--gb-radius-sm);
color: var(--gb-text);
line-height: 1.5;
overflow-wrap: anywhere;
transition: background .16s ease, color .16s ease;
}
.index-list a:hover { background: var(--gb-chip); color: var(--gb-brand-dark); }
.index-page {
max-width: none;
padding-top: 22px;
}
.index-panel {
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(135deg, rgba(236,248,244,.86), rgba(255,255,255,.98) 42%, rgba(247,249,252,.94)),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
padding: clamp(18px, 2.4vw, 26px);
}
.index-panel-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--gb-line);
}
.index-panel-head h2 {
margin: 0;
color: var(--gb-ink);
font-size: 22px;
font-weight: 950;
line-height: 1.24;
}
.index-panel-head > span {
flex: none;
min-height: 34px;
display: inline-flex;
align-items: center;
border: 1px solid rgba(30,107,107,.16);
border-radius: 999px;
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
font-size: 13px;
font-weight: 950;
padding: 6px 12px;
white-space: nowrap;
}
.index-page .empty {
margin: 0;
}
.index-type-jump {
position: sticky;
top: calc(var(--gb-header-h) + 4px);
z-index: 8;
margin: 14px 0 16px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.94);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
gap: 8px;
overflow-x: auto;
padding: 8px;
scrollbar-width: none;
box-shadow: 0 14px 28px -26px rgba(15,47,47,.32);
}
.index-type-jump::-webkit-scrollbar { display: none; }
.index-type-jump a {
flex: 0 0 auto;
min-height: 38px;
border: 1px solid transparent;
border-radius: 999px;
color: var(--gb-muted);
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 930;
padding: 8px 11px;
}
.index-type-jump a:hover {
border-color: rgba(30,107,107,.16);
background: var(--gb-chip);
color: var(--gb-brand-dark);
}
.index-type-jump .type-icon {
width: 22px;
height: 22px;
}
.index-type-jump small {
color: var(--gb-faint);
font-size: 11px;
font-weight: 950;
}
.index-page .index-group {
min-width: 0;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.82);
box-shadow: 0 12px 28px -26px rgba(15,47,47,.26);
padding: 18px;
}
.index-page .index-group + .index-group {
margin-top: 12px;
}
.index-page .index-group summary {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
list-style: none;
}
.index-page .index-group summary::-webkit-details-marker { display: none; }
.index-page .index-group-title {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--gb-ink);
font-size: 20px;
font-weight: 950;
line-height: 1.3;
}
.index-page .index-group-title .type-icon {
flex: none;
}
.index-page .index-group summary small {
flex: none;
display: inline-flex;
align-items: center;
min-height: 26px;
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-muted);
font-size: 12px;
font-weight: 950;
padding: 4px 8px;
}
.index-group-note {
margin: 10px 0 0;
color: var(--gb-muted);
font-size: 13px;
font-weight: 820;
line-height: 1.55;
}
.index-page .index-group h2 {
margin: 0;
line-height: 1.3;
}
.index-page .index-group h2 small {
display: inline-flex;
align-items: center;
min-height: 26px;
border-radius: 999px;
background: var(--gb-chip);
font-size: 12px;
font-weight: 950;
padding: 4px 8px;
}
.index-page .index-list {
gap: 8px;
margin-top: 14px;
}
.index-letter-jump {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.index-letter-jump a {
min-width: 31px;
min-height: 31px;
border: 1px solid rgba(30,107,107,.12);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-brand-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 950;
padding: 5px 8px;
}
.index-letter-group {
margin-top: 16px;
}
.index-letter-group h3 {
margin: 0;
color: var(--gb-brand-dark);
font-size: 15px;
font-weight: 950;
}
.index-group-more {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.index-group-more .secondary-link {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
padding: 8px 11px;
}
.index-page .index-list a {
min-height: 42px;
display: flex;
align-items: center;
border: 1px solid transparent;
background: rgba(247,250,249,.82);
padding: 9px 11px;
transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.index-page .index-list a:hover {
border-color: rgba(30,107,107,.16);
transform: translateY(-1px);
}
.article-section-grid {
display: grid;
gap: 16px;
margin-top: 10px;
}
.article-section {
min-width: 0;
scroll-margin-top: calc(var(--gb-header-h) + 20px);
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92)),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
padding: clamp(18px, 2vw, 24px);
}
.article-section h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
font-size: 21px;
font-weight: 930;
}
.article-section h2::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--gb-blue);
box-shadow: 0 0 0 5px var(--gb-blue-soft);
}
.article-copy p,
.article-section > p { max-width: 72ch; margin: 0 0 14px; color: var(--gb-text); font-size: 17px; line-height: 1.84; font-family: var(--gb-serif); }
.article-copy p:last-child,
.article-section > p:last-child { margin-bottom: 0; }
.article-section-attribution {
display: flex;
flex-wrap: wrap;
gap: 7px 14px;
margin-top: 18px;
padding-top: 13px;
border-top: 1px solid var(--gb-card-border);
color: var(--gb-muted);
font-size: 13px;
line-height: 1.55;
}
.article-section-attribution span,
.article-section-attribution a { overflow-wrap: anywhere; }
.article-section-attribution a {
color: var(--gb-blue-dark);
text-underline-offset: 3px;
}
.article-note-card {
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,247,.92)),
var(--gb-paper);
box-shadow: var(--gb-shadow-soft);
display: grid;
gap: 12px;
padding: 18px;
}
.article-note-card p {
margin: 0;
color: var(--gb-text);
font-family: var(--gb-ui);
font-size: 15px;
line-height: 1.68;
}
.source-note-list {
display: grid;
gap: 8px;
}
.source-note-list p {
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background: rgba(244,247,250,.78);
display: grid;
gap: 4px;
padding: 11px 12px;
}
.source-note-list strong,
.source-note-list a {
color: var(--gb-blue-dark);
font-weight: 930;
}
.source-note-list span {
color: var(--gb-muted);
font-size: 13px;
line-height: 1.55;
}
.article-copy p,
.faq summary,
.breadcrumb a,
.article-meta span { overflow-wrap: anywhere; }
.faq details {
border: 1px solid var(--gb-card-border);
border-radius: var(--gb-radius);
background: rgba(255,255,255,.9);
padding: 14px;
margin-bottom: 10px;
box-shadow: var(--gb-shadow-soft);
}
.faq summary { font-weight: 900; cursor: pointer; }
.static-faq-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.static-faq-list details {
margin-bottom: 0;
}
.static-faq-list p {
margin: 10px 0 0;
color: var(--gb-text);
font-size: 14px;
line-height: 1.68;
}
.footer {
width: min(var(--gb-shell), calc(100% - var(--gb-gutter) * 2));
margin: 0 auto;
content-visibility: auto;
contain-intrinsic-size: auto 460px;
border-top: 1px solid var(--gb-line);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 26px 0 36px;
color: var(--gb-muted);
font-size: 13px;
}
.footer div { display: grid; gap: 2px; }
.footer strong { color: var(--gb-ink); font-size: 15px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: flex-end; }
.footer nav a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
border-radius: 999px;
padding: 5px 9px;
transition: background .16s ease, color .16s ease;
}
.footer nav a:hover {
background: var(--gb-chip);
color: var(--gb-brand-dark);
}
.footer nav .icon { width: 15px; height: 15px; }
.footer-browse {
width: 100%;
justify-content: flex-start !important;
border-top: 1px solid var(--gb-line);
padding-top: 14px;
}
.footer-browse .type-icon {
width: 22px;
height: 22px;
border-radius: 999px;
}
.subscribe {
width: 100%;
border-top: 1px solid var(--gb-line);
padding-top: 16px;
margin-top: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.subscribe-label { flex: 1 1 240px; min-width: 0; color: var(--gb-muted); font-size: 13px; font-weight: 700; }
.subscribe label { min-width: 0; flex: 0 1 240px; }
.subscribe input {
width: 100%;
height: 40px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
background: var(--gb-paper);
color: var(--gb-ink);
font-size: 16px;
padding: 0 12px;
}
.subscribe input:focus-visible { outline: 2px solid var(--gb-focus); outline-offset: 2px; }
.subscribe button {
min-height: 40px;
border: 0;
border-radius: var(--gb-radius-sm);
background: var(--gb-brand);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 900;
padding: 0 18px;
transition: background .18s ease, color .18s ease;
}
.subscribe button:hover { background: var(--gb-brand-dark); }
.subscribe button .icon { width: 15px; height: 15px; }
.subscribe-rss {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius-sm);
color: var(--gb-muted);
font-weight: 850;
padding: 0 14px;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.subscribe-rss-primary {
border-color: transparent;
background: var(--gb-brand);
color: #fff;
}
.subscribe-rss:hover { color: var(--gb-brand-dark); }
.subscribe-rss-primary:hover { background: var(--gb-brand-dark); color: #fff; }
.subscribe-rss .icon { width: 15px; height: 15px; }
.bottom-nav { display: none; }
.floating-utilities {
position: fixed;
right: max(20px, calc((100vw - var(--gb-shell)) / 2 + 20px));
bottom: 22px;
z-index: 38;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.app-install-prompt {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid rgba(15,71,71,.18);
border-radius: 999px;
background: var(--gb-brand-dark);
color: #fff;
cursor: pointer;
box-shadow: 0 18px 38px -22px rgba(6,54,56,.78);
font: inherit;
font-size: 13px;
font-weight: 900;
padding: 0 17px;
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.app-install-prompt[hidden],
.scroll-top-button[hidden],
.app-install-dialog[hidden] { display: none !important; }
.app-install-prompt:hover {
background: var(--gb-brand);
box-shadow: 0 22px 42px -22px rgba(6,54,56,.88);
transform: translateY(-2px);
}
.app-install-ci { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid rgba(255,255,255,.42); border-radius: 8px; background: #fff; object-fit: cover; }
.scroll-top-button { width: 48px; height: 48px; flex: 0 0 48px; display: inline-grid; place-items: center; border: 1px solid rgba(15,71,71,.18); border-radius: 999px; background: var(--gb-paper); color: var(--gb-brand-dark); cursor: pointer; box-shadow: 0 18px 38px -22px rgba(6,54,56,.78); transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.scroll-top-button:hover { background: var(--gb-brand-dark); color: #fff; box-shadow: 0 22px 42px -22px rgba(6,54,56,.88); transform: translateY(-2px); }
.scroll-top-button .icon { width: 19px; height: 19px; }
.app-install-prompt:focus-visible,
.scroll-top-button:focus-visible { outline: 3px solid var(--gb-focus); outline-offset: 3px; }
.app-install-dialog {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
background: rgba(4,22,23,.58);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
padding: 22px;
}
.app-install-dialog-card {
position: relative;
width: min(420px, 100%);
border: 1px solid rgba(148,126,91,.34);
border-radius: 10px;
background:
linear-gradient(145deg, rgba(255,255,255,.97), rgba(247,243,232,.96)),
var(--gb-paper);
color: var(--gb-ink);
box-shadow: 0 38px 90px -46px rgba(3,28,29,.72);
padding: 34px 32px 30px;
text-align: center;
}
.app-install-dialog-card > img { width: 72px; height: 72px; margin: 0 auto 18px; }
.app-install-dialog-card .eyebrow { margin: 0; }
.app-install-dialog-card h2 {
margin: 8px 0 12px;
font-family: var(--gb-serif);
font-size: 27px;
line-height: 1.3;
}
.app-install-dialog-card > p:not(.eyebrow) { margin: 0; color: var(--gb-text); line-height: 1.72; }
.app-install-dialog-card .app-install-note { margin-top: 10px !important; color: var(--gb-muted) !important; font-size: 13px; }
.app-install-close {
position: absolute;
top: 14px;
right: 14px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--gb-muted);
cursor: pointer;
}
.app-install-close:hover { background: var(--gb-chip); color: var(--gb-brand-dark); }
.app-install-close .icon { width: 17px; height: 17px; }
.app-install-confirm {
width: 100%;
min-height: 46px;
margin-top: 22px;
border: 0;
border-radius: 6px;
background: var(--gb-brand-dark);
color: #fff;
cursor: pointer;
font: inherit;
font-weight: 900;
}
.app-install-confirm:hover { background: var(--gb-brand); }
html.has-install-dialog { overflow: hidden; }
html[data-theme="dark"] .app-install-dialog-card {
border-color: var(--gb-card-border);
background: linear-gradient(145deg, rgba(23,42,40,.98), rgba(17,32,31,.98));
}
html[data-theme="dark"] .scroll-top-button { border-color: var(--gb-card-border); background: var(--gb-card-surface); color: var(--gb-ink); }
html[data-theme="dark"] .scroll-top-button:hover { background: var(--gb-brand); color: #fff; }
@media (max-width: 760px) {
.floating-utilities {
right: 14px;
bottom: calc(82px + env(safe-area-inset-bottom, 0px));
gap: 8px;
}
.app-install-prompt {
min-height: 44px;
padding: 0 13px 0 8px;
}
.app-install-ci { width: 27px; height: 27px; flex-basis: 27px; }
.scroll-top-button { width: 44px; height: 44px; flex-basis: 44px; }
.app-install-dialog { align-items: end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.app-install-dialog-card { border-radius: 14px; padding: 30px 22px 22px; }
}
.home-purpose-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-purpose-card .category-icon svg {
width: 24px;
height: 24px;
}
.home-library-band,
.local-data-panel {
border: 1px solid var(--gb-line);
border-radius: var(--gb-radius);
background: var(--gb-card-surface);
box-shadow: var(--gb-shadow-soft);
padding: clamp(20px, 3vw, 30px);
}
.home-library-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.home-library-band h2,
.local-data-panel h2 { margin: 0; }
.home-library-band p,
.local-data-panel > div > p {
margin: 10px 0 0;
color: var(--gb-muted);
line-height: 1.7;
}
.home-library-actions,
.local-data-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.home-library-actions .secondary-link {
min-height: 42px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: var(--gb-paper);
padding: 9px 13px;
}
.local-data-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
align-items: center;
gap: 28px;
}
.local-data-panel ul {
display: grid;
gap: 8px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.local-data-panel li {
display: flex;
align-items: flex-start;
gap: 8px;
color: var(--gb-text);
line-height: 1.55;
}
.local-data-panel li svg {
flex: none;
width: 17px;
height: 17px;
margin-top: 3px;
color: var(--gb-brand);
}
.local-data-actions {
align-items: stretch;
flex-direction: column;
}
.button-danger {
min-height: 44px;
border-color: rgba(170, 54, 54, .32);
background: rgba(170, 54, 54, .08);
color: #8f2f2f;
cursor: pointer;
}
.recommendation-toggle[aria-pressed="true"] {
border-color: rgba(30,107,107,.4);
background: var(--gb-chip);
color: var(--gb-brand-dark);
}
@media (max-width: 1024px) {
.mobile-search-link { display: inline-grid; margin-left: auto; }
.lang { margin-left: 0; }
}
@media (max-width: 1100px) {
.home-hero-copy {
grid-template-columns: 1fr;
gap: 22px;
}
.home-hero-search {
border-top: 1px solid var(--gb-line);
border-left: 0;
padding-top: 22px;
padding-left: 0;
}
.article {
max-width: none;
}
.article-layout {
display: block;
}
.article-main {
max-width: none;
}
.article-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 28px;
}
.article-side-outline {
display: none;
}
}
@media (max-width: 900px) {
:root { --gb-gutter: 22px; }
.top nav { overflow-x: auto; scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a, .nav-link { font-size: 13px; padding: 5px 8px 5px 6px; }
.top nav a svg, .nav-link svg { padding: 4px; }
.hero { min-height: auto; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.hero-copy { padding: 28px; }
.hero h1 { font-size: 40px; }
.page-hero h1, .article h1 { font-size: 38px; }
.article[data-type="quote"] h1,
.article[data-type="en_quote"] h1 {
font-size: 32px;
line-height: 1.24;
}
.article[data-type="en_quote"] h1 { font-size: 30px; }
.hero-visual, .live-board { min-height: auto; }
.grid, .grid.compact, .category-grid, .usecase-grid, .type-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.search-assist,
.discovery-grid,
.quote-connection-grid,
.article-next-grid,
.static-faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.today-summary, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-featured .card:first-child { grid-column: auto; min-height: 180px; }
.grid-featured .card:first-child h2,
.grid-featured .card:first-child h3 { font-size: 19px; }
.daily-spotlights { grid-template-columns: 1fr; }
.static-layout { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1024px) {
:root { --gb-gutter: 24px; }
.hero {
grid-template-columns: 1fr;
gap: 14px;
margin-top: 18px;
}
.hero-copy { padding: 30px; }
.hero h1 { font-size: clamp(36px, 4.5vw, 42px); }
.hero-visual,
.live-board {
min-height: auto;
}
.grid,
.grid.compact,
.category-grid,
.usecase-grid,
.type-directory,
.trust-grid,
.search-assist,
.discovery-grid,
.quote-connection-grid,
.article-next-grid,
.static-faq-list,
.today-summary,
.metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.article-sidebar { grid-template-columns: 1fr; }
body { font-size: 15px; padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
:root { --gb-gutter: 16px; --gb-header-h: 58px; }
.top { gap: 8px; }
.brand > span:first-child { width: 34px; height: 34px; }
.brand img,
.brand-mark img { width: 34px; height: 34px; border-radius: 10px; }
.brand strong { font-size: 16px; }
.brand { margin-right: auto; }
.brand small { display: none; }
.top nav { display: none; }
.lang { margin-left: 0; }
.lang a[aria-current=true] { display: none; }
.lang a,
.lang a.lang-home,
.lang a.lang-en-quote {
min-width: 44px;
padding-inline: 8px;
}
.lang a.lang-home,
.lang a.lang-en-quote { font-size: 0; }
.lang a.lang-home::after { content: "한"; font-size: 11px; }
.lang a.lang-en-quote::after { content: "EN"; font-size: 11px; }
.hero { gap: 12px; margin: 12px 0 18px; }
.home-purpose-grid { grid-template-columns: 1fr; }
.home-library-band { align-items: stretch; flex-direction: column; }
.home-library-actions { display: grid; grid-template-columns: 1fr; }
.local-data-panel { grid-template-columns: 1fr; gap: 20px; }
.hero-copy { padding: 20px; }
.page-hero { padding: 28px 0 16px; }
.section { padding: 30px 0; }
.index-page { padding-top: 18px; }
.index-panel { padding: 16px; }
.index-panel-head {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.index-panel-head > span { width: fit-content; }
.index-page .index-group { padding: 14px; }
.index-page .index-list { grid-template-columns: 1fr; }
.hero h1, .page-hero h1, .article h1 {
max-width: 100%;
font-size: 29px;
line-height: 1.16;
word-break: normal;
overflow-wrap: anywhere;
}
.article[data-type="quote"] h1,
.article[data-type="en_quote"] h1 {
font-size: 26px;
line-height: 1.28;
}
.article[data-type="en_quote"] h1 { font-size: 24px; }
.hero .lead { margin-top: 12px; }
.hero-current { height: 14px; margin: 10px 0 0; }
.hero .search { margin-top: 12px; }
.hero .connection-trail { display: none; }
.live-board { display: none; }
.article { padding: 18px 0 42px; }
.article-head { padding: 10px 0 18px; }
.article-spotlight {
margin-bottom: 20px;
border-radius: var(--gb-radius);
padding: 22px 20px;
}
.article .article-primary-text {
font-size: 22px;
line-height: 1.62;
}
.article-term strong { font-size: 30px; }
.article-term p { font-size: 17px; }
.article-primary-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.article-primary-actions > * {
min-height: 44px;
font-size: 12px;
padding-inline: 7px;
}
.article-opening-copy p {
font-size: 17px;
line-height: 1.84;
}
.article-meta { gap: 6px; margin-top: 14px; }
.article-meta span { min-height: 28px; padding: 5px 9px; }
.article-outline ol {
max-height: 112px;
overflow-y: auto;
padding-right: 4px;
}
.article-discovery-head {
align-items: stretch;
flex-direction: column;
}
.gb-reading-settings {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px;
}
.article-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.article-share-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-share-actions .share-btn-primary {
grid-column: 1 / -1;
}
.article-tool-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.article-tool-actions .tool-btn {
min-height: 44px;
font-size: 12px;
padding-inline: 7px;
}
.article-actions > * {
width: 100%;
min-width: 0;
justify-content: center;
}
.share-panel {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
z-index: 115;
max-width: none;
max-height: min(52vh, 390px);
margin: 0;
overflow: auto;
border-radius: 18px;
}
.share-panel-actions {
grid-template-columns: 1fr;
}
.article-sticky-share { display: none; }
body.gb-reading .article-sticky-share,
body.gb-reading .share-panel {
display: none;
}
.article-share-block {
display: block;
margin: 24px 0 6px;
padding: 16px;
}
.article-share-block h2 {
font-size: 19px;
line-height: 1.32;
}
.article-share-block p:not(.eyebrow) {
font-size: 14px;
}
.article-share-block .article-actions {
margin-top: 14px;
}
.article-share-block .article-share-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-share-block .article-share-actions .share-btn-primary {
grid-column: auto;
}
.article-related-more {
align-items: stretch;
flex-direction: column;
padding: 14px;
}
.article-related-more > div {
width: 100%;
}
.article-related-more .primary-link,
.article-related-more .secondary-link {
flex: 1 1 150px;
justify-content: center;
}
.person-source-note {
grid-template-columns: 1fr;
}
.article-section { padding: 20px; }
.article-copy p,
.article-section > p { font-size: 16.5px; line-height: 1.76; }
.article-note-card { padding: 14px; }
.lead, .hero-text, .page-hero p { font-size: 15.5px; }
.search { grid-template-columns: 1fr; align-items: stretch; gap: 8px; min-height: 0; padding: 7px; }
.search button { width: 100%; min-width: 0; }
.home-hero-search .search {
grid-template-columns: minmax(0, 1fr) 48px;
align-items: center;
gap: 4px;
min-height: 54px;
padding: 4px;
}
.home-hero-search .search button { width: 48px; height: 46px; padding: 0; }
.home-hero-search .search button span { display: none; }
.builder-toolbar { grid-template-columns: 1fr; align-items: stretch; }
.builder-toolbar button { width: 100%; }
.builder-occasion-picker {
grid-template-columns: 1fr auto;
}
.builder-occasion-picker label {
grid-column: 1 / -1;
}
.chips, .chip-row, .filter-bar, .hub-chips { gap: 7px; }
.search-status { align-items: flex-start; padding: 11px 12px; }
.search-assist { grid-template-columns: 1fr; }
.scroll-hint {
display: block;
}
.more-card-cta {
align-items: stretch;
flex-direction: column;
}
.more-card-cta > div {
width: 100%;
}
.more-card-cta .button,
.more-card-cta .secondary-link {
flex: 1 1 160px;
justify-content: center;
}
.index-type-jump {
border-radius: 16px;
margin-top: 10px;
}
.filter-bar {
flex-wrap: nowrap;
overflow-x: auto;
padding: 0 22px 4px 0;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar a {
flex: 0 0 auto;
max-width: min(78vw, 320px);
}
.hub-group {
padding: 20px 0;
}
.hub-group .section-head {
align-items: flex-start;
}
.hub-group .section-head h2 {
font-size: 20px;
}
.hub-index-chips {
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
padding: 0 22px 4px 0;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.hub-index-chips::-webkit-scrollbar { display: none; }
.hub-index-chips a {
flex: 0 0 auto;
max-width: min(76vw, 300px);
}
.search-sort {
align-items: flex-start;
flex-direction: column;
}
.search-sort > div {
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
padding: 0 22px 4px 0;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.search-sort > div::-webkit-scrollbar { display: none; }
.search-sort a {
flex: 0 0 auto;
}
.connection-trail a,
.chips a:not(.primary-link):not(.secondary-link),
.chip-row a:not(.primary-link):not(.secondary-link),
.filter-bar a,
.hub-chips a,
.category-card a { padding: 8px 10px; }
.intent-guide-grid-compact { grid-template-columns: 1fr; }
.index-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-metrics,
.grid,
.grid.compact,
.person-grid,
.person-quote-grid,
.category-grid,
.usecase-grid,
.type-directory,
.trust-grid,
.discovery-grid,
.quote-connection-grid,
.article-next-grid,
.static-faq-list,
.today-summary,
.metric-grid,
.spotlight-grid { grid-template-columns: 1fr; }
.hero-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.hero-metrics div { padding: 12px 9px; }
.hero-metrics strong { font-size: 18px; }
.hero-metrics span { font-size: 11px; }
.section-head, .guide-band, .footer { align-items: stretch; flex-direction: column; }
.section-head { gap: 12px; }
.text-link, .secondary-link, .primary-link { width: fit-content; max-width: 100%; }
.card, .today-card { min-height: auto; }
.card-actions {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
.card-action-buttons {
width: 100%;
justify-content: flex-start;
}
.quality-head,
.coverage-head,
.daily-head,
.status-head {
align-items: flex-start;
flex-direction: column;
}
.quality-row,
.coverage-row,
.daily-row,
.status-row { grid-template-columns: 1fr; }
.quality-metrics,
.coverage-metrics,
.daily-metrics,
.status-metrics { grid-template-columns: 1fr; }
.board-head { padding: 18px 18px 0; }
.board-list { padding: 16px 18px 18px; }
.note { margin: 0 18px 18px; }
.footer { display: flex; padding-bottom: 36px; }
.footer nav { justify-content: flex-start; }
.subscribe label,
.subscribe button {
flex: 1 1 100%;
}
.subscribe-rss {
width: fit-content;
}
.article blockquote { font-size: 18.5px; padding: 20px; }
.bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 45;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 1fr;
width: 100%;
border-top: 1px solid rgba(220,228,234,.92);
background: rgba(255,255,255,.96);
padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -16px 34px -28px rgba(15,47,47,.42);
}
.bottom-nav a,
.bottom-menu > summary {
min-width: 0;
display: grid;
align-content: center;
justify-items: center;
gap: 4px;
min-height: 54px;
border-radius: 12px;
color: var(--gb-muted);
font-size: 11.5px;
font-weight: 900;
padding: 4px 2px;
overflow: hidden;
transition: background .18s ease, color .18s ease;
}
.bottom-menu {
min-width: 0;
position: static;
}
.bottom-menu[open]::before {
content: "";
position: fixed;
inset: 0;
z-index: 48;
background: rgba(15,23,42,.12);
pointer-events: none;
}
.bottom-menu > summary {
height: 100%;
list-style: none;
cursor: pointer;
}
.bottom-menu > summary::-webkit-details-marker { display: none; }
.bottom-nav a span,
.bottom-menu > summary span {
max-width: 100%;
overflow: hidden;
line-height: 1.12;
overflow-wrap: anywhere;
text-align: center;
white-space: normal;
}
.bottom-nav a svg,
.bottom-menu > summary svg {
width: 16px;
height: 16px;
box-sizing: content-box;
border: 1px solid rgba(30,107,107,.12);
border-radius: 999px;
background: rgba(238,243,241,.9);
color: #526c70;
padding: 5px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.bottom-nav a[aria-current="page"],
.bottom-menu > summary[aria-current="page"],
.bottom-menu[open] > summary {
background: rgba(30,107,107,.045);
color: var(--gb-blue-dark);
}
.bottom-nav a[aria-current="page"] svg,
.bottom-menu > summary[aria-current="page"] svg,
.bottom-menu[open] > summary svg {
border-color: rgba(30,107,107,.22);
background: var(--gb-brand-soft);
color: var(--gb-brand-dark);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.44);
}
.bottom-menu-panel {
position: fixed;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
transform: none;
bottom: calc(78px + env(safe-area-inset-bottom, 0px));
z-index: 50;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
width: auto;
max-width: 520px;
margin-inline: auto;
max-height: min(62vh, 430px);
overflow-y: auto;
border: 1px solid var(--gb-card-border);
border-radius: 16px;
background: rgba(255,255,255,.98);
box-shadow: 0 24px 58px -30px rgba(15,47,47,.42);
padding: 12px;
backdrop-filter: blur(18px);
}
.bottom-menu-panel::before {
content: "";
grid-column: 1 / -1;
justify-self: center;
width: 36px;
height: 4px;
border-radius: 999px;
background: var(--gb-line-strong);
margin: 0 0 4px;
}
.bottom-menu-panel .nav-menu-title {
grid-column: 1 / -1;
padding: 2px 4px 0;
}
.bottom-menu-panel .nav-menu-title-more {
margin-top: 4px;
padding-top: 10px;
}
.bottom-menu-panel a {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-height: 44px;
border-radius: var(--gb-radius-sm);
color: var(--gb-text);
font-size: 13px;
font-weight: 850;
padding: 8px 10px;
text-align: left;
transition: background .16s ease, color .16s ease, transform .16s ease;
}
.bottom-menu-panel a:hover {
background: rgba(30,107,107,.045);
color: var(--gb-brand-dark);
transform: translateX(1px);
}
.bottom-menu-panel a:hover > .icon {
border-color: rgba(30,107,107,.22);
background: #fff;
}
.bottom-menu-panel .type-icon {
width: 24px;
height: 24px;
border-radius: 999px;
}
.bottom-menu-panel .type-icon .icon,
.bottom-menu-panel a > .icon {
width: 14px;
height: 14px;
}
.bottom-menu-panel .type-icon .icon {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.bottom-menu-panel a > .icon {
box-sizing: content-box;
border: 1px solid rgba(30,107,107,.12);
border-radius: 999px;
background: var(--gb-chip);
color: var(--gb-brand-dark);
padding: 4px;
}
.bottom-menu-panel .nav-menu-all,
.bottom-menu-panel .nav-menu-hubs {
grid-column: span 2;
}
.bottom-menu-panel .nav-menu-all {
border-radius: 0 0 var(--gb-radius-sm) var(--gb-radius-sm);
margin-top: 2px;
padding-top: 8px;
}
}
@media (max-width: 420px) {
:root { --gb-gutter: 14px; }
.lang a {
min-width: 0;
font-size: 0;
padding: 6px 7px;
}
.lang a.lang-home,
.lang a.lang-en-quote { min-width: 40px; }
.hero-copy,
.card,
.empty,
.static-card,
.usecase-card,
.category-card,
.today-card,
.quality-card,
.quality-panel,
.quality-item,
.coverage-card,
.coverage-panel,
.coverage-item,
.daily-card,
.daily-panel,
.daily-item,
.status-card,
.status-panel,
.status-item,
.trust-card,
.search-status,
.article-outline,
.gb-reading-settings,
.text-block p { padding: 18px; }
.page-hero { padding-top: 36px; }
.hero h1, .page-hero h1, .article h1 { font-size: 29px; }
.search input { padding: 0 8px; font-size: 16px; }
.today-card::after { right: 14px; }
.today-card h2,
.today-card h3 { max-width: calc(100% - 38px); }
}
@media (max-width: 360px) {
.brand { gap: 0; }
.brand strong { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .001ms !important;
}
}
html[data-theme="dark"] {
--gb-bg: #0c1719;
--gb-paper: #11201f;
--gb-paper-soft: #16201f;
--gb-ink: #e8f1ee;
--gb-text: #d3e0dc;
--gb-muted: #9fb2ad;
--gb-faint: #7a8e89;
--gb-line: #243634;
--gb-line-strong: #354b47;
--gb-brand: #4fb5a3;
--gb-brand-dark: #6fcab8;
--gb-brand-soft: rgba(30, 107, 107, .22);
--gb-brand-ring: rgba(79, 181, 163, .3);
--gb-blue: #5cae9f;
--gb-blue-dark: #bfe7dd;
--gb-blue-soft: rgba(92, 174, 159, .16);
--gb-chip: rgba(28, 44, 42, .86);
--gb-chip-hover: rgba(40, 62, 59, .92);
--gb-coral: #d6a866;
--gb-coral-soft: rgba(214,168,102,.16);
--gb-gold: #d4b572;
--gb-gold-soft: rgba(212,181,114,.15);
--gb-violet: #aeb2e6;
--gb-violet-soft: rgba(174,178,230,.16);
--gb-amber: #d8b066;
--gb-amber-soft: rgba(216,176,102,.16);
--gb-focus: #6fcab8;
--gb-card-surface: rgba(17,32,31,.94);
--gb-card-border: rgba(53,75,71,.78);
--gb-current: rgba(79,181,163,.32);
--gb-slate: #060f10;
color-scheme: dark;
}
html[data-theme="dark"] .top { background: rgba(13,24,23,.94); }
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .lang {
border-color: var(--gb-card-border);
background: rgba(17,32,31,.86);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .static-card,
html[data-theme="dark"] .usecase-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .today-card,
html[data-theme="dark"] .quality-card,
html[data-theme="dark"] .quality-panel,
html[data-theme="dark"] .quality-item,
html[data-theme="dark"] .coverage-card,
html[data-theme="dark"] .coverage-panel,
html[data-theme="dark"] .coverage-item,
html[data-theme="dark"] .daily-card,
html[data-theme="dark"] .daily-panel,
html[data-theme="dark"] .daily-item,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .status-panel,
html[data-theme="dark"] .status-item,
html[data-theme="dark"] .trust-card,
html[data-theme="dark"] .assist-card,
html[data-theme="dark"] .builder-toolbar,
html[data-theme="dark"] .builder-recent,
html[data-theme="dark"] .search-suggest-panel,
html[data-theme="dark"] .discovery-card,
html[data-theme="dark"] .quote-connection-card,
html[data-theme="dark"] .article-next-card,
html[data-theme="dark"] .person-filter-group,
html[data-theme="dark"] .person-source-note,
html[data-theme="dark"] .gb-reading-settings,
html[data-theme="dark"] .share-panel,
html[data-theme="dark"] .article-share-block,
html[data-theme="dark"] .article-related-more,
html[data-theme="dark"] .article-side-card,
html[data-theme="dark"] .article-section,
html[data-theme="dark"] .search-status,
html[data-theme="dark"] .article-outline,
html[data-theme="dark"] .faq details,
html[data-theme="dark"] .text-block p,
html[data-theme="dark"] .metric-grid div,
html[data-theme="dark"] .today-summary div,
html[data-theme="dark"] .quality-metric,
html[data-theme="dark"] .coverage-metric,
html[data-theme="dark"] .daily-metric,
html[data-theme="dark"] .status-metric,
html[data-theme="dark"] .hero-metrics div,
html[data-theme="dark"] .guide-band,
html[data-theme="dark"] .static-layout aside,
html[data-theme="dark"] .metric {
background: var(--gb-card-surface);
}
html[data-theme="dark"] .search,
html[data-theme="dark"] .builder-toolbar input,
html[data-theme="dark"] .builder-toolbar button,
html[data-theme="dark"] .builder-recent-head button,
html[data-theme="dark"] .reading-setting-row button,
html[data-theme="dark"] .share-panel-head button,
html[data-theme="dark"] .share-panel-actions button,
html[data-theme="dark"] .share-panel-actions a,
html[data-theme="dark"] .share-card-btn,
html[data-theme="dark"] .card-share-btn,
html[data-theme="dark"] .card-bookmark-btn,
html[data-theme="dark"] .card-meta-row span,
html[data-theme="dark"] .empty-links a,
html[data-theme="dark"] .search-suggest-panel a,
html[data-theme="dark"] .search-sort a,
html[data-theme="dark"] .connection-trail a,
html[data-theme="dark"] .chips a:not(.primary-link):not(.secondary-link),
html[data-theme="dark"] .chips > span,
html[data-theme="dark"] .chip-row a:not(.primary-link):not(.secondary-link),
html[data-theme="dark"] .filter-bar a,
html[data-theme="dark"] .hub-chips a,
html[data-theme="dark"] .category-card a,
html[data-theme="dark"] .quality-chip,
html[data-theme="dark"] .quality-badge,
html[data-theme="dark"] .coverage-chip,
html[data-theme="dark"] .coverage-badge,
html[data-theme="dark"] .daily-chip,
html[data-theme="dark"] .daily-badge,
html[data-theme="dark"] .status-chip,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .article-outline a,
html[data-theme="dark"] .article-side-facts span,
html[data-theme="dark"] .article-side-outline a,
html[data-theme="dark"] .article-side-links a,
html[data-theme="dark"] .article-side-policies a,
html[data-theme="dark"] .quote-card-meta a,
html[data-theme="dark"] .quote-card-meta span,
html[data-theme="dark"] .person-card-stats span,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .secondary-link {
background: var(--gb-chip);
}
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .live-board {
border-color: var(--gb-card-border);
background:
linear-gradient(180deg, rgba(24,37,36,.96), rgba(17,32,31,.94)),
var(--gb-paper);
}
html[data-theme="dark"] .board-item {
border-color: var(--gb-card-border);
background: rgba(24,37,36,.88);
box-shadow: none;
}
html[data-theme="dark"] .board-item:hover {
border-color: var(--gb-line-strong);
background: rgba(28,44,42,.96);
}
html[data-theme="dark"] .note {
border-color: var(--gb-line-strong);
background: rgba(28,44,42,.92);
}
html[data-theme="dark"] .category-card::before,
html[data-theme="dark"] .usecase-card::before,
html[data-theme="dark"] .static-card::before,
html[data-theme="dark"] .today-card::after,
html[data-theme="dark"] .trust-icon,
html[data-theme="dark"] .search-status > span,
html[data-theme="dark"] .static-layout aside svg,
html[data-theme="dark"] .today-card > span,
html[data-theme="dark"] .card-note,
html[data-theme="dark"] .card-bookmark-btn.is-saved,
html[data-theme="dark"] .card-bookmark-btn[aria-pressed="true"],
html[data-theme="dark"] .empty-links a:hover,
html[data-theme="dark"] .connection-trail a:hover,
html[data-theme="dark"] .search-sort a:hover,
html[data-theme="dark"] .hub-chips a:hover {
background: var(--gb-chip-hover);
}
html[data-theme="dark"] .filter-bar a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip-hover);
box-shadow: none;
}
html[data-theme="dark"] .top nav a svg,
html[data-theme="dark"] .nav-link svg,
html[data-theme="dark"] .nav-menu-panel a > .icon,
html[data-theme="dark"] .bottom-nav a svg,
html[data-theme="dark"] .bottom-menu > summary svg,
html[data-theme="dark"] .bottom-menu-panel a > .icon {
border-color: rgba(111,202,184,.16);
background: rgba(28,44,42,.86);
color: var(--gb-muted);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .top nav a:hover svg,
html[data-theme="dark"] .nav-link:hover svg,
html[data-theme="dark"] .nav-menu[open] > .nav-link svg,
html[data-theme="dark"] .nav-menu-panel a:hover > .icon,
html[data-theme="dark"] .bottom-menu-panel a:hover > .icon,
html[data-theme="dark"] .bottom-nav a[aria-current="page"] svg,
html[data-theme="dark"] .bottom-menu > summary[aria-current="page"] svg,
html[data-theme="dark"] .bottom-menu[open] > summary svg {
border-color: rgba(111,202,184,.3);
background: var(--gb-chip-hover);
color: var(--gb-blue-dark);
}
html[data-theme="dark"] .top nav a[aria-current="page"],
html[data-theme="dark"] .nav-link[aria-current="page"] {
background: transparent;
color: var(--gb-blue-dark);
}
html[data-theme="dark"] .top nav a[aria-current="page"] svg,
html[data-theme="dark"] .nav-link[aria-current="page"] svg {
border-color: rgba(111,202,184,.42);
background: var(--gb-blue-dark);
color: #071312;
box-shadow: 0 9px 18px -14px rgba(79,181,163,.72);
}
html[data-theme="dark"] .article blockquote,
html[data-theme="dark"] body.gb-tone-soft .article blockquote,
html[data-theme="dark"] body.gb-tone-soft .article-outline,
html[data-theme="dark"] body.gb-tone-soft .article-section,
html[data-theme="dark"] body.gb-tone-soft .gb-reading-settings,
html[data-theme="dark"] body.gb-tone-warm .article blockquote,
html[data-theme="dark"] body.gb-tone-warm .article-outline,
html[data-theme="dark"] body.gb-tone-warm .article-section,
html[data-theme="dark"] body.gb-tone-warm .gb-reading-settings {
background-color: var(--gb-card-surface);
}
html[data-theme="dark"] .article .article-primary-text,
html[data-theme="dark"] body.gb-tone-soft .article .article-primary-text,
html[data-theme="dark"] body.gb-tone-warm .article .article-primary-text {
background: transparent;
background-color: transparent;
}
html[data-theme="dark"] body.gb-tone-soft,
html[data-theme="dark"] body.gb-tone-warm {
background: var(--gb-bg);
}
html[data-theme="dark"] .index-panel,
html[data-theme="dark"] .index-page .index-group,
html[data-theme="dark"] .index-type-jump,
html[data-theme="dark"] .more-card-cta,
html[data-theme="dark"] .cluster-notice {
border-color: var(--gb-card-border);
background:
linear-gradient(135deg, rgba(23,42,40,.94), rgba(17,32,31,.96)),
var(--gb-paper);
}
html[data-theme="dark"] .cluster-notice strong {
color: var(--gb-blue-dark);
}
html[data-theme="dark"] .cluster-notice p {
color: var(--gb-muted);
}
html[data-theme="dark"] .index-panel-head {
border-bottom-color: var(--gb-line);
}
html[data-theme="dark"] .index-panel-head > span,
html[data-theme="dark"] .index-page .index-group h2 small,
html[data-theme="dark"] .index-page .index-group summary small,
html[data-theme="dark"] .index-letter-jump a,
html[data-theme="dark"] .index-type-jump a:hover,
html[data-theme="dark"] .index-group-more .secondary-link,
html[data-theme="dark"] .more-card-details summary {
border-color: var(--gb-card-border);
background: var(--gb-chip);
color: var(--gb-brand-dark);
}
html[data-theme="dark"] .index-letter-group h3,
html[data-theme="dark"] .index-page .index-group-title {
color: var(--gb-brand-dark);
}
html[data-theme="dark"] .index-page .index-list a {
background: rgba(28,44,42,.78);
}
html[data-theme="dark"] .index-page .index-list a:hover {
border-color: var(--gb-line-strong);
background: var(--gb-chip-hover);
}
html[data-theme="dark"] .article-sticky-share,
html[data-theme="dark"] .bottom-nav {
background: rgba(13,24,23,.96);
}
html[data-theme="dark"] .bottom-menu-panel {
border-color: var(--gb-card-border);
background: rgba(13,24,23,.98);
}
html[data-theme="dark"] .bottom-menu-panel a:hover { background: rgba(79,181,163,.12); }
html[data-theme="dark"] .chips a:not(.primary-link):not(.secondary-link),
html[data-theme="dark"] .chips > span,
html[data-theme="dark"] .chip-row a:not(.primary-link):not(.secondary-link),
html[data-theme="dark"] .category-card a {
color: var(--gb-muted);
}
html[data-theme="dark"] .card-note { color: var(--gb-muted); }
html[data-theme="dark"] .skip,
html[data-theme="dark"] .gb-skip,
html[data-theme="dark"] .search button,
html[data-theme="dark"] .button,
html[data-theme="dark"] .primary-link,
html[data-theme="dark"] .top-search button,
html[data-theme="dark"] .subscribe button,
html[data-theme="dark"] .subscribe-rss-primary,
html[data-theme="dark"] .subscribe-rss-primary:hover {
color: #06201d;
}
html[data-theme="dark"] .home-primary-search button {
color: #fff;
}
html[data-theme="dark"] .page-home .home-library-band .eyebrow {
color: var(--gb-amber);
}
html[data-theme="dark"] .lang a[aria-current="true"] {
color: #0a1d1a;
box-shadow: 0 10px 18px -14px rgba(0,0,0,.6);
}
html[data-theme="dark"] .lang a:not([aria-current="true"]):hover {
background: rgba(255,255,255,.08);
color: var(--gb-brand-dark);
}
html[data-theme="dark"] .top-search {
border-color: var(--gb-card-border);
background: rgba(17,32,31,.92);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .top-search:focus-within {
border-color: rgba(111,202,184,.52);
background: rgba(17,32,31,.98);
box-shadow: 0 0 0 3px rgba(79,181,163,.14);
}
html[data-theme="dark"] .source-note-list p {
border-color: var(--gb-line-strong);
background: rgba(24,37,36,.72);
}
html[data-theme="dark"] .card-kicker > span {
background: color-mix(in srgb, var(--card-accent-soft) 62%, var(--gb-paper));
}
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .status-neutral,
html[data-theme="dark"] .quality-medium,
html[data-theme="dark"] .coverage-partial,
html[data-theme="dark"] .daily-muted {
--gb-state-accent: #94a3b8;
--gb-state-text: #d5e2ed;
}
html[data-theme="dark"] .status-low,
html[data-theme="dark"] .status-gap,
html[data-theme="dark"] .status-missing,
html[data-theme="dark"] .status-error,
html[data-theme="dark"] .quality-low,
html[data-theme="dark"] .quality-gap,
html[data-theme="dark"] .coverage-low,
html[data-theme="dark"] .coverage-gap {
--gb-state-accent: #8aa0b6;
--gb-state-text: #c8d4df;
}
html[data-theme="dark"] .filter-bar a[aria-current="true"] {
border-color: rgba(111,202,184,.5);
background: var(--gb-brand-dark);
color: #071312;
}
html[data-theme="dark"] .search-sort a[aria-current="true"] {
border-color: transparent;
background: var(--gb-brand);
color: #06201d;
}
.icon {
stroke-width: 1.9;
}
.type-icon {
width: 28px;
height: 28px;
border: 0;
background: color-mix(in srgb, currentColor 10%, transparent);
box-shadow: none;
}
.type-icon .icon {
width: 16px;
height: 16px;
stroke-width: 2;
}
.top nav a svg,
.nav-link svg {
width: 17px;
height: 17px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--gb-muted);
padding: 0;
box-shadow: none;
}
.top nav a:hover svg,
.nav-link:hover svg,
.nav-menu[open] > .nav-link svg,
.top nav a[aria-current="page"] svg,
.nav-link[aria-current="page"] svg {
border: 0;
background: transparent;
color: var(--gb-brand-dark);
box-shadow: none;
}
.nav-menu-panel a > .icon,
.bottom-menu-panel a > .icon {
width: 17px;
height: 17px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--gb-brand-dark);
padding: 0;
box-shadow: none;
}
.filter-bar {
gap: 6px;
}
.filter-bar .type-icon,
.footer-browse .type-icon {
display: none;
}
.filter-bar a {
gap: 0;
padding-inline: 12px;
}
.card-kicker span .type-icon {
width: 20px;
height: 20px;
border: 0;
background: transparent;
box-shadow: none;
}
.card-kicker span .type-icon .icon {
width: 14px;
height: 14px;
stroke-width: 2.1;
}
.bottom-nav a svg,
.bottom-menu > summary svg {
width: 20px;
height: 20px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--gb-muted);
padding: 0;
box-shadow: none;
}
.bottom-nav a[aria-current="page"] svg,
.bottom-menu > summary[aria-current="page"] svg,
.bottom-menu[open] > summary svg {
border: 0;
background: transparent;
color: var(--gb-brand-dark);
box-shadow: none;
stroke-width: 2.25;
}
.footer-browse a {
gap: 0;
padding-inline: 10px;
}
.top .brand { gap: 11px; }
.top .brand > span:first-child,
.top .brand img {
width: 42px;
height: 42px;
border-radius: 50%;
box-shadow: none;
}
.top .brand strong {
color: var(--gb-brand-dark);
font-size: 24px;
line-height: 1;
}
.primary-collection-nav { gap: 1px; }
.primary-collection-nav > a {
gap: 5px;
min-height: 44px;
border-radius: 7px;
color: var(--gb-ink);
font-family: var(--gb-serif);
font-size: 14px;
font-weight: 700;
padding-inline: 7px 9px;
}
.primary-collection-nav > a > .icon {
width: 15px;
height: 15px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--gb-brand-dark);
padding: 0;
}
.primary-collection-nav > a:hover > .icon,
.primary-collection-nav > a[aria-current="page"] > .icon {
border: 0;
background: transparent;
color: var(--gb-brand-dark);
box-shadow: none;
}
.primary-collection-nav > a[aria-current="page"]::after {
left: 8px;
right: 8px;
bottom: 1px;
}
@media (min-width: 1025px) {
.top-search {
width: clamp(190px, 17vw, 246px);
border-radius: 7px;
background: rgba(255,255,255,.94);
}
.top-search button { border-radius: 6px; }
}
.home-featured-grid .card { padding-right: 58px; }
.home-featured-grid .card-actions { padding-right: 0; }
.home-featured-grid .card-bookmark-btn {
position: absolute;
z-index: 3;
top: 16px;
right: 16px;
width: 34px;
min-height: 34px;
display: grid;
place-items: center;
border-color: transparent;
border-radius: 6px;
background: transparent;
padding: 0;
}
.home-featured-grid .card-bookmark-btn span { display: none; }
.home-featured-grid .card-bookmark-btn .icon { width: 17px; height: 17px; }
.home-featured-grid .card-kicker { padding-right: 24px; }
@media (max-width: 1180px) and (min-width: 761px) {
.primary-collection-nav > a {
gap: 4px;
font-size: 13px;
padding-inline: 5px 7px;
}
.primary-collection-nav > a > .icon { width: 14px; height: 14px; }
.top .brand strong { font-size: 21px; }
}
@media (max-width: 760px) {
.top .brand { gap: 8px; }
.top .brand > span:first-child,
.top .brand img { width: 34px; height: 34px; }
.top .brand strong { font-size: 18px; }
}
@media (max-width: 340px) {
.top .brand strong { font-size: 16px; }
}
.home-hero {
margin: 18px 0 0;
}
.home-hero-stage {
position: relative;
isolation: isolate;
width: 100%;
min-width: 0;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
align-items: center;
gap: clamp(36px, 5vw, 74px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
background:
radial-gradient(circle at 12% 118%, rgba(201,154,78,.19), transparent 34%),
radial-gradient(circle at 96% 4%, rgba(255,255,255,.08), transparent 25%),
linear-gradient(135deg, #0a3c3e 0%, #0f4747 52%, #155654 100%);
box-shadow: 0 30px 72px -50px rgba(6,43,43,.82);
padding: clamp(42px, 5vw, 68px);
}
.home-hero-stage::before {
content: "";
position: absolute;
z-index: -1;
left: -8%;
right: -8%;
bottom: 14%;
height: 84px;
border-top: 1px solid rgba(201,154,78,.3);
border-radius: 50%;
transform: rotate(-4deg);
pointer-events: none;
}
.home-hero-stage::after {
content: "";
position: absolute;
z-index: -1;
right: -56px;
bottom: -86px;
width: 260px;
height: 260px;
border: 1px solid rgba(201,154,78,.23);
border-radius: 50%;
pointer-events: none;
}
.home-hero-intro,
.home-spotlight-card { min-width: 0; }
.home-hero-kicker {
margin: 0 0 16px;
color: #d9b56d;
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
}
.home-hero-stage h1 {
max-width: 620px;
color: #fff;
font-family: var(--gb-serif);
font-size: clamp(43px, 4.25vw, 62px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -.04em;
}
.home-hero-stage .lead {
max-width: 590px;
margin-top: 20px;
color: rgba(240,248,246,.88);
font-family: var(--gb-serif);
font-size: 18px;
line-height: 1.75;
}
.home-primary-search {
width: min(100%, 620px);
margin-top: 28px;
border-color: rgba(255,255,255,.4);
border-radius: 10px;
background: rgba(255,255,255,.98);
box-shadow: 0 24px 44px -28px rgba(0,0,0,.6);
}
.home-primary-search:focus-within {
border-color: #d9b56d;
box-shadow: 0 0 0 4px rgba(217,181,109,.2), 0 24px 44px -28px rgba(0,0,0,.6);
}
.home-primary-search button {
border-radius: 8px;
background: #123f40;
}
.home-primary-search button:hover { background: #092f31; }
.home-hero-chips {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 18px;
}
.home-hero-chips a {
position: relative;
color: rgba(247,242,226,.9);
font-size: 13px;
font-weight: 800;
line-height: 1.4;
padding: 3px 16px;
}
.home-hero-chips a:first-child { padding-left: 0; }
.home-hero-chips a + a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 13px;
background: rgba(217,181,109,.48);
transform: translateY(-50%);
}
.home-hero-chips a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.home-spotlight-card {
position: relative;
min-height: 330px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(201,154,78,.48);
border-radius: 4px;
background:
linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.12)),
#f4eddd;
box-shadow: 0 28px 52px -30px rgba(0,0,0,.65);
color: #172525;
padding: clamp(34px, 4vw, 54px);
text-align: center;
}
.home-spotlight-card::before {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(154,122,62,.42);
pointer-events: none;
}
.home-spotlight-label {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: #7a5720;
font-size: 13px;
font-weight: 900;
}
.home-spotlight-label .icon { width: 17px; height: 17px; }
.home-spotlight-card h2 {
position: relative;
z-index: 1;
max-width: 520px;
margin: 24px 0 0;
color: #172525;
font-family: var(--gb-serif);
font-size: clamp(25px, 2.5vw, 35px);
font-weight: 700;
line-height: 1.5;
letter-spacing: -.025em;
}
.home-spotlight-card h2 a { color: inherit; }
.home-spotlight-card h2 a::after {
content: "";
position: absolute;
inset: 0;
}
.home-spotlight-rule {
position: relative;
z-index: 1;
width: 64px;
height: 1px;
margin-top: 24px;
background: #b58639;
}
.home-spotlight-source {
position: relative;
z-index: 1;
margin: 13px 0 0;
color: #8b632a;
font-family: var(--gb-serif);
font-size: 14px;
font-weight: 700;
}
.home-spotlight-more {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 18px;
color: #194f4d;
font-size: 13px;
font-weight: 900;
}
.home-spotlight-more .icon { width: 14px; height: 14px; }
.home-purpose-section { padding-top: 34px; }
.home-purpose-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.home-purpose-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--gb-line);
border-radius: 12px;
background: var(--gb-card-surface);
box-shadow: var(--gb-shadow-soft);
}
.home-purpose-link {
min-width: 0;
min-height: 116px;
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 18px;
align-items: center;
gap: 14px;
padding: 22px 24px;
transition: background .18s ease, color .18s ease;
}
.home-purpose-link + .home-purpose-link { border-left: 1px solid var(--gb-line); }
.home-purpose-link:hover { background: color-mix(in srgb, var(--gb-brand-soft) 62%, var(--gb-paper)); }
.home-purpose-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 1px solid rgba(30,107,107,.26);
border-radius: 50%;
background: var(--gb-paper);
color: var(--gb-brand-dark);
}
.home-purpose-icon .icon { width: 23px; height: 23px; }
.home-purpose-link strong,
.home-purpose-link small { display: block; }
.home-purpose-link strong { color: var(--gb-ink); font-size: 16px; line-height: 1.42; }
.home-purpose-link small { margin-top: 5px; color: var(--gb-muted); font-size: 12.5px; line-height: 1.55; }
.home-purpose-link > .icon { width: 17px; height: 17px; color: var(--gb-brand-dark); }
.home-featured-section { padding-top: 30px; }
.home-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-featured-grid .card,
.home-featured-grid .card:first-child {
grid-column: auto;
min-height: 226px;
border-radius: 10px;
background:
linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.2)),
var(--gb-card-surface);
}
.home-featured-grid .card::before {
inset: 0 auto 0 0;
width: 3px;
height: auto;
}
.home-featured-grid .card h3,
.home-featured-grid .card:first-child h3 {
font-family: var(--gb-serif);
font-size: 19px;
font-weight: 700;
line-height: 1.48;
}
html[data-theme="dark"] .home-spotlight-card {
background: #eee5d3;
color: #172525;
}
html[data-theme="dark"] .home-spotlight-card h2,
html[data-theme="dark"] .home-spotlight-card h2 a { color: #172525; }
html[data-theme="dark"] .home-spotlight-source { color: #785523; }
@media (max-width: 1100px) {
.home-hero-stage {
grid-template-columns: minmax(0, 1fr) minmax(330px, .86fr);
gap: 32px;
padding: 40px;
}
.home-hero-stage h1 { font-size: clamp(40px, 5vw, 52px); }
.home-spotlight-card { min-height: 300px; padding: 34px; }
.home-purpose-link { padding-inline: 18px; }
}
@media (max-width: 900px) {
.home-hero-stage { grid-template-columns: 1fr; }
.home-spotlight-card { min-height: 260px; }
.home-purpose-strip { grid-template-columns: 1fr; }
.home-purpose-link + .home-purpose-link { border-top: 1px solid var(--gb-line); border-left: 0; }
.home-purpose-link { min-height: 100px; }
.home-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.home-hero { margin-top: 12px; }
.home-hero-stage { gap: 24px; border-radius: 16px; padding: 26px 22px; }
.home-hero-stage h1 { font-size: 35px; line-height: 1.18; }
.home-hero-stage .lead { margin-top: 15px; font-size: 15.5px; line-height: 1.68; }
.home-primary-search {
grid-template-columns: minmax(0, 1fr) 48px;
align-items: center;
gap: 4px;
min-height: 54px;
margin-top: 22px;
padding: 4px;
}
.home-primary-search button { width: 48px; min-width: 48px; height: 46px; padding: 0; }
.home-primary-search button span { display: none; }
.home-hero-chips { row-gap: 8px; }
.home-hero-chips a { font-size: 12.5px; padding-inline: 12px; }
.home-hero-chips a:first-child { padding-left: 0; }
.home-spotlight-card { min-height: 238px; padding: 30px 25px; }
.home-spotlight-card h2 { margin-top: 20px; font-size: 24px; line-height: 1.48; }
.home-spotlight-rule { margin-top: 19px; }
.home-purpose-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
.home-purpose-link { grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 12px; padding: 17px; }
.home-purpose-icon { width: 42px; height: 42px; }
.home-featured-grid { grid-template-columns: 1fr; }
.home-featured-grid .card,
.home-featured-grid .card:first-child { min-height: 190px; }
}
@media (max-width: 420px) {
.home-hero-stage { padding: 24px 18px; }
.home-hero-stage h1 { font-size: 32px; }
.home-hero-kicker { font-size: 12px; }
.home-primary-search input { padding-inline: 10px; font-size: 16px; }
.home-spotlight-card { min-height: 220px; padding: 28px 22px; }
.home-spotlight-card::before { inset: 9px; }
.home-spotlight-card h2 { font-size: 22px; }
.home-purpose-link small { font-size: 12px; }
}
@media (max-width: 1024px) {
.theme-toggle,
.mobile-search-link {
width: 44px;
height: 44px;
}
}
@media (max-width: 340px) {
:root { --gb-gutter: 10px; }
.top {
gap: 6px;
}
.brand {
margin-right: auto;
}
.brand strong {
font-size: 15px;
}
.lang { display: inline-flex; }
.lang a,
.lang a.lang-home,
.lang a.lang-en-quote,
.lang a[aria-current="true"] { min-width: 27px; min-height: 28px; padding-inline: 4px; }
.mobile-search-link,
.theme-toggle {
width: 40px;
height: 40px;
}
}
.card-bookmark-btn .icon,
.card-share-btn .icon { stroke-width: 2.6; }
.copy-btn .icon,
.share-btn .icon,
.share-card-btn .icon,
.share-panel-actions .icon,
.tool-btn .icon,
.search-suggest-panel a .icon,
.filter-bar .icon,
.empty-links .icon,
.quote-card-meta .icon,
.hub-more summary .icon,
.nav-menu-all .icon { stroke-width: 2.45; }
.nav-menu-panel .type-icon .icon { width: 14px; height: 14px; }
.top { gap: clamp(14px, 1.8vw, 28px); }
.top .brand { gap: 12px; }
.top .brand > span:first-child,
.top .brand img { width: 46px; height: 46px; }
.top .brand strong { font-size: 27px; letter-spacing: -.055em; }
.primary-collection-nav { gap: clamp(4px, .7vw, 12px); }
.primary-collection-nav > a {
min-height: 54px;
gap: 0;
border-radius: 0;
font-size: 16px;
padding-inline: 12px;
}
.primary-collection-nav > a > .icon { display: none; }
.primary-collection-nav > a[aria-current="page"]::after { left: 12px; right: 12px; bottom: -1px; height: 2px; }
@media (min-width: 1025px) {
.top-search {
grid-template-columns: 40px minmax(0, 1fr);
width: clamp(185px, 15vw, 220px);
min-height: 42px;
border-color: rgba(101,82,52,.24);
border-radius: 4px;
padding: 0 12px 0 0;
}
.top-search input { grid-column: 2; grid-row: 1; font-family: var(--gb-serif); font-size: 14px; font-weight: 500; }
.top-search button,
.top-search button:hover {
grid-column: 1;
grid-row: 1;
width: 40px;
height: 40px;
border-radius: 0;
background: transparent;
color: var(--gb-ink);
box-shadow: none;
transform: none;
}
}
.lang {
gap: 2px;
border: 1px solid var(--gb-line);
border-radius: 999px;
background: rgba(255,255,255,.68);
padding: 3px;
}
.lang a,
.lang a.lang-home,
.lang a.lang-en-quote {
min-width: 34px;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--gb-muted);
font-family: sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
padding: 0 8px;
}
.lang a:not([aria-current="true"]):hover {
background: rgba(15,71,71,.07);
color: var(--gb-brand-dark);
}
.lang a::before,
.lang a::after,
.lang a.lang-home::before,
.lang a.lang-home::after,
.lang a.lang-en-quote::before,
.lang a.lang-en-quote::after { content: none; }
.lang a[aria-current="true"] {
min-width: 34px;
min-height: 32px;
display: inline-flex;
border-radius: 999px;
background: var(--gb-brand-dark);
color: #fff;
box-shadow: 0 8px 18px -14px rgba(15,71,71,.9);
font-family: sans-serif;
font-size: 11px;
font-weight: 900;
padding: 0 8px;
}
.theme-toggle {
width: 40px;
height: 40px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.theme-toggle .icon { width: 21px; height: 21px; }
.home-hero {
width: 100vw;
margin: 0 0 0 calc(50% - 50vw);
}
.home-hero-stage {
min-height: 406px;
gap: clamp(42px, 6vw, 88px);
border: 0;
border-radius: 0;
background:
repeating-linear-gradient(118deg, rgba(255,255,255,.012) 0 1px, transparent 1px 9px),
radial-gradient(circle at 48% 48%, rgba(255,255,255,.045), transparent 42%),
linear-gradient(110deg, #073b3d 0%, #064346 56%, #063638 100%);
box-shadow: none;
padding: 36px max(var(--gb-gutter), calc((100vw - var(--gb-shell)) / 2 + var(--gb-gutter)));
}
.home-hero-stage::before {
left: -105px;
right: auto;
bottom: -82px;
width: 390px;
height: 250px;
border: 0;
border-radius: 50%;
background: repeating-radial-gradient(ellipse at 0 55%, transparent 0 14px, rgba(201,154,78,.28) 15px 16px);
transform: rotate(3deg);
}
.home-hero-stage::after {
right: max(22px, calc((100vw - var(--gb-shell)) / 2 - 48px));
bottom: -54px;
width: 118px;
height: 260px;
border: 0;
border-left: 2px solid rgba(210,183,121,.55);
border-radius: 50% 0 0 0;
background:
linear-gradient(34deg, transparent 39%, rgba(210,183,121,.5) 40% 42%, transparent 43%) 0 16px / 84px 48px repeat-y,
linear-gradient(-34deg, transparent 39%, rgba(210,183,121,.42) 40% 42%, transparent 43%) 24px 0 / 82px 52px repeat-y;
transform: rotate(10deg);
}
.home-hero-stage h1 { font-size: clamp(46px, 4.15vw, 62px); }
.home-primary-search { border-radius: 4px; }
.home-primary-search button { border-radius: 2px; }
.home-spotlight-card {
min-height: 326px;
border-color: rgba(168,122,48,.48);
border-radius: 0;
background:
repeating-linear-gradient(0deg, rgba(114,88,48,.025) 0 1px, transparent 1px 5px),
linear-gradient(100deg, rgba(255,255,255,.7), rgba(246,237,216,.82)),
#f4eddd;
clip-path: polygon(1% 0, 99% .8%, 100% 6%, 99.3% 94%, 98% 100%, 2% 99.2%, 0 94%, .7% 7%);
box-shadow: 0 20px 38px -25px rgba(0,0,0,.62);
}
.home-spotlight-card::before { inset: 18px; border: 3px double rgba(154,111,43,.48); }
.home-spotlight-card::after {
content: "◆";
position: absolute;
z-index: 1;
left: 50%;
bottom: 25%;
color: #b58639;
font-size: 10px;
transform: translateX(-50%);
}
.home-spotlight-rule { width: 90px; }
.home-spotlight-more { display: none; }
.home-purpose-section {
display: grid;
grid-template-columns: minmax(250px, .72fr) minmax(0, 2.4fr);
align-items: center;
gap: 28px;
border-bottom: 1px solid var(--gb-line);
padding: 20px 0 18px;
}
.home-purpose-heading { margin: 0; }
.home-purpose-heading .eyebrow,
.home-purpose-heading .text-link { display: none; }
.home-purpose-heading h2 { font-family: var(--gb-serif); font-size: 25px; font-weight: 700; white-space: nowrap; }
.home-purpose-strip {
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.home-purpose-link {
min-height: 74px;
grid-template-columns: 58px minmax(0, 1fr);
gap: 16px;
padding: 8px 22px;
}
.home-purpose-link + .home-purpose-link { border-left: 1px solid var(--gb-line); }
.home-purpose-icon {
width: 48px;
height: 48px;
border: 0;
border-radius: 0;
background: transparent;
}
.home-purpose-icon .icon { width: 36px; height: 36px; stroke-width: 1.35; }
.home-purpose-link > .icon { display: none; }
.home-purpose-link strong { font-family: var(--gb-serif); font-size: 16px; font-weight: 700; }
.home-purpose-link small { font-size: 12px; }
.home-featured-section { padding-top: 20px; }
.home-featured-section .section-head,
.home-latest-section .section-head { justify-content: flex-start; }
.home-featured-section .section-head .eyebrow,
.home-latest-section .section-head .eyebrow { display: none; }
.home-featured-section .section-head h2,
.home-latest-section .section-head h2 { font-family: var(--gb-serif); font-size: 27px; font-weight: 700; }
.home-featured-section .section-head .text-link,
.home-latest-section .section-head .text-link { margin-left: 18px; }
.home-featured-grid .card,
.home-featured-grid .card:first-child { min-height: 178px; padding: 20px 26px; }
.home-featured-grid .type-badge .icon { display: none; }
.home-featured-grid .card-bookmark-btn { top: 12px; right: 12px; }
.home-featured-grid .card p { -webkit-line-clamp: 2; font-size: 13px; line-height: 1.62; }
@media (max-width: 1100px) and (min-width: 761px) {
.primary-collection-nav > a { font-size: 14px; padding-inline: 7px; }
.top .brand strong { font-size: 23px; }
.home-purpose-section { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 900px) {
.home-purpose-section { grid-template-columns: 1fr; align-items: stretch; }
.home-purpose-strip { grid-template-columns: 1fr; }
.home-purpose-link + .home-purpose-link { border-top: 1px solid var(--gb-line); border-left: 0; }
}
@media (max-width: 760px) {
.top .brand > span:first-child,
.top .brand img { width: 36px; height: 36px; }
.top .brand strong { font-size: 19px; }
.lang { padding: 2px; }
.lang a,
.lang a.lang-home,
.lang a.lang-en-quote,
.lang a[aria-current="true"] { min-width: 31px; min-height: 30px; font-size: 10px; padding: 0 6px; }
.home-hero { margin-top: 0; }
.home-hero-stage { gap: 26px; border-radius: 0; padding: 28px var(--gb-gutter) 30px; }
.home-hero-stage::after { display: none; }
.home-spotlight-card { clip-path: none; }
.home-purpose-section { padding-top: 22px; }
.home-purpose-heading { align-items: flex-start; }
.home-purpose-heading h2 { font-size: 24px; }
.home-purpose-link { min-height: 82px; grid-template-columns: 48px minmax(0, 1fr); padding: 12px 8px; }
.home-purpose-icon { width: 44px; height: 44px; }
.home-purpose-icon .icon { width: 30px; height: 30px; }
.home-featured-grid .card,
.home-featured-grid .card:first-child { min-height: 174px; }
}
body:not(.page-home) { background: #fbfaf6; }
body:not(.page-home) main,
body:not(.page-home) .main { padding-top: 0; }
body:not(.page-home) .page-hero {
min-height: 0;
margin: 0 0 28px;
border: 0;
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 40px 0 30px;
}
body:not(.page-home) .page-hero::before {
width: 46px;
height: 2px;
border-radius: 0;
background: var(--gb-brand);
}
body:not(.page-home) .page-hero .eyebrow {
color: var(--gb-brand-dark);
font-family: var(--gb-serif);
font-size: 13px;
letter-spacing: .04em;
}
body:not(.page-home) .page-hero h1 {
max-width: 920px;
font-family: var(--gb-serif);
font-size: clamp(34px, 3.4vw, 46px);
font-weight: 700;
line-height: 1.18;
letter-spacing: -.04em;
}
body:not(.page-home) .page-hero > p,
body:not(.page-home) .page-hero .lead {
max-width: 780px;
color: var(--gb-muted);
font-family: var(--gb-serif);
font-size: 16px;
line-height: 1.75;
}
body:not(.page-home) .section { margin-bottom: 30px; }
body:not(.page-home) .section-head {
align-items: end;
border-bottom: 1px solid var(--gb-line);
margin-bottom: 16px;
padding-bottom: 12px;
}
body:not(.page-home) .section-head h2 {
font-family: var(--gb-serif);
font-size: clamp(23px, 2.2vw, 30px);
font-weight: 700;
}
body:not(.page-home) .section-head .eyebrow { color: var(--gb-brand-dark); }
body:not(.page-home) .text-link,
body:not(.page-home) .card-link,
body:not(.page-home) .index-group-more {
color: var(--gb-brand-dark);
font-weight: 800;
}
body:not(.page-home) .text-link .icon,
body:not(.page-home) .card-link .icon,
body:not(.page-home) .index-group-more .icon { display: none; }
body:not(.page-home) .page-hero .search {
width: min(100%, 760px);
border-radius: 4px;
box-shadow: none;
}
body:not(.page-home) .page-hero .search button { border-radius: 3px; }
body:not(.page-home) .filter-bar,
body:not(.page-home) .search-sort,
body:not(.page-home) .chips { gap: 7px; }
body:not(.page-home) .filter-bar .icon,
body:not(.page-home) .search-sort .icon,
body:not(.page-home) .chips .icon,
body:not(.page-home) .type-icon,
body:not(.page-home) .card-kicker > .icon { display: none; }
body:not(.page-home) .filter-bar a,
body:not(.page-home) .search-sort a,
body:not(.page-home) .chips a,
body:not(.page-home) .chips span {
min-height: 34px;
border-color: rgba(15,71,71,.16);
border-radius: 3px;
background: transparent;
box-shadow: none;
padding-inline: 12px;
}
body:not(.page-home) .filter-bar a[aria-current="true"],
body:not(.page-home) .search-sort a[aria-current="true"],
body:not(.page-home) .chips a[aria-current="true"] {
border-color: var(--gb-brand);
background: var(--gb-brand);
color: #fff;
}
body:not(.page-home) .search-status {
border: 0;
border-left: 3px solid var(--gb-brand);
border-radius: 0;
background: rgba(255,255,255,.5);
box-shadow: none;
padding: 15px 18px;
}
body:not(.page-home) .search-status .icon { display: none; }
body:not(.page-home) .search-result-limit,
body:not(.page-home) .card-note {
border-radius: 3px;
background: rgba(15,71,71,.055);
}
body:not(.page-home) .index-page,
body:not(.page-home) .index-panel,
body:not(.page-home) .builder-surface {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
}
body:not(.page-home) .index-type-jump {
border: 0;
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
margin-bottom: 22px;
padding: 0 0 14px;
}
body:not(.page-home) .index-type-jump a {
border: 0;
border-radius: 0;
background: transparent;
padding: 7px 10px;
}
body:not(.page-home) .index-type-jump .type-icon,
body:not(.page-home) .index-group-title .type-icon {
width: 20px;
height: 20px;
border: 0;
background: transparent;
box-shadow: none;
}
body:not(.page-home) .index-type-jump .type-icon .icon,
body:not(.page-home) .index-group-title .type-icon .icon {
width: 19px;
height: 19px;
}
body:not(.page-home) .index-panel-head { border-bottom: 1px solid var(--gb-line); padding: 0 0 14px; }
body:not(.page-home) .index-panel-head h2,
body:not(.page-home) .index-group-title,
body:not(.page-home) .person-card h3 {
font-family: var(--gb-serif);
font-weight: 700;
}
body:not(.page-home) .index-group {
border: 0;
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 24px 0;
}
body:not(.page-home) .index-letter-jump a {
border-radius: 2px;
background: transparent;
}
body:not(.page-home) .index-list a {
border: 0;
border-left: 2px solid rgba(15,71,71,.34);
border-radius: 0;
background: transparent;
padding: 10px 14px;
}
body:not(.page-home) .card,
body:not(.page-home) .today-card,
body:not(.page-home) .person-card,
body:not(.page-home) .quote-archive-card,
body:not(.page-home) .builder-card {
border: 1px solid rgba(148,126,91,.28);
border-radius: 5px;
background:
linear-gradient(105deg, rgba(255,255,255,.8), rgba(248,243,232,.34)),
var(--gb-card-surface);
box-shadow: none;
}
body:not(.page-home) .card::before,
body:not(.page-home) .today-card::before,
body:not(.page-home) .person-card::before,
body:not(.page-home) .quote-archive-card::before {
inset: 0 auto 0 0;
width: 3px;
height: auto;
background: var(--card-accent, var(--gb-brand));
}
body:not(.page-home) .card:hover,
body:not(.page-home) .today-card:hover,
body:not(.page-home) .person-card:hover {
border-color: rgba(15,71,71,.35);
box-shadow: 0 14px 28px -24px rgba(15,47,47,.35);
transform: translateY(-1px);
}
body:not(.page-home) .card h3,
body:not(.page-home) .today-card h3,
body:not(.page-home) .person-card h3 {
font-family: var(--gb-serif);
font-weight: 700;
}
body:not(.page-home) .card-bookmark-btn {
border-color: transparent;
border-radius: 2px;
background: transparent;
box-shadow: none;
}
body:not(.page-home) .card-bookmark-btn span { display: none; }
body:not(.page-home) .person-card > .icon,
body:not(.page-home) .person-card .icon-bookOpen { display: none; }
body:not(.page-home) .person-card-stats { border-top: 1px solid var(--gb-line); padding-top: 12px; }
.page-detail .article { background: transparent; }
.page-detail .article-layout { gap: clamp(32px, 4vw, 56px); }
.page-detail .breadcrumb { margin: 20px 0 18px; color: var(--gb-muted); }
.page-detail .article-head { border-bottom: 1px solid var(--gb-line); padding-bottom: 24px; }
.page-detail .article-head h1 {
max-width: 920px;
font-family: var(--gb-serif);
font-size: clamp(34px, 3.6vw, 48px);
font-weight: 700;
line-height: 1.28;
}
.page-detail .article-spotlight {
border: 1px solid rgba(168,122,48,.42);
border-radius: 0;
background:
repeating-linear-gradient(0deg, rgba(114,88,48,.025) 0 1px, transparent 1px 5px),
linear-gradient(100deg, rgba(255,255,255,.74), rgba(246,237,216,.78)),
#f4eddd;
box-shadow: 0 20px 40px -34px rgba(54,42,23,.45);
padding: clamp(34px, 4vw, 54px);
}
.page-detail .article-spotlight::before {
content: "";
position: absolute;
inset: 12px;
border: 3px double rgba(154,111,43,.36);
pointer-events: none;
}
.page-detail .article-primary-text {
font-family: var(--gb-serif);
font-size: clamp(26px, 2.6vw, 37px);
font-weight: 700;
line-height: 1.58;
}
.page-detail .article-actions button,
.page-detail .article-actions a,
.page-detail .article-tool-actions button {
border-radius: 3px;
background: rgba(255,255,255,.54);
box-shadow: none;
}
.page-detail .quote-original {
border: 0;
border-left: 2px solid rgba(15,71,71,.45);
border-radius: 0;
background: transparent;
padding: 18px 20px;
}
.page-detail .article-support-meta,
.page-detail .article-reading-tools {
border: 0;
border-top: 1px solid var(--gb-line);
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.page-detail .article-reading-tools > .icon,
.page-detail .hub-chips .icon { display: none; }
.page-detail .article-section {
border: 0;
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 30px 0;
}
.page-detail .article-section h2,
.page-detail .article-note-card h3 {
font-family: var(--gb-serif);
font-weight: 700;
}
.page-detail .article-note-card {
border: 0;
border-left: 2px solid rgba(201,154,78,.65);
border-radius: 0;
background: rgba(244,237,221,.55);
box-shadow: none;
}
.page-detail .article-side-card {
border: 0;
border-top: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 18px 0;
}
.page-detail .article-side-card:first-child { border-top: 2px solid var(--gb-brand); }
.page-detail .article-side-card .eyebrow { color: var(--gb-brand-dark); }
.page-detail .article-side-outline > a,
.page-detail .article-side-next > a,
.page-detail .article-side-links > a {
border: 0;
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 12px 0;
}
.page-detail .article-side-card .icon,
.page-detail .article-side-outline .icon { display: none; }
.page-detail .article-related { border-top: 1px solid var(--gb-line); padding-top: 28px; }
.page-today .daily-card-section,
.page-builder .builder-surface,
.page-static .static-trust,
.page-static .static-faq {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.page-today .daily-card-frame {
border: 3px double rgba(154,111,43,.38);
border-radius: 0;
background:
repeating-linear-gradient(0deg, rgba(114,88,48,.025) 0 1px, transparent 1px 5px),
#f4eddd;
box-shadow: none;
}
.page-today .daily-card-copy { font-family: var(--gb-serif); }
.page-builder .builder-toolbar {
border: 1px solid var(--gb-line);
border-radius: 4px;
background: rgba(255,255,255,.58);
box-shadow: none;
}
.page-builder .builder-toolbar .icon-reset,
.page-builder .builder-occasion-picker > .icon,
.page-builder .builder-quick-filters .icon { display: none; }
.page-builder .variant-item {
border: 0;
border-top: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
}
.page-builder .variant-item:first-child { border-top: 0; }
.page-static .text-block { max-width: 920px; }
.page-static .text-block p {
border: 0;
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 18px clamp(12px, 2vw, 18px) 18px clamp(18px, 2.2vw, 22px);
}
.page-static .text-block p::before { left: 0; }
.page-static .trust-card {
border: 0;
border-left: 3px solid var(--gb-brand);
border-radius: 0;
background: rgba(255,255,255,.5);
box-shadow: none;
}
.page-static .trust-icon { display: none; }
.page-static .faq details {
border: 0;
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
html[data-theme="dark"] body:not(.page-home) {
background: var(--gb-bg);
color: var(--gb-text);
}
html[data-theme="dark"] body:not(.page-home) .page-hero h1,
html[data-theme="dark"] .page-detail .article-head h1,
html[data-theme="dark"] .page-detail .article-primary-text,
html[data-theme="dark"] .page-static .text-block,
html[data-theme="dark"] .page-static .text-block strong {
color: var(--gb-ink);
}
html[data-theme="dark"] body:not(.page-home) .card,
html[data-theme="dark"] body:not(.page-home) .today-card,
html[data-theme="dark"] body:not(.page-home) .person-card,
html[data-theme="dark"] body:not(.page-home) .quote-archive-card,
html[data-theme="dark"] body:not(.page-home) .builder-card {
border-color: var(--gb-card-border);
background: linear-gradient(105deg, rgba(25,45,43,.96), rgba(17,32,31,.94));
}
html[data-theme="dark"] body:not(.page-home) .card:hover,
html[data-theme="dark"] body:not(.page-home) .today-card:hover,
html[data-theme="dark"] body:not(.page-home) .person-card:hover {
border-color: var(--gb-line-strong);
box-shadow: 0 14px 28px -24px rgba(0,0,0,.75);
}
html[data-theme="dark"] .page-detail .article-spotlight,
html[data-theme="dark"] .page-today .daily-card-frame {
border-color: rgba(212,181,114,.52);
background:
repeating-linear-gradient(0deg, rgba(212,181,114,.025) 0 1px, transparent 1px 5px),
linear-gradient(105deg, rgba(27,43,41,.98), rgba(16,29,28,.98));
color: var(--gb-ink);
box-shadow: 0 20px 40px -34px rgba(0,0,0,.85);
}
html[data-theme="dark"] .page-detail .article-spotlight::before {
border-color: rgba(212,181,114,.38);
}
html[data-theme="dark"] .page-detail .article-actions button,
html[data-theme="dark"] .page-detail .article-actions a,
html[data-theme="dark"] .page-detail .article-tool-actions button,
html[data-theme="dark"] .page-builder .builder-toolbar {
border-color: var(--gb-card-border);
background: var(--gb-chip);
color: var(--gb-text);
}
html[data-theme="dark"] .page-detail .article-note-card,
html[data-theme="dark"] .hub-source-evidence .article-note-card,
html[data-theme="dark"] .page-static .trust-card {
border-color: rgba(212,181,114,.58);
background: rgba(28,44,42,.92);
color: var(--gb-text);
}
html[data-theme="dark"] body:not(.page-home) .filter-bar a[aria-current="true"],
html[data-theme="dark"] body:not(.page-home) .search-sort a[aria-current="true"],
html[data-theme="dark"] body:not(.page-home) .chips a[aria-current="true"] {
border-color: var(--gb-brand-dark);
background: var(--gb-brand-dark);
color: #071312;
}
@media (max-width: 900px) {
.page-detail .article-layout { grid-template-columns: 1fr; }
.page-detail .article-sidebar { border-top: 1px solid var(--gb-line); padding-top: 12px; }
}
@media (max-width: 760px) {
body:not(.page-home) .page-hero { margin-bottom: 22px; padding: 28px 0 22px; }
body:not(.page-home) .page-hero h1 { font-size: 32px; }
body:not(.page-home) .page-hero > p,
body:not(.page-home) .page-hero .lead { font-size: 15px; }
body:not(.page-home) .section-head { align-items: flex-start; }
body:not(.page-home) .index-group { padding: 20px 0; }
.page-detail .article-head h1 { font-size: 32px; }
.page-detail .article-spotlight { padding: 32px 24px; }
.page-detail .article-spotlight::before { inset: 8px; }
.page-detail .article-primary-text { font-size: 25px; }
}
body:not(.page-home) .connection-trail,
body:not(.page-home) .more-card-cta,
body:not(.page-home) .article-related-more,
body:not(.page-home) .guide-band,
body:not(.page-home) .local-data-panel,
body:not(.page-home) [data-empty-state] .empty-state {
border: 0;
border-top: 1px solid var(--gb-line);
border-bottom: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.page-home) .connection-trail { padding: 14px 0; }
body:not(.page-home) .connection-trail .icon,
body:not(.page-home) .more-card-cta .icon,
body:not(.page-home) .article-related-more .icon,
.footer-browse .icon,
.footer .subscribe .icon { display: none; }
body:not(.page-home) .search-assist {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--gb-line);
border-bottom: 1px solid var(--gb-line);
}
body:not(.page-home) .assist-card {
border: 0;
border-left: 1px solid var(--gb-line);
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 20px 22px;
}
body:not(.page-home) .assist-card:first-child { border-left: 0; }
body:not(.page-home) .empty-state,
body:not(.page-home) .for-you-note,
body:not(.page-home) .contact-direct-note {
border-radius: 0;
box-shadow: none;
}
body:not(.page-home) .local-data-panel { padding: 26px 0; }
body:not(.page-home) .local-data-panel li .icon { display: none; }
.page-home .home-library-band {
display: grid;
grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
align-items: stretch;
gap: clamp(28px, 4vw, 56px);
border: 1px solid rgba(15,71,71,.2);
border-left: 4px solid var(--gb-brand);
border-radius: 4px;
background: linear-gradient(118deg, rgba(15,71,71,.075), rgba(255,255,255,.84) 46%, rgba(184,132,47,.08));
box-shadow: none;
padding: clamp(26px, 3.4vw, 42px);
}
.page-home .home-library-band > div:first-child { align-self: center; }
.page-home .home-library-band .eyebrow {
margin-bottom: 8px;
color: #8b601e;
letter-spacing: .12em;
}
.page-home .home-library-band h2 {
color: var(--gb-brand-dark);
font-family: var(--gb-serif);
font-size: clamp(25px, 2.2vw, 34px);
line-height: 1.32;
letter-spacing: -.035em;
}
.page-home .home-library-band > div:first-child > p:last-child {
max-width: 480px;
margin-top: 12px;
line-height: 1.75;
}
.page-home .home-library-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 10px;
}
.page-home .home-library-actions .secondary-link {
width: 100%;
min-width: 0;
min-height: 94px;
display: flex;
align-items: flex-start;
gap: 10px;
border: 1px solid rgba(15,71,71,.18);
border-radius: 3px;
background: rgba(255,255,255,.82);
color: var(--gb-brand-dark);
padding: 18px 16px;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.page-home .home-library-actions .secondary-link:hover {
border-color: rgba(15,71,71,.42);
background: #fff;
transform: translateY(-2px);
}
.page-home .home-library-actions .secondary-link > .icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
margin-top: 1px;
}
.home-library-action-copy {
min-width: 0;
display: grid;
gap: 5px;
}
.home-library-action-copy strong {
color: var(--gb-ink);
font-size: 15px;
line-height: 1.35;
}
.home-library-action-copy small {
color: var(--gb-muted);
font-size: 12px;
line-height: 1.45;
}
.home-library-action-arrow {
flex: 0 0 auto;
margin-left: auto;
color: #a46e1f;
font-size: 17px;
line-height: 1.2;
}
.footer {
width: 100%;
max-width: none;
margin: 0;
content-visibility: auto;
contain-intrinsic-size: auto 440px;
box-sizing: border-box;
border-top: 3px solid var(--gb-brand);
display: grid;
grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
align-items: start;
gap: 28px clamp(38px, 6vw, 86px);
background: #f5f1e8;
color: var(--gb-muted);
padding: 38px max(var(--gb-gutter), calc((100vw - var(--gb-shell)) / 2)) 40px;
}
.footer-brand {
display: grid;
align-content: start;
gap: 8px !important;
}
.footer .footer-brand strong {
color: var(--gb-brand-dark);
font-family: var(--gb-serif);
font-size: 24px;
line-height: 1.25;
letter-spacing: -.035em;
}
.footer-brand span {
max-width: 390px;
line-height: 1.7;
}
.footer .footer-policy,
.footer .footer-browse {
min-width: 0;
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
align-items: start;
justify-content: initial;
gap: 14px 22px;
}
.footer .footer-policy { padding-top: 2px; }
.footer .footer-browse {
width: 100%;
grid-column: 1 / -1;
border-top: 1px solid rgba(15,71,71,.18);
padding-top: 20px;
}
.footer-nav-label {
color: var(--gb-brand-dark);
font-size: 12px;
font-weight: 900;
line-height: 1.45;
letter-spacing: .1em;
}
.footer .footer-link-list {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
}
.footer nav a,
.footer-browse a {
min-height: 42px;
display: inline-flex;
align-items: center;
border-radius: 2px;
color: var(--gb-text);
padding: 9px 10px;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.footer nav a:hover {
background: rgba(15,71,71,.08);
color: var(--gb-brand-dark);
}
.footer nav a[aria-current="page"] {
background: rgba(15,71,71,.1);
color: var(--gb-brand-dark);
font-weight: 900;
text-decoration: none;
}
.footer .subscribe {
width: 100%;
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(260px, 1fr) auto auto;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(15,71,71,.18);
margin-top: 0;
padding-top: 20px;
}
.footer .subscribe-copy {
min-width: 0;
display: grid;
gap: 4px;
}
.footer .subscribe-copy strong {
color: var(--gb-brand-dark);
font-family: var(--gb-serif);
font-size: 16px;
line-height: 1.35;
}
.footer .subscribe-copy span {
color: var(--gb-text);
font-size: 13px;
font-weight: 750;
line-height: 1.55;
}
.footer .subscribe-copy small {
color: var(--gb-muted);
font-size: 12px;
line-height: 1.5;
}
.footer .subscribe-rss {
min-height: 44px;
border-radius: 3px;
padding-inline: 17px;
}
.footer .subscribe .subscribe-rss .icon {
width: 16px;
height: 16px;
display: block;
}
.footer .subscribe-rss-feed {
border-color: rgba(164,110,31,.52);
background: rgba(255,252,244,.84);
color: #7b5017;
}
.footer .subscribe-rss-feed:hover {
border-color: #a46e1f;
background: #fffaf0;
color: #66410f;
}
html[data-theme="dark"] .page-home .home-library-band {
border-color: rgba(137,207,192,.28);
border-left-color: var(--gb-brand);
background: linear-gradient(118deg, rgba(79,181,163,.12), rgba(17,32,31,.72) 48%, rgba(184,132,47,.09));
}
html[data-theme="dark"] .page-home .home-library-actions .secondary-link {
border-color: rgba(137,207,192,.24);
background: rgba(24,43,41,.88);
}
html[data-theme="dark"] .page-home .home-library-actions .secondary-link:hover { background: rgba(31,54,51,.96); }
html[data-theme="dark"] .footer {
border-top-color: var(--gb-brand);
background: #122825;
}
html[data-theme="dark"] .footer .footer-brand strong,
html[data-theme="dark"] .footer-nav-label,
html[data-theme="dark"] .footer .subscribe-copy strong { color: #8fd0c4; }
html[data-theme="dark"] .footer .footer-policy,
html[data-theme="dark"] .footer .footer-browse,
html[data-theme="dark"] .footer .subscribe { border-color: rgba(137,207,192,.2); }
html[data-theme="dark"] .footer nav a:hover { background: rgba(79,181,163,.12); }
html[data-theme="dark"] .footer nav a[aria-current="page"] { background: rgba(79,181,163,.16); color: #a8ddd3; }
html[data-theme="dark"] .footer .subscribe-rss-feed {
border-color: rgba(221,174,98,.56);
background: rgba(184,132,47,.1);
color: #e4bd7f;
}
html[data-theme="dark"] .footer .subscribe-rss-feed:hover { background: rgba(184,132,47,.16); color: #f2d09a; }
html[lang="en"] .brand-copy strong { letter-spacing: -.035em; }
html[lang="en"] .home-hero-stage h1 { letter-spacing: -.045em; }
html[lang="en"] .home-purpose-section { grid-template-columns: minmax(360px, .9fr) minmax(0, 2.1fr); gap: 34px; }
html[lang="en"] .home-spotlight-card h2 { font-size: clamp(25px, 2.4vw, 37px); line-height: 1.38; }
html[lang="en"] .card h3,
html[lang="en"] .article-head h1,
html[lang="en"] .article-primary-text { letter-spacing: -.025em; }
html[lang="en"] .lang a.lang-en-quote[aria-current="true"] { min-width: 34px; }
html[lang="en"] .footer-browse { gap: 18px; }
@media (max-width: 760px) {
.page-home .home-library-band {
grid-template-columns: 1fr;
gap: 22px;
padding: 26px 20px 22px;
}
.page-home .home-library-band h2 { font-size: 27px; }
.page-home .home-library-actions { grid-template-columns: 1fr; gap: 8px; }
.page-home .home-library-actions .secondary-link {
min-height: 70px;
align-items: center;
padding: 13px 15px;
}
.page-home .home-library-actions .secondary-link > .icon { margin-top: 0; }
.home-library-action-copy { gap: 3px; }
.home-library-action-copy strong { font-size: 15px; }
.home-library-action-copy small { font-size: 12px; }
.footer {
grid-template-columns: 1fr;
gap: 0;
padding: 30px var(--gb-gutter) calc(104px + env(safe-area-inset-bottom, 0px));
}
.footer-brand { padding-bottom: 24px; }
.footer .footer-brand strong { font-size: 23px; }
.footer .footer-policy,
.footer .footer-browse {
grid-column: 1;
grid-template-columns: 1fr;
gap: 8px;
border-top: 1px solid rgba(15,71,71,.18);
padding: 19px 0 18px;
}
.footer-nav-label { font-size: 11px; }
.footer .footer-link-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 14px;
}
.footer nav a,
.footer-browse a {
min-width: 0;
min-height: 46px;
justify-content: flex-start;
border-bottom: 1px solid rgba(15,71,71,.1);
border-radius: 0;
padding: 10px 2px;
line-height: 1.35;
}
.footer .subscribe {
grid-column: 1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding-top: 20px;
}
.footer .subscribe-copy {
grid-column: 1 / -1;
gap: 5px;
margin-bottom: 6px;
}
.footer .subscribe-copy strong { font-size: 17px; }
.footer .subscribe-copy span { font-size: 13px; }
.footer .subscribe-copy small {
margin-top: 2px;
overflow-wrap: anywhere;
}
.footer .subscribe-rss {
width: 100%;
min-height: 46px;
}
html[data-theme="dark"] .footer .footer-policy,
html[data-theme="dark"] .footer .footer-browse,
html[data-theme="dark"] .footer nav a { border-color: rgba(137,207,192,.16); }
body:not(.page-home) .search-assist { grid-template-columns: 1fr; }
body:not(.page-home) .assist-card,
body:not(.page-home) .assist-card:first-child { border-left: 0; border-top: 1px solid var(--gb-line); padding-inline: 0; }
body:not(.page-home) .assist-card:first-child { border-top: 0; }
html[lang="en"] .lang a.lang-en-quote[aria-current="true"] { min-width: 31px; }
html[lang="en"] .top .brand small { display: none; }
html[lang="en"] .top .brand strong { font-size: 17px; }
}
@media (max-width: 1100px) {
html[lang="en"] .home-purpose-section { grid-template-columns: 1fr; gap: 12px; }
}
.top .brand { min-height: 44px; }
.lang a,
.lang a.lang-home,
.lang a.lang-en-quote,
.lang a[aria-current="true"] {
min-width: 36px;
min-height: 36px;
}
.card-link,
.card-share-btn,
.card-bookmark-btn {
min-width: 40px;
min-height: 40px;
justify-content: center;
}
.card-link { padding-inline: 9px; }
.card-actions .card-link { padding-inline: 9px; }
.card-share-btn,
.card-bookmark-btn { padding: 9px 11px; }
.card:not(.builder-card) h2 > a,
.card:not(.builder-card) h3 > a,
.today-card h2 > a,
.today-card h3 > a,
.person-card h3 > a,
.discovery-card h3 > a {
display: inline-flex;
align-items: center;
min-height: 36px;
}
.home-featured-grid .card-bookmark-btn {
width: 40px;
min-height: 40px;
}
.home-hero-chips a {
min-height: 40px;
display: inline-flex;
align-items: center;
padding-block: 9px;
}
.filter-bar a,
.search-sort a,
.connection-trail a,
.chips a:not(.primary-link):not(.secondary-link),
.chip-row a:not(.primary-link):not(.secondary-link),
.hub-chips a,
.category-card a {
min-height: 40px;
}
body:not(.page-home) .filter-bar a,
body:not(.page-home) .search-sort a,
body:not(.page-home) .chips a { min-height: 40px; }
body:not(.page-home) .page-hero .search { padding: 7px; }
body:not(.page-home) .page-hero .search label,
body:not(.page-home) .page-hero .search input,
body:not(.page-home) .page-hero .search button { min-height: 44px; }
.empty-links a,
.section-actions .text-link,
.recent-clear { min-height: 40px; }
.copy-btn,
.builder-recent-head button { min-height: 40px; }
.builder-toolbar input,
.builder-toolbar button,
.builder-occasion-picker select,
.builder-occasion-picker button { min-height: 44px; }
.index-type-jump a,
body:not(.page-home) .index-type-jump a { min-height: 44px; }
.index-letter-jump a,
body:not(.page-home) .index-letter-jump a {
min-width: 40px;
min-height: 40px;
}
.index-page .index-group summary {
min-height: 48px;
padding-block: 6px;
}
.page-static .faq summary {
min-height: 48px;
display: flex;
align-items: center;
line-height: 1.5;
padding: 7px 0 11px;
}
.daily-card-transcript summary {
min-height: 48px;
display: flex;
align-items: center;
padding: 14px 18px;
}
.daily-card-transcript > div { padding: 18px; }
.breadcrumb a { min-height: 38px; }
.article-meta span { min-height: 36px; padding: 6px 9px; }
.article-meta a,
.source-note-list a {
display: inline-flex;
align-items: center;
min-height: 36px;
}
.article-side-outline a,
.article-side-next a,
.article-side-links a,
.article-side-policies a { min-height: 42px; }
.article-actions .copy-btn,
.article-actions .share-btn,
.article-actions .tool-btn,
.local-data-actions .button { min-height: 42px; }
.page-detail .article { padding-bottom: clamp(30px, 4vw, 48px); }
@media (max-width: 760px) {
.top .brand,
.mobile-search-link,
.theme-toggle { min-height: 44px; }
.theme-toggle { width: 44px; height: 44px; }
.lang a {
min-width: 34px;
min-height: 36px;
}
.card-link,
.card-share-btn,
.card-bookmark-btn {
min-width: 44px;
min-height: 44px;
}
.home-featured-grid .card-bookmark-btn {
width: 44px;
min-height: 44px;
}
.home-hero-chips a { min-height: 42px; }
body:not(.page-home) .filter-bar a,
body:not(.page-home) .search-sort a,
body:not(.page-home) .chips a,
.connection-trail a,
.chip-row a:not(.primary-link):not(.secondary-link),
.hub-chips a,
.category-card a { min-height: 42px; }
.empty-links a,
.section-actions .text-link,
.recent-clear { min-height: 44px; }
.page-builder .copy-btn,
.page-detail .article-actions > button,
.local-data-actions .button { min-height: 44px; }
.index-letter-jump a,
body:not(.page-home) .index-letter-jump a {
min-width: 42px;
min-height: 42px;
}
.breadcrumb a {
min-width: 44px;
min-height: 40px;
justify-content: center;
}
.page-detail .article-side-outline > a,
.page-detail .article-side-next > a,
.page-detail .article-side-links > a { min-height: 44px; }
}
@media (forced-colors: active) {
.filter-bar a[aria-current="true"],
.search-sort a[aria-current="true"],
.top nav a[aria-current="page"],
.nav-link[aria-current="page"],
.bottom-nav a[aria-current="page"],
.bottom-menu > summary[aria-current="page"],
.lang a[aria-current="true"],
.tool-btn[aria-pressed="true"],
.card-bookmark-btn[aria-pressed="true"],
.card-bookmark-btn.is-saved,
.reading-setting-row button[aria-pressed="true"],
.search-sort a.is-active,
.search-suggest-panel a.is-active {
outline: 2px solid Highlight;
outline-offset: -2px;
}
.icon { forced-color-adjust: auto; }
}
@media print {
:root { --gb-shell: 100%; }
html, body { background: #fff !important; color: #000 !important; }
.top, .bottom-nav, .article-sticky-share, .skip, .gb-skip, .subscribe, .footer nav,
.article-actions, .article-reading-tools, .gb-reading-settings, .share-panel, .article-share-block,
.filter-bar, .chips, .hub-chips, .article-related, .article-related-more, .for-you-note,
.adsbygoogle, .theme-toggle, .lang, .top-search, .article-side-tools, .card-actions,
.card-action-buttons, .breadcrumb, .article-support-meta, .gb-toast {
display: none !important;
}
main, .main, .article, .article-main, .article-primary-text { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
.article-copy p, .article-section > p, .lead, .article blockquote { color: #000 !important; background: transparent !important; }
.article blockquote { border-color: #999 !important; }
a { color: #000 !important; text-decoration: none; }
h1, h2, h3 { color: #000 !important; }
.card, .today-card, .quote-archive-card, .article-section, .article-outline { border-color: #ccc !important; background: #fff !important; box-shadow: none !important; break-inside: avoid; }
.footer { border-top: 1px solid #ccc; color: #000 !important; }
}