/* ==========================================================================
   STONEGRAPH — components for the four deep-dive pages
   --------------------------------------------------------------------------
   What we carve, How a piece is made, Where it stands, Getting it to you.

   These four pages own the writing that used to sit inside Collections,
   Story, Portfolio and Global Supply. They needed three things the shipped
   stylesheet had no name for: a captioned photograph, a three-up of short
   definitions, and the hand-off block that sends a reader between the page
   about the work and the page about the pieces.

   Everything here is built from the same variables as the rest of the site,
   so a change to the palette reaches these pages too.
   ========================================================================== */

/* ---- a captioned photograph -------------------------------------------
   The caption is not decoration. Every photograph on these pages is of a real
   piece from the catalogue, and several of them illustrate a subject they are
   not literally of — a relief standing in for "hand-finishing", a jali pillar
   beside a paragraph about a hotel. Naming the piece and its stone under every
   frame means the page can use a picture to set a mood without ever implying
   it is a photograph of something it is not. */
/* The FIGURE carries the width cap, not the frame inside it.

   It was on the frame, which centred the picture in its column and left the
   caption starting at the column's left edge — the words sat a hundred pixels
   to the left of the image they belonged to, which is what "the text under the
   image is not in structure" means. Capping the figure makes the picture and
   its caption one block of a single width, so the caption's first character
   lines up with the picture's left edge at every size. */
.shot {
  /* ---- how big a photograph is allowed to be ----
     Every photograph in this library is portrait, and the column these sit in
     is around 730px wide. Left to fill it, a 3:4 picture stands 970px tall —
     taller than the laptop screen it is being read on, so the reader meets one
     enormous image, scrolls past it, and meets the next. It reads as a
     slideshow rather than as a page.

     What is capped is the HEIGHT, expressed as a max-width computed per
     picture from its own dimensions — the markup carries
     `max-width: calc(var(--shot-h) * w / h)` beside the aspect ratio. Doing it
     the obvious way round, with `height` and `width: fit-content`, does not
     work here: a .frame positions its image absolutely, so the box has no
     in-flow content, fit-content resolves to zero and the picture disappears
     entirely. Bounding the width and letting aspect-ratio derive the height
     needs no intrinsic content and cannot collapse. */
  --shot-h: min(56vh, 500px);
  margin: 0 auto;
  width: 100%;
}
.shot__frame {
  border-radius: 3px;
  /* The same mount the rest of the site gives a photograph: stone showing at
     the edge rather than a hard crop against the page. */
  background: var(--stone-150);
  box-shadow: 0 1px 0 var(--rule-soft), 0 24px 60px -34px rgba(36, 31, 24, .45);
  width: 100%;
}
@media (max-width: 860px) {
  .shot { --shot-h: 68vh; }
}

/* ---- the caption ----
   Two lines with a hairline over them, set to the width of the picture: the
   name of the piece, then its stone and what it is. A caption is a label on an
   object, so it is ranged left under the object's left edge and never centred
   — centred captions read as poetry, and this is a specification. */
.shot__cap {
  display: block;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.5;
}
.shot__cap b {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
}
.shot__cap span {
  display: block;
  margin-top: 3px;
  color: var(--ink-mute);
  opacity: .78;
}
.band--dark .shot__cap { border-top-color: var(--rule-dark); }
.band--dark .shot__cap b { color: var(--marble); }
.band--dark .shot__cap span { color: var(--on-dark-mute); }

/* ---- an inline link that reads as a way out, not as a button ----------
   Used everywhere one page hands a subject to another. The rule under it draws
   from the left on hover rather than appearing, which is the same gesture the
   connectors on the homepage use. */
.ilink {
  --ilink-c: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 3px;
  color: var(--ilink-c);
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}
.ilink--dark { --ilink-c: var(--marble); }
.ilink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .32;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.ilink:hover { color: var(--accent-dark); }
.ilink:hover::after { opacity: .85; transform: scaleX(.42); }
.ilink svg { transition: transform .5s var(--ease); }
.ilink:hover svg { transform: translateX(5px); }

/* ---- three short definitions side by side ----------------------------- */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.trio__i {
  background: var(--sand);
  padding: clamp(22px, 2.4vw, 34px);
  transition: background .5s var(--ease);
}
.trio__i:hover { background: var(--marble); }
.trio__t {
  margin: 12px 0 10px;
  font-family: var(--f-display, Georgia, serif);
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  font-weight: 400;
  color: var(--ink);
}
.trio__d { color: var(--ink-mute); font-size: .92rem; line-height: 1.62; }
.band--marble .trio__i { background: var(--marble); }
.band--marble .trio__i:hover { background: var(--marble-2); }

