/* The guides, styled as the main site's blog: values copied from ~/os-site/site (global.css, PageHero, PostGrid,
   [slug].astro), all scoped under .blog so the Studio pages are untouched. The Studio header is 85px tall and not
   laid over the band, so each top padding is the main site's minus 85. */
.blog {
  --navy: #14202e; --navy-2: #283236; --amber: #f4a622; --amber-2: #faa930; --paper: #f3f2ef;
  --text: #474747; --muted: #797979; --tint: #fafafa; --white: #ffffff;
  --head: Bai, "Bai Jamjuree", sans-serif; --body: Heebo, sans-serif; --gutter: 20px;
  font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 24px; color: var(--muted); background: var(--white);
}
.blog img { max-width: 100%; height: auto; display: block; }
.blog p { margin: 0 0 14px; }
.blog p:last-child { margin-bottom: 0; }
.blog ul { margin: 0 0 20px; padding-left: 20px; }
.blog h1, .blog h2, .blog h3, .blog h4 { font-family: var(--head); font-weight: 700; text-transform: capitalize; letter-spacing: normal; text-wrap: wrap; margin: 0 0 20px; }
.blog h3 { font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--navy); margin-bottom: 15px; }
.blog .container { max-width: 1170px; margin: 0 auto; padding: 0 var(--gutter); }
.blog .center { text-align: center; }

/* Eyebrow: monogram then a tracked 12px label. */
.blog .eyebrow { display: flex; align-items: center; gap: 15px; margin: 0 0 13px; font-family: var(--head); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; line-height: 12px; color: var(--navy); }
.blog .eyebrow::before { content: ""; width: 20px; height: 20px; flex: none; background: url("/media/blog/monogram.png") center / contain no-repeat; }
.blog .eyebrow--center { justify-content: center; }
.blog .eyebrow--stack { flex-direction: column; gap: 8px; margin-bottom: 16px; }

