/* Cartridge graveyard (graveyard.js): retired builds standing in the dirt at dusk, at the bottom of the home page.
   Quiet on purpose: near-black, warm greys, one dim dusk backdrop, no glows. The 3D yard draws into .yard-view; the
   epitaph is plain HTML beside the cartridge that is up (below the yard on narrow screens). */
.yard-sec{position:relative;isolation:isolate;padding:60px 0 80px;overflow:hidden;background:var(--bg,#07060b)}
/* the approved dusk backdrop (sa132), dimmed and drained so it reads as mood, not a picture */
.yard-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(assets/graveyard/backdrop-sa132-dusk.webp) center 62%/cover no-repeat;opacity:.3;filter:saturate(.35) brightness(.9);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 74%,transparent 100%)}

.yard-intro{text-align:center;color:var(--ink-2,#d6ccde);max-width:60ch;margin:14px auto 0;font-size:16.5px}
.yard-say-touch{display:none}
@media (hover:none){.yard-say-hover{display:none}.yard-say-touch{display:inline}}

.yard-stage{position:relative;margin-top:18px}
.yard-view{position:relative;height:clamp(300px,28vw,420px);touch-action:manipulation}
/* a soft patch of dirt holds the place while the yard loads */
.yard-dirt{position:absolute;left:6%;right:6%;bottom:4%;height:44%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(40,34,29,.8),rgba(40,34,29,0));transition:opacity .6s ease}
.yard-stage.is-ready .yard-dirt{opacity:0}
/* soft side and bottom edges, whatever the camera shows of the dirt */
.yard-gl{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);mask-composite:intersect}
.yard-stage.is-ready .yard-gl{opacity:1}

/* hit areas over the stones: real buttons for pointer, touch, keyboard and screen readers */
.yard-hits{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.yard-hit{position:absolute;display:block;padding:0;border:0;border-radius:8px;background:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ns .yard-hit:focus-visible{outline:2px solid var(--cyan,#93dbe6);outline-offset:2px}
/* where :has works, the focus ring follows the cartridge (yard-ring) instead of the taller hit area */
.yard-ring{position:absolute;display:none;border-radius:10px;box-shadow:0 0 0 2px var(--cyan,#93dbe6);pointer-events:none;z-index:5}
@supports selector(:has(a)){
  .ns .yard-hit:focus-visible{outline:none}
  .yard-view:has(.yard-hit:focus-visible) .yard-ring{display:block}
}

/* the epitaph: a small dark plaque, plain type */
.yard-ep{padding:14px 16px 15px;border-radius:8px;background:rgba(12,11,14,.94);box-shadow:inset 0 0 0 1px rgba(242,227,196,.13),0 16px 30px rgba(0,0,0,.5);text-align:left;animation:yardEpIn .18s ease-out both}
.yard-ep-k{font:700 10.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#9a9182}
.yard-ep-n{margin-top:4px;font:900 27px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:#efe6d8}
.yard-ep-d{margin-top:7px;font:700 12px/1.3 var(--f-mono);letter-spacing:.05em;color:#c4ad7f}
.yard-ep-w{margin-top:10px;font:400 14.5px/1.5 var(--f-body);color:#cec6ba}
.yard-ep-r{margin-top:11px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);font:500 11px/1.45 var(--f-mono);color:#857d71;overflow-wrap:anywhere}
.yard-ep-r span{margin-right:4px;letter-spacing:.14em;text-transform:uppercase;color:#a0978a}
.yard-ep-r code{font:inherit;color:inherit}
@keyframes yardEpIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* beside the stone the plaque lets the pointer through, so the next stone is always one move away */
.yard-stage.is-wide .yard-eps{position:absolute;left:0;top:0;right:0;height:100%;pointer-events:none;z-index:6}
.yard-stage.is-wide .yard-ep{position:absolute}
.yard-stage.is-narrow .yard-eps{position:relative;margin-top:10px}

/* no WebGL: the same graves as a tidy list */
.yard-list{display:grid;gap:0;max-width:980px;margin:26px auto 0;padding:0;list-style:none}
.yard-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start;padding:18px 0;border-top:1px solid rgba(255,255,255,.08)}
.yard-row:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.yard-row img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;filter:grayscale(.6) sepia(.15) brightness(.78);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.yard-row .yard-ep{padding:0;background:none;box-shadow:none;animation:none}

@media (max-width:720px){
  .yard-sec{padding:44px 0 60px}
  .yard-view{height:clamp(300px,86vw,440px)}
  .yard-ep-n{font-size:24px}
  .yard-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .yard-row img{max-width:360px}
}
@media (prefers-reduced-motion:reduce){.yard-ep,.yard-gl,.yard-dirt{animation:none;transition:none}}
.ns.rm .yard-gl,.ns.rm .yard-dirt{transition:none}
/* The heading sits on the weathered steel plate sa94-02: light stamped lettering, no glow. */
#yard-h>span{color:#efe5d3;text-shadow:0 2px 0 #000b,0 -1px 0 #ffffff1c}