/*
 * TORECANOMICS HOME
 * UI U-3 Readability Pass
 *
 * Principle:
 * premium feel comes from space, hierarchy and contrast,
 * not unreadably small typography.
 */

:root {
  --soft: #bec9d1;
  --dim: #93a3ae;
}

/* ---------- Global reading comfort ---------- */

.hero-copy-text {
  font-size: 16px;
  line-height: 1.85;
  color: #c5ced5;
}

.hero-policy {
  font-size: 13px;
  line-height: 1.75;
  color: #96a6b1;
}

.section-kicker,
.hero-kicker {
  font-size: 11px;
  line-height: 1.4;
}

/* ---------- Latest BOX ---------- */

.latest-label {
  font-size: 11px;
  color: #8fa0ac;
}

.latest-code {
  font-size: 12px;
}

.latest-name {
  line-height: 1.2;
}

.latest-type {
  font-size: 12px;
  line-height: 1.5;
  color: #95a5af;
}

.latest-release {
  font-size: 12px;
  line-height: 1.55;
  color: #bdc8d0;
}

/* ---------- Next release ---------- */

.next-code {
  font-size: 11px;
}

.next-name {
  line-height: 1.3;
}

.next-type {
  font-size: 12px;
  line-height: 1.55;
  color: #95a5af;
}

.next-date {
  line-height: 1.45;
}

.next-date span {
  font-size: 12px;
  line-height: 1.55;
  color: #96a6b1;
}

/* ---------- BOX archive heading ---------- */

.archive-note {
  max-width: 430px;

  font-size: 13px;
  line-height: 1.75;

  color: #9eacb6;
}

/* ---------- Recent BOX cards ---------- */

.set-code,
.phase-b-recent-code {
  font-size: 11px;
  line-height: 1.35;
}

.phase-b-recent-name {
  font-size: 16px;
  line-height: 1.4;
}

.set-meta,
.phase-b-recent-meta {
  font-size: 12px;
  line-height: 1.6;

  color: #94a4af;
}

.phase-b-hero-name {
  font-size: 13px;
  line-height: 1.55;

  color: #bdc8d0;
}

.phase-b-hero-name strong {
  color: #efd18a;
}

/* ---------- Earlier BOX cards ---------- */

.phase-b-history-label {
  font-size: 11px;
  line-height: 1.4;

  color: #91a1ac;
}

.older-code,
.phase-b-older-code {
  font-size: 11px;
  line-height: 1.35;
}

.older-name,
.phase-b-older-name {
  font-size: 14px;
  line-height: 1.45;

  color: #e7ecef;
}

.older-meta,
.phase-b-older-meta {
  font-size: 12px;
  line-height: 1.55;

  color: #91a1ac;
}

/* ---------- Method ---------- */

.method-num {
  font-size: 11px;
  line-height: 1.4;
}

.method-name {
  line-height: 1.4;
}

.method-copy {
  font-size: 13px;
  line-height: 1.75;

  color: #98a8b3;
}

/* ---------- Footer ---------- */

.site-footer {
  font-size: 12px;
  line-height: 1.75;

  color: #8f9fa9;
}

/* ---------- Generic disclosure ---------- */

