/* Insights: the blog (insights/ and its articles, 2026-10-13).
 *
 * Each page is a Framer page used as a shell (the legal page: the lightest): its footer and the
 * site's nav bar stay; Framer's own content is not shown. Ours is static, before #main, built by
 * ~/Downloads/halfsecond-loop/blog/build_blog.py. The layouts are the template's Insights pages
 * (the index: a dark hero with its big title, one article in a large picture, then the others in
 * three columns, a round picture over a rule, a big number and the title; an article: back link on
 * the left third, the title on the column, a wide picture, the author on the left and the text on
 * the column), set in our faces and motions: Space Grotesk titles rising out of a mask, Satoshi
 * texts fading up, the expo curve. The template's dates are our numbers and reading times.
 * Without script, or with reduced motion: everything is there.
 */

@keyframes hs-rise { from { transform: translateY(110%); } }
@keyframes hs-fade-up { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
@keyframes hs-fade { from { opacity: 0; } }

/* ------------------------------------------------------------------------- the shell
   Framer's page under ours (the legal page) is not shown: its column and the block after it. By
   their place: the footer has blocks named "Main" too. The footer stays; its first block (the
   template's founder quote) does not. The footer slides up from under the page as the end comes
   (Framer's own effect): the page is above it. The nav bar is the site's (halfsecond.css). */
html.hs-blog-page #main > div > div > [data-framer-name="Main"],
html.hs-blog-page #main > div > div > [data-framer-name="Main"] + [class*="-container"] { display: none !important; }
html.hs-blog-page #main footer [data-framer-name="Message and description"] { visibility: hidden !important; }

/* ------------------------------------------------------------------------- the page */
.hs-blog {
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ink: #0a0a0a;
  --text: rgb(66, 66, 66);                              /* long reading: darker than the template's */
  --grey: rgb(89, 89, 89);
  --soft: rgb(145, 144, 142);                           /* the template's secondary text */
  --rule: rgb(176, 176, 176);                           /* the template's rules */
  --hair: rgba(10, 10, 10, .14);
  --col: calc((100% - 24px) / 3 + 24px);                /* Framer's grid: a third, then the column */
  --pad: 36px;
  position: relative;
  z-index: 2;                                           /* above the footer that slides from under it */
  display: block;
  background: #fff;
  color: var(--ink);
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.hs-blog *,
.hs-blog *::before,
.hs-blog *::after { box-sizing: border-box; }
.hs-blog img { display: block; max-width: 100%; }
.hs-blog a { color: inherit; }

.hs-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hs-mask > span { display: block; }

/* the template's dates, as ours: a big number, its small line raised beside it */
.hs-num {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.05em;
  white-space: nowrap;
}
.hs-num small {
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}

.hs-blog .hs-label {
  margin: 0 0 18px;
  font-family: var(--hs-text, 'Satoshi', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
}

/* the template's "See all Insights ••" */
.hs-back {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
}
.hs-dots { display: inline-flex; gap: 3px; }
.hs-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.hs-dots i:first-child { opacity: .45; }
@media (hover: hover) {
  .hs-back:hover .hs-dots i:first-child { transform: translateX(10px); opacity: 1; }
  .hs-back:hover .hs-dots i:last-child { transform: translateX(-10px); opacity: .45; }
}

/* a link set large, its underline running in on hover, its arrow moving on */
.hs-link { display: inline-flex; align-items: baseline; gap: .3em; text-decoration: none; }
.hs-link > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); }
.hs-link--big {
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.hs-arrow {
  flex: none;
  width: .7em;
  height: .7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(.06em);
  transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .hs-link:hover > span { background-size: 100% 2px; }
  .hs-link:hover .hs-arrow,
  .hs-next:hover .hs-arrow,
  .hs-more__item:hover .hs-arrow { transform: translate(.18em, .06em); }
}
.hs-blog a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; border-radius: 3px; }

/* ===================================================================== the index (insights/) */
.hs-ix-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 880px);
  padding: 160px var(--pad) clamp(56px, 6vw, 96px);
  overflow: hidden;
  background: #000;
  color: #fff;
}
.hs-ix-hero__bg {
  position: absolute;
  inset: 0;
  background: url(/assets/ink/bg-a.webp) 50% 60% / cover no-repeat;
  opacity: .5;
}
.hs-ix-hero__bg::after {                               /* the site's grain, and the ink at the bottom */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85));
}
.hs-ix-hero__inner { position: relative; width: 100%; container-type: inline-size; padding-left: var(--col); }
.hs-ix-hero__kicker {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.hs-ix-hero__title {
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: min(208px, 23cqi);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.05em;
}
.hs-ix-hero__lead {
  margin: clamp(22px, 2.2vw, 34px) 0 0;
  max-width: 36ch;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .72);
}