/* PageHero */
.blog .phero { padding: 126px 0 127px; color: var(--paper); border-top: .5px solid rgba(255, 255, 255, .35); }
.blog .phero--navy { background: var(--navy); }
.blog .phero h1 { font-size: 42px; line-height: 50.4px; margin: 0; color: #f2f1ef; }
.blog .phero .eyebrow { color: #f2f1ef; }
.blog .phero__lede { margin: 20px auto 0; font-size: 16px; line-height: 24px; color: #f2f1ef; }

/* PostGrid */
.blog .idx { padding: 74px 0 100px; }
.blog .idx__grid { max-width: 1060px; padding: 0; display: grid; grid-template-columns: 465px 465px; justify-content: space-between; row-gap: 162px; }
.blog .idx__card img, .blog .idx__noimg { display: block; width: 465px; max-width: 100%; height: 262px; object-fit: cover; margin-bottom: 34px; background: var(--tint); }
.blog .idx__card h2 { font-family: var(--head); font-size: 16px; line-height: 24px; font-weight: 600; text-transform: capitalize; color: var(--navy); margin: 0 0 24px; }
.blog .idx__card h2 a { text-decoration: none; color: inherit; }
.blog .idx__card h2 a:hover { color: var(--amber); }
.blog .idx__card p { font-size: 16px; line-height: 24px; color: var(--muted); margin: 0; }

/* The post: title band, framed image, contents box, body, author card, related. */
.blog .ph { background: var(--navy); color: var(--paper); padding: 85px 0 180px; border-top: .5px solid rgba(255, 255, 255, .35); }
.blog .ph__in { max-width: 1000px; margin: 0 auto; padding-left: 22px; }
.blog .ph__meta { display: flex; gap: 16px; align-items: center; margin: 0 0 38px; font-size: 14px; line-height: 24px; color: var(--amber-2); }
.blog .ph__meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog .ph__meta svg { width: 14px; height: 14px; fill: none; stroke: var(--amber); stroke-width: 1.4; }
.blog .ph h1 { font-size: 48px; line-height: 48px; text-transform: capitalize; color: var(--paper); margin: 0; max-width: 768px; }
.blog .ph__author { display: flex; align-items: flex-start; gap: 20px; margin-top: 46px; min-height: 82px; }
.blog .ph__author img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.blog .ph__name { font-size: 17px; line-height: 26px; font-weight: 400; color: var(--amber-2); margin: 8px 0 6px; }
.blog .ph__bio { font-size: 12px; line-height: 17px; font-weight: 300; color: #e9e9e9; margin: 0; max-width: 338px; }
.preview-strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #f4a622; color: #16202d; font: 600 14px/1.4 Heebo, sans-serif; text-align: center; padding: 10px 20px; }

.blog .pb__in { max-width: 1000px; margin: 0 auto; }
.blog .pb__frame { position: relative; margin-top: -100px; background: var(--white); border: 1px solid #ebebeb; padding: 20px; }
.blog .pb__frame img { display: block; width: 958px; max-width: 100%; height: auto; }
.blog .toc { margin-top: 59px; background: rgba(243, 242, 239, .56); border: 1px solid #e4e4e4; }
.blog .toc__head { background: var(--navy); padding: 23px; }
.blog .toc__h { font-family: var(--head); font-size: 21px; line-height: 27.3px; font-weight: 600; text-transform: capitalize; color: var(--paper); margin: 0; }
.blog .toc ul { list-style: none; margin: 0; padding: 24px 24px 23px; }
.blog .toc li { font-size: 16px; line-height: 24px; margin: 0 0 8px; padding-left: 20px; position: relative; }
.blog .toc li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-right: 1px solid #9b9b9b; border-top: 1px solid #9b9b9b; transform: rotate(45deg); }
.blog .toc a { color: var(--text); text-decoration: none; font-weight: 300; }
.blog .toc a:hover { color: var(--amber-2); }
.blog .pb__mark { width: 120px; height: 4px; background: var(--amber-2); margin-top: 41px; }

.blog .body { max-width: 960px; margin: 0 auto; padding-top: 50px; }
.blog .body h2 { font-size: 20px; line-height: 26px; font-weight: 600; text-transform: capitalize; color: var(--navy-2); margin: 53px 0 16px; }
.blog .body .md > h2:first-child { margin-top: 8px; }
.blog .body hr.amber { border: 0; height: 1px; background: var(--amber-2); margin: 49px 0 0; }
.blog .body hr.amber + h2 { margin-top: 44px; }
.blog .body p, .blog .body li { font-size: 16px; line-height: 24px; font-weight: 300; color: var(--navy); margin: 0 0 14.4px; }
.blog .body li { font-weight: 400; margin: 0; }
.blog .body ul, .blog .body ol { margin: 0 0 14.4px; padding-left: 40px; }
.blog .body a { color: var(--amber); text-decoration: none; }
.blog .body a:hover { text-decoration: underline; }
.blog .body strong { font-weight: 700; }
.blog .body blockquote { margin: 16px 0 16px 40px; padding: 0; border: 0; font-style: normal; }
.blog .body img { margin: 24px auto; height: auto; }
/* Tables: the data posts carry them. Hairlines and type from the main site's tables. */
.blog .body table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 15px; line-height: 22px; }
.blog .body th, .blog .body td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid #e4e4e4; color: var(--navy); font-weight: 300; }
.blog .body th { font-family: var(--head); font-weight: 600; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; background: rgba(243, 242, 239, .56); border-bottom: 1px solid #d5d8dc; }
.blog .body .tbl { overflow-x: auto; }

.blog .body .key { position: relative; background: var(--navy-2); padding: 40px 40px 50px; margin: 84px 0 71px; }
.blog .body .key::before, .blog .body .key::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #000; }
.blog .body .key::before { top: -35px; }
.blog .body .key::after { bottom: -35px; }
.blog .body .key h3 { font-size: 24px; line-height: 28.8px; font-weight: 600; text-transform: capitalize; color: var(--white); margin: 8px 0 16px; }
.blog .body .key li { color: var(--white); margin-bottom: 24px; }
.blog .body .key li:last-child { margin-bottom: 0; }
.blog .body .key + h2 { font-size: 24px; line-height: 28.8px; color: var(--navy); margin: 0 0 20px; }

.blog .acc__item { margin-bottom: 10px; }
.blog .acc__q { margin: 0; font: inherit; text-transform: none; }
.blog .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.blog .acc__panel > div { overflow: hidden; }
.blog .acc__item[data-open] .acc__panel { grid-template-rows: 1fr; }
.blog .acc__btn { cursor: pointer; width: 100%; text-align: left; position: relative; }
.blog .body .acc--post { margin: 0; }
.blog .body .acc--post .acc__item { margin: 0; border: 1px solid #d5d8dc; border-top: 0; }
.blog .body .acc--post .acc__item:first-child { border-top: 1px solid #d5d8dc; }
.blog .body .acc--post .acc__btn { display: flex; align-items: center; gap: 0; background: var(--navy-2); color: var(--amber-2); border: 0; margin: 0; padding: 15px 20px; font-family: var(--body); font-size: 16px; line-height: 16px; font-weight: 400; text-transform: none; text-decoration: none; }
.blog .body .acc--post .acc__btn::before { content: "+"; width: 24px; flex: none; font-weight: 700; }
.blog .body .acc--post .acc__item[data-open] .acc__btn { color: var(--white); }
.blog .body .acc--post .acc__item[data-open] .acc__btn::before { content: "\2212"; }
.blog .body .acc--post .acc__panel > div { padding: 0 20px; }
.blog .body .acc--post .acc__item[data-open] .acc__panel > div { padding: 15px 20px; border-top: 1px solid #d5d8dc; }
.blog .body .acc--post .acc__panel p { padding: 0; color: var(--navy); font-weight: 300; margin: 0 0 14.4px; }

.blog .bio { display: flex; gap: 40px; align-items: flex-start; margin: 40px 10px 0; padding: 12px 12px 19px; }
.blog .bio img { width: 120px; height: 120px; display: block; }
.blog .bio__name { font-size: 22px; line-height: 24px; font-weight: 600; color: #111; margin: 0 0 12px; }
.blog .bio__line { font-size: 18px; line-height: 24px; font-weight: 300; color: #111; margin: 0; }
.blog .bio__line a { color: var(--amber); text-decoration: none; }
.blog .pb__mark--2 { width: 118px; margin: 40px 0 0 10px; }
.blog .disc { margin: 20px 10px 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.blog .disc a { color: var(--amber); text-decoration: none; }
.blog .pb__rule { height: 1px; background: #ebebeb; margin: 50px 10px 0; }

.blog .rel { padding: 66px 0 120px; }
.blog .rel__in { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 535px 535px; justify-content: space-between; }
.blog .rel__card { padding: 21px 30px 30px; }
.blog .rel__card img { width: 475px; max-width: 100%; height: 267px; object-fit: cover; display: block; margin-bottom: 32px; }
.blog .rel__card h3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--navy-2); margin: 0 0 24px; }
.blog .rel__card h3 a { text-decoration: none; color: inherit; }
.blog .rel__card h3 a:hover { color: var(--amber); }
.blog .rel__card p { font-size: 16px; line-height: 24px; color: var(--muted); margin: 0 0 28px; }
.blog .rel__more { font-family: var(--head); font-size: 12px; line-height: 17px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); text-decoration: none; }

@media (max-width: 1060px) { .blog .ph__in, .blog .pb__in { padding-left: 20px; padding-right: 20px; } .blog .rel__in { grid-template-columns: 1fr; padding: 0 20px; } .blog .rel__card img { width: 100%; height: auto; } }
@media (max-width: 991px) { .blog .idx__grid { grid-template-columns: 1fr; row-gap: 64px; } .blog .idx__card img, .blog .idx__noimg { width: 100%; height: auto; aspect-ratio: 465 / 262; } .blog .idx { padding: 40px 0 64px; } }
@media (max-width: 767px) {
  .blog .phero { padding: 44px 0 44px; } .blog .phero h1 { font-size: 32px; line-height: 1.15; }
  .blog .ph { padding: 45px 0 90px; } .blog .ph h1 { font-size: 32px; line-height: 1.1; }
  .blog .pb__frame { margin-top: -60px; padding: 10px; } .blog .body { margin-top: 32px; }
  .blog .body h2 { margin-top: 40px; }
  .blog .body .key { padding: 24px; } .blog .bio { flex-direction: column; gap: 16px; }
}
/* Prompts and other fenced code: tinted box on the main site's palette. */
.blog .body pre { background: rgba(243, 242, 239, .56); border: 1px solid #e4e4e4; padding: 16px; margin: 8px 0 24px; overflow-x: auto; white-space: pre-wrap; }
.blog .body pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 21px; color: var(--navy); font-weight: 400; }
.blog .body p code, .blog .body li code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: rgba(243, 242, 239, .8); padding: 1px 4px; }