/* ==========================================================================
   Loom Forge Studios — inner page components
   Extends theme.css. Used by every page except the home landing.
   ========================================================================== */

/* ---------- page hero ---------- */
.phero { padding-block: clamp(132px, 17vh, 190px) clamp(36px, 6vw, 64px); }
.phero__inner { display: grid; gap: 1.1rem; max-width: 54rem; }
.phero h1 { font-size: clamp(2.5rem, 6.2vw, 4.2rem); text-wrap: balance; }
.phero__lede { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 1.75rem); line-height: 1.36; color: var(--brand-coral-lift); max-width: 26ch; }
.phero__meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }

.crumb { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-mute); }
.crumb a { text-decoration: none; color: var(--ink-soft); }
.crumb a:hover { color: var(--ink); }

/* ---------- prose ---------- */
.prose { max-width: 68ch; display: grid; gap: 1.15rem; color: var(--ink-soft); }
.prose > h2 { color: var(--ink); margin-top: 1.2rem; }
.prose > h3 { color: var(--ink); font-size: 1.2rem; margin-top: .8rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--brand-coral-lift); text-underline-offset: 3px; }

.pull {
  margin: .6rem 0; padding: 1.3rem 1.6rem; border-left: 2px solid var(--brand-coral-lift);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, rgba(243,111,82,.12), transparent 78%);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.45; color: var(--ink);
}

/* ---------- two-column body ---------- */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); } }
.rail { display: grid; gap: 1rem; position: sticky; top: 128px; }
@media (max-width: 939px) { .rail { position: static; } }

/* ---------- fact table ---------- */
.facts { padding: clamp(1.2rem, 2.6vw, 1.7rem); display: grid; gap: 0; }
.facts h3 { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600; margin-bottom: .9rem; }
.fact { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .62rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.fact:first-of-type { border-top: 0; }
.fact dt { font-size: .88rem; color: var(--ink-mute); }
.fact dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- numbered principles ---------- */
.points { display: grid; gap: .8rem; counter-reset: pt; }
.point { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem); align-items: start; }
.point::before {
  counter-increment: pt; content: counter(pt, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
  color: var(--brand-coral-lift); line-height: 1; padding-top: .28rem;
  font-variant-numeric: tabular-nums; opacity: .95;
}
.point h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.point p { color: var(--ink-soft); font-size: .96rem; }

/* ---------- stat band ---------- */
.band { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- project index cards ---------- */
.plist { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.ptile { display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.5rem, 3vw, 2.1rem); text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), border-color .35s var(--ease); }
.ptile:hover { transform: translateY(-4px); border-color: var(--glass-edge-up); }
.ptile h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.ptile__hook { font-family: var(--font-display); font-weight: 500; color: var(--brand-coral-lift); }
.ptile__body { color: var(--ink-soft); font-size: .96rem; }
.ptile__go { margin-top: auto; padding-top: .5rem; font-family: var(--font-display); font-weight: 600;
  font-size: .9rem; display: inline-flex; align-items: center; gap: .45rem; transition: gap .3s var(--ease); }
.ptile:hover .ptile__go { gap: .8rem; color: var(--brand-coral-lift); }

/* ---------- closing CTA band ---------- */
.cta { padding: clamp(2.2rem, 5vw, 3.8rem); text-align: center; display: grid; justify-items: center; gap: 1rem; }
.cta h2 { font-size: clamp(2rem, 4.6vw, 3rem); }

/* ---------- pager ---------- */
.pager { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { padding: 1.2rem 1.4rem; text-decoration: none; display: grid; gap: .3rem;
  transition: transform .35s var(--ease), border-color .35s var(--ease); }
.pager a:hover { transform: translateY(-3px); border-color: var(--glass-edge-up); }
.pager span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.pager strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.pager a:last-child { text-align: right; }
@media (max-width: 699px) { .pager a:last-child { text-align: left; } }

/* ---------- note ---------- */
.note { padding: 1.1rem 1.35rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  font-size: .92rem; color: var(--ink-soft); }