/* ==========================================================================
   blog.css — /blog on top of studio.css
   Same paper, ink, Figtree and mono labels as the rest of the site. A post is
   a reading column (--bw-text) with wider bands (--bw-wide) for the hero,
   the maps and the card grids.
   ========================================================================== */

body.studio {
  --bw-text: 700px;
  --bw-wide: 1140px;
  --day: var(--c-bilbo);
}

.bw-text { max-width: var(--bw-text); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.bw-wide { max-width: var(--bw-wide); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

/* --------------------------------------------------------------------------
   Index
   -------------------------------------------------------------------------- */
.bindex-head { padding-bottom: 36px; }
.bindex-head h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -.045em; font-weight: 500; }
.bindex { padding-bottom: 110px; }
.bempty { text-align: center; color: var(--ink-2); }
.bfeed { text-align: center; margin-top: 40px; font-size: 12.5px; letter-spacing: .08em; }
.bfeed a { color: var(--ink-3); border-bottom: 1px solid var(--line-2); }

/* the app filter on /blog: studio.css .tabs, left-aligned, with a count per app */
.btabs { justify-content: flex-start; margin-bottom: 26px; }
.btabs .tab { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; padding: 9px 16px; }
.btab-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.btab-n { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.chip .btab-dot { margin-right: 7px; }

.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.bcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.bcard:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 22px 44px -28px rgba(16,18,16,.45); }
.bcard-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(16,18,16,.06); }
.bcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.bcard-title { font-size: 23px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.bcard-desc { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bcard-meta { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* the newest post spans the grid: photo left, copy right */
.bcard.is-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bcard.is-feature .bcard-img { aspect-ratio: auto; min-height: 380px; }
.bcard.is-feature .bcard-body { justify-content: center; gap: 14px; padding: 40px 44px; }
.bcard.is-feature .bcard-title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
.bcard.is-feature .bcard-desc { font-size: 17px; }
@media (max-width: 860px) {
  .bcard.is-feature { grid-template-columns: minmax(0, 1fr); }
  .bcard.is-feature .bcard-img { aspect-ratio: 16 / 10; min-height: 0; }
  .bcard.is-feature .bcard-body { padding: 24px 24px 28px; }
}

/* --------------------------------------------------------------------------
   Post header + hero
   -------------------------------------------------------------------------- */
.bpost { padding-bottom: 40px; }
.bpost-head { padding-top: 56px; padding-bottom: 34px; }
.bcrumbs { display: flex; gap: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px; }
.bcrumbs a { color: var(--ink-2); }
.bcrumbs a:hover { color: var(--ink); }
.bpost-head h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -.042em; font-weight: 600; text-wrap: balance; }
.bdek { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--ink-2); margin: 20px 0 0; text-wrap: pretty; }
.bmeta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 24px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.bhero { margin: 0 auto 46px; }
.bhero img { width: 100%; height: auto; max-height: 620px; object-fit: cover; display: block; border-radius: var(--r-card); background: rgba(16,18,16,.06); }
.bhero figcaption, .bday-map figcaption, .glance-map figcaption, .stop-img figcaption {
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); margin-top: 10px; line-height: 1.5;
}
figcaption a { border-bottom: 1px solid var(--line-2); }

/* --------------------------------------------------------------------------
   Prose (the Markdown body)
   -------------------------------------------------------------------------- */
.bprose { font-size: 18.5px; line-height: 1.72; }
/* one rhythm for everything in the column: reset, then space siblings */
.bprose > * { margin: 0; }
.bprose > * + * { margin-top: 1.1em; }
.bprose h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; letter-spacing: -.03em; font-weight: 600; margin-top: 1.8em; }
.bprose h3 { font-size: 21px; letter-spacing: -.015em; font-weight: 600; margin-top: 1.5em; }
.bprose a { border-bottom: 1.5px solid rgba(255,77,0,.45); transition: border-color .15s var(--ease); }
.bprose a:hover { border-color: var(--c-bilbo); }
.bprose ul, .bprose ol { padding-left: 1.2em; }
.bprose li + li { margin-top: .4em; }
.bprose blockquote { margin-left: 0; padding-left: 20px; border-left: 3px solid var(--c-bilbo); color: var(--ink-2); }
.bprose strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   The plan at a glance
   -------------------------------------------------------------------------- */
