:root {
  --ink:#101936;
  --cream:#fff8ed;
  --paper:#fffdf9;
  --pink:#ff2d92;
  --teal:#16b9c9;
  --yellow:#ffd329;
  --purple:#6441d8;
  --orange:#ff7040;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--font-stack);
  line-height:1.65;
  overflow-x:hidden;
}
a { color:inherit; }

/* Shared top banner */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
  min-width:0;
  background:var(--ink);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:5px clamp(16px,6vw,96px);
  min-height:var(--header-height);
}
.brand {
  flex:0 0 auto;
  display:block;
  height:82px;
  line-height:0;
}
.brand img {
  display:block;
  width:auto;
  max-width:100%;
  height:82px;
}
.site-nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(16px,2.3vw,34px);
  min-width:0;
}
.site-nav a {
  position:relative;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  font-size:clamp(.82rem,1.2vw,1rem);
  opacity:.9;
  padding:8px 0;
}
.site-nav a:hover,
.site-nav a:focus-visible { color:#ff6cb4; opacity:1; }
.site-nav a[aria-current="page"]::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:4px;
  border-radius:5px;
  background:var(--pink);
}

/* Main content */
.hero-art,
.bottom-banner {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
}


/* Editable copy over the text areas baked into the original hero artwork.
   The image is the ONLY element that establishes hero height. */
.hero-editable {
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  background:#f7eee4;
}

.hero-picture {
  display:block;
  width:100%;
  margin:0;
}

.hero-editable .hero-art {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
}

.hero-editable .hero-copy {
  position:absolute;
  z-index:2;
  box-sizing:border-box;
  padding:0;
  margin:0;
  overflow:hidden;
  background:#f7eee4;
  color:var(--ink);
}

/* Top-left: Big ideas, squishy results. */
.hero-copy-primary {
  left:5.45%;
  top:5.7%;
  width:34.8%;
  height:50.7%;
}

.hero-copy-primary h1 {
  margin:0 0 2.3vw;
  font-size:clamp(2rem,4.25vw,4.55rem);
  line-height:.98;
  letter-spacing:-.055em;
  max-width:100%;
}

.hero-copy-primary p {
  margin:0 0 1.35vw;
  font-size:clamp(.72rem,1.30vw,1.13rem);
  line-height:1.5;
  max-width:100%;
}

/* Lower-right: Creative by nature. */
.hero-copy-creative {
  left:55.25%;
  top:63.2%;
  width:40.8%;
  height:33.8%;
}

.hero-copy-creative h2 {
  margin:0 0 1.55vw;
  font-size:clamp(1.5rem,2.65vw,2.75rem);
  line-height:1;
  letter-spacing:-.045em;
}

.hero-copy-creative p {
  margin:0 0 1.35vw;
  font-size:clamp(.67rem,1.20vw,1.03rem);
  line-height:1.48;
  max-width:100%;
}

/* Keep the SAME overlay model on smaller screens.
   No relative positioning, flex ordering or extra flow boxes. */
@media (max-width:760px) {
  .hero-copy-primary h1 {
    font-size:clamp(1rem,4.25vw,2rem);
    margin-bottom:1.4vw;
  }

  .hero-copy-primary p {
    font-size:clamp(.38rem,1.30vw,.65rem);
    line-height:1.34;
    margin-bottom:.8vw;
  }

  .hero-copy-creative h2 {
    font-size:clamp(.72rem,2.65vw,1.2rem);
    margin-bottom:1vw;
  }

  .hero-copy-creative p {
    font-size:clamp(.34rem,1.20vw,.58rem);
    line-height:1.30;
    margin-bottom:.7vw;
  }
}

.intro {
  max-width:var(--content-width);
  margin:auto;
  padding:clamp(60px,8vw,95px) 6vw clamp(60px,7vw,80px);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:clamp(35px,6vw,70px);
}
h1,h2 {
  line-height:1.02;
  letter-spacing:-.055em;
  margin:0 0 24px;
}
h1 { font-size:clamp(3rem,7vw,6.7rem); }
h2 { font-size:clamp(2.4rem,5vw,4.7rem); }
.lede { font-size:clamp(1.1rem,1.8vw,1.25rem); max-width:650px; }
.small {
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
}
.side-note {
  align-self:end;
  padding:clamp(26px,3vw,35px);
  border-radius:38px;
  background:var(--yellow);
  transform:rotate(2deg);
  box-shadow:14px 16px 0 var(--ink);
}
.side-note p { margin:0; font-size:1.2rem; }

.band {
  background:var(--ink);
  color:#fff;
  padding:clamp(70px,9vw,110px) 6vw;
}
.band-inner { max-width:var(--content-width); margin:auto; }
.band h2 { max-width:850px; }
.band p { max-width:820px; }

.columns {
  max-width:var(--content-width);
  margin:auto;
  padding:clamp(70px,8vw,105px) 6vw;
}
.columns > div { max-width:820px; }
.columns p { font-size:1.08rem; }
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  margin-top:55px;
  align-items:stretch;
}
.card {
  padding:30px;
  min-height:250px;
  border-radius:28px;
}
.card h3 { font-size:1.7rem; margin:0 0 10px; letter-spacing:-.04em; }

.quote {
  max-width:var(--content-width);
  margin:0 auto;
  padding:80px 6vw 115px;
  font-size:clamp(2rem,4vw,4rem);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.1;
}

footer {
  background:var(--ink);
  color:#fff;
  padding:55px 6vw;
}
footer .foot {
  max-width:var(--content-width);
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:30px;
}
.footer-logo { font-weight:900; font-size:2rem; letter-spacing:-.07em; }
.footer-logo b { color:var(--pink); font-size:.85em; }
.muted { opacity:.6; }

/* 404 */
.error-art { position:relative; width:100%; }
.home-link {
  position:absolute;
  left:9.5%;
  top:78%;
  width:28%;
  height:13%;
  display:block;
  z-index:5;
}
.home-link:focus-visible {
  outline:3px solid var(--pink);
  outline-offset:5px;
  border-radius:8px;
}

