@import "../primitives.css";

body.public-page {
  background: var(--p3-canvas-warm);
  color: var(--p3-ink);
}

.public-shell { overflow: hidden; }
.public-frame { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.public-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--p3-border);
}

.public-brand img,
.public-footer-brand img {
  display: block;
  width: 118px;
  height: auto;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.public-nav a {
  color: var(--p3-ink-secondary);
  font-size: .83rem;
  font-weight: 680;
  text-decoration: none;
}

.public-nav a:hover { color: var(--p3-teal-deep); }
.public-nav .p3-button { min-height: 36px; padding: .55rem .8rem; color: var(--p3-surface-raised); }

.public-hero {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .8fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.public-hero h1,
.public-section h2 {
  font-family: var(--p3-font-display);
  font-weight: 650;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.public-hero h1 {
  max-width: 760px;
  margin: .85rem 0 1.25rem;
  font-size: clamp(3.45rem, 6vw, 5.25rem);
  line-height: .98;
}

.public-lead {
  max-width: 730px;
  margin: 0;
  color: var(--p3-ink-secondary);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.58;
}

.public-hero-actions { margin-top: 1.7rem; }

.memory-proof {
  border: 1px solid var(--p3-border-strong);
  border-radius: var(--p3-r-panel);
  background: var(--p3-surface);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(20,45,51,.04);
}

.memory-proof-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
  padding: .85rem;
  border-bottom: 1px solid var(--p3-border);
  background: var(--p3-canvas-soft);
}

.memory-proof-tags span {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: .35rem .4rem;
  border: 1px solid var(--p3-border);
  border-radius: var(--p3-r-control);
  background: var(--p3-surface-raised);
  color: var(--p3-teal-deep);
  font-family: var(--p3-font-evidence);
  font-size: .59rem;
  line-height: 1.3;
  text-align: center;
}

.memory-proof-body { padding: 2rem 2rem 1.5rem; }
.memory-proof-body h2 {
  max-width: 460px;
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.65rem);
  line-height: 1.02;
}
.memory-proof-body p {
  max-width: 520px;
  margin: 1rem 0 0;
  color: var(--p3-ink-secondary);
  line-height: 1.62;
}

.memory-proof-rule {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: .65rem;
  padding: 0 2rem 1.15rem;
}
.memory-proof-rule span { height: 3px; background: var(--p3-border); }
.memory-proof-rule span:first-child,
.memory-proof-rule span:last-child { background: var(--p3-teal); }

.public-section {
  border-top: 1px solid var(--p3-border);
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}

.public-section--judgment { background: var(--p3-surface-raised); }
.public-section--routes { background: var(--p3-canvas-soft); }

.section-intro-grid {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: end;
}

.section-intro-grid--top { align-items: start; }

.public-section h2 {
  margin: .75rem 0 0;
  font-size: clamp(2.55rem, 4vw, 4.2rem);
  line-height: 1.02;
}

.section-intro-grid > p,
.judgment-lead,
.routes-grid > div > p {
  margin: 0;
  color: var(--p3-ink-secondary);
  line-height: 1.68;
}

.problem-register {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.5rem;
  border-top: 1px solid var(--p3-border-strong);
  border-bottom: 1px solid var(--p3-border);
}

.problem-register article {
  min-height: 180px;
  padding: 1.35rem 1.3rem 1.5rem 0;
}
.problem-register article + article {
  padding-left: 1.3rem;
  border-left: 1px solid var(--p3-border);
}

.problem-register h3,
.problem-conclusion h3,
.system-register h3,
.judgment-register h3,
.route-cards h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.problem-register p,
.problem-conclusion p,
.system-list,
.judgment-register p,
.route-cards p,
.public-footer p {
  color: var(--p3-ink-secondary);
  font-size: .9rem;
  line-height: 1.58;
}

.problem-register p { margin: .7rem 0 0; }

.problem-conclusion {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: 1.3rem 0 0;
}
.problem-conclusion p { margin: 0; }

.system-register {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  margin-top: 3rem;
  border: 1px solid var(--p3-border);
  background: var(--p3-surface);
}

.system-register article { padding: 1.4rem 1.5rem; }
.system-register-core { border-top: 3px solid var(--p3-teal); }
.system-register-lifecycle { border-left: 1px solid var(--p3-border); }
.system-register-lifecycle article + article { border-top: 1px solid var(--p3-border); }
.system-register h3 { padding-bottom: .9rem; border-bottom: 1px solid var(--p3-border); }

.system-list { margin: .2rem 0 0; padding: 0; list-style: none; }
.system-list li {
  position: relative;
  padding: .65rem 0 .65rem 1rem;
  border-bottom: 1px solid var(--p3-border);
}
.system-list li:last-child { border-bottom: 0; }
.system-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.08rem;
  width: 4px;
  height: 4px;
  background: var(--p3-teal);
}

