/* Jelly.dog Blog styling — v1.2.7
   Separate filename is intentional cache-busting. */

.blog-shell,
.jelly-blog-page,
.jelly-blog-post,
.jelly-blog-post main {
  background:var(--cream) !important;
}

/* BLOG LANDING HERO */
.blog-hero {
  position:relative;
  overflow:hidden;
  background:var(--yellow) !important;
  border:0 !important;
  border-bottom:4px solid var(--ink) !important;
}

.blog-hero::before,
.blog-hero::after {
  content:"";
  position:absolute;
  pointer-events:none;
  border:4px solid var(--ink);
  z-index:0;
}

.blog-hero::before {
  width:clamp(110px,18vw,260px);
  height:clamp(110px,18vw,260px);
  right:-4vw;
  top:-5vw;
  border-radius:50%;
  background:var(--pink);
}

.blog-hero::after {
  width:clamp(85px,13vw,190px);
  height:clamp(55px,8vw,120px);
  right:12vw;
  bottom:-3vw;
  border-radius:999px;
  background:var(--teal);
  transform:rotate(-11deg);
}

.blog-hero-inner {
  position:relative;
  z-index:1;
  max-width:var(--content-width);
  margin:auto;
  padding:clamp(70px,9vw,120px) 6vw clamp(62px,8vw,100px) !important;
}

.blog-hero .eyebrow {
  display:inline-block;
  padding:7px 12px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink) !important;
  box-shadow:5px 5px 0 var(--ink);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:900;
}

.blog-hero h1 {
  max-width:820px;
  margin:.32em 0 .24em !important;
  font-size:clamp(3.4rem,8vw,7.4rem) !important;
  line-height:.88 !important;
  letter-spacing:-.07em !important;
}

.blog-intro,
.blog-page-copy {
  max-width:720px;
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.62;
}

.blog-intro { margin:0; }
.blog-page-copy { margin-top:24px; }
.blog-page-copy > *:first-child { margin-top:0; }

/* BLOG LIST */
.blog-listing {
  max-width:none !important;
  margin:0 !important;
  padding:clamp(62px,8vw,105px) 6vw clamp(80px,9vw,120px) !important;
  background:var(--cream) !important;
}

.blog-section-heading {
  max-width:var(--content-width);
  margin:0 auto clamp(34px,5vw,58px);
}

.blog-section-heading .small {
  color:var(--pink);
}

.blog-section-heading h2 {
  max-width:760px;
  margin:10px 0 0;
  font-size:clamp(2.4rem,5vw,4.8rem);
}

.blog-grid {
  max-width:var(--content-width);
  margin:0 auto;
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--blog-card-min,280px)),1fr)) !important;
  gap:clamp(24px,3vw,36px) !important;
  align-items:stretch;
}

.blog-card {
  --post-accent:var(--pink);
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#fff !important;
  border:3px solid var(--ink) !important;
  border-radius:30px !important;
  box-shadow:10px 12px 0 var(--ink) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}

.blog-card:nth-child(3n+1) { transform:rotate(-.45deg); }
.blog-card:nth-child(3n+2) { transform:rotate(.4deg); }
.blog-card:nth-child(3n+3) { transform:rotate(-.2deg); }

.blog-card:hover {
  transform:translateY(-6px) rotate(0);
  box-shadow:14px 17px 0 var(--ink) !important;
}

.blog-card-link {
  color:inherit;
  text-decoration:none !important;
  display:flex !important;
  flex-direction:column;
  height:100%;
}

.blog-card-image {
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--yellow);
  border-bottom:3px solid var(--ink);
}

.blog-card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.blog-card-placeholder {
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 22% 30%, var(--pink) 0 18%, transparent 19%),
    radial-gradient(circle at 82% 70%, var(--teal) 0 21%, transparent 22%),
    var(--yellow);
}

.blog-card-placeholder span {
  font-size:clamp(1.7rem,4vw,2.7rem);
  font-weight:900;
  letter-spacing:-.07em;
  color:var(--ink);
}

.blog-card-body {
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(24px,3vw,32px) !important;
  border-top:8px solid var(--post-accent);
}

