/* === FRONT (stub marker) === */
.grkn-httlnp-timeline{
  --line-left:100px; --line-w:4px; --pad-left:152px;
  --gap-bg:var(--httlnp-bg,#ffffff);
  --color-line:var(--httlnp-line,#163353);
  --color-title:var(--httlnp-title,#111827);
  --stub-color:#ef4444; --stub-l:18px; --stub-off:2px; --stub-w:4px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative;max-width:1200px;margin:0 auto;padding:8px 16px 56px;
}
.grkn-httlnp-line{position:absolute;left:var(--line-left);top:0;bottom:0;width:var(--line-w);background:var(--color-line);z-index:0}
.grkn-httlnp-main-title{font-size:40px;font-weight:900;color:var(--color-title);margin:0 0 14px var(--pad-left);line-height:1.15}
.grkn-httlnp-day{position:relative;margin:28px 0 36px;padding-left:var(--pad-left)}
.grkn-httlnp-day-heading{font-size:30px;font-weight:800;color:var(--color-title);margin:0 0 14px 0; position:relative; z-index:1}
.grkn-httlnp-day-heading.rich{font:inherit;color:var(--color-title)}
.grkn-httlnp-day-heading::before{
  content:""; position:absolute; z-index:1;
  left: calc(-1 * var(--pad-left)); top:0; height:100%;
  width: var(--pad-left); background: var(--gap-bg);
}
.grkn-httlnp-day-heading::after{
  content: ""; position: absolute; z-index:2;
  left: calc(-1 * var(--pad-left) + var(--line-left) + var(--line-w));
  top: calc(2px + var(--stub-off));
  width: var(--stub-l); height: var(--stub-w);
  background: var(--stub-color);
  border-radius: 999px;
}
.grkn-httlnp-row{display:grid;grid-template-columns:minmax(260px,520px) 1fr;gap:24px;align-items:start}
.grkn-httlnp-gallery-front{display:grid;grid-template-columns:1fr;gap:12px}
.grkn-httlnp-img{width:100%;height:auto;display:block;border-radius:12px}
.grkn-httlnp-rich{font-size:16.5px;line-height:1.65}
.grkn-httlnp-rich ul{padding-left:1.1rem}
.grkn-httlnp-rich li{margin:.4rem 0}

@media (max-width: 799px){
  .grkn-httlnp-timeline{
    padding:8px 12px 40px !important;
  }
  .grkn-httlnp-line{
    left:0 !important;
    width:3px !important;
  }
  .grkn-httlnp-main-title{
    font-size:22px !important;
    margin-left:20px !important;
    margin-bottom:10px !important;
    line-height:1.2 !important;
    word-break:break-word;
  }
  .grkn-httlnp-day{
    padding-left:20px !important;
    margin:18px 0 24px !important;
  }
  .grkn-httlnp-day-heading{
    font-size:17px !important;
    line-height:1.3;
    word-break:break-word;
    padding-left:16px !important;
  }
  .grkn-httlnp-day-heading::before{
    left:-20px !important;
    width:20px !important;
  }
  /* Square marker: positioned just left of heading text, vertically centered */
  .grkn-httlnp-day-heading::after{
    left:-14px !important;
    top:50% !important;
    transform:translateY(-50%);
    width:10px !important;
    height:10px !important;
    border-radius:2px !important;
  }
  .grkn-httlnp-row{grid-template-columns:1fr !important;gap:10px !important}
  .grkn-httlnp-rich{font-size:15px;line-height:1.55}
  .grkn-httlnp-img{border-radius:8px}
}
@media (max-width: 479px){
  .grkn-httlnp-timeline{padding:6px 10px 32px !important}
  .grkn-httlnp-main-title{font-size:19px !important;margin-left:16px !important}
  .grkn-httlnp-day{padding-left:16px !important}
  .grkn-httlnp-day-heading::before{left:-16px !important;width:16px !important}
  .grkn-httlnp-day-heading::after{left:-10px !important}
  .grkn-httlnp-day-heading{font-size:15px !important}
}