#main {
    max-width: 100%;
    padding: 0;
}

.top-grid, #testimonials {
    max-width: var(--maxwidth);
    margin: auto auto;
    padding: 0 20px;
}

/* One row of squares, scrolled sideways: every plugin in a line rather than
   a block of them, however narrow the window. */
#plugin-grid {
    position: relative;
    /* the row breaks out of the text column and runs the full width of the
       window, up to the width the rest of the page keeps to; #outer hides
       what spills, so no page-wide scrollbar */
    width: min(100vw, var(--maxwidth));
    max-width: min(100vw, var(--maxwidth));
    margin: 40px calc(50% - min(50vw, var(--maxwidth) / 2)) 40px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100px;
    gap: 0px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* room under the squares for the scrollbar to sit in */
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
    /* the row fades out at its right edge while there is more to come, so it
       reads as a strip that carries on rather than one that simply stops.
       index.js takes the fade off once the end is reached. */
    --fade: 70px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
}

#plugin-grid.at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

#plugin-grid::-webkit-scrollbar {
    height: 8px;
}

#plugin-grid::-webkit-scrollbar-track {
    background: transparent;
}

#plugin-grid::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #d4d4d8;
}

#plugin-grid .plugin-square {
    scroll-snap-align: start;
}

/* A row that runs off both edges of the window and is scrolled sideways, as
   the squares are, and stops where they stop. */
.home-strip {
  display: flex;
  gap: 10px;
  width: min(100vw, var(--maxwidth));
  max-width: min(100vw, var(--maxwidth));
  margin-left: calc(50% - min(50vw, var(--maxwidth) / 2));
  margin-right: calc(50% - min(50vw, var(--maxwidth) / 2));
  padding: 2px 20px 10px;
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-left: 20px;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
  list-style: none;
}

.home-strip::-webkit-scrollbar {
  height: 8px;
}

.home-strip::-webkit-scrollbar-track {
  background: transparent;
}

.home-strip::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: #d4d4d8;
}

/* fading out at the right edge while there is more to come, as the row of
   squares does; index.js takes the fade off at the end of the row, and a row
   short enough to fit never wears it at all */
.home-strip {
  --fade: 70px;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent);
}

.home-strip.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

#content .home-categories {
  /* centred while they fit; "safe" so a row too long to fit starts at its
     beginning rather than being cut off on the left */
  justify-content: safe center;
  margin-top: -18px;
  margin-bottom: 26px;
}

#content .home-categories .directory-category {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* One collection, featured: the layered stage its own page opens with, and
   its name under it. The whole band is the link. */
/* the whole band shares one ground: the plugins' colours, ruled over in fine
   squares like the desk further down the page */
.home-featured {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin: 8px calc(50% - 50vw) 18px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  color: royalblue;

  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(135deg, var(--tint-from), var(--tint-to));
}

/* The fan is laid out in percentages of this box, so it only stays composed
   while the box can grow: past the width where the first plugin hits its own
   2x cap the images stop growing and the fan pulls apart. curated.py works
   that width out per collection and hands it over as --stage-px; the band
   behind still runs the whole way across. */
.home-featured-stage {
  position: relative;
  display: block;
  aspect-ratio: 100 / 42;
  max-width: var(--stage-px, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.home-featured-stage .collection-shot {
  position: absolute;
  display: block;
  height: auto;
  transform: rotate(var(--turn, 0deg));
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16));
}

.home-featured-words {
  display: block;
  padding: 6px 20px 0;
  text-align: center;
  margin-top: -20px;
}

/* named with #content, which is where the underline on every link in the
   page comes from */
#content .home-featured,
#content .home-featured:hover {
  text-decoration: none;
}

/* the same colour the name is written in, let down towards the wash it sits
   on: quieter than the name without going grey on it */
