/* clinchr blog — index + article styles. Loaded after teaser.css and
   page.css; every colour reads a teaser.css token. */

/* --- dot-marks --------------------------------------------------------- */
/* Six <i> dots per mark. CSS sets a default arrangement so marks render
   without JS; assets/blog/main.js re-seeds positions per post slug and
   sets --dx/--dy for the hover scatter. */

/* --mark-size is read by the hover transform, so offsets scale with the
   mark and need no JS measurement (a mark inside a hidden figure would
   measure 0px). */
.mark {
  --mark-size: 30px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--mark-size); height: var(--mark-size);
}
.mark--md { --mark-size: 40px; }
.mark--lg { --mark-size: 70px; }

.mark i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--cluster);
  transform: translate(0, 0);
  transition: transform 0.45s ease;
}
.mark--lg i { width: 4px; height: 4px; }

.mark i:nth-child(1) { left: 20%; top: 14%; opacity: 0.9; }
.mark i:nth-child(2) { left: 48%; top: 34%; opacity: 0.6; }
.mark i:nth-child(3) { left: 14%; top: 60%; opacity: 0.5; }
.mark i:nth-child(4) { left: 54%; top: 68%; opacity: 0.8; }
.mark i:nth-child(5) { left: 76%; top: 26%; opacity: 0.4; }
.mark i:nth-child(6) { left: 36%; top: 84%; opacity: 0.3; }

/* --dx/--dy are unitless fractions of the mark box, set per dot by main.js */
.mark:hover i, .mark:focus-within i, a:hover .mark i, a:focus-visible .mark i {
  transform: translate(calc(var(--dx, 0) * var(--mark-size)), calc(var(--dy, 0) * var(--mark-size)));
}

@media (prefers-reduced-motion: reduce) {
  .mark i { transition: none; }
  .mark:hover i, .mark:focus-within i, a:hover .mark i, a:focus-visible .mark i { transform: none; }
}

/* --- wide column (index + posts) --------------------------------------- */

.article--wide { max-width: 62rem; padding-top: 2rem; }

.eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--ink-soft);
}

/* --- post icon: a raincloud over a shop (index featured entry) ---------- */

/* the icon is as tall as the title + text beside it; its viewBox is cropped
   to the drawing so the artwork fills that height */
