/* ::selection {
  background: var(--subtle-grey);
  color: var(--code-grey);
}
::-moz-selection {
  background: var(--subtle-grey);
  color: var(--code-grey);
} */

/* TYPOGRAPHY */
html.fonts-loading body,
html.includes-loading body { visibility: hidden; }

@font-face {
  font-family: 'TWK Lausanne';
  src: url('fonts/TWKLausanne-300.woff2?v=2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

/* OpenCues embeds carry their own fonts now - the runtime self-mounts
   @font-face from the open-cues/ folder, so nothing for them is declared
   here. See embeds/cues-*.html and final-export.md. */

@font-face {
  font-family: 'TWK Lausanne 200';
  src: url('fonts/TWKLausanne-200.woff2?v=2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Ufficio Mono';
  src: url('fonts/UfficioMono-300.otf') format('opentype');
  font-style: normal;
  font-display: block;
}

body,
h1,
h2,
h3,
h4,
h5,
h6{
  font-family: 'TWK Lausanne';
  font-weight: 300;
}
/* No bold anywhere — strong/b inherit the surrounding text weight,
   and pick up code-grey so emphasis reads as a subtle highlight. */
strong,
b{
  font-weight: inherit;
  color: var(--code-grey);
}
#logo,
h1{
  font-size: 1.5rem;
}
/* OpenCues switching-logo (see logo.js + md/population/components/logo.md).
   The effect runs on the real lettering, so #logo keeps all its own type
   styling. Each glyph is locked to its measured width and centred so swapping
   to a different-width look-alike during the scramble never reflows the word. */
#logo .logo-letter{
  display: inline-block;
  text-align: center;
}
h2{
  margin: 0;
}
.blog-headline h2 {
  font-size: 2rem;
  line-height: 3rem;
  font-family: 'TWK Lausanne 200';
}
h2.blog-post-title{
  font-size: 2.8rem;
  line-height: 3.5rem;
  font-family: 'TWK Lausanne 200';
}
h2.docs-item-title,
h2.features-item-title,
h2.contributor-name,
h3.contributor-name,
h2.privacy-policy-title,
h2.terms-conditions-title{
  font-size: 1.5rem;
}
/* When a domain/contributor entry is an <h3> wrapping an <a>, the link
   should look identical to the bare-<a> form used elsewhere. */
.contributor-class > a{
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* Linked inventor/maintainer name (h2.contributor-name wrapping an <a>).
   Inherit the heading colour and drop the default link underline. */
h2.contributor-name > a,
h3.contributor-name > a{
  color: var(--off-white);
  text-decoration: none;
}
h2.contributor-name > a:hover,
h3.contributor-name > a:hover{
  color: var(--code-purple-hover);
}
p{
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: var(--base-grey);
  margin: .6rem 0;
  /* max-width: 55ch; */
}
body .mono{
  font-family: 'Ufficio Mono';
  font-size: .8rem;
  line-height: 1.7rem;
  color: var(--base-grey);
}

body .mono.feature-table-title,
body .mono.announcement-title,
.kerned{
  letter-spacing: .1rem;
}

figure{
  margin: 0;
  line-height: 1.7rem;
  color: var(--base-grey);
  /* font-size: .9rem;
  line-height: 1.4rem; */
}

a{
  text-decoration: none;
}

/* MEDIA QUERIES */
@media (max-width: 1080px) {
p{
  font-size: 1.1rem;
  line-height: 1.5rem;
}
body .mono{
  font-size: .75rem;
}
}



/* PALETTE */
:root{
  --bg-colour: #111;
  --black: #000;
  --white: #fff;
  --off-white: #B5B5B5;
  --base-grey: #5B5B5B;
  --code-grey: #838383;
  --subtle-grey:#212121; 
  --dark-grey: #2E2E2E;
  --border: #252525;
  --dark-backing: #0c0c0c;
  --border-announcement: #2E314B;
  --button-active: #fff;
  --code-blue: #9EC0FF;
  --code-purple: #BE6EEC;
  --announcement-blue: #6978FF;
  --announcement-counter: #303c7f;
  --code-purple-hover: #DEA4FF;
  --jb: #ff9d00;
}

body{
  background: var(--bg-colour);
  color: var(--off-white);
  margin: 0;
}

/* Global divider rule. Browser default <hr> is a light-grey 3-D-ish
   element that reads as white on the site's dark background, so any
   page that renders `---` from markdown (open-standard, features,
   changelog, contributors, docs, future blog posts) gets the right
   colour without each page having to redeclare it. Uses background +
   explicit height (rather than border alone) because some browsers
   still paint hr's intrinsic colour/background on top of border:0. */
hr{
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 1.2rem 0;
}

/* STRUCTURAL */
.desktop-menu .col-1 { grid-column: 1; }
.desktop-menu .col-2 { grid-column: 2; }
.desktop-menu .col-3 { grid-column: 3; }

.col-2{
  width: 85%;
}

.base-grid {
  display: grid;
  margin: 1rem 2.4rem 0;
  min-height: calc(100vh - 1rem);
  grid-template-columns: .8fr 3fr 2fr;
  max-width: 1800px;
}
.grid-col-2 {
  display: flex;
  flex-direction: column;
}
.grid-col-2 .desktop-footer {
  margin-top: auto;
}
.base-grid > .grid-col-3 {
  position: sticky;
  top: 1rem;
  align-self: start;
  min-height: 0;
}
@media (max-width: 1000px) and (min-width: 641px) {
  .base-grid > .grid-col-3 {

  top: 5rem;
}
}
@media (max-width: 640px) {
  .base-grid > .grid-col-3 {
    position: relative;
    padding-top: 4.2rem;
  }
}

/* spacers */
.micro-spacer{
  margin-bottom: .6rem;
}
.micro-two-spacer{
margin-bottom: 1.2rem;
}
.small-spacer{
  margin-bottom: 2.2rem;
}
.medium-spacer{
  margin-bottom: 6rem;
}
.medium-two-spacer{
  margin-bottom: 4rem;
}
.medium-three-spacer{
  margin-bottom: 8rem;
}
.large-spacer{
  margin-bottom: 12rem;
}
@media (max-width: 640px) {
  .medium-three-spacer{
  margin-bottom: 4rem;
}
.large-spacer{
  margin-bottom: 9rem;
}
}


.huge-spacer{
  margin-bottom: 20rem;
}

/* .copy-block h1{
  padding-bottom: .4rem;
} */


/* MEDIA QUERIES */
@media (max-width: 1380px) {
  .col-2 {
    width: 94%;
  }
}
@media (max-width: 1080px) {
  .base-grid {
    grid-template-columns: 160px 2fr 1.4fr;
    margin: 1rem 1rem 0;
  }
  .col-2 {
    width: 94%;
  }
  .copy-block {
    margin-top: 8rem;
  }
}
@media (max-width: 1000px) {
  .base-grid {
    grid-template-columns: 3fr 2.2fr;
    padding-top: 3rem;
  }
  .grid-col-1 {
    display: none;
  }
}
@media (max-width: 1080px) and (min-width: 641px) {
    .grid-col-3{
    font-size: .8rem;
    
  }
    .base-grid {
    grid-template-columns: 160px 2fr 1.2fr;
    margin: 1rem 1rem 0;
  }

}




@media (max-width: 1000px) and (min-width: 641px) {
  

    .col-2 {
    width: 97%;
  }
  
  .grid-col-3{
    font-size: .8rem;
  }
  .base-grid {
    grid-template-columns: 3fr 1.8fr;
    column-gap: .2rem;
  }
}
@media (max-width: 640px) {
  .base-grid {
    grid-template-columns: 1fr;
    margin-top: 8rem;
  }
  .col-1,
  .col-2,
  .col-3{
    grid-column: 1 / 2;
  }
  .base-grid > .grid-col-3 {
    order: -1;
    position: static;
    min-height: 0;
    /* padding-top: 4rem; */
  }
}


/* MODULAR ITEMS */
/* menus */
.desktop-menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  position: fixed;
  top: 16rem;
  left: 2.4rem;
  width: calc((100vw - 4.8rem) * 0.8 / 3);
  /* The nav is wider than its links and overlaps page content to the
     right. Make the empty area click-through; links + logo re-enable
     clicks so only the words themselves are interactive. */
  pointer-events: none;
}
@media (max-width: 1080px) {
  .desktop-menu {
    left: 1rem;
    width: 160px;
  }
}
.desktop-menu a {
  display: block;
  width: fit-content;
  color: var(--base-grey);
  text-decoration: none;
  pointer-events: auto;
}
.desktop-menu a.active,
.mobile-menu-links a.active {
  color: var(--white);
}

#logo a {
  display: inline;
  color: var(--off-white);
  text-decoration: none;
}
#logo a:hover {
  color: var(--off-white);
}
.desktop-menu #logo {
  grid-column: 1 / -1;
  margin: 0;
  margin-bottom: 3.5rem; 
}
/* mobile menu */
.mobile-menu {
  display: none;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: transparent;
  z-index: 100;
  /* The bar (z-index 100) sits over the top of the open menu list
     (z-index 20). Make its empty area click-through so taps reach the
     first menu items underneath; the logo and toggle re-enable clicks. */
  pointer-events: none;
}
.mobile-menu #logo,
.mobile-menu .mobile-icon {
  pointer-events: auto;
}
.mobile-icon {
  display: flex;
  padding: 1.5rem;
  margin: -1.5rem;
  margin-top: -.45rem;
}
/* Inner wrapper sized to just the two dots (+ gap) so the pointer cursor
   covers only the visible dots cluster, not .mobile-icon's tap-target
   padding. */
