/* ============================================================================
   divine.css — 21 September 2026
   Loaded only on scriptures.html and teachers.html, after style.css and
   refine.css, so every rule here is a deliberate override of those two.

   Purpose, in the words of the request: make the bookcase read as a temple
   shrine to learning with Sarasvatī at its head, bind each text as an ancient
   leather manuscript whose title, author and period are all legible, make the
   golu padi grander and its photo frames grand and clean, and give both
   structures real spatial depth.

   Depth is built on the 3D scaffolding style.css already establishes —
   .case-stage and .golu-stage carry a perspective, .shelf-well/.shelf-books
   carry preserve-3d, and .bk-top/.bk-edge are already rotated into a box. This
   file pushes those planes apart in Z rather than inventing a new system.

   Geometry note: every percentage placing a photo inside frame.webp is
   measured from that file's own alpha channel (opening at 14.21% / 14.08% /
   33.66% / 9.59%, aspect 0.7945), not estimated by eye.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------------------------- */

.case-stage,
.golu-stage {
  /* A raked plane under a perspective is projected wider than its own box — the
     near edge is magnified — so the stand bled about 10px past the viewport on a
     tablet and pushed the page sideways. (A 4px version of this was already
     there before the rake was deepened.) `clip` trims the bleed at the stage
     edge without creating a scroll container, so the depth is kept and the
     sideways scroll goes away. */
  overflow-x: clip;

  /* Frame proportion of frame.webp (760x1209). Used to size the plate so the
     carving is never stretched. */
  --frame-ar: 0.6286;
  --gilt: rgba(240, 205, 138, 0.55);
  --gilt-soft: rgba(240, 205, 138, 0.26);
  --leaf: #f3e8ce;
}

/* ===========================================================================
   PART ONE — THE SCRIPTURES: a temple bookcase
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. SARASVATĪ AT THE HEAD OF THE CASE
   The goddess of learning is given her own carved panel above the shelves,
   lit as though a lamp stood beneath her. Kept to one appearance rather than
   repeated on all 24 shelves, which would turn a shrine into wallpaper.
   --------------------------------------------------------------------------- */

.case-stage {
  position: relative;
  padding-top: 0;
}

.case-shrine {
  display: block;
  /* Sized as a niche set into the cabinet's top rail, not as a poster. At the
     first attempt this was 260px wide, which on its 2:3 panel meant 390px tall
     — it covered the whole first shelf heading. The overlap below is matched by
     the case's top padding, so the goddess sits in the woodwork with the shelf
     titles clear beneath her. */
  width: min(20%, 152px);
  margin: 0 auto -58px;
  position: relative;
  z-index: 3;
  border-radius: 4px;
  /* A warm halo so the panel sits in its own light rather than being pasted on. */
  filter:
    drop-shadow(0 0 22px rgba(229, 181, 92, 0.34))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.72));
}

/* ---------------------------------------------------------------------------
   THE GOPURAM CREST — shared by the bookcase and the stand
   The original crest carried a fierce mask at its centre — the scary face. Each
   page now has its own wide gopuram, and the two are drawn to different briefs:
   the teachers' one is peopled, five tiers of niches holding Dakṣiṇāmūrti beneath
   the banyan, Sarasvatī with her vīṇā, Lakṣmī on her lotus, Gaṇeśa and long rows
   of calm ṛṣis with rudrākṣa and palm-leaf manuscripts. The scriptures' one holds
   no figures at all, only emblems: a great oṃ crowning the apex, the śrī yantra at
   the centre of the middle tier, and rows of haṃsa, lotus, conch, lamp, kalaśa,
   pūrṇa kumbha, vīṇā, rudrākṣa, bilva and manuscript bundles across the rest.
   Every face on either is serene.

   Sized by width, not height. At a fixed height a 2:1 carving sat as a narrow
   object in the middle of a wide stand, disconnected from it. Spanning the full
   stage width instead, its ends land exactly above the carved towers that run
   down both sides, so the towers read as descending from beneath it and the
   whole becomes one structure. Because the width is 100% and the height auto,
   the tiers stay in proportion at every screen size without a single breakpoint
   override. The negative bottom margin seats the plinth on the lintel below. */