.blog-card time {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.76rem;
  font-weight:900;
  color:var(--purple);
}

.blog-card h2 {
  font-size:clamp(1.8rem,2.8vw,2.45rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.045em !important;
  margin:12px 0 14px !important;
}

.blog-card p {
  line-height:1.62;
  margin:0 0 22px;
  font-size:1.02rem;
}

.blog-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

.blog-tags span {
  display:inline-block;
  padding:6px 10px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--cream);
  color:var(--ink);
  font-size:.78rem;
  font-weight:800;
}

.blog-read-more {
  align-self:flex-start;
  display:inline-block;
  margin-top:auto;
  padding:9px 14px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--yellow);
  color:var(--ink);
  font-weight:900;
}

/* EMPTY STATE */
.blog-empty {
  grid-column:1 / -1;
  max-width:760px;
  margin:32px auto 20px;
  padding:clamp(38px,6vw,70px);
  text-align:center;
  border:3px solid var(--ink);
  border-radius:38px;
  background:var(--yellow);
  box-shadow:12px 14px 0 var(--ink);
}

.blog-empty-mark {
  display:inline-grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 22px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--pink);
  font-size:2rem;
  font-weight:900;
  transform:rotate(-7deg);
}

.blog-empty h2 {
  margin:12px 0 14px !important;
  font-size:clamp(2.4rem,5vw,4.8rem) !important;
}

.blog-empty p {
  max-width:560px;
  margin:0 auto;
  font-size:1.08rem;
  line-height:1.6;
}

/* INDIVIDUAL BLOG POST */
.jelly-blog-post main {
  overflow:hidden;
}

.post-shell {
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--cream) !important;
}

.post-header {
  position:relative;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(58px,8vw,100px) max(6vw,calc((100vw - var(--content-width))/2 + 6vw)) clamp(52px,7vw,84px) !important;
  background:var(--teal) !important;
  border-bottom:4px solid var(--ink);
  overflow:hidden;
}

.post-header::after {
  content:"";
  position:absolute;
  width:clamp(140px,22vw,320px);
  height:clamp(140px,22vw,320px);
  right:-6vw;
  bottom:-9vw;
  border:4px solid var(--ink);
  border-radius:44% 56% 61% 39% / 45% 38% 62% 55%;
  background:var(--pink);
  transform:rotate(17deg);
}

.post-header > * {
  position:relative;
  z-index:1;
  max-width:900px;
}

.post-kicker {
  display:inline-block;
  margin:0 0 24px;
  padding:7px 12px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--yellow);
  box-shadow:5px 5px 0 var(--ink);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:900;
}

.post-back {
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 28px !important;
  color:var(--ink) !important;
  font-weight:900;
  text-decoration:none;
}

.post-header time {
  display:block;
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.76rem;
  font-weight:900;
}

.post-header h1 {
  max-width:900px;
  font-size:clamp(3.2rem,7.5vw,7rem) !important;
  line-height:.9 !important;
  letter-spacing:-.07em !important;
  margin:0 0 28px !important;
}

.post-featured {
  width:min(1120px,88vw);
  margin:clamp(48px,7vw,82px) auto 0 !important;
}

.post-featured img {
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:cover;
  border:3px solid var(--ink);
  border-radius:32px;
  box-shadow:12px 14px 0 var(--ink);
}

.post-content {
  position:relative;
  max-width:820px !important;
  margin:clamp(50px,7vw,84px) auto 0 !important;
  padding:clamp(38px,5vw,64px) !important;
  background:#fff !important;
  border:3px solid var(--ink);
  border-radius:34px;
  box-shadow:12px 14px 0 var(--ink);
  font-size:clamp(1.02rem,1.35vw,1.14rem) !important;
  line-height:1.78 !important;
}

.post-content::before {
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  right:28px;
  top:-19px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--yellow);
}

.post-content > *:first-child { margin-top:0; }
.post-content > *:last-child { margin-bottom:0; }

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  color:var(--ink);
  letter-spacing:-.045em !important;
  line-height:1.05 !important;
}

.post-content h2 {
  margin:1.9em 0 .55em !important;
  font-size:clamp(2rem,4vw,3.25rem) !important;
}

