/* Sections: page-specific layout, top to bottom. */

section { padding-block: var(--space-9); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(4rem, 10vw, 8rem) var(--space-9); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: var(--space-8); }
.hero h1 { font-size: var(--step-4); margin: var(--space-4) 0 var(--space-5); }
.hero h1 .serif { display: block; font-style: italic; font-weight: 380; color: var(--moon-edge); }
.hero .lead { max-width: 560px; margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }

.hero__moon { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.hero__moon::before {
  content: ""; position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 168, 0.28) 0%, rgba(255, 233, 168, 0.08) 42%, transparent 68%);
  animation: breathe 7s ease-in-out infinite;
}
.hero__moon img { position: relative; width: 86%; filter: drop-shadow(0 30px 60px rgba(5, 8, 30, 0.6)); }

@keyframes breathe { 0%, 100% { opacity: 0.75; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__moon { order: -1; width: min(300px, 70%); margin: 0 auto; }
}

/* ---------- Principles ---------- */
.principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 960px) { .principles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .principles__grid { grid-template-columns: 1fr; } }
.principle__why { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--text-faint); font-style: italic; }

/* ---------- Work ---------- */
.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 760px) { .work__grid { grid-template-columns: 1fr; } }
.project { display: flex; flex-direction: column; gap: var(--space-3); }
.project--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-6); align-items: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(79, 134, 255, 0.22), transparent 55%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); }
@media (max-width: 760px) { .project--featured { grid-template-columns: 1fr; } }
.project__name { font-size: var(--step-2); }
.project__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: auto; padding-top: var(--space-3); font-weight: 600; font-size: var(--step--1); }
.project__links a { color: var(--text); }
.project__visual { display: grid; place-items: center; }
.project__visual svg { width: min(260px, 100%); }

/* ---------- Story ---------- */
.story__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: center; }
.story__art { position: relative; }
.story__art img { width: 100%; max-width: 420px; margin: 0 auto; }
.story__quote { font-size: var(--step-3); line-height: 1.15; margin: var(--space-4) 0 var(--space-5); }
.story__body { display: grid; gap: var(--space-4); color: var(--text-muted); }
.story__body strong { color: var(--text); font-weight: 600; }
@media (max-width: 880px) { .story__grid { grid-template-columns: 1fr; } }

/* ---------- Mission and vision ---------- */
.purpose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.purpose__grid .card { padding: var(--space-7); }
.purpose__grid p { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.3; color: var(--text); margin-top: var(--space-4); }
@media (max-width: 760px) { .purpose__grid { grid-template-columns: 1fr; } }

/* ---------- Craft ---------- */
.craft__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); margin: 0; padding: 0; list-style: none; }
.craft__list li { padding-left: var(--space-5); border-left: 2px solid rgba(255, 233, 168, 0.4); }
.craft__list h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
.craft__list p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }
@media (max-width: 880px) { .craft__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .craft__list { grid-template-columns: 1fr; } }

/* ---------- Lino ---------- */
.lino__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
.lino__grid img { width: 100%; max-width: 380px; margin: 0 auto; }
.lino__facts { margin-top: var(--space-5); }
@media (max-width: 880px) { .lino__grid { grid-template-columns: 1fr; } .lino__grid img { order: -1; max-width: 260px; } }

/* ---------- Founder ---------- */
.founder__grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; }
.portrait { --size: 300px; position: relative; width: var(--size); height: calc(var(--size) * 1.12); }
.portrait::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #3B4398 0%, #222a6b 55%, #171d4c 100%);
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 80px rgba(255, 233, 168, 0.18);
}
.portrait img {
  position: absolute; left: calc(var(--size) * -0.075); bottom: 0;
  width: calc(var(--size) * 1.15); height: calc(var(--size) * 1.15);
  /* Above the disc's centre the portrait is free; below it, it is clipped to the disc:
     the head rises out of the moon. Coordinates assume --size: 300px. */
  clip-path: path("M22.5 -40 H322.5 V195 A150 150 0 0 1 22.5 195 Z");
}
.founder__name { font-size: var(--step-3); margin: var(--space-3) 0 var(--space-2); }
.founder__role { color: var(--glow); font-weight: 600; margin-bottom: var(--space-5); }
.founder__bio { color: var(--text-muted); display: grid; gap: var(--space-4); max-width: 620px; }
.founder__links { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 760px) { .founder__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } .founder__bio { justify-items: center; } .founder__links { justify-content: center; } }
@media (max-width: 360px) { .portrait { transform: scale(0.86); transform-origin: top center; } }

/* ---------- Identity ---------- */
.identity__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.type-sample { font-size: var(--step-3); line-height: 1; margin: var(--space-3) 0 var(--space-4); }
.type-sample--serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.type-sample--mono { font-family: var(--font-mono); font-size: var(--step-2); }
@media (max-width: 880px) { .identity__grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { padding-block: var(--space-8) var(--space-7); border-top: 1px solid var(--border); background: rgba(10, 14, 36, 0.4); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.footer__brand img { width: 220px; margin-bottom: var(--space-4); }
.footer__brand p { color: var(--text-muted); max-width: 340px; }
.footer h2 { font: 600 var(--step--1)/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer ul a { color: var(--text-muted); text-decoration: none; }
.footer ul a:hover { color: var(--text); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); color: var(--text-faint); font-size: var(--step--1); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .hero__moon::before { animation: none; } }

/* ---------- Services ---------- */
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 1040px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .services__grid { grid-template-columns: 1fr; } }