/* Tech Briefing polish. Loaded after ../styles.css; motion is transform/opacity only. */
.tech-main { position: relative; }
.tech-h { animation: tc-rise .7s var(--ease) backwards; }
.tech-lede { animation: tc-rise .7s var(--ease) .08s backwards; }
.tech-lede .text-link { color: var(--yellow); }

.tcard {
    position: relative; border: 1px solid transparent;
    animation: tc-rise .55s var(--ease) backwards;
    transition: background-color .3s, transform .4s var(--ease), border-color .25s;
}
.tcard:nth-child(2) { animation-delay: 50ms; } .tcard:nth-child(3) { animation-delay: 100ms; }
.tcard:nth-child(4) { animation-delay: 150ms; } .tcard:nth-child(5) { animation-delay: 200ms; }
.tcard:nth-child(6) { animation-delay: 250ms; } .tcard:nth-child(n+7) { animation-delay: 300ms; }
.tcard:hover, .tcard:focus-within { border-color: var(--yellow); }
@keyframes tc-rise { from { opacity: 0; transform: translateY(16px); } }

/* thin yellow rule that sweeps in along the card top on hover */
.tcard::before {
    content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px;
    background: var(--yellow); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease);
}
.tcard:hover::before, .tcard:focus-within::before { transform: scaleX(1); }

.tcard-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; }
.tcard-foot time { font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
.tcard-foot a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -10px 0;
    text-decoration: none; position: relative;
}
.tcard-foot a::before { /* underline sweep */
    content: ""; position: absolute; left: 0; right: 24px; bottom: 9px; height: 2px;
    background: currentColor; transform-origin: left; transition: transform .35s var(--ease);
}
.tcard-foot a::after { content: "\2192"; transition: transform .3s var(--ease); }
.tcard-foot a:hover::after, .tcard-foot a:focus-visible::after { transform: translateX(5px); }
.tcard-foot a:hover::before { transform: scaleX(.55); }

@media (hover: none) { .tcard:hover { transform: none; } }
@media (max-width: 640px) { .tcard-foot a { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) {
    .tech-h, .tech-lede, .tcard { animation: none; }
    .tcard::before, .tcard-foot a::before, .tcard-foot a::after { transition: none; }
}

/* ---------- On-site story detail (/tech/?story=slug) ---------- */
.tech-page [hidden] { display: none !important; }
.tstory { max-width: 760px; animation: tc-rise .5s var(--ease) backwards; }
.tstory-back {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: clamp(20px, 3vw, 32px);
    font-weight: 700; text-decoration: none; color: var(--yellow);
}
.tstory-back::before { content: "\2190"; transition: transform .3s var(--ease); }
.tstory-back:hover::before, .tstory-back:focus-visible::before { transform: translateX(-5px); }
.tstory-h {
    font-family: var(--display); font-stretch: 72%; font-weight: 800; text-transform: uppercase;
    font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); line-height: .98; letter-spacing: -.01em;
    overflow-wrap: anywhere; outline: none;
}
.tstory-date {
    display: block; margin: clamp(16px, 2.4vw, 24px) 0; padding-bottom: 16px; border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--yellow);
}
.tstory-body { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.65; color: var(--ink-soft); max-width: 62ch; margin-top: 16px; }
.tstory-more { margin-top: clamp(36px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
.tstory-more-h { font-family: var(--display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 8px; }
.tstory-list { list-style: none; padding: 0; margin: 0; }
.tstory-list li { border-bottom: 1px solid var(--line); }
.tstory-list a {
    display: block; padding: 14px 0; min-height: 44px; font-weight: 700; line-height: 1.3; text-decoration: none;
    transition: transform .35s var(--ease), color .25s;
}
.tstory-list a:hover, .tstory-list a:focus-visible { color: var(--yellow); transform: translateX(6px); }
@media (max-width: 640px) { .tstory-list a { padding: 16px 0; } }
@media (prefers-reduced-motion: reduce) {
    .tstory { animation: none; }
    .tstory-back::before, .tstory-list a { transition: none; }
    .tstory-list a:hover, .tstory-list a:focus-visible { transform: none; }
}