.post-content h3 {
  margin:1.7em 0 .5em !important;
  font-size:clamp(1.55rem,3vw,2.3rem) !important;
}

.post-content p {
  margin:0 0 1.35em;
}

.post-content a {
  color:var(--purple);
  font-weight:800;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.post-content ul,
.post-content ol {
  margin:1.2em 0 1.6em;
  padding-left:1.5em;
}

.post-content li {
  margin:.42em 0;
  padding-left:.2em;
}

.post-content blockquote {
  margin:2em -1vw !important;
  padding:1.3em 1.5em !important;
  background:var(--yellow) !important;
  border:3px solid var(--ink);
  border-left:10px solid var(--post-accent);
  border-radius:24px;
  font-size:1.15em;
  font-weight:700;
  box-shadow:7px 8px 0 var(--ink);
}

.post-content code {
  padding:.12em .36em;
  border-radius:6px;
  background:#f0e8ff;
  color:var(--purple);
}

.post-content pre {
  overflow:auto;
  padding:20px;
  border:3px solid var(--ink);
  border-radius:18px;
  background:var(--ink);
  color:#fff;
}

.post-content pre code {
  padding:0;
  background:transparent;
  color:inherit;
}

.post-content hr {
  height:4px;
  border:0;
  border-radius:999px;
  background:var(--pink);
  margin:2.5em 0;
}

.post-footer {
  max-width:820px;
  margin:0 auto !important;
  padding:clamp(44px,6vw,72px) 0 clamp(72px,8vw,105px) !important;
  border:0 !important;
}

.post-back-button {
  display:inline-block;
  padding:12px 20px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--yellow) !important;
  color:var(--ink) !important;
  box-shadow:5px 6px 0 var(--ink);
  text-decoration:none;
  font-weight:900;
}

@media (max-width:760px) {
  .blog-hero::after { opacity:.7; }
  .blog-card:nth-child(n) { transform:none; }

  .post-header {
    padding-left:6vw !important;
    padding-right:6vw !important;
  }

  .post-featured { width:88vw; }

  .post-content {
    width:88vw;
    padding:30px 24px !important;
    border-radius:26px;
    box-shadow:8px 10px 0 var(--ink);
  }

  .post-content blockquote { margin:2em 0 !important; }
  .post-footer { width:88vw; }
}


/* =========================================================
   v1.2.8 — tighter, less-yellow editorial balance
   ========================================================= */

/* Desktop/tablet: reduce overall vertical scale slightly */
.blog-hero {
  background:var(--cream) !important;
}

.blog-hero-inner {
  padding-top:clamp(48px,6vw,82px) !important;
  padding-bottom:clamp(44px,5vw,70px) !important;
}

.blog-hero .eyebrow {
  background:var(--yellow);
}

.blog-hero::before {
  width:clamp(90px,13vw,190px);
  height:clamp(90px,13vw,190px);
}

.blog-hero::after {
  width:clamp(70px,9vw,135px);
  height:clamp(42px,5vw,76px);
}

.blog-listing {
  padding-top:clamp(40px,5vw,66px) !important;
  padding-bottom:clamp(54px,6vw,82px) !important;
}

.blog-section-heading {
  margin-bottom:clamp(24px,3vw,38px);
}

.blog-section-heading h2 {
  font-size:clamp(2.1rem,4vw,3.8rem);
}

.blog-card-image {
  aspect-ratio:2 / 1;
  background:var(--teal);
}

.blog-card-placeholder {
  background:
    radial-gradient(circle at 18% 34%, var(--pink) 0 16%, transparent 17%),
    radial-gradient(circle at 82% 72%, var(--yellow) 0 18%, transparent 19%),
    var(--teal);
}

.blog-card-body {
  padding:24px !important;
}

.blog-read-more {
  background:var(--pink);
  color:#fff;
}

/* Individual post: retain colour, but reduce oversized blocks */
.post-header {
  padding-top:clamp(42px,6vw,72px) !important;
  padding-bottom:clamp(38px,5vw,62px) !important;
}

.post-content {
  margin-top:clamp(34px,5vw,56px) !important;
  padding:clamp(30px,4vw,46px) !important;
}