.case-crown,
.golu-crown {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto -12px;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.72));
}
.case-crown { margin-bottom: -10px; }

/* The separate Sarasvatī shrine panel is retired. It made sense when the crest
   was a narrow object and the panel sat beside it, but under a gopuram that now
   spans the whole bookcase it hangs off the centre as a second, smaller pendant
   — which is the very thing the wide gopuram was meant to cure. Sarasvatī's vīṇā
   is carved into the gopuram's own tiers, so nothing is lost. Hidden rather than
   deleted from the markup, so it can be brought back in one line. */
.case-shrine { display: none; }

/* ---------------------------------------------------------------------------
   2. THE CASE ITSELF — deeper, and flanked by carved pillars
   --------------------------------------------------------------------------- */

.case {
  transform-style: preserve-3d;
  padding-top: calc(var(--space-7) + 64px);   /* clears the shrine niche above */
  /* room for the carved towers down both sides */
  padding-left: 58px;
  padding-right: 58px;
  border-color: rgba(0, 0, 0, 0.72);
  /* A darker interior so gilt and leather carry; plus a long cast shadow that
     sets the whole case forward of the page. The first layer is the carved
     lintel running across the head of the cabinet between the two towers, so the
     gopuram above lands on a temple front rather than on a plain box edge. */
  background-image:
    url("../img/divine/symbols.webp"),
    radial-gradient(120% 70% at 50% 0%, rgba(229, 181, 92, 0.13), transparent 62%),
    linear-gradient(rgba(14, 8, 3, 0.52), rgba(8, 5, 2, 0.68)),
    var(--teak-img);
  background-size: auto 34px, auto, auto, 760px auto;
  background-position: top 10px center, center, center, center;
  background-repeat: repeat-x, no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 70px rgba(0, 0, 0, 0.6),
    0 46px 80px rgba(0, 0, 0, 0.72);
}

/* style.css uses these two as plain 30px pillar shafts. They become the carved
   temple towers that carry the lintel and the gopuram above — a seamless run of
   conch, oṃ and lotus panels repeating the full height of the cabinet. */
.case::before,
.case::after {
  width: 50px;
  top: 8px;
  bottom: 8px;
  background:
    url("../img/divine/tower.webp") center top / 100% auto repeat-y;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
  opacity: 1;
  z-index: 4;
}
.case::before { left: 4px; }
.case::after  { right: 4px; }

/* ---------------------------------------------------------------------------
   3. EACH SHELF — a lit niche with carving on every surface
   --------------------------------------------------------------------------- */

.shelf { transform-style: preserve-3d; }

/* The well becomes a genuine recess: a dark back wall, a faint carved
   watermark on it, light spilling from the top lip, and occlusion in both
   bottom corners. */
.shelf-well {
  background:
    radial-gradient(140% 100% at 50% -10%, rgba(229, 181, 92, 0.1), transparent 55%),
    radial-gradient(120% 90% at 78% 55%, rgba(44, 26, 10, 0.5), rgba(4, 3, 1, 0.97) 74%);
  box-shadow:
    inset 0 10px 26px rgba(0, 0, 0, 0.88),
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 26px -18px 40px rgba(0, 0, 0, 0.5),
    inset -26px -18px 40px rgba(0, 0, 0, 0.5);
}

/* Temple carving on the back wall of every niche — present but far enough back
   that the spines stay the subject. Sits behind the books via z-index. */
.shelf-well::before {
  content: "";
  position: absolute;
  inset: 4px 4px 0;
  z-index: 0;
  background: url("../img/divine/symbols.webp") center top / auto 74px repeat;
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: 3px 3px 0 0;
}
.shelf-books { position: relative; z-index: 1; }

/* The deck is the surface the volumes stand on. Warmer at the front lip where
   light would strike it, and throwing a longer shadow into the page. */
