/* =====================================================================
   editions.css  —  Brian Brixon
   The site comes in two heritages, Norse and Celtic. Loaded after
   brand.css and fx.css on every page.

     1. Which edition is showing
     2. The toggle (the rune ᛒ and a Celtic knot)
     3. The Celtic edition's colors (the Irish illuminated manuscripts)
     4. The Celtic edition's marks and ornaments
     5. The Celtic edition's vellum: red-lead dots
     6. Illuminated initials, and Ogham
     7. Motion (the red-lead dots, the plait, the switch itself)

   How it works: the Norse edition is the site as built (tokens.css and
   brand.css). The small script at the top of <head> puts
   data-edition="celtic" on <html> when the visitor has chosen Celtic, and
   everything below that starts with :root[data-edition="celtic"] takes
   over. Anything that differs in the page itself is written twice, once
   with class "bb-ed-norse" and once with "bb-ed-celtic" (bb_ed(),
   bb_knot(), bb_wordmark() … in inc/bootstrap.php), and section 1 hides
   the one that isn't showing. See "The two editions" in docs/SITE-GUIDE.md.

   Colors are only ever tokens here too, and every Celtic text color was
   measured for contrast (the ratios are in the comments).
   ===================================================================== */


/* ---- 1. Which edition is showing ------------------------------------- */
:root:not([data-edition="celtic"]) .bb-ed-celtic,
:root[data-edition="celtic"] .bb-ed-norse {
  display: none !important;
}


/* ---- 2. The toggle ------------------------------------------------------
   <?= bb_edition_toggle() ?>: two buttons in a thin frame, the one that's
   on in bronze (gold in the Celtic edition). In the header on wide
   screens it shows just the two signs (their names are still there for
   screen readers, and as a tooltip); in the phone menu and the footer,
   the names too. It needs JavaScript, so without it there's no toggle. */
.bb-edition {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bb-rule);
  border-radius: var(--bb-radius-control);
}
.no-js .bb-edition,
.no-js .bb-footer__edition { display: none; }
.bb-edition__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: var(--bb-radius-control);
  background: none;
  color: var(--bb-text-muted);
  font-family: var(--bb-font-ui);
  font-weight: var(--bb-weight-ui);
  font-size: var(--step--1);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--bb-dur-hover), background-color var(--bb-dur-hover);
}
.bb-edition__opt:hover { color: var(--bb-heading); }
.bb-edition__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  overflow: visible;
}
/* The edition that's on. (Styled from <html>, not aria-pressed, so it's
   right from the first paint; site.js keeps aria-pressed in step.) */
:root:not([data-edition="celtic"]) .bb-edition__opt--norse,
:root[data-edition="celtic"] .bb-edition__opt--celtic {
  color: var(--bb-accent-text);
  background-color: color-mix(in srgb, var(--bb-accent) 14%, transparent);
  cursor: default;
}
/* High contrast (brand.css, section 27): the one that's on in the theme's
   highlight color, its name underlined. */
@media (forced-colors: active) {
  :root:not([data-edition="celtic"]) .bb-edition__opt--norse,
  :root[data-edition="celtic"] .bb-edition__opt--celtic {
    color: Highlight;
    text-decoration: underline;
  }
}

/* In the header on wide screens: the two signs only, between the nav and
   the "Start a project" button. */
@media (min-width: 992px) {
  .bb-edition--header { margin-left: clamp(1rem, 2vw, 2rem); }
  .bb-edition--header .bb-edition__opt { min-width: 36px; min-height: 36px; padding: 0; }
  .bb-edition--header .bb-edition__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .bb-edition--header + .bb-menu__cta { margin-left: 1rem; }
}
/* The name never gives up its room to the nav (it would spill out of its
   box and run into "Web"). */
@media (min-width: 992px) {
  .bb-brand { flex-shrink: 0; }
}
/* 992–1199px: the inline nav only just fits (brand.css, section 8), so
   with the toggle beside it everything tightens a little more, the name
   included. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .bb-brand { gap: 0.55rem; }
  .bb-brand .bb-knot { height: 2.5rem; }
  .bb-brand .bb-wordmark { height: 1.15rem; }
  .is-condensed .bb-brand .bb-wordmark { height: 1rem; }
  .bb-nav { gap: 0.9rem; }
  .bb-nav__link { letter-spacing: 0.06em; }
  .bb-edition--header { margin-left: 0.9rem; }
  .bb-edition--header .bb-edition__opt { min-width: 32px; min-height: 32px; }
  .bb-edition--header + .bb-menu__cta { margin-left: 0.75rem; }
}
/* In the phone menu: under the links, with names. */
@media (max-width: 991.98px) {
  .bb-edition--header { align-self: flex-start; }
  .bb-edition--header .bb-edition__opt { min-height: 44px; padding: 0 1rem; }
}