.post-footer {
  padding-top:34px !important;
  padding-bottom:clamp(48px,6vw,72px) !important;
}

/* Mobile gets a much denser composition */
@media (max-width:760px) {
  .blog-hero {
    background:var(--cream) !important;
  }

  .blog-hero-inner {
    padding:34px 6vw 32px !important;
  }

  .blog-hero .eyebrow {
    padding:5px 9px;
    box-shadow:3px 3px 0 var(--ink);
    font-size:.66rem;
  }

  .blog-hero h1 {
    margin:.28em 0 .2em !important;
    font-size:clamp(2.6rem,13vw,4.2rem) !important;
    line-height:.9 !important;
  }

  .blog-intro,
  .blog-page-copy {
    font-size:1rem;
    line-height:1.48;
  }

  .blog-hero::before {
    width:86px;
    height:86px;
    right:-28px;
    top:-27px;
  }

  .blog-hero::after {
    width:70px;
    height:42px;
    right:8vw;
    bottom:-18px;
  }

  .blog-listing {
    padding:34px 6vw 46px !important;
  }

  .blog-section-heading {
    margin-bottom:22px;
  }

  .blog-section-heading .small {
    font-size:.72rem;
  }

  .blog-section-heading h2 {
    margin-top:6px;
    font-size:clamp(2rem,10vw,3rem);
    line-height:.96;
  }

  .blog-grid {
    gap:20px !important;
  }

  .blog-card {
    border-radius:24px !important;
    box-shadow:7px 8px 0 var(--ink) !important;
  }

  .blog-card-image {
    aspect-ratio:2.35 / 1;
  }

  .blog-card-placeholder span {
    font-size:1.55rem;
  }

  .blog-card-body {
    padding:20px !important;
  }

  .blog-card h2 {
    margin:8px 0 10px !important;
    font-size:1.75rem !important;
  }

  .blog-card p {
    margin-bottom:16px;
    font-size:.98rem;
    line-height:1.5;
  }

  .blog-read-more {
    padding:7px 12px;
  }

  .blog-card time {
    font-size:.68rem;
  }

  /* Post pages */
  .post-header {
    padding:34px 6vw 32px !important;
  }

  .post-kicker {
    margin-bottom:16px;
    padding:5px 9px;
    box-shadow:3px 3px 0 var(--ink);
    font-size:.66rem;
  }

  .post-back {
    margin-bottom:18px !important;
  }

  .post-header h1 {
    font-size:clamp(2.6rem,13vw,4rem) !important;
    margin-bottom:18px !important;
  }

  .post-featured {
    margin-top:30px !important;
  }

  .post-content {
    width:88vw;
    margin-top:30px !important;
    padding:24px 20px !important;
    border-radius:22px;
    box-shadow:7px 8px 0 var(--ink);
  }

  .post-content h2 {
    margin-top:1.45em !important;
  }

  .post-footer {
    padding-top:28px !important;
    padding-bottom:48px !important;
  }
}


/* =========================================================
   v1.2.9 — tighter headings + sane card widths
   ========================================================= */

/* Main blog title: reduce poster scale */
.blog-hero-inner {
  padding-top:clamp(38px,4.8vw,64px) !important;
  padding-bottom:clamp(34px,4.2vw,56px) !important;
}

.blog-hero h1 {
  max-width:760px;
  font-size:clamp(2.7rem,5.8vw,5.2rem) !important;
  line-height:.92 !important;
  margin:.26em 0 .22em !important;
}

.blog-intro,
.blog-page-copy {
  max-width:680px;
  font-size:clamp(1rem,1.35vw,1.18rem);
  line-height:1.55;
}

/* Listing heading: compact and proportional */
.blog-listing {
  padding-top:clamp(30px,3.8vw,48px) !important;
  padding-bottom:clamp(46px,5vw,66px) !important;
}

.blog-section-heading {
  margin-bottom:clamp(20px,2.4vw,30px);
}

.blog-section-heading h2 {
  max-width:700px;
  font-size:clamp(1.9rem,3.35vw,3.2rem) !important;
  line-height:.98 !important;
}

