/* =====================================================================
   EXTRA STYLES  (load this file AFTER style.css)
   Everything new lives here, so your existing style.css can stay as it is.
   What this file does:
     1. no shadows, no gradients, no filters (lighter and smoother)
     2. thin gold borders drawn as real borders
     3. a gold pattern behind the name and the pages
     4. camera mouse pointer on every page of the site
     5. side words, footer line, Terms link
     6. the fuller About page
     7. dive animation layer
   ===================================================================== */
:root{
  --gold:#d4af37;
}

/* ---------- 1. no shadows, no gradients, no filters ---------- */
*{text-shadow:none!important}
.frame,.hcard,.ctile,.lb .big,.aportrait,.cthumb,.logo{box-shadow:none!important}
.cam,.cam svg,.frame,.world{filter:none!important}
.hbig small{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
.ctile span{background:transparent!important}

/* ---------- 2. thin gold borders (real borders, not shadows) ---------- */
.frame{border:2px solid var(--frame)!important}
.hcard,.ctile{border:2px solid var(--frame)}
.lb .big{border:3px solid var(--frame)}
.aportrait{border:3px solid var(--frame);background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:cover,auto 62%}

/* ---------- 3. small random twinkling stars behind the pages (made by js/stars.js) ---------- */
.stars{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cats>.stars,.panel>.stars{z-index:-1}

/* header buttons: no solid fill, just a gold underline */
header .grp{gap:clamp(16px,3vw,30px)}
header .grp button.nav{background:none;color:var(--gold);border:0;border-radius:0;padding:6px 2px;font-size:13px;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:8px;transition:text-underline-offset .2s,color .2s}
header .grp button.nav:hover,header .grp button.nav:focus-visible{color:#fff3b0;text-underline-offset:11px;outline:none}

/* About page: the Back button stays on screen while you scroll; logo in the top-left of Categories */
.panel>.nav{position:fixed;z-index:3}
.cbrand{position:fixed;z-index:2;top:calc(10px + env(safe-area-inset-top,0px));left:clamp(16px,4vw,40px);pointer-events:none}

/* category rail: the tile in the middle is big, the others are small (scale is set in js/categories-view.js) */
.htrack{gap:clamp(4px,1vw,14px)}

/* bigger category tiles so the photo in the middle is easy to see */
.hcard{--ch:min(calc(100vh - 230px),780px,calc(84vw / .8));--ch:min(calc(100svh - 230px),780px,calc(84vw / .8));height:var(--ch);width:calc(var(--ch) * .8)}
.htrack{padding-top:70px;padding-bottom:130px}
@media (max-height:500px){.hcard{--ch:calc(100vh - 150px);--ch:calc(100svh - 150px)}.htrack{padding-top:60px;padding-bottom:90px}}


/* ---------- 4. camera pointer everywhere ---------- */
@media (hover:hover) and (pointer:fine){html,body,*{cursor:none!important}}

/* ---------- 5. side words, footer, Terms link ---------- */
.side{display:none;position:fixed;top:50%;z-index:1;writing-mode:vertical-rl;font:500 10.5px/1 "DM Sans",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.6;pointer-events:none;white-space:nowrap}
.side.l{left:clamp(10px,2vw,28px);transform:translateY(-50%) rotate(180deg)}
.side.r{right:clamp(10px,2vw,28px);transform:translateY(-50%)}
.foot{display:none;position:fixed;z-index:5;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font:400 12px/1.4 "DM Sans",sans-serif;color:var(--text);opacity:.75;white-space:nowrap}
.foot a{color:var(--gold);text-decoration:none;pointer-events:auto}
.foot a:hover,.foot a:focus-visible{text-decoration:underline;outline:none}
@media (min-width:900px) and (min-height:560px){.side,.foot{display:block}}
a.nav{display:inline-block;background:none;color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:9px 18px;font:500 13px Unbounded,"Arial Black",sans-serif;text-decoration:none}
a.nav:hover,a.nav:focus-visible{background:var(--gold);color:#0a0912;outline:none}
@media (max-width:420px){a.nav{padding:8px 12px;font-size:12px}}

/* ---------- 6. the fuller About page ---------- */
.about-body{padding-bottom:40px}
.asec{margin-top:clamp(36px,6vw,80px);padding-top:clamp(20px,3vw,36px);border-top:1px solid rgba(212,175,55,.3)}
.asec>h3{margin:0 0 18px;font:800 clamp(20px,3.2vw,34px)/1.1 Unbounded,"Arial Black",sans-serif;letter-spacing:-.02em;color:var(--gold)}
.achips{display:flex;flex-wrap:wrap;gap:10px}
.achips b{border:1px solid rgba(212,175,55,.6);color:var(--text);padding:8px 16px;border-radius:99px;font-weight:500;font-size:.95em}
.acards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.acard{border:1px solid rgba(212,175,55,.4);border-radius:14px;padding:18px;background:rgba(8,7,15,.88)}
.acard .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font:800 14px Unbounded,sans-serif;margin-bottom:10px}
.acard h4{margin:0 0 6px;font:800 16px/1.2 Unbounded,"Arial Black",sans-serif;color:var(--text)}
.acard p{margin:0;font-size:.95em;opacity:.9}
.afaq details{border-bottom:1px solid rgba(212,175,55,.3);padding:12px 0}
.afaq summary{cursor:none;font-weight:500;font-size:1.05em;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--text)}
.afaq summary::-webkit-details-marker{display:none}
.afaq summary::after{content:"+";color:var(--gold);font-weight:800}
.afaq details[open] summary::after{content:"\2212"}
.afaq p{margin:10px 0 0;max-width:62ch;opacity:.9}
.afoot{margin-top:clamp(36px,6vw,80px);padding-top:18px;border-top:1px solid rgba(212,175,55,.3);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.9em;opacity:.9}
.afoot a{color:var(--gold);text-decoration:none}
.afoot a:hover,.afoot a:focus-visible{text-decoration:underline;outline:none}

/* ---------- 7. dive animation layer ---------- */
.dive{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;display:none;background:var(--page-bg);overflow:hidden;pointer-events:none}
.dive.on{display:block}
.diveFlash{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gold);opacity:0}
.panel{z-index:34}

/* logo exactly as supplied: no badge, no ring, no rounded corners */
.logo{background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}