/* The Brook article pages.
   The article owns its visual hierarchy so campaign and event treatments do
   not compete with the title, cover art, or long-form reading experience. */

.blog-post-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(500px,47vw,620px);
  padding:clamp(70px,7vw,98px) 0;
  background:
    radial-gradient(62% 92% at 76% 18%,rgba(70,179,216,.13),transparent 66%),
    linear-gradient(118deg,#061722 0%,#082536 58%,#0b3045 100%);
}
.blog-post-hero::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-26%;
  right:-9%;
  width:min(62vw,840px);
  aspect-ratio:1;
  border:1px solid rgba(105,198,230,.09);
  border-radius:50%;
  box-shadow:0 0 0 72px rgba(105,198,230,.035),0 0 0 148px rgba(105,198,230,.02);
  pointer-events:none;
}
.blog-post-current{
  position:absolute;
  z-index:1;
  left:-3%;
  bottom:-34px;
  width:106%;
  height:180px;
  pointer-events:none;
}
.blog-post-current path{
  fill:none;
  stroke:rgba(70,179,216,.3);
  stroke-width:2.5;
  stroke-linecap:round;
}
.blog-post-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,720px);
  align-items:center;
  gap:clamp(42px,5vw,76px);
  width:100%;
}
.blog-post-hero.has-cover .blog-post-hero-grid{
  grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
}
.blog-post-intro{min-width:0;max-width:700px;}
.blog-post-hero .post-tag{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--blue2);
  font-family:var(--font-heading);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.21em;
  line-height:1.2;
  text-transform:uppercase;
}
.blog-post-hero .post-tag::before{
  content:"";
  width:29px;
  height:14px;
  flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 14'%3E%3Cpath d='M1 4.5c4-4 7 4 11 0s7 4 11 0 4 2 5 0M1 9.5c4-4 7 4 11 0s7 4 11 0 4 2 5 0' fill='none' stroke='%2346B3D8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.blog-post-hero .post-tag:empty{display:none;}
.blog-post-hero h1{
  max-width:14ch;
  margin:21px 0 0;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(3rem,4.6vw,4.55rem);
  font-weight:400;
  letter-spacing:.005em;
  line-height:.96;
  text-wrap:balance;
  overflow-wrap:break-word;
  text-shadow:0 8px 32px rgba(0,0,0,.42);
}
.blog-post-hero .post-meta{
  margin-top:21px;
  color:rgba(255,255,255,.7);
  font-family:var(--font-heading);
  font-size:.79rem;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.5;
  text-transform:uppercase;
}
.blog-post-watch{margin-top:27px;}
.blog-post-watch:empty{display:none;}
.blog-post-watch .post-watch{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  color:#fff;
  font-size:.94rem;
  font-weight:700;
  text-decoration:none;
}
.blog-post-watch .post-watch-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid rgba(105,198,230,.58);
  border-radius:50%;
  background:rgba(70,179,216,.1);
  color:var(--blue2);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  transition:background .2s,border-color .2s,transform .2s;
}
.blog-post-watch .post-watch-icon svg{width:16px;height:16px;margin-left:2px;}
.blog-post-watch .post-watch-label{
  padding:3px 0 5px;
  border-bottom:1px solid rgba(105,198,230,.38);
  transition:border-color .2s,color .2s;
}
.blog-post-watch .post-watch:hover .post-watch-icon{
  transform:translateY(-2px);
  border-color:var(--blue2);
  background:rgba(70,179,216,.2);
}
.blog-post-watch .post-watch:hover .post-watch-label{color:var(--blue2);border-color:var(--blue2);}
.blog-post-watch .post-watch:focus-visible,.post-back-link:focus-visible,.blog-post-invite a:focus-visible{
  outline:3px solid rgba(105,198,230,.62);
  outline-offset:5px;
}

