/* ---------- Case study: Sandblast Razavi ----------
   Loaded only by /projects/sandblast-razavi/, after blog.css. This project was a
   whole job for a client, from the first meeting to support after launch, so its
   page needs a few pieces the other case studies never did: facts and numbers, a
   timeline, a brand board, the film, and a before/after you can drag.
   Everything is built from the tokens and hairlines in style.css and blog.css.
   The client's own colours appear only inside the client's work (the swatches,
   the logo panel, the slider), never on this site's links and buttons. */

/* The lead buttons sat on an inline style in the older case studies. */
.cta__row--lead{ justify-content: flex-start; margin-top: 1.8rem; }

/* ---------- Sections and widths ----------
   Text keeps the 40rem measure of .prose; the exhibits between paragraphs take
   the 52rem of the lead picture, because they are pictures of whole screens. */
.case-sec{ margin-top: clamp(3.5rem, 9vh, 6rem); }
.case-sec > .prose{ padding-bottom: 0; }
.case-sec > * + *{ margin-top: 2.2rem; }
.case-sec .prose > h2:first-child{ margin-top: 0; }
.case-wide{ max-width: 52rem; }
/* A <figure> keeps the browser's 40px side margins unless told otherwise; here every
   picture lines up with the text edge, like the galleries around it. */
.article .figure{ margin-inline: 0; }
.figure picture{ display: block; }

/* The section number above a heading. --muted rather than --faint (as on the
   other pages' eyebrows): this page is long, and the numbers are how a reader
   finds a section again, so they should pass AA like any other text. */