@media (max-width:900px) {
  .site-header {
    min-height:78px;
    padding:4px 5vw;
    gap:1rem;
  }
  .brand,
  .brand img { height:68px; }
  .site-nav {
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .site-nav::-webkit-scrollbar { display:none; }
  .site-nav a { font-size:.82rem; }
  .intro { grid-template-columns:1fr; }
  footer .foot { flex-direction:column; }
}

@media (max-width:620px) {
  .hero-text-layer {
    position:absolute;
    inset:0;
  }
  .hero-creative-copy {
    position:absolute;
    left:53%;
    top:63%;
    width:42%;
    height:34%;
    padding:0;
    overflow:hidden;
    background:#f7eee4;
  }
  .hero-creative-copy h2 {
    font-size:clamp(.72rem,3vw,1.1rem);
    margin:0 0 1.2vw;
  }
  .hero-creative-copy p {
    font-size:clamp(.42rem,1.65vw,.68rem);
    line-height:1.28;
    margin:0 0 .9vw;
  }

  .site-header {
    position:sticky;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:4px 5vw 7px;
  }
  .brand { align-self:flex-start; height:54px; }
  .brand img { height:54px; }
  .site-nav {
    width:100%;
    flex:none;
    gap:24px;
    overflow-x:auto;
    justify-content:flex-start;
  }
  .site-nav a { font-size:.8rem; padding:5px 0; }
  .intro { padding-top:55px; }
  .side-note { margin:10px 8px 0; }
  .home-link { left:8%; top:76%; width:35%; height:15%; }
}


/* Generic Grav pages added later */
.generic-page { max-width:var(--content-width); margin:auto; padding:clamp(60px,8vw,95px) 6vw; }
.generic-page article { max-width:820px; }
.generic-page h1 { margin-bottom:32px; }
.generic-page img { max-width:100%; height:auto; }
.band-lede { font-size:1.15rem; }


/* Jelly.dog Blog */
.blog-shell,
.jelly-blog-post main {
  background:var(--paper);
}

.blog-hero {
  background:var(--cream);
  border-bottom:1px solid rgba(16,25,54,.08);
}

.blog-hero-inner {
  max-width:var(--content-width);
  margin:auto;
  padding:clamp(64px,8vw,110px) 6vw clamp(50px,7vw,85px);
}

.blog-hero .eyebrow,
.post-header time,
.blog-card time {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.76rem;
  font-weight:800;
}

.blog-hero .eyebrow { color:var(--pink); }

.blog-hero h1 {
  max-width:900px;
  margin:.28em 0 .28em;
  font-size:clamp(3rem,7vw,6.7rem);
  line-height:.93;
  letter-spacing:-.065em;
}

.blog-intro {
  max-width:760px;
  font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.6;
  margin:0;
}

.blog-page-copy {
  max-width:760px;
  margin-top:28px;
}

.blog-listing {
  max-width:var(--content-width);
  margin:auto;
  padding:clamp(52px,7vw,88px) 6vw;
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--blog-card-min,280px)),1fr));
  gap:28px;
  align-items:stretch;
}

.blog-card {
  --post-accent:var(--pink);
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(16,25,54,.09);
  border:1px solid rgba(16,25,54,.07);
  min-width:0;
  transition:transform .18s ease, box-shadow .18s ease;
}

.blog-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(16,25,54,.14);
}

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

.blog-card-image {
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--yellow);
}

.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:26px;
  border-top:7px solid var(--post-accent);
}

.blog-card time { opacity:.55; }

.blog-card h2 {
  font-size:clamp(1.55rem,2.5vw,2.05rem);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:10px 0 14px;
}

.blog-card p {
  line-height:1.65;
  margin:0 0 22px;
}

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

.blog-tags span {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:var(--cream);
  font-size:.76rem;
  font-weight:750;
}

.blog-read-more {
  margin-top:auto;
  padding-top:24px;
  font-weight:850;
  color:var(--post-accent);
}

.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:14px 16px 0 var(--ink);
}


/* Blog post */
.post-shell {
  max-width:980px;
  margin:auto;
  padding:clamp(60px,8vw,105px) 6vw;
}

.post-header {
  max-width:820px;
  margin:0 auto 42px;
}

.post-back {
  display:inline-block;
  color:var(--pink);
  font-weight:800;
  text-decoration:none;
  margin-bottom:36px;
}

.post-header time {
  display:block;
  opacity:.55;
  margin-bottom:14px;
}

.post-header h1 {
  font-size:clamp(3rem,7vw,6rem);
  line-height:.95;
  letter-spacing:-.06em;
  margin:0 0 26px;
}

.post-featured {
  margin:0 auto clamp(42px,6vw,72px);
}

.post-featured img {
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 18px 42px rgba(16,25,54,.12);
}

.post-content {
  max-width:760px;
  margin:auto;
  font-size:1.08rem;
  line-height:1.78;
}

.post-content h2,
.post-content h3 {
  letter-spacing:-.035em;
  line-height:1.08;
  margin-top:2em;
}

.post-content h2 { font-size:clamp(2rem,4vw,3rem); }
.post-content h3 { font-size:clamp(1.5rem,3vw,2.15rem); }

.post-content img {
  max-width:100%;
  height:auto;
  border-radius:18px;
}

.post-content blockquote {
  margin:2.2em 0;
  padding:1.2em 1.4em;
  background:var(--cream);
  border-left:7px solid var(--post-accent);
  border-radius:0 18px 18px 0;
  font-size:1.15em;
}

.post-footer {
  max-width:760px;
  margin:60px auto 0;
  padding-top:32px;
  border-top:1px solid rgba(16,25,54,.12);
}

.post-back-button {
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

/* Pagination plugin */
.jelly-pagination {
  margin-top:48px;
}

.jelly-pagination .pagination {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  padding:0;
  list-style:none;
}

.jelly-pagination .pagination li {
  list-style:none;
}

.jelly-pagination .pagination a,
.jelly-pagination .pagination span {
  display:grid;
  place-items:center;
  min-width:42px;
  min-height:42px;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
}

.jelly-pagination .pagination a {
  background:var(--cream);
  color:var(--ink);
  font-weight:800;
}

.jelly-pagination .pagination .active span,
.jelly-pagination .pagination a:hover {
  background:var(--pink);
  color:#fff;
}

@media (max-width:620px) {
  .blog-card-body { padding:22px; }
  .blog-hero-inner,
  .blog-listing,
  .post-shell { padding-left:5vw; padding-right:5vw; }
  .post-featured img { border-radius:18px; }
}


.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;
  font-size:clamp(2.4rem,5vw,4.8rem);
}

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

.blog-intro {
  max-width:760px;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.6;
}



/* =========================================================
   Jelly.dog editorial treatment — Blog / Blog Post v1.2.6
   Kept at the end of the stylesheet deliberately so these
   rules win over generic blog defaults.
   ========================================================= */

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

.blog-hero {
  position:relative;
  overflow:hidden;
  background:var(--yellow);
  border:0;
  border-bottom:4px solid var(--ink);
}

.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);
}

.blog-hero .eyebrow {
  display:inline-block;
  padding:7px 12px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}

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

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

.blog-page-copy {
  margin-top:24px;
}

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

.blog-page-copy h1,
.blog-page-copy h2,
.blog-page-copy h3 {
  letter-spacing:-.045em;
}

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

.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;
  gap:clamp(24px,3vw,36px);
}

.blog-card {
  position:relative;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:30px;
  box-shadow:10px 12px 0 var(--ink);
  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);
}

.blog-card-image {
  border-bottom:3px solid var(--ink);
}

.blog-card-body {
  padding:clamp(24px,3vw,32px);
  border-top:8px solid var(--post-accent);
}

.blog-card time {
  opacity:1;
  color:var(--purple);
}

.blog-card h2 {
  font-size:clamp(1.8rem,2.8vw,2.45rem);
  margin:12px 0 14px;
}

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

.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);
  font-weight:900;
}

.blog-tags span {
  border:2px solid var(--ink);
  background:var(--cream);
  color:var(--ink);
  font-weight:800;
}

.blog-empty {
  background:var(--yellow);
  border:3px solid var(--ink);
  box-shadow:12px 14px 0 var(--ink);
}

/* ---------- Individual article ---------- */

.jelly-blog-post main {
  overflow:hidden;
}

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

.post-header {
  position:relative;
  max-width:none;
  margin:0;
  padding:clamp(58px,8vw,100px) max(6vw,calc((100vw - var(--content-width))/2 + 6vw)) clamp(52px,7vw,84px);
  background:var(--teal);
  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;
  color:var(--ink);
  font-weight:900;
  text-decoration:none;
}