/* ---- the hand-off between two pages on the same subject --------------- */
.handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 48px);
  padding: clamp(26px, 3.2vw, 46px) 0 0;
  border-top: 1px solid var(--rule);
}
.handoff--dark { border-top-color: var(--rule-dark); }
.handoff__act { flex: none; margin: 0; }

@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; }
  .handoff { align-items: flex-start; }
}


/* ==========================================================================
   A COMMISSION, TOLD IN WORDS
   --------------------------------------------------------------------------
   Used on Where it stands, where there are no photographs to use — see the
   note in the page builder. Three parts across the grid: who and where, the
   account of the work, and a plain list of the pieces that were actually cut.
   The list is the part a specifier reads, so it is set as a specification
   rather than as prose.
   ========================================================================== */
.cmsn { align-items: start; row-gap: clamp(26px, 3vw, 44px); }
.cmsn__head { grid-column: 1 / span 4; }
.cmsn__body { grid-column: 6 / span 4; }
.cmsn__work { grid-column: 10 / span 3; }

.cwork__k {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}
.cwork { list-style: none; margin: 0; padding: 0; }
.cwork__i {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.band--dark .cwork__k { color: var(--on-dark-mute); border-bottom-color: var(--rule-dark); }
.band--dark .cwork__i { color: var(--marble); border-bottom-color: rgba(239, 234, 220, .1); }

@media (max-width: 1000px) {
  .cmsn__head { grid-column: 1 / -1; }
  .cmsn__body { grid-column: 1 / span 7; }
  .cmsn__work { grid-column: 9 / span 4; }
}
@media (max-width: 860px) {
  .cmsn__body, .cmsn__work { grid-column: 1 / -1; }
}


/* ==========================================================================
   THE CATALOGUE — contents and specifications
   --------------------------------------------------------------------------
   Collections and Portfolio had converged: both were a run of bands, each a
   heading over a grid of photographs, and with the galleries deliberately
   emptied in the panel the two were near enough identical. They do different
   jobs and now look it. The portfolio stays editorial — named commissions,
   told in prose. Collections is a catalogue: a contents page at the top, and
   each collection set out as a specification somebody can quote from.
   ========================================================================== */

/* ---- contents ---- */
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.toc__r { border-bottom: 1px solid var(--rule); }
.toc__r a {
  display: grid;
  grid-template-columns: 62px minmax(0, 5fr) minmax(0, 6fr) 22px;
  align-items: baseline;
  gap: 16px;
  padding: clamp(16px, 1.7vw, 24px) 0;
  color: var(--ink);
  text-decoration: none;
  transition: color .4s var(--ease), padding-inline .5s var(--ease);
}
.toc__r a:hover { color: var(--accent-dark); padding-inline: 10px 0; }
.toc__n {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .7rem; letter-spacing: .12em; color: var(--ink-mute);
}
.toc__t {
  font-family: var(--f-display, Georgia, serif);
  font-size: clamp(1.1rem, 1.9vw, 1.6rem); line-height: 1.2;
}
.toc__d {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute);
}
.toc__go { align-self: center; justify-self: end; transition: transform .5s var(--ease); }
.toc__r a:hover .toc__go { transform: translateX(5px); }

/* ---- a collection's specification ----
   A description list, because that is what it is: a term and its value. Set
   as rows with a hairline between so it reads as a datasheet and never as
   another paragraph of marketing. */
.spec { margin: 0 0 clamp(28px, 3.4vw, 46px); padding: 0; }
.spec__r {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) minmax(0, 9fr);
  gap: 10px 26px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.spec__r:first-child { border-top: 1px solid var(--rule); }
.spec__k {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 3px;
}
.spec__v { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.band--dark .spec__r { border-bottom-color: rgba(239, 234, 220, .1); }
.band--dark .spec__r:first-child { border-top-color: var(--rule-dark); }
.band--dark .spec__k { color: var(--on-dark-mute); }
.band--dark .spec__v { color: var(--marble); }

@media (max-width: 860px) {
  .toc__r a { grid-template-columns: 42px 1fr 18px; gap: 4px 12px; }
  .toc__d { grid-column: 2; }
  .toc__go { grid-row: 1; }
  .spec__r { grid-template-columns: 1fr; gap: 4px; }
}