/* ════════════════════════════════════════════════════════════════════
   CELL JOURNAL — THE SHOP JOURNAL teaser (P2 row 11)
   ALL selectors scoped under #cell-journal (no leak into siblings).

   A SHORT (~half-viewport) cream breather that sits at the seam between
   cell-5 (Follow the Builds · marble) and cell-6 (The Straight Deal · marble).
   Its ONE job: say BLOG / JOURNAL out loud and hand the reader a stamped link
   to page-blog.html ("Shop Journal"). Text-forward; alive at t0; no reveal gate.

   Why a distinct cream: both neighbours are data-bg="marble" (#E9E6E1). The
   --cream token happens to equal --breath, so painting our own field warmer +
   a hair lighter (paper/bone, not primer gray) plus a distinct steel hairline
   is what makes this read as its OWN breath between two marble stops, not a
   third marble slab. Signal-Red CTA stays AA-safe (#fff on #C2231B ≈ 5.9:1).
   Palette family from tokens.css; the cream field is a scoped local paper tone.
   ════════════════════════════════════════════════════════════════════ */

/* SHORT breather — tighter vertical rhythm than a full section so it reads as a
   half-viewport BREATH between the two marble neighbours, never a heavy stop. */
#cell-journal {
  /* P3 row 12 — a subtle GRAY breath (David: "a subtle breath of gray breaking
     up the whites" — the mirror of the white-breath-in-darks rhythm). A warm
     concrete gray, clearly grayer than the primer marble (#E9E6E1) on both sides
     so the run of light sections doesn't blur into one, but still a light field
     the dark journal card reads cleanly against. */
  background: #CFCBC3;
  color: var(--text-on-light);
  /* steel hairline seams top + bottom seat the gray panel between the two marble
     sections — reads as an intentional inset breath, distinct from both. */
  border-block: 1px solid #b3aea5;
  padding-block: clamp(2.4rem, 1.8rem + 3vw, 4rem);
  isolation: isolate;
  position: relative;
  overflow: clip;
}

/* faint tungsten worklight breath so the field is alive at rest (T2.33 site-wide
   aliveness). Opacity-only pulse via the shared idle hook; behind all content. */
#cell-journal .journal-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 84% 20%, rgba(216,142,66,0.10) 0%, rgba(216,142,66,0) 70%),
    radial-gradient(40% 52% at 12% 92%, rgba(194,35,27,0.05) 0%, rgba(194,35,27,0) 72%);
}

#cell-journal .journal {
  position: relative;
  z-index: 1;
  display: flex;
  /* R91 house-tour rhythm (David): card LEFT, copy RIGHT — the page now walks
     L-R-L-R (builds copy left -> journal copy right -> About Us left -> family
     right) instead of stacking three lefts. row-reverse keeps DOM order (copy
     first for a11y/tab flow); the 720px stack below restores copy-on-top. */
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  flex-wrap: wrap;
}

/* LEFT — the plain-spoken invitation. Says "journal / blog" out loud. */
#cell-journal .journal__copy {
  flex: 1 1 24rem;
  max-width: 48rem;
  min-width: min(100%, 20rem);
}
/* the CTA now lives inside the copy block (the card owns the right column) */
#cell-journal .journal__copy .journal__cta { margin-top: var(--space-m); }

#cell-journal .journal__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--space-s);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-500);
}
/* steel hairline lead-in — matches the eyebrow idiom across cells */
#cell-journal .journal__eyebrow-rule {
  width: 2.2rem;
  height: 1px;
  flex: none;
  background: var(--stone-500);
}

#cell-journal .journal__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  color: var(--stone-700);
  font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.3rem);
}

#cell-journal .journal__lede {
  margin-top: var(--space-s);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
  color: var(--text-on-light-muted);
  max-width: 46ch;
}

/* RIGHT — the stamped Signal-Red CTA plate. Mirrors #cell-6 .deal__cta exactly
   (font-mono, 0px machined edge, pressed-steel drop) for site cohesion. Whole
   plate is the link (T2.38 real click target). */
