/* 28mars.com.au — bespoke stylesheet. One file, one prefix (m28-), no framework. */

:root{
  --m28-bg:#090c17;
  --m28-bg-soft:#0e1428;
  --m28-panel:#131a30;
  --m28-panel-alt:#161d38;
  --m28-border:#26304f;
  --m28-gold:#eab92d;
  --m28-gold-dark:#c79810;
  --m28-amber:#ffc107;
  --m28-rust:#e2622f;
  --m28-text:#f3efe4;
  --m28-text-dim:#aab0c6;
  --m28-text-faint:#7c839c;
  --m28-green:#3fb56f;
  --m28-radius:14px;
  --m28-radius-sm:8px;
  --m28-maxw:1180px;
  --m28-header-h:66px;
  font-size:16px;
}

*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  background:var(--m28-bg);
  color:var(--m28-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  min-height:100vh;
  position:relative;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--m28-gold);outline-offset:2px;}

/* cosmic backdrop: layered radial "stars" + soft rust/gold glow, no external image */
body{
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 8%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 62%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 42%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 78%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 88%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1000px 500px at 85% -5%, rgba(226,98,47,.16), transparent 60%),
    radial-gradient(900px 480px at -5% 10%, rgba(234,185,45,.10), transparent 55%),
    var(--m28-bg);
  background-repeat:no-repeat;
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed,fixed,fixed,fixed;
}

.m28-wrap{max-width:var(--m28-maxw);margin:0 auto;padding:0 20px;}

/* ---------- header ---------- */
.m28-header{
  position:sticky;top:0;z-index:60;
  height:var(--m28-header-h);
  display:flex;align-items:center;
  background:#080b16; /* opaque — no transparency on sticky header */
  border-bottom:1px solid var(--m28-border);
}
.m28-header__inner{
  max-width:var(--m28-maxw);margin:0 auto;padding:0 20px;
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.m28-logo{display:flex;align-items:center;gap:8px;min-width:0;}
.m28-logo img{height:30px;width:auto;}
.m28-nav-desktop{display:none;}
.m28-nav-desktop ul{display:flex;gap:22px;list-style:none;align-items:center;}
.m28-nav-desktop a{
  font-size:.92rem;color:var(--m28-text-dim);white-space:nowrap;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.m28-nav-desktop a:hover,.m28-nav-desktop a[aria-current="page"]{color:var(--m28-text);border-bottom-color:var(--m28-gold);}
.m28-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,var(--m28-gold),var(--m28-gold-dark));
  color:#1a1200;font-weight:700;border-radius:999px;
  padding:9px 18px;font-size:.9rem;white-space:nowrap;
  box-shadow:0 6px 18px rgba(234,185,45,.25);
}
.m28-cta:hover{filter:brightness(1.06);}
.m28-header__actions{display:flex;align-items:center;gap:10px;}

.m28-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;border:1px solid var(--m28-border);border-radius:8px;
  background:var(--m28-panel);cursor:pointer;padding:0;flex:0 0 auto;
}
.m28-burger span{display:block;width:18px;height:2px;background:var(--m28-text);margin:0 auto;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.m28-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.m28-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.m28-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile off-canvas nav — sibling of header, NOT nested inside it (avoids backdrop-filter
   containing-block bleed on translateX panels) */
.m28-mobile-nav{
  position:fixed;top:0;right:0;height:100%;width:min(84vw,340px);
  background:var(--m28-bg-soft);border-left:1px solid var(--m28-border);
  transform:translateX(100%);transition:transform .25s ease;
  z-index:70;padding:20px;overflow-y:auto;
}
.m28-mobile-nav.is-open{transform:translateX(0);}
.m28-mobile-nav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.m28-mobile-nav__close{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--m28-border);
  background:var(--m28-panel);color:var(--m28-text);font-size:1.1rem;line-height:1;cursor:pointer;
}
.m28-mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:2px;}
.m28-mobile-nav a{
  display:block;padding:12px 8px;border-bottom:1px solid var(--m28-border);
  color:var(--m28-text);font-size:1rem;
}
.m28-mobile-nav .m28-cta{margin-top:16px;width:100%;}
.m28-scrim{
  position:fixed;inset:0;background:rgba(4,6,12,.6);z-index:65;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.m28-scrim.is-open{opacity:1;pointer-events:auto;}
body.m28-nav-open{overflow:hidden;}

@media (min-width:861px){
  .m28-nav-desktop{display:block;}
  .m28-burger,.m28-mobile-nav,.m28-scrim{display:none;}
}

/* ---------- hero ---------- */
.m28-hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--m28-border);
  background:
    radial-gradient(720px 360px at 82% 0%, rgba(226,98,47,.22), transparent 60%),
    radial-gradient(680px 340px at 8% 100%, rgba(234,185,45,.16), transparent 60%),
    var(--m28-bg-soft);
}
.m28-hero__inner{
  max-width:var(--m28-maxw);margin:0 auto;padding:44px 20px 40px;
  display:grid;gap:26px;
}
.m28-hero__kicker{
  display:inline-flex;align-items:center;gap:8px;width:max-content;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--m28-gold);background:rgba(234,185,45,.1);
  border:1px solid rgba(234,185,45,.35);border-radius:999px;padding:5px 12px;
}
.m28-hero__lead{font-size:1.06rem;color:var(--m28-text-dim);max-width:62ch;margin:12px 0 0;}
.m28-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
.m28-btn-ghost{
  display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;
  border:1px solid var(--m28-border);color:var(--m28-text);font-size:.9rem;background:var(--m28-panel);
}
.m28-orbit{
  position:relative;width:100%;aspect-ratio:1/1;max-width:280px;justify-self:center;
}
.m28-orbit::before,.m28-orbit::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(234,185,45,.35);
}
.m28-orbit::after{inset:14%;border-color:rgba(226,98,47,.3);}
.m28-orbit__core{
  position:absolute;inset:30%;border-radius:50%;
  background:conic-gradient(from 210deg,var(--m28-gold),var(--m28-rust),var(--m28-gold-dark),var(--m28-gold));
  box-shadow:0 0 40px rgba(234,185,45,.35);
  display:flex;align-items:center;justify-content:center;
}
.m28-orbit__core span{
  background:var(--m28-bg);border-radius:50%;width:74%;height:74%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.4rem;color:var(--m28-gold);
}
@media (min-width:720px){
  .m28-hero__inner{grid-template-columns:1.4fr .8fr;align-items:center;}
}