/* In the footer, under the social links. */
.bb-footer__edition { margin-top: var(--space-m); }
.bb-footer__edition-label {
  margin: 0 0 var(--space-2xs);
  font-family: var(--bb-font-ui);
  font-size: var(--step--1);
  color: var(--bb-text-muted);
}


/* ---- 3. The Celtic edition's colors --------------------------------------
   Taken from the Irish illuminated manuscripts: a deep emerald ground,
   gold for the one thing to click (like gold leaf), the scribes' green for
   the voice, red lead ("rubric") for dots and for headings on vellum, and
   oak-gall ink on calfskin vellum. The bronze tokens hold the gold here,
   so everything in brand.css that's bronze turns gold. */
:root[data-edition="celtic"] {
  /* Surfaces (dark) */
  --bb-bog-oak:        #09170F; /* deepest: footer, overlays */
  --bb-forest:         #0F2318; /* page ground: a deep emerald */
  --bb-forest-raised:  #16301F; /* cards, condensed header */
  --bb-moss:           #244A31; /* borders, hover fills, dividers (decorative only: 1.65:1) */

  /* Verdigris (the voice; the scribes' green) */
  --bb-verdigris:       #3C8A5E; /* 3.9:1 on forest: large text, icons, ornament only */
  --bb-verdigris-light: #8FCB9F; /* links and small accents on dark: 8.8:1 on forest */
  --bb-verdigris-deep:  #2A6343; /* links on vellum: 6.1:1 */

  /* Gold (the one action color) */
  --bb-gold:         #D6AC52; /* primary buttons (text = forest, 7.8:1), hairlines, monogram */
  --bb-gold-light:   #E6C67E; /* hover state: 10:1 on forest */
  --bb-gold-deep:    #7D5A12; /* gold text and focus ring on vellum: 5.4:1 */
  --bb-bronze:       var(--bb-gold);
  --bb-bronze-light: var(--bb-gold-light);
  --bb-bronze-deep:  var(--bb-gold-deep);

  /* Red lead: the rubric */
  --bb-rubric:       #C9563C; /* dots and ornament only (3.8:1 on forest, 3.7:1 on vellum) */
  --bb-rubric-light: #E58A70; /* small red text on dark: 6.4:1 on forest */
  --bb-rubric-deep:  #A13B22; /* rubrics (eyebrows, accent words) on vellum: 5.7:1 */

  /* Neutrals */
  --bb-bone:     #EEE7D6; /* body text on dark: 13.4:1 on forest, 11.5:1 on forest-raised */
  --bb-lichen:   #AEBCAE; /* secondary text on dark: 8.3:1 on forest */
  --bb-vellum:   #F5EDDA; /* light "reading room" sections: calfskin */
  --bb-vellum-2: #EADFC3; /* vellum cards, table stripes */
  --bb-ink:      #1E1B13; /* oak-gall ink, text on vellum: 14.7:1 */

  /* States, vellum text and form fields */
  --bb-sage:        #7CC285; /* success only: 7.8:1 on forest */
  --bb-danger:      #E8907C; /* form errors on dark: 6.8:1 on forest, 5.9:1 on forest-raised */
  --bb-ink-soft:    #575244; /* secondary text on vellum: 6.7:1 (5.9:1 on vellum-2) */
  --bb-danger-deep: #9E3A2A; /* form errors on vellum: 5.8:1 */
  --bb-sage-deep:   #2F6B3A; /* success on vellum: 5.5:1 */
  --bb-reed:        #6E8C78; /* form-field borders on dark: 4.5:1 on forest (fields need 3:1) */
  --bb-flax:        #8A826A; /* form-field borders on vellum: 3.3:1 */

  /* Vellum in lamplight (brand.css, section 26) */
  --bb-sepia: #5E3F1C;
  --bb-umber: #221B10;

  /* Ogham joins the type (only downloaded when an Ogham letter is on the
     page). The stand-ins after each Adobe font are the same as in tokens.css. */
  --bb-font-display: "BB Runes", "Noto Sans Ogham", "freight-big-pro", "Freight Big Fallback", Georgia, "Times New Roman", serif;
  --bb-font-text:    "BB Runes", "Noto Sans Ogham", "freight-text-pro", "Freight Text Fallback", Georgia, "Times New Roman", serif;
  --bb-font-ui:      "BB Runes", "Noto Sans Ogham", "gill-sans-nova", "Gill Sans Nova Fallback", "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;
  /* The uncial, for illuminated initials (Rieven Uncial is in the Adobe
     Fonts kit for the keepsake designer; the fallbacks look right too). */
  --bb-font-uncial:  "rieven-uncial", "american-uncial-mn", "freight-big-pro", Georgia, serif;
  --bb-font-ogham:   "Noto Sans Ogham", "Segoe UI Historic", "gill-sans-nova", sans-serif;

  /* The red-lead dots and the illuminated initials */
  --bb-dots:    var(--bb-rubric);
  --bb-initial: var(--bb-gold);
}
/* Vellum: the small labels and accent words are in red, as rubrics are in
   a manuscript, and the illuminated initials too. */