.post-header time {
  margin-bottom:16px;
  opacity:1;
}

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

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

.post-featured img {
  border:3px solid var(--ink);
  border-radius:32px;
  box-shadow:12px 14px 0 var(--ink);
}

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

.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;
  line-height:1.05;
}

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

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

.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;
  padding:1.3em 1.5em;
  background:var(--yellow);
  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;
  padding:clamp(44px,6vw,72px) 0 clamp(72px,8vw,105px);
  border:0;
}

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

.post-back-button:hover {
  transform:translateY(-2px);
  box-shadow:7px 8px 0 var(--ink);
}

@media (max-width:760px) {
  .blog-hero::after {
    opacity:.7;
  }

  .blog-card:nth-child(n) {
    transform:none;
  }

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

  .post-featured {
    width:88vw;
  }

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

  .post-content blockquote {
    margin:2em 0;
  }

  .post-footer {
    width:88vw;
  }
}


/* =========================================================
   v1.3.4 — homepage mobile hero cleanup
   ========================================================= */

/* On mobile the editable hero copy is already presented as live content.
   Hide the original baked desktop artwork so it does not appear as a
   duplicated miniature desktop composition underneath. */
@media (max-width:760px) {
  .hero-editable .hero-picture {
    display:none !important;
  }

  .hero-editable {
    overflow:visible;
    background:var(--cream);
  }

  .hero-editable .hero-copy {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    background:var(--cream) !important;
  }

  .hero-copy-primary,
  .hero-copy-creative {
    padding:28px 6vw !important;
  }

  .hero-copy-primary {
    border-bottom:1px solid rgba(16,25,54,.08);
  }

  .hero-copy-primary h1,
  .hero-copy-creative h2 {
    margin-bottom:14px !important;
  }

  .hero-copy-primary h1 {
    font-size:clamp(2.15rem,10vw,3.2rem) !important;
    line-height:.96 !important;
  }

  .hero-copy-creative h2 {
    font-size:clamp(1.9rem,8.5vw,2.7rem) !important;
    line-height:.98 !important;
  }

  .hero-copy-primary p,
  .hero-copy-creative p {
    font-size:.98rem !important;
    line-height:1.5 !important;
    margin-bottom:14px !important;
  }
}


/* =========================================================
   v1.3.5 — mobile-only Jelly.dog mascot panel
   ========================================================= */

.mobile-mascot-panel {
  display:none;
}

@media (max-width:760px) {
  .mobile-mascot-panel {
    display:block;
    position:relative;
    width:100%;
    height:clamp(185px,58vw,285px);
    overflow:hidden;
    background:var(--cream);
    border-top:1px solid rgba(16,25,54,.08);
    border-bottom:1px solid rgba(16,25,54,.08);
  }

  .mobile-mascot-panel picture {
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .mobile-mascot-panel img {
    display:block;
    position:absolute;
    width:205%;
    max-width:none;
    height:auto;
    left:-99%;
    top:-7%;
  }

  /* Keep the live text sections compact around the mascot panel. */
  .hero-copy-primary {
    padding-bottom:24px !important;
  }

  .hero-copy-creative {
    padding-top:24px !important;
  }
}


/* =========================================================
   v1.3.6 — responsive/dynamic 404 page
   ========================================================= */

.error-mobile {
  display:none;
}

/* Desktop keeps the approved full composition. */
.error-desktop {
  display:block;
}

/* Mobile gets live text + a separately cropped mascot scene. */
@media (max-width:760px) {
  .error-desktop {
    display:none !important;
  }

  .error-mobile {
    display:block;
    background:var(--cream);
    color:var(--ink);
    overflow:hidden;
    border-bottom:3px solid var(--ink);
  }

  .error-mobile-copy {
    padding:30px 6vw 20px;
  }

  .error-mobile-code {
    display:inline-block;
    margin-bottom:8px;
    font-size:clamp(4.1rem,20vw,6.4rem);
    line-height:.85;
    font-weight:900;
    letter-spacing:-.08em;
    color:var(--ink);
    position:relative;
  }

  .error-mobile-code::after {
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    right:-17px;
    top:7px;
    border-radius:50%;
    background:var(--pink);
    box-shadow:
      17px 18px 0 var(--teal),
      -7px 28px 0 var(--yellow);
  }

  .error-mobile h1 {
    max-width:520px;
    margin:0 0 16px;
    font-size:clamp(2rem,9vw,3rem);
    line-height:.96;
    letter-spacing:-.055em;
  }

  .error-mobile p {
    max-width:560px;
    margin:0 0 13px;
    font-size:.96rem;
    line-height:1.48;
  }

  .error-mobile-button {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:5px;
    padding:9px 14px;
    border:2px solid var(--ink);
    border-radius:999px;
    background:var(--yellow);
    color:var(--ink);
    box-shadow:4px 5px 0 var(--ink);
    text-decoration:none;
    font-weight:900;
  }

  .error-mobile-button:active {
    transform:translateY(1px);
    box-shadow:3px 4px 0 var(--ink);
  }

  .error-mobile-visual {
    position:relative;
    width:100%;
    height:clamp(235px,67vw,360px);
    overflow:hidden;
    background:var(--cream);
  }

  .error-mobile-visual img {
    display:block;
    position:absolute;
    width:122%;
    max-width:none;
    height:auto;
    left:-5%;
    bottom:-4%;
  }
}


/* =========================================================
   v1.3.7 — 404 image fit + mobile footer text refinement
   ========================================================= */

@media (max-width:760px) {
  /* Remove the artificial divider below the mobile 404. */
  .error-mobile {
    border-bottom:0 !important;
  }

  /* Let the existing holiday artwork keep its natural aspect ratio.
     This prevents the top of the dog from being cropped. */
  .error-mobile-visual {
    height:auto !important;
    overflow:visible !important;
    background:var(--cream);
    line-height:0;
  }

  .error-mobile-visual img {
    position:static !important;
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 !important;
  }

  /* Make the mobile footer substantially quieter/smaller. */
  footer {
    padding:34px 6vw 38px !important;
  }

  footer .foot {
    gap:20px !important;
  }

  .footer-logo {
    font-size:1.45rem !important;
    line-height:1 !important;
  }

  .footer-logo b {
    font-size:.82em !important;
  }

  footer .muted {
    font-size:.78rem !important;
    line-height:1.5 !important;
  }

  footer .foot > div:first-child .muted {
    margin-top:10px;
    max-width:34em;
  }
}


/* =========================================================
   v2.0.0 — personal homepage
   ========================================================= */

.personal-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  align-items:center;
  gap:clamp(28px,4vw,66px);
  max-width:var(--content-width);
  margin:0 auto;
  padding:clamp(54px,6vw,86px) 6vw;
  background:var(--cream);
}

.personal-hero-copy {
  min-width:0;
}

.personal-hero-copy h1 {
  margin:.16em 0 .34em;
  font-size:clamp(3.1rem,6vw,6rem);
  line-height:.9;
  letter-spacing:-.065em;
}

.personal-hero-copy .lede {
  font-size:clamp(1.1rem,1.45vw,1.32rem);
  line-height:1.5;
}

.personal-hero-copy p {
  max-width:690px;
}

.personal-hero-mascot {
  position:relative;
  height:clamp(360px,34vw,520px);
  overflow:hidden;
}

.personal-hero-mascot picture,
.personal-hero-mascot img {
  display:block;
  width:100%;
  height:100%;
}