.home-featured-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #999;
  color: color-mix(in srgb, var(--ink-from, #999) 58%, white);
  font-size: 12px;
  font-variation-settings: "wght" 700, "ital" 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* the name written in the colours it sits on, darkened: the first plugin's
   into the last's, as the tint behind it runs */
.home-featured-name {
  display: block;
  color: var(--ink-from, #222);
  font-size: 1.7em;
  font-variation-settings: "wght" 780, "opsz" 24;
  background-image: linear-gradient(110deg, var(--ink-from, #222), var(--ink-to, #222));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* under the band, the way to the rest of them */
#content .home-featured-more {
  margin: 0 0 46px;
  text-align: center;
  font-size: 15px;
}

#content .home-featured-more a {
  color: royalblue;
  font-variation-settings: "wght" 600, "ital" 0;
  text-decoration: none;
}

#content .home-featured-more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-featured-arrow {
  display: inline-block;
  transition: transform 0.15s ease-out;
}

/* The name's colour comes from a gradient clipped to its own text, which only
   reaches the glyphs the element paints itself. The arrow is moved on hover,
   and a transform puts it on its own layer — out of that painting, and so
   invisible, since the fill it inherits is transparent. It carries the colour
   the gradient ends on instead, which is where it sits anyway. */
.home-featured-name .home-featured-arrow {
  color: var(--ink-to, #222);
  -webkit-text-fill-color: var(--ink-to, #222);
}

.home-featured:hover .home-featured-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .home-featured-arrow {
    transition: none;
  }

  .home-featured:hover .home-featured-arrow {
    transform: none;
  }
}

/* the ways in, under the row of squares: buttons rather than a line of links,
   with the font's own arrow on each */
#content .grid-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: -14px 0 36px;
}

#content .grid-links a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 100px;
    background: white;
    color: royalblue;
    font-size: 15px;
    font-variation-settings: "wght" 600, "ital" 0;
    text-decoration: none;
    transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

#content .grid-links a:hover {
    border-color: royalblue;
    background: rgba(65, 105, 225, 0.07);
}

/* the free ones wear the site's green, as they do on /plugins */
#content .grid-links a.is-free {
    border-color: #b9dfc6;
    background: #eaf6ee;
    color: seagreen;
}

#content .grid-links a.is-free:hover {
    border-color: seagreen;
    color: #1e6b41;
}

h1 span, h2 span {
    white-space: nowrap;
}

#content h1.slogan {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 60px;
}

#content h2.subslogan {
    font-size: 1.25rem; font-variation-settings: 'ital' 1, 'wght' 200;
    text-align: center;
    margin-top: 0px;
}

@media (max-width: 650px) {
    #plugin-grid {
        grid-auto-columns: 130px;
        margin-top: 40px;
    }

    .slogan {
        font-size: 2.25em !important;
    }
}

.plugin-square {
    color: royalblue;
    text-decoration: none;
    display: block;
    border: 6px solid white;
    position: relative;
}

.plugin-square-img-wrapper {
    border: 6px solid blue;
}

.plugin-square img {
    width: 100%;
    display: block;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.plugin-square:hover {
    background-color: var(--custom-color);
    background-color: #ccc;
    transition: background-color 0.15s ease-in-out;
}

/* The name, kept for the markup's sake and not drawn: the square is the logo,
   and the alt text on it is what says which plugin this is. */
.plugin-square .plugin-square-info {
    position: absolute;
    inset: 0;
    color: var(--ink, #222);
    text-decoration: none;
    pointer-events: none;
}

.plugin-square .plugin-square-info .plugin-square-name {
    display: none;
    position: absolute;
    left: 11px;
    top: 8px;
    font-size: 1.5em;
    width: 80%;
    font-variation-settings: "wght" 700, "opsz" 36;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* a small wobble under the pointer, which is the whole of the hover now */
.plugin-square img {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plugin-square:hover img,
.plugin-square:focus-visible img {
    transform: rotate(calc(var(--tilt-logo, 1.5deg))) scale(1.04);
}

.plugin-square:nth-child(even):hover img,
.plugin-square:nth-child(even):focus-visible img {
    --tilt-logo: -1.5deg;
}

@media (prefers-reduced-motion: reduce) {
    .plugin-square img {
        transition: none;
    }

    .plugin-square:hover img,
    .plugin-square:focus-visible img {
        transform: none;
    }
}

@media (max-width:650px) {
    .plugin-square .plugin-square-info .plugin-square-name { font-size: 1.1em; }
}

#plugin-grid-hovers {
    position: absolute;
    top: 0;
    left: 0;
}

.plugin-square-hover {
    background: black;
    border: 2px solid white;
    color: white;
    display: block;
    padding: 6px 10px;
    font-size: 1.2em;
    font-variation-settings: "wght" 350;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

#content .plugin-square-hover h4 {
    color: white;
    font-variation-settings: "wght" 750;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    margin-bottom: 2px;
}

#content .plugin-square-hover p {
    margin-bottom: 0;
}

.plugin-square-hover.visible {
    opacity: 1;
    visibility: visible;
}

#minidaw-wrapper {
    height: 860px;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

/* The desk the plugins are strewn across: paper ruled in fine squares, with
   a heavier line every fifth, and a wash of light from the top. */
#minidaw {
    background: #ececed;
    height: 860px;
    margin: 0 -21px;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: inset 0 14px 30px -14px rgba(0, 0, 0, 0.18);

    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%);

    overflow: hidden;
}

