/* ==========================================================================
   THE DOSSIER SHELF — what Haq actually does, ported from the approved
   audition (design-proposals/services-v2.html).

   Ten services lie on one shelf as closed photo strips. Open one and it
   breathes: the photograph grows and brightens, the icon turns, the cross
   becomes a minus, and the way in lights up. Only one file is ever open,
   the way a real shelf works.

   Hardening carried over from the Two Worlds port: entrance states are gated
   behind html.shelf-js, so a no-JS visitor gets the finished shelf; the whole
   thing is <details>, so it opens without a line of script; every tap target
   clears 44px; focus is visible; reduced motion gets the still version.
   ========================================================================== */

.shelf {
  position: relative;
  z-index: 2;
  background: #061019;
  color: #f4efe4;
  padding: clamp(56px, 9vh, 96px) clamp(16px, 4vw, 48px);
  --pad: clamp(14px, 3vw, 26px);
}
.shelf-in { max-width: 980px; margin-inline: auto; }
.shelf-head small { display: block; font-family: Manrope, system-ui, sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--record-amber, #f49f2e); }
[dir="rtl"] .shelf-head small { letter-spacing: 0; }
.shelf-head h2 { margin: 10px 0 0; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; max-width: 18ch; }
.shelf-head p { margin: 12px 0 clamp(24px, 4vh, 40px); max-width: 52ch; color: rgba(244,239,228,.75); line-height: 1.6; }

.shelf details { border-block-end: 1px solid rgba(244,239,228,.14); }
.shelf summary { position: relative; display: block; list-style: none; cursor: pointer; }
.shelf summary::-webkit-details-marker { display: none; }
.shelf summary:focus-visible { outline: 2px solid var(--record-amber, #f49f2e); outline-offset: 2px; }

/* The closed strip is a sliver of the photograph; opening grows the frame. */
.shelf-photo { position: relative; display: block; height: 92px; overflow: hidden; transition: height .55s cubic-bezier(.25,.8,.25,1); }
.shelf details[open] .shelf-photo { height: min(46svh, 340px); }
.shelf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); transition: filter .5s ease, transform .8s cubic-bezier(.25,.8,.25,1); }
.shelf details[open] .shelf-photo img,
.shelf summary:hover .shelf-photo img { filter: brightness(1) saturate(1); }
.shelf details[open] .shelf-photo img { transform: scale(1.03); }
/* The name always has ground to stand on, whatever the photograph does. */
.shelf-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(4,9,14,.82), rgba(4,9,14,.25) 55%, transparent); }

.shelf-title { position: absolute; z-index: 1; inset-inline-start: var(--pad); inset-block-end: 14px; margin: 0; display: flex; align-items: center; gap: 12px; font-family: "Instrument Serif", Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.15; color: #f4efe4; text-shadow: 0 1px 10px rgba(4,9,14,.9); }
.shelf-ic { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(6,16,25,.55); transition: transform .4s cubic-bezier(.3,1.5,.4,1), background .3s ease; }
.shelf-ic svg { display: block; width: 19px; height: 19px; stroke: var(--record-amber, #f49f2e); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.shelf details[open] .shelf-ic { transform: rotate(-8deg) scale(1.15); background: rgba(244,159,46,.2); }

.shelf-plus { position: absolute; z-index: 1; inset-inline-end: clamp(12px, 2.5vw, 22px); inset-block-end: 22px; width: 22px; height: 22px; }
.shelf-plus::before, .shelf-plus::after { content: ""; position: absolute; background: var(--record-amber, #f49f2e); transition: transform .4s ease; }
.shelf-plus::before { inset: 10px 0; height: 2px; }
.shelf-plus::after { inset: 0 10px; width: 2px; }
.shelf details[open] .shelf-plus::after { transform: rotate(90deg); }

.shelf-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 2px 18px; }
.shelf-body p { flex: 1 1 260px; margin: 0; color: rgba(244,239,228,.78); line-height: 1.55; }
.shelf-body a { display: inline-block; padding: 11px 20px; min-height: 44px; border-radius: 999px; background: var(--record-amber, #f49f2e); color: #1a1006; font-family: Manrope, system-ui, sans-serif; font-weight: 700; text-decoration: none; touch-action: manipulation; }
.shelf-body a:hover { background: #ffb85c; }
.shelf-body a:focus-visible { outline: 2px solid #f4efe4; outline-offset: 3px; }

/* Entrance, gated. Script trouble ships the whole shelf, lit and readable. */
@media (prefers-reduced-motion: no-preference) {
  html.shelf-js .shelf details { opacity: 0; translate: 0 14px; }
  html.shelf-js .shelf.in details { opacity: 1; translate: 0 0; transition: opacity .45s ease, translate .5s cubic-bezier(.25,.8,.25,1); transition-delay: calc(var(--i, 0) * 70ms); }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-photo, .shelf-photo img, .shelf-ic, .shelf-plus::before, .shelf-plus::after { transition: none; }
}