.personal-hero-mascot img {
  width:190%;
  max-width:none;
  height:auto;
  position:absolute;
  left:-78%;
  top:-4%;
}

/* Personal project cards */
.personal-projects {
  max-width:var(--content-width);
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:44px;
}

.project-card {
  position:relative;
  min-width:0;
  padding:24px;
  border:3px solid var(--ink);
  border-radius:28px;
  background:var(--paper);
  box-shadow:10px 12px 0 var(--ink);
  overflow:hidden;
}

.project-card::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:9px;
  background:var(--project-accent);
}

.project-card-top {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:15px;
}

.project-logo {
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 62px;
  width:62px;
  height:62px;
  border:2px solid rgba(16,25,54,.16);
  border-radius:16px;
  background:#f1f3f7;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}

.project-logo img {
  position:absolute;
  inset:6px;
  display:block;
  width:calc(100% - 12px);
  height:calc(100% - 12px);
  object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(16,25,54,.28));
}

.project-logo-fallback {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  padding:4px;
  color:var(--ink);
  font-size:1.02rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.project-card h3 {
  margin:0;
  font-size:1.55rem;
  line-height:1;
  letter-spacing:-.045em;
}

.project-card p {
  margin:0;
  font-size:.98rem;
  line-height:1.5;
}

/* Editable wording over a cleaned version of the original bottom banner. */

.personal-bottom-banner picture,


@media (max-width:980px) {
  .personal-hero {
    grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
  }

  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px) {
  .personal-hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:30px 6vw 0;
  }

  .personal-hero-copy h1 {
    font-size:clamp(2.45rem,12vw,3.65rem);
  }

  .personal-hero-copy .lede {
    font-size:1rem;
  }

  .personal-hero-mascot {
    height:clamp(210px,62vw,315px);
    margin:0 -6vw;
  }

  .personal-hero-mascot img {
    width:205%;
    left:-99%;
    top:-8%;
  }

  .project-grid {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:30px;
  }

  .project-card {
    padding:20px;
    border-radius:22px;
    box-shadow:7px 8px 0 var(--ink);
  }

  .project-logo {
    flex-basis:54px;
    width:54px;
    height:54px;
  }

  .project-card h3 {
    font-size:1.35rem;
  }




}


/* =========================================================
   v2.0.1 — corrected personal mascot artwork
   ========================================================= */

/* New artwork is already cropped to the intended composition,
   so display it naturally rather than clipping/zooming home-main. */
.personal-hero-mascot {
  height:auto !important;
  overflow:visible !important;
}

.personal-hero-mascot picture {
  display:block !important;
  width:100% !important;
  height:auto !important;
}

.personal-hero-mascot img {
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  left:auto !important;
  top:auto !important;
  margin:0 !important;
}

@media (max-width:760px) {
  .personal-hero-mascot {
    height:auto !important;
    margin:0 -6vw !important;
    overflow:visible !important;
  }

  .personal-hero-mascot picture,
  .personal-hero-mascot img {
    width:100% !important;
    max-width:none !important;
    height:auto !important;
  }
}


/* =========================================================
   v2.0.4 — unified personalised bottom banner on all pages
   ========================================================= */



@media (max-width:760px) {
}


/* =========================================================
   v2.0.5 — vertically centre shared bottom-banner wording
   ========================================================= */

/* The copy sits inside the navy speech/blob on the left.
   Use transform-based centring instead of a hand-tuned top offset. */
.personal-bottom-banner .personal-banner-copy,

@media (max-width:760px) {
  .personal-bottom-banner .personal-banner-copy,
}


/* =========================================================
   v2.0.6 — approved train-themed 404 artwork
   ========================================================= */

.train-404 {
  background:var(--cream);
  padding:0;
  margin:0;
}

.train-404-art {
  position:relative;
  width:min(100%,1024px);
  margin:0 auto;
  background:var(--cream);
  line-height:0;
}