.blog-post-art{
  position:relative;
  min-width:0;
  aspect-ratio:16/9;
  margin:0;
  padding:9px 0;
}
.blog-post-art::before{
  content:"";
  position:absolute;
  top:14%;
  bottom:14%;
  left:-18px;
  width:1px;
  background:linear-gradient(transparent,rgba(105,198,230,.7) 24% 76%,transparent);
  box-shadow:0 0 16px rgba(70,179,216,.24);
}
.blog-post-art::after{
  content:"";
  position:absolute;
  left:-22px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue2);
  box-shadow:0 0 0 5px rgba(70,179,216,.1),0 0 14px rgba(105,198,230,.56);
  transform:translateY(-50%);
}
.blog-post-cover-image{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#081e2b;
  box-shadow:0 24px 54px rgba(0,0,0,.32);
}

.blog-post-reading{
  position:relative;
  padding:clamp(62px,7vw,94px) 0 clamp(76px,8vw,108px);
  background:radial-gradient(55% 30% at 50% 0,rgba(21,65,98,.2),transparent 78%),var(--ink);
}
.blog-post-reading-wrap{max-width:900px;}
.blog-post-waterline{
  display:flex;
  align-items:center;
  gap:17px;
  width:min(100%,70ch);
  margin:0 auto 37px;
}
.blog-post-waterline::before{
  content:"";
  width:42px;
  height:16px;
  flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 16'%3E%3Cpath d='M1 5c4-4 7 4 11 0s7 4 11 0 7 4 11 0 5 2 7 0M1 11c4-4 7 4 11 0s7 4 11 0 7 4 11 0 5 2 7 0' fill='none' stroke='%2346B3D8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.blog-post-waterline::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(70,179,216,.46),transparent);
}
.blog-post-reading .post-body{
  width:min(100%,70ch);
  max-width:none;
  margin:0 auto;
}
.blog-post-reading .post-body > :first-child{margin-top:0;}
.blog-post-reading .post-body p,
.blog-post-reading .post-body li{
  color:rgba(255,255,255,.76);
  font-size:clamp(1.03rem,.25vw + 1rem,1.13rem);
  line-height:1.8;
}
.blog-post-reading .post-body p{margin:0 0 1.45em;}
.blog-post-reading .post-body .lead,
.blog-post-reading .post-body > p:first-child{
  color:#fff;
  font-size:clamp(1.2rem,.5vw + 1.12rem,1.43rem);
  font-weight:500;
  line-height:1.55;
  margin-bottom:1.55em;
}
.blog-post-reading .post-body ul,.blog-post-reading .post-body ol{margin-bottom:1.6em;}
.blog-post-reading .post-body li{margin-bottom:.62em;}
.blog-post-reading .post-body li::marker{color:var(--blue2);font-weight:700;}
.blog-post-reading .post-body h2{
  margin:3.15rem 0 1rem;
  color:#fff;
  font-family:var(--font-heading);
  font-size:clamp(1.55rem,2.4vw,2.05rem);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.14;
  text-transform:none;
  scroll-margin-top:100px;
}
.blog-post-reading .post-body h2::before{
  content:"";
  display:block;
  width:34px;
  height:12px;
  margin-bottom:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 4c4-4 7 4 11 0s7 4 11 0 6 3 10 0M1 9c4-4 7 4 11 0s7 4 11 0 6 3 10 0' fill='none' stroke='%2346B3D8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.blog-post-reading .post-body h3{
  margin:2.35rem 0 .8rem;
  color:#fff;
  font-family:var(--font-heading);
  font-size:clamp(1.18rem,1.8vw,1.42rem);
  font-weight:600;
  line-height:1.2;
  text-transform:none;
  scroll-margin-top:100px;
}
.blog-post-reading .post-body strong{color:#fff;}
.blog-post-reading .post-body blockquote{
  margin:2rem 0;
  padding:1.2rem 0 1.2rem 1.65rem;
  border:0;
  border-left:2px solid var(--blue);
  border-radius:0;
  background:linear-gradient(90deg,rgba(70,179,216,.1),transparent 76%);
  color:#fff;
  font-size:1.06em;
  line-height:1.72;
}
.blog-post-reading .post-body a{overflow-wrap:anywhere;text-decoration-thickness:1px;}
.blog-post-reading .post-body a:focus-visible{outline:3px solid rgba(105,198,230,.55);outline-offset:3px;}
.blog-post-reading .post-body img,.blog-post-reading .post-body video{width:100%;height:auto;border-radius:0;}
.blog-post-reading .post-body iframe{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:0;}
.blog-post-reading .post-body figure{margin:2rem 0;}
.blog-post-reading .post-body figcaption{margin-top:.65rem;color:var(--mut);font-size:.86rem;line-height:1.5;}
.blog-post-reading .post-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;}
.blog-post-reading .post-body pre{max-width:100%;overflow:auto;}
.blog-post-reading .post-body code{overflow-wrap:anywhere;}
.blog-post-reading .post-foot{
  width:min(100%,70ch);
  max-width:none;
  margin:3.3rem auto 0;
  padding-top:1.65rem;
  border-top:1px solid rgba(105,198,230,.2);
}
.post-back-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  color:var(--blue2);
  font-size:.92rem;
  font-weight:700;
}
.post-back-link svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s;
}
.post-back-link:hover svg{transform:translateX(-3px);}

