/* ==========================================================================
   History — /about/history. Everything scoped under .hist.

   Layout: ink hero + stat strip → sticky era rail beside a decade-grouped
   timeline → CTA.

   The timeline spine sits on the INLINE-START edge of the track, so it needs
   no [dir="rtl"] override — the spine, the dots and the rail all follow the
   writing direction. See templates/history.php.

   NOTE on tokens: the spacing scale is --s-1..6, 8, 10, 12, 16, 20, 24, 32.
   There is no --s-7/9/14. A missing custom property makes the WHOLE
   declaration invalid and it silently vanishes.
   ========================================================================== */

.hist {
  background: var(--c-paper);
  /* Distance from the track's inline-start edge to the centre of the spine.
     The dot offsets and the card indent are both derived from it, so the
     whole timeline re-aligns from this one number. */
  --spine: 22px;
}

/* ==================================================================== HERO */
/* Light, not ink: uploads/poster/posterbuilding.webp is a cut-out of the HQ on
   a WHITE ground, so it cannot sit behind text as a photograph would. The hero
   ground is therefore near-white and the building bleeds off the inline-end
   edge, which is exactly how the artwork is composed. */
.hist-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Height tracks viewport WIDTH, not a fixed px: the art is full-bleed and
     1.874:1, so at width W it wants W/1.874 of height. Tracking width keeps
     the `cover` crop proportionally small (~15%) at every desktop size
     instead of guillotining the roof on wide screens. */
  min-block-size: clamp(420px, 44vw, 660px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(15, 127, 184, .09), transparent 55%),
    radial-gradient(ellipse at 5% 95%, rgba(52, 155, 71, .07), transparent 50%),
    linear-gradient(180deg, #fff 0%, var(--c-paper) 100%);
  border-block-end: 1px solid var(--c-line);
  padding-block: var(--s-16);
}

/* Full-bleed across the hero. The source is 1.87:1 and the hero is much wider
   than that, so `cover` crops vertically — object-position keeps the crop on
   the building rather than the empty sky above it. */
.hist-hero__art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;
  /* cover, so the artwork spans the full hero width. contain would letterbox
     it and leave ~30% of the hero empty. */
  object-fit: cover;
  /* Biased above centre: the building's mass and signage are in the upper
     two-thirds; the lower strip is planting that can be lost to the crop. */
  object-position: center 34%;
  pointer-events: none;
}

/* Legibility scrim, anchored to the PHYSICAL left in both locales — not
   inline-start. The artwork puts the building on the right and its clear space
   on the left, so the text lives on the left even in RTL (see
   .hist-hero__text below) and the scrim has to clear the same lane. This is
   the rare case where a logical property would be the wrong tool: the
   constraint comes from the image, which does not mirror. */
.hist-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .95) 40%,
    rgba(255, 255, 255, .70) 60%,
    rgba(255, 255, 255, 0) 82%
  );
  pointer-events: none;
}

.hist-hero__inner {
  position: relative;
  z-index: 2;
  inline-size: 100%;
}
.hist-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-inline-size: min(54%, 620px);
}
/* The text sits on the PHYSICAL left in Persian too (user requirement): the
   building occupies the right of the artwork and cannot be mirrored — the
   HITCO signage on its facade would read backwards. margin-inline-start:auto
   resolves to margin-right:auto under RTL, pushing the block off the right
   edge and over to the left. The text inside stays right-to-left. */
[dir="rtl"] .hist-hero__text {
  margin-inline-start: auto;
}
.hist-hero__title {
  margin: 0;
  color: var(--c-ink);
}
.hist-hero__lede {
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--c-body);
  text-align: justify;
}

/* The span of the story, as a graphic mark. */
.hist-hero__range {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
  font-size: var(--t-lg);
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hist-hero__rangebar {
  inline-size: 56px;
  block-size: 1px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-green));
}

/* ==================================================== RAIL + TRACK LAYOUT */
.hist-body {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--s-16);
  align-items: start;
  padding-block: var(--s-20);
}

/* ---------------------------------------------------------------- the rail */
.hist-rail {
  position: sticky;
  /* Clears the fixed header + topbar, matching the products filter aside. */
  top: calc(var(--header-h) + var(--topbar-h) + 24px);
}
.hist-rail__label {
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
[dir="rtl"] .hist-rail__label {
  letter-spacing: 0;
}
.hist-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* One continuous hairline behind the whole rail; each link paints its own
     accent segment over it on the inline-start edge. */
  border-inline-start: 2px solid var(--c-line);
}
.hist-rail__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.hist-rail__link:hover {
  color: var(--c-primary);
  border-inline-start-color: var(--c-line-strong);
}
.hist-rail__link.is-current {
  color: var(--c-ink);
  font-weight: 700;
  border-inline-start-color: var(--c-primary);
  background: linear-gradient(
    to var(--_dir, right),
    var(--c-primary-soft),
    transparent 85%
  );
}
[dir="rtl"] .hist-rail__link.is-current {
  --_dir: left;
}
.hist-rail__n {
  font-size: var(--t-xs);
  color: var(--c-muted);
  background: var(--c-wash);
  border-radius: 999px;
  padding: 0px 9px;
  flex: none;
}
.hist-rail__link.is-current .hist-rail__n {
  background: var(--c-primary);
  color: #fff;
}

