/* Granite trial: loads after style.css and recolours the site. A warm stone grey (not blue slate),
   the wisp's cyan as the one bright colour, and pale quartz text. Only while the page's look is granite: the header's button sets
   data-look on <html> (look.js) and remembers it per browser. */
html[data-look="granite"] {
  --g-deep: #1c1e1d;      /* top bar, footer, table heads */
  --g-base: #2b2d2b;      /* the page */
  --g-raise: #343734;     /* alternate sections, cards */
  --g-edge: #121313;      /* hard outlines (was ink) */
  --g-line: #4a4e4a;      /* soft dividers */
  --g-stone: #858a83;     /* frame trim (was gold trim) */
  --quartz: #e2ded3;      /* text */
  --quartz-soft: #aaaca3; /* quieter text */
  --wisp: #72d9ee;
  --wisp-deep: #2a93ab;
  --wisp-ink: #0f262c;    /* text on wisp-coloured buttons */

  --ink: var(--g-edge);
  --ink-soft: var(--quartz-soft);
  --parchment: var(--quartz);
  --parchment-2: var(--quartz-soft);
  --trim: var(--g-stone);
  color-scheme: dark;
}

html[data-look="granite"] body {
  color: var(--quartz);
  background: var(--g-base);
}
html[data-look="granite"] a { color: var(--wisp); }
html[data-look="granite"] a:hover { color: #b7eef8; }
html[data-look="granite"] h2, html[data-look="granite"] h3, html[data-look="granite"] .update h4, html[data-look="granite"] .skill b, html[data-look="granite"] summary { color: #efece4; }

html[data-look="granite"] .topbar { background: var(--g-deep); border-bottom-color: var(--g-line); }
html[data-look="granite"] .brand { color: var(--quartz); }

html[data-look="granite"] .button { background: var(--wisp); color: var(--wisp-ink); border-color: var(--g-edge); box-shadow: inset 0 -5px 0 var(--wisp-deep); }
html[data-look="granite"] .button:hover { background: #a2e8f5; color: var(--wisp-ink); }
html[data-look="granite"] .button:active { box-shadow: inset 0 3px 0 var(--wisp-deep); }
html[data-look="granite"] .button.small { box-shadow: inset 0 -4px 0 var(--wisp-deep); }

html[data-look="granite"] .hero::after { background: linear-gradient(to bottom, rgba(28,30,29,0) 40%, rgba(28,30,29,.8)); }
html[data-look="granite"] .panel { background: rgba(28, 30, 29, .93); border-color: var(--g-stone); outline-color: var(--g-edge); }
html[data-look="granite"] .panel h1 { color: #f2efe7; text-shadow: 3px 3px 0 var(--g-edge), 0 0 16px rgba(114, 217, 238, .55), 0 0 36px rgba(114, 217, 238, .3); }

html[data-look="granite"] .strip { background: var(--g-raise); border-color: var(--g-edge); }
html[data-look="granite"] .strip b { color: var(--wisp); }

html[data-look="granite"] section.alt { background: rgba(255, 255, 255, .035); border-color: var(--g-line); }
html[data-look="granite"] .place figure { border-color: var(--g-edge); outline-color: var(--g-stone); background: var(--g-edge); }

html[data-look="granite"] .update { background: var(--g-raise); border-color: var(--g-edge); }
html[data-look="granite"] .alt .update { background: var(--g-base); }
html[data-look="granite"] .update .ver { background: var(--wisp-deep); color: #fff; }
html[data-look="granite"] details { border-bottom-color: var(--g-line); }

html[data-look="granite"] footer { background: var(--g-deep); color: var(--quartz-soft); border-top: 3px solid var(--g-line); }

html[data-look="granite"] .status .dot { background: #6d716b; }

html[data-look="granite"] .tabs button { background: var(--g-raise); color: var(--quartz); border-color: var(--g-edge); }
html[data-look="granite"] .tabs button:hover { background: #40443f; }
html[data-look="granite"] .tabs button.on { background: var(--wisp); color: var(--wisp-ink); }
html[data-look="granite"] .find { background: var(--g-deep); color: var(--quartz); border-color: var(--g-line); }
html[data-look="granite"] table.scores { background: var(--g-raise); border-color: var(--g-edge); }
html[data-look="granite"] table.scores th { background: var(--g-deep); color: var(--quartz); }
html[data-look="granite"] table.scores td { border-top-color: var(--g-line); }
html[data-look="granite"] table.scores tr:nth-child(even) td { background: #2f322f; }
html[data-look="granite"] table.scores tr.hit td { background: #23474f; }

html[data-look="granite"] .mapstage { background: var(--g-deep); --label-bg: rgba(28, 30, 29, .88); --label-edge: var(--g-stone); --label-ink: var(--quartz); }
html[data-look="granite"] .mapkey { background: rgba(28, 30, 29, .9); color: var(--quartz); border-color: var(--g-stone); }
html[data-look="granite"] .mapkey summary { color: var(--quartz); }
html[data-look="granite"] .mapcontrols button { background: var(--g-stone); color: var(--quartz); border-color: #111; }
html[data-look="granite"] .look-toggle { color: var(--quartz-soft); border-color: var(--g-line); }
html[data-look="granite"] .look-toggle:hover { color: var(--wisp); border-color: var(--wisp); }
html[data-look="granite"] .nav a { color: var(--quartz-soft); }
html[data-look="granite"] .nav a:hover, html[data-look="granite"] .nav a.here { color: var(--wisp); }
html[data-look="granite"] .brand:hover { color: var(--wisp); }