/* ============================================================
   株式会社ミドリノート — cases.css  (導入事例 page)
   Editorial lower page: full-title hero with a short ink line,
   three alternating case stories threaded by the signature
   ink line, destination footer. Tokens only — no new colors.
   ============================================================ */

/* ---- Lower-page hero ---- */
.page-hero {
  position: relative;
  padding-top: clamp(8rem, 20vh, 14rem);
  padding-bottom: var(--space-6);
  overflow: hidden;
}
.page-hero__ghost {
  position: absolute;
  left: 0; right: 0;
  top: clamp(6rem, 16vh, 11rem);
  overflow: hidden;
  pointer-events: none;
}
.page-hero__ghost .ghost-word {
  display: block;
  font-size: clamp(4rem, 18vw, 15rem);
  padding-left: var(--page-inline);
}
.page-hero__inner { position: relative; row-gap: var(--space-3); align-items: start; }
.page-hero__aside {
  grid-column: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 0.4rem;
}
.page-hero__vertical { height: clamp(6rem, 12vw, 10rem); }
.page-hero__head { grid-column: 4 / 13; }
.hero-title {
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.hero-line { display: block; }
.hero-underline {
  width: min(60%, 30rem);
  height: auto;
  margin-top: clamp(1rem, 2vw, 2rem);
  overflow: visible;
}
.page-hero__lead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: clamp(2rem, 5vw, 4rem);
  max-width: 54ch;
  margin-left: auto;
}
.page-hero__body { font-size: var(--step-1); line-height: 1.9; max-width: none; }
.sprout { width: clamp(38px, 4vw, 54px); height: auto; flex: 0 0 auto; margin-top: 0.4rem; }
.sprout__leaf { fill: var(--color-accent); }
.sprout__stem { stroke: var(--color-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; }

/* ---- Cases wrapper + signature ink thread ---- */
.cases { position: relative; }
.thread {
  position: absolute;
  top: clamp(2rem, 6vw, 6rem);
  left: clamp(0.75rem, 3.5vw, 4.5rem);
  width: clamp(30px, 4vw, 54px);
  height: calc(100% - clamp(4rem, 10vw, 9rem));
  z-index: 0;
  opacity: 0.9;
}
.thread .ink-path { stroke-width: 1.8; }

/* ---- Case block ---- */
.case { position: relative; z-index: 1; padding-block: var(--space-6); }
.case__grid { align-items: center; row-gap: var(--space-4); }
.case__panel { grid-column: 1 / 6; position: relative; z-index: 1; }
.case__content { grid-column: 7 / 13; position: relative; z-index: 2; }
.case--mirror .case__panel { grid-column: 8 / 13; }
.case--mirror .case__content { grid-column: 1 / 7; }

.case__panel-inner {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3.2;
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  overflow: hidden;
}
.panel-tag {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.4rem);
  left: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--color-muted);
  font-size: var(--step--1);
}
.art { width: 100%; height: auto; }
.art .ink-path { stroke: var(--color-accent); }
.art-leaf { fill: var(--color-accent); }

.case__num {
  position: relative;
  z-index: 3;
  width: max-content;
  margin-bottom: var(--space-2);
}
.case:not(.case--mirror) .case__num { margin-left: clamp(-3.5rem, -4vw, -1rem); }
.case--mirror .case__num { margin-left: auto; margin-right: clamp(-3.5rem, -4vw, -1rem); }
.case__num .index-num { color: var(--color-fg); position: relative; z-index: 1; display: block; }
.case__circle {
  position: absolute;
  top: 48%; left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: clamp(7rem, 15vw, 13rem);
  height: auto;
  z-index: 2;
  overflow: visible;
}
.case__circle .ink-path { stroke: var(--color-accent); stroke-width: 2.4; }

.case__content h2 {
  font-size: var(--step-2);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}
.case__content > .label { display: inline-block; margin-bottom: var(--space-2); }
.case__content p { margin-bottom: var(--space-2); max-width: 46ch; }
.case__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--color-fg);
  margin-top: var(--space-3);
}
.case__side {
  grid-column: 12 / 13;
  justify-self: end;
  align-self: center;
  height: clamp(6rem, 10vw, 9rem);
  color: var(--color-muted);
}
.case--mirror .case__side { grid-column: 1 / 2; justify-self: start; }

/* ---- Destination footer ---- */
.site-footer { position: relative; padding-top: var(--space-6); padding-bottom: var(--space-5); }
.footer__rule { margin-bottom: var(--space-4); }
.footer__eyebrow { display: block; margin-bottom: var(--space-3); }
.footer__logo-wrap { position: relative; }
.footer__logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 13vw, 13rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  max-width: none;
}
.footer__underline { width: min(72%, 40rem); height: auto; overflow: visible; margin-top: 0.4rem; }
.footer__tagline { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); margin-top: var(--space-3); color: var(--color-muted); max-width: none; }
.footer__marquee { margin-block: var(--space-5); border-block: 1px solid var(--hairline); padding-block: var(--space-2); }
.footer__marquee .marquee-item { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); letter-spacing: 0.02em; }
.footer__marquee .marquee-sep { color: var(--color-accent); display: inline-flex; align-items: center; }
.footer__meta { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--space-3); align-items: end; }
.footer__nav { grid-column: 1 / 6; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.footer__nav a { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; }
.footer__contact { grid-column: 7 / 13; font-family: var(--font-mono); font-size: var(--step--1); line-height: 2; color: var(--color-muted); font-style: normal; }
.footer__contact a { color: inherit; }
.footer__copy { grid-column: 1 / 13; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-muted); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .case__content { grid-column: 6 / 13; }
  .case--mirror .case__content { grid-column: 1 / 8; }
}
@media (max-width: 720px) {
  .page-hero__aside { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .page-hero__vertical { height: auto; }
  .page-hero__head { grid-column: 1 / -1; }
  .page-hero__lead { margin-left: 0; flex-direction: row; }
  .hero-underline { width: 72%; }
  .thread { display: none; }
  .case__panel, .case__content,
  .case--mirror .case__panel, .case--mirror .case__content { grid-column: 1 / -1; }
  .case__content { margin-top: var(--space-3); }
  .case__content p { max-width: none; }
  .case:not(.case--mirror) .case__num,
  .case--mirror .case__num { margin-left: 0; margin-right: 0; }
  .case__side { display: none; }
  .footer__nav, .footer__contact, .footer__copy { grid-column: 1 / -1; }
}

/* ---- Hero ink line: hide before JS draws it; restore for reduced motion ---- */
html.has-js .hero-underline .ink-path { stroke-dasharray: 900; stroke-dashoffset: 900; }
@media (prefers-reduced-motion: reduce) {
  html.has-js .hero-underline .ink-path { stroke-dasharray: none; stroke-dashoffset: 0; }
}