@font-face {
font-family: 'Libre Caslon Display';
src: url('/assets/fonts/libre-caslon-display-latin-400-normal.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Jost';
src: url('/assets/fonts/jost-latin-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/jost-latin-wght-normal.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--chalk: #f5f1ea;
--chalk-2: #efe9df;
--linen: #e6dccc;
--linen-2: #dccfbb;
--pine: #24413a;
--pine-2: #1a3029;
--terra: #b5532e;
--terra-2: #9a4223;
--terra-text: #a94a27;
--ink: #1f1d1a;
--ink-2: #3a3631;
--muted: #5f584f;
--line: rgb(31 29 26 / 0.14);
--line-2: rgb(31 29 26 / 0.24);
--serif: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
--sans: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--wrap: 1240px;
--gutter: clamp(20px, 4.4vw, 64px);
--measure: 66ch;
--hdr-h: 78px;
--sp: clamp(88px, 11vw, 168px);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 760px) {
:root { --hdr-h: 62px; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--hdr-h) + 24px);
}
body {
margin: 0;
background: var(--chalk);
color: var(--ink);
font-family: var(--sans);
font-size: 1.0625rem;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: 0; color: var(--pine); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
::selection { background: var(--linen-2); color: var(--ink); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--pine); color: var(--chalk); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.tnum { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.label {
font-family: var(--sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
line-height: 1.4;
color: var(--muted);
}
a.label { text-decoration: none; }
a.label:hover { color: var(--pine); }
.t-sub { display: block; margin-top: 0.5em; font-family: var(--sans); font-weight: 400; font-size: max(0.42em, 1rem); line-height: 1.35; letter-spacing: 0; color: var(--ink-2); }
.ul { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.ul:hover, a:hover .ul, a:focus-visible .ul { background-size: 100% 1px; }
.go {
display: inline-flex; align-items: center; gap: 0.7em;
font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
color: var(--pine); padding-bottom: 4px;
background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.go:hover .arr, a:hover .go .arr { transform: translateX(4px); }
.arr { width: 1.4em; height: 0.7em; flex: none; display: inline-block; transition: transform 0.4s var(--ease); }
a:hover .arr, a:focus-visible .arr { transform: translateX(4px); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
min-height: 48px; padding: 0.7em 1.5em;
border: 1px solid var(--pine); border-radius: 0;
background: transparent; color: var(--pine);
font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; text-decoration: none;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover { background: var(--pine); color: var(--chalk); }
.btn--buy { background: var(--terra); border-color: var(--terra); color: #fff; }
.btn--buy:hover { background: var(--terra-2); border-color: var(--terra-2); color: #fff; }
.btn .ast { margin-left: 1px; }
.todo { background: #ffe58a; color: #3a2d00; padding: 0 4px; border-radius: 3px; }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.zoom { overflow: hidden; background: var(--linen); }
.zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
a:hover .zoom img, a:focus-visible .zoom img { transform: scale(1.035); }
.cap { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
.js [data-reveal] { opacity: 1; transform: none; }
a:hover .zoom img { transform: none; }
}
.hdr { position: sticky; top: 0; z-index: 40; background: var(--chalk); border-bottom: 1px solid transparent; transition: border-color 0.4s; }
.hdr.is-scrolled, .menu-open .hdr { border-bottom-color: var(--line); }
.hdr__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--hdr-h); }
.hdr__menu {
justify-self: start; display: inline-flex; align-items: center; gap: 14px;
min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pine);
}
.hdr__menu i { position: relative; width: 22px; height: 7px; border-block: 1px solid currentColor; transition: border-color 0.3s; }
.hdr__menu i::before, .hdr__menu i::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: currentColor; opacity: 0; transition: transform 0.4s var(--ease), opacity 0.2s; }
.hdr__menu[aria-expanded='true'] i { border-color: transparent; }
.hdr__menu[aria-expanded='true'] i::before { opacity: 1; transform: rotate(35deg); }
.hdr__menu[aria-expanded='true'] i::after { opacity: 1; transform: rotate(-35deg); }
.hdr__menu:hover { color: var(--pine); }
.brand { justify-self: center; display: grid; justify-items: center; gap: 5px; text-decoration: none; }
.brand__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pine); padding-left: 0.22em; }
.brand__sub { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); padding-left: 0.32em; }
.hdr__right { justify-self: end; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.hdr__plan { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--pine); padding-block: 12px; }
.hdr__plan:hover { color: var(--pine); }
.hdr__search { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--pine); cursor: pointer; }
.hdr__search svg { width: 21px; height: 21px; }
.hdr__search:hover { color: var(--pine); }
.hdr__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.hdr__progress i { display: block; height: 100%; background: var(--pine); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 860px) {
.hdr__plan { display: none; }
}
@media (max-width: 760px) {
.brand__name { font-size: 1.08rem; letter-spacing: 0.16em; padding-left: 0.16em; }
.brand__sub { display: none; }
}
@media (max-width: 480px) {
.hdr__menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hdr__menu { min-width: 44px; }
}
.menu {
position: fixed; left: 0; right: 0; top: var(--hdr-h); z-index: 39;
max-height: calc(100dvh - var(--hdr-h)); overflow: auto;
background: var(--chalk); border-bottom: 1px solid var(--line);
opacity: 0; transform: translateY(-10px); visibility: hidden;
transition: opacity 0.35s, transform 0.5s var(--ease), visibility 0s 0.5s;
}
.menu.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 0.35s, transform 0.5s var(--ease); }
.menu__in { padding-block: clamp(32px, 5vw, 56px); text-align: center; }
.menu__topics { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
.menu__topics li + li { border-left: 1px solid var(--line); }
.menu__topics a { display: grid; gap: 8px; padding: 14px clamp(10px, 2vw, 28px); text-decoration: none; }
.menu__name { font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; color: var(--pine); }
.menu__kicker { font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.menu__topics a:hover .menu__name, .menu__topics a[aria-current] .menu__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.menu__more { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.menu__more a { text-decoration: none; padding-block: 6px; }
.menu-scrim { position: fixed; inset: 0; z-index: 38; background: rgb(31 29 26 / 0.18); opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.menu-open .menu-scrim { opacity: 1; visibility: visible; transition: opacity 0.4s; }
@media (max-width: 860px) {
.menu__topics { grid-template-columns: 1fr; }
.menu__topics li + li { border-left: 0; border-top: 1px solid var(--line); }
.menu__topics a { padding-block: 16px; }
}
.search { width: 100%; max-width: none; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line-2); background: var(--chalk); color: var(--ink); overflow: auto; }
.search::backdrop { background: rgb(31 29 26 / 0.32); }
.search-open body { overflow: hidden; }
.search__bar { display: flex; align-items: center; gap: 16px; height: calc(var(--hdr-h) + 20px); border-bottom: 1px solid var(--line-2); }
.search__bar > svg { width: 24px; height: 24px; flex: none; color: var(--pine); }
.search__bar input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 400 clamp(1.5rem, 1rem + 2vw, 2.4rem)/1 var(--serif); color: var(--pine); outline: none; }
.search__bar input::placeholder { color: var(--muted); opacity: 0.6; }
.search__bar input::-webkit-search-cancel-button { display: none; }
.search__close { flex: none; padding: 10px 16px; border: 1px solid var(--pine); background: transparent; color: var(--pine); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.search__close:hover { background: var(--pine); color: var(--chalk); }
.search__body { padding-block: 22px 36px; }
.search__results { list-style: none; display: grid; margin-top: 8px; }
.search__results a { display: grid; gap: 5px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding 0.3s var(--ease); }
.search__results a b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--pine); }
.search__results a small { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.search__results a:hover b, .search__results a.is-active b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.search__results a.is-active { padding-left: 16px; box-shadow: inset 2px 0 var(--terra); }
.search__none { padding: 16px 0; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 0.8rem; color: var(--muted); }
.crumbs li + li::before { content: '·'; margin-right: 10px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--pine); text-decoration: underline; }
.crumbs li[aria-current] { max-width: 44ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pvbar { display: inline-block; margin-bottom: 22px; padding: 7px 14px; background: #ffe58a; color: #3a2d00; font-size: 0.86rem; font-weight: 500; }
.pvbar span { font-weight: 400; }
.sec { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: clamp(44px, 6vw, 80px); }
.sec h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); max-width: 22ch; }
.sec__text { max-width: 58ch; color: var(--ink-2); font-size: 1.06rem; }
.rule { display: block; width: 120px; height: 1px; margin: 0 auto; background: var(--ink); opacity: 0.6; }
.ftr { margin-top: var(--sp); background: var(--linen); color: var(--ink); }
.ftr__in { display: grid; justify-items: center; gap: clamp(40px, 5vw, 64px); padding-top: clamp(64px, 8vw, 104px); text-align: center; }
.ftr__day { display: grid; justify-items: center; gap: 14px; }
.ftr__times { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(24px, 4vw, 56px); margin: 0; }
.ftr__times div { display: grid; gap: 2px; }
.ftr__times dt { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.ftr__times dd { margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; color: var(--pine); }
.ftr__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 32px clamp(24px, 5vw, 72px); width: 100%; padding-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--line-2); }
.ftr__nav ul { list-style: none; display: grid; gap: 8px; margin-top: 14px; font-size: 0.98rem; }
.ftr__nav a { padding-block: 2px; }
.ftr__aff { max-width: 70ch; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.ftr__word { margin: clamp(48px, 7vw, 96px) 0 0; overflow: hidden; text-align: center; font-family: var(--serif); font-size: clamp(2.6rem, 10.4vw, 10.5rem); line-height: 0.9; letter-spacing: 0.02em; color: var(--pine); white-space: nowrap; padding-bottom: 0.08em; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px 28px; border-top: 1px solid var(--line-2); font-size: 0.82rem; color: var(--muted); }
.ftr__bottom a { color: var(--ink); text-decoration: none; letter-spacing: 0.06em; }
.ftr__bottom a:hover { color: var(--pine); text-decoration: underline; }
@media (max-width: 640px) {
.ftr__nav { grid-template-columns: 1fr 1fr; }
.ftr__nav > div:last-child { grid-column: 1 / -1; }
.ftr__bottom { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
.crumbs li[aria-current] { display: none; }
}
.tag { display: inline-block; padding: 2px 8px; background: #ffe58a; color: #3a2d00; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.1em; }
.ast { margin-left: 1px; text-decoration: none; display: inline-block; }
.stars { --r: 0; position: relative; display: inline-block; width: 5.4em; height: 1em; vertical-align: -0.12em; font-size: 0.95rem;
background: linear-gradient(90deg, var(--terra) calc(var(--r) / 5 * 100%), var(--linen-2) 0);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cpath id='s' d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3Cuse href='%23s' x='22'/%3E%3Cuse href='%23s' x='44'/%3E%3Cuse href='%23s' x='66'/%3E%3Cuse href='%23s' x='88'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cpath id='s' d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3Cuse href='%23s' x='22'/%3E%3Cuse href='%23s' x='44'/%3E%3Cuse href='%23s' x='66'/%3E%3Cuse href='%23s' x='88'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.fav .stars, .linen .stars { background: linear-gradient(90deg, var(--terra) calc(var(--r) / 5 * 100%), #cfc1aa 0); }
.favline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 26px; padding: 18px 26px; border-block: 1px solid var(--line-2); }
.favline__what { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; text-align: center; }
.favline__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; color: var(--pine); text-decoration: none; }
.favline__name:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.favline__price { font-size: 1.05rem; font-weight: 500; white-space: nowrap; }
.favline__price.is-live { font-size: 0.86rem; font-weight: 400; color: var(--muted); }
.railfav { display: grid; gap: 10px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.railfav__name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; color: var(--pine); }
.railfav__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.8rem; color: var(--muted); }
.railfav__price b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.railfav__price.is-live b { font-family: var(--sans); font-size: 0.86rem; color: var(--muted); }
.railfav .btn--buy { width: 100%; padding-inline: 0.7em; font-size: 0.7rem; letter-spacing: 0.1em; white-space: nowrap; }
.buybar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: none; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--chalk); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform 0.45s var(--ease); }
.buybar.is-on { transform: none; }
.buybar__what { display: grid; min-width: 0; }
.buybar__what .label { font-size: 0.62rem; }
.buybar__what b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--serif); font-weight: 400; font-size: 1.02rem; color: var(--pine); }
.buybar__price { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.buybar__price.is-live { display: none; }
.buybar .btn--buy { min-height: 42px; padding: 0.5em 0.9em; letter-spacing: 0.12em; }
@media (max-width: 1099px) { .buybar { display: grid; } }
@media (max-width: 420px) { .buybar__price { display: none; } }
.plate { margin: 2.4em 0; background: var(--chalk-2); border-top: 1px solid var(--pine); font-size: 1rem; line-height: 1.55; scroll-margin-top: calc(var(--hdr-h) + 24px); }
.plate__head { display: grid; gap: 8px; padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px) 0; }
.plate__label { margin: 0 !important; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra-text); }
.plate__name { margin: 0 !important; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.95rem) !important; line-height: 1.15; color: var(--pine); }
.plate__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 !important; font-size: 0.88rem; color: var(--muted); }
.plate__for { margin: 0 !important; color: var(--ink-2); }
.plate__for span { color: var(--muted); }
.plate__voices { margin: 16px clamp(20px, 3vw, 32px) 0 !important; font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; color: var(--ink-2); }
.plate__voices::before { content: '„'; }
.plate__voices::after { content: '“'; }
.plate__data { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 24px; margin: 18px clamp(20px, 3vw, 32px) 0; border-top: 1px solid var(--line); }
.plate__row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.plate__row dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.plate__row dd { margin: 3px 0 0; color: var(--ink); }
.plate__text { margin: 14px clamp(20px, 3vw, 32px) 0 !important; color: var(--ink-2); }
.plate__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 22px; padding: 18px clamp(20px, 3vw, 32px) 22px; border-top: 1px solid var(--line); }
.plate__price { margin: 0 !important; display: grid; line-height: 1.15; }
.plate__price span { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.plate__price b { font-family: var(--serif); font-weight: 400; font-size: 1.85rem; color: var(--ink); }
.plate__price small { font-size: 0.8rem; color: var(--muted); }
.plate__price--live { font-size: 0.92rem; color: var(--muted); }
.plate__src { margin: 0 !important; padding: 0 clamp(20px, 3vw, 32px) 16px; font-size: 0.8rem; color: var(--muted); }
.plate__src a { color: var(--muted) !important; }
.picks { margin: 2.6em 0; padding: clamp(24px, 3vw, 34px) clamp(18px, 3vw, 32px) 8px; background: var(--linen); }
.picks__head { display: grid; justify-items: center; gap: 8px; margin-bottom: 18px; text-align: center; }
.picks__title { margin: 0 !important; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--pine); }
.short { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--line-2); }
.short__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: 'no what buy' 'no rate buy'; align-items: center; gap: 2px 18px; margin: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid var(--line-2); }
.short__row:last-child { border-bottom: 0; }
.short__no { grid-area: no; align-self: start; padding-top: 4px; font-size: 0.8rem; color: var(--muted); }
.short__what { grid-area: what; display: grid; gap: 2px; }
.short__label { margin: 0 !important; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.short__name { margin: 0 !important; font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.short__name a { color: var(--pine) !important; text-decoration: none !important; }
.short__name a:hover { text-decoration: underline !important; }
.short__for { margin: 0 !important; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
.short__rate { grid-area: rate; display: flex; align-items: center; gap: 8px; margin: 4px 0 0 !important; font-size: 0.8rem; color: var(--muted); }
.short__rate:empty { display: none; }
.short__buy { grid-area: buy; display: grid; justify-items: end; gap: 8px; }
.short__price { margin: 0 !important; }
.short__price b { font-weight: 500; font-size: 1.08rem; white-space: nowrap; }
.short__price.is-live b { font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.short .btn--buy { min-height: 42px; padding: 0.55em 1em; letter-spacing: 0.12em; white-space: nowrap; }
.short__row + .short__row .btn--buy { background: transparent; color: var(--terra-2); }
.short__row + .short__row .btn--buy:hover { background: var(--terra-2); color: #fff; }
@media (max-width: 560px) {
.short__row { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: 'no what' 'no rate' 'no buy'; gap: 4px 12px; }
.short__buy { justify-items: start; gap: 10px; margin-top: 8px; }
.short .btn--buy { white-space: normal; text-align: left; }
}
.plan { container-type: inline-size; margin: 2.4em 0; padding: clamp(20px, 3vw, 32px); background: var(--linen); color: var(--ink); }
.plan--band { margin: 0; padding: 0; background: transparent; }
.plan__board { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 56px); align-items: center; }
.plan__scene { position: relative; aspect-ratio: 440 / 262; padding: 4% 3% 2%; background: var(--chalk); box-sizing: content-box; }
.plan__scene svg { width: 100%; height: 100%; overflow: visible; }
.plan__read { display: grid; gap: 18px; }
.plan__big { display: grid; gap: 6px; }
.plan__big b { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 1.6rem + 7cqi, 5.6rem); line-height: 0.9; color: var(--pine); white-space: nowrap; }
.plan__big span { font-size: 0.95rem; color: var(--ink-2); }
.plan__big small { font-size: inherit; color: var(--muted); }
.plan__big--seat b { font-size: clamp(2.2rem, 1.2rem + 4.2cqi, 3.6rem); color: var(--ink); }
.plan__sun { font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.plan__hint { font-size: 0.92rem; color: var(--terra-text); }
.plan__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(20px, 3vw, 44px); margin-top: clamp(24px, 3vw, 36px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--line-2); }
.plan__set { display: grid; gap: 14px; align-content: start; }
.plan__how { margin-top: 22px; border-top: 1px solid var(--line-2); }
.plan__how summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; list-style: none; color: var(--pine); }
.plan__how summary::-webkit-details-marker { display: none; }
.plan__how summary::after { content: '+'; font-size: 1.3rem; letter-spacing: 0; }
.plan__how[open] summary::after { content: '–'; }
.plan__how p { padding-bottom: 12px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); max-width: 82ch; }
.plan__static { padding-top: 6px; }
.js .plan__static { display: none; }
.no-js .plan__board, .no-js .plan__controls, .no-js .plan__how { display: none; }
@container (max-width: 760px) {
.plan__board { grid-template-columns: 1fr; }
.plan__read { grid-template-columns: 1fr 1fr; align-items: end; }
.plan__sun, .plan__hint { grid-column: 1 / -1; }
.plan__controls { grid-template-columns: 1fr; }
}
.scene text { font: 500 13px/1 var(--sans); fill: var(--ink); }
.sc-house { fill: var(--linen-2); }
.sc-house-shade { fill: var(--ink); opacity: 0.16; }
.sc-note { font-size: 15px !important; fill: var(--ink-2) !important; letter-spacing: 0.08em; }
.sc-floor { stroke: var(--ink); stroke-width: 1.5; }
.sc-lit { fill: #e9c58f; }
.sc-shade { fill: var(--ink); opacity: 0.14; }
.sc-dark { stroke: var(--ink-2); stroke-width: 5; opacity: 0.55; }
.sc-ray { stroke: var(--terra); stroke-width: 1.4; stroke-dasharray: 4 5; fill: none; }
.sc-ray--soft { opacity: 0.45; }
.sc-sun circle { fill: var(--terra); }
.sc-sun path { stroke: var(--terra); stroke-width: 2; stroke-linecap: round; }
.sc-furn path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-furn .sc-body { stroke: var(--pine); stroke-width: 6; }
.sc-head { stroke: var(--pine); stroke-width: 2; transition: fill 0.3s; }
.sc-head.is-sun { fill: #e9a979; }
.sc-head.is-shade { fill: var(--chalk); }
.sc-awning path { fill: none; stroke: var(--pine); stroke-width: 5; stroke-linecap: round; }
.sc-awning .sc-bracket { stroke-width: 4; stroke-linecap: butt; }
.sc-awning .sc-valance { stroke: var(--pine); stroke-width: 3; opacity: 0.7; }
.sc-dim path { stroke: var(--ink-2); stroke-width: 1.2; fill: none; }
.sc-dim text { fill: var(--ink-2); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); background: var(--chalk); }
.seg button { padding: 10px 4px; border: 0; background: transparent; color: var(--ink); font-size: 0.9rem; cursor: pointer; transition: color 0.2s, background-color 0.25s; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button:hover { background: var(--chalk-2); }
.seg button[aria-pressed='true'] { background: var(--pine); color: var(--chalk); }
.slider { display: grid; gap: 4px; }
.slider__top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; color: var(--ink-2); }
.slider output { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.slider input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--pine), var(--pine)) 0 0 / var(--p, 50%) 100% no-repeat, var(--line-2); }
.slider input::-moz-range-track { height: 2px; background: var(--line-2); }
.slider input::-moz-range-progress { height: 2px; background: var(--pine); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--chalk); border: 1.5px solid var(--pine); transition: transform 0.2s var(--ease); }
.slider input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--chalk); border: 1.5px solid var(--pine); }
.slider input:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider input:focus-visible { outline: none; }
.slider input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pine); outline-offset: 3px; }
.slider input:focus-visible::-moz-range-thumb { outline: 2px solid var(--pine); outline-offset: 3px; }
.box { position: relative; margin: 2.2em 0; padding: 26px 30px; background: var(--chalk-2); font-size: 1.04rem; line-height: 1.65; }
.box__title { margin-bottom: 12px !important; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.box > :last-child { margin-bottom: 0 !important; }
.box p { margin: 0 0 0.85em; }
.box--quick { background: transparent; padding: 28px 0; border-block: 1px solid var(--pine); }
.box--quick .box__title { color: var(--pine); }
.box--quick p { font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.box--quick ul, .box--quick ol { margin-top: 0.4em; }
.box--warn { background: var(--linen); }
.tbl { margin: 2.2em 0; overflow-x: auto; border-top: 1px solid var(--ink); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; }
.tbl th, .tbl td { padding: 12px 14px 12px 0; hyphens: auto; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.tbl tbody th { font-weight: 500; color: var(--ink); }
.tbl tbody tr:hover > * { background: var(--chalk-2); }
.tbl .a-right { text-align: right; }
.tbl .a-center { text-align: center; }
@media (max-width: 640px) {
.tbl { border-top: 0; overflow: visible; }
.tbl table, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
.tbl thead { display: none; }
.tbl tr { margin-bottom: 14px; background: var(--chalk-2); border-top: 1px solid var(--pine); }
.tbl tbody th { padding: 12px 14px 8px; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--pine); border-bottom: 0; }
.tbl td { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; padding: 10px 14px; text-align: left !important; }
.tbl td::before { content: attr(data-label); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted); }
.tbl td[data-empty] { display: none; }
.tbl tbody tr:hover > * { background: transparent; }
}
@media (max-width: 480px) {
.btn--buy { letter-spacing: 0.1em; padding-inline: 1.1em; }
}
.kit { margin: 2.4em 0; padding: clamp(20px, 2.8vw, 30px); background: var(--linen); }
.kit__title { margin: 0 0 16px !important; font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pine); }
.kit__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kit__item { margin: 0 !important; padding: 16px 18px !important; display: flex; flex-direction: column; gap: 4px; background: var(--chalk); border: 1px solid var(--line); }
.kit__item::marker { content: none; }
.kit__name { margin: 0 !important; font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; color: var(--ink); }
.kit__use { flex: 1; margin: 0 !important; font-size: 0.88rem; line-height: 1.45; color: var(--muted); }
.kit__buy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 10px; }
.kit__price { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.kit__price small { margin-left: 0.35em; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.kit__price--live { font-family: var(--sans); font-size: 0.86rem; color: var(--ink); }
.kit .btn--buy { min-height: 38px; padding: 0.45em 0.95em; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 560px) {
.kit__list { grid-template-columns: 1fr 1fr; gap: 10px; }
.kit__item { padding: 13px 14px !important; }
.kit .btn--buy { align-self: stretch; justify-content: center; padding: 0.45em 0.6em; letter-spacing: 0.08em; }
}
.hero { padding-top: clamp(36px, 7vh, 88px); }
.hero__text { display: grid; justify-items: center; gap: clamp(14px, 2.2vh, 24px); padding-bottom: clamp(32px, 6vh, 64px); text-align: center; }
.hero__title { font-size: clamp(2.7rem, 1.2rem + 4.4vw, 5.8rem); line-height: 1.02; }
.hero__now { min-height: 1.4em; }
.film { margin: 0; }
.film__frame { position: relative; height: clamp(320px, 52vw, 780px); overflow: hidden; background: var(--linen); }
.film__still, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.film__video { opacity: 0; transition: opacity 1.4s ease; }
.film__video.is-playing { opacity: 1; }
.film__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding-top: 16px; font-size: 0.78rem; color: var(--muted); }
.intro { display: grid; justify-items: center; gap: clamp(36px, 5vw, 56px); padding-top: var(--sp); text-align: center; }
.intro__text { max-width: 880px; font-family: var(--serif); font-size: clamp(1.55rem, 1rem + 1.7vw, 2.45rem); line-height: 1.32; color: var(--ink); text-wrap: balance; }
.favsec { margin-top: var(--sp); padding-block: clamp(72px, 9vw, 128px); background: var(--linen); }
.favs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line-2); }
.fav { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(28px, 3vw, 40px) clamp(14px, 1.8vw, 28px) 30px; text-align: center; }
.fav + .fav { border-left: 1px solid var(--line-2); }
.fav__label { font-size: 0.9rem; color: var(--pine); }
.fav__name { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 0.6vw, 1.55rem); line-height: 1.22; color: var(--pine); }
.fav__for { font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.fav__rate { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.fav__buy { display: grid; justify-items: center; gap: 14px; width: 100%; margin-top: auto; padding-top: 14px; }
.fav__price b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--ink); }
.fav__price small { display: block; margin-top: 8px; font-size: 0.74rem; line-height: 1.4; color: var(--muted); }
.fav__price.is-live b { font-family: var(--sans); font-size: 0.95rem; }
.fav .btn--buy { width: 100%; max-width: 250px; padding-inline: 0.8em; letter-spacing: 0.12em; }
.fav__from { font-size: 0.84rem; color: var(--muted); text-decoration: none; }
.fav__from:hover { color: var(--pine); }
.favsec__note { margin-top: 28px; text-align: center; font-size: 0.84rem; color: var(--muted); }
@media (max-width: 1060px) {
.favs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fav:nth-child(3) { border-left: 0; }
.fav:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 640px) {
.favs { grid-template-columns: 1fr; }
.fav + .fav { border-left: 0; border-top: 1px solid var(--line-2); }
}
.guides { padding-top: var(--sp); }
.pairs { list-style: none; display: grid; gap: clamp(72px, 9vw, 136px); }
.pair__link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 104px); text-decoration: none; }
.pair--flip .pair__img { order: 2; }
.pair__img { aspect-ratio: 4 / 3; }
.pair__text { display: grid; justify-items: start; gap: 18px; max-width: 31rem; }
.pair__title { font-size: clamp(1.9rem, 1.15rem + 1.9vw, 3rem); line-height: 1.1; }
.pair__title .t-sub { font-size: 1.06rem; margin-top: 0.7em; }
.pair__deck { font-size: 1.02rem; color: var(--ink-2); }
.pair__link:hover .pair__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.pair .tag { margin-left: 6px; }
.pairs--small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.pair--small .pair__link { grid-template-columns: 1fr; gap: 22px; align-items: start; }
.pair--small .pair__img { order: 0; aspect-ratio: 3 / 2; }
.pair--small .pair__title { font-size: clamp(1.3rem, 1rem + 0.7vw, 1.6rem); line-height: 1.2; }
@media (max-width: 860px) {
.pair__link { grid-template-columns: 1fr; gap: 26px; }
.pair--flip .pair__img { order: 0; }
.pairs--small { grid-template-columns: 1fr; gap: 56px; }
}
.soon { display: grid; justify-items: center; gap: 18px; margin-top: clamp(80px, 10vw, 136px); text-align: center; }
.soon__list { list-style: none; width: min(100%, 780px); border-top: 1px solid var(--line); }
.soon__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink-2); }
.soon__list span { flex: none; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) {
.soon__list li { flex-direction: column; gap: 4px; }
}
.places { padding-top: var(--sp); }
.topics { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.topic a { display: grid; justify-items: center; gap: 8px; text-align: center; text-decoration: none; }
.topic__img { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 12px; }
.topic__name { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); }
.topic__kicker { font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.topic a:hover .topic__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
@media (max-width: 860px) {
.topics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
.plansec { margin-top: var(--sp); padding-block: clamp(72px, 9vw, 128px); background: var(--linen); }
.plansec__src { max-width: 72ch; margin: 30px auto 0; text-align: center; font-size: 0.84rem; color: var(--muted); }
.say { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 104px); padding-top: var(--sp); }
.say__img { aspect-ratio: 4 / 3; }
.say__text { display: grid; justify-items: start; gap: 20px; max-width: 31rem; }
.say__text h2 { font-size: clamp(1.8rem, 1.1rem + 1.8vw, 2.8rem); line-height: 1.16; }
.say__text > p:not(.label) { color: var(--ink-2); }
.say__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; font-size: 0.95rem; }
@media (max-width: 860px) {
.say { grid-template-columns: 1fr; }
}
.art__head { display: grid; justify-items: center; padding-top: clamp(24px, 3.4vw, 44px); padding-bottom: clamp(32px, 4vw, 52px); text-align: center; }
.art__head .crumbs { margin-bottom: clamp(18px, 2.4vw, 28px); }
.art__kicker { margin-bottom: 16px; }
.art__kicker span { color: var(--muted); }
.art__title { max-width: 19ch; font-size: clamp(2.3rem, 1.3rem + 3vw, 4.3rem); line-height: 1.04; }
.art__title .t-sub { max-width: 34ch; margin: 0.65em auto 0; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem); }
.art__deck { max-width: 62ch; margin-top: 20px; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.art__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin-top: 18px; font-size: 0.84rem; color: var(--muted); }
.art__meta a { color: var(--muted); }
.art__meta a:hover { color: var(--pine); }
.band { margin: 0; }
.band__img { height: clamp(260px, 44vw, 640px); overflow: hidden; background: var(--linen); }
.band__img img { width: 100%; height: 100%; object-fit: cover; }
.band .cap { padding-top: 12px; text-align: right; }
.art__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 41rem) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); padding-top: clamp(48px, 6vw, 88px); }
.art__toc { grid-column: 1; }
.art__layout > .prose { grid-column: 2; }
.art__rail { grid-column: 3; }
.art__sticky { position: sticky; top: calc(var(--hdr-h) + 36px); }
.toc ol { list-style: none; display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); text-decoration: none; transition: color 0.25s; }
.toc a span { font-size: 0.74rem; color: var(--muted); padding-top: 1px; }
.toc a:hover, .toc a.is-active { color: var(--pine); }
.toc a.is-active span { color: var(--pine); }
.toc-mobile { display: none; margin-bottom: 2em; border-block: 1px solid var(--line-2); }
.toc-mobile summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pine); cursor: pointer; list-style: none; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile ol { list-style: none; padding: 0 0 12px !important; margin: 0 !important; }
.toc-mobile li { margin: 0 !important; }
.toc-mobile a { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 8px 0; font-size: 0.98rem; line-height: 1.4; color: var(--ink-2) !important; text-decoration: none !important; }
.toc-mobile a span { font-size: 0.78rem; color: var(--muted); padding-top: 2px; }
@media (max-width: 1099px) {
.art__layout { grid-template-columns: minmax(0, 41rem); justify-content: center; }
.art__toc, .art__rail { display: none; }
.art__layout > .prose { grid-column: 1; }
.toc-mobile { display: block; }
}
.prose { min-width: 0; font-size: 1.15rem; line-height: 1.75; color: var(--ink); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15em; }
.prose h2 { margin: 2.2em 0 0.7em; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.35rem); line-height: 1.15; scroll-margin-top: calc(var(--hdr-h) + 28px); }
.prose h3 { margin: 1.9em 0 0.55em; font-size: 1.45rem; line-height: 1.22; scroll-margin-top: calc(var(--hdr-h) + 28px); }
.prose h4 { margin: 1.6em 0 0.4em; font-family: var(--sans); font-size: 1.02rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--pine); }
.prose a { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: rgb(36 65 58 / 0.4); transition: text-decoration-color 0.25s; }
.prose a:hover { text-decoration-color: currentColor; }
.prose a.aff { color: var(--terra-text); text-decoration-color: rgb(169 74 39 / 0.45); }
.prose a.aff:hover { text-decoration-color: currentColor; }
.prose .btn--buy, .prose .btn--buy:hover { color: #fff; text-decoration: none; }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 1.8em 0; padding-left: 24px; border-left: 1px solid var(--pine); font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; color: var(--ink-2); }
.prose code { font-size: 0.9em; background: var(--chalk-2); padding: 0 4px; }
.prose .fig { margin: 2.2em 0; }
.prose .fig figcaption { margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.prose hr { width: 120px; height: 1px; margin: 2.6em auto; border: 0; background: var(--line-2); }
.sources { margin-top: 3.4em; padding-top: 1.6em; border-top: 1px solid var(--line-2); }
.sources h2 { margin: 0 0 0.3em !important; font-size: 1.5rem !important; }
.sources h2 span { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); vertical-align: 0.2em; }
.sources__note { font-size: 0.86rem; color: var(--muted); }
.sources ol { list-style: none; padding: 0 !important; margin: 0.6em 0 0 !important; font-size: 0.86rem; }
.sources li { margin: 0 !important; }
.sources a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none !important; color: var(--ink-2) !important; overflow-wrap: anywhere; }
.sources a b { font-weight: 500; color: var(--ink); }
.sources a span { color: var(--muted); }
.sources a:hover b { color: var(--pine); }
.related { padding-top: var(--sp); }
.cat__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: clamp(32px, 6vw, 104px); padding-top: clamp(32px, 5vw, 64px); }
.cat__text { display: grid; justify-items: start; gap: 18px; }
.cat__text .crumbs { margin-bottom: 10px; }
.cat__text .crumbs ol { justify-content: flex-start; }
.cat__title { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem); line-height: 1; }
.cat__lead { max-width: 46ch; font-size: 1.12rem; color: var(--ink-2); }
.cat__img { margin: 0; }
.cat__img .zoom { aspect-ratio: 4 / 5; }
.cat__img .cap { padding-top: 10px; text-align: right; }
.cat__body { padding-top: var(--sp); }
.cat__empty { text-align: center; font-family: var(--serif); font-size: 1.6rem; color: var(--ink-2); }
.others { padding-top: var(--sp); }
.others .sec { margin-bottom: 36px; }
.others .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }
@media (max-width: 860px) {
.cat__head { grid-template-columns: 1fr; }
.cat__img { max-width: 520px; }
.others .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tp__head { display: grid; justify-items: center; gap: 18px; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 5vw, 64px); text-align: center; }
.tp__title { max-width: 16ch; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.8rem); line-height: 1.04; overflow-wrap: break-word; hyphens: manual; }
.tp__lead { max-width: 54ch; font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); }
.band--page { margin-bottom: clamp(48px, 6vw, 88px); }
.prose--page { max-width: calc(41rem + 2 * var(--gutter)); }
.prose--page .lines { line-height: 1.7; }
.prose--page .programs { padding-left: 1.2em; }
.page-legal .prose h2 { font-size: 1.5rem; margin-top: 1.8em; }
.page-legal .prose { font-size: 1.05rem; }
.nf { display: grid; justify-items: center; gap: 18px; padding-block: clamp(72px, 11vw, 160px) 0; text-align: center; }
.nf__ctas { margin-top: 12px; }