/* ============================================================
   Homepage — section titles in lowercase
   ------------------------------------------------------------
   Lowercases the numbered section titles ("Product & Feature
   Releases", "Building Systems that Scale", "Apple iOS & macOS
   Experiences", "AI Lab & Experiments", "Drafts On The Table",
   "Recollection Of Time with People").

   The Framer titles are the 40px (desktop) / 28px (mobile-variant)
   Space-Grotesk-700 headings; .pfr-title is the baked #product
   heading. Eyebrows (uppercase) and card titles are untouched.
   Linked ONLY from index.html — 40px text is a hero name on other
   pages, which must stay as-is.
   ============================================================ */

p.framer-text[style*="--framer-font-size:40px"],
p.framer-text[style*="--framer-font-size:28px"],
.pfr-title {
  text-transform: lowercase !important;
}

/* Writing cards ("Drafts On The Table") — bump the meta text to 14px:
   numbering (11px), date (11px), reading time (11px) and the card subtext
   (12px). Scoped to the writing-list container so only those small mono
   labels change; the 17px card titles stay as-is. */
.framer-3c5s0f p.framer-text[style*="--framer-font-size:11px"],
.framer-3c5s0f p.framer-text[style*="--framer-font-size:12px"] {
  --framer-font-size: 14px !important;
  font-size: 14px !important;
}

/* Article 02 ("the beauty of Hideo Kojima's Death Stranding") subtext —
   clamp the longer copy to a single line with an ellipsis */
.ds-truncate-1 {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Writing card hover states (scoped to the card class, not the
   Substack link) ----
   - card background → white
   - reading time text → accent
   - reading time's external arrow icon → accent (swap the bg-image SVG
     to an accent-stroked copy of the original two-path arrow) */
a.framer-4mtpym { transition: background-color .25s ease; }
a.framer-4mtpym [data-framer-name="8 min"] .framer-text { transition: color .25s ease; }
a.framer-4mtpym:hover {
  background-color: #fff !important;
}
a.framer-4mtpym:hover [data-framer-name="8 min"] .framer-text {
  color: rgb(232, 80, 58) !important;
}
a.framer-4mtpym:hover .framer-zpwmfz {
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22><path d=%22M 3.5 3.5 L 8.5 3.5 L 8.5 8.5%22 fill=%22transparent%22 stroke=%22rgb(232,80,58)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path><path d=%22M 3.5 8.5 L 8.5 3.5%22 fill=%22transparent%22 stroke=%22rgb(232,80,58)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path></svg>") !important;
}

/* ---- "Read all on Substack" link (Figma node 2001:996) ----
   The Framer component already ships its own arrow icon (.framer-1vzltmd,
   abs-positioned at the far right). Lay the text + that ONE arrow out as a
   single flex row (overriding their absolute positions) so they align and
   scale together — no duplicate ::after arrow. 13px, uppercase, BLACK text
   and arrow; both → accent on hover (the <a> already links to Substack). */
.framer-9804h1-container a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.framer-9804h1-container [data-framer-name="Read all on Substack"] {
  position: static !important;
  transform: none !important;
  width: auto !important;
}
.framer-9804h1-container [data-framer-name="Read all on Substack"] .framer-text {
  --framer-font-size: 13px !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: rgb(26, 26, 26) !important;
  transition: color .25s ease, letter-spacing .28s ease;
}
.framer-9804h1-container .framer-1vzltmd {
  position: static !important;
  flex: 0 0 auto !important;
  width: 13px !important;
  height: 13px !important;
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22><path d=%22M 3.5 3.5 L 8.5 3.5 L 8.5 8.5%22 fill=%22transparent%22 stroke=%22rgb(26,26,26)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path><path d=%22M 3.5 8.5 L 8.5 3.5%22 fill=%22transparent%22 stroke=%22rgb(26,26,26)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path></svg>") !important;
}
.framer-9804h1-container a:hover [data-framer-name="Read all on Substack"] .framer-text {
  color: rgb(232, 80, 58) !important;
  letter-spacing: 2px !important;
}
.framer-9804h1-container a:hover .framer-1vzltmd {
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22><path d=%22M 3.5 3.5 L 8.5 3.5 L 8.5 8.5%22 fill=%22transparent%22 stroke=%22rgb(232,80,58)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path><path d=%22M 3.5 8.5 L 8.5 3.5%22 fill=%22transparent%22 stroke=%22rgb(232,80,58)%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22></path></svg>") !important;
}

