/* Sidetrade Engineering Blog — home page additions. Requires tokens.css + blog.css */

.home-header { padding-top: 72px; }
.home-header__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.home-header__copy { max-width: 640px; }
.home-title { margin: 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.home-dek { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--st-text-2); text-wrap: pretty; }

.subscribe { display: flex; gap: 8px; }
.subscribe input { height: 40px; width: 240px; padding: 0 12px; border-radius: var(--st-r-sm); border: 1px solid var(--st-border-strong); background: var(--st-white); font: inherit; font-size: 14px; color: var(--st-text); outline: none; }
.subscribe input:focus { border-color: var(--st-blue); }
.subscribe button { height: 40px; padding: 0 16px; border-radius: var(--st-r-sm); border: 0; background: var(--st-blue); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 150ms ease; }
.subscribe button:hover { background: var(--st-blue-dark); }

/* Featured post */
.featured { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-r-sm); overflow: hidden; color: var(--st-text); transition: border-color 150ms ease; }
.featured:hover { border-color: var(--st-blue); color: var(--st-text); }
.featured__media { position: relative; min-height: 320px; border-right: 1px solid var(--st-border); }
.featured__media .cover { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.featured__media .cover__corner { display: none; }
.featured__body { padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.featured__title { margin: 0; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; text-wrap: pretty; }
.featured__dek { font-size: 17px; line-height: 1.55; color: var(--st-text-2); text-wrap: pretty; }
.featured__meta { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--st-mono); font-size: 12px; color: var(--st-text-2); }
.featured__meta .sep { color: var(--st-border-strong); }
@media (max-width: 800px) { .featured { grid-template-columns: minmax(0, 1fr); } .featured__media { border-right: 0; border-bottom: 1px solid var(--st-border); } }

/* Latest */
.latest { padding-top: 88px; }
.latest__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--st-border); }
.latest__head h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--st-mono); font-size: 12px; flex: 1 1 520px; justify-content: flex-end; }
.filter { padding: 6px 12px; border-radius: var(--st-r-xs); color: var(--st-text-2); }
.filter.is-active { background: var(--st-blue-tint); color: var(--st-text); font-weight: 500; }

/* Topic columns */
.topics { padding-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px 64px; }
.topic__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--st-border); }
.topic__head h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.topic__head a { font-size: 13px; font-weight: 500; color: var(--st-blue-dark); }
.topic__list { display: flex; flex-direction: column; }
.topic__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--st-border); }
.topic__item-title { font-size: 16px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.topic__item-date { font-family: var(--st-mono); font-size: 12px; color: var(--st-text-3); white-space: nowrap; }

.page-end { height: 96px; }