.hs-ix-list { padding: 40px var(--pad) 0; }

/* the latest one, large (the template: 1368 x 428 at 1440, number and title at the bottom); the
   card is what comes into view, its inside is what uncovers (a clipped element is never "in view") */
.hs-blog .hs-feature {
  position: relative;
  display: block;
  aspect-ratio: 1368 / 470;
  color: #fff;
  text-decoration: none;
}
.hs-feature__in {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
  isolation: isolate;
}
.hs-feature__media { position: absolute; inset: 0; z-index: -1; }
.hs-feature__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.4s var(--ease); }
.hs-feature__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7)); }
.hs-feature__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  padding: 0 clamp(24px, 3vw, 48px) clamp(24px, 3vw, 44px) var(--col);
}
.hs-feature__text { display: flex; flex-direction: column; gap: 10px; }
.hs-feature__title {
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hs-feature__dek { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .72); }
@media (hover: hover) {
  .hs-feature:hover .hs-feature__media img { transform: scale(1.03); }
}

/* the others, three across: a round picture over the rule, then the number and the title */
.hs-ix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(72px, 8vw, 120px) 24px;
  margin: clamp(72px, 7vw, 110px) 0 0;
  padding: 0;
  list-style: none;
}
.hs-card { display: block; text-decoration: none; }
.hs-card__img {
  display: block;
  width: clamp(104px, 9vw, 128px);
  aspect-ratio: 1;
  margin-left: calc(50% + 12px);
  overflow: hidden;
  border-radius: 50%;
  background: #eee;
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* Safari: a round clip that holds while it scales */
}
.hs-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
/* the ink stills are black on white: on a light grey disc (the white taken down by multiply), closer */
.hs-card__img--ink { background: #ededeb; }
.hs-card__img--ink img { mix-blend-mode: multiply; transform: scale(1.3); }
.hs-card__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 30px;
  border-top: 2px solid var(--rule);
  transition: border-color .6s var(--ease);
}
.hs-card__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
@media (hover: hover) {
  .hs-card:hover .hs-card__img img { transform: scale(1.08); }
  .hs-card:hover .hs-card__img--ink img { transform: scale(1.4); }
  .hs-card:hover .hs-card__row { border-color: var(--ink); }
}

/* the copy's last word (§11), then the footer */
.hs-ix-cta { padding: clamp(120px, 13vw, 200px) var(--pad) clamp(140px, 14vw, 220px); }
.hs-ix-cta > * { margin-left: var(--col); }
.hs-ix-cta__line {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}
.hs-ix-cta__line .hs-mask > span { text-wrap: balance; }
.hs-ix-cta__links { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-top: clamp(40px, 4vw, 64px); }
.hs-ix-cta__note { max-width: 44ch; margin-top: 28px; margin-bottom: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--grey); }

/* ===================================================================== an article */
.hs-art__head {
  display: grid;
  grid-template-columns: calc((100% - 24px) / 3) minmax(0, 1fr);
  gap: 24px;
  padding: clamp(150px, 15vw, 220px) var(--pad) 0;
}
.hs-art__side { padding-top: 14px; }
.hs-art__main { min-width: 0; }
.hs-art__title {
  max-width: 15.5ch;
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.045em;
}
.hs-art__title .hs-mask > span { text-wrap: balance; }
.hs-art__dek {
  max-width: 48ch;
  margin: clamp(28px, 2.6vw, 40px) 0 0;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--grey);
}
.hs-art__meta { margin: clamp(28px, 2.6vw, 40px) 0 0; }

.hs-art__cover {
  margin: clamp(56px, 6vw, 96px) var(--pad) 0;
  aspect-ratio: 1368 / 590;
}
.hs-art__cover-in {                                    /* what uncovers (the figure is what comes into view) */
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f2f2;
  isolation: isolate;
}
.hs-art__cover img { width: 100%; height: 100%; object-fit: cover; }
.hs-art__cover--ink .hs-art__cover-in { background: #f3f3f1; }
.hs-art__cover--ink img { mix-blend-mode: multiply; }

.hs-art__body {
  display: grid;
  grid-template-columns: calc((100% - 24px) / 3) minmax(0, 1fr);
  gap: 24px;
  padding: clamp(72px, 8vw, 120px) var(--pad) 0;
}
.hs-art__body--more { padding-top: 0; }
.hs-art__body--more .hs-art__text { grid-column: 2; }
.hs-art__by {
  position: sticky;
  top: 132px;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hs-symbol { width: 44px; height: 44px; flex: none; fill: var(--ink); }
.hs-art__by b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.hs-art__by small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--soft); }