.shelf-deck {
  height: 54px;
  background-image:
    linear-gradient(rgba(255, 238, 205, 0.2), rgba(0, 0, 0, 0.52)),
    var(--teak-img);
  box-shadow:
    0 -1px 0 rgba(255, 241, 214, 0.5),
    0 22px 34px rgba(0, 0, 0, 0.72);
}

/* The front rail, carrying the sacred-symbol frieze. */
.shelf-edge {
  height: 40px;
  margin-top: -18px;
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 216, 0.22),
    inset 0 -12px 20px rgba(0, 0, 0, 0.46),
    0 14px 26px rgba(0, 0, 0, 0.5);
}
.shelf-edge::after {
  inset: 4px 12px;
  background: url("../img/divine/symbols.webp") left center / auto 30px repeat-x;
  opacity: 0.95;
  border-radius: 2px;
}

/* A gilt rule under each shelf title, so the head reads as a temple label. */
.shelf-head {
  position: relative;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--gilt-soft);
}

/* ---------------------------------------------------------------------------
   4. THE VOLUMES — leather manuscript folders, laced and legible
   The face was a flat tone with cream text on it, which is where the contrast
   complaint came from: a mid gold like #c9953c under #fff8ea is about 2.1:1.
   The face is now dark tooled leather and the group tone moves to a stripe
   down the hinge plus the head and fore-edge, so the colour coding survives
   while the text sits on near-black leather at roughly 12:1.
   --------------------------------------------------------------------------- */

