/* ==========================================================================
   HITCO — Board of directors (/about/board)

   Visual system follows the user's reference design: a deep teal hero band with
   an asymmetric rounded photo frame, a centred section heading over a green
   rule, and white rounded profile cards whose action is a circular "+".

   Everything is scoped under `.bd` except the scroll lock (which must reach the
   document element) and the `<dialog>` backdrop. Logical properties throughout,
   so fa (RTL) and en (LTR) share one rule set; the only physical values are
   directional glyphs and object-position focal points, which are properties of
   the artwork and must not mirror.
   ========================================================================== */

.bd {
  /* Band tones — navy, not teal (user requirement: the header must not read
     green). Pulled off the brand blue rather than the ink so the band still
     belongs to the palette. Kept local: one page's treatment, not a token
     change. */
  --bd-deep: var(--c-band);
  --bd-deep-2: color-mix(in srgb, var(--c-band), #fff 8%);
  --bd-deep-3: var(--c-band-deep);

  --bd-r: 16px;
  --bd-r-lg: 28px;
  --bd-r-xl: 72px;

  --bd-card-shadow: 0 1px 2px rgba(12, 42, 47, 0.04),
    0 12px 32px -18px rgba(12, 42, 47, 0.28);
  color: var(--c-body);
}

/* ==========================================================================
   SHARED ATOMS
   ========================================================================== */

/* ---- portrait frame ----------------------------------------------------- */
/* Five of the six portraits are studio cut-outs isolated on white or on
   transparency, so they sit on a tinted plate under mix-blend-mode:multiply —
   the white ground drops out and the figure stands in the frame. The sixth is a
   real photograph on a real background, where multiply would only muddy it.
   isolation:isolate keeps the blend against the plate, not the page.
   ⚠️ No decoding="async" on these images: paired with mix-blend-mode the
   browser defers the paint and the frame renders empty on first load. */
.bd-shot {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--bd-r);
  background: linear-gradient(170deg, #f4f8f9, #e6eef1);
}
.bd-shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Percentages here are physical by definition and must stay that way — the
     subjects are where they are in the frame regardless of text direction. */
  object-position: 50% 12%;
  transition: transform var(--dur-3) var(--ease);
}
.bd-shot--cutout img {
  mix-blend-mode: multiply;
}
/* The one photograph in the set puts its subject right of centre. */
.bd-shot--photo img {
  object-position: 57% 30%;
}

/* ---- role line ---------------------------------------------------------- */
.bd-role {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--c-green);
}
.bd-role--lg {
  font-size: var(--t-md);
}

/* ---- pill button -------------------------------------------------------- */
.bd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 28px;
  border: 0;
  border-radius: 10px;
  background: var(--bd-deep-2);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}
.bd-btn:hover {
  background: var(--c-green);
  color: #fff;
}
.bd-btn:active {
  transform: translateY(1px);
}

/* The base arrow glyph points right; a blanket flip would send every arrow the
   same way, so each direction is written out. */
.bd-arw {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .bd-arw {
  transform: scaleX(-1);
}
.bd-btn:hover .bd-arw {
  transform: translateX(-3px);
}
[dir="rtl"] .bd-btn:hover .bd-arw {
  transform: scaleX(-1) translateX(-3px);
}

/* ---- roster card action ------------------------------------------------- */
.bd-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 42px;
  padding-inline: var(--s-4);
  border-radius: 999px;
  background: var(--bd-deep-2);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  flex: none;
  transition: background var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}
.bd-plus:hover,
.bd-plus:focus-visible {
  background: var(--c-green);
  color: #fff;
  transform: translateY(-1px);
}
.bd-plus:hover .bd-arw {
  transform: translateX(-3px);
}
[dir="rtl"] .bd-plus:hover .bd-arw {
  transform: scaleX(-1) translateX(-3px);
}

/* ==========================================================================
   1 · HERO BAND
   ========================================================================== */
