/* ISHLVLSTUDIOS — text pages (About, Newsletter). Uses the studio stylesheet
   (site.css: tokens, top bar, type, buttons) plus this layout. Same family as
   Start a Project: the orbit at rest behind the page, glass panels. */

body.pg { min-height: 100%; overflow-x: clip; }
.pg .topbar { background: linear-gradient(var(--void) 55%, transparent); }

/* ---------- the orbit at rest ---------- */
.pg-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; perspective: 1200px; }
.pg-ring { position: absolute; left: 62%; top: 52%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%) rotateX(72deg); }
.pg-ring.r1 { width: 62vw; height: 62vw; }
.pg-ring.r2 { width: 92vw; height: 92vw; opacity: .6; }
.pg-ring.r3 { width: 128vw; height: 128vw; opacity: .35; }
.pg-mark { position: absolute; left: 62%; top: 30%; width: clamp(80px, 9vw, 140px); transform: translate(-50%, -50%); opacity: .08; }
@media (prefers-reduced-motion: no-preference) {
  .pg-ring.r1 { animation: pgspin 90s linear infinite; }
  .pg-ring.r2 { animation: pgspin 140s linear infinite reverse; }
  @keyframes pgspin { to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); } }
}

.pg-main { position: relative; z-index: 2; max-width: 76rem; margin: 0 auto; padding-top: calc(110px + env(safe-area-inset-top, 0px)); padding-bottom: 64px; }
.pg-main .eyebrow { margin: 0 0 14px; }
.pg-main h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step-hero); line-height: .92; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.pg-lede { margin: 18px 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1.3vw, 1.35rem); line-height: 1.28; max-width: 34ch; }

.pg-foot { position: relative; z-index: 2; max-width: 76rem; margin: 0 auto; padding-block: 24px 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pg-foot .foot-links { display: flex; gap: 18px; }
.pg-foot a { text-decoration: none; color: var(--ink-2); }

/* ---------- About ---------- */
.pg-index { position: fixed; z-index: 5; left: max(var(--edge), env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.pg-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pg-index a { display: grid; grid-template-columns: 2rem auto; align-items: baseline; text-decoration: none; color: var(--ink-3); font-size: .8rem; transition: color .3s; }
.pg-index a .label { color: inherit; }
.pg-index a[aria-current="true"], .pg-index a:hover { color: var(--ink); }
.ab { max-width: 52rem; }
.ab-hero { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
.ab-sec { padding-block: 9vh; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.ab-sec h2 { margin: 0 0 22px; font-weight: 500; }
.ab-sec h2 span { margin-right: 10px; }
.ab-copy { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.5; max-width: 40ch; color: var(--ink); text-wrap: pretty; }
.ab-close { margin: 0 0 18px; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.08; max-width: 18ch; }
.ab-divs { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 10px; }
.ab-divs a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-decoration: none; transition: border-color .3s, transform .4s var(--ease); height: 100%; }
.ab-divs a:hover { border-color: rgba(241,239,234,.34); transform: translateY(-2px); }
.ab-divs .n { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; }
.ab-divs .l { color: var(--ink-2); font-size: .88rem; }
.ab-founder { margin-top: 40px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); display: grid; gap: 6px; max-width: 30rem; }
.ab-founder p { margin: 0; }
.ab-founder .name { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; }
.ab-next { margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap; }
.ab-next .cta { margin: 0; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1180px) { .pg-index { display: none; } }
@media (max-width: 899px) {
  .pg-main { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
  .pg-ring, .pg-mark { left: 50%; }
  .ab-hero { min-height: 44vh; }
  .ab-sec { padding-block: 56px; }
}
@media (max-width: 560px) { .util a.label { display: none; } }
.ab-mail { margin: 10px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ab-mail a { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.1; text-underline-offset: 6px; text-decoration-thickness: 1px; user-select: all; overflow-wrap: anywhere; }
.ab-copybtn { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 4px 12px; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.ab-copybtn:hover { color: var(--ink); }