/* WeirdPad · bone-on-black theme layer
   Palette is taken straight from the mark: near-black ink, bone highlight.
   `!important` is used only where an inline style="" on an element must lose. */

:root{
  --accent:#f1eee3;              /* bone — the mark's own ink */
  --accent-dim:#cfcbbe;
  --up:#f1eee3;                  /* positive · bone */
  --down:#7d7a72;                /* negative · muted stone */
  --glass:rgba(18,18,18,.58);    /* frosted panel */
  --glass-2:rgba(13,13,13,.76);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#0a0a0a;
  --mute:#a5a29a;
  --mute-2:#8b887f;
}

html{background:var(--ink)}
body{
  margin:0;min-height:100vh;color:#f1eee3;
  background:
    radial-gradient(90% 60% at 50% -10%,rgba(241,238,227,.06),transparent 62%),
    linear-gradient(rgba(8,8,8,.88),rgba(8,8,8,.88)),
    url('/assets/glass-hero.jpg') center/cover no-repeat fixed var(--ink)!important;
}
::selection{background:rgba(241,238,227,.28)!important;color:#0a0a0a}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)!important;border-radius:4px}
*::-webkit-scrollbar-track{background:transparent}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* screens */
.screen-app{min-height:100vh;background:linear-gradient(rgba(8,8,8,.34),rgba(8,8,8,.34))}
.screen-landing{position:relative;z-index:0;background:transparent}
.screen-landing::before{content:"";position:absolute;left:0;right:0;top:92vh;bottom:0;z-index:-1;pointer-events:none;background:rgba(8,8,8,.74)}
.site-footer{background:rgba(6,6,6,.58);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}

/* frosted glass surfaces */
.panel,.fade-block,.fcard,.float-card,.refcard{
  background:var(--glass);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 70px -40px rgba(0,0,0,.8);
  backdrop-filter:blur(22px) saturate(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.05);
}
.float-card{background:var(--glass-2)}
.fcard:hover,.refcard:hover{border-color:rgba(241,238,227,.42)}

/* hero */
.hero-l,.hero-r{text-shadow:0 2px 26px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,.4)}
.hero-mark-wrap{position:absolute;left:50%;top:calc(34% + 14px);transform:translate(-50%,-50%);width:clamp(160px,20vw,300px);pointer-events:none}
.hero-mark{display:block;width:100%;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));animation:markIn 1.1s cubic-bezier(.22,1,.36,1) both .15s,floatY 7s ease-in-out 1.5s infinite}
@keyframes markIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}

/* bone CTA — no gradient, the brand is two colours */
.cta-gold{background:var(--accent);color:#0a0a0a}
.cta-gold:hover{box-shadow:0 10px 28px rgba(241,238,227,.22)}

/* docs + methodology */
header.docs-header{position:sticky;top:0;z-index:5;background:rgba(9,9,9,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body>main{max-width:960px;margin:40px auto 56px;padding:52px 48px 64px;background:rgba(10,10,10,.74);border:1px solid var(--line);border-radius:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -50px rgba(0,0,0,.85);backdrop-filter:blur(26px) saturate(1.05);-webkit-backdrop-filter:blur(26px) saturate(1.05)}
body>main table,body>main .formula{background:rgba(255,255,255,.035)}
@media (max-width:700px){body>main{margin:16px 12px 32px;padding:32px 20px 40px;border-radius:18px}}
table,.formula{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.note{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

@media (max-width:900px){body{background-attachment:scroll!important}}
@media (prefers-reduced-motion:reduce){.hero-mark{animation:none}}

/* hero video — røgen ligger bagest, teksten på et lag over */
.hero-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
  animation:videoIn 1.6s ease both .1s}
@keyframes videoIn{from{opacity:0;transform:scale(1.06)}to{opacity:.62;transform:none}}
/* slør kanterne ind i sidens sorte, så videoen ikke ender i en synlig kasse */
.hero-video-veil{position:absolute;inset:0;background:
  radial-gradient(76% 62% at 50% 44%,transparent 0%,rgba(10,10,10,.42) 68%,rgba(10,10,10,.9) 100%),
  linear-gradient(to bottom,rgba(10,10,10,.72) 0%,rgba(10,10,10,.18) 26%,rgba(10,10,10,.3) 62%,var(--ink) 100%)}
.hero-layer{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.hero-video{animation:none;opacity:.5}}

/* my-coins: faste kolonner, så 8 felter brækker 4+4 og ikke 5+3.
   minmax(0,1fr) frem for 1fr — ellers kan kolonnen ikke krympe under sit indhold. */
.datagrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.vestgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.datagrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.datagrid,.vestgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.datagrid,.vestgrid{grid-template-columns:minmax(0,1fr)}}