.bd-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    120% 140% at 85% 0%,
    var(--bd-deep-2) 0%,
    var(--bd-deep) 45%,
    var(--bd-deep-3) 100%
  );
  padding-block: clamp(44px, 6vw, 92px) clamp(56px, 7vw, 104px);
  color: rgba(255, 255, 255, 0.8);
}

/* Corporate line-work, drawn in CSS so the band costs no extra request.
   Sits under the content and is inert to the reader. */
.bd-hero__wave {
  position: absolute;
  inset-block: -20%;
  inset-inline-end: -10%;
  inline-size: 48%;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-radial-gradient(
    circle at 100% 50%,
    transparent 0 38px,
    rgba(255, 255, 255, 0.06) 38px 39px
  );
}
.bd-hero__dots {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -54px;
  inline-size: 96px;
  block-size: 70px;
  pointer-events: none;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.28) 1.6px,
    transparent 1.6px
  );
  background-size: 16px 16px;
}

.bd-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.bd-hero__text {
  position: relative;
}
.bd-hero__eyebrow {
  margin: 0 0 var(--s-4);
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.bd-hero__title {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
[dir="ltr"] .bd-hero__title {
  letter-spacing: -0.02em;
}
.bd-hero__rule {
  display: block;
  inline-size: 62px;
  block-size: 3px;
  margin-block: var(--s-5) 0;
  border-radius: 2px;
  background: var(--c-green);
}
.bd-hero__lede {
  margin: var(--s-6) 0 0;
  max-inline-size: 52ch;
  font-size: clamp(0.95rem, 1vw, 1.06rem);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.74);
}
.bd-hero__meta {
  margin: var(--s-5) 0 0;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.5);
}
.bd-hero__cta {
  margin: var(--s-8) 0 0;
}
/* On the band the CTA stays in the blue/navy family — a green hover would put
   green back into the header, which is exactly what was asked against. */
.bd-hero .bd-btn {
  background: var(--c-primary);
}
.bd-hero .bd-btn:hover {
  background: var(--c-primary-deep);
}

/* ---- hero media --------------------------------------------------------- */
.bd-hero__media {
  position: relative;
  margin: 0;
  /* Room for the caption plate, which overhangs the frame's lower edge. */
  padding-block-end: 48px;
}
/* The offset shape behind the photo — the reference's layered composition. */
.bd-hero__plate {
  position: absolute;
  inset-block-start: -18px;
  inset-inline-start: -18px;
  inline-size: 62%;
  block-size: 58%;
  border-radius: var(--bd-r-xl) var(--bd-r-lg) var(--bd-r-lg) var(--bd-r-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}
.bd-shot--hero {
  position: relative;
  /* ⚠️ aspect-ratio + a block-size floor on an auto-width box resolves back
     into a minimum WIDTH. The grid column is definite and inline-size pins the
     axis, so the ratio can only ever drive the block axis. */
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  /* Asymmetric frame. The two big corners are the ones facing the text column
     and its opposite — logical, so the composition mirrors intact in /en
     instead of pointing its open corner the wrong way. */
  border-start-end-radius: var(--bd-r-xl);
  border-end-start-radius: var(--bd-r-xl);
  border-start-start-radius: var(--bd-r-lg);
  border-end-end-radius: var(--bd-r-lg);
  background: rgba(255, 255, 255, 0.06);
}

/* White plate overhanging the frame's lower edge, carrying the subject's name
   — the reference leaves its hero photo unlabelled, but an unattributed
   portrait of a named person is worse than a small caption. */
.bd-hero__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: clamp(12px, 4%, 40px);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-4);
  border-radius: 14px;
  background: var(--c-surface);
  box-shadow: 0 10px 30px -14px rgba(4, 20, 24, 0.55);
}
.bd-hero__leaf {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--c-green-soft);
  color: var(--c-green);
}
.bd-hero__leaf svg {
  inline-size: 20px;
  block-size: 20px;
}
.bd-hero__capname {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-ink);
  line-height: var(--lh-snug);
  margin-block-end: 2px;
}
.bd-hero__cap .bd-role {
  font-size: var(--t-xs);
}