/* --------------------------------------------------------------- the track */
.hist-track {
  position: relative;
  padding-inline-start: calc(var(--spine) + var(--s-8));
}

/* Unbroken spine behind every era, so the headers do not chop it up. */
.hist-track__spine {
  position: absolute;
  inset-block: 6px 6px;
  inset-inline-start: calc(var(--spine) - 1px);
  inline-size: 2px;
  background: var(--c-line);
}
/* Progress fill. --hist-progress is set by history.js; with no JS it stays 0
   and the fill is simply invisible. */
.hist-track__fill {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: calc(var(--hist-progress, 0) * 100%);
  background: linear-gradient(180deg, var(--c-green), var(--c-primary));
}

/* ------------------------------------------------------------- era heading */
.hist-era + .hist-era {
  margin-block-start: var(--s-16);
}
.hist-era__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
  /* Pull the heading back over the spine so the decade label reads as a
     station on the line rather than as another card. */
  margin-inline-start: calc((var(--spine) + var(--s-8)) * -0.5);
  padding-inline-start: calc(var(--spine) + var(--s-8));
  position: relative;
}
.hist-era__head::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--spine) - -8px);
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: -8px;
  border-radius: 3px;
  background: var(--c-ink);
  transform: rotate(45deg);
}
.hist-era__title {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .hist-era__title {
  letter-spacing: 0;
}
.hist-era__count {
  font-size: var(--t-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

.hist-era__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ------------------------------------------------------------- milestones */
.hist-ms {
  position: relative;
}
.hist-ms__dot {
  position: absolute;
  inset-block-start: 26px;
  /* Half the dot's 16px outer box (10px circle + 3px ring each side). */
  inset-inline-start: calc((var(--s-8) + 8px) * -1);
   inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-line-strong);
  z-index: 1;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hist-ms:hover .hist-ms__dot {
  border-color: var(--c-primary);
  transform: scale(1.15);
}

.hist-card {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding: var(--s-5) var(--s-6) var(--s-6);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* Accent edge, revealed on hover. scaleY from the top rather than a width
   change so it never reflows the card. */
.hist-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-green));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-2) var(--ease);
}
.hist-card:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-2);
}
.hist-card:hover::before {
  transform: scaleY(1);
}

.hist-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--c-line);
}
/* Year pill — the card's actual heading. */
.hist-card__year {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-primary-deep);
  background: var(--c-primary-soft);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hist-card__alt {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ghost index. Sits at the far edge of the header row and is decorative only
   (aria-hidden in the markup). */
.hist-card__index {
  margin-inline-start: auto;
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--c-line);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.hist-card__main {
  display: grid;
  gap: var(--s-5);
}
.hist-card--withlogo .hist-card__main {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.hist-card__body {
  color: var(--c-body);
  line-height: var(--lh-body);
  min-inline-size: 0;
  /* The track is ~900px wide at --container, which is a ~110-character line —
     well past comfortable. Cap the measure rather than narrowing the card:
     the card still holds the grid, the prose stays readable. */
  max-inline-size: 76ch;
  /* Justified body copy (user requirement). Persian sets well justified; the
     capped measure above is what keeps it from opening rivers. Last line stays
     ragged — text-align-last:justify would stretch a three-word closing line
     across the full column. */
  text-align: justify;
  text-align-last: start;
}
.hist-card__body p {
  margin: 0;
}
.hist-card__body p + p {
  margin-block-start: var(--s-3);
}
.hist-card__body :is(ul, ol) {
  margin: var(--s-3) 0 0;
  padding-inline-start: var(--s-5);
}

/* ------------------------------------------------------------- portraits */
/* Two milestones carry a person rather than a mark (see history_portraits()).
   These are the founder and the current owner, so the card is treated as a
   feature: a real portrait with a named caption, not a logo plate. */
.hist-card--withperson .hist-card__main {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-6);
}
.hist-card--feature {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(15, 127, 184, .05), transparent 60%),
    var(--c-surface);
  border-color: var(--c-line-strong);
}
/* The feature cards earn a permanent accent edge instead of a hover-only one. */
.hist-card--feature::before {
  transform: scaleY(1);
}
.hist-ms__dot--person {
  border-color: var(--c-primary);
  background: var(--c-primary);
}

.hist-card__person {
  margin: 0;
  inline-size: 176px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hist-card__portrait {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--c-wash);
  border: 1px solid var(--c-line);
}
.hist-card__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Per-photo focal point from history_portraits() — jamshid-babaie.png is a
     square headshot, ali-babaie.jpg a 3:2 office shot with the subject right
     of centre, so a single shared value would crop one of them badly. */
  object-position: var(--focus, 50% 30%);
  filter: saturate(.92);
  transition: filter var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.hist-card:hover .hist-card__portrait img {
  filter: none;
  transform: scale(1.03);
}
.hist-card__person figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: var(--lh-snug);
}
.hist-card__person figcaption b {
  font-size: var(--t-sm);
  color: var(--c-ink);
  font-weight: 700;
}
.hist-card__person figcaption span {
  font-size: var(--t-xs);
  color: var(--c-primary);
  font-weight: 500;
}

