/*
* NARROW-WIDTH RULES FOR MARKUP THE THEME NEVER SAW A PHONE RENDER.
*
* WordPress did not serve this markup to phones. It sniffed the user agent and
* served an ENTIRELY SEPARATE SITE -- different templates for all eight page
* types, a different 190KB stylesheet (dist/styles/books-mobile.css) and a
* different JS bundle. Both are captured in tools/migrate/reference/mobile/,
* fetched from the origin on 2026-09-17 before it was switched off.
*
* We serve one responsive template set instead (decided with the user), so the
* desktop theme now has to cope with widths it was never asked about. It does
* not, and the failures are not subtle:
*
* .l-gallery5>li is calc(25% - 15px) under
* `@media (min-width:0em) and (max-width:63.9375em)` -- FROM ZERO. The base
* `width:100%` above it is dead code that can never apply. So every book grid
* on the site rendered FOUR COVERS ACROSS A PHONE, about 82px each.
*
* .header-logoline .l-justify .logo is `position:absolute; left:50%` at every
* width, holding a 204px wordmark plus a 32px "Books" -- roughly 300px of
* centred logo laid over the hamburger, the country switcher and the search
* on a 390px screen.
*
* `.site-header-basic`, `.header-major`, `.header-logoline`, `.header-tools`,
* `.three-bar` and `.offcanvas` have ZERO max-width rules between them in
* books.css. There was nothing to inherit; this file is what was missing.
*
* WHY NOT globals.css: that file's standing rule is "add nothing the theme
* already styles", and it is 55 lines precisely so it stays auditable. These
* rules are the opposite case -- they exist because the theme styles these
* classes at desktop widths ONLY -- and keeping them apart keeps that rule
* intact and this file's reason for existing legible.
*
* ⚠️ WHY IT LIVES IN public/ AND NOT app/, WHICH LOOKS LIKE THE OBVIOUS PLACE.
* Next hoists every `import "./x.css"` into with `data-precedence`,
* ABOVE the manual tags in layout.tsx. Measured on the live page, the
* order is: Next's chunk (which is where globals.css ends up), THEN
* /theme/books.css. So an imported mobile.css would load BEFORE the theme and
* lose every specificity TIE to it -- and a tie is not an error, it is just the
* theme quietly still winning. Roughly half the rules below tie exactly:
*
* .country-dropdown[open]>.dropdown-panel vs .country-dropdown:not(:hover)
* .dropdown-panel (0,3,0)
* .header-logoline .l-justify .logo both (0,3,0)
* .l-sidebar-nav>div:first-child both (0,2,1)
* .media-box>.media both (0,2,0)
*
* Served from public/ and linked AFTER books.css, they win on source order --
* the same way the theme itself is loaded, and for the same reason.
*
* Every breakpoint below is one books.css already uses (31.1875/31.25em,
* 47.9375/48em, 63.9375/64em). Inventing new ones would put our steps half a
* step out from the theme's own and show up as a jolt mid-resize.
*
* Column counts come from the captured mobile site, which is the only evidence
* of what Crossmap intended a phone to show: every book grid there is
* `masonry-2` -- TWO ACROSS -- on the home, category, topic and author pages
* alike.
*/
/* ---------------------------------------------------------------------------
* ⚠️ THE ONE THAT MAKES EVERY OTHER RULE IN THIS FILE MEAN ANYTHING.
*
* body,html{min-width:768px;height:100%}
*
* The desktop theme sets a HARD 768px FLOOR on the document. That is not an
* oversight -- it is the sheet declaring itself unusable below 768px, and it is
* the real reason WordPress shipped a separate mobile site at all.
*
* On a 440px phone the body is therefore 768px and the page simply overflows
* sideways by 328px. Every other rule below still "worked": the gallery really
* did become two columns, the media boxes really did unstack -- against a
* 768px canvas, off the side of the screen. The site looked untouched.
*
* This is also why the first pass at this file did not fix the bug it was
* written for. The cascade tests asserted `.l-gallery5`, `.l-sidebar-nav`,
* `.header-logoline` and `.media-box` all resolved correctly, and they did --
* but nothing asked how wide `body` was, and that single declaration made the
* answer irrelevant. Checking the rules you wrote is not the same as checking
* the page.
* ------------------------------------------------------------------------- */
@media (max-width: 47.9375em) {
html,
body {
min-width: 0;
}
}
/* ---------------------------------------------------------------------------
* Book grids
*
* Switched to CSS grid rather than corrected float-by-float. The theme's
* gallery is floats plus four nth-child rules per breakpoint (`4n` clears,
* `4n+1` margins, `-n+4` bottoms); re-deriving that set for two and three
* columns is four more rules per breakpoint that all have to agree, and one
* wrong modulus leaves a visible stagger only at that width. Grid states the
* column count once. Float and clear are ignored on a grid item by spec, so
* the theme's nth-child rules go quiet on their own -- and the margins it does
* set at higher specificity all set 0, which is what the gap wants anyway.
*
* `:nth-child(n)` on our own selectors is not decoration: it lifts them to
* (0,2,1) so they outrank the theme's own `>li:nth-child(4n)` pair. The theme
* uses the same idiom on `.l-gallery2` for the same reason.
* ------------------------------------------------------------------------- */
@media (max-width: 47.9375em) {
.l-gallery5,
.l-gallery6,
.l-masonry5,
.l-masonry6 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.l-gallery5 > li:nth-child(n),
.l-gallery6 > li:nth-child(n),
.l-masonry5 > li:nth-child(n),
.l-masonry6 > li:nth-child(n) {
width: auto;
margin: 0;
}
/* The theme's clearfix would otherwise add an empty grid cell of its own. */
.l-gallery5::after,
.l-gallery6::after,
.l-masonry5::after,
.l-masonry6::after {
content: none;
}
}
/* 500px is where two 165px covers stop being the best use of the row. */
@media (min-width: 31.25em) and (max-width: 47.9375em) {
.l-gallery5,
.l-gallery6,
.l-masonry5,
.l-masonry6 {
grid-template-columns: repeat(3, 1fr);
}
}
/*
* Book titles are long and occasionally one unbroken token ("9780593238509",
* a run-on subtitle). In a 165px cell that pushes the grid wider than the
* viewport and scrolls the whole page sideways, which reads as "the site is
* broken" far more than a hyphen does.
*/
.l-gallery5 h3,
.l-gallery6 h3,
.l-masonry5 h3,
.l-masonry6 h3 {
overflow-wrap: break-word;
}
/* ---------------------------------------------------------------------------
* The category archive's sidebar column
*
* `.books-sidebar-nav` is `display:none` below 64em, but the DIV THAT HOLDS IT
* keeps its `float:left; width:200px` -- the theme only ever hides the nav, not
* its column. So the grid beside it stayed at `calc(100% - 240px)`: 150px of
* usable width on a 390px phone, holding a four-across gallery, i.e. covers
* about 22px wide. This is the single worst thing on the phone site.
*
* WordPress had the same dead column at tablet widths and nobody saw it,
* because below 1024px the mobile site took over and this stylesheet was never
* sent. We have no second site to hand off to, so the column has to collapse.
* ------------------------------------------------------------------------- */
@media (max-width: 63.9375em) {
.l-sidebar-nav > div:first-child,
.l-sidebar-nav > div:nth-child(2) {
float: none;
width: auto;
}
}
/* ---------------------------------------------------------------------------
* Header
*
* The logo is absolutely centred over the row at every width in books.css. At
* 390px that is ~300px of logo across a ~350px row that also has to hold the
* hamburger, the country switcher and the search. Putting it back in flow lets
* `.l-justify`'s own `justify-content:space-between` do the work it already
* does everywhere else.
* ------------------------------------------------------------------------- */
@media (max-width: 63.9375em) {
.header-logoline .l-justify .logo {
position: static;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.header-logoline .logo img {
width: 8.25rem;
}
.header-logoline .section-name {
font-size: 22px;
margin-left: 0.375rem;
}
/*
* The hamburger is an inline `.i-nav` of three 18px rules -- about 18x13px
* of hit area, well under the 24px minimum a thumb can land on. The theme
* solves this in its own topbar with a `:before` overlay rather than padding
* (padding would move the icon off the baseline it shares with the country
* switcher), so this follows that.
*/
.three-bar {
position: relative;
display: inline-block;
}
.three-bar::before {
content: "";
position: absolute;
left: -0.625rem;
right: -0.625rem;
top: -0.75rem;
bottom: -0.75rem;
}
}
@media (max-width: 31.1875em) {
.header-logoline .logo img {
width: 6.5rem;
}
.header-logoline .section-name {
font-size: 18px;
}
.header-logoline .current-country {
font-size: 0.8125rem;
}
}
/*
* The Crossmap network bar is seven items at 12px. Below ~640px they wrap to
* two and three lines and the coloured band grows to swallow the top of the
* page. Scrolling it sideways is the theme's own answer to the same problem on
* its global header (`.site-header.global .header-nav-home>.container`, at
* max-width:69.3125em), so it is the one used here.
*/
@media (max-width: 47.9375em) {
.topbar-nav > .container {
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.topbar-nav > .container::-webkit-scrollbar {
display: none;
}
}
/*
* ⚠️ THE COUNTRY SWITCHER WAS UNOPENABLE ON TOUCH, AT EVERY WIDTH.
*
* books.css hides the panel with `.country-dropdown:not(:hover) .dropdown-panel
* { display:none }`. We render a `` precisely so it opens without the
* theme's jQuery -- but opening a `` does not make the element
* `:hover`, and a touch screen has no hover at all, so the panel stayed hidden
* however hard it was tapped. The `` toggled an invisible thing.
*
* This matches the theme's specificity exactly ((0,3,0) either way) and wins on
* source order, which is why this file has to stay after books.css.
*/
.country-dropdown[open] > .dropdown-panel {
display: block;
}
/* ---------------------------------------------------------------------------
* Media boxes: the book cover on the detail page, the portrait on the author
* page. Both are floats with a text column beside them, sized for a desktop
* measure: `.media-box.lg>.right` shrink-wraps a 271px cover and leaves the
* metadata list 49px on a 390px screen.
* ------------------------------------------------------------------------- */
@media (max-width: 47.9375em) {
.media-box.lg > .right,
.media-box.md > .right {
float: none;
margin-left: 0;
margin-right: 0;
margin-bottom: 1.25rem;
text-align: center;
}
.media-box > .media,
.media-box > figure {
max-width: none;
}
/*
* Unstacked, `img { max-width:100% }` would blow the cover up to the full
* 350px measure -- larger than it ever appeared on the old site, and it would
* push the title and buy links below the fold on every book. 200px is about
* what the captured mobile detail page gave its cover.
*/
.media-box.lg > .right img {
width: 12.5rem;
}
}
@media (max-width: 31.1875em) {
/* The author portrait is a fixed 120px `.avatar xxl`; below 500px the bio
column beside it drops under ~190px, which is too narrow to read. */
.media-box.md > .media.right {
float: none;
margin-left: 0;
margin-right: 0;
margin-bottom: 1rem;
}
}
/*
* The detail page's metadata is `.l-gallery2` -- two columns, `calc(50% - 10px)`
* at every width. Each cell is a label and a value on one line ("Publication
* date January 2, 2024"), so at 165px they wrap into two ragged lines each.
* One column reads as a list, which is what it is.
*/
@media (max-width: 31.1875em) {
.l-gallery2 > li:nth-child(n) {
width: 100%;
float: none;
margin-right: 0;
}
}