/* systems.css - cPanel 2.1's shared systems (plan 2.1, section 3; link 67).
   Used by the guide at link 67 and by every public page from link 68. Loaded after language.css, whose rules it
   narrows; nothing here is inline, and every value a script passes arrives through the style object.
   3.1 type - 3.2 grounds and the tile - 3.3 plates - 3.4 motion - 3.5 certainty as a voice. */

:root{
  /* 3.4 motion tokens (NN/g; Material): feedback, enter, exit, a card changing, the map flying to a place */
  --m-feedback:110ms;
  --m-enter:240ms;
  --m-exit:190ms;
  --m-card:350ms;
  --m-fly:760ms;
  --m-ease-enter:cubic-bezier(.2,0,0,1);
  --m-ease-exit:cubic-bezier(.4,0,1,1);
  --m-rise:12px;
  --m-slide:24px;

  /* 3.1 type */
  --f-head:"IBM Plex Sans","Segoe UI",system-ui,Arial,sans-serif;
  --f-head-ar:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --f-voice:"Cormorant Garamond",Garamond,"Palatino Linotype",serif;   /* other people's words; the mission line */
  --f-voice-ar:"Amiri","Traditional Arabic",serif;

  /* 3.2 grounds and the tile */
  --s-r:2px;
  --s-grout:2px;
  --s-plate-ink:#0C2251;
  --s-cobalt-ground:#12306A;
  --s-porcelain-type:#F4F0E5;
}

/* ---------------------------------------------------------------- 3.1 type
   Headlines in the sans, which says the line is Baseera's own; the serif only where the words are someone else's
   (.voice) or the mission line (.voice--mission). Headline to body at least 3 to 1 on a phone. */
html.dl .sys h1,html.dl .sys h2,html.dl .sys h3,html.dl .sys .sys-head{
  font-family:var(--f-head);font-weight:600;letter-spacing:-.012em;color:var(--cobalt);text-wrap:balance
}
html.dl[lang="ar"] .sys h1,html.dl[lang="ar"] .sys h2,html.dl[lang="ar"] .sys h3,html.dl[lang="ar"] .sys .sys-head{
  font-family:var(--f-head-ar);font-weight:600;letter-spacing:0
}
html.dl .sys h1{font-size:clamp(2.1rem,7.4vw,3.6rem);line-height:1.04}
html.dl[lang="ar"] .sys h1{font-size:clamp(2rem,7vw,3.3rem);line-height:1.32}
html.dl .sys h2{font-size:clamp(1.62rem,5.2vw,2.35rem);line-height:1.1}
html.dl[lang="ar"] .sys h2{font-size:clamp(1.56rem,5vw,2.2rem);line-height:1.42}
html.dl .sys h3{font-size:clamp(1.12rem,2.6vw,1.32rem);line-height:1.22}
html.dl[lang="ar"] .sys h3{font-size:clamp(1.1rem,2.6vw,1.3rem);line-height:1.55}
html.dl .sys{font-family:var(--font-body);font-size:16.5px;line-height:1.6;font-variant-numeric:lining-nums}
html.dl[lang="ar"] .sys{font-family:var(--font-ar);font-size:17.5px;line-height:1.78}
@media (min-width:900px){html.dl .sys{font-size:17px}html.dl[lang="ar"] .sys{font-size:18px}}
html.dl .sys .kicker{
  font-family:var(--f-head);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt-400);margin:0 0 .5rem
}
html.dl[lang="ar"] .sys .kicker{font-family:var(--f-head-ar);font-size:.86rem;letter-spacing:0;text-transform:none}
html.dl .sys .deck{font-size:1.06em;color:var(--ink);margin:.1rem 0 .8rem;max-inline-size:52ch}
html.dl .sys .voice{font-family:var(--f-voice);font-style:italic;font-size:1.14em;color:var(--ink)}
html.dl[lang="ar"] .sys .voice{font-family:var(--f-voice-ar);font-style:normal;font-size:1.08em}
html.dl .sys .voice--mission{font-size:clamp(1.4rem,4vw,2rem);line-height:1.3}
html.dl .sys .fig{font-family:var(--f-head);font-weight:600;font-variant-numeric:lining-nums;unicode-bidi:isolate;direction:ltr}

/* ---------------------------------------------------------------- 3.2 grounds and the tile
   Three grounds: porcelain (reading), cobalt (a statement of principle), the plate (place). Never two of a kind in a row
   on the public pages; the guide's cards are all porcelain. */