/* Card grid:
   - normal 3-column layout where space permits
   - individual cards never become huge
   - one/two-card rows align left
*/
.blog-grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(260px, 360px)) !important;
  justify-content:start !important;
  align-items:stretch;
  gap:clamp(22px,2.6vw,34px) !important;
}

.blog-card {
  width:100%;
  max-width:360px;
}

/* On larger screens, allow three slightly wider cards */
@media (min-width:1100px) {
  .blog-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .blog-card {
    max-width:none;
  }
}

/* On tablets, two cards max and still left aligned */
@media (min-width:761px) and (max-width:1099px) {
  .blog-grid {
    grid-template-columns:repeat(auto-fit, minmax(280px, 340px)) !important;
    justify-content:start !important;
  }

  .blog-card {
    max-width:340px;
  }
}

/* Mobile: full width is appropriate, but compact */
@media (max-width:760px) {
  .blog-hero-inner {
    padding:28px 6vw 26px !important;
  }

  .blog-hero h1 {
    font-size:clamp(2.15rem,10.5vw,3.15rem) !important;
    line-height:.92 !important;
  }

  .blog-intro,
  .blog-page-copy {
    font-size:.96rem;
    line-height:1.45;
  }

  .blog-listing {
    padding-top:28px !important;
    padding-bottom:40px !important;
  }

  .blog-section-heading {
    margin-bottom:18px;
  }

  .blog-section-heading h2 {
    font-size:clamp(1.75rem,8.3vw,2.5rem) !important;
    line-height:.98 !important;
  }

  .blog-grid {
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
  }

  .blog-card {
    max-width:none;
    width:100%;
  }
}


/* =========================================================
   v1.3.0 — approved Jelly.dog mascot/laptop Blog hero
   ========================================================= */

.blog-hero-inner {
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(380px, 1.08fr);
  align-items:center;
  gap:clamp(28px,4vw,64px);
  max-width:1220px;
}

.blog-hero-copy {
  min-width:0;
  padding-left:clamp(10px,2vw,30px);
}

