/* =========================================================
   ABOUT (Ben Kimim) — the portrait is sketched, then painted in,
   the name signs itself, a line keeps answering "who am I?"
   ========================================================= */

.hero-about {
  min-height: min(76vh, 720px);
}

.about-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: 100%;
  text-align: left;
}

/* ---------- Portrait: sketched first, then painted ---------- */

.about-portrait {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  container-type: inline-size; /* the brush moves in units of this box */
  animation: about-float 7s ease-in-out 4.4s infinite alternate;
}

@keyframes about-float {
  to { translate: 0 -10px; }
}

/* Glow, ring and canvas share one shape: a square turned 45°, crisp corners */
.about-portrait-glow,
.about-portrait-ring,
.about-portrait-frame {
  position: absolute;
  inset: 15%;
  border-radius: 5%;
  transform: rotate(45deg);
}

.about-portrait-glow {
  background: linear-gradient(135deg, #0b2a6f, #3b74e8 55%, #a9d1ff);
  filter: blur(34px);
  opacity: 0;
  animation: about-glow-in 1.6s var(--ease-out) 0.2s forwards;
}

@keyframes about-glow-in {
  to { opacity: 0.5; }
}

/* A thin frame in shades of blue, from deep navy to sky; light travels around it */
.about-portrait-ring {
  overflow: hidden;
  opacity: 0;
  animation: about-ring-in 1s var(--ease-out) 0.15s forwards;
}

.about-portrait-ring::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(#0b2a6f, #163f9e, #2f6be0, #6aa8ff, #cfe6ff, #6aa8ff, #2f6be0, #163f9e, #0b2a6f);
  animation: about-ring-spin 12s linear infinite;
}

@keyframes about-ring-in {
  from { opacity: 0; transform: rotate(45deg) scale(0.86); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}

@keyframes about-ring-spin {
  to { transform: rotate(360deg); }
}

/* The canvas: warm paper first */
.about-portrait-frame {
  inset: calc(15% + 5px);
  border-radius: 4%;
  overflow: hidden;
  background: #f4efe4;
}

.about-portrait-frame img {
  position: absolute;
  left: -20.71%;
  top: -20.71%;
  width: 141.42%;
  max-width: none;
  height: 141.42%;
  object-fit: cover;
  transform: rotate(-45deg);
}

/* 1. A charcoal sketch appears with a diagonal sweep */
.about-portrait-sketch {
  filter: grayscale(1) contrast(1.55) brightness(1.18) sepia(0.18);
  -webkit-mask: linear-gradient(135deg, #000 45%, transparent 55%) 100% 100% / 260% 260% no-repeat;
  mask: linear-gradient(135deg, #000 45%, transparent 55%) 100% 100% / 260% 260% no-repeat;
  animation: about-sketch 1.3s cubic-bezier(0.45, 0.05, 0.4, 1) 0.35s forwards;
}

@keyframes about-sketch {
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* 2. The colors are laid on from left to right with a ragged, bristly edge */
.about-portrait-paint {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H98c4 7-4 12 2 20s-5 15 2 24-4 13 2 22-5 14 2 22-3 8 0 12H0z'/%3E%3Cg fill-opacity='.55'%3E%3Crect x='97' y='6' width='14' height='2.4' rx='1.2'/%3E%3Crect x='100' y='31' width='18' height='2' rx='1'/%3E%3Crect x='98' y='52' width='12' height='2.6' rx='1.3'/%3E%3Crect x='101' y='74' width='16' height='2' rx='1'/%3E%3Crect x='98' y='90' width='11' height='2.4' rx='1.2'/%3E%3C/g%3E%3C/svg%3E")
    100% 0 / 200% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H98c4 7-4 12 2 20s-5 15 2 24-4 13 2 22-5 14 2 22-3 8 0 12H0z'/%3E%3Cg fill-opacity='.55'%3E%3Crect x='97' y='6' width='14' height='2.4' rx='1.2'/%3E%3Crect x='100' y='31' width='18' height='2' rx='1'/%3E%3Crect x='98' y='52' width='12' height='2.6' rx='1.3'/%3E%3Crect x='101' y='74' width='16' height='2' rx='1'/%3E%3Crect x='98' y='90' width='11' height='2.4' rx='1.2'/%3E%3C/g%3E%3C/svg%3E")
    100% 0 / 200% 100% no-repeat;
  animation: about-paint 2.6s linear 1.7s forwards; /* in step with the brush */
}

@keyframes about-paint {
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* The brush that paints it: zig-zags across, then leaves */
.about-portrait-brush {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 26cqw;
  height: 26cqw;
  overflow: visible;
  max-width: none;
  margin: -25cqw 0 0 -0.6cqw; /* bristle tip sits on the point being painted */
  filter: drop-shadow(0 8px 10px rgba(8, 10, 40, 0.35));
  opacity: 0;
  pointer-events: none;
  animation: about-brush 2.6s linear 1.7s forwards;
}

@keyframes about-brush {
  0% { opacity: 0; translate: 0 40cqw; rotate: -8deg; }
  5% { opacity: 1; }
  14% { translate: 14cqw 68cqw; rotate: 4deg; }
  28% { translate: 28cqw 26cqw; rotate: -10deg; }
  42% { translate: 42cqw 74cqw; rotate: 6deg; }
  56% { translate: 56cqw 24cqw; rotate: -8deg; }
  70% { translate: 70cqw 72cqw; rotate: 5deg; }
  84% { translate: 84cqw 30cqw; rotate: -6deg; }
  94% { opacity: 1; translate: 94cqw 52cqw; rotate: 0deg; }
  100% { opacity: 0; translate: 104cqw 34cqw; rotate: -18deg; }
}


/* Paint drops splashed around the portrait */
.splash {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50% 46% 54% 48%;
  background: var(--c);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.12), inset 2px 2px 0 rgba(255, 255, 255, 0.35);
  opacity: 0;
  transform: scale(0);
  animation: splash-in 600ms var(--ease-spring) forwards, splash-float 6s ease-in-out infinite alternate;
  animation-delay: var(--d), calc(var(--d) + 0.6s);
}

.splash.c1 { --s: 22px; --c: #6aa8ff; --d: 0.7s; left: 6%; top: 18%; }
.splash.c2 { --s: 12px; --c: #c873de; --d: 1s; left: 14%; top: 10%; }
.splash.c3 { --s: 18px; --c: #ff9fcf; --d: 1.3s; right: 4%; top: 30%; }
.splash.c4 { --s: 10px; --c: #f4c430; --d: 1.5s; right: 12%; top: 22%; }
.splash.c5 { --s: 16px; --c: #3fc6a8; --d: 1.8s; left: 12%; bottom: 14%; }
.splash.c6 { --s: 26px; --c: #8e7bff; --d: 2s; right: 8%; bottom: 10%; }

@keyframes splash-in {
  to { opacity: 0.95; transform: scale(1); }
}

@keyframes splash-float {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}

/* ---------- Name, role, text ---------- */

.about-name {
  /* generous line-height + padding: script ascenders are tall and would be clipped */
  margin: 0;
  padding: 0.18em 0.12em 0.04em;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 4px 30px rgba(120, 100, 255, 0.45);
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: sign 1.8s cubic-bezier(.45, .05, .35, 1) 0.6s forwards;
}

@keyframes sign {
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

.about-swash {
  display: block;
  width: min(300px, 70%);
  height: auto;
  margin: -14px 0 18px 0.2em;
  overflow: visible;
}

.about-swash path {
  fill: none;
  stroke: var(--lavender);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: paint-in 900ms var(--ease-out) 2.3s forwards;
}

.about-role {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400;
  color: var(--text-2);
  opacity: 0;
  animation: about-fade 800ms var(--ease-out) 2.5s forwards;
}

.role-box {
  /* tall enough for dots above (İ, Ş) and tails below (ç, ğ, y) */
  position: relative;
  display: inline-block;
  min-width: 9ch;
  height: 1.7em;
  margin: -0.2em 0;
  overflow: hidden;
  vertical-align: middle;
}

.role {
  display: inline-block;
  padding: 0.2em 0.18em 0.2em 0;
  line-height: 1.3;
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.role.is-out {
  animation: role-out 380ms var(--ease-out) forwards;
}

.role.is-in {
  animation: role-in 520ms var(--ease-out) both;
}

@keyframes role-out {
  to { opacity: 0; transform: translateY(-100%); }
}

@keyframes role-in {
  from { opacity: 0; transform: translateY(100%); }
}

.about-intro .lead {
  margin-top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 23px);
  color: var(--text);
  opacity: 0;
  animation: about-fade 800ms var(--ease-out) 2.8s forwards;
}

.about-text {
  margin-top: 12px;
  max-width: 50ch;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text-2);
  opacity: 0;
  animation: about-fade 800ms var(--ease-out) 3.1s forwards;
}

@keyframes about-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Sides of one person ---------- */

/* Four to a row (two on tablets, one on phones); a last row with fewer cards
   sits in the middle. Cards can be added in the panel. */
.facets {
  --cols: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: clamp(56px, 10vh, 100px);
}

.facets > .facet {
  flex: 0 0 calc((100% - (var(--cols) - 1) * 20px) / var(--cols));
  min-width: 0;
}

/* No backdrop blur and no sliding here: those two together could make the
   card flash across the screen in some browsers */
.facet {
  position: relative;
  padding: 30px 28px;
  overflow: hidden;
  border-radius: var(--r-l);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 40px -24px rgba(8, 10, 40, 0.5), var(--sheen);
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}

.facet:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--shadow-l), var(--sheen);
}

.facet-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--grad-brand);
  box-shadow: 0 12px 30px -10px rgba(120, 100, 240, 0.8);
  margin-bottom: 20px;
  transition: transform var(--t-slow) var(--ease-spring);
}

.facet:hover .facet-icon {
  transform: rotate(-8deg) scale(1.06);
}

.facet-icon svg {
  width: 28px;
  height: 28px;
}

.facet h2 {
  font-size: 26px;
  font-weight: 500;
  font-style: italic;
}

.facet p {
  margin-top: 10px;
  color: var(--text-2);
  text-shadow: 0 1px 8px rgba(10, 14, 50, 0.45); /* readable over the clouds */
}

/* ----- Painter: a canvas with fresh dabs of paint ----- */
.facet-paint {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 126, 182, 0.32), transparent 26%),
    radial-gradient(circle at 104% 34%, rgba(106, 168, 255, 0.28), transparent 24%),
    radial-gradient(circle at 76% -4%, rgba(244, 196, 48, 0.26), transparent 22%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px),
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

/* the icon is a dab of paint that keeps changing shape */
.facet-paint .facet-icon {
  border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%;
  background: linear-gradient(135deg, #ff7eb6, #ff9a6b 50%, #f4c430);
  box-shadow: 0 12px 30px -10px rgba(255, 126, 182, 0.75);
  animation: about-blob 6s ease-in-out infinite alternate;
}

@keyframes about-blob {
  50% { border-radius: 58% 42% 52% 48% / 44% 58% 42% 56%; }
  100% { border-radius: 44% 56% 60% 40% / 52% 40% 60% 48%; }
}

/* a row of paint swatches, like the edge of a palette */
.facet-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
}

.facet-swatches i {
  width: 18px;
  height: 16px;
  border-radius: 52% 48% 46% 54% / 58% 50% 50% 42%;
  background: var(--c);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.14), inset 2px 2px 0 rgba(255, 255, 255, 0.35);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-spring);
  transition-delay: calc(400ms + var(--n) * 90ms);
}

.facet-swatches i:nth-child(1) { --c: #6aa8ff; --n: 0; }
.facet-swatches i:nth-child(2) { --c: #8e7bff; --n: 1; border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%; }
.facet-swatches i:nth-child(3) { --c: #c873de; --n: 2; }
.facet-swatches i:nth-child(4) { --c: #ff7eb6; --n: 3; border-radius: 56% 44% 48% 52% / 46% 56% 44% 54%; }
.facet-swatches i:nth-child(5) { --c: #ff9a6b; --n: 4; }
.facet-swatches i:nth-child(6) { --c: #f4c430; --n: 5; border-radius: 50% 50% 42% 58% / 56% 48% 52% 44%; }

.facet-paint.is-revealed .facet-swatches i {
  opacity: 1;
  transform: none;
}

.facet-paint:hover .facet-swatches i {
  animation: about-swatch-hop 600ms var(--ease-out) calc(var(--n) * 70ms);
}

@keyframes about-swatch-hop {
  40% { transform: translateY(-7px) scale(1.12); }
}

/* an optional word after the swatches, painted on in the palette's colors */
.facet-paint-word {
  padding: 2px 6px 6px 2px;
  font-family: var(--font-script);
  font-style: normal;
  font-size: 26px;
  line-height: 1.1;
  background: linear-gradient(90deg, #ff7eb6, #ff9a6b 50%, #f4c430);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  clip-path: inset(0 100% 0 0);
}

.facet-paint.is-revealed .facet-paint-word {
  animation: about-verse-write 1.8s cubic-bezier(0.45, 0.1, 0.4, 1) 1s forwards;
}

.facet-paint.is-revealed:hover .facet-paint-word {
  animation: about-verse-rewrite 1.5s cubic-bezier(0.45, 0.1, 0.4, 1) forwards;
}

/* ----- Poet: a page of a notebook, a line writing itself ----- */
.facet-ink {
  background:
    linear-gradient(90deg, transparent 20px, rgba(255, 128, 160, 0.38) 20px 21px, transparent 21px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(170, 195, 255, 0.13) 27px 28px),
    linear-gradient(150deg, rgba(140, 120, 255, 0.12), rgba(255, 255, 255, 0.02));
}

.facet-ink .facet-icon {
  background: radial-gradient(circle at 70% 75%, #3a5fd0, #1a2463 70%);
  border: 1px solid rgba(170, 195, 255, 0.4);
  box-shadow: 0 12px 30px -10px rgba(60, 90, 220, 0.8);
}

.facet-verse {
  display: inline-block;
  margin-top: 14px;
  padding: 2px 6px 4px 2px;
  font-family: var(--font-script);
  font-size: 26px;
  line-height: 1.3;
  color: #dfe6ff;
  text-shadow: 0 0 14px rgba(140, 160, 255, 0.5);
  clip-path: inset(0 100% 0 0);
}

/* written once when the card appears, and again on hover */
.facet-ink.is-revealed .facet-verse {
  animation: about-verse-write 2.4s cubic-bezier(0.45, 0.1, 0.4, 1) 0.5s forwards;
}

.facet-ink.is-revealed:hover .facet-verse {
  animation: about-verse-rewrite 2s cubic-bezier(0.45, 0.1, 0.4, 1) forwards;
}

@keyframes about-verse-write {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes about-verse-rewrite {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* The technical-drawing card looks like a blueprint */
.facet-blueprint {
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(160deg, rgba(36, 89, 184, 0.42), rgba(18, 58, 122, 0.5));
}

/* registration marks in the four corners, as on a drawing sheet */
.facet-blueprint::before {
  content: "";
  position: absolute;
  inset: 10px;
  --m: rgba(200, 225, 255, 0.5);
  background:
    linear-gradient(var(--m), var(--m)) top left / 12px 1px,
    linear-gradient(var(--m), var(--m)) top left / 1px 12px,
    linear-gradient(var(--m), var(--m)) top right / 12px 1px,
    linear-gradient(var(--m), var(--m)) top right / 1px 12px,
    linear-gradient(var(--m), var(--m)) bottom left / 12px 1px,
    linear-gradient(var(--m), var(--m)) bottom left / 1px 12px,
    linear-gradient(var(--m), var(--m)) bottom right / 12px 1px,
    linear-gradient(var(--m), var(--m)) bottom right / 1px 12px;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* a protractor peeking in from the top corner; it turns a little on hover */
.facet-blueprint::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(200, 225, 255, 0.45) 0 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61% 69%, transparent 70%);
  mask: radial-gradient(circle, transparent 60%, #000 61% 69%, transparent 70%);
  transition: transform 1.4s var(--ease-out);
  pointer-events: none;
}

.facet-blueprint:hover::after {
  transform: rotate(-30deg);
}

.facet-blueprint .facet-icon {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

.facet-dimension {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(200, 225, 255, 0.75);
}

.facet-dimension::before,
.facet-dimension::after {
  content: "";
  flex: 1;
  height: 7px;
  /* the line with a little tick at its outer end */
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 1px 100% no-repeat;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out) 500ms;
}

.facet-dimension::before {
  transform-origin: right;
}

.facet-dimension::after {
  transform-origin: left;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) right center / 1px 100% no-repeat;
}

/* the dimension line draws itself out from the scale when the card appears */
.facet-blueprint.is-revealed .facet-dimension::before,
.facet-blueprint.is-revealed .facet-dimension::after {
  transform: scaleX(1);
}

/* The programmer card looks like a terminal */
.facet-code {
  background:
    repeating-linear-gradient(180deg, rgba(157, 255, 218, 0.035) 0 1px, transparent 1px 22px),
    linear-gradient(160deg, rgba(12, 20, 52, 0.5), rgba(20, 16, 56, 0.5));
  border-color: rgba(157, 255, 218, 0.22);
}

.facet-code .facet-icon {
  background: rgba(157, 255, 218, 0.08);
  border: 1.5px solid rgba(157, 255, 218, 0.55);
  box-shadow: 0 0 24px -6px rgba(157, 255, 218, 0.5);
}

.facet-terminal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font: 600 13px/1 ui-monospace, "Cascadia Code", Consolas, monospace;
  color: #9dffda;
}

.facet-terminal b {
  color: var(--pink);
}

.facet-terminal span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.facet-terminal i {
  width: 8px;
  height: 15px;
  background: #9dffda;
  animation: about-caret 1s steps(1) infinite;
}

@keyframes about-caret {
  50% { opacity: 0; }
}

/* ---------- The quote: a quiet card, a faint window and the sun ---------- */

.about-quote {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(56px, 9vw, 104px) clamp(24px, 6vw, 80px);
  margin-bottom: clamp(48px, 8vh, 80px);
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--glass-border);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 40px -24px rgba(8, 10, 40, 0.5), var(--sheen);
  text-align: center;
  isolation: isolate;
}

/* A window drawn with a few faint lines, standing behind the words */
.aq-window {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: auto;
  height: 118%;
  max-width: none;
  translate: -50% -46%;
  fill: none;
  stroke: rgba(220, 230, 255, 0.13);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.aq-window .aq-horizon {
  stroke: rgba(160, 200, 255, 0.12);
  stroke-dasharray: 3 5;
}

/* The sun, softly glowing in the upper pane; it breathes very slowly */
.aq-sun {
  position: absolute;
  left: calc(50% + clamp(40px, 7vw, 90px));
  top: 18%;
  z-index: -1;
  width: clamp(90px, 13vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 160, 0.32), rgba(255, 200, 140, 0.1) 45%, transparent 70%);
  animation: about-sun 9s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes about-sun {
  from { opacity: 0.65; scale: 0.92; }
  to { opacity: 1; scale: 1.06; }
}

.about-quote blockquote {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.3;
  text-shadow: 0 2px 18px rgba(10, 14, 50, 0.5);
}

.about-quote cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- Calls to action ---------- */

.about-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

@media (max-width: 900px) {
  .about-stage {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-portrait {
    width: min(320px, 80%);
  }

  .about-swash {
    margin-inline: auto;
  }

  .about-role {
    justify-content: center;
  }

  .about-text {
    margin-inline: auto;
  }

}

@media (max-width: 1100px) {
  .facets {
    --cols: 2;
  }
}

@media (max-width: 640px) {
  .facets {
    --cols: 1;
  }
}