.bk-face {
  background-color: #1d1108;
  background-image:
    repeating-linear-gradient(74deg,
      rgba(255, 248, 234, 0.03) 0 2px,
      rgba(0, 0, 0, 0.06) 2px 5px),
    /* Every stop darkens. The first version opened with a white sheen at 16%,
       which looked like leather but wrecked legibility: the tooled leather's own
       highlights reach rgb(172,122,98), and lightening those put the title at
       3.2:1 and the author at 2.4:1 — both below the 4.5:1 minimum. Measured
       so every stop here darkens instead. A 48% floor was tried first and
       measured 18:1 on the rendered surface, but that much black stopped the
       oxblood reading as leather at all. 28% is the balance: measured on the
       rendered pixels it holds the title near 12:1 with the grain and colour of
       the hide still visible. The gradient deepens toward the fore-edge, so the
       spine keeps reading as curved. */
    linear-gradient(100deg,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.34) 26%,
      rgba(0, 0, 0, 0.52) 72%,
      rgba(0, 0, 0, 0.66) 100%),
    url("../img/divine/leather.webp");
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal;
  /* hinge stripe in the group tone, gilt keyline, curvature */
  box-shadow:
    inset 5px 0 0 var(--bc, #2a3255),
    inset 6px 0 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(240, 205, 138, 0.16),
    inset -7px 0 14px rgba(0, 0, 0, 0.6);
  padding: 38px 3px 42px;
  /* Every run stands in its own column ACROSS the spine, each reading down its
     full length. This matters more than it sounds. style.css stacked the runs
     one after another down the spine, which works for two but not three: on a
     268px spine, 80px of padding leaves 188px, and the period alone ('c. 1500–
     1200 BCE') consumes about 112px of it — so the title was left roughly 68px
     and had to wrap four times, overflowing the spine's width. Standing the
     runs side by side instead gives the title the whole 188px, so it wraps once
     rather than four times. The cost moves to width, which is why the spines
     below are thicker. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

/* Author and period share the column beside the title. */
.bk-meta {
  display: flex;
  flex-direction: column;     /* in vertical-rl this sets them side by side */
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

/* Title — the one thing that must always be readable. It takes the room the
   paired label leaves, and may wrap across the spine's width. */
.bk-face b {
  flex: 0 1 auto;
  min-height: 0;
  color: #fdf6e6;
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8);
}

/* Author, set in gilt so it is distinct from the period at a glance. Only
   present where the site's own data names one — the Vedas and Upaniṣads are
   traditionally unauthored and are left with no line rather than a guess. */
.bk-auth {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.06;
  /* A paler gold than the plaque gold: still clearly distinct from the cream
     title and the period, but 8.0:1 on the leather rather than 6.7:1. */
  color: #fbe9c0;
  letter-spacing: 0.012em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.bk-face em {
  font-size: 0.88rem;
  color: rgba(247, 235, 212, 0.94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

/* Palm-leaf head and tail blocks, brighter against the darker leather. */
.bk-face::before,
.bk-face::after {
  height: 15px;
  background: repeating-linear-gradient(90deg, var(--leaf) 0 2px, #cbb892 2px 4px);
  border-top: 1px solid rgba(240, 205, 138, 0.95);
  border-bottom: 1px solid rgba(240, 205, 138, 0.95);
}

/* The head and fore-edge keep the group tone, so the legend still reads. */
.bk-top {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--bc, #2a3255) 42%, transparent), transparent),
    repeating-linear-gradient(90deg, #efe3c8 0 2px, #d8c8a6 2px 4px);
}
.bk-edge {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bc, #2a3255) 42%, transparent), transparent),
    repeating-linear-gradient(0deg, #e9dcc0 0 2px, #cfbe9b 2px 4px);
}

/* A spine has to be thick enough for three columns plus a title that wraps to a
   second line: roughly 42px of title, 34px of author and period, and the gaps.
   max() keeps the per-volume thickness the markup sets — a thick commentary
   still looks thick — while refusing to go below what the label needs. The
   thicker volumes also put more tooled leather on show, which suits the
   binding. */
.shelf-books .book { width: max(var(--bw, 70px), 100px); }

/* Depth: each volume already lifts on hover. Deepen the resting shadow so the
   row reads as objects standing in a recess, and lift further on hover. */
.book { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.78)); }
.book:hover,
.book:focus-visible {
  transform: translateY(-20px) translateZ(44px) rotateY(-11deg);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.8));
  z-index: 5;
}

/* Where all three lines cannot fit even at the floor size, bookfit.js sets
   this flag and the author line steps aside so the title never clips. */
.book[data-noauth] .bk-auth { display: none; }

/* The "Free PDF" badge the download volume carries. It stands in its own column
   like the other runs, so it has to scale with them — otherwise shrinking the
   type can never relieve a spine that is overflowing its width, which is what
   kept The Complete Works of Swami Vivekananda overflowing on a phone. */
.bk-tag {
  flex: 0 0 auto;
  /* The badge was set horizontally, so it stood 41px wide against the 26px of
     the title and 9px of the label — on its own enough to push the spine 4px
     over on a phone. Turned to read down the spine like every other run, it
     costs about 15px instead. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #2a1708;
  background: linear-gradient(180deg, #f4d693, #cfa04a);
  border-radius: var(--radius-full, 999px);
  padding: 0.3em 0.55em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

/* bookfit.js sets --fit on the face, and every run scales together so the title
   keeps its typographic lead over the author and the period. The ratios match
   the resting sizes above (0.92/1.2, 0.88/1.2 and 0.72/1.2). */
.bk-face[style*="--fit"] b        { font-size: var(--fit); }
.bk-face[style*="--fit"] .bk-auth { font-size: calc(var(--fit) * 0.767); }
.bk-face[style*="--fit"] em       { font-size: calc(var(--fit) * 0.733); }
.bk-face[style*="--fit"] .bk-tag  { font-size: calc(var(--fit) * 0.6); }

/* ===========================================================================
   PART TWO — THE GOLU PADI: grander steps, grand frames
   =========================================================================== */

/* The stand is now a temple front rather than a crest sitting above a pile of
   boxes: two carved towers rise the full height of the stack, a carved lintel
   runs across their heads, and the gopuram is seated on that lintel. The tiers
   are nested between the towers, so one structure holds every step.

   The rake that used to be here is gone, and that is the important repair. A
   5,700px-tall stack rotated 4.5deg under a 2,000px perspective paints about
   457px taller than the box it occupies, and nothing in the layout reserves
   that overspill. Everything below the stand — the lineage key, the Shankara
   Lineage heading, its opening paragraph and its Dakṣiṇāmūrti panel — was laid
   out from the stand's layout bottom and therefore painted straight across the
   lowest tier's portraits. That is the jumble. Depth is rebuilt below out of
   geometry that stays inside each step's own box, so it cannot collide with
   anything that follows. */
.golu {
  position: relative;
  transform: none;
  transform-style: preserve-3d;
  padding: 54px 54px 0;
  /* the carved lintel spanning the two towers */
  background: url("../img/divine/symbols.webp") top 9px center / auto 32px repeat-x;
}

/* The towers. tower.webp is a seamless run of conch, oṃ and lotus panels, cut
   so it repeats down any height without a visible join. */
.golu::before,
.golu::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 54px;
  /* Started below the lintel so the carved band reads as a cornice resting on
     the towers, rather than the towers being sliced off flush with it. */
  top: 42px;
  background: url("../img/divine/tower.webp") top center / 100% auto repeat-y;
  filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.82));
  z-index: 4;
  pointer-events: none;
}
.golu::before { left: 0; }
.golu::after  { right: 0; }

/* Depth per tier, increasing toward the front of the stand. --dp drives the
   tread's thickness and overhang, so the lower steps read as nearer and heavier
   without a single pixel of the step leaving its own layout box. */
.step {
  position: relative;
  transform-style: preserve-3d;
}
.step:nth-child(1) { --dp: 0.40; }
.step:nth-child(2) { --dp: 0.50; }
.step:nth-child(3) { --dp: 0.60; }
.step:nth-child(4) { --dp: 0.70; }
.step:nth-child(5) { --dp: 0.80; }
.step:nth-child(6) { --dp: 0.90; }
.step:nth-child(7) { --dp: 1.00; }

/* The first two gradients are the tier's left and right end walls. Painted as
   background layers rather than pseudo-elements so they can never stack above
   the teacher names the way an absolutely positioned overlay would. With the
   overhanging tread below, each tier reads as a solid slab with sides. */
.step-body {
  border-color: rgba(0, 0, 0, 0.72);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0) 38px),
    linear-gradient(270deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 32px),
    radial-gradient(120% 80% at 50% 0%, rgba(229, 181, 92, 0.11), transparent 58%),
    linear-gradient(rgba(20, 11, 4, 0.66), rgba(9, 5, 2, 0.8)),
    var(--teak-img);
  background-size: auto, auto, auto, auto, 600px auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 50px rgba(0, 0, 0, 0.5),
    inset 0 -30px 46px rgba(0, 0, 0, 0.42),
    0 26px 46px rgba(0, 0, 0, 0.6);
}

