/* =====================================================================
   animatsu template - custom.css   (article / Custom HTML helper classes)
   ---------------------------------------------------------------------
   Everything here uses the template tokens, so it follows the brand
   colour, dark mode and pastel mode automatically.

   1  Tone palette (.ui-tone-*)         9  Components: lists, steps, timeline
   2  Prose (article typography)        10 Components: accordion, quote, table
   3  Text utilities                    11 Components: media, gallery, embed
   4  Spacing / display utilities       12 Components: news, info, ticker
   5  Layout: grid, flex, split, cols   13 Effects: reveal / hover
   6  Components: box, callout, badge   14 Legacy blocks (blog, personnel,
   7  Components: button, hero, feature     document grid, ui-card, ui-card-sm)
   8  Components: stat, divider, avatar
   Open class-guide.html to see and copy every class.
   ===================================================================== */

/* ---------- 1. Tone palette ---------- */
:root {
  --tone: var(--primary); --tone-bg: var(--primary-soft); --tone-border: var(--border); --tone-ink: var(--link);
  --ui-gap: 1.25rem;
}
.ui-tone-purple { --tone: #7c5cc4; --tone-bg: #f1ecfb; --tone-border: #d9cdf3; --tone-ink: #4a3482; }
.ui-tone-blue   { --tone: #3b82f6; --tone-bg: #eaf2ff; --tone-border: #cfe0ff; --tone-ink: #1e4fa8; }
.ui-tone-teal   { --tone: #14b8a6; --tone-bg: #e4f8f5; --tone-border: #bdeee7; --tone-ink: #0f6f66; }
.ui-tone-green  { --tone: #22a55b; --tone-bg: #e8f7ee; --tone-border: #c3ebd2; --tone-ink: #19693c; }
.ui-tone-yellow { --tone: #eab308; --tone-bg: #fff8d9; --tone-border: #fbeba0; --tone-ink: #7a5a00; }
.ui-tone-orange { --tone: #f97316; --tone-bg: #fff0e3; --tone-border: #fed7b3; --tone-ink: #9a4410; }
.ui-tone-red    { --tone: #ef4444; --tone-bg: #fdeaea; --tone-border: #f9c7c7; --tone-ink: #9b1f1f; }
.ui-tone-pink   { --tone: #ec4899; --tone-bg: #fdeaf4; --tone-border: #f8c8e1; --tone-ink: #9d2a68; }
.ui-tone-gray   { --tone: #64748b; --tone-bg: #f1f4f8; --tone-border: #dde3eb; --tone-ink: #3b4656; }
html[data-theme="dark"] .ui-tone-purple { --tone-bg: #2b2442; --tone-border: #433663; --tone-ink: #cdbef2; }
html[data-theme="dark"] .ui-tone-blue   { --tone-bg: #1c2a44; --tone-border: #2a4170; --tone-ink: #b5d0ff; }
html[data-theme="dark"] .ui-tone-teal   { --tone-bg: #17332f; --tone-border: #1f5a52; --tone-ink: #9ee6dc; }
html[data-theme="dark"] .ui-tone-green  { --tone-bg: #17301f; --tone-border: #25553a; --tone-ink: #a8e6bf; }
html[data-theme="dark"] .ui-tone-yellow { --tone-bg: #3a3114; --tone-border: #66551d; --tone-ink: #f5de80; }
html[data-theme="dark"] .ui-tone-orange { --tone-bg: #3d2616; --tone-border: #6e4222; --tone-ink: #fcc690; }
html[data-theme="dark"] .ui-tone-red    { --tone-bg: #3b1d1d; --tone-border: #6a2f2f; --tone-ink: #f8b4b4; }
html[data-theme="dark"] .ui-tone-pink   { --tone-bg: #3b1d2e; --tone-border: #6a2f50; --tone-ink: #f6b6d6; }
html[data-theme="dark"] .ui-tone-gray   { --tone-bg: #272c36; --tone-border: #3d4452; --tone-ink: #c9d1dd; }

/* ---------- 2. Prose: article typography ---------- */
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) {
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.85; overflow-wrap: anywhere;
}
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) > :first-child { margin-top: 0; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) > :last-child { margin-bottom: 0; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) :is(h2, h3, h4, h5) { margin: 2em 0 .6em; line-height: 1.4; color: var(--text); text-wrap: balance; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); padding-bottom: .35em; border-bottom: 2px solid var(--primary-soft); }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) h4 { font-size: 1.1rem; color: var(--link); }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) p { margin: 0 0 1.1em; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) a:not(.ui-btn, .doc-card, .ui-card, .ui-card-sm) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.5em; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) li { margin-bottom: .35em; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) li::marker { color: var(--primary); }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) blockquote {
  margin: 1.5em 0; padding: 1rem 1.25rem; border-left: 4px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text); background: var(--primary-soft); font-style: italic;
}
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) blockquote > :last-child { margin-bottom: 0; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) img { border-radius: var(--radius-sm); }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) hr { margin: 2em 0; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) :is(code, kbd) { padding: .1em .4em; border-radius: .35rem; background: var(--surface-alt); border: 1px solid var(--border); font-size: .88em; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) pre { margin: 0 0 1.2em; padding: 1rem; overflow-x: auto; border-radius: var(--radius-sm); color: #e8eaf0; background: #1e2130; font-size: .9rem; line-height: 1.6; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) pre code { padding: 0; border: 0; background: none; color: inherit; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) mark { padding: .05em .3em; border-radius: .3em; color: inherit; background: #fde68a; }
html[data-theme="dark"] :is(.ui-prose, .item-page [itemprop="articleBody"]) mark { color: #fde68a; background: #5a4a10; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) table { margin: 0 0 1.2em; font-size: .95em; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) :is(figure) { margin: 1.5em 0; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) figcaption { margin-top: .5rem; color: var(--text-muted); font-size: .88rem; text-align: center; }
:is(.ui-prose, .item-page [itemprop="articleBody"], .com-content-article__body) :is(iframe, video) { max-width: 100%; border-radius: var(--radius-sm); }

/* ---------- 3. Text utilities ---------- */
.ui-lead { font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); line-height: 1.7; color: var(--text-muted); }
.ui-eyebrow { display: inline-block; margin-bottom: .4rem; color: var(--link); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ui-display { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.ui-text-xs { font-size: .78rem; } .ui-text-sm { font-size: .9rem; } .ui-text-lg { font-size: 1.2rem; }
.ui-text-xl { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); } .ui-text-2xl { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.ui-text-center { text-align: center; } .ui-text-left { text-align: left; } .ui-text-right { text-align: right; } .ui-text-justify { text-align: justify; }
.ui-text-muted { color: var(--text-muted); } .ui-text-primary { color: var(--link); }
.ui-text-tone { color: var(--tone-ink); }
.ui-fw-normal { font-weight: 400; } .ui-fw-medium { font-weight: 500; } .ui-fw-bold { font-weight: 700; }
.ui-balance { text-wrap: balance; } .ui-nowrap { white-space: nowrap; } .ui-upper { text-transform: uppercase; letter-spacing: .06em; }
.ui-clamp-2, .ui-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.ui-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } .ui-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.ui-gradient-text { background: linear-gradient(110deg, var(--primary), #ec4899 60%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ui-highlight { padding: 0 .25em; background: linear-gradient(transparent 58%, rgb(250 204 21 / .55) 58%); border-radius: 2px; }
.ui-underline-wave { text-decoration: underline wavy var(--primary); text-underline-offset: .25em; }
.ui-dropcap::first-letter { float: left; margin: .05em .12em 0 0; color: var(--link); font-size: 3.4em; font-weight: 800; line-height: .85; }
.ui-heading-accent { padding-left: .75rem; border-left: 5px solid var(--primary); }
.ui-heading-underline { display: inline-block; padding-bottom: .3rem; border-bottom: 4px solid var(--primary); border-image: linear-gradient(90deg, var(--primary), transparent) 1; }
.ui-heading-center { display: flex; align-items: center; gap: 1rem; text-align: center; }
.ui-heading-center::before, .ui-heading-center::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- 4. Spacing / display utilities (scale 0 .5 1 1.5 2.5 4 rem) ---------- */
.ui-mt-0 { margin-top: 0; } .ui-mt-1 { margin-top: .5rem; } .ui-mt-2 { margin-top: 1rem; } .ui-mt-3 { margin-top: 1.5rem; } .ui-mt-4 { margin-top: 2.5rem; } .ui-mt-5 { margin-top: 4rem; }
.ui-mb-0 { margin-bottom: 0; } .ui-mb-1 { margin-bottom: .5rem; } .ui-mb-2 { margin-bottom: 1rem; } .ui-mb-3 { margin-bottom: 1.5rem; } .ui-mb-4 { margin-bottom: 2.5rem; } .ui-mb-5 { margin-bottom: 4rem; }
.ui-p-0 { padding: 0; } .ui-p-1 { padding: .5rem; } .ui-p-2 { padding: 1rem; } .ui-p-3 { padding: 1.5rem; } .ui-p-4 { padding: 2.5rem; }
.ui-mx-auto { margin-inline: auto; } .ui-w-full { width: 100%; } .ui-w-narrow { max-width: 42rem; } .ui-w-medium { max-width: 60rem; }
.ui-rounded { border-radius: var(--radius-sm); } .ui-rounded-lg { border-radius: 1.25rem; } .ui-rounded-full { border-radius: 999px; }
.ui-shadow { box-shadow: var(--shadow); } .ui-shadow-lg { box-shadow: var(--shadow-lg); } .ui-border { border: 1px solid var(--border); }
.ui-bg-soft { background: var(--primary-soft); } .ui-bg-alt { background: var(--surface-alt); } .ui-bg-tone { background: var(--tone-bg); }
.ui-clearfix::after { content: ""; display: table; clear: both; }
.ui-float-left { float: left; margin: 0 1.25rem 1rem 0; max-width: 45%; } .ui-float-right { float: right; margin: 0 0 1rem 1.25rem; max-width: 45%; }
.ui-center { display: grid; place-items: center; text-align: center; }
@media (max-width: 767px) {
  .ui-hide-sm { display: none !important; }
  .ui-float-left, .ui-float-right { float: none; max-width: 100%; margin: 0 0 1rem; }
}
@media (min-width: 768px) { .ui-hide-md-up { display: none !important; } }
@media print { .ui-hide-print { display: none !important; } }

/* ---------- 5. Layout ---------- */
.ui-grid { display: grid; gap: var(--ui-gap); grid-template-columns: minmax(0, 1fr); margin-block: 1.5rem; }
@media (min-width: 600px) { .ui-grid.ui-cols-2, .ui-grid.ui-cols-3, .ui-grid.ui-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ui-grid.ui-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ui-grid.ui-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ui-grid-auto { display: grid; gap: var(--ui-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 15rem)), 1fr)); margin-block: 1.5rem; }
.ui-grid-fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 15rem)), 1fr)); }
.ui-gap-sm { --ui-gap: .6rem; } .ui-gap-lg { --ui-gap: 2rem; }
.ui-span-all { grid-column: 1 / -1; }
.ui-flex { display: flex; flex-wrap: wrap; gap: var(--ui-gap); } .ui-flex-col { flex-direction: column; } .ui-flex-1 { flex: 1 1 0; min-width: 12rem; }
.ui-items-center { align-items: center; } .ui-items-start { align-items: flex-start; } .ui-justify-center { justify-content: center; } .ui-justify-between { justify-content: space-between; } .ui-justify-end { justify-content: flex-end; }
.ui-stack > * + * { margin-top: var(--ui-gap); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ui-section { margin-block: 2rem; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--radius); background: var(--tone-bg); border: 1px solid var(--tone-border); }
.ui-section-bleed { margin-inline: calc(clamp(1rem, 3vw, 2rem) * -1); padding-inline: clamp(1rem, 3vw, 2rem); border-radius: 0; border-inline: 0; }
.ui-split { display: grid; gap: clamp(1rem, 3vw, 2rem); align-items: center; margin-block: 1.5rem; }
@media (min-width: 768px) { .ui-split { grid-template-columns: var(--split, 1fr 1fr); } .ui-split.ui-split-reverse > :first-child { order: 2; } .ui-split.ui-split-1-2 { --split: 1fr 2fr; } .ui-split.ui-split-2-1 { --split: 2fr 1fr; } .ui-split.ui-split-1-3 { --split: 1fr 3fr; } }
.ui-split > img, .ui-split img.ui-fill { width: 100%; border-radius: var(--radius); }
.ui-columns-2, .ui-columns-3 { column-gap: 2rem; }
@media (min-width: 700px) { .ui-columns-2 { columns: 2; } .ui-columns-3 { columns: 3; } .ui-columns-2 > *, .ui-columns-3 > * { break-inside: avoid; } }
.ui-ratio { position: relative; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-alt); }
.ui-ratio-1x1 { --ratio: 1 / 1; } .ui-ratio-4x3 { --ratio: 4 / 3; } .ui-ratio-3x2 { --ratio: 3 / 2; } .ui-ratio-21x9 { --ratio: 21 / 9; }
.ui-ratio > :is(img, video, iframe) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* ---------- 6. Box, callout, badge ---------- */
.ui-box { padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ui-box > :first-child { margin-top: 0; } .ui-box > :last-child { margin-bottom: 0; }
.ui-box-soft { background: var(--tone-bg); border-color: var(--tone-border); }
.ui-box-outline { background: transparent; border: 2px solid var(--tone); }
.ui-box-shadow { border-color: transparent; box-shadow: var(--shadow); }
.ui-box-accent { border-top: 4px solid var(--tone); }
.ui-box-glass { border-color: rgb(255 255 255 / .35); background: var(--surface-glass); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.ui-box-hover { transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease, border-color var(--t) ease; }
@media (hover: hover) { .ui-box-hover:hover { transform: translateY(-5px); border-color: var(--tone); box-shadow: var(--shadow-lg); } }

.ui-callout { position: relative; margin: 1.25rem 0; padding: 1rem 1.15rem 1rem 3.1rem; border: 1px solid var(--tone-border); border-left: 5px solid var(--tone); border-radius: var(--radius-sm); color: var(--tone-ink); background: var(--tone-bg); }
.ui-callout::before { content: "ℹ"; position: absolute; left: .95rem; top: .95rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #fff; background: var(--tone); font-size: .9rem; font-weight: 700; line-height: 1; }
.ui-callout.ui-tone-green::before { content: "✓"; } .ui-callout.ui-tone-yellow::before, .ui-callout.ui-tone-orange::before { content: "!"; }
.ui-callout.ui-tone-red::before { content: "✕"; } .ui-callout.ui-tone-pink::before { content: "♥"; } .ui-callout.ui-tone-gray::before { content: "✎"; }
.ui-callout.ui-no-icon { padding-left: 1.15rem; } .ui-callout.ui-no-icon::before { display: none; }
.ui-callout-title { display: block; margin-bottom: .2rem; font-weight: 700; }
.ui-callout > :last-child { margin-bottom: 0; } .ui-callout a { color: inherit; font-weight: 600; }

.ui-badge, .ui-tag { display: inline-flex; align-items: center; gap: .3em; padding: .15em .7em; border: 1px solid var(--tone-border); border-radius: 999px; color: var(--tone-ink); background: var(--tone-bg); font-size: .78em; font-weight: 600; line-height: 1.6; vertical-align: middle; }
.ui-badge-solid { color: #fff; background: var(--tone); border-color: var(--tone); }
.ui-badge-dot::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--tone); }
.ui-badge-new { color: #fff; background: linear-gradient(120deg, #ef4444, #f97316); border: 0; animation: ui-pulse 2s ease-in-out infinite; }

/* ---------- 7. Button, hero, feature ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem 1.3rem; border: 2px solid var(--tone); border-radius: var(--radius-sm); color: #fff !important; background: var(--tone); font-weight: 600; line-height: 1.4; text-decoration: none !important; cursor: pointer; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease, background-color var(--t-fast) ease, color var(--t-fast) ease; }
.ui-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px var(--tone); filter: brightness(1.06); }
.ui-btn:active { transform: scale(.97); }
.ui-btn-outline { color: var(--tone-ink) !important; background: transparent; }
.ui-btn-outline:hover { color: #fff !important; background: var(--tone); }
.ui-btn-soft { color: var(--tone-ink) !important; background: var(--tone-bg); border-color: var(--tone-border); }
.ui-btn-ghost { color: var(--tone-ink) !important; background: transparent; border-color: transparent; }
.ui-btn-ghost:hover { background: var(--tone-bg); box-shadow: none; }
.ui-btn-light { color: #1f2433 !important; background: #fff; border-color: #fff; }
.ui-btn-sm { padding: .35rem .85rem; font-size: .88rem; } .ui-btn-lg { padding: .9rem 1.9rem; font-size: 1.1rem; }
.ui-btn-pill { border-radius: 999px; } .ui-btn-block { display: flex; width: 100%; }
.ui-btn-group { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; }

.ui-hero { position: relative; isolation: isolate; display: grid; align-content: center; gap: .75rem; min-height: clamp(14rem, 36vw, 24rem); margin-block: 1.5rem; padding: clamp(1.5rem, 5vw, 3.5rem); overflow: hidden; border-radius: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover)) center / cover; }
.ui-hero[style*="--hero-img"] { background-image: linear-gradient(100deg, rgb(15 12 30 / .78), rgb(15 12 30 / .25)), var(--hero-img); background-size: cover; background-position: center; }
.ui-hero::after { content: ""; position: absolute; z-index: -1; right: -8%; top: -30%; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .22), transparent 68%); }
.ui-hero-title { margin: 0; color: inherit; font-size: clamp(1.7rem, 1.1rem + 3vw, 3rem); font-weight: 800; line-height: 1.2; text-wrap: balance; }
.ui-hero-text { max-width: 38rem; margin: 0; color: rgb(255 255 255 / .9); font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }
.ui-hero-center { justify-items: center; text-align: center; }
.ui-hero code { color: #fff; background: rgb(255 255 255 / .18); border-color: transparent; }
.ui-hero-soft { color: var(--text); background: linear-gradient(135deg, var(--tone-bg), var(--surface-alt)); border: 1px solid var(--tone-border); }
.ui-hero-soft .ui-hero-text { color: var(--text-muted); }

.ui-feature { display: flex; gap: 1rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease, border-color var(--t) ease; }
@media (hover: hover) { .ui-feature:hover { transform: translateY(-4px); border-color: var(--tone); box-shadow: var(--shadow-lg); } }
.ui-feature-icon { flex: 0 0 3rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; color: var(--tone-ink); background: var(--tone-bg); font-size: 1.5rem; line-height: 1; }
.ui-feature-title { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 700; }
.ui-feature-text { margin: 0; color: var(--text-muted); font-size: .94rem; line-height: 1.6; }
.ui-feature-vertical { flex-direction: column; text-align: center; align-items: center; }

/* ---------- 8. Stat, divider, avatar, progress ---------- */
.ui-stats { display: grid; gap: var(--ui-gap); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-block: 1.5rem; }
.ui-stat { padding: 1.1rem 1rem; text-align: center; border: 1px solid var(--tone-border); border-radius: var(--radius); background: var(--tone-bg); }
.ui-stat-num { display: block; color: var(--tone-ink); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ui-stat-label { display: block; margin-top: .25rem; color: var(--text-muted); font-size: .88rem; }
.ui-divider { height: 1px; margin: 2rem 0; border: 0; background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent); }
.ui-divider-text { display: flex; align-items: center; gap: 1rem; margin: 2rem 0; color: var(--text-muted); font-size: .88rem; }
.ui-divider-text::before, .ui-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ui-divider-dots { height: auto; margin: 2rem 0; border: 0; text-align: center; background: none; line-height: 1; }
.ui-divider-dots::before { content: "● ● ●"; color: var(--primary); letter-spacing: .6em; opacity: .55; }
.ui-avatar { display: inline-grid; place-items: center; width: var(--size, 3rem); height: var(--size, 3rem); overflow: hidden; border-radius: 50%; color: var(--tone-ink); background: var(--tone-bg); font-weight: 700; object-fit: cover; }
.ui-avatar-lg { --size: 5rem; } .ui-avatar-xl { --size: 8rem; }
.ui-progress { height: .65rem; overflow: hidden; border-radius: 999px; background: var(--tone-bg); }
.ui-progress > span { display: block; height: 100%; width: var(--value, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 60%, #fff)); }

/* ---------- 9. Lists, steps, timeline ---------- */
.ui-list-plain { margin: 0; padding: 0; list-style: none; }
.ui-list-check, .ui-list-arrow, .ui-list-star { margin: 1rem 0; padding: 0; list-style: none; }
.ui-list-check > li, .ui-list-arrow > li, .ui-list-star > li { position: relative; margin-bottom: .55rem; padding-left: 1.9rem; }
.ui-list-check > li::before, .ui-list-arrow > li::before, .ui-list-star > li::before { position: absolute; left: 0; top: .2em; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; color: #fff; background: var(--tone); font-size: .75rem; font-weight: 700; line-height: 1; }
.ui-list-check > li::before { content: "✓"; } .ui-list-arrow > li::before { content: "›"; font-size: 1rem; } .ui-list-star > li::before { content: "★"; }
.ui-list-divided { margin: 0; padding: 0; list-style: none; } .ui-list-divided > li { padding: .65rem 0; border-bottom: 1px dashed var(--border); } .ui-list-divided > li:last-child { border-bottom: 0; }
.ui-list-inline { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.ui-list-links { margin: 0; padding: 0; list-style: none; }
.ui-list-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-radius: .6rem; text-decoration: none; transition: background-color var(--t-fast) ease, padding var(--t) var(--ease-out); }
.ui-list-links a::after { content: "→"; color: var(--primary); transition: transform var(--t) var(--ease-out); }
.ui-list-links a:hover { background: var(--primary-soft); padding-left: 1.2rem; } .ui-list-links a:hover::after { transform: translateX(4px); }

.ui-steps { margin: 1.5rem 0; padding: 0; list-style: none; counter-reset: ui-step; }
.ui-steps > li { position: relative; margin: 0 0 1.1rem; padding: .15rem 0 0 3.4rem; min-height: 2.5rem; counter-increment: ui-step; }
.ui-steps > li::before { content: counter(ui-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 65%, #000)); font-weight: 700; box-shadow: 0 4px 12px -2px var(--tone); }
.ui-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1.15rem; top: 2.6rem; bottom: -1rem; width: 2px; background: var(--tone-border); }
.ui-steps strong:first-child { display: block; }

.ui-timeline { position: relative; margin: 1.5rem 0; padding: 0 0 0 1.6rem; list-style: none; }
.ui-timeline::before { content: ""; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 2px; background: linear-gradient(var(--tone), var(--tone-border)); }
.ui-timeline-item { position: relative; margin-bottom: 1.4rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.ui-timeline-item::before { content: ""; position: absolute; left: -1.5rem; top: 1.05rem; width: .9rem; height: .9rem; border: 3px solid var(--surface); border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px var(--tone); }
.ui-timeline-date { display: block; margin-bottom: .15rem; color: var(--tone-ink); font-size: .82rem; font-weight: 700; }
.ui-timeline-title { margin: 0 0 .25rem; font-size: 1.02rem; font-weight: 700; }
.ui-timeline-item > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .ui-timeline-center { padding: 0; }
  .ui-timeline-center::before { left: 50%; transform: translateX(-50%); }
  .ui-timeline-center .ui-timeline-item { width: calc(50% - 1.6rem); }
  .ui-timeline-center .ui-timeline-item:nth-child(even) { margin-left: auto; }
  .ui-timeline-center .ui-timeline-item::before { left: auto; right: -2.15rem; }
  .ui-timeline-center .ui-timeline-item:nth-child(even)::before { right: auto; left: -2.15rem; }
}

/* ---------- 10. Accordion, quote, table ---------- */
.ui-accordion { margin: 1.25rem 0; }
.ui-accordion details { margin-bottom: .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; transition: border-color var(--t) ease, box-shadow var(--t) ease; }
.ui-accordion details[open] { border-color: var(--tone); box-shadow: var(--shadow); }
.ui-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; font-weight: 600; cursor: pointer; list-style: none; transition: background-color var(--t-fast) ease; }
.ui-accordion summary::-webkit-details-marker { display: none; }
.ui-accordion summary:hover { background: var(--tone-bg); }
.ui-accordion summary::after { content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; border: solid var(--tone); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t) var(--ease-out); }
.ui-accordion details[open] > summary::after { transform: rotate(-135deg); }
.ui-accordion details[open] > summary { color: var(--tone-ink); background: var(--tone-bg); }
.ui-accordion details > :not(summary) { margin-inline: 1.1rem; }
.ui-accordion details > summary + * { margin-top: .9rem; } .ui-accordion details > :last-child { margin-bottom: 1rem; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .ui-accordion details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease-out), content-visibility .35s allow-discrete; } .ui-accordion details[open]::details-content { height: auto; } }

.ui-quote { position: relative; margin: 1.75rem 0; padding: 1.5rem 1.5rem 1.25rem 3.6rem; border-radius: var(--radius); background: var(--tone-bg); font-size: 1.1rem; font-style: normal; }
.ui-quote::before { content: "“"; position: absolute; left: 1rem; top: .2rem; color: var(--tone); font-family: Georgia, serif; font-size: 4.2rem; line-height: 1; opacity: .6; }
.ui-quote p { margin: 0 0 .5rem; }
.ui-quote cite, .ui-quote footer { display: block; color: var(--tone-ink); font-size: .9rem; font-style: normal; font-weight: 600; }
.ui-quote cite::before { content: "— "; }
.ui-quote-center { padding: 2.6rem 1.5rem 1.5rem; text-align: center; } .ui-quote-center::before { left: 50%; top: 0; transform: translateX(-50%); }

.ui-table-wrap { margin: 1.25rem 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; }
.ui-table-wrap > table { margin: 0; min-width: 32rem; }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ui-table th, .ui-table td { border: 0; border-bottom: 1px solid var(--border); }
.ui-table thead th { color: #fff; background: var(--tone); font-weight: 600; white-space: nowrap; }
.ui-table tbody tr:last-child > * { border-bottom: 0; }
.ui-table-striped tbody tr:nth-child(even) > * { background: var(--tone-bg); }
.ui-table-hover tbody tr { transition: background-color var(--t-fast) ease; } .ui-table-hover tbody tr:hover > * { background: var(--tone-bg); }
.ui-table-compact :is(th, td) { padding: .4rem .6rem; font-size: .9rem; }
.ui-table-center :is(th, td) { text-align: center; }
.ui-table-cards { display: block; } /* mobile: each row becomes a card (add data-label="..." on <td>) */
@media (max-width: 640px) {
  .ui-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ui-table-cards, .ui-table-cards tbody, .ui-table-cards tr, .ui-table-cards td { display: block; width: 100%; }
  .ui-table-cards tr { margin-bottom: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
  .ui-table-cards td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; border: 0; border-bottom: 1px solid var(--border); }
  .ui-table-cards td::before { content: attr(data-label); color: var(--text-muted); font-weight: 600; text-align: left; }
}

/* ---------- 11. Media, gallery, embed ---------- */
.ui-figure { margin: 1.5rem 0; } .ui-figure img { display: block; width: 100%; border-radius: var(--radius); }
.ui-figure figcaption { margin-top: .5rem; color: var(--text-muted); font-size: .88rem; text-align: center; }
.ui-img-rounded { border-radius: var(--radius); } .ui-img-circle { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.ui-img-shadow { box-shadow: var(--shadow-lg); } .ui-img-border { padding: .35rem; border: 1px solid var(--border); background: var(--surface); }
.ui-img-cover { width: 100%; height: 100%; object-fit: cover; }
.ui-zoom { overflow: hidden; border-radius: var(--radius); } .ui-zoom img { display: block; width: 100%; transition: transform .7s var(--ease-out); } .ui-zoom:hover img { transform: scale(1.07); }
.ui-gallery { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 11rem)), 1fr)); margin-block: 1.5rem; }
.ui-gallery > * { position: relative; overflow: hidden; margin: 0; border-radius: var(--radius-sm); aspect-ratio: 4 / 3; background: var(--surface-alt); }
.ui-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .3s ease; }
.ui-gallery > *:hover img { transform: scale(1.08); filter: brightness(1.05); }
.ui-gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 1.4rem .6rem .45rem; color: #fff; font-size: .82rem; background: linear-gradient(transparent, rgb(0 0 0 / .65)); transform: translateY(100%); transition: transform var(--t) var(--ease-out); }
.ui-gallery > *:hover figcaption { transform: none; }
.ui-gallery-masonry { display: block; columns: 2 10rem; column-gap: .6rem; } .ui-gallery-masonry > * { display: block; margin-bottom: .6rem; aspect-ratio: auto; break-inside: avoid; } @media (min-width: 900px) { .ui-gallery-masonry { columns: 3; } }
.ui-embed { position: relative; aspect-ratio: 16 / 9; margin-block: 1.5rem; overflow: hidden; border-radius: var(--radius); background: #000; }
.ui-embed > iframe, .ui-embed > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ui-map { margin-block: 1.5rem; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); } .ui-map iframe { display: block; width: 100%; min-height: 20rem; border: 0; }
.ui-media { display: flex; gap: 1rem; align-items: flex-start; margin-block: 1rem; }
.ui-media > img { flex: 0 0 auto; width: var(--media-w, 7rem); border-radius: var(--radius-sm); }
.ui-media-body { flex: 1 1 0; min-width: 0; } .ui-media-body > :first-child { margin-top: 0; } .ui-media-body > :last-child { margin-bottom: 0; }
@media (max-width: 520px) { .ui-media { flex-direction: column; } .ui-media > img { width: 100%; } }

/* ---------- 12. News, info list, ticker, notice ---------- */
.ui-news { margin: 1rem 0; padding: 0; list-style: none; }
.ui-news-item { display: flex; gap: 1rem; align-items: center; padding: .85rem .5rem; border-bottom: 1px dashed var(--border); transition: background-color var(--t-fast) ease; }
.ui-news-item:hover { background: var(--primary-soft); }
.ui-news-date { flex: 0 0 3.6rem; padding: .35rem 0; text-align: center; border-radius: .7rem; color: var(--tone-ink); background: var(--tone-bg); line-height: 1.15; }
.ui-news-date b { display: block; font-size: 1.35rem; } .ui-news-date small { font-size: .72rem; text-transform: uppercase; }
.ui-news-title { flex: 1 1 0; min-width: 0; margin: 0; font-weight: 600; } .ui-news-title a { color: var(--text); text-decoration: none; } .ui-news-title a:hover { color: var(--link); }

.ui-info { display: grid; gap: .5rem 1.25rem; grid-template-columns: max-content 1fr; margin: 1rem 0; }
.ui-info dt { color: var(--text-muted); font-weight: 600; } .ui-info dd { margin: 0; }
@media (max-width: 520px) { .ui-info { grid-template-columns: 1fr; gap: 0; } .ui-info dd { margin-bottom: .6rem; } }

.ui-notice-bar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-radius: 999px; color: var(--tone-ink); background: var(--tone-bg); border: 1px solid var(--tone-border); font-size: .92rem; }
.ui-ticker { position:relative; display:flex; align-items:center; gap:.75rem; overflow:hidden; margin-block:1rem; padding:.5rem .5rem .5rem 1rem; border-radius:999px; color:var(--tone-ink); background:var(--tone-bg); border:1px solid var(--tone-border); }
.ui-ticker-label { flex:0 0 auto; padding:.1rem .75rem; border-radius:999px; color:#fff; background:var(--tone); font-size:.8rem; font-weight:700; }
.ui-ticker-track { display:flex; flex:1 1 0; min-width:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.ui-ticker-inner { display:flex; flex:0 0 auto; white-space:nowrap; will-change:transform; }
.ui-ticker-group { display:flex; flex:0 0 auto; gap:3rem; padding-right:3rem; white-space:nowrap; }
.ui-ticker.is-moving .ui-ticker-inner { animation:ui-ticker-scroll var(--ticker-duration,30s) linear infinite; }
.ui-ticker:hover .ui-ticker-inner { animation-play-state:paused; }
@keyframes ui-ticker-scroll { from { transform:translateX(0); } to { transform:translateX(calc(-1 * var(--ticker-loop-width))); } }

/* ---------- 13. Effects ---------- */
html[data-anim="on"] .ui-reveal:not(.will-reveal) { animation: enter-up .7s var(--ease-out) both; }
html[data-anim="on"] .will-reveal.ui-reveal-left { transform: translateX(-28px); }
html[data-anim="on"] .will-reveal.ui-reveal-right { transform: translateX(28px); }
html[data-anim="on"] .will-reveal.ui-reveal-zoom { transform: scale(.9); }
html[data-anim="on"] .will-reveal.is-revealed { transform: none; }
.ui-hover-lift { transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease; }
@media (hover: hover) { .ui-hover-lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .ui-hover-glow:hover { box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / .2), 0 12px 30px -8px rgb(var(--primary-rgb) / .5); } }
.ui-hover-glow { transition: box-shadow var(--t) ease; }
.ui-pulse { animation: ui-pulse 2.4s ease-in-out infinite; }
.ui-float { animation: ui-float 4s ease-in-out infinite; }
@keyframes ui-pulse { 50% { transform: scale(1.06); } }
@keyframes ui-float { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .ui-pulse, .ui-float, .ui-badge-new, .ui-ticker-inner { animation: none !important; } }

/* =====================================================================
   14. Legacy blocks (kept class names; now follow the site theme)
   ===================================================================== */

/* Blog posts */
article[itemprop="blogPost"], div[itemprop="blogPost"] { margin-bottom: 2.5rem !important; padding-bottom: 2rem !important; border-bottom: 2px dashed var(--border); }
.published { text-align: right; }
[itemprop="datePublished"] { color: var(--text-muted); font-size: .8rem; }

/* Personnel cards */
.personnel-wrap { --p-card-bg: var(--surface); --p-card-border: var(--border); --p-text-main: var(--text); --p-text-sub: var(--text-muted); --p-photo-bg: var(--surface-alt); --p-accent: var(--primary); }
.personnel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; width: 100%; }
.personnel-card { display: flex; flex-direction: column; width: 100%; max-width: 160px; margin: 0; overflow: hidden; justify-self: center; background: var(--p-card-bg); border: 1px solid var(--p-card-border); border-radius: 10px; transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease; }
@media (hover: hover) { .personnel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }
.personnel-card:first-child { grid-column: 1 / -1; }
.personnel-photo { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--p-photo-bg); }
.personnel-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.personnel-card:hover .personnel-photo img { transform: scale(1.06); }
.personnel-info { padding: 10px; text-align: left; }
.personnel-name { margin-bottom: 4px; color: var(--p-text-main); font-size: 12px; font-weight: 700; line-height: 1.35; }
.personnel-position { display: flex; align-items: flex-start; color: var(--p-text-sub); font-size: 10px; line-height: 1.45; }
.personnel-position::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; margin: 4px 5px 0 0; border-radius: 50%; background: var(--p-accent); }

/* Document grid */
.doc-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 20px 0; }
.doc-card { display: flex; align-items: center; padding: 16px; color: var(--text) !important; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); text-decoration: none !important; transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease, border-color var(--t) ease, background-color var(--t) ease; }
.doc-card:hover { transform: translateY(-2px); border-color: var(--primary); background: var(--surface-alt); box-shadow: 0 6px 16px rgb(var(--primary-rgb) / .18); }
.doc-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 14px; border-radius: 8px; color: var(--link); background: var(--primary-soft); font-size: 20px; }
.doc-title { color: var(--text); font-size: .95rem; font-weight: 500; line-height: 1.4; transition: color var(--t-fast) ease; }
.doc-card:hover .doc-title { color: var(--link); }

