:root {
  --magnet-ink: #e8f1f0;
  --magnet-muted: #9fb1ae;
  --magnet-panel: #111716;
  --magnet-line: rgba(111, 255, 211, .28);
  --magnet-green: #28f70a;
  --magnet-cyan: #5ddcff;
  --magnet-warm: #f6e8c8;
}

.magnet-page { background: #090d0c; color: var(--magnet-ink); }
.magnet-page main { overflow: clip; }
.magnet-page .section { background: #090d0c; }

.magnet-hero {
  min-height: min(820px, 88svh);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
  padding: clamp(7rem, 12vw, 10rem) max(5vw, calc((100vw - 1280px) / 2));
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 44%, rgba(25, 243, 5, .11), transparent 27rem),
    linear-gradient(110deg, rgba(4, 9, 8, .98), rgba(12, 21, 19, .91)),
    repeating-linear-gradient(0deg, transparent 0 64px, rgba(112,255,216,.035) 64px 66px);
  border-bottom: 1px solid var(--magnet-line);
}

.magnet-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,.025) 72% 72.2%, transparent 72.2%);
  pointer-events: none;
}

.magnet-hero-copy { max-width: 760px; }
.magnet-hero .brand-page { width: min(380px, 65vw); margin: .7rem 0 1.4rem; }
.magnet-hero h1 { max-width: 850px; margin: 0 0 1.4rem; font-size: clamp(3rem, 7vw, 7.2rem); line-height: .94; letter-spacing: -.045em; }
.hero-lede { max-width: 700px; color: #c9d4d1; font-size: clamp(1.08rem, 1.8vw, 1.42rem); line-height: 1.55; margin: 0 0 2rem; }

.hero-magnet-stack { min-height: 600px; position: relative; perspective: 900px; }
.hero-magnet {
  position: absolute;
  display: block;
  border: 7px solid #f2ead7;
  border-bottom-width: 30px;
  background-color: #f2ead7;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: 0 24px 46px rgba(0,0,0,.53), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .35s ease;
}
.hero-magnet::after { content: attr(data-label); position: absolute; left: 0; right: 0; bottom: -24px; color: #10201c; text-align: center; font: 800 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.hero-magnet:hover { z-index: 20; transform: rotate(0deg) translateY(-5px) scale(1.045); }
.hero-magnet-one { z-index: 2; width: 28%; aspect-ratio: .834; left: 1%; top: 4%; transform: rotate(-7deg); background-image: url('/assets/magnets/golf/01-145.webp'); }
.hero-magnet-two { z-index: 1; width: 30%; aspect-ratio: 1; left: 34%; top: 1%; transform: rotate(3deg); background-image: url('/assets/magnets/pool/01-142.webp'); }
.hero-magnet-three { z-index: 3; width: 24%; aspect-ratio: .642; right: 3%; top: 5%; transform: rotate(7deg); background-image: url('/assets/magnets/boxing/02-003.webp'); }
.hero-magnet-four { z-index: 4; width: 27%; aspect-ratio: 1; left: 5%; top: 39%; transform: rotate(5deg); background-image: url('/assets/magnets/darts/01-047.webp'); }
.hero-magnet-five { z-index: 5; width: 27%; aspect-ratio: 1; left: 36%; top: 35%; transform: rotate(-5deg); background-image: url('/assets/magnets/beer/01-030.webp'); }
.hero-magnet-six { z-index: 4; width: 27%; aspect-ratio: .852; right: 3%; top: 39%; transform: rotate(4deg); background-image: url('/assets/magnets/houston-sports/01-013.webp'); }
.hero-magnet-seven { z-index: 7; width: 36%; aspect-ratio: 1.54; left: 14%; bottom: 1%; transform: rotate(-3deg); background-image: url('/assets/magnets/culture/01-005-upright.webp'); }
.hero-magnet-eight { z-index: 6; width: 28%; aspect-ratio: 1.025; right: 12%; bottom: 0; transform: rotate(6deg); background-image: url('/assets/magnets/karaoke/01-127.webp'); }

.magnet-story .section-inner, .magnet-library-section .section-inner, .door-note .section-inner { max-width: 1320px; }
.magnet-story { border-bottom: 1px solid rgba(255,255,255,.08); }
.magnet-story h2, .magnet-library-section h2, .door-note h2 { margin-top: .25rem; }
.story-intro { max-width: 980px; font-size: clamp(1.12rem, 2vw, 1.5rem); line-height: 1.65; color: #d3ddda; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
.method-grid article { position: relative; min-height: 210px; padding: 2rem; border: 1px solid var(--magnet-line); border-radius: 1.2rem; background: linear-gradient(145deg, rgba(18,29,27,.96), rgba(8,13,12,.98)); overflow: hidden; }
.method-grid article::after { content: ""; position: absolute; inset: auto -25% -60% 20%; height: 160px; background: var(--magnet-green); filter: blur(70px); opacity: .06; }
.method-number { font: 700 .76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--magnet-cyan); letter-spacing: .18em; }
.method-grid h3 { margin: 1.4rem 0 .55rem; font-size: 1.5rem; }
.method-grid p { color: var(--magnet-muted); line-height: 1.55; margin: 0; }

.magnet-library-section { padding-top: clamp(4.5rem, 8vw, 8rem); }
.library-heading-row { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.6rem; }
.library-heading-row h2 { margin-bottom: 0; }
.library-note { color: var(--magnet-muted); font-size: .88rem; white-space: nowrap; }
.library-note span { color: var(--magnet-green); font-weight: 800; }

.magnet-filters { display: flex; flex-wrap: wrap; gap: .62rem; position: sticky; top: 76px; z-index: 5; padding: .85rem; margin: 0 -.85rem 2rem; border: 1px solid rgba(93,220,255,.2); border-radius: 1rem; background: rgba(7, 12, 11, .88); box-shadow: 0 12px 35px rgba(0,0,0,.28); backdrop-filter: blur(15px); }
.magnet-filters button { appearance: none; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #d7e2df; background: #151c1b; padding: .7rem 1rem; font: 800 .76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }
.magnet-filters button:hover { transform: translateY(-1px); border-color: var(--magnet-cyan); }
.magnet-filters button.is-active { color: #051004; border-color: var(--magnet-green); background: var(--magnet-green); box-shadow: 0 0 22px rgba(40,247,10,.18); }

.magnet-series { margin: 0 0 2rem; padding: 1rem; border: 1px solid rgba(93,220,255,.28); border-radius: 1rem; background: linear-gradient(145deg, rgba(18,29,27,.92), rgba(8,13,12,.98)); }
.magnet-series[hidden] { display: none; }
.magnet-series-title { margin: 0 0 .9rem; color: var(--magnet-cyan); font: 800 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.magnet-series-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.72rem, 1.5vw, 1.2rem); align-items: start; }
.magnet-series-grid .magnet-card { margin: 0; }

.magnet-grid { columns: 5 190px; column-gap: clamp(.72rem, 1.5vw, 1.2rem); }
.magnet-card { appearance: none; display: inline-block; break-inside: avoid; position: relative; width: 100%; margin: 0 0 clamp(.72rem, 1.5vw, 1.2rem); padding: 0; border: 0; border-radius: .72rem; overflow: hidden; background: #eef0e9; color: #07100e; box-shadow: 0 11px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.12); cursor: zoom-in; transform: perspective(900px) rotate(var(--tilt, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: center; transition: transform .2s ease, box-shadow .2s ease; }
.magnet-card:nth-child(7n + 1) { --tilt: -.55deg; }
.magnet-card:nth-child(7n + 3) { --tilt: .45deg; }
.magnet-card:nth-child(7n + 5) { --tilt: -.3deg; }
.magnet-card:hover, .magnet-card:focus-visible { transform: perspective(900px) rotate(0deg) translateY(-5px) scale(1.018) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 2; outline: 2px solid var(--magnet-cyan); outline-offset: 3px; box-shadow: 0 20px 38px rgba(0,0,0,.52), 0 0 28px rgba(93,220,255,.13); }
.magnet-card img { display: block; width: 100%; height: auto; background: #f2efe4; }
.magnet-card .magnet-label { position: absolute; left: .48rem; bottom: .48rem; padding: .34rem .48rem; border-radius: .4rem; background: rgba(5,10,9,.8); color: #fff; font: 800 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(8px); }
.magnet-card:hover .magnet-label, .magnet-card:focus-visible .magnet-label { opacity: 1; transform: none; }
.magnet-card[hidden] { display: none; }

.door-note { border-top: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 10% 60%, rgba(93,220,255,.06), transparent 35%), #090d0c; }
.door-note-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center; }
.door-note-inner p { max-width: 760px; color: var(--magnet-muted); }
.door-note .actions { justify-content: end; }


.magnet-modal { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 1px solid rgba(93,220,255,.35); border-radius: 1.2rem; background: rgba(8,12,11,.98); color: #fff; box-shadow: 0 35px 90px rgba(0,0,0,.8); overflow: hidden; }
.magnet-modal::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(10px); }
.modal-art { display: grid; place-items: center; min-height: min(66svh, 760px); padding: clamp(1rem, 4vw, 3rem); background: linear-gradient(135deg, #1b2422, #0c1110); }
.modal-art img { display: block; max-width: 100%; max-height: 68svh; width: auto; height: auto; border-radius: .45rem; box-shadow: 0 20px 55px rgba(0,0,0,.58); background: #f1eee4; }
.modal-caption { padding: 1rem 5rem 1.2rem; border-top: 1px solid rgba(255,255,255,.1); text-align: center; }
.modal-caption h2 { margin: .25rem 0; font-size: clamp(1.25rem, 3vw, 2rem); }
.modal-caption p:last-child { margin: 0; color: var(--magnet-muted); font-size: .78rem; }
.modal-close, .modal-nav { position: absolute; z-index: 3; appearance: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(5,10,9,.85); color: #fff; font: 400 2rem/1 system-ui; cursor: pointer; backdrop-filter: blur(10px); }
.modal-close { top: .8rem; right: .8rem; }
.modal-nav { top: 50%; transform: translateY(-50%); }
.modal-prev { left: .8rem; }
.modal-next { right: .8rem; }
.modal-close:hover, .modal-nav:hover { border-color: var(--magnet-green); color: var(--magnet-green); }

.noscript-note { padding: 1rem; border: 1px solid #d58f42; color: #ffe3bd; }

@media (max-width: 1050px) {
  .magnet-hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-magnet-stack { min-height: 560px; max-width: 680px; width: 100%; margin-inline: auto; }
  .magnet-grid { columns: 4 170px; }
}

@media (max-width: 760px) {
  .magnet-hero { padding: 7.2rem 1.2rem 4rem; gap: 1.5rem; }
  .magnet-hero h1 { font-size: clamp(3rem, 14vw, 5.2rem); }
  .hero-magnet-stack { min-height: 460px; }
  .hero-magnet { border-width: 5px; border-bottom-width: 24px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-grid article { min-height: 0; }
  .library-heading-row { display: block; }
  .library-note { white-space: normal; }
  .magnet-filters { top: 58px; flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.1rem; border-radius: 0; padding-inline: 1.1rem; scrollbar-width: none; }
  .magnet-filters::-webkit-scrollbar { display: none; }
  .magnet-filters button { flex: 0 0 auto; }
  .magnet-grid { columns: 3 145px; column-gap: .65rem; }
  .magnet-series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .magnet-card .magnet-label { display: none; }
  .door-note-inner { grid-template-columns: 1fr; }
  .door-note .actions { justify-content: start; }
  .modal-caption { padding-inline: 3.5rem; }
  .modal-art { min-height: 62svh; }
}

@media (max-width: 440px) {
  .magnet-grid { columns: 2 130px; }
  .magnet-series { padding: .7rem; }
  .hero-magnet-stack { min-height: 390px; }
  .modal-nav { width: 40px; height: 40px; }
  .modal-prev { left: .35rem; }
  .modal-next { right: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .magnet-card, .magnet-filters button, .hero-magnet { transition: none; }
}