.glance {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center;
  margin-top: 64px; margin-bottom: 30px;
}
.glance-copy h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.glance-copy > p { color: var(--ink-2); margin: 16px 0 0; }
.glance-days { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.glance-days a {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: baseline;
  padding: 16px 20px; border-radius: var(--r-md); background: rgba(255,255,255,.6); border: 1px solid var(--line);
  border-left: 4px solid var(--day); transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.glance-days a:hover { background: #fff; transform: translateX(3px); }
.gd-num { grid-row: 1 / span 2; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--day); font-weight: 500; }
.gd-theme { font-size: 18.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.gd-area { font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.glance-note { font-size: 15px; color: var(--ink-2); margin: 20px 0 0; }
.glance-note strong { color: var(--ink); font-weight: 600; }

/* Bilbo's maps are phone screenshots: show them as a phone screen would sit. */
.glance-map, .bday-map { margin: 0; }
.glance-map img, .bday-map img {
  width: 100%; height: auto; display: block; border-radius: 34px;
  border: 1px solid var(--line-2); background: #EDEBE3;
  box-shadow: 0 30px 60px -36px rgba(16,18,16,.5);
}

/* --------------------------------------------------------------------------
   Days
   -------------------------------------------------------------------------- */
.bday { padding-top: 84px; scroll-margin-top: calc(var(--header-h) + 8px); }
.bday-head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.bday-head .eyebrow { color: var(--day); }
.bday-head p { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin: 16px 0 0; }

.bday-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 40px; }
.bday-grid:not(:has(.bday-map)) { grid-template-columns: minmax(0, 1fr); max-width: var(--bw-text); }
.bday-map { position: sticky; top: calc(var(--header-h) + 18px); }

.stops { list-style: none; margin: 0; padding: 0; position: relative; }
/* the route line joining the numbered pins */
.stops::before { content: ""; position: absolute; left: 17px; top: 26px; bottom: 26px; width: 2px; background: linear-gradient(var(--day), rgba(16,18,16,.12)); border-radius: 2px; }
.stop { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 22px; padding: 6px 0 38px; scroll-margin-top: calc(var(--header-h) + 12px); }
.stop:last-child { padding-bottom: 6px; }
.stop-pin {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--day); color: #fff;
  font-size: 14px; font-weight: 500; box-shadow: 0 0 0 5px var(--paper);
}
.stop-main { min-width: 0; }
.stop-kicker { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 6px; }
.stop-kicker time { color: var(--day); font-weight: 500; }
/* arrondissements are written 5e, 18e: uppercasing them reads as "5E" */
.stop-kicker .arr { text-transform: none; }
.stop h3 { font-size: 24px; line-height: 1.22; letter-spacing: -.02em; font-weight: 600; }
.stop-blurb { font-size: 17px; line-height: 1.68; margin: 12px 0 0; }
.stop-tip { font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r-sm); background: rgba(255,255,255,.66); border: 1px solid var(--line); }
.stop-tip .mono { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--day); margin-right: 6px; font-weight: 500; }
.stop-blurb a, .stop-tip a, .pcard a { border-bottom: 1px solid var(--line-2); }

.stop-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px 22px; margin: 16px 0 0; }
.stop-facts div { min-width: 0; }
.stop-facts dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.stop-facts dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.stop-facts dd a { border-bottom: 1px solid var(--line-2); }

.stop-src { font-size: 11.5px; letter-spacing: .03em; line-height: 1.7; color: var(--ink-3); margin: 14px 0 0; }
.stop-src a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.stop-src a:hover { color: var(--ink); }
.stop-src .dot { margin: 0 6px; }

.stop-img { margin: 14px 0 0; }
.stop-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--r-md); background: rgba(16,18,16,.06); }

/* --------------------------------------------------------------------------
   Practical, videos
   -------------------------------------------------------------------------- */
.bsec-head { padding: 0; margin-bottom: 30px; }
.bsec-head h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.bpractical, .bvideos { padding-top: 96px; }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pcard { padding: 22px 24px 24px; border-radius: var(--r-md); background: rgba(255,255,255,.62); border: 1px solid var(--line); }
.pcard h3 { font-size: 18px; letter-spacing: -.01em; font-weight: 600; line-height: 1.3; }
.pcard p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); margin: 10px 0 0; }

.vcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.vcard {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: var(--r-md);
  background: var(--ink); color: rgba(255,255,255,.86); position: relative; overflow: hidden;
  transition: transform .2s var(--ease);
}
body.studio a.vcard { color: rgba(255,255,255,.86); }
.vcard:hover { transform: translateY(-3px); }
.vcard-play { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14); position: relative; }
.vcard-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.vcard-who { font-size: 11.5px; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.vcard-what { font-size: 16px; line-height: 1.5; }
.vcard-go { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #FF8A4C; margin-top: auto; padding-top: 6px; }

/* --------------------------------------------------------------------------
   The Bilbo card, method, credits, more
   -------------------------------------------------------------------------- */
.bpromo {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 30px; align-items: center;
  margin-top: 96px; padding: 32px 34px; border-radius: var(--r-card);
  background: rgba(255,77,0,.07); border: 1px solid rgba(255,77,0,.22);
}
.bpromo-man { width: 120px; height: auto; display: block; }
.bpromo h2 { font-size: 26px; letter-spacing: -.025em; font-weight: 600; line-height: 1.2; }
.bpromo p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 10px 0 0; }
.bpromo-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.bmethod { margin-top: 70px; }
.bmethod h2 { font-size: 22px; letter-spacing: -.02em; font-weight: 600; }
.bmethod p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 12px 0 0; }

.bcredits { margin-top: 44px; }
.bcredits h2 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.bcredits ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.bcredits a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }

.bmore { margin-top: 96px; }
.bmore h2 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .glance { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .glance-map { max-width: 340px; margin: 0 auto; }
  .bday-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: var(--bw-text); }
  .bday-map { position: static; max-width: 320px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .bw-text, .bw-wide { padding-left: 16px; padding-right: 16px; }
  .bpost-head { padding-top: 30px; }
  .bhero img { border-radius: var(--r-md); max-height: 420px; }
  .bprose { font-size: 17.5px; }
  .stop { grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; }
  .stop-pin { width: 30px; height: 30px; font-size: 13px; }
  .stops::before { left: 14px; }
  .stop h3 { font-size: 21px; }
  .bpromo { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; text-align: left; }
  .bpromo-man { width: 92px; }
  .bday { padding-top: 66px; }
  /* on a phone the day label sits above the theme instead of beside it */
  .glance-days a { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 14px 16px; }
  .gd-num { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .glance-days a, .vcard { transition: none; }
}