:root {
    color-scheme: dark;
    --background: #1e1c1d;
    --header: #1d1b1c;
    --cream: #f1eadc;
    --muted: #d0c7b9;
    --gold: #b99a6c;
    --line: #ae936e;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    background: #171617;
    color: var(--cream);
    font: 16px/1.4 Georgia, 'Times New Roman', serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #f9d39d; outline-offset: 5px; }
.skip-link { position: absolute; top: -80px; left: 12px; z-index: 30; padding: 10px 18px; background: white; color: #111; }
.skip-link:focus { top: 12px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-shell {
    max-width: 1600px;
    margin-inline: auto;
    background: var(--background);
    box-shadow: 0 0 36px #0004;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site-header {
    min-height: 91px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 14px clamp(26px, 2.4vw, 42px);
    background: var(--header);
}
.brand {
    flex-shrink: 0;
    font-size: clamp(26px, 2.6vw, 43px);
    letter-spacing: -.025em;
    line-height: 1.1;
    text-decoration: none;
    font-weight: normal;
    white-space: nowrap;
}
.main-nav {
    display: flex;
    gap: clamp(12px, 1.65vw, 27px);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.nav-link {
    font-size: clamp(13px, 1.04vw, 18px);
    text-decoration: none;
    white-space: nowrap;
    padding-block: 9px;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}
.nav-link:hover, .nav-link.is-current { border-bottom-color: var(--gold); color: #fff3dd; }
.hero { background: #342b28; }
.hero-slideshow { position: relative; height: clamp(195px, 18vw, 287px); overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.15s ease-in-out; pointer-events: none; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.hero-controls { position:absolute; z-index:3; display:flex; gap:12px; align-items:center; right:27px; bottom:17px; border-radius:24px; padding:5px 8px; background:#1513137a; }
.slide-arrow { border:0; background:transparent; color:#faf7f1; cursor:pointer; padding:7px; font-size:16px; }
.slide-dots { display:flex; gap:7px; align-items:center; }
.slide-dot { width:9px; height:9px; border:1px solid #f4e9d4; border-radius:50%; padding:0; background:transparent; cursor:pointer; }
.slide-dot.is-active { background:#f4e9d4; }
.introduction {
    flex: 1;
    min-height: 495px;
    position: relative;
    background: linear-gradient(90deg, #1f1d1e 0%, #1e1c1d 59%, #393737 100%);
    overflow: hidden;
}
.intro-layout {
    display: grid;
    /* Right aligned with Contact; the group is vertically lifted towards the hero. */
    grid-template-columns: 235px minmax(0, 475px) 310px;
    column-gap: clamp(26px, 2.4vw, 38px);
    justify-content: end;
    align-items: center;
    min-height: 495px;
    padding: 20px clamp(26px, 2.4vw, 42px) 136px clamp(26px, 3.8vw, 64px);
    position: relative;
}
.series {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: static;
}
.series-links {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 235px;
    max-width: 100%;
    margin: 0;
    position: relative;
    z-index: 2;
}
.series-link {
    display: block;
    border: 1.5px solid var(--line);
    background: #262223a8;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(13px, 1vw, 16px);
    transition: background .2s, color .2s, transform .2s;
}
.series-link:hover { background: #b99a6c; color: #141314; transform: translateY(-2px); }
.film-strip {
    position: absolute;
    /* Independent of the three columns and kept fully visible above the footer. */
    width: min(690px, 49vw);
    height: auto;
    left: 22px;
    bottom: 12px;
    display: block;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.intro-copy {
    padding: 0;
    margin: 0;
    align-self: center;
    min-width: 0;
    max-width: 475px;
    position: relative;
    z-index: 2;
}
.intro-copy p { font-size: clamp(15px, 1.12vw, 18px); line-height: 1.29; margin: 0 0 23px; color: #e9e2d6; }
.intro-copy strong, .accent { color: #c6a678; font-weight: bold; }
.more-link { text-decoration:none; color:#c6a678; }
.more-link:hover { text-decoration: underline; }
.portrait-frame {
    width: 310px;
    max-width: 100%;
    justify-self: end;
    align-self: center;
    margin: 0;
    padding: 8px;
    background: #181719;
    border: 1px solid #8c7657;
    box-shadow: 0 4px 15px #050505bb;
}
.portrait-frame img { width:100%; height: auto; aspect-ratio: 1/1; display:block; object-fit:cover; filter:grayscale(1); }
.site-footer {
    margin-top: auto;
    background: #171617;
    border-top: 1px solid #54483d;
    display:flex; gap:6px 25px; align-items:center; justify-content:space-between;
    padding: 20px clamp(26px, 3.8vw, 64px);
    color:#c5b9a9;
    font-size: 13px;
    flex-wrap:wrap;
}
.site-footer a { text-decoration:none; color:#dac6a9; }
.site-footer a:hover { text-decoration:underline; }
.inner-page {
    min-height: 65vh;
    padding: clamp(65px, 8vw, 115px) clamp(28px, 10vw, 160px);
    background: linear-gradient(110deg,#1e1c1d 30%,#353232 100%);
    position:relative;
    overflow:hidden;
}
.inner-page-content { position:relative; z-index:2; max-width:620px; }
.inner-page .eyebrow { font-size: 13px; letter-spacing:.2em; color:#c8aa80; text-transform:uppercase; }
.inner-page h1 { font-size: clamp(30px, 5vw, 64px); line-height:1.12; font-weight: normal; margin: 10px 0 30px; }
.inner-page p { font-size:19px; color:#e0d8cd; }
.return-link { display:inline-block; margin-top:22px; border-bottom:1px solid #c8aa80; text-decoration:none; padding-bottom:6px; }
.inner-film { position:absolute; width:min(800px, 75vw); right:-240px; bottom:-45px; opacity:.32; pointer-events:none; }
@media (max-width: 1060px) {
    .site-header { flex-wrap:wrap; justify-content:center; gap:10px; min-height:102px; }
    .brand { font-size:33px; }
    .main-nav { justify-content:center; gap:clamp(10px, 2vw, 24px); }
    .intro-layout {
        grid-template-columns: minmax(175px, 24%) minmax(0, 1fr) minmax(210px, 27%);
        gap: 18px;
        padding-left: 22px;
        padding-right: 22px;
    }
    .series-links { width: min(220px, 100%); gap: 16px; }
    .portrait-frame { width: min(310px, 100%); }
    .intro-copy p { font-size:15px; }
    .film-strip { width: min(600px, 58vw); left: 18px; bottom: 12px; }
}
@media (max-width: 720px) {
    .site-header { padding:20px 16px 12px; }
    .brand { font-size:30px; }
    .main-nav { gap: 4px 17px; }
    .nav-link { font-size:14px; padding:6px 0; }
    .hero-slideshow { height:225px; }
    .intro-layout { display:grid; grid-template-columns: 1fr 140px; padding: 30px 22px 25px; gap:24px 18px; align-items:start; }
    .series { grid-column:1 / -1; grid-row:3; min-height:275px; align-items:flex-start; justify-content:flex-start; }
    .series-links { width:min(240px,65%); margin:5px 0 0; align-self:flex-start; gap:12px; }
    .film-strip { width:min(650px,110%); left:0; bottom:-22px; }
    .intro-copy { grid-column:1 / -1; grid-row:2; max-width:none; padding:0; align-self: start; }
    .intro-copy p { font-size:16px; line-height:1.42; }
    .portrait-frame { grid-column:2; grid-row:1; width:140px; margin:0; justify-self:end; align-self:start; }
    .site-footer { padding:22px; }
}
@media (max-width: 440px) {
    .brand {font-size:27px;}
    .intro-layout { grid-template-columns:1fr 112px; padding: 24px 16px; }
    .portrait-frame { width:112px; }
    .hero-slideshow { height:180px; }
    .series { min-height:265px; }
    .series-links { width:75%; }
    .film-strip { bottom:-4px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .hero-slide, .series-link, .nav-link { transition:none; }
}