.hero{padding:96px 48px 40px;max-width:900px;margin:0 auto;}
.hero .kicker{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:18px;}
.hero h1{font-family:var(--font-serif);font-size:52px;font-weight:600;line-height:1.15;}
.hero p{margin-top:20px;font-size:17px;line-height:1.6;color:var(--fg-muted);max-width:520px;}
.cta{margin-top:32px;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:transparent;border:1px solid var(--fg);color:var(--fg);font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;font-family:var(--font-sans);cursor:pointer;}
.cta:hover{background:var(--fg);color:var(--bg);}

.divider-full{margin:48px 0 0;}

.grid{max-width:900px;margin:0 auto;padding:0 48px;}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:28px;align-items:center;padding:34px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s;}
.row:hover{background:var(--bg-elevated);}
.row:hover .row-arrow{border-color:var(--accent);color:var(--accent);}
.row-index{font-family:var(--font-serif);font-size:20px;color:var(--fg-ghost);font-weight:600;}
.row-body h3{font-family:var(--font-serif);font-size:22px;font-weight:600;margin-bottom:6px;}
.row-body p{font-size:14px;line-height:1.5;color:var(--fg-subtle);max-width:480px;}
.row-arrow{width:40px;height:40px;flex-shrink:0;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--fg);transition:border-color 0.15s,color 0.15s;}

.modal{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;z-index:999;padding:20px;}
.modal.active{display:flex;}
.modal-content{background:var(--bg);width:640px;max-width:100%;border:1px solid var(--border);position:relative;}
.modal-preview{width:100%;height:280px;background:var(--bg-elevated);overflow:hidden;}
.modal-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.modal-body{padding:28px;}
.modal-body .modal-kicker{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px;}
.modal-body h2{font-family:var(--font-serif);font-size:26px;font-weight:600;margin-bottom:14px;}
.modal-body p{font-size:14px;line-height:1.7;color:var(--fg-muted);margin-bottom:24px;}
.close{position:absolute;top:16px;right:18px;cursor:pointer;font-size:18px;color:var(--fg);background:none;border:none;}
.close:hover{color:var(--accent);}

@media(max-width:768px){
  .hero{padding:64px 20px 32px;}
  .hero h1{font-size:36px;}
  .hero p{font-size:15px;}
  .grid{padding:0 20px;}
  .row{grid-template-columns:40px minmax(0,1fr) auto;gap:14px;padding:24px 0;}
  .row-index{font-size:16px;}
  .row-body h3{font-size:18px;}
  .row-body p{font-size:13px;}
  .modal-content{width:100%;}
  .modal-preview{height:180px;}
}