/* f598 Codex directory frame file (name kept). f598 fixed the black bar (below); its Kells art was replaced by f609 (the original style, polished). */
.ld .ld-page{position:relative} /* the frame used to measure from .ld (page + its bottom margin + rail) = the black bar under the parchment */
/* f609 Will, Oct 23: 'I hate the new border ... I want the old style just to look more clean and polished'. The f598 Kells art is gone;
   this is the ORIGINAL bronze knot rail + stepped star-medallion corners (same pieces, same colours), polished by scripts/kells-oldframe.py
   into one 9-slice: rails cut on panel dividers (no cut panels / seams at the joins), one light direction all the way round, the corner
   block centred on the rails' centre lines (each rail runs into a stepped arm, no rail ends, no L brackets), a clean dark edge line + soft
   shade on the parchment, and only the top / bottom centre domes (the odd side tabs are gone). --ks scales it (1 PC, .8 tablets / phones). */
.ld .ld-page>.lo-kells{
  --ks:1;--kf-in:calc(26px * var(--ks));
  position:absolute;inset:0;z-index:6;pointer-events:none;box-sizing:border-box;
  border:1px solid transparent;border-image:url("/img/kells/codex-frame-old.webp?v=f609") 128 / calc(64px * var(--ks)) / calc(19px * var(--ks)) round;
  filter:drop-shadow(0 2px 3px rgba(18,10,4,.38))}
.ld .ld-page>.lo-kells>*{display:none!important}
.ld .ld-page>.lo-kells::before{content:"";position:absolute;left:50%;top:calc(-6px * var(--ks) - 1px);width:calc(56px * var(--ks));height:calc(21px * var(--ks));transform:translateX(-50%);
  background:url("/img/kells/codex-lobe-old.webp?v=f609") 0 0 / 100% 100% no-repeat}
.ld .ld-page>.lo-kells::after{content:"";position:absolute;left:50%;bottom:calc(-6px * var(--ks) - 1px);width:calc(56px * var(--ks));height:calc(21px * var(--ks));transform:translateX(-50%) rotate(180deg);
  background:url("/img/kells/codex-lobe-old.webp?v=f609") 0 0 / 100% 100% no-repeat}
@media (max-width:899px){.ld .ld-page>.lo-kells{--ks:.8}}
@media (max-width:379px){.ld .ld-page>.lo-kells{--ks:.74}}
/* f602 PC: the book fills the screen (no big black side areas). 1400+: up to 92vw (1920 -> ~1740px page), 13 coins a row, bigger coins;
   2200+ (2560 ultrawide): up to 88vw, 15 a row. Phones / small laptops unchanged. */
@media (min-width:1400px){
  html main:has(>.lo.ld){max-width:min(1800px,92vw)}
  html .lo.ld{max-width:none}
  html .lo.ld .ld-page{max-width:none;padding:56px 76px 58px}
  html .lo.ld .ld-page .ld-grid{grid-template-columns:repeat(13,minmax(0,1fr));gap:20px 14px}
  html .lo.ld .ld-page .ld-t{min-height:96px}
  html .lo.ld .ld-page .ld-t .ld-c{width:74px;height:74px}
  html .lo.ld .ld-page .ld-t>b{font-size:12px;padding:3px 8px;margin-top:5px}
  html .lo.ld .ld-page .ld-gens{max-width:1180px;margin-left:auto;margin-right:auto}
}
@media (min-width:2200px){
  html main:has(>.lo.ld){max-width:min(2240px,88vw)}
  html .lo.ld .ld-page .ld-grid{grid-template-columns:repeat(15,minmax(0,1fr));gap:24px 16px}
  html .lo.ld .ld-page .ld-t .ld-c{width:86px;height:86px}
  html .lo.ld .ld-page .ld-t{min-height:110px}
}
/* the side scrubber's thumb was a navy oval stuck on the frame's right edge (~150px down). With a mouse there is wheel / hover, so it goes;
   on touch it stays (hold & slide to jump by number) but as a lapis cabochon in a gold bezel, matching the frame. */
