/* Juice — the look locked on home-next.html.
   Load after live pbgai.css + pbgai-media.css + pbgai-talk.css + band-signatures.css.
   Do not invent a second system. Home-only piece: .hero-cover. Shared: nav pin,
   sheet, windows, overlap, paper, green footer, post type.
   Guide typed elements (badges, tables, rule cards, copy blocks, steps,
   resource rows) live in this file too — not a second system. */

:root{ --desk-flag-h: 0rem; }

/* Horizontal-scroll containment for the full-bleed .hero-cover / .page-window
   (they use width:100vw + negative margin to break their container).
   Belongs on the root, not a wrapper div — overflow-x on a nested element
   like .site-sheet turns it into a scroll container, which silently breaks
   position:sticky for anything inside it (.post-rail). html is the root
   scroller already, so this contains the same overflow without that cost. */
html{ overflow-x: hidden; }
.desk-flag{
  position:fixed; top:0; left:0; right:0; z-index:80;
  min-height: var(--desk-flag-h);
  font-family: var(--font-data, ui-monospace, monospace);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:#1B3A2D; color:#F5F1E8;
  padding:.45rem 1.75rem;
}
.desk-flag a{color:#F5F1E8; border-bottom-color:rgba(169,136,79,.55)}

body{ padding-bottom:0; }

.section-paper{
  position:relative;
  max-width:100%;
  margin:3rem 0;
  padding:2.25rem 2rem;
  background: var(--card);
  border:1px solid var(--stone);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.section-paper h2{
  font-family: var(--font-display);
  font-weight:400;
  color: var(--green);
  margin:0 0 .65rem;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  max-width: 26ch;
}
.section-paper p{
  color: var(--ink);
  font-size:1.02rem;
  line-height:1.6;
  max-width: 42rem;
  margin-bottom:1.05rem;
}
.section-paper p:last-child{ margin-bottom:0; }

.site-footer--green{
  border-top: none;
  padding-bottom: 5.625rem;
  --brass-on-dark:#C4AD85;
}
.site-footer--green .site-footer-inner,
.site-footer--green .site-footer-bottom{ position: relative; z-index: 1; }
.site-footer--green .firm{ color: var(--cream); }
.site-footer--green .firm .ai{ color: var(--brass-on-dark); }
.site-footer--green p,
.site-footer--green li{ color: var(--cream); }
.site-footer--green .col-title{ color: var(--brass-on-dark); }
.site-footer--green a{ color: var(--cream); border-bottom-color: transparent; }
.site-footer--green a:hover{ border-bottom-color: var(--brass); }
.site-footer--green .site-footer-bottom{
  border-top-color: var(--green-deep);
  color: var(--cream);
}

.band--brown, .band--gold{
  margin: 2rem 0;
  padding: 1.6rem 1.85rem;
  border-radius: var(--radius);
}
.band--brown p, .band--gold p{
  color: rgba(245, 241, 232, 0.9);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 40rem;
  margin: 0;
}
.band--brown p:not(:last-child){ margin-bottom: 1.1rem; }
.band--brown a, .band--gold a{ color: var(--cream); border-bottom-color: rgba(169, 136, 79, .55); }

.site-nav{
  position: fixed !important;
  top: var(--desk-flag-h);
  left: 0;
  right: 0;
  z-index: 70;
}

.hero-cover{
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 28rem;
  overflow: hidden;
  background: #0F241A;
}
.hero-cover .hero-media{
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.hero-cover picture{
  display: block;
  position: absolute;
  inset: -8% 0;
}
.hero-cover img{
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 52% 58%;
  box-shadow: none;
  will-change: transform;
}
.hero-cover-cue{
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  font-family: var(--font-data, ui-monospace, monospace);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F5F1E8;
  text-shadow: 0 1px 8px rgba(15,36,26,.45);
  pointer-events: none;
}
/* The linen weave lives on `body::before` in pbgai.css — fixed, z-index 0.
   This sheet is z-index 1 with an opaque cream fill, so it covered the weave
   completely; /preview/projects/ still showed it only because that page has no
   .site-sheet. Making the sheet transparent would lose the paper-lifted-off-
   the-ground effect the cream and the shadow create, so the sheet carries the
   weave itself. Same two gradients, same 3px/4px pitch; the alpha is the
   original 0.4/0.25 pre-multiplied by its 0.035 opacity, which reproduces the
   multiply blend without a pseudo-element that would paint over the content. */
/* This sheet used to be a flat opaque cream at z-index 1, which covered two
   things `pbgai.css` paints underneath: the linen weave on `body::before`, and
   body's atmospheric-paper gradient stack. /preview/projects/ still looked
   right only because that page has no .site-sheet. Transparent is not the fix —
   body sets `background-attachment: fixed`, so on a long page it stops painting
   and the sheet goes white. So the sheet carries the paper itself: the same
   radial warm/green/brass wash and cream→cream-deep base as body, plus the
   weave inline (alpha = the original 0.4/0.25 pre-multiplied by its 0.035
   opacity, reproducing the multiply blend without a pseudo-element that would
   paint over the content). */
.site-sheet{
  position: relative;
  z-index: 1;
  background-color: var(--cream, #F5F1E8);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(33,30,27,.014) 2px, rgba(33,30,27,.014) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(33,30,27,.009) 3px, rgba(33,30,27,.009) 4px),
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255,252,245,.9), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(27,58,45,.035), transparent 50%),
    radial-gradient(ellipse 50% 30% at 0% 80%, rgba(169,136,79,.04), transparent 45%),
    linear-gradient(180deg, var(--cream, #F5F1E8) 0%, var(--cream-deep, #EBE6DA) 100%);
  box-shadow: 0 -24px 48px rgba(33,30,27,.16);
  padding-top: calc(var(--desk-flag-h) + var(--nav-h, 4rem));
}

.page-window{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 46vh;
  min-height: 14rem;
  overflow: hidden;
  background: #0F241A;
}
.page-window img{
  position: absolute;
  top: -35%;
  left: 0;
  width: 100%;
  height: 170%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}
.page-window::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--brass), var(--green) 70%) top / 100% 3px no-repeat,
    linear-gradient(90deg, var(--brass), var(--green) 70%) bottom / 100% 3px no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(33,30,27,.28),
    inset 0 -1px 0 rgba(33,30,27,.28),
    inset 0 22px 36px rgba(15,36,26,.38),
    inset 0 -22px 36px rgba(15,36,26,.38);
}
/* Live .wrap carries a 5.5rem bottom pad meant for the last .wrap on a
   page, before the footer. Wrong when a .page-window sits right after it —
   pushes the photo down for no reason. Zero it just there. */
.wrap:has(+ .page-window){ padding-bottom: 0; }

.page-window + .band--brown,
.page-window + .band--green{
  margin-top: -4.5rem;
  position: relative;
  z-index: 3;
}
.page-window:has(+ .band--brown)::after,
.page-window:has(+ .band--green)::after{
  background: linear-gradient(90deg, var(--brass), var(--green) 70%) top / 100% 3px no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(33,30,27,.28),
    inset 0 22px 36px rgba(15,36,26,.38),
    inset 0 -36px 48px rgba(15,36,26,.28);
}

@media (prefers-reduced-motion: reduce){
  .hero-cover picture{ inset: 0; }
  .hero-cover img{ transform: none !important; }
  .page-window img{ transform: none !important; }
}

/* Post type — the Helio recipe, on juice tokens only. No tokens.css. */
.post{ padding: 1.25rem 0 4rem; }
.post--index{ padding-bottom: 0; }
.post--index .wrap{ padding-bottom: 0; }
/* .crumbs — live pbgai.css. Do not restyle. */
.post-meta{
  display:flex; gap:1.1rem; align-items:baseline;
  margin: 0 0 .85rem;
  font-family: var(--font-data, ui-monospace, monospace);
  font-size: .81rem; color: var(--driftwood);
}
.post-meta .dot{ color: var(--brass); }
.post h1{
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  line-height: 1.2; max-width: 24ch; margin-bottom: 1.15rem;
}
.post-tags{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: 2rem; }
.tag-chip{
  font-size: .78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--driftwood); background: var(--card);
  border:1px solid var(--stone); border-radius: var(--radius);
  padding: .3rem .75rem;
}
.post-grid{
  display:grid; grid-template-columns: 1fr 18rem;
  gap: 3.5rem; align-items:start; margin-top: 2.25rem;
}
.post-body{ max-width: 66ch; }
.post-body .lede{ font-size: 1.18rem; color: var(--ink); margin-bottom: 1.6rem; }
.post-body h2{ font-size: 1.55rem; margin: 2.4rem 0 .75rem; }
.post-body h3{ font-size: 1.2rem; margin: 1.8rem 0 .55rem; }
.post-body p{ margin-bottom: 1.05rem; }
.post-body a{ color: var(--green); border-bottom: 1px solid var(--brass); }
.post-body a:hover{ color: var(--green-mid); }
.post-body ul, .post-body ol{ margin: 0 0 1.05rem 1.35rem; }
.post-body li{ margin-bottom: .45rem; }
.pull{
  border-left: 3px solid var(--brass);
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin: 1.8rem 0;
}
.pull p{
  font-family: var(--font-display); font-style: italic;
  font-size: 1.22rem; color: var(--green); line-height: 1.45; margin: 0;
}
.pull cite{
  display:block; font-style:normal;
  font-family: var(--font-data, ui-monospace, monospace);
  font-size: .75rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--driftwood); margin-top: .7rem;
}
.post-rail{
  position: sticky;
  top: calc(var(--desk-flag-h) + var(--nav-h, 4rem) + 1rem);
  display:flex; flex-direction:column; gap: 1.5rem;
}
.rail-label{
  font-size: .75rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--driftwood);
}
.post-card{
  display:block; text-decoration:none;
  background: var(--card); border: 1px solid var(--stone);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
}
.post-card:hover{ border-color: var(--brass); }
.post-card .read{
  font-family: var(--font-data, ui-monospace, monospace);
  font-size: .69rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--brass); display:block; margin-bottom: .45rem;
}
.post-card h3{ font-size: 1.05rem; line-height: 1.4; margin-bottom: .55rem; }
.post-card .byline{
  display:flex; justify-content:space-between; gap: .6rem;
  font-size: .81rem; color: var(--driftwood);
}
.post-index{ display:flex; flex-direction:column; gap:1rem; margin-top:.25rem; }
.post-index .post-card{ padding:1.35rem 1.3rem; }
.post-index .post-card h3{ font-size:1.22rem; margin-bottom:.5rem; }
.post-featured h1 a{
  color: inherit;
  border-bottom: none;
}
.post-featured h1 a:hover{ color: var(--green); }
.post-continue{
  display: inline-block;
  font-family: var(--font-data, ui-monospace, monospace);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .4rem;
}