/* ==========================================================================
   2 · ROSTER
   ========================================================================== */
.bd-roster {
  padding-block: clamp(48px, 6vw, var(--sec-y)) clamp(56px, 7vw, var(--sec-y));
}

/* Centred heading over a short green rule, per the reference. */
.bd-sec {
  text-align: center;
  margin-block-end: clamp(32px, 4vw, var(--s-12));
}
.bd-sec__title {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, var(--t-2xl));
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--c-ink);
}
.bd-sec__rule {
  display: block;
  inline-size: 54px;
  block-size: 3px;
  margin: var(--s-4) auto 0;
  border-radius: 2px;
  background: var(--c-green);
}

.bd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}
.bd-item--wide {
  grid-column: 1 / -1;
}

.bd-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: clamp(16px, 2vw, 28px);
  block-size: 100%;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--bd-r-lg);
  background: var(--c-surface);
  box-shadow: var(--bd-card-shadow);
  transition: box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.bd-card:hover,
.bd-card:focus-within {
  transform: translateY(-3px);
  border-color: #cfe0e4;
  box-shadow: 0 2px 4px rgba(12, 42, 47, 0.05),
    0 22px 46px -22px rgba(12, 42, 47, 0.34);
}

.bd-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.bd-card__name {
  margin: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--c-ink);
  transition: color var(--dur-2) var(--ease);
}
.bd-card:hover .bd-card__name {
  color: var(--bd-deep-2);
}
.bd-card__excerpt {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
/* Foot of the text column, on the edge nearest the portrait — where the
   reference design puts it. `align-items:flex-start` on the column would
   otherwise park it against the outer margin. */
.bd-card .bd-plus {
  margin-block-start: auto;
  align-self: flex-end;
}

.bd-card__media {
  position: relative;
  align-self: start;
}
.bd-card__dots {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-end: -9px;
  inline-size: 58px;
  block-size: 58px;
  pointer-events: none;
  background-image: radial-gradient(
    rgba(16, 57, 62, 0.22) 1.5px,
    transparent 1.5px
  );
  background-size: 12px 12px;
}
.bd-card__media .bd-shot {
  position: relative;
  aspect-ratio: 1 / 1;
  max-block-size: 320px;
  border-start-end-radius: var(--bd-r-lg);
  border-end-start-radius: var(--bd-r-lg);
  border-start-start-radius: var(--bd-r);
  border-end-end-radius: var(--bd-r);
}
.bd-card:hover .bd-shot img {
  transform: scale(1.035);
}

/* The CEO's full-width card — a wider frame and more of the biography. */
.bd-card--wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 32%);
}
.bd-card--wide .bd-card__name {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}
/* px, not ch: the excerpt runs at --t-sm (12.8px), where `ch` resolves to
   ~6.5px and a "70ch" cap silently becomes a 455px column in a 830px card. */
.bd-card--wide .bd-card__excerpt {
  max-inline-size: 640px;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}
.bd-card--wide .bd-card__media .bd-shot {
  max-block-size: 380px;
}

/* ==========================================================================
   3 · PROFILE DIALOG
   ==========================================================================
   Native <dialog> + showModal(): the focus trap, the inert background and the
   top layer come from the platform. board.js only adds the enter/leave
   animation, the overlay click and the scroll lock.

   ⚠️ display:flex may only be applied under [open]. A bare `.bd-modal{display:
   flex}` outranks the UA's `dialog:not([open]){display:none}` and every profile
   would be painted into the page. */
.bd-modal {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.bd-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  padding: clamp(12px, 4vh, 44px) clamp(12px, 4vw, 44px);
  overflow: hidden;
}
.bd-modal::backdrop {
  background: rgba(7, 32, 36, 0.66);
  opacity: 0;
  transition: opacity var(--dur-3) cubic-bezier(0.2, 0.7, 0.3, 1);
}
.bd-modal.is-open::backdrop {
  opacity: 1;
}

