/* ============================================================
   Ironwork Studio — Shared Styles
   Parent tokens, wordmark, nav, footer, motion system
   ============================================================ */

:root {
  /* ---- Parent palette (forge gray + ember) ---- */
  --iw-bg:        #1a1917;
  --iw-bg-deep:   #131210;
  --iw-surface:   #242320;
  --iw-surface-2: #2d2c28;
  --iw-text:      #e8e0d4;
  --iw-text-mut:  #9c9488;
  --iw-text-dim:  #6b665e;
  --iw-accent:    #c96442;
  --iw-accent-hi: #d4784e;
  --iw-ember:     #e89466;
  --iw-border:    rgba(232, 224, 212, 0.12);
  --iw-border-hi: rgba(232, 224, 212, 0.22);
  --iw-hairline:  rgba(232, 224, 212, 0.08);

  /* ---- Type stacks ---- */
  --ff-slab:      "Zilla Slab", Georgia, serif;
  --ff-heading:   "Atkinson Hyperlegible", system-ui, sans-serif;
  --ff-body:      "IBM Plex Sans", system-ui, sans-serif;
  --ff-mono:      "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Motion: forge weight ---- */
  --ease-settle:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-settle:   0.7s;
  --dur-hover:    0.35s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--iw-bg);
  color: var(--iw-text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(201, 100, 66, 0.04), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(201, 100, 66, 0.025), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.91   0 0 0 0 0.88   0 0 0 0 0.83   0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Scroll-reveal animation ---- */
@keyframes settle-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  animation: settle-in var(--dur-settle) var(--ease-settle) forwards;
}

.reveal-d1 { animation-delay: 0.1s; }
.reveal-d2 { animation-delay: 0.2s; }
.reveal-d3 { animation-delay: 0.3s; }
.reveal-d4 { animation-delay: 0.4s; }
.reveal-d5 { animation-delay: 0.5s; }

/* ---- Layout ---- */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Nav ---- */
.site-nav {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--iw-border);
}

.nav-wordmark {
  text-decoration: none;
  color: var(--iw-text);
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.nav-wordmark .wordmark-stacked .top { font-size: 16px; }
.nav-wordmark .wordmark-stacked .bot {
  font-size: 7px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
}
.nav-wordmark .wordmark-stacked .girder {
  height: 5px;
  margin: 1px 0 1px;
}
.nav-wordmark .wordmark-stacked .girder::before { height: 1px; }
.nav-wordmark .wordmark-stacked .girder::after,
.nav-wordmark .wordmark-stacked .girder span { width: 1px; }

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.nav-links a {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iw-text-mut);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-settle);
}

.nav-links a:hover {
  color: var(--iw-accent);
}

.nav-links a[aria-current="page"] {
  color: var(--iw-text);
}

/* ---- Wordmark component ---- */
.wordmark-stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--iw-text);
  text-align: center;
  user-select: none;
}

.wordmark-stacked .top {
  font-family: var(--ff-slab);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 0.92;
  margin-bottom: 2px;
}

.wordmark-stacked .bot {
  font-family: var(--ff-slab);
  font-weight: 700;
  letter-spacing: 0.92em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--iw-text);
  padding-left: 0.92em;
  margin-top: 4px;
  width: 116%;
  margin-left: -8%;
  text-align: center;
}

.girder {
  width: 100%;
  position: relative;
  height: 12px;
  margin: 4px 0 5px;
}

.girder::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--iw-text);
}

.girder::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--iw-text);
}

.girder span {
  position: absolute;
  right: 0;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--iw-text);
}

/* ---- Section structure ---- */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--iw-hairline);
}

.section-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iw-accent);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
}

.label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iw-text-dim);
}

.label.accent { color: var(--iw-accent); }

/* ---- Product cards (shared) ---- */
.product-card {
  background: var(--iw-surface);
  border: 1px solid var(--iw-border);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--dur-hover) var(--ease-settle),
              box-shadow var(--dur-hover) var(--ease-settle);
}

.product-card:hover {
  border-color: var(--iw-border-hi);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.product-card .card-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iw-text-dim);
}

.product-card h3 {
  font-family: var(--ff-heading);
  font-size: 22px;
  font-weight: 700;
}

.product-card p {
  color: var(--iw-text-mut);
  font-size: 15px;
  line-height: 1.55;
  flex: 1;
}

.product-card .card-foot {
  padding-top: 16px;
  border-top: 1px solid var(--iw-hairline);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.product-card .license {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--iw-text-dim);
  letter-spacing: 0.04em;
}

.product-card a {
  color: var(--iw-accent);
  text-decoration: none;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--dur-hover) var(--ease-settle);
}

.product-card a:hover {
  color: var(--iw-accent-hi);
}

.product-card.cf { border-color: rgba(140, 90, 56, 0.18); }
.product-card.anvil { border-color: rgba(190, 34, 48, 0.18); }

/* ---- Footer ---- */
.site-footer {
  background: var(--iw-bg-deep);
  border-top: 1px solid var(--iw-border);
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 36px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.footer-wordmark .top { font-size: 22px; }
.footer-wordmark .bot {
  font-size: 11px;
  letter-spacing: 0.7em;
  padding-left: 0.7em;
}
.footer-wordmark .girder {
  height: 7px;
  margin: 2px 0 2px;
}
.footer-wordmark .girder::before { height: 1.5px; }
.footer-wordmark .girder::after,
.footer-wordmark .girder span { width: 1.5px; }

.footer-legal {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--iw-text-dim);
  line-height: 1.6;
}

.footer-links {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  gap: 24px;
}

.footer-links a {
  color: var(--iw-text-mut);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-settle);
}

.footer-links a:hover {
  color: var(--iw-accent);
}

/* ---- Value items ---- */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}

.value-item {
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.value-item .num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--iw-accent);
  flex-shrink: 0;
  width: 20px;
}

.value-item h3 {
  font-family: var(--ff-heading);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.value-item p {
  color: var(--iw-text-mut);
  font-size: 14px;
  line-height: 1.55;
}

/* ---- Screenshot placeholder ---- */
.screenshot-placeholder {
  background: var(--iw-surface);
  border: 1px solid var(--iw-border);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.screenshot-placeholder .placeholder-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iw-text-dim);
}

/* ---- Feature list ---- */
.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.feature-item {
  padding: 24px 0;
  border-top: 1px solid var(--iw-hairline);
}

.feature-item h3 {
  font-family: var(--ff-heading);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-item p {
  color: var(--iw-text-mut);
  font-size: 14px;
  line-height: 1.55;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .site-nav {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .nav-links { gap: 16px; }

  .section-head {
    flex-direction: column;
    gap: 8px;
  }

  .values-grid,
  .feature-list {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
}