.blog-latest{
  display: grid;
  grid-template-columns: 1fr 17rem;
  gap: 2rem 2.25rem;
  align-items: start;
  margin: 1.15rem 0 1rem;
  padding: 2rem 2rem 1.85rem;
}
.blog-latest h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  max-width: 22ch;
  color: #F5F1E8;
  margin: 0 0 1rem;
}
.blog-latest h1 a{ color: #F5F1E8; border-bottom: none; }
.blog-latest h1 a:hover{ border-bottom: 1px solid var(--brass); }
.blog-latest .post-meta{ color: rgba(245,241,232,.78); }
.blog-latest .lede{
  color: rgba(245,241,232,.92);
  font-size: 1.12rem;
  max-width: 42rem;
  margin: 0 0 1.05rem;
}
.blog-latest-who .who-name{ color: #F5F1E8; }
.blog-latest-who .who-role{ color: rgba(245,241,232,.8); }
.blog-latest-who .who-avatar{ border-color: rgba(245,241,232,.35); }
.blog-latest-who .rail-social a{
  color: #F5F1E8;
  border-color: rgba(245,241,232,.35);
}
.blog-latest-who .rail-social a:hover{ border-color: #F5F1E8; color: #F5F1E8; }
.blog-latest-who .fine{
  font-size: .78rem;
  color: rgba(245,241,232,.78);
  margin: .9rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(245,241,232,.25);
}
@media (max-width: 800px){
  .blog-latest{ grid-template-columns: 1fr; }
}
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 1rem;
  align-items: stretch;
}
.blog-grid .post-card{ height: 100%; }
@media (max-width: 900px){
  .blog-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .blog-grid{ grid-template-columns: 1fr; }
}
.rail-sub{
  background: var(--card); border: 1px solid var(--stone);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius); padding: 1.4rem 1.25rem;
}
.rail-sub h3{ font-size: 1.15rem; margin-bottom: .45rem; }
.rail-sub p{ font-size: .9rem; color: var(--driftwood); margin-bottom: .9rem; }
.rail-sub .fine{ font-size: .78rem; color: var(--driftwood); margin: .55rem 0 0; }

/* Image + video treatment for a reading note. Text stays clear of the
   plate — a little air above, more below, before the next line starts. */
.post-body img{
  display: block;
  height: auto;
  margin: .5rem 0 1.15rem;
  border-radius: var(--radius);
  cursor: zoom-in;
}
.post-body .post-video{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: .5rem 0 1.15rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--stone);
}
.post-body .post-video iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.post-body .post-diagram{
  position: relative;
  display: block;
  width: min(100%, 24rem);
  height: auto;
  aspect-ratio: 400 / 720;
  margin: .5rem 0 1.15rem;
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.post-body .post-diagram iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.post-body .post-diagram-hit{
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  font-family: var(--font-data, ui-monospace, monospace);
  font-size: .69rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  background: #1B3A2D;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  padding: .35rem .7rem;
  cursor: zoom-in;
}
.post-body .post-diagram-hit:hover{ border-color: var(--cream); }

.juice-box{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1.5rem 1.5rem;
  background: rgba(15, 36, 26, .82);
}
.juice-box[hidden]{ display: none; }
.juice-box-stage{
  width: min(28rem, 100%);
  height: min(92vh, 52rem);
  background: var(--cream, #F5F1E8);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 900px){
  .juice-box-stage{ width: min(26rem, 100%); }
}
.juice-box-stage img,
.juice-box-stage iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
.juice-box-close{
  position: fixed;
  top: calc(var(--desk-flag-h, 2.15rem) + 4.25rem);
  right: 1.5rem;
  z-index: 91;
  font-family: var(--font-data, ui-monospace, monospace);
  font-size: .69rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream, #F5F1E8);
  background: #1B3A2D;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  padding: .4rem .8rem;
  cursor: pointer;
}

/* Who-card — source people in the rail: avatar, name, role, socials.
   No heading. Names carry the credit. Juice colours only. */
.rail-who{
  background: var(--card); border: 1px solid var(--stone);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius); padding: 1.4rem 1.25rem;
}
.rail-who h3{ font-size: 1.15rem; margin-bottom: 1rem; }
.who-person{
  display: flex; gap: .85rem; align-items: flex-start;
  margin-bottom: 1.1rem;
}
.who-avatar{
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--stone);
}
.who-meta{ min-width: 0; }
.who-name{ font-weight: 600; color: var(--green); font-size: .96rem; line-height: 1.3; }
.who-role{ font-size: .81rem; color: var(--driftwood); margin: .1rem 0 .5rem; }
.rail-social{ display: flex; gap: .55rem; }
.rail-social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--stone);
  color: var(--driftwood);
}
.rail-social a:hover{ color: var(--green); border-color: var(--brass); }
.rail-who .fine{
  font-size: .78rem; color: var(--driftwood);
  margin: .9rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--stone);
}

