:root { --ivory:#f4eddf; --paper:#fbf8f1; --navy:#101b2e; --ink:#19243a; --rust:#c95b3d; --ochre:#d89a3c; --line:rgba(16,27,46,.2); --serif:'Instrument Serif', Georgia, serif; --sans:Arial, Helvetica, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.5; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
.skip-link { position:absolute; left:1rem; top:-4rem; background:var(--ochre); color:var(--navy); padding:.7rem 1rem; z-index:5; }
.skip-link:focus { top:1rem; }
.site-header { min-height:84px; padding:1.15rem 5.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--paper); position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:.85rem; font-family:var(--serif); font-size:1.55rem; letter-spacing:.01em; }
.brand-mark { width:28px; height:38px; display:grid; place-items:center; background:var(--navy); color:var(--ochre); font-family:var(--serif); font-size:1.35rem; border:2px solid var(--rust); }
.site-nav { display:flex; gap:2.6rem; font:500 .72rem var(--mono); text-transform:uppercase; letter-spacing:.12em; }
.site-nav a:hover, .site-nav a:focus-visible { color:var(--rust); }
.menu-toggle { display:none; border:1px solid var(--line); background:none; padding:.5rem .65rem; text-transform:uppercase; font:500 .68rem var(--mono); }
.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:calc(100vh - 84px); background:var(--navy); color:var(--ivory); }
.hero-copy { padding:clamp(3rem,8vw,8rem) clamp(1.5rem,7vw,8rem); display:flex; flex-direction:column; justify-content:center; }
.eyebrow, .kicker { color:var(--ochre); font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.18em; }
.eyebrow { display:flex; align-items:center; gap:1rem; }
.eyebrow:before { content:""; width:3.3rem; border-top:2px solid var(--ochre); }
h1, h2, h3 { margin:0; font-weight:400; font-family:var(--serif); line-height:.92; }
.hero h1 { max-width:8ch; margin:2.2rem 0 1.7rem; font-size:clamp(4.6rem,9vw,9rem); letter-spacing:-.04em; }
.hero-lede { max-width:31rem; font-family:var(--serif); font-size:1.45rem; line-height:1.12; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:2.6rem; }
.button { display:inline-flex; align-items:center; gap:1.4rem; padding:1rem 1.35rem; background:var(--ochre); color:var(--navy); font:500 .72rem var(--mono); text-transform:uppercase; letter-spacing:.1em; border:1px solid var(--ochre); transition:transform .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform:translateY(-2px); background:#e7b25a; }
.button.secondary { color:var(--ivory); padding-left:0; padding-right:0; background:transparent; border-width:0 0 1px; border-color:rgba(244,237,223,.55); }
.hero-note { margin-top:5rem; max-width:15rem; padding-top:1.1rem; border-top:2px solid var(--rust); font-family:var(--serif); font-size:1.05rem; }
.hero-visual { min-height:560px; background:#243a53; position:relative; overflow:hidden; }
.hero-visual img { width:100%; height:100%; object-fit:cover; object-position:92% center; transform:scale(1.48); transform-origin:right center; display:block; }
.hero-visual:after { content:"APPROVED HERO / VISUAL REFERENCE"; position:absolute; left:1rem; bottom:1rem; color:#fff; background:rgba(16,27,46,.75); padding:.45rem .6rem; font:500 .55rem var(--mono); letter-spacing:.12em; }
.section { padding:clamp(4rem,9vw,9rem) 5.5vw; }
.section.dark { background:var(--navy); color:var(--ivory); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:3rem; }
.section h2 { font-size:clamp(3rem,6vw,6.5rem); letter-spacing:-.03em; }
.section-intro { max-width:25rem; font-family:var(--serif); font-size:1.35rem; line-height:1.1; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; }
.work-card { grid-column:span 6; min-height:340px; position:relative; background:#e8e0d2; overflow:hidden; }
.work-card:nth-child(3) { grid-column:3 / span 5; min-height:400px; }
.work-card:nth-child(4) { grid-column:8 / span 5; min-height:400px; }
.work-card .slot { height:100%; min-height:340px; }
.slot { display:flex; flex-direction:column; justify-content:space-between; padding:1.25rem; border:1px solid rgba(16,27,46,.18); background:#d6c3aa; color:var(--navy); }
.slot.navy { background:var(--navy); color:var(--ivory); border-color:rgba(244,237,223,.2); }
.slot.rust { background:var(--rust); color:var(--ivory); }
.slot.ochre { background:var(--ochre); }
.slot-label { font:500 .62rem var(--mono); text-transform:uppercase; letter-spacing:.12em; }
.slot-copy { max-width:22rem; font-family:var(--serif); font-size:2.4rem; line-height:.95; }
.slot small { max-width:24rem; font:400 .7rem/1.45 var(--mono); opacity:.75; }
.work-card-meta { position:absolute; inset:auto 1rem 1rem; display:flex; justify-content:space-between; font:500 .68rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.feature { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7vw; }
.feature h2 { font-size:clamp(3rem,6vw,6.5rem); }
.feature p { max-width:32rem; font-family:var(--serif); font-size:1.6rem; line-height:1.05; }
.stamp { border:1px solid rgba(244,237,223,.35); aspect-ratio:1; display:grid; place-items:center; max-width:390px; margin-left:auto; position:relative; }
.stamp:before { content:"MOVING IMAGE"; position:absolute; top:1rem; left:1rem; font:500 .6rem var(--mono); letter-spacing:.15em; color:var(--ochre); }
.stamp-word { font-family:var(--serif); font-style:italic; font-size:clamp(3rem,7vw,7rem); transform:rotate(-10deg); }
.page-shell { padding:clamp(4rem,8vw,8rem) 5.5vw; }
.page-title { max-width:10ch; font-size:clamp(4rem,9vw,9rem); color:var(--navy); }
.page-deck { max-width:35rem; margin:2rem 0 4rem; font-family:var(--serif); font-size:1.45rem; line-height:1.1; }
.archive-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.archive-card { min-height:440px; position:relative; }
.archive-card .slot { min-height:440px; }
.artwork-image { display:block; width:100%; height:100%; min-height:440px; object-fit:cover; background:#d6c3aa; }
.archive-card > a { display:block; height:100%; position:relative; overflow:hidden; background:var(--navy); color:var(--ivory); }
.archive-caption { position:absolute; inset:auto 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.6rem; text-shadow:0 1px 12px rgba(0,0,0,.45); }
.archive-caption .slot-copy { font-size:2.1rem; }
.archive-caption small { max-width:24rem; font:400 .7rem/1.45 var(--mono); }
.archive-meta { display:flex; justify-content:space-between; gap:1rem; margin-top:1rem; font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.detail { display:grid; grid-template-columns:1.1fr .9fr; gap:7vw; align-items:start; }
.detail-art { min-height:70vh; background:#d6c3aa; }
.detail-art .artwork-image { min-height:70vh; }
.media-caption { margin-top:.75rem; font:400 .68rem/1.5 var(--mono); color:#586277; }
.detail h1 { font-size:clamp(4rem,8vw,8rem); }
.detail-copy { position:sticky; top:2rem; }
.detail-copy p { max-width:27rem; margin:2rem 0; font-family:var(--serif); font-size:1.4rem; line-height:1.1; }
.facts { border-top:1px solid var(--line); margin-top:3rem; }
.fact { display:flex; justify-content:space-between; gap:2rem; padding:1rem 0; border-bottom:1px solid var(--line); font:500 .68rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.fact span:last-child { text-align:right; color:#586277; }
.film-list { display:grid; gap:1.2rem; }
.film-group { margin-top:4rem; }
.film-group-head { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; margin-bottom:1.25rem; }
.film-group-head h2 { margin:.6rem 0 0; font:400 clamp(2rem,4vw,4rem)/.95 var(--serif); }
.film-group-head p { max-width:28rem; margin:0; color:#586277; }
.film-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.film-card { background:var(--navy); color:var(--ivory); }
.video-frame { aspect-ratio:16/9; background:#0b1423; }
.video-frame video { display:block; width:100%; height:100%; object-fit:cover; }
.film-info { padding:1.25rem; }
.film-info h3 { margin:.8rem 0; font:400 1.1rem/1.05 var(--serif); overflow-wrap:anywhere; }
.film-info p { color:rgba(244,237,223,.75); font-size:.9rem; }
.status { color:var(--ochre); font:500 .65rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.film-info p { max-width:28rem; font-family:var(--serif); font-size:1.3rem; line-height:1.1; }
.about-grid, .inquire-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; }
.about-grid h1, .inquire-grid h1 { font-size:clamp(3rem,7vw,7rem); }
.long-copy { max-width:40rem; font-family:var(--serif); font-size:1.55rem; line-height:1.08; }
.note { margin-top:3rem; padding:1rem 0 0; border-top:2px solid var(--rust); font:400 .7rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.journal-list { border-top:1px solid var(--line); }
.journal-row { display:grid; grid-template-columns:.3fr 1fr .6fr; gap:2rem; align-items:center; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.journal-row h2 { font-size:clamp(2rem,4vw,4rem); }
.journal-row p { margin:0; font-family:var(--serif); font-size:1.15rem; line-height:1.05; }
.journal-row small { font:500 .62rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }
form { max-width:44rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
label { display:grid; gap:.45rem; margin-bottom:1.2rem; font:500 .68rem var(--mono); text-transform:uppercase; letter-spacing:.12em; }
input, select, textarea { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); padding:.8rem 0; outline:none; }
textarea { min-height:150px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--rust); box-shadow:0 2px 0 var(--rust); }
.form-note { margin-top:1rem; color:#586277; font:400 .68rem/1.5 var(--mono); }
.site-footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem 5.5vw; border-top:1px solid var(--line); font:500 .65rem var(--mono); text-transform:uppercase; letter-spacing:.1em; }
.footer-symbol { color:var(--rust); font-size:1.3rem; margin-right:.5rem; }
@media (max-width:800px) { .site-header { min-height:72px; padding:1rem 1.25rem; } .brand { font-size:1.35rem; } .menu-toggle { display:block; } .site-nav { display:none; position:absolute; top:72px; left:0; right:0; padding:1.2rem 1.25rem 1.5rem; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; gap:1rem; } .site-nav.open { display:flex; } .hero { grid-template-columns:1fr; } .hero-copy { order:2; padding:4rem 1.25rem; } .hero-visual { min-height:58vh; } .hero-visual img { transform:scale(1.62); object-position:93% center; } .hero h1 { font-size:clamp(4.4rem,18vw,7rem); } .section, .page-shell { padding:4rem 1.25rem; } .section-head { display:block; } .section-intro { margin-top:1.5rem; } .grid, .archive-grid, .film-grid { grid-template-columns:1fr; } .work-card, .work-card:nth-child(3), .work-card:nth-child(4) { grid-column:auto; min-height:330px; } .feature, .detail, .about-grid, .inquire-grid, .film-group-head { grid-template-columns:1fr; gap:3rem; } .detail-copy { position:static; order:-1; } .detail-art, .detail-art .artwork-image { min-height:58vh; } .film-card { min-height:0; } .journal-row { grid-template-columns:1fr; gap:.7rem; } .form-row { grid-template-columns:1fr; } .site-footer { flex-direction:column; padding:1.5rem 1.25rem; } }
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { scroll-behavior:auto!important; transition:none!important; } }