.all-archive summary {
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Desktop spacing compensation ---------- */

@media (min-width: 681px) {
  .archive-head {
    gap: 28px;
  }

  .phase-b-recent-body {
    padding-bottom: 16px;
  }

  .phase-b-older-item {
    min-height: 0;
  }
}

/* ---------- Mobile readability ---------- */

@media (max-width: 680px) {
  .hero-copy-text {
    font-size: 15px;
    line-height: 1.8;
  }

  .hero-policy {
    font-size: 12px;
    line-height: 1.7;
  }

  .archive-note {
    max-width: none;

    font-size: 12.5px;
    line-height: 1.7;
  }

  .latest-type,
  .latest-release,
  .next-type,
  .next-date span,
  .set-meta,
  .phase-b-recent-meta,
  .older-meta,
  .phase-b-older-meta {
    font-size: 11.5px;
  }

  .phase-b-recent-name {
    font-size: 15px;
  }

  .older-name,
  .phase-b-older-name {
    font-size: 13.5px;
  }

  .method-copy {
    font-size: 12.5px;
    line-height: 1.7;
  }

  .site-footer {
    font-size: 11.5px;
  }
}

/* Only decorative micro labels may remain around 10px. */

/* =========================================================
 * UI U-4B HOME FINAL POLISH
 * ========================================================= */

/*
 * Final principle:
 * secondary information may be quiet,
 * but must never become difficult to read.
 */

.hero-policy {
  color: #a6b5be;
}

.archive-note {
  color: #afbbc3;
}

.phase-b-recent-meta,
.set-meta {
  color: #a7b5be;
}

.phase-b-hero-name {
  color: #c5cfd5;
}

.phase-b-older-meta,
.older-meta {
  color: #a5b3bc;
}

.method-copy {
  color: #a9b6bf;
}

.site-footer {
  color: #9dacb6;
}

/* Slightly clearer section separation. */

.archive-section {
  scroll-margin-top: 84px;
}

.phase-b-history-block {
  margin-top: 34px;
}

.method-section {
  margin-top: 58px;
}

/* Interactive cards remain visually restrained. */

.phase-b-recent-card,
.phase-b-older-item {
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

@media (hover:hover) {
  .phase-b-recent-card:hover,
  .phase-b-older-item:hover {
    transform: translateY(-2px);
    border-color: rgba(117,200,222,.20);
  }
}

.phase-b-recent-card:focus-visible,
.phase-b-older-item:focus-visible {
  outline: 2px solid rgba(117,200,222,.70);
  outline-offset: 3px;
}

/* Mobile: retain density, add breathing room only where useful. */

@media (max-width: 680px) {
  .next-section,
  .archive-section {
    padding-top: 4px;
  }

  .archive-head {
    gap: 12px;
  }

  .phase-b-recent-grid {
    gap: 12px;
  }

  .phase-b-history-block {
    margin-top: 30px;
  }

  .phase-b-older-grid {
    gap: 10px;
  }

  .method-section {
    margin-top: 48px;
  }

  .method-copy {
    color: #adbac2;
  }

  .site-footer {
    color: #a0afb8;
  }
}

/* =========================================================
 * HOME HERO HEADLINE — TWO-LINE TYPOGRAPHY FIX
 * ========================================================= */

/*
 * Keep the headline intentionally to two lines.
 * Do not use oversized type as a substitute for hierarchy.
 */

.hero h1 {
  display: flex;
  flex-direction: column;

  gap: .10em;

  max-width: none;

  font-size:
    clamp(
      50px,
      4.15vw,
      62px
    );

  line-height: 1.10;
  letter-spacing: -.018em;
}

.hero-headline-line {
  display: block;
  width: fit-content;

  white-space: nowrap;
}

/* Tablet */

@media (max-width: 1000px) {
  .hero h1 {
    font-size:
      clamp(
        43px,
        5.4vw,
        54px
      );

    line-height: 1.12;
  }
}

/* Mobile */

@media (max-width: 680px) {
  .hero h1 {
    gap: .12em;

    font-size:
      clamp(
        34px,
        9.1vw,
        39px
      );

    line-height: 1.14;
    letter-spacing: -.012em;
  }

  .hero-headline-line {
    white-space: nowrap;
  }
}

/* Very narrow phones */

@media (max-width: 370px) {
  .hero h1 {
    font-size:
      clamp(
        32px,
        8.9vw,
        34px
      );

    line-height: 1.16;
  }
}

/* === latest box emphasis start === */
.latest-header{
  align-items:flex-start;
  gap:14px;
}

.latest-label{
  font-size:clamp(13px,0.95vw,15px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:0.14em;
  color:var(--soft);
  opacity:0.98;
}

.latest-code{
  font-size:clamp(17px,1.2vw,21px);
  line-height:1;
  font-weight:800;
  letter-spacing:0.04em;
  color:var(--gold);
}

@media (max-width: 768px){
  .latest-header{
    gap:10px;
  }

  .latest-label{
    font-size:13px;
    line-height:1.2;
  }

  .latest-code{
    font-size:17px;
    line-height:1;
  }
}
/* === latest box emphasis end === */