/* —— Guide prose (lifted from /preview/guide private <style>) ——
   Typed elements a note can write without inventing a look.
   Spine stays on the guide: topstrip, phase pills, locks, path-picker.
   table.data and .qa already live in pbgai.css; aliases below so
   copied guide markup still paints. */

.badge-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.85rem 0 .25rem; }
.badge, .tag-chip{
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .28rem .55rem;
  border-radius: var(--radius); border: 1px solid var(--stone);
  color: var(--driftwood); background: var(--card);
}
.badge.emphasis, .tag-chip.emphasis{ color: var(--green); border-color: var(--green); }
.badge.brass, .tag-chip.brass{ color: var(--brass); border-color: var(--brass); }
.chip{
  background: var(--card); border: 1px solid var(--stone);
  border-radius: var(--radius); padding: .2rem .5rem;
  letter-spacing: .04em; font-size: 12px;
}
.chip.time{ color: var(--brass); }
.chip.gate{ color: var(--green); }

.callout{
  border-radius: var(--radius); padding: 1.25rem 1.35rem; margin: 1.25rem 0;
  border: 1px solid var(--stone); background: var(--card);
  box-shadow: var(--shadow); max-width: 48rem;
}
.callout.gold, .callout.purple{ border-left: 3px solid var(--brass); }
.callout.green{
  border-left: 3px solid var(--green);
  background: linear-gradient(135deg, var(--cream-deep), var(--card));
}
.callout.red{ border-left: 3px solid var(--oxblood); }
.callout.blue{ border-left: 3px solid var(--green-mid); }
.callout h2, .callout h3{
  font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
  color: var(--green); margin: 0 0 .45rem; max-width: none;
}
.callout p, .callout li{ font-size: .96rem; color: var(--ink); max-width: none; }
.callout ul, .callout ol{ padding-left: 1.2rem; margin: .4rem 0; max-width: none; }
.callout li{ margin: .28rem 0; }