.train-404-art picture,
.train-404-art img {
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

/* Clickable overlay over the button baked into the approved artwork. */
.train-404-home-link {
  position:absolute;
  left:4.2%;
  top:49.7%;
  width:30.5%;
  height:6.5%;
  z-index:3;
  display:block;
  border-radius:999px;
}

.train-404-home-link:focus-visible {
  outline:4px solid var(--pink);
  outline-offset:5px;
}

@media (max-width:760px) {
  .train-404-art {
    width:100%;
    max-width:none;
  }

  .train-404-home-link {
    left:4.2%;
    top:49.7%;
    width:30.5%;
    height:6.5%;
  }
}


/* =========================================================
   v2.0.7 — remove seam between 404 artwork and bottom banner
   ========================================================= */

.train-404,
.train-404-art,
.train-404-art picture,
.train-404-art img {
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  border-bottom:0 !important;
}

.train-404-art {
  line-height:0 !important;
}

.train-404 + .personal-bottom-banner,

.train-404 + .personal-bottom-banner picture,
.train-404 + .shared-personal-bottom-banner picture,
.train-404 + .personal-bottom-banner .bottom-banner,


/* =========================================================
   v2.0.8 — banner seam removed at source
   ========================================================= */

/* The personalised banner image itself no longer contains the
   24px cream strip that created the visible seam below the 404. */
.personal-bottom-banner,
.shared-personal-bottom-banner,
.personal-bottom-banner picture,
.shared-personal-bottom-banner picture,
.personal-bottom-banner .bottom-banner,


/* =========================================================
   v2.0.9 — new homepage Jelly.dog tinkering hero
   ========================================================= */

.home-personal-mascot picture,
.home-personal-mascot img,
.personal-home-mascot picture,
.personal-home-mascot img,
.home-mobile-mascot picture,
.home-mobile-mascot img {
  display:block;
  width:100%;
  height:auto;
}

.home-personal-mascot img,
.personal-home-mascot img,
.home-mobile-mascot img {
  object-fit:contain;
  object-position:center;
}


/* =========================================================
   v2.0.10 — Jelly.dog header logo + "Trains, tech & tinkering."
   ========================================================= */

.site-header {
  min-height:112px;
}

.brand-with-tagline {
  height:auto !important;
  min-height:96px;
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  text-decoration:none;
  line-height:1;
  padding:7px 0 8px;
}

.brand-with-tagline img {
  height:65px !important;
  width:auto;
  max-width:237px;
  object-fit:contain;
  object-position:left center;
}

.brand-tagline {
  display:block;
  margin:-2px 0 0 15px;
  color:#fff;
  font-size:clamp(.82rem,1.15vw,1rem);
  line-height:1.1;
  font-weight:700;
  font-style:italic;
  letter-spacing:-.025em;
  white-space:nowrap;
  opacity:.98;
  transform:rotate(-1deg);
}

.brand-tagline::after {
  content:"";
  display:block;
  width:78%;
  height:4px;
  margin:5px 0 0 2px;
  border-radius:999px;
  background:var(--pink);
  transform:rotate(-1deg);
}

@media (max-width:900px) {
  .site-header {
    min-height:100px;
  }

  .brand-with-tagline {
    min-height:84px;
    padding:5px 0 6px;
  }

  .brand-with-tagline img {
    height:56px !important;
  }

  .brand-tagline {
    margin-top:-1px;
    margin-left:12px;
    font-size:.78rem;
  }
}

@media (max-width:620px) {
  .site-header {
    min-height:0;
    padding-top:7px;
  }

  .brand-with-tagline {
    align-self:flex-start;
    min-height:76px;
    padding:2px 0 5px;
  }

  .brand-with-tagline img {
    height:51px !important;
    max-width:190px;
  }

  .brand-tagline {
    margin-left:9px;
    font-size:.72rem;
  }

  .brand-tagline::after {
    height:3px;
    margin-top:4px;
  }
}


/* =========================================================
   v2.0.11 — header slogan matched more closely to homepage art
   ========================================================= */

.brand-with-tagline {
  position:relative;
}

.brand-tagline {
  position:relative;
  display:inline-block;
  margin:-1px 0 0 13px !important;
  color:#fff;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive !important;
  font-size:clamp(.92rem,1.35vw,1.12rem) !important;
  line-height:1 !important;
  font-weight:700 !important;
  font-style:normal !important;
  letter-spacing:-.04em !important;
  white-space:nowrap;
  transform:rotate(-2deg);
  text-shadow:0 1px 0 rgba(0,0,0,.08);
  padding:0 5px 10px 0;
}

/* Pink hand-drawn swoosh under the slogan, like the homepage image. */
.brand-tagline::after {
  content:"";
  position:absolute;
  left:20%;
  right:4%;
  bottom:0;
  height:6px;
  margin:0 !important;
  border-radius:80% 20% 70% 30% / 60% 40% 60% 40%;
  background:var(--pink);
  transform:rotate(-3deg) skewX(-12deg);
}

/* Small cyan/yellow paint marks around the slogan to echo the artwork. */
.brand-tagline::before {
  content:"";
  position:absolute;
  left:-13px;
  top:-2px;
  width:8px;
  height:8px;
  border-radius:70% 30% 65% 35%;
  background:var(--teal);
  transform:rotate(28deg);
  box-shadow:
    238px 5px 0 -1px var(--teal),
    251px 18px 0 -1px var(--yellow);
}

@media (max-width:900px) {
  .brand-tagline {
    margin-left:10px !important;
    font-size:.82rem !important;
    padding-bottom:9px;
  }

  .brand-tagline::before {
    box-shadow:
      210px 4px 0 -1px var(--teal),
      222px 16px 0 -1px var(--yellow);
  }
}

@media (max-width:620px) {
  .brand-tagline {
    margin-left:8px !important;
    font-size:.74rem !important;
    padding-bottom:8px;
  }

  .brand-tagline::after {
    height:4px;
  }

  .brand-tagline::before {
    left:-10px;
    width:6px;
    height:6px;
    box-shadow:
      188px 4px 0 -1px var(--teal),
      198px 14px 0 -1px var(--yellow);
  }
}


/* =========================================================
   v2.0.12 — exact homepage-art logo lock-up in header
   ========================================================= */

.brand-homepage-lockup {
  flex:0 0 auto;
  display:block !important;
  height:auto !important;
  line-height:0;
  padding:6px 0;
  text-decoration:none;
}

.brand-homepage-lockup img {
  display:block;
  width:auto !important;
  height:92px !important;
  max-width:min(430px,42vw) !important;
  object-fit:contain;
  object-position:left center;
}

/* The slogan is now part of the exact extracted artwork, so suppress
   the earlier CSS-built tagline if old markup is ever cached. */
.brand-homepage-lockup .brand-tagline {
  display:none !important;
}

@media (max-width:900px) {
  .brand-homepage-lockup img {
    height:82px !important;
    max-width:min(360px,48vw) !important;
  }
}

@media (max-width:620px) {
  .site-header {
    padding-top:6px;
  }

  .brand-homepage-lockup {
    padding:2px 0 4px;
  }

  .brand-homepage-lockup img {
    height:78px !important;
    max-width:min(330px,88vw) !important;
  }
}


/* =========================================================
   v2.0.13 — clean extracted header lock-up + reduced scale
   ========================================================= */

.site-header {
  min-height:88px !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
}

.brand-homepage-lockup {
  padding:2px 0 !important;
}

.brand-homepage-lockup img {
  width:250px !important;
  height:auto !important;
  max-width:34vw !important;
  object-fit:contain;
  object-position:left center;
}

@media (max-width:900px) {
  .site-header {
    min-height:78px !important;
  }

  .brand-homepage-lockup img {
    width:220px !important;
    height:auto !important;
    max-width:40vw !important;
  }
}

@media (max-width:620px) {
  .site-header {
    min-height:0 !important;
    padding:4px 5vw 6px !important;
    gap:0 !important;
  }

  .brand-homepage-lockup {
    min-height:0 !important;
    padding:0 0 2px !important;
  }

  .brand-homepage-lockup img {
    width:185px !important;
    height:auto !important;
    max-width:72vw !important;
  }

  .site-nav {
    margin-top:0 !important;
  }
}


/* =========================================================
   v2.0.14 — clean logo pixels + compact mobile header
   ========================================================= */

.site-header {
  min-height:82px !important;
  padding-top:3px !important;
  padding-bottom:3px !important;
}

.brand-homepage-lockup {
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  overflow:visible !important;
}

.brand-homepage-lockup img {
  display:block !important;
  width:220px !important;
  height:auto !important;
  max-width:30vw !important;
  margin:0 !important;
}

@media (max-width:900px) {
  .site-header {
    min-height:72px !important;
  }

  .brand-homepage-lockup img {
    width:185px !important;
    max-width:36vw !important;
  }
}

@media (max-width:620px) {
  .site-header {
    min-height:0 !important;
    padding:5px 5vw 7px !important;
  }

  .brand-homepage-lockup {
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
  }

  .brand-homepage-lockup img {
    width:145px !important;
    max-width:58vw !important;
    height:auto !important;
  }

  .site-nav {
    margin-top:1px !important;
    gap:24px !important;
  }

  .site-nav a {
    padding:3px 0 !important;
  }
}


/* =========================================================
   v2.0.15 — restore original Jelly.dog header logo
   ========================================================= */

.site-header {
  min-height:var(--header-height) !important;
  padding:5px clamp(16px,6vw,96px) !important;
}

.brand {
  flex:0 0 auto !important;
  display:block !important;
  height:82px !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
}

.brand img {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:82px !important;
  margin:0 !important;
}

@media (max-width:900px) {
  .site-header {
    min-height:78px !important;
    padding:4px 5vw !important;
    gap:1rem !important;
  }

  .brand,
  .brand img {
    height:68px !important;
  }
}

@media (max-width:620px) {
  .site-header {
    position:sticky !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:4px 5vw 7px !important;
  }

  .brand {
    align-self:flex-start !important;
    height:54px !important;
  }

  .brand img {
    height:54px !important;
    width:auto !important;
  }

  .site-nav {
    margin-top:0 !important;
  }
}


/* =========================================================
   v2.0.16 — original header logo restoration fix
   ========================================================= */

.site-header .brand {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.site-header .brand img {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* v2.0.17 minimal station ticker */
.jd-ticker{width:100%;overflow:hidden;background:#050505;color:#ff9d00;margin:0;border:0;box-shadow:inset 0 1px rgba(255,157,0,.13),inset 0 -1px rgba(255,157,0,.13)}
.jd-ticker-viewport{width:100%;overflow:hidden;white-space:nowrap;padding:9px 0 8px}
.jd-ticker-track{--distance:1000px;--duration:22s;display:flex;width:max-content;will-change:transform;animation:jdscroll var(--duration) linear infinite}
.jd-ticker-set{display:flex;flex:none;align-items:center;white-space:nowrap;padding-right:2.25rem}
.jd-ticker-message,.jd-ticker-separator{font-family:"Courier New",Courier,monospace;font-size:clamp(.84rem,1.25vw,1.05rem);font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.075em;color:#ff9d00;text-shadow:0 0 2px rgba(255,157,0,.95),0 0 7px rgba(255,120,0,.45)}
.jd-ticker-separator{margin:0 1.35rem}
@keyframes jdscroll{from{transform:translate3d(100vw,0,0)}to{transform:translate3d(calc(-1 * var(--distance)),0,0)}}
.jd-ticker:hover .jd-ticker-track{animation-play-state:paused}
@media(max-width:620px){.jd-ticker-viewport{padding:8px 0 7px}.jd-ticker-message,.jd-ticker-separator{font-size:.79rem;letter-spacing:.06em}.jd-ticker-separator{margin:0 1rem}}
@media(prefers-reduced-motion:reduce){.jd-ticker-viewport{overflow-x:auto;scrollbar-width:none}.jd-ticker-viewport::-webkit-scrollbar{display:none}.jd-ticker-track{animation:none!important;transform:none!important}.jd-ticker-set[aria-hidden="true"]{display:none}.jd-ticker-set{padding-left:1rem}}


/* =========================================================
   v2.0.18 — updated sunglasses-free train 404 artwork
   ========================================================= */

.train-404-art {
  width:min(100%,1024px);
}

.train-404-home-link {
  left:4.4% !important;
  top:49.8% !important;
  width:30.3% !important;
  height:6.6% !important;
}

@media (max-width:760px) {
  .train-404-home-link {
    left:4.4% !important;
    top:49.8% !important;
    width:30.3% !important;
    height:6.6% !important;
  }
}


/* =========================================================
   v2.0.19 — rounded modern passenger-information typography
   ========================================================= */

.jd-ticker-message,
.jd-ticker-separator {
  font-family:"Arial Rounded MT Bold","Avenir Next Rounded","Nunito","Trebuchet MS",Arial,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;
  font-variant-numeric:tabular-nums;
}

@media (max-width:620px) {
  .jd-ticker-message,
  .jd-ticker-separator {
    letter-spacing:.025em !important;
  }
}


/* =========================================================
   v2.0.20 — sharpen ticker text, especially on mobile
   ========================================================= */

.jd-ticker-message,
.jd-ticker-separator {
  /* Keep the rounded transport-display feel, but make the glyphs crisp. */
  font-family:"Arial Rounded MT Bold","Avenir Next Rounded","Trebuchet MS",Arial,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;

  /* Remove the heavy glow that made moving text look soft/blurred. */
  text-shadow:
    0 0 1px rgba(255,157,0,.65) !important;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Slightly brighter solid amber for better contrast against black. */
.jd-ticker-message,
.jd-ticker-separator {
  color:#ffa300 !important;
}

/* The old pseudo-dot texture also softened small mobile lettering. */
.jd-ticker-message::after,
.jd-ticker-separator::after {
  display:none !important;
}

@media (max-width:620px) {
  .jd-ticker-viewport {
    padding:8px 0 7px !important;
  }

  .jd-ticker-message,
  .jd-ticker-separator {
    font-size:.82rem !important;
    letter-spacing:.018em !important;
    text-shadow:none !important;
    font-weight:700 !important;
  }
}

/* v2.0.21 — ticker scheduling; visuals unchanged. */


/* =========================================================
   v2.0.22 — force identical ticker message sizing on iOS Safari
   ========================================================= */

/* iOS Safari can independently text-autosize separate inline/flex
   elements. Disable that behaviour inside the ticker so every
   message uses exactly the same metrics. */
.jd-ticker,
.jd-ticker * {
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}

.jd-ticker-message,
.jd-ticker-separator {
  font-size:16px !important;
  line-height:1 !important;
  font-weight:700 !important;
  font-style:normal !important;
  font-stretch:normal !important;
  font-variant:normal !important;
  font-kerning:normal !important;
  flex:0 0 auto;
}

@media (max-width:620px) {
  .jd-ticker-message,
  .jd-ticker-separator {
    font-size:13px !important;
    line-height:13px !important;
  }
}

/* v2.0.23 — separator now also appears between the final and first ticker messages. */


/* =========================================================
   v2.0.24 — uniform separator spacing at ticker loop boundary
   ========================================================= */

/* The final separator was followed by the ticker-set's extra right padding,
   so the gap before the repeated first message was larger than every other
   separator gap. Let the separator's own margins provide all spacing. */
.jd-ticker-set {
  padding-right:0 !important;
}

.jd-ticker-separator {
  margin-left:1.35rem !important;
  margin-right:1.35rem !important;
}

@media (max-width:620px) {
  .jd-ticker-separator {
    margin-left:1rem !important;
    margin-right:1rem !important;
  }
}


/* =========================================================
   v2.0.25 — fourteen random railway-themed 404 designs
   ========================================================= */

.random-404 {
  margin:0;
  padding:0;
  background:#fffaf0;
}

.random-404-art {
  width:min(100%,1100px);
  margin:0 auto;
  padding:0;
}

.random-404-home {
  display:block;
  margin:0;
  padding:0;
  text-decoration:none;
}

.random-404-art picture,
.random-404-art img {
  display:block;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}

.random-404 + .personal-bottom-banner,

@media (max-width:620px) {
  .random-404-art {
    width:100%;
  }
}


/* =========================================================
   v2.0.26 — crisp live 404 text on mobile
   ========================================================= */

.random-404 {
  background:var(--cream);
}

.random-404-card {
  width:min(100%,1100px);
  margin:0 auto;
  background:var(--cream);
}

.random-404-picture,
.random-404-picture img {
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

.random-404-copy {
  padding:clamp(24px,4vw,46px) clamp(20px,5vw,58px) clamp(30px,5vw,52px);
  text-align:center;
  background:var(--cream);
}

.random-404-copy h1 {
  max-width:880px;
  margin:0 auto 14px;
  color:var(--ink);
  font-size:clamp(1.7rem,4vw,3.1rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.random-404-copy p {
  max-width:720px;
  margin:0 auto 24px;
  color:var(--ink);
  font-size:clamp(1rem,1.8vw,1.18rem);
  line-height:1.5;
}

.random-404-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:12px 26px;
  border-radius:999px;
  background:var(--pink);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  line-height:1;
  box-shadow:0 3px 0 rgba(16,25,54,.12);
}

.random-404-button:hover,
.random-404-button:focus-visible {
  transform:translateY(-1px);
  background:#ef2185;
}

.random-404-button:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:3px;
}

@media (max-width:620px) {
  .random-404-copy {
    padding:22px 18px 28px;
  }

  .random-404-copy h1 {
    font-size:1.55rem;
    margin-bottom:12px;
  }

  .random-404-copy p {
    font-size:.96rem;
    line-height:1.45;
    margin-bottom:20px;
  }

  .random-404-button {
    min-width:170px;
    padding:12px 24px;
  }
}


/* =========================================================
   v2.0.27 — clean individual-looking 404 scene framing
   ========================================================= */

.random-404-card,
.random-404-picture {
  overflow:hidden !important;
}

.random-404-picture {
  position:relative;
  background:var(--cream);
}

.random-404-picture img {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media (max-width:620px) {
  .random-404-picture,
  .random-404-picture img {
    width:100% !important;
  }
}


/* =========================================================
   v2.0.28 — individually isolated 404 scenes, uniform full bleed
   ========================================================= */

.random-404,
.random-404-card,
.random-404-picture {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:var(--cream);
}

.random-404-picture img {
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.random-404-copy {
  width:100%;
  box-sizing:border-box;
}

@media (max-width:620px) {
  .random-404-picture,
  .random-404-picture img {
    width:100vw !important;
    max-width:100vw !important;
  }
}


/* =========================================================
   v2.0.29 — proper individual 404 scene assets
   ========================================================= */

.random-404,
.random-404-card,
.random-404-picture {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

.random-404-picture {
  aspect-ratio:16 / 9;
  background:#111;
}

.random-404-picture img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media (max-width:620px) {
  .random-404-picture {
    width:100vw !important;
    aspect-ratio:16 / 9;
  }

  .random-404-picture img {
    width:100vw !important;
    height:100% !important;
  }
}

/* =========================================================
   v2.0.30 — exact 14 individual 404 scenes; no crop/padding/borders
   ========================================================= */
.random-404-picture {
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  line-height:0 !important;
}
.random-404-picture img {
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
@media (max-width:620px) {
  .random-404-picture,
  .random-404-picture img {
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
  }
}


/* =========================================================
   v2.0.31 — definitive 404 image framing
   ========================================================= */

.random-404,
.random-404-card,
.random-404-picture {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}

.random-404-picture img {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
}

@media (max-width:620px) {
  .random-404,
  .random-404-card,
  .random-404-picture,
  .random-404-picture img {
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
  }
}


/* =========================================================
   v2.1.0 — configurable homepage Jelly.dog carousel
   ========================================================= */

.personal-hero .jd-carousel {
  position:relative;
  height:auto !important;
  aspect-ratio:1672 / 941;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:28px;
  background:var(--ink);
  box-shadow:10px 12px 0 var(--ink);
  isolation:isolate;
}

.jd-carousel-stage {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:24px;
  background:var(--ink);
}

.personal-hero .jd-carousel-slide {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
}

.personal-hero .jd-carousel-slide.is-active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
}

.personal-hero .jd-carousel-slide img {
  position:static !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  border:0 !important;
  transform:none !important;
}

/* Fade is the default. */
.jd-carousel-fade .jd-carousel-slide {
  transform:none;
}

/* Optional gentle slide transition. */
.jd-carousel-slide .jd-carousel-slide {
  transform:translateX(4%);
}
.jd-carousel-slide .jd-carousel-slide.is-active {
  transform:translateX(0);
}

.jd-carousel-arrow {
  position:absolute;
  z-index:5;
  top:50%;
  width:46px;
  height:46px;
  margin:0;
  padding:0 0 4px;
  transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:rgba(16,25,54,.78);
  color:#fff;
  font:900 2rem/1 var(--font-stack);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  -webkit-tap-highlight-color:transparent;
}

.jd-carousel-prev { left:14px; }
.jd-carousel-next { right:14px; }

.jd-carousel-arrow:hover,
.jd-carousel-arrow:focus-visible {
  background:var(--pink);
  outline:3px solid #fff;
  outline-offset:2px;
}

.jd-carousel-dots {
  position:absolute;
  z-index:5;
  left:50%;
  bottom:14px;
  display:flex;
  gap:8px;
  transform:translateX(-50%);
  padding:7px 10px;
  border-radius:999px;
  background:rgba(16,25,54,.66);
  backdrop-filter:blur(4px);
}

.jd-carousel-dot {
  width:10px;
  height:10px;
  margin:0;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.jd-carousel-dot.is-active {
  background:var(--pink);
}

.personal-hero-mascot-fallback {
  height:auto !important;
}
.personal-hero-mascot-fallback img {
  position:static !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

@media (max-width:980px) {
  .personal-hero .jd-carousel {
    box-shadow:7px 8px 0 var(--ink);
  }
}

@media (max-width:760px) {
  .personal-hero .jd-carousel {
    width:calc(100% + 12vw) !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    margin:8px -6vw 0 !important;
    aspect-ratio:1672 / 941 !important;
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
  }

  .personal-hero .jd-carousel-stage {
    border-radius:0;
  }

  .personal-hero .jd-carousel-slide img {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }

  .jd-carousel-arrow {
    width:40px;
    height:40px;
    font-size:1.7rem;
  }

  .jd-carousel-prev { left:10px; }
  .jd-carousel-next { right:10px; }

  .jd-carousel-dots {
    bottom:10px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .personal-hero .jd-carousel-slide {
    transition:none !important;
  }
}


/* v2.1.2 carousel interaction fix */
.jd-carousel {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.jd-carousel img {
  -webkit-user-drag: none;
  user-drag: none;
}


/* v2.1.4 — carousel execution/swipe fix */
.jd-carousel {
  touch-action: pan-y !important;
  overscroll-behavior-x: contain;
}
.jd-carousel-arrow,
.jd-carousel-dots {
  display:none !important;
}


/* v2.1.5 — identical flush framing for every carousel image */
.personal-hero .jd-carousel,
.personal-hero .jd-carousel-stage,
.personal-hero .jd-carousel-slide,
.personal-hero .jd-carousel-slide img {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.personal-hero .jd-carousel,
.personal-hero .jd-carousel-stage {
  background:transparent !important;
}

.personal-hero .jd-carousel-slide img {
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center center !important;
}


/* =========================================================
   v2.1.6 — real carousel transition engine
   ========================================================= */

.personal-hero .jd-carousel-slide {
  opacity:0 !important;
  visibility:hidden !important;
  transform:translate3d(0,0,0) !important;
  transition:none !important;
  z-index:1 !important;
  will-change:opacity, transform;
}

.personal-hero .jd-carousel-slide.is-active,
.personal-hero .jd-carousel-slide.is-entering,
.personal-hero .jd-carousel-slide.is-leaving {
  visibility:visible !important;
}

.personal-hero .jd-carousel-slide.is-active {
  opacity:1 !important;
  z-index:2 !important;
}

/* Fade */
.jd-carousel[data-transition-type="fade"] .jd-carousel-slide.is-entering {
  opacity:0 !important;
  z-index:3 !important;
  transition:opacity var(--jd-carousel-duration,650ms) ease !important;
}

.jd-carousel[data-transition-type="fade"].is-transitioning .jd-carousel-slide.is-entering {
  opacity:1 !important;
}

.jd-carousel[data-transition-type="fade"] .jd-carousel-slide.is-leaving {
  opacity:1 !important;
  z-index:2 !important;
  transition:opacity var(--jd-carousel-duration,650ms) ease !important;
}

.jd-carousel[data-transition-type="fade"].is-transitioning .jd-carousel-slide.is-leaving {
  opacity:0 !important;
}

/* Slide */
.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-entering,
.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-leaving {
  opacity:1 !important;
  transition:transform var(--jd-carousel-duration,650ms) cubic-bezier(.22,.61,.36,1) !important;
}

.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-entering {
  z-index:3 !important;
}

.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-leaving {
  z-index:2 !important;
}

.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-entering.from-right {
  transform:translate3d(100%,0,0) !important;
}

.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-entering.from-left {
  transform:translate3d(-100%,0,0) !important;
}

.jd-carousel[data-transition-type="slide"].is-transitioning .jd-carousel-slide.is-entering {
  transform:translate3d(0,0,0) !important;
}

.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-leaving.to-left {
  transform:translate3d(0,0,0) !important;
}

.jd-carousel[data-transition-type="slide"].is-transitioning .jd-carousel-slide.is-leaving.to-left {
  transform:translate3d(-100%,0,0) !important;
}

.jd-carousel[data-transition-type="slide"] .jd-carousel-slide.is-leaving.to-right {
  transform:translate3d(0,0,0) !important;
}

.jd-carousel[data-transition-type="slide"].is-transitioning .jd-carousel-slide.is-leaving.to-right {
  transform:translate3d(100%,0,0) !important;
}

/* Instant */
.jd-carousel[data-transition-type="instant"] .jd-carousel-slide {
  transition:none !important;
}

@media (prefers-reduced-motion:reduce) {
  .personal-hero .jd-carousel-slide {
    transition:none !important;
  }
}


/* =========================================================
   v2.1.9 — distinct carousel effects
   ========================================================= */

.personal-hero .jd-carousel-slide {
  opacity:0 !important;
  visibility:hidden !important;
  transform:translate3d(0,0,0) !important;
  transition:none !important;
  z-index:1 !important;
  will-change:opacity, transform;
}

.personal-hero .jd-carousel-slide.is-active,
.personal-hero .jd-carousel-slide.is-entering,
.personal-hero .jd-carousel-slide.is-leaving {
  visibility:visible !important;
}

.personal-hero .jd-carousel-slide.is-active {
  opacity:1 !important;
  z-index:2 !important;
}

/* Immediate */
.jd-carousel.mode-instant .jd-carousel-slide {
  transition:none !important;
}

/* Fade */
.jd-carousel.mode-fade .jd-carousel-slide.is-entering,
.jd-carousel.mode-fade .jd-carousel-slide.is-leaving {
  transition:opacity var(--jd-carousel-duration,700ms) ease-in-out !important;
}

.jd-carousel.mode-fade .jd-carousel-slide.is-entering {
  opacity:0 !important;
  z-index:3 !important;
}

.jd-carousel.mode-fade.is-transitioning .jd-carousel-slide.is-entering {
  opacity:1 !important;
}

.jd-carousel.mode-fade .jd-carousel-slide.is-leaving {
  opacity:1 !important;
  z-index:2 !important;
}

.jd-carousel.mode-fade.is-transitioning .jd-carousel-slide.is-leaving {
  opacity:0 !important;
}

/* Shared slide mechanics */
.jd-carousel.mode-gentle-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-gentle-slide .jd-carousel-slide.is-leaving,
.jd-carousel.mode-fast-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-fast-slide .jd-carousel-slide.is-leaving,
.jd-carousel.mode-slow-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-slow-slide .jd-carousel-slide.is-leaving {
  opacity:1 !important;
}

.jd-carousel.mode-gentle-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-fast-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-slow-slide .jd-carousel-slide.is-entering {
  z-index:3 !important;
}

.jd-carousel.mode-gentle-slide .jd-carousel-slide.is-leaving,
.jd-carousel.mode-fast-slide .jd-carousel-slide.is-leaving,
.jd-carousel.mode-slow-slide .jd-carousel-slide.is-leaving {
  z-index:2 !important;
}

.jd-carousel .jd-carousel-slide.is-entering.from-right {
  transform:translate3d(100%,0,0) !important;
}
.jd-carousel .jd-carousel-slide.is-entering.from-left {
  transform:translate3d(-100%,0,0) !important;
}

.jd-carousel.is-transitioning .jd-carousel-slide.is-entering {
  transform:translate3d(0,0,0) !important;
}

.jd-carousel .jd-carousel-slide.is-leaving.to-left {
  transform:translate3d(0,0,0) !important;
}
.jd-carousel.is-transitioning .jd-carousel-slide.is-leaving.to-left {
  transform:translate3d(-100%,0,0) !important;
}

.jd-carousel .jd-carousel-slide.is-leaving.to-right {
  transform:translate3d(0,0,0) !important;
}
.jd-carousel.is-transitioning .jd-carousel-slide.is-leaving.to-right {
  transform:translate3d(100%,0,0) !important;
}

/* Gentle slide: relaxed, smooth */
.jd-carousel.mode-gentle-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-gentle-slide .jd-carousel-slide.is-leaving {
  transition:
    transform var(--jd-carousel-duration,700ms)
    cubic-bezier(.22,.61,.36,1) !important;
}

/* Fast slide: snappy */
.jd-carousel.mode-fast-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-fast-slide .jd-carousel-slide.is-leaving {
  transition:
    transform var(--jd-carousel-duration,260ms)
    cubic-bezier(.2,.8,.2,1) !important;
}

/* Slow slide: deliberately long and floaty */
.jd-carousel.mode-slow-slide .jd-carousel-slide.is-entering,
.jd-carousel.mode-slow-slide .jd-carousel-slide.is-leaving {
  transition:
    transform var(--jd-carousel-duration,1500ms)
    cubic-bezier(.25,.1,.25,1) !important;
}

@media (prefers-reduced-motion:reduce) {
  .personal-hero .jd-carousel-slide {
    transition:none !important;
  }
}


/* v2.1.10 — personal trains/tech/tinkering bottom banner */
.personal-bottom-banner,
.bottom-banner {
  background-position:center bottom !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}


/* =========================================================
   v2.1.11 — compact dark-blue trains/tech bottom banner
   ========================================================= */

.personal-bottom-banner,

.personal-bottom-banner picture,

.personal-bottom-banner .bottom-banner,

/* Keep the original editable Grav text, now readable over navy. */
.personal-bottom-banner .personal-banner-copy,

@media (max-width:760px) {
  .personal-bottom-banner,

  .personal-bottom-banner picture,

  .personal-bottom-banner .bottom-banner,

  .personal-bottom-banner .personal-banner-copy,
}


/* =========================================================
   v2.1.12 — banner cropped to just above the artwork
   ========================================================= */
.personal-bottom-banner,

.personal-bottom-banner picture,

.personal-bottom-banner .bottom-banner,

/* Live text remains controlled by Theme Settings → Bottom banner wording. */
.personal-bottom-banner .personal-banner-copy,

@media (max-width:760px) {
  .personal-bottom-banner,

  .personal-bottom-banner picture,
  .shared-personal-bottom-banner picture,
  .personal-bottom-banner .bottom-banner,
}


/* v2.1.13 — seamless, genuinely slim bottom banner */
.personal-bottom-banner,

.personal-bottom-banner picture,

.personal-bottom-banner .bottom-banner,

/* Keep Theme Settings → Bottom banner wording as live text. */
.personal-bottom-banner .personal-banner-copy,

@media (max-width:760px) {
  .personal-bottom-banner,

  .personal-bottom-banner picture,
  .shared-personal-bottom-banner picture,
  .personal-bottom-banner .bottom-banner,

  .personal-bottom-banner .personal-banner-copy,
}

/* v2.1.30: the author stylesheet's display:grid rule would otherwise
   override the browser's native [hidden] styling, allowing initials to
   show through transparent areas of a successfully loaded project logo. */
.project-logo-fallback[hidden] {
  display: none !important;
}