/* GeoSphere Insights — blog hub + article template.
   Extends site.css (dark "operations at night" identity). Scoped gsi-* only.
   Tokens inherited from site.css :root — --deep --navy --teal --mint --white --ink --muted --line --max */

/* ---------- shared masthead ---------- */
.gsi-mast{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(112deg,rgba(0,20,38,.99) 0%,rgba(0,26,48,.96) 46%,rgba(0,38,60,.82) 100%)}
.gsi-mast:before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 84% 14%,rgba(0,180,169,.16),transparent 26rem),
             radial-gradient(circle at 8% 92%,rgba(185,241,153,.09),transparent 24rem)}
.gsi-mast-inner{position:relative;z-index:1;padding:64px 0 52px}

/* ---------- hub ---------- */
.gsi-hub-head{max-width:720px}
.gsi-hub-head h1{font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.045em;
  font-size:clamp(2.3rem,4.4vw,4.1rem);line-height:1.04;margin:16px 0 18px;text-wrap:balance}
.gsi-hub-head .lead{font-size:clamp(1.02rem,1.2vw,1.18rem);color:#eef9ff;font-weight:650;max-width:620px;line-height:1.55}
.gsi-hub-head .sub{margin-top:13px;color:var(--muted);line-height:1.66;max-width:620px;font-size:.98rem}

/* filter + search bar */
.gsi-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:20px 0 22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:26px}
.gsi-chips{display:flex;flex-wrap:wrap;gap:8px}
.gsi-chip{appearance:none;font:inherit;cursor:pointer;border-radius:999px;padding:8px 14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#d9eef6;
  font-size:.79rem;font-weight:800;letter-spacing:.02em;transition:background .12s ease,border-color .12s ease,color .12s ease}
.gsi-chip:hover{border-color:rgba(185,241,153,.4);color:#fff}
.gsi-chip[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#00131f}
.gsi-chip b{font-weight:800;opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums}
.gsi-chip[aria-pressed="true"] b{opacity:.6}
.gsi-search{position:relative;flex:0 1 280px}
.gsi-search input{width:100%;height:40px;padding:0 14px 0 38px;border-radius:999px;font:inherit;font-size:.88rem;
  color:var(--white);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.gsi-search input::placeholder{color:#8fa8b6}
.gsi-search input:focus{outline:2px solid var(--teal);outline-offset:2px;border-color:transparent}
.gsi-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:#8fa8b6;fill:none;stroke-width:1.8;pointer-events:none}
.gsi-count{margin:0 0 20px;color:var(--muted);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:800;font-variant-numeric:tabular-nums}
.gsi-empty{padding:56px 0;color:var(--muted);line-height:1.6}
.gsi-empty strong{display:block;color:var(--white);font-size:1.15rem;margin-bottom:6px}

/* cards: fixed geometry so every tile in a row matches */
.gsi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;padding:0;margin:0}
.gsi-grid>li{display:flex}
.gsi-grid>li[hidden]{display:none}  /* [hidden] must beat the flex rule above */
.gsi-card{display:flex;flex-direction:column;width:100%;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.1);
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.gsi-card:hover{transform:translateY(-4px);border-color:rgba(0,220,215,.42);background:rgba(255,255,255,.085)}

/* thumbnail: 16:9. Let the artwork read at rest — the old treatment crushed a
   luminance-59 image to 23, which is why the grid looked like grey mud. Only the
   bottom edge is scrimmed, and only enough to seat the card body. */
.gsi-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--deep);flex:none}
.gsi-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02) brightness(.92);
  transform:scale(1.005);transition:filter .4s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.gsi-card:hover .gsi-thumb img{filter:saturate(1.06) contrast(1.04) brightness(1.04);transform:scale(1.06)}
.gsi-thumb:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(0,13,24,.55) 100%);
  transition:opacity .4s ease}
.gsi-card:hover .gsi-thumb:after{opacity:.7}

/* generated plate for articles with no imagery of their own */
.gsi-plate{position:relative;background:
  radial-gradient(circle at 74% 30%,color-mix(in oklab,var(--plate) 46%,transparent),transparent 62%),
  linear-gradient(145deg,#04223b,#00101f 68%)}
.gsi-plate:before{content:"";position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:
    radial-gradient(circle at 40% 36%,color-mix(in oklab,var(--plate) 74%,transparent),transparent 58%);
  opacity:.5;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.gsi-plate:after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 13px,color-mix(in oklab,var(--plate) 12%,transparent) 13px 14px);
  opacity:.5}
.gsi-card:hover .gsi-plate:before{transform:translate(-50%,-50%) scale(1.16);opacity:.72}

.gsi-card-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1;min-width:0}
.gsi-metaline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  color:var(--muted);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  font-variant-numeric:tabular-nums}
.gsi-topic{color:var(--mint)}
.gsi-metaline .gsi-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.gsi-card h2{font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.032em;
  font-size:1.16rem;line-height:1.24;margin:0;color:var(--white);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.24em)}
