/* Round Online · components · nav · hero · pillar · prose · footer */

/* ─── Layout ──────────────────────────────────────────────────────── */
.site-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5);
}

/* ─── Site nav ────────────────────────────────────────────────────── */
.site-nav {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  /* gap = font-size / φ ≈ 18/1.618 ≈ 11px · use sp-2 (8px) since icon has optical padding inside its viewBox */
  gap: var(--sp-2);
  color: var(--color-fg);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.site-nav__brand:hover {
  color: var(--color-accent);
}
.site-nav__brand-mark {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
}
.site-nav__brand-text {
  text-transform: lowercase;
}

.site-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
}
.site-nav__links a {
  color: var(--color-fg);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.site-nav__links a:hover {
  color: var(--color-accent);
}

/* ─── Hero (home) ─────────────────────────────────────────────────── */
/* Vertical rhythm follows φ · top:bottom ≈ 1.5 (96:64), mark→h1 ≈ 1.5×(h1→tag) */
.hero {
  text-align: center;
  padding: var(--sp-9) var(--sp-5) var(--sp-8);
  max-width: var(--container-prose);
  margin: 0 auto;
}
.hero__mark {
  width: clamp(168px, 28vw, 248px);
  margin: 0 auto var(--sp-7);
  color: var(--color-ink);
}
.hero__mark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Layer · outer 17-gon · slow counter-rotation */
.hero__mark-outer {
  transform-box: view-box;
  transform-origin: center;
  opacity: 0.18;
  animation: hero-mark-rotate-rev 90s linear infinite;
}

/* Layer · inner 17-gon + radial web · slow rotation */
.hero__mark-inner {
  transform-box: view-box;
  transform-origin: center;
  opacity: 0.24;
  animation: hero-mark-rotate 70s linear infinite;
}

/* Layer · petal outlines · gentle stagger breathe (no motion blur, no scale) */
.hero__mark-petal {
  animation: hero-mark-breathe 5s ease-in-out infinite;
  animation-delay: var(--petal-delay, 0s);
}
.hero__mark-petal-main {
  stroke: currentColor;
  stroke-width: 1.1;
}
.hero__mark-petal-inner {
  stroke: var(--color-accent-2);
  stroke-width: 0.4;
  opacity: 0.55;
}

@keyframes hero-mark-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hero-mark-rotate-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes hero-mark-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.48; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark-outer,
  .hero__mark-inner,
  .hero__mark-petal {
    animation: none;
  }
}
.hero__title {
  font-size: clamp(var(--fs-3xl), 8vw, var(--fs-4xl));
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-5);
  text-transform: lowercase;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-snug);
}
.hero__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

/* ─── Pillars (home: games + stories side by side) ────────────────── */
/* Outer inset (per side) > inner gap · cards feel framed, not edge-hugging */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin: var(--sp-8) 0;
  padding: 0 var(--sp-4);
}
@media (min-width: 720px) {
  .pillars {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    padding: 0 var(--sp-7);
  }
}

.pillar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  background: var(--color-bg);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.pillar:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.pillar__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-weight: 500;
}
.pillar__title {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-3);
}
.pillar__desc {
  color: var(--color-fg-muted);
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-snug);
}
.pillar__cta {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pillar__cta:hover {
  color: var(--color-accent-2);
}

/* ─── Meta links (small links under pillars) ──────────────────────── */
.meta-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin: var(--sp-8) 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}
.meta-links a {
  color: var(--color-fg-muted);
}
.meta-links a:hover {
  color: var(--color-accent);
}

/* ─── Prose (article / page / section body) ───────────────────────── */
.prose {
  max-width: var(--container-prose);
  margin: 0 auto;
}
.prose__brand {
  width: clamp(96px, 14vw, 128px);
  margin: 0 auto var(--sp-6);
  color: var(--color-ink);
}
.prose__brand svg {
  display: block;
  width: 100%;
  height: auto;
}
.prose__header {
  margin-bottom: var(--sp-7);
}
.prose__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}
.prose__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-fg-muted);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
}
.prose__meta {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  margin: 0;
}
.prose__body {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

/* ─── Section list (used by /games/ /stories/ /axioms/) ───────────── */
.section-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  gap: var(--sp-4);
}
.section-list__item {
  margin: 0;
}
.section-list__link {
  display: block;
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.section-list__link:hover {
  border-color: var(--color-accent);
}
.section-list__title {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-2);
}
.section-list__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: var(--lh-snug);
}

/* ─── Crumb (shared breadcrumb) ──────────────────────────────────── */
.crumb {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-weight: 500;
}
.crumb a {
  color: var(--color-fg-muted);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--color-accent);
}
.crumb > span {
  margin: 0 var(--sp-2);
}
.crumb__current {
  color: var(--color-fg);
}

/* ─── Axiom System page ───────────────────────────────────────────── */

.axiom-system__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.axiom-system__meta dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  font-family: var(--font-body);
  font-weight: 500;
}
.axiom-system__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Axiom entries within prose body */
.prose__body h3 {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--sp-2);
}

