/* listing heading.
   It lands inside the grid container on templates whose content slot is the
   container itself, and a grid puts it in the first cell — so the first row
   starts one column late and a hole sits where a card should be. Spanning the
   row is correct wherever it ends up. */
.jvo-listing-title{margin:0 0 1.2rem;grid-column:1/-1}
/* The grid can itself be a cell: when the boundary was the card container, ours
   is nested inside the template's. Spanning the row is a no-op anywhere else. */
.jvo-grid{grid-column:1/-1}
.jvo-grid > .jvo-listing-title{grid-column:1 / -1}

/* hub links: a page whose children are the content, on a site where the hub
   itself was never captured with any. Plain cards, the site's own colours
   inherited from the theme. */
.jvo-hub{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0 2.5rem}
@media (min-width:44em){.jvo-hub{grid-template-columns:1fr 1fr}}
.jvo-hub-item{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem 1.4rem;border:1px solid currentColor;border-radius:10px;text-decoration:none;opacity:.9}
.jvo-hub-item:hover{opacity:1}
.jvo-hub-title{font-weight:700;font-size:1.15rem}
.jvo-hub-sub{font-size:.95rem;opacity:.75}

/* A slider whose script is gone.
   Every carousel library lays its slides in one row and then relies on
   JavaScript to move a window over them. Scripts are stripped, so what is left
   is the row: gamblerkey.org's home page put its slides 2,595px past the
   right edge, and with a second slider nested inside a third the document came
   out 33,078px wide in a 1440px window. Nothing was missing and no request
   failed — the page was simply unusable.

   These are hardcoded class names, which this file otherwise avoids. The
   justification is the one the consent-dialog selectors get: they are a
   third-party library's fixed vocabulary, not the site's own markup, and they
   cost nothing when absent. The strip is made scrollable rather than clipped so
   the slides stay reachable without a script — clipping them would hide content
   the page still has.

   The rules are !important because the site's own is more specific than any
   class can be: gamblerkey.org ships an id-scoped rule setting the container's
   overflow back to visible, which made sense while the script was moving a
   transformed strip underneath it, and is exactly what has to be overridden now
   that nothing is. */
.swiper-container,.swiper,.slick-slider,.slick-list,.owl-carousel,.owl-stage-outer,.splide__track,.glide__track,.flickity-viewport{max-width:100% !important;overflow-x:auto !important;overflow-y:hidden !important}
.swiper-wrapper,.slick-track,.owl-stage,.splide__list,.glide__slides,.flickity-slider{display:flex;width:auto !important;transform:none !important;transition:none !important;position:static !important}
.swiper-slide,.slick-slide,.owl-item,.splide__slide,.glide__slide{flex:0 0 auto;position:static !important;left:auto !important}

/* pagination */
/* The nav is appended after the content, and the content's parent is whatever
   element the boundary left in the template. When that element is the card
   grid — which it is whenever the boundary *is* the container — the nav becomes
   a grid cell: one column wide, stretched to the height of the whole listing,
   with its page links stretched to match. flex-basis covers the flex parent;
   these cover the grid one. */
.jvo-pagination{flex-basis:100%;width:100%;clear:both;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:2.5rem 0;font-size:1rem;grid-column:1/-1;align-self:start}
.jvo-pagination>*{align-self:center}
.jvo-page{display:inline-block;height:auto;padding:.55rem .9rem;border:1px solid currentColor;border-radius:4px;text-decoration:none;line-height:1;opacity:.8}
.jvo-page:hover,.jvo-current{opacity:1}
.jvo-current{font-weight:700}
.jvo-gap{padding:.55rem .25rem;opacity:.6}

/* card grid: replaces the theme's float columns.
   The column count is fixed per breakpoint rather than derived from a minimum
   card width. Deriving it means the count can land on any number, including
   ones the posts-per-page does not divide by, and the last row comes out short
   with a hole beside it. Fixed counts that all divide into the page size keep
   every row full at every size; the widths stay fractional, so cards still
   scale with the viewport. Breakpoints are in em so they follow the reader's
   font size, not a device guess. */
