@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@700&family=Creepster&family=Caprasimo&family=Shrikhand&family=Special+Elite&family=Courier+Prime:wght@700&display=swap");
/* Girls, Guns and Ghouls - shared stylesheet (replaces ov.css, ggg.css, ggghome.css and the frameset) */

:root {
  --sand: #cdbb8f;
  --paper: rgba(247, 237, 217, 0.86); /* blends with the sand to show #f1e6cf (Nov 2026; was rgba(255, 251, 238, 0.86)) */
  --ink: #1d1a14;
  --dark: #353535;
  --darker: #232323;
  --green: #00cc00;
  --green-deep: #008040;
  --purple: #993399;
  --link: #000066;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand) url(sand1.gif);
}

/* ---------- left-hand navigation (replaces the old left frame) ---------- */
.layout {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 1rem;
  background: var(--dark);
  border: 2px solid #111;
  outline: 1px solid #777;
  outline-offset: -5px;
  padding: 1rem 0.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.sidebar .btn { display: block; width: 60px; height: 20px; margin: 0 auto 0.55rem; position: relative; background: none; }
.sidebar .btn img { position: absolute; left: 0; top: 0; width: 60px; height: 20px; border: 0; }
.sidebar .btn img.on { opacity: 0; }
.sidebar .btn:hover img.on, .sidebar .btn:focus-visible img.on { opacity: 1; }
.sidebar .btn:hover, .sidebar .btn:focus-visible { background: none; outline: 1px solid var(--green); }

.site-search { margin: 0.9rem 0 0.9rem; }
.site-search label { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 0.25rem; }
.site-search input[type="search"] {
  width: 100%; font: inherit; font-size: 0.85rem; padding: 0.3rem 0.4rem;
  background: #fffdf5; color: #111; border: 1px solid #888; border-radius: 0;
}
.site-search button {
  width: 100%; margin-top: 0.3rem; font: inherit; font-size: 0.8rem; padding: 0.3rem;
  background: var(--darker); color: var(--green); border: 1px solid var(--green-deep); cursor: pointer;
}
.site-search button:hover { background: var(--purple); }

.rotw { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid #555; text-align: center; }
.rotw-label { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 0.45rem; }
.rotw-link:link, .rotw-link:visited { display: block; color: #fff; text-decoration: none; font-size: 0.95rem; line-height: 1.35; padding: 0.2rem 0.1rem; }
.rotw-link:hover, .rotw-link:focus-visible { background: var(--hot); color: #fff; outline: none; }
.rotw-link:not(.rotw-text) { padding: 0; line-height: 0; }
.rotw-link:not(.rotw-text):hover img, .rotw-link:not(.rotw-text):focus-visible img { outline: 2px solid var(--hot); }
.rotw-thumb { display: block; margin: 0 auto; max-width: 100%; height: auto; border: 1px solid #777; }
.rotw-year { display: block; color: var(--green); font-size: 0.8rem; margin-top: 0.1rem; }

.content { min-width: 0; }

/* ---------- page body ---------- */
.page {
  margin: 0;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  overflow: hidden; /* contain floated images */
}

.page p, .page td, .page li { font-size: 1em; }
.page p { margin: 0 0 1.05em; }

.page img { max-width: 100%; height: auto; }
/* top banners: fill the text column, never above 1.5x native (566px) */
.page img.banner{display:block;width:100%;max-width:849px;height:auto;margin:0 auto 1rem}
.page img[align="left"], .page img.left { float: left; margin: 0.3em 1.2em 0.8em 0; max-width: 45%; }
.page img[align="right"], .page img.right { float: right; margin: 0.3em 0 0.8em 1.2em; max-width: 45%; }
.page div[align="center"] img,
.page center > img { display: block; margin: 0 auto 1rem; }

.page h1, .page h2, .page h3, .page h4 { line-height: 1.25; }

a:link { color: var(--link); }
a:visited { color: #3b2a4d; }
a:hover, a:focus-visible { background: #d9d2c0; color: #000; }

/* the dark "marquee" boxes used on the home page, author page, etc. */
.page table[bgcolor="#353535"] {
  background: var(--dark);
}
.page table[bgcolor="#353535"] td { background: transparent; }
/* rounded corners to match the link cards on links.html (Nov 2026) */
.page table[bgcolor="#353535"] { max-width: 100%; border-radius: .7rem; overflow: hidden; }
.page table[bgcolor="#353535"] a:link,
.page table[bgcolor="#353535"] a:visited,
.page td.quote a:link,
.page td.quote a:visited { color: var(--green); text-decoration: none; }
.page table[bgcolor="#353535"] a:hover,
.page td.quote a:hover { background: var(--purple); color: var(--green); }

/* link boxes on links.html */
.page table[border] { border-collapse: collapse; max-width: 100%; margin: 0 0 0.4rem; background: rgba(255,255,255,0.45); }
.page table[border] td { padding: 0.7rem 0.9rem; border: 1px solid #555; }

/* the A-Z film list */
.page a[name] { scroll-margin-top: 1rem; }

/* contact form */
input[type="text"], input[type="email"], textarea {
  width: 100%;
  max-width: 28rem;
  font: inherit;
  padding: 0.45rem;
  border: 1px solid #555;
  background: #fffdf5;
}
input[type="submit"] {
  font: inherit;
  padding: 0.5rem 1.2rem;
  background: var(--dark);
  color: var(--green);
  border: 1px solid var(--green-deep);
  cursor: pointer;
}
input[type="submit"]:hover { background: var(--purple); }

address { font-size: 0.9rem; margin-top: 1rem; clear: both; }

/* ---------- footer ---------- */
.site-footer {
  margin: 1rem 0 0;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: #3a3426;
}
.site-footer a { color: inherit; }

/* ---------- search results ---------- */
.results { list-style: none; padding: 0; margin: 1rem 0; }
.results li { margin: 0 0 1.1rem; }
.results .r-title { font-weight: bold; font-size: 1.05em; }
.results .r-snip { display: block; font-size: 0.92em; color: #3b362a; }
.results mark { background: #f4e27a; padding: 0 1px; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .layout { display: block; padding: 0; }
  .sidebar { position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.9rem; padding: 0.7rem 0.5rem; }
  .sidebar .btn { margin: 0; }
  .site-search { flex: 1 1 100%; margin: 0; display: flex; gap: 0.3rem; }
  .site-search label { display: none; }
  .site-search input[type="search"] { flex: 1; }
  .site-search button { width: auto; margin: 0; padding: 0.3rem 0.8rem; }
  .rotw { display: none; }
  .page { border-left: 0; border-right: 0; }
  .page img[align="left"], .page img[align="right"],
  .page img.left, .page img.right { float: none; display: block; margin: 0.5em auto; max-width: 100%; }
  .page table { display: block; overflow-x: auto; }
}

/* film title on review pages: one extra line of space beneath */
.page .ftitle { display: block; padding-bottom: 1.1em; }

/* contact form */
.contact { max-width: 30rem; }
.contact label { display: block; margin: 0 0 0.9rem; }
.contact label span { display: block; margin-bottom: 0.25rem; }
.contact textarea { max-width: 100%; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact .form-status { margin: 0.9rem 0 0; font-weight: bold; }

/* animated home page banners */
.gx-hero{position:relative;width:100%;max-width:849px;aspect-ratio:566/154;margin:0 auto 1rem;background:#000;overflow:hidden;outline:3px solid #000}
.gx-hero img.gx-base,.gx-hero img.gx-txt,.gx-hero img.gx-glow{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;margin:0!important}
.gx-sky{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-mask-image:url(ggggredown2-smokemask.png);mask-image:url(ggggredown2-smokemask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.gx-flash{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse 36% 70% at 42% 22%,rgba(120,160,225,.5),rgba(90,130,205,.22) 55%,rgba(80,120,200,0) 100%);animation:gx-flash 26s linear infinite}
@keyframes gx-flash{0%,29.99%{opacity:0}30%{opacity:.95}30.6%{opacity:.25}31.6%{opacity:1}33%{opacity:.35}36%{opacity:0}100%{opacity:0}}
.gx-bolt{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;animation:gx-bolt 26s linear infinite}
@keyframes gx-bolt{0%,29.99%{opacity:0}30%{opacity:1}30.5%{opacity:1}30.51%{opacity:0}31.59%{opacity:0}31.6%{opacity:.9}32.2%{opacity:.9}32.21%{opacity:0}100%{opacity:0}}
.gx-glow{mix-blend-mode:screen;filter:blur(.9px) brightness(1.35) drop-shadow(0 0 3px rgba(190,255,215,.9)) drop-shadow(0 0 7px rgba(150,255,190,.55));opacity:0}
.gx-glow.l{animation:gx-pulse 8s ease-in-out infinite}
.gx-glow.r{animation:gx-pulse 8s ease-in-out -3.3s infinite}
@keyframes gx-pulse{0%,100%{opacity:.18}50%{opacity:1}}
.gx-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.gx-fx .st{opacity:0;transform-box:fill-box;transform-origin:center}
.gx-fx .g1{animation:gx-g1 26s ease-out infinite}
.gx-fx .g2{animation:gx-g2 26s ease-out infinite}
.gx-fx .g3{animation:gx-g3 26s ease-out infinite}
.gx-fx .g4{animation:gx-g4 26s ease-out infinite}
@keyframes gx-g1{0%,29.9%{opacity:0;transform:scale(.1)}30.6%{opacity:1;transform:scale(1) rotate(6deg)}33.5%{opacity:.35;transform:scale(.5) rotate(14deg)}35.5%{opacity:0;transform:scale(.2) rotate(20deg)}61%{opacity:0;transform:scale(.1)}62.2%{opacity:.7;transform:scale(.7) rotate(6deg)}64%{opacity:0;transform:scale(.3) rotate(14deg)}100%{opacity:0}}
@keyframes gx-g2{0%,29.9%{opacity:0;transform:scale(.1)}30.8%{opacity:1;transform:scale(1) rotate(6deg)}33.8%{opacity:.35;transform:scale(.5) rotate(14deg)}35.8%{opacity:0;transform:scale(.2) rotate(20deg)}79%{opacity:0;transform:scale(.1)}80.2%{opacity:.8;transform:scale(.9) rotate(6deg)}82%{opacity:0;transform:scale(.3) rotate(14deg)}100%{opacity:0}}
@keyframes gx-g3{0%,29.9%{opacity:0;transform:scale(.1)}30.9%{opacity:.9;transform:scale(1) rotate(6deg)}33.5%{opacity:.25;transform:scale(.5)}35%{opacity:0}46.5%{opacity:0;transform:scale(.1)}47.7%{opacity:.7;transform:scale(.8) rotate(6deg)}49.5%{opacity:0}100%{opacity:0}}
@keyframes gx-g4{0%,29.9%{opacity:0;transform:scale(.1)}30.7%{opacity:1;transform:scale(1) rotate(6deg)}33.5%{opacity:.3;transform:scale(.5)}35%{opacity:0}69%{opacity:0;transform:scale(.1)}70.3%{opacity:.9;transform:scale(.9) rotate(6deg)}72.2%{opacity:0;transform:scale(.3) rotate(14deg)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gx-glow,.gx-flash,.gx-bolt,.gx-fx .st{animation:none}.gx-glow{opacity:.4}.gx-flash,.gx-bolt,.gx-fx{display:none}}

.gc-hero{position:relative;width:100%;max-width:849px;aspect-ratio:566/154;margin:0 auto 1rem;background:#000;overflow:hidden;outline:3px solid #000}
.gc-hero img.gc-base{display:block;width:100%;height:100%;max-width:none;margin:0}
.gc-eye{position:absolute;width:3.1%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,246,215,.95) 0,rgba(255,228,150,.36) 15%,rgba(255,200,110,.08) 34%,transparent 50%);animation:gc-eye 7.5s ease-in-out infinite}
.gc-eye.l{left:84.28%;top:23.16%}
.gc-eye.r{left:87.57%;top:24.03%;animation-delay:-3.1s}
@keyframes gc-eye{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.8)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.15)}}
.gc-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.gc-fx .st,.gc-fx .sh{opacity:0;transform-box:fill-box;transform-origin:center}
.gc-fx .k{animation:gc-flare 11s ease-out 2s infinite}
.gc-fx .b{animation:gc-flare 17s ease-out 8s infinite}
.gc-fx .sh{animation:gc-shine 11s ease-out 2s infinite}
@keyframes gc-flare{0%,88%{opacity:0;transform:scale(.1) rotate(0deg)}91%{opacity:1;transform:scale(1) rotate(6deg)}96%{opacity:.35;transform:scale(.5) rotate(14deg)}100%{opacity:0;transform:scale(.2) rotate(20deg)}}
@keyframes gc-shine{0%,88%{opacity:0}91%{opacity:.6}97%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gc-eye{animation:none;opacity:.4}.gc-fx{display:none}}

.gm-hero{position:relative;width:100%;max-width:849px;aspect-ratio:566/154;margin:0 auto 1rem;background:#000;overflow:hidden;outline:3px solid #000}
.gm-hero img.gm-base,.gm-hero img.gm-orig{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;margin:0}
.gm-hero img.gm-orig{display:none}
.gm-svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.gm-flames{mix-blend-mode:screen}
.gm-flames .fl{transform-box:fill-box;transform-origin:50% 100%}
.gm-flames .f1{animation:gm-fa 2.1s ease-in-out infinite}
.gm-flames .f2{animation:gm-fb 1.7s ease-in-out -.6s infinite}
.gm-flames .f3{animation:gm-fc 2.6s ease-in-out -1.3s infinite}
.gm-flames .ha{animation:gm-halo 2.3s ease-in-out infinite}
.gm-flames .ha2{animation-duration:1.9s;animation-delay:-.8s}
.gm-flames .ha3{animation-duration:2.9s;animation-delay:-1.9s}
@keyframes gm-fa{0%,100%{transform:scale(1,1) skewX(0);opacity:.95}14%{transform:scale(.92,1.08) skewX(-3deg);opacity:1}30%{transform:scale(1.05,.92) skewX(2.5deg);opacity:.86}46%{transform:scale(.96,1.05) skewX(-1deg);opacity:1}62%{transform:scale(1.03,.78) skewX(3.5deg);opacity:.8}70%{transform:scale(.95,1.1) skewX(-2.5deg);opacity:1}86%{transform:scale(1.02,.96) skewX(1deg);opacity:.92}}
@keyframes gm-fb{0%,100%{transform:scale(1,1) skewX(0);opacity:1}18%{transform:scale(1.06,.9) skewX(2deg);opacity:.85}35%{transform:scale(.93,1.1) skewX(-3deg);opacity:1}52%{transform:scale(1.02,.95) skewX(1.5deg);opacity:.9}74%{transform:scale(.96,1.07) skewX(-2deg);opacity:1}88%{transform:scale(1.04,.88) skewX(2.5deg);opacity:.82}}
@keyframes gm-fc{0%,100%{transform:scale(1,1) skewX(0);opacity:.92}10%{transform:scale(.94,1.06) skewX(-2deg);opacity:1}28%{transform:scale(1.04,.94) skewX(2deg);opacity:.88}44%{transform:scale(.97,1.09) skewX(-3deg);opacity:1}57%{transform:scale(1.05,.82) skewX(3deg);opacity:.78}78%{transform:scale(.96,1.04) skewX(-1deg);opacity:1}}
@keyframes gm-halo{0%,100%{opacity:.7}25%{opacity:1}45%{opacity:.6}70%{opacity:.95}85%{opacity:.65}}
.gm-eyes .cl{opacity:.2;animation:gm-cl 6.4s ease-in-out infinite}
.gm-eyes .cl.r{animation-delay:-2.4s}
.gm-eyes .lid{opacity:0;animation:gm-lid 8.6s ease-in-out infinite}
.gm-eyes .lid.r{animation-delay:-3.7s}
@keyframes gm-cl{0%,100%{opacity:.18;transform:translate(0,0)}35%{opacity:.7;transform:translate(.25px,.1px)}60%{opacity:.5;transform:translate(.1px,.2px)}}
@keyframes gm-lid{0%,100%{opacity:0}40%{opacity:.3}65%{opacity:.18}}
.gm-sau{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.gm-sau.s1{-webkit-mask-image:url(gggmanos-saucermask1.png);mask-image:url(gggmanos-saucermask1.png)}
.gm-sau.s2{-webkit-mask-image:url(gggmanos-saucermask2.png);mask-image:url(gggmanos-saucermask2.png)}
.gm-sau.s3{-webkit-mask-image:url(gggmanos-saucermask3.png);mask-image:url(gggmanos-saucermask3.png)}
.gm-sau img.gm-gl{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;margin:0!important;filter:brightness(1.75) contrast(1.3) saturate(.85);opacity:0;animation:gm-glis 7s ease-in-out infinite}
.gm-sau.s2 img.gm-gl{animation-duration:9.5s;animation-delay:-3.5s}
.gm-sau.s3 img.gm-gl{animation-duration:8.2s;animation-delay:-6s}
@keyframes gm-glis{0%,100%{opacity:0}42%{opacity:.62}58%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.gm-flames .fl,.gm-flames .ha,.gm-eyes .cl,.gm-eyes .lid,.gm-sau img.gm-gl{animation:none}.gm-eyes .cl{opacity:.4}.gm-sau{display:none}}

.gs-hero{position:relative;width:100%;max-width:849px;aspect-ratio:566/163;margin:0 auto 1rem;background:#000;overflow:hidden;outline:3px solid #000}
.gs-hero img.gs-base,.gs-hero img.gs-glow{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;margin:0!important}
.gs-glow{mix-blend-mode:screen;filter:blur(.9px) brightness(1.3) drop-shadow(0 0 3px rgba(190,255,215,.8)) drop-shadow(0 0 7px rgba(150,255,190,.5));opacity:0;animation:gs-text 8.5s ease-in-out infinite}
@keyframes gs-text{0%,100%{opacity:.12}50%{opacity:.85}}
.gs-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.gs-fx .eye{transform-box:fill-box;transform-origin:center;animation:gs-eye 7.5s ease-in-out infinite}
.gs-fx .eye.r{animation-delay:-2.9s}
@keyframes gs-eye{0%,100%{opacity:.4;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}
.gs-fx .lens{opacity:0;animation:gs-lens 9.5s ease-in-out -2s infinite}
@keyframes gs-lens{0%,100%{opacity:.08}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.gs-glow,.gs-fx .eye,.gs-fx .lens{animation:none}.gs-glow{opacity:.25}.gs-fx .eye{opacity:.6}.gs-fx .lens{opacity:.25}}
/* ---------- nav in Creepster: white, centred (colour is on .sidebar .btn, size is --fs) ---------- */
:root { --hot: #993399; }
.sidebar { width: 100%; padding: 1.1rem 0.9rem 1rem; text-align: left; --fs: 1.6rem; }
.sidebar .btn {
  display: block; width: auto; height: auto; margin: 0 0 0.35rem; padding: 0.05rem 0 0.05rem 0.7rem; position: relative;
  font-family: "Creepster", "Chiller", Impact, "Arial Black", sans-serif; font-weight: 400;
  font-size: var(--fs); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: none;
  border-left: 3px solid transparent; transition: transform .2s ease, filter .2s ease;
}
/* keep the link's name for screen readers, hide the old picture */
.sidebar .btn img { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.sidebar .btn img.on { display: none; }
.sidebar .btn::after { display: block; white-space: nowrap; }
.sidebar .btn[href="index.html"]::after { content: "Home"; }
.sidebar .btn[href="reviewlist.html"]::after { content: "Film list"; }
.sidebar .btn[href="links.html"]::after { content: "Links"; }
.sidebar .btn[href="me.html"]::after { content: "Author"; }
.sidebar .btn[href="email.html"]::after { content: "Email"; }
.sidebar .btn:hover, .sidebar .btn:focus-visible { background: none; outline: none; transform: translateX(0.25rem); filter: brightness(1.2) drop-shadow(0 0 6px rgba(0, 204, 0, .55)); }
.sidebar .btn:focus-visible, .sidebar .btn.here { border-left-color: var(--green); }

.site-search { margin: 1.1rem 0 1rem; }
.site-search label, .rotw-label {
  font-family: "Saira Condensed", "Arial Narrow", "DejaVu Sans Condensed", sans-serif; font-weight: 700;
  font-size: 1.2rem; letter-spacing: 0.04em; line-height: 1.1; color: var(--green); text-transform: lowercase; text-align: center;
}
.site-search label { margin-bottom: 0.3rem; }
.site-search label::first-letter, .rotw-label::first-letter { text-transform: uppercase; }
.rotw { text-align: center; }
.rotw-link:not(.rotw-text) { display: block; }
.rotw-thumb { margin: 0 auto; }


/* centred: words sit in the middle of the sidebar, the current page is underlined */
.sidebar { text-align: center; }
.sidebar .btn { width: fit-content; max-width: 100%; margin: 0 auto 0.35rem; padding: 0.05rem 0.45rem 0.1rem; border-left: 0; border-bottom: 3px solid transparent; }
.sidebar .btn:hover, .sidebar .btn:focus-visible { transform: scale(1.06); }
.sidebar .btn:focus-visible, .sidebar .btn.here { border-left-color: transparent; border-bottom-color: var(--green); }

@media (max-width: 760px) {
  .sidebar { padding: 0.7rem 0.6rem; text-align: center; --fs: 1.35rem; }
  .sidebar .btn { padding: 0.05rem 0.3rem 0.1rem; border-left: 0; border-bottom: 3px solid transparent; margin: 0; }
  .sidebar .btn.here { border-left: 0; border-bottom-color: var(--green); }
  .sidebar .btn:focus-visible { border-bottom-color: var(--green); }
  .site-search label { display: none; }
}

/* ---------- nav hover glow + review of the week spacing (v9) ---------- */
/* glow follows the letters (text-shadow) rather than a blurred box, so no rectangle can appear */
.sidebar .btn { transition: transform .25s ease, text-shadow .35s ease; -webkit-tap-highlight-color: transparent; }
.sidebar .btn:hover, .sidebar .btn:focus-visible, .sidebar .btn:active {
  background: none; outline: none; box-shadow: none; filter: none; transform: scale(1.06);
  text-shadow: 0 0 .12em rgba(170, 255, 170, .95), 0 0 .4em rgba(0, 204, 0, .85), 0 0 .9em rgba(0, 204, 0, .55);
}
.rotw-label { margin-bottom: 0.8rem; }
.rotw { padding-bottom: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .sidebar .btn { transition: none; } .sidebar .btn:hover, .sidebar .btn:focus-visible { transform: none; } }
.page a.rss-ico, .page a.rss-ico:hover, .page a.rss-ico:focus-visible, .page table[bgcolor="#353535"] a.rss-ico:hover { background: none; text-decoration: none; display: inline-block; vertical-align: middle; line-height: 0; }
.page a.rss-ico:focus-visible { outline: 2px solid #00CC00; outline-offset: 2px; }

/* ---- Seventies touches (Nov 2026) ---- */

/* 1. Drop cap: the build adds class="dropcap" to the first real paragraph of each review
   (skipping "Also known as" paragraphs). Add it by hand to any other paragraph you want.
   It sits two lines deep so the text wraps snugly around it. */
p.dropcap::first-letter {
  font-family: "Caprasimo", "Cooper Black", Georgia, serif;
  color: #b4441c;
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding: 0.04em 0.28em 0 0;
}
@supports ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
  p.dropcap::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    -webkit-initial-letter: 2;
    initial-letter: 2;
    margin-right: 0.36em;
  }
}

/* 2. Film list: A-Z headings as little gold suns (decade headings become gold pills).
   The letter is trimmed to its capital height so it sits dead centre in the circle. */
.grp .letter {
  display: inline-block;
  box-sizing: border-box;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: #e9a93a;
  color: #2e1b12;
  font-family: "Caprasimo", "Cooper Black", Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 2.6rem;
  text-align: center;
  box-shadow: 3px 3px 0 #b4441c;
  margin: 0 0 calc(0.5rem + 3px);
}
@supports (text-box: trim-both cap alphabetic) {
  .grp .letter {
    line-height: 1;
    text-box: trim-both cap alphabetic;
    padding-block: calc((2.6rem - 1cap) / 2);
  }
}

/* ---- Sunburst behind the left-hand menu (Nov 2026) ----
   Faint gold, orange and red rays turn slowly behind the menu, centred on the panel.
   One full turn takes 90 seconds. Stays still if the visitor has "reduce motion" switched on.
   To make the rays stronger or fainter, change the last number in each rgba(...) below. */
.sidebar { overflow: hidden; isolation: isolate; }
.sidebar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(from 10deg at 50% 50%,
    rgba(255, 182, 39, .16) 0 7.5deg, transparent 7.5deg 15deg,
    rgba(255, 95, 31, .15) 15deg 22.5deg, transparent 22.5deg 30deg,
    rgba(196, 30, 58, .2) 30deg 37.5deg, transparent 37.5deg 45deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0, #000 60px, rgba(0, 0, 0, .55) 170px, transparent 340px);
          mask: radial-gradient(circle at 50% 50%, #000 0, #000 60px, rgba(0, 0, 0, .55) 170px, transparent 340px);
  transform-origin: 50% 50%;
  animation: gg-rays 90s linear infinite;
}
@keyframes gg-rays { to { transform: rotate(360deg); } }
/* phones: the menu bar keeps scrolling with the page as before; this just gives the rays a frame to sit in */
@media (max-width: 760px) { .sidebar { position: relative; } }
@media (prefers-reduced-motion: reduce) { .sidebar::before { animation: none; } }

/* ---- Honest-to-goodness fake advertising material (Nov 2026) ----
   One made-up advert, picked at random by ads.js, under the copyright line of each review.
   The box stays hidden until ads.js has filled it, so nothing shows if scripts are off. */
.ad-reel { clear: both; max-width: 849px; margin: 1.6rem auto .4rem; }
.ad-reel:not(.ready) { display: none; }
.ad-reel-label { margin: 0 0 .45rem; font-family: "Saira Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #3a3426; }
.gv-ad { position: relative; overflow: hidden; container-type: inline-size; width: 100%; aspect-ratio: 566 / 154; outline: 3px solid #000; background: #f1e6cf; color: #141210; }
.gv-ad::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(20, 18, 16, .07) 1px, transparent 1.4px); background-size: 6px 6px; mix-blend-mode: multiply; }
.page .gv-ad svg, .page .gv-ad img { max-width: none; margin: 0; }
.gv-swirl { position: absolute; width: 31cqw; height: 31cqw; top: -2cqw; border-radius: 50%; mix-blend-mode: multiply; animation: gv-spin 14s linear infinite; }
.gv-swirl.r { left: 1.5cqw; }
.gv-swirl.g { left: 9cqw; animation-direction: reverse; animation-duration: 17s; }
.gv-swirl svg { display: block; width: 100%; height: 100%; }
.gv-glasses { position: absolute; z-index: 2; width: 30cqw; left: 5cqw; top: 6.6cqw; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .35)); }
.gv-glasses svg { display: block; width: 100%; height: auto; overflow: visible; }
.gv-lens { transform-box: fill-box; transform-origin: center; animation: gv-spin 9s linear infinite; }
.gv-lens.g { animation-direction: reverse; animation-duration: 11s; }
@keyframes gv-spin { to { transform: rotate(360deg); } }
.gv-txt { position: absolute; z-index: 3; left: 40.6cqw; right: 1.2cqw; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: .9cqw; }
.gv-excl { font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; text-transform: uppercase; font-size: 2.35cqw; letter-spacing: .07em; word-spacing: -.3em; white-space: nowrap; }
.gv-excl b { color: #e0202e; }
.gv-pres { font-family: "Saira Condensed", "Arial Narrow", sans-serif; font-weight: 600; font-size: 2.6cqw; line-height: 1.1; white-space: nowrap; }
.gv-glorious { font-weight: 700; font-style: italic; font-size: 1.15em; color: #e0202e; }
.gv-vision { font-family: "Bungee", "Arial Black", Impact, sans-serif; font-size: 6.6cqw; line-height: .92; letter-spacing: .01em; white-space: nowrap;
  text-shadow: -.06em 0 0 rgba(224, 32, 46, .85), .06em 0 0 rgba(0, 166, 81, .85); animation: gv-wobble 6s ease-in-out infinite; }
@keyframes gv-wobble { 50% { text-shadow: -.035em 0 0 rgba(224, 32, 46, .85), .035em 0 0 rgba(0, 166, 81, .85); } }
.gv-counter { align-self: flex-start; margin-top: .6cqw; font-family: "Saira Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 1.9cqw; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4em; background: #141210; color: #f1e6cf; padding: .25em .7em .25em .55em;
  clip-path: polygon(0 0, calc(100% - .7em) 0, 100% 50%, calc(100% - .7em) 100%, 0 100%, .35em 50%); }
.gv-counter i { font-style: normal; color: #00cc00; }
.gv-bally { position: absolute; z-index: 3; font-family: "Creepster", cursive; font-size: 3.8cqw; line-height: 1; text-shadow: .05em .05em 0 #f1e6cf; }
.gv-top { left: 1.6cqw; top: 1.4cqw; color: #00a651; transform: rotate(-12deg); }
.gv-bottom { left: 28.5cqw; bottom: 1.6cqw; color: #e0202e; transform: rotate(9deg); }
/* Japanese and Cantonese lettering */
.gv-ad:is([lang="ja"], [lang="zh-HK"]) :is(.gv-excl, .gv-pres, .gv-counter) { font-weight: 900; letter-spacing: .05em; word-spacing: 0; }
.gv-ad:is([lang="ja"], [lang="zh-HK"]) .gv-glorious { font-style: normal; }
.gv-ad[lang="ja"] :is(.gv-excl, .gv-pres, .gv-counter) { font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", sans-serif; }
.gv-ad[lang="zh-HK"] :is(.gv-excl, .gv-pres, .gv-counter) { font-family: "Noto Sans HK", "Noto Sans CJK TC", "PingFang HK", "Microsoft JhengHei", sans-serif; }
.gv-ad[lang="ja"] :is(.gv-vision, .gv-bally) { font-family: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", serif; font-weight: 900; }
.gv-ad[lang="zh-HK"] :is(.gv-vision, .gv-bally) { font-family: "Noto Serif HK", "Noto Serif CJK TC", "Songti TC", serif; font-weight: 900; }
.gv-ad:is([lang="ja"], [lang="zh-HK"]) .gv-excl { font-size: 2.5cqw; }
.gv-ad:is([lang="ja"], [lang="zh-HK"]) .gv-pres { font-size: 2.9cqw; }
.gv-ad:is([lang="ja"], [lang="zh-HK"]) .gv-vision { font-size: 6.3cqw; letter-spacing: .03em; }
.gv-ad:is([lang="ja"], [lang="zh-HK"]) .gv-bally { font-size: 4.2cqw; }
.gv-vision small { font-family: "Bungee", "Arial Black", sans-serif; font-size: .32em; letter-spacing: .02em; vertical-align: middle; margin-left: .4em; }
@media (prefers-reduced-motion: reduce) { .gv-swirl, .gv-lens, .gv-vision { animation: none; } }

/* ---- Boris's sign-off (Nov 2026) ----
   Replaces the old skull + copyright line at the foot of every page.
   The build (transform.py) keeps each page's own name (nicknames included) and year. */
.signoff { clear: both; max-width: 34rem; margin: 2rem auto 1.4rem; text-align: center; color: #b4441c; }
.signoff .so-line { font-family: "Shrikhand", "Cooper Black", Georgia, serif; font-size: clamp(1.6rem, 5.2vw, 2.4rem); line-height: 1.1; color: #b4441c; margin: 0 0 .5rem; text-wrap: balance; }
.signoff .so-by { display: inline-flex; align-items: center; gap: .55rem; font-family: "Special Elite", "Courier New", monospace; font-size: 1.2rem; line-height: 1.3; color: #b4441c; }
.page .signoff .so-by img { width: 22px; height: auto; float: none; margin: 0; display: inline; flex: none; }
.signoff .so-copy { display: block; margin-top: .35rem; font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #b4441c; }

/* ---------- SEO pass: real headings keep the old look; skull stays left on phones ---------- */
.page h1.ftitle { font-size: 1em; line-height: inherit; margin: 0; text-wrap: wrap; }
/* ---------- genre lettering for review titles: white with a black border, font by first genre ---------- */
.page h1.ftitle.lt {
  font-family: var(--ff), Impact, "Arial Black", sans-serif; font-weight: 400; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.04;
  text-align: left; margin: .55em 0 .55em; padding: 0 0 0 .07em; max-width: none; color: #fff;
  -webkit-text-stroke: .15em #000; paint-order: stroke fill; text-shadow: 0 .05em 0 #000;
  text-wrap: balance; overflow-wrap: anywhere;
}
.page h1.ftitle.lt small { font-size: .5em; letter-spacing: .04em; white-space: nowrap; }
.t-horror { --ff: "Creepster"; }
.t-scifi { --ff: "Orbitron"; font-weight: 900 !important; }
.t-sex { --ff: "Pacifico"; }
.t-asia { --ff: "Dela Gothic One"; }
.t-blax { --ff: "Chango"; }
.t-drivein { --ff: "Bangers"; }
.t-euro { --ff: "Cinzel Decorative"; font-weight: 900 !important; }
.t-arthouse { --ff: "Abril Fatface"; }
.t-action { --ff: "Black Ops One"; }
.t-wip { --ff: "Stardos Stencil"; font-weight: 700 !important; }
.t-oz { --ff: "Rye"; }
.t-giallo { --ff: "Yeseva One"; }
.t-bikers { --ff: "Pirata One"; }
/* Review of the Week thumbnail: shown at 150 px wide; the files are stored at double size so they stay sharp */
.rotw-thumb { width: 150px; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* keep the skull and the (c) line together, so whatever follows starts below them */
.page :is(p, address, div):has(> img[src="skull.gif"]),
.page :is(p, address, div):has(> small > img[src="skull.gif"]) { display: flow-root; }
@media (max-width: 760px) {
  .page img[src="skull.gif"] { float: left; display: inline; margin: 0.3em 1.2em 0.8em 0; max-width: none; }
}
.sidebar .btn[href="art.html"]::after { content: "Art"; }