:root {
  --navy: #052962; --navy2: #041f4a; --ink: #121212; --text: #333; --mute: #707070; --line: #dcdcdc; --bg: #fff; --grey: #f6f6f6;
  --news: #c70000; --opinion: #e05e00; --sport: #0084c6; --culture: #a1845c; --lifestyle: #bb3b80; --yellow: #ffe500;
  --serif: "Merriweather", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.4; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* ---- header ---- */
.hdr-top { background: var(--navy); color: #fff; }
.hdr-top-in { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding-top: 10px; padding-bottom: 0; min-height: 150px; }
.support { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 6px; }
.support-t { font-family: var(--serif); font-weight: 700; font-size: 20px; }
.support-s { font-size: 15px; margin: 4px 0 10px; opacity: .9; }
.btn-support { display: inline-block; background: var(--yellow); color: var(--ink); font-weight: 700; padding: 7px 16px; border-radius: 999px; font-size: 15px; }
.hdr-links { grid-column: 2; grid-row: 1; display: flex; gap: 20px; font-size: 14px; font-weight: 600; justify-content: flex-end; }
.hdr-links a:hover { text-decoration: underline; }
.logo { grid-column: 2; grid-row: 2; justify-self: end; font-family: var(--serif); font-weight: 900; font-size: 44px; line-height: .95; text-align: right; color: #fff; letter-spacing: -0.01em; padding: 10px 0 14px; }
.logo.small { font-size: 28px; }
.hdr-pillars { background: var(--navy); border-top: 1px solid rgba(255,255,255,.2); }
.hdr-pillars .wrap { display: flex; align-items: stretch; }
.pillars { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; }
.pillars li { flex: 0 0 160px; border-left: 1px solid rgba(255,255,255,.2); }
.pillars li a { display: block; padding: 8px 10px 10px; color: #fff; font-family: var(--serif); font-weight: 700; font-size: 20px; border-top: 4px solid transparent; }
.pillars li.p-news a { border-top-color: var(--news); } .pillars li.p-opinion a { border-top-color: var(--opinion); }
.pillars li.p-sport a { border-top-color: var(--sport); } .pillars li.p-culture a { border-top-color: #ffbb50; } .pillars li.p-lifestyle a { border-top-color: var(--lifestyle); }
.pillars li.active a { background: var(--navy2); }
.pillars li a:hover { background: var(--navy2); }
.more-btn { background: none; border: 0; border-left: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 600; font-size: 16px; padding: 0 16px; }
.hdr-sub { background: var(--navy); border-top: 1px solid rgba(255,255,255,.2); }
.hdr-sub .wrap { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.subnav { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.subnav a { color: #fff; font-size: 14px; font-weight: 500; }
.subnav a:hover { text-decoration: underline; }
.edition { color: #fff; font-size: 13px; opacity: .85; }

/* ---- containers ---- */
.container { padding: 14px 0 22px; border-top: 1px solid var(--line); }
.container.grey { background: var(--grey); }
.ctitle { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0 0 12px; }
.ctitle.op { color: var(--opinion); } .ctitle.sp { color: var(--sport); } .ctitle.cu { color: var(--culture); } .ctitle.li { color: var(--lifestyle); }
.grid-head { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.grid-head > * { padding: 0 10px; border-right: 1px solid var(--line); }
.grid-head > *:first-child { padding-left: 0; } .grid-head > *:last-child { padding-right: 0; border-right: 0; }
.grid-spot { display: grid; grid-template-columns: 3fr 1fr; border-top: 1px solid var(--line); }
.grid-spot > * { padding: 0 10px; border-right: 1px solid var(--line); }
.grid-spot > *:first-child { padding-left: 0; } .grid-spot > *:last-child { padding-right: 0; border-right: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 14px; }
.grid-4 > .card { padding: 0 10px; border-right: 1px solid var(--line); }
.grid-4 > .card:first-child { padding-left: 0; } .grid-4 > .card:last-child { padding-right: 0; border-right: 0; }
.stack .card { border-bottom: 1px solid var(--line); }
.stack .card:last-child { border-bottom: 0; }

/* ---- cards ---- */
.card { position: relative; padding: 6px 0 12px; }
.card.lead { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items: start; }
.card-body { position: relative; }
.pic { display: block; margin-bottom: 8px; }
.pic img { aspect-ratio: 5 / 3; object-fit: cover; }
.pic.right { margin: 0; }
.hl { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.3; margin: 0 0 6px; }
.hl.lg { font-size: 26px; } .hl.xl { font-size: 30px; }
.hl a:hover { text-decoration: underline; }
.kicker { font-weight: 700; margin-right: 6px; }
.pl-news .kicker { color: var(--news); } .pl-sport .kicker { color: var(--sport); } .pl-culture .kicker { color: var(--culture); } .pl-lifestyle .kicker { color: var(--lifestyle); }
.kicker.live { color: var(--news); }
.kicker.live i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--news); margin-right: 4px; animation: pulse 1.4s infinite; vertical-align: 1px; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
.sf { font-family: var(--serif); font-weight: 300; font-size: 14px; line-height: 1.45; color: var(--text); margin: 0 0 8px; }
.by { font-size: 14px; color: var(--mute); margin-bottom: 6px; }
.sublinks { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.sublinks li { padding: 6px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 14px; }
.sublinks li:last-child { border-bottom: 0; }
.age { font-size: 12px; color: var(--mute); margin-top: 4px; }
.op-grid .card { padding-bottom: 16px; }
.op-card .quote { font-family: var(--serif); font-size: 44px; line-height: .6; color: var(--opinion); margin: 10px 0 2px; font-weight: 900; }
.op-card .hl { font-size: 20px; font-weight: 400; font-style: normal; }
.op-card .op-author { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 17px; color: var(--opinion); margin: 2px 0 8px; }
.op-card .sf { font-size: 14px; }

/* ---- article ---- */
.art-wrap { max-width: 980px; padding-top: 10px; }
.art-head { max-width: 720px; }
.art-sec { font-weight: 700; font-size: 15px; margin: 16px 0 8px; }
.pl-news .art-sec a { color: var(--news); } .pl-opinion .art-sec a { color: var(--opinion); } .pl-sport .art-sec a { color: var(--sport); } .pl-culture .art-sec a { color: var(--culture); } .pl-lifestyle .art-sec a { color: var(--lifestyle); }
.art-h1 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.2; margin: 0 0 14px; }
.pl-opinion .art-h1 { font-weight: 300; font-style: italic; }
.art-sf { font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.45; color: var(--text); margin: 0 0 18px; }
.art-fig { margin: 0 0 14px; }
.art-fig figcaption { font-size: 13px; color: var(--mute); margin-top: 6px; }
.credit { font-size: 12px; }
.art-meta { max-width: 720px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; margin-bottom: 18px; font-size: 14px; }
.art-by { font-weight: 700; }
.pl-news .art-by { color: var(--news); } .pl-opinion .art-by { color: var(--opinion); } .pl-sport .art-by { color: var(--sport); } .pl-culture .art-by { color: var(--culture); } .pl-lifestyle .art-by { color: var(--lifestyle); }
.art-date { color: var(--mute); margin: 2px 0 10px; }
.art-share { display: flex; align-items: center; gap: 8px; color: var(--mute); }
.art-share button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.art-body { max-width: 720px; }
.art-body p { font-family: var(--serif); font-size: 17px; line-height: 1.6; margin: 0 0 20px; color: var(--ink); }
.art-body p:first-child::first-letter { font-size: 3.6em; float: left; line-height: .85; margin: 6px 8px 0 0; font-weight: 700; }
.pl-news .art-body p:first-child::first-letter { color: var(--news); } .pl-opinion .art-body p:first-child::first-letter { color: var(--opinion); } .pl-sport .art-body p:first-child::first-letter { color: var(--sport); } .pl-culture .art-body p:first-child::first-letter { color: var(--culture); } .pl-lifestyle .art-body p:first-child::first-letter { color: var(--lifestyle); }
.art-foot { font-family: var(--sans) !important; font-size: 14px !important; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; }
.sec-head { background: var(--grey); border-top: 1px solid var(--line); }
.sec-head h1 { font-family: var(--serif); font-weight: 700; font-size: 34px; margin: 0; padding: 18px 0; }
.sec-head.pl-news h1 { color: var(--news); } .sec-head.pl-opinion h1 { color: var(--opinion); } .sec-head.pl-sport h1 { color: var(--sport); } .sec-head.pl-culture h1 { color: var(--culture); } .sec-head.pl-lifestyle h1 { color: var(--lifestyle); }
.empty { font-family: var(--serif); color: var(--mute); }

/* ---- footer ---- */
.ftr { background: var(--navy); color: #fff; margin-top: 30px; padding: 26px 0 30px; }
.ftr-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.ftr h4 { font-family: var(--serif); font-size: 17px; margin: 0 0 10px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { font-size: 14px; margin-bottom: 6px; opacity: .9; }
.ftr li a:hover, .ftr-links a:hover { text-decoration: underline; }
.ftr-brand { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.ftr-brand .logo { text-align: right; padding: 0; }
.ftr-links { list-style: none; margin: 26px 0 10px; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.2); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.ftr-legal { font-size: 12px; opacity: .75; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .pillars li { flex: 0 0 auto; } .pillars li a { font-size: 17px; padding: 8px 14px 10px; }
  .grid-head { grid-template-columns: 1fr 1fr; } .grid-head > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-left: 0; }
  .ftr-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .hdr-top-in { grid-template-columns: 1fr; min-height: 0; }
  .support, .hdr-links { display: none; }
  .logo { grid-column: 1; grid-row: 1; justify-self: center; text-align: center; font-size: 34px; padding: 8px 0 12px; }
  .hdr-sub { display: none; }
  .pillars { overflow-x: auto; }
  .grid-head, .grid-spot, .grid-4 { grid-template-columns: 1fr; }
  .grid-head > *, .grid-spot > *, .grid-4 > .card { padding: 0; border-right: 0; }
  .grid-4 > .card, .grid-head > *, .grid-spot > * { border-bottom: 1px solid var(--line); }
  .card.lead { grid-template-columns: 1fr; } .card.lead .pic.right { order: -1; margin-bottom: 8px; }
  .hl.xl { font-size: 24px; } .art-h1 { font-size: 28px; }
  .ftr-cols { grid-template-columns: 1fr 1fr; } .ftr-brand { grid-column: 1 / -1; align-items: flex-start; }
}

/* ---- article rail & topics ---- */
.art-grid { display: grid; grid-template-columns: 720px 1fr; gap: 40px; align-items: start; }
.art-rail { border-top: 1px solid var(--line); padding-top: 8px; position: sticky; top: 12px; }
.art-rail h3 { font-family: var(--serif); font-size: 17px; margin: 4px 0 8px; }
.art-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: mv; }
.art-rail li { counter-increment: mv; display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 14px; line-height: 1.3; }
.art-rail li::before { content: counter(mv); font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1; color: var(--mute); min-width: 24px; }
.art-rail li a:hover { text-decoration: underline; }
.rail-author { color: var(--opinion); font-style: italic; }
.topics { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 10px; }
.topics-h { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.topics a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; margin: 0 6px 6px 0; }
.topics a:hover { background: var(--grey); }
.reuse { font-size: 13px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.reuse a { text-decoration: underline; }
@media (max-width: 1024px) { .art-grid { grid-template-columns: 1fr; } .art-rail { position: static; } }