@media (max-width: 800px) {
    #minidaw-wrapper {
        display: none;
    }
}

@keyframes bounce {
    0% { transform: translate(0px, 0px); }
    10% { transform: translate(-6px, -50px); }
    20% { transform: translate(0px, 0px); }
}

/* each window lifts off the desk rather than sitting in a black halo */
#minidaw .plugin-screenshot {
    position: absolute;
    top: 10px;
    left: 10px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.14),
        0 10px 24px rgba(0, 0, 0, 0.18),
        0 30px 60px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s, transform 0.2s;
    /* animation: bounce 10s 1; */
}

#minidaw .plugin-screenshot:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.16),
        0 16px 34px rgba(0, 0, 0, 0.22),
        0 40px 80px rgba(0, 0, 0, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    #minidaw .plugin-screenshot {
        transition: none;
    }

    #minidaw .plugin-screenshot:hover {
        transform: none;
    }
}

#minidaw.clicked .plugin-screenshot {
    animation: none;
}

#minidaw .plugin-screenshot img {
    position: absolute;
    top: -20px;
    left: -20px;
    pointer-events: none;
}

#minidaw .plugin-screenshot a {
    position: absolute;
    top: 21px;
    left: 0px;
}

/* the same pills /plugins uses to narrow itself down, stacked on the desk */
#minidaw .categories {
    position: absolute;
    top: 30px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
    z-index: 2;
}

#minidaw h4.category {
    margin: 0;
    font-size: 15px;
    font-variation-settings: "wght" 600, "opsz" 24;
    cursor: pointer;
}

#content #minidaw h4.category a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    color: #444;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}

#content #minidaw h4.category a:hover {
    border-color: royalblue;
    color: royalblue;
}

#content #minidaw h4.category.active a {
    border-color: royalblue;
    background: royalblue;
    color: white;
}

/* how to play with it, on a card of its own so it reads over the windows */
#minidaw .instructions {
    position: absolute;
    left: 40px;
    bottom: 30px;
    z-index: 2;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #555;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-variation-settings: "ital" 1, "wght" 400, "opsz" 12;
}

.whats-new {
    max-width: var(--maxwidth);
    padding: 20px;
    margin: auto auto;
    /* text-align: center; */
    border-bottom: 1px solid #eee;
}

.whats-new-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

#content .whats-new .post {
    display: block;
    text-decoration: none;
    /* the titles are nowrap, so without this each column refuses to shrink
       past the width of its own title and the three stop tracking each other
       as the window narrows; the ellipsis takes over instead */
    min-width: 0;
}

#content .whats-new .post:last-of-type {
    border-right: none;
}

@media (max-width: 600px) {
    .whats-new-inner {
        grid-template-columns: auto;
        grid-template-rows: repeat(3, 1fr);
        row-gap: 20px;
    }
}

/* Under the three teasers, the way out to the whole blog — the same quiet
   line the featured collection uses to get to /collections. */
#content .whats-new-more {
    margin: 24px 0 4px;
    text-align: center;
    font-size: 15px;
}

#content .whats-new-more a {
    color: royalblue;
    font-variation-settings: "wght" 600, "ital" 0;
    text-decoration: none;
}

#content .whats-new-more a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#content .whats-new-more a span {
    display: inline-block;
    transition: transform 0.15s ease-out;
}

#content .whats-new-more a:hover span {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    #content .whats-new-more a span {
        transition: none;
    }
}

#content .whats-new .post h5 {
    color: #555;
    margin-bottom: 0px;
    font-size: 0.8em;
    font-variation-settings: "wght" 400, "opsz" 12, "ital" 1;
}

#content .whats-new .post h3 {
    color: royalblue;
    margin-top: 4px;
    margin-bottom: 10px;
    font-size: 1.75em;
    font-variation-settings: "wght" 800, "opsz" 36;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#content .whats-new .post:hover {
    /* background: #eee; */
    /* border: 1px solid #ddd; */
    text-decoration: underline;
}

#content .whats-new .post p {
    color: #333;
    margin-top: 10px;
}

#content .whats-new .post .img-wrapper {
    background-color: #eee;
    max-width: 540px;
    max-height: 540px;
    min-height: 100px;
}

#content .whats-new .post img {
    width: 100%;
    display: block;
}

.whats-new-videos {
    text-align: center;
    max-width: var(--maxwidth);
    margin: auto auto;
    margin-top: 52px;
    margin-bottom: 30px;
    padding: 0 20px;
}