:root[data-edition="celtic"] .bb-section--vellum,
:root[data-edition="celtic"] .bb-on-vellum {
  --bb-voice:   var(--bb-rubric-deep);
  --bb-initial: var(--bb-rubric-deep);
}

/* Ogham, self-hosted (Noto Sans Ogham, SIL Open Font License, 4 KB).
   unicode-range: only fetched when an Ogham letter is on the page. */
@font-face {
  font-family: "Noto Sans Ogham";
  src: url("../fonts/noto-sans-ogham.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1680-169F;
}


/* ---- 4. The Celtic edition's marks and ornaments ---------------------------
   The Kells Knot and the uncial name come in from the page itself
   (bb_knot() and bb_wordmark()); the ornaments are CSS masks, from
   assets/img/brand/celtic/ (tools/celtic/build-monogram.mjs). */

/* Corners: a ring woven through two crossing lines, like the head of a high cross. */
:root[data-edition="celtic"] .bb-corners::before,
:root[data-edition="celtic"] .bb-corners::after {
  -webkit-mask-image: url("../img/brand/celtic/corner.svg");
          mask-image: url("../img/brand/celtic/corner.svg");
}
/* The small glyph between the facts in the proof strip: the triquetra. */
:root[data-edition="celtic"] .bb-proof li + li::before {
  -webkit-mask-image: url("../img/brand/celtic/knot-glyph.svg");
          mask-image: url("../img/brand/celtic/knot-glyph.svg");
}

/* The divider: the round two-strand plait. */
.bb-divider__plait {
  flex: none;
  width: 120px;
  height: 16px;
  background-color: currentColor;
  opacity: 0.8;
  -webkit-mask: url("../img/brand/celtic/knot-divider.svg") center / contain no-repeat;
          mask: url("../img/brand/celtic/knot-divider.svg") center / contain no-repeat;
}

/* The home page's knot: on a warmer lantern glow, in a faint ringed
   triquetra, like the roundel an illuminated initial sits in, and ringed
   with red-lead dots. (The Norse rune ring steps aside.) */
:root[data-edition="celtic"] .bb-runering { display: none; }
:root[data-edition="celtic"] .bb-hero-mark:has(.bb-runering) .bb-hero-mark__caption { margin-top: 0; }
:root[data-edition="celtic"] .bb-hero-mark__stage::before {
  z-index: -2;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--bb-gold) 10%, transparent),
    color-mix(in srgb, var(--bb-verdigris) 16%, transparent) 40%,
    color-mix(in srgb, var(--bb-verdigris) 5%, transparent) 64%,
    transparent 100%);
}
:root[data-edition="celtic"] .bb-hero-mark__stage::after {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  background-color: var(--bb-verdigris);
  opacity: 0.13;
  -webkit-mask: url("../img/brand/celtic/triquetra.svg") center / contain no-repeat;
          mask: url("../img/brand/celtic/triquetra.svg") center / contain no-repeat;
}
.bb-knot__dots { fill: var(--bb-dots, currentColor); }

/* Ogham beside the caption: ᚁ, Beith. */
.bb-ogham {
  font-family: var(--bb-font-ogham);
  font-style: normal;
  color: var(--bb-accent-text);
}
.bb-hero-mark__caption .bb-ogham {
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.12em;
  margin-right: 0.2em;
}

/* The 404 page: the triquetra woven through a circle. */
.bb-lost__knot--celtic {
  width: min(44vw, 9.5rem);
  aspect-ratio: 1;
}


/* ---- 5. The Celtic edition's vellum ------------------------------------------
   Each vellum section is ruled off top and bottom with a row of red-lead
   dots, the way the scribes ruled a page, over the same shadow and warm
   edges as the Norse edition (brand.css, section 26). The pull quote on
   vellum gets a frame of dots instead of a rule. */