.rules-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
  margin: .75rem 0 1.25rem; max-width: 48rem;
}
.guide-rule{
  background: var(--cream); border: 1px solid var(--stone);
  border-radius: var(--radius); padding: .8rem .9rem;
  font-size: .9rem; box-shadow: var(--shadow);
}
.guide-rule strong{
  display: block; margin-bottom: .3rem; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brass);
  font-family: var(--font-body);
}

/* table.data is styled by live pbgai.css already — do not redeclare it here. */
.post-body table,
table.cost, table.cmp{
  width: 100%; max-width: 48rem; border-collapse: collapse;
  font-size: .92rem; margin: .85rem 0 1.35rem; box-shadow: var(--shadow);
}
.post-body th, .post-body td,
table.cost th, table.cost td,
table.cmp th, table.cmp td{
  border: 1px solid var(--stone); padding: .65rem .8rem;
  text-align: left; vertical-align: top;
}
.post-body th, table.cost th, table.cmp th{
  background: var(--green); color: var(--cream); font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.post-body td, table.cost td, table.cmp td{ background: var(--card); }
.post-body tr:nth-child(even) td,
table.cmp tr:nth-child(even) td{ background: color-mix(in srgb, var(--cream-deep) 85%, var(--card)); }

.pre-label{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600; color: var(--driftwood);
  text-transform: uppercase; letter-spacing: .1em;
  margin: .85rem 0 .15rem; max-width: 48rem;
}
.copy-btn{
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--card); border: 1px solid var(--stone);
  color: var(--driftwood); border-radius: var(--radius);
  padding: .25rem .55rem; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.copy-btn:hover{ color: var(--green); border-color: var(--green); }
.copy-btn.ok{ color: var(--green); border-color: var(--green); }
.post-body pre, .code-block{
  font-family: var(--font-data); font-size: .78rem; line-height: 1.55;
  background: var(--green-deep); border: 1px solid var(--green);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
  overflow-x: auto; color: var(--cream);
  margin: 0 0 1.1rem; max-width: 48rem; box-shadow: var(--shadow-md);
}
.post-body pre code{
  background: none; border: none; padding: 0; font-size: inherit; color: inherit;
}

.resource-link{
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .9rem 1.05rem; background: var(--card);
  border: 1px solid var(--stone); border-radius: var(--radius);
  margin-bottom: .55rem; box-shadow: var(--shadow); max-width: 48rem;
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.resource-link:hover{ border-color: color-mix(in srgb, var(--brass) 50%, transparent); box-shadow: var(--shadow-md); }
.resource-link .title{
  font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; color: var(--green);
}
.resource-link .desc{ font-size: .88rem; color: var(--driftwood); margin-top: .15rem; max-width: none; }

/* Slim step card — circle number + accordion. Not the guide's checkbox/lock spine. */
.step{
  background: var(--card); border: 1px solid var(--stone);
  border-radius: var(--radius); margin: 0 0 1rem; overflow: hidden;
  box-shadow: var(--shadow); max-width: 48rem;
}
.step-head{
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1.05rem 1.15rem;
}
.step-title{
  font-family: var(--font-display); font-weight: 400; font-size: 1.1rem;
  flex: 1; color: var(--ink); line-height: 1.35; margin: 0;
}
.step-title .num, .task-title .num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 1px solid var(--brass); background: transparent;
  color: var(--green); font-family: var(--font-body);
  font-size: .7rem; font-weight: 600; margin-right: .45rem; vertical-align: middle;
}
.step-time{
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brass); white-space: nowrap;
}
.step-one-liner{
  padding: 0 1.15rem .85rem 3rem; color: var(--driftwood);
  font-size: .96rem; max-width: none; margin: 0;
}
.lanes{ display: grid; gap: .55rem; padding: 0 1.15rem 1.15rem; }
.lane{
  border-radius: var(--radius); border: 1px solid var(--stone);
  background: var(--cream); overflow: hidden;
}
.lane summary{
  cursor: pointer; padding: .6rem .85rem; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; list-style: none;
  display: flex; align-items: center; gap: .4rem;
}
.lane summary::-webkit-details-marker{ display: none; }
.lane summary::before{ content: "▸"; color: var(--brass); font-size: .7rem; }
.lane[open] summary::before{ content: "▾"; }
.lane.gma summary{ color: var(--green); }
.lane.ops summary{ color: var(--ink); }
.lane.deep summary{ color: var(--brass); }
.lane-body{ padding: .15rem .95rem .95rem; font-size: .95rem; }
.lane-body ol, .lane-body ul{ padding-left: 1.2rem; margin: .35rem 0; max-width: none; }
.lane-body li{ margin: .32rem 0; }
.lane-body p{ margin: .35rem 0; max-width: none; }
.done-when{
  margin-top: .6rem; padding: .6rem .75rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 10%, var(--card));
  border: 1px solid var(--green); font-size: .88rem; color: var(--green-deep);
}
.done-when strong{ color: var(--green); font-weight: 600; }

