/* Gadget Guide (child of Magazine), measured from gadgetguidenews.com (SmartMag + Elementor) */
:root {
  --accent: #00cf92;
  --frame: #00e29e;
  --ink: #161616;
  --text: #444;
  --muted: #636363;
  --line: #e2e2e2;
  --sep: #e8e8e8;
  --page: #fff;
  --serif: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --label: "DM Sans", system-ui, sans-serif;
  --reading: "DM Sans", system-ui, sans-serif;
  --anton: "Anton", "Impact", "Arial Narrow", sans-serif;
  --shadow: 0 3px 12px -1px rgba(7,10,25,.2), 0 22px 27px -20px rgba(7,10,25,.2);
}
body { background: var(--page); color: var(--text); font: 14px/1.5 var(--sans); }
.site-main { padding: 0; }
.ggn-wrap { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 30px; }
@media (max-width: 940px) { .ggn-wrap { max-width: 740px; } }
@media (max-width: 767px) { .ggn-wrap { padding: 0 20px; } }

/* ---------- Header ---------- */
.ggn-top { background: var(--header); color: #ddd; }
.ggn-top-in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 110px; }
.ggn-socials { display: flex; gap: 9px; }
.ggn-socials a, .ggn-foot-social a, .ggn-oc-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); color: #ddd; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.ggn-socials a:hover, .ggn-foot-social a:hover, .ggn-oc-social a:hover { background: var(--accent); color: #fff; }
.ggn-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; }
.ggn-logo img { width: 417px; height: auto; max-width: none; }
.ggn-logo .logo-text, .ggn-oc-logo .logo-text { font: 800 34px/1 var(--sans); color: #fff; letter-spacing: -.03em; }
.ggn-sub { display: inline-flex; align-items: center; height: 32px; padding: 0 17px; border-radius: 2px; background: var(--button); color: #0a0a0a; font: 600 12px/32px var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.ggn-sub:hover { filter: brightness(1.08); }
.ggn-m-menu, .ggn-m-search { display: none; color: #fff; padding: 6px 0; }
.ggn-m-search { color: #ddd; }
.ggn-nav-hold { height: 50px; }
.ggn-nav { background: #151515; border-top: 1px solid rgba(255,255,255,.1); color: #ddd; }
.ggn-nav-in { display: flex; align-items: center; height: 49px; }
.ggn-burger { display: inline-flex; width: 26px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; transform: scale(.85); transform-origin: left center; }
.ggn-menu { flex: 1; display: flex; justify-content: center; }
.ggn-menu > ul { display: flex; flex-wrap: wrap; justify-content: center; }
.ggn-menu > ul > li { position: relative; }
.ggn-menu > ul > li > a { display: block; padding: 0 17px; font: 600 14px/49px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #f0f0f0; transition: color .15s; }
.ggn-menu > ul > li > a:hover, .ggn-menu > ul > li.active > a { color: var(--accent); }
.ggn-menu .sub { position: absolute; left: 0; top: 100%; min-width: 220px; background: #151515; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 8px 0; opacity: 0; visibility: hidden; z-index: 30; }
.ggn-menu .has-sub:hover .sub { opacity: 1; visibility: visible; }
.ggn-menu .sub a { display: block; padding: 8px 18px; font: 600 14px/1.4 var(--sans); color: #f0f0f0; }
.ggn-menu .sub a:hover { color: var(--accent); }
.ggn-tools { display: flex; align-items: center; gap: 6px; }
.ggn-tools .icon-btn { padding: 6px 2px; }
.ggn-dark-btn { color: #9a9a9a; }
.ggn-dark-btn .sun, html.ggn-dark .ggn-dark-btn .moon { display: none; }
html.ggn-dark .ggn-dark-btn .sun { display: inline-flex; color: var(--accent); }
.ggn-search-btn { color: #9a9a9a; }
.ggn-tools .icon-btn:hover { color: #fff; }
/* smart sticky: the nav bar comes back when scrolling up */
.ggn-head.is-stuck .ggn-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transform: translateY(-100%); transition: transform .3s ease; }
.ggn-head.is-stuck.is-shown .ggn-nav { transform: none; box-shadow: 0 3px 4px rgba(0,0,0,.12); }
.ggn-strip { display: none; }

@media (max-width: 940px) {
  .ggn-top-in { height: 65px; }
  .ggn-logo img { width: 206px; }
  .ggn-logo .logo-text { font-size: 24px; }
  .ggn-socials, .ggn-sub, .ggn-nav-hold { display: none; }
  .ggn-m-menu, .ggn-m-search { display: inline-flex; }
  .ggn-strip { display: block; background: #2b2b2b; height: 38px; overflow: hidden; }
  .ggn-strip-in { display: flex; justify-content: center; height: 54px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .ggn-strip a { flex-shrink: 0; padding: 0 15px; font: 600 13px/38px var(--sans); letter-spacing: -.01em; text-transform: capitalize; color: #f0f0f0; }
  .ggn-strip a.on, .ggn-strip a:hover { color: var(--accent); }
  .ggn-head.is-stuck { padding-top: 65px; }
  .ggn-head.is-stuck .ggn-top { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transform: translateY(-100%); transition: transform .3s ease; }
  .ggn-head.is-stuck.is-shown .ggn-top { transform: none; }
}
@media (max-width: 600px) { .ggn-strip-in { justify-content: flex-start; padding-left: 6px; } }

/* Off-canvas menu */
.ggn-oc .offcanvas-panel { width: 370px; max-width: 100vw; background: #000; padding-bottom: 40px; }
.ggn-oc-close { position: absolute; right: 0; top: 0; width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #1b1b1b; color: #fff; cursor: pointer; }
.ggn-oc-close svg { width: 14px; height: 14px; }
.ggn-oc-logo { display: flex; justify-content: center; padding: 37px 25px 34px; }
.ggn-oc-logo img { width: 206px; height: auto; }
.ggn-oc-nav { margin: 0 25px; }
.ggn-oc-nav li { border-bottom: 1px solid rgba(255,255,255,.12); }
.ggn-oc-nav > li > a { display: block; padding: 13px 0; font: 700 16px/22px var(--sans); color: #fff; }
.ggn-oc-nav a:hover { color: var(--accent); }
.ggn-oc-nav ul li { border: 0; }
.ggn-oc-nav ul a { display: block; padding: 6px 0 6px 14px; font: 500 14px/1.4 var(--sans); color: rgba(255,255,255,.75); }
.ggn-oc-news { margin: 45px 25px 0; }
.ggn-oc-social { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
@media (max-width: 767px) { .ggn-oc .offcanvas-panel { width: 320px; } }

/* Search overlay */
.ggn-so::before { background: rgba(0,0,0,.92); }
.ggn-so-close { position: absolute; right: 28px; top: 28px; z-index: 2; border: 0; background: none; color: #fff; cursor: pointer; padding: 4px; }
.ggn-so-close svg { width: 30px; height: 30px; }
.ggn-so-form { position: relative; max-width: 690px; width: calc(100% - 40px); margin: 0 auto; top: 38vh; transform: translateY(-50%); }
.ggn-so-form input { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); outline: 0; padding: 0 0 18px; font: 700 60px/1.2 var(--sans); letter-spacing: -.02em; color: #fff; }
.ggn-so-form input::placeholder { color: #fff; }
.ggn-so-form p { margin-top: 26px; font: 400 18px/1.5 var(--sans); color: rgba(255,255,255,.75); }
@media (max-width: 767px) { .ggn-so-form input { font-size: 36px; } .ggn-so-form p { font-size: 15px; } }

/* ---------- Shared pieces ---------- */
.ggn-blk { margin: 0 0 70px; }
.ggn-bh { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; padding-bottom: 13px; margin-bottom: 26px; border-bottom: 2px solid var(--line); }
.ggn-bh::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 40px; height: 3px; background: var(--accent); }
.ggn-bh h2 { font: 700 20px/24px var(--sans); color: var(--ink); }
.ggn-bh h2 a:hover { color: var(--accent); }
.ggn-bh .hl { color: var(--accent); }
.ggn-view { flex-shrink: 0; margin-bottom: -4px; padding: 9px 15px; border: 1px solid var(--sep); border-radius: 20px; font: 500 13px/13px var(--sans); color: #999; transition: all .15s; }
.ggn-view:hover { border-color: var(--accent); color: var(--accent); }
.ggn-t { font-family: var(--sans); font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
.ggn-t a:hover, .ggn-anton a:hover { color: var(--accent); }
.ggn-anton { font: 400 50px/1.25 var(--anton); letter-spacing: 1px; color: var(--ink); }
.ggn-img { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #f2f2f2; box-shadow: var(--shadow); }
.ggn-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.ggn-img:hover img { opacity: .88; }
.ggn-img .ph { display: block; width: 100%; height: 100%; }
.ggn-cat { display: inline-block; font: 700 11px/16.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ggn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 400 12px/18px var(--sans); color: var(--muted); }
.ggn-meta .by { font-weight: 500; color: #191919; }
.ggn-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #999; }
.ggn-ex { font: 400 14px/1.6 var(--sans); color: #474747; }
.clamp2, .ggn-card .ggn-t a, .ggn-c4 .ggn-t a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Rows: main column + sidebar */
.ggn-layout { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 406fr); gap: 64px; align-items: start; margin-top: 30px; margin-bottom: 70px; }
.ggn-layout.no-side { grid-template-columns: minmax(0, 1fr); }
.ggn-main > .ggn-blk:last-child { margin-bottom: 0; }
.ggn-aside { display: grid; gap: 45px; align-content: start; min-width: 0; }
.ggn-banner { margin: 0 auto 80px; text-align: center; }
.ggn-banner .a-wrap { display: flex; justify-content: center; }
.ggn-ad { text-align: center; }

/* Hero: big Anton story + "News Just In" with round images */
.ggn-hero { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 406fr); gap: 64px; align-items: start; margin-top: 45px; margin-bottom: 70px; }
.ggn-lead .ggn-img { aspect-ratio: 4 / 3; }
.ggn-lead .ggn-anton { margin: 20px 0 11px; padding-right: 7%; }
.ggn-lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--sep); }
.ggn-lrow:last-child { border-bottom: 0; margin-bottom: 0; }
.ggn-lrow-body { padding-top: 6px; }
.ggn-lrow .ggn-t { font-size: 24px; line-height: 1.36; margin: 11px 0; }
.ggn-lrow .ggn-img { width: 128px; aspect-ratio: 1; }
.ggn-justin .ggn-lrow .ggn-t { font-size: 18px; margin: 11px 0; }
.ggn-justin .ggn-lrow .ggn-img { width: 105px; border-radius: 100px; }
.ggn-justin .ggn-lrow .ggn-t a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Framed cards (Features / Editor's Picks) */
.ggn-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.ggn-card .ggn-img { aspect-ratio: 3 / 2; margin-bottom: 20px; }
.ggn-card-body { padding: 0 25px 20px 0; box-shadow: 9px 9px 0 -5px var(--frame); }
.ggn-card .ggn-t { font-size: 20px; line-height: 27.2px; margin-bottom: 11px; }
.ggn-cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 50px; }
.ggn-c4 .ggn-img { aspect-ratio: 3 / 2; margin-bottom: 16px; }
.ggn-c4 .ggn-t { font-size: 18px; line-height: 24.48px; margin-bottom: 11px; }
.ggn-c4 .ggn-t a { -webkit-line-clamp: 3; }

/* Framed sidebar boxes */
.ggn-frame { padding: 25px; border: 2px solid var(--frame); border-radius: 20px; }
.ggn-mostread ol { display: grid; gap: 20px; }
.ggn-mostread li { position: relative; padding: 0 0 20px 39px; border-bottom: 1px solid var(--sep); }
.ggn-mostread .n { position: absolute; left: 0; top: -3px; font: 700 23px/1.2 var(--sans); color: var(--accent); }
.ggn-mostread .ggn-t { font-size: 17px; line-height: 23.12px; }
.ggn-sg { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
.ggn-sg .ggn-img { aspect-ratio: 3 / 2; margin-bottom: 20px; }
.ggn-sg .ggn-t { font-size: 17px; line-height: 23.12px; }
.ggn-sg .ggn-t a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* Gradient band */
.ggn-band { max-width: 1210px; margin: 0 auto 70px; padding: 50px; border-radius: 20px; background: linear-gradient(180deg, #71b280 0%, #134e5e 100%); color: #f0f0f0; }
.ggn-band-in { max-width: 1110px; margin: 0 auto; }
.ggn-band-h { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.ggn-band-h::before, .ggn-band-h::after { content: ""; flex: 1; height: 2px; background: rgba(255,255,255,.18); }
.ggn-band-h h2 { font: 400 40px/48px var(--anton); text-transform: uppercase; color: #f0f0f0; }
.ggn-band-grid { display: grid; grid-template-columns: minmax(0, 530fr) minmax(0, 530fr); gap: 50px; }
.ggn-band-lead .ggn-img { aspect-ratio: 4 / 3; }
.ggn-band-lead .ggn-anton { font-size: 44px; line-height: 1.36; letter-spacing: .6px; color: #fff; margin: 11px 0 11px; }
.ggn-band-small { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 50px; align-content: start; }
.ggn-band-card .ggn-img { aspect-ratio: 3 / 2; margin-bottom: 12px; }
.ggn-band-card .ggn-t { font-size: 19px; line-height: 25.84px; font-weight: 600; letter-spacing: -.5px; color: #fff; margin-bottom: 9px; }
.ggn-band-card .ggn-t a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ggn-band .ggn-img { background: rgba(255,255,255,.08); }
.ggn-band .ggn-meta, .ggn-band .ggn-meta .by { color: #e0e0e0; }
.ggn-band .ggn-meta .dot { background: #e0e0e0; }
.ggn-band .ggn-t a:hover, .ggn-band .ggn-anton a:hover { color: #fff; text-decoration: underline; }

/* Latest: lead + list with wide images */
.ggn-latest .ggn-lead .ggn-img { aspect-ratio: 3 / 2; }
.ggn-latest .ggn-lead .ggn-anton { font-size: 44px; line-height: 1.25; padding: 0; }
.ggn-latest-rows { margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--frame); }
.ggn-latest-rows .ggn-lrow { padding-bottom: 22px; margin-bottom: 22px; }
.ggn-latest-rows .ggn-img { width: 243px; aspect-ratio: 3 / 2; }
.ggn-more-wrap { display: flex; justify-content: center; margin-top: 50px; }
.ggn-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 270px; max-width: 100%; height: 41px; border-radius: 20px; background: var(--button); color: #fff; font: 700 13px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; transition: filter .15s; }
.ggn-more:hover { filter: brightness(1.08); color: #fff; }

/* Newsletter box */
.ggn-news { position: relative; border: 6px solid #f7f7f7; background: #fff; margin-top: 31px; }
.ggn-news-in { border: 1px solid #e8e8e8; padding: 46px 32px 30px; text-align: center; }
.ggn-news-badge { position: absolute; left: 50%; top: -31px; transform: translateX(-50%); width: 62px; height: 62px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.ggn-news h3 { font: 800 24px/31.2px var(--sans); letter-spacing: -.01em; color: var(--ink); margin: 0 0 18px; }
.ggn-news p { font: 400 14px/24px var(--sans); color: #444; }
.ggn-news-form { margin-top: 20px; }
.ggn-news-form input[type=email] { width: 100%; height: 44px; border: 1px solid #ddd; border-radius: 2px; padding: 0 12px; text-align: center; font: 400 14px var(--sans); background: #fff; color: #333; }
.ggn-news-form button { width: 100%; height: 40px; margin-top: 13px; border: 0; border-radius: 2px; background: var(--button); color: #fff; font: 700 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.ggn-news-form button:hover { filter: brightness(1.08); }
.ggn-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; text-align: center; font: 400 12px/22px var(--sans); color: #666; }
.ggn-consent input { margin-top: 5px; flex-shrink: 0; }
.ggn-consent a { color: var(--ink); }
.ggn-news-msg { margin-top: 12px; font-weight: 600; color: #0f8a62; }
.ggn-news-msg.err { color: #c62828; }
.ggn-news.is-dark { border: 0; background: #000; margin-top: 0; }
.ggn-news.is-dark .ggn-news-in { border-color: #222; padding: 40px 32px 32px; }
.ggn-news.is-dark h3 { color: #ececec; }
.ggn-news.is-dark p, .ggn-news.is-dark .ggn-consent { color: #bbb; }
.ggn-news.is-dark .ggn-consent a { color: #ddd; }
.ggn-news.is-dark input[type=email] { background: rgba(255,255,255,.1); border-color: #333; color: #ddd; }
.ggn-news.is-dark input[type=email]::placeholder { color: #bbb; }

/* ---------- Footer ---------- */
.ggn-foot { color: #c0c0c0; }
.ggn-foot-up { background: #0f0f11; padding: 70px 0 60px; }
.ggn-foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; align-items: start; }
.ggn-fh { margin-bottom: 30px; font: 700 15px/18px var(--sans); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.ggn-small { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--sep); }
.ggn-small:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ggn-small .ggn-img { aspect-ratio: 110 / 76; }
.ggn-small .ggn-t { font-size: 16px; line-height: 22.88px; letter-spacing: -.02em; margin: 2px 0 9px; }
.ggn-foot .ggn-small { border-color: rgba(255,255,255,.1); }
.ggn-foot .ggn-t { color: #fff; }
.ggn-foot .ggn-meta { color: #ccc; }
.ggn-foot .ggn-img { background: #1a1a1d; }
.ggn-foot-low { background: #040404; padding: 60px 0; text-align: center; color: #777; }
.ggn-foot-social { display: flex; justify-content: center; gap: 10px; }
.ggn-foot-social a { width: 42px; height: 42px; color: #fff; }
.ggn-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 34px 0 34px; }
.ggn-foot-links a { font: 600 13px/19.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: #fff; }
.ggn-foot-links a:hover { color: var(--accent); }
.ggn-copy { font: 400 13px/19.5px var(--sans); color: #777; }

/* ---------- Article ---------- */
.ggn-crumbs { background: #f7f7f7; }
.ggn-crumbs nav { display: flex; align-items: center; gap: 11px; height: 48px; font: 400 13px/13px var(--sans); color: #999; white-space: nowrap; overflow: hidden; }
.ggn-crumbs a { color: #555; } .ggn-crumbs a:hover { color: var(--accent); }
.ggn-crumbs nav > :last-child { overflow: hidden; text-overflow: ellipsis; }
.ggn-crumbs .sep { color: #aaa; }
.ggn-art-head { margin-top: 38px; }
.ggn-label { display: inline-block; padding: 0 10px; border-radius: 4px; background: var(--accent); color: #fff; font: 600 12px/26px var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.ggn-label:hover { color: #fff; filter: brightness(1.08); }
.ggn-art-title { max-width: 1050px; margin: 17px 0 16px; font: 800 43px/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.ggn-art-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 13px/24px var(--sans); color: var(--muted); }
.ggn-art-by b { font-weight: 500; color: #191919; }
.ggn-art-by .dot { width: 3px; height: 3px; border-radius: 50%; background: #999; }
.ggn-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #222; font: 800 17px/32px var(--sans); text-align: center; }
.ggn-avatar.big { width: 90px; height: 90px; font-size: 44px; line-height: 90px; }
.ggn-read { display: inline-flex; align-items: center; gap: 4px; }
.ggn-read svg { width: 14px; height: 14px; }
.ggn-art-layout { grid-template-columns: minmax(0, 728fr) minmax(0, 326fr); gap: 56px; margin-top: 19px; }
.ggn-share-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.ggn-share-icons { display: flex; align-items: center; gap: 8px; }
.ggn-share-icons .lbl { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; font: 500 13px var(--sans); color: #222; }
.ggn-share-icons a, .ggn-share-icons button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; padding: 0; }
.ggn-share-icons .fb { color: #1a6dd4; } .ggn-share-icons .x { color: #1d9bf0; } .ggn-share-icons .pin { color: #e60023; } .ggn-share-icons .lnk { color: #333; }
.ggn-share-icons .more { width: 31px; height: 31px; border: 1px solid #ddd; border-radius: 50%; color: #aaa; margin-left: 6px; }
.ggn-share-icons svg { width: 18px; height: 18px; }
.ggn-article .follow { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--sep); border-radius: 2px; font: 600 13px var(--sans); color: #222; }
.ggn-article .follow a { width: 30px; height: 30px; border-radius: 50%; background: #f2f2f2; display: inline-flex; align-items: center; justify-content: center; }
.ggn-art-image { margin: 26px 0 32px; }
.ggn-art-image img { width: 100%; height: auto; }
.ggn-body-wrap { position: relative; }
.ggn-body { padding: 0 29px; font: 400 17.5px/1.7 var(--reading); letter-spacing: -.003em; color: #111; }
.ggn-body > *, .ggn-body > div > * { margin-bottom: 1.3em; }
.ggn-body h2 { font: 800 26px/1.3 var(--sans); letter-spacing: -.02em; }
.ggn-body h3 { font: 700 21px/1.35 var(--sans); }
.ggn-body a { color: #01b27d; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ggn-body .oe-source { border-top: 0; padding-top: 0; font: 400 17.5px/1.7 var(--reading); color: #111; }
.ggn-body .oe-source a { color: #01b27d; text-decoration: underline; }
.ggn-float-share { display: none; }
@media (min-width: 1360px) {
  .ggn-float-share { position: absolute; left: -90px; top: 0; height: 100%; display: block; }
  .ggn-float-share > * { position: sticky; top: 70px; }
  .ggn-float-share span { display: block; margin-bottom: 14px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #222; }
  .ggn-float-share a { position: static; display: flex; width: 40px; height: 40px; margin-bottom: 11px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
  .ggn-float-share .fb { color: #1a6dd4; } .ggn-float-share .x { color: #1d9bf0; } .ggn-float-share .in { color: #0b66c2; } .ggn-float-share .pin { color: #e60023; } .ggn-float-share .em { color: #333; }
  .ggn-float-share svg { width: 16px; height: 16px; }
}
.ggn-share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 40px; padding: 22px 0; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }
.ggn-share-bar span { margin-right: auto; font: 500 13px var(--sans); text-transform: uppercase; color: var(--ink); }
.ggn-share-bar a { width: 70px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 2px; }
.ggn-share-bar .fb { background: #1a6dd4; } .ggn-share-bar .x { background: #55acef; } .ggn-share-bar .pin { background: #e60023; }
.ggn-share-bar .in { background: #0b66c2; } .ggn-share-bar .tg { background: #179cde; } .ggn-share-bar .em { background: #111; }
.ggn-author { display: flex; gap: 30px; align-items: flex-start; margin: 35px 0 45px; }
.ggn-author b { display: block; font: 600 17px/1.4 var(--sans); color: var(--ink); }
.ggn-author a { font: 400 13px var(--sans); color: var(--muted); }
.ggn-author a:hover { color: var(--accent); }
.ggn-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ggn-related-grid .ggn-img { aspect-ratio: 3 / 2; margin-bottom: 27px; }
.ggn-related-grid .ggn-t { font-size: 18px; line-height: 24.48px; margin-bottom: 12px; }
.ggn-page-title { margin: 40px 0 30px; font: 800 43px/1.2 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.is-page .ggn-body { padding: 0; }
.is-page .ggn-art-layout { margin-top: 0; }

/* Sidebar widgets */
.ggn-widget .ggn-small { border: 0; padding-bottom: 0; margin-bottom: 24px; }
.ggn-widget .ggn-small:last-child { margin-bottom: 0; }
.ggn-ls .ggn-img { aspect-ratio: 3 / 2; margin-bottom: 20px; }
.ggn-ls + .ggn-ls { margin-top: 30px; }
.ggn-ls-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.ggn-ls .n { font: 700 23px/1 var(--sans); color: var(--accent); text-align: center; }
.ggn-ls .ggn-t { font-size: 18px; line-height: 24.5px; margin-bottom: 10px; }

/* ---------- Section, search, 404 ---------- */
.ggn-archive { margin-top: 38px; }
.ggn-arch-title { margin: 0 0 40px; padding: 5px 0 5px 14px; border-left: 3px solid var(--accent); font: 700 20px/28px var(--sans); text-transform: uppercase; color: var(--ink); }
.ggn-arch-desc { margin: -20px 0 30px; color: #666; }
.ggn-arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 45px 36px; }
.ggn-acard .ggn-img { aspect-ratio: 3 / 2; margin-bottom: 30px; }
.ggn-acard .ggn-t { font-size: 20px; line-height: 27.2px; margin-bottom: 11px; }
.ggn-acard .ggn-ex { margin-top: 15px; }
.ggn-archive .pager { justify-content: center; margin-top: 30px; }
.ggn-archive .pager a { border-color: var(--sep); border-radius: 2px; }
.ggn-archive .pager a.on { background: var(--accent); border-color: var(--accent); }
.ggn-search { display: flex; gap: 6px; max-width: 560px; margin: 0 0 36px; }
.ggn-search input { flex: 1; min-width: 0; height: 44px; border: 1px solid #ddd; border-radius: 2px; padding: 0 14px; font: 400 15px var(--sans); }
.ggn-search button { height: 44px; padding: 0 22px; border: 0; border-radius: 2px; background: var(--button); color: #fff; font: 700 13px var(--sans); text-transform: uppercase; cursor: pointer; }
.ggn-empty { color: #666; margin-bottom: 30px; }
.ggn-404 { text-align: center; padding: 60px 30px 0; }
.ggn-404-code { font: 400 140px/1 var(--anton); color: var(--accent); }
.ggn-404 h1 { margin: 20px 0 14px; font: 800 36px/1.2 var(--sans); color: var(--ink); }
.ggn-404 .ggn-search { margin: 30px auto; }
.ggn-404 > .ggn-more { margin-bottom: 70px; }
.ggn-404 .ggn-cards { text-align: left; }

/* ---------- Tablets ---------- */
@media (max-width: 1260px) {
  .ggn-band { border-radius: 0; max-width: none; padding: 50px 30px; }
}
@media (max-width: 1024px) {
  .ggn-lead .ggn-anton { font-size: 43px; }
  .ggn-justin .ggn-lrow .ggn-t { font-size: 21px; line-height: 28.56px; }
  .ggn-lrow .ggn-t { font-size: 21px; line-height: 28.56px; }
  .ggn-band-lead .ggn-anton { font-size: 32px; }
  .ggn-band-card .ggn-t { font-size: 17px; line-height: 23.12px; }
  .ggn-latest .ggn-lead .ggn-anton { font-size: 34px; }
}
@media (max-width: 940px) {
  .ggn-hero, .ggn-layout, .ggn-art-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ggn-hero { margin-top: 45px; }
  .ggn-lead .ggn-anton { padding-right: 0; }
  .ggn-justin .ggn-lrow .ggn-img { width: 177px; }
  .ggn-justin .ggn-lrow-body { padding-top: 24px; }
  .ggn-lrow .ggn-img { width: 136px; }
  .ggn-latest-rows .ggn-img { width: 258px; }
  .ggn-cards3 { grid-template-columns: 1fr 1fr; }
  .ggn-cards4 { grid-template-columns: 1fr 1fr; }
  .ggn-band-in { max-width: 680px; }
  .ggn-band-grid { grid-template-columns: minmax(0, 315fr) minmax(0, 315fr); gap: 50px; }
  .ggn-band-small { gap: 22px 50px; }
  .ggn-foot-grid { grid-template-columns: 1fr 1fr; }
  .ggn-foot-grid > :last-child { grid-column: 1 / -1; max-width: 400px; width: 100%; margin: 0 auto; }
  .ggn-art-title { font-size: 34px; }
  .ggn-body { padding: 0 20px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .ggn-hero { margin-top: 30px; margin-bottom: 50px; gap: 50px; }
  .ggn-lead .ggn-img { aspect-ratio: 350 / 263; }
  .ggn-lead .ggn-anton, .ggn-latest .ggn-lead .ggn-anton { font-size: 32px; line-height: 1.25; margin-top: 20px; }
  .ggn-latest .ggn-lead .ggn-anton { font-size: 28px; }
  .ggn-lrow { gap: 20px; }
  .ggn-lrow .ggn-t, .ggn-justin .ggn-lrow .ggn-t { font-size: 18px; line-height: 24.48px; }
  .ggn-lrow .ggn-img, .ggn-justin .ggn-lrow .ggn-img { width: 100px; }
  .ggn-justin .ggn-lrow-body, .ggn-lrow-body { padding-top: 0; }
  .ggn-latest-rows .ggn-img { width: 133px; aspect-ratio: 4 / 3; }
  .ggn-cards3, .ggn-cards4, .ggn-arch-grid, .ggn-related-grid { grid-template-columns: minmax(0, 1fr); }
  .ggn-card .ggn-img { aspect-ratio: 350 / 233; }
  .ggn-blk { margin-bottom: 50px; }
  .ggn-banner { margin-bottom: 50px; }
  .ggn-layout { margin-top: 0; margin-bottom: 50px; gap: 50px; }
  .ggn-aside > .ggn-frame { margin: 0; }
  .ggn-band { padding: 50px 20px; margin-bottom: 50px; }
  .ggn-band-h { gap: 20px; }
  .ggn-band-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ggn-band-lead .ggn-img { aspect-ratio: 350 / 263; }
  .ggn-band-lead .ggn-anton { font-size: 28px; }
  .ggn-band-small { gap: 22px 26px; }
  .ggn-band-card .ggn-t { font-size: 17px; line-height: 23.12px; }
  .ggn-foot-up { padding: 50px 0 40px; }
  .ggn-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ggn-foot-grid > :last-child { max-width: none; }
  .ggn-foot-links { gap: 10px 20px; margin: 30px 0; }
  .ggn-art-head { margin-top: 30px; }
  .ggn-art-title { font-size: 28px; line-height: 1.25; margin: 14px 0 16px; }
  .ggn-art-layout { margin-top: 20px; }
  .ggn-share-top { justify-content: flex-start; }
  .ggn-body { padding: 0; font-size: 16px; }
  .ggn-body .oe-source { font-size: 16px; }
  .ggn-share-bar span { display: none; }
  .ggn-share-bar a { flex: 1; width: auto; }
  .ggn-author { gap: 18px; }
  .ggn-avatar.big { width: 64px; height: 64px; font-size: 32px; line-height: 64px; }
  .ggn-arch-title { margin-bottom: 30px; }
  .ggn-page-title { font-size: 30px; margin: 30px 0 20px; }
  .ggn-404-code { font-size: 100px; }
  .ggn-404 { padding: 40px 20px 0; }
}
@media (max-width: 360px) {
  .ggn-band-small { grid-template-columns: minmax(0, 1fr); }
  .ggn-sg { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Dark mode (moon button) ---------- */
html.ggn-dark { --ink: #efefef; --text: #c0c0c0; --muted: #a8a8a8; --line: #3a3a3a; --sep: #303030; --page: #151516; }
html.ggn-dark body { background: #151516; color: #c0c0c0; }
html.ggn-dark .ggn-meta .by, html.ggn-dark .ggn-art-by b, html.ggn-dark .ggn-share-icons .lbl, html.ggn-dark .ggn-share-icons .lnk, html.ggn-dark .ggn-float-share span { color: #e0e0e0; }
html.ggn-dark .ggn-ex, html.ggn-dark .ggn-body, html.ggn-dark .ggn-body .oe-source, html.ggn-dark .ggn-news p { color: #cfcfcf; }
html.ggn-dark .ggn-img { background: #222; }
html.ggn-dark .ggn-crumbs { background: #1d1d1f; }
html.ggn-dark .ggn-crumbs a { color: #bbb; }
html.ggn-dark .ggn-news:not(.is-dark) { background: #1b1b1d; border-color: #222; }
html.ggn-dark .ggn-news:not(.is-dark) .ggn-news-in { border-color: #333; }
html.ggn-dark .ggn-news:not(.is-dark) input[type=email] { background: rgba(255,255,255,.08); border-color: #3a3a3a; color: #ddd; }
html.ggn-dark .ggn-consent, html.ggn-dark .ggn-consent a { color: #aaa; }
html.ggn-dark .ggn-float-share a { background: #222; }
html.ggn-dark .ggn-latest-rows { border-color: #444; }
html.ggn-dark .ggn-article .follow { color: #ddd; }
html.ggn-dark .ggn-article .follow a { background: #2a2a2c; }
html.ggn-dark .ggn-search input { background: #1d1d1f; border-color: #3a3a3a; color: #ddd; }
html.ggn-dark .oe-contact label { color: #ccc; }
html.ggn-dark .oe-contact input, html.ggn-dark .oe-contact textarea { background: #1d1d1f; border-color: #3a3a3a; color: #ddd; }
.ggn-wrap.ggn-blk { margin-left: auto; margin-right: auto; }
.k-home .ggn-menu > ul > li:first-child > a { color: var(--accent); }
.ggn-view { display: none; }
.ggn-cards .ggn-view { display: inline-block; }
.ggn-meta .date { color: inherit; }
.ggn-band .ggn-meta, .ggn-foot .ggn-meta { color: #e0e0e0; }
.ggn-meta .date { font: 400 12px/18px var(--sans); }
.ggn-socials svg, .ggn-foot-social svg, .ggn-oc-social svg { width: 17px; height: 17px; }
.ggn-art-by .date { font: inherit; color: inherit; }
.ggn-layout.ggn-archive { grid-template-columns: minmax(0, 728fr) minmax(0, 326fr); gap: 56px; }
@media (max-width: 940px) { .ggn-layout.ggn-archive { grid-template-columns: minmax(0, 1fr); gap: 50px; } }