/* The tread, rebuilt as real geometry.

   It used to be a 54px box rotated 66deg about its top edge, which paints only
   cos(66deg) — about 22px — of the 54px it occupies. The leftover 32px was dead
   space below it, and the riser's -20px margin clawed back only part of that, so
   the tier came apart into a box, a thin bright line, a gap, and a floating
   frieze. Drawn instead as a trapezoid with clip-path, the painted height equals
   the layout height exactly, and the shape does the perspective honestly: the
   back edge is exactly as wide as the riser above it, and the front edge
   overhangs on both sides like the nosing of a real step. Both the thickness and
   the overhang grow with --dp, so the stand gets visibly heavier and nearer as
   it comes down. */
.step-deck {
  --ov: calc(var(--dp, 1) * 16px);
  transform: none;
  height: calc(32px + var(--dp, 1) * 26px);
  width: calc(100% + var(--dp, 1) * 32px);
  margin-left: calc(var(--dp, 1) * -16px);
  clip-path: polygon(var(--ov) 0, calc(100% - var(--ov)) 0, 100% 100%, 0 100%);
  background-image:
    /* a thin dark nosing line along the front edge, so the surface ends on an
       edge instead of fading out */
    linear-gradient(rgba(0, 0, 0, 0) calc(100% - 3px), rgba(0, 0, 0, 0.5)),
    linear-gradient(
      rgba(0, 0, 0, 0.26),
      rgba(228, 188, 130, 0.16) 58%,
      rgba(252, 236, 206, 0.30)),
    var(--teak-img);
  /* The teak tile was 700px wide inside a tread over 1000px wide, so the repeat
     seam showed as a brightness step across the middle of the surface. Sized
     past the widest tread, it cannot repeat at all. */
  background-size: auto, auto, 1500px auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border: 0;
  /* box-shadow would be cut away by the clip; drop-shadow follows the shape. */
  box-shadow: none;
  filter: drop-shadow(0 calc(8px + var(--dp, 1) * 8px)
                      calc(10px + var(--dp, 1) * 10px) rgba(0, 0, 0, 0.72));
}