@media (max-width: 900px){
  .post-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .post-rail{ position: static; }
}
@media (max-width: 600px){
  .rules-grid{ grid-template-columns: 1fr; }
  .step-one-liner{ padding-left: 1.15rem; }
}

/* Blog system — 2026-08-15. Filter row + card excerpt. Existing pieces, no new look. */
.blog-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; }
button.tag-chip{ cursor:pointer; font-family:inherit; -webkit-appearance:none; appearance:none; }
a.tag-chip{ text-decoration:none; }
.post-card .excerpt{ font-size:.88rem; line-height:1.5; color:var(--driftwood); margin-bottom:.6rem; }
.post-related{ margin-top: 2.75rem; }
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.25rem; }
.post-nav .next{ text-align:right; }
@media (max-width:600px){ .post-nav{ grid-template-columns:1fr; } .post-nav .next{ text-align:left; } }
.post-nav .resource-link{ max-width:none; margin-bottom:0; }
.post-nav .next{ justify-content:flex-end; }
.post-nav .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.45rem; height:1.45rem; border-radius:50%; flex-shrink:0;
  border:1px solid var(--brass); background:transparent; color:var(--green);
  font-family:var(--font-body); font-size:.8rem; margin-top:.15rem;
}
.post-share{ display:flex; align-items:center; gap:.55rem; margin:0 0 2rem; }
.post-share a, .post-share button.share-copy{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%;
  border:1px solid var(--stone); color:var(--driftwood);
  background:transparent; cursor:pointer; padding:0;
}
.post-share a:hover, .post-share button.share-copy:hover{ color:var(--green); border-color:var(--brass); }
.post-share button.share-copy.ok{ color:var(--green); border-color:var(--green); }
.post-rail .post-share{ margin:0 0 1.5rem; }
@media (max-width:600px){ .post-nav .next{ justify-content:flex-start; } }
/* Mobile: desk flag wraps to two lines — keep the fixed nav clear of it; shorter photo windows (Brentt, 2026-08-15). */
@media (max-width: 700px){
  :root{ --desk-flag-h: 0rem; }
  .page-window{ height: 23vh; min-height: 10rem; }
}
/* Brentt 2026-08-15: tighten blog top spacing. Live .wrap carries a global
   3.25rem top pad (pbgai.css) — cut on post pages here, not on the live sheet.
   Nets ~30% off menu->crumbs and ~50% off window->first-line. */
