.macro-hero{overflow:hidden;background:radial-gradient(circle at 78% 40%,rgba(255,128,0,.13),transparent 34%),linear-gradient(135deg,#120f0d,#1b1613)}
.macro-hero h1 em{font-style:normal;color:var(--legendary-bright);text-shadow:0 0 24px rgba(255,128,0,.28)}
.macro-hero-notes{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.macro-hero-notes span{border:1px solid rgba(255,128,0,.26);background:rgba(255,128,0,.07);color:#d9c8ba;padding:7px 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.macro-nav-shell{position:sticky;top:72px;z-index:50;background:rgba(18,15,13,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.macro-nav{display:flex;gap:7px;overflow-x:auto;padding-top:11px;padding-bottom:11px;scrollbar-width:thin}.macro-jump{flex:0 0 auto;padding:7px 11px;border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;transition:color .15s ease,border-color .15s ease,background .15s ease}.macro-jump:hover,.macro-jump.active{color:#1a0d00;background:var(--legendary);border-color:var(--legendary)}
.macro-page{max-width:1120px;padding-top:34px;padding-bottom:80px}
.macro-note{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:18px 20px;margin-bottom:38px;border-left:3px solid var(--legendary);background:rgba(255,128,0,.06)}.macro-note strong{font-family:"Russo One",sans-serif;color:var(--legendary-bright)}.macro-note p{color:var(--muted);font-size:14px}

/* "Read what modifier macros actually do" callout — links every class page
   back to the fundamentals section on the /macros/ hub. Styled as its own
   distinct, slightly brighter card so it reads as an invitation, not another
   macro entry. */
.macro-read-more{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;margin:0 0 34px;padding:20px 24px;border:1px solid color-mix(in srgb,var(--macro-accent,var(--legendary)) 38%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--macro-accent,var(--legendary)) 10%,var(--surface)),var(--surface))}
.macro-read-more-text{display:flex;align-items:center;gap:14px;min-width:0}
.macro-read-more-ico{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--macro-accent,var(--legendary)) 16%,transparent);color:var(--macro-accent,var(--legendary-bright));box-shadow:0 0 0 1px color-mix(in srgb,var(--macro-accent,var(--legendary)) 40%,transparent)}
.macro-read-more-ico svg{width:19px;height:19px}
.macro-read-more-copy{display:flex;flex-direction:column;min-width:0}
.macro-read-more strong{font:700 14.5px/1.4 "Chakra Petch",sans-serif;color:var(--text)}
.macro-read-more-desc{font-size:12.5px;color:var(--muted);margin-top:2px}
.macro-read-more .btn{flex:0 0 auto;border-color:var(--macro-accent,var(--legendary));color:var(--macro-accent,var(--legendary-bright))}
.macro-read-more .btn:hover{background:color-mix(in srgb,var(--macro-accent,var(--legendary)) 14%,transparent)}