.bd-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: min(1080px, 100%);
  max-block-size: 100%;
  background: var(--c-surface);
  border-radius: var(--bd-r-lg);
  box-shadow: 0 30px 80px -30px rgba(4, 20, 24, 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease);
}
.bd-modal.is-open .bd-modal__panel {
  opacity: 1;
  transform: none;
}

/* Trailing corner — the reference puts it opposite the reading edge, i.e. top
   left in fa and top right in en, which is what inset-inline-end resolves to. */
.bd-modal__x {
  position: absolute;
  z-index: 2;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-body);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.bd-modal__x:hover {
  background: var(--bd-deep-2);
  border-color: var(--bd-deep-2);
  color: #fff;
}
.bd-modal__x svg {
  inline-size: 17px;
  block-size: 17px;
}

.bd-modal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 3.2vw, 46px);
}
.bd-modal__scroll:focus {
  outline: none;
}

/* ---- profile header: identity · portrait -------------------------------- */
.bd-modal__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
  /* Room for the close button so a long name never runs under it. */
  padding-inline-end: 44px;
  padding-block-end: clamp(24px, 3vw, 36px);
}

/* The biography lives in the identity column. The 78ch cap that governs a
   full-width band is meaningless here — the column already is the measure. */
.bd-modal__bio {
  margin-block-start: var(--s-5);
}
.bd-modal__bio p,
.bd-modal__id .bd-note {
  max-inline-size: none;
  font-size: var(--t-sm);
}

/* ---- expertise row: one column per list block --------------------------- */
/* Its own row under the biography and the portrait, two columns wide, one
   block to each. Stacks to one column below 760px. */
.bd-rails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.bd-rail__title {
  margin: 0 0 var(--s-5);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-ink);
  padding-inline-start: var(--s-4);
  border-inline-start: 3px solid var(--c-green);
  line-height: var(--lh-snug);
}
.bd-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.bd-rail__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-body);
}
.bd-rail__i {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--c-green-soft);
  color: var(--c-green);
}
.bd-rail__i svg {
  inline-size: 14px;
  block-size: 14px;
}

.bd-modal__name {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--c-ink);
}

/* Sits under the portrait, inside .bd-modal__shot, and matches its width. */
.bd-contact {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: var(--s-4) 0 0;
  padding: var(--s-4) var(--s-5);
  border-radius: 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}
.bd-contact__link .ltr {
  overflow-wrap: anywhere;
}
.bd-contact__label {
  font-size: var(--t-xs);
  color: var(--c-muted);
  margin-block-end: var(--s-1);
}
.bd-contact dd {
  margin: 0;
}
.bd-contact__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 36px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
}
.bd-contact__link:hover {
  color: var(--c-green);
}
.bd-contact__i {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  color: var(--c-green);
}

.bd-modal__shot {
  margin: 55px 0px 0px;
}
.bd-modal__shot .bd-shot {
  aspect-ratio: 1 / 1;
  border-radius: var(--bd-r-lg);
}

/* ---- profile body ------------------------------------------------------- */
/* Holds only the dated timelines; the biography and the expertise rail live in
   the header above. The rule belongs here rather than under .bd-modal__top so
   a profile with no timeline does not end on a stray line. */
.bd-modal__body {
  margin-block-start: clamp(24px, 3vw, 36px);
  padding-block-start: clamp(24px, 3vw, 36px);
  border-block-start: 1px solid var(--c-line);
}
.bd-block + .bd-block {
  margin-block-start: clamp(28px, 3.4vw, var(--s-12));
}
.bd-block--cont {
  margin-block-start: var(--s-5) !important;
}
.bd-block__title {
  margin: 0 0 var(--s-5);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-ink);
  padding-inline-start: var(--s-4);
  border-inline-start: 3px solid var(--c-green);
  line-height: var(--lh-snug);
}
/* Section headings inside the body are centred over a rule, matching the page
   heading — the reference uses that treatment for "سوابق کاری". */