/* ============================================================
   "Building Systems that Scale" (#design-systems) — square cards
   ------------------------------------------------------------
   1. The first card (GravityHalf / gra.UI.ty) now uses a SQUARE
      source image. The Framer markup stacks two landscape image
      layers (a foreground body + a duplicate "preview" layer); the
      square source made them read as two separate images. So at ALL
      breakpoints we hide the duplicate layer and let the single
      foreground image cover the whole card.
   2. On the ≥1440px desktop variant, both design-system cards are
      resized from the baked 588×311 landscape to 500×500 squares and
      their absolutely-positioned internals are re-tuned to fit. The
      <1440 responsive (Variant 2) layout keeps its own sizing.
   ============================================================ */

/* --- All breakpoints: normalise the GravityHalf image to a single
   card-filling layer (fixes the doubled square image) --- */
#design-systems .framer-4tnlsj {        /* duplicate "preview" image layer */
  display: none !important;
}
#design-systems .framer-1c6mb {         /* body wrapper → fill the card */
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#design-systems .framer-159o5qp {       /* foreground image frame → cover */
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  transform: none !important;
}
#design-systems .framer-159o5qp img {
  object-fit: cover !important;
  object-position: top !important;   /* show the top of the square; crop the bottom */
}
#design-systems .framer-19kglzx {       /* gradient overlay → fill */
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Drop the faint 1px row border (Framer's data-border ::after on the row),
   which otherwise shows as a hairline across the white gap between the cards */
#design-systems .framer-v2zooz::after {
  display: none !important;
}

/* --- ≥1440px desktop: 588×480 cards (588 + 24 gap + 588 = 1200 row) --- */
@media (min-width: 1440px) {
  /* Row: release the baked 313px height + overflow:hidden so the taller
     cards aren't clipped (width / 24px gap already fill the 1200 row) */
  #design-systems .framer-v2zooz {
    height: auto !important;
    overflow: visible !important;
    gap: 0 24px !important;
  }

  /* Card containers → 588×480 (anchors already fill via inline width/height:100%) */
  #design-systems .framer-10gqgn1-container,
  #design-systems .framer-76mrmd-container {
    width: 588px !important;
    height: 480px !important;
  }

  /* fold.money foreground image frame → cover the square */
  #design-systems .framer-1ox1hmz {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }
  #design-systems .framer-1ox1hmz img,
  #design-systems [data-framer-background-image-wrapper] img {
    object-fit: cover !important;
  }

  /* fold.money gradient overlay → fill the square */
  #design-systems .framer-tep06t {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Text blocks (eyebrow / title / tags) → re-anchor to the bottom of the
     now-taller square (the baked top:198px sat near the bottom of the old
     311px card) */
  #design-systems .framer-xqhbrh,    /* GravityHalf text */
  #design-systems .framer-13w62z4 {  /* fold.money text */
    top: auto !important;
    bottom: 24px !important;
    left: 24px !important;
  }
}

/* ============================================================
   #design-systems cards — default / hover states
   ------------------------------------------------------------
   Default: only the image is visible. Hover: the gradient overlay
   and the text + tags ease in (fade, with a small slide-up on the
   text). Scoped to hover-capable pointers so touch devices keep
   everything visible (no hover to reveal it).
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  /* Default — overlay hidden (!important: fold.money's block ships inline opacity:1) */
  #design-systems .framer-19kglzx,   /* GravityHalf overlay */
  #design-systems .framer-tep06t {   /* fold.money overlay */
    opacity: 0 !important;
    transition: opacity .4s cubic-bezier(.22, 1, .36, 1);
  }
  /* Default — text + tags hidden and nudged down */
  #design-systems .framer-xqhbrh,    /* GravityHalf text + tags */
  #design-systems .framer-13w62z4 {  /* fold.money text + tags */
    opacity: 0 !important;
    transform: translateY(14px);
    transition:
      opacity .45s cubic-bezier(.22, 1, .36, 1),
      transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: .05s;   /* let the overlay lead, text follows */
  }

  /* Hover — fade the overlay in */
  #design-systems .framer-10gqgn1-container:hover .framer-19kglzx,
  #design-systems .framer-76mrmd-container:hover .framer-tep06t,
  /* Hover — fade + slide the text in */
  #design-systems .framer-10gqgn1-container:hover .framer-xqhbrh,
  #design-systems .framer-76mrmd-container:hover .framer-13w62z4 {
    opacity: 1 !important;
  }
  #design-systems .framer-10gqgn1-container:hover .framer-xqhbrh,
  #design-systems .framer-76mrmd-container:hover .framer-13w62z4 {
    transform: translateY(0);
  }

  /* Respect reduced-motion: quick fade, no slide */
  @media (prefers-reduced-motion: reduce) {
    #design-systems .framer-xqhbrh,
    #design-systems .framer-13w62z4 {
      transform: none;
      transition: opacity .15s linear;
    }
    #design-systems .framer-19kglzx,
    #design-systems .framer-tep06t {
      transition: opacity .15s linear;
    }
  }
}