.sys .g-porcelain{background:var(--porcelain);color:var(--ink)}
.sys .g-cobalt{background:var(--s-cobalt-ground);color:var(--s-porcelain-type)}
html.dl .sys .g-cobalt h1,html.dl .sys .g-cobalt h2,html.dl .sys .g-cobalt h3{color:var(--s-porcelain-type)}
.sys .g-plate{background:var(--s-plate-ink);color:var(--s-porcelain-type)}
/* the Delft tile: a square unit with a thin porcelain grout; plates are cut into tiles, overviews are tile grids */
.sys .tiles{display:grid;gap:var(--s-grout);background:var(--porcelain-2);padding:var(--s-grout);border-radius:var(--s-r)}
.sys .tile{aspect-ratio:1/1;border-radius:1px;overflow:hidden;position:relative;background:var(--cobalt-050)}
.sys .tile>img{display:block;inline-size:100%;block-size:100%;object-fit:cover}

/* ---------------------------------------------------------------- 3.3 the plate: "seen from above, in Delft blue"
   A plate always shows what the headline beside it names; at most one image moment per screen; text never laid on it
   without a solid ground; a caption with place, season and year, and the credit, on every one. */
.sys .plate{margin:0;position:relative}
.sys .plate__img{display:block;inline-size:100%;block-size:auto;border-radius:var(--s-r);background:var(--s-plate-ink)}
.sys .plate__cap{font-size:.76rem;line-height:1.45;color:var(--muted);margin:.4rem 0 0}
.sys .plate__cap b{font-weight:600;color:var(--ink)}
.sys .plate__credit{display:block;font-size:.7rem;color:var(--muted)}
.sys .plate--drift .plate__img{animation:sys-drift 48s linear 1 both;transform-origin:50% 50%}
@keyframes sys-drift{from{transform:scale(1.04) translate3d(-1%,0,0)}to{transform:scale(1.04) translate3d(1%,0,0)}}
.sys .plate--lit .plate__img{animation:sys-breathe 1.8s var(--m-ease-enter) 1 both}
@keyframes sys-breathe{0%{filter:brightness(.7)}55%{filter:brightness(1.12)}100%{filter:brightness(1)}}
.sys .plate--off .plate__img{animation-play-state:paused}

/* ---------------------------------------------------------------- 3.4 motion: things that mean something, once */
.sys .rise{opacity:0;transform:translate3d(0,var(--m-rise),0);transition:opacity var(--m-enter) var(--m-ease-enter),transform var(--m-enter) var(--m-ease-enter)}
.sys .rise.is-in{opacity:1;transform:none}
/* a hairline draws under the heading being read */
.sys .hair{background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1px;transition:background-size 420ms var(--m-ease-enter);padding-block-end:.12em}
html[dir="rtl"] .sys .hair{background-position:100% 100%}
.sys .hair.is-read{background-size:100% 1px}

/* ---------------------------------------------------------------- 3.5 certainty as a voice, not a key
   Each mark is a verb in the line and a small signature at its start. No legend: the first time a mark appears in a
   visit it carries one sentence saying what it means; after that the signature alone, with "how do we know?" a tap away. */
.sys .v{display:grid;grid-template-columns:1.2rem 1fr;column-gap:.55rem;align-items:baseline;margin:.45rem 0 0}
.sys .v__sig{display:inline-block;inline-size:1.05rem;block-size:0;border-block-start:2px solid var(--cobalt);transform:translateY(-.3em)}
.sys .v[data-mark="inferred"] .v__sig{border-block-start-style:dashed}
.sys .v[data-mark="assumed"] .v__sig{border-block-start:2px dotted var(--cobalt-400)}
.sys .v[data-mark="unknown"] .v__sig{inline-size:.62rem;block-size:.62rem;border:1.5px solid var(--unknown);border-radius:1px;transform:translateY(.02em)}
.sys .v[data-mark="stated"] .v__sig{border:0;inline-size:auto;block-size:auto;transform:none;font-family:var(--f-voice);font-size:1.5em;line-height:.6;color:var(--ink)}
.sys .v[data-mark="stated"] .v__sig::before{content:"\201C"}
html[dir="rtl"] .sys .v[data-mark="stated"] .v__sig::before{content:"\201D"}
.sys .v[data-mark="stated"] .v__text{font-family:var(--f-voice);font-style:italic}
html.dl[lang="ar"] .sys .v[data-mark="stated"] .v__text{font-family:var(--f-voice-ar);font-style:normal}
.sys .v[data-mark="unknown"] .v__text{color:var(--unknown)}
.sys .v__text{margin:0}
.sys .v__first{grid-column:2;font-size:.8rem;color:var(--muted);margin:.12rem 0 0}
.sys .v[data-mark="unknown"] .v__first{color:var(--unknown)}

/* ---------------------------------------------------------------- reduced motion: transforms become a short fade,
   nothing drifts or plays by itself */
@media (prefers-reduced-motion:reduce){
  .sys .rise{transform:none;transition:opacity 150ms linear}
  .sys .plate--drift .plate__img,.sys .plate--lit .plate__img{animation:none;transform:none;filter:none}
  .sys .hair{transition:none}
}