/* ==========================================================
   nickmcintosh.co — additions (load after site.css)
   1. Three-Clock band   2. Newsletter mark   3. Serif accents
   ========================================================== */

:root {
  --clock-ground: #171b1c;   /* matches the photo's backdrop so edges disappear */
  --clock-ink: #ecebe4;
  --clock-muted: #9ea3a0;
  --clock-verdigris: #7f9c8f; /* pulled from the sundial patina */
}

/* ---------- 1. Three-Clock band ---------- */
.clocks {
  background: var(--clock-ground);
  color: var(--clock-ink);
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.clocks .eyebrow { color: var(--clock-verdigris); }

.clocks-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.clocks-head h2 {
  color: var(--clock-ink);
  margin: 14px 0 0;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: .95;
  letter-spacing: -.06em;
  text-transform: uppercase;
  font-weight: 800;
}
.clocks-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--clock-ink);
  max-width: 34em;
  margin: 0;
}

.clocks-figure { margin: 0; position: relative; }
.clocks-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* feather the edges into the band so it reads as a scene, not a pasted photo */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* labels sit under each object: digital ≈18%, watch ≈51%, sundial ≈83% */
.clocks-key {
  position: relative;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(236, 235, 228, .14);
  min-height: 6.5rem;
}
.clocks-key li {
  position: absolute;
  top: 1.25rem;
  width: min(15rem, 28%);
  transform: translateX(-50%);
  text-align: center;
}
.clocks-key li:nth-child(1) { left: 18%; }
.clocks-key li:nth-child(2) { left: 51%; }
.clocks-key li:nth-child(3) { left: 83%; }
.clocks-key li::before {        /* tick connecting label to object */
  content: "";
  position: absolute;
  top: -1.25rem;
  left: 50%;
  width: 1px;
  height: .75rem;
  background: var(--clock-verdigris);
  transform: translateY(-50%);
}
.clocks-key strong {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--clock-ink);
  margin-bottom: .3rem;
}
.clocks-key span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--clock-muted);
}

.clocks-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: flex-end;
}
.clocks .text-link { color: var(--clock-ink); border-color: currentColor; }
.clocks .text-link:hover { color: #111; }
.clocks .text-link:focus-visible { outline: 3px solid var(--clock-verdigris); outline-offset: 5px; }

@media (max-width: 800px) {
  .clocks-head { grid-template-columns: 1fr; }
  .clocks-figure { margin-inline: calc(var(--gutter, 20px) * -1); }
  .clocks-figure img { -webkit-mask-image: none; mask-image: none; }
  .clocks-key { padding-inline: var(--gutter, 20px); }
  .clocks-key { min-height: 0; padding-top: 0; border-top: 0; }
  .clocks-key li {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
    padding: 1rem 0;
    border-top: 1px solid rgba(236, 235, 228, .14);
  }
  .clocks-key li::before { display: none; }
  .clocks-foot { justify-content: flex-start; }
}

/* ---------- 2. Newsletter mark (replaces the cyborg head) ---------- */
/* size comes from .channel-art in site.css (104px, scaling down on small screens) */
.newsletter-mark {
  background: var(--clock-ground);
  color: var(--clock-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 11px 11px 10px;
}
.newsletter-mark .nm-rule {
  height: 3px;
  width: 22px;
  background: var(--clock-verdigris);
}
.newsletter-mark .nm-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.newsletter-mark .nm-title em { font-style: normal; font-weight: 400; color: var(--clock-muted); }
@media (max-width: 600px) {
  .newsletter-mark { padding: 8px; }
  .newsletter-mark .nm-title { font-size: 12px; }
}
@media (max-width: 360px) {
  .newsletter-mark .nm-title { font-size: 10px; }
  .newsletter-mark .nm-rule { width: 16px; height: 2px; }
}


/* ---------- 4. Photos ---------- */
/* ACCA card: a shot where you're the subject (was the hero photo again) */
.case.acca .case-bg {
  background-image: url("acca-stage.jpg");
  background-position: 48% 32%;
}

/* newsletter card now carries a statement line like the podcast card */
.newsletter-card .channel-description { margin-bottom: 0; }

/* Proposition sits on the warm grey (freed up by removing the signal strip)
   so it doesn't run straight into the paper-coloured Work section */
.statement { background: #e7e7df; }