.blog-hero-mascot {
  min-width:0;
  align-self:end;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

.blog-hero-mascot img {
  display:block;
  width:100%;
  max-width:690px;
  height:auto;
  object-fit:contain;
  object-position:right bottom;
  mix-blend-mode:normal;
}

/* Keep decorative CSS blobs subtle now that the mascot is present */
.blog-hero::before {
  width:clamp(64px,8vw,120px);
  height:clamp(64px,8vw,120px);
  opacity:.95;
}

.blog-hero::after {
  width:clamp(52px,6vw,92px);
  height:clamp(34px,4vw,58px);
  opacity:.95;
}

/* Tablet */
@media (max-width:980px) {
  .blog-hero-inner {
    grid-template-columns:minmax(0, 1fr) minmax(300px, .9fr);
    gap:24px;
  }

  .blog-hero-mascot img {
    max-width:520px;
  }
}

/* Mobile: text first, mascot directly underneath, still compact */
@media (max-width:760px) {
  .blog-hero-inner {
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding-top:28px !important;
    padding-bottom:0 !important;
  }

  .blog-hero-copy {
    padding-left:0;
  }

  .blog-hero-mascot {
    justify-content:center;
    margin:0 -2vw;
    overflow:hidden;
  }

  .blog-hero-mascot img {
    width:112%;
    max-width:none;
    margin-bottom:-1px;
  }

  .blog-hero::before {
    width:70px;
    height:70px;
  }

  .blog-hero::after {
    display:none;
  }
}


/* =========================================================
   v1.3.1 — cleaned transparent mascot art + alignment fix
   ========================================================= */

.blog-hero-inner {
  grid-template-columns:minmax(0, .88fr) minmax(380px, 1.12fr);
  align-items:center;
}

.blog-hero-copy {
  align-self:center;
  padding-left:clamp(18px,2.6vw,42px);
}

.blog-hero-mascot {
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
  padding-top:4px;
}

.blog-hero-mascot img {
  display:block;
  width:min(100%, 700px);
  max-width:700px;
  height:auto;
  object-fit:contain;
  object-position:left center;
  background:transparent;
}

/* The approved artwork now provides the visual interest, so remove
   CSS corner blobs from the hero entirely. */
.blog-hero::before,
.blog-hero::after {
  display:none !important;
}

@media (max-width:980px) {
  .blog-hero-inner {
    grid-template-columns:minmax(0, 1fr) minmax(300px, .95fr);
  }

  .blog-hero-copy {
    padding-left:18px;
  }

  .blog-hero-mascot img {
    width:100%;
    max-width:560px;
  }
}

@media (max-width:760px) {
  .blog-hero-inner {
    grid-template-columns:1fr;
    gap:10px;
    padding-bottom:18px !important;
  }

  .blog-hero-copy {
    padding-left:0;
  }

  .blog-hero-mascot {
    justify-content:center;
    margin:0;
    padding-top:0;
  }

  .blog-hero-mascot img {
    width:min(92vw, 520px);
    max-width:100%;
    margin:0 auto;
  }
}


/* v1.3.2 — final mascot asset cleanup/alignment */
.blog-hero-mascot {
  align-self:center;
  justify-content:flex-start;
}

.blog-hero-mascot img {
  width:min(100%, 660px);
  max-width:660px;
  object-position:left center;
}

@media (max-width:760px) {
  .blog-hero-mascot img {
    width:min(90vw, 500px);
    max-width:100%;
  }
}


/* =========================================================
   v1.3.3 — final Blog hero scale refinement
   ========================================================= */

/* Reduce the complete hero composition by roughly 10–15%. */
.blog-hero-inner {
  padding-top:clamp(32px,4vw,54px) !important;
  padding-bottom:clamp(30px,3.6vw,48px) !important;
  grid-template-columns:minmax(0, .9fr) minmax(350px, 1.1fr);
  gap:clamp(24px,3.4vw,50px);
}

.blog-hero h1 {
  max-width:700px;
  font-size:clamp(2.45rem,5vw,4.55rem) !important;
  line-height:.93 !important;
}

.blog-intro,
.blog-page-copy {
  max-width:640px;
  font-size:clamp(.96rem,1.18vw,1.08rem);
  line-height:1.5;
}

.blog-hero-mascot img {
  width:min(100%, 575px);
  max-width:575px;
}

/* Keep the eyebrow proportional to the smaller composition. */
.blog-hero .eyebrow {
  padding:6px 10px;
  font-size:.7rem;
  box-shadow:4px 4px 0 var(--ink);
}

@media (max-width:980px) {
  .blog-hero-inner {
    grid-template-columns:minmax(0, 1fr) minmax(270px, .9fr);
    gap:20px;
  }

  .blog-hero-mascot img {
    width:100%;
    max-width:490px;
  }
}

@media (max-width:760px) {
  .blog-hero-inner {
    grid-template-columns:1fr;
    padding:24px 6vw 14px !important;
    gap:8px;
  }

  .blog-hero h1 {
    font-size:clamp(2rem,9.4vw,2.85rem) !important;
    line-height:.94 !important;
  }

  .blog-intro,
  .blog-page-copy {
    font-size:.92rem;
    line-height:1.43;
  }

  .blog-hero-mascot img {
    width:min(84vw, 440px);
    max-width:100%;
  }
}

/* =========================================================
   v1.3.4 — right-biased Blog hero mascot
   ========================================================= */
.blog-hero-mascot {
  justify-content:flex-end;
}

.blog-hero-mascot img {
  margin-left:auto;
  margin-right:0;
  object-position:right center;
}

@media (max-width:760px) {
  .blog-hero-mascot {
    width:100%;
    justify-content:flex-end;
  }

  .blog-hero-mascot img {
    width:min(84vw, 440px);
    max-width:100%;
    margin-left:auto;
    margin-right:0;
  }
}

/* =========================================================
   v1.3.5 — definitive right-aligned mascot placement
   Fresh stylesheet filename also defeats static asset caches.
   ========================================================= */
.blog-hero-inner {
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(350px,1.1fr) !important;
  align-items:center !important;
}

.blog-hero-mascot {
  display:flex !important;
  width:100% !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin-left:auto !important;
  margin-right:0 !important;
}

.blog-hero-mascot img {
  display:block !important;
  width:min(100%,575px) !important;
  max-width:575px !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
}

@media (max-width:980px) {
  .blog-hero-inner {
    grid-template-columns:minmax(0,1fr) minmax(270px,.9fr) !important;
  }
  .blog-hero-mascot img {
    width:min(100%,490px) !important;
    max-width:490px !important;
  }
}

@media (max-width:760px) {
  .blog-hero-inner {
    grid-template-columns:1fr !important;
  }
  .blog-hero-mascot {
    justify-content:flex-end !important;
  }
  .blog-hero-mascot img {
    width:min(84vw,440px) !important;
    max-width:84vw !important;
    margin-left:auto !important;
    margin-right:0 !important;
  }
}

/* =========================================================
   v1.3.6 — visible right offset for Blog hero mascot
   Aligning the image box alone looked centred on mobile; this
   deliberately nudges the artwork towards the right edge.
   ========================================================= */
.blog-hero-mascot img {
  transform:translateX(clamp(18px, 4vw, 54px)) !important;
}

@media (max-width:760px) {
  .blog-hero-mascot img {
    transform:translateX(7vw) !important;
  }
}

/* =========================================================
   v1.3.7 — intentional mobile right-anchored mascot layout
   Keep the artwork smaller on phones so the right alignment
   reads as deliberate, with visible breathing room on the left.
   ========================================================= */
@media (max-width:760px) {
  .blog-hero-mascot {
    width:100% !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    box-sizing:border-box !important;
    padding-left:18% !important;
    overflow:visible !important;
  }

  .blog-hero-mascot img {
    width:min(72vw, 360px) !important;
    max-width:100% !important;
    height:auto !important;
    margin-left:auto !important;
    margin-right:0 !important;
    transform:none !important;
  }
}

@media (max-width:430px) {
  .blog-hero-mascot {
    padding-left:22% !important;
  }

  .blog-hero-mascot img {
    width:min(70vw, 320px) !important;
  }
}

/* =========================================================
   v1.3.8 — mobile side-by-side hero with vertically-centred mascot
   The mascot occupies the right column and is centred vertically
   against the heading + intro, matching the approved composition.
   ========================================================= */
@media (max-width:760px) {
  .blog-hero-inner {
    display:grid !important;
    grid-template-columns:minmax(0, 1.28fr) minmax(138px, .72fr) !important;
    align-items:center !important;
    gap:8px !important;
    padding:28px 5vw 24px !important;
  }

  .blog-hero-copy {
    min-width:0 !important;
    align-self:center !important;
  }

  .blog-hero h1 {
    font-size:clamp(2rem, 8.7vw, 2.7rem) !important;
    line-height:.94 !important;
    margin-bottom:18px !important;
  }

  .blog-intro,
  .blog-page-copy {
    font-size:clamp(.82rem, 3.55vw, .94rem) !important;
    line-height:1.43 !important;
  }

  .blog-hero-mascot {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    align-self:stretch !important;
    overflow:visible !important;
  }

  .blog-hero-mascot img {
    display:block !important;
    width:min(44vw, 235px) !important;
    max-width:100% !important;
    height:auto !important;
    margin:auto 0 auto auto !important;
    transform:none !important;
    object-position:right center !important;
  }
}

@media (max-width:430px) {
  .blog-hero-inner {
    grid-template-columns:minmax(0, 1.34fr) minmax(130px, .66fr) !important;
    gap:6px !important;
    padding-left:6vw !important;
    padding-right:4vw !important;
  }

  .blog-hero h1 {
    font-size:clamp(1.95rem, 8.6vw, 2.35rem) !important;
  }

  .blog-hero-mascot img {
    width:min(42vw, 190px) !important;
  }
}

@media (max-width:360px) {
  .blog-hero-inner {
    grid-template-columns:minmax(0, 1.38fr) minmax(112px, .62fr) !important;
  }

  .blog-hero h1 {
    font-size:1.9rem !important;
  }

  .blog-intro,
  .blog-page-copy {
    font-size:.8rem !important;
  }

  .blog-hero-mascot img {
    width:min(40vw, 155px) !important;
  }
}