.featured > a { align-self: stretch; display: flex; }
.post-icon { display: block; height: 100%; width: auto; aspect-ratio: 68 / 96; min-width: 60px; }
.post-icon .shop { fill: color-mix(in srgb, var(--cluster) 14%, var(--ground)); stroke: color-mix(in srgb, var(--cluster) 55%, var(--ink-soft)); stroke-width: 1.5; }
.post-icon .win { fill: color-mix(in srgb, var(--cluster) 36%, var(--ground)); stroke: color-mix(in srgb, var(--cluster) 55%, var(--ink-soft)); stroke-width: 1.2; }
.post-icon .door { fill: color-mix(in srgb, var(--ink-soft) 45%, var(--ground)); stroke: var(--ink-soft); stroke-width: 1.2; }
.post-icon .awn-a { fill: var(--accent); }
.post-icon .awn-b { fill: var(--ground); }
.post-icon .awning { fill: url(#awn-sm); stroke: color-mix(in srgb, var(--accent) 70%, var(--ink-soft)); stroke-width: 1.2; }
.post-icon .cloud { fill: color-mix(in srgb, var(--accent) 72%, var(--ground)); stroke: color-mix(in srgb, var(--accent) 85%, var(--ink-soft)); stroke-width: 3; }
.post-icon .rain line { stroke: var(--cluster); stroke-width: 1.5; stroke-linecap: round; opacity: 0.75; }
.post-icon .rain { animation: icon-rain 1.5s linear infinite; }
@keyframes icon-rain { from { transform: translateY(-20px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .post-icon .rain { animation: none; } }

/* --- index ------------------------------------------------------------- */

.blog-intro { margin-bottom: 3rem; }
.blog-intro h1 { margin-bottom: 0.6rem; }
.blog-intro .article-dek { margin-bottom: 0; }

.featured {
  display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; align-items: center;
  padding-bottom: 2.2rem; margin-bottom: 2.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 30%, transparent);
}
.featured .eyebrow { margin-bottom: 0.5rem; }
.featured h2 {
  /* override the ruled section-header treatment inherited from .article h2 */
  font-weight: 500; font-size: 1.5rem; line-height: 1.4;
  letter-spacing: 0.01em; text-transform: none;
  margin: 0 0 0.8rem; padding-top: 0; border-top: 0;
}
.featured h2 a { color: inherit; text-decoration: none; }
.featured h2 a:hover { color: var(--cluster); }
.featured .dek { font-size: 0.92rem; line-height: 1.65; margin-bottom: 1.2rem; }
.featured .demo-btn { position: static; margin: 0; display: inline-flex; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.tile {
  padding: 0 1.6rem;
  border-left: 1px solid color-mix(in srgb, var(--ink-soft) 22%, transparent);
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 9rem;
}
.tile:first-child { border-left: 0; padding-left: 0; }
.tile .mark { margin-bottom: 0.2rem; }
.tile h2 {
  font-weight: 500; font-size: 0.95rem; line-height: 1.4;
  letter-spacing: 0.01em; text-transform: none;
  margin: 0; padding-top: 0; border-top: 0;
}
.tile h2 a { color: inherit; text-decoration: none; }
.tile h2 a:hover { color: var(--cluster); }
.tile p { font-size: 0.8rem; line-height: 1.55; margin: 0; }
.tile--soon { opacity: 0.5; justify-content: center; }

@media (max-width: 720px) {
  .featured { grid-template-columns: 1fr; }
  .post-icon { height: 160px; }
  .post-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .tile { border-left: 0; padding: 1.4rem 0 0; border-top: 1px solid color-mix(in srgb, var(--ink-soft) 22%, transparent); min-height: 0; }
  .tile:first-child { border-top: 0; padding-top: 0; }
}

/* --- post -------------------------------------------------------------- */

.article--post h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin-bottom: 1.1rem;
}
.article--post .eyebrow { margin-bottom: 0.9rem; }
.article--post p { font-size: 0.95rem; line-height: 1.8; margin-bottom: 1.1rem; }
.article--post h2 {
  font-size: 1.35rem; font-weight: 600; letter-spacing: 0.05em;
  margin: 3rem 0 1.1rem; padding-top: 1.8rem;
}
/* real 600 weight — posts load it — rather than a synthesised bold */
.article--post strong { font-weight: 600; color: var(--ink); }

.byline { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 2.8rem; }
.byline .who { font-size: 0.78rem; line-height: 1.35; }
.byline .who b { font-weight: 500; }
.byline .who span { display: block; font-size: 0.7rem; color: var(--ink-soft); }

/* Opening hook set large — the attribution is written into the sentence,
   so this is a paragraph, not a blockquote. */
.article--post p.pull {
  font-weight: 300;
  font-size: clamp(1.25rem, 2.8vw, 1.55rem);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 2.6rem;
}

/* Breakout wrapper for the post's figures. Breaks out to the column's
   padding edge, not the viewport. */
figure.post-figure {
  margin: 2.6rem -1.5rem;
  padding: 2.2rem 1.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);
  text-align: center;
}
figure.post-figure figcaption { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 1.2rem; }

.subscribe {
  margin-top: 3.4rem; padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--ink-soft) 30%, transparent);
}
.subscribe h3 { font-weight: 500; font-size: 0.95rem; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.subscribe p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.subscribe-form { display: flex; gap: 0.6rem; max-width: 24rem; }
.subscribe-form[hidden] { display: none; }
.subscribe-form input[type="email"] {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink-soft) 45%, transparent);
  background: var(--ground);
  font-family: inherit; font-size: 0.85rem; color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}
.subscribe-form input[type="email"]:focus { border-color: var(--cluster); }
.subscribe-form input::placeholder { color: var(--ink-soft); }
.subscribe .form-status { margin-top: 0.7rem; }
.subscribe-done { color: var(--ink); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.post-footer-row {
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--ink-soft) 30%, transparent);
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: lowercase;
}
.post-footer-row a { color: var(--ink-soft); text-decoration: none; }
.post-footer-row a:hover { color: var(--ink); }