.hs-art__text { max-width: 700px; min-width: 0; }
.hs-art__text p,
.hs-art__text li {
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -.012em;
  color: var(--text);
}
.hs-art__text p { margin: 0 0 1.15em; }
.hs-art__text b { font-weight: 700; color: var(--ink); }
.hs-art__text .hs-art__lede {
  margin-bottom: 1.2em;
  font-size: clamp(20px, 1.75vw, 26px);
  line-height: 1.45;
  letter-spacing: -.025em;
  color: var(--ink);
}
.hs-art__text h2 {
  margin: 2.1em 0 .75em;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ink);
}
.hs-art__list { margin: 0 0 1.4em; padding: 0; list-style: none; }
.hs-art__list li { position: relative; margin: 0 0 .8em; padding-left: 34px; }
.hs-art__list li::before {                             /* the site's star, in place of a bullet */
  content: '';
  position: absolute;
  left: 2px;
  top: .5em;
  width: 13px;
  height: 13px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M7.937.491c.091-.655 1.035-.655 1.126 0l.581 4.198a3.04 3.04 0 0 0 2.667 2.667l4.198.581c.655.091.655 1.035 0 1.126l-4.198.581a3.04 3.04 0 0 0-2.667 2.667l-.581 4.198c-.091.655-1.035.655-1.126 0l-.581-4.198a3.04 3.04 0 0 0-2.667-2.667L.491 9.063c-.655-.091-.655-1.035 0-1.126l4.198-.581a3.04 3.04 0 0 0 2.667-2.667z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M7.937.491c.091-.655 1.035-.655 1.126 0l.581 4.198a3.04 3.04 0 0 0 2.667 2.667l4.198.581c.655.091.655 1.035 0 1.126l-4.198.581a3.04 3.04 0 0 0-2.667 2.667l-.581 4.198c-.091.655-1.035.655-1.126 0l-.581-4.198a3.04 3.04 0 0 0-2.667-2.667L.491 9.063c-.655-.091-.655-1.035 0-1.126l4.198-.581a3.04 3.04 0 0 0 2.667-2.667z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hs-art__quote {
  margin: 1.9em 0 1.7em;
  padding: 28px 0 0;
  border-top: 2px solid var(--ink);
}
.hs-art__quote p {
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(28px, 2.9vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
}

.hs-art__cta { margin: 0 0 clamp(56px, 6vw, 88px); }
.hs-art__cta .hs-art__cta-note { margin-bottom: 18px; }

.hs-more { margin: clamp(48px, 5vw, 72px) 0 0; }
.hs-more ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.hs-more__item {
  color: var(--ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
}
.hs-more .hs-num { font-size: 28px; }
.hs-more__title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.hs-more .hs-arrow { width: 20px; height: 20px; }

.hs-sources { margin: clamp(48px, 5vw, 72px) 0 0; padding-top: 24px; border-top: 1px solid var(--hair); }
.hs-sources ol { margin: 0; padding-left: 1.3em; }
.hs-art__text .hs-sources li { margin: 0 0 .7em; font-size: 14px; line-height: 1.55; letter-spacing: 0; color: var(--grey); }
.hs-sources a { text-decoration: underline; text-underline-offset: 2px; }

/* the "What wins the half second." section, inside the approach (its own styles: halfsecond.css) */
.hs-blog .hs-wins { padding: clamp(72px, 8vw, 120px) var(--pad); }
.hs-wins__fallback { margin: 0; padding: 0; list-style: none; grid-column: 1 / -1; }
.hs-wins__fallback li { padding: 22px 0; border-top: 1px solid var(--hair); font-size: 18px; line-height: 1.55; color: var(--text); }
.hs-wins__fallback b { display: block; margin-bottom: 6px; font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif); font-size: 28px; letter-spacing: -.035em; color: var(--ink); }

/* the next one, then back to all of them */
.hs-art__next {
  margin: clamp(96px, 10vw, 160px) var(--pad) 0;
  padding: 36px 0 clamp(150px, 15vw, 230px);
  border-top: 2px solid var(--rule);
}
.hs-blog .hs-art__next > * { margin-left: var(--col); }         /* the column, as the article's (a % of this box) */
.hs-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  max-width: 980px;
  margin-bottom: 44px;
  text-decoration: none;
}
.hs-next__title {
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(30px, 3.6vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hs-next .hs-arrow { width: clamp(26px, 3vw, 44px); height: clamp(26px, 3vw, 44px); margin-top: .1em; }

/* ===================================================================== the legal pages
   Privacy Policy and Terms of Service (legal/, built by ~/Downloads/halfsecond-loop/legal/build_legal.py):
   the article's layout, with a table of contents in the left column (it follows the page) where the
   author stands, a notice at the head of the text, and the studio's open items (entity, address,
   providers, periods) marked until they are filled in. */
.hs-legal__meta { font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--soft); }
.hs-toc {
  position: sticky;
  top: 132px;
  align-self: start;
  max-height: calc(100svh - 164px);
  overflow: auto;
}
.hs-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.hs-toc li { counter-increment: toc; }
.hs-toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--grey);
  transition: color .25s ease;
}
.hs-toc a::before { content: counter(toc); color: var(--soft); }
@media (hover: hover) { .hs-toc a:hover { color: var(--ink); } }
.hs-callout {
  margin: 0 0 clamp(40px, 4.5vw, 64px);
  padding: 20px 22px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #f3f3f1;
}
.hs-art__text .hs-callout p { margin: 0; font-size: 16px; line-height: 1.55; letter-spacing: -.01em; color: var(--ink); }
.hs-callout b { font-weight: 700; }
.hs-callout a { text-decoration: underline; text-underline-offset: 3px; }
.hs-sec { scroll-margin-top: 110px; }
.hs-art__text .hs-sec:first-of-type h2 { margin-top: 0; }
.hs-art__text .hs-sec a { text-decoration: underline; text-underline-offset: 3px; }
.hs-todo {
  padding: 0 .22em;
  border-radius: 3px;
  background: rgba(10, 10, 10, .07);
  box-shadow: inset 0 -1px 0 rgba(10, 10, 10, .3);
  color: var(--ink);
}
.hs-next--plain { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 959.98px) { .hs-toc { display: none; } }

