/* Shirazi — about. Mechanics 2-quiet (photo band + claim) → 4 (cream editorial) →
   3 on cream (calligraphy spread) → promise row → 6 (sage inset band) → 7 (footer, chrome).
   Adds only; consumes base.css tokens + primitives (.wrap .eyebrow .lede .ghost, h1/h2). */

/* ---- caps link with a square arrow box (home's .arrow shape, about-scoped) ---- */
.ab-arrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--eyebrow);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
}

.ab-arrow .ab-box {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  background: var(--ink);
  color: var(--cream);
  font-size: .8rem;
  line-height: 1;
  transition: transform .45s var(--ease);
}

.ab-arrow:hover .ab-box { transform: translateX(5px); }

/* ---- 1 · quiet hero: photo band, claim left of centre ---- */
.ab-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(23rem, 60vh, 36rem);
  padding-block: calc(var(--hdr-h) + 4rem) 3.5rem;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}

.ab-hero > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

.ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 13, 15, .68) 0%, rgba(10, 13, 15, .22) 58%, rgba(10, 13, 15, .4) 100%),
    linear-gradient(180deg, rgba(10, 13, 15, .52) 0%, rgba(10, 13, 15, 0) 38%, rgba(10, 13, 15, .5) 100%);
}

.ab-hero-copy {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
}

.ab-hero-copy > * { grid-column: 4 / 13; }
.ab-hero-copy .eyebrow { margin-bottom: 1.7rem; opacity: .8; }

/* ---- 2 · cream editorial (mech 4): eyebrow far left, headline offset right ---- */
.ab-ed {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
  padding-block: var(--sec) calc(var(--sec) * .8);
}

.ab-ed-brow { grid-column: 1 / 4; padding-top: .5rem; }

.ab-ed-head {
  grid-column: 5 / 13;
  font-size: var(--display-sm);
}

.ab-ed-body {
  grid-column: 5 / 9;
  max-width: 21rem;
  margin-top: clamp(2.5rem, 1.5rem + 2.6vw, 4.5rem);
}

.ab-ed-body p + p { margin-top: 1.15em; }
.ab-ed-body .ab-arrow { margin-top: 2.75rem; }

/* ---- 3 · calligraphy spread (mech 3's rhythm, on cream: the gap is the point) ---- */
.ab-panel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
  padding-bottom: var(--sec);
}

.ab-panel-fig { grid-column: 2 / 5; }

.ab-panel-fig img {
  width: 100%;
  height: auto;
}

.ab-panel-copy {
  grid-column: 6 / 12;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.ab-panel-copy .eyebrow { margin-bottom: 1.8rem; }
.ab-panel-head { font-size: var(--display-sm); }
.ab-panel-foot { grid-row: 3; max-width: 24rem; }
.ab-panel-foot p + p { margin-top: 1.15em; }

/* ---- 4 · the promise: three caps blocks under a hairline ---- */
.ab-values {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
  padding-bottom: var(--sec);
}

.ab-values-brow { grid-column: 1 / 4; padding-top: .5rem; }

.ab-values-row {
  grid-column: 5 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.5rem;
}

.ab-values-row li {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}

.ab-values-row h3 {
  margin-bottom: .95rem;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .16em;
}

.ab-values-row p {
  max-width: 18rem;
  font-size: .875rem;
  line-height: 1.6;
  opacity: .78;
}

/* ---- 5 · reservation band + sage inset (mech 6) ---- */
.ab-band {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--ink);
  overflow: hidden;
}

.ab-band > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.ab-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 13, 15, .46), rgba(10, 13, 15, .32) 50%, rgba(10, 13, 15, .48));
}

.ab-inset {
  width: min(var(--cap), calc(100% - var(--pad) * 2));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 2.5rem;
  min-height: 17.5rem;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
  background: var(--sage);
  color: var(--ink);
}

.ab-inset > .eyebrow { grid-column: 1 / -1; grid-row: 1; }
.ab-inset-head { grid-column: 1; grid-row: 3; align-self: end; }
.ab-inset-head h2 { font-size: clamp(1.35rem, .9rem + 1.6vw, 2.05rem); }
.ab-inset-head .ghost { margin-top: 1.7rem; }

.ab-meta {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  max-width: 19rem;
}

.ab-meta > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .7rem;
}

.ab-meta > div + div { margin-top: .8rem; }
.ab-meta dt { opacity: .78; }

.ab-meta dd {
  font-size: var(--eyebrow);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---- responsive: the offset grid folds to one column; the gaps stay generous ---- */
@media (max-width: 900px) {
  .ab-br { display: none; }
  .ab-hero { padding-block: calc(var(--hdr-h) + 3rem) 2.5rem; }
  .ab-hero-copy > * { grid-column: 1 / -1; }

  .ab-ed-brow,
  .ab-values-brow {
    grid-column: 1 / -1;
    padding-top: 0;
    margin-bottom: 1.75rem;
  }

  .ab-ed-head,
  .ab-ed-body,
  .ab-panel-fig,
  .ab-panel-copy,
  .ab-values-row {
    grid-column: 1 / -1;
  }

  .ab-ed-body { max-width: 30rem; }
  .ab-panel-fig { max-width: min(17rem, 66vw); }
  .ab-panel-copy { display: block; margin-top: 2.75rem; }
  .ab-panel-foot { max-width: 30rem; margin-top: 2.25rem; }
  .ab-values-row { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .ab-values-row p { max-width: 30rem; }
  .ab-inset { display: block; min-height: 0; }
  .ab-inset > .eyebrow { margin-bottom: 4.5rem; }
  .ab-meta { margin-top: 2.5rem; max-width: none; }
}

/* ---- the room: offset editorial stack of the client's interiors.
   Varied spans + staggered tops — never a uniform card grid. ---- */
.ab-room {
  padding-bottom: var(--sec);
}

.ab-room-brow {
  opacity: .5;
  margin-bottom: 1.5rem;
}

.ab-room-head {
  font-size: var(--display-sm);
  max-width: 32ch;
}

.ab-room-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, .5rem + 1.5vw, 2rem);
  align-items: start;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

.rg img {
  width: 100%;
  height: auto;
  display: block;
}

.rg-a { grid-column: 1 / 6; }
.rg-b { grid-column: 7 / 13; margin-top: clamp(3rem, 2rem + 5vw, 8rem); }
.rg-c { grid-column: 1 / 7; }
.rg-d { grid-column: 8 / 13; margin-top: clamp(2rem, 1rem + 4vw, 6rem); }
.rg-e { grid-column: 2 / 6; margin-top: clamp(1rem, .5rem + 2vw, 3rem); }
.rg-f { grid-column: 7 / 13; }

@media (max-width: 900px) {
  .ab-room-grid {
    grid-template-columns: 1fr 1fr;
    gap: .875rem;
  }

  .rg-a,
  .rg-f {
    grid-column: 1 / -1;
  }

  .rg-b,
  .rg-c,
  .rg-d,
  .rg-e {
    grid-column: auto;
    margin-top: 0;
  }
}