.post .wrap{ padding-top: 1.5rem; }
.post-grid{ margin-top: 1.25rem; }
/* Brentt 2026-08-15: kill the stacked pads between the article's end (rail on
   desktop, stacked below on mobile) and the tee window: global 5.5rem .wrap
   bottom + 4rem .post bottom. Match the tightened top rhythm instead. */
.post .wrap:has(.post-grid){ padding-bottom: 0; }
.post:not(.post--index){ padding-bottom: 1.5rem; }
/* .post-meta dates contain hyphens = break points; wrap whole items, never inside one. */
.post-meta{ flex-wrap:wrap; row-gap:.2rem; }
.post-meta span{ white-space:nowrap; }
.blog-sort{ margin-left:auto; display:flex; gap:.5rem; }
.blog-pager{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:1.75rem 0 0; }
.pager-count{ font-family:var(--font-data,ui-monospace,monospace); font-size:.75rem; letter-spacing:.14em; color:var(--driftwood); }
button.tag-chip[disabled]{ opacity:.4; cursor:default; }

/* Consult band — brown overlap above the footer. Horizontal steps on desk,
   one pane on the phone. Glass brass is correct here (dark band). */
.consult-band{ max-width: 52rem; margin-left: auto; margin-right: auto; }
.consult-kicker{
  font-size: .88rem; line-height: 1.45; color: rgba(245,241,232,.78);
  max-width: 40rem; margin: 0 0 1rem;
}
.consult-band h2{
  color: var(--cream); font-family: var(--font-display, Georgia, serif);
  font-weight: 400; font-size: 1.55rem; line-height: 1.2; margin: 0 0 1.1rem;
}
.consult-track{
  list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0 0 1.15rem;
}
.consult-track li{
  flex: 1; min-width: 0; text-align: center; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(245,241,232,.45);
  border-bottom: 1px solid rgba(245,241,232,.18); padding: 0 0 .45rem;
}
.consult-track li.on{ color: var(--cream); border-bottom-color: var(--brass); }
.consult-track li.done{ color: rgba(245,241,232,.7); }
.consult-pane{ display: none; }
.consult-pane.on{ display: block; }
.consult-row{ display: grid; gap: .75rem; }
@media (min-width: 720px){
  .consult-row{ grid-template-columns: 1fr 1fr; }
}
.consult-band label{
  display: block; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(245,241,232,.65); margin: 0 0 .3rem;
}
.consult-band input[type="text"],
.consult-band input[type="tel"],
.consult-band input[type="email"]{
  width: 100%; box-sizing: border-box;
  background: rgba(15,36,26,.35); color: var(--cream);
  border: 1px solid rgba(158,126,72,.45); border-radius: 2px;
  padding: .65rem .7rem; font: inherit;
}
.consult-band input:focus{ outline: 1px solid var(--brass); }
.consult-consent{
  display: flex; gap: .65rem; align-items: flex-start; margin: .9rem 0 .4rem;
}
.consult-consent input{ margin-top: .25rem; flex-shrink: 0; }
.consult-consent label{
  text-transform: none; letter-spacing: 0; font-size: .86rem;
  line-height: 1.45; color: rgba(245,241,232,.88); margin: 0;
}
.consult-disc{
  font-size: .72rem; line-height: 1.45; color: rgba(245,241,232,.55); margin: 0 0 .9rem;
}
.consult-disc a{ color: var(--cream); }
.consult-actions{ display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-top: .9rem; }
.consult-err{ color: #f0c9a0; font-size: .85rem; margin: .4rem 0 0; }
.consult-cal-nav{
  display: flex; align-items: center; justify-content: space-between; margin: 0 0 .6rem;
}
.consult-cal-nav button{
  background: transparent; color: var(--cream); border: 1px solid rgba(158,126,72,.5);
  width: 2rem; height: 2rem; cursor: pointer;
}
.consult-cal-grid{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center;
}
.consult-cal-grid .dow{ font-size: .65rem; letter-spacing: .08em; color: rgba(245,241,232,.4); }
.consult-day{
  background: transparent; border: 0; color: var(--cream); padding: .4rem 0;
  font: inherit; cursor: pointer;
}
.consult-day.off{ color: rgba(245,241,232,.25); cursor: default; }
.consult-day.open{ border: 1px solid rgba(158,126,72,.4); }
.consult-day.open:hover, .consult-day.sel{ background: var(--brass); color: #0F241A; }
.consult-slots{ display: flex; flex-wrap: wrap; gap: .4rem; }
.consult-slots button{
  background: transparent; color: var(--cream); border: 1px solid rgba(158,126,72,.5);
  padding: .4rem .65rem; cursor: pointer; font: inherit;
}
.consult-slots button:hover{ background: var(--brass); color: #0F241A; }
.consult-skip{
  background: none; border: 0; color: rgba(245,241,232,.65); cursor: pointer;
  text-decoration: underline; font: inherit; padding: 0;
}
/* Gold band timed slider — Brentt 2026-08-15: latest first, cycles the list.
   Slides stack in one grid cell. juice.js sizes the track to the ACTIVE slide
   (not the tallest) and eases between heights, so a short slide leaves no dead
   gap above the bar (Brentt 2026-08-15, mobile). The slider pauses while the
   band is off-screen, so a resize never shifts the page under a reader further
   down. Without JS the tallest slide sets the height — gap over glitch. */
.blog-latest .blog-slides{
  grid-column:1 / -1; display:grid; overflow:hidden;
  align-items:start; /* slides keep natural height — stretch would feed the tallest height back to the JS measure */
  transition:height .45s var(--ease, ease);
}
.blog-slide{
  grid-area:1 / 1; display:grid; grid-template-columns:1fr 17rem;
  gap:2rem 2.25rem; align-items:start;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .8s var(--ease, ease), visibility .8s;
}
.blog-slide.on{ opacity:1; visibility:visible; pointer-events:auto; }
.blog-slide h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.85rem, 3.2vw, 2.5rem); line-height:1.2;
  max-width:22ch; color:#F5F1E8; margin-bottom:1.15rem;
}
.blog-slide h2 a{ color:#F5F1E8; border-bottom:none; }
.blog-slide h2 a:hover{ border-bottom:1px solid var(--brass); }
@media (max-width:800px){ .blog-slide{ grid-template-columns:1fr; } }
/* Slider progress bar — the fill IS the timer (slide advances on animationend). */
.blog-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(245,241,232,.22); z-index:2; }
.blog-bar i{ display:block; height:100%; width:0; background:rgba(245,241,232,.85); }
@keyframes blog-bar{ from{ width:0 } to{ width:100% } }
@media (prefers-reduced-motion: reduce){ .blog-bar{ display:none; } }
.blog-slide{ align-content:start; }