@import url('../about.css');

/* ------------------------------------------------------------------ */
/* SIGNAL — editorial landing                                         */
/* ------------------------------------------------------------------ */

/* 01 · HERO */
.sg-hero {
  min-height: calc(100vh - 60px);
  padding: clamp(60px, 10vh, 120px) 40px clamp(80px, 10vh, 140px);
  display: flex; align-items: center;
  position: relative;
}
.sg-hero-inner {
  max-width: 1240px; width: 100%;
  margin: 0 auto;
  position: relative; z-index: 2;
}
.sg-hero .pl-eyebrow { margin-bottom: 36px; }
.sg-hero .pl-h1 {
  font-size: clamp(52px, 7vw, 88px);
  max-width: 18ch;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 12px 0 40px;
}
.sg-hero .pl-lead {
  max-width: 58ch;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

/* 02 · FEATURED PIECE */
.sg-feat {
  padding: clamp(100px, 16vh, 180px) 40px clamp(120px, 18vh, 200px);
  border-top: 1px solid var(--divider);
  position: relative;
}
.sg-feat-inner {
  max-width: 1100px; margin: 0 auto;
  position: relative; z-index: 2;
}
.sg-feat-block {
  display: block;
  color: inherit; text-decoration: none; border: 0;
  cursor: pointer;
  padding: 8px 0 0;
  transition: opacity 260ms var(--ease-out);
}
.sg-feat-block:hover { opacity: 1; }
.sg-feat-block:hover .sg-feat-title { color: #fff; }
.sg-feat-block:hover .sg-feat-link::after { transform: scaleX(1); }
.sg-feat-block:hover .sg-feat-link { gap: 14px; }
.sg-feat-block:hover .sg-feat-link .arr { transform: translateX(4px); }

.sg-feat-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 16px;
}
.sg-feat-rule {
  width: 60px; height: 1px;
  background: rgba(255,255,255,0.18);
  margin: 0 0 56px;
  transform-origin: left;
  transition: width 320ms var(--ease-out), background 240ms var(--ease-out);
}
.sg-feat-block:hover .sg-feat-rule { width: 100px; background: rgba(255,255,255,0.45); }

.sg-feat-title {
  font-size: clamp(44px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--fg-0);
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
  transition: color 220ms var(--ease-out);
}
.sg-feat-subtitle {
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--fg-2);
  margin: 0 0 40px;
  max-width: 32ch;
  text-wrap: balance;
}
.sg-feat-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 48px;
}
.sg-feat-meta .sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-mute); opacity: 0.6;
  display: inline-block;
}
.sg-feat-meta b { font-weight: 500; color: var(--fg-1); letter-spacing: 0.1em; }
.sg-feat-excerpt {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 68ch;
  margin: 0 0 40px;
}
.sg-feat-excerpt p { margin: 0 0 14px; }
.sg-feat-excerpt p:last-child { margin: 0; }

.sg-feat-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-0);
  padding: 8px 0;
  position: relative;
  transition: gap 220ms var(--ease-out);
}
.sg-feat-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--fg-0);
  transform-origin: left;
  transform: scaleX(0.45);
  transition: transform 300ms var(--ease-out);
}
.sg-feat-link .arr { transition: transform 220ms var(--ease-out); }

/* 03 · EDITORIAL LINE */
.sg-edit {
  padding: clamp(100px, 14vh, 160px) 40px;
  border-top: 1px solid var(--divider);
  position: relative;
}
.sg-edit-inner {
  max-width: 1100px; margin: 0 auto;
  position: relative; z-index: 2;
}
.sg-edit-head {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg-0);
  margin: 18px 0 40px;
  max-width: 22ch;
  text-wrap: balance;
}
.sg-edit-head .ln { display: block; }
.sg-edit-head .ln--last { color: var(--fg-2); }
.sg-edit-body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 64ch;
  margin: 0 0 48px;
}
.sg-edit-body b { color: var(--fg-0); font-weight: 500; }
.sg-edit-divider {
  height: 1px; width: 100%;
  background: var(--divider);
  margin: 16px 0 40px;
}
.sg-edit-small {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0 0 28px;
}
.sg-edit-li {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-0);
  text-decoration: none; border: 0;
  padding: 8px 0;
  position: relative;
  transition: gap 220ms var(--ease-out);
}
.sg-edit-li::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--fg-0);
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform 300ms var(--ease-out);
}
.sg-edit-li:hover { gap: 14px; }
.sg-edit-li:hover::after { transform: scaleX(1); }
.sg-edit-li .arr { transition: transform 220ms var(--ease-out); }
.sg-edit-li:hover .arr { transform: translateX(4px); }

/* 04 · ARCHIVE */
.sg-arc {
  padding: clamp(100px, 14vh, 160px) 40px clamp(120px, 16vh, 180px);
  border-top: 1px solid var(--divider);
  position: relative;
}
.sg-arc-inner {
  max-width: 1100px; margin: 0 auto;
  position: relative; z-index: 2;
}
.sg-arc-head {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg-0);
  margin: 18px 0 24px;
  max-width: 22ch;
  text-wrap: balance;
}
.sg-arc-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 44ch;
  margin: 0 0 56px;
}
.sg-arc-ledger {
  display: grid;
  grid-template-columns: 120px 1fr 140px;
  column-gap: 32px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sg-arc-ledger--head {
  padding: 14px 0;
  color: var(--fg-mute);
  font-size: 11px;
}
.sg-arc-ledger .n { color: var(--fg-2); }
.sg-arc-ledger .t { font-family: var(--font-sans); font-size: 16px; color: var(--fg-0); letter-spacing: -0.01em; text-transform: none; font-weight: 500; }
.sg-arc-ledger .d { color: var(--fg-mute); text-align: right; }
.sg-arc-ledger--ghost {
  color: var(--fg-mute); opacity: 0.45;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.sg-arc-ledger--ghost .t { font-family: var(--font-mono); font-size: 13px; color: inherit; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
.sg-arc-ledger:last-child { border-bottom: 1px solid var(--divider); }

/* Responsive */
@media (max-width: 900px) {
  .sg-hero, .sg-feat, .sg-edit, .sg-arc { padding-left: 20px; padding-right: 20px; }
  .sg-arc-ledger { grid-template-columns: 80px 1fr; }
  .sg-arc-ledger .d { grid-column: 2 / 3; text-align: left; margin-top: 4px; }
}