.fnv-rh { padding: 24px 0 0; }
.fnv-rh__frame {
background: var(--fnv-surface);
border: 2px solid var(--fnv-ink);
border-block-start-width: 4px;
container-type: inline-size;
}
.fnv-rh__top {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@container (min-width: 760px) {
.fnv-rh__top { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); }
}
.fnv-rh__main { min-width: 0; padding: 22px 24px 20px; }
.fnv-rh__kicker {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 10px;
margin: 0 0 8px;
font-size: .8125rem;
font-weight: 800;
line-height: 1.7;
color: var(--fnv-ink-3);
}
.fnv-rh__en { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; color: var(--fnv-ink-3); }
.fnv-rh .fnv-rh__title {
margin: 0 0 8px;
font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
line-height: 1.4;
color: var(--fnv-ink);
}
.fnv-rh__sub {
margin: 0 0 18px;
max-width: var(--fnv-measure-wide);
font-size: 1rem;
line-height: 1.9;
color: var(--fnv-ink-2);
}
.fnv-rh__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fnv-rh__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.fnv-rh .fnv-rh__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 20px;
border: 2px solid var(--fnv-ink);
background: var(--fnv-ink);
color: var(--fnv-surface);
font-size: .9375rem;
font-weight: 800;
line-height: 1.4;
text-decoration: none;
}
.fnv-rh .fnv-rh__btn:hover { background: var(--fnv-surface); color: var(--fnv-ink); text-decoration: none; }
.fnv-rh .fnv-rh__btn-ghost { background: var(--fnv-surface); color: var(--fnv-ink); }
.fnv-rh .fnv-rh__btn-ghost:hover { background: var(--fnv-ink); color: var(--fnv-surface); }
.fnv-rh__hint { font-size: .8125rem; font-weight: 600; line-height: 1.8; color: var(--fnv-ink-3); max-width: var(--fnv-measure-wide); }
.fnv-rh__status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
font-size: .875rem;
font-weight: 700;
color: var(--fnv-ink-2);
}
.fnv-rh__status-k { padding: 3px 10px; border: 2px solid var(--fnv-ink); font-weight: 800; color: var(--fnv-ink); }
.fnv-rh__clock {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
padding: 20px 24px;
background: var(--fnv-ink);
color: var(--fnv-surface);
}
.fnv-rh .fnv-rh__clock-h {
margin: 0 0 4px;
font-size: .9375rem;
font-weight: 800;
line-height: 1.6;
color: var(--fnv-surface);
}
.fnv-rh__phase {
align-self: flex-start;
padding: 1px 10px;
border: 1px solid var(--fnv-surface);
font-size: .8125rem;
font-weight: 700;
line-height: 1.8;
}
.fnv-rh__cd-lbl { margin-top: 8px; font-size: .875rem; font-weight: 600; line-height: 1.7; }
.fnv-rh__cd {
font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
font-weight: 800;
line-height: 1.15;
unicode-bidi: isolate;
text-align: var(--fnv-page-start, right);
}
.fnv-rh__when { font-size: .875rem; line-height: 1.8; }
.fnv-rh__when time { font-weight: 800; }
.fnv-rh__stats {
--fnv-hg-min: 150px;
margin: 0;
border-block-start: 2px solid var(--fnv-ink);
border-inline-start: 0;
}
.fnv-rh__stat {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap: 2px;
padding: 12px 18px;
}
.fnv-rh__stat-n { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: var(--fnv-ink); }
.fnv-rh__stat-l { margin: 0; font-size: .8125rem; font-weight: 700; line-height: 1.6; color: var(--fnv-ink-3); }
.fnv-rh__latest {
position: relative;
display: grid;
gap: 6px;
padding: 16px 24px 18px;
border-block-start: 2px solid var(--fnv-ink);
}
.fnv-rh__latest:hover { background: var(--fnv-surface-2); }
.fnv-rh__latest-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
font-size: .8125rem;
font-weight: 700;
line-height: 1.7;
color: var(--fnv-ink-3);
}
.fnv-rh__tag { padding: 1px 8px; background: var(--fnv-ink); color: var(--fnv-surface); font-weight: 800; }
.fnv-rh__access--lock { color: var(--fnv-ink-2); }
.fnv-rh .fnv-rh__latest-h { margin: 0; font-size: 1.15rem; line-height: 1.65; color: var(--fnv-ink); }
.fnv-rh .fnv-rh__latest-a { color: var(--fnv-ink); text-decoration: none; }
.fnv-rh__latest-a::after { content: ''; position: absolute; inset: 0; }
.fnv-rh__latest:hover .fnv-rh__latest-a { text-decoration: underline; text-underline-offset: 4px; }
.fnv-rh__latest-sub { max-width: var(--fnv-measure-wide); font-size: .9375rem; line-height: 1.85; color: var(--fnv-ink-2); }
.fnv-rh__latest-go {
justify-self: start;
margin-top: 2px;
font-size: .875rem;
font-weight: 800;
line-height: 1.7;
color: var(--fnv-ink);
border-block-end: 2px solid var(--fnv-ink);
}
.fnv-rh .fnv-rh__btn:focus-visible { outline: 2px solid var(--fnv-ink); outline-offset: 2px; }
.fnv-rh .fnv-rh__latest-a:focus-visible { outline: none; }
.fnv-rh__latest-a:focus-visible::after { outline: 2px solid var(--fnv-ink); outline-offset: -4px; }
@media (max-width: 575.98px) {
.fnv-rh { padding-top: 14px; }
.fnv-rh__main { padding: 16px 16px 18px; }
.fnv-rh__acts, .fnv-rh__cta { align-items: stretch; width: 100%; }
.fnv-rh .fnv-rh__btn { flex: 1 1 100%; }
.fnv-rh__clock { padding: 14px 16px; }
.fnv-rh__cd { font-size: 1.875rem; }
.fnv-rh__stats { --fnv-hg-min: 100px; }
.fnv-rh__stat { padding: 10px 12px; }
.fnv-rh__stat-n { font-size: 1.25rem; }
.fnv-rh__latest { padding: 14px 16px 16px; }
.fnv-rh .fnv-rh__latest-h { font-size: 1.05rem; }
}