.macro-class{scroll-margin-top:150px;padding:32px 0 52px;border-top:1px solid var(--line-soft)}.macro-class:first-of-type{border-top:0}
.macro-class-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}.macro-class-title h2{font:400 clamp(26px,4vw,42px)/1 "Russo One",sans-serif}.macro-class-title span{order:2;color:var(--legendary-bright);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.macro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.macro-subhead{grid-column:1/-1;margin:22px 0 2px;padding-bottom:8px;border-bottom:1px solid rgba(255,128,0,.22);font:700 18px/1.3 "Chakra Petch",sans-serif;color:var(--legendary-bright)}

/* ---- the macro card itself: a real layered glow (same 3-layer formula the
   site already uses on .guide-shot screenshots), lit up properly on hover
   instead of the flat, always-on hairline it had before. ---- */
.macro-card{position:relative;min-width:0;padding:20px 20px 18px;border:1px solid color-mix(in srgb,var(--macro-accent,var(--legendary)) 30%,var(--line));background:linear-gradient(160deg,rgba(38,31,27,.97),rgba(18,15,13,.99));box-shadow:inset 0 1px rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.28);overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.macro-card:hover{border-color:var(--macro-accent,var(--legendary));transform:translateY(-3px);
  box-shadow:inset 0 1px rgba(255,255,255,.04),
    0 0 0 1px color-mix(in srgb,var(--macro-accent,var(--legendary)) 55%,transparent),
    0 0 22px 2px color-mix(in srgb,var(--macro-accent,var(--legendary)) 45%,transparent),
    0 0 60px 8px color-mix(in srgb,var(--macro-accent,var(--legendary)) 22%,transparent);
}
.macro-card::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--macro-accent,var(--legendary)) 85%,white 0%),transparent);box-shadow:0 0 12px color-mix(in srgb,var(--macro-accent,var(--legendary)) 75%,transparent);opacity:.8;transition:opacity .25s ease}
.macro-card:hover::before{opacity:1}
.macro-card::after{content:attr(data-index);position:absolute;right:14px;top:8px;font:800 34px/1 "Russo One",sans-serif;color:color-mix(in srgb,var(--macro-accent,var(--legendary)) 16%,transparent);pointer-events:none;user-select:none}
.macro-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative}
.macro-card h4{margin:2px 0 0;font:700 16.5px/1.3 "Chakra Petch",sans-serif;color:var(--text);max-width:calc(100% - 40px)}
.macro-index{font:700 10px/1 "Chakra Petch",sans-serif;color:var(--faint);letter-spacing:.12em}
.macro-badge{margin-left:8px;padding:2px 6px;border:1px solid rgba(255,200,87,.28);color:#ffc857;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.macro-card p{margin:12px 0 14px;color:var(--muted);font-size:13.5px;line-height:1.6;position:relative}
.macro-card p code{color:#ffc58b}
.macro-card pre{margin:0;padding:14px 16px;overflow:auto;border:1px solid rgba(168,154,142,.16);background:#0d0b0a;position:relative}
.macro-card pre::before{content:"MACRO";position:absolute;top:8px;right:12px;font:700 9px/1 "Chakra Petch",sans-serif;letter-spacing:.14em;color:var(--faint)}
.macro-card code{font-family:"Chakra Petch",ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.65;color:#f4d8b9;white-space:pre-wrap}
.macro-copy{flex:0 0 auto;border:1px solid var(--macro-accent,var(--legendary));background:color-mix(in srgb,var(--macro-accent,var(--legendary)) 9%,transparent);color:var(--macro-accent,var(--legendary-bright));padding:8px 10px;font:700 10px/1 "Chakra Petch",sans-serif;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;transition:background .15s ease,color .15s ease}
.macro-copy:hover,.macro-copy.copied{background:color-mix(in srgb,var(--macro-accent,var(--legendary)) 24%,transparent);color:var(--macro-accent,var(--legendary-bright));box-shadow:0 0 12px color-mix(in srgb,var(--macro-accent,var(--legendary)) 40%,transparent)}
.macro-card .spell{font-weight:600}

.macro-explainer{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr;gap:10px 24px;margin-bottom:14px;padding:22px;border:1px solid rgba(255,128,0,.22);background:rgba(255,128,0,.045)}.macro-explainer h3{margin:0;color:var(--legendary-bright);font:700 16px/1.45 "Chakra Petch",sans-serif}.macro-explainer p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.65}
@media(prefers-reduced-motion:reduce){.macro-card,.macro-card:hover{transition:none;transform:none}}
@media(max-width:760px){
  .macro-nav-shell{top:72px}.macro-page{padding-left:18px;padding-right:18px}.macro-grid{grid-template-columns:1fr}
  .macro-note,.macro-explainer{grid-template-columns:1fr;gap:6px}.macro-class-title{align-items:start}
  .macro-card{padding:17px 16px}.macro-card::after{font-size:26px}.macro-card-head{gap:10px}.macro-copy{padding:7px 9px}
  .macro-hero-notes span{font-size:10px}
  .macro-read-more{flex-direction:column;align-items:stretch;text-align:left}.macro-read-more .btn{align-self:flex-start}
}