/* ===================================================================== motion (is-live)
   The titles rise out of their masks as the page opens; the rest fades up as it comes on screen
   (data-reveal gets is-in, halfsecond-blog.js); the pictures uncover from the bottom while they
   settle from a little larger, as the Studio's portraits. */
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-hero__title .hs-mask > span,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__title .hs-mask > span { animation: hs-rise 1.2s var(--ease) .2s both; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-hero__kicker { animation: hs-fade-up 1s var(--ease) .1s both; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-hero__lead,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__dek { animation: hs-fade-up 1s var(--ease) .5s both; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__meta,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__side { animation: hs-fade-up 1s var(--ease) .65s both; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-hero__bg { animation: hs-fade 2.4s ease .1s both; }

html.hs-blog-page:not(.is-reduced) .hs-blog.is-live [data-reveal]:not(.is-in) { opacity: 0; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live [data-reveal].is-in { animation: hs-fade-up 1s var(--ease) both; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-cta__line.is-in { animation: none; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-cta__line:not(.is-in) { opacity: 1; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-cta__line:not(.is-in) .hs-mask > span { transform: translateY(110%); }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-cta__line.is-in .hs-mask > span { animation: hs-rise 1.1s var(--ease) .1s both; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-cta__line.is-in .hs-mask + .hs-mask > span { animation-delay: .22s; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-grid li:nth-child(3n + 2) .hs-card.is-in { animation-delay: .1s; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-ix-grid li:nth-child(3n + 3) .hs-card.is-in { animation-delay: .2s; }

html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__cover-in,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-feature__in { transition: clip-path 1.4s var(--ease) .15s; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__cover img,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-feature__media img { transition: transform 1.8s var(--ease) .15s; }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__cover:not(.is-in) .hs-art__cover-in,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-feature:not(.is-in) .hs-feature__in { clip-path: inset(100% 0 0 0 round 8px); }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__cover:not(.is-in) img,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-feature:not(.is-in) .hs-feature__media img { transform: scale(1.12); }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-art__cover.is-in .hs-art__cover-in,
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-feature.is-in .hs-feature__in { clip-path: inset(0 0 0 0 round 8px); }
html.hs-blog-page:not(.is-reduced) .hs-blog.is-live .hs-feature[data-reveal] { opacity: 1; animation: none; }

/* ===================================================================== tablet, phone */
@media (max-width: 1199.98px) {
  .hs-blog { --col: calc((100% - 24px) / 4 + 24px); }   /* tablet: a quarter, as the home's titles */
  .hs-ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-ix-grid li:nth-child(3n + 2) .hs-card.is-in,
  .hs-ix-grid li:nth-child(3n + 3) .hs-card.is-in { animation-delay: 0s !important; }
  .hs-art__head,
  .hs-art__body { grid-template-columns: calc((100% - 24px) / 4) minmax(0, 1fr); }
  .hs-art__by { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 809.98px) {
  .hs-blog { --col: 0px; --pad: 32px; }
  .hs-ix-hero { min-height: min(100svh, 760px); padding-top: 140px; }
  .hs-ix-hero__title { font-size: min(150px, 23.5cqi); }
  .hs-feature { aspect-ratio: 4 / 5; }
  .hs-feature__meta { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 22px 24px; }
  .hs-ix-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .hs-card__img { margin-left: calc(50% + 12px); }
  .hs-art__head,
  .hs-art__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hs-art__side { order: 2; padding-top: 0; margin-top: 36px; }
  .hs-art__side .hs-back { display: none; }            /* the next block has it */
  .hs-art__head { padding-top: 130px; }
  .hs-art__cover { aspect-ratio: 4 / 3; }
  .hs-art__by { position: static; margin-bottom: 36px; }
  .hs-art__body--more .hs-art__text { grid-column: 1; }
  .hs-next { grid-template-columns: minmax(0, 1fr) auto; }
  .hs-next .hs-num { grid-column: 1 / -1; }
  .hs-more__item { grid-template-columns: minmax(0, 1fr) auto; }
  .hs-more .hs-num { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------------- the Insights index: a bento
   One tile per article, a photograph as its background (black and white: the train, the smoke),
   a veil for the white text, the number and the title at the bottom. 4 columns: the first tile is
   2 x 2, the last three are wide. */
.hs-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(240px, 22vw, 340px);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-bento__item { display: block; min-width: 0; }
.hs-bento__item--big { grid-column: span 2; grid-row: span 2; }
.hs-bento__item--wide { grid-column: span 2; }
.hs-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #0a0a0a;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.hs-tile__bg { position: absolute; inset: 0; z-index: -1; }
.hs-tile__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.4s var(--ease); }
.hs-tile__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .08) 20%, rgba(0, 0, 0, .78));
}
.hs-bento__item--light .hs-tile__bg::after { background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .86)); }
.hs-tile__meta { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 24px; }
.hs-tile .hs-num { color: rgba(255, 255, 255, .8); }
.hs-tile__title {
  max-width: 22ch;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hs-bento__item--big .hs-tile__title { max-width: 18ch; font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif); font-size: clamp(30px, 3.2vw, 46px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.hs-tile__dek { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .72); }
@media (hover: hover) { .hs-tile:hover .hs-tile__bg img { transform: scale(1.05); } }
@media (max-width: 1023px) {
  .hs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .hs-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 260px; }
  .hs-bento__item--big, .hs-bento__item--wide { grid-column: auto; }
  .hs-bento__item--big { grid-row: span 2; }
}
.hs-blog .hs-tile, .hs-blog .hs-tile .hs-tile__title { color: #fff; }
.hs-blog .hs-tile .hs-tile__dek { color: rgba(255, 255, 255, .72); }

/* the end of an article: what Halfsecond does, and the way to it (before "Read next") */
.hs-endcta {
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 8px;
  background: #000;
  color: #fff;
}
.hs-art__text .hs-endcta p, .hs-endcta p { margin: 0; color: inherit; }
.hs-endcta__line { font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif); font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 600; line-height: 1.05; letter-spacing: -.04em; }
.hs-art__text .hs-endcta .hs-endcta__text, .hs-endcta__text { margin-top: 12px; max-width: 52ch; font-size: 16px !important; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.hs-endcta__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px !important; }
.hs-endcta__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #000 !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none !important;
}
.hs-endcta__wa::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--hs-wa-icon) center / contain no-repeat; mask: var(--hs-wa-icon) center / contain no-repeat; }
.hs-endcta__more { color: #fff !important; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4) !important; }

/* calls on the black box: white pills (the user's rule, 2026-10-15) */
.hs-endcta__more {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: #000 !important;
  text-decoration: none !important;
}

/* ===================================================================== the glass tiles (2026-10-18)
   The heroes of Prices, Insights and the 404: the tile grid of halfsecond-tiles.js (a port of Tron Tiles)
   in place of the photograph. The box paints itself (a gradient of ink); the ink at the bottom stays,
   it keeps the lead readable. A click on the hero sends a wave across the tiles. */
.hs-ix-hero__bg.hs-tiles { background-image: none; opacity: 1; overflow: hidden; }