/* Company logos are 1:1 square canvases, so this is a padded plate with
   contain — cover would crop the mark. The minmax(0,1fr) row is required:
   with an auto row the track floors at the image's 300px min-content height
   and block-size:100% never resolves. */
.hist-card__logo {
  margin: 0;
  inline-size: 104px;
  block-size: 104px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-paper);
}
.hist-card__logo img {
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .8;
  transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.hist-card:hover .hist-card__logo img {
  filter: none;
  opacity: 1;
}

/* Photographs (none in the data yet — uploads/history/ is empty) fill their
   frame instead of sitting on a plate. */
.hist-card__photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-wash);
}
.hist-card__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hist-empty {
  padding-block: var(--s-20);
  text-align: center;
  color: var(--c-muted);
}

/* ===================================================================== CTA */
.hist-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  margin-block-end: var(--sec-y);
  padding: var(--s-10) var(--s-8);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 88% 0%, rgba(52, 155, 71, .10), transparent 55%),
    linear-gradient(135deg, var(--c-wash) 0%, var(--c-surface) 100%);
}
[dir="rtl"] .hist-cta {
  background:
    radial-gradient(circle at 12% 0%, rgba(52, 155, 71, .10), transparent 55%),
    linear-gradient(225deg, var(--c-wash) 0%, var(--c-surface) 100%);
}
.hist-cta__text h2 {
  margin: 0;
}
.hist-cta__text p {
  margin: var(--s-2) 0 0;
  color: var(--c-muted);
}
.hist-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ============================================================= RESPONSIVE */
@media (max-width: 1100px) {
  .hist-body {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: var(--s-10);
  }
}

/* Below this the sticky side rail no longer fits beside the track, so it
   becomes a horizontal scroller pinned under the site header. */
@media (max-width: 900px) {
  /* The building stops being a side element and becomes a faint ground behind
     the text — at this width there is no room to sit beside a 56% text column
     without the two colliding. */
  .hist-hero {
    min-block-size: 0;
    padding-block: var(--s-12);
  }
  /* The text needs the full width here, so the scrim can no longer clear a
     lane for it — drop the artwork to a faint ground instead. */
  .hist-hero__art {
    opacity: .16;
  }
  .hist-hero::after {
    background: rgba(255, 255, 255, .55);
  }
  .hist-hero__text {
    max-inline-size: none;
  }

  .hist-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: var(--s-12);
  }
  .hist-rail {
    position: sticky;
    top: calc(var(--header-h) - 1px);
    z-index: 2;
    margin-block-end: var(--s-10);
    padding-block: var(--s-3);
    background: var(--c-paper);
    border-block-end: 1px solid var(--c-line);
  }
  .hist-rail__label {
    display: none;
  }
  .hist-rail__list {
    flex-direction: row;
    gap: var(--s-2);
    border-inline-start: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hist-rail__list::-webkit-scrollbar {
    display: none;
  }
  .hist-rail__link {
    margin-inline-start: 0;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    padding: var(--s-2) var(--s-4);
    white-space: nowrap;
    background: var(--c-surface);
  }
  .hist-rail__link.is-current {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
  }
  .hist-rail__link.is-current .hist-rail__n {
    background: rgba(255, 255, 255, .22);
  }
  /* Anchor jumps must clear both the header and the now-sticky chip rail. */
  .hist-era {
    scroll-margin-top: calc(var(--header-h) + 76px);
  }
}

@media (max-width: 680px) {
  .hist {
    --spine: 7px;
  }
  .hist-track {
    padding-inline-start: var(--s-6);
  }
  .hist-ms__dot {
    inset-block-start: 22px;
    inset-inline-start: calc((var(--s-6) - var(--spine) + 8px) * -1);
  }
  .hist-era__head {
    margin-inline-start: calc(var(--s-6) * -1);
    padding-inline-start: var(--s-6);
    gap: var(--s-3);
  }
  .hist-era__head::before {
    inline-size: 12px;
    block-size: 12px;
    margin-block-start: -6px;
    inset-inline-start: calc(var(--spine) - 5px);
  }
  .hist-era__title {
    font-size: var(--t-lg);
  }
  .hist-card {
    padding: var(--s-4);
  }
  .hist-card__index {
    font-size: var(--t-lg);
  }
  .hist-card--withlogo .hist-card__main,
  .hist-card--withperson .hist-card__main {
    grid-template-columns: minmax(0, 1fr);
  }
  .hist-card__logo {
    inline-size: 84px;
    block-size: 84px;
    justify-self: start;
  }
  /* Stacked, the portrait reads better wide than as a small square. */
  .hist-card__person {
    inline-size: 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
  }
  .hist-card__portrait {
    inline-size: 96px;
    flex: none;
  }
  .hist-cta {
    padding: var(--s-6);
  }
}

/* ---- 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. */
.hist-empty :where(p, blockquote, dd) {
  text-align: inherit;
}