.design-hero { background: radial-gradient(circle at 20% 35%, rgba(116,189,177,.11), transparent 36rem), var(--ink-2); }
.design-hero-grid,.design-world-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px,6vw,88px); align-items:center; }
.design-hero h1 { margin:22px 0; max-width:740px; font-family:Georgia,serif; font-size:clamp(3.5rem,6.5vw,7.4rem); font-weight:500; line-height:.99; letter-spacing:-.065em; }
.design-hero .lede { max-width:650px; }
.design-hero figure,.design-world-grid figure,.design-pictures figure { margin:0; overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.design-hero img { aspect-ratio:4/5; object-fit:cover; }
.design-hero figcaption,.design-world-grid figcaption,.design-pictures figcaption { padding:10px 16px; color:var(--muted); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; }
.design-intro { max-width:1000px; }
.design-intro h2,.design-principles h2,.design-world-grid h2 { margin:16px 0 28px; font-family:Georgia,serif; font-size:clamp(2.7rem,4.8vw,5.1rem); line-height:1.05; font-weight:500; letter-spacing:-.05em; }
.design-intro p,.design-world-grid p { max-width:880px; color:#cfcdc6; font-size:1.12rem; }
.design-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:42px; }
.design-steps article,.design-principle-grid article,.design-status-grid article { min-width:0; padding:28px 26px 32px; border:1px solid var(--line); background:var(--panel); }
.design-steps span,.design-status-grid span { color:#74bdb1; font-size:.72rem; font-weight:750; letter-spacing:.12em; }
.design-steps h3,.design-principle-grid h3,.design-status-grid h3 { margin:16px 0 10px; font-family:Georgia,serif; font-size:1.8rem; font-weight:500; line-height:1.15; }
.design-steps p,.design-principle-grid p,.design-status-grid p { margin:0; color:var(--muted); }
.design-principles { background:var(--ink-2); }
.design-principle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.design-world-grid img { aspect-ratio:4/3; object-fit:cover; }
.design-status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:36px 0; }
.design-pictures { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.design-pictures img { aspect-ratio:16/10; object-fit:cover; }
.design-end { max-width:840px; margin:32px 0 0; color:#cfcdc6; font-size:1.08rem; }
.design-end a { color:var(--gold-soft); }
.design-operations-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(24px,5vw,76px); align-items:end; margin-bottom:36px; }
.design-operations-heading h2 { margin:16px 0 0; font-family:Georgia,serif; font-size:clamp(2.7rem,4.8vw,5.1rem); line-height:1.05; font-weight:500; letter-spacing:-.05em; }
.design-operations-heading p { margin:0; color:#cfcdc6; font-size:1.08rem; }
.design-operation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.design-operation-grid article { min-width:0; padding:clamp(26px,3vw,42px); border:1px solid var(--line); background:var(--panel); }
.design-operation-grid span { color:#74bdb1; font-size:.72rem; font-weight:750; letter-spacing:.12em; }
.design-operation-grid h3 { margin:20px 0 14px; font-family:Georgia,serif; font-size:clamp(1.6rem,2.2vw,2.2rem); font-weight:500; line-height:1.12; }
.design-operation-grid p { margin:0; color:var(--muted); }
.design-operation-example { margin:14px 0 0; padding:22px clamp(26px,3vw,40px); border-left:3px solid var(--gold); background:rgba(255,255,255,.035); color:#cfcdc6; }
.design-operation-example strong { color:var(--paper); }
.design-book-note { display:flex; gap:28px; align-items:center; justify-content:space-between; margin-top:14px; padding:clamp(26px,3vw,40px); border:1px solid var(--line); background:var(--ink-2); }
.design-book-note p { max-width:790px; margin:12px 0 0; color:#cfcdc6; }
.design-book-note .button { flex:none; }
@media(max-width:900px) { .design-hero-grid,.design-world-grid { grid-template-columns:1fr; } .design-hero figure { max-width:620px; } .design-steps,.design-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .design-operations-heading { grid-template-columns:1fr; } .design-book-note { align-items:flex-start; flex-direction:column; } }
@media(max-width:640px) { .design-hero h1 { font-size:clamp(3.1rem,13vw,5rem); } .design-steps,.design-principle-grid,.design-status-grid,.design-pictures,.design-operation-grid { grid-template-columns:1fr; } }