@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@500;600;700&display=swap');

:root { --ink:#17211b; --paper:#faf8f2; --muted:#6c746b; --line:#d9ddd3; --accent:#c75532; --night:#22352d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Mono", monospace; font-size:15px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
.shell { max-width:1120px; margin:auto; padding:0 28px; }
.top { border-bottom:1px solid var(--line); }
.top .shell { min-height:106px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { font-family:"Playfair Display",serif; font-size:clamp(2.3rem,6vw,4.7rem); line-height:1; letter-spacing:-.07em; }
.tag { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; text-align:right; }
.hero { padding:80px 0 64px; display:grid; grid-template-columns:1.2fr .8fr; gap:54px; align-items:end; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; margin:0 0 18px; }
h1 { font:600 clamp(3rem,7vw,6.4rem)/.98 "Playfair Display",serif; letter-spacing:-.06em; margin:0; max-width:760px; }
.intro { border-left:2px solid var(--accent); padding-left:22px; color:var(--muted); max-width:330px; margin:0 0 5px; }
.section-head { border-top:1px solid var(--ink); padding:14px 0 22px; display:flex; justify-content:space-between; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; }
.posts { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding-bottom:88px; }
.card { background:#fff; border:1px solid var(--line); min-height:390px; padding:30px; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-4px); box-shadow:8px 8px 0 var(--night); }
.number { color:var(--accent); font-size:.72rem; letter-spacing:.12em; }
.card h2 { font:600 clamp(2rem,3.5vw,3.25rem)/1.02 "Playfair Display",serif; letter-spacing:-.055em; margin:30px 0 16px; }
.meta { color:var(--muted); font-size:.75rem; margin-top:auto; padding-top:24px; border-top:1px solid var(--line); }
.read { margin-top:18px; font-size:.76rem; text-transform:uppercase; letter-spacing:.13em; color:var(--accent); }
footer { background:var(--night); color:#edf0e8; padding:29px 0; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
footer .shell { display:flex; justify-content:space-between; gap:16px; }
.article { max-width:760px; padding-top:65px; padding-bottom:100px; }
.back { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; }
.article h1 { font-size:clamp(3.1rem,7vw,5.7rem); margin:28px 0 30px; }
.article-info { display:flex; flex-wrap:wrap; gap:12px 27px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:16px 0; color:var(--muted); font-size:.76rem; }
.article-info strong { color:var(--ink); font-weight:500; }
.copy { font-family:Georgia,serif; font-size:1.16rem; line-height:1.85; margin-top:38px; }
.copy p { margin:0 0 24px; }
.movie-details { font-family:"DM Mono",monospace; background:#e8ece5; border-left:3px solid var(--accent); padding:18px 20px; font-size:.83rem; line-height:1.8; margin:36px 0; }
@media (max-width:700px) { .top .shell { min-height:82px; } .hero { grid-template-columns:1fr; padding:54px 0 42px; gap:28px; } .tag { display:none; } .posts { grid-template-columns:1fr; } .card { min-height:330px; } footer .shell { display:block; } footer .shell span+span { display:block; margin-top:7px; } }