.mobile-icon-dots {
  display: flex;
  gap: .3rem;
  cursor: pointer;
}
.left-circle-icon,
.right-circle-icon {
  display: block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--off-white);
}
@media (min-width: 1001px) {
  .mobile-menu-list {
    display: none;
  }
}
@media (max-width: 1000px) {
  .desktop-menu {
    display: none;
  }
  .mobile-menu {
    display: flex;
  }
}
@media (max-width: 1000px) {
  .mobile-menu #logo{
    font-size: 1.2rem;
    margin-top: 1.1rem;
  }
}


/* installation bar */
.installation-bar{
  width: 100%;
  min-height: 4rem;
}
.installation-bar .installation-tabs{
  line-height: 1.8rem;
}
.installation-bar .installation-output{
  line-height: 1.26rem;
  cursor: pointer;
  width: fit-content;
}
.installation-bar .installation-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) {
  .installation-bar .installation-tabs {
    display: flex;
    justify-content: space-between;
  }
}

.installation-bar .installation-tabs span {
  cursor: pointer;
  color: var(--base-grey);
  width: fit-content;
  transition: color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.installation-bar .installation-tabs span:hover {
  color: var(--off-white);
}
.installation-bar .installation-tabs .button-active {
  color: var(--button-active);
}
.installation-bar .installation-output code {
  color: var(--code-blue);
  font-family: inherit;
}
.installation-tabs{
  border-bottom: 1px solid var(--border);
}
.installation-method{
  color: var(--code-purple);
}
/* Inactive state — set on .installation-bar when the command is clicked/
   copied (see components/installation-bar.html). Dims the code + method
   prefix to signal the transient "copied" state. Adjust the colour here. */
.installation-bar.inactive .installation-output code,
.installation-bar.inactive .installation-method{
  color: var(--base-grey);
  transition: color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Suppress the colour transition for the initial inactive paint so the
   grey is shown from the first frame (no blue→grey flash on load). JS
   removes .no-anim after two frames, restoring the hover transition. */
.installation-bar.no-anim .installation-output code,
.installation-bar.no-anim .installation-method,
.installation-bar.no-anim .installation-tabs span{
  transition: none;
}
/* Hover the inactive (grey) code: same colour shift + transition as the tabs.
   Excluded while the message is showing (.msg-showing) — it's not a command. */
.installation-bar.inactive:not(.msg-showing) .installation-output:hover code,
.installation-bar.inactive:not(.msg-showing) .installation-output:hover .installation-method{
  color: var(--off-white);
}
/* The message itself is always base-grey and never animates — no fade from
   a left-over hover colour, no hover shift. */
.installation-bar.inactive.msg-showing .installation-output code{
  color: var(--base-grey);
  transition: none;
}
/* While the message shows, only the link is clickable — drop the pointer
   cursor from the rest of the message. */
.installation-bar.inactive.msg-showing .installation-output{
  cursor: default;
}
.installation-bar .installation-output a{
  cursor: pointer;
}
/* "request access" (and any link) in the install message is code-purple. */
.installation-bar .installation-output a{
  color: var(--code-purple);
  text-decoration: none;
}
.installation-bar .installation-output a:hover{
  color: var(--code-purple-hover);
}
@media (max-width: 640px) {
  .installation-bar {
    position: fixed;
    top: 6rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    z-index: 10;
  }
  .installation-bar::before{
    content: "";
    position: absolute;
    top: -6rem;
    left: -1rem;
    right: -1rem;
    bottom: -1rem;
    background: var(--bg-colour);
    z-index: -1;
  }
}

/* desktop footer */
/* .desktop-footer {
  color: var(--base-grey);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-top: 20rem;
}
.desktop-footer .footer-col > a {
  display: block;
  width: fit-content;
}
.desktop-footer a {
  color: inherit;
  text-decoration: none;
}
.desktop-footer .footer-col {
  display: flex;
  flex-direction: column;
}
.desktop-footer .footer-col:nth-child(n+2) {
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}
.desktop-footer .footer-col:last-child a:last-child {
  padding-bottom: 2rem;
}
@media (max-width: 640px) {
  .desktop-footer {
    padding-top: 10rem;
    grid-template-columns: 1fr 1fr;
  }
  .desktop-footer .footer-col:nth-child(2) {
    display: contents;
  }
  .desktop-footer .footer-col:nth-child(2) > a {
    grid-column: 2;
    grid-row: 1;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
  }
  .desktop-footer .footer-col:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .design-credit {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--border);
    padding-left: 1rem;
  }
} */

/* desktop footer */
.desktop-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  color: var(--base-grey);
  padding-top: 20rem;
}
.desktop-footer a {
  color: inherit;
  text-decoration: none;
}
.desktop-footer .footer-col-1,
.desktop-footer .footer-col-2,
.desktop-footer .footer-col-3 {
  display: flex;
  flex-direction: column;
  padding-bottom: 4rem;
  line-height: 1.4rem;
}
.desktop-footer .footer-col-1 > a {
  display: block;
  width: fit-content;
}
.desktop-footer .footer-col-2,
.desktop-footer .footer-col-3 {
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}
@media (max-width: 1140px) {
  .desktop-footer {
    grid-template-columns: 1fr 1fr;
  }
  .desktop-footer .footer-col-1,
.desktop-footer .footer-col-2,
.desktop-footer .footer-col-3 {

  line-height: 1.7rem;
  padding-left: .6rem;
}
  .desktop-footer .footer-col-3 {
    grid-column: 2;
    grid-row: 1;
    padding-bottom: 0;
  }
  .desktop-footer .footer-col-1 {
    padding-bottom: 0;
  }
  
  .desktop-footer .footer-col-2 {
    grid-column: 2;
    grid-row: 2;
  }
  .desktop-footer .design-credit {
    margin-top: 1rem;
  }
}
@media (max-width: 640px) {
  .desktop-footer{
    padding-top: 8rem;
  }
  .date-long {
    display: none;
  }
    .desktop-footer .footer-col-1 {
    padding-left: 0;
  }
}
@media (min-width: 641px) {
  .date-short {
    display: none;
  }
}

/* GENERAL ELEMENTS */
/* feature table anchoring */
[id],
span{
  scroll-margin-top: 15.35rem;
}
@media (max-width: 1000px) {
  [id],
  span{
    scroll-margin-top: 18.29rem;
  }
}
.feature-table{
  color: var(--base-grey);
  /* margin-top: 4rem; */
}
.feature-table-title,
.announcement-title{
  line-height: 1.7rem;
}
.feature-table-title{
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.feature-table a {
  display: block;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--border);
  line-height: 1.7rem;
  padding-top: .3rem;
  margin-bottom: .3rem;
}
.feature-table-title + a {
  border-top: 0;
}
.feature-table a:hover {
  color: var(--off-white);
}
@media (max-width: 640px) {
  .feature-table {
    display: none;
  }
}

.announcement {
  min-height: 11rem;
}
.announcement figure,
.announcement-title.mono{
  /* margin-top: 3rem; */
  color: var(--announcement-blue);
}
.announcement-title{
  border-bottom: 1px solid var(--border-announcement);
}
.announcement figure{
  margin-bottom: .3rem;
}
/* Links in an announcement: keep the announcement-blue text colour, just
   underlined to signal it's a link. Pink (code-purple-hover) on hover. */
.announcement-text a{
  color: var(--announcement-blue);
  text-decoration: underline;
}
.announcement-text a:hover{
  color: var(--code-purple-hover);
}
.announcement-number{
  cursor: pointer;
  color: var(--announcement-counter);
  margin-right: .6rem;
  transition: color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.announcement-number:hover{
  color: var(--announcement-blue);
}
.announcement-number.active{
  color: var(--announcement-blue);
}
@media (max-width: 640px) {
  .announcement {
    display: none;
  }
}

/* contact panel */
.contact-panel {
  position: fixed;
  top: 0;
  height: 100vh;
  background: var(--black);
  z-index: 5;
  padding: 2rem;
  box-sizing: border-box;
  padding: 0 2.4rem;
  padding-top: 14.6rem;
  pointer-events: none;
}
body.contact-open .contact-panel {
  pointer-events: auto;
}
.contact-panel-content{
  max-width: 64ch;
}
.page-wrapper {
  position: relative;
  left: 0;
}

@media (max-width: 640px) {
  .contact-panel {
    left: auto;
    right: 0;
    width: 80vw;
    transform: translateX(100%);
    z-index: 20;
  }
}

.contact-panel h2,
.mobile-contact-content h2{
  border-bottom: 1px solid var(--border);
  line-height: 2rem;

}
.contact-panel a,
.mobile-contact-content a{
  color: var(--code-purple);
}
.contact-panel figure,
.mobile-contact-content figure{
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  color: var(--base-grey);
  transition: color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.mobile-contact-content figure{
  right: 0;
  top: 0;
}
.contact-panel figure:hover,
.mobile-contact-content figure:hover{
  cursor: pointer;
  color: var(--off-white);
}
@media (max-width: 1000px) and (min-width: 641px) {
    .mobile-contact-content p {
  width: 45ch;
  }
  }
@media (max-width: 640px) {
    .mobile-contact-content p {
  max-width: 36ch;
  }
}

/* body text variants */
.copy-block{
    margin-top: 15rem;
}
.page-heading{
  /* border-bottom: 1px solid var(--border); */
  width: 100%;
  margin-top: 0;
  padding: 0;
}
@media (max-width: 1000px) and (min-width: 641px) {
  body {
    overflow: hidden;
  }
  .grid-col-2 {
    height: calc(100vh - 9rem);
    margin-top: 2.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-self: start;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .grid-col-2::-webkit-scrollbar {
    display: none;
  }
  .col-2 {
    margin-top: 1rem;
  }
}
@media (max-width: 640px) {
  .copy-block{
    /* margin-top: 3.8rem; */
    margin-top: 0;
  }
  .col-2{
  width: 100%;
}
}
/* blog */
.breadcrumbs {
  text-transform: uppercase;
}
.breadcrumbs a {
  color: var(--base-grey);
}
.info-line{
  border-top: 1px solid var(--border); 
  padding-top: .6rem;
}
.info-line,
.read-more{
  color: var(--base-grey);
}
.blog-post-body{
  margin-left: 8rem;
  color: var(--base-grey);
}

@media (max-width: 1080px) {
  .blog-post-body{
  margin-left: 3rem;
}
}
@media (max-width: 1000px) {
  .blog-post-body{
  margin-left: 0;
  max-width: 55ch;
}
}
.author-credits{
  margin-top: 6rem;
}

.author-credits a{
  color: inherit;
  text-decoration: underline;
}
.author-profile{
  display: inline-block;
  width: 1rem;
  height: 1rem;
  padding: .4rem;
  margin-top: -.2rem;
  background: var(--announcement-blue) content-box;
  border-radius: 50%;
  vertical-align: middle;
}
.author-profile.author-1{
  background: url('blog/img/Author_1.webp') center/cover content-box;
}
.author-profile.author-2{
  background: url('blog/img/Author_2.webp') center/cover content-box;
}
.author-profile.author-3{
  background: url('blog/img/Author_3.webp') center/cover content-box;
}
@media (max-width: 1080px) {
  .author-credits{
    /* DO SOMETHING ABOUT THIS */
}
}

/* blog markdown rules */
.blog-post-body h3{
  margin-top: 2.4rem;
  margin-bottom: .8rem;
  color: var(--off-white);
  font-weight: normal;
}
.blog-post-body ul,
.blog-post-body ol{
  font-size: 1.2rem;
  margin: 1rem 0;
  padding-left: 1.4rem;
}
/* Blog blockquotes have no custom styling, so they fall back to the browser
   default margin:1em 40px — a stray left/right indent. Zero the horizontal
   margin so quotes sit flush with the surrounding paragraphs. */
.blog-post-body blockquote{
  margin-left: 0;
  margin-right: 0;
}
.blog-post-body li{
  margin: .6rem 0;
  line-height: 1.7rem;
}
.blog-post-body code,
.changelog-post-body code,
.faq-fold-answer code{
  font-family: var(--mono, monospace);
  font-size: .9em;
  padding: .1rem .35rem;
  background: var(--black);
  color: var(--code-grey);
}
/* No bold in blog/changelog body — strong/b match the body weight (300)
   via the global strong,b { font-weight: inherit } rule. (No override here.) */
/* Links inside text content blocks: code-blue, pink (code-purple-hover)
   on hover — matching the blog-post link style. The colour transition is
   inherited from the global `a, li { transition: color }` rule, so it's
   not repeated here. */
.blog-post-body a,
.changelog-post-body a,
.features-item-body a,
#open-standard-entries a,
.docs-item-body a,
.page-body a,
.privacy-policy-item a,
.terms-conditions-item a,
.faq-fold-answer a{
  color: var(--code-blue);
  text-decoration: underline;
}
.blog-post-body a:hover,
.changelog-post-body a:hover,
.features-item-body a:hover,
#open-standard-entries a:hover,
.docs-item-body a:hover,
.page-body a:hover,
.privacy-policy-item a:hover,
.terms-conditions-item a:hover,
.faq-fold-answer a:hover{
  color: var(--code-purple-hover);
}
/* Inline <code> inside a link follows the link colour (blue → pink on
   hover) instead of the standalone code-grey, so the whole link reads
   as one colour. */
.blog-post-body a code,
.changelog-post-body a code,
.features-item-body a code,
#open-standard-entries a code,
.docs-item-body a code,
.page-body a code,
.privacy-policy-item a code,
.terms-conditions-item a code,
.faq-fold-answer a code{
  color: inherit;
}

/* changelog */
#changelog-entries {
  min-height: 40rem;
}
.changelog-info-line{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .8rem;
}
.changelog-info-line .changelog-version{
  grid-column: 1;
  grid-row: 1;
}
.changelog-info-line .published-date{
  grid-column: 1 / -1;
  grid-row: 2;
}
.changelog-info-line::after{
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  border-top: 1px solid var(--border);
  margin-right: 2rem;
}
.changelog-post p{
  margin: .6rem 0;
  position: relative;
  padding-left: 1.2rem;
  padding-bottom: .3rem;
}
.changelog-info-line.mono{
  color: var(--off-white);
}
.changelog-anchor{
  display: block;
  height: 0;
  transform: translateY(-.8rem);
}

/* docs */
.docs-item-body p{
  position: relative;
  padding-left: 1.2rem;
  padding-bottom: .3rem;
}
.docs-item-body p:first-of-type{
  border-top: 1px solid var(--border);
  padding-top: .6rem;
}
.docs-media-container{
  width: 100%;
  height: 15rem;
  background: var(--black);
}

/* features
   The hanging-indent on paragraphs is scoped to #features-entries
   because features's renderer prepends ▪ to each <p> (each p IS a
   bullet). Other pages that share .features-item-body styling (e.g.
   open-standard) render prose paragraphs and shouldn't be indented.
   The first-of-type border-top stays unscoped — that's the title
   underline used by every features-item-body. */
#features-entries .features-item-body p{
  position: relative;
  padding-left: 1.2rem;
  padding-bottom: .3rem;
}
.features-item-body > p:first-of-type{
  border-top: 1px solid var(--border);
  padding-top: .6rem;
}
/* open-standard's md has `---` separators between sections that marked
   renders as <hr>. Each section already starts with the title-underline
   above, so the extra rule is visual noise. */
#open-standard-entries hr{
  display: none;
}
/* .features-item-body p{
  margin: .6rem 0;
} */
/* (Inline-markdown styling for .features-item-body lives in the
   "Shared markdown-element styling" block near the bottom of this
   file, alongside #open-standard-entries.) */
.features-media-container{
  position: relative;
  width: calc(100% - 1rem);
  margin-left: 1rem;
  height: 15rem;
  background: var(--black);
  overflow: hidden;
}
.features-media-container figure{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1rem 1.25rem;
  color: #fff;
  font-family: 'TWK Lausanne';
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* contributors */
h1.contributor-title{
  border-bottom: 1px solid var(--border);
  padding-bottom: .6rem;
}
.contributor-info{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.4rem;
}
.contributor-profile-pic{
  width: 5rem;
  height: 5rem;
  background: var(--announcement-blue);
  flex-shrink: 0;
  display: block;
  overflow: hidden;
}
.contributor-profile-pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contributor-bio{
  grid-column: 2;
}
@media (max-width: 640px) {
  .contributor-bio{
    grid-column: 1 / -1;
  }
  .contributor-profile-pic{
    width: 3rem;
    height: 3rem;
  }
}
.contributor-class{
  border-top: 1px solid var(--border);
  padding-top: .6rem;

}
/* The .contributor-title already supplies a border-bottom directly above
   the first list item, so collapsing the first item's top border avoids
   a doubled divider line between the heading and the first entry. */
h1.contributor-title + .contributor-class{
  border-top: 0;
  padding-top: 0;
}
a.contributor-class{
  font-size: 1.5rem;
  display: block;
  cursor: pointer;
  color: var(--off-white);
  text-decoration: none;
}
/* FAQs */
.faq-list-title{
  border-top: 1px solid var(--border);
  padding-top: .6rem;

}
a.faq-list-title{
  font-size: 1.5rem;
  display: block;
  cursor: pointer;
  color: var(--off-white);
  text-decoration: none;
}


/* INTERACTION */
.contact-panel,
.page-wrapper,
.desktop-menu,
.grid-col-2 {
  transition: left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), filter .7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity .7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body.no-transition,
body.no-transition *,
body.no-transition *::before,
body.no-transition *::after {
  transition: none !important;
}
body.contact-open {
  overflow: hidden;
}
body.contact-open .contact-panel {
  left: 0;
}

body.contact-open .grid-col-2 {
  filter: blur(30px);
  opacity: .8;
}
/* mobile menu list */
.mobile-menu-list {
  position: fixed;
  top: 0;
  left: 35vw;
  right: 0;
  height: 100vh;
  background: var(--black);
  transform: translateX(100%);
  z-index: 20;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), left 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  padding: 1.6rem 1rem 2rem;
  box-sizing: border-box;
}
.mobile-menu-list a {
  display: block;
  width: fit-content;
  color: var(--off-white);
  font-size: .9rem;
  line-height: 2.6rem;
}
.mobile-contact-content a {
  color: var(--code-purple);
}
.mobile-menu-links {
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.mobile-contact-content {
  opacity: 0;
  position: absolute;
  top: 1.6rem;
  left: 1rem;
  right: 1rem;
  margin-top: 6rem;
  transition: none;
  pointer-events: none;
}
.mobile-contact-content a{
  font-size: 1.1rem;
  line-height: 1rem;
}
body.mobile-contact-open .mobile-menu-list {
  left: 0;
  transition: left 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body.mobile-contact-open .mobile-menu-links {
  opacity: 0;
  pointer-events: none;
}
body.mobile-contact-open .mobile-contact-content {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (max-width: 1000px) {
  body.mobile-menu-open .mobile-menu-list {
    transform: translateX(0);
    transition: transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1), left .4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  body{
    transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .installation-bar,
  .installation-bar::before{
    transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  body.mobile-menu-open{
    background: var(--black);
    overflow: hidden;
  }
  body.mobile-menu-open .installation-bar,
  body.mobile-menu-open .installation-bar::before {
    background: var(--black);
  }
  .left-circle-icon {
    transition: opacity .5s cubic-bezier(0.25, 0.1, 0.25, 1);

  }
  body.mobile-menu-open .left-circle-icon {
    opacity: 0;
       /* filter: blur(5px);
           transition: filter .6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
   */
  }

  body.mobile-menu-open .page-wrapper {
    opacity: .8;
  }
  /* Blur applied via a fixed overlay rather than filter on .page-wrapper,
     so .installation-bar stays viewport-anchored. */
  body.mobile-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 15;
    pointer-events: none;
  }
  body.contact-open .contact-panel {
    transform: translateX(0);
  }
  body.contact-open .page-wrapper {
    left: -90vw;
  }
}

/* Target .base-grid (not .page-wrapper) so .desktop-menu stays interactive
   while overlays are open - the Contact toggle lives there. */
body.mobile-menu-open .base-grid,
body.contact-open .base-grid {
  pointer-events: none;
}
a,
li{
  transition: color;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
a:hover{
  color: var(--code-purple-hover);
}
.contact-panel a:hover{
  color: var(--code-purple-hover)
}
.design-credit a:hover{
  color: var(--jb);
}
/* feature table scrolling */
html{
  scroll-behavior: auto;
}


/* contact panel controls */
.contact-panel{
    left: -45vw;
    width: 45vw;
}
body.contact-open .page-wrapper {
  left: 45vw;
}
body.contact-open .desktop-menu {
  left: calc(45vw + 2.4rem);
}
@media (max-width: 1380px) {
  .contact-panel{
    left: -65vw;
    width: 65vw;
  }
  body.contact-open .page-wrapper {
    left: 65vw;
  }
  body.contact-open .desktop-menu {
    left: calc(65vw + 2.4rem);
  }
}
@media (max-width: 640px) {
  .contact-panel {
    left: auto;
    width: 80vw;
  }
}



@media (max-width: 640px) {

.page-wrapper {
  margin-top: 80px;
}

  }

  /* Privacy policy and terms */
.privacy-policy-item p,
.terms-conditions-item p {
  font-size: .9rem;
  line-height: 1.4rem;
  max-width: 65ch;
}

.privacy-policy-item h2,
.terms-conditions-item h2 {
  font-size: 1.2rem;
  color: var(--base-grey);
}

.privacy-policy-item ul,
.terms-conditions-item ul {
  list-style: none;
  padding: 0 0 .25rem 0;
  margin: 0;
}

.privacy-policy-item li,
.terms-conditions-item li {
  font-size: .9rem;
  line-height: 1.4rem;
  max-width: 65ch;
  color: var(--base-grey);
  margin: .6rem 0;
}
/* Bullet position handled by the unified bullet-list block above. */

/* QUESTS FILTER */
body .mono.quest-list-title{
  letter-spacing: .1rem;
}
.quest-list-title{
  line-height: 1.3rem;
}
.quests-filter{
  color: var(--base-grey);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  padding-right: 30%;
}
@media (max-width: 1275px) {
  .quests-filter{
    padding-right: 0;
  }
}
@media (max-width: 1000px) {
  .quests-filter{
    display: none;
  }
}

.quests-filter .quest-list-title{
  grid-row: 1;
}

.quest-list-filter-column{
  grid-row: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.quest-list-filter-column{
  --item-indent: .8rem;
}
.quest-list-filter-column li{
  /* border-top: 1px solid var(--border); */
  line-height: 1.5rem;
  /* margin-bottom: .3rem; */
  margin-left: var(--item-indent);
  color: var(--dark-grey);
}
@media (max-width: 1080px) {
  .quest-list-filter-column li{
    line-height: 1.2rem;
  }
  
}
.quest-list-filter-column li:first-child{
  border-top: 1px solid var(--border);
  /* line-height: 1.7rem; */
  /* margin-bottom: .3rem; */
  margin-left: 0;
}
li.quest-filter-title,
li.quest-order-title{
  margin-left: 0;
  padding-top: .3rem;
  color: var(--subtle-grey);
  line-height: 1.7rem;
}
@media (max-width: 1080px) {
  li.quest-filter-title,
  li.quest-order-title{
  line-height: 1.3rem;
  }
}
.quest-list-filter-column .quest-filter-item,
.quest-list-filter-column .quest-order-item{
  position: relative;
  cursor: pointer;
  width: fit-content;
  margin-left: 0;
  transition: margin-left 0.1s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  user-select: none;
  -webkit-user-select: none;
}
li.quest-filter-item:hover,
li.quest-order-item:hover{
  color: var(--base-grey);
}
.quest-item-circle{
  position: absolute;
  left: calc(-1 * var(--item-indent));
  transition: none;
  top: 50%;
  transform: translateY(-50%);
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  margin-top: -.1rem;
}
.quest-list-filter-column .quest-filter-item.selected,
.quest-list-filter-column .quest-order-item.selected{
  color: var(--base-grey);
  margin-left: var(--item-indent);
}
.quest-filter-item.selected .quest-item-circle,
.quest-order-item.selected .quest-item-circle{
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* quests posts */
.quest-post .info-line{
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  column-gap: 2rem;
}
.blog-post .info-line{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.quest-post .info-line > span{
  white-space: nowrap;
}
.quest-status{
  justify-self: end;
}
.quest-status.available{
  color: var(--code-purple);
}
/* .quest-status.merged{
  color: var(--white);
} */
 /* status indicators */
.quest-status.available::before{
  content: '';
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--code-purple);
  margin-right: .5rem;
  transform: translateY(-.055rem);
}
.quest-status.merged::before{
  content: '';
  display: inline-block;
  width: .53rem;
  height: .53rem;
  /* border-radius: 50%; */
  background: var(--dark-grey);
  margin-right: .5rem;
  transform: translateY(-.042rem);
}
.quest-difficulty{
  margin-left: 3rem;
}
@media (max-width: 730px) and (min-width: 641px) {
  .difficulty-label {
    display: none;
  }
}
@media (max-width: 640px) {
  .quest-post .info-line {
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }
  .quest-difficulty {
    margin-left: 0;
  }
  .difficulty-label {
    display: none;
  }
}
.quest-post:has(.quest-status.completed) h2,
.quest-post:has(.quest-status.completed) p,
.quest-post:has(.quest-status.completed) .read-more,
.quest-post:has(.quest-status.merged) h2,
.quest-post:has(.quest-status.merged) p,
.quest-post:has(.quest-status.merged) .read-more{
  color: var(--dark-grey);
}
.quest-post:has(.quest-status.completed) .read-more:hover,
.quest-post:has(.quest-status.merged) .read-more:hover{
  color: var(--code-purple-hover);
}
.quest-post:has(.quest-status.completed) .info-line > span,
.quest-post:has(.quest-status.merged) .info-line > span{
  color: var(--dark-grey);
}


 /* quest template */
h1.quest-post-title{
  line-height: 2rem;
  max-width: 43ch;
}
.quest-info-short,
.quests-intro-blurb{
  max-width: 55ch;
}
/* Open-standard reuses .quests-intro-blurb for body copy but should run the
   full content width like every other page (features, changelog, docs) — the
   55ch readable-measure cap is only wanted on the quests page. */
#open-standard-entries .quests-intro-blurb{
  max-width: none;
}

/* brand resources */
.brand-resources-intro-blurb{
  max-width: 55ch;
}
.brand-resources-intro-link{
  color: var(--off-white);
  text-decoration: none;
  transition: color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.brand-resources-intro-link:hover{
  color: var(--code-purple-hover);
}
.brand-resources-example{
  width: 100%;
  aspect-ratio: 4 / 2.55;
  background: var(--dark-backing);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* .brand-resources-example::before,
.brand-resources-example::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--guidelines);
}
.brand-resources-example::before{
  left: 37.2%;
}
.brand-resources-example::after{
  right: 37.2%;
} */
.brand-resources-example-logo-wrap{
  /* --line-gap: 0.1rem; */
  position: relative;
  display: block;
  width: 100%;
  /* padding: var(--line-gap) 0; */
  line-height: 0;
}
/* .brand-resources-example-logo-wrap::before,
.brand-resources-example-logo-wrap::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--guidelines);
}
.brand-resources-example-logo-wrap::before{
  top: 0;
}
.brand-resources-example-logo-wrap::after{
  bottom: 0;
} */
.brand-resources-example-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-resources-info{
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
}
.brand-resources-info-title{
  margin-bottom: .2rem;
  /* color: var(--off-white); */
}
.brand-resources-info figure{
  max-width: 30ch;
  line-height: 1.4rem;
  /* margin-top: .2rem; */
}
.brand-resources-download{
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  color: var(--base-grey);
  line-height: 1.7rem;
  transition: color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.brand-resources-download:hover{
  color: var(--code-purple-hover);
}
@media (max-width: 722px) and (min-width: 641px){
  .brand-resources-info figure + figure{
    display: none;
  }
}
@media (max-width: 700px) and (min-width: 641px){
  .blog-post .info-line .quest-status{
    display: none;
  }
}

/* SCROLL REVEAL
   Reveal targets default to opacity:0 in CSS so they can never paint at
   opacity:1 before JS runs (which used to cause a flash). JS adds
   .is-visible to bring them in. html.no-js disables the gate so no-JS
   visitors still see content. */
/* :where() drops the selector list to specificity 0,0,0 so .is-visible
   (0,1,0) can override descendant selectors like `.contributor-catgeory > h1`
   that would otherwise win on specificity. */
/* Loading transform animation commented out — never worked properly. With
   the default opacity:0/transform rule disabled, targets paint normally and
   the .is-visible class (still added by scroll-reveal.js) is a harmless no-op.
:where(
  .page-heading,
  .blog-post,
  .quest-post,
  .changelog-post,
  .contributor-info,
  .contributor-catgeory > h1,
  .docs-item,
  .features-item,
  .faq-list-title,
  .contributor-class
) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
*/
.is-visible {
  opacity: 1;
  transform: none;
}
html.no-js :where(
  .page-heading,
  .blog-post,
  .quest-post,
  .changelog-post,
  .contributor-info,
  .contributor-catgeory > h1,
  .docs-item,
  .features-item,
  .faq-list-title,
  .contributor-class
) {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  :where(
    .page-heading,
    .blog-post,
    .quest-post,
    .changelog-post,
    .contributor-info,
    .contributor-catgeory > h1,
    .docs-item,
    .features-item,
    .faq-list-title,
    .contributor-class
  ),
  .is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* foldable FAQ items (index.html FAQs section) */
.faq-fold{
  border-top: 1px solid var(--border);
  padding: .9rem 0;
}
.faq-fold:last-of-type{
  border-bottom: 1px solid var(--border);
}
.faq-fold summary{
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-family: 'TWK Lausanne';
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: var(--off-white);
  transition: color .2s;
}
.faq-fold summary::-webkit-details-marker{ display: none; }
.faq-fold summary::after{
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  margin-top: .55rem;
  background: var(--base-grey);
  border-radius: 50%;
  transform: rotate(0deg);
  transform-origin: center;
  transition: border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-fold:hover summary{ color: var(--code-purple-hover); }
.faq-fold.is-open summary::after{
  border-radius: 0;
  transform: rotate(90deg);
  transition: border-radius 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.17s;
}
.faq-fold-answer{
  display: block !important;
  overflow: hidden;
  height: 0;
  -webkit-transition: height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.faq-fold-answer > *{ min-height: 0; }
.faq-fold-answer p{
  margin: .8rem 0 .2rem;
  color: var(--base-grey);
}
@media (max-width: 1000px){
  .faq-fold summary{ font-size: 1.1rem; line-height: 1.4rem; }
}

/* page-body lists - match <p> typography, tighter vertical rhythm */
.page-body ul{
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: var(--base-grey);
  margin: .6rem 0;
  padding-left: 1.4rem;
}
.page-body li{
  margin: .48rem 0;
}
.page-body li b{
  color: var(--off-white);
  font-weight: 300;
}
@media (max-width: 1000px) {
  .page-body ul{
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
}

/* Shared markdown-element styling for every JS-rendered markdown
   surface (open-standard page entries, the features-page item bodies,
   any future page that mounts md). Each new context just adds itself
   to the selector list - the styles live in one place. The site's
   custom font has no bold weight, so emphasis is colour (off-white
   against base-grey body text), matching .page-body li b. */
#open-standard-entries strong,
#open-standard-entries b,
.features-item-body strong,
.features-item-body b{
  color: var(--code-grey);
  font-weight: 300;
}
#open-standard-entries ul,
.features-item-body ul{
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: var(--base-grey);
  margin: .6rem 0;
  padding-left: 1.4rem;
  max-width: 55ch;
}
#open-standard-entries li,
.features-item-body li{
  margin: .48rem 0;
}
/* Bullet system — one mechanism for every bullet on the site: the
   img/bullet.svg square drawn via an absolute-positioned ::before (never a
   glyph — ▪ renders as a colour emoji on some mobile browsers). Covers real
   <li> lists (open-standard/blog/page-body/privacy/terms) AND the
   <p>-rendered lists on changelog/features/docs — identical in every way.
   Absolute-positioned so it sits next to (not above) the first child even
   when an <li> holds block content like <p> or <pre>.

   ┌── Adjust EVERY bullet here ──────────────────────┐
   │ --bullet-size : square width/height               │
   │ --bullet-top  : vertical offset (smaller = higher) │
   └────────────────────────────────────────────────────┘ */
:root{
  --bullet-size: .4rem;
  --bullet-top: .6rem;
}
#open-standard-entries ul,
.features-item-body ul,
.blog-post-body ul,
.blog-post-body ol,
.page-body ul{
  list-style: none;
  padding-left: 0;
}
#open-standard-entries li,
.features-item-body li,
.blog-post-body li,
.page-body li,
.privacy-policy-item li,
.terms-conditions-item li{
  list-style: none;
  position: relative;
  padding-left: 1.2rem;
  padding-bottom: .3rem;
}
#open-standard-entries li::before,
.features-item-body li::before,
.blog-post-body li::before,
.page-body li::before,
.privacy-policy-item li::before,
.terms-conditions-item li::before,
.changelog-post p::before,
#features-entries .features-item-body p::before,
.docs-item-body p::before{
  content: "";
  position: absolute;
  left: 0;
  top: var(--bullet-top);
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: url("img/bullet.svg") center / contain no-repeat;
}
/* The first <p> in each features section carries padding-top:.6rem for the
   title-underline border, which pushes its text down but not the bullet
   (the ::before is anchored to the padding-box top). Offset the bullet by
   the same .6rem so it aligns with the text like every other bullet. */
#features-entries .features-item-body > p:first-of-type::before{
  top: calc(var(--bullet-top) + .6rem);
}
#open-standard-entries li > :first-child,
.features-item-body li > :first-child,
.blog-post-body li > :first-child,
.page-body li > :first-child{
  margin-top: 0;
}
#open-standard-entries code,
.features-item-body code{
  font-family: 'Ufficio Mono';
  font-size: .9em;
  padding: .1rem .35rem;
  background: var(--black);
  color: var(--code-grey);
}
/* Global table styling — applies to every <table> on the site. */
table{
  border-collapse: collapse;
  width: 100%;
  margin: 2.2rem 0;
  font-size: 1rem;
  line-height: 1.7rem;
  color: var(--base-grey);
}
th,
td{
  border-bottom: 1px solid var(--border);
  padding: .48rem .75rem .48rem 0;
  text-align: left;
  vertical-align: top;
}
th:last-child,
td:last-child{
  padding-right: 0;
}
th{
  color: var(--off-white);
  font-weight: 300;
  padding-top: 0;
  padding-bottom: 0;
}
tbody tr:last-child td{
  border-bottom: none;
}
#open-standard-entries blockquote,
.features-item-body blockquote{
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  margin: .6rem 0;
  color: var(--base-grey);
  font-size: 1.2rem;
  line-height: 1.8rem;
  max-width: 55ch;
}
#open-standard-entries blockquote p,
.features-item-body blockquote p{
  margin: 0;
}
#open-standard-entries pre,
.features-item-body pre{
  background: var(--black);
  padding: .9rem 1rem;
  white-space: nowrap;
  overflow-x: auto;
  font-size: .95rem;
  line-height: 1.5rem;
  margin: .6rem 0;
  max-width: 55ch;
  font-family: 'Ufficio Mono';
  color: var(--code-grey);
}
#open-standard-entries pre code,
.features-item-body pre code{
  color: var(--code-grey);
  font-size: 1em;
  background: transparent;
  padding: 0;
  text-wrap: auto;
}
@media (max-width: 1000px) {
  #open-standard-entries ul,
  #open-standard-entries blockquote,
  .features-item-body ul,
  .features-item-body blockquote,
  table{
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
  #open-standard-entries pre,
  .features-item-body pre{
    font-size: .85rem;
    line-height: 1.4rem;
  }
}
/* Shrink table text on phones. Placed after the ≤1000 rule above so it wins by
   source order (same specificity). th/td inherit, so this covers all cells. */
@media (max-width: 640px) {
  table{
    font-size: .9rem;
    line-height: 1.3rem;
  }
  th{
    padding-bottom: .2rem;
  }
}