/* =========================================================================
   blog.v1.css — /blogs/ and every post under it.

   Loads AFTER site.v3.css and reuses its tokens, so the header, footer,
   CTA and colours match the rest of the site exactly. Nothing here
   redefines a colour; it all reads --c-write, --ink, --paper and so on
   from site.v3.css.

   The "v1" is the cache-bust. Bump it if you make a big visual change.
   ========================================================================= */

/* =========================================================================
   1. THE TILE GRID  (/blogs/)
   ========================================================================= */

.tiles {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.tile { --signal: var(--c-write); }

.tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius, 6px);
  background: var(--surface);
  overflow: hidden;
  transition: transform 320ms var(--ease),
              border-color 320ms var(--ease),
              box-shadow 320ms var(--ease);
}
.tile__link:hover,
.tile__link:focus-visible {
  transform: translateY(-4px);
  border-color: var(--signal);
  box-shadow: 0 18px 34px -22px rgba(26, 18, 16, .55);
}

/* --- the rotating carousel ---------------------------------------------
   Pure CSS. The reel is N slides wide; one keyframe step per slide holds
   it still for ~2.4s then slides across. --slides is set inline by the
   generator, and the timing below covers 1 to 5 slides. */

.tile__media {
  position: relative;
  overflow: hidden;
  background: var(--surface-2, var(--surface));
}

.tile__reel {
  display: flex;
  width: calc(var(--slides) * 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile__slide { flex: 0 0 calc(100% / var(--slides)); }
.tile__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.tile__link:hover .tile__slide img { transform: scale(1.04); }

.tile__slide--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  font-family: var(--mono);
  font-size: var(--t--1, .8rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, var(--hatch) 10px 11px),
    var(--surface-2, var(--surface));
}

@media (prefers-reduced-motion: no-preference) {
  .tile__media[style*="--slides:2"] .tile__reel { animation: reel2 6s infinite; }
  .tile__media[style*="--slides:3"] .tile__reel { animation: reel3 9s infinite; }
  .tile__media[style*="--slides:4"] .tile__reel { animation: reel4 12s infinite; }
  .tile__media[style*="--slides:5"] .tile__reel { animation: reel5 15s infinite; }
  /* Pause while you are reading the tile. */
  .tile__link:hover .tile__reel,
  .tile__link:focus-visible .tile__reel { animation-play-state: paused; }
}

@keyframes reel2 {
  0%, 42%   { transform: translateX(0); }
  50%, 92%  { transform: translateX(-50%); }
  100%      { transform: translateX(0); }
}
@keyframes reel3 {
  0%, 28%   { transform: translateX(0); }
  33%, 61%  { transform: translateX(-33.3333%); }
  66%, 94%  { transform: translateX(-66.6666%); }
  100%      { transform: translateX(0); }
}
@keyframes reel4 {
  0%, 20%   { transform: translateX(0); }
  25%, 45%  { transform: translateX(-25%); }
  50%, 70%  { transform: translateX(-50%); }
  75%, 95%  { transform: translateX(-75%); }
  100%      { transform: translateX(0); }
}
@keyframes reel5 {
  0%, 16%   { transform: translateX(0); }
  20%, 36%  { transform: translateX(-20%); }
  40%, 56%  { transform: translateX(-40%); }
  60%, 76%  { transform: translateX(-60%); }
  80%, 96%  { transform: translateX(-80%); }
  100%      { transform: translateX(0); }
}

.tile__dots {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  display: flex;
  gap: .3rem;
}
.tile__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

.tile__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--s-3);
  flex: 1;
}
.tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tile__meta span {
  padding: .18rem .5rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--on-accent, #fff);
  font-weight: 600;
}
.tile__title {
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 720;
  font-size: 1.3rem;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}
.tile__blurb {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  flex: 1;
}
.tile__go {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
}
.tile__go em {
  font-style: normal;
  display: inline-block;
  transition: transform 260ms var(--ease);
}
.tile__link:hover .tile__go em { transform: translateX(.3rem); }

/* =========================================================================
   2. POST HEAD
   ========================================================================= */