.bd-block__title--mid {
  padding-inline-start: 0;
  border-inline-start: 0;
  text-align: center;
  margin-block-end: var(--s-8);
}
.bd-block__title--mid::after {
  content: "";
  display: block;
  inline-size: 42px;
  block-size: 3px;
  margin: var(--s-3) auto 0;
  border-radius: 2px;
  background: var(--c-green);
}

/* Justified like the history page: the 78ch cap is what stops a wide modal
   opening rivers in the text. */
.bd-prose p,
.bd-note {
  margin: 0 0 var(--s-4);
  /* max-inline-size: 78ch; */
  line-height: var(--lh-body);
  color: var(--c-body);
  text-align: justify;
  text-align-last: start;
}
.bd-prose p:last-child,
.bd-note:last-child {
  margin-block-end: 0;
}
.bd-note {
  margin-block-start: var(--s-5);
}
/* The closing sentence under a timeline runs the panel's full width. */
.bd-note--wide {
  max-inline-size: none;
  margin-block-start: var(--s-8);
  text-align: center;
  text-align-last: center;
  color: var(--c-muted);
  font-size: var(--t-sm);
}

/* ---- career / awards timeline ------------------------------------------ */
/* Horizontal track: dots ride a single rule, the year sits under its dot and
   the entry under that. Redrawn entirely below 760px — see the media query. */
.bd-tl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(12px, 1.6vw, 24px);
}
.bd-tl::before {
  content: "";
  position: absolute;
  inset-inline: 6%;
  inset-block-start: 6px;
  block-size: 1px;
  background: var(--c-line);
}
.bd-tl__i {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
  text-align: center;
  padding-block-start: var(--s-6);
}
.bd-tl__dot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-green);
}
.bd-tl__y {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-muted);
}
.bd-tl__t {
  display: block;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  font-weight: 500;
}

.bd-modal__foot {
  margin-block-start: clamp(28px, 3.4vw, var(--s-12));
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--c-line);
  display: flex;
  justify-content: center;
}
.bd-btn--close {
  background: var(--bd-deep-2);
  padding-inline: 46px;
}

/* ---- background scroll lock -------------------------------------------- */
/* Set on <html> by board.js. --bd-sbw is the width the scrollbar occupied, put
   back as padding so the sticky header does not jump sideways when it goes. */
html.bd-lock {
  overflow: hidden;
  padding-inline-end: var(--bd-sbw, 0px);
}

/* ---- no-JS fallback ----------------------------------------------------- */
/* Without board.js the triggers are plain in-page links, so the targeted
   profile is un-hidden in normal flow. With the script running the click is
   intercepted, no hash is set, and this never matches. */
.bd-modal:not([open]):target {
  display: block;
  position: static;
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  margin-block-end: var(--s-10);
  padding-inline: 24px;
}
.bd-modal:not([open]):target .bd-modal__panel {
  opacity: 1;
  transform: none;
  box-shadow: none;
  border: 1px solid var(--c-line);
}
.bd-modal:not([open]):target .bd-modal__x {
  display: none;
}

/* ==========================================================================
   RESPONSIVE
   ==========================================================================
   Breakpoints are layout decisions, not device names:
      980  the split hero runs out of room                  → stacked hero
      760  two cards side by side stop working              → one column, and
            the card, the dialog header, the expertise row and the timeline
            each switch to a composition built for that width
      480  the card's side-by-side text/frame gets too tight → stacked card
   ========================================================================== */

@media (max-width: 980px) {
  .bd-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 6vw, 56px);
  }
  .bd-hero__text {
    max-inline-size: 62ch;
  }
  .bd-hero__dots {
    inset-inline-end: 0;
  }
  .bd-shot--hero {
    aspect-ratio: 16 / 10;
  }
  .bd-card--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  }
}