:root[data-edition="celtic"] .bb-section--vellum {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--bb-dots) 70%, transparent) 0 1.35px, transparent 1.9px),
    radial-gradient(circle, color-mix(in srgb, var(--bb-dots) 70%, transparent) 0 1.35px, transparent 1.9px),
    linear-gradient(to bottom, color-mix(in srgb, var(--bb-bog-oak) 32%, transparent), transparent 2.75rem),
    linear-gradient(to top,    color-mix(in srgb, var(--bb-bog-oak) 32%, transparent), transparent 2.75rem),
    linear-gradient(to bottom, color-mix(in srgb, var(--bb-sepia) 11%, transparent), transparent var(--space-section),
                               transparent calc(100% - var(--space-section)), color-mix(in srgb, var(--bb-sepia) 11%, transparent));
  background-size: 13px 10px, 13px 10px, auto, auto, auto;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  background-position: center 1.6rem, center calc(100% - 1.6rem), 0 0, 0 0, 0 0;
}
:root[data-edition="celtic"] .bb-section--vellum .bb-quote {
  border: 3px dotted color-mix(in srgb, var(--bb-dots) 75%, transparent);
}


/* ---- 6. Illuminated initials, and Ogham ------------------------------------
   <p class="bb-illuminate">: in the Celtic edition its first letter is set
   large in the uncial, gold on the dark ground and red on vellum. (In the
   Norse edition it's an ordinary paragraph.) */
:root[data-edition="celtic"] .bb-illuminate::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--bb-font-uncial);
  font-weight: 400;
  font-style: normal;
  font-size: 3.4em;
  line-height: 0.82;
  color: var(--bb-initial);
}
/* On paper every page is ink on white (brand.css, section 25), so the
   initials are red, as on vellum: gold would be too pale. */
@media print {
  :root[data-edition="celtic"] { --bb-initial: var(--bb-rubric-deep); }
}

/* My name in Ogham at the foot of every page, read left to right along its stem line. */
.bb-ogham-name {
  font-family: var(--bb-font-ogham);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--bb-ornament);
  white-space: nowrap;
  vertical-align: middle;
}
.bb-ogham-name:hover { color: var(--bb-voice); }
/* On phones the line leaves room on the right for the Back-to-top button
   (48px, 24px in from the edge), so the end of the name never sits under it. */
@media (max-width: 575.98px) {
  .bb-footer__sign { padding-right: 64px; }
}

/* The nav links and eyebrows that decode themselves (fx/runes.js)
   flicker through Ogham in the Celtic edition. */
:root[data-edition="celtic"] .bb-runes .is-rune {
  font-family: var(--bb-font-ogham);
  color: var(--bb-ornament);
}


/* ---- 7. Motion ------------------------------------------------------------------
   As everywhere on the site, only with "reduce motion" off. */
@media (prefers-reduced-motion: no-preference) {
  /* After the Kells Knot draws itself, the scribe dots it: the red-lead
     dots come in round the letter, clockwise from the top (24 groups,
     45ms apart). Once per visit, like the draw (site.js). */
  .js:not(.bb-drawn) .bb-knot--draw .bb-knot__dots circle {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    animation: bb-dot-in 420ms var(--bb-ease-out) forwards;
    animation-delay: calc(var(--bb-dur-draw) + 450ms + var(--kd, 0) * 45ms);
  }
  .kd1 { --kd: 1; }   .kd2 { --kd: 2; }   .kd3 { --kd: 3; }   .kd4 { --kd: 4; }
  .kd5 { --kd: 5; }   .kd6 { --kd: 6; }   .kd7 { --kd: 7; }   .kd8 { --kd: 8; }
  .kd9 { --kd: 9; }   .kd10 { --kd: 10; } .kd11 { --kd: 11; } .kd12 { --kd: 12; }
  .kd13 { --kd: 13; } .kd14 { --kd: 14; } .kd15 { --kd: 15; } .kd16 { --kd: 16; }
  .kd17 { --kd: 17; } .kd18 { --kd: 18; } .kd19 { --kd: 19; } .kd20 { --kd: 20; }
  .kd21 { --kd: 21; } .kd22 { --kd: 22; } .kd23 { --kd: 23; }

  /* The plait divider draws out from its centre as it comes into view
     (fx/knots.js says when, as for the Norse plait). Shown anyway after
     5 seconds if fx/knots.js never arrives. */
  html.js:not([data-fx-off~="knots"]) .bb-divider[data-fx~="knots"]:not(.is-drawn) .bb-divider__plait {
    clip-path: inset(0 50%);
    animation: bb-plait-out 0s 5s forwards;
  }
  html.js .bb-divider.is-armed .bb-divider__plait { animation: none; }
  html.js .bb-divider.is-drawing .bb-divider__plait {
    animation: bb-plait-out 1100ms var(--bb-ease-draw) forwards;
  }

  /* Switching edition: a slower cross-fade than a page change (site.js
     adds .bb-switching while it runs). */
  html.bb-switching::view-transition-group(*),
  html.bb-switching::view-transition-old(*),
  html.bb-switching::view-transition-new(*) {
    animation-duration: 600ms;
  }
}
@keyframes bb-dot-in {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bb-plait-out { to { clip-path: inset(0); } }