@media (hover:hover) and (pointer:fine){html .ld-rail{display:none}}
html .ld-rail::before{left:20px;width:4px;background:linear-gradient(180deg,transparent,rgba(216,176,82,.55) 8%,rgba(216,176,82,.55) 92%,transparent)}
html .ld-rail i{left:12px;width:20px;height:30px;border-radius:10px;background:radial-gradient(ellipse at 38% 28%,#9cc4ff 0,#2c5cc4 34%,#123072 72%,#081a44 100%);box-shadow:0 0 0 1.5px #170c04,0 0 0 4px #e0b65a,0 0 0 5.5px #170c04,0 3px 6px rgba(0,0,0,.5)}
@media (min-width:1400px){
  html .ld .ld-gens a.ld-rg .ld-badge{width:78px;height:78px}
  html .ld .ld-gens a.ld-rg::before{top:41px;width:90px;height:90px;margin:-45px 0 0 -45px}
  html .ld .ld-gens .ld-rib{font-size:13px}
  html .ld .ld-page .ld-h.ld-ill h1{font-size:44px}
  html .ld .ld-ill .ld-dc{width:60px;height:60px}
  html .ld .ld-ill .ld-dc b{font-size:40px}
  html .ld .ld-page .ld-h.ld-ill small{font-size:14px}
}
/* f609 .ld clips x (overflow-x:clip) at the page's edges: give it room for the corner blocks' overhang without moving the page */
html .lo.ld{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
@media (max-width:899px){html .lo.ld{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}
/* fTYPE Type pigments (Will, Oct 23: 'more vivid ... green for grass, white for colorless, red for fire ... like pretty mineral paint on the Book of Kells'):
   the f560 cloisonne vars now hold matte historical pigments; the bezel field is wider, flat and grainy (no gloss band), the plaque carries a pale wash
   of the pigment, the hover banner chip uses the deep shade (light text, never on yellow). Outer page frame untouched. */
html .ld :is(.ld-t,.ld-bub){--km1:#e3d8c0;--kmg:#f5eedd;--km2:#8f816a;--kmi:#463d2e;--kmw:30%}
html .ld :is(.ld-t,.ld-bub)[data-type="grass"]{--km1:#3d8a5c;--kmg:#7dba8e;--km2:#1e5236;--kmi:#0e2a1b}
html .ld :is(.ld-t,.ld-bub)[data-type="fire"]{--km1:#bf4229;--kmg:#df8a6c;--km2:#7a2314;--kmi:#3a1008}
html .ld :is(.ld-t,.ld-bub)[data-type="water"]{--km1:#2f5ea4;--kmg:#7c9ed0;--km2:#1a3768;--kmi:#0b1a34}
html .ld :is(.ld-t,.ld-bub)[data-type="lightning"]{--km1:#e2bd2c;--kmg:#f4de80;--km2:#86650e;--kmi:#382a04;--kmw:30%}
html .ld :is(.ld-t,.ld-bub)[data-type="psychic"]{--km1:#7b4a98;--kmg:#ad8bc4;--km2:#4a2a63;--kmi:#231430}
html .ld :is(.ld-t,.ld-bub)[data-type="fighting"]{--km1:#a65b2a;--kmg:#d29a68;--km2:#673314;--kmi:#311808}
html .ld :is(.ld-t,.ld-bub)[data-type="darkness"]{--km1:#383d58;--kmg:#757a94;--km2:#1d2032;--kmi:#0c0d16}
html .ld :is(.ld-t,.ld-bub)[data-type="metal"]{--km1:#8e9294;--kmg:#c8cac6;--km2:#52585c;--kmi:#24282a}
html .ld :is(.ld-t,.ld-bub)[data-type="dragon"]{--km1:#e39a22;--kmg:#f4c766;--km2:#8e5a0a;--kmi:#3a2205}
html .ld :is(.ld-t,.ld-bub)[data-type="fairy"]{--km1:#b8606e;--kmg:#d898a2;--km2:#74323e;--kmi:#36161c}
html .lo.ld .ld-page .ld-t .ld-c{--kgr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .08 0 0 0 0 .04 1.9 0 0 0 -1.02'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .88 0 1.5 0 0 -.98'/%3E%3C/filter%3E%3Crect width='48' height='48' filter='url(%23a)'/%3E%3Crect width='48' height='48' filter='url(%23b)'/%3E%3C/svg%3E");
  padding:4px;
  background:radial-gradient(circle at 4px 4px,#e9cf86 0 1.3px,transparent 1.8px),radial-gradient(circle at calc(100% - 4px) 4px,#e9cf86 0 1.3px,transparent 1.8px),radial-gradient(circle at 4px calc(100% - 4px),#e9cf86 0 1.3px,transparent 1.8px),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#e9cf86 0 1.3px,transparent 1.8px),
    var(--kgr) 0 0 / 48px 48px,linear-gradient(180deg,color-mix(in srgb,var(--km1) 88%,var(--kmg)) 0%,var(--km1) 45%,color-mix(in srgb,var(--km1) 82%,var(--km2)) 100%);
  box-shadow:inset 0 1px 1px rgba(20,12,4,.28),inset 0 -1px 0 rgba(255,240,210,.16),0 0 0 1px #c9a352,0 0 0 2px #3a2a12,0 2px 4px rgba(24,14,6,.42)}
html .lo.ld .ld-page .ld-t .ld-c img{box-shadow:0 0 0 1px #c9a352,0 0 0 1.6px rgba(40,26,10,.5)}
html .lo.ld .ld-page .ld-t .ld-c::after{inset:4px}
html .lo.ld .ld-page .ld-t>b{background:linear-gradient(180deg,color-mix(in srgb,var(--km1) var(--kmw),#f7eed8),color-mix(in srgb,var(--km1) calc(var(--kmw) + 10%),#e6d2aa));border:1.5px solid var(--km1);color:#2a1a0b;box-shadow:inset 0 0 0 1px rgba(255,246,222,.45),0 0 0 1px #3a2a12,0 1px 2px rgba(24,14,6,.32)}
html .lo.ld .ld-page .ld-t.ld-hot .ld-c{background:radial-gradient(circle at 4px 4px,#f3dc9c 0 1.4px,transparent 1.9px),radial-gradient(circle at calc(100% - 4px) 4px,#f3dc9c 0 1.4px,transparent 1.9px),radial-gradient(circle at 4px calc(100% - 4px),#f3dc9c 0 1.4px,transparent 1.9px),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#f3dc9c 0 1.4px,transparent 1.9px),
    var(--kgr) 0 0 / 48px 48px,linear-gradient(125deg,var(--km1) 0%,var(--km1) 38%,var(--kmg) 50%,var(--km1) 62%,var(--km2) 100%);background-size:100% 100%,100% 100%,100% 100%,100% 100%,48px 48px,240% 240%;
  box-shadow:inset 0 1px 1px rgba(20,12,4,.28),0 0 0 1px #d8b258,0 0 0 2px #3a2a12,0 0 9px color-mix(in srgb,var(--km1) 55%,transparent),0 6px 14px rgba(14,8,3,.6)}
html .lo.ld .ld-page .ld-t.ld-hot>b{border-color:var(--km1);background:linear-gradient(180deg,var(--km2),var(--kmi));color:#fff8e6;box-shadow:inset 0 0 0 1px #c9a352,0 1px 3px rgba(14,8,3,.5)}
html .ld .ld-bub{border-color:var(--km1)}
html .ld .ld-bub b{background:linear-gradient(180deg,var(--km2),var(--kmi));border-color:var(--km1);color:#fff8e6;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--kmg) 55%,transparent),0 1px 2px rgba(0,0,0,.45)}
@media (min-width:1400px){html .lo.ld .ld-page .ld-t .ld-c{padding:5.5px}html .lo.ld .ld-page .ld-t .ld-c::after{inset:5.5px}}
@media (min-width:900px) and (max-width:1399px){html .lo.ld .ld-page .ld-t .ld-c{padding:4.5px}html .lo.ld .ld-page .ld-t .ld-c::after{inset:4.5px}}
/* Will picked A (Oct 23): Lightning purer orpiment, Dragon golden orange (both above), Colorless pearl lead-white with a tiny diamond glint */
html .ld :is(.ld-t,.ld-bub)[data-type="colorless"]{--km1:#f2eee6;--kmg:#ffffff;--km2:#a69e90;--kmi:#4c463c;--kmw:64%}
html .lo.ld .ld-page .ld-t[data-type="colorless"] .ld-c{background:radial-gradient(circle at 4px 4px,#e9cf86 0 1.3px,transparent 1.8px),radial-gradient(circle at calc(100% - 4px) 4px,#e9cf86 0 1.3px,transparent 1.8px),radial-gradient(circle at 4px calc(100% - 4px),#e9cf86 0 1.3px,transparent 1.8px),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#e9cf86 0 1.3px,transparent 1.8px),
  radial-gradient(70% 60% at 20% 15%,rgba(214,228,255,.45),transparent 70%),radial-gradient(60% 60% at 85% 85%,rgba(255,222,232,.4),transparent 70%),linear-gradient(135deg,#fffdf8 0%,#eee8dc 40%,#faf7f1 55%,#e8e4de 75%,#f7f2e8 100%)}
html .lo.ld .ld-page .ld-t[data-type="colorless"] .ld-c::before{content:"";position:absolute;z-index:3;top:-2px;right:-2px;width:17px;height:17px;pointer-events:none;
  background:radial-gradient(circle,#fff 0 1px,rgba(255,255,255,.75) 1.6px,rgba(225,235,255,.35) 3.2px,transparent 5px),linear-gradient(90deg,transparent 18%,rgba(255,255,255,.95) 50%,transparent 82%) center/100% 1.3px no-repeat,linear-gradient(0deg,transparent 18%,rgba(255,255,255,.95) 50%,transparent 82%) center/1.3px 100% no-repeat;
  filter:drop-shadow(0 0 .7px rgba(60,90,185,.95)) drop-shadow(0 0 2.5px rgba(140,170,255,.75));opacity:0;transform:scale(.3);animation:ldGlint 6s ease-in-out infinite;animation-delay:var(--gd,0s)}
html .ld-grid .ld-t:nth-child(3n+1){--gd:-1.7s}html .ld-grid .ld-t:nth-child(4n+2){--gd:-3.9s}html .ld-grid .ld-t:nth-child(5n+3){--gd:-5.1s}html .ld-grid .ld-t:nth-child(7n){--gd:-2.8s}
@keyframes ldGlint{0%,80%{opacity:0;transform:scale(.3) rotate(0)}87%{opacity:1;transform:scale(1) rotate(25deg)}91%{opacity:.85;transform:scale(.9) rotate(32deg)}97%,100%{opacity:0;transform:scale(.4) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){html .lo.ld .ld-page .ld-t[data-type="colorless"] .ld-c::before{animation:none;opacity:.6;transform:scale(.8)}}
@media (min-width:1400px){html .lo.ld .ld-page .ld-t[data-type="colorless"] .ld-c::before{width:22px;height:22px;top:-3px;right:-3px}}