/* Large link cards */
.ui-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; width: 100%; max-width: 900px; margin: 2rem auto; }
.ui-card, .ui-card-sm { display: flex; flex-direction: column; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); text-decoration: none; transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease, border-color var(--t) ease; }
.ui-card { width: 100%; border-radius: 12px; }
@media (min-width: 640px) { .ui-card { width: calc(50% - .75rem); } }
.ui-card-sm { width: calc(50% - .5rem); border-radius: 8px; }
.ui-card:hover, .ui-card-sm:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.ui-card-img-wrap, .ui-card-sm-img-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-alt); }
.ui-card-img-wrap img, .ui-card-sm-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.ui-card:hover img, .ui-card-sm:hover img { transform: scale(1.06); }
.ui-card-content { display: flex; flex-direction: column; flex-grow: 1; padding: 1.25rem; align-items: center; text-align: left; }
.ui-card-title { margin: 0 0 .5rem; color: var(--text); font-size: 1.25rem; font-weight: 600; line-height: 1.4; transition: color var(--t) ease; }
.ui-card:hover .ui-card-title { color: var(--link); }
.ui-card-desc { margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.5; }

/* Medium link cards */
.ui-card-md-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; align-items: center; width: 100%; max-width: 900px; margin: 2rem auto; }
.ui-card-md { display: flex; flex-direction: column; align-items: center; overflow: hidden; width: 100%; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); text-decoration: none; transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease, border-color var(--t) ease; }
@media (min-width: 640px) { .ui-card-md { width: calc(50% - .625rem); } }
.ui-card-md:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.ui-card-md-img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-alt); }
.ui-card-md-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.ui-card-md:hover img { transform: scale(1.06); }
.ui-card-md-content { display: flex; flex-direction: column; flex-grow: 1; align-items: center; width: 100%; padding: 1rem; text-align: center; }
.ui-card-md-title { margin: 0 0 .4rem; color: var(--text); font-size: 1.1rem; font-weight: 600; line-height: 1.4; transition: color var(--t) ease; }
.ui-card-md:hover .ui-card-md-title { color: var(--link); }
.ui-card-md-desc { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; }

/* Small link cards */
.ui-card-section { width: 100%; max-width: 900px; height: 1px; margin: 3rem auto; background: var(--border); }
.ui-card-sm-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; max-width: 900px; margin: 2rem auto; }
@media (min-width: 640px) { .ui-card-sm { width: calc(33.333% - .67rem); } }
@media (min-width: 860px) { .ui-card-sm { width: calc(25% - .75rem); } }
.ui-card-sm-content { display: flex; flex-direction: column; flex-grow: 1; align-items: center; padding: .75rem; text-align: center; }
.ui-card-sm-title { margin: 0 0 .35rem; color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.3; transition: color var(--t) ease; }
.ui-card-sm:hover .ui-card-sm-title { color: var(--link); }
.ui-card-sm-desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; margin: 0; overflow: hidden; color: var(--text-muted); font-size: .85rem; line-height: 1.4; }