@media (max-width: 760px) {
  .bd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bd-card,
  .bd-card--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  }
  .bd-card__media .bd-shot,
  .bd-card--wide .bd-card__media .bd-shot {
    max-block-size: 260px;
  }

  /* One block per row — two columns of expertise at this width give each one a
     three-word measure. */
  .bd-rails {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  /* Stacked profile header — the portrait leads at a readable size instead of
     being squeezed into a column that no longer exists. */
  .bd-modal__top {
    grid-template-columns: minmax(0, 1fr);
    padding-inline-end: 0;
    padding-block-start: 44px;
  }
  .bd-modal__shot {
    order: -1;
    max-inline-size: 240px;
  }
  .bd-modal__scroll {
    padding: var(--s-6) var(--s-5);
  }
  .bd-modal[open] {
    padding: 10px;
    align-items: flex-end;
  }
  .bd-modal__panel {
    max-block-size: 94vh;
  }
  .bd-modal__x {
    inset-block-start: 10px;
    inset-inline-start: 10px;
  }
  .bd-prose p,
  .bd-note {
    text-align: start;
  }
  .bd-btn--close {
    inline-size: 100%;
    justify-content: center;
  }

  /* The timeline is rebuilt, not compressed: the horizontal track cannot give
     six entries a readable column at this width, so it becomes a stacked list
     with the year as a chip on an accent edge. */
  .bd-tl {
    display: grid;
    gap: var(--s-5);
  }
  .bd-tl::before {
    display: none;
  }
  .bd-tl__i {
    text-align: start;
    padding-block-start: 0;
    padding-inline-start: var(--s-5);
    border-inline-start: 2px solid var(--c-green-soft);
  }
  .bd-tl__dot {
    inset-block-start: 5px;
    inset-inline-start: -2px;
    transform: translateX(-50%);
    inline-size: 10px;
    block-size: 10px;
    border-width: 2px;
  }
  [dir="rtl"] .bd-tl__dot {
    transform: translateX(50%);
  }
  .bd-tl__y {
    display: inline-block;
    margin-block-end: var(--s-2);
    padding: 2px 9px;
    border-radius: 2px;
    background: var(--c-green-soft);
    color: var(--c-ink);
  }
}

@media (max-width: 480px) {
  /* Below this the frame and the text cannot share a row without one of them
     becoming a sliver. */
  .bd-card,
  .bd-card--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .bd-card__media {
    order: -1;
    max-inline-size: 190px;
  }
  .bd-card__media .bd-shot,
  .bd-card--wide .bd-card__media .bd-shot {
    max-block-size: none;
  }
  .bd-card__text {
    gap: var(--s-4);
  }
  .bd-card__excerpt,
  .bd-card--wide .bd-card__excerpt {
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
  .bd-hero__cap {
    inset-inline-start: 10px;
    padding-inline: var(--s-3) var(--s-4);
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bd-shot img,
  .bd-arw,
  .bd-plus,
  .bd-btn,
  .bd-card,
  .bd-card__name,
  .bd-modal__panel,
  .bd-modal::backdrop {
    transition: none;
  }
  .bd-card:hover,
  .bd-card:focus-within {
    transform: none;
  }
  .bd-card:hover .bd-shot img {
    transform: none;
  }
  .bd-plus:hover,
  .bd-plus:focus-visible {
    transform: none;
  }
  .bd-modal__panel {
    opacity: 1;
    transform: none;
  }
  .bd-modal::backdrop {
    opacity: 1;
  }
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.bd-empty {
  padding-block: clamp(56px, 8vw, 120px);
}
.bd-empty p {
  margin-block-start: var(--s-5);
  color: var(--c-muted);
}

/* ---- justified body copy · centred blocks keep their centring ------------
   The `:where(p, blockquote, dd)` rule in hitco.css declares alignment ON the
   paragraph, and a direct declaration outranks the `text-align: center` these
   containers pass DOWN to it by inheritance. Re-inheriting restores them.
   Add a centred container that holds a paragraph and it belongs in this list. */
.bd-sec :where(p, blockquote, dd),
.bd-tl__i :where(p, blockquote, dd) {
  text-align: inherit;
}