.gsi-card p{margin:0;color:#c2d6de;line-height:1.6;font-size:.92rem;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.6em)}
.gsi-card .gsi-go{margin-top:auto;padding-top:4px;color:var(--mint);font-size:.82rem;font-weight:850}
.gsi-card .gsi-go:after{content:" \2192";display:inline-block;transition:transform .2s ease}
.gsi-card:hover .gsi-go:after{transform:translateX(4px)}

/* ---------- article ---------- */
.gsi-crumb{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:.8rem;font-weight:700;margin-bottom:20px}
.gsi-crumb a:hover{color:var(--mint)}
.gsi-crumb span{opacity:.5}

.gsi-art-head{max-width:820px}
.gsi-art-head h1{font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.042em;
  font-size:clamp(2rem,3.9vw,3.4rem);line-height:1.06;margin:16px 0 20px;text-wrap:balance}
.gsi-standfirst{font-size:clamp(1.02rem,1.25vw,1.22rem);line-height:1.6;color:#e4f4fb;font-weight:650;max-width:680px;margin:0}
.gsi-meta{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:.8rem;font-weight:750;
  letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.gsi-meta .gsi-dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6}

.gsi-wrap{padding:56px 0 0}
.gsi-body{max-width:68ch;font-size:1.06rem;line-height:1.78;color:#cfe2ea}
.gsi-body>*:first-child{margin-top:0}
.gsi-body p{margin:0 0 1.45em}
.gsi-body h2{font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;
  font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.18;color:var(--white);margin:2.4em 0 .7em;text-wrap:balance}
.gsi-body h3{font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.028em;
  font-size:1.18rem;line-height:1.28;color:var(--white);margin:2em 0 .6em}
.gsi-body h2+p,.gsi-body h3+p{margin-top:0}
.gsi-body a{color:var(--mint);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(185,241,153,.42);transition:text-decoration-color .12s ease}
.gsi-body a:hover{text-decoration-color:var(--mint)}
.gsi-body strong{color:#eaf6fb;font-weight:750}
.gsi-body ul,.gsi-body ol{margin:0 0 1.45em;padding-left:1.25em}
.gsi-body li{margin:0 0 .55em;padding-left:.2em}
.gsi-body li::marker{color:var(--teal)}
.gsi-body blockquote{margin:2em 0;padding:0 0 0 22px;border-left:2px solid var(--teal);
  font-size:1.12rem;line-height:1.6;color:#e4f4fb;font-weight:650}
.gsi-body blockquote p:last-child{margin-bottom:0}
.gsi-body figure{margin:2.2em 0}
.gsi-body img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.gsi-body figcaption{margin-top:10px;color:var(--muted);font-size:.84rem;line-height:1.5}
.gsi-body hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:2.6em 0}
.gsi-body table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:.94rem;font-variant-numeric:tabular-nums}
.gsi-body th,.gsi-body td{text-align:left;padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.12)}
.gsi-body th{color:var(--white);font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}

/* end-of-article */
.gsi-end{max-width:68ch;margin:64px 0 0}
.gsi-cta{border-radius:8px;padding:34px;background:linear-gradient(135deg,rgba(0,180,169,.2),rgba(185,241,153,.1));
  border:1px solid var(--line);display:flex;justify-content:space-between;gap:22px;align-items:center;flex-wrap:wrap}
.gsi-cta h2{font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;
  font-size:1.5rem;line-height:1.16;margin:0 0 8px;color:var(--white)}
.gsi-cta p{margin:0;color:#d7ebf2;line-height:1.6;max-width:44ch}
.gsi-more{margin:64px 0 0}
.gsi-more h2{font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;
  font-size:1.35rem;margin:0 0 20px;color:var(--white)}
.gsi-more-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;list-style:none;padding:0;margin:0}

@media(max-width:980px){
  .gsi-grid,.gsi-more-list{grid-template-columns:1fr 1fr}
  .gsi-mast-inner{padding:48px 0 40px}
  .gsi-wrap{padding:44px 0 0}
}
@media(max-width:620px){
  .gsi-grid,.gsi-more-list{grid-template-columns:1fr}
  .gsi-body{font-size:1.02rem}
  .gsi-cta{display:block}
  .gsi-cta .actions{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
  .gsi-card,.gsi-thumb img,.gsi-plate:before,.gsi-thumb:after,.gsi-card .gsi-go:after{transition:none!important}
  .gsi-card:hover{transform:none}
  .gsi-card:hover .gsi-thumb img{transform:none}
  .gsi-card:hover .gsi-plate:before{transform:translate(-50%,-50%)}
  .gsi-card:hover .gsi-go:after{transform:none}
}

/* screen-reader-only label */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* article masthead with its own commissioned hero behind the title */
.gsi-mast--photo{isolation:isolate}
.gsi-mast-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.62) brightness(.5)}
.gsi-mast--photo:before{z-index:1;
  background:linear-gradient(100deg,rgba(0,13,24,.94) 0%,rgba(0,20,38,.86) 46%,rgba(0,20,38,.58) 100%),
             radial-gradient(circle at 84% 14%,rgba(0,180,169,.14),transparent 26rem)}
.gsi-mast--photo .gsi-mast-inner{z-index:2;padding:84px 0 68px}
@media(max-width:620px){
  .gsi-mast--photo:before{background:linear-gradient(180deg,rgba(0,13,24,.9),rgba(0,20,38,.82))}
  .gsi-mast--photo .gsi-mast-inner{padding:56px 0 46px}
}