.jvo-grid{display:grid !important;grid-template-columns:1fr;gap:clamp(1rem,2.2vw,1.6rem);float:none !important;width:auto !important;margin-left:0 !important;margin-right:0 !important}
.jvo-grid::before,.jvo-grid::after{display:none !important}
.jvo-grid>*{width:auto !important;max-width:none !important;flex:none !important;float:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;min-width:0}
.jvo-grid>*>*{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
/* A masonry script measures its column width with an empty sizer element it
   drops in as the first child. Absolutely positioned it took no room; in a
   grid it takes a whole cell, and the first row starts one column late with a
   hole where a card should be. It has no content and nothing measures anything
   here any more, so it is laid out as nothing. Scoped to the card container:
   an empty element elsewhere on a builder page is usually load-bearing. */
.jvo-grid > *:empty{display:none}

/* A "read more" that is a link inside a styled box.
   The theme paints the box — background, padding, its own height — and the
   anchor sits inside it as inline text, so only the words are clickable and
   they sit wherever the box's line box puts them: on bookbird.io a 131x77
   navy button with an 81x19 link in its top-left corner. Wherever an element
   in a card holds nothing but one link, the link becomes the box. Images are
   excluded: a figure's anchor already fills it. */
.jvo-grid *:has(> a:only-child):not(figure):not(picture){display:flex;align-items:center;position:relative}
.jvo-grid *:has(> a:only-child):not(figure):not(picture) > a{flex:1 1 auto;text-align:inherit}
/* The box's own padding belongs to the box, not to the link inside it, so a
   click 5px from the label's edge lands on nothing. The link covers the whole
   box instead — the padding is what makes it look like a button, and it should
   behave like one. */
.jvo-grid *:has(> a:only-child):not(figure):not(picture) > a::after{content:"";position:absolute;inset:0}
.jvo-grid figure{margin:0}
.jvo-grid img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
@media (min-width:34em){.jvo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:51em){.jvo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:68em){.jvo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* Uniform cards: a long headline or excerpt must not decide a row's height.
   Each text block is clamped to a fixed number of lines and reserves that
   height whether or not it fills it, so cards line up instead of leaving
   ragged gaps inside them. Line units, so this tracks the font, not pixels. */
.jvo-grid h1,.jvo-grid h2,.jvo-grid h3,.jvo-grid h4,.jvo-grid h5{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh}
.jvo-grid p{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3lh}
@supports not (min-height:1lh){
  .jvo-grid h1,.jvo-grid h2,.jvo-grid h3,.jvo-grid h4,.jvo-grid h5{min-height:2.6em}
  .jvo-grid p{min-height:4.5em}
}

/* keep anything wide from forcing a horizontal scrollbar */
/* Text included. A restored article quotes raw URLs, and a URL is one word:
   one press-release article quotes a link that measured 493px in a 390px
   window, and it took the document with it. Once the document scrolls,
   everything to the right of the fold is reported as overflowing — four menu
   items on that page, none of them at fault — so one long word costs five
   findings and hides its own cause. A break happens only where a word does not
   fit, so ordinary prose is untouched. */
p,li,dd,blockquote,figcaption,h1,h2,h3,h4,h5,h6,td,th{overflow-wrap:anywhere}
img,video,iframe,table{max-width:100%}
img,video{height:auto}
table{display:block;overflow-x:auto;border-collapse:collapse}
pre{overflow-x:auto}

/* No media query on these three: the toggle is dead at *every* width, so the
   half of the header built around it is dead at every width too.
   A theme decides "this is a phone" with a script that writes a class onto
   <body>, and a capture freezes whatever the archive's crawler was using — 158
   of this site's pages carry Astra's ast-header-break-point, so they served the
   mobile header, and its inert hamburger, at 1512px. Scoping the fix to a
   breakpoint fixed the phone and left the desktop showing a button that does
   nothing. */
#brxe-mvltzb{display:none !important}

/* And the region the menu lives in stays displayed, whatever the theme's own
   responsive rules say — they were written for a script that is gone. */


@media (max-width:991px){
  /* The strip has to be *bounded* for overflow-x to mean scrolling. Without a
     width it is sized by its content — 805px of menu in a 390px window — and
     the whole document grows to fit it, so the page scrolls sideways and the
     menu does not. The ancestors are pinned too: a flex or float parent sized
     by its child expands just the same, and the theme's header is both. */
  #brxe-vlrgbv{display:flex !important;flex-wrap:nowrap;overflow-x:auto;gap:2px;padding:0 3.2rem 0 0 !important;margin:0 !important;position:static !important;height:auto !important;max-height:none !important;visibility:visible !important;opacity:1 !important;-webkit-overflow-scrolling:touch;width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box}
  #brxe-vlrgbv:where(*){min-width:0}
  #brxe-vlrgbv>li{float:none !important;flex:0 0 auto;width:auto !important;position:static !important;border:0 !important}
  #brxe-vlrgbv>li>a{white-space:nowrap;padding:.7rem .8rem !important;display:block}
  #brxe-vlrgbv ul{display:none !important}
}
/* Every ancestor of the strip, not just its parent. One box in that chain sized
   by its content is enough: the theme's header is a grid whose columns are
   content-sized, so it measured 969px inside a 390px window and took the
   document with it. :has() is the only way CSS can address an ancestor, and
   pinning all of them costs nothing — one that already fits is unaffected. */
@media (max-width:991px){
  :has(#brxe-vlrgbv){min-width:0 !important;max-width:100% !important}
  :has(> #brxe-vlrgbv){overflow:hidden}
  /* And the strip needs its own line. The theme lays its header out as
     logo-left / nav-right and stacks it at its own breakpoint via the mobile
     header we just hid, so the strip was left sharing a line with the logo with
     186px of a 390px window to live in.
     The boxes are left as the rows they are — flattening them to blocks put the
     header at 2003px tall, because everything the theme positions inside it
     started taking space. What changes is only how the strip's own chain sits
     in those rows: a full-width flex item wraps onto its own line, and a grid
     item spanning every column does the same. */
  :where(header, [class*=header], [id*=header]) :has(#brxe-vlrgbv){flex:1 0 100% !important;grid-column:1 / -1 !important;flex-wrap:wrap !important}
}
.jvo-search{max-width:760px;margin:0 auto;padding:1rem 0 3rem}
.jvo-search-form{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
/* A text input has a default size of 20 characters and does not shrink below
   it unless told to, so field-plus-button needed 352px in a 320px window and
   the whole document scrolled sideways. This is the pipeline's own component,
   which makes it the pipeline's own bug. */
.jvo-search-form input{flex:1 1 12rem;min-width:0;padding:.8rem 1rem;font:inherit;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit}
.jvo-search-form button{padding:.8rem 1.4rem;font:inherit;font-weight:600;border:0;border-radius:4px;cursor:pointer}
.jvo-search-status{opacity:.7;margin:0 0 1rem}
.jvo-search-results{list-style:none;padding:0;margin:0;display:grid;gap:1.2rem}
.jvo-search-results li{padding-bottom:1.2rem;border-bottom:1px solid rgba(128,128,128,.25)}
.jvo-search-results a{font-size:1.15rem;font-weight:700;text-decoration:none;display:block;margin-bottom:.3rem}
.jvo-search-results p{margin:.2rem 0 0;opacity:.8}
.jvo-search-meta{font-size:.85rem;opacity:.6}
.jvo-search-results mark{background:transparent;font-weight:700;color:inherit;text-decoration:underline}