*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#fff;color:#0a0a0a;font-size:16px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:all .25s}
img{max-width:100%;height:auto;display:block;border:0}
ul,ol{list-style:none}
.wrap{width:1240px;margin:0 auto;max-width:92%}

.serif{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:400}

/* Topbar */
.topbar{background:#fff;border-bottom:1px solid #eaeaea;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;height:44px;line-height:44px;color:#8a8a8a}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center}
.topbar a{color:#8a8a8a;margin-right:20px}
.topbar a:hover{color:#0a0a0a}

/* Header */
.header{background:#fff;border-bottom:1px solid #0a0a0a;position:sticky;top:0;z-index:999}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:110px;gap:32px}
.brand{text-align:center;flex:1;min-width:0}
.brand .logo-line{font-family:"Playfair Display",Georgia,serif;font-size:42px;font-weight:900;letter-spacing:-1px;line-height:1;color:#0a0a0a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .logo-sub{font-size:10.5px;letter-spacing:8px;color:#8a8a8a;margin-top:10px;text-transform:uppercase;font-weight:500}
.hd-left,.hd-right{display:flex;align-items:center;gap:20px;flex-shrink:0}
.hd-left a,.hd-right a{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:#0a0a0a;font-weight:600}
.hd-left a:hover,.hd-right a:hover{color:#8a8a8a}
.hd-right .icon{width:36px;height:36px;border:1px solid #0a0a0a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .25s}
.hd-right .icon:hover{background:#0a0a0a;color:#fff}

/* Nav - real channels */
.nav-bar{background:#fff;border-bottom:1px solid #eaeaea}
.nav-bar .wrap{display:flex;justify-content:center;align-items:center;height:56px;overflow-x:auto;gap:0}
.nav-bar .wrap::-webkit-scrollbar{display:none}
.nav-bar li{flex-shrink:0}
.nav-bar li a{display:block;padding:0 26px;height:56px;line-height:56px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#0a0a0a;position:relative;transition:all .25s;white-space:nowrap}
.nav-bar li a:hover{color:#8a8a8a}
.nav-bar li a.on{color:#8a8a8a}
.nav-bar li a.on::after{content:"";position:absolute;left:50%;bottom:14px;width:24px;height:1px;background:#0a0a0a;transform:translateX(-50%)}

/* Hero editorial */
.hero{padding:80px 0 60px;border-bottom:1px solid #eaeaea;background:#fff}
.hero .wrap{max-width:880px;text-align:center}
.hero .issue{font-size:11px;letter-spacing:6px;color:#8a8a8a;text-transform:uppercase;margin-bottom:32px}
.hero h1{font-family:"Playfair Display",Georgia,serif;font-size:72px;line-height:1.05;font-weight:400;letter-spacing:-2px;color:#0a0a0a;margin-bottom:28px}
.hero h1 em{font-style:italic;display:block}
.hero .lead{font-size:18px;line-height:1.75;color:#4a4a4a;max-width:640px;margin:0 auto 36px}
.hero .scroll-cue{font-size:10.5px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.hero .scroll-cue::after{content:"";width:1px;height:40px;background:#0a0a0a;display:block}

/* Featured 3 grid */
.featured{padding:60px 0;border-bottom:1px solid #eaeaea}
.featured .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.feat-item{display:flex;flex-direction:column}
.feat-item .thumb{width:100%;height:280px;overflow:hidden;background:#f5f5f5;margin-bottom:20px}
.feat-item .thumb img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.feat-item:hover .thumb img{transform:scale(1.04)}
.feat-item .cat{font-size:10.5px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;margin-bottom:12px;font-weight:600}
.feat-item h2{font-family:"Playfair Display",Georgia,serif;font-size:24px;line-height:1.35;font-weight:400;color:#0a0a0a;margin-bottom:12px;letter-spacing:-.3px}
.feat-item h2 a:hover{color:#8a8a8a}
.feat-item p{font-size:14px;line-height:1.75;color:#6a6a6a;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feat-item .meta{font-size:11px;letter-spacing:2px;color:#8a8a8a;text-transform:uppercase}

/* Main content single column */
.main{padding:60px 0}
.section{margin-bottom:80px}
.section-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:44px;padding-bottom:20px;border-bottom:1px solid #0a0a0a}
.section-hd h2{font-family:"Playfair Display",Georgia,serif;font-size:38px;font-weight:400;letter-spacing:-.8px;color:#0a0a0a}
.section-hd h2 em{font-style:italic;color:#8a8a8a}
.section-hd a{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#8a8a8a;font-weight:600}
.section-hd a:hover{color:#0a0a0a}

/* Editorial list style (like catalog) */
.editorial-list li{display:grid;grid-template-columns:80px 1fr 320px;gap:36px;padding:36px 0;border-bottom:1px solid #eaeaea;align-items:center;transition:all .3s}
.editorial-list li:last-child{border-bottom:1px solid #0a0a0a}
.editorial-list li:hover{padding-left:12px}
.editorial-list .num{font-family:"Playfair Display",Georgia,serif;font-size:44px;font-weight:400;color:#eaeaea;font-style:italic;line-height:1}
.editorial-list li:hover .num{color:#0a0a0a}
.editorial-list .info .cat{font-size:10.5px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;margin-bottom:10px;font-weight:600}
.editorial-list .info h3{font-family:"Playfair Display",Georgia,serif;font-size:26px;line-height:1.35;font-weight:400;color:#0a0a0a;letter-spacing:-.3px;margin-bottom:10px}
.editorial-list .info h3 a:hover{color:#8a8a8a}
.editorial-list .info p{font-size:14px;color:#6a6a6a;line-height:1.75;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.editorial-list .info .meta{font-size:11px;letter-spacing:2px;color:#8a8a8a;text-transform:uppercase}
.editorial-list .thumb{width:100%;height:200px;overflow:hidden;background:#f5f5f5}
.editorial-list .thumb img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);transition:transform .8s}
.editorial-list li:hover .thumb img{transform:scale(1.05)}

/* Feature big (1 large + 2 stacked) */
.feature-spread{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start}
.fs-main{background:#fff}
.fs-main .thumb{width:100%;height:520px;overflow:hidden;background:#f5f5f5;margin-bottom:28px}
.fs-main .thumb img{width:100%;height:100%;object-fit:cover}
.fs-main .cat{font-size:11px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.fs-main h2{font-family:"Playfair Display",Georgia,serif;font-size:42px;line-height:1.2;font-weight:400;color:#0a0a0a;letter-spacing:-.8px;margin-bottom:20px}
.fs-main h2 a:hover{color:#8a8a8a}
.fs-main p{font-size:16px;line-height:1.85;color:#4a4a4a;margin-bottom:20px}
.fs-main .meta{font-size:11.5px;letter-spacing:3px;color:#8a8a8a;text-transform:uppercase}
.fs-side{display:flex;flex-direction:column;gap:36px}
.fs-side .fs-item{display:flex;flex-direction:column;padding-bottom:36px;border-bottom:1px solid #eaeaea}
.fs-side .fs-item:last-child{border-bottom:0;padding-bottom:0}
.fs-side .thumb{width:100%;height:200px;overflow:hidden;background:#f5f5f5;margin-bottom:16px}
.fs-side .thumb img{width:100%;height:100%;object-fit:cover}
.fs-side h3{font-family:"Playfair Display",Georgia,serif;font-size:20px;line-height:1.4;font-weight:400;color:#0a0a0a;margin-bottom:10px}
.fs-side h3 a:hover{color:#8a8a8a}
.fs-side .meta{font-size:11px;letter-spacing:2px;color:#8a8a8a;text-transform:uppercase}

/* Magazine grid 3x3 */
.mag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.mag-grid .item{display:flex;flex-direction:column}
.mag-grid .thumb{width:100%;height:240px;overflow:hidden;background:#f5f5f5;margin-bottom:18px}
.mag-grid .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.mag-grid .item:hover .thumb img{transform:scale(1.05)}
.mag-grid .cat{font-size:10.5px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;margin-bottom:10px;font-weight:600}
.mag-grid h3{font-family:"Playfair Display",Georgia,serif;font-size:20px;line-height:1.4;font-weight:400;color:#0a0a0a;margin-bottom:10px}
.mag-grid h3 a:hover{color:#8a8a8a}
.mag-grid p{font-size:13.5px;color:#6a6a6a;line-height:1.7;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mag-grid .meta{font-size:11px;letter-spacing:2px;color:#8a8a8a;text-transform:uppercase}

/* Quote / pull */
.pull-quote{padding:80px 0;border-top:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a;text-align:center}
.pull-quote .wrap{max-width:820px}
.pull-quote blockquote{font-family:"Playfair Display",Georgia,serif;font-size:36px;line-height:1.4;font-weight:400;font-style:italic;color:#0a0a0a;letter-spacing:-.5px;margin-bottom:28px}
.pull-quote cite{font-size:12px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;font-style:normal;font-weight:600}

/* Crumb */
.crumb{background:#fff;border-bottom:1px solid #eaeaea;height:56px;line-height:56px;font-size:11px;color:#8a8a8a;letter-spacing:2px;text-transform:uppercase}
.crumb .wrap{display:flex;align-items:center;gap:10px}
.crumb a{color:#0a0a0a}
.crumb a:hover{color:#8a8a8a}

/* Article */
.article-wrap{max-width:760px;margin:0 auto;padding:80px 0}
.article-hd{margin-bottom:52px;text-align:center}
.article-hd .cat{font-size:11px;letter-spacing:5px;color:#8a8a8a;text-transform:uppercase;margin-bottom:24px;display:block;font-weight:600}
.article-hd h1{font-family:"Playfair Display",Georgia,serif;font-size:52px;line-height:1.15;font-weight:400;color:#0a0a0a;letter-spacing:-1.2px;margin-bottom:28px}
.article-hd .meta{font-size:12px;letter-spacing:3px;color:#8a8a8a;text-transform:uppercase;display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.article-hero{width:100%;height:auto;max-height:640px;object-fit:cover;margin-bottom:52px}
.article-body{font-size:17px;line-height:1.85;color:#2a2a2a}
.article-body p{margin-bottom:28px}
.article-body p:first-of-type::first-letter{font-family:"Playfair Display",Georgia,serif;font-size:72px;font-weight:400;float:left;line-height:.9;margin:8px 12px 0 0;color:#0a0a0a}
.article-body img{margin:36px 0}
.article-body h2{font-family:"Playfair Display",Georgia,serif;font-size:32px;font-weight:400;color:#0a0a0a;margin:52px 0 20px;letter-spacing:-.5px}
.article-body h3{font-family:"Playfair Display",Georgia,serif;font-size:24px;font-weight:400;color:#0a0a0a;margin:44px 0 16px}
.article-body a{color:#0a0a0a;border-bottom:1px solid #0a0a0a}
.article-body a:hover{color:#8a8a8a;border-color:#8a8a8a}
.article-body blockquote{font-family:"Playfair Display",Georgia,serif;font-size:24px;font-style:italic;line-height:1.5;color:#0a0a0a;border-left:2px solid #0a0a0a;padding-left:32px;margin:36px 0}
.article-tags{margin-top:60px;padding-top:32px;border-top:1px solid #eaeaea;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.article-tags strong{font-size:10.5px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;margin-right:10px;font-weight:600}
.article-tags a{padding:6px 16px;border:1px solid #eaeaea;font-size:12px;letter-spacing:1.5px;color:#4a4a4a;text-transform:uppercase}
.article-tags a:hover{background:#0a0a0a;color:#fff;border-color:#0a0a0a}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:64px;border-top:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a}
.pn a{padding:36px 32px;font-family:"Playfair Display",Georgia,serif;font-size:20px;line-height:1.4;color:#0a0a0a;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:all .3s}
.pn a:first-child{border-right:1px solid #0a0a0a}
.pn a:hover{background:#f5f5f5}
.pn a span{display:block;font-family:-apple-system,sans-serif;font-size:10.5px;letter-spacing:4px;color:#8a8a8a;text-transform:uppercase;margin-bottom:14px;font-weight:600}

/* Related */
.rel{padding:80px 0;border-top:1px solid #eaeaea}
.rel .rel-hd{text-align:center;margin-bottom:52px}
.rel .rel-hd h2{font-family:"Playfair Display",Georgia,serif;font-size:36px;font-weight:400;color:#0a0a0a;letter-spacing:-.5px}
.rel .rel-hd h2 em{font-style:italic;color:#8a8a8a}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}

/* List banner */
.list-banner{padding:80px 0;text-align:center;border-bottom:1px solid #0a0a0a}
.list-banner .issue{font-size:11px;letter-spacing:6px;color:#8a8a8a;text-transform:uppercase;margin-bottom:24px}
.list-banner h2{font-family:"Playfair Display",Georgia,serif;font-size:56px;font-weight:400;color:#0a0a0a;letter-spacing:-1.5px;line-height:1.1;margin-bottom:20px}
.list-banner p{font-size:15px;color:#6a6a6a;max-width:640px;margin:0 auto;line-height:1.75}

.page{display:flex;justify-content:center;align-items:center;gap:4px;padding:60px 0;flex-wrap:wrap}
.page a,.page span{display:inline-block;min-width:44px;height:44px;line-height:42px;padding:0 14px;text-align:center;border:1px solid #eaeaea;font-size:12.5px;color:#4a4a4a;letter-spacing:1px;font-weight:600;transition:all .25s}
.page a:hover{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.page .thisclass{background:#0a0a0a;color:#fff;border-color:#0a0a0a}

/* Footer */
.footer{border-top:1px solid #0a0a0a;padding:80px 0 40px;background:#fff}
.footer .top-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;padding-bottom:56px;border-bottom:1px solid #eaeaea}
.f-brand .f-logo{font-family:"Playfair Display",Georgia,serif;font-size:36px;font-weight:900;letter-spacing:-.8px;color:#0a0a0a;margin-bottom:18px;line-height:1}
.f-brand p{font-size:13.5px;line-height:1.9;color:#6a6a6a;max-width:420px}
.footer h4{font-size:11px;letter-spacing:4px;color:#0a0a0a;text-transform:uppercase;margin-bottom:22px;font-weight:700}
.footer ul li{padding:6px 0}
.footer ul li a{font-size:13.5px;color:#4a4a4a}
.footer ul li a:hover{color:#0a0a0a;text-decoration:underline}
.footer .f-tags{display:flex;flex-wrap:wrap;gap:8px}
.footer .f-tags a{padding:5px 12px;border:1px solid #eaeaea;font-size:11.5px;color:#4a4a4a;letter-spacing:1px}
.footer .f-tags a:hover{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.footer .bottom{padding-top:32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;color:#8a8a8a;letter-spacing:2px;text-transform:uppercase}
.footer .bottom a{color:#8a8a8a}
.footer .bottom a:hover{color:#0a0a0a}

@media(max-width:1240px){
  .wrap{width:92%}
  .hero h1{font-size:56px}
  .featured .wrap{grid-template-columns:repeat(2,1fr);gap:32px}
  .feature-spread{grid-template-columns:1fr;gap:36px}
  .editorial-list li{grid-template-columns:60px 1fr 240px;gap:24px}
  .editorial-list .thumb{height:160px}
  .mag-grid{grid-template-columns:repeat(2,1fr)}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .footer .top-grid{grid-template-columns:1fr 1fr}
  .article-hd h1{font-size:40px}
}
@media(max-width:768px){
  .header .wrap{height:auto;flex-wrap:wrap;padding:20px 0;gap:16px}
  .brand .logo-line{font-size:26px}
  .brand .logo-sub{font-size:9px;letter-spacing:4px;margin-top:6px}
  .hd-left,.hd-right{width:100%;justify-content:center;gap:14px}
  .nav-bar .wrap{justify-content:flex-start;padding:0 12px}
  .nav-bar li a{padding:0 14px;font-size:10.5px;letter-spacing:1.5px}
  .hero{padding:48px 0 40px}
  .hero h1{font-size:34px;letter-spacing:-1px}
  .hero .lead{font-size:15px}
  .featured{padding:40px 0}
  .featured .wrap,.mag-grid,.rel-grid,.footer .top-grid,.pn{grid-template-columns:1fr}
  .editorial-list li{grid-template-columns:1fr;gap:16px;padding:28px 0}
  .editorial-list .num{font-size:32px}
  .editorial-list .thumb{height:220px}
  .section-hd{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px}
  .section-hd h2{font-size:28px}
  .fs-main .thumb{height:280px}
  .fs-main h2{font-size:26px}
  .pull-quote blockquote{font-size:24px}
  .article-wrap{padding:48px 0}
  .article-hd h1{font-size:30px;letter-spacing:-.5px}
  .article-body{font-size:16px}
  .article-body p:first-of-type::first-letter{font-size:52px}
  .pn a{padding:24px 20px;font-size:16px}
  .list-banner{padding:48px 0}
  .list-banner h2{font-size:34px}
  .footer{padding:48px 0 32px}
  .footer .bottom{flex-direction:column;text-align:center}
}