.whats-new-grid.videos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* padding: 10px; */
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    /* max-width: 800px; */
    margin-bottom: 40px;
}

@media (max-width:850px) {
    .whats-new-grid.videos {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:650px) {
    .whats-new-grid.videos {
        grid-template-columns: 1fr;
    }
}

.whats-new-grid.videos .post {
    /* height: 100%; */
    min-height: 400px;
    display: block;
    background-size: cover;
    overflow: hidden;
    text-decoration: none !important;
}

.whats-new-grid .video {
    /* height: 300px; */
    /* padding: 10px; */
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    /* the frame the still is magnified inside: without the clip it would grow
       past its own edges and over its neighbour */
    overflow: hidden;
    border-radius: 10px;
}

.whats-new-grid .video iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.whats-new-grid .video a {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: block;
}

.whats-new-grid .video a img {
    width: 100%;
    height: 100%;
    /* cover, because the fallback still is 4:3 with black bars baked in where
       maxresdefault is 16:9 — stretching one to the other's shape squashes it */
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.whats-new-grid .video a:hover img,
.whats-new-grid .video a:focus-visible img {
    transform: scale(1.055);
}

.whats-new-grid .video a .play-button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0,0,0,0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    line-height: 100px;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
    /* the arrow grows a little less than the picture does, so that it reads as
       sitting on top of it rather than being part of it */
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
                background-color 0.5s ease,
                color 0.2s ease;
}

.whats-new-grid .video a:hover .play-button,
.whats-new-grid .video a:focus-visible .play-button {
    transform: scale(1.06);
    /* a wash over the whole still, which is what keeps the arrow legible on
       the bright ones — several of these thumbnails are a white studio */
    background-color: rgba(0,0,0,0.22);
    color: white;
}

.whats-new-grid .video a:focus-visible {
    outline: 3px solid seagreen;
    outline-offset: -3px;
}

/* magnification is the whole of the effect, so with motion turned down there
   is nothing left to do but leave the still where it is */
@media (prefers-reduced-motion: reduce) {
    .whats-new-grid .video a img,
    .whats-new-grid .video a .play-button {
        transition: none;
    }
    .whats-new-grid .video a:hover img,
    .whats-new-grid .video a:focus-visible img,
    .whats-new-grid .video a:hover .play-button,
    .whats-new-grid .video a:focus-visible .play-button {
        transform: none;
    }
}


/* ------------------------------------------ the modal a preview opens into */

/* The scrolling belongs here rather than on the panel: the arrows sit outside
   the panel on a wide window, and a panel that scrolls clips whatever hangs
   over its edge. Centring is `margin: auto` on the panel for the same reason
   it usually is, that centring a flex item taller than its container puts the
   top of it out of reach. */
.video-modal {
    position: fixed;
    inset: 0;
    /* the level the site's other modals sit at (style_2024.css) */
    z-index: 3000;
    display: flex;
    padding: 24px;
    overflow-y: auto;
    text-align: left;
}

.video-modal[hidden] {
    display: none;
}

/* the page behind does not scroll while this is over it */
body.video-modal-open {
    overflow: hidden;
}

/* fixed, not absolute: the modal it sits in scrolls, and an absolute backdrop
   would only cover the first screenful of a tall one */
.video-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.video-modal-panel {
    position: relative;
    margin: auto;
    width: 100%;
    /* box-sizing is content-box here, so the panel is this plus its padding:
       780 + 32 = 812. That is what the breakpoint below is worked out from —
       the arrows need 54px of their own either side of it. */
    max-width: 780px;
    padding: 16px;
    border-radius: 14px;
    background: white;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* The stage the player stands on: dark, and running to the edges of the panel
   over its padding, so the top of the modal is one dark field. It also means
   the black of a letterboxed video has something to be black against. */
/* The arrows are positioned against this rather than against the panel, so
   that they come to rest on the middle of the video. It takes the stage's old
   negative margins, which is what pulls both out over the panel's padding: its
   padding box then runs to the panel's outer edge, and an arrow at -54px is
   54px clear of the panel. */
.video-modal-stage-wrap {
    position: relative;
    margin: -16px -16px 0;
}

.video-modal-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px 14px 0 0;
    background: #131315;
    overflow: hidden;
}

.video-modal-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal-words {
    text-align: center;
}

.video-modal .video-modal-title {
    margin: 14px 0 0;
    font-size: 19px;
    line-height: 1.25;
}

.video-modal .video-modal-out {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #777;
}

.video-modal .video-modal-out:hover {
    color: #111;
}

.video-modal .video-modal-count {
    margin: 8px 0 0;
    color: #999;
    font-size: 12px;
}

/* the way out, and the way along */

.video-modal-close,
.video-modal-step {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    font-family: var(--text-font);
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.video-modal-close:hover,
.video-modal-step:hover {
    background: white;
    transform: scale(1.06);
}

.video-modal-close[hidden],
.video-modal-step[hidden],
.video-modal .video-modal-count[hidden] {
    display: none;
}

/* Against the window rather than the panel: the stage runs to the panel's top
   corners, and a close button in that corner sits on top of what the player
   keeps there — its settings. */
.video-modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    font-size: 21px;
}

/* Outside the panel on a wide window, where they are clear of the video, and
   tucked back inside it once there is no room for that. */
.video-modal-step {
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    /* above the stage, which is positioned and comes later in the markup —
       without this the arrows are painted under the video once they tuck
       inside the panel */
    z-index: 2;
    /* the arrows the rest of the site uses, as Polymath draws them */
    font-size: 17px;
    font-variation-settings: "wght" 600;
}

.video-modal-step[data-video-step="-1"] { left: -54px; }
.video-modal-step[data-video-step="1"] { right: -54px; }

/* 812 for the panel, 48 for the modal's own padding and 54 either side for an
   arrow: below 970 there is no longer room outside, so they come in over the
   video, where they are still clear of the player's controls. */
@media (max-width: 970px) {
    .video-modal-step[data-video-step="-1"] { left: 8px; }
    .video-modal-step[data-video-step="1"] { right: 8px; }
}

/* .whats-new-grid .video::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0;
    padding-bottom: calc(100% * .75);
} */

#content h2.section-header {
    text-transform: uppercase;
    letter-spacing: 10px;
    color: #555;
    margin-bottom: 0;
    padding: 20px;
    text-align: center;
    font-size: 1.2rem;
}