.blog-post-invite{
  display:block;
  border-top:1px solid rgba(105,198,230,.2);
  border-bottom:1px solid rgba(105,198,230,.14);
  background:#082838;
}
.blog-post-invite-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:112px;
  padding-top:24px;
  padding-bottom:24px;
}
.blog-post-invite-inner > div{display:grid;gap:3px;}
.blog-post-invite span{
  color:var(--blue2);
  font-family:var(--font-heading);
  font-size:.67rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.blog-post-invite strong{color:#fff;font-size:clamp(1.05rem,1.8vw,1.32rem);line-height:1.35;}
.blog-post-invite a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  white-space:nowrap;
}
.blog-post-invite a svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:var(--blue2);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .2s;
}
.blog-post-invite a:hover svg{transform:translateX(3px);}

@media(max-width:900px){
  .blog-post-hero{min-height:0;padding:66px 0 72px;}
  .blog-post-hero.has-cover .blog-post-hero-grid{grid-template-columns:1fr;}
  .blog-post-intro{max-width:760px;}
  .blog-post-art{width:min(100%,760px);}
}

@media(max-width:720px){
  .blog-post-hero{padding:48px 0 57px;}
  .blog-post-hero::before{top:-5%;right:-58%;width:135vw;}
  .blog-post-current{bottom:-59px;height:150px;}
  .blog-post-hero-grid{gap:34px;}
  .blog-post-hero h1{max-width:18ch;margin-top:17px;font-size:clamp(2.35rem,10.6vw,3.1rem);line-height:.98;}
  .blog-post-hero .post-tag{font-size:.68rem;letter-spacing:.18em;}
  .blog-post-hero .post-meta{margin-top:17px;font-size:.75rem;letter-spacing:.08em;}
  .blog-post-watch{margin-top:21px;}
  .blog-post-art{padding:6px 0;}
  .blog-post-art::before{left:-10px;}
  .blog-post-art::after{left:-14px;}
  .blog-post-reading{padding:52px 0 70px;}
  .blog-post-waterline{margin-bottom:29px;}
  .blog-post-reading .post-body h2{margin-top:2.65rem;}
  .blog-post-reading .post-foot{margin-top:2.65rem;}
  .blog-post-invite-inner{align-items:flex-start;flex-direction:column;gap:14px;min-height:0;padding-top:25px;padding-bottom:25px;}
}

@media(max-width:360px){
  .blog-post-hero{padding-top:42px;}
  .blog-post-hero h1{font-size:2.18rem;}
  .blog-post-hero .post-tag{font-size:.64rem;letter-spacing:.15em;}
}

@media(prefers-reduced-motion:reduce){
  .blog-post-watch .post-watch-icon,.post-back-link svg,.blog-post-invite a svg{transition:none;}
}