#cell-journal .journal__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 1rem 1.6rem;
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--terracotta-deep);
  transition: transform 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out),
              background 140ms var(--ease-out);
}
#cell-journal .journal__cta::after {
  content: '';
  width: 1.15em; height: 0.7em; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
          mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  transition: transform 140ms var(--ease-out);
}
/* plate-press — scale-not-shift, ≤150ms, hover-capable only (T2.27) */
@media (hover: hover) {
  #cell-journal .journal__cta:hover {
    transform: translateY(2px) scale(1.01);
    box-shadow: 0 1px 0 var(--terracotta-deep);
  }
  #cell-journal .journal__cta:hover::after { transform: translateX(3px); }
}
#cell-journal .journal__cta:focus-visible {
  outline: 2px solid var(--stone-700);
  outline-offset: 3px;
}

/* the tungsten idle pulse (shared keyframe, opacity-only). Gated on motion-ready
   so it's calm-at-rest and respects reduced-motion. */
.motion-ready #cell-journal .journal-glow {
  animation: tungsten-idle 8.6s ease-in-out infinite;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready #cell-journal .journal-glow { animation: none; opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   P3 row 12 — THE COMPACT CONCOURS JOURNAL CARD (right column). The approved
   jrnl-card template, duplicated here with the excerpt REMOVED and shrunk: a
   dark stamped card dropped onto the gray breath (image · red-ticked date chip ·
   category · title · byline + READ). Whole card is one click target.
   ════════════════════════════════════════════════════════════════════ */
#cell-journal .journal__card {
  position: relative;
  flex: 0 0 auto;
  /* P4 ITEM 4 — David: "normalize the gaps in the middle … stretch your right-hand
     text box outward a bit more." The card was too narrow (21rem), so space-between
     left a dead ~200–320px hole between the copy and the card. Widened to fill the
     right column so the pair reads as one balanced two-up (gutter ~55–80px across
     1280–1440). Mobile still overrides to full width below 720px. */
  width: clamp(18rem, 40vw, 34rem);
  display: flex;
  flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 32px -20px rgba(0,0,0,0.55);
  transition: transform 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out),
              border-color 160ms var(--ease-out);
}
/* whole-card click target (T2.38) */
#cell-journal .journal__card-stretch { position: absolute; inset: 0; z-index: 3; }
#cell-journal .journal__card-stretch:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
#cell-journal .journal__card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-deep);
}
#cell-journal .journal__card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
/* the dateline plate stamped onto the photo corner — a real inspection tag with
   the machined red tick (the tell), matching the blog's jrnl-card. */
#cell-journal .journal__card-date {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: color-mix(in srgb, var(--ink-deep) 88%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-top: 2px solid var(--accent);
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--breath);
}
#cell-journal .journal__card-date-day { font-size: 1.05rem; font-weight: 500; }
#cell-journal .journal__card-date-mo,
#cell-journal .journal__card-date-yr { font-size: 0.66rem; color: var(--slate-400); }
#cell-journal .journal__card-body {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem 1.15rem 1.1rem;
}
#cell-journal .journal__card-kicker {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
#cell-journal .journal__card-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 0.98;
  letter-spacing: 0.008em; color: var(--breath);
}
#cell-journal .journal__card-foot {
  margin-top: 0.35rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate-500);
}
#cell-journal .journal__card-read {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--slate-300);
}
#cell-journal .journal__card-read::after {
  content: ""; width: 1.15em; height: 0.58em; flex: none;
  background: var(--accent);
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
          mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  transition: transform 160ms var(--ease-out);
}
@media (hover: hover) {
  #cell-journal .journal__card:hover {
    transform: translateY(-3px);
    border-color: #4a4a4a;
    box-shadow: 0 18px 40px -20px rgba(0,0,0,0.62);
  }
  #cell-journal .journal__card:hover .journal__card-img { transform: scale(1.045); }
  #cell-journal .journal__card:hover .journal__card-read::after { transform: translateX(4px); }
}

/* ---- RESPONSIVE — stack the card under the copy; keep it a tidy breath ---- */
@media (max-width: 720px) {
  #cell-journal .journal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
  }
  #cell-journal .journal__copy .journal__cta { width: 100%; justify-content: center; }
  #cell-journal .journal__card { width: 100%; max-width: 24rem; }
}