.judgment-grid {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.judgment-lead { margin-top: 1.1rem; }

.judgment-register { border-top: 1px solid var(--p3-border-strong); }
.judgment-register article {
  display: grid;
  grid-template-columns: minmax(130px, .36fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--p3-border);
}
.judgment-register p { margin: 0; }

.routes-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}

.route-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.route-cards article {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--p3-border);
  border-top: 3px solid var(--p3-teal);
  border-radius: var(--p3-r-panel);
  background: var(--p3-surface);
}
.route-cards article:last-child { border-top-color: var(--p3-ink); }
.route-cards p { margin: .8rem 0 1.2rem; }
.route-cards a { margin-top: auto; align-self: flex-start; }
.route-link {
  color: var(--p3-ink);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.route-link::after { content: " →"; color: var(--p3-teal-deep); }
.route-link:hover { color: var(--p3-teal-deep); }

.public-footer {
  border-top: 1px solid var(--p3-border);
  background: var(--p3-surface-raised);
}
.public-footer-main {
  display: grid;
  grid-template-columns: minmax(250px, 1.4fr) repeat(2, minmax(140px, .6fr));
  gap: 3rem;
  padding: 2.8rem 0 2.2rem;
}
.public-footer-brand p { max-width: 260px; margin: 1rem 0 0; }
.public-footer nav { display: flex; flex-direction: column; gap: .45rem; }
.public-footer nav span {
  margin-bottom: .35rem;
  color: var(--p3-ink-muted);
  font-family: var(--p3-font-evidence);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-footer nav a {
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
}
.public-footer nav a:hover { color: var(--p3-teal-deep); }
.public-footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 1.4rem;
  border-top: 1px solid var(--p3-border);
  color: var(--p3-ink-secondary);
  font-family: var(--p3-font-evidence);
  font-size: .63rem;
}

@media (max-width: 900px) {
  .public-hero { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; }
  .memory-proof { max-width: 680px; }
  .section-intro-grid,
  .judgment-grid,
  .routes-grid { grid-template-columns: 1fr; }
  .problem-register { grid-template-columns: 1fr; }
  .problem-register article { min-height: 0; padding: 1.2rem 0; }
  .problem-register article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--p3-border); }
  .problem-conclusion { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .public-frame { width: min(100% - 32px, 1180px); }
  .public-header { min-height: 66px; gap: 1rem; }
  .public-brand img { width: 104px; }
  .public-nav { gap: .7rem; }
  .public-nav a:not(.p3-button) { display: none; }
  .public-nav .p3-button { min-height: 34px; font-size: .77rem; }

  .public-hero { padding: 4rem 0 3.5rem; }
  .public-hero h1 { font-size: clamp(3rem, 14vw, 4.15rem); }
  .memory-proof-tags { grid-template-columns: repeat(2, 1fr); }
  .memory-proof-body { padding: 1.5rem 1.3rem 1.2rem; }
  .memory-proof-rule { padding: 0 1.3rem 1rem; }

  .public-section { padding: 4rem 0; }
  .public-section h2 { font-size: clamp(2.4rem, 12vw, 3.55rem); }
  .system-register { grid-template-columns: 1fr; }
  .system-register-lifecycle { border-left: 0; border-top: 1px solid var(--p3-border); }
  .judgment-register article { grid-template-columns: 1fr; gap: .55rem; }
  .route-cards { grid-template-columns: 1fr; }
  .route-cards article { min-height: 0; }

  .public-footer-main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .public-footer-brand { grid-column: 1 / -1; }
  .public-footer-meta { flex-direction: column; }
}