/* ============================================================
   SUNNYRAY — SITE-WIDE POLISH (loads after page-specific CSS)
   Typography rhythm, hero photo, surfaces, motion, dark noir.
   ============================================================ */

:root {
  --radius-card: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
}

/* ----- Hero: editorial photo + calmer layout ----- */
.hero-primary {
  min-width: 0;
}

.hero-visual {
  display: none;
  position: relative;
  align-self: stretch;
  min-width: 0;
}

section.hero[data-hero="editorial"] .hero-visual {
  display: block;
}

.hero-photo {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 0;
}

.hero-visual-glow {
  pointer-events: none;
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    circle at 40% 35%,
    color-mix(in oklch, var(--sun) 45%, transparent),
    transparent 62%
  );
  opacity: 0.55;
  z-index: 0;
}

.hero-figure {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
  box-shadow:
    0 24px 48px color-mix(in oklch, var(--ink) 12%, transparent),
    0 0 0 1px color-mix(in oklch, var(--ink) 6%, transparent);
  aspect-ratio: 1;
}

.hero-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  display: block;
}

section.hero[data-hero="editorial"] .hero-display {
  grid-template-columns: 1fr minmax(200px, 32vw);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}

/* Editorial + photo: headline scales to the narrower text column */
section.hero[data-hero="editorial"] .hero-title {
  font-size: clamp(2.35rem, 4.8vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.032em;
  margin-bottom: 0.22em;
}

section.hero[data-hero="editorial"] .hero-title .stroke {
  -webkit-text-stroke-width: 1.25px;
}

section.hero[data-hero="editorial"] .hero-sub {
  margin-top: 28px;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  section.hero[data-hero="editorial"] .hero-display {
    grid-template-columns: 1fr;
  }

  section.hero[data-hero="editorial"] .hero-visual {
    max-width: min(100%, 420px);
    justify-self: start;
    order: -1;
    margin-bottom: var(--space-5);
  }

  /* Full-width column: allow headline to breathe again */
  section.hero[data-hero="editorial"] .hero-title {
    font-size: clamp(2.75rem, 9vw, 4.25rem);
  }
}

/* Softer grain (base opacity set in system.css) */
.grain {
  opacity: 0.14;
}

/* ----- Homepage: post grid as unified cards ----- */
.content-sec .posts {
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
}

.content-sec .post {
  border-right: none;
  border-bottom: none;
  padding: var(--space-5) var(--space-6);
  background: var(--paper);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.content-sec .post:nth-child(3n) {
  padding-right: var(--space-6);
}

.content-sec .post:hover {
  background: var(--paper-2);
  padding-left: var(--space-6);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* ----- Link hub: chip-like surfaces ----- */
.hub-a {
  border-radius: var(--radius-card);
  border-color: var(--line);
  background: color-mix(in oklch, var(--paper-2) 88%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.hub-a:hover {
  background: var(--paper);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

/* ----- Blog index: align with card language ----- */
.blog-list {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
}

.blog-list a {
  padding: var(--space-5) var(--space-4);
  margin: 0;
  border-bottom-color: var(--line);
  background: var(--paper);
}

.blog-list a:last-child {
  border-bottom: none;
}

.blog-list a:hover {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  background: var(--paper-2);
}

/* ----- Motion: respect user preference ----- */
@media (prefers-reduced-motion: reduce) {
  .logo-mark::after {
    animation: none;
  }

  .hero-arrow {
    animation: none;
  }

  .btn,
  .btn .arrow,
  .channel,
  .hub-a,
  .twin-send {
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .channel:hover,
  .hub-a:hover,
  .twin-send:hover:not(:disabled) {
    transform: none;
  }

  .hero-visual-glow {
    opacity: 0.2;
  }

  .twin-typing span {
    animation: none !important;
  }
}