:root {
  --cream:#F5F1E6; --cream2:#E9E3D3; --ink:#111111; --mute:#4A463E;
  --green:#0B7A3E; --blue:#1F5FBF; --orange:#F26B1D; --red:#E02424;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--ink); font-family:Inter, system-ui, sans-serif; line-height:1.5; }
a { color:inherit; }
img { display:block; max-width:100%; }
section, .nav, footer { padding-left:max(16px, calc((100% - 1160px) / 2)); padding-right:max(16px, calc((100% - 1160px) / 2)); }

/* Logo */
.brand { display:block; line-height:0; }
.brand img { height:44px; width:auto; transition:height .25s, transform .3s; }
.brand:hover img { transform:rotate(-3deg) scale(1.04); }
.brand-foot img { height:72px; }

/* Nav */
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:24px; padding-top:12px; padding-bottom:12px;
       background:rgba(245,241,230,.92); backdrop-filter:blur(8px); border-bottom:2px solid var(--ink); transition:padding .25s, box-shadow .25s; }
.nav.scrolled { padding-top:8px; padding-bottom:8px; box-shadow:0 6px 18px rgba(17,17,17,.08); }
.nav.scrolled .brand img { height:36px; }
.nav nav { display:flex; gap:24px; margin-left:auto; }
.nav nav a { position:relative; text-decoration:none; font-weight:700; font-size:15px; }
.nav nav a::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--orange);
                    transform:scaleX(0); transform-origin:right; transition:transform .25s; }
.nav nav a:hover::after { transform:scaleX(1); transform-origin:left; }

/* Buttons */
.btn { display:inline-block; text-decoration:none; font-weight:900; font-size:14px; letter-spacing:1.5px; text-transform:uppercase;
       padding:14px 22px; border:2px solid var(--ink); transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.btn:active { transform:translate(0,0); box-shadow:0 0 0 var(--ink); transition-duration:.05s; }
.btn-ink { background:var(--ink); color:var(--cream); }
.nav .btn-ink { padding:10px 16px; }
.btn-line { background:transparent; }
.btn-cream { background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn-cream-line { color:var(--cream); border-color:var(--cream); }
.btn-cream:hover, .btn-cream-line:hover { box-shadow:4px 4px 0 var(--orange); }
button.btn { font-family:Inter, sans-serif; cursor:pointer; }
button.btn-line { color:var(--ink); }

/* Hero */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding-top:72px; padding-bottom:72px; }
.kicker { display:inline-flex; align-items:center; gap:10px; font-weight:900; font-size:13px; letter-spacing:3px; text-transform:uppercase;
          background:var(--ink); color:var(--cream); padding:8px 14px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--red); animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
h1 { font-family:Anton, Impact, sans-serif; font-weight:400; font-size:clamp(48px, 7vw, 92px); line-height:1; text-transform:uppercase; margin:24px 0; }
h1 em { font-style:normal; color:var(--orange); }
h1 em.g { color:var(--green); }
.lede { font-size:19px; max-width:520px; color:var(--mute); }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.tagline { margin-top:28px; font-weight:700; font-style:italic; color:var(--mute); }
.hero-feature .label { font-weight:900; font-size:13px; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; }

/* Ticker */
.ticker { background:var(--ink); color:var(--cream); overflow:hidden; border-block:2px solid var(--ink); }
.track { display:flex; width:max-content; animation:scroll 30s linear infinite; }
.ticker:hover .track { animation-play-state:paused; }
.track span { font-family:Anton, sans-serif; font-size:30px; padding:14px 32px; white-space:nowrap; }
.track i { font-family:Inter, sans-serif; font-style:normal; font-weight:700; font-size:14px; letter-spacing:2px; text-transform:uppercase; color:#B9B3A4; margin-left:8px; }
@keyframes scroll { to { transform:translateX(-50%); } }

/* Section titles */
.sec { font-family:Anton, sans-serif; font-weight:400; font-size:clamp(34px, 5vw, 52px); text-transform:uppercase; line-height:1.05; }
.sec span { font-family:Inter, sans-serif; font-size:18px; font-weight:700; text-transform:none; color:var(--mute); }
.sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.more { font-weight:900; text-decoration:none; }
.more:hover { text-decoration:underline; }

/* Article cards */
.card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; text-decoration:none; background:#fff; border:2px solid var(--ink);
        border-top:10px solid var(--c, var(--ink)); padding:22px; transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink); }