#content h2.section-header a {
    text-decoration: none;
}

#content #whats-new h2.section-header {
    letter-spacing: 4px;
}

#testimonials {
    border-top: 1px solid #eee;
    margin-bottom: 40px;
}

#testimonials .testimonial-list {
    display: flex;
    column-gap: 20px;
}

@media (max-width: 1200px) {
    #testimonials .testimonial:nth-last-of-type(-n+1) {
        display: none;
    }
}

@media (max-width: 900px) {
    #testimonials .testimonial:nth-last-of-type(-n+2) {
        display: none;
    }
}

@media (max-width: 660px) {
    #testimonials .testimonial-list {
        flex-direction: column;
    }

    #testimonials .testimonial {
        margin: 1px 0px !important;
    }

    #testimonials .testimonial:first-of-type {
        margin: 0px 0px 1px !important;
    }
}

#testimonials .testimonial {
    font-size: 0.9em;
    /* padding: 10px; */
    margin: 0px 1px;
    background: white;
    min-width: 180px;
}

#testimonials .testimonial .quotation {
    display: inline-block;
    margin-bottom: -10px;
}

#testimonials .testimonial strong {
    display: block;
    text-decoration: none;
    text-align: right;
    font-variation-settings: "wght" 700;
}

#testimonials .testimonial strong span {
    font-variation-settings: "wght" 400;
    color: #ccc;
    margin-right: 3px;
}

#testimonials .testimonial a.testifier:hover {
    color: deeppink;
}

#testimonials .testimonial a.testifier span {
    color: #ccc;
    margin-right: 5px;
}

#testimonials .testimonial .bio {
    display: inline-block;
    width: 100%;
}

#testimonials .testimonial .bio p {
    margin-bottom: 0px !important;
    font-variation-settings: "wght" 300, "ital" 1;
    font-size: 0.9em;
    color: #555;
    text-align: right;
    padding-left: 10px;
}

/* ------------------------------------------- the three that sell best */

/* The cards themselves are /plugins' (plugin_directory.css); what is here is
   the band they sit in on this page. */
.home-popular {
    margin: 34px auto 6px;
    padding: 0 10px;
    max-width: 1200px;
}

/* Three abreast, never two with an orphan under them. Written through the
   section so it outweighs `#content .plugin-cards` in plugin_directory.css,
   which is the same weight and loads after this. */
#content .home-popular .plugin-cards {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
    #content .home-popular .plugin-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* the way out to the rest of them, as the featured collection has one — the
   same rule draws both; this only sets how far it sits from the cards */
#content .home-popular .home-featured-more {
    margin: 18px 0 0;
}