/* ===========================================================================
   The public profile.
   Built on the same tokens as the rest of the site, so it reads as one place
   rather than a page bolted on. Nothing here redefines a colour or a face.
   =========================================================================== */

.pf {
  /* The blog defines this on `.bl`, which the profile is not inside, so the
     article cards here were being laid out with no gap at all. Same token, same
     value: the article list on this page and the one on /blog are the same
     component and should not drift apart. */
  --bl-gap: clamp(28px, 4vw, 56px);

  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) var(--gut) clamp(80px, 10vw, 150px);
}

/* ---- the identity block ------------------------------------------------- */

.pf__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}

.pf__name {
  margin: 0;
  font-size: clamp(34px, 6.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -.026em;
  
  color: var(--text);
}

.pf__name-ar {
  margin: 10px 0 0;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.5;
  color: var(--text-2);
  
  /* The characters run right to left, but the line is a subtitle to the Latin
     name above it and belongs under its first letter, not across the column. */
  text-align: left;
}

.pf__role {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  color: var(--accent);
}

.pf__lede { margin-top: 20px; }

.pf__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pf__links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-2);
  font-size: 12.5px;
	font-weight: 600;
  text-decoration: none;
  transition: color .18s var(--ease-soft), border-color .18s var(--ease-soft);
}

.pf__links a:hover { color: var(--text); border-color: var(--accent-mute); }

.pf__portrait {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}

.pf__portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserved by width/height from WordPress, so nothing shifts on load. */
}

/* ---- sections ----------------------------------------------------------- */

.pf__sec { padding-top: clamp(48px, 6vw, 88px); }

.pf__h2 {
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  font-size: clamp(21px, 3vw, 34px);
  letter-spacing: -.014em;
  
}

.pf__prose {
  color: var(--text-2);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.72;
  text-align: justify;
}

.pf__prose p { margin: 0 0 1.05em; }
.pf__prose p:last-child { margin-bottom: 0; }
.pf__prose a { color: var(--accent-hi); }

/* ---- gallery ------------------------------------------------------------ */

.pf-gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-gal__i { margin: 0; }

.pf-gal__a {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  transition: border-color .2s var(--ease-soft), transform .2s var(--ease-soft);
}

.pf-gal__a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--ease);
}

.pf-gal__a:hover { border-color: var(--accent-mute); transform: translateY(-2px); }
.pf-gal__a:hover img { transform: scale(1.04); }

/* ---- articles -----------------------------------------------------------
   Nothing to declare for the layout. With --bl-gap restored above, the shared
   .bl__grid rule lays these out exactly as /blog does — three to a row at full
   width, fewer as the viewport narrows. Pinning a column count here would have
   been a second opinion about the same component, free to drift from the first.

   The insights mixed into that list are the one exception, and only where the
   article card would misrepresent them. This is the only page that lists both,
   so the rules live here rather than in blog.css. */

/* An insight's thumbnail is a 1200x675 diagram whose content is text. `cover`
   is right for a photograph and wrong for this: it crops the outer labels off
   whenever the card is not exactly 16/9. Contained on the card's own ground,
   the whole diagram survives at the cost of a little letterboxing. */
.bl-card--insight .bl-card__img img {
  object-fit: contain;
  background: var(--panel-2);
}

/* And it does not zoom on hover. Scaling a photograph by 3% is a nice gesture;
   scaling 13px type inside a raster diagram just softens it. */
.bl-card--insight:hover .bl-card__img img { transform: none; }

/* ---- the viewer --------------------------------------------------------- */

/* Only when open. A bare `display:flex` here would beat the user agent's own
   `dialog:not([open]){display:none}` and leave the controls floating on the
   page with nothing behind them. */
.pf-view[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The user agent sizes a dialog to its content and centres it with auto
   margins, so filling the viewport has to be stated outright — otherwise the
   overlay is a floating box with the page still visible around it. */
.pf-view {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 56px);
  overflow: hidden;
  background: rgba(5, 8, 13, .94);
  border: 0;
}

.pf-view::backdrop { background: rgba(5, 8, 13, .94); }

/* Bounded against the viewport rather than the flex parent. A percentage here
   resolves against a content box the flex layout has not finished computing,
   which let a tall photo render past the bottom of the screen and get clipped. */
.pf-view img {
  max-width: 100%;
  max-height: calc(100dvh - 7rem);
  width: auto;
  height: auto;
  min-height: 0;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  margin: auto;
}

@supports not (height: 100dvh) {
  .pf-view img { max-height: calc(100vh - 7rem); }
}

/* Written against the element itself rather than the class alone: the site's
   own button styling is more specific than a bare class would be, and the
   controls were picking up a call-to-action colour that means nothing here. */
.pf-view button.pf-view__x,
.pf-view button.pf-view__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(233, 238, 246, .28);
  background: rgba(17, 24, 35, .92);
  color: #E9EEF6;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
  transition: border-color .18s var(--ease-soft), color .18s var(--ease-soft), background .18s var(--ease-soft);
}

.pf-view button.pf-view__x { top: 18px; right: 18px; width: 40px; height: 40px; font-size: 22px; }

.pf-view button.pf-view__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}

.pf-view button.pf-view__nav--prev { left: 16px; }
.pf-view button.pf-view__nav--next { right: 16px; }

.pf-view button.pf-view__x:hover,
.pf-view button.pf-view__nav:hover {
  border-color: var(--accent);
  color: var(--accent-hi);
  background: rgba(17, 24, 35, 1);
}

.pf-view button[hidden] { display: none; }

.pf-view__count {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  color: rgba(233, 238, 246, .6);
}

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .pf__head {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Name first on a narrow screen: the portrait is support, not the headline. */
  .pf__portrait { order: 2; max-width: 320px; }
  .pf__id { order: 1; }
}

@media (max-width: 640px) {
  .pf-gal { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pf-view__nav { width: 38px; height: 38px; }
  .pf-view__nav--prev { left: 8px; }
  .pf-view__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-gal__a,
  .pf-gal__a img,
  .pf__links a { transition: none; }

  .pf-gal__a:hover { transform: none; }
  .pf-gal__a:hover img { transform: none; }
}