.card::before { content:""; position:absolute; inset:0; background:var(--c); opacity:0; transition:opacity .2s; pointer-events:none; }
.card:hover::before { opacity:.04; }
.card .cat, .art .cat { align-self:flex-start; font-weight:900; font-size:12px; letter-spacing:2px; text-transform:uppercase;
        background:var(--c); color:#fff; padding:5px 10px; text-decoration:none; }
.card h3 { font-family:Anton, sans-serif; font-weight:400; font-size:26px; line-height:1.1; text-transform:uppercase; transition:color .2s; }
.card:hover h3 { color:var(--c); }
.card p { color:var(--mute); font-size:15px; }
.card .meta { margin-top:auto; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mute); }
.card .meta::after { content:" →"; display:inline-block; opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s; }
.card:hover .meta::after { opacity:1; transform:none; }
.card-big { padding:32px; box-shadow:8px 8px 0 var(--ink); }
.card-big h3 { font-size:clamp(30px, 4vw, 44px); }
.card-big p { font-size:17px; }
.hero .card-big { transition:transform .2s ease-out, box-shadow .2s; }
.card[hidden] { display:none; }
.cards-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px; }
.latest { padding-top:64px; }
.empty { margin-top:16px; color:var(--mute); font-weight:700; }
.cats { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.cats a { display:block; text-decoration:none; font-weight:900; font-size:13px; letter-spacing:2px; text-transform:uppercase;
          padding:9px 14px; border:2px solid var(--ink); border-left:10px solid var(--c); background:#fff8; transition:background .15s, transform .15s; }
.cats a:hover { background:#fff; transform:translateY(-2px); }

/* Articles list */
.list-head { padding-top:56px; }
.list-head .lede { margin-top:12px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.chip { font:900 13px Inter, sans-serif; letter-spacing:1.5px; text-transform:uppercase; padding:9px 14px; cursor:pointer;
        border:2px solid var(--ink); background:transparent; color:var(--ink); transition:background .15s, color .15s, transform .15s; }
.chip:hover { transform:translateY(-2px); }
.chip.on { background:var(--c, var(--ink)); border-color:var(--c, var(--ink)); color:#fff; }

/* Article page */
.progress { position:fixed; top:0; left:0; right:0; height:4px; z-index:20; background:var(--orange); transform:scaleX(0); transform-origin:left; }
body:not(:has(.art)) .progress { display:none; }
.art { max-width:760px; margin:0 auto; padding:56px 16px 0; }
.crumbs { font-size:13px; font-weight:700; color:var(--mute); margin-bottom:14px; }
.crumbs a { text-decoration:none; } .crumbs a:hover { text-decoration:underline; }
.art-head h1 { font-size:clamp(40px, 6vw, 68px); margin:18px 0 16px; }
.art-sum { font-size:21px; color:var(--mute); font-weight:500; }
.art .meta { margin-top:18px; padding-bottom:22px; border-bottom:2px solid var(--ink); font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mute); }
.art-img { width:100%; margin-top:28px; border:2px solid var(--ink); }
.credit { font-size:12px; color:var(--mute); margin-top:6px; }
.prose { font-size:19px; line-height:1.7; margin-top:28px; }
.prose > * + * { margin-top:20px; }
.prose h2 { font-family:Anton, sans-serif; font-weight:400; font-size:34px; line-height:1.1; text-transform:uppercase; margin-top:44px; }
.prose h3 { font-size:22px; font-weight:900; margin-top:32px; }
.prose ul, .prose ol { padding-left:24px; }
.prose li + li { margin-top:8px; }
.prose li::marker { color:var(--c); font-weight:900; }
.prose blockquote { border-left:8px solid var(--c); padding:6px 0 6px 20px; font-size:22px; font-weight:700; }
.prose a { text-decoration-color:var(--c); text-decoration-thickness:2px; text-underline-offset:3px; }
.prose img { border:2px solid var(--ink); }
.sources { margin-top:44px; padding:22px; border:2px solid var(--ink); background:#fff; }
.sources h2 { font-size:13px; font-weight:900; letter-spacing:3px; text-transform:uppercase; }
.sources ul { margin-top:10px; padding-left:20px; font-size:15px; }
.share { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* Get featured */
.featured { margin-top:72px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
            padding-top:56px; padding-bottom:56px; background:#fff; border-block:2px solid var(--ink); }
.kicker-orange { background:var(--orange); color:var(--ink); }
.featured h2 { font-family:Anton, sans-serif; font-weight:400; font-size:clamp(38px, 5vw, 58px); line-height:1; text-transform:uppercase; margin:18px 0 16px; }
.featured-text > p { font-size:17px; color:var(--mute); }
.featured .small { font-size:14px; margin-top:16px; }
.checks { list-style:none; margin-top:20px; display:grid; gap:10px; }
.checks li { display:flex; gap:12px; font-weight:700; }
.checks li::before { content:"✓"; flex:none; width:24px; height:24px; display:grid; place-items:center; background:var(--green); color:#fff; font-size:14px; transition:transform .3s; }
.checks li:hover::before { transform:rotate(-12deg) scale(1.1); }
.feature-form { display:grid; gap:14px; border:2px solid var(--ink); padding:24px; background:var(--cream); box-shadow:8px 8px 0 var(--ink); }
.feature-form label { display:grid; gap:6px; font-weight:900; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.feature-form input, .feature-form textarea { font:500 16px Inter, sans-serif; padding:12px; border:2px solid var(--ink); background:#fff; color:var(--ink); transition:box-shadow .15s; }
.feature-form input:focus, .feature-form textarea:focus { outline:3px solid var(--orange); outline-offset:1px; box-shadow:4px 4px 0 var(--ink); }
.feature-form .btn { justify-self:start; }
.feature-form .small { font-size:13px; color:var(--mute); margin:0; }

/* Useful */
.useful { padding-top:72px; }
.tips { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:24px; }
.tips article { background:#fff; border:2px solid var(--ink); border-top:10px solid var(--c); padding:22px; display:flex; flex-direction:column; gap:8px; transition:transform .15s, box-shadow .15s; }
.tips article:hover { transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink); }
.tips .big { font-family:Anton, sans-serif; font-size:clamp(30px, 3vw, 40px); white-space:nowrap; line-height:1.1; color:var(--c); }
.tips h3 { font-size:18px; font-weight:900; }
.tips .src { margin-top:auto; padding-top:8px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mute); }

/* Rules */
.rules { padding-top:72px; }
.rules-intro { font-size:20px; font-weight:700; color:var(--mute); margin-top:8px; }
.rules ol { list-style:none; counter-reset:r; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; margin-top:24px; }
.rules li { counter-increment:r; display:flex; gap:18px; padding:18px 0; border-top:2px solid var(--ink); font-size:17px; }
.rules li::before { content:counter(r); font-family:Anton, sans-serif; font-size:28px; line-height:1; min-width:28px; color:var(--green); }

/* Collab */
.collab { margin-top:80px; background:var(--ink); color:var(--cream); display:grid; grid-template-columns:1.3fr 1fr; gap:48px; padding-top:64px; padding-bottom:64px; align-items:center; }
.collab h2 { font-family:Anton, sans-serif; font-weight:400; font-size:clamp(40px, 6vw, 64px); text-transform:uppercase; line-height:1; margin-bottom:16px; }
.collab p { font-size:17px; color:#D9D3C4; max-width:560px; }
.collab .small { font-size:14px; color:#9B9585; margin-top:12px; }
.collab-cta { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }

/* Footer */
footer { text-align:center; padding-top:48px; padding-bottom:48px; display:flex; flex-direction:column; align-items:center; gap:10px; }
footer p { font-weight:700; font-style:italic; color:var(--mute); }
footer .small { font-style:normal; font-weight:500; font-size:13px; }

/* ===== Motion ===== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.28s; }
@keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes pop { from { opacity:0; transform:translateY(24px) rotate(2deg) scale(.96); } to { opacity:1; transform:none; } }
.hero-h span { display:inline-block; animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-h span:nth-child(2) { animation-delay:.08s; } .hero-h span:nth-child(3) { animation-delay:.16s; } .hero-h span:nth-child(4) { animation-delay:.24s; }
.hero .kicker { animation:rise .6s both; }
.hero .lede { animation:rise .7s .32s both; }
.hero .cta { animation:rise .7s .4s both; }
.hero .tagline { animation:rise .7s .48s both; }
.hero-feature { animation:pop .8s .3s cubic-bezier(.2,.7,.2,1) both; }
.hero-h em { background:linear-gradient(transparent 78%, rgba(242,107,29,.22) 0) no-repeat 0 0 / 0 100%; animation:sweep .7s .9s forwards; }
.hero-h em.g { background-image:linear-gradient(transparent 78%, rgba(11,122,62,.2) 0); animation-delay:1.05s; }
@keyframes sweep { to { background-size:100% 100%; } }
.anim .rv { opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.anim .rv.in { opacity:1; transform:none; }
.anim .rv.in:is(.card, article):hover { transform:translate(-3px,-3px); transition-delay:0ms; transition-duration:.15s; }
#list .card { animation:rise .4s both; }

/* Responsive */
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:40px; }
  .tips, .cards-grid { grid-template-columns:repeat(2, 1fr); }
  .rules ol, .collab, .featured { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .nav nav { display:none; }
  .nav .btn-ink { margin-left:auto; }
  .brand img, .nav.scrolled .brand img { height:36px; }
  .tips, .cards-grid { grid-template-columns:1fr; }
  .track span { font-size:24px; padding:12px 22px; }
  .feature-form { box-shadow:5px 5px 0 var(--ink); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .hero-h em { background-size:100% 100%; }
  @view-transition { navigation:none; }
}

/* Sponsored & advertise */
.spon { display:inline-block; margin-left:6px; font-weight:900; font-size:11px; letter-spacing:2px; text-transform:uppercase;
        padding:4px 8px; border:2px solid var(--ink); background:#FFE8A3; color:var(--ink); vertical-align:middle; }
.card .spon { align-self:flex-start; margin:0; }
.spon-note { margin-top:20px; padding:12px 16px; border:2px solid var(--ink); background:#FFF3C4; font-weight:700; font-size:15px; }
.feature-cta { margin-top:22px; }
.featured .small a, .collab .small a { font-weight:700; }
.collab .kicker { margin-bottom:16px; }
.offers { list-style:none; margin:20px 0 6px; display:grid; gap:10px; }
.offers li { position:relative; padding-left:26px; color:#D9D3C4; font-size:16px; }
.offers li::before { content:"→"; position:absolute; left:0; color:var(--orange); font-weight:900; }
.offers b { color:var(--cream); }

/* Pagination */
a.chip { text-decoration:none; display:inline-block; }
.pager { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:36px; }
.pg { min-width:44px; text-align:center; padding:10px 14px; border:2px solid var(--ink); font-weight:900; font-size:14px;
      text-decoration:none; background:#fff; transition:transform .15s, box-shadow .15s; }
.pg:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.pg.on { background:var(--ink); color:var(--cream); }
.list-head .sec span { font-family:Inter, sans-serif; font-size:18px; color:var(--mute); text-transform:none; }