/* ============================================================================
   Glassly — About page. Shares the Opaline tokens, adds an editorial maker
   profile and a numbered technical breakdown.
   ============================================================================ */

/* ------------------------------------------------------------------ HERO -- */
.ab-hero {
  max-width: 800px; padding: clamp(56px,7vw,104px) 0 clamp(28px,4vw,48px);
  position: relative; isolation: isolate;
}
.ab-hero::before {
  content: ""; position: absolute; z-index: -1; width: 46vw; max-width: 580px; aspect-ratio: 1;
  top: -26%; right: -14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--iris-1), transparent 68%);
  filter: blur(62px); opacity: .45;
}
.ab-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 22px; }
.ab-hero .lead { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; }

/* ----------------------------------------------------------------- MAKER -- */
.ab-maker {
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px,4vw,54px);
  padding: clamp(30px,4vw,46px); align-items: start;
}
.ab-maker::before { display: none; }          /* no hover hairline on this panel */
.ab-maker:hover { transform: none; box-shadow: var(--shadow-1); }

.ab-maker-side { text-align: left; }
.ab-avatar {
  width: 76px; height: 76px; border-radius: 22px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; font-weight: 600;
  color: #fff; background: var(--iris-deep); box-shadow: var(--shadow-iris);
  letter-spacing: .02em;
}
.theme-matrix .ab-avatar { color: #0B1026; }
.ab-name { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.ab-role { font-size: 0.83rem; color: var(--ink-3); margin-top: 3px; letter-spacing: .01em; }

.ab-facts { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 11px; }
.ab-facts li { display: flex; align-items: center; gap: 10px; font-size: 0.87rem; color: var(--ink-2); }
.ab-facts .ico { width: 16px; height: 16px; color: var(--accent); flex: none; }

.ab-maker-body h2 { text-align: left; font-size: clamp(1.5rem,2.6vw,1.95rem); margin: 0 0 18px; max-width: none; padding-bottom: 0; }
.ab-maker-body h2::after { display: none; }   /* the shared underline is for centred section headings */
.ab-maker-body p { color: var(--ink-2); font-size: 1rem; margin-bottom: 15px; max-width: 62ch; }
.ab-maker-body strong { color: var(--ink); font-weight: 600; }
.ab-sign {
  font-family: "Fraunces", Georgia, serif; font-size: 1.02rem; color: var(--ink) !important;
  margin-top: 22px !important;
}

/* ------------------------------------------------------------------ TECH -- */
.ab-tech { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin: 0 auto; }
.ab-tech-row { display: flex; gap: 22px; align-items: flex-start; padding: 26px 28px; }
.ab-tech-n {
  font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; line-height: 1; flex: none;
  background: var(--iris-deep); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; opacity: .5; min-width: 46px;
}
.ab-tech-row h3 { font-size: 1.08rem; margin-bottom: 8px; }
.ab-tech-row p { font-size: 0.93rem; color: var(--ink-2); max-width: 66ch; }

/* ------------------------------------------------------------ RESPONSIVE -- */
@media (max-width: 860px) {
  .ab-maker { grid-template-columns: 1fr; gap: 30px; }
  /* avatar sits beside the name; everything else stays in normal flow */
  .ab-id { display: flex; align-items: center; gap: 18px; }
  .ab-avatar { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .ab-tech-row { flex-direction: column; gap: 10px; padding: 24px 22px; }
  .ab-tech-n { font-size: 1.6rem; }
  .ab-avatar { width: 64px; height: 64px; border-radius: 18px; font-size: 1.45rem; }
}