/* The riser, carrying the full symbol set: oṃ, lotus, kalaśa, conch, haṃsa,
   lamp, śrī yantra, triśūla. refine.css put a dim soft-light strip here; at
   0.62 soft-light on teak the figures were barely present, so the carving is
   now shown at its own value. */
.step-face {
  height: calc(40px + var(--dp, 1) * 14px);
  /* The -20px in style.css existed only to hide the rotated tread's dead space.
     With the tread drawn to its true height there is nothing to pull up, and the
     riser is widened to the tread's front edge so the two meet flush instead of
     the frieze sitting set back from the nosing. */
  margin-top: 0;
  width: calc(100% + var(--dp, 1) * 32px);
  margin-left: calc(var(--dp, 1) * -16px);
  box-shadow:
    inset 0 1px 0 rgba(246, 236, 216, 0.18),
    inset 0 -12px 20px rgba(0, 0, 0, 0.42),
    0 18px 26px rgba(0, 0, 0, 0.58);
}
.step-face::before {
  height: clamp(20px, 2.6vw, 32px);
  background: url("../img/divine/symbols.webp") center / auto 100% repeat-x;
  opacity: 0.95;
  mix-blend-mode: normal;
}
/* style.css's plain frieze underneath would fight the symbol band. */
.step-face::after { opacity: 0; }

/* The carved pillars flanking each tier, restored and upgraded. style.css hid
   them below 900px and offset them by -4px, which is what pushed the page 4px
   wider than the viewport on tablet and phone. Both are fixed here. */
.step-pillar {
  display: flex;
  width: 38px;
  z-index: 3;
}
.step-pillar.left  { left: 0; }
.step-pillar.right { right: 0; }
.step-pillar::before,
.step-pillar::after { display: none; }
.step-pillar > i {
  background: url("../img/divine/pillar.webp") center top / 100% auto repeat-y;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
}

/* ---------------------------------------------------------------------------
   5. THE PHOTO FRAMES — grand, and the photograph sitting cleanly inside
   The plate is sized to the carving's own aspect so nothing is stretched, and
   the photograph is inset to the measured opening so no edge of it crosses
   the gilt.
   --------------------------------------------------------------------------- */

/* Names of different lengths left the plates in a row sitting at different
   heights — Govinda Bhagavatpāda wraps to two lines and pushed its marker lower
   than Gauḍapāda's beside it. Laying each figure out as a column and pushing the
   marker to the bottom levels the row regardless of how the name breaks. */
.gfig {
  width: 10.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gfig-dot { margin-top: auto; }

.gfig-frame {
  width: 9.4rem;
  height: calc(9.4rem / var(--frame-ar));   /* 14.95rem */
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.72));
}

.gfig-carve {
  background: url("../img/divine/frame.webp") center / 100% 100% no-repeat;
}

/* Measured from frame.webp's own alpha channel, then converted to an explicit
   size. Insets alone will not do it: an <img> is a replaced element, so
   width/height: auto resolves to the file's intrinsic size rather than
   stretching to the right and bottom insets — which is why the first attempt
   left photographs hanging out past the bottom of the carving. The two
   percentages below are the opening's own width and height:
     100 - 14.21 - 14.08 = 71.71   |   100 - 33.66 - 9.59 = 56.75
   object-fit keeps the photograph's own proportions inside that rectangle. */
.gfig-photo {
  top: 33.66%;
  left: 14.21%;
  right: auto;
  bottom: auto;
  width: 71.71%;
  height: 56.75%;
  border-radius: 1px;
  object-fit: cover;
  object-position: center 28%;   /* faces sit high in most of these plates */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.75),
    0 0 18px rgba(0, 0, 0, 0.6);
  /* A touch off full saturation so colour photographs, black-and-white scans and
     painted images sit in one register rather than competing. */
  filter: saturate(0.93) contrast(1.02);
}