/* ---------- generic section / article layout ---------- */
.m28-main{position:relative;}
.m28-section{padding:40px 0;}
.m28-section--tight{padding:28px 0;}
.m28-section-head{max-width:70ch;margin-bottom:22px;}
.m28-eyebrow{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--m28-gold);
}
.m28-section-head p{color:var(--m28-text-dim);margin-top:8px;}

.m28-breadcrumb{padding-top:14px;}
.m28-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:.82rem;color:var(--m28-text-faint);}
.m28-breadcrumb a{color:var(--m28-text-dim);}
.m28-breadcrumb li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--m28-text-faint);}

.m28-article{padding-top:26px;padding-bottom:10px;}
.m28-article h1{
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.18;margin:6px 0 14px;color:#fff;
}
.m28-article h2{font-size:1.35rem;margin:34px 0 12px;color:#fff;}
.m28-article h3{font-size:1.08rem;margin:20px 0 8px;color:var(--m28-gold);}
.m28-article p{color:var(--m28-text-dim);margin:0 0 14px;max-width:74ch;}
.m28-article ul,.m28-article ol{color:var(--m28-text-dim);margin:0 0 16px;padding-left:1.3em;max-width:74ch;}
.m28-article li{margin-bottom:6px;}
.m28-article strong{color:var(--m28-text);}
.m28-lede{font-size:1.05rem;color:var(--m28-text);}
.m28-article > .m28-eyebrow{display:block;margin:4px 0 2px;}

/* content links inside article body — accented, underlined, distinct hover */
.m28-article p a,
.m28-article li a,
.m28-faq-a a,
.m28-callout a{
  color:var(--m28-gold);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(234,185,45,.5);
}
.m28-article p a:hover,
.m28-article li a:hover,
.m28-faq-a a:hover,
.m28-callout a:hover{
  color:var(--m28-amber);text-decoration-color:var(--m28-amber);
}

/* ---------- author box ---------- */
.m28-authorbox{
  display:flex;align-items:center;gap:14px;
  background:var(--m28-panel);border:1px solid var(--m28-border);border-radius:var(--m28-radius);
  padding:14px 16px;margin:22px 0;max-width:74ch;
}
.m28-authorbox img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--m28-border);
}
.m28-authorbox__name{margin:0;font-weight:700;color:#fff;font-size:.95rem;}
.m28-authorbox__name a{color:#fff;text-decoration:none;}
.m28-authorbox__name a:hover{color:var(--m28-gold);text-decoration:underline;}
.m28-authorbox__role{margin:2px 0 0;color:var(--m28-text-faint);font-size:.78rem;}
.m28-authorbox p{margin:0;color:var(--m28-text-dim);font-size:.86rem;}
.m28-authorbox--profile img{width:96px;height:96px;}
@media (min-width:620px){
  .m28-authorbox--profile img{width:128px;height:128px;}
}

/* cards / panels */
.m28-grid{display:grid;gap:16px;}
.m28-card{
  background:var(--m28-panel);border:1px solid var(--m28-border);border-radius:var(--m28-radius);
  padding:18px;min-width:0;
}
.m28-card p.m28-card__title{font-weight:700;color:#fff;margin:0 0 6px;font-size:1rem;}
.m28-card p{color:var(--m28-text-dim);margin:0;font-size:.92rem;}
.m28-card__icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(234,185,45,.12);color:var(--m28-gold);font-weight:800;margin-bottom:10px;
}

@media (min-width:620px){.m28-grid--3{grid-template-columns:repeat(3,1fr);}}
@media (min-width:560px){.m28-grid--2{grid-template-columns:repeat(2,1fr);}}

/* ---------- game tiles ---------- */
.m28-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;}
.m28-chip{
  border:1px solid var(--m28-border);background:var(--m28-panel);color:var(--m28-text-dim);
  border-radius:999px;padding:7px 14px;font-size:.84rem;cursor:pointer;
}
.m28-chip.is-active{background:var(--m28-gold);border-color:var(--m28-gold);color:#1a1200;font-weight:700;}

.m28-tiles{
  display:grid;gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:560px){.m28-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:860px){.m28-tiles{grid-template-columns:repeat(4,minmax(0,1fr));}}

.m28-tile{
  background:var(--m28-panel);border:1px solid var(--m28-border);border-radius:var(--m28-radius-sm);
  overflow:hidden;min-width:0;display:block;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.m28-tile:hover,.m28-tile:focus-visible{
  transform:translateY(-3px);border-color:var(--m28-gold);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.m28-tile:hover .m28-tile__name{color:var(--m28-gold);}
.m28-tile__art{aspect-ratio:1/1;overflow:hidden;background:#0c1122;}
.m28-tile__art img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease;}
.m28-tile:hover .m28-tile__art img{transform:scale(1.06);}
.m28-tile__body{padding:10px 12px 12px;min-width:0;}
.m28-tile__name{
  font-weight:700;font-size:.86rem;color:#fff;margin:0 0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.m28-tile__tag{font-size:.72rem;color:var(--m28-text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}

/* ---------- tables ---------- */
.m28-table-wrap{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch;}
.m28-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:520px;}
.m28-table caption{text-align:left;color:var(--m28-text-faint);font-size:.8rem;margin-bottom:8px;}
.m28-table th,.m28-table td{
  border:1px solid var(--m28-border);padding:10px 12px;text-align:left;font-size:.88rem;
  overflow-wrap:anywhere;color:var(--m28-text-dim);
}
.m28-table th{background:var(--m28-panel-alt);color:#fff;font-weight:700;}
.m28-table td.m28-num{font-variant-numeric:tabular-nums;color:var(--m28-text);}
@media (max-width:560px){
  .m28-table th,.m28-table td{padding:7px 8px;font-size:.8rem;}
}

/* ---------- FAQ accordion ---------- */
.m28-faq{max-width:74ch;}
.m28-faq-item{border-bottom:1px solid var(--m28-border);}
.m28-faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--m28-text);
  padding:14px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  cursor:pointer;font-size:.98rem;font-weight:600;
}
.m28-faq-q::after{content:"+";color:var(--m28-gold);font-size:1.2rem;flex:0 0 auto;}
.m28-faq-item.is-open .m28-faq-q::after{content:"–";}
.m28-faq-a{display:none;color:var(--m28-text-dim);padding:0 0 16px;margin:0;max-width:70ch;}
.m28-faq-item.is-open .m28-faq-a{display:block;}

/* ---------- badges / RG ---------- */
.m28-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;
  border:1px solid var(--m28-border);border-radius:999px;padding:5px 12px;color:var(--m28-text-dim);
}
.m28-rg{
  border:1px solid var(--m28-border);border-radius:var(--m28-radius);
  padding:16px 18px;background:var(--m28-panel);margin:26px 0 6px;
}
.m28-rg p{margin:0;color:var(--m28-text-dim);font-size:.86rem;max-width:none;}
.m28-rg strong{color:var(--m28-text);}

/* callouts */
.m28-callout{
  border-left:3px solid var(--m28-gold);background:rgba(234,185,45,.06);
  padding:14px 16px;border-radius:0 var(--m28-radius-sm) var(--m28-radius-sm) 0;margin:18px 0;
}
.m28-callout p{margin:0;color:var(--m28-text-dim);}

/* ---------- footer ---------- */
.m28-footer{border-top:1px solid var(--m28-border);background:var(--m28-bg-soft);margin-top:30px;}
.m28-footer__top{
  max-width:var(--m28-maxw);margin:0 auto;padding:36px 20px 20px;
  display:grid;gap:28px;
}
@media (min-width:720px){.m28-footer__top{grid-template-columns:1.3fr 1fr 1fr;}}
.m28-footer__brand p{color:var(--m28-text-dim);font-size:.88rem;max-width:42ch;}
.m28-footer h2{display:none;} /* guard: no heading tags in footer, ever */
.m28-footer__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--m28-text-faint);margin:0 0 10px;}
.m28-footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.m28-footer a{color:var(--m28-text-dim);font-size:.9rem;}
.m28-footer a:hover{color:var(--m28-gold);}
.m28-footer__bottom{
  border-top:1px solid var(--m28-border);
  max-width:var(--m28-maxw);margin:0 auto;padding:16px 20px 30px;
  display:flex;flex-direction:column;gap:8px;
}
.m28-footer__bottom p{margin:0;color:var(--m28-text-faint);font-size:.78rem;}

/* ---------- utility ---------- */
.m28-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}