.prose__body hr {
  margin: var(--sp-5) 0;
  border-top: 1px solid var(--color-border);
}

.prose__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0;
  font-size: var(--fs-sm);
}
.prose__body th,
.prose__body td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.prose__body th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-muted);
}
.prose__body td {
  white-space: nowrap;
}
.prose__body td:last-child {
  white-space: normal;
}

/* ─── Story (short fiction page) ──────────────────────────────────── */
.story {
  max-width: var(--container-prose);
  margin: 0 auto;
  font-family: var(--font-thai);
}

.story__header {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.story .crumb {
  margin-bottom: var(--sp-5);
}
.story__episode {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
}
.story__title {
  font-family: var(--font-thai);
  font-size: clamp(var(--fs-2xl), 6vw, var(--fs-3xl));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}
.story__title-en {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
  letter-spacing: 0.02em;
}
.story__subtitle {
  font-family: var(--font-thai);
  font-size: var(--fs-md);
  color: var(--color-fg-muted);
  line-height: var(--lh-snug);
  margin: 0 auto;
  max-width: 32rem;
}

.story-epigraph {
  margin: var(--sp-7) auto var(--sp-8);
  max-width: 32rem;
  text-align: center;
}
.story-epigraph blockquote {
  border: none;
  padding: 0;
  margin: 0;
  font-style: italic;
  color: var(--color-fg);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.story-epigraph blockquote p {
  margin: 0;
  max-width: none;
}
.story-epigraph cite {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  font-style: normal;
  letter-spacing: 0.05em;
}

.story__body {
  font-family: var(--font-thai);
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--color-fg);
}
.story__body p {
  margin: 0 0 var(--sp-5);
  max-width: none;
}

.story-inner-voice {
  margin: var(--sp-7) auto;
  max-width: 30rem;
  text-align: center;
  font-style: italic;
  color: var(--color-fg-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  padding: var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.story-inner-voice p {
  margin: 0 0 var(--sp-3);
  max-width: none;
}
.story-inner-voice p:last-child {
  margin: 0;
}
.story-inner-voice cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  font-style: normal;
  letter-spacing: 0.05em;
}

.story-break {
  margin: var(--sp-8) auto;
  max-width: 32rem;
  text-align: center;
  font-style: italic;
  color: var(--color-fg-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  position: relative;
  padding: var(--sp-6) 0;
}
.story-break::before,
.story-break::after {
  content: "·   ·   ·";
  display: block;
  color: var(--color-border-strong);
  letter-spacing: 0.5em;
  font-size: var(--fs-sm);
}
.story-break::before { margin-bottom: var(--sp-5); }
.story-break::after  { margin-top: var(--sp-5); }
.story-break p {
  margin: 0;
  max-width: none;
}
.story-break strong {
  color: var(--color-fg);
  font-weight: 500;
}

.story-closing {
  margin: var(--sp-8) auto var(--sp-7);
  max-width: 32rem;
  text-align: center;
}
.story-closing blockquote {
  border: none;
  padding: var(--sp-6) var(--sp-5);
  margin: 0;
  font-style: italic;
  color: var(--color-fg);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}
.story-closing blockquote p {
  margin: 0;
  max-width: none;
}

.story__byline {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.story__byline-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-fg-muted);
  margin: 0;
  letter-spacing: 0.05em;
}
.story__byline-date {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  margin: var(--sp-2) 0 0;
}

.story__nav {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}
.story__nav-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
  text-align: center;
}
.story__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}
.story__nav-list a {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.story__nav-list a:hover {
  border-color: var(--color-accent);
}
.story__nav-ep {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-fg-muted);
  white-space: nowrap;
}
.story__nav-title {
  font-family: var(--font-thai);
  font-size: var(--fs-md);
}

/* ─── 404 page ────────────────────────────────────────────────────── */
.not-found {
  max-width: var(--container-prose);
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}
.not-found__code {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 12vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
  line-height: 1;
}
.not-found__title {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-4);
  font-weight: 400;
}
.not-found__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-fg-muted);
  line-height: var(--lh-snug);
  margin: 0 auto var(--sp-7);
  max-width: 32rem;
}
.not-found__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  letter-spacing: 0.05em;
}
.not-found__links a {
  color: var(--color-accent);
  text-decoration: none;
}
.not-found__links a:hover {
  color: var(--color-accent-2);
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  margin-top: var(--sp-10);
  border-top: 1px solid var(--color-border);
  padding: var(--sp-7) var(--sp-5);
}
.site-footer__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: 0;
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
}
.site-footer__links a {
  color: var(--color-fg-muted);
  text-decoration: none;
}
.site-footer__links a:hover {
  color: var(--color-accent);
}
.site-footer__legal {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  letter-spacing: 0.02em;
  margin: 0;
}

/* ─── Responsive nav · stack on small screens ─────────────────────── */
@media (max-width: 600px) {
  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .site-nav__links {
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
}