@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--red:#a4001d;--scarlet:#df203b;--ink:#08090d;--paper:#f4f0e9;--line:#ffffff26}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:'DM Sans',sans-serif;overflow-x:hidden}
.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 clamp(22px,5vw,72px);background:#08090dcc;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;font:12px 'DM Mono';letter-spacing:.1em}
.crest{display:grid;place-items:center;background:var(--red);width:31px;height:38px;clip-path:polygon(50% 0,100% 15%,91% 78%,50% 100%,9% 78%,0 15%);font:600 20px 'Playfair Display';overflow:hidden}
.crest img{width:100%;height:100%;object-fit:cover}
.topbar nav{display:flex;gap:24px;align-items:center}
.topbar nav a,.nav-button{color:inherit;text-decoration:none;background:none;border:0;font:11px 'DM Mono';letter-spacing:.07em;cursor:pointer}
.nav-button{border:1px solid var(--line);padding:8px 12px}
.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:75px clamp(22px,8vw,148px);gap:40px}
.eyebrow{font:11px 'DM Mono';letter-spacing:.12em;color:var(--scarlet);margin:0 0 19px}
.hero h1,.intro h2,.chapter h2,.closing h2{font:600 clamp(50px,7vw,114px)/.92 'Playfair Display';letter-spacing:-.055em;margin:0}
.hero h1 em,.intro h2 em,.chapter h2 em,.closing h2 em{color:var(--scarlet);font-weight:500}
.hero-copy>p:not(.eyebrow),.chapter-copy>p:not(.eyebrow),.intro>p:not(.eyebrow){max-width:480px;font-size:17px;line-height:1.65;color:#c8c5c3;margin:28px 0}
.cta{color:white;text-decoration:none;display:inline-flex;gap:31px;align-items:center;background:var(--red);border:0;padding:15px 20px;font:11px 'DM Mono';letter-spacing:.08em;cursor:pointer}
.hero-photo{height:500px;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#1a1c24,#0d0e13);border:1px solid var(--line);display:none}
.hero-photo.has-photo{display:block}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.intro{padding:145px clamp(22px,17vw,290px);background:var(--paper);color:var(--ink)}
.intro .eyebrow{color:var(--red)}.intro h2{font-size:clamp(42px,5vw,76px)}.intro h2 em{color:var(--red)}
.intro>p:not(.eyebrow){color:#5d5c61}
.chapter{min-height:640px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:80px clamp(22px,8vw,148px);gap:10vw}
.chapter.red{background:linear-gradient(135deg,#980018,#710012)}
.chapter.dark{background:#111218}
.chapter.photo{background:#e8e2d7;color:var(--ink)}
.chapter.photo .chapter-copy>p:not(.eyebrow){color:#4c4c4e}
.chapter-art{height:340px;position:relative;display:grid;place-items:center}
.badge{width:230px;height:230px;border:7px double var(--paper);border-radius:50%;display:grid;place-items:center;font:600 80px/.7 'Playfair Display';text-align:center}
.book{width:170px;height:130px;position:relative}
.book span{position:absolute;inset:0;border:2px solid var(--scarlet);border-radius:2px}
.book span:nth-child(2){transform:translate(10px,-10px)}
.book span:nth-child(3){transform:translate(20px,-20px)}
.lens{width:260px;height:260px;border:19px solid var(--red);border-radius:50%;display:grid;place-items:center}
.lens b{width:162px;height:162px;border-radius:50%;background:radial-gradient(circle at 36% 33%,#5e7593,#1c2531 51%,#05070c 75%);border:6px solid #b6b0a7}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:32px}
.project-card{border-top:1px solid #fff5;padding-top:11px}
.photo .project-card{border-color:#0003}
.project-image{height:90px;background-size:cover;background-position:center;margin-bottom:11px;background-color:#6b0012;border-radius:2px}
.project-type{font:9px 'DM Mono';letter-spacing:.1em;margin:0;color:#ffd1d8}
.photo .project-type{color:var(--red)}
.project-card h3{font:600 18px 'Playfair Display';margin:7px 0}
.project-desc{display:none}
.project-link{font:10px 'DM Mono';color:inherit;text-decoration:none}
.closing{padding:160px clamp(22px,17vw,290px)}
.closing h2{margin-bottom:35px}
footer{border-top:1px solid var(--line);padding:24px clamp(22px,5vw,72px);display:flex;justify-content:space-between;gap:10px;color:#9b999b;font:10px 'DM Mono';letter-spacing:.05em}
.reveal{opacity:0;transform:translateY(30px);transition:.8s ease}
.reveal.visible{opacity:1;transform:none}
dialog{border:0;background:transparent;padding:0;color:var(--paper);width:min(680px,calc(100% - 30px));max-height:90vh}
dialog::backdrop{background:#050509dd}
.panel{position:relative;background:#15161e;padding:42px;max-height:90vh;overflow:auto}
.panel h2{font:600 42px 'Playfair Display';margin:0 0 12px}
.panel>p:not(.eyebrow){color:#b9b8bd;line-height:1.55}
.close{position:absolute;right:17px;top:14px;background:none;border:0;color:white;font-size:30px;cursor:pointer}
.panel input,.panel textarea,.editor select{display:block;width:100%;background:#0c0d12;border:1px solid #353640;color:white;padding:12px;margin:8px 0 18px;font:14px 'DM Sans'}
.panel input[type=file]{padding:8px;font-size:12px}
.panel input[type=color]{height:44px;padding:4px;cursor:pointer}
.preview{width:100%;max-width:220px;max-height:140px;object-fit:cover;border-radius:4px;margin:6px 0 16px;display:block}
.panel label{font:11px 'DM Mono';letter-spacing:.08em}
.editor-actions{display:flex;gap:9px}
.outline{background:none;color:white;border:1px solid #6a6b73;padding:12px;font:11px 'DM Mono';cursor:pointer}
.editor hr{border:0;border-top:1px solid #383943;margin:30px 0}
.project-edit{border:1px solid #363741;padding:16px;margin:12px 0}
.project-edit label{display:block}
.project-edit input,.project-edit textarea,.project-edit select{margin-bottom:10px}
.tiny{font-size:11px!important}
.notice{background:#35111a;border-left:3px solid var(--scarlet);padding:12px;font-size:13px;margin-bottom:18px}
@media(max-width:720px){
  .topbar nav a{display:none}
  .hero,.chapter{grid-template-columns:1fr;padding-top:68px;padding-bottom:68px}
  .hero{min-height:auto}
  .hero-photo{height:260px}
  .chapter.dark .chapter-copy{order:1}.chapter.dark .chapter-art{order:2}
  .chapter-art{height:220px}
  .project-grid{grid-template-columns:1fr}
  .intro,.closing{padding:95px 24px}
  footer{flex-direction:column}
  .badge{width:160px;height:160px;font-size:60px}
  .lens{width:180px;height:180px}.lens b{width:110px;height:110px}
}