/* This site's styles beyond the theme's personal.css (Website/theme/assets/css/personal.css). */

/* The recommended tags' pills link to their collections here (/recommended/sites/, /recommended/apps/,
   /recommended/podcasts/, /recommended/services/), not to /tag/...: the same footer purple with white text as
   personal.css gives them. */
:is(.m-article-card__tag, .m-tags li a):is([href="/recommended/sites/"], [href="/recommended/apps/"],
    [href="/recommended/podcasts/"], [href="/recommended/services/"]) {
  background: var(--footer-background-color);
  color: #fff !important;
}

/* The 404 page (src/pages/404.astro): a shrug as its picture, in the dashboard's orange in dark mode and the
   accent purple in light mode (the image is a mask, so one file serves both), then three recommendations. */
.personal-404-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The fixed menu bar (about 67 px) covers the top. */
  padding: 120px 24px 48px;
}

.personal-404-shrug {
  width: min(720px, 90%);
  aspect-ratio: 2042 / 390;
  background-color: var(--footer-background-color, #4e2a84);
  -webkit-mask: url("/site/404_shrug.webp") center / contain no-repeat;
  mask: url("/site/404_shrug.webp") center / contain no-repeat;
}

html[data-theme="dark"] .personal-404-shrug {
  background-color: var(--dashboard-orange, #f5a25d);
}

.personal-404 {
  padding: 0 20px 64px;
  text-align: center;
}

.personal-404-more {
  padding-bottom: 64px;
}

.personal-404-more__title {
  text-align: center;
}

/* The 404 page's "404" in light mode: the dark mode's page background (the palette's darkest purple, set by
   the palette in data/site.json's code injection; not a variable in light mode). Dark mode keeps the theme's color. */
html[data-theme="light"] .m-404-title {
  color: #17121f;
}

/* The footer's feed menu (Footer.astro): the RSS icon opens a popover listing the site's feeds. */
.personal-feeds-button {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dashboard-orange, #f5a25d);
  font-size: 1rem;
  line-height: inherit;
  cursor: pointer;
}

.personal-feeds {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin: auto;
  padding: 20px 20px 24px;
  border: 1px solid var(--primary-border-color);
  border-radius: 16px;
  background: var(--background-color);
  color: var(--primary-foreground-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.personal-feeds::backdrop {
  background: rgba(23, 18, 31, 0.5);
}

.personal-feeds__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.personal-feeds__title {
  margin: 0;
  color: var(--titles-color);
  font-size: 1.25rem;
}

.personal-feeds__close {
  padding: 6px;
  border: 0;
  background: none;
  color: var(--titles-color);
  font-size: 1rem;
  cursor: pointer;
}

.personal-feeds__hint {
  margin: 4px 0 12px;
  font-size: .875rem;
  opacity: .75;
}

.personal-feeds__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.personal-feeds__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--titles-color);
  text-decoration: none;
}

.personal-feeds__list a:hover,
.personal-feeds__list a:focus-visible {
  background: var(--secondary-subtle-color);
}

.personal-feeds__list .icon-rss {
  color: var(--dashboard-orange-line, #c75a00);
}

.personal-feeds__list strong,
.personal-feeds__list small {
  display: block;
}

.personal-feeds__list small {
  opacity: .75;
}

/* The tailnet preview's drafts and scheduled posts (src/lib/site.js previewState): a label before the title. */
.personal-preview-label {
  display: inline-block;
  margin-right: .5em;
  padding: .1em .55em;
  border-radius: 999px;
  background: var(--dashboard-orange, #f5a25d);
  color: #17121f;
  font-size: .6em;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* The aperture's extras (src/lib/site.js APERTURE_EXTRAS), each still when motion is reduced. */
.personal-aperture-sprite {
  position: absolute;
  overflow: hidden;
}

/* The straight-blade iris drawn to move (Iris.astro; lib/aperture.js IRIS): --iris-d is the six chords' distance from
   the centre, 3 closed (a small hexagon still open in the middle) to 32.17 fully open. Each blade's half-plane slides out along its own direction by --iris-d,
   the next blade's gap by --iris-d less the gap (2.4); BH shows through the hexagonal hole (apothem --iris-d).
   Registered, so the header logo's click can animate it. */
@property --iris-d {
  syntax: "<number>";
  inherits: true;
  initial-value: 12.8;
}
.personal-iris-blade {
  transform: translateX(calc(var(--iris-d) * 1px));
}
.personal-iris-gap {
  transform: translateX(calc((var(--iris-d) - 2.4) * 1px));
}
.personal-iris-hole {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: scale(var(--iris-d));
}

/* The header logo (HeaderLogo.astro: the iris with BH, drawn inline; a link to the home page), large enough for its
   letters to read; at rest its chords stand at 18.5 (IRIS.logo), open enough to leave space round BH. */
.m-logo {
  height: 44px;
}
.m-logo svg.personal-iris {
  --iris-d: 18.5;
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  fill: #4f2a84;
}
html[data-theme="dark"] .m-logo svg.personal-iris {
  fill: #ece6f5;
}

/* The header logo's shutter click, on hover or keyboard focus: the six blades slide in together over BH until only a
   small hexagon is left open in the middle (closed, IRIS.closed), then back out. */
@keyframes personal-iris-close {
  0%, 100% { --iris-d: 18.5; }
  40%, 60% { --iris-d: 3; }
}
.personal-aperture-extras .m-logo:is(:hover, :focus-visible) svg.personal-iris {
  animation: personal-iris-close .9s cubic-bezier(.45, 0, .25, 1);
}

/* The reading-progress shutter (ApertureShutter.astro: the iris without BH) is the progress, in place of the theme's
   ring. As the page scrolls to the post's end (--open, 0 to 1) the blades slide out from closed (a small hexagon left
   open, IRIS.closed) to fully open (a perfect hexagon), and the iris turns a quarter turn. It follows the scroll directly (no transition). */
.m-icon-button.personal-shutter-button svg:not(.personal-shutter) {
  display: none;
}
.m-icon-button.personal-shutter-button svg.personal-shutter {
  --iris-d: calc(3 + var(--open, 0) * 29.17);
  position: absolute;
  inset: 15%;
  width: 70%;
  height: 70%;
  fill: currentColor;
  opacity: 1;
  overflow: visible;
  transform: rotate(calc(var(--open, 0) * 90deg));
}
/* The theme strokes and turns every circle in this button (its progress ring); not the shutter's. */
.m-icon-button.personal-shutter-button svg.personal-shutter circle {
  stroke: none;
  transform: none;
  transition: none;
}

/* The end-of-post mark: a small aperture after the post's last paragraph, in the accent color. */
.personal-aperture-extras .js-post-content > p:last-of-type::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .45em;
  vertical-align: -.08em;
  background: var(--footer-background-color, #4e2a84);
  -webkit-mask: url(/content/images/branding/aperture_dark.svg) center / contain no-repeat;
  mask: url(/content/images/branding/aperture_dark.svg) center / contain no-repeat;
}
html[data-theme="dark"].personal-aperture-extras .js-post-content > p:last-of-type::after {
  background: var(--dashboard-orange, #f5a25d);
}

/* The footer mark, before the copyright line. */
.personal-footer-aperture {
  width: 1.1em;
  height: 1.1em;
  margin-right: .45em;
  vertical-align: -.2em;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .personal-aperture-extras .m-logo svg.personal-iris { animation: none !important; }
}

/* Sliders (public/site/site.js): a row that scrolls sideways, a card at a time, in place of the theme's Swiper. */
.swiper {
  position: relative;
}
.swiper-wrapper {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.m-recent-articles .swiper-slide {
  flex-basis: auto;
}
@media only screen and (min-width: 45rem) {
  .m-recommended-slider .swiper-slide { flex-basis: 50%; }
}
@media only screen and (min-width: 64rem) {
  .m-recommended-slider .swiper-slide { flex-basis: 33.3333%; }
  .m-recommended-slider .swiper-wrapper { justify-content: flex-start; }
}
.swiper-button-prev:disabled,
.swiper-button-next:disabled {
  opacity: .35;
  cursor: default;
}

/* Card titles shortened by line count (the theme's Shave measured heights: 100, 250, 200, and 50 px). */
.js-article-card-title,
.js-article-card-title-no-image,
.js-featured-article-title,
.js-recent-article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.js-article-card-title { -webkit-line-clamp: 3; }
.js-article-card-title-no-image { -webkit-line-clamp: 6; }
.js-featured-article-title { -webkit-line-clamp: 5; }
.js-recent-article-title { -webkit-line-clamp: 2; }
@media only screen and (min-width: 48rem) {
  .js-featured-article-title { -webkit-line-clamp: 4; }
}

/* Image zoom (public/site/site.js): a picture in a post opens full size. */
.personal-zoomable {
  cursor: zoom-in;
}
.personal-zoom {
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.personal-zoom::backdrop {
  background: rgba(10, 8, 14, .88);
}
.personal-zoom img {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
}

/* Embedded video keeps its shape at any width (the theme's fitvids). */
.js-post-content .kg-embed-card iframe,
.js-post-content > iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* The home page's subtitle (site.json subtitle), between the heading and the description: two thirds of the
   description's size (.m-hero-description.bigger: 1.125rem, 1.375rem from 48rem), and nearer the heading (pulled up
   into its 15px or 10px margin) than the description. */
.personal-hero-subtitle{font-size:.75rem;margin:-9px 0 14px}
@media only screen and (min-width:48rem){.personal-hero-subtitle{font-size:.917rem;margin:-5px 0 16px}}

/* Accessibility. The skip link: hidden until a keyboard user reaches it, first on every page. */
.personal-skip-link{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:5px;background:#4e2a84;color:#fff!important;font-weight:600;text-decoration:none}
.personal-skip-link:focus{top:12px}
main:focus{outline:none}
/* Keyboard focus is always visible: the theme removes outlines on its buttons and fields (outline:0), with more
   specific rules than the palette's :focus-visible, so this one wins. The dark mode switch is an invisible checkbox
   over its icons: the ring goes on the switch. */
:focus-visible,.m-icon-button:focus-visible,.m-button:focus-visible,.m-input:focus-visible{outline:2px solid var(--dashboard-orange-line,#c75a00)!important;outline-offset:2px!important}
.m-toggle-darkmode:has(input:focus-visible){outline:2px solid var(--dashboard-orange-line,#c75a00);outline-offset:2px;border-radius:999px}
/* Reduced motion (the system setting): the theme's fade-ins, slides, and transitions are off, and everything shows
   at once ([data-animate] starts transparent and is shown by its animation). */
@media (prefers-reduced-motion: reduce) {
  [data-animate]{animation:none!important;opacity:1!important;transform:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
/* Colour blindness (checked with simulated protanopia, deuteranopia, and tritanopia): the footer's links are a lighter
   orange, 5.4:1 or more on the footer purple for every kind (the palette's orange fell to 4.3:1 for protanopia); in
   light mode a post link's hover underline and the orange tag pills' edges are the darker orange line colour, 3:1 or
   more on the page. Nothing relies on colour alone: post links are underlined, and pills carry their names. */
.m-footer-social a,.m-footer-copyright a{color:#f9b97e!important}
html[data-theme=light] .l-post-content a:hover{text-decoration-color:#c75a00!important}
html[data-theme=light] :is(.m-article-card__tag,.m-tags li a):not([href^="/recommended/"]){box-shadow:0 0 0 1px #c75a00}
/* Target size (WCAG 2.2, 2.5.8, met without its spacing exception): every button, tag pill, and menu link is at least
   24×24 px. Links inside sentences (the footer's line) are text and keep their size. */
button,.m-button,.m-icon-button,.personal-feeds-button{min-width:24px;min-height:24px}
.personal-feeds-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
:is(.m-article-card__tag,.m-tags li a){padding:3px 10px!important;margin:-3px -10px!important;min-height:24px}
.m-nav__left a{display:inline-flex;align-items:center;min-height:24px}