@import url("../header.css");

* { box-sizing: border-box; }

body {
    margin: 0;
    color: #161616;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Keep the independently positioned logo and navigation vertically aligned. */
/* header .home-link { align-items: center; }
header h1 { line-height: normal; }
header ul {
    top: 0;
    height: 65px;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: normal;
} */
main { padding: 130px 5vw 72px; }

.intro { max-width: 760px; margin: 0 0 54px; }
.eyebrow { margin: 0 0 12px; color: #c46851; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.intro h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 500; letter-spacing: -0.04em; }
.intro > p:last-child { max-width: 610px; margin: 20px 0 0; color: #5a5a5a; font-size: 1.1rem; line-height: 1.65; }

.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.video-card { min-width: 0; border-top: 1px solid #181818; padding-top: 12px; }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #151515; object-fit: cover; }
.video-card div { padding: 17px 2px 5px; }
.category { margin: 0 0 7px; color: #c46851; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.video-card h3 { min-height: 2.8em; margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 500; line-height: 1.35; }
.video-card a { color: #161616; font-size: 0.9rem; font-weight: 650; text-decoration: none; }
.video-card a span { display: inline-block; margin-left: 4px; transition: transform 0.2s ease; }
.video-card a:hover { color: #c46851; }
.video-card a:hover span { transform: translateX(4px); }

@media screen and (max-width: 1000px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media screen and (max-width: 768px) {
    main { padding: 108px 20px 48px; }
    .intro { margin-bottom: 38px; }
    .video-grid { grid-template-columns: 1fr; gap: 28px; }
    header ul { display: none; }
    header ul.is-open { display: block; }
    .video-card h3 { min-height: 0; }
    header .menu { top: 50%; transform: translateY(-50%); }
    header .home-link { top: 0; height: 65px; align-items: center; }
}


::selection {
    background-color: #c46851;
    color: #ffffff;
}
::-moz-selection {
    background-color: #c46851;
    color: #ffffff;
}