/* kemet.education site styles. Hand-built (goal 1707, tasks 1584 + 1620).
   Design 'kemet-ceiling' (websites.db design 14): css/theme.css carries its tokens
   as Bulma variables (generated); this file holds everything Bulma variables
   cannot say. The palette is the painted astronomical ceiling: Egyptian blue,
   lapis night, star ochre, on a faience-white ground. Rubric red is kept for one
   job, the scribe's: marking what needs a second look (disputed names).
   CSP style-src 'self': views use these classes, never style= attributes. */

@font-face { font-family: Besley; src: url(/font/besley/besley-var.woff) format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Gentium Book"; src: url(/font/gentium-book/gentium-book-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gentium Book"; src: url(/font/gentium-book/gentium-book-Italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gentium Book"; src: url(/font/gentium-book/gentium-book-Bold.woff) format("woff"); font-weight: 700; font-display: swap; }

:root {
  --kemet-blue: #1F3F94;
  --kemet-night: #101B45;
  --kemet-ochre: #D9A531;
  --kemet-ochre-pale: #F3E4B8;
  --kemet-ground: #F1F4F2;
  --kemet-rubric: #A3341F;
  --kemet-ink: #1A1C22;
  --kemet-rule: #C9D0D6;
  --bulma-link-text: var(--kemet-blue);
  --bulma-link-text-hover: var(--kemet-night);
  --bulma-text: var(--kemet-ink);
  --bulma-body-color: var(--kemet-ink);
  --bulma-body-font-size: 1.125rem;
  --bulma-body-line-height: 1.6;
}

/* Type. Besley is a Clarendon, one of the slab serifs the nineteenth century
   called "Egyptians"; Gentium Book sets the transliteration letters. */
.title, .subtitle, .content h2, .content h3, .kemet-brand, .kemet-hero-hour, .kemet-contents a, .table thead th {
  font-family: var(--bulma-family-secondary);
}
.title { font-weight: 600; letter-spacing: -0.01em; color: var(--kemet-night); }
.content h2 { font-weight: 600; font-size: 1.5rem; color: var(--kemet-night); }
.subtitle { font-family: var(--bulma-family-primary); font-style: italic; color: var(--bulma-text-weak); }
.heading { font-size: 1rem; letter-spacing: 0; text-transform: none; font-style: italic; color: var(--bulma-text-weak); margin-bottom: .15rem; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--kemet-ochre); outline-offset: 2px; }

/* Header: the night sky, closed by the ceiling's border of five-armed stars. */
.kemet-header { background: var(--kemet-night) url(/img/star-border.svg) repeat-x left bottom; padding: 1rem 1.5rem 1.6rem; }
.kemet-header-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; }
.kemet-brand { font-size: 1.4rem; font-weight: 700; color: #fff; }
.kemet-brand:hover { color: var(--kemet-ochre); }
.kemet-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.kemet-nav a { color: #D5DBEE; padding-bottom: .1rem; border-bottom: 2px solid transparent; }
.kemet-nav a:hover { color: #fff; }
.kemet-nav a[aria-current] { color: #fff; border-bottom-color: var(--kemet-ochre); }

/* Home hero */
.kemet-hero-lead { font-style: italic; color: var(--bulma-text-weak); margin-bottom: .2rem; }
.kemet-hero-hour { font-weight: 700; font-size: clamp(2.2rem, 6.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1rem; color: var(--kemet-night); }
.kemet-hero-hour a { color: inherit; }
.kemet-hero-hour a:hover { color: var(--kemet-blue); }
.kemet-hero-deities { font-size: 1.25rem; margin-bottom: 2rem; }
.kemet-hero-more { max-width: 40rem; margin-top: 1.5rem; }

/* The hour band. Two halves, as wide as today's day and night are long. */
.kemet-band { margin: 1rem 0 .5rem; }
.kemet-band-cells, .kemet-band-times { display: flex; }
.kemet-band-half { display: flex; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.kemet-band-half li { flex: 1 1 0; min-width: 0; }
.kemet-band-half a { display: block; position: relative; text-align: center; padding: 1.1rem 0; font-family: var(--bulma-family-secondary); font-weight: 600; font-size: .95rem; }
.kemet-band-half.is-day a { background: var(--kemet-ochre-pale); color: var(--kemet-night); box-shadow: inset -1px 0 0 rgba(16, 27, 69, .18); }
.kemet-band-half.is-night a { background: var(--kemet-night); color: var(--kemet-ochre); box-shadow: inset -1px 0 0 rgba(217, 165, 49, .3); }
.kemet-band-half.is-day a:hover { background: #EBD594; }
.kemet-band-half.is-night a:hover { background: var(--kemet-blue); color: #fff; }
.kemet-band-half li.is-now a { background: var(--kemet-ochre); color: var(--kemet-night); margin: -.5rem 0; padding: 1.6rem 0; box-shadow: 0 0 0 2px var(--kemet-night); z-index: 1; }
.kemet-band-times { margin-top: .9rem; font-size: .9rem; color: var(--bulma-text-weak); }
.kemet-band-times > span { flex: 1 1 0; min-width: 0; }
.kemet-band-night-times { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 640px) {
  .kemet-band-cells { flex-direction: column; gap: .6rem; }
  .kemet-band-times { flex-direction: column; }
  .kemet-band-half a { font-size: .8rem; }
}

/* Home contents: a book's table of contents, not a wall of cards. */
.kemet-contents { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 3rem; margin-top: 2rem; }
.kemet-contents li { border-top: 1px solid var(--kemet-rule); padding: 1rem 0 1.25rem; }
.kemet-contents a { font-size: 1.3rem; font-weight: 600; }
.kemet-contents p { margin-top: .2rem; }

/* Reading */
.kemet-prose { max-width: 40rem; }
.kemet-cite { color: var(--bulma-text-weak); font-size: .85em; }
.kemet-cites { margin: 0; list-style: none; }
.kemet-cites li { font-size: .85em; color: var(--bulma-text-weak); }

/* Tables sit on the ground colour, ruled like a ledger. */
.table { background: transparent; color: var(--kemet-ink); }
.table thead th { font-weight: 600; font-size: .9rem; color: var(--kemet-night); border-bottom: 2px solid var(--kemet-night); }
.table td, .table th { border-color: var(--kemet-rule); }
.table.is-hoverable tbody tr:not(.is-selected):hover { background: #E6ECEF; }
.table tbody tr.is-selected { background: var(--kemet-ochre-pale); color: var(--kemet-night); }
.table tbody tr.is-selected a { color: var(--kemet-blue); }
.table tbody tr.is-selected td { border-color: var(--kemet-ochre); }

/* Boxes: flat, ruled, no drop shadow. */
.box { background: #fff; box-shadow: none; border: 1px solid var(--kemet-rule); border-radius: 3px; }
.kemet-card { display: block; height: 100%; }
.kemet-card:hover { border-color: var(--kemet-blue); }

/* Rubric red: disputed names and the notes that explain them. */
.tag.is-warning.is-light { background: transparent; color: var(--kemet-rubric); border: 1px solid var(--kemet-rubric); border-radius: 2px; font-style: italic; }
.message.is-warning { background: transparent; border-radius: 0; }
.message.is-warning .message-body { border-color: var(--kemet-rubric); border-radius: 0; color: var(--kemet-ink); background: #FBF1EE; }

.kemet-now .title.is-2 { margin-bottom: .75rem; }
.kemet-now .progress { max-width: 24rem; height: .5rem; border-radius: 0; --bulma-progress-value-background-color: var(--kemet-ochre); --bulma-progress-bar-background-color: var(--kemet-rule); }