/* refine.css drew a containment line at inset 11.5%, which on this frame fell
   across the carving. Re-aimed to the opening as a fine gilt lip. */
.gfig-frame::after {
  inset: 33.66% 14.08% 9.59% 14.21%;
  border: 1px solid var(--gilt);
  border-radius: 1px;
  /* These 51 photographs come from many sources, and several are statues shot
     against white. Inside a dark carved plate a plain white ground glares and
     reads as a missing image. A warm inset vignette settles each photograph into
     its opening without altering the subject. */
  box-shadow:
    inset 0 0 12px rgba(48, 25, 6, 0.46),
    inset 0 0 34px rgba(18, 9, 2, 0.26);
}

/* The figure's contact shadow follows the taller plate. */
.gfig::after {
  top: calc(9.4rem / var(--frame-ar) - 0.5rem);
  width: 7rem;
  height: 1.2rem;
}

.gfig:hover .gfig-frame,
.gfig:focus-visible .gfig-frame {
  transform: translateY(-10px) translateZ(30px) scale(1.045);
  filter: drop-shadow(0 26px 32px rgba(0, 0, 0, 0.78));
}

.gfig b { color: #fdf6e6; }
.gfig i { color: #e0c795; }

/* ---------------------------------------------------------------------------
   6. SMALL SCREENS
   The towers narrow as the viewport does and are dropped entirely on a phone,
   where they would eat the width the portraits and spines need. The tread keeps
   its thickness at every size, because that is what carries the depth once the
   towers are gone.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* No rake at any width. A shallower version of the same rotation was left
     here and it reintroduced the whole fault on tablets and phones. */
  .golu { transform: none; padding-left: 40px; padding-right: 40px; }
  .golu::before, .golu::after { width: 40px; }
  .gfig { width: 9.4rem; }
  .gfig-frame { width: 8.4rem; height: calc(8.4rem / var(--frame-ar)); }
  .gfig::after { top: calc(8.4rem / var(--frame-ar) - 0.5rem); width: 6.2rem; }
  .step-pillar { width: 30px; }
  .case { padding-left: 42px; padding-right: 42px; }
  .case::before, .case::after { width: 34px; }
}

@media (max-width: 640px) {
  .case { padding-left: var(--space-4); padding-right: var(--space-4); }
  .case::before, .case::after { display: none; }
  .golu { padding-left: 0; padding-right: 0; padding-top: 40px; }
  .golu::before, .golu::after { display: none; }
  .step-pillar { display: none; }
  /* With the towers gone the tread is the only depth cue left, so it keeps its
     full thickness but stops overhanging — there is no longer any padding for
     the overhang to sit in. */
  .step-deck { width: 100%; margin-left: 0; }
  /* A 60px spine cannot hold three columns. A little more width keeps the
     author legible on a phone rather than withdrawn from most volumes. */
  .shelf-books .book { width: max(var(--bw, 60px), 86px); }
  .bk-face { padding: 36px 2px 40px; gap: 0.34rem; }
  .bk-meta { gap: 0.24rem; }
  .bk-face b { font-size: 1.06rem; }
  .bk-auth { font-size: 0.82rem; }
  .bk-face em { font-size: 0.8rem; }
  .bk-tag { font-size: 0.64rem; padding: 0.26em 0.45em; }
  .bk-face::before, .bk-face::after { height: 12px; }
  .gfig { width: 8.6rem; }
  .gfig-frame { width: 7.6rem; height: calc(7.6rem / var(--frame-ar)); }
  .gfig::after { top: calc(7.6rem / var(--frame-ar) - 0.4rem); width: 5.6rem; }
  .shelf-edge::after { background-size: auto 22px; }
  .step-face::before { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .book:hover, .book:focus-visible,
  .gfig:hover .gfig-frame, .gfig:focus-visible .gfig-frame { transform: none; }
}