.case-num, .article .eyebrow__num{ color: var(--muted); }
.case-num{
  display: block;
  margin-bottom: .5rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.case-cap{
  margin-top: .9rem;
  font-size: .8rem;
  line-height: 1.75;
  color: var(--muted);
}
.case-cap a, .case-facts a{ color: var(--accent); border-bottom: 1px solid var(--accent-soft); }

/* ---------- At a glance ---------- */
.case-facts{
  margin: 2.8rem 0 0;
  max-width: 52rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}
.case-facts > div{ padding: 1.2rem 1.3rem 1.3rem; box-shadow: 0 0 0 1px var(--hairline); }
.case-facts dt{ font-size: .74rem; color: var(--muted); }
.case-facts dd{ margin: .45rem 0 0; font-size: .88rem; line-height: 1.8; color: var(--text); }

/* The number reads first on screen, the label first for a screen reader:
   the markup keeps term → value, and the column is drawn the other way up. */
.stats{
  margin: 1px 0 0;
  max-width: 52rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}
.stats > div{
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .4rem;
  padding: 1.5rem 1.3rem 1.4rem;
  box-shadow: 0 0 0 1px var(--hairline);
}
.stats dd{ margin: 0; font-size: .9rem; color: var(--muted); }
.stats__num{
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
}
.stats dt{ font-size: .8rem; line-height: 1.75; color: var(--muted); }
.stats > div.is-visible:nth-child(3n+2){ transition-delay: .08s; }
.stats > div.is-visible:nth-child(3n){ transition-delay: .16s; }

/* ---------- Timeline ----------
   One hairline down the side, a small square for each step (the same square as
   the list bullets in .prose). The launch is the one blue step; the deadline
   after it stays hollow, and the gap between the two says "early" on its own. */
.timeline{
  --date: 7.5rem;
  position: relative;
  max-width: 52rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}
.timeline::before{
  content: "";
  position: absolute;
  inset-block: 1.3rem 1.3rem;
  inset-inline-start: var(--date);
  width: 1px;
  background: var(--border);
}
.timeline__item{
  position: relative;
  display: grid;
  grid-template-columns: var(--date) minmax(0, 1fr);
  padding-block: .85rem;
}
.timeline__item::before{
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--date) - 3px);
  top: 1.45rem;
  width: 7px;
  height: 7px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.timeline time{
  padding-inline-end: 1.4rem;
  padding-top: .2rem;
  font-size: .82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.timeline__item > div{ padding-inline-start: 1.6rem; }
.timeline__title{
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}
.timeline__item p{ margin-top: .2rem; font-size: .88rem; line-height: 1.85; color: var(--muted); }
.timeline__item--key::before{ background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.timeline__item--key time{ color: var(--accent); }
.timeline__item--ghost::before{ box-shadow: 0 0 0 1px var(--faint); }
.timeline__item--ghost .timeline__title{ color: var(--muted); }

/* ---------- Galleries ---------- */
.gallery{ display: grid; gap: 1rem; max-width: 52rem; }
.gallery figure{ margin: 0; }
.gallery img{ width: 100%; height: auto; border: 1px solid var(--hairline); background: var(--bg); }
.gallery figcaption{ margin-top: .7rem; font-size: .8rem; color: var(--muted); }
.gallery--2, .gallery--cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The résumé: the cover large, the other four pages beside it. */
.gallery--doc{ grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.gallery--doc > :first-child{ grid-column: span 2; grid-row: span 2; }

/* Bright pictures (white résumé pages, screenshots) rest a little dimmed and come
   up on hover, like the project cards; on a touch screen they stay at full. */
@media (hover: hover){
  .gallery img, .feature img{ opacity: .84; transition: opacity .6s var(--ease); }
  .gallery figure:hover img, .feature:hover img{ opacity: 1; }
}

/* ---------- Brand board ---------- */
.brand{
  --client-orange: #FF6A1A;
  --client-graphite: #15181C;
  --client-steel: #8C949E;
  --client-paper: #F1F2F4;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1px;
}
.brand > *{ box-shadow: 0 0 0 1px var(--hairline); }
.brand__logo{
  display: grid;
  place-items: center;
  min-height: 15rem;
  padding: 2.5rem 2rem;
  background: var(--client-graphite);
}
.brand__logo img{ width: 100%; max-width: 26rem; height: auto; }
.brand__marks{
  margin: 0;
  padding: 1.6rem 1.2rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 1rem;
  text-align: center;
  font-size: .76rem;
  color: var(--muted);
}
.brand__mark{
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: .6rem;
  background: var(--client-graphite);
}
.brand__mark img{ width: 62%; height: auto; }
.brand__marks li:nth-child(n+2) .brand__mark img{ width: 100%; }
.brand__swatches{
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}
.swatch{ display: grid; gap: .15rem; padding: 0 0 1rem; box-shadow: 0 0 0 1px var(--hairline); }
.swatch__chip{ height: 4.2rem; margin-bottom: .75rem; }
.swatch__name, .swatch__hex{ padding-inline: 1rem; }
.swatch__name{ font-size: .86rem; color: var(--text); }
.swatch__hex{
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;   /* Latin only — see the note on .eyebrow */
  color: var(--muted);
  text-align: end;
}
.swatch--orange .swatch__chip{ background: var(--client-orange); }
.swatch--graphite .swatch__chip{ background: var(--client-graphite); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.swatch--steel .swatch__chip{ background: var(--client-steel); }
.swatch--paper .swatch__chip{ background: var(--client-paper); }
.brand__type{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem 2rem 1.8rem;
  background: var(--client-graphite);
}
.brand__type figure{ margin: 0; }
.brand__type img{ width: 100%; height: auto; }
.brand__type figcaption, .brand__body{ font-size: .8rem; color: var(--client-steel); }
.brand__type figcaption{ margin-top: .9rem; }
.brand__body{ font-size: 1.02rem; line-height: 1.9; color: var(--client-paper); }

/* ---------- What the site is made of ---------- */
.features{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}
.feature{ padding-bottom: 1.5rem; box-shadow: 0 0 0 1px var(--hairline); }
.feature img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.feature h3{
  margin: 1.2rem 1.4rem 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}
.feature p{ margin: .5rem 1.4rem 0; font-size: .88rem; line-height: 1.85; color: var(--muted); }

/* ---------- The film ----------
   Two recordings of the live first screen, one wide and one phone-shaped; only the
   one this screen shows is ever played or fetched. */
.film{ margin: 0; }
.film__video{
  display: block;
  width: 100%;
  height: auto;
  background: #15181C;
  border: 1px solid var(--hairline);
}
.film__video--tall{ display: none; }
.film__cap{
  margin-top: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8rem;
  line-height: 1.75;
  color: var(--muted);
}
.film__toggle{
  flex: none;
  min-height: 44px;
  padding: 0 1.2rem;
  font-size: .82rem;
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow .5s var(--ease);
}
.film__toggle:hover{ box-shadow: 0 0 0 1px var(--border-strong); }
.film__toggle[hidden]{ display: none; }

/* ---------- Before / after ----------
   The same component as on the client's site. «قبل» is on the right and «بعد» on
   the left; the range runs left → right in every browser (dir="ltr"), so the
   line, the clip and the tags use physical left/right on purpose — the one place
   on this site that does not use logical properties.
   Without JavaScript only the finished beam («بعد») shows, with no line to drag. */
.ba-fig{ margin: 0; }
.ba{
  --client-orange: #FF6A1A;
  position: relative;
  aspect-ratio: 1116 / 653;
  overflow: hidden;
  background: #15181C;
  border: 1px solid var(--hairline);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ba__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba--live .ba__after{ clip-path: inset(0 50% 0 0); }
.ba__line{
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--client-orange);
  pointer-events: none;
}
.ba__knob{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.2rem;
  height: 3.2rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--client-orange);
  color: #15181C;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 .45rem rgba(255,106,26,.2);
}
.ba__knob svg{ width: 1.5rem; height: 1.5rem; }
.ba__tag{
  position: absolute;
  bottom: 1rem;
  padding: .25rem .8rem;
  background: rgba(15,17,20,.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
  font-size: .82rem;
  font-weight: 400;
  color: #edeef2;
  pointer-events: none;
}
.ba__tag--before{ right: 1rem; }
.ba__tag--after{ left: 1rem; color: var(--client-orange); }
.ba:not(.ba--live) .ba__line,
.ba:not(.ba--live) .ba__tag--before{ display: none; }
.ba__range{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
/* White, not the site's blue ring: a 1px blue line disappears on a photo. */
.ba:has(.ba__range:focus-visible) .ba__knob{ outline: 2px solid #fff; outline-offset: 4px; }
.ba-fig figcaption{ margin-top: .9rem; font-size: .8rem; line-height: 1.75; color: var(--muted); }

/* ---------- The package and the commitments ---------- */
.package{
  padding: 1.6rem 1.8rem 1.7rem;
  box-shadow: 0 0 0 1px var(--border);
  background: rgba(255,255,255,.02);
}
.package__label{ font-size: .74rem; color: var(--muted); }
.package__name{ margin-top: .3rem; font-size: 1.5rem; font-weight: 300; line-height: 1.4; color: var(--text); }
.prose .package ul{ margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.6rem; }
.prose .package li + li{ margin-top: 0; }

.commitments{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}
.commitments li{ padding: 1.6rem 1.6rem 1.7rem; box-shadow: 0 0 0 1px var(--hairline); }
.commitments h3{
  margin: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
}
.commitments h3::before{
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.commitments p{ margin-top: .6rem; font-size: .88rem; line-height: 1.9; color: var(--muted); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .stats > div.is-visible{ transition-delay: 0s !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 720px){
  .case-facts{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div{ padding: 1.2rem 1rem 1.1rem; }
  .stats > div.is-visible{ transition-delay: 0s; }

  .timeline{ --date: 0rem; }
  .timeline::before{ inset-inline-start: 3px; }
  .timeline__item{ grid-template-columns: minmax(0, 1fr); padding-inline-start: 1.6rem; }
  .timeline__item::before{ inset-inline-start: 0; top: 1.25rem; }
  .timeline time{ padding: 0; }
  .timeline__item > div{ padding-inline-start: 0; }

  .gallery--2{ grid-template-columns: 1fr; }
  .gallery--cards{ gap: .6rem; }
  .gallery--doc{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .gallery--doc > :first-child{ grid-row: auto; }

  .brand{ grid-template-columns: 1fr; }
  .brand__logo{ min-height: 0; padding: 2.2rem 1.4rem; }
  .brand__swatches{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand__type{ grid-template-columns: 1fr; gap: 1.2rem; padding: 1.6rem 1.4rem; }

  .features{ grid-template-columns: 1fr; }
  .feature h3, .feature p{ margin-inline: 1.1rem; }

  .film__video--wide{ display: none; }
  .film__video--tall{ display: block; max-width: 280px; margin-inline: auto; border-radius: 18px; }

  .ba{ aspect-ratio: 4 / 3; }
  .ba__knob{ width: 2.9rem; height: 2.9rem; }

  .prose .package ul{ grid-template-columns: 1fr; }
  .commitments{ grid-template-columns: 1fr; }
  .commitments li{ padding: 1.4rem 1.2rem 1.5rem; }
}