.posthead {
  padding-block: var(--s-6, 4rem) var(--s-5, 3rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(110% 100% at 4% 0%, var(--signal-wash) 0%, transparent 62%),
    var(--paper);
}
.posthead .eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.posthead h1 {
  margin-top: var(--s-2);
  max-width: 20ch;
  font-family: var(--display);
  font-variation-settings: "wdth" 114, "wght" 760;
  font-size: var(--t-3);
  line-height: .94;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.posthead__lede {
  margin-top: var(--s-3);
  max-width: 54ch;
  font-size: var(--t-1);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* =========================================================================
   3. ALTERNATING TEXT / IMAGE SECTIONS
   ========================================================================= */

.split__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 860px) {
  .split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  /* Odd sections put the text on the left, even ones on the right. The
     figure is always second in the DOM, so only the order flips. */
  .split--b .split__text { order: 2; }
  .split--b .split__fig  { order: 1; }
}

.split__text h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 700;
  font-size: var(--t-2);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.split__text p {
  margin-top: var(--s-3);
  max-width: 48ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.split__fig { margin: 0; }
.split__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 600ms var(--ease);
}
.split__fig:hover img { transform: scale(1.02); }
.split__fig figcaption {
  margin-top: .6rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =========================================================================
   4. FULL-WIDTH SCROLLING STRIP
   Runs edge to edge, drifts left forever, grows on hover.
   ========================================================================= */

.strip {
  padding-block: var(--s-5, 3rem);
  border-block: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.strip__cap {
  max-width: var(--shell, 1180px);
  margin: 0 auto var(--s-3);
  padding-inline: var(--gutter);
  font-family: var(--mono);
  font-size: var(--t--1, .8rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.strip__rail { overflow: hidden; }

.strip__track {
  display: flex;
  width: max-content;
  gap: var(--s-2);
  padding-inline: var(--s-2);
}
@media (prefers-reduced-motion: no-preference) {
  .strip__track { animation: drift 38s linear infinite; }
  /* Hovering anywhere on the strip stops it, so you can actually look. */
  .strip:hover .strip__track { animation-play-state: paused; }
}
@keyframes drift { to { transform: translateX(-50%); } }

.strip__item {
  flex: 0 0 auto;
  width: clamp(13rem, 24vw, 21rem);
  margin: 0;
  transition: transform 420ms var(--ease), z-index 0s;
}
.strip__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--line);
  background: var(--surface-2, var(--surface));
  transition: box-shadow 420ms var(--ease), border-color 420ms var(--ease);
}
.strip__item figcaption {
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 300ms var(--ease);
}
/* Grow on hover. transform-origin keeps it from pushing neighbours off. */
.strip__item:hover {
  transform: scale(1.09);
  position: relative;
  z-index: 5;
}
.strip__item:hover img {
  border-color: var(--c-write);
  box-shadow: 0 20px 38px -20px rgba(26, 18, 16, .6);
}
.strip__item:hover figcaption { color: var(--c-write); }

/* =========================================================================
   5. THE MAP
   ========================================================================= */

.map__intro {
  max-width: 54ch;
  margin-bottom: var(--s-3);
  color: var(--ink-soft);
}

.map__frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 9;
}
.map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Google's map is bright white; in dark mode that is a torch to the
     face. Knock it back rather than leaving it raw. */
}
@media (prefers-color-scheme: dark) {
  .map__frame iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7) brightness(1.05); }
}

.map__frame--empty {
  display: grid;
  place-items: center;
  padding: var(--s-4);
  text-align: center;
  aspect-ratio: 16 / 7;
  border-style: dashed;
  border-color: var(--c-write);
  background: var(--signal-wash);
}
.map__frame--empty p {
  max-width: 42ch;
  font-family: var(--mono);
  font-size: var(--t--1, .8rem);
  line-height: 1.7;
  color: var(--c-write);
}
.map__frame--empty code {
  background: color-mix(in srgb, var(--c-write) 14%, transparent);
  padding: .05em .3em;
}

.map__list { margin-top: var(--s-3); }
.map__stops {
  display: grid;
  gap: .45rem;
  margin-top: var(--s-2);
  counter-reset: stop;
  max-width: 52ch;
}
.map__stops li {
  position: relative;
  padding-left: 2rem;
  font-size: .95rem;
  color: var(--ink-soft);
  counter-increment: stop;
}
.map__stops li::before {
  content: counter(stop, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  color: var(--c-write);
}

/* =========================================================================
   6. POST FOOT
   ========================================================================= */

.postnav__back {
  font-family: var(--mono);
  font-size: var(--t--1, .8rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-write);
  border-bottom: 1px solid currentColor;
  transition: opacity 200ms var(--ease);
}
.postnav__back:hover { opacity: .7; }

/* =========================================================================
   7. SMALL SCREENS
   ========================================================================= */

@media (max-width: 760px) {
  .strip__item { width: 14rem; }
  .posthead h1 { max-width: none; }
  .tile__title { font-size: 1.18rem; }
}