:root{--ink:#10110f;--paper:#f3f0e8;--card:#fffdf7;--acid:#d9ff57;--muted:#6d7069;--line:#d8d5cc}
*{box-sizing:border-box}html{background:#dedbd3}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;max-width:520px;min-height:100vh;margin-inline:auto;box-shadow:0 0 40px #00000018;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}.site-header{height:72px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;background:var(--paper);z-index:5}
.brand{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:900;line-height:.88;letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:var(--acid);font:900 20px Georgia}
.menu{border:0;background:var(--ink);color:white;width:38px;height:38px;font-size:17px}.nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--ink);padding:18px}.nav.open{display:grid;gap:16px}.nav a{color:white;font-weight:700;font-size:14px}
.hero{padding:44px 20px 38px;background:var(--ink);color:white;position:relative;overflow:hidden}.hero:after{content:"M";position:absolute;right:-18px;bottom:-65px;font:900 210px Georgia;color:#ffffff08;transform:rotate(-10deg)}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#73776e}.hero .eyebrow{color:var(--acid)}h1,h2,h3,p{margin-top:0}.hero h1{font:900 48px/0.92 Georgia,serif;letter-spacing:-.045em;margin:16px 0}.hero h1 em{color:var(--acid);font-weight:400}.hero p{color:#c8c9c5;line-height:1.55;max-width:390px}
.primary{display:inline-block;background:var(--acid);color:var(--ink);font-size:12px;font-weight:900;padding:14px 18px;text-transform:uppercase;letter-spacing:.06em}
.category-strip{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.category-strip a{padding:15px 18px;font-size:11px;font-weight:900;text-transform:uppercase;border-right:1px solid var(--line);border-top:1px solid var(--line)}
.section{padding:34px 18px}.section-head{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;margin-bottom:22px}.section-head>span{font:italic 22px Georgia;color:#a3a69d}.section-head h2{font:900 27px/1 Georgia;margin:5px 0}
.featured{display:grid;gap:18px}.feature-art,.article-art,.thumb{background:linear-gradient(135deg,#252822,#0c0d0b);color:white;position:relative;overflow:hidden}.feature-art{height:230px;padding:18px}.feature-art:after,.article-art:after,.thumb:after{content:"";position:absolute;width:180px;height:180px;border:28px solid var(--acid);border-radius:50%;right:-60px;bottom:-75px}.feature-art span,.article-art span,.thumb span{font-size:10px;font-weight:900;letter-spacing:.15em;color:var(--acid)}.feature-art strong{position:absolute;bottom:14px;left:18px;font:900 80px Georgia;color:#ffffff16}
.meta,.article-meta{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}.featured h2{font:900 29px/1.03 Georgia;margin:8px 0}.featured p,.card p{font-size:13px;line-height:1.5;color:var(--muted)}.read{font-size:11px;font-weight:900;text-transform:uppercase;border-bottom:2px solid var(--acid)}
.cards{display:grid;gap:22px}.card{background:var(--card);border:1px solid var(--line)}.thumb{height:155px;padding:15px}.thumb b{position:absolute;left:15px;bottom:15px;width:75%;font:900 24px/1 Georgia}.thumb:after{width:100px;height:100px;border-width:18px}.card-copy{padding:16px}.card h3{font:900 22px/1.05 Georgia;margin:7px 0}.newsletter{margin:10px 18px 36px;padding:28px 22px;background:var(--acid)}.newsletter h2{font:900 30px/1 Georgia;margin:8px 0}.newsletter p{font-size:13px;line-height:1.5}
.page-hero{padding:42px 20px 28px;border-bottom:1px solid var(--line)}.page-hero h1,.legal h1{font:900 44px/.95 Georgia;margin:10px 0}.page-hero p{color:var(--muted)}
.article{padding:28px 20px 44px}.back{font-size:11px;font-weight:900}.article-meta{margin-top:36px}.article h1{font:900 42px/.98 Georgia;letter-spacing:-.03em;margin:10px 0 15px}.dek{font-size:17px;line-height:1.5;color:#555a52}.article-art{height:240px;margin:26px 0;padding:18px}.article-art strong{position:absolute;right:20px;bottom:-20px;font:900 180px Georgia;color:#ffffff10}.article-copy{font:16px/1.72 Georgia,serif}.article-copy h2{font:900 27px/1.05 Arial;margin:36px 0 12px}.article-copy ul{padding-left:22px}.article-copy li{margin:10px 0}.updated{border-top:1px solid var(--line);margin-top:35px;padding-top:15px;font-size:11px;color:var(--muted)}
.legal{padding:45px 20px;min-height:60vh}.legal h2{margin-top:34px}.legal p{line-height:1.7;color:#555a52}
footer{background:#171916;color:#d7d8d4;padding:32px 20px 95px}.footer-brand{font:900 20px Georgia;color:white}.footer-links{display:flex;flex-wrap:wrap;gap:12px 18px;margin:24px 0}.footer-links a{font-size:11px;font-weight:700}.copyright{font-size:10px;color:#7d8178}
.ad-slot[hidden]{display:none!important}.bottom-anchor{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);z-index:20}
@media(min-width:700px){body{max-width:520px}}


/* Magic Gameplay V1.1 — mobile UX refinements */
.hero{padding-top:34px;padding-bottom:30px}
.hero h1{font-size:44px;margin-top:13px;margin-bottom:14px}
.hero p{margin-bottom:18px}
.category-strip a{
  min-height:50px;
  display:flex;
  align-items:center;
  padding-top:14px;
  padding-bottom:14px
}
.section{padding-top:30px;padding-bottom:30px}
.section-head{margin-bottom:18px}
.cards{gap:26px}
.card-copy{padding:18px}
.card p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.featured{gap:16px}
.feature-art{height:210px}
.article{padding-top:24px}
.article-art{height:220px}
.article-copy p{margin-bottom:20px}

/* Keep future GAM inventory separated from navigation / touch targets. */
.ad-slot:not([hidden]){
  margin:28px auto;
  text-align:center;
  clear:both
}
.bottom-anchor:not([hidden]){
  margin:0;
  padding-top:0;
  padding-bottom:max(0px,env(safe-area-inset-bottom));
}

/* Slightly tighter layout on smaller in-app WebViews. */
@media(max-width:390px){
  .hero{padding:30px 18px 27px}
  .hero h1{font-size:40px}
  .section{padding-left:16px;padding-right:16px}
  .category-strip a{padding-left:16px;padding-right:12px}
  .article h1{font-size:38px}
}