@font-face{font-family:"Luckiest Guy";src:url("assets/fonts/luckiest-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("assets/fonts/nunito-var.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --ink:#10251a; --ink-soft:#22301f;
  --jungle-900:#0b2416; --jungle-800:#12361f; --jungle-700:#1a4d2b;
  --leaf:#4f9c3a; --lime:#a9d94e;
  --sun:#ffd23f; --sun-hi:#fff27a;
  --sea:#1f6fb2; --sea-deep:#0e3f63;
  --purple:#6f22a8; --purple-deep:#43106e;
  --gobbo:#f8f1de; --paper:#fffdf4;
  --clay:#b8551f;
  --display:"Luckiest Guy","Nunito",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;padding:0;
  font:400 16px/1.55 var(--body);
  color:var(--gobbo);
  background:
    radial-gradient(1150px 660px at 8% 0%,rgba(169,217,78,.34),transparent 60%),
    radial-gradient(980px 600px at 94% 8%,rgba(31,111,178,.32),transparent 64%),
    radial-gradient(820px 560px at 44% 98%,rgba(255,210,63,.16),transparent 70%),
    radial-gradient(circle at 20% 30%,rgba(255,242,122,.07) 0 2px,transparent 3px) 0 0/34px 34px,
    linear-gradient(178deg,#17452a 0%,#1f5733 46%,#28653c 100%);
  background-attachment:fixed,fixed,fixed,scroll,fixed;
}
img{max-width:100%;height:auto}
a{color:var(--sun)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--ink);padding:10px 16px;font-weight:800;z-index:300}
.skip:focus{left:8px;top:8px}

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

/* ------------------------------------------------ announcement ribbon */
.ribbon{background:var(--sun);color:var(--ink);border-bottom:3px solid var(--ink);padding:9px 0;
  font:800 12px/1.2 var(--body);letter-spacing:.15em;text-transform:uppercase;text-align:center}
.ribbon .wrap{padding:0 14px}

/* ------------------------------------------------ header */
.topbar{position:sticky;top:0;z-index:80;background:linear-gradient(180deg,#54167f 0%,#3d0d61 100%);
  border-bottom:3px solid var(--ink);box-shadow:0 6px 0 rgba(6,18,11,.45)}
.bar{display:flex;align-items:center;gap:14px;padding:11px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--gobbo);flex:0 1 auto}
.brand img{width:42px;height:42px;border-radius:13px;border:3px solid var(--ink);background:var(--lime);
  box-shadow:3px 3px 0 var(--ink);object-fit:cover;flex:0 0 auto}
.brand span{font:400 clamp(15px,1.5vw,19px)/1.06 var(--display);letter-spacing:.01em;
  text-shadow:2px 2px 0 var(--ink)}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav li{position:relative}
.nav a{display:block;color:var(--gobbo);text-decoration:none;font:700 13.5px/1 var(--body);
  padding:11px 10px;border-radius:10px;border:2px solid transparent;white-space:nowrap}
.nav a:hover{background:rgba(255,210,63,.16);color:var(--sun)}
.nav li.active > a{background:var(--sun);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.nav li.has-kids > a::after{content:" ▾";font-size:11px;opacity:.9}
.nav .kids{display:none;position:absolute;left:0;top:100%;min-width:100%;width:max-content;
  flex-direction:column;gap:2px;background:var(--purple-deep);border:3px solid var(--ink);
  border-radius:14px;padding:7px;box-shadow:8px 8px 0 rgba(6,18,11,.7);z-index:90}
.nav li.has-kids:hover > .kids,.nav li.has-kids:focus-within > .kids{display:flex}
.nav .kids a{font:700 13px/1.25 var(--body);padding:9px 12px;border-radius:9px;color:#f4ecd8;white-space:nowrap}
.nav .kids a:hover{background:var(--sun);color:var(--ink)}
.nav .cta{background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:999px;
  padding:10px 16px;font:400 13.5px/1 var(--display);box-shadow:4px 4px 0 var(--ink);margin-left:8px}
.nav .cta:hover{background:var(--sun-hi);color:var(--ink);transform:translate(1px,1px);box-shadow:3px 3px 0 var(--ink)}

/* ------------------------------------------------ hero */
.hero{position:relative;padding:42px 0 34px;border-bottom:3px solid var(--ink);
  background:
    radial-gradient(680px 420px at 78% 18%,rgba(255,242,122,.20),transparent 66%),
    linear-gradient(180deg,rgba(14,63,99,.55) 0%,rgba(11,36,22,.10) 44%,rgba(11,36,22,.55) 100%)}
.hero-in{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:36px;align-items:center}
.hero-copy{min-width:0}
.eyebrow{display:inline-block;margin:0 0 16px;background:var(--purple);color:var(--gobbo);
  font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;
  border:3px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.6deg)}
.hero h1{margin:0 0 14px;font:400 clamp(2.35rem,4.7vw,4.15rem)/0.94 var(--display);color:var(--sun);
  -webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--ink),0 0 26px rgba(255,210,63,.28);
  letter-spacing:.005em}
.lead{margin:0 0 20px;font:400 17px/1.5 var(--body);color:#eef3e2;max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn{display:inline-block;background:var(--sun);color:var(--ink);text-decoration:none;
  font:400 15px/1 var(--display);padding:13px 20px;border:3px solid var(--ink);border-radius:999px;
  box-shadow:5px 5px 0 var(--ink);transition:transform .14s,box-shadow .14s}
.btn:hover{transform:translate(1px,2px);box-shadow:3px 3px 0 var(--ink);background:var(--sun-hi)}
.btn.ghost{background:transparent;color:var(--gobbo);border-color:var(--gobbo);box-shadow:5px 5px 0 rgba(16,37,26,.9)}
.btn.ghost:hover{background:rgba(248,241,222,.12);color:var(--sun);border-color:var(--sun)}

.hero-shot{margin:0;background:var(--gobbo);border:3px solid var(--ink);border-radius:26px;
  padding:12px 12px 6px;box-shadow:13px 13px 0 rgba(6,18,11,.8);transform:rotate(-1.2deg);min-width:0}
.hero-shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:0;
  outline:3px solid var(--ink);border-radius:16px;background:#0d2a19}
.hero-shot figcaption{display:block;padding:8px 6px 4px;font:700 11.5px/1.3 var(--body);
  letter-spacing:.05em;text-transform:uppercase;color:#5c6a4d}

/* ------------------------------------------------ facts strip */
.facts-strip{background:linear-gradient(180deg,rgba(11,36,22,.92),rgba(18,54,31,.94));
  border-bottom:3px solid var(--ink);padding:18px 0 20px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fact{position:relative;background:var(--gobbo);border:3px solid var(--ink);border-radius:16px;
  padding:12px 14px 12px 36px;box-shadow:5px 5px 0 var(--ink);min-width:0}
.fact::before{content:"";position:absolute;left:14px;top:17px;width:11px;height:11px;background:var(--sun);
  border:2px solid var(--ink);transform:rotate(45deg)}
.fact-k{display:block;font:800 10px/1.2 var(--body);letter-spacing:.13em;text-transform:uppercase;color:#5a6b4c}
.fact-v{display:block;margin-top:3px;font:400 18px/1.15 var(--display);color:var(--ink)}

/* ------------------------------------------------ section heads */
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:34px 0 8px}
.overline{display:inline-block;background:var(--lime);color:var(--ink);font:800 10px/1 var(--body);
  letter-spacing:.17em;text-transform:uppercase;padding:7px 12px;border:2px solid var(--ink);
  border-radius:999px;transform:rotate(-1deg)}
.section-head h2{display:flex;align-items:center;gap:10px;margin:0;
  font:400 clamp(1.45rem,2.9vw,2.15rem)/1.02 var(--display);color:var(--gobbo);
  text-shadow:3px 3px 0 var(--ink)}
.count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:31px;height:31px;
  padding:0 6px;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:999px;
  font:400 15px/1 var(--display);text-shadow:none}

/* ------------------------------------------------ cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:20px 0 34px}
.grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--ink);
  background:var(--gobbo);border:3px solid var(--ink);border-radius:24px;overflow:hidden;
  box-shadow:9px 9px 0 var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translate(-2px,-3px);box-shadow:12px 12px 0 var(--ink)}
.thumb{display:block;position:relative;border-bottom:3px solid var(--ink);overflow:hidden;background:#0d2a19}
.thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.pill-tag{position:absolute;left:10px;top:10px;background:var(--purple);color:var(--gobbo);
  font:800 9.5px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;padding:6px 10px;
  border:2px solid var(--ink);border-radius:999px;transform:rotate(-3deg)}
.card-body{padding:14px 16px 15px;display:flex;flex-direction:column;min-width:0}
.card-body h3{margin:0 0 6px;font:400 17.5px/1.16 var(--display);color:var(--ink)}
.card-body p{margin:0 0 10px;font:400 13.5px/1.45 var(--body);color:#3c4b35}
.go{font:800 11.5px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--clay)}
.stamp{display:block;margin-top:9px;font:700 10px/1 var(--body);letter-spacing:.07em;
  text-transform:uppercase;color:#6d7c5f}

/* ------------------------------------------------ article */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 238px;gap:30px;align-items:start;
  margin:26px auto 44px}
.article-grid > div{min-width:0}
.crumb{margin:0 0 12px;font:700 12px/1.5 var(--body);color:#c9dcb8}
.crumb a{color:var(--sun);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:#84a06f}
.crumb .here{color:var(--gobbo)}

article,.home-prose{min-width:0;background:var(--gobbo);border:3px solid var(--ink);border-radius:26px;
  padding:26px 30px 28px;box-shadow:10px 10px 0 rgba(6,18,11,.82);
  font:400 16px/1.62 var(--body);color:var(--ink-soft)}
.home-prose{margin:10px 0 30px;padding-top:8px}
article h1,.home-prose h1{margin:0 0 14px;font:400 clamp(1.85rem,3.5vw,2.65rem)/1.03 var(--display);
  color:var(--ink);letter-spacing:.002em}
article h2,.home-prose h2{display:inline-block;margin:30px 0 12px;background:var(--sun);color:var(--ink);
  font:400 20px/1.12 var(--display);border:3px solid var(--ink);border-radius:12px;padding:7px 14px;
  box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.2deg)}
article h3,.home-prose h3{margin:22px 0 8px;padding-left:11px;border-left:6px solid var(--leaf);
  font:800 16.5px/1.32 var(--body);color:var(--ink)}
article p,.home-prose p{margin:0 0 14px;color:var(--ink-soft)}
article strong,.home-prose strong{color:#8c3a10}
article a,.home-prose a{color:#76269f;font-weight:700;text-decoration:underline;text-underline-offset:2px}
article a:hover,.home-prose a:hover{color:#4f1580}
article ul,.home-prose ul{margin:0 0 16px;padding:0;list-style:none}
article ul li,.home-prose ul li{position:relative;margin:0 0 8px;padding-left:24px;line-height:1.56}
article ul li::before,.home-prose ul li::before{content:"";position:absolute;left:4px;top:7px;
  width:10px;height:10px;background:var(--sun);border:2px solid var(--ink);transform:rotate(45deg)}
article ol,.home-prose ol{margin:0 0 16px;padding:0;list-style:none;counter-reset:step}
article ol li,.home-prose ol li{position:relative;margin:0 0 10px;padding-left:34px;counter-increment:step}
article ol li::before,.home-prose ol li::before{content:counter(step);position:absolute;left:0;top:1px;
  width:23px;height:23px;background:var(--purple);color:var(--gobbo);border:2px solid var(--ink);
  border-radius:50%;font:800 11.5px/19px var(--body);text-align:center}
article blockquote,.home-prose blockquote{margin:0 0 16px;padding:10px 16px;border-left:7px solid var(--purple);
  background:#fffdf4;border-radius:0 12px 12px 0;color:#3c4b35;font-style:italic}
article em,.home-prose em{color:#5d6b4f;font-size:13.5px}
article code,.home-prose code{background:#efe6cd;border:1px solid #d7c9a6;border-radius:5px;
  padding:1px 5px;font:600 13.5px/1.4 ui-monospace,Consolas,monospace;color:#5a3a12}
article img,.home-prose img{display:block;width:100%;border:3px solid var(--ink);
  border-radius:16px;margin:6px 0 10px;background:#0d2a19;cursor:zoom-in}
article img[src$="keyart.jpg"],.home-prose img[src$="keyart.jpg"]{width:auto;max-width:min(600px,100%);
  margin-left:auto;margin-right:auto}
article hr,.home-prose hr{border:0;border-top:3px dashed #cbbf9f;margin:22px 0}

/* tables */
.tbl-wrap{overflow-x:auto;margin:0 0 18px;border:3px solid var(--ink);border-radius:16px;background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{background:var(--ink);color:var(--gobbo);text-align:left;font:800 11.5px/1.35 var(--body);
  letter-spacing:.07em;text-transform:uppercase;padding:10px 12px;white-space:nowrap}
td{padding:9px 12px;border-top:2px solid #dbd0b2;color:var(--ink-soft);vertical-align:top}
tbody tr:nth-child(even) td{background:#f1e8d0}
table strong,table b{color:inherit}

/* callouts */
.callout{margin:0 0 18px;padding:14px 16px;background:var(--paper);border:3px solid var(--ink);
  border-left:9px solid var(--leaf);border-radius:14px;box-shadow:5px 5px 0 rgba(16,37,26,.16);color:var(--ink-soft)}
.callout p:last-child{margin-bottom:0}
.callout.signpost{background:var(--sun);border-left-width:3px;border-radius:12px;
  box-shadow:7px 7px 0 var(--ink);transform:rotate(-.7deg);color:#33260a;font-weight:700}
.callout.signpost strong{color:#6d2a06}
.callout.crystal{background:linear-gradient(180deg,#5a1a8c,#3d0f63);border-left-color:var(--sun);color:#f6efdd}
.callout.crystal a{color:var(--sun-hi)}
.callout.warn{background:#fff4d6;border-left-color:var(--clay)}

/* quick answer */
.quick-answer{position:relative;margin:0 0 22px;padding:16px 18px 14px;background:linear-gradient(180deg,#5c1a90,#3d0f63);
  border:3px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink)}
.quick-answer p{margin:0;color:#f8f2e3;font-size:15.5px;line-height:1.55}
.qa-stamp{display:inline-block;margin-bottom:9px;background:var(--sun);color:var(--ink);
  font:800 9.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;padding:5px 9px;
  border:2px solid var(--ink);border-radius:999px}

/* toc */
.toc{position:sticky;top:96px;background:var(--gobbo);border:3px solid var(--ink);border-radius:18px;
  padding:14px 14px 16px;box-shadow:7px 7px 0 rgba(6,18,11,.78)}
.toc .overline{background:var(--sun);transform:none;margin-bottom:2px}
.toc-list{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.toc-list a{font:700 12.5px/1.35 var(--body);color:#2f3f2a;text-decoration:none;
  border-left:3px solid #cbbfa0;padding-left:9px}
.toc-list a:hover{color:var(--clay);border-left-color:var(--clay)}

/* all guides block (rendered inside article) */
.all-guides{margin-top:34px}
.all-guides .grid{margin-top:14px}
.all-guides .card{background:var(--paper)}
.all-link{margin:14px 0 0;font:800 13px/1.4 var(--body)}
.all-link a{color:#76269f;text-decoration:none;border-bottom:3px solid var(--sun);padding-bottom:2px}
.all-link a:hover{color:#4f1580}

/* ------------------------------------------------ ad slots (pointer gated) */
.ad-slot{display:none;margin:26px auto;max-width:860px;padding:12px;background:var(--jungle-800);
  border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 rgba(6,18,11,.6)}
@media (hover: hover) and (pointer: fine){
  .ad-slot-native{display:block}
}
@media not all and (hover: hover) and (pointer: fine){
  .ad-slot-mobile{display:block}
}
@media print{.ad-slot{display:none}}
.ad-slot::before{content:"Advertisement";display:block;margin-bottom:8px;text-align:center;
  font:800 9.5px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#9db28a}
.ad-inner{min-height:92px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-slot-mobile .ad-inner{min-height:66px}

/* ------------------------------------------------ footer */
.foot{margin-top:36px;padding:26px 0 30px;background:#061a0e;border-top:8px solid var(--sun)}
.foot .disclaimer{margin:0 0 10px;max-width:80ch;font:400 13px/1.6 var(--body);color:#c6d7ba}
.foot-links{margin:0 0 6px;font:700 13px/1.6 var(--body);color:#7f9672}
.foot-links a{color:var(--sun);text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot .muted{margin:0;font:700 11.5px/1.6 var(--body);letter-spacing:.04em;color:#7f9672}

/* ------------------------------------------------ lightbox */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,14,8,.94);cursor:zoom-out}
.lightbox img{width:auto;height:auto;max-width:min(1500px,96vw);max-height:92vh;
  border:3px solid var(--gobbo);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* ------------------------------------------------ responsive */
@media (max-width:1100px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero-shot{order:-1;transform:rotate(-.8deg)}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .grid,.grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav a{font-size:13px;padding:10px 8px}
  article,.home-prose{padding:22px 22px 24px}
}
@media (max-width:900px){
  .bar{gap:10px}
  .brand span{font-size:15px}
  .nav{width:100%;margin-left:0;overflow-x:auto;padding-bottom:2px;flex-wrap:nowrap}
  .nav .kids{display:none!important}
  .nav li.has-kids > a::after{content:""}
  .nav .cta{margin-left:4px}
}
@media (max-width:680px){
  .hero{padding:26px 0 24px}
  .hero h1{font-size:2.2rem}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid,.grid[data-n="2"],.grid[data-n="1"]{grid-template-columns:minmax(0,1fr);gap:20px}
  article,.home-prose{padding:18px 16px 20px;border-radius:20px;box-shadow:7px 7px 0 rgba(6,18,11,.8)}
  article h2,.home-prose h2{font-size:18px}
  .hero-shot{padding:9px 9px 4px;border-radius:20px}
  .tbl-wrap{border-radius:12px}
  th,td{padding:8px 10px}
  table{font-size:13.5px}
}
@media (max-width:420px){
  .facts{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .card:hover{transform:none}
}